@tangle-network/sandbox-ui 0.113.2 → 0.113.4

package/dist/{chunk-OUHP3YN4.js → chunk-JZCRK2BJ.js}

@@ -6,13 +6,7 @@ import {
 } from "./chunk-EI44GEQ5.js";
 
 // src/workspace/workspace-layout.tsx
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   PanelBottomClose,
   PanelBottomOpen,
@@ -215,6 +209,7 @@ function WorkspaceLayout({
   maxLeftWidth = 420,
   minRightWidth = 320,
   maxRightWidth = 720,
+  minCenterWidth = 400,
   minBottomHeight = 100,
   maxBottomHeight = 500,
   persistenceKey,
@@ -332,8 +327,35 @@ function WorkspaceLayout({
       window.removeEventListener("pointercancel", handlePointerUp);
     };
   }, [desktop, maxBottomHeight, maxLeftWidth, maxRightWidth, minBottomHeight, minLeftWidth, minRightWidth]);
-  const leftStyle = useMemo(() => ({ width: `${leftWidth}px` }), [leftWidth]);
-  const rightStyle = useMemo(() => ({ width: `${rightWidth}px` }), [rightWidth]);
+  const shellRef = useRef(null);
+  const [shellWidth, setShellWidth] = useState(null);
+  useEffect(() => {
+    const shell = shellRef.current;
+    if (!shell || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width;
+      if (typeof width === "number") setShellWidth(width);
+    });
+    observer.observe(shell);
+    return () => observer.disconnect();
+  }, []);
+  const { leftPx, rightPx } = useMemo(() => {
+    const leftShown = desktop && hasLeft && leftOpen;
+    const rightShown = desktop && hasRight && rightOpen;
+    let leftPx2 = leftWidth;
+    let rightPx2 = rightWidth;
+    if (shellWidth === null) return { leftPx: leftPx2, rightPx: rightPx2 };
+    const room = () => shellWidth - (leftShown ? leftPx2 : 0) - (rightShown ? rightPx2 : 0);
+    if (rightShown && room() < minCenterWidth) {
+      rightPx2 = Math.max(minRightWidth, rightPx2 - (minCenterWidth - room()));
+    }
+    if (leftShown && room() < minCenterWidth) {
+      leftPx2 = Math.max(minLeftWidth, leftPx2 - (minCenterWidth - room()));
+    }
+    return { leftPx: leftPx2, rightPx: rightPx2 };
+  }, [desktop, hasLeft, hasRight, leftOpen, leftWidth, minCenterWidth, minLeftWidth, minRightWidth, rightOpen, rightWidth, shellWidth]);
+  const leftStyle = useMemo(() => ({ width: `${leftPx}px` }), [leftPx]);
+  const rightStyle = useMemo(() => ({ width: `${rightPx}px` }), [rightPx]);
   const startResize = (side, pointerStartX) => {
     dragStateRef.current = {
       side,
@@ -371,7 +393,7 @@ function WorkspaceLayout({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { ref: shellRef, className: "flex min-h-0 flex-1", children: [
           desktop && left && leftOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs(
               "aside",

package/dist/{chunk-K4Q4E7D7.js → chunk-LDAKIKTV.js}

@@ -3950,7 +3950,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
           value: newPort,
           onChange: (e) => setNewPort(e.target.value),
           onKeyDown: (e) => e.key === "Enter" && handleExpose(),
-          className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-ring"
         }
       ),
       /* @__PURE__ */ jsxs22(
@@ -3959,7 +3959,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
           type: "button",
           onClick: handleExpose,
           disabled: !newPort || isExposing,
-          className: "inline-flex items-center gap-2 rounded-lg bg-primary/20 border border-primary/30 px-4 py-2 text-sm font-medium text-primary hover:bg-primary hover:text-primary-foreground transition-colors disabled:opacity-50",
+          className: "inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-primary/55 disabled:text-primary-foreground/90 disabled:shadow-none",
           children: [
             /* @__PURE__ */ jsx25(Plus4, { className: "h-4 w-4" }),
             "Expose"

package/dist/{chunk-RDUYWQQ7.js → chunk-XFEJ66AG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-PZVUIUUW.js";
 import {
   PortsList
-} from "./chunk-K4Q4E7D7.js";
+} from "./chunk-LDAKIKTV.js";
 import {
   TerminalView
 } from "./chunk-IACRDXER.js";

package/dist/dashboard.js

@@ -60,7 +60,7 @@ import {
   chatCapableHarnesses,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-K4Q4E7D7.js";
+} from "./chunk-LDAKIKTV.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/globals.css

@@ -4362,6 +4362,9 @@
   .focus-visible\:border-\[var\(--border-accent\)\]:focus-visible {
     border-color: var(--border-accent);
   }
+  .focus-visible\:border-primary:focus-visible {
+    border-color: var(--color-primary);
+  }
   .focus-visible\:border-primary\/50:focus-visible {
     border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4465,6 +4468,18 @@
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
+  .disabled\:bg-primary\/55:disabled {
+    background-color: color-mix(in srgb, hsl(var(--primary)) 55%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 55%, transparent);
+    }
+  }
+  .disabled\:text-primary-foreground\/90:disabled {
+    color: color-mix(in srgb, hsl(var(--primary-foreground)) 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-primary-foreground) 90%, transparent);
+    }
+  }
   .disabled\:opacity-30:disabled {
     opacity: 30%;
   }
@@ -4477,6 +4492,10 @@
   .disabled\:opacity-60:disabled {
     opacity: 60%;
   }
+  .disabled\:shadow-none:disabled {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .data-\[disabled\]\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }

package/dist/index.js

@@ -133,7 +133,7 @@ import {
   formatRelativeAge,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-OUHP3YN4.js";
+} from "./chunk-JZCRK2BJ.js";
 import {
   BRAND_PRISM_THEME,
   ChangesPane,
@@ -150,7 +150,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-RDUYWQQ7.js";
+} from "./chunk-XFEJ66AG.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -226,7 +226,7 @@ import {
   chatCapableHarnesses,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-K4Q4E7D7.js";
+} from "./chunk-LDAKIKTV.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/styles.css

@@ -4362,6 +4362,9 @@
   .focus-visible\:border-\[var\(--border-accent\)\]:focus-visible {
     border-color: var(--border-accent);
   }
+  .focus-visible\:border-primary:focus-visible {
+    border-color: var(--color-primary);
+  }
   .focus-visible\:border-primary\/50:focus-visible {
     border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4465,6 +4468,18 @@
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
+  .disabled\:bg-primary\/55:disabled {
+    background-color: color-mix(in srgb, hsl(var(--primary)) 55%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 55%, transparent);
+    }
+  }
+  .disabled\:text-primary-foreground\/90:disabled {
+    color: color-mix(in srgb, hsl(var(--primary-foreground)) 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-primary-foreground) 90%, transparent);
+    }
+  }
   .disabled\:opacity-30:disabled {
     opacity: 30%;
   }
@@ -4477,6 +4492,10 @@
   .disabled\:opacity-60:disabled {
     opacity: 60%;
   }
+  .disabled\:shadow-none:disabled {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .data-\[disabled\]\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }

package/dist/workbench.js

@@ -14,9 +14,9 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-RDUYWQQ7.js";
+} from "./chunk-XFEJ66AG.js";
 import "./chunk-PZVUIUUW.js";
-import "./chunk-K4Q4E7D7.js";
+import "./chunk-LDAKIKTV.js";
 import "./chunk-OMUIPJQZ.js";
 import "./chunk-IACRDXER.js";
 import "./chunk-MYZAW4RX.js";

package/dist/workspace.d.ts

@@ -46,6 +46,12 @@ interface WorkspaceLayoutProps {
     minRightWidth?: number;
     /** Maximum right panel width in px */
     maxRightWidth?: number;
+    /**
+     * Width in px the center column keeps on desktop. When the shell is too
+     * narrow for the stored pane widths, the right pane yields down to its
+     * minimum first, then the left; the stored widths return when room does.
+     */
+    minCenterWidth?: number;
     /** Minimum bottom panel height in px */
     minBottomHeight?: number;
     /** Maximum bottom panel height in px */
@@ -99,7 +105,7 @@ interface WorkspaceLayoutProps {
     centerHeaderVisibility?: "always" | "auto";
     className?: string;
 }
-declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, defaultLeftWidth, defaultRightWidth, defaultBottomHeight, minLeftWidth, maxLeftWidth, minRightWidth, maxRightWidth, minBottomHeight, maxBottomHeight, persistenceKey, resizable, theme, density, leftLabel, rightLabel, bottomLabel, leftOpen: leftOpenProp, onLeftOpenChange, rightOpen: rightOpenProp, onRightOpenChange, keyboardShortcuts, leftCollapsedControl, leftContentClassName, rightContentClassName, centerHeaderVisibility, className, }: WorkspaceLayoutProps): React$1.JSX.Element;
+declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, defaultLeftWidth, defaultRightWidth, defaultBottomHeight, minLeftWidth, maxLeftWidth, minRightWidth, maxRightWidth, minCenterWidth, minBottomHeight, maxBottomHeight, persistenceKey, resizable, theme, density, leftLabel, rightLabel, bottomLabel, leftOpen: leftOpenProp, onLeftOpenChange, rightOpen: rightOpenProp, onRightOpenChange, keyboardShortcuts, leftCollapsedControl, leftContentClassName, rightContentClassName, centerHeaderVisibility, className, }: WorkspaceLayoutProps): React$1.JSX.Element;
 
 type WorkspacePaneHeaderProps = HTMLAttributes<HTMLDivElement>;
 /**

package/dist/workspace.js

@@ -21,7 +21,7 @@ import {
   formatRelativeAge,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-OUHP3YN4.js";
+} from "./chunk-JZCRK2BJ.js";
 import "./chunk-BGVEHENC.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.113.2",
+  "version": "0.113.4",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -205,11 +205,11 @@
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@tiptap/core": "^3.28.0",
-    "@tiptap/extension-collaboration": "^3.28.0",
-    "@tiptap/extension-collaboration-caret": "^3.28.0",
-    "@tiptap/react": "^3.28.0",
-    "@tiptap/starter-kit": "^3.28.0",
+    "@tiptap/core": "^3.30.4",
+    "@tiptap/extension-collaboration": "^3.30.4",
+    "@tiptap/extension-collaboration-caret": "^3.30.4",
+    "@tiptap/react": "^3.30.4",
+    "@tiptap/starter-kit": "^3.30.4",
     "@tiptap/y-tiptap": "^3.0.7",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.1.2",
@@ -220,7 +220,7 @@
     "@xyflow/react": "^12.11.2",
     "jsdom": "^29.1.1",
     "playwright": "^1.62.1",
-    "postcss": "^8.5.21",
+    "postcss": "^8.5.23",
     "postcss-import": "^16.1.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",