@omniviewdev/ui 0.1.0

package/dist/overlays.js

@@ -0,0 +1,865 @@
+import { jsxs as i, jsx as e, Fragment as D } from "react/jsx-runtime";
+import X from "@mui/material/Dialog";
+import U from "@mui/material/DialogTitle";
+import _ from "@mui/material/DialogContent";
+import K from "@mui/material/DialogActions";
+import k from "@mui/material/IconButton";
+import O from "@mui/icons-material/Close";
+import s from "@mui/material/Box";
+import h from "@mui/material/Typography";
+import { B as W } from "./Button-lr02bh_m.js";
+import L from "@mui/material/Modal";
+import { useState as P, useRef as C, useCallback as M, useEffect as A, useReducer as Y, createContext as q, useContext as J, useMemo as Q } from "react";
+import N from "@mui/material/Drawer";
+import { T as _e } from "./Tooltip-BEVuYuZ3.js";
+import G from "@mui/material/Popover";
+import V from "@mui/material/Snackbar";
+import Z from "@mui/material/Alert";
+import { toMuiColor as ee, toCssColor as re } from "./types.js";
+import { LuBell as F, LuCheck as oe, LuX as j, LuTriangleAlert as te } from "react-icons/lu";
+import B from "@mui/material/Button";
+import ne from "@mui/material/InputBase";
+import ie from "@mui/icons-material/Search";
+const ae = {
+  sm: "xs",
+  md: "sm",
+  lg: "md",
+  xl: "lg"
+};
+function le({
+  open: o,
+  onClose: r,
+  title: t,
+  icon: l,
+  size: d = "md",
+  variant: f = "default",
+  actions: c,
+  disableBackdropClose: n = !1,
+  children: u,
+  sx: a
+}) {
+  const p = d === "fullscreen", x = (w, S) => {
+    S === "backdropClick" && n || r();
+  }, b = c || (f === "confirm" ? /* @__PURE__ */ i(D, { children: [
+    /* @__PURE__ */ e(W, { emphasis: "ghost", color: "neutral", size: "sm", onClick: r, children: "Cancel" }),
+    /* @__PURE__ */ e(W, { emphasis: "solid", color: "primary", size: "sm", onClick: r, children: "Confirm" })
+  ] }) : f === "danger" ? /* @__PURE__ */ i(D, { children: [
+    /* @__PURE__ */ e(W, { emphasis: "ghost", color: "neutral", size: "sm", onClick: r, children: "Cancel" }),
+    /* @__PURE__ */ e(W, { emphasis: "solid", color: "danger", size: "sm", onClick: r, children: "Delete" })
+  ] }) : null);
+  return /* @__PURE__ */ i(
+    X,
+    {
+      open: o,
+      onClose: x,
+      fullScreen: p,
+      maxWidth: p ? !1 : ae[d],
+      fullWidth: !0,
+      sx: a,
+      children: [
+        t && /* @__PURE__ */ i(U, { sx: { display: "flex", alignItems: "center", gap: 1, pr: 6 }, children: [
+          l && /* @__PURE__ */ e(s, { sx: { display: "flex", color: "var(--ov-fg-muted)" }, children: l }),
+          /* @__PURE__ */ e(h, { variant: "h6", component: "span", sx: { fontWeight: 600 }, children: t }),
+          /* @__PURE__ */ e(
+            k,
+            {
+              size: "small",
+              onClick: r,
+              sx: { position: "absolute", right: 8, top: 8, color: "var(--ov-fg-faint)" },
+              "aria-label": "Close",
+              children: /* @__PURE__ */ e(O, { fontSize: "small" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(_, { children: u }),
+        b && /* @__PURE__ */ e(K, { sx: { px: 3, pb: 2 }, children: b })
+      ]
+    }
+  );
+}
+le.displayName = "Dialog";
+const se = {
+  sm: 400,
+  md: 600,
+  lg: 800,
+  xl: 1e3
+};
+function ce({
+  open: o,
+  onClose: r,
+  children: t,
+  size: l = "md",
+  backdrop: d = !0,
+  sx: f
+}) {
+  return /* @__PURE__ */ e(
+    L,
+    {
+      open: o,
+      onClose: r,
+      hideBackdrop: !d,
+      children: /* @__PURE__ */ e(
+        s,
+        {
+          sx: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: se[l],
+            maxWidth: "90vw",
+            maxHeight: "90vh",
+            overflow: "auto",
+            bgcolor: "var(--ov-bg-surface)",
+            border: "1px solid var(--ov-border-default)",
+            borderRadius: "8px",
+            boxShadow: 24,
+            p: 3,
+            ...typeof f == "object" && !Array.isArray(f) ? f : {}
+          },
+          children: t
+        }
+      )
+    }
+  );
+}
+ce.displayName = "Modal";
+function de({
+  open: o,
+  onClose: r,
+  anchor: t = "right",
+  size: l = 360,
+  resizable: d = !1,
+  persistent: f = !1,
+  children: c,
+  title: n,
+  sx: u
+}) {
+  const a = t === "left" || t === "right", [p, x] = P(typeof l == "number" ? l : 360), g = C(!1), b = C(0), w = C(0), S = M((z) => {
+    g.current = !0, b.current = a ? z.clientX : z.clientY, w.current = p, z.preventDefault();
+  }, [a, p]);
+  return A(() => {
+    if (!d) return;
+    const z = (v) => {
+      if (!g.current) return;
+      const m = a ? t === "right" ? b.current - v.clientX : v.clientX - b.current : b.current - v.clientY;
+      x(Math.max(200, w.current + m));
+    }, I = () => {
+      g.current = !1;
+    };
+    return document.addEventListener("mousemove", z), document.addEventListener("mouseup", I), () => {
+      document.removeEventListener("mousemove", z), document.removeEventListener("mouseup", I);
+    };
+  }, [d, a, t]), /* @__PURE__ */ i(
+    N,
+    {
+      open: o,
+      onClose: r,
+      anchor: t,
+      variant: f ? "persistent" : "temporary",
+      slotProps: {
+        paper: {
+          sx: {
+            ...a ? { width: d ? p : l } : { height: d ? p : l },
+            bgcolor: "var(--ov-bg-surface)",
+            borderColor: "var(--ov-border-default)",
+            ...typeof u == "object" && !Array.isArray(u) ? u : {}
+          }
+        }
+      },
+      children: [
+        d && /* @__PURE__ */ e(
+          s,
+          {
+            onMouseDown: S,
+            sx: {
+              position: "absolute",
+              ...a ? {
+                top: 0,
+                [t === "right" ? "left" : "right"]: 0,
+                width: 4,
+                height: "100%",
+                cursor: "col-resize"
+              } : {
+                left: 0,
+                top: 0,
+                height: 4,
+                width: "100%",
+                cursor: "row-resize"
+              },
+              zIndex: 1,
+              "&:hover": { bgcolor: "var(--ov-accent)" },
+              transition: "background-color 150ms"
+            }
+          }
+        ),
+        n && /* @__PURE__ */ i(
+          s,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              px: 2,
+              py: 1.5,
+              borderBottom: "1px solid var(--ov-border-default)"
+            },
+            children: [
+              /* @__PURE__ */ e(h, { variant: "subtitle1", sx: { fontWeight: 600, color: "var(--ov-fg-base)" }, children: n }),
+              /* @__PURE__ */ e(k, { size: "small", onClick: r, "aria-label": "Close", children: /* @__PURE__ */ e(O, { fontSize: "small" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(s, { sx: { flex: 1, overflow: "auto", p: n ? 2 : 0 }, children: c })
+      ]
+    }
+  );
+}
+de.displayName = "Drawer";
+const fe = {
+  top: { anchorOrigin: { vertical: "top", horizontal: "center" }, transformOrigin: { vertical: "bottom", horizontal: "center" } },
+  bottom: { anchorOrigin: { vertical: "bottom", horizontal: "center" }, transformOrigin: { vertical: "top", horizontal: "center" } },
+  left: { anchorOrigin: { vertical: "center", horizontal: "left" }, transformOrigin: { vertical: "center", horizontal: "right" } },
+  right: { anchorOrigin: { vertical: "center", horizontal: "right" }, transformOrigin: { vertical: "center", horizontal: "left" } }
+};
+function pe({
+  open: o,
+  onClose: r,
+  anchorEl: t,
+  children: l,
+  width: d,
+  placement: f = "bottom",
+  sx: c
+}) {
+  const n = fe[f];
+  return /* @__PURE__ */ e(
+    G,
+    {
+      open: o,
+      onClose: r,
+      anchorEl: t,
+      anchorOrigin: n.anchorOrigin,
+      transformOrigin: n.transformOrigin,
+      slotProps: {
+        paper: {
+          sx: {
+            width: d,
+            mt: f === "bottom" ? 0.5 : void 0,
+            mb: f === "top" ? 0.5 : void 0,
+            bgcolor: "var(--ov-bg-surface)",
+            border: "1px solid var(--ov-border-default)",
+            ...typeof c == "object" && !Array.isArray(c) ? c : {}
+          }
+        }
+      },
+      children: l
+    }
+  );
+}
+pe.displayName = "Popover";
+const R = q(null);
+function ve(o, r) {
+  switch (r.type) {
+    case "ADD":
+      return o.some((t) => t.message === r.toast.message) ? o : [...o, r.toast];
+    case "DISMISS":
+      return o.filter((t) => t.id !== r.id);
+    case "DISMISS_ALL":
+      return [];
+    default:
+      return o;
+  }
+}
+const ue = {
+  "top-right": { vertical: "top", horizontal: "right" },
+  "top-left": { vertical: "top", horizontal: "left" },
+  "bottom-right": { vertical: "bottom", horizontal: "right" },
+  "bottom-left": { vertical: "bottom", horizontal: "left" }
+};
+function me({
+  children: o,
+  maxVisible: r = 3,
+  position: t = "bottom-left"
+}) {
+  const [l, d] = Y(ve, []), f = C(/* @__PURE__ */ new Map());
+  A(() => {
+    for (const a of l) {
+      if (f.current.has(a.id)) continue;
+      const p = a.duration ?? 5e3, x = setTimeout(() => {
+        d({ type: "DISMISS", id: a.id }), f.current.delete(a.id);
+      }, p);
+      f.current.set(a.id, x);
+    }
+    for (const [a, p] of f.current)
+      l.some((x) => x.id === a) || (clearTimeout(p), f.current.delete(a));
+  }, [l]), A(() => () => {
+    f.current.forEach((a) => clearTimeout(a));
+  }, []);
+  const c = ue[t], n = l.slice(-r), u = {
+    success: "success",
+    info: "info",
+    warning: "warning",
+    error: "error",
+    danger: "error",
+    primary: "info",
+    secondary: "info",
+    neutral: "info",
+    accent: "info",
+    muted: "info"
+  };
+  return /* @__PURE__ */ i(R.Provider, { value: { dispatch: d }, children: [
+    o,
+    /* @__PURE__ */ e(
+      V,
+      {
+        open: n.length > 0,
+        anchorOrigin: c,
+        children: /* @__PURE__ */ e(s, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: n.map((a) => {
+          const p = a.color ? ee(a.color) : "info", x = u[p] ?? "info";
+          return /* @__PURE__ */ e(
+            Z,
+            {
+              severity: x,
+              variant: "filled",
+              action: /* @__PURE__ */ i(D, { children: [
+                a.action,
+                /* @__PURE__ */ e(
+                  k,
+                  {
+                    size: "small",
+                    color: "inherit",
+                    onClick: () => d({ type: "DISMISS", id: a.id }),
+                    children: /* @__PURE__ */ e(O, { fontSize: "small" })
+                  }
+                )
+              ] }),
+              sx: { minWidth: 280, boxShadow: 6 },
+              children: a.message
+            },
+            a.id
+          );
+        }) })
+      }
+    )
+  ] });
+}
+me.displayName = "ToastProvider";
+let he = 0;
+function $e() {
+  const o = J(R);
+  if (!o) throw new Error("useToast must be used within a ToastProvider");
+  const { dispatch: r } = o, t = M(
+    (c) => {
+      r({
+        type: "ADD",
+        toast: {
+          id: `toast-${he++}`,
+          message: c.message,
+          color: c.color,
+          duration: c.duration,
+          action: c.action,
+          timestamp: Date.now()
+        }
+      });
+    },
+    [r]
+  ), l = Q(() => {
+    const c = ((n) => t(n));
+    return c.success = (n) => t({ message: n, color: "success" }), c.error = (n) => t({ message: n, color: "error" }), c.warning = (n) => t({ message: n, color: "warning" }), c.info = (n) => t({ message: n, color: "info" }), c;
+  }, [t]), d = M(
+    (c) => r({ type: "DISMISS", id: c }),
+    [r]
+  ), f = M(
+    () => r({ type: "DISMISS_ALL" }),
+    [r]
+  );
+  return { toast: l, dismiss: d, dismissAll: f };
+}
+function xe(o) {
+  const t = (/* @__PURE__ */ new Date()).getTime() - o.getTime(), l = Math.floor(t / 6e4);
+  if (l < 1) return "Just now";
+  if (l < 60) return `${l}m ago`;
+  const d = Math.floor(l / 60);
+  return d < 24 ? `${d}h ago` : `${Math.floor(d / 24)}d ago`;
+}
+function ge({
+  open: o,
+  onClose: r,
+  notifications: t,
+  onDismiss: l,
+  onMarkRead: d,
+  onClearAll: f,
+  width: c = 360,
+  sx: n
+}) {
+  const u = t.filter((p) => !p.read), a = t.filter((p) => p.read);
+  return /* @__PURE__ */ i(
+    N,
+    {
+      anchor: "right",
+      open: o,
+      onClose: r,
+      slotProps: {
+        paper: {
+          sx: {
+            width: c,
+            bgcolor: "var(--ov-bg-surface)",
+            borderLeft: "1px solid var(--ov-border-default)",
+            ...typeof n == "object" && !Array.isArray(n) ? n : {}
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ i(
+          s,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              px: 2,
+              py: 1.5,
+              borderBottom: "1px solid var(--ov-border-default)"
+            },
+            children: [
+              /* @__PURE__ */ i(s, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ e(F, { size: 16 }),
+                /* @__PURE__ */ e(h, { sx: { fontWeight: 600, fontSize: "var(--ov-text-sm)", color: "var(--ov-fg-base)" }, children: "Notifications" }),
+                u.length > 0 && /* @__PURE__ */ e(
+                  s,
+                  {
+                    sx: {
+                      px: 0.75,
+                      py: 0.125,
+                      borderRadius: 999,
+                      bgcolor: "var(--ov-accent-subtle)",
+                      color: "var(--ov-accent-fg)",
+                      fontSize: "var(--ov-text-xs)",
+                      fontWeight: 600
+                    },
+                    children: u.length
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ i(s, { sx: { display: "flex", gap: 0.5 }, children: [
+                f && t.length > 0 && /* @__PURE__ */ e(k, { size: "small", onClick: f, sx: { color: "var(--ov-fg-muted)" }, children: /* @__PURE__ */ e(oe, { size: 14 }) }),
+                /* @__PURE__ */ e(k, { size: "small", onClick: r, sx: { color: "var(--ov-fg-muted)" }, children: /* @__PURE__ */ e(j, { size: 14 }) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(s, { sx: { flex: 1, overflow: "auto" }, children: [
+          t.length === 0 && /* @__PURE__ */ e(s, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ e(h, { sx: { color: "var(--ov-fg-faint)", fontSize: "var(--ov-text-sm)" }, children: "No notifications" }) }),
+          u.length > 0 && /* @__PURE__ */ i(D, { children: [
+            /* @__PURE__ */ e(h, { sx: { px: 2, pt: 1.5, pb: 0.5, fontSize: "var(--ov-text-xs)", fontWeight: 600, color: "var(--ov-fg-faint)", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Unread" }),
+            u.map((p) => /* @__PURE__ */ e(E, { item: p, onDismiss: l, onMarkRead: d }, p.id))
+          ] }),
+          a.length > 0 && /* @__PURE__ */ i(D, { children: [
+            /* @__PURE__ */ e(h, { sx: { px: 2, pt: 1.5, pb: 0.5, fontSize: "var(--ov-text-xs)", fontWeight: 600, color: "var(--ov-fg-faint)", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Earlier" }),
+            a.map((p) => /* @__PURE__ */ e(E, { item: p, onDismiss: l, onMarkRead: d }, p.id))
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function E({
+  item: o,
+  onDismiss: r,
+  onMarkRead: t
+}) {
+  return /* @__PURE__ */ i(
+    s,
+    {
+      sx: {
+        px: 2,
+        py: 1.5,
+        display: "flex",
+        gap: 1.5,
+        "&:hover": { bgcolor: "var(--ov-state-hover)" },
+        borderBottom: "1px solid var(--ov-border-muted)",
+        ...!o.read && { bgcolor: "var(--ov-accent-subtle)", opacity: 1 }
+      },
+      onClick: () => t?.(o.id),
+      children: [
+        /* @__PURE__ */ e(s, { sx: { pt: 0.25, color: o.color ? re(o.color) : "var(--ov-fg-muted)", flexShrink: 0 }, children: o.icon ?? /* @__PURE__ */ e(F, { size: 14 }) }),
+        /* @__PURE__ */ i(s, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ i(s, { sx: { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.25 }, children: [
+            /* @__PURE__ */ e(h, { sx: { fontSize: "var(--ov-text-sm)", fontWeight: 500, color: "var(--ov-fg-base)" }, children: o.title }),
+            /* @__PURE__ */ e(h, { sx: { fontSize: "var(--ov-text-xs)", color: "var(--ov-fg-faint)", whiteSpace: "nowrap", ml: 1 }, children: xe(o.timestamp) })
+          ] }),
+          o.message && /* @__PURE__ */ e(h, { sx: { fontSize: "var(--ov-text-xs)", color: "var(--ov-fg-muted)", lineHeight: 1.4 }, children: o.message }),
+          /* @__PURE__ */ i(s, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 0.5 }, children: [
+            o.action && /* @__PURE__ */ e(
+              h,
+              {
+                onClick: (l) => {
+                  l.stopPropagation(), o.action.onClick();
+                },
+                sx: { fontSize: "var(--ov-text-xs)", color: "var(--ov-accent-fg)", cursor: "pointer", "&:hover": { textDecoration: "underline" } },
+                children: o.action.label
+              }
+            ),
+            r && /* @__PURE__ */ e(
+              k,
+              {
+                size: "small",
+                onClick: (l) => {
+                  l.stopPropagation(), r(o.id);
+                },
+                sx: { p: "2px", color: "var(--ov-fg-faint)", "&:hover": { color: "var(--ov-fg-default)" } },
+                children: /* @__PURE__ */ e(j, { size: 12 })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+ge.displayName = "NotificationCenter";
+function be({
+  open: o,
+  onClose: r,
+  title: t = "Error",
+  message: l,
+  file: d,
+  line: f,
+  stack: c,
+  actions: n,
+  sx: u
+}) {
+  return o ? /* @__PURE__ */ e(
+    s,
+    {
+      sx: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: "rgba(0, 0, 0, 0.6)",
+        backdropFilter: "blur(4px)",
+        ...typeof u == "object" && !Array.isArray(u) ? u : {}
+      },
+      children: /* @__PURE__ */ i(
+        s,
+        {
+          sx: {
+            bgcolor: "var(--ov-bg-surface)",
+            border: "1px solid var(--ov-danger-default)",
+            borderRadius: "8px",
+            maxWidth: 560,
+            width: "90%",
+            maxHeight: "80vh",
+            overflow: "auto",
+            boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
+          },
+          children: [
+            /* @__PURE__ */ i(
+              s,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  px: 2.5,
+                  py: 1.5,
+                  borderBottom: "1px solid var(--ov-border-default)",
+                  bgcolor: "var(--ov-danger-default)"
+                },
+                children: [
+                  /* @__PURE__ */ i(s, { sx: { display: "flex", alignItems: "center", gap: 1, color: "#fff" }, children: [
+                    /* @__PURE__ */ e(te, { size: 16 }),
+                    /* @__PURE__ */ e(h, { sx: { fontWeight: 600, fontSize: "var(--ov-text-sm)" }, children: t })
+                  ] }),
+                  /* @__PURE__ */ e(k, { size: "small", onClick: r, sx: { color: "#fff" }, children: /* @__PURE__ */ e(j, { size: 16 }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ i(s, { sx: { px: 2.5, py: 2 }, children: [
+              /* @__PURE__ */ e(h, { sx: { fontSize: "var(--ov-text-sm)", color: "var(--ov-fg-base)", mb: 1.5, lineHeight: 1.5 }, children: l }),
+              d && /* @__PURE__ */ i(
+                s,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    mb: 1.5,
+                    fontFamily: "var(--ov-font-mono)",
+                    fontSize: "var(--ov-text-xs)",
+                    color: "var(--ov-fg-muted)"
+                  },
+                  children: [
+                    /* @__PURE__ */ e("span", { children: d }),
+                    f !== void 0 && /* @__PURE__ */ i("span", { children: [
+                      ":",
+                      f
+                    ] })
+                  ]
+                }
+              ),
+              c && /* @__PURE__ */ e(
+                s,
+                {
+                  component: "pre",
+                  sx: {
+                    bgcolor: "var(--ov-bg-surface-inset)",
+                    border: "1px solid var(--ov-border-muted)",
+                    borderRadius: "4px",
+                    p: 1.5,
+                    fontSize: "var(--ov-text-xs)",
+                    fontFamily: "var(--ov-font-mono)",
+                    color: "var(--ov-fg-muted)",
+                    overflow: "auto",
+                    maxHeight: 200,
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-all",
+                    m: 0
+                  },
+                  children: c
+                }
+              )
+            ] }),
+            n && n.length > 0 && /* @__PURE__ */ i(
+              s,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: 1,
+                  px: 2.5,
+                  py: 1.5,
+                  borderTop: "1px solid var(--ov-border-default)"
+                },
+                children: [
+                  n.map((a) => /* @__PURE__ */ e(
+                    B,
+                    {
+                      size: "small",
+                      variant: "outlined",
+                      onClick: a.onClick,
+                      sx: { textTransform: "none", fontSize: "var(--ov-text-sm)" },
+                      children: a.label
+                    },
+                    a.label
+                  )),
+                  /* @__PURE__ */ e(
+                    B,
+                    {
+                      size: "small",
+                      variant: "contained",
+                      onClick: r,
+                      sx: { textTransform: "none", fontSize: "var(--ov-text-sm)" },
+                      children: "Dismiss"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : null;
+}
+be.displayName = "ErrorOverlay";
+function ye({
+  open: o,
+  onClose: r,
+  onSearch: t,
+  placeholder: l = "Search commands, files, settings...",
+  recentItems: d,
+  width: f = 560,
+  sx: c
+}) {
+  const [n, u] = P(""), [a, p] = P([]), [x, g] = P(0), b = C(null);
+  A(() => {
+    o || (u(""), p([]), g(0));
+  }, [o]), A(() => {
+    if (!n.trim()) {
+      p([]), g(0);
+      return;
+    }
+    let v = !1;
+    const m = t(n);
+    return m instanceof Promise ? m.then((y) => {
+      v || (p(y), g(0));
+    }) : (p(m), g(0)), () => {
+      v = !0;
+    };
+  }, [n, t]);
+  const w = n.trim() ? a : d ?? [], S = /* @__PURE__ */ new Map();
+  for (const v of w) {
+    const m = v.section ?? "";
+    S.has(m) || S.set(m, []), S.get(m).push(v);
+  }
+  const T = w, z = M((v) => {
+    if (v.key === "ArrowDown")
+      v.preventDefault(), g((m) => Math.min(m + 1, T.length - 1));
+    else if (v.key === "ArrowUp")
+      v.preventDefault(), g((m) => Math.max(m - 1, 0));
+    else if (v.key === "Enter") {
+      v.preventDefault();
+      const m = T[x];
+      m && (m.onSelect(), r());
+    } else v.key === "Escape" && r();
+  }, [T, x, r]);
+  let I = -1;
+  return /* @__PURE__ */ e(L, { open: o, onClose: r, slotProps: { backdrop: { sx: { bgcolor: "rgba(0,0,0,0.4)", backdropFilter: "blur(2px)" } } }, children: /* @__PURE__ */ i(
+    s,
+    {
+      sx: {
+        position: "absolute",
+        top: "20%",
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: f,
+        maxHeight: "60vh",
+        bgcolor: "var(--ov-bg-surface)",
+        border: "1px solid var(--ov-border-default)",
+        borderRadius: "8px",
+        boxShadow: "0 16px 48px rgba(0,0,0,0.3)",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        ...typeof c == "object" && !Array.isArray(c) ? c : {}
+      },
+      children: [
+        /* @__PURE__ */ i(
+          s,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              px: 2,
+              py: 1.5,
+              borderBottom: "1px solid var(--ov-border-default)",
+              gap: 1
+            },
+            children: [
+              /* @__PURE__ */ e(ie, { sx: { color: "var(--ov-fg-muted)", fontSize: 20 } }),
+              /* @__PURE__ */ e(
+                ne,
+                {
+                  ref: b,
+                  autoFocus: !0,
+                  value: n,
+                  onChange: (v) => u(v.target.value),
+                  onKeyDown: z,
+                  placeholder: l,
+                  fullWidth: !0,
+                  sx: {
+                    fontSize: "var(--ov-text-sm)",
+                    color: "var(--ov-fg-base)",
+                    "& input::placeholder": { color: "var(--ov-fg-faint)", opacity: 1 }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(s, { sx: { overflow: "auto", maxHeight: 400 }, children: [
+          w.length === 0 && n.trim() && /* @__PURE__ */ e(s, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ i(h, { sx: { color: "var(--ov-fg-faint)", fontSize: "var(--ov-text-sm)" }, children: [
+            "No results for “",
+            n,
+            "”"
+          ] }) }),
+          Array.from(S.entries()).map(([v, m]) => /* @__PURE__ */ i(s, { children: [
+            v && /* @__PURE__ */ e(
+              h,
+              {
+                sx: {
+                  px: 2,
+                  pt: 1.5,
+                  pb: 0.5,
+                  fontSize: "var(--ov-text-xs)",
+                  fontWeight: 600,
+                  color: "var(--ov-fg-faint)",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em"
+                },
+                children: v
+              }
+            ),
+            m.map((y) => {
+              I++;
+              const H = I === x, $ = I;
+              return /* @__PURE__ */ i(
+                s,
+                {
+                  onClick: () => {
+                    y.onSelect(), r();
+                  },
+                  onMouseEnter: () => g($),
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.5,
+                    px: 2,
+                    py: 1,
+                    cursor: "pointer",
+                    bgcolor: H ? "var(--ov-state-hover)" : "transparent",
+                    "&:hover": { bgcolor: "var(--ov-state-hover)" }
+                  },
+                  children: [
+                    y.icon && /* @__PURE__ */ e(s, { sx: { color: "var(--ov-fg-muted)", flexShrink: 0, display: "flex" }, children: y.icon }),
+                    /* @__PURE__ */ i(s, { sx: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ e(h, { sx: { fontSize: "var(--ov-text-sm)", color: "var(--ov-fg-base)" }, children: y.label }),
+                      y.description && /* @__PURE__ */ e(h, { sx: { fontSize: "var(--ov-text-xs)", color: "var(--ov-fg-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: y.description })
+                    ] })
+                  ]
+                },
+                y.id
+              );
+            })
+          ] }, v))
+        ] }),
+        /* @__PURE__ */ i(
+          s,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              px: 2,
+              py: 1,
+              borderTop: "1px solid var(--ov-border-default)",
+              fontSize: "var(--ov-text-xs)",
+              color: "var(--ov-fg-faint)"
+            },
+            children: [
+              /* @__PURE__ */ i("span", { children: [
+                /* @__PURE__ */ e("kbd", { style: { fontFamily: "var(--ov-font-mono)" }, children: "↑↓" }),
+                " navigate"
+              ] }),
+              /* @__PURE__ */ i("span", { children: [
+                /* @__PURE__ */ e("kbd", { style: { fontFamily: "var(--ov-font-mono)" }, children: "↵" }),
+                " select"
+              ] }),
+              /* @__PURE__ */ i("span", { children: [
+                /* @__PURE__ */ e("kbd", { style: { fontFamily: "var(--ov-font-mono)" }, children: "esc" }),
+                " close"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+ye.displayName = "Spotlight";
+export {
+  le as Dialog,
+  de as Drawer,
+  be as ErrorOverlay,
+  ce as Modal,
+  ge as NotificationCenter,
+  pe as Popover,
+  ye as Spotlight,
+  me as ToastProvider,
+  _e as Tooltip,
+  $e as useToast
+};