@grackle-ai/web-components 0.107.2

package/src/components/display/Tooltip.stories.tsx

@@ -0,0 +1,240 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
+import { Tooltip } from "./Tooltip.js";
+
+/** Find the portaled tooltip element in document.body by data-testid. */
+function getTooltip(testId: string = "tooltip"): HTMLElement {
+  const el = document.querySelector<HTMLElement>(`[data-testid="${testId}"]`);
+  if (!el) {
+    throw new Error(`Tooltip with data-testid="${testId}" not found`);
+  }
+  return el;
+}
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  title: "Primitives/Display/Tooltip",
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 80, display: "flex", justifyContent: "center", alignItems: "center" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default tooltip renders with role="tooltip" and starts hidden. */
+export const Default: Story = {
+  args: {
+    text: "Hello tooltip",
+    children: <button type="button">Hover me</button>,
+  },
+  play: async () => {
+    const tooltip = getTooltip();
+    await expect(tooltip).toBeInTheDocument();
+    await expect(tooltip).toHaveTextContent("Hello tooltip");
+    // Starts hidden (opacity 0 via CSS class)
+    await expect(tooltip.className).not.toContain("visible");
+  },
+};
+
+/** Tooltip appears on hover and hides on unhover. */
+export const ShowsOnHover: Story = {
+  args: {
+    text: "Hover tooltip",
+    delayMs: 0,
+    children: <button type="button">Hover me</button>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: "Hover me" });
+    const tooltip = getTooltip();
+
+    // Hover shows the tooltip
+    await userEvent.hover(trigger);
+    await waitFor(async () => {
+      await expect(tooltip.className).toContain("visible");
+    });
+
+    // Unhover hides it
+    await userEvent.unhover(trigger);
+    await waitFor(async () => {
+      await expect(tooltip.className).not.toContain("visible");
+    });
+  },
+};
+
+/** Tooltip appears when child receives keyboard focus. */
+export const ShowsOnFocus: Story = {
+  args: {
+    text: "Focus tooltip",
+    delayMs: 0,
+    children: <button type="button">Focus me</button>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: "Focus me" });
+    const tooltip = getTooltip();
+
+    // Tab into the button
+    trigger.focus();
+    await waitFor(async () => {
+      await expect(tooltip.className).toContain("visible");
+    });
+
+    // Blur hides it
+    trigger.blur();
+    await waitFor(async () => {
+      await expect(tooltip.className).not.toContain("visible");
+    });
+  },
+};
+
+/** Escape key dismisses a visible tooltip. */
+export const DismissOnEscape: Story = {
+  args: {
+    text: "Escape me",
+    delayMs: 0,
+    children: <button type="button">Hover me</button>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: "Hover me" });
+    const tooltip = getTooltip();
+
+    // Show via hover
+    await userEvent.hover(trigger);
+    await waitFor(async () => {
+      await expect(tooltip.className).toContain("visible");
+    });
+
+    // Escape dismisses
+    await userEvent.keyboard("{Escape}");
+    await waitFor(async () => {
+      await expect(tooltip.className).not.toContain("visible");
+    });
+  },
+};
+
+/** Bottom placement applies the correct CSS class. */
+export const PlacementBottom: Story = {
+  args: {
+    text: "Bottom tooltip",
+    placement: "bottom",
+    delayMs: 0,
+    children: <button type="button">Below me</button>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tooltip = getTooltip();
+    const trigger = canvas.getByRole("button", { name: "Below me" });
+
+    await userEvent.hover(trigger);
+    await waitFor(async () => {
+      await expect(tooltip.className).toContain("visible");
+    });
+    await expect(tooltip.className).toContain("bottom");
+  },
+};
+
+/** Left placement applies the correct CSS class. */
+export const PlacementLeft: Story = {
+  args: {
+    text: "Left tooltip",
+    placement: "left",
+    delayMs: 0,
+    children: <button type="button">Left of me</button>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tooltip = getTooltip();
+    const trigger = canvas.getByRole("button", { name: "Left of me" });
+
+    await userEvent.hover(trigger);
+    await waitFor(async () => {
+      await expect(tooltip.className).toContain("visible");
+    });
+    await expect(tooltip.className).toContain("left");
+  },
+};
+
+/** Right placement applies the correct CSS class. */
+export const PlacementRight: Story = {
+  args: {
+    text: "Right tooltip",
+    placement: "right",
+    delayMs: 0,
+    children: <button type="button">Right of me</button>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tooltip = getTooltip();
+    const trigger = canvas.getByRole("button", { name: "Right of me" });
+
+    await userEvent.hover(trigger);
+    await waitFor(async () => {
+      await expect(tooltip.className).toContain("visible");
+    });
+    await expect(tooltip.className).toContain("right");
+  },
+};
+
+/** Accessibility: aria-describedby links trigger wrapper to tooltip id. */
+export const AccessibilityAttributes: Story = {
+  args: {
+    text: "Accessible tooltip",
+    delayMs: 0,
+    children: <button type="button">Accessible</button>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tooltip = getTooltip();
+    const trigger = canvas.getByRole("button", { name: "Accessible" });
+
+    // Tooltip has an id and role="tooltip"
+    const tooltipId = tooltip.getAttribute("id");
+    await expect(tooltipId).toBeTruthy();
+    await expect(tooltip).toHaveAttribute("role", "tooltip");
+
+    // Show tooltip so aria-describedby is set
+    await userEvent.hover(trigger);
+    await waitFor(async () => {
+      await expect(tooltip.className).toContain("visible");
+    });
+
+    // The trigger element itself carries aria-describedby (injected via cloneElement)
+    await expect(trigger.getAttribute("aria-describedby")).toBe(tooltipId);
+  },
+};
+
+/** inline={false} renders a div wrapper instead of span. */
+export const BlockWrapper: Story = {
+  args: {
+    text: "Block tooltip",
+    inline: false,
+    children: <button type="button">Block child</button>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: "Block child" });
+    const wrapper = trigger.parentElement;
+    await expect(wrapper).toBeTruthy();
+    await expect(wrapper!.tagName).toBe("DIV");
+  },
+};
+
+/** Custom data-testid is applied to the tooltip element. */
+export const CustomTestId: Story = {
+  args: {
+    text: "Custom id",
+    "data-testid": "my-tooltip",
+    children: <button type="button">Custom</button>,
+  },
+  play: async () => {
+    const tooltip = getTooltip("my-tooltip");
+    await expect(tooltip).toBeInTheDocument();
+  },
+};

