@kernhq/module-quire 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kernhq/module-quire",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Kern Quire: collaborative documents, spaces and page trees",
   "homepage": "https://github.com/KernAIO/module-quire#readme",
   "license": "AGPL-3.0-only",

package/src/client/components/CommentsPanel.svelte

@@ -114,7 +114,7 @@ async function remove(commentId: string) {
       {/if}
       <RichTextEditor bind:value={draft} placeholder={t('comment_placeholder')} minRows={2} />
       <div class="actions">
-        <Button size="sm" variant="secondary" onclick={() => onPendingHandled?.()}>{t('common.cancel')}</Button>
+        <Button size="sm" variant="secondary" onclick={() => onPendingHandled?.()}>{t('cancel')}</Button>
         <Button size="sm" disabled={busy || empty(draft)} onclick={() => submit(null, draft)}>
           {t('comment_post')}
         </Button>
@@ -169,7 +169,7 @@ async function remove(commentId: string) {
                     icon="trash-2"
                     size={22}
                     variant="ghost"
-                    label={t('common.delete')}
+                    label={t('delete')}
                     onclick={() => remove(comment.id)}
                   />
                 {/if}
@@ -183,7 +183,7 @@ async function remove(commentId: string) {
           {#if replyTo === thread.id}
             <RichTextEditor bind:value={replyDraft} placeholder={t('comment_reply')} minRows={1} />
             <div class="actions">
-              <Button size="sm" variant="secondary" onclick={() => (replyTo = null)}>{t('common.cancel')}</Button>
+              <Button size="sm" variant="secondary" onclick={() => (replyTo = null)}>{t('cancel')}</Button>
               <Button
                 size="sm"
                 disabled={busy || empty(replyDraft)}

package/src/client/components/NewSpaceDialog.svelte

@@ -122,8 +122,8 @@ async function submit() {
   </div>
 
   {#snippet footer()}
-    <Button variant="secondary" onclick={() => (open = false)}>{t('common.cancel')}</Button>
-    <Button disabled={!valid || saving} onclick={submit}>{t('common.create')}</Button>
+    <Button variant="secondary" onclick={() => (open = false)}>{t('cancel')}</Button>
+    <Button disabled={!valid || saving} onclick={submit}>{t('create')}</Button>
   {/snippet}
 </Dialog>
 

package/src/client/components/SidebarSpaces.svelte

@@ -168,7 +168,7 @@ async function createPage(parentId: string | null) {
               void treeQuery.refetch()
             }}
           >
-            {t('common.retry')}
+            {t('retry')}
           </Button>
         {/snippet}
       </EmptyState>

package/src/client/components/VersionHistory.svelte

@@ -67,9 +67,9 @@ const kindLabel = (v: PageVersion) =>
       {#each [1, 2, 3, 4] as n (n)}<Skeleton height="56px" />{/each}
     </div>
   {:else if query.isError}
-    <EmptyState icon="triangle-alert" title={t('history_error')} description={t('common.retry')}>
+    <EmptyState icon="triangle-alert" title={t('history_error')} description={t('retry')}>
       {#snippet actions()}
-        <Button variant="secondary" onclick={() => void query.refetch()}>{t('common.retry')}</Button>
+        <Button variant="secondary" onclick={() => void query.refetch()}>{t('retry')}</Button>
       {/snippet}
     </EmptyState>
   {:else if versions.length === 0}

package/src/client/database/BoardView.svelte

@@ -143,9 +143,9 @@ const laneRule = (lane: Lane) =>
     </EmptyState>
   </div>
 {:else}
-  <div class="board">
+  <div class="board" data-testid="database-board">
     {#each lanes as lane, index (lane.id)}
-      <section class="col">
+      <section class="col" data-lane={lane.id}>
         <header class="head">
           {#if lane.option}
             <OptionChip option={lane.option} compact />
@@ -180,7 +180,7 @@ const laneRule = (lane: Lane) =>
           onfinalize={(e) => finalize(index, e)}
         >
           {#each lane.rows as row (row.id)}
-            <article class="card" class:shadow={isShadow(row)}>
+            <article class="card" class:shadow={isShadow(row)} data-testid="board-card">
               <div class="card-top">
                 <h3 class="card-title">{row.title.trim() || t('untitled')}</h3>
                 <DropdownMenu items={cardMenu(row, lane)}>
@@ -299,7 +299,8 @@ const laneRule = (lane: Lane) =>
   color: var(--kern-ink-900);
 }
 .fields {
-  margin: 10px 5px 0 0;
+  margin-block-start: 10px;
+  margin-inline-end: 5px;
   padding: 0;
   display: flex;
   flex-direction: column;

package/src/client/database/DatabaseView.svelte

@@ -67,6 +67,19 @@ const api = getQuireApi()
 const core = coreApi<CoreApi>()
 const client = useQueryClient()
 
+/** What a view with nothing configured looks like — the shape `ViewConfig` guarantees. */
+const BLANK_CONFIG: ViewConfig = {
+  filters: [],
+  filterMode: 'and',
+  sorts: [],
+  groupBy: null,
+  dateProperty: null,
+  visibleProperties: null,
+  columnWidths: {},
+  cardSize: 'medium',
+  coverProperty: null,
+}
+
 const PAGE_SIZE = 50
 /** What a non-paging view will show before it says it has stopped. */
 const CAP = 500
@@ -155,10 +168,27 @@ $effect(() => {
   if (inspecting && rows.length > 0 && !rows.some((r) => r.id === inspecting)) inspecting = null
 })
 
+/**
+ * The configuration on screen: the last one *written*, not the last one read back.
+ *
+ * Two rapid edits both merge from `view.config`, and until the refetch lands that is the value from
+ * before either of them — so the second silently undoes the first. Holding the pending
+ * configuration here makes successive edits compose, and shows each one immediately rather than a
+ * round trip later.
+ */
+let pending = $state.raw<{ viewId: string; config: ViewConfig; seq: number } | null>(null)
+let writes = 0
+
+const liveConfig = $derived<ViewConfig>(
+  pending && pending.viewId === view?.id ? pending.config : (view?.config ?? BLANK_CONFIG),
+)
+/** The view as the screen should draw it: the stored one, wearing whatever was written last. */
+const liveView = $derived<View | null>(view ? { ...view, config: liveConfig } : null)
+
 const properties = $derived(database ? orderedProperties(database) : [])
 const relations = $derived(properties.filter((p) => p.type === 'relation'))
 const groupProperty = $derived(
-  view?.config.groupBy ? (properties.find((p) => p.key === view.config.groupBy) ?? null) : null,
+  liveConfig.groupBy ? (properties.find((p) => p.key === liveConfig.groupBy) ?? null) : null,
 )
 
 // ---- writing ------------------------------------------------------------------------------
@@ -170,36 +200,72 @@ const refreshSchema = async () => {
 const refreshRows = () => client.invalidateQueries({ queryKey: ['quire', 'row', workspaceId, databaseId] })
 
 /**
- * One place that reports a failure, and one flag that stops a second click.
+ * One place that reports a failure, and one guard that stops a second click.
+ *
+ * `disabled={busy}` alone does not stop it: the attribute reaches the button on the next render and
+ * two quick clicks are one render apart, so the guard is read here, in the same tick as the click.
  *
- * `disabled={busy}` alone does not: the attribute reaches the button on the next render and two
- * quick clicks are one render apart, so the guard is read here in the same tick as the click.
+ * The guard is **per action**, not global. A single in-flight flag looks like the same thing and is
+ * not: choosing a filter's column, then its operator, then its value is three writes a few hundred
+ * milliseconds apart, and a global flag drops the second and the third on the floor — the panel
+ * fills in, the table never changes, and nothing on screen says why.
  */
-async function act(work: () => Promise<unknown>, after: () => Promise<unknown>) {
-  if (busy) return
+const running = new Set<string>()
+
+async function act(work: () => Promise<unknown>, after: () => Promise<unknown>, guard?: string) {
+  if (guard && running.has(guard)) return
+  if (guard) running.add(guard)
   busy = true
   try {
     await work()
     await after()
   } catch (err) {
-    toast.error(err instanceof Error && err.message ? err.message : t('common.error'))
+    toast.error(err instanceof Error && err.message ? err.message : t('error'))
   } finally {
-    busy = false
+    if (guard) running.delete(guard)
+    busy = running.size > 0
   }
 }
 
 const patchView = (patch: Partial<ViewConfig>) => {
   if (!view) return
-  // `updateView` replaces `config` wholesale, so a partial write deletes the rest of the view.
-  const config = mergeConfig(view.config, patch)
-  void act(() => api.databases.updateView({ workspaceId, viewId: view.id, config }), refreshSchema)
+  /**
+   * `updateView` replaces `config` wholesale, so the merged whole always goes — a partial write
+   * deletes the rest of the view. And it is snapshotted: the merge carries arrays straight out of
+   * the query cache, which are `$state` proxies, and a proxy cannot be `structuredClone`d — which is
+   * what the API layer does, so the request throws before it is sent and the edit never appears.
+   */
+  const config = $state.snapshot(mergeConfig(liveConfig, patch)) as ViewConfig
+  const viewId = view.id
+  const mine = ++writes
+  pending = { viewId, config, seq: mine }
+  /**
+   * Filtering, sorting and grouping decide **which rows** the server returns, and the rows query is
+   * keyed by the view's *id* — which does not change when its configuration does. Without this the
+   * filter panel fills in and the table underneath keeps showing everything, until something else
+   * happens to invalidate it.
+   */
+  const changesRows =
+    patch.filters !== undefined || patch.filterMode !== undefined || patch.sorts !== undefined
+  void act(
+    () => api.databases.updateView({ workspaceId, viewId, config }),
+    async () => {
+      await refreshSchema()
+      if (changesRows) await refreshRows()
+      // Only the newest write hands control back to the server's answer.
+      if (pending?.seq === mine) pending = null
+    },
+  )
 }
 
-const writeCell = (row: Row, property: Property, value: unknown) =>
-  act(
-    () => api.databases.updateRow({ workspaceId, rowId: row.id, props: { [property.key]: value } }),
+const writeCell = (row: Row, property: Property, value: unknown) => {
+  // A multi-select or relation cell hands back an array built from proxied state.
+  const next = $state.snapshot(value)
+  return act(
+    () => api.databases.updateRow({ workspaceId, rowId: row.id, props: { [property.key]: next } }),
     refreshRows,
   )
+}
 
 const writeTitle = (row: Row, title: string) => {
   if (title === row.title) return Promise.resolve()
@@ -219,6 +285,7 @@ const addRow = (seed: Record<string, unknown> = {}) =>
       await refreshRows()
       await client.invalidateQueries({ queryKey: quireKeys.tree(workspaceId, spaceId) })
     },
+    'add-row',
   )
 
 const duplicateRow = (row: Row) =>
@@ -231,6 +298,7 @@ const duplicateRow = (row: Row) =>
         props: $state.snapshot(row.props),
       }),
     refreshRows,
+    `duplicate-${row.id}`,
   )
 
 const openPage = (row: Row) =>
@@ -255,7 +323,7 @@ const moveOnBoard = (row: Row, laneId: string) => {
 }
 
 const setDate = (row: Row, iso: string | null) => {
-  const key = view?.config.dateProperty
+  const key = liveConfig.dateProperty
   if (!key) return Promise.resolve()
   return act(
     () => api.databases.updateRow({ workspaceId, rowId: row.id, props: { [key]: iso } }),
@@ -299,19 +367,19 @@ const hideProperty = (property: Property) =>
 
 const sortBy = (property: Property, direction: 'asc' | 'desc' | null) => {
   if (!view) return
-  const rest = view.config.sorts.filter((s) => s.propertyKey !== property.key)
+  const rest = liveConfig.sorts.filter((s) => s.propertyKey !== property.key)
   patchView({ sorts: direction ? [{ propertyKey: property.key, direction }, ...rest] : rest })
 }
 
 const sortDirectionOf = (key: string) =>
-  view?.config.sorts.find((s) => s.propertyKey === key)?.direction ?? null
+  liveConfig.sorts.find((s) => s.propertyKey === key)?.direction ?? null
 
 function filterBy(property: Property) {
   if (!view) return
-  const already = view.config.filters.some((f) => f.propertyKey === property.key)
+  const already = liveConfig.filters.some((f) => f.propertyKey === property.key)
   if (!already) {
     const operator = descriptorFor(property.type).operators[0] ?? 'equals'
-    patchView({ filters: [...view.config.filters, { propertyKey: property.key, operator, value: null }] })
+    patchView({ filters: [...liveConfig.filters, { propertyKey: property.key, operator, value: null }] })
   }
   filterOpen = true
 }
@@ -343,6 +411,7 @@ function confirmed() {
         await refreshSchema()
         await refreshRows()
       },
+      `delete-property-${target.property.id}`,
     )
   else if (target.kind === 'view')
     void act(
@@ -352,6 +421,7 @@ function confirmed() {
         if (chosenViewId === target.view.id) chosenViewId = null
         await refreshSchema()
       },
+      `delete-view-${target.view.id}`,
     )
   else
     void act(
@@ -362,6 +432,7 @@ function confirmed() {
         await refreshRows()
         await client.invalidateQueries({ queryKey: quireKeys.tree(workspaceId, spaceId) })
       },
+      `delete-row-${target.row.id}`,
     )
 }
 
@@ -389,7 +460,7 @@ const confirmBody = $derived(
 const groupItems = $derived<MenuItem[]>([
   {
     type: 'radio',
-    value: view?.config.groupBy ?? '',
+    value: liveConfig.groupBy ?? '',
     options: [
       { value: '', label: t('db_group_none') },
       ...properties
@@ -469,7 +540,7 @@ const failed = $derived(forPage.isError || databaseQuery.isError || rowsQuery.is
             void rowsQuery.refetch()
           }}
         >
-          {t('common.retry')}
+          {t('retry')}
         </Button>
       {/snippet}
     </EmptyState>
@@ -500,7 +571,7 @@ const failed = $derived(forPage.isError || databaseQuery.isError || rowsQuery.is
   <Toolbar>
     <FilterMenu
       {database}
-      config={view?.config ?? { filters: [], filterMode: 'and', sorts: [], groupBy: null, dateProperty: null, visibleProperties: null, columnWidths: {}, cardSize: 'medium', coverProperty: null }}
+      config={liveConfig}
       {workspaceId}
       {people}
       {canEdit}
@@ -510,16 +581,16 @@ const failed = $derived(forPage.isError || databaseQuery.isError || rowsQuery.is
     />
     <SortMenu
       {database}
-      config={view?.config ?? { filters: [], filterMode: 'and', sorts: [], groupBy: null, dateProperty: null, visibleProperties: null, columnWidths: {}, cardSize: 'medium', coverProperty: null }}
+      config={liveConfig}
       {canEdit}
       open={sortOpen}
       onOpenChange={(o) => (sortOpen = o)}
       onchange={patchView}
     />
-    {#if view?.kind === 'board'}
+    {#if liveView?.kind === 'board'}
       <DropdownMenu items={groupItems} align="start">
         {#snippet trigger(props: Record<string, unknown>)}
-          <ToolbarButton {...props} prefix={t('db_by')} active={Boolean(view?.config.groupBy)}>
+          <ToolbarButton {...props} prefix={t('db_by')} active={Boolean(liveConfig.groupBy)}>
             {groupProperty?.name ?? t('db_group_none')}
           </ToolbarButton>
         {/snippet}
@@ -561,7 +632,7 @@ const failed = $derived(forPage.isError || databaseQuery.isError || rowsQuery.is
       {/if}
       <TableView
         {database}
-        {view}
+        view={liveView}
         {rows}
         {people}
         {workspaceId}
@@ -591,14 +662,14 @@ const failed = $derived(forPage.isError || databaseQuery.isError || rowsQuery.is
             disabled={rowsQuery.isFetchingNextPage}
             onclick={() => void rowsQuery.fetchNextPage()}
           >
-            {rowsQuery.isFetchingNextPage ? t('common.loading') : t('db_load_more')}
+            {rowsQuery.isFetchingNextPage ? t('loading') : t('db_load_more')}
           </Button>
         </div>
       {/if}
     {:else if view.kind === 'board'}
       <BoardView
         {database}
-        {view}
+        view={liveView}
         {rows}
         {people}
         {workspaceId}
@@ -619,7 +690,7 @@ const failed = $derived(forPage.isError || databaseQuery.isError || rowsQuery.is
     {:else if view.kind === 'gallery'}
       <GalleryView
         {database}
-        {view}
+        view={liveView}
         {rows}
         {people}
         {workspaceId}
@@ -631,7 +702,7 @@ const failed = $derived(forPage.isError || databaseQuery.isError || rowsQuery.is
     {:else if view.kind === 'list'}
       <ListView
         {database}
-        {view}
+        view={liveView}
         {rows}
         {people}
         {workspaceId}
@@ -643,7 +714,7 @@ const failed = $derived(forPage.isError || databaseQuery.isError || rowsQuery.is
     {:else}
       <CalendarView
         {database}
-        {view}
+        view={liveView}
         {rows}
         {canEdit}
         onOpenRow={(row) => (inspecting = row.id)}
@@ -707,8 +778,8 @@ const failed = $derived(forPage.isError || databaseQuery.isError || rowsQuery.is
 >
   <p class="confirm">{confirmBody}</p>
   {#snippet footer()}
-    <Button variant="secondary" onclick={() => (confirming = null)}>{t('common.cancel')}</Button>
-    <Button variant="danger" disabled={busy} onclick={confirmed}>{t('common.delete')}</Button>
+    <Button variant="secondary" onclick={() => (confirming = null)}>{t('cancel')}</Button>
+    <Button variant="danger" disabled={busy} onclick={confirmed}>{t('delete')}</Button>
   {/snippet}
 </Dialog>
 

package/src/client/database/GalleryView.svelte

@@ -143,7 +143,7 @@ const menu = (row: Row): MenuItem[] => [
   color: var(--kern-ink-900);
 }
 .fields {
-  margin: 0 5px 0 0;
+  margin-inline-end: 5px;
   padding: 0;
   display: flex;
   flex-direction: column;

package/src/client/database/PropertyDialog.svelte

@@ -87,7 +87,7 @@ const formulaError = $derived.by(() => {
     parseFormula(expression)
     return null
   } catch (err) {
-    return err instanceof FormulaError || err instanceof Error ? err.message : t('common.error')
+    return err instanceof FormulaError || err instanceof Error ? err.message : t('error')
   }
 })
 
@@ -362,9 +362,9 @@ $effect(() => {
   </div>
 
   {#snippet footer()}
-    <Button variant="secondary" onclick={onClose}>{t('common.cancel')}</Button>
+    <Button variant="secondary" onclick={onClose}>{t('cancel')}</Button>
     <Button disabled={!valid || busy || submitting} onclick={submit}>
-      {property ? t('common.save') : t('common.add')}
+      {property ? t('save') : t('add')}
     </Button>
   {/snippet}
 </Dialog>

package/src/client/database/TableView.svelte

@@ -158,7 +158,7 @@ const rowMenu = (row: Row): MenuItem[] => [
 </script>
 
 <div class="scroll">
-  <div class="rail" style:min-width="{minWidth}px">
+  <div class="rail" data-testid="database-table" style:min-width="{minWidth}px">
     <Table columns={liveTemplate} dense>
       <TableHeader>
         <TableCell header>
@@ -206,7 +206,7 @@ const rowMenu = (row: Row): MenuItem[] => [
       </TableHeader>
 
       {#each rows as row (row.id)}
-        <TableRow>
+        <TableRow data-testid="database-row" data-row-id={row.id}>
           <TableCell class="title-cell">
             {#if canEdit}
               <input

package/src/client/database/ViewDialog.svelte

@@ -172,9 +172,9 @@ $effect(() => {
   </div>
 
   {#snippet footer()}
-    <Button variant="secondary" onclick={onClose}>{t('common.cancel')}</Button>
+    <Button variant="secondary" onclick={onClose}>{t('cancel')}</Button>
     <Button disabled={!valid || busy || submitting} onclick={submit}>
-      {view ? t('common.save') : t('common.create')}
+      {view ? t('save') : t('create')}
     </Button>
   {/snippet}
 </Dialog>

package/src/client/database/cells/RelationCell.svelte

@@ -108,7 +108,7 @@ const unlink = (id: string) => onchange(ids.filter((v) => v !== id))
           {#if search.isLoading}
             <div class="state"><Spinner size={16} /></div>
           {:else if search.isError}
-            <p class="state">{t('common.error')}</p>
+            <p class="state">{t('error')}</p>
           {:else if results.length === 0}
             <p class="state">{t('db_relation_none')}</p>
           {:else}

package/src/client/i18n.ts

@@ -325,6 +325,14 @@ export const en: Record<string, Message> = {
   'quire.db_views': 'Views',
   'quire.db_visible_properties': 'Columns shown',
   'quire.db_widen': 'Widen',
+  'quire.add': 'Add',
+  'quire.cancel': 'Cancel',
+  'quire.create': 'Create',
+  'quire.delete': 'Delete',
+  'quire.error': 'Something went wrong. Try again.',
+  'quire.loading': 'Loading…',
+  'quire.retry': 'Try again',
+  'quire.save': 'Save',
 }
 
 export type QuireMessageKey = keyof typeof en
@@ -657,6 +665,14 @@ const ar: Record<string, Message> = {
   'quire.db_views': 'طرق العرض',
   'quire.db_visible_properties': 'الأعمدة المعروضة',
   'quire.db_widen': 'توسيع',
+  'quire.add': 'إضافة',
+  'quire.cancel': 'إلغاء',
+  'quire.create': 'إنشاء',
+  'quire.delete': 'حذف',
+  'quire.error': 'حدث خطأ ما. حاول مرة أخرى.',
+  'quire.loading': 'جارٍ التحميل…',
+  'quire.retry': 'أعد المحاولة',
+  'quire.save': 'حفظ',
 }
 
 const de: Record<string, Message> = {
@@ -978,6 +994,14 @@ const de: Record<string, Message> = {
   'quire.db_views': 'Ansichten',
   'quire.db_visible_properties': 'Sichtbare Spalten',
   'quire.db_widen': 'Verbreitern',
+  'quire.add': 'Hinzufügen',
+  'quire.cancel': 'Abbrechen',
+  'quire.create': 'Erstellen',
+  'quire.delete': 'Löschen',
+  'quire.error': 'Etwas ist schiefgelaufen. Versuche es erneut.',
+  'quire.loading': 'Wird geladen…',
+  'quire.retry': 'Erneut versuchen',
+  'quire.save': 'Speichern',
 }
 
 const fa: Record<string, Message> = {
@@ -1290,6 +1314,14 @@ const fa: Record<string, Message> = {
   'quire.db_views': 'نماها',
   'quire.db_visible_properties': 'ستون‌های نمایان',
   'quire.db_widen': 'پهن‌تر',
+  'quire.add': 'افزودن',
+  'quire.cancel': 'انصراف',
+  'quire.create': 'ساختن',
+  'quire.delete': 'حذف',
+  'quire.error': 'چیزی درست پیش نرفت. دوباره تلاش کنید.',
+  'quire.loading': 'در حال بارگذاری…',
+  'quire.retry': 'دوباره تلاش کنید',
+  'quire.save': 'ذخیره',
 }
 
 const tr: Record<string, Message> = {
@@ -1604,6 +1636,14 @@ const tr: Record<string, Message> = {
   'quire.db_views': 'Görünümler',
   'quire.db_visible_properties': 'Görünen sütunlar',
   'quire.db_widen': 'Genişlet',
+  'quire.add': 'Ekle',
+  'quire.cancel': 'Vazgeç',
+  'quire.create': 'Oluştur',
+  'quire.delete': 'Sil',
+  'quire.error': 'Bir şeyler ters gitti. Yeniden deneyin.',
+  'quire.loading': 'Yükleniyor…',
+  'quire.retry': 'Yeniden dene',
+  'quire.save': 'Kaydet',
 }
 
 /** In the shape `defineClientModule().messages` expects. */

package/src/client/mock.ts

@@ -281,6 +281,17 @@ export function createMockQuireApi() {
     throw notFound('View')
   }
 
+  /**
+   * A copy on the way out, because a real API answers with fresh JSON every time.
+   *
+   * Handing back the live object makes the mock *look* right and behave wrongly in one specific
+   * way: TanStack's structural sharing compares the new answer with the cached one, finds the same
+   * object, and keeps the old reference — so `query.data` never changes identity, no `$derived`
+   * re-runs, and every schema change (a new column, a deleted view) is applied to the data and
+   * invisible on screen. Rows never showed it, because `toDatabaseRow` already built a new object.
+   */
+  const copy = <T>(value: T): T => structuredClone(value)
+
   const toDatabaseRow = (row: Row): DatabaseRow => ({
     id: row.id,
     databaseId: row._databaseId ?? '',
@@ -558,9 +569,12 @@ export function createMockQuireApi() {
           .filter((d) => d.spaceId === spaceId)
           .map((d) => ({ id: d.id, pageId: d.pageId, name: d.name })),
 
-      get: async ({ databaseId }: { databaseId: string }) => theDatabase(databaseId),
+      get: async ({ databaseId }: { databaseId: string }) => copy(theDatabase(databaseId)),
 
-      forPage: async ({ pageId }: { pageId: string }) => databases.find((d) => d.pageId === pageId) ?? null,
+      forPage: async ({ pageId }: { pageId: string }) => {
+        const db = databases.find((d) => d.pageId === pageId)
+        return db ? copy(db) : null
+      },
 
       create: async (input: { spaceId: string; pageId: string; name?: string; inline?: boolean }) => {
         const db: Database = {
@@ -589,7 +603,7 @@ export function createMockQuireApi() {
         for (const view of db.views) view.databaseId = db.id
         databases.push(db)
         found(input.pageId).kind = 'database'
-        return db
+        return copy(db)
       },
 
       rows: async (input: {
@@ -702,7 +716,7 @@ export function createMockQuireApi() {
           hidden: false,
         }
         db.properties.push(property)
-        return property
+        return copy(property)
       },
 
       updateProperty: async (input: {
@@ -717,7 +731,7 @@ export function createMockQuireApi() {
         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
+        return copy(property)
       },
 
       moveProperty: async (input: { propertyId: string; afterId?: string | null }) => {
@@ -732,7 +746,7 @@ export function createMockQuireApi() {
         db.properties.forEach((p, index) => {
           p.position = String(index).padStart(4, '0')
         })
-        return property
+        return copy(property)
       },
 
       removeProperty: async (input: { propertyId: string }) => {
@@ -759,7 +773,7 @@ export function createMockQuireApi() {
           isDefault: db.views.length === 0,
         }
         db.views.push(view)
-        return view
+        return copy(view)
       },
 
       updateView: async (input: {
@@ -773,7 +787,7 @@ export function createMockQuireApi() {
         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
+        return copy(view)
       },
 
       removeView: async (input: { viewId: string }) => {

package/src/client/pages/PageView.svelte

@@ -189,35 +189,42 @@ async function trash() {
   {:else if query.isError}
     <EmptyState icon="triangle-alert" title={t('page_error')} description={t('page_error_desc')}>
       {#snippet actions()}
-        <Button variant="secondary" onclick={() => void query.refetch()}>{t('common.retry')}</Button>
+        <Button variant="secondary" onclick={() => void query.refetch()}>{t('retry')}</Button>
       {/snippet}
     </EmptyState>
   {:else if !doc}
     <EmptyState icon="circle-help" title={t('page_missing')} description={t('page_missing_desc')} />
   {:else}
     <div class="head">
-      {#if editable}
-        <input
-          bind:this={titleEl}
-          class="title"
-          value={title}
-          placeholder={t('untitled')}
-          aria-label={t('page_title')}
-          oninput={(e) => {
-            title = (e.currentTarget as HTMLInputElement).value
-            dirty = true
-          }}
-          onblur={saveTitle}
-          onkeydown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault()
-              ;(e.currentTarget as HTMLInputElement).blur()
-            }
-          }}
-        />
-      {:else}
-        <h1 class="title">{doc.title.trim() || t('untitled')}</h1>
-      {/if}
+      <!--
+        The editable title is *inside* the h1 rather than instead of it. A page whose only title is
+        an `<input>` has no level-1 heading at all — which is what a screen reader looks for first,
+        and what `ux.spec.ts` fails a route on.
+      -->
+      <h1 class="title">
+        {#if editable}
+          <input
+            bind:this={titleEl}
+            class="title-field"
+            value={title}
+            placeholder={t('untitled')}
+            aria-label={t('page_title')}
+            oninput={(e) => {
+              title = (e.currentTarget as HTMLInputElement).value
+              dirty = true
+            }}
+            onblur={saveTitle}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                ;(e.currentTarget as HTMLInputElement).blur()
+              }
+            }}
+          />
+        {:else}
+          {doc.title.trim() || t('untitled')}
+        {/if}
+      </h1>
 
       <DropdownMenu
         items={[
@@ -356,12 +363,18 @@ async function trash() {
   line-height: 1.2;
   color: var(--kern-ink-900);
   margin: 0;
+}
+.title-field {
+  width: 100%;
+  min-width: 0;
+  color: inherit;
+  font: inherit;
+  margin: 0;
   border: 0;
   background: none;
   padding: 0;
-  font-family: inherit;
 }
-.title:focus {
+.title-field:focus {
   outline: none;
 }
 .byline {

package/src/client/pages/SpacesPage.svelte

@@ -54,7 +54,7 @@ function open(key: string) {
   {:else if spacesQuery.isError}
     <EmptyState icon="triangle-alert" title={t('spaces_error')} description={t('spaces_error_desc')}>
       {#snippet actions()}
-        <Button variant="secondary" onclick={() => void spacesQuery.refetch()}>{t('common.retry')}</Button>
+        <Button variant="secondary" onclick={() => void spacesQuery.refetch()}>{t('retry')}</Button>
       {/snippet}
     </EmptyState>
   {:else if spaceList.length === 0}