react-os-shell 2.8.0 → 2.8.1

package/dist/index.js

@@ -1,17 +1,17 @@
 import { subscribePomo, getPomoSnapshot } from './chunk-P75EON66.js';
 export { setShellTodoProvider } from './chunk-P75EON66.js';
-import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-BLYEAKGC.js';
-export { Breadcrumbs } from './chunk-BLYEAKGC.js';
+import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-ZEMXT6BR.js';
+export { Breadcrumbs } from './chunk-ZEMXT6BR.js';
 import { SidebarLayout } from './chunk-VGTEM5RZ.js';
 export { SidebarLayout } from './chunk-VGTEM5RZ.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-4YBNDCJV.js';
+import { setPdfPreview } from './chunk-WG3PMYDQ.js';
 import './chunk-KUIPWCTJ.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-export { EditableGrid } from './chunk-KQBZLA6K.js';
-import { APP_VERSION } from './chunk-XGWARUR7.js';
-export { VERSION } from './chunk-XGWARUR7.js';
+export { EditableGrid } from './chunk-V6N2NXHQ.js';
+import { APP_VERSION } from './chunk-IXW6775F.js';
+export { VERSION } from './chunk-IXW6775F.js';
 import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, WINDOW_REGISTRY, isPageEntry, useShellPrefs, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, setWindowPosition, ThumbCard, activateModal } from './chunk-JNF5VRPB.js';
 export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, registerModalEscapeInterceptor, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useLocalStoragePrefs, useModalActive, useShellPrefs, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-JNF5VRPB.js';
 import { confirm } from './chunk-UBN4IUDE.js';
@@ -2882,6 +2882,64 @@ function hslToHex(h, s, l) {
   const toHex = (x) => Math.round(x * 255).toString(16).padStart(2, "0");
   return `#${toHex(f(0))}${toHex(f(8))}${toHex(f(4))}`;
 }
