@myko/ui-svelte 4.4.1 → 4.4.6

package/{src/lib → dist}/components/ConnectionStats.svelte

@@ -1,25 +1,11 @@
-<script lang="ts">
-	import { GetConnectedServer } from '@myko/core';
-	import { getMykoClient, type SvelteMykoClient } from '../services/svelte-client.svelte.js';
-
-	interface Props {
-		/** Optional client instance (defaults to global singleton) */
-		client?: SvelteMykoClient;
-		/** CSS class for the container */
-		class?: string;
-	}
-
-	let { client, class: className = '' }: Props = $props();
-
-	const resolvedClient = client ?? getMykoClient();
-
-	const stats = $derived(resolvedClient.stats);
-	const isConnected = $derived(resolvedClient.isConnected);
-
-	// Query for connected server
-	const serverQuery = resolvedClient.liveQuery(() => new GetConnectedServer({}));
-
-	const server = $derived([...serverQuery.items.values()][0]);
+<script lang="ts">import { GetConnectedServer } from "@myko/core";
+import { getMykoClient } from "../services/svelte-client.svelte.js";
+let { client, class: className = "" } = $props();
+const resolvedClient = client ?? getMykoClient();
+const stats = $derived(resolvedClient.stats);
+const isConnected = $derived(resolvedClient.isConnected);
+const serverQuery = resolvedClient.liveQuery(() => new GetConnectedServer({}));
+const server = $derived([...serverQuery.items.values()][0]);
 </script>
 
 {#if isConnected && stats}

package/dist/components/ConnectionStats.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type SvelteMykoClient } from '../services/svelte-client.svelte.js';
+interface Props {
+    /** Optional client instance (defaults to global singleton) */
+    client?: SvelteMykoClient;
+    /** CSS class for the container */
+    class?: string;
+}
+declare const ConnectionStats: import("svelte").Component<Props, {}, "">;
+type ConnectionStats = ReturnType<typeof ConnectionStats>;
+export default ConnectionStats;

package/dist/components/EntityDiffBadge.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">let { status } = $props();
+const config = {
+  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/dist/components/EntityDiffBadge.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DiffStatus } from '../utils/entity-diff.js';
+interface Props {
+    status: DiffStatus;
+}
+declare const EntityDiffBadge: import("svelte").Component<Props, {}, "">;
+type EntityDiffBadge = ReturnType<typeof EntityDiffBadge>;
+export default EntityDiffBadge;

package/{src/lib → dist}/components/EntityDiffFields.svelte

@@ -1,54 +1,32 @@
-<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) });
-      }
+<script lang="ts">let { fields, currentData, incomingData } = $props();
+const hasSideBySide = $derived(!!currentData && !!incomingData);
+function formatValue(v) {
+  if (v === void 0 || v === null) return "";
+  if (typeof v === "object") return JSON.stringify(v, null, 2);
+  return String(v);
+}
+function isObject(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function computeJsonDiff(oldVal, newVal) {
+  if (!isObject(oldVal) || !isObject(newVal)) return null;
+  const allKeys = /* @__PURE__ */ new Set([...Object.keys(oldVal), ...Object.keys(newVal)]);
+  const lines = [];
+  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;
   }
+  return lines;
+}
 </script>
 
 {#if hasSideBySide}

package/dist/components/EntityDiffFields.svelte.d.ts

@@ -0,0 +1,11 @@
+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>;
+}
+declare const EntityDiffFields: import("svelte").Component<Props, {}, "">;
+type EntityDiffFields = ReturnType<typeof EntityDiffFields>;
+export default EntityDiffFields;

package/{src/lib → dist}/components/EntityDiffNode.svelte

@@ -1,47 +1,29 @@
-<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);
+<script lang="ts">import EntityDiffBadge from "./EntityDiffBadge.svelte";
+import EntityDiffFields from "./EntityDiffFields.svelte";
+let { node, showUnchanged = false, excluded, onToggleExclude, isRoot = false } = $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) => {
+  e.stopPropagation();
+  onToggleExclude?.(key);
+};
+const hasChangedDescendant = $derived.by(() => {
+  const check = (n) => {
+    if (n.status !== "unchanged") return true;
+    return n.children.some(check);
   };
-
-  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,
-  );
+  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}

package/dist/components/EntityDiffNode.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { EntityDiff } from '../utils/entity-diff.js';
+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;
+}
+declare const EntityDiffNode: import("svelte").Component<Props, {}, "">;
+type EntityDiffNode = ReturnType<typeof EntityDiffNode>;
+export default EntityDiffNode;

