react-os-shell 0.3.22 → 0.4.0

package/dist/index.d.ts

@@ -735,7 +735,79 @@ interface StartMenuProps {
 }
 declare function StartMenu({ open, onClose, openPage, profile, user, onLogout, taskbarPosition, taskbarH, taskbarW, size, navSections, navIcons, sectionIcons, categories, }: StartMenuProps): react_jsx_runtime.JSX.Element | null;
 
-declare function Customization(): react_jsx_runtime.JSX.Element;
+/** Sections that can be omitted from the inline Customization page when the
+ *  consumer renders them elsewhere (e.g. as separate entries in SystemPreferences). */
+type CustomizationOmitSection = 'behavior' | 'desktop';
+interface CustomizationProps {
+    omit?: readonly CustomizationOmitSection[];
+}
+declare function Customization({ omit }?: CustomizationProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Standalone Behavior settings panel — window position, double-click,
+ * default window size, plus the two desktop-related toggles
+ * (Show version on desktop, Enter full screen mode automatically).
+ *
+ * Reads/writes shell prefs via `useShellPrefs()`. Suitable for use as a
+ * section in `SystemPreferences` or rendered standalone.
+ */
+declare function BehaviorPanel(): react_jsx_runtime.JSX.Element;
+
+/**
+ * Standalone Sounds settings panel — sound effects toggle + per-event
+ * sound-pack picker. Reads/writes the shell's `erp_sounds` and
+ * `erp_sound_config` localStorage keys. Plays a preview when a pack is
+ * picked. Suitable as a section in `SystemPreferences` or rendered
+ * standalone.
+ */
+declare function SoundsPanel(): react_jsx_runtime.JSX.Element;
+
+/** One section in the SystemPreferences sidebar. */
+interface SystemPreferencesSection {
+    /** Unique key, e.g. `'notifications'`, `'customization'`. */
+    key: string;
+    /** Sidebar label, e.g. "Notifications". */
+    label: string;
+    /** Short description shown under the label in the sidebar. */
+    description?: string;
+    /** Sidebar icon (any ReactNode — typically a 4×4 svg). */
+    icon?: ReactNode;
+    /** Body renderer. Receives no args; access shell prefs via your own hook. */
+    render: () => ReactNode;
+}
+interface SystemPreferencesProps {
+    /** Ordered sections — left sidebar lists these top-to-bottom, the matching
+     *  body renders on the right. The first section is selected by default
+     *  unless `defaultSelected` is supplied. */
+    sections: readonly SystemPreferencesSection[];
+    /** Key of the section to highlight on first render. Falls back to the first
+     *  section in `sections`. */
+    defaultSelected?: string;
+    /** Optional className applied to the outer flex container. */
+    className?: string;
+}
+/**
+ * Two-pane settings window: a fixed sidebar of sections on the left, the
+ * active section's body on the right. Consumers compose by passing
+ * `sections` — each entry has a `key`, `label`, optional `icon` and
+ * `description`, and a `render()` callback that returns the body JSX.
+ *
+ * The shell exposes ready-made panels (`Customization`, `BehaviorPanel`,
+ * `SoundsPanel`) that can be used as section bodies directly; portals
+ * add their own sections (notification subscriptions, delivery defaults,
+ * personal formatting prefs, etc.) alongside.
+ *
+ * Example:
+ * ```tsx
+ * <SystemPreferences sections={[
+ *   { key: 'notifications', label: 'Notifications', icon: <BellIcon />, render: () => <MyNotifications /> },
+ *   { key: 'customization', label: 'Customization', icon: <PaintBrushIcon />, render: () => <Customization omit={['behavior','desktop']} /> },
+ *   { key: 'behavior',      label: 'Behavior',      icon: <Cog6ToothIcon />,   render: () => <BehaviorPanel /> },
+ *   { key: 'sounds',        label: 'Sounds',        icon: <SpeakerWaveIcon />, render: () => <SoundsPanel /> },
+ * ]} />
+ * ```
+ */
+declare function SystemPreferences({ sections, defaultSelected, className, }: SystemPreferencesProps): react_jsx_runtime.JSX.Element;
 
 interface EntityListColumn {
     key: string;
@@ -1130,4 +1202,4 @@ declare function useNewHotkey(callback: () => void): void;
  */
 declare function useEditHotkey(callback: (() => void) | null): void;
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, type BugReport, type BugReportConfig, BugReportConfigProvider, BugReportDetail, type BugReportExtraField, type BugReportExtraSelectField, BugReportProvider, type BugReportSubmission, type BugReportSubmitPayload, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CancelButton, type CellStyle, type ChangelogEntry, type ColumnDef, ConfirmProvider, CopyButton, Customization, Desktop, type DesktopHostConfig, DesktopHostProvider, DocFavStar, ENTER, EditableGrid, type EditableGridProps, type EntityFetcher, EntityList, type EntityListColumn, type EntityListProps, GLASS_DIVIDER, GLASS_INPUT_BG, GlobalSearch, type GridColumn, Layout, type LayoutProps, ListFooter, type LoginPayload, MOD, type MailCapabilities, MailConnectModal, type MailUser, Modal, ModalActions, NotificationBell, type NotificationsConfig, type PaginatedResponse, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, type ReportType, ResizableTable, SHIFT, type SearchConfig, type SearchProvider, type SearchResult, type SemanticGroup, type ShellAuth, ShellAuthProvider, ShellEntityFetcherProvider, type ShellNotification, type ShellPrefsAdapter, ShellPrefsProvider, ShortcutHelp, type SortState, StartMenu, StatusBadge, StatusBadgeProvider, type StickyEntityRef, type StickyResolver, VERSION, WindowManagerProvider, WindowRegistry, WindowTitle, commitExposeHighlight, confirm, confirmDestructive, createWindowRegistry, exitExposeMode, formatDate, getActiveWindowRoute, getExposeHighlight, glassStyle, isMac, openBugReportDialog, prompt, reportBug, setExposeHighlight, setShellApiClient, setShellAuthBridge, setShellMailServer, setShellNavIcons, setWindowDefaultPosition, subscribeExposeHighlight, toast, toggleExposeMode, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useLocalStoragePrefs, useMailAuth, useModalActive, useNewHotkey, useShellAuth, useShellEntityFetcher, useShellPrefs, useSort, useTableNav, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, type BugReport, type BugReportConfig, BugReportConfigProvider, BugReportDetail, type BugReportExtraField, type BugReportExtraSelectField, BugReportProvider, type BugReportSubmission, type BugReportSubmitPayload, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CancelButton, type CellStyle, type ChangelogEntry, type ColumnDef, ConfirmProvider, CopyButton, Customization, type CustomizationOmitSection, type CustomizationProps, Desktop, type DesktopHostConfig, DesktopHostProvider, DocFavStar, ENTER, EditableGrid, type EditableGridProps, type EntityFetcher, EntityList, type EntityListColumn, type EntityListProps, GLASS_DIVIDER, GLASS_INPUT_BG, GlobalSearch, type GridColumn, Layout, type LayoutProps, ListFooter, type LoginPayload, MOD, type MailCapabilities, MailConnectModal, type MailUser, Modal, ModalActions, NotificationBell, type NotificationsConfig, type PaginatedResponse, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, type ReportType, ResizableTable, SHIFT, type SearchConfig, type SearchProvider, type SearchResult, type SemanticGroup, type ShellAuth, ShellAuthProvider, ShellEntityFetcherProvider, type ShellNotification, type ShellPrefsAdapter, ShellPrefsProvider, ShortcutHelp, type SortState, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, type StickyEntityRef, type StickyResolver, SystemPreferences, type SystemPreferencesProps, type SystemPreferencesSection, VERSION, WindowManagerProvider, WindowRegistry, WindowTitle, commitExposeHighlight, confirm, confirmDestructive, createWindowRegistry, exitExposeMode, formatDate, getActiveWindowRoute, getExposeHighlight, glassStyle, isMac, openBugReportDialog, prompt, reportBug, setExposeHighlight, setShellApiClient, setShellAuthBridge, setShellMailServer, setShellNavIcons, setWindowDefaultPosition, subscribeExposeHighlight, toast, toggleExposeMode, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useLocalStoragePrefs, useMailAuth, useModalActive, useNewHotkey, useShellAuth, useShellEntityFetcher, useShellPrefs, useSort, useTableNav, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };

package/dist/index.js

@@ -7,7 +7,7 @@ import { subscribePomo, getPomoSnapshot } from './chunk-MK3HLUO4.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
 import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-LZCEK7JF.js';
-import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, playLogout, setSoundForType, previewSound, setAllSounds } from './chunk-D7PYW2QS.js';
+import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, setSoundForType, previewSound, setAllSounds, playLogout } from './chunk-D7PYW2QS.js';
 import { setPdfPreview } from './chunk-NRT2CU5Q.js';
 import './chunk-KUIPWCTJ.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
