create-mithaq 0.1.1 → 0.2.1

package/template/apps/asas-tanstack/src/components/ui/drawer.tsx

@@ -1,215 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
-import { cn } from "@/lib/utils"
-
-type DrawerContextProps = {
-  hasSnapPoints: boolean
-  modal: DrawerPrimitive.Root.Props["modal"]
-  showSwipeHandle: boolean
-  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>
-}
-
-const DrawerContext = React.createContext<DrawerContextProps | null>(null)
-
-function useDrawer() {
-  const context = React.useContext(DrawerContext)
-
-  if (!context) {
-    throw new Error("useDrawer must be used within a Drawer.")
-  }
-
-  return context
-}
-
-function Drawer({
-  modal = true,
-  showSwipeHandle = false,
-  snapPoints,
-  swipeDirection = "down",
-  ...props
-}: DrawerPrimitive.Root.Props & {
-  showSwipeHandle?: boolean
-}) {
-  const hasSnapPoints = snapPoints != null && snapPoints.length > 0
-  const contextValue = React.useMemo(
-    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
-    [hasSnapPoints, modal, showSwipeHandle, swipeDirection]
-  )
-
-  return (
-    <DrawerContext.Provider value={contextValue}>
-      <DrawerPrimitive.Root
-        data-slot="drawer"
-        modal={modal}
-        snapPoints={snapPoints}
-        swipeDirection={swipeDirection}
-        {...props}
-      />
-    </DrawerContext.Provider>
-  )
-}
-
-function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
-}
-
-function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
-}
-
-function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
-}
-
-function DrawerOverlay({
-  className,
-  ...props
-}: DrawerPrimitive.Backdrop.Props) {
-  return (
-    <DrawerPrimitive.Backdrop
-      data-slot="drawer-overlay"
-      className={cn(
-        "fixed inset-0 z-50 min-h-dvh bg-black/80 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerSwipeHandle({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-swipe-handle"
-      aria-hidden="true"
-      className={cn(
-        "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-[100px] group-data-[swipe-axis=x]/drawer-popup:after:w-1.5 group-data-[swipe-axis=y]/drawer-popup:after:h-1.5 group-data-[swipe-axis=y]/drawer-popup:after:w-[100px] active:cursor-grabbing",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerContent({
-  className,
-  children,
-  ...props
-}: DrawerPrimitive.Popup.Props) {
-  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
-  const swipeAxis =
-    swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"
-
-  return (
-    <DrawerPortal data-slot="drawer-portal">
-      {modal === true && (
-        <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />
-      )}
-      <DrawerPrimitive.Viewport
-        data-slot="drawer-viewport"
-        data-modal={modal}
-        className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
-      >
-        <DrawerPrimitive.Popup
-          data-slot="drawer-popup"
-          data-swipe-axis={swipeAxis}
-          data-snap-points={hasSnapPoints ? "" : undefined}
-          className={cn(
-            "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col rounded-4xl border border-popover bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [--drawer-bleed-background:transparent] [--drawer-inset:--spacing(2)] [interpolate-size:allow-keywords] dark:border-border",
-            "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
-            "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:end-full data-[swipe-direction=right]:after:start-full data-[swipe-direction=up]:after:bottom-full",
-            "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
-            "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
-            "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
-            "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
-            "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
-            "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
-            "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
-            "data-[swipe-direction=left]:start-0 data-[swipe-direction=left]:origin-start data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
-            "data-[swipe-direction=right]:end-0 data-[swipe-direction=right]:origin-end data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
-            className
-          )}
-          {...props}
-        >
-          {showSwipeHandle && <DrawerSwipeHandle />}
-          <DrawerPrimitive.Content
-            data-slot="drawer-content"
-            className={cn(
-              "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
-            )}
-          >
-            {children}
-          </DrawerPrimitive.Content>
-        </DrawerPrimitive.Popup>
-      </DrawerPrimitive.Viewport>
-    </DrawerPortal>
-  )
-}
-
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-header"
-      className={cn(
-        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-1.5 md:text-start",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-footer"
-      className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
-      {...props}
-    />
-  )
-}
-
-function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
-  return (
-    <DrawerPrimitive.Title
-      data-slot="drawer-title"
-      className={cn(
-        "text-base font-medium text-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerDescription({
-  className,
-  ...props
-}: DrawerPrimitive.Description.Props) {
-  return (
-    <DrawerPrimitive.Description
-      data-slot="drawer-description"
-      className={cn("text-sm text-balance text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerSwipeHandle,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}

package/template/templates/asas/src/audit-log/audit-log.ts

@@ -1,187 +0,0 @@
-import { actorPermissions, count, defaultFields, find, findOne, invalid, type Ctx, type Held } from 'mithaq'
-import { defineKayan, rows, organization } from '../mithaq.ts'
-import { platformClosed } from '../tenant-access.ts'
-import { auditLogName, type Change } from './sink.ts'
-
-/** The kayan whose `find` this actor holds, which are the kayan whose entries it reads. */
-const heldKayans = (held: Exclude<Held, true | undefined>) =>
-  [...held].filter((key) => key.endsWith('.find') && !key.includes('.fields.')).map((key) => key.slice(0, -'.find'.length))
-
-/**
- * The read the log's rows are ANDed with, so it narrows and never widens: an
- * entry of a kayan the actor may not list is no entry it reads. An actor
- * nothing grades reads none, which is the closed direction.
- */
-const readableKayans = ({ user }: { user: unknown }) => {
-  const held = actorPermissions(user)
-  if (held === true) return true
-  const kayans = held ? heldKayans(held) : []
-  return kayans.length ? { kayan: { in: kayans } } : false
-}
-
-/**
- * Whether this actor reads one column of the kayan an entry names. The access
- * target grades every column of this project by its key.
- */
-const readsField = (held: Held, kayan: string, field: string) => held === true || held?.has(`${kayan}.fields.${field}`) === true
-
-/**
- * Whether this actor reads the provider's people, by the key of their `find`.
- * A command's operating-system user is the one thing in the log that names a
- * person no row of the people does, so only such a reader sees or asks for it.
- */
-const readsPeople = (held: Held) => held === true || held?.has('user.find') === true
-
-/**
- * What the sink writes for a command: the command, then the operating-system
- * user in parentheses. The command is the shortest part before ` (`, so a user
- * holding a parenthesis is never left in it.
- */
-const commandActor = /^(.+?) \(.+\)$/
-
-/**
- * The step after the read: each entry keeps the changes of the columns the
- * actor may read and drops the rest whole, so a column it may not read shows
- * neither value nor that it changed. The server does it rather than the page,
- * because the log is read over HTTP as well as drawn.
- */
-const visibleChanges = (ctx: Ctx): Ctx => {
-  const held = actorPermissions(ctx.actor)
-  const trim = (entry: unknown) => {
-    if (!entry || typeof entry !== 'object' || typeof (entry as { changes?: unknown }).changes !== 'string') return entry
-    const { kayan, changes } = entry as { kayan: string; changes: string }
-    const all = JSON.parse(changes) as Record<string, Change>
-    const kept = Object.fromEntries(Object.entries(all).filter(([field]) => readsField(held, kayan, field)))
-    // A command's actor is the command alone to a reader of no people, its operating-system user blanked.
-    const actor = (entry as { actor?: unknown }).actor
-    const named = !readsPeople(held) && typeof actor === 'string' ? { actor: commandActor.exec(actor)?.[1] ?? actor } : {}
-    return { ...entry, ...named, changes: JSON.stringify(kept) }
-  }
-  const data: unknown = ctx.data
-  const page = data && typeof data === 'object' && Array.isArray((data as { docs?: unknown }).docs) ? (data as { docs: unknown[] }) : undefined
-  return { ...ctx, data: (page ? { ...page, docs: page.docs.map(trim) } : trim(data)) as Record<string, unknown> }
-}
-
-/**
- * The columns the log is read by. Nothing else filters or orders it, `changes`
- * above all: a `contains` over its text would read a value out of a column the
- * reader holds no key for, before `visibleChanges` trims the page. The
- * organization is core's own filter and `impersonatedBy` names staff.
- */
-const queryable = new Set(['kayan', 'record', 'createdAt', 'operation', 'actor'])
-
-const namedIn = (where: unknown): string[] => {
-  if (!where || typeof where !== 'object') return []
-  return Object.entries(where).flatMap(([key, value]) =>
-    (key === 'and' || key === 'or') && Array.isArray(value) ? value.flatMap(namedIn) : [key])
-}
-
-/**
- * The step before the read: a `where` or a `sort` naming any column but those
- * is refused 400, before the store is asked, on every read the log declares.
- * The runner's own checks still run after it on what it lets through.
- */
-const queriedByQueryable = (ctx: Ctx): Ctx => {
-  const { where, sort } = ctx.data as { where?: unknown; sort?: unknown }
-  const field = namedIn(where).find((name) => !queryable.has(name))
-  if (field !== undefined) {
-    throw invalid({ message: `Kayan "auditLog" is filtered by ${[...queryable].join(', ')} alone, and not by "${field}".`, key: 'error.invalid.where', params: { kayan: 'auditLog', field } })
-  }
-  // A reader of no people names an actor in no filter and no sort: a pattern, a range, an order or
-  // even an equality over the string would let it confirm a guessed operating-system user of a
-  // command's actor.
-  if (!readsPeople(actorPermissions(ctx.actor)) && (namedIn(where).includes('actor') || (typeof sort === 'string' && sort.replace(/^-/, '') === 'actor'))) {
-    throw invalid({ message: 'Kayan "auditLog" is neither filtered nor sorted by "actor" for a reader of no people.', key: 'error.invalid.where', params: { kayan: 'auditLog', field: 'actor' } })
-  }
-  if (sort !== undefined && !(typeof sort === 'string' && queryable.has(sort.replace(/^-/, '')))) {
-    throw invalid({ message: `Kayan "auditLog" is sorted by ${[...queryable].join(', ')} alone.`, key: 'error.invalid.sort_field', params: { kayan: 'auditLog', field: String(sort) } })
-  }
-  return ctx
-}
-
-/**
- * The audit log's rows: an organization reads its own entries, and nothing writes
- * one through the log, a caller of any role included, since the service
- * target's sink writes each entry through the store inside the write it
- * records. Every platform role is closed: the platform lists no entry, and a
- * staff member's own impersonated writes are the entries it would read.
- */
-const auditLogAccess = rows({
-  '*': { create: false, read: true, update: false, delete: false },
-  ...platformClosed,
-})
-
-/**
- * The audit log: one row per row a write changed, written by the service
- * target's audit sink inside that write's own transaction and by nothing else.
- * It declares no operation that writes, so no caller creates, edits or deletes
- * an entry, and each of its rows answers `false` for every write besides.
- *
- * It is its organization's own, and a record's entries are read on that record's edit
- * page. The dashboard lists it for its access report alone, which is what the
- * edit pages' panel is drawn by, and draws no page of it. The platform lists
- * none of it and reads none of it.
- */
-export const auditLog = defineKayan({
-  name: auditLogName,
-  dbName: 'audit_log',
-  messages: {
-    singular: { en: 'Audit entry', ar: 'سجل تدقيق' },
-    plural: { en: 'Audit log', ar: 'سجل التدقيق' },
-    // What the activity panel draws beside the field labels.
-    activity: { en: 'Activity', ar: 'النشاط' },
-    loading: { en: 'Loading activity…', ar: 'جارٍ تحميل النشاط…' },
-    empty: { en: 'Nothing has changed here yet.', ar: 'لم يتغير شيء هنا بعد.' },
-    failed: { en: 'The activity could not be read.', ar: 'تعذرت قراءة النشاط.' },
-    more: { en: 'Show older', ar: 'عرض الأقدم' },
-    system: { en: 'The system', ar: 'النظام' },
-    event: { en: '{action} by {actor}', ar: '{action} بواسطة {actor}' },
-    // Staff writing as a member: the real person first, as the member they wrote as.
-    impersonated: { en: '{staff} as {member}', ar: '{staff} بصفة {member}' },
-    // One per operation a tenant kayan writes through, which is every entry the sink records.
-    action: {
-      create: { en: 'Created', ar: 'أُنشئ' },
-      update: { en: 'Updated', ar: 'حُدِّث' },
-      delete: { en: 'Deleted', ar: 'حُذف' },
-      updateMany: { en: 'Updated', ar: 'حُدِّث' },
-      deleteMany: { en: 'Deleted', ar: 'حُذف' },
-      restoreVersion: { en: 'Restored a version', ar: 'استُعيد إصدار' },
-      archive: { en: 'Archived', ar: 'أُرشف' },
-      archiveMany: { en: 'Archived', ar: 'أُرشف' },
-    },
-    someone: { en: 'Someone', ar: 'شخص ما' },
-    // A command line write, named for a reader of the people: the command and
-    // the operating-system user who ran it.
-    command: { en: 'the command {command} ({user})', ar: 'الأمر {command} ({user})' },
-    // The viewer's own entry, which needs no read of the people to name. Its
-    // sentence is its own, since Arabic joins the person to "by" in one word,
-    // "بواسطتك", and not as "بواسطة أنت".
-    you: { en: 'You', ar: 'أنت' },
-    eventYou: { en: '{action} by You', ar: '{action} بواسطتك' },
-    none: { en: 'No field you may read changed.', ar: 'لم يتغير حقل يمكنك قراءته.' },
-  },
-  access: { ...auditLogAccess, read: readableKayans },
-  targets: {
-    dashboard: {},
-    service: {
-      operations: {
-        find: { steps: [queriedByQueryable, find, visibleChanges] },
-        findByID: { steps: [queriedByQueryable, findOne, visibleChanges] },
-        count: { steps: [queriedByQueryable, count] },
-      },
-    },
-  },
-  fields: {
-    id: defaultFields.id,
-    createdAt: defaultFields.createdAt,
-    organization,
-    kayan: { kind: 'text', label: { en: 'Kayan', ar: 'الكيان' }, rules: { required: true, maxLength: 60 } },
-    record: { kind: 'text', label: { en: 'Record', ar: 'السجل' }, rules: { required: true, index: true } },
-    operation: { kind: 'text', label: { en: 'Operation', ar: 'العملية' }, rules: { required: true, maxLength: 60 } },
-    actor: { kind: 'text', label: { en: 'Actor', ar: 'المنفذ' } },
-    impersonatedBy: { kind: 'text', label: { en: 'Impersonated by', ar: 'انتحل الصفة' } },
-    // Never an order, which the runner refuses by name for every read, and never
-    // a filter or a search, which the dashboard offers only where a field opts in.
-    changes: { kind: 'text', label: { en: 'Changes', ar: 'التغييرات' }, rules: { required: true }, targets: { dashboard: { sortable: false } } },
-  },
-})

package/template/templates/asas/src/audit-log/ui/activity.tsx

@@ -1,243 +0,0 @@
-// The entries are read in the browser, as the viewer, from the log's own `find`,
-// which answers only this tenant's entries of kayan the viewer lists and only the
-// changes of columns it reads. The page holds only the fields this viewer reads
-// as well, so a change the server let through for a column the page left out is
-// not drawn either.
-import { useEffect, useMemo, useState, type ReactNode } from 'react'
-import type { ClientField, ClientKayan, ComponentProps, Row } from 'mithaq/admin'
-import { useAccess, useClient, useKayan, useLocale, useRecord, useScreen, useUser } from 'mithaq/admin/react'
-import { empty } from '../sink.ts'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { cellFor } from '@/components/mithaq/cells.tsx'
-import { formatDate, labelFor, operationLabelFor, type FindApi, type FoundPage, type Translate } from '@/components/mithaq/controls.tsx'
-import { useRelationshipTitles, type RelationshipTitles } from '@/components/mithaq/relationship-cell.tsx'
-
-/** One entry as the log's `find` answers it. */
-export type Entry = {
-  id: string
-  createdAt: string | Date
-  operation: string
-  actor?: string | null
-  impersonatedBy?: string | null
-  changes: string
-}
-
-const limit = 10
-
-/** The columns every kayan of this project carries and no person edits, which the panel leaves out. */
-const technical = new Set(['id', 'organization', 'createdAt', 'updatedAt'])
-
-/**
- * Who a write ran as, as a relationship to the provider's people, so the panel
- * names them through the same read a relationship cell does: the active
- * organization's members by their name, and anyone that read does not answer as
- * someone.
- */
-const actorField = { name: 'actor', kind: 'relationship', relationTo: 'user', label: {}, rules: {}, component: 'relationship', cell: 'relationship' } as unknown as ClientField
-
-/**
- * What the sink writes for a command: the command, then the operating-system user
- * in parentheses. A user's id holds no space, so no person is read as one.
- */
-const commandOf = /^(.+?) \((.+)\)$/
-
-const changesOf = (entry: Entry): [string, { from: unknown; to: unknown }][] => {
-  try {
-    return Object.entries(JSON.parse(entry.changes) as Record<string, { from: unknown; to: unknown }>)
-  } catch {
-    return []
-  }
-}
-
-const units: [Intl.RelativeTimeFormatUnit, number][] = [['year', 31_536_000], ['month', 2_592_000], ['week', 604_800], ['day', 86_400], ['hour', 3_600], ['minute', 60], ['second', 1]]
-
-/** How long ago, in the viewer's own locale, in the largest unit that is at least one. */
-export const relative = ({ at, locale, now = Date.now() }: { at: Date; locale: string; now?: number }) => {
-  const seconds = Math.round((at.getTime() - now) / 1000)
-  const [unit, size] = units.find(([, size]) => Math.abs(seconds) >= size) ?? units.at(-1)!
-  return new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(Math.round(seconds / size), unit)
-}
-
-type EntriesProps = {
-  entries: readonly Entry[]
-  /** The viewer's own id, whom an entry that names them calls "You", without a read of the people. */
-  viewer?: string
-  /** Whether the viewer reads the provider's people, which is what lets a command's operating-system user be named. */
-  people?: boolean
-  kayan: ClientKayan
-  titles?: RelationshipTitles
-  t: Translate
-  locale: string
-}
-
-/** The entries drawn, with nothing read: what the panel shows once a page has come back. */
-export function ActivityEntries({ entries, kayan, titles, t, locale, viewer, people }: EntriesProps) {
-  const copy = { t, locale }
-  // A person the title read did not name, one the reader may not read among
-  // them, is someone, never the raw id.
-  const named = (id: string | null | undefined) => {
-    if (!id) return t('auditLog.system', 'The system') ?? 'The system'
-    if (id === viewer) return t('auditLog.you', 'You') ?? 'You'
-    // A command's actor, which the sink writes as one string, and which no
-    // people read names: said in the viewer's locale to a reader of the
-    // people, with each part isolated so the Arabic sentence keeps the
-    // command's own direction.
-    const command = people ? commandOf.exec(id) : null
-    if (command) return (t('auditLog.command', 'the command {command} ({user})') ?? '').replace('{command}', () => `\u2068${command[1]}\u2069`).replace('{user}', () => `\u2068${command[2]}\u2069`)
-    const title = titles?.get(`user:${id}`)
-    return typeof title === 'string' ? title : (t('auditLog.someone', 'Someone') ?? 'Someone')
-  }
-  const drawn = (field: ClientField, value: unknown): ReactNode =>
-    empty(value) ? '—' : cellFor(field)({ kayan, field, value, t, locale, titles })
-  return (
-    <ol className="grid gap-4 text-sm">
-      {entries.map((entry) => {
-        const at = new Date(entry.createdAt)
-        // Every operation has its words in the log's own scope, in the past
-        // tense the sentence reads in, and one a project adds before it
-        // writes them falls back to the operation's own label.
-        const action = t(`auditLog.action.${entry.operation}`, operationLabelFor({ kayan, operation: { name: entry.operation }, copy })) ?? entry.operation
-        // Staff writing inside a member's session is named first, as the member.
-        const actor = entry.impersonatedBy
-          ? (t('auditLog.impersonated', '{staff} as {member}') ?? '{staff} as {member}').replace('{staff}', () => named(entry.impersonatedBy)).replace('{member}', () => named(entry.actor))
-          : named(entry.actor)
-        const shown = changesOf(entry).flatMap(([name, change]) => {
-          const field = technical.has(name) ? undefined : kayan.fields.find((one) => one.name === name)
-          return field ? [{ field, change }] : []
-        })
-        return (
-          <li key={entry.id} data-entry={entry.operation} className="grid grid-cols-[2rem_minmax(0,1fr)] gap-3">
-            <Avatar className="mt-0.5 size-8">
-              <AvatarFallback>{(named(entry.impersonatedBy ?? entry.actor).trim()[0] ?? '?').toUpperCase()}</AvatarFallback>
-            </Avatar>
-            <div className="min-w-0">
-              <div className="flex flex-wrap items-baseline justify-between gap-2">
-                <p data-event className="font-medium">
-                  {(viewer && entry.actor === viewer && !entry.impersonatedBy ? (t('auditLog.eventYou', '{action} by You') ?? '{action} by You') : (t('auditLog.event', '{action} by {actor}') ?? '{action} by {actor}')).replace('{action}', () => action).replace('{actor}', () => actor)}
-                </p>
-                <time dateTime={at.toISOString()} className="text-muted-foreground shrink-0 text-xs">
-                  {relative({ at, locale })}
-                </time>
-              </div>
-              <p className="text-muted-foreground text-xs">
-                {formatDate({ value: at, locale })}
-              </p>
-              {shown.length ? (
-                <ul className="text-muted-foreground mt-1.5 grid gap-1">
-                  {shown.map(({ field, change }) => (
-                    <li key={field.name} data-change={field.name} className="break-words">
-                      <span className="text-foreground">{labelFor({ kayan, field, copy })}</span>
-                      {': '}
-                      <span data-from>{drawn(field, change.from)}</span>
-                      <span aria-hidden className="mx-1 inline-block rtl:rotate-180">→</span>
-                      <span data-to>{drawn(field, change.to)}</span>
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <p className="text-muted-foreground mt-1.5">{t('auditLog.none', 'No field you may read changed.')}</p>
-              )}
-            </div>
-          </li>
-        )
-      })}
-    </ol>
-  )
-}
-
-/**
- * The panel a page names as a component node. It reads the row the page
- * draws and the kayan it belongs to off the screen, so one file serves every
- * kayan's edit page.
- */
-export function Activity(_: ComponentProps) {
-  const { t, locale } = useLocale()
-  const kayan = useKayan()
-  const record = useRecord()
-  const client = useClient()
-  const screen = useScreen()
-  const viewer = useUser().id
-  const people = useAccess().collections?.user?.read === true
-  const id = record?.id === undefined ? undefined : String(record.id)
-  // The row as this page last drew it: a save moves its `updatedAt`, and the
-  // panel reads its entries again from the first page, the new one on top.
-  const seen = `${id}@${String(record?.updatedAt ?? '')}`
-  // What has been read, and how many pages were asked for, each held with the
-  // row it is for, so a page that moves to another row, or the same row
-  // saved, starts at its first page rather than drawing the last one's.
-  const [read, setRead] = useState<{ seen: string; docs: Entry[]; more: boolean } | { seen: string; failed: true }>()
-  const [asked, setAsked] = useState({ seen, page: 1 })
-  const page = asked.seen === seen ? asked.page : 1
-
-  // The client is left out of the dependencies: the host makes a new one on
-  // every render of the page, and each posts to the same route, so following it
-  // would read the same page again on every render.
-  useEffect(() => {
-    if (!id) return
-    let live = true
-    const where = { and: [{ kayan: { equals: kayan.name } }, { record: { equals: id } }] }
-    ;(client({ kayan: 'auditLog', operation: 'find', input: { where, sort: '-createdAt', limit, page, depth: 0 } }) as Promise<FoundPage>).then(
-      (found) => {
-        if (!live) return
-        // The pages before this one, as far as they go, and this one after
-        // them, less any entry already drawn: a write that lands between two
-        // pages moves every older entry down one, so the next page opens on
-        // the one the last page ended with.
-        setRead((held) => {
-          const before = held?.seen === seen && 'docs' in held ? held.docs.slice(0, (page - 1) * limit) : []
-          const drawn = new Set(before.map((entry) => entry.id))
-          return { seen, docs: [...before, ...(found.docs as Entry[]).filter((entry) => !drawn.has(entry.id))], more: found.hasNextPage }
-        })
-      },
-      () => live && setRead({ seen, failed: true }),
-    )
-    return () => {
-      live = false
-    }
-  }, [kayan.name, seen, page])
-
-  // Every kayan this screen crosses, read through the screen's own client, so
-  // a relationship's value and the actor are named the way a list names them.
-  const kayans = useMemo(() => Object.values(screen.kayan), [screen])
-  const api = useMemo<FindApi>(
-    () => Object.fromEntries(kayans.map((one) => [one.name, { find: (input: Row) => client({ kayan: one.name, operation: 'find', input }) as Promise<FoundPage> }])),
-    [kayans],
-  )
-  const shown = read?.seen === seen ? read : undefined
-  const entries = shown && 'docs' in shown ? shown.docs : []
-  // Each entry's actor, both people of an impersonation, and every value a
-  // change holds, as rows the title read groups by the kayan each points at.
-  const docs = entries.flatMap((entry) => [
-    { actor: [entry.actor, entry.impersonatedBy].filter(Boolean) },
-    ...changesOf(entry).flatMap(([name, change]) => [{ [name]: change.from }, { [name]: change.to }]),
-  ])
-  const titles = useRelationshipTitles({ fields: [...kayan.fields, actorField], docs, context: { api, client: kayans, locale } })
-
-  return (
-    <Card data-panel="activity">
-      <CardHeader>
-        <CardTitle>{t('auditLog.activity', 'Activity')}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        {shown === undefined ? (
-          <p className="text-muted-foreground text-sm">{t('auditLog.loading', 'Loading activity…')}</p>
-        ) : 'failed' in shown ? (
-          <p className="text-destructive text-sm">{t('auditLog.failed', 'The activity could not be read.')}</p>
-        ) : !entries.length ? (
-          <p className="text-muted-foreground text-sm">{t('auditLog.empty', 'Nothing has changed here yet.')}</p>
-        ) : (
-          <div className="grid gap-4">
-            <ActivityEntries entries={entries} kayan={kayan} titles={titles} t={t} locale={locale} viewer={viewer} people={people} />
-            {shown.more ? (
-              <Button type="button" variant="outline" size="sm" onClick={() => setAsked({ seen, page: page + 1 })}>
-                {t('auditLog.more', 'Show older')}
-              </Button>
-            ) : null}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
-}