@xenide-io/the-old-ui-theme 0.2.6 → 0.3.0

package/src/components/ui/Typography.tsx

@@ -0,0 +1,129 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type TextTone =
+  | "default"
+  | "muted"
+  | "subtle"
+  | "brand"
+  | "danger"
+  | "success"
+  | "warning"
+  | "info"
+  | "inherit";
+
+export type TextWeight =
+  | "normal"
+  | "medium"
+  | "semibold"
+  | "bold"
+  | "extrabold";
+
+export interface TextBaseProps {
+  tone?: TextTone;
+  weight?: TextWeight;
+  className?: string;
+  children?: ReactNode;
+  truncate?: boolean;
+}
+
+const toneMap: Record<TextTone, string> = {
+  default: "text-ph-ink",
+  muted: "text-ph-mutedtext",
+  subtle: "text-ph-subtle",
+  brand: "text-ph-brand",
+  danger: "text-ph-danger",
+  success: "text-ph-success",
+  warning: "text-ph-warning",
+  info: "text-ph-info",
+  inherit: "",
+};
+
+const weightMap: Record<TextWeight, string> = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold",
+  extrabold: "font-extrabold",
+};
+
+function textClass(
+  base: string,
+  tone: TextTone,
+  weight?: TextWeight,
+  truncate?: boolean,
+  className?: string
+) {
+  return cn(base, toneMap[tone], weight && weightMap[weight], truncate && "truncate", className);
+}
+
+/** Display text — largest heading, use once per page */
+export function Display({
+  children,
+  tone = "default",
+  weight,
+  truncate,
+  className,
+}: TextBaseProps) {
+  return <h1 className={textClass("text-4xl font-extrabold tracking-tight md:text-5xl", tone, weight, truncate, className)}>{children}</h1>;
+}
+
+/** H1 — page title */
+export function H1({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h1 className={textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className)}>{children}</h1>;
+}
+
+/** H2 — section title */
+export function H2({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h2 className={textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className)}>{children}</h2>;
+}
+
+/** H3 — subsection title */
+export function H3({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h3 className={textClass("text-xl font-semibold", tone, weight, truncate, className)}>{children}</h3>;
+}
+
+/** H4 — card / panel title */
+export function H4({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h4 className={textClass("text-lg font-semibold", tone, weight, truncate, className)}>{children}</h4>;
+}
+
+/** H5 — small heading */
+export function H5({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h5 className={textClass("text-base font-semibold", tone, weight, truncate, className)}>{children}</h5>;
+}
+
+/** Body — default paragraph text */
+export function P({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <p className={textClass("text-base leading-relaxed", tone, weight, truncate, className)}>{children}</p>;
+}
+
+/** Small body text */
+export function Small({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <span className={textClass("text-sm leading-relaxed", tone, weight, truncate, className)}>{children}</span>;
+}
+
+/** Extra small text — captions, meta */
+export function Caption({ children, tone = "muted", weight, truncate, className }: TextBaseProps) {
+  return <span className={textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className)}>{children}</span>;
+}
+
+/** Overline — tiny eyebrow text */
+export function Overline({ children, tone = "muted", weight, truncate, className }: TextBaseProps) {
+  return <span className={textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className)}>{children}</span>;
+}
+
+/** Lead — intro paragraph, larger and muted */
+export function Lead({ children, tone = "subtle", weight, truncate, className }: TextBaseProps) {
+  return <p className={textClass("text-lg leading-relaxed", tone, weight, truncate, className)}>{children}</p>;
+}
+
+/** Mono — code, data, technical text */
+export function Mono({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <code className={textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className)}>{children}</code>;
+}
+
+/** Label — form labels, tags */
+export function Label({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <label className={textClass("text-sm font-medium", tone, weight, truncate, className)}>{children}</label>;
+}

package/src/components/ui/first-slice.test.tsx

@@ -0,0 +1,98 @@
+import { createRef, useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Alert } from "@/components/ui/Alert";
+import { Badge } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+import { Input } from "@/components/ui/Input";
+import { Modal } from "@/components/ui/Modal";
+
+describe("first-slice components", () => {
+  it("forwards a button ref and exposes loading state", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref} loading>Save changes</Button>);
+
+    expect(ref.current).toBe(screen.getByRole("button", { name: "Save changes" }));
+    expect(ref.current).toBeDisabled();
+    expect(ref.current).toHaveAttribute("aria-busy", "true");
+  });
+
+  it("uses the same tactile chrome for every filled variant", () => {
+    const { rerender } = render(<Button variant="signal">Launch</Button>);
+    expect(screen.getByRole("button", { name: "Launch" })).toHaveClass("ph-btn-raised");
+    expect(screen.getByRole("button", { name: "Launch" }).querySelector(".ph-btn-chrome")).toBeInTheDocument();
+
+    rerender(<Button variant="danger">Delete</Button>);
+    expect(screen.getByRole("button", { name: "Delete" }).querySelector(".ph-btn-chrome")).toBeInTheDocument();
+  });
+
+  it("associates input help and error messages", () => {
+    const { rerender } = render(
+      <Input label="Email" helperText="Use your work address" />,
+    );
+
+    expect(screen.getByLabelText("Email")).toHaveAccessibleDescription("Use your work address");
+
+    rerender(<Input label="Email" error="Enter a valid email address" />);
+    const input = screen.getByLabelText("Email");
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toHaveAccessibleErrorMessage("Enter a valid email address");
+  });
+
+  it("keeps cards static unless explicitly interactive", () => {
+    const { rerender } = render(<Card title="Static card" />);
+    expect(screen.getByText("Static card").closest(".ph-card")).not.toHaveClass("ph-card-interactive");
+
+    rerender(<Card title="Interactive card" interactive />);
+    expect(screen.getByText("Interactive card").closest(".ph-card")).toHaveClass("ph-card-interactive");
+  });
+
+  it("forwards badge attributes and keeps static alerts out of live regions", () => {
+    render(
+      <>
+        <Badge data-testid="badge">Live</Badge>
+        <Alert title="Saved" />
+        <Alert title="Background sync complete" live="polite" />
+      </>,
+    );
+
+    expect(screen.getByTestId("badge")).toHaveTextContent("Live");
+    expect(screen.getByText("Saved").closest(".ph-alert")).not.toHaveAttribute("role");
+    expect(screen.getByRole("status")).toHaveTextContent("Background sync complete");
+  });
+
+  it("closes the modal with Escape and restores trigger focus", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+
+    function Fixture() {
+      const [open, setOpen] = useState(false);
+
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>Open settings</button>
+          <Modal
+            open={open}
+            onClose={() => {
+              onClose();
+              setOpen(false);
+            }}
+            title="Workspace settings"
+          >
+            <button type="button">Save settings</button>
+          </Modal>
+        </>
+      );
+    }
+
+    render(<Fixture />);
+    const trigger = screen.getByRole("button", { name: "Open settings" });
+    await user.click(trigger);
+    expect(screen.getByRole("dialog", { name: "Workspace settings" })).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(trigger).toHaveFocus();
+  });
+});

