feat(line-items): LineItems document-line editor and BulkItemPicker

[itsprade]

Summary

Adds LineItems, a spreadsheet-grade editor for the lines of a document (purchase orders, invoices, journals, work orders).

• Supersedes feat(line-items): document-line editing component + bulk picker, perf, polish #238, a from-scratch rebuild on current main.
• Stacked on feat(tree-picker): TreePicker, a tree-select dialog for picking many items #597 (TreePicker): the base is feat/tree-picker, so this diff is LineItems only. It will be retargeted to main once feat(tree-picker): TreePicker, a tree-select dialog for picking many items #597 merges.
• Ticket: tailor-inc/platform-planning#1161.

API

const lineItems = useLineItems<POLine>({
  fields,                              // createLineItemHelper<POLine>().field({ … })
  defaultLines: lines,                 // uncontrolled; or `lines` + `onLinesChange` (required together)
  mode: "edit",                        // "edit" | "view" | "amend"
  ordering: "manual",                  // "sort" | "manual"
  selection: { actions: [receive, remove] }, // or `true` for checkboxes only
});

<LineItems.Root value={lineItems}>
  <LineItems.Table renderRowActions={(row: POLine) => …} />
  <LineItems.TotalsRow>{(lines) => ({ total: sum(lines) })}</LineItems.TotalsRow>
  <LineItems.AddRow>…</LineItems.AddRow>
  <LineItems.SaveActions onSave={(changeSet) => submit(changeSet.lineChanges)} />
</LineItems.Root>

• Same shape as DataTable: useLineItems() → <LineItems.Root value> → compound parts.
• getChangeSet() returns a transport-agnostic { isEmpty, lineChanges } with add / update / remove / reorder ops, so only real edits get submitted.
• useLineItemsGroup({ debits, credits }) puts several collections under one Save / Discard.
• Bulk actions use DataTable's SelectionAction shape and the same footer bar.
• Save surface: SaveActions in the card is the default. DirtyBar is the floating alternative for long pages; with warnOnNav, it holds in-app navigation through React Router's useBlocker.

Behaviour

• Editors: text, number, select, boolean, date and custom. They commit on blur, Enter or Tab, never per keystroke.
• Input parsing: numbers read pasted 1,234, 1,5, currency symbols and full-width digits. Dates accept YYYY/MM/DD and reject out-of-range values.
• Spreadsheet behaviour:
  • range selection, TSV copy/paste, a fill handle, and Cmd/Ctrl+D fill-down
  • arrow navigation
  • Tab steps through editable cells and leaves the grid at its edges
• Layout:
  • pinned columns that take the row hover tint
  • a sticky header and totals row with scroll-edge shadows
  • ellipsis truncation
  • a fullscreen mode, which is a modal dialog that keeps drafts
• Performance: row virtualization (1,000 lines keep about 31 rows in the DOM), and memoized cells with stable handlers.
• Reordering by drag, with a keyboard fallback and announcements.
• Labels in English and Japanese, a screen-reader name on every editor, and reduced motion respected throughout.
• No new dependencies.

Why it's built this way

• renderRowActions is a render function, not DataTable's RowAction[]. Document lines often need per-row controls that aren't menu actions: a link to the item, inline remove, a status chip. The name is deliberately different from DataTable's rowActions so the two aren't confused. Bulk actions do use DataTable's SelectionAction shape.
• Fullscreen is its own overlay, not Dialog. Dialog portals its content, which would remount the grid and lose half-typed cells and focus. The overlay keeps the same element tree and adds role="dialog", aria-modal, a focus wrap, a scroll lock, and an Escape scoped to unhandled keys.
• mode is "edit" | "view" | "amend", not readOnly/disabled flags. These are stages of a document's life: draft, posted, and confirmed-but-partly-editable. A field opts into the modes it's editable in.
• The option is named fields, not columns. A field carries editing semantics (editor type, normalize/equals, commit scope, amend rules), not just display.
• Custom virtualizer instead of TanStack. The repo has a no-new-dependencies rule; it's small and covered by virtual-window.test.ts.

Shared selection bar: needs a maintainer's OK

To reuse DataTable's bulk-action bar, its view and pending-action runner moved into components/internals/selection-actions/, and DataTable now uses the shared copy (data-table.tsx, selection-bar.tsx, use-data-table.ts).

• No behaviour change: all 344 DataTable tests pass unchanged, snapshots included.
• Not exported.
• Waiting on @IzumiSy to confirm this refactor is acceptable before review goes further. It can be split into its own PR if preferred.

Known follow-ups

• Shared cell editing with DataTable: DataTable is getting inline cell editing in feat(data-table): inline cell editing #560, which @IzumiSy is taking over. Once it settles, we'll compare how cell editing works in both (editors, commit on blur/Enter, Escape to cancel, keyboard navigation, value normalization) and decide which pieces LineItems should borrow or share, rather than keep two implementations.
• Import-order workaround: a side-effect import "@/contexts/appshell-context" sits in two i18n modules and the shared bar. It works around a pre-existing @/hooks/i18n module cycle and will be removed when that cycle is fixed separately.
• Per-cell validation / error display is deferred.
• Dialog-level open/close motion is proposed separately in draft feat(dialog): clearer open and close motion #598.

Test plan

• vitest: full suite green, including the controlled round-trip, Tab/focus, paste-after-typing, fill-down, selection actions, warnOnNav (memory router), fullscreen, and number/date parsing
• tsc, oxlint (0 warnings), pnpm docs:check, check-dts
• Checked in the vite example at /showcase/line-items (PO, with a 1,000-line toggle) and /showcase/line-items-journal (group)

🤖 Generated with Claude Code

[itsprade]

@IzumiSy, a quick check on a DataTable refactor before this goes further in review.

LineItems uses the same bulk-action footer bar as DataTable ("3 of 5 selected · actions · Clear"). Rather than copy it, I moved the bar's view and the pending-action runner into a shared internal module, components/internals/selection-actions/, and pointed DataTable at it.

• No behaviour change: all 344 DataTable tests pass unchanged, snapshots included.
• Nothing new is exported.
• DataTable files touched: data-table.tsx, selection-bar.tsx, use-data-table.ts.

Is this refactor something we can do? If you'd rather see it as its own small PR first, I'll split it out.

For context, TreePicker is now its own PR (#597), and this PR is stacked on it.