@svgrid/enterprise 3.1.8 → 3.1.9

package/dist/fields/FieldInput.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+  /**
+   * One field's value outside the grid (the expanded record, the form view):
+   * drawn as its cell draws it, and on a click the editor its cell uses (the
+   * number box, the select panel, the date picker...) or a plain box. A
+   * checkbox toggles at once. The parent writes the value (`onCommit`) and
+   * decides which field is being edited, so Tab can move between them.
+   */
+  import { SvDateTimePicker, getCellEditor, resolveEditorProps } from '@svgrid/grid'
+  import FieldCell from './FieldCell.svelte'
+  import { typeDrawsCell } from './registry.svelte'
+
+  type Col = { id: string; columnDef: Record<string, any> }
+  let {
+    ctrl,
+    column,
+    value,
+    row,
+    rowId = '',
+    label,
+    editable,
+    editing,
+    placeholder = 'Empty',
+    onStart,
+    onStop,
+    onCommit,
+    onTab,
+    addOptions = true,
+  }: {
+    ctrl: any
+    column: Col
+    value: unknown
+    /** The row the value belongs to (none in a form). */
+    row?: { id: string; original: unknown } | null
+    rowId?: string
+    label: string
+    editable: boolean
+    editing: boolean
+    placeholder?: string
+    onStart: () => void
+    onStop: () => void
+    onCommit: (value: unknown) => void
+    /** Tab or Shift+Tab out of the editor, after its value was committed. */
+    onTab?: (dir: 1 | -1) => void
+    /** False in a form: a select offers only the field's options, never "Add option". */
+    addOptions?: boolean
+  } = $props()
+
+  let draft: unknown = undefined
+  const reg = $derived(getCellEditor(String(column.columnDef.editorType ?? 'text')))
+  const drawsCell = $derived(!!column.columnDef.fieldType && column.columnDef.cell == null && typeDrawsCell(column.columnDef))
+  // Stars and a checkbox say what an empty value is; other cells would draw nothing.
+  const drawnEmpty = $derived(column.columnDef.fieldType === 'rating' || column.columnDef.fieldType === 'checkbox')
+  // An empty value shows the placeholder, not an empty drawing.
+  const blank = $derived(value == null || value === '' || (Array.isArray(value) && value.length === 0))
+  const text = $derived.by(() => {
+    const f = column.columnDef.formatter as ((x: { value: unknown; row: unknown; column: unknown }) => unknown) | undefined
+    // `{ id, original }`, the shape a grid row has: in a form, the draft with id ''.
+    if (f) return String(f({ value, row: row ?? null, column }) ?? '')
+    if (Array.isArray(value)) return value.join(', ')
+    return value == null ? '' : String(value)
+  })
+
+  function start() {
+    if (!editable) return
+    if (column.columnDef.editorType === 'checkbox') return onCommit(!value)
+    draft = value
+    onStart()
+  }
+  const commit = (v: unknown) => {
+    onStop()
+    if (v !== undefined) onCommit(v)
+  }
+  function editorProps(r: NonNullable<ReturnType<typeof getCellEditor>>) {
+    const props = resolveEditorProps(r, {
+      value,
+      rowId,
+      columnId: column.id,
+      columnDef: column.columnDef,
+      row: row?.original,
+      grid: ctrl,
+      typed: false,
+      inCell: false,
+      onChange: (v: unknown) => (draft = v),
+      onCommit: (v?: unknown) => commit(v === undefined ? draft : v),
+      onCancel: onStop,
+      onRequestClose: onStop,
+      onCommitAndMove: (v: unknown, dir: 1 | -1) => {
+        commit(v === undefined ? draft : v)
+        onTab?.(dir)
+      },
+      onCommitAndMoveDown: (v?: unknown) => commit(v === undefined ? draft : v),
+    })
+    // Editors that do not read it ignore it.
+    return addOptions ? props : { ...props, addOptions: false }
+  }
+  function plainKey(e: KeyboardEvent, multiline: boolean) {
+    const el = e.currentTarget as HTMLInputElement | HTMLTextAreaElement
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      e.stopPropagation()
+      onStop()
+    } else if (e.key === 'Enter' && (!multiline || e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      commit(el.value)
+    } else if (e.key === 'Tab') {
+      e.preventDefault()
+      commit(el.value)
+      onTab?.(e.shiftKey ? -1 : 1)
+    }
+  }
+  function focusOnMount(el: HTMLInputElement | HTMLTextAreaElement) {
+    queueMicrotask(() => {
+      el.focus()
+      el.select()
+    })
+  }
+  const blurCommit = (e: Event) => {
+    if (editing) commit((e.currentTarget as HTMLInputElement).value)
+  }
+</script>
+
+{#if editing}
+  <div class="sv-frv-box is-editing">
+    {#if reg}
+      <reg.component {...editorProps(reg)} />
+    {:else if column.columnDef.editorType === 'date' || column.columnDef.editorType === 'datetime'}
+      <SvDateTimePicker
+        value={value as string | number | Date | null}
+        formatString={column.columnDef.editorFormatString ?? (column.columnDef.editorType === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm')}
+        dropDownDisplayMode={column.columnDef.editorType === 'date' ? 'calendar' : 'both'}
+        autoOpen
+        block
+        onChange={(d) => (draft = d)}
+        onCommit={() => commit(draft)}
+        onCancel={onStop}
+      />
+    {:else if column.columnDef.editorType === 'textarea'}
+      <textarea class="sv-frv-input" rows="4" value={String(value ?? '')} use:focusOnMount onkeydown={(e) => plainKey(e, true)} onblur={blurCommit}></textarea>
+    {:else}
+      <input class="sv-frv-input" value={String(value ?? '')} use:focusOnMount onkeydown={(e) => plainKey(e, false)} onblur={blurCommit} />
+    {/if}
+  </div>
+{:else}
+  <!-- A box acting as a button, not a <button>: a cell drawn in it can hold
+       buttons of its own (a linked record's chip), and buttons do not nest. -->
+  <div
+    class="sv-frv-box"
+    class:is-readonly={!editable}
+    role="button"
+    tabindex={editable ? 0 : -1}
+    aria-disabled={!editable}
+    aria-label={`${label}: ${text || 'empty'}${editable ? ', edit' : ''}`}
+    onclick={start}
+    onkeydown={(e) => {
+      if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' ')) return
+      e.preventDefault()
+      start()
+    }}
+  >
+    {#if drawsCell && (!blank || drawnEmpty)}
+      <FieldCell {ctrl} row={row ?? { id: rowId, original: {} }} column={column as never} {value} />
+    {:else if text}
+      <span class="sv-frv-text">{text}</span>
+    {:else}
+      <span class="sv-frv-empty">{editable ? placeholder : ''}</span>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .sv-frv-box {
+    position: relative; display: flex; align-items: center; min-height: 36px; width: 100%; box-sizing: border-box;
+    padding: 0 10px; text-align: start; font: inherit; font-size: 14px; color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 6px); background: var(--sg-input-bg, var(--sg-bg, #fff));
+    cursor: pointer;
+  }
+  .sv-frv-box:hover:not(.is-readonly) { border-color: var(--sg-input-border, var(--sg-border, #cbd5e1)); }
+  .sv-frv-box:focus-visible { outline: 2px solid var(--sg-accent, #2563eb); outline-offset: 1px; }
+  .sv-frv-box.is-readonly { cursor: default; background: var(--sg-header-bg, #f8fafc); }
+  .sv-frv-box.is-editing { padding: 0; border-color: var(--sg-accent, #2563eb); cursor: auto; }
+  .sv-frv-text { white-space: pre-wrap; padding: 8px 0; }
+  .sv-frv-empty { color: var(--sg-muted, #94a3b8); font-size: 13px; }
+  .sv-frv-input {
+    width: 100%; box-sizing: border-box; min-height: 34px; padding: 8px 10px; border: 0; outline: none; resize: vertical;
+    font: inherit; font-size: 14px; background: none; color: var(--sg-fg, #0f172a);
+  }
+</style>

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

@@ -0,0 +1,29 @@
+type Col = {
+    id: string;
+    columnDef: Record<string, any>;
+};
+type $$ComponentProps = {
+    ctrl: any;
+    column: Col;
+    value: unknown;
+    /** The row the value belongs to (none in a form). */
+    row?: {
+        id: string;
+        original: unknown;
+    } | null;
+    rowId?: string;
+    label: string;
+    editable: boolean;
+    editing: boolean;
+    placeholder?: string;
+    onStart: () => void;
+    onStop: () => void;
+    onCommit: (value: unknown) => void;
+    /** Tab or Shift+Tab out of the editor, after its value was committed. */
+    onTab?: (dir: 1 | -1) => void;
+    /** False in a form: a select offers only the field's options, never "Add option". */
+    addOptions?: boolean;
+};
+declare const FieldInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldInput = ReturnType<typeof FieldInput>;
+export default FieldInput;

package/dist/fields/FieldsHeaderEnd.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  /**
+   * The last child of a grid's header row (registerGridExtension's `headerEnd`):
+   * the "+" cell of the `columnAdder` prop, and the host of this grid's field
+   * editor (opened by the "+" and the column-menu field actions) and record
+   * view (opened by a row header's expand button).
+   */
+  import { untrack } from 'svelte'
+  import FieldEditor from './FieldEditor.svelte'
+  import { primaryIdOf } from './grid-access'
+  import RecordView from './RecordView.svelte'
+  import LinkedRecordView from './LinkedRecordView.svelte'
+  import DeleteFieldConfirm from './DeleteFieldConfirm.svelte'
+  import DeleteRecordConfirm from './DeleteRecordConfirm.svelte'
+  import { askDeleteRecord, getDeleteRecordRequest } from './record-delete.svelte'
+  import LinkPreview from './LinkPreview.svelte'
+  import {
+    closeFieldEditor,
+    closeLinkedRecord,
+    closeRecord,
+    getFieldEditorRequest,
+    getDeleteFieldRequest,
+    askDeleteField,
+    getLinkPreview,
+    getLinkedRecords,
+    getRecordRequest,
+    openFieldEditor,
+  } from './editor-request.svelte'
+
+  let { ctrl }: { ctrl: any } = $props()
+
+  const request = $derived(getFieldEditorRequest())
+  const mine = $derived(request && request.ctrl === ctrl ? request : null)
+  const deleting = $derived.by(() => {
+    const d = getDeleteFieldRequest()
+    return d && d.ctrl === ctrl ? d : null
+  })
+  const adder = $derived(!!ctrl.props.columnAdder)
+  const record = $derived(getRecordRequest())
+  const myRecord = $derived(record && record.ctrl === ctrl ? record : null)
+  // Linked records opened from this grid's chips, stacked, and the chip preview.
+  const linked = $derived(getLinkedRecords().filter((r) => r.ctrl === ctrl))
+  const preview = $derived.by(() => {
+    const p = getLinkPreview()
+    return p && p.ctrl === ctrl ? p : null
+  })
+
+  // Rows drag into a new order (`rowDragManaged`) only while nothing sorts or
+  // groups them: in a sorted table the order is the sort's.
+  $effect(() => {
+    // Only a grid whose app turned dragging on (our override is set only then).
+    const overridden = 'rowDragManaged' in (ctrl.optionOverrides ?? {})
+    if (!overridden && ctrl.props.rowDragManaged !== true) return
+    void ctrl.gridStateVersion
+    const s = ctrl.grid?.getState?.() ?? {}
+    const ordered = (s.sorting?.length ?? 0) > 0 || (s.grouping?.length ?? 0) > 0
+    const want = ordered ? false : undefined
+    untrack(() => {
+      if (ctrl.optionOverrides?.rowDragManaged !== want) ctrl.buildApi?.().setOption('rowDragManaged', want)
+    })
+  })
+
+  // `primaryField`: first, pinned and shown, whatever the column menu or a
+  // restored view did.
+  const primary = $derived(primaryIdOf(ctrl))
+  $effect(() => {
+    if (!primary) return
+    const pin = ctrl.columnPinning as { left: string[]; right: string[] }
+    const hidden = !!ctrl.hiddenColumns[primary]
+    untrack(() => {
+      if (hidden) {
+        const next = { ...ctrl.hiddenColumns }
+        delete next[primary]
+        ctrl.hiddenColumns = next
+      }
+      if (pin.left[0] !== primary || pin.right.includes(primary)) {
+        ctrl.columnPinning = { left: [primary, ...pin.left.filter((id) => id !== primary)], right: pin.right.filter((id) => id !== primary) }
+      }
+    })
+  })
+</script>
+
+{#if adder}
+  <th class="sv-grid-column sv-field-column-adder" role="columnheader" aria-label="Add a field">
+    <button
+      type="button"
+      class="sv-field-column-adder-button"
+      aria-label="Add a field"
+      title="Add a field"
+      onclick={() => openFieldEditor({ ctrl, mode: 'add', index: 'end' })}
+    >
+      <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
+    </button>
+  </th>
+{/if}
+{#if mine}
+  {#key mine}
+    <FieldEditor {ctrl} mode={mine.mode} columnId={mine.columnId} index={mine.index} onClose={closeFieldEditor} />
+  {/key}
+{/if}
+{#if deleting}
+  {#key deleting}
+    <DeleteFieldConfirm {ctrl} columnId={deleting.columnId} onClose={() => askDeleteField(null)} />
+  {/key}
+{/if}
+{#if getDeleteRecordRequest()?.ctrl === ctrl}
+  {@const r = getDeleteRecordRequest()!}
+  {#key r}
+    <DeleteRecordConfirm {ctrl} api={r.api} row={r.row} onClose={() => askDeleteRecord(null)} />
+  {/key}
+{/if}
+{#if myRecord}
+  {#key myRecord}
+    <RecordView {ctrl} rowId={myRecord.rowId} editPrimary={myRecord.editPrimary} onClose={closeRecord} />
+  {/key}
+{/if}
+{#each linked as r, i (`${i}:${r.table}:${r.rowId}`)}
+  <LinkedRecordView {ctrl} table={r.table} rowId={r.rowId} onClose={closeLinkedRecord} />
+{/each}
+{#if preview}
+  <LinkPreview request={preview} />
+{/if}
+
+<style>
+  .sv-field-column-adder {
+    flex: none;
+    width: 44px;
+    min-width: 44px;
+    max-width: 44px;
+    padding: 0;
+  }
+  .sv-field-column-adder-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    min-height: 32px;
+    border: 0;
+    background: transparent;
+    color: var(--sg-muted, #64748b);
+    cursor: pointer;
+  }
+  .sv-field-column-adder-button:hover { color: var(--sg-fg, #0f172a); background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-field-column-adder-button:focus-visible { outline: 2px solid var(--sg-accent, #2563eb); outline-offset: -2px; }
+</style>

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

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

package/dist/fields/FootRowAdder.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  /** The "+ Add row" line in the grid's footer, under the summary row. */
+  import RowAdder from './RowAdder.svelte'
+
+  let { ctrl }: { ctrl: any } = $props()
+</script>
+
+<RowAdder {ctrl} foot />

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

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

package/dist/fields/GroupHeader.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  /**
+   * A group's header in a table grouped by fields: the field's name over its
+   * value, drawn as the cell draws it (a select's pill, a person's avatar),
+   * the number of records, the summaries the fields picked for this group
+   * ("Budget Sum $4,300"), and "+" to add a record that is already in it.
+   */
+  import { tick } from 'svelte'
+  import FieldCell from './FieldCell.svelte'
+  import { newRowValues } from './field-ops'
+  import { typeDrawsCell } from './registry.svelte'
+  import { groupLeaves, leafFilter } from './grid-access'
+
+  type Row = {
+    id: string
+    depth: number
+    original: Record<string, unknown>
+    subRows?: Row[]
+    getCanExpand?: () => boolean
+    getIsExpanded?: () => boolean
+    toggleExpanded?: () => void
+    __treeRow?: boolean
+  }
+  type Col = { id: string; columnDef: Record<string, any> }
+  let { ctrl, row, column, value }: { ctrl: any; row: Row; column: Col | undefined; value: unknown; count: number } = $props()
+
+  // The group's records the view's filter keeps (the grid groups before it filters).
+  const records = $derived(groupLeaves(row, leafFilter(ctrl)))
+  // The first record's own value: the group key is text, the record has the value (an array, a number).
+  const raw = $derived(column?.columnDef.field ? (records[0]?.original?.[column.columnDef.field] ?? value) : value)
+  const draws = $derived(!!column?.columnDef.fieldType && column.columnDef.cell == null && typeDrawsCell(column.columnDef))
+  const empty = $derived(raw == null || raw === '' || (Array.isArray(raw) && raw.length === 0))
+  const label = $derived(column ? (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id) : '')
+
+  // The fields with a summary chosen, computed over this group's records.
+  const summaries = $derived.by(() => {
+    const out: Array<{ id: string; label: string; text: string }> = []
+    for (const c of (ctrl.allColumns ?? []) as Col[]) {
+      const fn = c.columnDef.summary
+      if (typeof fn !== 'function' || c.id === column?.id) continue
+      const text = String(fn([], records.map((r) => r.original)) ?? '')
+      if (text) out.push({ id: c.id, label: typeof c.columnDef.header === 'string' ? c.columnDef.header : c.id, text })
+    }
+    return out
+  })
+
+  /** A new record with this group's values (and its parent groups'), as "+ Add row" makes one. */
+  async function add() {
+    const api = ctrl.buildApi?.()
+    const first = records[0]
+    if (!api || !first) return
+    const grouped: string[] = ctrl.grid?.getState?.().grouping ?? []
+    const values: Record<string, unknown> = {}
+    for (const id of grouped.slice(0, row.depth + 1)) {
+      const def = ((ctrl.allColumns ?? []) as Col[]).find((c) => c.id === id)?.columnDef ?? ((ctrl.internalColumns ?? []) as Array<Record<string, any>>).find((d) => String(d.id ?? d.field) === id)
+      const field = def?.field
+      if (field && !def?.fieldFn) values[field] = copy(first.original[field])
+    }
+    const cfg = ctrl.props.rowAdder
+    const defaults = cfg && typeof cfg === 'object' && typeof cfg.defaults === 'function' ? cfg.defaults() : {}
+    const next: Record<string, unknown> = newRowValues(ctrl, { ...defaults, ...values })
+    api.addRow(next, 'bottom')
+    // Open the group, so the new record shows.
+    if (!row.getIsExpanded?.()) row.toggleExpanded?.()
+    await tick()
+    const index = (ctrl.allRows as Array<{ original: unknown }>).findIndex((r) => r.original === next)
+    if (index >= 0) {
+      api.scrollToRow(index)
+      await tick()
+      for (const c of ctrl.allColumns as Array<{ id: string }>) {
+        if (api.startEditing(index, c.id)) break
+      }
+    }
+    ctrl.props.onRowAdd?.({ row: next })
+  }
+  /** A list value (tags) is copied, not shared with the record it came from. */
+  const copy = (v: unknown): unknown => (Array.isArray(v) ? [...v] : v)
+</script>
+
+<span class="sv-fgh">
+  <span class="sv-fgh-key">
+    <span class="sv-fgh-name">{label}</span>
+    <span class="sv-fgh-value">
+      {#if empty}
+        <span class="sv-fgh-empty">Empty</span>
+      {:else if draws && column}
+        <FieldCell {ctrl} row={{ id: row.id, original: records[0]?.original ?? {} }} {column} value={raw} />
+      {:else}
+        {column?.columnDef.formatter ? String(column.columnDef.formatter({ value: raw, row: records[0] ?? null, column }) ?? '') : String(raw)}
+      {/if}
+    </span>
+  </span>
+  <span class="sv-fgh-count">{records.length} {records.length === 1 ? 'record' : 'records'}</span>
+  {#each summaries as s (s.id)}
+    <span class="sv-fgh-sum"><span class="sv-fgh-sum-label">{s.label}</span>{s.text}</span>
+  {/each}
+  {#if ctrl.props.rowAdder && ctrl.editingEnabled}
+    <button
+      type="button"
+      class="sv-fgh-add"
+      aria-label={`Add a record to ${label} ${empty ? 'Empty' : String(value ?? '')}`}
+      title="Add a record to this group"
+      onclick={(e) => {
+        e.stopPropagation()
+        void 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>
+    </button>
+  {/if}
+</span>
+
+<style>
+  .sv-fgh { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
+  .sv-fgh-key { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; line-height: 1.2; min-width: 0; }
+  .sv-fgh-name { font-size: 11px; color: var(--sg-muted, #64748b); }
+  .sv-fgh-value { display: inline-flex; align-items: center; font-weight: 600; min-height: 20px; }
+  .sv-fgh-empty { color: var(--sg-muted, #64748b); font-weight: 400; font-style: italic; }
+  .sv-fgh-count { font-size: 12px; color: var(--sg-muted, #64748b); }
+  .sv-fgh-sum { font-size: 12px; font-variant-numeric: tabular-nums; }
+  .sv-fgh-sum-label { color: var(--sg-muted, #64748b); margin-inline-end: 4px; }
+  .sv-fgh-add {
+    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
+    border: 0; border-radius: 6px; background: none; color: var(--sg-muted, #64748b); cursor: pointer;
+  }
+  .sv-fgh-add:hover { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+</style>

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

@@ -0,0 +1,24 @@
+type Row = {
+    id: string;
+    depth: number;
+    original: Record<string, unknown>;
+    subRows?: Row[];
+    getCanExpand?: () => boolean;
+    getIsExpanded?: () => boolean;
+    toggleExpanded?: () => void;
+    __treeRow?: boolean;
+};
+type Col = {
+    id: string;
+    columnDef: Record<string, any>;
+};
+type $$ComponentProps = {
+    ctrl: any;
+    row: Row;
+    column: Col | undefined;
+    value: unknown;
+    count: number;
+};
+declare const GroupHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type GroupHeader = ReturnType<typeof GroupHeader>;
+export default GroupHeader;

package/dist/fields/LinkCell.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  /**
+   * URL, email and phone cells: the value as a link when it is a valid one of
+   * its kind (see links.ts), plain text otherwise. A plain click on the link
+   * follows it; clicking elsewhere in the cell selects it as usual.
+   */
+  import type { FieldCellProps } from './registry.svelte'
+  import { linkHref, linkText, type LinkKind } from './links'
+
+  let { value, column }: FieldCellProps = $props()
+  const kind = $derived((column.columnDef.fieldType as LinkKind) ?? 'url')
+  const href = $derived(linkHref(kind, value))
+  const text = $derived(linkText(kind, value))
+</script>
+
+{#if href}
+  <a
+    class="sv-field-link"
+    {href}
+    target={kind === 'url' ? '_blank' : undefined}
+    rel={kind === 'url' ? 'noopener noreferrer' : undefined}
+    onpointerdown={(e) => e.stopPropagation()}
+  >{text}</a>
+{:else}
+  <span class="sv-field-link-text">{text}</span>
+{/if}
+
+<style>
+  /* Text colour with an underline, not the accent: on themes where the accent
+     marks selection (Ember), a column of accent links reads as selected. */
+  .sv-field-link {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: var(--sg-muted, #94a3b8);
+    text-underline-offset: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sv-field-link:hover { text-decoration-color: currentColor; }
+  .sv-field-link-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+/**
+   * URL, email and phone cells: the value as a link when it is a valid one of
+   * its kind (see links.ts), plain text otherwise. A plain click on the link
+   * follows it; clicking elsewhere in the cell selects it as usual.
+   */
+import type { FieldCellProps } from './registry.svelte.js';
+declare const LinkCell: import("svelte").Component<FieldCellProps, {}, "">;
+type LinkCell = ReturnType<typeof LinkCell>;
+export default LinkCell;