@cloudgrid-io/ui 0.31.2 → 0.31.4

package/dist/index.js

@@ -48,6 +48,7 @@ export * from "./blocks/celebration.js";
 export * from "./blocks/cloudgrid-install.js";
 export * from "./blocks/command-field.js";
 export * from "./blocks/compare-table.js";
+export * from "./blocks/confirm-delete-dialog.js";
 export * from "./blocks/creation-tile.js";
 export * from "./blocks/cta-banner.js";
 export * from "./blocks/drop-zone.js";
@@ -71,6 +72,8 @@ export * from "./blocks/pricing-tiers.js";
 export * from "./blocks/prompt-block.js";
 export * from "./blocks/quote.js";
 export * from "./blocks/rich-text.js";
+export * from "./blocks/shelf.js";
+export * from "./blocks/showcase-scroll.js";
 export * from "./blocks/side-nav.js";
 export * from "./blocks/sign-in-options.js";
 export * from "./blocks/stage-panel.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,mCAAmC,CAAA;AACjD,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}

package/dist/shadcn.css

@@ -204,3 +204,44 @@
   --accent: var(--cg-surface-page-alt);
   --secondary: var(--cg-surface-page-alt);
 }
+
+
+/*
+  The default border colour: the hairline, on every element, on every surface.
+
+  Tailwind v4 dropped v3's `border-color: theme(borderColor.DEFAULT)` from
+  preflight. Its reset is `border: 0 solid`, which leaves border-color at its
+  initial value, `currentColor`. So any element with `border` or `border-b` and no
+  colour utility draws its rule in the TEXT colour: the library `Table`'s row
+  rules (`border-b` on every `tr`), the Console's App controls dividers, the Shelf
+  table, all near-black on white. shadcn's own template fixes this in the app's
+  globals with `* { @apply border-border }`; this registry's globals did the same,
+  which is why nothing looked wrong here while the Console showed black rules.
+  It belongs in the library, once, for every consumer.
+
+  Why it flips with no per-scope copy (rule 2 is about a custom property declared
+  in terms of another; this is a plain property):
+    - border-color does NOT inherit, so `var(--border)` is evaluated on EACH
+      element, against the --border that element inherits;
+    - --border is declared in all three scopes above, so inside
+      [data-cg-surface="panel"] or "ink" it is already that scope's hairline.
+  Measured in registry/e2e/border-default.spec.ts on white, panel and ink.
+
+  `@layer base`, so every colour utility (`border-line`, `border-brand`,
+  `border-danger-border`, ...) still wins: utilities is a later layer. It must
+  come after Tailwind's preflight in the same layer, which the documented import
+  order (this file after `@import "tailwindcss"`) guarantees; preflight's
+  `border: 0 solid` would otherwise reset it to currentColor.
+
+  No new name: `--border` is shadcn's own and is only READ here (rule 4).
+  The selector list is preflight's, so nothing it resets is left uncovered.
+*/
+@layer base {
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--border);
+  }
+}

package/dist/theme.css

@@ -451,6 +451,11 @@
   --shadow-raised: var(--cg-shadow-raised);
   --shadow-hover: var(--cg-shadow-hover);
   --shadow-panel: var(--cg-shadow-panel);
+  /* A picture tile sitting straight on a surface (#283). These two FLIP: the
+     panel scope redeclares them in violet, because an ink shadow vanishes on the
+     purple. `inline` is what lets shadow-tile follow the scope at the element. */
+  --shadow-tile: var(--cg-shadow-tile);
+  --shadow-tile-hover: var(--cg-shadow-tile-hover);
   --shadow-focus: var(--cg-ring-focus);
   /* The live dot's halo (#154), paired with --cg-live-halo the way --shadow-focus
      is paired with --cg-focus-ring. */

package/dist/tokens/base.json

@@ -1735,6 +1735,26 @@
         }
       }
     },