package/src/components/ui/index.ts

@@ -0,0 +1,151 @@
+export { Button as Button, type ButtonProps as ButtonProps, type ButtonShape as ButtonShape, type ButtonSize as ButtonSize, type ButtonVariant as ButtonVariant } from "@/components/ui/Button";
+export { ButtonChrome as ButtonChrome, type ButtonChromeProps as ButtonChromeProps } from "@/components/ui/ButtonChrome";
+export { Alert as Alert, type AlertProps as AlertProps, type AlertStatus as AlertStatus } from "@/components/ui/Alert";
+export { Badge as Badge, type BadgeProps as BadgeProps, type BadgeSize as BadgeSize, type BadgeVariant as BadgeVariant } from "@/components/ui/Badge";
+export { Card as Card, type CardProps as CardProps, type CardVariant as CardVariant } from "@/components/ui/Card";
+export { Drawer as Drawer, type DrawerProps as DrawerProps, type DrawerSide as DrawerSide, type DrawerSize as DrawerSize } from "@/components/ui/Drawer";
+export { Kbd as Kbd, type KbdPlatform as KbdPlatform, type KbdProps as KbdProps, type KbdVariant as KbdVariant } from "@/components/ui/Kbd";
+export {
+  Loader,
+  LoadingState,
+  Skeleton,
+  type LoaderProps,
+  type LoaderSize,
+  type LoaderVariant,
+  type LoadingStateProps,
+  type SkeletonProps,
+  type SkeletonShape,
+} from "@/components/ui/Loader";
+export {
+  AuthCard,
+  AuthDivider,
+  AuthLayout,
+  type AuthCardProps,
+  type AuthDividerProps,
+  type AuthLayoutProps,
+} from "@/components/ui/AuthLayout";
+export {
+  SettingsLayout,
+  SettingsNav,
+  type SettingsLayoutProps,
+  type SettingsNavGroup,
+  type SettingsNavItem,
+  type SettingsNavProps,
+} from "@/components/ui/SettingsLayout";
+export {
+  DropdownButton as DropdownButton,
+  DropdownItem as DropdownItem,
+  DropdownMenu as DropdownMenu,
+  DropdownRadioGroup as DropdownRadioGroup,
+  DropdownRadioItem as DropdownRadioItem,
+  type DropdownAlign as DropdownAlign,
+  type DropdownButtonProps as DropdownButtonProps,
+  type DropdownItemProps as DropdownItemProps,
+  type DropdownMenuProps as DropdownMenuProps,
+  type DropdownRadioGroupProps as DropdownRadioGroupProps,
+  type DropdownRadioItemProps as DropdownRadioItemProps,
+  type DropdownSide as DropdownSide,
+} from "@/components/ui/DropdownMenu";
+export {
+  Checkbox as Checkbox,
+  FileUpload as FileUpload,
+  Input as Input,
+  Radio as Radio,
+  Range as Range,
+  Select as Select,
+  Textarea as Textarea,
+  Toggle as Toggle,
+  type CheckboxProps as CheckboxProps,
+  type FileUploadProps as FileUploadProps,
+  type InputProps as InputProps,
+  type InputSize as InputSize,
+  type InputVariant as InputVariant,
+  type RadioProps as RadioProps,
+  type RangeProps as RangeProps,
+  type SelectProps as SelectProps,
+  type TextareaProps as TextareaProps,
+  type ToggleProps as ToggleProps,
+} from "@/components/ui/Input";
+export {
+  FormField as FormField,
+  type FormFieldControlProps as FormFieldControlProps,
+  type FormFieldProps as FormFieldProps,
+} from "@/components/ui/FormField";
+export { Modal as Modal, type ModalProps as ModalProps, type ModalSize as ModalSize } from "@/components/ui/Modal";
+export { Breadcrumbs as Breadcrumbs, Pagination as Pagination, type BreadcrumbItem as BreadcrumbItem, type BreadcrumbsProps as BreadcrumbsProps, type PaginationProps as PaginationProps } from "@/components/ui/Navigation";
+export { Panel as Panel, type PanelProps as PanelProps } from "@/components/ui/Panel";
+export { Rating as Rating, type RatingProps as RatingProps } from "@/components/ui/Rating";
+export { SearchGroup as SearchGroup, SearchInput as SearchInput, type SearchGroupProps as SearchGroupProps, type SearchInputProps as SearchInputProps } from "@/components/ui/SearchInput";
+export { Table as Table, type TableColumn as TableColumn, type TableProps as TableProps } from "@/components/ui/Table";
+export { Stat as Stat, type StatProps as StatProps, type StatTone as StatTone } from "@/components/ui/Stat";
+export { Toast as Toast, ToastStack as ToastStack, type ToastProps as ToastProps, type ToastStackProps as ToastStackProps, type ToastStatus as ToastStatus } from "@/components/ui/Toast";
+export { Tabs as Tabs, type TabItem as TabItem, type TabsProps as TabsProps, type TabsVariant as TabsVariant } from "@/components/ui/Tabs";
+export { ThemeDomSync } from "@/components/ui/ThemeDomSync";
+export { ThemeManager, type ThemeManagerProps } from "@/components/ui/ThemeManager";
+export { ThemeSwitcher, type ThemeSwitcherProps } from "@/components/ui/ThemeSwitcher";
+export {
+  IconBase as Icon,
+  IconByName as IconByName,
+  type CanonicalIconName as CanonicalIconName,
+  type IconAliasName as IconAliasName,
+  type IconProps as IconProps,
+  type IconName as IconName,
+} from "@/components/icons";
+export { Accordion } from "@/components/ui/Accordion";
+export { Stepper } from "@/components/ui/Stepper";
+export { SegmentedControl } from "@/components/ui/SegmentedControl";
+export { CommandPalette } from "@/components/ui/CommandPalette";
+export { Calendar } from "@/components/ui/Calendar";
+export { HoverCard } from "@/components/ui/HoverCard";
+export { EmptyState } from "@/components/ui/EmptyState";
+export {
+  FilterChips,
+  type FilterChip,
+  type FilterChipsProps,
+} from "@/components/ui/FilterChips";
+export {
+  FilterBar,
+  FilterMenu,
+  SortMenu,
+  type FilterBarProps,
+  type FilterMenuOption,
+  type FilterMenuProps,
+  type SortMenuProps,
+} from "@/components/ui/FilterBar";
+export { FilterControls, type FilterControlsProps } from "@/components/ui/FilterControls";
+export { CodeBlock } from "@/components/ui/CodeBlock";
+export { ComponentDocs, type ComponentDocsProps, type ComponentPropRow } from "@/components/ui/ComponentDocs";
+export { ShowcaseWrapper } from "@/components/ui/ShowcaseWrapper";
+export { CollapsibleSection } from "@/components/ui/CollapsibleSection";
+export { Display, H1, H2, H3, H4, H5, P, Small, Caption, Overline, Lead, Mono, Label } from "@/components/ui/Typography";
+export {
+  Avatar as Avatar,
+  AvatarGroup as AvatarGroup,
+  type AvatarProps as AvatarProps,
+  type AvatarSize as AvatarSize,
+  type AvatarStatus as AvatarStatus,
+  type AvatarGroupProps as AvatarGroupProps,
+} from "@/components/ui/Avatar";
+export {
+  Progress as Progress,
+  type ProgressProps as ProgressProps,
+} from "@/components/ui/Progress";
+export {
+  ChatBubble as ChatBubble,
+  type ChatBubbleProps as ChatBubbleProps,
+  type ChatBubbleVariant as ChatBubbleVariant,
+} from "@/components/ui/ChatBubble";
+export {
+  Terminal as Terminal,
+  type TerminalProps as TerminalProps,
+} from "@/components/ui/Terminal";
+export {
+  Indicator as Indicator,
+  type IndicatorProps as IndicatorProps,
+  type IndicatorPosition as IndicatorPosition,
+} from "@/components/ui/Indicator";
+export {
+  Timeline as Timeline,
+  type TimelineProps as TimelineProps,
+  type TimelineEvent as TimelineEvent,
+} from "@/components/ui/Timeline";

