From a2a0ec035f74a454df5a76ed999355f536f5b277 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 19:45:49 -0400
Subject: Create a swatch for the `Conversation` component.

---
 ui/routes/(swatch)/.swatch/+page.svelte            |  1 +
 .../(swatch)/.swatch/Conversation/+page.svelte     | 31 ++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/Conversation/+page.svelte

(limited to 'ui')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index abcb53f..165bbad 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -8,5 +8,6 @@
 <h2>components</h2>
 
 <ul>
+  <li><a href="Conversation">Conversation</a></li>
   <li><a href="swatch/EventLog">swatch/EventLog</a></li>
 </ul>
diff --git a/ui/routes/(swatch)/.swatch/Conversation/+page.svelte b/ui/routes/(swatch)/.swatch/Conversation/+page.svelte
new file mode 100644
index 0000000..0b98204
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/Conversation/+page.svelte
@@ -0,0 +1,31 @@
+<script>
+  import Conversation from '$lib/components/Conversation.svelte';
+
+  let id = $state('Czero');
+  let name = $state('a long conversation');
+  let active = $state(false);
+  let hasUnreads = $state(false);
+</script>
+
+<h1><code>Conversation</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>properties</h2>
+
+<div class="component-properties">
+  <label>id <input type="text" bind:value={id} /></label>
+  <label>name <input type="text" bind:value={name} /></label>
+  <label>active <input type="checkbox" bind:checked={active} /></label>
+  <label>has unreads <input type="checkbox" bind:checked={hasUnreads} /></label>
+</div>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <nav class="list-nav">
+    <ul>
+      <Conversation {id} {name} {active} {hasUnreads} />
+    </ul>
+  </nav>
+</div>
-- 
cgit v1.2.3


From 3fd175165ee262f0180b78d2dd206a993c20200c Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Mon, 7 Jul 2025 16:11:59 -0400
Subject: Create a swatch for the `ConversationList` component.

---
 ui/routes/(swatch)/.swatch/+page.svelte            |  1 +
 .../(swatch)/.swatch/ConversationList/+page.svelte | 54 ++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/ConversationList/+page.svelte

(limited to 'ui')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index abcb53f..c8f2133 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -8,5 +8,6 @@
 <h2>components</h2>
 
 <ul>
+  <li><a href="ConversationList">ConversationList</a></li>
   <li><a href="swatch/EventLog">swatch/EventLog</a></li>
 </ul>
diff --git a/ui/routes/(swatch)/.swatch/ConversationList/+page.svelte b/ui/routes/(swatch)/.swatch/ConversationList/+page.svelte
new file mode 100644
index 0000000..1a56966
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/ConversationList/+page.svelte
@@ -0,0 +1,54 @@
+<script>
+  import { json } from '$lib/swatch/derive.js';
+
+  import ConversationList from '$lib/components/ConversationList.svelte';
+
+  let conversationsInput = $state(
+    JSON.stringify(
+      [
+        {
+          id: 'Czero',
+          name: 'A long conversation',
+          hasUnreads: false,
+        },
+        {
+          id: 'Cone',
+          name: 'A shorter conversation',
+          hasUnreads: true,
+        },
+      ],
+      /* replacer */ null,
+      /* space */ 2,
+    ),
+  );
+  let conversations = $derived(json(conversationsInput));
+
+  let active = $state(null);
+</script>
+
+<h1><code>ConversationList</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>properties</h2>
+
+<div class="component-properties">
+  <label
+    ><p>conversations (json)</p>
+    <textarea class="html" bind:value={conversationsInput}></textarea>
+  </label>
+
+  <label>active <input type="text" bind:value={active} /></label>
+  <div class="suggestion">
+    interesting values:
+    <button onclick={() => (active = null)}>(none)</button>
+    <button onclick={() => (active = 'Czero')}>Czero</button>
+    <button onclick={() => (active = 'Cone')}>Cone</button>
+  </div>
+</div>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <ConversationList {conversations} {active} />
+</div>
-- 
cgit v1.2.3


From ca4a9dfbc2d2339e6f76330026d8fe15be36ee67 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 19:52:28 -0400
Subject: Create swatch for the `CreateConversationForm` component.

---
 ui/routes/(swatch)/.swatch/+page.svelte            |  1 +
 .../.swatch/CreateConversationForm/+page.svelte    | 23 ++++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/CreateConversationForm/+page.svelte

(limited to 'ui')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index abcb53f..4ce1762 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -8,5 +8,6 @@
 <h2>components</h2>
 
 <ul>
+  <li><a href="CreateConversationForm">CreateConversationForm</a></li>
   <li><a href="swatch/EventLog">swatch/EventLog</a></li>
 </ul>
