@myko/ui-svelte 4.2.0-canary.3

package/src/lib/components/transactions/TimeStrip.svelte

@@ -0,0 +1,268 @@
+<script lang="ts">
+	import { DateTime } from 'luxon';
+	import { getContext } from 'svelte';
+	import {
+		FULL_DATE_FORMAT,
+		TRANSACTIONS_VIEW_STATE,
+		type TransactionsViewState
+	} from '../state/viewstate.svelte.js';
+	import { windbackState } from '../state/windback.svelte.js';
+
+	const viewState = getContext(TRANSACTIONS_VIEW_STATE) as TransactionsViewState;
+
+	const fullDuration = $derived(viewState.now.diff(viewState.timeZero));
+
+	const viewLeftDuration = $derived(viewState.leftTime.diff(viewState.timeZero));
+	const viewDuration = $derived(viewState.rightTime.diff(viewState.leftTime));
+
+	const viewLeftPx = $derived(
+		(viewLeftDuration.as('milliseconds') / fullDuration.as('milliseconds')) * viewState.width
+	);
+	const viewWidthPx = $derived(
+		(viewDuration.as('milliseconds') / fullDuration.as('milliseconds')) * viewState.width
+	);
+
+	let timestampsEl: HTMLElement | null = $state(null);
+</script>
+
+<div class="all-time">
+	<div class="bounds">
+		<div class="start-time">{viewState.timeZero.toFormat(FULL_DATE_FORMAT)}</div>
+		<div class="end-time">{viewState.now.toFormat(FULL_DATE_FORMAT)}</div>
+	</div>
+	<div class="all-times">
+		{#each viewState.allEventTimestamps as timestamp}
+			<div class="event" style="left: {timestamp}px"></div>
+		{/each}
+	</div>
+
+	<div class="cursor-time">
+		<div class="cursor" style="left: {viewState.windbackFullX}px; ">
+			<div class="line"></div>
+			<div class="triangle"></div>
+		</div>
+	</div>
+
+	<div
+		class="view-region"
+		style="left: {viewLeftPx}px; width: {viewWidthPx}px; --width: {viewWidthPx}px;"
+	></div>
+</div>
+<div class="timestamps" bind:this={timestampsEl}>
+	{#each viewState.majors as { leftPx, time: majorTime }, i}
+		<div class="major timestamp" style="left: {leftPx}px;">
+			<div class="tick"></div>
+			<span class="timestamp-text"
+				>{DateTime.fromMillis(majorTime).toFormat(viewState.majorResolution.majorFormat)}</span
+			>
+			{#each viewState.minors as { leftPx, time: minorTime }, i}
+				<div class="minor timestamp" style="left: {leftPx}px;">
+					<div class="tick"></div>
+					<span class="timestamp-text"
+						>{DateTime.fromMillis(minorTime + majorTime).toFormat(
+							viewState.minorResolution.minorFormat
+						)}</span
+					>
+				</div>
+			{/each}
+		</div>
+	{/each}
+	<div class="overlay">
+		{#if windbackState.cursor}
+			<div class="windback-cursor cursor" class:lagging={!viewState.windbackState.caughtUp}>
+				<div class="line" style="left: {viewState.windbackX}px">
+					<div class="text">
+						<p>
+							{windbackState.cursor.toFormat(FULL_DATE_FORMAT)}
+						</p>
+						<p>
+							{viewState.now
+								.diff(windbackState.cursor)
+								.rescale()
+								.normalize()
+								.toHuman({ compactDisplay: 'short', unitDisplay: 'narrow' })} ago
+						</p>
+					</div>
+					<div class="click-area"></div>
+				</div>
+			</div>
+		{/if}
+		<div class="live-cursor cursor">
+			<div class="line" style="left: {viewState.mouseX}px">
+				<div class="text">
+					<p>
+						{viewState.mouseTime.toFormat(viewState.majorResolution.majorFormat)}
+					</p>
+					<p>
+						{viewState.mouseTimeRelative.rescale().normalize().toHuman({
+							compactDisplay: 'short',
+							unitDisplay: 'narrow',
+							maximumFractionDigits: 0
+						})}
+						ago
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	/* bounds */
+
+	.all-time {
+		position: relative;
+		border-bottom: rgba(255, 255, 255, 0.1) 1px solid;
+		user-select: none;
+	}
+
+	.bounds {
+		display: flex;
+		width: 100%;
+		padding: 0.1rem 0.5rem;
+		justify-content: space-between;
+	}
+
+	/* VIEW REGION (scroll bar) */
+
+	.all-times {
+		position: absolute;
+		inset: 0;
+		z-index: 999;
+	}
+	.view-region {
+		position: absolute;
+		top: 3px;
+		bottom: 3px;
+		border-radius: 0.2rem;
+		background-color: rgba(255, 255, 255, 0.2);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		color: white;
+		padding: 0 0.5rem;
+		box-sizing: border-box;
+		user-select: none;
+	}
+
+	/* .text {
+		position: absolute;
+		white-space: nowrap;
+	}
+
+	.left {
+		left: 0.5rem;
+	}
+
+	.right {
+		right: 0.5rem;
+	}
+
+	.shuntLeft {
+		right: calc(var(--width) + 0.5rem) !important;
+		left: unset;
+	}
+
+	.shuntRight {
+		right: unset;
+		left: calc(var(--width) + 0.5rem) !important;
+	}
+
+	.doubleShuntLeft {
+		left: unset;
+		right: calc(var(--right-width) + 1rem) !important;
+	}
+
+	.doubleShuntRight {
+		right: unset;
+		left: calc(var(--left-width) + 1rem) !important;
+	} */
+
+	.event {
+		position: absolute;
+		height: 100%;
+		border-left: 1px solid rgba(255, 255, 255, 0.2);
+	}
+
+	/* timestamps and grid lines */
+	.timestamps {
+		position: relative;
+		height: 2rem;
+	}
+	.timestamp {
+		position: absolute;
+	}
+
+	.timestamp-text {
+		left: 3px;
+		position: relative;
+	}
+
+	.overlay {
+		position: absolute;
+		inset: 0;
+		bottom: unset;
+		height: 100vh;
+		pointer-events: none;
+		z-index: 999;
+	}
+
+	.tick {
+		position: absolute;
+		top: 0;
+		height: 100vh;
+		width: 0px;
+		border-left: 1px solid rgba(255, 255, 255, 0.5);
+	}
+
+	.minor .tick {
+		opacity: 0.25;
+	}
+
+	.major {
+		opacity: 0.5;
+	}
+
+	.cursor .line {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		border-left: 1px solid rgba(255, 255, 255, 0.2);
+	}
+
+	.cursor .text {
+		white-space: nowrap;
+		background-color: rgba(0, 0, 0, 0.9);
+		padding: 0 0.25rem;
+	}
+
+	.windback-cursor {
+		border-color: cornflowerblue;
+
+		color: cornflowerblue;
+
+		.line {
+			border-color: cornflowerblue;
+		}
+	}
+
+	.click-area {
+		position: absolute;
+		inset: 0;
+		width: 20px;
+		left: -10px;
+		z-index: 999;
+		background-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.click-area:hover {
+		cursor: ew-resize;
+		background-color: rgba(255, 255, 255, 0.9);
+	}
+
+	.lagging {
+		.line {
+			border-color: orangered;
+		}
+	}
+</style>

package/src/lib/components/transactions/TransactionDetails.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { myko as client } from '../../services/svelte-client.svelte.js';
+	import { EventsForTransaction, type ID } from '@myko/core';
+	import { fromISOMemo, FULL_DATE_FORMAT } from '../state/viewstate.svelte.js';
+
+	const { tx }: { tx: ID } = $props();
+	const events = client.watchReport(new EventsForTransaction({ transactionId: tx }));
+</script>
+
+{#if $events}
+	{#each $events as event (event)}
+		<div class="div">
+			<p>{event.itemType}</p>
+			<p>{event.changeType}</p>
+			<p>{fromISOMemo(event.createdAt).diffNow().toHuman()}</p>
+			<p>{fromISOMemo(event.createdAt).toFormat(FULL_DATE_FORMAT)}</p>
+		</div>
+	{/each}
+{/if}
+
+<style>
+	.div {
+		display: flex;
+		gap: 1rem;
+	}
+</style>

package/src/lib/components/transactions/TransactionEvent.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { MEvent } from '@myko/core';
+	import { getContext } from 'svelte';
+	import {
+		fromISOMemo,
+		FULL_DATE_FORMAT,
+		isoToMillisMemo,
+		TRANSACTIONS_VIEW_STATE,
+		type TransactionsViewState
+	} from '../state/viewstate.svelte.js';
+
+	const { event }: { event: MEvent } = $props();
+
+	const timeMilis = $derived(isoToMillisMemo(event.createdAt));
+
+	const viewState = getContext(TRANSACTIONS_VIEW_STATE) as TransactionsViewState;
+
+	const leftTimeMilis = $derived(timeMilis - viewState.leftTimeMilis);
+
+	const leftPx = $derived(leftTimeMilis / viewState.durationMilisPerPx);
+
+	let showDetail = $state(false);
+
+	const onmouseover = () => {
+		showDetail = true;
+	};
+
+	const onmouseleave = () => {
+		showDetail = false;
+	};
+
+	const time = $derived(fromISOMemo(event.createdAt));
+</script>
+
+<div class="event {event.changeType}" style="left: {leftPx}px;">
+	{#if showDetail}
+		<div class="hover-data">
+			<p>{event.itemType}</p>
+			<p>{event.changeType}</p>
+			<p>{time.toFormat(FULL_DATE_FORMAT)}</p>
+			<pre>{JSON.stringify(event.item, null, 2)}</pre>
+		</div>
+	{/if}
+	<div
+		class="icon"
+		role="presentation"
+		{onmouseover}
+		{onmouseleave}
+		onfocus={onmouseover}
+		onblur={onmouseleave}
+	></div>
+</div>
+
+<style>
+	.event {
+		position: relative;
+		width: 0;
+		height: 0;
+	}
+
+	.icon {
+		--size: 8px;
+		width: var(--size);
+		height: var(--size);
+		/* margin-left: calc(var(--size) / -2); */
+		border-left: 2px solid white;
+		margin-top: calc(var(--size) / -2);
+		/* border-radius: 50%; */
+	}
+
+	.DEL .icon {
+		background: linear-gradient(to right, orangered, transparent);
+	}
+
+	.SET .icon {
+		background: linear-gradient(to right, lightgreen, transparent);
+	}
+
+	.hover-data {
+		position: absolute;
+		right: 1rem;
+		z-index: 1000;
+		background-color: rgba(0, 0, 0, 0.5);
+		padding: 0.5rem;
+		border-radius: 0.25rem;
+	}
+</style>

package/src/lib/components/transactions/TransactionEventGroup.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	const { firstPx, lastPx, numEvents }: { firstPx: number; lastPx: number; numEvents: number } =
+		$props();
+
+	let showDetail = $state(false);
+
+	const onmouseover = () => {
+		showDetail = true;
+	};
+
+	const onmouseleave = () => {
+		showDetail = false;
+	};
+</script>
+
+<div class="event" style="left: {firstPx}px; width: {lastPx - firstPx}px;">
+	{#if showDetail}
+		<div class="hover-data">
+			<p>{numEvents} Events</p>
+		</div>
+	{/if}
+	<div
+		class="icon"
+		role="presentation"
+		{onmouseover}
+		{onmouseleave}
+		onfocus={onmouseover}
+		onblur={onmouseleave}
+	></div>
+</div>
+
+<style>
+	.event {
+		position: relative;
+		width: 0;
+		height: 0;
+	}
+
+	.icon {
+		--size: 8px;
+		height: var(--size);
+		margin-left: calc(var(--size) / -2);
+		margin-top: calc(var(--size) / -2);
+		/* border-radius: 5px; */
+		background-color: cornflowerblue;
+	}
+
+	.hover-data {
+		position: absolute;
+		right: 1rem;
+		z-index: 1000;
+		background-color: rgba(0, 0, 0, 0.5);
+		padding: 0.5rem;
+		border-radius: 0.25rem;
+	}
+</style>

package/src/lib/components/transactions/Transactions.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { myko as client } from '../../services/svelte-client.svelte.js';
+	import { EntitySnapshotDifference, type ID } 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
+	}: {
+		entrypointId: ID;
+		entrypointItemType: string;
+	} = $props();
+
+	const onwheel = (e: WheelEvent) => {
+		if (e.ctrlKey || e.metaKey) {
+			e.preventDefault();
+			viewstate.zoom(e.deltaY);
+		}
+
+		if (e.shiftKey) {
+			e.preventDefault();
+			viewstate.pan(e.deltaY);
+		}
+	};
+
+	const onmousemove = (e: MouseEvent) => {
+		viewstate.mouseX = e.clientX;
+	};
+
+	const onkeydown = (e: KeyboardEvent) => {
+		if (e.key === 'z') {
+			viewstate.zoomAllTheWayOut();
+		}
+	};
+
+	const onmousedown = (e: MouseEvent) => {
+		e.stopPropagation();
+		if (e.button === 0) {
+		}
+
+		viewstate.startDragWindback();
+	};
+
+	const onmouseup = (e: MouseEvent) => {
+		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/src/lib/components/transactions/TransactonView.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { ID } from '@myko/core';
+	import TransactionDetails from './TransactionDetails.svelte';
+
+	let open = $state(false);
+
+	const { tx }: { tx: ID } = $props();
+</script>
+
+<div
+	class="transaction"
+	role="presentation"
+	onclick={() => {
+		open = !open;
+	}}
+>
+	<span>
+		{tx}
+	</span>
+
+	{#if open}
+		<TransactionDetails {tx}></TransactionDetails>
+	{/if}
+</div>

package/src/lib/components/windback/WindbackFrame.svelte

@@ -0,0 +1,65 @@
+<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>
+
+<div class="bg"></div>
+
+<div class="windback">
+	<div class="windback-frame" class:windingBack={windbackState.windingBack}>
+		{@render children()}
+	</div>
+
+	<div class="windback-control" class:windingBack={windbackState.windingBack}>
+		{#if windbackState.ctx}
+			<Transactions
+				entrypointId={windbackState.ctx.id}
+				entrypointItemType={windbackState.ctx.itemType}
+			/>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+	}
+
+	.windback {
+		height: 100%;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.windback-frame {
+		width: 100%;
+		height: 100%;
+		background-color: black;
+		transition: filter 1s ease-in-out;
+		transition: height 1s ease-in-out;
+		&.windingBack {
+			filter: saturate(0.25);
+			height: 70%;
+		}
+	}
+
+	.windback-control {
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 1000;
+		height: 0%;
+		transition: height 1s ease-in-out;
+
+		&.windingBack {
+			height: 30%;
+		}
+	}
+</style>

package/src/lib/components/windback/index.ts

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

package/src/lib/index.ts

@@ -0,0 +1,26 @@
+// Components
+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 * from './components/state/windback.svelte.js';
+export * from './components/windback/index.js';
+
+// 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.js';
+
+// Re-export useful types from @myko/core
+export { ConnectionStatus, type ClientStats } from '@myko/core';