@elabs-ai/components-ai 4.1.0 → 5.0.0

package/dist/chunk-EY7LVUKQ.js

@@ -0,0 +1,87 @@
+"use client";
+
+// src/snippet.tsx
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useCopyToClipboard, useLocale } from "@elabs-ai/components-ui";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var SnippetContext = createContext({
+  code: ""
+});
+var Snippet = ({ code, className, children, ...props }) => {
+  const contextValue = useMemo(() => ({ code }), [code]);
+  return /* @__PURE__ */ jsx(SnippetContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(InputGroup, { className: cn("font-mono", className), ...props, children }) });
+};
+var SnippetAddon = (props) => /* @__PURE__ */ jsx(InputGroupAddon, { ...props });
+var SnippetText = ({ className, ...props }) => /* @__PURE__ */ jsx(InputGroupText, { className: cn("ps-2 font-normal text-muted-foreground", className), ...props });
+var SnippetInput = ({ className, ...props }) => {
+  const { code } = useContext(SnippetContext);
+  return /* @__PURE__ */ jsx(
+    InputGroupInput,
+    {
+      className: cn("text-foreground", className),
+      readOnly: true,
+      value: code,
+      ...props
+    }
+  );
+};
+var SnippetCopyButton = ({
+  onCopy,
+  onError,
+  timeout,
+  children,
+  className,
+  ...props
+}) => {
+  const { t } = useLocale();
+  const { code } = useContext(SnippetContext);
+  const { copied: isCopied, copy } = useCopyToClipboard(
+    timeout === void 0 ? void 0 : { resetAfterMs: timeout }
+  );
+  const copyToClipboard = useCallback(async () => {
+    const ok = await copy(code);
+    if (ok) {
+      onCopy?.();
+    } else {
+      onError?.(new Error("Clipboard API not available"));
+    }
+  }, [copy, code, onCopy, onError]);
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      "aria-label": t("copy"),
+      className,
+      onClick: copyToClipboard,
+      size: "icon-sm",
+      title: t("copy"),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex animate-in fade-in-0 zoom-in-95 duration-fast ease-entrance",
+          children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5", size: 14 })
+        },
+        isCopied ? "check" : "copy"
+      )
+    }
+  );
+};
+
+export {
+  Snippet,
+  SnippetAddon,
+  SnippetText,
+  SnippetInput,
+  SnippetCopyButton
+};
+//# sourceMappingURL=chunk-EY7LVUKQ.js.map

package/dist/chunk-EY7LVUKQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/snippet.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { useCopyToClipboard, useLocale } from \"@elabs-ai/components-ui\";\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { createContext, useCallback, useContext, useMemo } from \"react\";\n\ninterface SnippetContextType {\n  code: string;\n}\n\nconst SnippetContext = createContext<SnippetContextType>({\n  code: \"\",\n});\n\nexport type SnippetProps = ComponentProps<typeof InputGroup> & {\n  code: string;\n};\n\nexport const Snippet = ({ code, className, children, ...props }: SnippetProps) => {\n  const contextValue = useMemo(() => ({ code }), [code]);\n\n  return (\n    <SnippetContext.Provider value={contextValue}>\n      <InputGroup className={cn(\"font-mono\", className)} {...props}>\n        {children}\n      </InputGroup>\n    </SnippetContext.Provider>\n  );\n};\n\nexport type SnippetAddonProps = ComponentProps<typeof InputGroupAddon>;\n\nexport const SnippetAddon = (props: SnippetAddonProps) => <InputGroupAddon {...props} />;\n\nexport type SnippetTextProps = ComponentProps<typeof InputGroupText>;\n\nexport const SnippetText = ({ className, ...props }: SnippetTextProps) => (\n  <InputGroupText className={cn(\"ps-2 font-normal text-muted-foreground\", className)} {...props} />\n);\n\nexport type SnippetInputProps = Omit<ComponentProps<typeof InputGroupInput>, \"readOnly\" | \"value\">;\n\nexport const SnippetInput = ({ className, ...props }: SnippetInputProps) => {\n  const { code } = useContext(SnippetContext);\n\n  return (\n    <InputGroupInput\n      className={cn(\"text-foreground\", className)}\n      readOnly\n      value={code}\n      {...props}\n    />\n  );\n};\n\nexport type SnippetCopyButtonProps = ComponentProps<typeof InputGroupButton> & {\n  onCopy?: () => void;\n  onError?: (error: Error) => void;\n  timeout?: number;\n};\n\nexport const SnippetCopyButton = ({\n  onCopy,\n  onError,\n  timeout,\n  children,\n  className,\n  ...props\n}: SnippetCopyButtonProps) => {\n  const { t } = useLocale();\n  const { code } = useContext(SnippetContext);\n  // Shared implementation (`@elabs-ai/components-ui`) instead of a private\n  // copy of the same copy-to-clipboard state machine (issue-workflow.md\n  // dedupe finding) — see `CodeBlockCopyButton` for the reference usage.\n  const { copied: isCopied, copy } = useCopyToClipboard(\n    timeout === undefined ? undefined : { resetAfterMs: timeout },\n  );\n\n  const copyToClipboard = useCallback(async () => {\n    const ok = await copy(code);\n    if (ok) {\n      onCopy?.();\n    } else {\n      onError?.(new Error(\"Clipboard API not available\"));\n    }\n  }, [copy, code, onCopy, onError]);\n\n  const Icon = isCopied ? CheckIcon : CopyIcon;\n\n  return (\n    <InputGroupButton\n      aria-label={t(\"copy\")}\n      className={className}\n      onClick={copyToClipboard}\n      size=\"icon-sm\"\n      title={t(\"copy\")}\n      {...props}\n    >\n      {children ?? (\n        <span\n          key={isCopied ? \"check\" : \"copy\"}\n          className=\"flex animate-in fade-in-0 zoom-in-95 duration-fast ease-entrance\"\n        >\n          <Icon className=\"size-3.5\" size={14} />\n        </span>\n      )}\n    </InputGroupButton>\n  );\n};\n"],"mappings":";;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,oBAAoB,iBAAiB;AAC9C,SAAS,WAAW,gBAAgB;AAEpC,SAAS,eAAe,aAAa,YAAY,eAAe;AAmB1D;AAbN,IAAM,iBAAiB,cAAkC;AAAA,EACvD,MAAM;AACR,CAAC;AAMM,IAAM,UAAU,CAAC,EAAE,MAAM,WAAW,UAAU,GAAG,MAAM,MAAoB;AAChF,QAAM,eAAe,QAAQ,OAAO,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;AAErD,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,cAC9B,8BAAC,cAAW,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OACpD,UACH,GACF;AAEJ;AAIO,IAAM,eAAe,CAAC,UAA6B,oBAAC,mBAAiB,GAAG,OAAO;AAI/E,IAAM,cAAc,CAAC,EAAE,WAAW,GAAG,MAAM,MAChD,oBAAC,kBAAe,WAAW,GAAG,0CAA0C,SAAS,GAAI,GAAG,OAAO;AAK1F,IAAM,eAAe,CAAC,EAAE,WAAW,GAAG,MAAM,MAAyB;AAC1E,QAAM,EAAE,KAAK,IAAI,WAAW,cAAc;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,mBAAmB,SAAS;AAAA,MAC1C,UAAQ;AAAA,MACR,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;AAQO,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA8B;AAC5B,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,QAAM,EAAE,KAAK,IAAI,WAAW,cAAc;AAI1C,QAAM,EAAE,QAAQ,UAAU,KAAK,IAAI;AAAA,IACjC,YAAY,SAAY,SAAY,EAAE,cAAc,QAAQ;AAAA,EAC9D;AAEA,QAAM,kBAAkB,YAAY,YAAY;AAC9C,UAAM,KAAK,MAAM,KAAK,IAAI;AAC1B,QAAI,IAAI;AACN,eAAS;AAAA,IACX,OAAO;AACL,gBAAU,IAAI,MAAM,6BAA6B,CAAC;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,QAAQ,OAAO,CAAC;AAEhC,QAAM,OAAO,WAAW,YAAY;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,EAAE,MAAM;AAAA,MACpB;AAAA,MACA,SAAS;AAAA,MACT,MAAK;AAAA,MACL,OAAO,EAAE,MAAM;AAAA,MACd,GAAG;AAAA,MAEH,sBACC;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV,8BAAC,QAAK,WAAU,YAAW,MAAM,IAAI;AAAA;AAAA,QAHhC,WAAW,UAAU;AAAA,MAI5B;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/chunk-F4C74F7M.js

