@usetheo/ui 0.9.0-next.0 → 0.11.0-next.0

package/dist/chunk-LEEH63B2.js

@@ -0,0 +1,56 @@
+import { useInLiveRegion } from './chunk-UGKI466V.js';
+import { cn } from './chunk-ZSRJCIWF.js';
+import { Terminal } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var kindColor = {
+  command: "text-foreground",
+  stdout: "text-muted-foreground",
+  stderr: "text-destructive",
+  ok: "text-success",
+  prompt: "text-primary"
+};
+var TerminalPanel = forwardRef(
+  ({ className, title = "Terminal", lines, promptPrefix = "$", live = "off", ...props }, ref) => {
+    const inLiveRegion = useInLiveRegion();
+    const effectiveLive = inLiveRegion ? "off" : live;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("overflow-hidden rounded-xl border bg-card", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-2 border-border/40 border-b px-3 py-2", children: [
+            /* @__PURE__ */ jsx(Terminal, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "font-sans text-label-caps text-muted-foreground uppercase tracking-wider", children: title })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "ol",
+            {
+              className: "grid gap-0.5 px-3 py-2 font-mono text-code-sm",
+              "aria-live": effectiveLive,
+              "aria-atomic": "false",
+              children: lines.map((line) => {
+                const kind = line.kind ?? "stdout";
+                return /* @__PURE__ */ jsx("li", { className: cn("whitespace-pre-wrap", kindColor[kind]), children: kind === "command" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("span", { className: "select-none text-primary", children: [
+                    promptPrefix,
+                    " "
+                  ] }),
+                  line.content
+                ] }) : kind === "prompt" ? /* @__PURE__ */ jsx("span", { className: "motion-safe:animate-pulse", children: line.content }) : line.content }, line.id);
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TerminalPanel.displayName = "TerminalPanel";
+
+export { TerminalPanel };
+//# sourceMappingURL=chunk-LEEH63B2.js.map
+//# sourceMappingURL=chunk-LEEH63B2.js.map

package/dist/chunk-LEEH63B2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/terminal-panel/terminal-panel.tsx"],"names":["TerminalIcon"],"mappings":";;;;;;AA8BA,IAAM,SAAA,GAA+D;AAAA,EACnE,OAAA,EAAS,iBAAA;AAAA,EACT,MAAA,EAAQ,uBAAA;AAAA,EACR,MAAA,EAAQ,kBAAA;AAAA,EACR,EAAA,EAAI,cAAA;AAAA,EACJ,MAAA,EAAQ;AACV,CAAA;AASA,IAAM,aAAA,GAAgB,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,UAAA,EAAY,KAAA,EAAO,YAAA,GAAe,GAAA,EAAK,IAAA,GAAO,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAE7F,IAAA,MAAM,eAAe,eAAA,EAAgB;AACrC,IAAA,MAAM,aAAA,GAAgB,eAAe,KAAA,GAAQ,IAAA;AAC7C,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,2CAAA,EAA6C,SAAS,CAAA;AAAA,QACnE,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,QAAA,EAAA,EAAO,WAAU,6DAAA,EAChB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAACA,QAAA,EAAA,EAAa,SAAA,EAAU,gCAAA,EAAiC,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,4BAC5E,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0EAAA,EACb,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,+CAAA;AAAA,cACV,WAAA,EAAW,aAAA;AAAA,cACX,aAAA,EAAY,OAAA;AAAA,cAEX,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,gBAAA,MAAM,IAAA,GAAO,KAAK,IAAA,IAAQ,QAAA;AAC1B,gBAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAiB,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAA,CAAU,IAAI,CAAC,CAAA,EACnE,QAAA,EAAA,IAAA,KAAS,SAAA,mBACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,kCAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,0BAAA,EAA4B,QAAA,EAAA;AAAA,oBAAA,YAAA;AAAA,oBAAa;AAAA,mBAAA,EAAC,CAAA;AAAA,kBACzD,IAAA,CAAK;AAAA,iBAAA,EACR,CAAA,GACE,IAAA,KAAS,QAAA,mBACX,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2BAAA,EAA6B,QAAA,EAAA,IAAA,CAAK,OAAA,EAAQ,CAAA,GAE1D,IAAA,CAAK,OAAA,EAAA,EATA,KAAK,EAWd,CAAA;AAAA,cAEJ,CAAC;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,aAAA,CAAc,WAAA,GAAc,eAAA","file":"chunk-LEEH63B2.js","sourcesContent":["import { Terminal as TerminalIcon } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { useInLiveRegion } from \"../../../lib/live-region-context.js\";\n\nexport interface TerminalLine {\n  id: string;\n  /**\n   * Visual kind: command (prompted), stdout, stderr, ok (success), prompt (active line).\n   */\n  kind?: \"command\" | \"stdout\" | \"stderr\" | \"ok\" | \"prompt\";\n  content: ReactNode;\n}\n\ninterface TerminalPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  lines: TerminalLine[];\n  /**\n   * Optional prompt prefix for commands, defaults to \"$\".\n   */\n  promptPrefix?: string;\n  /**\n   * Live-region politeness for screen readers. Use `\"polite\"` when streaming\n   * fresh output so assistive tech announces new lines without interrupting.\n   * Default `\"off\"` for static / historical views.\n   */\n  live?: \"off\" | \"polite\";\n}\n\nconst kindColor: Record<NonNullable<TerminalLine[\"kind\"]>, string> = {\n  command: \"text-foreground\",\n  stdout: \"text-muted-foreground\",\n  stderr: \"text-destructive\",\n  ok: \"text-success\",\n  prompt: \"text-primary\",\n};\n\n/**\n * TerminalPanel — minimal terminal output viewer.\n *\n * Visual: dark card with mono font, \"$ \" prefix on command lines, color-coded\n * stdout/stderr/success. No interactivity (read-only) — pair with your own\n * pty/xterm for live shells if needed.\n */\nconst TerminalPanel = forwardRef<HTMLDivElement, TerminalPanelProps>(\n  ({ className, title = \"Terminal\", lines, promptPrefix = \"$\", live = \"off\", ...props }, ref) => {\n    // T4.1 (MF-4): suppress own aria-live when nested in container live region.\n    const inLiveRegion = useInLiveRegion();\n    const effectiveLive = inLiveRegion ? \"off\" : live;\n    return (\n      <div\n        ref={ref}\n        className={cn(\"overflow-hidden rounded-xl border bg-card\", className)}\n        {...props}\n      >\n        <header className=\"flex items-center gap-2 border-border/40 border-b px-3 py-2\">\n          <TerminalIcon className=\"size-3.5 text-muted-foreground\" aria-hidden=\"true\" />\n          <span className=\"font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {title}\n          </span>\n        </header>\n        <ol\n          className=\"grid gap-0.5 px-3 py-2 font-mono text-code-sm\"\n          aria-live={effectiveLive}\n          aria-atomic=\"false\"\n        >\n          {lines.map((line) => {\n            const kind = line.kind ?? \"stdout\";\n            return (\n              <li key={line.id} className={cn(\"whitespace-pre-wrap\", kindColor[kind])}>\n                {kind === \"command\" ? (\n                  <>\n                    <span className=\"select-none text-primary\">{promptPrefix} </span>\n                    {line.content}\n                  </>\n                ) : kind === \"prompt\" ? (\n                  <span className=\"motion-safe:animate-pulse\">{line.content}</span>\n                ) : (\n                  line.content\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n    );\n  },\n);\nTerminalPanel.displayName = \"TerminalPanel\";\n\nexport { TerminalPanel };\n"]}

