@kernhq/module-quire 0.8.0 → 0.9.0

package/src/client/index.ts

@@ -37,6 +37,37 @@ export {
   type SpaceVisibility,
   type VersionKind,
 } from '../contract/index.js'
+export type { CoreMember, Person } from './core-api.js'
+export { OPTION_COLOURS, toneFor } from './database/colours.js'
+export {
+  CREATABLE_TYPES,
+  descriptorFor,
+  isReadOnly,
+  operatorsFor,
+  PROPERTY_TYPES,
+  type PropertyDescriptor,
+  VIEW_KINDS,
+  viewIcon,
+} from './database/property-types.js'
+export {
+  columnTemplate,
+  EMPTY_GROUP,
+  groupsOf,
+  groupValue,
+  type Lane,
+  mergeConfig,
+  orderedProperties,
+  visiblePropertiesOf,
+} from './database/view-config.js'
+export type { Ast, FormulaValue } from './formula.js'
+/**
+ * The formula parser, for the property editor.
+ *
+ * Only the parser: `evaluateFormula` stays a server concern, because a formula is evaluated against
+ * a row and the server is the only thing holding one. What a client needs is to tell somebody their
+ * expression is wrong while they are typing it, and which columns it reads.
+ */
+export { FormulaError, formulaDependencies, parseFormula } from './formula.js'
 export * from './rank.js'
 
 /**

package/src/client/mock.ts

@@ -1,4 +1,18 @@
-import type { Page, PageNode, Space } from './index.js'
+import type {
+  Database,
+  DatabaseRef,
+  Row as DatabaseRow,
+  Page,
+  PageNode,
+  Property,
+  PropertyConfig,
+  PropertyType,
+  RowRef,
+  Space,
+  View,
+  ViewConfig,
+  ViewKind,
+} from '../contract/index.js'
 
 /**
  * The in-memory quire API.
@@ -18,6 +32,23 @@ const uid = (n: number) => `01920000-0000-7000-8000-0000000${String(n).padStart(
 interface Row extends Page {
   /** the mock keeps trashed rows in the same list, as the server does */
   _order: string
