@omniviewdev/ui 0.1.0

package/dist/sidebars.js

@@ -0,0 +1,762 @@
+import { jsxs as y, jsx as r, Fragment as V } from "react/jsx-runtime";
+import i from "@mui/material/Box";
+import F from "@mui/material/Tooltip";
+import { useState as C, useMemo as G, useRef as N, useCallback as A, useEffect as D } from "react";
+import m from "@mui/material/Typography";
+import j from "@mui/material/InputBase";
+import { LuSearch as $, LuChevronDown as z, LuChevronRight as E } from "react-icons/lu";
+import B from "@mui/material/Collapse";
+import _ from "@mui/material/Chip";
+import K from "@mui/material/Checkbox";
+function Z({ count: e }) {
+  return e ? e === !0 ? /* @__PURE__ */ r(
+    i,
+    {
+      sx: {
+        position: "absolute",
+        top: 6,
+        right: 6,
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        bgcolor: "var(--ov-accent-fg)",
+        border: "2px solid var(--ov-bg-surface)"
+      }
+    }
+  ) : /* @__PURE__ */ r(
+    i,
+    {
+      sx: {
+        position: "absolute",
+        top: 4,
+        right: 4,
+        minWidth: 16,
+        height: 16,
+        borderRadius: 8,
+        bgcolor: "var(--ov-accent-fg)",
+        color: "#fff",
+        fontSize: 10,
+        fontWeight: 600,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        px: 0.5,
+        border: "2px solid var(--ov-bg-surface)"
+      },
+      children: e > 99 ? "99+" : e
+    }
+  ) : null;
+}
+function H({
+  item: e,
+  active: o,
+  onClick: a,
+  position: n
+}) {
+  return /* @__PURE__ */ r(F, { title: e.label, placement: n === "left" ? "right" : "left", children: /* @__PURE__ */ y(
+    i,
+    {
+      onClick: a,
+      sx: {
+        position: "relative",
+        width: "100%",
+        aspectRatio: "1",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        color: o ? "var(--ov-fg-base)" : "var(--ov-fg-muted)",
+        opacity: o ? 1 : 0.7,
+        "&:hover": { opacity: 1, color: "var(--ov-fg-base)" },
+        "&::before": o ? {
+          content: '""',
+          position: "absolute",
+          [n === "left" ? "left" : "right"]: 0,
+          top: "25%",
+          height: "50%",
+          width: 2,
+          borderRadius: 1,
+          bgcolor: "var(--ov-accent-fg)"
+        } : {},
+        transition: "color 100ms ease, opacity 100ms ease",
+        fontSize: 22
+      },
+      children: [
+        e.icon,
+        /* @__PURE__ */ r(Z, { count: e.badge })
+      ]
+    }
+  ) });
+}
+function q({
+  items: e,
+  activeId: o,
+  onChange: a,
+  position: n = "left",
+  bottomItems: t,
+  width: l = 48,
+  sx: s
+}) {
+  return /* @__PURE__ */ y(
+    i,
+    {
+      sx: {
+        width: l,
+        minWidth: l,
+        height: "100%",
+        bgcolor: "var(--ov-bg-surface)",
+        borderRight: n === "left" ? "1px solid var(--ov-border-default)" : void 0,
+        borderLeft: n === "right" ? "1px solid var(--ov-border-default)" : void 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        py: 0.5,
+        ...typeof s == "object" && !Array.isArray(s) ? s : {}
+      },
+      children: [
+        /* @__PURE__ */ r(i, { sx: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%", flex: 1 }, children: e.map((c) => /* @__PURE__ */ r(
+          H,
+          {
+            item: c,
+            active: o === c.id,
+            onClick: () => a?.(c.id),
+            position: n
+          },
+          c.id
+        )) }),
+        t && t.length > 0 && /* @__PURE__ */ r(i, { sx: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: t.map((c) => /* @__PURE__ */ r(
+          H,
+          {
+            item: c,
+            active: o === c.id,
+            onClick: () => a?.(c.id),
+            position: n
+          },
+          c.id
+        )) })
+      ]
+    }
+  );
+}
+q.displayName = "ActivityBar";
+function J({
+  title: e,
+  icon: o,
+  toolbar: a,
+  children: n,
+  searchable: t = !1,
+  onSearch: l,
+  badge: s,
+  width: c = 260,
+  sx: f
+}) {
+  const [d, p] = C(""), u = (h) => {
+    p(h), l?.(h);
+  };
+  return /* @__PURE__ */ y(
+    i,
+    {
+      sx: {
+        width: c,
+        minWidth: c,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: "var(--ov-bg-surface)",
+        borderRight: "1px solid var(--ov-border-default)",
+        overflow: "hidden",
+        ...typeof f == "object" && !Array.isArray(f) ? f : {}
+      },
+      children: [
+        /* @__PURE__ */ y(
+          i,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.75,
+              px: 1.5,
+              py: 1,
+              minHeight: 36,
+              borderBottom: "1px solid var(--ov-border-muted)"
+            },
+            children: [
+              o && /* @__PURE__ */ r(i, { sx: { display: "flex", alignItems: "center", color: "var(--ov-fg-muted)", fontSize: 14 }, children: o }),
+              /* @__PURE__ */ r(
+                m,
+                {
+                  variant: "subtitle2",
+                  sx: {
+                    flex: 1,
+                    fontSize: 11,
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                    color: "var(--ov-fg-muted)"
+                  },
+                  noWrap: !0,
+                  children: e
+                }
+              ),
+              s,
+              a
+            ]
+          }
+        ),
+        t && /* @__PURE__ */ r(i, { sx: { px: 1, py: 0.75, borderBottom: "1px solid var(--ov-border-muted)" }, children: /* @__PURE__ */ y(
+          i,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5,
+              px: 1,
+              py: 0.25,
+              borderRadius: 1,
+              bgcolor: "var(--ov-bg-base)",
+              border: "1px solid var(--ov-border-default)"
+            },
+            children: [
+              /* @__PURE__ */ r($, { size: 13, color: "var(--ov-fg-faint)" }),
+              /* @__PURE__ */ r(
+                j,
+                {
+                  value: d,
+                  onChange: (h) => u(h.target.value),
+                  placeholder: "Search...",
+                  sx: {
+                    flex: 1,
+                    fontSize: 12,
+                    "& input": { padding: 0 },
+                    "& input::placeholder": { color: "var(--ov-fg-faint)", opacity: 1 }
+                  }
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ r(i, { sx: { flex: 1, overflow: "auto", py: 0.5 }, children: n })
+      ]
+    }
+  );
+}
+J.displayName = "SidebarPanel";
+function Q({
+  title: e,
+  count: o,
+  defaultExpanded: a = !0,
+  children: n,
+  actions: t,
+  sx: l
+}) {
+  const [s, c] = C(a);
+  return /* @__PURE__ */ y(i, { sx: l, children: [
+    /* @__PURE__ */ y(
+      i,
+      {
+        onClick: () => c(!s),
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 0.25,
+          px: 1,
+          py: 0.5,
+          cursor: "pointer",
+          userSelect: "none",
+          "&:hover": { bgcolor: "var(--ov-state-hover)" },
+          "&:hover .sidebar-group-actions": { opacity: 1 }
+        },
+        children: [
+          /* @__PURE__ */ r(i, { sx: { display: "flex", alignItems: "center", flexShrink: 0, color: "var(--ov-fg-faint)" }, children: s ? /* @__PURE__ */ r(z, { size: 12 }) : /* @__PURE__ */ r(E, { size: 12 }) }),
+          /* @__PURE__ */ r(
+            m,
+            {
+              variant: "caption",
+              sx: {
+                flex: 1,
+                fontSize: 11,
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.06em",
+                color: "var(--ov-fg-muted)",
+                lineHeight: 1.4
+              },
+              noWrap: !0,
+              children: e
+            }
+          ),
+          o != null && /* @__PURE__ */ r(
+            _,
+            {
+              label: o,
+              size: "small",
+              sx: {
+                height: 16,
+                fontSize: 10,
+                fontWeight: 600,
+                bgcolor: "var(--ov-state-hover)",
+                color: "var(--ov-fg-muted)",
+                "& .MuiChip-label": { px: 0.75 }
+              }
+            }
+          ),
+          t && /* @__PURE__ */ r(
+            i,
+            {
+              className: "sidebar-group-actions",
+              onClick: (f) => f.stopPropagation(),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.25,
+                opacity: 0,
+                transition: "opacity 100ms ease"
+              },
+              children: t
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(B, { in: s, unmountOnExit: !0, children: n })
+  ] });
+}
+Q.displayName = "SidebarGroup";
+function U({
+  label: e,
+  icon: o,
+  badge: a,
+  actions: n,
+  depth: t = 0,
+  selected: l = !1,
+  expanded: s = !1,
+  hasChildren: c = !1,
+  onClick: f,
+  onToggle: d,
+  onContextMenu: p,
+  sx: u
+}) {
+  return /* @__PURE__ */ y(
+    i,
+    {
+      onClick: f,
+      onContextMenu: p,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        py: 0.25,
+        pr: 1,
+        pl: t * 1.5 + 1,
+        cursor: "pointer",
+        minHeight: 24,
+        borderRadius: "4px",
+        mx: 0.5,
+        bgcolor: l ? "var(--ov-accent-subtle)" : "transparent",
+        color: l ? "var(--ov-accent-fg)" : "var(--ov-fg-default)",
+        "&:hover": {
+          bgcolor: l ? "var(--ov-accent-subtle)" : "var(--ov-state-hover)"
+        },
+        "&:hover .tree-item-actions": { opacity: 1 },
+        ...typeof u == "object" && !Array.isArray(u) ? u : {}
+      },
+      children: [
+        c ? /* @__PURE__ */ r(
+          i,
+          {
+            onClick: (h) => {
+              h.stopPropagation(), d?.();
+            },
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              flexShrink: 0,
+              color: "var(--ov-fg-faint)",
+              "&:hover": { color: "var(--ov-fg-default)" }
+            },
+            children: s ? /* @__PURE__ */ r(z, { size: 14 }) : /* @__PURE__ */ r(E, { size: 14 })
+          }
+        ) : /* @__PURE__ */ r(i, { sx: { width: 14, flexShrink: 0 } }),
+        o && /* @__PURE__ */ r(i, { sx: { display: "flex", alignItems: "center", flexShrink: 0, fontSize: 14 }, children: o }),
+        /* @__PURE__ */ r(
+          m,
+          {
+            variant: "body2",
+            sx: {
+              flex: 1,
+              fontSize: 12,
+              color: "inherit",
+              lineHeight: 1.4
+            },
+            noWrap: !0,
+            children: e
+          }
+        ),
+        a,
+        n && /* @__PURE__ */ r(
+          i,
+          {
+            className: "tree-item-actions",
+            onClick: (h) => h.stopPropagation(),
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.25,
+              opacity: 0,
+              transition: "opacity 100ms ease"
+            },
+            children: n
+          }
+        )
+      ]
+    }
+  );
+}
+U.displayName = "SidebarTreeItem";
+const X = {
+  xs: "11px",
+  sm: "12px",
+  md: "12px",
+  lg: "13px",
+  xl: "14px"
+}, Y = {
+  xs: 22,
+  sm: 24,
+  md: 26,
+  lg: 30,
+  xl: 34
+};
+function w({
+  item: e,
+  size: o,
+  editable: a,
+  onEdit: n,
+  striped: t
+}) {
+  const [l, s] = C(!1), [c, f] = C(""), d = X[o], p = Y[o], u = a || e.editable, h = () => {
+    if (!u) return;
+    const b = typeof e.value == "string" ? e.value : String(e.value ?? "");
+    f(b), s(!0);
+  }, I = () => {
+    s(!1), n?.(e.key, c);
+  }, W = () => l ? /* @__PURE__ */ r(
+    j,
+    {
+      value: c,
+      onChange: (b) => f(b.target.value),
+      onBlur: I,
+      onKeyDown: (b) => {
+        b.key === "Enter" && I(), b.key === "Escape" && s(!1);
+      },
+      autoFocus: !0,
+      sx: { fontSize: d, flex: 1, "& input": { py: 0, px: 0.5 } }
+    }
+  ) : e.type === "boolean" ? /* @__PURE__ */ r(
+    K,
+    {
+      checked: e.value === !0 || e.value === "true",
+      size: "small",
+      disabled: !u,
+      sx: { p: 0 }
+    }
+  ) : e.type === "color" && typeof e.value == "string" ? /* @__PURE__ */ y(i, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+    /* @__PURE__ */ r(
+      i,
+      {
+        sx: {
+          width: 12,
+          height: 12,
+          borderRadius: 0.5,
+          bgcolor: e.value,
+          border: "1px solid var(--ov-border-default)",
+          flexShrink: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ r(m, { variant: "body2", sx: { fontSize: d, color: "inherit", fontFamily: "var(--ov-font-mono)" }, noWrap: !0, children: e.value })
+  ] }) : e.type === "code" ? /* @__PURE__ */ r(m, { variant: "body2", sx: { fontSize: d, color: "inherit", fontFamily: "var(--ov-font-mono)" }, noWrap: !0, children: e.value }) : e.type === "link" ? /* @__PURE__ */ r(
+    m,
+    {
+      variant: "body2",
+      sx: { fontSize: d, color: "var(--ov-accent-fg)", cursor: "pointer", "&:hover": { textDecoration: "underline" } },
+      noWrap: !0,
+      children: e.value
+    }
+  ) : /* @__PURE__ */ r(m, { variant: "body2", sx: { fontSize: d, color: "inherit" }, noWrap: !0, children: e.value });
+  return /* @__PURE__ */ y(
+    i,
+    {
+      onDoubleClick: h,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        minHeight: p,
+        px: 1,
+        gap: 1,
+        bgcolor: t ? "var(--ov-state-hover)" : "transparent",
+        "&:hover": { bgcolor: "var(--ov-state-hover)" }
+      },
+      children: [
+        /* @__PURE__ */ r(
+          m,
+          {
+            variant: "body2",
+            sx: {
+              width: "40%",
+              minWidth: "40%",
+              fontSize: d,
+              color: "var(--ov-fg-muted)",
+              fontWeight: 500
+            },
+            noWrap: !0,
+            children: e.label
+          }
+        ),
+        /* @__PURE__ */ r(i, { sx: { flex: 1, display: "flex", alignItems: "center", overflow: "hidden", color: "var(--ov-fg-default)" }, children: W() })
+      ]
+    }
+  );
+}
+function ee({
+  items: e,
+  columns: o = 1,
+  size: a = "md",
+  editable: n = !1,
+  onEdit: t,
+  sx: l
+}) {
+  if (o === 2) {
+    const s = Math.ceil(e.length / 2), c = e.slice(0, s), f = e.slice(s);
+    return /* @__PURE__ */ y(i, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, ...typeof l == "object" && !Array.isArray(l) ? l : {} }, children: [
+      /* @__PURE__ */ r(i, { children: c.map((d, p) => /* @__PURE__ */ r(w, { item: d, size: a, editable: n, onEdit: t, striped: p % 2 === 1 }, d.key)) }),
+      /* @__PURE__ */ r(i, { children: f.map((d, p) => /* @__PURE__ */ r(w, { item: d, size: a, editable: n, onEdit: t, striped: p % 2 === 1 }, d.key)) })
+    ] });
+  }
+  return /* @__PURE__ */ r(i, { sx: l, children: e.map((s, c) => /* @__PURE__ */ r(w, { item: s, size: a, editable: n, onEdit: t, striped: c % 2 === 1 }, s.key)) });
+}
+ee.displayName = "PropertyGrid";
+const re = {
+  xs: 11,
+  sm: 12,
+  md: 13,
+  lg: 14,
+  xl: 15
+}, M = 12, T = 14, te = 10;
+function oe(e) {
+  const o = {};
+  function a(n) {
+    for (const t of n)
+      t.children && t.children.length > 0 && (o[t.id] = !0), t.children && a(t.children);
+  }
+  for (const n of e) a(n.items);
+  return o;
+}
+function ne(e) {
+  const o = {};
+  function a(n) {
+    for (const t of n)
+      t.defaultExpanded && (o[t.id] = !0), t.children && a(t.children);
+  }
+  for (const n of e) a(n.items);
+  return o;
+}
+function ie(e, o) {
+  const a = [];
+  function n(t) {
+    for (const l of t) {
+      if (l.id === o) return !0;
+      if (l.children && l.children.length > 0) {
+        if (a.push(l.id), n(l.children)) return !0;
+        a.pop();
+      }
+    }
+    return !1;
+  }
+  for (const t of e) {
+    if (n(t.items)) return [...a];
+    a.length = 0;
+  }
+  return [];
+}
+function P({
+  item: e,
+  depth: o,
+  selected: a,
+  onSelect: n,
+  fontSize: t,
+  expandedState: l,
+  onToggleExpanded: s,
+  animate: c
+}) {
+  const f = l[e.id] ?? !1, d = a === e.id, p = e.children && e.children.length > 0, u = p && e.children && /* @__PURE__ */ r(V, { children: e.children.map((h) => /* @__PURE__ */ r(
+    P,
+    {
+      item: h,
+      depth: o + 1,
+      selected: a,
+      onSelect: n,
+      fontSize: t,
+      expandedState: l,
+      onToggleExpanded: s,
+      animate: c
+    },
+    h.id
+  )) });
+  return /* @__PURE__ */ y(i, { children: [
+    /* @__PURE__ */ y(
+      i,
+      {
+        onClick: () => {
+          e.disabled || (p ? s(e.id) : n?.(e.id));
+        },
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          pl: `${o * te + 4}px`,
+          pr: "6px",
+          py: "3px",
+          cursor: e.disabled ? "default" : "pointer",
+          opacity: e.disabled ? 0.5 : 1,
+          borderRadius: "4px",
+          mx: "4px",
+          my: "1px",
+          bgcolor: d ? "var(--ov-accent-subtle)" : "transparent",
+          color: d ? "var(--ov-accent-fg)" : "var(--ov-fg-default)",
+          fontWeight: d ? 600 : p ? 500 : 400,
+          "&:hover": {
+            bgcolor: d ? "var(--ov-accent-subtle)" : "var(--ov-state-hover)"
+          }
+        },
+        children: [
+          /* @__PURE__ */ r(
+            i,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: T,
+                minWidth: T,
+                flexShrink: 0,
+                color: "var(--ov-fg-faint)"
+              },
+              children: p && (f ? /* @__PURE__ */ r(z, { size: M }) : /* @__PURE__ */ r(E, { size: M }))
+            }
+          ),
+          e.icon && /* @__PURE__ */ r(i, { sx: { display: "flex", alignItems: "center", flexShrink: 0, fontSize: t + 2 }, children: e.icon }),
+          /* @__PURE__ */ r(
+            m,
+            {
+              variant: "body2",
+              sx: { flex: 1, fontSize: t, color: "inherit", fontWeight: "inherit" },
+              noWrap: !0,
+              children: e.label
+            }
+          ),
+          e.badge
+        ]
+      }
+    ),
+    p && (c ? /* @__PURE__ */ r(B, { in: f, unmountOnExit: !0, children: u }) : f ? u : null)
+  ] });
+}
+const ae = {
+  overflow: "auto",
+  maxHeight: "100%",
+  flex: 1,
+  minHeight: 0,
+  scrollbarWidth: "none",
+  "&::-webkit-scrollbar": { display: "none" }
+};
+function le({
+  sections: e,
+  selected: o,
+  onSelect: a,
+  size: n = "md",
+  scrollable: t,
+  defaultExpanded: l = !1,
+  animate: s = !0,
+  initialExpandedState: c,
+  onExpandedChange: f,
+  sx: d
+}) {
+  const p = re[n], u = G(
+    () => l ? oe(e) : ne(e),
+    [e, l]
+  ), [h, I] = C(() => ({
+    ...u,
+    ...c ?? {}
+  })), W = N(f);
+  W.current = f;
+  const b = A((g) => {
+    I((v) => {
+      const x = g(v);
+      return x !== v && W.current?.(x), x;
+    });
+  }, []), R = N(e);
+  D(() => {
+    R.current !== e && (R.current = e, b((g) => {
+      const v = u, x = { ...g };
+      let k = !1;
+      for (const S of Object.keys(v))
+        S in x || (x[S] = v[S], k = !0);
+      return k ? x : g;
+    }));
+  }, [e, u, b]), D(() => {
+    if (!o) return;
+    const g = ie(e, o);
+    g.length > 0 && b((v) => {
+      const x = { ...v };
+      let k = !1;
+      for (const S of g)
+        x[S] || (x[S] = !0, k = !0);
+      return k ? x : v;
+    });
+  }, [o, e, b]);
+  const O = A((g) => {
+    b((v) => ({ ...v, [g]: !v[g] }));
+  }, [b]), L = t ? { ...ae, ...d } : d;
+  return /* @__PURE__ */ r(i, { sx: L, children: e.map((g, v) => /* @__PURE__ */ y(i, { sx: { mb: 0.5, mt: v === 0 ? 0 : 0.25 }, children: [
+    g.title && /* @__PURE__ */ r(
+      m,
+      {
+        variant: "overline",
+        sx: {
+          display: "block",
+          px: "12px",
+          py: "4px",
+          fontSize: 10,
+          fontWeight: 600,
+          letterSpacing: "0.08em",
+          color: "var(--ov-fg-faint)",
+          textTransform: "uppercase"
+        },
+        children: g.title
+      }
+    ),
+    g.items.map((x) => /* @__PURE__ */ r(
+      P,
+      {
+        item: x,
+        depth: 0,
+        selected: o,
+        onSelect: a,
+        fontSize: p,
+        expandedState: h,
+        onToggleExpanded: O,
+        animate: s
+      },
+      x.id
+    ))
+  ] }, g.title || `section-${v}`)) });
+}
+le.displayName = "NavMenu";
+export {
+  q as ActivityBar,
+  le as NavMenu,
+  ee as PropertyGrid,
+  Q as SidebarGroup,
+  J as SidebarPanel,
+  U as SidebarTreeItem
+};