package/dist/chunk-LHRWVM3G.js

@@ -0,0 +1,42 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var StepsRail = forwardRef(
+  ({ className, steps, title, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      ref,
+      className: cn(
+        "flex w-14 flex-col items-center gap-6 border-border/40 border-l py-6",
+        className
+      ),
+      "aria-label": "Task steps",
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsx("span", { className: "font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: title }) : null,
+        /* @__PURE__ */ jsx("ol", { className: "before:-translate-x-1/2 relative grid place-items-center gap-6 before:absolute before:top-3 before:bottom-3 before:left-1/2 before:w-px before:bg-border/60", children: steps.map((step, idx) => {
+          const state = step.state ?? (idx === 0 ? "current" : "pending");
+          return /* @__PURE__ */ jsx("li", { className: "relative z-10", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "grid size-7 place-items-center rounded-full border-2 font-bold font-mono text-code-sm",
+                state === "complete" && "border-primary bg-primary text-primary-foreground",
+                state === "current" && "border-foreground bg-foreground text-background",
+                state === "pending" && "border-border bg-card text-muted-foreground"
+              ),
+              "aria-current": state === "current" ? "step" : void 0,
+              children: step.label ?? idx + 1
+            }
+          ) }, step.id);
+        }) })
+      ]
+    }
+  )
+);
+StepsRail.displayName = "StepsRail";
+
+export { StepsRail };
+//# sourceMappingURL=chunk-LHRWVM3G.js.map
+//# sourceMappingURL=chunk-LHRWVM3G.js.map

