@tangle-network/sandbox-ui 0.110.0 → 0.111.1

package/README.md

@@ -16,7 +16,7 @@ React component library for [Tangle Sandbox](https://sandbox.tangle.tools) — a
 npm install @tangle-network/sandbox-ui
 ```
 
-**Required peers:** `react` and `react-dom` 18 or 19, `@tangle-network/agent-interface ^1.0.0`, `@tangle-network/brand ^1.5.0`, and `@tangle-network/ui ^11.6.0`.
+**Required peers:** `react` and `react-dom` 18 or 19, `@tangle-network/agent-interface ^1.0.0 || ^2.0.0`, `@tangle-network/brand ^1.5.0`, and `@tangle-network/ui ^11.6.0`.
 Optional peers are required only by the subpaths that use them; see [package.json](./package.json). `/editor` needs its tiptap, `yjs` and `@hocuspocus/provider` peers only when it renders an editor, and the `@tangle-network/ui` README holds the table of which surface needs which.
 
 ## Usage

package/dist/{WorkflowGraph-7AFEKG7E.js → WorkflowGraph-2QOORYIR.js}

@@ -642,7 +642,7 @@ function NodeMark({
 
 // src/workflows/WorkflowGraph.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var FIT_VIEW = { padding: 0.16 };
+var FIT_VIEW = { padding: "12px" };
 function fitZoomCeiling(compact) {
   return compact ? 1.5 : 1;
 }
@@ -1335,6 +1335,7 @@ function WorkflowGraph({
   variant = "full",
   direction = "LR",
   defaultCompact,
+  onCompactChange,
   className,
   wrap = false,
   nodeState,
@@ -1362,6 +1363,7 @@ function WorkflowGraph({
   const [userCompact, setUserCompact] = useState(
     defaultCompact ?? nodeState === void 0
   );
+  const nextDensityFrom = useRef(userCompact);
   const compact = isPreview || userCompact;
   const [displayCompact, setDisplayCompact] = useState(compact);
   const rfRef = useRef(
@@ -1646,7 +1648,14 @@ function WorkflowGraph({
       children: [
         /* @__PURE__ */ jsx3(Background, { gap: 18 }),
         !isPreview && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Controls, { showInteractive: false, position: "bottom-right" }),
+          /* @__PURE__ */ jsx3(
+            Controls,
+            {
+              showInteractive: false,
+              position: "bottom-right",
+              fitViewOptions: { padding: FIT_VIEW.padding }
+            }
+          ),
           /* @__PURE__ */ jsxs3(Panel, { position: "top-left", className: "flex items-center gap-1", children: [
             addTrigger && /* @__PURE__ */ jsxs3(
               "button",
@@ -1667,7 +1676,12 @@ function WorkflowGraph({
               "button",
               {
                 type: "button",
-                onClick: () => setUserCompact((c) => !c),
+                onClick: () => {
+                  const next = !nextDensityFrom.current;
+                  nextDensityFrom.current = next;
+                  setUserCompact(next);
+                  onCompactChange?.(next);
+                },
                 "aria-pressed": userCompact,
                 title: userCompact ? "Expand nodes" : "Collapse nodes",
                 className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",

package/dist/workflows.d.ts

@@ -331,6 +331,17 @@ interface WorkflowGraphProps {
      * toggle, and the preview variant is always compact.
      */
     defaultCompact?: boolean;
+    /**
+     * Called when the reader moves the density toggle, with the density they
+     * chose.
+     *
+     * `defaultCompact` seeds the graph; this reports back out of it, which is
+     * what a host needs to REMEMBER the choice. Without it a host can set an
+     * opening density but never learn that the reader wanted the other one, so
+     * every navigation puts them back where they started and the toggle has to
+     * be found again.
+     */
+    onCompactChange?: (compact: boolean) => void;
     /** Sizing for the wrapper; the caller controls height. */
     className?: string;
     /**

package/dist/workflows.js

@@ -36,7 +36,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-7AFEKG7E.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-2QOORYIR.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.110.0",
+  "version": "0.111.1",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -118,7 +118,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <2.0.0",
-    "@tangle-network/agent-interface": "^1.0.0",
+    "@tangle-network/agent-interface": "^1.0.0 || ^2.0.0",
     "@tangle-network/brand": "^1.5.0",
     "@tangle-network/ui": "^11.6.0",
     "@tanstack/react-query": "^5.0.0",
@@ -197,7 +197,7 @@
     "@storybook/react": "^10.5.4",
     "@storybook/react-vite": "^10.5.4",
     "@tailwindcss/postcss": "^4.3.3",
-    "@tangle-network/agent-interface": "1.0.0",
+    "@tangle-network/agent-interface": "2.1.1",
     "@tangle-network/brand": "^1.5.0",
     "@tangle-network/ui": "^11.6.0",
     "@tanstack/react-query": "^5.101.4",