kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-CRMLYZIX.js

@@ -0,0 +1,35 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/popover.tsx
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverClose = PopoverPrimitive.Close;
+var floatingSurface = "z-50 rounded-2xl bg-popover bg-gradient-card-hero text-popover-foreground shadow-popover outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-[0.98] data-[state=closed]:zoom-out-[0.98] motion-reduce:animate-none";
+var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    "data-slot": "popover-content",
+    align,
+    sideOffset,
+    className: cn(floatingSurface, "w-72 max-w-[calc(100vw-2rem)] p-4 text-caption", className),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverClose,
+  floatingSurface,
+  PopoverContent
+};

package/dist/web/chunk-CXLGQSHM.js

@@ -0,0 +1,417 @@
+"use client";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./chunk-DUAFJ3CX.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./chunk-UHXOPILM.js";
+import {
+  FilterChipGroup
+} from "./chunk-HVKSBEZN.js";
+import {
+  formatAmount
+} from "./chunk-VM6AGMYO.js";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  BarChart,
+  Check,
+  Event,
+  TableRows,
+  Tune
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/charts/core.tsx
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/tokens/chart.ts
+var chartSeries = {
+  /** green, violet, azzurro, then yellow, magenta, orange */
+  dark: ["#17b581", "#8374da", "#179fd4", "#b3880f", "#db589e", "#de6907"],
+  light: ["#17b581", "#6851c3", "#0f9cd0", "#dea805", "#c34189", "#fe904d"]
+};
+var chartSeriesLimit = chartSeries.dark.length;
+var chartScatterSeriesLimit = 3;
+
+// src/web/components/charts/core.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var seriesColor = (slot) => `var(--series-${slot % chartSeriesLimit + 1})`;
+var defaultChartFormat = (value) => formatAmount(value);
+var TICK_FONT = 11;
+var axisTextWidth = (labels) => Math.max(0, ...labels.map((label) => label.length)) * TICK_FONT * 0.62;
+function chartValueTicks(max, { integer = false } = {}) {
+  if (!Number.isFinite(max) || max <= 0) return [0];
+  const rough = max / 4;
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  let step = [1, 2, 5, 10].map((m) => m * magnitude).find((s) => s >= rough) ?? 10 * magnitude;
+  if (integer) step = Math.max(1, Math.round(step));
+  const ticks = [0];
+  for (let value = step; value < max - max * 0.15; value += step) {
+    ticks.push(Number(value.toPrecision(12)));
+  }
+  ticks.push(max);
+  return ticks;
+}
+function chartLabelIndices(count, maxLabels) {
+  if (count <= 0) return [];
+  if (count === 1) return [0];
+  const slots = Math.max(2, Math.min(count, Math.floor(maxLabels)));
+  const indices = /* @__PURE__ */ new Set();
+  for (let slot = 0; slot < slots; slot += 1) {
+    indices.add(Math.round(slot * (count - 1) / (slots - 1)));
+  }
+  return [...indices].sort((a, b) => a - b);
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useChartWidth(fallback = 640) {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(fallback);
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measured = Math.round(element.getBoundingClientRect().width);
+    if (measured > 0) setWidth(measured);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => {
+      const next = Math.round(entry.contentRect.width);
+      if (next > 0) setWidth(next);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+function ChartLegend({
+  items,
+  keyShape = "rect",
+  hidden,
+  onToggle,
+  className
+}) {
+  const visibleCount = items.filter((item) => !hidden?.has(item.id)).length;
+  return /* @__PURE__ */ 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__ */ jsx(LegendSwatch, { color: item.color, shape: keyShape });
+        return /* @__PURE__ */ jsx("li", { className: "flex items-center", children: onToggle ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": !off,
+            disabled: !off && visibleCount <= 1,
+            title: off ? "Show" : "Hide",
+            onClick: () => onToggle(item.id),
+            className: cn(
+              "flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-foreground transition-all hover-gradient-violet focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-default disabled:hover:bg-none",
+              off && "opacity-45 line-through"
+            ),
+            children: [
+              key,
+              item.label
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 px-1.5 py-0.5", children: [
+          key,
+          item.label
+        ] }) }, item.id);
+      })
+    }
+  );
+}
+function useSeriesVisibility(ids) {
+  const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
+  const onToggle = (id) => setHidden((current) => {
+    const next = new Set(current);
+    if (next.has(id)) next.delete(id);
+    else if (ids.filter((other) => !next.has(other)).length > 1) next.add(id);
+    return next;
+  });
+  const hiddenNow = useMemo(() => {
+    const kept = new Set(ids.filter((id) => hidden.has(id)));
+    return ids.length > 0 && kept.size >= ids.length ? /* @__PURE__ */ new Set() : kept;
+  }, [ids, hidden]);
+  return {
+    isVisible: (id) => !hiddenNow.has(id),
+    legend: { hidden: hiddenNow, onToggle }
+  };
+}
+function LegendSwatch({ color, shape = "rect" }) {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: shape === "line" ? /* @__PURE__ */ jsx("line", { x1: "1", x2: "11", y1: "6", y2: "6", stroke: color, strokeWidth: "2", strokeLinecap: "round" }) : shape === "dot" ? /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "4", fill: color }) : /* @__PURE__ */ jsx("rect", { width: "12", height: "12", rx: "3", fill: color }) });
+}
+function ChartTooltip({
+  title,
+  rows,
+  x,
+  y,
+  width,
+  swatch = "line"
+}) {
+  const flip = x > width * 0.6;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      role: "presentation",
+      className: "pointer-events-none absolute z-10 min-w-32 rounded-xl bg-popover bg-gradient-card-hero px-3 py-2 text-caption text-popover-foreground shadow-popover",
+      style: {
+        left: flip ? void 0 : x + 12,
+        right: flip ? width - x + 12 : void 0,
+        top: Math.max(0, y - 8)
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-1 font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ jsx("ul", { className: "m-0 list-none space-y-0.5 p-0", children: rows.map((row) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx(LegendSwatch, { color: row.color, shape: swatch }),
+          /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums text-foreground", children: row.value }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: row.label })
+        ] }, row.id)) })
+      ]
+    }
+  );
+}
+var tooltipText = (title, rows) => [title, ...rows.map((row) => `${row.value} ${typeof row.label === "string" ? row.label : ""}`.trim())].join(" \xB7 ");
+function nextActiveIndex(key, current, count, { vertical = false } = {}) {
+  if (count === 0) return void 0;
+  const at = current ?? -1;
+  const forward = vertical ? "ArrowDown" : "ArrowRight";
+  const back = vertical ? "ArrowUp" : "ArrowLeft";
+  switch (key) {
+    case forward:
+      return Math.min(count - 1, at + 1);
+    case back:
+      return at < 0 ? count - 1 : Math.max(0, at - 1);
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    case "Escape":
+      return null;
+    default:
+      return void 0;
+  }
+}
+var viewOptions = [
+  { value: "chart", ariaLabel: "Chart", icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: BarChart, size: "sm" }) },
+  { value: "table", ariaLabel: "Table", icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: TableRows, size: "sm" }) }
+];
+var tableOption = viewOptions[1];
+function ChartViewToggle({
+  view,
+  onChange,
+  views,
+  chartView,
+  onChartViewChange
+}) {
+  const options = views && views.length > 0 ? [...views.map((v) => ({ value: v.value, ariaLabel: v.label, icon: /* @__PURE__ */ 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__ */ jsx("div", { "data-slot": "chart-view-toggle", className: "shrink-0", children: /* @__PURE__ */ jsx(
+    FilterChipGroup,
+    {
+      variant: "segmented",
+      ariaLabel: "View",
+      options,
+      value,
+      onChange: (next) => {
+        if (next === "table") return onChange("table");
+        onChange("chart");
+        if (views && views.length > 0) onChartViewChange?.(next);
+      }
+    }
+  ) });
+}
+function ChartTimeframeMenu({
+  timeframes,
+  value,
+  onChange
+}) {
+  const current = timeframes.find((t) => t.value === value) ?? timeframes[0];
+  return /* @__PURE__ */ jsx("div", { "data-slot": "chart-timeframe", className: "shrink-0", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(GlyphButton, { icon: Event, label: `Timeframe: ${current.label}` }) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "min-w-28", children: timeframes.map((t) => /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        onSelect: () => onChange(t.value),
+        icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: t.value === current.value ? void 0 : "invisible" }),
+        children: [
+          t.label,
+          t.value === current.value && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (current)" })
+        ]
+      },
+      t.value
+    )) })
+  ] }) });
+}
+function ChartFiltersMenu({
+  filters,
+  active,
+  onChange
+}) {
+  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__ */ jsx("div", { "data-slot": "chart-filters", className: "shrink-0", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      GlyphButton,
+      {
+        icon: Tune,
+        variant: on.length > 0 ? "surface" : "quiet",
+        label: on.length > 0 ? `Filters: ${on.length} on` : "Filters"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "min-w-44", children: filters.map((f) => {
+      const checked = active.includes(f.value);
+      return /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          role: "menuitemcheckbox",
+          "aria-checked": checked,
+          onSelect: (event) => {
+            event.preventDefault();
+            toggle(f.value);
+          },
+          icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: checked ? void 0 : "invisible" }),
+          children: f.label
+        },
+        f.value
+      );
+    }) })
+  ] }) });
+}
+function ChartHeader({
+  title,
+  description,
+  timeframes,
+  timeframe,
+  onTimeframeChange,
+  filters,
+  activeFilters,
+  onFiltersChange,
+  view,
+  onViewChange,
+  views,
+  chartView,
+  onChartViewChange
+}) {
+  const showTimeframes = timeframes && timeframes.length > 0 && onTimeframeChange;
+  const showFilters = filters && filters.length > 0 && onFiltersChange;
+  const hasText = Boolean(title || description);
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          title && /* @__PURE__ */ jsx("h3", { className: "m-0 text-subhead font-semibold leading-none tracking-tight text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "m-0 text-caption text-muted-foreground", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+          (showTimeframes || showFilters) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+            showFilters && /* @__PURE__ */ jsx(ChartFiltersMenu, { filters, active: activeFilters ?? [], onChange: onFiltersChange }),
+            showTimeframes && /* @__PURE__ */ jsx(
+              ChartTimeframeMenu,
+              {
+                timeframes,
+                value: timeframe ?? timeframes[0].value,
+                onChange: onTimeframeChange
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChartViewToggle,
+            {
+              view,
+              onChange: onViewChange,
+              views,
+              chartView,
+              onChartViewChange
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ChartLegendRow({ children }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "chart-legend-row", children });
+}
+function ChartDataTable({ label, table }) {
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx("caption", { className: "sr-only", children: label }),
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: table.columns.map((column, index) => /* @__PURE__ */ jsx(TableHead, { className: index > 0 ? "text-right" : void 0, children: column }, index)) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: table.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx(TableCell, { className: cellIndex > 0 ? "text-right tabular-nums" : void 0, children: cell }, cellIndex)) }, rowIndex)) })
+  ] });
+}
+function ChartFrame({
+  label,
+  scale,
+  legend,
+  table,
+  announcement,
+  children,
+  className,
+  ...head
+}) {
+  const [view, setView] = useState("chart");
+  return /* @__PURE__ */ jsxs("figure", { "data-slot": "chart", "aria-label": label, className: cn("m-0 min-w-0 space-y-3", className), children: [
+    scale && /* @__PURE__ */ jsx("p", { "data-slot": "chart-scale", className: "sr-only", children: scale }),
+    /* @__PURE__ */ jsx(ChartHeader, { ...head, view, onViewChange: setView }),
+    view === "chart" ? children : /* @__PURE__ */ jsx(ChartDataTable, { label, table }),
+    view === "chart" && legend && /* @__PURE__ */ jsx(ChartLegendRow, { children: legend }),
+    /* @__PURE__ */ 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";
+
+export {
+  chartSeriesLimit,
+  chartScatterSeriesLimit,
+  seriesColor,
+  defaultChartFormat,
+  TICK_FONT,
+  axisTextWidth,
+  chartValueTicks,
+  chartLabelIndices,
+  useChartWidth,
+  ChartLegend,
+  useSeriesVisibility,
+  LegendSwatch,
+  ChartTooltip,
+  tooltipText,
+  nextActiveIndex,
+  ChartViewToggle,
+  ChartTimeframeMenu,
+  ChartFiltersMenu,
+  ChartHeader,
+  ChartLegendRow,
+  ChartDataTable,
+  ChartFrame,
+  plotClass
+};

package/dist/web/chunk-CXMCWSWC.js

@@ -0,0 +1,20 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/dotted-leader.tsx
+import { jsx } from "react/jsx-runtime";
+function DottedLeader({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn("min-w-4 flex-1 self-center border-b border-solid border-foreground/15", className)
+    }
+  );
+}
+
+export {
+  DottedLeader
+};

package/dist/web/chunk-CXPYTWEC.js

@@ -0,0 +1,43 @@
+"use client";
+import {
+  CopyButton
+} from "./chunk-GEXPB5CG.js";
+import {
+  HorizontalScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/code-block.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CodeBlock({ code, label = "code", language, className }) {
+  return /* @__PURE__ */ 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__ */ jsx("figcaption", { className: cn("px-4 pt-3 text-muted-foreground", eyebrow), children: language }),
+        /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx(CopyButton, { value: code, label }) }),
+        /* @__PURE__ */ jsx(
+          HorizontalScrollArea,
+          {
+            className: "my-4 ml-4 mr-12",
+            viewportAs: "pre",
+            viewportClassName: "m-0 pb-3 font-mono text-caption text-foreground",
+            children: /* @__PURE__ */ jsx("code", { children: code })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  CodeBlock
+};

package/dist/web/chunk-CZGN7SQH.js

@@ -0,0 +1,41 @@
+"use client";
+import {
+  networkChipVars
+} from "./chunk-EBQ35SOM.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/network-status-chip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function NetworkStatusChip({
+  icon,
+  network,
+  dotClassName,
+  onClick,
+  ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full px-1.5 py-1 shadow-raised transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
+        network ? "kui-network-chip" : "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card hover:bg-accent hover:shadow-glow-violet-soft",
+        className
+      ),
+      style: network ? networkChipVars(network) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
+        dotClassName && /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", dotClassName) })
+      ]
+    }
+  );
+}
+
+export {
+  NetworkStatusChip
+};

