@kernhq/module-quire 0.10.6 → 0.10.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kernhq/module-quire",
-  "version": "0.10.6",
+  "version": "0.10.8",
   "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/SidebarSpaces.svelte

@@ -10,6 +10,7 @@ import {
   session,
 } from '@kernhq/ui'
 import { createQuery, useQueryClient } from '@tanstack/svelte-query'
+import { untrack } from 'svelte'
 import { getQuireApi } from '../api-instance.js'
 import { t } from '../i18n.js'
 import { buildPageTree, type PageTreeNode } from '../index.js'
@@ -76,18 +77,31 @@ const matches = $derived(
   query ? nodes.filter((n) => (n.title || t('untitled')).toLowerCase().includes(query)) : [],
 )
 
-/** A page opened from a link may be nested; its ancestors have to be open for it to be visible. */
+/**
+ * A page opened from a link may be nested; its ancestors have to be open for it to be visible.
+ *
+ * `expanded` is read through `untrack` because this effect also writes it. Tracked, the write makes
+ * the effect its own trigger: collapsing an ancestor of the open page removed it from the set, the
+ * effect re-ran and put it straight back, and the disclosure was inert — click it, press Enter on
+ * it, nothing moves. That is the "effect that reads a flag it also clears" trap already written
+ * down in shell's CLAUDE.md, and it was invisible until `navigation.params.page` started arriving:
+ * with `activePageId` permanently null the loop never ran at all.
+ *
+ * What genuinely selects this effect is which page is open and what the tree contains. Whether a
+ * disclosure is open is the *result*, and a result must not be an input.
+ */
 $effect(() => {
   if (!activePageId || nodes.length === 0) return
   const byId = new Map(nodes.map((n) => [n.id, n]))
-  const next = new Set(expanded)
+  const current = untrack(() => expanded)
+  const next = new Set(current)
   let cursor = byId.get(activePageId)?.parentId ?? null
   let guard = 0
   while (cursor && guard++ < 100) {
     next.add(cursor)
     cursor = byId.get(cursor)?.parentId ?? null
   }
-  if (next.size !== expanded.size) expanded = next
+  if (next.size !== current.size) expanded = next
 })
 
 function toggle(id: string) {

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

@@ -7,9 +7,15 @@ import { t } from '../../i18n.js'
  * A date, stored as an ISO string.
  *
  * The native picker rather than a hand-rolled calendar: it is localised, keyboard-operable and
- * reachable by a screen reader without any of that being written here. It is drawn through
- * `formatDate` when it is not being edited, so the table reads in the interface language rather
- * than in the browser's.
+ * reachable by a screen reader without any of that being written here. But a native
+ * `<input type="date">` draws its *value* in the **browser's** locale, not the page's, and nothing
+ * can restyle that — so a table left permanently in edit mode showed `08/21/2026` in Latin digits
+ * on a Persian screen, in a column beside one already counting `۱ ۲ ۳`. The one untranslated thing
+ * on the page, which is the shape this project treats as a defect rather than as polish.
+ *
+ * So the cell reads through `formatDate` whether or not it is editable, and the input appears when
+ * somebody goes to change it. Focus moves to it on the way in and the formatted text comes back on
+ * the way out, so a keyboard never lands on something it cannot see.
  */
 interface Props {
   value: unknown
@@ -36,6 +42,22 @@ const fieldValue = $derived.by(() => {
 
 const shown = $derived(iso ? (withTime ? formatDateTime(iso) : formatDate(iso)) : '')
 
+/** Swapped for the native input only while somebody is actually changing the date. */
+let editing = $state(false)
+let field = $state<HTMLInputElement>()
+
+/*
+ * Taking focus is not optional here. Replacing the button with the input would otherwise leave
+ * focus on a removed element, which the browser resolves by dropping it to `<body>` — a keyboard
+ * user tabs to a date, presses Enter and is returned to the top of the page.
+ */
+$effect(() => {
+  if (editing && field) {
+    field.focus()
+    field.showPicker?.()
+  }
+})
+
 const commit = (next: string) => {
   if (next === '') {
     if (iso) onchange(null)
@@ -47,14 +69,25 @@ const commit = (next: string) => {
 }
 </script>
 
-{#if editable}
+{#if editable && editing}
   <input
+    bind:this={field}
     class="cell-input"
     type={withTime ? 'datetime-local' : 'date'}
     value={fieldValue}
     aria-label={name}
     onchange={(e) => commit(e.currentTarget.value)}
+    onblur={() => {
+      editing = false
+    }}
+    onkeydown={(e) => {
+      if (e.key === 'Escape' || e.key === 'Enter') editing = false
+    }}
   />
+{:else if editable}
+  <button type="button" class="cell-open" aria-label={name} onclick={() => (editing = true)}>
+    {#if shown}{shown}{:else}<span class="muted">{t('db_cell_empty')}</span>{/if}
+  </button>
 {:else}
   <span class="cell-static" title={reason}>
     {#if shown}{shown}{:else}<span class="muted">{t('db_cell_empty')}</span>{/if}
@@ -83,6 +116,36 @@ const commit = (next: string) => {
   background: var(--kern-surface-raised);
   outline: none;
 }
+/* Mirrors `.cell-input` so swapping one for the other does not move the row by a pixel. */
+.cell-open {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 26px;
+  padding: 2px 6px;
+  margin-inline-start: -6px;
+  border: 1px solid transparent;
+  border-radius: var(--kern-r-sm);
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  text-align: start;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.cell-open:hover {
+  background: var(--kern-surface-active);
+}
+/*
+ * The ring itself comes from the global `:focus-visible` rule in tokens.css — a box-shadow, not an
+ * outline. Only the ground is set here, so the two do not fight.
+ */
+.cell-open:focus-visible {
+  background: var(--kern-surface-raised);
+}
 .cell-static {
   min-width: 0;
   overflow: hidden;