@usetheo/ui 0.13.0 → 0.13.2

package/dist/chunk-II5Q5RIO.js

@@ -0,0 +1,236 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/primitives/token-usage-chart/usage-metrics.ts
+function toUsageMetrics(points) {
+  let totalInput = 0;
+  let totalOutput = 0;
+  let peak = 0;
+  for (const p of points) {
+    totalInput += p.input;
+    totalOutput += p.output;
+    const periodTotal = p.input + p.output;
+    if (periodTotal > peak) peak = periodTotal;
+  }
+  return {
+    totalInput,
+    totalOutput,
+    total: totalInput + totalOutput,
+    peak,
+    pointCount: points.length
+  };
+}
+function splitUsagePoints(points) {
+  return {
+    labels: points.map((p) => p.label),
+    input: points.map((p) => p.input),
+    output: points.map((p) => p.output)
+  };
+}
+function binPoints(points, maxBars) {
+  if (points.length <= maxBars) return points;
+  const binSize = Math.ceil(points.length / maxBars);
+  const out = [];
+  for (let i = 0; i < points.length; i += binSize) {
+    const slice = points.slice(i, i + binSize);
+    if (slice.length === 0) continue;
+    const first = slice[0]?.label ?? "";
+    const last = slice[slice.length - 1]?.label ?? first;
+    out.push({
+      label: slice.length === 1 ? first : `${first}\u2026${last}`,
+      input: slice.reduce((a, p) => a + p.input, 0),
+      output: slice.reduce((a, p) => a + p.output, 0)
+    });
+  }
+  return out;
+}
+var formatTokens = (n) => {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return `${n}`;
+};
+var TokenUsageChart = forwardRef(
+  ({
+    className,
+    points,
+    title = "Token usage",
+    height = 160,
+    showLegend = true,
+    maxBars = 60,
+    maxScale,
+    splitSeries = false,
+    ...props
+  }, ref) => {
+    const series = useMemo(() => binPoints(points, maxBars), [points, maxBars]);
+    const autoMax = Math.max(1, ...series.map((p) => p.input + p.output));
+    const max = maxScale && maxScale > 0 ? maxScale : autoMax;
+    const pct = (value) => Math.min(100, value / max * 100);
+    const barCount = series.length;
+    const barWidth = 100 / Math.max(1, barCount);
+    const gap = Math.min(2, barWidth * 0.2);
+    const innerWidth = barWidth - gap;
+    const total = toUsageMetrics(series).total;
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "data-slot": "token-usage-chart",
+        ref,
+        className: cn("rounded-xl border border-border bg-card p-4", className),
+        "aria-label": "Token usage over time",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-3", children: [
+            title ? /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }) : /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: [
+              "total \xB7 ",
+              formatTokens(total)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-[auto_1fr] gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "grid font-mono text-label text-muted-foreground",
+                style: { height, gridTemplateRows: "1fr 1fr 1fr" },
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatTokens(max) }),
+                  /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatTokens(max / 2) }),
+                  /* @__PURE__ */ jsx("span", { className: "self-end tabular-nums", children: "0" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 100 100",
+                preserveAspectRatio: "none",
+                className: "w-full",
+                style: { height },
+                role: "img",
+                "aria-label": `Token usage across ${barCount} periods`,
+                children: [
+                  [25, 50, 75].map((y) => /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: y,
+                      x2: 100,
+                      y2: y,
+                      stroke: "hsl(var(--border) / 0.4)",
+                      strokeWidth: 0.2
+                    },
+                    y
+                  )),
+                  series.map((p, idx) => {
+                    const x = idx * barWidth + gap / 2;
+                    const titleText = `${p.label} \u2014 input ${formatTokens(p.input)} \xB7 output ${formatTokens(p.output)}`;
+                    if (splitSeries) {
+                      const half = innerWidth / 2;
+                      const inputH2 = pct(p.input);
+                      const outputH2 = pct(p.output);
+                      return /* @__PURE__ */ jsxs("g", { children: [
+                        /* @__PURE__ */ jsx("title", { children: titleText }),
+                        /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x,
+                            y: 100 - inputH2,
+                            width: half,
+                            height: inputH2,
+                            fill: "hsl(var(--accent))",
+                            opacity: 0.85
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x: x + half,
+                            y: 100 - outputH2,
+                            width: half,
+                            height: outputH2,
+                            fill: "hsl(var(--primary))",
+                            opacity: 0.85
+                          }
+                        )
+                      ] }, p.label);
+                    }
+                    const periodTotal = p.input + p.output;
+                    const totalH = pct(periodTotal);
+                    const outputH = periodTotal > 0 ? totalH * p.output / periodTotal : 0;
+                    const inputH = totalH - outputH;
+                    return /* @__PURE__ */ jsxs("g", { children: [
+                      /* @__PURE__ */ jsx("title", { children: titleText }),
+                      /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x,
+                          y: 100 - totalH,
+                          width: innerWidth,
+                          height: outputH,
+                          fill: "hsl(var(--primary))",
+                          opacity: 0.85
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x,
+                          y: 100 - inputH,
+                          width: innerWidth,
+                          height: inputH,
+                          fill: "hsl(var(--accent))",
+                          opacity: 0.85
+                        }
+                      )
+                    ] }, p.label);
+                  })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "mt-1 grid grid-cols-[auto_1fr] gap-2 font-mono text-label text-muted-foreground",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: `repeat(${barCount}, 1fr)` }, children: series.map((p) => /* @__PURE__ */ jsx("span", { className: "truncate text-center", children: p.label }, p.label)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+            /* @__PURE__ */ jsx("caption", { children: "Token usage by period \u2014 input vs output" }),
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "col", children: "Period" }),
+              /* @__PURE__ */ jsx("th", { scope: "col", children: "Input tokens" }),
+              /* @__PURE__ */ jsx("th", { scope: "col", children: "Output tokens" })
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: series.map((p) => /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("td", { children: p.label }),
+              /* @__PURE__ */ jsx("td", { children: p.input }),
+              /* @__PURE__ */ jsx("td", { children: p.output })
+            ] }, `a11y-${p.label}`)) })
+          ] }),
+          showLegend ? /* @__PURE__ */ jsxs("footer", { className: "mt-3 flex items-center gap-4 font-mono text-label text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "size-2 rounded-sm bg-accent", "aria-hidden": "true" }),
+              "Input"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "size-2 rounded-sm bg-primary", "aria-hidden": "true" }),
+              "Output"
+            ] })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+TokenUsageChart.displayName = "TokenUsageChart";
+
+export { TokenUsageChart, splitUsagePoints, toUsageMetrics };
+//# sourceMappingURL=chunk-II5Q5RIO.js.map
+//# sourceMappingURL=chunk-II5Q5RIO.js.map

