uilint-react 0.2.138 → 0.2.140

package/dist/SchemaPanel-ClCFV80T.js

@@ -0,0 +1,664 @@
+import { g as y, j as t, c as C, C as M, a as V, B as v, b as $, d as z, e as D, f as R, h as P } from "./index-i4_wbGZV.js";
+import { isExpressionBinding as I, isDataBinding as k, isConditionalValue as L } from "uilint-core";
+import j from "react";
+function N(e, r) {
+  const s = r.split(".");
+  let n = e;
+  for (const i of s) {
+    if (n == null)
+      return;
+    if (typeof n == "object")
+      n = n[i];
+    else
+      return;
+  }
+  return n;
+}
+function u(e, r) {
+  const s = e.binding;
+  let n = N(r.data, s);
+  return n === void 0 && (n = N(r.state, s)), n === void 0 && (n = N(r.computed, s)), n;
+}
+function E(e, r) {
+  const s = e.expression, n = {
+    ...r.data,
+    ...r.state,
+    ...r.computed
+  };
+  try {
+    const i = Object.keys(n), a = Object.values(n);
+    return new Function(...i, `return (${s});`)(...a);
+  } catch (i) {
+    console.warn(`[SchemaRenderer] Failed to evaluate expression: ${s}`, i);
+    return;
+  }
+}
+function g(e, r) {
+  return k(e) ? u(e, r) : e;
+}
+function O(e, r) {
+  return u(e.condition, r) ? e.true : e.false;
+}
+function H(e, r) {
+  return L(e) ? O(e, r) : k(e) ? u(e, r) : e;
+}
+function S(e, r) {
+  return I(e) ? !!E(e, r) : !!u(e, r);
+}
+function B(e, r, s) {
+  const n = { ...e };
+  if (r)
+    for (const [i, a] of Object.entries(r))
+      n[i] = u({ binding: a }, s);
+  return n;
+}
+function T({ section: e, ctx: r }) {
+  const s = g(e.text, r), n = g(e.subtitle, r), i = e.icon ? y(e.icon) : null;
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: C(
+        "flex items-start gap-2 mb-3",
+        e.sticky && "sticky top-0 bg-surface py-2 z-10"
+      ),
+      children: [
+        i && /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground shrink-0 mt-0.5", children: /* @__PURE__ */ t.jsx(i, { size: 16 }) }),
+        /* @__PURE__ */ t.jsxs("div", { children: [
+          /* @__PURE__ */ t.jsx("h3", { className: "m-0 text-sm font-semibold text-text-primary", children: String(s ?? "") }),
+          n && /* @__PURE__ */ t.jsx("p", { className: "mt-1 mb-0 text-xs text-muted-foreground", children: String(n) })
+        ] })
+      ]
+    }
+  );
+}
+function A({
+  code: e,
+  startLine: r = 1,
+  highlightLines: s,
+  maxHeight: n
+}) {
+  const i = e.split(`
+`), a = new Set(s || []);
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: "font-mono text-xs bg-surface rounded border border-border overflow-auto",
+      style: { maxHeight: n || 200 },
+      children: i.map((o, c) => {
+        const m = r + c, d = a.has(m);
+        return /* @__PURE__ */ t.jsxs(
+          "div",
+          {
+            className: `flex ${d ? "bg-accent/15" : "bg-transparent"}`,
+            children: [
+              /* @__PURE__ */ t.jsx("span", { className: "w-12 pr-2 text-right text-muted-foreground select-none shrink-0 border-r border-border", children: m }),
+              /* @__PURE__ */ t.jsx("pre", { className: "m-0 px-2 whitespace-pre-wrap break-all flex-1", children: o || " " })
+            ]
+          },
+          c
+        );
+      })
+    }
+  );
+}
+function w({
+  section: e,
+  ctx: r,
+  onAction: s,
+  onFetch: n
+}) {
+  const [i, a] = j.useState(null), [o, c] = j.useState(!1), m = e.code;
+  j.useEffect(() => {
+    if (k(m)) {
+      const l = u(m, r);
+      a(typeof l == "string" ? l : null);
+    } else if ("fetch" in m && n) {
+      c(!0);
+      const l = m.fetch, p = {};
+      l.params.filePath && (p.filePath = u(l.params.filePath, r)), l.params.line && (p.line = u(l.params.line, r)), l.params.contextAbove !== void 0 && (p.contextAbove = l.params.contextAbove), l.params.contextBelow !== void 0 && (p.contextBelow = l.params.contextBelow), n(l.type, p).then((h) => {
+        a(typeof h == "string" ? h : JSON.stringify(h, null, 2));
+      }).catch((h) => {
+        console.error("[CodeViewerSection] Fetch failed:", h), a(`// Error loading code: ${h.message}`);
+      }).finally(() => {
+        c(!1);
+      });
+    }
+  }, [m, r, n]);
+  const d = g(e.startLine, r), f = e.highlightLines ? u(e.highlightLines, r) : void 0, b = e.icon ? y(e.icon) : null, x = e.onNavigate ? () => {
+    const l = B(
+      e.onNavigate.payload,
+      e.onNavigate.payloadBindings,
+      r
+    );
+    s(e.onNavigate.type, l);
+  } : void 0;
+  return /* @__PURE__ */ t.jsxs("div", { className: "mb-3", children: [
+    e.label && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        b && /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground", children: /* @__PURE__ */ t.jsx(b, { size: 14 }) }),
+        /* @__PURE__ */ t.jsx("span", { className: "text-xs font-medium text-text-secondary", children: e.label })
+      ] }),
+      x && /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          onClick: x,
+          className: "bg-transparent border-none p-1 cursor-pointer text-accent text-xs",
+          children: "Open in editor"
+        }
+      )
+    ] }),
+    o ? /* @__PURE__ */ t.jsx("div", { className: "p-4 text-center text-muted-foreground text-xs bg-surface rounded border border-border", children: "Loading code..." }) : i ? /* @__PURE__ */ t.jsx(
+      A,
+      {
+        code: i,
+        startLine: typeof d == "number" ? d : 1,
+        highlightLines: f,
+        maxHeight: e.maxHeight
+      }
+    ) : /* @__PURE__ */ t.jsx("div", { className: "p-4 text-center text-muted-foreground text-xs bg-surface rounded border border-border", children: "No code available" })
+  ] });
+}
+function W({
+  section: e,
+  ctx: r,
+  onAction: s,
+  onFetch: n
+}) {
+  const a = e.mode === "stacked" ? {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem",
+    marginBottom: "0.75rem"
+  } : {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: "1rem",
+    marginBottom: "0.75rem"
+  }, o = {
+    type: "code-viewer",
+    label: e.source.label,
+    icon: e.source.icon,
+    code: e.source.code,
+    location: e.source.location,
+    diffHighlighting: e.computeDiff,
+    maxHeight: e.maxHeight
+  }, c = {
+    type: "code-viewer",
+    label: e.target.label,
+    icon: e.target.icon,
+    code: e.target.code,
+    location: e.target.location,
+    diffHighlighting: e.computeDiff,
+    maxHeight: e.maxHeight
+  };
+  return /* @__PURE__ */ t.jsxs("div", { style: a, children: [
+    /* @__PURE__ */ t.jsx(
+      w,
+      {
+        section: o,
+        ctx: r,
+        onAction: s,
+        onFetch: n
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      w,
+      {
+        section: c,
+        ctx: r,
+        onAction: s,
+        onFetch: n
+      }
+    )
+  ] });
+}
+function _(e) {
+  return e >= 85 ? "error" : e >= 70 ? "warning" : "info";
+}
+function F(e) {
+  return e >= 90 ? "Very High" : e >= 75 ? "High" : e >= 60 ? "Moderate" : "Low";
+}
+function J({ section: e, ctx: r }) {
+  const s = u(e.value, r), n = C(
+    "mb-3",
+    e.centered && "flex justify-center"
+  );
+  switch (e.variant) {
+    case "similarity": {
+      const a = Math.round((typeof s == "number" ? s : 0) * 100), o = _(a), c = F(a);
+      return /* @__PURE__ */ t.jsx("div", { className: n, children: /* @__PURE__ */ t.jsxs(v, { variant: o, children: [
+        a,
+        "% Match - ",
+        c
+      ] }) });
+    }
+    case "severity": {
+      const i = String(s || "info"), o = {
+        error: "error",
+        warning: "warning",
+        info: "info",
+        success: "success"
+      }[i] || "info";
+      return /* @__PURE__ */ t.jsx("div", { className: n, children: /* @__PURE__ */ t.jsxs(v, { variant: o, children: [
+        e.label ? `${e.label}: ` : "",
+        i
+      ] }) });
+    }
+    case "status": {
+      const i = String(s || "unknown"), o = {
+        ready: "success",
+        indexing: "info",
+        error: "error",
+        idle: "info",
+        loading: "info"
+      }[i] || "info";
+      return /* @__PURE__ */ t.jsx("div", { className: n, children: /* @__PURE__ */ t.jsxs(v, { variant: o, children: [
+        e.label ? `${e.label}: ` : "",
+        i
+      ] }) });
+    }
+    case "category": {
+      const i = String(s || "");
+      return /* @__PURE__ */ t.jsx("div", { className: n, children: /* @__PURE__ */ t.jsx(V, { children: i }) });
+    }
+    case "count": {
+      const i = typeof s == "number" ? s : 0;
+      return /* @__PURE__ */ t.jsxs("div", { className: n, children: [
+        e.label && /* @__PURE__ */ t.jsxs("span", { className: "mr-2 text-xs text-muted-foreground", children: [
+          e.label,
+          ":"
+        ] }),
+        /* @__PURE__ */ t.jsx(M, { count: i })
+      ] });
+    }
+    default:
+      return null;
+  }
+}
+function U(e) {
+  const r = {
+    marginBottom: "0.5rem",
+    lineHeight: 1.5
+  };
+  switch (e) {
+    case "caption":
+      return {
+        ...r,
+        fontSize: "0.75rem",
+        color: "var(--uilint-text-muted)"
+      };
+    case "muted":
+      return {
+        ...r,
+        fontSize: "0.875rem",
+        color: "var(--uilint-text-muted)"
+      };
+    case "error":
+      return {
+        ...r,
+        fontSize: "0.875rem",
+        color: "var(--uilint-error)"
+      };
+    case "success":
+      return {
+        ...r,
+        fontSize: "0.875rem",
+        color: "var(--uilint-success)"
+      };
+    default:
+      return {
+        ...r,
+        fontSize: "0.875rem",
+        color: "var(--uilint-text-primary)"
+      };
+  }
+}
+function q({ section: e, ctx: r }) {
+  const s = g(e.content, r);
+  if (s == null)
+    return null;
+  const n = U(e.variant);
+  return /* @__PURE__ */ t.jsx("p", { style: n, children: String(s) });
+}
+function G(e) {
+  switch (e) {
+    case "primary":
+      return "default";
+    case "secondary":
+      return "outline";
+    case "ghost":
+      return "ghost";
+    case "danger":
+      return "destructive";
+    default:
+      return "default";
+  }
+}
+function K({
+  button: e,
+  ctx: r,
+  onAction: s
+}) {
+  if (e.visible && !!!u(e.visible, r))
+    return null;
+  const n = e.disabled ? !!u(e.disabled, r) : !1;
+  let i;
+  L(e.label), i = String(H(e.label, r) ?? "");
+  const a = e.icon ? y(e.icon) : null, o = () => {
+    const c = B(
+      e.action.payload,
+      e.action.payloadBindings,
+      r
+    );
+    s(e.action.type, c);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    $,
+    {
+      variant: G(e.variant),
+      size: "sm",
+      disabled: n,
+      onClick: o,
+      children: [
+        a && /* @__PURE__ */ t.jsx(a, { size: 14, style: { marginRight: "0.25rem" } }),
+        i
+      ]
+    }
+  );
+}
+function Q({ section: e, ctx: r, onAction: s }) {
+  const n = e.direction !== "column";
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: n ? "row" : "column",
+        gap: "0.5rem",
+        marginBottom: "0.75rem",
+        ...n && { flexWrap: "wrap" }
+      },
+      children: e.actions.map((i) => /* @__PURE__ */ t.jsx(
+        K,
+        {
+          button: i,
+          ctx: r,
+          onAction: s
+        },
+        i.id
+      ))
+    }
+  );
+}
+function X(e) {
+  switch (e) {
+    case "small":
+      return "0.5rem 0";
+    case "large":
+      return "1.5rem 0";
+    default:
+      return "1rem 0";
+  }
+}
+function Y({ section: e }) {
+  const r = X(e.spacing);
+  return /* @__PURE__ */ t.jsx(
+    "hr",
+    {
+      style: {
+        margin: r,
+        border: "none",
+        borderTop: "1px solid var(--uilint-border)"
+      }
+    }
+  );
+}
+function Z({
+  section: e,
+  ctx: r,
+  renderSection: s
+}) {
+  const i = S(e.condition, r) ? e.then : e.else;
+  return !i || i.length === 0 ? null : /* @__PURE__ */ t.jsx(t.Fragment, { children: i.map((a, o) => /* @__PURE__ */ t.jsx(j.Fragment, { children: s(a, o) }, o)) });
+}
+function ee({ section: e, ctx: r, renderSection: s }) {
+  const n = u(e.items, r);
+  return !Array.isArray(n) || n.length === 0 ? e.emptyMessage ? /* @__PURE__ */ t.jsx("div", { className: "p-4 text-center text-muted-foreground text-sm", children: e.emptyMessage }) : null : /* @__PURE__ */ t.jsx("div", { className: "mb-3", children: n.map((i, a) => {
+    const o = {
+      ...r,
+      data: {
+        ...r.data,
+        item: i,
+        itemIndex: a
+      }
+    };
+    return /* @__PURE__ */ t.jsx("div", { className: "mb-2", children: e.itemLayout.map(
+      (c, m) => s(c, m, o)
+    ) }, a);
+  }) });
+}
+function te({ section: e, ctx: r }) {
+  const s = u(e.src, r), n = e.highlightRegion ? u(e.highlightRegion, r) : void 0;
+  return !s || typeof s != "string" ? null : /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: "relative mb-3 overflow-hidden",
+      style: { maxHeight: e.maxHeight },
+      children: [
+        /* @__PURE__ */ t.jsx(
+          "img",
+          {
+            src: s,
+            alt: e.alt || "Image",
+            className: "w-full h-auto object-contain rounded border border-border",
+            style: { maxHeight: e.maxHeight }
+          }
+        ),
+        n && /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: "absolute border-2 border-accent rounded bg-accent/10 pointer-events-none",
+            style: {
+              left: `${n.x}px`,
+              top: `${n.y}px`,
+              width: `${n.width}px`,
+              height: `${n.height}px`
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function re({ section: e, ctx: r, onAction: s }) {
+  const n = g(e.title, r), i = g(e.subtitle, r), a = e.thumbnail ? u(e.thumbnail, r) : void 0, o = e.badge ? u(e.badge.value, r) : void 0, c = e.onClick ? () => {
+    const m = B(
+      e.onClick.payload,
+      e.onClick.payloadBindings,
+      r
+    );
+    s(e.onClick.type, m);
+  } : void 0;
+  return /* @__PURE__ */ t.jsx(
+    z,
+    {
+      className: C("mb-2", c && "cursor-pointer"),
+      onClick: c,
+      role: c ? "button" : void 0,
+      tabIndex: c ? 0 : void 0,
+      children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-start gap-3", children: [
+        typeof a == "string" && a && /* @__PURE__ */ t.jsx(
+          "img",
+          {
+            src: a,
+            alt: "",
+            className: "w-12 h-12 rounded object-cover shrink-0"
+          }
+        ),
+        /* @__PURE__ */ t.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ t.jsxs(D, { className: "px-3 pt-3 pb-0", children: [
+          /* @__PURE__ */ t.jsxs("div", { className: "flex justify-between items-start", children: [
+            /* @__PURE__ */ t.jsx(R, { className: "text-sm mb-0", children: String(n ?? "") }),
+            e.badge && o !== void 0 && /* @__PURE__ */ t.jsxs(v, { variant: e.badge.variant === "severity" ? "warning" : "info", children: [
+              e.badge.label ? `${e.badge.label}: ` : "",
+              String(o)
+            ] })
+          ] }),
+          i && /* @__PURE__ */ t.jsx(P, { className: "text-xs mt-1", children: String(i) })
+        ] }) })
+      ] })
+    }
+  );
+}
+function ne({ section: e, ctx: r }) {
+  const s = g(e.value, r), n = g(e.label, r), i = typeof s == "number" ? Math.min(100, Math.max(0, s)) : 0;
+  return /* @__PURE__ */ t.jsxs("div", { className: "mb-3", children: [
+    n && /* @__PURE__ */ t.jsx("div", { className: "text-xs text-muted-foreground mb-1", children: String(n) }),
+    /* @__PURE__ */ t.jsx("div", { className: "h-1.5 bg-surface rounded-sm overflow-hidden", children: e.indeterminate ? /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: "h-full w-[30%] bg-accent rounded-sm",
+        style: { animation: "progress-indeterminate 1.5s infinite linear" }
+      }
+    ) : /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: "h-full bg-accent rounded-sm transition-[width] duration-300 ease-in-out",
+        style: { width: `${i}%` }
+      }
+    ) }),
+    !e.indeterminate && typeof s == "number" && /* @__PURE__ */ t.jsxs("div", { className: "text-xs text-muted-foreground mt-1 text-right", children: [
+      i,
+      "%"
+    ] })
+  ] });
+}
+function oe({
+  panel: e,
+  data: r,
+  state: s,
+  computed: n = {},
+  onAction: i,
+  onFetch: a
+}) {
+  const o = {
+    data: r,
+    state: s,
+    computed: n
+  };
+  if (e.loading && S(e.loading.when, o))
+    return /* @__PURE__ */ t.jsxs("div", { className: "p-8 text-center text-muted-foreground", children: [
+      /* @__PURE__ */ t.jsx("div", { className: "mb-2 animate-spin", children: /* @__PURE__ */ t.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ t.jsx(
+        "circle",
+        {
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeDasharray: "31.4",
+          strokeLinecap: "round"
+        }
+      ) }) }),
+      /* @__PURE__ */ t.jsx("div", { className: "text-sm", children: e.loading.message || "Loading..." }),
+      e.loading.submessage && /* @__PURE__ */ t.jsx("div", { className: "text-xs mt-1", children: e.loading.submessage })
+    ] });
+  if (e.empty && S(e.empty.when, o)) {
+    const f = e.empty.icon ? y(e.empty.icon) : null;
+    return /* @__PURE__ */ t.jsxs("div", { className: "p-8 text-center text-muted-foreground", children: [
+      f && /* @__PURE__ */ t.jsx("div", { className: "mb-2", children: /* @__PURE__ */ t.jsx(f, { size: 32, strokeWidth: 1.5 }) }),
+      /* @__PURE__ */ t.jsx("div", { className: "text-sm", children: e.empty.message }),
+      e.empty.submessage && /* @__PURE__ */ t.jsx("div", { className: "text-xs mt-1", children: e.empty.submessage })
+    ] });
+  }
+  const c = (d, f, b) => {
+    const x = b || o, l = `section-${f}`;
+    switch (d.type) {
+      case "header":
+        return /* @__PURE__ */ t.jsx(T, { section: d, ctx: x }, l);
+      case "code-viewer":
+        return /* @__PURE__ */ t.jsx(
+          w,
+          {
+            section: d,
+            ctx: x,
+            onAction: i,
+            onFetch: a
+          },
+          l
+        );
+      case "code-comparison":
+        return /* @__PURE__ */ t.jsx(
+          W,
+          {
+            section: d,
+            ctx: x,
+            onAction: i,
+            onFetch: a
+          },
+          l
+        );
+      case "badge":
+        return /* @__PURE__ */ t.jsx(J, { section: d, ctx: x }, l);
+      case "text":
+        return /* @__PURE__ */ t.jsx(q, { section: d, ctx: x }, l);
+      case "actions":
+        return /* @__PURE__ */ t.jsx(
+          Q,
+          {
+            section: d,
+            ctx: x,
+            onAction: i
+          },
+          l
+        );
+      case "divider":
+        return /* @__PURE__ */ t.jsx(Y, { section: d }, l);
+      case "conditional":
+        return /* @__PURE__ */ t.jsx(
+          Z,
+          {
+            section: d,
+            ctx: x,
+            renderSection: c
+          },
+          l
+        );
+      case "list":
+        return /* @__PURE__ */ t.jsx(
+          ee,
+          {
+            section: d,
+            ctx: x,
+            renderSection: c
+          },
+          l
+        );
+      case "image":
+        return /* @__PURE__ */ t.jsx(te, { section: d, ctx: x }, l);
+      case "card":
+        return /* @__PURE__ */ t.jsx(
+          re,
+          {
+            section: d,
+            ctx: x,
+            onAction: i
+          },
+          l
+        );
+      case "progress":
+        return /* @__PURE__ */ t.jsx(ne, { section: d, ctx: x }, l);
+      default:
+        return console.warn(
+          `[SchemaPanel] Unknown section type: ${d.type}`
+        ), null;
+    }
+  }, m = g(e.title, o);
+  return /* @__PURE__ */ t.jsxs("div", { className: "p-4", children: [
+    m && /* @__PURE__ */ t.jsx("h2", { className: "m-0 mb-4 text-base font-semibold text-text-primary", children: String(m) }),
+    e.layout.map((d, f) => c(d, f))
+  ] });
+}
+export {
+  oe as SchemaPanel
+};
+//# sourceMappingURL=SchemaPanel-ClCFV80T.js.map