kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-O4IIYGDL.js

@@ -0,0 +1,70 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  isIconName
+} from "./chunk-VYQHGSK6.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  ChevronRight
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/setting-item.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingItem({
+  icon,
+  iconSrc,
+  iconAlt,
+  title,
+  description,
+  value,
+  onClick,
+  showChevron = true,
+  className,
+  iconColor = "text-secondary-content"
+}) {
+  const isClickable = !!onClick;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "p-5 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card-secondary transition-all duration-200 group",
+        isClickable && "cursor-pointer hover:shadow-card-hover-soft hover:-translate-y-0.5 active:scale-[0.98]",
+        className
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+          (icon || iconSrc) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-secondary/15 group-hover-gradient-violet group-hover:shadow-glow-violet-faint group-hover:scale-105 transition-all",
+                iconColor
+              ),
+              children: iconSrc ? /* @__PURE__ */ jsx("img", { src: iconSrc, alt: iconAlt ?? title, className: "size-5 object-contain" }) : isIconName(icon) ? /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-icon-xl" }) : typeof icon === "string" ? null : icon
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-bold text-body text-foreground tracking-wide", children: title }),
+            description && /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground mt-0.5 font-medium", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+          value && /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground font-mono", children: value }),
+          showChevron && isClickable && /* @__PURE__ */ jsx(IconGlyph, { glyph: ChevronRight, className: "text-icon-md text-muted-foreground group-hover:scale-110 group-hover:text-secondary-content transition-all" })
+        ] })
+      ] })
+    }
+  );
+}
+
+export {
+  SettingItem
+};

package/dist/web/chunk-OI7WX7NE.js