package/dist/chunk-II5Q5RIO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/token-usage-chart/usage-metrics.ts","../src/components/primitives/token-usage-chart/token-usage-chart.tsx"],"names":["inputH","outputH"],"mappings":"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","file":"chunk-II5Q5RIO.js","sourcesContent":["/**\n * Pure aggregate + transpose helpers for `TokenUsagePoint[]` (M5-7).\n * No React — usable to drive metric displays, fixed-scale comparisons, or\n * other chart surfaces.\n */\nimport type { TokenUsagePoint } from \"./token-usage-chart.js\";\n\nexport interface UsageMetrics {\n  totalInput: number;\n  totalOutput: number;\n  total: number;\n  /** The largest per-period total (`input + output`); 0 for an empty series. */\n  peak: number;\n  pointCount: number;\n}\n\n/** Aggregate totals + the peak per-period total. Pure. */\nexport function toUsageMetrics(points: TokenUsagePoint[]): UsageMetrics {\n  let totalInput = 0;\n  let totalOutput = 0;\n  let peak = 0;\n  for (const p of points) {\n    totalInput += p.input;\n    totalOutput += p.output;\n    const periodTotal = p.input + p.output;\n    if (periodTotal > peak) peak = periodTotal;\n  }\n  return {\n    totalInput,\n    totalOutput,\n    total: totalInput + totalOutput,\n    peak,\n    pointCount: points.length,\n  };\n}\n\nexport interface UsageSeries {\n  labels: string[];\n  input: number[];\n  output: number[];\n}\n\n/** Transpose stacked points into parallel `labels`/`input`/`output` arrays. Pure. */\nexport function splitUsagePoints(points: TokenUsagePoint[]): UsageSeries {\n  return {\n    labels: points.map((p) => p.label),\n    input: points.map((p) => p.input),\n    output: points.map((p) => p.output),\n  };\n}\n","import { forwardRef, useMemo } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { toUsageMetrics } from \"./usage-metrics.js\";\n\nexport interface TokenUsagePoint {\n  /** ISO date or friendly label for the x-axis tooltip. */\n  label: string;\n  /** Input tokens for this period (e.g. day). */\n  input: number;\n  /** Output tokens for this period. */\n  output: number;\n}\n\ninterface TokenUsageChartProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  points: TokenUsagePoint[];\n  /** Title above the chart. */\n  title?: ReactNode;\n  /** Chart height in px. Default 160. */\n  height?: number;\n  /** Show legend below the chart. Default true. */\n  showLegend?: boolean;\n  /**\n   * Maximum number of bars to render. When `points.length` exceeds this, the\n   * series is binned (summed in equal-width windows) so the chart stays\n   * legible and SVG node count stays bounded. Default 60.\n   */\n  maxBars?: number;\n  /**\n   * Fix the y-axis maximum (the token value mapped to 100% height) so multiple\n   * charts share a scale. When omitted, the scale auto-fits the data. Bars whose\n   * value exceeds `maxScale` are clamped to 100% (the tooltip + a11y table still\n   * show the true number).\n   */\n  maxScale?: number;\n  /**\n   * Render input and output as two adjacent (grouped) bars per period instead of\n   * one stacked bar. Default false (stacked).\n   */\n  splitSeries?: boolean;\n}\n\nfunction binPoints(points: TokenUsagePoint[], maxBars: number): TokenUsagePoint[] {\n  if (points.length <= maxBars) return points;\n  const binSize = Math.ceil(points.length / maxBars);\n  const out: TokenUsagePoint[] = [];\n  for (let i = 0; i < points.length; i += binSize) {\n    const slice = points.slice(i, i + binSize);\n    if (slice.length === 0) continue;\n    const first = slice[0]?.label ?? \"\";\n    const last = slice[slice.length - 1]?.label ?? first;\n    out.push({\n      label: slice.length === 1 ? first : `${first}…${last}`,\n      input: slice.reduce((a, p) => a + p.input, 0),\n      output: slice.reduce((a, p) => a + p.output, 0),\n    });\n  }\n  return out;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;\n  return `${n}`;\n};\n\n/**\n * TokenUsageChart — stacked-bar chart of input vs output tokens over time.\n *\n * Pure SVG, no chart lib. Width is fluid; bars adjust to viewBox. Hover any\n * bar to see the breakdown in the tooltip slot below.\n */\nconst TokenUsageChart = forwardRef<HTMLDivElement, TokenUsageChartProps>(\n  (\n    {\n      className,\n      points,\n      title = \"Token usage\",\n      height = 160,\n      showLegend = true,\n      maxBars = 60,\n      maxScale,\n      splitSeries = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const series = useMemo(() => binPoints(points, maxBars), [points, maxBars]);\n    const autoMax = Math.max(1, ...series.map((p) => p.input + p.output));\n    const max = maxScale && maxScale > 0 ? maxScale : autoMax;\n    const pct = (value: number): number => Math.min(100, (value / max) * 100);\n    const barCount = series.length;\n    const barWidth = 100 / Math.max(1, barCount);\n    const gap = Math.min(2, barWidth * 0.2);\n    const innerWidth = barWidth - gap;\n\n    const total = toUsageMetrics(series).total;\n\n    return (\n      <section\n        data-slot=\"token-usage-chart\"\n        ref={ref}\n        className={cn(\"rounded-xl border border-border bg-card p-4\", className)}\n        aria-label=\"Token usage over time\"\n        {...props}\n      >\n        <header className=\"flex items-baseline justify-between gap-3\">\n          {title ? (\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n            total · {formatTokens(total)}\n          </span>\n        </header>\n        <div className=\"mt-3 grid grid-cols-[auto_1fr] gap-2\">\n          {/* Y-axis ticks */}\n          <div\n            className=\"grid font-mono text-label text-muted-foreground\"\n            style={{ height, gridTemplateRows: \"1fr 1fr 1fr\" }}\n            aria-hidden=\"true\"\n          >\n            <span className=\"tabular-nums\">{formatTokens(max)}</span>\n            <span className=\"tabular-nums\">{formatTokens(max / 2)}</span>\n            <span className=\"self-end tabular-nums\">0</span>\n          </div>\n          {/* Chart */}\n          <svg\n            viewBox=\"0 0 100 100\"\n            preserveAspectRatio=\"none\"\n            className=\"w-full\"\n            style={{ height }}\n            role=\"img\"\n            aria-label={`Token usage across ${barCount} periods`}\n          >\n            {/* gridlines */}\n            {[25, 50, 75].map((y) => (\n              <line\n                key={y}\n                x1={0}\n                y1={y}\n                x2={100}\n                y2={y}\n                stroke=\"hsl(var(--border) / 0.4)\"\n                strokeWidth={0.2}\n              />\n            ))}\n            {series.map((p, idx) => {\n              const x = idx * barWidth + gap / 2;\n              const titleText = `${p.label} — input ${formatTokens(p.input)} · output ${formatTokens(p.output)}`;\n              if (splitSeries) {\n                // Grouped: input + output as two adjacent half-width bars, each\n                // scaled independently (and clamped) to the scale.\n                const half = innerWidth / 2;\n                const inputH = pct(p.input);\n                const outputH = pct(p.output);\n                return (\n                  <g key={p.label}>\n                    <title>{titleText}</title>\n                    <rect\n                      x={x}\n                      y={100 - inputH}\n                      width={half}\n                      height={inputH}\n                      fill=\"hsl(var(--accent))\"\n                      opacity={0.85}\n                    />\n                    <rect\n                      x={x + half}\n                      y={100 - outputH}\n                      width={half}\n                      height={outputH}\n                      fill=\"hsl(var(--primary))\"\n                      opacity={0.85}\n                    />\n                  </g>\n                );\n              }\n              // Stacked: output on top of input. The total is clamped to the\n              // scale, then split PROPORTIONALLY so the two segments tile to the\n              // clamped total without overlap (a bar over `maxScale` keeps its\n              // input/output ratio instead of both segments hitting 100%).\n              const periodTotal = p.input + p.output;\n              const totalH = pct(periodTotal);\n              const outputH = periodTotal > 0 ? (totalH * p.output) / periodTotal : 0;\n              const inputH = totalH - outputH;\n              return (\n                <g key={p.label}>\n                  <title>{titleText}</title>\n                  {/* output (top, primary tone) */}\n                  <rect\n                    x={x}\n                    y={100 - totalH}\n                    width={innerWidth}\n                    height={outputH}\n                    fill=\"hsl(var(--primary))\"\n                    opacity={0.85}\n                  />\n                  {/* input (bottom, accent tone) */}\n                  <rect\n                    x={x}\n                    y={100 - inputH}\n                    width={innerWidth}\n                    height={inputH}\n                    fill=\"hsl(var(--accent))\"\n                    opacity={0.85}\n                  />\n                </g>\n              );\n            })}\n          </svg>\n        </div>\n        {/* x-axis labels — aligned with the chart column of the parent grid */}\n        <div\n          className=\"mt-1 grid grid-cols-[auto_1fr] gap-2 font-mono text-label text-muted-foreground\"\n          aria-hidden=\"true\"\n        >\n          <span aria-hidden=\"true\" />\n          <div className=\"grid\" style={{ gridTemplateColumns: `repeat(${barCount}, 1fr)` }}>\n            {series.map((p) => (\n              <span key={p.label} className=\"truncate text-center\">\n                {p.label}\n              </span>\n            ))}\n          </div>\n        </div>\n        {/* Screen-reader fallback: the SVG is decorative-ish for AT users.\n         * `<title>` per bar is unreliably exposed across NVDA/VoiceOver/JAWS,\n         * so we ship an `sr-only` table with the same data. Sighted users\n         * never see this; AT users can navigate the values cell-by-cell.\n         * Reference: WCAG 1.1.1 (Non-text content). */}\n        <table className=\"sr-only\">\n          <caption>Token usage by period — input vs output</caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">Period</th>\n              <th scope=\"col\">Input tokens</th>\n              <th scope=\"col\">Output tokens</th>\n            </tr>\n          </thead>\n          <tbody>\n            {series.map((p) => (\n              <tr key={`a11y-${p.label}`}>\n                <td>{p.label}</td>\n                <td>{p.input}</td>\n                <td>{p.output}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n        {showLegend ? (\n          <footer className=\"mt-3 flex items-center gap-4 font-mono text-label text-muted-foreground\">\n            <span className=\"inline-flex items-center gap-1.5\">\n              <span className=\"size-2 rounded-sm bg-accent\" aria-hidden=\"true\" />\n              Input\n            </span>\n            <span className=\"inline-flex items-center gap-1.5\">\n              <span className=\"size-2 rounded-sm bg-primary\" aria-hidden=\"true\" />\n              Output\n            </span>\n          </footer>\n        ) : null}\n      </section>\n    );\n  },\n);\nTokenUsageChart.displayName = \"TokenUsageChart\";\n\nexport { TokenUsageChart };\n"]}

