react-os-shell 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Victor Y. Mau
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,242 @@
+# react-os-shell
+
+A desktop-style React UI shell — windows, taskbar, start menu, sticky notes, frosted-glass theming — plus 16 bundled apps (utilities, games, Google integrations).
+
+> **Status:** v0.1.0 — extracted from a production ERP where it's been running for a small team. Public API is stabilising; expect minor shape changes before 1.0.
+
+### → [Live demo](https://victorymau.github.io/react-os-shell/)
+
+A backend-less playground hosted on GitHub Pages. Wallpapers, themes, sticky notes, the spreadsheet, the calendar, all wired to `localStorage` so the page survives a refresh. Source is in [`examples/demo/`](examples/demo/).
+
+[![react-os-shell demo](docs/hero.png)](https://victorymau.github.io/react-os-shell/)
+
+<sub>The screenshot is auto-captured against the deployed demo by [`.github/workflows/screenshot.yml`](.github/workflows/screenshot.yml). Run it manually: `gh workflow run "Capture hero screenshot"` (or use the Actions tab).</sub>
+
+## What's in the box
+
+**Shell:** `<Layout>`, `<StartMenu>`, `<Desktop>` (with sticky notes + folders), `<WindowManager>`, `<Modal>` (standard / compact / widget styles), `<PopupMenu>`, `<ConfirmDialog>`, `<GlobalSearch>` (Cmd-K), `<ShortcutHelp>`, `<NotificationBell>`, `<BugReportDetail>`, `<StatusBadge>`, frosted-glass theming, `<GoogleConnectModal>`.
+
+**Apps (16 ship in the package):**
+- **Utilities (7):** Calculator, Notepad, Spreadsheet, Weather, CurrencyConverter, PomodoroTimer, WorldClock
+- **Games (6):** Chess, Checkers, Minesweeper, Sudoku, Tetris, 2048
+- **Google (3):** Calendar, Email (Gmail), GeminiChat
+
+15 of the 16 ship in the `bundledApps` registry today; the remaining one (WorldClock) is exported individually but needs consumer-supplied prefs wiring before slotting into `bundledApps`. The bundled `Customization` settings page is also exported separately for consumers to register at `/settings/customization`.
+
+**Hooks:** `useWindowManager`, `useTheme`, full hotkey/nav system (`useNewHotkey`, `useEditHotkey`, `useModalNav`, `useModalSave`, `useModalDuplicate`, `useTableNav`, `useMultiModal`), `useGoogleAuth`, `useEmailUnread`.
+
+**Themes:** light + dark (frosted-glass tinting; the package ships base styles, additional theme variants like pink/green/grey/blue can layer on top).
+
+## Install
+
+```bash
+npm i react-os-shell
+```
+
+Peer deps you should already have in a typical React + Tailwind v4 app:
+
+```bash
+npm i react react-dom react-router-dom @tanstack/react-query react-hook-form \
+      tailwindcss @headlessui/react @heroicons/react
+```
+
+## Quick start (~50 lines)
+
+```tsx
+// App.tsx
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  Layout,
+  WindowManagerProvider,
+  ConfirmProvider,
+  ShellAuthProvider,
+  ShellPrefsProvider,
+  ShellEntityFetcherProvider,
+  StatusBadgeProvider,
+  setShellApiClient,
+  setShellAuthBridge,
+  setShellWindowRegistry,
+  createWindowRegistry,
+  useLocalStoragePrefs,
+} from 'react-os-shell';
+import { bundledApps } from 'react-os-shell/apps';
+import 'react-os-shell/styles.css';
+import axios from 'axios';
+
+const apiClient = axios.create({ baseURL: '/api' });
+setShellApiClient(apiClient);
+setShellWindowRegistry(createWindowRegistry(bundledApps));
+setShellAuthBridge({ user: { first_name: 'Demo' }, logout: () => {} });
+
+const navSections = [
+  { to: '/', label: 'Home' },
+  { label: 'Games', items: bundledApps['/chess'] ? [
+    { to: '/chess', label: 'Chess' },
+    { to: '/tetris', label: 'Tetris' },
+    { to: '/2048', label: '2048' },
+  ] : [] },
+];
+
+const queryClient = new QueryClient();
+
+export default function App() {
+  const prefs = useLocalStoragePrefs('my-app');
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ConfirmProvider>
+        <BrowserRouter>
+          <ShellAuthProvider value={{ hasAnyPerm: () => true }}>
+            <ShellPrefsProvider value={prefs}>
+              <ShellEntityFetcherProvider value={(endpoint, id) => apiClient.get(`${endpoint}${id}/`).then(r => r.data)}>
+                <StatusBadgeProvider groups={{}}>
+                  <WindowManagerProvider>
+                    <Routes>
+                      <Route path="*" element={<Layout navSections={navSections} navIcons={{}} />} />
+                    </Routes>
+                  </WindowManagerProvider>
+                </StatusBadgeProvider>
+              </ShellEntityFetcherProvider>
+            </ShellPrefsProvider>
+          </ShellAuthProvider>
+        </BrowserRouter>
+      </ConfirmProvider>
+    </QueryClientProvider>
+  );
+}
+```
+
+That gives you the full desktop with all 12 utility/game/Google apps reachable through the start menu's Games / Utilities trays. Add your own entity windows by extending the registry, and wire the notification / bug-report / sticky-note systems through optional config callbacks when you want them.
+
+## Concepts
+
+### Window registry
+
+Every window the shell can open lives in a `WindowRegistry` map. Two entry shapes:
+
+- **Page** — `{ component: LazyExoticComponent, label, size?, widget?, … }`. Opened via `openPage(routeKey)`.
+- **Entity** — `{ endpoint, render(entity, …), title(entity), footer?, … }`. Opened via `openEntity(typeKey, id)`. The shell GETs `${endpoint}${id}/` (via the consumer-supplied entity fetcher) and hands the result to `render`.
+
+Compose multiple partial maps with `createWindowRegistry(...maps)`:
+
+```ts
+import { bundledApps } from 'react-os-shell/apps';
+import { erpEntities } from './shell-config/erpEntities';
+
+const windows = createWindowRegistry(bundledApps, erpEntities);
+setShellWindowRegistry(windows);
+```
+
+### Nav sections
+
+`Layout` renders the start menu from a `(NavSection | NavItem)[]` you pass in:
+
+```ts
+const navSections = [
+  { to: '/', label: 'Home' },
+  { label: 'Clients', items: [
+    { to: '/orders', label: 'Sales Orders', perms: ['view_order'] },
+    { to: '/clients', label: 'Clients' },
+  ]},
+];
+```
+
+Items with `perms` are filtered through `<ShellAuthProvider value={{ hasAnyPerm }}>`.
+
+### useWindowManager
+
+The hook every component uses to open / close / minimise windows:
+
+```ts
+const { openPage, openEntity, closeEntity, openWindows } = useWindowManager();
+
+openPage('/calculator');
+openEntity('order', 'uuid-123');
+```
+
+## API reference
+
+All exports are named — `import { Modal, ... } from 'react-os-shell'`.
+
+### Components
+
+| Export | Purpose |
+|---|---|
+| `Layout` | Top-level shell — desktop + taskbar + start menu. Mount once inside your providers. |
+| `StartMenu` / `Desktop` / `WindowManagerProvider` | Used internally by `Layout`; rarely instantiated directly. |
+| `Modal`, `ModalActions`, `CopyButton`, `CancelButton` | Window primitive supporting standard / compact / widget styles. |
+| `PopupMenu`, `PopupMenuItem`, `PopupMenuDivider`, `PopupMenuLabel` | Right-click / context-menu primitive. |
+| `ConfirmProvider`, `confirm` | Imperative `confirm({ title, body })` returning a Promise<boolean>. |
+| `GlobalSearch` | Cmd-K command palette. Pass `providers: SearchProvider[]` to add results. |
+| `ShortcutHelp` | The keyboard cheatsheet shown on `?`. |
+| `NotificationBell` | Taskbar bell — config via `<Layout notifications={…}>`. |
+| `BugReportDetail` | Used inside an entity-window registry entry; reads from `<BugReportConfigProvider>`. |
+| `StatusBadge` | Coloured pill rendering a status string. Map status→semantic group via `<StatusBadgeProvider groups={{...}}>`. |
+| `GoogleConnectModal` | UI for entering Google OAuth client ID. |
+
+### Providers + setters
+
+| Export | Use |
+|---|---|
+| `<ShellAuthProvider value={{ hasAnyPerm }}>` | Permission-filter nav items. |
+| `<ShellPrefsProvider value={{ prefs, save }}>` | Where the shell reads/writes user prefs (theme, taskbar pos, sticky notes, …). Use `useLocalStoragePrefs(key)` for a backend-less default. |
+| `<ShellEntityFetcherProvider value={(endpoint, id) => …}>` | How the modal stack fetches entity data. |
+| `<BugReportConfigProvider value={{ submit, list?, resolve? }}>` | Wire the bug-report flow to your backend. |
+| `<DesktopHostProvider value={{ stickyResolver?, saveShortcuts?, … }}>` | Sticky-note ref resolver + persistence callbacks. |
+| `<StatusBadgeProvider groups={{ status: 'success' \| ... }}>` | Status string → semantic group. |
+| `setShellApiClient(axios)` | Module-level: register your axios instance once. |
+| `setShellAuthBridge({ user, logout })` | Module-level: register user identity / logout handler. |
+| `setShellWindowRegistry(registry)` | Module-level: register your composed `WindowRegistry`. |
+
+### Hooks
+
+| Export | Purpose |
+|---|---|
+| `useWindowManager()` | `{ openPage, openEntity, closeEntity, openWindows, … }` |
+| `useTheme()` | `{ theme, resolved }` — current theme + system-resolved value. |
+| `useNewHotkey(handler)` | Cmd/Ctrl+N — for "create new entity" buttons. |
+| `useEditHotkey(handler)` | Alt+Shift+E — for "edit" toggle. |
+| `useModalNav({ onPrev, onNext })` | ←/→ to step through siblings inside a modal. |
+| `useModalSave(handler)` | Cmd-S inside a modal. |
+| `useModalDuplicate(handler)` | Alt-D inside a modal. |
+| `useTableNav({ rows, cols, onCell })` | Arrow-key cell navigation in editable grids. |
+| `useMultiModal()` | Manages multi-window stacking + activate/blur. |
+| `useGoogleAuth({ clientId? })` | Google Identity Services wrapper — token + scopes. |
+| `useEmailUnread()` | Live unread-count for the Gmail badge. |
+| `useShellAuth() / useShellPrefs() / useShellEntityFetcher() / useBugReport() / useDesktopHost()` | Context readers — the shell uses these internally; consumers may also call them. |
+
+### Apps barrel — `react-os-shell/apps`
+
+| Export | Type |
+|---|---|
+| `bundledApps` | `WindowRegistry` — 12 ready-to-mount apps. |
+| `utilityApps`, `gameApps`, `googleApps` | Subsets of `bundledApps`. |
+| `Calculator`, `Spreadsheet`, `Weather`, `CurrencyConverter`, `PomodoroTimer`, `Chess`, `Checkers`, `Sudoku`, `Tetris`, `Game2048`, `Email`, `GeminiChat` | Lazy components — use directly in custom registry entries. |
+
+### Misc
+
+| Export | Notes |
+|---|---|
+| `createWindowRegistry(...maps)` | Variadic merge — later partials override earlier on the same key. |
+| `isPageEntry`, `isEntityEntry` | Type guards for `WindowRegistryEntry`. |
+| `glassStyle()` | Returns the theme-aware frosted-glass `style` object. |
+| `reportBug(submit)` | Captures a screenshot via `getDisplayMedia`, opens the dialog, hands the payload to your `submit`. |
+| `formatDate(iso)` | Locale-aware date formatter. |
+| `toast.success / .error / .info` | Toast notifications — auto-mounts container. |
+| `Kbd` constants — `MOD`, `ALT`, `SHIFT`, `ENTER`, `ALT_SHIFT_E`, `CMD_K`, … | Symbol constants for rendering keyboard shortcuts. |
+
+## Why it exists
+
+Most "desktop UI" demos on the web are toys with hardcoded windows and no escape hatch. This one was extracted from a working ERP where every entity (sales orders, invoices, vendors, …) opens as its own window with consistent header, footer, hotkeys, depth stacking, and split-view. The shell is **fully decoupled** from any specific backend — every subsystem that needs server data (notifications, bug reports, desktop shortcuts, search, entity fetching) takes its data through callback configs supplied by the consumer. Drop-in localStorage fallbacks ship for prefs and sticky notes so the package works out of the box without a backend.
+
+## Examples
+
+- [`examples/demo`](examples/demo/) — small Vite app showcasing the shell + bundled apps with mock data. Live at [victorymau.github.io/react-os-shell](https://victorymau.github.io/react-os-shell/), deployed automatically by [`.github/workflows/pages.yml`](.github/workflows/pages.yml) on every push to `main`.
+
+## Contributing
+
+PRs welcome. Open an issue first for non-trivial changes so we can align on shape.
+
+## License
+
+[MIT](./LICENSE)

package/dist/Calculator-BNBRNV4P.js

@@ -0,0 +1,184 @@
+import { loadAppearance, WidgetSettingsModal } from './chunk-SVBID2P6.js';
+import { useWidgetSettings } from './chunk-WQIS72NL.js';
+import './chunk-RFTLYCSF.js';
+import { useState, useCallback, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var CALC_SETTINGS_KEY = "calc_appearance";
+function Calculator() {
+  const [display, setDisplay] = useState("0");
+  const [prev, setPrev] = useState(null);
+  const [op, setOp] = useState(null);
+  const [resetNext, setResetNext] = useState(false);
+  const [lastExpr, setLastExpr] = useState("");
+  const [history, setHistory] = useState([]);
+  const [copied, setCopied] = useState(false);
+  const [appearance, setAppearance] = useState(() => loadAppearance(CALC_SETTINGS_KEY));
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [configAppearance, setConfigAppearance] = useState(appearance);
+  useWidgetSettings(useCallback(() => {
+    setConfigAppearance({ ...appearance });
+    setSettingsOpen(true);
+  }, [appearance]));
+  const append = useCallback((ch) => {
+    setLastExpr("");
+    setDisplay((d) => {
+      if (resetNext || d === "0") {
+        setResetNext(false);
+        return ch === "." ? "0." : ch;
+      }
+      if (ch === "." && d.includes(".")) return d;
+      return d + ch;
+    });
+  }, [resetNext]);
+  const clear = useCallback(() => {
+    setDisplay("0");
+    setPrev(null);
+    setOp(null);
+    setResetNext(false);
+  }, []);
+  const compute = useCallback((a, b, operator) => {
+    switch (operator) {
+      case "+":
+        return a + b;
+      case "-":
+        return a - b;
+      case "\xD7":
+        return a * b;
+      case "\xF7":
+        return b === 0 ? 0 : a / b;
+      default:
+        return b;
+    }
+  }, []);
+  const handleOp = useCallback((nextOp) => {
+    const current = parseFloat(display);
+    if (prev !== null && op && !resetNext) {
+      const result = compute(prev, current, op);
+      setDisplay(String(result));
+      setPrev(result);
+      setHistory((h) => [`${prev} ${op} ${current} = ${result}`, ...h].slice(0, 20));
+    } else {
+      setPrev(current);
+    }
+    setOp(nextOp);
+    setResetNext(true);
+  }, [display, prev, op, resetNext, compute]);
+  const equals = useCallback(() => {
+    if (prev === null || !op) return;
+    const current = parseFloat(display);
+    const result = compute(prev, current, op);
+    const expr = `${prev} ${op} ${current} =`;
+    setHistory((h) => [`${expr} ${result}`, ...h].slice(0, 20));
+    setLastExpr(expr);
+    setDisplay(String(result));
+    setPrev(null);
+    setOp(null);
+    setResetNext(true);
+  }, [display, prev, op, compute]);
+  const percent = useCallback(() => {
+    setDisplay((d) => String(parseFloat(d) / 100));
+  }, []);
+  const negate = useCallback(() => {
+    setDisplay((d) => d.startsWith("-") ? d.slice(1) : d === "0" ? d : "-" + d);
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      const tag = e.target.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+      if (e.key >= "0" && e.key <= "9") append(e.key);
+      else if (e.key === ".") append(".");
+      else if (e.key === "+") handleOp("+");
+      else if (e.key === "-") handleOp("-");
+      else if (e.key === "*") handleOp("\xD7");
+      else if (e.key === "/") {
+        e.preventDefault();
+        handleOp("\xF7");
+      } else if (e.key === "Enter" || e.key === "=") equals();
+      else if (e.key === "Escape") clear();
+      else if (e.key === "Backspace") setDisplay((d) => d.length > 1 ? d.slice(0, -1) : "0");
+      else if (e.key === "%") percent();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [append, handleOp, equals, clear, percent]);
+  const btn = "flex items-center justify-center rounded-lg text-sm font-medium transition-colors";
+  const numBtn = `${btn} bg-white border border-gray-200 text-gray-900 hover:bg-gray-50 active:bg-gray-100`;
+  const opBtn = `${btn} bg-blue-50 border border-blue-200 text-blue-700 hover:bg-blue-100 active:bg-blue-200`;
+  const fnBtn = `${btn} bg-gray-100 border border-gray-200 text-gray-600 hover:bg-gray-200 active:bg-gray-300`;
+  const eqBtn = `${btn} bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800`;
+  const formatDisplay = (val) => {
+    const num = parseFloat(val);
+    if (isNaN(num)) return val;
+    if (val.endsWith(".") || val.endsWith(".0")) return val;
+    if (Math.abs(num) < 1e15 && val.length < 16) return val;
+    return num.toExponential(6);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", style: {
+      opacity: appearance.activeOpacity / 100,
+      backdropFilter: appearance.activeBlur > 0 ? `blur(${appearance.activeBlur}px)` : void 0
+    }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-slate-200 rounded-t-lg px-4 py-2 group/display relative flex flex-col justify-end min-h-[120px] border-b border-slate-300", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-end flex-1 overflow-hidden", children: history.slice(0, 3).reverse().map((h, i) => /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400 text-right font-mono truncate", children: h }, i)) }),
+        (lastExpr || op && prev !== null) && /* @__PURE__ */ jsx("div", { className: "text-base text-slate-600 text-right font-mono", children: lastExpr || `${prev} ${op} ${!resetNext ? display : ""}` }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                navigator.clipboard.writeText(display);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 1200);
+              },
+              title: "Copy result",
+              className: "shrink-0 text-slate-300 hover:text-slate-500 transition-colors opacity-0 group-hover/display:opacity-100",
+              children: copied ? /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-green-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) : /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "text-right text-4xl font-mono font-bold text-slate-800 truncate flex-1", children: formatDisplay(display) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 grid-rows-5 gap-1.5 flex-1 min-h-0 p-2", children: [
+        /* @__PURE__ */ jsx("button", { onClick: clear, className: fnBtn, children: "AC" }),
+        /* @__PURE__ */ jsx("button", { onClick: negate, className: fnBtn, children: "+/\u2212" }),
+        /* @__PURE__ */ jsx("button", { onClick: percent, className: fnBtn, children: "%" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => handleOp("\xF7"), className: `${opBtn} ${op === "\xF7" ? "ring-2 ring-blue-400" : ""}`, children: "\xF7" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("7"), className: numBtn, children: "7" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("8"), className: numBtn, children: "8" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("9"), className: numBtn, children: "9" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => handleOp("\xD7"), className: `${opBtn} ${op === "\xD7" ? "ring-2 ring-blue-400" : ""}`, children: "\xD7" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("4"), className: numBtn, children: "4" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("5"), className: numBtn, children: "5" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("6"), className: numBtn, children: "6" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => handleOp("-"), className: `${opBtn} ${op === "-" ? "ring-2 ring-blue-400" : ""}`, children: "\u2212" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("1"), className: numBtn, children: "1" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("2"), className: numBtn, children: "2" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("3"), className: numBtn, children: "3" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => handleOp("+"), className: `${opBtn} ${op === "+" ? "ring-2 ring-blue-400" : ""}`, children: "+" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("0"), className: `${numBtn} col-span-2`, children: "0" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => append("."), className: numBtn, children: "." }),
+        /* @__PURE__ */ jsx("button", { onClick: equals, className: eqBtn, children: "=" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      WidgetSettingsModal,
+      {
+        open: settingsOpen,
+        onClose: () => setSettingsOpen(false),
+        title: "Calculator Settings",
+        appearance: configAppearance,
+        onAppearanceChange: setConfigAppearance,
+        onSave: () => {
+          setAppearance(configAppearance);
+          localStorage.setItem(CALC_SETTINGS_KEY, JSON.stringify(configAppearance));
+          setSettingsOpen(false);
+        }
+      }
+    )
+  ] });
+}
+
+export { Calculator as default };
+//# sourceMappingURL=Calculator-BNBRNV4P.js.map
+//# sourceMappingURL=Calculator-BNBRNV4P.js.map

package/dist/Calculator-BNBRNV4P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/apps/Calculator.tsx"],"names":[],"mappings":";;;;;;AAKA,IAAM,iBAAA,GAAoB,iBAAA;AAEX,SAAR,UAAA,GAA8B;AACnC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,GAAG,CAAA;AAC1C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAwB,IAAI,CAAA;AACpD,EAAA,MAAM,CAAC,EAAA,EAAI,KAAK,CAAA,GAAI,SAAa,IAAI,CAAA;AACrC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,EAAE,CAAA;AAC3C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AACnD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1C,EAAA,MAAM,CAAC,YAAY,aAAa,CAAA,GAAI,SAAS,MAAM,cAAA,CAAe,iBAAiB,CAAC,CAAA;AACpF,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAA2B,UAAU,CAAA;AAErF,EAAA,iBAAA,CAAkB,YAAY,MAAM;AAClC,IAAA,mBAAA,CAAoB,EAAE,GAAG,UAAA,EAAY,CAAA;AACrC,IAAA,eAAA,CAAgB,IAAI,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,UAAU,CAAC,CAAC,CAAA;AAEhB,EAAA,MAAM,MAAA,GAAS,WAAA,CAAY,CAAC,EAAA,KAAe;AACzC,IAAA,WAAA,CAAY,EAAE,CAAA;AACd,IAAA,UAAA,CAAW,CAAA,CAAA,KAAK;AACd,MAAA,IAAI,SAAA,IAAa,MAAM,GAAA,EAAK;AAC1B,QAAA,YAAA,CAAa,KAAK,CAAA;AAClB,QAAA,OAAO,EAAA,KAAO,MAAM,IAAA,GAAO,EAAA;AAAA,MAC7B;AACA,MAAA,IAAI,OAAO,GAAA,IAAO,CAAA,CAAE,QAAA,CAAS,GAAG,GAAG,OAAO,CAAA;AAC1C,MAAA,OAAO,CAAA,GAAI,EAAA;AAAA,IACb,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,MAAM,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,UAAA,CAAW,GAAG,CAAA;AACd,IAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,IAAA,KAAA,CAAM,IAAI,CAAA;AACV,IAAA,YAAA,CAAa,KAAK,CAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,OAAA,GAAU,WAAA,CAAY,CAAC,CAAA,EAAW,GAAW,QAAA,KAAyB;AAC1E,IAAA,QAAQ,QAAA;AAAU,MAChB,KAAK,GAAA;AAAK,QAAA,OAAO,CAAA,GAAI,CAAA;AAAA,MACrB,KAAK,GAAA;AAAK,QAAA,OAAO,CAAA,GAAI,CAAA;AAAA,MACrB,KAAK,MAAA;AAAK,QAAA,OAAO,CAAA,GAAI,CAAA;AAAA,MACrB,KAAK,MAAA;AAAK,QAAA,OAAO,CAAA,KAAM,CAAA,GAAI,CAAA,GAAI,CAAA,GAAI,CAAA;AAAA,MACnC;AAAS,QAAA,OAAO,CAAA;AAAA;AAClB,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,QAAA,GAAW,WAAA,CAAY,CAAC,MAAA,KAAe;AAC3C,IAAA,MAAM,OAAA,GAAU,WAAW,OAAO,CAAA;AAClC,IAAA,IAAI,IAAA,KAAS,IAAA,IAAQ,EAAA,IAAM,CAAC,SAAA,EAAW;AACrC,MAAA,MAAM,MAAA,GAAS,OAAA,CAAQ,IAAA,EAAM,OAAA,EAAS,EAAE,CAAA;AACxC,MAAA,UAAA,CAAW,MAAA,CAAO,MAAM,CAAC,CAAA;AACzB,MAAA,OAAA,CAAQ,MAAM,CAAA;AACd,MAAA,UAAA,CAAW,OAAK,CAAC,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA,EAAI,OAAO,CAAA,GAAA,EAAM,MAAM,IAAI,GAAG,CAAC,EAAE,KAAA,CAAM,CAAA,EAAG,EAAE,CAAC,CAAA;AAAA,IAC7E,CAAA,MAAO;AACL,MAAA,OAAA,CAAQ,OAAO,CAAA;AAAA,IACjB;AACA,IAAA,KAAA,CAAM,MAAM,CAAA;AACZ,IAAA,YAAA,CAAa,IAAI,CAAA;AAAA,EACnB,GAAG,CAAC,OAAA,EAAS,MAAM,EAAA,EAAI,SAAA,EAAW,OAAO,CAAC,CAAA;AAE1C,EAAA,MAAM,MAAA,GAAS,YAAY,MAAM;AAC/B,IAAA,IAAI,IAAA,KAAS,IAAA,IAAQ,CAAC,EAAA,EAAI;AAC1B,IAAA,MAAM,OAAA,GAAU,WAAW,OAAO,CAAA;AAClC,IAAA,MAAM,MAAA,GAAS,OAAA,CAAQ,IAAA,EAAM,OAAA,EAAS,EAAE,CAAA;AACxC,IAAA,MAAM,OAAO,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,EAAE,IAAI,OAAO,CAAA,EAAA,CAAA;AACrC,IAAA,UAAA,CAAW,CAAA,CAAA,KAAK,CAAC,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,MAAM,CAAA,CAAA,EAAI,GAAG,CAAC,CAAA,CAAE,KAAA,CAAM,CAAA,EAAG,EAAE,CAAC,CAAA;AACxD,IAAA,WAAA,CAAY,IAAI,CAAA;AAChB,IAAA,UAAA,CAAW,MAAA,CAAO,MAAM,CAAC,CAAA;AACzB,IAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,IAAA,KAAA,CAAM,IAAI,CAAA;AACV,IAAA,YAAA,CAAa,IAAI,CAAA;AAAA,EACnB,GAAG,CAAC,OAAA,EAAS,IAAA,EAAM,EAAA,EAAI,OAAO,CAAC,CAAA;AAE/B,EAAA,MAAM,OAAA,GAAU,YAAY,MAAM;AAChC,IAAA,UAAA,CAAW,OAAK,MAAA,CAAO,UAAA,CAAW,CAAC,CAAA,GAAI,GAAG,CAAC,CAAA;AAAA,EAC7C,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,MAAA,GAAS,YAAY,MAAM;AAC/B,IAAA,UAAA,CAAW,CAAA,CAAA,KAAK,CAAA,CAAE,UAAA,CAAW,GAAG,CAAA,GAAI,CAAA,CAAE,KAAA,CAAM,CAAC,CAAA,GAAI,CAAA,KAAM,GAAA,GAAM,CAAA,GAAI,MAAM,CAAC,CAAA;AAAA,EAC1E,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,OAAA,GAAU,CAAC,CAAA,KAAqB;AACpC,MAAA,MAAM,GAAA,GAAO,EAAE,MAAA,CAAuB,OAAA;AACtC,MAAA,IAAI,GAAA,KAAQ,OAAA,IAAW,GAAA,KAAQ,UAAA,IAAc,QAAQ,QAAA,EAAU;AAC/D,MAAA,IAAI,CAAA,CAAE,OAAO,GAAA,IAAO,CAAA,CAAE,OAAO,GAAA,EAAK,MAAA,CAAO,EAAE,GAAG,CAAA;AAAA,WAAA,IACrC,CAAA,CAAE,GAAA,KAAQ,GAAA,EAAK,MAAA,CAAO,GAAG,CAAA;AAAA,WAAA,IACzB,CAAA,CAAE,GAAA,KAAQ,GAAA,EAAK,QAAA,CAAS,GAAG,CAAA;AAAA,WAAA,IAC3B,CAAA,CAAE,GAAA,KAAQ,GAAA,EAAK,QAAA,CAAS,GAAG,CAAA;AAAA,WAAA,IAC3B,CAAA,CAAE,GAAA,KAAQ,GAAA,EAAK,QAAA,CAAS,MAAG,CAAA;AAAA,WAAA,IAC3B,CAAA,CAAE,QAAQ,GAAA,EAAK;AAAE,QAAA,CAAA,CAAE,cAAA,EAAe;AAAG,QAAA,QAAA,CAAS,MAAG,CAAA;AAAA,MAAG,WACpD,CAAA,CAAE,GAAA,KAAQ,WAAW,CAAA,CAAE,GAAA,KAAQ,KAAK,MAAA,EAAO;AAAA,WAAA,IAC3C,CAAA,CAAE,GAAA,KAAQ,QAAA,EAAU,KAAA,EAAM;AAAA,WAAA,IAC1B,CAAA,CAAE,GAAA,KAAQ,WAAA,EAAa,UAAA,CAAW,CAAA,CAAA,KAAK,CAAA,CAAE,MAAA,GAAS,CAAA,GAAI,CAAA,CAAE,KAAA,CAAM,CAAA,EAAG,EAAE,IAAI,GAAG,CAAA;AAAA,WAAA,IAC1E,CAAA,CAAE,GAAA,KAAQ,GAAA,EAAK,OAAA,EAAQ;AAAA,IAClC,CAAA;AACA,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,OAAO,CAAA;AAC1C,IAAA,OAAO,MAAM,MAAA,CAAO,mBAAA,CAAoB,SAAA,EAAW,OAAO,CAAA;AAAA,EAC5D,GAAG,CAAC,MAAA,EAAQ,UAAU,MAAA,EAAQ,KAAA,EAAO,OAAO,CAAC,CAAA;AAE7C,EAAA,MAAM,GAAA,GAAM,mFAAA;AACZ,EAAA,MAAM,MAAA,GAAS,GAAG,GAAG,CAAA,kFAAA,CAAA;AACrB,EAAA,MAAM,KAAA,GAAQ,GAAG,GAAG,CAAA,qFAAA,CAAA;AACpB,EAAA,MAAM,KAAA,GAAQ,GAAG,GAAG,CAAA,sFAAA,CAAA;AACpB,EAAA,MAAM,KAAA,GAAQ,GAAG,GAAG,CAAA,4DAAA,CAAA;AAGpB,EAAA,MAAM,aAAA,GAAgB,CAAC,GAAA,KAAgB;AACrC,IAAA,MAAM,GAAA,GAAM,WAAW,GAAG,CAAA;AAC1B,IAAA,IAAI,KAAA,CAAM,GAAG,CAAA,EAAG,OAAO,GAAA;AACvB,IAAA,IAAI,GAAA,CAAI,SAAS,GAAG,CAAA,IAAK,IAAI,QAAA,CAAS,IAAI,GAAG,OAAO,GAAA;AACpD,IAAA,IAAI,IAAA,CAAK,IAAI,GAAG,CAAA,GAAI,QAAQ,GAAA,CAAI,MAAA,GAAS,IAAI,OAAO,GAAA;AACpD,IAAA,OAAO,GAAA,CAAI,cAAc,CAAC,CAAA;AAAA,EAC5B,CAAA;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EAAuB,KAAA,EAAO;AAAA,MAC3C,OAAA,EAAS,WAAW,aAAA,GAAgB,GAAA;AAAA,MACpC,gBAAgB,UAAA,CAAW,UAAA,GAAa,IAAI,CAAA,KAAA,EAAQ,UAAA,CAAW,UAAU,CAAA,GAAA,CAAA,GAAQ;AAAA,KACnF,EAEE,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8HAAA,EAEb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACZ,QAAA,EAAA,OAAA,CAAQ,MAAM,CAAA,EAAG,CAAC,EAAE,OAAA,EAAQ,CAAE,IAAI,CAAC,CAAA,EAAG,sBACrC,GAAA,CAAC,KAAA,EAAA,EAAY,WAAU,0DAAA,EAA4D,QAAA,EAAA,CAAA,EAAA,EAAzE,CAA2E,CACtF,CAAA,EACH,CAAA;AAAA,QAAA,CAEE,YAAa,EAAA,IAAM,IAAA,KAAS,yBAC5B,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+CAAA,EACZ,QAAA,EAAA,QAAA,IAAY,CAAA,EAAG,IAAI,IAAI,EAAE,CAAA,CAAA,EAAI,CAAC,SAAA,GAAY,OAAA,GAAU,EAAE,CAAA,CAAA,EACzD,CAAA;AAAA,wBAGF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cAAO,SAAS,MAAM;AAAE,gBAAA,SAAA,CAAU,SAAA,CAAU,UAAU,OAAO,CAAA;AAAG,gBAAA,SAAA,CAAU,IAAI,CAAA;AAAG,gBAAA,UAAA,CAAW,MAAM,SAAA,CAAU,KAAK,CAAA,EAAG,IAAI,CAAA;AAAA,cAAG,CAAA;AAAA,cAC1H,KAAA,EAAM,aAAA;AAAA,cACN,SAAA,EAAU,0GAAA;AAAA,cACT,mCACG,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wBAAA,EAAyB,IAAA,EAAK,QAAO,OAAA,EAAQ,WAAA,EAAY,QAAO,cAAA,EAAe,WAAA,EAAa,GAAG,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,eAAc,OAAA,EAAQ,cAAA,EAAe,SAAQ,CAAA,EAAE,gBAAA,EAAiB,GAAE,CAAA,mBACtL,GAAA,CAAC,SAAI,SAAA,EAAU,SAAA,EAAU,MAAK,MAAA,EAAO,OAAA,EAAQ,aAAY,MAAA,EAAO,cAAA,EAAe,aAAa,CAAA,EAAG,QAAA,kBAAA,GAAA,CAAC,UAAK,aAAA,EAAc,OAAA,EAAQ,gBAAe,OAAA,EAAQ,CAAA,EAAE,yHAAwH,CAAA,EAAE;AAAA;AAAA,WAEpR;AAAA,8BACC,KAAA,EAAA,EAAI,SAAA,EAAU,wEAAA,EACZ,QAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EACxB;AAAA,SAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,sBAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAO,OAAA,EAAS,KAAA,EAAO,SAAA,EAAW,OAAO,QAAA,EAAA,IAAA,EAAE,CAAA;AAAA,4BAC3C,QAAA,EAAA,EAAO,OAAA,EAAS,MAAA,EAAQ,SAAA,EAAW,OAAO,QAAA,EAAA,UAAA,EAAG,CAAA;AAAA,4BAC7C,QAAA,EAAA,EAAO,OAAA,EAAS,OAAA,EAAS,SAAA,EAAW,OAAO,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,4BAC5C,QAAA,EAAA,EAAO,OAAA,EAAS,MAAM,QAAA,CAAS,MAAG,CAAA,EAAG,SAAA,EAAW,CAAA,EAAG,KAAK,IAAI,EAAA,KAAO,MAAA,GAAM,sBAAA,GAAyB,EAAE,IAAI,QAAA,EAAA,MAAA,EAAC,CAAA;AAAA,wBAE1G,GAAA,CAAC,YAAO,OAAA,EAAS,MAAM,OAAO,GAAG,CAAA,EAAG,SAAA,EAAW,MAAA,EAAQ,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACxD,GAAA,CAAC,YAAO,OAAA,EAAS,MAAM,OAAO,GAAG,CAAA,EAAG,SAAA,EAAW,MAAA,EAAQ,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACxD,GAAA,CAAC,YAAO,OAAA,EAAS,MAAM,OAAO,GAAG,CAAA,EAAG,SAAA,EAAW,MAAA,EAAQ,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,4BACvD,QAAA,EAAA,EAAO,OAAA,EAAS,MAAM,QAAA,CAAS,MAAG,CAAA,EAAG,SAAA,EAAW,CAAA,EAAG,KAAK,IAAI,EAAA,KAAO,MAAA,GAAM,sBAAA,GAAyB,EAAE,IAAI,QAAA,EAAA,MAAA,EAAC,CAAA;AAAA,wBAE1G,GAAA,CAAC,YAAO,OAAA,EAAS,MAAM,OAAO,GAAG,CAAA,EAAG,SAAA,EAAW,MAAA,EAAQ,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACxD,GAAA,CAAC,YAAO,OAAA,EAAS,MAAM,OAAO,GAAG,CAAA,EAAG,SAAA,EAAW,MAAA,EAAQ,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACxD,GAAA,CAAC,YAAO,OAAA,EAAS,MAAM,OAAO,GAAG,CAAA,EAAG,SAAA,EAAW,MAAA,EAAQ,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,4BACvD,QAAA,EAAA,EAAO,OAAA,EAAS,MAAM,QAAA,CAAS,GAAG,CAAA,EAAG,SAAA,EAAW,CAAA,EAAG,KAAK,IAAI,EAAA,KAAO,GAAA,GAAM,sBAAA,GAAyB,EAAE,IAAI,QAAA,EAAA,QAAA,EAAC,CAAA;AAAA,wBAE1G,GAAA,CAAC,YAAO,OAAA,EAAS,MAAM,OAAO,GAAG,CAAA,EAAG,SAAA,EAAW,MAAA,EAAQ,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACxD,GAAA,CAAC,YAAO,OAAA,EAAS,MAAM,OAAO,GAAG,CAAA,EAAG,SAAA,EAAW,MAAA,EAAQ,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACxD,GAAA,CAAC,YAAO,OAAA,EAAS,MAAM,OAAO,GAAG,CAAA,EAAG,SAAA,EAAW,MAAA,EAAQ,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,4BACvD,QAAA,EAAA,EAAO,OAAA,EAAS,MAAM,QAAA,CAAS,GAAG,CAAA,EAAG,SAAA,EAAW,CAAA,EAAG,KAAK,IAAI,EAAA,KAAO,GAAA,GAAM,sBAAA,GAAyB,EAAE,IAAI,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBAE1G,GAAA,CAAC,QAAA,EAAA,EAAO,OAAA,EAAS,MAAM,MAAA,CAAO,GAAG,CAAA,EAAG,SAAA,EAAW,CAAA,EAAG,MAAM,CAAA,WAAA,CAAA,EAAe,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACxE,GAAA,CAAC,YAAO,OAAA,EAAS,MAAM,OAAO,GAAG,CAAA,EAAG,SAAA,EAAW,MAAA,EAAQ,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,4BACvD,QAAA,EAAA,EAAO,OAAA,EAAS,MAAA,EAAQ,SAAA,EAAW,OAAO,QAAA,EAAA,GAAA,EAAC;AAAA,OAAA,EAC9C;AAAA,KAAA,EAEF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QAAoB,IAAA,EAAM,YAAA;AAAA,QAAc,OAAA,EAAS,MAAM,eAAA,CAAgB,KAAK,CAAA;AAAA,QAAG,KAAA,EAAM,qBAAA;AAAA,QACpF,UAAA,EAAY,gBAAA;AAAA,QAAkB,kBAAA,EAAoB,mBAAA;AAAA,QAClD,QAAQ,MAAM;AAAE,UAAA,aAAA,CAAc,gBAAgB,CAAA;AAAG,UAAA,YAAA,CAAa,OAAA,CAAQ,iBAAA,EAAmB,IAAA,CAAK,SAAA,CAAU,gBAAgB,CAAC,CAAA;AAAG,UAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,QAAG;AAAA;AAAA;AAAG,GAAA,EACzJ,CAAA;AAEJ","file":"Calculator-BNBRNV4P.js","sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { useWidgetSettings } from '../shell/Modal';\nimport WidgetSettingsModal, { loadAppearance, type WidgetAppearance } from '../shell/WidgetSettingsModal';\n\ntype Op = '+' | '-' | '×' | '÷' | null;\nconst CALC_SETTINGS_KEY = 'calc_appearance';\n\nexport default function Calculator() {\n  const [display, setDisplay] = useState('0');\n  const [prev, setPrev] = useState<number | null>(null);\n  const [op, setOp] = useState<Op>(null);\n  const [resetNext, setResetNext] = useState(false);\n  const [lastExpr, setLastExpr] = useState('');\n  const [history, setHistory] = useState<string[]>([]);\n  const [copied, setCopied] = useState(false);\n  const [appearance, setAppearance] = useState(() => loadAppearance(CALC_SETTINGS_KEY));\n  const [settingsOpen, setSettingsOpen] = useState(false);\n  const [configAppearance, setConfigAppearance] = useState<WidgetAppearance>(appearance);\n\n  useWidgetSettings(useCallback(() => {\n    setConfigAppearance({ ...appearance });\n    setSettingsOpen(true);\n  }, [appearance]));\n\n  const append = useCallback((ch: string) => {\n    setLastExpr('');\n    setDisplay(d => {\n      if (resetNext || d === '0') {\n        setResetNext(false);\n        return ch === '.' ? '0.' : ch;\n      }\n      if (ch === '.' && d.includes('.')) return d;\n      return d + ch;\n    });\n  }, [resetNext]);\n\n  const clear = useCallback(() => {\n    setDisplay('0');\n    setPrev(null);\n    setOp(null);\n    setResetNext(false);\n  }, []);\n\n  const compute = useCallback((a: number, b: number, operator: Op): number => {\n    switch (operator) {\n      case '+': return a + b;\n      case '-': return a - b;\n      case '×': return a * b;\n      case '÷': return b === 0 ? 0 : a / b;\n      default: return b;\n    }\n  }, []);\n\n  const handleOp = useCallback((nextOp: Op) => {\n    const current = parseFloat(display);\n    if (prev !== null && op && !resetNext) {\n      const result = compute(prev, current, op);\n      setDisplay(String(result));\n      setPrev(result);\n      setHistory(h => [`${prev} ${op} ${current} = ${result}`, ...h].slice(0, 20));\n    } else {\n      setPrev(current);\n    }\n    setOp(nextOp);\n    setResetNext(true);\n  }, [display, prev, op, resetNext, compute]);\n\n  const equals = useCallback(() => {\n    if (prev === null || !op) return;\n    const current = parseFloat(display);\n    const result = compute(prev, current, op);\n    const expr = `${prev} ${op} ${current} =`;\n    setHistory(h => [`${expr} ${result}`, ...h].slice(0, 20));\n    setLastExpr(expr);\n    setDisplay(String(result));\n    setPrev(null);\n    setOp(null);\n    setResetNext(true);\n  }, [display, prev, op, compute]);\n\n  const percent = useCallback(() => {\n    setDisplay(d => String(parseFloat(d) / 100));\n  }, []);\n\n  const negate = useCallback(() => {\n    setDisplay(d => d.startsWith('-') ? d.slice(1) : d === '0' ? d : '-' + d);\n  }, []);\n\n  // Keyboard support\n  useEffect(() => {\n    const handler = (e: KeyboardEvent) => {\n      const tag = (e.target as HTMLElement).tagName;\n      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;\n      if (e.key >= '0' && e.key <= '9') append(e.key);\n      else if (e.key === '.') append('.');\n      else if (e.key === '+') handleOp('+');\n      else if (e.key === '-') handleOp('-');\n      else if (e.key === '*') handleOp('×');\n      else if (e.key === '/') { e.preventDefault(); handleOp('÷'); }\n      else if (e.key === 'Enter' || e.key === '=') equals();\n      else if (e.key === 'Escape') clear();\n      else if (e.key === 'Backspace') setDisplay(d => d.length > 1 ? d.slice(0, -1) : '0');\n      else if (e.key === '%') percent();\n    };\n    window.addEventListener('keydown', handler);\n    return () => window.removeEventListener('keydown', handler);\n  }, [append, handleOp, equals, clear, percent]);\n\n  const btn = 'flex items-center justify-center rounded-lg text-sm font-medium transition-colors';\n  const numBtn = `${btn} bg-white border border-gray-200 text-gray-900 hover:bg-gray-50 active:bg-gray-100`;\n  const opBtn = `${btn} bg-blue-50 border border-blue-200 text-blue-700 hover:bg-blue-100 active:bg-blue-200`;\n  const fnBtn = `${btn} bg-gray-100 border border-gray-200 text-gray-600 hover:bg-gray-200 active:bg-gray-300`;\n  const eqBtn = `${btn} bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800`;\n\n  // Format display for readability\n  const formatDisplay = (val: string) => {\n    const num = parseFloat(val);\n    if (isNaN(num)) return val;\n    if (val.endsWith('.') || val.endsWith('.0')) return val;\n    if (Math.abs(num) < 1e15 && val.length < 16) return val;\n    return num.toExponential(6);\n  };\n\n  return (\n    <>\n    <div className=\"flex flex-col h-full\" style={{\n      opacity: appearance.activeOpacity / 100,\n      backdropFilter: appearance.activeBlur > 0 ? `blur(${appearance.activeBlur}px)` : undefined,\n    }}>\n      {/* Display — 5-line area with history + current value */}\n      <div className=\"bg-slate-200 rounded-t-lg px-4 py-2 group/display relative flex flex-col justify-end min-h-[120px] border-b border-slate-300\">\n        {/* History lines (most recent at bottom, above current) */}\n        <div className=\"flex flex-col justify-end flex-1 overflow-hidden\">\n          {history.slice(0, 3).reverse().map((h, i) => (\n            <div key={i} className=\"text-[11px] text-slate-400 text-right font-mono truncate\">{h}</div>\n          ))}\n        </div>\n        {/* Current expression */}\n        {(lastExpr || (op && prev !== null)) && (\n          <div className=\"text-base text-slate-600 text-right font-mono\">\n            {lastExpr || `${prev} ${op} ${!resetNext ? display : ''}`}\n          </div>\n        )}\n        {/* Current value */}\n        <div className=\"flex items-center gap-2\">\n          <button onClick={() => { navigator.clipboard.writeText(display); setCopied(true); setTimeout(() => setCopied(false), 1200); }}\n            title=\"Copy result\"\n            className=\"shrink-0 text-slate-300 hover:text-slate-500 transition-colors opacity-0 group-hover/display:opacity-100\">\n            {copied\n              ? <svg className=\"h-5 w-5 text-green-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}><path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" /></svg>\n              : <svg className=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}><path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\" /></svg>\n            }\n          </button>\n          <div className=\"text-right text-4xl font-mono font-bold text-slate-800 truncate flex-1\">\n            {formatDisplay(display)}\n          </div>\n        </div>\n      </div>\n\n      {/* Buttons */}\n      <div className=\"grid grid-cols-4 grid-rows-5 gap-1.5 flex-1 min-h-0 p-2\">\n        <button onClick={clear} className={fnBtn}>AC</button>\n        <button onClick={negate} className={fnBtn}>+/−</button>\n        <button onClick={percent} className={fnBtn}>%</button>\n        <button onClick={() => handleOp('÷')} className={`${opBtn} ${op === '÷' ? 'ring-2 ring-blue-400' : ''}`}>÷</button>\n\n        <button onClick={() => append('7')} className={numBtn}>7</button>\n        <button onClick={() => append('8')} className={numBtn}>8</button>\n        <button onClick={() => append('9')} className={numBtn}>9</button>\n        <button onClick={() => handleOp('×')} className={`${opBtn} ${op === '×' ? 'ring-2 ring-blue-400' : ''}`}>×</button>\n\n        <button onClick={() => append('4')} className={numBtn}>4</button>\n        <button onClick={() => append('5')} className={numBtn}>5</button>\n        <button onClick={() => append('6')} className={numBtn}>6</button>\n        <button onClick={() => handleOp('-')} className={`${opBtn} ${op === '-' ? 'ring-2 ring-blue-400' : ''}`}>−</button>\n\n        <button onClick={() => append('1')} className={numBtn}>1</button>\n        <button onClick={() => append('2')} className={numBtn}>2</button>\n        <button onClick={() => append('3')} className={numBtn}>3</button>\n        <button onClick={() => handleOp('+')} className={`${opBtn} ${op === '+' ? 'ring-2 ring-blue-400' : ''}`}>+</button>\n\n        <button onClick={() => append('0')} className={`${numBtn} col-span-2`}>0</button>\n        <button onClick={() => append('.')} className={numBtn}>.</button>\n        <button onClick={equals} className={eqBtn}>=</button>\n      </div>\n\n    </div>\n    <WidgetSettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} title=\"Calculator Settings\"\n      appearance={configAppearance} onAppearanceChange={setConfigAppearance}\n      onSave={() => { setAppearance(configAppearance); localStorage.setItem(CALC_SETTINGS_KEY, JSON.stringify(configAppearance)); setSettingsOpen(false); }} />\n    </>\n  );\n}\n"]}