@tangle-network/sandbox-ui 0.116.1 → 0.116.4

package/dist/tokens.css

@@ -3,7 +3,7 @@
  * The surface ladder is NEUTRAL GREY and the indigo is trim — accent, never
  * field. It steps in even lightness increments so a card, a nested panel and an
  * overlay each read as a distinct plane by their own fill, and carries a crisp
- * hairline (1.6:1 against the card in dark) because shadow does no work on a dark
+ * hairline (1.5:1 against the card in dark) because shadow does no work on a dark
  * canvas. Light mirrors it: white paper on a grey canvas, never white-on-white.
  *
  * Apps consume this spine as-is. If a product needs its own accent identity,
@@ -22,35 +22,34 @@
  * an indigo page, and the eye stops finding them. Neutral planes give the brand
  * a field to sit on, so a single accent does all the signalling.
  *
- * The canvas sits OFF pure black (#151523). A near-black page under near-white
- * ink is the glare end of the range, and it is the reading surface for long
- * sessions.
+ * The canvas stays above pure black (#161616). Near-white ink on it is the
+ * glare end of the range, so its luminance leaves room for distinct text tiers.
  *
  * Elevation is carried by surface lightness plus a hairline that can actually be
  * seen — a black shadow on a dark canvas renders as nothing, so shadow does no
- * work here. The hairline is 1.6:1 against the resting card — quiet by design,
+ * work here. The hairline is about 1.5:1 against the resting card — quiet by design,
  * enough to state an edge without drawing a box around every panel.
  */
 :root,
 [data-sandbox-ui],
 [data-theme="dark"],
 .dark {
-  --md3-surface: #151523;                   /* L0 page canvas */
-  --md3-surface-dim: #0f0f1a;               /* recessed page */
-  --md3-surface-bright: #393957;
+  --md3-surface: #161616;                   /* L0 page canvas */
+  --md3-surface-dim: #101010;               /* recessed page */
+  --md3-surface-bright: #3b3b3b;
   /* Same value as --md3-surface-dim by design, not by drift: both name the floor
    * of the ladder, and dark has no plane below it to give them. They stay two
    * tokens because the roles diverge in light, where the well is paper (#ffffff)
-   * and the recessed page is grey (#d9d9e6) — a consumer binding to the wrong one
+   * and the recessed page is grey (#dadada) — a consumer binding to the wrong one
    * there gets the wrong surface. */
-  --md3-surface-container-lowest: #0f0f1a;  /* L-1 terminal/code well */
-  --md3-surface-container-low: #222235;     /* L1 chrome, field wells */
-  --md3-surface-container: #2d2e43;         /* L2 resting card */
-  --md3-surface-container-high: #32324e;    /* L3 nested / hover */
-  --md3-surface-container-highest: #393957; /* L4 overlay */
-  --md3-surface-variant: #32324e;
-  --md3-on-surface: #e3e6ed;
-  --md3-on-surface-variant: #b2b4c7;
+  --md3-surface-container-lowest: #101010;  /* L-1 terminal/code well */
+  --md3-surface-container-low: #242424;     /* L1 chrome, field wells */
+  --md3-surface-container: #303030;         /* L2 resting card */
+  --md3-surface-container-high: #353535;    /* L3 nested / hover */
+  --md3-surface-container-highest: #3b3b3b; /* L4 overlay */
+  --md3-surface-variant: #353535;
+  --md3-on-surface: #e6e6e6;
+  --md3-on-surface-variant: #b5b5b5;
 
   --md3-primary: #A5B4FC;
   --md3-primary-dim: #7C6CF6;
@@ -67,8 +66,8 @@
   --md3-on-secondary-container: #E8E5FF;
 
   --md3-tertiary: #10B981;
-  --md3-outline: #898da9;
-  --md3-outline-variant: #474a6b;
+  --md3-outline: #8e8e8e;
+  --md3-outline-variant: #4c4c4c;
 
   --md3-error: #ff5277;
   --md3-error-dim: #eb2855;
@@ -82,37 +81,37 @@
   --md3-surface-tint: #A5B4FC;
 
   /* Semantic HSL bridge — the neutral-grey surface ladder */
-  --hsl-background: 240 24% 11%;     /* L0 canvas #151523 */
-  /* 92% L, not pure white: near-white ink on the canvas is the glare end of the
-   * range, and the tiers below it need room to separate. 91% holds 10.6:1 on the
-   * card — AAA with headroom — and leaves four ink steps the eye can tell apart. */
-  --hsl-foreground: 225 22% 91%;     /* #e3e6ed */
-  --hsl-card: 238 20% 22%;           /* L2 card #2d2e43 */
-  --hsl-card-foreground: 225 22% 91%;
-  --hsl-popover: 239 22% 25%;        /* L3 #32324e — the NESTED plane despite
+  --hsl-background: 0 0% 8.6275%;     /* L0 canvas #161616 */
+  /* Near-white ink on the canvas is the glare end of the range, and the tiers
+   * below it need room to separate. This neutral ink keeps the original 10.6:1
+   * contrast on the card and leaves four steps the eye can tell apart. */
+  --hsl-foreground: 0 0% 90.1961%;     /* #e6e6e6 */
+  --hsl-card: 0 0% 18.8235%;           /* L2 card #303030 */
+  --hsl-card-foreground: 0 0% 90.1961%;
+  --hsl-popover: 0 0% 20.7843%;        /* L3 #353535 — the NESTED plane despite
      the name; the overlay plane is --md3-surface-container-highest. A popover
      carries body text, and the ladder above L3 is reserved for planes that lift
      by shadow, so it sits on L3 and the ink ramp reaches it. */
-  --hsl-popover-foreground: 225 22% 91%;
+  --hsl-popover-foreground: 0 0% 90.1961%;
   /* The fill indigo, NOT the bright one: `.btn-primary` puts white on this, and
    * #6366F1 carries white at only 4.47:1. This clears the floor at 7.4:1. The
    * bright indigo stays available for accent TEXT via --accent-text. */
   --hsl-primary: 246 54% 51%;       /* #4c3fc6 */
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 239 22% 25%;      /* L3 #32324e */
-  --hsl-secondary-foreground: 225 22% 91%;
-  --hsl-muted: 239 22% 25%;          /* L3 hover well */
-  --hsl-muted-foreground: 234 16% 74%;  /* #b2b4c7 — high enough that the
+  --hsl-secondary: 0 0% 20.7843%;      /* L3 #353535 */
+  --hsl-secondary-foreground: 0 0% 90.1961%;
+  --hsl-muted: 0 0% 20.7843%;          /* L3 hover well */
+  --hsl-muted-foreground: 0 0% 70.9804%;  /* #b5b5b5 — high enough that the
      reduced-opacity caption derivatives (/70, /60) still clear the large-text
      contrast floor against the L2 card. */
-  --hsl-accent: 239 22% 25%;         /* neutral hover (indigo lives in accent-surface-strong) */
-  --hsl-accent-foreground: 225 22% 91%;
+  --hsl-accent: 0 0% 20.7843%;         /* neutral hover (indigo lives in accent-surface-strong) */
+  --hsl-accent-foreground: 0 0% 90.1961%;
   --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
-  /* Quiet on purpose: 1.6:1 against the resting card. Shadow does no work on a
+  /* Quiet on purpose: 1.5:1 against the resting card. Shadow does no work on a
    * dark canvas, so the hairline is what states where a plane ends. */
-  --hsl-border: 236 20% 35%;         /* #474a6b = --md3-outline-variant */
-  --hsl-input: 240 24% 15%;          /* recessed field well */
+  --hsl-border: 0 0% 29.8039%;         /* #4c4c4c = --md3-outline-variant */
+  --hsl-input: 0 0% 12.1569%;          /* recessed field well #1f1f1f */
   /* Brighter than --primary on purpose: the ring is NON-TEXT and has to clear
    * 3:1 against BOTH canvas and card. The fill indigo is tuned to carry white
    * text instead, so the two cannot be the same value. */
@@ -153,20 +152,20 @@
 
   /* Sidebar tokens — L1 chrome: one step BELOW the canvas here, so the nav reads
    * as chrome the content sits in front of rather than as another card. */
-  --sidebar-background: 242 26% 8%;   /* L1 chrome #0f0f1a */
-  --sidebar-foreground: 225 22% 91%;
+  --sidebar-background: 0 0% 6.2745%;   /* L1 chrome #101010 */
+  --sidebar-foreground: 0 0% 90.1961%;
   --sidebar-primary: 246 54% 51%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 239 22% 25%;      /* L3 hover well */
-  --sidebar-accent-foreground: 225 22% 91%;
-  --sidebar-border: 236 20% 35%;
+  --sidebar-accent: 0 0% 20.7843%;      /* L3 hover well */
+  --sidebar-accent-foreground: 0 0% 90.1961%;
+  --sidebar-border: 0 0% 29.8039%;
   --sidebar-ring: 233 100% 87%;
 
   /* Depth scale — tracks the MD3 ladder (canvas / card / nested / overlay) */
-  --depth-1: #151523;
-  --depth-2: #2d2e43;
-  --depth-3: #32324e;
-  --depth-4: #393957;
+  --depth-1: #161616;
+  --depth-2: #303030;
+  --depth-3: #353535;
+  --depth-4: #3b3b3b;
 
   /* Status colors */
   --status-running: #10B981;
@@ -252,7 +251,7 @@
   --accent-text: #A5B4FC;
 
   /* Surfaces — solid fills off the ladder (no radial mesh) */
-  --bg-root: #151523;
+  --bg-root: #161616;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
@@ -262,7 +261,7 @@
   --bg-selection: rgba(124, 108, 246, 0.28);
 
   /* Text — neutral */
-  /* Four steps the eye can actually separate: 10.6 / 7.8 / 6.5 / 5.4 against the
+  /* Four steps the eye can actually separate: 10.6 / 7.8 / 6.4 / 5.4 against the
    * L2 card. --text-dim is the faintest tier but it is still TEXT, so it clears
    * the 4.5:1 body floor rather than only the 3:1 large-text one.
    *
@@ -274,10 +273,10 @@
    * card, the chrome and the canvas are fixed points. tokens.test.ts asserts
    * every tier on every plane, so a retune cannot open a gap on one plane while
    * looking correct on another. */
-  --text-primary: #e3e6ed;
-  --text-secondary: #c2c7d4;
-  --text-muted: #b2b4c7;
-  --text-dim: #9ea5b9;
+  --text-primary: #e6e6e6;
+  --text-secondary: #c7c7c7;
+  --text-muted: #b5b5b5;
+  --text-dim: #a5a5a5;
 
   /* Brand accents — Tangle */
   --brand-primary: #7C6CF6;
@@ -292,9 +291,9 @@
   --brand-emerald: #10B981;
 
   /* Borders — neutral hairlines */
-  --border-subtle: rgba(165, 180, 252, 0.10);
-  --border-default: rgba(165, 180, 252, 0.16);
-  --border-hover: rgba(165, 180, 252, 0.28);
+  --border-subtle: rgba(255, 255, 255, 0.10);
+  --border-default: rgba(255, 255, 255, 0.16);
+  --border-hover: rgba(255, 255, 255, 0.28);
   --border-accent: rgba(129, 140, 248, 0.35);
   --border-accent-hover: rgba(129, 140, 248, 0.50);
 
@@ -420,26 +419,26 @@
 [data-sandbox-theme="vault"],
 [data-theme="light"],
 .light {
-  /* Light theme — clean professional, warm purple accents */
+  /* Light theme — neutral surfaces with purple accents */
 
   /* MD3 surface hierarchy */
   /* The light ladder ALTERNATES; it is not monotonic, and that is deliberate.
-   * On a tinted canvas, a raised plane is PAPER (white) and a recessed one is a
-   * tinted WELL. So card and overlay are both white and separate from each other
+   * On a neutral canvas, a raised plane is PAPER (white) and a recessed one is a
+   * neutral WELL. So card and overlay are both white and separate from each other
    * by shadow and ring, not by fill — which is how light-mode elevation actually
    * reads. Forcing a strictly-darkening ladder here is what produced the
    * white-on-white flatness this palette replaced. Pinned in tokens.test.ts. */
-  --md3-surface: #e9e9f1;                   /* L0 page canvas — neutral grey, BELOW the wells */
-  --md3-surface-dim: #d9d9e6;
+  --md3-surface: #eaeaea;                   /* L0 page canvas — neutral grey, BELOW the wells */
+  --md3-surface-dim: #dadada;
   --md3-surface-bright: #ffffff;
   --md3-surface-container-lowest: #ffffff;  /* insets read as paper */
-  --md3-surface-container-low: #f7f7fa;     /* L1 chrome, field wells — well */
+  --md3-surface-container-low: #f7f7f7;     /* L1 chrome, field wells — well */
   --md3-surface-container: #ffffff;         /* L2 resting card — paper */
-  --md3-surface-container-high: #f2f2f7;    /* L3 nested / hover — well */
+  --md3-surface-container-high: #f2f2f2;    /* L3 nested / hover — well */
   --md3-surface-container-highest: #ffffff; /* L4 overlay — paper + shadow */
-  --md3-surface-variant: #f2f2f7;
-  --md3-on-surface: #2b2c3e;
-  --md3-on-surface-variant: #494b5d;
+  --md3-surface-variant: #f2f2f2;
+  --md3-on-surface: #2d2d2d;
+  --md3-on-surface-variant: #4c4c4c;
 
   --md3-primary: #3E349E;
   --md3-primary-dim: #352B88;
@@ -457,8 +456,8 @@
 
   --md3-tertiary: #065F46;
   --md3-tertiary-container: #D1FAE5;
-  --md3-outline: #737696;
-  --md3-outline-variant: #cecfde;
+  --md3-outline: #787878;
+  --md3-outline-variant: #d0d0d0;
 
   --md3-error: #ba1a1a;
   --md3-error-dim: #93000a;
@@ -471,35 +470,30 @@
   --md3-inverse-on-surface: #f0f1f4;
   --md3-surface-tint: #6366F1;
 
-  /* Semantic HSL bridge — white paper on a neutral-grey canvas */
-  --hsl-background: 240 24% 93%;     /* L0 canvas #e9e9f1 */
-  /* Ink, not black. Pure #0d0d0d on white paper measures 19.5:1 — a hair off the
-   * 21:1 ceiling — and that maximum is what reads as glare rather than as
-   * legibility. 20.5% L lands 13.7:1 on the card and 11.4:1 on the canvas: AAA with
-   * headroom in both places, and a step the eye reads as text instead of as a
-   * hole. */
-  --hsl-foreground: 235 18% 20.5%;     /* #2b2c3e */
+  /* Semantic HSL bridge — white paper on an achromatic canvas */
+  --hsl-background: 0 0% 91.7647%;     /* L0 canvas #eaeaea */
+  /* Neutral ink rather than pure black keeps the original 13.7:1 contrast on
+   * white paper and 11.4:1 on the canvas: AAA with headroom in both places. */
+  --hsl-foreground: 0 0% 17.6471%;     /* #2d2d2d */
   --hsl-card: 0 0% 100%;            /* L2 card = white paper */
-  --hsl-card-foreground: 235 18% 20.5%;
+  --hsl-card-foreground: 0 0% 17.6471%;
   --hsl-popover: 0 0% 100%;
-  --hsl-popover-foreground: 235 18% 20.5%;
+  --hsl-popover-foreground: 0 0% 17.6471%;
   --hsl-primary: 246 54% 51%;       /* #4c3fc6 — carries white at 7.4:1 */
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 26% 96%;      /* L3 #f2f2f7 */
-  --hsl-secondary-foreground: 235 18% 20.5%;
-  --hsl-muted: 240 26% 96%;          /* L3 hover well */
-  /* 34% L: the shared components fade captions with /70 and /60, and a
-   * translucent foreground renders as the token COMPOSITED over the plane behind
-   * it. Against white paper that compositing is brutal — a lighter value puts the
-   * /60 caption under the 3:1 large-text floor. This holds 3.0:1 there and 8.6:1
-   * at full strength, still a clear step below the 13.7:1 body ink. */
-  --hsl-muted-foreground: 235 12% 32.5%;  /* #494b5d text-muted */
-  --hsl-accent: 240 26% 96%;         /* neutral hover */
-  --hsl-accent-foreground: 235 18% 20.5%;
+  --hsl-secondary: 0 0% 94.902%;      /* L3 #f2f2f2 */
+  --hsl-secondary-foreground: 0 0% 17.6471%;
+  --hsl-muted: 0 0% 94.902%;          /* L3 hover well */
+  /* The shared components fade captions with /70 and /60, so a translucent
+   * foreground renders composited over the surface behind it. This neutral value
+   * keeps 3.0:1 at /60 and 8.6:1 at full strength on paper. */
+  --hsl-muted-foreground: 0 0% 29.8039%;  /* #4c4c4c text-muted */
+  --hsl-accent: 0 0% 94.902%;         /* neutral hover */
+  --hsl-accent-foreground: 0 0% 17.6471%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 238 20% 84%;         /* #cecfde = --md3-outline-variant */
-  --hsl-input: 240 30% 97%;          /* field well */
+  --hsl-border: 0 0% 81.5686%;         /* #d0d0d0 = --md3-outline-variant */
+  --hsl-input: 0 0% 96.0784%;          /* field well #f5f5f5 */
   --hsl-ring: 246 54% 51%;
   --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
@@ -508,9 +502,9 @@
   /* depth-2 (card) and depth-4 (elevated) are BOTH paper, on purpose: in light,
    * a popover does not out-lighten a white card — it lifts by shadow. See the
    * ladder note above. */
-  --depth-1: #e9e9f1;  /* canvas */
+  --depth-1: #eaeaea;  /* canvas */
   --depth-2: #ffffff;  /* card — paper */
-  --depth-3: #f2f2f7;  /* nested well */
+  --depth-3: #f2f2f2;  /* nested well */
   --depth-4: #ffffff;  /* elevated — paper, separated by shadow */
 
   --status-running: #059669;
@@ -579,12 +573,12 @@
 
   /* Sidebar — light, flat surface + hairline */
   --sidebar-background: 0 0% 100%;     /* white paper */
-  --sidebar-foreground: 235 18% 20.5%;
+  --sidebar-foreground: 0 0% 17.6471%;
   --sidebar-primary: 246 54% 51%;     /* #4c3fc6 */
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 26% 96%;       /* L3 hover well */
-  --sidebar-accent-foreground: 235 18% 20.5%;
-  --sidebar-border: 238 20% 84%;   /* = --md3-outline-variant */
+  --sidebar-accent: 0 0% 94.902%;       /* L3 hover well */
+  --sidebar-accent-foreground: 0 0% 17.6471%;
+  --sidebar-border: 0 0% 81.5686%;   /* = --md3-outline-variant */
   --sidebar-ring: 246 54% 51%;
 
   --mesh-teal: transparent;
@@ -592,7 +586,7 @@
   --mesh-blue: transparent;
 
   /* Surfaces — flat single-neutral light */
-  --bg-root: #e9e9f1;
+  --bg-root: #eaeaea;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   /* Paper, exactly like --bg-card: in light you cannot raise a plane by making it
@@ -606,19 +600,18 @@
   --bg-hover: rgba(76, 63, 198, 0.06);
   --bg-selection: rgba(76, 63, 198, 0.16);
 
-  /* Mirrors the dark ramp's spacing: 13.7 / 10.5 / 8.6 / 5.6 against white paper.
-   * Every step carries the 240 cast so the ink belongs to the palette.
+  /* Mirrors the dark ramp's spacing against white paper. The ink uses neutral
+   * grays so purple stays reserved for interaction accents.
    *
-   * --text-dim is pinned from the CANVAS (#e9e9f1), not the white card: it is
-   * the faintest tier, so the tinted L0 is the surface that binds it, and a
-   * value chosen against paper alone sits under the 4.5:1 body floor there.
-   * 4.6 on the canvas, 5.6 on the card — both floors are asserted in
+   * --text-dim is pinned from the CANVAS (#eaeaea), not the white card: it is
+   * the faintest tier, so the lighter L0 is the surface that binds it. Its 4.6:1
+   * canvas and 5.6:1 card contrasts clear the body-text floor, as asserted in
    * tokens.test.ts, because a ratio quoted in a comment drifts the moment a
    * surface moves and nothing catches it. */
-  --text-primary: #2b2c3e;
-  --text-secondary: #3d3e52;
-  --text-muted: #494b5d;
-  --text-dim: #65677b;
+  --text-primary: #2d2d2d;
+  --text-secondary: #3f3f3f;
+  --text-muted: #4c4c4c;
+  --text-dim: #686868;
 
   --brand-primary: #6366F1;
   --brand-strong: #2E2A5E;
@@ -631,9 +624,9 @@
   --brand-vibrant: #6366F1;
   --brand-emerald: #059669;
 
-  --border-subtle: rgba(60, 52, 140, 0.10);
-  --border-default: rgba(60, 52, 140, 0.14);
-  --border-hover: rgba(60, 52, 140, 0.24);
+  --border-subtle: rgba(0, 0, 0, 0.10);
+  --border-default: rgba(0, 0, 0, 0.14);
+  --border-hover: rgba(0, 0, 0, 0.24);
   --border-accent: rgba(91, 78, 212, 0.18);
   --border-accent-hover: rgba(91, 78, 212, 0.35);
 
@@ -727,7 +720,7 @@
  * draws as a --chart-muted outline, the same mark as an unsolved attempt. No
  * categorical palette ships: identity is carried by direct labels.
  *
- * Contrast against the dark canvas (#151523) and white paper, checked with the
+ * Contrast against the dark canvas (#161616) and white paper, checked with the
  * dataviz palette validator and WCAG ratios:
  *   ink 14.45 / 13.70, ink-muted 7.34 / 5.56, accent 6.05 / 7.41,
  *   muted 5.54 / 4.41, grid 1.46 / 1.12 (recessive by design).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.116.1",
+  "version": "0.116.4",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -123,8 +123,8 @@
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tangle-network/agent-interface": "^1.0.0 || ^2.0.0",
-    "@tangle-network/brand": "^1.8.2",
-    "@tangle-network/ui": "^11.11.1",
+    "@tangle-network/brand": "^1.9.0",
+    "@tangle-network/ui": "^11.11.4",
     "@tanstack/react-query": "^5.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
@@ -208,8 +208,8 @@
     "@storybook/react-vite": "^10.6.0",
     "@tailwindcss/postcss": "^4.3.3",
     "@tangle-network/agent-interface": "2.13.1",
-    "@tangle-network/brand": "^1.8.2",
-    "@tangle-network/ui": "^11.11.1",
+    "@tangle-network/brand": "^1.9.0",
+    "@tangle-network/ui": "^11.11.4",
     "@tanstack/react-query": "^5.104.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",