@usetheo/ui 0.13.0 → 0.13.1

package/dist/chunk-HZ7Z22VW.js

@@ -0,0 +1,130 @@
+"use client";
+import { cn } from './chunk-EWDN56AS.js';
+import { Hash, Slash } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_TITLE = {
+  "/": "Commands",
+  "@": "Files",
+  "#": "Memories"
+};
+var DEFAULT_ICON = {
+  "/": Slash,
+  "@": Slash,
+  "#": Hash
+};
+function MentionMenu({
+  open,
+  trigger,
+  items,
+  onSelect,
+  onClose,
+  title,
+  emptyLabel = "No matches",
+  className
+}) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef(null);
+  const resolvedTitle = title ?? DEFAULT_TITLE[trigger];
+  const TriggerIcon = DEFAULT_ICON[trigger];
+  useEffect(() => {
+    if (activeIndex >= items.length) setActiveIndex(Math.max(0, items.length - 1));
+  }, [items.length, activeIndex]);
+  useEffect(() => {
+    if (open) setActiveIndex(0);
+  }, [open, trigger]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(items.length - 1, i + 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(0, i - 1));
+      } else if (e.key === "Enter") {
+        if (items.length === 0) return;
+        e.preventDefault();
+        const item = items[activeIndex];
+        if (item) onSelect(item);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [open, items, activeIndex, onSelect, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "mention-menu",
+      role: "menu",
+      "aria-orientation": "vertical",
+      "aria-label": typeof resolvedTitle === "string" ? resolvedTitle : "Mention menu",
+      tabIndex: -1,
+      className: cn(
+        "absolute bottom-full left-0 z-40 mb-2 w-[22rem] max-w-full",
+        "overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md",
+        "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in",
+        className
+      ),
+      "data-state": "open",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "presentation",
+            className: "flex items-center justify-between gap-2 border-border/40 border-b bg-muted/30 px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-mono text-label text-muted-foreground uppercase tracking-wider", children: [
+                /* @__PURE__ */ jsx(TriggerIcon, { className: "size-3", "aria-hidden": "true" }),
+                resolvedTitle
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: items.length })
+            ]
+          }
+        ),
+        items.length === 0 ? /* @__PURE__ */ jsx("div", { role: "presentation", className: "px-3 py-4 text-body-sm text-muted-foreground", children: emptyLabel }) : /* @__PURE__ */ jsx("ul", { ref: listRef, role: "presentation", className: "max-h-[18rem] overflow-y-auto py-1", children: items.map((item, idx) => {
+          const Icon = item.icon;
+          const active = idx === activeIndex;
+          return /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onMouseEnter: () => setActiveIndex(idx),
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => onSelect(item),
+              className: cn(
+                "flex w-full items-start gap-3 px-3 py-2 text-left",
+                "transition-colors duration-base ease-out-soft",
+                active ? "bg-muted" : "hover:bg-muted/60"
+              ),
+              "data-active": active || void 0,
+              children: [
+                Icon ? /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    className: "mt-0.5 size-4 shrink-0 text-muted-foreground",
+                    "aria-hidden": "true"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate font-medium font-mono text-code-md", children: item.label }),
+                  item.description ? /* @__PURE__ */ jsx("span", { className: "truncate font-sans text-label text-muted-foreground", children: item.description }) : null
+                ] })
+              ]
+            }
+          ) }, item.id);
+        }) })
+      ]
+    }
+  );
+}
+
+export { MentionMenu };
+//# sourceMappingURL=chunk-HZ7Z22VW.js.map
+//# sourceMappingURL=chunk-HZ7Z22VW.js.map

