kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-AWKCO62W.js

@@ -0,0 +1,191 @@
+"use client";
+import {
+  ChartFrame,
+  ChartLegend,
+  ChartTooltip,
+  TICK_FONT,
+  axisTextWidth,
+  chartScatterSeriesLimit,
+  chartValueTicks,
+  defaultChartFormat,
+  nextActiveIndex,
+  plotClass,
+  seriesColor,
+  useChartWidth,
+  useSeriesVisibility
+} from "./chunk-CXLGQSHM.js";
+
+// src/web/components/charts/scatter-chart.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MARGIN = { top: 12, right: 16, bottom: 40, left: 8 };
+var HIT_RADIUS = 12;
+function ScatterChart({
+  series: allSeries,
+  label,
+  xLabel,
+  yLabel,
+  formatX = defaultChartFormat,
+  formatY = defaultChartFormat,
+  height = 260,
+  empty,
+  className,
+  ...head
+}) {
+  const [containerRef, width] = useChartWidth();
+  const [active, setActive] = useState(null);
+  const visibility = useSeriesVisibility(allSeries.map((s) => s.id));
+  const series = allSeries.filter((s) => visibility.isVisible(s.id));
+  const slotOf = (id) => allSeries.findIndex((s) => s.id === id);
+  if (allSeries.length > chartScatterSeriesLimit) {
+    throw new Error(
+      `ScatterChart takes at most ${chartScatterSeriesLimit} series (got ${allSeries.length}); fold the rest into "Other" or use small multiples.`
+    );
+  }
+  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__ */ jsx(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);
+  const yTicks = chartValueTicks(yMax);
+  const yTickLabels = yTicks.map(formatY);
+  const plotLeft = MARGIN.left + axisTextWidth(yTickLabels) + 8;
+  const plotRight = width - MARGIN.right;
+  const plotTop = MARGIN.top;
+  const plotBottom = height - MARGIN.bottom;
+  const plotWidth = Math.max(1, plotRight - plotLeft);
+  const plotHeight = Math.max(1, plotBottom - plotTop);
+  const sx = (value) => plotLeft + Math.max(0, value) / (xMax || 1) * plotWidth;
+  const sy = (value) => plotBottom - Math.max(0, value) / (yMax || 1) * plotHeight;
+  const onPointerMove = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    const px = (event.clientX - box.left) / box.width * width;
+    const py = (event.clientY - box.top) / box.height * height;
+    let best = null;
+    let bestDistance = Infinity;
+    points.forEach((p, index) => {
+      const distance = Math.hypot(sx(p.x) - px, sy(p.y) - py);
+      if (distance < bestDistance) {
+        best = index;
+        bestDistance = distance;
+      }
+    });
+    setActive(bestDistance <= HIT_RADIUS * 3 ? best : null);
+  };
+  const onKeyDown = (event) => {
+    if (nextActiveIndex(event.key, active, points.length) === void 0) return;
+    event.preventDefault();
+    setActive((current) => {
+      const next = nextActiveIndex(event.key, current, points.length);
+      return next === void 0 ? current : next;
+    });
+  };
+  const activePoint = active === null ? null : points[active];
+  const describe = (p) => `${p.label ?? p.seriesLabel}: ${xLabel} ${formatX(p.x)}, ${yLabel} ${formatY(p.y)}`;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...head,
+      label,
+      className,
+      scale: `${yLabel} against ${xLabel} \xB7 both linear, from 0`,
+      legend: allSeries.length > 1 ? /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          keyShape: "dot",
+          items: allSeries.map((s, slot) => ({ id: s.id, label: s.label, color: seriesColor(slot) })),
+          ...visibility.legend
+        }
+      ) : void 0,
+      table: {
+        columns: ["Point", "Series", xLabel, yLabel],
+        rows: points.map((p) => [p.label ?? p.id, p.seriesLabel, formatX(p.x), formatY(p.y)])
+      },
+      announcement: activePoint ? describe(activePoint) : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          role: "group",
+          "aria-roledescription": "chart",
+          "aria-label": `${label}: ${points.length} points. Arrow keys move between them.`,
+          tabIndex: 0,
+          onKeyDown,
+          onBlur: () => setActive(null),
+          className: plotClass,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "100%",
+                height,
+                viewBox: `0 0 ${width} ${height}`,
+                className: "block overflow-visible",
+                "aria-hidden": "true",
+                onPointerMove,
+                onPointerLeave: () => setActive(null),
+                children: [
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-y-axis", children: yTicks.map((tick, index) => /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx("line", { x1: plotLeft, x2: plotRight, y1: sy(tick), y2: sy(tick), stroke: "var(--border)" }),
+                    /* @__PURE__ */ 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__ */ jsxs("g", { "data-slot": "chart-x-axis", children: [
+                    /* @__PURE__ */ jsx("line", { x1: plotLeft, x2: plotRight, y1: plotBottom, y2: plotBottom, stroke: "var(--border)" }),
+                    xTicks.map((tick, index) => /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: sx(tick),
+                        y: plotBottom + 16,
+                        textAnchor: index === 0 ? "start" : index === xTicks.length - 1 ? "end" : "middle",
+                        fontSize: TICK_FONT,
+                        fill: "var(--muted-foreground)",
+                        style: { fontVariantNumeric: "tabular-nums" },
+                        children: formatX(tick)
+                      },
+                      tick
+                    )),
+                    /* @__PURE__ */ jsxs("text", { x: plotRight, y: plotBottom + 34, textAnchor: "end", fontSize: TICK_FONT, fill: "var(--muted-foreground)", children: [
+                      xLabel,
+                      " \u2192"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-points", children: points.map((p, index) => /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      "data-series": allSeries[p.slot].id,
+                      cx: sx(p.x),
+                      cy: sy(p.y),
+                      r: active === index ? 6 : 4,
+                      fill: seriesColor(p.slot),
+                      stroke: "var(--card)",
+                      strokeWidth: 2,
+                      opacity: active !== null && active !== index ? 0.5 : 1
+                    },
+                    `${p.slot}-${p.id}`
+                  )) })
+                ]
+              }
+            ),
+            activePoint && /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                title: activePoint.label ?? activePoint.seriesLabel,
+                rows: [
+                  { id: "x", label: xLabel, value: formatX(activePoint.x), color: seriesColor(activePoint.slot) },
+                  { id: "y", label: yLabel, value: formatY(activePoint.y), color: seriesColor(activePoint.slot) }
+                ],
+                x: sx(activePoint.x),
+                y: sy(activePoint.y) - 24,
+                width
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  ScatterChart
+};

