@flesler/cursor-canvas-web 1.3.0 → 1.4.0

package/dist/cursor-canvas.js

@@ -1,11 +1,11 @@
 import { jsx as i, jsxs as y } from "react/jsx-runtime";
-import { useComputedColorScheme as ve, Button as be, Alert as Se, Card as ke, Checkbox as we, Divider as Ce, Title as W, ActionIcon as Le, Badge as Te, Group as Pe, Select as Ae, Stack as Me, Text as H, Table as C, Textarea as Be, TextInput as $e, Switch as De } from "@mantine/core";
-import { useState as D, createContext as ie, useCallback as G, useContext as O } from "react";
-import { useEffect as Qt, useMemo as en, useRef as tn, useState as nn } from "react";
-import { r as Fe, u as ne } from "./host-tokens-Bt6GPXN1.js";
-import { c as on, a as an, b as sn, d as ln, e as cn, f as dn, g as un, h as fn, i as hn } from "./host-tokens-Bt6GPXN1.js";
-import { BarChart as Ee, AreaChart as Ie, LineChart as Ne, DonutChart as ze, PieChart as Re, ChartLegend as _e } from "@mantine/charts";
-const w = {
+import { useComputedColorScheme as ve, Button as be, Alert as Se, Card as ke, Checkbox as Ce, Divider as we, Title as W, ActionIcon as Le, Badge as Te, Group as Pe, Select as Ae, Stack as Me, Text as H, Table as T, Textarea as Be, TextInput as De, Switch as $e } from "@mantine/core";
+import { useState as E, createContext as ae, useCallback as G, useContext as O } from "react";
+import { useEffect as nn, useMemo as rn, useRef as on, useState as an } from "react";
+import { r as Ee, u as ne } from "./host-tokens-Bt6GPXN1.js";
+import { c as ln, a as cn, b as dn, d as un, e as fn, f as hn, g as pn, h as yn, i as mn } from "./host-tokens-Bt6GPXN1.js";
+import { BarChart as Fe, AreaChart as Ie, LineChart as Ne, DonutChart as Re, PieChart as _e, ChartLegend as ze } from "@mantine/charts";
+const C = {
   success: "#1F8A65",
   danger: "#CF2D56",
   warning: "#E8A33D",
@@ -14,7 +14,7 @@ const w = {
   added: "#1F8A65",
   deleted: "#CF2D56",
   renamed: "#5A6CC0"
-}, se = {
+}, ie = {
   success: "green",
   danger: "red",
   warning: "orange",
@@ -25,83 +25,89 @@ const w = {
   renamed: "indigo"
 };
 function g() {
-  const t = ve("light") === "dark" ? "dark" : "light";
-  return Fe(t);
+  const e = ve("light") === "dark" ? "dark" : "light";
+  return Ee(e);
 }
-const le = {
+const se = {
   verticalAlign: "bottom",
   align: "center"
-}, ce = {
+}, le = {
   legend: { justifyContent: "center" }
 };
 function j() {
-  const t = g().chart.sequence;
-  return (n, r) => n ? w[n] : t[r % t.length];
-}
-function de() {
-  const t = g().text.primary;
-  return { textColor: t, barLabelColor: t };
-}
-function ue(e, t) {
-  return e.map((n, r) => {
-    const a = { category: n };
-    for (const o of t)
-      a[o.name] = o.data[r] ?? 0;
-    return a;
+  const e = g().chart.sequence;
+  return (n, r) => n ? C[n] : e[r % e.length];
+}
+function ce() {
+  const e = g().text.primary;
+  return { textColor: e, barLabelColor: e };
+}
+function de(t, e) {
+  return t.map((n, r) => {
+    const o = { category: n };
+    for (const a of e)
+      o[a.name] = a.data[r] ?? 0;
+    return o;
   });
 }
-function fe(e, t) {
-  return e.map((n, r) => ({
+function ue(t, e) {
+  return t.map((n, r) => ({
     name: n.name,
-    color: t(n.tone, r)
+    color: e(n.tone, r)
   }));
 }
-function he(e, t) {
-  return (n) => `${t ?? ""}${n}${e ?? ""}`;
+function fe(t, e) {
+  return (n) => `${e ?? ""}${n}${t ?? ""}`;
 }
-function He(e, t) {
-  if (e != null && e.length)
-    return e.map((n) => ({
-      ...t ? { x: n.value } : { y: n.value },
+function He(t, e) {
+  if (t != null && t.length)
+    return t.map((n) => ({
+      ...e ? { x: n.value } : { y: n.value },
       label: n.label,
-      color: n.tone ? w[n.tone] : w.neutral
+      color: n.tone ? C[n.tone] : C.neutral
     }));
 }
 const We = /* @__PURE__ */ new Set(["log", "symlog", "pow", "sqrt"]);
-function Ge(e) {
-  const { scale: t } = e;
-  return typeof t != "string" || !We.has(t) ? e : {
-    ...e,
-    type: e.type ?? "number",
-    allowDataOverflow: e.allowDataOverflow ?? !0,
-    allowDecimals: e.allowDecimals ?? !0,
-    domain: e.domain ?? [1, "dataMax"]
+function Ge(t) {
+  const { scale: e } = t;
+  return typeof e != "string" || !We.has(e) ? t : {
+    ...t,
+    type: t.type ?? "number",
+    allowDataOverflow: t.allowDataOverflow ?? !0,
+    allowDecimals: t.allowDecimals ?? !0,
+    domain: t.domain ?? [1, "dataMax"]
   };
 }
-function pe(e) {
-  const t = He(e.referenceLines, !!e.horizontal);
+function he(t) {
+  const e = He(t.referenceLines, !!t.horizontal);
   let n;
-  if (!e.stacked && !e.normalized) {
-    const o = e.beginAtZero !== !1;
-    n = [e.yMin ?? (o ? 0 : "auto"), e.yMax ?? "auto"];
+  if (!t.stacked && !t.normalized) {
+    const a = t.beginAtZero !== !1;
+    n = [t.yMin ?? (a ? 0 : "auto"), t.yMax ?? "auto"];
   }
-  const r = e.valueAxis ? Ge(e.valueAxis) : void 0;
+  const r = t.valueAxis ? Ge(t.valueAxis) : void 0;
   if (!n && !r)
-    return { referenceLines: t };
-  const a = { ...n && { domain: n }, ...r };
-  return e.horizontal ? { xAxisProps: a, referenceLines: t } : { yAxisProps: a, referenceLines: t };
+    return { referenceLines: e };
+  const o = { ...n && { domain: n }, ...r };
+  return t.horizontal ? { xAxisProps: o, referenceLines: e } : { yAxisProps: o, referenceLines: e };
+}
+function Oe(t, e, n) {
+  return t !== void 0 ? t : e.length === 1 && n.length <= 8;
 }
-function Oe(e, t, n) {
-  return e !== void 0 ? e : t.length === 1 && n.length <= 8;
+function je(t, e, n) {
+  return e.length !== 1 || e[0].tone ? t : t.map((r, o) => ({
+    ...r,
+    color: n(void 0, o)
+  }));
 }
-const re = 14;
-function je(e) {
-  return e.length <= re ? e : `${e.slice(0, re - 1)}…`;
+const Ke = 96, Ve = 6.5;
+function Xe(t, e) {
+  return t.length <= e ? t : `${t.slice(0, e - 1)}…`;
 }
-function Ke(e) {
-  var o;
-  const t = typeof e.x == "number" ? e.x : Number(e.x) || 0, n = typeof e.y == "number" ? e.y : Number(e.y) || 0, r = String(((o = e.payload) == null ? void 0 : o.value) ?? ""), a = je(r);
-  return /* @__PURE__ */ i("g", { transform: `translate(${t},${n})`, children: /* @__PURE__ */ y(
+function Ye(t, e) {
+  var l;
+  const n = typeof e.x == "number" ? e.x : Number(e.x) || 0, r = typeof e.y == "number" ? e.y : Number(e.y) || 0, o = String(((l = e.payload) == null ? void 0 : l.value) ?? ""), a = Xe(o, t);
+  return /* @__PURE__ */ i("g", { transform: `translate(${n},${r})`, children: /* @__PURE__ */ y(
     "text",
     {
       x: -10,
@@ -111,160 +117,176 @@ function Ke(e) {
       fill: "currentColor",
       fontSize: 12,
       children: [
-        /* @__PURE__ */ i("title", { children: r }),
+        /* @__PURE__ */ i("title", { children: o }),
         a
       ]
     }
   ) });
 }
-function Xe(e) {
+function pe(t) {
   return {
     fontWeight: 700,
-    fill: e
+    fill: t
+  };
+}
+function qe(t) {
+  return {
+    ...pe(t),
+    position: "right"
   };
 }
-function qe() {
+function Ze(t = Ke, e = !1) {
+  const n = Math.floor(t / Ve);
   return {
     yAxisProps: {
-      tick: Ke,
-      width: 96
+      tick: (r) => Ye(n, r),
+      width: t
     },
     barChartProps: {
-      margin: { right: 32 }
-    }
+      margin: { right: e ? 48 : 32 }
+    },
+    /** Value-axis grid only; Mantine's default `x` draws a line per category row. */
+    gridAxis: "y"
   };
 }
-function Ve() {
+function Je() {
   return {
     barChartProps: {
       margin: { top: 22 }
     }
   };
 }
-function ht({
-  categories: e,
-  series: t,
+function mt({
+  categories: t,
+  series: e,
   height: n = 240,
   fill: r,
-  valueSuffix: a,
-  valuePrefix: o,
-  showValues: c,
+  valueSuffix: o,
+  valuePrefix: a,
+  showValues: l,
   showHoverGuide: f = !0,
   beginAtZero: d,
-  yMin: l,
+  yMin: c,
   yMax: u,
   referenceLines: m,
   style: v,
   extra: h,
-  smooth: k
+  smooth: b
 }) {
-  const L = (h == null ? void 0 : h.smooth) ?? k, T = j(), P = de(), M = ue(e, t), $ = fe(t, T), b = !!(r && (h != null && h.stacked)), F = pe({
+  const w = (h == null ? void 0 : h.smooth) ?? b, L = j(), P = ce(), B = de(t, e), $ = ue(e, L), S = !!(r && (h != null && h.stacked)), A = he({
     beginAtZero: d,
-    yMin: l,
+    yMin: c,
     yMax: u,
     referenceLines: m,
     horizontal: !1,
-    stacked: b,
+    stacked: S,
     valueAxis: h == null ? void 0 : h.valueAxis
-  }), A = {
+  }), M = {
     h: n,
-    data: M,
+    data: B,
     dataKey: "category",
     series: $,
-    curveType: L ? "monotone" : "linear",
-    withLegend: t.length > 1,
-    legendProps: le,
-    valueFormatter: he(a, o),
-    withPointLabels: c ?? e.length <= 20,
+    curveType: w ? "monotone" : "linear",
+    withLegend: e.length > 1,
+    legendProps: se,
+    valueFormatter: fe(o, a),
+    withPointLabels: l ?? t.length <= 20,
     tooltipProps: f ? void 0 : { cursor: !1 },
     styles: {
-      ...ce,
+      ...le,
       legendItemName: { color: P.textColor }
     },
-    ...F,
+    ...A,
     style: v
   };
-  return r ? /* @__PURE__ */ i(Ie, { ...A, type: b ? "stacked" : "default" }) : /* @__PURE__ */ i(Ne, { ...A });
+  return r ? /* @__PURE__ */ i(Ie, { ...M, type: S ? "stacked" : "default" }) : /* @__PURE__ */ i(Ne, { ...M });
 }
-function pt({
-  categories: e,
-  series: t,
+function gt({
+  categories: t,
+  series: e,
   height: n = 240,
   stacked: r,
-  horizontal: a,
-  normalized: o,
-  valueSuffix: c,
+  horizontal: o,
+  normalized: a,
+  valueSuffix: l,
   valuePrefix: f,
   showValues: d,
-  beginAtZero: l,
+  beginAtZero: c,
   yMin: u,
   yMax: m,
   referenceLines: v,
   style: h,
-  extra: k
+  extra: b
 }) {
-  const L = j(), T = de(), P = ue(e, t), M = o ? "percent" : r ? "stacked" : "default", $ = pe({
-    beginAtZero: l,
+  var A;
+  const w = j(), L = ce(), P = je(
+    de(t, e),
+    e,
+    w
+  ), B = a ? "percent" : r ? "stacked" : "default", $ = he({
+    beginAtZero: c,
     yMin: u,
     yMax: m,
     referenceLines: v,
-    horizontal: a,
+    horizontal: o,
     stacked: r,
-    normalized: o,
-    valueAxis: k == null ? void 0 : k.valueAxis
-  }), b = !r && !o && Oe(d, t, e);
+    normalized: a,
+    valueAxis: b == null ? void 0 : b.valueAxis
+  }), S = !r && !a && Oe(d, e, t);
   return /* @__PURE__ */ i(
-    Ee,
+    Fe,
     {
       h: n,
       data: P,
       dataKey: "category",
-      series: fe(t, L),
-      type: M,
-      orientation: a ? "vertical" : "horizontal",
-      withLegend: t.length > 1,
-      legendProps: le,
-      valueFormatter: he(c, f),
-      withBarValueLabel: b,
-      ...b ? { valueLabelProps: Xe(T.barLabelColor) } : {},
-      ...a ? qe() : b ? Ve() : {},
+      series: ue(e, w),
+      type: B,
+      orientation: o ? "vertical" : "horizontal",
+      withLegend: e.length > 1,
+      legendProps: se,
+      valueFormatter: fe(l, f),
+      withBarValueLabel: S,
+      ...S ? {
+        valueLabelProps: o ? qe(L.barLabelColor) : pe(L.barLabelColor)
+      } : {},
+      ...o ? Ze((A = b == null ? void 0 : b.categoryAxis) == null ? void 0 : A.width, S) : S ? Je() : {},
       styles: {
-        ...ce,
-        legendItemName: { color: T.textColor }
+        ...le,
+        legendItemName: { color: L.textColor }
       },
       ...$,
       style: h
     }
   );
 }
-const Ye = 180, Ze = 540;
-function Je(e, t) {
-  if (t <= 0)
+const Ue = 180, Qe = 540;
+function et(t, e) {
+  if (e <= 0)
     return "0%";
-  const n = e / t * 100;
+  const n = t / e * 100;
   return n < 10 && Math.abs(n - Math.round(n)) > 0.05 ? `${n.toFixed(1)}%` : `${Math.round(n)}%`;
 }
-function Ue(e) {
-  return Math.max(28, Math.round(e * 0.22));
+function tt(t) {
+  return Math.max(28, Math.round(t * 0.22));
 }
-function Qe(e) {
-  return e.map((t) => ({
-    dataKey: t.name,
-    value: t.name,
-    color: t.color,
+function nt(t) {
+  return t.map((e) => ({
+    dataKey: e.name,
+    value: e.name,
+    color: e.color,
     type: "circle"
   }));
 }
-function et(e, t) {
-  return e.map((n) => ({
+function rt(t, e) {
+  return t.map((n) => ({
     name: n.name,
     color: n.color,
-    label: `${n.name} ${Je(n.value, t)}`
+    label: `${n.name} ${et(n.value, e)}`
   }));
 }
-function tt({
-  total: e,
-  family: t,
+function ot({
+  total: t,
+  family: e,
   primary: n,
   subtitle: r
 }) {
@@ -275,48 +297,48 @@ function tt({
       y: "50%",
       textAnchor: "middle",
       dominantBaseline: "central",
-      fontFamily: t,
+      fontFamily: e,
       children: [
-        /* @__PURE__ */ i("tspan", { x: "50%", dy: "-0.4em", fontSize: 20, fontWeight: 600, fill: n, children: e }),
+        /* @__PURE__ */ i("tspan", { x: "50%", dy: "-0.4em", fontSize: 20, fontWeight: 600, fill: n, children: t }),
         /* @__PURE__ */ i("tspan", { x: "50%", dy: "1.55em", fontSize: 16, fontWeight: 500, fill: r, children: "Total" })
       ]
     }
   );
 }
-function yt({ data: e, size: t = 200, donut: n, style: r }) {
-  const [a, o] = D(null), c = g(), f = j(), d = e.map((h, k) => ({
+function xt({ data: t, size: e = 200, donut: n, style: r }) {
+  const [o, a] = E(null), l = g(), f = j(), d = t.map((h, b) => ({
     name: h.label,
     value: h.value,
-    color: f(h.tone, k)
-  })), l = d.reduce((h, k) => h + k.value, 0), u = {
-    startAngle: Ye,
-    endAngle: Ze
+    color: f(h.tone, b)
+  })), c = d.reduce((h, b) => h + b.value, 0), u = {
+    startAngle: Ue,
+    endAngle: Qe
   }, m = (h) => ({
-    opacity: a === null || a === h ? 1 : 0.35
+    opacity: o === null || o === h ? 1 : 0.35
   }), v = n ? /* @__PURE__ */ i(
-    ze,
+    Re,
     {
       data: d,
-      size: t,
-      thickness: Ue(t),
+      size: e,
+      thickness: tt(e),
       withTooltip: !0,
       cellProps: (h) => m(h.name),
       ...u,
       children: /* @__PURE__ */ i(
-        tt,
+        ot,
         {
-          total: l,
-          family: c.typography.fontFamily,
-          primary: c.text.primary,
-          subtitle: c.text.secondary
+          total: c,
+          family: l.typography.fontFamily,
+          primary: l.text.primary,
+          subtitle: l.text.secondary
         }
       )
     }
   ) : /* @__PURE__ */ i(
-    Re,
+    _e,
     {
       data: d,
-      size: t,
+      size: e,
       withTooltip: !0,
       withLabelsLine: !1,
       cellProps: (h) => m(h.name),
@@ -339,8 +361,8 @@ function yt({ data: e, size: t = 200, donut: n, style: r }) {
           {
             style: {
               width: "100%",
-              height: t,
-              minHeight: t,
+              height: e,
+              minHeight: e,
               display: "flex",
               alignItems: "center",
               justifyContent: "center"
@@ -349,23 +371,23 @@ function yt({ data: e, size: t = 200, donut: n, style: r }) {
           }
         ),
         /* @__PURE__ */ i(
-          _e,
+          ze,
           {
-            payload: Qe(d),
-            series: et(d, l),
+            payload: nt(d),
+            series: rt(d, c),
             legendPosition: "bottom",
             centered: !0,
-            onHighlight: o,
+            onHighlight: a,
             mt: "sm",
             w: "100%",
             styles: {
               legend: {
                 justifyContent: "center",
                 gap: 12,
-                color: c.text.primary
+                color: l.text.primary
               },
               legendItemName: {
-                color: c.text.primary
+                color: l.text.primary
               }
             }
           }
@@ -374,69 +396,69 @@ function yt({ data: e, size: t = 200, donut: n, style: r }) {
     }
   );
 }
-function mt(e) {
+function vt(t) {
   const {
-    nodes: t,
+    nodes: e,
     edges: n,
     direction: r = "vertical",
-    nodeWidth: a = 160,
-    nodeHeight: o = 40,
-    rankGap: c = 64,
+    nodeWidth: o = 160,
+    nodeHeight: a = 40,
+    rankGap: l = 64,
     nodeGap: f = 48,
     padding: d = 24
-  } = e, l = t.map((s) => s.id), u = new Set(l), m = /* @__PURE__ */ new Map();
-  for (const s of l) m.set(s, []);
+  } = t, c = e.map((s) => s.id), u = new Set(c), m = /* @__PURE__ */ new Map();
+  for (const s of c) m.set(s, []);
   for (const s of n)
     u.has(s.from) && u.has(s.to) && m.get(s.from).push(s.to);
-  const v = 0, h = 1, k = 2, L = new Map(l.map((s) => [s, v])), T = /* @__PURE__ */ new Set(), P = (s, p) => `${s}\0${p}`, M = (s) => {
-    L.set(s, h);
+  const v = 0, h = 1, b = 2, w = new Map(c.map((s) => [s, v])), L = /* @__PURE__ */ new Set(), P = (s, p) => `${s}\0${p}`, B = (s) => {
+    w.set(s, h);
     for (const p of m.get(s) ?? []) {
-      const x = L.get(p);
-      x === h ? T.add(P(s, p)) : x === v && M(p);
+      const x = w.get(p);
+      x === h ? L.add(P(s, p)) : x === v && B(p);
     }
-    L.set(s, k);
+    w.set(s, b);
   };
-  for (const s of l) L.get(s) === v && M(s);
+  for (const s of c) w.get(s) === v && B(s);
   const $ = n.filter(
-    (s) => u.has(s.from) && u.has(s.to) && !T.has(P(s.from, s.to))
-  ), b = new Map(l.map((s) => [s, 0])), F = new Map(l.map((s) => [s, []]));
+    (s) => u.has(s.from) && u.has(s.to) && !L.has(P(s.from, s.to))
+  ), S = new Map(c.map((s) => [s, 0])), A = new Map(c.map((s) => [s, []]));
   for (const s of $)
-    F.get(s.from).push(s.to), b.set(s.to, (b.get(s.to) ?? 0) + 1);
-  const A = new Map(l.map((s) => [s, 0])), z = l.filter((s) => (b.get(s) ?? 0) === 0);
-  for (; z.length > 0; ) {
-    const s = z.shift(), p = A.get(s);
-    for (const x of F.get(s))
-      A.set(x, Math.max(A.get(x), p + 1)), b.set(x, b.get(x) - 1), b.get(x) === 0 && z.push(x);
+    A.get(s.from).push(s.to), S.set(s.to, (S.get(s.to) ?? 0) + 1);
+  const M = new Map(c.map((s) => [s, 0])), R = c.filter((s) => (S.get(s) ?? 0) === 0);
+  for (; R.length > 0; ) {
+    const s = R.shift(), p = M.get(s);
+    for (const x of A.get(s))
+      M.set(x, Math.max(M.get(x), p + 1)), S.set(x, S.get(x) - 1), S.get(x) === 0 && R.push(x);
   }
-  const B = /* @__PURE__ */ new Map();
-  for (const s of l) {
-    const p = A.get(s);
-    B.has(p) || B.set(p, []), B.get(p).push(s);
+  const D = /* @__PURE__ */ new Map();
+  for (const s of c) {
+    const p = M.get(s);
+    D.has(p) || D.set(p, []), D.get(p).push(s);
   }
-  const E = [...B.keys()].sort((s, p) => s - p), S = r === "vertical", q = (s) => s * (S ? a : o) + Math.max(0, s - 1) * f, V = Math.max(
+  const F = [...D.keys()].sort((s, p) => s - p), k = r === "vertical", X = (s) => s * (k ? o : a) + Math.max(0, s - 1) * f, Y = Math.max(
     0,
-    ...E.map((s) => q(B.get(s).length))
-  ), I = /* @__PURE__ */ new Map(), Y = [];
-  E.forEach((s, p) => {
-    const x = B.get(s), R = q(x.length), _ = d + (V - R) / 2, N = d + p * ((S ? o : a) + c);
+    ...F.map((s) => X(D.get(s).length))
+  ), I = /* @__PURE__ */ new Map(), q = [];
+  F.forEach((s, p) => {
+    const x = D.get(s), _ = X(x.length), z = d + (Y - _) / 2, N = d + p * ((k ? a : o) + l);
     x.forEach((Q, ee) => {
-      const te = _ + ee * ((S ? a : o) + f), ge = S ? te : N, xe = S ? N : te;
+      const te = z + ee * ((k ? o : a) + f), ge = k ? te : N, xe = k ? N : te;
       I.set(Q, { id: Q, x: ge, y: xe, rank: s, order: ee });
-    }), Y.push({
+    }), q.push({
       rank: s,
-      x: S ? _ : N,
-      y: S ? N : _,
-      width: S ? R : a,
-      height: S ? o : R,
+      x: k ? z : N,
+      y: k ? N : z,
+      width: k ? _ : o,
+      height: k ? a : _,
       nodeIds: x
     });
   });
-  const Z = (s, p) => s ? S ? {
-    x: s.x + a / 2,
-    y: p === "source" ? s.y + o : s.y
+  const Z = (s, p) => s ? k ? {
+    x: s.x + o / 2,
+    y: p === "source" ? s.y + a : s.y
   } : {
-    x: p === "source" ? s.x + a : s.x,
-    y: s.y + o / 2
+    x: p === "source" ? s.x + o : s.x,
+    y: s.y + a / 2
   } : { x: 0, y: 0 }, me = n.filter((s) => u.has(s.from) && u.has(s.to)).map((s) => {
     const p = Z(I.get(s.from), "source"), x = Z(I.get(s.to), "target");
     return {
@@ -446,24 +468,24 @@ function mt(e) {
       sourceY: p.y,
       targetX: x.x,
       targetY: x.y,
-      isBackEdge: T.has(P(s.from, s.to))
+      isBackEdge: L.has(P(s.from, s.to))
     };
-  }), J = d * 2 + E.length * (S ? o : a) + Math.max(0, E.length - 1) * c, U = d * 2 + V;
+  }), J = d * 2 + F.length * (k ? a : o) + Math.max(0, F.length - 1) * l, U = d * 2 + Y;
   return {
     nodes: [...I.values()],
     edges: me,
-    ranks: Y,
+    ranks: q,
     direction: r,
-    width: S ? U : J,
-    height: S ? J : U
+    width: k ? U : J,
+    height: k ? J : U
   };
 }
-function gt({
-  additions: e = 0,
-  deletions: t = 0,
+function bt({
+  additions: t = 0,
+  deletions: e = 0,
   style: n
 }) {
-  return e === 0 && t === 0 ? null : /* @__PURE__ */ y(
+  return t === 0 && e === 0 ? null : /* @__PURE__ */ y(
     "span",
     {
       style: {
@@ -475,31 +497,31 @@ function gt({
         ...n
       },
       children: [
-        e > 0 && /* @__PURE__ */ y("span", { style: { color: w.added }, children: [
+        t > 0 && /* @__PURE__ */ y("span", { style: { color: C.added }, children: [
           "+",
-          e
+          t
         ] }),
-        t > 0 && /* @__PURE__ */ y("span", { style: { color: w.deleted }, children: [
+        e > 0 && /* @__PURE__ */ y("span", { style: { color: C.deleted }, children: [
           "-",
-          t
+          e
         ] })
       ]
     }
   );
 }
-const nt = {
+const at = {
   added: "+",
   removed: "-",
   unchanged: " "
 };
-function xt({
-  lines: e,
-  showLineNumbers: t = !0,
+function St({
+  lines: t,
+  showLineNumbers: e = !0,
   coloredLineNumbers: n = !0,
   showAccentStrip: r = !0,
-  style: a
+  style: o
 }) {
-  const o = g(), c = (l) => l === "added" ? o.diff.insertedLine : l === "removed" ? o.diff.removedLine : "transparent", f = (l) => l === "added" ? o.diff.stripAdded : l === "removed" ? o.diff.stripRemoved : "transparent", d = (l) => n && l === "added" ? w.added : n && l === "removed" ? w.deleted : o.text.tertiary;
+  const a = g(), l = (c) => c === "added" ? a.diff.insertedLine : c === "removed" ? a.diff.removedLine : "transparent", f = (c) => c === "added" ? a.diff.stripAdded : c === "removed" ? a.diff.stripRemoved : "transparent", d = (c) => n && c === "added" ? C.added : n && c === "removed" ? C.deleted : a.text.tertiary;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -507,21 +529,21 @@ function xt({
         fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace',
         fontSize: 12.5,
         lineHeight: "18px",
-        color: o.text.primary,
+        color: a.text.primary,
         overflowX: "auto",
-        ...a
+        ...o
       },
-      children: e.map((l, u) => /* @__PURE__ */ y(
+      children: t.map((c, u) => /* @__PURE__ */ y(
         "div",
         {
           style: {
             display: "flex",
             alignItems: "stretch",
-            background: c(l.type),
-            borderLeft: r ? `3px solid ${f(l.type)}` : void 0
+            background: l(c.type),
+            borderLeft: r ? `3px solid ${f(c.type)}` : void 0
           },
           children: [
-            t && /* @__PURE__ */ i(
+            e && /* @__PURE__ */ i(
               "span",
               {
                 style: {
@@ -530,9 +552,9 @@ function xt({
                   textAlign: "right",
                   paddingRight: 10,
                   userSelect: "none",
-                  color: d(l.type)
+                  color: d(c.type)
                 },
-                children: l.lineNumber ?? ""
+                children: c.lineNumber ?? ""
               }
             ),
             /* @__PURE__ */ i(
@@ -543,9 +565,9 @@ function xt({
                   width: 14,
                   textAlign: "center",
                   userSelect: "none",
-                  color: d(l.type)
+                  color: d(c.type)
                 },
-                children: nt[l.type]
+                children: at[c.type]
               }
             ),
             /* @__PURE__ */ i(
@@ -557,7 +579,7 @@ function xt({
                   whiteSpace: "pre",
                   fontFamily: "inherit"
                 },
-                children: l.content
+                children: c.content
               }
             )
           ]
@@ -567,8 +589,8 @@ function xt({
     }
   );
 }
-function rt({ status: e }) {
-  const t = g(), n = e === "completed" ? w.success : e === "in_progress" ? t.accent.primary : e === "cancelled" ? w.danger : t.text.tertiary;
+function it({ status: t }) {
+  const e = g(), n = t === "completed" ? C.success : t === "in_progress" ? e.accent.primary : t === "cancelled" ? C.danger : e.text.tertiary;
   return /* @__PURE__ */ y(
     "svg",
     {
@@ -580,7 +602,7 @@ function rt({ status: e }) {
       "aria-hidden": !0,
       children: [
         /* @__PURE__ */ i("circle", { cx: 7, cy: 7, r: 6, stroke: n, strokeWidth: 1.4 }),
-        e === "completed" && /* @__PURE__ */ i(
+        t === "completed" && /* @__PURE__ */ i(
           "path",
           {
             d: "M4 7.2l2 2 4-4.4",
@@ -590,8 +612,8 @@ function rt({ status: e }) {
             strokeLinejoin: "round"
           }
         ),
-        e === "in_progress" && /* @__PURE__ */ i("circle", { cx: 7, cy: 7, r: 3, fill: n }),
-        e === "cancelled" && /* @__PURE__ */ i(
+        t === "in_progress" && /* @__PURE__ */ i("circle", { cx: 7, cy: 7, r: 3, fill: n }),
+        t === "cancelled" && /* @__PURE__ */ i(
           "path",
           {
             d: "M4.8 4.8l4.4 4.4M9.2 4.8l-4.4 4.4",
@@ -604,20 +626,20 @@ function rt({ status: e }) {
     }
   );
 }
-function ot({
-  todos: e,
-  dimmedTodoIds: t,
+function st({
+  todos: t,
+  dimmedTodoIds: e,
   onTodoClick: n,
   style: r
 }) {
-  const a = g();
-  return e.length === 0 ? null : /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", ...r }, children: e.map((o) => {
-    const c = t == null ? void 0 : t.has(o.id);
+  const o = g();
+  return t.length === 0 ? null : /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", ...r }, children: t.map((a) => {
+    const l = e == null ? void 0 : e.has(a.id);
     return /* @__PURE__ */ y(
       "button",
       {
         type: "button",
-        onClick: () => n == null ? void 0 : n(o),
+        onClick: () => n == null ? void 0 : n(a),
         style: {
           display: "flex",
           gap: 8,
@@ -628,64 +650,64 @@ function ot({
           background: "transparent",
           border: "none",
           cursor: n ? "pointer" : "default",
-          color: a.text.primary,
+          color: o.text.primary,
           fontSize: 14,
           lineHeight: "20px",
-          opacity: c ? 0.45 : 1
+          opacity: l ? 0.45 : 1
         },
         children: [
-          /* @__PURE__ */ i(rt, { status: o.status }),
+          /* @__PURE__ */ i(it, { status: a.status }),
           /* @__PURE__ */ i(
             "span",
             {
               style: {
-                textDecoration: o.status === "cancelled" ? "line-through" : void 0,
-                color: o.status === "cancelled" ? a.text.tertiary : void 0
+                textDecoration: a.status === "cancelled" ? "line-through" : void 0,
+                color: a.status === "cancelled" ? o.text.tertiary : void 0
               },
-              children: o.content
+              children: a.content
             }
           )
         ]
       },
-      o.id
+      a.id
     );
   }) });
 }
-function vt({
-  todos: e,
-  dimmedTodoIds: t,
+function kt({
+  todos: t,
+  dimmedTodoIds: e,
   defaultExpanded: n = !1,
   onTodoClick: r,
-  style: a
+  style: o
 }) {
-  const o = g(), [c, f] = D(n);
-  if (e.length === 0) return null;
-  const d = e.filter((l) => l.status === "completed").length;
+  const a = g(), [l, f] = E(n);
+  if (t.length === 0) return null;
+  const d = t.filter((c) => c.status === "completed").length;
   return /* @__PURE__ */ y(
     "div",
     {
       style: {
-        border: `1px solid ${o.stroke.primary}`,
+        border: `1px solid ${a.stroke.primary}`,
         borderRadius: 6,
         overflow: "hidden",
-        ...a
+        ...o
       },
       children: [
         /* @__PURE__ */ y(
           "button",
           {
             type: "button",
-            onClick: () => f((l) => !l),
+            onClick: () => f((c) => !c),
             style: {
               display: "flex",
               alignItems: "center",
               gap: 8,
               width: "100%",
               padding: "6px 10px",
-              background: o.fill.secondary,
+              background: a.fill.secondary,
               border: "none",
               cursor: "pointer",
-              color: o.text.secondary,
+              color: a.text.secondary,
               fontSize: 12,
               fontWeight: 600
             },
@@ -698,7 +720,7 @@ function vt({
                   viewBox: "0 0 12 12",
                   fill: "none",
                   style: {
-                    transform: c ? "rotate(90deg)" : "none",
+                    transform: l ? "rotate(90deg)" : "none",
                     transition: "transform 120ms"
                   },
                   "aria-hidden": !0,
@@ -719,17 +741,17 @@ function vt({
               /* @__PURE__ */ y("span", { children: [
                 d,
                 " of ",
-                e.length,
+                t.length,
                 " Done"
               ] })
             ]
           }
         ),
-        c && /* @__PURE__ */ i("div", { style: { padding: 6 }, children: /* @__PURE__ */ i(
-          ot,
+        l && /* @__PURE__ */ i("div", { style: { padding: 6 }, children: /* @__PURE__ */ i(
+          st,
           {
-            todos: e,
-            dimmedTodoIds: t,
+            todos: t,
+            dimmedTodoIds: e,
             onTodoClick: r
           }
         ) })
@@ -737,19 +759,19 @@ function vt({
     }
   );
 }
-function bt(e, t) {
-  const n = `canvas:${e}`, [r, a] = D(() => {
-    if (typeof localStorage > "u") return t;
+function Ct(t, e) {
+  const n = `canvas:${t}`, [r, o] = E(() => {
+    if (typeof localStorage > "u") return e;
     try {
-      const c = localStorage.getItem(n);
-      return c === null ? t : JSON.parse(c);
+      const l = localStorage.getItem(n);
+      return l === null ? e : JSON.parse(l);
     } catch {
-      return t;
+      return e;
     }
-  }), o = G(
-    (c) => {
-      a((f) => {
-        const d = typeof c == "function" ? c(f) : c;
+  }), a = G(
+    (l) => {
+      o((f) => {
+        const d = typeof l == "function" ? l(f) : l;
         try {
           localStorage == null || localStorage.setItem(n, JSON.stringify(d));
         } catch {
@@ -759,76 +781,76 @@ function bt(e, t) {
     },
     [n]
   );
-  return [r, o];
+  return [r, a];
 }
-function St() {
-  return G((e) => {
+function wt() {
+  return G((t) => {
   }, []);
 }
-function kt(e, t) {
-  return { ...e, ...t };
+function Lt(t, e) {
+  return { ...t, ...e };
 }
-function K(e, t, n) {
-  const r = e.typography[t];
+function K(t, e, n) {
+  const r = t.typography[e];
   return {
-    fontFamily: e.typography.fontFamily,
+    fontFamily: t.typography.fontFamily,
     fontSize: r.fontSize,
     lineHeight: r.lineHeight,
     fontWeight: r.fontWeight,
-    color: e.text.primary,
+    color: t.text.primary,
     margin: 0,
     ...n
   };
 }
-function wt({ children: e, style: t }) {
+function Tt({ children: t, style: e }) {
   const n = g();
-  return /* @__PURE__ */ i(W, { order: 1, style: K(n, "h1", t), children: e });
+  return /* @__PURE__ */ i(W, { order: 1, style: K(n, "h1", e), children: t });
 }
-function Ct({ children: e, style: t }) {
+function Pt({ children: t, style: e }) {
   const n = g();
-  return /* @__PURE__ */ i(W, { order: 2, style: K(n, "h2", t), children: e });
+  return /* @__PURE__ */ i(W, { order: 2, style: K(n, "h2", e), children: t });
 }
-function Lt({ children: e, style: t }) {
+function At({ children: t, style: e }) {
   const n = g();
-  return /* @__PURE__ */ i(W, { order: 3, style: K(n, "h3", t), children: e });
+  return /* @__PURE__ */ i(W, { order: 3, style: K(n, "h3", e), children: t });
 }
-const at = {
+const lt = {
   normal: 400,
   medium: 500,
   semibold: 600,
   bold: 700
-}, oe = ie(!1);
-function Tt({
-  children: e,
-  tone: t = "primary",
+}, re = ae(!1);
+function Mt({
+  children: t,
+  tone: e = "primary",
   size: n = "body",
   as: r = "p",
-  weight: a = "normal",
-  italic: o,
-  truncate: c,
+  weight: o = "normal",
+  italic: a,
+  truncate: l,
   style: f
 }) {
-  const d = g(), u = O(oe) && r === "p" ? "span" : r, m = r === "p";
-  return /* @__PURE__ */ i(oe.Provider, { value: !0, children: /* @__PURE__ */ i(
+  const d = g(), u = O(re) && r === "p" ? "span" : r, m = r === "p";
+  return /* @__PURE__ */ i(re.Provider, { value: !0, children: /* @__PURE__ */ i(
     H,
     {
       component: u,
       size: n === "small" ? "xs" : "sm",
-      fw: at[a],
-      c: t === "primary" ? void 0 : d.text[t],
-      truncate: c,
+      fw: lt[o],
+      c: e === "primary" ? void 0 : d.text[e],
+      truncate: l,
       style: {
-        fontStyle: o ? "italic" : void 0,
-        ...t === "primary" ? { color: d.text.primary } : void 0,
+        fontStyle: a ? "italic" : void 0,
+        ...e === "primary" ? { color: d.text.primary } : void 0,
         ...m && u === "span" ? { display: "block" } : void 0,
         fontFamily: d.typography.fontFamily,
         ...f
       },
-      children: e
+      children: t
     }
   ) });
 }
-function Pt({ children: e, style: t }) {
+function Bt({ children: t, style: e }) {
   const n = g();
   return /* @__PURE__ */ i(
     "code",
@@ -840,117 +862,117 @@ function Pt({ children: e, style: t }) {
         background: n.fill.secondary,
         borderRadius: n.radius.sm,
         padding: "1px 4px",
-        ...t
+        ...e
       },
-      children: e
+      children: t
     }
   );
 }
-function At({ children: e, href: t, style: n }) {
+function Dt({ children: t, href: e, style: n }) {
   const r = g();
   return /* @__PURE__ */ i(
     "a",
     {
-      href: t,
+      href: e,
       target: "_blank",
       rel: "noreferrer",
       style: { color: r.text.link, ...n },
-      children: e
+      children: t
     }
   );
 }
-function Mt({ children: e, gap: t, style: n }) {
-  return /* @__PURE__ */ i(Me, { gap: t, style: n, children: e });
+function $t({ children: t, gap: e, style: n }) {
+  return /* @__PURE__ */ i(Me, { gap: e, style: n, children: t });
 }
-const ae = {
+const oe = {
   start: "flex-start",
   center: "center",
   end: "flex-end",
   stretch: "stretch",
   "space-between": "space-between"
 };
-function Bt({
-  children: e,
-  gap: t,
+function Et({
+  children: t,
+  gap: e,
   align: n = "center",
   justify: r = "start",
-  wrap: a = !1,
-  style: o
+  wrap: o = !1,
+  style: a
 }) {
   return /* @__PURE__ */ i(
     Pe,
     {
-      gap: t,
-      align: ae[n],
-      justify: ae[r],
-      wrap: a ? "wrap" : "nowrap",
-      style: o,
-      children: e
+      gap: e,
+      align: oe[n],
+      justify: oe[r],
+      wrap: o ? "wrap" : "nowrap",
+      style: a,
+      children: t
     }
   );
 }
-function $t() {
+function Ft() {
   return /* @__PURE__ */ i("div", { style: { flex: 1 } });
 }
-function Dt({ children: e, columns: t, gap: n = 16, align: r, style: a }) {
-  const o = typeof t == "number" ? `repeat(${t}, minmax(0, 1fr))` : t;
+function It({ children: t, columns: e, gap: n = 16, align: r, style: o }) {
+  const a = typeof e == "number" ? `repeat(${e}, minmax(0, 1fr))` : e;
   return /* @__PURE__ */ i(
     "div",
     {
       style: {
         display: "grid",
-        gridTemplateColumns: o,
+        gridTemplateColumns: a,
         gap: n,
         alignItems: r,
-        ...a
+        ...o
       },
-      children: e
+      children: t
     }
   );
 }
-function Ft({ style: e }) {
-  return /* @__PURE__ */ i(Ce, { style: e });
+function Nt({ style: t }) {
+  return /* @__PURE__ */ i(we, { style: t });
 }
-const X = ie({
+const V = ae({
   collapsible: !1,
   open: !0,
   toggle: () => {
   }
 });
-function Et({
-  children: e,
-  variant: t = "default",
+function Rt({
+  children: t,
+  variant: e = "default",
   collapsible: n = !1,
   defaultOpen: r = !0,
-  open: a,
-  onOpenChange: o,
-  style: c
+  open: o,
+  onOpenChange: a,
+  style: l
 }) {
-  const f = g(), [d, l] = D(r), u = a ?? d, m = G(() => {
+  const f = g(), [d, c] = E(r), u = o ?? d, m = G(() => {
     const v = !u;
-    a === void 0 && l(v), o == null || o(v);
-  }, [u, a, o]);
+    o === void 0 && c(v), a == null || a(v);
+  }, [u, o, a]);
   return /* @__PURE__ */ i(
     ke,
     {
-      withBorder: t !== "borderless",
+      withBorder: e !== "borderless",
       radius: f.radius.md,
       padding: 0,
       style: {
         background: f.bg.elevated,
         borderColor: f.stroke.secondary,
-        ...c
+        ...l
       },
-      children: /* @__PURE__ */ i(X.Provider, { value: { collapsible: n, open: u, toggle: m }, children: e })
+      children: /* @__PURE__ */ i(V.Provider, { value: { collapsible: n, open: u, toggle: m }, children: t })
     }
   );
 }
-function It({ children: e, trailing: t, style: n }) {
-  const r = g(), { collapsible: a, open: o, toggle: c } = O(X);
+function _t({ children: t, trailing: e, style: n }) {
+  const r = g(), { collapsible: o, open: a, toggle: l } = O(V);
   return /* @__PURE__ */ y(
     "div",
     {
-      onClick: a ? c : void 0,
+      onClick: o ? l : void 0,
       style: {
         display: "flex",
         alignItems: "center",
@@ -962,25 +984,25 @@ function It({ children: e, trailing: t, style: n }) {
         fontWeight: r.typography.h3.fontWeight,
         color: r.text.primary,
         fontFamily: r.typography.fontFamily,
-        cursor: a ? "pointer" : void 0,
-        userSelect: a ? "none" : void 0,
+        cursor: o ? "pointer" : void 0,
+        userSelect: o ? "none" : void 0,
         ...n
       },
       children: [
         /* @__PURE__ */ y("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-          a && /* @__PURE__ */ i(ye, { expanded: o }),
-          e
+          o && /* @__PURE__ */ i(ye, { expanded: a }),
+          t
         ] }),
-        t != null && /* @__PURE__ */ i("span", { children: t })
+        e != null && /* @__PURE__ */ i("span", { children: e })
       ]
     }
   );
 }
-function Nt({ children: e, style: t }) {
-  const { collapsible: n, open: r } = O(X);
-  return n && !r ? null : /* @__PURE__ */ i("div", { style: { padding: 14, ...t }, children: e });
+function zt({ children: t, style: e }) {
+  const { collapsible: n, open: r } = O(V);
+  return n && !r ? null : /* @__PURE__ */ i("div", { style: { padding: 14, ...e }, children: t });
 }
-function ye({ expanded: e }) {
+function ye({ expanded: t }) {
   return /* @__PURE__ */ i(
     "svg",
     {
@@ -989,7 +1011,7 @@ function ye({ expanded: e }) {
       viewBox: "0 0 12 12",
       fill: "none",
       style: {
-        transform: e ? "rotate(90deg)" : "none",
+        transform: t ? "rotate(90deg)" : "none",
         transition: "transform 120ms"
       },
       "aria-hidden": !0,
@@ -1006,8 +1028,8 @@ function ye({ expanded: e }) {
     }
   );
 }
-function zt({ value: e, label: t, tone: n, style: r }) {
-  const a = g();
+function Ht({ value: t, label: e, tone: n, style: r }) {
+  const o = g();
   return /* @__PURE__ */ y("div", { style: r, children: [
     /* @__PURE__ */ i(
       H,
@@ -1016,10 +1038,10 @@ function zt({ value: e, label: t, tone: n, style: r }) {
         fw: 700,
         lh: 1.2,
         style: {
-          color: n ? w[n] : a.text.primary,
-          fontFamily: a.typography.fontFamily
+          color: n ? C[n] : o.text.primary,
+          fontFamily: o.typography.fontFamily
         },
-        children: e
+        children: t
       }
     ),
     /* @__PURE__ */ i(
@@ -1027,103 +1049,103 @@ function zt({ value: e, label: t, tone: n, style: r }) {
       {
         fz: 12,
         style: {
-          color: a.text.tertiary,
-          fontFamily: a.typography.fontFamily
+          color: o.text.tertiary,
+          fontFamily: o.typography.fontFamily
         },
-        children: t
+        children: e
       }
     )
   ] });
 }
-function Rt({
-  children: e,
-  active: t,
+function Wt({
+  children: t,
+  active: e,
   tone: n = "neutral",
   size: r = "md",
-  leadingContent: a,
-  keyboardHint: o,
-  title: c,
+  leadingContent: o,
+  keyboardHint: a,
+  title: l,
   style: f,
   onClick: d
 }) {
   return /* @__PURE__ */ i(
     Te,
     {
-      color: se[n],
-      variant: t ? "filled" : "light",
+      color: ie[n],
+      variant: e ? "filled" : "light",
       size: r === "sm" ? "sm" : "md",
-      leftSection: a,
-      rightSection: o,
-      title: c,
+      leftSection: o,
+      rightSection: a,
+      title: l,
       onClick: d,
       style: {
         cursor: d ? "pointer" : void 0,
         textTransform: "none",
         ...f
       },
-      children: e
+      children: t
     }
   );
 }
-function _t({
-  children: e,
-  tone: t = "neutral",
+function Gt({
+  children: t,
+  tone: e = "neutral",
   title: n,
   icon: r,
-  style: a
+  style: o
 }) {
   return /* @__PURE__ */ i(
     Se,
     {
-      color: se[t],
+      color: ie[e],
       title: n,
       icon: r,
       variant: "light",
-      style: a,
-      children: e
+      style: o,
+      children: t
     }
   );
 }
-const it = {
+const ct = {
   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 Ht({
-  headers: e,
-  rows: t,
+function Ot({
+  headers: t,
+  rows: e,
   columnAlign: n,
   rowTone: r,
-  framed: a = !0,
-  striped: o,
-  stickyHeader: c,
+  framed: o = !0,
+  striped: a,
+  stickyHeader: l,
   style: f,
   emptyMessage: d
 }) {
   return /* @__PURE__ */ y(
-    C,
+    T,
     {
-      withTableBorder: a,
+      withTableBorder: o,
       withColumnBorders: !1,
-      striped: o,
-      stickyHeader: c,
+      striped: a,
+      stickyHeader: l,
       highlightOnHover: !0,
       style: f,
       children: [
-        /* @__PURE__ */ i(C.Thead, { children: /* @__PURE__ */ i(C.Tr, { children: e.map((l, u) => /* @__PURE__ */ i(C.Th, { ta: (n == null ? void 0 : n[u]) ?? "left", children: l }, u)) }) }),
-        /* @__PURE__ */ i(C.Tbody, { children: t.length === 0 ? /* @__PURE__ */ i(C.Tr, { children: /* @__PURE__ */ i(C.Td, { colSpan: e.length, ta: "center", c: "dimmed", children: d ?? "No data" }) }) : t.map((l, u) => {
+        /* @__PURE__ */ i(T.Thead, { children: /* @__PURE__ */ i(T.Tr, { children: t.map((c, u) => /* @__PURE__ */ i(T.Th, { ta: (n == null ? void 0 : n[u]) ?? "left", children: c }, u)) }) }),
+        /* @__PURE__ */ i(T.Tbody, { children: e.length === 0 ? /* @__PURE__ */ i(T.Tr, { children: /* @__PURE__ */ i(T.Td, { colSpan: t.length, ta: "center", c: "dimmed", children: d ?? "No data" }) }) : e.map((c, u) => {
           const m = r == null ? void 0 : r[u];
           return /* @__PURE__ */ i(
-            C.Tr,
+            T.Tr,
             {
-              style: m ? { background: it[m] } : void 0,
-              children: e.map((v, h) => /* @__PURE__ */ i(
-                C.Td,
+              style: m ? { background: ct[m] } : void 0,
+              children: t.map((v, h) => /* @__PURE__ */ i(
+                T.Td,
                 {
                   ta: (n == null ? void 0 : n[h]) ?? "left",
-                  children: l[h]
+                  children: c[h]
                 },
                 h
               ))
@@ -1135,159 +1157,159 @@ function Ht({
     }
   );
 }
-const st = {
+const dt = {
   primary: "filled",
   secondary: "default",
   ghost: "subtle"
 };
-function Wt({
-  children: e,
-  variant: t = "secondary",
+function jt({
+  children: t,
+  variant: e = "secondary",
   disabled: n,
   type: r = "button",
-  style: a,
-  onClick: o
+  style: o,
+  onClick: a
 }) {
   return /* @__PURE__ */ i(
     be,
     {
-      variant: st[t],
-      color: t === "primary" ? "accent" : void 0,
+      variant: dt[e],
+      color: e === "primary" ? "accent" : void 0,
       size: "xs",
       disabled: n,
       type: r,
-      onClick: o,
-      style: a,
-      children: e
+      onClick: a,
+      style: o,
+      children: t
     }
   );
 }
-function Gt({
-  children: e,
-  onClick: t,
+function Kt({
+  children: t,
+  onClick: e,
   disabled: n,
   title: r,
-  variant: a = "default",
-  size: o = "md",
-  style: c
+  variant: o = "default",
+  size: a = "md",
+  style: l
 }) {
   return /* @__PURE__ */ i(
     Le,
     {
-      variant: a === "circle" ? "light" : "subtle",
-      radius: a === "circle" ? "xl" : "sm",
-      size: o === "sm" ? "sm" : "md",
+      variant: o === "circle" ? "light" : "subtle",
+      radius: o === "circle" ? "xl" : "sm",
+      size: a === "sm" ? "sm" : "md",
       color: "gray",
       disabled: n,
       title: r,
       "aria-label": r,
-      onClick: t,
-      style: c,
-      children: e
+      onClick: e,
+      style: l,
+      children: t
     }
   );
 }
-function Ot({
-  value: e,
-  onChange: t,
+function Vt({
+  value: t,
+  onChange: e,
   options: n,
   placeholder: r,
-  disabled: a,
-  style: o
+  disabled: o,
+  style: a
 }) {
   return /* @__PURE__ */ i(
     Ae,
     {
-      value: e,
+      value: t,
       data: n,
       placeholder: r,
-      disabled: a,
+      disabled: o,
       allowDeselect: !1,
-      onChange: (c) => {
-        c !== null && (t == null || t(c));
+      onChange: (l) => {
+        l !== null && (e == null || e(l));
       },
-      style: o
+      style: a
     }
   );
 }
-function jt({
-  checked: e,
-  onChange: t,
+function Xt({
+  checked: t,
+  onChange: e,
   disabled: n,
   label: r,
-  style: a
+  style: o
 }) {
   return /* @__PURE__ */ i(
-    we,
+    Ce,
     {
-      checked: e,
+      checked: t,
       disabled: n,
       label: r,
-      onChange: (o) => t == null ? void 0 : t(o.currentTarget.checked),
-      style: a
+      onChange: (a) => e == null ? void 0 : e(a.currentTarget.checked),
+      style: o
     }
   );
 }
-function Kt({
-  checked: e,
-  onChange: t,
+function Yt({
+  checked: t,
+  onChange: e,
   disabled: n,
   size: r = "sm",
-  style: a
+  style: o
 }) {
   return /* @__PURE__ */ i(
-    De,
+    $e,
     {
-      checked: e,
+      checked: t,
       disabled: n,
       size: r === "sm" ? "sm" : "md",
-      onChange: (o) => t == null ? void 0 : t(o.currentTarget.checked),
-      style: a
+      onChange: (a) => e == null ? void 0 : e(a.currentTarget.checked),
+      style: o
     }
   );
 }
-function Xt({
-  value: e,
-  onChange: t,
+function qt({
+  value: t,
+  onChange: e,
   placeholder: n,
   disabled: r,
-  type: a,
-  style: o
+  type: o,
+  style: a
 }) {
   return /* @__PURE__ */ i(
-    $e,
+    De,
     {
-      value: e,
+      value: t,
       placeholder: n,
       disabled: r,
-      type: a,
-      onChange: (c) => t == null ? void 0 : t(c.currentTarget.value),
-      style: o
+      type: o,
+      onChange: (l) => e == null ? void 0 : e(l.currentTarget.value),
+      style: a
     }
   );
 }
-function qt({
-  value: e,
-  onChange: t,
+function Zt({
+  value: t,
+  onChange: e,
   placeholder: n,
   disabled: r,
-  rows: a = 3,
-  style: o
+  rows: o = 3,
+  style: a
 }) {
   return /* @__PURE__ */ i(
     Be,
     {
-      value: e,
+      value: t,
       placeholder: n,
       disabled: r,
       autosize: !0,
-      minRows: a,
-      onChange: (c) => t == null ? void 0 : t(c.currentTarget.value),
-      style: o
+      minRows: o,
+      onChange: (l) => e == null ? void 0 : e(l.currentTarget.value),
+      style: a
     }
   );
 }
-function Vt({ color: e, style: t }) {
+function Jt({ color: t, style: e }) {
   const n = g();
   return /* @__PURE__ */ i(
     "span",
@@ -1297,25 +1319,25 @@ function Vt({ color: e, style: t }) {
         width: 14,
         height: 14,
         borderRadius: 4,
-        background: n.category[e],
+        background: n.category[t],
         flex: "0 0 auto",
-        ...t
+        ...e
       }
     }
   );
 }
-function Yt({
-  segments: e,
-  total: t,
+function Ut({
+  segments: t,
+  total: e,
   topLeftLabel: n,
   topRightLabel: r,
-  style: a
+  style: o
 }) {
-  const o = g(), c = t > 0 ? t : 1, f = e.reduce(
-    (l, u) => l + (Number.isFinite(u.value) && u.value > 0 ? u.value : 0),
+  const a = g(), l = e > 0 ? e : 1, f = t.reduce(
+    (c, u) => c + (Number.isFinite(u.value) && u.value > 0 ? u.value : 0),
     0
-  ), d = Math.max(0, c - f);
-  return /* @__PURE__ */ y("div", { style: a, children: [
+  ), d = Math.max(0, l - f);
+  return /* @__PURE__ */ y("div", { style: o, children: [
     (n != null || r != null) && /* @__PURE__ */ y(
       "div",
       {
@@ -1323,7 +1345,7 @@ function Yt({
           display: "flex",
           justifyContent: "space-between",
           fontSize: 12,
-          color: o.text.secondary,
+          color: a.text.secondary,
           marginBottom: 6
         },
         children: [
@@ -1333,26 +1355,26 @@ function Yt({
       }
     ),
     /* @__PURE__ */ y("div", { style: { display: "flex", gap: 2, height: 8 }, children: [
-      e.map((l, u) => {
-        const m = Number.isFinite(l.value) && l.value > 0 ? l.value : 0, v = o.category[l.color ?? ne[u % ne.length]];
+      t.map((c, u) => {
+        const m = Number.isFinite(c.value) && c.value > 0 ? c.value : 0, v = a.category[c.color ?? ne[u % ne.length]];
         return /* @__PURE__ */ i(
           "div",
           {
             style: {
-              width: `${m / c * 100}%`,
+              width: `${m / l * 100}%`,
               background: v,
               borderRadius: 3
             }
           },
-          l.id
+          c.id
         );
       }),
       d > 0 && /* @__PURE__ */ i(
         "div",
         {
           style: {
-            width: `${d / c * 100}%`,
-            background: o.fill.tertiary,
+            width: `${d / l * 100}%`,
+            background: a.fill.tertiary,
             borderRadius: 3
           }
         }
@@ -1360,21 +1382,21 @@ function Yt({
     ] })
   ] });
 }
-function Zt({
-  title: e,
-  leading: t,
+function Qt({
+  title: t,
+  leading: e,
   count: n,
   trailing: r,
-  children: a,
-  defaultOpen: o = !1,
-  style: c
+  children: o,
+  defaultOpen: a = !1,
+  style: l
 }) {
-  const f = g(), [d, l] = D(o);
-  return /* @__PURE__ */ y("div", { style: c, children: [
+  const f = g(), [d, c] = E(a);
+  return /* @__PURE__ */ y("div", { style: l, children: [
     /* @__PURE__ */ y(
       "div",
       {
-        onClick: () => l((u) => !u),
+        onClick: () => c((u) => !u),
         style: {
           display: "flex",
           alignItems: "center",
@@ -1387,70 +1409,70 @@ function Zt({
         },
         children: [
           /* @__PURE__ */ i(ye, { expanded: d }),
-          t,
-          /* @__PURE__ */ i("span", { style: { fontWeight: 500 }, children: e }),
+          e,
+          /* @__PURE__ */ i("span", { style: { fontWeight: 500 }, children: t }),
           n != null && /* @__PURE__ */ i("span", { style: { color: f.text.tertiary, fontSize: 12 }, children: n }),
           /* @__PURE__ */ i("span", { style: { flex: 1 } }),
           r != null && /* @__PURE__ */ i("span", { style: { color: f.text.tertiary }, children: r })
         ]
       }
     ),
-    d && /* @__PURE__ */ i("div", { style: { paddingLeft: 18, paddingBottom: 4 }, children: a })
+    d && /* @__PURE__ */ i("div", { style: { paddingLeft: 18, paddingBottom: 4 }, children: o })
   ] });
 }
 export {
-  pt as BarChart,
-  Wt as Button,
-  _t as Callout,
-  Et as Card,
-  Nt as CardBody,
-  It as CardHeader,
-  jt as Checkbox,
-  Pt as Code,
-  Zt as CollapsibleSection,
-  gt as DiffStats,
-  xt as DiffView,
-  Ft as Divider,
-  Dt as Grid,
-  wt as H1,
-  Ct as H2,
-  Lt as H3,
-  Gt as IconButton,
-  ht as LineChart,
-  At as Link,
-  yt as PieChart,
-  Rt as Pill,
-  Bt as Row,
-  Ot as Select,
-  $t as Spacer,
-  Mt as Stack,
-  zt as Stat,
-  Vt as Swatch,
-  Ht as Table,
-  Tt as Text,
-  qt as TextArea,
-  Xt as TextInput,
-  ot as TodoList,
-  vt as TodoListCard,
-  Kt as Toggle,
-  Yt as UsageBar,
-  on as canvasPaletteDark,
-  an as canvasPaletteGrokDark,
-  sn as canvasPaletteGrokLight,
-  ln as canvasPaletteLight,
-  cn as canvasTokens,
-  dn as canvasTokensLight,
-  un as categoryPaletteDark,
-  fn as categoryPaletteLight,
-  hn as colorPalette,
-  mt as computeDAGLayout,
-  kt as mergeStyle,
+  gt as BarChart,
+  jt as Button,
+  Gt as Callout,
+  Rt as Card,
+  zt as CardBody,
+  _t as CardHeader,
+  Xt as Checkbox,
+  Bt as Code,
+  Qt as CollapsibleSection,
+  bt as DiffStats,
+  St as DiffView,
+  Nt as Divider,
+  It as Grid,
+  Tt as H1,
+  Pt as H2,
+  At as H3,
+  Kt as IconButton,
+  mt as LineChart,
+  Dt as Link,
+  xt as PieChart,
+  Wt as Pill,
+  Et as Row,
+  Vt as Select,
+  Ft as Spacer,
+  $t as Stack,
+  Ht as Stat,
+  Jt as Swatch,
+  Ot as Table,
+  Mt as Text,
+  Zt as TextArea,
+  qt as TextInput,
+  st as TodoList,
+  kt as TodoListCard,
+  Yt as Toggle,
+  Ut as UsageBar,
+  ln as canvasPaletteDark,
+  cn as canvasPaletteGrokDark,
+  dn as canvasPaletteGrokLight,
+  un as canvasPaletteLight,
+  fn as canvasTokens,
+  hn as canvasTokensLight,
+  pn as categoryPaletteDark,
+  yn as categoryPaletteLight,
+  mn as colorPalette,
+  vt as computeDAGLayout,
+  Lt as mergeStyle,
   ne as usageColorSequence,
-  St as useCanvasAction,
-  bt as useCanvasState,
-  Qt as useEffect,
+  wt as useCanvasAction,
+  Ct as useCanvasState,
+  nn as useEffect,
   g as useHostTheme,
-  en as useMemo,
-  tn as useRef,
-  nn as useState
+  rn as useMemo,
+  on as useRef,
+  an as useState
 };