create-mithaq 0.1.1 → 0.2.1

package/template/templates/features/courses/portal/ui/shell.tsx

@@ -0,0 +1,194 @@
+// The portal's frame, its own look apart from the dashboard's: the organization's name at its head, which is the
+// site's name in every locale, the portal's three places as pills across the top from md up and as a tab bar at
+// the foot of a phone, and one column between them. Its colors are the shadcn tokens the primitives read, set
+// here to the portal's teal and amber for each theme, so a Button or a Card inside it is the portal's without a
+// class of its own.
+import '@fontsource-variable/bricolage-grotesque'
+import { use, useState, type ReactNode } from 'react'
+import { BookOpen, ClipboardCheck, House, Wrench, type LucideIcon } from 'lucide-react'
+// add-on: settings
+import { useQuery } from '@tanstack/react-query'
+import type { Row } from 'mithaq/admin'
+import { useClient } from 'mithaq/admin/react'
+// end add-on: settings
+import type { NavEntry, ShellProps } from 'mithaq/admin'
+import { ScreenContext, useAccess, useLocale, useNav, useScreen, useUser } from 'mithaq/admin/react'
+import { holds } from 'mithaq/admin'
+import { currentOf } from 'mithaq-admin/nav-links.tsx'
+import { DiscardDialog } from 'mithaq-admin/discard-dialog.tsx'
+import { SidebarProvider } from '@/components/ui/sidebar'
+import { locales, switchLocale } from '@/copy.ts'
+import { frame, UserMenu } from '@asas/mithaq/ui/app-shell.tsx'
+import { navLabel } from '@asas/mithaq/ui/screen-nav.tsx'
+import { nameIn } from '@asas/mithaq/mithaq/auth/organizations.ts'
+// add-on: settings
+import { closedTo } from './rules.ts'
+// end add-on: settings
+
+export const regions = ['header', 'main'] as const
+
+/**
+ * The portal's colors over shadcn's tokens, light and dark. Teal is the brand, amber its accent; each pair is
+ * 4.5:1 or more, text on its ground.
+ */
+const tokens = [
+  '[--background:#F5F5F0] [--foreground:#1B1F24] [--card:#FFFFFF] [--card-foreground:#1B1F24]',
+  '[--primary:#0F6E6E] [--primary-foreground:#FFFFFF] [--ring:#0F6E6E] [--muted-foreground:#555A60]',
+  '[--accent:#EAF3F2] [--accent-foreground:#0F6E6E] [--border:#E4E4DC] [--input:#D9D9D0] [--portal-amber:#E8A33D]',
+  'dark:[--background:#0E1414] dark:[--foreground:#ECEFEE] dark:[--card:#172020] dark:[--card-foreground:#ECEFEE]',
+  'dark:[--primary:#5FB8B3] dark:[--primary-foreground:#0B2524] dark:[--ring:#5FB8B3] dark:[--muted-foreground:#A4B0AE]',
+  'dark:[--accent:#16312F] dark:[--accent-foreground:#9CD9D4] dark:[--border:#26302F] dark:[--input:#34403F] dark:[--portal-amber:#E8A33D]',
+].join(' ')
+
+/** The display face of the portal's headings. Its Latin is Bricolage Grotesque; Arabic falls to IBM Plex Sans Arabic. */
+export const display = "font-['Bricolage_Grotesque_Variable','IBM_Plex_Sans_Arabic',sans-serif] font-bold tracking-tight"
+
+const icons: Record<string, LucideIcon> = { '/': House, '/courses': BookOpen, '/enrollments': ClipboardCheck }
+
+// add-on: settings
+/** The organization's settings as the viewer reads them, or `null` where it may not or none are written yet. */
+const useSettings = () => {
+  const client = useClient()
+  return useQuery({
+    queryKey: ['portal-settings'],
+    queryFn: () => (client({ kayan: 'settings', operation: 'findOne', input: {} }) as Promise<Row | null>).catch(() => null),
+    staleTime: 60_000,
+  }).data
+}
+// end add-on: settings
+
+/** One place of the portal: its link, its label, and whether the viewer is on it. */
+const usePlaces = () => {
+  const { locale, t } = useLocale()
+  const screen = useScreen()
+  const access = useAccess()
+  const state = use(ScreenContext)
+  // A seat of anyone's is no longer the viewer's own, so the list is "My enrollments" only to a student.
+  const label = (entry: NavEntry) =>
+    entry.kayan === 'enrollments' && !holds(access, 'enrollments.others') ? t('portal.myEnrollments', 'My enrollments')! : navLabel({ entry, screen, locale, t })!
+  return [
+    { path: '/', href: screen.path, label: t('portal.home', 'Home')!, current: state?.path === screen.path },
+    ...useNav().map((entry) => ({ path: entry.path, href: `${screen.path}${entry.path}`, label: label(entry), current: currentOf(entry, state?.kayan?.name) === 'page' })),
+  ]
+}
+
+/** The other language, offered as its own name, so a reader who cannot read this one still finds theirs. */
+function LocaleButton() {
+  const { locale } = useLocale()
+  const other = locales.find((one) => one !== locale) ?? locale
+  // Asked first, in the app's discard dialog, where a form holds a change nobody saved.
+  const [asked, setAsked] = useState(false)
+  const { t } = useLocale()
+  return (
+    <>
+      <button
+        type="button"
+        lang={other}
+        aria-label={other === 'ar' ? 'العربية' : 'English'}
+        onClick={() => (window.onbeforeunload ? setAsked(true) : switchLocale({ to: other }))}
+        className="border-input bg-card text-foreground focus-visible:ring-ring inline-flex h-11 min-w-11 items-center justify-center rounded-full border px-3 text-sm focus-visible:ring-2 focus-visible:outline-none"
+      >
+        {other === 'ar' ? 'ع' : 'EN'}
+      </button>
+      <DiscardDialog open={asked} onOpenChange={setAsked} onDiscard={() => switchLocale({ to: other })} t={t} />
+    </>
+  )
+}
+
+/** What a student meets while the portal is closed for maintenance: why, and where to write meanwhile. */
+function Closed({ contact }: { contact?: string }) {
+  const { t } = useLocale()
+  return (
+    <section data-portal-closed="" className="bg-card mx-auto grid max-w-md justify-items-center gap-3 rounded-3xl px-6 py-12 text-center">
+      <Wrench aria-hidden className="text-primary size-10" />
+      <h1 className={`${display} text-2xl`}>{t('portal.closed', 'Closed for maintenance')}</h1>
+      <p className="text-muted-foreground">{t('portal.closedBody', 'The school is working on the portal. Please come back soon.')}</p>
+      {contact ? <Contact email={contact} /> : null}
+    </section>
+  )
+}
+
+function Contact({ email }: { email: string }) {
+  const { t } = useLocale()
+  return (
+    <p className="text-muted-foreground text-sm">
+      {t('portal.contact', 'Questions? Write to')}{' '}
+      <a href={`mailto:${email}`} dir="ltr" className="text-primary font-medium underline-offset-4 hover:underline">{email}</a>
+    </p>
+  )
+}
+
+export function PortalShell({ regions }: ShellProps<readonly ['header', 'main'], ReactNode>) {
+  const { locale, t } = useLocale()
+  const user = useUser()
+  const places = usePlaces()
+  // add-on: settings
+  const access = useAccess()
+  const settings = useSettings()
+  // The page answers what the viewer reads either way; this only draws the closed page in its place.
+  const closed = closedTo({ maintenance: settings?.maintenance, access })
+  const contact = typeof settings?.contactEmail === 'string' && settings.contactEmail ? settings.contactEmail : undefined
+  // end add-on: settings
+  // without add-on: settings
+  // const closed = false
+  // const contact: string | undefined = undefined
+  // end without add-on: settings
+  const active = user.organizations?.find((one) => one.id === user.activeOrganizationId)
+  const site = active ? nameIn(active, locale) : t('portal.title', 'Portal')!
+  const nav = t('portal.navigation', 'Portal')
+  return (
+    <SidebarProvider data-shell="top" data-portal="" style={frame} className={`bg-background text-foreground min-h-svh flex-col ${tokens}`}>
+      <header className="bg-card border-b">
+        <div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:px-6">
+          <a href={places[0]!.href} className="flex min-w-0 items-center gap-2.5 font-semibold">
+            <span aria-hidden className="bg-primary text-primary-foreground grid size-9 shrink-0 place-items-center rounded-[10px]">{[...site][0]}</span>
+            <span className="truncate">{site}</span>
+          </a>
+          <nav aria-label={nav} className="hidden gap-1 md:flex">
+            {places.map((place) => (
+              <a
+                key={place.path}
+                href={place.href}
+                aria-current={place.current ? 'page' : undefined}
+                className="text-foreground/80 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground inline-flex h-11 items-center rounded-full px-4 text-[15px] aria-[current=page]:font-semibold"
+              >
+                {place.label}
+              </a>
+            ))}
+          </nav>
+          <div className="flex shrink-0 items-center gap-2">
+            <LocaleButton />
+            {/* The avatar alone: the menu signs out and switches locale too. */}
+            <div className="w-12 [&_[data-slot=avatar]]:grayscale-0 [&_[data-slot=avatar-fallback]]:bg-(--portal-amber) [&_[data-slot=avatar-fallback]]:text-[#1B1F24]">
+              <UserMenu />
+            </div>
+          </div>
+        </div>
+      </header>
+      <main data-region="main" className="mx-auto grid w-full max-w-6xl grid-cols-[minmax(0,1fr)] content-start gap-6 px-4 pt-6 pb-28 sm:px-6 md:pb-12">
+        {closed ? <Closed contact={contact} /> : <><div data-region="header">{regions.header}</div>{regions.main}</>}
+      </main>
+      {contact && !closed ? (
+        <footer className="mx-auto w-full max-w-6xl px-4 pb-28 sm:px-6 md:pb-8">
+          <Contact email={contact} />
+        </footer>
+      ) : null}
+      <nav aria-label={nav} className="bg-card fixed inset-x-0 bottom-0 z-10 grid grid-cols-3 border-t px-2 pt-1.5 pb-[max(env(safe-area-inset-bottom),0.75rem)] md:hidden">
+        {places.map((place) => {
+          const Icon = icons[place.path] ?? BookOpen
+          return (
+            <a
+              key={place.path}
+              href={place.href}
+              aria-current={place.current ? 'page' : undefined}
+              className="text-muted-foreground aria-[current=page]:text-primary flex min-h-13 flex-col items-center justify-center gap-1 text-xs aria-[current=page]:font-semibold"
+            >
+              <Icon aria-hidden className="size-[22px]" />
+              {place.label}
+            </a>
+          )
+        })}
+      </nav>
+    </SidebarProvider>
+  )
+}

