@svgrid/enterprise 3.1.7 → 3.1.9

package/dist/fields/AttachmentCell.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+  /**
+   * Attachment cells in read mode: images as square thumbnails, other files as
+   * chips (type badge + name), as many as the column width holds, then "+N".
+   * Thumbnails are a fixed size with lazy loading and async decoding, so a
+   * scroll never waits on an image or re-lays out the row.
+   *
+   * Files dropped on the cell are added to it (uploaded with the column's
+   * uploader, written through the grid's edit path). Each file uploads on
+   * its own: the ones that land are written, a refused or failed one is
+   * reported in a toast, and uploads still running when the cell goes away
+   * are aborted.
+   */
+  import { toast } from '@svgrid/grid'
+  import type { FieldCellProps } from './registry.svelte'
+  import { isImage, limitAttachments, rejectReason, safeUrl, toAttachments, uploadAttachment, type Attachment, type AttachmentFieldProps } from './attachments'
+  import { writeCell } from './grid-access'
+
+  let { ctrl, row, column, value, props }: FieldCellProps<AttachmentFieldProps> = $props()
+
+  const THUMB = 26
+  const CHIP = 96
+  const GAP = 4
+  const PLUS = 30
+
+  const items = $derived(toAttachments(value))
+  const width = $derived(
+    Number((ctrl as { getColumnWidth?: (id: string) => number }).getColumnWidth?.(column.id)) ||
+      Number(column.columnDef.width) ||
+      200,
+  )
+  // How many fit, leaving room for the "+N" badge when some do not.
+  const shown = $derived.by(() => {
+    const room = width - 12
+    let used = 0
+    let n = 0
+    for (const a of items) {
+      const w = (isImage(a) ? THUMB : CHIP) + GAP
+      const rest = items.length - n - 1
+      if (used + w + (rest > 0 ? PLUS : 0) > room) break
+      used += w
+      n += 1
+    }
+    return Math.max(items.length ? 1 : 0, n)
+  })
+  const label = $derived(
+    items.length === 0
+      ? 'No attachments'
+      : `${items.length} attachment${items.length === 1 ? '' : 's'}: ${items.map((a) => a.name).join(', ')}`,
+  )
+  const ext = (a: Attachment) => (a.name.split('.').pop() ?? '').slice(0, 4).toUpperCase() || 'FILE'
+
+  // ---- Files dropped on the cell ----
+  const canDrop = $derived(!!(ctrl as { editingEnabled?: boolean } | null)?.editingEnabled && column.columnDef.editable !== false && !!row?.id)
+  let over = $state(false)
+  const hasFiles = (e: DragEvent) => !!e.dataTransfer && [...e.dataTransfer.types].includes('Files')
+  function dragOver(e: DragEvent) {
+    if (!canDrop || !hasFiles(e)) return
+    e.preventDefault()
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
+    over = true
+  }
+  // Each running upload's progress (0..1), averaged into the bar under the cell.
+  let uploads = $state<Record<string, number>>({})
+  const progress = $derived.by(() => {
+    const parts = Object.values(uploads)
+    return parts.length ? parts.reduce((s, p) => s + p, 0) / parts.length : null
+  })
+  const running = new Set<AbortController>()
+  $effect(() => () => {
+    for (const ctl of running) ctl.abort()
+  })
+  let seq = 0
+
+  async function drop(e: DragEvent) {
+    over = false
+    if (!canDrop || !hasFiles(e)) return
+    e.preventDefault()
+    e.stopPropagation()
+    // The row as it was dropped on; the write goes to it even if the cell is reused.
+    const rowId = row.id
+    const original = row.original as Record<string, unknown> | undefined
+    const field = column.columnDef.field as string | undefined
+    const current = () => (original && field ? toAttachments(original[field]) : items)
+    const refused: string[] = []
+    const queue: File[] = []
+    for (const file of [...(e.dataTransfer?.files ?? [])]) {
+      const why = rejectReason(file, props, items.length + queue.length)
+      if (why) refused.push(`${file.name}: ${why}`)
+      else queue.push(file)
+    }
+    if (refused.length) toast.warning(refused.join('\n'), { title: 'Not added' })
+    if (!queue.length) return
+    const ctl = new AbortController()
+    running.add(ctl)
+    const keys = queue.map(() => `u${++seq}`)
+    uploads = { ...uploads, ...Object.fromEntries(keys.map((k) => [k, 0])) }
+    const results = await Promise.allSettled(
+      queue.map((file, i) =>
+        uploadAttachment(file, props, {
+          row: original,
+          columnId: column.id,
+          signal: ctl.signal,
+          onProgress: (f) => {
+            if (keys[i]! in uploads) uploads = { ...uploads, [keys[i]!]: Math.max(0, Math.min(1, f)) }
+          },
+        }),
+      ),
+    )
+    running.delete(ctl)
+    if (ctl.signal.aborted) return
+    uploads = Object.fromEntries(Object.entries(uploads).filter(([k]) => !keys.includes(k)))
+    const failed: string[] = []
+    const added: Attachment[] = []
+    results.forEach((r, i) => {
+      if (r.status === 'fulfilled') added.push(r.value)
+      else failed.push(`${queue[i]!.name}: ${r.reason instanceof Error && r.reason.message ? r.reason.message : 'Upload failed'}`)
+    })
+    // Another drop may have filled the cell meanwhile; maxFiles still holds.
+    const base = current()
+    const { kept, rejected } = limitAttachments(added, props, base.length)
+    if (kept.length) writeCell(ctrl, rowId, column.id, [...base, ...kept])
+    if (rejected.length) toast.warning(rejected.join('\n'), { title: 'Not added' })
+    if (failed.length) toast.error(failed.join('\n'), { title: failed.length === 1 ? 'Upload failed' : `${failed.length} uploads failed` })
+  }
+</script>
+
+<span
+  class="sv-att"
+  class:is-drop={over}
+  role="img"
+  aria-label={label}
+  title={items.map((a) => a.name).join('\n')}
+  ondragover={dragOver}
+  ondragleave={() => (over = false)}
+  ondrop={drop}
+>
+  {#each items.slice(0, shown) as a (a.id)}
+    {#if isImage(a) && safeUrl(a.thumbnailUrl ?? a.url, true)}
+      <img
+        class="sv-att-thumb"
+        src={safeUrl(a.thumbnailUrl ?? a.url, true)}
+        alt=""
+        width={THUMB}
+        height={THUMB}
+        loading="lazy"
+        decoding="async"
+        draggable="false"
+      />
+    {:else}
+      <span class="sv-att-chip">
+        <span class="sv-att-ext">{ext(a)}</span>
+        <span class="sv-att-name">{a.name}</span>
+      </span>
+    {/if}
+  {/each}
+  {#if items.length > shown}
+    <span class="sv-att-more">+{items.length - shown}</span>
+  {/if}
+  {#if progress !== null}
+    <span
+      class="sv-att-progress"
+      role="progressbar"
+      aria-label="Uploading"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow={Math.round(progress * 100)}
+      style:--sv-att-done={`${Math.round(progress * 100)}%`}
+    ></span>
+  {/if}
+</span>
+
+<style>
+  .sv-att {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    width: 100%;
+    min-height: 100%;
+    overflow: hidden;
+  }
+  /* Files over the cell: where they will land. */
+  .sv-att.is-drop {
+    outline: 2px dashed var(--sg-accent, #2563eb);
+    outline-offset: -2px;
+    border-radius: 4px;
+  }
+  .sv-att-thumb {
+    flex: none;
+    width: 26px;
+    height: 26px;
+    object-fit: cover;
+    border-radius: 4px;
+    border: 1px solid var(--sg-border, #e2e8f0);
+    background: var(--sg-header-bg, #f8fafc);
+  }
+  .sv-att-chip {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    width: 96px;
+    height: 24px;
+    padding: 0 6px 0 3px;
+    border-radius: 4px;
+    border: 1px solid var(--sg-border, #e2e8f0);
+    background: var(--sg-header-bg, #f8fafc);
+    font-size: 11px;
+  }
+  .sv-att-ext {
+    flex: none;
+    padding: 1px 3px;
+    border-radius: 3px;
+    background: var(--sg-bg, #fff);
+    color: var(--sg-muted, #64748b);
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+  .sv-att-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sv-att-more {
+    flex: none;
+    font-size: 12px;
+    color: var(--sg-muted, #64748b);
+  }
+  /* Uploads from a drop: a thin bar along the bottom of the cell. */
+  .sv-att-progress {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 2px;
+    background: linear-gradient(to right, var(--sg-accent, #2563eb) var(--sv-att-done), transparent var(--sv-att-done));
+  }
+</style>

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

@@ -0,0 +1,5 @@
+import type { FieldCellProps } from './registry.svelte.js';
+import { type AttachmentFieldProps } from './attachments.js';
+declare const AttachmentCell: import("svelte").Component<FieldCellProps<AttachmentFieldProps>, {}, "">;
+type AttachmentCell = ReturnType<typeof AttachmentCell>;
+export default AttachmentCell;

package/dist/fields/AttachmentDialog.svelte

@@ -0,0 +1,357 @@
+<script lang="ts">
+  /**
+   * The attachment field's editor: every file in the cell as a tile, with
+   * add (file picker, drop, paste, URL), remove, reorder (drag, or Alt+Left /
+   * Alt+Right on a tile) and preview. Uploads run through the column's
+   * uploader with progress; a failed one stays as a tile with Retry. Done
+   * commits the list, Cancel (or Escape) leaves the cell as it was.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import AttachmentPreview from './AttachmentPreview.svelte'
+  import {
+    attachmentsFromText,
+    formatBytes,
+    isImage,
+    limitAttachments,
+    rejectReason,
+    safeUrl,
+    toAttachments,
+    uploadAttachment,
+    type Attachment,
+    type AttachmentFieldProps,
+  } from './attachments'
+
+  let {
+    value,
+    title = 'Attachments',
+    props,
+    row,
+    columnId,
+    onDone,
+    onCancel,
+  }: {
+    value: unknown
+    title?: string
+    props: AttachmentFieldProps
+    row: unknown
+    columnId: string
+    onDone: (next: Attachment[]) => void
+    onCancel: () => void
+  } = $props()
+
+  type Pending = { key: string; file: File; progress: number; error: string | null; ctl: AbortController }
+
+  // svelte-ignore state_referenced_locally
+  let items = $state<Attachment[]>(toAttachments(value))
+  let pending = $state<Pending[]>([])
+  let rejected = $state<string[]>([])
+  let urlText = $state('')
+  let previewIndex = $state<number | null>(null)
+  let dragFrom = $state<number | null>(null)
+  let dropping = $state(false)
+  let fileInput = $state<HTMLInputElement | null>(null)
+  let open = $state(true)
+  let finished = false
+
+  const busy = $derived(pending.some((p) => !p.error))
+
+  function addFiles(files: Iterable<File>) {
+    rejected = []
+    for (const file of files) {
+      const why = rejectReason(file, props, items.length + pending.length)
+      if (why) {
+        rejected = [...rejected, `${file.name}: ${why}`]
+        continue
+      }
+      start({ key: `${file.name}-${file.size}-${Math.random()}`, file, progress: 0, error: null, ctl: new AbortController() })
+    }
+  }
+
+  function start(p: Pending) {
+    pending = [...pending.filter((x) => x.key !== p.key), p]
+    const set = (patch: Partial<Pending>) => (pending = pending.map((x) => (x.key === p.key ? { ...x, ...patch } : x)))
+    uploadAttachment(p.file, props, {
+      row,
+      columnId,
+      signal: p.ctl.signal,
+      onProgress: (f) => set({ progress: Math.max(0, Math.min(1, f)) }),
+    }).then(
+      (att) => {
+        if (p.ctl.signal.aborted) return
+        items = [...items, att]
+        pending = pending.filter((x) => x.key !== p.key)
+      },
+      (err) => {
+        if (p.ctl.signal.aborted) return
+        set({ error: err instanceof Error ? err.message : 'Upload failed' })
+      },
+    )
+  }
+
+  function retry(p: Pending) {
+    start({ ...p, progress: 0, error: null, ctl: new AbortController() })
+  }
+
+  function drop(p: Pending) {
+    p.ctl.abort()
+    pending = pending.filter((x) => x.key !== p.key)
+  }
+
+  // Kept out of the markup: AGENTS.md keeps `as` casts in <script>.
+  function onPick(e: Event) {
+    const input = e.currentTarget as HTMLInputElement
+    if (input.files) addFiles(input.files)
+    input.value = ''
+  }
+
+  function addUrls() {
+    const found = attachmentsFromText(urlText)
+    if (!found.length) {
+      rejected = ['No http(s) URL found']
+      return
+    }
+    // The same checks as a picked file: accept (by the name's extension) and maxFiles.
+    const { kept, rejected: refused } = limitAttachments(found, props, items.length + pending.length)
+    items = [...items, ...kept]
+    urlText = ''
+    rejected = refused
+  }
+
+  function remove(i: number) {
+    items = items.filter((_, j) => j !== i)
+  }
+
+  function move(from: number, to: number) {
+    if (to < 0 || to >= items.length || from === to) return
+    const next = items.slice()
+    const [it] = next.splice(from, 1)
+    next.splice(to, 0, it!)
+    items = next
+  }
+
+  function onTileKey(e: KeyboardEvent, i: number) {
+    if (e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+      e.preventDefault()
+      const to = i + (e.key === 'ArrowRight' ? 1 : -1)
+      move(i, to)
+      queueMicrotask(() => (document.querySelectorAll<HTMLElement>('.sv-attd-tile')[to])?.focus())
+    } else if (e.key === 'Delete' || e.key === 'Backspace') {
+      e.preventDefault()
+      remove(i)
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      previewIndex = i
+    }
+  }
+
+  function onPaste(e: ClipboardEvent) {
+    const files = [...(e.clipboardData?.files ?? [])]
+    if (files.length) {
+      e.preventDefault()
+      addFiles(files)
+      return
+    }
+    const text = e.clipboardData?.getData('text') ?? ''
+    if (!(e.target as HTMLElement).closest('input') && attachmentsFromText(text).length) {
+      e.preventDefault()
+      urlText = text
+      addUrls()
+    }
+  }
+
+  function done() {
+    if (busy) return
+    finished = true
+    open = false
+    onDone(items)
+  }
+
+  function cancel() {
+    if (finished) return
+    finished = true
+    for (const p of pending) p.ctl.abort()
+    open = false
+    onCancel()
+  }
+
+  const ext = (a: Attachment) => (a.name.split('.').pop() ?? '').slice(0, 4).toUpperCase() || 'FILE'
+</script>
+
+<SvModal bind:open {title} width={680} onClose={cancel}>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="sv-attd"
+    class:is-dropping={dropping}
+    onpaste={onPaste}
+    ondragover={(e) => {
+      if (dragFrom !== null || !e.dataTransfer?.types.includes('Files')) return
+      e.preventDefault()
+      dropping = true
+    }}
+    ondragleave={(e) => {
+      if (e.currentTarget === e.target) dropping = false
+    }}
+    ondrop={(e) => {
+      dropping = false
+      if (dragFrom !== null || !e.dataTransfer?.files.length) return
+      e.preventDefault()
+      addFiles(e.dataTransfer.files)
+    }}
+  >
+    {#if items.length === 0 && pending.length === 0}
+      <p class="sv-attd-empty">No files yet. Drop files here, paste them, or use Add files.</p>
+    {/if}
+    <ul class="sv-attd-tiles" aria-label="Files">
+      {#each items as a, i (a.id)}
+        <li
+          class="sv-attd-tile"
+          class:is-dragging={dragFrom === i}
+          tabindex="0"
+          draggable="true"
+          aria-label={`${a.name}${a.size ? `, ${formatBytes(a.size)}` : ''}. Enter to preview, Delete to remove, Alt+Arrow to move.`}
+          onkeydown={(e) => onTileKey(e, i)}
+          ondragstart={(e) => {
+            dragFrom = i
+            e.dataTransfer?.setData('text/plain', a.name)
+          }}
+          ondragend={() => (dragFrom = null)}
+          ondragover={(e) => {
+            if (dragFrom === null) return
+            e.preventDefault()
+          }}
+          ondrop={(e) => {
+            if (dragFrom === null) return
+            e.preventDefault()
+            move(dragFrom, i)
+            dragFrom = null
+          }}
+        >
+          <button type="button" class="sv-attd-face" onclick={() => (previewIndex = i)} tabindex="-1" aria-hidden="true">
+            {#if isImage(a) && safeUrl(a.thumbnailUrl ?? a.url, true)}
+              <img src={safeUrl(a.thumbnailUrl ?? a.url, true)} alt="" loading="lazy" decoding="async" draggable="false" />
+            {:else}
+              <span class="sv-attd-ext">{ext(a)}</span>
+            {/if}
+          </button>
+          <span class="sv-attd-name" title={a.name}>{a.name}</span>
+          <span class="sv-attd-size">{formatBytes(a.size)}</span>
+          <button type="button" class="sv-attd-remove" aria-label={`Remove ${a.name}`} onclick={() => remove(i)}>
+            <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
+          </button>
+        </li>
+      {/each}
+      {#each pending as p (p.key)}
+        <li class="sv-attd-tile is-pending" aria-label={p.error ? `${p.file.name}: ${p.error}` : `Uploading ${p.file.name}`}>
+          <span class="sv-attd-face"><span class="sv-attd-ext">{p.error ? '!' : `${Math.round(p.progress * 100)}%`}</span></span>
+          <span class="sv-attd-name" title={p.file.name}>{p.file.name}</span>
+          {#if p.error}
+            <span class="sv-attd-error">{p.error}</span>
+            <span class="sv-attd-actions">
+              <button type="button" class="sv-attd-link" onclick={() => retry(p)}>Retry</button>
+              <button type="button" class="sv-attd-link" onclick={() => drop(p)}>Remove</button>
+            </span>
+          {:else}
+            <span class="sv-attd-bar"><span style:width={`${Math.round(p.progress * 100)}%`}></span></span>
+            <button type="button" class="sv-attd-remove" aria-label={`Cancel ${p.file.name}`} onclick={() => drop(p)}>
+              <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
+            </button>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+    {#if rejected.length}
+      <ul class="sv-attd-rejected" role="alert">
+        {#each rejected as r, i (i)}<li>{r}</li>{/each}
+      </ul>
+    {/if}
+  </div>
+
+  {#snippet footer()}
+    <div class="sv-attd-footer">
+      <input
+        bind:this={fileInput}
+        type="file"
+        multiple
+        accept={props.accept}
+        hidden
+        onchange={onPick}
+      />
+      <button type="button" class="sv-attd-btn" onclick={() => fileInput?.click()}>Add files</button>
+      <input
+        class="sv-attd-url"
+        type="url"
+        placeholder="or paste a URL"
+        aria-label="Add a file by URL"
+        bind:value={urlText}
+        onkeydown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            addUrls()
+          }
+        }}
+      />
+      <span class="sv-attd-spacer"></span>
+      <button type="button" class="sv-attd-btn" onclick={cancel}>Cancel</button>
+      <button type="button" class="sv-attd-btn is-primary" onclick={done} disabled={busy}>
+        {busy ? `Uploading ${pending.filter((p) => !p.error).length}...` : 'Done'}
+      </button>
+    </div>
+  {/snippet}
+</SvModal>
+
+{#if previewIndex !== null}
+  <AttachmentPreview items={items} bind:index={previewIndex} />
+{/if}
+
+<style>
+  .sv-attd { min-height: 160px; border: 2px dashed transparent; border-radius: 8px; padding: 4px; }
+  .sv-attd.is-dropping { border-color: var(--sg-accent, #2563eb); }
+  .sv-attd-empty { margin: 40px 0; text-align: center; color: var(--sg-muted, #64748b); font-size: 13px; }
+  .sv-attd-tiles {
+    list-style: none; margin: 0; padding: 0;
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
+  }
+  .sv-attd-tile {
+    position: relative; display: flex; flex-direction: column; gap: 3px;
+    padding: 6px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px;
+    background: var(--sg-bg, #fff); cursor: grab; min-width: 0;
+  }
+  .sv-attd-tile:focus-visible { outline: 2px solid var(--sg-accent, #2563eb); outline-offset: 1px; }
+  .sv-attd-tile.is-dragging { opacity: 0.4; }
+  .sv-attd-tile.is-pending { cursor: default; }
+  .sv-attd-face {
+    display: flex; align-items: center; justify-content: center;
+    height: 96px; border: 0; padding: 0; border-radius: 6px; overflow: hidden;
+    background: var(--sg-header-bg, #f8fafc); cursor: zoom-in;
+  }
+  .sv-attd-face img { width: 100%; height: 100%; object-fit: cover; }
+  .sv-attd-ext { font-size: 13px; font-weight: 600; color: var(--sg-muted, #64748b); }
+  .sv-attd-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-attd-size, .sv-attd-error { font-size: 11px; color: var(--sg-muted, #64748b); }
+  .sv-attd-error { color: var(--sg-danger, #dc2626); }
+  .sv-attd-actions { display: flex; gap: 8px; }
+  .sv-attd-link { border: 0; padding: 0; background: none; color: inherit; text-decoration: underline; font: inherit; font-size: 12px; cursor: pointer; }
+  .sv-attd-bar { height: 4px; border-radius: 2px; background: var(--sg-header-bg, #f8fafc); overflow: hidden; }
+  .sv-attd-bar > span { display: block; height: 100%; background: var(--sg-muted, #64748b); transition: width 120ms linear; }
+  .sv-attd-remove {
+    position: absolute; top: 10px; inset-inline-end: 10px;
+    display: inline-flex; padding: 3px; border: 0; border-radius: 999px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); cursor: pointer; opacity: 0.85;
+  }
+  .sv-attd-remove:hover { opacity: 1; }
+  .sv-attd-rejected { margin: 10px 0 0; padding-inline-start: 18px; font-size: 12px; color: var(--sg-danger, #dc2626); }
+  .sv-attd-footer { display: flex; align-items: center; gap: 8px; width: 100%; }
+  .sv-attd-spacer { flex: 1; }
+  .sv-attd-url {
+    width: 220px; height: 30px; padding: 0 8px; font: inherit; font-size: 13px;
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 6px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+  }
+  .sv-attd-btn {
+    height: 30px; padding: 0 12px; font: inherit; font-size: 13px; cursor: pointer;
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 6px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+  }
+  .sv-attd-btn.is-primary { background: var(--sg-fg, #0f172a); color: var(--sg-bg, #fff); border-color: transparent; }
+  .sv-attd-btn:disabled { opacity: 0.6; cursor: default; }
+</style>

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

@@ -0,0 +1,13 @@
+import { type Attachment, type AttachmentFieldProps } from './attachments.js';
+type $$ComponentProps = {
+    value: unknown;
+    title?: string;
+    props: AttachmentFieldProps;
+    row: unknown;
+    columnId: string;
+    onDone: (next: Attachment[]) => void;
+    onCancel: () => void;
+};
+declare const AttachmentDialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type AttachmentDialog = ReturnType<typeof AttachmentDialog>;
+export default AttachmentDialog;

package/dist/fields/AttachmentEditor.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  /**
+   * The grid mounts this when an attachment cell is edited (Enter, double
+   * click, typing): it opens the attachment dialog over the page and commits
+   * the dialog's list, or cancels. Registered with registerCellEditor as
+   * 'attachment' by enableFields().
+   */
+  import AttachmentDialog from './AttachmentDialog.svelte'
+  import { fieldPropsOf } from './registry.svelte'
+  import type { Attachment, AttachmentFieldProps } from './attachments'
+
+  let {
+    value,
+    columnDef,
+    columnId,
+    row,
+    onCommit,
+    onCancel,
+  }: {
+    value: unknown
+    columnDef?: Record<string, unknown>
+    columnId: string
+    row?: unknown
+    onCommit: (v?: unknown) => void
+    onCancel: () => void
+  } = $props()
+
+  const props = $derived(fieldPropsOf((columnDef ?? {}) as { fieldType?: unknown; fieldProps?: Record<string, unknown> }) as AttachmentFieldProps)
+  const title = $derived(typeof columnDef?.header === 'string' ? columnDef.header : 'Attachments')
+</script>
+
+<span class="sv-att-editing" aria-hidden="true"></span>
+<AttachmentDialog
+  {value}
+  {title}
+  {props}
+  {row}
+  {columnId}
+  onDone={(next: Attachment[]) => onCommit(next)}
+  onCancel={() => onCancel()}
+/>

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

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