@ramme-io/ui 4.0.0 → 4.1.0

package/src/wizardManifest.ts

@@ -402,6 +402,25 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -429,6 +448,77 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -755,31 +845,58 @@ export const wizardManifest: WizardManifest = {
     {
       "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",
@@ -1752,8 +1869,8 @@ export const wizardManifest: WizardManifest = {
     {
       "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",
@@ -1767,7 +1884,7 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -2242,6 +2359,48 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -2982,6 +3141,26 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -4126,6 +4305,52 @@ export const wizardManifest: WizardManifest = {
       "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/tailwind.preset.js

@@ -71,6 +71,14 @@ module.exports = {
         },
 
         // ─── Specialized Sub-Systems ───
+        // Categorical accents for colour-coded content. Distinct from `chart`:
+        // chart series collapse to one hue under a custom theme (see
+        // themeUtils.ts), these stay four hues on all five themes.
+        'accent-1': 'rgb(var(--app-accent-1) / <alpha-value>)',
+        'accent-2': 'rgb(var(--app-accent-2) / <alpha-value>)',
+        'accent-3': 'rgb(var(--app-accent-3) / <alpha-value>)',
+        'accent-4': 'rgb(var(--app-accent-4) / <alpha-value>)',
+
         chart: {
           1: 'rgb(var(--app-chart-1) / <alpha-value>)',
           2: 'rgb(var(--app-chart-2) / <alpha-value>)',
@@ -105,17 +113,97 @@ module.exports = {
         mono: ['var(--app-font-mono)', 'Menlo', 'monospace'],
       },
 
-      // ─── Fluid Typography Scale (clamp) ───────────────
-      // Scales smoothly between 320px and 1280px viewport.
-      // Usage: text-fluid-xs, text-fluid-sm, text-fluid-base, etc.
+      // ─── Fluid Typography Scale ───────────────────────
+      // The values live in framework/ui/src/index.css as --app-step-*, generated
+      // with the Utopia method (utopia.fyi/type/calculator) and fluid between a
+      // 360px and a 1240px viewport. They are referenced here rather than inlined
+      // for the same reason borderRadius is: a CSS variable can be re-pointed per
+      // theme (.dark/.corporate/.midnight/.blueprint) and adjusted at runtime
+      // through useTheme, which a literal in this file cannot.
+      //
+      // These REPLACE Tailwind's static defaults, so every existing text-sm /
+      // text-2xl / … call site becomes fluid with no edit. Each entry is a
+      // [size, { lineHeight, letterSpacing }] tuple — Tailwind's own scale pairs a
+      // line-height with every size, and dropping to a bare string (as the old
+      // fluid-* keys did) silently inherits whatever leading is in scope.
       fontSize: {
-        'fluid-xs':   'clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem)',    // 10px → 12px
-        'fluid-sm':   'clamp(0.75rem, 0.65rem + 0.33vw, 0.875rem)',    // 12px → 14px
-        'fluid-base': 'clamp(0.875rem, 0.75rem + 0.42vw, 1rem)',       // 14px → 16px
-        'fluid-lg':   'clamp(1rem, 0.83rem + 0.56vw, 1.25rem)',        // 16px → 20px
-        'fluid-xl':   'clamp(1.25rem, 1rem + 0.83vw, 1.5rem)',         // 20px → 24px
-        'fluid-2xl':  'clamp(1.5rem, 1.17rem + 1.11vw, 2rem)',         // 24px → 32px
-        'fluid-3xl':  'clamp(2rem, 1.5rem + 1.67vw, 2.75rem)',         // 32px → 44px
+        '2xs':  ['var(--app-step--3)',  { lineHeight: 'var(--app-leading-base)' }],
+        xs:     ['var(--app-step--2)',  { lineHeight: 'var(--app-leading-base)' }],
+        sm:     ['var(--app-step--1)',  { lineHeight: 'var(--app-leading-relaxed)' }],
+        base:   ['var(--app-step-0)',   { lineHeight: 'var(--app-leading-relaxed)' }],
+        lg:     ['var(--app-step-1)',   { lineHeight: 'var(--app-leading-relaxed)' }],
+        xl:     ['var(--app-step-2)',   { lineHeight: 'var(--app-leading-snug)' }],
+        '2xl':  ['var(--app-step-3)',   { lineHeight: 'var(--app-leading-snug)' }],
+        '3xl':  ['var(--app-step-4)',   { lineHeight: 'var(--app-leading-snug)' }],
+        '4xl':  ['var(--app-step-5)',   { lineHeight: 'var(--app-leading-tight)' }],
+        '5xl':  ['var(--app-step-6)',   { lineHeight: 'var(--app-leading-tight)' }],
+        '6xl':  ['var(--app-step-7)',   { lineHeight: 'var(--app-leading-tight)' }],
+        '7xl':  ['var(--app-step-8)',   { lineHeight: 'var(--app-leading-none)' }],
+        '8xl':  ['var(--app-step-9)',   { lineHeight: 'var(--app-leading-none)' }],
+        '9xl':  ['var(--app-step-10)',  { lineHeight: 'var(--app-leading-none)' }],
+
+        // Back-compat aliases. text-fluid-* predates this scale and is still used
+        // in Card, ActivityFeed and MobileNav; they now resolve to the same steps
+        // as their plain counterparts. Prefer the plain names in new code.
+        'fluid-xs':   ['var(--app-step--2)', { lineHeight: 'var(--app-leading-base)' }],
+        'fluid-sm':   ['var(--app-step--1)', { lineHeight: 'var(--app-leading-relaxed)' }],
+        'fluid-base': ['var(--app-step-0)',  { lineHeight: 'var(--app-leading-relaxed)' }],
+        'fluid-lg':   ['var(--app-step-1)',  { lineHeight: 'var(--app-leading-relaxed)' }],
+        'fluid-xl':   ['var(--app-step-2)',  { lineHeight: 'var(--app-leading-snug)' }],
+        'fluid-2xl':  ['var(--app-step-3)',  { lineHeight: 'var(--app-leading-snug)' }],
+        'fluid-3xl':  ['var(--app-step-4)',  { lineHeight: 'var(--app-leading-snug)' }],
+      },
+
+      // ─── Leading ──────────────────────────────────────
+      // Unitless, so they multiply whichever step they land on.
+      lineHeight: {
+        none:    'var(--app-leading-none)',
+        tight:   'var(--app-leading-tight)',
+        snug:    'var(--app-leading-snug)',
+        normal:  'var(--app-leading-base)',
+        relaxed: 'var(--app-leading-relaxed)',
+      },
+
+      // ─── Tracking ─────────────────────────────────────
+      // Replaces the hand-written tracking-[0.12em..0.3em] arbitrary values.
+      letterSpacing: {
+        tighter: 'var(--app-tracking-tighter)',
+        tight:   'var(--app-tracking-tight)',
+        normal:  'var(--app-tracking-normal)',
+        wide:    'var(--app-tracking-wide)',
+        wider:   'var(--app-tracking-wider)',
+        widest:  'var(--app-tracking-widest)',
+      },
+
+      // ─── Readable measure ─────────────────────────────
+      // ch-based, so line length tracks font size. max-w-prose is rem-based and
+      // drifts off a comfortable measure as soon as the base size changes.
+      maxWidth: {
+        measure:          'var(--app-measure)',
+        'measure-narrow': 'var(--app-measure-narrow)',
+      },
+
+      // ─── Layering Scale ───────────────────────────────
+      // One named order for everything that overlays, because "z-50" was the
+      // only overlay layer this framework had: Modal, Drawer, DetailDrawer,
+      // ToastProvider, Menu, UserNav, Sidebar and AIChatPanel all sat on it,
+      // so which one won was decided by portal mount order rather than intent.
+      // A toast confirming what you just did could land behind the modal you
+      // did it in.
+      //
+      // Read it top to bottom — each layer must clear the one above it in this
+      // list. Use the name, never a bare number, so the order stays arguable in
+      // one place instead of in eleven files.
+      zIndex: {
+        raised:  '10',   // lifted within its own pane — cards, in-flow overlays
+        sticky:  '20',   // sticky headers and toolbars inside a scroll region
+        nav:     '30',   // app chrome that outranks sticky page content
+        fab:     '40',   // floating action buttons over the page
+        scrim:   '45',   // a backdrop, under its own panel but over the app
+        drawer:  '50',   // drawers, modals, full-screen surfaces and overlays
+        popover: '60',   // menus, dropdowns, tooltips — must clear a drawer
+                         // they were opened from
+        toast:   '70',   // notifications — must clear everything, always
       },
 
       // ─── Fluid Spacing Scale (clamp) ──────────────────