@tailor-platform/app-shell 1.19.0 → 1.20.0

package/dist/vite-plugin.d.ts

@@ -16,17 +16,17 @@ declare namespace Root {
 }
 
 
-declare namespace Header {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace Body {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace Root {
     var displayName: string;
 }
 
@@ -36,32 +36,12 @@ declare namespace Row {
 }
 
 
-declare namespace Head {
-    var displayName: string;
-}
-
-
-declare namespace Cell {
-    var displayName: string;
-}
-
-
-declare namespace Caption {
-    var displayName: string;
-}
-
-
-declare namespace Root {
-    var displayName: string;
-}
-
-
-declare namespace Title {
+declare namespace Group {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace Separator {
     var displayName: string;
 }
 
@@ -86,42 +66,42 @@ declare namespace Fallback {
 }
 
 
-declare namespace SelectRoot {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace SelectTrigger {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace SelectValue {
+declare namespace Body {
     var displayName: string;
 }
 
 
-declare namespace SelectContent {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace SelectItem {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace SelectGroup {
+declare namespace Head {
     var displayName: string;
 }
 
 
-declare namespace SelectGroupLabel {
+declare namespace Cell {
     var displayName: string;
 }
 
 
-declare namespace SelectSeparator {
+declare namespace Caption {
     var displayName: string;
 }
 
@@ -131,52 +111,52 @@ declare namespace Root {
 }
 
 
-declare namespace Header {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Close {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace Close {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace Content {
     var displayName: string;
 }
 
@@ -356,162 +336,207 @@ 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 Provider {
+declare namespace Settings {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace ComboboxRoot {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace ComboboxInput {
     var displayName: string;
 }
 
 
-declare namespace ClearAll {
+declare namespace ComboboxTrigger {
     var displayName: string;
 }
 
 
-declare namespace Sections {
+declare namespace ComboboxInputGroup {
     var displayName: string;
 }
 
 
-declare namespace Provider {
+declare namespace ComboboxContent {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace ComboboxList {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace ComboboxItem {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace ComboboxEmpty {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace ComboboxGroup {
     var displayName: string;
 }
 
 
-declare namespace Settings {
+declare namespace ComboboxGroupLabel {
     var displayName: string;
 }
 
 
-declare namespace ComboboxRoot {
+declare namespace ComboboxClear {
     var displayName: string;
 }
 
 
-declare namespace ComboboxInput {
+declare namespace ComboboxChips {
     var displayName: string;
 }
 
 
-declare namespace ComboboxTrigger {
+declare namespace ComboboxChip {
     var displayName: string;
 }
 
 
-declare namespace ComboboxInputGroup {
+declare namespace ComboboxChipRemove {
     var displayName: string;
 }
 
 
-declare namespace ComboboxContent {
+declare namespace ComboboxValue {
     var displayName: string;
 }
 
 
-declare namespace ComboboxList {
+declare namespace ComboboxStatus {
     var displayName: string;
 }
 
 
-declare namespace ComboboxItem {
+declare namespace ComboboxCollection {
     var displayName: string;
 }
 
 
-declare namespace ComboboxEmpty {
+declare namespace Provider {
     var displayName: string;
 }
 
 
-declare namespace ComboboxGroup {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace ComboboxGroupLabel {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace ComboboxClear {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChips {
+declare namespace SelectRoot {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChip {
+declare namespace SelectTrigger {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChipRemove {
+declare namespace SelectValue {
     var displayName: string;
 }
 
 
-declare namespace ComboboxValue {
+declare namespace SelectContent {
     var displayName: string;
 }
 
 
-declare namespace ComboboxStatus {
+declare namespace SelectItem {
     var displayName: string;
 }
 
 
-declare namespace ComboboxCollection {
+declare namespace SelectGroup {
+    var displayName: string;
+}
+
+
+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;
 }
 
@@ -596,76 +621,81 @@ declare namespace AutocompleteStatus {
 }
 
 
-declare namespace DataTableRoot {
+declare namespace TreeRow {
     var displayName: string;
 }
 
 
-declare namespace DataTableTable {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace DataTableFooter {
+declare namespace Items {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Item {
     var displayName: string;
 }
 
 
-declare namespace Viewport {
+declare namespace DataTableRoot {
     var displayName: string;
 }
 
 
-declare namespace Row {
+declare namespace DataTableTable {
     var displayName: string;
 }
 
 
-declare namespace Interval {
+declare namespace DataTableToolbar {
     var displayName: string;
 }
 
 
-declare namespace TimelineLink {
+declare namespace DataTableColumnSettings {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace DataTableFooter {
     var displayName: string;
 }
 
 
-declare namespace Items {
+declare namespace DataTableFilters {
     var displayName: string;
 }
 
 
-declare namespace Item {
+declare namespace DataTableBody {
     var displayName: string;
 }
 
 
-declare namespace DataTableColumnSettings {
+declare namespace DataTableHeaders {
     var displayName: string;
 }
 
 
-declare namespace DataTableToolbar {
+declare namespace AddFilterPanel {
     var displayName: string;
 }
 
 
-declare namespace DataTableFilters {
+declare namespace AsyncErrorState {
     var displayName: string;
 }
 
 
-declare namespace AsyncErrorState {
+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.19.0",
+  "version": "1.20.0",
   "description": "An opinionated React application framework for building ERP applications on Tailor Platform",
   "keywords": [
     "app-shell",
@@ -65,8 +65,9 @@
   },
   "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.8",
     "@types/encoding-japanese": "2.2.1",
@@ -75,20 +76,21 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^6.1.0",
-    "@vitest/browser-playwright": "4.1.11",
-    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/browser-playwright": "4.1.12",
+    "@vitest/coverage-v8": "4.1.12",
     "happy-dom": "21.0.4",
     "playwright": "1.63.0",
-    "postcss": "8.5.31",
+    "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.1.2",
-    "vitest": "^4.1.11"
+    "vitest": "^4.1.12",
+    "zod": "4.6.7"
   },
   "peerDependencies": {
     "react": ">=19.2.7",

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

@@ -2,7 +2,7 @@
 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.19.0"
+  app-shell-version: "1.20.0"
 ---
 
 # App-Shell Patterns
@@ -13,7 +13,7 @@ Select and implement the correct UI pattern using @tailor-platform/app-shell com
 
 ## Version
 
-This skill was generated from `@tailor-platform/app-shell` **1.19.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.
+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
 
@@ -88,6 +88,7 @@ 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
@@ -109,7 +110,7 @@ Hooks, factory functions, guards, and router utilities exported by AppShell.
 | [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                                                                                                 |
+| [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                                                                                     |

package/skills/app-shell-patterns/references/api/create-ai-gateway-client.md

@@ -7,7 +7,7 @@ description: Create a low-level AI Gateway client that reuses AppShell authentic
 
 # createAIGatewayClient
 
-Creates a small AI Gateway transport client for text-only chat completions.
+Creates a small AI Gateway transport client for chat completions and local function tool calls.
 
 ## Signature
 
@@ -43,6 +43,7 @@ interface AIGatewayClient {
 The iterable yields completion events:
 
 - `text-delta` — append `event.text` to build the assistant response
+- `tool-call` — a local function tool call requested by the model
 - `done` — terminal event with an optional `finishReason`
 
 ## Related Types
@@ -56,11 +57,33 @@ type AIGatewayChatMessage =
   | {
       role: "assistant";
       content?: string;
+      toolCalls?: AIGatewayToolCall[];
+    }
+  | {
+      role: "tool";
+      toolCallId: string;
+      content: string;
     };
 
+interface AIGatewayToolCall {
+  id: string;
+  name: string;
+  argumentsText: string;
+}
+
+interface AIGatewayFunctionTool {
+  type: "function";
+  function: {
+    name: string;
+    description?: string;
+    parameters: Record<string, unknown>;
+  };
+}
+
 interface AIGatewayChatRequest {
   model: string;
   messages: AIGatewayChatMessage[];
+  tools?: AIGatewayFunctionTool[];
   signal?: AbortSignal;
 }
 
@@ -69,6 +92,12 @@ type AIChatCompletionEvent =
       type: "text-delta";
       text: string;
     }
+  | {
+      type: "tool-call";
+      toolCallId: string;
+      toolName: string;
+      argumentsText: string;
+    }
   | {
       type: "done";
       finishReason?: string;
@@ -106,7 +135,8 @@ console.log(text);
 ## Notes
 
 - AppShell chooses the appropriate AI Gateway transport automatically
-- The low-level API is intentionally narrow: text deltas plus completion metadata
+- Local tools are sent as normalized `type: "function"` definitions; provider-native tools are not supported
+- The low-level API stays event-based so hooks can layer streaming UI and tool loops on top
 - `request.signal` is passed through so callers can abort in-flight work
 
 ## Related

package/skills/app-shell-patterns/references/api/define-module.md

@@ -100,11 +100,11 @@ A module object that can be passed to the `modules` prop of `AppShell`.
 ### Basic Module
 
 ```typescript
-import { defineModule } from "@tailor-platform/app-shell";
+import { defineModule, Text } from "@tailor-platform/app-shell";
 
 const dashboardModule = defineModule({
   path: "dashboard",
-  component: () => <h1>Dashboard</h1>,
+  component: () => <Text.h1>Dashboard</Text.h1>,
   resources: [],
 });
 ```
@@ -183,14 +183,14 @@ const adminModule = defineModule({
 ### Module with Error Boundary
 
 ```typescript
-import { useRouteError } from "@tailor-platform/app-shell";
+import { Text, useRouteError } from "@tailor-platform/app-shell";
 
 const ErrorBoundary = () => {
   const error = useRouteError() as Error;
   return (
     <div>
-      <h1>Module Error</h1>
-      <p>{error.message}</p>
+      <Text.h1>Module Error</Text.h1>
+      <Text.p>{error.message}</Text.p>
     </div>
   );
 };