1 files changed, 91 insertions, 0 deletions
diff --git a/ui/routes/(swatch)/.swatch/Message/+page.svelte b/ui/routes/(swatch)/.swatch/Message/+page.svelte
new file mode 100644
index 0000000..6faf3bc
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/Message/+page.svelte
@@ -0,0 +1,91 @@
+<script>
+  import { DateTime } from 'luxon';
+
+  import EventCapture from '$lib/swatch/event-capture.svelte.js';
+  import { render } from '$lib/markdown.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 renderedBodyInput = $state(
+    `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.
+
+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.
+`,
+  );
+  /*
+   * Even though `Message` is notionally a generic container for markup, we restrict the swatch to
+   * message-flavoured Markdown. Swatches are available to all users, including
+   * technically-unsophisticated ones, and anything rendered in a swatch runs in the same origin
+   * context and the same cookie context as the rest of the client.
+   *
+   * This makes it possible that a user would be persuaded to enter something into a swatch that
+   * then runs _as them_, interacting with Pilcrow via its API or accessing client-stored data.
+   *
+   * As a proof of concept, `<img src="x" onerror="console.log('oh no')">` should not run the log
+   * statement. With generic HTML entry, it would do so. With our markdown processing, it does not
+   * (the `onerror` attribute is removed). Similarly, `script` elements are prohibited.
+   *
+   * Users who want to experiment with free HTML are encouraged to edit the swatch for themselves.
+   */
+  let renderedBody = $derived(render(renderedBodyInput));
+  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 (markdown)</p>
+    <textarea class="html" bind:value={renderedBodyInput}></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)} />