From ff6f1bb81f617d0f5ee9abae8717b258de186ac3 Mon Sep 17 00:00:00 2001
From: Mats Bosson <mats.bosson@gmail.com>
Date: Sun, 29 Mar 2026 21:03:59 +0700
Subject: [PATCH] Plan for advanced components 7 components: Form, Calendar,
 DatePicker, CommandPalette, DataTable, VirtualList, Wizard +
 createVirtualizer primitive.

---
 .../2026-03-29-phase2-advanced-components.md  | 1588 +++++++++++++++++
 1 file changed, 1588 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-03-29-phase2-advanced-components.md

diff --git a/docs/superpowers/plans/2026-03-29-phase2-advanced-components.md b/docs/superpowers/plans/2026-03-29-phase2-advanced-components.md
new file mode 100644
index 0000000..2b0e7ab
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-29-phase2-advanced-components.md
@@ -0,0 +1,1588 @@
+# Phase 2: Advanced Components — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build 7 advanced components (Form, Calendar, DatePicker, CommandPalette, DataTable, VirtualList, Wizard) and the createVirtualizer primitive.
+
+**Architecture:** All components follow the Zod-first pattern from Phase 1: `{name}.props.ts` with schema + Meta, compound API via `Object.assign`, context for cross-part communication, `createControllableSignal` for controlled/uncontrolled state. Complex list components reuse `createListNavigation`. DataTable and VirtualList share a new `createVirtualizer` primitive.
+
+**Tech Stack:** SolidJS, Zod v4, TypeScript 6, Vitest, @solidjs/testing-library
+
+**Spec:** `docs/superpowers/specs/2026-03-29-pettyui-ai-first-architecture.md`
+
+**Parallelism:** Tasks 1, 3, 5, 6, 7 can run in parallel (no dependencies). Task 2 depends on Task 1. Task 4 depends on Task 3. Task 8 depends on Task 1. Task 9 runs last.
+
+```
+Wave 1 (parallel):  Task 1 (createVirtualizer)
+                    Task 3 (Calendar)
+                    Task 5 (CommandPalette)
+                    Task 6 (Form)
+                    Task 7 (Wizard)
+
+Wave 2 (parallel):  Task 2 (VirtualList) — after Task 1
+                    Task 4 (DatePicker) — after Task 3
+                    Task 8 (DataTable) — after Task 1
+
+Wave 3:             Task 9 (build config + verification)
+```
+
+---
+
+## Conventions (from Phase 1)
+
+All components MUST follow these exact patterns:
+
+**Props file** (`{name}.props.ts`):
+```typescript
+import { z } from "zod/v4";
+import type { JSX } from "solid-js";
+import type { ComponentMeta } from "../../meta";
+
+export const {Name}RootPropsSchema = z.object({ /* .describe() on every field */ });
+export interface {Name}RootProps extends z.infer<typeof {Name}RootPropsSchema> {
+  children: JSX.Element;
+}
+export const {Name}Meta: ComponentMeta = { name, description, parts, requiredParts } as const;
+```
+
+**Index file** (`index.ts`):
+```typescript
+export const {Name} = Object.assign({Name}Root, { SubPart: {Name}SubPart, useContext: use{Name}Context });
+export type { ... } from "./{name}.props";
+export { {Name}RootPropsSchema, {Name}Meta } from "./{name}.props";
+```
+
+**Context error messages**: `"[PettyUI] {Name} parts must be used within <{Name}>. Fix: Wrap ... inside <{Name}>."`
+
+**Zod v4 function syntax**: `z.function(z.tuple([z.string()]), z.void())` NOT `z.function().args().returns()`
+
+**NagLint**: Keep files under 500 lines. Keep `.props.ts` compact (single-line interfaces where possible). Index files need ≥30% logic density.
+
+---
+
+### Task 1: createVirtualizer Primitive
+
+**Files:**
+- Create: `packages/core/src/primitives/create-virtualizer.ts`
+- Create: `packages/core/tests/primitives/create-virtualizer.test.ts`
+
+This primitive powers both VirtualList and DataTable. It manages which items are visible in a scrollable container and provides offset calculations.
+
+- [ ] **Step 1: Write failing test**
+
+Create `packages/core/tests/primitives/create-virtualizer.test.ts`:
+
+```typescript
+import { describe, expect, it } from "vitest";
+import { createRoot } from "solid-js";
+import { createVirtualizer } from "../../src/primitives/create-virtualizer";
+
+describe("createVirtualizer", () => {
+  it("calculates visible range for fixed-size items", () => {
+    createRoot((dispose) => {
+      const virtualizer = createVirtualizer({
+        count: () => 1000,
+        getScrollElement: () => null,
+        estimateSize: () => 40,
+      });
+      expect(virtualizer.totalSize()).toBe(40000);
+      dispose();
+    });
+  });
+
+  it("returns virtual items with correct offsets", () => {
+    createRoot((dispose) => {
+      const virtualizer = createVirtualizer({
+        count: () => 100,
+        getScrollElement: () => null,
+        estimateSize: () => 50,
+        overscan: 0,
+      });
+      const items = virtualizer.virtualItems();
+      expect(items.length).toBeGreaterThanOrEqual(0);
+      dispose();
+    });
+  });
+
+  it("handles zero count", () => {
+    createRoot((dispose) => {
+      const virtualizer = createVirtualizer({
+        count: () => 0,
+        getScrollElement: () => null,
+        estimateSize: () => 40,
+      });
+      expect(virtualizer.totalSize()).toBe(0);
+      expect(virtualizer.virtualItems()).toEqual([]);
+      dispose();
+    });
+  });
+
+  it("supports horizontal orientation", () => {
+    createRoot((dispose) => {
+      const virtualizer = createVirtualizer({
+        count: () => 50,
+        getScrollElement: () => null,
+        estimateSize: () => 100,
+        horizontal: true,
+      });
+      expect(virtualizer.totalSize()).toBe(5000);
+      dispose();
+    });
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+```bash
+cd packages/core && pnpm vitest run tests/primitives/create-virtualizer.test.ts
+```
+
+- [ ] **Step 3: Implement createVirtualizer**
+
+Create `packages/core/src/primitives/create-virtualizer.ts`:
+
+```typescript
+import { type Accessor, createEffect, createSignal, onCleanup } from "solid-js";
+
+/** A single virtual item with its position and index. */
+export interface VirtualItem {
+  index: number;
+  start: number;
+  end: number;
+  size: number;
+  key: string | number;
+}
+
+/** Options for createVirtualizer. */
+export interface CreateVirtualizerOptions {
+  /** Total number of items. Reactive. */
+  count: Accessor<number>;
+  /** The scrollable container element. */
+  getScrollElement: Accessor<HTMLElement | null>;
+  /** Estimated size in pixels for each item. Used for initial layout. */
+  estimateSize: (index: number) => number;
+  /** Number of items to render outside the visible area. @default 5 */
+  overscan?: number;
+  /** Whether scrolling is horizontal. @default false */
+  horizontal?: boolean;
+  /** Custom key extractor. @default index */
+  getItemKey?: (index: number) => string | number;
+}
+
+/** State returned by createVirtualizer. */
+export interface VirtualizerState {
+  /** Virtual items currently in the visible range (plus overscan). */
+  virtualItems: Accessor<VirtualItem[]>;
+  /** Total scrollable size in pixels. */
+  totalSize: Accessor<number>;
+  /** Imperatively scroll to an item by index. */
+  scrollToIndex: (index: number, options?: { align?: "start" | "center" | "end" }) => void;
+  /** Current scroll offset. */
+  scrollOffset: Accessor<number>;
+  /** Measure a specific item's actual size after render. */
+  measureElement: (element: HTMLElement | null) => void;
+}
+
+/**
+ * Virtualizes a list of items, only rendering those visible in the scroll viewport.
+ * Supports fixed and variable row heights, horizontal/vertical, and overscan.
+ */
+export function createVirtualizer(options: CreateVirtualizerOptions): VirtualizerState {
+  const overscan = options.overscan ?? 5;
+  const horizontal = options.horizontal ?? false;
+  const getKey = options.getItemKey ?? ((i: number) => i);
+
+  const [scrollOffset, setScrollOffset] = createSignal(0);
+  const [containerSize, setContainerSize] = createSignal(0);
+  const measurements = new Map<number, number>();
+
+  function getSize(index: number): number {
+    return measurements.get(index) ?? options.estimateSize(index);
+  }
+
+  function getItemOffset(index: number): number {
+    let offset = 0;
+    for (let i = 0; i < index; i++) {
+      offset += getSize(i);
+    }
+    return offset;
+  }
+
+  const totalSize: Accessor<number> = () => {
+    const count = options.count();
+    let total = 0;
+    for (let i = 0; i < count; i++) {
+      total += getSize(i);
+    }
+    return total;
+  };
+
+  const virtualItems: Accessor<VirtualItem[]> = () => {
+    const count = options.count();
+    if (count === 0) return [];
+
+    const offset = scrollOffset();
+    const size = containerSize();
+    if (size === 0) return [];
+
+    let startIndex = 0;
+    let accumulated = 0;
+    while (startIndex < count && accumulated + getSize(startIndex) <= offset) {
+      accumulated += getSize(startIndex);
+      startIndex++;
+    }
+
+    let endIndex = startIndex;
+    let visibleAccumulated = 0;
+    while (endIndex < count && visibleAccumulated < size) {
+      visibleAccumulated += getSize(endIndex);
+      endIndex++;
+    }
+
+    const overscanStart = Math.max(0, startIndex - overscan);
+    const overscanEnd = Math.min(count - 1, endIndex + overscan);
+
+    const items: VirtualItem[] = [];
+    for (let i = overscanStart; i <= overscanEnd; i++) {
+      const itemSize = getSize(i);
+      const start = getItemOffset(i);
+      items.push({
+        index: i,
+        start,
+        end: start + itemSize,
+        size: itemSize,
+        key: getKey(i),
+      });
+    }
+    return items;
+  };
+
+  createEffect(() => {
+    const el = options.getScrollElement();
+    if (!el) return;
+
+    const sizeKey = horizontal ? "clientWidth" : "clientHeight";
+    const scrollKey = horizontal ? "scrollLeft" : "scrollTop";
+
+    setContainerSize(el[sizeKey]);
+    setScrollOffset(el[scrollKey]);
+
+    const onScroll = () => {
+      setScrollOffset(el[scrollKey]);
+    };
+
+    const resizeObserver = new ResizeObserver(() => {
+      setContainerSize(el[sizeKey]);
+    });
+
+    el.addEventListener("scroll", onScroll, { passive: true });
+    resizeObserver.observe(el);
+
+    onCleanup(() => {
+      el.removeEventListener("scroll", onScroll);
+      resizeObserver.disconnect();
+    });
+  });
+
+  function scrollToIndex(index: number, opts?: { align?: "start" | "center" | "end" }): void {
+    const el = options.getScrollElement();
+    if (!el) return;
+    const itemOffset = getItemOffset(index);
+    const itemSize = getSize(index);
+    const viewSize = containerSize();
+    const scrollKey = horizontal ? "scrollLeft" : "scrollTop";
+
+    let target = itemOffset;
+    if (opts?.align === "center") {
+      target = itemOffset - viewSize / 2 + itemSize / 2;
+    } else if (opts?.align === "end") {
+      target = itemOffset - viewSize + itemSize;
+    }
+    el[scrollKey] = Math.max(0, target);
+  }
+
+  function measureElement(element: HTMLElement | null): void {
+    if (!element) return;
+    const index = Number(element.dataset.index);
+    if (Number.isNaN(index)) return;
+    const size = horizontal ? element.offsetWidth : element.offsetHeight;
+    measurements.set(index, size);
+  }
+
+  return { virtualItems, totalSize, scrollToIndex, scrollOffset, measureElement };
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+```bash
+cd packages/core && pnpm vitest run tests/primitives/create-virtualizer.test.ts
+```
+
+Expected: 4 tests pass.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add packages/core/src/primitives/create-virtualizer.ts packages/core/tests/primitives/create-virtualizer.test.ts
+git commit -m "feat: add createVirtualizer primitive for virtual scrolling"
+```
+
+---
+
+### Task 2: VirtualList Component
+
+**Depends on:** Task 1 (createVirtualizer)
+
+**Files:**
+- Create: `packages/core/src/components/virtual-list/virtual-list.props.ts`
+- Create: `packages/core/src/components/virtual-list/virtual-list-root.tsx`
+- Create: `packages/core/src/components/virtual-list/index.ts`
+- Create: `packages/core/tests/components/virtual-list/virtual-list.test.tsx`
+
+- [ ] **Step 1: Create virtual-list.props.ts**
+
+```typescript
+import { z } from "zod/v4";
+import type { Accessor, JSX } from "solid-js";
+import type { ComponentMeta } from "../../meta";
+import type { VirtualItem } from "../../primitives/create-virtualizer";
+
+export const VirtualListRootPropsSchema = z.object({
+  count: z.number().describe("Total number of items in the list"),
+  estimateSize: z.number().optional().describe("Estimated item height in pixels. Defaults to 40"),
+  overscan: z.number().optional().describe("Number of items rendered outside visible area. Defaults to 5"),
+  horizontal: z.boolean().optional().describe("Whether the list scrolls horizontally"),
+});
+
+export interface VirtualListRootProps extends Omit<z.infer<typeof VirtualListRootPropsSchema>, "count" | "estimateSize">, Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  count: number;
+  estimateSize?: number | ((index: number) => number);
+  children: (item: VirtualItem) => JSX.Element;
+}
+
+export const VirtualListMeta: ComponentMeta = {
+  name: "VirtualList",
+  description: "Virtualized scrollable list that only renders visible items, for large datasets",
+  parts: ["Root"] as const,
+  requiredParts: ["Root"] as const,
+} as const;
+```
+
+- [ ] **Step 2: Create virtual-list-root.tsx**
+
+```typescript
+import type { JSX } from "solid-js";
+import { For, createSignal, splitProps } from "solid-js";
+import { createVirtualizer } from "../../primitives/create-virtualizer";
+import type { VirtualListRootProps } from "./virtual-list.props";
+
+export function VirtualListRoot(props: VirtualListRootProps): JSX.Element {
+  const [local, rest] = splitProps(props, ["count", "estimateSize", "overscan", "horizontal", "children"]);
+  const [scrollRef, setScrollRef] = createSignal<HTMLElement | null>(null);
+
+  const estimateFn = () => {
+    const est = local.estimateSize ?? 40;
+    return typeof est === "function" ? est : () => est;
+  };
+
+  const virtualizer = createVirtualizer({
+    count: () => local.count,
+    getScrollElement: scrollRef,
+    estimateSize: (i) => estimateFn()(i),
+    overscan: local.overscan,
+    horizontal: local.horizontal,
+  });
+
+  return (
+    <div
+      ref={setScrollRef}
+      data-scope="virtual-list"
+      data-part="root"
+      style={{ overflow: "auto", position: "relative" }}
+      {...rest}
+    >
+      <div
+        style={{
+          height: local.horizontal ? "100%" : `${virtualizer.totalSize()}px`,
+          width: local.horizontal ? `${virtualizer.totalSize()}px` : "100%",
+          position: "relative",
+        }}
+      >
+        <For each={virtualizer.virtualItems()}>
+          {(item) => (
+            <div
+              data-index={item.index}
+              ref={(el) => virtualizer.measureElement(el)}
+              style={{
+                position: "absolute",
+                top: local.horizontal ? "0" : `${item.start}px`,
+                left: local.horizontal ? `${item.start}px` : "0",
+                width: local.horizontal ? `${item.size}px` : "100%",
+                height: local.horizontal ? "100%" : `${item.size}px`,
+              }}
+            >
+              {local.children(item)}
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 3: Create index.ts**
+
+```typescript
+import { VirtualListRoot } from "./virtual-list-root";
+export const VirtualList = VirtualListRoot;
+export type { VirtualListRootProps } from "./virtual-list.props";
+export { VirtualListRootPropsSchema, VirtualListMeta } from "./virtual-list.props";
+```
+
+- [ ] **Step 4: Write test**
+
+Create `packages/core/tests/components/virtual-list/virtual-list.test.tsx`:
+
+```typescript
+import { render, screen } from "@solidjs/testing-library";
+import { describe, expect, it } from "vitest";
+import { VirtualList } from "../../../src/components/virtual-list/index";
+import { VirtualListRootPropsSchema, VirtualListMeta } from "../../../src/components/virtual-list/virtual-list.props";
+
+describe("VirtualList", () => {
+  it("renders with render prop children", () => {
+    render(() => (
+      <VirtualList count={100} estimateSize={40} style={{ height: "200px" }} data-testid="list">
+        {(item) => <div data-testid={`item-${item.index}`}>Item {item.index}</div>}
+      </VirtualList>
+    ));
+    expect(screen.getByTestId("list")).toBeTruthy();
+  });
+
+  it("schema validates props", () => {
+    expect(VirtualListRootPropsSchema.safeParse({ count: 100, estimateSize: 40 }).success).toBe(true);
+    expect(VirtualListRootPropsSchema.safeParse({ count: 50, horizontal: true, overscan: 10 }).success).toBe(true);
+  });
+
+  it("meta has required fields", () => {
+    expect(VirtualListMeta.name).toBe("VirtualList");
+    expect(VirtualListMeta.description).toBeTruthy();
+    expect(VirtualListMeta.parts).toContain("Root");
+  });
+});
+```
+
+- [ ] **Step 5: Run tests and commit**
+
+```bash
+cd packages/core && pnpm vitest run tests/components/virtual-list/
+git add packages/core/src/components/virtual-list/ packages/core/tests/components/virtual-list/
+git commit -m "feat(virtual-list): add VirtualList component with createVirtualizer"
+```
+
+---
+
+### Task 3: Calendar Component
+
+**Files:**
+- Create: `packages/core/src/components/calendar/calendar.props.ts`
+- Create: `packages/core/src/components/calendar/calendar-context.ts`
+- Create: `packages/core/src/components/calendar/calendar-root.tsx`
+- Create: `packages/core/src/components/calendar/calendar-header.tsx`
+- Create: `packages/core/src/components/calendar/calendar-grid.tsx`
+- Create: `packages/core/src/components/calendar/calendar-grid-head.tsx`
+- Create: `packages/core/src/components/calendar/calendar-grid-body.tsx`
+- Create: `packages/core/src/components/calendar/calendar-cell.tsx`
+- Create: `packages/core/src/components/calendar/calendar-heading.tsx`
+- Create: `packages/core/src/components/calendar/calendar-nav.tsx`
+- Create: `packages/core/src/components/calendar/index.ts`
+- Create: `packages/core/tests/components/calendar/calendar.test.tsx`
+
+- [ ] **Step 1: Create calendar.props.ts**
+
+```typescript
+import { z } from "zod/v4";
+import type { JSX } from "solid-js";
+import type { ComponentMeta } from "../../meta";
+
+export const CalendarRootPropsSchema = z.object({
+  value: z.string().optional().describe("Controlled selected date as ISO string (YYYY-MM-DD)"),
+  defaultValue: z.string().optional().describe("Initial selected date (uncontrolled)"),
+  month: z.number().optional().describe("Controlled displayed month (0-11)"),
+  year: z.number().optional().describe("Controlled displayed year"),
+  minDate: z.string().optional().describe("Earliest selectable date as ISO string"),
+  maxDate: z.string().optional().describe("Latest selectable date as ISO string"),
+  disabled: z.boolean().optional().describe("Whether the calendar is disabled"),
+  locale: z.string().optional().describe("BCP 47 locale string for day/month names. Defaults to 'en-US'"),
+  weekStartsOn: z.number().optional().describe("Day the week starts on (0=Sunday, 1=Monday). Defaults to 0"),
+});
+
+export interface CalendarRootProps extends z.infer<typeof CalendarRootPropsSchema> {
+  onValueChange?: (date: string) => void;
+  onMonthChange?: (month: number, year: number) => void;
+  children: JSX.Element;
+}
+
+export interface CalendarHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> { children: JSX.Element; }
+export interface CalendarHeadingProps extends JSX.HTMLAttributes<HTMLHeadingElement> {}
+export interface CalendarNavProps extends JSX.HTMLAttributes<HTMLDivElement> { children: JSX.Element; }
+export interface CalendarPrevProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> { children?: JSX.Element; }
+export interface CalendarNextProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> { children?: JSX.Element; }
+export interface CalendarGridProps extends JSX.HTMLAttributes<HTMLTableElement> { children: JSX.Element; }
+export interface CalendarGridHeadProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {}
+export interface CalendarGridBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {}
+export interface CalendarCellProps extends JSX.HTMLAttributes<HTMLTableCellElement> {
+  date: string;
+  children?: JSX.Element;
+}
+
+export const CalendarMeta: ComponentMeta = {
+  name: "Calendar",
+  description: "Month grid for date selection with keyboard navigation, locale support, and min/max constraints",
+  parts: ["Root", "Header", "Heading", "Nav", "PrevButton", "NextButton", "Grid", "GridHead", "GridBody", "Cell"] as const,
+  requiredParts: ["Root", "Grid", "GridBody", "Cell"] as const,
+} as const;
+```
+
+- [ ] **Step 2: Create calendar-context.ts**
+
+The context provides the current month/year state, locale helpers, selected date, and navigation methods. Read existing context patterns (e.g., `dialog-context.ts`) and follow the same structure with `[PettyUI]` error prefix.
+
+Key context fields:
+```typescript
+interface CalendarContextValue {
+  focusedDate: Accessor<Date>;
+  selectedDate: Accessor<string | undefined>;
+  displayMonth: Accessor<number>;
+  displayYear: Accessor<number>;
+  locale: Accessor<string>;
+  weekStartsOn: Accessor<number>;
+  minDate: Accessor<string | undefined>;
+  maxDate: Accessor<string | undefined>;
+  disabled: Accessor<boolean>;
+  selectDate: (date: string) => void;
+  focusDate: (date: Date) => void;
+  goToPrevMonth: () => void;
+  goToNextMonth: () => void;
+  isDateDisabled: (date: string) => boolean;
+  isDateSelected: (date: string) => boolean;
+  isDateToday: (date: string) => boolean;
+  getDaysInMonth: () => Date[];
+  getWeekDayNames: () => string[];
+}
+```
+
+- [ ] **Step 3: Create calendar-root.tsx**
+
+Uses `createControllableSignal` for selected date. Manages month/year display state. Provides context. Renders no DOM — just context providers around children.
+
+Key implementation:
+- Parse ISO date strings to Date objects for internal calculations
+- `getDaysInMonth()` returns array of Date objects for the current display month
+- `getWeekDayNames()` uses `Intl.DateTimeFormat` with the configured locale
+- Keyboard navigation: Arrow keys move focus, Enter/Space selects
+- Month navigation: goToPrevMonth/goToNextMonth update display state
+
+- [ ] **Step 4: Create sub-components**
+
+**calendar-header.tsx:** Simple `<div data-scope="calendar" data-part="header">` wrapper.
+
+**calendar-heading.tsx:** Renders current month/year from context using `Intl.DateTimeFormat`:
+```typescript
+const heading = () => {
+  const date = new Date(ctx.displayYear(), ctx.displayMonth());
+  return new Intl.DateTimeFormat(ctx.locale(), { month: "long", year: "numeric" }).format(date);
+};
+return <h2 data-scope="calendar" data-part="heading" {...rest}>{heading()}</h2>;
+```
+
+**calendar-nav.tsx:** Container for prev/next buttons. Contains CalendarPrev and CalendarNext sub-components that call `ctx.goToPrevMonth()` / `ctx.goToNextMonth()`.
+
+**calendar-grid.tsx:** `<table role="grid" data-scope="calendar" data-part="grid">`.
+
+**calendar-grid-head.tsx:** Renders weekday headers using `ctx.getWeekDayNames()` as `<thead><tr>` with `<th>` for each day.
+
+**calendar-grid-body.tsx:** Renders weeks as `<tr>` rows with slots for CalendarCell. Computes the grid layout from `ctx.getDaysInMonth()`.
+
+**calendar-cell.tsx:** Individual day cell. Sets data attributes: `data-selected`, `data-today`, `data-disabled`, `data-outside-month`. Calls `ctx.selectDate()` on click.
+
+- [ ] **Step 5: Create index.ts**
+
+```typescript
+import { CalendarRoot } from "./calendar-root";
+import { CalendarHeader } from "./calendar-header";
+import { CalendarHeading } from "./calendar-heading";
+import { CalendarNav } from "./calendar-nav";
+import { CalendarGrid } from "./calendar-grid";
+import { CalendarGridHead } from "./calendar-grid-head";
+import { CalendarGridBody } from "./calendar-grid-body";
+import { CalendarCell } from "./calendar-cell";
+
+export const Calendar = Object.assign(CalendarRoot, {
+  Header: CalendarHeader, Heading: CalendarHeading, Nav: CalendarNav,
+  Grid: CalendarGrid, GridHead: CalendarGridHead, GridBody: CalendarGridBody, Cell: CalendarCell,
+});
+
+export type { CalendarRootProps, CalendarCellProps } from "./calendar.props";
+export { CalendarRootPropsSchema, CalendarMeta } from "./calendar.props";
+```
+
+- [ ] **Step 6: Write test**
+
+Create `packages/core/tests/components/calendar/calendar.test.tsx`:
+
+```typescript
+import { render, screen, fireEvent } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
+import { describe, expect, it } from "vitest";
+import { Calendar } from "../../../src/components/calendar/index";
+import { CalendarRootPropsSchema, CalendarMeta } from "../../../src/components/calendar/calendar.props";
+
+describe("Calendar", () => {
+  it("renders month grid with day cells", () => {
+    render(() => (
+      <Calendar defaultValue="2026-03-15">
+        <Calendar.Header>
+          <Calendar.Heading />
+          <Calendar.Nav>
+            <button>Prev</button>
+            <button>Next</button>
+          </Calendar.Nav>
+        </Calendar.Header>
+        <Calendar.Grid>
+          <Calendar.GridHead />
+          <Calendar.GridBody />
+        </Calendar.Grid>
+      </Calendar>
+    ));
+    expect(screen.getByText("March 2026")).toBeTruthy();
+  });
+
+  it("calls onValueChange when date selected", () => {
+    let selected = "";
+    render(() => (
+      <Calendar onValueChange={(d) => { selected = d; }}>
+        <Calendar.Grid>
+          <Calendar.GridBody />
+        </Calendar.Grid>
+      </Calendar>
+    ));
+    const cells = screen.getAllByRole("gridcell");
+    if (cells.length > 0) fireEvent.click(cells[10]);
+    expect(selected).toBeTruthy();
+  });
+
+  it("schema validates date constraints", () => {
+    expect(CalendarRootPropsSchema.safeParse({
+      value: "2026-03-15", minDate: "2026-01-01", maxDate: "2026-12-31",
+      locale: "en-US", weekStartsOn: 1,
+    }).success).toBe(true);
+  });
+
+  it("meta has required fields", () => {
+    expect(CalendarMeta.name).toBe("Calendar");
+    expect(CalendarMeta.parts).toContain("Root");
+    expect(CalendarMeta.parts).toContain("Grid");
+    expect(CalendarMeta.parts).toContain("Cell");
+  });
+});
+```
+
+- [ ] **Step 7: Run tests and commit**
+
+```bash
+cd packages/core && pnpm vitest run tests/components/calendar/
+git add packages/core/src/components/calendar/ packages/core/tests/components/calendar/
+git commit -m "feat(calendar): add Calendar component with locale support and keyboard nav"
+```
+
+---
+
+### Task 4: DatePicker Component
+
+**Depends on:** Task 3 (Calendar)
+
+**Files:**
+- Create: `packages/core/src/components/date-picker/date-picker.props.ts`
+- Create: `packages/core/src/components/date-picker/date-picker-context.ts`
+- Create: `packages/core/src/components/date-picker/date-picker-root.tsx`
+- Create: `packages/core/src/components/date-picker/date-picker-input.tsx`
+- Create: `packages/core/src/components/date-picker/date-picker-trigger.tsx`
+- Create: `packages/core/src/components/date-picker/date-picker-content.tsx`
+- Create: `packages/core/src/components/date-picker/index.ts`
+- Create: `packages/core/tests/components/date-picker/date-picker.test.tsx`
+
+Composes Calendar inside a Popover-like dropdown anchored to an input.
+
+- [ ] **Step 1: Create date-picker.props.ts**
+
+```typescript
+import { z } from "zod/v4";
+import type { JSX } from "solid-js";
+import type { ComponentMeta } from "../../meta";
+
+export const DatePickerRootPropsSchema = z.object({
+  value: z.string().optional().describe("Controlled selected date as ISO string (YYYY-MM-DD)"),
+  defaultValue: z.string().optional().describe("Initial selected date (uncontrolled)"),
+  open: z.boolean().optional().describe("Controlled popover open state"),
+  defaultOpen: z.boolean().optional().describe("Initial popover open state"),
+  minDate: z.string().optional().describe("Earliest selectable date"),
+  maxDate: z.string().optional().describe("Latest selectable date"),
+  disabled: z.boolean().optional().describe("Whether the date picker is disabled"),
+  required: z.boolean().optional().describe("Whether a date selection is required"),
+  name: z.string().optional().describe("Form field name for submission"),
+  placeholder: z.string().optional().describe("Placeholder for the input. Defaults to 'Select date'"),
+  locale: z.string().optional().describe("BCP 47 locale for formatting. Defaults to 'en-US'"),
+  format: z.string().optional().describe("Display format string. Defaults to locale default"),
+});
+
+export interface DatePickerRootProps extends z.infer<typeof DatePickerRootPropsSchema> {
+  onValueChange?: (date: string) => void;
+  onOpenChange?: (open: boolean) => void;
+  children: JSX.Element;
+}
+
+export interface DatePickerInputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value"> {}
+export interface DatePickerTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> { children?: JSX.Element; }
+export interface DatePickerContentProps extends JSX.HTMLAttributes<HTMLDivElement> { children: JSX.Element; }
+
+export const DatePickerMeta: ComponentMeta = {
+  name: "DatePicker",
+  description: "Date input with dropdown calendar for selecting dates, with locale formatting and constraints",
+  parts: ["Root", "Input", "Trigger", "Content", "Calendar"] as const,
+  requiredParts: ["Root", "Input", "Content"] as const,
+} as const;
+```
+
+- [ ] **Step 2: Create context, root, and sub-components**
+
+The DatePicker wraps a disclosure state (open/close) + a Calendar value. The root provides context containing:
+- `value`/`setValue` for the selected date
+- `open`/`setOpen` for the popover
+- `formatDate()` helper using `Intl.DateTimeFormat`
+
+**date-picker-root.tsx:** Uses `createDisclosureState` for open, `createControllableSignal` for value. When a date is selected in the Calendar, it closes the popover and updates the value.
+
+**date-picker-input.tsx:** Read-only input showing the formatted date. Clicking opens the calendar. A hidden `<input type="hidden" name={name} value={isoDate}>` for form submission.
+
+**date-picker-trigger.tsx:** Button that toggles the popover open state.
+
+**date-picker-content.tsx:** Floating content panel using `createFloating` for positioning. Contains the Calendar inside.
+
+- [ ] **Step 3: Create index.ts**
+
+```typescript
+import { DatePickerRoot } from "./date-picker-root";
+import { DatePickerInput } from "./date-picker-input";
+import { DatePickerTrigger } from "./date-picker-trigger";
+import { DatePickerContent } from "./date-picker-content";
+
+export const DatePicker = Object.assign(DatePickerRoot, {
+  Input: DatePickerInput, Trigger: DatePickerTrigger, Content: DatePickerContent,
+});
+
+export type { DatePickerRootProps, DatePickerInputProps, DatePickerTriggerProps, DatePickerContentProps } from "./date-picker.props";
+export { DatePickerRootPropsSchema, DatePickerMeta } from "./date-picker.props";
+```
+
+- [ ] **Step 4: Write test**
+
+Create `packages/core/tests/components/date-picker/date-picker.test.tsx`:
+
+```typescript
+import { render, screen } from "@solidjs/testing-library";
+import { describe, expect, it } from "vitest";
+import { DatePicker } from "../../../src/components/date-picker/index";
+import { DatePickerRootPropsSchema, DatePickerMeta } from "../../../src/components/date-picker/date-picker.props";
+
+describe("DatePicker", () => {
+  it("renders input with placeholder", () => {
+    render(() => (
+      <DatePicker placeholder="Pick a date">
+        <DatePicker.Input data-testid="input" />
+        <DatePicker.Trigger>Open</DatePicker.Trigger>
+        <DatePicker.Content>
+          <div>Calendar goes here</div>
+        </DatePicker.Content>
+      </DatePicker>
+    ));
+    const input = screen.getByTestId("input");
+    expect(input).toBeTruthy();
+  });
+
+  it("shows formatted date when value set", () => {
+    render(() => (
+      <DatePicker defaultValue="2026-03-15">
+        <DatePicker.Input data-testid="input" />
+        <DatePicker.Content><div>Calendar</div></DatePicker.Content>
+      </DatePicker>
+    ));
+    expect(screen.getByTestId("input")).toBeTruthy();
+  });
+
+  it("schema validates", () => {
+    expect(DatePickerRootPropsSchema.safeParse({
+      value: "2026-03-15", minDate: "2026-01-01", locale: "en-US",
+    }).success).toBe(true);
+  });
+
+  it("meta has required fields", () => {
+    expect(DatePickerMeta.name).toBe("DatePicker");
+    expect(DatePickerMeta.parts).toContain("Root");
+    expect(DatePickerMeta.parts).toContain("Input");
+    expect(DatePickerMeta.parts).toContain("Content");
+  });
+});
+```
+
+- [ ] **Step 5: Run tests and commit**
+
+```bash
+cd packages/core && pnpm vitest run tests/components/date-picker/
+git add packages/core/src/components/date-picker/ packages/core/tests/components/date-picker/
+git commit -m "feat(date-picker): add DatePicker with Calendar integration and locale formatting"
+```
+
+---
+
+### Task 5: CommandPalette Component
+
+**Files:**
+- Create: `packages/core/src/components/command-palette/command-palette.props.ts`
+- Create: `packages/core/src/components/command-palette/command-palette-context.ts`
+- Create: `packages/core/src/components/command-palette/command-palette-root.tsx`
+- Create: `packages/core/src/components/command-palette/command-palette-input.tsx`
+- Create: `packages/core/src/components/command-palette/command-palette-list.tsx`
+- Create: `packages/core/src/components/command-palette/command-palette-item.tsx`
+- Create: `packages/core/src/components/command-palette/command-palette-group.tsx`
+- Create: `packages/core/src/components/command-palette/command-palette-empty.tsx`
+- Create: `packages/core/src/components/command-palette/command-palette-separator.tsx`
+- Create: `packages/core/src/components/command-palette/index.ts`
+- Create: `packages/core/tests/components/command-palette/command-palette.test.tsx`
+
+Follows the cmdk pattern: search input filters a list of actions with keyboard navigation.
+
+- [ ] **Step 1: Create command-palette.props.ts**
+
+```typescript
+import { z } from "zod/v4";
+import type { JSX } from "solid-js";
+import type { ComponentMeta } from "../../meta";
+
+export const CommandPaletteRootPropsSchema = z.object({
+  value: z.string().optional().describe("Controlled selected item value"),
+  defaultValue: z.string().optional().describe("Initial selected item (uncontrolled)"),
+  search: z.string().optional().describe("Controlled search input value"),
+  defaultSearch: z.string().optional().describe("Initial search value (uncontrolled)"),
+  loop: z.boolean().optional().describe("Whether keyboard navigation wraps. Defaults to true"),
+  filter: z.boolean().optional().describe("Whether built-in filtering is enabled. Defaults to true"),
+});
+
+export interface CommandPaletteRootProps extends z.infer<typeof CommandPaletteRootPropsSchema> {
+  onValueChange?: (value: string) => void;
+  onSearchChange?: (search: string) => void;
+  onSelect?: (value: string) => void;
+  children: JSX.Element;
+}
+
+export interface CommandPaletteInputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput"> { placeholder?: string; }
+export interface CommandPaletteListProps extends JSX.HTMLAttributes<HTMLDivElement> { children: JSX.Element; }
+export interface CommandPaletteItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  keywords?: string[];
+  disabled?: boolean;
+  onSelect?: () => void;
+  children?: JSX.Element;
+}
+export interface CommandPaletteGroupProps extends JSX.HTMLAttributes<HTMLDivElement> { heading?: string; children: JSX.Element; }
+export interface CommandPaletteEmptyProps extends JSX.HTMLAttributes<HTMLDivElement> { children?: JSX.Element; }
+export interface CommandPaletteSeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+export const CommandPaletteMeta: ComponentMeta = {
+  name: "CommandPalette",
+  description: "Search-driven command menu for finding and executing actions, with keyboard navigation and grouping",
+  parts: ["Root", "Input", "List", "Item", "Group", "Empty", "Separator"] as const,
+  requiredParts: ["Root", "Input", "List", "Item"] as const,
+} as const;
+```
+
+- [ ] **Step 2: Create context**
+
+Context provides: search string, filtered items, highlighted value, select handler, filter function. Uses `createListNavigation` internally in activation mode.
+
+- [ ] **Step 3: Create root component**
+
+**command-palette-root.tsx:** Manages search state via `createControllableSignal`. Collects registered items and filters them based on search. Uses `createListNavigation` with `mode: "activation"`. Provides context to children.
+
+Key filtering logic:
+```typescript
+const filteredItems = () => {
+  if (!filterEnabled) return allItems();
+  const query = searchValue().toLowerCase();
+  if (!query) return allItems();
+  return allItems().filter((item) => {
+    const text = item.value.toLowerCase();
+    const keywords = item.keywords?.join(" ").toLowerCase() ?? "";
+    return text.includes(query) || keywords.includes(query);
+  });
+};
+```
+
+- [ ] **Step 4: Create sub-components**
+
+**command-palette-input.tsx:** `<input>` that updates search state on input. Delegates keyDown to list navigation. `role="combobox"`, `aria-expanded`, `aria-activedescendant`.
+
+**command-palette-list.tsx:** Container for items. Spreads `containerProps` from `createListNavigation`. Shows `CommandPaletteEmpty` when no filtered items.
+
+**command-palette-item.tsx:** Individual action. Spreads `getItemProps(value)` from list navigation. `data-highlighted`, `data-disabled`. Calls `onSelect` on activation.
+
+**command-palette-group.tsx:** Groups items with optional heading. `role="group"`, `aria-label`.
+
+**command-palette-empty.tsx:** Shown when search yields no results. `<Show when={filteredCount() === 0}>`.
+
+**command-palette-separator.tsx:** Visual divider between groups. `role="separator"`.
+
+- [ ] **Step 5: Create index.ts**
+
+```typescript
+import { CommandPaletteRoot } from "./command-palette-root";
+import { CommandPaletteInput } from "./command-palette-input";
+import { CommandPaletteList } from "./command-palette-list";
+import { CommandPaletteItem } from "./command-palette-item";
+import { CommandPaletteGroup } from "./command-palette-group";
+import { CommandPaletteEmpty } from "./command-palette-empty";
+import { CommandPaletteSeparator } from "./command-palette-separator";
+
+export const CommandPalette = Object.assign(CommandPaletteRoot, {
+  Input: CommandPaletteInput, List: CommandPaletteList, Item: CommandPaletteItem,
+  Group: CommandPaletteGroup, Empty: CommandPaletteEmpty, Separator: CommandPaletteSeparator,
+});
+
+export type { CommandPaletteRootProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteGroupProps } from "./command-palette.props";
+export { CommandPaletteRootPropsSchema, CommandPaletteMeta } from "./command-palette.props";
+```
+
+- [ ] **Step 6: Write test**
+
+Create `packages/core/tests/components/command-palette/command-palette.test.tsx`:
+
+```typescript
+import { render, screen, fireEvent } from "@solidjs/testing-library";
+import { describe, expect, it } from "vitest";
+import { CommandPalette } from "../../../src/components/command-palette/index";
+import { CommandPaletteRootPropsSchema, CommandPaletteMeta } from "../../../src/components/command-palette/command-palette.props";
+
+describe("CommandPalette", () => {
+  it("renders input and items", () => {
+    render(() => (
+      <CommandPalette>
+        <CommandPalette.Input placeholder="Search commands..." />
+        <CommandPalette.List>
+          <CommandPalette.Item value="copy">Copy</CommandPalette.Item>
+          <CommandPalette.Item value="paste">Paste</CommandPalette.Item>
+        </CommandPalette.List>
+      </CommandPalette>
+    ));
+    expect(screen.getByPlaceholderText("Search commands...")).toBeTruthy();
+    expect(screen.getByText("Copy")).toBeTruthy();
+    expect(screen.getByText("Paste")).toBeTruthy();
+  });
+
+  it("renders groups with headings", () => {
+    render(() => (
+      <CommandPalette>
+        <CommandPalette.Input placeholder="Search..." />
+        <CommandPalette.List>
+          <CommandPalette.Group heading="Actions">
+            <CommandPalette.Item value="save">Save</CommandPalette.Item>
+          </CommandPalette.Group>
+        </CommandPalette.List>
+      </CommandPalette>
+    ));
+    expect(screen.getByText("Actions")).toBeTruthy();
+    expect(screen.getByText("Save")).toBeTruthy();
+  });
+
+  it("calls onSelect when item activated", () => {
+    let selected = "";
+    render(() => (
+      <CommandPalette onSelect={(v) => { selected = v; }}>
+        <CommandPalette.Input />
+        <CommandPalette.List>
+          <CommandPalette.Item value="run">Run</CommandPalette.Item>
+        </CommandPalette.List>
+      </CommandPalette>
+    ));
+    fireEvent.click(screen.getByText("Run"));
+    expect(selected).toBe("run");
+  });
+
+  it("schema validates", () => {
+    expect(CommandPaletteRootPropsSchema.safeParse({ search: "test", loop: true, filter: false }).success).toBe(true);
+  });
+
+  it("meta has fields", () => {
+    expect(CommandPaletteMeta.name).toBe("CommandPalette");
+    expect(CommandPaletteMeta.parts).toContain("Root");
+    expect(CommandPaletteMeta.parts).toContain("Input");
+    expect(CommandPaletteMeta.parts).toContain("Item");
+  });
+});
+```
+
+- [ ] **Step 7: Run tests and commit**
+
+```bash
+cd packages/core && pnpm vitest run tests/components/command-palette/
+git add packages/core/src/components/command-palette/ packages/core/tests/components/command-palette/
+git commit -m "feat(command-palette): add CommandPalette with search, keyboard nav, and grouping"
+```
+
+---
+
+### Task 6: Form Component
+
+**Files:**
+- Create: `packages/core/src/components/form/form.props.ts`
+- Create: `packages/core/src/components/form/form-context.ts`
+- Create: `packages/core/src/components/form/form-root.tsx`
+- Create: `packages/core/src/components/form/form-field.tsx`
+- Create: `packages/core/src/components/form/form-label.tsx`
+- Create: `packages/core/src/components/form/form-control.tsx`
+- Create: `packages/core/src/components/form/form-description.tsx`
+- Create: `packages/core/src/components/form/form-error-message.tsx`
+- Create: `packages/core/src/components/form/form-submit.tsx`
+- Create: `packages/core/src/components/form/index.ts`
+- Create: `packages/core/tests/components/form/form.test.tsx`
+
+The Form integrates with Zod v4 for validation — AI generates a schema, the form validates against it.
+
+- [ ] **Step 1: Create form.props.ts**
+
+```typescript
+import { z } from "zod/v4";
+import type { JSX } from "solid-js";
+import type { ComponentMeta } from "../../meta";
+
+export const FormRootPropsSchema = z.object({
+  disabled: z.boolean().optional().describe("Disable all fields in the form"),
+  validateOn: z.enum(["submit", "blur", "change"]).optional().describe("When to validate. Defaults to 'submit'"),
+});
+
+export interface FormRootProps extends z.infer<typeof FormRootPropsSchema>, Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+  schema?: z.ZodType;
+  onSubmit?: (values: Record<string, unknown>, event: SubmitEvent) => void;
+  onValidationError?: (errors: Record<string, string[]>) => void;
+  children: JSX.Element;
+}
+
+export const FormFieldPropsSchema = z.object({
+  name: z.string().describe("Field name matching the schema key"),
+});
+
+export interface FormFieldProps extends z.infer<typeof FormFieldPropsSchema> {
+  children: JSX.Element;
+}
+
+export interface FormLabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> { children?: JSX.Element; }
+export interface FormControlProps { children: (props: { id: string; name: string; "aria-describedby"?: string; "aria-invalid"?: boolean }) => JSX.Element; }
+export interface FormDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> { children?: JSX.Element; }
+export interface FormErrorMessageProps extends JSX.HTMLAttributes<HTMLParagraphElement> { children?: JSX.Element | ((errors: string[]) => JSX.Element); }
+export interface FormSubmitProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> { children?: JSX.Element; }
+
+export const FormMeta: ComponentMeta = {
+  name: "Form",
+  description: "Form with Zod v4 schema validation, field-level error display, and accessible aria linking",
+  parts: ["Root", "Field", "Label", "Control", "Description", "ErrorMessage", "Submit"] as const,
+  requiredParts: ["Root", "Field"] as const,
+} as const;
+```
+
+- [ ] **Step 2: Create form context**
+
+Two contexts: FormContext (root-level — schema, errors store, submit handler, validateOn) and FormFieldContext (per-field — name, fieldId, errors, touched).
+
+Key form context:
+```typescript
+interface FormContextValue {
+  errors: Accessor<Record<string, string[]>>;
+  getFieldErrors: (name: string) => string[];
+  setFieldValue: (name: string, value: unknown) => void;
+  getFieldValue: (name: string) => unknown;
+  validateField: (name: string) => void;
+  validateAll: () => boolean;
+  disabled: Accessor<boolean>;
+  validateOn: Accessor<"submit" | "blur" | "change">;
+}
+```
+
+- [ ] **Step 3: Create form-root.tsx**
+
+Uses a reactive store (`createStore`) for field values and errors. On submit:
+1. Collect all field values
+2. If `schema` provided, validate with `schema.safeParse(values)`
+3. If valid, call `onSubmit(values, event)`
+4. If invalid, map Zod errors to field-level error arrays, call `onValidationError`
+
+```typescript
+const handleSubmit: JSX.EventHandlerUnion<HTMLFormElement, SubmitEvent> = (e) => {
+  e.preventDefault();
+  if (local.schema) {
+    const result = local.schema.safeParse(formValues);
+    if (!result.success) {
+      const fieldErrors: Record<string, string[]> = {};
+      for (const issue of result.error.issues) {
+        const path = issue.path.join(".");
+        if (!fieldErrors[path]) fieldErrors[path] = [];
+        fieldErrors[path].push(issue.message);
+      }
+      setErrors(fieldErrors);
+      local.onValidationError?.(fieldErrors);
+      return;
+    }
+    setErrors({});
+    local.onSubmit?.(result.data, e);
+  } else {
+    local.onSubmit?.(formValues, e);
+  }
+};
+```
+
+- [ ] **Step 4: Create form sub-components**
+
+**form-field.tsx:** Provides per-field context. Generates unique IDs for label/description/error linking. Calls `validateField` on blur/change based on `validateOn`.
+
+**form-label.tsx:** `<label htmlFor={fieldCtx.controlId}>`.
+
+**form-control.tsx:** Render prop that passes `{ id, name, "aria-describedby", "aria-invalid" }` for linking.
+
+**form-description.tsx:** `<p id={fieldCtx.descriptionId}>` for accessible description.
+
+**form-error-message.tsx:** `<p role="alert" id={fieldCtx.errorId}>`. Only renders when field has errors. Supports render prop `children={(errors) => ...}`.
+
+**form-submit.tsx:** `<button type="submit" disabled={formCtx.disabled()}>`.
+
+- [ ] **Step 5: Create index.ts**
+
+```typescript
+import { FormRoot } from "./form-root";
+import { FormField } from "./form-field";
+import { FormLabel } from "./form-label";
+import { FormControl } from "./form-control";
+import { FormDescription } from "./form-description";
+import { FormErrorMessage } from "./form-error-message";
+import { FormSubmit } from "./form-submit";
+
+export const Form = Object.assign(FormRoot, {
+  Field: FormField, Label: FormLabel, Control: FormControl,
+  Description: FormDescription, ErrorMessage: FormErrorMessage, Submit: FormSubmit,
+});
+
+export type { FormRootProps, FormFieldProps, FormControlProps, FormErrorMessageProps } from "./form.props";
+export { FormRootPropsSchema, FormFieldPropsSchema, FormMeta } from "./form.props";
+```
+
+- [ ] **Step 6: Write test**
+
+Create `packages/core/tests/components/form/form.test.tsx`:
+
+```typescript
+import { render, screen, fireEvent } from "@solidjs/testing-library";
+import { describe, expect, it } from "vitest";
+import { z } from "zod/v4";
+import { Form } from "../../../src/components/form/index";
+import { FormRootPropsSchema, FormMeta } from "../../../src/components/form/form.props";
+
+describe("Form", () => {
+  it("renders form with fields", () => {
+    render(() => (
+      <Form>
+        <Form.Field name="email">
+          <Form.Label>Email</Form.Label>
+          <Form.Control>
+            {(props) => <input {...props} type="email" data-testid="email" />}
+          </Form.Control>
+        </Form.Field>
+        <Form.Submit>Submit</Form.Submit>
+      </Form>
+    ));
+    expect(screen.getByText("Email")).toBeTruthy();
+    expect(screen.getByTestId("email")).toBeTruthy();
+    expect(screen.getByText("Submit")).toBeTruthy();
+  });
+
+  it("validates with Zod schema on submit", () => {
+    const schema = z.object({ email: z.string().email() });
+    let errors: Record<string, string[]> | undefined;
+    render(() => (
+      <Form schema={schema} onValidationError={(e) => { errors = e; }}>
+        <Form.Field name="email">
+          <Form.Control>{(props) => <input {...props} value="invalid" />}</Form.Control>
+          <Form.ErrorMessage>{(errs) => <span>{errs[0]}</span>}</Form.ErrorMessage>
+        </Form.Field>
+        <Form.Submit data-testid="submit">Submit</Form.Submit>
+      </Form>
+    ));
+    fireEvent.click(screen.getByTestId("submit"));
+    expect(errors).toBeDefined();
+  });
+
+  it("schema validates", () => {
+    expect(FormRootPropsSchema.safeParse({ validateOn: "blur", disabled: false }).success).toBe(true);
+    expect(FormRootPropsSchema.safeParse({ validateOn: "invalid" }).success).toBe(false);
+  });
+
+  it("meta has fields", () => {
+    expect(FormMeta.name).toBe("Form");
+    expect(FormMeta.parts).toContain("Root");
+    expect(FormMeta.parts).toContain("Field");
+    expect(FormMeta.parts).toContain("ErrorMessage");
+  });
+});
+```
+
+- [ ] **Step 7: Run tests and commit**
+
+```bash
+cd packages/core && pnpm vitest run tests/components/form/
+git add packages/core/src/components/form/ packages/core/tests/components/form/
+git commit -m "feat(form): add Form component with Zod v4 validation integration"
+```
+
+---
+
+### Task 7: Wizard/Stepper Component
+
+**Files:**
+- Create: `packages/core/src/components/wizard/wizard.props.ts`
+- Create: `packages/core/src/components/wizard/wizard-context.ts`
+- Create: `packages/core/src/components/wizard/wizard-root.tsx`
+- Create: `packages/core/src/components/wizard/wizard-step.tsx`
+- Create: `packages/core/src/components/wizard/wizard-step-list.tsx`
+- Create: `packages/core/src/components/wizard/wizard-step-trigger.tsx`
+- Create: `packages/core/src/components/wizard/wizard-step-content.tsx`
+- Create: `packages/core/src/components/wizard/wizard-prev.tsx`
+- Create: `packages/core/src/components/wizard/wizard-next.tsx`
+- Create: `packages/core/src/components/wizard/index.ts`
+- Create: `packages/core/tests/components/wizard/wizard.test.tsx`
+
+- [ ] **Step 1: Create wizard.props.ts**
+
+```typescript
+import { z } from "zod/v4";
+import type { JSX } from "solid-js";
+import type { ComponentMeta } from "../../meta";
+
+export const WizardRootPropsSchema = z.object({
+  step: z.number().optional().describe("Controlled current step index (0-based)"),
+  defaultStep: z.number().optional().describe("Initial step (uncontrolled). Defaults to 0"),
+  linear: z.boolean().optional().describe("Whether steps must be completed in order. Defaults to true"),
+  orientation: z.enum(["horizontal", "vertical"]).optional().describe("Step indicator layout. Defaults to 'horizontal'"),
+});
+
+export interface WizardRootProps extends z.infer<typeof WizardRootPropsSchema> {
+  onStepChange?: (step: number) => void;
+  onComplete?: () => void;
+  children: JSX.Element;
+}
+
+export const WizardStepPropsSchema = z.object({
+  index: z.number().describe("Step index (0-based)"),
+  disabled: z.boolean().optional().describe("Whether this step is disabled"),
+  completed: z.boolean().optional().describe("Whether this step is completed"),
+});
+
+export interface WizardStepProps extends z.infer<typeof WizardStepPropsSchema> { children: JSX.Element; }
+export interface WizardStepListProps extends JSX.HTMLAttributes<HTMLDivElement> { children: JSX.Element; }
+export interface WizardStepTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> { children?: JSX.Element; }
+export interface WizardStepContentProps extends JSX.HTMLAttributes<HTMLDivElement> { children?: JSX.Element; }
+export interface WizardPrevProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> { children?: JSX.Element; }
+export interface WizardNextProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> { children?: JSX.Element; }
+
+export const WizardMeta: ComponentMeta = {
+  name: "Wizard",
+  description: "Multi-step flow with step indicators, navigation, and linear/non-linear progression",
+  parts: ["Root", "StepList", "Step", "StepTrigger", "StepContent", "PrevButton", "NextButton"] as const,
+  requiredParts: ["Root", "Step", "StepContent"] as const,
+} as const;
+```
+
+- [ ] **Step 2: Create wizard-context.ts**
+
+```typescript
+interface WizardContextValue {
+  currentStep: Accessor<number>;
+  totalSteps: Accessor<number>;
+  goToStep: (step: number) => void;
+  goToNext: () => void;
+  goToPrev: () => void;
+  isFirstStep: Accessor<boolean>;
+  isLastStep: Accessor<boolean>;
+  linear: Accessor<boolean>;
+  orientation: Accessor<"horizontal" | "vertical">;
+  completedSteps: Accessor<Set<number>>;
+  canGoToStep: (step: number) => boolean;
+}
+
+interface WizardStepContextValue {
+  index: number;
+  isActive: Accessor<boolean>;
+  isCompleted: Accessor<boolean>;
+  isDisabled: Accessor<boolean>;
+}
+```
+
+- [ ] **Step 3: Create root and sub-components**
+
+**wizard-root.tsx:** Uses `createControllableSignal` for current step. Tracks total steps from children. Provides context. When `onComplete` is provided and user navigates past the last step, calls it.
+
+**wizard-step.tsx:** Registers itself with the root context. Provides WizardStepContext with `isActive`, `isCompleted`, `isDisabled`.
+
+**wizard-step-list.tsx:** `<div role="tablist" data-orientation={orientation}>` containing step triggers.
+
+**wizard-step-trigger.tsx:** Button for each step. `aria-selected={isActive}`, `data-state` (active/completed/upcoming). In linear mode, disabled if previous steps not completed.
+
+**wizard-step-content.tsx:** Shows only when step is active. `<Show when={stepCtx.isActive()}>`.
+
+**wizard-prev.tsx:** Calls `ctx.goToPrev()`. Disabled when `isFirstStep`.
+
+**wizard-next.tsx:** Calls `ctx.goToNext()`. Label changes to "Complete" on last step.
+
+- [ ] **Step 4: Create index.ts, write test, run and commit**
+
+Test covers: rendering steps, navigation with prev/next, linear mode preventing skip, onStepChange callback, schema validation, meta fields.
+
+```bash
+cd packages/core && pnpm vitest run tests/components/wizard/
+git add packages/core/src/components/wizard/ packages/core/tests/components/wizard/
+git commit -m "feat(wizard): add Wizard/Stepper with linear/non-linear progression"
+```
+
+---
+
+### Task 8: DataTable Component
+
+**Depends on:** Task 1 (createVirtualizer)
+
+**Files:**
+- Create: `packages/core/src/components/data-table/data-table.props.ts`
+- Create: `packages/core/src/components/data-table/data-table-context.ts`
+- Create: `packages/core/src/components/data-table/data-table-root.tsx`
+- Create: `packages/core/src/components/data-table/data-table-header.tsx`
+- Create: `packages/core/src/components/data-table/data-table-header-cell.tsx`
+- Create: `packages/core/src/components/data-table/data-table-body.tsx`
+- Create: `packages/core/src/components/data-table/data-table-row.tsx`
+- Create: `packages/core/src/components/data-table/data-table-cell.tsx`
+- Create: `packages/core/src/components/data-table/data-table-pagination.tsx`
+- Create: `packages/core/src/components/data-table/index.ts`
+- Create: `packages/core/tests/components/data-table/data-table.test.tsx`
+
+This is the most complex component. It manages columns, sorting, filtering, pagination, and optional row selection.
+
+- [ ] **Step 1: Create data-table.props.ts**
+
+```typescript
+import { z } from "zod/v4";
+import type { Accessor, JSX } from "solid-js";
+import type { ComponentMeta } from "../../meta";
+
+export const DataTableColumnSchema = z.object({
+  id: z.string().describe("Unique column identifier"),
+  header: z.string().describe("Column header display text"),
+  sortable: z.boolean().optional().describe("Whether this column can be sorted"),
+  width: z.number().optional().describe("Fixed column width in pixels"),
+  minWidth: z.number().optional().describe("Minimum column width for resizing"),
+});
+
+export interface DataTableColumn<T = unknown> extends z.infer<typeof DataTableColumnSchema> {
+  cell: (row: T, index: number) => JSX.Element;
+  sortFn?: (a: T, b: T) => number;
+  filterFn?: (row: T, filterValue: string) => boolean;
+}
+
+export const DataTableRootPropsSchema = z.object({
+  pageSize: z.number().optional().describe("Rows per page. Defaults to 10. Set to Infinity for no pagination"),
+  page: z.number().optional().describe("Controlled current page (1-indexed)"),
+  defaultPage: z.number().optional().describe("Initial page (uncontrolled)"),
+  sortColumn: z.string().optional().describe("Controlled sort column ID"),
+  sortDirection: z.enum(["asc", "desc"]).optional().describe("Controlled sort direction"),
+  filter: z.string().optional().describe("Controlled global filter string"),
+  selectable: z.boolean().optional().describe("Whether rows can be selected"),
+  virtualizeRows: z.boolean().optional().describe("Enable virtual scrolling for large datasets"),
+  estimateRowSize: z.number().optional().describe("Estimated row height for virtualization. Defaults to 40"),
+});
+
+export interface DataTableRootProps<T = unknown> extends z.infer<typeof DataTableRootPropsSchema> {
+  data: T[];
+  columns: DataTableColumn<T>[];
+  onPageChange?: (page: number) => void;
+  onSortChange?: (column: string, direction: "asc" | "desc") => void;
+  onFilterChange?: (filter: string) => void;
+  onSelectionChange?: (selectedRows: T[]) => void;
+  children: JSX.Element;
+}
+
+export interface DataTableHeaderProps extends JSX.HTMLAttributes<HTMLTableSectionElement> { children?: JSX.Element; }
+export interface DataTableHeaderCellProps extends JSX.HTMLAttributes<HTMLTableCellElement> { column: string; children?: JSX.Element; }
+export interface DataTableBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> { children?: (row: unknown, index: number) => JSX.Element; }
+export interface DataTableRowProps extends JSX.HTMLAttributes<HTMLTableRowElement> { children?: JSX.Element; }
+export interface DataTableCellProps extends JSX.HTMLAttributes<HTMLTableCellElement> { children?: JSX.Element; }
+export interface DataTablePaginationProps extends JSX.HTMLAttributes<HTMLDivElement> { children?: JSX.Element; }
+
+export const DataTableMeta: ComponentMeta = {
+  name: "DataTable",
+  description: "Feature-rich data table with sorting, filtering, pagination, row selection, and virtual scrolling",
+  parts: ["Root", "Header", "HeaderCell", "Body", "Row", "Cell", "Pagination"] as const,
+  requiredParts: ["Root", "Header", "Body"] as const,
+} as const;
+```
+
+- [ ] **Step 2: Create data-table-context.ts**
+
+Context provides: processed data (sorted + filtered + paginated), column definitions, sort state, page state, filter state, selection state, handlers.
+
+```typescript
+interface DataTableContextValue<T = unknown> {
+  columns: Accessor<DataTableColumn<T>[]>;
+  processedData: Accessor<T[]>;
+  pageData: Accessor<T[]>;
+  totalRows: Accessor<number>;
+  totalPages: Accessor<number>;
+  currentPage: Accessor<number>;
+  pageSize: Accessor<number>;
+  sortColumn: Accessor<string | undefined>;
+  sortDirection: Accessor<"asc" | "desc">;
+  filter: Accessor<string>;
+  selectedRows: Accessor<Set<number>>;
+  toggleSort: (columnId: string) => void;
+  setPage: (page: number) => void;
+  setFilter: (filter: string) => void;
+  toggleRowSelection: (index: number) => void;
+  toggleAllSelection: () => void;
+  isRowSelected: (index: number) => boolean;
+  isAllSelected: Accessor<boolean>;
+}
+```
+
+- [ ] **Step 3: Create root component**
+
+**data-table-root.tsx:** The most complex root in the library. Manages:
+1. **Sorting:** Applies `column.sortFn` or default `localeCompare`/numeric sort
+2. **Filtering:** Applies `column.filterFn` or default string includes
+3. **Pagination:** Slices processed data by page
+4. **Selection:** Tracks selected row indices in a `Set`
+5. **Optional virtualization:** If `virtualizeRows`, uses `createVirtualizer`
+
+Renders `<table>` element with context provider.
+
+- [ ] **Step 4: Create sub-components**
+
+**data-table-header.tsx:** `<thead>` with auto-generated header row from columns if no children.
+
+**data-table-header-cell.tsx:** `<th>` for a column. Shows sort indicator. Calls `toggleSort` on click for sortable columns. `aria-sort`.
+
+**data-table-body.tsx:** `<tbody>` that renders rows. If render prop `children` is provided, maps over `pageData`. Otherwise auto-renders cells from column definitions.
+
+**data-table-row.tsx:** `<tr>` with optional selection checkbox. `data-selected`, `aria-selected`.
+
+**data-table-cell.tsx:** `<td>` wrapper.
+
+**data-table-pagination.tsx:** Pagination controls. Shows page info, prev/next buttons, page size selector.
+
+- [ ] **Step 5: Create index.ts, write test, run and commit**
+
+Test covers: rendering table with columns and data, sorting on header click, filtering, pagination, row selection, schema validation, meta fields.
+
+```bash
+cd packages/core && pnpm vitest run tests/components/data-table/
+git add packages/core/src/components/data-table/ packages/core/tests/components/data-table/
+git commit -m "feat(data-table): add DataTable with sorting, filtering, pagination, and row selection"
+```
+
+---
+
+### Task 9: Add All New Components to Build Config + Full Verification
+
+**Depends on:** All previous tasks
+
+**Files:**
+- Modify: `packages/core/tsdown.config.ts`
+- Modify: `packages/core/package.json`
+
+- [ ] **Step 1: Add components to tsdown.config.ts**
+
+Add to the `components` array:
+```
+"virtual-list", "calendar", "date-picker", "command-palette", "form", "wizard", "data-table"
+```
+
+- [ ] **Step 2: Add exports to package.json**
+
+Add 7 new export entries following the existing pattern:
+```json
+"./virtual-list": { "solid": "...", "import": "...", "require": "..." },
+"./calendar": { ... },
+"./date-picker": { ... },
+"./command-palette": { ... },
+"./form": { ... },
+"./wizard": { ... },
+"./data-table": { ... }
+```
+
+- [ ] **Step 3: Add createVirtualizer to primitives exports (optional)**
+
+If primitives should be importable directly, add to tsdown config:
+```typescript
+entry["primitives/create-virtualizer"] = "src/primitives/create-virtualizer.ts";
+```
+
+- [ ] **Step 4: Run full test suite**
+
+```bash
+cd packages/core && pnpm vitest run
+```
+
+Expected: All tests pass (Phase 1 tests + Phase 2 tests).
+
+- [ ] **Step 5: Run full build**
+
+```bash
+cd packages/core && pnpm build
+```
+
+Expected: Build succeeds with all new component entries.
+
+- [ ] **Step 6: Verify export count**
+
+```bash
+node -e 'console.log(Object.keys(require("./packages/core/package.json").exports).length)'
+```
+
+Expected: 45 (38 from Phase 1 + 7 new).
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add packages/core/tsdown.config.ts packages/core/package.json
+git commit -m "feat: add Phase 2 components to build config — 39 component exports total"
+```
+
+---
+
+## Verification Checklist
+
+After all tasks complete:
+
+| Component | Schema | Meta | Tests | Export |
+|-----------|--------|------|-------|--------|
+| createVirtualizer | N/A | N/A | ✅ | primitive |
+| VirtualList | ✅ | ✅ | ✅ | `./virtual-list` |
+| Calendar | ✅ | ✅ | ✅ | `./calendar` |
+| DatePicker | ✅ | ✅ | ✅ | `./date-picker` |
+| CommandPalette | ✅ | ✅ | ✅ | `./command-palette` |
+| Form | ✅ | ✅ | ✅ | `./form` |
+| Wizard | ✅ | ✅ | ✅ | `./wizard` |
+| DataTable | ✅ | ✅ | ✅ | `./data-table` |