diff --git a/ui/routes/(swatch)/.swatch/CreateConversationForm/+page.svelte b/ui/routes/(swatch)/.swatch/CreateConversationForm/+page.svelte
new file mode 100644
index 0000000..f089969
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/CreateConversationForm/+page.svelte
@@ -0,0 +1,23 @@
+<script>
+  import EventCapture from '$lib/swatch/event-capture.svelte.js';
+
+  import CreateConversationForm from '$lib/components/CreateConversationForm.svelte';
+  import EventLog from '$lib/components/swatch/EventLog.svelte';
+
+  let capture = $state(new EventCapture());
+  const createConversation = capture.on('createConversation');
+</script>
+
+<h1><code>CreateConversationForm</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <CreateConversationForm {createConversation} />
+</div>
+
+<h2>events</h2>
+
+<EventLog events={capture.events} clear={capture.clear.bind(capture)} />
-- 
cgit v1.2.3


From f7c89692e76112fd20275ce631c102588835c8b8 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 19:53:08 -0400
Subject: Create swatch for the `Invite` component.

---
 ui/routes/(swatch)/.swatch/+page.svelte        |  1 +
 ui/routes/(swatch)/.swatch/Invite/+page.svelte | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/Invite/+page.svelte

(limited to 'ui')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index abcb53f..5242718 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -8,5 +8,6 @@
 <h2>components</h2>
 
 <ul>
+  <li><a href="Invite">Invite</a></li>
   <li><a href="swatch/EventLog">swatch/EventLog</a></li>
 </ul>
diff --git a/ui/routes/(swatch)/.swatch/Invite/+page.svelte b/ui/routes/(swatch)/.swatch/Invite/+page.svelte
new file mode 100644
index 0000000..0786194
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/Invite/+page.svelte
@@ -0,0 +1,21 @@
+<script>
+  import Invite from '$lib/components/Invite.svelte';
+
+  let id = $state('Iaaaa');
+</script>
+
+<h1><code>Invite</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>properties</h2>
+
+<div class="component-properties">
+  <label>id <input type="text" bind:value={id} /></label>
+</div>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <Invite {id} />
+</div>
-- 
cgit v1.2.3


From 718ffe3dceffb4a0439d2b3192a266cb75c7fda7 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 19:55:34 -0400
Subject: Create swatch for the `Invites` component.

---
 ui/routes/(swatch)/.swatch/+page.svelte         |  1 +
 ui/routes/(swatch)/.swatch/Invites/+page.svelte | 35 +++++++++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/Invites/+page.svelte

(limited to 'ui')

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


From dbccc44ad781bba04862017c9b041240821d4c08 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 19:56:11 -0400
Subject: Create swatch for the `LogIn` component.

---
 ui/routes/(swatch)/.swatch/+page.svelte       |  1 +
 ui/routes/(swatch)/.swatch/LogIn/+page.svelte | 31 +++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/LogIn/+page.svelte

(limited to 'ui')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index abcb53f..9484cf9 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -8,5 +8,6 @@
 <h2>components</h2>
 
 <ul>
+  <li><a href="LogIn">LogIn</a></li>
   <li><a href="swatch/EventLog">swatch/EventLog</a></li>
 </ul>
diff --git a/ui/routes/(swatch)/.swatch/LogIn/+page.svelte b/ui/routes/(swatch)/.swatch/LogIn/+page.svelte
new file mode 100644
index 0000000..8501a6c
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/LogIn/+page.svelte
@@ -0,0 +1,31 @@
+<script>
+  import EventCapture from '$lib/swatch/event-capture.svelte.js';
+
+  import EventLog from '$lib/components/swatch/EventLog.svelte';
+  import LogIn from '$lib/components/LogIn.svelte';
+
+  let legend = $state('sign in');
+
+  let capture = $state(new EventCapture());
+  const logIn = capture.on('logIn');
+</script>
+
+<h1><code>LogIn</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>properties</h2>
+
+<div class="component-properties">
+  <label>legend <input type="text" bind:value={legend} /></label>
+</div>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <LogIn {legend} {logIn} />
+</div>
+
+<h2>events</h2>
+
+<EventLog events={capture.events} clear={capture.clear.bind(capture)} />
-- 
cgit v1.2.3


From 3b32644d2f30170bdf949dffaea79cde4d4ec647 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 19:57:50 -0400
Subject: Create swatch for the `MessageInput` component.

---
 ui/routes/(swatch)/.swatch/+page.svelte            |  1 +
 .../(swatch)/.swatch/MessageInput/+page.svelte     | 23 ++++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/MessageInput/+page.svelte

(limited to 'ui')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index abcb53f..db02fc3 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -8,5 +8,6 @@
 <h2>components</h2>
 
 <ul>
