@tangle-network/sandbox-ui 0.75.0 → 0.77.0

package/dist/globals.css

@@ -327,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);
   }
@@ -372,6 +375,9 @@
   .top-full {
     top: 100%;
   }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
   .-right-1\.5 {
     right: calc(var(--spacing) * -1.5);
   }
@@ -707,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);
   }
@@ -794,6 +797,9 @@
   .h-\[32rem\] {
     height: 32rem;
   }
+  .h-\[34rem\] {
+    height: 34rem;
+  }
   .h-\[70vh\] {
     height: 70vh;
   }
@@ -905,6 +911,9 @@
   .min-h-\[14rem\] {
     min-height: 14rem;
   }
+  .min-h-\[15px\] {
+    min-height: 15px;
+  }
   .min-h-\[16rem\] {
     min-height: 16rem;
   }
@@ -1708,6 +1717,9 @@
   .rounded-\[2px\] {
     border-radius: 2px;
   }
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -1935,12 +1947,6 @@
   .border-border {
     border-color: var(--color-border);
   }
-  .border-border\/60 {
-    border-color: color-mix(in srgb, hsl(var(--border)) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-border) 60%, transparent);
-    }
-  }
   .border-destructive\/20 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1980,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)) {
@@ -2028,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)) {
@@ -2340,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)) {
@@ -2475,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)) {
@@ -2706,6 +2706,9 @@
   .py-20 {
     padding-block: calc(var(--spacing) * 20);
   }
+  .py-\[1px\] {
+    padding-block: 1px;
+  }
   .py-\[2px\] {
     padding-block: 2px;
   }
@@ -2733,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);
   }
@@ -2880,6 +2886,9 @@
   .text-\[9px\] {
     font-size: 9px;
   }
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2960,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);
@@ -3032,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;
@@ -3252,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);
   }
@@ -3282,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);
   }
@@ -3309,12 +3329,6 @@
   .text-red-400 {
     color: var(--color-red-400);
   }
-  .text-red-400\/80 {
-    color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
-    }
-  }
   .text-secondary-foreground {
     color: var(--color-secondary-foreground);
   }
@@ -3498,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

@@ -327,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);
   }
@@ -372,6 +375,9 @@
   .top-full {
     top: 100%;
   }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
   .-right-1\.5 {
     right: calc(var(--spacing) * -1.5);
   }
@@ -707,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);
   }
@@ -794,6 +797,9 @@
   .h-\[32rem\] {
     height: 32rem;
   }
+  .h-\[34rem\] {
+    height: 34rem;
+  }
   .h-\[70vh\] {
     height: 70vh;
   }
@@ -905,6 +911,9 @@
   .min-h-\[14rem\] {
     min-height: 14rem;
   }
+  .min-h-\[15px\] {
+    min-height: 15px;
+  }
   .min-h-\[16rem\] {
     min-height: 16rem;
   }
@@ -1708,6 +1717,9 @@
   .rounded-\[2px\] {
     border-radius: 2px;
   }
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -1935,12 +1947,6 @@
   .border-border {
     border-color: var(--color-border);
   }
-  .border-border\/60 {
-    border-color: color-mix(in srgb, hsl(var(--border)) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-border) 60%, transparent);
-    }
-  }
   .border-destructive\/20 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1980,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)) {
@@ -2028,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)) {
@@ -2340,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)) {
@@ -2475,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)) {
@@ -2706,6 +2706,9 @@
   .py-20 {
     padding-block: calc(var(--spacing) * 20);
   }
+  .py-\[1px\] {
+    padding-block: 1px;
+  }
   .py-\[2px\] {
     padding-block: 2px;
   }
@@ -2733,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);
   }
@@ -2880,6 +2886,9 @@
   .text-\[9px\] {
     font-size: 9px;
   }
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2960,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);
@@ -3032,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;
@@ -3252,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);
   }
@@ -3282,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);
   }
@@ -3309,12 +3329,6 @@
   .text-red-400 {
     color: var(--color-red-400);
   }
-  .text-red-400\/80 {
-    color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
-    }
-  }
   .text-secondary-foreground {
     color: var(--color-secondary-foreground);
   }
@@ -3498,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

@@ -12,7 +12,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * so the spine stays a single readable column.
  */
 type WfNodeTone = "trigger" | "structural" | "action";
-type WfNodeStatus = "queued" | "running" | "succeeded" | "failed";
+/**
+ * A node's live run status. `waiting` is NOT a variant of `running`: the run has
+ * stopped at that node and makes no further progress until a human answers it (a
+ * `decision` step). Collapsing it into `running` tells the viewer the workflow is
+ * working when in fact it is blocked on THEM — so it gets its own colour, its own
+ * label, and a progress bar that does not move.
+ */
+type WfNodeStatus = "queued" | "running" | "waiting" | "succeeded" | "failed";
 /**
  * Live RUN state for one node, supplied by the host (keyed by node id) and
  * merged onto {@link WfNodeData.state} at render time. Absent ⇒ the graph shows
@@ -44,32 +51,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 +138,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 +165,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-FNE5QLU3.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-RA7ZHN4I.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-SJ2SG5TP.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

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