react-os-shell 0.2.41 → 0.2.43

package/dist/{WorldClock-OAVNGMET.js → WorldClock-OFK2EA2H.js}

@@ -1,4 +1,4 @@
-import { ALL_TIMEZONES } from './chunk-L7SQZFP3.js';
+import { ALL_TIMEZONES } from './chunk-7KZWBIDL.js';
 import './chunk-PDFQNHW7.js';
 import './chunk-NSU7OHPC.js';
 import './chunk-46LICZUM.js';
@@ -30,6 +30,19 @@ function WorldClock() {
     setConfigAppearance({ ...appearance });
     setSettingsOpen(true);
   }, [worldClocks, appearance]));
+  const hourIn = (tz) => {
+    try {
+      const parts = new Intl.DateTimeFormat("en-US", { timeZone: tz, hour: "numeric", hour12: false }).formatToParts(now);
+      const h = parseInt(parts.find((p) => p.type === "hour")?.value || "0", 10);
+      return h === 24 ? 0 : h;
+    } catch {
+      return 12;
+    }
+  };
+  const isDay = (tz) => {
+    const h = hourIn(tz);
+    return h >= 6 && h < 18;
+  };
   const fmtTime = (tz) => now.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", timeZone: tz });
   const fmtOffset = (tz) => {
     const parts = new Intl.DateTimeFormat("en", { timeZone: tz, timeZoneName: "shortOffset" }).formatToParts(now);
@@ -45,39 +58,38 @@ function WorldClock() {
     setSettingsOpen(false);
   };
   const labelFor = (tz) => ALL_TIMEZONES.find((t) => t.tz === tz)?.label || tz.split("/").pop()?.replace(/_/g, " ") || tz;
+  const cards = [{ tz: localTz, isLocal: true }, ...worldClocks.map((tz) => ({ tz, isLocal: false }))];
+  const dynamicHeight = 96 + worldClocks.length * 84 + 16;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: "flex flex-col h-full rounded-lg",
+        className: "flex flex-col rounded-lg text-white overflow-hidden",
         style: {
-          backgroundColor: `rgb(var(--window-content-rgb) / ${appearance.activeOpacity / 100})`,
+          minHeight: dynamicHeight,
+          backgroundColor: `rgba(15, 23, 42, ${appearance.activeOpacity / 100})`,
           backdropFilter: appearance.activeBlur > 0 ? `blur(${appearance.activeBlur}px)` : void 0
         },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2.5 pb-2 border-b border-gray-200/50", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium text-gray-500 uppercase tracking-wide", children: "Local Time" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mt-0.5", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-gray-800 tabular-nums", children: fmtTime(localTz) }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: fmtOffset(localTz) })
-            ] }),
-            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-gray-500 mt-0.5 truncate", children: [
-              fmtDate(localTz),
-              " \xB7 ",
-              localTz.replace(/_/g, " ")
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-0.5 flex-1", children: [
-            worldClocks.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 text-center py-3", children: "No cities \u2014 right-click to add." }),
-            worldClocks.map((tz) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1.5 border-b border-gray-200/50 last:border-0", children: [
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-800 truncate", children: labelFor(tz) }),
-                /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 tabular-nums", children: fmtOffset(tz) })
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-700 tabular-nums shrink-0", children: fmtTime(tz) })
-            ] }, tz))
-          ] })
-        ]
+        children: /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col gap-2 p-2", children: cards.map(({ tz, isLocal }) => {
+          const day = isDay(tz);
+          const rowBg = day ? "bg-gradient-to-br from-sky-400 via-sky-300 to-sky-500" : "bg-gradient-to-br from-slate-800 via-blue-950 to-slate-900";
+          const sub = isLocal ? `${fmtDate(tz)} \xB7 ${tz.replace(/_/g, " ")}` : `${fmtDate(tz)} \xB7 ${fmtOffset(tz)}`;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `rounded-2xl px-4 py-3 flex items-center justify-between gap-3 ${rowBg}`,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  isLocal && /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide opacity-80 mb-0.5", children: "Local Time" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight truncate", children: labelFor(tz) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] opacity-90 truncate mt-0.5", children: sub })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: `${isLocal ? "text-3xl" : "text-2xl"} font-extralight leading-none tracking-tight tabular-nums shrink-0`, children: fmtTime(tz) })
+              ]
+            },
+            (isLocal ? "local-" : "") + tz
+          );
+        }) })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -110,5 +122,5 @@ function WorldClock() {
 }
 
 export { WorldClock as default };
-//# sourceMappingURL=WorldClock-OAVNGMET.js.map
-//# sourceMappingURL=WorldClock-OAVNGMET.js.map
+//# sourceMappingURL=WorldClock-OFK2EA2H.js.map
+//# sourceMappingURL=WorldClock-OFK2EA2H.js.map

