@multiplatform.one/table 6.4.2 → 6.6.0

package/src/components/DataTableBulkActions/selectionCountI18n.spec.tsx

@@ -0,0 +1,94 @@
+// D-15: the selection-count label is i18n-safe — each variant is ONE
+// whole-sentence t() key ("{{n}} selected", "{{n}} selected (+{{hidden}}
+// filtered out)"), never concatenated English fragments, so locales own the
+// word order. This spec runs with an initialized i18next instance whose
+// translations deliberately differ from the keys (reordered words), proving
+// the label routes through t() — the sibling DataTableBulkActions.spec.tsx
+// covers the untranslated fallback (withInterp fills the raw key).
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import React from "react";
+import {
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { DataTableStateContext } from "../DataTable/DataTableStateContext";
+import { type BulkAction, DataTableBulkActions } from "./index";
+
+beforeAll(async () => {
+  // Same natural-language keys registered in packages/i18n/en/common.json,
+  // mapped to a pseudo-locale that reorders the sentence.
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: {
+      en: {
+        translation: {
+          "{{n}} selected": "selected: {{n}}",
+          "{{n}} selected (+{{hidden}} filtered out)":
+            "selected: {{n}} (hidden by filter: {{hidden}})",
+        },
+      },
+    },
+  });
+});
+
+afterEach(cleanup);
+
+type Row = { id: string; name: string; status: string };
+
+const rows: Row[] = [
+  { id: "a", name: "Alpha", status: "ready" },
+  { id: "b", name: "Bravo", status: "blocked" },
+];
+
+const actions: BulkAction<Row>[] = [{ id: "x", label: "X", onExecute: vi.fn() }];
+
+function Harness({ columnFilters = [] }: { columnFilters?: Array<{ id: string; value: any }> }) {
+  const [rowSelection, setRowSelection] = React.useState<Record<string, boolean>>({
+    a: true,
+    b: true,
+  });
+  const table = useReactTable({
+    data: rows,
+    columns: [
+      { id: "name", accessorKey: "name", header: "Name" },
+      { id: "status", accessorKey: "status", header: "Status" },
+    ] as any,
+    state: { rowSelection, columnFilters, pagination: { pageIndex: 0, pageSize: 10 } },
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getRowId: (row) => row.id,
+    enableRowSelection: true,
+  });
+  const ctxValue = React.useMemo(
+    () => ({ table, state: {} as any, actions: {} as any, computed: {} as any }) as any,
+    [table, rowSelection, columnFilters],
+  );
+  return (
+    <DataTableStateContext.Provider value={ctxValue}>
+      <DataTableBulkActions actions={actions} />
+    </DataTableStateContext.Provider>
+  );
+}
+
+describe("selection count label i18n (D-15)", () => {
+  it("base count renders through the {{n}} selected key", () => {
+    renderWithProviders(<Harness />);
+    expect(screen.getByText("selected: 2")).toBeInTheDocument();
+    expect(screen.queryByText(/\d selected/)).not.toBeInTheDocument();
+  });
+
+  it("filtered-out annotation renders through its own whole-sentence key", () => {
+    renderWithProviders(<Harness columnFilters={[{ id: "status", value: "ready" }]} />);
+    expect(screen.getByText("selected: 2 (hidden by filter: 1)")).toBeInTheDocument();
+    expect(screen.queryByText(/filtered out/)).not.toBeInTheDocument();
+  });
+});

package/src/components/DataTableCell/CellModalEditor.tsx

@@ -12,6 +12,7 @@
  * footer stays within the two-action dialog budget (LC-31).
  */
 
+import { DialogOverlay } from "@multiplatform.one/components";
 import { FieldDisplay, type FieldDisplayType } from "@multiplatform.one/forms";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
