@myko/ui-svelte 4.4.0 → 4.4.3

package/dist/components/transactions/Transactions.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">import { myko as client } from "../../services/svelte-client.svelte.js";
+import { EntitySnapshotDifference } from "@myko/core";
+import { setContext } from "svelte";
+import { watchResize } from "svelte-watch-resize";
+import { TRANSACTIONS_VIEW_STATE, TransactionsViewState } from "../state/viewstate.svelte";
+import { windbackState } from "../state/windback.svelte.js";
+import EntityHistory from "./EntityHistory.svelte";
+import TimeStrip from "./TimeStrip.svelte";
+const viewstate = new TransactionsViewState(windbackState);
+setContext(TRANSACTIONS_VIEW_STATE, viewstate);
+let isMouseDown = $state(false);
+const {
+  entrypointId,
+  entrypointItemType
+} = $props();
+const onwheel = (e) => {
+  if (e.ctrlKey || e.metaKey) {
+    e.preventDefault();
+    viewstate.zoom(e.deltaY);
+  }
+  if (e.shiftKey) {
+    e.preventDefault();
+    viewstate.pan(e.deltaY);
+  }
+};
+const onmousemove = (e) => {
+  viewstate.mouseX = e.clientX;
+};
+const onkeydown = (e) => {
+  if (e.key === "z") {
+    viewstate.zoomAllTheWayOut();
+  }
+};
+const onmousedown = (e) => {
+  e.stopPropagation();
+  if (e.button === 0) {
+  }
+  viewstate.startDragWindback();
+};
+const onmouseup = (e) => {
+  e.stopPropagation();
+  viewstate.stopDragWindback();
+};
+const diff = client.watchReport(
+  new EntitySnapshotDifference({
+    parentType: entrypointItemType,
+    parentId: entrypointId
+  })
+);
+</script>
+
+<svelte:window {onkeydown} {onmousedown} {onmouseup} />
+<div
+	class:windbackCursor={viewstate.isOverWindback}
+	class="transactions-frame extra class"
+	role="presentation"
+	use:watchResize={(e) => {
+		console.log('RESIZE', e.clientWidth);
+		viewstate.width = e.clientWidth;
+	}}
+	{onwheel}
+	{onmousemove}
+>
+	<div class="header pad">
+		<TimeStrip></TimeStrip>
+	</div>
+	<div class="scroll pad">
+		<EntityHistory id={entrypointId} itemType={entrypointItemType} />
+	</div>
+</div>
+
+<style>
+	.transactions-frame {
+		height: 100%;
+		min-height: 100%;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+
+	.scroll {
+		overflow: scroll;
+		scrollbar-width: none;
+	}
+
+	.header {
+		flex-shrink: 0;
+	}
+
+	.windbackCursor {
+		cursor: ew-resize;
+	}
+</style>

package/dist/components/transactions/Transactions.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type ID } from '@myko/core';
+type $$ComponentProps = {
+    entrypointId: ID;
+    entrypointItemType: string;
+};
+declare const Transactions: import("svelte").Component<$$ComponentProps, {}, "">;
+type Transactions = ReturnType<typeof Transactions>;
+export default Transactions;

package/{src/lib → dist}/components/transactions/TransactonView.svelte

@@ -1,10 +1,6 @@
-<script lang="ts">
-	import type { ID } from '@myko/core';
-	import TransactionDetails from './TransactionDetails.svelte';
-
-	let open = $state(false);
-
-	const { tx }: { tx: ID } = $props();
+<script lang="ts">import TransactionDetails from "./TransactionDetails.svelte";
+let open = $state(false);
+const { tx } = $props();
 </script>
 
 <div

package/dist/components/transactions/TransactonView.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ID } from '@myko/core';
+type $$ComponentProps = {
+    tx: ID;
+};
+declare const TransactonView: import("svelte").Component<$$ComponentProps, {}, "">;
+type TransactonView = ReturnType<typeof TransactonView>;
+export default TransactonView;

package/{src/lib → dist}/components/windback/WindbackFrame.svelte

@@ -1,9 +1,6 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { windbackState } from '../state/windback.svelte.js';
-	import Transactions from '../transactions/Transactions.svelte';
-
-	const { children }: { children: Snippet } = $props();
+<script lang="ts">import { windbackState } from "../state/windback.svelte.js";
+import Transactions from "../transactions/Transactions.svelte";
+const { children } = $props();
 </script>
 
 <div class="bg"></div>

package/dist/components/windback/WindbackFrame.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const WindbackFrame: import("svelte").Component<$$ComponentProps, {}, "">;
+type WindbackFrame = ReturnType<typeof WindbackFrame>;
+export default WindbackFrame;

