@ramme-io/ui 4.0.0 → 4.1.0

package/dist/lib/theme/themeUtils.js

@@ -1,17 +1,18 @@
+import { DEFAULT_THEME_TOKENS as d } from "@ramme-io/shared";
 const m = (o, p) => {
   const a = o.split(" ").map(Number);
   if (a.length !== 3) return o;
   const r = (t) => Math.max(0, Math.min(255, t));
   return `${r(a[0] + p)} ${r(a[1] + p)} ${r(a[2] + p)}`;
-}, d = (o) => {
+}, g = (o) => {
   const [p, a, r] = o.split(" ").map(Number);
   return (0.2126 * p + 0.7152 * a + 0.0722 * r) / 255 > 0.45 ? "15 23 42" : "255 255 255";
-}, h = (o, p) => {
+}, f = (o, p) => {
   if (!o || typeof o != "object") return;
   const a = p || document.documentElement, r = { ...o }, t = r["--app-primary-color"];
-  t && (r["--app-primary-foreground-color"] = d(t));
+  t && (r["--app-primary-foreground-color"] = g(t));
   const l = r["--app-bg-color"];
-  l && (r["--app-text-color"] = d(l)), Object.entries({
+  l && (r["--app-text-color"] = g(l)), Object.entries({
     "--primary": "--app-primary-color",
     "--bg": "--app-bg-color",
     "--text": "--app-text-color",
@@ -32,33 +33,44 @@ const m = (o, p) => {
   ].join(", "), r["--app-secondary-color"] || (r["--app-secondary-color"] = "100 116 139"), r["--app-accent-color"] || (r["--app-accent-color"] = r["--app-primary-color"]), r["--app-input-bg-color"] || (r["--app-input-bg-color"] = r["--app-card-bg-color"]), r["--app-input-border-color"] || (r["--app-input-border-color"] = r["--app-border-color"]), r["--app-border-radius-md"] || (r["--app-border-radius-md"] = "0.375rem"), Object.entries(r).forEach(([s, i]) => {
     s.startsWith("--app-") && a.style.setProperty(s, String(i));
   });
-}, u = (o, p) => {
+}, b = (o, p) => {
   const a = document.head, r = "dynamic-google-fonts", t = document.getElementById(r);
   t && a.removeChild(t);
   const l = `${o.replace(/ /g, "+")}:wght@400;700&family=${p.replace(/ /g, "+")}:wght@400;500;700`, n = document.createElement("link");
   n.id = r, n.rel = "stylesheet", n.crossOrigin = "anonymous", n.href = `https://fonts.googleapis.com/css2?family=${l}&display=swap`, a.insertBefore(n, a.firstChild);
   const e = document.documentElement;
   e.style.setProperty("--app-font-sans", `"${p}", sans-serif`), e.style.setProperty("--app-font-serif", `"${o}", serif`), console.log(`[FontEngine] Applied: ${o} (H) / ${p} (B)`);
-}, f = (o) => {
+}, y = (o) => {
   const p = o.replace("#", ""), a = parseInt(p.substring(0, 2), 16), r = parseInt(p.substring(2, 4), 16), t = parseInt(p.substring(4, 6), 16);
   return `${a} ${r} ${t}`;
-}, g = {
+}, u = {
   none: "0",
   sm: "0.25rem",
   md: "0.375rem",
   lg: "0.5rem",
   full: "9999px"
-}, b = (o) => ({
+}, $ = [
+  "--app-primary-color",
+  "--app-secondary-color",
+  "--app-success-color",
+  "--app-warning-color",
+  "--app-danger-color",
+  "--app-border-radius-md"
+], E = (o) => o ? Object.keys(d).some((p) => o[p] !== void 0 && o[p] !== d[p]) : !1, M = (o) => ({
   "--app-primary-color": o.primary ?? "13 110 253",
   "--app-secondary-color": o.neutral ?? "24 24 27",
   "--app-success-color": o.success ?? "34 197 94",
   "--app-warning-color": o.warning ?? "234 179 8",
-  "--app-destructive-color": o.destructive ?? "239 68 68",
-  "--app-border-radius-md": g[o.radius ?? "md"] ?? "0.375rem"
+  // NOT `--app-destructive-color`, which this wrote until now: that variable
+  // is defined nowhere in index.css and read by nothing, so the Destructive
+  // swatch in ThemeLab changed a value no stylesheet consumed. The token the
+  // preset actually maps `destructive` on to is `--app-danger-color`.
+  "--app-danger-color": o.destructive ?? "239 68 68",
+  "--app-border-radius-md": u[o.radius ?? "md"] ?? "0.375rem"
 }), c = (o = 0, p = 255) => {
   const a = Math.floor(Math.random() * (p - o) + o), r = Math.floor(Math.random() * (p - o) + o), t = Math.floor(Math.random() * (p - o) + o);
   return `${a} ${r} ${t}`;
-}, y = () => {
+}, T = () => {
   const o = Math.random() > 0.5, p = o ? c(10, 40) : c(240, 255), a = o ? c(220, 255) : c(20, 60), r = c(50, 200);
   return {
     "--app-primary-color": r,
@@ -73,11 +85,13 @@ const m = (o, p) => {
   };
 };
 export {
-  h as applyThemeToDom,
-  y as generateRandomTheme,
-  d as getContrastColor,
-  f as hexToRgbTriplet,
-  u as loadGoogleFont,
+  $ as THEME_TOKEN_VARS,
+  f as applyThemeToDom,
+  T as generateRandomTheme,
+  g as getContrastColor,
+  y as hexToRgbTriplet,
+  E as isCustomTheme,
+  b as loadGoogleFont,
   c as randomRgb,
-  b as tokensToVars
+  M as tokensToVars
 };

package/dist/wizardManifest.js

@@ -398,6 +398,25 @@ const e = {
       humanLabel: "AIChatThread",
       humanDescription: "A complete chat surface — message history, streaming indicator, error banner, provider/model attribution, and the composer. Strategic purpose: the presentational half of a chat feature, driven entirely by props from kernel's useRammeAI(). It holds no transport of its own, and takes a `renderMessage` override so products can add markdown or rich rendering without pulling those deps into @ramme-io/ui."
     },
+    {
+      id: "architecture-reference-card",
+      name: "ArchitectureReferenceCard",
+      version: "1.0.0",
+      description: "AI-generated card summarizing this platform's own data architecture — stack, data model, AI pipelines, and sentinel fleet",
+      tags: [
+        "ai",
+        "architecture",
+        "reference",
+        "generative-ui"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./components/ai/ArchitectureReferenceCard/ArchitectureReferenceCard",
+      filePath: "src/components/ai/ArchitectureReferenceCard/ArchitectureReferenceCard.tsx",
+      sku: "@molecule/ai/architecture-reference-card",
+      humanLabel: "ArchitectureReferenceCard",
+      humanDescription: "AI-generated card summarizing this platform's own data architecture — stack, data model, AI pipelines, and sentinel fleet"
+    },
     {
       id: "company-profile-card",
       name: "CompanyProfileCard",
@@ -425,6 +444,77 @@ const e = {
       humanLabel: "CompanyProfileCard",
       humanDescription: "A company summary for a ticker — sector, industry, and description — fetched on demand and cached. Strategic purpose: a generative-UI block an AI tool call can render directly into a chat thread. Surfaces its own provenance, distinguishing a live fetch from a cached or stale answer instead of presenting all three as equally fresh."
     },
+    {
+      id: "counterparty-graph-card",
+      name: "CounterpartyGraphCard",
+      version: "1.0.0",
+      description: "AI-generated counterparty relationship card showing suppliers, customers, partners, and competitors inferred from alternative signals",
+      tags: [
+        "ai",
+        "counterparty",
+        "graph",
+        "relationships",
+        "generative-ui"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./components/ai/CounterpartyGraphCard/CounterpartyGraphCard",
+      filePath: "src/components/ai/CounterpartyGraphCard/CounterpartyGraphCard.tsx",
+      sku: "@molecule/ai/counterparty-graph-card",
+      humanLabel: "CounterpartyGraphCard",
+      humanDescription: "AI-generated counterparty relationship card showing suppliers, customers, partners, and competitors inferred from alternative signals"
+    },
+    {
+      id: "divergence-metrics-card",
+      name: "DivergenceMetricsCard",
+      version: "1.0.0",
+      description: "AI-generated card showing operational and customer divergence scores — a signed delta between expected and observed performance",
+      tags: [
+        "ai",
+        "divergence",
+        "metrics",
+        "generative-ui"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./components/ai/DivergenceMetricsCard/DivergenceMetricsCard",
+      filePath: "src/components/ai/DivergenceMetricsCard/DivergenceMetricsCard.tsx",
+      sku: "@molecule/ai/divergence-metrics-card",
+      humanLabel: "DivergenceMetricsCard",
+      humanDescription: "AI-generated card showing operational and customer divergence scores — a signed delta between expected and observed performance"
+    },
+    {
+      id: "key-injection-overlay",
+      name: "KeyInjectionOverlay",
+      version: "1.0.0",
+      description: "Blocks the app and collects an AI provider key when the gateway reports one is missing or expired. Strategic purpose: the BYOK prompt, in one place, so a key request looks the same everywhere and never becomes an inline form somebody rebuilds per feature. Renders nothing unless status is 'BYOK_REQUIRED' or 'KEY_EXPIRED', so it can stay mounted at the shell level.",
+      tags: [
+        "ai",
+        "byok",
+        "overlay",
+        "auth",
+        "gateway",
+        "key"
+      ],
+      category: "ai",
+      props: [
+        {
+          name: "status",
+          type: "string",
+          description: "Gateway status. The overlay shows only for 'BYOK_REQUIRED' or 'KEY_EXPIRED'."
+        },
+        {
+          name: "setSessionKey",
+          type: "function",
+          description: "Receives the entered key when the form is submitted."
+        }
+      ],
+      importPath: "./components/ai/KeyInjectionOverlay",
+      filePath: "src/components/ai/KeyInjectionOverlay.tsx",
+      sku: "@molecule/ai/key-injection-overlay",
+      humanLabel: "KeyInjectionOverlay",
+      humanDescription: "Blocks the app and collects an AI provider key when the gateway reports one is missing or expired. Strategic purpose: the BYOK prompt, in one place, so a key request looks the same everywhere and never becomes an inline form somebody rebuilds per feature. Renders nothing unless status is 'BYOK_REQUIRED' or 'KEY_EXPIRED', so it can stay mounted at the shell level."
+    },
     {
       id: "live-quote-card",
       name: "LiveQuoteCard",
@@ -751,31 +841,58 @@ const e = {
     {
       id: "code-block",
       name: "CodeBlock",
-      version: "1.0.0",
-      description: "A component for displaying formatted and syntax-highlighted code snippets.",
+      version: "1.0.1",
+      description: "The one way to show code. Syntax-highlighted, theme-aware, with a copy button that works on touch and outside secure contexts. Use for every snippet in docs and tutorials — do not hand-roll a <pre>. Long lines scroll inside the block so the page never scrolls sideways on a phone.",
       tags: [
         "ui",
         "data-display",
-        "code"
+        "code",
+        "docs",
+        "tutorial"
       ],
       category: "ui",
       props: [
         {
           name: "code",
           type: "string",
-          description: "The string of code to display."
+          description: "The snippet to display. Outer blank lines are trimmed."
         },
         {
           name: "language",
           type: "string",
-          description: "The programming language for syntax highlighting (e.g., 'tsx', 'css', 'javascript')."
+          description: "Prism language id — 'tsx', 'bash', 'css', 'json'. Defaults to 'tsx'."
+        },
+        {
+          name: "filename",
+          type: "string",
+          description: "Header label. Prefer a real path like 'src/App.tsx'; falls back to the language."
+        },
+        {
+          name: "showLineNumbers",
+          type: "boolean",
+          description: "Show gutter line numbers. Use when the surrounding prose cites line numbers."
+        },
+        {
+          name: "highlightLines",
+          type: "number[]",
+          description: '1-based lines to emphasise, for "change this line" steps.'
+        },
+        {
+          name: "wrap",
+          type: "boolean",
+          description: "Wrap long lines instead of scrolling them. Off by default."
+        },
+        {
+          name: "hideCopy",
+          type: "boolean",
+          description: "Hide the copy button, for snippets that are not meant to be run."
         }
       ],
       importPath: "./components/data-display/CodeBlock",
       filePath: "src/components/data-display/CodeBlock.tsx",
       sku: "@atom/primitive/code-block",
       humanLabel: "CodeBlock",
-      humanDescription: "A component for displaying formatted and syntax-highlighted code snippets."
+      humanDescription: "The one way to show code. Syntax-highlighted, theme-aware, with a copy button that works on touch and outside secure contexts. Use for every snippet in docs and tutorials — do not hand-roll a <pre>. Long lines scroll inside the block so the page never scrolls sideways on a phone."
     },
     {
       id: "data-table",
@@ -1748,8 +1865,8 @@ const e = {
     {
       id: "segmented-control",
       name: "SegmentedControl",
-      version: "1.0.0",
-      description: 'A theme-aware linear toggle component. Ideal for switching between discrete modes (e.g., "Map / List").',
+      version: "1.0.1",
+      description: 'A theme-aware linear toggle component. Ideal for switching between discrete modes (e.g., "Map / List"). Every size clears the 24px WCAG 2.5.8 (AA) target-size minimum — xs 24px, sm ~25px, md ~36px. None reaches the 44px 2.5.5 (AAA) figure, so for a primary control on a touch screen prefer md or give the control its own 44px row; xs and sm are density sizes for pointer-driven toolbars.',
       tags: [
         "input",
         "toggle",
@@ -1763,7 +1880,7 @@ const e = {
       filePath: "src/components/forms/SegmentedControl.tsx",
       sku: "@atom/form/segmented-control",
       humanLabel: "SegmentedControl",
-      humanDescription: 'A theme-aware linear toggle component. Ideal for switching between discrete modes (e.g., "Map / List").'
+      humanDescription: 'A theme-aware linear toggle component. Ideal for switching between discrete modes (e.g., "Map / List"). Every size clears the 24px WCAG 2.5.8 (AA) target-size minimum — xs 24px, sm ~25px, md ~36px. None reaches the 44px 2.5.5 (AAA) figure, so for a primary control on a touch screen prefer md or give the control its own 44px row; xs and sm are density sizes for pointer-driven toolbars.'
     },
     {
       id: "select",
@@ -2238,6 +2355,48 @@ const e = {
       humanLabel: "SectionHeader",
       humanDescription: "A simple, consistent header for organizing sections of content within a page."
     },
+    {
+      id: "connector-overlay",
+      name: "ConnectorOverlay",
+      version: "1.0.0",
+      description: "Covers a panel while its data source is connecting, and explains itself when the connection fails. Strategic purpose: the standard treatment for a live region that has no data yet — telemetry panels, market feeds, device dashboards — so every product says the same thing about a dead socket instead of inventing a spinner. Renders nothing once status is 'connected', so it can stay mounted.",
+      tags: [
+        "feedback",
+        "overlay",
+        "connection",
+        "realtime",
+        "loading",
+        "error"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "status",
+          type: "string",
+          description: "'connecting' | 'connected' | 'error'. Renders null when connected."
+        },
+        {
+          name: "message",
+          type: "ReactNode",
+          description: "Replaces the default copy for the current status."
+        },
+        {
+          name: "onRetry",
+          type: "function",
+          description: "Shows a retry action in the error state when provided."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/molecular/ConnectorOverlay",
+      filePath: "src/components/molecular/ConnectorOverlay.tsx",
+      sku: "@molecule/feedback/connector-overlay",
+      humanLabel: "ConnectorOverlay",
+      humanDescription: "Covers a panel while its data source is connecting, and explains itself when the connection fails. Strategic purpose: the standard treatment for a live region that has no data yet — telemetry panels, market feeds, device dashboards — so every product says the same thing about a dead socket instead of inventing a spinner. Renders nothing once status is 'connected', so it can stay mounted."
+    },
     {
       id: "data-card",
       name: "DataCard",
@@ -2978,6 +3137,26 @@ const e = {
       humanLabel: "AuthLayout",
       humanDescription: "The centred, chrome-free frame for unauthenticated screens, rendering the matched child route via an Outlet. Strategic purpose: sign-in and sign-up must not show the app shell's sidebar or header — wrap those routes in this instead of conditionally hiding chrome inside AppShell."
     },
+    {
+      id: "about-ramme",
+      name: "AboutRamme",
+      version: "1.0.0",
+      description: `The "About" panel for a Settings Console — what the framework is, which packages make it up, and why it is built this way. Strategic purpose: ships the explanation with the framework so every product's about screen stays accurate as the architecture moves, instead of each one carrying a copy that goes stale. Takes no props; drop it into a settings tab.`,
+      tags: [
+        "layout",
+        "settings",
+        "about",
+        "documentation",
+        "panel"
+      ],
+      category: "layout",
+      props: [],
+      importPath: "./components/layout/AboutRamme",
+      filePath: "src/components/layout/AboutRamme.tsx",
+      sku: "@chassis/layout/about-ramme",
+      humanLabel: "AboutRamme",
+      humanDescription: `The "About" panel for a Settings Console — what the framework is, which packages make it up, and why it is built this way. Strategic purpose: ships the explanation with the framework so every product's about screen stays accurate as the architecture moves, instead of each one carrying a copy that goes stale. Takes no props; drop it into a settings tab.`
+    },
     {
       id: "accordion-item",
       name: "AccordionItem",
@@ -4122,6 +4301,52 @@ const e = {
       sku: "@chassis/layout/user-nav",
       humanLabel: "UserNav",
       humanDescription: "The signed-in user's avatar menu — identity plus account actions. Strategic purpose: the standard account affordance for the app shell's header, with logout, settings, profile, and an optional theme toggle already wired. Compose extra entries with ButtonItem rather than rebuilding the menu."
+    },
+    {
+      id: "button-item",
+      name: "ButtonItem",
+      version: "1.0.0",
+      description: 'A single row inside a UserNav menu — icon, label, action. Strategic purpose: the sanctioned way to add an entry to the account menu, so extra actions match the built-in ones instead of arriving as a hand-styled button. Use `variant="destructive"` for anything that removes or signs out.',
+      tags: [
+        "layout",
+        "navigation",
+        "menu",
+        "item",
+        "user-nav"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "icon",
+          type: "string",
+          description: "Lucide icon name shown before the label."
+        },
+        {
+          name: "label",
+          type: "string",
+          description: "The menu entry text."
+        },
+        {
+          name: "onClick",
+          type: "function",
+          description: "Called when the entry is activated."
+        },
+        {
+          name: "variant",
+          type: "string",
+          description: "'default' | 'destructive'. Destructive tints the row for sign-out and delete."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/layout/UserNav",
+      filePath: "src/components/layout/UserNav.tsx",
+      sku: "@chassis/layout/button-item",
+      humanLabel: "ButtonItem",
+      humanDescription: 'A single row inside a UserNav menu — icon, label, action. Strategic purpose: the sanctioned way to add an entry to the account menu, so extra actions match the built-in ones instead of arriving as a hand-styled button. Use `variant="destructive"` for anything that removes or signs out.'
     }
   ],
   utils: [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/ui",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "The structural component library for the Ramme Framework.",
   "license": "MIT",
   "private": false,
@@ -25,22 +25,11 @@
   "files": [
     "dist",
     "tailwind.preset.js",
-    "index.css",
     "src/wizardManifest.ts"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "dev": "vite",
-    "generate:manifest": "node scripts/generate-manifest.js",
-    "generate:registry": "node scripts/generate-registry.js",
-    "generate": "npm run generate:manifest && npm run generate:registry",
-    "build": "npm run generate && vite build && tsc --declaration --emitDeclarationOnly --outDir dist --noEmit false",
-    "bundle:ai": "repomix --ignore '**/*.lock,**/dist/**,**/storybook-static/**' --output 'ramme-ui-context.txt'",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "peerDependencies": {
     "ag-grid-community": ">=31.0.0",
     "ag-grid-react": ">=31.0.0",
@@ -53,7 +42,6 @@
   "dependencies": {
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.3",
-    "@ramme-io/shared": "workspace:*",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tippyjs/react": "^4.2.6",
     "class-variance-authority": "^0.7.1",
@@ -65,7 +53,8 @@
     "react-syntax-highlighter": "^15.6.6",
     "tailwind-merge": "^3.3.1",
     "tippy.js": "^6.3.7",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "@ramme-io/shared": "3.1.2"
   },
   "devDependencies": {
     "@storybook/addon-links": "^10.5.9",
@@ -88,5 +77,15 @@
     "typescript": "^5.4.5",
     "vite": "^5.3.1",
     "vite-plugin-dts": "^3.9.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "generate:manifest": "node scripts/generate-manifest.js",
+    "generate:registry": "node scripts/generate-registry.js",
+    "generate": "npm run generate:manifest && npm run generate:registry",
+    "build": "npm run generate && vite build && tsc --declaration --emitDeclarationOnly --outDir dist --noEmit false",
+    "bundle:ai": "repomix --ignore '**/*.lock,**/dist/**,**/storybook-static/**' --output 'ramme-ui-context.txt'",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
-}
+}