@grackle-ai/web-components 0.107.2

package/src/components/display/SplashScreen.tsx

@@ -0,0 +1,16 @@
+import type { JSX } from "react";
+import { Spinner } from "./Spinner.js";
+import styles from "./SplashScreen.module.scss";
+
+/**
+ * Full-viewport splash screen displayed while waiting for the server's initial
+ * state (e.g. onboarding status). Shows the Grackle logo and a spinner.
+ */
+export function SplashScreen(): JSX.Element {
+  return (
+    <div className={styles.splash} data-testid="splash-screen">
+      <img src="/grackle-logo.png" alt="Grackle" className={styles.logo} />
+      <Spinner size="xl" label="Loading Grackle" liveRegion />
+    </div>
+  );
+}

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

@@ -0,0 +1,166 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// SplitButton — compound button with main action + chevron dropdown
+// =============================================================================
+
+.container {
+  position: relative;
+  display: inline-flex;
+}
+
+// --- Shared button base (main + chevron) ------------------------------------
+
+%splitBase {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-family: var(--font-ui);
+  border: none;
+  transition: background var(--transition-fast),
+              box-shadow var(--transition-fast);
+
+  &:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.64;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.mainButton {
+  @extend %splitBase;
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
+}
+
+.chevronButton {
+  @extend %splitBase;
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  border-left: 1px solid rgba(255, 255, 255, 0.25);
+  font-size: 0.6em;
+
+  // Override size-class padding to keep chevron compact
+  &.sm, &.md, &.lg {
+    padding-left: var(--space-xs);
+    padding-right: var(--space-xs);
+  }
+}
+
+// --- 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);
+  }
+
+  &:active {
+    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);
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+}
+
+.outline {
+  background: var(--bg-surface);
+  color: var(--accent-green);
+  box-shadow: var(--shadow-xs);
+
+  &:hover {
+    background: var(--bg-overlay);
+  }
+}
+
+.ghost {
+  background: none;
+  color: var(--text-secondary);
+
+  &:hover {
+    background: var(--bg-overlay);
+  }
+}
+
+// --- Dropdown menu ----------------------------------------------------------
+
+.dropdown {
+  position: absolute;
+  top: calc(100% + var(--space-xs));
+  right: 0;
+  z-index: 1000;
+  min-width: 160px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-xs) 0;
+}
+
+.option {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  padding: var(--space-xs) var(--space-md);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-ui);
+  color: var(--text-primary);
+  text-align: left;
+
+  &:hover {
+    background: var(--bg-overlay);
+  }
+}
+
+.optionLabel {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.optionDesc {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+}

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

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { SplitButton } from "./SplitButton.js";
+
+const meta: Meta<typeof SplitButton> = {
+  component: SplitButton,
+  title: "Primitives/Display/SplitButton",
+  tags: ["autodocs"],
+  args: {
+    label: "Stop",
+    onClick: fn(),
+    options: [
+      { label: "Stop", description: "Graceful shutdown", onClick: fn() },
+      { label: "Kill", description: "Force kill", onClick: fn() },
+    ],
+    variant: "danger",
+    size: "sm",
+    "data-testid": "split-btn",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default rendering — main label and chevron visible. */
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId("split-btn-main")).toBeInTheDocument();
+    await expect(canvas.getByTestId("split-btn-main")).toHaveTextContent("Stop");
+    await expect(canvas.getByTestId("split-btn-chevron")).toBeInTheDocument();
+    // Dropdown should NOT be visible
+    await expect(canvas.queryByTestId("split-btn-menu")).not.toBeInTheDocument();
+  },
+};
+
+/** Clicking the main area fires onClick without opening the dropdown. */
+export const ClickMainAction: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByTestId("split-btn-main"));
+    await expect(args.onClick).toHaveBeenCalledOnce();
+    // Dropdown should remain closed
+    await expect(canvas.queryByTestId("split-btn-menu")).not.toBeInTheDocument();
+  },
+};
+
+/** Clicking the chevron opens the dropdown; selecting an option fires callback and closes it. */
+export const OpenAndSelectOption: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    // Open the dropdown
+    await userEvent.click(canvas.getByTestId("split-btn-chevron"));
+    await expect(canvas.getByTestId("split-btn-menu")).toBeInTheDocument();
+
+    // Both options visible in the menu
+    const menu = within(canvas.getByTestId("split-btn-menu"));
+    const options = menu.getAllByRole("button");
+    await expect(options).toHaveLength(2);
+
+    // Click the second option ("Kill")
+    await userEvent.click(options[1]);
+    await expect(args.options[1].onClick).toHaveBeenCalledOnce();
+
+    // Dropdown should close
+    await expect(canvas.queryByTestId("split-btn-menu")).not.toBeInTheDocument();
+  },
+};
+
+/** Clicking outside the dropdown closes it. */
+export const CloseOnClickOutside: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Open dropdown
+    await userEvent.click(canvas.getByTestId("split-btn-chevron"));
+    await expect(canvas.getByTestId("split-btn-menu")).toBeInTheDocument();
+
+    // Click outside (the canvas root, outside the container)
+    await userEvent.click(canvasElement);
+    await expect(canvas.queryByTestId("split-btn-menu")).not.toBeInTheDocument();
+  },
+};
+
+/** Danger variant with primary variant for comparison. */
+export const PrimaryVariant: Story = {
+  args: {
+    label: "Deploy",
+    variant: "primary",
+    options: [
+      { label: "Deploy", description: "Deploy to staging", onClick: fn() },
+      { label: "Deploy prod", description: "Deploy to production", onClick: fn() },
+    ],
+  },
+};

