create-mithaq 0.1.1 → 0.2.0

package/template/apps/{asas-platform → asas-backoffice}/src/screens.tsx

@@ -7,17 +7,27 @@ import { ScreenContext, useScreen, type ScreenState } from 'mithaq/admin/react'
 import { actingAs, arm, authArm, caused, clientOf, readsOf, takesKey } from './api.ts'
 import { clampedHref, routedHref } from './links.ts'
 import { mergedHeaders } from './request-headers.ts'
+import { nameIn } from 'asas/organizations'
 import { documentHead, localeOf, locales, translator, type Locale } from './copy.ts'
-import { FieldValue, type FormClient, type FormProps } from './components/mithaq/form.tsx'
-import type { Page } from './components/mithaq/list.tsx'
-import { QueryRefused, findOf, listRaw, prefixOf, readQuery, rulesOf, scopedTo, withList, type RawQuery } from './components/mithaq/list-query.ts'
-import { createsIn, newTitleOf, titleOf } from './components/mithaq/controls.tsx'
-import { NavLinks, NodeButton, OwnButton, RecordFrame, formIn, holdFocus, frameOf, listIn, nodesOf, pageButtonOf, pageOf, readsAsValues, refOf, relatedIn, rowTitle, scopeOf, type Draw, type Refs, type TreePage } from './components/mithaq/nodes.tsx'
-import { idsOf } from './components/mithaq/relationship-control.tsx'
+import { FieldValue } from 'mithaq-admin/field-value.tsx'
+import type { FormClient, FormProps } from 'mithaq-admin/form-types.tsx'
+import type { Page } from 'mithaq-admin/list-types.tsx'
+import { QueryRefused, findOf, listRaw, prefixOf, readQuery, rulesOf, scopedTo, withList, type RawQuery } from 'mithaq-admin/list-query.ts'
+import { newTitleOf, titleOf } from 'mithaq-admin/copy.ts'
+import { createsIn } from 'mithaq-admin/field-values.ts'
+import { NavLinks } from 'mithaq-admin/nav-links.tsx'
+import { NodeButton, OwnButton, pageButtonOf } from 'mithaq-admin/node-buttons.tsx'
+import { formIn, listIn, nodesOf, readsAsValues, relatedIn, scopeOf, type Draw } from 'mithaq-admin/node-tree.ts'
+import { frameOf, pageOf } from 'mithaq-admin/nodes.tsx'
+import { RecordFrame, holdFocus } from 'mithaq-admin/record-frame.tsx'
+import { rowTitle } from 'mithaq-admin/row-title.tsx'
+import { refOf, type Refs, type TreePage } from 'mithaq-admin/screen-refs.ts'
+import { idsOf } from 'mithaq-admin/relationship-control.tsx'
 import { ScreenForm } from './screen-form.tsx'
 import { ScreenList, askedFor, readsDrafts, rowReadsDrafts, rowsKey } from './screen-list.tsx'
 import { screenNamed } from './screen-names.ts'
 import { slide } from './slide.ts'
