@tailor-platform/app-shell 1.18.0 → 1.20.0

package/dist/vite-plugin.d.ts

@@ -16,46 +16,6 @@ declare namespace Root {
 }
 
 
-declare namespace Viewport {
-    var displayName: string;
-}
-
-
-declare namespace Row {
-    var displayName: string;
-}
-
-
-declare namespace Interval {
-    var displayName: string;
-}
-
-
-declare namespace TimelineLink {
-    var displayName: string;
-}
-
-
-declare namespace Root {
-    var displayName: string;
-}
-
-
-declare namespace Image {
-    var displayName: string;
-}
-
-
-declare namespace Fallback {
-    var displayName: string;
-}
-
-
-declare namespace Root {
-    var displayName: string;
-}
-
-
 declare namespace Title {
     var displayName: string;
 }
@@ -66,37 +26,27 @@ declare namespace Description {
 }
 
 
-declare namespace Provider {
-    var displayName: string;
-}
-
-
 declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace ClearAll {
+declare namespace Group {
     var displayName: string;
 }
 
 
-declare namespace Sections {
+declare namespace Separator {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
-    var displayName: string;
-}
-
-
-declare namespace Settings {
+declare namespace TextRoot {
     var displayName: string;
 }
 
@@ -106,12 +56,12 @@ declare namespace Root {
 }
 
 
-declare namespace Header {
+declare namespace Image {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Fallback {
     var displayName: string;
 }
 
@@ -201,6 +151,21 @@ declare namespace Root {
 }
 
 
+declare namespace Header {
+    var displayName: string;
+}
+
+
+declare namespace Content {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
 declare namespace Label {
     var displayName: string;
 }
@@ -371,167 +336,217 @@ declare namespace Panel {
 }
 
 
+declare namespace Trigger {
+    var displayName: string;
+}
+
+
+declare namespace Provider {
+    var displayName: string;
+}
+
+
 declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Row {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace Group {
+declare namespace ClearAll {
     var displayName: string;
 }
 
 
-declare namespace Separator {
+declare namespace Sections {
     var displayName: string;
 }
 
 
-declare namespace SelectRoot {
+declare namespace Settings {
     var displayName: string;
 }
 
 
-declare namespace SelectTrigger {
+declare namespace ComboboxRoot {
     var displayName: string;
 }
 
 
-declare namespace SelectValue {
+declare namespace ComboboxInput {
     var displayName: string;
 }
 
 
-declare namespace SelectContent {
+declare namespace ComboboxTrigger {
     var displayName: string;
 }
 
 
-declare namespace SelectItem {
+declare namespace ComboboxInputGroup {
     var displayName: string;
 }
 
 
-declare namespace SelectGroup {
+declare namespace ComboboxContent {
     var displayName: string;
 }
 
 
-declare namespace SelectGroupLabel {
+declare namespace ComboboxList {
     var displayName: string;
 }
 
 
-declare namespace SelectSeparator {
+declare namespace ComboboxItem {
     var displayName: string;
 }
 
 
-declare namespace Provider {
+declare namespace ComboboxEmpty {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace ComboboxGroup {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace ComboboxGroupLabel {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace ComboboxClear {
     var displayName: string;
 }
 
 
-declare namespace ComboboxRoot {
+declare namespace ComboboxChips {
     var displayName: string;
 }
 
 
-declare namespace ComboboxInput {
+declare namespace ComboboxChip {
     var displayName: string;
 }
 
 
-declare namespace ComboboxTrigger {
+declare namespace ComboboxChipRemove {
     var displayName: string;
 }
 
 
-declare namespace ComboboxInputGroup {
+declare namespace ComboboxValue {
     var displayName: string;
 }
 
 
-declare namespace ComboboxContent {
+declare namespace ComboboxStatus {
     var displayName: string;
 }
 
 
-declare namespace ComboboxList {
+declare namespace ComboboxCollection {
     var displayName: string;
 }
 
 
-declare namespace ComboboxItem {
+declare namespace Provider {
     var displayName: string;
 }
 
 
-declare namespace ComboboxEmpty {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace ComboboxGroup {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace ComboboxGroupLabel {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace ComboboxClear {
+declare namespace SelectRoot {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChips {
+declare namespace SelectTrigger {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChip {
+declare namespace SelectValue {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChipRemove {
+declare namespace SelectContent {
     var displayName: string;
 }
 
 
-declare namespace ComboboxValue {
+declare namespace SelectItem {
     var displayName: string;
 }
 
 
-declare namespace ComboboxStatus {
+declare namespace SelectGroup {
     var displayName: string;
 }
 
 
-declare namespace ComboboxCollection {
+declare namespace SelectGroupLabel {
+    var displayName: string;
+}
+
+
+declare namespace SelectSeparator {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Viewport {
+    var displayName: string;
+}
+
+
+declare namespace Row {
+    var displayName: string;
+}
+
+
+declare namespace Interval {
+    var displayName: string;
+}
+
+
+declare namespace TimelineLink {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteStandalone {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteAsyncStandalone {
     var displayName: string;
 }
 
@@ -606,12 +621,22 @@ declare namespace AutocompleteStatus {
 }
 
 
-declare namespace AutocompleteStandalone {
+declare namespace TreeRow {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteAsyncStandalone {
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Items {
+    var displayName: string;
+}
+
+
+declare namespace Item {
     var displayName: string;
 }
 
@@ -626,37 +651,37 @@ declare namespace DataTableTable {
 }
 
 
-declare namespace DataTableFooter {
+declare namespace DataTableToolbar {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace DataTableColumnSettings {
     var displayName: string;
 }
 
 
-declare namespace Items {
+declare namespace DataTableFooter {
     var displayName: string;
 }
 
 
-declare namespace Item {
+declare namespace DataTableFilters {
     var displayName: string;
 }
 
 
-declare namespace DataTableColumnSettings {
+declare namespace DataTableBody {
     var displayName: string;
 }
 
 
-declare namespace DataTableToolbar {
+declare namespace DataTableHeaders {
     var displayName: string;
 }
 
 
-declare namespace DataTableFilters {
+declare namespace AddFilterPanel {
     var displayName: string;
 }
 
@@ -664,3 +689,13 @@ declare namespace DataTableFilters {
 declare namespace AsyncErrorState {
     var displayName: string;
 }
+
+
+declare namespace DataTableHeaderContextMenu {
+    var displayName: string;
+}
+
+
+declare namespace DataTableCellContextMenu {
+    var displayName: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-platform/app-shell",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "description": "An opinionated React application framework for building ERP applications on Tailor Platform",
   "keywords": [
     "app-shell",
@@ -65,28 +65,32 @@
   },
   "devDependencies": {
     "@fontsource-variable/noto-sans-jp": "5.3.0",
-    "@microsoft/api-extractor": "7.58.12",
-    "@tailwindcss/postcss": "^4.3.3",
+    "@microsoft/api-extractor": "7.60.1",
+    "@tailor-platform/eslint-plugin-app-shell": "0.3.0",
+    "@tailwindcss/postcss": "^4.3.5",
     "@testing-library/react": "16.3.3",
-    "@testing-library/user-event": "14.6.7",
+    "@testing-library/user-event": "14.6.8",
     "@types/encoding-japanese": "2.2.1",
     "@types/node": "^25.9.8",
     "@types/papaparse": "5.5.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^6.1.0",
-    "@vitest/coverage-v8": "4.1.11",
-    "happy-dom": "20.14.5",
-    "postcss": "8.5.30",
+    "@vitest/browser-playwright": "4.1.12",
+    "@vitest/coverage-v8": "4.1.12",
+    "happy-dom": "21.0.4",
+    "playwright": "1.63.0",
+    "postcss": "8.5.32",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-hook-form": "7.71.2",
-    "tailwindcss": "^4.3.3",
+    "tailwindcss": "^4.3.5",
     "tw-animate-css": "1.4.0",
     "typescript": "5.9.3",
     "vite": "^8.2.2",
-    "vite-plugin-dts": "5.0.3",
-    "vitest": "^4.1.11"
+    "vite-plugin-dts": "5.1.2",
+    "vitest": "^4.1.12",
+    "zod": "4.6.7"
   },
   "peerDependencies": {
     "react": ">=19.2.7",
@@ -99,6 +103,7 @@
     "vendor:fonts": "node scripts/sync-noto-fonts.mjs",
     "lint": "oxlint -c .oxlintrc.jsonc",
     "test": "vitest run",
+    "test:browser": "pnpm build && vitest run --config vitest.browser.config.ts",
     "type-check": "tsc --incremental"
   }
 }

package/skills/app-shell-patterns/SKILL.md

@@ -1,6 +1,8 @@
 ---
 name: app-shell-patterns
 description: "Best-practice UI patterns and correct component usage for building pages in apps that use @tailor-platform/app-shell. Use when: building or editing any screen, page, list, table, detail view, form, modal, dialog, wizard, or bulk/confirm/toast interaction in an app with @tailor-platform/app-shell installed — when choosing the right AppShell component, layout, or design token for a UI — or when upgrading @tailor-platform/app-shell, or diagnosing styling, theming, or dark-mode breakage that appeared after a version bump."
+metadata:
+  app-shell-version: "1.20.0"
 ---
 
 # App-Shell Patterns
@@ -9,6 +11,10 @@ description: "Best-practice UI patterns and correct component usage for building
 
 Select and implement the correct UI pattern using @tailor-platform/app-shell components.
 
+## Version
+
+This skill was generated from `@tailor-platform/app-shell` **1.20.0**. Before relying on it, compare that with the version installed in the app you're working on (resolve `@tailor-platform/app-shell/package.json` from that app, not the monorepo root). If they differ, this copy is stale: tell the user and suggest re-syncing it from the installed package's `skills/app-shell-patterns/` directory.
+
 ## Concepts
 
 Cross-cutting guides that underpin every screen — styling & theming and the token system, GraphQL data access, building custom components, plus auth and routing. Patterns and components build on these.
@@ -64,6 +70,7 @@ Every AppShell component, its API surface, and usage guidance. Read the entry fo
 | [GlobalHeaderLayout](references/components/global-header-layout.md)     | Opinionated layout with an app-wide header above the whole shell and a sidebar that collapses to a persistent icon rail                            |
 | [Grid](references/components/grid.md)                                   | Generic CSS-Grid layout primitive for equal or custom-width columns with responsive reflow, auto-fit, and spanning                                 |
 | [Input](references/components/input.md)                                 | Styled text input with consistent theming                                                                                                          |
+| [ItemList](references/components/item-list.md)                          | Compact icon-and-label lists for consistent navigation inside and outside the Sidebar                                                              |
 | [Layout](references/components/layout.md)                               | Responsive column layout component for organizing page content in 1, 2, or 3 columns                                                               |
 | [Menu](references/components/menu.md)                                   | Dropdown menu with a compound component API, supporting checkbox/radio items, groups, separators, and nested sub-menus                             |
 | [MetricCard](references/components/metric-card.md)                      | Compact card for dashboard KPI summaries with title, value, optional trend and description                                                         |
@@ -81,39 +88,41 @@ Every AppShell component, its API surface, and usage guidance. Read the entry fo
 | [Timeline](references/components/timeline.md)                           | Composable primitives for building time-based layouts with axis guides, row backgrounds, intervals, and dependency links                           |
 | [Toolbar](references/components/toolbar.md)                             | Full-width action bars with composable rows, grouped controls, and keyboard navigation                                                             |
 | [Tooltip](references/components/tooltip.md)                             | Hover/focus tooltip with configurable placement and shared delay via Tooltip.Provider                                                              |
+| [Tree](references/components/tree.md)                                   | Browse, pick one, or tick many items in a hierarchy — inline with Tree, or in a search dialog with TreePicker                                      |
 | [WithGuard](references/components/with-guard.md)                        | Conditionally render UI elements based on guard evaluation with support for async permissions checks                                               |
 
 ## Available Hooks & Functions
 
 Hooks, factory functions, guards, and router utilities exported by AppShell.
 
-| Name                                                                                       | Description                                                                        |
-| ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |
-| [createAIGatewayClient](references/api/create-ai-gateway-client.md)                        | Create a low-level AI Gateway client that reuses AppShell authentication           |
-| [createTypedPaths](references/api/create-typed-paths.md)                                   | Generate type-safe route paths from file-based routing                             |
-| [defineI18nLabels](references/api/define-i18n-labels.md)                                   | Type-safe locale-first labels for component text and localized navigation metadata |
-| [defineModule](references/api/define-module.md)                                            | Define a top-level module that appears in the main navigation                      |
-| [defineResource](references/api/define-resource.md)                                        | Define a nested resource (page) within a module                                    |
-| [hidden](references/api/guards/hidden.md)                                                  | Guard function that denies access and returns 404 Not Found                        |
-| [Guards Overview](references/api/guards/overview.md)                                       | Access control system for routes and components using guard functions              |
-| [pass](references/api/guards/pass.md)                                                      | Guard function that allows access and continues to the next guard                  |
-| [redirectTo](references/api/guards/redirect-to.md)                                         | Guard function that redirects to another page                                      |
-| [useLocation](references/api/router/use-location.md)                                       | Hook to access current location object with pathname, search, and state            |
-| [useNavigate](references/api/router/use-navigate.md)                                       | Hook for programmatic navigation between routes                                    |
-| [useParams](references/api/router/use-params.md)                                           | Hook to access dynamic route parameters                                            |
-| [useAIChat](references/api/use-ai-chat.md)                                                 | Simple text-only chat hook for AI Gateway                                          |
-| [useAppShell](references/api/use-app-shell.md)                                             | Hook to access AppShell context data and configuration                             |
-| [useAppShellConfig](references/api/use-app-shell-config.md)                                | Hook to access AppShell configuration data                                         |
-| [useAppShellData](references/api/use-app-shell-data.md)                                    | Hook to access custom context data passed to AppShell                              |
-| [useAuth](references/api/use-auth.md)                                                      | Hook for accessing authentication state and methods                                |
-| [useOverrideBreadcrumb](references/api/use-override-breadcrumb.md)                         | Hook for dynamically overriding breadcrumb titles from within page components      |
-| [usePageMeta](references/api/use-page-meta.md)                                             | Hook to resolve page metadata from route path                                      |
-| [useRegisterCommandPaletteActions](references/api/use-register-command-palette-actions.md) | Hook for registering contextual page actions into the CommandPalette               |
-| [useResolvedLocale](references/api/use-resolved-locale.md)                                 | Hook to access the full BCP-47 locale and language code from AppShell context      |
-| [useRouteError](references/api/use-route-error.md)                                         | Hook to access error details in custom error boundaries                            |
-| [useTheme](references/api/use-theme.md)                                                    | Hook for accessing and controlling theme (light/dark mode)                         |
-| [useTimeZone](references/api/use-time-zone.md)                                             | Hook to access the configured IANA timezone from AppShell context                  |
-| [useToast](references/api/use-toast.md)                                                    | Hook for displaying toast notifications                                            |
+| Name                                                                                       | Description                                                                                                                               |
+| ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| [Value aggregations](references/api/aggregations.md)                                       | Reusable selector-based sum, average, minimum, maximum, and non-null count over row collections, with optional result-only transformation |
+| [createAIGatewayClient](references/api/create-ai-gateway-client.md)                        | Create a low-level AI Gateway client that reuses AppShell authentication                                                                  |
+| [createTypedPaths](references/api/create-typed-paths.md)                                   | Generate type-safe route paths from file-based routing                                                                                    |
+| [defineI18nLabels](references/api/define-i18n-labels.md)                                   | Type-safe locale-first labels for component text and localized navigation metadata                                                        |
+| [defineModule](references/api/define-module.md)                                            | Define a top-level module that appears in the main navigation                                                                             |
+| [defineResource](references/api/define-resource.md)                                        | Define a nested resource (page) within a module                                                                                           |
+| [hidden](references/api/guards/hidden.md)                                                  | Guard function that denies access and returns 404 Not Found                                                                               |
+| [Guards Overview](references/api/guards/overview.md)                                       | Access control system for routes and components using guard functions                                                                     |
+| [pass](references/api/guards/pass.md)                                                      | Guard function that allows access and continues to the next guard                                                                         |
+| [redirectTo](references/api/guards/redirect-to.md)                                         | Guard function that redirects to another page                                                                                             |
+| [useLocation](references/api/router/use-location.md)                                       | Hook to access current location object with pathname, search, and state                                                                   |
+| [useNavigate](references/api/router/use-navigate.md)                                       | Hook for programmatic navigation between routes                                                                                           |
+| [useParams](references/api/router/use-params.md)                                           | Hook to access dynamic route parameters                                                                                                   |
+| [useAIChat](references/api/use-ai-chat.md)                                                 | AI Gateway chat hook with optional local tools                                                                                            |
+| [useAppShell](references/api/use-app-shell.md)                                             | Hook to access AppShell context data and configuration                                                                                    |
+| [useAppShellConfig](references/api/use-app-shell-config.md)                                | Hook to access AppShell configuration data                                                                                                |
+| [useAppShellData](references/api/use-app-shell-data.md)                                    | Hook to access custom context data passed to AppShell                                                                                     |
+| [useAuth](references/api/use-auth.md)                                                      | Hook for accessing authentication state and methods                                                                                       |
+| [useOverrideBreadcrumb](references/api/use-override-breadcrumb.md)                         | Hook for dynamically overriding breadcrumb titles from within page components                                                             |
+| [usePageMeta](references/api/use-page-meta.md)                                             | Hook to resolve page metadata from route path                                                                                             |
+| [useRegisterCommandPaletteActions](references/api/use-register-command-palette-actions.md) | Hook for registering contextual page actions into the CommandPalette                                                                      |
+| [useResolvedLocale](references/api/use-resolved-locale.md)                                 | Hook to access the full BCP-47 locale and language code from AppShell context                                                             |
+| [useRouteError](references/api/use-route-error.md)                                         | Hook to access error details in custom error boundaries                                                                                   |
+| [useTheme](references/api/use-theme.md)                                                    | Hook for accessing and controlling theme (light/dark mode)                                                                                |
+| [useTimeZone](references/api/use-time-zone.md)                                             | Hook to access the configured IANA timezone from AppShell context                                                                         |
+| [useToast](references/api/use-toast.md)                                                    | Hook for displaying toast notifications                                                                                                   |
 
 ## Available Pages
 
@@ -179,6 +188,8 @@ Full rationale in [`styling-theming`](references/concepts/styling-theming.md)
 
 - **One primary action per view:** at most one primary/filled `Button`; everything else is `outline`/`secondary`/`ghost`.
 - **Status badges by semantic color:** a **filled** semantic variant for the record's primary/lifecycle status, **`outline-*`** for secondary statuses, **`subtle-*`** for tags; reserve brand `default` for non-status emphasis.
+- **Text uses `Text` and typography roles:** render headings, body copy, labels, and captions with [`Text`](references/components/text.md) and a `variant` (`heading-md`, `body-md`, `body-sm`, `label-md`, …) — never a bare `<p>`, `<h*>`, or `<span>` styled with size and weight utilities such as `text-lg font-semibold` or `text-sm`. Set the heading level with `Text.h1` to `Text.h6` (`<Text.h3 variant="heading-md">`), not by its size, and the color with a token in `className`. For other plain elements use `Text.p`, `Text.span` or `Text.div`; use `render` only to compose with another component. On an element you style yourself, such as a `th`, use the role utility (`text-label-md`). Pick the size with `variant`: a size class such as `text-sm` on `Text` has no effect. `Layout.Header` already renders the page title, and a form field label is [`Field.Label`](references/components/form.md), which already has the label role. Role table and color pairings: [`styling-theming`](references/concepts/styling-theming.md) → Typography.
+- **Status and feedback color by semantic role:** use a component variant first (`Badge`, `Alert`, `Button variant="destructive"`). On your own element, use the roles `{info|success|warning|danger|neutral}-{surface|border|solid|text|contrast|indicator}`, for example `bg-warning-surface text-warning-text border-warning-border`. Error text is `text-danger-text`. Never write the deprecated `--status-*`, `--alert-*` or `--destructive` tokens or their utilities (`bg-status-*`, `text-alert-*`, `bg-destructive`, `text-destructive`) in new code; the next major removes them. When you edit a screen that still uses them, replace them: `text-destructive` → `text-danger-text`, `bg-status-completed` → `bg-success-solid`, `bg-alert-warning-background` → `bg-warning-surface`. Full mapping: [`styling-theming`](references/concepts/styling-theming.md) → Semantic color roles.
 - **No duplicate actions:** an action lives in exactly one place — never repeat the same action in both `Layout.Header` and `ActionPanel`.
 - **Action placement:** primary CTA + status in `Layout.Header`; workflow actions in `ActionPanel`; back/navigation in the breadcrumb — never in `ActionPanel`.
 - **Metric tiles always go in a `Grid`** (`columns={{ initial: 1, md: 2, xl: 4 }}`) — never one-per-row.