kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-X3MYWPNO.js

@@ -0,0 +1,230 @@
+"use client";
+import {
+  Label
+} from "./chunk-H3GYLFHP.js";
+import {
+  AlertBanner
+} from "./chunk-ZTVV4KBT.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  AddCircle,
+  ProgressActivity,
+  QrCode_2
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/deposit-pre-generation.tsx
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ACCOUNT_TITLES = {
+  RGB: "RGB & Lightning",
+  SPARK: "Spark",
+  ARKADE: "Arkade",
+  LIQUID: "Liquid"
+};
+var METHOD_META = {
+  bitcoin_l1: { label: "Bitcoin address", summary: "Standard on-chain BTC transfer." },
+  lightning: { label: "Lightning invoice", summary: "Fast payment over Lightning." },
+  spark: { label: "Spark transfer", summary: "Funds land directly in the Spark account." },
+  arkade: { label: "Arkade transfer", summary: "Funds land directly in the Arkade account." },
+  boarding: { label: "Boarding", summary: "Send on-chain BTC into Arkade." },
+  submarine_swap: {
+    label: "LN via swap",
+    summary: "Uses Arkade as the source account and bridges to Lightning."
+  }
+};
+function DepositPreGeneration({
+  selectedAsset,
+  isBtc,
+  network,
+  net,
+  selectedAccount,
+  currentMethod,
+  channelsLoading,
+  showChannelWarning,
+  showLiquidityWarning,
+  isAutoGenerate,
+  loading,
+  usePrivacy,
+  setUsePrivacy,
+  amount,
+  handleAmountChange,
+  getUnitLabel,
+  generateInvoice,
+  needsColorableUtxos = false,
+  onOpenCreateUtxos,
+  showReceiveSummary = true,
+  isNewRgbAsset = false,
+  newAssetId = "",
+  setNewAssetId,
+  colorableUtxoCount
+}) {
+  const assetIdInputId = useId();
+  const amountId = useId();
+  const method = METHOD_META[currentMethod];
+  const isRgbOnchain = network === "onchain" && !isBtc;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    showReceiveSummary && /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "Receive Summary" }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-1 gap-2 text-caption", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground/55", children: "Asset" }),
+          /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: selectedAsset?.ticker ?? (isBtc ? "BTC" : "Asset") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground/55", children: "Destination account" }),
+          /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: ACCOUNT_TITLES[selectedAccount] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground/55", children: "Transfer method" }),
+          /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: method.label })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-tiny text-foreground/55", children: method.summary })
+      ] })
+    ] }),
+    channelsLoading && selectedAccount === "RGB" && currentMethod === "lightning" && !isBtc && /* @__PURE__ */ 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__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-lg text-secondary-content" }),
+      /* @__PURE__ */ jsx("span", { className: "text-caption font-medium text-foreground/60", children: "Checking channel availability..." })
+    ] }),
+    showChannelWarning && /* @__PURE__ */ jsxs(AlertBanner, { variant: "warning", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-0.5 text-caption font-bold text-warning-fg", children: "No Lightning Channels" }),
+      /* @__PURE__ */ jsx("p", { className: "text-tiny text-warning-fg/70", children: "Only on-chain deposits are available." })
+    ] }),
+    showLiquidityWarning && /* @__PURE__ */ jsxs(AlertBanner, { variant: "warning", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-0.5 text-caption font-bold text-warning-fg", children: "No Inbound Liquidity" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-tiny text-warning-fg/70", children: [
+        "No channels with inbound capacity for ",
+        selectedAsset?.ticker ?? "this asset",
+        "."
+      ] })
+    ] }),
+    isAutoGenerate && loading && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 py-10", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("flex size-16 items-center justify-center rounded-2xl shadow-raised", net.bg), children: /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: cn("animate-spin text-icon-4xl", net.text) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-center", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-caption font-bold text-muted-foreground", children: [
+          "Generating ",
+          network === "lightning" ? "invoice" : "address",
+          "..."
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-caption text-foreground/55", children: [
+          net.label,
+          " network"
+        ] })
+      ] })
+    ] }),
+    isRgbOnchain && isNewRgbAsset && setNewAssetId && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: assetIdInputId, children: "RGB Asset ID - Optional" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: assetIdInputId,
+          type: "text",
+          value: newAssetId,
+          onChange: (event) => setNewAssetId(event.target.value),
+          placeholder: "rgb:... (leave empty for any asset)",
+          spellCheck: false,
+          autoCapitalize: "off",
+          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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-caption font-bold text-foreground", children: usePrivacy ? "Blinded receive" : "Witness receive" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xxs text-muted-foreground", children: usePrivacy ? "Private - recommended" : "Simpler - less private" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Toggle blinded (private) receive",
+            className: cn(
+              "relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full shadow-inner transition-colors",
+              usePrivacy ? "bg-primary bg-gradient-primary shadow-glow-primary-soft" : "bg-foreground/10"
+            ),
+            onClick: () => setUsePrivacy(!usePrivacy),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "inline-block h-3.5 w-3.5 rounded-full shadow-md transition-all",
+                  usePrivacy ? "translate-x-5 bg-black" : "translate-x-0.5 bg-foreground/80"
+                )
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ 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__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-between rounded-lg px-2.5 py-1.5 text-xxs",
+            colorableUtxoCount > 0 ? "bg-success/10 text-success-fg/80" : "bg-warning/10 text-warning-fg/80"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Available colorable UTXOs" }),
+            /* @__PURE__ */ jsx("span", { className: "font-bold tabular-nums", children: colorableUtxoCount })
+          ]
+        }
+      ),
+      usePrivacy && colorableUtxoCount === 0 && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: amountId, children: [
+          "Amount (",
+          getUnitLabel(),
+          ") - Optional"
+        ] }),
+        selectedAsset && /* @__PURE__ */ jsxs("span", { className: "text-xxs text-foreground/55", children: [
+          selectedAsset.precision ?? 0,
+          " decimals"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: amountId,
+          type: "text",
+          value: amount,
+          onChange: handleAmountChange,
+          placeholder: `e.g. 10.00 ${selectedAsset?.ticker ?? ""}`,
+          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 font-bold text-foreground shadow-inner transition-all placeholder:text-muted-foreground focus:ring-primary/50 focus:shadow-glow-primary-soft focus:outline-none",
+          inputMode: "decimal"
+        }
+      )
+    ] }),
+    needsColorableUtxos && /* @__PURE__ */ jsxs(AlertBanner, { variant: "warning", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-0.5 text-caption font-bold text-warning-fg", children: "Colorable UTXOs Required" }),
+      /* @__PURE__ */ 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__ */ jsx(Button, { variant: "cta", size: "cta", onClick: onOpenCreateUtxos, disabled: loading, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(IconGlyph, { glyph: AddCircle, className: "text-icon-md" }),
+      "Create Colorable UTXOs"
+    ] }) }) : /* @__PURE__ */ jsx(Button, { variant: "cta", size: "cta", onClick: generateInvoice, disabled: loading, children: loading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-md" }),
+      "Generating..."
+    ] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(IconGlyph, { glyph: QrCode_2, className: "text-icon-md" }),
+      "Generate Address"
+    ] }) }))
+  ] });
+}
+
+export {
+  DepositPreGeneration
+};