package/src/components/ui/interaction-primitives.test.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { DropdownButton, DropdownItem } from "@/components/ui/DropdownMenu";
+import { FilterMenu } from "@/components/ui/FilterBar";
+import { FilterChips } from "@/components/ui/FilterChips";
+
+describe("adaptive dropdown", () => {
+  it("supports keyboard navigation, selection, closing, and focus restoration", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    render(
+      <DropdownButton label="Actions">
+        <DropdownItem onClick={onSelect}>Export report</DropdownItem>
+        <DropdownItem>Duplicate</DropdownItem>
+      </DropdownButton>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Actions" });
+    await user.click(trigger);
+    expect(screen.getByRole("menu")).toBeInTheDocument();
+
+    await user.keyboard("{ArrowDown}{Enter}");
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("exposes filter choices as a controlled radio menu", async () => {
+    const user = userEvent.setup();
+
+    function Fixture() {
+      const [value, setValue] = useState("active");
+      return (
+        <FilterMenu
+          label="Status"
+          value={value}
+          onValueChange={setValue}
+          options={[
+            { value: "active", label: "Active" },
+            { value: "draft", label: "Draft" },
+          ]}
+        />
+      );
+    }
+
+    render(<Fixture />);
+    await user.click(screen.getByRole("button", { name: "Status: Active" }));
+    expect(screen.getByRole("menuitemradio", { name: "Active" })).toHaveAttribute("data-state", "checked");
+    await user.click(screen.getByRole("menuitemradio", { name: "Draft" }));
+    expect(screen.getByRole("button", { name: "Status: Draft" })).toBeInTheDocument();
+  });
+});
+
+describe("filter chips", () => {
+  it("keeps toggle and removal as independent keyboard controls", async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    const onRemove = vi.fn();
+
+    render(
+      <FilterChips
+        chips={[{ id: "status", label: "Status", value: "Active", active: true }]}
+        onToggle={onToggle}
+        onRemove={onRemove}
+      />,
+    );
+
+    const toggle = screen.getByRole("button", { name: "Status Active" });
+    expect(toggle).toHaveAttribute("aria-pressed", "true");
+    await user.click(screen.getByRole("button", { name: "Remove Status: Active filter" }));
+    expect(onRemove).toHaveBeenCalledWith("status");
+    expect(onToggle).not.toHaveBeenCalled();
+  });
+});

package/src/components/ui/kbd-icons.test.tsx

@@ -0,0 +1,90 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  CANONICAL_ICONS,
+  OLD_UI_ICONS,
+  PH_ICONS,
+  PH_ICON_ALIASES,
+  IconByName,
+  IconInfo,
+  IconOldWindow,
+  IconTerminal,
+} from "@/components/icons";
+import { Kbd } from "@/components/ui/Kbd";
+
+describe("Kbd", () => {
+  it("renders shortcuts as separate, spoken keycaps", () => {
+    render(<Kbd keys={["Command", "K"]} platform="mac" />);
+    const shortcut = screen.getByLabelText("Command + K");
+
+    expect(shortcut).toHaveClass("ph-keycap");
+    expect(shortcut.querySelectorAll(".ph-shortcut-key")).toHaveLength(2);
+    expect(shortcut).toHaveTextContent("⌘K");
+  });
+
+  it("keeps platform conversion explicit and preserves React nodes", () => {
+    const { rerender } = render(<Kbd keys={["Control", "K"]} />);
+    expect(screen.getByLabelText("Control + K")).toHaveTextContent("ControlK");
+
+    rerender(<Kbd keys={[<span key="mod">Fn</span>, "K"]} aria-label="Function + K" />);
+    expect(screen.getByLabelText("Function + K")).toHaveTextContent("FnK");
+    expect(screen.getByLabelText("Function + K")).not.toHaveTextContent("[object Object]");
+  });
+
+  it("distinguishes a physical key from a code token", () => {
+    render(
+      <>
+        <Kbd variant="key">Escape</Kbd>
+        <Kbd variant="token">HogQL</Kbd>
+      </>,
+    );
+
+    expect(screen.getByText("Escape")).toHaveClass("ph-keycap");
+    expect(screen.getByText("HogQL")).toHaveClass("ph-code-token");
+  });
+});
+
+describe("icons", () => {
+  it("hides decorative icons but exposes labeled icons", () => {
+    const { rerender } = render(<IconInfo data-testid="icon" />);
+    expect(screen.getByTestId("icon")).toHaveAttribute("aria-hidden", "true");
+
+    rerender(<IconInfo data-testid="icon" aria-label="Information" />);
+    expect(screen.getByRole("img", { name: "Information" })).not.toHaveAttribute("aria-hidden");
+  });
+
+  it("honors size, forwards refs, and renders original glyphs", () => {
+    const ref = createRef<SVGSVGElement>();
+    render(
+      <>
+        <IconTerminal ref={ref} size={16} data-testid="terminal" />
+        <IconOldWindow aria-label="Old window" />
+      </>,
+    );
+
+    expect(ref.current).toBe(screen.getByTestId("terminal"));
+    expect(screen.getByTestId("terminal")).toHaveStyle({ width: "16px", height: "16px" });
+    expect(screen.getByRole("img", { name: "Old window" })).toBeInTheDocument();
+  });
+
+  it("keeps aliases runtime-identical while originals stay canonical", () => {
+    expect(PH_ICONS.grid).toBe(CANONICAL_ICONS.gridView);
+    expect(PH_ICONS.play).toBe(CANONICAL_ICONS.playCircle);
+    expect(PH_ICONS.warning).toBe(CANONICAL_ICONS.exclamation);
+    expect(Object.keys(PH_ICON_ALIASES)).toEqual(expect.arrayContaining(["grid", "play", "warning"]));
+
+    for (const name of Object.keys(OLD_UI_ICONS)) {
+      expect(name in CANONICAL_ICONS).toBe(true);
+    }
+  });
+
+  it("gives generated icons useful identities and forwards dynamic refs", () => {
+    const ref = createRef<SVGSVGElement>();
+    render(<IconByName ref={ref} name="grid" data-testid="dynamic-icon" />);
+
+    expect(CANONICAL_ICONS.areaChart.displayName).toBe("IconAreaChart");
+    expect(ref.current).toBe(screen.getByTestId("dynamic-icon"));
+    expect(ref.current).toHaveAttribute("aria-hidden", "true");
+  });
+});

