@myko/ui-svelte 4.2.0-canary.3

package/.prettierignore

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

package/.prettierrc

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

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/package.json

@@ -0,0 +1,59 @@
+{
+  "dependencies": {
+    "@myko/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@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"
+    }
+  },
+  "flux": {
+    "tasks": [
+      "build",
+      "check",
+      "publish"
+    ]
+  },
+  "name": "@myko/ui-svelte",
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "scripts": {
+    "build": "vite build && svelte-kit sync && svelte-package",
+    "build:watch": "vite build && svelte-kit sync && svelte-package && chokidar 'src/**/*.ts' 'src/**/*.svelte' -c 'vite build && svelte-kit sync && svelte-package'",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "format": "prettier --write .",
+    "lint": "prettier --check .",
+    "package": "svelte-kit sync && svelte-package",
+    "preview": "vite preview"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "version": "4.2.0-canary.3"
+}

package/src/app.d.ts

@@ -0,0 +1,13 @@
+// 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

@@ -0,0 +1,12 @@
+<!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/ConnectionStats.svelte

@@ -0,0 +1,83 @@
+<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>
+
+{#if isConnected && stats}
+	<div class="connection-stats {className}">
+		{#if server}
+			<span class="stat server" title="Connected server">
+				<span class="value">{server.address}:{server.port}</span>
+			</span>
+			<span class="stat version" title="Server version">
+				<span class="label">v</span>
+				<span class="value">{server.version}</span>
+			</span>
+		{/if}
+		<span class="stat ping" title="Round-trip latency">
+			<span class="label">Ping</span>
+			<span class="value">{stats.ping}ms</span>
+		</span>
+		<span class="stat down" title="Messages received per second">
+			<span class="label">Down</span>
+			<span class="value">{stats.mpsDown}/s</span>
+		</span>
+		<span class="stat up" title="Messages sent per second">
+			<span class="label">Up</span>
+			<span class="value">{stats.mpsUp}/s</span>
+		</span>
+	</div>
+{:else}
+	<div class="connection-stats disconnected {className}">
+		<span class="stat">
+			<span class="value">--</span>
+		</span>
+	</div>
+{/if}
+
+<style>
+	.connection-stats {
+		display: inline-flex;
+		gap: 1rem;
+		font-size: 0.875rem;
+		font-family: monospace;
+		white-space: nowrap;
+	}
+
+	.stat {
+		display: flex;
+		gap: 0.25rem;
+		align-items: center;
+	}
+
+	.label {
+		opacity: 0.6;
+	}
+
+	.value {
+		font-weight: 500;
+	}
+
+	.disconnected {
+		opacity: 0.4;
+	}
+</style>

package/src/lib/components/Logs.svelte

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,34 @@
+<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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,85 @@
+<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

@@ -0,0 +1,95 @@
+<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>

package/src/lib/components/state/resolutions.ts

@@ -0,0 +1,137 @@
+import { Duration } from 'luxon';
+
+export type Resolution = {
+	milis: number;
+	majorFormat: string;
+	minorFormat: string;
+};
+
+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')
+	}
+];