package/dist/chunk-HZ7Z22VW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/mention-menu/mention-menu.tsx"],"names":[],"mappings":"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","file":"chunk-HZ7Z22VW.js","sourcesContent":["\"use client\";\n\nimport { Hash, type LucideIcon, Slash } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\n\nexport interface MentionItem {\n  id: string;\n  /** Primary label shown on the row. */\n  label: ReactNode;\n  /** Secondary one-line description (optional). */\n  description?: ReactNode;\n  /** Optional per-row icon override. */\n  icon?: IconComponent;\n}\n\n/** Trigger character — drives the default header + icon if not overridden. */\nexport type MentionTrigger = \"/\" | \"@\" | \"#\";\n\ninterface MentionMenuProps {\n  /** Whether the panel is open. The consumer (composer) controls this. */\n  open: boolean;\n  /** Trigger character that opened the menu — used for default title + icon. */\n  trigger: MentionTrigger;\n  /** Items to display (already filtered by the consumer). */\n  items: MentionItem[];\n  /** Fires when the user selects an item via click or Enter. */\n  onSelect: (item: MentionItem) => void;\n  /** Fires when the user dismisses (Esc, click outside). */\n  onClose: () => void;\n  /** Title above the list. Defaults to the trigger's domain (\"Commands\", \"Files\", \"Memories\"). */\n  title?: ReactNode;\n  /** Empty-state message when items is empty. */\n  emptyLabel?: ReactNode;\n  /** Override the alignment relative to its anchor. Default: above-left. */\n  className?: string;\n}\n\nconst DEFAULT_TITLE: Record<MentionTrigger, string> = {\n  \"/\": \"Commands\",\n  \"@\": \"Files\",\n  \"#\": \"Memories\",\n};\n\nconst DEFAULT_ICON: Record<MentionTrigger, LucideIcon> = {\n  \"/\": Slash,\n  \"@\": Slash,\n  \"#\": Hash,\n};\n\n/**\n * MentionMenu — keyboard-navigable popover for slash-command / @file / #memory\n * triggers inside an agent composer.\n *\n * Generic by design: the consumer decides what items appear for each trigger\n * (commands list, file search, memory lookup, …). MentionMenu owns the visual\n * presentation, selection highlight, Esc/Enter/Arrow keys.\n *\n * Position: absolute, anchored to the closest positioned ancestor — usually\n * the composer wrapper. Default `bottom-full left-0` (above the composer).\n */\nexport function MentionMenu({\n  open,\n  trigger,\n  items,\n  onSelect,\n  onClose,\n  title,\n  emptyLabel = \"No matches\",\n  className,\n}: MentionMenuProps) {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const resolvedTitle = title ?? DEFAULT_TITLE[trigger];\n  const TriggerIcon = DEFAULT_ICON[trigger];\n\n  // Clamp the highlighted index whenever items change.\n  useEffect(() => {\n    if (activeIndex >= items.length) setActiveIndex(Math.max(0, items.length - 1));\n  }, [items.length, activeIndex]);\n\n  // Reset highlight when the menu opens / trigger changes.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional reset on open/trigger\n  useEffect(() => {\n    if (open) setActiveIndex(0);\n  }, [open, trigger]);\n\n  // Global keyboard handler — Arrows / Enter / Esc. Captures while open.\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        setActiveIndex((i) => Math.min(items.length - 1, i + 1));\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        setActiveIndex((i) => Math.max(0, i - 1));\n      } else if (e.key === \"Enter\") {\n        if (items.length === 0) return;\n        e.preventDefault();\n        const item = items[activeIndex];\n        if (item) onSelect(item);\n      } else if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose();\n      }\n    };\n    window.addEventListener(\"keydown\", onKey, true);\n    return () => window.removeEventListener(\"keydown\", onKey, true);\n  }, [open, items, activeIndex, onSelect, onClose]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      data-slot=\"mention-menu\"\n      role=\"menu\"\n      aria-orientation=\"vertical\"\n      aria-label={typeof resolvedTitle === \"string\" ? resolvedTitle : \"Mention menu\"}\n      tabIndex={-1}\n      className={cn(\n        \"absolute bottom-full left-0 z-40 mb-2 w-[22rem] max-w-full\",\n        \"overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md\",\n        \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n        className,\n      )}\n      data-state=\"open\"\n    >\n      <div\n        role=\"presentation\"\n        className=\"flex items-center justify-between gap-2 border-border/40 border-b bg-muted/30 px-3 py-2\"\n      >\n        <span className=\"inline-flex items-center gap-1.5 font-mono text-label text-muted-foreground uppercase tracking-wider\">\n          <TriggerIcon className=\"size-3\" aria-hidden=\"true\" />\n          {resolvedTitle}\n        </span>\n        <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n          {items.length}\n        </span>\n      </div>\n      {items.length === 0 ? (\n        <div role=\"presentation\" className=\"px-3 py-4 text-body-sm text-muted-foreground\">\n          {emptyLabel}\n        </div>\n      ) : (\n        <ul ref={listRef} role=\"presentation\" className=\"max-h-[18rem] overflow-y-auto py-1\">\n          {items.map((item, idx) => {\n            const Icon = item.icon;\n            const active = idx === activeIndex;\n            return (\n              <li key={item.id} role=\"presentation\">\n                <button\n                  type=\"button\"\n                  role=\"menuitem\"\n                  onMouseEnter={() => setActiveIndex(idx)}\n                  // Prevent textarea from losing focus on click so the caret stays put.\n                  onMouseDown={(e) => e.preventDefault()}\n                  onClick={() => onSelect(item)}\n                  className={cn(\n                    \"flex w-full items-start gap-3 px-3 py-2 text-left\",\n                    \"transition-colors duration-base ease-out-soft\",\n                    active ? \"bg-muted\" : \"hover:bg-muted/60\",\n                  )}\n                  data-active={active || undefined}\n                >\n                  {Icon ? (\n                    <Icon\n                      className=\"mt-0.5 size-4 shrink-0 text-muted-foreground\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : null}\n                  <span className=\"grid min-w-0 flex-1 gap-0.5\">\n                    <span className=\"truncate font-medium font-mono text-code-md\">\n                      {item.label}\n                    </span>\n                    {item.description ? (\n                      <span className=\"truncate font-sans text-label text-muted-foreground\">\n                        {item.description}\n                      </span>\n                    ) : null}\n                  </span>\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/chunk-JFKBFQA5.js