package/dist/web/chunk-BGUBHWIO.js

@@ -0,0 +1,41 @@
+"use client";
+
+// src/web/hooks/use-copy-to-clipboard.ts
+import { useCallback, useRef, useState } from "react";
+function useCopyToClipboard() {
+  const [state, setState] = useState("idle");
+  const [error, setError] = useState(void 0);
+  const attempt = useRef(0);
+  const copy = useCallback(async (value, callbacks) => {
+    const id = ++attempt.current;
+    try {
+      if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+        throw new Error("The clipboard is not available in this context");
+      }
+      await navigator.clipboard.writeText(value);
+      if (id === attempt.current) {
+        setError(void 0);
+        setState("copied");
+      }
+      callbacks?.onSuccess?.();
+      return true;
+    } catch (cause) {
+      if (id === attempt.current) {
+        setError(cause);
+        setState("failed");
+      }
+      callbacks?.onError?.(cause);
+      return false;
+    }
+  }, []);
+  const reset = useCallback(() => {
+    attempt.current += 1;
+    setError(void 0);
+    setState("idle");
+  }, []);
+  return { state, copy, reset, error };
+}
+
+export {
+  useCopyToClipboard
+};

package/dist/web/chunk-BYHIH2LP.js

@@ -0,0 +1,56 @@
+"use client";
+import {
+  AppIcon
+} from "./chunk-I2N3HZ4M.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+
+// src/web/components/settings-tile.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsTile({ icon, title, description, value, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "group w-full rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 text-left shadow-card-secondary transition-all duration-200 hover:-translate-y-0.5 hover:shadow-card-hover-soft active:scale-[0.98]",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content transition-all group-hover-gradient-violet group-hover:shadow-glow-violet-faint", children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-bold text-body tracking-wide text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-caption font-medium text-muted-foreground", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+          value && /* @__PURE__ */ jsx("span", { className: "font-mono text-caption text-muted-foreground", children: value }),
+          /* @__PURE__ */ jsx(AppIcon, { name: "chevronRight", className: "size-4 text-muted-foreground transition-colors group-hover:text-secondary-content" })
+        ] })
+      ] })
+    }
+  );
+}
+function SettingsStatusPanel({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl bg-secondary/10 px-4 py-3 text-caption text-muted-foreground ring-1 ring-inset ring-secondary/20", children: [
+    label,
+    ": ",
+    /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: value })
+  ] });
+}
+function SettingsActionButton({
+  icon,
+  children,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(Button, { type: "button", variant: "h2", size: "lg", onClick, children: [
+    icon,
+    children
+  ] });
+}
+
+export {
+  SettingsTile,
+  SettingsStatusPanel,
+  SettingsActionButton
+};

package/dist/web/chunk-CBE7BT3M.js

@@ -0,0 +1,87 @@
+"use client";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Search
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/primitives/menu-search.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MENU_VISIBLE_ITEMS = 4;
+var textOf = (node) => {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (React.isValidElement(node)) return textOf(node.props.children);
+  return "";
+};
+var isElementOf = (component) => (element) => element.type === component || !!component.displayName && element.type.displayName === component.displayName;
+function countMenuItems(children, isItem) {
+  let count = 0;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    count += isItem(child) ? 1 : countMenuItems(child.props.children, isItem);
+  });
+  return count;
+}
+function filterMenuItems(children, isItem, query) {
+  const needle = query.trim().toLowerCase();
+  const found = [];
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (isItem(child)) {
+      if (textOf(child.props.children).toLowerCase().includes(needle)) found.push(child);
+    } else {
+      found.push(...filterMenuItems(child.props.children, isItem, query));
+    }
+  });
+  return found;
+}
+function MenuSearch({ value, onChange, label = "Search" }) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const frame = requestAnimationFrame(() => ref.current?.focus({ preventScroll: true }));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "menu-search", className: "relative mb-1.5", children: [
+    /* @__PURE__ */ jsx(
+      IconGlyph,
+      {
+        glyph: Search,
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-icon-md text-muted-foreground"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "search",
+        value,
+        placeholder: label,
+        "aria-label": label,
+        autoComplete: "off",
+        onChange: (event) => onChange(event.target.value),
+        onKeyDown: (event) => {
+          if (["ArrowDown", "ArrowUp", "Escape", "Tab"].includes(event.key)) return;
+          event.stopPropagation();
+        },
+        className: "h-9 w-full rounded-xl bg-foreground/[0.06] pl-9 pr-3 text-caption text-foreground outline-none placeholder:text-muted-foreground focus:ring-1 focus:ring-primary/50 [&::-webkit-search-cancel-button]:hidden"
+      }
+    )
+  ] });
+}
+function MenuNoResults({ children = "No results" }) {
+  return /* @__PURE__ */ jsx("p", { className: "px-3 py-3 text-caption text-muted-foreground", children });
+}
+
+export {
+  MENU_VISIBLE_ITEMS,
+  isElementOf,
+  countMenuItems,
+  filterMenuItems,
+  MenuSearch,
+  MenuNoResults
+};

