# wcz-layout exports Public import subpaths and commonly used exports. Read this when you need to know where a symbol lives; you do not need it loaded for ordinary feature work. ## `wcz-layout` The root subpath. Everything the application shell needs. - `LayoutProvider` — root shell provider. Props: `theme` (required), `navigation?`, `options?`. Installs the Emotion cache, MUI `ThemeProvider`, `LocalizationProvider` (dayjs), i18next and the dialogs provider. Wrap `{children}` with it inside `` in `__root.tsx`. Do not install any of those yourself. - `Navigation` — the type for the sidebar tree. Items are `{ kind: "item" | "header" | "group" | "divider" }`; an item takes `to` or `href`, `title`, `icon` and optional `search`; groups take `title`, `icon` and `children`; headers take `title`; every kind accepts `hidden`. - `rootRouteHead` — returns the root route's `head()` value (title, meta, links). - `getUser({ queryClient })` — resolves the signed-in user. Call it in the root `beforeLoad` and return `{ user }`; that is what makes `Route.useRouteContext().user` available on every route. - `loginProvidersQueryOptions` — query options for the configured OAuth providers. The `/login` route loads it so the buttons server-render. - `WISTRON_PRIMARY_COLOR`, `WISTRON_SECONDARY_COLOR` — brand colors for the app's theme. ## `wcz-layout/vite` - `viteWczLayout()` — **required** Vite plugin. Keep the template's plugin order after `tanstackStart()`, `nitro()`, `viteReact()` and the React Compiler babel plugin. It builds the `virtual:wcz-layout` module from the app's `src/lib/locales/*.json`, `src/lib/auth/permissions.ts`, `src/lib/auth/scopes.ts`, `src/env.ts` and `public/manifest.json`, and loads Vault secrets into `process.env` during `serve`. Without it the build fails to resolve `virtual:wcz-layout`. The app must also declare that module in `src/types/wcz-layout.d.ts`. ## `wcz-layout/components` - `LayoutTable` — table renderer; see the `table` skill. Types: `LayoutTableProps`, `RowAction`, `LayoutColumnMeta`, `FilterOperator`, `TableFilterOption`, `TableFilterVariant` - `AggregatedCell` — aggregated value cell for grouped rows - `Fullscreen` — fills the viewport, for a page whose only content is a table - `Dropzone`, `FileViewer` — file upload and preview; see the `services` skill - `LoginForm` — provider buttons for the login route; takes no props and reads `?returnTo` itself - `RouterButton`, `RouterFab`, `RouterIconButton`, `RouterLink`, `RouterListItemButton`, `RouterTab` — MUI components taking router `to` / `params` / `search` - `RouterNotFound`, `RouterError` — default 404 and error components. Pass them to `createRouter` as `defaultNotFoundComponent` and `defaultErrorComponent`. ## `wcz-layout/hooks` - `useLayoutForm`, `withLayoutForm`, `useFormContext`, `useFieldContext` — form instance, reusable sub-forms, and the contexts custom field components read; see the `forms` skill - `useLayoutTable`, `createLayoutColumnHelper`, `layoutTableFeatures`, `useTableContext`, `useHeaderContext`, `useCellContext` — table instance, column helper and contexts, plus type `LayoutTableFeatures`; see the `table` skill - `useDialogs` — alert, confirm, custom dialogs and `close`, plus type `DialogProps`; see the `dialogs` skill - `useTranslation` — translation inside components - `useInView` — element visibility observer - `useScanDetection` — barcode scanner keystrokes ## `wcz-layout/middleware` - `authMiddleware` — rejects unauthenticated calls, optionally checks a permission key. Goes in a server function's `.middleware([])`, **after** `databaseMiddleware` so it narrows `context.user` to `User`. See the `server-functions` skill for the full order. - `userMiddleware` — attaches the user without requiring one, as `User | null` - `validationMiddleware` — validates API route input against a Zod schema. REST routes only; server functions use `.validator()`. - `csrfMiddleware` — CSRF protection. A **request** middleware: it goes in `createStart(() => ({ requestMiddleware: [csrfMiddleware] }))` in `src/start.ts`, never in a `.middleware([])` array. See the `server-functions` skill. `databaseMiddleware` is **not** here. It is app-local; every app writes its own. See the `server-functions` skill. ## `wcz-layout/utils` - `t`, `i18next` — translation outside components - `uuidv7` — time-sortable id. Use it for every client-generated primary key. - `requireAuth` — `beforeLoad` route guard, redirects to `/login`; see the `routing` skill - `hasPermission` — permission check for a user - `Platform` — OS detection from the user agent - `createEnv` — typed environment schema ## `wcz-layout/auth` - `handleLogin`, `handleCallback`, `handleLogout` — OAuth route handlers. Mount each as a server `GET` handler at `/auth/login`, `/auth/callback` and `/auth/logout`. - `getAccessToken` — delegated token for the signed-in user, server-only - `getAppToken` — app-only token for background jobs, server-only ## `wcz-layout/models` - Service types: `User`, `Permissions`, `Scopes`, `FileMeta`, `Email`, `EmailAttachment`, `Employee`, `Department`, `EmployeeStatus`, `EmployeeCategoryGroup`, `Approval*` - Matching Zod schemas: `FileMetaSchema`, `EmailSchema`, `EmailAttachmentSchema`, `EmployeeSchema`, `DepartmentSchema` and the approval `*Schema` ## `wcz-layout/data/client`, `wcz-layout/data/server` - Client query and mutation option factories for file, approval and PeopleSoft services. Server exports contain those operations plus `sendEmail`; see the `services` skill.