@svgrid/enterprise 3.1.7 → 3.1.9

package/README.md

@@ -35,6 +35,7 @@
 - **Scheduling automation** - a client-side cron / one-off scheduler (`createScheduler`, `parseCron`, `CRON_PRESETS`) to drive recurring exports and alerts with no backend.
 - **Spreadsheet** (Suite) - `<SvSheet>` and the `<sv-sheet>` custom element over a built-in formula engine: around 185 functions, cross-sheet references, named ranges, absolute and relative refs, dynamic arrays with spill, iterative calculation with convergence, circular-reference detection, volatile-function tracking, and dependency-graph recalculation. In-house, with no runtime dependency.
 - **Spreadsheet file formats** (Suite) - read and write `.xlsx`, `.xls` (BIFF8) and `.ods`, plus `.csv`. Formulas, tables, named ranges, merges, frozen panes, sparklines, charts and images survive an `.xlsx` round trip. Pivot tables round-trip as their computed cells, not as live PivotTable parts, and `.xls` keeps the BIFF8 row and column ceilings.
+- **SvGrid Base** (Suite) - `<SvBase>` from `@svgrid/enterprise/base`: a table database inside your app. Typed fields (select, user, attachment, rating, linked record, lookup, rollup, formula and more), a primary field, saved views (grid, Kanban, calendar, gallery, form) each with its own filter, sorts, groups and row colors, and an expanded record with changes and comments.
 - **SvGrid Studio** (Suite) - a schema-driven data-app layer: `EntitySchema`, memory / SQL / Supabase / REST data sources, a SvelteKit adapter, edit panels, master/detail, schema charts + KPI dashboards, and the project model + codegen behind the visual designer. See [`@svgrid/studio`](https://www.npmjs.com/package/@svgrid/studio).
 
 ## Install

package/dist/SvAlertRuleEditor.svelte

@@ -4,11 +4,13 @@
    * severity / scope, the trigger (data change, relative change, validation,
    * scheduled), the predicate (embedded SvExpressionEditor), and the actions
    * (toast / badge / highlight / flash / prevent-edit / log). Reuses the grid
-   * UI kit so it matches the rest of the app.
+   * UI kit so it matches the rest of the app. Under an SvGrid Base table the
+   * condition is written with the Base's filter instead (`condition-editor.ts`).
    */
   import { SvModal, SvField, SvTextInput, SvDropDownList, SvColorInput, SvTagsInput } from '@svgrid/grid'
   import SvExpressionEditor from './SvExpressionEditor.svelte'
   import { CRON_PRESETS } from './scheduling'
+  import { getAlertConditionEditor } from './alerts/condition-editor'
   import type { ExprColumn } from './expressions/expression-columns'
   import type { PredicateExpr } from './expressions/expression-types'
   import type {
@@ -61,6 +63,10 @@
     { value: 'crossed', label: 'crossed a threshold' },
   ]
 
+  const custom = getAlertConditionEditor()
+  const DEFAULT_TOKENS = ['{value}', '{column}', '{field}']
+  const tokens = $derived(custom?.tokens?.() ?? DEFAULT_TOKENS)
+
   // --- Draft state ---------------------------------------------------------
 
   let name = $state('')
@@ -100,7 +106,7 @@
     severity = rule?.severity ?? 'warning'
     scope = rule?.scope ?? 'row'
     triggerType = rule?.trigger.type ?? 'dataChange'
-    predicate = rule?.predicate ?? { kind: 'const', value: true }
+    predicate = rule?.predicate ?? custom?.initial() ?? { kind: 'const', value: true }
     selected = new Set(rule?.actions.map((a) => a.kind) ?? ['toast'])
     message = rule?.actions.find((a) => a.message)?.message ?? ''
     const styled = rule?.actions.find((a) => a.style)
@@ -133,6 +139,7 @@
     selected = next
   }
 
+  const ownEditor = $derived(custom && custom.accepts(predicate) ? custom : null)
   const showStyle = $derived(selected.has('highlight') || selected.has('badge'))
   const showTargets = $derived(showStyle || selected.has('cellFlash') || scope === 'cell')
 
@@ -230,7 +237,11 @@
     {/if}
 
     <SvField label={triggerType === 'validation' ? 'Reject the edit when' : 'Condition'}>