+  /** set when this page is a row of a database, exactly as the server's column means it */
+  _databaseId?: string
+  _props?: Record<string, unknown>
+  _computed?: Record<string, unknown>
+}
+
+/** The complete `ViewConfig` the server always answers with, so the client can trust its type. */
+const BLANK_VIEW_CONFIG: ViewConfig = {
+  filters: [],
+  filterMode: 'and',
+  sorts: [],
+  groupBy: null,
+  dateProperty: null,
+  visibleProperties: null,
+  columnWidths: {},
+  cardSize: 'medium',
+  coverProperty: null,
 }
 
 export function createMockQuireApi() {
@@ -87,12 +118,125 @@ export function createMockQuireApi() {
     page(103, uid(1), 'Your first week', 'ba', 102),
     page(104, uid(1), 'Time off', 'bb', 102),
     page(105, uid(1), 'Expenses', 'c', null, { kind: 'live' }),
+    page(110, uid(1), 'Onboarding tasks', 'd', null, { kind: 'database' }),
     page(201, uid(2), 'Architecture', 'a'),
     page(202, uid(2), 'Runbooks', 'b'),
     page(203, uid(2), 'Deploying', 'ba', 202),
     page(204, uid(2), 'An old note', 'c', null, { deletedAt: iso(864e5) }),
   ]
 
+  const DB_ID = uid(120)
+  const DB_PAGE = uid(110)
+
+  /**
+   * One seeded database, so `dev:mock` and the end-to-end sweep have a real screen rather than an
+   * empty state. Deliberately mixed: one row with every cell empty, so the empty-cell rendering is
+   * exercised, and one status option with nothing in it, so an empty board lane is too.
+   */
+  const prop = (
+    n: number,
+    key: string,
+    name: string,
+    type: PropertyType,
+    position: string,
+    config: PropertyConfig = {},
+  ): Property => ({ id: uid(n), databaseId: DB_ID, key, name, type, config, position, hidden: false })
+
+  const properties: Property[] = [
+    prop(121, 'owner', 'Owner', 'person', 'b', { multiple: false }),
+    prop(122, 'status', 'Status', 'status', 'c', {
+      options: [
+        { id: 'todo', label: 'To do', colour: 'slate', group: 'todo' },
+        { id: 'doing', label: 'In progress', colour: 'accent', group: 'doing' },
+        { id: 'blocked', label: 'Blocked', colour: 'danger', group: 'doing' },
+        { id: 'done', label: 'Done', colour: 'success', group: 'done' },
+      ],
+    }),
+    prop(123, 'due', 'Due', 'date', 'd', {}),
+    prop(124, 'days', 'Days', 'number', 'e', { precision: 0 }),
+    prop(125, 'done', 'Signed off', 'checkbox', 'f', {}),
+    prop(126, 'notes', 'Notes', 'text', 'g', {}),
+  ]
+
+  const views: View[] = [
+    {
+      id: uid(130),
+      databaseId: DB_ID,
+      name: 'All tasks',
+      kind: 'table',
+      config: { ...BLANK_VIEW_CONFIG },
+      position: 'a',
+      isDefault: true,
+    },
+    {
+      id: uid(131),
+      databaseId: DB_ID,
+      name: 'By status',
+      kind: 'board',
+      config: { ...BLANK_VIEW_CONFIG, groupBy: 'status' },
+      position: 'b',
+      isDefault: false,
+    },
+    {
+      id: uid(132),
+      databaseId: DB_ID,
+      name: 'Schedule',
+      kind: 'calendar',
+      config: { ...BLANK_VIEW_CONFIG, dateProperty: 'due' },
+      position: 'c',
+      isDefault: false,
+    },
+  ]
+
+  const databases: Database[] = [
+    {
+      id: DB_ID,
+      workspaceId: '' as Database['workspaceId'],
+      spaceId: uid(1),
+      pageId: DB_PAGE,
+      name: 'Onboarding tasks',
+      description: '',
+      inline: false,
+      properties,
+      views,
+      createdAt: iso(9e7),
+      updatedAt: iso(36e5),
+    },
+  ]
+
+  const day = (offset: number) => {
+    const at = new Date(now + offset * 864e5)
+    return new Date(at.getFullYear(), at.getMonth(), at.getDate(), 9).toISOString()
+  }
+
+  const seedRows: [number, string, Record<string, unknown>][] = [
+    [140, 'Read the handbook', { status: 'done', due: day(-6), days: 1, done: true, notes: 'Start here' }],
+    [141, 'Meet the team', { status: 'done', due: day(-4), days: 1, done: true, notes: '' }],
+    [
+      142,
+      'Set up your laptop',
+      { status: 'doing', due: day(0), days: 2, done: false, notes: 'IT has the keys' },
+    ],
+    [143, 'Pick a starter task', { status: 'doing', due: day(1), days: 3, done: false, notes: '' }],
+    [144, 'Book a 1:1', { status: 'todo', due: day(3), days: 1, done: false, notes: '' }],
+    [
+      145,
+      'Payroll paperwork',
+      { status: 'blocked', due: day(2), days: 1, done: false, notes: 'Waiting on HR' },
+    ],
+    [146, 'Add yourself to the rota', { status: 'todo', due: day(8), days: 1, done: false, notes: '' }],
+    // Every cell empty on purpose: this is the row that finds an empty-cell rendering bug.
+    [147, 'Anything else?', {}],
+  ]
+
+  for (const [n, title, props] of seedRows) {
+    const row = page(n, uid(1), title, `z${n}`, 110)
+    row._databaseId = DB_ID
+    row._props = props
+    row._computed = {}
+    pages.push(row)
+  }
+
   let seq = 900
   const nextId = () => uid(++seq)
   const strip = ({ _order, ...p }: Row): Page => p
@@ -115,6 +259,127 @@ export function createMockQuireApi() {
     row.updatedAt = new Date().toISOString()
   }
 
+  const notFound = (what: string) => Object.assign(new Error(`${what} not found`), { code: 'NOT_FOUND' })
+
+  const theDatabase = (id: string): Database => {
+    const db = databases.find((d) => d.id === id)
+    if (!db) throw notFound('Database')
+    return db
+  }
+  const theProperty = (id: string): Property => {
+    for (const db of databases) {
+      const property = db.properties.find((p) => p.id === id)
+      if (property) return property
+    }
+    throw notFound('Property')
+  }
+  const theView = (id: string): View => {
+    for (const db of databases) {
+      const view = db.views.find((v) => v.id === id)
+      if (view) return view
+    }
+    throw notFound('View')
+  }
+
+  const toDatabaseRow = (row: Row): DatabaseRow => ({
+    id: row.id,
+    databaseId: row._databaseId ?? '',
+    title: row.title,
+    icon: row.icon,
+    props: { ...(row._props ?? {}) },
+    computed: { ...(row._computed ?? {}) },
+    createdBy: row.createdBy,
+    updatedBy: row.updatedBy,
+    createdAt: row.createdAt,
+    updatedAt: row.updatedAt,
+  })
+
+  /**
+   * Filtering and sorting in memory.
+   *
+   * The server does both in SQL, and this is a deliberately smaller reimplementation of the same
+   * rules — enough that a filter really does shrink the list and a sort really does reorder it, so
+   * the end-to-end tests are testing behaviour rather than a screen that never changes.
+   */
+  const cellOf = (row: Row, property: Property): unknown =>
+    property.type === 'formula' || property.type === 'rollup'
+      ? (row._computed ?? {})[property.key]
+      : property.type === 'created_time'
+        ? row.createdAt
+        : property.type === 'edited_time'
+          ? row.updatedAt
+          : (row._props ?? {})[property.key]
+
+  const isEmpty = (value: unknown) =>
+    value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)
+
+  function matches(row: Row, operator: string, wanted: unknown, property: Property): boolean {
+    const value = cellOf(row, property)
+    if (operator === 'is_empty') return isEmpty(value)
+    if (operator === 'is_not_empty') return !isEmpty(value)
+
+    const list = Array.isArray(value) ? value.map(String) : value == null ? [] : [String(value)]
+    const asked = Array.isArray(wanted) ? wanted.map(String) : wanted == null ? [] : [String(wanted)]
+
+    switch (operator) {
+      case 'equals':
+        return property.type === 'checkbox'
+          ? (value === true) === (wanted === true || wanted === 'true')
+          : String(value ?? '') === String(wanted ?? '')
+      case 'not_equals':
+        return String(value ?? '') !== String(wanted ?? '')
+      case 'contains':
+        return Array.isArray(value)
+          ? asked.some((a) => list.includes(a))
+          : String(value ?? '')
+              .toLowerCase()
+              .includes(String(wanted ?? '').toLowerCase())
+      case 'not_contains':
+        return !(Array.isArray(value)
+          ? asked.some((a) => list.includes(a))
+          : String(value ?? '')
+              .toLowerCase()
+              .includes(String(wanted ?? '').toLowerCase()))
+      case 'starts_with':
+        return String(value ?? '')
+          .toLowerCase()
+          .startsWith(String(wanted ?? '').toLowerCase())
+      case 'ends_with':
+        return String(value ?? '')
+          .toLowerCase()
+          .endsWith(String(wanted ?? '').toLowerCase())
+      case 'greater_than':
+        return Number(value) > Number(wanted)
+      case 'less_than':
+        return Number(value) < Number(wanted)
+      case 'on_or_after':
+        return new Date(String(value)).getTime() >= new Date(String(wanted)).getTime()
+      case 'on_or_before':
+        return new Date(String(value)).getTime() <= new Date(String(wanted)).getTime()
+      case 'is_any_of':
+        return asked.some((a) => list.includes(a))
+      case 'is_none_of':
+        return !asked.some((a) => list.includes(a))
+      default:
+        return true
+    }
+  }
+
+  function compareBy(a: Row, b: Row, property: Property): number {
+    const left = cellOf(a, property)
+    const right = cellOf(b, property)
+    if (isEmpty(left) && isEmpty(right)) return 0
+    // Nulls last, whichever way the sort runs — an empty cell is not "the smallest value".
+    if (isEmpty(left)) return 1
+    if (isEmpty(right)) return -1
+    if (property.type === 'number' || property.type === 'formula' || property.type === 'rollup')
+      return Number(left) - Number(right)
+    if (property.type === 'checkbox') return Number(left === true) - Number(right === true)
+    if (property.type === 'date' || property.type === 'created_time' || property.type === 'edited_time')
+      return new Date(String(left)).getTime() - new Date(String(right)).getTime()
+    return String(left).localeCompare(String(right))
+  }
+
   return {
     spaces: {
       list: async ({ includeArchived = false }: { includeArchived?: boolean } = {}) =>
@@ -175,6 +440,9 @@ export function createMockQuireApi() {
         includeArchived?: boolean
       }): Promise<PageNode[]> => {
         const rows = pages
+          // A row is a page parented to its database's page, and five hundred of them under one
+          // node is an unusable sidebar — the server excludes them from the tree for the same reason.
+          .filter((p) => !p._databaseId)
           .filter((p) => p.spaceId === spaceId && !p.deletedAt && (includeArchived || !p.archivedAt))
           .sort((a, b) => (a._order < b._order ? -1 : a._order > b._order ? 1 : 0))
         const parents = new Set(rows.map((r) => r.parentId).filter((x): x is string => x !== null))
@@ -283,5 +551,247 @@ export function createMockQuireApi() {
         return { ok: true as const, count: ids.size }
       },
     },
+
+    databases: {
+      list: async ({ spaceId }: { spaceId: string }): Promise<DatabaseRef[]> =>
+        databases
+          .filter((d) => d.spaceId === spaceId)
+          .map((d) => ({ id: d.id, pageId: d.pageId, name: d.name })),
+
+      get: async ({ databaseId }: { databaseId: string }) => theDatabase(databaseId),
+
+      forPage: async ({ pageId }: { pageId: string }) => databases.find((d) => d.pageId === pageId) ?? null,
+
+      create: async (input: { spaceId: string; pageId: string; name?: string; inline?: boolean }) => {
+        const db: Database = {
+          id: nextId(),
+          workspaceId: '' as Database['workspaceId'],
+          spaceId: input.spaceId,
+          pageId: input.pageId,
+          name: input.name ?? '',
+          description: '',
+          inline: input.inline ?? false,
+          properties: [],
+          views: [
+            {
+              id: nextId(),
+              databaseId: '',
+              name: 'Table',
+              kind: 'table',
+              config: { ...BLANK_VIEW_CONFIG },
+              position: 'a',
+              isDefault: true,
+            },
+          ],
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        }
+        for (const view of db.views) view.databaseId = db.id
+        databases.push(db)
+        found(input.pageId).kind = 'database'
+        return db
+      },
+
+      rows: async (input: {
+        databaseId: string
+        viewId?: string | null
+        limit?: number
+        cursor?: string | null
+      }) => {
+        const db = theDatabase(input.databaseId)
+        const view = input.viewId
+          ? db.views.find((v) => v.id === input.viewId)
+          : (db.views.find((v) => v.isDefault) ?? db.views[0])
+        const config = view?.config ?? BLANK_VIEW_CONFIG
+
+        let selected = pages.filter((r) => r._databaseId === input.databaseId && !r.deletedAt)
+        if (config.filters.length > 0)
+          selected = selected.filter((row) => {
+            const results = config.filters.map((filter) => {
+              const property = db.properties.find((p) => p.key === filter.propertyKey)
+              if (!property)
+                throw Object.assign(new Error(`No such property: ${filter.propertyKey}`), {
+                  code: 'BAD_REQUEST',
+                })
+              return matches(row, filter.operator, filter.value, property)
+            })
+            return config.filterMode === 'or' ? results.some(Boolean) : results.every(Boolean)
+          })
+
+        for (const sort of [...config.sorts].reverse()) {
+          const property = db.properties.find((p) => p.key === sort.propertyKey)
+          if (!property) continue
+          const direction = sort.direction === 'desc' ? -1 : 1
+          selected = [...selected].sort((a, b) => direction * compareBy(a, b, property))
+        }
+
+        const limit = input.limit ?? 50
+        const from = Number.parseInt(input.cursor ?? '0', 10) || 0
+        const window = selected.slice(from, from + limit)
+        return {
+          items: window.map(toDatabaseRow),
+          nextCursor: from + window.length < selected.length ? String(from + window.length) : null,
+        }
+      },
+
+      addRow: async (input: { databaseId: string; title?: string; props?: Record<string, unknown> }) => {
+        const db = theDatabase(input.databaseId)
+        const row = page(++seq, db.spaceId, input.title ?? '', `z${seq}`, null)
+        row.id = uid(seq)
+        row.parentId = db.pageId
+        row._databaseId = db.id
+        row._props = { ...(input.props ?? {}) }
+        row._computed = {}
+        row.createdAt = new Date().toISOString()
+        row.updatedAt = row.createdAt
+        pages.push(row)
+        return toDatabaseRow(row)
+      },
+
+      updateRow: async (input: { rowId: string; title?: string; props?: Record<string, unknown> }) => {
+        const row = found(input.rowId)
+        if (input.title !== undefined) row.title = input.title
+        if (input.props) row._props = { ...(row._props ?? {}), ...input.props }
+        touch(row)
+        return toDatabaseRow(row)
+      },
+
+      lookup: async (input: {
+        databaseId: string
+        query?: string
+        ids?: string[]
+        limit?: number
+      }): Promise<RowRef[]> => {
+        const term = (input.query ?? '').trim().toLowerCase()
+        const ids = input.ids ?? []
+        return pages
+          .filter((r) => r._databaseId === input.databaseId && !r.deletedAt)
+          .filter(
+            (r) =>
+              ids.includes(r.id) ||
+              (term !== '' && r.title.toLowerCase().includes(term)) ||
+              (term === '' && ids.length === 0),
+          )
+          .slice(0, input.limit ?? 25)
+          .map((r) => ({ id: r.id, title: r.title, icon: r.icon }))
+      },
+
+      addProperty: async (input: {
+        databaseId: string
+        name: string
+        type: PropertyType
+        config?: PropertyConfig
+      }) => {
+        const db = theDatabase(input.databaseId)
+        const taken = new Set(db.properties.map((p) => p.key))
+        let key =
+          input.name
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '_')
+            .replace(/^_+|_+$/g, '') || 'field'
+        let n = 2
+        while (taken.has(key)) key = `${key}_${n++}`
+        const property: Property = {
+          id: nextId(),
+          databaseId: db.id,
+          key,
+          name: input.name,
+          type: input.type,
+          config: input.config ?? {},
+          position: `z${db.properties.length}`,
+          hidden: false,
+        }
+        db.properties.push(property)
+        return property
+      },
+
+      updateProperty: async (input: {
+        propertyId: string
+        name?: string
+        type?: PropertyType
+        config?: PropertyConfig
+        hidden?: boolean
+      }) => {
+        const property = theProperty(input.propertyId)
+        if (input.name !== undefined) property.name = input.name
+        if (input.type !== undefined) property.type = input.type
+        if (input.config !== undefined) property.config = input.config
+        if (input.hidden !== undefined) property.hidden = input.hidden
+        return property
+      },
+
+      moveProperty: async (input: { propertyId: string; afterId?: string | null }) => {
+        const property = theProperty(input.propertyId)
+        const db = theDatabase(property.databaseId)
+        const rest = db.properties.filter((p) => p.id !== property.id)
+        const at = input.afterId ? rest.findIndex((p) => p.id === input.afterId) : -1
+        rest.splice(at + 1, 0, property)
+        db.properties.length = 0
+        db.properties.push(...rest)
+        // The real service mints a fractional index; the mock only has to keep the order it shows.
+        db.properties.forEach((p, index) => {
+          p.position = String(index).padStart(4, '0')
+        })
+        return property
+      },
+
+      removeProperty: async (input: { propertyId: string }) => {
+        const property = theProperty(input.propertyId)
+        const db = theDatabase(property.databaseId)
+        db.properties.splice(db.properties.indexOf(property), 1)
+        return { ok: true as const }
+      },
+
+      addView: async (input: {
+        databaseId: string
+        name: string
+        kind?: ViewKind
+        config?: Partial<ViewConfig>
+      }) => {
+        const db = theDatabase(input.databaseId)
+        const view: View = {
+          id: nextId(),
+          databaseId: db.id,
+          name: input.name,
+          kind: input.kind ?? 'table',
+          config: { ...BLANK_VIEW_CONFIG, ...(input.config ?? {}) },
+          position: `z${db.views.length}`,
+          isDefault: db.views.length === 0,
+        }
+        db.views.push(view)
+        return view
+      },
+
+      updateView: async (input: {
+        viewId: string
+        name?: string
+        kind?: ViewKind
+        config?: Partial<ViewConfig>
+      }) => {
+        const view = theView(input.viewId)
+        if (input.name !== undefined) view.name = input.name
+        if (input.kind !== undefined) view.kind = input.kind
+        // Replaced wholesale, exactly as the service does it — the client must send the merged whole.
+        if (input.config !== undefined) view.config = { ...BLANK_VIEW_CONFIG, ...input.config }
+        return view
+      },
+
+      removeView: async (input: { viewId: string }) => {
+        const view = theView(input.viewId)
+        const db = theDatabase(view.databaseId)
+        if (db.views.length <= 1)
+          throw Object.assign(new Error('A database keeps at least one view'), { code: 'BAD_REQUEST' })
+        db.views.splice(db.views.indexOf(view), 1)
+        if (view.isDefault && db.views[0]) db.views[0].isDefault = true
+        return { ok: true as const }
+      },
+
+      setRelation: async (input: { rowId: string; propertyId: string; toPageIds: string[] }) => {
+        const property = theProperty(input.propertyId)
+        const row = found(input.rowId)
+        row._props = { ...(row._props ?? {}), [property.key]: input.toPageIds }
+        return { ok: true as const }
+      },
+    },
   }
 }

