@elabs-ai/components-ai 4.2.0 → 5.1.0

package/dist/chunk-TZ6TB7VM.js

@@ -0,0 +1,245 @@
+"use client";
+
+// src/web-preview.tsx
+import { Button } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { Input } from "@elabs-ai/components-ui";
+import { Skeleton } from "@elabs-ai/components-ui";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useLocale } from "@elabs-ai/components-ui";
+import { ChevronDownIcon } from "lucide-react";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var WebPreviewContext = createContext(null);
+var useWebPreview = () => {
+  const context = useContext(WebPreviewContext);
+  if (!context) {
+    throw new Error("WebPreview components must be used within a WebPreview");
+  }
+  return context;
+};
+var WebPreview = ({
+  className,
+  children,
+  defaultUrl = "",
+  onUrlChange,
+  ...props
+}) => {
+  const [url, setUrl] = useState(defaultUrl);
+  const [consoleOpen, setConsoleOpen] = useState(false);
+  const handleUrlChange = useCallback(
+    (newUrl) => {
+      setUrl(newUrl);
+      onUrlChange?.(newUrl);
+    },
+    [onUrlChange]
+  );
+  const contextValue = useMemo(
+    () => ({
+      consoleOpen,
+      setConsoleOpen,
+      setUrl: handleUrlChange,
+      url
+    }),
+    [consoleOpen, handleUrlChange, url]
+  );
+  return /* @__PURE__ */ jsx(WebPreviewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex size-full flex-col rounded-lg border bg-card", className),
+      ...props,
+      children
+    }
+  ) });
+};
+var WebPreviewNavigation = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1 border-b p-2", className), ...props, children });
+var WebPreviewNavigationButton = ({
+  onClick,
+  disabled,
+  tooltip,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": tooltip,
+      className: "h-8 w-8 p-0 hover:text-foreground",
+      disabled,
+      onClick,
+      size: "sm",
+      variant: "ghost",
+      ...props,
+      children
+    }
+  ) }),
+  /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+] }) });
+var WebPreviewUrl = ({ value, onChange, onKeyDown, ...props }) => {
+  const { t } = useLocale();
+  const { url, setUrl } = useWebPreview();
+  const [prevUrl, setPrevUrl] = useState(url);
+  const [inputValue, setInputValue] = useState(url);
+  if (url !== prevUrl) {
+    setPrevUrl(url);
+    setInputValue(url);
+  }
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+    onChange?.(event);
+  };
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter") {
+        const target = event.target;
+        setUrl(target.value);
+      }
+      onKeyDown?.(event);
+    },
+    [setUrl, onKeyDown]
+  );
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      className: "h-8 flex-1 text-body",
+      onChange: onChange ?? handleChange,
+      onKeyDown: handleKeyDown,
+      placeholder: t("ai.webPreview.urlPlaceholder"),
+      value: value ?? inputValue,
+      ...props
+    }
+  );
+};
+var WebPreviewBody = ({
+  className,
+  loading,
+  src,
+  allowSameOrigin = false,
+  ...props
+}) => {
+  const { url } = useWebPreview();
+  const { t } = useLocale();
+  const sandbox = [
+    "allow-scripts",
+    "allow-forms",
+    "allow-popups",
+    "allow-presentation",
+    allowSameOrigin && "allow-same-origin"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        className: cn("size-full", className),
+        sandbox,
+        src: (src ?? url) || void 0,
+        title: t("ai.webPreview.previewTitle"),
+        ...props
+      }
+    ),
+    loading === true ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute inset-0 flex flex-col gap-2 bg-card p-4",
+        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: "flex-1" })
+        ]
+      }
+    ) : loading
+  ] });
+};
+var WebPreviewConsole = ({
+  className,
+  logs = [],
+  children,
+  ...props
+}) => {
+  const { consoleOpen, setConsoleOpen } = useWebPreview();
+  const { t, formatDate } = useLocale();
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      className: cn("border-t bg-muted/50 font-mono text-body", className),
+      onOpenChange: setConsoleOpen,
+      open: consoleOpen,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: "flex w-full items-center justify-between p-4 text-start font-medium hover:bg-muted/50",
+            variant: "ghost",
+            children: [
+              "Console",
+              /* @__PURE__ */ jsx(
+                ChevronDownIcon,
+                {
+                  className: cn(
+                    "h-4 w-4 transition-transform duration-base ease-standard",
+                    consoleOpen && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          CollapsibleContent,
+          {
+            className: cn(
+              "px-4 pb-4",
+              "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "max-h-48 space-y-1 overflow-y-auto", children: [
+              logs.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("ai.webPreview.noConsoleOutput") }) : logs.map((log) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "text-meta",
+                    // #124: console log lines are running text — ink rung, not
+                    // the mark rung. `text-yellow-600` was also a raw, untokened
+                    // Tailwind palette colour (styling-and-tokens.md); replaced
+                    // with the warning tone's own ink rung.
+                    log.level === "error" && "text-destructive-text",
+                    log.level === "warn" && "text-warning-text",
+                    log.level === "log" && "text-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: formatDate(log.timestamp, {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                      second: "2-digit"
+                    }) }),
+                    " ",
+                    log.message
+                  ]
+                },
+                `${log.timestamp.getTime()}-${log.level}-${log.message}`
+              )),
+              children
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  WebPreview,
+  WebPreviewNavigation,
+  WebPreviewNavigationButton,
+  WebPreviewUrl,
+  WebPreviewBody,
+  WebPreviewConsole
+};
+//# sourceMappingURL=chunk-TZ6TB7VM.js.map

package/dist/chunk-TZ6TB7VM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/web-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"@elabs-ai/components-ui\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@elabs-ai/components-ui\";\nimport { Input } from \"@elabs-ai/components-ui\";\nimport { Skeleton } from \"@elabs-ai/components-ui\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { useLocale } from \"@elabs-ai/components-ui\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { createContext, useCallback, useContext, useMemo, useState } from \"react\";\n\nexport interface WebPreviewContextValue {\n  url: string;\n  setUrl: (url: string) => void;\n  consoleOpen: boolean;\n  setConsoleOpen: (open: boolean) => void;\n}\n\nconst WebPreviewContext = createContext<WebPreviewContextValue | null>(null);\n\nconst useWebPreview = () => {\n  const context = useContext(WebPreviewContext);\n  if (!context) {\n    throw new Error(\"WebPreview components must be used within a WebPreview\");\n  }\n  return context;\n};\n\nexport type WebPreviewProps = ComponentProps<\"div\"> & {\n  defaultUrl?: string;\n  onUrlChange?: (url: string) => void;\n};\n\nexport const WebPreview = ({\n  className,\n  children,\n  defaultUrl = \"\",\n  onUrlChange,\n  ...props\n}: WebPreviewProps) => {\n  const [url, setUrl] = useState(defaultUrl);\n  const [consoleOpen, setConsoleOpen] = useState(false);\n\n  const handleUrlChange = useCallback(\n    (newUrl: string) => {\n      setUrl(newUrl);\n      onUrlChange?.(newUrl);\n    },\n    [onUrlChange],\n  );\n\n  const contextValue = useMemo<WebPreviewContextValue>(\n    () => ({\n      consoleOpen,\n      setConsoleOpen,\n      setUrl: handleUrlChange,\n      url,\n    }),\n    [consoleOpen, handleUrlChange, url],\n  );\n\n  return (\n    <WebPreviewContext.Provider value={contextValue}>\n      <div\n        className={cn(\"flex size-full flex-col rounded-lg border bg-card\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </WebPreviewContext.Provider>\n  );\n};\n\nexport type WebPreviewNavigationProps = ComponentProps<\"div\">;\n\nexport const WebPreviewNavigation = ({\n  className,\n  children,\n  ...props\n}: WebPreviewNavigationProps) => (\n  <div className={cn(\"flex items-center gap-1 border-b p-2\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {\n  tooltip?: string;\n};\n\nexport const WebPreviewNavigationButton = ({\n  onClick,\n  disabled,\n  tooltip,\n  children,\n  ...props\n}: WebPreviewNavigationButtonProps) => (\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button\n          // These buttons are icon-only, and a Radix tooltip only contributes\n          // `aria-describedby` while it is OPEN — so at rest the control had no\n          // accessible name at all and axe's `button-name` red every story that\n          // mounted one (#386). The tooltip text IS the name; spreading\n          // `...props` afterwards keeps an explicit `aria-label` winning, and a\n          // button that ships real text children keeps its own content as the\n          // name because `tooltip` is then undefined. Mirrors `MessageAction`'s\n          // `sr-only` label in message.tsx.\n          aria-label={tooltip}\n          className=\"h-8 w-8 p-0 hover:text-foreground\"\n          disabled={disabled}\n          onClick={onClick}\n          size=\"sm\"\n          variant=\"ghost\"\n          {...props}\n        >\n          {children}\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{tooltip}</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n);\n\nexport type WebPreviewUrlProps = ComponentProps<typeof Input>;\n\nexport const WebPreviewUrl = ({ value, onChange, onKeyDown, ...props }: WebPreviewUrlProps) => {\n  const { t } = useLocale();\n  const { url, setUrl } = useWebPreview();\n  const [prevUrl, setPrevUrl] = useState(url);\n  const [inputValue, setInputValue] = useState(url);\n\n  // Sync input value with context URL when it changes externally (derived state pattern)\n  if (url !== prevUrl) {\n    setPrevUrl(url);\n    setInputValue(url);\n  }\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\") {\n        const target = event.target as HTMLInputElement;\n        setUrl(target.value);\n      }\n      onKeyDown?.(event);\n    },\n    [setUrl, onKeyDown],\n  );\n\n  return (\n    <Input\n      className=\"h-8 flex-1 text-body\"\n      onChange={onChange ?? handleChange}\n      onKeyDown={handleKeyDown}\n      placeholder={t(\"ai.webPreview.urlPlaceholder\")}\n      value={value ?? inputValue}\n      {...props}\n    />\n  );\n};\n\nexport type WebPreviewBodyProps = Omit<ComponentProps<\"iframe\">, \"loading\"> & {\n  /**\n   * Not-ready placeholder over the iframe (loading-states.md `loading`\n   * signal). Pass `true` for the default layout-shaped Skeleton filling the\n   * iframe box, or a ReactNode to override with custom placeholder content.\n   * `false`/`undefined` (default) renders nothing. Shadows (rather than\n   * forwards) the native `<iframe loading=\"eager\"|\"lazy\">` attribute — this\n   * component's box is always fully reserved, so lazy-loading the iframe\n   * itself is not a use case here.\n   * @default false\n   */\n  loading?: boolean | ReactNode;\n  /**\n   * Adds `allow-same-origin` to the iframe sandbox. **Opt-in, off by\n   * default**: combined with `allow-scripts`, a same-origin previewed page\n   * can script its way out of the sandbox restrictions entirely (its own\n   * `<iframe>` reads as unsandboxed once it shares the origin). Only enable\n   * this for content you trust to be same-origin-safe.\n   * @default false\n   */\n  allowSameOrigin?: boolean;\n};\n\nexport const WebPreviewBody = ({\n  className,\n  loading,\n  src,\n  allowSameOrigin = false,\n  ...props\n}: WebPreviewBodyProps) => {\n  const { url } = useWebPreview();\n  const { t } = useLocale();\n\n  const sandbox = [\n    \"allow-scripts\",\n    \"allow-forms\",\n    \"allow-popups\",\n    \"allow-presentation\",\n    allowSameOrigin && \"allow-same-origin\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className=\"relative flex-1\">\n      <iframe\n        className={cn(\"size-full\", className)}\n        // oxlint-disable-next-line eslint-plugin-react(iframe-missing-sandbox)\n        sandbox={sandbox}\n        src={(src ?? url) || undefined}\n        title={t(\"ai.webPreview.previewTitle\")}\n        {...props}\n      />\n      {loading === true ? (\n        <div\n          className=\"absolute inset-0 flex flex-col gap-2 bg-card p-4\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          <span className=\"sr-only\">{t(\"loading\")}</span>\n          <Skeleton className=\"h-4 w-1/3\" />\n          <Skeleton className=\"flex-1\" />\n        </div>\n      ) : (\n        loading\n      )}\n    </div>\n  );\n};\n\nexport type WebPreviewConsoleProps = ComponentProps<\"div\"> & {\n  logs?: {\n    level: \"log\" | \"warn\" | \"error\";\n    message: string;\n    timestamp: Date;\n  }[];\n};\n\nexport const WebPreviewConsole = ({\n  className,\n  logs = [],\n  children,\n  ...props\n}: WebPreviewConsoleProps) => {\n  const { consoleOpen, setConsoleOpen } = useWebPreview();\n  const { t, formatDate } = useLocale();\n\n  return (\n    <Collapsible\n      className={cn(\"border-t bg-muted/50 font-mono text-body\", className)}\n      onOpenChange={setConsoleOpen}\n      open={consoleOpen}\n      {...props}\n    >\n      <CollapsibleTrigger asChild>\n        <Button\n          className=\"flex w-full items-center justify-between p-4 text-start font-medium hover:bg-muted/50\"\n          variant=\"ghost\"\n        >\n          Console\n          <ChevronDownIcon\n            className={cn(\n              \"h-4 w-4 transition-transform duration-base ease-standard\",\n              consoleOpen && \"rotate-180\",\n            )}\n          />\n        </Button>\n      </CollapsibleTrigger>\n      <CollapsibleContent\n        className={cn(\n          \"px-4 pb-4\",\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        )}\n      >\n        <div className=\"max-h-48 space-y-1 overflow-y-auto\">\n          {logs.length === 0 ? (\n            <p className=\"text-muted-foreground\">{t(\"ai.webPreview.noConsoleOutput\")}</p>\n          ) : (\n            logs.map((log) => (\n              <div\n                className={cn(\n                  \"text-meta\",\n                  // #124: console log lines are running text — ink rung, not\n                  // the mark rung. `text-yellow-600` was also a raw, untokened\n                  // Tailwind palette colour (styling-and-tokens.md); replaced\n                  // with the warning tone's own ink rung.\n                  log.level === \"error\" && \"text-destructive-text\",\n                  log.level === \"warn\" && \"text-warning-text\",\n                  log.level === \"log\" && \"text-foreground\",\n                )}\n                key={`${log.timestamp.getTime()}-${log.level}-${log.message}`}\n              >\n                <span className=\"text-muted-foreground\">\n                  {formatDate(log.timestamp, {\n                    hour: \"2-digit\",\n                    minute: \"2-digit\",\n                    second: \"2-digit\",\n                  })}\n                </span>{\" \"}\n                {log.message}\n              </div>\n            ))\n          )}\n          {children}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-UBLKJJ7K.js

@@ -0,0 +1,278 @@
+"use client";
+
+// src/file-tree.tsx
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  fileIconFor,
+  useLocale
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { cva } from "class-variance-authority";
+import {
+  ChevronRightIcon,
+  DatabaseIcon,
+  FileCode2Icon,
+  FileIcon,
+  FileTextIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  ImageIcon,
+  TableIcon
+} from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var noop = () => {
+};
+var FileTreeContext = createContext({
+  // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
+  expandedPaths: /* @__PURE__ */ new Set(),
+  togglePath: noop
+});
+var fileTreeVariants = cva("", {
+  variants: {
+    variant: {
+      code: "rounded-lg border bg-background font-mono text-body",
+      document: "text-body"
+    }
+  },
+  defaultVariants: { variant: "code" }
+});
+var FileTree = forwardRef(function FileTree2({
+  expanded: controlledExpanded,
+  defaultExpanded = /* @__PURE__ */ new Set(),
+  selectedPath,
+  onSelect,
+  onExpandedChange,
+  variant,
+  className,
+  children,
+  ...props
+}, ref) {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expandedPaths = controlledExpanded ?? internalExpanded;
+  const togglePath = useCallback(
+    (path) => {
+      const newExpanded = new Set(expandedPaths);
+      if (newExpanded.has(path)) {
+        newExpanded.delete(path);
+      } else {
+        newExpanded.add(path);
+      }
+      setInternalExpanded(newExpanded);
+      onExpandedChange?.(newExpanded);
+    },
+    [expandedPaths, onExpandedChange]
+  );
+  const contextValue = useMemo(
+    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),
+    [expandedPaths, onSelect, selectedPath, togglePath]
+  );
+  return /* @__PURE__ */ jsx(FileTreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(fileTreeVariants({ variant }), className),
+      role: "tree",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn(variant === "document" ? void 0 : "p-2"), children })
+    }
+  ) });
+});
+var FileTreeIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("shrink-0", className), ...props, children });
+var FileTreeName = ({ className, children, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("truncate", className), ...props, children });
+var FileTreeFolderContext = createContext({
+  isExpanded: false,
+  name: "",
+  path: ""
+});
+var FileTreeFolder = ({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}) => {
+  const { t } = useLocale();
+  const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+  const handleOpenChange = useCallback(() => {
+    togglePath(path);
+  }, [togglePath, path]);
+  const handleSelect = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  const folderContextValue = useMemo(() => ({ isExpanded, name, path }), [isExpanded, name, path]);
+  return /* @__PURE__ */ jsx(FileTreeFolderContext.Provider, { value: folderContextValue, children: /* @__PURE__ */ jsx(Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: /* @__PURE__ */ jsxs("div", { className: cn("", className), role: "treeitem", tabIndex: 0, ...props, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex w-full items-center gap-1 rounded px-2 py-1 text-start transition-colors hover:bg-muted/50",
+          isSelected && "bg-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": t(
+                isExpanded ? "ai.fileTree.collapseFolder" : "ai.fileTree.expandFolder",
+                { name }
+              ),
+              className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0",
+              type: "button",
+              children: /* @__PURE__ */ jsx(
+                ChevronRightIcon,
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90"
+                  ),
+                  "data-rtl-flip": true
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-start",
+              onClick: handleSelect,
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx(FileTreeIcon, { children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4 text-primary" }) : /* @__PURE__ */ jsx(FolderIcon, { className: "size-4 text-primary" }) }),
+                /* @__PURE__ */ jsx(FileTreeName, { children: name })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ms-4 border-s ps-2", children }) })
+  ] }) }) });
+};
+var FileTreeFileContext = createContext({
+  name: "",
+  path: ""
+});
+var FileTreeFile = ({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}) => {
+  const { selectedPath, onSelect } = useContext(FileTreeContext);
+  const isSelected = selectedPath === path;
+  const handleClick = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        onSelect?.(path);
+      }
+    },
+    [onSelect, path]
+  );
+  const fileContextValue = useMemo(() => ({ name, path }), [name, path]);
+  return /* @__PURE__ */ jsx(FileTreeFileContext.Provider, { value: fileContextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
+        isSelected && "bg-muted",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "treeitem",
+      tabIndex: 0,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx(FileTreeIcon, { children: icon ?? /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx(FileTreeName, { children: name })
+      ] })
+    }
+  ) });
+};
+var stopPropagation = (e) => e.stopPropagation();
+var FileTreeActions = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("ms-auto flex items-center gap-1", className),
+    onClick: stopPropagation,
+    onKeyDown: stopPropagation,
+    role: "group",
+    ...props,
+    children
+  }
+);
+var PRODUCED_ASSET_ICONS = {
+  markdown: FileTextIcon,
+  code: FileCode2Icon,
+  sql: DatabaseIcon,
+  csv: TableIcon,
+  image: ImageIcon
+};
+function assetIcon(asset) {
+  return asset.source ? fileIconFor(asset.name, asset.mediaType) : PRODUCED_ASSET_ICONS[asset.type];
+}
+var ProducedAssetTree = forwardRef(
+  function ProducedAssetTree2({ assets, selectedId, onSelect, ...props }, ref) {
+    const { t } = useLocale();
+    const assetsById = useMemo(() => new Map(assets.map((asset) => [asset.id, asset])), [assets]);
+    const handleSelect = useCallback(
+      (path) => {
+        const asset = assetsById.get(path);
+        if (asset) onSelect?.(asset);
+      },
+      [assetsById, onSelect]
+    );
+    if (assets.length === 0) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          "data-slot": "file-tree-empty",
+          className: cn("px-2 py-1 text-body text-muted-foreground", props.className),
+          children: t("ai.fileTree.noAssetsProduced")
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      FileTree,
+      {
+        ref,
+        variant: "document",
+        selectedPath: selectedId,
+        onSelect: handleSelect,
+        ...props,
+        children: assets.map((asset) => {
+          const Icon = assetIcon(asset);
+          return /* @__PURE__ */ jsxs(FileTreeFile, { path: asset.id, name: asset.name, children: [
+            /* @__PURE__ */ jsx(FileTreeIcon, { children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsx(FileTreeName, { children: asset.name })
+          ] }, asset.id);
+        })
+      }
+    );
+  }
+);
+
+export {
+  FileTree,
+  FileTreeIcon,
+  FileTreeName,
+  FileTreeFolder,
+  FileTreeFile,
+  FileTreeActions,
+  PRODUCED_ASSET_ICONS,
+  ProducedAssetTree
+};
+//# sourceMappingURL=chunk-UBLKJJ7K.js.map

package/dist/chunk-UBLKJJ7K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/file-tree.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n  fileIconFor,\n  useLocale,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { LucideIcon } from \"lucide-react\";\nimport {\n  ChevronRightIcon,\n  DatabaseIcon,\n  FileCode2Icon,\n  FileIcon,\n  FileTextIcon,\n  FolderIcon,\n  FolderOpenIcon,\n  ImageIcon,\n  TableIcon,\n} from \"lucide-react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ContextAsset, ContextAssetType } from \"./context-panel\";\n\ninterface FileTreeContextType {\n  expandedPaths: Set<string>;\n  togglePath: (path: string) => void;\n  selectedPath?: string;\n  onSelect?: (path: string) => void;\n}\n\n// Default noop for context default value\n// oxlint-disable-next-line eslint(no-empty-function)\nconst noop = () => {};\n\nconst FileTreeContext = createContext<FileTreeContextType>({\n  // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)\n  expandedPaths: new Set(),\n  togglePath: noop,\n});\n\n/**\n * Visual axis (#193, research 04 §4 ASSET-1): `code` (default, unchanged) is\n * the IDE source tree — mono + hard box; `document` is the produced-asset\n * look — sans body role, no box (section label + spacing separate it,\n * research 08), for trees of documents rather than source files.\n */\nconst fileTreeVariants = cva(\"\", {\n  variants: {\n    variant: {\n      code: \"rounded-lg border bg-background font-mono text-body\",\n      document: \"text-body\",\n    },\n  },\n  defaultVariants: { variant: \"code\" },\n});\n\nexport type FileTreeVariant = NonNullable<VariantProps<typeof fileTreeVariants>[\"variant\"]>;\n\nexport type FileTreeProps = Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> &\n  VariantProps<typeof fileTreeVariants> & {\n    expanded?: Set<string>;\n    defaultExpanded?: Set<string>;\n    selectedPath?: string;\n    onSelect?: (path: string) => void;\n    onExpandedChange?: (expanded: Set<string>) => void;\n  };\n\nexport const FileTree = forwardRef<HTMLDivElement, FileTreeProps>(function FileTree(\n  {\n    expanded: controlledExpanded,\n    defaultExpanded = new Set(),\n    selectedPath,\n    onSelect,\n    onExpandedChange,\n    variant,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const expandedPaths = controlledExpanded ?? internalExpanded;\n\n  const togglePath = useCallback(\n    (path: string) => {\n      const newExpanded = new Set(expandedPaths);\n      if (newExpanded.has(path)) {\n        newExpanded.delete(path);\n      } else {\n        newExpanded.add(path);\n      }\n      setInternalExpanded(newExpanded);\n      onExpandedChange?.(newExpanded);\n    },\n    [expandedPaths, onExpandedChange],\n  );\n\n  const contextValue = useMemo(\n    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),\n    [expandedPaths, onSelect, selectedPath, togglePath],\n  );\n\n  return (\n    <FileTreeContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        className={cn(fileTreeVariants({ variant }), className)}\n        role=\"tree\"\n        {...props}\n      >\n        <div className={cn(variant === \"document\" ? undefined : \"p-2\")}>{children}</div>\n      </div>\n    </FileTreeContext.Provider>\n  );\n});\n\nexport type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const FileTreeIcon = ({ className, children, ...props }: FileTreeIconProps) => (\n  <span className={cn(\"shrink-0\", className)} {...props}>\n    {children}\n  </span>\n);\n\nexport type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const FileTreeName = ({ className, children, ...props }: FileTreeNameProps) => (\n  <span className={cn(\"truncate\", className)} {...props}>\n    {children}\n  </span>\n);\n\ninterface FileTreeFolderContextType {\n  path: string;\n  name: string;\n  isExpanded: boolean;\n}\n\nconst FileTreeFolderContext = createContext<FileTreeFolderContextType>({\n  isExpanded: false,\n  name: \"\",\n  path: \"\",\n});\n\nexport type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {\n  path: string;\n  name: string;\n};\n\nexport const FileTreeFolder = ({\n  path,\n  name,\n  className,\n  children,\n  ...props\n}: FileTreeFolderProps) => {\n  const { t } = useLocale();\n  const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);\n  const isExpanded = expandedPaths.has(path);\n  const isSelected = selectedPath === path;\n\n  const handleOpenChange = useCallback(() => {\n    togglePath(path);\n  }, [togglePath, path]);\n\n  const handleSelect = useCallback(() => {\n    onSelect?.(path);\n  }, [onSelect, path]);\n\n  const folderContextValue = useMemo(() => ({ isExpanded, name, path }), [isExpanded, name, path]);\n\n  return (\n    <FileTreeFolderContext.Provider value={folderContextValue}>\n      <Collapsible onOpenChange={handleOpenChange} open={isExpanded}>\n        <div className={cn(\"\", className)} role=\"treeitem\" tabIndex={0} {...props}>\n          <div\n            className={cn(\n              \"flex w-full items-center gap-1 rounded px-2 py-1 text-start transition-colors hover:bg-muted/50\",\n              isSelected && \"bg-muted\",\n            )}\n          >\n            <CollapsibleTrigger asChild>\n              <button\n                aria-label={t(\n                  isExpanded ? \"ai.fileTree.collapseFolder\" : \"ai.fileTree.expandFolder\",\n                  { name },\n                )}\n                className=\"flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0\"\n                type=\"button\"\n              >\n                <ChevronRightIcon\n                  aria-hidden=\"true\"\n                  className={cn(\n                    \"size-4 shrink-0 text-muted-foreground transition-transform\",\n                    isExpanded && \"rotate-90\",\n                  )}\n                  data-rtl-flip\n                />\n              </button>\n            </CollapsibleTrigger>\n            <button\n              className=\"flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-start\"\n              onClick={handleSelect}\n              type=\"button\"\n            >\n              <FileTreeIcon>\n                {isExpanded ? (\n                  <FolderOpenIcon className=\"size-4 text-primary\" />\n                ) : (\n                  <FolderIcon className=\"size-4 text-primary\" />\n                )}\n              </FileTreeIcon>\n              <FileTreeName>{name}</FileTreeName>\n            </button>\n          </div>\n          <CollapsibleContent>\n            <div className=\"ms-4 border-s ps-2\">{children}</div>\n          </CollapsibleContent>\n        </div>\n      </Collapsible>\n    </FileTreeFolderContext.Provider>\n  );\n};\n\ninterface FileTreeFileContextType {\n  path: string;\n  name: string;\n}\n\nconst FileTreeFileContext = createContext<FileTreeFileContextType>({\n  name: \"\",\n  path: \"\",\n});\n\nexport type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {\n  path: string;\n  name: string;\n  icon?: ReactNode;\n};\n\nexport const FileTreeFile = ({\n  path,\n  name,\n  icon,\n  className,\n  children,\n  ...props\n}: FileTreeFileProps) => {\n  const { selectedPath, onSelect } = useContext(FileTreeContext);\n  const isSelected = selectedPath === path;\n\n  const handleClick = useCallback(() => {\n    onSelect?.(path);\n  }, [onSelect, path]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Enter\" || e.key === \" \") {\n        onSelect?.(path);\n      }\n    },\n    [onSelect, path],\n  );\n\n  const fileContextValue = useMemo(() => ({ name, path }), [name, path]);\n\n  return (\n    <FileTreeFileContext.Provider value={fileContextValue}>\n      <div\n        className={cn(\n          \"flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50\",\n          isSelected && \"bg-muted\",\n          className,\n        )}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role=\"treeitem\"\n        tabIndex={0}\n        {...props}\n      >\n        {children ?? (\n          <>\n            {/* Spacer for alignment */}\n            <span className=\"size-4 shrink-0\" />\n            <FileTreeIcon>\n              {icon ?? <FileIcon className=\"size-4 text-muted-foreground\" />}\n            </FileTreeIcon>\n            <FileTreeName>{name}</FileTreeName>\n          </>\n        )}\n      </div>\n    </FileTreeFileContext.Provider>\n  );\n};\n\nexport type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;\n\nconst stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();\n\nexport const FileTreeActions = ({ className, children, ...props }: FileTreeActionsProps) => (\n  <div\n    className={cn(\"ms-auto flex items-center gap-1\", className)}\n    onClick={stopPropagation}\n    onKeyDown={stopPropagation}\n    role=\"group\"\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/** Asset-type glyphs (lucide, research 04 §4) — doc / code / sql / csv / image. */\nexport const PRODUCED_ASSET_ICONS: Record<ContextAssetType, LucideIcon> = {\n  markdown: FileTextIcon,\n  code: FileCode2Icon,\n  sql: DatabaseIcon,\n  csv: TableIcon,\n  image: ImageIcon,\n};\n\n/**\n * The glyph for one asset.\n *\n * A FILE-BACKED asset (`source` set — a PDF, a deck, a video reaching the rail\n * through `AssetPreview`'s `renderPreview` seam) carries a `type` from a closed\n * five-member union that cannot describe it, so the type-keyed glyph above\n * would lie: a PDF typed `code` would draw a code glyph. Its name and MIME do\n * know, so those go through the shared resolver instead (ADR 0024 §6).\n *\n * An asset with inline `content` keeps the type-keyed glyph exactly as before —\n * for those the author's `type` is the better answer, not a guess from a\n * filename.\n */\nfunction assetIcon(asset: ContextAsset): LucideIcon {\n  return asset.source ? fileIconFor(asset.name, asset.mediaType) : PRODUCED_ASSET_ICONS[asset.type];\n}\n\nexport type ProducedAssetTreeProps = Omit<\n  FileTreeProps,\n  \"variant\" | \"onSelect\" | \"selectedPath\"\n> & {\n  /** The produced assets, in display order. */\n  assets: ContextAsset[];\n  /** Selected asset id (mirror `useContextPanel().state.selectedAsset?.id`). */\n  selectedId?: string;\n  /** Called with the chosen asset — wire to `useContextPanel().actions.openDetail`. */\n  onSelect?: (asset: ContextAsset) => void;\n};\n\n/**\n * ProducedAssetTree — the document-variant preset (#193, research 04 §4):\n * produced assets are documents, not source code, so the tree reads sans,\n * box-free, with first-class asset-type icons. Pair with `ContextPanelSection`\n * for the label; selection drives the ContextPanel drill-in.\n */\nexport const ProducedAssetTree = forwardRef<HTMLDivElement, ProducedAssetTreeProps>(\n  function ProducedAssetTree({ assets, selectedId, onSelect, ...props }, ref) {\n    const { t } = useLocale();\n    const assetsById = useMemo(() => new Map(assets.map((asset) => [asset.id, asset])), [assets]);\n    const handleSelect = useCallback(\n      (path: string) => {\n        const asset = assetsById.get(path);\n        if (asset) onSelect?.(asset);\n      },\n      [assetsById, onSelect],\n    );\n    // Empty: a plain note, not an empty `role=\"tree\"` — a tree with no\n    // `treeitem` fails `aria-required-children` and announces nothing useful.\n    if (assets.length === 0) {\n      return (\n        <div\n          ref={ref}\n          data-slot=\"file-tree-empty\"\n          className={cn(\"px-2 py-1 text-body text-muted-foreground\", props.className)}\n        >\n          {t(\"ai.fileTree.noAssetsProduced\")}\n        </div>\n      );\n    }\n    return (\n      <FileTree\n        ref={ref}\n        variant=\"document\"\n        selectedPath={selectedId}\n        onSelect={handleSelect}\n        {...props}\n      >\n        {assets.map((asset) => {\n          const Icon = assetIcon(asset);\n          return (\n            <FileTreeFile key={asset.id} path={asset.id} name={asset.name}>\n              <FileTreeIcon>\n                <Icon aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />\n              </FileTreeIcon>\n              <FileTreeName>{asset.name}</FileTreeName>\n            </FileTreeFile>\n          );\n        })}\n      </FileTree>\n    );\n  },\n);\n"],"mappings":";;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,WAA8B;AAEvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,eAAe,YAAY,aAAa,YAAY,SAAS,gBAAgB;AA2F9E,SA2KE,UA3KF,KA0FI,YA1FJ;AA/ER,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAM,kBAAkB,cAAmC;AAAA;AAAA,EAEzD,eAAe,oBAAI,IAAI;AAAA,EACvB,YAAY;AACd,CAAC;AAQD,IAAM,mBAAmB,IAAI,IAAI;AAAA,EAC/B,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,OAAO;AACrC,CAAC;AAaM,IAAM,WAAW,WAA0C,SAASA,UACzE;AAAA,EACE,UAAU;AAAA,EACV,kBAAkB,oBAAI,IAAI;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,eAAe;AACxE,QAAM,gBAAgB,sBAAsB;AAE5C,QAAM,aAAa;AAAA,IACjB,CAAC,SAAiB;AAChB,YAAM,cAAc,IAAI,IAAI,aAAa;AACzC,UAAI,YAAY,IAAI,IAAI,GAAG;AACzB,oBAAY,OAAO,IAAI;AAAA,MACzB,OAAO;AACL,oBAAY,IAAI,IAAI;AAAA,MACtB;AACA,0BAAoB,WAAW;AAC/B,yBAAmB,WAAW;AAAA,IAChC;AAAA,IACA,CAAC,eAAe,gBAAgB;AAAA,EAClC;AAEA,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,eAAe,UAAU,cAAc,WAAW;AAAA,IAC3D,CAAC,eAAe,UAAU,cAAc,UAAU;AAAA,EACpD;AAEA,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,cAC/B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,iBAAiB,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MACtD,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ,8BAAC,SAAI,WAAW,GAAG,YAAY,aAAa,SAAY,KAAK,GAAI,UAAS;AAAA;AAAA,EAC5E,GACF;AAEJ,CAAC;AAIM,IAAM,eAAe,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,MAC3D,oBAAC,UAAK,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAC7C,UACH;AAKK,IAAM,eAAe,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,MAC3D,oBAAC,UAAK,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAC7C,UACH;AASF,IAAM,wBAAwB,cAAyC;AAAA,EACrE,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAOM,IAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,QAAM,EAAE,eAAe,YAAY,cAAc,SAAS,IAAI,WAAW,eAAe;AACxF,QAAM,aAAa,cAAc,IAAI,IAAI;AACzC,QAAM,aAAa,iBAAiB;AAEpC,QAAM,mBAAmB,YAAY,MAAM;AACzC,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,YAAY,IAAI,CAAC;AAErB,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,QAAM,qBAAqB,QAAQ,OAAO,EAAE,YAAY,MAAM,KAAK,IAAI,CAAC,YAAY,MAAM,IAAI,CAAC;AAE/F,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,oBACrC,8BAAC,eAAY,cAAc,kBAAkB,MAAM,YACjD,+BAAC,SAAI,WAAW,GAAG,IAAI,SAAS,GAAG,MAAK,YAAW,UAAU,GAAI,GAAG,OAClE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,cAAc;AAAA,QAChB;AAAA,QAEA;AAAA,8BAAC,sBAAmB,SAAO,MACzB;AAAA,YAAC;AAAA;AAAA,cACC,cAAY;AAAA,gBACV,aAAa,+BAA+B;AAAA,gBAC5C,EAAE,KAAK;AAAA,cACT;AAAA,cACA,WAAU;AAAA,cACV,MAAK;AAAA,cAEL;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,WAAW;AAAA,oBACT;AAAA,oBACA,cAAc;AAAA,kBAChB;AAAA,kBACA,iBAAa;AAAA;AAAA,cACf;AAAA;AAAA,UACF,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS;AAAA,cACT,MAAK;AAAA,cAEL;AAAA,oCAAC,gBACE,uBACC,oBAAC,kBAAe,WAAU,uBAAsB,IAEhD,oBAAC,cAAW,WAAU,uBAAsB,GAEhD;AAAA,gBACA,oBAAC,gBAAc,gBAAK;AAAA;AAAA;AAAA,UACtB;AAAA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,sBACC,8BAAC,SAAI,WAAU,sBAAsB,UAAS,GAChD;AAAA,KACF,GACF,GACF;AAEJ;AAOA,IAAM,sBAAsB,cAAuC;AAAA,EACjE,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAQM,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,EAAE,cAAc,SAAS,IAAI,WAAW,eAAe;AAC7D,QAAM,aAAa,iBAAiB;AAEpC,QAAM,cAAc,YAAY,MAAM;AACpC,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,mBAAW,IAAI;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,IAAI;AAAA,EACjB;AAEA,QAAM,mBAAmB,QAAQ,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,MAAM,IAAI,CAAC;AAErE,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,kBACnC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACT,GAAG;AAAA,MAEH,sBACC,iCAEE;AAAA,4BAAC,UAAK,WAAU,mBAAkB;AAAA,QAClC,oBAAC,gBACE,kBAAQ,oBAAC,YAAS,WAAU,gCAA+B,GAC9D;AAAA,QACA,oBAAC,gBAAc,gBAAK;AAAA,SACtB;AAAA;AAAA,EAEJ,GACF;AAEJ;AAIA,IAAM,kBAAkB,CAAC,MAA4B,EAAE,gBAAgB;AAEhE,IAAM,kBAAkB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,MAC9D;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,mCAAmC,SAAS;AAAA,IAC1D,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAK;AAAA,IACJ,GAAG;AAAA,IAEH;AAAA;AACH;AAIK,IAAM,uBAA6D;AAAA,EACxE,UAAU;AAAA,EACV,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,OAAO;AACT;AAeA,SAAS,UAAU,OAAiC;AAClD,SAAO,MAAM,SAAS,YAAY,MAAM,MAAM,MAAM,SAAS,IAAI,qBAAqB,MAAM,IAAI;AAClG;AAoBO,IAAM,oBAAoB;AAAA,EAC/B,SAASC,mBAAkB,EAAE,QAAQ,YAAY,UAAU,GAAG,MAAM,GAAG,KAAK;AAC1E,UAAM,EAAE,EAAE,IAAI,UAAU;AACxB,UAAM,aAAa,QAAQ,MAAM,IAAI,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;AAC5F,UAAM,eAAe;AAAA,MACnB,CAAC,SAAiB;AAChB,cAAM,QAAQ,WAAW,IAAI,IAAI;AACjC,YAAI,MAAO,YAAW,KAAK;AAAA,MAC7B;AAAA,MACA,CAAC,YAAY,QAAQ;AAAA,IACvB;AAGA,QAAI,OAAO,WAAW,GAAG;AACvB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,aAAU;AAAA,UACV,WAAW,GAAG,6CAA6C,MAAM,SAAS;AAAA,UAEzE,YAAE,8BAA8B;AAAA;AAAA,MACnC;AAAA,IAEJ;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,cAAc;AAAA,QACd,UAAU;AAAA,QACT,GAAG;AAAA,QAEH,iBAAO,IAAI,CAAC,UAAU;AACrB,gBAAM,OAAO,UAAU,KAAK;AAC5B,iBACE,qBAAC,gBAA4B,MAAM,MAAM,IAAI,MAAM,MAAM,MACvD;AAAA,gCAAC,gBACC,8BAAC,QAAK,eAAY,QAAO,WAAU,gCAA+B,GACpE;AAAA,YACA,oBAAC,gBAAc,gBAAM,MAAK;AAAA,eAJT,MAAM,EAKzB;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","names":["FileTree","ProducedAssetTree"]}

package/dist/chunk-UCJ6IUFS.js

@@ -0,0 +1,52 @@
+"use client";
+
+// src/agent-timeline.tsx
+import { StatusBadge, TimelineItem, TimelineRoot } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { forwardRef, memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AgentTimeline = forwardRef(
+  function AgentTimeline2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(TimelineRoot, { ref, className: cn("not-prose w-full", className), ...props });
+  }
+);
+var AgentStep = memo(
+  forwardRef(function AgentStep2({
+    icon: Icon,
+    name,
+    summary,
+    status = "pending",
+    hideBadge = false,
+    className,
+    children,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx(
+      TimelineItem,
+      {
+        ref,
+        status,
+        description: summary ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: summary }) : void 0,
+        detail: children,
+        className: cn(
+          "fade-in-0 slide-in-from-top-2 animate-in [--tw-ease:var(--ease-entrance)] motion-reduce:animate-none",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+          Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }) : null,
+          name,
+          hideBadge ? null : /* @__PURE__ */ jsx(StatusBadge, { size: "sm", status })
+        ] })
+      }
+    );
+  })
+);
+AgentTimeline.displayName = "AgentTimeline";
+AgentStep.displayName = "AgentStep";
+
+export {
+  AgentTimeline,
+  AgentStep
+};
+//# sourceMappingURL=chunk-UCJ6IUFS.js.map

package/dist/chunk-UCJ6IUFS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/agent-timeline.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * AgentTimeline / AgentStep — the agent execution-trace rail (#192,\n * research 10 §B.3).\n *\n * The convergence compound of the execution-trace grammar: sequenced,\n * status-bearing agent steps render on ONE visual spine — the canonical\n * `@elabs-ai/components-ui` Timeline rail (`TimelineRoot`/`TimelineItem`, #190) — speaking\n * ONE status vocabulary — the closed 7-state `Status` enum (`StatusBadge`,\n * #189). `ChainOfThought`'s steps and `Task`'s body compose this instead of\n * hand-rolling rails; an inspect-only `Tool` call renders as an `AgentStep`\n * with its JSON behind a `ToolDetails` disclosure as children.\n *\n * Deliberately NOT converged (different speech-acts, research 10 §B.3):\n * `Plan` (a proposal, not an executed step), `Checkpoint` (a divider/restore\n * point), `Reasoning` (inline thinking prose).\n *\n * The shared rail is motion-free; the gated entrance animation lives here,\n * in the composing consumer (research 10 §B.2).\n */\nimport { StatusBadge, TimelineItem, TimelineRoot, type Status } from \"@elabs-ai/components-ui\";\nimport type { TimelineItemProps, TimelineRootProps } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { forwardRef, memo, type ReactNode } from \"react\";\n\nexport type AgentTimelineProps = TimelineRootProps;\n\n/** The `<ol>` rail an agent run's steps sit on (canonical @elabs-ai/components-ui spine). */\nexport const AgentTimeline = forwardRef<HTMLOListElement, AgentTimelineProps>(\n  function AgentTimeline({ className, ...props }, ref) {\n    return <TimelineRoot ref={ref} className={cn(\"not-prose w-full\", className)} {...props} />;\n  },\n);\n\nexport interface AgentStepProps extends Omit<TimelineItemProps, \"children\" | \"description\"> {\n  /** Optional leading concept glyph on the title row (Lucide). */\n  icon?: LucideIcon;\n  /** What the agent did — the step's title (`text-body`). */\n  name: ReactNode;\n  /** The business summary line under the name (`text-meta`), not JSON. */\n  summary?: ReactNode;\n  /**\n   * The canonical execution status (closed 7-state enum). Drives the rail\n   * node AND the `StatusBadge`. `skipped` is the agent-step-only state with\n   * no SDK source (research 10 §B.1).\n   */\n  status?: Status;\n  /**\n   * Drop the inline `StatusBadge` (the rail node still carries the status\n   * color). For quiet prose rails — e.g. the `ChainOfThought` alias — where a\n   * badge per step would shout.\n   */\n  hideBadge?: boolean;\n  /** Rich detail under the node (e.g. a `ToolDetails` disclosure, results). */\n  children?: ReactNode;\n}\n\n/**\n * One executed/executing step: icon + name + `StatusBadge` + business\n * summary, with composed children for detail. Memoized for long transcripts\n * (research 10 §G.6).\n */\nexport const AgentStep = memo(\n  forwardRef<HTMLLIElement, AgentStepProps>(function AgentStep(\n    {\n      icon: Icon,\n      name,\n      summary,\n      status = \"pending\",\n      hideBadge = false,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <TimelineItem\n        ref={ref}\n        status={status}\n        description={\n          summary ? <span className=\"text-meta text-muted-foreground\">{summary}</span> : undefined\n        }\n        detail={children}\n        className={cn(\n          \"fade-in-0 slide-in-from-top-2 animate-in [--tw-ease:var(--ease-entrance)] motion-reduce:animate-none\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"inline-flex items-center gap-2\">\n          {Icon ? (\n            <Icon aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n          ) : null}\n          {name}\n          {hideBadge ? null : <StatusBadge size=\"sm\" status={status} />}\n        </span>\n      </TimelineItem>\n    );\n  }),\n);\n\nAgentTimeline.displayName = \"AgentTimeline\";\nAgentStep.displayName = \"AgentStep\";\n"],"mappings":";;;AAqBA,SAAS,aAAa,cAAc,oBAAiC;AAErE,SAAS,UAAU;AAEnB,SAAS,YAAY,YAA4B;AAOtC,cA4DH,YA5DG;AAFJ,IAAM,gBAAgB;AAAA,EAC3B,SAASA,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACnD,WAAO,oBAAC,gBAAa,KAAU,WAAW,GAAG,oBAAoB,SAAS,GAAI,GAAG,OAAO;AAAA,EAC1F;AACF;AA8BO,IAAM,YAAY;AAAA,EACvB,WAA0C,SAASC,WACjD;AAAA,IACE,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,aACE,UAAU,oBAAC,UAAK,WAAU,mCAAmC,mBAAQ,IAAU;AAAA,QAEjF,QAAQ;AAAA,QACR,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ,+BAAC,UAAK,WAAU,kCACb;AAAA,iBACC,oBAAC,QAAK,eAAY,QAAO,WAAU,yCAAwC,IACzE;AAAA,UACH;AAAA,UACA,YAAY,OAAO,oBAAC,eAAY,MAAK,MAAK,QAAgB;AAAA,WAC7D;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AAEA,cAAc,cAAc;AAC5B,UAAU,cAAc;","names":["AgentTimeline","AgentStep"]}