@flesler/cursor-canvas-web 1.0.0 → 1.0.2

package/dist/cursor-canvas.js

@@ -1,9 +1,9 @@
 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 Be, Stack as we, Text as H, Table as E, Textarea as Te, TextInput as Le, Switch as De } from "@mantine/core";
-import { useState as z, 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 ze, AreaChart as Pe, LineChart as Re, DonutChart as $e, PieChart as He } from "@mantine/charts";
-const oe = {
+import { useComputedColorScheme as xe, Button as ve, Alert as Ee, Card as ke, Checkbox as be, Divider as Ce, Title as W, ActionIcon as Fe, Badge as Se, Group as Ae, Select as Be, Stack as we, Text as $, 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 ae } from "react";
+import { useEffect as Xt, useMemo as Yt, useRef as Vt, useState as Jt } from "react";
+import { BarChart as Pe, AreaChart as He, LineChart as ze, DonutChart as Re, PieChart as $e } from "@mantine/charts";
+const j = {
   foreground: "#E4E4E4EB",
   foregroundSecondary: "#E4E4E48D",
   foregroundTertiary: "#E4E4E45E",
@@ -29,7 +29,7 @@ const oe = {
   diffRemovedLine: "#B8004933",
   diffStripAdded: "#3FA2668F",
   diffStripRemoved: "#FC6B838F"
-}, ae = {
+}, N = {
   foreground: "#141414F0",
   foregroundSecondary: "#141414BD",
   foregroundTertiary: "#1414148A",
@@ -55,7 +55,27 @@ const oe = {
   diffRemovedLine: "#CF2D5614",
   diffStripAdded: "#1F8A65CC",
   diffStripRemoved: "#CF2D56CC"
-}, N = {
+}, Ie = {
+  accent: "#1084FE",
+  buttonBackground: "#1084FE",
+  buttonForeground: "#070707",
+  buttonHoverBackground: "#459FFE",
+  link: "#80BEFE",
+  strokeFocused: "#1084FE"
+}, We = {
+  accent: "#0C64C1",
+  buttonBackground: "#0C64C1",
+  buttonForeground: "#FAFAFA",
+  buttonHoverBackground: "#1084FE",
+  link: "#0C64C1",
+  strokeFocused: "#0C64C1"
+}, at = {
+  ...j,
+  ...Ie
+}, it = {
+  ...N,
+  ...We
+}, O = {
   gray: "#8888A8E0",
   purple: "#7B64B8F0",
   green: "#1F8A65E8",
@@ -117,13 +137,13 @@ function ce(e, t) {
     category: t
   };
 }
-const Ie = ce(
-  oe,
-  N
-), We = ce(
-  ae,
+const Ge = ce(
+  j,
+  O
+), je = ce(
+  N,
   ie
-), nt = N, te = [
+), ct = O, ne = [
   "blue",
   "purple",
   "green",
@@ -133,7 +153,7 @@ const Ie = ce(
   "orange",
   "red",
   "gray"
-], Ge = {
+], Ne = {
   green: "#1F8A65E8",
   darkGreen: "#0D855AE0",
   lightGreen: "#52B896E0",
@@ -154,13 +174,13 @@ const Ie = ce(
   vibrantTeal: "#2A9A8AE0",
   muted: "#8888A8E0",
   neutralLine: "#888899D0"
-}, Ne = {
+}, Oe = {
   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 }
-}, je = {
+}, _e = {
   "0.5": 2,
   1: 4,
   "1.5": 6,
@@ -176,7 +196,7 @@ const Ie = ce(
   8: 32,
   9: 36,
   10: 40
-}, Oe = {
+}, qe = {
   none: 0,
   xs: 2,
   sm: 4,
@@ -197,7 +217,7 @@ const Ie = ce(
   "#7DCAB0E0",
   "#8888A8E0",
   "#2A9A8AE0"
-], b = {
+], k = {
   success: "#1F8A65",
   danger: "#CF2D56",
   warning: "#E8A33D",
@@ -206,7 +226,7 @@ const Ie = ce(
   added: "#1F8A65",
   deleted: "#CF2D56",
   renamed: "#5A6CC0"
-}, j = {
+}, _ = {
   success: "green",
   danger: "red",
   warning: "orange",
@@ -216,30 +236,30 @@ const Ie = ce(
   deleted: "red",
   renamed: "indigo"
 };
-function _e(e) {
-  const t = e === "dark" ? Ie : We;
+function Qe(e) {
+  const t = e === "dark" ? Ge : je;
   return {
     ...t,
     kind: e,
     tokens: t,
-    palette: e === "dark" ? oe : ae,
-    category: e === "dark" ? N : ie,
+    palette: e === "dark" ? j : N,
+    category: e === "dark" ? O : 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: Ne,
-    spacing: je
+    chart: { palette: Ne, sequence: I },
+    radius: qe,
+    typography: Oe,
+    spacing: _e
   };
 }
-function S() {
+function F() {
   const e = xe("light");
-  return _e(e === "dark" ? "dark" : "light");
+  return Qe(e === "dark" ? "dark" : "light");
 }
 function se(e, t) {
-  return e ? b[e] : I[t % I.length];
+  return e ? k[e] : I[t % I.length];
 }
-function le(e, t) {
+function de(e, t) {
   return e.map((r, a) => {
     const c = { category: r };
     for (const n of t)
@@ -247,7 +267,7 @@ function le(e, t) {
     return c;
   });
 }
-function de(e) {
+function le(e) {
   return e.map((t, r) => ({
     name: t.name,
     color: se(t.tone, r)
@@ -257,16 +277,16 @@ function ue(e, t) {
   if (!(!e && !t))
     return (r) => `${t ?? ""}${r}${e ?? ""}`;
 }
-function qe(e, t) {
+function Ke(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);
+  const t = Ke(e.referenceLines, !!e.horizontal);
   if (e.stacked || e.normalized)
     return { referenceLines: t };
   const r = e.beginAtZero !== !1, a = [
@@ -275,26 +295,26 @@ function fe(e) {
   ];
   return e.horizontal ? { xAxisProps: { domain: a }, referenceLines: t } : { yAxisProps: { domain: a }, referenceLines: t };
 }
-function Qe(e, t, r) {
+function Xe(e, t, r) {
   return e !== void 0 ? e : t.length === 1 && r.length <= 8;
 }
-function ot({
+function st({
   categories: e,
   series: t,
   height: r = 240,
   fill: a,
   valueSuffix: c,
   valuePrefix: n,
-  showValues: l,
+  showValues: d,
   showHoverGuide: u = !0,
-  beginAtZero: d,
+  beginAtZero: l,
   yMin: s,
   yMax: f,
   referenceLines: y,
   style: x
 }) {
-  const v = le(e, t), B = de(t), k = fe({
-    beginAtZero: d,
+  const v = de(e, t), B = le(t), b = fe({
+    beginAtZero: l,
     yMin: s,
     yMax: f,
     referenceLines: y,
@@ -307,30 +327,30 @@ function ot({
     curveType: "monotone",
     withLegend: t.length > 1,
     valueFormatter: ue(c, n),
-    withPointLabels: l ?? e.length <= 20,
+    withPointLabels: d ?? e.length <= 20,
     tooltipProps: u ? void 0 : { cursor: !1 },
-    ...k,
+    ...b,
     style: x
   };
-  return a ? /* @__PURE__ */ i(Pe, { ...C }) : /* @__PURE__ */ i(Re, { ...C });
+  return a ? /* @__PURE__ */ i(He, { ...C }) : /* @__PURE__ */ i(ze, { ...C });
 }
-function at({
+function dt({
   categories: e,
   series: t,
   height: r = 240,
   stacked: a,
   horizontal: c,
   normalized: n,
-  valueSuffix: l,
+  valueSuffix: d,
   valuePrefix: u,
-  showValues: d,
+  showValues: l,
   beginAtZero: s,
   yMin: f,
   yMax: y,
   referenceLines: x,
   style: v
 }) {
-  const B = le(e, t), k = n ? "percent" : a ? "stacked" : "default", C = fe({
+  const B = de(e, t), b = n ? "percent" : a ? "stacked" : "default", C = fe({
     beginAtZero: s,
     yMin: f,
     yMax: y,
@@ -338,102 +358,127 @@ function at({
     horizontal: c,
     stacked: a,
     normalized: n
-  }), w = !a && !n && Qe(d, t, e);
+  }), w = !a && !n && Xe(l, t, e);
   return /* @__PURE__ */ i(
-    ze,
+    Pe,
     {
       h: r,
       data: B,
       dataKey: "category",
-      series: de(t),
-      type: k,
+      series: le(t),
+      type: b,
       orientation: c ? "vertical" : "horizontal",
       withLegend: t.length > 1,
-      valueFormatter: ue(l, u),
+      valueFormatter: ue(d, u),
       withBarValueLabel: w,
       ...C,
       style: v
     }
   );
 }
-function it({ data: e, size: t = 200, donut: r, style: a }) {
-  const n = {
-    data: e.map((l, u) => ({
-      name: l.label,
-      value: l.value,
-      color: se(l.tone, u)
-    })),
-    size: t,
-    withTooltip: !0,
-    style: a
-  };
-  return r ? /* @__PURE__ */ i($e, { ...n }) : /* @__PURE__ */ i(He, { ...n, withLabelsLine: !1 });
+function lt({ data: e, size: t = 200, donut: r, style: a }) {
+  const c = e.map((d, u) => ({
+    name: d.label,
+    value: d.value,
+    color: se(d.tone, u)
+  }));
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: t,
+        minHeight: t,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: r ? /* @__PURE__ */ i(
+        Re,
+        {
+          data: c,
+          size: t,
+          withTooltip: !0,
+          style: a
+        }
+      ) : /* @__PURE__ */ i(
+        $e,
+        {
+          data: c,
+          size: t,
+          withTooltip: !0,
+          withLabelsLine: !1,
+          style: a
+        }
+      )
+    }
+  );
 }
-function ct(e) {
+function ut(e) {
   const {
     nodes: t,
     edges: r,
     direction: a = "vertical",
     nodeWidth: c = 160,
     nodeHeight: n = 40,
-    rankGap: l = 64,
+    rankGap: d = 64,
     nodeGap: u = 48,
-    padding: d = 24
+    padding: l = 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, B = 2, k = new Map(s.map((o) => [o, x])), C = /* @__PURE__ */ new Set(), w = (o, h) => `${o}\0${h}`, _ = (o) => {
-    k.set(o, v);
+  const x = 0, v = 1, B = 2, b = new Map(s.map((o) => [o, x])), C = /* @__PURE__ */ new Set(), w = (o, h) => `${o}\0${h}`, Q = (o) => {
+    b.set(o, v);
     for (const h of y.get(o) ?? []) {
-      const p = k.get(h);
-      p === v ? C.add(w(o, h)) : p === x && _(h);
+      const p = b.get(h);
+      p === v ? C.add(w(o, h)) : p === x && Q(h);
     }
-    k.set(o, B);
+    b.set(o, B);
   };
-  for (const o of s) k.get(o) === x && _(o);
+  for (const o of s) b.get(o) === x && Q(o);
   const ge = r.filter(
     (o) => f.has(o.from) && f.has(o.to) && !C.has(w(o.from, o.to))
-  ), F = new Map(s.map((o) => [o, 0])), q = new Map(s.map((o) => [o, []]));
+  ), S = new Map(s.map((o) => [o, 0])), K = 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])), P = s.filter((o) => (F.get(o) ?? 0) === 0);
-  for (; P.length > 0; ) {
-    const o = P.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 && P.push(p);
+    K.get(o.from).push(o.to), S.set(o.to, (S.get(o.to) ?? 0) + 1);
+  const T = new Map(s.map((o) => [o, 0])), H = s.filter((o) => (S.get(o) ?? 0) === 0);
+  for (; H.length > 0; ) {
+    const o = H.shift(), h = T.get(o);
+    for (const p of K.get(o))
+      T.set(p, Math.max(T.get(p), h + 1)), S.set(p, S.get(p) - 1), S.get(p) === 0 && H.push(p);
   }
   const A = /* @__PURE__ */ new Map();
   for (const o of s) {
     const h = T.get(o);
     A.has(h) || A.set(h, []), A.get(h).push(o);
   }
-  const L = [...A.keys()].sort((o, h) => o - h), m = a === "vertical", Q = (o) => o * (m ? c : n) + Math.max(0, o - 1) * u, K = Math.max(
+  const L = [...A.keys()].sort((o, h) => o - h), m = a === "vertical", X = (o) => o * (m ? c : n) + Math.max(0, o - 1) * u, Y = Math.max(
     0,
-    ...L.map((o) => Q(A.get(o).length))
-  ), D = /* @__PURE__ */ new Map(), X = [];
+    ...L.map((o) => X(A.get(o).length))
+  ), D = /* @__PURE__ */ new Map(), V = [];
   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({
+    const p = A.get(o), z = X(p.length), R = l + (Y - z) / 2, M = l + h * ((m ? n : c) + d);
+    p.forEach((ee, te) => {
+      const re = R + te * ((m ? c : n) + u), ye = m ? re : M, me = m ? M : re;
+      D.set(ee, { id: ee, x: ye, y: me, rank: o, order: te });
+    }), V.push({
       rank: o,
-      x: m ? $ : M,
-      y: m ? M : $,
-      width: m ? R : c,
-      height: m ? n : R,
+      x: m ? R : M,
+      y: m ? M : R,
+      width: m ? z : c,
+      height: m ? n : z,
       nodeIds: p
     });
   });
-  const Y = (o, h) => o ? m ? {
+  const J = (o, h) => o ? m ? {
     x: o.x + c / 2,
     y: h === "source" ? o.y + n : o.y
   } : {
     x: h === "source" ? o.x + c : o.x,
     y: o.y + n / 2
   } : { x: 0, y: 0 }, pe = r.filter((o) => f.has(o.from) && f.has(o.to)).map((o) => {
-    const h = Y(D.get(o.from), "source"), p = Y(D.get(o.to), "target");
+    const h = J(D.get(o.from), "source"), p = J(D.get(o.to), "target");
     return {
       from: o.from,
       to: o.to,
@@ -443,17 +488,17 @@ function ct(e) {
       targetY: p.y,
       isBackEdge: C.has(w(o.from, o.to))
     };
-  }), V = d * 2 + L.length * (m ? n : c) + Math.max(0, L.length - 1) * l, J = d * 2 + K;
+  }), U = l * 2 + L.length * (m ? n : c) + Math.max(0, L.length - 1) * d, Z = l * 2 + Y;
   return {
     nodes: [...D.values()],
     edges: pe,
-    ranks: X,
+    ranks: V,
     direction: a,
-    width: m ? J : V,
-    height: m ? V : J
+    width: m ? Z : U,
+    height: m ? U : Z
   };
 }
-function st({
+function ft({
   additions: e = 0,
   deletions: t = 0,
   style: r
@@ -470,11 +515,11 @@ function st({
         ...r
       },
       children: [
-        e > 0 && /* @__PURE__ */ g("span", { style: { color: b.added }, children: [
+        e > 0 && /* @__PURE__ */ g("span", { style: { color: k.added }, children: [
           "+",
           e
         ] }),
-        t > 0 && /* @__PURE__ */ g("span", { style: { color: b.deleted }, children: [
+        t > 0 && /* @__PURE__ */ g("span", { style: { color: k.deleted }, children: [
           "-",
           t
         ] })
@@ -482,19 +527,19 @@ function st({
     }
   );
 }
-const Ke = {
+const Ye = {
   added: "+",
   removed: "-",
   unchanged: " "
 };
-function lt({
+function ht({
   lines: e,
   showLineNumbers: t = !0,
   coloredLineNumbers: r = !0,
   showAccentStrip: a = !0,
   style: c
 }) {
-  const n = S(), l = (s) => s === "added" ? n.diff.insertedLine : s === "removed" ? n.diff.removedLine : "transparent", u = (s) => s === "added" ? n.diff.stripAdded : s === "removed" ? n.diff.stripRemoved : "transparent", d = (s) => r && s === "added" ? b.added : r && s === "removed" ? b.deleted : n.text.tertiary;
+  const n = F(), d = (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", l = (s) => r && s === "added" ? k.added : r && s === "removed" ? k.deleted : n.text.tertiary;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -512,7 +557,7 @@ function lt({
           style: {
             display: "flex",
             alignItems: "stretch",
-            background: l(s.type),
+            background: d(s.type),
             borderLeft: a ? `3px solid ${u(s.type)}` : void 0
           },
           children: [
@@ -525,7 +570,7 @@ function lt({
                   textAlign: "right",
                   paddingRight: 10,
                   userSelect: "none",
-                  color: d(s.type)
+                  color: l(s.type)
                 },
                 children: s.lineNumber ?? ""
               }
@@ -538,9 +583,9 @@ function lt({
                   width: 14,
                   textAlign: "center",
                   userSelect: "none",
-                  color: d(s.type)
+                  color: l(s.type)
                 },
-                children: Ke[s.type]
+                children: Ye[s.type]
               }
             ),
             /* @__PURE__ */ i(
@@ -562,8 +607,8 @@ 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;
+function Ve({ status: e }) {
+  const t = F(), r = e === "completed" ? k.success : e === "in_progress" ? t.accent.primary : e === "cancelled" ? k.danger : t.text.tertiary;
   return /* @__PURE__ */ g(
     "svg",
     {
@@ -599,15 +644,15 @@ function Xe({ status: e }) {
     }
   );
 }
-function Ye({
+function Je({
   todos: e,
   dimmedTodoIds: t,
   onTodoClick: r,
   style: a
 }) {
-  const c = S();
+  const c = F();
   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);
+    const d = t == null ? void 0 : t.has(n.id);
     return /* @__PURE__ */ g(
       "button",
       {
@@ -626,10 +671,10 @@ function Ye({
           color: c.text.primary,
           fontSize: 14,
           lineHeight: "20px",
-          opacity: l ? 0.45 : 1
+          opacity: d ? 0.45 : 1
         },
         children: [
-          /* @__PURE__ */ i(Xe, { status: n.status }),
+          /* @__PURE__ */ i(Ve, { status: n.status }),
           /* @__PURE__ */ i(
             "span",
             {
@@ -646,16 +691,16 @@ function Ye({
     );
   }) });
 }
-function dt({
+function gt({
   todos: e,
   dimmedTodoIds: t,
   defaultExpanded: r = !1,
   onTodoClick: a,
   style: c
 }) {
-  const n = S(), [l, u] = z(r);
+  const n = F(), [d, u] = P(r);
   if (e.length === 0) return null;
-  const d = e.filter((s) => s.status === "completed").length;
+  const l = e.filter((s) => s.status === "completed").length;
   return /* @__PURE__ */ g(
     "div",
     {
@@ -693,7 +738,7 @@ function dt({
                   viewBox: "0 0 12 12",
                   fill: "none",
                   style: {
-                    transform: l ? "rotate(90deg)" : "none",
+                    transform: d ? "rotate(90deg)" : "none",
                     transition: "transform 120ms"
                   },
                   "aria-hidden": !0,
@@ -712,7 +757,7 @@ function dt({
               /* @__PURE__ */ i("span", { children: "Todos" }),
               /* @__PURE__ */ i("span", { style: { flex: 1 } }),
               /* @__PURE__ */ g("span", { children: [
-                d,
+                l,
                 " of ",
                 e.length,
                 " Done"
@@ -720,8 +765,8 @@ function dt({
             ]
           }
         ),
-        l && /* @__PURE__ */ i("div", { style: { padding: 6 }, children: /* @__PURE__ */ i(
-          Ye,
+        d && /* @__PURE__ */ i("div", { style: { padding: 6 }, children: /* @__PURE__ */ i(
+          Je,
           {
             todos: e,
             dimmedTodoIds: t,
@@ -732,77 +777,77 @@ function dt({
     }
   );
 }
-function ut(e, t) {
-  const r = `canvas:${e}`, [a, c] = z(() => {
+function pt(e, t) {
+  const r = `canvas:${e}`, [a, c] = P(() => {
     if (typeof localStorage > "u") return t;
     try {
-      const l = localStorage.getItem(r);
-      return l === null ? t : JSON.parse(l);
+      const d = localStorage.getItem(r);
+      return d === null ? t : JSON.parse(d);
     } catch {
       return t;
     }
   }), n = G(
-    (l) => {
+    (d) => {
       c((u) => {
-        const d = typeof l == "function" ? l(u) : l;
+        const l = typeof d == "function" ? d(u) : d;
         try {
-          localStorage == null || localStorage.setItem(r, JSON.stringify(d));
+          localStorage == null || localStorage.setItem(r, JSON.stringify(l));
         } catch {
         }
-        return d;
+        return l;
       });
     },
     [r]
   );
   return [a, n];
 }
-function ft() {
+function yt() {
   return G((e) => {
   }, []);
 }
-function ht(e, t) {
+function mt(e, t) {
   return { ...e, ...t };
 }
-function gt({ children: e, style: t }) {
+function xt({ children: e, style: t }) {
   return /* @__PURE__ */ i(W, { order: 1, fz: 24, lh: "30px", style: t, children: e });
 }
-function pt({ children: e, style: t }) {
+function vt({ children: e, style: t }) {
   return /* @__PURE__ */ i(W, { order: 2, fz: 18, lh: "24px", style: t, children: e });
 }
-function yt({ children: e, style: t }) {
+function Et({ children: e, style: t }) {
   return /* @__PURE__ */ i(W, { order: 3, fz: 16, lh: "22px", style: t, children: e });
 }
-const Ve = {
+const Ue = {
   normal: 400,
   medium: 500,
   semibold: 600,
   bold: 700
 };
-function mt({
+function kt({
   children: e,
   tone: t = "primary",
   size: r = "body",
   as: a = "p",
   weight: c = "normal",
   italic: n,
-  truncate: l,
+  truncate: d,
   style: u
 }) {
-  const d = S();
+  const l = F();
   return /* @__PURE__ */ i(
-    H,
+    $,
     {
       component: a,
       size: r === "small" ? "xs" : "sm",
-      fw: Ve[c],
-      c: t === "primary" ? void 0 : d.text[t],
-      truncate: l,
+      fw: Ue[c],
+      c: t === "primary" ? void 0 : l.text[t],
+      truncate: d,
       style: { fontStyle: n ? "italic" : void 0, ...u },
       children: e
     }
   );
 }
-function xt({ children: e, style: t }) {
+function bt({ children: e, style: t }) {
   return /* @__PURE__ */ i(
     "code",
     {
@@ -818,7 +863,7 @@ function xt({ children: e, style: t }) {
     }
   );
 }
-function vt({ children: e, href: t, style: r }) {
+function Ct({ children: e, href: t, style: r }) {
   return /* @__PURE__ */ i(
     "a",
     {
@@ -830,17 +875,17 @@ function vt({ children: e, href: t, style: r }) {
     }
   );
 }
-function Et({ children: e, gap: t, style: r }) {
+function Ft({ children: e, gap: t, style: r }) {
   return /* @__PURE__ */ i(we, { gap: t, style: r, children: e });
 }
-const re = {
+const oe = {
   start: "flex-start",
   center: "center",
   end: "flex-end",
   stretch: "stretch",
   "space-between": "space-between"
 };
-function bt({
+function St({
   children: e,
   gap: t,
   align: r = "center",
@@ -852,18 +897,18 @@ function bt({
     Ae,
     {
       gap: t,
-      align: re[r],
-      justify: re[a],
+      align: oe[r],
+      justify: oe[a],
       wrap: c ? "wrap" : "nowrap",
       style: n,
       children: e
     }
   );
 }
-function kt() {
+function At() {
   return /* @__PURE__ */ i("div", { style: { flex: 1 } });
 }
-function Ct({ children: e, columns: t, gap: r = 16, align: a, style: c }) {
+function Bt({ children: e, columns: t, gap: r = 16, align: a, style: c }) {
   const n = typeof t == "number" ? `repeat(${t}, minmax(0, 1fr))` : t;
   return /* @__PURE__ */ i(
     "div",
@@ -879,41 +924,41 @@ function Ct({ children: e, columns: t, gap: r = 16, align: a, style: c }) {
     }
   );
 }
-function St({ style: e }) {
+function wt({ style: e }) {
   return /* @__PURE__ */ i(Ce, { style: e });
 }
-const O = Me({
+const q = Me({
   collapsible: !1,
   open: !0,
   toggle: () => {
   }
 });
-function Ft({
+function Tt({
   children: e,
   variant: t = "default",
   collapsible: r = !1,
   defaultOpen: a = !0,
   open: c,
   onOpenChange: n,
-  style: l
+  style: d
 }) {
-  const [u, d] = z(a), s = c ?? u, f = G(() => {
+  const [u, l] = P(a), s = c ?? u, f = G(() => {
     const y = !s;
-    c === void 0 && d(y), n == null || n(y);
+    c === void 0 && l(y), n == null || n(y);
   }, [s, c, n]);
   return /* @__PURE__ */ i(
-    be,
+    ke,
     {
       withBorder: t !== "borderless",
       radius: "md",
       padding: 0,
-      style: l,
-      children: /* @__PURE__ */ i(O.Provider, { value: { collapsible: r, open: s, toggle: f }, children: e })
+      style: d,
+      children: /* @__PURE__ */ i(q.Provider, { value: { collapsible: r, open: s, toggle: f }, children: e })
     }
   );
 }
-function At({ children: e, trailing: t, style: r }) {
-  const { collapsible: a, open: c, toggle: n } = ne(O);
+function Lt({ children: e, trailing: t, style: r }) {
+  const { collapsible: a, open: c, toggle: n } = ae(q);
   return /* @__PURE__ */ g(
     "div",
     {
@@ -942,8 +987,8 @@ function At({ children: e, trailing: t, style: r }) {
     }
   );
 }
-function Bt({ children: e, style: t }) {
-  const { collapsible: r, open: a } = ne(O);
+function Dt({ children: e, style: t }) {
+  const { collapsible: r, open: a } = ae(q);
   return r && !a ? null : /* @__PURE__ */ i("div", { style: { padding: 14, ...t }, children: e });
 }
 function he({ expanded: e }) {
@@ -972,44 +1017,44 @@ function he({ expanded: e }) {
     }
   );
 }
-function wt({ value: e, label: t, tone: r, style: a }) {
+function Mt({ value: e, label: t, tone: r, style: a }) {
   return /* @__PURE__ */ g("div", { style: a, children: [
     /* @__PURE__ */ i(
-      H,
+      $,
       {
         fz: 22,
         fw: 700,
         lh: 1.2,
-        c: r ? `${j[r]}.6` : void 0,
+        c: r ? `${_[r]}.6` : void 0,
         children: e
       }
     ),
-    /* @__PURE__ */ i(H, { fz: 12, c: "dimmed", children: t })
+    /* @__PURE__ */ i($, { fz: 12, c: "dimmed", children: t })
   ] });
 }
-function Tt({
+function Pt({
   children: e,
   active: t,
   tone: r = "neutral",
   size: a = "md",
   leadingContent: c,
   keyboardHint: n,
-  title: l,
+  title: d,
   style: u,
-  onClick: d
+  onClick: l
 }) {
   return /* @__PURE__ */ i(
-    Fe,
+    Se,
     {
-      color: j[r],
+      color: _[r],
       variant: t ? "filled" : "light",
       size: a === "sm" ? "sm" : "md",
       leftSection: c,
       rightSection: n,
-      title: l,
-      onClick: d,
+      title: d,
+      onClick: l,
       style: {
-        cursor: d ? "pointer" : void 0,
+        cursor: l ? "pointer" : void 0,
         textTransform: "none",
         ...u
       },
@@ -1017,7 +1062,7 @@ function Tt({
     }
   );
 }
-function Lt({
+function Ht({
   children: e,
   tone: t = "neutral",
   title: r,
@@ -1027,7 +1072,7 @@ function Lt({
   return /* @__PURE__ */ i(
     Ee,
     {
-      color: j[t],
+      color: _[t],
       title: r,
       icon: a,
       variant: "light",
@@ -1036,23 +1081,23 @@ function Lt({
     }
   );
 }
-const Je = {
+const Ze = {
   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 zt({
   headers: e,
   rows: t,
   columnAlign: r,
   rowTone: a,
   framed: c = !0,
   striped: n,
-  stickyHeader: l,
+  stickyHeader: d,
   style: u,
-  emptyMessage: d
+  emptyMessage: l
 }) {
   return /* @__PURE__ */ g(
     E,
@@ -1060,17 +1105,17 @@ function Dt({
       withTableBorder: c,
       withColumnBorders: !1,
       striped: n,
-      stickyHeader: l,
+      stickyHeader: d,
       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) => {
+        /* @__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: l ?? "No data" }) }) : t.map((s, f) => {
           const y = a == null ? void 0 : a[f];
           return /* @__PURE__ */ i(
             E.Tr,
             {
-              style: y ? { background: Je[y] } : void 0,
+              style: y ? { background: Ze[y] } : void 0,
               children: e.map((x, v) => /* @__PURE__ */ i(
                 E.Td,
                 {
@@ -1087,12 +1132,12 @@ function Dt({
     }
   );
 }
-const Ue = {
+const et = {
   primary: "filled",
   secondary: "default",
   ghost: "subtle"
 };
-function Mt({
+function Rt({
   children: e,
   variant: t = "secondary",
   disabled: r,
@@ -1103,7 +1148,7 @@ function Mt({
   return /* @__PURE__ */ i(
     ve,
     {
-      variant: Ue[t],
+      variant: et[t],
       size: "xs",
       disabled: r,
       type: a,
@@ -1113,17 +1158,17 @@ function Mt({
     }
   );
 }
-function zt({
+function $t({
   children: e,
   onClick: t,
   disabled: r,
   title: a,
   variant: c = "default",
   size: n = "md",
-  style: l
+  style: d
 }) {
   return /* @__PURE__ */ i(
-    Se,
+    Fe,
     {
       variant: c === "circle" ? "light" : "subtle",
       radius: c === "circle" ? "xl" : "sm",
@@ -1133,12 +1178,12 @@ function zt({
       title: a,
       "aria-label": a,
       onClick: t,
-      style: l,
+      style: d,
       children: e
     }
   );
 }
-function Pt({
+function It({
   value: e,
   onChange: t,
   options: r,
@@ -1154,14 +1199,14 @@ function Pt({
       placeholder: a,
       disabled: c,
       allowDeselect: !1,
-      onChange: (l) => {
-        l !== null && (t == null || t(l));
+      onChange: (d) => {
+        d !== null && (t == null || t(d));
       },
       style: n
     }
   );
 }
-function Rt({
+function Wt({
   checked: e,
   onChange: t,
   disabled: r,
@@ -1169,7 +1214,7 @@ function Rt({
   style: c
 }) {
   return /* @__PURE__ */ i(
-    ke,
+    be,
     {
       checked: e,
       disabled: r,
@@ -1179,7 +1224,7 @@ function Rt({
     }
   );
 }
-function $t({
+function Gt({
   checked: e,
   onChange: t,
   disabled: r,
@@ -1197,7 +1242,7 @@ function $t({
     }
   );
 }
-function Ht({
+function jt({
   value: e,
   onChange: t,
   placeholder: r,
@@ -1212,12 +1257,12 @@ function Ht({
       placeholder: r,
       disabled: a,
       type: c,
-      onChange: (l) => t == null ? void 0 : t(l.currentTarget.value),
+      onChange: (d) => t == null ? void 0 : t(d.currentTarget.value),
       style: n
     }
   );
 }
-function It({
+function Nt({
   value: e,
   onChange: t,
   placeholder: r,
@@ -1233,13 +1278,13 @@ function It({
       disabled: a,
       autosize: !0,
       minRows: c,
-      onChange: (l) => t == null ? void 0 : t(l.currentTarget.value),
+      onChange: (d) => t == null ? void 0 : t(d.currentTarget.value),
       style: n
     }
   );
 }
-function Wt({ color: e, style: t }) {
-  const r = S();
+function Ot({ color: e, style: t }) {
+  const r = F();
   return /* @__PURE__ */ i(
     "span",
     {
@@ -1255,17 +1300,17 @@ function Wt({ color: e, style: t }) {
     }
   );
 }
-function Gt({
+function _t({
   segments: e,
   total: t,
   topLeftLabel: r,
   topRightLabel: a,
   style: c
 }) {
-  const n = S(), l = t > 0 ? t : 1, u = e.reduce(
+  const n = F(), d = t > 0 ? t : 1, u = e.reduce(
     (s, f) => s + (Number.isFinite(f.value) && f.value > 0 ? f.value : 0),
     0
-  ), d = Math.max(0, l - u);
+  ), l = Math.max(0, d - u);
   return /* @__PURE__ */ g("div", { style: c, children: [
     (r != null || a != null) && /* @__PURE__ */ g(
       "div",
@@ -1285,12 +1330,12 @@ function Gt({
     ),
     /* @__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]];
+        const y = Number.isFinite(s.value) && s.value > 0 ? s.value : 0, x = n.category[s.color ?? ne[f % ne.length]];
         return /* @__PURE__ */ i(
           "div",
           {
             style: {
-              width: `${y / l * 100}%`,
+              width: `${y / d * 100}%`,
               background: x,
               borderRadius: 3
             }
@@ -1298,11 +1343,11 @@ function Gt({
           s.id
         );
       }),
-      d > 0 && /* @__PURE__ */ i(
+      l > 0 && /* @__PURE__ */ i(
         "div",
         {
           style: {
-            width: `${d / l * 100}%`,
+            width: `${l / d * 100}%`,
             background: n.fill.tertiary,
             borderRadius: 3
           }
@@ -1311,17 +1356,17 @@ function Gt({
     ] })
   ] });
 }
-function Nt({
+function qt({
   title: e,
   leading: t,
   count: r,
   trailing: a,
   children: c,
   defaultOpen: n = !1,
-  style: l
+  style: d
 }) {
-  const u = S(), [d, s] = z(n);
-  return /* @__PURE__ */ g("div", { style: l, children: [
+  const u = F(), [l, s] = P(n);
+  return /* @__PURE__ */ g("div", { style: d, children: [
     /* @__PURE__ */ g(
       "div",
       {
@@ -1337,7 +1382,7 @@ function Nt({
           fontSize: 14
         },
         children: [
-          /* @__PURE__ */ i(he, { expanded: d }),
+          /* @__PURE__ */ i(he, { expanded: l }),
           t,
           /* @__PURE__ */ i("span", { style: { fontWeight: 500 }, children: e }),
           r != null && /* @__PURE__ */ i("span", { style: { color: u.text.tertiary, fontSize: 12 }, children: r }),
@@ -1346,61 +1391,63 @@ function Nt({
         ]
       }
     ),
-    d && /* @__PURE__ */ i("div", { style: { paddingLeft: 18, paddingBottom: 4 }, children: c })
+    l && /* @__PURE__ */ i("div", { style: { paddingLeft: 18, paddingBottom: 4 }, children: c })
   ] });
 }
 export {
-  at as BarChart,
-  Mt as Button,
-  Lt as Callout,
-  Ft as Card,
-  Bt as CardBody,
-  At as CardHeader,
-  Rt as Checkbox,
-  xt as Code,
-  Nt as CollapsibleSection,
-  st as DiffStats,
-  lt as DiffView,
-  St as Divider,
-  Ct as Grid,
-  gt as H1,
-  pt as H2,
-  yt as H3,
-  zt as IconButton,
-  ot as LineChart,
-  vt as Link,
-  it as PieChart,
-  Tt as Pill,
-  bt as Row,
-  Pt as Select,
-  kt as Spacer,
-  Et as Stack,
-  wt 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,
-  N as categoryPaletteDark,
+  dt as BarChart,
+  Rt as Button,
+  Ht as Callout,
+  Tt as Card,
+  Dt as CardBody,
+  Lt as CardHeader,
+  Wt as Checkbox,
+  bt as Code,
+  qt as CollapsibleSection,
+  ft as DiffStats,
+  ht as DiffView,
+  wt as Divider,
+  Bt as Grid,
+  xt as H1,
+  vt as H2,
+  Et as H3,
+  $t as IconButton,
+  st as LineChart,
+  Ct as Link,
+  lt as PieChart,
+  Pt as Pill,
+  St as Row,
+  It as Select,
+  At as Spacer,
+  Ft as Stack,
+  Mt as Stat,
+  Ot as Swatch,
+  zt as Table,
+  kt as Text,
+  Nt as TextArea,
+  jt as TextInput,
+  Je as TodoList,
+  gt as TodoListCard,
+  Gt as Toggle,
+  _t as UsageBar,
+  j as canvasPaletteDark,
+  at as canvasPaletteGrokDark,
+  it as canvasPaletteGrokLight,
+  N as canvasPaletteLight,
+  Ge as canvasTokens,
+  je as canvasTokensLight,
+  O 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
+  ct as colorPalette,
+  ut as computeDAGLayout,
+  mt as mergeStyle,
+  de as reshapeLineChartData,
+  ne as usageColorSequence,
+  yt as useCanvasAction,
+  pt as useCanvasState,
+  Xt as useEffect,
+  F as useHostTheme,
+  Yt as useMemo,
+  Vt as useRef,
+  Jt as useState
 };