package/src/components/display/SplitButton.tsx

@@ -0,0 +1,128 @@
+import { useState, useRef, useEffect, type JSX } from "react";
+import { ChevronDown } from "lucide-react";
+import type { ButtonVariant, ButtonSize } from "./Button.js";
+import { ICON_MD } from "../../utils/iconSize.js";
+import styles from "./SplitButton.module.scss";
+
+/** A single option in the split button dropdown. */
+export interface SplitButtonOption {
+  /** Display label. */
+  label: string;
+  /** Short description shown below the label. */
+  description?: string;
+  /** Callback fired when this option is selected. */
+  onClick: () => void;
+}
+
+/** Props for the {@link SplitButton} component. */
+export interface SplitButtonProps {
+  /** Label for the main (default) action. */
+  label: string;
+  /** Callback for the main action (clicking the label area). */
+  onClick: () => void;
+  /** Menu options shown when the chevron is clicked. */
+  options: SplitButtonOption[];
+  /** Visual variant. Defaults to `"primary"`. */
+  variant?: ButtonVariant;
+  /** Size. Defaults to `"md"`. */
+  size?: ButtonSize;
+  /** data-testid for the root element. */
+  "data-testid"?: string;
+}
+
+/**
+ * Compound split button with a main action and a chevron dropdown for
+ * additional options. The main area fires the default action; the chevron
+ * opens a dropdown menu with all available options.
+ */
+export function SplitButton({
+  label,
+  onClick,
+  options,
+  variant = "primary",
+  size = "md",
+  "data-testid": testId,
+}: SplitButtonProps): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function handleClickOutside(e: MouseEvent): void {
+      if (containerRef.current && e.target instanceof Node && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function handleKeyDown(e: KeyboardEvent): void {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+
+  const variantClass = styles[variant] || "";
+  const sizeClass = styles[size] || "";
+
+  const handleMainClick = (): void => {
+    if (open) {
+      setOpen(false);
+    }
+    onClick();
+  };
+
+  return (
+    <div ref={containerRef} className={styles.container} data-testid={testId}>
+      <button
+        type="button"
+        className={`${styles.mainButton} ${variantClass} ${sizeClass}`}
+        onClick={handleMainClick}
+        data-testid={testId ? `${testId}-main` : undefined}
+      >
+        {label}
+      </button>
+      <button
+        type="button"
+        className={`${styles.chevronButton} ${variantClass} ${sizeClass}`}
+        onClick={() => setOpen((prev) => !prev)}
+        aria-label={`More options for ${label}`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        data-testid={testId ? `${testId}-chevron` : undefined}
+      >
+        <ChevronDown size={ICON_MD} aria-hidden="true" />
+      </button>
+      {open && (
+        <div className={styles.dropdown} data-testid={testId ? `${testId}-menu` : undefined}>
+          {options.map((opt, idx) => (
+            <button
+              key={idx}
+              type="button"
+              className={styles.option}
+              onClick={() => {
+                opt.onClick();
+                setOpen(false);
+              }}
+            >
+              <span className={styles.optionLabel}>{opt.label}</span>
+              {opt.description && <span className={styles.optionDesc}>{opt.description}</span>}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// Tooltip — lightweight hover/focus tooltip
+// =============================================================================
+
+$arrow-size: 5px;
+$tooltip-gap: 6px;
+
+// Wrapper — inline by default, provides relative context
+.wrapper {
+  display: inline-flex;
+  position: relative;
+}
+
+.wrapperBlock {
+  display: flex;
+  position: relative;
+}
+
+// Tooltip bubble — fixed positioning escapes overflow:hidden ancestors
+.tooltip {
+  position: fixed;
+  z-index: 500;
+
+  max-width: 240px;
+  padding: var(--space-xs) var(--space-sm);
+
+  background: var(--bg-elevated);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(var(--glass-blur-card));
+  -webkit-backdrop-filter: blur(var(--glass-blur-card));
+
+  color: var(--text-primary);
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+
+  &.visible {
+    opacity: 1;
+  }
+}
+
+// Arrow — CSS triangle via ::after pseudo-element
+.tooltip::after {
+  content: '';
+  position: absolute;
+  border: $arrow-size solid transparent;
+}
+
+.top::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--bg-elevated);
+}
+
+.bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--bg-elevated);
+}
+
+.left::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--bg-elevated);
+}
+
+.right::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--bg-elevated);
+}