package/dist/web/chunk-CZPNI33A.js

@@ -0,0 +1,31 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/status-icon-badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STATUS_UI = {
+  completed: { icon: "check", className: "bg-primary bg-gradient-primary text-primary-foreground" },
+  success: { icon: "check", className: "bg-primary bg-gradient-primary text-primary-foreground" },
+  failed: { icon: "close", className: "bg-danger text-white" },
+  error: { icon: "close", className: "bg-danger text-white" },
+  pending: { icon: "schedule", className: "bg-warning text-background" }
+};
+var FALLBACK_UI = { icon: "remove", className: "bg-muted text-muted-foreground" };
+var iconBadgeOverlayClass = "absolute -bottom-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full ring-2 ring-card";
+function StatusIconBadge({ icon, status, className }) {
+  const ui = status ? STATUS_UI[status] ?? FALLBACK_UI : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative shrink-0", className), children: [
+    icon,
+    ui && /* @__PURE__ */ jsx("span", { className: cn(iconBadgeOverlayClass, ui.className), children: /* @__PURE__ */ jsx(Icon, { name: ui.icon, className: "size-3" }) })
+  ] });
+}
+
+export {
+  iconBadgeOverlayClass,
+  StatusIconBadge
+};

package/dist/web/chunk-D2ZG6TZM.js

