@tangle-network/agent-app 0.45.23 → 0.45.24

package/dist/theme/tokens.css

@@ -15,32 +15,85 @@
  *
  * The aliases reference the triples, so redefining only the triples in the dark
  * scope re-themes both vocabularies through the cascade.
+ *
+ * Neutrals are authored on ONE oklch ramp (`--neutral-*`, below) and the shadcn
+ * triples point at it. Structural reference: Cabinet (MIT) — see
+ * docs/design-tokens.md for the decisions and what we did differently.
  */
 
 :root {
+  /* ── The neutral ramp ────────────────────────────────────────────────────
+     ONE ladder, both themes: light reads it from the top down, dark from the
+     bottom up. Stop names ARE their oklch lightness (`--neutral-91` is
+     L 0.91), so the ladder rule is checkable rather than conventional:
+
+         L = 0.16 + 0.03n      n = 0 … 28      (0.16 is the darkest surface,
+                                                1.00 the terminal white)
+
+     Chroma is a CONSTANT 0.004 at hue 286 — one deliberate cool cast, not a
+     wandering one. The HSL these tokens replaced carried "S 5–7%" throughout
+     and that reads as consistent, but HSL saturation is not chroma: the same
+     nominal 5–7% produced 0.0014 chroma at L 0.976 and 0.0154 at L 0.478, so
+     the old ramp visibly GAINED blue as it darkened. Look at the `-hsl` mirrors
+     below to see the same fact from the other side — holding chroma constant
+     needs S 17.2% at L 0.97 and S 1.3% at L 0.49.
+
+     The terminal stop is chroma 0 because sRGB admits no chroma at L 1.
+
+     Each stop ships TWICE, and the pair is the whole compatibility story:
+       --neutral-NN       the oklch value — the SOURCE, what new work reads
+       --neutral-NN-hsl   the same colour as an "H S% L%" channel triple
+     A pinned consumer's `hsl(var(--border))` must keep resolving, and CSS
+     cannot convert oklch to a bare channel triple, so the triple is a mirror
+     rather than a derivation. tests/theme/tokens-contract.test.ts converts
+     every oklch stop to HSL and fails if its mirror has drifted, so the two
+     forms cannot disagree without a red test. */
+  --neutral-16: oklch(0.16 0.004 286);
+  --neutral-16-hsl: 240.1 6.8% 5.5%;
+  --neutral-19: oklch(0.19 0.004 286);
+  --neutral-19-hsl: 240 4.9% 8%;
+  --neutral-22: oklch(0.22 0.004 286);
+  --neutral-22-hsl: 239.9 3.8% 10.7%;
+  --neutral-25: oklch(0.25 0.004 286);
+  --neutral-25-hsl: 239.9 3.1% 13.5%;
+  --neutral-49: oklch(0.49 0.004 286);
+  --neutral-49-hsl: 239.7 1.3% 38.2%;
+  --neutral-70: oklch(0.7 0.004 286);
+  --neutral-70-hsl: 239.6 1.5% 62.5%;
+  --neutral-91: oklch(0.91 0.004 286);
+  --neutral-91-hsl: 239.6 5.2% 88.7%;
+  --neutral-94: oklch(0.94 0.004 286);
+  --neutral-94-hsl: 239.6 8% 92.6%;
+  --neutral-97: oklch(0.97 0.004 286);
+  --neutral-97-hsl: 239.6 17.2% 96.5%;
+  --neutral-100: oklch(1 0 0);
+  --neutral-100-hsl: 0 0% 100%;
+
   /* shadcn channel triples — "H S% L%", consumed as hsl(var(--name)).
-     Values mirror @tangle-network/brand (Tangle Quiet) so agent-app surfaces
-     match sandbox-ui in the same app. agent-app keeps its own light-default /
+     Neutrals point at a ramp stop; the brand hues (primary/destructive/status)
+     keep their measured HSL, because moving them would move agent-app off
+     @tangle-network/brand (Tangle Quiet) and off the status colours that were
+     tuned for AA as TEXT. agent-app keeps its own light-default /
      [data-theme="dark"] scope model (brand is dark-default), so /theme stays
      dependency-free — only the values are shared, not the cascade. */
-  --background: 0 0% 100%;
-  --foreground: 0 0% 5%;
-  --card: 240 7% 97%;
-  --card-foreground: 0 0% 5%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 5%;
+  --background: var(--neutral-100-hsl);
+  --foreground: var(--neutral-16-hsl);
+  --card: var(--neutral-97-hsl);
+  --card-foreground: var(--neutral-16-hsl);
+  --popover: var(--neutral-100-hsl);
+  --popover-foreground: var(--neutral-16-hsl);
   --primary: 245 62% 57%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 240 6% 93%;
-  --secondary-foreground: 0 0% 10%;
-  --muted: 240 6% 93%;
-  --muted-foreground: 240 5% 38%;
-  --accent: 240 6% 93%;
-  --accent-foreground: 0 0% 10%;
+  --primary-foreground: var(--neutral-100-hsl);
+  --secondary: var(--neutral-94-hsl);
+  --secondary-foreground: var(--neutral-22-hsl);
+  --muted: var(--neutral-94-hsl);
+  --muted-foreground: var(--neutral-49-hsl);
+  --accent: var(--neutral-94-hsl);
+  --accent-foreground: var(--neutral-22-hsl);
   --destructive: 0 72% 41%;
-  --destructive-foreground: 0 0% 100%;
-  --border: 240 6% 89%;
-  --input: 240 6% 89%;
+  --destructive-foreground: var(--neutral-100-hsl);
+  --border: var(--neutral-91-hsl);
+  --input: var(--neutral-91-hsl);
   --ring: 245 62% 57%;
   /* status colors — brand hues (teal/gold/red), but lightness kept dark enough
      to clear WCAG AA when used AS TEXT on tinted chips. Brand's own status
@@ -49,6 +102,17 @@
   --success-foreground: 0 0% 100%;
   --warning: 41 96% 38%;
   --warning-foreground: 38 92% 12%;
+  /* Warning as TEXT on a warning-TINTED surface (the approval card's
+     `bg-warning/[0.06]`), which is a different surface from the solid gold chip
+     `--warning-foreground` is paired with — and the reason that pairing cannot
+     serve both. Measured on the shipped approval card: no single lightness
+     clears AA in both themes, because the tint tracks the page. On the light
+     card rgb(251,248,240) the ramp needs L <= 30% (L 38% is 3.07:1); on the dark
+     card rgb(27,22,16) it needs L >= 34% (L 28% is 3.27:1). So this token
+     re-themes where `--warning` and `--warning-foreground` deliberately do not.
+     28% / 56% are the values with margin either side of those knees: 5.17:1
+     light, 10.11:1 dark. */
+  --warning-strong: 41 96% 28%;
 
   /* canvas/sequences aliases — full colors, resolve to the triples above */
   --bg-input: hsl(var(--card));
@@ -73,42 +137,236 @@
   --accent-surface-soft: hsl(var(--accent));
   --accent-text: hsl(var(--accent-foreground));
   --status-error: hsl(var(--destructive));
-  --radius-md: 0.5rem;
 
   /* canvas-only surfaces (not part of the shadcn vocabulary). Name matches the
-     `--canvas-backdrop` the design-canvas Workspace references (with a #1a1a1a fallback). */
-  --canvas-backdrop: hsl(240 7% 90%);
+     `--canvas-backdrop` the design-canvas Workspace references (with a #1a1a1a
+     fallback). One ramp stop below the sheet, so the page reads as lifted. */
+  --canvas-backdrop: hsl(var(--neutral-91-hsl));
+
+  /* Keyboard focus ring. Resolves through `--ring`, so the dark scope re-themes
+     it by the same cascade every other token here uses. */
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-ring-color: hsl(var(--ring));
+
+  /* ── Radius ──────────────────────────────────────────────────────────────
+     One root, every step a multiplier of it, so a product re-proportions its
+     whole chrome by changing ONE number. `--radius-md` keeps its shipped
+     0.5rem exactly (0.625 x 0.8), which is what pins the root at 0.625rem:
+     gtm-agent consumes `--radius-md` for its composer send button, and the
+     sandbox-ui MD3 components bridged above read it too.
+
+     The root is `--radius-base`, NOT `--radius`, and that is deliberate. Half
+     the fleet already owns `--radius` (tax-agent sets 0.5rem, legal-agent
+     0.625rem) inside `@layer base`, while this file is linked UNLAYERED — an
+     unlayered declaration beats any layered one, so shipping `--radius` here
+     would silently seize a token products already drive their own scales from.
+     A product that wants its root to drive this ladder opts in with one line:
+     `--radius-base: var(--radius)`. */
+  --radius-base: 0.625rem;
+  --radius-sm: calc(var(--radius-base) * 0.6); /* 0.375rem — 6px  */
+  --radius-md: calc(var(--radius-base) * 0.8); /* 0.5rem   — 8px  */
+  --radius-lg: var(--radius-base); /*             0.625rem — 10px */
+  --radius-xl: calc(var(--radius-base) * 1.4); /* 0.875rem — 14px */
+  --radius-2xl: calc(var(--radius-base) * 1.8); /* 1.125rem — 18px */
+  --radius-3xl: calc(var(--radius-base) * 2.2); /* 1.375rem — 22px */
+
+  /* ── Motion ──────────────────────────────────────────────────────────────
+     Four durations and three curves, paired into the three composites a
+     component actually reaches for. Before these, 64 transitions in this
+     package ran on Tailwind's implicit 150 ms / default curve with no named
+     intent — nothing was WRONG, but nothing was decidable either.
+
+     The durations are a x1.5-ish ladder rather than round numbers, because
+     what a user perceives is the ratio: 90 reads as instant, 150 as a
+     response, 240 as a movement you can follow, 360 as a surface travelling.
+
+       instant  a control acknowledging a pointer (hover/active colour)
+       fast     a state change on a control already on screen
+       base     a surface arriving or leaving (popover, panel, disclosure)
+       slow     a full-height surface travelling (drawer, sheet, sidebar)
+
+     `fast` is 150 ms on purpose: it is what those 64 transitions already run
+     at, so adopting the token is a rename, never a retune.
+
+     Curves: entrances decelerate hard and land softly; state changes
+     decelerate normally; exits ACCELERATE away, because a user who dismissed
+     something is done with it and should not wait for it to glide out. */
+  --duration-instant: 90ms;
+  --duration-fast: 150ms;
+  --duration-base: 240ms;
+  --duration-slow: 360ms;
+  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  /* Drop-in duration+easing pairs: `transition: background-color var(--motion-control)`. */
+  --motion-control: var(--duration-fast) var(--ease-standard);
+  --motion-surface: var(--duration-base) var(--ease-entrance);
+  --motion-dismiss: var(--duration-instant) var(--ease-exit);
+
+  /* ── Border tiers ────────────────────────────────────────────────────────
+     Three strengths of the SAME border colour, because a divider inside a
+     panel and the edge of a card floated on the page are not the same line,
+     and shipping one strength for both is what makes a UI read boxy.
+
+       --border-soft   dividers and de-emphasised edges — the tier the
+                       `border-border` utility maps to, so all 151 of this
+                       package's usages move together
+       --card-edge     a container that must read as a container
+       hsl(--border)   full strength: form-field edges (`--input`), and any
+                       edge a component deliberately emphasises
+
+     LIGHT is 40% / 60%, chosen against OUR surfaces rather than copied. A 1px
+     hairline, contrast of the composited line against the surface it sits on,
+     rendered and read back by playground/scripts/token-render.mjs:
+
+       alpha   on background   on card   on muted
+        22%        1.060         1.044     1.026    the reference's soft value
+        40%        1.108         1.072     1.036    quiet, still resolves
+        60%        1.176         1.120     1.063    reads as a container
+       100%        1.311         1.205     1.102    reads as a box
+
+     40% is the quietest alpha at which a 1px line still resolves on `--card`,
+     which is where most of this package's dividers actually sit — at 22% it is
+     simply not there.
+     The card edge is 60% rather than the reference's 55% because ours has to
+     clear the soft tier by enough to read as a DIFFERENT decision (1.176 vs
+     1.108), while our card already carries a fill step of its own (L 0.97 on a
+     1.00 background) that the reference's card — the same colour as its
+     background — does not have.
+
+     DARK INVERTS: both tiers are FULL strength. Same measurement, our dark
+     ramp, and it forces the opposite answer. Dark `--border` (L 0.25) is
+     already at the edge of visible at 100% — 1.212 on background, 1.158 on
+     card, 1.085 on muted — and the same 40% takes those to 1.057 / 1.048 /
+     1.023. That is not a quieter line, it is no line. A tier system that
+     erases the thing it is tiering is worse than no tiers, so dark collapses
+     the three to one. */
+  --border-soft: color-mix(in oklch, hsl(var(--border)) 40%, transparent);
+  --card-edge: color-mix(in oklch, hsl(var(--border)) 60%, transparent);
+}
+
+/**
+ * The keyboard-focus floor.
+ *
+ * Every interactive element is keyboard-visible by DEFAULT, so a component has
+ * to opt out on purpose rather than by omission. Before this rule an element
+ * that declared no focus style fell back to the browser's own ring — measured
+ * `rgb(16, 16, 16)` in BOTH themes, because nothing here sets `color-scheme`,
+ * which is 1.03:1 against the dark canvas backdrop `rgb(19, 19, 21)`. Visible in
+ * light, effectively absent in dark, on 30 of the 176 focusable elements the
+ * playground audit reaches.
+ *
+ * Specificity is deliberately left at one pseudo-class, and that is the whole
+ * contract:
+ *
+ *   - It applies wherever nothing else declares a focus style — the gap above.
+ *   - It LOSES to `.focus\:outline-none:focus` and `.focus-visible\:ring-*`
+ *     (two compound selectors), so a component with a deliberate custom ring is
+ *     untouched and no consumer gets a doubled ring from upgrading.
+ *   - It TIES with a bare `.outline-none` utility, which means source order
+ *     decides and the floor cannot be relied on to win. That is not a hole left
+ *     open: a bare `outline-none` with no replacement is a defect this package
+ *     fixes at the component and `tests/theme/focus-floor.test.ts` keeps fixed.
+ *     CSS cannot distinguish a deliberate opt-out from a forgotten one, so the
+ *     guard that can is a test, not a stronger selector.
+ *
+ * An outline, not a `ring-*` box-shadow, because an outline is not painted by
+ * the element's own background/shadow stack — it cannot be covered by a sibling
+ * and it needs no `ring-offset-color` matched to whatever surface it sits on.
+ */
+:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 [data-theme='dark'],
 .dark {
-  --background: 240 8% 5%;
-  --foreground: 240 6% 93%;
-  --card: 240 5% 8%;
-  --card-foreground: 240 6% 93%;
-  --popover: 240 4% 13%;
-  --popover-foreground: 240 6% 93%;
+  /* The ramp is NOT redefined here — both themes read the same `--neutral-*`
+     ladder and only differ in which stop each role picks.
+     `--warning-foreground` (dark text on a solid gold chip) is theme-invariant
+     and is therefore absent, not omitted: the cascade already carries it. */
+  --background: var(--neutral-16-hsl);
+  --foreground: var(--neutral-94-hsl);
+  --card: var(--neutral-19-hsl);
+  --card-foreground: var(--neutral-94-hsl);
+  --popover: var(--neutral-25-hsl);
+  --popover-foreground: var(--neutral-94-hsl);
   /* 74% L (brand's #818CF8 intent) so primary clears AA as TEXT on a primary/10
-     tint in dark; the solid primary button pairs it with a light foreground. */
+     tint in dark. That lightness is also why the foreground has to INVERT here:
+     the light theme's white-on-indigo is 6.01:1, but the same white on this
+     74%-L lavender rgb(137,137,245) is 3.02:1 — measured failing on the
+     "Approve & run" button. A dark foreground on the same fill is 6.44:1, so
+     the solid button reads in both themes and the tint keeps its AA as text. */
   --primary: 239 84% 74%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 240 5% 11%;
-  --secondary-foreground: 240 6% 93%;
-  --muted: 240 5% 11%;
-  --muted-foreground: 240 4% 62%;
-  --accent: 240 5% 11%;
-  --accent-foreground: 240 6% 93%;
+  --primary-foreground: var(--neutral-16-hsl);
+  --secondary: var(--neutral-22-hsl);
+  --secondary-foreground: var(--neutral-94-hsl);
+  --muted: var(--neutral-22-hsl);
+  --muted-foreground: var(--neutral-70-hsl);
+  --accent: var(--neutral-22-hsl);
+  --accent-foreground: var(--neutral-94-hsl);
   --destructive: 348 90% 68%;
-  --destructive-foreground: 0 0% 12%;
-  --border: 240 3% 13%;
-  --input: 240 5% 11%;
+  --destructive-foreground: var(--neutral-25-hsl);
+  /* @see the :root declaration — this is the tier that re-themes. */
+  --warning-strong: 40 94% 56%;
+  --border: var(--neutral-25-hsl);
+  --input: var(--neutral-22-hsl);
   --ring: 239 84% 74%;
   --success: 160 70% 52%;
   --success-foreground: 160 84% 10%;
   --warning: 40 94% 56%;
-  --warning-foreground: 38 92% 12%;
 
-  --canvas-backdrop: hsl(240 8% 5%);
+  --canvas-backdrop: hsl(var(--neutral-16-hsl));
+
+  /* The tier inversion. Full strength for BOTH tiers — see the measurement in
+     the :root block: a softened dark hairline is not quieter, it is absent. */
+  --border-soft: hsl(var(--border));
+  --card-edge: hsl(var(--border));
+}
+
+/**
+ * Reduced motion, at the token layer and at the floor.
+ *
+ * Two rules, because they cover two different populations. Collapsing the
+ * duration TOKENS is what makes motion built on this system honour the
+ * preference for free — a component that wrote `var(--motion-surface)` needs no
+ * media query of its own, and gets no chance to forget one. The universal rule
+ * under it is the floor for everything that predates the tokens: 64 transitions
+ * in this package run on Tailwind's implicit duration, and a consumer's own
+ * components run on theirs. Neither reads a token, so neither would be reached.
+ *
+ * 1ms rather than 0: a zero-duration transition fires no `transitionend`, and
+ * any component that awaits one to unmount or advance a state machine hangs
+ * forever. 1ms is imperceptible AND still fires.
+ *
+ * The floor uses `!important` where the `:focus-visible` floor deliberately did
+ * not, and the asymmetry is the point. Focus styling is a design decision a
+ * component is entitled to make differently. Reduced motion is not a design
+ * decision — it is an explicit request from the person using the product, and a
+ * component overriding it is a defect, not a preference. Motion that genuinely
+ * carries meaning (a determinate progress indicator, a live-status pulse) opts
+ * out by declaring `data-motion="essential"`; the exclusion covers that element
+ * and its subtree, and `:where()` keeps the selector at zero specificity so a
+ * consumer's own `!important` can still win.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 1ms;
+    --duration-fast: 1ms;
+    --duration-base: 1ms;
+    --duration-slow: 1ms;
+  }
+
+  *:where(:not([data-motion='essential'], [data-motion='essential'] *)) {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+  }
+
+  html {
+    scroll-behavior: auto !important;
+  }
 }
 
 .agent-app-edit-selection::selection {

package/dist/vault/index.js

@@ -1,7 +1,7 @@
 import {
   ConfirmDialog,
   VaultPane
-} from "../chunk-FVJP2RTC.js";
+} from "../chunk-JJJEO4ND.js";
 export {
   ConfirmDialog,
   VaultPane

package/dist/vault/lazy.js

@@ -1,7 +1,7 @@
 // src/vault/lazy.tsx
 import { lazy } from "react";
 var VaultPaneLazy = lazy(
-  () => import("../VaultPane-HFH734K6.js").then((m) => ({ default: m.VaultPane }))
+  () => import("../VaultPane-MUWGYVJ7.js").then((m) => ({ default: m.VaultPane }))
 );
 export {
   VaultPaneLazy