package/dist/WorldClock-OFK2EA2H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/apps/WorldClock.tsx"],"names":[],"mappings":"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","file":"WorldClock-OFK2EA2H.js","sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport { useWidgetSettings } from '../shell/Modal';\nimport WidgetSettingsModal, { loadAppearance, type WidgetAppearance } from '../shell/WidgetSettingsModal';\nimport { useShellPrefs } from '../shell/ShellPrefs';\nimport { ALL_TIMEZONES } from '../shell/Layout';\n\nconst DEFAULT_CLOCKS = ['Europe/London', 'Asia/Shanghai', 'America/Los_Angeles', 'America/New_York'];\nconst SETTINGS_KEY = 'world_clock_appearance';\n\n/**\n * World Clock widget — iOS-style city cards with a per-row day/night\n * gradient that flips based on the local hour at each city. Day cards use\n * a bright sky blue, night cards a deep navy — same palette as the\n * Weather widget so the two read as a set when stacked.\n *\n * Settings (city list + appearance sliders) live in the right-click menu\n * via `useWidgetSettings` — there is no inline \"+ Add World Clock\"\n * button. Translucency is applied as a background-color alpha on the\n * outer panel (slate-900 base) so the row gradients stay vivid even at\n * lower opacity.\n */\nexport default function WorldClock() {\n  const [now, setNow] = useState(new Date());\n  const [appearance, setAppearance] = useState(() => loadAppearance(SETTINGS_KEY));\n  const [settingsOpen, setSettingsOpen] = useState(false);\n  const [configClocks, setConfigClocks] = useState<string[]>([]);\n  const [configAppearance, setConfigAppearance] = useState<WidgetAppearance>(appearance);\n\n  const { prefs, save } = useShellPrefs();\n  const worldClocks: string[] = (prefs.world_clocks as string[] | undefined) ?? DEFAULT_CLOCKS;\n\n  useEffect(() => {\n    const t = setInterval(() => setNow(new Date()), 10000);\n    return () => clearInterval(t);\n  }, []);\n\n  useWidgetSettings(useCallback(() => {\n    setConfigClocks([...worldClocks]);\n    setConfigAppearance({ ...appearance });\n    setSettingsOpen(true);\n  }, [worldClocks, appearance]));\n\n  /** Local hour (0–23) at the given timezone — used to flip day/night. */\n  const hourIn = (tz: string): number => {\n    try {\n      const parts = new Intl.DateTimeFormat('en-US', { timeZone: tz, hour: 'numeric', hour12: false }).formatToParts(now);\n      const h = parseInt(parts.find(p => p.type === 'hour')?.value || '0', 10);\n      // `hourCycle: h23` would be cleanest but isn't universally supported;\n      // `hour12: false` returns 24 for midnight on some Node versions, so\n      // normalize that to 0.\n      return h === 24 ? 0 : h;\n    } catch { return 12; }\n  };\n  /** Crude sunrise/sunset proxy — good enough for \"should this card look\n   *  bright or dark.\" Real solar calc would need the city's latitude. */\n  const isDay = (tz: string) => { const h = hourIn(tz); return h >= 6 && h < 18; };\n\n  const fmtTime = (tz: string) => now.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', timeZone: tz });\n  const fmtOffset = (tz: string) => {\n    const parts = new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'shortOffset' }).formatToParts(now);\n    return parts.find(p => p.type === 'timeZoneName')?.value || '';\n  };\n  const fmtDate = (tz: string) => now.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric', timeZone: tz });\n\n  const localTz = (typeof localStorage !== 'undefined' && localStorage.getItem('user_timezone'))\n    || Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  const saveSettings = () => {\n    if (configClocks.length === 0) return;\n    save({ world_clocks: configClocks });\n    setAppearance(configAppearance);\n    localStorage.setItem(SETTINGS_KEY, JSON.stringify(configAppearance));\n    setSettingsOpen(false);\n  };\n\n  const labelFor = (tz: string) =>\n    ALL_TIMEZONES.find(t => t.tz === tz)?.label\n    || tz.split('/').pop()?.replace(/_/g, ' ')\n    || tz;\n\n  // Local time gets the \"featured\" card at the top, then the user's chosen\n  // cities. Each card is its own day/night-coloured tile sitting on the\n  // panel's slate backdrop with `gap-2` between cards — same idiom as\n  // Weather.\n  const cards = [{ tz: localTz, isLocal: true }, ...worldClocks.map(tz => ({ tz, isLocal: false }))];\n\n  // Card heights: featured local-time card is taller (3 lines + larger\n  // time), each city card is ~76 px. Plus the panel's p-2 padding.\n  const dynamicHeight = 96 /* local card */ + worldClocks.length * 84 /* city cards */ + 16;\n\n  return (\n    <>\n      <div className=\"flex flex-col rounded-lg text-white overflow-hidden\"\n        style={{\n          minHeight: dynamicHeight,\n          backgroundColor: `rgba(15, 23, 42, ${appearance.activeOpacity / 100})`,\n          backdropFilter: appearance.activeBlur > 0 ? `blur(${appearance.activeBlur}px)` : undefined,\n        }}>\n        <div className=\"flex-1 flex flex-col gap-2 p-2\">\n          {cards.map(({ tz, isLocal }) => {\n            const day = isDay(tz);\n            const rowBg = day\n              ? 'bg-gradient-to-br from-sky-400 via-sky-300 to-sky-500'\n              : 'bg-gradient-to-br from-slate-800 via-blue-950 to-slate-900';\n            const sub = isLocal\n              ? `${fmtDate(tz)} · ${tz.replace(/_/g, ' ')}`\n              : `${fmtDate(tz)} · ${fmtOffset(tz)}`;\n            return (\n              <div key={(isLocal ? 'local-' : '') + tz}\n                className={`rounded-2xl px-4 py-3 flex items-center justify-between gap-3 ${rowBg}`}>\n                <div className=\"min-w-0 flex-1\">\n                  {isLocal && (\n                    <div className=\"text-[10px] uppercase tracking-wide opacity-80 mb-0.5\">Local Time</div>\n                  )}\n                  <div className=\"text-base font-semibold leading-tight truncate\">{labelFor(tz)}</div>\n                  <div className=\"text-[10px] opacity-90 truncate mt-0.5\">{sub}</div>\n                </div>\n                <div className={`${isLocal ? 'text-3xl' : 'text-2xl'} font-extralight leading-none tracking-tight tabular-nums shrink-0`}>\n                  {fmtTime(tz)}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n\n      <WidgetSettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} title=\"World Clock Settings\"\n        appearance={configAppearance} onAppearanceChange={setConfigAppearance} onSave={saveSettings}>\n        <div>\n          <h3 className=\"text-sm font-semibold text-gray-700 mb-2\">Cities</h3>\n          <div className=\"grid grid-cols-2 gap-1 max-h-56 overflow-y-auto\">\n            {ALL_TIMEZONES.filter(t => t.tz !== localTz).map(({ tz, label }) => (\n              <label key={tz} className=\"flex items-center gap-2 text-sm py-1 cursor-pointer hover:bg-gray-50 rounded px-2\">\n                <input type=\"checkbox\" checked={configClocks.includes(tz)}\n                  onChange={() => setConfigClocks(prev => prev.includes(tz) ? prev.filter(t => t !== tz) : [...prev, tz])}\n                  className=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500 h-3.5 w-3.5\" />\n                {label}\n              </label>\n            ))}\n          </div>\n        </div>\n      </WidgetSettingsModal>\n    </>\n  );\n}\n"]}

package/dist/apps/index.d.ts

@@ -54,10 +54,16 @@ declare function Checkers$1(): react_jsx_runtime.JSX.Element;
 declare function Chess$1(): react_jsx_runtime.JSX.Element;
 
 /**
- * World Clock widget — same shape as Currency / Weather. Theme-aware bg via
- * `--window-content-rgb`, settings opened via the right-click menu (no
- * inline "+ Add World Clock" button anymore — that lives in the
- * <WidgetSettingsModal> alongside the appearance sliders).
+ * World Clock widget — iOS-style city cards with a per-row day/night
+ * gradient that flips based on the local hour at each city. Day cards use
+ * a bright sky blue, night cards a deep navy — same palette as the
+ * Weather widget so the two read as a set when stacked.
+ *
+ * Settings (city list + appearance sliders) live in the right-click menu
+ * via `useWidgetSettings` — there is no inline "+ Add World Clock"
+ * button. Translucency is applied as a background-color alpha on the
+ * outer panel (slate-900 base) so the row gradients stay vivid even at
+ * lower opacity.
  */
 declare function WorldClock$1(): react_jsx_runtime.JSX.Element;
 

package/dist/apps/index.js

@@ -12,7 +12,7 @@ var Weather = lazy(() => import('../Weather-XTADR7Z3.js'));
 var CurrencyConverter = lazy(() => import('../CurrencyConverter-XZVZ7XOF.js'));
 var PomodoroTimer = lazy(() => import('../PomodoroTimer-T2J5NDJR.js'));
 var Notepad = lazy(() => import('../Notepad-W3YYZ3GS.js'));
-var WorldClock = lazy(() => import('../WorldClock-OAVNGMET.js'));
+var WorldClock = lazy(() => import('../WorldClock-OFK2EA2H.js'));
 var Chess = lazy(() => import('../Chess-C5BY45NA.js'));
 var Checkers = lazy(() => import('../Checkers-MIAHIKJH.js'));
 var Sudoku = lazy(() => import('../Sudoku-XHLYCEVT.js'));

package/dist/{chunk-L7SQZFP3.js → chunk-7KZWBIDL.js}

@@ -668,7 +668,7 @@ function BugReportAnnotator({
 }
 
 // src/version.ts
-var VERSION = "0.2.41" ;
+var VERSION = "0.2.43" ;
 var APP_VERSION = VERSION;
 
 // src/utils/reportBug.ts
@@ -3625,21 +3625,21 @@ function TaskbarClock() {
   const [now, setNow] = useState(/* @__PURE__ */ new Date());
   const [open, setOpen] = useState(false);
   const [adding, setAdding] = useState(false);
-  const [pinned, setPinned] = useState(false);
   const ref = useRef(null);
   const buttonRef = useRef(null);
   const { prefs, save } = useShellPrefs();
+  const { openPage } = useWindowManager();
   const worldClocks = prefs.world_clocks || ["Europe/London", "Asia/Shanghai", "America/Los_Angeles", "America/New_York"];
   useEffect(() => {
     const t = setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e4);
     return () => clearInterval(t);
   }, []);
   useClickOutside(ref, useCallback(() => {
-    if (open && !pinned) {
+    if (open) {
       setOpen(false);
       setAdding(false);
     }
-  }, [open, pinned]));
+  }, [open]));
   const fmtTime = (tz) => now.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", timeZone: tz });
   const fmtDate = (tz) => now.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric", timeZone: tz });
   const fmtOffset = (tz) => {
@@ -3663,7 +3663,7 @@ function TaskbarClock() {
       /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium text-gray-800", children: now.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" }) }),
       /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-700", children: now.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" }) })
     ] }),