@@ -0,0 +1,17 @@
+"use client";
+
+// src/web/icons/filled.tsx
+import { jsx } from "react/jsx-runtime";
+var AccountBalanceWalletFilled = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 128 128", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx("path", { d: "M111.954 95.9607V101.292C111.954 107.156 107.156 111.954 101.292 111.954H26.6557C20.7381 111.954 15.9934 107.156 15.9934 101.292V26.6557C15.9934 20.7915 20.7381 15.9934 26.6557 15.9934H101.292C107.156 15.9934 111.954 20.7915 111.954 26.6557V31.9869H63.9738C58.0562 31.9869 53.3115 36.7849 53.3115 42.6492V85.2984C53.3115 91.1627 58.0562 95.9607 63.9738 95.9607H111.954ZM63.9738 85.2984H117.285V42.6492H63.9738V85.2984ZM85.2984 71.9705C80.8735 71.9705 77.3016 68.3986 77.3016 63.9738C77.3016 59.5489 80.8735 55.9771 85.2984 55.9771C89.7232 55.9771 93.2951 59.5489 93.2951 63.9738C93.2951 68.3986 89.7232 71.9705 85.2984 71.9705Z" }) });
+var CheckCircleFilled = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 128 128", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx("path", { d: "M63.9739 10.6624C34.5459 10.6624 10.6624 34.5459 10.6624 63.9739C10.6624 93.4018 34.5459 117.285 63.9739 117.285C93.4018 117.285 117.285 93.4018 117.285 63.9739C117.285 34.5459 93.4018 10.6624 63.9739 10.6624ZM53.3116 90.6296L26.6558 63.9739L34.1727 56.4569L53.3116 75.5424L93.775 35.079L101.292 42.6493L53.3116 90.6296Z" }) });
+var HistoryFilled = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 128 128", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx("path", { d: "M69.3049 15.9934C42.809 15.9934 21.3245 37.4779 21.3245 63.9738H5.33105L26.0692 84.7119L26.4424 85.4583L47.9803 63.9738H31.9868C31.9868 43.3422 48.6733 26.6557 69.3049 26.6557C89.9364 26.6557 106.623 43.3422 106.623 63.9738C106.623 84.6053 89.9364 101.292 69.3049 101.292C59.0157 101.292 49.6862 97.0802 42.969 90.3096L35.3987 97.8799C44.0885 106.57 56.0303 111.954 69.3049 111.954C95.8007 111.954 117.285 90.4696 117.285 63.9738C117.285 37.4779 95.8007 15.9934 69.3049 15.9934ZM63.9737 42.6492V69.3049L86.791 82.846L90.6295 76.3953L71.9704 65.3065V42.6492H63.9737Z" }) });
+var SettingsFilled = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 128 128", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx("path", { d: "M102.038 68.9852C102.251 67.3859 102.358 65.7332 102.358 63.974C102.358 62.268 102.251 60.562 101.985 58.9627L112.807 50.5395C113.767 49.7931 114.033 48.3537 113.447 47.2875L103.211 29.588C102.571 28.4152 101.238 28.042 100.066 28.4152L87.3241 33.5331C84.6585 31.5073 81.833 29.8013 78.6877 28.5218L76.7684 14.9807C76.5552 13.7012 75.489 12.7949 74.2095 12.7949H53.7379C52.4584 12.7949 51.4455 13.7012 51.2322 14.9807L49.313 28.5218C46.1676 29.8013 43.2888 31.5606 40.6766 33.5331L27.9351 28.4152C26.7623 27.9887 25.4295 28.4152 24.7897 29.588L14.6072 47.2875C13.9675 48.407 14.1807 49.7931 15.247 50.5395L26.0692 58.9627C25.8027 60.562 25.5894 62.3213 25.5894 63.974C25.5894 65.6266 25.696 67.3859 25.9626 68.9852L15.1404 77.4085C14.1807 78.1548 13.9142 79.5942 14.5006 80.6605L24.7364 98.3599C25.3762 99.5327 26.7089 99.9059 27.8818 99.5327L40.6232 94.4148C43.2888 96.4407 46.1143 98.1466 49.2597 99.4261L51.1789 112.967C51.4455 114.247 52.4584 115.153 53.7379 115.153H74.2095C75.489 115.153 76.5552 114.247 76.7151 112.967L78.6343 99.4261C81.7797 98.1466 84.6586 96.4407 87.2708 94.4148L100.012 99.5327C101.185 99.9592 102.518 99.5327 103.158 98.3599L113.393 80.6605C114.033 79.4876 113.767 78.1548 112.754 77.4085L102.038 68.9852ZM63.9737 83.1661C53.418 83.1661 44.7815 74.5296 44.7815 63.974C44.7815 53.4183 53.418 44.7818 63.9737 44.7818C74.5294 44.7818 83.1658 53.4183 83.1658 63.974C83.1658 74.5296 74.5294 83.1661 63.9737 83.1661Z" }) });
+var SwapHorizFilled = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 128 128", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx("path", { d: "M37.2648 58.6427L15.9935 79.9673L37.2648 101.292V85.2984H74.6361V74.6361H37.2648V58.6427ZM111.954 47.9804L90.6829 26.6558V42.6492H53.3115V53.3115H90.6829V69.305L111.954 47.9804Z" }) });
+
+export {
+  AccountBalanceWalletFilled,
+  CheckCircleFilled,
+  HistoryFilled,
+  SettingsFilled,
+  SwapHorizFilled
+};

package/dist/web/chunk-OWSKP527.js

