@inf-monkeys-tech/monkeys-design 1.0.88 → 1.0.92-canary.285.1.d23f71b

package/dist/components/agent-workbench/index.d.mts

@@ -1,5 +1,5 @@
-import { L as AgentWorkbenchAppearanceOptions, d as AgentWorkbenchApprovalIntent, e as AgentWorkbenchArtifactIntent } from '../../details-model-06b1a44badc2.mjs';
-export { A as AgentWorkbenchActivity, a as AgentWorkbenchActivityClassNames, b as AgentWorkbenchActivityModel, c as AgentWorkbenchActivityProps, M as AgentWorkbenchAppearance, N as AgentWorkbenchAppearanceProvider, O as AgentWorkbenchAppearanceProviderProps, P as AgentWorkbenchApproval, Q as AgentWorkbenchApprovalData, R as AgentWorkbenchApprovalProps, S as AgentWorkbenchDensity, f as AgentWorkbenchDetailsIntent, g as AgentWorkbenchDetailsModel, h as AgentWorkbenchDetailsState, i as AgentWorkbenchDetailsTab, j as AgentWorkbenchEventOf, T as AgentWorkbenchExploreCardMedia, U as AgentWorkbenchExploreCardMediaProps, k as AgentWorkbenchExploreGroup, l as AgentWorkbenchExploreItem, V as AgentWorkbenchExploreMediaTreatment, W as AgentWorkbenchExploreMediaVariant, m as AgentWorkbenchExploreSidebar, n as AgentWorkbenchExploreSidebarIntent, o as AgentWorkbenchExploreSidebarLabels, p as AgentWorkbenchExploreSidebarProps, q as AgentWorkbenchShell, r as AgentWorkbenchShellClassNames, s as AgentWorkbenchShellProps, t as AgentWorkbenchSidebar, u as AgentWorkbenchSidebarClassNames, v as AgentWorkbenchSidebarContainer, w as AgentWorkbenchSidebarContainerBodyProps, x as AgentWorkbenchSidebarContainerClassNames, y as AgentWorkbenchSidebarContainerProps, z as AgentWorkbenchSidebarIntent, B as AgentWorkbenchSidebarProps, X as AgentWorkbenchSurface, Y as AgentWorkbenchSurfaceLevel, Z as AgentWorkbenchSurfaceProps, C as AgentWorkbenchTaskDetails, D as AgentWorkbenchTaskDetailsClassNames, E as AgentWorkbenchTaskDetailsProps, F as AgentWorkbenchTerminalModel, G as AgentWorkbenchTool, H as AgentWorkbenchToolClassNames, I as AgentWorkbenchToolProps, _ as AgentWorkbenchVariant, J as createAgentWorkbenchActivityModel, K as createAgentWorkbenchDetailsModel, $ as resolveAgentWorkbenchAppearance } from '../../details-model-06b1a44badc2.mjs';
+import { R as AgentWorkbenchAppearanceOptions, e as AgentWorkbenchApprovalIntent, f as AgentWorkbenchArtifactIntent } from '../../details-model-f46aa2190c52.mjs';
+export { A as AGENT_WORKBENCH_SHELL_BREAKPOINTS, a as AgentWorkbenchActivity, b as AgentWorkbenchActivityClassNames, c as AgentWorkbenchActivityModel, d as AgentWorkbenchActivityProps, S as AgentWorkbenchAppearance, T as AgentWorkbenchAppearanceProvider, U as AgentWorkbenchAppearanceProviderProps, V as AgentWorkbenchApproval, W as AgentWorkbenchApprovalData, X as AgentWorkbenchApprovalProps, Y as AgentWorkbenchDensity, g as AgentWorkbenchDetailsIntent, h as AgentWorkbenchDetailsModel, i as AgentWorkbenchDetailsState, j as AgentWorkbenchDetailsTab, k as AgentWorkbenchEventOf, Z as AgentWorkbenchExploreCardMedia, _ as AgentWorkbenchExploreCardMediaProps, l as AgentWorkbenchExploreGroup, m as AgentWorkbenchExploreItem, $ as AgentWorkbenchExploreMediaTreatment, a0 as AgentWorkbenchExploreMediaVariant, n as AgentWorkbenchExploreSidebar, o as AgentWorkbenchExploreSidebarIntent, p as AgentWorkbenchExploreSidebarLabels, q as AgentWorkbenchExploreSidebarProps, r as AgentWorkbenchShell, s as AgentWorkbenchShellBreakpoints, t as AgentWorkbenchShellClassNames, u as AgentWorkbenchShellLabels, v as AgentWorkbenchShellLayout, w as AgentWorkbenchShellMeasurement, x as AgentWorkbenchShellProps, y as AgentWorkbenchSidebar, z as AgentWorkbenchSidebarClassNames, B as AgentWorkbenchSidebarContainer, C as AgentWorkbenchSidebarContainerBodyProps, D as AgentWorkbenchSidebarContainerClassNames, E as AgentWorkbenchSidebarContainerProps, F as AgentWorkbenchSidebarIntent, G as AgentWorkbenchSidebarProps, a1 as AgentWorkbenchSurface, a2 as AgentWorkbenchSurfaceLevel, a3 as AgentWorkbenchSurfaceProps, H as AgentWorkbenchTaskDetails, I as AgentWorkbenchTaskDetailsClassNames, J as AgentWorkbenchTaskDetailsProps, K as AgentWorkbenchTerminalModel, L as AgentWorkbenchTool, M as AgentWorkbenchToolClassNames, N as AgentWorkbenchToolProps, a4 as AgentWorkbenchVariant, O as createAgentWorkbenchActivityModel, P as createAgentWorkbenchDetailsModel, a5 as resolveAgentWorkbenchAppearance, Q as resolveAgentWorkbenchShellLayout } from '../../details-model-f46aa2190c52.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AgentWorkbenchComposerViewModel, AgentSessionPermissionProfile, AgentWorkbenchQuickStartViewModel, AgentSessionViewModel, AgentSessionEvent } from '@inf-monkeys-tech/monkeys';
 export { AgentWorkbenchQuickStartCategory, AgentWorkbenchQuickStartIcon, AgentWorkbenchQuickStartSection, AgentWorkbenchQuickStartTemplate, AgentWorkbenchQuickStartViewModel } from '@inf-monkeys-tech/monkeys';