package/dist/chunk-ITEIRMSH.js

@@ -0,0 +1,121 @@
+import { safeHref } from './chunk-GDMCDW66.js';
+import { BadgeWithDot } from './chunk-624AATQZ.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { GitPullRequest, Server, ExternalLink } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var statusToVariant = {
+  queued: "warning",
+  building: "primary",
+  deploying: "primary",
+  live: "success",
+  failed: "destructive",
+  cancelled: "default",
+  idle: "default"
+};
+var statusToDot = {
+  queued: "warning",
+  building: "primary",
+  deploying: "primary",
+  live: "success",
+  failed: "destructive",
+  cancelled: "muted",
+  idle: "muted"
+};
+var statusLabels = {
+  queued: "Queued",
+  building: "Building",
+  deploying: "Deploying",
+  live: "Live",
+  failed: "Failed",
+  cancelled: "Cancelled",
+  idle: "Idle"
+};
+var PreviewEnvCard = forwardRef(
+  ({ className, env, actions, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "data-slot": "preview-env-card",
+      ref,
+      className: cn(
+        "rounded-xl border border-border bg-card p-5 shadow-sm",
+        "transition-[border-color,box-shadow] duration-base ease-out-soft",
+        "hover:border-primary/40",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 font-mono text-label-caps text-muted-foreground uppercase", children: [
+              /* @__PURE__ */ jsx(GitPullRequest, { className: "size-3" }),
+              " PR #",
+              env.prNumber
+            ] }),
+            /* @__PURE__ */ jsx("h3", { className: "mt-1 truncate font-display text-title-md tracking-tight", children: env.prTitle }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-body-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-code-sm", children: env.branch }),
+              env.author ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "by ",
+                  env.author.name
+                ] })
+              ] }) : null,
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "opened ",
+                env.createdAt
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(BadgeWithDot, { variant: "primary", children: [
+            /* @__PURE__ */ jsx(Server, { className: "size-3" }),
+            " ",
+            env.services.length,
+            " service",
+            env.services.length === 1 ? "" : "s"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-4 divide-y divide-border/30 rounded-lg border border-border/30", children: env.services.map((s) => {
+          const sanitized = safeHref(s.url);
+          return /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-code-sm text-foreground", children: s.name }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              sanitized ? /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: sanitized,
+                  className: "inline-flex items-center gap-1 font-mono text-code-sm text-primary hover:underline",
+                  target: "_blank",
+                  rel: "noreferrer",
+                  children: [
+                    sanitized.replace(/^https?:\/\//, ""),
+                    /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "font-mono text-code-sm text-muted-foreground", children: "internal" }),
+              /* @__PURE__ */ jsxs(BadgeWithDot, { variant: statusToVariant[s.status], children: [
+                /* @__PURE__ */ jsx(
+                  BadgeWithDot.Dot,
+                  {
+                    tone: statusToDot[s.status],
+                    pulse: s.status === "building" || s.status === "deploying" || s.status === "queued"
+                  }
+                ),
+                statusLabels[s.status]
+              ] })
+            ] })
+          ] }, s.name);
+        }) }),
+        actions ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-center gap-2", children: actions }) : null
+      ]
+    }
+  )
+);
+PreviewEnvCard.displayName = "PreviewEnvCard";
+
+export { PreviewEnvCard };
+//# sourceMappingURL=chunk-ITEIRMSH.js.map
+//# sourceMappingURL=chunk-ITEIRMSH.js.map