package/dist/chunk-LHRWVM3G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/steps-rail/steps-rail.tsx"],"names":[],"mappings":";;;;AA2BA,IAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,OAAO,GAAG,KAAA,IAAS,GAAA,qBACtC,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,sEAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,YAAA,EAAW,YAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0EAAA,EACb,iBACH,CAAA,GACE,IAAA;AAAA,wBACJ,GAAA,CAAC,QAAG,SAAA,EAAU,6JAAA,EACX,gBAAM,GAAA,CAAI,CAAC,MAAM,GAAA,KAAQ;AACxB,UAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,KAAA,KAAU,GAAA,KAAQ,IAAI,SAAA,GAAY,SAAA,CAAA;AACrD,UAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAiB,SAAA,EAAU,eAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,uFAAA;AAAA,gBACA,UAAU,UAAA,IAAc,mDAAA;AAAA,gBACxB,UAAU,SAAA,IAAa,iDAAA;AAAA,gBACvB,UAAU,SAAA,IAAa;AAAA,eACzB;AAAA,cACA,cAAA,EAAc,KAAA,KAAU,SAAA,GAAY,MAAA,GAAS,MAAA;AAAA,cAE5C,QAAA,EAAA,IAAA,CAAK,SAAS,GAAA,GAAM;AAAA;AAAA,WACvB,EAAA,EAXO,KAAK,EAYd,CAAA;AAAA,QAEJ,CAAC,CAAA,EACH;AAAA;AAAA;AAAA;AAGN;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-LHRWVM3G.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport interface RailStep {\n  id: string | number;\n  label?: ReactNode;\n  /**\n   * Visual state: \"complete\", \"current\", \"pending\".\n   */\n  state?: \"complete\" | \"current\" | \"pending\";\n}\n\ninterface StepsRailProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  steps: RailStep[];\n  /**\n   * Optional label rendered at the top of the rail (e.g. \"STEPS\").\n   */\n  title?: ReactNode;\n}\n\n/**\n * StepsRail — vertical numbered rail with connecting line.\n *\n * Mirrors the file-organisation wiremock right rail: 5 numbered dots, current\n * highlighted, line connecting them.\n */\nconst StepsRail = forwardRef<HTMLElement, StepsRailProps>(\n  ({ className, steps, title, ...props }, ref) => (\n    <aside\n      ref={ref}\n      className={cn(\n        \"flex w-14 flex-col items-center gap-6 border-border/40 border-l py-6\",\n        className,\n      )}\n      aria-label=\"Task steps\"\n      {...props}\n    >\n      {title ? (\n        <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n          {title}\n        </span>\n      ) : null}\n      <ol className=\"before:-translate-x-1/2 relative grid place-items-center gap-6 before:absolute before:top-3 before:bottom-3 before:left-1/2 before:w-px before:bg-border/60\">\n        {steps.map((step, idx) => {\n          const state = step.state ?? (idx === 0 ? \"current\" : \"pending\");\n          return (\n            <li key={step.id} className=\"relative z-10\">\n              <span\n                className={cn(\n                  \"grid size-7 place-items-center rounded-full border-2 font-bold font-mono text-code-sm\",\n                  state === \"complete\" && \"border-primary bg-primary text-primary-foreground\",\n                  state === \"current\" && \"border-foreground bg-foreground text-background\",\n                  state === \"pending\" && \"border-border bg-card text-muted-foreground\",\n                )}\n                aria-current={state === \"current\" ? \"step\" : undefined}\n              >\n                {step.label ?? idx + 1}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </aside>\n  ),\n);\nStepsRail.displayName = \"StepsRail\";\n\nexport { StepsRail };\n"]}

