@elabs-ai/components-ui 4.0.0

package/src/components/key-value-editor/key-value-editor.test.tsx

@@ -0,0 +1,231 @@
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { KeyValueEditor, type KeyValueRow } from "./key-value-editor";
+
+describe("KeyValueEditor", () => {
+  it("renders one key/value input pair per row", () => {
+    render(
+      <KeyValueEditor
+        defaultValue={[
+          { key: "A", value: "1" },
+          { key: "B", value: "2" },
+        ]}
+      />,
+    );
+    expect(screen.getByLabelText("Key 1")).toHaveValue("A");
+    expect(screen.getByLabelText("Value 1")).toHaveValue("1");
+    expect(screen.getByLabelText("Key 2")).toHaveValue("B");
+    expect(screen.getByLabelText("Value 2")).toHaveValue("2");
+  });
+
+  it("renders a real empty state for zero rows", () => {
+    render(<KeyValueEditor defaultValue={[]} />);
+    expect(screen.getByText("No entries yet.")).toBeInTheDocument();
+  });
+
+  it("adds a row via the Add row button", async () => {
+    const onValueChange = vi.fn();
+    render(<KeyValueEditor defaultValue={[]} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("button", { name: /add row/i }));
+    expect(onValueChange).toHaveBeenCalledWith([{ key: "", value: "", secret: false }]);
+  });
+
+  it("edits a row's key and value", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <KeyValueEditor defaultValue={[{ key: "", value: "" }]} onValueChange={onValueChange} />,
+    );
+    await userEvent.type(screen.getByLabelText("Key 1"), "X");
+    expect(onValueChange).toHaveBeenLastCalledWith([{ key: "X", value: "" }]);
+  });
+
+  it("removes a row via the remove button", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <KeyValueEditor
+        defaultValue={[
+          { key: "A", value: "1" },
+          { key: "B", value: "2" },
+        ]}
+        onValueChange={onValueChange}
+      />,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Remove row 1" }));
+    expect(onValueChange).toHaveBeenCalledWith([{ key: "B", value: "2" }]);
+  });
+
+  // ── Security: masking ─────────────────────────────────────────────────
+
+  it("does not render a reveal toggle for a non-secret row", () => {
+    render(<KeyValueEditor defaultValue={[{ key: "REGION", value: "us-east-1" }]} />);
+    expect(screen.getByLabelText("Value 1")).toHaveAttribute("type", "text");
+    expect(screen.queryByRole("button", { name: /reveal/i })).not.toBeInTheDocument();
+  });
+
+  it("masks a secret row's value via type=password until revealed", () => {
+    render(
+      <KeyValueEditor
+        defaultValue={[{ key: "API_KEY", value: "sk-super-secret", secret: true }]}
+      />,
+    );
+    const valueInput = screen.getByLabelText("Value 1");
+    expect(valueInput).toHaveAttribute("type", "password");
+  });
+
+  it("reveals the value on toggle click, then hides it again", async () => {
+    render(<KeyValueEditor defaultValue={[{ key: "API_KEY", value: "sk-1234", secret: true }]} />);
+    const valueInput = screen.getByLabelText("Value 1");
+    await userEvent.click(screen.getByRole("button", { name: "Reveal value 1" }));
+    expect(valueInput).toHaveAttribute("type", "text");
+    expect(valueInput).toHaveValue("sk-1234");
+
+    await userEvent.click(screen.getByRole("button", { name: "Hide value 1" }));
+    expect(valueInput).toHaveAttribute("type", "password");
+  });
+
+  it("never exposes the raw secret via title/aria-label/aria-valuetext while masked", () => {
+    const secret = "sk-super-secret-value";
+    const { container } = render(
+      <KeyValueEditor defaultValue={[{ key: "API_KEY", value: secret, secret: true }]} />,
+    );
+    const html = container.innerHTML;
+    expect(html).not.toContain(`title="${secret}"`);
+    expect(html).not.toContain(`aria-label="${secret}"`);
+    expect(html).not.toContain(`aria-valuetext="${secret}"`);
+    // The reveal button's own accessible name never carries the secret text.
+    const revealBtn = screen.getByRole("button", { name: "Reveal value 1" });
+    expect(revealBtn).not.toHaveAccessibleName(secret);
+  });
+
+  it("preserves a row's own reveal state when an earlier row is removed", async () => {
+    render(
+      <KeyValueEditor
+        defaultValue={[
+          { key: "A", value: "one", secret: true },
+          { key: "B", value: "two", secret: true },
+        ]}
+      />,
+    );
+    // Reveal row 2's ("B") value.
+    await userEvent.click(screen.getByRole("button", { name: "Reveal value 2" }));
+    expect(screen.getByLabelText("Value 2")).toHaveAttribute("type", "text");
+
+    // Remove row 1 ("A") — row 2 ("B") shifts down to index 0 (label "Value 1").
+    await userEvent.click(screen.getByRole("button", { name: "Remove row 1" }));
+
+    // "B" is the SAME row the user explicitly revealed — its reveal state
+    // must follow it, not reset just because an earlier row was removed.
+    expect(screen.getByLabelText("Value 1")).toHaveAttribute("type", "text");
+  });
+
+  it("never leaves a NEW row at a shifted position incorrectly revealed", async () => {
+    render(
+      <KeyValueEditor
+        defaultValue={[
+          { key: "A", value: "one", secret: true },
+          { key: "B", value: "two", secret: true },
+        ]}
+      />,
+    );
+    // Reveal row 1's ("A") value, then remove row 1 itself.
+    await userEvent.click(screen.getByRole("button", { name: "Reveal value 1" }));
+    await userEvent.click(screen.getByRole("button", { name: "Remove row 1" }));
+
+    // "B" now occupies position 1 but was NEVER revealed by the user — it
+    // must render masked, not inherit the removed row's reveal state.
+    expect(screen.getByLabelText("Value 1")).toHaveAttribute("type", "password");
+  });
+
+  // The reveal stamp fails CLOSED for any row-list change this component did
+  // not itself perform — an index alone would unmask a DIFFERENT row's secret.
+
+  it("re-masks when a controlled parent PREPENDS a row under a revealed one", async () => {
+    function Harness() {
+      const [rows, setRows] = useState<KeyValueRow[]>([
+        { key: "A", value: "revealed-me", secret: true },
+        { key: "B", value: "sk-TOP-SECRET", secret: true },
+      ]);
+      return (
+        <>
+          <button onClick={() => setRows((r) => [{ key: "Z", value: "zzz", secret: true }, ...r])}>
+            prepend
+          </button>
+          <KeyValueEditor value={rows} onValueChange={setRows} />
+        </>
+      );
+    }
+    render(<Harness />);
+    await userEvent.click(screen.getByRole("button", { name: "Reveal value 1" }));
+    expect(screen.getByLabelText("Value 1")).toHaveAttribute("type", "text");
+
+    await userEvent.click(screen.getByRole("button", { name: "prepend" }));
+    // Index 1 is now "Z", a row the user never revealed.
+    expect(screen.getByLabelText("Key 1")).toHaveValue("Z");
+    expect(screen.getByLabelText("Value 1")).toHaveAttribute("type", "password");
+  });
+
+  it("re-masks when a controlled parent REORDERS the rows", async () => {
+    function Harness() {
+      const [rows, setRows] = useState<KeyValueRow[]>([
+        { key: "A", value: "aaa", secret: true },
+        { key: "B", value: "sk-TOP-SECRET", secret: true },
+      ]);
+      return (
+        <>
+          <button onClick={() => setRows((r) => [...r].reverse())}>reverse</button>
+          <KeyValueEditor value={rows} onValueChange={setRows} />
+        </>
+      );
+    }
+    render(<Harness />);
+    await userEvent.click(screen.getByRole("button", { name: "Reveal value 1" }));
+    await userEvent.click(screen.getByRole("button", { name: "reverse" }));
+    expect(screen.getByLabelText("Key 1")).toHaveValue("B");
+    expect(screen.getByLabelText("Value 1")).toHaveAttribute("type", "password");
+  });
+
+  it("never unmasks a row when a controlled parent REJECTS a removal", async () => {
+    const rows: KeyValueRow[] = [
+      { key: "A", value: "aaa", secret: true },
+      { key: "B", value: "sk-TOP-SECRET", secret: true },
+    ];
+    render(<KeyValueEditor value={rows} onValueChange={() => {}} />);
+    await userEvent.click(screen.getByRole("button", { name: "Reveal value 2" }));
+    // The parent ignores the change, so the rows do NOT shift — the re-indexed
+    // reveal must not land on row 1.
+    await userEvent.click(screen.getByRole("button", { name: "Remove row 1" }));
+    expect(screen.getByLabelText("Key 1")).toHaveValue("A");
+    expect(screen.getByLabelText("Value 1")).toHaveAttribute("type", "password");
+    expect(screen.getByLabelText("Value 2")).toHaveAttribute("type", "password");
+  });
+
+  it("keeps a revealed secret revealed while the user edits it", async () => {
+    render(<KeyValueEditor defaultValue={[{ key: "API_KEY", value: "sk-1", secret: true }]} />);
+    await userEvent.click(screen.getByRole("button", { name: "Reveal value 1" }));
+    await userEvent.type(screen.getByLabelText("Value 1"), "23");
+    expect(screen.getByLabelText("Value 1")).toHaveAttribute("type", "text");
+    expect(screen.getByLabelText("Value 1")).toHaveValue("sk-123");
+  });
+
+  it("supports the controlled mode via value/onValueChange", async () => {
+    const onValueChange = vi.fn();
+    render(<KeyValueEditor value={[]} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("button", { name: /add row/i }));
+    expect(onValueChange).toHaveBeenCalledWith([{ key: "", value: "", secret: false }]);
+  });
+
+  it("is disabled when disabled prop is set", () => {
+    render(<KeyValueEditor defaultValue={[{ key: "A", value: "1" }]} disabled />);
+    expect(screen.getByLabelText("Key 1")).toBeDisabled();
+    expect(screen.getByLabelText("Value 1")).toBeDisabled();
+    expect(screen.getByRole("button", { name: /add row/i })).toBeDisabled();
+  });
+
+  it("never blocks paste into the value field", async () => {
+    render(<KeyValueEditor defaultValue={[{ key: "A", value: "" }]} />);
+    const valueInput = screen.getByLabelText("Value 1") as HTMLInputElement;
+    expect(valueInput.onpaste).toBeNull();
+  });
+});

