@flesler/cursor-canvas-web 1.1.0 → 1.1.2

package/dist/cursor-canvas.js

@@ -1,10 +1,10 @@
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
-import { useComputedColorScheme as ht, Button as pt, Alert as yt, Card as gt, Checkbox as mt, Divider as xt, Title as E, ActionIcon as vt, Badge as bt, Group as kt, Select as St, Stack as wt, Text as H, Table as S, Textarea as Ct, TextInput as Tt, Switch as Lt } from "@mantine/core";
-import { useState as I, createContext as Mt, useCallback as j, useContext as rt } from "react";
-import { useEffect as Ae, useMemo as Ie, useRef as Pe, useState as Re } from "react";
-import { r as Bt, u as tt } from "./host-tokens-Dh2BFFjv.js";
-import { c as He, a as Ee, b as je, d as Ge, e as Ne, f as Oe, g as _e, h as Ke, i as Xe } from "./host-tokens-Dh2BFFjv.js";
-import { BarChart as Ft, AreaChart as $t, LineChart as zt, DonutChart as Dt, PieChart as At } from "@mantine/charts";
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import { useComputedColorScheme as ge, Button as xe, Alert as ve, Card as be, Checkbox as Se, Divider as ke, Title as W, ActionIcon as Ce, Badge as we, Group as Le, Select as Te, Stack as Pe, Text as H, Table as w, Textarea as Ae, TextInput as Me, Switch as Be } from "@mantine/core";
+import { useState as $, createContext as $e, useCallback as _, useContext as oe } from "react";
+import { useEffect as Zt, useMemo as Jt, useRef as Ut, useState as Qt } from "react";
+import { r as Fe, u as te } from "./host-tokens-Dh2BFFjv.js";
+import { c as tr, a as rr, b as nr, d as or, e as ar, f as ir, g as sr, h as lr, i as cr } from "./host-tokens-Dh2BFFjv.js";
+import { BarChart as De, AreaChart as Ee, LineChart as Ie, DonutChart as ze, PieChart as Ne, ChartLegend as Re } from "@mantine/charts";
 const k = {
   success: "#1F8A65",
   danger: "#CF2D56",
@@ -14,7 +14,7 @@ const k = {
   added: "#1F8A65",
   deleted: "#CF2D56",
   renamed: "#5A6CC0"
-}, nt = {
+}, ae = {
   success: "green",
   danger: "red",
   warning: "orange",
@@ -24,15 +24,25 @@ const k = {
   deleted: "red",
   renamed: "indigo"
 };
-function y() {
-  const t = ht("light") === "dark" ? "dark" : "light";
-  return Bt(t);
+function m() {
+  const t = ge("light") === "dark" ? "dark" : "light";
+  return Fe(t);
 }
+const ie = {
+  verticalAlign: "bottom",
+  align: "center"
+}, se = {
+  legend: { justifyContent: "center" }
+};
 function G() {
-  const t = y().chart.sequence;
+  const t = m().chart.sequence;
   return (r, n) => r ? k[r] : t[n % t.length];
 }
-function ot(e, t) {
+function le() {
+  const t = m().text.primary;
+  return { textColor: t, barLabelColor: t };
+}
+function ce(e, t) {
   return e.map((r, n) => {
     const i = { category: r };
     for (const o of t)
@@ -40,17 +50,16 @@ function ot(e, t) {
     return i;
   });
 }
-function at(e, t) {
+function de(e, t) {
   return e.map((r, n) => ({
     name: r.name,
     color: t(r.tone, n)
   }));
 }
-function it(e, t) {
-  if (!(!e && !t))
-    return (r) => `${t ?? ""}${r}${e ?? ""}`;
+function ue(e, t) {
+  return (r) => `${t ?? ""}${r}${e ?? ""}`;
 }
-function It(e, t) {
+function He(e, t) {
   if (e != null && e.length)
     return e.map((r) => ({
       ...t ? { x: r.value } : { y: r.value },
@@ -58,8 +67,8 @@ function It(e, t) {
       color: r.tone ? k[r.tone] : k.neutral
     }));
 }
-function st(e) {
-  const t = It(e.referenceLines, !!e.horizontal);
+function fe(e) {
+  const t = He(e.referenceLines, !!e.horizontal);
   if (e.stacked || e.normalized)
     return { referenceLines: t };
   const r = e.beginAtZero !== !1, n = [
@@ -68,207 +77,376 @@ function st(e) {
   ];
   return e.horizontal ? { xAxisProps: { domain: n }, referenceLines: t } : { yAxisProps: { domain: n }, referenceLines: t };
 }
-function Pt(e, t, r) {
+function We(e, t, r) {
   return e !== void 0 ? e : t.length === 1 && r.length <= 8;
 }
-function qt({
+const re = 14;
+function _e(e) {
+  return e.length <= re ? e : `${e.slice(0, re - 1)}…`;
+}
+function Ge(e) {
+  var o;
+  const t = typeof e.x == "number" ? e.x : Number(e.x) || 0, r = typeof e.y == "number" ? e.y : Number(e.y) || 0, n = String(((o = e.payload) == null ? void 0 : o.value) ?? ""), i = _e(n);
+  return /* @__PURE__ */ a("g", { transform: `translate(${t},${r})`, children: /* @__PURE__ */ y(
+    "text",
+    {
+      x: -10,
+      y: 0,
+      dy: 4,
+      textAnchor: "end",
+      fill: "currentColor",
+      fontSize: 12,
+      children: [
+        /* @__PURE__ */ a("title", { children: n }),
+        i
+      ]
+    }
+  ) });
+}
+function je(e) {
+  return {
+    fontWeight: 700,
+    fill: e
+  };
+}
+function Oe() {
+  return {
+    yAxisProps: {
+      tick: Ge,
+      width: 96
+    },
+    barChartProps: {
+      margin: { right: 32 }
+    }
+  };
+}
+function Ke() {
+  return {
+    barChartProps: {
+      margin: { top: 22 }
+    }
+  };
+}
+function dt({
   categories: e,
   series: t,
   height: r = 240,
   fill: n,
   valueSuffix: i,
   valuePrefix: o,
-  showValues: l,
-  showHoverGuide: u = !0,
+  showValues: c,
+  showHoverGuide: f = !0,
   beginAtZero: d,
-  yMin: c,
-  yMax: f,
-  referenceLines: m,
-  style: x
+  yMin: l,
+  yMax: u,
+  referenceLines: g,
+  style: v,
+  smooth: h
 }) {
-  const b = G(), B = ot(e, t), w = at(t, b), T = st({
+  const C = G(), S = le(), T = ce(e, t), P = de(t, C), A = fe({
     beginAtZero: d,
-    yMin: c,
-    yMax: f,
-    referenceLines: m,
+    yMin: l,
+    yMax: u,
+    referenceLines: g,
     horizontal: !1
-  }), C = {
+  }), L = {
     h: r,
-    data: B,
+    data: T,
     dataKey: "category",
-    series: w,
-    curveType: "monotone",
+    series: P,
+    curveType: h ? "monotone" : "linear",
     withLegend: t.length > 1,
-    valueFormatter: it(i, o),
-    withPointLabels: l ?? e.length <= 20,
-    tooltipProps: u ? void 0 : { cursor: !1 },
-    ...T,
-    style: x
+    legendProps: ie,
+    valueFormatter: ue(i, o),
+    withPointLabels: c ?? e.length <= 20,
+    tooltipProps: f ? void 0 : { cursor: !1 },
+    styles: {
+      ...se,
+      legendItemName: { color: S.textColor }
+    },
+    ...S,
+    ...A,
+    style: v
   };
-  return n ? /* @__PURE__ */ s($t, { ...C }) : /* @__PURE__ */ s(zt, { ...C });
+  return n ? /* @__PURE__ */ a(Ee, { ...L }) : /* @__PURE__ */ a(Ie, { ...L });
 }
-function Vt({
+function ut({
   categories: e,
   series: t,
   height: r = 240,
   stacked: n,
   horizontal: i,
   normalized: o,
-  valueSuffix: l,
-  valuePrefix: u,
+  valueSuffix: c,
+  valuePrefix: f,
   showValues: d,
-  beginAtZero: c,
-  yMin: f,
-  yMax: m,
-  referenceLines: x,
-  style: b
+  beginAtZero: l,
+  yMin: u,
+  yMax: g,
+  referenceLines: v,
+  style: h
 }) {
-  const B = G(), w = ot(e, t), T = o ? "percent" : n ? "stacked" : "default", C = st({
-    beginAtZero: c,
-    yMin: f,
-    yMax: m,
-    referenceLines: x,
+  const C = G(), S = le(), T = ce(e, t), P = o ? "percent" : n ? "stacked" : "default", A = fe({
+    beginAtZero: l,
+    yMin: u,
+    yMax: g,
+    referenceLines: v,
     horizontal: i,
     stacked: n,
     normalized: o
-  }), F = !n && !o && Pt(d, t, e);
-  return /* @__PURE__ */ s(
-    Ft,
+  }), L = !n && !o && We(d, t, e);
+  return /* @__PURE__ */ a(
+    De,
     {
       h: r,
-      data: w,
+      data: T,
       dataKey: "category",
-      series: at(t, B),
-      type: T,
+      series: de(t, C),
+      type: P,
       orientation: i ? "vertical" : "horizontal",
       withLegend: t.length > 1,
-      valueFormatter: it(l, u),
-      withBarValueLabel: F,
-      ...C,
-      style: b
+      legendProps: ie,
+      valueFormatter: ue(c, f),
+      withBarValueLabel: L,
+      ...L ? { valueLabelProps: je(S.barLabelColor) } : {},
+      ...i ? Oe() : L ? Ke() : {},
+      styles: {
+        ...se,
+        legendItemName: { color: S.textColor }
+      },
+      ...S,
+      ...A,
+      style: h
     }
   );
 }
-function Yt({ data: e, size: t = 200, donut: r, style: n }) {
-  const i = G(), o = e.map((u, d) => ({
-    name: u.label,
-    value: u.value,
-    color: i(u.tone, d)
+const Xe = 180, Ye = 540;
+function qe(e, t) {
+  if (t <= 0)
+    return "0%";
+  const r = e / t * 100;
+  return r < 10 && Math.abs(r - Math.round(r)) > 0.05 ? `${r.toFixed(1)}%` : `${Math.round(r)}%`;
+}
+function Ve(e) {
+  return Math.max(28, Math.round(e * 0.22));
+}
+function Ze(e) {
+  return e.map((t) => ({
+    dataKey: t.name,
+    value: t.name,
+    color: t.color,
+    type: "circle"
+  }));
+}
+function Je(e, t) {
+  return e.map((r) => ({
+    name: r.name,
+    color: r.color,
+    label: `${r.name} ${qe(r.value, t)}`
   }));
-  return /* @__PURE__ */ s(
+}
+function Ue({
+  total: e,
+  family: t,
+  primary: r,
+  subtitle: n
+}) {
+  return /* @__PURE__ */ y(
+    "text",
+    {
+      x: "50%",
+      y: "50%",
+      textAnchor: "middle",
+      dominantBaseline: "central",
+      fontFamily: t,
+      children: [
+        /* @__PURE__ */ a("tspan", { x: "50%", dy: "-0.4em", fontSize: 20, fontWeight: 600, fill: r, children: e }),
+        /* @__PURE__ */ a("tspan", { x: "50%", dy: "1.55em", fontSize: 16, fontWeight: 500, fill: n, children: "Total" })
+      ]
+    }
+  );
+}
+function ft({ data: e, size: t = 200, donut: r, style: n }) {
+  const [i, o] = $(null), c = m(), f = G(), d = e.map((h, C) => ({
+    name: h.label,
+    value: h.value,
+    color: f(h.tone, C)
+  })), l = d.reduce((h, C) => h + C.value, 0), u = {
+    startAngle: Xe,
+    endAngle: Ye
+  }, g = (h) => ({
+    opacity: i === null || i === h ? 1 : 0.35
+  }), v = r ? /* @__PURE__ */ a(
+    ze,
+    {
+      data: d,
+      size: t,
+      thickness: Ve(t),
+      withTooltip: !0,
+      cellProps: (h) => g(h.name),
+      ...u,
+      children: /* @__PURE__ */ a(
+        Ue,
+        {
+          total: l,
+          family: c.typography.fontFamily,
+          primary: c.text.primary,
+          subtitle: c.text.secondary
+        }
+      )
+    }
+  ) : /* @__PURE__ */ a(
+    Ne,
+    {
+      data: d,
+      size: t,
+      withTooltip: !0,
+      withLabelsLine: !1,
+      cellProps: (h) => g(h.name),
+      ...u
+    }
+  );
+  return /* @__PURE__ */ y(
     "div",
     {
       style: {
         width: "100%",
-        height: t,
-        minHeight: t,
         display: "flex",
+        flexDirection: "column",
         alignItems: "center",
-        justifyContent: "center"
+        ...n
       },
-      children: r ? /* @__PURE__ */ s(Dt, { data: o, size: t, withTooltip: !0, style: n }) : /* @__PURE__ */ s(
-        At,
-        {
-          data: o,
-          size: t,
-          withTooltip: !0,
-          withLabelsLine: !1,
-          style: n
-        }
-      )
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: t,
+              minHeight: t,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: v
+          }
+        ),
+        /* @__PURE__ */ a(
+          Re,
+          {
+            payload: Ze(d),
+            series: Je(d, l),
+            legendPosition: "bottom",
+            centered: !0,
+            onHighlight: o,
+            mt: "sm",
+            w: "100%",
+            styles: {
+              legend: {
+                justifyContent: "center",
+                gap: 12,
+                color: c.text.primary
+              },
+              legendItemName: {
+                color: c.text.primary
+              }
+            }
+          }
+        )
+      ]
     }
   );
 }
-function Jt(e) {
+function ht(e) {
   const {
     nodes: t,
     edges: r,
     direction: n = "vertical",
     nodeWidth: i = 160,
     nodeHeight: o = 40,
-    rankGap: l = 64,
-    nodeGap: u = 48,
+    rankGap: c = 64,
+    nodeGap: f = 48,
     padding: d = 24
-  } = e, c = t.map((a) => a.id), f = new Set(c), m = /* @__PURE__ */ new Map();
-  for (const a of c) m.set(a, []);
-  for (const a of r)
-    f.has(a.from) && f.has(a.to) && m.get(a.from).push(a.to);
-  const x = 0, b = 1, B = 2, w = new Map(c.map((a) => [a, x])), T = /* @__PURE__ */ new Set(), C = (a, h) => `${a}\0${h}`, F = (a) => {
-    w.set(a, b);
-    for (const h of m.get(a) ?? []) {
-      const g = w.get(h);
-      g === b ? T.add(C(a, h)) : g === x && F(h);
+  } = e, l = t.map((s) => s.id), u = new Set(l), g = /* @__PURE__ */ new Map();
+  for (const s of l) g.set(s, []);
+  for (const s of r)
+    u.has(s.from) && u.has(s.to) && g.get(s.from).push(s.to);
+  const v = 0, h = 1, C = 2, S = new Map(l.map((s) => [s, v])), T = /* @__PURE__ */ new Set(), P = (s, p) => `${s}\0${p}`, A = (s) => {
+    S.set(s, h);
+    for (const p of g.get(s) ?? []) {
+      const x = S.get(p);
+      x === h ? T.add(P(s, p)) : x === v && A(p);
     }
-    w.set(a, B);
+    S.set(s, C);
   };
-  for (const a of c) w.get(a) === x && F(a);
-  const lt = r.filter(
-    (a) => f.has(a.from) && f.has(a.to) && !T.has(C(a.from, a.to))
-  ), L = new Map(c.map((a) => [a, 0])), _ = new Map(c.map((a) => [a, []]));
-  for (const a of lt)
-    _.get(a.from).push(a.to), L.set(a.to, (L.get(a.to) ?? 0) + 1);
-  const $ = new Map(c.map((a) => [a, 0])), P = c.filter((a) => (L.get(a) ?? 0) === 0);
-  for (; P.length > 0; ) {
-    const a = P.shift(), h = $.get(a);
-    for (const g of _.get(a))
-      $.set(g, Math.max($.get(g), h + 1)), L.set(g, L.get(g) - 1), L.get(g) === 0 && P.push(g);
+  for (const s of l) S.get(s) === v && A(s);
+  const L = r.filter(
+    (s) => u.has(s.from) && u.has(s.to) && !T.has(P(s.from, s.to))
+  ), M = new Map(l.map((s) => [s, 0])), K = new Map(l.map((s) => [s, []]));
+  for (const s of L)
+    K.get(s.from).push(s.to), M.set(s.to, (M.get(s.to) ?? 0) + 1);
+  const F = new Map(l.map((s) => [s, 0])), z = l.filter((s) => (M.get(s) ?? 0) === 0);
+  for (; z.length > 0; ) {
+    const s = z.shift(), p = F.get(s);
+    for (const x of K.get(s))
+      F.set(x, Math.max(F.get(x), p + 1)), M.set(x, M.get(x) - 1), M.get(x) === 0 && z.push(x);
   }
-  const M = /* @__PURE__ */ new Map();
-  for (const a of c) {
-    const h = $.get(a);
-    M.has(h) || M.set(h, []), M.get(h).push(a);
+  const B = /* @__PURE__ */ new Map();
+  for (const s of l) {
+    const p = F.get(s);
+    B.has(p) || B.set(p, []), B.get(p).push(s);
   }
-  const z = [...M.keys()].sort((a, h) => a - h), v = n === "vertical", K = (a) => a * (v ? i : o) + Math.max(0, a - 1) * u, X = Math.max(
+  const D = [...B.keys()].sort((s, p) => s - p), b = n === "vertical", X = (s) => s * (b ? i : o) + Math.max(0, s - 1) * f, Y = Math.max(
     0,
-    ...z.map((a) => K(M.get(a).length))
-  ), D = /* @__PURE__ */ new Map(), q = [];
-  z.forEach((a, h) => {
-    const g = M.get(a), R = K(g.length), W = d + (X - R) / 2, A = d + h * ((v ? o : i) + l);
-    g.forEach((U, Z) => {
-      const Q = W + Z * ((v ? i : o) + u), ut = v ? Q : A, ft = v ? A : Q;
-      D.set(U, { id: U, x: ut, y: ft, rank: a, order: Z });
+    ...D.map((s) => X(B.get(s).length))
+  ), E = /* @__PURE__ */ new Map(), q = [];
+  D.forEach((s, p) => {
+    const x = B.get(s), N = X(x.length), R = d + (Y - N) / 2, I = d + p * ((b ? o : i) + c);
+    x.forEach((U, Q) => {
+      const ee = R + Q * ((b ? i : o) + f), ye = b ? ee : I, me = b ? I : ee;
+      E.set(U, { id: U, x: ye, y: me, rank: s, order: Q });
     }), q.push({
-      rank: a,
-      x: v ? W : A,
-      y: v ? A : W,
-      width: v ? R : i,
-      height: v ? o : R,
-      nodeIds: g
+      rank: s,
+      x: b ? R : I,
+      y: b ? I : R,
+      width: b ? N : i,
+      height: b ? o : N,
+      nodeIds: x
     });
   });
-  const V = (a, h) => a ? v ? {
-    x: a.x + i / 2,
-    y: h === "source" ? a.y + o : a.y
+  const V = (s, p) => s ? b ? {
+    x: s.x + i / 2,
+    y: p === "source" ? s.y + o : s.y
   } : {
-    x: h === "source" ? a.x + i : a.x,
-    y: a.y + o / 2
-  } : { x: 0, y: 0 }, dt = r.filter((a) => f.has(a.from) && f.has(a.to)).map((a) => {
-    const h = V(D.get(a.from), "source"), g = V(D.get(a.to), "target");
+    x: p === "source" ? s.x + i : s.x,
+    y: s.y + o / 2
+  } : { x: 0, y: 0 }, pe = r.filter((s) => u.has(s.from) && u.has(s.to)).map((s) => {
+    const p = V(E.get(s.from), "source"), x = V(E.get(s.to), "target");
     return {
-      from: a.from,
-      to: a.to,
-      sourceX: h.x,
-      sourceY: h.y,
-      targetX: g.x,
-      targetY: g.y,
-      isBackEdge: T.has(C(a.from, a.to))
+      from: s.from,
+      to: s.to,
+      sourceX: p.x,
+      sourceY: p.y,
+      targetX: x.x,
+      targetY: x.y,
+      isBackEdge: T.has(P(s.from, s.to))
     };
-  }), Y = d * 2 + z.length * (v ? o : i) + Math.max(0, z.length - 1) * l, J = d * 2 + X;
+  }), Z = d * 2 + D.length * (b ? o : i) + Math.max(0, D.length - 1) * c, J = d * 2 + Y;
   return {
-    nodes: [...D.values()],
-    edges: dt,
+    nodes: [...E.values()],
+    edges: pe,
     ranks: q,
     direction: n,
-    width: v ? J : Y,
-    height: v ? Y : J
+    width: b ? J : Z,
+    height: b ? Z : J
   };
 }
-function Ut({
+function pt({
   additions: e = 0,
   deletions: t = 0,
   style: r
 }) {
-  return e === 0 && t === 0 ? null : /* @__PURE__ */ p(
+  return e === 0 && t === 0 ? null : /* @__PURE__ */ y(
     "span",
     {
       style: {
@@ -280,11 +458,11 @@ function Ut({
         ...r
       },
       children: [
-        e > 0 && /* @__PURE__ */ p("span", { style: { color: k.added }, children: [
+        e > 0 && /* @__PURE__ */ y("span", { style: { color: k.added }, children: [
           "+",
           e
         ] }),
-        t > 0 && /* @__PURE__ */ p("span", { style: { color: k.deleted }, children: [
+        t > 0 && /* @__PURE__ */ y("span", { style: { color: k.deleted }, children: [
           "-",
           t
         ] })
@@ -292,20 +470,20 @@ function Ut({
     }
   );
 }
-const Rt = {
+const Qe = {
   added: "+",
   removed: "-",
   unchanged: " "
 };
-function Zt({
+function yt({
   lines: e,
   showLineNumbers: t = !0,
   coloredLineNumbers: r = !0,
   showAccentStrip: n = !0,
   style: i
 }) {
-  const o = y(), l = (c) => c === "added" ? o.diff.insertedLine : c === "removed" ? o.diff.removedLine : "transparent", u = (c) => c === "added" ? o.diff.stripAdded : c === "removed" ? o.diff.stripRemoved : "transparent", d = (c) => r && c === "added" ? k.added : r && c === "removed" ? k.deleted : o.text.tertiary;
-  return /* @__PURE__ */ s(
+  const o = m(), 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) => r && l === "added" ? k.added : r && l === "removed" ? k.deleted : o.text.tertiary;
+  return /* @__PURE__ */ a(
     "div",
     {
       style: {
@@ -316,17 +494,17 @@ function Zt({
         overflowX: "auto",
         ...i
       },
-      children: e.map((c, f) => /* @__PURE__ */ p(
+      children: e.map((l, u) => /* @__PURE__ */ y(
         "div",
         {
           style: {
             display: "flex",
             alignItems: "stretch",
-            background: l(c.type),
-            borderLeft: n ? `3px solid ${u(c.type)}` : void 0
+            background: c(l.type),
+            borderLeft: n ? `3px solid ${f(l.type)}` : void 0
           },
           children: [
-            t && /* @__PURE__ */ s(
+            t && /* @__PURE__ */ a(
               "span",
               {
                 style: {
@@ -335,12 +513,12 @@ function Zt({
                   textAlign: "right",
                   paddingRight: 10,
                   userSelect: "none",
-                  color: d(c.type)
+                  color: d(l.type)
                 },
-                children: c.lineNumber ?? ""
+                children: l.lineNumber ?? ""
               }
             ),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ a(
               "span",
               {
                 style: {
@@ -348,12 +526,12 @@ function Zt({
                   width: 14,
                   textAlign: "center",
                   userSelect: "none",
-                  color: d(c.type)
+                  color: d(l.type)
                 },
-                children: Rt[c.type]
+                children: Qe[l.type]
               }
             ),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ a(
               "pre",
               {
                 style: {
@@ -362,19 +540,19 @@ function Zt({
                   whiteSpace: "pre",
                   fontFamily: "inherit"
                 },
-                children: c.content
+                children: l.content
               }
             )
           ]
         },
-        f
+        u
       ))
     }
   );
 }
-function Wt({ status: e }) {
-  const t = y(), r = e === "completed" ? k.success : e === "in_progress" ? t.accent.primary : e === "cancelled" ? k.danger : t.text.tertiary;
-  return /* @__PURE__ */ p(
+function et({ status: e }) {
+  const t = m(), r = e === "completed" ? k.success : e === "in_progress" ? t.accent.primary : e === "cancelled" ? k.danger : t.text.tertiary;
+  return /* @__PURE__ */ y(
     "svg",
     {
       width: 14,
@@ -384,8 +562,8 @@ function Wt({ status: e }) {
       style: { flex: "0 0 auto", marginTop: 3 },
       "aria-hidden": !0,
       children: [
-        /* @__PURE__ */ s("circle", { cx: 7, cy: 7, r: 6, stroke: r, strokeWidth: 1.4 }),
-        e === "completed" && /* @__PURE__ */ s(
+        /* @__PURE__ */ a("circle", { cx: 7, cy: 7, r: 6, stroke: r, strokeWidth: 1.4 }),
+        e === "completed" && /* @__PURE__ */ a(
           "path",
           {
             d: "M4 7.2l2 2 4-4.4",
@@ -395,8 +573,8 @@ function Wt({ status: e }) {
             strokeLinejoin: "round"
           }
         ),
-        e === "in_progress" && /* @__PURE__ */ s("circle", { cx: 7, cy: 7, r: 3, fill: r }),
-        e === "cancelled" && /* @__PURE__ */ s(
+        e === "in_progress" && /* @__PURE__ */ a("circle", { cx: 7, cy: 7, r: 3, fill: r }),
+        e === "cancelled" && /* @__PURE__ */ a(
           "path",
           {
             d: "M4.8 4.8l4.4 4.4M9.2 4.8l-4.4 4.4",
@@ -409,16 +587,16 @@ function Wt({ status: e }) {
     }
   );
 }
-function Ht({
+function tt({
   todos: e,
   dimmedTodoIds: t,
   onTodoClick: r,
   style: n
 }) {
-  const i = y();
-  return e.length === 0 ? null : /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", ...n }, children: e.map((o) => {
-    const l = t == null ? void 0 : t.has(o.id);
-    return /* @__PURE__ */ p(
+  const i = m();
+  return e.length === 0 ? null : /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", ...n }, children: e.map((o) => {
+    const c = t == null ? void 0 : t.has(o.id);
+    return /* @__PURE__ */ y(
       "button",
       {
         type: "button",
@@ -436,11 +614,11 @@ function Ht({
           color: i.text.primary,
           fontSize: 14,
           lineHeight: "20px",
-          opacity: l ? 0.45 : 1
+          opacity: c ? 0.45 : 1
         },
         children: [
-          /* @__PURE__ */ s(Wt, { status: o.status }),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ a(et, { status: o.status }),
+          /* @__PURE__ */ a(
             "span",
             {
               style: {
@@ -456,17 +634,17 @@ function Ht({
     );
   }) });
 }
-function Qt({
+function mt({
   todos: e,
   dimmedTodoIds: t,
   defaultExpanded: r = !1,
   onTodoClick: n,
   style: i
 }) {
-  const o = y(), [l, u] = I(r);
+  const o = m(), [c, f] = $(r);
   if (e.length === 0) return null;
-  const d = e.filter((c) => c.status === "completed").length;
-  return /* @__PURE__ */ p(
+  const d = e.filter((l) => l.status === "completed").length;
+  return /* @__PURE__ */ y(
     "div",
     {
       style: {
@@ -476,18 +654,18 @@ function Qt({
         ...i
       },
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ y(
           "button",
           {
             type: "button",
-            onClick: () => u((c) => !c),
+            onClick: () => f((l) => !l),
             style: {
               display: "flex",
               alignItems: "center",
               gap: 8,
               width: "100%",
               padding: "6px 10px",
-              background: "transparent",
+              background: o.fill.secondary,
               border: "none",
               cursor: "pointer",
               color: o.text.secondary,
@@ -495,7 +673,7 @@ function Qt({
               fontWeight: 600
             },
             children: [
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ a(
                 "svg",
                 {
                   width: 12,
@@ -503,11 +681,11 @@ function Qt({
                   viewBox: "0 0 12 12",
                   fill: "none",
                   style: {
-                    transform: l ? "rotate(90deg)" : "none",
+                    transform: c ? "rotate(90deg)" : "none",
                     transition: "transform 120ms"
                   },
                   "aria-hidden": !0,
-                  children: /* @__PURE__ */ s(
+                  children: /* @__PURE__ */ a(
                     "path",
                     {
                       d: "M4 2.5L8 6l-4 3.5",
@@ -519,9 +697,9 @@ function Qt({
                   )
                 }
               ),
-              /* @__PURE__ */ s("span", { children: "Todos" }),
-              /* @__PURE__ */ s("span", { style: { flex: 1 } }),
-              /* @__PURE__ */ p("span", { children: [
+              /* @__PURE__ */ a("span", { children: "Todos" }),
+              /* @__PURE__ */ a("span", { style: { flex: 1 } }),
+              /* @__PURE__ */ y("span", { children: [
                 d,
                 " of ",
                 e.length,
@@ -530,8 +708,8 @@ function Qt({
             ]
           }
         ),
-        l && /* @__PURE__ */ s("div", { style: { padding: 6 }, children: /* @__PURE__ */ s(
-          Ht,
+        c && /* @__PURE__ */ a("div", { style: { padding: 6 }, children: /* @__PURE__ */ a(
+          tt,
           {
             todos: e,
             dimmedTodoIds: t,
@@ -542,19 +720,19 @@ function Qt({
     }
   );
 }
-function te(e, t) {
-  const r = `canvas:${e}`, [n, i] = I(() => {
+function gt(e, t) {
+  const r = `canvas:${e}`, [n, i] = $(() => {
     if (typeof localStorage > "u") return t;
     try {
-      const l = localStorage.getItem(r);
-      return l === null ? t : JSON.parse(l);
+      const c = localStorage.getItem(r);
+      return c === null ? t : JSON.parse(c);
     } catch {
       return t;
     }
-  }), o = j(
-    (l) => {
-      i((u) => {
-        const d = typeof l == "function" ? l(u) : l;
+  }), o = _(
+    (c) => {
+      i((f) => {
+        const d = typeof c == "function" ? c(f) : c;
         try {
           localStorage == null || localStorage.setItem(r, JSON.stringify(d));
         } catch {
@@ -566,14 +744,14 @@ function te(e, t) {
   );
   return [n, o];
 }
-function ee() {
-  return j((e) => {
+function xt() {
+  return _((e) => {
   }, []);
 }
-function re(e, t) {
+function vt(e, t) {
   return { ...e, ...t };
 }
-function N(e, t, r) {
+function j(e, t, r) {
   const n = e.typography[t];
   return {
     fontFamily: e.typography.fontFamily,
@@ -585,56 +763,56 @@ function N(e, t, r) {
     ...r
   };
 }
-function ne({ children: e, style: t }) {
-  const r = y();
-  return /* @__PURE__ */ s(E, { order: 1, style: N(r, "h1", t), children: e });
+function bt({ children: e, style: t }) {
+  const r = m();
+  return /* @__PURE__ */ a(W, { order: 1, style: j(r, "h1", t), children: e });
 }
-function oe({ children: e, style: t }) {
-  const r = y();
-  return /* @__PURE__ */ s(E, { order: 2, style: N(r, "h2", t), children: e });
+function St({ children: e, style: t }) {
+  const r = m();
+  return /* @__PURE__ */ a(W, { order: 2, style: j(r, "h2", t), children: e });
 }
-function ae({ children: e, style: t }) {
-  const r = y();
-  return /* @__PURE__ */ s(E, { order: 3, style: N(r, "h3", t), children: e });
+function kt({ children: e, style: t }) {
+  const r = m();
+  return /* @__PURE__ */ a(W, { order: 3, style: j(r, "h3", t), children: e });
 }
-const Et = {
+const rt = {
   normal: 400,
   medium: 500,
   semibold: 600,
   bold: 700
 };
-function ie({
+function Ct({
   children: e,
   tone: t = "primary",
   size: r = "body",
   as: n = "p",
   weight: i = "normal",
   italic: o,
-  truncate: l,
-  style: u
+  truncate: c,
+  style: f
 }) {
-  const d = y();
-  return /* @__PURE__ */ s(
+  const d = m();
+  return /* @__PURE__ */ a(
     H,
     {
       component: n,
       size: r === "small" ? "xs" : "sm",
-      fw: Et[i],
+      fw: rt[i],
       c: t === "primary" ? void 0 : d.text[t],
-      truncate: l,
+      truncate: c,
       style: {
         fontStyle: o ? "italic" : void 0,
         ...t === "primary" ? { color: d.text.primary } : void 0,
         fontFamily: d.typography.fontFamily,
-        ...u
+        ...f
       },
       children: e
     }
   );
 }
-function se({ children: e, style: t }) {
-  const r = y();
-  return /* @__PURE__ */ s(
+function wt({ children: e, style: t }) {
+  const r = m();
+  return /* @__PURE__ */ a(
     "code",
     {
       style: {
@@ -650,9 +828,9 @@ function se({ children: e, style: t }) {
     }
   );
 }
-function ce({ children: e, href: t, style: r }) {
-  const n = y();
-  return /* @__PURE__ */ s(
+function Lt({ children: e, href: t, style: r }) {
+  const n = m();
+  return /* @__PURE__ */ a(
     "a",
     {
       href: t,
@@ -663,17 +841,17 @@ function ce({ children: e, href: t, style: r }) {
     }
   );
 }
-function le({ children: e, gap: t, style: r }) {
-  return /* @__PURE__ */ s(wt, { gap: t, style: r, children: e });
+function Tt({ children: e, gap: t, style: r }) {
+  return /* @__PURE__ */ a(Pe, { gap: t, style: r, children: e });
 }
-const et = {
+const ne = {
   start: "flex-start",
   center: "center",
   end: "flex-end",
   stretch: "stretch",
   "space-between": "space-between"
 };
-function de({
+function Pt({
   children: e,
   gap: t,
   align: r = "center",
@@ -681,24 +859,24 @@ function de({
   wrap: i = !1,
   style: o
 }) {
-  return /* @__PURE__ */ s(
-    kt,
+  return /* @__PURE__ */ a(
+    Le,
     {
       gap: t,
-      align: et[r],
-      justify: et[n],
+      align: ne[r],
+      justify: ne[n],
       wrap: i ? "wrap" : "nowrap",
       style: o,
       children: e
     }
   );
 }
-function ue() {
-  return /* @__PURE__ */ s("div", { style: { flex: 1 } });
+function At() {
+  return /* @__PURE__ */ a("div", { style: { flex: 1 } });
 }
-function fe({ children: e, columns: t, gap: r = 16, align: n, style: i }) {
+function Mt({ children: e, columns: t, gap: r = 16, align: n, style: i }) {
   const o = typeof t == "number" ? `repeat(${t}, minmax(0, 1fr))` : t;
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ a(
     "div",
     {
       style: {
@@ -712,49 +890,49 @@ function fe({ children: e, columns: t, gap: r = 16, align: n, style: i }) {
     }
   );
 }
-function he({ style: e }) {
-  return /* @__PURE__ */ s(xt, { style: e });
+function Bt({ style: e }) {
+  return /* @__PURE__ */ a(ke, { style: e });
 }
-const O = Mt({
+const O = $e({
   collapsible: !1,
   open: !0,
   toggle: () => {
   }
 });
-function pe({
+function $t({
   children: e,
   variant: t = "default",
   collapsible: r = !1,
   defaultOpen: n = !0,
   open: i,
   onOpenChange: o,
-  style: l
+  style: c
 }) {
-  const u = y(), [d, c] = I(n), f = i ?? d, m = j(() => {
-    const x = !f;
-    i === void 0 && c(x), o == null || o(x);
-  }, [f, i, o]);
-  return /* @__PURE__ */ s(
-    gt,
+  const f = m(), [d, l] = $(n), u = i ?? d, g = _(() => {
+    const v = !u;
+    i === void 0 && l(v), o == null || o(v);
+  }, [u, i, o]);
+  return /* @__PURE__ */ a(
+    be,
     {
       withBorder: t !== "borderless",
-      radius: u.radius.md,
+      radius: f.radius.md,
       padding: 0,
       style: {
-        background: u.bg.elevated,
-        borderColor: u.stroke.secondary,
-        ...l
+        background: f.bg.elevated,
+        borderColor: f.stroke.secondary,
+        ...c
       },
-      children: /* @__PURE__ */ s(O.Provider, { value: { collapsible: r, open: f, toggle: m }, children: e })
+      children: /* @__PURE__ */ a(O.Provider, { value: { collapsible: r, open: u, toggle: g }, children: e })
     }
   );
 }
-function ye({ children: e, trailing: t, style: r }) {
-  const n = y(), { collapsible: i, open: o, toggle: l } = rt(O);
-  return /* @__PURE__ */ p(
+function Ft({ children: e, trailing: t, style: r }) {
+  const n = m(), { collapsible: i, open: o, toggle: c } = oe(O);
+  return /* @__PURE__ */ y(
     "div",
     {
-      onClick: i ? l : void 0,
+      onClick: i ? c : void 0,
       style: {
         display: "flex",
         alignItems: "center",
@@ -764,28 +942,28 @@ function ye({ children: e, trailing: t, style: r }) {
         borderBottom: `1px solid ${n.stroke.secondary}`,
         fontSize: n.typography.small.fontSize,
         fontWeight: n.typography.h3.fontWeight,
-        color: n.text.tertiary,
+        color: n.text.primary,
         fontFamily: n.typography.fontFamily,
         cursor: i ? "pointer" : void 0,
         userSelect: i ? "none" : void 0,
         ...r
       },
       children: [
-        /* @__PURE__ */ p("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-          i && /* @__PURE__ */ s(ct, { expanded: o }),
+        /* @__PURE__ */ y("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+          i && /* @__PURE__ */ a(he, { expanded: o }),
           e
         ] }),
-        t != null && /* @__PURE__ */ s("span", { children: t })
+        t != null && /* @__PURE__ */ a("span", { children: t })
       ]
     }
   );
 }
-function ge({ children: e, style: t }) {
-  const { collapsible: r, open: n } = rt(O);
-  return r && !n ? null : /* @__PURE__ */ s("div", { style: { padding: 14, ...t }, children: e });
+function Dt({ children: e, style: t }) {
+  const { collapsible: r, open: n } = oe(O);
+  return r && !n ? null : /* @__PURE__ */ a("div", { style: { padding: 14, ...t }, children: e });
 }
-function ct({ expanded: e }) {
-  return /* @__PURE__ */ s(
+function he({ expanded: e }) {
+  return /* @__PURE__ */ a(
     "svg",
     {
       width: 12,
@@ -797,7 +975,7 @@ function ct({ expanded: e }) {
         transition: "transform 120ms"
       },
       "aria-hidden": !0,
-      children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ a(
         "path",
         {
           d: "M4 2.5L8 6l-4 3.5",
@@ -810,10 +988,10 @@ function ct({ expanded: e }) {
     }
   );
 }
-function me({ value: e, label: t, tone: r, style: n }) {
-  const i = y();
-  return /* @__PURE__ */ p("div", { style: n, children: [
-    /* @__PURE__ */ s(
+function Et({ value: e, label: t, tone: r, style: n }) {
+  const i = m();
+  return /* @__PURE__ */ y("div", { style: n, children: [
+    /* @__PURE__ */ a(
       H,
       {
         fz: 22,
@@ -826,7 +1004,7 @@ function me({ value: e, label: t, tone: r, style: n }) {
         children: e
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ a(
       H,
       {
         fz: 12,
@@ -839,47 +1017,47 @@ function me({ value: e, label: t, tone: r, style: n }) {
     )
   ] });
 }
-function xe({
+function It({
   children: e,
   active: t,
   tone: r = "neutral",
   size: n = "md",
   leadingContent: i,
   keyboardHint: o,
-  title: l,
-  style: u,
+  title: c,
+  style: f,
   onClick: d
 }) {
-  return /* @__PURE__ */ s(
-    bt,
+  return /* @__PURE__ */ a(
+    we,
     {
-      color: nt[r],
+      color: ae[r],
       variant: t ? "filled" : "light",
       size: n === "sm" ? "sm" : "md",
       leftSection: i,
       rightSection: o,
-      title: l,
+      title: c,
       onClick: d,
       style: {
         cursor: d ? "pointer" : void 0,
         textTransform: "none",
-        ...u
+        ...f
       },
       children: e
     }
   );
 }
-function ve({
+function zt({
   children: e,
   tone: t = "neutral",
   title: r,
   icon: n,
   style: i
 }) {
-  return /* @__PURE__ */ s(
-    yt,
+  return /* @__PURE__ */ a(
+    ve,
     {
-      color: nt[t],
+      color: ae[t],
       title: r,
       icon: n,
       variant: "light",
@@ -888,63 +1066,63 @@ function ve({
     }
   );
 }
-const jt = {
+const nt = {
   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 be({
+function Nt({
   headers: e,
   rows: t,
   columnAlign: r,
   rowTone: n,
   framed: i = !0,
   striped: o,
-  stickyHeader: l,
-  style: u,
+  stickyHeader: c,
+  style: f,
   emptyMessage: d
 }) {
-  return /* @__PURE__ */ p(
-    S,
+  return /* @__PURE__ */ y(
+    w,
     {
       withTableBorder: i,
       withColumnBorders: !1,
       striped: o,
-      stickyHeader: l,
+      stickyHeader: c,
       highlightOnHover: !0,
-      style: u,
+      style: f,
       children: [
-        /* @__PURE__ */ s(S.Thead, { children: /* @__PURE__ */ s(S.Tr, { children: e.map((c, f) => /* @__PURE__ */ s(S.Th, { ta: (r == null ? void 0 : r[f]) ?? "left", children: c }, f)) }) }),
-        /* @__PURE__ */ s(S.Tbody, { children: t.length === 0 ? /* @__PURE__ */ s(S.Tr, { children: /* @__PURE__ */ s(S.Td, { colSpan: e.length, ta: "center", c: "dimmed", children: d ?? "No data" }) }) : t.map((c, f) => {
-          const m = n == null ? void 0 : n[f];
-          return /* @__PURE__ */ s(
-            S.Tr,
+        /* @__PURE__ */ a(w.Thead, { children: /* @__PURE__ */ a(w.Tr, { children: e.map((l, u) => /* @__PURE__ */ a(w.Th, { ta: (r == null ? void 0 : r[u]) ?? "left", children: l }, u)) }) }),
+        /* @__PURE__ */ a(w.Tbody, { children: t.length === 0 ? /* @__PURE__ */ a(w.Tr, { children: /* @__PURE__ */ a(w.Td, { colSpan: e.length, ta: "center", c: "dimmed", children: d ?? "No data" }) }) : t.map((l, u) => {
+          const g = n == null ? void 0 : n[u];
+          return /* @__PURE__ */ a(
+            w.Tr,
             {
-              style: m ? { background: jt[m] } : void 0,
-              children: e.map((x, b) => /* @__PURE__ */ s(
-                S.Td,
+              style: g ? { background: nt[g] } : void 0,
+              children: e.map((v, h) => /* @__PURE__ */ a(
+                w.Td,
                 {
-                  ta: (r == null ? void 0 : r[b]) ?? "left",
-                  children: c[b]
+                  ta: (r == null ? void 0 : r[h]) ?? "left",
+                  children: l[h]
                 },
-                b
+                h
               ))
             },
-            f
+            u
           );
         }) })
       ]
     }
   );
 }
-const Gt = {
+const ot = {
   primary: "filled",
   secondary: "default",
   ghost: "subtle"
 };
-function ke({
+function Rt({
   children: e,
   variant: t = "secondary",
   disabled: r,
@@ -952,10 +1130,10 @@ function ke({
   style: i,
   onClick: o
 }) {
-  return /* @__PURE__ */ s(
-    pt,
+  return /* @__PURE__ */ a(
+    xe,
     {
-      variant: Gt[t],
+      variant: ot[t],
       color: t === "primary" ? "accent" : void 0,
       size: "xs",
       disabled: r,
@@ -966,17 +1144,17 @@ function ke({
     }
   );
 }
-function Se({
+function Ht({
   children: e,
   onClick: t,
   disabled: r,
   title: n,
   variant: i = "default",
   size: o = "md",
-  style: l
+  style: c
 }) {
-  return /* @__PURE__ */ s(
-    vt,
+  return /* @__PURE__ */ a(
+    Ce,
     {
       variant: i === "circle" ? "light" : "subtle",
       radius: i === "circle" ? "xl" : "sm",
@@ -986,12 +1164,12 @@ function Se({
       title: n,
       "aria-label": n,
       onClick: t,
-      style: l,
+      style: c,
       children: e
     }
   );
 }
-function we({
+function Wt({
   value: e,
   onChange: t,
   options: r,
@@ -999,30 +1177,30 @@ function we({
   disabled: i,
   style: o
 }) {
-  return /* @__PURE__ */ s(
-    St,
+  return /* @__PURE__ */ a(
+    Te,
     {
       value: e,
       data: r,
       placeholder: n,
       disabled: i,
       allowDeselect: !1,
-      onChange: (l) => {
-        l !== null && (t == null || t(l));
+      onChange: (c) => {
+        c !== null && (t == null || t(c));
       },
       style: o
     }
   );
 }
-function Ce({
+function _t({
   checked: e,
   onChange: t,
   disabled: r,
   label: n,
   style: i
 }) {
-  return /* @__PURE__ */ s(
-    mt,
+  return /* @__PURE__ */ a(
+    Se,
     {
       checked: e,
       disabled: r,
@@ -1032,15 +1210,15 @@ function Ce({
     }
   );
 }
-function Te({
+function Gt({
   checked: e,
   onChange: t,
   disabled: r,
   size: n = "sm",
   style: i
 }) {
-  return /* @__PURE__ */ s(
-    Lt,
+  return /* @__PURE__ */ a(
+    Be,
     {
       checked: e,
       disabled: r,
@@ -1050,7 +1228,7 @@ function Te({
     }
   );
 }
-function Le({
+function jt({
   value: e,
   onChange: t,
   placeholder: r,
@@ -1058,19 +1236,19 @@ function Le({
   type: i,
   style: o
 }) {
-  return /* @__PURE__ */ s(
-    Tt,
+  return /* @__PURE__ */ a(
+    Me,
     {
       value: e,
       placeholder: r,
       disabled: n,
       type: i,
-      onChange: (l) => t == null ? void 0 : t(l.currentTarget.value),
+      onChange: (c) => t == null ? void 0 : t(c.currentTarget.value),
       style: o
     }
   );
 }
-function Me({
+function Ot({
   value: e,
   onChange: t,
   placeholder: r,
@@ -1078,22 +1256,22 @@ function Me({
   rows: i = 3,
   style: o
 }) {
-  return /* @__PURE__ */ s(
-    Ct,
+  return /* @__PURE__ */ a(
+    Ae,
     {
       value: e,
       placeholder: r,
       disabled: n,
       autosize: !0,
       minRows: i,
-      onChange: (l) => t == null ? void 0 : t(l.currentTarget.value),
+      onChange: (c) => t == null ? void 0 : t(c.currentTarget.value),
       style: o
     }
   );
 }
-function Be({ color: e, style: t }) {
-  const r = y();
-  return /* @__PURE__ */ s(
+function Kt({ color: e, style: t }) {
+  const r = m();
+  return /* @__PURE__ */ a(
     "span",
     {
       style: {
@@ -1108,19 +1286,19 @@ function Be({ color: e, style: t }) {
     }
   );
 }
-function Fe({
+function Xt({
   segments: e,
   total: t,
   topLeftLabel: r,
   topRightLabel: n,
   style: i
 }) {
-  const o = y(), l = t > 0 ? t : 1, u = e.reduce(
-    (c, f) => c + (Number.isFinite(f.value) && f.value > 0 ? f.value : 0),
+  const o = m(), c = t > 0 ? t : 1, f = e.reduce(
+    (l, u) => l + (Number.isFinite(u.value) && u.value > 0 ? u.value : 0),
     0
-  ), d = Math.max(0, l - u);
-  return /* @__PURE__ */ p("div", { style: i, children: [
-    (r != null || n != null) && /* @__PURE__ */ p(
+  ), d = Math.max(0, c - f);
+  return /* @__PURE__ */ y("div", { style: i, children: [
+    (r != null || n != null) && /* @__PURE__ */ y(
       "div",
       {
         style: {
@@ -1131,31 +1309,31 @@ function Fe({
           marginBottom: 6
         },
         children: [
-          /* @__PURE__ */ s("span", { children: r }),
-          /* @__PURE__ */ s("span", { children: n })
+          /* @__PURE__ */ a("span", { children: r }),
+          /* @__PURE__ */ a("span", { children: n })
         ]
       }
     ),
-    /* @__PURE__ */ p("div", { style: { display: "flex", gap: 2, height: 8 }, children: [
-      e.map((c, f) => {
-        const m = Number.isFinite(c.value) && c.value > 0 ? c.value : 0, x = o.category[c.color ?? tt[f % tt.length]];
-        return /* @__PURE__ */ s(
+    /* @__PURE__ */ y("div", { style: { display: "flex", gap: 2, height: 8 }, children: [
+      e.map((l, u) => {
+        const g = Number.isFinite(l.value) && l.value > 0 ? l.value : 0, v = o.category[l.color ?? te[u % te.length]];
+        return /* @__PURE__ */ a(
           "div",
           {
             style: {
-              width: `${m / l * 100}%`,
-              background: x,
+              width: `${g / c * 100}%`,
+              background: v,
               borderRadius: 3
             }
           },
-          c.id
+          l.id
         );
       }),
-      d > 0 && /* @__PURE__ */ s(
+      d > 0 && /* @__PURE__ */ a(
         "div",
         {
           style: {
-            width: `${d / l * 100}%`,
+            width: `${d / c * 100}%`,
             background: o.fill.tertiary,
             borderRadius: 3
           }
@@ -1164,21 +1342,21 @@ function Fe({
     ] })
   ] });
 }
-function $e({
+function Yt({
   title: e,
   leading: t,
   count: r,
   trailing: n,
   children: i,
   defaultOpen: o = !1,
-  style: l
+  style: c
 }) {
-  const u = y(), [d, c] = I(o);
-  return /* @__PURE__ */ p("div", { style: l, children: [
-    /* @__PURE__ */ p(
+  const f = m(), [d, l] = $(o);
+  return /* @__PURE__ */ y("div", { style: c, children: [
+    /* @__PURE__ */ y(
       "div",
       {
-        onClick: () => c((f) => !f),
+        onClick: () => l((u) => !u),
         style: {
           display: "flex",
           alignItems: "center",
@@ -1186,75 +1364,75 @@ function $e({
           padding: "4px 0",
           cursor: "pointer",
           userSelect: "none",
-          color: u.text.primary,
+          color: f.text.primary,
           fontSize: 14
         },
         children: [
-          /* @__PURE__ */ s(ct, { expanded: d }),
+          /* @__PURE__ */ a(he, { expanded: d }),
           t,
-          /* @__PURE__ */ s("span", { style: { fontWeight: 500 }, children: e }),
-          r != null && /* @__PURE__ */ s("span", { style: { color: u.text.tertiary, fontSize: 12 }, children: r }),
-          /* @__PURE__ */ s("span", { style: { flex: 1 } }),
-          n != null && /* @__PURE__ */ s("span", { style: { color: u.text.tertiary }, children: n })
+          /* @__PURE__ */ a("span", { style: { fontWeight: 500 }, children: e }),
+          r != null && /* @__PURE__ */ a("span", { style: { color: f.text.tertiary, fontSize: 12 }, children: r }),
+          /* @__PURE__ */ a("span", { style: { flex: 1 } }),
+          n != null && /* @__PURE__ */ a("span", { style: { color: f.text.tertiary }, children: n })
         ]
       }
     ),
-    d && /* @__PURE__ */ s("div", { style: { paddingLeft: 18, paddingBottom: 4 }, children: i })
+    d && /* @__PURE__ */ a("div", { style: { paddingLeft: 18, paddingBottom: 4 }, children: i })
   ] });
 }
 export {
-  Vt as BarChart,
-  ke as Button,
-  ve as Callout,
-  pe as Card,
-  ge as CardBody,
-  ye as CardHeader,
-  Ce as Checkbox,
-  se as Code,
-  $e as CollapsibleSection,
-  Ut as DiffStats,
-  Zt as DiffView,
-  he as Divider,
-  fe as Grid,
-  ne as H1,
-  oe as H2,
-  ae as H3,
-  Se as IconButton,
-  qt as LineChart,
-  ce as Link,
-  Yt as PieChart,
-  xe as Pill,
-  de as Row,
-  we as Select,
-  ue as Spacer,
-  le as Stack,
-  me as Stat,
-  Be as Swatch,
-  be as Table,
-  ie as Text,
-  Me as TextArea,
-  Le as TextInput,
-  Ht as TodoList,
-  Qt as TodoListCard,
-  Te as Toggle,
-  Fe as UsageBar,
-  He as canvasPaletteDark,
-  Ee as canvasPaletteGrokDark,
-  je as canvasPaletteGrokLight,
-  Ge as canvasPaletteLight,
-  Ne as canvasTokens,
-  Oe as canvasTokensLight,
-  _e as categoryPaletteDark,
-  Ke as categoryPaletteLight,
-  Xe as colorPalette,
-  Jt as computeDAGLayout,
-  re as mergeStyle,
-  tt as usageColorSequence,
-  ee as useCanvasAction,
-  te as useCanvasState,
-  Ae as useEffect,
-  y as useHostTheme,
-  Ie as useMemo,
-  Pe as useRef,
-  Re as useState
+  ut as BarChart,
+  Rt as Button,
+  zt as Callout,
+  $t as Card,
+  Dt as CardBody,
+  Ft as CardHeader,
+  _t as Checkbox,
+  wt as Code,
+  Yt as CollapsibleSection,
+  pt as DiffStats,
+  yt as DiffView,
+  Bt as Divider,
+  Mt as Grid,
+  bt as H1,
+  St as H2,
+  kt as H3,
+  Ht as IconButton,
+  dt as LineChart,
+  Lt as Link,
+  ft as PieChart,
+  It as Pill,
+  Pt as Row,
+  Wt as Select,
+  At as Spacer,
+  Tt as Stack,
+  Et as Stat,
+  Kt as Swatch,
+  Nt as Table,
+  Ct as Text,
+  Ot as TextArea,
+  jt as TextInput,
+  tt as TodoList,
+  mt as TodoListCard,
+  Gt as Toggle,
+  Xt as UsageBar,
+  tr as canvasPaletteDark,
+  rr as canvasPaletteGrokDark,
+  nr as canvasPaletteGrokLight,
+  or as canvasPaletteLight,
+  ar as canvasTokens,
+  ir as canvasTokensLight,
+  sr as categoryPaletteDark,
+  lr as categoryPaletteLight,
+  cr as colorPalette,
+  ht as computeDAGLayout,
+  vt as mergeStyle,
+  te as usageColorSequence,
+  xt as useCanvasAction,
+  gt as useCanvasState,
+  Zt as useEffect,
+  m as useHostTheme,
+  Jt as useMemo,
+  Ut as useRef,
+  Qt as useState
 };