package/dist/components/agent-workbench/index.d.ts

@@ -1,5 +1,5 @@
-import { L as AgentWorkbenchAppearanceOptions, d as AgentWorkbenchApprovalIntent, e as AgentWorkbenchArtifactIntent } from '../../details-model-06b1a44badc2.js';
-export { A as AgentWorkbenchActivity, a as AgentWorkbenchActivityClassNames, b as AgentWorkbenchActivityModel, c as AgentWorkbenchActivityProps, M as AgentWorkbenchAppearance, N as AgentWorkbenchAppearanceProvider, O as AgentWorkbenchAppearanceProviderProps, P as AgentWorkbenchApproval, Q as AgentWorkbenchApprovalData, R as AgentWorkbenchApprovalProps, S as AgentWorkbenchDensity, f as AgentWorkbenchDetailsIntent, g as AgentWorkbenchDetailsModel, h as AgentWorkbenchDetailsState, i as AgentWorkbenchDetailsTab, j as AgentWorkbenchEventOf, T as AgentWorkbenchExploreCardMedia, U as AgentWorkbenchExploreCardMediaProps, k as AgentWorkbenchExploreGroup, l as AgentWorkbenchExploreItem, V as AgentWorkbenchExploreMediaTreatment, W as AgentWorkbenchExploreMediaVariant, m as AgentWorkbenchExploreSidebar, n as AgentWorkbenchExploreSidebarIntent, o as AgentWorkbenchExploreSidebarLabels, p as AgentWorkbenchExploreSidebarProps, q as AgentWorkbenchShell, r as AgentWorkbenchShellClassNames, s as AgentWorkbenchShellProps, t as AgentWorkbenchSidebar, u as AgentWorkbenchSidebarClassNames, v as AgentWorkbenchSidebarContainer, w as AgentWorkbenchSidebarContainerBodyProps, x as AgentWorkbenchSidebarContainerClassNames, y as AgentWorkbenchSidebarContainerProps, z as AgentWorkbenchSidebarIntent, B as AgentWorkbenchSidebarProps, X as AgentWorkbenchSurface, Y as AgentWorkbenchSurfaceLevel, Z as AgentWorkbenchSurfaceProps, C as AgentWorkbenchTaskDetails, D as AgentWorkbenchTaskDetailsClassNames, E as AgentWorkbenchTaskDetailsProps, F as AgentWorkbenchTerminalModel, G as AgentWorkbenchTool, H as AgentWorkbenchToolClassNames, I as AgentWorkbenchToolProps, _ as AgentWorkbenchVariant, J as createAgentWorkbenchActivityModel, K as createAgentWorkbenchDetailsModel, $ as resolveAgentWorkbenchAppearance } from '../../details-model-06b1a44badc2.js';
+import { R as AgentWorkbenchAppearanceOptions, e as AgentWorkbenchApprovalIntent, f as AgentWorkbenchArtifactIntent } from '../../details-model-f46aa2190c52.js';
+export { A as AGENT_WORKBENCH_SHELL_BREAKPOINTS, a as AgentWorkbenchActivity, b as AgentWorkbenchActivityClassNames, c as AgentWorkbenchActivityModel, d as AgentWorkbenchActivityProps, S as AgentWorkbenchAppearance, T as AgentWorkbenchAppearanceProvider, U as AgentWorkbenchAppearanceProviderProps, V as AgentWorkbenchApproval, W as AgentWorkbenchApprovalData, X as AgentWorkbenchApprovalProps, Y as AgentWorkbenchDensity, g as AgentWorkbenchDetailsIntent, h as AgentWorkbenchDetailsModel, i as AgentWorkbenchDetailsState, j as AgentWorkbenchDetailsTab, k as AgentWorkbenchEventOf, Z as AgentWorkbenchExploreCardMedia, _ as AgentWorkbenchExploreCardMediaProps, l as AgentWorkbenchExploreGroup, m as AgentWorkbenchExploreItem, $ as AgentWorkbenchExploreMediaTreatment, a0 as AgentWorkbenchExploreMediaVariant, n as AgentWorkbenchExploreSidebar, o as AgentWorkbenchExploreSidebarIntent, p as AgentWorkbenchExploreSidebarLabels, q as AgentWorkbenchExploreSidebarProps, r as AgentWorkbenchShell, s as AgentWorkbenchShellBreakpoints, t as AgentWorkbenchShellClassNames, u as AgentWorkbenchShellLabels, v as AgentWorkbenchShellLayout, w as AgentWorkbenchShellMeasurement, x as AgentWorkbenchShellProps, y as AgentWorkbenchSidebar, z as AgentWorkbenchSidebarClassNames, B as AgentWorkbenchSidebarContainer, C as AgentWorkbenchSidebarContainerBodyProps, D as AgentWorkbenchSidebarContainerClassNames, E as AgentWorkbenchSidebarContainerProps, F as AgentWorkbenchSidebarIntent, G as AgentWorkbenchSidebarProps, a1 as AgentWorkbenchSurface, a2 as AgentWorkbenchSurfaceLevel, a3 as AgentWorkbenchSurfaceProps, H as AgentWorkbenchTaskDetails, I as AgentWorkbenchTaskDetailsClassNames, J as AgentWorkbenchTaskDetailsProps, K as AgentWorkbenchTerminalModel, L as AgentWorkbenchTool, M as AgentWorkbenchToolClassNames, N as AgentWorkbenchToolProps, a4 as AgentWorkbenchVariant, O as createAgentWorkbenchActivityModel, P as createAgentWorkbenchDetailsModel, a5 as resolveAgentWorkbenchAppearance, Q as resolveAgentWorkbenchShellLayout } from '../../details-model-f46aa2190c52.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AgentWorkbenchComposerViewModel, AgentSessionPermissionProfile, AgentWorkbenchQuickStartViewModel, AgentSessionViewModel, AgentSessionEvent } from '@inf-monkeys-tech/monkeys';
 export { AgentWorkbenchQuickStartCategory, AgentWorkbenchQuickStartIcon, AgentWorkbenchQuickStartSection, AgentWorkbenchQuickStartTemplate, AgentWorkbenchQuickStartViewModel } from '@inf-monkeys-tech/monkeys';

