@tangle-network/sandbox-ui 0.74.0 → 0.76.0

package/dist/globals.css

@@ -75,6 +75,7 @@
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -326,6 +327,9 @@
   .end {
     inset-inline-end: var(--spacing);
   }
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
   .-top-1\.5 {
     top: calc(var(--spacing) * -1.5);
   }
@@ -371,6 +375,9 @@
   .top-full {
     top: 100%;
   }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
   .-right-1\.5 {
     right: calc(var(--spacing) * -1.5);
   }
@@ -542,6 +549,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -626,6 +636,12 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .block {
     display: block;
   }
@@ -697,9 +713,6 @@
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
-  .h-0\.5 {
-    height: calc(var(--spacing) * 0.5);
-  }
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -784,6 +797,9 @@
   .h-\[32rem\] {
     height: 32rem;
   }
+  .h-\[34rem\] {
+    height: 34rem;
+  }
   .h-\[70vh\] {
     height: 70vh;
   }
@@ -895,6 +911,9 @@
   .min-h-\[14rem\] {
     min-height: 14rem;
   }
+  .min-h-\[15px\] {
+    min-height: 15px;
+  }
   .min-h-\[16rem\] {
     min-height: 16rem;
   }
@@ -1186,6 +1205,9 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
+  .max-w-\[45\%\] {
+    max-width: 45%;
+  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1695,6 +1717,9 @@
   .rounded-\[2px\] {
     border-radius: 2px;
   }
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -1961,9 +1986,6 @@
   .border-foreground {
     border-color: var(--color-foreground);
   }
-  .border-green-500 {
-    border-color: var(--color-green-500);
-  }
   .border-green-500\/30 {
     border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2009,9 +2031,6 @@
       border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
     }
   }
-  .border-red-500 {
-    border-color: var(--color-red-500);
-  }
   .border-red-500\/20 {
     border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2321,12 +2340,6 @@
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
-  .bg-green-600\/10 {
-    background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-green-600) 10%, transparent);
-    }
-  }
   .bg-green-600\/20 {
     background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2456,6 +2469,12 @@
   .bg-surface-container-high {
     background-color: var(--color-surface-container-high);
   }
+  .bg-surface-container-high\/60 {
+    background-color: var(--color-surface-container-high);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-container-high) 60%, transparent);
+    }
+  }
   .bg-surface-container-high\/95 {
     background-color: var(--color-surface-container-high);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2687,6 +2706,9 @@
   .py-20 {
     padding-block: calc(var(--spacing) * 20);
   }
+  .py-\[1px\] {
+    padding-block: 1px;
+  }
   .py-\[2px\] {
     padding-block: 2px;
   }
@@ -2714,6 +2736,9 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-2\.5 {
+    padding-top: calc(var(--spacing) * 2.5);
+  }
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -2861,6 +2886,9 @@
   .text-\[9px\] {
     font-size: 9px;
   }
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2941,6 +2969,10 @@
     --tw-leading: 1.55;
     line-height: 1.55;
   }
+  .leading-\[15px\] {
+    --tw-leading: 15px;
+    line-height: 15px;
+  }
   .leading-\[var\(--line-height-base\)\] {
     --tw-leading: var(--line-height-base);
     line-height: var(--line-height-base);
@@ -2961,6 +2993,10 @@
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -3009,6 +3045,10 @@
     --tw-tracking: 0.08em;
     letter-spacing: 0.08em;
   }
+  .tracking-\[0\.09em\] {
+    --tw-tracking: 0.09em;
+    letter-spacing: 0.09em;
+  }
   .tracking-\[0\.12em\] {
     --tw-tracking: 0.12em;
     letter-spacing: 0.12em;
@@ -3229,9 +3269,6 @@
   .text-green-400 {
     color: var(--color-green-400);
   }
-  .text-green-600 {
-    color: var(--color-green-600);
-  }
   .text-muted-foreground {
     color: var(--color-muted-foreground);
   }
@@ -3259,6 +3296,12 @@
       color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
     }
   }