+    "shadow-tile": {
+      "$value": "{elevation.shadow-card}",
+      "$description": "The lift under a picture tile that sits directly on a surface: the showcase's\ncreation cards (#283). A ROLE, declared in all three scopes, because the value that\nreads depends on the ground. On white and on ink it is --cg-shadow-card. On the\npurple panel an ink shadow at 4% vanishes, so the panel scope redeclares it as the\nsame geometry in a deep violet (surface-panel.json).\n\nDeclared on ink as well, as the card shadow, so a tile inside an ink block that is\nitself inside the panel does not inherit the violet.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-tile"
+        }
+      }
+    },
+    "shadow-tile-hover": {
+      "$value": "{elevation.shadow-hover}",
+      "$description": "The deeper lift of a hovered picture tile (#283). Same three-scope reasoning as\n--cg-shadow-tile: --cg-shadow-hover on white and on ink, a violet on the panel.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-tile-hover"
+        }
+      }
+    },
     "ring-focus": {
       "$value": "0 0 0 3px var(--cg-focus-ring)",
       "$extensions": {

package/dist/tokens/surface-ink.json

@@ -338,5 +338,26 @@
         }
       }
     }
+  },
+  "elevation": {
+    "$description": "elevation: the picture-tile shadows, pinned back to the card shadows on ink (#283).\n\nNo ink value was designed. These exist so a tile on ink nested inside the panel\ndoes not inherit the panel's violet.",
+    "shadow-tile": {
+      "$value": "{elevation.shadow-card}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-tile"
+        }
+      }
+    },
+    "shadow-tile-hover": {
+      "$value": "{elevation.shadow-hover}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-tile-hover"
+        }
+      }
+    }
   }
 }

package/dist/tokens/surface-panel.json

@@ -324,5 +324,26 @@
         }
       }
     }
+  },
+  "elevation": {
+    "$description": "elevation: the picture-tile shadows, redeclared for the purple ground (#283).\n\nSOURCE: the founder-approved showcase mock (v3, 2026-10-06). The library's ink\nshadows are 4-8% of #222 and disappear on #5a47f0, so a tile looked pasted on rather\nthan sitting on the panel. These are a deep violet, rgb(24, 12, 110): the panel's\nown hue taken down to near-black, so the shadow reads as the panel in shade rather\nthan as a grey cast on it.",
+    "shadow-tile": {
+      "$value": "0 1px 2px rgba(24, 12, 110, 0.16), 0 6px 16px -4px rgba(24, 12, 110, 0.26)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-tile"
+        }
+      }
+    },
+    "shadow-tile-hover": {
+      "$value": "0 2px 4px rgba(24, 12, 110, 0.18), 0 16px 32px -8px rgba(24, 12, 110, 0.42)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-tile-hover"
+        }
+      }
+    }
   }
 }

package/dist/tokens.css

@@ -1390,6 +1390,20 @@
   --cg-shadow-raised: 0 4px 14px rgba(34, 34, 34, 0.06);
   --cg-shadow-hover: 0 8px 24px rgba(34, 34, 34, 0.08);
   --cg-shadow-panel: 0 10px 40px rgba(90, 71, 240, 0.18);
+  /*
+     The lift under a picture tile that sits directly on a surface: the showcase's
+     creation cards (#283). A ROLE, declared in all three scopes, because the value that
+     reads depends on the ground. On white and on ink it is --cg-shadow-card. On the
+     purple panel an ink shadow at 4% vanishes, so the panel scope redeclares it as the
+     same geometry in a deep violet (surface-panel.json).
+
+     Declared on ink as well, as the card shadow, so a tile inside an ink block that is
+     itself inside the panel does not inherit the violet. */
+  --cg-shadow-tile: var(--cg-shadow-card);
+  /*
+     The deeper lift of a hovered picture tile (#283). Same three-scope reasoning as
+     --cg-shadow-tile: --cg-shadow-hover on white and on ink, a violet on the panel. */
+  --cg-shadow-tile-hover: var(--cg-shadow-hover);
   --cg-ring-focus: 0 0 0 3px var(--cg-focus-ring);
   /*
      The live dot's halo as a ready-made box-shadow, so a surface draws the mark with
@@ -1654,6 +1668,17 @@
   /*
      Translucent white — the base wash is a dark ink and would not register on the panel ground. */
   --cg-hover: rgba(255, 255, 255, 0.10);
