@svgrid/enterprise 3.1.8 → 3.1.9

package/dist/fields/LinkPickerEditor.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  /**
+   * The link field's editor (registered as 'fieldLink'): the linked table's
+   * rows in a dialog with a search box over the primary field and the
+   * table's text fields; tick the ones to link (one when the
+   * field allows a single record). Done commits the ids, Cancel leaves the
+   * cell as it was. When the table can add records (`create`), a search that
+   * names no record offers "+ Create" for it, picked at once.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { fieldPropsOf } from './registry.svelte'
+  import { getLinkedTable, idOf, rowsOf } from './sources.svelte'
+
+  let {
+    value,
+    columnDef,
+    onCommit,
+    onCancel,
+  }: { value: unknown; columnDef?: Record<string, unknown>; onCommit: (v?: unknown) => void; onCancel: () => void } = $props()
+
+  const props = $derived(fieldPropsOf((columnDef ?? {}) as { fieldType?: unknown; fieldProps?: Record<string, unknown> }) as { table?: string; multiple?: boolean })
+  const table = $derived(getLinkedTable(props.table))
+  const multiple = $derived(props.multiple !== false)
+  // svelte-ignore state_referenced_locally
+  let picked = $state<string[]>(Array.isArray(value) ? value.map(String) : value == null || value === '' ? [] : [String(value)])
+  let search = $state('')
+  let open = $state(true)
+  let finished = false
+
+  // The list draws this many rows at most; the footer of the list says how many matched.
+  const LIMIT = 200
+  const TEXT_TYPES = new Set(['text', 'longText', 'email', 'url', 'phone', 'singleSelect', 'multiSelect'])
+  const rows = $derived(table ? rowsOf(table) : [])
+  // Besides the primary field, search reads the table's text fields (every
+  // text value of the record when the table declares no fields).
+  const others = $derived(
+    table?.fields?.length
+      ? table.fields.filter((f) => f.field !== table.primaryField && (!f.fieldType || TEXT_TYPES.has(f.fieldType))).map((f) => ({ field: f.field, header: f.header }))
+      : null,
+  )
+  const textOf = (v: unknown): string => (typeof v === 'string' ? v : Array.isArray(v) ? v.filter((x) => typeof x === 'string').join(', ') : '')
+  /** Where `q` is found in a record other than its primary field, as "Email: maya@...". */
+  function hintFor(r: Record<string, unknown>, q: string): string | null {
+    const fields = others ?? Object.keys(r).filter((k) => k !== 'id' && k !== table!.primaryField).map((k) => ({ field: k, header: k }))
+    for (const f of fields) {
+      const text = textOf(r[f.field])
+      if (text && text.toLowerCase().includes(q)) return `${f.header}: ${text}`
+    }
+    return null
+  }
+  const found = $derived.by(() => {
+    const q = search.trim().toLowerCase()
+    const out: Array<{ id: string; label: string; hint: string | null }> = []
+    let total = 0
+    let exact = false
+    for (const r of rows) {
+      const label = String(r[table!.primaryField] ?? '')
+      let hint: string | null = null
+      if (q && !label.toLowerCase().includes(q)) {
+        hint = hintFor(r, q)
+        if (hint == null) continue
+      }
+      if (q && label.toLowerCase() === q) exact = true
+      total += 1
+      if (out.length < LIMIT) out.push({ id: idOf(table!, r), label, hint })
+    }
+    return { rows: out, total, exact }
+  })
+  const shown = $derived(found.rows)
+
+  const term = $derived(search.trim())
+  const canCreate = $derived(!!table?.create && !!term && !found.exact)
+  let creating = $state(false)
+  async function create() {
+    if (!table?.create || creating) return
+    creating = true
+    try {
+      const row = await table.create(term)
+      const id = idOf(table, row)
+      picked = multiple ? [...picked.filter((x) => x !== id), id] : [id]
+      search = ''
+    } finally {
+      creating = false
+    }
+  }
+
+  function toggle(id: string) {
+    if (!multiple) picked = picked[0] === id ? [] : [id]
+    else picked = picked.includes(id) ? picked.filter((x) => x !== id) : [...picked, id]
+  }
+  function done() {
+    finished = true
+    open = false
+    onCommit([...picked])
+  }
+  function cancel() {
+    if (finished) return
+    finished = true
+    open = false
+    onCancel()
+  }
+  const inputValue = (e: Event) => (e.currentTarget as HTMLInputElement).value
+</script>
+
+<SvModal bind:open title={table ? `Link to ${table.name}` : 'Link to records'} width={460} onClose={cancel}>
+  {#if !table}
+    <p class="sv-flp-empty">The table this field links to is not available.</p>
+  {:else}
+    <input class="sv-flp-search" placeholder={`Search ${table.name}`} aria-label={`Search ${table.name}`} value={search} oninput={(e) => (search = inputValue(e))} />
+    <ul class="sv-flp-list" role="listbox" aria-multiselectable={multiple}>
+      {#each shown as r (r.id)}
+        <li>
+          <button type="button" class="sv-flp-row" class:is-on={picked.includes(r.id)} role="option" aria-selected={picked.includes(r.id)} onclick={() => toggle(r.id)}>
+            <span class="sv-flp-mark" aria-hidden="true">{picked.includes(r.id) ? '✓' : ''}</span>
+            <span class="sv-flp-label">{r.label || 'Unnamed'}</span>
+            {#if r.hint}<span class="sv-flp-hint">{r.hint}</span>{/if}
+          </button>
+        </li>
+      {:else}
+        {#if !canCreate}<li class="sv-flp-empty">No records match.</li>{/if}
+      {/each}
+      {#if canCreate}
+        <li>
+          <button type="button" class="sv-flp-row sv-flp-create" disabled={creating} onclick={create}>
+            <span class="sv-flp-mark" aria-hidden="true">+</span>
+            <span class="sv-flp-label">Create “{term}”</span>
+          </button>
+        </li>
+      {/if}
+    </ul>
+    {#if found.total > shown.length}
+      <p class="sv-flp-more" role="status">Showing {shown.length.toLocaleString()} of {found.total.toLocaleString()}. Type to narrow.</p>
+    {/if}
+  {/if}
+  {#snippet footer()}
+    <div class="sv-flp-footer">
+      <span class="sv-flp-count">{picked.length} linked</span>
+      <button type="button" class="sv-flp-btn" onclick={cancel}>Cancel</button>
+      <button type="button" class="sv-flp-btn is-primary" onclick={done}>Done</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .sv-flp-search {
+    width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px; font: inherit; font-size: 14px;
+    border: 1px solid var(--sg-input-border, var(--sg-border, #e2e8f0)); border-radius: var(--sg-radius, 6px);
+    background: var(--sg-input-bg, var(--sg-bg, #fff)); color: var(--sg-fg, #0f172a);
+  }
+  .sv-flp-search:focus { outline: none; border-color: var(--sg-accent, #2563eb); }
+  .sv-flp-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 320px; overflow: auto; }
+  .sv-flp-row {
+    display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px; border: 0;
+    border-radius: var(--sg-radius, 6px); background: none; color: var(--sg-fg, #0f172a); font: inherit; font-size: 14px; text-align: start; cursor: pointer;
+  }
+  .sv-flp-row:hover { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-flp-row.is-on { background: var(--sg-selection-bg, #eef4ff); }
+  .sv-flp-create { color: var(--sg-accent, #2563eb); }
+  .sv-flp-mark { width: 16px; color: var(--sg-accent, #2563eb); font-weight: 700; }
+  .sv-flp-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-flp-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--sg-muted, #64748b); }
+  .sv-flp-more { margin: 8px 0 0; padding: 0 8px; font-size: 12px; color: var(--sg-muted, #64748b); }
+  .sv-flp-empty { padding: 12px 8px; color: var(--sg-muted, #64748b); font-size: 13px; }
+  .sv-flp-footer { display: flex; align-items: center; gap: 8px; width: 100%; }
+  .sv-flp-count { flex: 1; font-size: 13px; color: var(--sg-muted, #64748b); }
+  .sv-flp-btn {
+    height: 34px; padding: 0 16px; 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-flp-btn.is-primary { background: var(--sg-fg, #0f172a); color: var(--sg-bg, #fff); border-color: var(--sg-fg, #0f172a); }
+</style>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    value: unknown;
+    columnDef?: Record<string, unknown>;
+    onCommit: (v?: unknown) => void;
+    onCancel: () => void;
+};
+declare const LinkPickerEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinkPickerEditor = ReturnType<typeof LinkPickerEditor>;
+export default LinkPickerEditor;

package/dist/fields/LinkPreview.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  /**
+   * The card a linked record shows while the pointer rests on its chip: the
+   * record's name, its table and its first few fields. One per grid; the chip
+   * says where it is (showLinkPreview).
+   */
+  import { portalToBody } from '@svgrid/grid'
+  import { showLinkPreview, type LinkPreviewRequest } from './editor-request.svelte'
+  import { getLinkedTable } from './sources.svelte'
+  import { linkedFields, linkedRow, linkedText, linkedValue } from './linked-fields'
+
+  let { request }: { request: LinkPreviewRequest } = $props()
+
+  const MAX_FIELDS = 4
+  const table = $derived(getLinkedTable(request.table))
+  const row = $derived(table ? linkedRow(table, request.rowId) : undefined)
+  // The first four fields that have a value: an empty one does not use up a place.
+  const fields = $derived.by(() => {
+    if (!table || !row) return []
+    const out: Array<{ id: string; header: string; text: string }> = []
+    for (const f of linkedFields(table, row)) {
+      if (f.id === table.primaryField) continue
+      const text = linkedText(f, linkedValue(f, row), row)
+      if (text) out.push({ id: f.id, header: f.header, text })
+      if (out.length === MAX_FIELDS) break
+    }
+    return out
+  })
+  // Below the chip, kept inside the window.
+  const left = $derived(Math.max(8, Math.min(request.x, (typeof window !== 'undefined' ? window.innerWidth : 1200) - 268)))
+</script>
+
+{#if table && row}
+  <div
+    class="sv-flpv"
+    use:portalToBody
+    style:left={`${left}px`}
+    style:top={`${request.y + 6}px`}
+    role="tooltip"
+    onpointerleave={() => showLinkPreview(null)}
+  >
+    <div class="sv-flpv-title">{String(row[table.primaryField] ?? '') || 'Unnamed'}</div>
+    <div class="sv-flpv-table">{table.name}</div>
+    {#each fields as f (f.id)}
+      <div class="sv-flpv-field"><span class="sv-flpv-label">{f.header}</span>{f.text}</div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .sv-flpv {
+    position: fixed; z-index: 2147483645; width: 260px; box-sizing: border-box; padding: 10px 12px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); font-size: 12px; line-height: 1.5;
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.4);
+  }
+  .sv-flpv-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-flpv-table { color: var(--sg-muted, #64748b); margin-bottom: 6px; }
+  .sv-flpv-field { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-flpv-label { color: var(--sg-muted, #64748b); margin-inline-end: 6px; }
+</style>

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

@@ -0,0 +1,7 @@
+import { type LinkPreviewRequest } from './editor-request.svelte.js';
+type $$ComponentProps = {
+    request: LinkPreviewRequest;
+};
+declare const LinkPreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinkPreview = ReturnType<typeof LinkPreview>;
+export default LinkPreview;

package/dist/fields/LinkedRecordView.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  /**
+   * A record of a linked table, opened from a link chip: its fields with
+   * their names and values, drawn as their cells draw them. The table belongs
+   * to the app, so the record is read here, not edited; a table that can show
+   * its records (another tab of a base, `open`) offers "Open in {table}".
+   */
+  import { SvModal } from '@svgrid/grid'
+  import FieldCell from './FieldCell.svelte'
+  import { getLinkedTable } from './sources.svelte'
+  import { closeAllLinkedRecords } from './editor-request.svelte'
+  import { linkedFields, linkedRow, linkedText, linkedValue } from './linked-fields'
+  import { getFieldType, typeDrawsCell } from './registry.svelte'
+
+  let { ctrl, table: tableId, rowId, onClose }: { ctrl: any; table: string; rowId: string; onClose: () => void } = $props()
+
+  let open = $state(true)
+  const table = $derived(getLinkedTable(tableId))
+  const row = $derived(table ? linkedRow(table, rowId) : undefined)
+  const fields = $derived(table ? linkedFields(table, row) : [])
+  const title = $derived(table && row ? String(row[table.primaryField] ?? '') || 'Unnamed' : 'Record')
+  const draws = (def: Record<string, any>) => !!def.fieldType && def.cell == null && typeDrawsCell(def)
+  /** Show the record in its own table, and close every linked record over this grid. */
+  function openWhere() {
+    const go = table?.open
+    open = false
+    closeAllLinkedRecords()
+    go?.(rowId)
+  }
+</script>
+
+<SvModal bind:open {title} width={520} {onClose}>
+  {#if !table || !row}
+    <p class="sv-flrv-gone">This record is not in its table any more.</p>
+  {:else}
+    <p class="sv-flrv-table">{table.name}</p>
+    <div class="sv-flrv-fields">
+      {#each fields as f (f.id)}
+        {@const v = linkedValue(f, row)}
+        <div class="sv-flrv-field">
+          <div class="sv-flrv-label">
+            {#if f.def.fieldType && getFieldType(f.def.fieldType)?.icon}
+              <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d={getFieldType(f.def.fieldType)?.icon} fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" /></svg>
+            {/if}
+            {f.header}
+          </div>
+          <div class="sv-flrv-value">
+            {#if draws(f.def)}
+              <FieldCell {ctrl} row={{ id: rowId, original: row }} column={{ id: f.id, columnDef: f.def }} value={v} />
+            {:else}
+              {linkedText(f, v, row) || ' '}
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+  {#snippet footer()}
+    <div class="sv-flrv-footer">
+      {#if table?.open && row}
+        <button
+          type="button"
+          class="sv-flrv-btn sv-flrv-btn-quiet"
+          onclick={openWhere}>Open in {table.name}</button
+        >
+      {/if}
+      <button
+        type="button"
+        class="sv-flrv-btn"
+        onclick={() => {
+          open = false
+          onClose()
+        }}>Close</button
+      >
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .sv-flrv-table { margin: -6px 0 12px; font-size: 12px; color: var(--sg-muted, #64748b); }
+  .sv-flrv-fields { display: flex; flex-direction: column; gap: 12px; }
+  .sv-flrv-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sg-muted, #64748b); margin-bottom: 4px; }
+  .sv-flrv-value {
+    display: flex; align-items: center; min-height: 34px; padding: 0 10px; box-sizing: border-box; font-size: 14px;
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 6px); background: var(--sg-header-bg, #f8fafc);
+  }
+  .sv-flrv-gone { color: var(--sg-muted, #64748b); }
+  .sv-flrv-footer { display: flex; justify-content: flex-end; gap: 8px; width: 100%; }
+  .sv-flrv-btn {
+    height: 32px; padding: 0 14px; font: inherit; font-size: 13px; cursor: pointer; border-radius: var(--sg-radius, 6px);
+    background: var(--sg-fg, #0f172a); color: var(--sg-bg, #fff); border: 1px solid var(--sg-fg, #0f172a);
+  }
+  .sv-flrv-btn-quiet { background: transparent; color: var(--sg-fg, #0f172a); border-color: var(--sg-border, #e2e8f0); }
+</style>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    ctrl: any;
+    table: string;
+    rowId: string;
+    onClose: () => void;
+};
+declare const LinkedRecordView: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinkedRecordView = ReturnType<typeof LinkedRecordView>;
+export default LinkedRecordView;

package/dist/fields/LinkedRecordsCell.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  /**
+   * Link-to-records cells: one chip per linked row, showing its primary
+   * field. A click on a chip opens that record; resting the pointer on one
+   * previews it.
+   */
+  import type { FieldCellProps } from './registry.svelte'
+  import { getLinkedTable, idOf, linkedRows } from './sources.svelte'
+  import { openLinkedRecord, showLinkPreview } from './editor-request.svelte'
+
+  let { ctrl, value, props }: FieldCellProps<{ table?: string }> = $props()
+  const table = $derived(getLinkedTable(props.table))
+  const chips = $derived(
+    linkedRows(table, value).map((r) => ({ id: table ? idOf(table, r) : '', name: String(r[table?.primaryField ?? 'name'] ?? '') })),
+  )
+
+  let timer: ReturnType<typeof setTimeout> | undefined
+  function enter(e: PointerEvent, id: string) {
+    if (!table || e.pointerType === 'touch') return
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    clearTimeout(timer)
+    timer = setTimeout(() => showLinkPreview({ ctrl, table: table.id, rowId: id, x: rect.left, y: rect.bottom }), 350)
+  }
+  function leave(e: PointerEvent) {
+    clearTimeout(timer)
+    // Onto the card itself: it closes when the pointer leaves it.
+    const to = e.relatedTarget as Element | null
+    if (!to?.closest?.('.sv-flpv')) showLinkPreview(null)
+  }
+</script>
+
+<span class="sv-flr">
+  {#each chips as chip, i (i)}
+    <button
+      type="button"
+      class="sv-flr-chip"
+      tabindex="-1"
+      onpointerdown={(e) => e.stopPropagation()}
+      onpointerenter={(e) => enter(e, chip.id)}
+      onpointerleave={leave}
+      onclick={(e) => {
+        e.stopPropagation()
+        clearTimeout(timer)
+        if (table) openLinkedRecord({ ctrl, table: table.id, rowId: chip.id })
+      }}>{chip.name || 'Unnamed'}</button
+    >
+  {/each}
+</span>
+
+<style>
+  .sv-flr { display: inline-flex; gap: 4px; min-width: 0; overflow: hidden; }
+  .sv-flr-chip {
+    flex: none; max-width: 160px; padding: 1px 8px; border-radius: 4px; font: inherit; font-size: 12px; color: inherit; cursor: pointer;
+    background: color-mix(in srgb, #2d7ff9 12%, transparent);
+    border: 1px solid color-mix(in srgb, #2d7ff9 30%, transparent);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .sv-flr-chip:hover { background: color-mix(in srgb, #2d7ff9 22%, transparent); }
+</style>

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

@@ -0,0 +1,11 @@
+/**
+   * Link-to-records cells: one chip per linked row, showing its primary
+   * field. A click on a chip opens that record; resting the pointer on one
+   * previews it.
+   */
+import type { FieldCellProps } from './registry.svelte.js';
+declare const LinkedRecordsCell: import("svelte").Component<FieldCellProps<{
+    table?: string;
+}>, {}, "">;
+type LinkedRecordsCell = ReturnType<typeof LinkedRecordsCell>;
+export default LinkedRecordsCell;

package/dist/fields/LongTextEditor.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  /**
+   * The long text field's editor (registered as 'fieldLongText'): the cell
+   * grows into a panel over itself with room for paragraphs. Enter starts a
+   * new line, as in any document; Ctrl+Enter (Cmd+Enter), Tab or a click
+   * outside saves, and Escape leaves the cell as it was. With rich text on,
+   * the footer names the markup the cell draws.
+   */
+  import { portalToBody } from '@svgrid/grid'
+  import { onMount } from 'svelte'
+  import { fieldPropsOf } from './registry.svelte'
+
+  let {
+    value,
+    typed = false,
+    columnDef,
+    onCommit,
+    onCancel,
+    onCommitAndMove,
+  }: {
+    value: unknown
+    typed?: boolean
+    columnDef?: Record<string, unknown>
+    onCommit: (v?: unknown) => void
+    onCancel: () => void
+    onCommitAndMove?: (v: unknown, direction: 1 | -1) => void
+  } = $props()
+
+  const rich = $derived(!!fieldPropsOf((columnDef ?? {}) as { fieldType?: unknown; fieldProps?: Record<string, unknown> }).richText)
+  // svelte-ignore state_referenced_locally
+  let text = $state(value == null ? '' : String(value))
+  let finished = false
+
+  let anchor = $state<HTMLElement | null>(null)
+  let panel = $state<HTMLElement | null>(null)
+  let area = $state<HTMLTextAreaElement | null>(null)
+  let rect = $state<{ top: number; left: number; width: number; maxHeight: number } | null>(null)
+  function place() {
+    const cell = anchor?.closest('td') ?? anchor
+    if (!cell) return
+    const r = cell.getBoundingClientRect()
+    const width = Math.min(Math.max(r.width + 2, 340), window.innerWidth - 16)
+    const left = Math.max(8, Math.min(r.left - 1, window.innerWidth - width - 8))
+    const top = Math.max(8, Math.min(r.top - 1, window.innerHeight - 220))
+    rect = { top, left, width, maxHeight: window.innerHeight - top - 8 }
+  }
+  /** The box grows with its lines, up to the panel's room. */
+  function fit() {
+    if (!area) return
+    area.style.height = 'auto'
+    area.style.height = `${Math.min(area.scrollHeight + 2, Math.max(120, (rect?.maxHeight ?? 400) - 48))}px`
+  }
+
+  onMount(() => {
+    place()
+    const takeFocus = () => {
+      if (!area || document.activeElement === area) return
+      area.focus({ preventScroll: true })
+      // A typed key continues after itself; opening an existing text puts
+      // the caret at its end, where more usually goes.
+      area.setSelectionRange(text.length, text.length)
+      fit()
+    }
+    queueMicrotask(takeFocus)
+    const frame = requestAnimationFrame(takeFocus)
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as Node
+      if (finished || panel?.contains(t) || anchor?.contains(t)) return
+      finish('commit')
+    }
+    const onScroll = (e: Event) => {
+      if (!panel?.contains(e.target as Node)) place()
+    }
+    window.addEventListener('resize', place)
+    window.addEventListener('scroll', onScroll, true)
+    document.addEventListener('pointerdown', onDown, true)
+    return () => {
+      cancelAnimationFrame(frame)
+      window.removeEventListener('resize', place)
+      window.removeEventListener('scroll', onScroll, true)
+      document.removeEventListener('pointerdown', onDown, true)
+    }
+  })
+
+  function finish(how: 'commit' | 'cancel' | 'next' | 'prev') {
+    if (finished) return
+    finished = true
+    if (how === 'cancel') return onCancel()
+    const v = text === '' ? null : text
+    if ((how === 'next' || how === 'prev') && onCommitAndMove) onCommitAndMove(v, how === 'next' ? 1 : -1)
+    else onCommit(v)
+  }
+  function onKey(e: KeyboardEvent) {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) finish('commit')
+    else if (e.key === 'Escape') finish('cancel')
+    else if (e.key === 'Tab') finish(e.shiftKey ? 'prev' : 'next')
+    else {
+      // Enter, arrows and the rest are the text box's own.
+      e.stopPropagation()
+      return
+    }
+    e.preventDefault()
+    e.stopPropagation()
+  }
+  const areaValue = (e: Event) => (e.currentTarget as HTMLTextAreaElement).value
+  const mod = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? 'Cmd' : 'Ctrl'
+</script>
+
+<span class="sv-flt-cell" bind:this={anchor}>{text.split('\n')[0]}</span>
+
+{#if rect}
+  <div
+    class="sv-flt-panel"
+    bind:this={panel}
+    use:portalToBody
+    style:top={`${rect.top}px`}
+    style:left={`${rect.left}px`}
+    style:width={`${rect.width}px`}
+    style:max-height={`${rect.maxHeight}px`}
+  >
+    <textarea
+      bind:this={area}
+      class="sv-flt-area"
+      aria-label={String((columnDef as { header?: unknown } | undefined)?.header ?? 'Long text')}
+      value={text}
+      oninput={(e) => {
+        text = areaValue(e)
+        fit()
+      }}
+      onkeydown={onKey}
+    ></textarea>
+    <div class="sv-flt-foot">
+      {#if rich}<span class="sv-flt-markup">**bold** *italic* `code` [link](https://...) - list</span>{/if}
+      <span class="sv-flt-keys"><kbd>{mod}+Enter</kbd> save <kbd>Esc</kbd> cancel</span>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .sv-flt-cell { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 8px; }
+  .sv-flt-panel {
+    position: fixed; z-index: 2147483646; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; padding: 6px;
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 6px);
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
+  }
+  .sv-flt-area {
+    display: block; box-sizing: border-box; width: 100%; min-height: 120px; resize: none; overflow: auto;
+    padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.5;
+    border: 1px solid var(--sg-input-border, var(--sg-border, #e2e8f0)); border-radius: var(--sg-radius, 6px);
+    background: var(--sg-input-bg, var(--sg-bg, #fff)); color: var(--sg-fg, #0f172a);
+  }
+  .sv-flt-area:focus { outline: none; border-color: var(--sg-accent, #2563eb); }
+  .sv-flt-foot { display: flex; align-items: center; gap: 12px; padding: 0 2px; font-size: 12px; color: var(--sg-muted, #64748b); }
+  .sv-flt-markup { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
+  .sv-flt-keys { margin-inline-start: auto; flex: none; }
+  .sv-flt-keys kbd { padding: 0 4px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 3px; font: inherit; font-size: 11px; }
+</style>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    value: unknown;
+    typed?: boolean;
+    columnDef?: Record<string, unknown>;
+    onCommit: (v?: unknown) => void;
+    onCancel: () => void;
+    onCommitAndMove?: (v: unknown, direction: 1 | -1) => void;
+};
+declare const LongTextEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type LongTextEditor = ReturnType<typeof LongTextEditor>;
+export default LongTextEditor;