package/dist/web/chunk-XDSOOOYL.js

@@ -0,0 +1,35 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/list-summary.tsx
+import { jsxs } from "react/jsx-runtime";
+var count = (n, noun) => `${n} ${n === 1 ? noun.replace(/s$/, "") : noun}`;
+function ListSummary({
+  noun,
+  shown,
+  offset,
+  total,
+  filtersActive = false,
+  noTotalNote = ", narrowed by the filters above. The API does not report how many exist in all.",
+  className,
+  ...rest
+}) {
+  let text;
+  if (total !== void 0) {
+    text = filtersActive ? `Showing ${shown} of ${count(total, noun)}` : count(total, noun);
+  } else if (offset !== void 0 && shown > 0) {
+    text = `Showing ${noun} ${offset + 1}\u2013${offset + shown}`;
+  } else {
+    text = `Showing ${count(shown, noun)}`;
+  }
+  return /* @__PURE__ */ jsxs("p", { "data-slot": "list-summary", className: cn("m-0 text-caption tabular-nums text-muted-foreground", className), ...rest, children: [
+    text,
+    filtersActive && total === void 0 ? noTotalNote : ""
+  ] });
+}
+
+export {
+  ListSummary
+};

package/dist/web/chunk-XIMTRQZ3.js

@@ -0,0 +1,220 @@
+"use client";
+import {
+  ChartFrame,
+  ChartLegend,
+  ChartTooltip,
+  TICK_FONT,
+  axisTextWidth,
+  chartLabelIndices,
+  chartValueTicks,
+  defaultChartFormat,
+  nextActiveIndex,
+  plotClass,
+  seriesColor,
+  tooltipText,
+  useChartWidth,
+  useSeriesVisibility
+} from "./chunk-CXLGQSHM.js";
+
+// src/web/components/charts/bar-chart.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MAX_BAR = 24;
+var GAP = 2;
+var RADIUS = 4;
+function barPath(x, y, w, h, end) {
+  const r = Math.min(RADIUS, w / 2, h / 2);
+  if (end === "none" || r <= 0) return `M${x},${y}h${w}v${h}h${-w}Z`;
+  if (end === "top") {
+    return `M${x},${y + h}V${y + r}Q${x},${y} ${x + r},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h}Z`;
+  }
+  return `M${x},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h - r}Q${x + w},${y + h} ${x + w - r},${y + h}H${x}Z`;
+}
+function BarChart({
+  data,
+  series: allSeries,
+  label,
+  scaleLabel,
+  layout = "grouped",
+  orientation = "vertical",
+  integer = false,
+  formatValue = defaultChartFormat,
+  height = 240,
+  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);
+  const count = data.length;
+  if (count === 0 || series.length === 0) return /* @__PURE__ */ jsx(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));
+  const max = stacked ? Math.max(0, ...totals) : Math.max(0, ...data.flatMap((d) => series.map((s) => d.values[s.id] ?? 0)));
+  const ticks = chartValueTicks(max, { integer });
+  const tickLabels = ticks.map(formatValue);
+  const top = max > 0 ? max : 1;
+  const rowHeight = stacked ? 36 : Math.max(36, series.length * (MAX_BAR / 1.5 + GAP) + 16);
+  const svgHeight = horizontal ? count * rowHeight + 28 : height;
+  const categoryLabelWidth = horizontal ? Math.min(160, axisTextWidth(data.map((d) => d.label)) + 12) : 0;
+  const margin = horizontal ? { top: 4, right: 16, bottom: 24, left: categoryLabelWidth } : { top: 12, right: 12, bottom: 26, left: axisTextWidth(tickLabels) + 16 };
+  const plotLeft = margin.left;
+  const plotRight = width - margin.right;
+  const plotTop = margin.top;
+  const plotBottom = svgHeight - margin.bottom;
+  const plotWidth = Math.max(1, plotRight - plotLeft);
+  const plotHeight = Math.max(1, plotBottom - plotTop);
+  const bandSize = (horizontal ? plotHeight : plotWidth) / count;
+  const valueLength = horizontal ? plotWidth : plotHeight;
+  const scale = (value) => Math.max(0, value) / top * valueLength;
+  const groupCount = stacked ? 1 : series.length;
+  const barThickness = Math.max(2, Math.min(MAX_BAR, (bandSize * 0.7 - GAP * (groupCount - 1)) / groupCount));
+  const groupThickness = barThickness * groupCount + GAP * (groupCount - 1);
+  const rowsAt = (index) => series.map((s, slot) => ({
+    id: s.id,
+    label: s.label,
+    value: formatValue(data[index].values[s.id] ?? 0),
+    color: seriesColor(slotOf(s.id))
+  }));
+  const onKeyDown = (event) => {
+    if (nextActiveIndex(event.key, active, count, { vertical: horizontal }) === void 0) return;
+    event.preventDefault();
+    setActive((current) => {
+      const next = nextActiveIndex(event.key, current, count, { vertical: horizontal });
+      return next === void 0 ? current : next;
+    });
+  };
+  const bars = data.map((d, index) => {
+    const bandStart = (horizontal ? plotTop : plotLeft) + index * bandSize;
+    const groupStart = bandStart + (bandSize - groupThickness) / 2;
+    const marks = [];
+    let stackBase = 0;
+    series.forEach((s, slot) => {
+      const value = Math.max(0, d.values[s.id] ?? 0);
+      if (value <= 0) return;
+      const length = scale(value);
+      const offset = stacked ? scale(stackBase) : 0;
+      stackBase += value;
+      const isLastInStack = !stacked || series.slice(slot + 1).every((next) => (d.values[next.id] ?? 0) <= 0);
+      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__ */ jsx("path", { "data-series": s.id, d: path, fill: seriesColor(slotOf(s.id)) }, s.id));
+    });
+    return /* @__PURE__ */ jsxs("g", { "data-category": d.key, opacity: active !== null && active !== index ? 0.55 : 1, children: [
+      marks,
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: horizontal ? plotLeft : bandStart,
+          y: horizontal ? bandStart : plotTop,
+          width: horizontal ? plotWidth : bandSize,
+          height: horizontal ? bandSize : plotHeight,
+          fill: "transparent",
+          onPointerEnter: () => setActive(index)
+        }
+      )
+    ] }, d.key);
+  });
+  const labelIndices = horizontal ? data.map((_, index) => index) : chartLabelIndices(count, 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__ */ jsx(
+    ChartFrame,
+    {
+      ...head,
+      label,
+      className,
+      scale: `${scaleLabel} \xB7 linear, from 0`,
+      legend: allSeries.length > 1 ? /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          items: allSeries.map((s, slot) => ({ id: s.id, label: s.label, color: seriesColor(slot) })),
+          ...visibility.legend
+        }
+      ) : void 0,
+      table: {
+        columns: [
+          horizontal ? "Category" : "Period",
+          ...series.map((s) => s.label),
+          ...stacked && series.length > 1 ? ["Total"] : []
+        ],
+        rows: data.map((d, index) => [
+          d.detail ?? d.label,
+          ...series.map((s) => formatValue(d.values[s.id] ?? 0)),
+          ...stacked && series.length > 1 ? [formatValue(totals[index])] : []
+        ])
+      },
+      announcement: activeDatum ? tooltipText(activeDatum.detail ?? activeDatum.label, rowsAt(active)) : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          role: "group",
+          "aria-roledescription": "chart",
+          "aria-label": `${label}: ${count} categories. Arrow keys move between them.`,
+          tabIndex: 0,
+          onKeyDown,
+          onBlur: () => setActive(null),
+          onPointerLeave: () => setActive(null),
+          className: plotClass,
+          children: [
+            /* @__PURE__ */ jsxs("svg", { width: "100%", height: svgHeight, viewBox: `0 0 ${width} ${svgHeight}`, className: "block overflow-visible", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("g", { "data-slot": "chart-value-axis", children: ticks.map((tick, index) => {
+                const at = horizontal ? plotLeft + scale(tick) : plotBottom - scale(tick);
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  horizontal ? /* @__PURE__ */ jsx("line", { x1: at, x2: at, y1: plotTop, y2: plotBottom, stroke: "var(--border)" }) : /* @__PURE__ */ jsx("line", { x1: plotLeft, x2: plotRight, y1: at, y2: at, stroke: "var(--border)" }),
+                  /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: horizontal ? at : plotLeft - 8,
+                      y: horizontal ? plotBottom + 16 : at,
+                      dy: horizontal ? void 0 : "0.32em",
+                      textAnchor: horizontal ? index === ticks.length - 1 ? "end" : "middle" : "end",
+                      fontSize: TICK_FONT,
+                      fill: "var(--muted-foreground)",
+                      style: { fontVariantNumeric: "tabular-nums" },
+                      children: tickLabels[index]
+                    }
+                  )
+                ] }, tick);
+              }) }),
+              /* @__PURE__ */ jsx("g", { "data-slot": "chart-bars", children: bars }),
+              /* @__PURE__ */ jsx("g", { "data-slot": "chart-category-axis", children: labelIndices.map((index) => /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: horizontal ? plotLeft - 8 : plotLeft + (index + 0.5) * bandSize,
+                  y: horizontal ? plotTop + (index + 0.5) * bandSize : plotBottom + 18,
+                  dy: horizontal ? "0.32em" : void 0,
+                  textAnchor: horizontal ? "end" : "middle",
+                  fontSize: TICK_FONT,
+                  fill: "var(--muted-foreground)",
+                  children: data[index].label
+                },
+                data[index].key
+              )) })
+            ] }),
+            activeDatum && /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                title: activeDatum.detail ?? activeDatum.label,
+                rows: rowsAt(active),
+                x: tooltipAnchor.x,
+                y: tooltipAnchor.y,
+                width
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  BarChart
+};

