@multiplatform.one/table 7.6.2 → 7.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/table",
-  "version": "7.6.2",
+  "version": "7.7.0",
   "description": "Advanced table components with filtering, pagination, sorting, and URL state management",
   "keywords": [
     "cross-platform",
@@ -80,18 +80,17 @@
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/table-core": "^8.21.3",
     "tamagui": "2.7.6",
-    "@multiplatform.one/components": "7.6.2",
-    "@multiplatform.one/platform": "7.6.2",
-    "@multiplatform.one/forms": "7.6.2",
-    "@multiplatform.one/rich-text": "7.6.2",
-    "@multiplatform.one/router": "7.6.2",
-    "@multiplatform.one/table-primitives": "7.6.2",
-    "@multiplatform.one/theme": "7.6.2"
+    "@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"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "~19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.5",
@@ -99,10 +98,10 @@
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.6.2",
-    "@multiplatform.one/router": "7.6.2",
-    "@multiplatform.one/storybook": "7.6.2",
-    "@multiplatform.one/test-utils": "7.6.2"
+    "@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"
   },
   "peerDependencies": {
     "i18next": "^25.0.0",

package/src/components/ChildTable/ChildTable.stories.tsx

@@ -30,7 +30,10 @@ const columns: DataTableColumn<LineItem>[] = [
   { accessorKey: "qty", header: "Qty", field: "stepper", fieldProps: { min: 0 } },
 ];
 
-const meta: Meta<typeof ChildTable> = {
+// Instantiation expression: `Meta<typeof ChildTable>` resolves ChildTable's
+// TRow to its default (DataTableData), so `args.columns` typed as
+// DataTableColumn<DataTableData>[] and rejected the LineItem columns below.
+const meta: Meta<typeof ChildTable<LineItem>> = {
   title: "Table/ChildTable",
   component: ChildTable,
   parameters: {

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

@@ -0,0 +1,69 @@
+/**
+ * DataTableVirtualized is an internal body renderer. The public surface is
+ * DataTable with enableVirtualization — mounting the helper bare crashed
+ * playground SSR on virtualItems.map. This catalog row is that mode, not
+ * the helper's prop dump.
+ */
+
+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/DataTableVirtualized",
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Virtual-scroll body for large row sets. Enable it on DataTable; do not mount " +
+          "DataTableVirtualized as a standalone component.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+interface Employee {
+  id: number;
+  name: string;
+  email: string;
+  department: string;
+  salary: number;
+}
+
+const departments = ["Engineering", "Marketing", "Sales", "Design", "Support"];
+
+const rows: Employee[] = Array.from({ length: 200 }, (_, i) => ({
+  id: i + 1,
+  name: `Employee ${i + 1}`,
+  email: `emp${i + 1}@example.com`,
+  department: departments[i % departments.length],
+  salary: 50000 + (i % 80) * 1000,
+}));
+
+const columns: DataTableColumn<Employee>[] = [
+  { accessorKey: "id", header: "ID" },
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "email", header: "Email" },
+  { accessorKey: "department", header: "Department" },
+  { accessorKey: "salary", header: "Salary" },
+];
+
+export const Default = {
+  name: "Main",
+  render: () => (
+    <YStack padding="$4" height={360}>
+      <DataTable
+        data={rows}
+        columns={columns}
+        enableVirtualization
+        virtualizationHeight={320}
+        enableGlobalSearch
+        aria-label="Virtualized employees"
+      />
+    </YStack>
+  ),
+};

package/src/components/DataTableFilterButton/DataTableFilterButton.spec.tsx

@@ -0,0 +1,128 @@
+/**
+ * DataTableFilterButton spec (MPO-113). The button owns the toolbar Filter
+ * surface: trigger, searchable field list, live-commit into the shared
+ * operator/value editor. Chip rendering belongs to DataTableFilterChips.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { DataTableColumn, FilterableField, TableFilter } from "../../types";
+import { DataTable } from "../DataTable";
+
+type Person = {
+  id: number;
+  firstName: string;
+  age: number;
+  email: string;
+  department: string;
+};
+
+const data: Person[] = [
+  { id: 1, firstName: "Ada", age: 36, email: "ada@corp.com", department: "Engineering" },
+  { id: 2, firstName: "Grace", age: 45, email: "grace@corp.com", department: "Engineering" },
+  { id: 3, firstName: "Alan", age: 41, email: "alan@other.org", department: "Marketing" },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+const filterableFields: FilterableField[] = [
+  { id: "email", label: "Email", type: "text" },
+  {
+    id: "department",
+    label: "Department",
+    type: "select",
+    options: [
+      { label: "Engineering", value: "Engineering" },
+      { label: "Marketing", value: "Marketing" },
+    ],
+  },
+];
+
+function emailFilter(value: string): TableFilter {
+  return {
+    id: "flt-email",
+    columnId: "email",
+    value: { operator: "contains", value },
+    label: "Email",
+  };
+}
+
+function renderTable(initialFilters: TableFilter[] = []) {
+  return renderWithProviders(
+    <DataTable
+      data={data}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      filterableFields={filterableFields}
+      enableFiltering
+      enableGlobalSearch
+      initialState={{ filters: initialFilters }}
+      aria-label="People table"
+    />,
+  );
+}
+
+describe("DataTableFilterButton", () => {
+  it("renders the toolbar Filter affordance when filterableFields exist", async () => {
+    renderTable([]);
+    expect(await screen.findByRole("button", { name: "Filter" })).toBeTruthy();
+  });
+
+  it("shows the active filter count on the trigger", async () => {
+    renderTable([emailFilter("corp")]);
+    expect(await screen.findByText("Filter (1)")).toBeTruthy();
+  });
+
+  it("field list is a single-tab-stop listbox (LC-49 / LC-71)", async () => {
+    renderTable([]);
+    fireEvent.click(await screen.findByRole("button", { name: "Filter" }));
+    const listbox = await screen.findByRole("listbox", { name: "Filterable fields" });
+    expect(listbox.getAttribute("tabindex")).toBe("0");
+    const options = screen.getAllByRole("option");
+    expect(options.length).toBeGreaterThan(0);
+    for (const option of options) {
+      expect(option.getAttribute("tabindex")).toBe("-1");
+    }
+  });
+
+  it("opens a searchable field list with visible columns grouped before hidden fields", async () => {
+    renderTable([]);
+
+    fireEvent.click(await screen.findByRole("button", { name: "Filter" }));
+
+    expect(await screen.findByText("Columns")).toBeTruthy();
+    expect(screen.getByText("More fields")).toBeTruthy();
+
+    expect(screen.getByText("Email")).toBeTruthy();
+    expect(screen.getByText("Department")).toBeTruthy();
+
+    const search = screen.getByPlaceholderText("Search fields...");
+    fireEvent.change(search, { target: { value: "dep" } });
+    await waitFor(() => {
+      expect(screen.queryByText("Email")).toBeNull();
+      expect(screen.getByText("Department")).toBeTruthy();
+    });
+  });
+
+  it("live-commits a hidden-field filter (no Apply button)", async () => {
+    renderTable([]);
+
+    fireEvent.click(await screen.findByRole("button", { name: "Filter" }));
+    fireEvent.click(await screen.findByText("Email"));
+
+    expect(await screen.findByText("Condition")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Apply" })).toBeNull();
+
+    const valueInput = await screen.findByPlaceholderText("Enter value...");
+    fireEvent.change(valueInput, { target: { value: "other" } });
+
+    await waitFor(() => {
+      expect(screen.getByText("Email: contains other")).toBeTruthy();
+      expect(screen.getByText("Alan")).toBeTruthy();
+      expect(screen.queryByText("Ada")).toBeNull();
+    });
+  });
+});

package/src/components/DataTableFilterButton/DataTableFilterButton.stories.tsx

@@ -0,0 +1,99 @@
+/**
+ * DataTableFilterButton — toolbar Filter affordance. It reads
+ * DataTableStateContext, so these stories mount it the way the toolbar does:
+ * inside DataTable with filterableFields. Stage 1 is the searchable field
+ * list (visible columns first, then More fields). Stage 2 is the shared
+ * operator/value editor (MPO-101). Commit is live (LC-21).
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import type { DataTableColumn, FilterableField, TableFilter } from "../../types";
+import { DataTable } from "../DataTable";
+
+const meta: Meta = {
+  title: "Table/DataTableFilterButton",
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Toolbar Filter control for any field, including hidden ones. Opens a " +
+          "FloatingPanel with a searchable field list, then the shared operator/value editor.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+interface Person {
+  id: number;
+  firstName: string;
+  age: number;
+  email: string;
+  department: string;
+}
+
+const people: Person[] = [
+  { id: 1, firstName: "Ada", age: 36, email: "ada@corp.com", department: "Engineering" },
+  { id: 2, firstName: "Grace", age: 45, email: "grace@corp.com", department: "Engineering" },
+  { id: 3, firstName: "Alan", age: 41, email: "alan@other.org", department: "Marketing" },
+  { id: 4, firstName: "Katherine", age: 29, email: "kate@corp.com", department: "Design" },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+const filterableFields: FilterableField[] = [
+  { id: "firstName", label: "First Name", type: "text" },
+  { id: "age", label: "Age", type: "number" },
+  { id: "email", label: "Email", type: "text" },
+  {
+    id: "department",
+    label: "Department",
+    type: "select",
+    options: [
+      { label: "Engineering", value: "Engineering" },
+      { label: "Marketing", value: "Marketing" },
+      { label: "Design", value: "Design" },
+    ],
+  },
+];
+
+function emailContains(value: string): TableFilter {
+  return {
+    id: "flt-email",
+    columnId: "email",
+    value: { operator: "contains", value },
+    label: "Email",
+  };
+}
+
+function FilterTable({ initialFilters = [] }: { initialFilters?: TableFilter[] }) {
+  return (
+    <YStack padding="$4" width="100%">
+      <DataTable
+        data={people}
+        columns={columns}
+        filterableFields={filterableFields}
+        enableFiltering
+        enableGlobalSearch
+        initialState={{ filters: initialFilters }}
+        aria-label="People with toolbar filter"
+      />
+    </YStack>
+  );
+}
+
+export const Default = {
+  name: "Main",
+  render: () => <FilterTable />,
+};
+
+/** Active filters turn the trigger accent and stamp the count (Filter (N)). */
+export const ActiveCount = {
+  render: () => <FilterTable initialFilters={[emailContains("corp")]} />,
+};

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

@@ -1,12 +1,11 @@
 /**
- * Hidden-field filtering surface: chips bar + toolbar filter button,
- * integration-tested through the compound DataTable (context wiring,
- * client-side pre-filter, live state).
+ * Hidden-field filtering surface: chips bar, integration-tested through
+ * the compound DataTable (context wiring, client-side pre-filter, live
+ * state). The toolbar Filter button lives in DataTableFilterButton.spec.tsx.
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import type { DataTableColumn, FilterableField, TableFilter } from "../../types";
 import { DataTable } from "../DataTable";
@@ -91,14 +90,13 @@ describe("DataTableFilterChips", () => {
   });
 
   it("removing the chip restores the rows", async () => {
-    const user = userEvent.setup();
     renderTable([emailFilter("corp")]);
 
     expect(await screen.findByText("Email: contains corp")).toBeTruthy();
     expect(screen.queryByText("Alan")).toBeNull();
 
     const removeButtons = screen.getAllByRole("button", { name: "Remove" });
-    await user.click(removeButtons[0]);
+    fireEvent.click(removeButtons[0]);
 
     await waitFor(() => {
       expect(screen.queryByText("Email: contains corp")).toBeNull();
@@ -107,7 +105,6 @@ describe("DataTableFilterChips", () => {
   });
 
   it("shows Clear all at 2+ chips and clears every filter at once", async () => {
-    const user = userEvent.setup();
     renderTable([emailFilter("corp"), departmentFilter("Engineering")]);
 
     expect(await screen.findByText("Email: contains corp")).toBeTruthy();
@@ -115,7 +112,7 @@ describe("DataTableFilterChips", () => {
     expect(screen.getByText("Department: is Engineering")).toBeTruthy();
 
     const clearAll = screen.getByRole("button", { name: "Clear all" });
-    await user.click(clearAll);
+    fireEvent.click(clearAll);
 
     await waitFor(() => {
       expect(screen.queryByText("Email: contains corp")).toBeNull();
@@ -138,75 +135,3 @@ describe("DataTableFilterChips", () => {
     expect(remove.className).toMatch(/mp-chip-dismiss/);
   });
 });
-
-describe("DataTableFilterButton", () => {
-  it("renders the toolbar Filter affordance when filterableFields exist", async () => {
-    renderTable([]);
-    expect(await screen.findByRole("button", { name: "Filter" })).toBeTruthy();
-  });
-
-  it("shows the active filter count on the trigger", async () => {
-    renderTable([emailFilter("corp")]);
-    expect(await screen.findByText("Filter (1)")).toBeTruthy();
-  });
-
-  it("field list is a single-tab-stop listbox (LC-49 / LC-71)", async () => {
-    const user = userEvent.setup();
-    renderTable([]);
-    await user.click(await screen.findByRole("button", { name: "Filter" }));
-    const listbox = await screen.findByRole("listbox", { name: "Filterable fields" });
-    expect(listbox.getAttribute("tabindex")).toBe("0");
-    const options = screen.getAllByRole("option");
-    expect(options.length).toBeGreaterThan(0);
-    for (const option of options) {
-      expect(option.getAttribute("tabindex")).toBe("-1");
-    }
-  });
-
-  it("opens a searchable field list with visible columns grouped before hidden fields", async () => {
-    const user = userEvent.setup();
-    renderTable([]);
-
-    const trigger = await screen.findByRole("button", { name: "Filter" });
-    await user.click(trigger);
-
-    // Group headers
-    expect(await screen.findByText("Columns")).toBeTruthy();
-    expect(screen.getByText("More fields")).toBeTruthy();
-
-    // Hidden fields listed
-    expect(screen.getByText("Email")).toBeTruthy();
-    expect(screen.getByText("Department")).toBeTruthy();
-
-    // Search narrows the list
-    const search = screen.getByPlaceholderText("Search fields...");
-    await user.type(search, "dep");
-    await waitFor(() => {
-      expect(screen.queryByText("Email")).toBeNull();
-      expect(screen.getByText("Department")).toBeTruthy();
-    });
-  });
-
-  it("live-commits a hidden-field filter (no Apply button)", async () => {
-    const user = userEvent.setup();
-    renderTable([]);
-
-    await user.click(await screen.findByRole("button", { name: "Filter" }));
-    await user.click(await screen.findByText("Email"));
-
-    // Operator/value editor opens with the shared editor (Condition select)
-    expect(await screen.findByText("Condition")).toBeTruthy();
-    // No Apply button in the live-commit surface (LC-21)
-    expect(screen.queryByRole("button", { name: "Apply" })).toBeNull();
-
-    const valueInput = await screen.findByPlaceholderText("Enter value...");
-    await user.type(valueInput, "other");
-
-    // Filter applied live: chip + filtered rows without any Apply press
-    await waitFor(() => {
-      expect(screen.getByText("Email: contains other")).toBeTruthy();
-      expect(screen.getByText("Alan")).toBeTruthy();
-      expect(screen.queryByText("Ada")).toBeNull();
-    });
-  });
-});

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

@@ -0,0 +1,105 @@
+/**
+ * DataTableFilterChips — every active filter as a removable pill under the
+ * toolbar (Axiom 6 HONEST STATE), including filters on fields with no
+ * visible column. Chip press reopens the shared editor; X removes; Clear
+ * all appears at 2+ chips.
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import type { DataTableColumn, FilterableField, TableFilter } from "../../types";
+import { DataTable } from "../DataTable";
+
+const meta: Meta = {
+  title: "Table/DataTableFilterChips",
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Wrapping pills for every active filter. Gray fill, two focusables per chip " +
+          "(edit + dismiss), Clear all from the second chip on.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+interface Person {
+  id: number;
+  firstName: string;
+  age: number;
+  email: string;
+  department: string;
+}
+
+const people: Person[] = [
+  { id: 1, firstName: "Ada", age: 36, email: "ada@corp.com", department: "Engineering" },
+  { id: 2, firstName: "Grace", age: 45, email: "grace@corp.com", department: "Engineering" },
+  { id: 3, firstName: "Alan", age: 41, email: "alan@other.org", department: "Marketing" },
+  { id: 4, firstName: "Katherine", age: 29, email: "kate@corp.com", department: "Design" },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+const filterableFields: FilterableField[] = [
+  { id: "email", label: "Email", type: "text" },
+  {
+    id: "department",
+    label: "Department",
+    type: "select",
+    options: [
+      { label: "Engineering", value: "Engineering" },
+      { label: "Marketing", value: "Marketing" },
+      { label: "Design", value: "Design" },
+    ],
+  },
+];
+
+function emailContains(value: string): TableFilter {
+  return {
+    id: "flt-email",
+    columnId: "email",
+    value: { operator: "contains", value },
+    label: "Email",
+  };
+}
+
+function departmentIs(value: string): TableFilter {
+  return {
+    id: "flt-department",
+    columnId: "department",
+    value: { operator: "is", value },
+    label: "Department",
+  };
+}
+
+function ChipTable({ initialFilters }: { initialFilters: TableFilter[] }) {
+  return (
+    <YStack padding="$4" width="100%">
+      <DataTable
+        data={people}
+        columns={columns}
+        filterableFields={filterableFields}
+        enableFiltering
+        enableGlobalSearch
+        initialState={{ filters: initialFilters }}
+        aria-label="People with filter chips"
+      />
+    </YStack>
+  );
+}
+
+export const Default = {
+  name: "Main",
+  render: () => <ChipTable initialFilters={[emailContains("corp")]} />,
+};
+
+/** Clear all lands once two chips are active. */
+export const ClearAll = {
+  render: () => <ChipTable initialFilters={[emailContains("corp"), departmentIs("Engineering")]} />,
+};

package/src/components/FilterManager.stories.tsx

@@ -0,0 +1,75 @@
+/**
+ * FilterManager — save-current-filters dialog. Frappe-free: the caller
+ * supplies the filter tuples and the save callback. Playground already
+ * mounts this; the Kitchen Sink is story-driven, so this file is the
+ * on-device page.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import type { Meta } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { FilterManager } from "./FilterManager";
+
+const meta: Meta<typeof FilterManager> = {
+  title: "Table/FilterManager",
+  component: FilterManager,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Save-filter dialog: name, optional global checkbox, live count of the " +
+          "current filter tuples. Disabled with a reason when nothing is applied.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const currentFilters: Array<[string, string, unknown]> = [
+  ["department", "=", "Engineering"],
+  ["salary", ">", 100000],
+];
+
+export const Default = {
+  name: "Main",
+  render: () => (
+    <YStack padding="$4" alignItems="flex-start">
+      <FilterManager
+        currentFilters={currentFilters}
+        onSaveFilter={(name, isGlobal) => {
+          action("onSaveFilter")(name, isGlobal);
+        }}
+      />
+    </YStack>
+  ),
+};
+
+/** No filters applied: the save trigger stays focusable and explains why. */
+export const DisabledEmpty = {
+  render: () => (
+    <YStack padding="$4" alignItems="flex-start">
+      <FilterManager
+        currentFilters={[]}
+        onSaveFilter={(name, isGlobal) => {
+          action("onSaveFilter")(name, isGlobal);
+        }}
+      />
+    </YStack>
+  ),
+};
+
+export const CanCreateGlobal = {
+  render: () => (
+    <YStack padding="$4" alignItems="flex-start">
+      <FilterManager
+        currentFilters={currentFilters}
+        canCreateGlobal
+        onSaveFilter={(name, isGlobal) => {
+          action("onSaveFilter")(name, isGlobal);
+        }}
+      />
+    </YStack>
+  ),
+};

package/src/components/FilterOperatorValueEditor/FilterOperatorValueEditor.spec.tsx

@@ -0,0 +1,261 @@
+/**
+ * FilterOperatorValueEditor spec (MPO-101). The editor owns two things and
+ * nothing else: the operator vocabulary for a field type, and the value
+ * editor that type gets. Commit semantics belong to the surfaces
+ * (ColumnHeaderFilter / DataTableFilterButton) and are specced there.
+ */
+
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import React, { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumnType, FilterOperator } from "../../types";
+import { filterOperatorLabel, operatorsForFilterType } from "../../utils/filterFields";
+import { FilterOperatorValueEditor, type FilterOperatorValueEditorProps } from "./index";
+
+const statusOptions = [
+  { label: "Open", value: "open" },
+  { label: "In progress", value: "in-progress" },
+  { label: "Done", value: "done" },
+];
+
+const fieldTypes: DataTableColumnType[] = ["text", "number", "date", "boolean", "select"];
+
+/** Every forms Select trigger in the tree, in render order (Condition first). */
+const selectTriggers = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[data-testid="select-trigger"]')) as HTMLElement[];
+
+const textInputs = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("input")) as HTMLInputElement[];
+
+async function openSelect(container: HTMLElement, trigger: HTMLElement) {
+  fireEvent.pointerDown(trigger);
+  fireEvent.mouseDown(trigger);
+  fireEvent.click(trigger);
+  await waitFor(() => {
+    expect(container.querySelectorAll('[role="option"]').length).toBeGreaterThan(0);
+  });
+  return Array.from(container.querySelectorAll('[role="option"]')) as HTMLElement[];
+}
+
+/**
+ * Choose an open Select option the way the keyboard does. Tamagui's SelectItem
+ * arms its click handler on a timer after the list opens (allowSelectRef), so a
+ * synthetic click right after opening is dropped; Enter selects unconditionally.
+ */
+function pickOption(option: HTMLElement) {
+  fireEvent.keyDown(option, { key: "Enter" });
+}
+
+const optionLabels = (options: HTMLElement[]) =>
+  options.map((option) => option.textContent?.trim() ?? "");
+
+function renderEditor(
+  props: Partial<FilterOperatorValueEditorProps> & { fieldType: DataTableColumnType },
+) {
+  const operator = props.operator ?? operatorsForFilterType(props.fieldType)[0];
+  return renderWithProviders(
+    <FilterOperatorValueEditor
+      value=""
+      onOperatorChange={vi.fn()}
+      onValueChange={vi.fn()}
+      {...props}
+      operator={operator}
+    />,
+  );
+}
+
+/** Controlled harness: round-trips operator + value like the surfaces do. */
+function ControlledEditor({
+  fieldType,
+  onOperatorSpy,
+  onValueSpy,
+  options,
+}: {
+  fieldType: DataTableColumnType;
+  onOperatorSpy: (operator: FilterOperator) => void;
+  onValueSpy: (value: string) => void;
+  options?: FilterOperatorValueEditorProps["options"];
+}) {
+  const [operator, setOperator] = useState<FilterOperator>(operatorsForFilterType(fieldType)[0]);
+  const [value, setValue] = useState("");
+  return (
+    <FilterOperatorValueEditor
+      fieldType={fieldType}
+      operator={operator}
+      value={value}
+      options={options}
+      onOperatorChange={(next) => {
+        setOperator(next);
+        onOperatorSpy(next);
+      }}
+      onValueChange={(next) => {
+        setValue(next);
+        onValueSpy(next);
+      }}
+    />
+  );
+}
+
+describe("FilterOperatorValueEditor", () => {
+  describe("operator vocabulary", () => {
+    it.each(fieldTypes)(
+      "%s: the Condition select offers exactly operatorsForFilterType, labelled via filterOperatorLabel",
+      async (fieldType) => {
+        const { container } = renderEditor({ fieldType, options: statusOptions });
+        expect(screen.getByText("Condition")).toBeInTheDocument();
+
+        const [condition] = selectTriggers(container);
+        const options = await openSelect(container, condition);
+        expect(optionLabels(options)).toEqual(
+          operatorsForFilterType(fieldType).map((op) => filterOperatorLabel(op)),
+        );
+      },
+    );
+
+    it("picking a condition reports the operator, not its label", async () => {
+      const onOperator = vi.fn();
+      const { container } = renderWithProviders(
+        <ControlledEditor fieldType="text" onOperatorSpy={onOperator} onValueSpy={vi.fn()} />,
+      );
+      const [condition] = selectTriggers(container);
+      const options = await openSelect(container, condition);
+      const startsWith = options.find((option) => option.textContent?.trim() === "Starts with");
+      expect(startsWith).toBeDefined();
+      pickOption(startsWith!);
+      await waitFor(() => expect(onOperator).toHaveBeenLastCalledWith("startsWith"));
+    });
+  });
+
+  describe("value editor per field type", () => {
+    it("text: a plain Input with the generic placeholder", () => {
+      const { container } = renderEditor({ fieldType: "text" });
+      expect(screen.getByText("Value")).toBeInTheDocument();
+      const input = screen.getByPlaceholderText("Enter value...") as HTMLInputElement;
+      expect(input.getAttribute("inputmode")).not.toBe("numeric");
+      expect(selectTriggers(container)).toHaveLength(1);
+    });
+
+    it("number: the Input asks for a numeric keyboard", () => {
+      renderEditor({ fieldType: "number" });
+      const input = screen.getByPlaceholderText("Enter value...") as HTMLInputElement;
+      expect(input.getAttribute("inputmode")).toBe("numeric");
+    });
+
+    it("date: the Input hints the ISO day format", () => {
+      renderEditor({ fieldType: "date" });
+      expect(screen.getByPlaceholderText("YYYY-MM-DD")).toBeInTheDocument();
+    });
+
+    it("boolean: a Value select with True / False and no text input", async () => {
+      const { container } = renderEditor({ fieldType: "boolean" });
+      const triggers = selectTriggers(container);
+      expect(triggers).toHaveLength(2);
+      expect(textInputs(container)).toHaveLength(0);
+      expect(screen.getByText("Select...")).toBeInTheDocument();
+
+      const options = await openSelect(container, triggers[1]);
+      expect(optionLabels(options)).toEqual(["True", "False"]);
+    });
+
+    it("select: a Value select over the column's options", async () => {
+      const { container } = renderEditor({ fieldType: "select", options: statusOptions });
+      const triggers = selectTriggers(container);
+      expect(triggers).toHaveLength(2);
+      expect(textInputs(container)).toHaveLength(0);
+
+      const options = await openSelect(container, triggers[1]);
+      expect(optionLabels(options)).toEqual(statusOptions.map((option) => option.label));
+    });
+
+    it("select without options falls back to the text Input", () => {
+      const { container } = renderEditor({ fieldType: "select" });
+      expect(selectTriggers(container)).toHaveLength(1);
+      expect(screen.getByPlaceholderText("Enter value...")).toBeInTheDocument();
+    });
+
+    it("shows the current value", () => {
+      renderEditor({ fieldType: "text", value: "ada" });
+      expect((screen.getByPlaceholderText("Enter value...") as HTMLInputElement).value).toBe("ada");
+    });
+  });
+
+  describe("value-less operators", () => {
+    it.each<FilterOperator>(["isEmpty", "isNotEmpty"])(
+      "%s renders the Condition select only",
+      (operator) => {
+        const { container } = renderEditor({ fieldType: "text", operator });
+        expect(screen.getByText("Condition")).toBeInTheDocument();
+        expect(screen.queryByText("Value")).toBeNull();
+        expect(selectTriggers(container)).toHaveLength(1);
+        expect(textInputs(container)).toHaveLength(0);
+      },
+    );
+
+    it("switching from a value-less operator back to one with a value restores the input", async () => {
+      const onOperator = vi.fn();
+      const { container, rerender } = renderWithProviders(
+        <FilterOperatorValueEditor
+          fieldType="text"
+          operator="isEmpty"
+          value=""
+          onOperatorChange={onOperator}
+          onValueChange={vi.fn()}
+        />,
+      );
+      expect(textInputs(container)).toHaveLength(0);
+      rerender(
+        <FilterOperatorValueEditor
+          fieldType="text"
+          operator="contains"
+          value=""
+          onOperatorChange={onOperator}
+          onValueChange={vi.fn()}
+        />,
+      );
+      await waitFor(() => expect(textInputs(container)).toHaveLength(1));
+    });
+  });
+
+  describe("callbacks", () => {
+    it("typing reports the raw text through onValueChange", async () => {
+      const onValue = vi.fn();
+      renderWithProviders(
+        <ControlledEditor fieldType="text" onOperatorSpy={vi.fn()} onValueSpy={onValue} />,
+      );
+      const input = screen.getByPlaceholderText("Enter value...") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "ada" } });
+      await waitFor(() => expect(onValue).toHaveBeenLastCalledWith("ada"));
+      expect(input.value).toBe("ada");
+    });
+
+    it("picking a boolean value reports the stringified flag", async () => {
+      const onValue = vi.fn();
+      const { container } = renderWithProviders(
+        <ControlledEditor fieldType="boolean" onOperatorSpy={vi.fn()} onValueSpy={onValue} />,
+      );
+      const options = await openSelect(container, selectTriggers(container)[1]);
+      const no = options.find((option) => option.textContent?.trim() === "False");
+      expect(no).toBeDefined();
+      pickOption(no!);
+      await waitFor(() => expect(onValue).toHaveBeenLastCalledWith("false"));
+    });
+
+    it("picking a select value reports the option value, not its label", async () => {
+      const onValue = vi.fn();
+      const { container } = renderWithProviders(
+        <ControlledEditor
+          fieldType="select"
+          options={statusOptions}
+          onOperatorSpy={vi.fn()}
+          onValueSpy={onValue}
+        />,
+      );
+      const options = await openSelect(container, selectTriggers(container)[1]);
+      const inProgress = options.find((option) => option.textContent?.trim() === "In progress");
+      expect(inProgress).toBeDefined();
+      pickOption(inProgress!);
+      await waitFor(() => expect(onValue).toHaveBeenLastCalledWith("in-progress"));
+    });
+  });
+});