package/src/components/display/Tooltip.tsx

@@ -0,0 +1,184 @@
+import { cloneElement, isValidElement, useCallback, useEffect, useId, useRef, useState, type JSX, type ReactElement, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import styles from "./Tooltip.module.scss";
+
+/** Placement direction for the tooltip relative to its trigger. */
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+
+/** Props for the {@link Tooltip} component. */
+export interface TooltipProps {
+  /** Text content to display in the tooltip. */
+  text: string;
+  /** Placement relative to the trigger element. Defaults to `"top"`. */
+  placement?: TooltipPlacement;
+  /** Delay in milliseconds before showing. Defaults to `300`. */
+  delayMs?: number;
+  /** Whether the wrapper is inline (`span`) or block (`div`). Defaults to `true`. */
+  inline?: boolean;
+  /** The trigger element to wrap. */
+  children: ReactNode;
+  /** Additional CSS class for the wrapper element. */
+  className?: string;
+  /** Test ID for the tooltip content element. */
+  "data-testid"?: string;
+}
+
+/** Default delay in milliseconds before the tooltip appears. */
+const DEFAULT_DELAY_MS: number = 300;
+
+/** Gap in pixels between the tooltip and the trigger element. */
+const TOOLTIP_GAP_PX: number = 6;
+
+/**
+ * Lightweight tooltip wrapper that shows text on hover or keyboard focus.
+ *
+ * Wraps a single child element with a hover/focus-triggered tooltip.
+ * Renders the tooltip bubble via a portal to `document.body` so it escapes
+ * all stacking contexts, `overflow: hidden`, and `backdrop-filter` traps.
+ */
+export function Tooltip({
+  text,
+  placement = "top",
+  delayMs = DEFAULT_DELAY_MS,
+  inline = true,
+  children,
+  className,
+  "data-testid": testId,
+}: TooltipProps): JSX.Element {
+  const [visible, setVisible] = useState(false);
+  const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+  const wrapperRef = useRef<HTMLElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const tooltipId = useId();
+
+  const canPortal = typeof document !== "undefined";
+
+  const computePosition = useCallback((): void => {
+    if (!wrapperRef.current || !tooltipRef.current) {
+      return;
+    }
+    const rect = wrapperRef.current.getBoundingClientRect();
+    const tipRect = tooltipRef.current.getBoundingClientRect();
+    let top = 0;
+    let left = 0;
+    switch (placement) {
+      case "top":
+        top = rect.top - tipRect.height - TOOLTIP_GAP_PX;
+        left = rect.left + rect.width / 2 - tipRect.width / 2;
+        break;
+      case "bottom":
+        top = rect.bottom + TOOLTIP_GAP_PX;
+        left = rect.left + rect.width / 2 - tipRect.width / 2;
+        break;
+      case "left":
+        top = rect.top + rect.height / 2 - tipRect.height / 2;
+        left = rect.left - tipRect.width - TOOLTIP_GAP_PX;
+        break;
+      case "right":
+        top = rect.top + rect.height / 2 - tipRect.height / 2;
+        left = rect.right + TOOLTIP_GAP_PX;
+        break;
+    }
+    setCoords({ top, left });
+  }, [placement]);
+
+  const showWithDelay = useCallback((delay: number): void => {
+    if (timerRef.current !== undefined) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      computePosition();
+      setVisible(true);
+      timerRef.current = undefined;
+    }, delay);
+  }, [computePosition]);
+
+  const showHover = useCallback((): void => { showWithDelay(delayMs); }, [delayMs, showWithDelay]);
+  const showFocus = useCallback((): void => { showWithDelay(0); }, [showWithDelay]);
+
+  const hide = useCallback((): void => {
+    if (timerRef.current !== undefined) {
+      clearTimeout(timerRef.current);
+      timerRef.current = undefined;
+    }
+    setVisible(false);
+  }, []);
+
+  // Dismiss on Escape key; reposition on scroll/resize while visible.
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        hide();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("scroll", computePosition, true);
+    window.addEventListener("resize", computePosition);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("scroll", computePosition, true);
+      window.removeEventListener("resize", computePosition);
+    };
+  }, [visible, hide, computePosition]);
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== undefined) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const Tag = inline ? "span" : "div";
+  const wrapperClass = [
+    inline ? styles.wrapper : styles.wrapperBlock,
+    className,
+  ].filter(Boolean).join(" ");
+
+  // Inject aria-describedby onto the child element when it is a single
+  // ReactElement so screen readers announce the tooltip from the focused node.
+  // Merges with any existing aria-describedby value on the child.
+  let renderedChildren: React.ReactNode = children;
+  if (isValidElement(children)) {
+    const child = children as ReactElement<{ "aria-describedby"?: string }>;
+    const existing = child.props["aria-describedby"];
+    const mergedDescribedBy = visible
+      ? (existing ? `${existing} ${tooltipId}` : tooltipId)
+      : existing;
+    renderedChildren = cloneElement(child, {
+      "aria-describedby": mergedDescribedBy,
+    });
+  }
+
+  const tooltipElement = (
+    <div
+      ref={tooltipRef}
+      id={tooltipId}
+      role="tooltip"
+      className={`${styles.tooltip} ${styles[placement]} ${visible ? styles.visible : ""}`}
+      style={{ top: coords.top, left: coords.left }}
+      data-testid={testId ?? "tooltip"}
+    >
+      {text}
+    </div>
+  );
+
+  return (
+    <Tag
+      ref={wrapperRef as React.Ref<HTMLSpanElement & HTMLDivElement>}
+      className={wrapperClass}
+      onMouseEnter={showHover}
+      onMouseLeave={hide}
+      onFocus={showFocus}
+      onBlur={hide}
+    >
+      {renderedChildren}
+      {canPortal ? createPortal(tooltipElement, document.body) : null}
+    </Tag>
+  );
+}

