@myko/ui-svelte 4.4.0 → 4.4.3

package/dist/components/Logs.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import { startWith } from "rxjs";
+import { myko as client } from "../services/svelte-client.svelte.js";
+import { Loggers } from "@myko/core";
+const { serverId } = $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/dist/components/Logs.svelte.d.ts

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

package/dist/components/Query.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" generics="Q extends Query<unknown>">import { getMykoClient } from "../services/svelte-client.svelte.js";
+let { query, client, children, empty, loading } = $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/dist/components/Query.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Query, QueryItem } from '@myko/core';
+import { type SvelteMykoClient } from '../services/svelte-client.svelte.js';
+import type { Snippet } from 'svelte';
+declare function $$render<Q extends Query<unknown>>(): {
+    props: {
+        query: Q;
+        client?: SvelteMykoClient;
+        children: Snippet<[QueryItem<Q> & {
+            id: string;
+        }]>;
+        empty?: Snippet;
+        loading?: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Q extends Query<unknown>> {
+    props(): ReturnType<typeof $$render<Q>>['props'];
+    events(): ReturnType<typeof $$render<Q>>['events'];
+    slots(): ReturnType<typeof $$render<Q>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Q extends Query<unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Q>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Q>['props']>, ReturnType<__sveltets_Render<Q>['events']>, ReturnType<__sveltets_Render<Q>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Q>['bindings']>;
+    } & ReturnType<__sveltets_Render<Q>['exports']>;
+    <Q extends Query<unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<Q>['props']> & {}): ReturnType<__sveltets_Render<Q>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Query: $$IsomorphicComponent;
+type Query<Q extends Query<unknown>> = InstanceType<typeof Query<Q>>;
+export default Query;

package/dist/components/Report.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" generics="R extends Report<unknown>">import { getMykoClient } from "../services/svelte-client.svelte.js";
+let { report, client, children, loading } = $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/dist/components/Report.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Report, ReportResult } from '@myko/core';
+import { type SvelteMykoClient } from '../services/svelte-client.svelte.js';
+import type { Snippet } from 'svelte';
+declare function $$render<R extends Report<unknown>>(): {
+    props: {
+        report: R;
+        client?: SvelteMykoClient;
+        children: Snippet<[ReportResult<R>]>;
+        loading?: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<R extends Report<unknown>> {
+    props(): ReturnType<typeof $$render<R>>['props'];
+    events(): ReturnType<typeof $$render<R>>['events'];
+    slots(): ReturnType<typeof $$render<R>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <R extends Report<unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<R>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<R>['props']>, ReturnType<__sveltets_Render<R>['events']>, ReturnType<__sveltets_Render<R>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<R>['bindings']>;
+    } & ReturnType<__sveltets_Render<R>['exports']>;
+    <R extends Report<unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<R>['props']> & {}): ReturnType<__sveltets_Render<R>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Report: $$IsomorphicComponent;
+type Report<R extends Report<unknown>> = InstanceType<typeof Report<R>>;
+export default Report;

package/dist/components/Search.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" generics="T extends { id: string }">import { EntitySearch } from "@myko/core";
+import { getMykoClient } from "../services/svelte-client.svelte.js";
+let {
+  entityType,
+  query,
+  limit = 100,
+  queryByIds,
+  showAllOnEmpty,
+  client,
+  children,
+  empty,
+  loading
+} = $props();
+const resolvedClient = client ?? getMykoClient();
+const searchResult = resolvedClient.liveReport(
+  () => query?.trim() ? new EntitySearch({ entityType, query, limit }) : null
+);
+const searchIds = $derived(searchResult.value?.ids ?? []);
+const itemsResult = resolvedClient.liveQuery(() => {
+  if (query?.trim()) {
+    return searchIds.length > 0 ? queryByIds(searchIds) : null;
+  } else if (showAllOnEmpty) {
+    return showAllOnEmpty;
+  }
+  return null;
+});
+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/dist/components/Search.svelte.d.ts

@@ -0,0 +1,56 @@
+import { type Query } from '@myko/core';
+import { type SvelteMykoClient } from '../services/svelte-client.svelte.js';
+import type { Snippet } from 'svelte';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    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;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Search: $$IsomorphicComponent;
+type Search<T extends {
+    id: string;
+}> = InstanceType<typeof Search<T>>;
+export default Search;

package/dist/components/ServerView.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">import {
+  LOG_RANK,
+  PeerAlive,
+  ServerLogLevel,
+  SetLogLevel
+} 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";
+let { server, isClientServer = false } = $props();
+let alive = $derived(
+  isClientServer ? interval(500).pipe(switchMap(() => client.ping().catch((e) => false))) : client.watchReport(new PeerAlive({ peerId: server.id }))
+);
+let ping = $derived.by(() => {
+  const value = $alive;
+  if (value === void 0) 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();
+}, 1e3);
+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>

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