package/dist/components/windback/index.js

@@ -0,0 +1 @@
+export { default as WindbackFrame } from './WindbackFrame.svelte';

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export { default as ConnectionStats } from './components/ConnectionStats.svelte';
+export { default as Logs } from './components/Logs.svelte';
+export { default as Query } from './components/Query.svelte';
+export { default as Report } from './components/Report.svelte';
+export { default as Search } from './components/Search.svelte';
+export { default as ServerView } from './components/ServerView.svelte';
+export { default as Transactions } from './components/transactions/Transactions.svelte';
+export { default as EntityDiffTree } from './components/EntityDiffTree.svelte';
+export { default as EntityDiffBadge } from './components/EntityDiffBadge.svelte';
+export { default as EntityDiffFields } from './components/EntityDiffFields.svelte';
+export { default as EntityDiffNode } from './components/EntityDiffNode.svelte';
+export * from './components/state/windback.svelte';
+export * from './components/windback/index';
+export * from './utils/entity-diff';
+export * from './utils/entity-tree';
+export * from './utils/entity-apply';
+export { createMykoClient, getMykoClient, myko, myko as client, SvelteMykoClient, type CommandError, type CommandSuccess, type LiveQuery, type LiveReport } from './services/svelte-client.svelte';
+export { ConnectionStatus, type ClientStats } from '@myko/core';

package/{src/lib/index.ts → dist/index.js}

@@ -12,24 +12,11 @@ export { default as EntityDiffFields } from './components/EntityDiffFields.svelt
 export { default as EntityDiffNode } from './components/EntityDiffNode.svelte';
 export * from './components/state/windback.svelte';
 export * from './components/windback/index';
-
 // Utils
 export * from './utils/entity-diff';
 export * from './utils/entity-tree';
 export * from './utils/entity-apply';
-
 // Svelte-friendly Myko client
-export {
-	createMykoClient,
-	getMykoClient,
-	myko,
-	myko as client,
-	SvelteMykoClient,
-	type CommandError,
-	type CommandSuccess,
-	type LiveQuery,
-	type LiveReport
-} from './services/svelte-client.svelte';
-
+export { createMykoClient, getMykoClient, myko, myko as client, SvelteMykoClient } from './services/svelte-client.svelte';
 // Re-export useful types from @myko/core
-export { ConnectionStatus, type ClientStats } from '@myko/core';
+export { ConnectionStatus } from '@myko/core';

package/dist/services/svelte-client.svelte.d.ts

