@tailor-platform/app-shell 1.9.0 → 1.10.1

package/dist/themes/bloom.css

@@ -146,7 +146,8 @@ html
   background-color: transparent;
 }
 
-html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"] {
+html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"],
+html [data-slot="data-table-filter-chip"] {
   background-color: transparent;
   transition:
     background-color 0.12s ease,

package/dist/themes/cream.css

@@ -146,7 +146,8 @@ html
   background-color: transparent;
 }
 
-html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"] {
+html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"],
+html [data-slot="data-table-filter-chip"] {
   background-color: transparent;
   transition:
     background-color 0.12s ease,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-platform/app-shell",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "description": "An opinionated React application framework for building ERP applications on Tailor Platform",
   "keywords": [
     "app-shell",
@@ -54,7 +54,7 @@
     "lucide-react": "^1.8.0",
     "openai": "6.45.0",
     "papaparse": "^5.5.3",
-    "react-router": "^7.14.1",
+    "react-router": "^7.18.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "@tailor-platform/app-shell-vite-plugin": "0.2.3"

package/skills/app-shell-patterns/references/fundamental/components.md

@@ -387,7 +387,7 @@ Plus `badgeVariants` CVA for custom-styled siblings.
 
 **Import:** compound namespace + helpers from `'@tailor-platform/app-shell'`, e.g. `DataTable`, `useDataTable`, `useCollectionVariables`, `createColumnHelper`, and types such as `Column`, `UseDataTableReturn`.
 
-**Purpose:** Production list screens over GraphQL **connections**. Owns toolbar filter chips (**`DataTable.Filters`** from column `filter` configs), header sort, **`DataTable.Pagination`** (cursor-first; First/Last when `total` is provided), loading skeleton/error row, **`onClickRow`**, **`rowActions`** (kebab column), **`onSelectionChange`** (checkbox column).
+**Purpose:** Production list screens over GraphQL **connections**. Owns toolbar filter chips (**`DataTable.Filters`** from column `filter` configs), header sort, **`DataTable.Pagination`** (cursor-first; First/Last when `total` is provided), loading skeleton/error row, **`onClickRow`**, **`rowActions`** (kebab column), **`onSelectionChange`** (checkbox column), **column pinning** (`pin: "left" | "right"`) and built-in **column settings** (`<DataTable.Toolbar columnSettings>` — user show/hide + reorder + pin, persisted per-user via **`tableId`**).
 
 **Primitives:** Builds on low-level **`Table`**; do not reinvent pagination/filters manually unless the dataset is trivial.
 
@@ -404,12 +404,13 @@ const table = useDataTable({
   data: fetching ? undefined : mappedFromQuery,
   loading: fetching,
   control,
+  tableId: "purchase-orders", // persist user column layout to localStorage
   onClickRow: (row) => navigate(detailHref(row)),
   // onSelectionChange, rowActions, sort: …
 });
 
 <DataTable.Root value={table}>
-  <DataTable.Toolbar>
+  <DataTable.Toolbar columnSettings>
     <DataTable.Filters />
   </DataTable.Toolbar>
   <DataTable.Table />
@@ -419,6 +420,10 @@ const table = useDataTable({
 </DataTable.Root>;
 ```
 
+**Row navigation:** whole row is clickable via **`onClickRow`** → `navigate(detailHref(row))`; wrap the primary identifier cell in `<Link>` for keyboard/SR access. Never add a per-row "View" / "Open" / "→" button. (A first-class row-interaction API is under design — see the row-interaction tracking issue.)
+
+**Column pinning & settings:** set `pin: "left" | "right"` on a `Column` to freeze it during horizontal scroll — selection auto-pins left, row-actions auto-pins right (a `width` is optional but recommended for stable sizing). Pass **`columnSettings`** to **`DataTable.Toolbar`** to render the built-in "Columns" control (show/hide, reorder, re-pin) at the top-right; pass a stable, **unique** **`tableId`** to persist each user's layout to `localStorage` (a per-user preference — intentionally not in the URL like filters/sort).
+
 **Column alignment:** each `Column` accepts **`align`** (`"left" | "right"`) applied to both header and body cell. Numeric `type` columns (`"number"`, `"money"`) default to `"right"` automatically so digits align on the decimal place — pass `align="left"` to opt out; everything else defaults to `"left"`.
 
 **Metadata path:** Prefer `createColumnHelper` + `inferColumns(tableMetadata.order)` (`@tailor-platform/app-shell-sdk-plugin` codegen) when available so enum/datetime/string filters bind to the right editors.
@@ -638,6 +643,14 @@ const table = useDataTable({
 **API:** `InputProps` — extends native `<input>` props.
 **Used in patterns:** all `form/*`.
 
+### `Checkbox`
+
+**Import:** `import { Checkbox } from '@tailor-platform/app-shell'`
+**Purpose:** Boolean form control. Maps to spec field type: `boolean`. Also used for row selection and filter toggles.
+**API:** `CheckboxProps` — extends Base UI `Checkbox.Root` (`checked`/`defaultChecked`, `onCheckedChange`, `indeterminate`, `disabled`, `required`, `name`, `inputRef`) and adds an inline `label`. Integrates with `Field` for invalid/disabled/label state exactly like `Input`/`Select` — no bespoke `error` prop.
+**Accessible name:** the inline `label` prop (enclosing) or a sibling `Field.Label`; for a bare box (e.g. a table row-select cell) pass `aria-label`.
+**Used in patterns:** `form/*` (boolean fields), `list/*` (row selection), DataTable filter/column controls.
+
 ### `Select`
 
 **Import:** `import { Select } from '@tailor-platform/app-shell'`

package/skills/app-shell-patterns/references/patterns/list-dense-scan.md

@@ -153,8 +153,9 @@ Omit `fill` on pages that should flow and scroll naturally (forms, dashboards, a
 - Handle every state: `DataTable` renders the loading skeleton and error row; always provide a **labelled empty state** (what the list is + how to add the first record) rather than a bare empty table
 - Status Badge colors must use design system tokens (variant prop): the **primary** status column uses **filled** semantic variants; **secondary** status columns (delivery, billing) use **`outline-*`** (see `design-system.md` → Composition & emphasis rules)
 - Bulk actions toolbar appears only when ≥1 row is selected
-- Whole row is clickable via `onClickRow`; no per-row "View" / "Open" buttons
+- Whole row is clickable via `onClickRow`; wrap the primary identifier cell in `<Link>` for keyboard/SR access. No per-row "View" / "Open" buttons
 - Per-row `Menu` (overflow `…`) is reserved for non-navigation actions (Archive, Duplicate, Delete)
+- Wide lists (many columns / horizontal scroll): pin the column users scan by to the **left** — the record's identifier (invoice / order **reference**) or its **name** (customer, product) — so it stays anchored while the rest scrolls; optionally pin a single high-signal **status** or **total** to the **right**. Keep the pinned set small (≈1 left, at most 1 right) — over-pinning eats the scroll area. Let users override via `<DataTable.Toolbar columnSettings>` (show/hide + reorder + re-pin) with a stable `tableId` so each user's layout persists
 
 ## Anti-patterns