@@ -0,0 +1,230 @@
+"use client";
+
+// src/test-results.tsx
+import { StatusBadge, StatusIcon, useLocale } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { ChevronRightIcon } from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var testStatusToCanonical = {
+  passed: "complete",
+  failed: "failed",
+  running: "running",
+  skipped: "skipped"
+};
+var TestResultsContext = createContext({});
+var formatDuration = (ms) => {
+  if (ms < 1e3) {
+    return `${ms}ms`;
+  }
+  return `${(ms / 1e3).toFixed(2)}s`;
+};
+var TestResultsHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex min-w-0 items-center justify-between border-b px-4 py-3", className),
+    ...props,
+    children
+  }
+);
+var TestResultsDuration = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { summary } = useContext(TestResultsContext);
+  if (!summary?.duration) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("shrink-0 text-muted-foreground text-body tabular-nums", className),
+      ...props,
+      children: children ?? formatDuration(summary.duration)
+    }
+  );
+};
+var TestResultsSummary = ({ className, children, ...props }) => {
+  const { summary } = useContext(TestResultsContext);
+  const { t } = useLocale();
+  if (!summary) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(StatusBadge, { size: "sm", status: "complete", children: t("ai.testResults.passedCount", { count: summary.passed }) }),
+    summary.failed > 0 && /* @__PURE__ */ jsx(StatusBadge, { size: "sm", status: "failed", children: t("ai.testResults.failedCount", { count: summary.failed }) }),
+    summary.skipped > 0 && /* @__PURE__ */ jsx(StatusBadge, { size: "sm", status: "skipped", children: t("ai.testResults.skippedCount", { count: summary.skipped }) })
+  ] }) });
+};
+var TestResults = ({ summary, className, children, ...props }) => {
+  const contextValue = useMemo(() => ({ summary }), [summary]);
+  return /* @__PURE__ */ jsx(TestResultsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-lg border bg-background", className), ...props, children: children ?? (summary && /* @__PURE__ */ jsxs(TestResultsHeader, { children: [
+    /* @__PURE__ */ jsx(TestResultsSummary, {}),
+    /* @__PURE__ */ jsx(TestResultsDuration, {})
+  ] })) }) });
+};
+var TestResultsProgress = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { summary } = useContext(TestResultsContext);
+  const { t, formatNumber } = useLocale();
+  if (!summary) {
+    return null;
+  }
+  const passedPercent = summary.passed / summary.total * 100;
+  const failedPercent = summary.failed / summary.total * 100;
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-1.5", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-1.5 overflow-hidden rounded-full bg-muted", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-success transition-[width] duration-base ease-standard motion-reduce:transition-none",
+          style: { width: `${passedPercent}%` }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-destructive transition-[width] duration-base ease-standard motion-reduce:transition-none",
+          style: { width: `${failedPercent}%` }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-muted-foreground text-meta tabular-nums", children: [
+      /* @__PURE__ */ jsx("span", { children: t("ai.testResults.testsPassed", { passed: summary.passed, total: summary.total }) }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        formatNumber(passedPercent, { maximumFractionDigits: 0 }),
+        "%"
+      ] })
+    ] })
+  ] }) });
+};
+var TestResultsMeta = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("space-y-3 px-4 pb-4 pt-3", className), ...props, children });
+var TestResultsContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("divide-y", className), ...props, children });
+var TestSuiteContext = createContext({
+  name: "",
+  status: "passed"
+});
+var TestStatusIcon = ({ status }) => /* @__PURE__ */ jsx(StatusIcon, { className: "shrink-0", status: testStatusToCanonical[status] });
+var TestSuite = ({ name, status, className, children, ...props }) => {
+  const contextValue = useMemo(() => ({ name, status }), [name, status]);
+  return /* @__PURE__ */ jsx(TestSuiteContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Collapsible, { className: cn("group/suite", className), ...props, children }) });
+};
+var TestSuiteName = ({ className, children, ...props }) => {
+  const { name, status } = useContext(TestSuiteContext);
+  return /* @__PURE__ */ jsxs(
+    CollapsibleTrigger,
+    {
+      className: cn(
+        "group flex w-full items-center gap-2 px-4 py-2.5 text-start transition-colors duration-fast ease-standard motion-reduce:transition-none hover:bg-muted/50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform duration-fast ease-standard motion-reduce:transition-none group-data-[state=open]:rotate-90" }),
+        /* @__PURE__ */ jsx(TestStatusIcon, { status }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-body", children: children ?? name })
+      ]
+    }
+  );
+};
+var TestSuiteStats = ({
+  passed = 0,
+  failed = 0,
+  skipped = 0,
+  className,
+  children,
+  ...props
+}) => {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("ms-auto flex shrink-0 items-center gap-3 text-meta tabular-nums", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        passed > 0 && /* @__PURE__ */ jsx("span", { className: "text-success-text", children: t("ai.testResults.passedCount", { count: passed }) }),
+        failed > 0 && /* @__PURE__ */ jsx("span", { className: "text-destructive-text", children: t("ai.testResults.failedCount", { count: failed }) }),
+        skipped > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("ai.testResults.skippedCount", { count: skipped }) })
+      ] })
+    }
+  );
+};
+var TestSuiteContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx(CollapsibleContent, { className: cn("border-t", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "divide-y", children }) });
+var TestContext = createContext({
+  name: "",
+  status: "passed"
+});
+var TestName = ({ className, children, ...props }) => {
+  const { name } = useContext(TestContext);
+  return /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate", className), ...props, children: children ?? name });
+};
+var TestDuration = ({ className, children, ...props }) => {
+  const { duration } = useContext(TestContext);
+  if (duration === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("shrink-0 text-muted-foreground text-meta tabular-nums", className),
+      ...props,
+      children: children ?? `${duration}ms`
+    }
+  );
+};
+var TestStatus = ({ className, children, ...props }) => {
+  const { status } = useContext(TestContext);
+  return /* @__PURE__ */ jsx("span", { className: cn("shrink-0", className), ...props, children: children ?? /* @__PURE__ */ jsx(StatusIcon, { status: testStatusToCanonical[status] }) });
+};
+var Test = ({ name, status, duration, className, children, ...props }) => {
+  const contextValue = useMemo(() => ({ duration, name, status }), [duration, name, status]);
+  return /* @__PURE__ */ jsx(TestContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex min-w-0 items-center gap-2 ps-10 pe-4 py-2 text-body", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TestStatus, {}),
+        /* @__PURE__ */ jsx(TestName, {}),
+        duration !== void 0 && /* @__PURE__ */ jsx(TestDuration, {})
+      ] })
+    }
+  ) });
+};
+var TestError = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("rounded-md bg-destructive/10 p-3", className), ...props, children });
+var TestErrorMessage = ({ className, children, ...props }) => /* @__PURE__ */ jsx("p", { className: cn("font-medium text-destructive-text text-body", className), ...props, children });
+var TestErrorStack = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  "pre",
+  {
+    className: cn("mt-2 overflow-auto font-mono text-destructive-text text-meta", className),
+    ...props,
+    children
+  }
+);
+
+export {
+  TestResultsHeader,
+  TestResultsDuration,
+  TestResultsSummary,
+  TestResults,
+  TestResultsProgress,
+  TestResultsMeta,
+  TestResultsContent,
+  TestSuite,
+  TestSuiteName,
+  TestSuiteStats,
+  TestSuiteContent,
+  TestName,
+  TestDuration,
+  TestStatus,
+  Test,
+  TestError,
+  TestErrorMessage,
+  TestErrorStack
+};
+//# sourceMappingURL=chunk-F4C74F7M.js.map

