From 64d16441a390e889231f2f67333d5f305b7ab878 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 01:44:46 -0400
Subject: Set up a skeleton for swatches.

A swatch is a live, and ideally editable, example of an element of the service. They serve as:

* Documentation: what is this element, how do you use it, what does it do?
* Demonstration: what does this element look like?
* Manual test scaffolding: when I change this element like _so_, what happens?

Swatches are collectively available under `/.swatch/` on a running instance, and are set up in a separate [group] from the rest of the UI. They do not require setup or login for simplicity's sake and because they don't _do_ anything that requires either of those things.

[group]: https://svelte.dev/docs/kit/advanced-routing#Advanced-layouts-(group)

Swatches are manually curated, for a couple of reasons:

* We lack the technical infrastructure needed to do this based on static analysis; and
* Manual curation lets us include affordances like "recommended values," that would be tricky to express as part of the type or schema for the component.

The tradeoff, however, is that swatches may fall out of step with the components they depic, if not reviewed regularly. I hope that, by making them part of the development process, this risk will be mitigated through regular use.
---
 ui/routes/(swatch)/.swatch/+page.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/+page.svelte

(limited to 'ui/routes/(swatch)/.swatch/+page.svelte')

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
new file mode 100644
index 0000000..8d03c8d
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -0,0 +1,10 @@
+<h1>swatches</h1>
+
+<p>
+  Swatches are "live, but disconnected" elements of the application, designed specifically to
+  support live editing and iteration.
+</p>
+
+<h2>components</h2>
+
+<ul></ul>
-- 
cgit v1.2.3