@@ -0,0 +1,129 @@
+"use client";
+import { Input } from './chunk-BYUWQ6OP.js';
+import { BadgeWithDot } from './chunk-624AATQZ.js';
+import { Button } from './chunk-25KBUQEQ.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { Plus, Globe, ShieldCheck, ShieldX, Check, Trash2 } from 'lucide-react';
+import { forwardRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var statusVariant = {
+  verified: "success",
+  pending: "warning",
+  invalid: "destructive"
+};
+var statusDot = {
+  verified: "success",
+  pending: "warning",
+  invalid: "destructive"
+};
+var statusLabel = {
+  verified: "Verified",
+  pending: "Pending DNS",
+  invalid: "Invalid"
+};
+var DomainConfig = forwardRef(
+  ({ className, domains, onAdd, onRemove, onSetPrimary, ...props }, ref) => {
+    const [hostname, setHostname] = useState("");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "domain-config",
+        ref,
+        className: cn("rounded-xl border bg-card p-5 shadow-sm", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("header", { className: "mb-4 flex items-baseline justify-between gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: "Domains" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-body-sm text-muted-foreground", children: [
+              domains.length,
+              " configured"
+            ] })
+          ] }) }),
+          onAdd ? /* @__PURE__ */ jsxs(
+            "form",
+            {
+              className: "mb-4 grid grid-cols-[1fr_auto] gap-2",
+              onSubmit: (e) => {
+                e.preventDefault();
+                const v = hostname.trim();
+                if (!v) return;
+                onAdd(v);
+                setHostname("");
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder: "api.acme.com",
+                    value: hostname,
+                    onChange: (e) => setHostname(e.target.value),
+                    "aria-label": "Hostname",
+                    className: "font-mono"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Button, { type: "submit", children: [
+                  /* @__PURE__ */ jsx(Plus, {}),
+                  " Add domain"
+                ] })
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("ul", { className: "grid gap-3", children: [
+            domains.map((d) => /* @__PURE__ */ jsxs("li", { className: "grid gap-3 rounded-lg border border-border/40 p-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+                /* @__PURE__ */ jsx(Globe, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-code-md text-foreground", children: d.hostname }),
+                /* @__PURE__ */ jsxs(BadgeWithDot, { variant: statusVariant[d.status], children: [
+                  /* @__PURE__ */ jsx(BadgeWithDot.Dot, { tone: statusDot[d.status], pulse: d.status === "pending" }),
+                  statusLabel[d.status]
+                ] }),
+                d.tls === true ? /* @__PURE__ */ jsxs(BadgeWithDot, { variant: "primary", children: [
+                  /* @__PURE__ */ jsx(ShieldCheck, { className: "size-3" }),
+                  " TLS"
+                ] }) : d.tls === false ? /* @__PURE__ */ jsxs(BadgeWithDot, { variant: "destructive", children: [
+                  /* @__PURE__ */ jsx(ShieldX, { className: "size-3" }),
+                  " No TLS"
+                ] }) : null,
+                d.primary ? /* @__PURE__ */ jsxs(BadgeWithDot, { variant: "accent", children: [
+                  /* @__PURE__ */ jsx(Check, { className: "size-3" }),
+                  " Primary"
+                ] }) : null,
+                /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+                  !d.primary && onSetPrimary ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => onSetPrimary(d.id), children: "Set primary" }) : null,
+                  onRemove ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "icon",
+                      variant: "ghost",
+                      onClick: () => onRemove(d.id),
+                      "aria-label": `Remove ${d.hostname}`,
+                      children: /* @__PURE__ */ jsx(Trash2, {})
+                    }
+                  ) : null
+                ] })
+              ] }),
+              d.status === "pending" && d.verificationRecord ? /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border/60 border-dashed bg-muted/30 p-3 font-mono text-code-sm", children: [
+                /* @__PURE__ */ jsx("p", { className: "mb-2 font-sans text-label-caps text-muted-foreground uppercase", children: "Add this DNS record to verify" }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "type" }),
+                  /* @__PURE__ */ jsx("span", { children: d.verificationRecord.type }),
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "name" }),
+                  /* @__PURE__ */ jsx("span", { children: d.verificationRecord.name }),
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "value" }),
+                  /* @__PURE__ */ jsx("span", { className: "break-all", children: d.verificationRecord.value })
+                ] })
+              ] }) : null
+            ] }, d.id)),
+            domains.length === 0 ? /* @__PURE__ */ jsx("li", { className: "rounded-lg border border-border/40 border-dashed p-8 text-center text-body-sm text-muted-foreground", children: "No domains yet. Add one to route traffic to this project." }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+DomainConfig.displayName = "DomainConfig";
+
+export { DomainConfig };
+//# sourceMappingURL=chunk-JFKBFQA5.js.map
+//# sourceMappingURL=chunk-JFKBFQA5.js.map

package/dist/chunk-JFKBFQA5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/domain-config/domain-config.tsx"],"names":[],"mappings":"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","file":"chunk-JFKBFQA5.js","sourcesContent":["\"use client\";\n\nimport { Check, Globe, Plus, ShieldCheck, ShieldX, Trash2 } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { Badge } from \"../../primitives/badge/index.js\";\nimport { Button } from \"../../primitives/button/index.js\";\nimport { Input } from \"../../primitives/input/index.js\";\n\nexport type DomainStatus = \"verified\" | \"pending\" | \"invalid\";\n\nexport interface Domain {\n  id: string;\n  hostname: string;\n  status: DomainStatus;\n  primary?: boolean;\n  /**\n   * TLS state. If true, certificate is provisioned & valid.\n   */\n  tls?: boolean;\n  /**\n   * DNS record the user must add to verify ownership.\n   */\n  verificationRecord?: {\n    type: \"TXT\" | \"CNAME\" | \"A\";\n    name: string;\n    value: string;\n  };\n}\n\nconst statusVariant: Record<DomainStatus, \"success\" | \"warning\" | \"destructive\"> = {\n  verified: \"success\",\n  pending: \"warning\",\n  invalid: \"destructive\",\n};\nconst statusDot: Record<DomainStatus, \"success\" | \"warning\" | \"destructive\"> = {\n  verified: \"success\",\n  pending: \"warning\",\n  invalid: \"destructive\",\n};\nconst statusLabel: Record<DomainStatus, string> = {\n  verified: \"Verified\",\n  pending: \"Pending DNS\",\n  invalid: \"Invalid\",\n};\n\ninterface DomainConfigProps extends HTMLAttributes<HTMLDivElement> {\n  domains: Domain[];\n  onAdd?: (hostname: string) => void;\n  onRemove?: (id: string) => void;\n  onSetPrimary?: (id: string) => void;\n}\n\n/**\n * DomainConfig — manage custom domains for a project.\n *\n * Shows: hostname, status, TLS, primary flag, and verification DNS record when pending.\n * Common in every cloud dashboard (Vercel, Railway, Render).\n */\nconst DomainConfig = forwardRef<HTMLDivElement, DomainConfigProps>(\n  ({ className, domains, onAdd, onRemove, onSetPrimary, ...props }, ref) => {\n    const [hostname, setHostname] = useState(\"\");\n\n    return (\n      <div\n        data-slot=\"domain-config\"\n        ref={ref}\n        className={cn(\"rounded-xl border bg-card p-5 shadow-sm\", className)}\n        {...props}\n      >\n        <header className=\"mb-4 flex items-baseline justify-between gap-3\">\n          <div>\n            <h3 className=\"font-display text-title-md tracking-tight\">Domains</h3>\n            <p className=\"text-body-sm text-muted-foreground\">{domains.length} configured</p>\n          </div>\n        </header>\n\n        {onAdd ? (\n          <form\n            className=\"mb-4 grid grid-cols-[1fr_auto] gap-2\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              const v = hostname.trim();\n              if (!v) return;\n              onAdd(v);\n              setHostname(\"\");\n            }}\n          >\n            <Input\n              placeholder=\"api.acme.com\"\n              value={hostname}\n              onChange={(e) => setHostname(e.target.value)}\n              aria-label=\"Hostname\"\n              className=\"font-mono\"\n            />\n            <Button type=\"submit\">\n              <Plus /> Add domain\n            </Button>\n          </form>\n        ) : null}\n\n        <ul className=\"grid gap-3\">\n          {domains.map((d) => (\n            <li key={d.id} className=\"grid gap-3 rounded-lg border border-border/40 p-4\">\n              <div className=\"flex flex-wrap items-center gap-3\">\n                <Globe className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n                <span className=\"font-mono text-code-md text-foreground\">{d.hostname}</span>\n                <Badge variant={statusVariant[d.status]}>\n                  <Badge.Dot tone={statusDot[d.status]} pulse={d.status === \"pending\"} />\n                  {statusLabel[d.status]}\n                </Badge>\n                {d.tls === true ? (\n                  <Badge variant=\"primary\">\n                    <ShieldCheck className=\"size-3\" /> TLS\n                  </Badge>\n                ) : d.tls === false ? (\n                  <Badge variant=\"destructive\">\n                    <ShieldX className=\"size-3\" /> No TLS\n                  </Badge>\n                ) : null}\n                {d.primary ? (\n                  <Badge variant=\"accent\">\n                    <Check className=\"size-3\" /> Primary\n                  </Badge>\n                ) : null}\n                <div className=\"ml-auto flex items-center gap-1\">\n                  {!d.primary && onSetPrimary ? (\n                    <Button size=\"sm\" variant=\"ghost\" onClick={() => onSetPrimary(d.id)}>\n                      Set primary\n                    </Button>\n                  ) : null}\n                  {onRemove ? (\n                    <Button\n                      size=\"icon\"\n                      variant=\"ghost\"\n                      onClick={() => onRemove(d.id)}\n                      aria-label={`Remove ${d.hostname}`}\n                    >\n                      <Trash2 />\n                    </Button>\n                  ) : null}\n                </div>\n              </div>\n              {d.status === \"pending\" && d.verificationRecord ? (\n                <div className=\"rounded-md border border-border/60 border-dashed bg-muted/30 p-3 font-mono text-code-sm\">\n                  <p className=\"mb-2 font-sans text-label-caps text-muted-foreground uppercase\">\n                    Add this DNS record to verify\n                  </p>\n                  <div className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-1\">\n                    <span className=\"text-muted-foreground\">type</span>\n                    <span>{d.verificationRecord.type}</span>\n                    <span className=\"text-muted-foreground\">name</span>\n                    <span>{d.verificationRecord.name}</span>\n                    <span className=\"text-muted-foreground\">value</span>\n                    <span className=\"break-all\">{d.verificationRecord.value}</span>\n                  </div>\n                </div>\n              ) : null}\n            </li>\n          ))}\n          {domains.length === 0 ? (\n            <li className=\"rounded-lg border border-border/40 border-dashed p-8 text-center text-body-sm text-muted-foreground\">\n              No domains yet. Add one to route traffic to this project.\n            </li>\n          ) : null}\n        </ul>\n      </div>\n    );\n  },\n);\nDomainConfig.displayName = \"DomainConfig\";\n\nexport { DomainConfig };\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"]}

