@multiplatform.one/table 7.7.0 → 7.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/table",
-  "version": "7.7.0",
+  "version": "7.7.1",
   "description": "Advanced table components with filtering, pagination, sorting, and URL state management",
   "keywords": [
     "cross-platform",
@@ -80,13 +80,13 @@
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/table-core": "^8.21.3",
     "tamagui": "2.7.6",
-    "@multiplatform.one/components": "7.7.0",
-    "@multiplatform.one/forms": "7.7.0",
-    "@multiplatform.one/platform": "7.7.0",
-    "@multiplatform.one/rich-text": "7.7.0",
-    "@multiplatform.one/router": "7.7.0",
-    "@multiplatform.one/table-primitives": "7.7.0",
-    "@multiplatform.one/theme": "7.7.0"
+    "@multiplatform.one/components": "7.7.1",
+    "@multiplatform.one/forms": "7.7.1",
+    "@multiplatform.one/platform": "7.7.1",
+    "@multiplatform.one/rich-text": "7.7.1",
+    "@multiplatform.one/router": "7.7.1",
+    "@multiplatform.one/table-primitives": "7.7.1",
+    "@multiplatform.one/theme": "7.7.1"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
@@ -98,10 +98,10 @@
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.7.0",
-    "@multiplatform.one/router": "7.7.0",
-    "@multiplatform.one/storybook": "7.7.0",
-    "@multiplatform.one/test-utils": "7.7.0"
+    "@multiplatform.one/config": "7.7.1",
+    "@multiplatform.one/router": "7.7.1",
+    "@multiplatform.one/storybook": "7.7.1",
+    "@multiplatform.one/test-utils": "7.7.1"
   },
   "peerDependencies": {
     "i18next": "^25.0.0",

package/src/components/DataTable/DataTable.spec.tsx

@@ -328,10 +328,11 @@ describe("DataTable", () => {
       expect(screen.getByText("John")).toBeDefined();
       expect(screen.getByText("Jane")).toBeDefined();
 
-      // The forms SearchInput default placeholder is bidi-isolated (LC-58,
-      // FSI…PDI) — match the isolated form, same as the DataTablePagination
-      // range-label assertions.
-      await user.type(screen.getByPlaceholderText("\u2068Search...\u2069"), "Charlie");
+      // DataTableToolbar passes an explicit `placeholder={t("Search")}`, so
+      // the forms SearchInput default (bidi-isolated "Search…") never reaches
+      // this input. Query the stable aria-label instead of a literal
+      // placeholder string.
+      await user.type(screen.getByLabelText("Search table data"), "Charlie");
 
       await waitFor(() => {
         expect(screen.queryByText("John")).toBeNull();
@@ -656,7 +657,10 @@ describe("DataTable", () => {
       );
 
       expect(screen.queryByLabelText("Select all rows")).toBeNull();
-      expect(screen.queryByLabelText(/^Select row/)).toBeNull();
+      // Anchored on the row-name template, not the bare "Select row" prefix:
+      // DataTablePagination's page-size control is labelled "Select rows per
+      // page", which /^Select row/ also matches.
+      expect(screen.queryByLabelText(/^Select row \S/)).toBeNull();
       expect(screen.queryByText(/selected/)).toBeNull();
     });
 
@@ -673,8 +677,10 @@ describe("DataTable", () => {
 
       expect(screen.getByLabelText("Select all rows")).toBeDefined();
       // Row identity is templated into the name (DG-A11Y-06); without an
-      // initialized i18n instance the raw key renders, so match the prefix.
-      expect(screen.getAllByLabelText(/^Select row/).length).toBe(sampleData.length);
+      // initialized i18n instance the raw key renders, so match the prefix —
+      // but require a following token so the pagination page-size control
+      // ("Select rows per page") is not counted as a sixth row.
+      expect(screen.getAllByLabelText(/^Select row \S/).length).toBe(sampleData.length);
     });
 
     it("auto-shows selection toolbar with count and clear after selecting a row", async () => {

package/src/components/DataTable/DataTableCardControls.stories.tsx

@@ -0,0 +1,116 @@
+/**
+ * DataTableCardControls — the sort + filter row above the card list.
+ *
+ * The grid puts sorting and per-column filtering in the column headers. The
+ * card layout has no headers, so this toolbar restores both: a sort menu that
+ * cycles none → asc → desc per sortable column (the same cycle as a header
+ * click) and the compact DataTableFilters chrome. Both drive the same table
+ * state as the grid — there is no parallel state.
+ *
+ * It only exists in `layout="cards"`, which is why these stories pin the
+ * layout instead of relying on the viewport.
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { Paragraph, YStack } from "tamagui";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+const meta: Meta = {
+  title: "Table/DataTableCardControls",
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Sort menu plus filter chrome above the card list, standing in for the grid's " +
+          "column headers. Renders only in the cards layout, and only when sorting or " +
+          "filtering is enabled.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+interface Person {
+  id: number;
+  firstName: string;
+  lastName: string;
+  age: number;
+  email: string;
+}
+
+const people: Person[] = [
+  { id: 1, firstName: "John", lastName: "Doe", age: 28, email: "john@example.com" },
+  { id: 2, firstName: "Jane", lastName: "Smith", age: 32, email: "jane@example.com" },
+  { id: 3, firstName: "Bob", lastName: "Johnson", age: 45, email: "bob@example.com" },
+  { id: 4, firstName: "Alice", lastName: "Williams", age: 22, email: "alice@example.com" },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "lastName", header: "Last Name" },
+  { accessorKey: "age", header: "Age" },
+  { accessorKey: "email", header: "Email" },
+];
+
+function CardTable(props: Record<string, any>) {
+  return (
+    <YStack padding="$4" width="100%" maxWidth={520}>
+      <DataTable
+        data={people}
+        columns={columns}
+        layout="cards"
+        aria-label="People as cards"
+        {...props}
+      />
+    </YStack>
+  );
+}
+
+/** Both affordances: Sort menu on the left, Add Filter chrome beside it. */
+export const Default = {
+  name: "Main",
+  render: () => <CardTable enableSorting enableFiltering />,
+};
+
+/** Sorting only — no filter chrome in the row. */
+export const SortOnly = {
+  render: () => <CardTable enableSorting enableFiltering={false} />,
+};
+
+/** Filtering only — no Sort menu in the row. */
+export const FilterOnly = {
+  render: () => <CardTable enableSorting={false} enableFiltering />,
+};
+
+/**
+ * With a sort already applied the button reads the column and direction
+ * (`Age ↑`) instead of the bare "Sort", so the card list is never sorted
+ * invisibly.
+ */
+export const ActiveSort = {
+  render: () => (
+    <CardTable
+      enableSorting
+      enableFiltering
+      initialState={{ sorting: [{ id: "age", desc: false }] }}
+    />
+  ),
+};
+
+/** UX-011: the whole table disabled renders the controls inert and LC-40 visible. */
+export const Disabled = {
+  render: () => <CardTable enableSorting enableFiltering disabled />,
+};
+
+/** Neither enabled: the toolbar is absent, not an empty bar taking vertical space. */
+export const NoControls = {
+  render: () => (
+    <YStack padding="$4" gap="$2" width="100%" maxWidth={520}>
+      <Paragraph size="$2">Sorting and filtering off — no control row above the cards.</Paragraph>
+      <CardTable enableSorting={false} enableFiltering={false} />
+    </YStack>
+  ),
+};

package/src/components/DataTable/DataTableDocumentList.stories.tsx

@@ -0,0 +1,132 @@
+/**
+ * DataTableDocumentList — subject-led document rows for `layout="list"`.
+ *
+ * This is the desk List view, not a grid and not cards. Each document gets one
+ * horizontal row: checkbox, then a title with its meta stacked underneath in
+ * muted text, then a trailing indicator cluster, then actions. No column
+ * headers, no key-value labels, no card frame, and no wrapping into a column
+ * grid (Polaris Index / Frappe list).
+ *
+ * Slots are assigned by column, not by position: `meta.role` of `title`,
+ * `indicator`, `actions` or `hidden` decides, and status-shaped ids
+ * (status, priority, workflow_state, state) and option-group fields fall into
+ * the indicator cluster on their own.
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+const meta: Meta = {
+  title: "Table/DataTableDocumentList",
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "One row per document: title plus stacked muted meta, a trailing indicator cluster, " +
+          "then actions. Stacked-group radius rounds the first and last rows only.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+interface Task {
+  id: number;
+  title: string;
+  owner: string;
+  due: string;
+  status: string;
+}
+
+const tasks: Task[] = [
+  {
+    id: 1,
+    title: "Ship the card layout",
+    owner: "Ada Lovelace",
+    due: "2026-09-08",
+    status: "Open",
+  },
+  {
+    id: 2,
+    title: "Rewire the filter chips",
+    owner: "Grace Hopper",
+    due: "2026-09-10",
+    status: "In progress",
+  },
+  {
+    id: 3,
+    title: "Retire the legacy grid",
+    owner: "Alan Turing",
+    due: "2026-09-15",
+    status: "Blocked",
+  },
+  {
+    id: 4,
+    title: "Document the slot taxonomy",
+    owner: "Katherine Johnson",
+    due: "2026-09-20",
+    status: "Open",
+  },
+];
+
+/** Roles are explicit: title leads, status is the trailing indicator. */
+const columns: DataTableColumn<Task>[] = [
+  { accessorKey: "title", header: "Title", meta: { role: "title" } },
+  { accessorKey: "owner", header: "Owner" },
+  { accessorKey: "due", header: "Due" },
+  { accessorKey: "status", header: "Status", meta: { role: "indicator" } },
+];
+
+function ListTable(props: Record<string, any>) {
+  return (
+    <YStack padding="$4" width="100%" maxWidth={720}>
+      <DataTable
+        data={tasks}
+        columns={columns}
+        layout="list"
+        aria-label="Tasks as a document list"
+        {...props}
+      />
+    </YStack>
+  );
+}
+
+/** Title leads, owner and due stack beneath it, status rides the right edge. */
+export const Default = {
+  name: "Main",
+  render: () => <ListTable />,
+};
+
+/** Selection puts a checkbox at the head of every row. */
+export const Selection = {
+  render: () => <ListTable enableRowSelection />,
+};
+
+/**
+ * No `meta.role` anywhere: the first non-action column becomes the title and
+ * `status` still lands in the indicator cluster on its id alone.
+ */
+export const InferredSlots = {
+  render: () => (
+    <ListTable
+      columns={[
+        { accessorKey: "title", header: "Title" },
+        { accessorKey: "owner", header: "Owner" },
+        { accessorKey: "status", header: "Status" },
+      ]}
+    />
+  ),
+};
+
+/** No rows and no filters: the list paints "No data available", not blank. */
+export const Empty = {
+  render: () => (
+    <YStack padding="$4" width="100%" maxWidth={720}>
+      <DataTable data={[]} columns={columns} layout="list" aria-label="Empty document list" />
+    </YStack>
+  ),
+};

package/src/components/DataTable/DataTableMobileCards.stories.tsx

@@ -0,0 +1,124 @@
+/**
+ * DataTableMobileCards — the stacked card body for `layout="cards"`.
+ *
+ * Below `$sm` (or forced) a DataTable stops being a grid: each row becomes a
+ * card whose first visible column is the title and whose remaining columns
+ * become label/value rows. Column visibility, order, sorting and filtering all
+ * come from the same table state as the grid — the cells run through the same
+ * renderers inside `TableCellContext`, so fields stay chromeless.
+ *
+ * Selection, row numbers and delete live in the card header beside the title.
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+const meta: Meta = {
+  title: "Table/DataTableMobileCards",
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "One card per row: title in the header, remaining columns as label/value rows. " +
+          "Select-all sits above the stack; per-row select, row number and delete sit in the card header.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+interface Person {
+  id: number;
+  firstName: string;
+  lastName: string;
+  age: number;
+  email: string;
+}
+
+const people: Person[] = [
+  { id: 1, firstName: "John", lastName: "Doe", age: 28, email: "john@example.com" },
+  { id: 2, firstName: "Jane", lastName: "Smith", age: 32, email: "jane@example.com" },
+  { id: 3, firstName: "Bob", lastName: "Johnson", age: 45, email: "bob@example.com" },
+  { id: 4, firstName: "Alice", lastName: "Williams", age: 22, email: "alice@example.com" },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "lastName", header: "Last Name" },
+  { accessorKey: "age", header: "Age" },
+  { accessorKey: "email", header: "Email" },
+];
+
+function CardTable(props: Record<string, any>) {
+  return (
+    <YStack padding="$4" width="100%" maxWidth={480}>
+      <DataTable
+        data={people}
+        columns={columns}
+        layout="cards"
+        aria-label="People as cards"
+        {...props}
+      />
+    </YStack>
+  );
+}
+
+/** Card anatomy: title header, then one label/value row per remaining column. */
+export const Default = {
+  name: "Main",
+  render: () => <CardTable />,
+};
+
+/** Select-all above the stack, a checkbox in every card header. */
+export const Selection = {
+  render: () => <CardTable enableRowSelection />,
+};
+
+function DeletableCards() {
+  const [rows, setRows] = useState(people);
+  return (
+    <YStack padding="$4" width="100%" maxWidth={480}>
+      <DataTable
+        data={rows}
+        columns={columns}
+        layout="cards"
+        showRowNumbers
+        showDeleteRow
+        minRows={1}
+        onDataChange={(next: Person[]) => setRows(next)}
+        aria-label="People as deletable cards"
+      />
+    </YStack>
+  );
+}
+
+/**
+ * Row numbers and the delete affordance share the card header with the title.
+ * The parent owns `data` — the card asks via onDataChange, it does not splice.
+ */
+export const RowChrome = {
+  render: () => <DeletableCards />,
+};
+
+/** A single visible column: the header carries the title and there are no field rows. */
+export const TitleOnly = {
+  render: () => (
+    <CardTable
+      columns={[{ accessorKey: "firstName", header: "First Name" } as DataTableColumn<Person>]}
+    />
+  ),
+};
+
+/** No rows and no filters: the empty state reads "No data available". */
+export const Empty = {
+  render: () => (
+    <YStack padding="$4" width="100%" maxWidth={480}>
+      <DataTable data={[]} columns={columns} layout="cards" aria-label="Empty card list" />
+    </YStack>
+  ),
+};

package/src/components/DataTable/chromeInterplay.spec.tsx

@@ -214,7 +214,10 @@ describe("chrome interplay: Search × injected filters × enableFiltering", () =
         initialState={{ filters: injectedReadyFilter }}
       />,
     );
-    expect(screen.getByText("Add Filter")).toBeInTheDocument();
+    // The control renders its active-filter count in the label text
+    // ("Add Filter (1)"), so an exact getByText no longer matches. The
+    // aria-label is the stable handle, as the sibling arms above use.
+    expect(screen.getByLabelText("Add Filter")).toBeInTheDocument();
     control.unmount();
 
     renderWithProviders(

package/src/components/DataTable/dataTableCardControls.spec.tsx

@@ -0,0 +1,99 @@
+/**
+ * DataTableCardControls specs — the control row's OWN contract.
+ *
+ * cardLayout.spec.tsx already drives the sort menu through the card list and
+ * proves the cycle reorders cards. What nothing pinned is the row itself: that
+ * it is a labelled toolbar, that it disappears entirely when neither affordance
+ * is enabled (rather than rendering an empty bar), that each affordance can be
+ * turned off independently, and that the trigger reports the ACTIVE sort so a
+ * card list is never sorted invisibly.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  age: number;
+  email: string;
+};
+
+const people: Person[] = [
+  { id: 1, firstName: "John", age: 28, email: "john@example.com" },
+  { id: 2, firstName: "Jane", age: 32, email: "jane@example.com" },
+  { id: 3, firstName: "Bob", age: 45, email: "bob@example.com" },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+function renderCards(props: Record<string, any> = {}) {
+  return renderWithProviders(
+    <DataTable data={people} columns={columns} layout="cards" onStateChange={vi.fn()} {...props} />,
+  );
+}
+
+describe("DataTableCardControls", () => {
+  it("is a labelled toolbar above the card list", () => {
+    renderCards({ enableSorting: true, enableFiltering: true });
+    const toolbar = screen.getByRole("toolbar", { name: "Card list controls" });
+    expect(toolbar).toBeTruthy();
+    expect(screen.getByLabelText("Sort rows")).toBeTruthy();
+  });
+
+  it("renders no toolbar at all when neither sorting nor filtering is enabled", () => {
+    renderCards({ enableSorting: false, enableFiltering: false });
+    expect(screen.queryByRole("toolbar", { name: "Card list controls" })).toBeNull();
+  });
+
+  it("sorting only: the sort menu is there, the filter chrome is not", () => {
+    renderCards({ enableSorting: true, enableFiltering: false });
+    expect(screen.getByLabelText("Sort rows")).toBeTruthy();
+    expect(screen.queryByText("Add Filter")).toBeNull();
+  });
+
+  it("filtering only: the filter chrome is there, the sort menu is not", () => {
+    renderCards({ enableSorting: false, enableFiltering: true });
+    expect(screen.queryByLabelText("Sort rows")).toBeNull();
+    expect(screen.getByText("Add Filter")).toBeTruthy();
+  });
+
+  it("with no sort applied the trigger reads the neutral label", () => {
+    renderCards({ enableSorting: true });
+    expect(screen.getByLabelText("Sort rows").textContent).toContain("Sort");
+    expect(screen.getByLabelText("Sort rows").textContent).not.toContain("Age");
+  });
+
+  it("an active ascending sort is named on the trigger, arrow and all", () => {
+    renderCards({ enableSorting: true, initialState: { sorting: [{ id: "age", desc: false }] } });
+    expect(screen.getByLabelText("Sort rows").textContent).toContain("Age ↑");
+  });
+
+  it("an active descending sort flips the arrow on the trigger", () => {
+    renderCards({ enableSorting: true, initialState: { sorting: [{ id: "age", desc: true }] } });
+    expect(screen.getByLabelText("Sort rows").textContent).toContain("Age ↓");
+  });
+
+  it("picking a column from the menu updates the trigger label", async () => {
+    renderCards({ enableSorting: true });
+    fireEvent.click(screen.getByLabelText("Sort rows"));
+    fireEvent.click(await screen.findByLabelText("Sort by Age"));
+    await waitFor(() => {
+      expect(screen.getByLabelText("Sort rows").textContent).toContain("Age ↑");
+    });
+  });
+
+  it("offers one menu entry per sortable column and no more", async () => {
+    renderCards({ enableSorting: true });
+    fireEvent.click(screen.getByLabelText("Sort rows"));
+    expect(await screen.findByLabelText("Sort by First Name")).toBeTruthy();
+    expect(screen.getByLabelText("Sort by Age")).toBeTruthy();
+    expect(screen.queryByLabelText("Sort by Email")).toBeNull();
+  });
+});

package/src/components/DataTable/dataTableDocumentList.spec.tsx

@@ -0,0 +1,143 @@
+/**
+ * DataTableDocumentList specs — the list body's OWN contract.
+ *
+ * cardLayout.spec.tsx proves layout=list picks this body over the grid and the
+ * cards, that the title slot honours meta.role, and that rows are a nowrap flex
+ * list rather than a column grid. What no spec pinned is the SLOT TAXONOMY the
+ * list is built on (documentListSlots.ts): which column lands in the trailing
+ * indicator cluster, which becomes muted meta, which is dropped outright, and
+ * what happens when nothing declares a role at all. Plus the row head
+ * (selection) and the two empty-state copies.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, TableFilter } from "../../types";
+import { DataTable } from "./index";
+
+type Task = {
+  id: number;
+  title: string;
+  owner: string;
+  status: string;
+};
+
+const tasks: Task[] = [
+  { id: 1, title: "Ship the card layout", owner: "Ada", status: "Open" },
+  { id: 2, title: "Rewire the chips", owner: "Grace", status: "Blocked" },
+];
+
+const columns: DataTableColumn<Task>[] = [
+  { accessorKey: "title", header: "Title", meta: { role: "title" } },
+  { accessorKey: "owner", header: "Owner" },
+  { accessorKey: "status", header: "Status", meta: { role: "indicator" } },
+];
+
+function renderList(props: Record<string, any> = {}) {
+  return renderWithProviders(
+    <DataTable data={tasks} columns={columns} layout="list" onStateChange={vi.fn()} {...props} />,
+  );
+}
+
+const slots = (container: HTMLElement, slot: string) =>
+  Array.from(container.querySelectorAll(`[data-list-slot="${slot}"]`)).map((n) => n.textContent);
+
+describe("DataTableDocumentList", () => {
+  it("renders one row per document inside the list container", () => {
+    const { container } = renderList();
+    expect(container.querySelector('[data-testid="data-table-list"]')).not.toBeNull();
+    expect(container.querySelectorAll('[data-testid="data-table-list-row"]').length).toBe(
+      tasks.length,
+    );
+  });
+
+  it("splits a row into title, muted meta and a trailing indicator", () => {
+    const { container } = renderList();
+    expect(slots(container, "title")[0]).toBe("Ship the card layout");
+    expect(slots(container, "meta")).toContain("Ada");
+    expect(slots(container, "indicator")).toContain("Open");
+  });
+
+  it("with no roles declared the first content column leads and status still indicates", () => {
+    const { container } = renderList({
+      columns: [
+        { accessorKey: "title", header: "Title" },
+        { accessorKey: "owner", header: "Owner" },
+        { accessorKey: "status", header: "Status" },
+      ],
+    });
+    expect(slots(container, "title")[0]).toBe("Ship the card layout");
+    expect(slots(container, "meta")).toContain("Ada");
+    // `status` reaches the indicator cluster on its id alone, no meta.role.
+    expect(slots(container, "indicator")).toContain("Open");
+  });
+
+  it("an underscore-prefixed column is an action, never muted meta", () => {
+    const { container } = renderList({
+      columns: [
+        { accessorKey: "title", header: "Title", meta: { role: "title" } },
+        { id: "_liked_by", accessorKey: "owner", header: "♥", meta: { label: "Liked" } },
+      ],
+    });
+    expect(slots(container, "actions")).toContain("Ada");
+    expect(slots(container, "meta")).not.toContain("Ada");
+  });
+
+  it("a hidden-role column is dropped from every slot, not merely styled down", () => {
+    const { container } = renderList({
+      columns: [
+        { accessorKey: "title", header: "Title", meta: { role: "title" } },
+        { accessorKey: "owner", header: "Owner", meta: { role: "hidden" } },
+      ],
+    });
+    expect(slots(container, "title")[0]).toBe("Ship the card layout");
+    expect(slots(container, "meta")).not.toContain("Ada");
+    expect(slots(container, "indicator")).not.toContain("Ada");
+    expect(slots(container, "actions")).not.toContain("Ada");
+  });
+
+  it("a list is not a form: column headers never reprint as row labels", () => {
+    renderList();
+    expect(screen.queryByText("Owner")).toBeNull();
+    expect(screen.queryByText("Status")).toBeNull();
+  });
+
+  it("selection puts a named checkbox at the head of every row", () => {
+    renderList({ enableRowSelection: true });
+    expect(screen.getAllByLabelText(/^Select row /).length).toBe(tasks.length);
+  });
+
+  it("empty with no filters reads 'No data available'", () => {
+    renderWithProviders(
+      <DataTable data={[]} columns={columns} layout="list" onStateChange={vi.fn()} />,
+    );
+    expect(screen.getByText("No data available")).toBeTruthy();
+  });
+
+  it("empty because a filter matched nothing reads 'No results found'", async () => {
+    const noMatch: TableFilter[] = [
+      {
+        id: "flt-owner",
+        columnId: "owner",
+        value: { operator: "contains", value: "zzzz" },
+        label: "Owner",
+      },
+    ];
+    const { container } = renderWithProviders(
+      <DataTable
+        data={tasks}
+        columns={columns}
+        layout="list"
+        enableFiltering
+        filterableFields={[{ id: "owner", label: "Owner", type: "text" }]}
+        initialState={{ filters: noMatch }}
+        onStateChange={vi.fn()}
+      />,
+    );
+    await waitFor(() => {
+      expect(container.querySelectorAll('[data-testid="data-table-list-row"]').length).toBe(0);
+      expect(screen.getByText("No results found")).toBeTruthy();
+    });
+  });
+});

package/src/components/DataTable/dataTableMobileCards.spec.tsx

@@ -0,0 +1,151 @@
+/**
+ * DataTableMobileCards specs — the card body's OWN contract.
+ *
+ * cardLayout.spec.tsx proves the layout switch, the title slot, label/value
+ * rows, column visibility, sorting, search and filtering through the compound
+ * table. What no spec pinned is the card's header chrome and its empty state:
+ * the select-all bar above the stack, the per-card checkbox / row number /
+ * delete cluster beside the title, the delete floor at `minRows`, and the two
+ * distinct empty-state copies (no data vs no results) — plus the rule that an
+ * in-flight refetch paints NO empty state over a momentarily blank body.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, TableFilter } from "../../types";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  age: number;
+};
+
+const people: Person[] = [
+  { id: 1, firstName: "John", lastName: "Doe", age: 28 },
+  { id: 2, firstName: "Jane", lastName: "Smith", age: 32 },
+  { id: 3, firstName: "Bob", lastName: "Johnson", age: 45 },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "lastName", header: "Last Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+function renderCards(props: Record<string, any> = {}) {
+  return renderWithProviders(
+    <DataTable data={people} columns={columns} layout="cards" onStateChange={vi.fn()} {...props} />,
+  );
+}
+
+function cards(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll('[data-testid="data-table-card"]'));
+}
+
+describe("DataTableMobileCards", () => {
+  it("renders one card per row inside the card list container", () => {
+    const { container } = renderCards();
+    expect(container.querySelector('[data-testid="data-table-cards"]')).not.toBeNull();
+    expect(cards(container).length).toBe(people.length);
+  });
+
+  it("the first visible column is the card title, the rest are label/value rows", () => {
+    const { container } = renderCards();
+    const first = cards(container)[0];
+    expect(first.querySelector('[data-card-slot="title"]')?.textContent).toBe("John");
+    expect(first.textContent).toContain("Last Name");
+    expect(first.textContent).toContain("Doe");
+  });
+
+  it("a single visible column gives a title and no field rows", () => {
+    const { container } = renderCards({
+      columns: [{ accessorKey: "firstName", header: "First Name" }],
+    });
+    const first = cards(container)[0];
+    expect(first.querySelector('[data-card-slot="title"]')?.textContent).toBe("John");
+    expect(first.textContent).not.toContain("Last Name");
+  });
+
+  it("selection adds a select-all bar above the stack and a checkbox per card", () => {
+    const { container } = renderCards({ enableRowSelection: true });
+    expect(screen.getByLabelText("Select all rows")).toBeTruthy();
+    expect(screen.getAllByLabelText(/^Select row /).length).toBe(people.length);
+    expect(cards(container).length).toBe(people.length);
+  });
+
+  it("without selection there is no select-all bar", () => {
+    renderCards();
+    expect(screen.queryByLabelText("Select all rows")).toBeNull();
+  });
+
+  it("select-all checks every card's checkbox", async () => {
+    renderCards({ enableRowSelection: true });
+    fireEvent.click(screen.getByLabelText("Select all rows"));
+    await waitFor(() => {
+      const boxes = screen.getAllByLabelText(/^Select row /);
+      for (const box of boxes) expect(box.getAttribute("aria-checked")).toBe("true");
+    });
+  });
+
+  it("row numbers print in the card header, one-based", () => {
+    const { container } = renderCards({ showRowNumbers: true });
+    expect(cards(container)[0].textContent).toContain("#1");
+    expect(cards(container)[2].textContent).toContain("#3");
+  });
+
+  it("delete is offered per card and reports the row removal to the owner", () => {
+    const onDataChange = vi.fn();
+    renderCards({ showDeleteRow: true, minRows: 1, onDataChange });
+    const deletes = screen.getAllByLabelText(/Delete row/i);
+    expect(deletes.length).toBe(people.length);
+    fireEvent.click(deletes[0]);
+    // The parent owns `data`; the card list asks, it does not splice.
+    expect(onDataChange).toHaveBeenCalledTimes(1);
+    expect(onDataChange.mock.calls[0][0]).toEqual(people.slice(1));
+  });
+
+  it("delete goes inert at the minRows floor rather than emptying the list", () => {
+    const onDataChange = vi.fn();
+    renderCards({ showDeleteRow: true, minRows: people.length, onDataChange });
+    const deletes = screen.getAllByLabelText(/Delete row/i);
+    expect(deletes.length).toBe(people.length);
+    fireEvent.click(deletes[0]);
+    expect(onDataChange).not.toHaveBeenCalled();
+  });
+
+  it("empty with no filters reads 'No data available'", () => {
+    renderWithProviders(
+      <DataTable data={[]} columns={columns} layout="cards" onStateChange={vi.fn()} />,
+    );
+    expect(screen.getByText("No data available")).toBeTruthy();
+  });
+
+  it("empty because a filter matched nothing reads 'No results found'", async () => {
+    const noMatch: TableFilter[] = [
+      {
+        id: "flt-first",
+        columnId: "firstName",
+        value: { operator: "contains", value: "zzzz" },
+        label: "First Name",
+      },
+    ];
+    const { container } = renderWithProviders(
+      <DataTable
+        data={people}
+        columns={columns}
+        layout="cards"
+        enableFiltering
+        filterableFields={[{ id: "firstName", label: "First Name", type: "text" }]}
+        initialState={{ filters: noMatch }}
+        onStateChange={vi.fn()}
+      />,
+    );
+    await waitFor(() => {
+      expect(cards(container).length).toBe(0);
+      expect(screen.getByText("No results found")).toBeTruthy();
+    });
+  });
+});

package/src/components/DataTableCell/CellOptionsEditor.stories.tsx

@@ -0,0 +1,139 @@
+/**
+ * CellOptionsEditor — the popover/sheet host for option groups too big for a
+ * cell (UX-022 / LC-06 OVERSIZED-EDIT).
+ *
+ * A radio group rendered inline in a narrow column has options the user cannot
+ * reach: the cell's overflow guard clips them. So the cell face becomes a
+ * compact FieldDisplay trigger showing the current option label, and the full
+ * list opens in a forms FloatingPanel — an anchored popover with collision
+ * handling on desktop web, a bottom sheet on native and small viewports —
+ * seeded at the cell's current value (Axiom 11).
+ *
+ * Two classes. COMMIT (`dismissOnPick`, the default) closes on a pick,
+ * including re-picking the value already selected. COMPOSE (multi-select
+ * toggles) stays open until Escape or an outside click, so several options can
+ * be composed in one visit.
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { RadioGroup, ToggleGroup } from "@multiplatform.one/forms";
+import { useState } from "react";
+import { Paragraph, View, YStack } from "tamagui";
+import { CellOptionsEditor } from "./CellOptionsEditor";
+
+const meta: Meta<typeof CellOptionsEditor> = {
+  title: "Table/CellOptionsEditor",
+  component: CellOptionsEditor,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Compact cell face plus a FloatingPanel holding the full option list. " +
+          "COMMIT groups close on a pick; COMPOSE groups stay open.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const priorities = [
+  { label: "Urgent", value: "urgent" },
+  { label: "High", value: "high" },
+  { label: "Medium", value: "medium" },
+  { label: "Low", value: "low" },
+];
+
+const labels = [
+  { label: "Bug", value: "bug" },
+  { label: "Design", value: "design" },
+  { label: "Infra", value: "infra" },
+];
+
+/** A narrow frame, so the reason the panel exists is visible: the cell clips. */
+function CellFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <View width={180} borderWidth={1} borderColor="$color6" borderRadius="$2" overflow="hidden">
+      {children}
+    </View>
+  );
+}
+
+function CommitCell() {
+  const [value, setValue] = useState("high");
+  return (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <Paragraph size="$2">COMMIT: picking is the exit. Panel closes on any pick.</Paragraph>
+      <CellFrame>
+        <CellOptionsEditor field="radiogroup" value={value} label="Priority">
+          {(close) => (
+            <RadioGroup
+              value={value}
+              onValueChange={(next: string) => {
+                setValue(next);
+                close();
+              }}
+              options={priorities}
+              orientation="vertical"
+            />
+          )}
+        </CellOptionsEditor>
+      </CellFrame>
+      <Paragraph size="$2" testID="committed-value">{`value: ${value}`}</Paragraph>
+    </YStack>
+  );
+}
+
+export const Default = {
+  name: "Main",
+  render: () => <CommitCell />,
+};
+
+function ComposeCell() {
+  const [value, setValue] = useState<string[]>(["bug"]);
+  return (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <Paragraph size="$2">
+        COMPOSE: multi-select stays open so several options land in one visit.
+      </Paragraph>
+      <CellFrame>
+        <CellOptionsEditor field="togglegroup" value={value} label="Labels" dismissOnPick={false}>
+          {() => (
+            <ToggleGroup
+              value={value}
+              onValueChange={(next: string | string[]) =>
+                setValue(Array.isArray(next) ? next : [next])
+              }
+              options={labels}
+              type="multiple"
+              orientation="vertical"
+            />
+          )}
+        </CellOptionsEditor>
+      </CellFrame>
+      <Paragraph size="$2" testID="committed-value">{`value: ${value.join(", ")}`}</Paragraph>
+    </YStack>
+  );
+}
+
+/** COMPOSE class: `dismissOnPick={false}` keeps the panel open across picks. */
+export const Compose = {
+  render: () => <ComposeCell />,
+};
+
+/**
+ * Disabled: the face renders alone at reduced opacity, with no button role and
+ * no panel — a disabled cell is not a keyboard stop.
+ */
+export const Disabled = {
+  render: () => (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <CellFrame>
+        <CellOptionsEditor field="radiogroup" value="medium" label="Priority" disabled>
+          {() => <RadioGroup value="medium" options={priorities} orientation="vertical" />}
+        </CellOptionsEditor>
+      </CellFrame>
+    </YStack>
+  ),
+};

package/src/components/DataTableCell/cellOptionsEditor.spec.tsx

@@ -0,0 +1,127 @@
+/**
+ * CellOptionsEditor specs — the popover host's OWN contract (UX-022 / LC-06).
+ *
+ * dataTableCell.spec.tsx drives this host through DataTableCell with a faked
+ * FloatingPanel, so it proves the CELL wires it up. Nothing pinned the host
+ * itself: that a disabled editor collapses to a bare face with no trigger and
+ * no keyboard stop, that the face is chromeless on focus because the ring
+ * belongs to the parent cell (LC-71), that the panel body leaves table-cell
+ * context so option groups get their full chrome back, and that `close` is
+ * handed to the children so a COMMIT-class pick can dismiss.
+ *
+ * The panel is faked the same way the sibling cell spec fakes it: content only
+ * while open, trigger toggles.
+ */
+
+import React from "react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/forms")>()),
+  FieldDisplay: (props: { field?: string; value?: unknown }) =>
+    React.createElement(
+      "div",
+      { "data-testid": "mock-FieldDisplay", "data-field": props.field },
+      String(props.value ?? ""),
+    ),
+  FloatingPanel: ({ open, onOpenChange, trigger, children }: any) =>
+    React.createElement(
+      "div",
+      { "data-testid": "mock-FloatingPanel" },
+      React.createElement(
+        "div",
+        { "data-testid": "floating-panel-trigger", onClick: () => onOpenChange?.(!open) },
+        trigger,
+      ),
+      open
+        ? React.createElement("div", { "data-testid": "floating-panel-content" }, children)
+        : null,
+    ),
+}));
+
+vi.mock("@multiplatform.one/table-primitives", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/table-primitives")>();
+  return {
+    ...actual,
+    TableCellContext: {
+      ...actual.TableCellContext,
+      Provider: ({ value, children }: any) =>
+        React.createElement(
+          "div",
+          { "data-testid": "cell-context", "data-in-table-cell": String(value?.inTableCell) },
+          children,
+        ),
+    },
+  };
+});
+
+import { CellOptionsEditor } from "./CellOptionsEditor";
+
+function renderEditor(props: Record<string, any> = {}, body?: (close: () => void) => any) {
+  return renderWithProviders(
+    <CellOptionsEditor field="radiogroup" value="high" label="Priority" {...props}>
+      {body ??
+        ((close) => (
+          <button type="button" data-testid="pick" onClick={() => close()}>
+            pick
+          </button>
+        ))}
+    </CellOptionsEditor>,
+  );
+}
+
+describe("CellOptionsEditor", () => {
+  it("renders the current value as a compact face, panel closed", () => {
+    renderEditor();
+    expect(screen.getByTestId("mock-FieldDisplay").textContent).toBe("high");
+    expect(screen.queryByTestId("floating-panel-content")).toBeNull();
+  });
+
+  it("the face is a named, focusable button that reports its expanded state", () => {
+    const { container } = renderEditor();
+    const face = container.querySelector('[role="button"]') as HTMLElement;
+    expect(face).not.toBeNull();
+    expect(face.getAttribute("aria-label")).toBe("Priority");
+    expect(face.getAttribute("aria-expanded")).toBe("false");
+    expect(face.getAttribute("tabindex")).toBe("0");
+  });
+
+  it("opening the panel flips aria-expanded and mounts the option group", () => {
+    const { container } = renderEditor();
+    fireEvent.click(screen.getByTestId("floating-panel-trigger"));
+    expect(screen.getByTestId("floating-panel-content")).toBeTruthy();
+    expect(
+      (container.querySelector('[role="button"]') as HTMLElement).getAttribute("aria-expanded"),
+    ).toBe("true");
+  });
+
+  it("hands `close` to the children so a COMMIT pick can dismiss the panel", () => {
+    renderEditor();
+    fireEvent.click(screen.getByTestId("floating-panel-trigger"));
+    fireEvent.click(screen.getByTestId("pick"));
+    expect(screen.queryByTestId("floating-panel-content")).toBeNull();
+  });
+
+  it("the panel body leaves table-cell context so options get full chrome back", () => {
+    renderEditor();
+    fireEvent.click(screen.getByTestId("floating-panel-trigger"));
+    const ctx = screen.getByTestId("cell-context");
+    expect(ctx.getAttribute("data-in-table-cell")).toBe("false");
+  });
+
+  it("disabled collapses to a bare face: no panel host, no button role, no tab stop", () => {
+    const { container } = renderEditor({ disabled: true });
+    expect(screen.getByTestId("mock-FieldDisplay").textContent).toBe("high");
+    expect(screen.queryByTestId("mock-FloatingPanel")).toBeNull();
+    expect(container.querySelector('[role="button"]')).toBeNull();
+    expect(container.querySelector("[tabindex]")).toBeNull();
+  });
+
+  it("the face paints no ring of its own — the parent cell owns the one ring (LC-71)", () => {
+    const { container } = renderEditor();
+    const face = container.querySelector('[role="button"]') as HTMLElement;
+    expect(face.style.outlineWidth === "" || face.style.outlineWidth === "0px").toBe(true);
+  });
+});