package/template/templates/features/courses/sessions/seats.ts

@@ -0,0 +1,42 @@
+import { sql } from 'mithaq/drizzle'
+import type { NodePgDatabase } from 'mithaq/drizzle/node-postgres'
+import { serverTargets } from '@asas/mithaq'
+
+/** A write's transaction, which is drizzle's here. */
+const txOf = (tx: unknown) => tx as NodePgDatabase
+
+/**
+ * How many seats of a session are held, a withdrawn one not among them. Counted through the store, past the
+ * reader's own access, which a student's narrows to its own seat: a caller reads the session under that access first.
+ */
+export const seatsTaken = async ({ session, tx }: { session: string; tx?: unknown }) =>
+  (await serverTargets.drizzle.find({
+    tx,
+    kayan: 'enrollments',
+    args: { limit: 1, page: 1, sort: { field: 'id', direction: 'asc' }, where: { and: [{ session: { equals: session } }, { deletedAt: { exists: false } }] } },
+  })).totalDocs
+
+/**
+ * Serializes every write that takes a seat in one session until its transaction ends: a second write waits here,
+ * and under Read Committed its count, a statement after the lock, sees what the first one committed, so two
+ * writes never both take the last seat.
+ */
+export const holdSeats = async ({ tx, session }: { tx: unknown; session: string }) => {
+  await txOf(tx).execute(sql`select pg_advisory_xact_lock(hashtext('mithaq.seats'), hashtext(${session}))`)
+}
+
+/**
+ * What a seat is judged by, read off the columns in the write's transaction rather than through the actor's
+ * projection: a role shown no capacity, start or archived mark would otherwise read none and skip each rule. A
+ * caller reads the session under the actor's access first, so this reads only a session the actor may reach. Its
+ * `id` is the stored one, the same in every case the caller wrote it. Both rows stay locked before the
+ * enrollment's reference check, so an archive or capacity change cannot pass the decision, and the later
+ * `FOR KEY SHARE` does not require a lock upgrade. `FOR SHARE` lets enrollments share those rows while
+ * holding off their changes; `holdSeats` serializes the seat count for a session with a capacity.
+ *
+ * The tables and columns are written out, as the drizzle target names them; a rename fails R7a, R7b and R7f.
+ */
+export const sessionHeld = async ({ tx, session }: { tx: unknown; session: string }) =>
+  (await txOf(tx).execute<{ id: string; capacity: number | null; startsAt: Date; archived: boolean | null; courseArchived: boolean | null; selfEnroll: boolean | null }>(sql`
+    select s.id, s.capacity::float8 as capacity, s.starts_at as "startsAt", s.archived, c.archived as "courseArchived", c.self_enroll as "selfEnroll"
+    from course_sessions s join courses c on c.id = s.course_id where s.id = ${session} for share of s, c`)).rows[0]

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