package/src/components/key-value-editor/key-value-editor.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { Eye, EyeOff, Plus, X } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Button } from "../button";
+import { Input } from "../input";
+import { useLocale } from "../locale-provider";
+
+export interface KeyValueRow {
+  key: string;
+  value: string;
+  /**
+   * Marks this row's value as sensitive: it renders masked (`type="password"`)
+   * with a reveal toggle, and is never surfaced in plain text via any
+   * `title`/`aria-label`/`aria-valuetext`. Defaults to false (a plain,
+   * unmasked key/value pair) — the consumer opts a row in explicitly.
+   */
+  secret?: boolean;
+}
+
+export interface KeyValueEditorProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange" | "defaultValue"
+> {
+  /**
+   * Controlled, ORDERED rows. An ordered `{ key, value, secret? }[]` is used
+   * instead of `Record<string,string>` because a plain record can't
+   * represent an in-progress duplicate key or preserve row order while the
+   * user is mid-edit — both happen constantly while typing an env-var map.
+   */
+  value?: KeyValueRow[];
+  /** Uncontrolled initial rows. */
+  defaultValue?: KeyValueRow[];
+  /** Called when the rows change (add, remove, or edit). */
+  onValueChange?: (rows: KeyValueRow[]) => void;
+  /** Placeholder for each row's key field. */
+  keyPlaceholder?: string;
+  /** Placeholder for each row's value field. */
+  valuePlaceholder?: string;
+  /** Label for the "add row" control. */
+  addLabel?: ReactNode;
+  /** Disables the whole editor. */
+  disabled?: boolean;
+}
+
+/**
+ * KeyValueEditor — key/value rows with per-row secret masking.
+ *
+ * Composes the existing `Input` + `Button` (icon vocabulary matches
+ * `packages/ai/src/environment-variables.tsx`'s `Eye`/`EyeOff` reveal icons
+ * for conceptual consistency, though this component lives in
+ * `@elabs-ai/components-ui` — an EDITABLE settings-form primitive
+ * is app UI, not the read-only agent tool-output display that
+ * `EnvironmentVariables` is).
+ *
+ * A masked row uses the native `type="password"` input (the correct
+ * primitive for an EDITABLE masked field — unlike a read-only display, the
+ * value must stay typable, and native masking is what keeps it that way
+ * without hand-rolling bullet substitution). The reveal toggle's
+ * `aria-label` never contains the secret text itself, and no `title`
+ * attribute is ever set from row content.
+ *
+ * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.
+ */
+export const KeyValueEditor = forwardRef<HTMLDivElement, KeyValueEditorProps>(
+  function KeyValueEditor(
+    {
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      keyPlaceholder,
+      valuePlaceholder,
+      addLabel,
+      disabled,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const { t } = useLocale();
+    const isControlled = valueProp !== undefined;
+    const [internalRows, setInternalRows] = useState<KeyValueRow[]>(defaultValue ?? []);
+    const rows = useMemo(
+      () => (isControlled ? (valueProp ?? []) : internalRows),
+      [isControlled, valueProp, internalRows],
+    );
+    // Reveal state is keyed by row index AND stamped with the exact value the
+    // user chose to reveal. The index alone is NOT safe: the row list can be
+    // re-ordered, prepended to, filtered, or left unchanged (a controlled
+    // parent that rejects a removal) entirely OUTSIDE this component, and a
+    // bare index would then point at a DIFFERENT row — unmasking a secret the
+    // user never asked to see. Comparing the stamp against the row's current
+    // value makes the check FAIL CLOSED: any row whose value is not exactly
+    // the one that was revealed renders masked again.
+    const [revealed, setRevealed] = useState<Map<number, string>>(() => new Map());
+
+    const isRevealed = useCallback(
+      (index: number, row: KeyValueRow) => revealed.get(index) === row.value,
+      [revealed],
+    );
+
+    const commit = useCallback(
+      (next: KeyValueRow[]) => {
+        if (!isControlled) setInternalRows(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange],
+    );
+
+    const addRow = useCallback(() => {
+      commit([...rows, { key: "", value: "", secret: false }]);
+    }, [rows, commit]);
+
+    const updateRow = useCallback(
+      (index: number, patch: Partial<KeyValueRow>) => {
+        commit(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));
+        // Typing into a row the user deliberately revealed must not re-mask it
+        // mid-keystroke — re-stamp the snapshot with the new value, but ONLY
+        // when the old stamp still matched (i.e. it really was revealed).
+        if (patch.value !== undefined) {
+          const nextValue = patch.value;
+          setRevealed((prev) => {
+            if (prev.get(index) !== rows[index]?.value) return prev;
+            const next = new Map(prev);
+            next.set(index, nextValue);
+            return next;
+          });
+        }
+      },
+      [rows, commit],
+    );
+
+    const removeRow = useCallback(
+      (index: number) => {
+        commit(rows.filter((_, i) => i !== index));
+        // Re-index revealed state so a shifted row never inherits a stale
+        // reveal — dropping the removed index and shifting later ones down.
+        // The value stamp above is the second line of defence: if the parent
+        // rejects or rewrites the removal, the shifted stamps stop matching
+        // and every row falls back to masked.
+        setRevealed((prev) => {
+          const next = new Map<number, string>();
+          for (const [i, stamp] of prev) {
+            if (i === index) continue;
+            next.set(i > index ? i - 1 : i, stamp);
+          }
+          return next;
+        });
+      },
+      [rows, commit],
+    );
+
+    const toggleReveal = useCallback((index: number, row: KeyValueRow) => {
+      setRevealed((prev) => {
+        const next = new Map(prev);
+        if (next.get(index) === row.value) next.delete(index);
+        else next.set(index, row.value);
+        return next;
+      });
+    }, []);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="key-value-editor"
+        className={cn("flex flex-col gap-2", className)}
+        {...props}
+      >
+        {rows.length === 0 ? (
+          <p data-slot="key-value-editor-empty" className="text-body text-muted-foreground">
+            {t("ui.keyValueEditor.empty")}
+          </p>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {rows.map((row, index) => {
+              const isSecret = row.secret === true;
+              const rowRevealed = isRevealed(index, row);
+              const masked = isSecret && !rowRevealed;
+              return (
+                <div
+                  key={index}
+                  data-slot="key-value-editor-row"
+                  className="flex items-center gap-1"
+                >
+                  <Input
+                    data-slot="key-value-editor-key"
+                    value={row.key}
+                    placeholder={keyPlaceholder}
+                    disabled={disabled}
+                    aria-label={t("ui.keyValueEditor.keyLabel", { n: index + 1 })}
+                    onChange={(event) => updateRow(index, { key: event.target.value })}
+                    autoComplete="off"
+                    spellCheck={false}
+                    className="flex-1"
+                  />
+                  <Input
+                    data-slot="key-value-editor-value"
+                    type={masked ? "password" : "text"}
+                    value={row.value}
+                    placeholder={valuePlaceholder}
+                    disabled={disabled}
+                    aria-label={t("ui.keyValueEditor.valueLabel", { n: index + 1 })}
+                    onChange={(event) => updateRow(index, { value: event.target.value })}
+                    autoComplete="off"
+                    spellCheck={false}
+                    className="flex-1"
+                  />
+                  {isSecret && (
+                    <Button
+                      data-slot="key-value-editor-reveal"
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      disabled={disabled}
+                      aria-label={t(
+                        rowRevealed ? "ui.keyValueEditor.hide" : "ui.keyValueEditor.reveal",
+                        { n: index + 1 },
+                      )}
+                      onClick={() => toggleReveal(index, row)}
+                    >
+                      {rowRevealed ? <EyeOff aria-hidden="true" /> : <Eye aria-hidden="true" />}
+                    </Button>
+                  )}
+                  <Button
+                    data-slot="key-value-editor-remove"
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    disabled={disabled}
+                    aria-label={t("ui.keyValueEditor.removeRow", { n: index + 1 })}
+                    onClick={() => removeRow(index)}
+                  >
+                    <X aria-hidden="true" />
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <Button
+          data-slot="key-value-editor-add"
+          type="button"
+          variant="outline-subtle"
+          size="sm"
+          disabled={disabled}
+          onClick={addRow}
+          className="self-start"
+        >
+          <Plus aria-hidden="true" />
+          {addLabel ?? t("ui.keyValueEditor.addRow")}
+        </Button>
+      </div>
+    );
+  },
+);

package/src/components/label/index.ts

@@ -0,0 +1 @@
+export { Label } from "./label";

package/src/components/label/label.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Label } from "./label";
+import { Input } from "../input";
+const meta = {
+  title: "Forms/Label",
+  component: Label,
+  tags: ["autodocs"],
+  argTypes: {
+    htmlFor: {
+      description: "Associates the label with an input by its `id`.",
+      control: "text",
+      table: { category: "Behavior" },
+    },
+    children: {
+      description: "Label text content.",
+      control: false,
+      table: { category: "Content" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the label element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <div className="grid gap-1.5">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" placeholder="you@example.com" />
+    </div>
+  ),
+};

package/src/components/label/label.tsx

@@ -0,0 +1,19 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../../lib/cn";
+
+export const Label = forwardRef<
+  ElementRef<typeof LabelPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(function Label({ className, ...props }, ref) {
+  return (
+    <LabelPrimitive.Root
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  );
+});

package/src/components/link-preview/index.ts

@@ -0,0 +1,2 @@
+export { LinkPreview, LinkPreviewCard } from "./link-preview";
+export type { LinkPreviewCardProps } from "./link-preview";