package/dist/components/agent-workbench/index.js

@@ -15,6 +15,7 @@ var TabsPrimitive = require('@radix-ui/react-tabs');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
 var SelectPrimitive = require('@radix-ui/react-select');
+var DialogPrimitive = require('@radix-ui/react-dialog');
 var monkeys = require('@inf-monkeys-tech/monkeys');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var core = require('@dnd-kit/core');
@@ -49,6 +50,7 @@ var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive)
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 
 // src/components/agent-workbench/appearance.tsx
@@ -1066,6 +1068,53 @@ var SelectSeparator = React5__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 SelectSeparator.displayName = "SelectSeparator";
+var Sheet = DialogPrimitive__namespace.Root;
+var SheetPortal = DialogPrimitive__namespace.Portal;
+var SheetOverlay = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: cn(
+      "theme-overlay-backdrop fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+SheetOverlay.displayName = "SheetOverlay";
+var sideClassNames = {
+  top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+  right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+  bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+  left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm"
+};
+var SheetContent = React5__namespace.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(
+        "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+        sideClassNames[side],
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+        ] }),
+        children
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = "SheetContent";
+var SheetTitle = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold text-foreground", className), ...props }));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+SheetDescription.displayName = "SheetDescription";
 function ComposerSelect({
   value,
   label,
@@ -4411,17 +4460,72 @@ var AgentWorkbenchThreadShell = React5.forwardRef(function AgentWorkbenchThreadS
     }
   );
 });