+  <li><a href="MessageInput">MessageInput</a></li>
   <li><a href="swatch/EventLog">swatch/EventLog</a></li>
 </ul>
diff --git a/ui/routes/(swatch)/.swatch/MessageInput/+page.svelte b/ui/routes/(swatch)/.swatch/MessageInput/+page.svelte
new file mode 100644
index 0000000..b1d5864
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/MessageInput/+page.svelte
@@ -0,0 +1,23 @@
+<script>
+  import EventCapture from '$lib/swatch/event-capture.svelte.js';
+
+  import MessageInput from '$lib/components/MessageInput.svelte';
+  import EventLog from '$lib/components/swatch/EventLog.svelte';
+
+  let capture = $state(new EventCapture());
+  const sendMessage = capture.on('sendMessage');
+</script>
+
+<h1><code>MessageInput</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <MessageInput {sendMessage} />
+</div>
+
+<h2>events</h2>
+
+<EventLog events={capture.events} clear={capture.clear.bind(capture)} />
-- 
cgit v1.2.3


From 44a462286ccaa8489642460a0199c951aad43418 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 19:58:14 -0400
Subject: Create swatch for the `Message` component.

---
 ui/routes/(swatch)/.swatch/+page.svelte         |  1 +
 ui/routes/(swatch)/.swatch/Message/+page.svelte | 63 +++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/Message/+page.svelte

(limited to 'ui')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index abcb53f..d3b211a 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -8,5 +8,6 @@
 <h2>components</h2>
 
 <ul>
+  <li><a href="Message">Message</a></li>
   <li><a href="swatch/EventLog">swatch/EventLog</a></li>
 </ul>
diff --git a/ui/routes/(swatch)/.swatch/Message/+page.svelte b/ui/routes/(swatch)/.swatch/Message/+page.svelte
new file mode 100644
index 0000000..6fd9b6b
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/Message/+page.svelte
@@ -0,0 +1,63 @@
+<script>
+  import { DateTime } from 'luxon';
+
+  import EventCapture from '$lib/swatch/event-capture.svelte.js';
+
+  import Message from '$lib/components/Message.svelte';
+  import EventLog from '$lib/components/swatch/EventLog.svelte';
+
+  let id = $state('Mplayspelunky');
+  let atInput = $state('2025-07-07T15:19:00Z');
+  // Astonishingly, `DateTime.fromISO` does not throw on invalid inputs. It generates an "Invalid
+  // DateTime" sentinel value, instead.
+  let at = $derived(DateTime.fromISO(atInput));
+  let renderedBody = $state(
+    '<p>Lorem ipsum <code>dolor</code> sit amet, consectetur adipiscing elit. Nunc quis ante ac leo tristique iaculis vel in tortor. Praesent sed interdum ipsum. Pellentesque blandit, sapien at mattis facilisis, leo mi gravida erat, in euismod mi lectus non dui. Praesent at justo vel mauris pulvinar sodales ut sed nisl. Aliquam aliquet justo vel cursus imperdiet. Suspendisse potenti. Duis varius tortor finibus, rutrum justo ac, tincidunt enim.</p>\n' +
+      '<p>Donec velit dui, bibendum a augue sit amet, tempus condimentum neque. Integer nibh tortor, imperdiet at aliquet eu, rutrum eget ligula. Donec porttitor nisi lacus, eu bibendum augue maximus eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas in est eget lectus dapibus tincidunt. Ut ut nisi egestas, posuere libero laoreet, venenatis erat. Nulla maximus, nisl eget interdum ornare, enim turpis semper ligula, sed ultricies sem sem quis arcu. Ut a dapibus augue. Pellentesque nec tincidunt sem.</p>',
+  );
+  let editable = $state(true);
+  let cssClass = $state('');
+
+  let capture = $state(new EventCapture());
+  const deleteMessage = capture.on('deleteMessage');
+</script>
+
+<h1><code>Message</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>properties</h2>
+
+<div class="component-properties">
+  <label>id <input type="text" bind:value={id} /></label>
+  <label>at (iso-8601)<input type="text" bind:value={atInput} /></label>
+  <div class="suggestion">
+    interesting values:
+    <button onclick={() => (atInput = DateTime.now().toISO())}>Now</button>
+  </div>
+
+  <label>css class <input type="text" bind:value={cssClass} /></label>
+  <div class="suggestion">
+    interesting values:
+    <button onclick={() => (cssClass = '')}>(none)</button>
+    <button onclick={() => (cssClass = 'unsent')}>unsent</button>
+    <button onclick={() => (cssClass = 'deleted')}>deleted</button>
+  </div>
+
+  <label>editable <input type="checkbox" bind:checked={editable} /></label>
+
+  <label
+    ><p>rendered body (html)</p>
+    <textarea class="html" bind:value={renderedBody}></textarea>
+  </label>
+</div>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <Message {id} {at} {renderedBody} {editable} class={cssClass} {deleteMessage} />
+</div>
+
+<h2>events</h2>
+
+<EventLog events={capture.events} clear={capture.clear.bind(capture)} />
-- 
cgit v1.2.3