package/src/components/FilterOperatorValueEditor/FilterOperatorValueEditor.stories.tsx

@@ -0,0 +1,183 @@
+/**
+ * FilterOperatorValueEditor — the ONE fieldtype-aware operator/value editor
+ * (LC-16). Both filter surfaces render it: the ColumnHeaderFilter funnel and
+ * the DataTableFilterButton toolbar panel. The surface owns commit semantics,
+ * so these stories exercise only what the editor owns: the operator
+ * vocabulary per field type, and the value editor each type gets.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import type { Meta } from "@storybook/react-native-web-vite";
+import React, { useState } from "react";
+import { Card, Text, XStack, YStack } from "tamagui";
+import type { DataTableColumnType, FilterOperator } from "../../types";
+import {
+  defaultOperatorForFilterType,
+  filterOperatorLabel,
+  operatorNeedsNoValue,
+} from "../../utils/filterFields";
+import { FilterOperatorValueEditor } from "./index";
+
+const meta: Meta<typeof FilterOperatorValueEditor> = {
+  title: "Table/FilterOperatorValueEditor",
+  component: FilterOperatorValueEditor,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "The shared operator + value editor behind every DataTable filter surface. " +
+          "The operator list and the value editor both follow the field type.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const statusOptions = [
+  { label: "Open", value: "open" },
+  { label: "In progress", value: "in-progress" },
+  { label: "Done", value: "done" },
+];
+
+const fieldTypeLabels: Record<DataTableColumnType, string> = {
+  text: "Text",
+  number: "Number",
+  date: "Date",
+  boolean: "Boolean",
+  select: "Select",
+};
+
+interface HarnessProps {
+  fieldType: DataTableColumnType;
+  options?: Array<{ label: string; value: any }>;
+  initialOperator?: FilterOperator;
+  initialValue?: string;
+  /** Show the field-type heading (the all-types board needs it). */
+  heading?: boolean;
+}
+
+/**
+ * Drives the editor the way both surfaces do: operator and value live in the
+ * caller's state, and the editor only reports changes. The card below is the
+ * filter the surface would commit.
+ */
+function EditorHarness({
+  fieldType,
+  options,
+  initialOperator,
+  initialValue = "",
+  heading = false,
+}: HarnessProps) {
+  const [operator, setOperator] = useState<FilterOperator>(
+    initialOperator ?? defaultOperatorForFilterType(fieldType),
+  );
+  const [value, setValue] = useState(initialValue);
+
+  const handleOperatorChange = (next: FilterOperator) => {
+    setOperator(next);
+    action("onOperatorChange")(next);
+  };
+  const handleValueChange = (next: string) => {
+    setValue(next);
+    action("onValueChange")(next);
+  };
+
+  const shownValue =
+    fieldType === "select" && options
+      ? (options.find((opt) => String(opt.value) === value)?.label ?? value)
+      : value;
+  const summary = operatorNeedsNoValue(operator)
+    ? filterOperatorLabel(operator)
+    : `${filterOperatorLabel(operator)} ${shownValue || "(no value)"}`;
+
+  return (
+    <YStack gap="$3" width={280}>
+      {heading && (
+        <Text fontSize="$3" fontWeight="600">
+          {fieldTypeLabels[fieldType]}
+        </Text>
+      )}
+      {/* Same vertical rhythm the funnel popover gives the editor. */}
+      <YStack gap="$2">
+        <FilterOperatorValueEditor
+          fieldType={fieldType}
+          operator={operator}
+          value={value}
+          onOperatorChange={handleOperatorChange}
+          onValueChange={handleValueChange}
+          options={options}
+        />
+      </YStack>
+      <Card padding="$3" borderRadius="$4">
+        <YStack gap="$1">
+          <Text fontSize="$2" color="$color10">
+            Filter the surface would commit
+          </Text>
+          <Text fontSize="$3">{summary}</Text>
+        </YStack>
+      </Card>
+    </YStack>
+  );
+}
+
+export const Default = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="text" />
+  </YStack>
+);
+Default.storyName = "Main";
+
+/** Text fields: contains / starts with / ends with plus the empty checks. */
+export const TextField = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="text" initialValue="ada" />
+  </YStack>
+);
+
+/** Number fields: comparison operators and a numeric keyboard on the value. */
+export const NumberField = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="number" initialOperator="isGreaterThan" initialValue="42" />
+  </YStack>
+);
+
+/** Date fields: before / after / on-or-before / on-or-after, typed as YYYY-MM-DD. */
+export const DateField = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="date" initialOperator="isAfter" initialValue="2026-01-01" />
+  </YStack>
+);
+
+/** Boolean fields: the value is a True / False select, not free text. */
+export const BooleanField = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="boolean" initialValue="true" />
+  </YStack>
+);
+
+/** Select fields: the value picks from the field's own options. */
+export const SelectField = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="select" options={statusOptions} initialValue="open" />
+  </YStack>
+);
+
+/** isEmpty / isNotEmpty carry no value, so the value editor is not rendered. */
+export const NoValueOperator = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="text" initialOperator="isEmpty" />
+  </YStack>
+);
+
+/** Every field type on one board, for theme-state verification. */
+export const AllFieldTypes = () => (
+  <XStack padding="$4" gap="$6" flexWrap="wrap">
+    <EditorHarness fieldType="text" heading />
+    <EditorHarness fieldType="number" heading />
+    <EditorHarness fieldType="date" heading />
+    <EditorHarness fieldType="boolean" heading />
+    <EditorHarness fieldType="select" options={statusOptions} heading />
+  </XStack>
+);