package/dist/chunk-JQTCCKZA.js

@@ -0,0 +1,154 @@
+"use client";
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef, useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var SIZE_CLASS = {
+  sm: "size-8 text-body-sm",
+  md: "size-10 text-body-md",
+  lg: "size-12 text-title-sm"
+};
+function sanitize(raw, inputMode) {
+  const noWhitespace = raw.replace(/\s/g, "");
+  if (inputMode === "numeric") {
+    return noWhitespace.replace(/\D/g, "");
+  }
+  return noWhitespace.toUpperCase().replace(/[^A-Z0-9]/g, "");
+}
+var PinInput = forwardRef(
+  ({
+    className,
+    length = 6,
+    value = "",
+    onChange,
+    onComplete,
+    inputMode = "numeric",
+    size = "md",
+    disabled = false,
+    error = false,
+    autoFocus = false,
+    mask = false,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const inputRefs = useRef([]);
+    const wasCompleteRef = useRef(value.length === length);
+    useEffect(() => {
+      if (!autoFocus) return;
+      if (typeof window === "undefined") return;
+      inputRefs.current[0]?.focus();
+    }, [autoFocus]);
+    useEffect(() => {
+      const isComplete = value.length === length && value.length > 0;
+      if (isComplete && !wasCompleteRef.current) {
+        onComplete?.(value);
+      }
+      wasCompleteRef.current = isComplete;
+    }, [value, length, onComplete]);
+    function commit(next) {
+      const sanitized = sanitize(next, inputMode).slice(0, length);
+      onChange?.(sanitized);
+    }
+    function handleChange(slot, raw) {
+      const sanitized = sanitize(raw, inputMode);
+      if (sanitized.length === 0) {
+        const next2 = `${value.slice(0, slot)}${value.slice(slot + 1)}`;
+        commit(next2);
+        return;
+      }
+      const ch = sanitized[sanitized.length - 1] ?? "";
+      const next = `${value.slice(0, slot)}${ch}${value.slice(slot + 1)}`;
+      commit(next);
+      if (slot < length - 1) {
+        inputRefs.current[slot + 1]?.focus();
+      }
+    }
+    function handleKeyDown(slot, e) {
+      if (disabled) return;
+      const slotChar = value[slot] ?? "";
+      if (e.key === "Backspace") {
+        if (slotChar === "") {
+          if (slot > 0) {
+            inputRefs.current[slot - 1]?.focus();
+          }
+        } else {
+          const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;
+          commit(next);
+        }
+        e.preventDefault();
+      } else if (e.key === "ArrowLeft") {
+        if (slot > 0) inputRefs.current[slot - 1]?.focus();
+        e.preventDefault();
+      } else if (e.key === "ArrowRight") {
+        if (slot < length - 1) inputRefs.current[slot + 1]?.focus();
+        e.preventDefault();
+      }
+    }
+    function handlePaste(slot, e) {
+      if (disabled) return;
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text/plain");
+      const sanitized = sanitize(pasted, inputMode);
+      if (sanitized.length === 0) return;
+      const slotArr = Array.from({ length }, (_, i) => value[i] ?? "");
+      const remaining = length - slot;
+      const filled = sanitized.slice(0, remaining);
+      for (let i = 0; i < filled.length; i++) {
+        slotArr[slot + i] = filled[i] ?? "";
+      }
+      const next = slotArr.join("");
+      commit(next);
+      const focusAt = Math.min(slot + filled.length, length - 1);
+      requestAnimationFrame(() => inputRefs.current[focusAt]?.focus());
+    }
+    const slots = Array.from({ length }, (_, i) => i);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "pin-input",
+        ref,
+        role: "group",
+        "aria-label": ariaLabel,
+        className: cn("inline-flex items-center gap-2", className),
+        ...props,
+        children: slots.map((i) => {
+          const ch = value[i] ?? "";
+          const display = mask && ch !== "" ? "\u2022" : ch;
+          return /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: (el) => {
+                inputRefs.current[i] = el;
+              },
+              type: "text",
+              inputMode: inputMode === "numeric" ? "numeric" : "text",
+              pattern: inputMode === "numeric" ? "[0-9]*" : void 0,
+              maxLength: 1,
+              autoComplete: i === 0 ? "one-time-code" : "off",
+              disabled,
+              value: display,
+              onChange: (e) => handleChange(i, e.target.value),
+              onKeyDown: (e) => handleKeyDown(i, e),
+              onPaste: (e) => handlePaste(i, e),
+              "aria-label": `Digit ${i + 1} of ${length}`,
+              className: cn(
+                "rounded-md border bg-card text-center font-medium font-mono",
+                "transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                SIZE_CLASS[size],
+                error ? "border-destructive" : "border-border/60 hover:border-border"
+              )
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+);
+PinInput.displayName = "PinInput";
+
+export { PinInput };
+//# sourceMappingURL=chunk-JQTCCKZA.js.map
+//# sourceMappingURL=chunk-JQTCCKZA.js.map

package/dist/chunk-JQTCCKZA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/pin-input/pin-input.tsx"],"names":["next"],"mappings":"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","file":"chunk-JQTCCKZA.js","sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport type { ClipboardEvent, HTMLAttributes, KeyboardEvent } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * PinInput — multi-slot OTP / code input primitive.\n *\n * Renders N separate boxes (default 6) that auto-advance focus on\n * input. Paste handling fills all slots from clipboard (whitespace\n * stripped). Arrow keys navigate; backspace clears current slot\n * then moves focus back when empty.\n *\n * Industry-standard pattern for email verification codes (Apple,\n * Stripe, Clerk, Auth0, GitHub two-factor).\n *\n * @example\n *   <PinInput\n *     length={6}\n *     value={code}\n *     onChange={setCode}\n *     onComplete={(v) => verify(v)}\n *     inputMode=\"numeric\"\n *     aria-label=\"Verification code\"\n *   />\n *\n * Note: value is treated as controlled. If you pass a complete value\n * on mount, onComplete will NOT fire — onComplete fires only on\n * transitions from incomplete → complete.\n */\nexport interface PinInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"inputMode\"> {\n  length?: number;\n  value?: string;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n  inputMode?: \"numeric\" | \"alphanumeric\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  disabled?: boolean;\n  error?: boolean;\n  \"aria-label\": string;\n  autoFocus?: boolean;\n  mask?: boolean;\n}\n\nconst SIZE_CLASS: Record<NonNullable<PinInputProps[\"size\"]>, string> = {\n  sm: \"size-8 text-body-sm\",\n  md: \"size-10 text-body-md\",\n  lg: \"size-12 text-title-sm\",\n};\n\nfunction sanitize(raw: string, inputMode: \"numeric\" | \"alphanumeric\"): string {\n  const noWhitespace = raw.replace(/\\s/g, \"\");\n  if (inputMode === \"numeric\") {\n    return noWhitespace.replace(/\\D/g, \"\");\n  }\n  return noWhitespace.toUpperCase().replace(/[^A-Z0-9]/g, \"\");\n}\n\nconst PinInput = forwardRef<HTMLDivElement, PinInputProps>(\n  (\n    {\n      className,\n      length = 6,\n      value = \"\",\n      onChange,\n      onComplete,\n      inputMode = \"numeric\",\n      size = \"md\",\n      disabled = false,\n      error = false,\n      autoFocus = false,\n      mask = false,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n    const wasCompleteRef = useRef<boolean>(value.length === length);\n\n    // Auto-focus first slot on mount (SSR-safe)\n    useEffect(() => {\n      if (!autoFocus) return;\n      if (typeof window === \"undefined\") return;\n      inputRefs.current[0]?.focus();\n    }, [autoFocus]);\n\n    // Fire onComplete on transitions from incomplete → complete\n    useEffect(() => {\n      const isComplete = value.length === length && value.length > 0;\n      if (isComplete && !wasCompleteRef.current) {\n        onComplete?.(value);\n      }\n      wasCompleteRef.current = isComplete;\n    }, [value, length, onComplete]);\n\n    function commit(next: string) {\n      const sanitized = sanitize(next, inputMode).slice(0, length);\n      onChange?.(sanitized);\n    }\n\n    function handleChange(slot: number, raw: string) {\n      const sanitized = sanitize(raw, inputMode);\n      if (sanitized.length === 0) {\n        // Clear current slot\n        const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n        commit(next);\n        return;\n      }\n      // Take the last character typed (handles browser autocomplete that fills multiple)\n      const ch = sanitized[sanitized.length - 1] ?? \"\";\n      const next = `${value.slice(0, slot)}${ch}${value.slice(slot + 1)}`;\n      commit(next);\n      // Advance focus\n      if (slot < length - 1) {\n        inputRefs.current[slot + 1]?.focus();\n      }\n    }\n\n    function handleKeyDown(slot: number, e: KeyboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      const slotChar = value[slot] ?? \"\";\n\n      if (e.key === \"Backspace\") {\n        if (slotChar === \"\") {\n          // Move focus back if current is empty\n          if (slot > 0) {\n            inputRefs.current[slot - 1]?.focus();\n          }\n        } else {\n          // Clear current slot, stay focused\n          const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n          commit(next);\n        }\n        e.preventDefault();\n      } else if (e.key === \"ArrowLeft\") {\n        if (slot > 0) inputRefs.current[slot - 1]?.focus();\n        e.preventDefault();\n      } else if (e.key === \"ArrowRight\") {\n        if (slot < length - 1) inputRefs.current[slot + 1]?.focus();\n        e.preventDefault();\n      }\n    }\n\n    function handlePaste(slot: number, e: ClipboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      e.preventDefault();\n      const pasted = e.clipboardData.getData(\"text/plain\");\n      const sanitized = sanitize(pasted, inputMode);\n      if (sanitized.length === 0) return;\n      // Build slot-indexed array, then overwrite from `slot` onwards.\n      // Previous string-concat approach didn't pad when value was shorter\n      // than `slot`, which made paste-from-middle-when-empty fill from 0.\n      const slotArr: string[] = Array.from({ length }, (_, i) => value[i] ?? \"\");\n      const remaining = length - slot;\n      const filled = sanitized.slice(0, remaining);\n      for (let i = 0; i < filled.length; i++) {\n        slotArr[slot + i] = filled[i] ?? \"\";\n      }\n      const next = slotArr.join(\"\");\n      commit(next);\n      // Focus the slot after the last filled, or the last slot if completed\n      const focusAt = Math.min(slot + filled.length, length - 1);\n      requestAnimationFrame(() => inputRefs.current[focusAt]?.focus());\n    }\n\n    const slots = Array.from({ length }, (_, i) => i);\n\n    return (\n      <div\n        data-slot=\"pin-input\"\n        ref={ref}\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force a different visual layout (rectangular border by default) and is form-bound; we use a div with role=\"group\" + aria-label for grouping semantics.\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\"inline-flex items-center gap-2\", className)}\n        {...props}\n      >\n        {slots.map((i) => {\n          const ch = value[i] ?? \"\";\n          const display = mask && ch !== \"\" ? \"•\" : ch;\n          return (\n            <input\n              key={i}\n              ref={(el) => {\n                inputRefs.current[i] = el;\n              }}\n              type=\"text\"\n              inputMode={inputMode === \"numeric\" ? \"numeric\" : \"text\"}\n              pattern={inputMode === \"numeric\" ? \"[0-9]*\" : undefined}\n              maxLength={1}\n              autoComplete={i === 0 ? \"one-time-code\" : \"off\"}\n              disabled={disabled}\n              value={display}\n              onChange={(e) => handleChange(i, e.target.value)}\n              onKeyDown={(e) => handleKeyDown(i, e)}\n              onPaste={(e) => handlePaste(i, e)}\n              aria-label={`Digit ${i + 1} of ${length}`}\n              className={cn(\n                \"rounded-md border bg-card text-center font-medium font-mono\",\n                \"transition-colors\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n                SIZE_CLASS[size],\n                error ? \"border-destructive\" : \"border-border/60 hover:border-border\",\n              )}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\nPinInput.displayName = \"PinInput\";\n\nexport { PinInput };\n"]}