package/dist/chunk-ITEIRMSH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/preview-env-card/preview-env-card.tsx"],"names":[],"mappings":"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","file":"chunk-ITEIRMSH.js","sourcesContent":["import { ExternalLink, GitPullRequest, Server } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { safeHref } from \"../../../lib/safe-href.js\";\nimport { Badge } from \"../../primitives/badge/index.js\";\nimport type { DeploymentStatus } from \"../deployment-row/deployment-row.js\";\n\nconst statusToVariant: Record<\n  DeploymentStatus,\n  \"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"default\",\n  idle: \"default\",\n};\nconst statusToDot: Record<\n  DeploymentStatus,\n  \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"muted\",\n  idle: \"muted\",\n};\nconst statusLabels: Record<DeploymentStatus, string> = {\n  queued: \"Queued\",\n  building: \"Building\",\n  deploying: \"Deploying\",\n  live: \"Live\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n  idle: \"Idle\",\n};\n\nexport interface PreviewService {\n  /** Service name e.g. \"api\", \"web\", \"worker\". */\n  name: string;\n  /** Live URL or null if not exposed (worker). */\n  url?: string;\n  status: DeploymentStatus;\n}\n\nexport interface PreviewEnv {\n  id: string;\n  prNumber: number;\n  prTitle: string;\n  branch: string;\n  author?: { name: string; avatarUrl?: string };\n  services: PreviewService[];\n  createdAt: string;\n}\n\ninterface PreviewEnvCardProps extends HTMLAttributes<HTMLDivElement> {\n  env: PreviewEnv;\n  actions?: ReactNode;\n}\n\n/**\n * PreviewEnvCard — preview environment card surfacing all services from one PR.\n *\n * Theo's killer feature: full-stack preview environments. The card shows:\n *   - PR number + title at the top\n *   - branch + author in the metadata row\n *   - one badge per service with its own status + URL\n *   - bottom action row (Open, Promote, Delete)\n */\nconst PreviewEnvCard = forwardRef<HTMLDivElement, PreviewEnvCardProps>(\n  ({ className, env, actions, ...props }, ref) => (\n    <article\n      data-slot=\"preview-env-card\"\n      ref={ref}\n      className={cn(\n        \"rounded-xl border border-border bg-card p-5 shadow-sm\",\n        \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n        \"hover:border-primary/40\",\n        className,\n      )}\n      {...(props as HTMLAttributes<HTMLDivElement>)}\n    >\n      <header className=\"flex items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <p className=\"flex items-center gap-2 font-mono text-label-caps text-muted-foreground uppercase\">\n            <GitPullRequest className=\"size-3\" /> PR #{env.prNumber}\n          </p>\n          <h3 className=\"mt-1 truncate font-display text-title-md tracking-tight\">{env.prTitle}</h3>\n          <p className=\"mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-body-sm text-muted-foreground\">\n            <span className=\"font-mono text-code-sm\">{env.branch}</span>\n            {env.author ? (\n              <>\n                <span aria-hidden=\"true\">·</span>\n                <span>by {env.author.name}</span>\n              </>\n            ) : null}\n            <span aria-hidden=\"true\">·</span>\n            <span>opened {env.createdAt}</span>\n          </p>\n        </div>\n        <Badge variant=\"primary\">\n          <Server className=\"size-3\" /> {env.services.length} service\n          {env.services.length === 1 ? \"\" : \"s\"}\n        </Badge>\n      </header>\n\n      <ul className=\"mt-4 divide-y divide-border/30 rounded-lg border border-border/30\">\n        {env.services.map((s) => {\n          // T3.3 (SEC-003): defang dangerous URL protocols before rendering\n          // as <a href>. Consumers passing user-controlled URLs from API\n          // responses are protected from javascript:/vbscript:/data:text/html\n          // XSS payloads.\n          const sanitized = safeHref(s.url);\n          return (\n            <li key={s.name} className=\"flex items-center justify-between gap-3 px-3 py-2\">\n              <span className=\"font-mono text-code-sm text-foreground\">{s.name}</span>\n              <div className=\"flex items-center gap-2\">\n                {sanitized ? (\n                  <a\n                    href={sanitized}\n                    className=\"inline-flex items-center gap-1 font-mono text-code-sm text-primary hover:underline\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                  >\n                    {sanitized.replace(/^https?:\\/\\//, \"\")}\n                    <ExternalLink className=\"size-3\" />\n                  </a>\n                ) : (\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">internal</span>\n                )}\n                <Badge variant={statusToVariant[s.status]}>\n                  <Badge.Dot\n                    tone={statusToDot[s.status]}\n                    pulse={\n                      s.status === \"building\" || s.status === \"deploying\" || s.status === \"queued\"\n                    }\n                  />\n                  {statusLabels[s.status]}\n                </Badge>\n              </div>\n            </li>\n          );\n        })}\n      </ul>\n\n      {actions ? <div className=\"mt-4 flex items-center gap-2\">{actions}</div> : null}\n    </article>\n  ),\n);\nPreviewEnvCard.displayName = \"PreviewEnvCard\";\n\nexport { PreviewEnvCard };\n"]}

