Move to PrimeReact 11 and @cratis/components 3.0.0

Documentation/blueprints/getting-started.md

@@ -11,12 +11,11 @@ You need a React application, `@cratis/scene.react`, and the blueprint itself.
 
 ## Install and load the stylesheet
 
-The blueprint's shell is hand-written CSS - PrimeReact 10 has no application-shell primitive to lean on -
+The blueprint's shell is hand-written CSS - it predates any application-shell primitive to lean on -
 so the stylesheet has to be loaded once, at your entry point, along with PrimeReact's own.
 
 ```ts
-import 'primereact/resources/primereact.min.css';
-import 'primereact/resources/themes/lara-light-indigo/theme.css';
+import 'primeicons/primeicons.css';
 import 'primeicons/primeicons.css';
 import '@cratis/scene.blueprint.default/styles';
 ```

Documentation/components-package/theming.md

@@ -89,13 +89,13 @@ CSS custom property: it splits on `.`, kebab-cases each part, and prefixes `--sc
 ## A theme still has to be loaded
 
 The bridge tints the surfaces the Cratis wrappers own. It does not, on its own, skin PrimeReact's widgets:
-in PrimeReact 10 every widget's *structural* CSS — padding, borders, the dialog frame, focus rings — ships
+in PrimeReact 11 every widget's *structural* CSS — padding, borders, the dialog frame, focus rings — comes
 inside the theme file, and there is no separate primitives stylesheet. An application that loads no
 PrimeReact theme has no structural CSS, and its components render as raw HTML primitives whatever the tokens
 say.
 
 So load a PrimeReact theme underneath, and use Scene tokens to move it to your palette. The
-[PrimeReact package](../primereact-package/index.md) ships every free PrimeReact 10 theme as a Scene theme,
+[PrimeReact package](../primereact-package/index.md) ships 24 themes built on PrimeTek's `@primeuix/themes` presets as Scene themes,
 with its tokens read verbatim out of the theme's own `:root` block — so the token layer always agrees with
 what the stylesheet renders. Its [theme reference](../primereact-package/theme-reference.md) lists the
 values each theme carries for the thirteen tokens above.

Documentation/primereact-package/index.md

@@ -6,7 +6,7 @@ description: The Scene package that maps abstract component names onto real Prim
 A screen written in Screenplay says `button`. It does not say `PrimeReact.Button`, and it does not import
 anything. Something has to turn that name into a real React component — and that something is a package.
 
-`@cratis/scene.primereact` is the package that turns Scene's abstract names into PrimeReact 10 components.
+`@cratis/scene.primereact` is the package that turns Scene's abstract names into PrimeReact 11 components.
 Add `PrimeReact` to a `ui profile` and 87 names become resolvable, 25 themes become selectable, and every
 screen you have already written renders through a real, themed component library without a single edit.
 
@@ -47,7 +47,7 @@ why that is the mechanism and not a collision.
 import { primeReactPackageManifest } from '@cratis/scene.primereact';
 
 primeReactPackageManifest.name;         // 'PrimeReact'
-primeReactPackageManifest.version;      // '10.9.8'
+primeReactPackageManifest.version;      // '11.1.0'
 primeReactPackageManifest.kind;         // PackageKind.ComponentLibrary
 primeReactPackageManifest.dependencies; // [{ name: 'Tailwind' }]
 primeReactPackageManifest.components;   // 87 abstract names
@@ -68,25 +68,26 @@ supplies the layout and the templates themselves. See [Blueprints](../blueprints
 
 ## The two halves of theming
 
-A PrimeReact 10 theme is a pre-compiled CSS file, not a set of runtime variables. So theming a Scene screen
-that uses this package takes two things working together:
+A PrimeReact 11 theme is a `@primeuix/themes` preset object, which `@primeuix/styled` turns into `--p-*`
+custom properties at runtime. So theming a Scene screen that uses this package takes two things working
+together:
 
 ```mermaid
 flowchart LR
     Theme["Scene Theme<br/>(name + 13 tokens)"]
     Hook["usePrimeReactTheme"]
     Provider["SceneThemeProvider"]
-    Link["&lt;link id='theme-link'&gt;<br/>theme.css"]
+    Preset["PrimeReactProvider<br/>--p-* properties"]
     Tokens["--scene-* on the<br/>theme root element"]
-    Prime["PrimeReact components<br/>(.p-* elements)"]
+    Prime["PrimeReact components<br/>(read --p-*)"]
     Wrappers["Scene wrappers, core,<br/>layout CSS"]
 
-    Theme --> Hook --> Link --> Prime
+    Theme --> Hook --> Preset --> Prime
     Theme --> Provider --> Tokens --> Wrappers
     Tokens -.->|primeReactTheme.css<br/>bridges back| Prime
 ```
 
-Neither half is enough alone: drop the hook and PrimeReact's components keep the old skin; drop the provider
+Neither half is enough alone: drop the hook and PrimeReact's components render unstyled; drop the provider
 and the wrappers around them do not follow. [Switch themes live](./switch-themes-live.md) shows the wiring,
 and [Understanding design tokens](./understanding-design-tokens.md) explains the bridge in the middle.