package/{src/lib → dist}/components/EntityDiffTree.svelte

@@ -1,211 +1,161 @@
-<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);
+<script lang="ts">import { diffEntityLists } from "../utils/entity-diff.js";
+import { buildDiffTree } from "../utils/entity-tree.js";
+import EntityDiffBadge from "./EntityDiffBadge.svelte";
+let { rootType, rootId, current, incoming, parentFkFields, excluded = $bindable(/* @__PURE__ */ new Set()), showUnchanged = false } = $props();
+const diffs = $derived(diffEntityLists(current, incoming));
+const tree = $derived(buildDiffTree(rootType, rootId, diffs, parentFkFields));
+const toggleExclude = (key) => {
+  const next = new Set(excluded);
+  if (next.has(key)) {
+    next.delete(key);
+  } else {
+    next.add(key);
+  }
+  excluded = next;
+};
+function actionLabels(status) {
+  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;
     }
-    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++;
+    if (excluded.has(key)) {
+      toSkip++;
+      continue;
     }
-    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';
+    if (d.status === "removed") toDelete++;
+    else if (d.status === "modified") toUpdate++;
+    else if (d.status === "added") toAdd++;
+  }
+  return { toDelete, toUpdate, toAdd, toSkip, unchanged };
+});
+const keysByStatus = $derived.by(() => {
+  const groups = { added: [], removed: [], modified: [] };
+  for (const [key, d] of diffs) {
+    if (d.status !== "unchanged") groups[d.status]?.push(key);
+  }
+  return groups;
+});
+const keysByEntityType = $derived.by(() => {
+  const groups = {};
+  for (const [key, d] of diffs) {
+    if (d.status === "unchanged") continue;
+    const [type] = key.split(":");
+    (groups[type] ??= []).push(key);
+  }
+  return groups;
+});
+function batchApply(keys) {
+  const next = new Set(excluded);
+  for (const k of keys) next.delete(k);
+  excluded = next;
+  saveExpanded(expandedSet);
+}
+function batchSkip(keys) {
+  const next = new Set(excluded);
+  for (const k of keys) next.add(k);
+  excluded = next;
+  saveExpanded(expandedSet);
+}
+const STORAGE_KEY = `rship:diff-expanded:${rootType}:${rootId}`;
+let expandedSet = $state(loadExpanded());
+function loadExpanded() {
+  try {
+    const stored = sessionStorage.getItem(STORAGE_KEY);
+    if (stored) return new Set(JSON.parse(stored));
+  } catch {
+  }
+  return /* @__PURE__ */ new Set([`${rootType}:${rootId}`]);
+}
+function saveExpanded(set) {
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify([...set]));
+  } catch {
+  }
+}
+function hasChanges(node) {
+  if (node.status !== "unchanged") return true;
+  return node.children.some(hasChanges);
+}
+function toggleExpand(key) {
+  const next = new Set(expandedSet);
+  if (next.has(key)) next.delete(key);
+  else next.add(key);
+  expandedSet = next;
+  saveExpanded(next);
+}
+function formatVal(v) {
+  if (v === void 0 || v === null) return "";
+  if (typeof v === "object") return JSON.stringify(v, null, 2);
+  return String(v);
+}
+const rows = $derived.by(() => {
+  const result = [];
+  const walk = (node, depth, isRoot) => {
+    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) {
+      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 = f.oldValue === void 0 ? "added" : f.newValue === void 0 ? "removed" : "changed";
+          result.push({
+            kind: "field",
+            fieldName: f.field,
+            existing: oldStr,
+            pending: newStr,
+            result: status === "removed" ? "" : newStr,
+            status,
+            depth: depth + 1,
+            parentKey: key
+          });
+        }
+      }
+      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: f.field,
-              existing: oldStr,
-              pending: newStr,
-              result: status === 'removed' ? '' : newStr,
-              status,
+              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,
+              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;
-  });
+      for (const child of node.children) {
+        walk(child, depth + 1, false);
+      }
+    }
+  };
+  walk(tree, 0, true);
+  return result;
+});
 </script>
 
 <div class="diff-grid-wrapper">

package/dist/components/EntityDiffTree.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ExportedEntity } from '../utils/entity-diff.js';
+import type { ParentFkFields } from '../utils/entity-tree.js';
+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;
+}
+declare const EntityDiffTree: import("svelte").Component<Props, {}, "excluded">;
+type EntityDiffTree = ReturnType<typeof EntityDiffTree>;
+export default EntityDiffTree;