package/dist/chunk-F4C74F7M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/test-results.tsx"],"sourcesContent":["\"use client\";\n\nimport { StatusBadge, StatusIcon, useLocale, type Status } from \"@elabs-ai/components-ui\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { ChevronRightIcon } from \"lucide-react\";\nimport type { ComponentProps, HTMLAttributes } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\ntype TestStatus = \"passed\" | \"failed\" | \"skipped\" | \"running\";\n\n/** Test status → the canonical 7-state vocabulary (#189, research 10 §B.1). */\nconst testStatusToCanonical: Record<TestStatus, Status> = {\n  passed: \"complete\",\n  failed: \"failed\",\n  running: \"running\",\n  skipped: \"skipped\",\n};\n\ninterface TestResultsSummary {\n  passed: number;\n  failed: number;\n  skipped: number;\n  total: number;\n  duration?: number;\n}\n\ninterface TestResultsContextType {\n  summary?: TestResultsSummary;\n}\n\nconst TestResultsContext = createContext<TestResultsContextType>({});\n\nconst formatDuration = (ms: number) => {\n  if (ms < 1000) {\n    return `${ms}ms`;\n  }\n  return `${(ms / 1000).toFixed(2)}s`;\n};\n\nexport type TestResultsHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const TestResultsHeader = ({ className, children, ...props }: TestResultsHeaderProps) => (\n  <div\n    className={cn(\"flex min-w-0 items-center justify-between border-b px-4 py-3\", className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TestResultsDurationProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const TestResultsDuration = ({\n  className,\n  children,\n  ...props\n}: TestResultsDurationProps) => {\n  const { summary } = useContext(TestResultsContext);\n\n  if (!summary?.duration) {\n    return null;\n  }\n\n  return (\n    <span\n      className={cn(\"shrink-0 text-muted-foreground text-body tabular-nums\", className)}\n      {...props}\n    >\n      {children ?? formatDuration(summary.duration)}\n    </span>\n  );\n};\n\nexport type TestResultsSummaryProps = HTMLAttributes<HTMLDivElement>;\n\nexport const TestResultsSummary = ({ className, children, ...props }: TestResultsSummaryProps) => {\n  const { summary } = useContext(TestResultsContext);\n  const { t } = useLocale();\n\n  if (!summary) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)} {...props}>\n      {children ?? (\n        <>\n          <StatusBadge size=\"sm\" status=\"complete\">\n            {t(\"ai.testResults.passedCount\", { count: summary.passed })}\n          </StatusBadge>\n          {summary.failed > 0 && (\n            <StatusBadge size=\"sm\" status=\"failed\">\n              {t(\"ai.testResults.failedCount\", { count: summary.failed })}\n            </StatusBadge>\n          )}\n          {summary.skipped > 0 && (\n            <StatusBadge size=\"sm\" status=\"skipped\">\n              {t(\"ai.testResults.skippedCount\", { count: summary.skipped })}\n            </StatusBadge>\n          )}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport type TestResultsProps = HTMLAttributes<HTMLDivElement> & {\n  summary?: TestResultsSummary;\n};\n\nexport const TestResults = ({ summary, className, children, ...props }: TestResultsProps) => {\n  const contextValue = useMemo(() => ({ summary }), [summary]);\n\n  return (\n    <TestResultsContext.Provider value={contextValue}>\n      <div className={cn(\"overflow-hidden rounded-lg border bg-background\", className)} {...props}>\n        {children ??\n          (summary && (\n            <TestResultsHeader>\n              <TestResultsSummary />\n              <TestResultsDuration />\n            </TestResultsHeader>\n          ))}\n      </div>\n    </TestResultsContext.Provider>\n  );\n};\n\nexport type TestResultsProgressProps = HTMLAttributes<HTMLDivElement>;\n\nexport const TestResultsProgress = ({\n  className,\n  children,\n  ...props\n}: TestResultsProgressProps) => {\n  const { summary } = useContext(TestResultsContext);\n  const { t, formatNumber } = useLocale();\n\n  if (!summary) {\n    return null;\n  }\n\n  const passedPercent = (summary.passed / summary.total) * 100;\n  const failedPercent = (summary.failed / summary.total) * 100;\n\n  return (\n    <div className={cn(\"space-y-1.5\", className)} {...props}>\n      {children ?? (\n        <>\n          <div className=\"flex h-1.5 overflow-hidden rounded-full bg-muted\">\n            <div\n              className=\"bg-success transition-[width] duration-base ease-standard motion-reduce:transition-none\"\n              style={{ width: `${passedPercent}%` }}\n            />\n            <div\n              className=\"bg-destructive transition-[width] duration-base ease-standard motion-reduce:transition-none\"\n              style={{ width: `${failedPercent}%` }}\n            />\n          </div>\n          <div className=\"flex justify-between text-muted-foreground text-meta tabular-nums\">\n            <span>\n              {t(\"ai.testResults.testsPassed\", { passed: summary.passed, total: summary.total })}\n            </span>\n            <span>\n              {formatNumber(passedPercent, { maximumFractionDigits: 0 })}\n              {\"%\"}\n            </span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\n/**\n * TestResultsMeta — the summary badges + progress bar block that sits between\n * the header and the suite list. Provides consistent `px-4 pt-3 pb-4` padding\n * so callers do not need ad-hoc wrapper divs.\n */\nexport type TestResultsMetaProps = HTMLAttributes<HTMLDivElement>;\n\nexport const TestResultsMeta = ({ className, children, ...props }: TestResultsMetaProps) => (\n  <div className={cn(\"space-y-3 px-4 pb-4 pt-3\", className)} {...props}>\n    {children}\n  </div>\n);\n\n/**\n * TestResultsContent — the suite list. Uses `divide-y` instead of `space-y`\n * so suites are separated by a single structural divider, not nested boxes.\n */\nexport type TestResultsContentProps = HTMLAttributes<HTMLDivElement>;\n\nexport const TestResultsContent = ({ className, children, ...props }: TestResultsContentProps) => (\n  <div className={cn(\"divide-y\", className)} {...props}>\n    {children}\n  </div>\n);\n\ninterface TestSuiteContextType {\n  name: string;\n  status: TestStatus;\n}\n\nconst TestSuiteContext = createContext<TestSuiteContextType>({\n  name: \"\",\n  status: \"passed\",\n});\n\n// The local status icon/color records were the 5th status idiom (#189);\n// re-pointed to the canonical `StatusIcon` vocabulary from @elabs-ai/components-ui.\nconst TestStatusIcon = ({ status }: { status: TestStatus }) => (\n  <StatusIcon className=\"shrink-0\" status={testStatusToCanonical[status]} />\n);\n\nexport type TestSuiteProps = ComponentProps<typeof Collapsible> & {\n  name: string;\n  status: TestStatus;\n};\n\n/**\n * TestSuite — one expandable file/suite row. Uses a quiet left rail\n * (`border-s-2`) as the sole focal separation gesture inside the divider-\n * separated list. No nested rounded box: that was redundant border-on-region\n * with no fill change (separation grammar).\n */\nexport const TestSuite = ({ name, status, className, children, ...props }: TestSuiteProps) => {\n  const contextValue = useMemo(() => ({ name, status }), [name, status]);\n\n  return (\n    <TestSuiteContext.Provider value={contextValue}>\n      <Collapsible className={cn(\"group/suite\", className)} {...props}>\n        {children}\n      </Collapsible>\n    </TestSuiteContext.Provider>\n  );\n};\n\nexport type TestSuiteNameProps = ComponentProps<typeof CollapsibleTrigger>;\n\nexport const TestSuiteName = ({ className, children, ...props }: TestSuiteNameProps) => {\n  const { name, status } = useContext(TestSuiteContext);\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        \"group flex w-full items-center gap-2 px-4 py-2.5 text-start transition-colors duration-fast ease-standard motion-reduce:transition-none hover:bg-muted/50\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronRightIcon className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-fast ease-standard motion-reduce:transition-none group-data-[state=open]:rotate-90\" />\n      <TestStatusIcon status={status} />\n      <span className=\"min-w-0 flex-1 truncate font-medium text-body\">{children ?? name}</span>\n    </CollapsibleTrigger>\n  );\n};\n\nexport type TestSuiteStatsProps = HTMLAttributes<HTMLDivElement> & {\n  passed?: number;\n  failed?: number;\n  skipped?: number;\n};\n\nexport const TestSuiteStats = ({\n  passed = 0,\n  failed = 0,\n  skipped = 0,\n  className,\n  children,\n  ...props\n}: TestSuiteStatsProps) => {\n  const { t } = useLocale();\n  return (\n    <div\n      className={cn(\"ms-auto flex shrink-0 items-center gap-3 text-meta tabular-nums\", className)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          {passed > 0 && (\n            <span className=\"text-success-text\">\n              {t(\"ai.testResults.passedCount\", { count: passed })}\n            </span>\n          )}\n          {failed > 0 && (\n            <span className=\"text-destructive-text\">\n              {t(\"ai.testResults.failedCount\", { count: failed })}\n            </span>\n          )}\n          {skipped > 0 && (\n            <span className=\"text-muted-foreground\">\n              {t(\"ai.testResults.skippedCount\", { count: skipped })}\n            </span>\n          )}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport type TestSuiteContentProps = ComponentProps<typeof CollapsibleContent>;\n\n/**\n * TestSuiteContent — the rows inside an expanded suite. A left rail\n * (`border-s-2 border-s-border ms-6`) indents the block under the suite\n * trigger and separates it structurally without a box. Rows are divided by\n * `divide-y`.\n */\nexport const TestSuiteContent = ({ className, children, ...props }: TestSuiteContentProps) => (\n  <CollapsibleContent className={cn(\"border-t\", className)} {...props}>\n    <div className=\"divide-y\">{children}</div>\n  </CollapsibleContent>\n);\n\ninterface TestContextType {\n  name: string;\n  status: TestStatus;\n  duration?: number;\n}\n\nconst TestContext = createContext<TestContextType>({\n  name: \"\",\n  status: \"passed\",\n});\n\nexport type TestNameProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const TestName = ({ className, children, ...props }: TestNameProps) => {\n  const { name } = useContext(TestContext);\n\n  return (\n    <span className={cn(\"min-w-0 flex-1 truncate\", className)} {...props}>\n      {children ?? name}\n    </span>\n  );\n};\n\nexport type TestDurationProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const TestDuration = ({ className, children, ...props }: TestDurationProps) => {\n  const { duration } = useContext(TestContext);\n\n  if (duration === undefined) {\n    return null;\n  }\n\n  return (\n    <span\n      className={cn(\"shrink-0 text-muted-foreground text-meta tabular-nums\", className)}\n      {...props}\n    >\n      {children ?? `${duration}ms`}\n    </span>\n  );\n};\n\nexport type TestStatusProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const TestStatus = ({ className, children, ...props }: TestStatusProps) => {\n  const { status } = useContext(TestContext);\n\n  return (\n    <span className={cn(\"shrink-0\", className)} {...props}>\n      {children ?? <StatusIcon status={testStatusToCanonical[status]} />}\n    </span>\n  );\n};\n\nexport type TestProps = HTMLAttributes<HTMLDivElement> & {\n  name: string;\n  status: TestStatus;\n  duration?: number;\n};\n\n/**\n * Test — a single test-case row. `ps-10` aligns the status icon with the\n * suite's status icon (after the trigger's chevron + gap), giving a clean\n * left-column across the expansion.\n */\nexport const Test = ({ name, status, duration, className, children, ...props }: TestProps) => {\n  const contextValue = useMemo(() => ({ duration, name, status }), [duration, name, status]);\n\n  return (\n    <TestContext.Provider value={contextValue}>\n      <div\n        className={cn(\"flex min-w-0 items-center gap-2 ps-10 pe-4 py-2 text-body\", className)}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <TestStatus />\n            <TestName />\n            {duration !== undefined && <TestDuration />}\n          </>\n        )}\n      </div>\n    </TestContext.Provider>\n  );\n};\n\nexport type TestErrorProps = HTMLAttributes<HTMLDivElement>;\n\nexport const TestError = ({ className, children, ...props }: TestErrorProps) => (\n  <div className={cn(\"rounded-md bg-destructive/10 p-3\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type TestErrorMessageProps = HTMLAttributes<HTMLParagraphElement>;\n\nexport const TestErrorMessage = ({ className, children, ...props }: TestErrorMessageProps) => (\n  <p className={cn(\"font-medium text-destructive-text text-body\", className)} {...props}>\n    {children}\n  </p>\n);\n\nexport type TestErrorStackProps = HTMLAttributes<HTMLPreElement>;\n\nexport const TestErrorStack = ({ className, children, ...props }: TestErrorStackProps) => (\n  <pre\n    className={cn(\"mt-2 overflow-auto font-mono text-destructive-text text-meta\", className)}\n    {...props}\n  >\n    {children}\n  </pre>\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-FERYDFZA.js