@@ -0,0 +1,96 @@
+"use client";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Close
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/primitives/dialog.tsx
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 bg-page-radial backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React.forwardRef(({ className, children, showClose = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        // True-center with ZERO positional animation. The -50%/-50% centering
+        // lives on the CSS `translate` property ([translate:-50%_-50%]), NOT
+        // on `transform` — the tailwindcss-animate keyframes override the
+        // whole `transform` property while animating, so any transform-based
+        // centering (translate-x-[-50%] + slide-in-from-left-1/2) gets
+        // re-interpolated per frame and reads as a drift from the left.
+        // With centering out of `transform`, the entrance/exit is purely a
+        // fast fade + 0.98↔1 zoom (150ms ease-out) around the dialog's own
+        // center. No slide-in/out utilities may ever be added back here.
+        // (BottomSheet owns its own slide-up; it does not use this.)
+        // Its one edge is the popover shadow's hairline.
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-sm [translate:-50%_-50%] gap-4 rounded-2xl bg-card bg-gradient-card-hero p-6 shadow-popover duration-150 ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-[0.98] data-[state=closed]:zoom-out-[0.98]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(GlyphButton, { icon: Close, label: "Close", size: "sm", className: "absolute right-3 top-3" }) })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-between", className), ...props });
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-subhead font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-caption text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription
+};