Ship the renderer-independent Components 4 foundation

.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).

.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**
@@ -101,7 +102,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
 
@@ -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.

.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`
@@ -58,7 +59,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.
@@ -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>
     );
@@ -151,26 +155,26 @@ 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('');
     const isValid = name.trim().length > 0;
 
     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
+            <input
                 value={name}
-                onChange={event => setName(event.target.value)}
-                placeholder="Enter a name"
+                onChange={(event) => setName(event.target.value)}
+                placeholder='Enter a name'
+                className='cratis-field-input w-full'
                 autoFocus
             />
         </Dialog>
@@ -189,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>
+        <Page title='Projects'>
+            <Button
+                text
+                icon={<mdIcons.MdAdd />}
+                label='Add Project'
+                onClick={() => showAddProjectDialog()}
+            />
             <Listing />
             <AddProjectDialog />
         </Page>
@@ -215,7 +220,8 @@ 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.
 3. Use `clickElement` or `typeInPage` to test interactive elements.
@@ -232,7 +238,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