package/dist/chunk-JIZKW3WC.js

@@ -0,0 +1,74 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { Minus, TrendingDown, TrendingUp, ArrowUpRight } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var TREND = {
+  up: { icon: TrendingUp, color: "text-success" },
+  down: { icon: TrendingDown, color: "text-destructive" },
+  flat: { icon: Minus, color: "text-muted-foreground" }
+};
+var StatTile = forwardRef(
+  ({ className, value, label, icon: Icon, delta, onClick, children: _children, ...props }, ref) => {
+    const isInteractive = onClick !== void 0;
+    const TrendIcon = delta !== void 0 ? TREND[delta.trend].icon : null;
+    const trendColor = delta !== void 0 ? TREND[delta.trend].color : "";
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      (Icon !== void 0 || isInteractive) && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+        Icon !== void 0 ? /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-lg border border-border/40 bg-muted/40", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }) }) : /* @__PURE__ */ jsx("div", {}),
+        isInteractive ? /* @__PURE__ */ jsx(
+          ArrowUpRight,
+          {
+            "aria-hidden": "true",
+            className: "size-3.5 text-muted-foreground transition-colors group-hover:text-foreground"
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap font-bold font-display text-display-md text-foreground tabular-nums leading-none tracking-tight", children: value }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 font-sans text-body-sm text-muted-foreground", children: label }),
+      delta !== void 0 && TrendIcon !== null ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("mt-2 inline-flex items-center gap-1 font-mono text-label", trendColor),
+          children: [
+            /* @__PURE__ */ jsx(TrendIcon, { "aria-hidden": "true", className: "size-3" }),
+            /* @__PURE__ */ jsx("span", { children: delta.value })
+          ]
+        }
+      ) : null
+    ] });
+    if (isInteractive) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          "data-slot": "stat-tile",
+          ref,
+          type: "button",
+          onClick,
+          className: cn(
+            "group block w-full rounded-xl border border-border/40 bg-card p-5 text-left",
+            "cursor-pointer transition-colors hover:border-primary/30",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            className
+          ),
+          ...props,
+          children: inner
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "stat-tile",
+        ref,
+        className: cn("rounded-xl border border-border/40 bg-card p-5", className),
+        children: inner
+      }
+    );
+  }
+);
+StatTile.displayName = "StatTile";
+
+export { StatTile };
+//# sourceMappingURL=chunk-JIZKW3WC.js.map
+//# sourceMappingURL=chunk-JIZKW3WC.js.map

