react-os-shell 0.1.0

package/dist/chunk-TFGOLXGD.js

@@ -0,0 +1,41 @@
+import { createContext, useState, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/shell/ShellPrefs.tsx
+var ShellPrefsContext = createContext(null);
+function ShellPrefsProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ShellPrefsContext.Provider, { value, children });
+}
+function useLocalStoragePrefs(storageKey = "react-os-shell:prefs") {
+  const [prefs, setPrefs] = useState(() => {
+    try {
+      return JSON.parse(localStorage.getItem(storageKey) || "{}");
+    } catch {
+      return {};
+    }
+  });
+  const save = useCallback((patch) => {
+    setPrefs((prev) => {
+      const next = { ...prev, ...patch };
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(next));
+      } catch {
+      }
+      return next;
+    });
+  }, [storageKey]);
+  return { prefs, save };
+}
+function useShellPrefs() {
+  const ctx = useContext(ShellPrefsContext);
+  if (ctx) return ctx;
+  return { prefs: {}, save: () => {
+  } };
+}
+
+export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs };
+//# sourceMappingURL=chunk-TFGOLXGD.js.map
+//# sourceMappingURL=chunk-TFGOLXGD.js.map

package/dist/chunk-TFGOLXGD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell/ShellPrefs.tsx"],"names":[],"mappings":";;;;AAqBA,IAAM,iBAAA,GAAoB,cAAwC,IAAI,CAAA;AAE/D,SAAS,kBAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA;AACF,CAAA,EAAsD;AACpD,EAAA,uBAAO,GAAA,CAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,OAAe,QAAA,EAAS,CAAA;AAC7D;AAIO,SAAS,oBAAA,CAAqB,aAAa,sBAAA,EAA2C;AAC3F,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAA8B,MAAM;AAC5D,IAAA,IAAI;AAAE,MAAA,OAAO,KAAK,KAAA,CAAM,YAAA,CAAa,OAAA,CAAQ,UAAU,KAAK,IAAI,CAAA;AAAA,IAAG,CAAA,CAAA,MAAQ;AAAE,MAAA,OAAO,EAAC;AAAA,IAAG;AAAA,EAC1F,CAAC,CAAA;AACD,EAAA,MAAM,IAAA,GAAO,WAAA,CAAY,CAAC,KAAA,KAA+B;AACvD,IAAA,QAAA,CAAS,CAAA,IAAA,KAAQ;AACf,MAAA,MAAM,IAAA,GAAO,EAAE,GAAG,IAAA,EAAM,GAAG,KAAA,EAAM;AACjC,MAAA,IAAI;AAAE,QAAA,YAAA,CAAa,OAAA,CAAQ,UAAA,EAAY,IAAA,CAAK,SAAA,CAAU,IAAI,CAAC,CAAA;AAAA,MAAG,CAAA,CAAA,MAAQ;AAAA,MAAC;AACvE,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AACf,EAAA,OAAO,EAAE,OAAO,IAAA,EAAK;AACvB;AAKO,SAAS,aAAA,GAAmC;AACjD,EAAA,MAAM,GAAA,GAAM,WAAW,iBAAiB,CAAA;AACxC,EAAA,IAAI,KAAK,OAAO,GAAA;AAChB,EAAA,OAAO,EAAE,KAAA,EAAO,EAAC,EAAG,MAAM,MAAM;AAAA,EAAC,CAAA,EAAE;AACrC","file":"chunk-TFGOLXGD.js","sourcesContent":["/**\n * Shell-side user-preferences surface — the package never owns where prefs\n * live. The consumer supplies a hook returning the current prefs object plus\n * a save callback; the shell reads keys it knows about (theme,\n * taskbar_position, taskbar_size, world_clocks, favorite_documents,\n * desktop_folders, desktop_snap, notepad_notes, …) and patches them.\n *\n * When no provider is mounted, the shell falls back to localStorage scoped\n * by `storageKey` — so the package works out of the box for a backend-less\n * consumer.\n */\nimport { createContext, useContext, useState, useCallback, type ReactNode } from 'react';\n\nexport interface ShellPrefsAdapter {\n  /** The current prefs object. The shell reads its known keys directly off\n   *  this; consumer-private keys are ignored. */\n  prefs: Record<string, any>;\n  /** Patch a subset of prefs. The shell calls this with shallow diffs. */\n  save: (patch: Record<string, any>) => Promise<void> | void;\n}\n\nconst ShellPrefsContext = createContext<ShellPrefsAdapter | null>(null);\n\nexport function ShellPrefsProvider({\n  value,\n  children,\n}: { value: ShellPrefsAdapter; children: ReactNode }) {\n  return <ShellPrefsContext.Provider value={value}>{children}</ShellPrefsContext.Provider>;\n}\n\n/** Default localStorage-backed adapter — useful when the consumer doesn't\n *  ship a backend. Pass the result into <ShellPrefsProvider value={…}>. */\nexport function useLocalStoragePrefs(storageKey = 'react-os-shell:prefs'): ShellPrefsAdapter {\n  const [prefs, setPrefs] = useState<Record<string, any>>(() => {\n    try { return JSON.parse(localStorage.getItem(storageKey) || '{}'); } catch { return {}; }\n  });\n  const save = useCallback((patch: Record<string, any>) => {\n    setPrefs(prev => {\n      const next = { ...prev, ...patch };\n      try { localStorage.setItem(storageKey, JSON.stringify(next)); } catch {}\n      return next;\n    });\n  }, [storageKey]);\n  return { prefs, save };\n}\n\n/** Returns the active prefs adapter. When no provider is mounted, returns a\n *  no-op adapter that reads as empty and silently drops saves — components\n *  still render, but persistence is a no-op. */\nexport function useShellPrefs(): ShellPrefsAdapter {\n  const ctx = useContext(ShellPrefsContext);\n  if (ctx) return ctx;\n  return { prefs: {}, save: () => {} };\n}\n"]}

