@tangle-network/sandbox-ui 0.72.0 → 0.74.0

package/dist/workflows.js

@@ -1,6 +1,6 @@
 import {
   buildWorkflowGraph
-} from "./chunk-34F66QTV.js";
+} from "./chunk-VXGI2XUK.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-M5ZOY43R.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-64XJBIW2.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }
@@ -50,18 +50,18 @@ function GraphFallback({
       className: `overflow-auto rounded-lg border border-border bg-background p-2 ${className ?? ""}`,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-text-muted text-xs", children: "Couldn't render the graph \u2014 showing the definition." }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Couldn't render the graph \u2014 showing the definition." }),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: onRetry,
-              className: "shrink-0 rounded border border-border px-1.5 py-0.5 text-text-muted text-xs transition hover:text-text",
+              className: "shrink-0 rounded border border-border px-1.5 py-0.5 text-muted-foreground text-xs transition hover:text-foreground",
               children: "Retry"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("pre", { className: "text-text text-xs", children: /* @__PURE__ */ jsx("code", { children: yaml }) })
+        /* @__PURE__ */ jsx("pre", { className: "text-foreground text-xs", children: /* @__PURE__ */ jsx("code", { children: yaml }) })
       ]
     }
   );

package/package.json

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

package/dist/WorkflowGraph-M5ZOY43R.js

