@tangle-network/sandbox-ui 0.133.2 → 0.133.3

package/dist/tokens.css

@@ -129,8 +129,10 @@
      contrast floor against the L2 card. */
   --hsl-accent: 249 24% 16%; /* 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%;
+  /* Light red carrying dark ink, as the dark primary does: it must read as
+   * error TEXT on every dark plane (AA) and still carry its foreground as a fill. */
+  --hsl-destructive: 0 90% 77%;
+  --hsl-destructive-foreground: 0 60% 10%;
   /* 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: 243 20% 20%; /* #2a293d = --md3-outline-variant */
@@ -464,7 +466,7 @@
   --shell-inset-gutter: 0.5rem;   /* 8px */
   /* Transcript: the person's and the agent's messages share one family, size
      and leading; they differ only by alignment and surface. */
-  --transcript-font-size: var(--font-size-base);
+  --transcript-font-size: 1rem;   /* 16px: the chat reading size */
   --transcript-line-height: var(--line-height-base);
 
   /* Typography scale — override per-app for custom type hierarchy.
@@ -548,8 +550,8 @@
   --transition-medium: 0.24s ease;
 
   /* Fonts — unified on Inter (dark + light) */
-  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-display: "Inter", "Geist", sans-serif;
+  --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 
@@ -877,8 +879,8 @@
   --accent-text: #3c32e9;
 
   /* Typography — unified on Inter */
-  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-display: "Inter", "Geist", sans-serif;
+  --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 
   /* Radius — unified chrome scale (matches dark; 8px md) */
@@ -938,6 +940,85 @@
   --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
 }
 
+/* Surface ladder and interaction states — the palette behind @tangle-network/ui's
+ * interaction helpers (`ixControl`, `ixField`, `ixSelected`, `ixRow` … in ui's
+ * lib/interaction.ts) and the Card primitive's surface context.
+ *
+ * LADDER. A card (`[data-slot="card"]`) re-declares two context variables for
+ * everything inside it, so nesting needs no app selector:
+ *   --card  the plane a nested card or `bg-card` box paints: --hsl-raised one
+ *           level in, --hsl-raised-2 two levels in.
+ *   --well  the field fill: --well-page on the page, --well-card in a card,
+ *           --well-raised in a card in a card, --well-raised-2 deeper still.
+ * A theme that tunes its ladder (Hospitality) sets these per mode. The defaults
+ * below reproduce the plain spine exactly — every level paints the card and
+ * every well is --bg-input — so a theme that does not set them looks as it did.
+ *
+ * INTERACTION. Four states, all from the focus ring hue (--hsl-ring), so one
+ * green or one indigo marks every interactive thing in a theme:
+ *   hover     1px edge at .45 plus a 4px halo at .16 (--ix-hover)
+ *   press     1px edge at .95 plus a 4px halo at .30 (--ix-press)
+ *   after     a mouse-focused control keeps a 1px .60 / 3px .14 ring (--ix-after)
+ *   selected  a .13 tint (.18 in dark) with a 1px inset ring at .85
+ * Keyboard focus-visible keeps --focus-border / --focus-halo above.
+ *
+ * Declared on every scope that can redefine --hsl-ring or the ladder, as the
+ * focus rule is, because a custom property is resolved where it is declared. */
+:root,
+.dark,
+.light,
+[data-sandbox-ui],
+[data-sandbox-theme],
+[data-theme] {
+  --hsl-raised: var(--hsl-card);
+  --hsl-raised-2: var(--hsl-card);
+  --well-page: var(--bg-input);
+  --well-card: var(--bg-input);
+  --well-raised: var(--bg-input);
+  --well-raised-2: var(--bg-input);
+  --well: var(--well-page);
+  --field-border: hsl(var(--hsl-border));
+  --shadow-raised: var(--shadow-card);
+  /* A shadow token joins a comma list, so "none" would void the whole list. */
+  --shadow-well: 0 0 0 0 transparent;
+  --edge-highlight: 0 0 0 0 transparent;
+  --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
+  --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
+  --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
+  --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
+  --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
+  --ix-sel-bg: hsl(var(--hsl-ring) / 0.18);
+  --ix-hover-bg: hsl(var(--hsl-ring) / 0.08);
+}
+
+/* Light planes need less tint for the same step. Same scope list as the chart
+ * light rule below; dark is the default. */
+[data-sandbox-theme="vault"]:where(:not(.dark)),
+[data-sandbox-theme="dawn"]:where(:not(.dark)),
+[data-theme="hospitality"]:where(:not(.dark)),
+[data-theme="website"]:where(:not(.dark)),
+[data-theme="light"],
+.light,
+[data-theme$="-light"] {
+  --ix-sel-bg: hsl(var(--hsl-ring) / 0.13);
+  --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
+}
+
+/* Surface context: keyed only on the Card primitive's data-slot, never on app
+ * classes. :where(*) keeps it at the specificity of one attribute, so a theme
+ * scope opened inside a card still wins. */
+[data-slot="card"] :where(*) {
+  --card: var(--hsl-raised);
+  --well: var(--well-card);
+}
+[data-slot="card"] [data-slot="card"] :where(*) {
+  --card: var(--hsl-raised-2);
+  --well: var(--well-raised);
+}
+[data-slot="card"] [data-slot="card"] [data-slot="card"] :where(*) {
+  --well: var(--well-raised-2);
+}
+
 /* Chart marks — the palette behind @tangle-network/charts.
  *
  * One accent marks the measure a reader decides on (a rate bar, a frontier

package/dist/utils.d.ts

@@ -1,2 +1,2 @@
-import { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from "@tangle-network/ui/utils";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };
+import { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, timeAgo, truncateText } from "@tangle-network/ui/utils";
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, timeAgo, truncateText };

package/dist/utils.js

@@ -1,2 +1,2 @@
-import { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from "@tangle-network/ui/utils";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };
+import { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, timeAgo, truncateText } from "@tangle-network/ui/utils";
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, timeAgo, truncateText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.133.2",
+  "version": "0.133.3",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
@@ -133,8 +133,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 || ^3.0.0",
-    "@tangle-network/brand": "^1.21.0",
-    "@tangle-network/ui": "^11.32.0",
+    "@tangle-network/brand": "^1.23.0",
+    "@tangle-network/ui": "^11.33.0",
     "@tanstack/react-query": "^5.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
@@ -223,8 +223,8 @@
     "@storybook/react-vite": "^10.6.0",
     "@tailwindcss/postcss": "^4.3.3",
     "@tangle-network/agent-interface": "3.0.0",
-    "@tangle-network/brand": "1.21.0",
-    "@tangle-network/ui": "11.32.0",
+    "@tangle-network/brand": "1.23.0",
+    "@tangle-network/ui": "11.33.0",
     "@tanstack/react-query": "^5.104.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",