package/src/components/DataTableExport/DataTableExport.spec.tsx

@@ -55,12 +55,17 @@ const mockColumns = [
 const mockCreateObjectURL = vi.fn(() => "mock-url");
 const mockRevokeObjectURL = vi.fn();
 
+// configurable: true is load-bearing — the "Blob URLs are unavailable" case
+// below redefines createObjectURL, and defineProperty defaults configurable to
+// false, which made that redefine throw "Cannot redefine property".
 Object.defineProperty(window.URL, "createObjectURL", {
+  configurable: true,
   writable: true,
   value: mockCreateObjectURL,
 });
 
 Object.defineProperty(window.URL, "revokeObjectURL", {
+  configurable: true,
   writable: true,
   value: mockRevokeObjectURL,
 });

package/src/components/DataTableFilterChips/FilterChip.spec.tsx

@@ -0,0 +1,77 @@
+/**
+ * FilterChip unit specs — the pill on its own, no DataTable around it.
+ *
+ * DataTableFilterChips.spec.tsx drives the chip through the compound table and
+ * proves the bar's behaviour. This file pins the chip's OWN contract, which the
+ * bar cannot state: the `onPress`/no-`onPress` split (an editable chip is a
+ * button, a display-only chip is not), that dismiss does not also fire the edit
+ * press, and that Enter/Space activate both focusables.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FilterChip } from "./FilterChip";
+
+describe("FilterChip", () => {
+  it("renders the label and a dismiss button", () => {
+    renderWithProviders(<FilterChip label="Email: contains corp" onRemove={vi.fn()} />);
+    expect(screen.getByText("Email: contains corp")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Remove" })).toBeTruthy();
+  });
+
+  it("with onPress the pill is an edit button; both focusables are tab stops (LC-71)", () => {
+    renderWithProviders(
+      <FilterChip label="Email: contains corp" onPress={vi.fn()} onRemove={vi.fn()} />,
+    );
+    const edit = screen.getByRole("button", { name: "Edit filter Email: contains corp" });
+    const remove = screen.getByRole("button", { name: "Remove" });
+    expect(edit.getAttribute("tabindex")).toBe("0");
+    expect(remove.getAttribute("tabindex")).toBe("0");
+    expect(remove.className).toMatch(/mp-chip-dismiss/);
+  });
+
+  it("without onPress the pill is display-only: no edit button, dismiss still works", () => {
+    const onRemove = vi.fn();
+    renderWithProviders(<FilterChip label="Department: is Engineering" onRemove={onRemove} />);
+    expect(screen.queryByRole("button", { name: /Edit filter/ })).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Remove" }));
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it("pressing the pill edits and does not remove", () => {
+    const onPress = vi.fn();
+    const onRemove = vi.fn();
+    renderWithProviders(<FilterChip label="Age: gt 30" onPress={onPress} onRemove={onRemove} />);
+    fireEvent.click(screen.getByRole("button", { name: "Edit filter Age: gt 30" }));
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onRemove).not.toHaveBeenCalled();
+  });
+
+  it("pressing dismiss removes without also firing the chip's edit press", () => {
+    const onPress = vi.fn();
+    const onRemove = vi.fn();
+    renderWithProviders(<FilterChip label="Age: gt 30" onPress={onPress} onRemove={onRemove} />);
+    fireEvent.click(screen.getByRole("button", { name: "Remove" }));
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it("Enter and Space activate the edit press", () => {
+    const onPress = vi.fn();
+    renderWithProviders(<FilterChip label="Age: gt 30" onPress={onPress} onRemove={vi.fn()} />);
+    const edit = screen.getByRole("button", { name: "Edit filter Age: gt 30" });
+    fireEvent.keyDown(edit, { key: "Enter" });
+    fireEvent.keyDown(edit, { key: " " });
+    expect(onPress).toHaveBeenCalledTimes(2);
+  });
+
+  it("Enter on the dismiss glyph removes and does not bubble into the edit press", () => {
+    const onPress = vi.fn();
+    const onRemove = vi.fn();
+    renderWithProviders(<FilterChip label="Age: gt 30" onPress={onPress} onRemove={onRemove} />);
+    fireEvent.keyDown(screen.getByRole("button", { name: "Remove" }), { key: "Enter" });
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});

package/src/components/DataTableFilterChips/FilterChip.stories.tsx

@@ -0,0 +1,111 @@
+/**
+ * FilterChip — one active filter as a pill, standalone.
+ *
+ * DataTableFilterChips stories show the bar; this file shows the unit the bar
+ * is made of, with no table around it. Two focusables, two rings (LC-71):
+ * pressing the pill reopens the editor and rings the pill, pressing the X
+ * removes the filter and rings the glyph, never the 44px hit box. A chip with
+ * no `onPress` is display-only — no button role, no pill ring, dismiss still
+ * works.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import type { Meta } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Paragraph, XStack, YStack } from "tamagui";
+import { FilterChip } from "./FilterChip";
+
+const meta: Meta<typeof FilterChip> = {
+  title: "Table/FilterChip",
+  component: FilterChip,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "One active filter as a removable pill. Gray fill, label, dismiss glyph. " +
+          "Editable chips take a button role and a focus ring; display-only chips take neither.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+/** Editable: the pill is a button (edit) and the X is a second button (remove). */
+export const Default = {
+  name: "Main",
+  render: () => (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <FilterChip
+        label="Email contains corp"
+        onPress={action("press")}
+        onRemove={action("remove")}
+      />
+    </YStack>
+  ),
+};
+
+/** Without `onPress` the chip is display-only: no button role on the pill. */
+export const DisplayOnly = {
+  render: () => (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <FilterChip label="Department is Engineering" onRemove={action("remove")} />
+    </YStack>
+  ),
+};
+
+/** A row of siblings, as the chips bar renders them. Long labels do not truncate. */
+export const Row = {
+  render: () => (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <XStack gap="$2" flexWrap="wrap">
+        <FilterChip
+          label="Email contains corp"
+          onPress={action("press")}
+          onRemove={action("remove")}
+        />
+        <FilterChip
+          label="Department is Engineering"
+          onPress={action("press")}
+          onRemove={action("remove")}
+        />
+        <FilterChip
+          label="Age is greater than 30"
+          onPress={action("press")}
+          onRemove={action("remove")}
+        />
+      </XStack>
+    </YStack>
+  ),
+};
+
+function RemovableRow() {
+  const [labels, setLabels] = useState([
+    "Email contains corp",
+    "Department is Engineering",
+    "Age is greater than 30",
+  ]);
+  return (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <XStack gap="$2" flexWrap="wrap">
+        {labels.map((label) => (
+          <FilterChip
+            key={label}
+            label={label}
+            onPress={action("press")}
+            onRemove={() => setLabels((current) => current.filter((item) => item !== label))}
+          />
+        ))}
+      </XStack>
+      <Paragraph size="$2" testID="chip-count">
+        {`${labels.length} active`}
+      </Paragraph>
+    </YStack>
+  );
+}
+
+/** Dismiss actually removes: press an X and the count drops. */
+export const Removable = {
+  render: () => <RemovableRow />,
+};