package/dist/web/chunk-XMUXOKIP.js

@@ -0,0 +1,159 @@
+"use client";
+import {
+  MENU_VISIBLE_ITEMS,
+  MenuNoResults,
+  MenuSearch,
+  countMenuItems,
+  filterMenuItems,
+  isElementOf
+} from "./chunk-CBE7BT3M.js";
+import {
+  fieldSurface
+} from "./chunk-TKRMGN7J.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Check,
+  ExpandMore
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/primitives/select.tsx
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React.forwardRef(({ className, children, compact = false, hug = false, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "group flex items-center justify-between transition-all outline-none",
+      compact ? [
+        "w-auto gap-1 rounded-2xl bg-foreground/[0.09] px-2 py-1.5 text-caption leading-none shadow-raised backdrop-blur-md",
+        "hover-gradient-violet data-[state=open]:bg-secondary/20 data-[state=open]:text-secondary-content"
+      ] : [
+        hug ? "w-auto" : "w-full",
+        "gap-3 px-4 py-3 text-left text-body",
+        fieldSurface,
+        "data-[state=open]:ring-primary/50"
+      ],
+      "focus:ring-1 focus:ring-primary/50",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+        IconGlyph,
+        {
+          glyph: ExpandMore,
+          className: cn(
+            "shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180",
+            compact ? "text-icon-xs text-foreground/55 group-data-[state=open]:text-secondary-content" : "text-icon-lg text-muted-foreground group-hover:text-secondary-content group-data-[state=open]:text-secondary-content"
+          )
+        }
+      ) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SELECT_MAX_HEIGHT = "max-h-[204px]";
+var isSelectItem = (element) => isElementOf(SelectItem)(element);
+function SelectBody({ children }) {
+  const [query, setQuery] = React.useState("");
+  const searchable = countMenuItems(children, isSelectItem) > MENU_VISIBLE_ITEMS;
+  const searching = searchable && query.trim() !== "";
+  const shown = searching ? filterMenuItems(children, isSelectItem, query) : children;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    searchable && /* @__PURE__ */ jsx(MenuSearch, { value: query, onChange: setQuery }),
+    /* @__PURE__ */ jsxs(
+      ScrollArea,
+      {
+        className: searchable ? "-mr-1.5" : void 0,
+        viewportClassName: searchable ? cn(SELECT_MAX_HEIGHT, "pr-1.5") : void 0,
+        children: [
+          /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { style: { overflow: "visible" }, children: shown }),
+          searching && React.Children.count(shown) === 0 && /* @__PURE__ */ jsx(MenuNoResults, {})
+        ]
+      }
+    )
+  ] });
+}
+var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative min-w-[8rem] overflow-hidden rounded-2xl bg-popover/95 bg-gradient-card p-2 shadow-popover backdrop-blur",
+      "z-[var(--z-popover)]",
+      position === "popper" && "w-max min-w-[var(--radix-select-trigger-width)]",
+      className
+    ),
+    position,
+    sideOffset: 8,
+    ...props,
+    children: /* @__PURE__ */ jsx(SelectBody, { children })
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-3 py-1.5 text-caption font-semibold text-secondary-content/80", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-pointer whitespace-nowrap select-none items-center justify-between rounded-xl px-3 py-3 text-body outline-none transition-colors",
+      "data-[highlighted]:bg-secondary/15",
+      "data-[state=checked]:bg-primary/10 data-[state=checked]:font-semibold data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-primary/40 data-[state=checked]:text-brand",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-icon-xxs text-muted-foreground", children: description })
+      ] }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: "text-icon-md text-brand" }) })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator
+};