@tangle-network/sandbox-ui 0.124.0 → 0.125.0

package/dist/tailwind.css

@@ -0,0 +1,1002 @@
+/* Tailwind SOURCE entry: `@tangle-network/sandbox-ui/tailwind.css`.
+ *
+ * Import it from a Tailwind v4 stylesheet, after `tailwindcss`:
+ *
+ *   @import "tailwindcss";
+ *   @import "@tangle-network/sandbox-ui/tailwind.css";
+ *
+ * It carries Brand's tokens, named themes and utility registrations, this
+ * package's runtime CSS, and the `@source` lines that compile every utility
+ * sandbox-ui and @tangle-network/ui components write. The published copy in
+ * dist/ appends those `@source` lines (see scripts/copy-styles.mjs); Tailwind
+ * resolves them relative to the installed file, so a consumer lists no
+ * node_modules paths of its own.
+ *
+ * The same file is the source of the precompiled `./styles` bundle:
+ * src/styles/globals.css wraps it with `@import "tailwindcss"` and this repo's
+ * own source globs. Edit runtime CSS here, never in globals.css. */
+
+/* Fonts are loaded by the consumer, not this library. See README
+ * "Fonts" for the list of font families sandbox-ui references
+ * (Geist, Geist Mono, Outfit, Manrope, Inter) and the recommended
+ * loading strategies (@fontsource packages or an HTML <link>).
+ *
+ * Historical note: previous versions shipped
+ *   @import url("https://fonts.googleapis.com/css2?family=Geist...")
+ * at the top of this file. That pattern broke in downstream apps that
+ * used CSS chain `@import`s — once the dist CSS is inlined after any
+ * rule, the URL @import is no longer at the top of the merged
+ * stylesheet and the CSS spec disallows it (PostCSS rejects the
+ * build). Shipping fonts as a library concern is also undesirable
+ * for privacy (third-party Google Fonts request) and network-failure
+ * reasons. Consumers own font loading now. */
+
+@import "@tangle-network/brand/styles/tokens.css";
+/* Brand's named themes (`data-theme="<name>"`). They re-skin the surface ladder
+ * and nothing else — the Tangle accent stays put. Imported here so a consuming
+ * app opting into one resolves it through the single composed entry point,
+ * rather than reaching into brand for a second stylesheet. */
+@import "@tangle-network/brand/styles/named-themes.css";
+
+/* Canonical font, radius and semantic-color utility registrations, imported as
+ * DEFAULT theme values. A default registration still emits every Brand utility,
+ * and it still outranks Tailwind's own defaults (it is declared later), but a
+ * consumer's `@config` preset can override a name it also maps. That is the
+ * precedence a consumer had when this package shipped only a precompiled bundle:
+ * the app's own compile loaded last and its preset mapping won. Without
+ * `default`, Brand's `--color-border` and `--radius-lg` would silently replace
+ * the Agent App preset's `border-border` and `rounded-lg` in every app that
+ * compiles this entry. */
+@import "@tangle-network/brand/styles/theme.css" theme(default);
+
+/* Brand defines these aliases on :root and [data-sandbox-ui]. Rebind them on
+ * explicit theme scopes so nested themes resolve their own HSL colors. A host
+ * can still override either alias on a nearer wrapper. */
+:is(.dark, .light, [data-theme], [data-sandbox-theme="vault"]) {
+  --foreground: var(--hsl-foreground);
+  --muted-foreground: var(--hsl-muted-foreground);
+}
+
+/* `--text-dim` arrives from brand and is NOT overridden here.
+ *
+ * `--text-dim` is the quietest text tier: an Input/Textarea hint, a StatCard
+ * subtitle, a TerminalLine timestamp. Its value is only correct when it is tuned
+ * against the surface ladder it lands on, so the token and the ladder must move
+ * together and must come from the same place. brand ships both, and
+ * `scripts/text-dim-contrast.test.mjs` holds the resolved pair to AA on every
+ * plane this package paints content on.
+ *
+ * A local override here would decouple the two: the ladder would keep arriving
+ * from brand while the text tier stopped tracking it, and the next ladder change
+ * would silently move every ratio. Correct the value in brand instead. */
+
+
+/* The text ramp, emitted unconditionally.
+ *
+ * Everything above is a SCAN: Tailwind emits a utility only if it found that
+ * exact string in a scanned file, and the `@tangle-network/ui` glob scans
+ * whatever version happens to be installed HERE, at build time. A consumer
+ * installs its own `@tangle-network/ui` and can perfectly well resolve a newer
+ * one than this package was built against — the peer range permits it — and
+ * every utility that version introduced is then missing from the precompiled
+ * bundle.
+ *
+ * That is not hypothetical. `@tangle-network/ui` 11.2.4 restyled the
+ * Input/Textarea hint, the StatCard subtitle and the TerminalLine timestamp onto
+ * `text-[var(--text-dim)]`; this package resolved 11.2.0; `dist/globals.css`
+ * emitted no rule for it. Apps that run their own Tailwind/UnoCSS scan over
+ * `@tangle-network/ui` were fine. Apps on the precompiled bundle (physim,
+ * blueprint-agent) rendered those three at inherited body colour — 15-17:1,
+ * indistinguishable from body copy. A contrast audit cannot see it, because
+ * nothing is under-contrast; the tier is simply gone.
+ *
+ * A scan cannot fix that, because the missing string is by definition one this
+ * build never saw. So the four text tiers are declared inline: they are the
+ * brand text ramp, they are a closed set, and each one's absence degrades
+ * silently to the inherited colour rather than to something visibly wrong.
+ * Pinned by `scripts/text-dim-contrast.test.mjs`.
+ *
+ * The test for belonging here is who WRITES the class, not which token it
+ * names: a class a consumer writes and this package does not. Anything this
+ * package's own components write is already covered by the `@source` globs
+ * above and needs no entry — `text-[var(--accent-text)]` in the connector
+ * catalog, for one, which the scan sees and emits. */
+@source inline("text-[var(--text-primary)]");
+@source inline("text-[var(--text-secondary)]");
+@source inline("text-[var(--text-muted)]");
+@source inline("text-[var(--text-dim)]");
+
+/* The run-mix ramp, emitted for the same reason the text ramp is: a consuming
+ * app paints a proportional status bar with these, and a scan of THIS package
+ * never sees the class. */
+@source inline("bg-[var(--run-mix-succeeded)]");
+@source inline("bg-[var(--run-mix-waiting)]");
+@source inline("bg-[var(--run-mix-failed)]");
+@source inline("bg-[var(--run-mix-in-flight)]");
+@source inline("bg-[var(--run-mix-cancelled)]");
+
+/* Compatibility names not registered by Brand 1.10.0. The runtime values
+ * still belong to Brand; do not duplicate its other @theme registrations. */
+@theme inline default {
+  --color-surface: var(--md3-surface);
+  --color-surface-dim: var(--md3-surface-dim);
+  --color-surface-bright: var(--md3-surface-bright);
+}
+
+/* ── Motion ────────────────────────────────────────────────────────────────
+ *
+ * `@tangle-network/brand` ships exactly one motion token (`--transition-default:
+ * 0.16s ease`) and no curves, so every animated surface in this package picked
+ * its own number: `duration-150` on a rail button, `duration-200` on the rail
+ * itself, `0.18s ease-out` on a session row, Tailwind's implicit default
+ * everywhere a bare `transition-colors` was written. Nothing was wrong;
+ * nothing was decidable either, and none of it was reachable by a reduced-motion
+ * preference.
+ *
+ * These are the SAME names and the SAME values `@tangle-network/agent-app`
+ * declares in its own `theme/tokens.css` (0.45.46+), deliberately duplicated
+ * rather than imported: sandbox-ui does not depend on agent-app, and a product
+ * that loads both stylesheets must not get two different answers for
+ * `--duration-base`. Identical declarations are order-independent; divergent
+ * ones are a coin flip decided by import order. If agent-app retunes the
+ * ladder, retune it here in the same change.
+ *
+ * They live in `globals.css` and not in `dist/tokens.css` because that file is
+ * a byte-for-byte copy of brand's (see scripts/copy-styles.mjs) — the tokens
+ * that are ours to declare belong in the one stylesheet this package authors,
+ * next to the utilities that consume them.
+ *
+ *   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, the rail)
+ *
+ * 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. */
+:root {
+  --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);
+
+  /* Entrance choreography. The durations above answer "how fast does an
+   * existing thing change"; these answer "how does a thing that was not there
+   * ARRIVE" — a nav rail unfolding, a session appearing in the list, a
+   * disclosure revealing its sub-items.
+   *
+   * `--motion-stream` is longer than `base` on purpose: streamed text arrives
+   * continuously, so each chunk overlaps its neighbours and a fast curve makes
+   * the paragraph flicker. `--motion-arrive` is the row/card entrance and is
+   * meant to be staggered by index (see `--stagger-step`). */
+  --duration-stream: 420ms;
+  --duration-arrive: 600ms;
+  --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
+  --motion-stream: var(--duration-stream) var(--ease-expo);
+  --motion-arrive: var(--duration-arrive) var(--ease-expo);
+  /* Per-item delay in a staggered group. 5 items = 200ms tail, which stays
+   * under the 250ms an interface can add before it reads as latency. */
+  --stagger-step: 50ms;
+  /* Position in a staggered group, overridden PER ELEMENT by the caller. It is
+   * declared here with a zero default rather than read through a `var()`
+   * fallback so the file never references a token it does not define — an
+   * undefined `var()` resolves to nothing and paints silently, which is the
+   * failure the token contract exists to catch. */
+  --stagger-index: 0;
+  /* How far an arriving surface travels, and how far a streamed chunk resolves
+   * from. Both are small: motion that announces itself is motion you notice
+   * twice. */
+  --arrive-distance: 8px;
+  --stream-blur: 4px;
+  /* Period of the `.agent-shimmer` sweep. Deliberately NOT named
+   * `--duration-*`: that prefix is the collapsible ladder, and the
+   * reduced-motion block sets every member of it to 1ms at `:root`. A custom
+   * property collapsed at the root cannot be excluded per element, so naming
+   * this one `--duration-shimmer` would freeze the sweep for the very users the
+   * `data-motion="essential"` exemption exists to keep informed. The sweep is a
+   * looping SIGNAL, not a transition, so it sits with the other non-collapsible
+   * motion constants above. */
+  --shimmer-period: 1400ms;
+}
+
+/* `@pierre/trees` (RichFileTree) is CSS-var driven and ships LIGHT defaults with
+ * no dark switching — `--trees-bg: var(--trees-bg-override, <light>)`. Without the
+ * `*-override` vars it paints a near-white `#f8f8f8` container even inside a dark
+ * subtree (the file-tree-rail-looks-light bug). Map the overrides onto the design
+ * tokens so the tree follows light/vault ↔ dark automatically (the surface +
+ * foreground vars already flip per theme). Apply via `.sandbox-tree-surface`. */
+.sandbox-tree-surface {
+  --trees-bg-override: var(--md3-surface-container-lowest);
+  --trees-bg-muted-override: var(--md3-surface-container-low);
+  --trees-search-bg-override: var(--md3-surface-container);
+  --trees-input-bg-override: var(--md3-surface-container);
+  --trees-hover-bg-override: var(--md3-surface-container-high);
+  --trees-selected-bg-override: hsl(var(--primary) / 0.16);
+  --trees-selected-fg-override: hsl(var(--foreground));
+  --trees-fg-override: hsl(var(--foreground));
+  --trees-fg-muted-override: hsl(var(--muted-foreground));
+  --trees-muted-fg-override: hsl(var(--muted-foreground));
+  --trees-search-fg-override: hsl(var(--foreground));
+  --trees-border-color-override: var(--md3-outline-variant);
+  --trees-indent-guide-bg-override: var(--md3-outline-variant);
+  --trees-accent-override: hsl(var(--primary));
+  --trees-focus-ring-color-override: var(--focus-border);
+}
+
+.sandbox-code-view { container-type: inline-size; }
+.sandbox-code-view-mobile-toolbar { display: none; }
+
+@container (max-width: 560px) {
+  .sandbox-code-view-layout { flex-direction: column; }
+  .sandbox-code-view-mobile-toolbar {
+    display: flex;
+    gap: 0.25rem;
+    padding: 0.375rem 0.75rem;
+    border-bottom: 1px solid var(--md3-outline-variant);
+    background: var(--md3-surface-container-lowest);
+  }
+  .sandbox-code-view-mobile-toolbar button {
+    padding: 0.25rem 0.625rem;
+    border-radius: 0.375rem;
+    color: hsl(var(--muted-foreground));
+    font-size: 0.75rem;
+  }
+  .sandbox-code-view-mobile-toolbar button[aria-pressed="true"] {
+    background: var(--md3-surface-container-high);
+    color: hsl(var(--foreground));
+  }
+  .sandbox-code-view-tree { display: none; width: 100%; min-height: 0; flex: 1; border-right: 0; }
+  .sandbox-code-view-tree[data-mobile-open="true"] { display: flex; }
+  .sandbox-code-view-editor[data-mobile-hidden="true"] { display: none; }
+}
+
+@layer base {
+  :root {
+    --sandbox: var(--primary);
+    --sandbox-glow: var(--info);
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  /* The default keyboard focus for any control that does not style its own,
+   * the same line and halo as ui's `focusRing` (mirrors brand's globals.css,
+   * which this bundle does not import). Base layer, so component utilities
+   * still win. Text fields have their own fallback below. */
+  :where(
+      a[href],
+      button,
+      summary,
+      input:is([type="checkbox"], [type="radio"]),
+      [role="button"],
+      [role="checkbox"],
+      [role="link"],
+      [role="menuitem"],
+      [role="option"],
+      [role="radio"],
+      [role="switch"],
+      [role="tab"],
+      [tabindex]:not([tabindex="-1"])
+    ):focus-visible {
+    outline: 1px solid var(--focus-border);
+    outline-offset: 0;
+    box-shadow: 0 0 0 4px var(--focus-halo);
+  }
+
+  /* A native text field that styles no focus: a 1px --focus-border line over
+   * its border, instead of the browser's blue outline (mirrors brand's
+   * globals.css). An outline, because a border-colour utility on the field
+   * outranks a base-layer border colour. No halo: a field that hands its
+   * focus to a container clears the line with `outline-none`. */
+  :where(
+      input:not(
+          [type="button"],
+          [type="checkbox"],
+          [type="color"],
+          [type="file"],
+          [type="hidden"],
+          [type="image"],
+          [type="radio"],
+          [type="range"],
+          [type="reset"],
+          [type="submit"]
+        ),
+      select,
+      textarea
+    ):focus-visible {
+    outline: 1px solid var(--focus-border);
+    outline-offset: -1px;
+    /* A field with an explicit tabindex also matches the control rule above;
+     * drop that rule's halo. */
+    box-shadow: none;
+  }
+
+  /* The rounded composite owns the focus line, not its inner editor. */
+  .focus-field-within :is(input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file]),textarea,select,[contenteditable]:not([contenteditable=false])):focus-visible {
+    outline: none;
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1,
+      "ss01" 1;
+  }
+
+  ::selection {
+    background: var(--bg-selection);
+    color: hsl(var(--hsl-foreground));
+  }
+
+  /* Thin neutral scrollbar — recedes until hovered. */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border) / 0.6);
+    border-radius: 9999px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.4);
+  }
+
+  /* Firefox: thin neutral track. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border) / 0.6) transparent;
+  }
+}
+
+@layer utilities {
+  /* Gradient text -- Tangle default accent */
+  .text-gradient-sandbox,
+  .text-gradient-brand {
+    background-image: var(--tangle-gradient);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+
+  /* Tangle Quiet has no glow chrome. Class retained as a flat no-op so any
+     stray consumer renders without a halo. */
+  .glow-sandbox {
+    box-shadow: none;
+  }
+
+  /* Resting card — L2 surface in the MD3 elevation ladder. */
+  .glass-card {
+    background: var(--md3-surface-container);
+    border: 1px solid var(--md3-outline-variant);
+    transition: border-color var(--transition-default), box-shadow var(--transition-default);
+  }
+
+  .glass-card:hover {
+    border-color: var(--md3-outline-variant);
+  }
+
+  /* Emphasized / nested card — one step up the ladder (L3). */
+  .glass-card-strong {
+    background: var(--md3-surface-container-high);
+    border: 1px solid var(--md3-outline-variant);
+  }
+
+  /* Flat panels — no backdrop blur, edge-light hairline, flat card shadow.
+     .glass-panel is the resting L2 surface; -heavy lifts one ladder step (L3). */
+  .glass-panel {
+    background: var(--md3-surface-container);
+    border: 1px solid var(--md3-outline-variant);
+    box-shadow: var(--shadow-card);
+  }
+
+  .glass-panel-heavy {
+    background: var(--md3-surface-container-high);
+    border: 1px solid var(--md3-outline-variant);
+    box-shadow: var(--shadow-card);
+  }
+
+  .glass-panel:hover {
+    border-color: var(--md3-outline-variant);
+  }
+
+  /* Glow utilities retained as flat no-ops — Tangle Quiet has no halos. */
+  .glow-primary {
+    box-shadow: none;
+  }
+
+  .glow-primary:hover {
+    box-shadow: none;
+  }
+
+  .text-glow {
+    text-shadow: none;
+  }
+
+  /* Radiant gradient text */
+  .gradient-text {
+    background: linear-gradient(135deg, hsl(var(--primary) / 0.7) 0%, hsl(var(--primary)) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .gradient-bg {
+    background: linear-gradient(135deg, hsl(var(--primary) / 0.1) 0%, hsl(var(--primary) / 0.05) 100%);
+  }
+
+  /* Retained as a flat no-op — the mesh texture belongs to the glow era. */
+  .neural-mesh {
+    background-image: none;
+  }
+
+  .nav-active-indicator {
+    position: relative;
+  }
+
+  .nav-active-indicator::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 60%;
+    width: 3px;
+    background-color: hsl(var(--primary));
+    border-radius: 0 4px 4px 0;
+  }
+
+  /* Legacy alias — resting L2 surface. */
+  .glass {
+    background-color: var(--md3-surface-container);
+    border: 1px solid var(--md3-outline-variant);
+  }
+
+  /* Atmospheric mesh gradient background */
+  .bg-mesh {
+    position: relative;
+  }
+
+  /* Mesh + noise retained as flat no-ops — atmospheric texture is the glow era. */
+  .bg-mesh::before {
+    content: none;
+  }
+
+  .noise {
+    background-image: none;
+    pointer-events: none;
+  }
+
+  /* Status dots — operational state indicators */
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  .status-dot-running {
+    background: var(--status-running);
+  }
+
+  .status-dot-creating {
+    background: var(--status-creating);
+    animation: status-pulse 2s ease-in-out infinite;
+  }
+
+  .status-dot-stopped {
+    background: var(--status-stopped);
+  }
+
+  .status-dot-warm {
+    background: var(--status-warm);
+  }
+
+  .status-dot-cold {
+    background: var(--status-cold);
+  }
+
+  .status-dot-error {
+    background: var(--status-error);
+  }
+
+  .status-dot-deleted {
+    background: var(--status-deleted);
+    opacity: 0.6;
+  }
+
+  /* Terminal cursor */
+  .terminal-cursor {
+    display: inline-block;
+    width: 0.5rem;
+    height: 1.25rem;
+    background-color: hsl(var(--foreground));
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  /* Shimmer animation */
+  .shimmer {
+    background: linear-gradient(
+      90deg,
+      hsl(var(--muted)) 0%,
+      hsl(var(--accent)) 50%,
+      hsl(var(--muted)) 100%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+  }
+
+  .shimmer-text {
+    background-image: linear-gradient(
+      90deg,
+      hsl(var(--muted-foreground) / 0.5) 0%,
+      hsl(var(--muted-foreground) / 0.5) 40%,
+      hsl(var(--primary)) 50%,
+      hsl(var(--muted-foreground) / 0.5) 60%,
+      hsl(var(--muted-foreground) / 0.5) 100%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shimmer 1.1s linear infinite;
+  }
+
+  /* Silenced outright rather than floored, and kept that way: this is shipped
+     behaviour of a published class. It is also the correct default under the
+     rule stated with the reduced-motion block below — a bare class carries no
+     claim about whether the thing it labels is still working. A caller that
+     needs the sweep to survive the preference uses `.agent-shimmer` on an
+     element that declares `data-motion="essential"`, which is where that claim
+     can actually be made. */
+  @media (prefers-reduced-motion: reduce) {
+    .shimmer-text {
+      animation: none;
+    }
+  }
+
+  /* Fade in animation */
+  .animate-in {
+    animation: fade-in 0.25s ease-out;
+  }
+
+  /* A workflow node's content when its density swap lands mid layout-morph:
+     the incoming content materializes inside the moving box instead of popping
+     in. Opacity only — movement belongs to the layout tween — and applied to
+     CONTENT, never to a node's border/surface shell, so the node itself never
+     blinks out during the swap. */
+  .wf-node-body-in {
+    animation: wf-node-body-in 150ms ease-out both;
+  }
+
+  @keyframes wf-node-body-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .wf-node-body-in {
+      animation: none;
+    }
+  }
+
+  /* Quiet enter for optimistically-inserted list rows.
+     PUBLISHED CLASS — FROZEN TIMING. Ships in `dist/globals.css`, so consumers
+     time their own list insertions against these exact 180ms and this exact
+     4px travel DOWNWARD from above. Retiming it to the 600ms `agent-arrive`
+     entrance is a 3.3x slowdown and a reversed travel direction in every app
+     that already uses it, delivered as a patch with no call site to change; the
+     motion vocabulary is not worth that. It stays as shipped.
+
+     `--motion-arrive` is not read here for the same reason: a retune of the
+     token ladder must not reach a class whose timing is the contract. Reduced
+     motion still covers it — the universal floor below collapses any animation
+     on an element that has not declared itself essential, token or not.
+
+     New code writes `.agent-arrive` (plus `--stagger-index` for a list), which
+     is the vocabulary the rail and the session list ride. */
+  .animate-row-in {
+    animation: row-in 0.18s ease-out;
+  }
+
+  @keyframes row-in {
+    from { opacity: 0; transform: translateY(-4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  /* Pulse ring animation */
+  .pulse-ring {
+    position: relative;
+  }
+
+  .pulse-ring::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 9999px;
+    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes pulse-ring {
+    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 0.4; }
+    50% { box-shadow: 0 0 0 8px currentColor; opacity: 0; }
+  }
+
+  @keyframes status-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+  }
+}
+
+/**
+ * Entrance choreography — the keyframes and the classes that ride them.
+ *
+ * Unlayered on purpose. Tailwind's own utilities live in its `utilities` layer,
+ * and unlayered rules beat every layer, so `.agent-disclose`'s grid rows and
+ * `.agent-arrive`'s animation cannot be knocked out by a utility that happens to
+ * sort later.
+ *
+ * Every duration below is a TOKEN, so no class here carries a media query of its
+ * own. They are not all reached by the SAME rule, and the difference is
+ * deliberate. The entrance classes read the `--duration-*` ladder (through the
+ * `--motion-*` pairs) and `--stagger-step`, which the reduced-motion block
+ * collapses at `:root`: that reaches every element, unconditionally.
+ * `.agent-shimmer` reads `--shimmer-period`, which is deliberately NOT in that
+ * ladder, because a value collapsed at the root cannot be un-inherited by the
+ * elements that declare `data-motion="essential"` and whose sweep is the only
+ * evidence their agent is still working. Everywhere else, that sweep is silenced
+ * by the universal floor in the same block. @see `--shimmer-period`.
+ *
+ * Same names, same keyframes, same values as `@tangle-network/agent-app`'s
+ * `theme/tokens.css` — @see the token block at the top of this file for why they
+ * are duplicated rather than imported.
+ */
+
+/* Streamed text: each chunk resolves out of a small blur instead of popping in. */
+@keyframes agent-stream-in {
+  from {
+    opacity: 0;
+    filter: blur(var(--stream-blur));
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+/* A row, card or chip that was not there a moment ago. Travels a short distance
+   so the eye is told WHERE it came from. */
+@keyframes agent-arrive {
+  from {
+    opacity: 0;
+    transform: translateY(var(--arrive-distance));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* A control appearing in place — a chip, a badge, a rail tooltip, a flyout. No
+   travel, because it did not come from anywhere. */
+@keyframes agent-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* The insertion caret at the end of streaming text. A hard step blink, not a
+   fade: a caret that eases is a caret that reads as a loading placeholder. */
+@keyframes agent-caret {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/* A label that is WAITING. The sweep is what separates "the agent is working"
+   from "the interface is stuck": a static label cannot tell you which. */
+@keyframes agent-shimmer {
+  from {
+    background-position: 150% center;
+  }
+  to {
+    background-position: -50% center;
+  }
+}
+
+.agent-stream-in {
+  animation: agent-stream-in var(--motion-stream) both;
+}
+
+.agent-arrive {
+  animation: agent-arrive var(--motion-arrive) both;
+}
+
+.agent-pop-in {
+  animation: agent-pop-in var(--motion-control) both;
+}
+
+/* Stagger by index: set `--stagger-index` and a group arrives as a sequence
+   rather than as a flash. Capped at 8 so a 200-session list does not open with a
+   10-second cascade — past the cap every row shares the last delay. */
+.agent-arrive {
+  animation-delay: calc(min(var(--stagger-index), 8) * var(--stagger-step));
+}
+
+/* The waiting label. `background-clip: text` over a moving gradient, so the
+   shimmer runs THROUGH the glyphs rather than behind them.
+
+   The class alone is decorative and IS silenced by the reduced-motion floor.
+   It becomes essential only where the element also declares
+   `data-motion="essential"`, which is the caller's assertion that this
+   particular label's agent is still working. Class-level exemption would be
+   wrong: the same sweep is used as a plain skeleton treatment, and a rule
+   cannot tell the two apart. @see the reduced-motion block below. */
+.agent-shimmer {
+  background: linear-gradient(
+    90deg,
+    hsl(var(--muted-foreground)) 0%,
+    hsl(var(--foreground)) 45%,
+    hsl(var(--muted-foreground)) 60%
+  );
+  background-size: 250% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: agent-shimmer var(--shimmer-period) linear infinite;
+}
+
+/* Height-auto disclosure without measuring anything in JavaScript. The row
+   animates between 0fr and 1fr; the single child needs `min-height: 0` and
+   `overflow: hidden` to be clipped while it travels — it needs no class of its
+   own. A max-height guess is the usual alternative and it either clips tall
+   content or eases against a number the content never reaches, which for a nav
+   disclosure holding an unknown number of sessions is both. */
+.agent-disclose {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--motion-surface), opacity var(--motion-control);
+  opacity: 0;
+}
+
+.agent-disclose > * {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.agent-disclose[data-open="true"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+/**
+ * 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)` or
+ * `duration-[var(--duration-fast)]` 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: this package still carries transitions on Tailwind's
+ * implicit duration, and a consuming app carries its own. 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 RULE, so the next element is classified the same way this one was:
+ *
+ *   Motion is ESSENTIAL when it is the only evidence that something is
+ *   happening RIGHT NOW — an operation in flight, a resource actively running.
+ *   Freeze it and "working" becomes indistinguishable from "stuck", which is
+ *   information removed. Everything else is DECORATIVE and is silenced.
+ *
+ * Two consequences make it decidable rather than a matter of taste:
+ *
+ *  - A static label beside the motion does NOT make an in-flight indicator
+ *    decorative. "Loading processes…" stays on screen whether the fetch is
+ *    alive or hung; only the spinner separates those.
+ *  - A state that is NOT in flight is carried by its label, its colour and its
+ *    shape, so motion on it is emphasis. The `animate-ping` beside "Error
+ *    fetching logs" says nothing the sentence does not, and it is silenced.
+ *    Skeleton placeholders are the same case: a frozen skeleton still reads as
+ *    a placeholder, because the shape is the message.
+ *
+ * The exemption is declared PER ELEMENT with `data-motion="essential"`, never on
+ * a class. `.agent-shimmer` is the reason: the identical sweep marks a session
+ * whose agent is mid-turn and dresses a plain skeleton, and only the caller
+ * knows which one it built. The exclusion covers the element and its subtree,
+ * and `:where()` keeps the selector at zero specificity so a consumer's own rule
+ * can still win. Reduced motion is not a design preference to be overridden, it
+ * is a request from the person using the product; the only defensible exemption
+ * is motion whose absence removes information.
+ *
+ * Note the asymmetry with the `:root` block: a duration collapsed there reaches
+ * every element, `data-motion` included, because a custom property cannot be
+ * un-inherited. That is why an essential animation's period is not a
+ * `--duration-*` token — @see `--shimmer-period`.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 1ms;
+    --duration-fast: 1ms;
+    --duration-base: 1ms;
+    --duration-slow: 1ms;
+    --duration-stream: 1ms;
+    --duration-arrive: 1ms;
+    /* The stagger is a delay, not a duration, and a collapsed animation with a
+       live delay still arrives as a visible cascade. */
+    --stagger-step: 0ms;
+  }
+
+  /* `::before` and `::after` are listed because `*` matches elements only, and
+     an animation declared on a pseudo-element is therefore invisible to the
+     floor. `.pulse-ring::before` in this very file drew its 2s ring infinitely
+     under the preference — measured in Chromium against the built stylesheet —
+     while every element around it was collapsed to 1ms. The exemption still
+     applies: a pseudo-element of an essential element, or of a descendant of
+     one, is not floored. */
+  *:where(:not([data-motion="essential"], [data-motion="essential"] *)),
+  *:where(:not([data-motion="essential"], [data-motion="essential"] *))::before,
+  *:where(:not([data-motion="essential"], [data-motion="essential"] *))::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+  }
+
+  html {
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Light theme overrides — solid surfaces, no glassmorphism */
+[data-sandbox-theme="vault"] .glass-panel {
+  background: var(--md3-surface-container);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-color: var(--md3-outline-variant);
+  box-shadow: var(--shadow-card);
+}
+
+[data-sandbox-theme="vault"] .glass-panel:hover {
+  border-color: var(--md3-outline);
+}
+
+[data-sandbox-theme="vault"] .glass-panel-heavy {
+  background: var(--md3-surface-container-high);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-color: var(--md3-outline-variant);
+  box-shadow: var(--shadow-card);
+}
+
+[data-sandbox-theme="vault"] .glow-primary {
+  box-shadow: none;
+}
+
+[data-sandbox-theme="vault"] .glow-primary:hover {
+  box-shadow: none;
+}
+
+/* Markdown prose — styles the `tangle-prose` surface that @tangle-network/ui's
+ * Markdown renderer emits (re-exported from this library's /markdown, /chat and
+ * /run entries). ui ships no @tailwindcss/typography, so without these rules
+ * headings, lists, tables, and block spacing carry no styling in consumers that
+ * source prose CSS solely from @tangle-network/sandbox-ui/styles. Self-contained
+ * and token-driven so it re-skins with host, light, vault, and dark colors. */
+.tangle-prose {
+  color: hsl(var(--foreground));
+  line-height: 1.7;
+}
+/* Zero the browser's default block margins at zero specificity (:where) so the
+ * owl selector below owns all vertical rhythm — a plain `.tangle-prose p` reset
+ * (0,1,1) would outrank the owl (0,1,0) and collapse the gap between blocks. */
+.tangle-prose :where(p, ul, ol) { margin: 0; }
+.tangle-prose > * + * { margin-top: 0.85em; }
+.tangle-prose h1, .tangle-prose h2, .tangle-prose h3, .tangle-prose h4 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 1.4em;
+  margin-bottom: 0.5em;
+  color: inherit;
+}
+.tangle-prose h1 { font-size: 1.4em; }
+.tangle-prose h2 { font-size: 1.25em; }
+.tangle-prose h3 { font-size: 1.1em; }
+.tangle-prose ul, .tangle-prose ol { padding-left: 1.4em; }
+.tangle-prose li { margin: 0.25em 0; }
+.tangle-prose li > ul, .tangle-prose li > ol { margin-top: 0.25em; }
+.tangle-prose a {
+  color: var(--accent-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.tangle-prose blockquote {
+  border-left: 2px solid var(--border-default);
+  padding-left: 0.9em;
+  color: hsl(var(--muted-foreground));
+}
+.tangle-prose hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 1.2em 0; }
+.tangle-prose :not(pre) > code {
+  background: var(--md3-surface-container-high);
+  padding: 0.12em 0.36em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+}
+.tangle-prose pre { margin: 0.85em 0; }
+
+/* Tables — hairline dividers + real cell padding, so columns read as a grid
+ * instead of colliding. `display: block` + `overflow-x` lets wide tables scroll
+ * on narrow viewports; that also makes `border-collapse` inert (it only applies
+ * to `display: table`), so dividers come from the per-cell `border-top` /
+ * `border-left` and the `thead` underline below — not from border collapsing. */
+.tangle-prose table {
+  width: 100%;
+  margin: 0.85em 0;
+  font-size: 0.95em;
+  display: block;
+  overflow-x: auto;
+  color: inherit;
+}
+.tangle-prose thead { border-bottom: 1px solid var(--border-default); }
+.tangle-prose th {
+  text-align: left;
+  font-weight: 600;
+  padding: 0.5em 0.85em;
+  color: inherit;
+  white-space: nowrap;
+}
+.tangle-prose td {
+  padding: 0.5em 0.85em;
+  border-top: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+.tangle-prose th:not(:first-child), .tangle-prose td:not(:first-child) {
+  border-left: 1px solid var(--border-subtle);
+}
+
+/* Published sources: this package's dist and its @tangle-network/ui peer. */
+@source "./**/*.js";
+@source "../../ui/dist/**/*.js";
+@source "../node_modules/@tangle-network/ui/dist/**/*.js";