@@ -0,0 +1,108 @@
+"use client";
+import {
+  getStatusBadge
+} from "./chunk-PTWCTSZL.js";
+
+// src/sandbox.tsx
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Skeleton,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  useLocale
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { ChevronDownIcon, Code } from "lucide-react";
+import { createContext, use, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SandboxContext = createContext({ loading: false });
+var Sandbox = ({ className, loading = false, children, ...props }) => {
+  const contextValue = useMemo(() => ({ loading }), [loading]);
+  return /* @__PURE__ */ jsx(SandboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    Collapsible,
+    {
+      className: cn("not-prose group mb-4 w-full overflow-hidden rounded-md border", className),
+      defaultOpen: true,
+      ...props,
+      children
+    }
+  ) });
+};
+var SandboxHeader = ({ className, title, state, ...props }) => /* @__PURE__ */ jsxs(
+  CollapsibleTrigger,
+  {
+    className: cn("flex w-full items-center justify-between gap-4 p-3", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Code, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-body", children: title }),
+        getStatusBadge(state)
+      ] }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+    ]
+  }
+);
+var SandboxContent = ({ className, children, ...props }) => {
+  const { loading } = use(SandboxContext);
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsx(
+    CollapsibleContent,
+    {
+      className: cn(
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      ),
+      ...props,
+      children: loading ? /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-3", role: "status", "aria-live": "polite", children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("loading") }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" })
+      ] }) : children
+    }
+  );
+};
+var SandboxTabs = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs, { className: cn("w-full gap-0", className), ...props });
+var SandboxTabsBar = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex w-full items-center border-border border-t border-b", className),
+    ...props
+  }
+);
+var SandboxTabsList = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  TabsList,
+  {
+    className: cn("h-auto rounded-none border-0 bg-transparent p-0", className),
+    ...props
+  }
+);
+var SandboxTabsTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  TabsTrigger,
+  {
+    className: cn(
+      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-body transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+      className
+    ),
+    ...props
+  }
+);
+var SandboxTabContent = ({ className, ...props }) => /* @__PURE__ */ jsx(TabsContent, { className: cn("mt-0 text-body", className), ...props });
+
+export {
+  Sandbox,
+  SandboxHeader,
+  SandboxContent,
+  SandboxTabs,
+  SandboxTabsBar,
+  SandboxTabsList,
+  SandboxTabsTrigger,
+  SandboxTabContent
+};
+//# sourceMappingURL=chunk-FERYDFZA.js.map

