create-mithaq 0.1.1 → 0.2.1

package/template/templates/{asas/src → features/roles}/roles/roles.ts

@@ -1,11 +1,11 @@
 import { actorRoles, conflict, defaultFields, denied, folderOf, grantedPermissions, writableRoleName, defaultOperations, type Ctx, type WriteTools } from 'mithaq'
-import { user as users } from '../kayan/auth/user/user.ts'
+import { user as users } from '@asas/auth'
 import { assignedCount, managerRemains, memberRoles } from '../member-roles/member-roles.ts'
-import { managesRoles } from './grants.ts'
-import { defineKayan, rows, organization } from '../mithaq.ts'
-import { appPage, platformList, platformRecord } from '../pages.ts'
-import { systemRoles } from '../roles.ts'
-import { platformReads } from '../tenant-access.ts'
+import { managesRoles } from '@asas/mithaq/roles/grants.ts'
+import { defineKayan, rows, organization } from '@asas/mithaq'
+import { appPage, backofficeList, backofficeRecord } from '@asas/mithaq/mithaq/pages.ts'
+import { systemRoles } from '@asas/mithaq/roles/system-roles.ts'
+import { backofficeReads } from '@asas/mithaq/roles/tenant-access.ts'
 
 const rolesUi = folderOf(new URL('./ui/', import.meta.url))
 
@@ -14,17 +14,17 @@ const rolesUi = folderOf(new URL('./ui/', import.meta.url))
  * a granter may not hand over a key it does not itself hold.
  */
 /**
- * A tenant's role never holds `screen.platform`, which only a platform role holds: a row naming it would be a tenant claiming the platform.
+ * A tenant's role never holds `screen.backoffice`, which only a backoffice role holds: a row naming it would be a tenant claiming the backoffice.
  * It is refused before the granter check, so a root granter holding `'*'` is refused too.
  */
-const PLATFORM_KEY = 'screen.platform'
+const BACKOFFICE_KEY = 'screen.backoffice'
 const tenantKeysOnly = (ctx: Ctx): Ctx => {
   const written = (ctx.data as Record<string, unknown>).permissions
-  if (!Array.isArray(written) || !written.includes(PLATFORM_KEY)) return ctx
+  if (!Array.isArray(written) || !written.includes(BACKOFFICE_KEY)) return ctx
   throw denied({
-    message: `Forbidden: a "${ctx.kayan.name}" row is a tenant's role, and "${PLATFORM_KEY}" is held only by a platform role.`,
-    key: 'error.forbidden.platform_key',
-    params: { kayan: ctx.kayan.name, permissions: [PLATFORM_KEY] },
+    message: `Forbidden: a "${ctx.kayan.name}" row is a tenant's role, and "${BACKOFFICE_KEY}" is held only by a backoffice role.`,
+    key: 'error.forbidden.backoffice_key',
+    params: { kayan: ctx.kayan.name, permissions: [BACKOFFICE_KEY] },
   })
 }
 
