create-mithaq 0.1.1 → 0.2.0

package/template/apps/asas-tanstack/src/routes/index.tsx

@@ -1,5 +1,6 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { BookOpen, LayoutDashboard, Languages, ShieldCheck, Users } from 'lucide-react'
+import { organizations, signUp } from 'asas/organizations'
+import { LayoutDashboard, Languages, ShieldCheck } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { useHomeLabel } from '../auth-frame.tsx'
@@ -13,17 +14,22 @@ export const Route = createFileRoute('/')({
   component: Landing,
 })
 
+/** Whether a visitor with no invitation may make an account, so the page offers one, as sign-in does. */
+const offersSignUp = organizations === 'many' || signUp === 'open'
+
 function EntryActions({ screens, size }: { screens: readonly { name: string; path: string }[] | null; size: 'sm' | 'lg' }) {
   const { t } = useCopy()
   const label = useHomeLabel()
   if (screens === null) {
     return (
       <>
-        <Link to="/auth/sign-up">
-          <Button size={size}>{t('marketing.getStarted', 'Get started')}</Button>
-        </Link>
+        {offersSignUp ? (
+          <Link to="/auth/sign-up">
+            <Button size={size}>{t('marketing.getStarted', 'Get started')}</Button>
+          </Link>
+        ) : null}
         <Link to="/auth/sign-in">
-          <Button size={size} variant="outline">
+          <Button size={size} variant={offersSignUp ? 'outline' : 'default'}>
             {t('auth.signIn', 'Sign in')}
           </Button>
         </Link>
@@ -39,7 +45,7 @@ function EntryActions({ screens, size }: { screens: readonly { name: string; pat
   )
 }
 
-function Feature({ icon: Icon, title, description }: { icon: typeof BookOpen; title: string; description: string }) {
+function Feature({ icon: Icon, title, description }: { icon: typeof ShieldCheck; title: string; description: string }) {
   return (
     <Card>
       <CardHeader>
@@ -69,15 +75,13 @@ function Landing() {
   // `t` answers `string | undefined` for a key no locale carries; the fallback only satisfies that type.
   const tt = (key: string, fallback: string) => t(key, fallback) ?? fallback
   const features = [
-    { icon: BookOpen, title: tt('marketing.featureCoursesTitle', 'Courses and sessions'), description: tt('marketing.featureCoursesDescription', '') },
-    { icon: Users, title: tt('marketing.featureEnrollmentsTitle', 'Enrollments'), description: tt('marketing.featureEnrollmentsDescription', '') },
     { icon: ShieldCheck, title: tt('marketing.featureRolesTitle', 'Roles and permissions'), description: tt('marketing.featureRolesDescription', '') },
     { icon: Languages, title: tt('marketing.featureBilingualTitle', 'Arabic and English, either direction'), description: tt('marketing.featureBilingualDescription', '') },
     { icon: LayoutDashboard, title: tt('marketing.featurePortalTitle', 'A dashboard and a customer portal'), description: tt('marketing.featurePortalDescription', '') },
   ]
   const steps = [
     { title: tt('marketing.howStep1Title', 'Set up your organization'), description: tt('marketing.howStep1Description', '') },
-    { title: tt('marketing.howStep2Title', 'Add courses and roles'), description: tt('marketing.howStep2Description', '') },
+    { title: tt('marketing.howStep2Title', 'Add your records and roles'), description: tt('marketing.howStep2Description', '') },
     { title: tt('marketing.howStep3Title', 'Open the portal to your customers'), description: tt('marketing.howStep3Description', '') },
   ]
   return (
@@ -94,7 +98,7 @@ function Landing() {
 
       <main className="flex-1">
         <section className="mx-auto flex max-w-4xl flex-col items-center gap-6 px-4 py-20 text-center sm:px-6 sm:py-28">
-          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">{t('marketing.heroTitle', 'Run courses and enrollments without the busywork')}</h1>
+          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">{t('marketing.heroTitle', 'Run your organization without the busywork')}</h1>
           <p className="max-w-2xl text-lg text-muted-foreground">{t('marketing.heroSubtitle', '')}</p>
           <div className="flex flex-col gap-3 sm:flex-row">
             <EntryActions screens={screens} size="lg" />
@@ -103,7 +107,7 @@ function Landing() {
 
         <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
           <div className="mx-auto mb-12 max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight">{t('marketing.featuresTitle', 'Everything a training organization needs')}</h2>
+            <h2 className="text-3xl font-bold tracking-tight">{t('marketing.featuresTitle', 'Everything an organization needs')}</h2>
             <p className="mt-3 text-muted-foreground">{t('marketing.featuresSubtitle', '')}</p>
           </div>
           <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
@@ -125,7 +129,7 @@ function Landing() {
         </section>
 
         <section className="mx-auto flex max-w-3xl flex-col items-center gap-6 px-4 py-20 text-center sm:px-6">
-          <h2 className="text-3xl font-bold tracking-tight">{t('marketing.ctaTitle', 'Start running your courses on Asas')}</h2>
+          <h2 className="text-3xl font-bold tracking-tight">{t('marketing.ctaTitle', 'Start running your organization on Asas')}</h2>
           <p className="text-muted-foreground">{t('marketing.ctaSubtitle', '')}</p>
           <EntryActions screens={screens} size="lg" />
         </section>
@@ -133,10 +137,10 @@ function Landing() {
 
       <footer className="border-t py-8">
         <div className="mx-auto max-w-6xl px-4 text-center text-sm text-muted-foreground sm:px-6">
-          {t('marketing.footer', 'Asas — courses and enrollments for training organizations.')}
+          {t('marketing.footer', 'Asas — one place for an organization\'s records.')}
         </div>
       </footer>
     </div>
   )
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 32a4513d4cf4a984b7845056965d48edff53542ce962b466af67a87983832a6d
+// mithaq-admin 0.0.0 4ea8d722cd59ec1a91778142281c6f7db6ab9abe005dfc5f8c0192ee4e1095aa

package/template/apps/asas-tanstack/src/routes/unauthorized.tsx

@@ -4,9 +4,17 @@ import { Button } from '@/components/ui/button'
 import { authArm } from '../api.ts'
 import { AuthFrame, useRefusal } from '../auth-frame.tsx'
 import { documentHead } from '../copy.ts'
+import { NoOrganization } from '../no-organization.tsx'
 import { ImpersonationBar, loadEnterable } from '../screens.tsx'
 import { useCopy } from './__root.tsx'
 
+/**
+ * Where someone sent here from a screen their role does not open goes without being asked: the one screen it does
+ * open. A page refused inside that screen is said instead, and so is an impersonation, whose bar is the way out.
+ */
+export const onwardOf = ({ screens, refused, impersonating }: { screens: readonly { path: string }[]; refused?: unknown; impersonating?: unknown }) =>
+  !refused && !impersonating && screens.length === 1 ? screens[0]!.path : undefined
+
 export const Route = createFileRoute('/unauthorized')({
   // The path a screen refused; the server only matches it against the build's pages.
   validateSearch: (search: Record<string, unknown>): { from?: string } => (typeof search.from === 'string' ? { from: search.from } : {}),
@@ -15,6 +23,8 @@ export const Route = createFileRoute('/unauthorized')({
     const entered = await loadEnterable({ data: { from: deps.from, locale: context.locale } })
     // Carries this page's own path so a visitor whose session expired lands back here after signing in.
     if (!entered) throw redirect({ to: '/auth/sign-in', search: { redirect: '/unauthorized' } })
+    const onward = onwardOf(entered)
+    if (onward) throw redirect({ href: onward })
     return entered
   },
   // After the loader, so its data's type is inferred before this reads it.
@@ -49,19 +59,21 @@ function Unauthorized() {
       : part === '{page}' ? <bdi key={at}>{refused?.page}</bdi>
       : part)
   const link = 'text-foreground underline underline-offset-4'
+  // Someone who belongs to no organization is shown the ways into one, which the app draws.
+  const unplaced = !refused && !screens.length && !organizations.length && !others.length && !impersonating
   const screenName = (name: string) => t(`screens.${name}`, name) ?? name
   return (
     <AuthFrame
-      title={screens.length ? t('auth.unauthorized', 'Not for your role') : t('auth.noAccess', 'Your account has no access yet')}
+      title={screens.length ? t('auth.unauthorized', 'Choose where to go') : t('auth.noAccess', 'Your account has no access yet')}
       description={
         <span data-no-access={screens.length ? undefined : ''}>
           {refused
             ? said(t('auth.unauthorizedPage', 'Your role does not open that page: {page}.'))
             : screens.length
-              ? t('auth.unauthorizedDescription', 'Your role does not open that screen. These are the screens it opens:')
+              ? t('auth.unauthorizedDescription', 'This page isn\'t part of your account. Where would you like to go?')
               : organizations.length
                 ? said(t('auth.noAccessDescription', '{email} is a member of {organization} and holds no role that opens a screen here. Ask an administrator of {organization} to give you one.'))
-                : said(t('auth.noOrganization', '{email} belongs to no organization yet. Ask an administrator to invite you.'))}
+                : said(t('auth.noOrganization', '{email} belongs to no organization yet.'))}
         </span>
       }
     >
@@ -73,16 +85,16 @@ function Unauthorized() {
             {(t('auth.backTo', 'Back to {screen}') ?? 'Back to {screen}').replace('{screen}', () => screenName(refused.screen.name))}
           </a>
         ) : screens.length ? (
-          <ul className="grid gap-2">
+          <div className="grid gap-2">
             {screens.map((screen) => (
-              <li key={screen.name}>
-                {/* An anchor: the path is the screen's own data, not a route the router knows. */}
-                <a className={link} href={screen.path}>
-                  {screenName(screen.name)}
-                </a>
-              </li>
+              // An anchor: the path is the screen's own data, not a route the router knows.
+              <Button key={screen.name} nativeButton={false} className="max-sm:h-11" render={<a href={screen.path} />}>
+                {screenName(screen.name)}
+              </Button>
             ))}
-          </ul>
+          </div>
+        ) : unplaced ? (
+          <NoOrganization email={email} />
         ) : null}
         {/* So a switch into an organization where the actor holds no role is not a dead end. */}
         {others.map((one) => (
@@ -119,4 +131,4 @@ function Unauthorized() {
     </AuthFrame>
   )
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 3c5c304b3892c56759bf780f155ef3aa154ce3cc954e3d240b3537cdd97da735
+// mithaq-admin 0.0.0 81d25978cdacbb38254854b0f64b738946ee27baca06a952aed51d35e6fb10af

package/template/apps/asas-tanstack/src/screen-form.tsx

@@ -1,9 +1,11 @@
 import { useBlocker, useRouter } from '@tanstack/react-router'
 import { useState, type ReactElement } from 'react'
-import { Form, type FormProps } from './components/mithaq/form.tsx'
+import { Form } from 'mithaq-admin/form.tsx'
+import type { FormProps } from 'mithaq-admin/form-types.tsx'
 
 /**
- * A kayan's form on a screen's page. A create moves to the new row's edit page, a delete to the list.
+ * A kayan's form on a screen's page. A create moves to where `edit` sends it, the new row's edit page or, for a page
+ * opened over its list, the list; a delete moves to the list.
  * While the form holds a change the router blocks navigation and the form asks its discard question.
  */
 export function ScreenForm({ edit, list, ...props }: Omit<FormProps, 'onDone' | 'onDirty' | 'onCancel' | 'blocked'> & {
@@ -31,4 +33,4 @@ export function ScreenForm({ edit, list, ...props }: Omit<FormProps, 'onDone' |
     />
   )
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 7284b5e97770fd0c395fafa0b7459cab4ceb458e4bc982dc8233894126116170
+// mithaq-admin 0.0.0 508fa95987312292d3a5737dd1fd6aba03fbd5a7dbbbf5bb3bea2812b2adfde4

package/template/apps/asas-tanstack/src/screen-list.tsx

@@ -2,10 +2,11 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useState, type ReactElement } from 'react'
 import { ListContext, useScreen } from 'mithaq/admin/react'
 import { Button } from '@/components/ui/button'
-import { List, type ListProps, type Page } from './components/mithaq/list.tsx'
-import { QueryRefused, findOf, readQuery, readRaw, rulesOf, scopedTo, writeQuery, type ListQuery, type RawQuery } from './components/mithaq/list-query.ts'
-import { counted } from './components/mithaq/controls.tsx'
-import { listOf } from './components/mithaq/nodes.tsx'
+import { List } from 'mithaq-admin/list.tsx'
+import type { ListProps, Page } from 'mithaq-admin/list-types.tsx'
+import { QueryRefused, findOf, readQuery, readRaw, rulesOf, scopedTo, writeQuery, type ListQuery, type RawQuery } from 'mithaq-admin/list-query.ts'
+import { counted } from 'mithaq-admin/format.tsx'
+import { listOf } from 'mithaq-admin/node-tree.ts'
 
 /**
  * The list's search as the router carries it: the URL's pairs as strings, each
@@ -136,4 +137,4 @@ export function ScreenList({
     </ListContext>
   )
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 3c37825f9f645fd3f9c95a3d1ec554e863e85767e8329a1b2e16a40e5f5ea381
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 900f9707948cf18e36aec6776da8f9e77e4ed92438073443319e54e7a33a9ecf

package/template/apps/asas-tanstack/src/screen-names.ts

@@ -7,4 +7,4 @@ export const screenNamed = <Known extends object>(known: Known, name: unknown):
   if (typeof name !== 'string' || !Object.hasOwn(known, name)) throw new Error(`"${String(name)}" is no screen of this app.`)
   return name as keyof Known & string
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 878b7180f2aa169546feb42bcdfcb6002841d08e46788c94ddd6edfc4e3502ca
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 878b7180f2aa169546feb42bcdfcb6002841d08e46788c94ddd6edfc4e3502ca

package/template/apps/asas-tanstack/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-tanstack/src/server.ts

@@ -1,6 +1,16 @@
 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 './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 production start connects once before handing on any request, and `connect()` refuses to
 // start while a migration is unapplied; a refused start exits 1. NODE_ENV is read off `process`
 // so Vite cannot replace it at build time, and a built server started without

package/template/apps/asas-tanstack/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-tanstack/src/styles.css

@@ -2,17 +2,21 @@
    imports, custom-variant, :root and .dark variables, the @theme inline
    block and the @layer base rules, unchanged. Only the @source line below
    differs, pointing at this project's template instead of TB's monorepo.
-   Tailwind finds this app's own files, the copied `src/components/mithaq`
+   Tailwind finds this app's own files, an ejected `src/components/mithaq`
    among them, without one. */
 @import 'tailwindcss';
 @import 'tw-animate-css';
 @import 'shadcn/tailwind.css';
+/* The admin's pieces in node_modules, which Tailwind never scans on its own. */
+@import 'mithaq-admin/source.css';
 @import '@fontsource-variable/raleway';
 @import '@fontsource/ibm-plex-sans-arabic';
 
 /* The project's own shells, pages and components, which the screens load
-   through the same linked package (`templates/asas/src/ui/app-shell.tsx`). */
-@source '../node_modules/asas/src';
+   (the language package's `src/ui/app-shell.tsx`), in every package of the project.
+   Named by their folder, which every package manager leaves where it is, since
+   each links the package elsewhere. */
+@source '../../../templates';
 
 @custom-variant dark (&:is(.dark *));
 

package/template/apps/asas-tanstack/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", "../../templates/asas/src/*/ui/*.tsx"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts", "../../templates/mithaq/src/ui/*.tsx", "../../templates/asas/src/ui-*/*.tsx", "../../templates/features/*/*/ui/*.tsx"]
 }

package/template/apps/asas-tanstack/vite.config.ts

@@ -1,20 +1,26 @@
 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`, which applies only to files the nearest
-  // tsconfig claims: the project's shells in `templates/asas/src` import `@/` too.
+  // tsconfig claims: the project's shells in the language package's `src/ui/` import `@/` too.
   // `^@/` and not `@`, so `@tanstack/*` is left 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 `types.ts` and `files.ts` beside the route files, and 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 BETTER_AUTH_URL, which Vite refuses in a Host header unless named here.
+  preview: { host: '127.0.0.1', allowedHosts: process.env.BETTER_AUTH_URL ? [new URL(process.env.BETTER_AUTH_URL).hostname] : [] },
   environments: {
     ssr: {
       // `asas` and `mithaq` stay external: the drizzle adapter imports `drizzle-kit/api-postgres`

package/template/package.json

@@ -1,16 +1,16 @@
 {
   "private": true,
   "type": "module",
-  "packageManager": "bun@1.3.14",
   "engines": {
     "node": ">=24"
   },
   "workspaces": [
-    "templates/*",
+    "packages/mithaq",
+    "packages/features/*",
+    "packages/asas",
     "apps/*"
   ],
   "devDependencies": {
-    "typescript": "^7.0.2",
     "@types/node": "^24.12.3"
   }
 }

package/template/templates/asas/.claude/skills/add-field/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: add-field
+description: Add, change or remove a field of an existing kayan in this mithaq project and write the migration for it. Use when asked to add a column, change a field's kind or rules, or write a migration.
+---
+
+# Add a field and its migration
+
+The guide is "A field" under "Add a feature to an existing kayan" in `README.md`, and "Migrations" in `AGENTS.md`. The installed mithaq is `packages/asas/node_modules/mithaq/`, or `node_modules/mithaq/` where the package manager hoists it to the root: every kind and rule is in its `docs/packages/mithaq/README.md`, and `mithaq migrate` in its `docs/packages/mithaq/src/asas/cli/README.md`.
+
+1. Edit `fields` in the kayan's file. A kind or rule the language does not hold changes the vocabulary: stop and ask the developer.
+2. A new `required` field on a table with rows needs a literal `defaultValue`, or goes in without `required` and becomes required in a later migration.
+3. Add the field to the pages that should draw it, and to the roles' grants when they list fields one by one (`<kayan>.fields.<field>`).
+4. From `packages/asas/`, with `DATABASE_URL` pointing at a database built from the migrations (never a pushed one; `AGENTS.md` "Migrations" says how to build one):
+
+   ```sh
+   bunx mithaq generate screens      # when a page draws it
+   bunx mithaq generate messages     # then fill every empty translation
+   bunx mithaq migrate --name <slug>
+   bunx mithaq generate --check
+   ```
+
+5. When `mithaq migrate` stops and asks for an answer in `mithaq.hints.json`, it is a rename or a drop. A drop deletes rows: ask the developer before you answer it.
+6. From the project root, `bunx --package typescript tsc -p .` and the same with `-p` naming each app.
+
+Commit the migration folder.
+
+In a project made with `--layout single`, read each path as `AGENTS.md` maps it; the installed mithaq is `node_modules/mithaq/`.

package/template/templates/asas/.claude/skills/add-kayan/SKILL.md

@@ -0,0 +1,26 @@
+---
+name: add-kayan
+description: Add a kayan, one data type with its table, operations, access and admin pages, to this mithaq project. Use when asked for a new entity, table, resource or list in the dashboard.
+---
+
+# Add a kayan
+
+The steps are "Adding a kayan" in `AGENTS.md`, and the guide's worked example is "Add a kayan" in `README.md`. The installed mithaq is `packages/asas/node_modules/mithaq/`, or `node_modules/mithaq/` where the package manager hoists it to the root; its `docs/packages/mithaq/README.md` lists every kind and rule a field can take.
+
+1. Ask, unless the request says: does each row belong to one organization (place `organization`, the usual answer) or does every organization share it?
+2. Follow `AGENTS.md` "Adding a kayan", copying `packages/features/tags/`. Use only the kinds and rules the language holds; a new one changes the vocabulary, so stop and ask the developer.
+3. Grant its keys to the roles that use it, as step 4 there says. A kayan no role is granted answers no one.
+4. From `packages/asas/`, with `DATABASE_URL` pointing at a database built from the migrations (never a pushed one; `AGENTS.md` "Migrations" says how to build one):
+
+   ```sh
+   bunx mithaq generate screens      # when a screen draws it
+   bunx mithaq generate messages     # then fill every empty translation
+   bunx mithaq migrate --name add_<name>
+   bunx mithaq generate --check
+   ```
+
+5. From the project root, `bunx --package typescript tsc -p .` and `bunx --package typescript tsc -p apps/asas-tanstack` (and `apps/asas-backoffice` when the project has it).
+
+Commit the migration folder. Never edit a file whose first line reads ``// Written by `mithaq <command>` ``; run the command again.
+
+In a project made with `--layout single`, read each path as `AGENTS.md` maps it; the installed mithaq is `node_modules/mithaq/`.

package/template/templates/asas/.claude/skills/eject-admin-piece/SKILL.md

@@ -0,0 +1,28 @@
+---
+name: eject-admin-piece
+description: Change how the admin draws something in this mithaq project, by replacing a control, cell or node in the components map or by ejecting a mithaq-admin piece. Use when asked to restyle or change an admin control, list, form, shell or page piece.
+---
+
+# Change an admin piece
+
+The installed mithaq is `packages/asas/node_modules/mithaq/`, or `node_modules/mithaq/` where the package manager hoists it to the root. The guide is the admin's, its `docs/packages/mithaq-admin/README.md` ("Add or replace a control", "Replace a node", "Eject a piece"), and `eject` in its `docs/packages/mithaq/src/asas/cli/README.md`.
+
+1. Reach for the components map first: a control, a cell or a node is replaced in the app's `src/components.ts` without ejecting anything.
+2. Otherwise eject the piece, in the app that draws it (`apps/asas-tanstack` or `apps/asas-backoffice`):
+
+   ```sh
+   bunx mithaq eject <item>          # an unknown name lists every item
+   ```
+
+   It writes the piece into `src/components/mithaq/`, drawn in place of the package's, and names any shadcn primitive or npm package to add. Restart the dev server.
+3. Edit the ejected file in place; it is the project's now. Keep its last line, the `// mithaq-admin` marker, which `upgrade --check` reads.
+4. Check, in the app:
+
+   ```sh
+   bunx mithaq upgrade --check       # the held files against the installed mithaq-admin
+   bunx --package typescript tsc -p .
+   ```
+
+To go back to the package's piece, delete the file, or run `bunx mithaq eject --prune`, which deletes every ejected file nobody edited.
+
+In a project made with `--layout single`, read each path as `AGENTS.md` maps it; the installed mithaq is `node_modules/mithaq/`.