react-os-shell 3.8.6 → 3.10.0

package/dist/chunk-VGTEM5RZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/shell/SidebarLayout.tsx"],"names":[],"mappings":"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","file":"chunk-VGTEM5RZ.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. */\n  sidebar: 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  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  const sidebarPane = (\n    <div className=\"relative flex h-full shrink-0 flex-col\" style={{ width }}>\n      <div className={`flex h-full flex-col overflow-y-auto ${sidebarClassName}`}>\n        {sidebar}\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"]}