package/dist/chunk-FERYDFZA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sandbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n  Skeleton,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  useLocale,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { ToolUIPart } from \"ai\";\nimport { ChevronDownIcon, Code } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { createContext, use, useMemo } from \"react\";\n\nimport { getStatusBadge } from \"./tool\";\n\n/**\n * Shared loading state (composition-patterns — lifted into the provider),\n * mirroring Artifact: Sandbox is the only place that knows whether the run\n * body has arrived; SandboxContent reads the interface and renders a\n * skeleton, while SandboxHeader (an ordinary child of Sandbox) keeps\n * rendering as passed.\n */\nconst SandboxContext = createContext<{ loading: boolean }>({ loading: false });\n\nexport type SandboxProps = ComponentProps<typeof Collapsible> & {\n  /**\n   * The run output has not arrived yet (loading-states.md loading signal).\n   * SandboxContent renders a layout-shaped skeleton instead of its children;\n   * SandboxHeader keeps rendering as passed.\n   * @default false\n   */\n  loading?: boolean;\n};\n\n/** @deprecated Renamed to `SandboxProps`. */\nexport type SandboxRootProps = SandboxProps;\n\nexport const Sandbox = ({ className, loading = false, children, ...props }: SandboxProps) => {\n  const contextValue = useMemo(() => ({ loading }), [loading]);\n\n  return (\n    <SandboxContext.Provider value={contextValue}>\n      <Collapsible\n        className={cn(\"not-prose group mb-4 w-full overflow-hidden rounded-md border\", className)}\n        defaultOpen\n        {...props}\n      >\n        {children}\n      </Collapsible>\n    </SandboxContext.Provider>\n  );\n};\n\nexport interface SandboxHeaderProps {\n  title?: string;\n  state: ToolUIPart[\"state\"];\n  className?: string;\n}\n\nexport const SandboxHeader = ({ className, title, state, ...props }: SandboxHeaderProps) => (\n  <CollapsibleTrigger\n    className={cn(\"flex w-full items-center justify-between gap-4 p-3\", className)}\n    {...props}\n  >\n    <div className=\"flex items-center gap-2\">\n      <Code className=\"size-4 text-muted-foreground\" />\n      <span className=\"font-medium text-body\">{title}</span>\n      {getStatusBadge(state)}\n    </div>\n    <ChevronDownIcon className=\"size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180\" />\n  </CollapsibleTrigger>\n);\n\nexport type SandboxContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const SandboxContent = ({ className, children, ...props }: SandboxContentProps) => {\n  const { loading } = use(SandboxContext);\n  const { t } = useLocale();\n\n  return (\n    <CollapsibleContent\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        className,\n      )}\n      {...props}\n    >\n      {loading ? (\n        <div className=\"space-y-2 p-3\" role=\"status\" aria-live=\"polite\">\n          <span className=\"sr-only\">{t(\"loading\")}</span>\n          <Skeleton className=\"h-4 w-1/3\" />\n          <Skeleton className=\"h-4 w-full\" />\n          <Skeleton className=\"h-4 w-full\" />\n          <Skeleton className=\"h-4 w-2/3\" />\n        </div>\n      ) : (\n        children\n      )}\n    </CollapsibleContent>\n  );\n};\n\nexport type SandboxTabsProps = ComponentProps<typeof Tabs>;\n\nexport const SandboxTabs = ({ className, ...props }: SandboxTabsProps) => (\n  <Tabs className={cn(\"w-full gap-0\", className)} {...props} />\n);\n\nexport type SandboxTabsBarProps = ComponentProps<\"div\">;\n\nexport const SandboxTabsBar = ({ className, ...props }: SandboxTabsBarProps) => (\n  <div\n    className={cn(\"flex w-full items-center border-border border-t border-b\", className)}\n    {...props}\n  />\n);\n\nexport type SandboxTabsListProps = ComponentProps<typeof TabsList>;\n\nexport const SandboxTabsList = ({ className, ...props }: SandboxTabsListProps) => (\n  <TabsList\n    className={cn(\"h-auto rounded-none border-0 bg-transparent p-0\", className)}\n    {...props}\n  />\n);\n\nexport type SandboxTabsTriggerProps = ComponentProps<typeof TabsTrigger>;\n\nexport const SandboxTabsTrigger = ({ className, ...props }: SandboxTabsTriggerProps) => (\n  <TabsTrigger\n    className={cn(\n      \"rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-body transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type SandboxTabContentProps = ComponentProps<typeof TabsContent>;\n\nexport const SandboxTabContent = ({ className, ...props }: SandboxTabContentProps) => (\n  <TabsContent className={cn(\"mt-0 text-body\", className)} {...props} />\n);\n"],"mappings":";;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAEnB,SAAS,iBAAiB,YAAY;AAEtC,SAAS,eAAe,KAAK,eAAe;AA+BtC,cAsBF,YAtBE;AApBN,IAAM,iBAAiB,cAAoC,EAAE,SAAS,MAAM,CAAC;AAetE,IAAM,UAAU,CAAC,EAAE,WAAW,UAAU,OAAO,UAAU,GAAG,MAAM,MAAoB;AAC3F,QAAM,eAAe,QAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAE3D,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,cAC9B;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,iEAAiE,SAAS;AAAA,MACxF,aAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAQO,IAAM,gBAAgB,CAAC,EAAE,WAAW,OAAO,OAAO,GAAG,MAAM,MAChE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,sDAAsD,SAAS;AAAA,IAC5E,GAAG;AAAA,IAEJ;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,4BAAC,QAAK,WAAU,gCAA+B;AAAA,QAC/C,oBAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA,QAC9C,eAAe,KAAK;AAAA,SACvB;AAAA,MACA,oBAAC,mBAAgB,WAAU,wFAAuF;AAAA;AAAA;AACpH;AAKK,IAAM,iBAAiB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,MAA2B;AACxF,QAAM,EAAE,QAAQ,IAAI,IAAI,cAAc;AACtC,QAAM,EAAE,EAAE,IAAI,UAAU;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,oBACC,qBAAC,SAAI,WAAU,iBAAgB,MAAK,UAAS,aAAU,UACrD;AAAA,4BAAC,UAAK,WAAU,WAAW,YAAE,SAAS,GAAE;AAAA,QACxC,oBAAC,YAAS,WAAU,aAAY;AAAA,QAChC,oBAAC,YAAS,WAAU,cAAa;AAAA,QACjC,oBAAC,YAAS,WAAU,cAAa;AAAA,QACjC,oBAAC,YAAS,WAAU,aAAY;AAAA,SAClC,IAEA;AAAA;AAAA,EAEJ;AAEJ;AAIO,IAAM,cAAc,CAAC,EAAE,WAAW,GAAG,MAAM,MAChD,oBAAC,QAAK,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,OAAO;AAKtD,IAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,MAAM,MACnD;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,4DAA4D,SAAS;AAAA,IAClF,GAAG;AAAA;AACN;AAKK,IAAM,kBAAkB,CAAC,EAAE,WAAW,GAAG,MAAM,MACpD;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,mDAAmD,SAAS;AAAA,IACzE,GAAG;AAAA;AACN;AAKK,IAAM,qBAAqB,CAAC,EAAE,WAAW,GAAG,MAAM,MACvD;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN;AAKK,IAAM,oBAAoB,CAAC,EAAE,WAAW,GAAG,MAAM,MACtD,oBAAC,eAAY,WAAW,GAAG,kBAAkB,SAAS,GAAI,GAAG,OAAO;","names":[]}

