@cratis/components 3.3.4 → 3.5.0

package/dist/esm/theme.css

@@ -39,8 +39,8 @@
     --cratis-orange-500:         var(--p-orange-500, #f59e0b);
     --cratis-red-500:            var(--p-red-500, #ef4444);
 
-    --cratis-surface-0:          var(--p-surface-0, #ffffff);
-    --cratis-surface-100:        var(--p-surface-100, #f1f5f9);
+    --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);
@@ -239,9 +239,35 @@
 .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'] { background: var(--cratis-maskbg, rgba(0, 0, 0, 0.5)); }
+.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;
@@ -257,7 +283,7 @@
     border-bottom: 1px solid var(--cratis-surface-border);
     font-weight: 600;
 }
-.cratis-theme [data-scope='dialog'][data-part='content'] { padding: 1.25rem; }
+.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);

package/dist/esm/tokens.css

@@ -24,10 +24,12 @@
  * 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:
+ * 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 Aura from '@primeuix/themes/aura';
- *   <CratisComponentsProvider value={{ theme: { preset: Aura } }}>
+ *   import { styledMode } from '@cratis/components/styled';
+ *   <CratisComponentsProvider value={{ license, ...styledMode() }}>
  *
  * So the chain is: preset (JS) → --p-* (runtime) → --cratis-* (this file) → component CSS.
  *
@@ -39,12 +41,12 @@
  *
  * ## Three ways to get a look
  *
- * 1. **A licensed preset** — `value={{ theme: { preset: Aura } }}`. The styled layer
- *    is license-gated in v11; without a PrimeUI key it nags and falls back.
- * 2. **The Cratis baseline theme** — `import '@cratis/components/theme'`. A
- *    license-free stylesheet that assigns the --cratis-* tokens directly (light and
- *    dark), so it needs no preset and no key. It defers to a preset's --p-* values
- *    when one is present.
+ * 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 {
@@ -60,8 +62,13 @@
 
 :root {
     /* Surfaces */
-    --cratis-surface-0:        var(--p-surface-0, var(--surface-0));
-    --cratis-surface-100:      var(--p-surface-100, var(--surface-100));
+    /* 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));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/components",
-    "version": "3.3.4",
+    "version": "3.5.0",
     "description": "",
     "author": "Cratis",
     "license": "MIT",
@@ -34,6 +34,10 @@
             "types": "./dist/esm/index.d.ts",
             "import": "./dist/esm/index.js"
         },
+        "./Canvas": {
+            "types": "./dist/esm/Canvas/index.d.ts",
+            "import": "./dist/esm/Canvas/index.js"
+        },
         "./CommandDialog": {
             "types": "./dist/esm/CommandDialog/index.d.ts",
             "import": "./dist/esm/CommandDialog/index.js"
@@ -54,6 +58,10 @@
             "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"
@@ -106,13 +114,18 @@
             "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"
+        "./theme": "./dist/esm/theme.css",
+        "./primereact-v10-palette": "./dist/esm/primereact-v10-palette.css"
     },
     "scripts": {
         "prepare": "yarn g:build",
@@ -131,15 +144,17 @@
     },
     "dependencies": {
         "allotment": "1.20.5",
-        "framer-motion": "12.42.2",
-        "pixi.js": "^8.19.0",
+        "framer-motion": "13.1.1",
+        "pixi.js": "^8.20.0",
         "react-icons": "5.7.0",
         "ts-deepmerge": "8.0.0"
     },
     "devDependencies": {
-        "@cratis/arc.vite": "21.19.0",
+        "@cratis/arc.vite": "22.1.0",
         "@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",
@@ -148,12 +163,15 @@
         "primereact": "11.1.0"
     },
     "peerDependencies": {
-        "@cratis/arc": ">=20.3.1 <22",
-        "@cratis/arc.react": ">=20.3.1 <22",
+        "@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",
@@ -162,8 +180,14 @@
         "tsyringe": "4.10.0"
     },
     "peerDependenciesMeta": {
+        "@primereact/styles": {
+            "optional": true
+        },
         "@primereact/types": {
             "optional": true
+        },
+        "@primeuix/themes": {
+            "optional": true
         }
     }
 }