@myko/ui-svelte 4.4.0 → 4.4.3

package/dist/utils/entity-apply.js

@@ -0,0 +1,35 @@
+/**
+ * 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, allFkFields, excluded) {
+    const toSet = [];
+    const allRemoved = new Map();
+    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, 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 = [];
+    for (const [_id, entity] of allRemoved) {
+        const hasRemovedParent = allFkFields.some((fk) => {
+            const parentId = entity.data[fk];
+            return parentId && removedIds.has(parentId);
+        });
+        if (!hasRemovedParent) {
+            toDel.push(entity);
+        }
+    }
+    return { toSet, toDel };
+}

package/dist/utils/entity-diff.d.ts

@@ -0,0 +1,40 @@
+/** 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 declare function diffEntityLists(current: ExportedEntity[], incoming: ExportedEntity[]): Map<string, {
+    status: DiffStatus;
+    fields?: FieldDiff[];
+    entity: ExportedEntity;
+}>;

package/dist/utils/entity-diff.js

@@ -0,0 +1,57 @@
+/**
+ * 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, incoming) {
+    const currentMap = new Map();
+    for (const e of current) {
+        currentMap.set(`${e.entityType}:${e.data.id}`, e);
+    }
+    const incomingMap = new Map();
+    for (const e of incoming) {
+        incomingMap.set(`${e.entityType}:${e.data.id}`, e);
+    }
+    const result = new Map();
+    // 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, newData) {
+    const diffs = [];
+    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/dist/utils/entity-tree.d.ts

@@ -0,0 +1,24 @@
+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[]>;
+/**
+ * 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 declare function buildDiffTree(rootType: string, rootId: string, diffs: Map<string, {
+    status: DiffStatus;
+    fields?: FieldDiff[];
+    entity: ExportedEntity;
+    currentEntity?: ExportedEntity;
+}>, parentFkFields: ParentFkFields): EntityDiff;

package/dist/utils/entity-tree.js

@@ -0,0 +1,111 @@
+/**
+ * Extract a display name from entity data.
+ * Tries 'name' field first, falls back to 'id'.
+ */
+function entityName(data) {
+    return data.name ?? data.id ?? '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, rootId, diffs, parentFkFields) {
+    // Build flat EntityDiff nodes and index by ID for parent lookup
+    const allNodes = new Map();
+    const idToKey = new Map();
+    const childrenByParent = new Map();
+    const placed = new Set();
+    for (const [key, diff] of diffs) {
+        const [type, id] = key.split(':');
+        const node = {
+            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];
+                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',
+        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();
+            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();
+        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;
+}

package/package.json

@@ -1,6 +1,11 @@
 {
   "dependencies": {
-    "@myko/core": "^4.4.0"
+    "@myko/core": "^4.4.3",
+    "luxon": "^3.5.0",
+    "ramda": "^0.30.1",
+    "rxjs": "^7.8.1",
+    "svelte-inview": "^4.0.4",
+    "svelte-watch-resize": "^1.0.3"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.0.0",
@@ -10,25 +15,24 @@
     "@types/luxon": "^3.4.2",
     "@types/ramda": "^0.30.2",
     "chokidar-cli": "^3.0.0",
-    "luxon": "^3.5.0",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",
     "publint": "^0.2.0",
-    "ramda": "^0.30.1",
-    "rxjs": "^7.8.1",
     "svelte": "^5.17.5",
     "svelte-check": "^4.0.0",
-    "svelte-inview": "^4.0.4",
-    "svelte-watch-resize": "^1.0.3",
     "typescript": "^5.0.0",
     "vite": "^5.0.11"
   },
   "exports": {
     ".": {
-      "default": "./src/lib/index.ts",
-      "svelte": "./src/lib/index.ts"
+      "default": "./dist/index.js",
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     }
   },
+  "files": [
+    "dist"
+  ],
   "flux": {
     "tasks": [
       "build",
@@ -60,5 +64,5 @@
     "**/*.css"
   ],
   "type": "module",
-  "version": "4.4.0"
+  "version": "4.4.3"
 }

package/.prettierignore

@@ -1,4 +0,0 @@
-# Package Managers
-package-lock.json
-pnpm-lock.yaml
-yarn.lock

package/.prettierrc

@@ -1,15 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
-		}
-	]
-}