@@ -1,13 +1,14 @@
 import { defaultFields, defaultOperations, type Ctx, type Where } from 'mithaq'
-import { defineKayan, organization } from '../mithaq.ts'
-import { activity, appPage, danger, platformList, platformRecord } from '../pages.ts'
+import { defineKayan, organization } from '@asas/mithaq'
+import { activity, appPage, danger, backofficeList, backofficeRecord } from '@asas/mithaq/mithaq/pages.ts'
 import { courses, runsCatalogue } from '../courses/courses.ts'
+import { archivedRow, marks, reason, reasonInput, unarchived } from '../domain/archive.ts'
 
 /**
- * Writes every matched session `archived: true` and nothing else, whatever the call sent as `data`,
- * so the course page's bulk Archive can only archive, never un-archive.
+ * Hands each matched session's `archive` no reason and nothing else, whatever the call sent as
+ * `data`, so the course page's bulk Archive can only archive, never un-archive.
  */
-const archiveAll = (ctx: Ctx): Ctx => ({ ...ctx, data: { ...ctx.data, data: { archived: true } } })
+const archiveAll = (ctx: Ctx): Ctx => ({ ...ctx, data: { ...ctx.data, data: { reason: '' } } })
 
 /**
  * What a session's create and edit pages both draw, written once so the two cannot drift. The edit
@@ -40,11 +41,11 @@ export const sessions = defineKayan({
   // one schema is a trap.
   dbName: 'course_sessions',
   targets: {
-    platform: {
+    backoffice: {
       useAsTitle: 'startsAt',
       pages: {
-        ...platformList('/sessions', { columns: ['startsAt', 'organization', 'course', 'capacity', 'venue'], filters: ['organization', 'course', 'venue', 'archived'], search: ['venue', 'course.title'], sort: '-startsAt' }),
-        ...platformRecord({
+        ...backofficeList('/sessions', { columns: ['startsAt', 'organization', 'course', 'capacity', 'venue'], filters: ['organization', 'course', 'venue', 'archived'], search: ['venue', 'course.title'], sort: '-startsAt' }),
+        ...backofficeRecord({
           path: '/sessions/:id',
           main: [{ tabs: [
             { tab: 'details', label: { en: 'Details', ar: 'التفاصيل' }, fields: [
@@ -95,8 +96,24 @@ export const sessions = defineKayan({
                 columns: ['student', 'createdAt'],
               }, when: { '$user.collections.enrollments.operations.find': { equals: true } } }] },
             ] }],
-            side: [course, activity],
-            danger: danger(),
+            // Whether it is archived and why, read only: a session is archived through its own operations.
+            side: [{ ...course, fields: [...course.fields, { field: 'archived', readOnly: true }, { field: 'archiveReason', readOnly: true }] }, activity],
+            // Archived and brought back as a course is, each with its reason, before the delete.
+            danger: danger({
+              button: 'archive',
+              when: unarchived,
+              label: { en: 'Archive', ar: 'أرشفة' },
+              fields: ['reason'],
+              reload: true,
+              confirm: { title: { en: 'Archive this session?', ar: 'أرشفة هذه الجلسة؟' }, body: { en: 'It stays on the course, marked archived.', ar: 'تبقى في الدورة، معلمة بأنها مؤرشفة.' } },
+            }, {
+              button: 'unarchive',
+              when: archivedRow,
+              label: { en: 'Unarchive', ar: 'إلغاء الأرشفة' },
+              fields: ['reason'],
+              reload: true,
+              confirm: { title: { en: 'Unarchive this session?', ar: 'إلغاء أرشفة هذه الجلسة؟' }, body: { en: 'It is open again as it was.', ar: 'تعود مفتوحة كما كانت.' } },
+            }),
           }]),
         },
       },
@@ -104,9 +121,19 @@ export const sessions = defineKayan({
     service: {
       operations: {
         ...defaultOperations,
-        // Runs as `updateMany` does, one `update` per matched row under the same access, and writes
-        // nothing but the mark.
-        archiveMany: { steps: ({ steps }) => [archiveAll, steps.updateMany] },
+        // One `archive` per matched row under the same access, so the mark is written by an
+        // archive alone.
+        archiveMany: { each: 'archive', steps: ({ steps }) => [archiveAll, steps.updateMany] },
+        archive: {
+          targets: { dashboard: { fields: { reason } } },
+          input: () => reasonInput('sessions.operations.archive'),
+          steps: ({ steps }) => [marks(true), steps.update],
+        },
+        unarchive: {
+          targets: { dashboard: { fields: { reason } } },
+          input: () => reasonInput('sessions.operations.unarchive'),
+          steps: ({ steps }) => [marks(false), steps.update],
+        },
       },
     },
   },
@@ -138,7 +165,8 @@ export const sessions = defineKayan({
       ],
       targets: { dashboard: { component: 'combobox' } },
     },
-    archived: { kind: 'checkbox', label: { en: 'Archived', ar: 'مؤرشفة' } },
+    // Written by `archive` and `unarchive` alone, as a course's is, and `archiveMany` runs an archive per row.
+    archived: { kind: 'checkbox', label: { en: 'Archived', ar: 'مؤرشفة' }, rules: { providedBy: { create: 'never', update: 'application' } } },
     details: { kind: 'richText', label: { en: 'Details', ar: 'التفاصيل' } },
     /**
      * The enrollments that point at this session: the one kind that builds no column. `enrollments.session`
@@ -151,5 +179,8 @@ export const sessions = defineKayan({
       on: 'session',
       label: { en: 'Enrollments', ar: 'التسجيلات' },
     },
+    // Why it was last archived or brought back. Declared last, so a pushed table and a migrated one
+    // hold the column in the same place.
+    archiveReason: { kind: 'text', label: { en: 'Archive reason', ar: 'سبب الأرشفة' }, rules: { maxLength: 200, providedBy: { create: 'never', update: 'application' } } },
   },
 })

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

@@ -0,0 +1,10 @@
+import { media, type ImageRead } from './media/media.ts'
+
+export type { ImageRead }
+
+/**
+ * The feature's kayan, built for the reads beside `media.create` that open an
+ * image, which each feature whose rows point at images brings and the asas
+ * hands in. With none, only a holder of `media.create` reads an image.
+ */
+export const kayan = ({ reads }: { reads: readonly ImageRead[] }) => [media({ reads })] as const

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

