@flesler/cursor-canvas-web 1.0.1 → 1.1.0

package/dist/cursor-canvas.js

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