-    open && !pinned && (() => {
+    open && (() => {
       const taskbarPos = getComputedStyle(document.documentElement).getPropertyValue("--taskbar-position")?.trim() || "bottom";
       const rect = buttonRef.current?.getBoundingClientRect();
       const right = rect ? window.innerWidth - rect.right : 0;
@@ -3673,9 +3673,10 @@ function TaskbarClock() {
           "button",
           {
             onClick: () => {
-              setPinned(true);
+              openPage("/world-clock");
+              setOpen(false);
             },
-            title: "Pin as widget",
+            title: "Open as widget",
             className: "absolute top-2 right-2 text-gray-300 hover:text-gray-600 transition-colors z-10",
             children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 3.75L8.25 10.5m0 0l-3-1.5L3 12.75l5.25 5.25 3.75-2.25-1.5-3L17.25 6M8.25 10.5l-3 3M17.25 6l3 3" }) })
           }
@@ -3698,42 +3699,7 @@ function TaskbarClock() {
           }
         )
       ] });
-    })(),
-    pinned && /* @__PURE__ */ jsx(
-      Modal,
-      {
-        open: true,
-        onClose: () => {
-          setPinned(false);
-          setOpen(false);
-        },
-        title: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-          "World Clock"
-        ] }),
-        size: "sm",
-        allowPinOnTop: true,
-        initialPosition: "top-right",
-        widget: true,
-        children: /* @__PURE__ */ jsx(
-          ClockContent,
-          {
-            localTz,
-            worldClocks,
-            now,
-            fmtTime,
-            fmtDate,
-            fmtOffset,
-            removeClock,
-            adding,
-            setAdding,
-            addClock,
-            availableToAdd,
-            showAdd: false
-          }
-        )
-      }
-    )
+    })()
   ] });
 }
 function TaskbarContextMenu({ x, y, position, size, onChangePosition, onChangeSize, onClose, onReportBug }) {
@@ -4174,5 +4140,5 @@ function Layout({
 }
 
 export { ALL_TIMEZONES, ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BugReportConfigProvider, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Desktop, DesktopHostProvider, ENTER, GlobalSearch, Layout, MOD, NotificationBell, SHIFT, ShellAuthProvider, ShortcutHelp, StartMenu, VERSION, isMac, openBugReportDialog, reportBug, setShellAuthBridge, useBugReport, useClickOutside, useDesktopHost, useShellAuth };
-//# sourceMappingURL=chunk-L7SQZFP3.js.map
-//# sourceMappingURL=chunk-L7SQZFP3.js.map
+//# sourceMappingURL=chunk-7KZWBIDL.js.map
+//# sourceMappingURL=chunk-7KZWBIDL.js.map