@@ -98,24 +98,24 @@ const keepsManagers = async (ctx: Ctx, tools: WriteTools): Promise<Ctx> => {
 const rolesAccess = rows({
   '*': { create: true, read: true, update: true, delete: true },
   /**
-   * Every platform role reads the role rows of every tenant, and writes none. A
+   * Every backoffice role reads the role rows of every tenant, and writes none. A
    * tenant that lost its administrator is repaired through `mithaq rbac assign`,
-   * never from the platform app.
+   * never from the backoffice app.
    */
-  ...platformReads,
+  ...backofficeReads,
 })
 
 export const roles = defineKayan({
   name: 'roles',
   targets: {
-    /** Every organization's rows on the platform, read-only. */
-    platform: {
+    /** Every organization's rows on the backoffice, read-only. */
+    backoffice: {
       useAsTitle: 'label',
       pages: {
         // A role by its label, never its slug, and its keys grouped as the
         // dashboard draws a fixed role's.
-        ...platformList('/roles', { columns: ['label', 'organization'], filters: ['organization'], search: ['label'] }),
-        ...platformRecord({
+        ...backofficeList('/roles', { columns: ['label', 'organization'], filters: ['organization'], search: ['label'] }),
+        ...backofficeRecord({
           path: '/roles/:id',
           main: [{ section: 'role', label: { en: 'Role', ar: 'الدور' }, fields: ['label', { field: 'permissions', cell: rolesUi('roles.tsx#Permissions') }] }],
         }),
@@ -142,15 +142,15 @@ export const roles = defineKayan({
         ar: 'ما يمكن لكل دور في هذه المؤسسة أن يراه ويفعله.',
       },
       pages: {
-        list: { path: '/roles', page: appPage([{ layout: 'table', main: [{ list: { columns: ['label', 'name'], limit: 100 }, component: 'rolesTable' }] }]) },
-        create: { path: '/roles/new', page: appPage([{ layout: 'record', main: [{ form: ['name', 'label', 'permissions'], component: 'roleForm' }] }]) },
+        list: { path: '/roles', page: appPage([{ layout: 'table', main: [{ list: { columns: ['label', 'name', 'permissions'], limit: 100 }, component: rolesUi('roles.tsx#RolesTable') }] }]) },
+        create: { path: '/roles/new', page: appPage([{ layout: 'record', main: [{ form: ['name', 'label', 'permissions'], component: rolesUi('role-form.tsx#RoleForm') }] }]) },
         edit: {
           path: '/roles/:id',
           page: appPage([
             {
               layout: 'record',
-              main: [{ form: ['name', 'label', 'permissions'], component: 'roleForm' }],
-              danger: [{ button: 'delete', label: { en: 'Delete', ar: 'حذف' }, component: 'deleteRole' }],
+              main: [{ form: ['name', 'label', 'permissions'], component: rolesUi('role-form.tsx#RoleForm') }],
+              danger: [{ button: 'delete', label: { en: 'Delete', ar: 'حذف' }, component: rolesUi('roles.tsx#DeleteRole') }],
             },
           ]),
         },

package/template/templates/{asas/src → features/roles}/roles/ui/role-form.tsx

@@ -3,20 +3,22 @@
 // values; this reads and writes them through `useForm()`, and reads each box's
 // refusal through `useKayanField`, so a box says it is required, says what is
 // wrong under itself once left or refused, and marks itself invalid.
-import type { ReactNode } from 'react'
+import type { ComponentProps as ElementProps, ReactNode } from 'react'
+import { ChevronDown } from 'lucide-react'
 import type { ComponentProps } from 'mithaq/admin'
 import { useAccess, useForm, useKayan, useLocale, useScreen } from 'mithaq/admin/react'
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import { Input } from '@/components/ui/input'
-import { ariaRequired } from '@/components/mithaq/controls.tsx'
-import { FieldShell, describedBy } from '@/components/mithaq/field-shell.tsx'
-import { useKayanField } from '@/components/mithaq/form.tsx'
-import { grantable } from '../grants.ts'
-import { projectStatements } from '../../statements.ts'
+import { ariaRequired } from 'mithaq-admin/control-props.ts'
+import { FieldShell, describedBy } from 'mithaq-admin/field-shell.tsx'
+import { useKayanField } from 'mithaq-admin/form-context.tsx'
+import { grantable } from '@asas/mithaq/roles/grants.ts'
+import { projectStatements } from '@asas/mithaq/roles/statements.ts'
 
 /** The key a tenant's role may never hold, which the role kayan refuses by name, so no badge offers it. */
-const PLATFORM_KEY = 'screen.platform'
+const BACKOFFICE_KEY = 'screen.backoffice'
 
 type Key = { key: string; label: string }
 type Group = { name: string; label: string; operations: Key[]; fields: Key[] }
@@ -31,7 +33,7 @@ const useGroups = (): Group[] => {
   const screen = useScreen()
   const access = useAccess()
   const { locale, t } = useLocale()
-  const screens = (access.screens ?? []).map((name) => `screen.${name}`).filter((key) => key !== PLATFORM_KEY)
+  const screens = (access.screens ?? []).map((name) => `screen.${name}`).filter((key) => key !== BACKOFFICE_KEY)
   return [
     {
       name: 'screen',
@@ -54,7 +56,45 @@ const useGroups = (): Group[] => {
 }
 
 /**
- * The keys a role holds as badges, grouped by screen and kayan. With `onChange`
+ * A role's or a group's keys behind a row that names them and counts what they grant, closed at
+ * first so a page of roles reads as a list of names; `defaultOpen` where the keys are the page's
+ * work. A closed panel is `hidden="until-found"` once the page runs, so it is in the first paint
+ * and a find on the page opens it. `named` names a row that draws no label of its own, so a reader
+ * of the screen hears whose keys it opens. Every permission has nothing to open, so it is said.
+ */
+export function Grants({ label, named, held, heading, defaultOpen, children, ...root }: { label?: ReactNode; named?: string; held: readonly string[]; heading?: boolean; defaultOpen?: boolean; children: ReactNode } & ElementProps<'div'>) {
+  const { locale, t } = useLocale()
+  const count = held.length === 1
+    ? t('dashboard.permissionsCountOne', '1 permission')
+    : (t('dashboard.permissionsCount', '{count} permissions') ?? '{count} permissions').replace('{count}', () => new Intl.NumberFormat(locale).format(held.length))
+  if (held.includes('*')) {
+    return (
+      <div {...root} className="flex items-center gap-2">
+        {/* Where a chevron stands on every other row, so the names line up. */}
+        <span aria-hidden="true" className="size-4 shrink-0" />
+        {label}
+        <span className="text-muted-foreground text-xs">{t('dashboard.everyPermission', 'Every permission')}</span>
+      </div>
+    )
+  }
+  const trigger = (
+    <CollapsibleTrigger aria-label={named && `${named}: ${count}`} className="group flex w-full cursor-pointer items-center gap-2 text-start max-sm:min-h-11">
+      <ChevronDown aria-hidden="true" className="text-muted-foreground size-4 shrink-0 transition-transform group-data-[panel-open]:rotate-180" />
+      {label}
+      <span className="text-muted-foreground text-xs font-normal">{count}</span>
+    </CollapsibleTrigger>
+  )
+  return (
+    <Collapsible {...root} defaultOpen={defaultOpen}>
+      {heading ? <h3 className="text-sm font-medium">{trigger}</h3> : trigger}
+      <CollapsibleContent hiddenUntilFound className="ps-6 pt-2">{children}</CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+/**
+ * The keys a role holds as badges, grouped by screen and kayan, each group behind its count: closed where they are
+ * read, open in the editor, whose work they are. With `onChange`
  * each badge is a toggle, a key the viewer may not hand over disabled; without it
  * only the keys held are drawn. A key no group names stays, under "Other", so a
  * save never drops one.
@@ -63,7 +103,7 @@ export function PermissionBadges({ held, onChange, busy }: { held: readonly stri
   const access = useAccess()
   const { t } = useLocale()
   // Read only, every screen the role enters is named, whichever the viewer
-  // enters: the platform reads a tenant's role, which holds `screen.dashboard`.
+  // enters: the backoffice reads a tenant's role, which holds `screen.dashboard`.
   const groups = useGroups().map((group) =>
     group.name === 'screen' && !onChange
       ? { ...group, operations: held.filter((key) => key.startsWith('screen.')).map((key) => ({ key, label: t(`screens.${key.slice('screen.'.length)}`) ?? key })) }
@@ -111,28 +151,29 @@ export function PermissionBadges({ held, onChange, busy }: { held: readonly stri
   }
   if (held.includes('*')) return <Badge variant="outline">{t('dashboard.everyPermission', 'Every permission')}</Badge>
   return (
-    <div data-permissions="" className="grid gap-4">
+    <div data-permissions="" className="grid gap-2">
       {groups.map((group) => {
         const operations = badges(group.operations)
         const fields = badges(group.fields)
+        const keys = [...group.operations, ...group.fields].map((one) => one.key)
         return operations || fields ? (
-          <section key={group.name} data-group={group.name} className="grid gap-1.5">
-            <h3 className="text-muted-foreground text-xs font-medium">{group.label}</h3>
-            {operations}
-            {fields ? (
-              <>
-                <p className="text-muted-foreground text-xs">{t('dashboard.permissionsFields', 'Fields')}</p>
-                {fields}
-              </>
-            ) : null}
-          </section>
+          <Grants key={group.name} data-group={group.name} heading defaultOpen={Boolean(onChange)} label={<span>{group.label}</span>} held={held.filter((key) => keys.includes(key))}>
+            <div className="grid gap-1.5">
+              {operations}
+              {fields ? (
+                <>
+                  <p className="text-muted-foreground text-xs">{t('dashboard.permissionsFields', 'Fields')}</p>
+                  {fields}
+                </>
+              ) : null}
+            </div>
+          </Grants>
         ) : null
       })}
       {other.length ? (
-        <section data-group="" className="grid gap-1.5">
-          <h3 className="text-muted-foreground text-xs font-medium">{t('dashboard.permissionsOther', 'Other')}</h3>
+        <Grants data-group="" heading defaultOpen={Boolean(onChange)} label={<span>{t('dashboard.permissionsOther', 'Other')}</span>} held={other}>
           {badges(other.map((key) => ({ key, label: otherLabel(key) })))}
-        </section>
+        </Grants>
       ) : null}
     </div>
   )

package/template/templates/{asas/src → features/roles}/roles/ui/roles.tsx

@@ -4,8 +4,7 @@ import { useState } from 'react'
 import { Lock } from 'lucide-react'
 import type { ButtonProps, CellProps, Row } from 'mithaq/admin'
 import { useClient, useList, useLocale, useRecord, useScreen } from 'mithaq/admin/react'
-import type { asas } from '../../asas.ts'
-import { tenantRoles } from '../../tenant-roles.ts'
+import { tenantRoles } from '@asas/mithaq/roles/tenant-roles.ts'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -19,7 +18,7 @@ import {
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { PermissionBadges } from './role-form.tsx'
+import { Grants, PermissionBadges } from './role-form.tsx'
 
 /** A role's label in the viewer's locale, and its slug only where a row carries none. */
 export const labelOf = (row: Row | null | undefined, locale: string) => {
@@ -28,9 +27,9 @@ export const labelOf = (row: Row | null | undefined, locale: string) => {
 }
 
 /**
- * The list node's component: the fixed roles first, from their code, each with a lock and its keys
- * one click away, then the organization's own, each opening its page. It draws no row menu; a custom
- * role's delete is its page's.
+ * The list node's component: the fixed roles first, from their code, each with a lock, then the
+ * organization's own. Each row names a role and counts what it grants, and opens to its keys and,
+ * for a custom role, a link to its page. It draws no row menu; a custom role's delete is its page's.
  */
 export function RolesTable() {
   const { page, creates, href, newHref } = useList()
@@ -56,33 +55,55 @@ export function RolesTable() {
           <TableBody>
             {Object.entries(tenantRoles).map(([name, role]) => (
               <TableRow key={name} data-row={name} data-fixed="true">
-                <TableCell>
-                  <details data-fixed-role="">
-                    <summary className="flex cursor-pointer items-center gap-1.5 font-medium max-sm:min-h-11">
-                      <Lock data-lock="" className="text-muted-foreground size-3.5" aria-hidden="true" />
-                      <span>{(role.label as Readonly<Record<string, string>>)[locale] ?? name}</span>
-                    </summary>
-                    <div className="grid gap-2 pt-2">
+                <TableCell className="whitespace-normal">
+                  <Grants
+                    data-fixed-role=""
+                    label={
+                      <span className="flex items-center gap-1.5 font-medium">
+                        <Lock data-lock="" className="text-muted-foreground size-3.5" aria-hidden="true" />
+                        <span>{(role.label as Readonly<Record<string, string>>)[locale] ?? name}</span>
+                      </span>
+                    }
+                    held={role.permissions === '*' ? ['*'] : role.permissions}
+                  >
+                    <div className="grid gap-2">
                       <p className="text-muted-foreground text-sm">{t('dashboard.rolesFixedAbout', 'This role ships with the project. What it holds is code, so it cannot be edited or deleted here.')}</p>
                       <PermissionBadges held={role.permissions === '*' ? ['*'] : role.permissions} />
                     </div>
-                  </details>
+                  </Grants>
                 </TableCell>
-                <TableCell>
+                <TableCell className="align-top">
                   <Badge variant="secondary">{t('dashboard.rolesFixed', 'Fixed')}</Badge>
                 </TableCell>
               </TableRow>
             ))}
             {page.docs.map((row) => {
               const id = String(row.id)
+              const label = labelOf(row, locale)
+              const open = (
+                <a href={href(id)} className="text-primary justify-self-start text-sm underline underline-offset-4 max-sm:inline-flex max-sm:min-h-11 max-sm:items-center">
+                  {(t('dashboard.rolesOpen', 'Open {role}') ?? 'Open {role}').replace('{role}', () => label)}
+                </a>
+              )
               return (
                 <TableRow key={id} data-row={id} data-fixed="false">
-                  <TableCell>
-                    <a href={href(id)} className="flex items-center gap-1.5 font-medium underline-offset-4 hover:underline max-sm:min-h-11">
-                      <span>{labelOf(row, locale)}</span>
-                    </a>
+                  <TableCell className="whitespace-normal">
+                    {/* A role whose keys the viewer may not read comes without them, so it is named and linked and counts nothing. */}
+                    {Array.isArray(row.permissions) ? (
+                      <Grants label={<span className="font-medium">{label}</span>} held={row.permissions as string[]}>
+                        <div className="grid gap-2">
+                          {open}
+                          <PermissionBadges held={row.permissions as string[]} />
+                        </div>
+                      </Grants>
+                    ) : (
+                      <div className="grid gap-1">
+                        <span className="font-medium">{label}</span>
+                        {open}
+                      </div>
+                    )}
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="align-top">
                     <Badge variant="outline">{t('dashboard.rolesCustom', 'Custom')}</Badge>
                   </TableCell>
                 </TableRow>
@@ -103,6 +124,9 @@ export function Permissions({ value }: Pick<CellProps, 'value'>) {
   return <PermissionBadges held={Array.isArray(value) ? (value as string[]) : []} />
 }
 
+/** A page of rows as the client answers it, read untyped since a feature never imports the asas it is built into. */
+type Found = { docs?: Record<string, unknown>[] } | undefined
+
 /**
  * A custom role's delete, the danger zone's button. A role any member holds is not deleted, so the
  * button reads who holds it first: while anyone does, the dialog names them, each linking to their
@@ -111,7 +135,7 @@ export function Permissions({ value }: Pick<CellProps, 'value'>) {
  */
 export function DeleteRole({ run, busy }: ButtonProps) {
   const record = useRecord()
-  const client = useClient<typeof asas.router>()
+  const client = useClient()
   // Read at the build's most rows one served read answers, since a page past
   // it is a 400 the catch below would read as no holders at all.
   const { path, maxLimit } = useScreen()
@@ -119,12 +143,12 @@ export function DeleteRole({ run, busy }: ButtonProps) {
   const [open, setOpen] = useState(false)
   const [holders, setHolders] = useState<{ id: string; name: string }[]>([])
   const ask = async () => {
-    const held = await client({ kayan: 'memberRoles', operation: 'find', input: { where: { role: { equals: record?.name as string } }, limit: maxLimit, depth: 0 } }).catch(() => undefined)
-    const ids = held?.docs?.map((row) => row.user) ?? []
-    const named = ids.length ? await client({ kayan: 'user', operation: 'find', input: { where: { id: { in: ids } }, limit: maxLimit, depth: 0 } }).catch(() => undefined) : undefined
+    const held = await client({ kayan: 'memberRoles', operation: 'find', input: { where: { role: { equals: record?.name as string } }, limit: maxLimit, depth: 0 } }).catch(() => undefined) as Found
+    const ids = held?.docs?.map((row) => String(row.user)) ?? []
+    const named = ids.length ? await client({ kayan: 'user', operation: 'find', input: { where: { id: { in: ids } }, limit: maxLimit, depth: 0 } }).catch(() => undefined) as Found : undefined
     // A holder whose name the viewer may not read is "a member", never a raw id, and the link still
     // opens their roles.
-    setHolders(ids.map((id) => ({ id, name: named?.docs?.find((one) => one.id === id)?.name ?? t('dashboard.rolesHolderUnnamed', 'A member') ?? '' })))
+    setHolders(ids.map((id) => ({ id, name: (named?.docs?.find((one) => one.id === id)?.name as string | undefined) ?? t('dashboard.rolesHolderUnnamed', 'A member') ?? '' })))
     setOpen(true)
   }
   return (

package/template/templates/features/settings/index.ts

@@ -0,0 +1,3 @@
+import { settings } from './settings/settings.ts'
+
+export const global = [settings] as const

package/template/templates/features/settings/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@asas/settings",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "dependencies": {
+    "@asas/mithaq": "*",
+    "mithaq": "*"
+  }
+}

package/template/templates/{asas/src → features/settings}/settings/settings.ts

@@ -1,7 +1,7 @@
 import { defaultFields, defaultGlobalFields, defaultGlobalOperations } from 'mithaq'
-import { defineGlobal, organization, rows } from '../mithaq.ts'
-import { platformClosed, tenantAccess } from '../tenant-access.ts'
-import { appPage } from '../pages.ts'
+import { defineGlobal, organization, rows } from '@asas/mithaq'
+import { backofficeClosed, tenantAccess } from '@asas/mithaq/roles/tenant-access.ts'
+import { appPage } from '@asas/mithaq/mithaq/pages.ts'
 
 /**
  * The project's settings, one row per tenant, because this global places
@@ -20,31 +20,26 @@ export const settings = defineGlobal({
   fields: {
     ...defaultFields,
     organization: { ...organization, rules: { ...organization.rules, unique: true } },
-    siteTitle: {
-      kind: 'text',
-      label: { en: 'Site title', ar: 'عنوان الموقع' },
-      // Trimmed, so a title of spaces is refused as required.
-      rules: { required: true, trim: true, maxLength: 120 },
-    },
+    // The site has no name of its own: it is the organization's, in every locale.
     maintenance: {
       kind: 'checkbox',
       label: { en: 'Maintenance', ar: 'الصيانة' },
       description: {
-        en: 'While this is on, the site tells visitors it is closed for maintenance.',
-        ar: 'ما دام هذا مفعلا، يخبر الموقع زواره بأنه مغلق للصيانة.',
+        en: 'While this is on, the portal tells students it is closed for maintenance. Staff keep working.',
+        ar: 'ما دام هذا مفعلا، تخبر البوابة الطلاب بأنها مغلقة للصيانة. ويواصل الموظفون عملهم.',
       },
     },
-    // Where a visitor writes to, the one address the project shows.
+    // Where a student writes to, the one address the portal shows: at its foot, and on its maintenance page.
     contactEmail: { kind: 'email', label: { en: 'Contact email', ar: 'بريد التواصل' } },
     // The column default is the one the table was made with, so the committed
     // migrations still describe it.
     globalType: { ...defaultGlobalFields.globalType, rules: { required: true, defaultValue: 'settings' } },
   },
-  // Its own rows: the language's, and every platform role closed. The platform
+  // Its own rows: the language's, and every backoffice role closed. The backoffice
   // lists no global, since a list across tenants reads by `find` and a global
   // declares none, so it reads none, 403 `error.forbidden.read`. A global takes
   // read and update alone, and the other two the rows compile are never reached.
-  access: rows({ ...tenantAccess, ...platformClosed }) as Pick<ReturnType<typeof rows>, 'read' | 'update'>,
+  access: rows({ ...tenantAccess, ...backofficeClosed }) as Pick<ReturnType<typeof rows>, 'read' | 'update'>,
   targets: {
     service: { operations: defaultGlobalOperations },
     // A global is one row, so its page is a custom one with no id: its form
@@ -52,14 +47,14 @@ export const settings = defineGlobal({
     // yes or no setting a switch with its label beside it.
     dashboard: {
       description: {
-        en: 'How the site presents itself, and whether it is open to visitors.',
-        ar: 'كيف يظهر الموقع، وهل هو مفتوح للزوار.',
+        en: 'Where students reach the school, and whether the portal is open to them.',
+        ar: 'أين يتواصل الطلاب مع المدرسة، وهل البوابة مفتوحة لهم.',
       },
       pages: {
         settings: {
           path: '/settings',
           page: appPage([{ layout: 'record', main: [{ form: [
-            { section: 'site', label: { en: 'Site', ar: 'الموقع' }, fields: ['siteTitle', 'contactEmail'] },
+            { section: 'contact', label: { en: 'Contact', ar: 'التواصل' }, fields: ['contactEmail'] },
             { section: 'availability', label: { en: 'Availability', ar: 'الإتاحة' }, fields: [{ field: 'maintenance', component: 'switch' }] },
           ] }] }]),
         },

package/template/templates/features/tags/index.ts

@@ -0,0 +1,3 @@
+import { tags } from './tags/tags.ts'
+
+export const kayan = [tags] as const

package/template/templates/features/tags/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@asas/tags",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "dependencies": {
+    "@asas/mithaq": "*",
+    "mithaq": "*",
+    "zod": "^4.6.5"
+  }
+}

package/template/templates/{asas/src → features/tags}/tags/tags.ts

@@ -1,8 +1,8 @@
-import { defaultFields, defaultOperations } from 'mithaq'
+import { defaultFields } from 'mithaq'
 import { z } from 'zod'
-import { defineKayan, organization } from '../mithaq.ts'
-import { appPage, danger, platformList, platformRecord } from '../pages.ts'
-import { expectedUpdatedAt } from '../steps/expected-updated-at.ts'
+import { defineKayan, organization } from '@asas/mithaq'
+import { appPage, danger, backofficeList, backofficeRecord } from '@asas/mithaq/mithaq/pages.ts'
+import { expectedUpdatedAt } from '@asas/mithaq/steps/expected-updated-at.ts'
 
 const tag = [{ section: 'tag', label: { en: 'Tag', ar: 'الوسم' }, fields: ['name'] }] as const
 
@@ -21,13 +21,13 @@ export const tags = defineKayan({
   // What the picker on `courses.tags` shows for each row, and what its search
   // runs a `like` over. Without it every tag is a uuid.
   targets: {
-    // Every organization's rows on the platform, read-only, and each row's
+    // Every organization's rows on the backoffice, read-only, and each row's
     // record, which only reads.
-    platform: {
+    backoffice: {
       useAsTitle: 'name',
       pages: {
-        ...platformList('/tags', { columns: ['name', 'organization', 'createdAt'], filters: ['organization'], search: ['name'] }),
-        ...platformRecord({ path: '/tags/:id', main: [{ section: 'tag', label: { en: 'Tag', ar: 'الوسم' }, fields: ['name'] }] }),
+        ...backofficeList('/tags', { columns: ['name', 'organization', 'createdAt'], filters: ['organization'], search: ['name'] }),
+        ...backofficeRecord({ path: '/tags/:id', main: [{ section: 'tag', label: { en: 'Tag', ar: 'الوسم' }, fields: ['name'] }] }),
       },
     },
     // A create opens as a sheet over the list. The name is copy a screen shows
@@ -36,20 +36,20 @@ export const tags = defineKayan({
     dashboard: {
       useAsTitle: 'name',
       description: {
-        en: 'Labels that group courses in the catalogue.',
-        ar: 'تسميات تجمع الدورات في الدليل.',
+        en: 'Labels the organization groups its records by.',
+        ar: 'تسميات تجمع بها المؤسسة سجلاتها.',
       },
       pages: {
         list: { path: '/tags', page: appPage([{ layout: 'table', main: [{ list: { columns: ['name', 'createdAt'], search: ['name'] } }] }]) },
-        // The sheet's title says it makes a tag, so its one box is drawn
+        // The drawer's title says it makes a tag, so its one box is drawn
         // bare rather than under a second heading that says "Tag" again.
-        create: { path: '/tags/new', mode: 'sheet', page: appPage([{ layout: 'record', main: [{ form: ['name'] }] }]) },
+        create: { path: '/tags/new', mode: 'drawer', page: appPage([{ layout: 'record', main: [{ form: ['name'] }] }]) },
         edit: { path: '/tags/:id', page: appPage([{ layout: 'record', main: [{ form: tag }], danger: danger() }]) },
       },
     },
     service: {
-      operations: {
-        ...defaultOperations,
+      operations: ({ defaults }) => ({
+        ...defaults,
         /**
          * The shipped update list with the `expectedUpdatedAt` step before it and
          * its input widened by the key the step reads. A caller who sends the
@@ -63,7 +63,7 @@ export const tags = defineKayan({
           input: ({ update }) => update.extend({ expectedUpdatedAt: z.date().optional() }),
           steps: ({ steps }) => [expectedUpdatedAt, steps.update],
         },
-      },
+      }),
     },
   },
   fields: {

package/template/templates/mithaq/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@asas/mithaq",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/mithaq.ts",
+    "./auth": "./src/mithaq/auth/index.ts",
+    "./auth/backoffice-roles": "./src/mithaq/auth/backoffice-roles.ts",
+    "./auth/organizations": "./src/mithaq/auth/organizations.ts",
+    "./*": "./src/*"
+  },
+  "dependencies": {
+    "@better-auth/core": "1.7.4",
+    "@lexical/extension": "0.52.0",
+    "@lexical/link": "0.52.0",
+    "@lexical/list": "0.52.0",
+    "@lexical/rich-text": "0.52.0",
+    "aws4fetch": "1.0.20",
+    "better-auth": "1.7.4",
+    "file-type": "22.0.1",
+    "image-dimensions": "2.5.1",
+    "lexical": "0.52.0",
+    "mithaq": "*",
+    "mithaq-admin": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "lucide-react": "^1.16.0",
+    "react": "^19.3.0",
+    "zod": "^4.6.5"
+  }
+}

package/template/templates/mithaq/src/mail/index.ts

@@ -0,0 +1,32 @@
+// Which mailer this project sends with. `mailers.ts` beside this file is copied from the
+// `mithaq-mail` registry item and owned by the project; a project on another service writes its
+// adapter there and names it here. The auth setup sends the password reset, the invitation and the
+// email verification through it, and refuses an open sign-up in production while none is configured.
+import { defaultResendBaseURL, resendMailer, type Mailer } from './mailers.ts'
+
+export { logMailer, type Mail, type Mailer } from './mailers.ts'
+
+/**
+ * Resend when both `RESEND_API_KEY` and `MAIL_FROM` are set, none when neither is. Half the settings
+ * is refused, so a typo never leaves a deploy sending nothing while it seems configured.
+ * `RESEND_BASE_URL`, Resend's own SDK variable, points it at another address that speaks its API.
+ */
+export const mailerFromEnv = (env: Record<string, string | undefined>): Mailer | undefined => {
+  const { RESEND_API_KEY: apiKey, MAIL_FROM: from } = env
+  if (!apiKey && !from) return undefined
+  if (!apiKey) throw new Error('MAIL_FROM is set and RESEND_API_KEY is not. Set both, or neither.')
+  if (!from) throw new Error('RESEND_API_KEY is set and MAIL_FROM is not: set MAIL_FROM to an address at a domain your Resend account verified.')
+  const baseURL = env.RESEND_BASE_URL || defaultResendBaseURL
+  // The key and every letter cross to it, so in the clear only to this machine, such as a test's catcher.
+  const at = URL.canParse(baseURL) ? new URL(baseURL) : undefined
+  if (!at || (at.protocol !== 'https:' && !(at.protocol === 'http:' && ['localhost', '127.0.0.1', '[::1]'].includes(at.hostname)))) {
+    throw new Error(`RESEND_BASE_URL is ${JSON.stringify(baseURL)}: set an https address, or http on this machine.`)
+  }
+  return resendMailer({ apiKey, from, baseURL })
+}
+
+/**
+ * The mailer this deploy configured, or none; the auth setup logs mail in development without one.
+ * The auth setup asks it as it loads, so every load reads the environment it is started with.
+ */
+export const configuredMailer = (): Mailer | undefined => mailerFromEnv(process.env)