@grackle-ai/web-components 0.107.2

package/src/components/display/Breadcrumbs.tsx

@@ -0,0 +1,46 @@
+import type { JSX } from "react";
+import { ChevronRight } from "lucide-react";
+import { Link } from "react-router";
+import type { BreadcrumbSegment } from "../../utils/breadcrumbs.js";
+import { ICON_SM } from "../../utils/iconSize.js";
+import styles from "./Breadcrumbs.module.scss";
+
+/** Props for the Breadcrumbs component. */
+interface BreadcrumbsProps {
+  segments: BreadcrumbSegment[];
+}
+
+/** Renders a clickable breadcrumb trail from a list of segments. */
+export function Breadcrumbs({ segments }: BreadcrumbsProps): JSX.Element {
+  return (
+    <nav className={styles.breadcrumbs} aria-label="Breadcrumb" data-testid="breadcrumbs">
+      <ol className={styles.list}>
+        {segments.map((segment, index) => {
+          const isLast = index === segments.length - 1;
+          return (
+            <li key={index} className={styles.item}>
+              {index > 0 && (
+                <span className={styles.separator} aria-hidden="true">
+                  <ChevronRight size={ICON_SM} />
+                </span>
+              )}
+              {segment.url && !isLast ? (
+                <Link
+                  className={styles.link}
+                  to={segment.url}
+                  title={segment.label}
+                >
+                  {segment.label}
+                </Link>
+              ) : (
+                <span className={styles.current} aria-current="page" title={segment.label}>
+                  {segment.label}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/components/display/Button.module.scss

@@ -0,0 +1,110 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// Button — shared component with variant × size matrix
+// =============================================================================
+
+// --- Base -------------------------------------------------------------------
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xs);
+  white-space: nowrap;
+  cursor: pointer;
+  font-family: var(--font-ui);
+  border-radius: var(--radius-md);
+  transition: background var(--transition-fast),
+              box-shadow var(--transition-fast),
+              transform var(--transition-fast),
+              border-color var(--transition-fast);
+
+  &:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.64;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// --- Sizes ------------------------------------------------------------------
+
+.sm {
+  font-size: var(--font-size-xs);
+  padding: 2px var(--space-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.md {
+  font-size: var(--font-size-sm);
+  padding: var(--space-xs) var(--space-md);
+  font-weight: var(--font-weight-bold);
+}
+
+.lg {
+  font-size: var(--font-size-sm);
+  padding: var(--space-sm) var(--space-lg);
+  font-weight: var(--font-weight-bold);
+}
+
+// --- Variants ---------------------------------------------------------------
+
+.primary {
+  background: var(--accent-green);
+  border: 1px solid var(--accent-green);
+  color: #ffffff;
+  box-shadow: var(--shadow-xs);
+
+  &:hover {
+    box-shadow: var(--shadow-glow-green);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+}
+
+.danger {
+  background: var(--accent-red);
+  border: 1px solid var(--accent-red);
+  color: #ffffff;
+  box-shadow: var(--shadow-xs);
+
+  &:hover {
+    box-shadow: var(--shadow-glow-red);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+}
+
+.outline {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input);
+  color: var(--accent-green);
+  box-shadow: var(--shadow-xs);
+
+  &:hover {
+    background: var(--bg-overlay);
+  }
+}
+
+.ghost {
+  background: none;
+  border: 1px solid transparent;
+  color: var(--text-secondary);
+
+  &:hover {
+    background: var(--bg-overlay);
+  }
+}

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn } from "@storybook/test";
+import { Button } from "./Button.js";
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: "Primitives/Display/Button",
+  tags: ["autodocs"],
+  args: {
+    children: "Click me",
+    onClick: fn(),
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default primary button at medium size. */
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    const button = canvas.getByRole("button", { name: "Click me" });
+    await expect(button).toBeInTheDocument();
+    await expect(button).toBeEnabled();
+  },
+};
+
+/** Danger variant for destructive actions. */
+export const Danger: Story = {
+  args: {
+    variant: "danger",
+    children: "Delete",
+  },
+  play: async ({ canvas }) => {
+    const button = canvas.getByRole("button", { name: "Delete" });
+    await expect(button).toBeInTheDocument();
+    await expect(button.className).toContain("danger");
+  },
+};
+
+/** Ghost variant for minimal visual weight. */
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Cancel",
+  },
+  play: async ({ canvas }) => {
+    const button = canvas.getByRole("button", { name: "Cancel" });
+    await expect(button).toBeInTheDocument();
+    await expect(button.className).toContain("ghost");
+  },
+};
+
+/** Small size variant. */
+export const Small: Story = {
+  args: {
+    size: "sm",
+    children: "Small",
+  },
+  play: async ({ canvas }) => {
+    const button = canvas.getByRole("button", { name: "Small" });
+    await expect(button).toBeInTheDocument();
+    await expect(button.className).toContain("sm");
+  },
+};
+
+/** Large size variant. */
+export const Large: Story = {
+  args: {
+    size: "lg",
+    children: "Large",
+  },
+  play: async ({ canvas }) => {
+    const button = canvas.getByRole("button", { name: "Large" });
+    await expect(button).toBeInTheDocument();
+    await expect(button.className).toContain("lg");
+  },
+};
+
+/** Disabled button prevents interaction. */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Disabled",
+  },
+  play: async ({ canvas }) => {
+    const button = canvas.getByRole("button", { name: "Disabled" });
+    await expect(button).toBeDisabled();
+  },
+};

package/src/components/display/Button.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, type ButtonHTMLAttributes, type JSX } from "react";
+import type React from "react";
+import styles from "./Button.module.scss";
+
+/** Visual variant of the button. */
+export type ButtonVariant = "primary" | "danger" | "outline" | "ghost";
+
+/** Size of the button. */
+export type ButtonSize = "sm" | "md" | "lg";
+
+/** Props for the {@link Button} component. */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual variant. Defaults to `"primary"`. */
+  variant?: ButtonVariant;
+  /** Size. Defaults to `"md"`. */
+  size?: ButtonSize;
+}
+
+/**
+ * Standardized button with consistent sizing and styling across the app.
+ *
+ * Uses the existing mixin-based design tokens so colours/radii stay in sync
+ * with the rest of the UI.
+ */
+export const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button({ variant = "primary", size = "md", className, children, ...rest }: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element {
+    const cls = [
+      styles.btn,
+      styles[variant],
+      styles[size],
+      className,
+    ].filter(Boolean).join(" ");
+
+    return (
+      <button ref={ref} className={cls} {...rest}>
+        {children}
+      </button>
+    );
+  },
+);

package/src/components/display/ConfirmDialog.module.scss

@@ -0,0 +1,67 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// ConfirmDialog — in-app modal replacing window.confirm()
+// =============================================================================
+
+/// Full-screen overlay that dims the background and blocks interaction.
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+/// Card dialog panel.
+.dialog {
+  @include surface-card;
+  padding: var(--space-xl);
+  min-width: 300px;
+  max-width: 440px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-ui);
+}
+
+/// Dialog title.
+.title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  line-height: 1.3;
+}
+
+/// Consequence description below the title.
+.description {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  line-height: var(--line-height);
+}
+
+/// Button row — cancel on left, danger confirm on right.
+.actions {
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: flex-end;
+  margin-top: var(--space-xs);
+}
+
+.cancelButton {
+  @include btn-ghost(var(--text-secondary));
+  padding: var(--space-sm) var(--space-lg);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-ui);
+}
+
+.confirmButton {
+  @include btn-danger;
+  font-size: var(--font-size-sm);
+}

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
+import { ConfirmDialog } from "./ConfirmDialog.js";
+
+const meta: Meta<typeof ConfirmDialog> = {
+  title: "Primitives/Display/ConfirmDialog",
+  tags: ["autodocs"],
+  component: ConfirmDialog,
+  args: {
+    isOpen: true,
+    title: "Delete Task?",
+    description: '"tdel-dismiss-task" will be permanently removed.',
+    confirmLabel: "Delete",
+    onConfirm: fn(),
+    onCancel: fn(),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConfirmDialog>;
+
+/** The confirm dialog can be dismissed by clicking Cancel, which calls onCancel. */
+export const DismissViaCancelButton: Story = {
+  play: async ({ canvas, args }) => {
+    // Dialog is visible with the correct title
+    await expect(canvas.getByText("Delete Task?")).toBeInTheDocument();
+
+    // Description text is shown
+    await expect(canvas.getByText(/tdel-dismiss-task/)).toBeInTheDocument();
+
+    // Cancel button is present and clickable
+    const cancelButton = canvas.getByRole("button", { name: "Cancel" });
+    await expect(cancelButton).toBeInTheDocument();
+    await userEvent.click(cancelButton);
+
+    // onCancel should have been called
+    await expect(args.onCancel).toHaveBeenCalled();
+
+    // onConfirm should NOT have been called
+    await expect(args.onConfirm).not.toHaveBeenCalled();
+  },
+};
+
+/** The confirm dialog calls onConfirm when the Delete button is clicked. */
+export const ConfirmAction: Story = {
+  play: async ({ canvas, args }) => {
+    await expect(canvas.getByText("Delete Task?")).toBeInTheDocument();
+
+    const confirmButton = canvas.getByRole("button", { name: "Delete" });
+    await userEvent.click(confirmButton);
+
+    await expect(args.onConfirm).toHaveBeenCalled();
+    await expect(args.onCancel).not.toHaveBeenCalled();
+  },
+};
+
+/** Pressing Escape calls onCancel to dismiss the dialog. */
+export const EscapeKeyCloses: Story = {
+  play: async ({ canvas, args }) => {
+    await expect(canvas.getByText("Delete Task?")).toBeInTheDocument();
+
+    // Press Escape to dismiss
+    await userEvent.keyboard("{Escape}");
+
+    await expect(args.onCancel).toHaveBeenCalled();
+    await expect(args.onConfirm).not.toHaveBeenCalled();
+  },
+};
+
+/** When isOpen is false the dialog renders nothing visible. */
+export const ClosedDialog: Story = {
+  args: {
+    isOpen: false,
+  },
+  play: async ({ canvas }) => {
+    // The title text should not be in the document when the dialog is closed
+    const title = canvas.queryByText("Delete Task?");
+    await expect(title).not.toBeInTheDocument();
+  },
+};

package/src/components/display/ConfirmDialog.tsx

@@ -0,0 +1,88 @@
+import { useId, type JSX } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import styles from "./ConfirmDialog.module.scss";
+
+/** Props for the ConfirmDialog component. */
+interface ConfirmDialogProps {
+  /** Whether the dialog is currently visible. */
+  isOpen: boolean;
+  /** Short, action-oriented title (e.g. "Delete Task?"). */
+  title: string;
+  /** Consequence description shown below the title. */
+  description?: string;
+  /** Label for the danger confirm button. Defaults to "Delete". */
+  confirmLabel?: string;
+  /** Called when the user confirms the destructive action. */
+  onConfirm: () => void;
+  /** Called when the user cancels or clicks the overlay backdrop. */
+  onCancel: () => void;
+}
+
+/**
+ * Modal confirmation dialog with glass card aesthetic and motion animation.
+ *
+ * Replaces native `window.confirm()` for destructive actions, providing a
+ * styled in-app dialog that matches the dark glass UI.
+ */
+export function ConfirmDialog({
+  isOpen,
+  title,
+  description,
+  confirmLabel = "Delete",
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps): JSX.Element {
+  const titleId = useId();
+  const descriptionId = useId();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className={styles.overlay}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.15 }}
+          onClick={onCancel}
+          onKeyDown={(e) => { if (e.key === "Escape") onCancel(); }}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={titleId}
+          aria-describedby={description ? descriptionId : undefined}
+        >
+          <motion.div
+            className={styles.dialog}
+            initial={{ opacity: 0, scale: 0.93, y: -10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.93, y: -10 }}
+            transition={{ duration: 0.15, ease: [0.16, 1, 0.3, 1] }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 id={titleId} className={styles.title}>{title}</h3>
+            {description && (
+              <p id={descriptionId} className={styles.description}>{description}</p>
+            )}
+            <div className={styles.actions}>
+              <button
+                type="button"
+                className={styles.cancelButton}
+                onClick={onCancel}
+                autoFocus
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className={styles.confirmButton}
+                onClick={onConfirm}
+              >
+                {confirmLabel}
+              </button>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/components/display/CopyButton.module.scss

@@ -0,0 +1,41 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// CopyButton — clipboard copy with visual feedback
+// =============================================================================
+
+.copyButton {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 1;
+
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  margin: 0;
+
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  opacity: 0;
+  transition: opacity var(--transition-fast),
+              background var(--transition-fast);
+
+  &:hover {
+    opacity: 1 !important;
+    background: var(--bg-overlay);
+  }
+
+  &:focus-visible {
+    opacity: 1 !important;
+    outline: 2px solid var(--accent-blue);
+    outline-offset: 2px;
+    background: var(--bg-overlay);
+  }
+
+  @include mobile {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, fn, waitFor } from "@storybook/test";
+import { CopyButton } from "./CopyButton.js";
+
+const meta: Meta<typeof CopyButton> = {
+  component: CopyButton,
+  title: "Primitives/Display/CopyButton",
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => {
+      // Mock the clipboard API for Storybook/test environments.
+      // navigator.clipboard is a read-only getter in Chromium, so
+      // Object.assign fails; use defineProperty to override it.
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: fn().mockResolvedValue(undefined) },
+        writable: true,
+        configurable: true,
+      });
+      return <Story />;
+    },
+  ],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: "Hello, world!",
+  },
+  play: async ({ canvas }) => {
+    const button = canvas.getByTestId("copy-button");
+    await expect(button).toBeInTheDocument();
+    await expect(button).toHaveAttribute("aria-label", "Copy to clipboard");
+  },
+};
+
+export const CopiesCorrectText: Story = {
+  name: "Click copies text and shows checkmark",
+  args: {
+    text: "# Hello\n\nSome **bold** markdown",
+  },
+  play: async ({ canvas }) => {
+    const button = canvas.getByTestId("copy-button");
+    await userEvent.click(button);
+    // Wait for async clipboard write and state update
+    // eslint-disable-next-line @typescript-eslint/unbound-method -- mock fn assigned by decorator
+    const writeTextMock = navigator.clipboard.writeText;
+    await waitFor(async () => {
+      await expect(button).toHaveAttribute("aria-label", "Copied");
+      await expect(writeTextMock).toHaveBeenCalledWith("# Hello\n\nSome **bold** markdown");
+    });
+  },
+};
+
+export const CheckmarkReverts: Story = {
+  name: "Checkmark reverts after 2 seconds",
+  args: {
+    text: "revert test",
+  },
+  play: async ({ canvas }) => {
+    const button = canvas.getByTestId("copy-button");
+    await userEvent.click(button);
+    await waitFor(() => expect(button).toHaveAttribute("aria-label", "Copied"));
+    // Wait for the checkmark to revert after COPIED_FEEDBACK_DURATION (2s)
+    await waitFor(() => expect(button).toHaveAttribute("aria-label", "Copy to clipboard"), { timeout: 3000 });
+  },
+};
+
+export const CustomTestId: Story = {
+  name: "Custom data-testid",
+  args: {
+    text: "test",
+    "data-testid": "my-custom-copy",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("my-custom-copy")).toBeInTheDocument();
+  },
+};