+function resolveTheme(theme) {
+  const t = theme || "system";
+  if (t === "system") return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return t;
+}
+function applyAccent(accentColor) {
+  const root = document.documentElement;
+  if (accentColor && /^#[0-9a-fA-F]{6}$/.test(accentColor)) {
+    const [h, s, l] = hexToHsl(accentColor);
+    root.setAttribute("data-custom-accent", "true");
+    root.style.setProperty("--accent-600", accentColor);
+    root.style.setProperty("--accent-700", hslToHex(h, s, Math.max(l - 10, 5)));
+    root.style.setProperty("--accent-500", hslToHex(h, s, Math.min(l + 10, 95)));
+    root.style.setProperty("--accent-400", hslToHex(h, s, Math.min(l + 20, 95)));
+    root.style.setProperty("--accent-300", hslToHex(h, Math.min(s + 10, 100), Math.min(l + 30, 92)));
+    root.style.setProperty("--accent-200", hslToHex(h, Math.min(s + 15, 100), Math.min(l + 38, 94)));
+    root.style.setProperty("--accent-100", hslToHex(h, Math.min(s + 20, 100), Math.min(l + 42, 96)));
+    root.style.setProperty("--accent-50", hslToHex(h, Math.min(s + 20, 100), Math.min(l + 46, 98)));
+  } else {
+    root.removeAttribute("data-custom-accent");
+    ["--accent-600", "--accent-700", "--accent-500", "--accent-400", "--accent-300", "--accent-200", "--accent-100", "--accent-50"].forEach((p) => root.style.removeProperty(p));
+  }
+}
+function applyCustomColors(accentColor, customBgColor, customTitleColor, customWindowColor, customButtonColor) {
+  const root = document.documentElement;
+  if (accentColor) {
+    const hexToRgb = (hex) => {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      return `${r} ${g} ${b}`;
+    };
+    if (customBgColor) root.style.setProperty("--custom-bg-color", customBgColor);
+    if (customTitleColor) {
+      root.style.setProperty("--window-header-rgb", hexToRgb(customTitleColor));
+      root.style.setProperty("--window-footer-rgb", hexToRgb(customTitleColor));
+    }
+    if (customWindowColor) root.style.setProperty("--window-content-rgb", hexToRgb(customWindowColor));
+    if (customButtonColor) {
+      root.style.setProperty("--custom-button-color", customButtonColor);
+      const [h, s, l] = hexToHsl(customButtonColor);
+      root.style.setProperty("--custom-button-hover", hslToHex(h, s, Math.max(l - 10, 5)));
+    }
+  } else {
+    ["--custom-bg-color", "--custom-button-color", "--custom-button-hover"].forEach((p) => root.style.removeProperty(p));
+  }
+}
+function applyThemePrefs(p) {
+  document.documentElement.setAttribute("data-theme", resolveTheme(p.theme));
+  applyAccent(p.accent_color ?? null);
+  applyCustomColors(
+    p.accent_color ?? null,
+    p.custom_bg_color ?? null,
+    p.custom_title_color ?? null,
+    p.custom_window_color ?? null,
+    p.custom_button_color ?? null
+  );
+}
 function useTheme() {
   const { prefs } = useShellPrefs();
   const systemDark = useSyncExternalStore(subscribeMediaQuery, getSystemIsDark);
@@ -2897,46 +2955,10 @@ function useTheme() {
     return () => document.documentElement.removeAttribute("data-theme");
   }, [resolved]);
   useEffect(() => {
-    const root = document.documentElement;
-    if (accentColor && /^#[0-9a-fA-F]{6}$/.test(accentColor)) {
-      const [h, s, l] = hexToHsl(accentColor);
-      root.setAttribute("data-custom-accent", "true");
-      root.style.setProperty("--accent-600", accentColor);
-      root.style.setProperty("--accent-700", hslToHex(h, s, Math.max(l - 10, 5)));
-      root.style.setProperty("--accent-500", hslToHex(h, s, Math.min(l + 10, 95)));
-      root.style.setProperty("--accent-400", hslToHex(h, s, Math.min(l + 20, 95)));
-      root.style.setProperty("--accent-300", hslToHex(h, Math.min(s + 10, 100), Math.min(l + 30, 92)));
-      root.style.setProperty("--accent-200", hslToHex(h, Math.min(s + 15, 100), Math.min(l + 38, 94)));
-      root.style.setProperty("--accent-100", hslToHex(h, Math.min(s + 20, 100), Math.min(l + 42, 96)));
-      root.style.setProperty("--accent-50", hslToHex(h, Math.min(s + 20, 100), Math.min(l + 46, 98)));
-    } else {
-      root.removeAttribute("data-custom-accent");
-      ["--accent-600", "--accent-700", "--accent-500", "--accent-400", "--accent-300", "--accent-200", "--accent-100", "--accent-50"].forEach((p) => root.style.removeProperty(p));
-    }
+    applyAccent(accentColor);
   }, [accentColor]);
   useEffect(() => {
-    const root = document.documentElement;
-    if (accentColor) {
-      const hexToRgb = (hex) => {
-        const r = parseInt(hex.slice(1, 3), 16);
-        const g = parseInt(hex.slice(3, 5), 16);
-        const b = parseInt(hex.slice(5, 7), 16);
-        return `${r} ${g} ${b}`;
-      };
-      if (customBgColor) root.style.setProperty("--custom-bg-color", customBgColor);
-      if (customTitleColor) {
-        root.style.setProperty("--window-header-rgb", hexToRgb(customTitleColor));
-        root.style.setProperty("--window-footer-rgb", hexToRgb(customTitleColor));
-      }
-      if (customWindowColor) root.style.setProperty("--window-content-rgb", hexToRgb(customWindowColor));
-      if (customButtonColor) {
-        root.style.setProperty("--custom-button-color", customButtonColor);
-        const [h, s, l] = hexToHsl(customButtonColor);
-        root.style.setProperty("--custom-button-hover", hslToHex(h, s, Math.max(l - 10, 5)));
-      }
-    } else {
-      ["--custom-bg-color", "--custom-button-color", "--custom-button-hover"].forEach((p) => root.style.removeProperty(p));
-    }
+    applyCustomColors(accentColor, customBgColor, customTitleColor, customWindowColor, customButtonColor);
   }, [accentColor, customBgColor, customTitleColor, customWindowColor, customButtonColor]);
   return { theme: saved, resolved };
 }
