@tangle-network/sandbox-ui 0.113.1 → 0.113.3

package/dist/{chunk-2Q3KDQX7.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",
@@ -1860,7 +1882,7 @@ function SandboxWorkbench({
       children: transcript
     }
   );
-  const artifactPanel = artifacts.length > 0 ? /* @__PURE__ */ jsxs9("section", { className: "flex h-full min-h-0 flex-col bg-surface-container", children: [
+  const artifactPanel = artifacts.length > 0 || emptyArtifactState ? /* @__PURE__ */ jsxs9("section", { className: "flex h-full min-h-0 flex-col bg-surface-container", children: [
     /* @__PURE__ */ jsx10(
       ArtifactTabs,
       {
@@ -1880,7 +1902,7 @@ function SandboxWorkbench({
     ) }) })
   ] }) : null;
   const directoryPlacement = layout?.directoryPlacement ?? (directory ? "left" : "hidden");
-  const artifactPlacement = layout?.artifactPlacement ?? (artifacts.length > 0 ? "right" : "hidden");
+  const artifactPlacement = layout?.artifactPlacement ?? (artifactPanel ? "right" : "hidden");
   const runtimePlacement = layout?.runtimePlacement ?? (runtime ? "bottom" : "hidden");
   const regionSections = {
     left: [],

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

@@ -7796,7 +7796,7 @@ function ChangesPane({
           showFileHeader: false,
           className: "flex-1"
         }
-      ) : /* @__PURE__ */ jsx10("p", { className: "px-3 py-3 text-xs text-muted-foreground", role: "status", children: "Loading diff\u2026" })
+      ) : selected.loadError ? /* @__PURE__ */ jsx10("p", { className: "px-3 py-3 text-xs text-destructive", role: "alert", children: selected.loadError }) : /* @__PURE__ */ jsx10("p", { className: "px-3 py-3 text-xs text-muted-foreground", role: "status", children: "Loading diff\u2026" })
     ] }) : showList && /* @__PURE__ */ jsx10("p", { className: "px-3 py-3 text-xs text-muted-foreground", children: "Select a file to read its diff." }) }),
     (onCommit || onPush) && /* @__PURE__ */ jsxs7("div", { className: cn("shrink-0 space-y-2 border-t bg-surface-container-low p-3", BORDER), children: [
       onCommit && /* @__PURE__ */ jsx10(

package/dist/index.js

@@ -133,7 +133,7 @@ import {
   formatRelativeAge,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-2Q3KDQX7.js";
+} from "./chunk-JZCRK2BJ.js";
 import {
   BRAND_PRISM_THEME,
   ChangesPane,
@@ -150,7 +150,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-VEK3EZIW.js";
+} from "./chunk-RDUYWQQ7.js";
 import {
   FileArtifactPane,
   FilePreview,

package/dist/workbench.d.ts

@@ -87,6 +87,11 @@ interface ChangedFile {
     /** Present once the consumer has resolved contents for the selected file. */
     baseline?: string;
     current?: string;
+    /**
+     * Why the sides could not be resolved. Shown under the file's header in
+     * place of the loading line, so a failed read never looks like a slow one.
+     */
+    loadError?: string;
 }
 interface ChangesPaneProps {
     /** Current branch; `null` when the tree has no commits yet or is not a repository. */

package/dist/workbench.js

@@ -14,7 +14,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-VEK3EZIW.js";
+} from "./chunk-RDUYWQQ7.js";
 import "./chunk-PZVUIUUW.js";
 import "./chunk-K4Q4E7D7.js";
 import "./chunk-OMUIPJQZ.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>;
 /**
@@ -573,6 +579,10 @@ interface SandboxWorkbenchProps {
     onArtifactClose?: (artifactId: string) => void;
     runtime?: RuntimePaneProps;
     layout?: SandboxWorkbenchLayoutOptions;
+    /**
+     * Shown in the artifact region while no artifact is selected. When given,
+     * the region renders before the first artifact exists.
+     */
     emptyArtifactState?: ReactNode;
     className?: string;
 }

package/dist/workspace.js

@@ -21,7 +21,7 @@ import {
   formatRelativeAge,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-2Q3KDQX7.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.1",
+  "version": "0.113.3",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",