@svgrid/enterprise 3.1.7 → 3.1.9

package/dist/fields/RecordView.svelte

@@ -0,0 +1,310 @@
+<script lang="ts">
+  /**
+   * A row opened as a record (`expandRows`, Space on a cell, a gallery card,
+   * a linked record's chip): every field of the row, its name with the
+   * type's icon over its value, the value drawn as the cell draws it. A
+   * click on an editable value opens the same editor the cell uses; a value
+   * is written through the grid's own edit path, so undo, validation,
+   * onCellValueChange and "last modified" fields behave as in the cell.
+   * Fields hidden in the grid are listed under the others, folded. Beside
+   * the fields, the record's activity: its changes and its comments.
+   * Previous and next step through the rows in the grid's order.
+   */
+  import { onMount, untrack } from 'svelte'
+  import { getRecordRequest, type RecordRequest } from './editor-request.svelte'
+  import { SvModal } from '@svgrid/grid'
+  import FieldInput from './FieldInput.svelte'
+  import { getFieldType } from './registry.svelte'
+  import { cellText, fieldColumns, primaryIdOf, type FieldColumn } from './grid-access'
+  import { addComment, changesOf, commentsOf, timeAgo } from './activity.svelte'
+  import { findFieldUser } from './sources.svelte'
+
+  let {
+    ctrl,
+    rowId,
+    editPrimary = false,
+    focus,
+    onClose,
+  }: {
+    ctrl: any
+    rowId: string
+    editPrimary?: boolean
+    /** 'comment': open with the comment box focused (also read from the open request). */
+    focus?: 'comment'
+    onClose: () => void
+  } = $props()
+
+  type Col = { id: string; columnDef: Record<string, any> }
+  type Row = { id: string; original: unknown; getCellValueByColumnId: (id: string) => unknown }
+
+  // svelte-ignore state_referenced_locally
+  let current = $state(rowId)
+  let open = $state(true)
+  let editing = $state<string | null>(null)
+  let showHidden = $state(false)
+  let comment = $state('')
+
+  const rows = $derived((ctrl.allRows ?? []) as Row[])
+  const index = $derived(rows.findIndex((r) => r.id === current))
+  const row = $derived(index >= 0 ? rows[index]! : null)
+  // Where the record was last seen. An edit can take it out of the view (a
+  // filter it no longer matches); Previous and Next then go on from there:
+  // the row that followed it now sits at that position.
+  let lastIndex = 0
+  const at = $derived.by(() => {
+    if (index >= 0) lastIndex = index
+    return lastIndex
+  })
+  // Both read `at` on every change of `index`, so it never misses a position.
+  const canPrev = $derived(at > 0 && rows.length > 0)
+  const canNext = $derived(at < rows.length - (index >= 0 ? 1 : 0))
+  const columns = $derived(
+    ((ctrl.allColumns ?? []) as Col[]).filter((c) => !c.id.startsWith('__') && (c.columnDef.field != null || c.columnDef.fieldFn != null)),
+  )
+  // Fields the grid hides: shown here, read-only (an edit goes through the grid's cells).
+  const hidden = $derived.by<Col[]>(() => {
+    const shownIds = new Set(columns.map((c) => c.id))
+    return fieldColumns(ctrl)
+      .filter((c) => !shownIds.has(c.id))
+      .map((c) => ({ id: c.id, columnDef: c.def }))
+  })
+
+  // Through the grid's edit overlay, as the cells read it: an edit writes
+  // there (and into the row object), so a value changed here or in the grid
+  // shows at once.
+  function valueOf(c: Col): unknown {
+    if (!row) return undefined
+    const base = c.columnDef.fieldFn ? c.columnDef.fieldFn(row.original) : (row.original as Record<string, unknown>)?.[c.columnDef.field]
+    return ctrl.getCellDisplayValue(row.id, c.id, columns.includes(c) ? row.getCellValueByColumnId(c.id) : base)
+  }
+  const asField = (c: Col): FieldColumn => ({ id: c.id, field: String(c.columnDef.field ?? c.id), header: label(c), fieldType: c.columnDef.fieldType, def: c.columnDef, visible: true })
+  // The record's name: the primary field, else its first text field, else the first field.
+  const primaryId = $derived(primaryIdOf(ctrl))
+  const primary = $derived(columns.find((c) => c.id === primaryId) ?? columns.find((c) => c.columnDef.fieldType === 'text' || (!c.columnDef.fieldType && c.columnDef.editorType == null)) ?? columns[0])
+  const title = $derived(row && primary ? cellText(asField(primary), valueOf(primary), row) || 'Untitled' : 'Record')
+  function label(c: Col): string {
+    return typeof c.columnDef.header === 'string' ? c.columnDef.header : c.id
+  }
+  const iconOf = (c: Col) => (c.columnDef.fieldType ? getFieldType(c.columnDef.fieldType)?.icon : undefined)
+  function editable(c: Col): boolean {
+    if (!row || !ctrl.editingEnabled) return false
+    const ci = (ctrl.allColumns as Col[]).findIndex((x) => x.id === c.id)
+    if (ci < 0) return false
+    return ctrl.isCellEditableAt ? !!ctrl.isCellEditableAt(index, ci) : c.columnDef.editable !== false
+  }
+
+  // A record just made opens with its name being typed.
+  onMount(() => {
+    if (editPrimary && primary && editable(primary)) editing = primary.id
+  })
+
+  // "Comment" in a record or card menu opens the record with `focus: 'comment'`:
+  // the comment box takes focus, on open or when the request comes later.
+  let commentBox = $state<HTMLTextAreaElement | null>(null)
+  const commentFocusFor = (r: RecordRequest | null) => r?.focus === 'comment' && r.ctrl === ctrl
+  const initialFocus = () => (focus === 'comment' || commentFocusFor(getRecordRequest()) ? commentBox : null)
+  $effect(() => {
+    const r = getRecordRequest()
+    if (!commentFocusFor(r)) return
+    untrack(() => {
+      if (r!.rowId !== current) current = r!.rowId
+      queueMicrotask(() => commentBox?.focus())
+    })
+  })
+
+  /** Write a value the way an edit in the cell does. */
+  function commit(c: Col, v: unknown) {
+    editing = null
+    if (!row || v === undefined) return
+    const at = (ctrl.allRows as Row[]).findIndex((r) => r.id === current)
+    if (at < 0 || !ctrl.startEditing(at, c.id)) return
+    ctrl.updateEditingCellValue(v)
+    ctrl.saveEditingCell()
+  }
+  /** Tab from a field: the next (or previous) editable one. */
+  function editBeside(c: Col, dir: 1 | -1) {
+    const at = columns.findIndex((x) => x.id === c.id)
+    for (let i = at + dir; i >= 0 && i < columns.length; i += dir) {
+      const next = columns[i]!
+      if (editable(next) && next.columnDef.editorType !== 'checkbox') {
+        editing = next.id
+        return
+      }
+    }
+  }
+  function go(by: 1 | -1) {
+    const next = index >= 0 ? rows[index + by] : rows[Math.min(at, rows.length) - (by < 0 ? 1 : 0)]
+    if (!next) return
+    editing = null
+    current = next.id
+  }
+
+  // ---- Activity ---------------------------------------------------------------
+  const allCols = $derived([...columns, ...hidden])
+  const feed = $derived.by(() => {
+    if (!row) return []
+    const edits = changesOf(ctrl, row.id).map((ch) => {
+      const c = allCols.find((x) => x.id === ch.columnId)
+      return { key: `e${ch.at}${ch.columnId}`, at: ch.at, by: ch.by, automation: ch.automation, kind: 'edit' as const, field: c ? label(c) : ch.columnId, text: c ? cellText(asField(c), ch.value, row) : String(ch.value ?? '') }
+    })
+    const notes = commentsOf(ctrl, row.id).map((n) => ({ key: n.id, at: n.at, by: n.by, automation: undefined, kind: 'comment' as const, field: '', text: n.text }))
+    return [...edits, ...notes].sort((a, b) => a.at - b.at)
+  })
+  const who = (item: { by?: string; automation?: string }) =>
+    item.automation ? `Automation: ${item.automation}` : item.by ? (findFieldUser(item.by)?.name ?? 'Someone') : 'You'
+  function send() {
+    if (!row || !comment.trim()) return
+    addComment(ctrl, row.id, comment)
+    comment = ''
+  }
+</script>
+
+{#snippet field(c: Col, canEdit: boolean)}
+  <div class="sv-frv-field">
+    <div class="sv-frv-label">
+      {#if iconOf(c)}<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d={iconOf(c)} fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" /></svg>{/if}
+      <span>{label(c)}</span>
+      {#if !canEdit}<span class="sv-frv-ro">{columns.includes(c) ? 'read-only' : 'hidden in the grid'}</span>{/if}
+    </div>
+    <FieldInput
+      {ctrl}
+      column={c}
+      value={valueOf(c)}
+      row={row ? { id: row.id, original: row.original } : null}
+      rowId={row?.id ?? ''}
+      label={label(c)}
+      editable={canEdit}
+      editing={editing === c.id}
+      onStart={() => (editing = c.id)}
+      onStop={() => (editing = null)}
+      onCommit={(v) => commit(c, v)}
+      onTab={(dir) => editBeside(c, dir)}
+    />
+  </div>
+{/snippet}
+
+<SvModal bind:open {title} width={940} {onClose} {initialFocus}>
+  {#if !row}
+    <p class="sv-frv-gone">This row is not in the grid's view any more.</p>
+  {:else}
+    <div class="sv-frv-layout">
+      <div class="sv-frv-fields">
+        {#each columns as c (c.id)}
+          {@render field(c, editable(c))}
+        {/each}
+        {#if hidden.length}
+          <button type="button" class="sv-frv-hidden-toggle" aria-expanded={showHidden} onclick={() => (showHidden = !showHidden)}>
+            {showHidden ? 'Hide' : 'Show'} {hidden.length} hidden field{hidden.length === 1 ? '' : 's'}
+          </button>
+          {#if showHidden}
+            {#each hidden as c (c.id)}
+              {@render field(c, false)}
+            {/each}
+          {/if}
+        {/if}
+      </div>
+      <aside class="sv-frv-activity" aria-label="Activity">
+        <h3 class="sv-frv-activity-title">Activity</h3>
+        <ol class="sv-frv-feed">
+          {#each feed as item (item.key)}
+            <li class="sv-frv-item" class:is-comment={item.kind === 'comment'}>
+              <div class="sv-frv-item-head"><strong>{who(item)}</strong>{item.kind === 'edit' ? ` changed ${item.field}` : ''}<span class="sv-frv-when">{timeAgo(item.at)}</span></div>
+              <div class="sv-frv-item-body">{item.text || (item.kind === 'edit' ? '(cleared)' : '')}</div>
+            </li>
+          {:else}
+            <li class="sv-frv-none">No changes or comments yet.</li>
+          {/each}
+        </ol>
+        <form
+          class="sv-frv-comment"
+          onsubmit={(e) => {
+            e.preventDefault()
+            send()
+          }}
+        >
+          <textarea
+            bind:this={commentBox}
+            rows="2"
+            placeholder="Leave a comment"
+            aria-label="Leave a comment"
+            bind:value={comment}
+            onkeydown={(e) => {
+              if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                e.preventDefault()
+                send()
+              }
+            }}
+          ></textarea>
+          <button type="submit" class="sv-frv-btn" disabled={!comment.trim()}>Comment</button>
+        </form>
+      </aside>
+    </div>
+  {/if}
+  {#snippet footer()}
+    <div class="sv-frv-footer">
+      <button type="button" class="sv-frv-btn" disabled={!canPrev} onclick={() => go(-1)} aria-label="Previous record">
+        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 15l6-6 6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
+      </button>
+      <button type="button" class="sv-frv-btn" disabled={!canNext} onclick={() => go(1)} aria-label="Next record">
+        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
+      </button>
+      <span class="sv-frv-pos">{index >= 0 ? `${index + 1} of ${rows.length}` : `Not in view (${rows.length} records)`}</span>
+      <!-- The modal tells onClose only when it closes itself (X, Escape, backdrop). -->
+      <button
+        type="button"
+        class="sv-frv-btn is-primary"
+        onclick={() => {
+          open = false
+          onClose()
+        }}>Close</button
+      >
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .sv-frv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
+  .sv-frv-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+  .sv-frv-field { display: flex; flex-direction: column; gap: 6px; }
+  .sv-frv-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sg-muted, #64748b); }
+  .sv-frv-ro { font-weight: 400; font-size: 11px; opacity: 0.8; }
+  .sv-frv-hidden-toggle {
+    align-self: flex-start; border: 0; padding: 2px 0; background: none; font: inherit; font-size: 13px;
+    color: var(--sg-accent, #2563eb); cursor: pointer;
+  }
+  .sv-frv-activity {
+    position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; max-height: 70vh;
+    padding-inline-start: 16px; border-inline-start: 1px solid var(--sg-border, #e2e8f0);
+  }
+  .sv-frv-activity-title { margin: 0; font-size: 13px; font-weight: 600; }
+  .sv-frv-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; overflow: auto; min-height: 60px; }
+  .sv-frv-item { font-size: 12px; }
+  .sv-frv-item-head { color: var(--sg-muted, #64748b); }
+  .sv-frv-item-head strong { color: var(--sg-fg, #0f172a); font-weight: 600; }
+  .sv-frv-when { margin-inline-start: 6px; opacity: 0.8; }
+  .sv-frv-item-body { margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
+  .sv-frv-item.is-comment .sv-frv-item-body {
+    padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--sg-fg, #0f172a) 5%, transparent);
+  }
+  .sv-frv-none { color: var(--sg-muted, #64748b); font-size: 12px; }
+  .sv-frv-comment { display: grid; gap: 6px; }
+  .sv-frv-comment textarea {
+    width: 100%; box-sizing: border-box; padding: 6px 8px; font: inherit; font-size: 13px; resize: vertical;
+    color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0); border-radius: 6px;
+  }
+  .sv-frv-comment .sv-frv-btn { justify-self: end; }
+  .sv-frv-gone { color: var(--sg-muted, #64748b); }
+  .sv-frv-footer { display: flex; align-items: center; gap: 6px; width: 100%; }
+  .sv-frv-pos { flex: 1; font-size: 13px; color: var(--sg-muted, #64748b); }
+  .sv-frv-btn {
+    display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 12px;
+    font: inherit; font-size: 13px; cursor: pointer; border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 6px);
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+  }
+  .sv-frv-btn:disabled { opacity: 0.4; cursor: default; }
+  .sv-frv-btn.is-primary { background: var(--sg-fg, #0f172a); color: var(--sg-bg, #fff); border-color: var(--sg-fg, #0f172a); }
+  @media (max-width: 760px) {
+    .sv-frv-layout { grid-template-columns: minmax(0, 1fr); }
+    .sv-frv-activity { position: static; padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--sg-border, #e2e8f0); padding-top: 12px; }
+  }
+</style>

package/dist/fields/RecordView.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    ctrl: any;
+    rowId: string;
+    editPrimary?: boolean;
+    /** 'comment': open with the comment box focused (also read from the open request). */
+    focus?: 'comment';
+    onClose: () => void;
+};
+declare const RecordView: import("svelte").Component<$$ComponentProps, {}, "">;
+type RecordView = ReturnType<typeof RecordView>;
+export default RecordView;

package/dist/fields/RichTextCell.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  /** Long-text cells with rich text on: the formatted lines, one after another, clipped to the row. */
+  import type { FieldCellProps } from './registry.svelte'
+  import { parseRichText } from './rich-text'
+
+  let { value }: FieldCellProps = $props()
+  const lines = $derived(parseRichText(value))
+</script>
+
+<span class="sv-frx">
+  {#each lines as line, i (i)}
+    {#if i > 0}<span class="sv-frx-sep" aria-hidden="true"> </span>{/if}
+    {#if line.bullet}<span class="sv-frx-bullet" aria-hidden="true">•</span>{/if}
+    {#each line.parts as p, j (j)}
+      {#if p.kind === 'b'}<strong>{p.text}</strong>
+      {:else if p.kind === 'i'}<em>{p.text}</em>
+      {:else if p.kind === 'code'}<code>{p.text}</code>
+      {:else if p.kind === 'a'}<a href={p.href} target="_blank" rel="noopener noreferrer" onpointerdown={(e) => e.stopPropagation()}>{p.text}</a>
+      {:else}{p.text}{/if}
+    {/each}
+  {/each}
+</span>
+
+<style>
+  .sv-frx { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-frx code { font-size: 0.9em; padding: 0 3px; border-radius: 3px; background: var(--sg-header-bg, #f8fafc); }
+  .sv-frx a { color: inherit; text-decoration: underline; text-decoration-color: var(--sg-muted, #94a3b8); }
+  .sv-frx-bullet { margin-inline-end: 4px; color: var(--sg-muted, #64748b); }
+  .sv-frx-sep { margin-inline: 4px; }
+</style>

package/dist/fields/RichTextCell.svelte.d.ts

@@ -0,0 +1,5 @@
+/** Long-text cells with rich text on: the formatted lines, one after another, clipped to the row. */
+import type { FieldCellProps } from './registry.svelte.js';
+declare const RichTextCell: import("svelte").Component<FieldCellProps, {}, "">;
+type RichTextCell = ReturnType<typeof RichTextCell>;
+export default RichTextCell;

package/dist/fields/RowAdder.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  /**
+   * The "+ Add row" line after the last body row (`rowAdder` prop). The grid
+   * renders it through registerGridExtension's `bodyEnd` slot, inside the
+   * body, so it scrolls with the rows and sits under the last one.
+   *
+   * A click appends a row (with `rowAdder.defaults()`), scrolls to it and
+   * starts editing its first editable cell, then fires `onRowAdd` so the app
+   * can persist the row.
+   */
+  import { tick } from 'svelte'
+  import { newRowValues } from './field-ops'
+
+  type Config = { label?: string; defaults?: () => Record<string, unknown> }
+  let { ctrl, foot = false }: { ctrl: any; foot?: boolean } = $props()
+
+  // With a summary row the line goes under it (`foot`), so the sums sit right after the records.
+  const config = $derived<Config | null>(
+    ctrl.props.rowAdder && foot === !!ctrl.rowSummariesEnabled ? (typeof ctrl.props.rowAdder === 'object' ? ctrl.props.rowAdder : {}) : null,
+  )
+  const label = $derived(config?.label ?? 'Add row')
+  const span = $derived((ctrl.allColumns?.length ?? 0) + 3)
+
+  async function add() {
+    const api = ctrl.buildApi?.()
+    if (!api || !config) return
+    // Field defaults, the next autonumber, the created time; the prop's own defaults win.
+    const row: Record<string, unknown> = newRowValues(ctrl, config.defaults?.() ?? {})
+    api.addRow(row, 'bottom')
+    await tick()
+    // Sorting or grouping can put the new row anywhere; find it by identity.
+    const index = (ctrl.allRows as Array<{ original: unknown }>).findIndex((r) => r.original === row)
+    if (index >= 0) {
+      api.scrollToRow(index)
+      await tick()
+      for (const column of ctrl.allColumns as Array<{ id: string }>) {
+        if (api.startEditing(index, column.id)) break
+      }
+    }
+    ctrl.props.onRowAdd?.({ row })
+  }
+</script>
+
+{#if config}
+  <tr class="sv-grid-row sv-field-row-adder" class:is-foot={foot}>
+    <!-- overflow and flex inline, over the grid's cell rules: a clipping cell is its own
+         scroll box, and the sticky button would not stay at the left edge. -->
+    <td class="sv-grid-cell sv-field-row-adder-cell" colspan={span} style="overflow: visible; flex: 1 1 auto;">
+      <button type="button" class="sv-field-row-adder-button" onclick={add}>
+        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+          <path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        </svg>
+        {label}
+      </button>
+    </td>
+  </tr>
+{/if}
+
+<style>
+  .sv-field-row-adder-cell {
+    flex: 1 1 auto;
+    padding: 0;
+    border-bottom: 1px solid var(--sg-border, #e2e8f0);
+  }
+  .sv-field-row-adder:hover > .sv-field-row-adder-cell { background: var(--sg-row-hover-bg, #f8fafc); }
+  /* The column headers' ground, as the summary row has: the grid's chrome, not
+     a record. In the footer the summary row draws the line between them. */
+  .sv-field-row-adder,
+  .sv-field-row-adder > .sv-field-row-adder-cell { background: var(--sg-summary-bg, var(--sg-header-bg, #f5f7fb)); }
+  .sv-field-row-adder.is-foot > .sv-field-row-adder-cell { border-bottom: 0; }
+  .sv-field-row-adder-button {
+    position: sticky;
+    inset-inline-start: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 100%;
+    min-height: 34px;
+    padding: 0 14px;
+    border: 0;
+    background: transparent;
+    color: var(--sg-muted, #64748b);
+    font: inherit;
+    /* A secondary action: the size of the summary text, not of the records. */
+    font-size: 13px;
+    cursor: pointer;
+  }
+  .sv-field-row-adder-button:hover { color: var(--sg-fg, #0f172a); }
+  .sv-field-row-adder-button:focus-visible {
+    outline: 2px solid var(--sg-accent, #2563eb);
+    outline-offset: -2px;
+  }
+</style>

package/dist/fields/RowAdder.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    ctrl: any;
+    foot?: boolean;
+};
+declare const RowAdder: import("svelte").Component<$$ComponentProps, {}, "">;
+type RowAdder = ReturnType<typeof RowAdder>;
+export default RowAdder;

package/dist/fields/RowHeader.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  /**
+   * The row-number cell with `expandRows`: the number, which on hover (or
+   * while the row is selected) turns into a checkbox that selects the row,
+   * and an expand button that opens the row as a record. A record with
+   * comments shows how many; a click opens it at its discussion.
+   */
+  import { openRecord } from './editor-request.svelte'
+  import { commentsOf } from './activity.svelte'
+
+  let { ctrl, row, rowIndex }: { ctrl: any; row: { id: string; original: unknown }; rowIndex: number } = $props()
+
+  const selected = $derived(!!ctrl.isRowSelected?.(row.id, row.original))
+  const comments = $derived(commentsOf(ctrl, row.id).length)
+</script>
+
+<span class="sv-frh" class:is-selected={selected} class:has-comments={comments > 0}>
+  <span class="sv-frh-num" aria-hidden="true">{rowIndex + 1}</span>
+  <button
+    type="button"
+    class="sv-frh-check"
+    role="checkbox"
+    aria-checked={selected}
+    aria-label={`Select row ${rowIndex + 1}`}
+    onclick={(e) => {
+      e.stopPropagation()
+      ctrl.toggleRowSelectionById(row.id, row.original)
+    }}
+  >
+    {#if selected}
+      <svg viewBox="0 0 24 24" width="12" height="12" aria-hidden="true"><path d="M5 12l5 5 9-10" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /></svg>
+    {/if}
+  </button>
+  {#if comments}
+    <button
+      type="button"
+      class="sv-frh-comments"
+      aria-label={`${comments} ${comments === 1 ? 'comment' : 'comments'} on row ${rowIndex + 1}`}
+      title={`${comments} ${comments === 1 ? 'comment' : 'comments'}`}
+      onclick={(e) => {
+        e.stopPropagation()
+        openRecord({ ctrl, rowId: row.id, focus: 'comment' })
+      }}
+    >
+      <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true"><path d="M2 3h12v8H8l-3 2v-2H2z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" /></svg>
+      {comments}
+    </button>
+  {/if}
+  <button
+    type="button"
+    class="sv-frh-expand"
+    aria-label={`Expand row ${rowIndex + 1}`}
+    title="Expand row"
+    onclick={(e) => {
+      e.stopPropagation()
+      openRecord({ ctrl, rowId: row.id })
+    }}
+  >
+    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
+  </button>
+</span>
+
+<style>
+  .sv-frh { display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 4px 0 8px; box-sizing: border-box; }
+  .sv-frh-num { flex: 1; min-width: 0; text-align: center; color: var(--sg-muted, #64748b); font-variant-numeric: tabular-nums; }
+  .sv-frh-check {
+    display: none; flex: none; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0;
+    border: 1.5px solid var(--sg-border, #cbd5e1); border-radius: 4px; background: var(--sg-bg, #fff); color: var(--sg-bg, #fff); cursor: pointer;
+  }
+  .sv-frh-check[aria-checked='true'] { border-color: var(--sg-accent, #2563eb); background: var(--sg-accent, #2563eb); }
+  .sv-frh-expand {
+    display: inline-flex; visibility: hidden; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0;
+    margin-inline-start: auto; border: 0; border-radius: 4px; background: none; color: var(--sg-muted, #64748b); cursor: pointer;
+  }
+  .sv-frh-comments {
+    display: inline-flex; flex: none; align-items: center; gap: 2px; height: 18px; padding: 0 4px; border: 0; border-radius: 9px;
+    background: color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent); color: var(--sg-fg, #0f172a);
+    font: inherit; font-size: 11px; font-variant-numeric: tabular-nums; cursor: pointer;
+  }
+  .sv-frh-comments:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 16%, transparent); }
+  .sv-frh-expand:hover { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+  /* Hover, keyboard focus or a selected row: the checkbox takes the number's place. */
+  /* A record with comments keeps its count in the expand button's place: the
+     gutter has no room for both, and the count opens the same record, at its
+     discussion. */
+  .sv-frh.has-comments .sv-frh-expand { display: none; }
+  /* The checkbox and the count side by side: into the cell's start padding, gaps tightened. */
+  :global(.sv-grid-row:hover) .sv-frh.has-comments,
+  .sv-frh.has-comments:focus-within,
+  .sv-frh.has-comments.is-selected { margin-inline-start: -10px; padding-inline-start: 4px; gap: 2px; }
+  :global(.sv-grid-row:hover) .sv-frh-num,
+  .sv-frh:focus-within .sv-frh-num,
+  .sv-frh.is-selected .sv-frh-num { display: none; }
+  :global(.sv-grid-row:hover) .sv-frh-check,
+  .sv-frh:focus-within .sv-frh-check,
+  .sv-frh.is-selected .sv-frh-check { display: inline-flex; }
+  :global(.sv-grid-row:hover) .sv-frh-expand,
+  .sv-frh:focus-within .sv-frh-expand { visibility: visible; }
+</style>

package/dist/fields/RowHeader.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    ctrl: any;
+    row: {
+        id: string;
+        original: unknown;
+    };
+    rowIndex: number;
+};
+declare const RowHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type RowHeader = ReturnType<typeof RowHeader>;
+export default RowHeader;

package/dist/fields/SelectCell.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  /**
+   * Single and multiple select cells: each choice as a pill filled with its
+   * option's color, the text dark or white for contrast. A value that is no
+   * longer one of the options keeps a plain gray pill, so it stays visible.
+   */
+  import type { FieldCellProps } from './registry.svelte'
+  import { textOn } from './palette'
+
+  type Option = { value: unknown; label?: string; color?: string }
+  let { value, props }: FieldCellProps<{ options?: Option[] }> = $props()
+
+  const byValue = $derived(new Map((props.options ?? []).map((o) => [String(o.value), o])))
+  const items = $derived(
+    (Array.isArray(value) ? value : value == null || value === '' ? [] : [value]).map((v) => {
+      const o = byValue.get(String(v))
+      return { key: String(v), label: o?.label ?? String(v), color: o?.color }
+    }),
+  )
+</script>
+
+<span class="sv-fsl">
+  {#each items as it (it.key)}
+    <span class="sv-fsl-pill" class:is-plain={!it.color} style:background={it.color} style:color={it.color ? textOn(it.color) : undefined}>{it.label}</span>
+  {/each}
+</span>
+
+<style>
+  .sv-fsl { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
+  .sv-fsl-pill {
+    flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 20px;
+  }
+  .sv-fsl-pill.is-plain { background: var(--sg-header-bg, #eef0f3); color: var(--sg-fg, #0f172a); border: 1px solid var(--sg-border, #e2e8f0); line-height: 18px; }
+</style>

package/dist/fields/SelectCell.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+   * Single and multiple select cells: each choice as a pill filled with its
+   * option's color, the text dark or white for contrast. A value that is no
+   * longer one of the options keeps a plain gray pill, so it stays visible.
+   */
+import type { FieldCellProps } from './registry.svelte.js';
+declare const SelectCell: import("svelte").Component<FieldCellProps<{
+    options?: {
+        value: unknown;
+        label?: string;
+        color?: string;
+    }[];
+}>, {}, "">;
+type SelectCell = ReturnType<typeof SelectCell>;
+export default SelectCell;