@actioneer/ads 0.5.7 → 0.5.8

package/theme.css

@@ -1,4 +1,10 @@
 /* @actioneer/ads — generated by scripts/build-lib-styles.mjs. Do not edit. */
+/* ADS is light-only. Redefine the `dark` variant to be class-gated instead of
+   Tailwind's default `@media (prefers-color-scheme: dark)`, so a stray `dark:`
+   utility can never activate off the OS setting while there is no dark token
+   set. Nothing in ADS adds `.dark`, so `dark:` styles stay dormant. */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
@@ -7,8 +13,9 @@
  */
 @theme {
   /* ---- Typography ----
-     One brand typeface. Figures inside prose stay in Aribau Grotesk with
-     `tabular-nums`; only literal source code steps to the mono stack. */
+     One brand typeface (Regular + Medium). Figures stay in Aribau Grotesk with
+     `tabular-nums` (enabled globally in index.css); only literal source code
+     steps to the mono stack. */
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
@@ -40,25 +47,27 @@
   --text-2xl: 1.625rem;    /* 26px — display */
   --text-2xl--line-height: 2rem;
 
-  /* ---- Neutral ramp — the full 12-step brand palette grey (light section,
-     solid row). A Radix-style scale: each step owns a role — 50/100 =
+  /* ---- Neutral ramp — a role-based neutral Gray 12-step light scale. Every
+     channel is equal, so the product stays neutral with no Sand/Sage cast.
+     The light surface steps retain subtle spacing; the solid/text end is
+     perceptually widened so adjacent swatches and UI roles stay distinct.
+     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 */
+     borders & separators, 800/850 = solid, 900/950 = accessible text. The
+     `ink` name is retained as the stable ADS API. ---- */
+  --color-ink-50: #fcfcfc;  /*  1 · background      */
+  --color-ink-100: #f9f9f9; /*  2 · background      */
+  --color-ink-150: #f5f5f5; /*      canvas          */
+  --color-ink-200: #f0f0f0; /*  3 · interactive     */
+  --color-ink-300: #e8e8e8; /*  4 · interactive     */
+  --color-ink-400: #e0e0e0; /*  5 · interactive     */
+  --color-ink-500: #d9d9d9; /*  6 · border          */
+  --color-ink-600: #cecece; /*  7 · border          */
+  --color-ink-700: #bbbbbb; /*  8 · border          */
+  --color-ink-800: #8d8d8d; /*  9 · solid           */
+  --color-ink-850: #737373; /* 10 · solid           */
+  --color-ink-900: #555555; /* 11 · accessible text */
+  --color-ink-950: #202020; /* 12 · accessible text */
 
   /* ---- Semantic accent ramps ---- */
   /* Success stays a semantic state color, never a product-primary hue. */
@@ -99,15 +108,24 @@
   --color-amber-base: #f3a72e;
   --color-amber-deep: #b57414;
 
-  /* ---- Radii ---- TWO values only: 2px and 4px. Compact roles resolve to
-     2px; every surface and formerly pill-shaped role resolves to 4px. */
-  --radius-xs: 0.125rem;  /* 2px */
-  --radius-sm: 0.125rem;  /* 2px */
-  --radius-md: 0.25rem;   /* 4px */
-  --radius-lg: 0.25rem;   /* 4px */
-  --radius-xl: 0.25rem;   /* 4px */
-  --radius-2xl: 0.25rem;  /* 4px */
-  --radius-full: 0.25rem; /* 4px */
+  /* Demo logo indigo — source for artifact canvas wash. */
+  --color-brand-mark: #2e1065;
+
+  /* ---- Radii ---- FOUR values, assigned by element scale and role.
+     2px = micro details; 4px = compact controls; 8px = standard controls
+     and floating UI; 16px = cards and large surfaces. The repeated aliases
+     keep the familiar Tailwind role names while capping surfaces at 16px. */
+  --radius-xs: 0.125rem;  /*  2px · micro details */
+  --radius-sm: 0.25rem;   /*  4px · compact controls */
+  --radius-md: 0.5rem;    /*  8px · standard controls */
+  --radius-lg: 0.5rem;    /*  8px · menus and panels */
+  --radius-xl: 1rem;      /* 16px · cards and surfaces */
+  --radius-2xl: 1rem;     /* 16px · large surfaces */
+  --radius-3xl: 1rem;     /* 16px · capped compatibility alias */
+  --radius-4xl: 1rem;     /* 16px · capped compatibility alias */
+  /* Shape-only exception for avatars, icon buttons, progress tracks, chips,
+     and badges. It is not part of the corner-radius scale. */
+  --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
      (`rounded-full`); radio controls are the one exception (control
@@ -116,20 +134,17 @@
 
   /* ---- Elevation ---- ONE soft token (Claude-panel style).
      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);
+     The ambient drop sits close (y4, blur16) at low opacity and uses neutral
+     ink — never a cool slate tint that would reintroduce a color cast. */
+  --shadow-elevation: 0 0 0 1px rgb(32 32 32 / 0.03),
+    0 1px 2px 0 rgb(32 32 32 / 0.04),
+    0 4px 16px -6px rgb(32 32 32 / 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);
+     Deep negative spread keeps the edge feathered; the tint is neutral ink. */
+  --shadow-table-smudge-left: 8px 0 24px -14px rgb(32 32 32 / 0.05);
+  --shadow-table-smudge-right: -8px 0 24px -14px rgb(32 32 32 / 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
@@ -143,36 +158,7 @@
     inset 0 8px 16px -8px rgb(255 255 255 / 0.45);
   /* Text fields — a whisper of inset depth so the writing surface reads
      recessed into the page (persists through hover/focus/invalid). */
-  --inner-glow-field: inset 0 1px 2px 0 rgb(10 10 11 / 0.06);
-
-  /* ---- Motion ---- strong custom curves; the built-in CSS easings are too
-     weak. Declared here so the `ease-out` / `ease-in-out` utilities resolve
-     to these system-wide. JS mirror: src/lib/motion.ts — keep in sync. */
-  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* entrances, exits, presses */
-  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement / morphs */
-  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); /* side-panel and drawer slide */
-  --ease-drawer: var(--ease-expo-out); /* backwards-compatible alias */
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot (rare) */
-  --ease-disclosure: cubic-bezier(0.32, 0.72, 0, 1); /* height reveals — moves off the mark immediately, settles long */
-
-  /* Durations — every animation/transition timing flows from these.
-     UI animations stay under 300ms; exits run faster than enters. */
-  --duration-fast: 0.15s; /* menu / popover / tooltip enter */
-  --duration-normal: 0.2s; /* state transitions */
-  --duration-disclosure: 0.28s; /* collapsible open — travels a real distance */
-  --duration-spin: 0.8s; /* rotation loops (spinner) */
-  --duration-pulse: 1.5s; /* breathing / shimmer loops */
-  --duration-bloom: 0.9s; /* ambient reveals (chat texture bloom, curtain wipe) */
-  --duration-brand-loader: 3.4s; /* BrandLoader flicker loop */
-
-  /* Entrance-choreography beats — staggered delays for sequenced arrivals
-     (e.g. chat welcome: mark → greeting → composer). */
-  --stagger-1: 0.2s;
-  --stagger-2: 0.3s;
-  --stagger-3: 0.42s;
-
-  /* Press feedback — every pressable element scales down on :active */
-  --scale-press: 0.97;
+  --inner-glow-field: inset 0 1px 2px 0 rgb(32 32 32 / 0.06);
 
   /* ---- Layout ---- app-frame dimensions (Sidebar / Panel) */
   --sidebar-width: 15rem; /* 240px — primary nav rail */
@@ -263,13 +249,18 @@
   --color-fill-foreground: var(--fill-foreground);
   --color-table-shell: var(--table-shell);
 
+  --color-artifact-canvas: var(--artifact-canvas);
+
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
 
-  --color-success: var(--color-success-600);
+  /* success-700 on white = 5.48:1 (600 was 3.77:1, failed AA). */
+  --color-success: var(--color-success-700);
   --color-success-foreground: #ffffff;
+  /* Amber-500 fill kept (it IS the caution signal); dark ink foreground
+     instead of white = 6.94:1 (white on amber was 2.35:1, failed even 3:1). */
   --color-warning: var(--color-warning-500);
-  --color-warning-foreground: #ffffff;
+  --color-warning-foreground: var(--color-ink-950);
   --color-danger: var(--color-danger-600);
   --color-danger-foreground: #ffffff;
   --color-info: var(--color-info-600);
@@ -317,11 +308,14 @@
   --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 */
+  /* Text levels: primary ink-950, secondary ink-900, tertiary a tuned grey.
+     All three clear AA (4.5:1) for body copy on every surface they land on.
+     Tertiary is NOT an ink step: ink-800 (#8d8d8d) was AA-large only (2.7:1
+     on muted) but is used at 13px in 200+ places, so it is pinned to the
+     lightest grey that still passes 4.5:1 on bg/card/surface/muted. */
+  --text-primary: var(--color-ink-950);    /* ~16:1  AAA           */
+  --text-secondary: var(--color-ink-900);  /* ~7.1:1 AAA           */
+  --text-tertiary: #686868;                /* ~4.55:1 AA (min surf) */
 
   --surface: var(--color-ink-200);         /* step 3  · tinted canvas */
   --surface-foreground: var(--color-ink-950);
@@ -346,17 +340,20 @@
   --table-row-hover: color-mix(in srgb, var(--card) 40%, var(--muted));
   --table-row-selected: color-mix(in srgb, var(--card) 10%, var(--muted));
 
-  /* Quiet fill */
-  --fill: var(--color-ink-50);             /* step 1 · lightest recessed fill */
+  /* Quiet component fill. Radix step 3 is the first interactive-background
+     step, so this remains visible on both white cards and the step-2 canvas. */
+  --fill: var(--color-ink-200);            /* step 3 · default component fill */
   --fill-foreground: var(--color-ink-950);
 
-  --accent: var(--color-ink-200);          /* step 3 */
+  --accent: var(--color-ink-400);          /* step 5 · active / selected wash */
   --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  */
+  /* Borders use consecutive Radix steps 5–7. This avoids the old 3→5→7 jump:
+     tertiary stays quiet but visible at 0.5px, secondary is the Radix subtle
+     border step, and primary is the default interactive-control edge. */
+  --border-primary: var(--color-ink-600);   /* step 7 · #cecece · strongest */
+  --border-secondary: var(--color-ink-500); /* step 6 · #d9d9d9 · default   */
+  --border-tertiary: var(--color-ink-400);  /* step 5 · #e0e0e0 · 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 */
@@ -365,9 +362,8 @@
   /* Ripple — the appearance wash that radiates from a floating surface's
      origin corner as it opens (Dropdown/Popover/Select/Modal…). A soft ink
      tint that expands + fades once on mount; see the `.ads-ripple` layer and
-     the `Ripple` component. Duration stays in the sub-300ms UI band. */
+     the `Ripple` component. */
   --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
@@ -381,16 +377,17 @@
      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 */
+  --chart-axis: var(--border-tertiary);  /* axis lines + de-emphasised marks */
+  --chart-grid: var(--color-ink-200);    /* quieter than axes, visible on white */
+  --chart-track: var(--color-ink-200);   /* funnel / progress track */
+  --chart-context: var(--color-ink-500); /* de-emphasised context series */
+  --canvas-edge: var(--border-secondary);/* 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 */
+  --table-scroll-hint: rgb(32 32 32 / 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 */
+  --artifact-canvas: color-mix(in srgb, var(--color-brand-mark) 7%, #ffffff);
 
   /* shadcn-compat raw surfaces — so a downstream shadcn Sidebar / Popover
      (or an inline `var(--sidebar)` / `var(--popover)`) resolves to the ADS
@@ -444,7 +441,7 @@
   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;
+  animation: ads-ripple-wave 300ms ease-out forwards;
   will-change: transform, opacity;
 }
 @media (prefers-reduced-motion: reduce) {

package/components/ui/collapsible.js

@@ -1,35 +0,0 @@
-"use client";
-import { jsx as o } from "react/jsx-runtime";
-import { Collapsible as t } from "radix-ui";
-function a({
-  ...l
-}) {
-  return /* @__PURE__ */ o(t.Root, { "data-slot": "collapsible", ...l });
-}
-function r({
-  ...l
-}) {
-  return /* @__PURE__ */ o(
-    t.CollapsibleTrigger,
-    {
-      "data-slot": "collapsible-trigger",
-      ...l
-    }
-  );
-}
-function n({
-  ...l
-}) {
-  return /* @__PURE__ */ o(
-    t.CollapsibleContent,
-    {
-      "data-slot": "collapsible-content",
-      ...l
-    }
-  );
-}
-export {
-  a as Collapsible,
-  n as CollapsibleContent,
-  r as CollapsibleTrigger
-};