+  .text-muted-foreground\/90 {
+    color: color-mix(in srgb, hsl(var(--muted-foreground)) 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-muted-foreground) 90%, transparent);
+    }
+  }
   .text-neutral-400 {
     color: var(--color-neutral-400);
   }
@@ -3469,12 +3512,6 @@
       --tw-ring-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
     }
   }
-  .ring-primary\/40 {
-    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-    }
-  }
   .ring-offset-background {
     --tw-ring-offset-color: var(--color-background);
   }

package/dist/styles.css

@@ -75,6 +75,7 @@
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -326,6 +327,9 @@
   .end {
     inset-inline-end: var(--spacing);
   }
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
   .-top-1\.5 {
     top: calc(var(--spacing) * -1.5);
   }
@@ -371,6 +375,9 @@
   .top-full {
     top: 100%;
   }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
   .-right-1\.5 {
     right: calc(var(--spacing) * -1.5);
   }
@@ -542,6 +549,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -626,6 +636,12 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .block {
     display: block;
   }
@@ -697,9 +713,6 @@
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
-  .h-0\.5 {
-    height: calc(var(--spacing) * 0.5);
-  }
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -784,6 +797,9 @@
   .h-\[32rem\] {
     height: 32rem;
   }
+  .h-\[34rem\] {
+    height: 34rem;
+  }
   .h-\[70vh\] {
     height: 70vh;
   }
@@ -895,6 +911,9 @@
   .min-h-\[14rem\] {
     min-height: 14rem;
   }
+  .min-h-\[15px\] {
+    min-height: 15px;
+  }
   .min-h-\[16rem\] {
     min-height: 16rem;
   }
@@ -1186,6 +1205,9 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
+  .max-w-\[45\%\] {
+    max-width: 45%;
+  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1695,6 +1717,9 @@
   .rounded-\[2px\] {
     border-radius: 2px;
   }
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -1961,9 +1986,6 @@
   .border-foreground {
     border-color: var(--color-foreground);
   }
-  .border-green-500 {
-    border-color: var(--color-green-500);
-  }
   .border-green-500\/30 {
     border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2009,9 +2031,6 @@
       border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
     }
   }
-  .border-red-500 {
-    border-color: var(--color-red-500);
-  }
   .border-red-500\/20 {
     border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2321,12 +2340,6 @@
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
-  .bg-green-600\/10 {
-    background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-green-600) 10%, transparent);
-    }
-  }
   .bg-green-600\/20 {
     background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2456,6 +2469,12 @@
   .bg-surface-container-high {
     background-color: var(--color-surface-container-high);
   }
+  .bg-surface-container-high\/60 {
+    background-color: var(--color-surface-container-high);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-container-high) 60%, transparent);
+    }
+  }
   .bg-surface-container-high\/95 {
     background-color: var(--color-surface-container-high);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2687,6 +2706,9 @@
   .py-20 {
     padding-block: calc(var(--spacing) * 20);
   }
+  .py-\[1px\] {
+    padding-block: 1px;
+  }
   .py-\[2px\] {
     padding-block: 2px;
   }
@@ -2714,6 +2736,9 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-2\.5 {
+    padding-top: calc(var(--spacing) * 2.5);
+  }
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -2861,6 +2886,9 @@
   .text-\[9px\] {
     font-size: 9px;
   }
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2941,6 +2969,10 @@
     --tw-leading: 1.55;
     line-height: 1.55;
   }
+  .leading-\[15px\] {
+    --tw-leading: 15px;
+    line-height: 15px;
+  }
   .leading-\[var\(--line-height-base\)\] {
     --tw-leading: var(--line-height-base);
     line-height: var(--line-height-base);
@@ -2961,6 +2993,10 @@
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -3009,6 +3045,10 @@
     --tw-tracking: 0.08em;
     letter-spacing: 0.08em;
   }
