@tangle-network/sandbox-ui 0.81.0 → 0.83.0

package/dist/{WorkflowGraph-472MC3ML.js → WorkflowGraph-J2SVX3WP.js}

@@ -23,6 +23,8 @@ import "./chunk-U67V476Y.js";
 import {
   Background,
   Controls,
+  getNodesBounds,
+  getViewportForBounds,
   Handle,
   MarkerType,
   Panel,
@@ -392,11 +394,17 @@ function NodeMark({
 // src/workflows/WorkflowGraph.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
-var FIT_VIEW = { padding: 0.16, minZoom: 0.55, maxZoom: 1 };
-function fitViewOnLayoutChange() {
-  const moves = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === false;
-  return moves ? { ...FIT_VIEW, duration: 220 } : FIT_VIEW;
+var FIT_VIEW = { padding: 0.16, minZoom: 0.55 };
+function fitZoomCeiling(compact) {
+  return compact ? 1.5 : 1;
 }
+var LAYOUT_TRANSITION_MS = 220;
+var DENSITY_FLIP_AT = { grow: 0.12, shrink: 0.75 };
+function motionAllowed() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === false;
+}
+var lerp = (a, b, t) => a + (b - a) * t;
+var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
 function useColorMode() {
   const [mode, setMode] = useState(
     () => typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light"
@@ -419,7 +427,7 @@ function StatusFooter({
   elapsed
 }) {
   const roundsLabel = rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0;
-  return /* @__PURE__ */ jsxs2("div", { className: "mt-auto border-border border-t", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "wf-node-body-in mt-auto border-border border-t", children: [
     /* @__PURE__ */ jsx3(
       "div",
       {
@@ -558,7 +566,7 @@ function WorkflowNode({ data }) {
                 }
               },
               children: [
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx3("span", { className: "wf-node-body-in flex items-center justify-center", children: /* @__PURE__ */ jsx3(
                   NodeMark,
                   {
                     kind: d.kind,
@@ -567,7 +575,7 @@ function WorkflowNode({ data }) {
                     accent,
                     tile: Math.round(COMPACT_TILE * 0.62)
                   }
-                ),
+                ) }),
                 d.badge && !state && /* @__PURE__ */ jsx3("span", { className: "-right-1.5 -top-1.5 absolute rounded-full border border-border bg-card px-1.5 py-[1px] font-medium text-[10px] text-muted-foreground", children: d.badge }),
                 state && /* @__PURE__ */ jsx3(
                   "span",
@@ -586,7 +594,7 @@ function WorkflowNode({ data }) {
           /* @__PURE__ */ jsxs2(
             "div",
             {
-              className: `min-w-0 ${isLR ? "mt-2 w-full px-1 text-center" : "ml-2 flex-1 text-left"}`,
+              className: `wf-node-body-in min-w-0 ${isLR ? "mt-2 w-full px-1 text-center" : "ml-2 flex-1 text-left"}`,
               children: [
                 /* @__PURE__ */ jsx3(
                   "div",
@@ -621,7 +629,7 @@ function WorkflowNode({ data }) {
       },
       children: [
         handles,
-        /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden px-3.5 pt-2.5 pb-2", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "wf-node-body-in flex min-h-0 flex-1 flex-col overflow-hidden px-3.5 pt-2.5 pb-2", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-2.5", children: [
             /* @__PURE__ */ jsx3(
               NodeMark,
@@ -719,7 +727,9 @@ function WorkflowGraph({
   const isPreview = variant === "preview";
   const [userCompact, setUserCompact] = useState(defaultCompact);
   const compact = isPreview || userCompact;
+  const [displayCompact, setDisplayCompact] = useState(compact);
   const rfRef = useRef(null);
+  const wrapperRef = useRef(null);
   const hasRunOverlay = nodeState !== void 0;
   const structural = useMemo(
     () => buildFlowGraph(yaml, {
@@ -735,9 +745,10 @@ function WorkflowGraph({
   );
   const [nodes, setNodes, onNodesChange] = useNodesState(structural.nodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(styledEdges);
-  useEffect(() => {
-    setNodes(structural.nodes);
-  }, [structural, setNodes]);
+  const nodesRef = useRef(nodes);
+  nodesRef.current = nodes;
+  const nodeStateRef = useRef(nodeState);
+  nodeStateRef.current = nodeState;
   useEffect(() => {
     setEdges(styledEdges);
   }, [styledEdges, setEdges]);
@@ -745,17 +756,88 @@ function WorkflowGraph({
     const baseById = new Map(structural.nodes.map((n) => [n.id, n.data]));
     setNodes((prev) => mergeRunState(prev, baseById, nodeState));
   }, [nodeState, structural, setNodes]);
-  const didInitialFitRef = useRef(false);
+  const didInitialSeedRef = useRef(false);
   useEffect(() => {
-    if (!didInitialFitRef.current) {
-      didInitialFitRef.current = true;
+    const withRunState = (nodes2) => {
+      const state = nodeStateRef.current;
+      if (!state) return nodes2;
+      return nodes2.map(
+        (n) => state[n.id] ? { ...n, data: { ...n.data, state: state[n.id] } } : n
+      );
+    };
+    if (!didInitialSeedRef.current) {
+      didInitialSeedRef.current = true;
+      setNodes(withRunState(structural.nodes));
+      setDisplayCompact(compact);
       return;
     }
     const inst = rfRef.current;
-    if (!inst || typeof requestAnimationFrame === "undefined") return;
-    const raf = requestAnimationFrame(() => inst.fitView(fitViewOnLayoutChange()));
-    return () => cancelAnimationFrame(raf);
-  }, [structural]);
+    const frame = wrapperRef.current?.getBoundingClientRect();
+    if (!inst || !frame || frame.width === 0 || frame.height === 0) {
+      setNodes(withRunState(structural.nodes));
+      setDisplayCompact(compact);
+      return;
+    }
+    const endViewport = getViewportForBounds(
+      getNodesBounds(structural.nodes),
+      frame.width,
+      frame.height,
+      FIT_VIEW.minZoom,
+      fitZoomCeiling(compact),
+      FIT_VIEW.padding
+    );
+    const prev = nodesRef.current;
+    const prevById = new Map(prev.map((n) => [n.id, n]));
+    const sameNodeSet = prev.length === structural.nodes.length && structural.nodes.every((n) => prevById.has(n.id));
+    if (!sameNodeSet || !motionAllowed() || typeof requestAnimationFrame === "undefined") {
+      setNodes(withRunState(structural.nodes));
+      setDisplayCompact(compact);
+      inst.setViewport(endViewport);
+      return;
+    }
+    const flipTimer = setTimeout(
+      () => setDisplayCompact(compact),
+      LAYOUT_TRANSITION_MS * (compact ? DENSITY_FLIP_AT.shrink : DENSITY_FLIP_AT.grow)
+    );
+    const startViewport = inst.getViewport();
+    const startedAt = performance.now();
+    let raf = requestAnimationFrame(function step(now) {
+      const t = Math.min(1, (now - startedAt) / LAYOUT_TRANSITION_MS);
+      const e = easeInOutCubic(t);
+      setNodes(
+        withRunState(
+          t >= 1 ? structural.nodes : structural.nodes.map((n) => {
+            const p = prevById.get(n.id);
+            if (!p || p.width === void 0 || p.height === void 0) {
+              return n;
+            }
+            const width = lerp(p.width, n.width ?? p.width, e);
+            const height = lerp(p.height, n.height ?? p.height, e);
+            return {
+              ...n,
+              position: {
+                x: lerp(p.position.x, n.position.x, e),
+                y: lerp(p.position.y, n.position.y, e)
+              },
+              width,
+              height,
+              style: { ...n.style, width, height }
+            };
+          })
+        )
+      );
+      inst.setViewport({
+        x: lerp(startViewport.x, endViewport.x, e),
+        y: lerp(startViewport.y, endViewport.y, e),
+        zoom: lerp(startViewport.zoom, endViewport.zoom, e)
+      });
+      if (t < 1) raf = requestAnimationFrame(step);
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(flipTimer);
+    };
+  }, [structural, compact, setNodes]);
   const handleNodeClick = useCallback(
     (_event, node) => {
       onNodeClick?.(node.id, node.data);
@@ -771,7 +853,7 @@ function WorkflowGraph({
       }
     );
   }
-  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: compact, children: /* @__PURE__ */ jsx3("div", { className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: displayCompact, children: /* @__PURE__ */ jsx3("div", { ref: wrapperRef, className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs2(
     ReactFlow,
     {
       nodes,
@@ -785,7 +867,7 @@ function WorkflowGraph({
       },
       onNodeClick: onNodeClick ? handleNodeClick : void 0,
       fitView: true,
-      fitViewOptions: FIT_VIEW,
+      fitViewOptions: { ...FIT_VIEW, maxZoom: fitZoomCeiling(compact) },
       proOptions: { hideAttribution: true },
       nodesDraggable: !isPreview,
       nodesConnectable: false,
@@ -826,8 +908,9 @@ function WorkflowGraph({
 export {
   DensityContext,
   DirectionContext,
+  LAYOUT_TRANSITION_MS,
   WorkflowGraph,
   WorkflowNode,
   buildStyledEdges,
-  fitViewOnLayoutChange
+  fitZoomCeiling
 };

package/dist/globals.css

@@ -1325,6 +1325,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -6267,6 +6270,22 @@
   .animate-in {
     animation: fade-in 0.25s ease-out;
   }
+  .wf-node-body-in {
+    animation: wf-node-body-in 150ms ease-out both;
+  }
+  @keyframes wf-node-body-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .wf-node-body-in {
+      animation: none;
+    }
+  }
   .animate-row-in {
     animation: row-in 0.18s ease-out;
   }

package/dist/styles.css

@@ -1325,6 +1325,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -6267,6 +6270,22 @@
   .animate-in {
     animation: fade-in 0.25s ease-out;
   }
+  .wf-node-body-in {
+    animation: wf-node-body-in 150ms ease-out both;
+  }
+  @keyframes wf-node-body-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .wf-node-body-in {
+      animation: none;
+    }
+  }
   .animate-row-in {
     animation: row-in 0.18s ease-out;
   }

package/dist/workflows.d.ts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+export { M as ModelBrandIdentity, a as ModelBrandStack, m as modelBrandFor } from './model-brand-CsFykzMA.js';
+import '@tangle-network/agent-interface';
 
 /**
  * Turns a workflow YAML definition into a positioned node/edge graph for the

package/dist/workflows.js

@@ -1,6 +1,11 @@
 import {
   buildWorkflowGraph
 } from "./chunk-2NS724P4.js";
+import {
+  ModelBrandStack,
+  modelBrandFor
+} from "./chunk-I3G23XHN.js";
+import "./chunk-EI44GEQ5.js";
 import "./chunk-U67V476Y.js";
 
 // src/workflows/WorkflowGraphLazy.tsx
@@ -26,7 +31,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-472MC3ML.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-J2SVX3WP.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }
@@ -97,6 +102,8 @@ function WorkflowGraph(props) {
   );
 }
 export {
+  ModelBrandStack,
   WorkflowGraph as WorkflowGraphLazy,
-  buildWorkflowGraph
+  buildWorkflowGraph,
+  modelBrandFor
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.81.0",
-  "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
+  "version": "0.83.0",
+  "description": "Unified UI component library for Tangle Sandbox \u2014 primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
     "url": "https://github.com/tangle-network/sandbox-ui"