@actioneer/ads 0.5.6 → 0.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [

package/styles.css

@@ -5,39 +5,46 @@
 @import "tw-animate-css";
 
 /* ---- Aribau Grotesk ---- */
-/* Aribau Grotesk — ADS 1.0 brand typeface.
-   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. */
+/* Aribau Grotesk — ADS UI typeface.
+   TWO physical faces, both served compressed (woff2):
+   • Regular → `font-normal` (weight 100–499)
+   • Medium  → `font-medium` (weight 500)
+   There is NO semibold or bold face. The broad face range keeps legacy
+   consumers on the real Medium file, while ADS source uses only 400 and 500.
+   `font-synthesis-weight: none` (index.css) blocks faux bolding. */
 @font-face {
   font-family: "Aribau Grotesk";
-  src: url("./fonts/aribau-grotesk-400.otf") format("opentype");
-  font-weight: 100 500;
+  src: url("./fonts/aribau-grotesk-regular.woff2") format("woff2");
+  font-weight: 100 499;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: "Aribau Grotesk";
-  src: url("./fonts/aribau-grotesk-600.woff2") format("woff2");
-  font-weight: 600 900;
+  src: url("./fonts/aribau-grotesk-medium.woff2") format("woff2");
+  font-weight: 500 900;
   font-style: normal;
   font-display: swap;
 }
 
 /* ---- Design tokens ---- */
+/* 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
- *  Brand: Sage (green) · Neutrals: brand-palette grey · Typeface: Aribau Grotesk
+ *  Palette: Ink neutrals · Typeface: Aribau Grotesk
  * ============================================================
  */
 @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;
 
@@ -69,49 +76,30 @@
   --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 */
-
-  /* ---- 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 */
+     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 — shifted cooler (emerald/teal) so positive states stay clearly
-     distinct from the warm Sage brand green. */
+  /* Success stays a semantic state color, never a product-primary hue. */
   --color-success-50: #ecfdf5;
   --color-success-100: #d1fae5;
   --color-success-500: #10b981;
@@ -138,7 +126,7 @@
 
   /* ---- Data-viz accents ---- three small ramps for charts & illustration.
      deep = text/lines · base = fills · soft = backgrounds. Separate from the
-     semantic status ramps above; these are the "focal data" companions to Sage. */
+     semantic status ramps above; these carry data, not product identity. */
   --color-cyan-soft: #c7efe9;  /* Cyan — vivid cool contrast; 2nd series, links */
   --color-cyan-base: #12b5a5;
   --color-cyan-deep: #0a7e82;
@@ -149,14 +137,23 @@
   --color-amber-base: #f3a72e;
   --color-amber-deep: #b57414;
 
-  /* ---- 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) */
+  /* 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
@@ -166,20 +163,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
@@ -193,36 +187,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 */
@@ -302,7 +267,7 @@
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
 
-  /* Brand (Sage green) — used for solid fills / primary actions, not body text */
+  /* Compatibility action role — neutral ink, never a colored primary hue. */
   --color-brand: var(--brand);
   --color-brand-foreground: var(--brand-foreground);
   --color-brand-hover: var(--brand-hover);
@@ -313,13 +278,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);
@@ -361,18 +331,20 @@
 
 /* ---- Theme (light only) ---- */
 :root {
-  /* 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. */
+  /* Every neutral semantic token below points INTO the ink primitive scale.
+     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 */
+  /* 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);
@@ -384,11 +356,12 @@
   --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 */
+  /* Neutral action role. The `brand` name remains as a compatibility API,
+     but the product has no colored primary palette. */
+  --brand: var(--color-ink-950);           /* darkest action ink */
   --brand-foreground: #ffffff;
-  --brand-hover: var(--color-sage-900);    /* step 10 · hover */
-  --brand-text: var(--color-sage-850);     /* step 11 · accessible green text/links */
+  --brand-hover: var(--color-ink-900);     /* lighter hover lift */
+  --brand-text: var(--color-ink-950);      /* action text / links */
 
   /* Table interaction fills are pre-composited and opaque. Sticky edge cells
      therefore cover horizontally scrolled content while preserving the
@@ -396,56 +369,59 @@
   --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 */
   --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
+     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
      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% */
+  --ring: color-mix(in srgb, var(--color-ink-950) 50%, transparent);    /* ink @ 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 */
+  --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
      palette instead of shadcn's grey/black defaults. The sidebar reads as the
-     neutral canvas; its active item takes Sage. A consumer that had
+     neutral canvas; its active item takes action ink. A consumer that had
      hard-coded these can now delete its overrides and inherit from here. */
   --sidebar: var(--surface);
   --sidebar-foreground: var(--foreground);
@@ -494,7 +470,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) {
@@ -530,6 +506,32 @@
   display: none;
 }
 