@@ -118,11 +119,12 @@ export function CellModalEditor({
       </View>
       <Dialog open={open} onOpenChange={handleOpenChange} modal>
         <Dialog.Portal>
-          <Dialog.Overlay opacity={0.5} enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} />
+          <DialogOverlay opacity={0.5} />
           <Dialog.Content
             borderWidth={1}
             borderColor="$borderColor"
             elevation={knobProps.elevation}
+            transition={knobProps.transition}
             enterStyle={{ y: -10, opacity: 0, scale: 0.96 }}
             exitStyle={{ y: 10, opacity: 0, scale: 0.96 }}
             maxWidth={720}

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

@@ -16,11 +16,7 @@ import { fn } from "storybook/test";
 import { Table } from "@multiplatform.one/table-primitives";
 import React from "react";
 import { Text, View, XStack, YStack } from "tamagui";
-import type {
-  DataTableCellRenderContext,
-  DataTableField,
-  DataTableFieldProps,
-} from "../../types";
+import type { DataTableCellRenderContext, DataTableField, DataTableFieldProps } from "../../types";
 import { DataTableCell } from "./index";
 
 // Custom renderers receive the cell's honest state as the 4th argument and

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

@@ -188,7 +188,11 @@ function MockMultiDatePicker({ value, onChange }: any) {
   );
 }
 