package/src/client/pages/PageView.svelte

@@ -18,6 +18,7 @@ import { getQuireApi } from '../api-instance.js'
 import CommentsPanel from '../components/CommentsPanel.svelte'
 import PageEditor from '../components/PageEditor.svelte'
 import VersionHistory from '../components/VersionHistory.svelte'
+import DatabaseView from '../database/DatabaseView.svelte'
 import { t } from '../i18n.js'
 import { canQuire } from '../permissions.js'
 import { quireKeys } from '../query.js'
@@ -29,11 +30,19 @@ import { quireKeys } from '../query.js'
  * says so rather than drawing an empty box that looks broken — a surface that pretends to be
  * editable and silently drops what you type is worse than one that admits it is not finished.
  */
+/**
+ * The shell mounts a module route as `<Page {workspaceId} {workspaceSlug} params rest />` — one
+ * `params` object, never named props. The named ones are kept because `SpacePage` renders this
+ * component directly with a page it already knows.
+ */
 interface Props {
-  spaceKey: string
-  pageId: string
+  params?: Record<string, string>
+  spaceKey?: string
+  pageId?: string
 }
-const { spaceKey, pageId }: Props = $props()
+const { params, spaceKey: spaceKeyProp, pageId: pageIdProp }: Props = $props()
+const spaceKey = $derived(spaceKeyProp ?? params?.space ?? '')
+const pageId = $derived(pageIdProp ?? params?.page ?? '')
 
 const api = getQuireApi()
 const client = useQueryClient()