From 0fc1908827cbae3652f1ba2ef746aad5ab1a73c8 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 20:03:24 -0400
Subject: Create swatch for the `MessageRun` component.

---
 ui/routes/(swatch)/.swatch/+page.svelte            |  1 +
 ui/routes/(swatch)/.swatch/MessageRun/+page.svelte | 40 ++++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/MessageRun/+page.svelte

(limited to 'ui')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index abcb53f..dbdf883 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -8,5 +8,6 @@
 <h2>components</h2>
 
 <ul>
+  <li><a href="MessageRun">MessageRun</a></li>
   <li><a href="swatch/EventLog">swatch/EventLog</a></li>
 </ul>
diff --git a/ui/routes/(swatch)/.swatch/MessageRun/+page.svelte b/ui/routes/(swatch)/.swatch/MessageRun/+page.svelte
new file mode 100644
index 0000000..a8c8853
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/MessageRun/+page.svelte
@@ -0,0 +1,40 @@
+<script>
+  import MessageRun from '$lib/components/MessageRun.svelte';
+
+  let sender = $state('wlonk');
+  let cssClass = $state('own-message');
+  let children = $state(
+    '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis ante ac leo tristique iaculis vel in tortor. Praesent sed interdum ipsum. Pellentesque blandit, sapien at mattis facilisis, leo mi gravida erat, in euismod mi lectus non dui. Praesent at justo vel mauris pulvinar sodales ut sed nisl. Aliquam aliquet justo vel cursus imperdiet. Suspendisse potenti. Duis varius tortor finibus, rutrum justo ac, tincidunt enim.</p>\n' +
+      '<p>Donec velit dui, bibendum a augue sit amet, tempus condimentum neque. Integer nibh tortor, imperdiet at aliquet eu, rutrum eget ligula. Donec porttitor nisi lacus, eu bibendum augue maximus eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas in est eget lectus dapibus tincidunt. Ut ut nisi egestas, posuere libero laoreet, venenatis erat. Nulla maximus, nisl eget interdum ornare, enim turpis semper ligula, sed ultricies sem sem quis arcu. Ut a dapibus augue. Pellentesque nec tincidunt sem.</p>',
+  );
+</script>
+
+<h1><code>MessageRun</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>properties</h2>
+
+<div class="component-properties">
+  <label>sender <input type="text" bind:value={sender} /></label>
+  <label>css class <input type="text" bind:value={cssClass} /></label>
+  <div class="suggestion">
+    interesting values:
+    <button onclick={() => (cssClass = 'own-message')}>own-message</button>
+    <button onclick={() => (cssClass = 'other-message')}>other-message</button>
+  </div>
+
+  <label
+    ><p>children (html)</p>
+    <textarea class="html" bind:value={children}></textarea>
+  </label>
+</div>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <MessageRun {sender} class={cssClass}>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    {@html children}
+  </MessageRun>
+</div>
-- 
cgit v1.2.3


From 5bdebec905c3ad13220c8f55c136c34d31236d35 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 20:08:12 -0400
Subject: Create swatch for the `LogOut` component.

---
 ui/routes/(swatch)/.swatch/+page.svelte        |  1 +
 ui/routes/(swatch)/.swatch/LogOut/+page.svelte | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/LogOut/+page.svelte

(limited to 'ui')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index abcb53f..9a26017 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -8,5 +8,6 @@
 <h2>components</h2>
 
 <ul>
+  <li><a href="LogOut">LogOut</a></li>
   <li><a href="swatch/EventLog">swatch/EventLog</a></li>
 </ul>
diff --git a/ui/routes/(swatch)/.swatch/LogOut/+page.svelte b/ui/routes/(swatch)/.swatch/LogOut/+page.svelte
new file mode 100644
index 0000000..5eebcde
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/LogOut/+page.svelte
@@ -0,0 +1,23 @@
+<script>
+  import EventCapture from '$lib/swatch/event-capture.svelte.js';
+
+  import LogOut from '$lib/components/LogOut.svelte';
+  import EventLog from '$lib/components/swatch/EventLog.svelte';
+
+  let capture = $state(new EventCapture());
+  const logOut = capture.on('logOut');
+</script>
+
+<h1><code>LogOut</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <LogOut {logOut} />
+</div>
+
+<h2>events</h2>
+
+<EventLog events={capture.events} clear={capture.clear.bind(capture)} />
-- 
cgit v1.2.3