package/dist/chunk-FUIYG2DS.js

@@ -0,0 +1,166 @@
+"use client";
+import {
+  Shimmer
+} from "./chunk-3YPT3V7L.js";
+
+// src/plan.tsx
+import { Button } from "@elabs-ai/components-ui";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { StatusBadge } from "@elabs-ai/components-ui";
+import { useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { CheckCircle2, ChevronsUpDownIcon, Clock, PencilLine } from "lucide-react";
+import { createContext, useContext, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PlanContext = createContext(null);
+var usePlan = () => {
+  const context = useContext(PlanContext);
+  if (!context) {
+    throw new Error("Plan components must be used within Plan");
+  }
+  return context;
+};
+var Plan = ({
+  className,
+  isStreaming = false,
+  status,
+  role,
+  children,
+  ...props
+}) => {
+  const titleId = useId();
+  const hasStatus = status !== void 0;
+  const resolvedIsStreaming = hasStatus ? status === "streaming" : isStreaming;
+  const isPending = status === "awaiting";
+  const isSettled = status === "approved" || status === "changes-requested";
+  const resolvedRole = hasStatus ? isPending ? "group" : isSettled ? "alert" : void 0 : void 0;
+  const railClass = !hasStatus ? void 0 : status === "approved" ? "border-s-4 border-s-success" : status === "changes-requested" ? "border-s-4 border-s-warning" : isPending ? "border-s-4 border-s-border-strong" : void 0;
+  const contextValue = useMemo(
+    () => ({
+      isStreaming: resolvedIsStreaming,
+      status: hasStatus ? status : void 0,
+      titleId: hasStatus ? titleId : void 0
+    }),
+    [resolvedIsStreaming, hasStatus, status, titleId]
+  );
+  return /* @__PURE__ */ jsx(PlanContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Collapsible, { asChild: true, "data-slot": "plan", ...props, children: /* @__PURE__ */ jsx(
+    Card,
+    {
+      role: role ?? resolvedRole,
+      "aria-labelledby": isPending ? titleId : void 0,
+      className: cn("shadow-none", railClass, className),
+      children
+    }
+  ) }) });
+};
+var PlanHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CardHeader,
+  {
+    className: cn("flex items-start justify-between", className),
+    "data-slot": "plan-header",
+    ...props
+  }
+);
+var PlanTitle = ({ id, children, ...props }) => {
+  const { isStreaming, titleId } = usePlan();
+  return /* @__PURE__ */ jsx(CardTitle, { id: id ?? titleId, "data-slot": "plan-title", ...props, children: isStreaming ? /* @__PURE__ */ jsx(Shimmer, { children }) : children });
+};
+var PlanDescription = ({ className, children, ...props }) => {
+  const { isStreaming } = usePlan();
+  return /* @__PURE__ */ jsx(
+    CardDescription,
+    {
+      className: cn("text-balance", className),
+      "data-slot": "plan-description",
+      ...props,
+      children: isStreaming ? /* @__PURE__ */ jsx(Shimmer, { children }) : children
+    }
+  );
+};
+var PlanAction = (props) => /* @__PURE__ */ jsx(CardAction, { "data-slot": "plan-action", ...props });
+var PlanContent = ({ className, ...props }) => /* @__PURE__ */ jsx(CollapsibleContent, { asChild: true, children: /* @__PURE__ */ jsx(
+  CardContent,
+  {
+    className: cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2 data-[state=closed]:fade-out-0 data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)] outline-none",
+      className
+    ),
+    "data-slot": "plan-content",
+    ...props
+  }
+) });
+var PlanFooter = (props) => /* @__PURE__ */ jsx(CardFooter, { "data-slot": "plan-footer", ...props });
+var PlanTrigger = ({ className, ...props }) => {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: cn("size-8", className),
+      "data-slot": "plan-trigger",
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("ai.plan.togglePlan") })
+      ]
+    }
+  ) });
+};
+var PLAN_STATUS_CONTENT = {
+  awaiting: { label: "Waiting on plan approval", tone: "warning", icon: Clock },
+  approved: { label: "Approved", tone: "success", icon: CheckCircle2 },
+  "changes-requested": { label: "Changes requested", tone: "warning", icon: PencilLine }
+};
+var PlanStatusLine = ({ className, children, ...props }) => {
+  const { status } = usePlan();
+  if (!status || status === "streaming") {
+    return null;
+  }
+  const { label, tone, icon } = PLAN_STATUS_CONTENT[status];
+  return /* @__PURE__ */ jsx(
+    StatusBadge,
+    {
+      "data-slot": "plan-status-line",
+      className: cn("self-start", className),
+      status: { label, tone, icon },
+      ...props,
+      children
+    }
+  );
+};
+var PlanDecisionAction = ({ className, ...props }) => {
+  const { status } = usePlan();
+  if (status !== "awaiting") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Button, { className: cn("h-8 px-3 text-body", className), type: "button", ...props });
+};
+var PlanApprove = (props) => /* @__PURE__ */ jsx(PlanDecisionAction, { "data-slot": "plan-approve", variant: "default", ...props });
+var PlanRequestChanges = (props) => /* @__PURE__ */ jsx(PlanDecisionAction, { "data-slot": "plan-request-changes", variant: "outline", ...props });
+var PlanComment = (props) => /* @__PURE__ */ jsx(PlanDecisionAction, { "data-slot": "plan-comment", variant: "ghost", ...props });
+
+export {
+  Plan,
+  PlanHeader,
+  PlanTitle,
+  PlanDescription,
+  PlanAction,
+  PlanContent,
+  PlanFooter,
+  PlanTrigger,
+  PlanStatusLine,
+  PlanApprove,
+  PlanRequestChanges,
+  PlanComment
+};
+//# sourceMappingURL=chunk-FUIYG2DS.js.map