@@ -1,50 +1,44 @@
-import { actorPermissions, defaultFields, defaultOperations, folderOf, uploadFields, withUploadReference, type Where } from 'mithaq'
-import { defineKayan, serverTargets, organization } from '../mithaq.ts'
-import { courses } from '../courses/courses.ts'
-import { currentOrganization, readsPast } from '../tenant-access.ts'
-import { appPage, danger } from '../pages.ts'
-import { storageConfig } from '../storage/index.ts'
+import { defaultFields, defaultOperations, folderOf, uploadFields, withUploadReference, type Where } from 'mithaq'
+import { defineKayan, organization } from '@asas/mithaq'
+import { readsPast } from '@asas/mithaq/roles/tenant-access.ts'
+import { appPage, danger } from '@asas/mithaq/mithaq/pages.ts'
+import { storageConfig } from '@asas/mithaq/storage/index.ts'
 
 const ui = folderOf(new URL('./ui/', import.meta.url))
 
+/**
+ * One way an actor that holds no `media.create` reads an image: the images it
+ * may read, or `false` for none. Never `true`, which would open every image of
+ * the organization to whoever the read answered it for.
+ */
+export type ImageRead = (args: { user: unknown }) => Promise<Where | false>
+
 /**
  * The images an actor reads, inside its active organization: every image of
- * its organization where it holds `media.create`, and otherwise only the cover
- * of a course it reads. `media.create` is the line
- * because a role that adds images has to find one before any course names it,
- * in the cover's picker. So a student or an instructor reads no image of a
- * draft, of an archived course or of none, through find, findByID and
- * `GET /api/media/file/<id>`, and the administrator and the registrar read all of them.
- *
- * "A course it reads" is a published course of the organization the actor's session has
- * active, read off the trusted snapshot, under the courses kayan's own read
- * access for this actor. The courses are read straight through the store,
- * past the runner's scope, so the organization is named here and the read
- * never reaches past it whatever the access answers.
- * An image has no field that points at a course, so a row filter cannot reach
- * one, and the covers are read first and named by id.
+ * its organization where it holds `media.create`, and otherwise only those one
+ * of `reads` answers. `media.create` is the line because a role that adds
+ * images has to find one before anything names it, in an upload field's
+ * picker. A file at `GET /api/media/file/<id>` is read through this kayan's
+ * own `findByID`, so the same answer decides who downloads it.
  */