package/src/components/display/extractText.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from "vitest";
+import { createElement } from "react";
+import { extractText } from "./EventRenderer.js";
+
+describe("extractText", () => {
+  it("extracts plain string", () => {
+    expect(extractText("hello")).toBe("hello");
+  });
+
+  it("extracts number", () => {
+    expect(extractText(42)).toBe("42");
+  });
+
+  it("returns empty string for null/undefined", () => {
+    expect(extractText(null)).toBe("");
+    expect(extractText(undefined)).toBe("");
+  });
+
+  it("concatenates array children", () => {
+    expect(extractText(["hello", " ", "world"])).toBe("hello world");
+  });
+
+  it("extracts text from nested React elements", () => {
+    // Simulates: <span><span>function</span> <span>fibonacci</span></span>
+    const inner = createElement("span", null, "function");
+    const inner2 = createElement("span", null, "fibonacci");
+    const outer = createElement("span", null, inner, " ", inner2);
+    expect(extractText(outer)).toBe("function fibonacci");
+  });
+
+  it("handles deeply nested prism-like token structure", () => {
+    // Simulates rehype-prism-plus output: <code><span class="token keyword">const</span> x = <span class="token number">42</span>;</code>
+    const keyword = createElement("span", { className: "token keyword" }, "const");
+    const num = createElement("span", { className: "token number" }, "42");
+    const code = createElement("code", null, keyword, " x = ", num, ";");
+    expect(extractText(code)).toBe("const x = 42;");
+  });
+
+  it("handles mixed arrays and elements", () => {
+    const span = createElement("span", null, "bold");
+    expect(extractText(["text ", span, " more"])).toBe("text bold more");
+  });
+
+  it("returns empty string for boolean children", () => {
+    expect(extractText(true)).toBe("");
+    expect(extractText(false)).toBe("");
+  });
+});