@@ -0,0 +1,8 @@
+import { type Server } from '@myko/core';
+interface Props {
+    server: Server;
+    isClientServer?: boolean;
+}
+declare const ServerView: import("svelte").Component<Props, {}, "">;
+type ServerView = ReturnType<typeof ServerView>;
+export default ServerView;

package/dist/components/state/resolutions.d.ts

@@ -0,0 +1,11 @@
+export type Resolution = {
+    milis: number;
+    majorFormat: string;
+    minorFormat: string;
+};
+export declare const resolutions: {
+    label: string;
+    majorFormat: string;
+    minorFormat: string;
+    milis: number;
+}[];

package/dist/components/state/resolutions.js

@@ -0,0 +1,129 @@
+import { Duration } from 'luxon';
+export const resolutions = [
+    {
+        label: '1ms',
+        majorFormat: 'dd MMM HH:mm:ss.SSS',
+        minorFormat: '.SSS',
+        milis: Duration.fromObject({ milliseconds: 1 }).as('milliseconds')
+    },
+    {
+        label: '5ms',
+        majorFormat: 'dd MMM HH:mm:ss.SSS',
+        minorFormat: '.SSS',
+        milis: Duration.fromObject({ milliseconds: 5 }).as('milliseconds')
+    },
+    {
+        label: '10ms',
+        minorFormat: '.SSS',
+        majorFormat: 'dd MMM HH:mm:ss.SSS',
+        milis: Duration.fromObject({ milliseconds: 10 }).as('milliseconds')
+    },
+    {
+        label: '50ms',
+        minorFormat: '.SSS',
+        majorFormat: 'dd MMM HH:mm:ss.SSS',
+        milis: Duration.fromObject({ milliseconds: 50 }).as('milliseconds')
+    },
+    {
+        label: '100ms',
+        majorFormat: 'dd MMM HH:mm:ss.SSS',
+        minorFormat: '.SSS',
+        milis: Duration.fromObject({ milliseconds: 100 }).as('milliseconds')
+    },
+    {
+        label: '500ms',
+        majorFormat: 'dd MMM HH:mm:ss.SSS',
+        minorFormat: '.SSS',
+        milis: Duration.fromObject({ milliseconds: 500 }).as('milliseconds')
+    },
+    {
+        label: '1s',
+        majorFormat: 'dd MMM HH:mm:ss',
+        minorFormat: 'ss',
+        milis: Duration.fromObject({ seconds: 1 }).as('milliseconds')
+    },
+    {
+        label: '5s',
+        majorFormat: 'dd MMM HH:mm:ss',
+        minorFormat: 'ss',
+        milis: Duration.fromObject({ seconds: 5 }).as('milliseconds')
+    },
+    {
+        label: '10s',
+        majorFormat: 'dd MMM HH:mm:ss',
+        minorFormat: 'ss',
+        milis: Duration.fromObject({ seconds: 10 }).as('milliseconds')
+    },
+    {
+        label: '30s',
+        majorFormat: 'dd MMM HH:mm:ss',
+        minorFormat: 'ss',
+        milis: Duration.fromObject({ seconds: 30 }).as('milliseconds')
+    },
+    {
+        label: '1m',
+        majorFormat: 'dd MMM HH:mm:ss',
+        minorFormat: 'mm:ss',
+        milis: Duration.fromObject({ minutes: 1 }).as('milliseconds')
+    },
+    {
+        label: '5m',
+        majorFormat: 'dd MMM HH:mm:ss',
+        minorFormat: 'mm:ss',
+        milis: Duration.fromObject({ minutes: 5 }).as('milliseconds')
+    },
+    {
+        label: '10m',
+        majorFormat: 'dd MMM HH:mm:ss',
+        minorFormat: 'mm:ss',
+        milis: Duration.fromObject({ minutes: 10 }).as('milliseconds')
+    },
+    {
+        label: '30m',
+        majorFormat: 'dd MMM HH:mm:ss',
+        minorFormat: 'mm:ss',
+        milis: Duration.fromObject({ minutes: 30 }).as('milliseconds')
+    },
+    {
+        label: '1h',
+        majorFormat: 'dd MMM HH:mm:ss',
+        minorFormat: 'HH:mm',
+        milis: Duration.fromObject({ hours: 1 }).as('milliseconds')
+    },
+    {
+        label: '6h',
+        majorFormat: 'dd MMM HH:mm:ss',
+        minorFormat: 'HH:mm',
+        milis: Duration.fromObject({ hours: 6 }).as('milliseconds')
+    },
+    {
+        label: '12h',
+        majorFormat: 'dd MMM',
+        minorFormat: 'HH:mm',
+        milis: Duration.fromObject({ hours: 12 }).as('milliseconds')
+    },
+    {
+        label: '1d',
+        majorFormat: 'dd MMM',
+        minorFormat: 'dd',
+        milis: Duration.fromObject({ days: 1 }).as('milliseconds')
+    },
+    {
+        label: '1w',
+        majorFormat: 'dd MMM yyyy',
+        minorFormat: 'dd',
+        milis: Duration.fromObject({ weeks: 1 }).as('milliseconds')
+    },
+    {
+        label: '1M',
+        majorFormat: 'MMM yyyy',
+        minorFormat: 'MMM',
+        milis: Duration.fromObject({ months: 1 }).as('milliseconds')
+    },
+    {
+        label: '1y',
+        majorFormat: 'yyyy',
+        minorFormat: 'yyyy',
+        milis: Duration.fromObject({ years: 1 }).as('milliseconds')
+    }
+];

