@myko/ui-svelte 4.4.1 → 4.4.3

package/dist/components/state/viewstate.svelte.js

@@ -0,0 +1,259 @@
+import { DateTime } from 'luxon';
+import { memoizeWith, uniq } from 'ramda';
+import { SvelteSet } from 'svelte/reactivity';
+import { resolutions } from './resolutions.js';
+export class TransactionsViewState {
+    windbackState;
+    #visibleEvents = new SvelteSet();
+    #timeZero = $state(DateTime.now());
+    #leftTimeMilis = $state(DateTime.utc().minus({ minutes: 1 }).toMillis());
+    #rightTimeMilis = $state(DateTime.now().toMillis());
+    #widthPx = $state(0);
+    #now = $state(DateTime.now());
+    #mouseX = $state(0);
+    #draggingWindback = $state(false);
+    #leftTime = $derived(fromMillisMemo(this.#leftTimeMilis));
+    #rightTime = $derived(this.#rightTimeMilis ? fromMillisMemo(this.#rightTimeMilis) : null);
+    #timeRangeMilis = $derived(this.rightTimeMilis - this.#leftTimeMilis);
+    #durationMilisPerPx = $derived(this.#timeRangeMilis / this.#widthPx);
+    constructor(windbackState) {
+        this.windbackState = windbackState;
+        const updateTime = () => {
+            this.#now = DateTime.now();
+            requestAnimationFrame(updateTime);
+        };
+        updateTime();
+        $effect(() => {
+            if (!this.#draggingWindback)
+                return;
+            this.windbackState.updateCursor(this.mouseTime);
+        });
+    }
+    get windbackX() {
+        if (!this.windbackState.cursor) {
+            return 0;
+        }
+        const time = this.windbackState.cursor.toMillis();
+        const left = this.#leftTimeMilis;
+        const right = this.rightTimeMilis;
+        const range = right - left;
+        const norm = (time - left) / range;
+        return norm * this.#widthPx;
+    }
+    get windbackFullX() {
+        if (!this.windbackState.cursor) {
+            return 0;
+        }
+        const time = this.windbackState.cursor.toMillis();
+        const left = this.#timeZero.toMillis();
+        const right = this.#now.toMillis();
+        const range = right - left;
+        const norm = (time - left) / range;
+        return norm * this.#widthPx;
+    }
+    registerEvents(events) {
+        events.forEach((event) => this.#visibleEvents.add(event));
+    }
+    get rightTime() {
+        return this.#rightTime ?? this.#now;
+    }
+    set rightTime(_value) {
+        throw new Error('Cannot set rightTime use rightTimeMilis');
+    }
+    get rightTimeMilis() {
+        return this.#rightTimeMilis ?? this.#now.toMillis();
+    }
+    set rightTimeMilis(_value) {
+        throw new Error('Cannot set rightTimeMilis. [readonly]');
+    }
+    get durationMilisPerPx() {
+        return this.#durationMilisPerPx;
+    }
+    set durationMilisPerPx(_value) {
+        throw new Error('Cannot set durationMilisPerPx. [readonly]');
+    }
+    get leftTime() {
+        return this.#leftTime;
+    }
+    set leftTime(_value) {
+        throw new Error('Cannot set leftTime [readonly]');
+    }
+    get leftTimeMilis() {
+        return this.#leftTimeMilis;
+    }
+    set leftTimeMilis(_value) {
+        throw new Error('Cannot set leftTimeMilis [readonly]');
+    }
+    get timeRangeMilis() {
+        return this.#timeRangeMilis;
+    }
+    set timeRangeMilis(_value) {
+        throw new Error('Cannot set timeRangeMilis [readonly]');
+    }
+    get milisPerPx() {
+        return this.#timeRangeMilis / this.#widthPx;
+    }
+    set milisPerPx(_value) {
+        throw new Error('Cannot set milisPerPx [readonly]');
+    }
+    set width(value) {
+        this.#widthPx = value;
+    }
+    get width() {
+        return this.#widthPx;
+    }
+    set timeZero(value) {
+        this.#timeZero = value;
+    }
+    get timeZero() {
+        return this.#timeZero;
+    }
+    get now() {
+        return this.#now;
+    }
+    set now(_value) {
+        throw new Error('Cannot set now [readonly]');
+    }
+    set mouseX(value) {
+        this.#mouseX = value;
+    }
+    get isOverWindback() {
+        return Math.abs(this.#mouseX - this.windbackX) < 10;
+    }
+    get mouseX() {
+        if (!this.windbackState.ctx) {
+            return this.#mouseX;
+        }
+        if (this.isOverWindback) {
+            return this.windbackX;
+        }
+        return this.#mouseX;
+    }
+    get mouseTime() {
+        const milis = this.#leftTimeMilis + this.#mouseX * this.#durationMilisPerPx;
+        return fromMillisMemo(milis);
+    }
+    set mouseTime(_value) {
+        throw new Error('Cannot set mouseTime [readonly]');
+    }
+    get mouseTimeRelative() {
+        return this.#now.diff(this.mouseTime);
+    }
+    get allEventTimestamps() {
+        const times = Array.from(this.#visibleEvents.values()).map((ts) => fromISOMemo(ts).toMillis());
+        const adjustedMs = times.map((t) => t - this.#timeZero.toMillis());
+        const remap = (t) => {
+            return (t / (this.#now.toMillis() - this.#timeZero.toMillis())) * this.#widthPx;
+        };
+        const adjustedPx = adjustedMs.map(remap).map(Math.round);
+        return uniq(adjustedPx);
+    }
+    set allEventTimestamps(_value) {
+        throw new Error('Cannot set allEventTimestamps [readonly]');
+    }
+    get majorResolution() {
+        return resolutions[this.majorResolutionIndex];
+    }
+    get majorResolutionIndex() {
+        const real = resolutions.findIndex((resolution) => resolution.milis * (1 / this.#durationMilisPerPx) >= 100);
+        const safe = Math.max(0, Math.min(real, resolutions.length - 1));
+        return safe;
+    }
+    get majors() {
+        const majorWidth = this.majorResolution.milis / this.durationMilisPerPx;
+        const majorLefts = this.width / majorWidth + 2;
+        const firstMajorTime = this.leftTimeMilis - (this.leftTimeMilis % this.majorResolution.milis);
+        const majorTimes = Array.from({ length: majorLefts }).map((_, i) => firstMajorTime + i * this.majorResolution.milis);
+        const majorBundles = majorTimes.map((x) => {
+            const leftTimeMilis = x - this.leftTimeMilis;
+            const leftPx = leftTimeMilis / this.durationMilisPerPx;
+            return {
+                leftPx,
+                time: x
+            };
+        });
+        return majorBundles;
+    }
+    get minorResolution() {
+        const minorIndex = this.majorResolutionIndex - 1;
+        if (minorIndex < 0) {
+            return resolutions[0];
+        }
+        if (minorIndex > resolutions.length - 1) {
+            return resolutions[resolutions.length - 1];
+        }
+        return resolutions[minorIndex];
+    }
+    get minors() {
+        const numMinors = this.majorResolution.milis / this.minorResolution.milis - 1;
+        const minorWidth = this.minorResolution.milis / this.durationMilisPerPx;
+        const minorLefts = Array.from({ length: numMinors }).map((_, i) => ({
+            leftPx: (i + 1) * minorWidth,
+            time: (i + 1) * this.minorResolution.milis
+        }));
+        return minorLefts;
+    }
+    zoomAllTheWayOut() {
+        this.#rightTimeMilis = this.#now.toMillis();
+        this.#leftTimeMilis = this.#timeZero.toMillis();
+    }
+    zoom(delta) {
+        const factor = 1 + delta / 1000;
+        const oldTimeRangeMilis = this.#timeRangeMilis;
+        const newTimeRangeMilis = oldTimeRangeMilis * factor;
+        const normX = this.#mouseX / this.#widthPx;
+        const timeRangeDiff = newTimeRangeMilis - oldTimeRangeMilis;
+        const rightTimeDiff = timeRangeDiff * (1 - normX);
+        const leftTimeDiff = timeRangeDiff * normX;
+        const nowMilis = DateTime.now().toMillis();
+        const leftTimeMilis = this.leftTime.toMillis();
+        const rightTimeMilis = this.rightTime.toMillis();
+        const newRightTimeMilis = Math.min(rightTimeMilis + rightTimeDiff, nowMilis);
+        const newLeftTimeMilis = Math.max(leftTimeMilis - leftTimeDiff, this.#timeZero.toMillis());
+        this.#rightTimeMilis = newRightTimeMilis;
+        this.#leftTimeMilis = newLeftTimeMilis;
+    }
+    pan(delta) {
+        const factor = delta / -5000;
+        const timeRangeMilis = this.#timeRangeMilis;
+        const timeDiff = timeRangeMilis * factor;
+        const newLeftTimeMilis = this.leftTime.toMillis() + timeDiff;
+        const newRightTimeMilis = this.rightTime.toMillis() + timeDiff;
+        const nowMilis = DateTime.now().toMillis();
+        const zeroMilis = this.#timeZero.toMillis();
+        if (newRightTimeMilis > nowMilis) {
+            const diff = newRightTimeMilis - nowMilis;
+            const adjustedNewLeftTimeMilis = newLeftTimeMilis - diff;
+            this.#rightTimeMilis = nowMilis;
+            this.#leftTimeMilis = adjustedNewLeftTimeMilis;
+            return;
+        }
+        if (newLeftTimeMilis < zeroMilis) {
+            const diff = zeroMilis - newLeftTimeMilis;
+            const adjustedNewRightTimeMilis = newRightTimeMilis + diff;
+            this.#leftTimeMilis = zeroMilis;
+            this.#rightTimeMilis = adjustedNewRightTimeMilis;
+            return;
+        }
+        this.#leftTimeMilis = newLeftTimeMilis;
+        this.#rightTimeMilis = newRightTimeMilis;
+    }
+    startDragWindback() {
+        if (!this.windbackState.ctx) {
+            return;
+        }
+        if (!this.isOverWindback) {
+            return;
+        }
+        this.#draggingWindback = true;
+    }
+    stopDragWindback() {
+        this.#draggingWindback = false;
+        this.windbackState.saveWindbackTime();
+    }
+}
+export const TRANSACTIONS_VIEW_STATE = Symbol('transactions-view-state');
+export const FULL_DATE_FORMAT = `yyyy-MM-dd HH:mm:ss`;
+export const fromISOMemo = memoizeWith((isoString) => isoString, DateTime.fromISO);
+export const fromMillisMemo = memoizeWith((millis) => millis.toString(), DateTime.fromMillis);
+export const isoToMillisMemo = memoizeWith((isoString) => isoString, (isoString) => DateTime.fromISO(isoString).toMillis());

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

@@ -0,0 +1,16 @@
+import { type MItemStub } from '@myko/core';
+import { DateTime } from 'luxon';
+export declare class WindbackState {
+    #private;
+    constructor();
+    get ctx(): Omit<MItemStub, 'hash'> | undefined;
+    set ctx(value: Omit<MItemStub, 'hash'> | undefined);
+    get windingBack(): boolean;
+    get cursor(): DateTime | undefined;
+    get caughtUp(): boolean;
+    updateCursor(time: DateTime): void;
+    saveWindbackTime(): void;
+}
+export declare const windbackState: WindbackState;
+export declare const startWindback: (root: Omit<MItemStub, "hash">) => void;
+export declare const exitWindback: () => void;

package/dist/components/state/windback.svelte.js

@@ -0,0 +1,65 @@
+import { myko as client } from '../../services/svelte-client.svelte.js';
+import { ClearClientWindbackTime, SetClientWindbackTime, WindbackStatus } from '@myko/core';
+import { DateTime } from 'luxon';
+export class WindbackState {
+    #ctx = $state();
+    #liveWindbackTime = $state(null);
+    #localWindbackTime = $state();
+    constructor() {
+        client.watchReport(new WindbackStatus({})).subscribe((result) => {
+            this.#liveWindbackTime = result.windback;
+            this.#localWindbackTime = result.windback ? DateTime.fromISO(result.windback) : undefined;
+        });
+    }
+    get ctx() {
+        return this.#ctx;
+    }
+    set ctx(value) {
+        this.#ctx = value;
+    }
+    get windingBack() {
+        return !!this.#liveWindbackTime && !!this.#ctx;
+    }
+    get cursor() {
+        return this.#localWindbackTime ? this.#localWindbackTime : undefined;
+    }
+    get caughtUp() {
+        console.log('Caught up', this.#liveWindbackTime, this.#localWindbackTime?.toUTC()?.toISO());
+        return this.#liveWindbackTime === this.#localWindbackTime?.toUTC()?.toISO();
+    }
+    updateCursor(time) {
+        this.#localWindbackTime = time;
+    }
+    saveWindbackTime() {
+        if (!this.#ctx) {
+            return;
+        }
+        if (!this.#localWindbackTime) {
+            return;
+        }
+        const valid = this.#localWindbackTime.toUTC().toISO();
+        if (!valid) {
+            console.error('Invalid time', this.#localWindbackTime);
+            return;
+        }
+        client.sendCommand(new SetClientWindbackTime({ windback: valid }));
+    }
+}
+export const windbackState = new WindbackState();
+export const startWindback = (root) => {
+    const windback = DateTime.utc().minus({ seconds: 5 }).toISO();
+    if (!windback)
+        return;
+    client
+        .sendCommand(new SetClientWindbackTime({ windback }))
+        .then((x) => {
+        if (!x) {
+            return;
+        }
+        windbackState.ctx = root;
+    });
+};
+export const exitWindback = () => {
+    windbackState.ctx = undefined;
+    client.sendCommand(new ClearClientWindbackTime({}));
+};

package/dist/components/transactions/EntityHistory.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">import { myko as client } from "../../services/svelte-client.svelte.js";
+import { ChildEntitiesAllTime, EventsForEntity } from "@myko/core";
+import { startWith } from "rxjs";
+import { getContext } from "svelte";
+import {
+  fromISOMemo,
+  isoToMillisMemo,
+  TRANSACTIONS_VIEW_STATE
+} from "../state/viewstate.svelte.js";
+import { inview } from "svelte-inview";
+import EntityHistory from "./EntityHistory.svelte";
+import TransactionEvent from "./TransactionEvent.svelte";
+import TransactionEventGroup from "./TransactionEventGroup.svelte";
+const {
+  id,
+  itemType,
+  level = 0
+} = $props();
+const viewState = getContext(TRANSACTIONS_VIEW_STATE);
+const start = $derived(viewState.leftTime.toUTC().toISO());
+const end = $derived(viewState.rightTime.toUTC().toISO());
+const isRoot = $derived(level == 0);
+const history = client.watchQuery(new EventsForEntity(id)).pipe(startWith([]));
+const name = $derived(
+  $history.length > 0 && $history[0].event.item && typeof $history[0].event.item === "object" && "name" in $history[0].event.item ? $history[0].event.item["name"] : `Unknown ${itemType}`
+);
+$effect(() => {
+  const firstEvent = $history && $history.length > 0 ? $history[0] : void 0;
+  if (isRoot && firstEvent) {
+    viewState.timeZero = fromISOMemo(firstEvent.event.createdAt);
+  }
+});
+$effect(() => {
+  viewState.registerEvents($history.map((x) => x.event.createdAt));
+});
+const visibleEvents = $derived(
+  $history.filter(
+    (x) => (start ? x.event.createdAt >= start : true) && (end ? x.event.createdAt <= end : true)
+  )
+);
+const visibleEventRenders = $derived(
+  visibleEvents.map((x) => {
+    const timeMilis = $derived(isoToMillisMemo(x.event.createdAt));
+    const leftTimeMilis = $derived(timeMilis - viewState.leftTimeMilis);
+    const leftPx = $derived(leftTimeMilis / viewState.durationMilisPerPx);
+    return {
+      eventContainer: x,
+      leftPx
+    };
+  })
+);
+const eventGroups = $derived(
+  visibleEventRenders.reduce((acc, x) => {
+    const lastGroup = acc[acc.length - 1];
+    if (lastGroup && x.leftPx - lastGroup.lastPx < 10) {
+      lastGroup.lastPx = x.leftPx;
+      lastGroup.events.push(x);
+    } else {
+      acc.push({
+        firstPx: x.leftPx,
+        lastPx: x.leftPx,
+        events: [x]
+      });
+    }
+    return acc;
+  }, [])
+);
+const children = $derived(
+  client.watchReport(
+    new ChildEntitiesAllTime({
+      parentType: itemType,
+      parentId: id
+    })
+  ).pipe(startWith([]))
+);
+let isInView = $state(false);
+</script>
+
+<div class="entity-history" style="min-height:{($children.length + 1) * 10}px;">
+	<div
+		class="self"
+		use:inview={{}}
+		oninview_enter={() => (isInView = true)}
+		oninview_leave={() => (isInView = false)}
+	>
+		<h2 style="margin-left: {level * 1}rem;">
+			{name}
+			{$children.length}
+		</h2>
+		<div class="events">
+			{#if isInView}
+				{#each eventGroups as group}
+					{#if group.events.length === 1}
+						<TransactionEvent event={group.events[0].eventContainer.event} />
+					{:else}
+						<TransactionEventGroup
+							firstPx={group.firstPx}
+							lastPx={group.lastPx}
+							numEvents={group.events.length}
+						/>
+					{/if}
+				{/each}
+			{/if}
+		</div>
+	</div>
+
+	{#each $children as child (child.id)}
+		<EntityHistory id={child.id} itemType={child.itemType} level={level + 1} />
+	{/each}
+</div>
+
+<style>
+	.self {
+		display: flex;
+		align-items: center;
+		position: relative;
+		margin-bottom: 0.1rem;
+	}
+	.entity-history {
+		position: relative;
+		background-color: rgba(255, 255, 255, 0.05);
+		min-height: 10px;
+	}
+
+	h2 {
+		opacity: 0.5;
+	}
+
+	.events {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		inset: 0;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import { type ID } from '@myko/core';
+import EntityHistory from './EntityHistory.svelte';
+type $$ComponentProps = {
+    id: ID;
+    itemType: string;
+    level?: number;
+};
+declare const EntityHistory: import("svelte").Component<$$ComponentProps, {}, "">;
+type EntityHistory = ReturnType<typeof EntityHistory>;
+export default EntityHistory;

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

@@ -1,28 +1,21 @@
-<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 lang="ts">import { DateTime } from "luxon";
+import { getContext } from "svelte";
+import {
+  FULL_DATE_FORMAT,
+  TRANSACTIONS_VIEW_STATE
+} from "../state/viewstate.svelte.js";
+import { windbackState } from "../state/windback.svelte.js";
+const viewState = getContext(TRANSACTIONS_VIEW_STATE);
+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 = $state(null);
 </script>
 
 <div class="all-time">

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

@@ -0,0 +1,3 @@
+declare const TimeStrip: import("svelte").Component<Record<string, never>, {}, "">;
+type TimeStrip = ReturnType<typeof TimeStrip>;
+export default TimeStrip;

package/dist/components/transactions/TransactionDetails.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">import { myko as client } from "../../services/svelte-client.svelte.js";
+import { EventsForTransaction } from "@myko/core";
+import { fromISOMemo, FULL_DATE_FORMAT } from "../state/viewstate.svelte.js";
+const { tx } = $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/dist/components/transactions/TransactionDetails.svelte.d.ts

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

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

@@ -1,35 +1,23 @@
-<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 lang="ts">import { getContext } from "svelte";
+import {
+  fromISOMemo,
+  FULL_DATE_FORMAT,
+  isoToMillisMemo,
+  TRANSACTIONS_VIEW_STATE
+} from "../state/viewstate.svelte.js";
+const { event } = $props();
+const timeMilis = $derived(isoToMillisMemo(event.createdAt));
+const viewState = getContext(TRANSACTIONS_VIEW_STATE);
+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;">

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

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

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

@@ -1,16 +1,11 @@
-<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 lang="ts">const { firstPx, lastPx, numEvents } = $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;">

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    firstPx: number;
+    lastPx: number;
+    numEvents: number;
+};
+declare const TransactionEventGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type TransactionEventGroup = ReturnType<typeof TransactionEventGroup>;
+export default TransactionEventGroup;