package/dist/chunk-WIJ45SYD.js

@@ -0,0 +1,120 @@
+// src/shell/toast.ts
+var TOAST_CONTAINER_ID = "toast-container";
+var NOTIF_CONTAINER_ID = "notif-container";
+var FADE_MS = 300;
+function getOrCreate(id, className) {
+  let el = document.getElementById(id);
+  if (!el) {
+    el = document.createElement("div");
+    el.id = id;
+    el.className = className;
+    document.body.appendChild(el);
+  }
+  return el;
+}
+function getMenuOpacity() {
+  try {
+    const val = getComputedStyle(document.documentElement).getPropertyValue("--menu-opacity")?.trim();
+    if (val) return parseFloat(val);
+  } catch {
+  }
+  return 0.95;
+}
+function glassBackground(o) {
+  return `linear-gradient(135deg, rgba(255,255,255,${o * 0.85}) 0%, rgba(255,255,255,${o * 0.65}) 50%, rgba(255,255,255,${o * 0.75}) 100%)`;
+}
+var GLASS_COMMON = `
+  backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8);
+  border: 1px solid rgba(255,255,255,0.35);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
+`;
+function showToast(variant, message) {
+  import('./sounds-NT4DEZGD.js').then((s) => {
+    if (variant === "success") s.playSuccess();
+    else s.playError();
+  }).catch(() => {
+  });
+  const container = getOrCreate(TOAST_CONTAINER_ID, "fixed top-4 left-1/2 -translate-x-1/2 z-[9999] flex flex-col gap-2 items-center pointer-events-none");
+  const o = getMenuOpacity();
+  const isSuccess = variant === "success";
+  const color = isSuccess ? "#22c55e" : "#ef4444";
+  const icon = isSuccess ? '<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="' + color + '" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>' : '<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="' + color + '" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>';
+  const el = document.createElement("div");
+  el.className = "pointer-events-auto";
+  el.style.cssText = `
+    padding: 8px 20px; border-radius: 12px;
+    background: ${glassBackground(o)}; ${GLASS_COMMON}
+    opacity: 0; transform: translateY(-10px) scale(0.95);
+    transition: opacity ${FADE_MS}ms ease, transform ${FADE_MS}ms ease;
+    display: flex; align-items: center; gap: 8px;
+    font-size: 13px; font-weight: 500; color: rgb(55,65,81);
+    white-space: nowrap;
+  `;
+  el.innerHTML = icon;
+  const span = document.createElement("span");
+  span.textContent = message;
+  el.appendChild(span);
+  container.appendChild(el);
+  requestAnimationFrame(() => {
+    el.style.opacity = "1";
+    el.style.transform = "translateY(0) scale(1)";
+  });
+  setTimeout(() => {
+    el.style.opacity = "0";
+    el.style.transform = "translateY(-10px) scale(0.95)";
+    setTimeout(() => el.remove(), FADE_MS);
+  }, 3e3);
+}
+function showNotification(message, opts) {
+  import('./sounds-NT4DEZGD.js').then((s) => s.playNotification()).catch(() => {
+  });
+  const container = getOrCreate(NOTIF_CONTAINER_ID, "fixed top-4 right-4 z-[9999] flex flex-col gap-3 items-end pointer-events-none");
+  const o = getMenuOpacity();
+  const el = document.createElement("div");
+  el.className = "pointer-events-auto cursor-pointer";
+  el.style.cssText = `
+    min-width: 280px; max-width: 380px; padding: 12px 16px; border-radius: 16px;
+    background: ${glassBackground(o)}; ${GLASS_COMMON}
+    opacity: 0; transform: translateX(30px) scale(0.95);
+    transition: opacity ${FADE_MS}ms cubic-bezier(0.4,0,0.2,1), transform ${FADE_MS}ms cubic-bezier(0.4,0,0.2,1);
+    display: flex; align-items: flex-start; gap: 12px;
+  `;
+  el.innerHTML = `
+    <div style="width: 36px; height: 36px; border-radius: 10px; background: rgba(59,130,246,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
+      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="#3b82f6" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/></svg>
+    </div>
+    <div style="flex: 1; min-width: 0;">
+      <div style="font-size: 11px; font-weight: 600; color: #3b82f6; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">Notification</div>
+      <div class="notif-msg" style="font-size: 13px; font-weight: 500; color: rgb(55,65,81); line-height: 1.4;"></div>
+    </div>
+    <button style="flex-shrink: 0; padding: 4px; color: rgb(156,163,175); font-size: 18px; line-height: 1; transition: color 0.2s;" onmouseenter="this.style.color='rgb(75,85,99)'" onmouseleave="this.style.color='rgb(156,163,175)'">&times;</button>
+  `;
+  const msgEl = el.querySelector(".notif-msg");
+  if (msgEl) msgEl.textContent = message;
+  const dismiss = () => {
+    el.style.opacity = "0";
+    el.style.transform = "translateX(30px) scale(0.95)";
+    setTimeout(() => el.remove(), FADE_MS);
+  };
+  el.querySelector("button")?.addEventListener("click", (e) => {
+    e.stopPropagation();
+    dismiss();
+  });
+  el.addEventListener("click", dismiss);
+  container.appendChild(el);
+  requestAnimationFrame(() => {
+    el.style.opacity = "1";
+    el.style.transform = "translateX(0) scale(1)";
+  });
+  setTimeout(dismiss, opts?.duration ?? 1e4);
+}
+var toast = {
+  success: (message) => showToast("success", message),
+  error: (message) => showToast("error", message),
+  info: (message, opts) => showNotification(message, opts)
+};
+var toast_default = toast;
+
+export { toast_default };
+//# sourceMappingURL=chunk-WIJ45SYD.js.map
+//# sourceMappingURL=chunk-WIJ45SYD.js.map

