kaleido-ui 0.2.7 → 0.2.9

package/dist/web/index.cjs

@@ -93,6 +93,7 @@ __export(web_exports, {
   CopyIcon: () => CopyIcon,
   Copyable: () => Copyable,
   DEFAULT_AMOUNT_LOCALE: () => DEFAULT_AMOUNT_LOCALE,
+  DatePicker: () => DatePicker,
   DateRangeFilter: () => DateRangeFilter,
   DepositAssetSelection: () => DepositAssetSelection,
   DepositGeneratedView: () => DepositGeneratedView,
@@ -9548,45 +9549,253 @@ function Boundary({ label, value }) {
   ] });
 }
 
-// src/web/components/value-list.tsx
+// src/web/components/date-picker.tsx
+var React26 = __toESM(require("react"), 1);
 var import_jsx_runtime98 = require("react/jsx-runtime");
+var pad = (n) => String(n).padStart(2, "0");
+var toIso = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+function parseIso(value) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value ?? "");
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return toIso(d) === value ? d : null;
+}
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Select a date",
+  min,
+  max,
+  disabled,
+  locale = "en-US",
+  weekStartsOn = 1,
+  id,
+  previousMonthLabel = "Previous month",
+  nextMonthLabel = "Next month",
+  clearLabel = "Clear",
+  todayLabel = "Today",
+  className,
+  ...rest
+}) {
+  const selected = parseIso(value);
+  const minDate = parseIso(min);
+  const maxDate = parseIso(max);
+  const [open, setOpen] = React26.useState(false);
+  const [focused, setFocused] = React26.useState(() => selected ?? /* @__PURE__ */ new Date());
+  const gridRef = React26.useRef(null);
+  const wantFocus = React26.useRef(false);
+  const inRange = (d) => !(minDate && d < minDate) && !(maxDate && d > maxDate);
+  const handleOpenChange = (next) => {
+    if (next) {
+      setFocused(selected ?? /* @__PURE__ */ new Date());
+      wantFocus.current = true;
+    }
+    setOpen(next);
+  };
+  React26.useEffect(() => {
+    if (!open || !wantFocus.current) return;
+    gridRef.current?.querySelector('button[tabindex="0"]')?.focus();
+  }, [open, focused]);
+  const month = startOfMonth(focused);
+  const lead = (month.getDay() - weekStartsOn + 7) % 7;
+  const gridStart = addDays(month, -lead);
+  const days = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+  const rows = [0, 1, 2, 3, 4, 5].filter((r) => days.slice(r * 7, r * 7 + 7).some((d) => d.getMonth() === month.getMonth()));
+  const monthFmt = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" });
+  const weekdayLong = new Intl.DateTimeFormat(locale, { weekday: "long" });
+  const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  const dayFull = new Intl.DateTimeFormat(locale, { dateStyle: "full" });
+  const triggerFmt = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+  const heads = Array.from({ length: 7 }, (_, i) => addDays(gridStart, i));
+  const move = (next) => {
+    wantFocus.current = true;
+    setFocused(next);
+  };
+  const shiftMonth = (delta) => {
+    const last = new Date(focused.getFullYear(), focused.getMonth() + delta + 1, 0).getDate();
+    move(new Date(focused.getFullYear(), focused.getMonth() + delta, Math.min(focused.getDate(), last)));
+  };
+  const choose = (d) => {
+    if (!inRange(d)) return;
+    onChange(toIso(d));
+    setOpen(false);
+  };
+  const onKeyDown = (event) => {
+    const step = {
+      ArrowLeft: () => addDays(focused, -1),
+      ArrowRight: () => addDays(focused, 1),
+      ArrowUp: () => addDays(focused, -7),
+      ArrowDown: () => addDays(focused, 7),
+      Home: () => addDays(focused, -((focused.getDay() - weekStartsOn + 7) % 7)),
+      End: () => addDays(focused, 6 - (focused.getDay() - weekStartsOn + 7) % 7)
+    };
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      shiftMonth(event.key === "PageUp" ? -1 : 1);
+      return;
+    }
+    const next = step[event.key]?.();
+    if (next) {
+      event.preventDefault();
+      move(next);
+    }
+  };
+  const todayIso = toIso(/* @__PURE__ */ new Date());
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+      "button",
+      {
+        type: "button",
+        id,
+        disabled,
+        "aria-label": rest["aria-label"],
+        "data-slot": "date-picker-trigger",
+        className: cn(
+          "flex h-12 w-full items-center justify-between gap-3 px-4 py-3 text-left text-body",
+          fieldSurface,
+          !selected && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "truncate", children: selected ? triggerFmt.format(selected) : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(IconGlyph, { glyph: Event2, "aria-hidden": "true", className: "shrink-0 text-secondary-content" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+      PopoverContent,
+      {
+        align: "start",
+        className: "w-auto p-3",
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { "data-slot": "date-picker", className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(GlyphButton, { size: "sm", icon: ChevronLeft, label: previousMonthLabel, onClick: () => shiftMonth(-1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { "aria-live": "polite", className: "m-0 text-caption font-semibold text-foreground", children: monthFmt.format(month) }),
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(GlyphButton, { size: "sm", icon: ChevronRight, label: nextMonthLabel, onClick: () => shiftMonth(1) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+            "div",
+            {
+              ref: gridRef,
+              role: "grid",
+              "aria-label": monthFmt.format(month),
+              onKeyDown,
+              className: "flex flex-col gap-1",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { role: "row", className: "grid grid-cols-7", children: heads.map((d) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                  "span",
+                  {
+                    role: "columnheader",
+                    "aria-label": weekdayLong.format(d),
+                    className: "py-1 text-center text-mini font-medium uppercase tracking-eyebrow text-muted-foreground",
+                    children: weekdayShort.format(d).slice(0, 2)
+                  },
+                  d.getDay()
+                )) }),
+                rows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { role: "row", className: "grid grid-cols-7 gap-1", children: days.slice(r * 7, r * 7 + 7).map((d) => {
+                  const iso = toIso(d);
+                  const outside = d.getMonth() !== month.getMonth();
+                  const isSelected = iso === value;
+                  const isFocused = iso === toIso(focused);
+                  const enabled = inRange(d);
+                  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: isFocused ? 0 : -1,
+                      disabled: !enabled,
+                      "aria-label": dayFull.format(d),
+                      "aria-current": iso === todayIso ? "date" : void 0,
+                      "data-date": iso,
+                      onClick: () => choose(d),
+                      className: cn(
+                        "size-9 rounded-xl text-caption tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-30",
+                        isSelected ? "bg-primary font-semibold text-primary-foreground shadow-button-primary" : cn(
+                          "hover:bg-foreground/10",
+                          outside ? "text-foreground/55" : "text-foreground",
+                          iso === todayIso && "font-semibold text-brand"
+                        )
+                      ),
+                      children: d.getDate()
+                    }
+                  ) }, iso);
+                }) }, r))
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: !selected,
+                onClick: () => {
+                  onChange("");
+                  setOpen(false);
+                },
+                className: "rounded-lg px-2 py-1 text-caption font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:opacity-40",
+                children: clearLabel
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: !inRange(parseIso(todayIso)),
+                onClick: () => choose(parseIso(todayIso)),
+                className: "rounded-lg px-2 py-1 text-caption font-medium text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:opacity-40",
+                children: todayLabel
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/web/components/value-list.tsx
+var import_jsx_runtime99 = require("react/jsx-runtime");
 function ValueList({ values, singular, plural, emptyLabel = "None", defaultOpen = false, className }) {
   if (values.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: cn("text-caption text-muted-foreground", className), children: emptyLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: cn("text-caption text-muted-foreground", className), children: emptyLabel });
   }
   const summary = `${values.length} ${values.length === 1 ? singular : plural}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(Collapsible, { defaultOpen, "data-slot": "value-list", className: cn("min-w-0", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(Collapsible, { defaultOpen, "data-slot": "value-list", className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
       CollapsibleTrigger,
       {
         type: "button",
         className: "inline-flex items-center gap-1 rounded-lg text-caption font-semibold text-foreground transition-colors hover:text-secondary-content data-[state=open]:text-secondary-content",
         children: [
           summary,
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(CollapsibleChevron, {})
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(CollapsibleChevron, {})
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(CollapsibleContent, { children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("ul", { className: "m-0 mt-2 list-none space-y-1 p-0", children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("li", { className: "flex items-center gap-1 rounded-xl kui-well px-3 py-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "min-w-0 select-all break-all font-mono text-caption text-foreground", children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(CopyButton, { value, label: singular })
+    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(CollapsibleContent, { children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("ul", { className: "m-0 mt-2 list-none space-y-1 p-0", children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("li", { className: "flex items-center gap-1 rounded-xl kui-well px-3 py-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "min-w-0 select-all break-all font-mono text-caption text-foreground", children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(CopyButton, { value, label: singular })
     ] }, `${index}-${value}`)) }) })
   ] });
 }
 
 // src/web/components/event-timeline.tsx
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 function EventTimeline({ events, label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("ol", { "aria-label": label, "data-slot": "event-timeline", className: cn("m-0 list-none space-y-1.5 p-0", className), children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("ol", { "aria-label": label, "data-slot": "event-timeline", className: cn("m-0 list-none space-y-1.5 p-0", className), children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
     "li",
     {
       "data-slot": "event-timeline-item",
       className: "relative flex items-baseline justify-between gap-3 rounded-xl kui-well py-2.5 pl-7 pr-3 before:absolute before:left-3 before:top-1/2 before:size-1.5 before:-translate-y-1/2 before:rounded-full before:bg-primary/60 last:before:bg-primary last:before:shadow-glow-primary-soft",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "min-w-0 text-caption font-medium text-foreground", children: event.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("span", { className: "flex shrink-0 items-baseline gap-2 text-caption tabular-nums text-muted-foreground", children: [
-          event.duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { "data-slot": "event-timeline-duration", children: event.duration }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("time", { dateTime: event.dateTime, children: event.timestamp })
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "min-w-0 text-caption font-medium text-foreground", children: event.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("span", { className: "flex shrink-0 items-baseline gap-2 text-caption tabular-nums text-muted-foreground", children: [
+          event.duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { "data-slot": "event-timeline-duration", children: event.duration }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("time", { dateTime: event.dateTime, children: event.timestamp })
         ] })
       ]
     },
@@ -9596,7 +9805,7 @@ function EventTimeline({ events, label, className }) {
 
 // src/web/components/notice-bar.tsx
 var import_react28 = require("react");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_jsx_runtime101 = require("react/jsx-runtime");
 var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? import_react28.useEffect : import_react28.useLayoutEffect;
 function NoticeBar({ children, hidden = false, heightVariable = "--kui-notice-height", className }) {
   const ref = (0, import_react28.useRef)(null);
@@ -9625,7 +9834,7 @@ function NoticeBar({ children, hidden = false, heightVariable = "--kui-notice-he
     };
   }, [hidden, heightVariable]);
   if (hidden) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
     "div",
     {
       ref,
@@ -9637,7 +9846,7 @@ function NoticeBar({ children, hidden = false, heightVariable = "--kui-notice-he
 }
 
 // src/web/components/floating-notice.tsx
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 function FloatingNotice({
   children,
   onDismiss,
@@ -9647,7 +9856,7 @@ function FloatingNotice({
   className
 }) {
   const showClose = dismissible && Boolean(onDismiss);
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
     "div",
     {
       "data-slot": "floating-notice",
@@ -9656,16 +9865,16 @@ function FloatingNotice({
         "fixed bottom-4 left-1/2 z-[var(--z-modal)] w-[min(32rem,calc(100vw-2rem))] -translate-x-1/2 rounded-2xl bg-card bg-gradient-card-hero shadow-toast",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "relative", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "relative", children: [
         children,
-        showClose && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(GlyphButton, { icon: Close, label: dismissLabel, size: "sm", onClick: onDismiss, className: "absolute right-2 top-2" })
+        showClose && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(GlyphButton, { icon: Close, label: dismissLabel, size: "sm", onClick: onDismiss, className: "absolute right-2 top-2" })
       ] })
     }
   );
 }
 
 // src/web/components/summary-rows.tsx
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 var valueTone = {
   default: "text-foreground",
   primary: "text-brand",
@@ -9680,18 +9889,18 @@ function SummaryRows({ rows, as = "dl", className }) {
   const isDl = as === "dl";
   const Label4 = isDl ? "dt" : "span";
   const Value2 = isDl ? "dd" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
     List2,
     {
       "data-slot": "summary-rows",
       className: cn("m-0 list-none p-0", className),
       children: rows.map((row, index) => {
         const muted = row.tone === "muted";
-        const content = /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Label4, { className: "shrink-0 text-caption text-muted-foreground", children: row.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(DottedLeader, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(Value2, { className: "m-0 flex min-w-0 max-w-[65%] items-baseline gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+        const content = /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Label4, { className: "shrink-0 text-caption text-muted-foreground", children: row.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(DottedLeader, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(Value2, { className: "m-0 flex min-w-0 max-w-[65%] items-baseline gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
               "span",
               {
                 className: cn(
@@ -9703,7 +9912,7 @@ function SummaryRows({ rows, as = "dl", className }) {
                 children: row.value
               }
             ),
-            row.hint && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "shrink-0 text-xxs text-muted-foreground", children: row.hint })
+            row.hint && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "shrink-0 text-xxs text-muted-foreground", children: row.hint })
           ] })
         ] });
         const rowProps = {
@@ -9711,16 +9920,16 @@ function SummaryRows({ rows, as = "dl", className }) {
           "data-emphasis": row.emphasis ? "true" : void 0,
           className: rowClass
         };
-        return isDl ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { ...rowProps, children: content }, index) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("li", { ...rowProps, children: content }, index);
+        return isDl ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { ...rowProps, children: content }, index) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("li", { ...rowProps, children: content }, index);
       })
     }
   );
 }
 
 // src/web/components/section-label.tsx
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 function SectionLabel({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     "span",
     {
       className: cn("text-mini font-medium uppercase tracking-eyebrow-wide text-muted-foreground", className),
@@ -9730,21 +9939,21 @@ function SectionLabel({ children, className }) {
 }
 
 // src/web/components/section-header.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 function SectionHeader({
   children,
   right,
   as: Tag = "h2",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: cn("flex items-center justify-between gap-3 px-1", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Tag, { className: cn("text-muted-foreground", eyebrow), children }),
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: cn("flex items-center justify-between gap-3 px-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tag, { className: cn("text-muted-foreground", eyebrow), children }),
     right
   ] });
 }
 
 // src/web/components/info-chip.tsx
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var defaultStatusLabel = {
   success: "Success",
   warning: "Warning",
@@ -9770,7 +9979,7 @@ var statusDotClass = {
   info: "bg-secondary-content"
 };
 function StatusChip2({ status, label, pulse = true, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
     "span",
     {
       "data-slot": "status-chip",
@@ -9781,17 +9990,17 @@ function StatusChip2({ status, label, pulse = true, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("span", { "aria-hidden": "true", className: "relative flex size-1.5 shrink-0", children: [
-          pulse && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("span", { "aria-hidden": "true", className: "relative flex size-1.5 shrink-0", children: [
+          pulse && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
             "span",
             {
               "data-slot": "status-chip-pulse",
               className: cn("absolute inset-0 rounded-full opacity-0 motion-safe:animate-ping motion-safe:opacity-75", statusDotClass[status])
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: cn("relative size-1.5 rounded-full", statusDotClass[status]) })
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: cn("relative size-1.5 rounded-full", statusDotClass[status]) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: "truncate", children: label ?? defaultStatusLabel[status] })
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "truncate", children: label ?? defaultStatusLabel[status] })
       ]
     }
   );
@@ -9811,7 +10020,7 @@ function InfoChip({
   "data-info-kind": dataInfoKind
 }) {
   const readableStatus = status ? statusLabel ?? defaultStatusLabel[status] : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
     "div",
     {
       "data-slot": "info-chip",
@@ -9823,7 +10032,7 @@ function InfoChip({
         className
       ),
       children: [
-        leading && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        leading && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           "span",
           {
             "aria-hidden": "true",
@@ -9834,10 +10043,10 @@ function InfoChip({
             children: leading
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("dl", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("dt", { className: cn("truncate text-muted-foreground", eyebrow), children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("dd", { className: "mt-0.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("dl", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("dt", { className: cn("truncate text-muted-foreground", eyebrow), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("dd", { className: "mt-0.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
               "span",
               {
                 className: cn(
@@ -9847,10 +10056,10 @@ function InfoChip({
                 children: value
               }
             ),
-            status && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(StatusChip2, { status, label: readableStatus ?? void 0 })
+            status && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(StatusChip2, { status, label: readableStatus ?? void 0 })
           ] })
         ] }),
-        onEdit && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(GlyphButton, { icon: Edit, label: editLabel, onClick: onEdit, disabled: editDisabled })
+        onEdit && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(GlyphButton, { icon: Edit, label: editLabel, onClick: onEdit, disabled: editDisabled })
       ]
     }
   );
@@ -9862,12 +10071,12 @@ function NetworkInfoChip({
   iconBasePath,
   ...infoChipProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     InfoChip,
     {
       ...infoChipProps,
       "data-info-kind": "network",
-      leading: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(NetworkBadge, { network, iconBasePath, size: "md" }),
+      leading: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(NetworkBadge, { network, iconBasePath, size: "md" }),
       label,
       value
     }
@@ -9881,12 +10090,12 @@ function AssetInfoChip({
   cdnBaseUrl,
   ...infoChipProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     InfoChip,
     {
       ...infoChipProps,
       "data-info-kind": "asset",
-      leading: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(AssetIcon, { ticker, logoUri, cdnBaseUrl, size: 28 }),
+      leading: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(AssetIcon, { ticker, logoUri, cdnBaseUrl, size: 28 }),
       label,
       value
     }
@@ -9895,7 +10104,7 @@ function AssetInfoChip({
 
 // src/web/components/error-boundary.tsx
 var import_react29 = require("react");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var ErrorBoundary = class extends import_react29.Component {
   constructor(props) {
     super(props);
@@ -9909,11 +10118,11 @@ var ErrorBoundary = class extends import_react29.Component {
   }
   render() {
     if (this.state.hasError) {
-      return this.props.fallback ?? /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "min-h-screen bg-background bg-page-radial text-foreground font-display flex flex-col items-center justify-center p-6 gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(IconGlyph, { glyph: Error2, className: "text-danger-fg text-icon-5xl" }),
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("h2", { className: "text-subhead font-bold", children: "Something went wrong" }),
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: "text-caption text-muted-foreground text-center", children: this.state.error?.message ?? "An unexpected error occurred." }),
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+      return this.props.fallback ?? /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "min-h-screen bg-background bg-page-radial text-foreground font-display flex flex-col items-center justify-center p-6 gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(IconGlyph, { glyph: Error2, className: "text-danger-fg text-icon-5xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("h2", { className: "text-subhead font-bold", children: "Something went wrong" }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { className: "text-caption text-muted-foreground text-center", children: this.state.error?.message ?? "An unexpected error occurred." }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
           "button",
           {
             onClick: () => {
@@ -9931,7 +10140,7 @@ var ErrorBoundary = class extends import_react29.Component {
 };
 
 // src/web/components/recovery-phrase-card.tsx
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 function RecoveryPhraseCard({
   words,
   revealed = false,
@@ -9950,10 +10159,10 @@ function RecoveryPhraseCard({
   const selfCopy = !onCopy && copyValue !== void 0;
   const handleCopy = onCopy ?? (selfCopy ? () => void clipboard.copy(copyValue) : void 0);
   const copied = selfCopy && clipboard.state === "copied";
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("section", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex items-center justify-between px-0.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { className: cn("text-muted-foreground", eyebrow), children: title }),
-      hasWords && revealed && onRevealChange && /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("section", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center justify-between px-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("p", { className: cn("text-muted-foreground", eyebrow), children: title }),
+      hasWords && revealed && onRevealChange && /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
         Button,
         {
           type: "button",
@@ -9961,27 +10170,27 @@ function RecoveryPhraseCard({
           size: "xs",
           onClick: () => onRevealChange(!revealed),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(IconGlyph, { glyph: VisibilityOff, className: "text-icon-md" }),
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(IconGlyph, { glyph: VisibilityOff, className: "text-icon-md" }),
             "Hide"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "relative", children: [
-      hasWords ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "relative", children: [
+      hasWords ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
         "div",
         {
           className: cn(
             "grid grid-cols-3 gap-2 transition-all duration-300",
             !revealed && "pointer-events-none select-none blur-sm"
           ),
-          children: words.map((word, index) => /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-card bg-gradient-card px-3 py-2.5 shadow-raised", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "w-4 shrink-0 text-caption font-bold text-secondary-content", children: index + 1 }),
-            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "font-mono text-body text-foreground", children: word })
+          children: words.map((word, index) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-card bg-gradient-card px-3 py-2.5 shadow-raised", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "w-4 shrink-0 text-caption font-bold text-secondary-content", children: index + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "font-mono text-body text-foreground", children: word })
           ] }, `${index}-${word}`))
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "rounded-xl bg-warning/10 px-4 py-3 text-body text-warning-fg", children: emptyMessage }),
-      hasWords && !revealed && onRevealChange && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "rounded-xl bg-warning/10 px-4 py-3 text-body text-warning-fg", children: emptyMessage }),
+      hasWords && !revealed && onRevealChange && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
         Button,
         {
           type: "button",
@@ -9989,13 +10198,13 @@ function RecoveryPhraseCard({
           size: "sm",
           onClick: () => onRevealChange(true),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(IconGlyph, { glyph: Visibility, className: "text-icon-lg" }),
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(IconGlyph, { glyph: Visibility, className: "text-icon-lg" }),
             "Tap to reveal"
           ]
         }
       ) })
     ] }),
-    hasWords && revealed && handleCopy && /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+    hasWords && revealed && handleCopy && /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
       Button,
       {
         type: "button",
@@ -10004,18 +10213,18 @@ function RecoveryPhraseCard({
         onClick: handleCopy,
         className: cn("w-full", copied && "bg-primary/10 bg-gradient-active text-brand ring-primary/40 hover:ring-primary/50"),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(IconGlyph, { glyph: copied ? Check : ContentCopy, className: "text-icon-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(IconGlyph, { glyph: copied ? Check : ContentCopy, className: "text-icon-lg" }),
           copied ? copiedLabel : copyLabel
         ]
       }
     ),
-    selfCopy && clipboard.state === "failed" && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { role: "alert", className: "m-0 text-caption text-danger-fg", children: copyFailedMessage }),
-    selfCopy && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { "aria-live": "polite", className: "sr-only", children: copied ? copiedLabel : "" })
+    selfCopy && clipboard.state === "failed" && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("p", { role: "alert", className: "m-0 text-caption text-danger-fg", children: copyFailedMessage }),
+    selfCopy && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { "aria-live": "polite", className: "sr-only", children: copied ? copiedLabel : "" })
   ] });
 }
 
 // src/web/components/settings-selector-row.tsx
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 function SettingsSelectorRow({
   icon,
   title,
@@ -10024,9 +10233,9 @@ function SettingsSelectorRow({
   className,
   iconClassName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: cn("flex items-start justify-between gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card-secondary", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: cn("flex items-start justify-between gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card-secondary", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
         "div",
         {
           className: cn(
@@ -10036,17 +10245,17 @@ function SettingsSelectorRow({
           children: icon
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-body font-bold tracking-wide text-foreground", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "mt-0.5 text-caption font-medium text-muted-foreground", children: description })
+      /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "text-body font-bold tracking-wide text-foreground", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "mt-0.5 text-caption font-medium text-muted-foreground", children: description })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "shrink-0", children: control })
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "shrink-0", children: control })
   ] });
 }
 
 // src/web/components/bottom-sheet.tsx
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 function BottomSheet({
   open,
   title,
@@ -10062,7 +10271,7 @@ function BottomSheet({
   const handleBackdropClick = (event) => {
     if (closeOnBackdrop && event.target === event.currentTarget) onClose?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
     "div",
     {
       className: cn(
@@ -10070,7 +10279,7 @@ function BottomSheet({
         className
       ),
       onClick: handleBackdropClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
         ScrollArea,
         {
           className: cn(
@@ -10079,13 +10288,13 @@ function BottomSheet({
           ),
           viewportClassName: "max-h-[90vh] px-4 pb-6 pt-5",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "-mt-1 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "h-1 w-10 rounded-full bg-secondary/40" }) }),
-            (title || icon) && /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "mt-4 flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "-mt-1 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "h-1 w-10 rounded-full bg-secondary/40" }) }),
+            (title || icon) && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "mt-4 flex items-center gap-2", children: [
               icon,
-              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("p", { className: "text-body font-bold text-foreground", children: title })
+              /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("p", { className: "text-body font-bold text-foreground", children: title })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: cn((title || icon) && "mt-3"), children }),
-            actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "mt-4 flex gap-2", children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: cn((title || icon) && "mt-3"), children }),
+            actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "mt-4 flex gap-2", children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
               Button,
               {
                 type: "button",
@@ -10095,7 +10304,7 @@ function BottomSheet({
                 onClick: action.onClick,
                 disabled: action.disabled,
                 children: [
-                  action.icon && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Icon, { name: action.icon, className: "text-icon-md" }),
+                  action.icon && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Icon, { name: action.icon, className: "text-icon-md" }),
                   action.label
                 ]
               },
@@ -10109,7 +10318,7 @@ function BottomSheet({
 }
 
 // src/web/components/basic-collapsible.tsx
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 function BasicCollapsible({
   title,
   children,
@@ -10120,7 +10329,7 @@ function BasicCollapsible({
   triggerClassName,
   contentClassName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
     Collapsible,
     {
       open,
@@ -10129,7 +10338,7 @@ function BasicCollapsible({
       "data-slot": "basic-collapsible",
       className: cn("overflow-hidden rounded-xl bg-surface-inset/40 shadow-raised", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
           CollapsibleTrigger,
           {
             className: cn(
@@ -10138,18 +10347,18 @@ function BasicCollapsible({
             ),
             children: [
               title,
-              /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(CollapsibleChevron, {})
+              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(CollapsibleChevron, {})
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(CollapsibleContent, { className: cn("px-3 pb-3 pt-1 text-caption text-muted-foreground", contentClassName), children })
+        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(CollapsibleContent, { className: cn("px-3 pb-3 pt-1 text-caption text-muted-foreground", contentClassName), children })
       ]
     }
   );
 }
 
 // src/web/components/stepper-number-input.tsx
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 function StepperNumberInput({
   value,
   onChange,
@@ -10166,7 +10375,7 @@ function StepperNumberInput({
     const bounded = max === void 0 ? boundedMin : Math.min(max, boundedMin);
     onChange(Number.isFinite(bounded) ? bounded : min ?? 0);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
     "div",
     {
       className: cn(
@@ -10174,7 +10383,7 @@ function StepperNumberInput({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           "button",
           {
             type: "button",
@@ -10182,10 +10391,10 @@ function StepperNumberInput({
             disabled: disabled || min !== void 0 && value <= min,
             onClick: () => clamp(value - step),
             "aria-label": "Decrease",
-            children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(IconGlyph, { glyph: Remove, className: "text-icon-md" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(IconGlyph, { glyph: Remove, className: "text-icon-md" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           "input",
           {
             type: "number",
@@ -10202,7 +10411,7 @@ function StepperNumberInput({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           "button",
           {
             type: "button",
@@ -10210,7 +10419,7 @@ function StepperNumberInput({
             disabled: disabled || max !== void 0 && value >= max,
             onClick: () => clamp(value + step),
             "aria-label": "Increase",
-            children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(IconGlyph, { glyph: Add, className: "text-icon-md" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(IconGlyph, { glyph: Add, className: "text-icon-md" })
           }
         )
       ]
@@ -10220,7 +10429,7 @@ function StepperNumberInput({
 
 // src/web/components/metric-card.tsx
 var import_react30 = require("react");
-var import_jsx_runtime112 = require("react/jsx-runtime");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var toneClasses2 = {
   primary: "bg-primary/10 text-brand",
   purple: "bg-network-arkade/10 text-network-arkade-fg",
@@ -10241,16 +10450,36 @@ function MetricCard({
   trend,
   definition,
   change,
+  labelStyle = "eyebrow",
   className,
   ...rest
 }) {
   const labelId = (0, import_react30.useId)();
+  const valueRef = (0, import_react30.useRef)(null);
   const comfortable = size === "comfortable";
   const placement = iconPlacement ?? (comfortable ? "end" : "label");
   const hasEnd = placement === "end" || !!trend;
   const iconBox = comfortable ? "size-9 rounded-xl shadow-raised" : placement === "end" ? "size-7 rounded-lg" : "size-5 rounded-md";
   const iconGlyph = comfortable ? "text-icon-lg" : placement === "end" ? "text-icon-md" : "text-icon-xs";
-  const iconNode = icon ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+  (0, import_react30.useLayoutEffect)(() => {
+    const el = valueRef.current;
+    const column = el?.parentElement;
+    if (!el || !column || !hasEnd) return;
+    const fit = () => {
+      el.style.fontSize = "";
+      const base = parseFloat(getComputedStyle(el).fontSize);
+      let size2 = base;
+      while (el.scrollWidth > el.clientWidth + 0.5 && size2 > base * 0.6) {
+        size2 -= 1;
+        el.style.fontSize = `${size2}px`;
+      }
+    };
+    fit();
+    const observer = new ResizeObserver(fit);
+    observer.observe(column);
+    return () => observer.disconnect();
+  }, [value, hasEnd, comfortable]);
+  const iconNode = icon ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
     "span",
     {
       "data-slot": "metric-card-icon",
@@ -10259,11 +10488,19 @@ function MetricCard({
         iconBox,
         toneClasses2[tone]
       ),
-      children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Icon, { name: icon, className: iconGlyph }) : icon
+      children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Icon, { name: icon, className: iconGlyph }) : icon
     }
   ) : null;
-  const labelNode = /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("span", { id: labelId, "data-slot": "metric-card-label", className: cn(eyebrow, "text-muted-foreground"), children: label });
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
+  const labelNode = /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+    "span",
+    {
+      id: labelId,
+      "data-slot": "metric-card-label",
+      className: labelStyle === "title" ? "text-body font-semibold text-foreground" : cn(eyebrow, "text-muted-foreground"),
+      children: label
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
     "div",
     {
       role: "group",
@@ -10277,36 +10514,42 @@ function MetricCard({
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: hasEnd ? "min-w-0 flex-1 space-y-1" : "contents", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-            placement === "label" && iconNode,
-            labelNode
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: hasEnd ? "flex min-w-0 flex-1 flex-col justify-between gap-4" : "contents", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: hasEnd ? labelStyle === "title" ? "space-y-0" : "space-y-1" : "contents", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+              placement === "label" && iconNode,
+              labelNode
+            ] }),
+            definition && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("p", { "data-slot": "metric-card-definition", className: "m-0 text-caption text-muted-foreground", children: definition })
           ] }),
-          definition && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("p", { "data-slot": "metric-card-definition", className: "m-0 text-caption text-muted-foreground", children: definition }),
-          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-            "p",
-            {
-              "data-slot": "metric-card-value",
-              className: cn(
-                "m-0 font-bold tabular-nums text-foreground",
-                comfortable ? "text-headline" : "text-body"
-              ),
-              children: value
-            }
-          ),
-          change && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("p", { "data-slot": "metric-card-change", className: cn("m-0 tabular-nums text-foreground", comfortable ? "text-caption" : "text-xxs"), children: change }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-            "p",
-            {
-              "data-slot": "metric-card-description",
-              className: cn("m-0 text-muted-foreground", comfortable ? "text-caption" : "text-xxs"),
-              children: description
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: hasEnd ? "space-y-1" : "contents", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+              "p",
+              {
+                ref: valueRef,
+                "data-slot": "metric-card-value",
+                className: cn(
+                  "m-0 font-bold tabular-nums text-foreground",
+                  hasEnd && "whitespace-nowrap",
+                  comfortable ? "text-headline" : "text-body"
+                ),
+                children: value
+              }
+            ),
+            change && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("p", { "data-slot": "metric-card-change", className: cn("m-0 tabular-nums text-foreground", comfortable ? "text-caption" : "text-xxs"), children: change }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+              "p",
+              {
+                "data-slot": "metric-card-description",
+                className: cn("m-0 text-muted-foreground", comfortable ? "text-caption" : "text-xxs"),
+                children: description
+              }
+            )
+          ] })
         ] }),
-        hasEnd && /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: "flex shrink-0 flex-col items-end justify-between gap-2", children: [
+        hasEnd && /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex shrink-0 flex-col items-end justify-between gap-3", children: [
           placement === "end" && iconNode,
-          trend && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { "data-slot": "metric-card-trend", className: "min-h-0 flex-1", children: trend })
+          trend && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { "data-slot": "metric-card-trend", className: "min-h-0 flex-1", children: trend })
         ] })
       ]
     }
@@ -10314,10 +10557,10 @@ function MetricCard({
 }
 
 // src/web/components/copyable.tsx
-var import_jsx_runtime113 = require("react/jsx-runtime");
+var import_jsx_runtime114 = require("react/jsx-runtime");
 function Copyable({ value, label, children, mono = true, wrap = false, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("span", { "data-slot": "copyable", className: cn("inline-flex min-w-0 max-w-full items-center gap-1", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("span", { "data-slot": "copyable", className: cn("inline-flex min-w-0 max-w-full items-center gap-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
       "span",
       {
         title: value,
@@ -10325,29 +10568,29 @@ function Copyable({ value, label, children, mono = true, wrap = false, className
         children: children ?? value
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(CopyButton, { value, label })
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(CopyButton, { value, label })
   ] });
 }
 
 // src/web/components/code-block.tsx
-var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_jsx_runtime115 = require("react/jsx-runtime");
 function CodeBlock({ code, label = "code", language, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
     "figure",
     {
       "data-slot": "code-block",
       "aria-label": label,
       className: cn("relative m-0 min-w-0 overflow-hidden rounded-xl bg-muted/60 shadow-inner ring-1 ring-inset ring-secondary/15", className),
       children: [
-        language && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("figcaption", { className: cn("px-4 pt-3 text-muted-foreground", eyebrow), children: language }),
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(CopyButton, { value: code, label }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+        language && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("figcaption", { className: cn("px-4 pt-3 text-muted-foreground", eyebrow), children: language }),
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(CopyButton, { value: code, label }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
           HorizontalScrollArea,
           {
             className: "my-4 ml-4 mr-12",
             viewportAs: "pre",
             viewportClassName: "m-0 pb-3 font-mono text-caption text-foreground",
-            children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("code", { children: code })
+            children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("code", { children: code })
           }
         )
       ]
@@ -10372,7 +10615,7 @@ var chartScatterSeriesLimit = 3;
 
 // src/web/components/filter-chip-group.tsx
 var import_react31 = require("react");
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 function FilterChipGroup({
   options,
   value,
@@ -10399,7 +10642,7 @@ function FilterChipGroup({
     onChange(target.option.value);
     refs.current[target.index]?.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
     "div",
     {
       role: segmented ? "radiogroup" : void 0,
@@ -10413,7 +10656,7 @@ function FilterChipGroup({
       children: options.map((option, index) => {
         const active = option.value === value;
         const iconOnly = option.label === void 0 || option.label === null;
-        return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
           "button",
           {
             ref: (node) => {
@@ -10441,7 +10684,7 @@ function FilterChipGroup({
             children: [
               option.icon,
               option.label,
-              option.count !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+              option.count !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
                 "span",
                 {
                   className: cn(
@@ -10461,7 +10704,7 @@ function FilterChipGroup({
 }
 
 // src/web/components/charts/core.tsx
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var BAR_GAP = 2;
 var BAR_RADIUS = 4;
 function barPath(x, y, w, h, end) {
@@ -10526,15 +10769,15 @@ function ChartLegend({
   className
 }) {
   const visibleCount = items.filter((item) => !hidden?.has(item.id)).length;
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
     "ul",
     {
       "data-slot": "chart-legend",
       className: cn("m-0 flex list-none flex-wrap justify-center gap-x-4 gap-y-1 p-0 text-caption text-foreground", className),
       children: items.map((item) => {
         const off = hidden?.has(item.id) ?? false;
-        const key = item.swatch ?? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(LegendSwatch, { color: item.color, shape: keyShape });
-        return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("li", { className: "flex items-center", children: onToggle ? /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+        const key = item.swatch ?? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(LegendSwatch, { color: item.color, shape: keyShape });
+        return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("li", { className: "flex items-center", children: onToggle ? /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
           "button",
           {
             type: "button",
@@ -10551,7 +10794,7 @@ function ChartLegend({
               item.label
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("span", { className: "flex items-center gap-1.5 px-1.5 py-0.5", children: [
+        ) : /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("span", { className: "flex items-center gap-1.5 px-1.5 py-0.5", children: [
           key,
           item.label
         ] }) }, item.id);
@@ -10577,7 +10820,7 @@ function useSeriesVisibility(ids) {
   };
 }
 function LegendSwatch({ color, shape = "rect" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: shape === "line" ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("line", { x1: "1", x2: "11", y1: "6", y2: "6", stroke: color, strokeWidth: "2", strokeLinecap: "round" }) : shape === "dot" ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("circle", { cx: "6", cy: "6", r: "4", fill: color }) : /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("rect", { width: "12", height: "12", rx: "3", fill: color }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: shape === "line" ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("line", { x1: "1", x2: "11", y1: "6", y2: "6", stroke: color, strokeWidth: "2", strokeLinecap: "round" }) : shape === "dot" ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("circle", { cx: "6", cy: "6", r: "4", fill: color }) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { width: "12", height: "12", rx: "3", fill: color }) });
 }
 function ChartTooltip({
   title,
@@ -10588,7 +10831,7 @@ function ChartTooltip({
   swatch = "line"
 }) {
   const flip = x > width * 0.6;
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
     "div",
     {
       "data-slot": "chart-tooltip",
@@ -10600,11 +10843,11 @@ function ChartTooltip({
         top: Math.max(0, y - 8)
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { className: "mb-1 font-semibold text-foreground", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("ul", { className: "m-0 list-none space-y-0.5 p-0", children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("li", { className: "flex items-center gap-2 whitespace-nowrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(LegendSwatch, { color: row.color, shape: swatch }),
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: "font-semibold tabular-nums text-foreground", children: row.value }),
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: "text-muted-foreground", children: row.label })
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: "mb-1 font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("ul", { className: "m-0 list-none space-y-0.5 p-0", children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("li", { className: "flex items-center gap-2 whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(LegendSwatch, { color: row.color, shape: swatch }),
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: "font-semibold tabular-nums text-foreground", children: row.value }),
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: "text-muted-foreground", children: row.label })
         ] }, row.id)) })
       ]
     }
@@ -10632,8 +10875,8 @@ function nextActiveIndex(key, current, count3, { vertical = false } = {}) {
   }
 }
 var viewOptions = [
-  { value: "chart", ariaLabel: "Chart", icon: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(IconGlyph, { glyph: BarChart, size: "sm" }) },
-  { value: "table", ariaLabel: "Table", icon: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(IconGlyph, { glyph: TableRows, size: "sm" }) }
+  { value: "chart", ariaLabel: "Chart", icon: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(IconGlyph, { glyph: BarChart, size: "sm" }) },
+  { value: "table", ariaLabel: "Table", icon: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(IconGlyph, { glyph: TableRows, size: "sm" }) }
 ];
 var tableOption = viewOptions[1];
 function ChartViewToggle({
@@ -10643,9 +10886,9 @@ function ChartViewToggle({
   chartView,
   onChartViewChange
 }) {
-  const options = views && views.length > 0 ? [...views.map((v) => ({ value: v.value, ariaLabel: v.label, icon: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon, { name: v.icon, size: "sm" }) })), tableOption] : viewOptions;
+  const options = views && views.length > 0 ? [...views.map((v) => ({ value: v.value, ariaLabel: v.label, icon: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { name: v.icon, size: "sm" }) })), tableOption] : viewOptions;
   const value = view === "table" ? "table" : views && views.length > 0 ? chartView ?? views[0].value : "chart";
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { "data-slot": "chart-view-toggle", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { "data-slot": "chart-view-toggle", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
     FilterChipGroup,
     {
       variant: "segmented",
@@ -10666,16 +10909,16 @@ function ChartTimeframeMenu({
   onChange
 }) {
   const current = timeframes.find((t) => t.value === value) ?? timeframes[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { "data-slot": "chart-timeframe", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(GlyphButton, { icon: Event2, label: `Timeframe: ${current.label}` }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(DropdownMenuContent, { className: "min-w-28", children: timeframes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { "data-slot": "chart-timeframe", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(GlyphButton, { icon: Event2, label: `Timeframe: ${current.label}` }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(DropdownMenuContent, { className: "min-w-28", children: timeframes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
       DropdownMenuItem,
       {
         onSelect: () => onChange(t.value),
-        icon: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(IconGlyph, { glyph: Check, className: t.value === current.value ? void 0 : "invisible" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(IconGlyph, { glyph: Check, className: t.value === current.value ? void 0 : "invisible" }),
         children: [
           t.label,
-          t.value === current.value && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: "sr-only", children: " (current)" })
+          t.value === current.value && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: "sr-only", children: " (current)" })
         ]
       },
       t.value
@@ -10689,8 +10932,8 @@ function ChartFiltersMenu({
 }) {
   const on = filters.filter((f) => active.includes(f.value));
   const toggle = (value) => onChange(active.includes(value) ? active.filter((v) => v !== value) : [...active, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { "data-slot": "chart-filters", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { "data-slot": "chart-filters", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
       GlyphButton,
       {
         icon: Tune,
@@ -10698,9 +10941,9 @@ function ChartFiltersMenu({
         label: on.length > 0 ? `Filters: ${on.length} on` : "Filters"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(DropdownMenuContent, { className: "min-w-44", children: filters.map((f) => {
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(DropdownMenuContent, { className: "min-w-44", children: filters.map((f) => {
       const checked = active.includes(f.value);
-      return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
         DropdownMenuItem,
         {
           role: "menuitemcheckbox",
@@ -10709,7 +10952,7 @@ function ChartFiltersMenu({
             event.preventDefault();
             toggle(f.value);
           },
-          icon: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(IconGlyph, { glyph: Check, className: checked ? void 0 : "invisible" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(IconGlyph, { glyph: Check, className: checked ? void 0 : "invisible" }),
           children: f.label
         },
         f.value
@@ -10735,20 +10978,20 @@ function ChartHeader({
   const showTimeframes = timeframes && timeframes.length > 0 && onTimeframeChange;
   const showFilters = filters && filters.length > 0 && onFiltersChange;
   const hasText = Boolean(title || description);
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
     "div",
     {
       "data-slot": "chart-header",
       className: cn("flex flex-wrap items-start gap-x-4 gap-y-2", hasText ? "justify-between" : "justify-end"),
       children: [
-        hasText && /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex min-w-0 flex-col gap-1", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("h3", { className: "m-0 text-subhead font-semibold leading-none tracking-tight text-foreground", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("p", { className: "m-0 text-caption text-muted-foreground", children: description })
+        hasText && /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("h3", { className: "m-0 text-subhead font-semibold leading-none tracking-tight text-foreground", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("p", { className: "m-0 text-caption text-muted-foreground", children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
-          (showTimeframes || showFilters) && /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-            showFilters && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ChartFiltersMenu, { filters, active: activeFilters ?? [], onChange: onFiltersChange }),
-            showTimeframes && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+          (showTimeframes || showFilters) && /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+            showFilters && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ChartFiltersMenu, { filters, active: activeFilters ?? [], onChange: onFiltersChange }),
+            showTimeframes && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
               ChartTimeframeMenu,
               {
                 timeframes,
@@ -10757,7 +11000,7 @@ function ChartHeader({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
             ChartViewToggle,
             {
               view,
@@ -10773,13 +11016,13 @@ function ChartHeader({
   );
 }
 function ChartLegendRow({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { "data-slot": "chart-legend-row", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { "data-slot": "chart-legend-row", children });
 }
 function ChartDataTable({ label, table }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("caption", { className: "sr-only", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(TableRow, { children: table.columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(TableHead, { className: index > 0 ? "text-right" : void 0, children: column }, index)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(TableBody, { children: table.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(TableRow, { children: row.map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(TableCell, { className: cellIndex > 0 ? "text-right tabular-nums" : void 0, children: cell }, cellIndex)) }, rowIndex)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("caption", { className: "sr-only", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TableRow, { children: table.columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TableHead, { className: index > 0 ? "text-right" : void 0, children: column }, index)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TableBody, { children: table.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TableRow, { children: row.map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TableCell, { className: cellIndex > 0 ? "text-right tabular-nums" : void 0, children: cell }, cellIndex)) }, rowIndex)) })
   ] });
 }
 function ChartFrame({
@@ -10793,18 +11036,18 @@ function ChartFrame({
   ...head
 }) {
   const [view, setView] = (0, import_react32.useState)("chart");
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("figure", { "data-slot": "chart", "aria-label": label, className: cn("m-0 min-w-0 space-y-3", className), children: [
-    scale && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("p", { "data-slot": "chart-scale", className: "sr-only", children: scale }),
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ChartHeader, { ...head, view, onViewChange: setView }),
-    view === "chart" ? children : /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ChartDataTable, { label, table }),
-    view === "chart" && legend && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ChartLegendRow, { children: legend }),
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("p", { "aria-live": "polite", className: "sr-only", children: announcement ?? "" })
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("figure", { "data-slot": "chart", "aria-label": label, className: cn("m-0 min-w-0 space-y-3", className), children: [
+    scale && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("p", { "data-slot": "chart-scale", className: "sr-only", children: scale }),
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ChartHeader, { ...head, view, onViewChange: setView }),
+    view === "chart" ? children : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ChartDataTable, { label, table }),
+    view === "chart" && legend && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ChartLegendRow, { children: legend }),
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("p", { "aria-live": "polite", className: "sr-only", children: announcement ?? "" })
   ] });
 }
 var plotClass = "relative w-full min-w-0 rounded-xl outline-none transition-shadow duration-200 focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft";
 
 // src/web/components/trend-chart.tsx
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var toneFill = {
   // The charts' green, so every chart draws the same one.
   primary: "var(--series-1)",
@@ -10914,7 +11157,7 @@ function TrendChart({
     },
     [active, count3]
   );
-  if (count3 === 0) return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_jsx_runtime117.Fragment, { children: empty ?? null });
+  if (count3 === 0) return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_jsx_runtime118.Fragment, { children: empty ?? null });
   const textures = series.map((s) => s.texture);
   const totals = points.map(
     (point) => series.reduce((sum, s) => sum + Math.max(0, point.values[s.id] ?? 0), 0)
@@ -10947,15 +11190,15 @@ function TrendChart({
   const activeTitle = activePoint ? activePoint.detail ?? activePoint.label : "";
   const containerWidth = containerRef.current?.clientWidth ?? width;
   const toContainer = width > 0 ? containerWidth / width : 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
     "figure",
     {
       "data-slot": "trend-chart",
       "aria-label": label,
       className: cn("m-0 min-w-0 space-y-2", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ChartHeader, { ...head, view, onViewChange: setView }),
-        view === "table" && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ChartHeader, { ...head, view, onViewChange: setView }),
+        view === "table" && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
           ChartDataTable,
           {
             label,
@@ -10969,8 +11212,8 @@ function TrendChart({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("p", { id: readoutId, "data-slot": "trend-chart-readout", "aria-live": "polite", className: "sr-only", children: activePoint ? tooltipText(activeTitle, activeRows) : "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("p", { id: readoutId, "data-slot": "trend-chart-readout", "aria-live": "polite", className: "sr-only", children: activePoint ? tooltipText(activeTitle, activeRows) : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
           "div",
           {
             ref: containerRef,
@@ -10985,7 +11228,7 @@ function TrendChart({
             onBlur: () => setActive(null),
             className: "relative mt-5 w-full min-w-0 rounded-xl outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
                 "svg",
                 {
                   width: "100%",
@@ -10996,11 +11239,11 @@ function TrendChart({
                   onPointerLeave: () => setActive(null),
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("defs", { children: series.map(
-                      (s, index) => textures[index] === "hatch" ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Texture, { id: `${idBase}-hatch-${index}`, tone: s.tone, texture: "hatch" }, s.id) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(SolidFill, { id: `${idBase}-fill-${index}`, tone: s.tone }, s.id)
+                    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("defs", { children: series.map(
+                      (s, index) => textures[index] === "hatch" ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Texture, { id: `${idBase}-hatch-${index}`, tone: s.tone, texture: "hatch" }, s.id) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(SolidFill, { id: `${idBase}-fill-${index}`, tone: s.tone }, s.id)
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("g", { "data-slot": "trend-chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("g", { "data-slot": "trend-chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("g", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                         "line",
                         {
                           x1: plotLeft,
@@ -11011,7 +11254,7 @@ function TrendChart({
                           strokeDasharray: tick === 0 ? void 0 : "2 3"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                         "text",
                         {
                           x: plotLeft - 6,
@@ -11025,7 +11268,7 @@ function TrendChart({
                         }
                       )
                     ] }, tick)) }),
-                    active !== null && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                    active !== null && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                       "rect",
                       {
                         "data-slot": "trend-chart-active",
@@ -11037,9 +11280,9 @@ function TrendChart({
                         opacity: 0.14
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("g", { "data-slot": "trend-chart-bars", children: points.map((point, pointIndex) => {
+                    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("g", { "data-slot": "trend-chart-bars", children: points.map((point, pointIndex) => {
                       let base = 0;
-                      return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { "data-period": point.key, children: [
+                      return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("g", { "data-period": point.key, children: [
                         series.map((s, seriesIndex) => {
                           const value = point.values[s.id] ?? 0;
                           if (value <= 0) return null;
@@ -11049,7 +11292,7 @@ function TrendChart({
                           base += value;
                           const isTop = series.slice(seriesIndex + 1).every((next) => (point.values[next.id] ?? 0) <= 0);
                           const hatched = textures[seriesIndex] === "hatch";
-                          return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                          return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                             "path",
                             {
                               "data-series": s.id,
@@ -11067,7 +11310,7 @@ function TrendChart({
                             s.id
                           );
                         }),
-                        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                           "rect",
                           {
                             x: plotLeft + pointIndex * band,
@@ -11080,7 +11323,7 @@ function TrendChart({
                         )
                       ] }, point.key);
                     }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("g", { "data-slot": "trend-chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("g", { "data-slot": "trend-chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                       "text",
                       {
                         x: plotLeft + index * band + band / 2,
@@ -11095,7 +11338,7 @@ function TrendChart({
                   ]
                 }
               ),
-              activePoint && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+              activePoint && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                 ChartTooltip,
                 {
                   title: activeTitle,
@@ -11109,16 +11352,16 @@ function TrendChart({
             ]
           }
         ),
-        view === "chart" && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ChartLegendRow, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+        view === "chart" && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ChartLegendRow, { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
           ChartLegend,
           {
             items: styledSeries.map((s, index) => ({
               id: s.id,
               label: s.label,
               color: toneFill[s.tone],
-              swatch: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Texture, { id: `${idBase}-legend-${index}`, tone: s.tone, texture: s.texture }),
-                /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+              swatch: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Texture, { id: `${idBase}-legend-${index}`, tone: s.tone, texture: s.texture }),
+                /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                   "rect",
                   {
                     width: "12",
@@ -11133,7 +11376,7 @@ function TrendChart({
             ...visibility.legend
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("p", { "data-slot": "trend-chart-scale", className: "sr-only", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("p", { "data-slot": "trend-chart-scale", className: "sr-only", children: [
           scaleLabel,
           " \xB7 linear, from 0"
         ] })
@@ -11142,9 +11385,16 @@ function TrendChart({
   );
 }
 function SolidFill({ id, tone }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("stop", { offset: "0%", style: { stopColor: `color-mix(in oklab, ${toneFill[tone]}, white 35%)` } }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("stop", { offset: "100%", style: { stopColor: toneFill[tone] } })
+  const danger = tone === "danger";
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      "stop",
+      {
+        offset: "0%",
+        style: { stopColor: danger ? `color-mix(in srgb, ${toneFill[tone]}, white 12%)` : `color-mix(in oklab, ${toneFill[tone]}, white 35%)` }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("stop", { offset: "100%", style: { stopColor: danger ? `color-mix(in srgb, ${toneFill[tone]}, black 22%)` : toneFill[tone] } })
   ] });
 }
 function Texture({
@@ -11153,15 +11403,15 @@ function Texture({
   texture
 }) {
   if (texture !== "hatch") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("pattern", { id, width: "4", height: "4", patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { width: "4", height: "4", fill: toneFill[tone], opacity: 0.25 }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { width: "2", height: "4", fill: toneFill[tone] })
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("pattern", { id, width: "4", height: "4", patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("rect", { width: "4", height: "4", fill: toneFill[tone], opacity: 0.25 }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("rect", { width: "2", height: "4", fill: toneFill[tone] })
   ] });
 }
 
 // src/web/components/charts/line-chart.tsx
 var import_react34 = require("react");
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var MARGIN2 = { top: 12, right: 16, bottom: 26, left: 8 };
 function LineChart({
   data,
@@ -11183,7 +11433,7 @@ function LineChart({
   const series = allSeries.filter((s) => visibility.isVisible(s.id));
   const slotOf = (id) => allSeries.findIndex((s) => s.id === id);
   const count3 = data.length;
-  if (count3 === 0 || series.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_jsx_runtime118.Fragment, { children: empty ?? null });
+  if (count3 === 0 || series.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_jsx_runtime119.Fragment, { children: empty ?? null });
   const max = Math.max(0, ...data.flatMap((d) => series.map((s) => d.values[s.id] ?? 0)));
   const ticks = chartValueTicks(max, { integer });
   const tickLabels = ticks.map(formatValue);
@@ -11220,14 +11470,14 @@ function LineChart({
     });
   };
   const activeDatum = active === null ? null : data[active];
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
     ChartFrame,
     {
       ...head,
       label,
       className,
       scale: `${scaleLabel} \xB7 linear, from 0`,
-      legend: allSeries.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      legend: allSeries.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
         ChartLegend,
         {
           keyShape: "line",
@@ -11240,7 +11490,7 @@ function LineChart({
         rows: data.map((d) => [d.detail ?? d.label, ...series.map((s) => formatValue(d.values[s.id] ?? 0))])
       },
       announcement: activeDatum ? tooltipText(activeDatum.detail ?? activeDatum.label, rowsAt(active)) : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
         "div",
         {
           ref: containerRef,
@@ -11252,7 +11502,7 @@ function LineChart({
           onBlur: () => setActive(null),
           className: plotClass,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
               "svg",
               {
                 width: "100%",
@@ -11263,13 +11513,13 @@ function LineChart({
                 onPointerMove,
                 onPointerLeave: () => setActive(null),
                 children: [
-                  showArea && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("linearGradient", { id: `${idBase}-wash`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("stop", { offset: "0", stopColor: seriesColor(0), stopOpacity: "0.14" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("stop", { offset: "1", stopColor: seriesColor(0), stopOpacity: "0.04" })
+                  showArea && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("linearGradient", { id: `${idBase}-wash`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("stop", { offset: "0", stopColor: seriesColor(0), stopOpacity: "0.14" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("stop", { offset: "1", stopColor: seriesColor(0), stopOpacity: "0.04" })
                   ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("g", { "data-slot": "chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("line", { x1: plotLeft, x2: plotRight, y1: y(tick), y2: y(tick), stroke: "var(--border)" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("g", { "data-slot": "chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("line", { x1: plotLeft, x2: plotRight, y1: y(tick), y2: y(tick), stroke: "var(--border)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                       "text",
                       {
                         x: plotLeft - 8,
@@ -11283,7 +11533,7 @@ function LineChart({
                       }
                     )
                   ] }, tick)) }),
-                  showArea && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+                  showArea && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "path",
                     {
                       "data-slot": "chart-area",
@@ -11291,7 +11541,7 @@ function LineChart({
                       fill: `url(#${idBase}-wash)`
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("g", { "data-slot": "chart-lines", children: series.map((s, slot) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("g", { "data-slot": "chart-lines", children: series.map((s, slot) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "path",
                     {
                       "data-series": s.id,
@@ -11304,7 +11554,7 @@ function LineChart({
                     },
                     s.id
                   )) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("g", { "data-slot": "chart-end-markers", children: series.map((s, slot) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("g", { "data-slot": "chart-end-markers", children: series.map((s, slot) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "circle",
                     {
                       cx: x(count3 - 1),
@@ -11316,9 +11566,9 @@ function LineChart({
                     },
                     s.id
                   )) }),
-                  active !== null && /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("g", { "data-slot": "chart-crosshair", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("line", { x1: x(active), x2: x(active), y1: plotTop, y2: plotBottom, stroke: "var(--muted-foreground)", strokeWidth: 1 }),
-                    series.map((s, slot) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+                  active !== null && /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("g", { "data-slot": "chart-crosshair", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("line", { x1: x(active), x2: x(active), y1: plotTop, y2: plotBottom, stroke: "var(--muted-foreground)", strokeWidth: 1 }),
+                    series.map((s, slot) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                       "circle",
                       {
                         cx: x(active),
@@ -11331,7 +11581,7 @@ function LineChart({
                       s.id
                     ))
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("g", { "data-slot": "chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("g", { "data-slot": "chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "text",
                     {
                       x: x(index),
@@ -11346,7 +11596,7 @@ function LineChart({
                 ]
               }
             ),
-            activeDatum && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+            activeDatum && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
               ChartTooltip,
               {
                 title: activeDatum.detail ?? activeDatum.label,
@@ -11363,12 +11613,12 @@ function LineChart({
   );
 }
 function AreaChart2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(LineChart, { ...props, area: true, className: cn(props.className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(LineChart, { ...props, area: true, className: cn(props.className) });
 }
 
 // src/web/components/charts/bar-chart.tsx
 var import_react35 = require("react");
-var import_jsx_runtime119 = require("react/jsx-runtime");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var MAX_BAR = 24;
 var GAP = BAR_GAP;
 function BarChart2({
@@ -11391,7 +11641,7 @@ function BarChart2({
   const series = allSeries.filter((s) => visibility.isVisible(s.id));
   const slotOf = (id) => allSeries.findIndex((s) => s.id === id);
   const count3 = data.length;
-  if (count3 === 0 || series.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_jsx_runtime119.Fragment, { children: empty ?? null });
+  if (count3 === 0 || series.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_jsx_runtime120.Fragment, { children: empty ?? null });
   const stacked = layout === "stacked";
   const horizontal = orientation === "horizontal";
   const totals = data.map((d) => series.reduce((sum, s) => sum + Math.max(0, d.values[s.id] ?? 0), 0));
@@ -11444,11 +11694,11 @@ function BarChart2({
       const across = stacked ? groupStart : groupStart + slot * (barThickness + GAP);
       const seam = stacked && offset > 0 ? GAP : 0;
       const path = horizontal ? barPath(plotLeft + offset + seam, across, Math.max(0.5, length - seam), barThickness, isLastInStack ? "right" : "none") : barPath(across, plotBottom - offset - length, barThickness, Math.max(0.5, length - seam), isLastInStack ? "top" : "none");
-      marks.push(/* @__PURE__ */ (0, import_jsx_runtime119.jsx)("path", { "data-series": s.id, d: path, fill: seriesColor(slotOf(s.id)) }, s.id));
+      marks.push(/* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { "data-series": s.id, d: path, fill: seriesColor(slotOf(s.id)) }, s.id));
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("g", { "data-category": d.key, opacity: active !== null && active !== index ? 0.55 : 1, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("g", { "data-category": d.key, opacity: active !== null && active !== index ? 0.55 : 1, children: [
       marks,
-      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
         "rect",
         {
           x: horizontal ? plotLeft : bandStart,
@@ -11464,14 +11714,14 @@ function BarChart2({
   const labelIndices = horizontal ? data.map((_, index) => index) : chartLabelIndices(count3, plotWidth / 56);
   const activeDatum = active === null ? null : data[active];
   const tooltipAnchor = active === null ? { x: 0, y: 0 } : horizontal ? { x: plotLeft + scale(stacked ? totals[active] : Math.max(...series.map((s) => data[active].values[s.id] ?? 0))), y: plotTop + active * bandSize } : { x: plotLeft + (active + 0.5) * bandSize, y: plotTop };
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     ChartFrame,
     {
       ...head,
       label,
       className,
       scale: `${scaleLabel} \xB7 linear, from 0`,
-      legend: allSeries.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      legend: allSeries.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
         ChartLegend,
         {
           items: allSeries.map((s, slot) => ({ id: s.id, label: s.label, color: seriesColor(slot) })),
@@ -11491,7 +11741,7 @@ function BarChart2({
         ])
       },
       announcement: activeDatum ? tooltipText(activeDatum.detail ?? activeDatum.label, rowsAt(active)) : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
         "div",
         {
           ref: containerRef,
@@ -11504,12 +11754,12 @@ function BarChart2({
           onPointerLeave: () => setActive(null),
           className: plotClass,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("svg", { width: "100%", height: svgHeight, viewBox: `0 0 ${width} ${svgHeight}`, className: "block overflow-visible", "aria-hidden": "true", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("g", { "data-slot": "chart-value-axis", children: ticks.map((tick, index) => {
+            /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("svg", { width: "100%", height: svgHeight, viewBox: `0 0 ${width} ${svgHeight}`, className: "block overflow-visible", "aria-hidden": "true", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("g", { "data-slot": "chart-value-axis", children: ticks.map((tick, index) => {
                 const at = horizontal ? plotLeft + scale(tick) : plotBottom - scale(tick);
-                return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("g", { children: [
-                  horizontal ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("line", { x1: at, x2: at, y1: plotTop, y2: plotBottom, stroke: "var(--border)" }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("line", { x1: plotLeft, x2: plotRight, y1: at, y2: at, stroke: "var(--border)" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("g", { children: [
+                  horizontal ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("line", { x1: at, x2: at, y1: plotTop, y2: plotBottom, stroke: "var(--border)" }) : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("line", { x1: plotLeft, x2: plotRight, y1: at, y2: at, stroke: "var(--border)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "text",
                     {
                       x: horizontal ? at : plotLeft - 8,
@@ -11524,8 +11774,8 @@ function BarChart2({
                   )
                 ] }, tick);
               }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("g", { "data-slot": "chart-bars", children: bars }),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("g", { "data-slot": "chart-category-axis", children: labelIndices.map((index) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("g", { "data-slot": "chart-bars", children: bars }),
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("g", { "data-slot": "chart-category-axis", children: labelIndices.map((index) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                 "text",
                 {
                   x: horizontal ? plotLeft - 8 : plotLeft + (index + 0.5) * bandSize,
@@ -11539,7 +11789,7 @@ function BarChart2({
                 data[index].key
               )) })
             ] }),
-            activeDatum && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+            activeDatum && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
               ChartTooltip,
               {
                 title: activeDatum.detail ?? activeDatum.label,
@@ -11558,7 +11808,7 @@ function BarChart2({
 
 // src/web/components/charts/mixed-chart.tsx
 var import_react36 = require("react");
-var import_jsx_runtime120 = require("react/jsx-runtime");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var MARK_VIEWS = {
   bar: { value: "bar", label: "Bars", icon: "bar_chart" },
   stacked: { value: "stacked", label: "Stacked bars", icon: "stacked_bar_chart" },
@@ -11571,12 +11821,12 @@ var MAX_BAR_GROUP = 56;
 var ALL_MARKS = ["bar", "stacked", "line", "area", "dots"];
 function MarkSwatch({ mark, color }) {
   if (mark === "area") {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("rect", { width: "12", height: "12", rx: "3", fill: color, fillOpacity: "0.25" }),
-      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("line", { x1: "1", x2: "11", y1: "3", y2: "3", stroke: color, strokeWidth: "2", strokeLinecap: "round" })
+    return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("rect", { width: "12", height: "12", rx: "3", fill: color, fillOpacity: "0.25" }),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("line", { x1: "1", x2: "11", y1: "3", y2: "3", stroke: color, strokeWidth: "2", strokeLinecap: "round" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(LegendSwatch, { color, shape: mark === "line" ? "line" : mark === "dots" ? "dot" : "rect" });
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(LegendSwatch, { color, shape: mark === "line" ? "line" : mark === "dots" ? "dot" : "rect" });
 }
 function MixedChart({
   data,
@@ -11600,7 +11850,7 @@ function MixedChart({
   const series = allSeries.filter((s) => visibility.isVisible(s.id));
   const colorOf = (id) => seriesColor(allSeries.findIndex((s) => s.id === id));
   const count3 = data.length;
-  if (count3 === 0 || allSeries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_jsx_runtime120.Fragment, { children: empty ?? null });
+  if (count3 === 0 || allSeries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_jsx_runtime121.Fragment, { children: empty ?? null });
   const totals = data.map((d) => series.reduce((sum, s) => sum + Math.max(0, d.values[s.id] ?? 0), 0));
   const max = mark === "stacked" ? Math.max(0, ...totals) : Math.max(0, ...data.flatMap((d) => series.map((s) => d.values[s.id] ?? 0)));
   const ticks = chartValueTicks(max, { integer });
@@ -11639,7 +11889,7 @@ function MixedChart({
     });
   };
   const activeDatum = active === null ? null : data[active];
-  const strokeFor = (s) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+  const strokeFor = (s) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     "path",
     {
       "data-series": s.id,
@@ -11663,7 +11913,7 @@ function MixedChart({
           const bottom = mark === "stacked" ? y(stackTop) : plotBottom;
           if (mark === "stacked") stackTop += value;
           const barTop = mark === "stacked" ? y(stackTop) : y(value);
-          return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
             "rect",
             {
               "data-series": s.id,
@@ -11681,11 +11931,11 @@ function MixedChart({
       });
     }
     if (mark === "dots") {
-      return series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("g", { "data-series": s.id, "data-mark": "dots", children: data.map((d, index) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("circle", { cx: x(index), cy: y(d.values[s.id] ?? 0), r: 4, fill: colorOf(s.id), stroke: "var(--card)", strokeWidth: 1.5 }, d.key)) }, s.id));
+      return series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("g", { "data-series": s.id, "data-mark": "dots", children: data.map((d, index) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("circle", { cx: x(index), cy: y(d.values[s.id] ?? 0), r: 4, fill: colorOf(s.id), stroke: "var(--card)", strokeWidth: 1.5 }, d.key)) }, s.id));
     }
     if (mark === "area") {
-      return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
-        series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_jsx_runtime121.Fragment, { children: [
+        series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
           "path",
           {
             d: `${pathFor(s.id)}L${x(count3 - 1)},${plotBottom}L${x(0)},${plotBottom}Z`,
@@ -11698,7 +11948,7 @@ function MixedChart({
     }
     return series.map(strokeFor);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     ChartFrame,
     {
       ...head,
@@ -11708,14 +11958,14 @@ function MixedChart({
       label,
       className,
       scale: `${scaleLabel} \xB7 linear, from 0`,
-      legend: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+      legend: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
         ChartLegend,
         {
           items: allSeries.map((s) => ({
             id: s.id,
             label: s.label,
             color: colorOf(s.id),
-            swatch: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(MarkSwatch, { mark, color: colorOf(s.id) })
+            swatch: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(MarkSwatch, { mark, color: colorOf(s.id) })
           })),
           ...visibility.legend
         }
@@ -11725,7 +11975,7 @@ function MixedChart({
         rows: data.map((d) => [d.detail ?? d.label, ...allSeries.map((s) => formatValue(d.values[s.id] ?? 0))])
       },
       announcement: activeDatum ? tooltipText(activeDatum.detail ?? activeDatum.label, rowsAt(active)) : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
         "div",
         {
           ref: containerRef,
@@ -11737,7 +11987,7 @@ function MixedChart({
           onBlur: () => setActive(null),
           className: plotClass,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
               "svg",
               {
                 width: "100%",
@@ -11748,13 +11998,13 @@ function MixedChart({
                 onPointerMove,
                 onPointerLeave: () => setActive(null),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("defs", { children: mark === "area" && series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("linearGradient", { id: `${idBase}-wash-${s.id}`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("stop", { offset: "0", stopColor: colorOf(s.id), stopOpacity: "0.22" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("stop", { offset: "1", stopColor: colorOf(s.id), stopOpacity: "0.03" })
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("defs", { children: mark === "area" && series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("linearGradient", { id: `${idBase}-wash-${s.id}`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("stop", { offset: "0", stopColor: colorOf(s.id), stopOpacity: "0.22" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("stop", { offset: "1", stopColor: colorOf(s.id), stopOpacity: "0.03" })
                   ] }, s.id)) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("g", { "data-slot": "chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("line", { x1: plotLeft, x2: plotRight, y1: y(tick), y2: y(tick), stroke: "var(--border)" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("g", { "data-slot": "chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("line", { x1: plotLeft, x2: plotRight, y1: y(tick), y2: y(tick), stroke: "var(--border)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                       "text",
                       {
                         x: plotLeft - 8,
@@ -11768,7 +12018,7 @@ function MixedChart({
                       }
                     )
                   ] }, tick)) }),
-                  active !== null && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  active !== null && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                     "rect",
                     {
                       "data-slot": "chart-active-band",
@@ -11780,8 +12030,8 @@ function MixedChart({
                       fillOpacity: 0.08
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("g", { "data-slot": "chart-marks", "data-view": mark, children: marksLayer() }),
-                  active !== null && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("g", { "data-slot": "chart-crosshair", children: (mark === "bar" || mark === "stacked" ? [] : series).map((s) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("g", { "data-slot": "chart-marks", "data-view": mark, children: marksLayer() }),
+                  active !== null && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("g", { "data-slot": "chart-crosshair", children: (mark === "bar" || mark === "stacked" ? [] : series).map((s) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                     "circle",
                     {
                       cx: x(active),
@@ -11793,7 +12043,7 @@ function MixedChart({
                     },
                     s.id
                   )) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("g", { "data-slot": "chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("g", { "data-slot": "chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                     "text",
                     {
                       x: x(index),
@@ -11808,7 +12058,7 @@ function MixedChart({
                 ]
               }
             ),
-            activeDatum && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+            activeDatum && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
               ChartTooltip,
               {
                 title: activeDatum.detail ?? activeDatum.label,
@@ -11826,7 +12076,7 @@ function MixedChart({
 }
 
 // src/web/components/charts/bar-list.tsx
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 function BarList({
   items,
   label,
@@ -11839,7 +12089,7 @@ function BarList({
   className,
   ...head
 }) {
-  if (items.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_jsx_runtime121.Fragment, { children: empty ?? null });
+  if (items.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_jsx_runtime122.Fragment, { children: empty ?? null });
   const rows = sort === "desc" ? [...items].sort((a, b) => b.value - a.value) : items;
   const top = Math.max(max ?? 0, ...rows.map((item) => item.value), 0) || 1;
   const sum = rows.reduce((acc, item) => acc + Math.max(0, item.value), 0);
@@ -11847,7 +12097,7 @@ function BarList({
   const framed = head.title !== void 0 || (head.timeframes?.length ?? 0) > 0;
   const label_ = labelWidth ? `minmax(0,${labelWidth})` : "auto";
   const wideColumns = showPercent ? `${label_} 1fr auto auto` : `${label_} 1fr auto`;
-  const list = /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  const list = /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
     "ol",
     {
       "data-slot": "bar-list",
@@ -11862,7 +12112,7 @@ function BarList({
       style: { "--bar-list-columns": wideColumns },
       children: rows.map((item) => {
         const share = Math.max(0, item.value) / top;
-        return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
           "li",
           {
             "data-slot": "bar-list-row",
@@ -11873,13 +12123,13 @@ function BarList({
               "sm:col-span-full sm:grid-cols-subgrid sm:items-center sm:gap-y-0"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: cn("min-w-0 truncate text-muted-foreground", !labelWidth && "sm:max-w-[10rem]"), children: item.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: cn("min-w-0 truncate text-muted-foreground", !labelWidth && "sm:max-w-[10rem]"), children: item.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
                 "span",
                 {
                   className: "order-last col-span-full h-2 overflow-hidden rounded-full bg-primary/15 shadow-inner sm:order-none sm:col-span-1",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
                     "span",
                     {
                       className: "block h-full rounded-full bg-primary bg-gradient-primary",
@@ -11892,8 +12142,8 @@ function BarList({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "whitespace-nowrap text-right font-semibold tabular-nums text-foreground", children: item.valueText ?? formatValue(item.value) }),
-              showPercent && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-right tabular-nums text-muted-foreground", children: percentOf(item) })
+              /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "whitespace-nowrap text-right font-semibold tabular-nums text-foreground", children: item.valueText ?? formatValue(item.value) }),
+              showPercent && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-right tabular-nums text-muted-foreground", children: percentOf(item) })
             ]
           },
           item.id
@@ -11902,7 +12152,7 @@ function BarList({
     }
   );
   if (!framed) return list;
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
     ChartFrame,
     {
       ...head,
@@ -11925,7 +12175,7 @@ function formatPercent(fraction) {
 
 // src/web/components/charts/donut-chart.tsx
 var import_react37 = require("react");
-var import_jsx_runtime122 = require("react/jsx-runtime");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var OTHER_ID = "__other";
 function foldSegments(segments) {
   const positive = segments.filter((s) => s.value > 0);
@@ -11963,7 +12213,7 @@ function DonutChart({
   const visibility = useSeriesVisibility(allParts.map((part) => part.id));
   const parts = allParts.filter((part) => visibility.isVisible(part.id));
   const total = parts.reduce((sum, s) => sum + s.value, 0);
-  if (parts.length === 0 || total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_jsx_runtime122.Fragment, { children: empty ?? null });
+  if (parts.length === 0 || total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_jsx_runtime123.Fragment, { children: empty ?? null });
   const cx = size / 2;
   const cy = size / 2;
   const outer = size / 2 - 2;
@@ -11989,13 +12239,13 @@ function DonutChart({
       return next === void 0 ? current : next;
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
     ChartFrame,
     {
       ...head,
       label,
       className,
-      legend: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      legend: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         ChartLegend,
         {
           items: allParts.map((part) => ({
@@ -12014,7 +12264,7 @@ function DonutChart({
         ]
       },
       announcement: activePart ? `${activePart.label}: ${formatValue(activePart.value)}, ${share(activePart.value)}` : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "div",
         {
           role: "group",
@@ -12025,8 +12275,8 @@ function DonutChart({
           onBlur: () => setActive(null),
           onPointerLeave: () => setActive(null),
           className: `${plotClass} flex justify-center py-4`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", className: "block max-w-full", children: [
-            arcs.map(({ part, start, end }, index) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", className: "block max-w-full", children: [
+            arcs.map(({ part, start, end }, index) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
               "path",
               {
                 "data-segment": part.id,
@@ -12037,7 +12287,7 @@ function DonutChart({
               },
               part.id
             )),
-            /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
               "text",
               {
                 x: cx,
@@ -12049,7 +12299,7 @@ function DonutChart({
                 children: formatValue(activePart ? activePart.value : total)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("text", { x: cx, y: cy + 16, textAnchor: "middle", fontSize: 11, fill: "var(--muted-foreground)", children: activePart ? `${activePart.label} \xB7 ${share(activePart.value)}` : totalLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("text", { x: cx, y: cy + 16, textAnchor: "middle", fontSize: 11, fill: "var(--muted-foreground)", children: activePart ? `${activePart.label} \xB7 ${share(activePart.value)}` : totalLabel })
           ] })
         }
       )
@@ -12059,7 +12309,7 @@ function DonutChart({
 
 // src/web/components/charts/scatter-chart.tsx
 var import_react38 = require("react");
-var import_jsx_runtime123 = require("react/jsx-runtime");
+var import_jsx_runtime124 = require("react/jsx-runtime");
 var MARGIN4 = { top: 12, right: 16, bottom: 40, left: 8 };
 var HIT_RADIUS = 12;
 function ScatterChart({
@@ -12085,7 +12335,7 @@ function ScatterChart({
     );
   }
   const points = series.flatMap((s) => s.points.map((p) => ({ ...p, slot: slotOf(s.id), seriesLabel: s.label }))).sort((a, b) => a.x - b.x);
-  if (points.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_jsx_runtime123.Fragment, { children: empty ?? null });
+  if (points.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_jsx_runtime124.Fragment, { children: empty ?? null });
   const xMax = Math.max(0, ...points.map((p) => p.x));
   const yMax = Math.max(0, ...points.map((p) => p.y));
   const xTicks = chartValueTicks(xMax);
@@ -12124,14 +12374,14 @@ function ScatterChart({
   };
   const activePoint = active === null ? null : points[active];
   const describe = (p) => `${p.label ?? p.seriesLabel}: ${xLabel} ${formatX(p.x)}, ${yLabel} ${formatY(p.y)}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
     ChartFrame,
     {
       ...head,
       label,
       className,
       scale: `${yLabel} against ${xLabel} \xB7 both linear, from 0`,
-      legend: allSeries.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+      legend: allSeries.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
         ChartLegend,
         {
           keyShape: "dot",
@@ -12144,7 +12394,7 @@ function ScatterChart({
         rows: points.map((p) => [p.label ?? p.id, p.seriesLabel, formatX(p.x), formatY(p.y)])
       },
       announcement: activePoint ? describe(activePoint) : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
         "div",
         {
           ref: containerRef,
@@ -12156,7 +12406,7 @@ function ScatterChart({
           onBlur: () => setActive(null),
           className: plotClass,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
               "svg",
               {
                 width: "100%",
@@ -12167,13 +12417,13 @@ function ScatterChart({
                 onPointerMove,
                 onPointerLeave: () => setActive(null),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("g", { "data-slot": "chart-y-axis", children: yTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("line", { x1: plotLeft, x2: plotRight, y1: sy(tick), y2: sy(tick), stroke: "var(--border)" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("text", { x: plotLeft - 8, y: sy(tick), dy: "0.32em", textAnchor: "end", fontSize: TICK_FONT, fill: "var(--muted-foreground)", style: { fontVariantNumeric: "tabular-nums" }, children: yTickLabels[index] })
+                  /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("g", { "data-slot": "chart-y-axis", children: yTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("line", { x1: plotLeft, x2: plotRight, y1: sy(tick), y2: sy(tick), stroke: "var(--border)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("text", { x: plotLeft - 8, y: sy(tick), dy: "0.32em", textAnchor: "end", fontSize: TICK_FONT, fill: "var(--muted-foreground)", style: { fontVariantNumeric: "tabular-nums" }, children: yTickLabels[index] })
                   ] }, tick)) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("g", { "data-slot": "chart-x-axis", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("line", { x1: plotLeft, x2: plotRight, y1: plotBottom, y2: plotBottom, stroke: "var(--border)" }),
-                    xTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("g", { "data-slot": "chart-x-axis", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("line", { x1: plotLeft, x2: plotRight, y1: plotBottom, y2: plotBottom, stroke: "var(--border)" }),
+                    xTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
                       "text",
                       {
                         x: sx(tick),
@@ -12186,12 +12436,12 @@ function ScatterChart({
                       },
                       tick
                     )),
-                    /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("text", { x: plotRight, y: plotBottom + 34, textAnchor: "end", fontSize: TICK_FONT, fill: "var(--muted-foreground)", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("text", { x: plotRight, y: plotBottom + 34, textAnchor: "end", fontSize: TICK_FONT, fill: "var(--muted-foreground)", children: [
                       xLabel,
                       " \u2192"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("g", { "data-slot": "chart-points", children: points.map((p, index) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("g", { "data-slot": "chart-points", children: points.map((p, index) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
                     "circle",
                     {
                       "data-series": allSeries[p.slot].id,
@@ -12208,7 +12458,7 @@ function ScatterChart({
                 ]
               }
             ),
-            activePoint && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+            activePoint && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
               ChartTooltip,
               {
                 title: activePoint.label ?? activePoint.seriesLabel,
@@ -12230,7 +12480,7 @@ function ScatterChart({
 
 // src/web/components/charts/sparkline.tsx
 var import_react39 = require("react");
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_jsx_runtime125 = require("react/jsx-runtime");
 function Sparkline({ values, label, width = 96, height = 28, pulse = false, tone = "default", className }) {
   const fill = height === "fill";
   const boxRef = (0, import_react39.useRef)(null);
@@ -12250,13 +12500,13 @@ function Sparkline({ values, label, width = 96, height = 28, pulse = false, tone
   const min = Math.min(...values);
   const max = Math.max(...values);
   const span = max - min || 1;
-  const pad = 4;
-  const x = (index) => pad + index / (values.length - 1) * (width - pad * 2);
-  const y = (value) => h - pad - (value - min) / span * (h - pad * 2);
+  const pad2 = 4;
+  const x = (index) => pad2 + index / (values.length - 1) * (width - pad2 * 2);
+  const y = (value) => h - pad2 - (value - min) / span * (h - pad2 * 2);
   const d = values.map((value, index) => `${index === 0 ? "M" : "L"}${x(index).toFixed(1)},${y(value).toFixed(1)}`).join("");
   const last = values.length - 1;
   const dot = tone === "negative" ? "var(--color-danger)" : "var(--series-1)";
-  const svg = /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+  const svg = /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
     "svg",
     {
       "data-slot": "sparkline",
@@ -12267,8 +12517,8 @@ function Sparkline({ values, label, width = 96, height = 28, pulse = false, tone
       viewBox: `0 0 ${width} ${h}`,
       className: cn("block shrink-0 overflow-visible", !fill && className, fill && "absolute inset-y-0 right-0"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("path", { d, fill: "none", stroke: "var(--muted-foreground)", strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }),
-        pulse && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("path", { d, fill: "none", stroke: "var(--muted-foreground)", strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }),
+        pulse && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
           "circle",
           {
             "data-slot": "sparkline-pulse",
@@ -12281,16 +12531,16 @@ function Sparkline({ values, label, width = 96, height = 28, pulse = false, tone
             style: { transformBox: "fill-box", transformOrigin: "center" }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("circle", { cx: x(last), cy: y(values[last]), r: 4, fill: dot, stroke: "var(--card)", strokeWidth: 2 })
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("circle", { cx: x(last), cy: y(values[last]), r: 4, fill: dot, stroke: "var(--card)", strokeWidth: 2 })
       ]
     }
   );
   if (!fill) return svg;
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { ref: boxRef, className: cn("relative block h-full", className), style: { width }, children: svg });
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { ref: boxRef, className: cn("relative block h-full", className), style: { width }, children: svg });
 }
 
 // src/web/components/charts/meter.tsx
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime126 = require("react/jsx-runtime");
 function Meter({
   label,
   value,
@@ -12305,19 +12555,19 @@ function Meter({
   const fill = { normal: "bg-primary bg-gradient-primary", warning: "bg-warning bg-gradient-warning", danger: "bg-danger bg-gradient-danger" }[state];
   const track = { normal: "bg-primary/15", warning: "bg-warning/15", danger: "bg-danger/15" }[state];
   const percent = Math.round(ratio * 100);
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { "data-slot": "meter", "data-state": state, className: cn("space-y-1.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex items-baseline justify-between gap-3 text-caption", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-muted-foreground", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("span", { className: "font-semibold tabular-nums text-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { "data-slot": "meter", "data-state": state, className: cn("space-y-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex items-baseline justify-between gap-3 text-caption", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "text-muted-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { className: "font-semibold tabular-nums text-foreground", children: [
         formatValue(value),
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("span", { className: "font-normal text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { className: "font-normal text-muted-foreground", children: [
           "/ ",
           formatValue(max)
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
       "div",
       {
         role: "meter",
@@ -12327,18 +12577,18 @@ function Meter({
         "aria-valuetext": `${formatValue(value)} of ${formatValue(max)}, ${percent}%`,
         "aria-label": typeof label === "string" ? label : void 0,
         className: cn("h-2 overflow-hidden rounded-full shadow-inner", track),
-        children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: cn("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", fill), style: { width: `${ratio * 100}%` } })
+        children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: cn("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", fill), style: { width: `${ratio * 100}%` } })
       }
     ),
-    state !== "normal" && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("p", { className: cn("m-0 flex items-center gap-1 text-caption", state === "danger" ? "text-danger-fg" : "text-warning-fg"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(IconGlyph, { glyph: state === "danger" ? Error2 : Warning, className: "text-icon-sm" }),
+    state !== "normal" && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("p", { className: cn("m-0 flex items-center gap-1 text-caption", state === "danger" ? "text-danger-fg" : "text-warning-fg"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(IconGlyph, { glyph: state === "danger" ? Error2 : Warning, className: "text-icon-sm" }),
       state === "danger" ? `Almost full \xB7 ${percent}%` : `Getting full \xB7 ${percent}%`
     ] })
   ] });
 }
 
 // src/web/components/activity-row.tsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var directionUi = {
   inbound: { icon: "south_west", iconClass: "bg-primary/20 text-brand", amountClass: "text-brand", sign: "+" },
   outbound: { icon: "north_east", iconClass: "bg-foreground/10 text-muted-foreground", amountClass: "text-foreground", sign: "-" },
@@ -12358,29 +12608,29 @@ function ActivityRow({
   className
 }) {
   const ui = directionUi[direction];
-  const content = /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
         StatusIconBadge,
         {
           status,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: cn("flex size-10 items-center justify-center rounded-xl shadow-inner", ui.iconClass), children: typeof icon === "string" || !icon ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon, { name: icon ?? ui.icon, className: "text-icon-xl" }) : icon })
+          icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: cn("flex size-10 items-center justify-center rounded-xl shadow-inner", ui.iconClass), children: typeof icon === "string" || !icon ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { name: icon ?? ui.icon, className: "text-icon-xl" }) : icon })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "truncate text-body font-bold tracking-wide text-foreground", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "truncate text-body font-bold tracking-wide text-foreground", children: title }),
           networkBadge
         ] }),
-        timestamp && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "mt-1 flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "text-xxs text-muted-foreground", children: timestamp }) })
+        timestamp && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "mt-1 flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "text-xxs text-muted-foreground", children: timestamp }) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "shrink-0 text-right", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("p", { className: cn("text-body font-bold tracking-wide", ui.amountClass), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "shrink-0 text-right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("p", { className: cn("text-body font-bold tracking-wide", ui.amountClass), children: [
         ui.sign,
         amount
       ] }),
-      unit && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("p", { className: cn("mt-0.5 text-muted-foreground", eyebrow), children: unit })
+      unit && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("p", { className: cn("mt-0.5 text-muted-foreground", eyebrow), children: unit })
     ] })
   ] });
   const rowClassName = cn(
@@ -12389,13 +12639,13 @@ function ActivityRow({
     className
   );
   if (onClick) {
-    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("button", { type: "button", onClick, className: rowClassName, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("button", { type: "button", onClick, className: rowClassName, children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: rowClassName, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: rowClassName, children: content });
 }
 
 // src/web/components/secret-reveal-card.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 function SecretRevealCard({
   value,
   revealed,
@@ -12414,9 +12664,9 @@ function SecretRevealCard({
   const selfCopy = !onCopy && copyValue !== void 0;
   const handleCopy = onCopy ?? (selfCopy ? () => void clipboard.copy(copyValue) : void 0);
   const copied = selfCopy && clipboard.state === "copied";
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: cn("space-y-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "rounded-xl bg-card/55 bg-gradient-card px-3 py-3 shadow-inner ring-1 ring-inset ring-secondary/15 backdrop-blur-xl backdrop-saturate-150", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "rounded-xl bg-card/55 bg-gradient-card px-3 py-3 shadow-inner ring-1 ring-inset ring-secondary/15 backdrop-blur-xl backdrop-saturate-150", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
         "p",
         {
           className: cn(
@@ -12428,17 +12678,17 @@ function SecretRevealCard({
           children: value
         }
       ) }),
-      !revealed && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(Button, { type: "button", variant: "surface", size: "sm", onClick: () => onRevealChange(true), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(IconGlyph, { glyph: Visibility, className: "text-icon-lg" }),
+      !revealed && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(Button, { type: "button", variant: "surface", size: "sm", onClick: () => onRevealChange(true), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconGlyph, { glyph: Visibility, className: "text-icon-lg" }),
         revealLabel
       ] }) })
     ] }),
-    revealed && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(Button, { type: "button", variant: "surface", className: "flex-1", onClick: () => onRevealChange(false), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(IconGlyph, { glyph: VisibilityOff, className: "text-icon-lg" }),
+    revealed && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(Button, { type: "button", variant: "surface", className: "flex-1", onClick: () => onRevealChange(false), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconGlyph, { glyph: VisibilityOff, className: "text-icon-lg" }),
         hideLabel
       ] }),
-      handleCopy && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+      handleCopy && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
         Button,
         {
           type: "button",
@@ -12446,19 +12696,19 @@ function SecretRevealCard({
           onClick: handleCopy,
           className: cn("flex-1", copied && "bg-primary/10 bg-gradient-active text-brand ring-primary/40 hover:ring-primary/50"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(IconGlyph, { glyph: copied ? Check : ContentCopy, className: "text-icon-lg" }),
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconGlyph, { glyph: copied ? Check : ContentCopy, className: "text-icon-lg" }),
             copied ? copiedLabel : copyLabel
           ]
         }
       )
     ] }),
-    selfCopy && clipboard.state === "failed" && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("p", { role: "alert", className: "m-0 text-caption text-danger-fg", children: copyFailedMessage }),
-    selfCopy && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { "aria-live": "polite", className: "sr-only", children: copied ? copiedLabel : "" })
+    selfCopy && clipboard.state === "failed" && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { role: "alert", className: "m-0 text-caption text-danger-fg", children: copyFailedMessage }),
+    selfCopy && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { "aria-live": "polite", className: "sr-only", children: copied ? copiedLabel : "" })
   ] });
 }
 
 // src/web/components/settings-section-card.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 function SettingsSectionCard({
   icon,
   title,
@@ -12468,18 +12718,18 @@ function SettingsSectionCard({
   className,
   bodyClassName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("section", { className: cn("space-y-4 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-4 shadow-card-secondary", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("h2", { className: "text-body font-bold text-foreground", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "mt-1 text-caption text-muted-foreground", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("section", { className: cn("space-y-4 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-4 shadow-card-secondary", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("h2", { className: "text-body font-bold text-foreground", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: "mt-1 text-caption text-muted-foreground", children: description })
         ] })
       ] }),
       badge
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: bodyClassName, children })
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: bodyClassName, children })
   ] });
 }
 var badgeToneClass = {
@@ -12496,7 +12746,7 @@ var badgeToneClass = {
   outline: "border border-border bg-transparent text-foreground"
 };
 function ToneBadge({ children, tone = "muted", case: letterCase = "upper", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "span",
     {
       "data-slot": "tone-badge",
@@ -12512,7 +12762,7 @@ function ToneBadge({ children, tone = "muted", case: letterCase = "upper", class
 }
 
 // src/web/components/selectable-card.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 function SelectableCard({
   selected,
   onClick,
@@ -12524,28 +12774,28 @@ function SelectableCard({
   children,
   className
 }) {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
-      indicator && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+      indicator && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
         "div",
         {
           className: cn(
             "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
             selected ? "border-primary bg-primary bg-gradient-primary shadow-glow-primary-soft" : "border-secondary/40"
           ),
-          children: selected && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "size-2 rounded-full bg-white" })
+          children: selected && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "size-2 rounded-full bg-white" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-body font-bold text-foreground", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-body font-bold text-foreground", children: title }),
           badge
         ] }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: "mt-0.5 text-caption leading-relaxed text-muted-foreground", children: description }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { className: "mt-0.5 text-caption leading-relaxed text-muted-foreground", children: description }),
         children
       ] })
     ] }),
-    preview && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "shrink-0 text-right", children: preview })
+    preview && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "shrink-0 text-right", children: preview })
   ] });
   const cardClassName = cn(
     "w-full rounded-2xl border border-transparent bg-card p-4 text-left transition-all duration-200",
@@ -12553,14 +12803,14 @@ function SelectableCard({
     className
   );
   if (onClick) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("button", { type: "button", onClick, className: cardClassName, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("button", { type: "button", onClick, className: cardClassName, children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: cardClassName, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: cardClassName, children: content });
 }
 
 // src/web/components/mobile-hero-animation.tsx
 var import_react40 = require("react");
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var PROTOCOLS = [
   { name: "Bitcoin", network: "Bitcoin", iconSuffix: "bitcoin/bitcoin-logo.svg" },
   { name: "Lightning", network: "LN", iconSuffix: "lightning/lightning.svg" },
@@ -12619,15 +12869,15 @@ var MobileHeroAnimation = ({
   }, []);
   const anim = !reducedMotion && isVisible;
   const scale = size / 280;
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
     "div",
     {
       ref: containerRef,
       className,
       style: { position: "relative", width: size, height: size },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("style", { children: KEYFRAMES }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("style", { children: KEYFRAMES }),
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { style: {
           position: "absolute",
           top: 0,
           left: 0,
@@ -12636,7 +12886,7 @@ var MobileHeroAnimation = ({
           transformOrigin: "top left",
           transform: scale !== 1 ? `scale(${scale})` : void 0
         }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
             "svg",
             {
               viewBox: "0 0 280 280",
@@ -12645,34 +12895,34 @@ var MobileHeroAnimation = ({
               style: { position: "absolute", inset: 0 },
               xmlns: "http://www.w3.org/2000/svg",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("defs", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("radialGradient", { id: "mh-center-glow", cx: "50%", cy: "50%", r: "50%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("stop", { offset: "0%", stopColor: "#0e9dff", stopOpacity: "0.3" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("stop", { offset: "40%", stopColor: "#8a5cf6", stopOpacity: "0.15" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("defs", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("radialGradient", { id: "mh-center-glow", cx: "50%", cy: "50%", r: "50%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", stopColor: "#0e9dff", stopOpacity: "0.3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "40%", stopColor: "#8a5cf6", stopOpacity: "0.15" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("linearGradient", { id: "mh-gp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("stop", { offset: "0%", stopColor: "#22c55e" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("linearGradient", { id: "mh-gp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", stopColor: "#22c55e" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("linearGradient", { id: "mh-bp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("stop", { offset: "0%", stopColor: "#0e9dff" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("linearGradient", { id: "mh-bp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", stopColor: "#0e9dff" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("filter", { id: "mh-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("feGaussianBlur", { stdDeviation: "2.5", result: "blur" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("feMerge", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("feMergeNode", { in: "blur" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("feMergeNode", { in: "SourceGraphic" })
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("filter", { id: "mh-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("feGaussianBlur", { stdDeviation: "2.5", result: "blur" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("feMerge", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("feMergeNode", { in: "blur" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("feMergeNode", { in: "SourceGraphic" })
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("circle", { cx: C, cy: C, r: ORBIT_R, fill: "none", stroke: "#0e9dff", strokeWidth: "1", strokeOpacity: "0.25", opacity: "0.4", children: anim && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "r", values: `${ORBIT_R};${Math.round(ORBIT_R * 1.12)};${ORBIT_R}`, dur: "2.5s", repeatCount: "indefinite" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "opacity", values: "0.4;0;0.4", dur: "2.5s", repeatCount: "indefinite" })
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: C, cy: C, r: ORBIT_R, fill: "none", stroke: "#0e9dff", strokeWidth: "1", strokeOpacity: "0.25", opacity: "0.4", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "r", values: `${ORBIT_R};${Math.round(ORBIT_R * 1.12)};${ORBIT_R}`, dur: "2.5s", repeatCount: "indefinite" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.4;0;0.4", dur: "2.5s", repeatCount: "indefinite" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("circle", { cx: C, cy: C, r: 80, fill: "none", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1", strokeDasharray: "4 4" }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: C, cy: C, r: 80, fill: "none", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1", strokeDasharray: "4 4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                   "g",
                   {
                     style: {
@@ -12690,8 +12940,8 @@ var MobileHeroAnimation = ({
                       const y2 = C + dy * (ORBIT_R - BADGE_HALF);
                       const color = PROTOCOL_COLORS[protocol.network] ?? "#ffffff";
                       const dur = `${2 + i * 0.3}s`;
-                      return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("g", { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                           "line",
                           {
                             x1,
@@ -12702,30 +12952,30 @@ var MobileHeroAnimation = ({
                             strokeWidth: "0.8",
                             strokeDasharray: "2 4",
                             opacity: "0.25",
-                            children: anim && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-12", dur: `${1.5 + i * 0.2}s`, repeatCount: "indefinite" })
+                            children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-12", dur: `${1.5 + i * 0.2}s`, repeatCount: "indefinite" })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("circle", { r: "2", fill: color, opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "cx", values: `${x1};${x2}`, dur, repeatCount: "indefinite" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "cy", values: `${y1};${y2}`, dur, repeatCount: "indefinite" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "opacity", values: "0;0.85;0", dur, repeatCount: "indefinite" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "r", values: "1.5;2.5;1.5", dur, repeatCount: "indefinite" })
+                        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { r: "2", fill: color, opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "cx", values: `${x1};${x2}`, dur, repeatCount: "indefinite" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "cy", values: `${y1};${y2}`, dur, repeatCount: "indefinite" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0;0.85;0", dur, repeatCount: "indefinite" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "r", values: "1.5;2.5;1.5", dur, repeatCount: "indefinite" })
                         ] }) })
                       ] }, `line-${i}`);
                     })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("circle", { cx: C, cy: C, r: "42", fill: "url(#mh-center-glow)", children: anim && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "r", values: "38;46;38", dur: "4s", repeatCount: "indefinite" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("circle", { cx: C, cy: C, r: "29", fill: "none", stroke: "url(#mh-bp)", strokeWidth: "1", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "r", values: "27;38", dur: "3s", repeatCount: "indefinite" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "opacity", values: "0.4;0", dur: "3s", repeatCount: "indefinite" })
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: C, cy: C, r: "42", fill: "url(#mh-center-glow)", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "r", values: "38;46;38", dur: "4s", repeatCount: "indefinite" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: C, cy: C, r: "29", fill: "none", stroke: "url(#mh-bp)", strokeWidth: "1", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "r", values: "27;38", dur: "3s", repeatCount: "indefinite" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.4;0", dur: "3s", repeatCount: "indefinite" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("circle", { cx: C, cy: C, r: "27", fill: "none", stroke: "url(#mh-gp)", strokeWidth: "0.8", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "r", values: "27;36", dur: "3s", repeatCount: "indefinite", begin: "1.5s" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "opacity", values: "0.3;0", dur: "3s", repeatCount: "indefinite", begin: "1.5s" })
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: C, cy: C, r: "27", fill: "none", stroke: "url(#mh-gp)", strokeWidth: "0.8", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "r", values: "27;36", dur: "3s", repeatCount: "indefinite", begin: "1.5s" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.3;0", dur: "3s", repeatCount: "indefinite", begin: "1.5s" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("g", { transform: `translate(${C},${C})`, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("g", { children: [
-                  anim && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("g", { transform: `translate(${C},${C})`, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
+                  anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animateTransform",
                     {
                       attributeName: "transform",
@@ -12737,13 +12987,13 @@ var MobileHeroAnimation = ({
                       additive: "sum"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("path", { d: hexPath(34), fill: "none", stroke: "url(#mh-gp)", strokeWidth: "1.5", opacity: "0.4", filter: "url(#mh-glow)", children: anim && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "opacity", values: "0.3;0.65;0.3", dur: "3s", repeatCount: "indefinite" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("animate", { attributeName: "stroke-width", values: "1.5;2.5;1.5", dur: "3s", repeatCount: "indefinite" })
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: hexPath(34), fill: "none", stroke: "url(#mh-gp)", strokeWidth: "1.5", opacity: "0.4", filter: "url(#mh-glow)", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.3;0.65;0.3", dur: "3s", repeatCount: "indefinite" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stroke-width", values: "1.5;2.5;1.5", dur: "3s", repeatCount: "indefinite" })
                   ] }) })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("g", { transform: `translate(${C},${C})`, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("g", { children: [
-                  anim && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("g", { transform: `translate(${C},${C})`, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
+                  anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animateTransform",
                     {
                       attributeName: "transform",
@@ -12755,19 +13005,19 @@ var MobileHeroAnimation = ({
                       additive: "sum"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("path", { d: hexPath(32), fill: "rgba(10,15,30,0.75)", stroke: "rgba(255,255,255,0.08)", strokeWidth: "0.5" })
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: hexPath(32), fill: "rgba(10,15,30,0.75)", stroke: "rgba(255,255,255,0.08)", strokeWidth: "0.5" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("g", { transform: `translate(${C - 18.8},${C - 18.8}) scale(0.0912)`, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("path", { d: "M137.306 411.865H0.000244141L68.6795 343.29L137.306 411.865Z", fill: "#6F32FF" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("path", { d: "M0 0H137.306L68.6267 68.574L0 0Z", fill: "#6F32FF" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("path", { d: "M137.148 274.559H274.455L411.708 411.866H274.401L137.148 274.559Z", fill: "#17B581" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("path", { d: "M137.149 274.559L68.6274 205.933L137.201 137.306L274.455 137.411L205.776 206.038L274.456 274.559H137.149Z", fill: "#15E99A" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("path", { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { transform: `translate(${C - 18.8},${C - 18.8}) scale(0.0912)`, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M137.306 411.865H0.000244141L68.6795 343.29L137.306 411.865Z", fill: "#6F32FF" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M0 0H137.306L68.6267 68.574L0 0Z", fill: "#6F32FF" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M137.148 274.559H274.455L411.708 411.866H274.401L137.148 274.559Z", fill: "#17B581" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M137.149 274.559L68.6274 205.933L137.201 137.306L274.455 137.411L205.776 206.038L274.456 274.559H137.149Z", fill: "#15E99A" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { style: {
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { style: {
             position: "absolute",
             inset: 0,
             width: 280,
@@ -12778,7 +13028,7 @@ var MobileHeroAnimation = ({
             const x = C + Math.cos(angle) * ORBIT_R - BADGE_HALF;
             const y = C + Math.sin(angle) * ORBIT_R - BADGE_HALF;
             const color = PROTOCOL_COLORS[protocol.network] ?? "#ffffff";
-            return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
               "div",
               {
                 style: {
@@ -12789,7 +13039,7 @@ var MobileHeroAnimation = ({
                   height: BADGE_SIZE,
                   animation: anim ? "mha-counter-spin 20s linear infinite" : "none"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { style: {
+                children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { style: {
                   width: "100%",
                   height: "100%",
                   borderRadius: "50%",
@@ -12800,7 +13050,7 @@ var MobileHeroAnimation = ({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center"
-                }, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                   "img",
                   {
                     src: iconBasePath ? `${iconBasePath}/${protocol.iconSuffix}` : protocolIcons[protocol.network] ?? protocol.iconSuffix,
@@ -12821,7 +13071,7 @@ var MobileHeroAnimation = ({
 
 // src/web/components/kaleidoscope-hero-animation.tsx
 var import_react41 = require("react");
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var PROTOCOLS2 = [
   { name: "Bitcoin L1", network: "L1", color: "#F7931A", glowColor: "rgba(247,147,26,0.5)" },
   { name: "Lightning", network: "LN", color: "#fbbf24", glowColor: "rgba(251,191,36,0.5)" },
@@ -12926,13 +13176,13 @@ var KaleidoScopeHeroAnimation = ({
     const angle = Math.PI * 2 * i / 7 - Math.PI / 2;
     return { x: c + orbitR * Math.cos(angle), y: c + orbitR * Math.sin(angle) };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     "div",
     {
       ref: containerRef,
       className: `relative ${className}`,
       style: size ? { width: size, height: size } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
         "svg",
         {
           viewBox: "0 0 500 500",
@@ -12941,60 +13191,60 @@ var KaleidoScopeHeroAnimation = ({
           xmlns: "http://www.w3.org/2000/svg",
           className: "overflow-visible",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("defs", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("linearGradient", { id: "kh-grad-a", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stop-color", values: "#22c55e;#8a5cf6;#06b6d4;#F7931A;#22c55e", dur: "10s", repeatCount: "indefinite" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stop-color", values: "#8a5cf6;#F7931A;#22c55e;#06b6d4;#8a5cf6", dur: "10s", repeatCount: "indefinite" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("defs", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("linearGradient", { id: "kh-grad-a", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "0%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "stop-color", values: "#22c55e;#8a5cf6;#06b6d4;#F7931A;#22c55e", dur: "10s", repeatCount: "indefinite" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "100%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "stop-color", values: "#8a5cf6;#F7931A;#22c55e;#06b6d4;#8a5cf6", dur: "10s", repeatCount: "indefinite" }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("linearGradient", { id: "kh-grad-b", x1: "100%", y1: "0%", x2: "0%", y2: "100%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stop-color", values: "#06b6d4;#22c55e;#F7931A;#8a5cf6;#06b6d4", dur: "8s", repeatCount: "indefinite" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stop-color", values: "#F7931A;#06b6d4;#8a5cf6;#22c55e;#F7931A", dur: "8s", repeatCount: "indefinite" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("linearGradient", { id: "kh-grad-b", x1: "100%", y1: "0%", x2: "0%", y2: "100%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "0%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "stop-color", values: "#06b6d4;#22c55e;#F7931A;#8a5cf6;#06b6d4", dur: "8s", repeatCount: "indefinite" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "100%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "stop-color", values: "#F7931A;#06b6d4;#8a5cf6;#22c55e;#F7931A", dur: "8s", repeatCount: "indefinite" }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("linearGradient", { id: "kh-grad-c", x1: "50%", y1: "0%", x2: "50%", y2: "100%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stop-color", values: "#0e9dff;#8a5cf6;#15E99A;#0e9dff", dur: "6s", repeatCount: "indefinite" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stop-color", values: "#8a5cf6;#15E99A;#0e9dff;#8a5cf6", dur: "6s", repeatCount: "indefinite" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("linearGradient", { id: "kh-grad-c", x1: "50%", y1: "0%", x2: "50%", y2: "100%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "0%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "stop-color", values: "#0e9dff;#8a5cf6;#15E99A;#0e9dff", dur: "6s", repeatCount: "indefinite" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "100%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "stop-color", values: "#8a5cf6;#15E99A;#0e9dff;#8a5cf6", dur: "6s", repeatCount: "indefinite" }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("linearGradient", { id: "kh-gp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", stopColor: "#22c55e" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("linearGradient", { id: "kh-gp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "0%", stopColor: "#22c55e" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("linearGradient", { id: "kh-oc", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", stopColor: "#F7931A" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", stopColor: "#06b6d4" })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("linearGradient", { id: "kh-oc", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "0%", stopColor: "#F7931A" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "100%", stopColor: "#06b6d4" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("linearGradient", { id: "kh-bp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", stopColor: "#0e9dff" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("linearGradient", { id: "kh-bp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "0%", stopColor: "#0e9dff" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("radialGradient", { id: "kh-center-glow", cx: "50%", cy: "50%", r: "50%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", stopColor: "#0e9dff", stopOpacity: "0.3" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "40%", stopColor: "#8a5cf6", stopOpacity: "0.15" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("radialGradient", { id: "kh-center-glow", cx: "50%", cy: "50%", r: "50%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "0%", stopColor: "#0e9dff", stopOpacity: "0.3" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "40%", stopColor: "#8a5cf6", stopOpacity: "0.15" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("radialGradient", { id: "kh-haze", cx: "50%", cy: "50%", r: "50%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "0%", stopColor: "transparent", stopOpacity: "0" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "60%", stopColor: "#0e9dff", stopOpacity: "0.03" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6", stopOpacity: "0.06" })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("radialGradient", { id: "kh-haze", cx: "50%", cy: "50%", r: "50%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "0%", stopColor: "transparent", stopOpacity: "0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "60%", stopColor: "#0e9dff", stopOpacity: "0.03" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6", stopOpacity: "0.06" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("filter", { id: "kh-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("feGaussianBlur", { stdDeviation: "3", result: "blur" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("feMerge", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("feMergeNode", { in: "blur" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("feMergeNode", { in: "SourceGraphic" })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("filter", { id: "kh-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("feGaussianBlur", { stdDeviation: "3", result: "blur" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("feMerge", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("feMergeNode", { in: "blur" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("feMergeNode", { in: "SourceGraphic" })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("filter", { id: "kh-glow-lg", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("feGaussianBlur", { stdDeviation: "8", result: "blur" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("feMerge", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("feMergeNode", { in: "blur" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("feMergeNode", { in: "SourceGraphic" })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("filter", { id: "kh-glow-lg", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("feGaussianBlur", { stdDeviation: "8", result: "blur" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("feMerge", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("feMergeNode", { in: "blur" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("feMergeNode", { in: "SourceGraphic" })
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: c, cy: c, r: "248", fill: "url(#kh-haze)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { transform: px(20), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
-                anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("circle", { cx: c, cy: c, r: "248", fill: "url(#kh-haze)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { transform: px(20), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { children: [
+                anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                   "animateTransform",
                   {
                     attributeName: "transform",
@@ -13007,14 +13257,14 @@ var KaleidoScopeHeroAnimation = ({
                 ),
                 Array.from({ length: 6 }, (_, i) => {
                   const a = Math.PI / 3 * i;
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { transform: `translate(${c + outerR1 * Math.cos(a)},${c + outerR1 * Math.sin(a)})`, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: hexPath2(40), fill: "url(#kh-grad-a)", opacity: 0.08 + i % 3 * 0.04 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: hexPath2(40), fill: "none", stroke: "url(#kh-grad-a)", strokeWidth: "0.5", opacity: 0.15, children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.1;0.25;0.1", dur: `${4 + i * 0.3}s`, repeatCount: "indefinite" }) })
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { transform: `translate(${c + outerR1 * Math.cos(a)},${c + outerR1 * Math.sin(a)})`, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: hexPath2(40), fill: "url(#kh-grad-a)", opacity: 0.08 + i % 3 * 0.04 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: hexPath2(40), fill: "none", stroke: "url(#kh-grad-a)", strokeWidth: "0.5", opacity: 0.15, children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.1;0.25;0.1", dur: `${4 + i * 0.3}s`, repeatCount: "indefinite" }) })
                   ] }, `ha-${i}`);
                 }),
                 Array.from({ length: 6 }, (_, i) => {
                   const a = Math.PI / 3 * i + Math.PI / 6;
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                     "path",
                     {
                       d: triPath(14),
@@ -13027,7 +13277,7 @@ var KaleidoScopeHeroAnimation = ({
                 }),
                 Array.from({ length: 12 }, (_, i) => {
                   const a = Math.PI / 6 * i;
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                     "circle",
                     {
                       cx: c + outerR1 * 0.92 * Math.cos(a),
@@ -13035,14 +13285,14 @@ var KaleidoScopeHeroAnimation = ({
                       r: "1.5",
                       fill: "url(#kh-grad-a)",
                       opacity: "0.15",
-                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.08;0.25;0.08", dur: `${2 + i % 3 * 0.7}s`, repeatCount: "indefinite" })
+                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.08;0.25;0.08", dur: `${2 + i % 3 * 0.7}s`, repeatCount: "indefinite" })
                     },
                     `od-${i}`
                   );
                 })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
-                anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { children: [
+                anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                   "animateTransform",
                   {
                     attributeName: "transform",
@@ -13055,28 +13305,28 @@ var KaleidoScopeHeroAnimation = ({
                 ),
                 Array.from({ length: 6 }, (_, i) => {
                   const a = Math.PI / 3 * i + Math.PI / 6;
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { transform: `translate(${c + outerR2 * Math.cos(a)},${c + outerR2 * Math.sin(a)})`, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: hexPath2(30), fill: "url(#kh-grad-b)", opacity: 0.06 + i % 2 * 0.04 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: hexPath2(30), fill: "none", stroke: "url(#kh-grad-b)", strokeWidth: "0.5", opacity: 0.12 })
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { transform: `translate(${c + outerR2 * Math.cos(a)},${c + outerR2 * Math.sin(a)})`, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: hexPath2(30), fill: "url(#kh-grad-b)", opacity: 0.06 + i % 2 * 0.04 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: hexPath2(30), fill: "none", stroke: "url(#kh-grad-b)", strokeWidth: "0.5", opacity: 0.12 })
                   ] }, `hb-${i}`);
                 }),
                 Array.from({ length: 6 }, (_, i) => {
                   const a = Math.PI / 3 * i;
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                     "path",
                     {
                       d: diamondPath(8, 16),
                       transform: `translate(${c + outerR2 * 0.85 * Math.cos(a)},${c + outerR2 * 0.85 * Math.sin(a)}) rotate(${i * 60})`,
                       fill: "url(#kh-grad-b)",
                       opacity: "0.08",
-                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.05;0.15;0.05", dur: `${3.5 + i * 0.4}s`, repeatCount: "indefinite" })
+                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.05;0.15;0.05", dur: `${3.5 + i * 0.4}s`, repeatCount: "indefinite" })
                     },
                     `db-${i}`
                   );
                 })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
-                anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { children: [
+                anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                   "animateTransform",
                   {
                     attributeName: "transform",
@@ -13090,23 +13340,23 @@ var KaleidoScopeHeroAnimation = ({
                 Array.from({ length: 12 }, (_, i) => {
                   const a = Math.PI / 6 * i;
                   const r = outerR1 * (0.6 + i % 2 * 0.15);
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                     "path",
                     {
                       d: triPath(10),
                       transform: `translate(${c + r * Math.cos(a)},${c + r * Math.sin(a)}) rotate(${i * 30 + 15})`,
                       fill: "url(#kh-grad-c)",
                       opacity: "0.05",
-                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.03;0.1;0.03", dur: `${5 + i % 4 * 0.8}s`, repeatCount: "indefinite" })
+                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.03;0.1;0.03", dur: `${5 + i % 4 * 0.8}s`, repeatCount: "indefinite" })
                     },
                     `tc-${i}`
                   );
                 })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { transform: px(14), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
-                anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { transform: px(14), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { children: [
+                anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                   "animateTransform",
                   {
                     attributeName: "transform",
@@ -13119,9 +13369,9 @@ var KaleidoScopeHeroAnimation = ({
                 ),
                 Array.from({ length: 12 }, (_, i) => {
                   const a = Math.PI / 6 * i;
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { transform: `translate(${c + midR * Math.cos(a)},${c + midR * Math.sin(a)})`, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: hexPath2(12), fill: "url(#kh-grad-c)", opacity: 0.08 + i % 3 * 0.03 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: hexPath2(12), fill: "none", stroke: "url(#kh-grad-c)", strokeWidth: "0.4", opacity: "0.12", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.08;0.2;0.08", dur: `${3 + i % 4 * 0.5}s`, repeatCount: "indefinite" }) })
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { transform: `translate(${c + midR * Math.cos(a)},${c + midR * Math.sin(a)})`, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: hexPath2(12), fill: "url(#kh-grad-c)", opacity: 0.08 + i % 3 * 0.03 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: hexPath2(12), fill: "none", stroke: "url(#kh-grad-c)", strokeWidth: "0.4", opacity: "0.12", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.08;0.2;0.08", dur: `${3 + i % 4 * 0.5}s`, repeatCount: "indefinite" }) })
                   ] }, `mh-${i}`);
                 })
               ] }),
@@ -13132,7 +13382,7 @@ var KaleidoScopeHeroAnimation = ({
                 const y1 = c + midR * Math.sin(a1);
                 const x2 = c + midR * Math.cos(a2);
                 const y2 = c + midR * Math.sin(a2);
-                return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                   "path",
                   {
                     d: `M${x1},${y1} Q${c},${c} ${x2},${y2}`,
@@ -13141,17 +13391,17 @@ var KaleidoScopeHeroAnimation = ({
                     strokeWidth: "0.5",
                     strokeDasharray: "3 5",
                     opacity: "0.1",
-                    children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-16", dur: `${3 + i * 0.2}s`, repeatCount: "indefinite" })
+                    children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-16", dur: `${3 + i * 0.2}s`, repeatCount: "indefinite" })
                   },
                   `arc-${i}`
                 );
               })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { transform: px(10), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: c, cy: c, r: orbitR, fill: "none", stroke: "rgba(255,255,255,0.05)", strokeWidth: "1", strokeDasharray: "3 5", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${c} ${c}`, to: `360 ${c} ${c}`, dur: "90s", repeatCount: "indefinite" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: c, cy: c, r: orbitR + 4, fill: "none", stroke: "rgba(255,255,255,0.03)", strokeWidth: "0.5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
-                anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { transform: px(10), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("circle", { cx: c, cy: c, r: orbitR, fill: "none", stroke: "rgba(255,255,255,0.05)", strokeWidth: "1", strokeDasharray: "3 5", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${c} ${c}`, to: `360 ${c} ${c}`, dur: "90s", repeatCount: "indefinite" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("circle", { cx: c, cy: c, r: orbitR + 4, fill: "none", stroke: "rgba(255,255,255,0.03)", strokeWidth: "0.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { children: [
+                anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                   "animateTransform",
                   {
                     attributeName: "transform",
@@ -13166,8 +13416,8 @@ var KaleidoScopeHeroAnimation = ({
                   const angle = Math.atan2(pos.y - c, pos.x - c);
                   const dx = Math.cos(angle);
                   const dy = Math.sin(angle);
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                       "line",
                       {
                         x1: c + dx * 52,
@@ -13178,14 +13428,14 @@ var KaleidoScopeHeroAnimation = ({
                         strokeWidth: "0.8",
                         strokeDasharray: "2 4",
                         opacity: "0.2",
-                        children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-12", dur: `${1.5 + i * 0.2}s`, repeatCount: "indefinite" })
+                        children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-12", dur: `${1.5 + i * 0.2}s`, repeatCount: "indefinite" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { r: "2.5", fill: PROTOCOLS2[i].color, opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "cx", values: `${c + dx * 52};${pos.x}`, dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "cy", values: `${c + dy * 52};${pos.y}`, dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0;0.8;0", dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "r", values: "1.5;3;1.5", dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" })
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("circle", { r: "2.5", fill: PROTOCOLS2[i].color, opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "cx", values: `${c + dx * 52};${pos.x}`, dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "cy", values: `${c + dy * 52};${pos.y}`, dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0;0.8;0", dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "r", values: "1.5;3;1.5", dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" })
                     ] }) })
                   ] }, `conn-${i}`);
                 }),
@@ -13193,14 +13443,14 @@ var KaleidoScopeHeroAnimation = ({
                   const pos = iconPositions[i];
                   const labelWidth = Math.max(proto.name.length * 5.5 + 10, 32);
                   const isHovered = hoveredProtocol === proto.name;
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("g", { transform: `translate(${pos.x},${pos.y})`, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("g", { transform: `translate(${pos.x},${pos.y})`, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
                     "g",
                     {
                       onMouseEnter: () => setHoveredProtocol(proto.name),
                       onMouseLeave: () => setHoveredProtocol(null),
                       style: { cursor: "pointer" },
                       children: [
-                        anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                        anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                           "animateTransform",
                           {
                             attributeName: "transform",
@@ -13211,7 +13461,7 @@ var KaleidoScopeHeroAnimation = ({
                             repeatCount: "indefinite"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                           "circle",
                           {
                             cx: "0",
@@ -13221,13 +13471,13 @@ var KaleidoScopeHeroAnimation = ({
                             stroke: proto.color,
                             strokeWidth: "1",
                             opacity: "0",
-                            children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "r", values: `${iconR};${iconR + 12}`, dur: `${3 + i * 0.5}s`, repeatCount: "indefinite", begin: `${i * 0.4}s` }),
-                              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.5;0", dur: `${3 + i * 0.5}s`, repeatCount: "indefinite", begin: `${i * 0.4}s` })
+                            children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "r", values: `${iconR};${iconR + 12}`, dur: `${3 + i * 0.5}s`, repeatCount: "indefinite", begin: `${i * 0.4}s` }),
+                              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.5;0", dur: `${3 + i * 0.5}s`, repeatCount: "indefinite", begin: `${i * 0.4}s` })
                             ] })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                           "circle",
                           {
                             cx: "0",
@@ -13237,10 +13487,10 @@ var KaleidoScopeHeroAnimation = ({
                             stroke: proto.color,
                             strokeWidth: "1",
                             opacity: "0.15",
-                            children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.15;0.4;0.15", dur: `${3 + i * 0.4}s`, repeatCount: "indefinite" })
+                            children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.15;0.4;0.15", dur: `${3 + i * 0.4}s`, repeatCount: "indefinite" })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                           "circle",
                           {
                             cx: "0",
@@ -13250,10 +13500,10 @@ var KaleidoScopeHeroAnimation = ({
                             stroke: proto.color,
                             strokeWidth: "1.5",
                             opacity: "0.25",
-                            children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.2;0.5;0.2", dur: `${2.5 + i * 0.3}s`, repeatCount: "indefinite" })
+                            children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.2;0.5;0.2", dur: `${2.5 + i * 0.3}s`, repeatCount: "indefinite" })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                           "circle",
                           {
                             cx: "0",
@@ -13264,8 +13514,8 @@ var KaleidoScopeHeroAnimation = ({
                             strokeWidth: "1"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: "0", cy: "0", r: iconR - 2, fill: proto.color, opacity: "0.06" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("foreignObject", { x: -iconR, y: -iconR, width: iconR * 2, height: iconR * 2, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("circle", { cx: "0", cy: "0", r: iconR - 2, fill: proto.color, opacity: "0.06" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("foreignObject", { x: -iconR, y: -iconR, width: iconR * 2, height: iconR * 2, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                           NetworkBadge,
                           {
                             network: proto.network,
@@ -13273,8 +13523,8 @@ var KaleidoScopeHeroAnimation = ({
                             className: "w-full h-full"
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { opacity: isHovered ? 1 : 0, style: { transition: "opacity 0.2s ease" }, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { opacity: isHovered ? 1 : 0, style: { transition: "opacity 0.2s ease" }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                             "rect",
                             {
                               x: -labelWidth / 2,
@@ -13288,7 +13538,7 @@ var KaleidoScopeHeroAnimation = ({
                               strokeOpacity: 0.4
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                             "text",
                             {
                               x: "0",
@@ -13308,9 +13558,9 @@ var KaleidoScopeHeroAnimation = ({
                 })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { transform: px(5), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
-                anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { transform: px(5), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { children: [
+                anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                   "animateTransform",
                   {
                     attributeName: "transform",
@@ -13323,28 +13573,28 @@ var KaleidoScopeHeroAnimation = ({
                 ),
                 Array.from({ length: 6 }, (_, i) => {
                   const a = Math.PI / 3 * i;
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                     "path",
                     {
                       d: diamondPath(10, 22),
                       transform: `translate(${c + innerR * Math.cos(a)},${c + innerR * Math.sin(a)}) rotate(${i * 60})`,
                       fill: "url(#kh-gp)",
                       opacity: "0.15",
-                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.1;0.28;0.1", dur: `${2.8 + i * 0.35}s`, repeatCount: "indefinite" })
+                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.1;0.28;0.1", dur: `${2.8 + i * 0.35}s`, repeatCount: "indefinite" })
                     },
                     `d-${i}`
                   );
                 }),
                 Array.from({ length: 6 }, (_, i) => {
                   const a = Math.PI / 3 * i + Math.PI / 6;
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                     "path",
                     {
                       d: triPath(8),
                       transform: `translate(${c + innerR * 0.75 * Math.cos(a)},${c + innerR * 0.75 * Math.sin(a)}) rotate(${i * 60 + 30})`,
                       fill: "url(#kh-oc)",
                       opacity: "0.1",
-                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.06;0.18;0.06", dur: `${3.2 + i * 0.3}s`, repeatCount: "indefinite" })
+                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.06;0.18;0.06", dur: `${3.2 + i * 0.3}s`, repeatCount: "indefinite" })
                     },
                     `it-${i}`
                   );
@@ -13352,7 +13602,7 @@ var KaleidoScopeHeroAnimation = ({
                 Array.from({ length: 12 }, (_, i) => {
                   const a = Math.PI / 6 * i;
                   const r = innerR * (i % 2 === 0 ? 0.55 : 0.65);
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                     "circle",
                     {
                       cx: c + r * Math.cos(a),
@@ -13360,14 +13610,14 @@ var KaleidoScopeHeroAnimation = ({
                       r: i % 2 === 0 ? 2 : 1.5,
                       fill: "url(#kh-oc)",
                       opacity: "0.2",
-                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.1;0.35;0.1", dur: `${2 + i % 4 * 0.5}s`, repeatCount: "indefinite" })
+                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.1;0.35;0.1", dur: `${2 + i % 4 * 0.5}s`, repeatCount: "indefinite" })
                     },
                     `id-${i}`
                   );
                 })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
-                anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { children: [
+                anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                   "animateTransform",
                   {
                     attributeName: "transform",
@@ -13380,27 +13630,27 @@ var KaleidoScopeHeroAnimation = ({
                 ),
                 Array.from({ length: 6 }, (_, i) => {
                   const a = Math.PI / 3 * i + Math.PI / 6;
-                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                     "path",
                     {
                       d: hexPath2(6),
                       transform: `translate(${c + innerR * 0.42 * Math.cos(a)},${c + innerR * 0.42 * Math.sin(a)})`,
                       fill: "url(#kh-bp)",
                       opacity: "0.1",
-                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.06;0.18;0.06", dur: `${2.5 + i * 0.3}s`, repeatCount: "indefinite" })
+                      children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.06;0.18;0.06", dur: `${2.5 + i * 0.3}s`, repeatCount: "indefinite" })
                     },
                     `ih-${i}`
                   );
                 })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("g", { transform: px(18), children: Array.from({ length: 16 }, (_, i) => {
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("g", { transform: px(18), children: Array.from({ length: 16 }, (_, i) => {
               const a = Math.PI * 2 * i / 16;
               const baseR = 60 + i % 4 * 45;
               const x = c + baseR * Math.cos(a);
               const y = c + baseR * Math.sin(a);
               const colors2 = ["#0e9dff", "#8a5cf6", "#22c55e", "#F7931A", "#06b6d4", "#15E99A"];
-              return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                 "circle",
                 {
                   cx: x,
@@ -13408,26 +13658,26 @@ var KaleidoScopeHeroAnimation = ({
                   r: 1 + i % 3 * 0.5,
                   fill: colors2[i % colors2.length],
                   opacity: "0",
-                  children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0;0.6;0", dur: `${3 + i % 5 * 0.8}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` }),
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "cx", values: `${x};${x + Math.cos(a) * 15}`, dur: `${4 + i % 3 * 1.5}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` }),
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "cy", values: `${y};${y + Math.sin(a) * 15}`, dur: `${4 + i % 3 * 1.5}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` })
+                  children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0;0.6;0", dur: `${3 + i % 5 * 0.8}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` }),
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "cx", values: `${x};${x + Math.cos(a) * 15}`, dur: `${4 + i % 3 * 1.5}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` }),
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "cy", values: `${y};${y + Math.sin(a) * 15}`, dur: `${4 + i % 3 * 1.5}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` })
                   ] })
                 },
                 `p-${i}`
               );
             }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: c, cy: c, r: "75", fill: "url(#kh-center-glow)", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "r", values: "70;80;70", dur: "4s", repeatCount: "indefinite" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: c, cy: c, r: "52", fill: "none", stroke: "url(#kh-bp)", strokeWidth: "1", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "r", values: "48;65", dur: "3s", repeatCount: "indefinite" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.4;0", dur: "3s", repeatCount: "indefinite" })
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("circle", { cx: c, cy: c, r: "75", fill: "url(#kh-center-glow)", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "r", values: "70;80;70", dur: "4s", repeatCount: "indefinite" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("circle", { cx: c, cy: c, r: "52", fill: "none", stroke: "url(#kh-bp)", strokeWidth: "1", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "r", values: "48;65", dur: "3s", repeatCount: "indefinite" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.4;0", dur: "3s", repeatCount: "indefinite" })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("circle", { cx: c, cy: c, r: "48", fill: "none", stroke: "url(#kh-gp)", strokeWidth: "0.8", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "r", values: "48;60", dur: "3s", repeatCount: "indefinite", begin: "1.5s" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.3;0", dur: "3s", repeatCount: "indefinite", begin: "1.5s" })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("circle", { cx: c, cy: c, r: "48", fill: "none", stroke: "url(#kh-gp)", strokeWidth: "0.8", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "r", values: "48;60", dur: "3s", repeatCount: "indefinite", begin: "1.5s" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.3;0", dur: "3s", repeatCount: "indefinite", begin: "1.5s" })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                 "path",
                 {
                   d: hexPath2(50),
@@ -13437,13 +13687,13 @@ var KaleidoScopeHeroAnimation = ({
                   strokeWidth: "1.5",
                   opacity: "0.4",
                   filter: "url(#kh-glow)",
-                  children: anim && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "opacity", values: "0.3;0.65;0.3", dur: "3s", repeatCount: "indefinite" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("animate", { attributeName: "stroke-width", values: "1.5;2.5;1.5", dur: "3s", repeatCount: "indefinite" })
+                  children: anim && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "opacity", values: "0.3;0.65;0.3", dur: "3s", repeatCount: "indefinite" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("animate", { attributeName: "stroke-width", values: "1.5;2.5;1.5", dur: "3s", repeatCount: "indefinite" })
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                 "path",
                 {
                   d: hexPath2(46),
@@ -13453,21 +13703,21 @@ var KaleidoScopeHeroAnimation = ({
                   strokeWidth: "0.5"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("g", { transform: `translate(${c - 34},${c - 34}) scale(0.325)`, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M69.7141 207.3H0.908203L35.3243 172.936L69.7141 207.3Z", fill: "#6F32FF" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M138.441 0.96106V69.767L104.078 35.3508L138.441 0.96106Z", fill: "#17B581" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M138.415 138.547V207.352L104.051 172.936L138.415 138.547Z", fill: "#17B581" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M138.441 69.7406V0.96106L172.804 35.3772L138.441 69.767V69.7406Z", fill: "#17B581" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M69.6614 138.494V69.6879L104.025 104.104L69.6614 138.494Z", fill: "#15E99A" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M69.6615 69.7142V138.52L35.2981 104.104L69.6615 69.7142Z", fill: "#15E99A" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M138.467 207.379V138.573L172.831 172.989L138.467 207.379Z", fill: "#17B581" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M0.908203 0.908325H69.7141L35.298 35.2718L0.908203 0.908325Z", fill: "#6F32FF" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M207.22 207.3H138.415L172.831 172.936L207.22 207.3Z", fill: "#17B581" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M138.415 0.987427H207.22L172.804 35.3509L138.415 0.987427Z", fill: "#17B581" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M138.467 69.7143H69.6614L104.078 35.3508L138.467 69.7143Z", fill: "#17B581" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M69.635 138.494H138.441L104.025 172.857L69.635 138.494Z", fill: "#17B581" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M138.415 138.494H69.635L104.025 104.157L138.388 138.494H138.415Z", fill: "#15E99A" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M138.415 69.7142L104.051 104.051L69.6614 69.7142H138.441H138.415Z", fill: "#15E99A" })
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("g", { transform: `translate(${c - 34},${c - 34}) scale(0.325)`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M69.7141 207.3H0.908203L35.3243 172.936L69.7141 207.3Z", fill: "#6F32FF" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M138.441 0.96106V69.767L104.078 35.3508L138.441 0.96106Z", fill: "#17B581" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M138.415 138.547V207.352L104.051 172.936L138.415 138.547Z", fill: "#17B581" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M138.441 69.7406V0.96106L172.804 35.3772L138.441 69.767V69.7406Z", fill: "#17B581" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M69.6614 138.494V69.6879L104.025 104.104L69.6614 138.494Z", fill: "#15E99A" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M69.6615 69.7142V138.52L35.2981 104.104L69.6615 69.7142Z", fill: "#15E99A" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M138.467 207.379V138.573L172.831 172.989L138.467 207.379Z", fill: "#17B581" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M0.908203 0.908325H69.7141L35.298 35.2718L0.908203 0.908325Z", fill: "#6F32FF" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M207.22 207.3H138.415L172.831 172.936L207.22 207.3Z", fill: "#17B581" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M138.415 0.987427H207.22L172.804 35.3509L138.415 0.987427Z", fill: "#17B581" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M138.467 69.7143H69.6614L104.078 35.3508L138.467 69.7143Z", fill: "#17B581" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M69.635 138.494H138.441L104.025 172.857L69.635 138.494Z", fill: "#17B581" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M138.415 138.494H69.635L104.025 104.157L138.388 138.494H138.415Z", fill: "#15E99A" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("path", { d: "M138.415 69.7142L104.051 104.051L69.6614 69.7142H138.441H138.415Z", fill: "#15E99A" })
               ] })
             ] })
           ]
@@ -13478,7 +13728,7 @@ var KaleidoScopeHeroAnimation = ({
 };
 
 // src/web/components/deposit-success-screen.tsx
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 function DepositSuccessScreen({
   handleDone,
   displayTicker,
@@ -13491,20 +13741,20 @@ function DepositSuccessScreen({
   const isInstant = network === "lightning" || network === "spark";
   const title = isInstant ? "Payment Received!" : "Deposit Detected!";
   const subtitle = isInstant ? `Your ${displayTicker} has arrived via ${networkLabel}.` : `Incoming deposit detected via ${networkLabel}. Funds will be available after confirmation.`;
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex h-screen flex-col overflow-hidden bg-background bg-page-radial font-display text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center p-6 text-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "relative mb-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "absolute inset-0 scale-150 animate-pulse rounded-full bg-secondary/25 blur-2xl" }),
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "relative flex size-20 items-center justify-center rounded-full bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero shadow-glow-brand", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(IconGlyph, { glyph: CheckCircle, className: "size-12 text-brand animate-in zoom-in-50 duration-500" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "flex h-screen flex-col overflow-hidden bg-background bg-page-radial font-display text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center p-6 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "relative mb-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "absolute inset-0 scale-150 animate-pulse rounded-full bg-secondary/25 blur-2xl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "relative flex size-20 items-center justify-center rounded-full bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero shadow-glow-brand", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IconGlyph, { glyph: CheckCircle, className: "size-12 text-brand animate-in zoom-in-50 duration-500" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h1", { className: "mb-2 text-headline font-bold text-gradient-brand", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "mb-8 max-w-[260px] text-caption leading-relaxed text-muted-foreground", children: subtitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "mb-10 flex items-center gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero px-4 py-3 shadow-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(AssetIcon, { ticker: displayTicker, size: 36 }),
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "text-left", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-body font-bold text-foreground", children: displayTicker }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-caption text-foreground/55", children: selectedAsset?.name ?? displayTicker })
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("h1", { className: "mb-2 text-headline font-bold text-gradient-brand", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("p", { className: "mb-8 max-w-[260px] text-caption leading-relaxed text-muted-foreground", children: subtitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "mb-10 flex items-center gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero px-4 py-3 shadow-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(AssetIcon, { ticker: displayTicker, size: 36 }),
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "text-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("p", { className: "text-body font-bold text-foreground", children: displayTicker }),
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("p", { className: "text-caption text-foreground/55", children: selectedAsset?.name ?? displayTicker })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
         "div",
         {
           className: cn(
@@ -13514,27 +13764,27 @@ function DepositSuccessScreen({
           ),
           children: [
             net.icon,
-            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { children: networkLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { children: networkLabel })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(Button, { variant: "cta", size: "cta", onClick: handleDone, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(IconGlyph, { glyph: AccountBalanceWallet, className: "text-icon-lg" }),
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(Button, { variant: "cta", size: "cta", onClick: handleDone, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IconGlyph, { glyph: AccountBalanceWallet, className: "text-icon-lg" }),
       "Back to Wallet"
     ] })
   ] }) });
 }
 
 // src/web/components/deposit-network-default-modal.tsx
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var NETWORK_OPTIONS = {
   RGB: {
     network: "onchain",
     account: "RGB",
     label: "On-chain / Lightning",
     description: "Classic Bitcoin address or Lightning invoice via the RLN node.",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(OnchainNetworkIcon, { className: "size-5" }),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(OnchainNetworkIcon, { className: "size-5" }),
     accentBg: "bg-network-bitcoin/10",
     accentBorder: "border-network-bitcoin/30",
     accentText: "text-network-bitcoin-fg"
@@ -13544,7 +13794,7 @@ var NETWORK_OPTIONS = {
     account: "SPARK",
     label: "Spark",
     description: "Receive directly into your Spark account. Fast and free.",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", alt: "", className: "kui-mono-icon h-[18px]" }),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", alt: "", className: "kui-mono-icon h-[18px]" }),
     accentBg: "bg-info/10",
     accentBorder: "border-info/30",
     accentText: "text-info-fg"
@@ -13554,7 +13804,7 @@ var NETWORK_OPTIONS = {
     account: "ARKADE",
     label: "Arkade",
     description: "Receive directly into your Arkade account. Low fees, near-instant settlement.",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("img", { src: "/icons/arkade/arkade-icon.svg", alt: "", className: "h-[18px]" }),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("img", { src: "/icons/arkade/arkade-icon.svg", alt: "", className: "h-[18px]" }),
     accentBg: "bg-network-arkade/10",
     accentBorder: "border-network-arkade/30",
     accentText: "text-network-arkade-fg"
@@ -13566,7 +13816,7 @@ var NETWORK_OPTIONS = {
     account: "LIQUID",
     label: "Liquid",
     description: "Receive L-BTC or a Liquid asset (USDt) via a confidential Liquid address.",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(LiquidNetworkIcon, { className: "h-[18px] w-[18px]" }),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(LiquidNetworkIcon, { className: "h-[18px] w-[18px]" }),
     accentBg: "bg-network-liquid/10",
     accentBorder: "border-network-liquid/30",
     accentText: "text-network-liquid-fg"
@@ -13581,20 +13831,20 @@ function DepositNetworkDefaultModal({
 }) {
   if (!open) return null;
   const options = availableAccounts.map((id) => NETWORK_OPTIONS[id]).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "fixed inset-0 z-50 flex items-end justify-center bg-background/80 backdrop-blur-lg", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "w-full space-y-4 rounded-t-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero px-4 pb-7 pt-5 shadow-popover animate-in slide-in-from-bottom-4 duration-200", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "-mt-1 mb-1 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "h-1 w-10 rounded-full bg-secondary/40" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("p", { className: "text-body font-bold text-foreground", children: "Choose your default network" }),
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("p", { className: "mt-0.5 text-tiny text-foreground/55", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "fixed inset-0 z-50 flex items-end justify-center bg-background/80 backdrop-blur-lg", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "w-full space-y-4 rounded-t-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero px-4 pb-7 pt-5 shadow-popover animate-in slide-in-from-bottom-4 duration-200", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "-mt-1 mb-1 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "h-1 w-10 rounded-full bg-secondary/40" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: "text-body font-bold text-foreground", children: "Choose your default network" }),
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("p", { className: "mt-0.5 text-tiny text-foreground/55", children: [
         "Pick how you would like to receive",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "font-semibold text-muted-foreground", children: assetTicker }),
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "font-semibold text-muted-foreground", children: assetTicker }),
         " by default. You can always switch in the deposit screen."
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "space-y-2", children: options.map((option) => {
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "space-y-2", children: options.map((option) => {
       const isSuggested = option.account === suggestedAccount;
-      return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
         "button",
         {
           type: "button",
@@ -13604,7 +13854,7 @@ function DepositNetworkDefaultModal({
             isSuggested ? cn(option.accentBg, "shadow-glow-violet-soft ring-1 ring-inset ring-secondary/50") : "bg-muted/40 shadow-raised hover-gradient-violet"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               "div",
               {
                 className: cn(
@@ -13615,10 +13865,10 @@ function DepositNetworkDefaultModal({
                 children: option.icon
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: cn("text-caption font-bold", isSuggested ? option.accentText : "text-foreground"), children: option.label }),
-                isSuggested && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: cn("text-caption font-bold", isSuggested ? option.accentText : "text-foreground"), children: option.label }),
+                isSuggested && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
                   "span",
                   {
                     className: cn(
@@ -13631,9 +13881,9 @@ function DepositNetworkDefaultModal({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("p", { className: "mt-0.5 text-xxs leading-snug text-foreground/55", children: option.description })
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: "mt-0.5 text-xxs leading-snug text-foreground/55", children: option.description })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               IconGlyph,
               {
                 glyph: ChevronRight,
@@ -13653,7 +13903,7 @@ function DepositNetworkDefaultModal({
 
 // src/web/components/btc-unified-receive.tsx
 var import_react42 = require("react");
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 function formatSatsForRow(value) {
   if (!value || value <= 0 || !Number.isFinite(value)) return null;
   return `${value.toLocaleString("en-US")} sats`;
@@ -13687,14 +13937,14 @@ function BtcUnifiedReceive({
     setInvoiceStatus(null);
     setAccountReceiveResult(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "relative flex flex-col items-center p-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(QrCode, { value: accountReceiveResult.qrValue, size: 200, tone: "onDark" }),
-        isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(PaidOverlay, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "relative flex flex-col items-center p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(QrCode, { value: accountReceiveResult.qrValue, size: 200, tone: "onDark" }),
+        isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(PaidOverlay, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex items-center justify-center gap-2.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center justify-center gap-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
           GlyphButton,
           {
             label: `Copy ${accountReceiveResult.qrLabel}`,
@@ -13704,8 +13954,8 @@ function BtcUnifiedReceive({
             onClick: () => void copyToClipboard(accountReceiveResult.qrValue)
           }
         ),
-        showRegenerate && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(GlyphButton, { label: "New address", variant: "surface", size: "lg", icon: Refresh, onClick: handleNewAddress }),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+        showRegenerate && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(GlyphButton, { label: "New address", variant: "surface", size: "lg", icon: Refresh, onClick: handleNewAddress }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
           GlyphButton,
           {
             label: "Edit amount and description",
@@ -13717,7 +13967,7 @@ function BtcUnifiedReceive({
         )
       ] })
     ] }),
-    invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+    invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
       InvoiceStatusBanner,
       {
         isInvoicePending,
@@ -13726,11 +13976,11 @@ function BtcUnifiedReceive({
         invoiceStatus
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: cn("text-muted-foreground", eyebrow), children: "Available Addresses" }),
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: cn("text-muted-foreground", eyebrow), children: "Available Addresses" }),
       accountReceiveResult.addresses.map((address) => {
         const network = NETWORK_CONFIG[address.network];
-        return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
           "div",
           {
             className: cn(
@@ -13740,35 +13990,35 @@ function BtcUnifiedReceive({
             style: { borderLeftWidth: 3, borderLeftColor: network.color },
             onClick: () => void copyToClipboard(address.value),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: cn("flex size-5 flex-shrink-0 items-center justify-center rounded-md", network.bg), children: network.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: cn(eyebrow, network.text), children: address.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: cn("flex size-5 flex-shrink-0 items-center justify-center rounded-md", network.bg), children: network.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: cn(eyebrow, network.text), children: address.label }),
                   (() => {
                     const amountLabel = formatSatsForRow(address.amountSats);
-                    return amountLabel ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "rounded-full bg-secondary/15 px-1.5 py-0.5 text-tiny font-bold tabular-nums text-secondary-content", children: amountLabel }) : null;
+                    return amountLabel ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "rounded-full bg-secondary/15 px-1.5 py-0.5 text-tiny font-bold tabular-nums text-secondary-content", children: amountLabel }) : null;
                   })()
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.value.length > 50 ? `${address.value.slice(0, 18)}...${address.value.slice(-14)}` : address.value })
+                /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.value.length > 50 ? `${address.value.slice(0, 18)}...${address.value.slice(-14)}` : address.value })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(CopyIcon, { copied: copied === address.value })
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CopyIcon, { copied: copied === address.value })
             ]
           },
           address.network
         );
       })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
       BottomSheet,
       {
         open: showEdit,
         title: "Edit request",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconGlyph, { glyph: Edit, size: "md" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconGlyph, { glyph: Edit, size: "md" }),
         onClose: () => setShowEdit(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Label3, { htmlFor: amountId, children: "Amount (optional)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Label3, { htmlFor: amountId, children: "Amount (optional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
               "input",
               {
                 id: amountId,
@@ -13780,14 +14030,14 @@ function BtcUnifiedReceive({
                 inputMode: "decimal"
               }
             ),
-            amount && loading && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("p", { className: "flex items-center gap-1 text-xxs text-warning-fg/70", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
+            amount && loading && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("p", { className: "flex items-center gap-1 text-xxs text-warning-fg/70", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
               "Updating invoice..."
             ] })
           ] }),
-          onDescriptionChange && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Label3, { htmlFor: descriptionId, children: "Description (optional)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+          onDescriptionChange && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Label3, { htmlFor: descriptionId, children: "Description (optional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
               "input",
               {
                 id: descriptionId,
@@ -13799,7 +14049,7 @@ function BtcUnifiedReceive({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { variant: "cta", className: "w-full", onClick: () => setShowEdit(false), children: "Done" })
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { variant: "cta", className: "w-full", onClick: () => setShowEdit(false), children: "Done" })
         ] })
       }
     )
@@ -13808,7 +14058,7 @@ function BtcUnifiedReceive({
 
 // src/web/components/deposit-generated-view.tsx
 var import_react43 = require("react");
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 function parseAssetAmount(amountString, asset) {
   const value = Number(amountString);
   if (!Number.isFinite(value)) return 0;
@@ -13851,10 +14101,10 @@ function DepositGeneratedView({
 }) {
   const btcAmountId = (0, import_react43.useId)();
   const assetAmountId = (0, import_react43.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
-    (network === "lightning" || network === "arkade" && arkSubMode === "ark") && isBtc && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-2.5 shadow-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Label3, { htmlFor: btcAmountId, children: "Specify amount (optional)" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
+    (network === "lightning" || network === "arkade" && arkSubMode === "ark") && isBtc && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-2.5 shadow-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Label3, { htmlFor: btcAmountId, children: "Specify amount (optional)" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         "input",
         {
           id: btcAmountId,
@@ -13866,16 +14116,16 @@ function DepositGeneratedView({
           inputMode: "decimal"
         }
       ),
-      amount && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-xxs text-warning-fg/70", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("span", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
+      amount && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-xxs text-warning-fg/70", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
         "Updating ",
         network === "arkade" ? "URI" : "invoice",
         "..."
       ] }) : network === "arkade" ? `Unified URI for ${amount} ${getUnitLabel()}` : `Invoice for ${amount} ${getUnitLabel()}` })
     ] }),
-    network === "lightning" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-2.5 shadow-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Label3, { htmlFor: assetAmountId, children: "Specify amount (optional)" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    network === "lightning" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-2.5 shadow-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Label3, { htmlFor: assetAmountId, children: "Specify amount (optional)" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         "input",
         {
           id: assetAmountId,
@@ -13887,25 +14137,25 @@ function DepositGeneratedView({
           inputMode: "decimal"
         }
       ),
-      amount && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-xxs text-warning-fg/70", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("span", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
+      amount && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-xxs text-warning-fg/70", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
         "Updating invoice..."
       ] }) : `Invoice for ${amount} ${getUnitLabel()}` }),
-      amount && maxDepositAmount > 0 && parseAssetAmount(amount, selectedAsset) > maxDepositAmount && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("p", { className: "rounded-lg bg-danger/10 px-2.5 py-1.5 text-xxs text-danger-fg", children: [
+      amount && maxDepositAmount > 0 && parseAssetAmount(amount, selectedAsset) > maxDepositAmount && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("p", { className: "rounded-lg bg-danger/10 px-2.5 py-1.5 text-xxs text-danger-fg", children: [
         "Exceeds max: ",
         formatAssetAmount(maxDepositAmount, selectedAsset),
         " ",
         getUnitLabel()
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
         "div",
         {
           className: "relative flex flex-col items-center rounded-2xl bg-white p-3.5 transition-all",
           style: net.qrGlow,
           children: [
-            showQrNetworkBadge && network !== "spark" && network !== "arkade" && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+            showQrNetworkBadge && network !== "spark" && network !== "arkade" && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
               "div",
               {
                 className: cn(
@@ -13914,21 +14164,21 @@ function DepositGeneratedView({
                 ),
                 children: [
                   net.icon,
-                  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { children: net.label })
+                  /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { children: net.label })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(QrCode, { value: address, size: 188 }),
-            isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(PaidOverlay, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(QrCode, { value: address, size: 188 }),
+            isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(PaidOverlay, {}),
             loading && !isInvoicePaid && // Loading scrim — sits over the QR while a fresh address/invoice
             // is being fetched (e.g. after the New Address button).
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "absolute inset-0 flex items-center justify-center rounded-2xl bg-foreground/80 backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-3xl text-network-bitcoin-fg" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "absolute inset-0 flex items-center justify-center rounded-2xl bg-foreground/80 backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-3xl text-network-bitcoin-fg" }) })
           ]
         }
       ),
       (() => {
         const isAddressCopied = copied === address;
-        return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
           "button",
           {
             type: "button",
@@ -13942,14 +14192,14 @@ function DepositGeneratedView({
               void copyToClipboard(address);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconGlyph, { glyph: isAddressCopied ? Check : ContentCopy, size: "xs" }),
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: isAddressCopied ? Check : ContentCopy, size: "xs" }),
               isAddressCopied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
             ]
           }
         );
       })()
     ] }),
-    network === "lightning" && invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    network === "lightning" && invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       InvoiceStatusBanner,
       {
         isInvoicePending,
@@ -13958,7 +14208,7 @@ function DepositGeneratedView({
         invoiceStatus
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
       "div",
       {
         "data-testid": "deposit-generated-address",
@@ -13969,16 +14219,16 @@ function DepositGeneratedView({
         ),
         onClick: () => void copyToClipboard(address),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: cn("flex size-5 flex-shrink-0 items-center justify-center rounded-md", net.bg), children: net.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: cn(eyebrow, net.text), children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { "data-testid": "deposit-address-label", children: addressLabel }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.length > 50 ? `${address.slice(0, 18)}...${address.slice(-14)}` : address })
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: cn("flex size-5 flex-shrink-0 items-center justify-center rounded-md", net.bg), children: net.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: cn(eyebrow, net.text), children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { "data-testid": "deposit-address-label", children: addressLabel }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.length > 50 ? `${address.slice(0, 18)}...${address.slice(-14)}` : address })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CopyIcon, { copied: copied === address })
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CopyIcon, { copied: copied === address })
         ]
       }
     ),
-    recipientId && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+    recipientId && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
       "div",
       {
         className: cn(
@@ -13987,16 +14237,16 @@ function DepositGeneratedView({
         ),
         onClick: () => void copyToClipboard(recipientId),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex size-5 flex-shrink-0 items-center justify-center rounded-md bg-primary/15", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconGlyph, { glyph: Person, size: "xs", className: "text-brand" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: cn("text-brand", eyebrow), children: "Recipient ID" }),
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: recipientId.length > 50 ? `${recipientId.slice(0, 18)}...${recipientId.slice(-14)}` : recipientId })
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "flex size-5 flex-shrink-0 items-center justify-center rounded-md bg-primary/15", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: Person, size: "xs", className: "text-brand" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: cn("text-brand", eyebrow), children: "Recipient ID" }),
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: recipientId.length > 50 ? `${recipientId.slice(0, 18)}...${recipientId.slice(-14)}` : recipientId })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CopyIcon, { copied: copied === recipientId })
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CopyIcon, { copied: copied === recipientId })
         ]
       }
     ),
-    showRegenerate && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    showRegenerate && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       GlyphButton,
       {
         label: `New ${network === "lightning" ? "invoice" : "address"}`,
@@ -14012,7 +14262,7 @@ function DepositGeneratedView({
           setAmount("");
           setInvoiceStatus(null);
         },
-        icon: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconGlyph, { glyph: Refresh, "aria-hidden": "true", className: cn(loading && "animate-spin motion-reduce:animate-none") })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: Refresh, "aria-hidden": "true", className: cn(loading && "animate-spin motion-reduce:animate-none") })
       }
     ) })
   ] });
@@ -14020,7 +14270,7 @@ function DepositGeneratedView({
 
 // src/web/components/deposit-pre-generation.tsx
 var import_react44 = require("react");
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 var ACCOUNT_TITLES = {
   RGB: "RGB & Lightning",
   SPARK: "Spark",
@@ -14068,58 +14318,58 @@ function DepositPreGeneration({
   const amountId = (0, import_react44.useId)();
   const method = METHOD_META2[currentMethod];
   const isRgbOnchain = network === "onchain" && !isBtc;
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "space-y-3", children: [
-    showReceiveSummary && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: cn("text-muted-foreground", eyebrow), children: "Receive Summary" }),
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "mt-2 grid grid-cols-1 gap-2 text-caption", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "text-foreground/55", children: "Asset" }),
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "font-bold text-foreground", children: selectedAsset?.ticker ?? (isBtc ? "BTC" : "Asset") })
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "space-y-3", children: [
+    showReceiveSummary && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: cn("text-muted-foreground", eyebrow), children: "Receive Summary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "mt-2 grid grid-cols-1 gap-2 text-caption", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-foreground/55", children: "Asset" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "font-bold text-foreground", children: selectedAsset?.ticker ?? (isBtc ? "BTC" : "Asset") })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "text-foreground/55", children: "Destination account" }),
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "font-bold text-foreground", children: ACCOUNT_TITLES[selectedAccount] })
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-foreground/55", children: "Destination account" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "font-bold text-foreground", children: ACCOUNT_TITLES[selectedAccount] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "text-foreground/55", children: "Transfer method" }),
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "font-bold text-foreground", children: method.label })
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-foreground/55", children: "Transfer method" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "font-bold text-foreground", children: method.label })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-tiny text-foreground/55", children: method.summary })
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "text-tiny text-foreground/55", children: method.summary })
       ] })
     ] }),
-    channelsLoading && selectedAccount === "RGB" && currentMethod === "lightning" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex items-center gap-2.5 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-lg text-secondary-content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "text-caption font-medium text-foreground/60", children: "Checking channel availability..." })
+    channelsLoading && selectedAccount === "RGB" && currentMethod === "lightning" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex items-center gap-2.5 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-lg text-secondary-content" }),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-caption font-medium text-foreground/60", children: "Checking channel availability..." })
     ] }),
-    showChannelWarning && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(AlertBanner, { variant: "warning", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "mb-0.5 text-caption font-bold text-warning-fg", children: "No Lightning Channels" }),
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-tiny text-warning-fg/70", children: "Only on-chain deposits are available." })
+    showChannelWarning && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(AlertBanner, { variant: "warning", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "mb-0.5 text-caption font-bold text-warning-fg", children: "No Lightning Channels" }),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "text-tiny text-warning-fg/70", children: "Only on-chain deposits are available." })
     ] }),
-    showLiquidityWarning && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(AlertBanner, { variant: "warning", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "mb-0.5 text-caption font-bold text-warning-fg", children: "No Inbound Liquidity" }),
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("p", { className: "text-tiny text-warning-fg/70", children: [
+    showLiquidityWarning && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(AlertBanner, { variant: "warning", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "mb-0.5 text-caption font-bold text-warning-fg", children: "No Inbound Liquidity" }),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("p", { className: "text-tiny text-warning-fg/70", children: [
         "No channels with inbound capacity for ",
         selectedAsset?.ticker ?? "this asset",
         "."
       ] })
     ] }),
-    isAutoGenerate && loading && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex flex-col items-center gap-4 py-10", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: cn("flex size-16 items-center justify-center rounded-2xl shadow-raised", net.bg), children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: ProgressActivity, className: cn("animate-spin text-icon-4xl", net.text) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "space-y-1 text-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("p", { className: "text-caption font-bold text-muted-foreground", children: [
+    isAutoGenerate && loading && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex flex-col items-center gap-4 py-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: cn("flex size-16 items-center justify-center rounded-2xl shadow-raised", net.bg), children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: ProgressActivity, className: cn("animate-spin text-icon-4xl", net.text) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "space-y-1 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("p", { className: "text-caption font-bold text-muted-foreground", children: [
           "Generating ",
           network === "lightning" ? "invoice" : "address",
           "..."
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("p", { className: "text-caption text-foreground/55", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("p", { className: "text-caption text-foreground/55", children: [
           net.label,
           " network"
         ] })
       ] })
     ] }),
-    isRgbOnchain && isNewRgbAsset && setNewAssetId && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Label3, { htmlFor: assetIdInputId, children: "RGB Asset ID - Optional" }),
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    isRgbOnchain && isNewRgbAsset && setNewAssetId && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Label3, { htmlFor: assetIdInputId, children: "RGB Asset ID - Optional" }),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
         "input",
         {
           id: assetIdInputId,
@@ -14132,15 +14382,15 @@ function DepositPreGeneration({
           className: "w-full rounded-xl bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 px-3 py-2.5 font-mono text-caption text-foreground shadow-inner transition-all placeholder:text-muted-foreground focus:ring-primary/50 focus:shadow-glow-primary-soft focus:outline-none"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-xxs text-foreground/55", children: "Enter a specific asset ID to receive it, or leave empty to accept any RGB asset to this invoice." })
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "text-xxs text-foreground/55", children: "Enter a specific asset ID to receive it, or leave empty to accept any RGB asset to this invoice." })
     ] }),
-    isRgbOnchain && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "space-y-2.5 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("h4", { className: "text-caption font-bold text-foreground", children: usePrivacy ? "Blinded receive" : "Witness receive" }),
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "mt-0.5 text-xxs text-muted-foreground", children: usePrivacy ? "Private - recommended" : "Simpler - less private" })
+    isRgbOnchain && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "space-y-2.5 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("h4", { className: "text-caption font-bold text-foreground", children: usePrivacy ? "Blinded receive" : "Witness receive" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "mt-0.5 text-xxs text-muted-foreground", children: usePrivacy ? "Private - recommended" : "Simpler - less private" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
           "button",
           {
             type: "button",
@@ -14150,7 +14400,7 @@ function DepositPreGeneration({
               usePrivacy ? "bg-primary bg-gradient-primary shadow-glow-primary-soft" : "bg-foreground/10"
             ),
             onClick: () => setUsePrivacy(!usePrivacy),
-            children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
               "span",
               {
                 className: cn(
@@ -14162,8 +14412,8 @@ function DepositPreGeneration({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-tiny leading-relaxed text-foreground/55", children: usePrivacy ? "Blinded: the sender never sees which UTXO you receive into. Spends one of your colorable UTXOs as the receiving slot." : "Witness: the sender creates the receiving UTXO for you. No colorable UTXO needed, but the sender sees the receiving output." }),
-      usePrivacy && colorableUtxoCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "text-tiny leading-relaxed text-foreground/55", children: usePrivacy ? "Blinded: the sender never sees which UTXO you receive into. Spends one of your colorable UTXOs as the receiving slot." : "Witness: the sender creates the receiving UTXO for you. No colorable UTXO needed, but the sender sees the receiving output." }),
+      usePrivacy && colorableUtxoCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
         "div",
         {
           className: cn(
@@ -14171,26 +14421,26 @@ function DepositPreGeneration({
             colorableUtxoCount > 0 ? "bg-success/10 text-success-fg/80" : "bg-warning/10 text-warning-fg/80"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "font-medium", children: "Available colorable UTXOs" }),
-            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "font-bold tabular-nums", children: colorableUtxoCount })
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "font-medium", children: "Available colorable UTXOs" }),
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "font-bold tabular-nums", children: colorableUtxoCount })
           ]
         }
       ),
-      usePrivacy && colorableUtxoCount === 0 && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-tiny text-warning-fg/70", children: "None available \u2014 create a colorable UTXO below to receive privately, or switch off privacy to use a witness receive." })
+      usePrivacy && colorableUtxoCount === 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "text-tiny text-warning-fg/70", children: "None available \u2014 create a colorable UTXO below to receive privately, or switch off privacy to use a witness receive." })
     ] }),
-    network === "onchain" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(Label3, { htmlFor: amountId, children: [
+    network === "onchain" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(Label3, { htmlFor: amountId, children: [
           "Amount (",
           getUnitLabel(),
           ") - Optional"
         ] }),
-        selectedAsset && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("span", { className: "text-xxs text-foreground/55", children: [
+        selectedAsset && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { className: "text-xxs text-foreground/55", children: [
           selectedAsset.precision ?? 0,
           " decimals"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
         "input",
         {
           id: amountId,
@@ -14203,18 +14453,18 @@ function DepositPreGeneration({
         }
       )
     ] }),
-    needsColorableUtxos && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(AlertBanner, { variant: "warning", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "mb-0.5 text-caption font-bold text-warning-fg", children: "Colorable UTXOs Required" }),
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-tiny text-warning-fg/70", children: "To receive RGB assets on-chain you need at least one uncolored UTXO. Create some now and the invoice will be generated automatically." })
+    needsColorableUtxos && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(AlertBanner, { variant: "warning", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "mb-0.5 text-caption font-bold text-warning-fg", children: "Colorable UTXOs Required" }),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "text-tiny text-warning-fg/70", children: "To receive RGB assets on-chain you need at least one uncolored UTXO. Create some now and the invoice will be generated automatically." })
     ] }),
-    !isAutoGenerate && ((needsColorableUtxos || isRgbOnchain && usePrivacy && colorableUtxoCount === 0) && onOpenCreateUtxos ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { variant: "cta", size: "cta", onClick: onOpenCreateUtxos, disabled: loading, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: AddCircle, className: "text-icon-md" }),
+    !isAutoGenerate && ((needsColorableUtxos || isRgbOnchain && usePrivacy && colorableUtxoCount === 0) && onOpenCreateUtxos ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Button, { variant: "cta", size: "cta", onClick: onOpenCreateUtxos, disabled: loading, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: AddCircle, className: "text-icon-md" }),
       "Create Colorable UTXOs"
-    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { variant: "cta", size: "cta", onClick: generateInvoice, disabled: loading, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-md" }),
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Button, { variant: "cta", size: "cta", onClick: generateInvoice, disabled: loading, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-md" }),
       "Generating..."
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconGlyph, { glyph: QrCode_2, className: "text-icon-md" }),
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: QrCode_2, className: "text-icon-md" }),
       "Generate Address"
     ] }) }))
   ] });
@@ -14222,7 +14472,7 @@ function DepositPreGeneration({
 
 // src/web/components/deposit-asset-selection.tsx
 var import_react45 = require("react");
-var import_jsx_runtime137 = require("react/jsx-runtime");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 var ADD_ASSET_SUBTITLE = {
   RGB: "RGB asset on Bitcoin",
   SPARK: "Spark-native asset",
@@ -14311,9 +14561,9 @@ function DepositAssetSelection({
       titleHoverClass: "group-hover:text-network-liquid-fg"
     }
   ].filter((option) => option.enabled);
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background bg-page-radial pt-16 font-display text-foreground", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(GlyphButton, { icon: ArrowBack, label: "Go back", size: "lg", onClick: () => setCurrentView("dashboard") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "flex-shrink-0 px-5 pb-3 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background bg-page-radial pt-16 font-display text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(GlyphButton, { icon: ArrowBack, label: "Go back", size: "lg", onClick: () => setCurrentView("dashboard") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex-shrink-0 px-5 pb-3 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
       DotPagination,
       {
         count: 2,
@@ -14321,8 +14571,8 @@ function DepositAssetSelection({
         ariaLabel: "Deposit step 1 of 2: select asset"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "flex-shrink-0 px-5 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex-shrink-0 px-5 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
         IconGlyph,
         {
           glyph: Search,
@@ -14330,7 +14580,7 @@ function DepositAssetSelection({
           className: "absolute left-3 top-1/2 -translate-y-1/2 text-secondary-content"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
         "input",
         {
           autoFocus: true,
@@ -14343,8 +14593,8 @@ function DepositAssetSelection({
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "space-y-1.5 px-5 pb-3", children: [
-      btcAsset && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "space-y-1.5 px-5 pb-3", children: [
+      btcAsset && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
         "button",
         {
           type: "button",
@@ -14352,28 +14602,28 @@ function DepositAssetSelection({
           className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card px-4 py-3 text-body shadow-card transition-all duration-200 hover-gradient-violet hover:shadow-card-hover",
           onClick: () => onSelectAsset(btcAsset),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(AssetIcon, { ticker: "BTC", size: 40, className: "flex-shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "font-bold tracking-wide text-foreground transition-colors group-hover:text-secondary-content", children: "Bitcoin" }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "mt-0.5 text-caption text-foreground/55", children: "Choose destination account next" })
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(AssetIcon, { ticker: "BTC", size: 40, className: "flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "font-bold tracking-wide text-foreground transition-colors group-hover:text-secondary-content", children: "Bitcoin" }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "mt-0.5 text-caption text-foreground/55", children: "Choose destination account next" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "hidden min-w-0 max-w-[42%] flex-shrink flex-wrap justify-end gap-1 min-[380px]:flex", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(NetworkBadge, { network: "L1", size: "sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(NetworkBadge, { network: "LN", size: "sm" }),
-              isSparkConnected && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(NetworkBadge, { network: "Spark", size: "sm" }),
-              isArkadeConnected && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(NetworkBadge, { network: "Arkade", size: "sm" }),
-              isLiquidConnected && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(NetworkBadge, { network: "Liquid", size: "sm" })
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "hidden min-w-0 max-w-[42%] flex-shrink flex-wrap justify-end gap-1 min-[380px]:flex", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(NetworkBadge, { network: "L1", size: "sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(NetworkBadge, { network: "LN", size: "sm" }),
+              isSparkConnected && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(NetworkBadge, { network: "Spark", size: "sm" }),
+              isArkadeConnected && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(NetworkBadge, { network: "Arkade", size: "sm" }),
+              isLiquidConnected && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(NetworkBadge, { network: "Liquid", size: "sm" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: ArrowForward, className: "flex-shrink-0 text-icon-md text-foreground/20 transition-colors group-hover:text-secondary-content" })
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IconGlyph, { glyph: ArrowForward, className: "flex-shrink-0 text-icon-md text-foreground/20 transition-colors group-hover:text-secondary-content" })
           ]
         }
       ),
-      noResults ? /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "py-8 text-center text-caption text-foreground/55", children: [
+      noResults ? /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "py-8 text-center text-caption text-foreground/55", children: [
         'No assets match "',
         searchQuery,
         '"'
-      ] }) : ownedAssetsCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "space-y-1.5 pt-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+      ] }) : ownedAssetsCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "space-y-1.5 pt-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
           "button",
           {
             type: "button",
@@ -14386,17 +14636,17 @@ function DepositAssetSelection({
               isSearching && "cursor-default"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: cn("text-muted-foreground", eyebrow), children: "Your assets" }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "inline-flex size-5 items-center justify-center rounded-full bg-secondary bg-gradient-violet text-tiny font-bold text-white shadow-button-violet", children: ownedAssetsCount }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "flex-1" }),
-              !isSearching && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: showOwnedAssets ? ExpandLess : ExpandMore, size: "md", className: "text-secondary-content" })
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: cn("text-muted-foreground", eyebrow), children: "Your assets" }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "inline-flex size-5 items-center justify-center rounded-full bg-secondary bg-gradient-violet text-tiny font-bold text-white shadow-button-violet", children: ownedAssetsCount }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex-1" }),
+              !isSearching && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IconGlyph, { glyph: showOwnedAssets ? ExpandLess : ExpandMore, size: "md", className: "text-secondary-content" })
             ]
           }
         ),
-        showOwnedAssets && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "space-y-1.5 duration-200 animate-in fade-in slide-in-from-top-1", children: ownedAssets.map((asset) => {
+        showOwnedAssets && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "space-y-1.5 duration-200 animate-in fade-in slide-in-from-top-1", children: ownedAssets.map((asset) => {
           const protocolBadge = asset.accountId ? PROTOCOL_BADGE[asset.accountId] : null;
           const balance = asset.balance ?? 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
             "button",
             {
               type: "button",
@@ -14404,11 +14654,11 @@ function DepositAssetSelection({
               className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card px-4 py-3 text-body shadow-card transition-all duration-200 hover-gradient-violet hover:shadow-card-hover",
               onClick: () => onSelectAsset(asset),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
-                /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "truncate font-bold tracking-wide text-foreground transition-colors group-hover:text-secondary-content", children: asset.ticker }),
-                    protocolBadge && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "truncate font-bold tracking-wide text-foreground transition-colors group-hover:text-secondary-content", children: asset.ticker }),
+                    protocolBadge && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
                       "span",
                       {
                         className: cn(
@@ -14420,36 +14670,36 @@ function DepositAssetSelection({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "mt-0.5 truncate text-caption text-foreground/55", children: asset.name ?? "Asset" })
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "mt-0.5 truncate text-caption text-foreground/55", children: asset.name ?? "Asset" })
                 ] }),
-                balance > 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex-shrink-0 text-right", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "text-caption font-bold tabular-nums text-foreground", children: formatAssetBalance(asset) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: cn("mt-0.5 text-foreground/55", eyebrow), children: asset.ticker })
+                balance > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex-shrink-0 text-right", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "text-caption font-bold tabular-nums text-foreground", children: formatAssetBalance(asset) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: cn("mt-0.5 text-foreground/55", eyebrow), children: asset.ticker })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: ArrowForward, className: "flex-shrink-0 text-icon-sm text-foreground/20 transition-colors group-hover:text-secondary-content" })
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IconGlyph, { glyph: ArrowForward, className: "flex-shrink-0 text-icon-sm text-foreground/20 transition-colors group-hover:text-secondary-content" })
               ]
             },
             asset.asset_id
           );
         }) })
       ] }) : null,
-      !searchQuery && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+      !searchQuery && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
         "button",
         {
           type: "button",
           onClick: () => setCurrentView("bridge"),
           className: "group flex w-full items-center gap-3 rounded-2xl bg-gradient-to-r from-secondary/20 to-primary/10 p-3 shadow-card transition-all duration-200 hover:from-secondary/30 hover:to-primary/15 hover:shadow-card-hover",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary bg-gradient-violet text-white shadow-button-violet", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: SwapCalls, className: "text-icon-lg" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex-1 text-left", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "text-body font-semibold text-foreground transition-colors group-hover:text-secondary-content", children: "Bridge from another chain" }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "text-xxs leading-tight text-foreground/55", children: "USDC, USDT, ETH, SOL via Flashnet" })
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary bg-gradient-violet text-white shadow-button-violet", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IconGlyph, { glyph: SwapCalls, className: "text-icon-lg" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-body font-semibold text-foreground transition-colors group-hover:text-secondary-content", children: "Bridge from another chain" }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-xxs leading-tight text-foreground/55", children: "USDC, USDT, ETH, SOL via Flashnet" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: ArrowForward, className: "text-icon-lg text-foreground/55 transition-colors group-hover:text-secondary-content" })
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IconGlyph, { glyph: ArrowForward, className: "text-icon-lg text-foreground/55 transition-colors group-hover:text-secondary-content" })
           ]
         }
       ) }),
-      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
         "button",
         {
           type: "button",
@@ -14457,27 +14707,27 @@ function DepositAssetSelection({
           onClick: () => setShowAddAssetModal(true),
           className: "group flex w-full items-center gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card transition-all duration-200 hover-gradient-violet hover:shadow-card-hover",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: Add, size: "md" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex-1 text-left", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "text-body font-semibold text-foreground transition-colors group-hover:text-secondary-content", children: "Add an asset" }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("p", { className: "text-xxs leading-tight text-foreground/55", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IconGlyph, { glyph: Add, size: "md" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-body font-semibold text-foreground transition-colors group-hover:text-secondary-content", children: "Add an asset" }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("p", { className: "text-xxs leading-tight text-foreground/55", children: [
                 "Receive a new ",
                 newAssetOptions.map((o) => o.ticker).join(", "),
                 " asset"
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: ArrowForward, className: "text-icon-lg text-foreground/55 transition-colors group-hover:text-secondary-content" })
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IconGlyph, { glyph: ArrowForward, className: "text-icon-lg text-foreground/55 transition-colors group-hover:text-secondary-content" })
           ]
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
       BottomSheet,
       {
         open: showAddAssetModal,
         title: "Add an asset",
         onClose: () => setShowAddAssetModal(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "space-y-2", children: newAssetOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "space-y-2", children: newAssetOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
           "button",
           {
             type: "button",
@@ -14491,12 +14741,12 @@ function DepositAssetSelection({
               handleAddNewAsset(option.account);
             },
             children: [
-              option.account === "LIQUID" ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-network-liquid/10", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(LiquidNetworkIcon, { className: "size-5" }) }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: cn("text-body font-bold tracking-wide text-foreground", option.titleHoverClass), children: option.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "mt-0.5 text-xxs text-foreground/55", children: ADD_ASSET_SUBTITLE[option.account] })
+              option.account === "LIQUID" ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-network-liquid/10", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(LiquidNetworkIcon, { className: "size-5" }) }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: cn("text-body font-bold tracking-wide text-foreground", option.titleHoverClass), children: option.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "mt-0.5 text-xxs text-foreground/55", children: ADD_ASSET_SUBTITLE[option.account] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IconGlyph, { glyph: Add, size: "sm", className: "text-foreground/55 transition-colors group-hover:text-foreground/60" })
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IconGlyph, { glyph: Add, size: "sm", className: "text-foreground/55 transition-colors group-hover:text-foreground/60" })
             ]
           },
           option.account
@@ -14507,7 +14757,7 @@ function DepositAssetSelection({
 }
 
 // src/web/components/deposit-invoice-generation.tsx
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 var ACCOUNT_TITLES2 = {
   RGB: "RGB & Lightning",
   SPARK: "Spark",
@@ -14666,7 +14916,7 @@ function DepositInvoiceGeneration({
     if (nextMethod) applyMethodSelection(account, nextMethod);
   };
   if (depositDetected) {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
       DepositSuccessScreen,
       {
         handleDone,
@@ -14683,15 +14933,15 @@ function DepositInvoiceGeneration({
   const showChannelWarning = selectedAccount === "RGB" && network === "lightning" && !channelsLoading && channels.length === 0 && !isSparkConnected;
   const showLiquidityWarning = !isSparkLightning && network === "lightning" && maxDepositAmount === 0 && !channelsLoading && !isBtc;
   const isNewRgbAsset = isNewAsset && assetFamily === "RGB";
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background bg-page-radial pt-16 font-display text-foreground", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(GlyphButton, { icon: ArrowBack, label: "Go back", size: "lg", onClick: handleBack }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background bg-page-radial pt-16 font-display text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(GlyphButton, { icon: ArrowBack, label: "Go back", size: "lg", onClick: handleBack }) }),
     (() => {
       const hideDestinationRail = isNewAsset && (network === "spark" || network === "arkade");
       if (hideDestinationRail) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex-shrink-0 px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: cn("text-muted-foreground", eyebrow), children: "Destination Account" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: availableAccounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "flex-shrink-0 px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { className: cn("text-muted-foreground", eyebrow), children: "Destination Account" }),
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: availableAccounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
             AccountChoiceChip,
             {
               account,
@@ -14716,9 +14966,9 @@ function DepositInvoiceGeneration({
             account
           )) })
         ] }),
-        !isBtc && !(isNewAsset && (network === "spark" || network === "arkade")) && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: cn("text-muted-foreground", eyebrow), children: "Transfer Method" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: methodOptions.map(({ method, enabled, disabledReason }) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+        !isBtc && !(isNewAsset && (network === "spark" || network === "arkade")) && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { className: cn("text-muted-foreground", eyebrow), children: "Transfer Method" }),
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: methodOptions.map(({ method, enabled, disabledReason }) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
             MethodChoiceChip,
             {
               method,
@@ -14732,7 +14982,7 @@ function DepositInvoiceGeneration({
         ] })
       ] }) });
     })(),
-    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ScrollArea, { className: "flex-1", viewportAs: "main", viewportClassName: "space-y-2.5 px-4 py-2.5", children: isBtc && accountReceiveResult ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(ScrollArea, { className: "flex-1", viewportAs: "main", viewportClassName: "space-y-2.5 px-4 py-2.5", children: isBtc && accountReceiveResult ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
       BtcUnifiedReceive,
       {
         btcSelectedAccount,
@@ -14752,15 +15002,15 @@ function DepositInvoiceGeneration({
         setAccountReceiveResult,
         handleDone
       }
-    ) : isBtc && !accountReceiveResult && loading ? /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col items-center gap-4 py-10", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    ) : isBtc && !accountReceiveResult && loading ? /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "flex flex-col items-center gap-4 py-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
         "div",
         {
           className: cn(
             "flex size-16 items-center justify-center rounded-2xl shadow-raised",
             NETWORK_CONFIG[btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain"].bg
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
             IconGlyph,
             {
               glyph: ProgressActivity,
@@ -14772,11 +15022,11 @@ function DepositInvoiceGeneration({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "space-y-1 text-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-caption font-bold text-muted-foreground", children: "Generating addresses..." }),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-caption text-foreground/55", children: ACCOUNT_TITLES2[btcSelectedAccount] })
+      /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "space-y-1 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { className: "text-caption font-bold text-muted-foreground", children: "Generating addresses..." }),
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { className: "text-caption text-foreground/55", children: ACCOUNT_TITLES2[btcSelectedAccount] })
       ] })
-    ] }) : !address ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    ] }) : !address ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
       DepositPreGeneration,
       {
         selectedAsset,
@@ -14800,7 +15050,7 @@ function DepositInvoiceGeneration({
         onOpenCreateUtxos,
         showReceiveSummary: !isNewRgbAsset
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
       DepositGeneratedView,
       {
         network,
@@ -14896,6 +15146,7 @@ function DepositInvoiceGeneration({
   CopyIcon,
   Copyable,
   DEFAULT_AMOUNT_LOCALE,
+  DatePicker,
   DateRangeFilter,
   DepositAssetSelection,
   DepositGeneratedView,