@@ -0,0 +1,278 @@
+/**
+ * Svelte-friendly Myko client wrapper
+ *
+ * Provides reactive state using Svelte 5 runes and SvelteMap for efficient updates.
+ * Queries and reports are deduplicated - multiple calls with the same args share
+ * the same subscription and are only cancelled when all consumers unsubscribe.
+ */
+import { ConnectionStatus, MykoClient, type ClientStats, type Command, type CommandResult, type MykoError, type Query, type QueryWindow, type QueryWatchOptions, type QueryItem, type QueryWindowInfo, type QueryResult, type View, type ViewItem, type ViewResult, type Report, type ReportResult } from '@myko/core';
+import { SvelteMap } from 'svelte/reactivity';
+import { type Observable } from 'rxjs';
+/** Command sent event (before response) */
+export type CommandSent = {
+    commandId: string;
+};
+/** Command success event */
+export type CommandSuccess = {
+    commandId: string;
+    response: unknown;
+};
+/** Command error event */
+export type CommandError = {
+    commandId: string;
+    error: Error;
+};
+/** Live report result with automatic lifecycle management */
+export type LiveReport<R extends Report<unknown>> = {
+    /** Current value (reactive via $state) */
+    readonly value: ReportResult<R> | undefined;
+    /** Current error if any */
+    readonly error: Error | undefined;
+};
+/** Live query result with automatic lifecycle management */
+export type LiveQuery<Q extends Query<unknown>> = {
+    /** Reactive map of items by ID */
+    readonly items: SvelteMap<string, QueryItem<Q> & {
+        id: string;
+    }>;
+    /** Whether the query has received its first response */
+    readonly resolved: boolean;
+    /** Current error if any */
+    readonly error: Error | undefined;
+};
+/** Live windowed query result with automatic lifecycle management */
+export type LiveWindowedQuery<Q extends Query<unknown>> = {
+    /** Current windowed items */
+    readonly items: QueryResult<Q>;
+    /** Current reported total count */
+    readonly totalCount: number | null;
+    /** Current applied server window */
+    readonly window: QueryWindow | null;
+    /** Whether first response has been received */
+    readonly resolved: boolean;
+    /** Current error if any */
+    readonly error: Error | undefined;
+    /** Update server-side window without re-subscribing */
+    setWindow(window: QueryWindow | null): void;
+};
+/** Live view result with automatic lifecycle management */
+export type LiveView<V extends View<unknown>> = {
+    readonly items: SvelteMap<string, ViewItem<V> & {
+        id: string;
+    }>;
+    readonly resolved: boolean;
+    readonly error: Error | undefined;
+};
+/** Live windowed view result with automatic lifecycle management */
+export type LiveWindowedView<V extends View<unknown>> = {
+    readonly items: ViewResult<V>;
+    readonly totalCount: number | null;
+    readonly window: QueryWindow | null;
+    readonly resolved: boolean;
+    readonly error: Error | undefined;
+    setWindow(window: QueryWindow | null): void;
+};
+/**
+ * Svelte-friendly Myko client
+ *
+ * Wraps MykoClient to provide reactive Svelte state with automatic lifecycle management.
+ */
+export declare class SvelteMykoClient {
+    #private;
+    private client;
+    private commandSentSubject;
+    private commandSuccessSubject;
+    private commandErrorSubject;
+    /** Observable of all commands when sent (before response) */
+    readonly commandSent$: Observable<CommandSent>;
+    /** Observable of all command successes */
+    readonly commandSuccess$: Observable<CommandSuccess>;
+    /** Observable of all command errors */
+    readonly commandError$: Observable<CommandError>;
+    private statsSubscription;
+    constructor();
+    /** Current connection status (reactive) */
+    get connectionStatus(): ConnectionStatus;
+    /** Whether currently connected (reactive) */
+    get isConnected(): boolean;
+    /** Current connection stats (reactive, null when disconnected) */
+    get stats(): ClientStats | null;
+    /** Set the server address and connect */
+    connect(address: string): void;
+    /**
+     * Enable automatic peer discovery via GetPeerServers query.
+     * When enabled, the client will automatically add discovered peer servers
+     * to the connection pool for redundancy and load balancing.
+     */
+    enablePeerDiscovery(enabled: boolean, secure?: boolean): void;
+    /** Set authentication token for commands */
+    setToken(token: string | null): void;
+    /** Disconnect from the server */
+    disconnect(): void;
+    /**
+     * Create a live report subscription with automatic lifecycle management.
+     *
+     * The subscription automatically:
+     * - Re-subscribes when dependencies in the factory function change
+     * - Cleans up when the component unmounts
+     * - No manual release() call needed
+     *
+     * If the factory returns null/undefined, no subscription is created and value remains undefined.
+     *
+     * IMPORTANT: Must be called during component initialization (in the <script> block),
+     * not inside event handlers or other callbacks.
+     *
+     * @example
+     * ```svelte
+     * <script>
+     *   let { nodeId, sessionId } = $props()
+     *   const output = client.liveReport(() =>
+     *     sessionId ? new BindingNodeOutputValue({ nodeId, sessionId }) : null
+     *   )
+     * </script>
+     *
+     * <div>{output.value?.datagram.data}</div>
+     * ```
+     */
+    liveReport<R extends Report<unknown>>(factory: () => R | null | undefined): LiveReport<R>;
+    /**
+     * Create a live query subscription with automatic lifecycle management.
+     *
+     * The subscription automatically:
+     * - Re-subscribes when dependencies in the factory function change
+     * - Cleans up when the component unmounts
+     * - No manual release() call needed
+     *
+     * If the factory returns null/undefined, no subscription is created and items map is cleared.
+     *
+     * IMPORTANT: Must be called during component initialization (in the <script> block),
+     * not inside event handlers or other callbacks.
+     *
+     * @example
+     * ```svelte
+     * <script>
+     *   let { sceneId } = $props()
+     *   const nodes = client.liveQuery(() =>
+     *     sceneId ? new GetBindingNodesByQuery({ sceneId }) : null
+     *   )
+     * </script>
+     *
+     * {#each nodes.items as [id, node] (id)}
+     *   <div>{node.name}</div>
+     * {/each}
+     * ```
+     */
+    liveQuery<Q extends Query<unknown>>(factory: () => Q | null | undefined): LiveQuery<Q>;
+    /** Create a live view subscription with automatic lifecycle management. */
+    liveView<V extends View<unknown>>(factory: () => V | null | undefined): LiveView<V>;
+    /**
+     * Create a live windowed query with automatic lifecycle management.
+     *
+     * Uses server-side query windows while exposing Svelte-native reactive state.
+     */
+    liveQueryWindowed<Q extends Query<unknown>>(factory: () => Q | null | undefined, optionsFactory?: () => QueryWatchOptions | undefined): LiveWindowedQuery<Q>;
+    /** Create a live windowed view with automatic lifecycle management. */
+    liveViewWindowed<V extends View<unknown>>(factory: () => V | null | undefined, optionsFactory?: () => QueryWatchOptions | undefined): LiveWindowedView<V>;
+    /**
+     * Watch a query with Observable-based updates.
+     *
+     * Returns an Observable that emits the full array of items whenever
+     * the result set changes.
+     *
+     * @deprecated Use `liveQuery()` for component usage. This method requires manual
+     * subscription management and doesn't integrate with Svelte's lifecycle.
+     * Only use for non-component contexts (e.g., context classes).
+     */
+    watchQuery<Q extends Query<unknown>>(queryFactory: Q): Observable<QueryResult<Q>>;
+    /**
+     * Watch a view with Observable-based updates.
+     *
+     * @deprecated Use `liveView()` for component usage. Kept for backward compatibility
+     * with existing service code paths that still consume observables.
+     */
+    watchView<V extends View<unknown>>(viewFactory: V): Observable<ViewResult<V>>;
+    /**
+     * Watch a query with optional server-side windowing.
+     *
+     * @deprecated Use `liveQuery()` (or `liveQueryWindowed()` for runes-native windowing)
+     * in component/service rune contexts.
+     */
+    watchQueryWithOptions<Q extends Query<unknown>>(queryFactory: Q, options?: QueryWatchOptions): Observable<QueryResult<Q>>;
+    /**
+     * Watch a view with optional server-side windowing.
+     *
+     * @deprecated Use `liveView()` in component/service rune contexts.
+     */
+    watchViewWithOptions<V extends View<unknown>>(viewFactory: V, options?: QueryWatchOptions): Observable<ViewResult<V>>;
+    /**
+     * Watch a query and mutate its server-side window without re-subscribing.
+     *
+     * @deprecated Use `liveQueryWindowed()` in component/service rune contexts.
+     */
+    watchQueryWindowed<Q extends Query<unknown>>(queryFactory: Q, options?: QueryWatchOptions): {
+        tx: string;
+        results$: Observable<QueryResult<Q>>;
+        windowInfo$: Observable<QueryWindowInfo>;
+        setWindow: (window: QueryWindow | null) => void;
+    };
+    /**
+     * Watch a view and mutate its server-side window without re-subscribing.
+     *
+     * @deprecated Use `liveView()` in component/service rune contexts.
+     */
+    watchViewWindowed<V extends View<unknown>>(viewFactory: V, options?: QueryWatchOptions): {
+        tx: string;
+        results$: Observable<ViewResult<V>>;
+        windowInfo$: Observable<QueryWindowInfo>;
+        setWindow: (window: QueryWindow | null) => void;
+    };
+    /**
+     * Watch a report with Observable-based updates.
+     *
+     * Returns an Observable that emits whenever the report result changes.
+     *
+     * @deprecated Use `liveReport()` for component usage. This method requires manual
+     * subscription management and doesn't integrate with Svelte's lifecycle.
+     * Only use for non-component contexts (e.g., context classes).
+     */
+    watchReport<R extends Report<unknown>>(reportFactory: R): Observable<ReportResult<R>>;
+    /**
+     * Send a command and wait for the response.
+     *
+     * Emits to commandSuccess$ or commandError$ observables for generic handling.
+     *
+     * @example
+     * ```svelte
+     * <script>
+     *   async function deleteMachine(id: string) {
+     *     const result = await myko.sendCommand(new DeleteMachine({ id }))
+     *     console.log('Deleted:', result)
+     *   }
+     * </script>
+     * ```
+     */
+    sendCommand<C extends Command<unknown>>(commandFactory: C): Promise<CommandResult<C>>;
+    /** Access the underlying MykoClient for advanced use cases */
+    get raw(): MykoClient;
+    /** Measure round-trip latency */
+    ping(): Promise<number>;
+    /** Observable of all errors from the server */
+    get errors(): Observable<MykoError>;
+    /**
+     * Watch command completion status.
+     * Note: This is a compatibility shim - the underlying MykoClient doesn't track
+     * command completions the same way as the legacy WSMClient.
+     */
+    watchCommandStatus(): Observable<unknown[]>;
+    /**
+     * Clear a command completion from tracking.
+     * Note: This is a compatibility shim - no-op in the new client.
+     */
+    clearCommandCompletion(_tx: string): void;
+}
+/** Global singleton client instance (auto-initialized) */
+export declare const myko: SvelteMykoClient;
+/** Get the global MykoClient instance */
+export declare function getMykoClient(): SvelteMykoClient;
+/** Create a new SvelteMykoClient instance (non-singleton, for advanced use) */
+export declare function createMykoClient(): SvelteMykoClient;