package/src/components/KnobDialog.spec.tsx

@@ -0,0 +1,88 @@
+/**
+ * KnobDialog spec (MPO-114). The wrapper owns open/close plumbing and the
+ * knob-wired content surface. FilterManager specs cover the save-dialog copy.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "@multiplatform.one/forms";
+import {
+  KnobDialog,
+  KnobDialogClose,
+  KnobDialogContent,
+  KnobDialogDescription,
+  KnobDialogTitle,
+  KnobDialogTrigger,
+} from "./KnobDialog";
+
+/** Dialog portals into document.body — query there, not the RTL container. */
+function root(): HTMLElement {
+  return document.body;
+}
+
+function DialogHarness({
+  startOpen = true,
+  onOpenChange,
+}: {
+  startOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const [open, setOpen] = useState(startOpen);
+  return (
+    <KnobDialog
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        onOpenChange?.(next);
+      }}
+    >
+      <KnobDialogTrigger asChild>
+        <Button>Open dialog</Button>
+      </KnobDialogTrigger>
+      <KnobDialogContent minWidth={400}>
+        <KnobDialogTitle>Save view</KnobDialogTitle>
+        <KnobDialogDescription>Name this filter set for later.</KnobDialogDescription>
+        <KnobDialogClose asChild>
+          <Button>Close</Button>
+        </KnobDialogClose>
+      </KnobDialogContent>
+    </KnobDialog>
+  );
+}
+
+describe("KnobDialog", () => {
+  it("open state portals title and description into the document", () => {
+    renderWithProviders(<DialogHarness startOpen />);
+    expect(root().textContent).toContain("Save view");
+    expect(root().textContent).toContain("Name this filter set for later.");
+  });
+
+  it("closed state does not render the dialog body", () => {
+    renderWithProviders(<DialogHarness startOpen={false} />);
+    expect(root().textContent).not.toContain("Save view");
+    expect(root().textContent).toContain("Open dialog");
+  });
+
+  it("paints an overlay while open", () => {
+    renderWithProviders(<DialogHarness startOpen />);
+    const overlay =
+      root().querySelector("[data-state]") ?? root().querySelector("[class*='Overlay']");
+    // Tamagui Dialog.Overlay is in the portal tree whenever the dialog is open.
+    const portalBits = Array.from(root().querySelectorAll("[data-state='open']"));
+    expect(portalBits.length).toBeGreaterThan(0);
+    expect(overlay || portalBits[0]).toBeTruthy();
+  });
+
+  it("Close reports onOpenChange(false)", () => {
+    const onOpenChange = vi.fn();
+    renderWithProviders(<DialogHarness startOpen onOpenChange={onOpenChange} />);
+    const close = Array.from(root().querySelectorAll('[role="button"]')).find((el) =>
+      el.textContent?.includes("Close"),
+    );
+    expect(close).toBeTruthy();
+    fireEvent.click(close!);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/KnobDialog.stories.tsx

@@ -0,0 +1,66 @@
+/**
+ * KnobDialog — Tamagui Dialog with table knobs on the content surface
+ * (borderRadius, elevation, gap). FilterManager is the production consumer.
+ * These boards show the wrapper itself, open and closed.
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Button } from "@multiplatform.one/forms";
+import { Paragraph, XStack, YStack } from "tamagui";
+import {
+  KnobDialog,
+  KnobDialogClose,
+  KnobDialogContent,
+  KnobDialogDescription,
+  KnobDialogTitle,
+  KnobDialogTrigger,
+} from "./KnobDialog";
+
+const meta: Meta = {
+  title: "Table/KnobDialog",
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Internal table Dialog wrapper. Content inherits container radius, elevation " +
+          "and gap from useResolvedKnobs so FilterManager chrome matches the rest of the table.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+function DialogHarness({ startOpen = true }: { startOpen?: boolean }) {
+  const [open, setOpen] = useState(startOpen);
+  return (
+    <YStack minHeight={400} padding="$4" alignItems="flex-start">
+      <KnobDialog open={open} onOpenChange={setOpen}>
+        <KnobDialogTrigger asChild>
+          <Button>Open dialog</Button>
+        </KnobDialogTrigger>
+        <KnobDialogContent minWidth={400}>
+          <KnobDialogTitle>Save view</KnobDialogTitle>
+          <KnobDialogDescription>Name this filter set for later.</KnobDialogDescription>
+          <Paragraph>Short dialog body.</Paragraph>
+          <XStack justifyContent="flex-end">
+            <KnobDialogClose asChild>
+              <Button>Close</Button>
+            </KnobDialogClose>
+          </XStack>
+        </KnobDialogContent>
+      </KnobDialog>
+    </YStack>
+  );
+}
+
+export const Default = {
+  name: "Main",
+  render: () => <DialogHarness />,
+};
+
+export const Closed = {
+  render: () => <DialogHarness startOpen={false} />,
+};

package/src/components/SavedFilterDropdown.stories.tsx

@@ -0,0 +1,90 @@
+/**
+ * SavedFilterDropdown — picker over persisted filter records. Uses the
+ * forms Select trigger (same FloatingPanel contract as every other Select
+ * in the catalog). Renders nothing when the list is empty.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import type { Meta } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import type { ParsedFilter } from "../hooks/useSavedFilters";
+import { SavedFilterDropdown } from "./SavedFilterDropdown";
+
+const meta: Meta<typeof SavedFilterDropdown> = {
+  title: "Table/SavedFilterDropdown",
+  component: SavedFilterDropdown,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Select over saved filter records. Global filters are labelled in the option " +
+          "text. The empty list is a silent no-op so toolbars do not grow a dead trigger.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const savedFilters: ParsedFilter[] = [
+  {
+    name: "Engineering Only",
+    filter_name: "Engineering Only",
+    for_user: "admin",
+    filters: [["department", "=", "Engineering"]],
+    isGlobal: false,
+  },
+  {
+    name: "High Salary",
+    filter_name: "High Salary",
+    for_user: "",
+    filters: [["salary", ">", 100000]],
+    isGlobal: true,
+  },
+  {
+    name: "Recent hires",
+    filter_name: "Recent hires",
+    for_user: "admin",
+    filters: [["joinDate", "after", "2024-01-01"]],
+    isGlobal: false,
+  },
+];
+
+function DropdownHarness({
+  initial,
+  disabled = false,
+}: {
+  initial?: ParsedFilter | null;
+  disabled?: boolean;
+}) {
+  const [selected, setSelected] = useState<ParsedFilter | null>(initial ?? null);
+  return (
+    <YStack padding="$4" alignItems="flex-start" width={280}>
+      <SavedFilterDropdown
+        filters={savedFilters}
+        selectedFilter={selected}
+        disabled={disabled}
+        onSelectFilter={(next) => {
+          setSelected(next);
+          action("onSelectFilter")(next);
+        }}
+        onDeleteFilter={(name) => action("onDeleteFilter")(name)}
+      />
+    </YStack>
+  );
+}
+
+export const Default = {
+  name: "Main",
+  render: () => <DropdownHarness />,
+};
+
+export const Selected = {
+  render: () => <DropdownHarness initial={savedFilters[0]} />,
+};
+
+export const Disabled = {
+  render: () => <DropdownHarness initial={savedFilters[0]} disabled />,
+};