+
+  /* ---- elevation ----
+     elevation: the picture-tile shadows, redeclared for the purple ground (#283).
+
+     SOURCE: the founder-approved showcase mock (v3, 2026-10-06). The library's ink
+     shadows are 4-8% of #222 and disappear on #5a47f0, so a tile looked pasted on rather
+     than sitting on the panel. These are a deep violet, rgb(24, 12, 110): the panel's
+     own hue taken down to near-black, so the shadow reads as the panel in shade rather
+     than as a grey cast on it. */
+  --cg-shadow-tile: 0 1px 2px rgba(24, 12, 110, 0.16), 0 6px 16px -4px rgba(24, 12, 110, 0.26);
+  --cg-shadow-tile-hover: 0 2px 4px rgba(24, 12, 110, 0.18), 0 16px 32px -8px rgba(24, 12, 110, 0.42);
 }
 
 [data-cg-surface='ink'] {
@@ -1743,4 +1768,12 @@
   /*
      Translucent white — the base wash is a dark ink and would not register on the ink ground. */
   --cg-hover: rgba(255, 255, 255, 0.06);
+
+  /* ---- elevation ----
+     elevation: the picture-tile shadows, pinned back to the card shadows on ink (#283).
+
+     No ink value was designed. These exist so a tile on ink nested inside the panel
+     does not inherit the panel's violet. */
+  --cg-shadow-tile: var(--cg-shadow-card);
+  --cg-shadow-tile-hover: var(--cg-shadow-hover);
 }

package/dist/tokens.json

@@ -183,6 +183,8 @@
       "--cg-shadow-raised": "0 4px 14px rgba(34, 34, 34, 0.06)",
       "--cg-shadow-hover": "0 8px 24px rgba(34, 34, 34, 0.08)",
       "--cg-shadow-panel": "0 10px 40px rgba(90, 71, 240, 0.18)",
+      "--cg-shadow-tile": "var(--cg-shadow-card)",
+      "--cg-shadow-tile-hover": "var(--cg-shadow-hover)",
       "--cg-ring-focus": "0 0 0 3px var(--cg-focus-ring)",
       "--cg-ring-live": "0 0 0 4px var(--cg-live-halo)",
       "--cg-duration-fast": "120ms",
@@ -237,7 +239,9 @@
       "--cg-pending-strong": "var(--cg-expired-strong)",
       "--cg-unhealthy-strong": "var(--cg-text-primary)",
       "--cg-danger-strong": "var(--cg-text-primary)",
-      "--cg-hover": "rgba(255, 255, 255, 0.10)"
+      "--cg-hover": "rgba(255, 255, 255, 0.10)",
+      "--cg-shadow-tile": "0 1px 2px rgba(24, 12, 110, 0.16), 0 6px 16px -4px rgba(24, 12, 110, 0.26)",
+      "--cg-shadow-tile-hover": "0 2px 4px rgba(24, 12, 110, 0.18), 0 16px 32px -8px rgba(24, 12, 110, 0.42)"
     },
     "ink": {
       "--cg-text-primary": "#ffffff",
@@ -275,7 +279,9 @@
       "--cg-pending-strong": "var(--cg-expired-strong)",
       "--cg-unhealthy-strong": "var(--cg-text-primary)",
       "--cg-danger-strong": "var(--cg-text-primary)",
-      "--cg-hover": "rgba(255, 255, 255, 0.06)"
+      "--cg-hover": "rgba(255, 255, 255, 0.06)",
+      "--cg-shadow-tile": "var(--cg-shadow-card)",
+      "--cg-shadow-tile-hover": "var(--cg-shadow-hover)"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.31.2",
+  "version": "0.31.4",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",