@@ -0,0 +1,80 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-caption font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary bg-gradient-primary text-primary-foreground shadow-button-primary hover:brightness-110 hover:shadow-button-primary-hover disabled:shadow-none",
+        destructive: "bg-destructive bg-gradient-destructive text-white shadow-raised hover:brightness-110",
+        outline: "border border-primary/50 bg-transparent text-brand hover:bg-primary/5 hover:border-primary hover:shadow-button-outline-hover hover:brightness-115",
+        secondary: "bg-secondary bg-gradient-violet text-secondary-foreground shadow-button-violet hover:brightness-110 hover:shadow-glow-violet disabled:shadow-none",
+        ghost: "text-brand hover:bg-primary/10 hover:brightness-115 hover:[&_span]:brightness-115 active:bg-primary/15 active:brightness-100",
+        link: "text-brand underline-offset-4 hover:underline",
+        glow: "bg-primary bg-gradient-primary text-primary-foreground shadow-glow-primary hover:shadow-glow-primary-strong",
+        // Flat: one violet fill, a stronger one on hover, no gradient.
+        surface: "bg-secondary/15 text-secondary-content hover:bg-secondary/25 hover:shadow-button-surface-hover active:bg-secondary/30",
+        cta: "w-full bg-primary bg-gradient-primary text-primary-foreground font-bold rounded-2xl shadow-button-primary hover:brightness-110 hover:shadow-button-primary-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
+        "cta-gradient": "w-full bg-secondary bg-gradient-brand-dark text-white font-extrabold rounded-2xl shadow-glow-brand hover:brightness-115 hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-40 disabled:shadow-none disabled:cursor-not-allowed",
+        "danger-subtle": "bg-danger/10 text-danger-fg font-bold rounded-xl hover:bg-danger/15 hover:brightness-115",
+        // danger-subtle without its resting tint: the danger glyph alone, tinted on hover.
+        "danger-quiet": "text-danger-fg hover:bg-danger/10 active:bg-danger/15",
+        hyperlink: "group text-muted-foreground underline underline-offset-2 hover:text-foreground hover:decoration-primary hover:[&_.icon]:text-brand bg-transparent font-normal",
+        // Hierarchy variants — primary/secondary/tertiary action emphasis.
+        // Pair with size="lg" or size="cta" for full-bleed buttons.
+        h1: "w-full bg-primary bg-gradient-primary text-primary-foreground font-bold rounded-2xl shadow-button-primary hover:brightness-110 hover:shadow-button-primary-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
+        h2: "w-full bg-secondary/15 text-secondary-content font-semibold rounded-xl hover:bg-secondary/25 hover:shadow-button-surface-hover active:bg-secondary/30",
+        h3: "text-brand font-semibold rounded-lg hover:bg-primary/10 active:bg-primary/15",
+        // The icon-only default: a muted glyph that turns violet on the violet hover.
+        quiet: "text-muted-foreground hover-gradient-violet hover:text-secondary-content"
+      },
+      size: {
+        default: "h-11 px-5 py-2",
+        xs: "h-7 rounded-lg px-2 text-caption",
+        sm: "h-9 rounded-lg px-3 text-caption",
+        lg: "h-14 rounded-xl px-8 text-body font-bold",
+        xl: "h-16 rounded-2xl px-10 text-subhead font-bold",
+        cta: "h-14 py-4 px-6 text-subhead",
+        "cta-lg": "h-[60px] py-5 px-6 text-subhead",
+        // Icon-only: a square that sizes its own glyph, so callers pass a bare <Icon>.
+        // sm 32 / md 40 / lg 50 px (7 / 9 / 11 spacing steps) — inline row actions, toolbar and close, headers.
+        "icon-sm": "size-7 rounded-lg p-0 [&_svg]:text-icon-md",
+        icon: "size-9 rounded-xl p-0 [&_svg]:text-icon-lg",
+        "icon-lg": "size-11 rounded-xl p-0 [&_svg]:text-icon-xl",
+        /** @deprecated The icon steps stop at `icon-lg`; this is the same size. */
+        "icon-xl": "size-11 rounded-xl p-0 [&_svg]:text-icon-xl"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export {
+  buttonVariants,
+  Button
+};

package/dist/web/chunk-OX3J3FYX.js

@@ -0,0 +1,64 @@
+"use client";
+import {
+  DottedLeader
+} from "./chunk-CXMCWSWC.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/summary-rows.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var valueTone = {
+  default: "text-foreground",
+  primary: "text-brand",
+  warning: "text-warning-fg",
+  danger: "text-danger-fg",
+  success: "text-success-fg",
+  muted: "text-muted-foreground"
+};
+var rowClass = "flex items-center gap-3 py-1";
+function SummaryRows({ rows, as = "dl", className }) {
+  const List = as;
+  const isDl = as === "dl";
+  const Label = isDl ? "dt" : "span";
+  const Value = isDl ? "dd" : "div";
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      "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__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Label, { className: "shrink-0 text-caption text-muted-foreground", children: row.label }),
+          /* @__PURE__ */ jsx(DottedLeader, {}),
+          /* @__PURE__ */ jsxs(Value, { className: "m-0 flex min-w-0 max-w-[65%] items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "truncate tabular-nums",
+                  row.emphasis ? "text-body font-bold" : muted ? "text-caption font-normal" : "text-body font-medium",
+                  row.mono && "font-mono text-caption",
+                  valueTone[row.tone ?? "default"]
+                ),
+                children: row.value
+              }
+            ),
+            row.hint && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xxs text-muted-foreground", children: row.hint })
+          ] })
+        ] });
+        const rowProps = {
+          "data-slot": "summary-row",
+          "data-emphasis": row.emphasis ? "true" : void 0,
+          className: rowClass
+        };
+        return isDl ? /* @__PURE__ */ jsx("div", { ...rowProps, children: content }, index) : /* @__PURE__ */ jsx("li", { ...rowProps, children: content }, index);
+      })
+    }
+  );
+}
+
+export {
+  SummaryRows
+};