@@ -4980,12 +5002,6 @@ var THEMES = [
   { key: "blue", label: "Ocean", bar1: "bg-[#bfdbfe]", bar2: "bg-[#bfdbfe]" }
 ];
 var DEFAULT_WALLPAPERS = [];
-function resolveTheme(key) {
-  if (key === "system") {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  }
-  return key;
-}
 function getVersion() {
   const now = /* @__PURE__ */ new Date();
   return `v${String(now.getDate()).padStart(2, "0")}${String(now.getMonth() + 1).padStart(2, "0")}.${String(now.getHours()).padStart(2, "0")}.${String(now.getMinutes()).padStart(2, "0")}.${now.getFullYear()}`;
@@ -5004,7 +5020,28 @@ function Customization({ omit, section } = {}) {
   const host = useDesktopHost();
   const WALLPAPERS = host.wallpapers && host.wallpapers.length > 0 ? host.wallpapers : DEFAULT_WALLPAPERS;
   const { prefs, save } = useShellPrefs();
-  const currentTheme = prefs.theme || "system";
+  const [optimisticAppearance, setOptimisticAppearance] = useState({});
+  const pref = (key) => key in optimisticAppearance ? optimisticAppearance[key] : prefs[key];
+  useEffect(() => {
+    setOptimisticAppearance((prev) => {
+      const next = {};
+      let settled = false;
+      for (const k of Object.keys(prev)) {
+        if (prefs[k] === prev[k]) settled = true;
+        else next[k] = prev[k];
+      }
+      return settled ? next : prev;
+    });
+  }, [prefs]);
+  const APPEARANCE_KEYS = ["theme", "accent_color", "custom_bg_color", "custom_title_color", "custom_window_color", "custom_button_color"];
+  const setAppearance = (patch) => {
+    const snapshot = { ...patch };
+    for (const k of APPEARANCE_KEYS) if (!(k in snapshot)) snapshot[k] = pref(k);
+    applyThemePrefs(snapshot);
+    setOptimisticAppearance((prev) => ({ ...prev, ...patch }));
+    save(patch);
+  };
+  const currentTheme = pref("theme") || "system";
   const resolved = resolveTheme(currentTheme);
   const rawBg = prefs.desktop_bg || (WALLPAPERS.length > 0 ? "random" : "none");
   const randomPickRef = useRef(WALLPAPERS.length > 0 ? WALLPAPERS[Math.floor(Math.random() * WALLPAPERS.length)].src : "none");
@@ -5084,7 +5121,7 @@ function Customization({ omit, section } = {}) {
         /* @__PURE__ */ jsx("div", { className: "flex gap-3 flex-wrap", children: [...THEMES, { key: "custom", label: "Custom", bar1: "bg-gray-200", bar2: "bg-gray-200" }].map((t) => {
           const isCustom2 = t.key === "custom";
           const r = isCustom2 ? "light" : resolveTheme(t.key);
-          const customColor = prefs.accent_color || "#8b5cf6";
+          const customColor = pref("accent_color") || "#8b5cf6";
           const tAccent = isCustom2 ? "" : previewColor(r, "bg-[#2563eb]", "bg-[#3b82f6]", "bg-[#db2777]", "bg-[#16a34a]", "bg-[#374151]", "bg-[#1d4ed8]");
           const tBg = isCustom2 ? "bg-[#ffffff] border-[#d1d5db]" : previewColor(r, "bg-[#ffffff] border-[#d1d5db]", "bg-[#1e1e2e] border-[#45475a]", "bg-[#fdf2f8] border-[#f9a8d4]", "bg-[#f0fdf4] border-[#86efac]", "bg-[#e5e7eb] border-[#9ca3af]", "bg-[#eff6ff] border-[#93c5fd]");
           return /* @__PURE__ */ jsxs(
@@ -5092,14 +5129,12 @@ function Customization({ omit, section } = {}) {
             {
               onClick: () => {
                 if (isCustom2) {
-                  savePref("theme", "light");
-                  if (!prefs.accent_color) savePref("accent_color", "#8b5cf6");
+                  setAppearance(pref("accent_color") ? { theme: "light" } : { theme: "light", accent_color: "#8b5cf6" });
                 } else {
-                  savePref("theme", t.key);
-                  savePref("accent_color", null);
+                  setAppearance({ theme: t.key, accent_color: null });
                 }
               },
-              className: `flex flex-col items-center gap-1.5 rounded-lg border-2 p-3 transition-all ${(isCustom2 ? !!prefs.accent_color : currentTheme === t.key && !prefs.accent_color) ? "border-blue-500 shadow-md" : "border-gray-200 hover:border-gray-300"}`,
+              className: `flex flex-col items-center gap-1.5 rounded-lg border-2 p-3 transition-all ${(isCustom2 ? !!pref("accent_color") : currentTheme === t.key && !pref("accent_color")) ? "border-blue-500 shadow-md" : "border-gray-200 hover:border-gray-300"}`,
               children: [
                 /* @__PURE__ */ jsx("div", { className: `w-20 h-14 rounded ${tBg} border overflow-hidden flex flex-col`, children: t.key === "system" ? /* @__PURE__ */ jsxs("div", { className: "flex-1 flex", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col bg-[#ffffff]", children: [
@@ -5138,13 +5173,13 @@ function Customization({ omit, section } = {}) {
                     /* @__PURE__ */ jsx("div", { className: `h-1.5 rounded-sm w-1/2 ${t.bar2}` })
                   ] }) })
                 ] }) }),
-                /* @__PURE__ */ jsx("span", { className: `text-xs font-medium ${(isCustom2 ? !!prefs.accent_color : currentTheme === t.key && !prefs.accent_color) ? "text-blue-600" : "text-gray-600"}`, children: t.label })
+                /* @__PURE__ */ jsx("span", { className: `text-xs font-medium ${(isCustom2 ? !!pref("accent_color") : currentTheme === t.key && !pref("accent_color")) ? "text-blue-600" : "text-gray-600"}`, children: t.label })
               ]
             },
             t.key
           );
         }) }),