+var AGENT_WORKBENCH_SHELL_BREAKPOINTS = Object.freeze({
+  mobile: 768,
+  drawer: 1200,
+  compact: 1440,
+  lowHeight: 768
+});
+function resolveAgentWorkbenchShellLayout(width, breakpoints = AGENT_WORKBENCH_SHELL_BREAKPOINTS) {
+  if (width < breakpoints.mobile) return "mobile";
+  if (width < breakpoints.drawer) return "drawer";
+  if (width < breakpoints.compact) return "compact";
+  return "wide";
+}
+var OVERLAY_EVENT = "monkeys-agent-workbench-overlay-open";
 function cssSize(value) {
   return typeof value === "number" ? `${value}px` : value;
 }
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function initialMeasuredSize() {
+  if (typeof window === "undefined") return { width: 1440, height: 900 };
+  return {
+    width: window.visualViewport?.width ?? window.innerWidth,
+    height: window.visualViewport?.height ?? window.innerHeight
+  };
+}
+function readStoredWidths(storageKey) {
+  if (!storageKey || typeof window === "undefined") return {};
+  try {
+    const value = JSON.parse(window.localStorage.getItem(storageKey) ?? "{}");
+    return typeof value === "object" && value !== null ? value : {};
+  } catch {
+    return {};
+  }
+}
+function writeStoredWidths(storageKey, widths) {
+  if (!storageKey || typeof window === "undefined") return;
+  window.localStorage.setItem(storageKey, JSON.stringify(widths));
+}
 function AgentWorkbenchShell({
   sidebar,
   children,
   details,
   sidebarOpen = true,
   detailsOpen = true,
+  onDetailsOpenChange,
   sidebarWidth = 280,
   detailsWidth = 360,
+  sidebarMinWidth = 240,
+  sidebarMaxWidth = 400,
+  detailsMinWidth = 320,
+  detailsMaxWidth = 720,
+  mainMinWidth = 600,
+  responsive = false,
+  responsiveMeasurement = "container",
+  responsiveWidth,
+  responsiveHeight,
+  breakpoints = AGENT_WORKBENCH_SHELL_BREAKPOINTS,
+  onLayoutChange,
+  showResponsiveControls = true,
+  overlayGroupId,
+  resizable = false,
+  widthStorageKey,
+  onSidebarWidthChange,
+  onDetailsWidthChange,
+  labels,
   variant,
   density,
   className,
@@ -4430,33 +4534,270 @@ function AgentWorkbenchShell({
   ...rootProps
 }) {
   const appearance = useAgentWorkbenchAppearance({ variant, density });
+  const rootRef = React5.useRef(null);
+  const sidebarReturnFocusRef = React5.useRef(null);
+  const detailsReturnFocusRef = React5.useRef(null);
+  const shellId = React5.useId();
+  const [measuredSize, setMeasuredSize] = React5.useState(initialMeasuredSize);
+  const storedWidths = React5.useMemo(
+    () => readStoredWidths(widthStorageKey),
+    [widthStorageKey]
+  );
+  const [sidebarPixelWidth, setSidebarPixelWidth] = React5.useState(
+    () => typeof sidebarWidth === "number" ? storedWidths.sidebar ?? sidebarWidth : 280
+  );
+  const [detailsPixelWidth, setDetailsPixelWidth] = React5.useState(
+    () => typeof detailsWidth === "number" ? storedWidths.details ?? detailsWidth : 360
+  );
+  const [sidebarOverlayOpen, setSidebarOverlayOpen] = React5.useState(false);
+  const [detailsOverlayOpen, setDetailsOverlayOpen] = React5.useState(false);
+  const rememberReturnFocus = React5.useCallback(
+    (region, candidate = document.activeElement) => {
+      if (!(candidate instanceof HTMLElement) || candidate === document.body || candidate === document.documentElement) {
+        return;
+      }
+      const targetRef = region === "sidebar" ? sidebarReturnFocusRef : detailsReturnFocusRef;
+      targetRef.current = candidate;
+    },
+    []
+  );
+  const restoreReturnFocus = React5.useCallback((region) => {
+    const targetRef = region === "sidebar" ? sidebarReturnFocusRef : detailsReturnFocusRef;
+    const target = targetRef.current;
+    targetRef.current = null;
+    if (!target?.isConnected) return;
+    window.requestAnimationFrame(() => {
+      if (target.isConnected) target.focus();
+    });
+  }, []);
+  React5.useEffect(() => {
+    if (typeof sidebarWidth === "number") {
+      setSidebarPixelWidth(storedWidths.sidebar ?? sidebarWidth);
+    }
+  }, [sidebarWidth, storedWidths.sidebar]);
+  React5.useEffect(() => {
+    if (typeof detailsWidth === "number") {
+      setDetailsPixelWidth(storedWidths.details ?? detailsWidth);
+    }
+  }, [detailsWidth, storedWidths.details]);
+  React5.useEffect(() => {
+    if (!responsive) return void 0;
+    const updateViewport = () => {
+      const viewport = initialMeasuredSize();
+      setMeasuredSize({
+        width: responsiveWidth ?? viewport.width,
+        height: responsiveHeight ?? viewport.height
+      });
+    };
+    if (responsiveMeasurement === "viewport" || responsiveWidth !== void 0 || responsiveHeight !== void 0) {
+      updateViewport();
+      if (responsiveWidth !== void 0 && responsiveHeight !== void 0) {
+        return void 0;
+      }
+      window.addEventListener("resize", updateViewport);
+      window.visualViewport?.addEventListener("resize", updateViewport);
+      return () => {
+        window.removeEventListener("resize", updateViewport);
+        window.visualViewport?.removeEventListener("resize", updateViewport);
+      };
+    }
+    const root = rootRef.current;
+    if (!root) return void 0;
+    const updateContainer = () => {
+      const rect = root.getBoundingClientRect();
+      setMeasuredSize({ width: rect.width, height: rect.height });
+    };
+    updateContainer();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", updateContainer);
+      return () => window.removeEventListener("resize", updateContainer);
+    }
+    const observer = new ResizeObserver(updateContainer);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [responsive, responsiveHeight, responsiveMeasurement, responsiveWidth]);
+  const layout = responsive ? resolveAgentWorkbenchShellLayout(
+    responsiveWidth ?? measuredSize.width,
+    breakpoints
+  ) : "wide";
+  const lowHeight = responsive && (responsiveHeight ?? measuredSize.height) <= breakpoints.lowHeight;
+  React5.useEffect(() => onLayoutChange?.(layout), [layout, onLayoutChange]);
   const hasSidebar = sidebar !== void 0 && sidebarOpen;
   const hasDetails = details !== void 0 && detailsOpen;
+  const inlineSidebar = hasSidebar && (layout === "wide" || layout === "compact");
+  const inlineDetails = hasDetails && layout === "wide";
+  const resolvedSidebarMax = Math.max(
+    sidebarMinWidth,
+    Math.min(
+      sidebarMaxWidth,
+      layout === "compact" ? 320 : sidebarMaxWidth,
+      measuredSize.width - (inlineDetails ? detailsPixelWidth : 0) - mainMinWidth
+    )
+  );
+  const resolvedDetailsMax = Math.max(
+    detailsMinWidth,
+    Math.min(
+      detailsMaxWidth,
+      measuredSize.width - (inlineSidebar ? sidebarPixelWidth : 0) - mainMinWidth
+    )
+  );
+  const resolvedSidebarWidth = typeof sidebarWidth === "number" ? clamp(sidebarPixelWidth, sidebarMinWidth, resolvedSidebarMax) : sidebarWidth;
+  const resolvedDetailsWidth = typeof detailsWidth === "number" ? clamp(detailsPixelWidth, detailsMinWidth, resolvedDetailsMax) : detailsWidth;
+  const requestOverlay = React5.useCallback(
+    (region) => {
+      if (!overlayGroupId || typeof window === "undefined") return;
+      window.dispatchEvent(
+        new CustomEvent(OVERLAY_EVENT, {
+          detail: { groupId: overlayGroupId, ownerId: shellId, region }
+        })
+      );
+    },
+    [overlayGroupId, shellId]
+  );
+  React5.useEffect(() => {
+    if (!overlayGroupId || typeof window === "undefined") return void 0;
+    const handleOverlayOpen = (event) => {
+      const detail = event.detail;
+      if (detail?.groupId !== overlayGroupId || detail?.ownerId === shellId)
+        return;
+      setSidebarOverlayOpen(false);
+      setDetailsOverlayOpen((open) => {
+        if (open) onDetailsOpenChange?.(false);
+        return false;
+      });
+    };
+    window.addEventListener(OVERLAY_EVENT, handleOverlayOpen);
+    return () => window.removeEventListener(OVERLAY_EVENT, handleOverlayOpen);
+  }, [onDetailsOpenChange, overlayGroupId, shellId]);
+  React5.useEffect(() => {
+    if (inlineSidebar || !hasSidebar) setSidebarOverlayOpen(false);
+  }, [hasSidebar, inlineSidebar]);
+  React5.useEffect(() => {
+    if (inlineDetails || !hasDetails) {
+      setDetailsOverlayOpen(false);
+      return;
+    }
+    rememberReturnFocus("details");
+    requestOverlay("details");
+    setDetailsOverlayOpen(true);
+  }, [hasDetails, inlineDetails, rememberReturnFocus, requestOverlay]);
+  const persistWidths = React5.useCallback(
+    (sidebarValue, detailsValue) => {
+      writeStoredWidths(widthStorageKey, {
+        sidebar: sidebarValue,
+        details: detailsValue
+      });
+    },
+    [widthStorageKey]
+  );
+  const updateRegionWidth = React5.useCallback(
+    (region, value) => {
+      if (region === "sidebar") {
+        const next2 = clamp(value, sidebarMinWidth, resolvedSidebarMax);
+        setSidebarPixelWidth(next2);
+        onSidebarWidthChange?.(next2);
+        return next2;
+      }
+      const next = clamp(value, detailsMinWidth, resolvedDetailsMax);
+      setDetailsPixelWidth(next);
+      onDetailsWidthChange?.(next);
+      return next;
+    },
+    [
+      detailsMinWidth,
+      onDetailsWidthChange,
+      onSidebarWidthChange,
+      resolvedDetailsMax,
+      resolvedSidebarMax,
+      sidebarMinWidth
+    ]
+  );
+  const beginResize = React5.useCallback(
+    (region, event) => {
+      if (!resizable || event.button !== 0) return;
+      event.preventDefault();
+      const startX = event.clientX;
+      const startWidth = region === "sidebar" ? sidebarPixelWidth : detailsPixelWidth;
+      let latestWidth = startWidth;
+      const previousCursor = document.body.style.cursor;
+      const previousUserSelect = document.body.style.userSelect;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      const handleMove = (pointerEvent) => {
+        const delta = pointerEvent.clientX - startX;
+        latestWidth = updateRegionWidth(
+          region,
+          startWidth + (region === "sidebar" ? delta : -delta)
+        );
+      };
+      const handleUp = () => {
+        document.body.style.cursor = previousCursor;
+        document.body.style.userSelect = previousUserSelect;
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        persistWidths(
+          region === "sidebar" ? latestWidth : sidebarPixelWidth,
+          region === "details" ? latestWidth : detailsPixelWidth
+        );
+      };
+      window.addEventListener("pointermove", handleMove);
+      window.addEventListener("pointerup", handleUp, { once: true });
+    },
+    [
+      detailsPixelWidth,
+      persistWidths,
+      resizable,
+      sidebarPixelWidth,
+      updateRegionWidth
+    ]
+  );
+  const resizeWithKeyboard = React5.useCallback(
+    (region, direction) => {
+      const current = region === "sidebar" ? sidebarPixelWidth : detailsPixelWidth;
+      const next = updateRegionWidth(region, current + direction * 16);
+      persistWidths(
+        region === "sidebar" ? next : sidebarPixelWidth,
+        region === "details" ? next : detailsPixelWidth
+      );
+    },
+    [detailsPixelWidth, persistWidths, sidebarPixelWidth, updateRegionWidth]
+  );
   const shellStyle = {
-    "--agent-workbench-sidebar-width": hasSidebar ? cssSize(sidebarWidth) : "0px",
-    "--agent-workbench-details-width": hasDetails ? cssSize(detailsWidth) : "0px",
-    gridTemplateColumns: hasSidebar && hasDetails ? "var(--agent-workbench-sidebar-width) minmax(0, 1fr) var(--agent-workbench-details-width)" : hasSidebar ? "var(--agent-workbench-sidebar-width) minmax(0, 1fr)" : hasDetails ? "minmax(0, 1fr) var(--agent-workbench-details-width)" : "minmax(0, 1fr)",
+    "--agent-workbench-sidebar-width": inlineSidebar ? cssSize(resolvedSidebarWidth) : "0px",
+    "--agent-workbench-details-width": inlineDetails ? cssSize(resolvedDetailsWidth) : "0px",
+    gridTemplateColumns: inlineSidebar && inlineDetails ? "var(--agent-workbench-sidebar-width) minmax(0, 1fr) var(--agent-workbench-details-width)" : inlineSidebar ? "var(--agent-workbench-sidebar-width) minmax(0, 1fr)" : inlineDetails ? "minmax(0, 1fr) var(--agent-workbench-details-width)" : "minmax(0, 1fr)",
     ...style
   };
+  const sidebarOverlay = hasSidebar && !inlineSidebar;
+  const detailsOverlay = hasDetails && !inlineDetails;
+  const showControls = responsive && showResponsiveControls && (sidebarOverlay || detailsOverlay);
+  const mobilePanel = layout === "mobile";
+  const controlSize = mobilePanel ? "size-11" : "size-9";
+  const panelCloseClass = mobilePanel ? "[&>button]:flex [&>button]:size-11 [&>button]:items-center [&>button]:justify-center" : "";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ...rootProps,
+      ref: rootRef,
       role: rootProps.role ?? "region",
       "aria-label": rootProps["aria-label"] ?? "Agent workbench",
       "data-agent-workbench-shell": "true",
       "data-agent-workbench-variant": appearance.variant,
       "data-agent-workbench-density": appearance.density,
+      "data-agent-workbench-layout": layout,
+      "data-agent-workbench-low-height": lowHeight ? "true" : "false",
       "data-sidebar-open": hasSidebar ? "true" : "false",
+      "data-sidebar-presentation": inlineSidebar ? "inline" : sidebarOverlay ? "overlay" : "hidden",
       "data-details-open": hasDetails ? "true" : "false",
+      "data-details-presentation": inlineDetails ? "inline" : detailsOverlay ? "overlay" : "hidden",
       className: cn2(
-        "grid size-full min-h-0 min-w-0 overflow-hidden bg-background text-foreground",
+        "relative grid size-full min-h-0 min-w-0 overflow-hidden bg-background text-foreground",
         classNames?.root,
         className
       ),
       style: shellStyle,
       children: [
-        hasSidebar ? /* @__PURE__ */ jsxRuntime.jsx(
+        inlineSidebar ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-agent-workbench-region": "sidebar",
@@ -4467,18 +4808,69 @@ function AgentWorkbenchShell({
             children: sidebar
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             "data-agent-workbench-region": "main",
             className: cn2(
-              "min-h-0 min-w-0 overflow-hidden bg-background",
+              "flex min-h-0 min-w-0 flex-col overflow-hidden bg-background",
               classNames?.main
             ),
-            children
+            children: [
+              showControls ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-agent-workbench-responsive-controls": "true",
+                  className: cn2(
+                    "flex min-h-11 shrink-0 items-center gap-1 border-b border-border bg-background px-2",
+                    lowHeight && "min-h-10",
+                    classNames?.controls
+                  ),
+                  children: [
+                    sidebarOverlay ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: cn2(
+                          "inline-flex items-center justify-center rounded-[var(--radius)] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                          controlSize
+                        ),
+                        "aria-label": labels?.openSidebar ?? "Open navigation",
+                        "aria-expanded": sidebarOverlayOpen,
+                        onClick: (event) => {
+                          rememberReturnFocus("sidebar", event.currentTarget);
+                          requestOverlay("sidebar");
+                          setSidebarOverlayOpen(true);
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { className: "size-5", "aria-hidden": "true" })
+                      }
+                    ) : null,
+                    detailsOverlay && details ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: cn2(
+                          "ml-auto inline-flex items-center justify-center rounded-[var(--radius)] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                          controlSize
+                        ),
+                        "aria-label": labels?.openDetails ?? "Open details",
+                        "aria-expanded": detailsOverlayOpen,
+                        onClick: (event) => {
+                          rememberReturnFocus("details", event.currentTarget);
+                          requestOverlay("details");
+                          setDetailsOverlayOpen(true);
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRight, { className: "size-5", "aria-hidden": "true" })
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 min-w-0 flex-1 overflow-hidden", children })
+            ]
           }
         ),
-        hasDetails ? /* @__PURE__ */ jsxRuntime.jsx(
+        inlineDetails ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-agent-workbench-region": "details",
@@ -4488,6 +4880,106 @@ function AgentWorkbenchShell({
             ),
             children: details
           }
+        ) : null,
+        resizable && inlineSidebar && typeof sidebarWidth === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": labels?.resizeSidebar ?? "Resize navigation",
+            "aria-valuemin": sidebarMinWidth,
+            "aria-valuemax": resolvedSidebarMax,
+            "aria-valuenow": Number(resolvedSidebarWidth),
+            className: cn2(
+              "absolute inset-y-0 z-20 w-2 -translate-x-1/2 cursor-col-resize touch-none bg-transparent outline-none after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-border after:transition-colors hover:after:bg-primary focus-visible:after:w-0.5 focus-visible:after:bg-ring",
+              classNames?.resizeHandle
+            ),
+            style: { left: "var(--agent-workbench-sidebar-width)" },
+            onPointerDown: (event) => beginResize("sidebar", event),
+            onKeyDown: (event) => {
+              if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+              event.preventDefault();
+              resizeWithKeyboard("sidebar", event.key === "ArrowRight" ? 1 : -1);
+            }
+          }
+        ) : null,
+        resizable && inlineDetails && typeof detailsWidth === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": labels?.resizeDetails ?? "Resize details",
+            "aria-valuemin": detailsMinWidth,
+            "aria-valuemax": resolvedDetailsMax,
+            "aria-valuenow": Number(resolvedDetailsWidth),
+            className: cn2(
+              "absolute inset-y-0 right-[var(--agent-workbench-details-width)] z-20 w-2 translate-x-1/2 cursor-col-resize touch-none bg-transparent outline-none after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-border after:transition-colors hover:after:bg-primary focus-visible:after:w-0.5 focus-visible:after:bg-ring",
+              classNames?.resizeHandle
+            ),
+            onPointerDown: (event) => beginResize("details", event),
+            onKeyDown: (event) => {
+              if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+              event.preventDefault();
+              resizeWithKeyboard("details", event.key === "ArrowLeft" ? 1 : -1);
+            }
+          }
+        ) : null,
+        sidebarOverlay ? /* @__PURE__ */ jsxRuntime.jsx(
+          Sheet,
+          {
+            open: sidebarOverlayOpen,
+            onOpenChange: (open) => {
+              setSidebarOverlayOpen(open);
+              if (!open) restoreReturnFocus("sidebar");
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              SheetContent,
+              {
+                side: "left",
+                className: cn2(
+                  "flex h-dvh flex-col gap-0 overflow-hidden bg-card p-0 text-card-foreground",
+                  mobilePanel ? "inset-0 size-dvw !max-w-none border-0" : "w-[min(360px,90vw)] !max-w-none",
+                  panelCloseClass,
+                  classNames?.sidebarOverlay
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: labels?.sidebar ?? "Navigation" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: sidebar })
+                ]
+              }
+            )
+          }
+        ) : null,
+        detailsOverlay ? /* @__PURE__ */ jsxRuntime.jsx(
+          Sheet,
+          {
+            open: detailsOverlayOpen,
+            onOpenChange: (open) => {
+              setDetailsOverlayOpen(open);
+              if (!open) {
+                restoreReturnFocus("details");
+                onDetailsOpenChange?.(false);
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              SheetContent,
+              {
+                side: "right",
+                className: cn2(
+                  "flex h-dvh flex-col gap-0 overflow-hidden bg-card p-0 text-card-foreground",
+                  mobilePanel ? "inset-0 size-dvw !max-w-none border-0" : "w-[min(520px,92vw)] !max-w-none",
+                  panelCloseClass,
+                  classNames?.detailsOverlay
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: labels?.details ?? "Details" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: details })
+                ]
+              }
+            )
+          }
         ) : null
       ]
     }
@@ -5136,6 +5628,7 @@ function AgentWorkbenchArtifactWorkspace({
   );
 }
 
+exports.AGENT_WORKBENCH_SHELL_BREAKPOINTS = AGENT_WORKBENCH_SHELL_BREAKPOINTS;
 exports.AgentWorkbenchAction = AgentWorkbenchAction;
 exports.AgentWorkbenchActivity = AgentWorkbenchActivity;
 exports.AgentWorkbenchAppearanceProvider = AgentWorkbenchAppearanceProvider;
@@ -5162,5 +5655,6 @@ exports.AgentWorkbenchTool = AgentWorkbenchTool;
 exports.createAgentWorkbenchActivityModel = createAgentWorkbenchActivityModel;
 exports.createAgentWorkbenchDetailsModel = createAgentWorkbenchDetailsModel;
 exports.resolveAgentWorkbenchAppearance = resolveAgentWorkbenchAppearance;
+exports.resolveAgentWorkbenchShellLayout = resolveAgentWorkbenchShellLayout;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map