@@ -1,328 +0,0 @@
-import {
-  ProviderIcon
-} from "./chunk-GTJ5PSK5.js";
-import {
-  buildWorkflowGraph,
-  providerLabel
-} from "./chunk-34F66QTV.js";
-import "./chunk-U67V476Y.js";
-
-// src/workflows/WorkflowGraph.tsx
-import {
-  Background,
-  Controls,
-  Handle,
-  Position,
-  ReactFlow,
-  useEdgesState,
-  useNodesState
-} from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState
-} from "react";
-
-// src/workflows/flow-graph.ts
-function buildFlowGraph(yaml, nodeState) {
-  const graph = buildWorkflowGraph(yaml, {
-    reserveRunState: nodeState !== void 0
-  });
-  return {
-    error: graph.error,
-    nodes: graph.nodes.map(
-      (n) => ({
-        id: n.id,
-        type: "wfNode",
-        position: n.position,
-        data: nodeState?.[n.id] ? { ...n.data, state: nodeState[n.id] } : n.data
-      })
-    ),
-    edges: graph.edges.map((e) => ({
-      id: e.id,
-      source: e.source,
-      target: e.target,
-      sourceHandle: e.sourceHandle,
-      type: "smoothstep"
-    }))
-  };
-}
-function sameRunState(a, b) {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) return false;
-  return aKeys.every((k) => a[k] === b[k]);
-}
-function mergeRunState(prev, baseDataById, nodeState) {
-  return prev.map((n) => {
-    const base = baseDataById.get(n.id) ?? n.data;
-    const s = nodeState?.[n.id];
-    const nextData = s ? { ...base, state: s } : base;
-    return sameRunState(n.data.state, nextData.state) ? n : { ...n, data: nextData };
-  });
-}
-
-// src/workflows/format.ts
-function fmtDuration(ms) {
-  if (ms === void 0 || !Number.isFinite(ms) || ms < 0) return void 0;
-  if (ms < 1e3) return `${Math.round(ms)}ms`;
-  const s = ms / 1e3;
-  if (s < 60) return `${s.toFixed(1)}s`;
-  const totalSeconds = Math.round(s);
-  return `${Math.floor(totalSeconds / 60)}m${totalSeconds % 60}s`;
-}
-function fmtCost(usd) {
-  if (usd === void 0 || !Number.isFinite(usd) || usd < 0) return void 0;
-  if (usd === 0) return "$0";
-  return usd < 0.01 ? `$${usd.toFixed(4)}` : `$${usd.toFixed(2)}`;
-}
-function clampPreview(text, max = 200) {
-  return text.length > max ? `${text.slice(0, max)}\u2026` : text;
-}
-function fmtTokens(input, output) {
-  const valid = (n) => n !== void 0 && Number.isFinite(n) && n >= 0 ? n : void 0;
-  const i = valid(input);
-  const o = valid(output);
-  if (i === void 0 && o === void 0) return void 0;
-  return `${i ?? 0}/${o ?? 0} tok`;
-}
-
-// src/workflows/WorkflowGraph.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function useColorMode() {
-  const [mode, setMode] = useState(
-    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light"
-  );
-  useEffect(() => {
-    const el = document.documentElement;
-    const update = () => setMode(el.classList.contains("dark") ? "dark" : "light");
-    update();
-    const observer = new MutationObserver(update);
-    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
-    return () => observer.disconnect();
-  }, []);
-  return mode;
-}
-var TONE_CARD = {
-  trigger: "border-primary/60 bg-primary/5",
-  structural: "border-accent-yellow/50 bg-accent-yellow/5",
-  action: "border-border bg-card"
-};
-var TONE_DOT = {
-  trigger: "bg-primary",
-  structural: "bg-accent-yellow",
-  action: "bg-text-muted"
-};
-var HANDLE_CLASS = "!h-2 !w-2 !min-w-0 !border-0 !bg-transparent opacity-0";
-var STATUS_LABEL = {
-  queued: "Queued",
-  running: "Running",
-  succeeded: "Done",
-  failed: "Failed"
-};
-var STATUS_BADGE = {
-  queued: "bg-background-tertiary text-text-muted",
-  running: "bg-primary/15 text-primary",
-  succeeded: "bg-green-600/10 text-green-600",
-  failed: "bg-red-500/10 text-red-400"
-};
-function statusBorder(status) {
-  switch (status) {
-    case "running":
-      return "border-primary ring-2 ring-primary/40 animate-pulse";
-    case "succeeded":
-      return "border-green-500";
-    case "failed":
-      return "border-red-500";
-    default:
-      return "opacity-70";
-  }
-}
-function MetaChip({ children }) {
-  return /* @__PURE__ */ jsx("span", { className: "rounded bg-background-tertiary px-1.5 py-0.5 text-[10px] text-text-muted", children });
-}
-function WorkflowNode({ data }) {
-  const d = data;
-  const state = d.state;
-  const model = state?.model ?? d.model;
-  const duration = fmtDuration(state?.durationMs);
-  const cost = fmtCost(state?.costUsd);
-  const tokens = fmtTokens(state?.inputTokens, state?.outputTokens);
-  const errorText = state?.error ? clampPreview(state.error) : void 0;
-  const outputText = state?.outputPreview ? clampPreview(state.outputPreview) : void 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `relative w-[240px] rounded-lg border px-3 py-2 shadow-sm transition-colors ${TONE_CARD[d.tone]} ${state ? statusBorder(state.status) : ""}`,
-      children: [
-        !d.isRoot && /* @__PURE__ */ jsx(
-          Handle,
-          {
-            type: "target",
-            position: Position.Top,
-            className: HANDLE_CLASS
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: `h-2 w-2 shrink-0 rounded-full ${TONE_DOT[d.tone]}`
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "font-medium text-[12px] text-text", children: d.title }),
-          state ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: `ml-auto rounded px-1.5 py-0.5 text-[10px] ${STATUS_BADGE[state.status]}`,
-              children: STATUS_LABEL[state.status]
-            }
-          ) : d.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto rounded bg-background-tertiary px-1.5 py-0.5 text-[10px] text-text-muted", children: d.badge })
-        ] }),
-        d.subtitle && /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: "mt-1 truncate text-[11px] text-text-muted",
-            title: d.subtitle,
-            children: d.subtitle
-          }
-        ),
-        (model || cost || duration || tokens || state) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: [
-          d.kind && d.tone === "action" && /* @__PURE__ */ jsx(MetaChip, { children: d.kind }),
-          model && /* @__PURE__ */ jsx(MetaChip, { children: model }),
-          cost && /* @__PURE__ */ jsx(MetaChip, { children: cost }),
-          duration && /* @__PURE__ */ jsx(MetaChip, { children: duration }),
-          tokens && /* @__PURE__ */ jsx(MetaChip, { children: tokens })
-        ] }),
-        state?.status === "failed" && errorText && /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: "mt-1.5 line-clamp-2 text-[10px] text-red-400",
-            title: errorText,
-            children: errorText
-          }
-        ),
-        outputText && state?.status !== "failed" && /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: "mt-1.5 line-clamp-2 text-[10px] text-text-muted",
-            title: outputText,
-            children: outputText
-          }
-        ),
-        d.provider && /* @__PURE__ */ jsxs("span", { className: "mt-1.5 inline-flex items-center gap-1 rounded bg-background-tertiary px-1.5 py-0.5 text-[10px] text-text-muted", children: [
-          /* @__PURE__ */ jsx(
-            ProviderIcon,
-            {
-              id: d.provider,
-              displayName: providerLabel(d.provider),
-              size: 12,
-              className: "rounded-[2px]"
-            }
-          ),
-          providerLabel(d.provider)
-        ] }),
-        /* @__PURE__ */ jsx(
-          Handle,
-          {
-            type: "source",
-            id: "out",
-            position: Position.Bottom,
-            className: HANDLE_CLASS
-          }
-        ),
-        d.hasBranches && /* @__PURE__ */ jsx(
-          Handle,
-          {
-            type: "source",
-            id: "branch",
-            position: Position.Right,
-            className: HANDLE_CLASS
-          }
-        )
-      ]
-    }
-  );
-}
-var NODE_TYPES = { wfNode: WorkflowNode };
-function WorkflowGraph({
-  yaml,
-  variant = "full",
-  className,
-  nodeState,
-  onNodeClick
-}) {
-  const colorMode = useColorMode();
-  const hasRunOverlay = nodeState !== void 0;
-  const structural = useMemo(
-    () => buildFlowGraph(yaml, hasRunOverlay ? {} : void 0),
-    [yaml, hasRunOverlay]
-  );
-  const [nodes, setNodes, onNodesChange] = useNodesState(structural.nodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(structural.edges);
-  useEffect(() => {
-    setNodes(structural.nodes);
-    setEdges(structural.edges);
-  }, [structural, setNodes, setEdges]);
-  useEffect(() => {
-    const baseById = new Map(structural.nodes.map((n) => [n.id, n.data]));
-    setNodes((prev) => mergeRunState(prev, baseById, nodeState));
-  }, [nodeState, structural, setNodes]);
-  const handleNodeClick = useCallback(
-    (_event, node) => {
-      onNodeClick?.(node.id, node.data);
-    },
-    [onNodeClick]
-  );
-  if (structural.error || structural.nodes.length === 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-text-muted text-xs ${className ?? ""}`,
-        children: structural.error ?? "Nothing to show"
-      }
-    );
-  }
-  const isPreview = variant === "preview";
-  return /* @__PURE__ */ jsx("div", { className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs(
-    ReactFlow,
-    {
-      nodes,
-      edges,
-      onNodesChange,
-      onEdgesChange,
-      nodeTypes: NODE_TYPES,
-      colorMode,
-      onNodeClick: onNodeClick ? handleNodeClick : void 0,
-      fitView: true,
-      fitViewOptions: { padding: 0.2 },
-      proOptions: { hideAttribution: true },
-      nodesDraggable: !isPreview,
-      nodesConnectable: false,
-      deleteKeyCode: null,
-      edgesReconnectable: false,
-      elementsSelectable: !isPreview,
-      edgesFocusable: false,
-      zoomOnScroll: false,
-      zoomOnPinch: true,
-      zoomOnDoubleClick: !isPreview,
-      panOnDrag: true,
-      preventScrolling: false,
-      minZoom: 0.2,
-      maxZoom: 1.5,
-      children: [
-        /* @__PURE__ */ jsx(Background, { gap: 16 }),
-        /* @__PURE__ */ jsx(Controls, { showInteractive: false, position: "bottom-right" })
-      ]
-    }
-  ) });
-}
-export {
-  WorkflowGraph,
-  WorkflowNode
-};