-        prefs.accent_color && /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2", children: [
+        pref("accent_color") && /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2", children: [
           { key: "custom_bg_color", label: "Background Color", defaultVal: "#f3f4f6" },
           { key: "custom_title_color", label: "Title Color", defaultVal: "#f9fafb" },
           { key: "custom_window_color", label: "Windows Background", defaultVal: "#ffffff" },
@@ -5156,19 +5191,19 @@ function Customization({ omit, section } = {}) {
             "label",
             {
               className: "w-8 h-8 rounded-lg border-2 border-gray-300 overflow-hidden cursor-pointer flex items-center justify-center shrink-0",
-              style: { backgroundColor: prefs[item.key] || item.defaultVal },
+              style: { backgroundColor: pref(item.key) || item.defaultVal },
               children: /* @__PURE__ */ jsx(
                 "input",
                 {
                   type: "color",
-                  value: prefs[item.key] || item.defaultVal,
-                  onChange: (e) => savePref(item.key, e.target.value),
+                  value: pref(item.key) || item.defaultVal,
+                  onChange: (e) => setAppearance({ [item.key]: e.target.value }),
                   className: "opacity-0 absolute w-0 h-0"
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 font-mono", children: prefs[item.key] || item.defaultVal })
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 font-mono", children: pref(item.key) || item.defaultVal })
         ] }, item.key)) })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [