@elabs-ai/components-ai 4.0.0

package/src/dark-theme-variant.test.ts

@@ -0,0 +1,47 @@
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+import { BUILT_IN_THEME_META, BUILT_IN_THEMES } from "@elabs-ai/components-tokens";
+
+/**
+ * Regression lock for #3: the Tailwind `dark:` custom variant in themes.css must
+ * match EVERY dark-appearance theme. Components like CodeBlock select their dark
+ * palette via `dark:` overrides; if a dark theme is missing from the variant it
+ * renders light-on-dark (illegible). This catches a new dark theme being added
+ * without updating the variant.
+ */
+const themesCssPath = [
+  resolve(process.cwd(), "../tokens/src/themes.css"), // cwd = packages/ai
+  resolve(process.cwd(), "packages/tokens/src/themes.css"), // cwd = repo root
+  resolve(process.cwd(), "../../packages/tokens/src/themes.css"),
+].find((candidate) => existsSync(candidate));
+
+if (!themesCssPath) {
+  throw new Error(`themes.css not found from ${process.cwd()}`);
+}
+
+const themesCss = readFileSync(themesCssPath, "utf8");
+
+const darkVariant = themesCss.match(/@custom-variant dark \(([^;]*)\)/);
+const darkVariantSelector = darkVariant?.[1] ?? "";
+
+// The BUILT-IN dark themes only. A consumer theme cannot be covered here by
+// construction — its `[data-theme]` selector is not in OUR themes.css — which is
+// why a consumer authoring a dark theme must add it to their own `dark:` variant
+// (or, better, rely on semantic tokens, which need no variant at all). See
+// @.claude/rules/theming.md.
+const darkThemes = BUILT_IN_THEMES.filter((name) => BUILT_IN_THEME_META[name].dark);
+
+describe("dark: custom variant", () => {
+  it("is declared in themes.css", () => {
+    expect(darkVariantSelector).not.toBe("");
+  });
+
+  it("covers at least the known dark themes (dark)", () => {
+    expect(darkThemes).toEqual(expect.arrayContaining(["dark"]));
+  });
+
+  it.each(darkThemes)("matches [data-theme=%s]", (name) => {
+    expect(darkVariantSelector).toContain(`[data-theme="${name}"]`);
+  });
+});

package/src/edge.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import type { EdgeProps } from "@xyflow/react";
+import { Suspense } from "react";
+
+import { lazyFlowPart } from "./_flow-lazy";
+
+/**
+ * React Flow lives behind a dynamic import — see `_flow-lazy.ts` and ADR 0019.
+ * `EdgeProps` above is a TYPE import and erases.
+ */
+const AnimatedImpl = lazyFlowPart<EdgeProps>((m) => m.EdgeAnimated);
+const TemporaryImpl = lazyFlowPart<EdgeProps>((m) => m.EdgeTemporary);
+
+// Edges render inside React Flow's `<svg>`, so the fallback must be `null` —
+// there is no box to reserve, and the engine chunk is the one the surrounding
+// `<Canvas>` already fetched.
+const Animated = (props: EdgeProps) => (
+  <Suspense fallback={null}>
+    <AnimatedImpl {...props} />
+  </Suspense>
+);
+
+const Temporary = (props: EdgeProps) => (
+  <Suspense fallback={null}>
+    <TemporaryImpl {...props} />
+  </Suspense>
+);
+
+export const Edge = {
+  Animated,
+  Temporary,
+};

package/src/environment-variables.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import { Badge } from "@elabs-ai/components-ui";
+import { Button } from "@elabs-ai/components-ui";
+import { Switch } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useLocale } from "@elabs-ai/components-ui";
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+interface EnvironmentVariablesContextType {
+  showValues: boolean;
+  setShowValues: (show: boolean) => void;
+}
+
+// Default noop for context default value
+// oxlint-disable-next-line eslint(no-empty-function)
+const noop = () => {};
+
+const EnvironmentVariablesContext = createContext<EnvironmentVariablesContextType>({
+  setShowValues: noop,
+  showValues: false,
+});
+
+export type EnvironmentVariablesProps = HTMLAttributes<HTMLDivElement> & {
+  showValues?: boolean;
+  defaultShowValues?: boolean;
+  onShowValuesChange?: (show: boolean) => void;
+};
+
+export const EnvironmentVariables = ({
+  showValues: controlledShowValues,
+  defaultShowValues = false,
+  onShowValuesChange,
+  className,
+  children,
+  ...props
+}: EnvironmentVariablesProps) => {
+  const [internalShowValues, setInternalShowValues] = useState(defaultShowValues);
+  const showValues = controlledShowValues ?? internalShowValues;
+
+  const setShowValues = useCallback(
+    (show: boolean) => {
+      setInternalShowValues(show);
+      onShowValuesChange?.(show);
+    },
+    [onShowValuesChange],
+  );
+
+  const contextValue = useMemo(() => ({ setShowValues, showValues }), [setShowValues, showValues]);
+
+  return (
+    <EnvironmentVariablesContext.Provider value={contextValue}>
+      <div className={cn("rounded-lg border bg-background", className)} {...props}>
+        {children}
+      </div>
+    </EnvironmentVariablesContext.Provider>
+  );
+};
+
+export type EnvironmentVariablesHeaderProps = HTMLAttributes<HTMLDivElement>;
+
+export const EnvironmentVariablesHeader = ({
+  className,
+  children,
+  ...props
+}: EnvironmentVariablesHeaderProps) => (
+  <div className={cn("flex items-center justify-between border-b px-4 py-3", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type EnvironmentVariablesTitleProps = HTMLAttributes<HTMLHeadingElement>;
+
+export const EnvironmentVariablesTitle = ({
+  className,
+  children,
+  ...props
+}: EnvironmentVariablesTitleProps) => (
+  <h3 className={cn("font-medium text-sm", className)} {...props}>
+    {children ?? "Environment Variables"}
+  </h3>
+);
+
+export type EnvironmentVariablesToggleProps = ComponentProps<typeof Switch>;
+
+export const EnvironmentVariablesToggle = ({
+  className,
+  ...props
+}: EnvironmentVariablesToggleProps) => {
+  const { t } = useLocale();
+  const { showValues, setShowValues } = useContext(EnvironmentVariablesContext);
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <span className="text-muted-foreground text-xs">
+        {showValues ? <EyeIcon size={14} /> : <EyeOffIcon size={14} />}
+      </span>
+      <Switch
+        aria-label={t("ai.environmentVariables.toggleVisibility")}
+        checked={showValues}
+        onCheckedChange={setShowValues}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export type EnvironmentVariablesContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const EnvironmentVariablesContent = ({
+  className,
+  children,
+  ...props
+}: EnvironmentVariablesContentProps) => (
+  <div className={cn("divide-y", className)} {...props}>
+    {children}
+  </div>
+);
+
+interface EnvironmentVariableContextType {
+  name: string;
+  value: string;
+}
+
+const EnvironmentVariableContext = createContext<EnvironmentVariableContextType>({
+  name: "",
+  value: "",
+});
+
+export type EnvironmentVariableGroupProps = HTMLAttributes<HTMLDivElement>;
+
+export const EnvironmentVariableGroup = ({
+  className,
+  children,
+  ...props
+}: EnvironmentVariableGroupProps) => (
+  <div className={cn("flex items-center gap-2", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type EnvironmentVariableNameProps = HTMLAttributes<HTMLSpanElement>;
+
+export const EnvironmentVariableName = ({
+  className,
+  children,
+  ...props
+}: EnvironmentVariableNameProps) => {
+  const { name } = useContext(EnvironmentVariableContext);
+
+  return (
+    <span className={cn("font-mono text-sm", className)} {...props}>
+      {children ?? name}
+    </span>
+  );
+};
+
+export type EnvironmentVariableValueProps = HTMLAttributes<HTMLSpanElement>;
+
+export const EnvironmentVariableValue = ({
+  className,
+  children,
+  ...props
+}: EnvironmentVariableValueProps) => {
+  const { value } = useContext(EnvironmentVariableContext);
+  const { showValues } = useContext(EnvironmentVariablesContext);
+
+  const displayValue = showValues ? value : "•".repeat(Math.min(value.length, 20));
+
+  return (
+    <span
+      className={cn(
+        "font-mono text-muted-foreground text-sm",
+        !showValues && "select-none",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? displayValue}
+    </span>
+  );
+};
+
+export type EnvironmentVariableProps = HTMLAttributes<HTMLDivElement> & {
+  name: string;
+  value: string;
+};
+
+export const EnvironmentVariable = ({
+  name,
+  value,
+  className,
+  children,
+  ...props
+}: EnvironmentVariableProps) => {
+  const envVarContextValue = useMemo(() => ({ name, value }), [name, value]);
+
+  return (
+    <EnvironmentVariableContext.Provider value={envVarContextValue}>
+      <div
+        className={cn("flex items-center justify-between gap-4 px-4 py-3", className)}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <div className="flex items-center gap-2">
+              <EnvironmentVariableName />
+            </div>
+            <EnvironmentVariableValue />
+          </>
+        )}
+      </div>
+    </EnvironmentVariableContext.Provider>
+  );
+};
+
+export type EnvironmentVariableCopyButtonProps = ComponentProps<typeof Button> & {
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+  copyFormat?: "name" | "value" | "export";
+};
+
+export const EnvironmentVariableCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2000,
+  copyFormat = "value",
+  children,
+  className,
+  ...props
+}: EnvironmentVariableCopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<number>(0);
+  const { name, value } = useContext(EnvironmentVariableContext);
+
+  const getTextToCopy = useCallback((): string => {
+    const formatMap = {
+      export: () => `export ${name}="${value}"`,
+      name: () => name,
+      value: () => value,
+    };
+    return formatMap[copyFormat]();
+  }, [name, value, copyFormat]);
+
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(getTextToCopy());
+      setIsCopied(true);
+      onCopy?.();
+      timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  }, [getTextToCopy, onCopy, onError, timeout]);
+
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    [],
+  );
+
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+
+  return (
+    <Button
+      className={cn("size-6 shrink-0", className)}
+      onClick={copyToClipboard}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <Icon size={12} />}
+    </Button>
+  );
+};
+
+export type EnvironmentVariableRequiredProps = ComponentProps<typeof Badge>;
+
+export const EnvironmentVariableRequired = ({
+  className,
+  children,
+  ...props
+}: EnvironmentVariableRequiredProps) => (
+  <Badge className={cn("text-xs", className)} variant="secondary" {...props}>
+    {children ?? "Required"}
+  </Badge>
+);

package/src/file-tree.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import type { ContextAsset } from "./context-panel";
+import { FileTree, FileTreeFile, FileTreeFolder, ProducedAssetTree } from "./file-tree";
+
+const meta = {
+  title: "AI/FileTree",
+  component: FileTree,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof FileTree>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default `code` variant — the IDE source tree (mono, boxed). Unchanged look. */
+export const Default: Story = {
+  render: () => (
+    <FileTree className="max-w-sm" defaultExpanded={new Set(["src"])}>
+      <FileTreeFolder path="src" name="src">
+        <FileTreeFile path="src/index.ts" name="index.ts" />
+        <FileTreeFile path="src/app.tsx" name="app.tsx" />
+      </FileTreeFolder>
+      <FileTreeFile path="package.json" name="package.json" />
+    </FileTree>
+  ),
+};
+
+/** `document` variant — sans, box-free: for trees of documents, not source. */
+export const DocumentVariant: Story = {
+  render: () => (
+    <FileTree variant="document" className="max-w-sm">
+      <FileTreeFile path="board-note.md" name="board-note.md" />
+      <FileTreeFile path="summary.md" name="summary.md" />
+    </FileTree>
+  ),
+};
+
+const ASSETS: ContextAsset[] = [
+  { id: "board-note", name: "board-note.md", type: "markdown", content: "# Note" },
+  { id: "variance-query", name: "variance-check.sql", type: "sql", content: "SELECT 1;" },
+  { id: "revenue", name: "revenue.csv", type: "csv", content: "a,b\n1,2" },
+  { id: "trend", name: "trend.png", type: "image" },
+];
+
+/**
+ * ProducedAssetTree — the document-variant preset (#193, research 04 §4):
+ * asset-type icons first-class; selection feeds the ContextPanel drill-in.
+ */
+export const ProducedAssets: Story = {
+  render: () => (
+    <div className="max-w-80">
+      <ProducedAssetTree assets={ASSETS} selectedId="board-note" onSelect={fn()} />
+    </div>
+  ),
+};

package/src/file-tree.test.tsx

@@ -0,0 +1,101 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ContextAsset } from "./context-panel";
+import { FileTree, FileTreeFile, FileTreeFolder, ProducedAssetTree } from "./file-tree";
+
+describe("FileTree folder icons", () => {
+  it("color them with a semantic token, not a raw palette color (theme-safe)", () => {
+    const { container } = render(
+      <FileTree defaultExpanded={new Set(["src"])}>
+        <FileTreeFolder path="src" name="src">
+          <FileTreeFile path="src/index.ts" name="index.ts" />
+        </FileTreeFolder>
+      </FileTree>,
+    );
+
+    // Regression lock for #4: no raw Tailwind palette color anywhere in the tree.
+    expect(container.querySelector('[class*="text-blue-"]')).toBeNull();
+
+    // The folder glyph adapts per theme via the semantic primary token.
+    expect(container.querySelector("svg.text-primary")).not.toBeNull();
+
+    // The file glyph stays muted-foreground (the contrast that surfaced the bug).
+    expect(container.querySelector("svg.text-muted-foreground")).not.toBeNull();
+  });
+});
+
+describe("FileTree variant axis (#193, research 04 §4 ASSET-1)", () => {
+  it("keeps the IDE look by default (code variant — non-breaking)", () => {
+    const { container } = render(
+      <FileTree>
+        <FileTreeFile path="index.ts" name="index.ts" />
+      </FileTree>,
+    );
+    const root = container.firstChild as HTMLElement;
+    expect(root).toHaveClass("font-mono");
+    expect(root).toHaveClass("border");
+    expect(root).toHaveClass("bg-background");
+  });
+
+  it("document variant drops the mono font and the hard box", () => {
+    const { container } = render(
+      <FileTree variant="document">
+        <FileTreeFile path="note.md" name="note.md" />
+      </FileTree>,
+    );
+    const root = container.firstChild as HTMLElement;
+    expect(root).not.toHaveClass("font-mono");
+    expect(root).not.toHaveClass("border");
+    expect(root).toHaveClass("text-body");
+  });
+});
+
+describe("ProducedAssetTree (#193 — the document-variant preset)", () => {
+  const ASSETS: ContextAsset[] = [
+    { id: "note", name: "board-note.md", type: "markdown", content: "# Note" },
+    { id: "rev", name: "revenue.csv", type: "csv", content: "a,b" },
+  ];
+
+  it("renders document-variant rows with asset-type icons and selects the ASSET", async () => {
+    const onSelect = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(<ProducedAssetTree assets={ASSETS} onSelect={onSelect} />);
+
+    const root = container.firstChild as HTMLElement;
+    expect(root).not.toHaveClass("font-mono");
+    // One glyph per asset, hidden from AT (decorative — the name labels the row).
+    expect(container.querySelectorAll('svg[aria-hidden="true"]')).toHaveLength(2);
+
+    await user.click(screen.getByText("revenue.csv"));
+    expect(onSelect).toHaveBeenCalledWith(ASSETS[1]);
+  });
+
+  it("renders a real empty state for no assets", () => {
+    render(<ProducedAssetTree assets={[]} />);
+    expect(screen.getByText("No assets produced yet.")).toBeInTheDocument();
+  });
+
+  it("draws a FILE-BACKED asset from its own name, not from the closed type union", () => {
+    // A PDF reaches the rail through the `renderPreview` seam typed `code`,
+    // because `ContextAssetType` is deliberately closed (ADR 0024 §6). The
+    // type-keyed glyph would draw it as source; its name knows better.
+    const { container } = render(
+      <ProducedAssetTree
+        assets={[
+          { id: "src", name: "query.ts", type: "code", content: "const a = 1;" },
+          {
+            id: "pdf",
+            name: "audit.pdf",
+            type: "code",
+            mediaType: "application/pdf",
+            source: { kind: "url", url: "/audit.pdf", name: "audit.pdf" },
+          },
+        ]}
+      />,
+    );
+    const [code, pdf] = [...container.querySelectorAll("svg")];
+    expect(code?.getAttribute("class")).toContain("file-code");
+    expect(pdf?.getAttribute("class")).toContain("file-text");
+  });
+});