+/* Artifact widgets are positioned by GridStack; ADS cards own the visible
+   surface while the library content wrapper only clips during interaction.
+   The subtle elevation lives on the wrapper (not the inner card) because the
+   wrapper's own `overflow: hidden` would clip a shadow drawn on its child. */
+.artifact-grid-stack > .grid-stack-item > .grid-stack-item-content {
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-elevation);
+}
+
+/* Edit affordances live on a parent flag — never toggle GridStack's own
+   className, or React will wipe library-managed classes (grid-stack, gs-N). */
+[data-artifact-edit-mode] .artifact-grid-stack > .grid-stack-item > .grid-stack-item-content {
+  cursor: grab;
+}
+
+[data-artifact-edit-mode] .artifact-grid-stack > .grid-stack-item > .grid-stack-item-content:active {
+  cursor: grabbing;
+}
+
+.artifact-grid-stack > .grid-stack-placeholder > .placeholder-content {
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-muted);
+}
+
 /* BrandTexture entrance (src/components/brand-texture.tsx): a radial bloom —
    the halftone reveals from the centre out to the corners (clip-path circle)
    while gently scaling up to rest. `from{}`-only keyframe, so it settles into
@@ -545,7 +547,7 @@
   }
 }
 .ads-texture-reveal {
-  animation: ads-texture-reveal var(--duration-bloom) var(--ease-out) both;
+  animation: ads-texture-reveal 900ms ease-out both;
 }
 
 /* Paper's WebGL shader owns the halftone animation. The canvas is bounded to
@@ -613,10 +615,10 @@
   mask-position: 0% 0%;
   -webkit-mask-position: 0% 0%;
   transition:
-    mask-position 1s var(--ease-out),
-    -webkit-mask-position 1s var(--ease-out),
-    translate 1s var(--ease-out),
-    opacity 1s var(--ease-out);
+    mask-position 1s ease-out,
+    -webkit-mask-position 1s ease-out,
+    translate 1s ease-out,
+    opacity 1s ease-out;
 }
 .ads-texture-lifted {
   mask-position: 0% 100%;
@@ -625,7 +627,7 @@
 }
 @media (prefers-reduced-motion: reduce) {
   .ads-texture-lift {
-    transition: opacity var(--duration-normal) var(--ease-out);
+    transition: opacity 200ms ease-out;
   }
   .ads-texture-lifted {
     mask-position: 0% 0%;
@@ -664,7 +666,7 @@
   }
 }
 .brand-loader-cell {
-  animation: brand-flicker var(--duration-brand-loader) steps(1) infinite backwards;
+  animation: brand-flicker 3.4s steps(1) infinite backwards;
 }
 @media (prefers-reduced-motion: reduce) {
   .brand-loader-cell {
@@ -689,7 +691,10 @@
     color: var(--foreground);
     font-family: var(--font-sans);
     font-size: var(--text-base); /* 15px base */
-    font-feature-settings: "cv01", "ss01";
+    /* Stylistic sets ss01, ss02, ss03. Figures are tabular everywhere
+       (data-dense UI) via the real property, not a "tnum" feature tag. */
+    font-feature-settings: "ss01", "ss02", "ss03";
+    font-variant-numeric: tabular-nums;
     font-synthesis-weight: none;
   }
 