package/dist/chunk-WIJ45SYD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell/toast.ts"],"names":[],"mappings":";AAOA,IAAM,kBAAA,GAAqB,iBAAA;AAC3B,IAAM,kBAAA,GAAqB,iBAAA;AAC3B,IAAM,OAAA,GAAU,GAAA;AAEhB,SAAS,WAAA,CAAY,IAAY,SAAA,EAAgC;AAC/D,EAAA,IAAI,EAAA,GAAK,QAAA,CAAS,cAAA,CAAe,EAAE,CAAA;AACnC,EAAA,IAAI,CAAC,EAAA,EAAI;AACP,IAAA,EAAA,GAAK,QAAA,CAAS,cAAc,KAAK,CAAA;AACjC,IAAA,EAAA,CAAG,EAAA,GAAK,EAAA;AACR,IAAA,EAAA,CAAG,SAAA,GAAY,SAAA;AACf,IAAA,QAAA,CAAS,IAAA,CAAK,YAAY,EAAE,CAAA;AAAA,EAC9B;AACA,EAAA,OAAO,EAAA;AACT;AAEA,SAAS,cAAA,GAAyB;AAChC,EAAA,IAAI;AACF,IAAA,MAAM,GAAA,GAAM,iBAAiB,QAAA,CAAS,eAAe,EAAE,gBAAA,CAAiB,gBAAgB,GAAG,IAAA,EAAK;AAChG,IAAA,IAAI,GAAA,EAAK,OAAO,UAAA,CAAW,GAAG,CAAA;AAAA,EAChC,CAAA,CAAA,MAAQ;AAAA,EAAC;AACT,EAAA,OAAO,IAAA;AACT;AAEA,SAAS,gBAAgB,CAAA,EAAmB;AAC1C,EAAA,OAAO,CAAA,yCAAA,EAA4C,IAAI,IAAI,CAAA,uBAAA,EAA0B,IAAI,IAAI,CAAA,wBAAA,EAA2B,IAAI,IAAI,CAAA,OAAA,CAAA;AAClI;AAEA,IAAM,YAAA,GAAe;AAAA;AAAA;AAAA;AAAA,CAAA;AAQrB,SAAS,SAAA,CAAU,SAA8B,OAAA,EAAiB;AAChE,EAAA,OAAO,sBAAiB,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK;AAClC,IAAA,IAAI,OAAA,KAAY,SAAA,EAAW,CAAA,CAAE,WAAA,EAAY;AAAA,WAClC,SAAA,EAAU;AAAA,EACnB,CAAC,CAAA,CAAE,KAAA,CAAM,MAAM;AAAA,EAAC,CAAC,CAAA;AAEjB,EAAA,MAAM,SAAA,GAAY,WAAA,CAAY,kBAAA,EAAoB,qGAAqG,CAAA;AACvJ,EAAA,MAAM,IAAI,cAAA,EAAe;AACzB,EAAA,MAAM,YAAY,OAAA,KAAY,SAAA;AAC9B,EAAA,MAAM,KAAA,GAAQ,YAAY,SAAA,GAAY,SAAA;AACtC,EAAA,MAAM,OAAO,SAAA,GACT,+DAAA,GAAkE,KAAA,GAAQ,oGAAA,GAC1E,kEAAkE,KAAA,GAAQ,0GAAA;AAE9E,EAAA,MAAM,EAAA,GAAK,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AACvC,EAAA,EAAA,CAAG,SAAA,GAAY,qBAAA;AACf,EAAA,EAAA,CAAG,MAAM,OAAA,GAAU;AAAA;AAAA,gBAAA,EAEH,eAAA,CAAgB,CAAC,CAAC,CAAA,EAAA,EAAK,YAAY;AAAA;AAAA,wBAAA,EAE3B,OAAO,sBAAsB,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAK5D,EAAA,EAAA,CAAG,SAAA,GAAY,IAAA;AACf,EAAA,MAAM,IAAA,GAAO,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAC1C,EAAA,IAAA,CAAK,WAAA,GAAc,OAAA;AACnB,EAAA,EAAA,CAAG,YAAY,IAAI,CAAA;AAEnB,EAAA,SAAA,CAAU,YAAY,EAAE,CAAA;AACxB,EAAA,qBAAA,CAAsB,MAAM;AAAE,IAAA,EAAA,CAAG,MAAM,OAAA,GAAU,GAAA;AAAK,IAAA,EAAA,CAAG,MAAM,SAAA,GAAY,wBAAA;AAAA,EAA0B,CAAC,CAAA;AAEtG,EAAA,UAAA,CAAW,MAAM;AACf,IAAA,EAAA,CAAG,MAAM,OAAA,GAAU,GAAA;AACnB,IAAA,EAAA,CAAG,MAAM,SAAA,GAAY,+BAAA;AACrB,IAAA,UAAA,CAAW,MAAM,EAAA,CAAG,MAAA,EAAO,EAAG,OAAO,CAAA;AAAA,EACvC,GAAG,GAAI,CAAA;AACT;AAIA,SAAS,gBAAA,CAAiB,SAAiB,IAAA,EAA8B;AACvE,EAAA,OAAO,sBAAiB,EAAE,IAAA,CAAK,CAAA,CAAA,KAAK,EAAE,gBAAA,EAAkB,CAAA,CAAE,KAAA,CAAM,MAAM;AAAA,EAAC,CAAC,CAAA;AAExE,EAAA,MAAM,SAAA,GAAY,WAAA,CAAY,kBAAA,EAAoB,gFAAgF,CAAA;AAClI,EAAA,MAAM,IAAI,cAAA,EAAe;AAEzB,EAAA,MAAM,EAAA,GAAK,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AACvC,EAAA,EAAA,CAAG,SAAA,GAAY,oCAAA;AACf,EAAA,EAAA,CAAG,MAAM,OAAA,GAAU;AAAA;AAAA,gBAAA,EAEH,eAAA,CAAgB,CAAC,CAAC,CAAA,EAAA,EAAK,YAAY;AAAA;AAAA,wBAAA,EAE3B,OAAO,2CAA2C,OAAO,CAAA;AAAA;AAAA,EAAA,CAAA;AAIjF,EAAA,EAAA,CAAG,SAAA,GAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAWf,EAAA,MAAM,KAAA,GAAQ,EAAA,CAAG,aAAA,CAAc,YAAY,CAAA;AAC3C,EAAA,IAAI,KAAA,QAAa,WAAA,GAAc,OAAA;AAE/B,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,EAAA,CAAG,MAAM,OAAA,GAAU,GAAA;AACnB,IAAA,EAAA,CAAG,MAAM,SAAA,GAAY,8BAAA;AACrB,IAAA,UAAA,CAAW,MAAM,EAAA,CAAG,MAAA,EAAO,EAAG,OAAO,CAAA;AAAA,EACvC,CAAA;AAEA,EAAA,EAAA,CAAG,cAAc,QAAQ,CAAA,EAAG,gBAAA,CAAiB,OAAA,EAAS,CAAC,CAAA,KAAM;AAAE,IAAA,CAAA,CAAE,eAAA,EAAgB;AAAG,IAAA,OAAA,EAAQ;AAAA,EAAG,CAAC,CAAA;AAChG,EAAA,EAAA,CAAG,gBAAA,CAAiB,SAAS,OAAO,CAAA;AAEpC,EAAA,SAAA,CAAU,YAAY,EAAE,CAAA;AACxB,EAAA,qBAAA,CAAsB,MAAM;AAAE,IAAA,EAAA,CAAG,MAAM,OAAA,GAAU,GAAA;AAAK,IAAA,EAAA,CAAG,MAAM,SAAA,GAAY,wBAAA;AAAA,EAA0B,CAAC,CAAA;AAEtG,EAAA,UAAA,CAAW,OAAA,EAAS,IAAA,EAAM,QAAA,IAAY,GAAK,CAAA;AAC7C;AAEA,IAAM,KAAA,GAAQ;AAAA,EACZ,OAAA,EAAS,CAAC,OAAA,KAAoB,SAAA,CAAU,WAAW,OAAO,CAAA;AAAA,EAC1D,KAAA,EAAO,CAAC,OAAA,KAAoB,SAAA,CAAU,SAAS,OAAO,CAAA;AAAA,EACtD,MAAM,CAAC,OAAA,EAAiB,IAAA,KAAiC,gBAAA,CAAiB,SAAS,IAAI;AACzF,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"chunk-WIJ45SYD.js","sourcesContent":["/**\n * Two notification systems:\n *\n * 1. toast.success/error — operation feedback, top-center, auto-dismiss 3s\n * 2. toast.info — system notification, top-right, stays 10s, dismissible\n */\n\nconst TOAST_CONTAINER_ID = 'toast-container';\nconst NOTIF_CONTAINER_ID = 'notif-container';\nconst FADE_MS = 300;\n\nfunction getOrCreate(id: string, className: string): HTMLElement {\n  let el = document.getElementById(id);\n  if (!el) {\n    el = document.createElement('div');\n    el.id = id;\n    el.className = className;\n    document.body.appendChild(el);\n  }\n  return el;\n}\n\nfunction getMenuOpacity(): number {\n  try {\n    const val = getComputedStyle(document.documentElement).getPropertyValue('--menu-opacity')?.trim();\n    if (val) return parseFloat(val);\n  } catch {}\n  return 0.95;\n}\n\nfunction glassBackground(o: number): string {\n  return `linear-gradient(135deg, rgba(255,255,255,${o * 0.85}) 0%, rgba(255,255,255,${o * 0.65}) 50%, rgba(255,255,255,${o * 0.75}) 100%)`;\n}\n\nconst GLASS_COMMON = `\n  backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8);\n  border: 1px solid rgba(255,255,255,0.35);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);\n`;\n\n// ── Toast (operation feedback) — top-center, brief ──\n\nfunction showToast(variant: 'success' | 'error', message: string) {\n  import('../utils/sounds').then(s => {\n    if (variant === 'success') s.playSuccess();\n    else s.playError();\n  }).catch(() => {});\n\n  const container = getOrCreate(TOAST_CONTAINER_ID, 'fixed top-4 left-1/2 -translate-x-1/2 z-[9999] flex flex-col gap-2 items-center pointer-events-none');\n  const o = getMenuOpacity();\n  const isSuccess = variant === 'success';\n  const color = isSuccess ? '#22c55e' : '#ef4444';\n  const icon = isSuccess\n    ? '<svg class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"' + color + '\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"/></svg>'\n    : '<svg class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"' + color + '\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"/></svg>';\n\n  const el = document.createElement('div');\n  el.className = 'pointer-events-auto';\n  el.style.cssText = `\n    padding: 8px 20px; border-radius: 12px;\n    background: ${glassBackground(o)}; ${GLASS_COMMON}\n    opacity: 0; transform: translateY(-10px) scale(0.95);\n    transition: opacity ${FADE_MS}ms ease, transform ${FADE_MS}ms ease;\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; font-weight: 500; color: rgb(55,65,81);\n    white-space: nowrap;\n  `;\n  el.innerHTML = icon;\n  const span = document.createElement('span');\n  span.textContent = message;\n  el.appendChild(span);\n\n  container.appendChild(el);\n  requestAnimationFrame(() => { el.style.opacity = '1'; el.style.transform = 'translateY(0) scale(1)'; });\n\n  setTimeout(() => {\n    el.style.opacity = '0';\n    el.style.transform = 'translateY(-10px) scale(0.95)';\n    setTimeout(() => el.remove(), FADE_MS);\n  }, 3000);\n}\n\n// ── Notification (system alert) — top-right, stays longer ──\n\nfunction showNotification(message: string, opts?: { duration?: number }) {\n  import('../utils/sounds').then(s => s.playNotification()).catch(() => {});\n\n  const container = getOrCreate(NOTIF_CONTAINER_ID, 'fixed top-4 right-4 z-[9999] flex flex-col gap-3 items-end pointer-events-none');\n  const o = getMenuOpacity();\n\n  const el = document.createElement('div');\n  el.className = 'pointer-events-auto cursor-pointer';\n  el.style.cssText = `\n    min-width: 280px; max-width: 380px; padding: 12px 16px; border-radius: 16px;\n    background: ${glassBackground(o)}; ${GLASS_COMMON}\n    opacity: 0; transform: translateX(30px) scale(0.95);\n    transition: opacity ${FADE_MS}ms cubic-bezier(0.4,0,0.2,1), transform ${FADE_MS}ms cubic-bezier(0.4,0,0.2,1);\n    display: flex; align-items: flex-start; gap: 12px;\n  `;\n\n  el.innerHTML = `\n    <div style=\"width: 36px; height: 36px; border-radius: 10px; background: rgba(59,130,246,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0;\">\n      <svg class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"#3b82f6\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0\"/></svg>\n    </div>\n    <div style=\"flex: 1; min-width: 0;\">\n      <div style=\"font-size: 11px; font-weight: 600; color: #3b82f6; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;\">Notification</div>\n      <div class=\"notif-msg\" style=\"font-size: 13px; font-weight: 500; color: rgb(55,65,81); line-height: 1.4;\"></div>\n    </div>\n    <button style=\"flex-shrink: 0; padding: 4px; color: rgb(156,163,175); font-size: 18px; line-height: 1; transition: color 0.2s;\" onmouseenter=\"this.style.color='rgb(75,85,99)'\" onmouseleave=\"this.style.color='rgb(156,163,175)'\">&times;</button>\n  `;\n\n  const msgEl = el.querySelector('.notif-msg');\n  if (msgEl) msgEl.textContent = message;\n\n  const dismiss = () => {\n    el.style.opacity = '0';\n    el.style.transform = 'translateX(30px) scale(0.95)';\n    setTimeout(() => el.remove(), FADE_MS);\n  };\n\n  el.querySelector('button')?.addEventListener('click', (e) => { e.stopPropagation(); dismiss(); });\n  el.addEventListener('click', dismiss);\n\n  container.appendChild(el);\n  requestAnimationFrame(() => { el.style.opacity = '1'; el.style.transform = 'translateX(0) scale(1)'; });\n\n  setTimeout(dismiss, opts?.duration ?? 10000);\n}\n\nconst toast = {\n  success: (message: string) => showToast('success', message),\n  error: (message: string) => showToast('error', message),\n  info: (message: string, opts?: { duration?: number }) => showNotification(message, opts),\n};\n\nexport default toast;\n"]}