package/src/app.d.ts

@@ -1,13 +0,0 @@
-// See https://svelte.dev/docs/kit/types#app.d.ts
-// for information about these interfaces
-declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
-}
-
-export {};

package/src/app.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div>%sveltekit.body%</div>
-	</body>
-</html>

package/src/lib/components/EntityDiffBadge.svelte

@@ -1,18 +0,0 @@
-<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/Logs.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-	import { startWith } from 'rxjs';
-	import { myko as client } from '../services/svelte-client.svelte.js';
-	import { Loggers, type ID } from '@myko/core';
-
-	type Props = {
-		serverId: ID;
-	};
-
-	const { serverId }: Props = $props();
-
-	const logs = client.watchReport(new Loggers({})).pipe(startWith([]));
-</script>
-
-{#each $logs as log}
-	<div class="log">
-		<input type="checkbox" />
-		<span>
-			{log}
-		</span>
-	</div>
-{/each}
-
-<style>
-	.log {
-		display: flex;
-		align-items: center;
-	}
-
-	.log input {
-		margin-right: 0.5rem;
-	}
-
-	.log span {
-		flex: 1;
-	}
-</style>

package/src/lib/components/Query.svelte

@@ -1,34 +0,0 @@
-<script lang="ts" generics="Q extends Query<unknown>">
-	import type { Query, QueryItem } from '@myko/core';
-	import { getMykoClient, type SvelteMykoClient } from '../services/svelte-client.svelte.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		query: Q;
-		client?: SvelteMykoClient;
-		children: Snippet<[QueryItem<Q> & { id: string }]>;
-		empty?: Snippet;
-		loading?: Snippet;
-	}
-
-	let { query, client, children, empty, loading }: Props = $props();
-
-	const resolvedClient = client ?? getMykoClient();
-	const result = resolvedClient.liveQuery(() => query);
-</script>
-
-{#if result.items.size === 0}
-	{#if !result.resolved}
-		{#if loading}
-			{@render loading()}
-		{:else}
-			<span class="query-loading">Loading...</span>
-		{/if}
-	{:else if empty}
-		{@render empty()}
-	{/if}
-{:else}
-	{#each result.items as [id, item] (id)}
-		{@render children(item)}
-	{/each}
-{/if}

package/src/lib/components/Report.svelte

@@ -1,25 +0,0 @@
-<script lang="ts" generics="R extends Report<unknown>">
-	import type { Report, ReportResult } from '@myko/core';
-	import { getMykoClient, type SvelteMykoClient } from '../services/svelte-client.svelte.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		report: R;
-		client?: SvelteMykoClient;
-		children: Snippet<[ReportResult<R>]>;
-		loading?: Snippet;
-	}
-
-	let { report, client, children, loading }: Props = $props();
-
-	const resolvedClient = client ?? getMykoClient();
-	const result = resolvedClient.liveReport(() => report);
-</script>
-
-{#if result.value === undefined}
-	{#if loading}
-		{@render loading()}
-	{/if}
-{:else}
-	{@render children(result.value)}
-{/if}

package/src/lib/components/Search.svelte

@@ -1,85 +0,0 @@
-<script lang="ts" generics="T extends { id: string }">
-	import { EntitySearch, type Query } from '@myko/core';
-	import { getMykoClient, type SvelteMykoClient } from '../services/svelte-client.svelte.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Entity type to search (e.g., "Target", "Scene") */
-		entityType: string;
-		/** Search query string */
-		query: string;
-		/** Maximum number of results (default: 100) */
-		limit?: number;
-		/** Query factory to fetch items by IDs - receives array of matching IDs */
-		queryByIds: (ids: string[]) => Query<T>;
-		/** Query to use when search query is empty (shows all items) */
-		showAllOnEmpty?: Query<T>;
-		/** Optional client instance */
-		client?: SvelteMykoClient;
-		/** Render snippet for each result item */
-		children: Snippet<[T]>;
-		/** Render snippet when no results found */
-		empty?: Snippet;
-		/** Render snippet while loading */
-		loading?: Snippet;
-	}
-
-	let {
-		entityType,
-		query,
-		limit = 100,
-		queryByIds,
-		showAllOnEmpty,
-		client,
-		children,
-		empty,
-		loading
-	}: Props = $props();
-
-	const resolvedClient = client ?? getMykoClient();
-
-	// Subscribe to EntitySearch report when we have a query
-	const searchResult = resolvedClient.liveReport(() =>
-		query?.trim() ? new EntitySearch({ entityType, query, limit }) : null,
-	);
-
-	// Get the matching IDs from search result
-	const searchIds = $derived(searchResult.value?.ids ?? []);
-
-	// Subscribe to items - either by search IDs, showAllOnEmpty, or nothing
-	const itemsResult = resolvedClient.liveQuery(() => {
-		if (query?.trim()) {
-			// Have a search query - fetch by search result IDs
-			return searchIds.length > 0 ? queryByIds(searchIds) : null;
-		} else if (showAllOnEmpty) {
-			// Empty query with showAllOnEmpty - fetch all
-			return showAllOnEmpty;
-		}
-		return null;
-	});
-
-	// Derived loading state
-	const isLoading = $derived(
-		query?.trim()
-			? !searchResult.value || (searchIds.length > 0 && !itemsResult.resolved)
-			: showAllOnEmpty
-				? !itemsResult.resolved
-				: false,
-	);
-</script>
-
-{#if isLoading}
-	{#if loading}
-		{@render loading()}
-	{:else}
-		<span class="search-loading">Searching...</span>
-	{/if}
-{:else if itemsResult.items.size === 0}
-	{#if empty}
-		{@render empty()}
-	{/if}
-{:else}
-	{#each itemsResult.items as [id, item] (id)}
-		{@render children(item)}
-	{/each}
-{/if}

package/src/lib/components/ServerView.svelte

@@ -1,95 +0,0 @@
-<script lang="ts">
-	import {
-		LOG_RANK,
-		type LogLevel,
-		PeerAlive,
-		ServerLogLevel,
-		SetLogLevel,
-		type Server
-	} from '@myko/core';
-	import { DateTime } from 'luxon';
-	import { Observable, interval, switchMap } from 'rxjs';
-	import { onDestroy } from 'svelte';
-	import { myko as client } from '../services/svelte-client.svelte.js';
-
-	interface Props {
-		server: Server;
-		isClientServer?: boolean;
-	}
-
-	let { server, isClientServer = false }: Props = $props();
-
-	let alive = $derived(
-		isClientServer
-			? (interval(500).pipe(switchMap(() => client.ping().catch((e) => false))) as Observable<
-					number | false
-				>)
-			: client.watchReport(new PeerAlive({ peerId: server.id }))
-	);
-
-	let ping = $derived.by(() => {
-		const value = $alive;
-		if (value === undefined) return 'Connecting';
-		if (value === false) return 'Dead';
-		if (!Number.isFinite(value) || value < 0) return 'Unknown';
-		return `${Math.round(value)}ms`;
-	});
-
-	let started = $state(DateTime.fromISO(server.startedAt).toRelative());
-
-	let startedInterbal = setInterval(() => {
-		started = DateTime.fromISO(server.startedAt).toRelative();
-	}, 1000);
-
-	onDestroy(() => {
-		clearInterval(startedInterbal);
-	});
-
-	const currentLogLevel = $derived(client.watchReport(new ServerLogLevel({ serverId: server.id })));
-</script>
-
-<div class="server flex gap-5">
-	<div class="info">
-		<span class="address">{server.address}:{server.port}</span>
-		<span class="version">{server.version}</span>
-		<span class="id">ID: {server.id}</span>
-		<span class="started">Started: {started}</span>
-		<span>Ping {isClientServer ? '' : 'to connected'}: {ping}</span>
-		<select
-			aria-label="Log Level"
-			class="select"
-			onchange={(e) => {
-				console.log(e.currentTarget.value);
-				client.sendCommand(
-					new SetLogLevel({
-						serverId: server.id,
-						level: e.currentTarget.value as LogLevel
-					})
-				);
-			}}
-		>
-			{#each LOG_RANK as rank}
-				<option selected={rank === $currentLogLevel} value={rank}>{rank}</option>
-			{/each}
-		</select>
-	</div>
-</div>
-
-<style>
-	.server {
-		position: relative;
-	}
-
-	span {
-		display: block;
-		white-space: nowrap;
-	}
-
-	.version {
-		opacity: 0.5;
-	}
-
-	.id {
-		white-space: nowrap;
-	}
-</style>