@myko/ui-svelte 4.3.0 → 4.4.0-canary.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@myko/core": "^4.3.0"
+    "@myko/core": "^4.4.0-canary.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.0.0",
@@ -60,5 +60,5 @@
     "**/*.css"
   ],
   "type": "module",
-  "version": "4.3.0"
+  "version": "4.4.0-canary.2"
 }

package/src/lib/components/EntityDiffBadge.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { DiffStatus } from '../utils/entity-diff.js';
+
+  interface Props {
+    status: DiffStatus;
+  }
+
+  let { status }: Props = $props();
+
+  const config: Record<DiffStatus, { label: string; class: string }> = {
+    added: { label: 'Added', class: 'badge-success' },
+    removed: { label: 'Removed', class: 'badge-error' },
+    modified: { label: 'Modified', class: 'badge-warning' },
+    unchanged: { label: 'Unchanged', class: 'badge-ghost' },
+  };
+</script>
+
+<span class="badge badge-sm {config[status].class}">{config[status].label}</span>

package/src/lib/components/EntityDiffFields.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+  import type { FieldDiff } from '../utils/entity-diff.js';
+
+  interface Props {
+    fields: FieldDiff[];
+    /** Full current entity data (for side-by-side view). */
+    currentData?: Record<string, unknown>;
+    /** Full incoming entity data (for side-by-side view). */
+    incomingData?: Record<string, unknown>;
+  }
+
+  let { fields, currentData, incomingData }: Props = $props();
+
+  const hasSideBySide = $derived(!!currentData && !!incomingData);
+
+  function formatValue(v: unknown): string {
+    if (v === undefined || v === null) return '';
+    if (typeof v === 'object') return JSON.stringify(v, null, 2);
+    return String(v);
+  }
+
+  function isObject(v: unknown): v is Record<string, unknown> {
+    return typeof v === 'object' && v !== null && !Array.isArray(v);
+  }
+
+  interface DiffLine {
+    key: string;
+    status: 'added' | 'removed' | 'changed' | 'unchanged';
+    oldVal?: string;
+    newVal?: string;
+  }
+
+  function computeJsonDiff(oldVal: unknown, newVal: unknown): DiffLine[] | null {
+    if (!isObject(oldVal) || !isObject(newVal)) return null;
+    const allKeys = new Set([...Object.keys(oldVal), ...Object.keys(newVal)]);
+    const lines: DiffLine[] = [];
+    for (const key of allKeys) {
+      const o = oldVal[key];
+      const n = newVal[key];
+      if (!(key in newVal)) {
+        lines.push({ key, status: 'removed', oldVal: JSON.stringify(o) });
+      } else if (!(key in oldVal)) {
+        lines.push({ key, status: 'added', newVal: JSON.stringify(n) });
+      } else if (JSON.stringify(o) !== JSON.stringify(n)) {
+        lines.push({ key, status: 'changed', oldVal: JSON.stringify(o), newVal: JSON.stringify(n) });
+      } else {
+        lines.push({ key, status: 'unchanged', oldVal: JSON.stringify(o), newVal: JSON.stringify(n) });
+      }
+    }
+    return lines;
+  }
+</script>
+
+{#if hasSideBySide}
+  <div class="diff-fields">
+    {#each fields as field}
+      {@const jsonDiff = computeJsonDiff(field.oldValue, field.newValue)}
+      <div class="field-section">
+        <span class="field-name">{field.field}</span>
+        {#if jsonDiff}
+          <div class="diff-table json-layout">
+            <div class="diff-header json-layout">
+              <span class="col-label col-key"></span>
+              <span class="col-label">existing</span>
+              <span class="col-label">pending</span>
+              <span class="col-label">result</span>
+            </div>
+            {#each jsonDiff as line}
+              <div
+                class="diff-row json-layout"
+                class:row-added={line.status === 'added'}
+                class:row-removed={line.status === 'removed'}
+                class:row-changed={line.status === 'changed'}
+              >
+                <span class="cell cell-key">{line.key}</span>
+                <span class="cell cell-existing">{line.status === 'added' ? '' : line.oldVal}</span>
+                <span class="cell cell-pending">{line.status === 'removed' ? '' : line.newVal}</span>
+                <span class="cell cell-result">{line.status === 'removed' ? '' : (line.newVal ?? line.oldVal)}</span>
+              </div>
+            {/each}
+          </div>
+        {:else}
+          <div class="diff-table scalar-layout">
+            <div class="diff-header scalar-layout">
+              <span class="col-label">existing</span>
+              <span class="col-label">pending</span>
+              <span class="col-label">result</span>
+            </div>
+            <div
+              class="diff-row scalar-layout"
+              class:row-changed={field.oldValue !== undefined && field.newValue !== undefined}
+              class:row-added={field.oldValue === undefined}
+              class:row-removed={field.newValue === undefined}
+            >
+              <span class="cell cell-existing">{formatValue(field.oldValue)}</span>
+              <span class="cell cell-pending">{formatValue(field.newValue)}</span>
+              <span class="cell cell-result">{formatValue(field.newValue)}</span>
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{:else}
+  <div class="pl-6 text-sm space-y-1">
+    {#each fields as field}
+      <div class="font-mono">
+        <span class="text-base-content/60">{field.field}:</span>
+        {#if field.oldValue === undefined}
+          <span class="text-success">+ {formatValue(field.newValue)}</span>
+        {:else if field.newValue === undefined}
+          <span class="text-error">- {formatValue(field.oldValue)}</span>
+        {:else}
+          <span class="text-error">{formatValue(field.oldValue)}</span>
+          <span class="text-base-content/40">&rarr;</span>
+          <span class="text-success">{formatValue(field.newValue)}</span>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .diff-fields {
+    margin-left: 1.5rem;
+    font-size: var(--rs-fs-xs, 0.75rem);
+    font-family: monospace;
+    overflow-x: auto;
+  }
+
+  .field-section {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid oklch(var(--bc) / 0.05);
+  }
+
+  .field-section:last-child {
+    border-bottom: none;
+  }
+
+  .field-name {
+    display: block;
+    opacity: 0.5;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    margin-bottom: 0.375rem;
+    font-family: sans-serif;
+  }
+
+  /* --- Diff table --- */
+  .diff-table {
+    min-width: max-content;
+  }
+
+  .diff-header {
+    display: grid;
+    gap: 1.5rem;
+    padding: 0 0.5rem 0.25rem;
+  }
+
+  .col-label {
+    font-size: 0.6rem;
+    opacity: 0.35;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .col-label.col-key {
+    opacity: 0;
+  }
+
+  .diff-row {
+    display: grid;
+    gap: 1.5rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+  }
+
+  /* Grid layouts */
+  .json-layout {
+    grid-template-columns: minmax(100px, max-content) 1fr 1fr 1fr;
+  }
+
+  .scalar-layout {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  /* Row backgrounds */
+  .diff-row.row-added {
+    background: oklch(var(--su) / 0.08);
+  }
+
+  .diff-row.row-removed {
+    background: oklch(var(--er) / 0.08);
+  }
+
+  .diff-row.row-changed {
+    background: oklch(var(--wa) / 0.08);
+  }
+
+  /* Cells */
+  .cell {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .cell-key {
+    opacity: 0.6;
+  }
+
+  .cell-existing {
+    color: oklch(var(--bc) / 0.5);
+  }
+
+  .cell-pending {
+    color: oklch(var(--bc) / 0.8);
+  }
+
+  .cell-result {
+    color: oklch(var(--bc) / 0.6);
+  }
+
+  /* Row-specific highlight colors */
+  .row-removed .cell-existing {
+    color: oklch(var(--er));
+  }
+
+  .row-added .cell-pending,
+  .row-added .cell-result {
+    color: oklch(var(--su));
+  }
+
+  .row-changed .cell-existing {
+    color: oklch(var(--er));
+  }
+
+  .row-changed .cell-pending {
+    color: oklch(var(--wa));
+  }
+
+  .row-changed .cell-result {
+    color: oklch(var(--wa));
+  }
+</style>

package/src/lib/components/EntityDiffNode.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { EntityDiff } from '../utils/entity-diff.js';
+  import EntityDiffBadge from './EntityDiffBadge.svelte';
+  import EntityDiffFields from './EntityDiffFields.svelte';
+
+  interface Props {
+    node: EntityDiff;
+    showUnchanged?: boolean;
+    /** Set of "Type:id" keys excluded from import. */
+    excluded?: Set<string>;
+    /** Callback to toggle an entity's excluded state. */
+    onToggleExclude?: (key: string) => void;
+    /** Whether this is the root node (always visible). */
+    isRoot?: boolean;
+  }
+
+  let { node, showUnchanged = false, excluded, onToggleExclude, isRoot = false }: Props = $props();
+  let expanded = $state(node.status !== 'unchanged' || isRoot);
+
+  const key = $derived(`${node.type}:${node.id}`);
+  const isExcluded = $derived(excluded?.has(key) ?? false);
+  const canExclude = $derived(
+    !isRoot && (node.status === 'modified' || node.status === 'added' || node.status === 'removed'),
+  );
+
+  const toggleExclude = (e: Event) => {
+    e.stopPropagation();
+    onToggleExclude?.(key);
+  };
+
+  const hasChangedDescendant = $derived.by((): boolean => {
+    const check = (n: EntityDiff): boolean => {
+      if (n.status !== 'unchanged') return true;
+      return n.children.some(check);
+    };
+    return node.children.some(check);
+  });
+
+  const visible = $derived(
+    isRoot || showUnchanged || node.status !== 'unchanged' || hasChangedDescendant,
+  );
+  const hasDetails = $derived(
+    (node.fields && node.fields.length > 0) || node.children.length > 0,
+  );
+</script>
+
+{#if visible}
+  <div class="border-l-2 border-base-300 pl-3 py-1" class:opacity-40={isExcluded}>
+    <div class="flex items-center gap-1">
+      <button
+        class="flex items-center gap-2 flex-1 text-left hover:bg-base-200 rounded px-1"
+        onclick={() => (expanded = !expanded)}
+        disabled={!hasDetails}
+      >
+        {#if hasDetails}
+          <span class="text-xs">{expanded ? '▼' : '▶'}</span>
+        {:else}
+          <span class="text-xs w-3"></span>
+        {/if}
+        <span class="text-xs text-base-content/50">{node.type}</span>
+        <span class="font-medium">{node.name ?? node.id}</span>
+        <EntityDiffBadge status={node.status} />
+        {#if isExcluded}
+          <span class="badge badge-sm badge-ghost">keeping original</span>
+        {/if}
+      </button>
+      {#if canExclude && onToggleExclude}
+        <button
+          class="btn btn-xs btn-ghost text-xs opacity-60 hover:opacity-100"
+          onclick={toggleExclude}
+          title={isExcluded ? 'Accept incoming version' : 'Keep original version'}
+        >
+          {isExcluded ? 'overwrite' : 'keep original'}
+        </button>
+      {/if}
+    </div>
+
+    {#if expanded && !isExcluded}
+      {#if node.fields && node.fields.length > 0}
+        <EntityDiffFields
+          fields={node.fields}
+          currentData={node.currentData}
+          incomingData={node.incomingData}
+        />
+      {/if}
+
+      {#if node.children.length > 0}
+        <div class="pl-2">
+          {#each node.children as child (child.type + ':' + child.id)}
+            <svelte:self node={child} {showUnchanged} {excluded} {onToggleExclude} />
+          {/each}
+        </div>
+      {/if}
+    {/if}
+  </div>
+{/if}

package/src/lib/components/EntityDiffTree.svelte

@@ -0,0 +1,608 @@
+<script lang="ts">
+  import type { ExportedEntity, EntityDiff, DiffStatus } from '../utils/entity-diff.js';
+  import { diffEntityLists } from '../utils/entity-diff.js';
+  import type { ParentFkFields } from '../utils/entity-tree.js';
+  import { buildDiffTree } from '../utils/entity-tree.js';
+  import EntityDiffBadge from './EntityDiffBadge.svelte';
+
+  interface Props {
+    /** Root entity type (e.g., "Project") */
+    rootType: string;
+    /** Root entity ID */
+    rootId: string;
+    /** Entities currently on the server */
+    current: ExportedEntity[];
+    /** Entities from the incoming source (file or snapshot) */
+    incoming: ExportedEntity[];
+    /** Maps child entity type to parent FK field names */
+    parentFkFields: ParentFkFields;
+    /** Set of "Type:id" keys the user chose to exclude from import */
+    excluded?: Set<string>;
+    /** Whether to show unchanged entities */
+    showUnchanged?: boolean;
+  }
+
+  let { rootType, rootId, current, incoming, parentFkFields, excluded = $bindable(new Set()), showUnchanged = false }: Props = $props();
+
+  const diffs = $derived(diffEntityLists(current, incoming));
+  const tree = $derived(buildDiffTree(rootType, rootId, diffs, parentFkFields));
+
+  const toggleExclude = (key: string) => {
+    const next = new Set(excluded);
+    if (next.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    excluded = next;
+  };
+
+  /** Action labels per status. First = apply action, second = skip action. */
+  function actionLabels(status: DiffStatus): [string, string] {
+    switch (status) {
+      case 'removed': return ['delete', 'keep'];
+      case 'added': return ['add', 'skip'];
+      case 'modified': return ['update', 'keep'];
+      default: return ['apply', 'skip'];
+    }
+  }
+
+
+  const stats = $derived.by(() => {
+    let toDelete = 0, toUpdate = 0, toAdd = 0, toSkip = 0, unchanged = 0;
+    for (const [key, d] of diffs) {
+      if (d.status === 'unchanged') { unchanged++; continue; }
+      if (excluded.has(key)) { toSkip++; continue; }
+      if (d.status === 'removed') toDelete++;
+      else if (d.status === 'modified') toUpdate++;
+      else if (d.status === 'added') toAdd++;
+    }
+    return { toDelete, toUpdate, toAdd, toSkip, unchanged };
+  });
+
+  // --- Batch operations ---
+
+  /** Keys grouped by change type (excludes unchanged). */
+  const keysByStatus = $derived.by(() => {
+    const groups: Record<string, string[]> = { added: [], removed: [], modified: [] };
+    for (const [key, d] of diffs) {
+      if (d.status !== 'unchanged') groups[d.status]?.push(key);
+    }
+    return groups;
+  });
+
+  /** Keys grouped by entity type (excludes unchanged). */
+  const keysByEntityType = $derived.by(() => {
+    const groups: Record<string, string[]> = {};
+    for (const [key, d] of diffs) {
+      if (d.status === 'unchanged') continue;
+      const [type] = key.split(':');
+      (groups[type] ??= []).push(key);
+    }
+    return groups;
+  });
+
+  function batchApply(keys: string[]) {
+    const next = new Set(excluded);
+    for (const k of keys) next.delete(k);
+    excluded = next;
+    saveExpanded(expandedSet);
+  }
+
+  function batchSkip(keys: string[]) {
+    const next = new Set(excluded);
+    for (const k of keys) next.add(k);
+    excluded = next;
+    saveExpanded(expandedSet);
+  }
+
+  // --- Flatten tree into grid rows ---
+
+  type FlatRow =
+    | { kind: 'entity'; node: EntityDiff; depth: number; isRoot: boolean }
+    | { kind: 'field'; fieldName: string; existing: string; pending: string; result: string; status: 'added' | 'removed' | 'changed'; depth: number; parentKey: string };
+
+  const STORAGE_KEY = `rship:diff-expanded:${rootType}:${rootId}`;
+
+  let expandedSet = $state(loadExpanded());
+
+  function loadExpanded(): Set<string> {
+    try {
+      const stored = sessionStorage.getItem(STORAGE_KEY);
+      if (stored) return new Set(JSON.parse(stored));
+    } catch { /* ignore */ }
+    // Default: only root expanded
+    return new Set([`${rootType}:${rootId}`]);
+  }
+
+  function saveExpanded(set: Set<string>) {
+    try {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify([...set]));
+    } catch { /* ignore */ }
+  }
+
+  function hasChanges(node: EntityDiff): boolean {
+    if (node.status !== 'unchanged') return true;
+    return node.children.some(hasChanges);
+  }
+
+  function toggleExpand(key: string) {
+    const next = new Set(expandedSet);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    expandedSet = next;
+    saveExpanded(next);
+  }
+
+  function formatVal(v: unknown): string {
+    if (v === undefined || v === null) return '';
+    if (typeof v === 'object') return JSON.stringify(v, null, 2);
+    return String(v);
+  }
+
+  const rows = $derived.by((): FlatRow[] => {
+    const result: FlatRow[] = [];
+
+    const walk = (node: EntityDiff, depth: number, isRoot: boolean) => {
+      const key = `${node.type}:${node.id}`;
+      const visible = isRoot || showUnchanged || node.status !== 'unchanged' || hasChanges(node);
+      if (!visible) return;
+
+      result.push({ kind: 'entity', node, depth, isRoot });
+
+      const isExpanded = expandedSet.has(key);
+      const isExcluded = excluded.has(key);
+
+      if (isExpanded && !isExcluded) {
+        // Emit field rows for modified entities
+        if (node.fields && node.fields.length > 0) {
+          for (const f of node.fields) {
+            const oldStr = formatVal(f.oldValue);
+            const newStr = formatVal(f.newValue);
+            const status: 'added' | 'removed' | 'changed' =
+              f.oldValue === undefined ? 'added' :
+              f.newValue === undefined ? 'removed' : 'changed';
+            result.push({
+              kind: 'field',
+              fieldName: f.field,
+              existing: oldStr,
+              pending: newStr,
+              result: status === 'removed' ? '' : newStr,
+              status,
+              depth: depth + 1,
+              parentKey: key,
+            });
+          }
+        }
+
+        // Emit fields for added/removed entities (all fields as a block)
+        if (!node.fields || node.fields.length === 0) {
+          const data = node.status === 'removed' ? node.currentData : node.status === 'added' ? node.incomingData : null;
+          if (data) {
+            for (const [k, v] of Object.entries(data)) {
+              if (k === 'hash') continue;
+              const valStr = formatVal(v);
+              result.push({
+                kind: 'field',
+                fieldName: k,
+                existing: node.status === 'removed' ? valStr : '',
+                pending: node.status === 'added' ? valStr : '',
+                result: node.status === 'added' ? valStr : '',
+                status: node.status === 'removed' ? 'removed' : 'added',
+                depth: depth + 1,
+                parentKey: key,
+              });
+            }
+          }
+        }
+
+        // Recurse into children
+        for (const child of node.children) {
+          walk(child, depth + 1, false);
+        }
+      }
+    };
+
+    walk(tree, 0, true);
+    return result;
+  });
+</script>
+
+<div class="diff-grid-wrapper">
+  <!-- Summary + batch controls -->
+  <div class="summary-panel">
+    <div class="summary-heading">Apply will:</div>
+    <div class="summary-rows">
+      {#each Object.entries(keysByStatus) as [status, keys]}
+        {#if keys.length > 0}
+          {@const activeKeys = keys.filter(k => !excluded.has(k))}
+          {@const skippedKeys = keys.filter(k => excluded.has(k))}
+          {@const [applyLabel, skipLabel] = actionLabels(status as DiffStatus)}
+          {@const allExcluded = activeKeys.length === 0}
+          {@const noneExcluded = skippedKeys.length === 0}
+          {@const statusColor = status === 'removed' ? 'text-error' : status === 'added' ? 'text-success' : 'text-warning'}
+          <div class="summary-row">
+            <span class="summary-action {statusColor}">{applyLabel} {activeKeys.length}</span>
+            {#if skippedKeys.length > 0}
+              <span class="summary-skip">{skipLabel} {skippedKeys.length}</span>
+            {/if}
+            <span class="summary-total">of {keys.length}</span>
+            <div class="join summary-btns">
+              <button class="join-item btn btn-xs" class:btn-active={noneExcluded} onclick={() => batchApply(keys)}>{applyLabel} all</button>
+              <button class="join-item btn btn-xs" class:btn-active={allExcluded} onclick={() => batchSkip(keys)}>{skipLabel} all</button>
+            </div>
+            <div class="dropdown dropdown-bottom dropdown-end">
+              <div tabindex="0" role="button" class="btn btn-xs btn-ghost opacity-50">by type</div>
+              <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+              <div tabindex="0" class="dropdown-content menu bg-base-200 rounded-lg shadow-lg z-10 p-2 w-64">
+                {#each Object.entries(keysByEntityType).sort(([a], [b]) => a.localeCompare(b)) as [entityType, etKeys]}
+                  {@const matching = etKeys.filter(k => keys.includes(k))}
+                  {#if matching.length > 0}
+                    {@const etAllExcluded = matching.every(k => excluded.has(k))}
+                    {@const etNoneExcluded = matching.every(k => !excluded.has(k))}
+                    <div class="batch-type-row">
+                      <span class="batch-type-name">{entityType} <span class="opacity-40">({matching.length})</span></span>
+                      <div class="join">
+                        <button class="join-item btn btn-xs" class:btn-active={etNoneExcluded} onclick={() => batchApply(matching)}>apply</button>
+                        <button class="join-item btn btn-xs" class:btn-active={etAllExcluded} onclick={() => batchSkip(matching)}>skip</button>
+                      </div>
+                    </div>
+                  {/if}
+                {/each}
+              </div>
+            </div>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  </div>
+
+  <!-- Column headers -->
+  <div class="grid-header">
+    <span class="col-head col-tree"></span>
+    <span class="col-head">Existing</span>
+    <span class="col-head">Pending</span>
+    <span class="col-head">Result</span>
+    <span class="col-head col-action"></span>
+  </div>
+
+  <!-- Grid rows -->
+  <div class="grid-body">
+    {#each rows as row, i (row.kind === 'entity' ? `${row.node.type}:${row.node.id}` : `${row.parentKey}:${row.fieldName}`)}
+      {#if row.kind === 'entity'}
+        {@const key = `${row.node.type}:${row.node.id}`}
+        {@const isExpanded = expandedSet.has(key)}
+        {@const isExcluded = excluded.has(key)}
+        {@const canExclude = !row.isRoot && (row.node.status === 'modified' || row.node.status === 'added' || row.node.status === 'removed')}
+        {@const hasDetails = (row.node.fields && row.node.fields.length > 0) || row.node.children.length > 0 || !!row.node.currentData || !!row.node.incomingData}
+
+        {@const willDelete = !isExcluded && row.node.status === 'removed'}
+        {@const willAdd = !isExcluded && row.node.status === 'added'}
+        {@const willUpdate = !isExcluded && row.node.status === 'modified'}
+        {@const willSkip = isExcluded && row.node.status !== 'unchanged'}
+        <div
+          class="grid-row entity-row"
+          class:outcome-delete={willDelete}
+          class:outcome-add={willAdd}
+          class:outcome-update={willUpdate}
+          class:outcome-skip={willSkip}
+        >
+          <!-- Tree column -->
+          <div class="cell cell-tree" style:padding-left="{row.depth * 1.25}rem">
+            <button
+              class="tree-toggle"
+              onclick={() => toggleExpand(key)}
+              disabled={!hasDetails}
+            >
+              {#if hasDetails}
+                <span class="chevron">{isExpanded ? '▼' : '▶'}</span>
+              {:else}
+                <span class="chevron-spacer"></span>
+              {/if}
+              <span class="entity-type">{row.node.type}</span>
+              <span class="entity-name">{row.node.name ?? row.node.id}</span>
+              {#if row.node.status === 'unchanged'}
+                <EntityDiffBadge status={row.node.status} />
+              {/if}
+            </button>
+          </div>
+
+          <!-- Value columns — empty for entity header rows, fields show below -->
+          <div class="cell cell-val"></div>
+          <div class="cell cell-val"></div>
+          <div class="cell cell-val"></div>
+
+          <!-- Action column -->
+          <div class="cell cell-action">
+            {#if canExclude}
+              {@const [applyLabel, skipLabel] = actionLabels(row.node.status)}
+              <div class="join">
+                <button
+                  class="join-item btn btn-xs {!isExcluded ? (row.node.status === 'removed' ? 'btn-error' : row.node.status === 'added' ? 'btn-success' : row.node.status === 'modified' ? 'btn-warning' : '') : ''}"
+                  class:btn-active={!isExcluded}
+                  onclick={(e) => { e.stopPropagation(); if (isExcluded) toggleExclude(key); }}
+                >{applyLabel}</button>
+                <button
+                  class="join-item btn btn-xs"
+                  class:btn-active={isExcluded}
+                  onclick={(e) => { e.stopPropagation(); if (!isExcluded) toggleExclude(key); }}
+                >{skipLabel}</button>
+              </div>
+            {/if}
+          </div>
+        </div>
+
+      {:else}
+        <!-- Field row -->
+        <div
+          class="grid-row field-row"
+          class:field-added={row.status === 'added'}
+          class:field-removed={row.status === 'removed'}
+          class:field-changed={row.status === 'changed'}
+        >
+          <div class="cell cell-tree cell-field-name" style:padding-left="{row.depth * 1.25 + 1.25}rem">
+            {row.fieldName}
+          </div>
+          <div class="cell cell-val cell-existing"><pre class="val">{row.existing}</pre></div>
+          <div class="cell cell-val cell-pending"><pre class="val">{row.pending}</pre></div>
+          <div class="cell cell-val cell-result"><pre class="val">{row.result}</pre></div>
+          <div class="cell cell-action"></div>
+        </div>
+      {/if}
+    {/each}
+  </div>
+</div>
+
+<style>
+  .diff-grid-wrapper {
+    font-size: var(--rs-fs-xs, 0.75rem);
+  }
+
+  .summary-panel {
+    margin-bottom: 0.75rem;
+    padding: 0.75rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.5rem;
+  }
+
+  .summary-heading {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0.4;
+    margin-bottom: 0.5rem;
+  }
+
+  .summary-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .summary-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: var(--rs-fs-sm, 0.875rem);
+  }
+
+  .summary-action {
+    font-weight: 600;
+    min-width: 6rem;
+  }
+
+  .summary-skip {
+    opacity: 0.4;
+    min-width: 5rem;
+  }
+
+  .summary-total {
+    opacity: 0.3;
+    font-size: var(--rs-fs-xs, 0.75rem);
+    min-width: 3rem;
+  }
+
+  .summary-btns {
+    margin-left: auto;
+  }
+
+  .batch-type-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+  }
+
+  .batch-type-row:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .batch-type-name {
+    font-size: var(--rs-fs-xs, 0.75rem);
+    white-space: nowrap;
+  }
+
+  /* --- Grid layout --- */
+  .grid-header {
+    display: grid;
+    grid-template-columns: minmax(250px, 1.5fr) 1fr 1fr 1fr auto;
+    gap: 0;
+    padding: 0 0.5rem;
+    border-bottom: 1px solid oklch(var(--bc) / 0.1);
+    margin-bottom: 0.25rem;
+  }
+
+  .col-head {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0.4;
+    padding: 0.25rem 0.75rem 0.375rem;
+    white-space: nowrap;
+  }
+
+  .col-head.col-tree,
+  .col-head.col-action {
+    opacity: 0;
+  }
+
+  .grid-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .grid-row {
+    display: grid;
+    grid-template-columns: minmax(250px, 1.5fr) 1fr 1fr 1fr auto;
+    gap: 0;
+    border-radius: 0.25rem;
+    min-height: 1.75rem;
+    align-items: start;
+  }
+
+  .entity-row {
+    align-items: center;
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .field-row {
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .grid-row:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  /* --- Outcome-based row colors (stoplight: green=add, yellow=update, red=delete) --- */
+  .entity-row.outcome-add {
+    background: oklch(var(--su) / 0.06);
+  }
+
+  .entity-row.outcome-update {
+    background: oklch(var(--wa) / 0.04);
+  }
+
+  .entity-row.outcome-delete {
+    background: oklch(var(--er) / 0.06);
+  }
+
+  .entity-row.outcome-skip {
+    opacity: 0.4;
+  }
+
+  .field-row.field-added {
+    background: oklch(var(--su) / 0.05);
+  }
+
+  .field-row.field-removed {
+    background: oklch(var(--er) / 0.05);
+  }
+
+  .field-row.field-changed {
+    background: oklch(var(--wa) / 0.05);
+  }
+
+  /* --- Cells --- */
+  .cell {
+    padding: 0.25rem 0.75rem;
+    font-size: inherit;
+  }
+
+  .cell-tree {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .cell-val {
+    font-family: monospace;
+    min-width: 0;
+  }
+
+  .val {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .tree-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-align: left;
+    color: inherit;
+    font-size: inherit;
+    width: 100%;
+  }
+
+  .tree-toggle:disabled {
+    cursor: default;
+  }
+
+  .chevron {
+    font-size: 0.6rem;
+    width: 0.75rem;
+    flex-shrink: 0;
+    opacity: 0.5;
+  }
+
+  .chevron-spacer {
+    width: 0.75rem;
+    flex-shrink: 0;
+  }
+
+  .entity-type {
+    opacity: 0.45;
+    font-size: 0.65rem;
+    flex-shrink: 0;
+  }
+
+  .entity-name {
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .cell-field-name {
+    opacity: 0.6;
+    font-family: monospace;
+  }
+
+  /* --- Value column colors (field rows) --- */
+  .field-removed .cell-existing {
+    color: oklch(var(--er));
+  }
+
+  .field-added .cell-pending,
+  .field-added .cell-result {
+    color: oklch(var(--su));
+  }
+
+  .field-changed .cell-existing {
+    color: oklch(var(--er) / 0.8);
+  }
+
+  .field-changed .cell-pending,
+  .field-changed .cell-result {
+    color: oklch(var(--wa));
+  }
+
+  /* --- Action button --- */
+  .cell-action {
+    font-family: inherit;
+    padding: 0.25rem 0.5rem;
+    white-space: nowrap;
+  }
+
+
+
+</style>

package/src/lib/utils/entity-apply.ts

@@ -0,0 +1,47 @@
+import type { ExportedEntity, DiffStatus, FieldDiff } from './entity-diff.js';
+
+export interface ApplyPlan {
+  toSet: ExportedEntity[];  // Added + modified, parents first
+  toDel: ExportedEntity[];  // Shallowest removed entities only
+}
+
+/**
+ * Compute the minimal SET/DEL operations to apply an import.
+ *
+ * @param diffs - Flat diff map from diffEntityLists()
+ * @param allFkFields - All FK field names used in BelongsTo relationships (for cascade detection)
+ * @param excluded - Optional set of "Type:id" keys to skip (user chose to keep current version)
+ */
+export function computeApplyPlan(
+  diffs: Map<string, { status: DiffStatus; fields?: FieldDiff[]; entity: ExportedEntity }>,
+  allFkFields: string[],
+  excluded?: Set<string>,
+): ApplyPlan {
+  const toSet: ExportedEntity[] = [];
+  const allRemoved = new Map<string, ExportedEntity>();
+
+  for (const [key, diff] of diffs) {
+    if (excluded?.has(key)) continue;
+    if (diff.status === 'added' || diff.status === 'modified') {
+      toSet.push(diff.entity);
+    } else if (diff.status === 'removed') {
+      allRemoved.set(diff.entity.data.id as string, diff.entity);
+    }
+  }
+
+  // Filter removed to shallowest only — if a removed entity's parent is also
+  // removed, skip it (the cascade will handle it)
+  const removedIds = new Set(allRemoved.keys());
+  const toDel: ExportedEntity[] = [];
+  for (const [_id, entity] of allRemoved) {
+    const hasRemovedParent = allFkFields.some((fk) => {
+      const parentId = entity.data[fk] as string | undefined;
+      return parentId && removedIds.has(parentId);
+    });
+    if (!hasRemovedParent) {
+      toDel.push(entity);
+    }
+  }
+
+  return { toSet, toDel };
+}

package/src/lib/utils/entity-diff.ts

@@ -0,0 +1,105 @@
+/** Diff status for an entity or field. */
+export type DiffStatus = 'added' | 'removed' | 'modified' | 'unchanged';
+
+/** Field-level diff for a modified entity. */
+export interface FieldDiff {
+  field: string;
+  oldValue?: unknown;
+  newValue?: unknown;
+}
+
+/** Entity-level diff node with children for tree display. */
+export interface EntityDiff {
+  type: string;
+  id: string;
+  status: DiffStatus;
+  /** Display label (entity name or id). */
+  name?: string;
+  /** Field-level changes — only populated for 'modified' status. */
+  fields?: FieldDiff[];
+  /** The current (server) entity data — only populated for 'modified' status. */
+  currentData?: Record<string, unknown>;
+  /** The incoming entity data — only populated for 'modified' status. */
+  incomingData?: Record<string, unknown>;
+  children: EntityDiff[];
+}
+
+/** A single exported entity from an EntityTreeExport. */
+export interface ExportedEntity {
+  entityType: string;
+  data: Record<string, unknown>;
+}
+
+/**
+ * Compare two flat entity lists and produce field-level diffs.
+ *
+ * @param current - Entities currently on the server
+ * @param incoming - Entities from the import source (file or snapshot)
+ * @returns Map of "type:id" -> { status, fields }
+ */
+export function diffEntityLists(
+  current: ExportedEntity[],
+  incoming: ExportedEntity[],
+): Map<string, { status: DiffStatus; fields?: FieldDiff[]; entity: ExportedEntity }> {
+  const currentMap = new Map<string, ExportedEntity>();
+  for (const e of current) {
+    currentMap.set(`${e.entityType}:${e.data.id}`, e);
+  }
+
+  const incomingMap = new Map<string, ExportedEntity>();
+  for (const e of incoming) {
+    incomingMap.set(`${e.entityType}:${e.data.id}`, e);
+  }
+
+  const result = new Map<
+    string,
+    { status: DiffStatus; fields?: FieldDiff[]; entity: ExportedEntity; currentEntity?: ExportedEntity }
+  >();
+
+  // Check incoming entities against current
+  for (const [key, inc] of incomingMap) {
+    const cur = currentMap.get(key);
+    if (!cur) {
+      result.set(key, { status: 'added', entity: inc });
+    } else {
+      const fields = diffFields(cur.data, inc.data);
+      if (fields.length > 0) {
+        result.set(key, { status: 'modified', fields, entity: inc, currentEntity: cur });
+      } else {
+        result.set(key, { status: 'unchanged', entity: inc });
+      }
+    }
+  }
+
+  // Check for removed entities (in current but not in incoming)
+  for (const [key, cur] of currentMap) {
+    if (!incomingMap.has(key)) {
+      result.set(key, { status: 'removed', entity: cur });
+    }
+  }
+
+  return result;
+}
+
+/** Compare two entity data objects field-by-field. */
+function diffFields(
+  oldData: Record<string, unknown>,
+  newData: Record<string, unknown>,
+): FieldDiff[] {
+  const diffs: FieldDiff[] = [];
+  const allKeys = new Set([...Object.keys(oldData), ...Object.keys(newData)]);
+
+  for (const key of allKeys) {
+    // Skip hash — it's derived and always changes when fields change
+    if (key === 'hash') continue;
+
+    const oldVal = oldData[key];
+    const newVal = newData[key];
+
+    if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
+      diffs.push({ field: key, oldValue: oldVal, newValue: newVal });
+    }
+  }
+
+  return diffs;
+}

package/src/lib/utils/entity-tree.ts

@@ -0,0 +1,130 @@
+import type { EntityDiff, ExportedEntity, DiffStatus, FieldDiff } from './entity-diff.js';
+
+/**
+ * Maps child entity type to its parent FK field names (camelCase).
+ * Provided by the consuming application — generated from Rust relationship registrations.
+ */
+export type ParentFkFields = Record<string, string[]>;
+
+/**
+ * Extract a display name from entity data.
+ * Tries 'name' field first, falls back to 'id'.
+ */
+function entityName(data: Record<string, unknown>): string {
+  return (data.name as string) ?? (data.id as string) ?? 'unknown';
+}
+
+/**
+ * Build an EntityDiff tree from a flat diff map.
+ *
+ * Entities with known parent FK fields are placed under their parent.
+ * Entities without a parent mapping (or whose parent isn't in the diff)
+ * are placed as direct children of the root so they remain visible.
+ *
+ * @param rootType - The root entity type
+ * @param rootId - The root entity ID
+ * @param diffs - Flat diff map from diffEntityLists()
+ * @returns Root EntityDiff node with nested children
+ */
+export function buildDiffTree(
+  rootType: string,
+  rootId: string,
+  diffs: Map<string, { status: DiffStatus; fields?: FieldDiff[]; entity: ExportedEntity; currentEntity?: ExportedEntity }>,
+  parentFkFields: ParentFkFields,
+): EntityDiff {
+  // Build flat EntityDiff nodes and index by ID for parent lookup
+  const allNodes = new Map<string, EntityDiff>();
+  const idToKey = new Map<string, string>();
+  const childrenByParent = new Map<string, EntityDiff[]>();
+  const placed = new Set<string>();
+
+  for (const [key, diff] of diffs) {
+    const [type, id] = key.split(':');
+    const node: EntityDiff = {
+      type,
+      id,
+      status: diff.status,
+      name: entityName(diff.entity.data),
+      fields: diff.fields,
+      currentData: diff.currentEntity?.data ?? (diff.status === 'removed' ? diff.entity.data : undefined),
+      incomingData: diff.status === 'added' || diff.status === 'modified' ? diff.entity.data : undefined,
+      children: [],
+    };
+    allNodes.set(key, node);
+    idToKey.set(id, key);
+  }
+
+  // Build parent-child relationships
+  for (const [key, diff] of diffs) {
+    const [type] = key.split(':');
+    const fkFields = parentFkFields[type];
+    if (fkFields) {
+      let foundParent = false;
+      for (const fkField of fkFields) {
+        const parentId = diff.entity.data[fkField] as string | undefined;
+        if (parentId) {
+          const parentKey = idToKey.get(parentId);
+          if (parentKey) {
+            if (!childrenByParent.has(parentKey)) {
+              childrenByParent.set(parentKey, []);
+            }
+            childrenByParent.get(parentKey)!.push(allNodes.get(key)!);
+            placed.add(key);
+            foundParent = true;
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  // Get or create root node
+  const rootKey = `${rootType}:${rootId}`;
+  const rootNode = allNodes.get(rootKey) ?? {
+    type: rootType,
+    id: rootId,
+    status: 'unchanged' as DiffStatus,
+    name: rootId,
+    children: [],
+  };
+  placed.add(rootKey);
+
+  // Attach children from FK relationships
+  for (const [key, node] of allNodes) {
+    node.children = childrenByParent.get(key) ?? [];
+  }
+
+  // Orphaned entities (not the root, not placed under any parent) become root children
+  for (const [key, node] of allNodes) {
+    if (!placed.has(key)) {
+      rootNode.children.push(node);
+    }
+  }
+
+  // Deduplicate all children arrays — entities reachable via multiple FK paths
+  // (e.g., BindingNodeConnection with both start_node_id and end_node_id) could
+  // appear more than once
+  for (const node of allNodes.values()) {
+    if (node.children.length > 0) {
+      const seen = new Set<string>();
+      node.children = node.children.filter((c) => {
+        const k = `${c.type}:${c.id}`;
+        if (seen.has(k)) return false;
+        seen.add(k);
+        return true;
+      });
+    }
+  }
+  // Also dedup root if it was created fresh (not from allNodes)
+  if (rootNode.children.length > 0) {
+    const seen = new Set<string>();
+    rootNode.children = rootNode.children.filter((c) => {
+      const k = `${c.type}:${c.id}`;
+      if (seen.has(k)) return false;
+      seen.add(k);
+      return true;
+    });
+  }
+
+  return rootNode;
+}