-const coversOfReadableCourses = async ({ user }: { user: unknown }) => {
+const imagesReadBy = (reads: readonly ImageRead[]) => async ({ user }: { user: unknown }) => {
   if (readsPast(user, 'media.create')) return true
-  const held = actorPermissions(user)
-  if (held !== true && !held?.has('courses.find')) return false
-  const active = currentOrganization(user)
-  const readable = active && (await courses.access!.read!({ user }))
-  if (!readable) return false
-  const published: Where = { and: [{ organization: { equals: active } }, { _status: { equals: 'published' } }] }
-  const found = await serverTargets.drizzle.find({ kayan: 'courses', args: {
-    limit: 0,
-    page: 1,
-    sort: { field: 'id', direction: 'asc' },
-    where: readable === true ? published : { and: [readable, published] },
-  } })
-  const ids = [...new Set(found.docs.map((row) => row.cover).filter((id): id is string => typeof id === 'string'))]
-  return ids.length ? { id: { in: ids } } : false
+  const answered: unknown[] = await Promise.all(reads.map((read) => read({ user })))
+  // The type forbids it, but a cast `true` or a filter of nothing would open every image of the
+  // organization, so either throws and the actor reads none.
+  for (const [at, answer] of answered.entries()) {
+    if (answer !== false && (!answer || typeof answer !== 'object' || !Object.keys(answer).length)) {
+      throw new Error(`The image read ${reads[at]!.name || `at ${at}`} answered ${JSON.stringify(answer)}, which would open every image; a read answers false or a filter.`)
+    }
+  }
+  const answers = answered.filter((one): one is Where => one !== false)
+  if (!answers.length) return false
+  return answers.length === 1 ? answers[0]! : { or: answers }
 }
 
 /**
  * The organization's images: a row per file, whose object is kept where the
- * project's storage puts it. A course points at one as its cover.
+ * project's storage puts it. An upload field points at one, as a course's cover does.
  *
  * It spreads `uploadFields`, the columns the create writes from the upload it
  * verified and nobody writes after, and declares its own create and delete:
@@ -53,13 +47,13 @@ const coversOfReadableCourses = async ({ user }: { user: unknown }) => {
  * `uploaded`, and the delete runs its `removed` after the commit. `buildAsas`
  * refuses a create that skips the configured `uploaded`. A file is
  * read at `GET /api/media/file/<id>` through this kayan's own `findByID`, so
- * its organization and `coversOfReadableCourses` decide who reads it. It keeps no versions, since a file never changes once it is
- * made; a course keeps the versions of its cover instead.
+ * its organization and `reads` decide who reads it. It keeps no versions, since a file never changes once it is
+ * made; a kayan pointing at one keeps the versions of that pointer instead.
  */
-export const media = defineKayan({
+export const media = ({ reads }: { reads: readonly ImageRead[] }) => defineKayan({
   name: 'media',
   // ANDed with the inherited rows, so it narrows and never widens.
-  access: { read: coversOfReadableCourses },
+  access: { read: imagesReadBy(reads) },
   messages: {
     singular: { en: 'Image', ar: 'صورة' },
     plural: { en: 'Images', ar: 'الصور' },

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

@@ -10,8 +10,8 @@ import type { CellProps, ComponentProps, Row } from 'mithaq/admin'
 import { useAccess, useClient, useLocale, useRecord, useScreen } from 'mithaq/admin/react'
 import { locales } from '@/copy.ts'
 import { Button, buttonVariants } from '@/components/ui/button'
-import { FileThumb, FileValue, UploadDialog, sizeOf } from '@/components/mithaq/upload.tsx'
-import { AppShell } from '../../ui/app-shell.tsx'
+import { FileThumb, FileValue, UploadDialog, sizeOf } from 'mithaq-admin/upload.tsx'
+import { AppShell } from '@asas/mithaq/ui/app-shell.tsx'
 
 /** The `filesize` column: the size as a person reads it, never the raw bytes, in the upload dialog's own units. */
 export function FileSize({ value }: CellProps) {

package/template/templates/features/media/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@asas/media",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "dependencies": {
+    "@asas/mithaq": "*",
+    "mithaq": "*",
+    "mithaq-admin": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "lucide-react": "^1.16.0",
+    "react": "^19.3.0"
+  }
+}

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

@@ -0,0 +1,4 @@
+import { memberRoles } from './member-roles/member-roles.ts'
+import { roles } from './roles/roles.ts'
+
+export const kayan = [roles, memberRoles] as const

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

@@ -1,13 +1,13 @@
 import { sql } from 'mithaq/drizzle'
 import type { NodePgDatabase } from 'mithaq/drizzle/node-postgres'
 import { assignableRole, conflict, defaultFields, defaultOperations, denied, type Ctx, type WriteTools } from 'mithaq'
-import { defineKayan, platformUi, rows, organization } from '../mithaq.ts'
-import { platformList, platformRecord } from '../pages.ts'
-import { tenantRoles } from '../roles.ts'
-import { platformReads } from '../tenant-access.ts'
-import { managesRoles, OWNER, OWNER_ROLE } from '../roles/grants.ts'
+import { defineKayan, backofficeUi, rows, organization } from '@asas/mithaq'
+import { backofficeList, backofficeRecord } from '@asas/mithaq/mithaq/pages.ts'
+import { tenantRoles } from '@asas/mithaq/roles/system-roles.ts'
+import { backofficeReads } from '@asas/mithaq/roles/tenant-access.ts'
+import { managesRoles, OWNER, OWNER_ROLE } from '@asas/mithaq/roles/grants.ts'
 
-const role = { field: 'role', cell: platformUi('role-cells.tsx#RoleName') } as const
+const role = { field: 'role', cell: backofficeUi('role-cells.tsx#RoleName') } as const
 
 /**
  * Nobody takes from themselves the role that lets them manage roles: their own
@@ -143,14 +143,14 @@ export const memberRoles = defineKayan({
   name: 'memberRoles',
   dbName: 'member_roles',
   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. An assignment is looked for by its person, is titled by them, and
     // reads its role by the role's label, never its slug.
-    platform: {
+    backoffice: {
       useAsTitle: 'user',
       pages: {
-        ...platformList('/member-roles', { columns: ['user', role, 'organization'], filters: ['organization', 'user', 'role'], search: ['user.name', 'user.email'] }),
-        ...platformRecord({ path: '/member-roles/:id', main: [{ section: 'assignment', label: { en: 'Assignment', ar: 'الإسناد' }, fields: ['user', role] }] }),
+        ...backofficeList('/member-roles', { columns: ['user', role, 'organization'], filters: ['organization', 'user', 'role'], search: ['user.name', 'user.email'] }),
+        ...backofficeRecord({ path: '/member-roles/:id', main: [{ section: 'assignment', label: { en: 'Assignment', ar: 'الإسناد' }, fields: ['user', role] }] }),
       },
     },
     // No dashboard page and so no nav entry: a member's roles are changed on the
@@ -163,7 +163,7 @@ export const memberRoles = defineKayan({
         // the column is a string, and the write has not happened, so a refused
         // assignment leaves no row. Without it a custom role holding
         // `memberRoles.create` assigns itself `administrator`. It is handed the
-        // tenant roles alone, so a platform role such as `support` reads as an
+        // tenant roles alone, so a backoffice role such as `support` reads as an
         // unknown custom role and is refused 400. `'roles'` is the kayan it reads
         // the tenant's custom roles from.
         create: { steps: ({ steps }) => [assignableRole(tenantRoles, 'roles'), steps.insert] },
@@ -177,12 +177,12 @@ export const memberRoles = defineKayan({
     },
   },
   // Its own rows, since the inherited table would close the instructor's
-  // delete here. Every platform role reads the assignments of every tenant in
-  // the platform app and changes none; in the tenant app `assignedRoles` omits
-  // the platform slugs.
+  // delete here. Every backoffice role reads the assignments of every tenant in
+  // the backoffice app and changes none; in the tenant app `assignedRoles` omits
+  // the backoffice slugs.
   access: rows({
     '*': { create: true, read: true, update: true, delete: true },
-    ...platformReads,
+    ...backofficeReads,
   }),
   /** A member holds a role once per tenant. A second assignment answers 409 `error.conflict.unique`. */
   indexes: [{ within: 'organization', unique: [['user', 'role']] }],

package/template/templates/features/roles/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@asas/roles",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./roles/ui/*": "./roles/ui/*"
+  },
+  "dependencies": {
+    "@asas/auth": "*",
+    "@asas/mithaq": "*",
+    "mithaq": "*",
+    "mithaq-admin": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "lucide-react": "^1.16.0",
+    "react": "^19.3.0"
+  }
+}