+import { Toaster } from 'mithaq-admin/toast.tsx'
 import { useCopy } from './routes/__root.tsx'
 
 /**
@@ -29,13 +39,13 @@ export const getAsas = createServerOnlyFn(async () => (await import('asas')).asa
 type InProcess = Record<string, { operations: Record<string, (input: object, options: object) => Promise<unknown>> }>
 
 /**
- * Each kayan's operations in process. In the platform app a read of a kayan asks `tenant: 'all'`,
- * which the runner grants platform staff there alone, so staff read every organization's rows; a
+ * Each kayan's operations in process. In the backoffice app a read of a kayan asks `tenant: 'all'`,
+ * which the runner grants backoffice staff there alone, so staff read every organization's rows; a
  * global is one organization's row and asks for none, and a write never asks.
  */
 const inProcess = async (asas: Awaited<ReturnType<typeof getAsas>>): Promise<InProcess> => {
   const kayan = asas.kayan as unknown as InProcess
-  if (!(await import('asas')).onPlatform()) return kayan
+  if (!(await import('asas')).onBackoffice()) return kayan
   const reads = new Set(asas.operations.filter((one) => one.effect === 'read' && !one.single).map((one) => `${one.kayan}/${one.name}`))
   return Object.fromEntries(Object.entries(kayan).map(([name, one]) => [name, {
     operations: Object.fromEntries(Object.entries(one.operations).map(([operation, run]) =>
@@ -117,7 +127,7 @@ type Actor = {
   readonly email?: string | null
   readonly impersonatedBy?: unknown
   readonly activeOrganizationId?: string | null
-  readonly organizations?: readonly { readonly id: string; readonly name: string; readonly slug?: string }[]
+  readonly organizations?: readonly { readonly id: string; readonly name: string; readonly slug?: string; readonly names?: unknown }[]
 }
 
 // `'unauthorized'` is answered before the projection is read, so a refused screen sends no kayan, field, row or page;
@@ -140,15 +150,15 @@ const resolveScreen = async (asked: unknown) => {
       .filter(([one]) => report.collections?.[one]?.read === true)
       .map(([one, value]) => [one, { ...value, fields: value.fields.filter((field) => report.collections?.[one]?.fields?.[field.name]?.read === true) }]),
   )
-  const { onPlatform, platformEntry, PLATFORM_SCREEN } = await import('asas')
-  const platform = platformEntry(actor)
-  // The other screens of this app the actor may enter. The platform's own name
-  // is left out of a tenant app's list, so the one link to it is `platformEntry`'s alone.
+  const { onBackoffice, backofficeEntry, BACKOFFICE_SCREEN } = await import('asas')
+  const backoffice = backofficeEntry(actor)
+  // The other screens of this app the actor may enter. The backoffice's own name
+  // is left out of a tenant app's list, so the one link to it is `backofficeEntry`'s alone.
   const served = screensOf(asas.targets) as Record<string, { client: ScreenClient }>
   const siblings = (report.screens ?? [])
-    .filter((one) => one !== name && Object.hasOwn(served, one) && (one === PLATFORM_SCREEN) === onPlatform())
+    .filter((one) => one !== name && Object.hasOwn(served, one) && (one === BACKOFFICE_SCREEN) === onBackoffice())
     .map((one) => ({ name: one, path: served[one]!.client.path }))
-  const others = [...siblings, ...(platform ? [{ name: PLATFORM_SCREEN, path: platform }] : [])]
+  const others = [...siblings, ...(backoffice ? [{ name: BACKOFFICE_SCREEN, path: backoffice }] : [])]
   return {
     asas,
     request,
@@ -164,7 +174,8 @@ const resolveScreen = async (asked: unknown) => {
       ...(actor.impersonatedBy ? { impersonating: true } : {}),
       ...(others.length ? { screens: others } : {}),
       ...(actor.organizations && {
-        organizations: actor.organizations.map(({ id, name, slug }) => ({ id, name, slug })),
+        // Every locale's, because the frame is read before the viewer's locale is known here; the shell picks one.
+        organizations: actor.organizations.map(({ id, name, slug, names }) => ({ id, name, slug, ...(typeof names === 'string' && { names }) })),
         activeOrganizationId: actor.activeOrganizationId ?? null,
       }),
     },
@@ -206,14 +217,14 @@ export const loadEnterable = createServerFn({ method: 'GET' })
     others?: { id: string; name: string; slug?: string }[]
     impersonating?: string
   } | null> => {
-    const [{ getRequest }, asas, { onPlatform, PLATFORM_SCREEN }] = await Promise.all([import('@tanstack/react-start/server'), getAsas(), import('asas')])
+    const [{ getRequest }, asas, { onBackoffice, BACKOFFICE_SCREEN }] = await Promise.all([import('@tanstack/react-start/server'), getAsas(), import('asas')])
     const request = getRequest()
     const actor = (await asas.auth.actor(request.headers)) as Actor | null
     if (!actor?.email) return null
     const report = (await (await asas.handler(new Request(new URL('/api/access', request.url), { headers: request.headers }))).json()) as AccessReport
     const screens = screensOf(asas.targets) as Record<string, { client: ScreenClient }>
     const entered = (report.screens ?? [])
-      .filter((name) => Object.hasOwn(screens, name) && (name === PLATFORM_SCREEN) === onPlatform())
+      .filter((name) => Object.hasOwn(screens, name) && (name === BACKOFFICE_SCREEN) === onBackoffice())
       .map((name) => ({ name, path: screens[name]!.client.path }))
     const impersonating = actor.impersonatedBy ? { impersonating: actor.name ?? actor.email } : {}
     if (entered.length) {
@@ -226,11 +237,14 @@ export const loadEnterable = createServerFn({ method: 'GET' })
     }
     const memberships = actor.organizations ?? []
     const active = memberships.find((one) => one.id === actor.activeOrganizationId)
+    // Named here, where the locale is known: the page draws what it is handed, and a name the viewer cannot read
+    // in the default locale would be no name to them.
+    const named = ({ id, name, slug, names }: NonNullable<Actor['organizations']>[number]) => ({ id, name: nameIn({ name, names }, data.locale), slug })
     return {
       screens: entered,
       email: actor.email,
-      organizations: (active ? [active] : memberships).map(({ id, name, slug }) => ({ id, name, slug })),
-      others: onPlatform() ? [] : memberships.filter((one) => one !== active).map(({ id, name, slug }) => ({ id, name, slug })),
+      organizations: (active ? [active] : memberships).map(named),
+      others: onBackoffice() ? [] : memberships.filter((one) => one !== active).map(named),
       ...impersonating,
     }
   })
@@ -473,7 +487,8 @@ const nameOfPage = ({ screen, name, match, row, titledBy, copy }: {
   if (match.kayan === undefined) return screen.nav.find((entry) => !entry.kayan && entry.page === match.page)?.label?.[copy.locale] ?? copy.t(`screens.${name}`, name) ?? name
   const kayan = screen.kayan[match.kayan]!
   const page = kayan.pages[match.page]
-  const many = !!page && 'page' in page && listIn(nodesOf(page)) !== undefined
+  // A list page draws every row, whether a tree's list node or a component drawing it whole.
+  const many = match.page === 'list' || (!!page && 'page' in page && listIn(nodesOf(page)) !== undefined)
   if (match.page === 'create') return newTitleOf({ kayan, copy })
   const field = kayan.fields.find((one) => one.name === kayan.useAsTitle)
   const target = field?.kind === 'relationship' ? screen.kayan[field.relationTo ?? ''] : undefined
@@ -500,7 +515,7 @@ const useScreenState = (data: ScreenData): ScreenState => {
 
 /**
  * The bar that says the session is an impersonation, with the way out. Stopping
- * is a sign-out: the staff member's own session lives in the platform app under
+ * is a sign-out: the staff member's own session lives in the backoffice app under
  * that app's cookie, and the sign-out answers where they go next.
  */
 export function ImpersonationBar({ name }: { name: string }): ReactElement {
@@ -544,6 +559,7 @@ function ScreenBar({ user }: { user: ScreenData['user'] }): ReactElement | null
 
 /** The screen's own frame: its providers, outermost first, around the frame's bar and the page. */
 export function ScreenFrame({ files, data, children }: { files: Files; data: ScreenData; children: ReactNode }): ReactElement {
+  const { t } = useCopy()
   const refs = refsOf(files, data.screen)
   // One per frame: made per request on the server, so no row one actor read
   // reaches another's render; held for the frame's life in the browser.
@@ -590,6 +606,8 @@ export function ScreenFrame({ files, data, children }: { files: Files; data: Scr
         <>
           <ScreenBar user={data.user} />
           {children}
+          {/* The one place every write's toast is drawn, kept across the screen's pages. */}
+          <Toaster closeLabel={t('admin.close', 'Close') ?? 'Close'} />
         </>,
       )}
     </Suspense>
@@ -666,7 +684,7 @@ function PageBody({ files, data, query, onQuery }: PageViewProps): ReactElement
     return path ? `${base}${id ? path.replace(':id', encodeURIComponent(id)) : path}` : undefined
   }
   // A row opens its kayan's edit page, else the one page whose path draws a
-  // row (how the platform opens a record it only reads).
+  // row (how the backoffice opens a record it only reads).
   const rowPage = (target: ClientKayan) => (target.pages.edit ? 'edit' : Object.keys(target.pages).find((one) => target.pages[one]!.path.includes(':id')))
   const related = relatedOf(data.screen, kayan)
   const go = (href: string | undefined) => void (href ? router.navigate({ href }) : router.invalidate())
@@ -844,7 +862,9 @@ function PageBody({ files, data, query, onQuery }: PageViewProps): ReactElement
       api={readsOf(related)}
       operations={data.operations}
       related={draw(page).list}
-      edit={(id) => hrefOf(kayan, 'edit', id)}
+      // A create opened over its list closes back to it once it lands, the new row in the list, as Payload's drawer does;
+      // one whose kayan autosaves its drafts moves to the row's page instead, since its first autosave is a create too.
+      edit={(id) => (page.mode && listHref && !data.drafts?.autosave ? listHref : hrefOf(kayan, 'edit', id))}
       list={listHref}
       drafts={data.drafts}
       expectedUpdatedAt={data.expectedUpdatedAt}
@@ -865,4 +885,4 @@ function PageBody({ files, data, query, onQuery }: PageViewProps): ReactElement
   }
   return form
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 d96a3dd603b5aead8e3d82e8792fa40d5f4dac1bfbee2e7064ab2be888b595a6
+// mithaq-admin 0.0.0 da2e742262e16a7f9f8dab050c2a4201517478795101af68736907464a0d52ce

package/template/apps/asas-backoffice/src/server.ts

@@ -0,0 +1,30 @@
+import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
+import type { ScreenClient } from 'mithaq/admin'
+import { checkComponents } from 'mithaq-admin/components.tsx'
+import { components } from './components.ts'
+import { withQuietAbort } from '../../asas-tanstack/src/quiet-abort.ts'
+
+// Every screen this app serves, checked against its components map as it starts, so a field whose kind has no
+// control fails the start, naming the kind and the field, and never reaches a page. Read on the server alone,
+// since a screen.json names every field of the screen.
+for (const client of Object.values(import.meta.glob<ScreenClient>('./routes/(screens)/*/screen.json', { eager: true, import: 'default' }))) {
+  checkComponents({ client, components })
+}
+
+// A refused start (a migration not applied) exits 1 rather than leave a server up that cannot serve.
+const { env } = process
+if (env.NODE_ENV === 'production') {
+  await (await import('asas')).asas.connect().catch((error: unknown) => {
+    console.error(error)
+    process.exit(1)
+  })
+}
+
+// Every request runs as the backoffice; nothing a request carries decides it, and the tenant app never does.
+// `asas` is imported per request so it is the same module every route reads.
+export default createServerEntry({
+  fetch: async (request: Request) => {
+    const { asBackoffice } = await import('asas')
+    return asBackoffice(() => handler.fetch(withQuietAbort(request)))
+  },
+})

package/template/apps/{asas-platform → asas-backoffice}/src/slide.ts

@@ -19,4 +19,4 @@ export const slide = async ({
   // Set once with every strategy's cookies: a second set replaces the first.
   if (cookies.length) setResponseHeader('set-cookie', cookies)
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 bc0221e1088103f8638e0333b84aafb6b326e3991a187ced198bce2d090ecbe9
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 bc0221e1088103f8638e0333b84aafb6b326e3991a187ced198bce2d090ecbe9

package/template/apps/{asas-platform → asas-backoffice}/src/start.ts

@@ -21,7 +21,7 @@ const csrf = createCsrfMiddleware({ filter: (ctx) => ctx.handlerType === 'server
 
 // The location is a path of this origin, so nothing the request's host header says reaches it.
 const home = createMiddleware({ type: 'request' }).server(({ request, next }) =>
-  new URL(request.url).pathname === '/' ? new Response(null, { status: 307, headers: { location: '/platform' } }) : next(),
+  new URL(request.url).pathname === '/' ? new Response(null, { status: 307, headers: { location: '/backoffice' } }) : next(),
 )
 
 // Only this origin may frame the pages, so no other site can lay this app under its own page and steer a click.

package/template/apps/{asas-platform → asas-backoffice}/src/styles.css

@@ -10,12 +10,14 @@
    for it, listed first in `--font-sans` below so an Arabic page reads in it and
    a Latin one falls through to the preset's. */
 @import "@fontsource/ibm-plex-sans-arabic";
+/* The admin's pieces in node_modules, which Tailwind never scans on its own. */
+@import "mithaq-admin/source.css";
 
-/* The project's own shells, pages and components, which the platform screen
-   loads through the linked package, as the tenant app lists them
-   (`apps/asas-tanstack/src/styles.css`). Tailwind finds this app's own files,
-   the copied `src/components/mithaq` among them, without one. */
-@source "../node_modules/asas/src";
+/* The project's own shells, pages and components, which the backoffice screen
+   loads, as the tenant app lists them (`apps/asas-tanstack/src/styles.css`).
+   Tailwind finds this app's own files, an ejected `src/components/mithaq`
+   among them, without one. */
+@source "../../../templates";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -143,7 +145,7 @@
     @apply font-sans;
     }
 }
-/* What the platform draws beyond the preset, each a rule over a marker the
+/* What the backoffice draws beyond the preset, each a rule over a marker the
    shared pieces already carry, so the tenant app, which does not load this
    file, is unchanged. */
 
@@ -188,7 +190,7 @@ a[data-row-link]:empty::before,
   color: var(--muted-foreground);
 }
 
-/* The platform's cards are square, as its buttons, inputs and home cards are:
+/* The backoffice's cards are square, as its buttons, inputs and home cards are:
    the section and form cards the registry draws with a rounded class of their
    own, the frame a list's table sits in, the filter panel above it and the
    danger region of a record page. */

package/template/apps/{asas-platform → asas-backoffice}/tsconfig.json

@@ -13,7 +13,7 @@
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "types": ["node", "vite/client"],
-    "paths": { "@/*": ["./src/*"] }
+    "paths": { "@/*": ["./src/*"], "mithaq-admin/*": ["./src/components/mithaq/*", "./node_modules/mithaq-admin/registry/*"] }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts", "../../templates/asas/src/ui/*.tsx", "../../templates/asas/src/ui-*/*.tsx"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts", "../../templates/mithaq/src/ui/*.tsx", "../../templates/asas/src/ui-*/*.tsx"]
 }

package/template/apps/{asas-platform → asas-backoffice}/vite.config.ts

@@ -1,19 +1,25 @@
 import tailwindcss from '@tailwindcss/vite'
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import viteReact from '@vitejs/plugin-react'
+import { mithaqAdmin } from 'mithaq/vite'
 import { defineConfig } from 'vite'
 import { fileURLToPath } from 'node:url'
 
 export default defineConfig({
-  // An alias rather than `resolve.tsconfigPaths`: the shells in `templates/asas/src` fall under a tsconfig
+  // An alias rather than `resolve.tsconfigPaths`: the shells in the language package's `src/ui/` fall under a tsconfig
   // with no `@/` and still import it. `^@/` leaves `@tanstack/*` alone.
   resolve: { alias: [{ find: /^@\//, replacement: fileURLToPath(new URL('./src/', import.meta.url)) }] },
   plugins: [
     tailwindcss(),
+    // A file under this folder takes the place of mithaq-admin's file of the same name, for every importer.
+    mithaqAdmin(fileURLToPath(new URL('./src/components/mithaq/', import.meta.url))),
     // `mithaq generate screens` writes `files.ts` and `types.ts` beside the route files; neither is a route.
     tanstackStart({ router: { routeFileIgnorePattern: '^(files|types)\\.ts$' } }),
     viteReact(),
   ],
+  // Behind the proxy that routes by Host: bound to the loopback address it targets, and answering
+  // the public name in BACKOFFICE_URL, which Vite refuses in a Host header unless named here.
+  preview: { host: '127.0.0.1', allowedHosts: process.env.BACKOFFICE_URL ? [new URL(process.env.BACKOFFICE_URL).hostname] : [] },
   environments: {
     ssr: {
       // `asas` and `mithaq` stay external: Vite bundles linked workspace packages by default, and bundling

package/template/apps/asas-tanstack/package.json

@@ -12,7 +12,7 @@
     "@base-ui/react": "^1.5.0",
     "@fontsource-variable/raleway": "^5.2.8",
     "@fontsource/ibm-plex-sans-arabic": "^5.2.8",
-    "@hugeicons/core-free-icons": "^4.1.4",
+    "@hugeicons/core-free-icons": "4.3.5",
     "@hugeicons/react": "^1.1.6",
     "@lexical/extension": "0.52.0",
     "@lexical/link": "0.52.0",
@@ -34,9 +34,11 @@
     "lexical": "0.52.0",
     "lucide-react": "^1.16.0",
     "mithaq": "*",
+    "mithaq-admin": "*",
     "react": "^19.3.0",
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.3.0",
+    "react-is": "^19.3.0",
     "react-resizable-panels": "^4.13.3",
     "recharts": "3.8.0",
     "tailwind-merge": "^3.6.0",
@@ -48,9 +50,9 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.0.2",
-    "mithaq-admin": "*",
     "shadcn": "4.18.0",
     "tailwindcss": "^4.3.0",
+    "typescript": "^7.0.2",
     "vite": "^8.0.13"
   }
 }

package/template/apps/asas-tanstack/src/api.ts

@@ -144,4 +144,4 @@ export const authArm = async (path: string, body: unknown = {}) => {
   // The status too, because a rate limit's refusal carries no code to read.
   return { ok: response.ok, status: response.status, message: answered?.message, body: answered }
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 94db2fc49ad4391c0d1c2183cb41001dd08d62017c76af86cc5f611488c22c68
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 94db2fc49ad4391c0d1c2183cb41001dd08d62017c76af86cc5f611488c22c68

package/template/apps/asas-tanstack/src/auth-frame.tsx

@@ -7,10 +7,10 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input'
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group'
 import { authArm } from './api.ts'
-import { FieldShell, describedBy } from './components/mithaq/field-shell.tsx'
+import { FieldShell, describedBy } from 'mithaq-admin/field-shell.tsx'
 import { refusalKey } from './copy.ts'
 import { LocaleSwitch } from './locale-switch.tsx'
-import { wanted } from './redirect.ts'
+import { landing } from './redirect.ts'
 import { useCopy } from './routes/__root.tsx'
 
 /** The one search key the auth pages read, off the raw search. */
@@ -21,8 +21,8 @@ export const redirectSearch = (search: Record<string, unknown>): { redirect?: st
 export const signedInAs = async (actor: Promise<unknown>) => Boolean(((await actor.catch(() => null)) as { email?: unknown } | null)?.email)
 
 /**
- * Whether this request carries a session, where signing in lands for it, and the provider's password bounds.
- * No auth page sends a referrer, since the reset page's address carries its token.
+ * Whether this request carries a session, the screens it opens, the first of them as `home`, which a link back names,
+ * and the provider's password bounds. No auth page sends a referrer, since the reset page's address carries its token.
  */
 export const authGate = createServerFn({ method: 'GET' }).handler(async () => {
   // Imported inside the server half so no auth page ships the screen host to the browser.
@@ -31,9 +31,9 @@ export const authGate = createServerFn({ method: 'GET' }).handler(async () => {
   type Provider = { name: string; server: { $context: Promise<{ password: { config: { minPasswordLength: number; maxPasswordLength: number } } }> } }
   const provider = (asas.auth.strategies as unknown as Provider[]).find((one) => one.name === 'user')!
   const [signedIn, { password }] = await Promise.all([signedInAs(asas.auth.actor(getRequest().headers)), provider.server.$context])
-  const first = signedIn ? (await loadEnterable())?.screens[0] : undefined
-  const home: { path: string; name?: string } = first ?? { path: '/unauthorized' }
-  return { signedIn, home, password: { min: password.config.minPasswordLength, max: password.config.maxPasswordLength } }
+  const entered = signedIn ? ((await loadEnterable())?.screens ?? []) : []
+  const home: { path: string; name?: string } = entered[0] ?? { path: '/unauthorized' }
+  return { signedIn, home, screens: entered, password: { min: password.config.minPasswordLength, max: password.config.maxPasswordLength } }
 })
 
 /**
@@ -42,8 +42,8 @@ export const authGate = createServerFn({ method: 'GET' }).handler(async () => {
  * route context.
  */
 export const gate = async ({ search }: { search: { redirect?: string } }) => {
-  const { signedIn, home, password } = await authGate()
-  if (signedIn) throw redirect({ href: wanted({ asked: search.redirect, home: home.path }) })
+  const { signedIn, screens, password } = await authGate()
+  if (signedIn) throw redirect({ href: landing({ asked: search.redirect, screens }) })
   return { password }
 }
 
@@ -57,10 +57,10 @@ export const useHomeLabel = () => {
 }
 
 /** What the forgot and reset pages draw for someone already signed in: the way on, and a sign-out. */
-export function AlreadySignedIn({ redirect: asked, home }: { redirect?: string; home: { path: string; name?: string } }) {
+export function AlreadySignedIn({ redirect: asked, home, screens }: { redirect?: string; home: { path: string; name?: string }; screens: readonly { name: string; path: string }[] }) {
   const { t } = useCopy()
   const label = useHomeLabel()
-  const to = wanted({ asked, home: home.path })
+  const to = landing({ asked, screens })
   return (
     <AuthFrame title={t('auth.alreadySignedIn', 'You are already signed in')}>
       <div className="grid gap-4">
@@ -147,4 +147,4 @@ export function AuthBox({
     </FieldShell>
   )
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 ab822afe361dfc5f82c504570fd5d0ea13ec4572e60adb679a3f9532ccf67803
+// mithaq-admin 0.0.0 e498423cf4a61adb8cf6358d043d31ae92d853de4c6939a9c0fe138c848b7211

package/template/apps/asas-tanstack/src/choose-password.tsx

@@ -0,0 +1,150 @@
+import { useState, type ComponentProps } from 'react'
+import { Link, useNavigate } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { Button } from '@/components/ui/button'
+import { authArm } from './api.ts'
+import { AlreadySignedIn, AuthBox, AuthFrame, authGate, redirectSearch, useRefusal } from './auth-frame.tsx'
+import { useCopy } from './routes/__root.tsx'
+
+/** The search keys of a page a mailed link opens: its token, and where to go after. */
+export const tokenSearch = (search: Record<string, unknown>): { redirect?: string; token?: string } => ({
+  ...redirectSearch(search),
+  ...(typeof search.token === 'string' && search.token ? { token: search.token } : {}),
+})
+
+/**
+ * The address of the account a live link chooses the password of, or `null` for a spent, expired or made-up one: the
+ * provider's own answer, read in process. A POST, so the token rides in no further URL.
+ */
+const passwordLink = createServerFn({ method: 'POST' })
+  .validator((token: unknown) => (typeof token === 'string' ? token : ''))
+  .handler(async ({ data }) => {
+    // Imported inside the server half so no page ships the provider to the browser.
+    const { asas } = await import('asas')
+    type Provider = { name: string; server: { api: { setPasswordState(args: { query: { token: string } }): Promise<{ email: string }> } } }
+    const provider = (asas.auth.strategies as unknown as Provider[]).find((one) => one.name === 'user')!
+    return data ? provider.server.api.setPasswordState({ query: { token: data } }).then(({ email }) => email, () => null) : null
+  })
+
+/** The `beforeLoad` of a page a mailed link opens: the auth gate's answer, and the account the link is for. */
+export const passwordGate = async ({ token }: { token?: string }) => ({ ...(await authGate()), email: token ? await passwordLink({ data: token }) : null })
+
+type Props = {
+  /** A first password, chosen from a sign-up's or an added person's link, rather than a forgotten one replaced. */
+  first: boolean
+  token?: string
+  redirect?: string
+  signedIn: boolean
+  home: { path: string; name?: string }
+  /** The screens a signed-in person opens. */
+  screens: readonly { name: string; path: string }[]
+  password: { min: number; max: number }
+  /** The account the link is for; `null` for a link that names none, `undefined` while unread. */
+  email?: string | null
+}
+
+/**
+ * The page a mailed link opens to choose an account's password: a first one, or one forgotten. It shows the account
+ * it is for and signs the person in with the password just chosen, through the ordinary sign-in, as Payload's reset
+ * does: every rule a sign-in keeps still holds, and nothing is known that the person did not just type.
+ */
+export function ChoosePassword({ first, token, redirect, signedIn, home, screens, password: bounds, email }: Props) {
+  const { t } = useCopy()
+  const navigate = useNavigate()
+  const refused = useRefusal()
+  const [password, setPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [pending, setPending] = useState(false)
+  const [done, setDone] = useState(false)
+  // The answer, not its sentence, so a language switch says it again in the language chosen.
+  const [refusal, setRefusal] = useState<Parameters<typeof refused>[0] | null>(null)
+  const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
+  const title = first ? t('auth.setPassword', 'Choose your password') : t('auth.resetPassword', 'Reset password')
+  const wrong = {
+    password: () =>
+      !password ? t('auth.required', 'This field is required.')
+      : password.length < bounds.min ? t('auth.passwordTooShort', 'Password too short')
+      : password.length > bounds.max ? t('auth.passwordTooLong', 'Password too long')
+      : undefined,
+    confirmation: () => (!confirmation ? t('auth.required', 'This field is required.') : confirmation === password ? undefined : t('auth.passwordsDiffer', 'The two passwords are not the same.')),
+  }
+  const errorOf = (box: keyof typeof wrong) => (left.has(box) ? wrong[box]() : undefined)
+  const box = (id: keyof typeof wrong, label: string | undefined, props: ComponentProps<'input'> & { description?: string }) => (
+    <AuthBox id={id} label={label} error={errorOf(id)} onLeave={() => setLeft((already) => new Set(already).add(id))} {...props} />
+  )
+  const signIn = (
+    <p className="mt-4 text-center text-sm">
+      <Link className="text-primary underline underline-offset-4" to="/auth/sign-in">
+        {t('auth.signIn', 'Sign in')}
+      </Link>
+    </p>
+  )
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    setLeft(new Set(Object.keys(wrong)))
+    if (Object.values(wrong).some((check) => check())) return
+    setPending(true)
+    setRefusal(null)
+    const answered = await authArm('reset-password', { newPassword: password, token })
+    if (!answered.ok) {
+      setPending(false)
+      return setRefusal(answered)
+    }
+    // A sign-in this refuses, a banned account's, is left to the sign-in page, which says why.
+    // Signed in, the sign-in page's own gate sends the person on to `redirect` or their first screen.
+    if (email && (await authArm('sign-in/email', { email, password })).ok) return navigate({ to: '/auth/sign-in', search: { redirect } })
+    setPending(false)
+    setDone(true)
+  }
+
+  if (signedIn) return <AlreadySignedIn redirect={redirect} home={home} screens={screens} />
+  if (!token || email === null) {
+    return (
+      <AuthFrame title={title} description={t('auth.tokenInvalid', 'Token is either invalid or has expired.')}>
+        <p className="text-center text-sm">
+          <Link className="text-primary underline underline-offset-4" to="/auth/forgot-password">
+            {t('auth.forgotPassword', 'Forgot password')}
+          </Link>
+        </p>
+      </AuthFrame>
+    )
+  }
+  if (done) {
+    return (
+      <AuthFrame title={title} description={first ? t('auth.passwordChosen', 'Your address is confirmed and your password is set. Sign in with it.') : t('auth.passwordReset', 'Password reset successfully.')}>
+        {signIn}
+      </AuthFrame>
+    )
+  }
+  return (
+    <AuthFrame title={title}>
+      <form className="grid gap-4" noValidate onSubmit={submit}>
+        {/* The account the password is for, which a password manager saves it under. */}
+        {email ? <AuthBox id="email" label={t('auth.email', 'Email')} type="email" autoComplete="username" readOnly value={email} onLeave={() => {}} /> : null}
+        {box('password', t('auth.newPassword', 'New password'), {
+          autoComplete: 'new-password',
+          description: t('auth.passwordRule', 'At least {count} characters.')!.replace('{count}', String(bounds.min)),
+          onChange: (event) => setPassword(event.target.value),
+          type: 'password',
+          value: password,
+        })}
+        {box('confirmation', t('auth.confirmPassword', 'Confirm the password'), {
+          autoComplete: 'new-password',
+          onChange: (event) => setConfirmation(event.target.value),
+          type: 'password',
+          value: confirmation,
+        })}
+        {refusal && (
+          <p className="text-destructive text-sm" role="alert">
+            {refused(refusal, t('auth.resetFailed', 'That reset did not work.'))}
+          </p>
+        )}
+        <Button disabled={pending} type="submit">
+          {first ? t('auth.setPasswordSubmit', 'Confirm and set password') : t('auth.resetPassword', 'Reset password')}
+        </Button>
+      </form>
+      {signIn}
+    </AuthFrame>
+  )
+}

package/template/apps/asas-tanstack/src/components.ts

@@ -0,0 +1,35 @@
+import type { Language } from 'asas'
+import type { ComponentsOf } from 'mithaq-admin/components.tsx'
+import { defaultComponents } from 'mithaq-admin/default-components.tsx'
+// add-on: rich-text
+import { richTextComponents } from 'mithaq-admin/rich-text.tsx'
+// end add-on: rich-text
+// add-on: uploads
+import { uploadComponents } from 'mithaq-admin/upload.tsx'
+// end add-on: uploads
+
+// Typed against the language, so a kind of the project's own with no control or cell here is a type error, and so
+// is leaving out the rich text or files add-on while the language holds its kind.
+// Spread defaultComponents.controls or defaultComponents.cells to add or replace one.
+// A file of its own, so the server entry reads the map without evaluating the router and its route tree.
+export const components: ComponentsOf<Language> = {
+  ...defaultComponents,
+  controls: {
+    ...defaultComponents.controls,
+    // add-on: rich-text
+    ...richTextComponents.controls,
+    // end add-on: rich-text
+    // add-on: uploads
+    ...uploadComponents.controls,
+    // end add-on: uploads
+  },
+  cells: {
+    ...defaultComponents.cells,
+    // add-on: rich-text
+    ...richTextComponents.cells,
+    // end add-on: rich-text
+    // add-on: uploads
+    ...uploadComponents.cells,
+    // end add-on: uploads
+  },
+}