@flesler/cursor-canvas-web 0.0.0-stage → 1.0.1

package/dist/cursor-canvas.js

@@ -0,0 +1,1431 @@
+import { jsx as i, jsxs as g } from "react/jsx-runtime";
+import { useComputedColorScheme as xe, Button as ve, Alert as Ee, Card as be, Checkbox as ke, Divider as Ce, Title as W, ActionIcon as Se, Badge as Fe, Group as Ae, Select as we, Stack as Be, Text as H, Table as E, Textarea as Te, TextInput as Le, Switch as De } from "@mantine/core";
+import { useState as P, createContext as Me, useCallback as G, useContext as ne } from "react";
+import { useEffect as _t, useMemo as qt, useRef as Qt, useState as Kt } from "react";
+import { BarChart as Pe, AreaChart as ze, LineChart as Re, DonutChart as $e, PieChart as He } from "@mantine/charts";
+const oe = {
+  foreground: "#E4E4E4EB",
+  foregroundSecondary: "#E4E4E48D",
+  foregroundTertiary: "#E4E4E45E",
+  foregroundQuaternary: "#E4E4E442",
+  editor: "#181818",
+  chrome: "#141414",
+  sidebar: "#141414",
+  elevated: "#181818",
+  fillPrimary: "#E4E4E430",
+  fillSecondary: "#E4E4E41E",
+  fillTertiary: "#E4E4E411",
+  fillQuaternary: "#E4E4E40A",
+  strokePrimary: "#E4E4E433",
+  strokeSecondary: "#E4E4E41F",
+  strokeTertiary: "#E4E4E414",
+  strokeFocused: "#599CE7",
+  accent: "#599CE7",
+  buttonBackground: "#599CE7",
+  buttonForeground: "#191c22",
+  buttonHoverBackground: "#6AABE9",
+  link: "#87c3ff",
+  diffInsertedLine: "#3FA26633",
+  diffRemovedLine: "#B8004933",
+  diffStripAdded: "#3FA2668F",
+  diffStripRemoved: "#FC6B838F"
+}, ae = {
+  foreground: "#141414F0",
+  foregroundSecondary: "#141414BD",
+  foregroundTertiary: "#1414148A",
+  foregroundQuaternary: "#1414145C",
+  editor: "#FCFCFC",
+  chrome: "#F8F8F8",
+  sidebar: "#F3F3F3",
+  elevated: "#FCFCFC",
+  fillPrimary: "#14141433",
+  fillSecondary: "#14141424",
+  fillTertiary: "#14141414",
+  fillQuaternary: "#1414140F",
+  strokePrimary: "#14141433",
+  strokeSecondary: "#1414141F",
+  strokeTertiary: "#14141414",
+  strokeFocused: "#3685BF",
+  accent: "#3685BF",
+  buttonBackground: "#3685BF",
+  buttonForeground: "#FCFCFC",
+  buttonHoverBackground: "#2E76AB",
+  link: "#3685BF",
+  diffInsertedLine: "#1F8A651F",
+  diffRemovedLine: "#CF2D5614",
+  diffStripAdded: "#1F8A65CC",
+  diffStripRemoved: "#CF2D56CC"
+}, j = {
+  gray: "#8888A8E0",
+  purple: "#7B64B8F0",
+  green: "#1F8A65E8",
+  yellow: "#E8C030E0",
+  cyan: "#2A9A8AE0",
+  pink: "#C85898E0",
+  blue: "#2E79B5E0",
+  orange: "#F0A040E0",
+  red: "#C04848E0"
+}, ie = {
+  gray: "#8888A8E0",
+  purple: "#7B64B8F0",
+  green: "#1F8A65E8",
+  yellow: "#E8C030E0",
+  cyan: "#2A9A8AE0",
+  pink: "#C85898E0",
+  blue: "#2E79B5E0",
+  orange: "#F0A088E0",
+  red: "#CF2D56E0"
+};
+function ce(e, t) {
+  return {
+    bg: {
+      editor: e.editor,
+      chrome: e.chrome,
+      elevated: e.elevated
+    },
+    text: {
+      primary: e.foreground,
+      secondary: e.foregroundSecondary,
+      tertiary: e.foregroundTertiary,
+      quaternary: e.foregroundQuaternary,
+      link: e.link,
+      onAccent: e.buttonForeground
+    },
+    stroke: {
+      primary: e.strokePrimary,
+      secondary: e.strokeSecondary,
+      tertiary: e.strokeTertiary,
+      focused: e.strokeFocused
+    },
+    fill: {
+      primary: e.fillPrimary,
+      secondary: e.fillSecondary,
+      tertiary: e.fillTertiary,
+      quaternary: e.fillQuaternary
+    },
+    accent: {
+      primary: e.accent,
+      control: e.buttonBackground,
+      controlHover: e.buttonHoverBackground
+    },
+    diff: {
+      insertedLine: e.diffInsertedLine,
+      removedLine: e.diffRemovedLine,
+      stripAdded: e.diffStripAdded,
+      stripRemoved: e.diffStripRemoved
+    },
+    category: t
+  };
+}
+const Ie = ce(
+  oe,
+  j
+), We = ce(
+  ae,
+  ie
+), nt = j, te = [
+  "blue",
+  "purple",
+  "green",
+  "yellow",
+  "cyan",
+  "pink",
+  "orange",
+  "red",
+  "gray"
+], Ge = {
+  green: "#1F8A65E8",
+  darkGreen: "#0D855AE0",
+  lightGreen: "#52B896E0",
+  mintGreen: "#7DCAB0E0",
+  blue: "#2E79B5E0",
+  lightBlue: "#70B0D8E0",
+  indigo: "#5A6CC0F0",
+  lightIndigo: "#9AAADCE0",
+  purple: "#7B64B8F0",
+  lightPurple: "#AA98D8E0",
+  warmPink: "#C85898E0",
+  lightPink: "#E8A0C4E0",
+  brightOrange: "#F0A040E0",
+  deepOrange: "#C06028E0",
+  goldenYellow: "#E8C030E0",
+  darkAmber: "#C04848E0",
+  warmPeach: "#F0A088E0",
+  vibrantTeal: "#2A9A8AE0",
+  muted: "#8888A8E0",
+  neutralLine: "#888899D0"
+}, je = {
+  h1: { fontSize: "24px", lineHeight: "30px", fontWeight: 590 },
+  h2: { fontSize: "18px", lineHeight: "24px", fontWeight: 590 },
+  h3: { fontSize: "16px", lineHeight: "22px", fontWeight: 590 },
+  body: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 },
+  small: { fontSize: "12px", lineHeight: "16px", fontWeight: 400 }
+}, Ne = {
+  "0.5": 2,
+  1: 4,
+  "1.5": 6,
+  2: 8,
+  "2.5": 10,
+  3: 12,
+  "3.5": 14,
+  4: 16,
+  "4.5": 18,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40
+}, Oe = {
+  none: 0,
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  full: 9999
+}, I = [
+  "#1F8A65E8",
+  "#70B0D8E0",
+  "#5A6CC0F0",
+  "#F0A040E0",
+  "#C06028E0",
+  "#E8C030E0",
+  "#C85898E0",
+  "#F0A088E0",
+  "#7B64B8F0",
+  "#7DCAB0E0",
+  "#8888A8E0",
+  "#2A9A8AE0"
+], b = {
+  success: "#1F8A65",
+  danger: "#CF2D56",
+  warning: "#E8A33D",
+  info: "#2E79B5",
+  neutral: "#8888A8",
+  added: "#1F8A65",
+  deleted: "#CF2D56",
+  renamed: "#5A6CC0"
+}, N = {
+  success: "green",
+  danger: "red",
+  warning: "orange",
+  info: "blue",
+  neutral: "gray",
+  added: "green",
+  deleted: "red",
+  renamed: "indigo"
+};
+function _e(e) {
+  const t = e === "dark" ? Ie : We;
+  return {
+    ...t,
+    kind: e,
+    tokens: t,
+    palette: e === "dark" ? oe : ae,
+    category: e === "dark" ? j : ie,
+    // Back-compat: real IDE canvases read these on useHostTheme(); public hooks.d.ts
+    // is sometimes narrower — see COMPAT.md (not a second theme API version).
+    chart: { palette: Ge, sequence: I },
+    radius: Oe,
+    typography: je,
+    spacing: Ne
+  };
+}
+function S() {
+  const e = xe("light");
+  return _e(e === "dark" ? "dark" : "light");
+}
+function se(e, t) {
+  return e ? b[e] : I[t % I.length];
+}
+function le(e, t) {
+  return e.map((r, a) => {
+    const c = { category: r };
+    for (const n of t)
+      c[n.name] = n.data[a] ?? 0;
+    return c;
+  });
+}
+function de(e) {
+  return e.map((t, r) => ({
+    name: t.name,
+    color: se(t.tone, r)
+  }));
+}
+function ue(e, t) {
+  if (!(!e && !t))
+    return (r) => `${t ?? ""}${r}${e ?? ""}`;
+}
+function qe(e, t) {
+  if (e != null && e.length)
+    return e.map((r) => ({
+      ...t ? { x: r.value } : { y: r.value },
+      label: r.label,
+      color: r.tone ? b[r.tone] : b.neutral
+    }));
+}
+function fe(e) {
+  const t = qe(e.referenceLines, !!e.horizontal);
+  if (e.stacked || e.normalized)
+    return { referenceLines: t };
+  const r = e.beginAtZero !== !1, a = [
+    e.yMin ?? (r ? 0 : "auto"),
+    e.yMax ?? "auto"
+  ];
+  return e.horizontal ? { xAxisProps: { domain: a }, referenceLines: t } : { yAxisProps: { domain: a }, referenceLines: t };
+}
+function Qe(e, t, r) {
+  return e !== void 0 ? e : t.length === 1 && r.length <= 8;
+}
+function ot({
+  categories: e,
+  series: t,
+  height: r = 240,
+  fill: a,
+  valueSuffix: c,
+  valuePrefix: n,
+  showValues: l,
+  showHoverGuide: u = !0,
+  beginAtZero: d,
+  yMin: s,
+  yMax: f,
+  referenceLines: y,
+  style: x
+}) {
+  const v = le(e, t), w = de(t), k = fe({
+    beginAtZero: d,
+    yMin: s,
+    yMax: f,
+    referenceLines: y,
+    horizontal: !1
+  }), C = {
+    h: r,
+    data: v,
+    dataKey: "category",
+    series: w,
+    curveType: "monotone",
+    withLegend: t.length > 1,
+    valueFormatter: ue(c, n),
+    withPointLabels: l ?? e.length <= 20,
+    tooltipProps: u ? void 0 : { cursor: !1 },
+    ...k,
+    style: x
+  };
+  return a ? /* @__PURE__ */ i(ze, { ...C }) : /* @__PURE__ */ i(Re, { ...C });
+}
+function at({
+  categories: e,
+  series: t,
+  height: r = 240,
+  stacked: a,
+  horizontal: c,
+  normalized: n,
+  valueSuffix: l,
+  valuePrefix: u,
+  showValues: d,
+  beginAtZero: s,
+  yMin: f,
+  yMax: y,
+  referenceLines: x,
+  style: v
+}) {
+  const w = le(e, t), k = n ? "percent" : a ? "stacked" : "default", C = fe({
+    beginAtZero: s,
+    yMin: f,
+    yMax: y,
+    referenceLines: x,
+    horizontal: c,
+    stacked: a,
+    normalized: n
+  }), B = !a && !n && Qe(d, t, e);
+  return /* @__PURE__ */ i(
+    Pe,
+    {
+      h: r,
+      data: w,
+      dataKey: "category",
+      series: de(t),
+      type: k,
+      orientation: c ? "vertical" : "horizontal",
+      withLegend: t.length > 1,
+      valueFormatter: ue(l, u),
+      withBarValueLabel: B,
+      ...C,
+      style: v
+    }
+  );
+}
+function it({ data: e, size: t = 200, donut: r, style: a }) {
+  const c = e.map((l, u) => ({
+    name: l.label,
+    value: l.value,
+    color: se(l.tone, u)
+  }));
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: t,
+        minHeight: t,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: r ? /* @__PURE__ */ i(
+        $e,
+        {
+          data: c,
+          size: t,
+          withTooltip: !0,
+          style: a
+        }
+      ) : /* @__PURE__ */ i(
+        He,
+        {
+          data: c,
+          size: t,
+          withTooltip: !0,
+          withLabelsLine: !1,
+          style: a
+        }
+      )
+    }
+  );
+}
+function ct(e) {
+  const {
+    nodes: t,
+    edges: r,
+    direction: a = "vertical",
+    nodeWidth: c = 160,
+    nodeHeight: n = 40,
+    rankGap: l = 64,
+    nodeGap: u = 48,
+    padding: d = 24
+  } = e, s = t.map((o) => o.id), f = new Set(s), y = /* @__PURE__ */ new Map();
+  for (const o of s) y.set(o, []);
+  for (const o of r)
+    f.has(o.from) && f.has(o.to) && y.get(o.from).push(o.to);
+  const x = 0, v = 1, w = 2, k = new Map(s.map((o) => [o, x])), C = /* @__PURE__ */ new Set(), B = (o, h) => `${o}\0${h}`, _ = (o) => {
+    k.set(o, v);
+    for (const h of y.get(o) ?? []) {
+      const p = k.get(h);
+      p === v ? C.add(B(o, h)) : p === x && _(h);
+    }
+    k.set(o, w);
+  };
+  for (const o of s) k.get(o) === x && _(o);
+  const ge = r.filter(
+    (o) => f.has(o.from) && f.has(o.to) && !C.has(B(o.from, o.to))
+  ), F = new Map(s.map((o) => [o, 0])), q = new Map(s.map((o) => [o, []]));
+  for (const o of ge)
+    q.get(o.from).push(o.to), F.set(o.to, (F.get(o.to) ?? 0) + 1);
+  const T = new Map(s.map((o) => [o, 0])), z = s.filter((o) => (F.get(o) ?? 0) === 0);
+  for (; z.length > 0; ) {
+    const o = z.shift(), h = T.get(o);
+    for (const p of q.get(o))
+      T.set(p, Math.max(T.get(p), h + 1)), F.set(p, F.get(p) - 1), F.get(p) === 0 && z.push(p);
+  }
+  const A = /* @__PURE__ */ new Map();
+  for (const o of s) {
+    const h = T.get(o);
+    A.has(h) || A.set(h, []), A.get(h).push(o);
+  }
+  const L = [...A.keys()].sort((o, h) => o - h), m = a === "vertical", Q = (o) => o * (m ? c : n) + Math.max(0, o - 1) * u, K = Math.max(
+    0,
+    ...L.map((o) => Q(A.get(o).length))
+  ), D = /* @__PURE__ */ new Map(), X = [];
+  L.forEach((o, h) => {
+    const p = A.get(o), R = Q(p.length), $ = d + (K - R) / 2, M = d + h * ((m ? n : c) + l);
+    p.forEach((U, Z) => {
+      const ee = $ + Z * ((m ? c : n) + u), ye = m ? ee : M, me = m ? M : ee;
+      D.set(U, { id: U, x: ye, y: me, rank: o, order: Z });
+    }), X.push({
+      rank: o,
+      x: m ? $ : M,
+      y: m ? M : $,
+      width: m ? R : c,
+      height: m ? n : R,
+      nodeIds: p
+    });
+  });
+  const Y = (o, h) => o ? m ? {
+    x: o.x + c / 2,
+    y: h === "source" ? o.y + n : o.y
+  } : {
+    x: h === "source" ? o.x + c : o.x,
+    y: o.y + n / 2
+  } : { x: 0, y: 0 }, pe = r.filter((o) => f.has(o.from) && f.has(o.to)).map((o) => {
+    const h = Y(D.get(o.from), "source"), p = Y(D.get(o.to), "target");
+    return {
+      from: o.from,
+      to: o.to,
+      sourceX: h.x,
+      sourceY: h.y,
+      targetX: p.x,
+      targetY: p.y,
+      isBackEdge: C.has(B(o.from, o.to))
+    };
+  }), V = d * 2 + L.length * (m ? n : c) + Math.max(0, L.length - 1) * l, J = d * 2 + K;
+  return {
+    nodes: [...D.values()],
+    edges: pe,
+    ranks: X,
+    direction: a,
+    width: m ? J : V,
+    height: m ? V : J
+  };
+}
+function st({
+  additions: e = 0,
+  deletions: t = 0,
+  style: r
+}) {
+  return e === 0 && t === 0 ? null : /* @__PURE__ */ g(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        gap: 8,
+        fontVariantNumeric: "tabular-nums",
+        fontSize: 12,
+        fontWeight: 600,
+        ...r
+      },
+      children: [
+        e > 0 && /* @__PURE__ */ g("span", { style: { color: b.added }, children: [
+          "+",
+          e
+        ] }),
+        t > 0 && /* @__PURE__ */ g("span", { style: { color: b.deleted }, children: [
+          "-",
+          t
+        ] })
+      ]
+    }
+  );
+}
+const Ke = {
+  added: "+",
+  removed: "-",
+  unchanged: " "
+};
+function lt({
+  lines: e,
+  showLineNumbers: t = !0,
+  coloredLineNumbers: r = !0,
+  showAccentStrip: a = !0,
+  style: c
+}) {
+  const n = S(), l = (s) => s === "added" ? n.diff.insertedLine : s === "removed" ? n.diff.removedLine : "transparent", u = (s) => s === "added" ? n.diff.stripAdded : s === "removed" ? n.diff.stripRemoved : "transparent", d = (s) => r && s === "added" ? b.added : r && s === "removed" ? b.deleted : n.text.tertiary;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace',
+        fontSize: 12.5,
+        lineHeight: "18px",
+        color: n.text.primary,
+        overflowX: "auto",
+        ...c
+      },
+      children: e.map((s, f) => /* @__PURE__ */ g(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "stretch",
+            background: l(s.type),
+            borderLeft: a ? `3px solid ${u(s.type)}` : void 0
+          },
+          children: [
+            t && /* @__PURE__ */ i(
+              "span",
+              {
+                style: {
+                  flex: "0 0 auto",
+                  width: 40,
+                  textAlign: "right",
+                  paddingRight: 10,
+                  userSelect: "none",
+                  color: d(s.type)
+                },
+                children: s.lineNumber ?? ""
+              }
+            ),
+            /* @__PURE__ */ i(
+              "span",
+              {
+                style: {
+                  flex: "0 0 auto",
+                  width: 14,
+                  textAlign: "center",
+                  userSelect: "none",
+                  color: d(s.type)
+                },
+                children: Ke[s.type]
+              }
+            ),
+            /* @__PURE__ */ i(
+              "pre",
+              {
+                style: {
+                  margin: 0,
+                  padding: "0 8px",
+                  whiteSpace: "pre",
+                  fontFamily: "inherit"
+                },
+                children: s.content
+              }
+            )
+          ]
+        },
+        f
+      ))
+    }
+  );
+}
+function Xe({ status: e }) {
+  const t = S(), r = e === "completed" ? b.success : e === "in_progress" ? t.accent.primary : e === "cancelled" ? b.danger : t.text.tertiary;
+  return /* @__PURE__ */ g(
+    "svg",
+    {
+      width: 14,
+      height: 14,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      style: { flex: "0 0 auto", marginTop: 3 },
+      "aria-hidden": !0,
+      children: [
+        /* @__PURE__ */ i("circle", { cx: 7, cy: 7, r: 6, stroke: r, strokeWidth: 1.4 }),
+        e === "completed" && /* @__PURE__ */ i(
+          "path",
+          {
+            d: "M4 7.2l2 2 4-4.4",
+            stroke: r,
+            strokeWidth: 1.4,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        e === "in_progress" && /* @__PURE__ */ i("circle", { cx: 7, cy: 7, r: 3, fill: r }),
+        e === "cancelled" && /* @__PURE__ */ i(
+          "path",
+          {
+            d: "M4.8 4.8l4.4 4.4M9.2 4.8l-4.4 4.4",
+            stroke: r,
+            strokeWidth: 1.4,
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function Ye({
+  todos: e,
+  dimmedTodoIds: t,
+  onTodoClick: r,
+  style: a
+}) {
+  const c = S();
+  return e.length === 0 ? null : /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", ...a }, children: e.map((n) => {
+    const l = t == null ? void 0 : t.has(n.id);
+    return /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        onClick: () => r == null ? void 0 : r(n),
+        style: {
+          display: "flex",
+          gap: 8,
+          alignItems: "flex-start",
+          width: "100%",
+          textAlign: "left",
+          padding: "4px 6px",
+          background: "transparent",
+          border: "none",
+          cursor: r ? "pointer" : "default",
+          color: c.text.primary,
+          fontSize: 14,
+          lineHeight: "20px",
+          opacity: l ? 0.45 : 1
+        },
+        children: [
+          /* @__PURE__ */ i(Xe, { status: n.status }),
+          /* @__PURE__ */ i(
+            "span",
+            {
+              style: {
+                textDecoration: n.status === "cancelled" ? "line-through" : void 0,
+                color: n.status === "cancelled" ? c.text.tertiary : void 0
+              },
+              children: n.content
+            }
+          )
+        ]
+      },
+      n.id
+    );
+  }) });
+}
+function dt({
+  todos: e,
+  dimmedTodoIds: t,
+  defaultExpanded: r = !1,
+  onTodoClick: a,
+  style: c
+}) {
+  const n = S(), [l, u] = P(r);
+  if (e.length === 0) return null;
+  const d = e.filter((s) => s.status === "completed").length;
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      style: {
+        border: `1px solid ${n.stroke.primary}`,
+        borderRadius: 6,
+        overflow: "hidden",
+        ...c
+      },
+      children: [
+        /* @__PURE__ */ g(
+          "button",
+          {
+            type: "button",
+            onClick: () => u((s) => !s),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              width: "100%",
+              padding: "6px 10px",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              color: n.text.secondary,
+              fontSize: 12,
+              fontWeight: 600
+            },
+            children: [
+              /* @__PURE__ */ i(
+                "svg",
+                {
+                  width: 12,
+                  height: 12,
+                  viewBox: "0 0 12 12",
+                  fill: "none",
+                  style: {
+                    transform: l ? "rotate(90deg)" : "none",
+                    transition: "transform 120ms"
+                  },
+                  "aria-hidden": !0,
+                  children: /* @__PURE__ */ i(
+                    "path",
+                    {
+                      d: "M4 2.5L8 6l-4 3.5",
+                      stroke: "currentColor",
+                      strokeWidth: 1.4,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ i("span", { children: "Todos" }),
+              /* @__PURE__ */ i("span", { style: { flex: 1 } }),
+              /* @__PURE__ */ g("span", { children: [
+                d,
+                " of ",
+                e.length,
+                " Done"
+              ] })
+            ]
+          }
+        ),
+        l && /* @__PURE__ */ i("div", { style: { padding: 6 }, children: /* @__PURE__ */ i(
+          Ye,
+          {
+            todos: e,
+            dimmedTodoIds: t,
+            onTodoClick: a
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ut(e, t) {
+  const r = `canvas:${e}`, [a, c] = P(() => {
+    if (typeof localStorage > "u") return t;
+    try {
+      const l = localStorage.getItem(r);
+      return l === null ? t : JSON.parse(l);
+    } catch {
+      return t;
+    }
+  }), n = G(
+    (l) => {
+      c((u) => {
+        const d = typeof l == "function" ? l(u) : l;
+        try {
+          localStorage == null || localStorage.setItem(r, JSON.stringify(d));
+        } catch {
+        }
+        return d;
+      });
+    },
+    [r]
+  );
+  return [a, n];
+}
+function ft() {
+  return G((e) => {
+  }, []);
+}
+function ht(e, t) {
+  return { ...e, ...t };
+}
+function gt({ children: e, style: t }) {
+  return /* @__PURE__ */ i(W, { order: 1, fz: 24, lh: "30px", style: t, children: e });
+}
+function pt({ children: e, style: t }) {
+  return /* @__PURE__ */ i(W, { order: 2, fz: 18, lh: "24px", style: t, children: e });
+}
+function yt({ children: e, style: t }) {
+  return /* @__PURE__ */ i(W, { order: 3, fz: 16, lh: "22px", style: t, children: e });
+}
+const Ve = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+function mt({
+  children: e,
+  tone: t = "primary",
+  size: r = "body",
+  as: a = "p",
+  weight: c = "normal",
+  italic: n,
+  truncate: l,
+  style: u
+}) {
+  const d = S();
+  return /* @__PURE__ */ i(
+    H,
+    {
+      component: a,
+      size: r === "small" ? "xs" : "sm",
+      fw: Ve[c],
+      c: t === "primary" ? void 0 : d.text[t],
+      truncate: l,
+      style: { fontStyle: n ? "italic" : void 0, ...u },
+      children: e
+    }
+  );
+}
+function xt({ children: e, style: t }) {
+  return /* @__PURE__ */ i(
+    "code",
+    {
+      style: {
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace',
+        fontSize: "0.92em",
+        background: "var(--mantine-color-default-hover)",
+        borderRadius: 4,
+        padding: "1px 4px",
+        ...t
+      },
+      children: e
+    }
+  );
+}
+function vt({ children: e, href: t, style: r }) {
+  return /* @__PURE__ */ i(
+    "a",
+    {
+      href: t,
+      target: "_blank",
+      rel: "noreferrer",
+      style: { color: "var(--mantine-color-anchor)", ...r },
+      children: e
+    }
+  );
+}
+function Et({ children: e, gap: t, style: r }) {
+  return /* @__PURE__ */ i(Be, { gap: t, style: r, children: e });
+}
+const re = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  "space-between": "space-between"
+};
+function bt({
+  children: e,
+  gap: t,
+  align: r = "center",
+  justify: a = "start",
+  wrap: c = !1,
+  style: n
+}) {
+  return /* @__PURE__ */ i(
+    Ae,
+    {
+      gap: t,
+      align: re[r],
+      justify: re[a],
+      wrap: c ? "wrap" : "nowrap",
+      style: n,
+      children: e
+    }
+  );
+}
+function kt() {
+  return /* @__PURE__ */ i("div", { style: { flex: 1 } });
+}
+function Ct({ children: e, columns: t, gap: r = 16, align: a, style: c }) {
+  const n = typeof t == "number" ? `repeat(${t}, minmax(0, 1fr))` : t;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: n,
+        gap: r,
+        alignItems: a,
+        ...c
+      },
+      children: e
+    }
+  );
+}
+function St({ style: e }) {
+  return /* @__PURE__ */ i(Ce, { style: e });
+}
+const O = Me({
+  collapsible: !1,
+  open: !0,
+  toggle: () => {
+  }
+});
+function Ft({
+  children: e,
+  variant: t = "default",
+  collapsible: r = !1,
+  defaultOpen: a = !0,
+  open: c,
+  onOpenChange: n,
+  style: l
+}) {
+  const [u, d] = P(a), s = c ?? u, f = G(() => {
+    const y = !s;
+    c === void 0 && d(y), n == null || n(y);
+  }, [s, c, n]);
+  return /* @__PURE__ */ i(
+    be,
+    {
+      withBorder: t !== "borderless",
+      radius: "md",
+      padding: 0,
+      style: l,
+      children: /* @__PURE__ */ i(O.Provider, { value: { collapsible: r, open: s, toggle: f }, children: e })
+    }
+  );
+}
+function At({ children: e, trailing: t, style: r }) {
+  const { collapsible: a, open: c, toggle: n } = ne(O);
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      onClick: a ? n : void 0,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 8,
+        padding: "8px 14px",
+        borderBottom: "1px solid var(--mantine-color-default-border)",
+        fontSize: 12,
+        fontWeight: 600,
+        color: "var(--mantine-color-dimmed)",
+        cursor: a ? "pointer" : void 0,
+        userSelect: a ? "none" : void 0,
+        ...r
+      },
+      children: [
+        /* @__PURE__ */ g("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+          a && /* @__PURE__ */ i(he, { expanded: c }),
+          e
+        ] }),
+        t != null && /* @__PURE__ */ i("span", { children: t })
+      ]
+    }
+  );
+}
+function wt({ children: e, style: t }) {
+  const { collapsible: r, open: a } = ne(O);
+  return r && !a ? null : /* @__PURE__ */ i("div", { style: { padding: 14, ...t }, children: e });
+}
+function he({ expanded: e }) {
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      width: 12,
+      height: 12,
+      viewBox: "0 0 12 12",
+      fill: "none",
+      style: {
+        transform: e ? "rotate(90deg)" : "none",
+        transition: "transform 120ms"
+      },
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ i(
+        "path",
+        {
+          d: "M4 2.5L8 6l-4 3.5",
+          stroke: "currentColor",
+          strokeWidth: 1.4,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function Bt({ value: e, label: t, tone: r, style: a }) {
+  return /* @__PURE__ */ g("div", { style: a, children: [
+    /* @__PURE__ */ i(
+      H,
+      {
+        fz: 22,
+        fw: 700,
+        lh: 1.2,
+        c: r ? `${N[r]}.6` : void 0,
+        children: e
+      }
+    ),
+    /* @__PURE__ */ i(H, { fz: 12, c: "dimmed", children: t })
+  ] });
+}
+function Tt({
+  children: e,
+  active: t,
+  tone: r = "neutral",
+  size: a = "md",
+  leadingContent: c,
+  keyboardHint: n,
+  title: l,
+  style: u,
+  onClick: d
+}) {
+  return /* @__PURE__ */ i(
+    Fe,
+    {
+      color: N[r],
+      variant: t ? "filled" : "light",
+      size: a === "sm" ? "sm" : "md",
+      leftSection: c,
+      rightSection: n,
+      title: l,
+      onClick: d,
+      style: {
+        cursor: d ? "pointer" : void 0,
+        textTransform: "none",
+        ...u
+      },
+      children: e
+    }
+  );
+}
+function Lt({
+  children: e,
+  tone: t = "neutral",
+  title: r,
+  icon: a,
+  style: c
+}) {
+  return /* @__PURE__ */ i(
+    Ee,
+    {
+      color: N[t],
+      title: r,
+      icon: a,
+      variant: "light",
+      style: c,
+      children: e
+    }
+  );
+}
+const Je = {
+  success: "rgba(31,138,101,0.12)",
+  danger: "rgba(207,45,86,0.12)",
+  warning: "rgba(232,163,61,0.14)",
+  info: "rgba(46,121,181,0.12)",
+  neutral: "rgba(136,136,168,0.12)"
+};
+function Dt({
+  headers: e,
+  rows: t,
+  columnAlign: r,
+  rowTone: a,
+  framed: c = !0,
+  striped: n,
+  stickyHeader: l,
+  style: u,
+  emptyMessage: d
+}) {
+  return /* @__PURE__ */ g(
+    E,
+    {
+      withTableBorder: c,
+      withColumnBorders: !1,
+      striped: n,
+      stickyHeader: l,
+      highlightOnHover: !0,
+      style: u,
+      children: [
+        /* @__PURE__ */ i(E.Thead, { children: /* @__PURE__ */ i(E.Tr, { children: e.map((s, f) => /* @__PURE__ */ i(E.Th, { ta: (r == null ? void 0 : r[f]) ?? "left", children: s }, f)) }) }),
+        /* @__PURE__ */ i(E.Tbody, { children: t.length === 0 ? /* @__PURE__ */ i(E.Tr, { children: /* @__PURE__ */ i(E.Td, { colSpan: e.length, ta: "center", c: "dimmed", children: d ?? "No data" }) }) : t.map((s, f) => {
+          const y = a == null ? void 0 : a[f];
+          return /* @__PURE__ */ i(
+            E.Tr,
+            {
+              style: y ? { background: Je[y] } : void 0,
+              children: e.map((x, v) => /* @__PURE__ */ i(
+                E.Td,
+                {
+                  ta: (r == null ? void 0 : r[v]) ?? "left",
+                  children: s[v]
+                },
+                v
+              ))
+            },
+            f
+          );
+        }) })
+      ]
+    }
+  );
+}
+const Ue = {
+  primary: "filled",
+  secondary: "default",
+  ghost: "subtle"
+};
+function Mt({
+  children: e,
+  variant: t = "secondary",
+  disabled: r,
+  type: a = "button",
+  style: c,
+  onClick: n
+}) {
+  return /* @__PURE__ */ i(
+    ve,
+    {
+      variant: Ue[t],
+      size: "xs",
+      disabled: r,
+      type: a,
+      onClick: n,
+      style: c,
+      children: e
+    }
+  );
+}
+function Pt({
+  children: e,
+  onClick: t,
+  disabled: r,
+  title: a,
+  variant: c = "default",
+  size: n = "md",
+  style: l
+}) {
+  return /* @__PURE__ */ i(
+    Se,
+    {
+      variant: c === "circle" ? "light" : "subtle",
+      radius: c === "circle" ? "xl" : "sm",
+      size: n === "sm" ? "sm" : "md",
+      color: "gray",
+      disabled: r,
+      title: a,
+      "aria-label": a,
+      onClick: t,
+      style: l,
+      children: e
+    }
+  );
+}
+function zt({
+  value: e,
+  onChange: t,
+  options: r,
+  placeholder: a,
+  disabled: c,
+  style: n
+}) {
+  return /* @__PURE__ */ i(
+    we,
+    {
+      value: e,
+      data: r,
+      placeholder: a,
+      disabled: c,
+      allowDeselect: !1,
+      onChange: (l) => {
+        l !== null && (t == null || t(l));
+      },
+      style: n
+    }
+  );
+}
+function Rt({
+  checked: e,
+  onChange: t,
+  disabled: r,
+  label: a,
+  style: c
+}) {
+  return /* @__PURE__ */ i(
+    ke,
+    {
+      checked: e,
+      disabled: r,
+      label: a,
+      onChange: (n) => t == null ? void 0 : t(n.currentTarget.checked),
+      style: c
+    }
+  );
+}
+function $t({
+  checked: e,
+  onChange: t,
+  disabled: r,
+  size: a = "sm",
+  style: c
+}) {
+  return /* @__PURE__ */ i(
+    De,
+    {
+      checked: e,
+      disabled: r,
+      size: a === "sm" ? "sm" : "md",
+      onChange: (n) => t == null ? void 0 : t(n.currentTarget.checked),
+      style: c
+    }
+  );
+}
+function Ht({
+  value: e,
+  onChange: t,
+  placeholder: r,
+  disabled: a,
+  type: c,
+  style: n
+}) {
+  return /* @__PURE__ */ i(
+    Le,
+    {
+      value: e,
+      placeholder: r,
+      disabled: a,
+      type: c,
+      onChange: (l) => t == null ? void 0 : t(l.currentTarget.value),
+      style: n
+    }
+  );
+}
+function It({
+  value: e,
+  onChange: t,
+  placeholder: r,
+  disabled: a,
+  rows: c = 3,
+  style: n
+}) {
+  return /* @__PURE__ */ i(
+    Te,
+    {
+      value: e,
+      placeholder: r,
+      disabled: a,
+      autosize: !0,
+      minRows: c,
+      onChange: (l) => t == null ? void 0 : t(l.currentTarget.value),
+      style: n
+    }
+  );
+}
+function Wt({ color: e, style: t }) {
+  const r = S();
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        width: 14,
+        height: 14,
+        borderRadius: 4,
+        background: r.category[e],
+        flex: "0 0 auto",
+        ...t
+      }
+    }
+  );
+}
+function Gt({
+  segments: e,
+  total: t,
+  topLeftLabel: r,
+  topRightLabel: a,
+  style: c
+}) {
+  const n = S(), l = t > 0 ? t : 1, u = e.reduce(
+    (s, f) => s + (Number.isFinite(f.value) && f.value > 0 ? f.value : 0),
+    0
+  ), d = Math.max(0, l - u);
+  return /* @__PURE__ */ g("div", { style: c, children: [
+    (r != null || a != null) && /* @__PURE__ */ g(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          fontSize: 12,
+          color: n.text.secondary,
+          marginBottom: 6
+        },
+        children: [
+          /* @__PURE__ */ i("span", { children: r }),
+          /* @__PURE__ */ i("span", { children: a })
+        ]
+      }
+    ),
+    /* @__PURE__ */ g("div", { style: { display: "flex", gap: 2, height: 8 }, children: [
+      e.map((s, f) => {
+        const y = Number.isFinite(s.value) && s.value > 0 ? s.value : 0, x = n.category[s.color ?? te[f % te.length]];
+        return /* @__PURE__ */ i(
+          "div",
+          {
+            style: {
+              width: `${y / l * 100}%`,
+              background: x,
+              borderRadius: 3
+            }
+          },
+          s.id
+        );
+      }),
+      d > 0 && /* @__PURE__ */ i(
+        "div",
+        {
+          style: {
+            width: `${d / l * 100}%`,
+            background: n.fill.tertiary,
+            borderRadius: 3
+          }
+        }
+      )
+    ] })
+  ] });
+}
+function jt({
+  title: e,
+  leading: t,
+  count: r,
+  trailing: a,
+  children: c,
+  defaultOpen: n = !1,
+  style: l
+}) {
+  const u = S(), [d, s] = P(n);
+  return /* @__PURE__ */ g("div", { style: l, children: [
+    /* @__PURE__ */ g(
+      "div",
+      {
+        onClick: () => s((f) => !f),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "4px 0",
+          cursor: "pointer",
+          userSelect: "none",
+          color: u.text.primary,
+          fontSize: 14
+        },
+        children: [
+          /* @__PURE__ */ i(he, { expanded: d }),
+          t,
+          /* @__PURE__ */ i("span", { style: { fontWeight: 500 }, children: e }),
+          r != null && /* @__PURE__ */ i("span", { style: { color: u.text.tertiary, fontSize: 12 }, children: r }),
+          /* @__PURE__ */ i("span", { style: { flex: 1 } }),
+          a != null && /* @__PURE__ */ i("span", { style: { color: u.text.tertiary }, children: a })
+        ]
+      }
+    ),
+    d && /* @__PURE__ */ i("div", { style: { paddingLeft: 18, paddingBottom: 4 }, children: c })
+  ] });
+}
+export {
+  at as BarChart,
+  Mt as Button,
+  Lt as Callout,
+  Ft as Card,
+  wt as CardBody,
+  At as CardHeader,
+  Rt as Checkbox,
+  xt as Code,
+  jt as CollapsibleSection,
+  st as DiffStats,
+  lt as DiffView,
+  St as Divider,
+  Ct as Grid,
+  gt as H1,
+  pt as H2,
+  yt as H3,
+  Pt as IconButton,
+  ot as LineChart,
+  vt as Link,
+  it as PieChart,
+  Tt as Pill,
+  bt as Row,
+  zt as Select,
+  kt as Spacer,
+  Et as Stack,
+  Bt as Stat,
+  Wt as Swatch,
+  Dt as Table,
+  mt as Text,
+  It as TextArea,
+  Ht as TextInput,
+  Ye as TodoList,
+  dt as TodoListCard,
+  $t as Toggle,
+  Gt as UsageBar,
+  oe as canvasPaletteDark,
+  ae as canvasPaletteLight,
+  Ie as canvasTokens,
+  We as canvasTokensLight,
+  j as categoryPaletteDark,
+  ie as categoryPaletteLight,
+  nt as colorPalette,
+  ct as computeDAGLayout,
+  ht as mergeStyle,
+  le as reshapeLineChartData,
+  te as usageColorSequence,
+  ft as useCanvasAction,
+  ut as useCanvasState,
+  _t as useEffect,
+  S as useHostTheme,
+  qt as useMemo,
+  Qt as useRef,
+  Kt as useState
+};