package/dist/chunk-LIGWMGXM.js

@@ -0,0 +1,117 @@
+import { safeHref } from './chunk-673R3GSK.js';
+import { BadgeWithDot } from './chunk-O23LKHUR.js';
+import { cn } from './chunk-ZSRJCIWF.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"
+};
+var statusToDot = {
+  queued: "warning",
+  building: "primary",
+  deploying: "primary",
+  live: "success",
+  failed: "destructive",
+  cancelled: "muted"
+};
+var statusLabels = {
+  queued: "Queued",
+  building: "Building",
+  deploying: "Deploying",
+  live: "Live",
+  failed: "Failed",
+  cancelled: "Cancelled"
+};
+var PreviewEnvCard = forwardRef(
+  ({ className, env, actions, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "article",
+    {
+      ref,
+      className: cn(
+        "rounded-xl 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-LIGWMGXM.js.map
+//# sourceMappingURL=chunk-LIGWMGXM.js.map

package/dist/chunk-LIGWMGXM.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-LIGWMGXM.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};\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};\nconst statusLabels: Record<DeploymentStatus, string> = {\n  queued: \"Queued\",\n  building: \"Building\",\n  deploying: \"Deploying\",\n  live: \"Live\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\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      ref={ref}\n      className={cn(\n        \"rounded-xl 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-LKYSX3QF.js

@@ -0,0 +1,104 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { Coins, TrendingUp, TrendingDown } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var formatUsd = (n) => n >= 100 ? `$${n.toFixed(0)}` : n >= 10 ? `$${n.toFixed(1)}` : `$${n.toFixed(2)}`;
+var CostMeter = forwardRef(
+  ({ className, cost, budget, title = "Spend", delta, compact, ...props }, ref) => {
+    if (compact) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card px-2.5 py-1",
+            "font-mono text-label",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(Coins, { className: "size-3 text-primary", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground tabular-nums", children: formatUsd(cost) }),
+            budget ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              "/ ",
+              formatUsd(budget)
+            ] }) : null
+          ]
+        }
+      );
+    }
+    const ratio = budget ? Math.max(0, Math.min(1, cost / budget)) : 0;
+    const percent = Math.round(ratio * 100);
+    const overBudget = budget !== void 0 && cost > budget;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("grid gap-2 rounded-xl border bg-card p-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: title }),
+            delta ? /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-1 font-mono text-body-sm tabular-nums",
+                  delta.value >= 0 ? "text-warning" : "text-success"
+                ),
+                children: [
+                  delta.value >= 0 ? /* @__PURE__ */ jsx(TrendingUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "size-3", "aria-hidden": "true" }),
+                  delta.value >= 0 ? "+" : "",
+                  formatUsd(Math.abs(delta.value)),
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: delta.period })
+                ]
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-bold font-display text-display-md text-foreground tabular-nums leading-none", children: formatUsd(cost) }),
+            budget !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "font-mono text-body-sm text-muted-foreground", children: [
+              "of ",
+              formatUsd(budget)
+            ] }) : null
+          ] }),
+          budget !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+                role: "progressbar",
+                tabIndex: -1,
+                "aria-valuenow": percent,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-full rounded-full transition-[width,background-color]",
+                      overBudget ? "bg-destructive" : ratio > 0.75 ? "bg-warning" : "bg-primary"
+                    ),
+                    style: { width: `${Math.min(100, percent)}%` }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: [
+              percent,
+              "% of budget ",
+              overBudget ? "\xB7 over!" : "used"
+            ] })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+CostMeter.displayName = "CostMeter";
+
+export { CostMeter };
+//# sourceMappingURL=chunk-LKYSX3QF.js.map
+//# sourceMappingURL=chunk-LKYSX3QF.js.map

