@tangle-network/sandbox-ui 0.39.1 → 0.40.0

package/dist/styles.css

@@ -623,6 +623,9 @@
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
+  .\!h-2 {
+    height: calc(var(--spacing) * 2) !important;
+  }
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -830,6 +833,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .\!w-2 {
+    width: calc(var(--spacing) * 2) !important;
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -959,6 +965,9 @@
   .w-\[72\%\] {
     width: 72%;
   }
+  .w-\[240px\] {
+    width: 240px;
+  }
   .w-\[268px\] {
     width: 268px;
   }
@@ -1103,6 +1112,9 @@
   .max-w-xl {
     max-width: var(--container-xl);
   }
+  .\!min-w-0 {
+    min-width: calc(var(--spacing) * 0) !important;
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -1151,6 +1163,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1237,6 +1252,9 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-ew-resize {
+    cursor: ew-resize;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1619,6 +1637,10 @@
   .rounded-bl-lg {
     border-bottom-left-radius: var(--radius-lg);
   }
+  .\!border-0 {
+    border-style: var(--tw-border-style) !important;
+    border-width: 0px !important;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1831,6 +1853,9 @@
   .border-t-transparent {
     border-top-color: transparent;
   }
+  .\!bg-transparent {
+    background-color: transparent !important;
+  }
   .bg-\[color-mix\(in_oklch\,var\(--color-warning\,orange\)_18\%\,transparent\)\] {
     background-color: var(--color-warning,orange);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2952,6 +2977,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3477,6 +3506,13 @@
       }
     }
   }
+  .hover\:opacity-90 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 90%;
+      }
+    }
+  }
   .hover\:opacity-100 {
     &:hover {
       @media (hover: hover) {
@@ -3686,6 +3722,11 @@
       opacity: 30%;
     }
   }
+  .disabled\:opacity-40 {
+    &:disabled {
+      opacity: 40%;
+    }
+  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;

package/dist/workflows.d.ts

@@ -0,0 +1,67 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Turns a workflow YAML definition into a positioned node/edge graph for the
+ * visualizer. Pure and React-Flow-agnostic so the parsing + layout is unit
+ * testable on its own; the component maps these shapes onto React Flow nodes.
+ *
+ * The workflow model is a linear spine (trigger → action → action …) with
+ * one-level fan-out: a `parallel` action has N leaf branches and a `foreach`
+ * action has one leaf template. Branches dangle to the right of their structural
+ * node on the spine; they never continue the chain (the schema forbids nesting),
+ * so the spine stays a single readable column.
+ */
+type WfNodeTone = "trigger" | "structural" | "action";
+interface WfNodeData extends Record<string, unknown> {
+    /** Headline for the node, e.g. "Run agent". */
+    title: string;
+    /** Secondary detail, e.g. an integration path or a cron expression. */
+    subtitle?: string;
+    /** Connector slug (e.g. `github`) for the provider chip, when one applies. */
+    provider?: string;
+    /** Small corner tag, e.g. "×3" for a parallel fan-out. */
+    badge?: string;
+    /** Whether this node fans out to branch leaves (renders a right handle). */
+    hasBranches: boolean;
+    /** Whether this node is the spine root (no incoming/target handle). */
+    isRoot: boolean;
+    tone: WfNodeTone;
+}
+interface WfNode {
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: WfNodeData;
+}
+interface WfEdge {
+    id: string;
+    source: string;
+    target: string;
+    /** "out" for spine edges (bottom handle), "branch" for fan-out (right). */
+    sourceHandle: "out" | "branch";
+}
+interface WfGraph {
+    nodes: WfNode[];
+    edges: WfEdge[];
+    /** Set when the YAML couldn't be parsed into a renderable graph. */
+    error: string | null;
+}
+/** 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). */
+declare function buildWorkflowGraph(yaml: string): WfGraph;
+
+interface WorkflowGraphProps {
+    /** Workflow YAML to render. */
+    yaml: string;
+    /** "full" = interactive (pan/zoom/drag + controls); "preview" = static fit. */
+    variant?: "full" | "preview";
+    /** Sizing for the wrapper; the caller controls height. */
+    className?: string;
+}
+
+declare function WorkflowGraph(props: WorkflowGraphProps): react_jsx_runtime.JSX.Element;
+
+export { type WfEdge, type WfGraph, type WfNode, type WfNodeData, type WfNodeTone, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, buildWorkflowGraph };

package/dist/workflows.js

@@ -0,0 +1,63 @@
+import {
+  buildWorkflowGraph
+} from "./chunk-SUC6ZJZW.js";
+import "./chunk-7JLB7UZ3.js";
+
+// src/workflows/WorkflowGraphLazy.tsx
+import { Component, lazy, Suspense } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var WorkflowGraphImpl = lazy(
+  () => import("./WorkflowGraph-5QO6WCY2.js").then((m) => ({ default: m.WorkflowGraph }))
+);
+var GraphErrorBoundary = class extends Component {
+  state = { hasError: false };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  render() {
+    return this.state.hasError ? this.props.fallback : this.props.children;
+  }
+};
+function GraphFallback({ yaml, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `overflow-auto rounded-lg border border-border bg-background p-2 ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 text-text-muted text-xs", children: "Couldn't render the graph \u2014 showing the definition." }),
+        /* @__PURE__ */ jsx("pre", { className: "text-text text-xs", children: /* @__PURE__ */ jsx("code", { children: yaml }) })
+      ]
+    }
+  );
+}
+function WorkflowGraph(props) {
+  return (
+    // Key the boundary by the workflow so a different/edited definition remounts
+    // it and re-attempts the graph — a transient chunk/render failure on one
+    // workflow doesn't permanently pin the YAML fallback for the next.
+    /* @__PURE__ */ jsx(
+      GraphErrorBoundary,
+      {
+        fallback: /* @__PURE__ */ jsx(GraphFallback, { ...props }),
+        children: /* @__PURE__ */ jsx(
+          Suspense,
+          {
+            fallback: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `flex items-center justify-center rounded-lg border border-border border-dashed text-text-muted text-xs ${props.className ?? ""}`,
+                children: "Loading graph\u2026"
+              }
+            ),
+            children: /* @__PURE__ */ jsx(WorkflowGraphImpl, { ...props })
+          }
+        )
+      },
+      props.yaml
+    )
+  );
+}
+export {
+  WorkflowGraph as WorkflowGraphLazy,
+  buildWorkflowGraph
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -26,6 +26,14 @@
       "import": "./dist/chat.js",
       "types": "./dist/chat.d.ts"
     },
+    "./assistant": {
+      "import": "./dist/assistant.js",
+      "types": "./dist/assistant.d.ts"
+    },
+    "./workflows": {
+      "import": "./dist/workflows.js",
+      "types": "./dist/workflows.d.ts"
+    },
     "./run": {
       "import": "./dist/run.js",
       "types": "./dist/run.d.ts"
@@ -118,9 +126,13 @@
     "@tangle-network/ui": "^4.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "@tangle-network/agent-interface": ">=0.10.0 <1.0.0"
+    "@tangle-network/agent-interface": ">=0.10.0 <1.0.0",
+    "@xyflow/react": "^12.0.0"
   },
   "peerDependenciesMeta": {
+    "@xyflow/react": {
+      "optional": true
+    },
     "@xterm/xterm": {
       "optional": true
     },
@@ -145,7 +157,8 @@
     "@radix-ui/react-dropdown-menu": "^2.1.0",
     "@radix-ui/react-select": "^2.1.0",
     "lucide-react": "^0.469.0",
-    "nanostores": "^1.2.0"
+    "nanostores": "^1.2.0",
+    "yaml": "^2.5.0"
   },
   "pnpm": {
     "overrides": {
@@ -155,6 +168,7 @@
   "devDependencies": {
     "@hocuspocus/provider": "^3.4.4",
     "@nanostores/react": "^1.1.0",
+    "@xyflow/react": "^12.11.0",
     "@pierre/trees": "1.0.0-beta.3",
     "@storybook/addon-essentials": "^8",
     "@storybook/addon-mcp": "^0.4.2",