package/dist/web/chunk-CJATW6EO.js

@@ -0,0 +1,108 @@
+"use client";
+import {
+  formatAmount
+} from "./chunk-VM6AGMYO.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/withdraw-invoice-info.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function getAssetPrecisionForId(allAssets, assetId) {
+  return allAssets.find((asset) => asset.asset_id === assetId)?.precision ?? 0;
+}
+function formatRawAmount(amount, precision) {
+  return (amount / Math.pow(10, precision)).toLocaleString("en-US", {
+    maximumFractionDigits: precision,
+    minimumFractionDigits: 0
+  });
+}
+function WithdrawInvoiceInfo({
+  addressType,
+  decodedLnInvoice,
+  decodedRgbInvoice,
+  allAssets,
+  selectedAssetId,
+  selectedAssetTicker,
+  assetBalance,
+  maxLightningCapacity
+}) {
+  if (decodedLnInvoice && addressType === "lightning") {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "Lightning Invoice" }),
+      decodedLnInvoice.amount != null && decodedLnInvoice.amount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Amount" }),
+        /* @__PURE__ */ jsxs("span", { className: "font-bold text-foreground", children: [
+          formatAmount(decodedLnInvoice.amount),
+          " ",
+          decodedLnInvoice.asset_id ? "units" : "sats"
+        ] })
+      ] }),
+      decodedLnInvoice.asset_id && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Asset" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-caption text-foreground", children: allAssets.find((asset) => asset.asset_id === decodedLnInvoice.asset_id)?.ticker ?? `${decodedLnInvoice.asset_id.substring(0, 12)}...` })
+      ] }),
+      decodedLnInvoice.asset_amount != null && decodedLnInvoice.asset_amount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Asset Amount" }),
+        /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: formatAmount(decodedLnInvoice.asset_amount) })
+      ] }),
+      decodedLnInvoice.description && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Description" }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[180px] truncate text-right text-foreground", children: decodedLnInvoice.description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Channel Capacity" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+          formatAmount(Math.floor(maxLightningCapacity / 1e3)),
+          " sats"
+        ] })
+      ] })
+    ] });
+  }
+  if (decodedRgbInvoice && addressType === "rgb") {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "RGB Invoice" }),
+      decodedRgbInvoice.asset_id && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Asset" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-caption text-foreground", children: allAssets.find((asset) => asset.asset_id === decodedRgbInvoice.asset_id)?.ticker ?? `${decodedRgbInvoice.asset_id.substring(0, 8)}...${decodedRgbInvoice.asset_id.slice(-8)}` })
+      ] }),
+      decodedRgbInvoice.assignment?.value != null && decodedRgbInvoice.assignment.value > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Requested Amount" }),
+        /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: formatRawAmount(
+          decodedRgbInvoice.assignment.value,
+          getAssetPrecisionForId(allAssets, decodedRgbInvoice.asset_id ?? selectedAssetId)
+        ) })
+      ] }),
+      decodedRgbInvoice.recipient_type && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Recipient Type" }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground", children: decodedRgbInvoice.recipient_type })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Your Balance" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+          formatRawAmount(assetBalance, getAssetPrecisionForId(allAssets, selectedAssetId)),
+          " ",
+          selectedAssetTicker ?? "units"
+        ] })
+      ] })
+    ] });
+  }
+  if (addressType === "bitcoin" || addressType === "arkade" || addressType === "liquid") {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: addressType === "arkade" ? "Available Arkade Balance" : addressType === "liquid" ? "Available Liquid Balance" : "Available Balance" }),
+      /* @__PURE__ */ jsxs("span", { className: "font-bold text-foreground", children: [
+        formatRawAmount(assetBalance, getAssetPrecisionForId(allAssets, selectedAssetId)),
+        " ",
+        selectedAssetTicker ?? "sats"
+      ] })
+    ] }) });
+  }
+  return null;
+}
+
+export {
+  WithdrawInvoiceInfo
+};