package/dist/chunk-LKYSX3QF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/cost-meter/cost-meter.tsx"],"names":[],"mappings":"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","file":"chunk-LKYSX3QF.js","sourcesContent":["import { Coins, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\ninterface CostMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Current cost in USD. */\n  cost: number;\n  /** Optional monthly budget; renders progress bar when present. */\n  budget?: number;\n  /** Optional title (e.g. \"This session\", \"Monthly\"). */\n  title?: ReactNode;\n  /** Optional delta vs previous period. */\n  delta?: { value: number; period: string };\n  /** Compact mode — single-line summary. */\n  compact?: boolean;\n}\n\nconst formatUsd = (n: number) =>\n  n >= 100 ? `$${n.toFixed(0)}` : n >= 10 ? `$${n.toFixed(1)}` : `$${n.toFixed(2)}`;\n\n/**\n * CostMeter — gauge for token spend. Two visuals:\n *   - card: title + big number + optional progress bar + optional delta.\n *   - compact: chip \"Coins $4.20\" for nav bars.\n */\nconst CostMeter = forwardRef<HTMLDivElement, CostMeterProps>(\n  ({ className, cost, budget, title = \"Spend\", delta, compact, ...props }, ref) => {\n    if (compact) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            \"inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card px-2.5 py-1\",\n            \"font-mono text-label\",\n            className,\n          )}\n          {...props}\n        >\n          <Coins className=\"size-3 text-primary\" aria-hidden=\"true\" />\n          <span className=\"text-foreground tabular-nums\">{formatUsd(cost)}</span>\n          {budget ? <span className=\"text-muted-foreground\">/ {formatUsd(budget)}</span> : null}\n        </div>\n      );\n    }\n\n    const ratio = budget ? Math.max(0, Math.min(1, cost / budget)) : 0;\n    const percent = Math.round(ratio * 100);\n    const overBudget = budget !== undefined && cost > budget;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"grid gap-2 rounded-xl border bg-card p-4\", className)}\n        {...props}\n      >\n        <header className=\"flex items-baseline justify-between\">\n          <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {title}\n          </span>\n          {delta ? (\n            <span\n              className={cn(\n                \"inline-flex items-center gap-1 font-mono text-body-sm tabular-nums\",\n                delta.value >= 0 ? \"text-warning\" : \"text-success\",\n              )}\n            >\n              {delta.value >= 0 ? (\n                <TrendingUp className=\"size-3\" aria-hidden=\"true\" />\n              ) : (\n                <TrendingDown className=\"size-3\" aria-hidden=\"true\" />\n              )}\n              {delta.value >= 0 ? \"+\" : \"\"}\n              {formatUsd(Math.abs(delta.value))}{\" \"}\n              <span className=\"text-muted-foreground\">{delta.period}</span>\n            </span>\n          ) : null}\n        </header>\n        <div className=\"flex items-baseline gap-1.5\">\n          <span className=\"font-bold font-display text-display-md text-foreground tabular-nums leading-none\">\n            {formatUsd(cost)}\n          </span>\n          {budget !== undefined ? (\n            <span className=\"font-mono text-body-sm text-muted-foreground\">\n              of {formatUsd(budget)}\n            </span>\n          ) : null}\n        </div>\n        {budget !== undefined ? (\n          <div className=\"grid gap-1\">\n            <div\n              className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n              role=\"progressbar\"\n              tabIndex={-1}\n              aria-valuenow={percent}\n              aria-valuemin={0}\n              aria-valuemax={100}\n            >\n              <div\n                className={cn(\n                  \"h-full rounded-full transition-[width,background-color]\",\n                  overBudget ? \"bg-destructive\" : ratio > 0.75 ? \"bg-warning\" : \"bg-primary\",\n                )}\n                style={{ width: `${Math.min(100, percent)}%` }}\n              />\n            </div>\n            <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n              {percent}% of budget {overBudget ? \"· over!\" : \"used\"}\n            </span>\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nCostMeter.displayName = \"CostMeter\";\n\nexport { CostMeter };\n"]}

package/dist/chunk-MCIFB6VS.js

@@ -0,0 +1,54 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { FileText, FileCode, FileSpreadsheet, FileImage, File, X } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var typeIcon = {
+  image: FileImage,
+  spreadsheet: FileSpreadsheet,
+  code: FileCode,
+  text: FileText
+};
+var AttachmentChip = forwardRef(
+  ({ className, attachment, onRemove, ...props }, ref) => {
+    const Icon = (attachment.type ? typeIcon[attachment.type] : void 0) ?? File;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex max-w-[18rem] items-center gap-2 rounded-md border border-border/40 bg-muted/60 px-2 py-1",
+          "font-mono text-code-sm text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0 text-primary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", title: attachment.name, children: attachment.name }),
+          attachment.size ? /* @__PURE__ */ jsxs("span", { children: [
+            "\xB7 ",
+            attachment.size
+          ] }) : null,
+          onRemove ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(attachment.id),
+              "aria-label": `Remove ${attachment.name}`,
+              className: cn(
+                "ml-1 rounded-sm p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-destructive",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              ),
+              children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+AttachmentChip.displayName = "AttachmentChip";
+
+export { AttachmentChip };
+//# sourceMappingURL=chunk-MCIFB6VS.js.map
+//# sourceMappingURL=chunk-MCIFB6VS.js.map

package/dist/chunk-MCIFB6VS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/attachment-chip/attachment-chip.tsx"],"names":[],"mappings":";;;;;AAOA,IAAM,QAAA,GAA0C;AAAA,EAC9C,KAAA,EAAO,SAAA;AAAA,EACP,WAAA,EAAa,eAAA;AAAA,EACb,IAAA,EAAM,QAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAaA,IAAM,cAAA,GAAiB,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,UAAA,EAAY,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AACtD,IAAA,MAAM,QAAuB,UAAA,CAAW,IAAA,GAAO,SAAS,UAAA,CAAW,IAAI,IAAI,MAAA,KAAc,IAAA;AACzF,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,uGAAA;AAAA,UACA,8CAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,gCAAA,EAAiC,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BACpE,GAAA,CAAC,UAAK,SAAA,EAAU,0BAAA,EAA2B,OAAO,UAAA,CAAW,IAAA,EAC1D,qBAAW,IAAA,EACd,CAAA;AAAA,UACC,UAAA,CAAW,IAAA,mBAAO,IAAA,CAAC,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,YAAA,OAAA;AAAA,YAAG,UAAA,CAAW;AAAA,WAAA,EAAK,CAAA,GAAU,IAAA;AAAA,UACrD,QAAA,mBACC,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAS,MAAM,QAAA,CAAS,UAAA,CAAW,EAAE,CAAA;AAAA,cACrC,YAAA,EAAY,CAAA,OAAA,EAAU,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,cACrC,SAAA,EAAW,EAAA;AAAA,gBACT,qGAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA,WACxB,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"chunk-MCIFB6VS.js","sourcesContent":["import { File, FileCode, FileImage, FileSpreadsheet, FileText, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\nimport type { Attachment } from \"../../../types/chat.js\";\n\nconst typeIcon: Record<string, IconComponent> = {\n  image: FileImage,\n  spreadsheet: FileSpreadsheet,\n  code: FileCode,\n  text: FileText,\n};\n\ninterface AttachmentChipProps extends HTMLAttributes<HTMLDivElement> {\n  attachment: Attachment;\n  onRemove?: (id: string) => void;\n}\n\n/**\n * AttachmentChip — file pill shown in chat composer or message attachments row.\n *\n * Visual: rounded chip with type-icon + name + size + optional remove button.\n * Truncates the name with `text-ellipsis`; full name available via title.\n */\nconst AttachmentChip = forwardRef<HTMLDivElement, AttachmentChipProps>(\n  ({ className, attachment, onRemove, ...props }, ref) => {\n    const Icon: IconComponent = (attachment.type ? typeIcon[attachment.type] : undefined) ?? File;\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex max-w-[18rem] items-center gap-2 rounded-md border border-border/40 bg-muted/60 px-2 py-1\",\n          \"font-mono text-code-sm text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <Icon className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n        <span className=\"truncate text-foreground\" title={attachment.name}>\n          {attachment.name}\n        </span>\n        {attachment.size ? <span>· {attachment.size}</span> : null}\n        {onRemove ? (\n          <button\n            type=\"button\"\n            onClick={() => onRemove(attachment.id)}\n            aria-label={`Remove ${attachment.name}`}\n            className={cn(\n              \"ml-1 rounded-sm p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-destructive\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            <X className=\"size-3\" />\n          </button>\n        ) : null}\n      </div>\n    );\n  },\n);\nAttachmentChip.displayName = \"AttachmentChip\";\n\nexport { AttachmentChip };\n"]}

