@tailor-platform/app-shell 1.13.0 → 1.14.0

package/dist/vite-plugin.d.ts

@@ -1,156 +1,177 @@
-import { appShellRoutes } from '@tailor-platform/app-shell-vite-plugin';
+import { appShellRoutes } from '@tailor-platform/vite-plugin-app-shell';
+import { AppShellRoutesPluginOptions } from '@tailor-platform/vite-plugin-app-shell';
+import { TypedRoutesOptions } from '@tailor-platform/vite-plugin-app-shell';
 
 export { appShellRoutes }
 
+export { AppShellRoutesPluginOptions }
+
+export { TypedRoutesOptions }
+
 export { }
 
 
-declare namespace Root {
+declare namespace AutocompleteStandalone {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace AutocompleteAsyncStandalone {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace AutocompleteRoot {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace AutocompleteValue {
     var displayName: string;
 }
 
 
-declare namespace Image {
+declare namespace AutocompleteInput {
     var displayName: string;
 }
 
 
-declare namespace Fallback {
+declare namespace AutocompleteTrigger {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace AutocompleteInputGroup {
     var displayName: string;
 }
 
 
-declare namespace Viewport {
+declare namespace AutocompleteContent {
     var displayName: string;
 }
 
 
-declare namespace Row {
+declare namespace AutocompleteList {
     var displayName: string;
 }
 
 
-declare namespace Interval {
+declare namespace AutocompleteItem {
     var displayName: string;
 }
 
 
-declare namespace TimelineLink {
+declare namespace AutocompleteEmpty {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace AutocompleteClear {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace AutocompleteGroup {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace AutocompleteGroupLabel {
     var displayName: string;
 }
 
 
-declare namespace Item {
+declare namespace AutocompleteCollection {
     var displayName: string;
 }
 
 
-declare namespace LinkItem {
+declare namespace AutocompleteStatus {
     var displayName: string;
 }
 
 
-declare namespace CheckboxItem {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace CheckboxItemIndicator {
+declare namespace Viewport {
     var displayName: string;
 }
 
 
-declare namespace RadioItem {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace RadioItemIndicator {
+declare namespace Interval {
     var displayName: string;
 }
 
 
-declare namespace RadioGroup {
+declare namespace TimelineLink {
     var displayName: string;
 }
 
 
-declare namespace Group {
+declare namespace Provider {
     var displayName: string;
 }
 
 
-declare namespace GroupLabel {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace MenuSeparator {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace SubmenuRoot {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace SubmenuTrigger {
+declare namespace SelectRoot {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace SelectTrigger {
     var displayName: string;
 }
 
 
-declare namespace List {
+declare namespace SelectValue {
     var displayName: string;
 }
 
 
-declare namespace Tab {
+declare namespace SelectContent {
     var displayName: string;
 }
 
 
-declare namespace Panel {
+declare namespace SelectItem {
+    var displayName: string;
+}
+
+
+declare namespace SelectGroup {
+    var displayName: string;
+}
+
+
+declare namespace SelectGroupLabel {
+    var displayName: string;
+}
+
+
+declare namespace SelectSeparator {
     var displayName: string;
 }
 
@@ -165,77 +186,82 @@ declare namespace Trigger {
 }
 
 
-declare namespace Close {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Item {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace LinkItem {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace CheckboxItem {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace CheckboxItemIndicator {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace RadioItem {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace RadioItemIndicator {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace RadioGroup {
     var displayName: string;
 }
 
 
-declare namespace Body {
+declare namespace Group {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace GroupLabel {
     var displayName: string;
 }
 
 
-declare namespace Row {
+declare namespace MenuSeparator {
     var displayName: string;
 }
 
 
-declare namespace Head {
+declare namespace SubmenuRoot {
     var displayName: string;
 }
 
 
-declare namespace Cell {
+declare namespace SubmenuTrigger {
     var displayName: string;
 }
 
 
-declare namespace Caption {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Provider {
+declare namespace Image {
+    var displayName: string;
+}
+
+
+declare namespace Fallback {
     var displayName: string;
 }
 
@@ -245,12 +271,12 @@ declare namespace Root {
 }
 
 
-declare namespace Trigger {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Description {
     var displayName: string;
 }
 
@@ -260,7 +286,12 @@ declare namespace Root {
 }
 
 
-declare namespace Header {
+declare namespace Trigger {
+    var displayName: string;
+}
+
+
+declare namespace Close {
     var displayName: string;
 }
 
@@ -270,82 +301,82 @@ declare namespace Content {
 }
 
 
-declare namespace SelectRoot {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace SelectTrigger {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace SelectValue {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace SelectContent {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace SelectItem {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace SelectGroup {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace SelectGroupLabel {
+declare namespace Body {
     var displayName: string;
 }
 
 
-declare namespace SelectSeparator {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace Head {
     var displayName: string;
 }
 
 
-declare namespace Close {
+declare namespace Cell {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Caption {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace List {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace Tab {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace Panel {
     var displayName: string;
 }
 
@@ -435,112 +466,97 @@ declare namespace ComboboxCollection {
 }
 
 
-declare namespace Root {
-    var displayName: string;
-}
-
-
-declare namespace Label {
-    var displayName: string;
-}
-
-
-declare namespace Control {
-    var displayName: string;
-}
-
-
-declare namespace Description {
+declare namespace DataTableRoot {
     var displayName: string;
 }
 
 
-declare namespace Error {
+declare namespace DataTableTable {
     var displayName: string;
 }
 
 
-declare namespace Validity {
+declare namespace DataTableFooter {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteRoot {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteValue {
+declare namespace Label {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteInput {
+declare namespace Control {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteTrigger {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteInputGroup {
+declare namespace Error {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteContent {
+declare namespace Validity {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteList {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteItem {
+declare namespace Legend {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteEmpty {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteClear {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteGroup {
+declare namespace Close {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteGroupLabel {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteCollection {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteStatus {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteStandalone {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteAsyncStandalone {
+declare namespace Description {
     var displayName: string;
 }
 
@@ -550,22 +566,12 @@ declare namespace Root {
 }
 
 
-declare namespace Legend {
-    var displayName: string;
-}
-
-
-declare namespace DataTableRoot {
-    var displayName: string;
-}
-
-
-declare namespace DataTableTable {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace DataTableFooter {
+declare namespace Content {
     var displayName: string;
 }
 

package/dist/vite-plugin.js

@@ -1,2 +1,2 @@
-import { appShellRoutes as e } from "@tailor-platform/app-shell-vite-plugin";
+import { appShellRoutes as e } from "@tailor-platform/vite-plugin-app-shell";
 export { e as appShellRoutes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-platform/app-shell",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "An opinionated React application framework for building ERP applications on Tailor Platform",
   "keywords": [
     "app-shell",
@@ -61,14 +61,14 @@
     "react-router": "^8.3.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
-    "@tailor-platform/app-shell-vite-plugin": "0.2.3"
+    "@tailor-platform/vite-plugin-app-shell": "0.3.0"
   },
   "devDependencies": {
     "@fontsource-variable/noto-sans-jp": "5.3.0",
     "@microsoft/api-extractor": "7.58.12",
     "@tailwindcss/postcss": "^4.3.3",
     "@testing-library/react": "16.3.3",
-    "@testing-library/user-event": "14.6.6",
+    "@testing-library/user-event": "14.6.7",
     "@types/encoding-japanese": "2.2.1",
     "@types/node": "^25.9.5",
     "@types/papaparse": "5.5.2",

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

@@ -25,6 +25,12 @@ These are the foundational rules that underpin all patterns. All patterns build
 
 Read it when upgrading `@tailor-platform/app-shell`, and whenever styling, theming, or dark mode looks wrong after a version bump. These breakages are silent: the build succeeds and nothing warns, so the cause is not discoverable from the error output. The package ships no CHANGELOG, so this file is the only migration record available locally.
 
+## Available Pages
+
+A page is the shape of a whole screen — the outer choice, made before picking patterns for the parts inside it. Where a pattern is one recipe, a page compares the layouts a screen could take and says when each applies. Match the screen first, then use the patterns the entry cites for the pieces within it.
+
+
+
 ## Available Patterns
 
 ### detail
@@ -83,4 +89,5 @@ Full rationale in [`design-system.md`](references/fundamental/design-system.md)
 - **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.
 - **Forms default to `form/modal`** — only build a routed full-page form when the design explicitly calls for one.
+- **Forms use AppShell `Form` + `Field`**, submitting via `onFormSubmit` — never a bare `<form onSubmit>` with `FormData`. `onFormSubmit` reads registered `Field.Root`s, so every control (dropdowns included) just needs a wrapping `Field.Root name="…"` — no `name` on the control, no `useState`. React Hook Form is optional, consumer-installed, and only warranted for cross-field validation, field arrays, or a Zod resolver. Details in [`components.md`](references/fundamental/components.md) → Forms.
 - **Handle every state:** loading (skeleton), empty (labelled empty state), and error (inline + retry) — never ship only the happy path.