@tangle-network/sandbox-ui 0.113.2 → 0.113.3

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/index.js

@@ -133,7 +133,7 @@ import {
   formatRelativeAge,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-OUHP3YN4.js";
+} from "./chunk-JZCRK2BJ.js";
 import {
   BRAND_PRISM_THEME,
   ChangesPane,

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.3",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",