@@ -718,7 +723,7 @@
   }
   ::-webkit-scrollbar-thumb {
     background: var(--border-strong);
-    border-radius: 9999px;
+    border-radius: var(--radius-lg);
     border: 2px solid var(--background);
   }
   ::-webkit-scrollbar-thumb:hover {
@@ -774,7 +779,7 @@
   to { opacity: 1; }
 }
 .ads-reveal {
-  animation: ads-reveal-rise var(--reveal-duration, 0.45s) var(--ease-out) both;
+  animation: ads-reveal-rise var(--reveal-duration, 0.45s) ease-out both;
   animation-delay: calc(var(--reveal-step, 70ms) * var(--reveal-order, 0));
 }
 .ads-reveal-ink { animation-name: ads-reveal-ink; }
@@ -819,9 +824,9 @@
     border-color: var(--glow-border-rest);
     box-shadow: var(--glow-inset);
     transition:
-      color var(--duration-normal) var(--ease-out),
-      border-color var(--duration-normal) var(--ease-out),
-      box-shadow var(--duration-normal) var(--ease-out);
+      color 200ms ease-out,
+      border-color 200ms ease-out,
+      box-shadow 200ms ease-out;
   }
 
   /* Hover: the same solid brand-black stroke as focus — one consistent
@@ -897,7 +902,7 @@
 }
 
 .ads-row-flash > td {
-  animation: ads-row-flash 1.6s var(--ease-out) forwards;
+  animation: ads-row-flash 1.6s ease-out forwards;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -916,11 +921,9 @@
    it does not merge), so animating height alongside tw-animate-css's enter/exit
    silently drops the fade and leaves a bare height shutter — which reads as
    rigid no matter how it is timed. Radix publishes the measured height as
-   --radix-collapsible-content-height; exits run faster than enters.
-   Eased with --ease-disclosure. --ease-out front-loads ~60% of the travel into
-   the first third (pop, then settle); --ease-in-out holds ~150ms before moving
-   (lag, then rush). A height reveal needs to leave the mark immediately and
-   settle long, which is what this curve does. */
+   --radix-collapsible-content-height. This CSS-only primitive keeps its short
+   timing local; Motion-based disclosures use springDisclosure from
+   src/lib/motion.ts. */
 @keyframes ads-collapsible-down {
   from {
     height: 0;
@@ -946,10 +949,10 @@
   }
 }
 .ads-collapsible[data-state="open"] {
-  animation: ads-collapsible-down var(--duration-disclosure) var(--ease-disclosure);
+  animation: ads-collapsible-down 280ms ease-in-out;
 }
 .ads-collapsible[data-state="closed"] {
-  animation: ads-collapsible-up var(--duration-normal) var(--ease-disclosure);
+  animation: ads-collapsible-up 200ms ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .ads-collapsible[data-state="open"],
@@ -1009,7 +1012,18 @@
   width: 1rem;
   border-bottom: 1px solid var(--border-strong);
   border-left: 1px solid var(--border-strong);
-  border-bottom-left-radius: 9px;
+  border-bottom-left-radius: var(--radius-lg);
+}
+
+/* Comments become a placement mode while the comments panel is open. Keep
+   the native cursor readable while giving it the same compact ADS chat mark
+   used by the rest of the Artifact UI. */
+.artifact-comment-cursor,
+.artifact-comment-cursor * {
+  cursor:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12' fill='white' stroke='%23242424' stroke-width='1.5'/%3E%3Cpath d='M8.5 9.5h11v7h-5.5l-3.5 3v-3h-2z' fill='%23242424'/%3E%3C/svg%3E")
+      5 5,
+    crosshair !important;
 }
 /* Let the consumer's Tailwind discover the classes ADS components use. */
 @source "./**/*.{js,mjs}";