@actioneer/ads 0.5.7 → 0.5.9

package/styles.css

@@ -5,29 +5,35 @@
 @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
@@ -36,8 +42,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;
 
@@ -69,25 +76,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. */
@@ -128,15 +137,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
@@ -145,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
@@ -172,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 */
@@ -292,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);
@@ -346,11 +337,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);
@@ -375,17 +369,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 */
@@ -394,9 +391,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
@@ -410,16 +406,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
@@ -473,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) {
@@ -519,6 +516,16 @@
   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);
@@ -540,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
@@ -608,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%;
@@ -620,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%;
@@ -659,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 {
@@ -684,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;
   }
 
@@ -769,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; }
@@ -814,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
@@ -892,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) {
@@ -911,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;
@@ -941,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"],
@@ -1006,5 +1014,16 @@
   border-left: 1px solid var(--border-strong);
   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}";