@omniviewdev/ui 0.1.0

package/dist/feedback.js

@@ -0,0 +1,1011 @@
+import { jsx as r, jsxs as d, Fragment as L } from "react/jsx-runtime";
+import W from "@mui/material/Alert";
+import M from "@mui/material/IconButton";
+import E from "@mui/icons-material/Close";
+import { alpha as w } from "@mui/material/styles";
+import { S as Je } from "./StatusDot-CncykBAY.js";
+import { S as Oe } from "./StatusPill-C1NaiCzd.js";
+import { E as Ue, a as Ye } from "./ErrorState-CexYrMpy.js";
+import { S as er } from "./Skeleton-BUYyXUiC.js";
+import k, { useState as D, useCallback as I, createContext as F, useRef as H, useEffect as $, useContext as V } from "react";
+import a from "@mui/material/Box";
+import x from "@mui/material/Tooltip";
+import { toCssColor as C, toMuiSize as X } from "./types.js";
+import N from "@mui/material/LinearProgress";
+import b from "@mui/material/Typography";
+import P from "@mui/material/Button";
+import S from "@mui/material/CircularProgress";
+import { LuSquare as _, LuPlay as q, LuX as G, LuCircleAlert as J, LuTriangleAlert as K, LuCircleCheck as O, LuInfo as Q } from "react-icons/lu";
+const U = {
+  solid: "filled",
+  soft: "standard",
+  outline: "outlined"
+}, Y = {
+  xs: { padding: "0px 6px", fontSize: "var(--ov-text-xs)", iconSize: 16, borderRadius: 6, closeSize: "small" },
+  sm: { padding: "2px 8px", fontSize: "var(--ov-text-sm)", iconSize: 18, borderRadius: 8, closeSize: "small" },
+  md: { padding: "6px 12px", fontSize: "var(--ov-text-sm)", iconSize: 20, borderRadius: 10, closeSize: "small" },
+  lg: { padding: "8px 16px", fontSize: "var(--ov-text-md)", iconSize: 22, borderRadius: 10, closeSize: "medium" },
+  xl: { padding: "12px 16px", fontSize: "var(--ov-text-md)", iconSize: 24, borderRadius: 12, closeSize: "medium" }
+}, Z = {
+  success: {
+    light: { bg: "hsl(120, 80%, 98%)", fg: "hsl(120, 87%, 6%)", border: "hsl(120, 61%, 77%)", icon: "hsl(120, 44%, 53%)" },
+    dark: { bg: "hsl(120, 84%, 10%)", fg: "hsl(120, 75%, 94%)", border: "hsl(120, 75%, 16%)", icon: "hsl(120, 44%, 53%)" }
+  },
+  warning: {
+    light: { bg: "hsl(45, 100%, 97%)", fg: "hsl(45, 93%, 12%)", border: "hsl(45, 90%, 65%)", icon: "hsl(45, 90%, 40%)" },
+    dark: { bg: "hsl(45, 95%, 16%)", fg: "hsl(45, 92%, 90%)", border: "hsl(45, 94%, 20%)", icon: "hsl(45, 90%, 40%)" }
+  },
+  error: {
+    light: { bg: "hsl(0, 100%, 97%)", fg: "hsl(0, 93%, 6%)", border: "hsl(0, 90%, 65%)", icon: "hsl(0, 90%, 40%)" },
+    dark: { bg: "hsl(0, 95%, 12%)", fg: "hsl(0, 92%, 90%)", border: "hsl(0, 94%, 18%)", icon: "hsl(0, 90%, 40%)" }
+  },
+  danger: {
+    light: { bg: "hsl(0, 100%, 97%)", fg: "hsl(0, 93%, 6%)", border: "hsl(0, 90%, 65%)", icon: "hsl(0, 90%, 40%)" },
+    dark: { bg: "hsl(0, 95%, 12%)", fg: "hsl(0, 92%, 90%)", border: "hsl(0, 94%, 18%)", icon: "hsl(0, 90%, 40%)" }
+  },
+  info: {
+    light: { bg: "hsl(210, 100%, 95%)", fg: "hsl(210, 100%, 21%)", border: "hsl(210, 100%, 65%)", icon: "hsl(210, 98%, 42%)" },
+    dark: { bg: "hsl(210, 100%, 16%)", fg: "hsl(210, 100%, 92%)", border: "hsl(210, 100%, 35%)", icon: "hsl(210, 98%, 55%)" }
+  },
+  primary: {
+    light: { bg: "hsl(210, 100%, 95%)", fg: "hsl(210, 100%, 21%)", border: "hsl(210, 100%, 80%)", icon: "hsl(210, 98%, 48%)" },
+    dark: { bg: "hsl(210, 100%, 16%)", fg: "hsl(210, 100%, 92%)", border: "hsl(210, 100%, 35%)", icon: "hsl(210, 98%, 55%)" }
+  },
+  secondary: {
+    light: { bg: "hsl(270, 100%, 97%)", fg: "hsl(270, 70%, 42%)", border: "hsl(270, 80%, 80%)", icon: "hsl(270, 70%, 50%)" },
+    dark: { bg: "hsl(270, 80%, 16%)", fg: "hsl(270, 92%, 90%)", border: "hsl(270, 75%, 25%)", icon: "hsl(270, 70%, 65%)" }
+  },
+  accent: {
+    light: { bg: "hsl(270, 100%, 97%)", fg: "hsl(270, 70%, 42%)", border: "hsl(270, 80%, 80%)", icon: "hsl(270, 70%, 50%)" },
+    dark: { bg: "hsl(270, 80%, 16%)", fg: "hsl(270, 92%, 90%)", border: "hsl(270, 75%, 25%)", icon: "hsl(270, 70%, 65%)" }
+  },
+  neutral: {
+    light: { bg: "hsl(220, 35%, 97%)", fg: "hsl(220, 20%, 42%)", border: "hsl(220, 20%, 88%)", icon: "hsl(220, 20%, 65%)" },
+    dark: { bg: "hsl(220, 30%, 6%)", fg: "hsl(220, 30%, 94%)", border: "hsl(220, 20%, 25%)", icon: "hsl(220, 20%, 80%)" }
+  },
+  muted: {
+    light: { bg: "hsl(220, 35%, 97%)", fg: "hsl(220, 20%, 42%)", border: "hsl(220, 20%, 88%)", icon: "hsl(220, 20%, 65%)" },
+    dark: { bg: "hsl(220, 30%, 6%)", fg: "hsl(220, 30%, 94%)", border: "hsl(220, 20%, 25%)", icon: "hsl(220, 20%, 80%)" }
+  }
+};
+function R(e, t) {
+  return t === "outline" ? { bg: "transparent", fg: e.fg, border: `1px solid ${w(e.border, 0.7)}`, icon: e.icon } : t === "solid" ? { bg: e.icon, fg: "#fff", border: "none", icon: "#fff" } : { bg: e.bg, fg: e.fg, border: `1px solid ${w(e.border, 0.5)}`, icon: e.icon };
+}
+function ee({
+  children: e,
+  color: t = "info",
+  emphasis: o = "soft",
+  dismissible: i = !1,
+  onDismiss: n,
+  actions: l,
+  icon: s,
+  startAdornment: c,
+  size: f = "md",
+  sx: p
+}) {
+  const g = U[o] || "standard", h = Y[f], v = {
+    success: "success",
+    info: "info",
+    warning: "warning",
+    error: "error",
+    danger: "error",
+    primary: "info",
+    secondary: "info",
+    accent: "info",
+    neutral: "info",
+    muted: "info"
+  }[t] ?? "info";
+  return /* @__PURE__ */ r(
+    W,
+    {
+      severity: v,
+      variant: g,
+      icon: s === !1 ? !1 : s ?? c,
+      action: /* @__PURE__ */ d(L, { children: [
+        l,
+        i && /* @__PURE__ */ r(
+          M,
+          {
+            size: h.closeSize,
+            color: "inherit",
+            onClick: n,
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ r(E, { fontSize: "small" })
+          }
+        )
+      ] }),
+      sx: (B) => {
+        const A = Z[t], z = R(A.light, o), y = R(A.dark, o), T = o === "soft" ? w(y.bg, 0.3) : y.bg;
+        return {
+          // Sizing
+          padding: h.padding,
+          fontSize: h.fontSize,
+          borderRadius: `${h.borderRadius}px`,
+          alignItems: "center",
+          // Light mode colors (default)
+          backgroundColor: z.bg,
+          color: z.fg,
+          border: z.border,
+          "& .MuiAlert-icon": {
+            fontSize: h.iconSize,
+            mr: f === "xs" ? 0.5 : 1,
+            py: 0,
+            color: z.icon
+          },
+          "& .MuiAlert-message": {
+            py: 0,
+            overflow: "hidden"
+          },
+          "& .MuiAlert-action": {
+            py: 0,
+            alignItems: "center"
+          },
+          // Dark mode overrides via MUI v7 CSS variables
+          ...B.applyStyles("dark", {
+            backgroundColor: T,
+            color: y.fg,
+            border: y.border,
+            "& .MuiAlert-icon": { color: y.icon }
+          }),
+          // User-provided sx last
+          ...typeof p == "object" && p !== null ? p : {}
+        };
+      },
+      children: e
+    }
+  );
+}
+ee.displayName = "Alert";
+function re({
+  children: e,
+  height: t = 24,
+  sx: o
+}) {
+  const i = k.Children.toArray(e), n = i.filter((s) => k.isValidElement(s) ? s.props.align !== "right" : !0), l = i.filter((s) => k.isValidElement(s) ? s.props.align === "right" : !1);
+  return /* @__PURE__ */ d(
+    a,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        height: t,
+        px: 1,
+        bgcolor: "var(--ov-bg-surface)",
+        borderTop: "1px solid var(--ov-border-default)",
+        fontSize: "var(--ov-text-xs)",
+        ...typeof o == "object" && !Array.isArray(o) ? o : {}
+      },
+      children: [
+        /* @__PURE__ */ r(a, { sx: { display: "flex", alignItems: "center", gap: 0 }, children: n }),
+        /* @__PURE__ */ r(a, { sx: { display: "flex", alignItems: "center", gap: 0 }, children: l })
+      ]
+    }
+  );
+}
+re.displayName = "StatusBar";
+function te({
+  children: e,
+  icon: t,
+  onClick: o,
+  tooltip: i,
+  color: n,
+  separator: l = !1,
+  sx: s
+}) {
+  const c = /* @__PURE__ */ d(
+    a,
+    {
+      onClick: o,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5,
+        px: 0.75,
+        height: 20,
+        fontSize: "var(--ov-text-xs)",
+        color: n ? C(n) : "var(--ov-fg-default)",
+        cursor: o ? "pointer" : "default",
+        borderRadius: "3px",
+        whiteSpace: "nowrap",
+        ...l && {
+          borderRight: "1px solid var(--ov-border-muted)",
+          pr: 1,
+          mr: 0.25
+        },
+        ...o && {
+          "&:hover": { bgcolor: "var(--ov-state-hover)" }
+        },
+        ...typeof s == "object" && !Array.isArray(s) ? s : {}
+      },
+      children: [
+        t && /* @__PURE__ */ r(a, { component: "span", sx: { display: "inline-flex", fontSize: "0.75rem" }, children: t }),
+        e
+      ]
+    }
+  );
+  return i ? /* @__PURE__ */ r(x, { title: i, children: c }) : c;
+}
+te.displayName = "StatusBarItem";
+const oe = {
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 10
+};
+function ie({
+  value: e,
+  indeterminate: t = !1,
+  color: o = "primary",
+  size: i = "sm",
+  label: n,
+  showValue: l = !1,
+  sx: s
+}) {
+  const c = C(o), f = oe[i];
+  return /* @__PURE__ */ d(
+    a,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.5,
+        ...typeof s == "object" && !Array.isArray(s) ? s : {}
+      },
+      children: [
+        (n || l) && /* @__PURE__ */ d(a, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+          n && /* @__PURE__ */ r(b, { sx: { fontSize: "var(--ov-text-xs)", color: "var(--ov-fg-muted)" }, children: n }),
+          l && !t && e !== void 0 && /* @__PURE__ */ d(b, { sx: { fontSize: "var(--ov-text-xs)", color: "var(--ov-fg-muted)" }, children: [
+            Math.round(e),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ r(
+          N,
+          {
+            variant: t ? "indeterminate" : "determinate",
+            value: t ? void 0 : e,
+            sx: {
+              height: f,
+              borderRadius: f / 2,
+              bgcolor: "var(--ov-bg-surface-inset)",
+              "& .MuiLinearProgress-bar": {
+                bgcolor: c,
+                borderRadius: f / 2
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+ie.displayName = "ProgressBar";
+const ne = {
+  connected: "var(--ov-success-default)",
+  connecting: "var(--ov-warning-default)",
+  disconnected: "var(--ov-fg-faint)",
+  error: "var(--ov-danger-default)"
+}, se = {
+  connected: "Connected",
+  connecting: "Connecting",
+  disconnected: "Disconnected",
+  error: "Error"
+}, ae = {
+  xs: 6,
+  sm: 8,
+  md: 10,
+  lg: 12,
+  xl: 14
+};
+function le({
+  status: e,
+  label: t,
+  size: o = "sm",
+  showLabel: i = !0,
+  sx: n
+}) {
+  const l = ne[e], s = ae[o], c = t ?? se[e];
+  return /* @__PURE__ */ d(
+    a,
+    {
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.75,
+        ...typeof n == "object" && !Array.isArray(n) ? n : {}
+      },
+      children: [
+        /* @__PURE__ */ r(
+          a,
+          {
+            sx: {
+              width: s,
+              height: s,
+              borderRadius: "50%",
+              bgcolor: l,
+              flexShrink: 0,
+              ...e === "connecting" && {
+                animation: "ov-conn-pulse 1.5s ease-in-out infinite",
+                "@keyframes ov-conn-pulse": {
+                  "0%, 100%": { opacity: 1 },
+                  "50%": { opacity: 0.3 }
+                }
+              }
+            }
+          }
+        ),
+        i && /* @__PURE__ */ r(
+          b,
+          {
+            sx: {
+              fontSize: o === "xs" ? "var(--ov-text-xs)" : "var(--ov-text-sm)",
+              color: "var(--ov-fg-default)",
+              lineHeight: 1
+            },
+            children: c
+          }
+        )
+      ]
+    }
+  );
+}
+le.displayName = "ConnectionIndicator";
+const ce = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20
+};
+function de({
+  running: e,
+  onStart: t,
+  onStop: o,
+  loading: i = !1,
+  size: n = "sm",
+  label: l,
+  sx: s
+}) {
+  const c = X(n), f = ce[n];
+  return /* @__PURE__ */ r(
+    P,
+    {
+      size: c,
+      variant: "contained",
+      onClick: () => {
+        e ? o() : t();
+      },
+      disabled: i,
+      startIcon: i ? /* @__PURE__ */ r(S, { size: f, color: "inherit" }) : e ? /* @__PURE__ */ r(_, { size: f }) : /* @__PURE__ */ r(q, { size: f }),
+      sx: {
+        bgcolor: e ? "var(--ov-danger-default)" : "var(--ov-success-default)",
+        color: "#fff",
+        textTransform: "none",
+        "&:hover": {
+          bgcolor: e ? "var(--ov-danger-default)" : "var(--ov-success-default)",
+          filter: "brightness(0.9)"
+        },
+        ...typeof s == "object" && !Array.isArray(s) ? s : {}
+      },
+      children: l ?? (e ? "Stop" : "Run")
+    }
+  );
+}
+de.displayName = "RunButton";
+const j = F(null);
+function _e() {
+  const e = V(j);
+  if (!e) throw new Error("useNotificationStack must be used within a NotificationStackProvider");
+  return e;
+}
+const fe = {
+  info: /* @__PURE__ */ r(Q, { size: 16 }),
+  success: /* @__PURE__ */ r(O, { size: 16 }),
+  warning: /* @__PURE__ */ r(K, { size: 16 }),
+  error: /* @__PURE__ */ r(J, { size: 16 })
+}, ge = {
+  info: "var(--ov-info-default)",
+  success: "var(--ov-success-default)",
+  warning: "var(--ov-warning-default)",
+  error: "var(--ov-danger-default)"
+};
+function he({
+  notification: e,
+  onDismiss: t
+}) {
+  const { id: o, severity: i, title: n, message: l, actions: s, timeout: c } = e, f = H(void 0);
+  $(() => {
+    const g = c ?? 8e3;
+    return g > 0 && (f.current = setTimeout(() => t(o), g)), () => {
+      f.current && clearTimeout(f.current);
+    };
+  }, [o, c, t]);
+  const p = ge[i];
+  return /* @__PURE__ */ d(
+    a,
+    {
+      sx: {
+        display: "flex",
+        gap: 1,
+        minWidth: 320,
+        maxWidth: 420,
+        bgcolor: "var(--ov-bg-surface)",
+        border: "1px solid var(--ov-border-default)",
+        borderLeft: `3px solid ${p}`,
+        borderRadius: "6px",
+        boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
+        p: 1.5,
+        animation: "ov-notif-slide-in 0.2s ease-out",
+        "@keyframes ov-notif-slide-in": {
+          from: { opacity: 0, transform: "translateX(40px)" },
+          to: { opacity: 1, transform: "translateX(0)" }
+        }
+      },
+      children: [
+        /* @__PURE__ */ r(a, { sx: { color: p, pt: "2px", flexShrink: 0 }, children: fe[i] }),
+        /* @__PURE__ */ d(a, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ r(
+            b,
+            {
+              sx: {
+                fontSize: "0.8125rem",
+                fontWeight: 600,
+                color: "var(--ov-fg-base)",
+                lineHeight: 1.4
+              },
+              children: n
+            }
+          ),
+          l && /* @__PURE__ */ r(
+            b,
+            {
+              sx: {
+                fontSize: "0.75rem",
+                color: "var(--ov-fg-muted)",
+                lineHeight: 1.4,
+                mt: 0.25
+              },
+              children: l
+            }
+          ),
+          s && s.length > 0 && /* @__PURE__ */ r(a, { sx: { display: "flex", gap: 0.5, mt: 1 }, children: s.map((g) => /* @__PURE__ */ r(
+            P,
+            {
+              size: "small",
+              variant: "text",
+              onClick: () => {
+                g.onClick(), t(o);
+              },
+              sx: {
+                textTransform: "none",
+                fontSize: "0.6875rem",
+                fontWeight: 600,
+                color: "var(--ov-accent-fg)",
+                minWidth: "auto",
+                px: 1,
+                py: 0.25
+              },
+              children: g.label
+            },
+            g.label
+          )) })
+        ] }),
+        /* @__PURE__ */ r(
+          M,
+          {
+            size: "small",
+            onClick: () => t(o),
+            sx: {
+              alignSelf: "flex-start",
+              p: "2px",
+              color: "var(--ov-fg-faint)",
+              "&:hover": { color: "var(--ov-fg-default)" }
+            },
+            children: /* @__PURE__ */ r(G, { size: 14 })
+          }
+        )
+      ]
+    }
+  );
+}
+let pe = 0;
+function ue({
+  children: e,
+  maxVisible: t = 5,
+  position: o = "bottom-right",
+  sx: i
+}) {
+  const [n, l] = D([]), s = I((h) => {
+    const m = `notif-${++pe}`;
+    return l((v) => [...v, { ...h, id: m }]), m;
+  }, []), c = I((h) => {
+    l((m) => m.filter((v) => v.id !== h));
+  }, []), f = I(() => {
+    l([]);
+  }, []), p = {
+    "bottom-right": { bottom: 32, right: 12 },
+    "bottom-left": { bottom: 32, left: 12 },
+    "top-right": { top: 12, right: 12 },
+    "top-left": { top: 12, left: 12 }
+  }, g = n.slice(-t);
+  return /* @__PURE__ */ d(j.Provider, { value: { push: s, dismiss: c, dismissAll: f }, children: [
+    e,
+    g.length > 0 && /* @__PURE__ */ r(
+      a,
+      {
+        sx: {
+          position: "fixed",
+          zIndex: 9998,
+          display: "flex",
+          flexDirection: o.startsWith("bottom") ? "column-reverse" : "column",
+          gap: 0.75,
+          ...p[o],
+          ...typeof i == "object" && !Array.isArray(i) ? i : {}
+        },
+        children: g.map((h) => /* @__PURE__ */ r(
+          he,
+          {
+            notification: h,
+            onDismiss: c
+          },
+          h.id
+        ))
+      }
+    )
+  ] });
+}
+ue.displayName = "NotificationStackProvider";
+function me({ label: e, bgColor: t, color: o, icon: i, onClick: n, tooltip: l }) {
+  const s = /* @__PURE__ */ d(
+    a,
+    {
+      onClick: n,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        px: "6px",
+        height: "100%",
+        fontSize: "0.625rem",
+        fontWeight: 700,
+        letterSpacing: "0.04em",
+        textTransform: "uppercase",
+        bgcolor: t ?? "transparent",
+        color: o ?? "#fff",
+        cursor: n ? "pointer" : "default",
+        whiteSpace: "nowrap",
+        "&:hover": n ? { filter: "brightness(1.15)" } : {}
+      },
+      children: [
+        i && /* @__PURE__ */ r(a, { sx: { display: "flex", fontSize: "0.625rem" }, children: i }),
+        e
+      ]
+    }
+  );
+  return l ? /* @__PURE__ */ r(x, { title: l, children: s }) : s;
+}
+function xe({ color: e, pulse: t, tooltip: o, onClick: i }) {
+  const n = /* @__PURE__ */ r(
+    a,
+    {
+      onClick: i,
+      sx: {
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        bgcolor: e,
+        flexShrink: 0,
+        cursor: i ? "pointer" : "default",
+        "&:hover": i ? { filter: "brightness(1.3)" } : {},
+        ...t && {
+          animation: "ov-footer-pulse 1.5s ease-in-out infinite",
+          "@keyframes ov-footer-pulse": {
+            "0%, 100%": { opacity: 1 },
+            "50%": { opacity: 0.3 }
+          }
+        }
+      }
+    }
+  );
+  return o ? /* @__PURE__ */ r(x, { title: o, children: n }) : n;
+}
+function ve({ children: e, icon: t, onClick: o, tooltip: i }) {
+  const n = /* @__PURE__ */ d(
+    a,
+    {
+      onClick: o,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "3px",
+        px: "6px",
+        fontSize: "0.6875rem",
+        color: "var(--ov-fg-default)",
+        cursor: o ? "pointer" : "default",
+        borderRadius: "2px",
+        whiteSpace: "nowrap",
+        "&:hover": o ? { bgcolor: "rgba(255,255,255,0.08)" } : {}
+      },
+      children: [
+        t && /* @__PURE__ */ r(a, { sx: { display: "flex", fontSize: "0.6875rem" }, children: t }),
+        e
+      ]
+    }
+  );
+  return i ? /* @__PURE__ */ r(x, { title: i, children: n }) : n;
+}
+function be({ label: e, tooltip: t }) {
+  const o = /* @__PURE__ */ d(
+    a,
+    {
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        px: "6px",
+        fontSize: "0.6875rem",
+        color: "var(--ov-fg-default)"
+      },
+      children: [
+        /* @__PURE__ */ r(S, { size: 10, thickness: 5, sx: { color: "var(--ov-fg-muted)" } }),
+        e && /* @__PURE__ */ r("span", { children: e })
+      ]
+    }
+  );
+  return t ? /* @__PURE__ */ r(x, { title: t, children: o }) : o;
+}
+function ye({
+  value: e,
+  width: t = 80,
+  color: o = "var(--ov-accent)",
+  label: i,
+  showValue: n = !1,
+  tooltip: l
+}) {
+  const s = e === void 0, c = /* @__PURE__ */ d(
+    a,
+    {
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        px: "6px",
+        fontSize: "0.625rem",
+        color: "var(--ov-fg-default)"
+      },
+      children: [
+        i && /* @__PURE__ */ r(a, { component: "span", sx: { whiteSpace: "nowrap", color: "var(--ov-fg-muted)" }, children: i }),
+        /* @__PURE__ */ r(
+          N,
+          {
+            variant: s ? "indeterminate" : "determinate",
+            value: s ? void 0 : e,
+            sx: {
+              width: t,
+              height: 3,
+              borderRadius: 1.5,
+              bgcolor: "rgba(255,255,255,0.1)",
+              "& .MuiLinearProgress-bar": {
+                bgcolor: o,
+                borderRadius: 1.5
+              }
+            }
+          }
+        ),
+        n && !s && e !== void 0 && /* @__PURE__ */ d(a, { component: "span", sx: { whiteSpace: "nowrap", color: "var(--ov-fg-muted)" }, children: [
+          Math.round(e),
+          "%"
+        ] })
+      ]
+    }
+  );
+  return l ? /* @__PURE__ */ r(x, { title: l, children: c }) : c;
+}
+function Se({ color: e }) {
+  return /* @__PURE__ */ r(
+    a,
+    {
+      sx: {
+        width: "1px",
+        height: "60%",
+        bgcolor: e ?? "var(--ov-border-default)",
+        flexShrink: 0,
+        mx: "2px"
+      }
+    }
+  );
+}
+function ze({ icon: e, label: t, onClick: o, tooltip: i, color: n }) {
+  const l = /* @__PURE__ */ d(
+    a,
+    {
+      component: "button",
+      onClick: o,
+      sx: {
+        all: "unset",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "3px",
+        px: "5px",
+        height: "100%",
+        fontSize: "0.625rem",
+        fontWeight: 500,
+        color: n ?? "var(--ov-fg-default)",
+        cursor: "pointer",
+        borderRadius: "2px",
+        whiteSpace: "nowrap",
+        "&:hover": { bgcolor: "rgba(255,255,255,0.1)" },
+        "&:active": { bgcolor: "rgba(255,255,255,0.15)" }
+      },
+      children: [
+        e && /* @__PURE__ */ r(a, { sx: { display: "flex", fontSize: "0.625rem" }, children: e }),
+        t
+      ]
+    }
+  );
+  return i ? /* @__PURE__ */ r(x, { title: i, children: l }) : l;
+}
+function ke({ count: e, icon: t, maxCount: o = 99, onClick: i, tooltip: n, color: l }) {
+  const s = e > o ? `${o}+` : String(e), c = /* @__PURE__ */ d(
+    a,
+    {
+      onClick: i,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "3px",
+        px: "5px",
+        height: "100%",
+        fontSize: "0.625rem",
+        fontWeight: 600,
+        color: "var(--ov-fg-default)",
+        cursor: i ? "pointer" : "default",
+        "&:hover": i ? { bgcolor: "rgba(255,255,255,0.08)" } : {}
+      },
+      children: [
+        t && /* @__PURE__ */ r(a, { sx: { display: "flex", fontSize: "0.625rem" }, children: t }),
+        e > 0 && /* @__PURE__ */ r(
+          a,
+          {
+            component: "span",
+            sx: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minWidth: 14,
+              height: 14,
+              borderRadius: "7px",
+              bgcolor: l ?? "var(--ov-accent)",
+              color: "#fff",
+              fontSize: "0.5625rem",
+              fontWeight: 700,
+              lineHeight: 1,
+              px: "3px"
+            },
+            children: s
+          }
+        )
+      ]
+    }
+  );
+  return n ? /* @__PURE__ */ r(x, { title: n, children: c }) : c;
+}
+function Ie({ time: e, icon: t, running: o, tooltip: i }) {
+  const n = /* @__PURE__ */ d(
+    a,
+    {
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "3px",
+        px: "6px",
+        fontSize: "0.625rem",
+        fontFamily: "var(--ov-font-mono)",
+        fontFeatureSettings: '"tnum"',
+        color: "var(--ov-fg-muted)",
+        whiteSpace: "nowrap",
+        ...o && {
+          animation: "ov-footer-timer-blink 2s step-end infinite",
+          "@keyframes ov-footer-timer-blink": {
+            "0%, 100%": { opacity: 1 },
+            "50%": { opacity: 0.6 }
+          }
+        }
+      },
+      children: [
+        t && /* @__PURE__ */ r(a, { sx: { display: "flex", fontSize: "0.625rem" }, children: t }),
+        e
+      ]
+    }
+  );
+  return i ? /* @__PURE__ */ r(x, { title: i, children: n }) : n;
+}
+function we({ value: e, size: t = 12, color: o, tooltip: i }) {
+  const n = e === void 0, l = /* @__PURE__ */ r(a, { sx: { display: "inline-flex", alignItems: "center", px: "4px" }, children: /* @__PURE__ */ r(
+    S,
+    {
+      variant: n ? "indeterminate" : "determinate",
+      value: n ? void 0 : e,
+      size: t,
+      thickness: 5,
+      sx: {
+        color: o ?? "var(--ov-accent)",
+        ...n && { animationDuration: "1s" }
+      }
+    }
+  ) });
+  return i ? /* @__PURE__ */ r(x, { title: i, children: l }) : l;
+}
+function u({
+  left: e,
+  right: t,
+  height: o = 22,
+  sx: i
+}) {
+  return /* @__PURE__ */ d(
+    a,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        height: o,
+        bgcolor: "var(--ov-bg-surface)",
+        borderTop: "1px solid var(--ov-border-default)",
+        fontFamily: "var(--ov-font-ui)",
+        overflow: "hidden",
+        flexShrink: 0,
+        ...typeof i == "object" && !Array.isArray(i) ? i : {}
+      },
+      children: [
+        /* @__PURE__ */ r(a, { sx: { display: "flex", alignItems: "center", height: "100%", gap: 0.25 }, children: e }),
+        /* @__PURE__ */ r(a, { sx: { display: "flex", alignItems: "center", height: "100%", gap: 0.25 }, children: t })
+      ]
+    }
+  );
+}
+u.displayName = "IDEStatusFooter";
+u.Chip = me;
+u.Dot = xe;
+u.Text = ve;
+u.Spinner = be;
+u.Progress = ye;
+u.Circular = we;
+u.Separator = Se;
+u.Button = ze;
+u.Badge = ke;
+u.Timer = Ie;
+const Ce = {
+  xs: 20,
+  sm: 32,
+  md: 48,
+  lg: 64,
+  xl: 80
+}, Ae = {
+  xs: 5,
+  sm: 4.5,
+  md: 4,
+  lg: 3.5,
+  xl: 3
+}, Re = {
+  xs: "0.5rem",
+  sm: "0.625rem",
+  md: "0.8125rem",
+  lg: "1rem",
+  xl: "1.25rem"
+};
+function Me({
+  value: e,
+  size: t = "md",
+  color: o = "primary",
+  thickness: i,
+  showValue: n = !1,
+  label: l,
+  caption: s,
+  trackColor: c,
+  sx: f
+}) {
+  const p = Ce[t], g = i ?? Ae[t], h = C(o), m = e === void 0, v = l ?? (n && !m ? `${Math.round(e)}%` : null);
+  return /* @__PURE__ */ d(
+    a,
+    {
+      sx: {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 0.5,
+        ...typeof f == "object" && !Array.isArray(f) ? f : {}
+      },
+      children: [
+        /* @__PURE__ */ d(a, { sx: { position: "relative", display: "inline-flex" }, children: [
+          /* @__PURE__ */ r(
+            S,
+            {
+              variant: "determinate",
+              value: 100,
+              size: p,
+              thickness: g,
+              sx: {
+                color: c ?? "var(--ov-bg-surface-inset)",
+                position: "absolute"
+              }
+            }
+          ),
+          /* @__PURE__ */ r(
+            S,
+            {
+              variant: m ? "indeterminate" : "determinate",
+              value: m ? void 0 : e,
+              size: p,
+              thickness: g,
+              sx: {
+                color: h,
+                ...m && { animationDuration: "1.2s" }
+              }
+            }
+          ),
+          v && /* @__PURE__ */ r(
+            a,
+            {
+              sx: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ r(
+                b,
+                {
+                  sx: {
+                    fontSize: Re[t],
+                    fontWeight: 600,
+                    color: "var(--ov-fg-default)",
+                    lineHeight: 1,
+                    fontFeatureSettings: '"tnum"'
+                  },
+                  children: v
+                }
+              )
+            }
+          )
+        ] }),
+        s && /* @__PURE__ */ r(
+          b,
+          {
+            sx: {
+              fontSize: t === "xs" ? "0.5rem" : "var(--ov-text-xs)",
+              color: "var(--ov-fg-muted)",
+              textAlign: "center",
+              lineHeight: 1.3
+            },
+            children: s
+          }
+        )
+      ]
+    }
+  );
+}
+Me.displayName = "ProgressRing";
+export {
+  ee as Alert,
+  le as ConnectionIndicator,
+  Ue as EmptyState,
+  Ye as ErrorState,
+  u as IDEStatusFooter,
+  ue as NotificationStackProvider,
+  ie as ProgressBar,
+  Me as ProgressRing,
+  de as RunButton,
+  er as Skeleton,
+  re as StatusBar,
+  te as StatusBarItem,
+  Je as StatusDot,
+  Oe as StatusPill,
+  _e as useNotificationStack
+};