+  .tracking-\[0\.09em\] {
+    --tw-tracking: 0.09em;
+    letter-spacing: 0.09em;
+  }
   .tracking-\[0\.12em\] {
     --tw-tracking: 0.12em;
     letter-spacing: 0.12em;
@@ -3229,9 +3269,6 @@
   .text-green-400 {
     color: var(--color-green-400);
   }
-  .text-green-600 {
-    color: var(--color-green-600);
-  }
   .text-muted-foreground {
     color: var(--color-muted-foreground);
   }
@@ -3259,6 +3296,12 @@
       color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
     }
   }
+  .text-muted-foreground\/90 {
+    color: color-mix(in srgb, hsl(var(--muted-foreground)) 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-muted-foreground) 90%, transparent);
+    }
+  }
   .text-neutral-400 {
     color: var(--color-neutral-400);
   }
@@ -3469,12 +3512,6 @@
       --tw-ring-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
     }
   }
-  .ring-primary\/40 {
-    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-    }
-  }
   .ring-offset-background {
     --tw-ring-offset-color: var(--color-background);
   }

package/dist/workflows.d.ts

@@ -44,32 +44,50 @@ interface WfNodeState {
      *  rounds the agent has taken, surfaced on the node's progress strip. */
     rounds?: number;
 }