-vi.mock("@multiplatform.one/forms", () => ({
+// Partial mock: real module first (module-scope exports like `zIndex` keep
+// resolving for transitive imports), field components faked on top — the
+// spec asserts draft/commit policy per field, not the fields themselves.
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/forms")>()),
   Checkbox: createMock("Checkbox"),
   Switch: createMock("Switch"),
   Select: MockSelect,
@@ -231,7 +235,11 @@ vi.mock("@multiplatform.one/rich-text", () => ({
   RichTextEditor: createMock("RichTextEditor"),
 }));
 
-vi.mock("@multiplatform.one/theme", () => ({
+// Partial mock (importOriginal): only the knobs hook is stubbed — real
+// module-scope exports (MIN_PRESS_TARGET, press-target helpers, formatters)
+// keep resolving for every component this spec transitively imports.
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/theme")>()),
   useResolvedKnobs: () => ({
     knobProps: {
       sizeToken: "$3",

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

@@ -30,7 +30,11 @@ function createMock(name: string) {
   return Comp;
 }
 
-vi.mock("@multiplatform.one/forms", () => ({
+// Partial mock: real module first (module-scope exports like `zIndex` keep
+// resolving for transitive imports), field components faked on top — the
+// spec asserts ROUTING to fields, not the fields themselves.
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/forms")>()),
   Checkbox: createMock("Checkbox"),
   Switch: createMock("Switch"),
   Select: createMock("Select"),
@@ -94,7 +98,11 @@ vi.mock("@multiplatform.one/rich-text", () => ({
   RichTextEditor: createMock("RichTextEditor"),
 }));
 
-vi.mock("@multiplatform.one/theme", () => ({
+// Partial mock (importOriginal): only the knobs hook is stubbed — real
+// module-scope exports (MIN_PRESS_TARGET, press-target helpers, formatters)
+// keep resolving for every component this spec transitively imports.
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/theme")>()),
   useResolvedKnobs: () => ({
     knobProps: {
       sizeToken: "$3",

package/src/components/DataTableCell/index.tsx

@@ -175,19 +175,16 @@ export function DataTableCell({
   // large tables performant and gives heavy fields a purpose-built compact
   // representation. Edit-mode (below) still mounts the full field component.
   if (readOnly) {
-    // FieldDisplay formats currency via Intl.NumberFormat, which requires an
-    // ISO-4217 code — a raw symbol ("$") throws RangeError and crashes the
-    // whole table. Normalize symbols to codes and drop anything still invalid.
-    const displayFieldProps =
-      fieldProps.currency != null
-        ? { ...fieldProps, currency: normalizeCurrencyCode(fieldProps.currency) }
-        : fieldProps;
+    // Currency symbols ride through untouched: the money register in
+    // `@multiplatform.one/theme` owns symbol→ISO-code resolution (LC-12 one
+    // channel per data class) and prefixes a symbol it has no code for, so a
+    // cell never has to sanitize a value on the way to the formatter.
     return (
       <CellWrapper justify={cellJustify}>
         <FieldDisplay
           field={field}
           value={value}
-          fieldProps={displayFieldProps}
+          fieldProps={fieldProps}
           linkedValue={_linkedValue}
         />
       </CellWrapper>
@@ -1182,34 +1179,6 @@ function DraftFieldEditor({
   );
 }
 
-const CURRENCY_SYMBOL_TO_CODE: Record<string, string> = {
-  $: "USD",
-  "€": "EUR",
-  "£": "GBP",
-  "¥": "JPY",
-  "₹": "INR",
-  "₩": "KRW",
-  "₽": "RUB",
-  R$: "BRL",
-};
-
-const currencyCodeCache = new Map<string, string | undefined>();
-
-function normalizeCurrencyCode(currency: unknown): string | undefined {
-  if (typeof currency !== "string" || !currency) return undefined;
-  if (currencyCodeCache.has(currency)) return currencyCodeCache.get(currency);
-  const mapped = CURRENCY_SYMBOL_TO_CODE[currency] ?? currency;
-  let resolved: string | undefined;
-  try {
-    new Intl.NumberFormat(undefined, { style: "currency", currency: mapped });
-    resolved = mapped;
-  } catch {
-    resolved = undefined;
-  }
-  currencyCodeCache.set(currency, resolved);
-  return resolved;
-}
-
 function CellWrapper({
   children,
   justify = "flex-start",

package/src/components/DataTableColumnPinning/DataTableColumnPinning.stories.tsx

@@ -8,6 +8,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { useState } from "react";
+import { formatCurrency, useResolvedKnobs } from "@multiplatform.one/theme";
 import { Button } from "@multiplatform.one/forms";
 import { Card, H3, Paragraph, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
 import { DataTableColumnPinning, useColumnPinning } from "./index";
@@ -25,10 +26,25 @@ interface Person {
   performance: number;
 }
 
+/**
+ * Seeded PRNG (mulberry32). The fixture must produce byte-identical rows on
+ * every page load: `Math.random()` here redrew Salary and the performance-bar
+ * width per capture, which is what flapped the visual baselines for this
+ * family. Determinism at the source keeps every pixel under comparison, where
+ * a screenshot mask or delay would not.
+ */
+const seededRandom = (seed: number) => () => {
+  seed = (seed + 0x6d2b79f5) | 0;
+  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
 const generateData = (count: number): Person[] => {
   const departments = ["Engineering", "Sales", "Marketing", "HR", "Finance"];
   const roles = ["Manager", "Senior", "Junior", "Lead", "Intern"];
   const statuses: ("active" | "inactive" | "pending")[] = ["active", "inactive", "pending"];
+  const random = seededRandom(0x5eed);
 
   return Array.from({ length: count }, (_, i) => ({
     id: i + 1,
@@ -37,16 +53,44 @@ const generateData = (count: number): Person[] => {
     email: `user${i + 1}@example.com`,
     department: departments[i % departments.length],
     role: roles[i % roles.length],
-    salary: 50000 + Math.floor(Math.random() * 100000),
+    salary: 50000 + Math.floor(random() * 100000),
     startDate: new Date(2020 + (i % 4), i % 12, (i % 28) + 1).toISOString().split("T")[0],
     status: statuses[i % statuses.length],
-    performance: Math.floor(Math.random() * 100),
+    performance: Math.floor(random() * 100),
   }));
 };
 
 const defaultData = generateData(50);
 const columnHelper = createColumnHelper<Person>();
 
+/**
+ * Mini performance track. A component rather than an inline cell renderer so
+ * the track's radius can follow the knob (LC-60): the previous pinned `$2`
+ * outlived `borderRadius:none` on an 8px-tall bar, which reads as an
+ * undeclared knob-immune shape.
+ */
+function PerformanceBar({ value }: { value: number }) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <XStack alignItems="center" gap="$2">
+      <View
+        backgroundColor="$gray5"
+        height={8}
+        flex={1}
+        {...knobProps.containerRadius}
+        overflow="hidden"
+      >
+        <View
+          backgroundColor={value > 70 ? "$green10" : value > 40 ? "$yellow10" : "$red10"}
+          height="100%"
+          width={`${value}%`}
+        />
+      </View>
+      <Text fontSize="$1">{value}%</Text>
+    </XStack>
+  );
+}
+
 const defaultColumns = [
   columnHelper.accessor("id", {
     header: "ID",
@@ -76,7 +120,8 @@ const defaultColumns = [
   }),
   columnHelper.accessor("salary", {
     header: "Salary",
-    cell: (info) => `$${info.getValue().toLocaleString()}`,
+    cell: (info) =>
+      formatCurrency(info.getValue() as number, { symbol: "$", fractionDigits: "auto" }),
   }),
   columnHelper.accessor("startDate", {
     header: "Start Date",
@@ -100,20 +145,7 @@ const defaultColumns = [
   }),
   columnHelper.accessor("performance", {
     header: "Performance",
-    cell: (info) => (
-      <XStack alignItems="center" gap="$2">
-        <View backgroundColor="$gray5" height={8} flex={1} borderRadius="$2" overflow="hidden">
-          <View
-            backgroundColor={
-              info.getValue() > 70 ? "$green10" : info.getValue() > 40 ? "$yellow10" : "$red10"
-            }
-            height="100%"
-            width={`${info.getValue()}%`}
-          />
-        </View>
-        <Text fontSize="$1">{info.getValue()}%</Text>
-      </XStack>
-    ),
+    cell: (info) => <PerformanceBar value={info.getValue()} />,
   }),
 ];
 

package/src/components/DataTableDateFilter/DataTableDateFilter.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from "@multiplatform.one/storybook";
 import React from "react";
+import { formatAbsoluteDate } from "@multiplatform.one/theme";
 import { Card, Text, XStack, YStack } from "tamagui";
 import { DataTableDateFilter, type DateFilterValue, applyDateFilter } from "./index";
 
@@ -200,10 +201,10 @@ export const WithDateConstraints = () => {
 
       <YStack gap="$2">
         <Text fontSize="$3" color="$gray11">
-          Min Date: {minDate.toLocaleDateString()}
+          Min Date: {formatAbsoluteDate(minDate, { year: "always" })}
         </Text>
         <Text fontSize="$3" color="$gray11">
-          Max Date: {maxDate.toLocaleDateString()}
+          Max Date: {formatAbsoluteDate(maxDate, { year: "always" })}
         </Text>
       </YStack>
     </YStack>
@@ -302,7 +303,7 @@ export const WithDataIntegration = () => {
                     {task.title}
                   </Text>
                   <Text fontSize="$2" color="$gray11">
-                    Created: {new Date(task.createdAt).toLocaleDateString()}
+                    Created: {formatAbsoluteDate(task.createdAt)}
                   </Text>
                 </YStack>
                 <Text

package/src/components/DataTableExport/DataTableExport.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { formatAbsoluteDate, formatNumber } from "@multiplatform.one/theme";
 import { Card, Text, YStack } from "tamagui";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableExport } from "./index";
@@ -97,7 +98,7 @@ const productColumns = [
   {
     accessorKey: "createdAt",
     header: "Created",
-    cell: (info: any) => new Date(info.getValue()).toLocaleDateString(),
+    cell: (info: any) => formatAbsoluteDate(info.getValue()),
   },
 ];
 
@@ -424,7 +425,7 @@ export const WithComplexData = () => {
     {
       accessorKey: "metrics",
       header: "Users",
-      cell: (info: any) => info.getValue().users.toLocaleString(),
+      cell: (info: any) => formatNumber(info.getValue().users),
     },
     {
       accessorKey: "features",

package/src/components/DataTableExport/index.tsx

@@ -298,6 +298,7 @@ function ExportOptionsPopover({
         {...knobProps.borderRadius}
         borderWidth={1}
         borderColor="$borderColor"
+        transition={knobProps.transition}
         enterStyle={{ x: 0, y: -10, opacity: 0 }}
         exitStyle={{ x: 0, y: -10, opacity: 0 }}
         minWidth={popoverMinWidth}

package/src/components/DataTableFilterButton/index.tsx

@@ -46,7 +46,10 @@ function FieldRow({ field, highlighted, onSelect }: FieldRowProps) {
       cursor="pointer"
       paddingHorizontal="$2.5"
       paddingVertical="$2"
-      {...knobProps.borderRadius}
+      // LC-55 FRAGMENT-LICENSE (D-03, G-08 arm): a hoverable option row is
+      // wayfinding, not chrome-earning — the full borderRadius fragment
+      // carries borderWidth and drew a permanent ring under the hover fill.
+      {...knobProps.containerRadius}
       backgroundColor={highlighted ? "$color4" : "transparent"}
       hoverStyle={{ backgroundColor: "$color4" }}
       pressStyle={{ backgroundColor: "$color5" }}

package/src/components/DataTableGrouping/DataTableGrouping.spec.tsx

@@ -1,9 +1,15 @@
 import { fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { formatNumber } from "@multiplatform.one/theme";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import "@testing-library/jest-dom";
 import { DataTable } from "../DataTable";
-import { type AggregationConfig, DataTableGrouping, groupData } from "./index";
+import {
+  type AggregationConfig,
+  DataTableGrouping,
+  formatAggregateValue,
+  groupData,
+} from "./index";
 
 // Test data type
 type SalesRecord = {
@@ -115,7 +121,58 @@ describe("DataTableGrouping", () => {
 
     // Should show aggregation values
     expect(screen.getByText("North America")).toBeInTheDocument();
-    // The actual aggregation display would be tested in integration
+    // LC-12 render channel: the sum reaches the slot through the house
+    // number register, so it reads like the cells it summarises.
+    expect(screen.getByText(formatNumber(15400))).toBeInTheDocument();
+    expect(screen.queryByText("15400")).not.toBeInTheDocument();
+  });
+
+  it("routes the header item count through the house number register (LC-12)", () => {
+    // Same data class as the aggregates: a large group's count must read
+    // localized ("(1,000 items)"), never raw beside channel-formatted sums.
+    const bigData = Array.from({ length: 1000 }, (_, i) => ({
+      id: String(i),
+      region: "North America",
+    }));
+    renderWithProviders(
+      <DataTableGrouping
+        data={bigData}
+        columns={[{ accessorKey: "region", header: "Region", type: "string" as const }]}
+        groupBy={["region"]}
+      />,
+    );
+
+    const expected = `(${formatNumber(1000, { maximumFractionDigits: 0 })} items)`;
+    expect(screen.getByText(expected)).toBeInTheDocument();
+    expect(screen.queryByText("(1000 items)")).not.toBeInTheDocument();
+  });
+
+  describe("formatAggregateValue (LC-12 number channel)", () => {
+    const sum: AggregationConfig = { column: "totalRevenue", function: "sum" };
+    const count: AggregationConfig = { column: "quantity", function: "count" };
+
+    it("routes aggregates through the house number register", () => {
+      expect(formatAggregateValue(15400, sum)).toBe(formatNumber(15400));
+      expect(formatAggregateValue(5133.33, sum)).toBe(formatNumber(5133.33));
+    });
+
+    it("keeps counts whole", () => {
+      expect(formatAggregateValue(3, count)).toBe("3");
+    });
+
+    it("formats a numeric string from a custom aggregation", () => {
+      expect(formatAggregateValue("15400", sum)).toBe(formatNumber(15400));
+    });
+
+    it("passes non-numeric custom results through as their own text", () => {
+      expect(formatAggregateValue("mixed", sum)).toBe("mixed");
+    });
+
+    it("keeps the zero floor for missing and non-finite values", () => {
+      expect(formatAggregateValue(undefined, sum)).toBe("0");
+      expect(formatAggregateValue(Number.NaN, sum)).toBe("0");
+      expect(formatAggregateValue(0, sum)).toBe("0");
+    });
   });
 
   it("calls onGroupingChange when grouping config changes", () => {

package/src/components/DataTableGrouping/DataTableGrouping.stories.tsx

@@ -442,19 +442,31 @@ export const WithGroupingControls = () => {
   );
 };
 
+/**
+ * Seeded PRNG (mulberry32). The aggregate rows this story renders (Total
+ * Revenue, Item Count) are derived from the fixture, so `Math.random()` made
+ * the shot differ on every capture and flapped the visual baseline. Seeding
+ * keeps the whole surface under pixel comparison.
+ */
+const seededRandom = (seed: number) => () => {
+  seed = (seed + 0x6d2b79f5) | 0;
+  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
 export const PerformanceTest = () => {
   // Generate larger dataset
+  const random = seededRandom(0x5eed);
   const largeDataset = Array.from({ length: 1000 }, (_, i) => ({
     id: `item-${i + 1}`,
     region: ["North America", "Europe", "Asia Pacific", "South America"][i % 4],
     category: ["Electronics", "Furniture", "Appliances", "Books"][i % 4],
     salesperson: `Person ${(i % 10) + 1}`,
-    quantity: Math.floor(Math.random() * 20) + 1,
-    unitPrice: Math.floor(Math.random() * 1000) + 100,
+    quantity: Math.floor(random() * 20) + 1,
+    unitPrice: Math.floor(random() * 1000) + 100,
     totalRevenue: 0, // Will be calculated
-    date: new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000)
-      .toISOString()
-      .split("T")[0],
+    date: new Date(Date.now() - random() * 365 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
   })).map((item) => ({
     ...item,
     totalRevenue: item.quantity * item.unitPrice,

package/src/components/DataTableGrouping/index.tsx

@@ -559,6 +559,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
         {...knobProps.borderRadius}
         borderWidth={1}
         borderColor="$borderColor"
+        transition={knobProps.transition}
         enterStyle={{ x: 0, y: -10, opacity: 0 }}
         exitStyle={{ x: 0, y: -10, opacity: 0 }}
         minWidth={popoverMinWidth}

package/src/components/DataTablePagination/DataTablePagination.stories.tsx

@@ -1,8 +1,10 @@
 import { action } from "@multiplatform.one/storybook";
+import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import React from "react";
-import { Button } from "@multiplatform.one/forms";
-import { Input, Text, View, XStack, YStack } from "tamagui";
+// Catalog Button + Input (LC-56 STORY-HONESTY — no raw interactive primitives).
+import { Button, Input } from "@multiplatform.one/forms";
+import { Text, View, XStack, YStack } from "tamagui";
 import type {
   DataTableColumn,
   PageLoadQuery,
@@ -80,7 +82,20 @@ export const Compact: Story = {
   },
 };
 
+// LC-57 allowlist: the boundary stories below EXIST to demo pager edges —
+// first/last/single/empty page rest with the unreachable-direction buttons
+// disabled by design (the honest boundary state, LC-40-washed). The warns
+// still fire; the harvester tolerates exactly these codes on these ids.
+const pagerBoundarySpecimen = {
+  guardrailSpecimen: {
+    warns: ["bare-disabled"],
+    reason:
+      "Pager-boundary specimen: unreachable nav directions rest disabled by design at page edges.",
+  } satisfies GuardrailSpecimenParameter,
+};
+
 export const FirstPage: Story = {
+  parameters: pagerBoundarySpecimen,
   args: {
     ...Basic.args,
     pagination: {
@@ -101,6 +116,7 @@ export const MiddlePage: Story = {
 };
 
 export const LastPage: Story = {
+  parameters: pagerBoundarySpecimen,
   args: {
     ...Basic.args,
     pagination: {
@@ -172,6 +188,7 @@ export const SmallDataSet: Story = {
 };
 
 export const SinglePage: Story = {
+  parameters: pagerBoundarySpecimen,
   args: {
     ...Basic.args,
     pagination: {
@@ -406,6 +423,7 @@ export const PageJumpDemo: Story = {
         ...samplePagination,
         pageIndex: 5,
       });
+      const [jumpValue, setJumpValue] = React.useState("");
 
       const handlePaginationChange = (newPagination: TablePagination) => {
         setPagination({
@@ -445,24 +463,19 @@ export const PageJumpDemo: Story = {
             </Text>
             <XStack gap="$2" marginTop="$2" alignItems="center">
               <Text>Go to page:</Text>
-              <Input
-                keyboardType="numeric"
-                placeholder={`1-${pagination.totalPages}`}
-                onSubmitEditing={(e) => {
-                  handlePageJump(e.nativeEvent.text);
-                }}
-                padding="$1"
-                width={80}
-              />
-              <Button
-                onPress={() => {
-                  // For demo purposes, we'll use a simple approach
-                  // In a real app, you'd use a ref to get the input value
-                  handlePageJump("1");
-                }}
-                size="$2"
-                padding="$1"
-              >
+              <YStack width={110}>
+                <Input
+                  keyboardType="numeric"
+                  placeholder={`1-${pagination.totalPages}`}
+                  onChangeText={setJumpValue}
+                  inputProps={{
+                    "aria-label": "Go to page",
+                    onSubmitEditing: (e: { nativeEvent: { text: string } }) =>
+                      handlePageJump(e.nativeEvent.text),
+                  }}
+                />
+              </YStack>
+              <Button onPress={() => handlePageJump(jumpValue)} size="$2" padding="$1">
                 Go
               </Button>
             </XStack>
@@ -571,6 +584,7 @@ export const ErrorStates: Story = {
 };
 
 export const EdgeCases: Story = {
+  parameters: pagerBoundarySpecimen,
   args: {
     ...Basic.args,
     pagination: {