@@ -50,6 +59,8 @@ const query = createQuery(() => ({
 const doc = $derived(query.data ?? null)
 
 const editable = $derived(canQuire('pageEdit'))
+/** A database page draws a view where the prose would be, and a table needs the whole width. */
+const isDatabase = $derived(doc?.kind === 'database')
 let title = $state('')
 let dirty = $state(false)
 let titleEl = $state<HTMLInputElement | null>(null)
@@ -166,7 +177,11 @@ async function trash() {
 </script>
 
 <div class="with-margin" class:open={showComments}>
-<Page padding="docs" maxWidth="780px">
+<Page
+  padding={isDatabase ? 'none' : 'docs'}
+  maxWidth={isDatabase ? undefined : '780px'}
+  class={isDatabase ? 'db-page' : undefined}
+>
   {#if query.isLoading}
     <Skeleton height="36px" />
     <div class="gap"></div>
@@ -281,19 +296,23 @@ async function trash() {
       </div>
     {/if}
 
-    <div class="body">
-      <PageEditor
-        {doc}
-        onpeers={(p) => (peers = p)}
-        {commentRanges}
-        {activeComment}
-        onCommentClick={(id) => (activeComment = id)}
-        oncomment={(anchor, quotedText) => {
-          pendingComment = { anchor, quotedText }
-          activeComment = null
-        }}
-      />
-    </div>
+    {#if isDatabase}
+      <DatabaseView {workspaceId} {spaceKey} {pageId} spaceId={doc.spaceId} />
+    {:else}
+      <div class="body">
+        <PageEditor
+          {doc}
+          onpeers={(p) => (peers = p)}
+          {commentRanges}
+          {activeComment}
+          onCommentClick={(id) => (activeComment = id)}
+          oncomment={(anchor, quotedText) => {
+            pendingComment = { anchor, quotedText }
+            activeComment = null
+          }}
+        />
+      </div>
+    {/if}
   {/if}
 </Page>
 
@@ -363,6 +382,17 @@ async function trash() {
 .body {
   margin-block-start: 22px;
 }
+/*
+ * A database page drops the reading measure and the page padding, because the views set their own
+ * (DESIGN.md §2.7: a reading view caps, a working view fills). The title and byline keep the 28px
+ * gutter the toolbar under them already uses.
+ */
+:global(.db-page) .head {
+  padding: 24px 28px 0;
+}
+:global(.db-page) .byline {
+  padding-inline: 28px;
+}
 /*
  * The margin is a column beside the page rather than an overlay: a comment is about a specific
  * sentence, and an overlay covers the sentence you are reading it against.