-      <SvExpressionEditor {columns} bind:value={predicate} {rows} />
+      {#if ownEditor}
+        <ownEditor.component value={predicate} onChange={(next) => (predicate = next)} />
+      {:else}
+        <SvExpressionEditor {columns} bind:value={predicate} {rows} />
+      {/if}
     </SvField>
 
     <fieldset class="ar-fieldset">
@@ -244,8 +255,8 @@
         {/each}
       </div>
       <div class="ar-message">
-        <SvField label="Message (tokens: {'{value}'}, {'{column}'}, {'{field}'})">
-          <SvTextInput value={message} onChange={(v) => (message = v)} placeholder="e.g. {'{'}region{'}'} price hit {'{'}value{'}'}" />
+        <SvField label="Message" hint={`Tokens: ${tokens.slice(0, 4).join(', ')}`}>
+          <SvTextInput value={message} onChange={(v) => (message = v)} placeholder={custom ? `e.g. ${tokens[0] ?? ''} is overdue` : 'e.g. {region} price hit {value}'} />
         </SvField>
       </div>
       {#if showStyle}

package/dist/SvGridAlerts.svelte

@@ -61,6 +61,10 @@
     storageKey?: string
     getValue?: (row: TRow, columnId: string) => unknown
     locale?: string | ReadonlyArray<string>
+    /** A message token the built-in ones do not cover, as text (`{Due date}` in SvGrid Base). */
+    token?: (row: TRow, name: string) => string | undefined
+    /** The rules changed in the manager: added, edited, turned on or off, deleted. */
+    onRulesChange?: (rules: AlertRule[]) => void
     /**
      * Reactively scan `data` for changes (default). Set `false` when a consumer
      * drives evaluation through `pushChanged` (large / streaming feeds) - the
@@ -92,6 +96,8 @@
     storageKey,
     getValue,
     locale,
+    token,
+    onRulesChange,
     watch = true,
     onReady,
     toastCooldownMs = 0,
@@ -131,6 +137,7 @@
     getRowId: rowIdOf,
     get getValue() { return getValue },
     get locale() { return locale },
+    get token() { return token },
   })
 
   // The observer owns all scheduling + change tracking. It runs evaluation on a
@@ -239,6 +246,7 @@
   function onRulesChanged(next: AlertRule[]) {
     rules = next
     rulesVersion += 1
+    onRulesChange?.(next)
   }
 </script>
 

package/dist/SvGridAlerts.svelte.d.ts

@@ -17,6 +17,10 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         storageKey?: string;
         getValue?: (row: TRow, columnId: string) => unknown;
         locale?: string | ReadonlyArray<string>;
+        /** A message token the built-in ones do not cover, as text (`{Due date}` in SvGrid Base). */
+        token?: (row: TRow, name: string) => string | undefined;
+        /** The rules changed in the manager: added, edited, turned on or off, deleted. */
+        onRulesChange?: (rules: AlertRule[]) => void;
         /**
          * Reactively scan `data` for changes (default). Set `false` when a consumer
          * drives evaluation through `pushChanged` (large / streaming feeds) - the

package/dist/SvGridBoard.svelte

@@ -33,6 +33,7 @@
     popIn,
     createDismissableLayer,
     onScrollOutside,
+    getGridExtension,
   } from "@svgrid/grid";
 
   let {
@@ -258,6 +259,36 @@
   const fieldColumns = $derived(
     columns.filter((c) => typeof c.field === "string"),
   );
+  // Columns with a `fieldType` (the fields module) filled in as the grid fills
+  // them, so a card shows a select as its pill, files as thumbnails, a date
+  // in its format - not the raw value.
+  const gridExt = $derived(getGridExtension());
+  const filledByField = $derived.by(() => {
+    const fill = gridExt?.column;
+    const out = new Map<string, Record<string, any>>();
+    for (const c of fieldColumns as Array<Record<string, any>>) {
+      out.set(c.field as string, c.fieldType && fill ? fill(c, fieldColumns) : c);
+    }
+    return out;
+  });
+  // What a field cell reads off the grid it is in (the grid itself when the
+  // board hands it over); a card has a width of its own.
+  // `board` is gone for a moment while the view switches away: cells still read it.
+  const CARD_CELL_GRID = $derived(board?.cellGrid?.(220) ?? { getColumnWidth: () => 220 });
+  function drawsFieldCell(field: string): Record<string, any> | null {
+    const def = filledByField.get(field);
+    if (!def?.fieldType || def.cell != null || !gridExt?.cell || gridExt.hasCell?.(def) === false) return null;
+    return def;
+  }
+  function cardText(row: TData, field: string): string {
+    const def = filledByField.get(field);
+    const value = fieldValue(row, field);
+    const f = def?.formatter as ((x: { value: unknown; row: unknown; column: unknown }) => unknown) | undefined;
+    // The row as a grid cell hands it to a formatter: its id and the record.
+    if (f) return String(f({ value, row: { id: key(row), original: row }, column: { id: def?.id ?? field, columnDef: def } }) ?? "");
+    return fmt(value);
+  }
+  const isBlank = (v: unknown) => v == null || v === "" || (Array.isArray(v) && v.length === 0);
   function headerLabel(field: string): string {
     const col = fieldColumns.find((c) => c.field === field);
     return col && typeof col.header === "string" ? col.header : field;
@@ -647,6 +678,11 @@
         }
       }
     }
+    // A lane marked hideWhenEmpty shows only while a card is in it.
+    if (base.some((l) => l.hideWhenEmpty)) {
+      const used = new Set(data.map((r) => effectiveLane(r)));
+      base = base.filter((l) => !l.hideWhenEmpty || used.has(l.id));
+    }
     if (!laneOrder.length) return base;
     // Apply the drag-reorder overlay: ordered ids first, then any new lanes.
     const byId = new Map(base.map((l) => [l.id, l]));
@@ -1445,12 +1481,23 @@
               {#if metaFields.length}
                 <dl class="sv-board-card-meta">
                   {#each metaFields as field (field)}
-                    {@const v = fmt(fieldValue(row, field))}
-                    {#if v !== ""}
-                      <div class="sv-board-card-metarow">
-                        <dt>{headerLabel(field)}</dt>
-                        <dd>{v}</dd>
-                      </div>
+                    {@const cellDef = drawsFieldCell(field)}
+                    {#if cellDef && gridExt?.cell}
+                      {#if !isBlank(fieldValue(row, field))}
+                        {@const FieldCellView = gridExt.cell}
+                        <div class="sv-board-card-metarow">
+                          <dt>{headerLabel(field)}</dt>
+                          <dd class="sv-board-card-fieldcell"><FieldCellView ctrl={CARD_CELL_GRID} row={{ id: key(row), original: row }} column={{ id: cellDef.id ?? field, columnDef: cellDef }} value={fieldValue(row, field)} /></dd>
+                        </div>
+                      {/if}
+                    {:else}
+                      {@const v = cardText(row, field)}
+                      {#if v !== ""}
+                        <div class="sv-board-card-metarow">
+                          <dt>{headerLabel(field)}</dt>
+                          <dd>{v}</dd>
+                        </div>
+                      {/if}
                     {/if}
                   {/each}
                 </dl>
@@ -1583,7 +1630,7 @@
   {@const labels = labelsOf(row)}
   {@const due = dueOf(row)}
   {@const asg = assigneesOf(row)}
-  {@const comments = countOf(row, board.commentsField)}
+  {@const comments = board.commentCount ? board.commentCount(row) : countOf(row, board.commentsField)}
   {@const attachments = countOf(row, board.attachmentsField)}
   {@const age = ageOf(row)}
   {@const blocked = isFlagged(row)}
@@ -1608,9 +1655,11 @@
           type="button"
           class="sv-board-badge is-meta is-btn"
           title="Comments"
+          aria-label={`${comments} ${comments === 1 ? "comment" : "comments"}`}
           onclick={(e) => {
             e.stopPropagation();
-            commentsOpen[key(row)] = !commentsOpen[key(row)];
+            if (board.onCommentsOpen) board.onCommentsOpen(row);
+            else commentsOpen[key(row)] = !commentsOpen[key(row)];
           }}
         >
           <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.3" stroke-linejoin="round"/></svg>
@@ -1943,10 +1992,10 @@
     line-height: 1.3;
   }
   .sv-board-card-meta {
-    margin: 6px 0 0;
+    margin: 8px 0 0;
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 6px;
   }
   .sv-board-card-metarow {
     display: flex;
@@ -1964,6 +2013,16 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  /* A field drawn as its cell draws it (pills, avatars, thumbnails), on one line. */
+  .sv-board-card-metarow {
+    align-items: center;
+  }
+  .sv-board-card-fieldcell {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    flex: 1;
+  }
   .sv-board-lane-empty {
     text-align: center;
     font-size: 0.76rem;

package/dist/SvGridBulkEditDrawer.svelte

@@ -48,8 +48,14 @@
   )
 
   /** A column's editor type mapped onto the form's control vocabulary. */
-  function controlFor(editorType: string, hasOptions: boolean): FormFieldType {
-    if (hasOptions) return 'select'
+  function controlFor(c: BulkEditField): FormFieldType {
+    const { editorType } = c
+    if (c.options?.length) return c.multiple ? 'multiselect' : 'select'
+    // Field editors: a number typed as the field writes it ("$1,200", "1:30"),
+    // read by the column's own parser; a rating as stars; long text as lines.
+    if (editorType === 'fieldNumber') return 'text'
+    if (editorType === 'fieldRating') return 'rating'
+    if (editorType === 'fieldLongText') return 'textarea'
     switch (editorType) {
       case 'number': return 'number'
       case 'checkbox': return 'checkbox'
@@ -87,7 +93,8 @@
     columns.map((c) => ({
       name: c.id,
       label: c.label,
-      type: controlFor(c.editorType, !!c.options?.length),
+      type: controlFor(c),
+      ...(c.max ? { max: c.max } : {}),
       // Placeholder only. The same sentence repeated under every differing
       // field was five identical lines of noise - the lead says it once.
       placeholder: mixed.has(c.id) ? messages.bulkEditMixed : undefined,
@@ -104,10 +111,11 @@
     for (const [name, raw] of Object.entries(values)) {
       const column = byId.get(name)
       if (!column) continue
-      const next = coerceBulkValue(column.editorType, raw)
+      const next = column.parse && raw !== '' && raw != null ? column.parse(raw) : coerceBulkValue(column.editorType, raw)
       // Untouched fields are the ones that keep every row's own value. A field
       // that opened "Multiple values" and was left blank is untouched too.
-      if (next === baseline[name]) continue
+      // By content: a multiple select's list is a new array each time.
+      if (next === baseline[name] || JSON.stringify(next) === JSON.stringify(baseline[name])) continue
       if (mixed.has(name) && (raw === '' || raw == null)) continue
       edits[name] = next
     }

package/dist/SvGridGallery.svelte

@@ -0,0 +1,286 @@
+<script
+  lang="ts"
+  generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData"
+>
+  // Gallery renderer for SvGrid: rendered in place of the table when the
+  // `gallery` prop is set. Each row is a card - a cover image, a title and a
+  // few fields - in a wall that fills the width. The rows are the grid's
+  // filtered + sorted rows, so its search box, filters and sort flow through.
+  //   - the cover is an image URL or the first image of a list of files
+  //   - a column with a `fieldType` (the fields module) draws as its cell does
+  //     (select pills, avatars, stars), other columns through their formatter
+  //     or `format`
+  //   - cards render in batches as the wall scrolls, so a big table does not
+  //     mount thousands of cards up front
+  // Themes entirely from the grid's `--sg-*` tokens.
+  import type { ColumnDef, GalleryConfig, RowData, TableFeatures } from "@svgrid/grid";
+  import { formatValueForExport, getGridExtension } from "@svgrid/grid";
+
+  let {
+    data,
+    columns,
+    gallery,
+    getRowId,
+  }: {
+    data: ReadonlyArray<TData>;
+    columns: ReadonlyArray<ColumnDef<TFeatures, TData>>;
+    gallery: GalleryConfig<TFeatures, TData>;
+    getRowId?: (row: TData, index: number) => string;
+  } = $props();
+
+  type Def = Record<string, any>;
+  const ext = $derived(getGridExtension());
+  const leaves = $derived.by(() => {
+    const out: Def[] = [];
+    const walk = (cols: ReadonlyArray<Def>) => {
+      for (const c of cols) {
+        if (Array.isArray(c.columns) && c.columns.length) walk(c.columns);
+        else if (typeof c.field === "string") out.push(c);
+      }
+    };
+    walk(columns as unknown as Def[]);
+    // Field-typed columns filled in as the grid fills them (formatter, cell).
+    const fill = ext?.column;
+    return fill ? out.map((c) => (c.fieldType ? fill(c, out) : c)) : out;
+  });
+  const byField = $derived(new Map(leaves.map((c) => [c.field as string, c])));
+  const titleField = $derived((gallery.titleField as string | undefined) ?? (leaves[0]?.field as string | undefined));
+  const coverField = $derived(gallery.coverField as string | undefined);
+  const MAX_FIELDS = 6;
+  const cardFields = $derived(
+    (gallery.cardFields as ReadonlyArray<string> | undefined) ??
+      leaves
+        .map((c) => c.field as string)
+        .filter((f) => f !== titleField && f !== coverField)
+        .slice(0, MAX_FIELDS),
+  );
+  const SIZES = { small: 180, medium: 240, large: 320 } as const;
+  const cardWidth = $derived(
+    typeof gallery?.cardSize === "number" ? gallery.cardSize : SIZES[gallery?.cardSize ?? "medium"],
+  );
+  const showLabels = $derived(gallery.showLabels !== false);
+
+  // ---- values ----
+  const valueOf = (row: TData, field: string) => {
+    const def = byField.get(field);
+    return def?.fieldFn ? def.fieldFn(row) : (row as Record<string, unknown>)[field];
+  };
+  // `id`: the card's key, so a formatter gets the row as a grid cell hands it over.
+  function text(row: TData, field: string, id = ""): string {
+    const def = byField.get(field);
+    const value = valueOf(row, field);
+    if (typeof def?.formatter === "function") {
+      return String(def.formatter({ value, row: { id, original: row }, column: { id: def.id ?? field, columnDef: def } }) ?? "");
+    }
+    if (def?.format) return formatValueForExport(value, def.format);
+    if (value == null) return "";
+    if (value instanceof Date) return value.toLocaleDateString();
+    if (typeof value === "boolean") return value ? "Yes" : "No";
+    if (Array.isArray(value)) return value.map((v) => (v && typeof v === "object" ? (v.name ?? v.label ?? "") : String(v))).join(", ");
+    return String(value);
+  }
+  const isBlank = (v: unknown) => v == null || v === "" || (Array.isArray(v) && v.length === 0);
+  /** The column when a field type draws its own cell, else null. */
+  function cellDef(field: string): Def | null {
+    const def = byField.get(field);
+    if (!def?.fieldType || def.cell != null || !ext?.cell || ext.hasCell?.(def) === false) return null;
+    return def;
+  }
+  // What a field cell reads off the grid it is in (the grid itself when the
+  // gallery hands it over); a card has a width of its own.
+  // `gallery` is gone for a moment while the view switches away: cells still read it.
+  const CARD_GRID = $derived(gallery?.cellGrid?.(cardWidth - 24) ?? { getColumnWidth: () => cardWidth - 24 });
+
+  // ---- cover ----
+  const IMAGE_URL = /^(https?:|blob:|data:image\/(png|jpeg|gif|webp|avif|svg\+xml);)/i;
+  const isImageFile = (f: { type?: string; name?: string; url?: string }) =>
+    (f.type ?? "").startsWith("image/") || /\.(png|jpe?g|gif|webp|avif|svg)$/i.test(f.name ?? f.url ?? "");
+  function coverUrl(row: TData): string | null {
+    if (!coverField) return null;
+    const v = valueOf(row, coverField) as unknown;
+    const pick = (u: unknown) => (typeof u === "string" && IMAGE_URL.test(u.trim()) ? u.trim() : null);
+    if (typeof v === "string") return pick(v);
+    if (Array.isArray(v)) {
+      for (const f of v) {
+        if (typeof f === "string" && pick(f)) return pick(f);
+        if (f && typeof f === "object" && isImageFile(f)) return pick(f.thumbnailUrl ?? f.url);
+      }
+      return null;
+    }
+    if (v && typeof v === "object") return pick((v as { url?: unknown }).url);
+    return null;
+  }
+
+  // ---- identity + batches ----
+  const keyOf = (row: TData, i: number) => (getRowId ? getRowId(row, i) : String(i));
+  const BATCH = 120;
+  let shownCount = $state(BATCH);
+  const shown = $derived(data.slice(0, shownCount));
+  // A new filter or search starts the wall from the top batch again.
+  $effect(() => {
+    void data;
+    shownCount = BATCH;
+  });
+  function more(node: HTMLElement) {
+    const io = new IntersectionObserver((entries) => {
+      if (entries.some((e) => e.isIntersecting)) shownCount += BATCH;
+    }, { rootMargin: "400px" });
+    io.observe(node);
+    return { destroy: () => io.disconnect() };
+  }
+
+  const open = (row: TData) => gallery.onCardClick?.(row);
+  const fieldLabel = (field: string) => {
+    const h = byField.get(field)?.header;
+    return typeof h === "string" ? h : field;
+  };
+  const iconOf = (field: string) => {
+    const def = byField.get(field);
+    return def ? (ext?.headerIcon?.(def) ?? null) : null;
+  };
+</script>
+
+<div class="sv-gal" style:--sv-gal-card={`${cardWidth}px`} role="list" aria-label="Records">
+  {#each shown as row, i (keyOf(row, i))}
+    {@const url = coverUrl(row)}
+    {@const title = titleField ? text(row, titleField, keyOf(row, i)) : ""}
+    {#if gallery.card}
+      <div class="sv-gal-custom" role="listitem">
+        {#if gallery.onCardClick}
+          <!-- A drawn card is one button: a click or Enter opens it. -->
+          <div
+            class="sv-gal-custom-hit"
+            role="button"
+            tabindex="0"
+            onclick={() => open(row)}
+            onkeydown={(e) => {
+              if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' ')) return
+              e.preventDefault()
+              open(row)
+            }}
+          >{@render gallery.card(row)}</div>
+        {:else}
+          {@render gallery.card(row)}
+        {/if}
+      </div>
+    {:else}
+      <!-- The title is the card's button; a click anywhere else on the card does the same. -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+      <div class="sv-gal-card" class:is-clickable={!!gallery.onCardClick} role="listitem" onclick={() => open(row)}>
+        {#if coverField}
+          <div class="sv-gal-cover" class:is-contain={gallery.coverFit === "contain"} class:is-empty={!url}>
+            {#if url}<img src={url} alt="" loading="lazy" decoding="async" />{/if}
+          </div>
+        {/if}
+        <div class="sv-gal-body">
+          {#if gallery.onCardClick}
+            <button
+              type="button"
+              class="sv-gal-title"
+              onclick={(e) => {
+                e.stopPropagation();
+                open(row);
+              }}>{title || "Untitled"}</button
+            >
+          {:else}
+            <div class="sv-gal-title">{title || "Untitled"}</div>
+          {/if}
+          {#each cardFields as field (field)}
+            {@const def = cellDef(field)}
+            {@const value = valueOf(row, field)}
+            {#if !isBlank(value)}
+              <div class="sv-gal-field">
+                {#if showLabels}
+                  <div class="sv-gal-label">
+                    {#if iconOf(field)}
+                      <svg viewBox="0 0 24 24" width="12" height="12" aria-hidden="true"><path d={iconOf(field)} fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" /></svg>
+                    {/if}
+                    {fieldLabel(field)}
+                  </div>
+                {/if}
+                <div class="sv-gal-value">
+                  {#if def && ext?.cell}
+                    {@const Cell = ext.cell}
+                    <Cell ctrl={CARD_GRID} row={{ id: keyOf(row, i), original: row }} column={{ id: def.id ?? field, columnDef: def }} {value} />
+                  {:else}
+                    {text(row, field, keyOf(row, i))}
+                  {/if}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        </div>
+      </div>
+    {/if}
+  {:else}
+    <p class="sv-gal-empty">{gallery.emptyText ?? "No records"}</p>
+  {/each}
+  {#if shownCount < data.length}
+    <div class="sv-gal-more" use:more aria-hidden="true"></div>
+  {/if}
+</div>
+
+<style>
+  .sv-gal {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sv-gal-card)), 1fr));
+    grid-auto-rows: max-content;
+    gap: 18px;
+    padding: 18px;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+    align-content: start;
+    background: color-mix(in srgb, var(--sg-fg, #0f172a) 3%, var(--sg-bg, #fff));
+    color: var(--sg-fg, #0f172a);
+    font-family: var(--sg-font, inherit);
+    font-size: 13px;
+  }
+  .sv-gal-card {
+    min-width: 0;
+    overflow: hidden;
+    background: var(--sg-bg, #fff);
+    border: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 9%, transparent);
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
+  }
+  .sv-gal-card.is-clickable { cursor: pointer; }
+  .sv-gal-card.is-clickable:hover {
+    transform: translateY(-2px);
+    border-color: color-mix(in srgb, var(--sg-fg, #0f172a) 14%, transparent);
+    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 28px -12px rgba(15, 23, 42, 0.32);
+  }
+  .sv-gal-card:has(.sv-gal-title:focus-visible) { outline: 2px solid var(--sg-accent, #2563eb); outline-offset: 2px; }
+  .sv-gal-cover {
+    aspect-ratio: 4 / 3;
+    overflow: hidden;
+    background: color-mix(in srgb, var(--sg-fg, #0f172a) 5%, transparent);
+  }
+  .sv-gal-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
+  .sv-gal-cover.is-contain img { object-fit: contain; }
+  .sv-gal-card.is-clickable:hover .sv-gal-cover img { transform: scale(1.04); }
+  .sv-gal-body { padding: 12px 14px 14px; display: grid; gap: 9px; min-width: 0; }
+  .sv-gal-title {
+    padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; font-size: 14.5px; line-height: 1.3;
+    letter-spacing: -0.005em; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: inherit; outline: none;
+  }
+  .sv-gal-field { min-width: 0; }
+  .sv-gal-label {
+    display: flex; align-items: center; gap: 4px; margin-bottom: 2px;
+    font-size: 10.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--sg-muted, #64748b);
+  }
+  .sv-gal-label svg { flex: none; }
+  /* Values are read here, not edited: a click on one opens the card. */
+  .sv-gal-value { min-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
+  .sv-gal-custom { min-width: 0; }
+  .sv-gal-custom-hit { cursor: pointer; border-radius: 12px; outline: none; }
+  .sv-gal-custom-hit:focus-visible { outline: 2px solid var(--sg-accent, #2563eb); outline-offset: 2px; }
+  .sv-gal-empty { grid-column: 1 / -1; color: var(--sg-muted, #64748b); margin: 8px 2px; }
+  .sv-gal-more { grid-column: 1 / -1; height: 1px; }
+  @media (prefers-reduced-motion: reduce) {
+    .sv-gal-card, .sv-gal-cover img { transition: none; }
+    .sv-gal-card.is-clickable:hover, .sv-gal-card.is-clickable:hover .sv-gal-cover img { transform: none; }
+  }
+</style>

package/dist/SvGridGallery.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { ColumnDef, GalleryConfig, RowData, TableFeatures } from "@svgrid/grid";
+declare function $$render<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(): {
+    props: {
+        data: ReadonlyArray<TData>;
+        columns: ReadonlyArray<ColumnDef<TFeatures, TData>>;
+        gallery: GalleryConfig<TFeatures, TData>;
+        getRowId?: (row: TData, index: number) => string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData> {
+    props(): ReturnType<typeof $$render<TFeatures, TData>>['props'];
+    events(): ReturnType<typeof $$render<TFeatures, TData>>['events'];
+    slots(): ReturnType<typeof $$render<TFeatures, TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TFeatures, TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TFeatures, TData>['props']>, ReturnType<__sveltets_Render<TFeatures, TData>['events']>, ReturnType<__sveltets_Render<TFeatures, TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TFeatures, TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TFeatures, TData>['exports']>;
+    <TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(internal: unknown, props: ReturnType<__sveltets_Render<TFeatures, TData>['props']> & {}): ReturnType<__sveltets_Render<TFeatures, TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const SvGridGallery: $$IsomorphicComponent;
+type SvGridGallery<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData> = InstanceType<typeof SvGridGallery<TFeatures, TData>>;
+export default SvGridGallery;