@togo-framework/ui-desktop 0.1.0

package/dist/index.js

@@ -0,0 +1,1836 @@
+// src/components/desktop/DesktopShell.tsx
+import * as React7 from "react";
+import { wallpaperCss } from "@togo-framework/ui-core";
+
+// src/components/desktop/TopBar.tsx
+import * as React2 from "react";
+import { LogOut as LogOut2, User } from "lucide-react";
+import { Avatar, AvatarFallback } from "@togo-framework/ui-core";
+import {
+  DropdownMenu as DropdownMenu2,
+  DropdownMenuContent as DropdownMenuContent2,
+  DropdownMenuItem as DropdownMenuItem2,
+  DropdownMenuSeparator as DropdownMenuSeparator2,
+  DropdownMenuTrigger as DropdownMenuTrigger2
+} from "@togo-framework/ui-core";
+
+// src/components/desktop/TogoMenu.tsx
+import { Layers, Info, Settings, Moon, RotateCcw, Power, LogOut } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@togo-framework/ui-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TogoMenu({
+  logo,
+  label = "togo",
+  onAbout,
+  onSettings,
+  onSleep,
+  onRestart,
+  onShutDown,
+  onLogout
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenuTrigger, { className: "flex items-center gap-1.5 rounded-md px-2 py-1 font-semibold outline-none transition hover:bg-white/10", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: logo ?? /* @__PURE__ */ jsx(Layers, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: label })
+    ] }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-56", children: [
+      onAbout && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onAbout, children: [
+        /* @__PURE__ */ jsx(Info, { className: "me-2 h-4 w-4" }),
+        "About This Desktop"
+      ] }),
+      onSettings && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onSettings, children: [
+        /* @__PURE__ */ jsx(Settings, { className: "me-2 h-4 w-4" }),
+        "System Settings\u2026"
+      ] }),
+      (onAbout || onSettings) && (onSleep || onRestart || onShutDown || onLogout) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      onSleep && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onSleep, children: [
+        /* @__PURE__ */ jsx(Moon, { className: "me-2 h-4 w-4" }),
+        "Sleep"
+      ] }),
+      onRestart && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onRestart, children: [
+        /* @__PURE__ */ jsx(RotateCcw, { className: "me-2 h-4 w-4" }),
+        "Restart\u2026"
+      ] }),
+      onShutDown && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onShutDown, children: [
+        /* @__PURE__ */ jsx(Power, { className: "me-2 h-4 w-4" }),
+        "Shut Down\u2026"
+      ] }),
+      onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "text-destructive", onClick: onLogout, children: [
+          /* @__PURE__ */ jsx(LogOut, { className: "me-2 h-4 w-4" }),
+          "Log Out"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+TogoMenu.displayName = "TogoMenu";
+
+// src/components/desktop/WeatherWidget.tsx
+import { Cloud, CloudRain, CloudSnow, CloudLightning, Sun, CloudSun, CloudFog } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ICONS = {
+  clear: Sun,
+  partly: CloudSun,
+  cloudy: Cloud,
+  rain: CloudRain,
+  snow: CloudSnow,
+  storm: CloudLightning,
+  fog: CloudFog
+};
+function WeatherWidget({ weather, onClick, className }) {
+  if (!weather) return null;
+  const Icon = ICONS[weather.condition] ?? Cloud;
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title: weather.location ? `${weather.location} \u2014 ${weather.condition}` : weather.condition,
+      className: ["flex items-center gap-1.5 rounded-md px-2 py-1 transition hover:bg-white/10", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx2(Icon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxs2("span", { className: "tabular-nums", children: [
+          Math.round(weather.temp),
+          weather.unit ?? "\xB0"
+        ] })
+      ]
+    }
+  );
+}
+WeatherWidget.displayName = "WeatherWidget";
+
+// src/components/desktop/Spotlight.tsx
+import * as React from "react";
+import { Search } from "lucide-react";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem
+} from "@togo-framework/ui-core";
+import { DynamicIcon } from "@togo-framework/ui-core";
+import { cn } from "@togo-framework/ui-core";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Spotlight({ open, onOpenChange, apps, onLaunch }) {
+  const [mounted, setMounted] = React.useState(open);
+  const [shown, setShown] = React.useState(false);
+  React.useEffect(() => {
+    const onKey = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        onOpenChange(!open);
+      } else if (e.key === "Escape" && open) {
+        onOpenChange(false);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onOpenChange]);
+  React.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      const t2 = setTimeout(() => setShown(true), 10);
+      return () => clearTimeout(t2);
+    }
+    setShown(false);
+    const t = setTimeout(() => setMounted(false), 200);
+    return () => clearTimeout(t);
+  }, [open]);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-[70] flex items-start justify-center bg-black/30 backdrop-blur-md transition-opacity duration-200",
+        shown ? "opacity-100" : "opacity-0"
+      ),
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onOpenChange(false);
+      },
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: cn(
+            "mt-[16vh] w-[92vw] max-w-xl origin-top overflow-hidden rounded-2xl border border-border/60 bg-popover/90 shadow-2xl backdrop-blur-2xl transition-all duration-200 ease-out",
+            shown ? "translate-y-0 scale-100 opacity-100" : "-translate-y-3 scale-95 opacity-0"
+          ),
+          children: /* @__PURE__ */ jsxs3(Command, { className: "bg-transparent [&_[cmdk-input]]:h-12", children: [
+            /* @__PURE__ */ jsx3(CommandInput, { autoFocus: true, placeholder: "Spotlight Search", className: "text-base" }),
+            /* @__PURE__ */ jsxs3(CommandList, { className: "max-h-[50vh]", children: [
+              /* @__PURE__ */ jsx3(CommandEmpty, { children: "No apps found." }),
+              /* @__PURE__ */ jsx3(CommandGroup, { heading: "Applications", children: apps.map((app) => /* @__PURE__ */ jsxs3(
+                CommandItem,
+                {
+                  value: `${app.name} ${app.slug} ${app.category}`,
+                  onSelect: () => {
+                    onLaunch(app.slug);
+                    onOpenChange(false);
+                  },
+                  className: "gap-3",
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      "span",
+                      {
+                        className: "flex h-9 w-9 items-center justify-center rounded-[10px] text-white ring-1 ring-inset ring-white/25",
+                        style: { backgroundImage: `linear-gradient(160deg, ${app.color || "#64748b"}, ${app.color || "#64748b"}bb)` },
+                        children: /* @__PURE__ */ jsx3(DynamicIcon, { name: app.icon, size: 18 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs3("span", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium", children: app.name }),
+                      /* @__PURE__ */ jsx3("span", { className: "text-xs capitalize text-muted-foreground", children: app.category })
+                    ] })
+                  ]
+                },
+                app.slug
+              )) })
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+Spotlight.displayName = "Spotlight";
+function SpotlightTrigger({ onClick, className }) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title: "Search (\u2318K)",
+      className,
+      "aria-label": "Open Spotlight search",
+      children: /* @__PURE__ */ jsx3(Search, { className: "h-4 w-4" })
+    }
+  );
+}
+
+// src/components/desktop/TopBar.tsx
+import { cn as cn2 } from "@togo-framework/ui-core";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function useClock() {
+  const [now, setNow] = React2.useState(() => /* @__PURE__ */ new Date());
+  React2.useEffect(() => {
+    const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3 * 15);
+    return () => clearInterval(id);
+  }, []);
+  return now;
+}
+function TopBar({
+  me,
+  onLogout,
+  onProfile,
+  menu,
+  onOpenNotifications,
+  onOpenSpotlight,
+  weather,
+  onWeatherClick,
+  className
+}) {
+  const now = useClock();
+  const clock = now.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  const dateStr = now.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
+  const initial = me?.email?.[0]?.toUpperCase() ?? "?";
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn2(
+        "fixed inset-x-0 top-0 z-50 flex h-9 items-center justify-between gap-3 bg-black/25 px-2 text-xs text-white backdrop-blur-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-1", children: menu?.enabled !== false && /* @__PURE__ */ jsx4(TogoMenu, { ...menu, onLogout }) }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx4(WeatherWidget, { weather, onClick: onWeatherClick, className: "text-white/90" }),
+          onOpenSpotlight && /* @__PURE__ */ jsx4(
+            SpotlightTrigger,
+            {
+              onClick: onOpenSpotlight,
+              className: "flex h-7 w-7 items-center justify-center rounded-md text-white/90 transition hover:bg-white/10"
+            }
+          ),
+          me && /* @__PURE__ */ jsxs4(DropdownMenu2, { children: [
+            /* @__PURE__ */ jsx4(DropdownMenuTrigger2, { className: "flex items-center gap-2 rounded-full p-0.5 outline-none transition hover:bg-white/10", children: /* @__PURE__ */ jsx4(Avatar, { className: "h-6 w-6", children: /* @__PURE__ */ jsx4(AvatarFallback, { className: "bg-white/20 text-[10px] text-white", children: initial }) }) }),
+            /* @__PURE__ */ jsxs4(DropdownMenuContent2, { align: "end", className: "w-56", children: [
+              /* @__PURE__ */ jsx4("div", { className: "truncate px-2 py-1.5 text-xs text-muted-foreground", children: me.email }),
+              /* @__PURE__ */ jsx4(DropdownMenuSeparator2, {}),
+              onProfile && /* @__PURE__ */ jsxs4(DropdownMenuItem2, { onClick: onProfile, children: [
+                /* @__PURE__ */ jsx4(User, { className: "me-2 h-4 w-4" }),
+                "Profile"
+              ] }),
+              /* @__PURE__ */ jsxs4(DropdownMenuItem2, { className: "text-destructive", onClick: onLogout, children: [
+                /* @__PURE__ */ jsx4(LogOut2, { className: "me-2 h-4 w-4" }),
+                "Sign out"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              onClick: onOpenNotifications,
+              className: "flex items-center gap-2 rounded-md px-2 py-1 font-medium transition hover:bg-white/10",
+              title: "Open Notification Center",
+              children: [
+                /* @__PURE__ */ jsx4("span", { className: "hidden text-white/80 sm:inline", children: dateStr }),
+                /* @__PURE__ */ jsx4("span", { children: clock })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+TopBar.displayName = "TopBar";
+
+// src/components/desktop/Dock.tsx
+import * as React3 from "react";
+import { LayoutGrid, Trash2, SquareArrowOutUpRight, X, PinOff } from "lucide-react";
+import { DynamicIcon as DynamicIcon2 } from "@togo-framework/ui-core";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem
+} from "@togo-framework/ui-core";
+import { cn as cn3 } from "@togo-framework/ui-core";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var DockButton = React3.forwardRef(
+  ({ label, color, isOpen, children, ...rest }, ref) => {
+    const base = color || "#64748b";
+    return /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        ref,
+        type: "button",
+        title: label,
+        ...rest,
+        className: "group relative flex flex-col items-center transition-transform duration-150 ease-out hover:-translate-y-1.5",
+        children: [
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              className: "flex h-11 w-11 items-center justify-center rounded-[14px] text-white shadow-md ring-1 ring-inset ring-white/25 transition-shadow group-hover:shadow-xl",
+              style: { backgroundImage: `linear-gradient(160deg, ${base}, ${base}bb)` },
+              children: /* @__PURE__ */ jsx5("span", { className: "drop-shadow-[0_1px_1px_rgba(0,0,0,0.35)]", children })
+            }
+          ),
+          /* @__PURE__ */ jsx5("span", { className: cn3("mt-1 h-1 w-1 rounded-full bg-white/90 transition-opacity", isOpen ? "opacity-100" : "opacity-0") })
+        ]
+      }
+    );
+  }
+);
+DockButton.displayName = "DockButton";
+function Dock({ apps, pinned, openSlugs = [], onLaunch, onCloseApp, onUnpin, onLaunchpad, onTrash, className }) {
+  const bySlug = React3.useMemo(() => new Map(apps.map((a) => [a.slug, a])), [apps]);
+  const slugs = React3.useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    const ordered = [];
+    for (const s of [...pinned, ...openSlugs]) {
+      if (!seen.has(s) && bySlug.has(s)) {
+        seen.add(s);
+        ordered.push(s);
+      }
+    }
+    return ordered;
+  }, [pinned, openSlugs, bySlug]);
+  return /* @__PURE__ */ jsx5("div", { className: cn3("pointer-events-none fixed inset-x-0 bottom-3 z-40 flex justify-center px-2", className), children: /* @__PURE__ */ jsxs5("div", { className: "no-scrollbar pointer-events-auto flex max-w-full items-end gap-1.5 overflow-x-auto rounded-2xl border border-white/15 bg-black/25 px-2.5 py-2 shadow-2xl backdrop-blur-2xl", children: [
+    onLaunchpad && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(DockButton, { label: "Launchpad", color: "#6366f1", onClick: onLaunchpad, children: /* @__PURE__ */ jsx5(LayoutGrid, { className: "h-5 w-5" }) }),
+      (slugs.length > 0 || onTrash) && /* @__PURE__ */ jsx5("span", { className: "mx-1 h-9 w-px self-center bg-white/15" })
+    ] }),
+    slugs.map((slug) => {
+      const app = bySlug.get(slug);
+      const running = openSlugs.includes(slug);
+      return /* @__PURE__ */ jsxs5(ContextMenu, { children: [
+        /* @__PURE__ */ jsx5(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(DockButton, { label: app.name, color: app.color, isOpen: running, onClick: () => onLaunch(slug), children: /* @__PURE__ */ jsx5(DynamicIcon2, { name: app.icon, size: 22 }) }) }),
+        /* @__PURE__ */ jsxs5(ContextMenuContent, { className: "w-40", children: [
+          /* @__PURE__ */ jsxs5(ContextMenuItem, { onClick: () => onLaunch(slug), children: [
+            /* @__PURE__ */ jsx5(SquareArrowOutUpRight, { className: "me-2 h-4 w-4" }),
+            running ? "Show" : "Open"
+          ] }),
+          onUnpin && /* @__PURE__ */ jsxs5(ContextMenuItem, { onClick: () => onUnpin(slug), children: [
+            /* @__PURE__ */ jsx5(PinOff, { className: "me-2 h-4 w-4" }),
+            "Remove from Dock"
+          ] }),
+          running && onCloseApp && /* @__PURE__ */ jsxs5(ContextMenuItem, { className: "text-destructive", onClick: () => onCloseApp(slug), children: [
+            /* @__PURE__ */ jsx5(X, { className: "me-2 h-4 w-4" }),
+            "Quit ",
+            app.name
+          ] })
+        ] })
+      ] }, slug);
+    }),
+    onTrash && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx5("span", { className: "mx-1 h-9 w-px self-center bg-white/15" }),
+      /* @__PURE__ */ jsx5(DockButton, { label: "Trash", onClick: onTrash, children: /* @__PURE__ */ jsx5(Trash2, { className: "h-5 w-5 text-white/80" }) })
+    ] })
+  ] }) });
+}
+Dock.displayName = "Dock";
+
+// src/components/desktop/DesktopIconGrid.tsx
+import * as React4 from "react";
+import { SquareArrowOutUpRight as SquareArrowOutUpRight2, Trash2 as Trash22 } from "lucide-react";
+
+// src/components/desktop/DesktopIcon.tsx
+import { DynamicIcon as DynamicIcon3 } from "@togo-framework/ui-core";
+import { cn as cn4 } from "@togo-framework/ui-core";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function DesktopIcon({ app, onOpen, selected, onSelect, tapToOpen, className, style }) {
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      style,
+      className: cn4(
+        "flex w-20 select-none flex-col items-center gap-1 rounded-lg p-2 text-center outline-none",
+        selected ? "bg-primary/20" : "hover:bg-white/10 focus-visible:bg-white/10",
+        className
+      ),
+      onClick: () => {
+        onSelect?.(app.slug);
+        if (tapToOpen) onOpen(app.slug);
+      },
+      onDoubleClick: () => onOpen(app.slug),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onOpen(app.slug);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: "flex h-12 w-12 items-center justify-center rounded-[14px] text-white shadow-md ring-1 ring-inset ring-white/25",
+            style: { backgroundImage: `linear-gradient(160deg, ${app.color || "#64748b"}, ${app.color || "#64748b"}bb)` },
+            children: /* @__PURE__ */ jsx6("span", { className: "drop-shadow-[0_1px_1px_rgba(0,0,0,0.35)]", children: /* @__PURE__ */ jsx6(DynamicIcon3, { name: app.icon, size: 24 }) })
+          }
+        ),
+        /* @__PURE__ */ jsx6("span", { className: "line-clamp-2 text-xs font-medium text-white [text-shadow:0_1px_3px_rgba(0,0,0,0.7)]", children: app.name })
+      ]
+    }
+  );
+}
+DesktopIcon.displayName = "DesktopIcon";
+
+// src/components/desktop/DesktopIconGrid.tsx
+import {
+  ContextMenu as ContextMenu2,
+  ContextMenuTrigger as ContextMenuTrigger2,
+  ContextMenuContent as ContextMenuContent2,
+  ContextMenuItem as ContextMenuItem2
+} from "@togo-framework/ui-core";
+import { cn as cn5 } from "@togo-framework/ui-core";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var CELL_W = 88;
+var CELL_H = 104;
+var TOP = 48;
+var LEFT = 16;
+function clampPos(p) {
+  if (typeof window === "undefined") return p;
+  const x = Math.min(Math.max(p.x, 8), window.innerWidth - CELL_W);
+  const y = Math.min(Math.max(p.y, TOP), window.innerHeight - CELL_H - 72);
+  return { x, y };
+}
+function defaultPos(index) {
+  const perCol = Math.max(3, Math.floor((typeof window !== "undefined" ? window.innerHeight - TOP - 120 : 600) / CELL_H));
+  const col = Math.floor(index / perCol);
+  const row = index % perCol;
+  return { x: LEFT + col * CELL_W, y: TOP + row * CELL_H };
+}
+function IconMenu({ app, onOpen, onRemove, children }) {
+  if (!onRemove) return /* @__PURE__ */ jsx7(Fragment3, { children });
+  return /* @__PURE__ */ jsxs7(ContextMenu2, { children: [
+    /* @__PURE__ */ jsx7(ContextMenuTrigger2, { asChild: true, children }),
+    /* @__PURE__ */ jsxs7(ContextMenuContent2, { className: "w-48", children: [
+      /* @__PURE__ */ jsxs7(ContextMenuItem2, { onClick: () => onOpen(app.slug), children: [
+        /* @__PURE__ */ jsx7(SquareArrowOutUpRight2, { className: "me-2 h-4 w-4" }),
+        "Open"
+      ] }),
+      /* @__PURE__ */ jsxs7(ContextMenuItem2, { className: "text-destructive", onClick: () => onRemove(app.slug), children: [
+        /* @__PURE__ */ jsx7(Trash22, { className: "me-2 h-4 w-4" }),
+        "Remove from Desktop"
+      ] })
+    ] })
+  ] });
+}
+function DesktopIconGrid({ apps, onOpen, positions, onMove, hidden = [], onRemove, className }) {
+  const [selected, setSelected] = React4.useState(null);
+  const hiddenSet = React4.useMemo(() => new Set(hidden), [hidden]);
+  const visible = React4.useMemo(
+    () => apps.filter((a) => a.enabled && !hiddenSet.has(a.slug)),
+    [apps, hiddenSet]
+  );
+  if (!onMove) {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: cn5("grid auto-rows-max grid-cols-[repeat(auto-fill,5rem)] gap-1 p-4", className),
+        onClick: (e) => {
+          if (e.target === e.currentTarget) setSelected(null);
+        },
+        children: visible.map((app) => /* @__PURE__ */ jsx7(IconMenu, { app, onOpen, onRemove, children: /* @__PURE__ */ jsx7(DesktopIcon, { app, onOpen, tapToOpen: true, selected: selected === app.slug, onSelect: setSelected }) }, app.slug))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: cn5("absolute inset-0", className),
+      onPointerDown: (e) => {
+        if (e.target === e.currentTarget) setSelected(null);
+      },
+      children: visible.map((app, i) => /* @__PURE__ */ jsx7(
+        PositionedIcon,
+        {
+          app,
+          pos: positions?.[app.slug] ?? defaultPos(i),
+          onOpen,
+          onMove,
+          onRemove,
+          selected: selected === app.slug,
+          onSelect: setSelected
+        },
+        app.slug
+      ))
+    }
+  );
+}
+function PositionedIcon({
+  app,
+  pos,
+  onOpen,
+  onMove,
+  onRemove,
+  selected,
+  onSelect
+}) {
+  const [live, setLive] = React4.useState(pos);
+  const dragging = React4.useRef(false);
+  React4.useEffect(() => {
+    if (!dragging.current) setLive(pos);
+  }, [pos]);
+  const onPointerDown = (e) => {
+    if (e.button !== 0) return;
+    onSelect(app.slug);
+    const el = e.currentTarget;
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const orig = live;
+    let moved = false;
+    let captured = false;
+    const move = (ev) => {
+      const dx = ev.clientX - startX;
+      const dy = ev.clientY - startY;
+      if (!moved && (Math.abs(dx) > 4 || Math.abs(dy) > 4)) {
+        moved = true;
+        dragging.current = true;
+        el.setPointerCapture(e.pointerId);
+        captured = true;
+      }
+      if (dragging.current) setLive(clampPos({ x: orig.x + dx, y: orig.y + dy }));
+    };
+    const up = () => {
+      el.removeEventListener("pointermove", move);
+      el.removeEventListener("pointerup", up);
+      if (captured) el.releasePointerCapture?.(e.pointerId);
+      if (moved) {
+        dragging.current = false;
+        setLive((p) => {
+          onMove(app.slug, p);
+          return p;
+        });
+      } else {
+        onOpen(app.slug);
+      }
+    };
+    el.addEventListener("pointermove", move);
+    el.addEventListener("pointerup", up);
+  };
+  return /* @__PURE__ */ jsx7(IconMenu, { app, onOpen, onRemove, children: /* @__PURE__ */ jsx7("div", { className: "absolute touch-none", style: { left: live.x, top: live.y }, onPointerDown, children: /* @__PURE__ */ jsx7(DesktopIcon, { app, onOpen, selected }) }) });
+}
+DesktopIconGrid.displayName = "DesktopIconGrid";
+
+// src/components/desktop/DesktopContextMenu.tsx
+import { Image as ImageIcon, Palette, RefreshCw } from "lucide-react";
+import {
+  ContextMenu as ContextMenu3,
+  ContextMenuContent as ContextMenuContent3,
+  ContextMenuItem as ContextMenuItem3,
+  ContextMenuSeparator,
+  ContextMenuTrigger as ContextMenuTrigger3
+} from "@togo-framework/ui-core";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function DesktopContextMenu({ onAction, children, className }) {
+  return /* @__PURE__ */ jsxs8(ContextMenu3, { children: [
+    /* @__PURE__ */ jsx8(ContextMenuTrigger3, { className, children }),
+    /* @__PURE__ */ jsxs8(ContextMenuContent3, { className: "w-52", children: [
+      /* @__PURE__ */ jsxs8(ContextMenuItem3, { onClick: () => onAction("change-wallpaper"), children: [
+        /* @__PURE__ */ jsx8(ImageIcon, { className: "me-2 h-4 w-4" }),
+        "Change wallpaper"
+      ] }),
+      /* @__PURE__ */ jsxs8(ContextMenuItem3, { onClick: () => onAction("personalize"), children: [
+        /* @__PURE__ */ jsx8(Palette, { className: "me-2 h-4 w-4" }),
+        "Personalize"
+      ] }),
+      /* @__PURE__ */ jsx8(ContextMenuSeparator, {}),
+      /* @__PURE__ */ jsxs8(ContextMenuItem3, { onClick: () => onAction("refresh"), children: [
+        /* @__PURE__ */ jsx8(RefreshCw, { className: "me-2 h-4 w-4" }),
+        "Refresh"
+      ] })
+    ] })
+  ] });
+}
+DesktopContextMenu.displayName = "DesktopContextMenu";
+
+// src/components/desktop/WindowManager.tsx
+import { createContext, useCallback as useCallback2, useContext, useMemo as useMemo4, useRef as useRef3, useState as useState5 } from "react";
+
+// src/components/desktop/Window.tsx
+import * as React5 from "react";
+import { useCallback, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import { X as X2, Minus, Plus } from "lucide-react";
+import { DynamicIcon as DynamicIcon4 } from "@togo-framework/ui-core";
+import { cn as cn6 } from "@togo-framework/ui-core";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var MIN_W = 320;
+var MIN_H = 220;
+var TOP_INSET = 40;
+var DOCK_INSET = 92;
+function clampWindowRect(r) {
+  if (typeof window === "undefined") return r;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const w = Math.min(Math.max(r.w, MIN_W), vw - 16);
+  const h = Math.min(Math.max(r.h, MIN_H), vh - TOP_INSET - DOCK_INSET);
+  const x = Math.min(Math.max(r.x, 8), Math.max(8, vw - w - 8));
+  const y = Math.min(Math.max(r.y, TOP_INSET), Math.max(TOP_INSET, vh - h - DOCK_INSET));
+  return { x, y, w, h };
+}
+function Window({
+  title,
+  icon,
+  rect,
+  onRectChange,
+  resizable = true,
+  minimized = false,
+  zIndex = 10,
+  onClose,
+  onMinimize,
+  onMaximizeToggle,
+  maximized = false,
+  onFocus,
+  className,
+  children
+}) {
+  const [live, setLive] = useState4(rect);
+  const dragging = useRef2(false);
+  const [phase, setPhase] = useState4("enter");
+  const prevMinimized = useRef2(minimized);
+  const [snapHint, setSnapHint] = useState4(null);
+  const [isMobile, setIsMobile] = useState4(false);
+  useEffect4(() => {
+    const mq = window.matchMedia("(max-width: 640px)");
+    const on = () => setIsMobile(mq.matches);
+    on();
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, []);
+  useEffect4(() => {
+    if (!dragging.current) setLive(rect);
+  }, [rect]);
+  useEffect4(() => {
+    const t = setTimeout(() => setPhase("shown"), 10);
+    return () => clearTimeout(t);
+  }, []);
+  useEffect4(() => {
+    const onResize = () => setLive((r) => clampWindowRect(r));
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  const beginGesture = useCallback(
+    (apply) => (e) => {
+      if (maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+      onFocus?.();
+      const orig = live;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const el = e.currentTarget;
+      el.setPointerCapture(e.pointerId);
+      dragging.current = true;
+      const move = (ev) => {
+        setLive(clampWindowRect(apply(orig, ev.clientX - startX, ev.clientY - startY)));
+      };
+      const up = () => {
+        dragging.current = false;
+        el.removeEventListener("pointermove", move);
+        el.removeEventListener("pointerup", up);
+        el.removeEventListener("pointercancel", up);
+        setLive((r) => {
+          onRectChange(r);
+          return r;
+        });
+      };
+      el.addEventListener("pointermove", move);
+      el.addEventListener("pointerup", up);
+      el.addEventListener("pointercancel", up);
+    },
+    [maximized, live, onFocus, onRectChange]
+  );
+  const snapRect = useCallback((zone) => {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const h = vh - TOP_INSET - DOCK_INSET;
+    if (zone === "left") return { x: 8, y: TOP_INSET, w: vw / 2 - 12, h };
+    if (zone === "right") return { x: vw / 2 + 4, y: TOP_INSET, w: vw / 2 - 12, h };
+    return { x: 8, y: TOP_INSET, w: vw - 16, h };
+  }, []);
+  const onDragTitle = useCallback(
+    (e) => {
+      if (maximized || isMobile) return;
+      e.preventDefault();
+      e.stopPropagation();
+      onFocus?.();
+      const orig = live;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const el = e.currentTarget;
+      el.setPointerCapture(e.pointerId);
+      dragging.current = true;
+      const zoneFor = (x, y) => {
+        if (y <= 6) return "max";
+        if (x <= 6) return "left";
+        if (x >= window.innerWidth - 6) return "right";
+        return null;
+      };
+      const move = (ev) => {
+        setLive(clampWindowRect({ ...orig, x: orig.x + (ev.clientX - startX), y: orig.y + (ev.clientY - startY) }));
+        setSnapHint(zoneFor(ev.clientX, ev.clientY));
+      };
+      const up = (ev) => {
+        dragging.current = false;
+        el.removeEventListener("pointermove", move);
+        el.removeEventListener("pointerup", up);
+        el.removeEventListener("pointercancel", up);
+        const zone = zoneFor(ev.clientX, ev.clientY);
+        setSnapHint(null);
+        if (zone) {
+          const r = snapRect(zone);
+          setLive(r);
+          onRectChange(r);
+        } else {
+          setLive((r) => {
+            onRectChange(r);
+            return r;
+          });
+        }
+      };
+      el.addEventListener("pointermove", move);
+      el.addEventListener("pointerup", up);
+      el.addEventListener("pointercancel", up);
+    },
+    [maximized, isMobile, live, onFocus, onRectChange, snapRect]
+  );
+  const resizeHandlers = {
+    e: (o, dx) => ({ ...o, w: o.w + dx }),
+    s: (o, _dx, dy) => ({ ...o, h: o.h + dy }),
+    se: (o, dx, dy) => ({ ...o, w: o.w + dx, h: o.h + dy }),
+    w: (o, dx) => ({ ...o, x: o.x + dx, w: o.w - dx }),
+    n: (o, _dx, dy) => ({ ...o, y: o.y + dy, h: o.h - dy }),
+    nw: (o, dx, dy) => ({ ...o, x: o.x + dx, y: o.y + dy, w: o.w - dx, h: o.h - dy }),
+    ne: (o, dx, dy) => ({ ...o, y: o.y + dy, w: o.w + dx, h: o.h - dy }),
+    sw: (o, dx, dy) => ({ ...o, x: o.x + dx, w: o.w - dx, h: o.h + dy })
+  };
+  const style = useMemo3(() => {
+    if (isMobile) return { left: 0, top: TOP_INSET, right: 0, bottom: DOCK_INSET, width: "auto", height: "auto", zIndex };
+    if (maximized) return { left: 8, top: TOP_INSET, right: 8, bottom: DOCK_INSET, width: "auto", height: "auto", zIndex };
+    return { left: live.x, top: live.y, width: live.w, height: live.h, zIndex };
+  }, [isMobile, maximized, live, zIndex]);
+  prevMinimized.current = minimized;
+  const animating = phase === "enter";
+  const snapPreview = snapHint ? (() => {
+    const r = snapRect(snapHint);
+    return /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: "pointer-events-none fixed rounded-xl border-2 border-primary/70 bg-primary/15 backdrop-blur-sm transition-all duration-100",
+        style: { left: r.x, top: r.y, width: r.w, height: r.h, zIndex: zIndex - 1 },
+        "aria-hidden": "true"
+      }
+    );
+  })() : null;
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    snapPreview,
+    /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: cn6(
+          "fixed flex flex-col overflow-hidden border border-border bg-card/95 shadow-2xl backdrop-blur-xl",
+          isMobile ? "rounded-none" : "rounded-xl",
+          "origin-bottom transition-[opacity,transform] duration-200 ease-out",
+          minimized ? "pointer-events-none translate-y-[45vh] scale-50 opacity-0" : animating ? "scale-95 opacity-0" : "scale-100 opacity-100",
+          className
+        ),
+        style,
+        "aria-hidden": minimized,
+        onPointerDown: () => onFocus?.(),
+        role: "dialog",
+        "aria-label": title,
+        children: [
+          /* @__PURE__ */ jsxs9(
+            "div",
+            {
+              className: "flex shrink-0 cursor-grab select-none items-center gap-2 border-b border-border bg-background/70 px-3 py-2 active:cursor-grabbing",
+              onPointerDown: onDragTitle,
+              onDoubleClick: onMaximizeToggle,
+              children: [
+                /* @__PURE__ */ jsxs9("div", { className: "group/lights flex items-center gap-1.5", onPointerDown: (e) => e.stopPropagation(), children: [
+                  /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Close",
+                      onClick: onClose,
+                      className: "flex h-3 w-3 items-center justify-center rounded-full bg-[#ff5f57] text-[#7a0d02] transition hover:brightness-95",
+                      children: /* @__PURE__ */ jsx9(X2, { className: "h-2 w-2 opacity-0 transition-opacity group-hover/lights:opacity-100", strokeWidth: 3 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Minimize",
+                      onClick: onMinimize,
+                      className: "flex h-3 w-3 items-center justify-center rounded-full bg-[#febc2e] text-[#985712] transition hover:brightness-95",
+                      children: /* @__PURE__ */ jsx9(Minus, { className: "h-2 w-2 opacity-0 transition-opacity group-hover/lights:opacity-100", strokeWidth: 3 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Maximize",
+                      onClick: onMaximizeToggle,
+                      className: "flex h-3 w-3 items-center justify-center rounded-full bg-[#28c840] text-[#0b6118] transition hover:brightness-95",
+                      children: /* @__PURE__ */ jsx9(Plus, { className: "h-2 w-2 opacity-0 transition-opacity group-hover/lights:opacity-100", strokeWidth: 3 })
+                    }
+                  )
+                ] }),
+                icon && /* @__PURE__ */ jsx9(DynamicIcon4, { name: icon, size: 14, className: "ms-1 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsx9("span", { className: "flex-1 truncate text-center text-xs font-medium text-foreground", children: title }),
+                /* @__PURE__ */ jsx9("span", { className: "w-12", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx9(React5.Suspense, { fallback: /* @__PURE__ */ jsx9(WindowSpinner, {}), children }) }),
+          resizable && !maximized && !isMobile && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+            /* @__PURE__ */ jsx9("div", { onPointerDown: beginGesture(resizeHandlers.n), className: "absolute inset-x-2 top-0 h-1.5 cursor-ns-resize touch-none" }),
+            /* @__PURE__ */ jsx9("div", { onPointerDown: beginGesture(resizeHandlers.s), className: "absolute inset-x-2 bottom-0 h-1.5 cursor-ns-resize touch-none" }),
+            /* @__PURE__ */ jsx9("div", { onPointerDown: beginGesture(resizeHandlers.w), className: "absolute inset-y-2 left-0 w-1.5 cursor-ew-resize touch-none" }),
+            /* @__PURE__ */ jsx9("div", { onPointerDown: beginGesture(resizeHandlers.e), className: "absolute inset-y-2 right-0 w-1.5 cursor-ew-resize touch-none" }),
+            /* @__PURE__ */ jsx9("div", { onPointerDown: beginGesture(resizeHandlers.nw), className: "absolute left-0 top-0 h-3 w-3 cursor-nwse-resize touch-none" }),
+            /* @__PURE__ */ jsx9("div", { onPointerDown: beginGesture(resizeHandlers.ne), className: "absolute right-0 top-0 h-3 w-3 cursor-nesw-resize touch-none" }),
+            /* @__PURE__ */ jsx9("div", { onPointerDown: beginGesture(resizeHandlers.sw), className: "absolute bottom-0 left-0 h-3 w-3 cursor-nesw-resize touch-none" }),
+            /* @__PURE__ */ jsx9("div", { onPointerDown: beginGesture(resizeHandlers.se), className: "absolute bottom-0 right-0 h-3.5 w-3.5 cursor-nwse-resize touch-none" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+Window.displayName = "Window";
+function WindowSpinner() {
+  return /* @__PURE__ */ jsx9("div", { className: "flex h-full min-h-[160px] w-full items-center justify-center", children: /* @__PURE__ */ jsx9("span", { className: "h-7 w-7 animate-spin rounded-full border-2 border-muted border-t-primary", "aria-label": "Loading" }) });
+}
+
+// src/components/desktop/WindowManager.tsx
+import { Fragment as Fragment5, jsx as jsx10 } from "react/jsx-runtime";
+var WindowSectionContext = createContext({ slug: "", nonce: 0 });
+function useWindowSection() {
+  return useContext(WindowSectionContext);
+}
+var WindowManagerContext = createContext(null);
+var zCounter = 10;
+function defaultRect(width = 640, height = 440) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1280;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 800;
+  const x = Math.max(24, (vw - width) / 2 + (Math.random() * 40 - 20));
+  const y = Math.max(24, (vh - height) / 2 + (Math.random() * 40 - 20));
+  return clampWindowRect({ x, y, w: width, h: height });
+}
+function WindowManagerProvider({ children }) {
+  const [windows, setWindows] = useState5([]);
+  const slugsRef = useRef3(/* @__PURE__ */ new Set());
+  const open = useCallback2((slug, opts) => {
+    setWindows((prev) => {
+      const existing = prev.find((w) => w.slug === slug);
+      zCounter += 1;
+      if (existing) {
+        return prev.map(
+          (w) => w.slug === slug ? { ...w, ...opts, minimized: false, z: zCounter, sectionNonce: w.sectionNonce + 1 } : w
+        );
+      }
+      slugsRef.current.add(slug);
+      return [
+        ...prev,
+        {
+          slug,
+          ...opts,
+          rect: defaultRect(opts.width, opts.height),
+          minimized: false,
+          maximized: false,
+          z: zCounter,
+          sectionNonce: 0
+        }
+      ];
+    });
+  }, []);
+  const close = useCallback2((slug) => {
+    slugsRef.current.delete(slug);
+    setWindows((prev) => prev.filter((w) => w.slug !== slug));
+  }, []);
+  const focus = useCallback2((slug) => {
+    zCounter += 1;
+    const z = zCounter;
+    setWindows((prev) => prev.map((w) => w.slug === slug ? { ...w, z } : w));
+  }, []);
+  const minimize = useCallback2((slug) => {
+    setWindows((prev) => prev.map((w) => w.slug === slug ? { ...w, minimized: !w.minimized } : w));
+  }, []);
+  const restore = useCallback2((slug) => {
+    zCounter += 1;
+    const z = zCounter;
+    setWindows((prev) => prev.map((w) => w.slug === slug ? { ...w, minimized: false, z } : w));
+  }, []);
+  const toggleMaximize = useCallback2((slug) => {
+    setWindows((prev) => prev.map((w) => w.slug === slug ? { ...w, maximized: !w.maximized } : w));
+  }, []);
+  const isOpen = useCallback2((slug) => slugsRef.current.has(slug), []);
+  const isMinimized = useCallback2(
+    (slug) => windows.find((w) => w.slug === slug)?.minimized ?? false,
+    [windows]
+  );
+  const setSection = useCallback2((slug, section) => {
+    setWindows(
+      (prev) => prev.map((w) => w.slug === slug ? { ...w, section, sectionNonce: w.sectionNonce + 1 } : w)
+    );
+  }, []);
+  const updateRect = useCallback2((slug, rect) => {
+    setWindows((prev) => prev.map((e) => e.slug === slug ? { ...e, rect } : e));
+  }, []);
+  const value = useMemo4(
+    () => ({ windows, open, close, focus, minimize, restore, toggleMaximize, isOpen, isMinimized, setSection, updateRect }),
+    [windows, open, close, focus, minimize, restore, toggleMaximize, isOpen, isMinimized, setSection, updateRect]
+  );
+  return /* @__PURE__ */ jsx10(WindowManagerContext.Provider, { value, children });
+}
+function useWindowManager() {
+  const ctx = useContext(WindowManagerContext);
+  if (!ctx) throw new Error("useWindowManager must be used within a <WindowManagerProvider>");
+  return ctx;
+}
+function WindowManager() {
+  const { windows, close, minimize, toggleMaximize, focus, updateRect } = useWindowManager();
+  return /* @__PURE__ */ jsx10(Fragment5, { children: windows.map((w) => /* @__PURE__ */ jsx10(
+    Window,
+    {
+      title: w.title,
+      icon: w.icon,
+      rect: w.rect,
+      resizable: w.resizable ?? true,
+      minimized: w.minimized,
+      maximized: w.maximized,
+      zIndex: w.z,
+      onRectChange: (rect) => updateRect(w.slug, rect),
+      onClose: () => close(w.slug),
+      onMinimize: () => minimize(w.slug),
+      onMaximizeToggle: () => toggleMaximize(w.slug),
+      onFocus: () => focus(w.slug),
+      children: /* @__PURE__ */ jsx10(WindowSectionContext.Provider, { value: { slug: w.slug, section: w.section, nonce: w.sectionNonce }, children: w.content })
+    },
+    w.slug
+  )) });
+}
+WindowManagerProvider.displayName = "WindowManagerProvider";
+WindowManager.displayName = "WindowManager";
+
+// src/components/desktop/Launchpad.tsx
+import * as React6 from "react";
+import { Search as Search2, Pin, PinOff as PinOff2, MonitorUp, MonitorX } from "lucide-react";
+import { DynamicIcon as DynamicIcon5 } from "@togo-framework/ui-core";
+import {
+  ContextMenu as ContextMenu4,
+  ContextMenuTrigger as ContextMenuTrigger4,
+  ContextMenuContent as ContextMenuContent4,
+  ContextMenuItem as ContextMenuItem4
+} from "@togo-framework/ui-core";
+import { cn as cn7 } from "@togo-framework/ui-core";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function Launchpad({
+  open,
+  onOpenChange,
+  apps,
+  pinned = [],
+  hidden = [],
+  onLaunch,
+  onPin,
+  onUnpin,
+  onAddToDesktop,
+  onRemoveFromDesktop
+}) {
+  const [mounted, setMounted] = React6.useState(open);
+  const [shown, setShown] = React6.useState(false);
+  const [query, setQuery] = React6.useState("");
+  const pinnedSet = React6.useMemo(() => new Set(pinned), [pinned]);
+  const hiddenSet = React6.useMemo(() => new Set(hidden), [hidden]);
+  React6.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      const t2 = setTimeout(() => setShown(true), 10);
+      return () => clearTimeout(t2);
+    }
+    setShown(false);
+    const t = setTimeout(() => {
+      setMounted(false);
+      setQuery("");
+    }, 200);
+    return () => clearTimeout(t);
+  }, [open]);
+  React6.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onOpenChange]);
+  if (!mounted) return null;
+  const q = query.trim().toLowerCase();
+  const list = apps.filter((a) => a.enabled && (!q || a.name.toLowerCase().includes(q)));
+  const launch = (slug) => {
+    onLaunch(slug);
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: cn7(
+        "fixed inset-0 z-[60] flex flex-col items-center bg-black/40 backdrop-blur-2xl transition-opacity duration-200",
+        shown ? "opacity-100" : "opacity-0"
+      ),
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onOpenChange(false);
+      },
+      children: [
+        /* @__PURE__ */ jsx11("div", { className: "mt-14 mb-8 w-full max-w-sm px-4", children: /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx11(Search2, { className: "pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/70" }),
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              autoFocus: true,
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              placeholder: "Search",
+              className: "w-full rounded-xl border border-white/20 bg-white/10 py-2 ps-9 pe-3 text-center text-sm text-white placeholder:text-white/60 outline-none backdrop-blur-md focus:border-white/40"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            className: cn7(
+              "grid w-full max-w-5xl grid-cols-3 gap-x-4 gap-y-8 overflow-y-auto px-6 pb-24 transition-transform duration-200 ease-out sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-7",
+              shown ? "scale-100" : "scale-90"
+            ),
+            children: [
+              list.map((app) => {
+                const isPinned = pinnedSet.has(app.slug);
+                const onDesktop = !hiddenSet.has(app.slug);
+                return /* @__PURE__ */ jsxs10(ContextMenu4, { children: [
+                  /* @__PURE__ */ jsx11(ContextMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs10(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => launch(app.slug),
+                      className: "group flex select-none flex-col items-center gap-2 rounded-2xl p-2 outline-none transition hover:scale-105 focus-visible:scale-105",
+                      children: [
+                        /* @__PURE__ */ jsx11(
+                          "span",
+                          {
+                            className: "flex h-16 w-16 items-center justify-center rounded-[22px] text-white shadow-lg ring-1 ring-inset ring-white/25",
+                            style: { backgroundImage: `linear-gradient(160deg, ${app.color || "#64748b"}, ${app.color || "#64748b"}bb)` },
+                            children: /* @__PURE__ */ jsx11("span", { className: "drop-shadow-[0_1px_2px_rgba(0,0,0,0.4)]", children: /* @__PURE__ */ jsx11(DynamicIcon5, { name: app.icon, size: 32 }) })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx11("span", { className: "line-clamp-1 text-xs font-medium text-white [text-shadow:0_1px_3px_rgba(0,0,0,0.7)]", children: app.name })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs10(ContextMenuContent4, { className: "w-52", children: [
+                    isPinned ? onUnpin && /* @__PURE__ */ jsxs10(ContextMenuItem4, { onClick: () => onUnpin(app.slug), children: [
+                      /* @__PURE__ */ jsx11(PinOff2, { className: "me-2 h-4 w-4" }),
+                      " Remove from Dock"
+                    ] }) : onPin && /* @__PURE__ */ jsxs10(ContextMenuItem4, { onClick: () => onPin(app.slug), children: [
+                      /* @__PURE__ */ jsx11(Pin, { className: "me-2 h-4 w-4" }),
+                      " Keep in Dock"
+                    ] }),
+                    onDesktop ? onRemoveFromDesktop && /* @__PURE__ */ jsxs10(ContextMenuItem4, { onClick: () => onRemoveFromDesktop(app.slug), children: [
+                      /* @__PURE__ */ jsx11(MonitorX, { className: "me-2 h-4 w-4" }),
+                      " Remove from Desktop"
+                    ] }) : onAddToDesktop && /* @__PURE__ */ jsxs10(ContextMenuItem4, { onClick: () => onAddToDesktop(app.slug), children: [
+                      /* @__PURE__ */ jsx11(MonitorUp, { className: "me-2 h-4 w-4" }),
+                      " Add to Desktop"
+                    ] })
+                  ] })
+                ] }, app.slug);
+              }),
+              list.length === 0 && /* @__PURE__ */ jsxs10("p", { className: "col-span-full py-16 text-center text-sm text-white/70", children: [
+                "No apps match \u201C",
+                query,
+                "\u201D."
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+Launchpad.displayName = "Launchpad";
+
+// src/components/desktop/NotificationCenter.tsx
+import { Bell, Check, CheckCheck } from "lucide-react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@togo-framework/ui-core";
+import { Button } from "@togo-framework/ui-core";
+import { ScrollArea } from "@togo-framework/ui-core";
+import { formatRelativeTime } from "@togo-framework/ui-core";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function NotificationCenter({
+  open,
+  onOpenChange,
+  notifications,
+  unreadCount = 0,
+  onMarkRead,
+  onMarkAllRead,
+  onNavigate,
+  header
+}) {
+  return /* @__PURE__ */ jsx12(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs11(SheetContent, { side: "right", className: "w-full gap-0 border-white/10 bg-background/95 p-0 backdrop-blur-xl sm:max-w-sm", children: [
+    /* @__PURE__ */ jsxs11(SheetHeader, { className: "flex flex-row items-center justify-between gap-2 border-b border-border px-4 py-3", children: [
+      /* @__PURE__ */ jsxs11(SheetTitle, { className: "flex items-center gap-2 text-base", children: [
+        /* @__PURE__ */ jsx12(Bell, { className: "h-4 w-4" }),
+        "Notifications",
+        unreadCount > 0 && /* @__PURE__ */ jsx12("span", { className: "rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground", children: unreadCount })
+      ] }),
+      notifications.length > 0 && onMarkAllRead && /* @__PURE__ */ jsxs11(Button, { variant: "ghost", size: "sm", className: "h-7 gap-1 text-xs", onClick: onMarkAllRead, children: [
+        /* @__PURE__ */ jsx12(CheckCheck, { className: "h-3.5 w-3.5" }),
+        "Mark all read"
+      ] })
+    ] }),
+    header && /* @__PURE__ */ jsx12("div", { className: "border-b border-border p-4", children: header }),
+    /* @__PURE__ */ jsx12(ScrollArea, { className: "h-[calc(100vh-8rem)]", children: notifications.length === 0 ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center justify-center gap-2 py-20 text-center text-muted-foreground", children: [
+      /* @__PURE__ */ jsx12(Bell, { className: "h-8 w-8 opacity-40" }),
+      /* @__PURE__ */ jsx12("p", { className: "text-sm", children: "You're all caught up" })
+    ] }) : /* @__PURE__ */ jsx12("ul", { className: "divide-y divide-border", children: notifications.map((n) => /* @__PURE__ */ jsx12(
+      "li",
+      {
+        className: cnRow(n.read),
+        onClick: () => {
+          if (!n.read) onMarkRead?.(n.id);
+          if (n.action_url) onNavigate?.(n.action_url);
+        },
+        children: /* @__PURE__ */ jsxs11("div", { className: "flex items-start gap-3", children: [
+          !n.read && /* @__PURE__ */ jsx12("span", { className: "mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs11("div", { className: n.read ? "ps-5" : "", children: [
+            /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-foreground", children: n.title }),
+            n.body && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-xs text-muted-foreground", children: n.body }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-1 text-[11px] text-muted-foreground/70", children: formatRelativeTime(n.created_at) })
+          ] }),
+          !n.read && onMarkRead && /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onMarkRead(n.id);
+              },
+              className: "ms-auto text-muted-foreground hover:text-foreground",
+              title: "Mark read",
+              children: /* @__PURE__ */ jsx12(Check, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      },
+      n.id
+    )) }) })
+  ] }) });
+}
+function cnRow(read) {
+  return [
+    "cursor-pointer px-4 py-3 transition-colors hover:bg-accent/50",
+    read ? "opacity-70" : ""
+  ].filter(Boolean).join(" ");
+}
+NotificationCenter.displayName = "NotificationCenter";
+
+// src/components/desktop/DesktopShell.tsx
+import { cn as cn8 } from "@togo-framework/ui-core";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function DesktopShell({
+  prefs,
+  apps,
+  renderApp,
+  topBar,
+  notifications = [],
+  unreadCount = 0,
+  onMarkRead,
+  onMarkAllRead,
+  onNavigate,
+  onContextAction,
+  onTrash,
+  onReady,
+  iconPositions,
+  onIconMove,
+  desktopHidden,
+  onRemoveDesktopIcon,
+  onAddDesktopIcon,
+  onPinDock,
+  onUnpinDock,
+  className
+}) {
+  const [spotlightOpen, setSpotlightOpen] = React7.useState(false);
+  const [launchpadOpen, setLaunchpadOpen] = React7.useState(false);
+  const [notifOpen, setNotifOpen] = React7.useState(false);
+  return /* @__PURE__ */ jsx13(WindowManagerProvider, { children: /* @__PURE__ */ jsx13(
+    "div",
+    {
+      className: cn8("fixed inset-0 overflow-hidden", className),
+      style: { background: wallpaperCss(prefs.wallpaper) },
+      children: /* @__PURE__ */ jsx13(
+        DesktopContent,
+        {
+          apps,
+          pinned: prefs.dock_pinned,
+          renderApp,
+          topBar,
+          notifications,
+          unreadCount,
+          onMarkRead,
+          onMarkAllRead,
+          onNavigate,
+          onContextAction,
+          onTrash,
+          onReady,
+          iconPositions,
+          onIconMove,
+          desktopHidden,
+          onRemoveDesktopIcon,
+          onAddDesktopIcon,
+          onPinDock,
+          onUnpinDock,
+          spotlightOpen,
+          setSpotlightOpen,
+          launchpadOpen,
+          setLaunchpadOpen,
+          notifOpen,
+          setNotifOpen
+        }
+      )
+    }
+  ) });
+}
+function DesktopContent({
+  apps,
+  pinned,
+  renderApp,
+  topBar,
+  notifications,
+  unreadCount,
+  onMarkRead,
+  onMarkAllRead,
+  onNavigate,
+  onContextAction,
+  onTrash,
+  onReady,
+  iconPositions,
+  onIconMove,
+  desktopHidden,
+  onRemoveDesktopIcon,
+  onAddDesktopIcon,
+  onPinDock,
+  onUnpinDock,
+  spotlightOpen,
+  setSpotlightOpen,
+  launchpadOpen,
+  setLaunchpadOpen,
+  notifOpen,
+  setNotifOpen
+}) {
+  const wm = useWindowManager();
+  const bySlug = React7.useMemo(() => new Map(apps.map((a) => [a.slug, a])), [apps]);
+  const launch = React7.useCallback(
+    (slug, section) => {
+      const app = bySlug.get(slug);
+      if (!app) return;
+      if (wm.isOpen(slug)) {
+        wm.restore(slug);
+        if (section) wm.setSection(slug, section);
+        return;
+      }
+      wm.open(slug, {
+        title: app.name,
+        icon: app.icon,
+        resizable: app.window?.resizable ?? true,
+        width: app.window?.width,
+        height: app.window?.height,
+        content: renderApp(app),
+        section
+      });
+    },
+    [bySlug, wm, renderApp]
+  );
+  const openWindow = React7.useCallback(
+    (opts) => {
+      if (wm.isOpen(opts.slug)) {
+        wm.restore(opts.slug);
+        if (opts.section) wm.setSection(opts.slug, opts.section);
+        return;
+      }
+      wm.open(opts.slug, { title: opts.title, icon: opts.icon, width: opts.width, height: opts.height, content: opts.content, section: opts.section });
+    },
+    [wm]
+  );
+  const onReadyRef = React7.useRef(onReady);
+  onReadyRef.current = onReady;
+  React7.useEffect(() => {
+    onReadyRef.current?.({ open: launch, openWindow });
+  }, [launch, openWindow]);
+  const openSlugs = wm.windows.map((w) => w.slug);
+  const dockSlugs = pinned.length > 0 ? pinned : apps.map((a) => a.slug);
+  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    /* @__PURE__ */ jsx13(
+      TopBar,
+      {
+        ...topBar,
+        notifications,
+        unreadCount,
+        onMarkRead,
+        onMarkAllRead,
+        onNavigate,
+        onOpenSpotlight: () => setSpotlightOpen(true),
+        onOpenNotifications: () => setNotifOpen(true)
+      }
+    ),
+    /* @__PURE__ */ jsx13(DesktopContextMenu, { onAction: (a) => onContextAction?.(a), className: "absolute inset-0 top-9", children: /* @__PURE__ */ jsx13("div", { className: "relative h-full w-full", children: /* @__PURE__ */ jsx13(
+      DesktopIconGrid,
+      {
+        apps,
+        onOpen: launch,
+        positions: iconPositions,
+        onMove: onIconMove,
+        hidden: desktopHidden,
+        onRemove: onRemoveDesktopIcon
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx13(WindowManager, {}),
+    /* @__PURE__ */ jsx13(
+      Dock,
+      {
+        apps,
+        pinned: dockSlugs,
+        openSlugs,
+        onLaunch: launch,
+        onCloseApp: (slug) => wm.close(slug),
+        onUnpin: onUnpinDock,
+        onLaunchpad: () => setLaunchpadOpen(true),
+        onTrash
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      Launchpad,
+      {
+        open: launchpadOpen,
+        onOpenChange: setLaunchpadOpen,
+        apps,
+        pinned: dockSlugs,
+        hidden: desktopHidden,
+        onLaunch: launch,
+        onPin: onPinDock,
+        onUnpin: onUnpinDock,
+        onAddToDesktop: onAddDesktopIcon,
+        onRemoveFromDesktop: onRemoveDesktopIcon
+      }
+    ),
+    /* @__PURE__ */ jsx13(Spotlight, { open: spotlightOpen, onOpenChange: setSpotlightOpen, apps, onLaunch: launch }),
+    /* @__PURE__ */ jsx13(
+      NotificationCenter,
+      {
+        open: notifOpen,
+        onOpenChange: setNotifOpen,
+        notifications,
+        unreadCount,
+        onMarkRead,
+        onMarkAllRead,
+        onNavigate
+      }
+    )
+  ] });
+}
+DesktopShell.displayName = "DesktopShell";
+
+// src/components/desktop/NotificationBell.tsx
+import * as React8 from "react";
+import { Bell as Bell2, Check as Check2 } from "lucide-react";
+import { Button as Button2 } from "@togo-framework/ui-core";
+import { Badge } from "@togo-framework/ui-core";
+import { Popover, PopoverContent, PopoverTrigger } from "@togo-framework/ui-core";
+import { ScrollArea as ScrollArea2 } from "@togo-framework/ui-core";
+import { cn as cn9 } from "@togo-framework/ui-core";
+import { formatRelativeTime as formatRelativeTime2 } from "@togo-framework/ui-core";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function NotificationBell({
+  notifications,
+  unreadCount,
+  onMarkRead,
+  onMarkAllRead,
+  onFetch,
+  onNavigate,
+  className
+}) {
+  const [open, setOpen] = React8.useState(false);
+  return /* @__PURE__ */ jsxs13(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => {
+        setOpen(next);
+        if (next) onFetch?.();
+      },
+      children: [
+        /* @__PURE__ */ jsx14(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs13(Button2, { variant: "ghost", size: "icon", className: cn9("relative h-8 w-8", className), "aria-label": "Notifications", children: [
+          /* @__PURE__ */ jsx14(Bell2, { className: "h-4 w-4" }),
+          unreadCount > 0 && /* @__PURE__ */ jsx14(
+            Badge,
+            {
+              variant: "destructive",
+              className: "absolute -right-1 -top-1 h-4 min-w-4 justify-center px-1 text-[9px] leading-none",
+              children: unreadCount > 99 ? "99+" : unreadCount
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs13(PopoverContent, { align: "end", className: "w-80 p-0", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between border-b border-border p-3", children: [
+            /* @__PURE__ */ jsx14("p", { className: "text-sm font-medium text-foreground", children: "Notifications" }),
+            unreadCount > 0 && /* @__PURE__ */ jsxs13(
+              "button",
+              {
+                type: "button",
+                onClick: onMarkAllRead,
+                className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground",
+                children: [
+                  /* @__PURE__ */ jsx14(Check2, { className: "h-3 w-3" }),
+                  " Mark all read"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx14(ScrollArea2, { className: "max-h-80", children: /* @__PURE__ */ jsx14("div", { className: "p-1.5", children: notifications.length === 0 ? /* @__PURE__ */ jsx14("p", { className: "py-6 text-center text-xs text-muted-foreground", children: "No notifications" }) : notifications.map((n) => /* @__PURE__ */ jsxs13(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                if (!n.read) onMarkRead(n.id);
+                if (n.action_url) onNavigate?.(n.action_url);
+              },
+              className: cn9(
+                "flex w-full flex-col gap-0.5 rounded-md px-2.5 py-2 text-start hover:bg-muted",
+                !n.read && "bg-primary/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs13("span", { className: "flex items-center gap-2", children: [
+                  !n.read && /* @__PURE__ */ jsx14("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-primary" }),
+                  /* @__PURE__ */ jsx14("span", { className: "text-xs font-medium text-foreground", children: n.title })
+                ] }),
+                n.body && /* @__PURE__ */ jsx14("span", { className: "line-clamp-2 text-xs text-muted-foreground", children: n.body }),
+                /* @__PURE__ */ jsx14("span", { className: "text-[10px] text-muted-foreground/70", children: formatRelativeTime2(n.created_at) })
+              ]
+            },
+            n.id
+          )) }) })
+        ] })
+      ]
+    }
+  );
+}
+NotificationBell.displayName = "NotificationBell";
+
+// src/components/desktop/OSLoginScreen.tsx
+import * as React9 from "react";
+import { ShieldCheck, Loader2, ArrowRight, Power as Power2, RotateCcw as RotateCcw2, Moon as Moon2 } from "lucide-react";
+import { wallpaperCss as wallpaperCss2 } from "@togo-framework/ui-core";
+import { Input } from "@togo-framework/ui-core";
+import { Label } from "@togo-framework/ui-core";
+import { Button as Button3 } from "@togo-framework/ui-core";
+import {
+  PasswordInput,
+  LockScreen,
+  PasswordLockScreen
+} from "@togo-framework/ui-auth";
+import { cn as cn10 } from "@togo-framework/ui-core";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function brandName(brand, ar) {
+  const n = brand?.name;
+  if (!n) return "togo OS";
+  if (typeof n === "string") return n;
+  return (ar ? n.ar || n.en : n.en || n.ar) ?? "togo OS";
+}
+function greeting(hour, ar) {
+  if (hour < 12) return ar ? "\u0635\u0628\u0627\u062D \u0627\u0644\u062E\u064A\u0631" : "Good morning";
+  if (hour < 18) return ar ? "\u0645\u0633\u0627\u0621 \u0627\u0644\u062E\u064A\u0631" : "Good afternoon";
+  return ar ? "\u0645\u0633\u0627\u0621 \u0627\u0644\u062E\u064A\u0631" : "Good evening";
+}
+function LiveClock({ ar }) {
+  const [now, setNow] = React9.useState(null);
+  React9.useEffect(() => {
+    setNow(/* @__PURE__ */ new Date());
+    const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
+    return () => clearInterval(id);
+  }, []);
+  if (!now) return /* @__PURE__ */ jsx15("div", { className: "h-[136px]", "aria-hidden": "true" });
+  const locale = ar ? "ar" : "en-US";
+  const hh = now.getHours();
+  const h12 = (hh + 11) % 12 + 1;
+  const mm = now.getMinutes();
+  const ss = now.getSeconds();
+  const ampm = hh < 12 ? "AM" : "PM";
+  const pad = (n) => String(n).padStart(2, "0");
+  const blink = ss % 2 === 0;
+  const dateStr = now.toLocaleDateString(locale, { weekday: "long", month: "long", day: "numeric" });
+  return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center text-white drop-shadow-[0_2px_12px_rgba(0,0,0,0.55)]", children: [
+    /* @__PURE__ */ jsx15("div", { className: "mb-1 text-sm font-medium uppercase tracking-[0.2em] text-white/70", children: greeting(hh, ar) }),
+    /* @__PURE__ */ jsxs14("div", { className: "flex items-start font-semibold tabular-nums leading-none tracking-tight", "aria-live": "off", children: [
+      /* @__PURE__ */ jsx15("span", { className: "text-[5.5rem]", children: ar ? pad(hh) : h12 }),
+      /* @__PURE__ */ jsx15("span", { className: cn10("text-[5.5rem] transition-opacity duration-200", blink ? "opacity-100" : "opacity-25"), children: ":" }),
+      /* @__PURE__ */ jsx15("span", { className: "text-[5.5rem]", children: pad(mm) }),
+      /* @__PURE__ */ jsxs14("span", { className: "ms-2 mt-3 flex flex-col items-start gap-1", children: [
+        /* @__PURE__ */ jsx15("span", { className: "rounded bg-white/15 px-1.5 py-0.5 text-lg tabular-nums", children: pad(ss) }),
+        !ar && /* @__PURE__ */ jsx15("span", { className: "ps-0.5 text-xs font-medium tracking-widest text-white/70", children: ampm })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx15("div", { className: "mt-2 text-lg font-medium capitalize text-white/85", children: dateStr })
+  ] });
+}
+function OSLoginScreen({
+  wallpaper = "aurora",
+  backgroundImage,
+  language = "en",
+  brand,
+  className,
+  authClient,
+  onSuccess,
+  onRegister,
+  lockedUser,
+  onUnlockPin,
+  onUnlockPassword,
+  onSignOut,
+  onForceLogout,
+  hasTOTP
+}) {
+  const ar = language === "ar";
+  const dir = ar ? "rtl" : "ltr";
+  const gradient = wallpaperCss2(wallpaper);
+  const background = backgroundImage ? `url("${backgroundImage}") center / cover no-repeat, ${gradient}` : gradient;
+  const [email, setEmail] = React9.useState("");
+  const [password, setPassword] = React9.useState("");
+  const [error, setError] = React9.useState("");
+  const [busy, setBusy] = React9.useState(false);
+  const [devBusy, setDevBusy] = React9.useState(false);
+  if (lockedUser) {
+    return /* @__PURE__ */ jsxs14("div", { className: cn10("fixed inset-0 flex items-center justify-center", className), style: { background }, dir, children: [
+      /* @__PURE__ */ jsx15("div", { className: "absolute inset-0 bg-black/30 backdrop-blur-sm", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx15("div", { className: "relative z-10", children: lockedUser.usePassword && onUnlockPassword ? /* @__PURE__ */ jsx15(
+        PasswordLockScreen,
+        {
+          user: lockedUser,
+          onUnlock: onUnlockPassword,
+          onSignOut: onSignOut ?? (() => {
+          }),
+          onForceLogout,
+          language,
+          hasTOTP
+        }
+      ) : /* @__PURE__ */ jsx15(
+        LockScreen,
+        {
+          user: lockedUser,
+          onUnlock: onUnlockPin ?? (async () => {
+          }),
+          onSignOut: onSignOut ?? (() => {
+          }),
+          language
+        }
+      ) })
+    ] });
+  }
+  const crest = brand && "icon" in brand && brand.icon !== void 0 ? brand.icon : /* @__PURE__ */ jsx15(ShieldCheck, { className: "h-8 w-8", strokeWidth: 1.75 });
+  async function submit(e) {
+    e.preventDefault();
+    if (!authClient) return;
+    setBusy(true);
+    setError("");
+    try {
+      const res = await authClient.login(email.trim(), password);
+      if (res.challenge === "none") onSuccess?.();
+      else setError(ar ? "\u0647\u0630\u0627 \u0627\u0644\u062D\u0633\u0627\u0628 \u064A\u062A\u0637\u0644\u0628 \u062A\u062D\u0642\u0642\u0627\u064B \u0625\u0636\u0627\u0641\u064A\u0627\u064B." : "This account requires an extra verification step.");
+    } catch (err) {
+      const msg = err?.message ?? "";
+      setError(msg || (ar ? "\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A \u0623\u0648 \u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631 \u063A\u064A\u0631 \u0635\u062D\u064A\u062D\u0629." : "Incorrect email or password."));
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function devLogin() {
+    if (!authClient?.devLogin) return;
+    setDevBusy(true);
+    setError("");
+    try {
+      await authClient.devLogin();
+      onSuccess?.();
+    } catch {
+      setError(ar ? "\u062A\u0639\u0630\u0651\u0631 \u0627\u0644\u062F\u062E\u0648\u0644 \u0643\u0645\u0637\u0648\u0651\u0631." : "Dev login failed.");
+    } finally {
+      setDevBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: cn10("fixed inset-0 flex flex-col items-center justify-center overflow-hidden", className),
+      style: { background },
+      dir,
+      children: [
+        /* @__PURE__ */ jsx15("div", { className: "absolute inset-0 bg-gradient-to-b from-black/30 via-black/15 to-black/60", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: { background: "radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(0,0,0,0.45) 100%)" },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs14("div", { className: "relative z-10 flex w-full max-w-sm flex-col items-center gap-8 px-6", children: [
+          /* @__PURE__ */ jsx15(LiveClock, { ar }),
+          /* @__PURE__ */ jsxs14("div", { className: "w-full rounded-3xl border border-white/20 bg-white/10 p-7 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.6)] backdrop-blur-2xl", children: [
+            /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-3 text-center text-white", children: [
+              /* @__PURE__ */ jsx15("div", { className: "flex h-[68px] w-[68px] items-center justify-center rounded-full border border-white/30 bg-gradient-to-br from-white/25 to-white/5 text-white shadow-inner ring-1 ring-white/10", children: crest }),
+              /* @__PURE__ */ jsxs14("div", { children: [
+                /* @__PURE__ */ jsx15("div", { className: "text-lg font-semibold", children: brandName(brand, ar) }),
+                brand?.tagline && /* @__PURE__ */ jsx15("div", { className: "text-sm text-white/70", children: ar ? brand.tagline.ar : brand.tagline.en })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs14("form", { onSubmit: submit, className: "mt-6 flex flex-col gap-4", children: [
+              error && /* @__PURE__ */ jsx15("div", { role: "alert", className: "rounded-lg border border-red-300/40 bg-red-500/20 px-3 py-2 text-sm text-white", children: error }),
+              /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx15(Label, { htmlFor: "os-login-email", className: "text-sm font-medium text-white/90", children: ar ? "\u0627\u0633\u0645 \u0627\u0644\u0645\u0633\u062A\u062E\u062F\u0645 \u0623\u0648 \u0627\u0644\u0628\u0631\u064A\u062F" : "Username or email" }),
+                /* @__PURE__ */ jsx15(
+                  Input,
+                  {
+                    id: "os-login-email",
+                    type: "email",
+                    dir: "ltr",
+                    autoComplete: "username",
+                    placeholder: "you@example.com",
+                    value: email,
+                    onChange: (e) => setEmail(e.target.value),
+                    disabled: busy,
+                    required: true,
+                    autoFocus: true,
+                    className: "border-white/25 bg-white/10 text-white placeholder:text-white/50 focus-visible:ring-white/40"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx15(Label, { htmlFor: "os-login-password", className: "text-sm font-medium text-white/90", children: ar ? "\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631" : "Password" }),
+                /* @__PURE__ */ jsx15(
+                  PasswordInput,
+                  {
+                    id: "os-login-password",
+                    language,
+                    autoComplete: "current-password",
+                    placeholder: ar ? "\u0623\u062F\u062E\u0644 \u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631" : "Enter your password",
+                    value: password,
+                    onChange: (e) => setPassword(e.target.value),
+                    disabled: busy,
+                    required: true,
+                    className: "border-white/25 bg-white/10 text-white placeholder:text-white/50 focus-visible:ring-white/40"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs14(
+                Button3,
+                {
+                  type: "submit",
+                  disabled: busy,
+                  className: "w-full gap-2 bg-white font-semibold text-slate-900 shadow-lg transition hover:bg-white/90",
+                  children: [
+                    busy ? /* @__PURE__ */ jsx15(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx15(ArrowRight, { className: "h-4 w-4 rtl:rotate-180" }),
+                    busy ? ar ? "\u062C\u0627\u0631\u064D \u062A\u0633\u062C\u064A\u0644 \u0627\u0644\u062F\u062E\u0648\u0644\u2026" : "Signing in\u2026" : ar ? "\u062A\u0633\u062C\u064A\u0644 \u0627\u0644\u062F\u062E\u0648\u0644" : "Sign in"
+                  ]
+                }
+              ),
+              authClient?.devLogin && /* @__PURE__ */ jsxs14(
+                Button3,
+                {
+                  type: "button",
+                  variant: "outline",
+                  onClick: devLogin,
+                  disabled: devBusy,
+                  className: "w-full gap-2 border-white/25 bg-transparent text-white hover:bg-white/10 hover:text-white",
+                  children: [
+                    devBusy ? /* @__PURE__ */ jsx15(Loader2, { className: "h-4 w-4 animate-spin" }) : null,
+                    ar ? "\u0627\u0644\u062F\u062E\u0648\u0644 \u0643\u0645\u0637\u0648\u0651\u0631" : "Continue as developer"
+                  ]
+                }
+              )
+            ] }),
+            onRegister && /* @__PURE__ */ jsxs14("p", { className: "mt-5 text-center text-sm text-white/70", children: [
+              ar ? "\u0644\u064A\u0633 \u0644\u062F\u064A\u0643 \u062D\u0633\u0627\u0628\u061F " : "No account? ",
+              /* @__PURE__ */ jsx15("button", { type: "button", onClick: onRegister, className: "font-medium text-white underline-offset-4 hover:underline", children: ar ? "\u0623\u0646\u0634\u0626 \u0648\u0627\u062D\u062F\u0627\u064B" : "Create one" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx15("div", { className: "absolute inset-x-0 bottom-7 z-10 flex items-center justify-center gap-5", "aria-hidden": "true", children: [Moon2, RotateCcw2, Power2].map((Icon, i) => /* @__PURE__ */ jsx15(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            className: "flex h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-white/10 text-white/70 backdrop-blur-md transition hover:bg-white/20 hover:text-white",
+            children: /* @__PURE__ */ jsx15(Icon, { className: "h-4 w-4" })
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+OSLoginScreen.displayName = "OSLoginScreen";
+
+// src/hooks/useOSSession.ts
+import { useCallback as useCallback4, useEffect as useEffect8, useState as useState10 } from "react";
+var DEFAULT_PREFS = {
+  theme: "dark",
+  accent: "#1FC7DC",
+  wallpaper: "aurora",
+  lock_wallpaper: "monterey",
+  dock_pinned: [],
+  desktop_hidden: [],
+  icon_positions: {}
+};
+function useOSSession(basePath = "/api/os/session") {
+  const [prefs, setPrefs] = useState10(DEFAULT_PREFS);
+  const [loading, setLoading] = useState10(true);
+  const [error, setError] = useState10(null);
+  useEffect8(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(basePath, { credentials: "include" });
+        if (!res.ok) throw new Error(`request failed (${res.status})`);
+        const data = await res.json();
+        if (!cancelled) setPrefs({ ...DEFAULT_PREFS, ...data });
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : "failed to load session");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [basePath]);
+  const save = useCallback4(
+    async (next) => {
+      const body = next ?? prefs;
+      const res = await fetch(basePath, {
+        method: "PUT",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body)
+      });
+      if (!res.ok) throw new Error(`save failed (${res.status})`);
+      const data = await res.json().catch(() => body);
+      setPrefs({ ...DEFAULT_PREFS, ...data });
+    },
+    [basePath, prefs]
+  );
+  return { prefs, setPrefs, save, loading, error };
+}
+
+// src/hooks/useOSApps.ts
+import { useCallback as useCallback5, useEffect as useEffect9, useState as useState11 } from "react";
+function useOSApps(basePath = "/api/os/apps") {
+  const [apps, setApps] = useState11([]);
+  const [loading, setLoading] = useState11(true);
+  const [error, setError] = useState11(null);
+  const refetch = useCallback5(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(basePath, { credentials: "include" });
+      if (!res.ok) throw new Error(`request failed (${res.status})`);
+      const data = await res.json();
+      setApps(Array.isArray(data) ? data : data.apps ?? []);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "failed to load apps");
+    } finally {
+      setLoading(false);
+    }
+  }, [basePath]);
+  useEffect9(() => {
+    refetch();
+  }, [refetch]);
+  return { apps, loading, error, refetch };
+}
+export {
+  DesktopContextMenu,
+  DesktopIcon,
+  DesktopIconGrid,
+  DesktopShell,
+  Dock,
+  Launchpad,
+  NotificationBell,
+  NotificationCenter,
+  OSLoginScreen,
+  Spotlight,
+  SpotlightTrigger,
+  TogoMenu,
+  TopBar,
+  WeatherWidget,
+  Window,
+  WindowManager,
+  WindowManagerProvider,
+  WindowSpinner,
+  clampWindowRect,
+  useOSApps,
+  useOSSession,
+  useWindowManager,
+  useWindowSection
+};
+//# sourceMappingURL=index.js.map