package/src/components/display/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Content rendering and display components.
+ * @module display
+ */
+export { Breadcrumbs } from "./Breadcrumbs.js";
+export { Button } from "./Button.js";
+export { CopyButton } from "./CopyButton.js";
+export { DemoBanner } from "./DemoBanner.js";
+export { SplitButton } from "./SplitButton.js";
+export { EventRenderer } from "./EventRenderer.js";
+export { ConfirmDialog } from "./ConfirmDialog.js";
+export { Skeleton, SkeletonText, SkeletonCard } from "./Skeleton.js";
+export { Spinner } from "./Spinner.js";
+export { SplashScreen } from "./SplashScreen.js";
+export { Tooltip } from "./Tooltip.js";
+export { SessionAttemptSelector } from "./SessionAttemptSelector.js";
+
+export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.js";
+export type { TooltipProps, TooltipPlacement } from "./Tooltip.js";
+export type { SessionAttemptSelectorProps } from "./SessionAttemptSelector.js";

package/src/components/editable/EditableCheckbox.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
+import { EditableCheckbox } from "./EditableCheckbox.js";
+
+const meta: Meta<typeof EditableCheckbox> = {
+  component: EditableCheckbox,
+  title: "Primitives/Editable/EditableCheckbox",
+  tags: ["autodocs"],
+  args: {
+    onChange: fn(),
+    label: "Enable feature",
+    "data-testid": "test-checkbox",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Unchecked checkbox in its default state. */
+export const Unchecked: Story = {
+  args: {
+    checked: false,
+  },
+  play: async ({ canvas }) => {
+    const label = canvas.getByTestId("test-checkbox");
+    await expect(label).toBeInTheDocument();
+    const checkbox = canvas.getByRole("checkbox");
+    await expect(checkbox).not.toBeChecked();
+    await expect(canvas.getByText("Enable feature")).toBeInTheDocument();
+  },
+};
+
+/** Checked checkbox. */
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+  play: async ({ canvas }) => {
+    const checkbox = canvas.getByRole("checkbox");
+    await expect(checkbox).toBeChecked();
+  },
+};
+
+/** Clicking the checkbox triggers onChange with the new value. */
+export const ToggleOn: Story = {
+  args: {
+    checked: false,
+  },
+  play: async ({ canvas, args }) => {
+    const checkbox = canvas.getByRole("checkbox");
+    await expect(checkbox).not.toBeChecked();
+    await userEvent.click(checkbox);
+    await expect(args.onChange).toHaveBeenCalledWith(true);
+  },
+};

package/src/components/editable/EditableCheckbox.tsx

@@ -0,0 +1,39 @@
+import type { JSX } from "react";
+import styles from "./EditableField.module.scss";
+
+/** Props for EditableCheckbox. */
+export interface EditableCheckboxProps {
+  /** Whether the checkbox is checked. */
+  checked: boolean;
+  /** Called when the checkbox value changes. */
+  onChange: (checked: boolean) => void;
+  /** Label text displayed next to the checkbox. */
+  label: string;
+  /** Accessible label for the checkbox. */
+  ariaLabel?: string;
+  /** Test ID for the wrapping label element. */
+  "data-testid"?: string;
+}
+
+/** Simple checkbox toggle — no edit/display mode, always interactive. */
+export function EditableCheckbox(props: EditableCheckboxProps): JSX.Element {
+  const {
+    checked,
+    onChange,
+    label,
+    ariaLabel,
+    "data-testid": testId,
+  } = props;
+
+  return (
+    <label className={styles.worktreeToggle} data-testid={testId}>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        aria-label={ariaLabel}
+      />
+      <span>{label}</span>
+    </label>
+  );
+}