package/src/components/ui/product-patterns.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AuthCard, AuthLayout } from "@/components/ui/AuthLayout";
+import { FilterControls } from "@/components/ui/FilterControls";
+import { Loader, LoadingState, Skeleton } from "@/components/ui/Loader";
+import { SettingsLayout, SettingsNav } from "@/components/ui/SettingsLayout";
+import { getTheme, isThemeId, THEMES } from "@/themes/registry";
+
+describe("loading patterns", () => {
+  it("announces one useful loading status and keeps skeleton geometry decorative", () => {
+    render(
+      <>
+        <Loader variant="dots" label="Loading events" />
+        <LoadingState label="Preparing workspace" title="Almost ready" />
+        <Skeleton shape="block" data-testid="skeleton" />
+      </>,
+    );
+
+    expect(screen.getByRole("status", { name: "Loading events" })).toBeInTheDocument();
+    expect(screen.getByRole("status", { name: "Preparing workspace" })).toHaveTextContent("Almost ready");
+    expect(screen.getByTestId("skeleton")).toHaveAttribute("aria-hidden", "true");
+  });
+});
+
+describe("product layouts", () => {
+  it("labels auth and settings regions without owning their application state", () => {
+    render(
+      <>
+        <AuthLayout brand="Acme">
+          <AuthCard title="Welcome back"><input aria-label="Email" /></AuthCard>
+        </AuthLayout>
+        <SettingsLayout
+          title="Workspace settings"
+          navigation={
+            <SettingsNav groups={[{
+              label: "Workspace",
+              items: [{ id: "general", label: "General", href: "/settings", active: true }],
+            }]} />
+          }
+        >
+          Settings content
+        </SettingsLayout>
+      </>,
+    );
+
+    expect(screen.getByRole("heading", { name: "Welcome back" })).toBeInTheDocument();
+    expect(screen.getAllByRole("navigation", { name: "Settings" })).toHaveLength(2);
+    for (const link of screen.getAllByRole("link", { name: "General" })) {
+      expect(link).toHaveAttribute("aria-current", "page");
+    }
+  });
+
+  it("composes filter controls and applied chips in one explicit pattern", () => {
+    render(
+      <FilterControls
+        barProps={{ resultCount: "12 results" }}
+        chipsProps={{ chips: [{ id: "status", label: "Status", value: "Active", active: true }] }}
+      >
+        <button type="button">Add filter</button>
+      </FilterControls>,
+    );
+
+    expect(screen.getByRole("button", { name: "Add filter" })).toBeInTheDocument();
+    expect(screen.getByText("12 results")).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Applied filters" })).toHaveTextContent("StatusActive");
+  });
+});
+
+describe("Kraken themes", () => {
+  it("registers a complete light and dark pair", () => {
+    expect(isThemeId("kraken-light")).toBe(true);
+    expect(isThemeId("kraken-dark")).toBe(true);
+    expect(getTheme("kraken-light")).toMatchObject({ colorScheme: "light", group: "Kraken" });
+    expect(getTheme("kraken-dark")).toMatchObject({ colorScheme: "dark", group: "Kraken" });
+    expect(THEMES.filter((theme) => theme.group === "Kraken")).toHaveLength(2);
+  });
+});