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
};
