react-os-shell 3.9.0 → 3.10.1

package/dist/{chunk-VGTEM5RZ.js → chunk-YG45DAUT.js}

@@ -5,6 +5,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 var clamp = (n, lo, hi) => Math.min(Math.max(n, lo), hi);
 function SidebarLayout({
   sidebar,
+  sidebarTop,
+  sidebarBottom,
   children,
   side = "left",
   storageKey,
@@ -61,8 +63,13 @@ function SidebarLayout({
     window.removeEventListener("pointerup", onUp);
   }, [onMove, onUp]);
   const edge = sideRight ? "left-0" : "right-0";
+  const hasSlots = sidebarTop != null || sidebarBottom != null;
   const sidebarPane = /* @__PURE__ */ jsxs("div", { className: "relative flex h-full shrink-0 flex-col", style: { width }, children: [
-    /* @__PURE__ */ jsx("div", { className: `flex h-full flex-col overflow-y-auto ${sidebarClassName}`, children: sidebar }),
+    /* @__PURE__ */ jsxs("div", { className: `flex h-full flex-col ${hasSlots ? "overflow-hidden" : "overflow-y-auto"} ${sidebarClassName}`, children: [
+      sidebarTop != null && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-2 pt-3 pb-2", children: sidebarTop }),
+      hasSlots ? /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: sidebar }) : sidebar,
+      sidebarBottom != null && /* @__PURE__ */ jsx("div", { className: "mt-auto shrink-0 border-t border-gray-200 px-2 py-3", children: sidebarBottom })
+    ] }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -85,5 +92,5 @@ function SidebarLayout({
 }
 
 export { SidebarLayout };
-//# sourceMappingURL=chunk-VGTEM5RZ.js.map
-//# sourceMappingURL=chunk-VGTEM5RZ.js.map
+//# sourceMappingURL=chunk-YG45DAUT.js.map
+//# sourceMappingURL=chunk-YG45DAUT.js.map

package/dist/chunk-YG45DAUT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell/SidebarLayout.tsx"],"names":[],"mappings":"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","file":"chunk-YG45DAUT.js","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ReactNode, PointerEvent as ReactPointerEvent } from 'react';\n\n/**\n * Two-pane layout with a drag-to-resize sidebar (left or right).\n *\n * Renders flush (`h-full w-full`) — pair it with a `flushBody` window so the\n * sidebar runs from just under the title bar to the very bottom with no\n * surrounding padding. The user can drag the sidebar's inner edge to resize\n * it; pass `storageKey` to persist that width across reopens, or double-click\n * the handle to reset to `defaultWidth`. Set `side=\"right\"` to put the sidebar\n * on the right (e.g. a detail-panel layout).\n *\n * @example\n * <SidebarLayout sidebar={<MyNav />} storageKey=\"todo.sidebarWidth\">\n *   <MyContent />\n * </SidebarLayout>\n */\nexport interface SidebarLayoutProps {\n  /** Content of the left sidebar pane. When `sidebarTop`/`sidebarBottom` are\n   *  set this is the scrolling middle region (the filter nav); otherwise it is\n   *  the whole pane. */\n  sidebar: ReactNode;\n  /** Optional node pinned at the TOP of the sidebar, above `sidebar`, in a\n   *  padded non-scrolling region (e.g. a primary \"New X\" `SidebarActionButton`).\n   *  The list-window convention: primary create action lives here. */\n  sidebarTop?: ReactNode;\n  /** Optional node pinned at the BOTTOM of the sidebar, below `sidebar`, in a\n   *  padded, top-bordered non-scrolling region (e.g. an \"Export CSV\" button).\n   *  The middle `sidebar` grows to fill, so this stays flush to the bottom. */\n  sidebarBottom?: ReactNode;\n  /** Content of the main pane (opposite the sidebar). */\n  children: ReactNode;\n  /** Which side the sidebar sits on. Default `'left'`. When `'right'`, the\n   *  sidebar renders on the right with the resize handle on its left edge. */\n  side?: 'left' | 'right';\n  /** localStorage key to persist the sidebar width across reopens. When set,\n   *  the last dragged width is restored on mount. Omit for session-only width. */\n  storageKey?: string;\n  /** Initial sidebar width in px (used when nothing is persisted). Default 256. */\n  defaultWidth?: number;\n  /** Minimum sidebar width in px. Default 180. */\n  minWidth?: number;\n  /** Maximum sidebar width in px. Default 480. */\n  maxWidth?: number;\n  /** Extra classes for the outer flex row. */\n  className?: string;\n  /** Classes for the sidebar pane (background, border, …). The pane is a flex\n   *  column that scrolls its own overflow. Defaults to a light-grey,\n   *  right-bordered sidebar. */\n  sidebarClassName?: string;\n  /** Classes for the main content pane. Defaults to a white background. */\n  contentClassName?: string;\n}\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi);\n\nexport default function SidebarLayout({\n  sidebar,\n  sidebarTop,\n  sidebarBottom,\n  children,\n  side = 'left',\n  storageKey,\n  defaultWidth = 256,\n  minWidth = 180,\n  maxWidth = 480,\n  className = '',\n  sidebarClassName = side === 'right'\n    ? 'border-l border-gray-200 bg-gray-50'\n    : 'border-r border-gray-200 bg-gray-50',\n  contentClassName = 'bg-white',\n}: SidebarLayoutProps) {\n  const sideRight = side === 'right';\n  const [width, setWidth] = useState<number>(() => {\n    if (storageKey && typeof window !== 'undefined') {\n      const saved = window.localStorage.getItem(storageKey);\n      const n = saved ? parseInt(saved, 10) : NaN;\n      if (!Number.isNaN(n)) return clamp(n, minWidth, maxWidth);\n    }\n    return clamp(defaultWidth, minWidth, maxWidth);\n  });\n\n  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);\n\n  const onMove = useCallback((e: PointerEvent) => {\n    const d = dragRef.current;\n    if (!d) return;\n    // Right-side sidebar grows as the handle is dragged left → invert the delta.\n    const delta = (e.clientX - d.startX) * (sideRight ? -1 : 1);\n    setWidth(clamp(d.startWidth + delta, minWidth, maxWidth));\n  }, [minWidth, maxWidth, sideRight]);\n\n  const onUp = useCallback(() => {\n    dragRef.current = null;\n    window.removeEventListener('pointermove', onMove);\n    window.removeEventListener('pointerup', onUp);\n    document.body.style.removeProperty('cursor');\n    document.body.style.removeProperty('user-select');\n  }, [onMove]);\n\n  const startDrag = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    dragRef.current = { startX: e.clientX, startWidth: width };\n    window.addEventListener('pointermove', onMove);\n    window.addEventListener('pointerup', onUp);\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n  }, [width, onMove, onUp]);\n\n  // Persist (debounced) once the width settles.\n  useEffect(() => {\n    if (!storageKey) return;\n    const id = window.setTimeout(() => {\n      try { window.localStorage.setItem(storageKey, String(Math.round(width))); } catch { /* ignore quota / privacy mode */ }\n    }, 200);\n    return () => window.clearTimeout(id);\n  }, [width, storageKey]);\n\n  // Drop listeners if we unmount mid-drag.\n  useEffect(() => () => {\n    window.removeEventListener('pointermove', onMove);\n    window.removeEventListener('pointerup', onUp);\n  }, [onMove, onUp]);\n\n  const edge = sideRight ? 'left-0' : 'right-0';\n  // With a top/bottom slot the pane becomes a 3-region flex column: a padded\n  // pinned header, the scrolling middle (`sidebar`, grows to fill), and a\n  // padded, top-bordered pinned footer. Without slots it renders exactly as\n  // before (the whole pane scrolls) so existing consumers are unaffected.\n  const hasSlots = sidebarTop != null || sidebarBottom != null;\n  const sidebarPane = (\n    <div className=\"relative flex h-full shrink-0 flex-col\" style={{ width }}>\n      <div className={`flex h-full flex-col ${hasSlots ? 'overflow-hidden' : 'overflow-y-auto'} ${sidebarClassName}`}>\n        {sidebarTop != null && (\n          <div className=\"shrink-0 px-2 pt-3 pb-2\">{sidebarTop}</div>\n        )}\n        {hasSlots ? (\n          <div className=\"min-h-0 flex-1 overflow-y-auto\">{sidebar}</div>\n        ) : (\n          sidebar\n        )}\n        {sidebarBottom != null && (\n          <div className=\"mt-auto shrink-0 border-t border-gray-200 px-2 py-3\">{sidebarBottom}</div>\n        )}\n      </div>\n      {/* Resize handle — pinned to the sidebar's inner edge, fixed while it scrolls. */}\n      <div\n        onPointerDown={startDrag}\n        onDoubleClick={() => setWidth(clamp(defaultWidth, minWidth, maxWidth))}\n        title=\"Drag to resize · double-click to reset\"\n        className={`group/resize absolute inset-y-0 ${edge} z-10 w-2 cursor-col-resize`}\n      >\n        <div className={`absolute inset-y-0 ${edge} w-px bg-transparent transition-colors group-hover/resize:bg-[var(--accent-500,#3b82f6)]`} />\n      </div>\n    </div>\n  );\n  const contentPane = (\n    <div className={`flex min-w-0 flex-1 flex-col ${contentClassName}`}>\n      {children}\n    </div>\n  );\n\n  return (\n    <div className={`flex h-full w-full overflow-hidden ${className}`}>\n      {sideRight ? (\n        <>{contentPane}{sidebarPane}</>\n      ) : (\n        <>{sidebarPane}{contentPane}</>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-SNIBFLLT.js → chunk-YPIDICFR.js}

@@ -1,5 +1,5 @@
-import { AboutApp } from './chunk-RTHUQTNU.js';
-import { WindowTitle } from './chunk-JXW7H3DU.js';
+import { AboutApp } from './chunk-SRFLPGGO.js';
+import { WindowTitle } from './chunk-HLWEKEKD.js';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -1308,5 +1308,5 @@ function Spreadsheet() {
 }
 
 export { EditableGrid, Spreadsheet, setSpreadsheetPreview };
-//# sourceMappingURL=chunk-SNIBFLLT.js.map
-//# sourceMappingURL=chunk-SNIBFLLT.js.map
+//# sourceMappingURL=chunk-YPIDICFR.js.map
+//# sourceMappingURL=chunk-YPIDICFR.js.map