package/dist/web/chunk-OZXDXNMR.js

@@ -0,0 +1,110 @@
+"use client";
+import {
+  ChartFrame,
+  defaultChartFormat
+} from "./chunk-CXLGQSHM.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/charts/bar-list.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BarList({
+  items,
+  label,
+  formatValue = defaultChartFormat,
+  max,
+  sort = "none",
+  showPercent = true,
+  labelWidth,
+  empty,
+  className,
+  ...head
+}) {
+  if (items.length === 0) return /* @__PURE__ */ jsx(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);
+  const percentOf = (item) => formatPercent(item.percent ?? (sum > 0 ? Math.max(0, item.value) / sum : 0));
+  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__ */ jsx(
+    "ol",
+    {
+      "data-slot": "bar-list",
+      "aria-label": label,
+      className: cn(
+        "m-0 grid list-none gap-y-3 p-0 text-caption sm:items-center sm:gap-x-3 sm:gap-y-2",
+        "sm:[grid-template-columns:var(--bar-list-columns)]",
+        // Under a head, a little more air than the plots' own top margin.
+        framed && "pt-2",
+        className
+      ),
+      style: { "--bar-list-columns": wideColumns },
+      children: rows.map((item) => {
+        const share = Math.max(0, item.value) / top;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-slot": "bar-list-row",
+            className: cn(
+              // Narrow: label and value on one line, the bar under them.
+              "grid items-baseline gap-x-3 gap-y-1.5",
+              showPercent ? "grid-cols-[minmax(0,1fr)_auto_auto]" : "grid-cols-[minmax(0,1fr)_auto]",
+              "sm:col-span-full sm:grid-cols-subgrid sm:items-center sm:gap-y-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate text-muted-foreground", !labelWidth && "sm:max-w-[10rem]"), children: item.label }),
+              /* @__PURE__ */ 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__ */ jsx(
+                    "span",
+                    {
+                      className: "block h-full rounded-full bg-primary bg-gradient-primary",
+                      style: {
+                        width: `${share * 100}%`,
+                        // A non-zero value keeps a sliver, so it never reads as zero.
+                        minWidth: item.value > 0 ? 4 : 0
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-right font-semibold tabular-nums text-foreground", children: item.valueText ?? formatValue(item.value) }),
+              showPercent && /* @__PURE__ */ jsx("span", { className: "text-right tabular-nums text-muted-foreground", children: percentOf(item) })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+  if (!framed) return list;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...head,
+      label,
+      table: {
+        columns: showPercent ? ["Item", "Value", "Percent"] : ["Item", "Value"],
+        rows: rows.map((item) => {
+          const value = item.valueText ?? formatValue(item.value);
+          return showPercent ? [item.label, value, percentOf(item)] : [item.label, value];
+        })
+      },
+      children: list
+    }
+  );
+}
+function formatPercent(fraction) {
+  if (fraction > 0 && fraction < 5e-3) return "<1%";
+  return `${Math.round(fraction * 100)}%`;
+}
+
+export {
+  BarList
+};

package/dist/web/chunk-PIXLIWSO.js

@@ -0,0 +1,62 @@
+"use client";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-Q2IXLUSM.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/disclosure-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DisclosureCard({
+  title,
+  children,
+  open,
+  onOpenChange,
+  defaultOpen,
+  icon,
+  className,
+  triggerClassName,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open,
+      onOpenChange,
+      defaultOpen,
+      "data-slot": "disclosure-card",
+      className: cn(
+        "group/disclosure overflow-hidden rounded-xl bg-surface-inset/40 shadow-raised transition-all",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          CollapsibleTrigger,
+          {
+            type: "button",
+            className: cn(
+              "flex w-full items-center justify-between gap-2 px-3 py-2 text-left hover-gradient-violet focus-visible:ring-inset",
+              triggerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                icon,
+                /* @__PURE__ */ jsx("span", { className: "truncate text-caption font-bold text-foreground", children: title })
+              ] }),
+              /* @__PURE__ */ jsx(CollapsibleChevron, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(CollapsibleContent, { className: cn("px-3 pb-3 pt-1", contentClassName), children })
+      ]
+    }
+  );
+}
+
+export {
+  DisclosureCard
+};

package/dist/web/chunk-PMGIJMRO.js

@@ -0,0 +1,207 @@
+"use client";
+
+// src/web/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+// src/tokens/radius.ts
+var radius = {
+  none: "0px",
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  "2xl": "16px",
+  "3xl": "24px",
+  "4xl": "32px",
+  full: "9999px",
+  // Semantic aliases
+  card: "16px",
+  panel: "24px",
+  nav: "32px",
+  pill: "9999px"
+};
+
+// src/tokens/shadows.ts
+var ink = (alpha) => `rgb(var(--app-shadow) / calc(${alpha} * var(--app-shadow-strength)))`;
+var rim = "inset 0 1px 0 0 rgb(255 255 255 / var(--app-rim-alpha))";
+var shadow = {
+  glow: "0 0 20px rgba(10, 10, 10, 0.15)",
+  glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
+  glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
+  glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)",
+  /** Header separation shadow for sticky app chrome. */
+  header: "0 10px 24px rgba(7, 4, 22, 0.35), 0 1px 0 rgba(164, 138, 255, 0.08)",
+  /** Brand green glow — drives all primary CTA / focus halos. */
+  glowPrimarySoft: "0 0 8px rgba(21, 233, 154, 0.5)",
+  /** A selected option in a row of options: the green halo, held down so the row stays calm. */
+  glowPrimaryFaint: "0 0 6px rgba(21, 233, 154, 0.22)",
+  glowPrimary: "0 0 30px rgba(21, 233, 154, 0.45)",
+  glowPrimaryStrong: "0 0 40px rgba(21, 233, 154, 0.55)",
+  /** Brand violet glow — selected / protocol / active accents. */
+  glowVioletSoft: "0 0 12px rgba(111, 50, 255, 0.45)",
+  /** The violet halo held down — an icon tile lit by its row's hover. */
+  glowVioletFaint: "0 0 8px rgba(111, 50, 255, 0.25)",
+  glowViolet: "0 0 30px rgba(111, 50, 255, 0.5)",
+  /** Both accents at once — green left, violet right. Brand moments only. */
+  glowBrand: "-10px 0 32px -8px rgba(21, 233, 154, 0.45), 10px 0 32px -8px rgba(111, 50, 255, 0.55)",
+  /** Resting card: soft violet-black drop. No rim light: the glass edge is the
+   *  gradient ring kaleido-ui/css draws on every `.shadow-card`, and an inset
+   *  rim under it would taper into a second line round the corners. */
+  card: `0 2px 6px -1px ${ink(0.45)}, 0 12px 32px -12px ${ink(0.7)}`,
+  /** Secondary card: the resting card's drop under its own name, so the glass
+   *  edge kaleido-ui/css draws on `.shadow-card` stays off it. */
+  cardSecondary: `0 2px 6px -1px ${ink(0.45)}, 0 12px 32px -12px ${ink(0.7)}`,
+  /** Hovered / lifted card: deeper drop with a violet under-glow. */
+  cardHover: `0 4px 12px -2px ${ink(0.5)}, 0 20px 44px -14px rgba(111, 50, 255, 0.26)`,
+  /** Hover on a settings-style card: a soft violet under-glow, no deeper drop. */
+  cardHoverSoft: "0 6px 20px -10px rgba(111, 50, 255, 0.3)",
+  /** Small raised control or row inside a card (tiles, chips, inputs). */
+  raised: `${rim}, 0 2px 4px -1px ${ink(0.4)}, 0 6px 14px -6px ${ink(0.55)}`,
+  /** Primary (green) button: coloured drop, no edge line. */
+  buttonPrimary: "0 6px 14px -8px rgba(21, 233, 154, 0.4)",
+  /** Primary button on hover: its resting drop, plus a halo a notch under `glowPrimary`. */
+  buttonPrimaryHover: "0 6px 14px -8px rgba(21, 233, 154, 0.4), 0 0 14px rgba(21, 233, 154, 0.16)",
+  /** Violet button: coloured drop, no edge line. */
+  buttonViolet: "0 8px 22px -8px rgba(111, 50, 255, 0.75)",
+  /** Outline button on hover: the soft green halo round its border. */
+  buttonOutlineHover: "0 0 8px rgba(21, 233, 154, 0.5)",
+  /** Surface (violet) button on hover: the soft violet halo round its ring. */
+  buttonSurfaceHover: "0 0 12px rgba(111, 50, 255, 0.45)",
+  /** The current row of a nav / drawer: the green halo round its ring. */
+  navActive: "0 0 8px rgba(21, 233, 154, 0.5)",
+  /** Floating popover / modal elevation on dark surfaces. */
+  popover: "0 0 0 1px rgba(164, 138, 255, 0.10), 0 24px 60px -12px rgba(7, 4, 22, 0.8), 0 0 48px -16px rgba(111, 50, 255, 0.35)",
+  /** Toast / inline-notification elevation. */
+  toast: "0 0 0 1px rgba(164, 138, 255, 0.10), 0 12px 36px -8px rgba(7, 4, 22, 0.6)"
+};
+var lightInk = (alpha) => `rgba(20, 20, 43, ${alpha})`;
+var shadowLight = {
+  glow: `0 0 20px ${lightInk(0.08)}`,
+  glowStrong: `0 0 30px ${lightInk(0.12)}`,
+  glowSubtle: `0 0 15px ${lightInk(0.06)}`,
+  glowAccent: `0 4px 30px ${lightInk(0.1)}`,
+  header: `0 1px 0 ${lightInk(0.06)}, 0 6px 16px -10px ${lightInk(0.14)}`,
+  glowPrimarySoft: "0 0 0 3px rgba(23, 181, 129, 0.16), 0 2px 8px -2px rgba(23, 181, 129, 0.25)",
+  glowPrimaryFaint: "0 0 0 2px rgba(23, 181, 129, 0.1), 0 2px 6px -2px rgba(23, 181, 129, 0.16)",
+  glowPrimary: "0 6px 20px -6px rgba(23, 181, 129, 0.4)",
+  glowPrimaryStrong: "0 10px 28px -8px rgba(23, 181, 129, 0.5)",
+  glowVioletSoft: "0 0 0 3px rgba(111, 50, 255, 0.12), 0 2px 8px -2px rgba(111, 50, 255, 0.2)",
+  glowVioletFaint: "0 0 0 2px rgba(111, 50, 255, 0.1), 0 2px 6px -2px rgba(111, 50, 255, 0.14)",
+  glowViolet: "0 6px 20px -6px rgba(111, 50, 255, 0.32)",
+  glowBrand: "-8px 6px 24px -10px rgba(23, 181, 129, 0.4), 8px 6px 24px -10px rgba(111, 50, 255, 0.36)",
+  card: `0 1px 2px ${lightInk(0.05)}, 0 4px 12px -4px ${lightInk(0.08)}, 0 14px 32px -16px ${lightInk(0.14)}`,
+  cardSecondary: `0 1px 2px ${lightInk(0.05)}, 0 4px 12px -4px ${lightInk(0.08)}, 0 14px 32px -16px ${lightInk(0.14)}`,
+  cardHover: `0 2px 4px ${lightInk(0.05)}, 0 10px 24px -8px ${lightInk(0.12)}, 0 22px 44px -18px rgba(111, 50, 255, 0.18)`,
+  cardHoverSoft: "0 4px 14px -8px rgba(111, 50, 255, 0.16)",
+  raised: `0 1px 2px ${lightInk(0.08)}, 0 3px 8px -3px ${lightInk(0.12)}`,
+  buttonPrimary: "0 1px 2px rgba(13, 122, 88, 0.18), 0 4px 10px -6px rgba(23, 181, 129, 0.32)",
+  buttonPrimaryHover: "0 1px 2px rgba(13, 122, 88, 0.18), 0 4px 10px -6px rgba(23, 181, 129, 0.32), 0 3px 10px -6px rgba(23, 181, 129, 0.2)",
+  buttonViolet: "0 1px 2px rgba(55, 20, 136, 0.22), 0 6px 14px -6px rgba(111, 50, 255, 0.45)",
+  // A 1px halo, not glowPrimarySoft's 3px: on white that ring reads as a thick border.
+  buttonOutlineHover: "0 0 0 1px rgba(23, 181, 129, 0.12), 0 2px 8px -3px rgba(23, 181, 129, 0.25)",
+  // Likewise a 1px halo, where glowVioletSoft's 3px reads as a thick border.
+  buttonSurfaceHover: "0 2px 8px -3px rgba(111, 50, 255, 0.22)",
+  // The row already carries a 1px ring: the halo is a drop only, or the two
+  // stack into the thick green border the light theme showed.
+  navActive: "0 2px 8px -3px rgba(23, 181, 129, 0.3)",
+  popover: `0 0 0 1px ${lightInk(0.06)}, 0 4px 10px -4px ${lightInk(0.08)}, 0 18px 40px -14px ${lightInk(0.2)}`,
+  toast: `0 0 0 1px ${lightInk(0.06)}, 0 10px 28px -10px ${lightInk(0.2)}`
+};
+
+// src/tokens/typography.ts
+var typeScale = {
+  mini: ["10px", "13px"],
+  xxs: ["11px", "15px"],
+  tiny: ["12px", "17px"],
+  caption: ["14px", "20px"],
+  body: ["16px", "24px"],
+  subhead: ["18px", "26px"],
+  title: ["22px", "30px"],
+  headline: ["30px", "36px"],
+  display: ["38px", "44px"]
+};
+var letterSpacing = {
+  eyebrow: "0.18em",
+  eyebrowWide: "0.22em"
+};
+var iconSize = {
+  xxs: "11px",
+  // dense inline status / timestamp icons
+  xs: "13px",
+  sm: "14px",
+  md: "16px",
+  // default
+  lg: "18px",
+  xl: "20px",
+  "2xl": "24px",
+  "3xl": "28px",
+  "4xl": "32px",
+  "5xl": "40px",
+  "6xl": "64px"
+  // hero / success / error glyphs
+};
+
+// src/web/utils/cn.ts
+var camelToKebab = (value) => value.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`);
+var fontSizes = [
+  ...Object.keys(typeScale),
+  ...Object.keys(iconSize).map((key) => `icon-${key}`)
+];
+var radii = Object.keys(radius).filter(
+  (key) => ["card", "panel", "nav", "pill"].includes(key)
+);
+var shadows = Object.keys(shadow).map(camelToKebab);
+var roundedGroups = [
+  "rounded",
+  "rounded-s",
+  "rounded-e",
+  "rounded-t",
+  "rounded-r",
+  "rounded-b",
+  "rounded-l",
+  "rounded-ss",
+  "rounded-se",
+  "rounded-ee",
+  "rounded-es",
+  "rounded-tl",
+  "rounded-tr",
+  "rounded-br",
+  "rounded-bl"
+];
+var bgImages = [
+  "gradient-brand",
+  "gradient-brand-dark",
+  "gradient-primary",
+  "gradient-violet",
+  "gradient-card",
+  "gradient-card-hero",
+  "gradient-active",
+  "gradient-headline",
+  "page-radial",
+  "page-brand",
+  "card-sheen"
+];
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: fontSizes }],
+      "bg-image": [{ bg: bgImages }],
+      "text-gradient": ["text-gradient-brand"],
+      "border-gradient": ["border-gradient-brand"],
+      tracking: [{ tracking: Object.keys(letterSpacing).map(camelToKebab) }],
+      shadow: [{ shadow: shadows }],
+      ...Object.fromEntries(
+        roundedGroups.map((group) => [group, [{ [group]: radii }]])
+      )
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};

package/dist/web/chunk-Q2IXLUSM.js

@@ -0,0 +1,56 @@
+"use client";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  ExpandMore
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/primitives/collapsible.tsx
+import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { jsx } from "react/jsx-runtime";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CollapsiblePrimitive.Trigger,
+  {
+    ref,
+    "data-slot": "collapsible-trigger",
+    className: cn("group/collapsible transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft", className),
+    ...props
+  }
+));
+CollapsibleTrigger.displayName = CollapsiblePrimitive.Trigger.displayName;
+var CollapsibleContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CollapsiblePrimitive.Content,
+  {
+    ref,
+    "data-slot": "collapsible-content",
+    className: cn("data-[state=open]:animate-fade-in motion-reduce:animate-none", className),
+    ...props
+  }
+));
+CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName;
+function CollapsibleChevron({ className }) {
+  return /* @__PURE__ */ jsx(
+    IconGlyph,
+    {
+      glyph: ExpandMore,
+      "aria-hidden": "true",
+      className: cn(
+        "shrink-0 text-icon-md text-muted-foreground transition-transform duration-200 group-hover/collapsible:text-secondary-content group-data-[state=open]/collapsible:rotate-180 group-data-[state=open]/collapsible:text-secondary-content motion-reduce:transition-none",
+        className
+      )
+    }
+  );
+}
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleChevron
+};