package/dist/chunk-MI5CXMZU.js

@@ -0,0 +1,171 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, Circle, ChevronRight } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Trigger2 = DropdownMenuPrimitive.Trigger;
+var Portal2 = DropdownMenuPrimitive.Portal;
+var Group2 = DropdownMenuPrimitive.Group;
+var Sub2 = DropdownMenuPrimitive.Sub;
+var RadioGroup2 = DropdownMenuPrimitive.RadioGroup;
+var Content2 = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-32 overflow-hidden rounded-lg border border-border/40 bg-card p-1",
+      "text-card-foreground shadow-md",
+      "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out",
+      className
+    ),
+    ...props
+  }
+) }));
+Content2.displayName = "DropdownMenu.Content";
+var Item2 = forwardRef(
+  ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5",
+        "font-sans text-body-sm text-foreground outline-none",
+        "transition-colors",
+        "focus:bg-muted focus:text-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        inset && "pl-8",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Item2.displayName = "DropdownMenu.Item";
+var CheckboxItem2 = forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    checked,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-md py-1.5 pr-2 pl-8",
+      "font-sans text-body-sm text-foreground outline-none",
+      "transition-colors focus:bg-muted focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" }) }) }),
+      children
+    ]
+  }
+));
+CheckboxItem2.displayName = "DropdownMenu.CheckboxItem";
+var RadioItem2 = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-md py-1.5 pr-2 pl-8",
+      "font-sans text-body-sm text-foreground outline-none",
+      "transition-colors focus:bg-muted focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: "size-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+RadioItem2.displayName = "DropdownMenu.RadioItem";
+var Label2 = forwardRef(
+  ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      ref,
+      className: cn(
+        "px-2 py-1.5 font-medium font-sans text-label-caps text-muted-foreground uppercase tracking-wider",
+        inset && "pl-8",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Label2.displayName = "DropdownMenu.Label";
+var Separator2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border/40", className),
+    ...props
+  }
+));
+Separator2.displayName = "DropdownMenu.Separator";
+var Shortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("ml-auto font-mono text-label text-muted-foreground", className),
+    ...props
+  }
+);
+Shortcut.displayName = "DropdownMenu.Shortcut";
+var SubTrigger2 = forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5",
+      "font-sans text-body-sm text-foreground outline-none",
+      "focus:bg-muted data-[state=open]:bg-muted",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "ml-auto size-3.5" })
+    ]
+  }
+));
+SubTrigger2.displayName = "DropdownMenu.SubTrigger";
+var SubContent2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-32 overflow-hidden rounded-lg border border-border/40 bg-card p-1",
+      "text-card-foreground shadow-md",
+      "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out",
+      className
+    ),
+    ...props
+  }
+));
+SubContent2.displayName = "DropdownMenu.SubContent";
+var DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {
+  Trigger: Trigger2,
+  Portal: Portal2,
+  Content: Content2,
+  Item: Item2,
+  CheckboxItem: CheckboxItem2,
+  RadioItem: RadioItem2,
+  Label: Label2,
+  Separator: Separator2,
+  Shortcut,
+  Group: Group2,
+  Sub: Sub2,
+  SubTrigger: SubTrigger2,
+  SubContent: SubContent2,
+  RadioGroup: RadioGroup2
+});
+
+export { DropdownMenu };
+//# sourceMappingURL=chunk-MI5CXMZU.js.map
+//# sourceMappingURL=chunk-MI5CXMZU.js.map