From c631c8fc855b1854f14fc7fbf1d8afedaa37a0db Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 01:35:28 -0400
Subject: Event capture and display tools.

This is meant to be used in swatches, to display the events and callbacks generated by a component as part of the swatch. The usage pattern is described in the comments (in both places).

Naturally, this has its own swatch.
---
 ui/routes/(swatch)/.swatch/+page.svelte            |  4 ++-
 .../(swatch)/.swatch/swatch/EventLog/+page.svelte  | 38 ++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 ui/routes/(swatch)/.swatch/swatch/EventLog/+page.svelte

(limited to 'ui/routes')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index 8d03c8d..abcb53f 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -7,4 +7,6 @@
 
 <h2>components</h2>
 
-<ul></ul>
+<ul>
+  <li><a href="swatch/EventLog">swatch/EventLog</a></li>
+</ul>
diff --git a/ui/routes/(swatch)/.swatch/swatch/EventLog/+page.svelte b/ui/routes/(swatch)/.swatch/swatch/EventLog/+page.svelte
new file mode 100644
index 0000000..a751ca3
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/swatch/EventLog/+page.svelte
@@ -0,0 +1,38 @@
+<script>
+  import EventCapture from '$lib/swatch/event-capture.svelte.js';
+  import { json } from '$lib/swatch/derive.js';
+
+  import EventLog from '$lib/components/swatch/EventLog.svelte';
+
+  let eventsInput = $state(
+    JSON.stringify(
+      [{ event: 'example', args: ['argument a', 'argument b'] }],
+      /* replacer */ null,
+      /* space */ 2,
+    ),
+  );
+  let events = $derived(json(eventsInput));
+
+  let capture = $state(new EventCapture());
+  const clear = capture.on('clear');
+</script>
+
+<h1><code>swatch/EventLog</code></h1>
+
+<nav><p><a href="..">Back to swatches</a></p></nav>
+
+<h2>properties</h2>
+
+<div class="component-properties">
+  <label>events (json) <textarea bind:value={eventsInput}></textarea></label>
+</div>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <EventLog {events} {clear} />
+</div>
+
+<h2>events</h2>
+
+<EventLog events={capture.events} clear={capture.clear.bind(capture)} />
-- 
cgit v1.2.3