@actioneer/ads 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [
@@ -30,20 +30,20 @@
     "ads": "./bin/ads-init.mjs"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
   },
   "dependencies": {
     "@assistant-ui/react": "^0.14.26",
     "@assistant-ui/react-markdown": "^0.14.5",
-    "@hugeicons/core-free-icons": "^4.2.2",
-    "@hugeicons/react": "^1.1.9",
     "@paper-design/shaders": "^0.0.77",
     "@paper-design/shaders-react": "^0.0.77",
+    "@phosphor-icons/react": "^2.1.10",
     "@xyflow/react": "^12.11.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "motion": "^12.42.2",
+    "ogl": "^1.0.11",
     "radix-ui": "^1.6.2",
     "recharts": "^2.15.4",
     "remark-gfm": "^4.0.1",

package/styles.css

@@ -6,9 +6,11 @@
 
 /* ---- Aribau Grotesk ---- */
 /* Aribau Grotesk — ADS 1.0 brand typeface.
-   Two weights only: Regular (400) and Bold (700).
-   The weight RANGES fold Tailwind's intermediate utilities onto these two
-   physical files: `font-normal`/`font-medium` → Regular, `font-semibold`/`font-bold` → Bold.
+   TWO weights only: Regular (400) and Semibold (600). Use `font-normal` and
+   `font-semibold` — there is NO dedicated bold face, so never reach for
+   `font-bold` (it would just fold onto the 600 file). The weight RANGES map
+   Tailwind's utilities onto the two physical files:
+   `font-normal` → Regular (100–500), `font-semibold` → Semibold (600–900).
    `font-synthesis-weight: none` (set in index.css) prevents faux weights. */
 @font-face {
   font-family: "Aribau Grotesk";
@@ -19,7 +21,7 @@
 }
 @font-face {
   font-family: "Aribau Grotesk";
-  src: url("./fonts/aribau-grotesk-700.otf") format("opentype");
+  src: url("./fonts/aribau-grotesk-600.woff2") format("woff2");
   font-weight: 600 900;
   font-style: normal;
   font-display: swap;
@@ -29,7 +31,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Brand: Sage (green) · Neutrals: warm greige · Typeface: Aribau Grotesk
+ *  Brand: Sage (green) · Neutrals: brand-palette grey · Typeface: Aribau Grotesk
  * ============================================================
  */
 @theme {
@@ -67,35 +69,45 @@
   --text-2xl: 1.625rem;    /* 26px — display */
   --text-2xl--line-height: 2rem;
 
-  /* ---- Neutral ramp — warm greige (the workhorse: backgrounds, surfaces,
-     text, borders). Kept a touch warm so it sits with Sage without turning
-     green — one family, not colour plus grey. The `ink` name is retained so
-     every existing reference resolves; the values are now greige. ---- */
-  --color-ink-50: #f2f2ed;
-  --color-ink-100: #e7e7e1;
-  --color-ink-200: #d8d7cf;
-  --color-ink-300: #c7c6be;
-  --color-ink-400: #a8a79e;
-  --color-ink-500: #8c8c84;
-  --color-ink-600: #6b6b63;
-  --color-ink-700: #4a4a44;
-  --color-ink-800: #33322e;
-  --color-ink-900: #26251f;
-  --color-ink-950: #1a1a17;
-
-  /* ---- Brand ramp — Sage (one green hue: brand, primary actions, focal
-     data). 600 is the primary. On a white/greige ground, colour earns its
-     place — the eye always knows where to look. ---- */
-  --color-sage-50: #eff5ea;
-  --color-sage-100: #dde8cf;
-  --color-sage-200: #a9ce86;
-  --color-sage-300: #8abb6a;
-  --color-sage-400: #6da24e;
-  --color-sage-500: #548c41;
-  --color-sage-600: #3f7a34;
-  --color-sage-700: #2c5724;
-  --color-sage-800: #254a1d;
-  --color-sage-900: #1e3a16;
+  /* ---- Neutral ramp — the full 12-step brand palette grey (light section,
+     solid row). A Radix-style scale: each step owns a role — 50/100 =
+     backgrounds, 200/300/400 = interactive component fills, 500/600/700 =
+     borders & separators, 800/850 = solid, 900/950 = accessible text. All 12
+     values are present (the earlier 11-step cut is restored: #82827f is
+     ink-850). The `ink` name is retained so every existing reference resolves;
+     the semantic tokens below are re-derived from these roles. ---- */
+  --color-ink-50: #fdfdfc;  /*  1 · background      */
+  --color-ink-100: #f9f9f8; /*  2 · background      */
+  --color-ink-200: #f0f0ef; /*  3 · interactive     */
+  --color-ink-300: #e8e8e7; /*  4 · interactive     */
+  --color-ink-400: #e1e1e0; /*  5 · interactive     */
+  --color-ink-500: #d9d9d8; /*  6 · border          */
+  --color-ink-600: #cececd; /*  7 · border          */
+  --color-ink-700: #bbbbb9; /*  8 · border          */
+  --color-ink-800: #8c8c89; /*  9 · solid           */
+  --color-ink-850: #82827f; /* 10 · solid           */
+  --color-ink-900: #636461; /* 11 · accessible text */
+  --color-ink-950: #1f1f1c; /* 12 · accessible text */
+
+  /* ---- Brand ramp — the full 12-step Sage green (light section, solid row),
+     same Radix roles as the neutral ramp. All 12 present: sage-850 (#417c36,
+     step 11 = the accessible green text tone) and sage-950 (#273d23, step 12)
+     are restored. The interactive brand (--brand #3f7a34) is step 9 (solid);
+     its hover is step 10 (#316c26). NOTE: steps 9–12 are not a pure lightness
+     ramp (Radix convention) — the Tailwind name order differs from role
+     order, so read the role comment, not the number. ---- */
+  --color-sage-50: #fbfefb;  /*  1 · background      */
+  --color-sage-100: #f6fbf5; /*  2 · background      */
+  --color-sage-200: #e9f7e6; /*  3 · interactive     */
+  --color-sage-300: #dbf1d6; /*  4 · interactive     */
+  --color-sage-400: #cae8c5; /*  5 · interactive     */
+  --color-sage-500: #b6dcaf; /*  6 · border          */
+  --color-sage-600: #9ccc93; /*  7 · border          */
+  --color-sage-700: #77b76b; /*  8 · border          */
+  --color-sage-800: #3f7a34; /*  9 · solid (brand)   */
+  --color-sage-900: #316c26; /* 10 · solid (hover)   */
+  --color-sage-850: #417c36; /* 11 · accessible text */
+  --color-sage-950: #273d23; /* 12 · accessible text */
 
   /* ---- Semantic accent ramps ---- */
   /* Success — shifted cooler (emerald/teal) so positive states stay clearly
@@ -137,13 +149,14 @@
   --color-amber-base: #f3a72e;
   --color-amber-deep: #b57414;
 
-  /* ---- Radii ---- */
-  --radius-xs: 0.25rem;
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.625rem;
-  --radius-xl: 0.875rem;
-  --radius-2xl: 1.25rem;
+  /* ---- Radii ---- FIVE steps only: 2 · 4 · 8 · 16 · 24 (px), plus `full`
+     for pills/circles. xs aliases sm (4px); 2xl aliases xl (24px). */
+  --radius-xs: 0.25rem;  /* 4px */
+  --radius-sm: 0.25rem;  /* 4px */
+  --radius-md: 0.5rem;   /* 8px */
+  --radius-lg: 1rem;     /* 16px */
+  --radius-xl: 1.5rem;   /* 24px */
+  --radius-2xl: 1.5rem;  /* 24px (alias xl) */
   --radius-full: 9999px;
   /* Status/indicator dots are SQUARE with a hair of softening — echoing the
      growth-mark's square cells. Never render an indicator dot as a circle
@@ -152,10 +165,21 @@
   --radius-dot: 2px;
 
   /* ---- Elevation ---- ONE soft token (Claude-panel style).
-     Delineate surfaces with fill color first; add this to gently lift them. */
-  --shadow-elevation: 0 0 0 1px rgb(10 10 11 / 0.03),
-    0 1px 2px 0 rgb(10 10 11 / 0.04),
-    0 8px 28px -8px rgb(10 10 11 / 0.09);
+     Delineate surfaces with fill color first; add this to gently lift them.
+     Tuned quieter (2026-07-30): the ambient drop sits closer (y8→y4,
+     blur28→16) at lower opacity (9%→6%) with a faint COOL slate tint
+     (rgb 15 23 42, not near-black) — a hard, offset-heavy black drop read
+     "cheap" and floated small controls (switch thumb, tab pill). */
+  --shadow-elevation: 0 0 0 1px rgb(15 23 42 / 0.03),
+    0 1px 2px 0 rgb(15 23 42 / 0.04),
+    0 4px 16px -6px rgb(15 23 42 / 0.06);
+
+  /* Pinned-table-column smudges — whisper-soft directional casts shown only
+     while content is hidden behind a sticky column (Table is scroll-aware).
+     Deep negative spread keeps the edge feathered; same cool slate tint as
+     the elevation token. */
+  --shadow-table-smudge-left: 8px 0 24px -14px rgb(15 23 42 / 0.05);
+  --shadow-table-smudge-right: -8px 0 24px -14px rgb(15 23 42 / 0.05);
 
   /* ---- CTA inner glow ---- luminous inset highlight for primary buttons
      (adapted from the "AI button" Figma): a crisp top-edge catch plus a soft
@@ -207,7 +231,7 @@
   --sidebar-item: 2rem; /* 32px — collapsed rail hit target (square) */
   --sidebar-logo: 1.25rem; /* 20px — brand mark, centered in a --sidebar-item square */
   --sidebar-text-indent: 2.375rem; /* px-3 + icon size-4 + gap-2.5 — history rows align to nav-item text */
-  --sidebar-navigation-text-size: 0.8125rem; /* 13px — sidebar actions, items, history, and account text */
+  --sidebar-navigation-text-size: var(--text-base); /* 15px — sidebar actions, items, history, and account text */
   --sidebar-section-label-size: 0.8125rem; /* 13px — section and history labels */
   --panel-header-height: 2.75rem; /* 44px — Panel / toolbar header */
   --aside-width: 20rem; /* 320px — right-hand panel column */
@@ -220,7 +244,7 @@
   /* ---- Chat (Ask Actioneer / assistant-ui) ---- */
   --thread-max-width: 44rem; /* chat column cap — readable prose measure, all panes */
   --thread-max-width-wide: 64rem; /* rich-content breakout cap (tables/charts/tool cards) on wide panes; prose keeps --thread-max-width */
-  --composer-bg: color-mix(in oklab, var(--muted) 30%, var(--background));
+  --composer-bg: var(--elevated); /* pure white composer surface */
   --composer-radius: var(--radius-2xl);
   --composer-padding: 0.5rem;
   --composer-placeholder-max-h: calc(var(--text-base--line-height) * 2); /* rotating placeholder clamp — two lines of the input's own rhythm, so it can never overlap the accessory row */
@@ -233,21 +257,26 @@
  * every comparison series survives production builds.
  */
 :root {
-  /* Data-series palette — NO GREEN (user-mandated): green implies "good /
-     growing" even when the numbers fall, so data series must stay
-     valence-neutral. Cyan deep leads as the focal/primary series; amber,
-     ink and the remaining non-green accents extend, with a mid ink for a
-     sixth series. Sage/lime stay OUT of charts — green is
-     reserved for genuinely semantic success (badges, deltas the caller has
-     judged positive). Explicit hexes (not var()) so every series survives
-     @theme pruning, since chart colours are referenced from SVG prop
-     strings. */
-  --color-chart-1: #0a7e82; /* cyan deep — primary / focal series */
-  --color-chart-2: #f3a72e; /* amber base */
-  --color-chart-3: #26251f; /* ink 900 */
-  --color-chart-4: #12b5a5; /* cyan base */
-  --color-chart-5: #b57414; /* amber deep */
-  --color-chart-6: #8c8c84; /* ink 500 — extended series */
+  /* Data-series palette — its OWN palette, separate from the brand ramps, in
+     the editorial multi-series idiom (distinct, saturated hues that stay
+     apart at 1.5px stroke and at dot size).
+
+     NEITHER GREEN NOR RED (user-mandated): both carry verdicts — green reads
+     "good" and red reads "bad" even when the series is just a named entity,
+     so a category key must never imply one. Green/red stay reserved for
+     genuinely semantic states (success badges, danger alerts, a delta the
+     CALLER has judged). Blue leads as the focal series; purple, orange, cyan
+     and amber extend; grey closes as the sixth and doubles as the
+     de-emphasis tone.
+
+     Explicit hexes (not var()) so every series survives @theme pruning,
+     since chart colours are referenced from SVG prop strings. */
+  --color-chart-1: #3d9aa4; /* teal — primary / focal (the right edge of the brand set) */
+  --color-chart-2: #f7d06b; /* golden yellow — the warm 2nd series */
+  --color-chart-3: #52496e; /* muted purple */
+  --color-chart-4: #2d6f8a; /* deep teal-blue */
+  --color-chart-5: #232149; /* navy ink */
+  --color-chart-6: #8c8c84; /* grey — extended series + de-emphasis tone */
 }
 
 /*
@@ -277,10 +306,12 @@
   --color-brand: var(--brand);
   --color-brand-foreground: var(--brand-foreground);
   --color-brand-hover: var(--brand-hover);
+  --color-brand-text: var(--brand-text);
 
   /* Quiet fill — secondary buttons, avatars, chips */
   --color-fill: var(--fill);
   --color-fill-foreground: var(--fill-foreground);
+  --color-table-shell: var(--table-shell);
 
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
@@ -294,6 +325,9 @@
   --color-info: var(--color-info-600);
   --color-info-foreground: #ffffff;
 
+  --color-border-primary: var(--border-primary);
+  --color-border-secondary: var(--border-secondary);
+  --color-border-tertiary: var(--border-tertiary);
   --color-border: var(--border);
   --color-border-strong: var(--border-strong);
   --color-input: var(--input);
@@ -308,7 +342,7 @@
    * shadcn's grey/black defaults. The raw --sidebar-*/--popover values live in
    * :root below.
    */
-  --color-primary-foreground: var(--brand-foreground);
+  --color-primary-foreground: #ffffff;
   --color-secondary-foreground: #ffffff;
   --color-destructive: var(--color-danger-600);
   --color-destructive-foreground: #ffffff;
@@ -327,28 +361,34 @@
 
 /* ---- Theme (light only) ---- */
 :root {
-  --background: #f7f7f3;
-  --foreground: #1a1a17;
-
-  /* Text hierarchy — accessible on the warm greige canvas */
-  --text-primary: #1a1a17;   /* ~17:1  AAA */
-  --text-secondary: #4a4a44; /* ~8.5:1 AAA */
-  --text-tertiary: #6b6b63;  /* ~4.8:1 AA  */
-
-  --surface: #f2f2ed;        /* warm greige — the tinted canvas */
-  --surface-foreground: #33322e;
-  --elevated: #ffffff;
-
-  --muted: #e7e7e1;
-  --muted-foreground: #6b6b63;
-
-  --card: #ffffff;
-  --card-foreground: #1a1a17;
-
-  /* Sage brand (green) — primary actions, focal moments */
-  --brand: #3f7a34;
+  /* Every semantic token below points INTO a primitive scale step
+     (var(--color-ink-*) / var(--color-sage-*)) — the 12-step scales are the
+     single source of truth. Only pure white (#ffffff) stays literal: it is a
+     base surface, not a neutral scale step. */
+  --background: var(--color-ink-100);      /* step 2  · canvas */
+  --foreground: var(--color-ink-950);      /* step 12 */
+
+  /* Text levels: primary ink-950, secondary ink-900, tertiary ink-800.
+     Primary + secondary clear AA for body copy; tertiary is AA-large only. */
+  --text-primary: var(--color-ink-950);    /* ~16:1  AAA      */
+  --text-secondary: var(--color-ink-900);  /* ~5.3:1 AA       */
+  --text-tertiary: var(--color-ink-800);   /* ~3:1   AA-large */
+
+  --surface: var(--color-ink-200);         /* step 3  · tinted canvas */
+  --surface-foreground: var(--color-ink-950);
+  --elevated: #ffffff;                     /* pure white base */
+
+  --muted: var(--color-ink-300);           /* step 4 */
+  --muted-foreground: var(--color-ink-900);/* step 11 · readable UI text */
+
+  --card: #ffffff;                         /* pure white base */
+  --card-foreground: var(--color-ink-950);
+
+  /* Sage brand (green) — solid role. brand = sage step 9, hover = step 10. */
+  --brand: var(--color-sage-800);          /* step 9  · solid */
   --brand-foreground: #ffffff;
-  --brand-hover: #2c5724;
+  --brand-hover: var(--color-sage-900);    /* step 10 · hover */
+  --brand-text: var(--color-sage-850);     /* step 11 · accessible green text/links */
 
   /* Table interaction fills are pre-composited and opaque. Sticky edge cells
      therefore cover horizontally scrolled content while preserving the
@@ -357,22 +397,55 @@
   --table-row-selected: color-mix(in srgb, var(--card) 10%, var(--muted));
 
   /* Quiet fill */
-  --fill: #e7e7e1;
-  --fill-foreground: #1a1a17;
-
-  --accent: #edece6;
-  --accent-foreground: #1a1a17;
-
-  --border: #e7e7e1;
-  --border-strong: #c7c6be;
-  --input: #c7c6be;
-  --ring: rgb(63 122 52 / 0.5);
-  --overlay: rgb(26 26 23 / 0.5);
+  --fill: var(--color-ink-50);             /* step 1 · lightest recessed fill */
+  --fill-foreground: var(--color-ink-950);
+
+  --accent: var(--color-ink-200);          /* step 3 */
+  --accent-foreground: var(--color-ink-950);
+
+  /* Borders — a three-level scale, primary (strongest) → tertiary (faintest). */
+  --border-primary: var(--color-ink-600);   /* #cececd · strongest */
+  --border-secondary: var(--color-ink-400); /* #e1e1e0 · default   */
+  --border-tertiary: var(--color-ink-200);  /* #f0f0ef · faintest  */
+  /* Legacy aliases point into the scale so existing utilities keep resolving. */
+  --border: var(--border-secondary);        /* default hairline / separator */
+  --border-strong: var(--border-primary);   /* emphasized / hover / selected */
+  --input: var(--border-primary);           /* form-control edge */
+
+  /* Ripple — the appearance wash that radiates from a floating surface's
+     origin corner as it opens (Dropdown/Popover/Select/Modal…). A soft brand
+     tint that expands + fades once on mount; see the `.ads-ripple` layer and
+     the `Ripple` component. Duration stays in the sub-300ms UI band. */
+  --ripple-tint: color-mix(in srgb, var(--brand) 20%, transparent);
+  --ripple-duration: 300ms;
+
+  /* Stroke width — ADS hairlines are 0.5px, not the Tailwind 1px default.
+     The single-width border utilities are overridden to this token at the
+     bottom of this file, so every `border`/`border-t|r|b|l|x|y` reads as a
+     true hairline. Explicit `border-2`+ widths are unaffected. */
+  --stroke-width: 0.5px;
+  --ring: color-mix(in srgb, var(--color-sage-800) 50%, transparent);   /* brand @ 50% */
+  --overlay: color-mix(in srgb, var(--color-ink-950) 50%, transparent); /* ink-950 @ 50% */
+
+  /* Functional / domain tokens — named for their RENDER role, pointing into
+     the ink scale. Components pass these into non-CSS renderers (Recharts,
+     React Flow, the Paper/WebGL texture) so no component carries a raw ink-*
+     value. Same DS pattern as the data-viz --color-chart-* palette. */
+  --chart-axis: var(--color-ink-200);    /* axis lines + de-emphasised marks */
+  --chart-grid: var(--color-ink-50);     /* gridlines */
+  --chart-track: var(--color-ink-100);   /* funnel / progress track */
+  --chart-context: var(--color-ink-300); /* de-emphasised context series */
+  --canvas-edge: var(--color-ink-300);   /* infinite-canvas edges / connectors */
+  --texture-ink: var(--color-ink-950);   /* brand-texture / pixel-blast marks */
+  --table-shell: var(--color-ink-200);   /* recessed table tray (lighter than muted) */
+  --table-scroll-hint: rgb(15 23 42 / 0.04); /* right-edge "more columns" wash */
+  --surface-inverse: var(--color-ink-950);      /* dark hero / inverse surface base */
+  --surface-inverse-soft: var(--color-ink-900); /* dark hero gradient falloff */
 
   /* shadcn-compat raw surfaces — so a downstream shadcn Sidebar / Popover
      (or an inline `var(--sidebar)` / `var(--popover)`) resolves to the ADS
      palette instead of shadcn's grey/black defaults. The sidebar reads as the
-     warm greige canvas; its active item takes Sage. A consumer that had
+     neutral canvas; its active item takes Sage. A consumer that had
      hard-coded these can now delete its overrides and inherit from here. */
   --sidebar: var(--surface);
   --sidebar-foreground: var(--foreground);
@@ -385,6 +458,63 @@
   --popover: var(--elevated);
   --popover-foreground: var(--foreground);
 }
+
+/*
+ * ============================================================
+ *  Hairline strokes — ADS strokes are 0.5px, not 1px (principle 1).
+ *  Override Tailwind's single-width border utilities to the
+ *  --stroke-width token. Authored after `}
+  .border-t { border-top-width: var(--stroke-width); }
+  .border-r { border-right-width: var(--stroke-width); }
+  .border-b { border-bottom-width: var(--stroke-width); }
+  .border-l { border-left-width: var(--stroke-width); }
+  .border-x { border-inline-start-width: var(--stroke-width); border-inline-end-width: var(--stroke-width); }
+  .border-y { border-block-start-width: var(--stroke-width); border-block-end-width: var(--stroke-width); }
+}
+
+/*
+ * ============================================================
+ *  Ripple — appearance wash for floating surfaces (principle 3).
+ *  A soft brand tint that expands from the panel's origin corner
+ *  and fades, once, as the surface mounts. Rendered by the
+ *  `Ripple` component as an absolute, pointer-events-none layer
+ *  clipped to the panel radius. Honours reduced-motion.
+ * ============================================================
+ */
+@keyframes ads-ripple-wave {
+  0% { opacity: 0.6; transform: scale(0.15); }
+  100% { opacity: 0; transform: scale(1.08); }
+}
+.ads-ripple {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  overflow: hidden;
+  pointer-events: none;
+  transform-origin: var(--ripple-origin, center);
+  background: radial-gradient(125% 125% at var(--ripple-origin, center), var(--ripple-tint), transparent 62%);
+  animation: ads-ripple-wave var(--ripple-duration, 300ms) var(--ease-out) forwards;
+  will-change: transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ads-ripple { animation: none; opacity: 0; }
+}
+
+/*
+ * ============================================================
+ *  primary-foreground utility backfill.
+ *  Tailwind emits `text/bg-secondary-foreground` but NOT the
+ *  `primary-foreground` companion (its base `--color-primary` is the ADS
+ *  text-hierarchy token, which collides with the generated `primary` color),
+ *  so the vendored shadcn button's icon rendered invisible (dark-on-dark) on
+ *  `bg-primary`. Define the two utilities explicitly against white.
+ * ============================================================
+ */
+@layer utilities {
+  .text-primary-foreground { color: #ffffff; }
+  .bg-primary-foreground { background-color: #ffffff; }
+}
 /* ---- Base, keyframes & component helpers ---- */
 /* Hide scrollbars app-wide but keep scrollability. The demo UI is filled
    and borderless by design — visible scrollbar tracks read as decorative