package/dist/chunk-JIZKW3WC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/stat-tile/stat-tile.tsx"],"names":[],"mappings":"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","file":"chunk-JIZKW3WC.js","sourcesContent":["import { ArrowUpRight, Minus, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * StatTile — big number + label + optional delta + optional icon.\n *\n * Dual mode based on `onClick`:\n *   - With onClick → renders as `<button>` with hover state + trailing\n *     ArrowUpRight chevron (navigation affordance).\n *   - Without onClick → renders as static `<div>`.\n *\n * Delta trend drives icon + color: up=success/TrendingUp, down=destructive/\n * TrendingDown, flat=muted/Minus. Big value uses font-display + tabular-nums.\n *\n * @example\n *   <StatTile value=\"42\" label=\"Projects\" />\n *   <StatTile value=\"$1,234\" label=\"MRR\" icon={DollarSign}\n *             delta={{ value: \"+12%\", trend: \"up\" }} onClick={openBilling} />\n */\nexport interface StatTileProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"value\"> {\n  value: ReactNode;\n  label: ReactNode;\n  icon?: ElementType;\n  delta?: { value: ReactNode; trend: \"up\" | \"down\" | \"flat\" };\n}\n\nconst TREND: Record<\"up\" | \"down\" | \"flat\", { icon: ElementType; color: string }> = {\n  up: { icon: TrendingUp, color: \"text-success\" },\n  down: { icon: TrendingDown, color: \"text-destructive\" },\n  flat: { icon: Minus, color: \"text-muted-foreground\" },\n};\n\nconst StatTile = forwardRef<HTMLElement, StatTileProps>(\n  ({ className, value, label, icon: Icon, delta, onClick, children: _children, ...props }, ref) => {\n    const isInteractive = onClick !== undefined;\n    const TrendIcon = delta !== undefined ? TREND[delta.trend].icon : null;\n    const trendColor = delta !== undefined ? TREND[delta.trend].color : \"\";\n\n    const inner = (\n      <>\n        {(Icon !== undefined || isInteractive) && (\n          <div className=\"mb-3 flex items-center justify-between\">\n            {Icon !== undefined ? (\n              <div className=\"flex size-8 items-center justify-center rounded-lg border border-border/40 bg-muted/40\">\n                <Icon aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />\n              </div>\n            ) : (\n              <div />\n            )}\n            {isInteractive ? (\n              <ArrowUpRight\n                aria-hidden=\"true\"\n                className=\"size-3.5 text-muted-foreground transition-colors group-hover:text-foreground\"\n              />\n            ) : null}\n          </div>\n        )}\n        <div className=\"whitespace-nowrap font-bold font-display text-display-md text-foreground tabular-nums leading-none tracking-tight\">\n          {value}\n        </div>\n        <div className=\"mt-1 font-sans text-body-sm text-muted-foreground\">{label}</div>\n        {delta !== undefined && TrendIcon !== null ? (\n          <div\n            className={cn(\"mt-2 inline-flex items-center gap-1 font-mono text-label\", trendColor)}\n          >\n            <TrendIcon aria-hidden=\"true\" className=\"size-3\" />\n            <span>{delta.value}</span>\n          </div>\n        ) : null}\n      </>\n    );\n\n    if (isInteractive) {\n      return (\n        <button\n          data-slot=\"stat-tile\"\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          onClick={onClick}\n          className={cn(\n            \"group block w-full rounded-xl border border-border/40 bg-card p-5 text-left\",\n            \"cursor-pointer transition-colors hover:border-primary/30\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n            className,\n          )}\n          {...props}\n        >\n          {inner}\n        </button>\n      );\n    }\n\n    return (\n      <div\n        data-slot=\"stat-tile\"\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={cn(\"rounded-xl border border-border/40 bg-card p-5\", className)}\n      >\n        {inner}\n      </div>\n    );\n  },\n);\nStatTile.displayName = \"StatTile\";\n\nexport { StatTile };\n"]}