@@ -915,7 +915,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.3.22" ;
+var VERSION = "0.4.0" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -4614,7 +4614,8 @@ function previewColor(resolved, light, dark, pink, green, grey, blue) {
   if (resolved === "blue") return blue ?? light;
   return light;
 }
-function Customization() {
+function Customization({ omit } = {}) {
+  const omitSet = new Set(omit ?? []);
   const host = useDesktopHost();
   const WALLPAPERS = host.wallpapers && host.wallpapers.length > 0 ? host.wallpapers : DEFAULT_WALLPAPERS;
   const { prefs, save } = useShellPrefs();
@@ -4951,7 +4952,7 @@ function Customization() {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
+    !omitSet.has("behavior") && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Behavior" }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -5003,7 +5004,7 @@ function Customization() {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
+    !omitSet.has("desktop") && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Desktop" }),
       /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
         /* @__PURE__ */ jsx(
@@ -5083,6 +5084,205 @@ function SoundSettings() {
     ] }) }) })
   ] });
 }
+var WINDOW_POSITIONS = [
+  { key: "center", label: "Center" },
+  { key: "cascade", label: "Cascade" }
+];
+var DESKTOP_DBLCLICK = [
+  { key: "deactivate", label: "Deactivate all" },
+  { key: "nothing", label: "Do nothing" }
+];
+var WINDOW_SIZES = [
+  { key: "small", label: "Small" },
+  { key: "medium", label: "Medium" },
+  { key: "large", label: "Large" },
+  { key: "maximized", label: "Maximized" }
+];
+function BehaviorPanel() {
+  const { prefs, save } = useShellPrefs();
+  const savePref = (key, value) => save({ [key]: value });
+  const windowPosition = prefs.window_position || "cascade";
+  const desktopDblclick = prefs.desktop_dblclick || "deactivate";
+  const defaultWindowSize = prefs.default_window_size || "large";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Behavior" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(
+          Row,
+          {
+            label: "New window position",
+            options: WINDOW_POSITIONS,
+            value: windowPosition,
+            onChange: (v) => savePref("window_position", v)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Row,
+          {
+            label: "Double-click desktop",
+            options: DESKTOP_DBLCLICK,
+            value: desktopDblclick,
+            onChange: (v) => savePref("desktop_dblclick", v)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Row,
+          {
+            label: "Default window size",
+            options: WINDOW_SIZES,
+            value: defaultWindowSize,
+            onChange: (v) => savePref("default_window_size", v)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Desktop" }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: prefs.show_desktop_version ?? true,
+            onChange: (e) => savePref("show_desktop_version", e.target.checked),
+            className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Show version on desktop" })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer mt-2", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: prefs.auto_fullscreen ?? false,
+            onChange: (e) => savePref("auto_fullscreen", e.target.checked),
+            className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Enter full screen mode automatically" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 ml-1", children: "\u2014 on login" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ModalActions, { children: /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "Changes are saved automatically" }) })
+  ] });
+}
+function Row({
+  label,
+  options,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-40 shrink-0", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: options.map((o) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(o.key),
+        className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${value === o.key ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
+        children: o.label
+      },
+      o.key
+    )) })
+  ] });
+}
+function SoundsPanel() {
+  const [enabled, setEnabled] = useState(soundsEnabled());
+  const [config, setConfig] = useState(getSoundConfig());
+  const update = (soundType, packKey) => {
+    setSoundForType(soundType, packKey);
+    setConfig(getSoundConfig());
+    previewSound(packKey, soundType);
+  };
+  const applyAll = (packKey) => {
+    setAllSounds(packKey);
+    setConfig(getSoundConfig());
+    previewSound(packKey, "success");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Sounds" }),
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: enabled,
+          onChange: (e) => {
+            localStorage.setItem("erp_sounds", String(e.target.checked));
+            setEnabled(e.target.checked);
+          },
+          className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Sound effects" })
+    ] }),
+    enabled && /* @__PURE__ */ jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-[11px]", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-gray-50", children: [
+        /* @__PURE__ */ jsx("th", { className: "px-2 py-1.5 text-left font-medium text-gray-500 w-24" }),
+        SOUND_PACK_KEYS.map((key) => /* @__PURE__ */ jsx("th", { className: "px-1 py-1.5 text-center", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => applyAll(key),
+            className: "font-medium text-gray-500 hover:text-blue-600 transition-colors",
+            children: SOUND_PACKS[key].label
+          }
+        ) }, key))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-100", children: SOUND_TYPES.map((soundType) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { className: "px-2 py-1.5 text-gray-700 font-medium", children: SOUND_TYPE_LABELS[soundType] }),
+        SOUND_PACK_KEYS.map((packKey) => /* @__PURE__ */ jsx("td", { className: "px-1 py-1.5 text-center", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => update(soundType, packKey),
+            "aria-label": `${SOUND_TYPE_LABELS[soundType]} \u2014 ${SOUND_PACKS[packKey].label}`,
+            "aria-pressed": config[soundType] === packKey,
+            className: `w-4 h-4 rounded-full border-2 transition-colors ${config[soundType] === packKey ? "bg-blue-600 border-blue-600" : "border-gray-300 hover:border-blue-400"}`
+          }
+        ) }, packKey))
+      ] }, soundType)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(ModalActions, { children: /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "Changes are saved automatically" }) })
+  ] });
+}
+function SystemPreferences({
+  sections: sections2,
+  defaultSelected,
+  className
+}) {
+  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() })
+  ] });
+}
 function useTableNav(items, onSelect, onToggle, onSelectAll, onSelectRange) {
   const [focusIdx, setFocusIdx] = useState(-1);
   const itemsRef = useRef(items);
@@ -5799,6 +5999,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, Desktop, DesktopHostProvider, ENTER, EntityList, GlobalSearch, Layout, ListFooter, MOD, MailConnectModal, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, StartMenu, StatusBadge, StatusBadgeProvider, VERSION, createWindowRegistry, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, Desktop, DesktopHostProvider, ENTER, EntityList, GlobalSearch, Layout, ListFooter, MOD, MailConnectModal, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, VERSION, createWindowRegistry, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map