react-os-shell 0.11.0 → 0.12.0

package/dist/index.d.ts

@@ -455,13 +455,14 @@ interface EditableGridProps {
 declare function EditableGrid({ columns, data, onChange, onColumnsChange, fixedRows, minRows, maxHeight, cellStyles, onFocusChange, onSelectionChange }: EditableGridProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Two-pane layout with a drag-to-resize left sidebar.
+ * Two-pane layout with a drag-to-resize sidebar (left or right).
  *
  * Renders flush (`h-full w-full`) — pair it with a `flushBody` window so the
  * sidebar runs from just under the title bar to the very bottom with no
- * surrounding padding. The user can drag the right edge of the sidebar to
- * resize it; pass `storageKey` to persist that width across reopens, or
- * double-click the handle to reset to `defaultWidth`.
+ * surrounding padding. The user can drag the sidebar's inner edge to resize
+ * it; pass `storageKey` to persist that width across reopens, or double-click
+ * the handle to reset to `defaultWidth`. Set `side="right"` to put the sidebar
+ * on the right (e.g. a detail-panel layout).
  *
  * @example
  * <SidebarLayout sidebar={<MyNav />} storageKey="todo.sidebarWidth">
@@ -471,8 +472,11 @@ declare function EditableGrid({ columns, data, onChange, onColumnsChange, fixedR
 interface SidebarLayoutProps {
     /** Content of the left sidebar pane. */
     sidebar: ReactNode;
-    /** Content of the main pane (right of the sidebar). */
+    /** Content of the main pane (opposite the sidebar). */
     children: ReactNode;
+    /** Which side the sidebar sits on. Default `'left'`. When `'right'`, the
+     *  sidebar renders on the right with the resize handle on its left edge. */
+    side?: 'left' | 'right';
     /** localStorage key to persist the sidebar width across reopens. When set,
      *  the last dragged width is restored on mount. Omit for session-only width. */
     storageKey?: string;
@@ -491,7 +495,7 @@ interface SidebarLayoutProps {
     /** Classes for the main content pane. Defaults to a white background. */
     contentClassName?: string;
 }
-declare function SidebarLayout({ sidebar, children, storageKey, defaultWidth, minWidth, maxWidth, className, sidebarClassName, contentClassName, }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
+declare function SidebarLayout({ sidebar, children, side, storageKey, defaultWidth, minWidth, maxWidth, className, sidebarClassName, contentClassName, }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
 
 /** Generic notification shape consumed by the shell. Consumer-specific
  * fields live on `extra` (or just on additional properties — TS structural

package/dist/index.js

@@ -564,14 +564,16 @@ var clamp = (n, lo, hi) => Math.min(Math.max(n, lo), hi);
 function SidebarLayout({
   sidebar,
   children,
+  side = "left",
   storageKey,
   defaultWidth = 256,
   minWidth = 180,
   maxWidth = 480,
   className = "",
-  sidebarClassName = "border-r border-gray-200 bg-gray-50",
+  sidebarClassName = side === "right" ? "border-l border-gray-200 bg-gray-50" : "border-r border-gray-200 bg-gray-50",
   contentClassName = "bg-white"
 }) {
+  const sideRight = side === "right";
   const [width, setWidth] = useState(() => {
     if (storageKey && typeof window !== "undefined") {
       const saved = window.localStorage.getItem(storageKey);
@@ -584,8 +586,9 @@ function SidebarLayout({
   const onMove = useCallback((e) => {
     const d = dragRef.current;
     if (!d) return;
-    setWidth(clamp(d.startWidth + (e.clientX - d.startX), minWidth, maxWidth));
-  }, [minWidth, maxWidth]);
+    const delta = (e.clientX - d.startX) * (sideRight ? -1 : 1);
+    setWidth(clamp(d.startWidth + delta, minWidth, maxWidth));
+  }, [minWidth, maxWidth, sideRight]);
   const onUp = useCallback(() => {
     dragRef.current = null;
     window.removeEventListener("pointermove", onMove);
@@ -615,22 +618,28 @@ function SidebarLayout({
     window.removeEventListener("pointermove", onMove);
     window.removeEventListener("pointerup", onUp);
   }, [onMove, onUp]);
-  return /* @__PURE__ */ jsxs("div", { className: `flex h-full w-full overflow-hidden ${className}`, children: [
-    /* @__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__ */ jsx(
-        "div",
-        {
-          onPointerDown: startDrag,
-          onDoubleClick: () => setWidth(clamp(defaultWidth, minWidth, maxWidth)),
-          title: "Drag to resize \xB7 double-click to reset",
-          className: "group absolute inset-y-0 right-0 z-10 w-2 cursor-col-resize",
-          children: /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 w-px bg-transparent transition-colors group-hover:bg-blue-400" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `flex min-w-0 flex-1 flex-col ${contentClassName}`, children })
+  const edge = sideRight ? "left-0" : "right-0";
+  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__ */ jsx(
+      "div",
+      {
+        onPointerDown: startDrag,
+        onDoubleClick: () => setWidth(clamp(defaultWidth, minWidth, maxWidth)),
+        title: "Drag to resize \xB7 double-click to reset",
+        className: `group absolute inset-y-0 ${edge} z-10 w-2 cursor-col-resize`,
+        children: /* @__PURE__ */ jsx("div", { className: `absolute inset-y-0 ${edge} w-px bg-transparent transition-colors group-hover:bg-blue-400` })
+      }
+    )
   ] });
+  const contentPane = /* @__PURE__ */ jsx("div", { className: `flex min-w-0 flex-1 flex-col ${contentClassName}`, children });
+  return /* @__PURE__ */ jsx("div", { className: `flex h-full w-full overflow-hidden ${className}`, children: sideRight ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    contentPane,
+    sidebarPane
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    sidebarPane,
+    contentPane
+  ] }) });
 }
 function timeAgo(dateStr) {
   const diff = Date.now() - new Date(dateStr).getTime();
@@ -1472,7 +1481,7 @@ function WidgetManager({ open, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "0.11.0" ;
+var VERSION = "0.12.0" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -5701,34 +5710,43 @@ function SystemPreferences({
   const initial = defaultSelected && sections2.some((s) => s.key === defaultSelected) ? defaultSelected : sections2[0]?.key ?? "";
   const [selected, setSelected] = useState(initial);
   const active = sections2.find((s) => s.key === selected) ?? sections2[0];
-  return /* @__PURE__ */ jsxs("div", { className: `flex h-full gap-4 px-4 py-3 min-h-0 ${className ?? ""}`.trim(), children: [
-    /* @__PURE__ */ jsx("aside", { className: "w-60 shrink-0 flex flex-col bg-white rounded-lg shadow overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-1", children: sections2.map((item) => {
-      const isActive = item.key === selected;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setSelected(item.key),
-          className: `w-full text-left px-3 py-2.5 text-sm transition-colors flex items-start gap-2.5 ${isActive ? "bg-blue-50 text-blue-700" : "hover:bg-gray-50 text-gray-700"}`,
-          children: [
-            item.icon && /* @__PURE__ */ jsx("span", { className: `mt-0.5 ${isActive ? "text-blue-600" : "text-gray-400"}`, children: item.icon }),
-            /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: `block ${isActive ? "font-semibold text-blue-700" : "font-medium text-gray-800"}`,
-                  children: item.label
-                }
-              ),
-              item.description && /* @__PURE__ */ jsx("span", { className: "block text-[11px] text-gray-500 mt-0.5", children: item.description })
-            ] })
-          ]
-        },
-        item.key
-      );
-    }) }) }),
-    /* @__PURE__ */ jsx("main", { className: "flex-1 min-w-0 flex flex-col min-h-0 overflow-auto pr-2", children: active?.render() })
-  ] });
+  return /* @__PURE__ */ jsx(
+    SidebarLayout,
+    {
+      storageKey: "shell.systemPreferences.sidebarWidth",
+      defaultWidth: 240,
+      minWidth: 200,
+      maxWidth: 360,
+      className,
+      sidebarClassName: "border-r border-gray-200 bg-gray-50",
+      sidebar: /* @__PURE__ */ jsx("nav", { className: "py-1.5", children: sections2.map((item) => {
+        const isActive = item.key === selected;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSelected(item.key),
+            className: `w-full text-left px-3 py-2.5 text-sm transition-colors flex items-start gap-2.5 ${isActive ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100 text-gray-700"}`,
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: `mt-0.5 ${isActive ? "text-blue-600" : "text-gray-400"}`, children: item.icon }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `block ${isActive ? "font-semibold text-blue-700" : "font-medium text-gray-800"}`,
+                    children: item.label
+                  }
+                ),
+                item.description && /* @__PURE__ */ jsx("span", { className: "block text-[11px] text-gray-500 mt-0.5", children: item.description })
+              ] })
+            ]
+          },
+          item.key
+        );
+      }) }),
+      children: /* @__PURE__ */ jsx("main", { className: "flex-1 min-w-0 overflow-auto p-4", children: active?.render() })
+    }
+  );
 }
 function useTableNav(items, onSelect, onToggle, onSelectAll, onSelectRange) {
   const [focusIdx, setFocusIdx] = useState(-1);