+/**
+ * A node's card-facing content. Three tiers, so both densities can show the
+ * right amount without either re-deriving it:
+ *
+ *  - {@link title} — WHO the step is ("GitHub", "AI Agent", a decision's own
+ *    title). Never a machine identifier.
+ *  - {@link subtitle} — WHAT it does, in one short phrase ("create: pulls.reviews",
+ *    the model, "Weekdays at 09:00", "3 branches").
+ *  - {@link description} — the free-text detail worth reading when there's room
+ *    (an agent's prompt, a notify URL, the events a trigger listens for).
+ *
+ * The compact node shows title + subtitle; the expanded node adds the
+ * description, the run metrics, and the output. Any longer/raw values live in
+ * {@link config} for the full-detail view.
+ */
 interface WfNodeData extends Record<string, unknown> {
-    /** Headline for the node, e.g. "Run agent". */
+    /** Human headline for the node, e.g. "GitHub", "AI Agent". */
     title: string;
     /** The action/trigger kind verbatim, e.g. "agent.run", "schedule". Set on every
-     *  node `buildWorkflowGraph` produces so a card can label what it is regardless
-     *  of which subtitle it shows; optional on the type so external consumers
-     *  constructing `WfNodeData` directly aren't forced to supply it (the render
-     *  guards its usage). */
+     *  node `buildWorkflowGraph` produces so a consumer can dispatch on the node's
+     *  type (icon, detail rendering) regardless of what its title says; optional on
+     *  the type so external consumers constructing `WfNodeData` directly aren't
+     *  forced to supply it (the render guards its usage). */
     kind?: string;
-    /** Secondary detail, e.g. an integration path or a cron expression. */
+    /** The one-phrase qualifier under the title, e.g. "create: pulls.reviews". */
     subtitle?: string;
-    /** Requested model (agent.run), shown as a chip even before a run. */
+    /** Free-text detail (agent prompt, notify URL, trigger events) — shown only by
+     *  the expanded node, which has the room to clamp it to two lines. */
+    description?: string;
+    /** Requested model (agent.run). A live run's ACTUAL model (`state.model`)
+     *  supersedes it on the card. */
     model?: string;
     /** `integration.invoke` provider.method path. */
     path?: string;
-    /** Notable config fields for the expand drawer (kept small + stringified). */
-    detail?: Record<string, string>;
     /** The raw, UNTRUNCATED config for this node — the action/trigger config from
-     *  the definition. The compact card reads {@link detail}; a full-detail view
-     *  (e.g. a node drawer) reads this to render every field — the complete prompt,
-     *  all profile/source/input keys — without the card-sized clamp. It is a
-     *  JSON-safe deep copy of the config (cycles and non-JSON values normalized),
-     *  so a consumer can serialize or render it freely. Omitted when the node has
-     *  no config. */
+     *  the definition. The card shows the summary above; a full-detail view (e.g. a
+     *  node drawer) reads this to render every field — the complete prompt, all
+     *  profile/source/input keys — without the card-sized clamp. It is a JSON-safe
+     *  deep copy of the config (cycles and non-JSON values normalized), so a
+     *  consumer can serialize or render it freely. Omitted when the node has no
+     *  config. */
     config?: Record<string, unknown>;
-    /** Connector slug (e.g. `github`) for the provider chip, when one applies. */
+    /** Connector slug (e.g. `github`) — drives the node's brand logo, so a provider
+     *  step is recognizable before any text is read. */
     provider?: string;
     /** Small corner tag, e.g. "×3" for a parallel fan-out. */
     badge?: string;
@@ -113,27 +131,23 @@ type WfDirection = "LR" | "TB";
 /** Options for {@link buildWorkflowGraph}. */
 interface BuildWorkflowGraphOptions {
     /**
-     * Reserve space for the rows live run state adds to a node (the meta-chip row +
-     * the output/error preview), so the RUN view never overlaps once a node starts
-     * or terminates. The static/preview layout (no run overlay) leaves this off to
-     * stay compact. Defaults to `false`.
+     * Reserve space for the rows live run state adds to a node (the metrics line,
+     * the output/error preview, the status footer), so the RUN view never overlaps
+     * once a node starts or terminates. The static/preview layout (no run overlay)
+     * leaves this off to stay compact. Defaults to `false`.
      */
     reserveRunState?: boolean;
     /** Flow direction. Defaults to "LR". */
     direction?: WfDirection;
-    /** Override the node dimensions the layout spaces by (and the card renders at).
-     *  Defaults to a fixed width + {@link nodeHeight}. A caller with a different node
-     *  design supplies its own sizing so the layout stays collision-free. */
-    measure?: (data: WfNodeData, withRunState: boolean) => {
-        width: number;
-        height: number;
-    };
+    /** Collapse every node to the fixed icon-tile size, and pitch the layers for
+     *  it. Defaults to `false` (the full, expanded card). */
+    compact?: boolean;
 }
 /** Build a positioned graph from a workflow YAML string. Never throws —
  *  malformed YAML or an empty definition returns an `error` the UI can fall
  *  back on (e.g. show the raw YAML while authoring). `reserveRunState` leaves
  *  room for the rows live run state adds (see {@link nodeHeight}); `direction`
- *  picks the flow axis (default "LR"). */
+ *  picks the flow axis (default "LR"); `compact` collapses nodes to icon tiles. */
 declare function buildWorkflowGraph(yaml: string, options?: BuildWorkflowGraphOptions): WfGraph;
 
 interface WorkflowGraphProps {
@@ -144,9 +158,11 @@ interface WorkflowGraphProps {
     /** Flow direction: "LR" (default) reads left-to-right — best for the wide/short
      *  run-detail panel; "TB" is a vertical column. */
     direction?: WfDirection;
-    /** Start collapsed (compact icon tiles) rather than expanded. The full variant
-     *  exposes a toggle to switch densities; the preview variant is always compact.
-     *  Defaults to `false` (expanded). */
+    /** Start collapsed (compact icon tiles) rather than expanded. Defaults to
+     *  `true`: a graph is read structure-first, and the tiles are what make the
+     *  shape of the run legible at a glance — the per-node detail is one density
+     *  toggle (or one node click) away. The full variant exposes the toggle; the
+     *  preview variant is always compact. */
     defaultCompact?: boolean;
     /** Sizing for the wrapper; the caller controls height. */
     className?: string;

package/dist/workflows.js

@@ -1,6 +1,6 @@
 import {
   buildWorkflowGraph
-} from "./chunk-VXGI2XUK.js";
+} from "./chunk-UEMWLVVY.js";
 import "./chunk-U67V476Y.js";
 
 // src/workflows/WorkflowGraphLazy.tsx
@@ -26,7 +26,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-64XJBIW2.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-V2AVCNDC.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.74.0",
+  "version": "0.76.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",