package/dist/components/state/viewstate.svelte.d.ts

@@ -0,0 +1,60 @@
+import { DateTime, type Duration } from 'luxon';
+import { type Resolution } from './resolutions.js';
+import type { WindbackState } from './windback.svelte.js';
+export declare class TransactionsViewState {
+    #private;
+    readonly windbackState: WindbackState;
+    constructor(windbackState: WindbackState);
+    get windbackX(): number;
+    get windbackFullX(): number;
+    registerEvents(events: string[]): void;
+    get rightTime(): DateTime;
+    set rightTime(_value: DateTime);
+    get rightTimeMilis(): number;
+    set rightTimeMilis(_value: number);
+    get durationMilisPerPx(): number;
+    set durationMilisPerPx(_value: number);
+    get leftTime(): DateTime;
+    set leftTime(_value: DateTime);
+    get leftTimeMilis(): number;
+    set leftTimeMilis(_value: number);
+    get timeRangeMilis(): number;
+    set timeRangeMilis(_value: number);
+    get milisPerPx(): number;
+    set milisPerPx(_value: number);
+    set width(value: number);
+    get width(): number;
+    set timeZero(value: DateTime);
+    get timeZero(): DateTime;
+    get now(): DateTime;
+    set now(_value: DateTime);
+    set mouseX(value: number);
+    get isOverWindback(): boolean;
+    get mouseX(): number;
+    get mouseTime(): DateTime;
+    set mouseTime(_value: DateTime);
+    get mouseTimeRelative(): Duration;
+    get allEventTimestamps(): number[];
+    set allEventTimestamps(_value: number[]);
+    get majorResolution(): Resolution;
+    get majorResolutionIndex(): number;
+    get majors(): {
+        leftPx: number;
+        time: number;
+    }[];
+    get minorResolution(): Resolution;
+    get minors(): {
+        leftPx: number;
+        time: number;
+    }[];
+    zoomAllTheWayOut(): void;
+    zoom(delta: number): void;
+    pan(delta: number): void;
+    startDragWindback(): void;
+    stopDragWindback(): void;
+}
+export declare const TRANSACTIONS_VIEW_STATE: unique symbol;
+export declare const FULL_DATE_FORMAT = "yyyy-MM-dd HH:mm:ss";
+export declare const fromISOMemo: typeof DateTime.fromISO;
+export declare const fromMillisMemo: typeof DateTime.fromMillis;
+export declare const isoToMillisMemo: (isoString: string) => number;