@kernhq/module-quire 0.8.0 → 0.9.0

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

@@ -0,0 +1,103 @@
+<script lang="ts">
+import type { Property, Row } from '../../../contract/index.js'
+import type { Person } from '../../core-api.js'
+import { t } from '../../i18n.js'
+import { descriptorFor } from '../property-types.js'
+import CheckboxCell from './CheckboxCell.svelte'
+import ComputedCell from './ComputedCell.svelte'
+import DateCell from './DateCell.svelte'
+import LinkCell from './LinkCell.svelte'
+import NumberCell from './NumberCell.svelte'
+import PersonCell from './PersonCell.svelte'
+import RelationCell from './RelationCell.svelte'
+import SelectCell from './SelectCell.svelte'
+import TextCell from './TextCell.svelte'
+
+/**
+ * One cell: the property's type in, the right editor out.
+ *
+ * Every branch reads `property-types.ts` rather than switching on the type again, so a type added to
+ * the contract lands in exactly one place. A cell reads `computed` for the six server-written types
+ * and `props` for everything else — the same split the server's `valueExpr` makes, and getting it
+ * wrong here shows an empty column rather than an error.
+ *
+ * `onchange` fires once per **committed** edit, never per keystroke.
+ */
+interface Props {
+  property: Property
+  row: Row
+  people: Person[]
+  workspaceId: string
+  /** false when the viewer may not edit this database at all */
+  canEdit: boolean
+  onchange: (value: unknown) => void
+}
+const { property, row, people, workspaceId, canEdit, onchange }: Props = $props()
+
+const descriptor = $derived(descriptorFor(property.type))
+const value = $derived(descriptor.readOnly ? row.computed[property.key] : row.props[property.key])
+const editable = $derived(canEdit && !descriptor.readOnly)
+
+/**
+ * Why this cell cannot be typed into. A disabled control with no explanation is a bug, and the two
+ * reasons are different: the column is worked out, or you may not edit anything here.
+ */
+const reason = $derived(descriptor.readOnly ? t('db_cell_readonly') : t('db_cell_no_permission'))
+</script>
+
+{#if descriptor.editor === 'computed'}
+  <ComputedCell {value} name={property.name} type={property.type} {people} />
+{:else if descriptor.editor === 'unsupported'}
+  <span class="unsupported" title={t('db_files_unsupported')}>{t('db_files_unsupported')}</span>
+{:else if descriptor.editor === 'number'}
+  <NumberCell {value} name={property.name} config={property.config} {editable} {reason} {onchange} />
+{:else if descriptor.editor === 'select'}
+  <SelectCell
+    {value}
+    name={property.name}
+    type={property.type}
+    config={property.config}
+    {editable}
+    {reason}
+    {onchange}
+  />
+{:else if descriptor.editor === 'date'}
+  <DateCell {value} name={property.name} config={property.config} {editable} {reason} {onchange} />
+{:else if descriptor.editor === 'person'}
+  <PersonCell
+    {value}
+    name={property.name}
+    config={property.config}
+    {people}
+    {editable}
+    {reason}
+    {onchange}
+  />
+{:else if descriptor.editor === 'checkbox'}
+  <CheckboxCell {value} name={property.name} {editable} {reason} {onchange} />
+{:else if descriptor.editor === 'link'}
+  <LinkCell {value} name={property.name} type={property.type} {editable} {reason} {onchange} />
+{:else if descriptor.editor === 'relation'}
+  <RelationCell
+    {value}
+    name={property.name}
+    config={property.config}
+    {workspaceId}
+    {editable}
+    {reason}
+    {onchange}
+  />
+{:else}
+  <TextCell {value} name={property.name} {editable} {reason} {onchange} />
+{/if}
+
+<style>
+.unsupported {
+  font-size: 12.5px;
+  color: var(--kern-ink-450);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: default;
+}
+</style>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { Checkbox } from '@kernhq/ui'
+
+/**
+ * A checkbox with no visible label, so the column's name is its accessible name — without it a
+ * screen reader announces a table of twelve boxes all called "checkbox".
+ *
+ * An untouched cell is false rather than absent, which is what the server's filter also assumes:
+ * "not done" has to include the rows nobody has touched, and that is most of them.
+ */
+interface Props {
+  value: unknown
+  name: string
+  editable: boolean
+  reason?: string
+  onchange: (value: unknown) => void
+}
+const { value, name, editable, reason, onchange }: Props = $props()
+
+const checked = $derived(value === true || value === 'true')
+</script>
+
+<span class="wrap" title={editable ? undefined : reason}>
+  <Checkbox {checked} disabled={!editable} ariaLabel={name} onCheckedChange={(on) => onchange(on)} />
+</span>
+
+<style>
+.wrap {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+}
+</style>

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

@@ -0,0 +1,100 @@
+<script lang="ts">
+import { Avatar, formatDateTime, Icon, messageLocale } from '@kernhq/ui'
+import type { PropertyType } from '../../../contract/index.js'
+import type { Person } from '../../core-api.js'
+import { t } from '../../i18n.js'
+
+/**
+ * formula, rollup and the four audit stamps — everything the server works out.
+ *
+ * Read-only, and it says so on hover rather than rendering a disabled input with no explanation.
+ *
+ * A broken formula is stored as `{ error: "…" }`, and rendering that with `String()` puts
+ * `[object Object]` in the cell — which reads as a bug in the table rather than as a mistake in the
+ * expression. The message is shown instead, in the danger tone, which is where the fix actually is.
+ */
+interface Props {
+  value: unknown
+  name: string
+  type: PropertyType
+  people: Person[]
+  reason?: string
+}
+const { value, name, type, people, reason }: Props = $props()
+
+const error = $derived(
+  value !== null && typeof value === 'object' && !Array.isArray(value) && 'error' in value
+    ? String((value as { error: unknown }).error)
+    : null,
+)
+
+const personFor = (id: string) => people.find((p) => p.id === id) ?? null
+
+const shown = $derived.by(() => {
+  if (error) return ''
+  if (value === null || value === undefined || value === '') return ''
+  if (type === 'created_time' || type === 'edited_time') return formatDateTime(String(value))
+  if (typeof value === 'boolean') return value ? '✓' : '—'
+  if (typeof value === 'number') return new Intl.NumberFormat(messageLocale()).format(value)
+  if (Array.isArray(value)) return value.map(String).join(', ')
+  return String(value)
+})
+
+const isPerson = $derived(type === 'created_by' || type === 'edited_by')
+const personId = $derived(isPerson && typeof value === 'string' && value !== '' ? value : null)
+</script>
+
+{#if error}
+  <!-- The message, not the chip, is what tells somebody where the mistake is. -->
+  <span class="err" title={error} aria-label={`${name}: ${error}`}>
+    <Icon name="triangle-alert" size={13} strokeWidth={1.7} />
+    <span class="nm">{t('db_cell_formula_error')}</span>
+  </span>
+{:else if isPerson}
+  <span class="cell-static" title={reason ?? t('db_cell_readonly')} aria-label={name}>
+    {#if personId}
+      <Avatar id={personId} name={personFor(personId)?.name ?? null} src={personFor(personId)?.avatarUrl ?? null} size={20} />
+      <span class="nm">{personFor(personId)?.name ?? personId}</span>
+    {:else}
+      <span class="muted">{t('db_cell_empty')}</span>
+    {/if}
+  </span>
+{:else}
+  <span class="cell-static" title={reason ?? t('db_cell_readonly')} aria-label={name}>
+    {#if shown}{shown}{:else}<span class="muted">{t('db_cell_empty')}</span>{/if}
+  </span>
+{/if}
+
+<style>
+.cell-static {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  min-height: 26px;
+  overflow: hidden;
+  cursor: default;
+  font-size: 13px;
+  color: var(--kern-ink-550);
+}
+.nm {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.err {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  padding: 2px 7px;
+  border-radius: var(--kern-r-md);
+  background: var(--kern-danger-tint);
+  color: var(--kern-danger);
+  font-size: 12px;
+  cursor: help;
+}
+.muted {
+  color: var(--kern-ink-450);
+}
+</style>

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

@@ -0,0 +1,97 @@
+<script lang="ts">
+import { formatDate, formatDateTime } from '@kernhq/ui'
+import type { PropertyConfig } from '../../../contract/index.js'
+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.
+ */
+interface Props {
+  value: unknown
+  name: string
+  config: PropertyConfig
+  editable: boolean
+  reason?: string
+  onchange: (value: unknown) => void
+}
+const { value, name, config, editable, reason, onchange }: Props = $props()
+
+const withTime = $derived(config.includeTime === true)
+const iso = $derived(typeof value === 'string' && value !== '' ? value : null)
+
+/** `datetime-local` wants `YYYY-MM-DDTHH:mm` in local time; `date` wants `YYYY-MM-DD`. */
+const fieldValue = $derived.by(() => {
+  if (!iso) return ''
+  const at = new Date(iso)
+  if (Number.isNaN(at.getTime())) return ''
+  const pad = (n: number) => String(n).padStart(2, '0')
+  const day = `${at.getFullYear()}-${pad(at.getMonth() + 1)}-${pad(at.getDate())}`
+  return withTime ? `${day}T${pad(at.getHours())}:${pad(at.getMinutes())}` : day
+})
+
+const shown = $derived(iso ? (withTime ? formatDateTime(iso) : formatDate(iso)) : '')
+
+const commit = (next: string) => {
+  if (next === '') {
+    if (iso) onchange(null)
+    return
+  }
+  const at = new Date(next)
+  if (Number.isNaN(at.getTime())) return
+  onchange(at.toISOString())
+}
+</script>
+
+{#if editable}
+  <input
+    class="cell-input"
+    type={withTime ? 'datetime-local' : 'date'}
+    value={fieldValue}
+    aria-label={name}
+    onchange={(e) => commit(e.currentTarget.value)}
+  />
+{:else}
+  <span class="cell-static" title={reason}>
+    {#if shown}{shown}{:else}<span class="muted">{t('db_cell_empty')}</span>{/if}
+  </span>
+{/if}
+
+<style>
+.cell-input {
+  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;
+}
+.cell-input:hover {
+  background: var(--kern-surface-active);
+}
+.cell-input:focus {
+  border-color: var(--kern-border);
+  background: var(--kern-surface-raised);
+  outline: none;
+}
+.cell-static {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: default;
+  font-size: 13px;
+}
+.muted {
+  color: var(--kern-ink-450);
+}
+</style>

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

@@ -0,0 +1,143 @@
+<script lang="ts">
+import { Icon } from '@kernhq/ui'
+import type { PropertyType } from '../../../contract/index.js'
+import { t } from '../../i18n.js'
+
+/**
+ * url, email and phone.
+ *
+ * The trailing action is **hidden** when the cell is empty rather than disabled: a control that
+ * cannot do anything and does not say why is worse than one that is not there, and "open this
+ * link" has no meaning without a link.
+ */
+interface Props {
+  value: unknown
+  name: string
+  type: PropertyType
+  editable: boolean
+  reason?: string
+  onchange: (value: unknown) => void
+}
+const { value, name, type, editable, reason, onchange }: Props = $props()
+
+const text = $derived(value == null ? '' : String(value))
+
+const href = $derived.by(() => {
+  const raw = text.trim()
+  if (!raw) return null
+  if (type === 'email') return `mailto:${raw}`
+  if (type === 'phone') return `tel:${raw.replace(/\s+/g, '')}`
+  return /^[a-z][a-z0-9+.-]*:/i.test(raw) ? raw : `https://${raw}`
+})
+
+const icon = $derived(type === 'email' ? 'mail' : type === 'phone' ? 'smartphone' : 'external-link')
+const actionLabel = $derived(
+  type === 'email' ? t('db_send_email') : type === 'phone' ? t('db_call') : t('db_open_link'),
+)
+const placeholder = $derived(type === 'url' ? 'https://' : t('db_cell_empty'))
+
+const commit = (next: string) => {
+  if (next === text) return
+  onchange(next === '' ? null : next)
+}
+</script>
+
+<span class="link-cell">
+  {#if editable}
+    <input
+      class="cell-input"
+      type="text"
+      inputmode={type === 'email' ? 'email' : type === 'phone' ? 'tel' : 'url'}
+      value={text}
+      aria-label={name}
+      {placeholder}
+      onblur={(e) => commit(e.currentTarget.value)}
+      onkeydown={(e) => {
+        if (e.key === 'Enter') e.currentTarget.blur()
+        if (e.key === 'Escape') {
+          e.currentTarget.value = text
+          e.currentTarget.blur()
+        }
+      }}
+    />
+  {:else}
+    <span class="cell-static" title={reason}>
+      {#if text}{text}{:else}<span class="muted">{t('db_cell_empty')}</span>{/if}
+    </span>
+  {/if}
+  {#if href}
+    <a
+      class="go"
+      {href}
+      target={type === 'url' ? '_blank' : undefined}
+      rel={type === 'url' ? 'noreferrer noopener' : undefined}
+      aria-label={actionLabel}
+      title={actionLabel}
+    >
+      <Icon name={icon} size={13} strokeWidth={1.7} />
+    </a>
+  {/if}
+</span>
+
+<style>
+.link-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  width: 100%;
+}
+.cell-input {
+  flex: 1;
+  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;
+}
+.cell-input:hover {
+  background: var(--kern-surface-active);
+}
+.cell-input:focus {
+  border-color: var(--kern-border);
+  background: var(--kern-surface-raised);
+  outline: none;
+}
+.cell-input::placeholder {
+  color: var(--kern-ink-350);
+}
+.cell-static {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: default;
+  font-size: 13px;
+}
+/*
+ * 26px square with the icon centred: under 24 it fails the target-size rule the ux sweep checks,
+ * and it sits next to an input, so the spacing exception does not apply.
+ */
+.go {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--kern-r-sm);
+  color: var(--kern-ink-450);
+}
+.go:hover {
+  background: var(--kern-surface-active);
+  color: var(--kern-ink-900);
+}
+.muted {
+  color: var(--kern-ink-450);
+}
+</style>

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

@@ -0,0 +1,131 @@
+<script lang="ts">
+import { messageLocale } from '@kernhq/ui'
+import type { PropertyConfig } from '../../../contract/index.js'
+import { t } from '../../i18n.js'
+
+/**
+ * A number, drawn formatted and edited raw.
+ *
+ * Formatting while somebody is typing fights them — a thousands separator inserted mid-number moves
+ * the caret — so the field carries the plain value whenever it has focus and the formatted one the
+ * rest of the time. `Intl.NumberFormat` for the interface locale, because a percentage rendered as
+ * "12%" beside Persian digits is the one untranslated thing on the screen.
+ */
+interface Props {
+  value: unknown
+  name: string
+  config: PropertyConfig
+  editable: boolean
+  reason?: string
+  onchange: (value: unknown) => void
+}
+const { value, name, config, editable, reason, onchange }: Props = $props()
+
+let focused = $state(false)
+
+const raw = $derived(typeof value === 'number' ? value : value == null || value === '' ? null : Number(value))
+const plain = $derived(raw === null || Number.isNaN(raw) ? '' : String(raw))
+
+const formatted = $derived.by(() => {
+  if (raw === null || Number.isNaN(raw)) return ''
+  const options: Intl.NumberFormatOptions = {}
+  if (config.precision !== undefined) {
+    options.minimumFractionDigits = config.precision
+    options.maximumFractionDigits = config.precision
+  }
+  if (config.format === 'percent') options.style = 'percent'
+  if (config.format === 'currency') {
+    options.style = 'currency'
+    options.currency = 'USD'
+  }
+  try {
+    // `percent` multiplies by 100, so a column storing 0.2 reads "20%" — which is what a percentage
+    // column means. A column storing 20 and formatted as a percentage is the author's own choice.
+    return new Intl.NumberFormat(messageLocale(), options).format(raw)
+  } catch {
+    return String(raw)
+  }
+})
+
+const commit = (next: string) => {
+  const trimmed = next.trim()
+  if (trimmed === '') {
+    if (raw !== null) onchange(null)
+    return
+  }
+  const parsed = Number(trimmed)
+  if (Number.isNaN(parsed) || parsed === raw) return
+  onchange(parsed)
+}
+</script>
+
+{#if editable}
+  <input
+    class="cell-input num"
+    inputmode="decimal"
+    value={focused ? plain : formatted}
+    aria-label={name}
+    placeholder={t('db_cell_empty')}
+    onfocus={(e) => {
+      focused = true
+      e.currentTarget.value = plain
+    }}
+    onblur={(e) => {
+      focused = false
+      commit(e.currentTarget.value)
+    }}
+    onkeydown={(e) => {
+      if (e.key === 'Enter') e.currentTarget.blur()
+      if (e.key === 'Escape') {
+        e.currentTarget.value = plain
+        e.currentTarget.blur()
+      }
+    }}
+  />
+{:else}
+  <span class="cell-static num" title={reason}>
+    {#if formatted}{formatted}{:else}<span class="muted">{t('db_cell_empty')}</span>{/if}
+  </span>
+{/if}
+
+<style>
+.cell-input {
+  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;
+}
+.cell-input:hover {
+  background: var(--kern-surface-active);
+}
+.cell-input:focus {
+  border-color: var(--kern-border);
+  background: var(--kern-surface-raised);
+  outline: none;
+}
+.cell-input::placeholder {
+  color: var(--kern-ink-350);
+}
+/* A number is read by comparing it with the one above; a tabular figure is what makes that work. */
+.num {
+  font-variant-numeric: tabular-nums;
+}
+.cell-static {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: default;
+  font-size: 13px;
+}
+.muted {
+  color: var(--kern-ink-450);
+}
+</style>