react-os-shell 0.2.43 → 0.2.45

package/dist/PomodoroTimer-FHSOLF3O.js

@@ -0,0 +1,627 @@
+import { useTodoTasks, migratePomodoroTasksOnce } from './chunk-25L4DIKH.js';
+import { subscribePomo, getPomoSnapshot, setPomoDurations, setPomoAlarm, setPomoAlarmConfig, setPomoBehaviour, setPomoFocusSound, pomoSwitchMode, pomoPause, pomoStart, ALARM_OPTIONS, playAlarm, FOCUS_SOUND_OPTIONS, previewFocusSound } from './chunk-MK3HLUO4.js';
+import { useShellPrefs } from './chunk-36VM54SC.js';
+import './chunk-WIJ45SYD.js';
+import { loadAppearance, WidgetSettingsModal } from './chunk-UK2AA3J6.js';
+import { useWidgetSettings } from './chunk-7M3BBAHQ.js';
+import './chunk-PLGHQ7QW.js';
+import { useSyncExternalStore, useEffect, useMemo, useState, useRef, useCallback } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var POMO_SETTINGS_KEY = "pomodoro_appearance";
+var ACTIVE_TASK_KEY = "pomodoro_active_task_id";
+var MODE_LABELS = { focus: "Pomodoro", short: "Short Break", long: "Long Break" };
+var MODE_COLORS = {
+  focus: "#0f172a",
+  // unused for the panel; only for focus-mode accents
+  short: "#508a52",
+  // muted green
+  long: "#5b7898"
+  // slate blue
+};
+function hexToRgba(hex, alpha) {
+  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 `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+var DEFAULT_PREFS = {
+  focusMinutes: 25,
+  shortBreakMinutes: 5,
+  longBreakMinutes: 15,
+  autoStartBreaks: false,
+  autoStartPomodoros: false,
+  longBreakInterval: 4,
+  autoCheckTasks: true,
+  checkToBottom: true,
+  alarmSound: "bell",
+  alarmVolume: 100,
+  alarmRepeat: 1,
+  focusSound: "none",
+  focusVolume: 50
+};
+var intInRange = (v, min, max, fallback) => typeof v === "number" && isFinite(v) ? Math.max(min, Math.min(max, Math.round(v))) : fallback;
+function readPrefs(raw) {
+  const p = raw && typeof raw === "object" ? raw : {};
+  return {
+    focusMinutes: intInRange(p.focusMinutes, 1, 120, DEFAULT_PREFS.focusMinutes),
+    shortBreakMinutes: intInRange(p.shortBreakMinutes, 1, 120, DEFAULT_PREFS.shortBreakMinutes),
+    longBreakMinutes: intInRange(p.longBreakMinutes, 1, 120, DEFAULT_PREFS.longBreakMinutes),
+    autoStartBreaks: typeof p.autoStartBreaks === "boolean" ? p.autoStartBreaks : DEFAULT_PREFS.autoStartBreaks,
+    autoStartPomodoros: typeof p.autoStartPomodoros === "boolean" ? p.autoStartPomodoros : DEFAULT_PREFS.autoStartPomodoros,
+    longBreakInterval: intInRange(p.longBreakInterval, 1, 20, DEFAULT_PREFS.longBreakInterval),
+    autoCheckTasks: typeof p.autoCheckTasks === "boolean" ? p.autoCheckTasks : DEFAULT_PREFS.autoCheckTasks,
+    checkToBottom: typeof p.checkToBottom === "boolean" ? p.checkToBottom : DEFAULT_PREFS.checkToBottom,
+    alarmSound: ALARM_OPTIONS.some((o) => o.id === p.alarmSound) ? p.alarmSound : DEFAULT_PREFS.alarmSound,
+    alarmVolume: intInRange(p.alarmVolume, 0, 100, DEFAULT_PREFS.alarmVolume),
+    alarmRepeat: intInRange(p.alarmRepeat, 1, 5, DEFAULT_PREFS.alarmRepeat),
+    focusSound: FOCUS_SOUND_OPTIONS.some((o) => o.id === p.focusSound) ? p.focusSound : DEFAULT_PREFS.focusSound,
+    focusVolume: intInRange(p.focusVolume, 0, 100, DEFAULT_PREFS.focusVolume)
+  };
+}
+var sortDoneToBottom = (arr) => {
+  const undone = [];
+  const done = [];
+  for (const t of arr) (t.done ? done : undone).push(t);
+  return [...undone, ...done];
+};
+function useMemoSortedTasks(rawTasks, checkToBottom) {
+  return useMemo(
+    () => checkToBottom ? sortDoneToBottom(rawTasks) : rawTasks,
+    [rawTasks, checkToBottom]
+  );
+}
+function PomodoroTimer() {
+  const snap = useSyncExternalStore(subscribePomo, getPomoSnapshot, getPomoSnapshot);
+  const { prefs: shellPrefs, save: saveShellPrefs } = useShellPrefs();
+  const userPrefs = readPrefs(shellPrefs.pomodoro_settings);
+  useEffect(() => {
+    setPomoDurations({
+      focus: userPrefs.focusMinutes * 60,
+      short: userPrefs.shortBreakMinutes * 60,
+      long: userPrefs.longBreakMinutes * 60
+    });
+  }, [userPrefs.focusMinutes, userPrefs.shortBreakMinutes, userPrefs.longBreakMinutes]);
+  useEffect(() => {
+    setPomoAlarm(userPrefs.alarmSound);
+    setPomoAlarmConfig(userPrefs.alarmVolume, userPrefs.alarmRepeat);
+  }, [userPrefs.alarmSound, userPrefs.alarmVolume, userPrefs.alarmRepeat]);
+  useEffect(() => {
+    setPomoBehaviour({
+      autoStartBreaks: userPrefs.autoStartBreaks,
+      autoStartPomodoros: userPrefs.autoStartPomodoros,
+      longBreakInterval: userPrefs.longBreakInterval
+    });
+  }, [userPrefs.autoStartBreaks, userPrefs.autoStartPomodoros, userPrefs.longBreakInterval]);
+  useEffect(() => {
+    setPomoFocusSound(userPrefs.focusSound, userPrefs.focusVolume);
+  }, [userPrefs.focusSound, userPrefs.focusVolume]);
+  useEffect(() => {
+    if (typeof Notification !== "undefined" && Notification.permission === "default") {
+      try {
+        Notification.requestPermission();
+      } catch {
+      }
+    }
+  }, []);
+  const todo = useTodoTasks();
+  const rawTasks = todo.tasks;
+  const todayStr = useMemo(() => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10), []);
+  const visibleRawTasks = useMemo(
+    () => rawTasks.filter((t) => {
+      if (!t.dueDate) return false;
+      if (t.dueDate === todayStr) return true;
+      if (t.dueDate < todayStr && !t.done) return true;
+      return false;
+    }),
+    [rawTasks, todayStr]
+  );
+  const tasks = useMemoSortedTasks(visibleRawTasks, userPrefs.checkToBottom);
+  const [activeTaskId, setActiveTaskId] = useState(() => localStorage.getItem(ACTIVE_TASK_KEY));
+  const [adding, setAdding] = useState(false);
+  const [menuOpenId, setMenuOpenId] = useState(null);
+  const migratedRef = useRef(false);
+  useEffect(() => {
+    if (migratedRef.current) return;
+    migratedRef.current = true;
+    migratePomodoroTasksOnce(rawTasks, todo.setAllTasks);
+  }, []);
+  useEffect(() => {
+    try {
+      if (activeTaskId) localStorage.setItem(ACTIVE_TASK_KEY, activeTaskId);
+      else localStorage.removeItem(ACTIVE_TASK_KEY);
+    } catch {
+    }
+  }, [activeTaskId]);
+  useEffect(() => {
+    if (!menuOpenId) return;
+    const handler = () => setMenuOpenId(null);
+    const t = setTimeout(() => document.addEventListener("click", handler), 0);
+    return () => {
+      clearTimeout(t);
+      document.removeEventListener("click", handler);
+    };
+  }, [menuOpenId]);
+  const lastStreakRef = useRef(snap.streak);
+  useEffect(() => {
+    if (snap.streak > lastStreakRef.current && activeTaskId) {
+      const t = rawTasks.find((x) => x.id === activeTaskId);
+      if (t) {
+        const completed = (t.completed ?? 0) + 1;
+        const estimated = t.estimated ?? 0;
+        const shouldAutoCheck = userPrefs.autoCheckTasks && estimated > 0 && completed >= estimated;
+        todo.updateTask(activeTaskId, { completed, done: t.done || shouldAutoCheck });
+      }
+    }
+    lastStreakRef.current = snap.streak;
+  }, [snap.streak, activeTaskId, userPrefs.autoCheckTasks, rawTasks, todo]);
+  const addTask = (name, estimated) => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    const id = todo.addTask({ name: trimmed, estimated, completed: 0, dueDate: todayStr });
+    if (!activeTaskId) setActiveTaskId(id);
+    setAdding(false);
+  };
+  const removeTask = (id) => {
+    todo.removeTask(id);
+    if (activeTaskId === id) setActiveTaskId(null);
+    setMenuOpenId(null);
+  };
+  const toggleDone = (id) => {
+    todo.toggleDone(id);
+  };
+  const totalCompleted = tasks.reduce((acc, t) => acc + (t.completed ?? 0), 0);
+  const totalEstimated = tasks.reduce((acc, t) => acc + Math.max(t.estimated ?? 0, t.completed ?? 0), 0);
+  const remainingPomos = tasks.reduce((acc, t) => t.done ? acc : acc + Math.max(0, (t.estimated ?? 0) - (t.completed ?? 0)), 0);
+  const remainingSecsFromTimer = snap.running && snap.mode === "focus" ? snap.remaining : 0;
+  const remainingSecs = remainingPomos * userPrefs.focusMinutes * 60 + remainingSecsFromTimer;
+  const finishAt = new Date(Date.now() + remainingSecs * 1e3);
+  const finishAtStr = finishAt.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
+  const totalHours = (remainingSecs / 3600).toFixed(1);
+  const activeTask = activeTaskId ? rawTasks.find((t) => t.id === activeTaskId) ?? null : null;
+  const mm = String(Math.floor(snap.remaining / 60)).padStart(2, "0");
+  const ss = String(snap.remaining % 60).padStart(2, "0");
+  const [appearance, setAppearance] = useState(() => loadAppearance(POMO_SETTINGS_KEY));
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [configAppearance, setConfigAppearance] = useState(appearance);
+  const [configPrefs, setConfigPrefs] = useState(userPrefs);
+  useWidgetSettings(useCallback(() => {
+    setConfigAppearance({ ...appearance });
+    setConfigPrefs({ ...userPrefs });
+    setSettingsOpen(true);
+  }, [appearance, userPrefs]));
+  const onSave = () => {
+    setAppearance(configAppearance);
+    localStorage.setItem(POMO_SETTINGS_KEY, JSON.stringify(configAppearance));
+    saveShellPrefs({ pomodoro_settings: configPrefs });
+    setSettingsOpen(false);
+  };
+  const isColored = snap.mode !== "focus";
+  const bg = MODE_COLORS[snap.mode];
+  const panelBg = isColored ? hexToRgba(bg, appearance.activeOpacity / 100) : `rgb(var(--taskbar-bg-rgb, 243 244 246) / ${appearance.activeOpacity / 100})`;
+  const tx = {
+    primary: isColored ? "text-white" : "text-gray-900",
+    secondary: isColored ? "text-white/85" : "text-gray-700",
+    muted: isColored ? "text-white/65" : "text-gray-500",
+    tabActive: isColored ? "bg-white/15 text-white" : "bg-gray-200 text-gray-900",
+    tabInactive: isColored ? "text-white/75 hover:bg-white/10" : "text-gray-500 hover:bg-gray-200",
+    divider: isColored ? "border-white/30" : "border-gray-200",
+    softDivider: isColored ? "border-white/20" : "border-gray-200",
+    iconBtn: isColored ? "bg-black/15 hover:bg-black/25 text-white/85" : "bg-gray-200 hover:bg-gray-300 text-gray-600",
+    addTaskBtn: isColored ? "border-white/45 text-white/90 hover:bg-white/[0.06]" : "border-gray-300 text-gray-500 hover:bg-gray-200/50"
+  };
+  const accentColor = isColored ? bg : "#0f172a";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex flex-col h-full select-none transition-colors duration-300 ${tx.primary}`,
+        style: {
+          backgroundColor: panelBg,
+          backdropFilter: appearance.activeBlur > 0 ? `blur(${appearance.activeBlur}px)` : void 0
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "px-3 pt-3 flex justify-center gap-1.5", children: ["focus", "short", "long"].map((m) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => pomoSwitchMode(m),
+              className: `px-2.5 py-1 text-[13px] font-bold rounded transition-colors ${snap.mode === m ? tx.tabActive : tx.tabInactive}`,
+              children: MODE_LABELS[m]
+            },
+            m
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "text-center font-bold tabular-nums leading-none tracking-tight mt-3", style: { fontSize: "4.5rem" }, children: [
+            mm,
+            ":",
+            ss
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center mt-3 mb-2", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => snap.running ? pomoPause() : pomoStart(),
+              className: "bg-white px-12 py-2.5 rounded-md font-bold text-base shadow-[0_4px_0_rgba(0,0,0,0.12)] hover:shadow-[0_3px_0_rgba(0,0,0,0.12)] active:translate-y-1 active:shadow-none transition-all",
+              style: { color: accentColor, letterSpacing: "0.08em" },
+              children: snap.running ? "PAUSE" : "START"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "px-3 py-3 text-center", children: activeTask ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: `text-xs leading-tight ${tx.muted}`, children: [
+              "#",
+              (activeTask.completed ?? 0) + 1
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: `text-[15px] font-medium leading-tight truncate mt-0.5 ${tx.primary}`, children: activeTask.name })
+          ] }) : /* @__PURE__ */ jsx("div", { className: `text-xs italic ${tx.muted}`, children: "No task selected" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "px-3 mt-1 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("h3", { className: `text-base font-bold tracking-tight ${tx.primary}`, children: "Tasks" }),
+            /* @__PURE__ */ jsx("button", { className: `rounded p-1 transition-colors ${tx.iconBtn}`, "aria-label": "Tasks menu", tabIndex: -1, children: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "currentColor", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.4" }),
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.4" }),
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1.4" })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `border-t mx-3 mt-2 ${tx.divider}` }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 px-3 py-3 space-y-2 overflow-y-auto", children: [
+            tasks.map((task) => {
+              const isActive = task.id === activeTaskId;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  onClick: () => setActiveTaskId(task.id),
+                  className: `bg-white text-gray-800 rounded-md flex items-center pr-2 py-2.5 shadow-sm cursor-pointer transition-shadow hover:shadow-md ${isActive ? "border-l-4 border-gray-700 pl-2" : "pl-3 border-l-4 border-transparent"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          toggleDone(task.id);
+                        },
+                        className: "shrink-0",
+                        children: task.done ? /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "currentColor", viewBox: "0 0 20 20", style: { color: accentColor }, children: /* @__PURE__ */ jsx("path", { d: "M10 0a10 10 0 100 20 10 10 0 000-20zm-1 14.5l-4.5-4.5 1.4-1.4 3.1 3.1 6.1-6.1 1.4 1.4z" }) }) : /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-gray-300", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: `ml-3 flex-1 font-semibold truncate ${task.done ? "line-through text-gray-400" : "text-gray-800"}`, children: task.name }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-sm tabular-nums mr-1.5 shrink-0", children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-bold text-gray-500", children: task.completed ?? 0 }),
+                      /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: " / " }),
+                      /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: task.estimated ?? "\u2013" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setMenuOpenId(menuOpenId === task.id ? null : task.id);
+                          },
+                          className: "rounded p-1 bg-gray-100 hover:bg-gray-200",
+                          children: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 text-gray-500", viewBox: "0 0 24 24", fill: "currentColor", children: [
+                            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.4" }),
+                            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.4" }),
+                            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1.4" })
+                          ] })
+                        }
+                      ),
+                      menuOpenId === task.id && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "absolute right-0 top-full mt-1 bg-white text-gray-800 rounded shadow-lg border border-gray-200 z-10 min-w-[110px] overflow-hidden",
+                          onClick: (e) => e.stopPropagation(),
+                          children: /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                removeTask(task.id);
+                              },
+                              className: "block w-full px-3 py-1.5 text-sm text-left hover:bg-red-50 text-red-600",
+                              children: "Delete"
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                task.id
+              );
+            }),
+            !adding ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setAdding(true),
+                className: `w-full border-2 border-dashed rounded-md py-3 font-semibold flex items-center justify-center gap-2 transition-colors ${tx.addTaskBtn}`,
+                children: [
+                  /* @__PURE__ */ jsxs("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M8 12h8M12 8v8" })
+                  ] }),
+                  "Add Task"
+                ]
+              }
+            ) : /* @__PURE__ */ jsx(AddTaskForm, { onSubmit: addTask, onCancel: () => setAdding(false), accentColor })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `border-t px-3 py-2.5 flex items-center justify-center gap-5 text-sm ${tx.softDivider}`, children: [
+            /* @__PURE__ */ jsxs("span", { className: tx.secondary, children: [
+              "Pomos: ",
+              /* @__PURE__ */ jsx("span", { className: `font-bold ${tx.primary}`, children: totalCompleted }),
+              /* @__PURE__ */ jsx("span", { className: tx.muted, children: " / " }),
+              /* @__PURE__ */ jsx("span", { className: `font-bold ${tx.primary}`, children: totalEstimated })
+            ] }),
+            remainingSecs > 0 && /* @__PURE__ */ jsxs("span", { className: tx.secondary, children: [
+              "Finish At: ",
+              /* @__PURE__ */ jsx("span", { className: `font-bold ${tx.primary}`, children: finishAtStr }),
+              /* @__PURE__ */ jsxs("span", { className: tx.muted, children: [
+                " (",
+                totalHours,
+                "h)"
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PomodoroSettings,
+      {
+        open: settingsOpen,
+        onClose: () => setSettingsOpen(false),
+        onSave,
+        configAppearance,
+        setConfigAppearance,
+        configPrefs,
+        setConfigPrefs
+      }
+    )
+  ] });
+}
+function PomodoroSettings({
+  open,
+  onClose,
+  onSave,
+  configAppearance,
+  setConfigAppearance,
+  configPrefs,
+  setConfigPrefs
+}) {
+  const set = (k, v) => setConfigPrefs((p) => ({ ...p, [k]: v }));
+  return /* @__PURE__ */ jsxs(
+    WidgetSettingsModal,
+    {
+      open,
+      onClose,
+      title: "Pomodoro Settings",
+      appearance: configAppearance,
+      onAppearanceChange: setConfigAppearance,
+      onSave,
+      children: [
+        /* @__PURE__ */ jsxs(Section, { icon: /* @__PURE__ */ jsx(ClockIcon, {}), label: "TIMER", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-bold text-gray-800 mb-2", children: "Time (minutes)" }),
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
+              /* @__PURE__ */ jsx(NumberField, { label: "Pomodoro", value: configPrefs.focusMinutes, onChange: (v) => set("focusMinutes", v), max: 120 }),
+              /* @__PURE__ */ jsx(NumberField, { label: "Short Break", value: configPrefs.shortBreakMinutes, onChange: (v) => set("shortBreakMinutes", v), max: 120 }),
+              /* @__PURE__ */ jsx(NumberField, { label: "Long Break", value: configPrefs.longBreakMinutes, onChange: (v) => set("longBreakMinutes", v), max: 120 })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Row, { label: "Auto Start Breaks", children: /* @__PURE__ */ jsx(Toggle, { checked: configPrefs.autoStartBreaks, onChange: (v) => set("autoStartBreaks", v) }) }),
+          /* @__PURE__ */ jsx(Row, { label: "Auto Start Pomodoros", children: /* @__PURE__ */ jsx(Toggle, { checked: configPrefs.autoStartPomodoros, onChange: (v) => set("autoStartPomodoros", v) }) }),
+          /* @__PURE__ */ jsx(Row, { label: "Long Break interval", children: /* @__PURE__ */ jsx(NumberInput, { value: configPrefs.longBreakInterval, onChange: (v) => set("longBreakInterval", v), min: 1, max: 20, className: "w-14 text-center" }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Section, { icon: /* @__PURE__ */ jsx(TaskIcon, {}), label: "TASK", children: [
+          /* @__PURE__ */ jsx(
+            Row,
+            {
+              label: "Auto Check Tasks",
+              info: 'If you enable "Auto Check Tasks", the active task will be automatically checked when the actual pomodoro count reaches the estimated count.',
+              children: /* @__PURE__ */ jsx(Toggle, { checked: configPrefs.autoCheckTasks, onChange: (v) => set("autoCheckTasks", v) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Row,
+            {
+              label: "Check to Bottom",
+              info: 'If you enable "Check to Bottom", the checked task will be automatically moved to the bottom of the task list.',
+              children: /* @__PURE__ */ jsx(Toggle, { checked: configPrefs.checkToBottom, onChange: (v) => set("checkToBottom", v) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Section, { icon: /* @__PURE__ */ jsx(SpeakerIcon, {}), label: "SOUND", children: [
+          /* @__PURE__ */ jsx(Row, { label: "Alarm Sound", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                value: configPrefs.alarmSound,
+                onChange: (v) => set("alarmSound", v),
+                options: ALARM_OPTIONS.map((o) => ({ id: o.id, label: o.label }))
+              }
+            ),
+            configPrefs.alarmSound !== "off" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => playAlarm(configPrefs.alarmSound, { volume: configPrefs.alarmVolume, repeat: 1 }),
+                className: "px-2 py-1 text-[11px] rounded border border-gray-300 text-gray-600 hover:bg-gray-100",
+                children: "Play"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(SliderRow, { value: configPrefs.alarmVolume, onChange: (v) => set("alarmVolume", v) }),
+          /* @__PURE__ */ jsx(Row, { label: "repeat", children: /* @__PURE__ */ jsx(NumberInput, { value: configPrefs.alarmRepeat, onChange: (v) => set("alarmRepeat", v), min: 1, max: 5, className: "w-14 text-center" }) }),
+          /* @__PURE__ */ jsx(Row, { label: "Focus Sound", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                value: configPrefs.focusSound,
+                onChange: (v) => set("focusSound", v),
+                options: FOCUS_SOUND_OPTIONS
+              }
+            ),
+            configPrefs.focusSound !== "none" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => previewFocusSound(configPrefs.focusSound, configPrefs.focusVolume),
+                className: "px-2 py-1 text-[11px] rounded border border-gray-300 text-gray-600 hover:bg-gray-100",
+                children: "Play"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(SliderRow, { value: configPrefs.focusVolume, onChange: (v) => set("focusVolume", v) })
+        ] })
+      ]
+    }
+  );
+}
+function Section({ icon, label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 pt-3 first:border-0 first:pt-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-3 text-gray-400", children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-bold tracking-[0.15em]", children: label })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children })
+  ] });
+}
+function Row({ label, info, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-800", children: label }),
+      info && /* @__PURE__ */ jsx(InfoIcon, { title: info })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "shrink-0", children })
+  ] });
+}
+function SliderRow({ value, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 w-7 text-right tabular-nums", children: value }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: 100,
+        value,
+        onChange: (e) => onChange(parseInt(e.target.value, 10)),
+        className: "w-40 accent-blue-500"
+      }
+    )
+  ] });
+}
+function NumberField({ label, value, onChange, min = 1, max = 99 }) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-gray-500 mb-1", children: label }),
+    /* @__PURE__ */ jsx(NumberInput, { value, onChange, min, max })
+  ] });
+}
+function NumberInput({ value, onChange, min = 1, max = 99, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "number",
+      min,
+      max,
+      value,
+      onChange: (e) => onChange(Math.max(min, Math.min(max, parseInt(e.target.value, 10) || min))),
+      className: `bg-gray-100 border-0 rounded-md px-2 py-1.5 text-sm font-medium text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full ${className}`
+    }
+  );
+}
+function Dropdown({ value, onChange, options }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: "appearance-none bg-gray-100 border-0 rounded-md pl-3 pr-8 py-1.5 text-sm font-medium text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer",
+        children: options.map((o) => /* @__PURE__ */ jsx("option", { value: o.id, children: o.label }, o.id))
+      }
+    ),
+    /* @__PURE__ */ jsx("svg", { className: "absolute right-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-400 pointer-events-none", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) })
+  ] });
+}
+function Toggle({ checked, onChange }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      onClick: () => onChange(!checked),
+      className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${checked ? "bg-emerald-500" : "bg-gray-300"}`,
+      children: /* @__PURE__ */ jsx("span", { className: `absolute h-5 w-5 rounded-full bg-white shadow transition-transform ${checked ? "translate-x-[22px]" : "translate-x-0.5"}` })
+    }
+  );
+}
+function InfoIcon({ title }) {
+  return /* @__PURE__ */ jsx("span", { title, className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-300 text-white text-[10px] font-bold cursor-help", children: "i" });
+}
+function ClockIcon() {
+  return /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 7v5l3 2" })
+  ] });
+}
+function TaskIcon() {
+  return /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12l2 2 4-4" })
+  ] });
+}
+function SpeakerIcon() {
+  return /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11 5L6 9H2v6h4l5 4V5z" }),
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.5 8.5a5 5 0 010 7M19 5a9 9 0 010 14" })
+  ] });
+}
+function AddTaskForm({ onSubmit, onCancel, accentColor }) {
+  const [name, setName] = useState("");
+  const [est, setEst] = useState(1);
+  const submit = () => onSubmit(name, est);
+  return /* @__PURE__ */ jsxs("div", { className: "bg-white text-gray-800 rounded-md p-3 shadow-md", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        autoFocus: true,
+        value: name,
+        onChange: (e) => setName(e.target.value),
+        placeholder: "What are you working on?",
+        onKeyDown: (e) => {
+          if (e.key === "Enter") submit();
+          if (e.key === "Escape") onCancel();
+        },
+        className: "w-full text-base font-medium bg-transparent border-0 outline-none placeholder-gray-400"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-gray-500", children: "Est Pomodoros" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 1,
+          max: 20,
+          value: est,
+          onChange: (e) => setEst(Math.max(1, Math.min(20, parseInt(e.target.value, 10) || 1))),
+          className: "w-16 bg-gray-100 rounded px-2 py-1 text-sm text-right border-0 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-3 justify-end", children: [
+      /* @__PURE__ */ jsx("button", { onClick: onCancel, className: "px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded", children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: submit,
+          className: "px-4 py-1 text-sm font-semibold text-white rounded shadow-sm",
+          style: { backgroundColor: accentColor },
+          children: "Save"
+        }
+      )
+    ] })
+  ] });
+}
+
+export { PomodoroTimer as default };
+//# sourceMappingURL=PomodoroTimer-FHSOLF3O.js.map
+//# sourceMappingURL=PomodoroTimer-FHSOLF3O.js.map