diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..539e4c7
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# mockup/maquette-not part of the core project
+moq/** linguist-vendored
diff --git a/.gitignore b/.gitignore
index 817ef4b..712b6ab 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,8 @@
 esb-run.mjs
-/.data
+.data
 dist
 .solid
+.vinxi
 .output
 .vercel
 .netlify
diff --git a/README.md b/README.md
index 1b2bbc3..317f202 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,1706 @@
 # SolidStart Notes (basic)
 
-Updated for SolidStart v0.4.11 (new beta, [first beta version](https://github.com/peerreynders/solid-start-notes-basic/tree/2fe3462b30ab9008576339648f13d9457da3ff5f)). 
-The app is a port of the December 2020 [React Server Components Demo](https://github.com/reactjs/server-components-demo) ([LICENSE](https://github.com/reactjs/server-components-demo/blob/main/LICENSE); [no pg fork](https://github.com/pomber/server-components-demo/)) but here it's just a basic client side routing implementation.
+> … in a Zone … where we can get like a lot of the benefits of RSCs without RSCs …
+
+— [Musing on HTML Partials](https://youtu.be/N-QwFFqI8aQ?t=12170)
+
+> … you don't have to have server components to have the same benefits that server components give …
+
+— [What Comes After GraphQL?](https://youtu.be/gfKrdN1RzoI?t=14516)
+
+Updated for SolidStart v0.5.10 (new beta, [first beta version](https://github.com/peerreynders/solid-start-notes-basic/tree/2fe3462b30ab9008576339648f13d9457da3ff5f)). 
+The app is a port of the December 2020 [React Server Components Demo](https://github.com/reactjs/server-components-demo) ([LICENSE](https://github.com/reactjs/server-components-demo/blob/main/LICENSE); [no pg fork](https://github.com/pomber/server-components-demo/), [Data Fetching with React Server Components](https://youtu.be/TQQPAU21ZUw)) but here it's just a basic client side routing implementation.
 It doesn't use a database but stores the notes via the [Unstorage Node.js Filesystem (Lite) driver](https://unstorage.unjs.io/drivers/fs#nodejs-filesystem-lite) . This app is not intended to be deployed but simply serves as an experimental platform.
 
 
 The longer term goal is to eventually leverage island routing to maximum effect once it's more stable and documented ([nksaraf](https://github.com/nksaraf) already demonstrated that [capability](https://github.com/solidjs/solid-start/tree/3f086d7660a6e29dea649e80ea5a7d2fc1ff5910/archived_examples/notes) ([live demo](https://notes-server-components.vinxi.workers.dev/)) with a non-standard branch of SolidStart).
+
+---
+
+## Route Design
+The original's demo routing is managed by inside a single context ([`route.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/framework/router.js)) managing the following data:
+- A content cache
+- `location` consisting of:
+    - `selectedId`
+    - `isEditing`
+    - `searchText`
+
+This “triple” is used as a key to cache server content for that `location`.
+The `location` is exposed in the URL as the [encoded URI component](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) value of the `location` [search parameter](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams); e.g.:
+
+```TypeScript
+const location = { selectedId: 2, isEditing: false, searchText: '' };
+const searchParams = new URLSearchParams([
+  ['location', JSON.stringify(location)],
+]);
+const base = 'http://localhost:4000/react';
+console.log(`${base}?${searchParams.toString()}`);
+// "http://localhost:4000/react?location=%7B%22selectedId%22%3A2%2C%22isEditing%22%3Afalse%2C%22searchText%22%3A%22%22%7D"
+console.log(`${base}?location=${encodeURIComponent(JSON.stringify(location))}`);
+```
+
+- `refresh(response)` purges/reinitializes the content cache within a [transition](https://react.dev/reference/react/startTransition); while the next rendering has been initiated with fresh data from the server, the existing UI remains intact, fully capable of interrupting the current render with another state update.
+
+- `navigate(location)` updates the `location` state within a transition.
+
+- The `useMutation` hook sends the `payload` associated with `location` to the `endpoint` then using the response to `refresh` the content cache. The hook's state reflects the status of the fetch (`isSaving`) and stores the last error.
+
+It needs to be explicitly stated: the RSC demo *does **not** support [SSR](https://www.patterns.dev/react/server-side-rendering/)*. 
+RSCs render [`ReactNodes`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f1f24cebc663e157637c343ca61766d5a9e00384/types/react/index.d.ts#L424C1-L436C1) that can either be directly inserted into the client's vDOM or deliver prop values to client side components.
+The vDOM diffing process then manipulates the DOM accordingly. At no point is there any HTML that needs to be [hydrated](https://dev.to/this-is-learning/why-efficient-hydration-in-javascript-frameworks-is-so-challenging-1ca3); if needed, SSR and hydration is handled by the meta-framework (and its client side code).
+
+The demo only employs [CSR](https://www.patterns.dev/react/client-side-rendering/); the value proposition of RSCs is that server components have access to server resources while their code is not part of the client bundle, instead the RSC client runtime has to be included in addition to React to support the deserialization of data streamed from RSCs.   
+
+Any keys necessary for SSR need to appear in the path. So the **new** path-based routing becomes:
+
+- `/?search=`**`:searchText`** i.e. `{selectedId: undefined, isEditing: false, searchText?}`
+- `/new?search=`**`:searchText`** i.e. `{selectedId: undefined, isEditing: true, searchText?}`
+- `/notes/`**`:selectedId`**`?search=`**`:searchText`** i.e. `{selectedId, isEditing: false, searchText?}`
+- `/notes/`**`:selectedId`**`/edit?search=`**`:searchText`** i.e. `{selectedId, isEditing: true, searchText?}`
+
+Note that `:selectedId` and `:searchText` can vary independently. In a typical usage scenario `:selectedId` will come from a `:searchText` search result but once `:selectedId` is referenced in the path, `:searchText` is free to change and return a result that does **not** include `:selectedId`.
+Consequently the server functions are separate:
+- `getBriefs`: fetches the note briefs that match `:searchText`.
+- `getNote`: fetches the details of the `:selectedId` note.
+
+```TypeScript
+// file: src/api.ts
+import { action, cache, redirect, revalidate } from '@solidjs/router';
+// …
+import {
+  deleteNote as deleteNt,
+  getBriefs as getBf,
+  getNote as getNt,
+  upsertNote as upsertNt,
+} from './server/api';
+// …
+import type { NoteBrief, Note } from './types';
+// …
+const getBriefs = cache<(search: string | undefined) => Promise<NoteBrief[]>>(
+  async (search: string | undefined) => getBf(search),
+  NAME_GET_BRIEFS
+);
+
+const getNote = cache<(noteId: string) => Promise<Note | undefined>>(
+  async (noteId: string) => getNt(noteId),
+  NAME_GET_NOTE
+);
+// …
+export { getBriefs, getNote, editAction };
+```
+
+Both of these functions are wrapped in [`@solidjs/router`](https://docs.solidjs.com/reference/solid-router/components/router)'s [`cache()`](https://docs.solidjs.com/reference/solid-router/data-apis/cache). The page is fully server rendered on initial load but all subsequent updates are purely client rendered. 
+But the router's `cache()` tracks the currently loaded `:noteId` and `:search` keys; so rather than running **both** `getBriefs` and `getNote` server fetches, the router will only use the one whose key has actually changed (or both if both have changed).
+
+So only the portion of the page that needs to change is updated on the client for `navigate()` even when the path changes.
+The `search` parameter affects the content of the `<nav>` within the layout that is independent from any one `Route` component; `noteId` on the other hand directly impacts which `Route` component is chosen.
+
+```TypeScript
+// file: src/app.tsx
+import { mergeProps, Suspense } from 'solid-js';
+import { Route, Router, useSearchParams } from '@solidjs/router';
+// …
+import Note from './routes/note';
+import NoteNew from './routes/note-new';
+import NoteNone from './routes/note-none';
+import NotFound from './routes/not-found';
+// …
+import type { ParentProps } from 'solid-js';
+import type { RouteSectionProps } from '@solidjs/router';
+// …
+type NotePropsMerge = [{ edit: boolean }, RouteSectionProps];
+
+export default function App() {
+  const Edit = (props: RouteSectionProps) =>
+    Note(mergeProps<NotePropsMerge>({ edit: true }, props));
+  const Display = (props: RouteSectionProps) =>
+    Note(mergeProps<NotePropsMerge>({ edit: false }, props));
+
+  return (
+    <Router root={Layout}>
+      <Route path="/new" component={NoteNew} />
+      <Route path="/notes/:noteId/edit" component={Edit} />
+      <Route path="/notes/:noteId" component={Display} />
+      <Route path="/" component={NoteNone} />
+      <Route path="*404" component={NotFound} />
+    </Router>
+  );
+}
+```
+
+Aside:
+```TypeScript
+// file: solid-router/src/types.ts
+
+type Params = Record<string, string>;
+
+interface Path {
+  pathname: string;
+  search: string;
+  hash: string;
+}
+
+interface Location<S = unknown> extends Path {
+  query: Params;
+  state: Readonly<Partial<S>> | null;
+  key: string;
+}
+
+interface RouteSectionProps<T = unknown> {
+  params: Params;
+  location: Location;
+  data?: T;
+  children?: JSX.Element;
+}
+```
+
+## Layout ([“App Shell”](https://developer.chrome.com/blog/app-shell)) 
+The orignal demo's layout is found in [`App.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/App.js) (server component) which **here** maps to [`app.tsx`](src/app.tsx) as
+
+<img src="docs/assets/layout.jpg" alt="Top-level layout" width="720">
+
+- `search-field.tsx` holds the text to match against the titles of the existing notes.
+- `edit-bottom.tsx` triggers the opening of `note-new.tsx` in the `children` area
+- `brief-list.tsx` displays all the briefs from notes where the title matches the contents `search-field`. Clicking a brief opens the matching `note.tsx` in `children`. `brief-list` serves as the application's navigation.
+- `note-none.tsx` appears initially within `children`.
+- `not-found.tsx` appears within `children` for malformed URLs. 
+
+```tsx
+// file: src/app.tsx
+// …
+import { Route, Router, useSearchParams } from '@solidjs/router';
+import { MetaProvider } from '@solidjs/meta';
+import { EditButton } from './components/edit-button';
+import { SearchField } from './components/search-field';
+// …
+import type { ParentProps } from 'solid-js';
+// …
+import type { SearchParams } from './route-path';
+
+function Layout(props: ParentProps) {
+  const [searchParams] = useSearchParams<SearchParams>();
+  return (
+    <MetaProvider>
+      <main class="c-main">
+        <section class="c-sidebar c-main__column">
+          <section class="c-sidebar__header">
+            <img
+              class="c-logo"
+              src="/logo.svg"
+              width="22px"
+              height="20px"
+              alt=""
+              role="presentation"
+            />
+            <strong>Solid Notes</strong>
+          </section>
+          <section class="c-sidebar__menu" role="menubar">
+            <SearchField />
+            <EditButton kind={'new'}>New</EditButton>
+          </section>
+          <Suspense>
+            <BriefList searchText={searchParams.search} />
+          </Suspense>
+        </section>
+        <section class="c-note-view c-main__column">
+          <Suspense>{props.children}</Suspense>
+        </section>
+      </main>
+    </MetaProvider>
+  );
+}
+```
+
+### On `Suspense` and `useTransition`
+
+Browsers natively implement a behaviour called [paint holding](https://developer.chrome.com/blog/paint-holding); when the browser navigates to a new page (fetched from the server, i.e. not client rendered) the URL in the address bar will update; the old page's *paint is held* while the DOM of the new page is rendered in the background.
+Once the new page is *painted* the *old paint* is swapped out for the *new paint*.
+
+Solid's [`useTransition`](https://docs.solidjs.com/reference/reactive-utilities/use-transition) is the primitive used to implement *Component/Block-level paint holding*. To work it relies on the presence of a [`<Suspense>`](https://docs.solidjs.com/references/api-reference/control-flow/Suspense) boundary which determines the scope and timing of the “transition”. 
+While there are unsettled async operations under the `Suspense` boundary the transition allows rendering of the new content to progress in the background while the old DOM (fragment) is still visible and active on the browser.
+
+The interaction between `Suspense` and transition has consequences for the `Suspense` [`fallback`](https://docs.solidjs.com/reference/components/suspense#props). The `fallback` will only ever show on the first render *of the suspense boundary*.
+At that time there is no “block of paint/DOM” to “hold” as the `Suspense` boundary didn't previously exist so the `fallback` is rendered.
+After that transitions take over for as long as the `Suspense` boundary exists and the `fallback` will never be seen again when new unsettled async operations occur under the `Suspense` boundary.
+
+Consequently placement of the `Suspense` boundary is crucial for consistent UX. Placing the `Suspense` boundary at the root of a component will cause the `fallback` to be displayed when it's rendered but transitions take over for subsequent async operations which may seem inconsistent from the UX point of view.
+Placing the `Suspense` boundary around the “slot” where various components may alternately appear is often the right choice because then transitions between components work as expected, the *previous component paint is held* while the new component renders in the background.
+
+If the `Suspense` `fallback` needs to appear whenever an unsettled async operation occurs under the boundary then `useTransition` or packages that leverage it like [`@solidjs/router`](https://docs.solidjs.com/guides/routing-and-navigation) **cannot** be used.
+
+For the signal exposed by [`useIsRouting()`](https://docs.solidjs.com/guides/routing-and-navigation#useisrouting) to work as expected:
+
+- stable, top-level `Suspense` boundaries need to exist inside the [`root`](https://docs.solidjs.com/routing/defining-routes#component-routing) layout
+- unsettled async operations **have to be allowed** to propagate all the way to the top-level `Suspense` boundaries in the `root` layout.
+The `isRouting` signal will switch to `false` once everything settles in the top-level boundary; at that time there can still be unsettled operations that were intercepted by nested `Suspense` boundaries.
+
+
+This adds up to very different rendering behaviour compared to what is implememented by the RSC demo.
+React's transition mechanism **does not** override the `Suspense` fallback.
+It renders the new content in the background (the “transition” part) but it also replaces the old content with the `Suspense` `fallback`. 
+In cases where a transition can complete in under 1 (or 2) seconds, intermittent “skeleton” screens [are judged to provide worse UX](https://www.nngroup.com/articles/skeleton-screens/#are-skeleton-screens-better-than-progress-bars-or-spinners) than simply *holding paint*. 
+The demo makes use of component skeletons ([`NoteListSkeleton.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/NoteListSkeleton.js), [`NoteSkeleton.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/NoteSkeleton.js)).
+
+Given the use of SSR and the browser's own paint holding behaviour, it turns out that the top-level `Suspense` boundaries don't even need fallbacks! The server doesn't send the response until the initial render is complete (i.e. all async operations have settled) so the initial content is already present in the server's HTML; therefore all subsequent client side route renders are governed by transitions.
+
+In an alternate, island architecture the layout could be immediately SSR rendered with skeleton islands and sent back to the browser while the island content is streamed in later once it is ready.
+
+Finally the [`search-field`](#search-field) doubles as an app-wide spinner for those occasions where transitions don't occur quickly enough.
+The spinner is driven by the `isRouting` signal; to make it as accurate as possible, only two `Suspense` boundaries exist within the entire application, both within the top level `root` component; one enveloping the route component children, the other around the [`brief-list`](#brief-list).
+ 
+
+## Route Content (`Route` components)
+
+In the orignal demo [`Note.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/Note.js) (a server component) plays the role of the router based on the `{ selectedId, isEditing, searchText }` location value.
+
+As indicated earlier in **this implementation** we have the following route-to-component mapping:
+- `/` ➡ `note-none.tsx`
+- `/new` ➡ `note-new.tsx`
+- `/notes/:noteId` ➡ `note.tsx`
+- `/notes/:noteId/edit` ➡ `note.tsx`
+
+The original `Note.js` features both rendering and server side data access (via [`server/api.server.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/server/api.server.js#L175-L183)); here the server side functionality is contained separately in `getNote()` instead.
+
+During build time SolidStart generates the necessary RPC code for the implied API; during run time its SSR generates the full HTML, adding client side code for hydration and interactivity (which may result in client side rendering later on but can be reduced to a minimum with islands in the future).   
+
+### `not-found`
+
+This is just the standard [404 Not Found](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404) content.
+
+```tsx
+// file: src/routes/not-found.tsx
+import { Title } from '@solidjs/meta';
+import { HttpStatusCode } from '@solidjs/start';
+import { makeTitle } from '../route-path';
+
+function NotFound() {
+  return (
+    <div class="c-not-found">
+      <Title>{makeTitle('Not Found')}</Title>
+      <HttpStatusCode code={404} />
+      <h1>Page Not Found</h1>
+      <p class="c-info-learn">
+        Visit{' '}
+        <a href="https://start.solidjs.com" target="_blank">
+          start.solidjs.com
+        </a>{' '}
+        to learn how to build SolidStart apps.
+      </p>
+    </div>
+  );
+}
+
+export { NotFound };
+```
+
+### `note-none`
+
+Placeholder content until a `:noteId` is selected.
+
+```tsx
+// file: src/routes/note-none.tsx
+import { Title } from '@solidjs/meta';
+import { makeTitle } from '../route-path';
+
+function NoteNone() {
+  return (
+    <>
+      <Title>{makeTitle()}</Title>
+      <div class="c-note-none">
+        <span>Click a note on the left to view something! 🥺</span>
+      </div>
+    </>
+  );
+}
+
+export { NoteNone };
+```
+
+### `note-new`
+
+Initializes the `note-editor` to create a new note.
+
+```tsx
+// file: src/routes/note-new.tsx
+import { Title } from '@solidjs/meta';
+import { makeTitle } from '../route-path';
+import { NoteEdit } from '../components/note-edit';
+
+function NoteNew() {
+  return (
+    <>
+      <Title>{makeTitle('New Note')}</Title>
+      <NoteEdit noteId={undefined} initialTitle={'Untitled'} initialBody={''} />
+    </>
+  );
+}
+
+export { NoteNew };
+```
+
+### `note`
+
+The `note` route component is used to display the selected note (`/notes/:noteid`) or to place the selected note in edit mode (`/notes/:noteId/edit`).
+
+In edit mode it simply uses the `note-edit` component, otherwise the internal `NoteDisplay` component is used.
+
+<img src="docs/assets/note-display.jpg" alt="The `NoteDisplay` component as it is used by the `note` route component" width="640">
+
+Both presentations, `NoteDisplay` and `NoteEdit`, operate under the `Suspense` boundary of the [layout component](#layout-app-shell). 
+To take full advantage of the transition's concurrent rendering (while [paint holiding](#on-suspense-and-usetransition)) both have to be able to render the structural DOM even *before* `getNote()` settles to deliver the data to be *then* placed into the DOM.
+
+That is why `NoteDisplay` is passed the seemingly redundant `noteId` separately; it is available **before** the `note` prop which will be initially `undefined`; similarly for `note-edit` the `noteId` prop is available immediately while both the `title` and `body` start out `undefined` to resolve later to their respective strings. 
+
+```tsx
+// file: src/routes/note.tsx
+import { onMount, Show } from 'solid-js';
+import { isServer, NoHydration } from 'solid-js/web';
+import { createAsync, useNavigate } from '@solidjs/router';
+import { Title } from '@solidjs/meta';
+import { hrefToHome, makeTitle } from '../route-path';
+import { getNote } from '../api';
+import { localizeFormat, makeNoteDateFormat } from '../lib/date-time';
+import { NoteEdit } from '../components/note-edit';
+import { EditButton } from '../components/edit-button';
+import { NotePreview } from '../components/note-preview';
+
+import type { Location, Navigator, RouteSectionProps } from '@solidjs/router';
+import type { Note } from '../types';
+
+const noteDateFormat = isServer
+  ? makeNoteDateFormat()
+  : makeNoteDateFormat(Intl.DateTimeFormat().resolvedOptions());
+
+function makeTransformOrNavigate(
+  location: Location<unknown>,
+  navigate: Navigator
+) {
+  const toNoteExpanded = ({ id, title, body, updatedAt }: Note) => {
+    const [updated, updatedISO] = noteDateFormat(updatedAt);
+    return {
+      id,
+      title,
+      body,
+      updatedAt,
+      updatedISO,
+      updated,
+    };
+  };
+
+  return function transformOrNavigate(maybeNote: Note | undefined) {
+    if (maybeNote) return toNoteExpanded(maybeNote);
+
+    navigate(hrefToHome(location), { replace: true });
+  };
+}
+
+type NoteExpanded = ReturnType<ReturnType<typeof makeTransformOrNavigate>>;
+
+function NoteDisplay(props: { noteId: string; note: NoteExpanded }) {
+  // `noteId` is available immediately
+  // while `note` (containing `id`) needs async to fulfill first
+  const ofNote = (
+    propName: 'title' | 'body' | 'updated' | 'updatedISO',
+    defaultValue = ''
+  ) => props.note?.[propName] ?? defaultValue;
+
+  let noteUpdated: HTMLElement | undefined;
+
+  onMount(() => {
+    // After hydration correct the display date/time
+    // if it deviates from the server generated one
+    // (a request may carry the locale but not the timezone)
+    // Also `ref` doesn't work on elements inside a `NoHydration` boundary
+    localizeFormat(noteDateFormat, noteUpdated);
+  });
+
+  return (
+    <>
+      <Title>{makeTitle(props.noteId)}</Title>
+      <div class="c-note">
+        <div class="c-note__header">
+          <h1>{ofNote('title')}</h1>
+          <div class="c-note__menu" role="menubar">
+            <small ref={noteUpdated} class="c-note__updated" role="status">
+              Last updated on{' '}
+              <NoHydration>
+                <time dateTime={ofNote('updatedISO')}>{ofNote('updated')}</time>
+              </NoHydration>
+            </small>
+            <EditButton kind={'update'}>Edit</EditButton>
+          </div>
+        </div>
+        <NotePreview body={ofNote('body')} />
+      </div>
+    </>
+  );
+}
+
+export type NoteProps = RouteSectionProps & { edit: boolean };
+
+function Note(props: NoteProps) {
+  const isEdit = () => props.edit;
+  const noteId = () => props.params.noteId;
+  const navigate = useNavigate();
+  const transformOrNavigate = makeTransformOrNavigate(props.location, navigate);
+  const note = createAsync(() => getNote(noteId()).then(transformOrNavigate), {
+    deferStream: true,
+  });
+  return (
+    <>
+      <Title>{makeTitle(isEdit() ? `Edit ${noteId()}` : noteId())}</Title>
+      <Show
+        when={isEdit()}
+        fallback={<NoteDisplay noteId={noteId()} note={note()} />}
+      >
+        <NoteEdit
+          noteId={noteId()}
+          initialTitle={note()?.title}
+          initialBody={note()?.body}
+        />
+      </Show>
+    </>
+  );
+}
+
+export { Note };
+```
+
+Another detail to note is the [`<NoHydration>`](https://github.com/solidjs/solid/blob/3212f74db68a526754ce107f1d3e1da0809c4678/CHANGELOG.md#official-partial-hydration-support) boundary around the [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) element. 
+The original demo is [overly simplistic](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/Note.js#L57) as it formats the date/time on the server side without giving any consideration to the client's locale.
+
+Granted, for an extended session it would be possible to capture the client's locale as part of the session/authentication information and use that information to correctly format the date on the server. 
+But given that any URL to one of the routes could be used for first load, the server really has no way of initially knowing the correct locale for the date/time as the initial request will not carry any locale information.
+
+All the server can do is initially format the date/time with reference to an [arbitrary locale](src/lib/date-time.ts#L3) and then have a client script correct it. To this end a `<time>` element is used and the server places the full UTC time in the [`datetime`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#datetime) attribute.
+
+```TypeScript
+// file: src/lib/date-time.ts
+// …
+export type FormatFn = (
+  epochTimestamp: number
+) => [local: string, utcIso: string];
+// …
+
+function localizeFormat(
+  format: FormatFn,
+  timeAncestor: HTMLElement | undefined
+): void {
+  if (!(timeAncestor instanceof HTMLElement))
+    throw new Error('Unsuitable ancestor element');
+
+  const time = timeAncestor.querySelector('time');
+  if (!(time instanceof HTMLTimeElement))
+    throw new Error('Unable to locate time element under specified ancestor');
+
+  const current = time.textContent;
+  if (!current) return;
+  // i.e. nothing to do (CSR waiting for async content)
+
+  const epochTimestamp = Date.parse(time.dateTime);
+  const [local] = format(epochTimestamp);
+  if (current !== local) time.textContent = local;
+}
+
+export { localizeFormat, makeBriefDateFormat, makeNoteDateFormat };
+```
+
+When the `NoteDisplay` component is mounted on the client DOM [`onMount`](https://docs.solidjs.com/reference/lifecycle/on-mount) applies `localizeFormat` to acquire the `<time>` element, re-run the (localized) format and replacing the element's [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) if necessary. 
+
+Side note: [`ref`](https://docs.solidjs.com/references/api-reference/special-jsx-attributes/ref)s cannot exist inside a `NoHydration` boundary; this makes it necessary to place the `ref` on a hydrated ancestor element and use the DOM API to acquire any elements within the `NoHydration` boundary.
+
+`transformOrNavigate()` does one of two things based on its `maybeNote` argument:
+- if `getNote()` resolves to a `Note`, an expanded note (includes formatted `updated` (local) and `updatedISO` (UTC, full ISO format) strings) is returned for use by the component JSX.
+- otherwise the `:noteId` is assumed to be invalid which triggers an immediate navigation to the home route, removing the faulty URL from [`history`](https://developer.mozilla.org/en-US/docs/Web/API/Window/history). 
+
+## Components
+
+### spinner
+
+Just a `<div>` with a CSS based spinner animation which maps the `active` prop to a [modifier](https://getbem.com/naming/#modifier) to control the animation (original [Spinner.js](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/Spinner.js)).
+
+```tsx
+// file: src/components/spinner.tsx
+export type Props = {
+  active: boolean;
+};
+
+function Spinner(props: Props) {
+  return (
+    <div
+      class={'c-spinner' + (props.active ? ' c-spinner--active' : '')}
+      role="progressbar"
+      aria-busy={props.active}
+    />
+  );
+}
+
+export { Spinner };
+```
+
+### search-field
+
+(Original client component [SearchField.js](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/SearchField.js)).
+The purpose of `search-field` is to propagate the input search text to the route URL which consequently triggers all the activities associated with that navigation.
+What is interesting in the original is the use of [`useTransition`](https://react.dev/reference/react/useTransition):
+- the `isPending` value indicates that the triggered activities haven't completed yet.
+- `startTransition` marks all state updates triggered synchronously by the passed `scope` function as part of the “transition”. More importantly calling `startTransition` before the previous invocation completes [*interrupts*](https://react.dev/reference/react/useTransition#starttransition-caveats) the previous transition in favour of the more recent one.
+
+So:
+- `isPending` controls the “busy” spinner
+- Each [`input`](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event) event starts a new transition potentially discarding any render work that may have been started on behalf a previous transition.
+
+> [!NOTE]
+> SolidJS [`useTransition`](https://docs.solidjs.com/reference/reactive-utilities/use-transition) is subtly different. 
+> Most importantly a later transition doesn't interupt the previous one.
+>
+> Presumably React uses some internal state API to track/control the transition.
+> SolidJS on the other hand tracks the async updates under the suspense boundary triggered by the `scope` function to determine when the transition has completed.
+> Once the transition completes, everything is ready to synchronously batch update the reactive graph which will then propagate changes to the visible DOM as required.
+>
+> From the *user POV* this means that the visible DOM isn't changed (and is still interactive) while the transition is in progess but the `pending` signal is typically used to alter the UI in some way to indicate that *something* is happening.
+>
+> See also: [**On `Suspense` and `useTransition`**](#on-suspense-and-usetransition)
+
+
+
+```tsx
+// file: src/components/search-field.tsx
+import { createUniqueId } from 'solid-js';
+import { useIsRouting, useSearchParams } from '@solidjs/router';
+import { debounce } from '../lib/debounce';
+import { Spinner } from './spinner';
+
+import type { SearchParams } from '../route-path';
+
+function updateParams(set: (params: Partial<SearchParams>) => void) {
+  const setParams = debounce<[Partial<SearchParams>]>(set, 250);
+
+  return (
+    event: InputEvent & {
+      currentTarget: HTMLInputElement;
+      target: HTMLInputElement;
+    }
+  ) => {
+    setParams({ search: event.currentTarget.value });
+    event.preventDefault();
+  };
+}
+
+const preventSubmit = (
+  event: Event & { submitter: HTMLElement } & {
+    currentTarget: HTMLFormElement;
+    target: Element;
+  }
+) => event.preventDefault();
+
+function SearchField() {
+  const searchInputId = createUniqueId();
+  const isRouting = useIsRouting();
+  const [searchParams, setSearchParams] = useSearchParams<SearchParams>();
+  const updateSearch = updateParams(setSearchParams);
+
+  return (
+    <form class="c-search-field" role="search" onSubmit={preventSubmit}>
+      <label class="u-offscreen" for={searchInputId}>
+        Search for a note by title
+      </label>
+      <input
+        id={searchInputId}
+        placeholder="Search"
+        value={searchParams.search ?? ''}
+        onInput={updateSearch}
+      />
+      <Spinner active={isRouting()} />
+    </form>
+  );
+}
+
+export { SearchField };
+```
+
+In solid-start (with [solid-router](https://github.com/solidjs/solid-router)) the transition is managed by the router.
+It provides [`useIsRouting()`](https://docs.solidjs.com/reference/solid-router/primitives/use-is-routing) which exposes the signal needed to activate the spinner.
+The advantage of this approach is that is that the spinner activates whenever there is a route change, not just when the `search-field` is responsible for the route change.
+
+To minimize frequent, intermediate route changes the input event listener is *debounced* (shamelessly lifted from [solid-primitives](https://github.com/solidjs-community/solid-primitives/blob/70b09201f951ebccf0c932e65c5a957f269e2686/packages/scheduled/src/index.ts#L32-L44)) to delay the route change until there hasn't been a new input for 250ms.
+
+[`useSearchParams()`](https://docs.solidjs.com/reference/solid-router/primitives/use-search-params) exposes access to the route's [query string](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters) making it possible to initialize `search-field` from the URL but also granting it the capability to update the route URL (i.e. to initiate a navigation).
+
+[`createUniqueId()`](https://docs.solidjs.com/reference/component-apis/create-unique-id) is used to create a unique ID to correlate the [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#for) to the [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#id).
+
+### edit-button
+
+(Original client component [`EditButton.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/EditButton.js))
+
+> [!NOTE]
+> [Again](#search-field) the original component wraps its navigation in a [transition](https://react.dev/reference/react/useTransition)—with `solid-start`/`solid-router` that responsibility becomes part of the router's navigation functionality.
+
+The `kind` prop determines whether the button navigates to the [update note route](#note) or the [new note route](#note-new). [`useLocation()`](https://docs.solidjs.com/reference/solid-router/primitives/use-location) provides access to the currrent URL which is used as the basis to generate the URL to navigate to.
+Navigation is accessed through [`useNavigate()`](https://docs.solidjs.com/reference/solid-router/primitives/use-navigate).
+
+```TypeScript
+// file: src/components/edit-button.tsx
+import { useLocation, useNavigate } from '@solidjs/router';
+import { hrefToNoteUpdate, hrefToNoteNew } from '../route-path';
+
+import type { ParentProps } from 'solid-js';
+
+type Props = ParentProps & {
+  kind: 'update' | 'new';
+};
+
+const classList = (kind: Props['kind']) =>
+  'c-edit-button' +
+  (kind === 'new' ? ' js:c-edit-button--new' : ' js:c-edit-button--update');
+
+function EditButton(props: Props) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const toHref = props.kind === 'new' ? hrefToNoteNew : hrefToNoteUpdate;
+
+  return (
+    <button
+      class={classList(props.kind)}
+      onClick={() => navigate(toHref(location))}
+      disabled={false}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+export { EditButton };
+```
+
+### app-context
+
+(Related client component: [`SidebarNoteContent.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/SidebarNoteContent.js))
+
+The `SidebarNoteContent` component in the orignal demo triggers a “flash” animation when it detects the [title changing between two renders](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/SidebarNoteContent.js#L28-L33). 
+
+In this implementation the intent was reinterpreted to mean: “flash” when an action saves the `Note` to the server. 
+
+The `app-context` manages a central `lastEdit` signal that allows the consumer of the `SendLastEditHolder` type (`useSendLastEdit()`) to broadcast a `LastEdit` value to the consumers of the `LastEditHolder` type (`useLastEdit()`). 
+
+> [!NOTE] 
+> The `LastEdit` type is intended to be used as a [discriminated union](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions).
+
+```TypeScript
+// file: src/components/app-context.tsx
+
+// NOTE: Core state is **represented** via the route
+// while the application context is the hub for
+// ephemeral (extended) state.
+// Ephemeral state isn't relevant to SSR.
+
+import {
+  createContext,
+  createSignal,
+  useContext,
+  type ParentProps,
+} from 'solid-js';
+
+import type { LastEdit } from '../types';
+
+// Primitives over features …
+const [lastEdit, sendLastEdit] = createSignal<LastEdit | undefined>(undefined, {
+  equals: false,
+});
+
+export type LastEditHolder = {
+  lastEdit: typeof lastEdit;
+};
+export type SendLastEditHolder = {
+  sendLastEdit: typeof sendLastEdit;
+};
+
+const context = {
+  lastEdit,
+  sendLastEdit,
+};
+
+const AppContext = createContext(context);
+
+const AppProvider = (props: ParentProps) => (
+  <AppContext.Provider value={context}>{props.children}</AppContext.Provider>
+);
+
+function useAppContext() {
+  const ctx = useContext(AppContext);
+  if (!ctx) throw new Error('AppContext not initialized');
+
+  return ctx;
+}
+
+const useLastEdit: () => LastEditHolder = useAppContext;
+
+const useSendLastEdit: () => SendLastEditHolder = useAppContext;
+
+export { AppProvider, useLastEdit, useSendLastEdit };
+```
+
+> [!NOTE] 
+> Both `useLastEdit` and `useSendLastEdit` leverage a peculiarity of TypeScript (i.e. defined return types are not subject to [excess property checks](https://www.typescriptlang.org/docs/handbook/2/objects.html#excess-property-checks)); both have exactly the same runtime return type but in each case the defined return type is used to partially mask out “excess” properties at analysis time. There is nothing stopping runtime access but TypeScript will flag access of the “excess” properties at analysis time. 
+
+### brief-list
+
+(Original server component [`NoteList.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/NoteList.js), component [`SidebarNote.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/SidebarNote.js), client component [`SidebarNoteContent.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/SidebarNoteContent.js))
+
+Disecting the original:
+- `NoteList` is a server component; it accesses the database directly.
+If the `searchText` doesn't yield any results, it simply renders the `ReactNodes` for the empty list.
+If there are results the generated `ReactNodes` are a mixture of intrinsic `<ul>`, `<li>` and `ReactElements` carrying a `note` prop for a `SidebarNote` component. 
+- `SidebarNote` isn't marked with `"use client"` implying it will run as a server component; this could be problematic if date/time formatting *should actually* be done on the client side to display values consistent with the client locale.
+As given, date/times will always be formatted with the server locale.
+`SidebarNote` transforms the `note` prop to `children`, `id`, `title` and `expandedChildren` props for `SidebarNoteContent`.
+- `SidebarNoteContent` is the client component that (client side) generates the intrinsic `ReactElement`s based on the props sent from the server.
+Clicking the content initiates navigation (wrapped in a [transition](https://react.dev/reference/react/useTransition)) to the full note preview.
+Whenever the `title` changes between re-renders, an effect triggers a CSS animation by adding a `flash` class.
+Component state tracks the expansion status of the content; clicking the toggle `<button>` expands and collapses the `expandedChildren` prop which contains the rendered note excerpt/summary.
+- [`NoteListSkeleton.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/NoteListSkeleton.js) serves as the fallback for the [suspense boundary](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/App.js#L38) around `NoteList`.
+
+Within `brief-list` functionality exclusive to the server side is accessed via `getBriefs`:
+
+```TypeScript
+// file: src/components/brief-list.tsx
+// …
+import { getBriefs } from '../api';
+// …
+```
+
+```TypeScript
+// file: src/api.ts
+import { action, cache, redirect, revalidate } from '@solidjs/router';
+// …
+import {
+  deleteNote as deleteNt,
+  getBriefs as getBf,
+  getNote as getNt,
+  upsertNote as upsertNt,
+} from './server/api';
+// …
+import type { NoteBrief, Note } from './types';
+// …
+const NAME_GET_BRIEFS = 'briefs';
+// …
+const getBriefs = cache<(search: string | undefined) => Promise<NoteBrief[]>>(
+  async (search: string | undefined) => getBf(search),
+  NAME_GET_BRIEFS
+);
+
+// …
+```
+
+> [!IMPORTANT]
+> `src/api.ts` only contains code that runs on the client. It's only the imports from `src/server/api.ts` that are accessed remotely.
+
+The code that runs on the server: 
+
+```TypeScript
+// file: src/server/api.ts
+'use server';
+import {
+  deleteNote as deleteNoteById,
+  insertNote,
+  selectNote,
+  selectNotesInTitle,
+  updateNote,
+} from './repo';
+import { toNote, toNoteBrief, type NotePersist } from './types';
+// …
+const toBriefs = (notes: NotePersist[]) => notes.map(toNoteBrief);
+
+const getBriefs = (search: string | undefined) =>
+  selectNotesInTitle(search).then(toBriefs);
+
+// …
+```
+
+The [`'use server'`](https://start.solidjs.com/api/server) directive instructs the bundler to establish a serialization boundary around the code that allows remote access by client functionality. It is recommended to use the directive at a function scope; here it is used at a module scope as all the functionality in this module exists to back the client side `src/api.ts` module.
+
+All the remaining code is client side code *which will be **server rendered** on first load*. However without island routing (still experimental) all the rendering JavaScript is still downloaded to the client which SolidJS largely mitigates by ***always*** prioritizing small client side bundles.
+
+<img src="docs/assets/brief-list.jpg" alt="brief-list component" width="240">
+
+```tsx
+// file: src/components/brief-list.tsx
+// …
+
+type Props = {
+  searchText: string | undefined;
+};
+
+function BriefList(props: Props) {
+
+  // … some assembly required …
+  // …
+
+  return (
+    <nav ref={root}>
+      <Show
+        when={briefs().length}
+        fallback={<EmptyContent search={props.searchText} />}
+      >
+        <ul class="c-brief-list">
+          <For each={briefs()}>
+            {(brief: NoteBrief) => (
+              <li>
+                <Brief
+                  noteId={brief.id}
+                  title={brief.title}
+                  summary={brief.summary}
+                  updatedAt={brief.updatedAt}
+                  active={briefActive(activeInfo(), brief.id)}
+                  flushed={updatedId() === brief.id}
+                  format={format}
+                />
+              </li>
+            )}
+          </For>
+        </ul>
+      </Show>
+    </nav>
+  );
+}
+```
+
+From a rendering perspective `BriefList` simply creates an unordered list of `Brief`s.
+The brief excerpt (summary) is stored with the associated note; even though it could be derived on each render, generating it only whenever the note is saved reduces the rendering overhead. 
+The store accessed through the `briefs` accessor drives the the updates: 
+
+```TypeScript
+// file: src/components/brief-list.tsx
+// …
+
+function setupBriefStore(currentSearch: () => string | undefined) {
+  const [briefStore, setBriefs] = createStore<NoteBrief[]>([]);
+  return [
+    async function updateBriefStore() {
+      const next = await getBriefs(currentSearch());
+      setBriefs(reconcile(next));
+      return briefStore;
+    },
+    { initialValue: briefStore },
+  ] as const;
+}
+
+type Props = {
+  searchText: string | undefined;
+};
+
+function BriefList(props: Props) {
+  // … 
+  // Note: briefs is a signal carrying a finer grained store
+  const briefs = createAsync(...setupBriefStore(() => props.searchText));
+
+  // …
+}
+```
+
+[`createAsync()`](https://docs.solidjs.com/reference/solid-router/data-apis/create-async) creates an “asynchronous to reactive (i.e. synchronous)” value boundary which is necessary to leverage a [`cache()`](https://docs.solidjs.com/reference/solid-router/data-apis/cache) wrapped asynchrounous remote accessor. 
+
+`createAsync()` only returns a (signal) accessor but given that updates occur by “remote list” lacking any referential stability, the use of a [store](https://docs.solidjs.com/reference/stores/using-stores#createstore) in combination with [`reconcile`](https://docs.solidjs.com/reference/stores/store-utilities#reconcile) is indicated.
+
+Fortunately there is a tactic to deal with this apparent [impedance mismatch](https://agiledata.org/essays/impedancemismatch.html); return the store from the function being wrapped by `createAsync()`. 
+Meanwhile in the wrapped async function *reconcile* the store with the most recent “remote list” while always returning the reference to the now up-to-date and referentially stable store.
+
+When the store contains no `NoteBrief`s, `EmptyContent` is shown.
+
+```tsx
+// file: src/components/brief-list.tsx
+// …
+
+const EmptyContent = (props: { search: string | undefined }) => (
+  <div class="c-brief-empty">
+    {props.search
+      ? `Couldn't find any notes titled "${props.search}"`
+      : 'No notes created yet!'}{' '}
+  </div>
+);
+
+// …
+```
+
+The details of each `NoteBrief` render is delegated to the `Brief` component, however three additional props are passed: `active`, `flushed`, and `format`.
+
+`format` is created on the `brief-list` level and then shared across all `brief`s to avoid repeatedly creating the same data/time formatting function.
+When rendering on the server, the [`en-GB` locale and UTC](src/lib/date-time.ts#L3) is used; however later on the client side this is replaced with the client's preferred formatting within `brief`. 
+
+```TypeScript
+// file: src/components/brief-list.tsx
+// …
+import { isServer } from 'solid-js/web';
+// …
+import { makeBriefDateFormat } from '../lib/date-time';
+// …
+
+function briefDateFormat() {
+  if (isServer) {
+    return makeBriefDateFormat();
+  } else {
+    return makeBriefDateFormat(Intl.DateTimeFormat().resolvedOptions());
+  }
+}
+// …
+
+type Props = {
+  searchText: string | undefined;
+};
+
+function BriefList(props: Props) {
+  // … 
+  const format = briefDateFormat();
+  // … 
+
+}
+
+// …
+```
+
+A `brief`'s `active` prop informs it whether or not its associated `Note` is currently being displayed or being navigated to.
+
+Given that the route is *driven* by `brief-list` the note ID enters the “pending” state *before* the route transition.
+Once the route transition is complete that note ID enters the “active” state.  
+The navigation functionality is hoisted up into `brief-list` by using DOM [event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation); a `Brief` simply communicates which note it represents via its `data-note-id` [data attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).
+
+```TypeScript
+// file: src/components/brief-list.tsx
+import { createSignal, createMemo, For, onMount, Show } from 'solid-js';
+// …
+import {
+  createAsync,
+  useLocation,
+  useNavigate,
+  useParams,
+} from '@solidjs/router';
+// …
+import { nextToNote } from '../route-path';
+// …
+import { Brief, type Active } from './brief';
+// …
+
+function findNoteId(target: unknown) {
+  if (
+    !(
+      target instanceof HTMLButtonElement &&
+      target.classList.contains('js:c-brief__open')
+    )
+  )
+    return undefined;
+
+  const container = target.closest('div.js\\:c-brief');
+
+  return container instanceof HTMLDivElement
+    ? container.dataset.noteId
+    : undefined;
+}
+
+// …
+const briefActive = ([id, active]: [string, Active], briefId: string) =>
+  id === briefId ? active : 0;
+
+type ClickedInfo = {
+  noteId: string;
+  pathname: string;
+};
+
+type Props = {
+  searchText: string | undefined;
+};
+
+function BriefList(props: Props) {
+  const params = useParams();
+  const noteId = () => params.noteId ?? '';
+  const location = useLocation();
+  const [clickedInfo, setClickedInfo] = createSignal<ClickedInfo>({
+    noteId: noteId(),
+    pathname: location.pathname,
+  });
+
+  const activeInfo = createMemo((): [string, Active] => {
+    const info = clickedInfo();
+    if (location.pathname !== info.pathname && info.noteId.length > 0)
+      return [info.noteId, 1];
+
+    const id = noteId();
+    return id.length > 0 ? [id, 2] : ['', 0];
+  });
+
+  // Highlight clicked brief BEFORE initiating
+  // navigation to the associated note
+  const navigate = useNavigate();
+  const navigateToClicked = (event: MouseEvent) => {
+    const id = findNoteId(event.target);
+    if (!id) return;
+
+    const next = nextToNote(location, id);
+    setClickedInfo({ noteId: id, pathname: next.pathname });
+    navigate(next.href);
+  };
+ 
+  // … 
+  let root: HTMLElement | undefined;
+  onMount(() => {
+    if (root instanceof HTMLElement)
+      root.addEventListener('click', navigateToClicked);
+  });
+  // … 
+}
+
+// … 
+```
+The *currently active* `noteId` is delivered via the route [parameters](https://docs.solidjs.com/reference/solid-router/primitives/use-params). 
+The `noteId` [derived signal](https://docs.solidjs.com/concepts/derived-values/derived-signals) ensures a string type (empty string instead of `undefined`).
+
+The `clickedInfo` accessor pair tracks the ID of the last clicked brief together with its destination pathname.
+`clickedInfo` is updated by the `navigateToClicked` event listener that is mounted on the `root` element (a `<nav>`) of the `brief-list` component.
+The listener extracts the note ID from the clicked `brief`'s `data-note-id` [data attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) and sets the `[noteId, pathname]` pair before it [navigates](https://docs.solidjs.com/reference/solid-router/primitives/use-navigate) to the note.
+
+`activeInfo`'s derivation function returns a `[noteId, state]` pair.
+The first element holds the `noteId` or an empty string when the second element (`state`) is `0` (no note is “pending” or “active”): 
+- `1` indicates that navigation to `noteId` is “pending”. 
+- `2` appears once the navigation to `noteId` completes making it “active”.
+
+When the current [`location.pathname`](https://docs.solidjs.com/reference/solid-router/primitives/use-location) doesn't match the `clickedInfo` destination pathname while `clickedInfo.noteId` is non-empty then *that* `noteId` is “pending” (`[noteId, 1]`).
+Otherwise a non-empty `noteId()` results in a `[noteId, 2]` (“active”) value. 
+`['', 0]` indicates that *no* `noteId` is “pending” or “active”.
+
+`updatedId` drives the `flush` prop on the listed briefs and derives from [`useLastEdit()`](#app-context) and `notesId()`
+
+```TypeScript
+// file: src/components/brief-list.tsx
+// …
+import {
+  createAsync,
+  useLocation,
+  useNavigate,
+  useParams,
+} from '@solidjs/router';
+// …
+import { useLastEdit, type LastEditHolder } from './app-context';
+// …
+function deriveLastUpdateId(
+  noteId: () => string,
+  lastEdit: LastEditHolder['lastEdit']
+) {
+  const NO_UPDATED_ID = '';
+
+  return () => {
+    const last = lastEdit();
+    switch (last?.[0]) {
+      case undefined:
+      case 'delete': {
+        return NO_UPDATED_ID;
+      }
+      case 'update': {
+        return last[1];
+      }
+      case 'new': {
+        // IDs are server assigned so get it form the URL
+        // of the currently open note.
+        const id = noteId();
+        return typeof id === 'string' && id.length > 0 ? id : NO_UPDATED_ID;
+      }
+      default:
+        return NO_UPDATED_ID;
+    }
+  };
+}
+// …
+
+type Props = {
+  searchText: string | undefined;
+};
+
+function BriefList(props: Props) {
+  const params = useParams();
+  const noteId = () => params.noteId ?? '';
+  // …
+
+  // updatedId
+  const { lastEdit } = useLastEdit();
+  const updatedId = createMemo(deriveLastUpdateId(noteId, lastEdit));
+
+  // …
+}
+
+// …
+```
+
+In this instance a `lastEdit()` value of `['delete', noteId]` doesn't communicate anything of value as a `brief` of a deleted `Note` will never appear on the `brief-list`.
+
+`['update', noteId]` is the simplest case as the `noteId` can be obtained directly from the pair.
+
+`['new']` will run twice.
+Initially when the new `Note` is sent to the server `params.noteId` won't have anything of value. 
+But because the reactive value was referenced the derivation will run again once `params.noteId` has been set to the new `Note`'s ID due to the navigaton that was triggered by saving the new `Note`.
+So in the end `updatedId()` will hold the ID of the new `Note` (after briefly being an empty string). 
+
+Within (reactive) JSX `updatedId() === brief.id` indicates to a brief on the list whether it has been recently `flushed`; on the leading edge of the property being set the `Brief` can initiate a CSS “flash” animation.
+
+### brief
+
+(Original server component [`SidebarNote.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/SidebarNote.js), client component [`SidebarNoteContent.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/SidebarNoteContent.js))
+
+The orginal [`SidebarNoteContent.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/SidebarNoteContent.js)):
+- Shows the `Note`'s title and updated date.
+- Features a toggle to expand/hide the summary/extract.
+- Navigates to the full `Note` when clicked.
+- Triggers a “flash” animation when the title changes between renders.
+
+This particular brief implementation does not use component state to drive the visibility of the summary/excerpt.
+The DOM is fully rendered but the state of the `c-brief__summary-state` checkbox controls the opacity and position of `c-brief__summary` with CSS rulesets.
+
+<img src="docs/assets/brief.jpg" alt="brief component" width="480">
+
+```tsx
+// file: src/components/brief.tsx
+import { createUniqueId, onMount, Show } from 'solid-js';
+import { NoHydration } from 'solid-js/web';
+import { localizeFormat, type FormatFn } from '../lib/date-time';
+
+export type Active = 0 | 1 | 2;
+
+type Props = {
+  noteId: string;
+  title: string;
+  summary: string;
+  updatedAt: number;
+  active: Active;
+  flushed: boolean;
+  format: FormatFn;
+};
+
+const CLASSNAME_FLASH = ' js:c-brief--flash';
+const activeModifier = ['', ' c-brief--pending', ' c-brief--active'];
+
+const classListBrief = (flushed: boolean) =>
+  'js:c-brief c-brief ' + (flushed ? CLASSNAME_FLASH : '');
+
+const classListOpen = (active: Active) =>
+  'js:c-brief__open c-brief__open' + activeModifier[active];
+
+function Brief(props: Props) {
+  let brief: HTMLDivElement | undefined;
+  function removeFlash(event: AnimationEvent) {
+    if (event.animationName === 'flash')
+      brief?.classList.remove(CLASSNAME_FLASH);
+  }
+
+  let header: HTMLElement | undefined;
+  const toggleId = createUniqueId();
+  // non-reactive
+  const [updatedAt, updatedISO] = props.format(props.updatedAt);
+
+  onMount(() => {
+    // After hydration correct the display date/time
+    // if it deviates from the server generated one
+    // (a request may carry the locale but not the timezone)
+    // Also `ref` doesn't work on elements inside `NoHydration`
+    localizeFormat(props.format, header);
+  });
+
+  return (
+    <div
+      ref={brief}
+      class={classListBrief(props.flushed)}
+      onAnimationEnd={removeFlash}
+      data-note-id={props.noteId}
+    >
+      <header ref={header}>
+        <strong>{props.title}</strong>
+        <NoHydration>
+          <time datetime={updatedISO}>{updatedAt}</time>
+        </NoHydration>
+      </header>
+      <input id={toggleId} type="checkbox" class="c-brief__summary-state" />
+      <button class={classListOpen(props.active)}>Open note for preview</button>
+      <label for={toggleId} class="c-brief__summary-toggle">
+        <svg
+          viewBox="0 0 512 512"
+          aria-hidden="true"
+          fill="currentColor"
+          width="1em"
+          height="1em"
+        >
+          <path d="M60 99.333l196 196 196-196 60 60-256 256-256-256z"></path>
+        </svg>
+      </label>
+      <p class="c-brief__summary">
+        <Show
+          when={props.summary}
+          fallback={<span class="c-brief__no-content">(No Content)</span>}
+        >
+          {props.summary}
+        </Show>
+      </p>
+    </div>
+  );
+}
+
+export { Brief };
+```
+
+`classListBrief` assembles the class names for the `Brief`'s container `<div>`. 
+The flash animation is triggered by the `Brief`'s `flush` prop.
+The `removeFlash` listener is added to the element's [`animationend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event) event to remove the triggering class name once the animation completes. 
+
+`classListOpen` assembles the class names for the "open note" button. The button itself is the `Brief`'s background which communicates a “pending” or “active” state. The `active` argument selects the appropriate “pending” or “active” [modifier](https://getbem.com/naming/#modifier).
+
+The `updatedAt` time is adjusted to the client locale in a similar fashion as discussed with the [`note`](#note) component.
+
+### note-preview
+
+(Original components [`NotePreview.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/NotePreview.js), [`TextWithMarkdown.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/TextWithMarkdown.js).) The `note-preview` takes the passed `body` prop containing markdown text and transforms it to HTML, placing it into the `<div>` container ([`innerHTML`](https://docs.solidjs.com/reference/jsx-attributes/innerhtml-or-textcontent)); 
+
+```tsx
+// file: src/components/note-preview.tsx
+import { mdToHtml } from '../lib/md-to-html';
+
+type Props = {
+  body: string;
+};
+
+const NotePreview = (props: Props) => (
+  <div class="c-note-preview">
+    <div
+      class="o-from-markdown"
+      innerHTML={props.body ? mdToHtml(props.body) : ''}
+    />
+  </div>
+);
+
+export { NotePreview };
+```
+
+> [!NOTE]
+Server side HTML sanitation is performed by [`sanitize-html`](https://github.com/apostrophecms/sanitize-html) which doesn't need DOM support. 
+Unfortunately when used on the client side with Vite, the PostCSS dependency causes [issues](https://github.com/apostrophecms/sanitize-html/issues/639#issuecomment-1856695165).
+On the client side [DOMPurify](https://github.com/cure53/DOMPurify) works but would require (slow) JSDOM on the server side.
+
+This creates the requirement of using `sanitize-html` on the server side for SSR while keeping it out of the client side bundle (where `DOMPurify` is used). 
+Therefore components using `mdToHtml` import `src/lib/md-to-html`: 
+
+```TypeScript
+// file: src/lib/md-to-html.ts
+import { isServer } from 'solid-js/web';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+let toHtml: ((mdText: string) => string) | undefined;
+
+function mdToHtml(mdText: string) {
+  if (toHtml) return toHtml(mdText);
+
+  // entry-server.tsx attaches mdToHtml based on sanitizeHtml
+  // which doesn't require DOM for SSR.
+  toHtml = isServer
+    ? globalThis.ssrSupport.mdToHtml
+    : (mdArg: string) =>
+        DOMPurify.sanitize(marked.parse(mdArg, { async: false }) as string);
+  // Vite pulls in node APIs due to sanitizeHtml's optional postCSS support
+  // On client side use DOMPurify instead but don't import HERE to keep `sanitizeHtml`
+  // out of the client bundle
+
+  if (!toHtml) throw new Error('Late binding of `mdToHtml` failed');
+  return mdToHtml(mdText);
+}
+
+export { mdToHtml };
+```
+
+While `DOMPurify` is unconditionally imported, on the server `globalThis.ssrSupport.mdToHtml` is used instead.
+This run time dependency is imported and set **only** by `src/entry-server.tsx`:
+
+```tsx
+// file: src/entry-server.tsx
+import { createHandler, StartServer } from '@solidjs/start/server';
+// See: src/lib/md-to-html.ts
+import { mdToHtml } from './server/md-to-html';
+
+declare global {
+  // eslint-disable-next-line no-var  
+  var ssrSupport: {
+    mdToHtml: (mdText: string) => string;
+  };
+}
+
+globalThis.ssrSupport = {
+  mdToHtml,
+};
+
+export default createHandler(() => (
+  // …
+));
+```
+
+### note-edit
+
+(Original client component [`NoteEditor.js`](https://github.com/reactjs/server-components-demo/blob/95fcac10102d20722af60506af3b785b557c5fd7/src/NoteEditor.js).) The `note-edit` component is used create a new note and modify an existing note.
+
+<img src="docs/assets/note-edit.jpg" alt="note-edit component" width="720">
+
+The `noteId` prop is `undefined` for a new note and a non-empty string with the note's ID for an existing note.
+A form contains a text input to allow editing of the note time and a textarea for the note body.   
+It also contains some hidden inputs containing supplementary information for the `edit action`:
+- `id`: contains the note ID for an existiing note or empty string for a new note
+- `from`: the current route URL. The route navigated to derives from this value,
+- `intent`: 
+  - `new`: create a new note
+  - `update`: modify existing note identified by `id`
+  - `delete`: delete existing note identified by `id`
+
+The preview portion consists of a menu, label, preview note title and `note-preview` handling the note body.
+The menu contains a “Done” button and for `update` edits a “Delete” button.  
+
+```tsx
+// file: src/components/note-edit.tsx
+// …
+import { toRootpath } from '../route-path';
+import { editAction } from '../api';
+// …
+import { NotePreview } from './note-preview';
+
+type Props = {
+  noteId: string | undefined;
+  initialTitle: string | undefined;
+  initialBody: string | undefined;
+};
+
+// …
+
+function NoteEdit(props: Props) {
+  // …
+
+  return (
+    <div class="c-note-edit">
+      <form
+        ref={noteForm}
+        class="c-note-edit__form"
+        method="post"
+        action={editAction}
+      >
+        <input type="hidden" name="id" value={props.noteId ?? ''} />
+        <input type="hidden" name="from" value={toRootpath(location)} />
+        <input type="hidden" name="intent" value={intent()} />
+        <label class="u-offscreen" for="note-edit__title">
+          Enter a title for your note
+        </label>
+        <input
+          id="note-edit__title"
+          type="text"
+          name="title"
+          value={title()}
+          onInput={titleListener}
+        />
+        <label class="u-offscreen" for="note-edit__body">
+          Enter the body for your note
+        </label>
+        <textarea
+          id="note-edit__body"
+          name="body"
+          value={body()}
+          onInput={bodyListener}
+        />
+      </form>
+      <div class="c-note-edit__preview">
+        <div class="c-note-edit__menu" role="menubar">
+          <button
+            class="c-note-edit__done"
+            role="menuitem"
+            disabled={busy()}
+            onClick={saveNote}
+          >
+            <img
+              src="/checkmark.svg"
+              width="14px"
+              height="10px"
+              alt=""
+              role="presentation"
+            />
+            Done
+          </button>
+          <Show when={isUpdate()}>
+            <button
+              class="c-note-edit__delete"
+              role="menuitem"
+              disabled={busy()}
+              onClick={deleteNote}
+            >
+              <img
+                src="/cross.svg"
+                width="10px"
+                height="10px"
+                alt=""
+                role="presentation"
+              />
+              Delete
+            </button>
+          </Show>
+        </div>
+        <div class="c-note-edit__label-preview" role="status">
+          Preview
+        </div>
+        <h1 class="c-note-edit__note-title">{title()}</h1>
+        <NotePreview body={body()} />
+      </div>
+    </div>
+  );
+}
+
+export { NoteEdit };
+```
+
+`isUpdate` is implemented as a [derived signal](https://docs.solidjs.com/concepts/derived-values/derived-signals) based on the incoming `noteId` prop.The [`note-new`](#note-new) route component supplies an `undefined` `noteId` while [`note`](#note) supplies it from the route parameters.
+For the lifetime of the component `noteId` (and by extension `isUpdate`) isn't expected to change despite the fact that all props are reactive.
+
+The `intent` Accessor is initialized `isUpdate` which the help of `isUpdate` setting it to either `EditIntent` type `new` or `update`. 
+The signal's setter creates the opportunity to change it to `delete` instead which is used by the delete capability.
+
+The `busy` signal is used to disable the action controls once an action has been intiated.
+
+Both the `initialTitle` and `initialBody` props can be `undefined` in the [`note`](#note) route component use case.
+
+The goal is to be able to set up the full fragment of the component DOM in the background (hidden by a router initiated transition) while the data to be placed into the fragment hasn't arrived yet; in other words both `initialTitle` and `initialBody` are still *unknown*.
+There are 3 phases to the *final* title and body:
+- Initially the *initial* value is (potentially) *unknown*; the incoming prop being `undefined` indicates this state. 
+Here the *final* value should appear as an empty string.
+This is an arbitrary decision as the component content at this point is still hidden by the transition.
+- When the transition completes the prop will change to the *true initial value*. Before any edits take place the *known* initial value is the *final* value.
+- Once an edit takes place that value (and every subsequent edit) becomes the *final* value.
+
+This is expressed by:
+
+```TypeScript
+const [updatedBody, setBody] = createSignal<TextUpdate>(undefined) as TextUpdatePair ;
+const body = () => updatedBody() ?? props.initialBody ?? '';
+```
+
+```TypeScript
+// file: src/components/note-edit.tsx
+import { createSignal, Show } from 'solid-js';
+// …
+import { toLastEdit, type EditIntent} from '../types';
+// …
+
+type Props = {
+  noteId: string | undefined;
+  initialTitle: string | undefined;
+  initialBody: string | undefined;
+};
+
+// remove `undefined` from setter argument union type
+type UpdatePair<T> = [updated: () => T | undefined, setter: (updated: Exclude<T, undefined>) => void];
+type TextUpdate = string | undefined;
+type TextUpdatePair = UpdatePair<TextUpdate>;
+
+const maybeNoteId = (maybe: string | undefined) =>
+  typeof maybe === 'string' && maybe.length > 0 ? maybe : undefined;
+
+function NoteEdit(props: Props) {
+  const isUpdate = () => Boolean(maybeNoteId(props.noteId));
+  const [intent, setIntent] = createSignal<EditIntent>(
+    isUpdate() ? 'update' : 'new'
+  );
+  const [busy, setBusy] = createSignal(false);
+  const [updatedTitle, setTitle] = createSignal<TextUpdate>(undefined) as TextUpdatePair;
+  const [updatedBody, setBody] = createSignal<TextUpdate>(undefined) as TextUpdatePair ;
+  // follow reactive prop while no edit has taken place
+  const title = () => updatedTitle() ?? props.initialTitle ?? '';
+  const body = () => updatedBody() ?? props.initialBody ?? '';
+
+  // …
+}
+```
+
+Both `titleListener` and `bodyListener` update their respective “updated” signals whenever the input control [fires](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
+The updated values synchronously propagate via [derived signals](https://docs.solidjs.com/concepts/derived-values/derived-signals); `title()` which drives the [heading element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadingElement) and `body()` which propagates into the [`note-preview`](#note-preview) component.
+
+```TypeScript
+// file: src/components/note-edit.tsx
+// …
+
+function NoteEdit(props: Props) {
+  // …
+
+  const titleListener = (
+    e: InputEvent & {
+      currentTarget: HTMLInputElement;
+      target: HTMLInputElement;
+    }
+  ) => {
+    e.stopPropagation();
+    setTitle(e.currentTarget.value);
+  };
+
+  const bodyListener = (
+    e: InputEvent & {
+      currentTarget: HTMLTextAreaElement;
+      target: HTMLTextAreaElement;
+    }
+  ) => {
+    e.stopPropagation();
+    setBody(e.currentTarget.value);
+  };
+
+  // …
+}
+```
+
+The click handlers for the “Done” (`saveNote`) and “Delete” (`deleteNote`) button are similar. 
+After verifying the preconditions (a set `noteForm` element reference and the `noteId` for existing notes) the `busy()` signal is turned on (disabling the listening elements) and the global `lastEdit` signal is used to communicate the action about to be requested to the rest of the application (to [`brief-list`](#brief-list) specifically). 
+
+Finally [`requestSubmit()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit) initiates the edit action.
+The values inside the form determine the nature of the action:
+- `id`: hidden value which follows `props.noteId` but will be an empty string for a `new` note.  
+- `from`: hidden value which follows [`pathname`](https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname) + [`search`](https://developer.mozilla.org/en-US/docs/Web/API/URL/search) derived from [`location`](https://docs.solidjs.com/reference/solid-router/primitives/use-location).
+The action uses it to formulate the following redirect URL.
+- `intent`: hidden value which follows the `intent()` signal.
+Initially set to `new` when `props.noteId` is `undefined` or set to `update` otherwise.
+Forced to `delete` (from `update`) by the `deleteNote` handler. In effect acts as the RPC discriminator; selects which action to perform. 
+- `title`: the latest edit of the note title directly from the form (`title()` signal exists to drive the `note-preview` prop).
+- `note`: the latest edit of the note body directly from the form (`body()` signal exists to drive the `note-preview` prop). 
+
+```TypeScript
+// file: src/components/note-edit.tsx
+// …
+import { useLocation } from '@solidjs/router';
+import { toLastEdit, type EditIntent} from '../types';
+// …
+import { editAction } from '../api';
+import { useSendLastEdit } from './app-context';
+// …
+
+
+function NoteEdit(props: Props) {
+  // …
+  const location = useLocation();
+  const { sendLastEdit: send } = useSendLastEdit();
+  let noteForm: HTMLFormElement | undefined;
+  // clear app-context
+  send(undefined);
+
+  const saveNote = (
+    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }
+  ) => {
+    if (!noteForm) return;
+
+    setBusy(true);
+    e.stopPropagation();
+    // `intent()` informs editAction whether to
+    // perform `insert` (new) or `update` (edit)
+    //
+    // inform the rest of the application
+    // of impending `new` or `edit`
+    send(toLastEdit(intent(), maybeNoteId(props.noteId)));
+    noteForm.requestSubmit();
+  };
+
+  const deleteNote = (
+    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }
+  ) => {
+    const id = maybeNoteId(props.noteId);
+    if (!(noteForm && id)) return;
+
+    setBusy(true);
+    e.stopPropagation();
+    // inform editAction to perform delete
+    setIntent('delete');
+    // inform the rest of the application
+    // of impending delete
+    send(toLastEdit(intent(), id));
+    // submit editAction
+    noteForm.requestSubmit();
+  };
+
+  // …
+}
+```
+
+`editAction` is bound to the [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action) [prop](https://facebook.github.io/jsx/#sec-jsx-attributes) of the form's [JSX](https://facebook.github.io/jsx/).
+`editAction` still executes on the client side; it's `upsertNote` and `deleteNote` which are remotely marshalled over [solid-start's RPC mechanism](https://start.solidjs.com/api/server).
+
+The form's data is accessed via the [`FormData` mechanism](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData#form).
+The makes it necessary validate/reconstitute the data from the `FormData`'s string based key/value pairs; in particular: `id`, `from`, `intent`, `title` and `body`. 
+
+`new` and `update` are directed to `upsertNote`. 
+Typically a note with its ID is returned in which case the redirect will lead to the note URL; in case of an error from the server the redirect will simply go to the home URL.
+The `briefs` cache needs to be [`revalidate`](https://docs.solidjs.com/reference/solid-router/data-apis/cache)d as the edit may have modified aspects of a note that impact parts of a brief that is already part of the current search result or created a new note that should be part of the current briefs search result. 
+
+`delete` directs to `deleteNote`.
+The `briefs` cache needs to be `revalidiate`d given that the deleted note likely appeared as a brief on the list.
+Finally the app is redirected to the home route while leaving the search parameters intact. 
+
+```TypeScript
+// file: src/api.ts
+import { action, cache, redirect, revalidate } from '@solidjs/router';
+import {
+  searchFromRootpath,
+  rootpathToHome,
+  rootpathWithNote,
+} from './route-path';
+import {
+  deleteNote as deleteNt,
+  getBriefs as getBf,
+  getNote as getNt,
+  upsertNote as upsertNt,
+} from './server/api';
+import { isEditIntent } from './types';
+
+// …
+const NAME_GET_BRIEFS = 'briefs';
+const NAME_GET_NOTE = 'note';
+// …
+
+const editAction = action(async (data: FormData) => {
+  const intent = data.get('intent');
+  if (typeof intent !== 'string' || !isEditIntent(intent))
+    throw new Error(`Malformed edit-action. "intent" param: :${intent}`);
+
+  const from = data.get('from');
+  if (typeof from !== 'string' || from.length < 1)
+    throw new Error(`Malformed edit-action. "from" param: :${from}`);
+  const search = searchFromRootpath(from);
+
+  const noteId = data.get('id') ?? '';
+  const title = data.get('title') ?? '';
+  const body = data.get('body') ?? '';
+  if (
+    typeof noteId !== 'string' ||
+    typeof title !== 'string' ||
+    typeof body !== 'string'
+  )
+    throw new Error('Malformed edit-action. note params');
+
+  const id = noteId.length > 0 ? noteId : undefined;
+  if (intent === 'new' || intent === 'update') {
+    const note = await upsertNt(title, body, id);
+    // navigate to `/notes/:id` if note was returned
+    // otherwise navigate to `/`
+    const path = note
+      ? rootpathWithNote(note.id, search)
+      : rootpathToHome(search);
+
+    // - A new note may now need to appear in the briefs
+    // - An existing note's title (or excerpt) could have changed
+    // i.e.  briefs need to be reloaded even if the
+    // search param didn't change
+    revalidate(NAME_GET_BRIEFS, true);
+
+    throw redirect(path);
+  }
+
+  if (intent === 'delete') {
+    if (!id) throw new Error('edit-action: cannot delete without ID');
+
+    await deleteNt(id);
+    // - after delete note may need to be removed from briefs (i.e. revalidate)
+    revalidate(NAME_GET_BRIEFS, true);
+    // - navigate to the home page
+    throw redirect(rootpathToHome(search));
+  }
+}, NAME_EDIT_ACTION);
+
+// …
+```
diff --git a/docs/assets/brief-list.jpg b/docs/assets/brief-list.jpg
new file mode 100644
index 0000000..2a61d3b
Binary files /dev/null and b/docs/assets/brief-list.jpg differ
diff --git a/docs/assets/brief-list.png b/docs/assets/brief-list.png
new file mode 100644
index 0000000..8511bbf
Binary files /dev/null and b/docs/assets/brief-list.png differ
diff --git a/docs/assets/brief.jpg b/docs/assets/brief.jpg
new file mode 100644
index 0000000..d5cc375
Binary files /dev/null and b/docs/assets/brief.jpg differ
diff --git a/docs/assets/brief.png b/docs/assets/brief.png
new file mode 100644
index 0000000..3bb53bc
Binary files /dev/null and b/docs/assets/brief.png differ
diff --git a/docs/assets/layout.jpg b/docs/assets/layout.jpg
new file mode 100644
index 0000000..aca6bf3
Binary files /dev/null and b/docs/assets/layout.jpg differ
diff --git a/docs/assets/layout.png b/docs/assets/layout.png
new file mode 100644
index 0000000..8110ea4
Binary files /dev/null and b/docs/assets/layout.png differ
diff --git a/docs/assets/note-display.jpg b/docs/assets/note-display.jpg
new file mode 100644
index 0000000..c093b70
Binary files /dev/null and b/docs/assets/note-display.jpg differ
diff --git a/docs/assets/note-display.png b/docs/assets/note-display.png
new file mode 100644
index 0000000..9ce08d6
Binary files /dev/null and b/docs/assets/note-display.png differ
diff --git a/docs/assets/note-edit.jpg b/docs/assets/note-edit.jpg
new file mode 100644
index 0000000..ea696ec
Binary files /dev/null and b/docs/assets/note-edit.jpg differ
diff --git a/docs/assets/note-edit.png b/docs/assets/note-edit.png
new file mode 100644
index 0000000..2a1e4e7
Binary files /dev/null and b/docs/assets/note-edit.png differ
diff --git a/moq/.gitignore b/moq/.gitignore
new file mode 100644
index 0000000..1dcbbc1
--- /dev/null
+++ b/moq/.gitignore
@@ -0,0 +1,9 @@
+# dependencies
+/node_modules
+
+# Temp
+gitignore
+
+# System Files
+.DS_Store
+
diff --git a/moq/.prettierignore b/moq/.prettierignore
new file mode 100644
index 0000000..7ca48a3
--- /dev/null
+++ b/moq/.prettierignore
@@ -0,0 +1,4 @@
+package-lock.json
+pnpm-lock.yaml
+
+public/main.js
diff --git a/moq/.prettierrc.json b/moq/.prettierrc.json
new file mode 100644
index 0000000..2e97b3b
--- /dev/null
+++ b/moq/.prettierrc.json
@@ -0,0 +1,9 @@
+{
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"semi": true,
+	"singleQuote": true,
+	"tabWidth": 2,
+	"trailingComma": "es5",
+	"useTabs": true
+}
diff --git a/moq/index.js b/moq/index.js
new file mode 100644
index 0000000..0cc5614
--- /dev/null
+++ b/moq/index.js
@@ -0,0 +1,41 @@
+// @ts-check
+// file: index.js
+import polka from 'polka';
+import sirv from 'sirv';
+import { parse } from 'regexparam';
+
+/** @typedef { import('node:fs').Stats } Stats */
+/** @typedef { import('node:http').ServerResponse } ServerResponse */
+
+const pathNoStore = ['/', '/map(.html)?', '/main.js', '/style.css'];
+const patternNoStore = pathNoStore.map((uriTemplate) => parse(uriTemplate));
+
+/**
+ * @param { ServerResponse } res
+ * @param { string } pathname
+ * @param { Stats } _stats
+ */
+function setHeaders(res, pathname, _stats) {
+	const value = patternNoStore.some((route) => route.pattern.test(pathname))
+		? 'no-store'
+		: 'public,max-age=31536000,immutable';
+	res.setHeader('Cache-Control', value);
+}
+
+const assets = sirv('public', {
+	single: 'moq-page.html',
+	setHeaders,
+});
+
+const port = 3030;
+
+polka()
+	.use(assets)
+	.listen(port, () => {
+		console.log(`> Running on localhost:${port}`);
+	});
+
+/*
+ * http://localhost:3030/map (map.html) shows the links to the mapped out variations
+ * for everything else page.html does the work
+ */
diff --git a/moq/package.json b/moq/package.json
new file mode 100644
index 0000000..e96a6dc
--- /dev/null
+++ b/moq/package.json
@@ -0,0 +1,36 @@
+{
+	"name": "reference",
+	"version": "0.0.0",
+	"description": "",
+	"type": "module",
+	"main": "index.js",
+	"scripts": {
+		"seed": "node seed-data.js",
+		"serve": "node index.js",
+		"build": "./node_modules/.bin/rollup -c rollup.config.mjs",
+		"format": "prettier . --write",
+		"lint:types": "./node_modules/.bin/tsc --noEmit -p src/tsconfig.json",
+		"server:types": "./node_modules/.bin/tsc --noEmit -p tsconfig.json"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"dependencies": {
+		"polka": "^0.5.2",
+		"regexparam": "^3.0.0",
+		"sirv": "^2.0.4"
+	},
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@types/node": "^20.11.24",
+		"@types/polka": "^0.5.7",
+		"@types/sanitize-html": "^2.11.0",
+		"marked": "^12.0.1",
+		"prettier": "^3.2.5",
+		"rollup": "^4.12.1",
+		"sanitize-html": "^2.12.1",
+		"typescript": "^5.3.3"
+	}
+}
diff --git a/moq/pnpm-lock.yaml b/moq/pnpm-lock.yaml
new file mode 100644
index 0000000..c2d60c6
--- /dev/null
+++ b/moq/pnpm-lock.yaml
@@ -0,0 +1,752 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  polka:
+    specifier: ^0.5.2
+    version: 0.5.2
+  regexparam:
+    specifier: ^3.0.0
+    version: 3.0.0
+  sirv:
+    specifier: ^2.0.4
+    version: 2.0.4
+
+devDependencies:
+  '@rollup/plugin-commonjs':
+    specifier: ^25.0.7
+    version: 25.0.7(rollup@4.12.1)
+  '@rollup/plugin-node-resolve':
+    specifier: ^15.2.3
+    version: 15.2.3(rollup@4.12.1)
+  '@rollup/plugin-terser':
+    specifier: ^0.4.4
+    version: 0.4.4(rollup@4.12.1)
+  '@types/node':
+    specifier: ^20.11.24
+    version: 20.11.24
+  '@types/polka':
+    specifier: ^0.5.7
+    version: 0.5.7
+  '@types/sanitize-html':
+    specifier: ^2.11.0
+    version: 2.11.0
+  marked:
+    specifier: ^12.0.1
+    version: 12.0.1
+  prettier:
+    specifier: ^3.2.5
+    version: 3.2.5
+  rollup:
+    specifier: ^4.12.1
+    version: 4.12.1
+  sanitize-html:
+    specifier: ^2.12.1
+    version: 2.12.1
+  typescript:
+    specifier: ^5.3.3
+    version: 5.3.3
+
+packages:
+
+  /@arr/every@1.0.1:
+    resolution: {integrity: sha512-UQFQ6SgyJ6LX42W8rHCs8KVc0JS0tzVL9ct4XYedJukskYVWTo49tNiMEK9C2HTyarbNiT/RVIRSY82vH+6sTg==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /@jridgewell/gen-mapping@0.3.5:
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.25
+    dev: true
+
+  /@jridgewell/resolve-uri@3.1.2:
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/set-array@1.2.1:
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/source-map@0.3.5:
+    resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+    dev: true
+
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true
+
+  /@jridgewell/trace-mapping@0.3.25:
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
+  /@polka/url@0.5.0:
+    resolution: {integrity: sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==}
+    dev: false
+
+  /@polka/url@1.0.0-next.24:
+    resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
+    dev: false
+
+  /@rollup/plugin-commonjs@25.0.7(rollup@4.12.1):
+    resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.12.1)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      glob: 8.1.0
+      is-reference: 1.2.1
+      magic-string: 0.30.8
+      rollup: 4.12.1
+    dev: true
+
+  /@rollup/plugin-node-resolve@15.2.3(rollup@4.12.1):
+    resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.12.1)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-builtin-module: 3.2.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+      rollup: 4.12.1
+    dev: true
+
+  /@rollup/plugin-terser@0.4.4(rollup@4.12.1):
+    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      rollup: 4.12.1
+      serialize-javascript: 6.0.2
+      smob: 1.4.1
+      terser: 5.29.1
+    dev: true
+
+  /@rollup/pluginutils@5.1.0(rollup@4.12.1):
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 4.12.1
+    dev: true
+
+  /@rollup/rollup-android-arm-eabi@4.12.1:
+    resolution: {integrity: sha512-iU2Sya8hNn1LhsYyf0N+L4Gf9Qc+9eBTJJJsaOGUp+7x4n2M9dxTt8UvhJl3oeftSjblSlpCfvjA/IfP3g5VjQ==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-android-arm64@4.12.1:
+    resolution: {integrity: sha512-wlzcWiH2Ir7rdMELxFE5vuM7D6TsOcJ2Yw0c3vaBR3VOsJFVTx9xvwnAvhgU5Ii8Gd6+I11qNHwndDscIm0HXg==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-arm64@4.12.1:
+    resolution: {integrity: sha512-YRXa1+aZIFN5BaImK+84B3uNK8C6+ynKLPgvn29X9s0LTVCByp54TB7tdSMHDR7GTV39bz1lOmlLDuedgTwwHg==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-x64@4.12.1:
+    resolution: {integrity: sha512-opjWJ4MevxeA8FhlngQWPBOvVWYNPFkq6/25rGgG+KOy0r8clYwL1CFd+PGwRqqMFVQ4/Qd3sQu5t7ucP7C/Uw==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.12.1:
+    resolution: {integrity: sha512-uBkwaI+gBUlIe+EfbNnY5xNyXuhZbDSx2nzzW8tRMjUmpScd6lCQYKY2V9BATHtv5Ef2OBq6SChEP8h+/cxifQ==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.12.1:
+    resolution: {integrity: sha512-0bK9aG1kIg0Su7OcFTlexkVeNZ5IzEsnz1ept87a0TUgZ6HplSgkJAnFpEVRW7GRcikT4GlPV0pbtVedOaXHQQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.12.1:
+    resolution: {integrity: sha512-qB6AFRXuP8bdkBI4D7UPUbE7OQf7u5OL+R94JE42Z2Qjmyj74FtDdLGeriRyBDhm4rQSvqAGCGC01b8Fu2LthQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-gnu@4.12.1:
+    resolution: {integrity: sha512-sHig3LaGlpNgDj5o8uPEoGs98RII8HpNIqFtAI8/pYABO8i0nb1QzT0JDoXF/pxzqO+FkxvwkHZo9k0NJYDedg==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.12.1:
+    resolution: {integrity: sha512-nD3YcUv6jBJbBNFvSbp0IV66+ba/1teuBcu+fBBPZ33sidxitc6ErhON3JNavaH8HlswhWMC3s5rgZpM4MtPqQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.12.1:
+    resolution: {integrity: sha512-7/XVZqgBby2qp/cO0TQ8uJK+9xnSdJ9ct6gSDdEr4MfABrjTyrW6Bau7HQ73a2a5tPB7hno49A0y1jhWGDN9OQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.12.1:
+    resolution: {integrity: sha512-CYc64bnICG42UPL7TrhIwsJW4QcKkIt9gGlj21gq3VV0LL6XNb1yAdHVp1pIi9gkts9gGcT3OfUYHjGP7ETAiw==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.12.1:
+    resolution: {integrity: sha512-LN+vnlZ9g0qlHGlS920GR4zFCqAwbv2lULrR29yGaWP9u7wF5L7GqWu9Ah6/kFZPXPUkpdZwd//TNR+9XC9hvA==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.12.1:
+    resolution: {integrity: sha512-n+vkrSyphvmU0qkQ6QBNXCGr2mKjhP08mPRM/Xp5Ck2FV4NrHU+y6axzDeixUrCBHVUS51TZhjqrKBBsHLKb2Q==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@types/body-parser@1.19.5:
+    resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
+    dependencies:
+      '@types/connect': 3.4.38
+      '@types/node': 20.11.24
+    dev: true
+
+  /@types/connect@3.4.38:
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+    dependencies:
+      '@types/node': 20.11.24
+    dev: true
+
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+    dev: true
+
+  /@types/express-serve-static-core@4.17.43:
+    resolution: {integrity: sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==}
+    dependencies:
+      '@types/node': 20.11.24
+      '@types/qs': 6.9.12
+      '@types/range-parser': 1.2.7
+      '@types/send': 0.17.4
+    dev: true
+
+  /@types/express@4.17.21:
+    resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
+    dependencies:
+      '@types/body-parser': 1.19.5
+      '@types/express-serve-static-core': 4.17.43
+      '@types/qs': 6.9.12
+      '@types/serve-static': 1.15.5
+    dev: true
+
+  /@types/http-errors@2.0.4:
+    resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
+    dev: true
+
+  /@types/mime@1.3.5:
+    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
+    dev: true
+
+  /@types/mime@3.0.4:
+    resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
+    dev: true
+
+  /@types/node@20.11.24:
+    resolution: {integrity: sha512-Kza43ewS3xoLgCEpQrsT+xRo/EJej1y0kVYGiLFE1NEODXGzTfwiC6tXTLMQskn1X4/Rjlh0MQUvx9W+L9long==}
+    dependencies:
+      undici-types: 5.26.5
+    dev: true
+
+  /@types/polka@0.5.7:
+    resolution: {integrity: sha512-TH8CDXM8zoskPCNmWabtK7ziGv9Q21s4hMZLVYK5HFEfqmGXBqq/Wgi7jNELWXftZK/1J/9CezYa06x1RKeQ+g==}
+    dependencies:
+      '@types/express': 4.17.21
+      '@types/express-serve-static-core': 4.17.43
+      '@types/node': 20.11.24
+      '@types/trouter': 3.1.4
+    dev: true
+
+  /@types/qs@6.9.12:
+    resolution: {integrity: sha512-bZcOkJ6uWrL0Qb2NAWKa7TBU+mJHPzhx9jjLL1KHF+XpzEcR7EXHvjbHlGtR/IsP1vyPrehuS6XqkmaePy//mg==}
+    dev: true
+
+  /@types/range-parser@1.2.7:
+    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+    dev: true
+
+  /@types/resolve@1.20.2:
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+    dev: true
+
+  /@types/sanitize-html@2.11.0:
+    resolution: {integrity: sha512-7oxPGNQHXLHE48r/r/qjn7q0hlrs3kL7oZnGj0Wf/h9tj/6ibFyRkNbsDxaBBZ4XUZ0Dx5LGCyDJ04ytSofacQ==}
+    dependencies:
+      htmlparser2: 8.0.2
+    dev: true
+
+  /@types/send@0.17.4:
+    resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
+    dependencies:
+      '@types/mime': 1.3.5
+      '@types/node': 20.11.24
+    dev: true
+
+  /@types/serve-static@1.15.5:
+    resolution: {integrity: sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==}
+    dependencies:
+      '@types/http-errors': 2.0.4
+      '@types/mime': 3.0.4
+      '@types/node': 20.11.24
+    dev: true
+
+  /@types/trouter@3.1.4:
+    resolution: {integrity: sha512-4YIL/2AvvZqKBWenjvEpxpblT2KGO6793ipr5QS7/6DpQ3O3SwZGgNGWezxf3pzeYZc24a2pJIrR/+Jxh/wYNQ==}
+    dev: true
+
+  /acorn@8.11.3:
+    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
+
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
+  /buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    dev: true
+
+  /builtin-modules@3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    dev: true
+
+  /commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+    dev: true
+
+  /deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+    dev: true
+
+  /domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: true
+
+  /domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: true
+
+  /domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+    dev: true
+
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+    dev: true
+
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: true
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+    dev: true
+
+  /glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.6
+      once: 1.4.0
+    dev: true
+
+  /hasown@2.0.1:
+    resolution: {integrity: sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+    dev: true
+
+  /htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      entities: 4.5.0
+    dev: true
+
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: true
+
+  /is-builtin-module@3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
+  /is-core-module@2.13.1:
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+    dependencies:
+      hasown: 2.0.1
+    dev: true
+
+  /is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+    dev: true
+
+  /is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: true
+
+  /magic-string@0.30.8:
+    resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
+  /marked@12.0.1:
+    resolution: {integrity: sha512-Y1/V2yafOcOdWQCX0XpAKXzDakPOpn6U0YLxTJs3cww6VxOzZV1BTOOYWLvH3gX38cq+iLwljHHTnMtlDfg01Q==}
+    engines: {node: '>= 18'}
+    hasBin: true
+    dev: true
+
+  /matchit@1.1.0:
+    resolution: {integrity: sha512-+nGYoOlfHmxe5BW5tE0EMJppXEwdSf8uBA1GTZC7Q77kbT35+VKLYJMzVNWCHSsga1ps1tPYFtFyvxvKzWVmMA==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@arr/every': 1.0.1
+    dev: false
+
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /mrmime@2.0.0:
+    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: true
+
+  /once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: true
+
+  /parse-srcset@1.0.2:
+    resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
+    dev: true
+
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
+
+  /picocolors@1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+    dev: true
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: true
+
+  /polka@0.5.2:
+    resolution: {integrity: sha512-FVg3vDmCqP80tOrs+OeNlgXYmFppTXdjD5E7I4ET1NjvtNmQrb1/mJibybKkb/d4NA7YWAr1ojxuhpL3FHqdlw==}
+    dependencies:
+      '@polka/url': 0.5.0
+      trouter: 2.0.1
+    dev: false
+
+  /postcss@8.4.35:
+    resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
+  /prettier@3.2.5:
+    resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
+  /randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
+  /regexparam@3.0.0:
+    resolution: {integrity: sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.13.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /rollup@4.12.1:
+    resolution: {integrity: sha512-ggqQKvx/PsB0FaWXhIvVkSWh7a/PCLQAsMjBc+nA2M8Rv2/HG0X6zvixAB7KyZBRtifBUhy5k8voQX/mRnABPg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.12.1
+      '@rollup/rollup-android-arm64': 4.12.1
+      '@rollup/rollup-darwin-arm64': 4.12.1
+      '@rollup/rollup-darwin-x64': 4.12.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.12.1
+      '@rollup/rollup-linux-arm64-gnu': 4.12.1
+      '@rollup/rollup-linux-arm64-musl': 4.12.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.12.1
+      '@rollup/rollup-linux-x64-gnu': 4.12.1
+      '@rollup/rollup-linux-x64-musl': 4.12.1
+      '@rollup/rollup-win32-arm64-msvc': 4.12.1
+      '@rollup/rollup-win32-ia32-msvc': 4.12.1
+      '@rollup/rollup-win32-x64-msvc': 4.12.1
+      fsevents: 2.3.3
+    dev: true
+
+  /safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+    dev: true
+
+  /sanitize-html@2.12.1:
+    resolution: {integrity: sha512-Plh+JAn0UVDpBRP/xEjsk+xDCoOvMBwQUf/K+/cBAVuTbtX8bj2VB7S1sL1dssVpykqp0/KPSesHrqXtokVBpA==}
+    dependencies:
+      deepmerge: 4.3.1
+      escape-string-regexp: 4.0.0
+      htmlparser2: 8.0.2
+      is-plain-object: 5.0.0
+      parse-srcset: 1.0.2
+      postcss: 8.4.35
+    dev: true
+
+  /serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+    dependencies:
+      randombytes: 2.1.0
+    dev: true
+
+  /sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.24
+      mrmime: 2.0.0
+      totalist: 3.0.1
+    dev: false
+
+  /smob@1.4.1:
+    resolution: {integrity: sha512-9LK+E7Hv5R9u4g4C3p+jjLstaLe11MDsL21UpYaCNmapvMkYhqCV4A/f/3gyH8QjMyh6l68q9xC85vihY9ahMQ==}
+    dev: true
+
+  /source-map-js@1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+    dev: true
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /terser@5.29.1:
+    resolution: {integrity: sha512-lZQ/fyaIGxsbGxApKmoPTODIzELy3++mXhS5hOqaAWZjQtpq/hFHAc+rm29NND1rYRxRWKcjuARNwULNXa5RtQ==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/source-map': 0.3.5
+      acorn: 8.11.3
+      commander: 2.20.3
+      source-map-support: 0.5.21
+    dev: true
+
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /trouter@2.0.1:
+    resolution: {integrity: sha512-kr8SKKw94OI+xTGOkfsvwZQ8mWoikZDd2n8XZHjJVZUARZT+4/VV6cacRS6CLsH9bNm+HFIPU1Zx4CnNnb4qlQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      matchit: 1.1.0
+    dev: false
+
+  /typescript@5.3.3:
+    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
+  /undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+    dev: true
+
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
diff --git a/moq/public/checkmark.svg b/moq/public/checkmark.svg
new file mode 100644
index 0000000..fde2dfb
--- /dev/null
+++ b/moq/public/checkmark.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666504 5.17139L4.77457 9.27954L13.3334 0.720551" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/moq/public/cross.svg b/moq/public/cross.svg
new file mode 100644
index 0000000..3a10858
--- /dev/null
+++ b/moq/public/cross.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M 12 0 L 0 12 M 0 0 L 12 12" stroke="#BD0D2A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/moq/public/favicon.ico b/moq/public/favicon.ico
new file mode 100644
index 0000000..d80eeb8
Binary files /dev/null and b/moq/public/favicon.ico differ
diff --git a/moq/public/logo.svg b/moq/public/logo.svg
new file mode 100644
index 0000000..8a8988c
--- /dev/null
+++ b/moq/public/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><defs><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient></defs><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
\ No newline at end of file
diff --git a/moq/public/main.js b/moq/public/main.js
new file mode 100644
index 0000000..ff62cc2
--- /dev/null
+++ b/moq/public/main.js
@@ -0,0 +1 @@
+!function(){"use strict";const e=document.getElementById("note-data");if(!(e instanceof HTMLScriptElement))throw new Error('Unable to locate "note-data" JSON content.');const t=JSON.parse(e.text);!Array.isArray(t)||t.length<1||(t[0].updatedAt=Date.now()-72e5);const n=t.reduce(((e,t)=>e.set(t.id,t)),new Map);const o="SolidStart Notes",i=e=>e?`${e} - ${o}`:o;function r(e){throw new Error(`Invalid path "${e}"`)}function c(e,t){const n=e.querySelector(`#${t}`);if(!(n instanceof HTMLTemplateElement))throw new Error(`Can't find template for ID "${t}"`);const o=n.content.firstElementChild;if(!(o instanceof HTMLElement))throw new Error(`Invalid root for template ID "${t}"`);return o}function d(e){document.addEventListener("moq-busy",(t=>e(t.detail)))}const s=e=>document.dispatchEvent(new CustomEvent("moq-busy",{detail:e}));const l={locale:"en-GB",timeZone:"UTC",numberingSystem:"latn",calendar:"gregory",hour12:!1};const a="Untitled",u="";const f=function({locale:e,timeZone:t,hour12:n}=l){const o=Intl.DateTimeFormat(e,{timeZone:t,hour12:n,dateStyle:"medium",timeStyle:"short"});return function(e){const t=new Date(e);return[o.format(t),t.toISOString()]}}(Intl.DateTimeFormat().resolvedOptions());const m="js:c-brief--flash",p=e=>!(1&~e),h=e=>2===e,E=e=>3===e;const y=function({locale:e,timeZone:t,hour12:n}=l){const o=Intl.DateTimeFormat(e,{timeZone:t,hour12:n,dateStyle:"short"}),i=Intl.DateTimeFormat(e,{timeZone:t,hour12:n,timeStyle:"short"});let r=new Date;return function(e,t=!1){t&&(r=new Date);const n=new Date(e);return[n.getDate()===r.getDate()&&n.getMonth()===r.getMonth()&&n.getFullYear()===r.getFullYear()?i.format(n):o.format(n),n.toISOString()]}}(Intl.DateTimeFormat().resolvedOptions());const T=function(e){const t=c(e,"app");return function({briefList:e,newButton:n,note:o,searchField:i}){const r=t.cloneNode(!0),c=r.querySelector(".c-sidebar__menu");if(!c)throw new Error('Failed to find ".c-sidebar__menu" in "app" content');c.append(i),c.append(n),c.insertAdjacentElement("afterend",e);const d=r.querySelector(".c-note-view");if(!d)throw new Error('Failed to find "c-note-view" in "app" content');return d.append(o),r}}(document),g=function(e){const t=c(e,"edit-button");return function(n,o){const i=t.cloneNode(!0),r=e.createTextNode(n);return i.appendChild(r),i.classList.add("new"===o?"js:c-edit-button--new":"js:c-edit-button--update"),i instanceof HTMLButtonElement&&d((e=>i.disabled=e)),i}}(document),w=function(e,t){const n=c(e,"note"),o=c(e,"note-none"),i=function(e){const t=c(e,"note-preview");return function(e){const n=t.cloneNode(!0),o=n.querySelector(".o-from-markdown");return o instanceof HTMLElement&&(o.innerHTML=e),n}}(e),r=function(e,t){const n=c(e,"note-edit");return function(o){const i=n.cloneNode(!0),r=i.querySelector("#note-edit__title");r instanceof HTMLInputElement&&(r.value=o?o.title:a);const c=i.querySelector(".c-note-edit__note-title");c instanceof HTMLElement&&(c.append(e.createTextNode(o?o.title:a)),c.insertAdjacentElement("afterend",t(o?o.html:u)));const s=i.querySelector(".c-note-edit__delete"),l=i.querySelector(".c-note-edit__done");if(o){const e=i.querySelector("#note-edit__body");e instanceof HTMLTextAreaElement&&(e.textContent=o.body)}return l instanceof HTMLButtonElement&&s instanceof HTMLButtonElement&&(o||s.remove(),d(o?e=>{l.disabled=s.disabled=e}:e=>{l.disabled=e})),i}}(e,i);return function(c,d){if(d)return r(c);if(!c)return o.cloneNode(!0);const s=n.cloneNode(!0),l=s.querySelector("h1");l instanceof HTMLElement&&l.appendChild(e.createTextNode(c.title));const a=s.querySelector(".c-note__menu");if(a instanceof HTMLElement){const n=s.querySelector("time");if(n instanceof HTMLTimeElement){const[t,o]=f(c.updatedAt);n.dateTime=o,n.appendChild(e.createTextNode(t))}a.append(t("Edit","edit"))}return s.append(i(c.html)),s}}(document,g),L=function(e){const t=function(e){const t=c(e,"brief");return function(n,o=0){const i=t.cloneNode(!0);i.dataset.noteId=n.id;const r=i.querySelector("header");if(r instanceof HTMLElement){const u=r.querySelector("strong");u instanceof HTMLElement&&u.appendChild(e.createTextNode(n.title));const f=r.querySelector("time");if(f instanceof HTMLTimeElement){const[T,g]=y(n.updatedAt);f.dateTime=g,f.appendChild(e.createTextNode(T))}}const c=i.querySelector(".c-brief__summary");c instanceof HTMLElement&&n.excerpt&&c.replaceChildren(e.createTextNode(n.excerpt));const d=i.querySelector("input"),l=i.querySelector("label");d instanceof HTMLInputElement&&l instanceof HTMLLabelElement&&(d.id=d.id+n.id,l.htmlFor=d.id);const a=i.querySelector(".c-brief__open");if(a instanceof HTMLButtonElement){const w=h(o)?"c-brief--pending":p(o)?"c-brief--active":void 0;w&&a.classList.add(w)}if(E(o)){function L(){i.classList.add(m),s(!0)}function S(e){if("flash"===e.animationName)return i.classList.remove(m),s(!1),void setTimeout(L,3e3)}i.addEventListener("animationend",S),L()}return i}}(e),n=c(e,"brief-list__empty"),[o,i]=function(e,t){const n=c(e,t),o=n.querySelector("li");if(!(o instanceof HTMLLIElement))throw new Error(`Template ID "${t}" does not contain list item`);return o.remove(),[n,o]}(e,"brief-list");return function(r,c,d,s=!1){const l=o.cloneNode(!0),[a,u]="string"==typeof r?[void 0,r.length>0?r:void 0]:[Array.isArray(r)&&r.length>0?r:void 0,void 0];if(!a){const t=n.cloneNode(!0);return t.appendChild(e.createTextNode(u?`Couldn't find any notes titled "${u}"`:"No notes created yet!")),l.replaceChildren(t),l}const f=l.firstElementChild;if(f){const e=function(e,t,n){if(e){const o=t?3:1;return n?t=>n===t?2:e===t?o:0:t=>t===e?o:0}return n?e=>e===n?2:0:e=>0}(c,s,d);for(const n of a){const o=i.cloneNode(!0);o.append(t(n,e(n.id))),f.append(o)}}return l}}(document),S=function(e){const t=c(e,"search-field");return function(e,n=!1){const o=t.cloneNode(!0);if(e){const t=o.querySelector("#search-field__search");if(!(t instanceof HTMLInputElement))throw new Error('Failed to find "#search-field__search" input in "search-field" content');t.value=e}const i=o.querySelector(".c-spinner");return i instanceof HTMLElement&&n&&(i.classList.add("c-spinner--active"),i.setAttribute("aria-busy","true")),o}}(document);const v=function(e){const{isEditing:t,noteId:n,title:o}=function(e){const t=e.split("/");if(2===t.length&&0===t[1].length)return{noteId:void 0,isEditing:!1,title:i()};if(t.length>2&&"note"===t[1]){if(3===t.length&&"new"===t[2])return{noteId:void 0,isEditing:!0,title:i("New Note")};if(t.length<5&&t[2].length>0){if(3===t.length)return{noteId:t[2],isEditing:!1,title:i(t[2])};if("edit"===t[3])return{noteId:t[2],isEditing:!0,title:i(`Edit ${t[2]}`)};r(e)}r(e)}r(e)}(e.pathname),c=e.searchParams,d=c.get("search")??void 0,s=c.get("moqnextid")??void 0;return{flushNote:c.has("moqflush"),isEditing:t,nextId:s&&s.length>0?s:void 0,noteId:n,search:"string"==typeof d&&d.length>0?d:void 0,title:o}}(new URL(document.location.href));document.title=v.title;document.querySelector("body").prepend(function({flushNote:e,isEditing:o,nextId:i,noteId:r,search:c}){const d=function(e){if(!e)return t;const n=e.toLowerCase();return t.filter((e=>e.title.toLowerCase().includes(n)))}(c),s=d.length>0?d:c,l=r?(a=r,n.get(a)):void 0;var a;const u=Boolean(i);return T({briefList:L(s,l?.id,i,e),newButton:g("New","new"),note:w(l,o),searchField:S(c,u)})}(v))}();
diff --git a/moq/public/map.html b/moq/public/map.html
new file mode 100644
index 0000000..7001c90
--- /dev/null
+++ b/moq/public/map.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-us">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<title>Map to reference views</title>
+		<style></style>
+	</head>
+	<body>
+		<ul>
+			<li>
+				<a href="/?search=not">First link</a>
+			</li>
+			<li>
+				<a href="/?search=zzz">No search results</a>
+			</li>
+			<li>
+				<a href="/note/lUV9_Dl_3oWvG8-2qQC1n">Active Note</a>
+			</li>
+			<li>
+				<a href="/note/lUV9_Dl_3oWvG8-2qQC1n?moqnextid=GFLhs2GDasr-bk1kqN2b_"
+					>Pending Note Preview</a
+				>
+			</li>
+			<li>
+				<a href="/note/new">New Note</a>
+			</li>
+			<li>
+				<a href="/note/SRtRIP3Z1kRRY1Vc09qEp/edit">1st note edit</a>
+			</li>
+			<li>
+				<a href="/note/lUV9_Dl_3oWvG8-2qQC1n/edit?moqflush"
+					>2nd note edit (flushing)</a
+				>
+			</li>
+			<li>
+				<a href="/note/GFLhs2GDasr-bk1kqN2b_/edit">3rd note edit</a>
+			</li>
+			<li>
+				<a href="/note/HhJLtO9DAB-99uXw6f75r/edit">4th note edit</a>
+			</li>
+		</ul>
+	</body>
+</html>
diff --git a/moq/public/moq-page.html b/moq/public/moq-page.html
new file mode 100644
index 0000000..5f42a1a
--- /dev/null
+++ b/moq/public/moq-page.html
@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en-us">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<title>SolidJS Notes CSS moq</title>
+		<link rel="stylesheet" href="/style.css" />
+		<script type="module" src="/main.js"></script>
+		<style></style>
+	</head>
+	<body>
+		<!-- prettier-ignore -->
+		<script id="note-data" type="application/json">[{"id":"SRtRIP3Z1kRRY1Vc09qEp","title":"Meeting Notes","body":"This is an example note. It contains **Markdown**!","excerpt":"This is an example note. It contains Markdown!","html":"<p>This is an example note. It contains <strong>Markdown</strong>!</p>\n","createdAt":1708646993417,"updatedAt":1708646993417},{"id":"lUV9_Dl_3oWvG8-2qQC1n","title":"Make a thing","body":"It's very easy to make some words **bold** and other words *italic* with\nMarkdown. You can even [link to SolidStart's website!](https://start.solidjs.com/).","excerpt":"It's very easy to make some words bold and other words italic with Markdown. You can even link to SolidStart's…","html":"<p>It's very easy to make some words <strong>bold</strong> and other words <em>italic</em> with\nMarkdown. You can even <a href=\"https://start.solidjs.com/\">link to SolidStart's website!</a>.</p>\n","createdAt":1706568371951,"updatedAt":1706568371951},{"id":"GFLhs2GDasr-bk1kqN2b_","title":"A note with a very long title because sometimes you need more words","body":"You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing) notes in this app! These notes live on the server in the `.data/notes` file.\n![This app is powered by SolidStart](https://assets.solidjs.com/banner?project=Start&amp;type=core)","excerpt":"You can write all kinds of amazing notes in this app! These notes live on the server in the .data/notes…","html":"<p>You can write all kinds of <a href=\"https://en.wikipedia.org/wiki/The_Amazing\">amazing</a> notes in this app! These notes live on the server in the <code>.data/notes</code> file.\n<img src=\"https://assets.solidjs.com/banner?project=Start&amp;type=core\" alt=\"This app is powered by SolidStart\" /></p>\n","createdAt":1704958759774,"updatedAt":1704958759774},{"id":"HhJLtO9DAB-99uXw6f75r","title":"I wrote this note today","body":"It was an excellent note.","excerpt":"It was an excellent note.","html":"<p>It was an excellent note.</p>\n","createdAt":1704528188382,"updatedAt":1704528188382}]</script>
+		<template id="app">
+			<main class="c-main">
+				<section class="c-sidebar c-main__column">
+					<section class="c-sidebar__header">
+						<img
+							class="c-logo"
+							src="/logo.svg"
+							width="22px"
+							height="20px"
+							alt=""
+							role="presentation"
+						/>
+						<strong>Solid Notes</strong>
+					</section>
+					<section class="c-sidebar__menu" role="menubar"></section>
+				</section>
+				<section class="c-note-view c-main__column"></section>
+			</main>
+		</template>
+		<template id="search-field">
+			<form class="c-search-field" role="search">
+				<label class="u-offscreen" for="search-field__search">
+					Search for a note by title
+				</label>
+				<input id="search-field__search" placeholder="Search" />
+				<div class="c-spinner" role="progressbar" aria-busy="false"></div>
+			</form>
+		</template>
+		<template id="edit-button">
+			<button class="c-edit-button"></button>
+		</template>
+		<template id="brief-list">
+			<nav>
+				<ul class="c-brief-list">
+					<li></li>
+				</ul>
+			</nav>
+		</template>
+		<template id="brief-list__empty">
+			<div class="c-brief-empty"></div>
+		</template>
+		<template id="note">
+			<div class="c-note">
+				<div class="c-note__header">
+					<h1></h1>
+					<div class="c-note__menu" role="menubar">
+						<small class="c-note__updated" role="status">
+							Last updated on <time></time>
+						</small>
+					</div>
+				</div>
+			</div>
+		</template>
+		<template id="brief">
+			<div class="js:c-brief c-brief">
+				<header>
+					<strong></strong>
+					<time></time>
+				</header>
+				<input
+					id="brief__summary-state__"
+					type="checkbox"
+					class="c-brief__summary-state"
+				/>
+				<button class="js:c-brief__open c-brief__open">
+					Open note for preview
+				</button>
+				<label for="brief__summary-state__" class="c-brief__summary-toggle">
+					<svg
+						viewBox="0 0 512 512"
+						aria-hidden="true"
+						fill="currentColor"
+						width="1em"
+						height="1em"
+					>
+						<path d="M60 99.333l196 196 196-196 60 60-256 256-256-256z"></path>
+					</svg>
+				</label>
+				<p class="c-brief__summary">
+					<span class="c-brief__no-content">(No Content)</span>
+				</p>
+			</div>
+		</template>
+		<template id="note-none">
+			<div class="c-note-none">
+				<span>Click a note on the left to view something! 🥺</span>
+			</div>
+		</template>
+		<template id="note-preview">
+			<div class="c-note-preview">
+				<div class="o-from-markdown"></div>
+			</div>
+		</template>
+		<template id="note-edit">
+			<div class="c-note-edit">
+				<form class="c-note-edit__form">
+					<label class="u-offscreen" for="note-edit__title"
+						>Enter a title for your note</label
+					>
+					<input id="note-edit__title" type="text" name="title" />
+					<label class="u-offscreen" for="note-edit__body"
+						>Enter the body for your note</label
+					>
+					<textarea id="note-edit__body" name="body"></textarea>
+				</form>
+				<div class="c-note-edit__preview">
+					<div class="c-note-edit__menu" role="menubar">
+						<button class="c-note-edit__done" role="menuitem">
+							<img
+								src="/checkmark.svg"
+								width="14px"
+								height="10px"
+								alt=""
+								role="presentation"
+							/>
+							Done
+						</button>
+						<button class="c-note-edit__delete" role="menuitem">
+							<img
+								src="/cross.svg"
+								width="10px"
+								height="10px"
+								alt=""
+								role="presentation"
+							/>
+							Delete
+						</button>
+					</div>
+					<div class="c-note-edit__label-preview" role="status">Preview</div>
+					<h1 class="c-note-edit__note-title"></h1>
+				</div>
+			</div>
+		</template>
+	</body>
+</html>
diff --git a/moq/public/style.css b/moq/public/style.css
new file mode 100644
index 0000000..c60ff4a
--- /dev/null
+++ b/moq/public/style.css
@@ -0,0 +1,674 @@
+*,
+*:before,
+*:after {
+	box-sizing: border-box;
+}
+ul[class],
+ol[class] {
+	padding: 0;
+}
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+	margin: 0;
+}
+body {
+	min-height: 100vh;
+	scroll-behavior: smooth;
+	text-rendering: optimizeSpeed;
+	line-height: 1.5;
+}
+ul[class],
+ol[class] {
+	list-style: none;
+}
+a:not([class]) {
+	text-decoration-skip-ink: auto;
+}
+img {
+	max-width: 100%;
+	display: block;
+}
+article > * + * {
+	margin-block-start: 1em;
+}
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+@media (prefers-reduced-motion: reduce) {
+	* {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+:root {
+	--main-border-color: #ddd;
+	--primary-border: #037dba;
+	--gray-20: #404346;
+	--gray-60: #8a8d91;
+	--gray-70: #bcc0c4;
+	--gray-80: #c9ccd1;
+	--gray-90: #e4e6eb;
+	--gray-95: #f0f2f5;
+	--gray-100: #f5f7fa;
+	--primary-blue: #037dba;
+	--secondary-blue: #0396df;
+	--tertiary-blue: #c6efff;
+	--flash-blue: #4cf7ff;
+	--outline-blue: rgba(4, 164, 244, 0.6);
+	--navy-blue: #035e8c;
+	--red-25: #bd0d2a;
+	--secondary-text: #65676b;
+	--white: #fff;
+	--yellow: #fffae1;
+	--outline-box-shadow: 0 0 0 2px var(--outline-blue);
+	--outline-box-shadow-contrast: 0 0 0 2px var(--navy-blue);
+	--sans-serif: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		Ubuntu, Helvetica, sans-serif;
+	--monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+		monospace;
+}
+html {
+	font-size: 100%;
+}
+body {
+	font-family: var(--sans-serif);
+	background: var(--gray-100);
+	font-weight: 400;
+	line-height: 1.75;
+}
+.c-main {
+	display: flex;
+	height: 100vh;
+	width: 100%;
+	overflow: hidden;
+}
+.c-main__column {
+	height: 100%;
+}
+.c-main__column:last-child {
+	flex-grow: 1;
+}
+.c-note-view {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.c-note-none {
+	font-size: 1.5rem;
+	margin-inline: 20px 20px;
+}
+.c-note-skeleton-title.c-note-skeleton-title,
+.c-note-edit__note-title,
+.c-note__header h1 {
+	line-height: 1.3;
+	flex-grow: 1;
+	overflow-wrap: break-word;
+	margin-inline-start: 12px;
+}
+.c-note-skeleton-preview,
+.c-note-preview {
+	margin-block-start: 50px;
+}
+.c-note-skeleton-display__header,
+.c-note__header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap-reverse;
+	margin-inline-start: -12px;
+}
+.c-note-skeleton-display,
+.c-note {
+	background: var(--white);
+	box-shadow:
+		0 0 5px #0000001a,
+		0 0 1px #0000001a;
+	border-radius: 8px;
+	height: 95%;
+	width: 95%;
+	min-width: 400px;
+	padding: 8%;
+	overflow-y: auto;
+}
+.c-note__menu {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-grow: 1;
+}
+.c-note__updated {
+	color: var(--secondary-text);
+	white-space: nowrap;
+	margin-inline-start: 12px;
+}
+.o-from-markdown h1,
+.o-from-markdown h2,
+.o-from-markdown h3,
+.o-from-markdown h4,
+.o-from-markdown h5 {
+	margin-block: 2rem 0.7rem;
+	margin-inline: 0;
+}
+.o-from-markdown blockquote {
+	font-style: italic;
+	color: var(--gray-20);
+	border-left: 3px solid var(--gray-80);
+	padding-left: 10px;
+}
+.o-from-markdown p {
+	margin-bottom: 16px;
+}
+.o-from-markdown img {
+	width: 100%;
+}
+.c-note-skeleton-edit,
+.c-note-edit {
+	background: var(--white);
+	display: flex;
+	height: 100%;
+	width: 100%;
+	padding: 58px;
+	overflow-y: auto;
+	margin-bottom: 20px;
+}
+.c-note-skeleton-edit__form,
+.c-note-edit__form {
+	display: flex;
+	flex-direction: column;
+	width: 400px;
+	flex-shrink: 0;
+	position: sticky;
+	top: 0;
+}
+.c-note-skeleton-edit__preview,
+.c-note-edit__preview {
+	margin-inline-start: 40px;
+	width: 100%;
+}
+.c-note-skeleton-edit__menu,
+.c-note-edit__menu {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	margin-bottom: 12px;
+}
+.c-note-edit__form input,
+.c-note-edit__form textarea {
+	background: none;
+	border: 1px solid var(--gray-70);
+	border-radius: 2px;
+	font-family: var(--monospace);
+	font-size: 0.8rem;
+	padding: 12px;
+	outline-style: none;
+}
+.c-note-edit__form input:focus,
+.c-note-edit__form textarea:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+.c-note-edit__form input {
+	height: 44px;
+	margin-bottom: 16px;
+}
+.c-note-edit__form textarea {
+	height: 100%;
+	max-width: 400px;
+}
+.c-note-edit__done,
+.c-note-edit__delete {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-radius: 100px;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+	padding: 6px 20px 8px;
+	cursor: pointer;
+	font-weight: 700;
+	margin-inline-start: 12px;
+	outline-style: none;
+	transition: all 0.2s ease-in-out;
+}
+.c-note-edit__done:disabled,
+.c-note-edit__delete:disabled {
+	opacity: 0.5;
+}
+.c-note-edit__done[disabled],
+.c-note-edit__delete[disabled] {
+	opacity: 0.5;
+}
+.c-note-edit__done > img,
+.c-note-edit__delete > img {
+	margin-inline-end: 12px;
+}
+.c-note-edit__done {
+	border: none;
+	background: var(--primary-blue);
+	color: var(--white);
+}
+.c-note-edit__done:focus {
+	box-shadow: var(--outline-box-shadow-contrast);
+}
+.c-note-edit__done:hover:not([disabled]) {
+	background: var(--secondary-blue);
+}
+.c-note-edit__done > img {
+	width: 14px;
+}
+.c-note-edit__delete {
+	border: 1px solid var(--red-25);
+	background: var(--white);
+	color: var(--red-25);
+}
+.c-note-edit__delete:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+.c-note-edit__delete:hover:not([disabled]) {
+	background: var(--red-25);
+	color: var(--white);
+}
+.c-note-edit__delete:hover:not([disabled]) img {
+	filter: grayscale(1) invert(1) brightness(2);
+}
+.c-note-edit__delete > img {
+	width: 10px;
+}
+.c-note-edit__label-preview {
+	display: inline-block;
+	border-radius: 100px;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	font-weight: 700;
+	padding: 4px 14px;
+	margin-bottom: 20px;
+	background: rgba(38, 183, 255, 0.15);
+	color: var(--primary-blue);
+}
+.c-logo {
+	height: 20px;
+	width: 22px;
+	margin-inline-end: 10px;
+}
+.c-sidebar {
+	background: var(--white);
+	box-shadow:
+		0 8px 24px #0000001a,
+		0 2px 2px #0000001a;
+	overflow-y: scroll;
+	z-index: 1000;
+	flex-shrink: 0;
+	max-width: 350px;
+	min-width: 250px;
+	width: 30%;
+}
+.c-sidebar__header {
+	letter-spacing: 0.15em;
+	text-transform: uppercase;
+	padding: 36px 16px 16px;
+	display: flex;
+	align-items: center;
+}
+.c-sidebar__menu {
+	padding: 0 16px 16px;
+	display: flex;
+	justify-content: space-between;
+}
+.c-sidebar__menu > .c-search-field {
+	position: relative;
+	flex-grow: 1;
+}
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+.c-spinner {
+	display: inline-block;
+	transition: opacity linear 0.1s 0.2s;
+	width: 20px;
+	height: 20px;
+	border: 3px solid rgba(80, 80, 80, 0.5);
+	border-radius: 50%;
+	border-top-color: #fff;
+	animation: spin 1s ease-in-out infinite;
+	opacity: 0;
+}
+.c-spinner--active {
+	opacity: 1;
+}
+.c-search-field .c-spinner {
+	position: absolute;
+	right: 10px;
+	top: 10px;
+}
+.c-search-field input {
+	padding: 0 16px;
+	border-radius: 100px;
+	border: 1px solid var(--gray-90);
+	width: 100%;
+	height: 100%;
+	outline-style: none;
+}
+.c-search-field input:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+.c-edit-button {
+	border-radius: 100px;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+	padding: 6px 20px 8px;
+	cursor: pointer;
+	font-weight: 700;
+	outline-style: none;
+}
+.js\:c-edit-button--new {
+	background: var(--primary-blue);
+	color: var(--white);
+	border: none;
+	margin-inline-start: 6px;
+	transition: all 0.2s ease-in-out;
+}
+.js\:c-edit-button--new:hover {
+	background: var(--secondary-blue);
+}
+.js\:c-edit-button--new:focus {
+	box-shadow: var(--outline-box-shadow-contrast);
+}
+.js\:c-edit-button--update {
+	background: var(--white);
+	color: var(--primary-blue);
+	border: 1px solid var(--primary-blue);
+	margin-inline-start: 12px;
+	transition: all 0.1s ease-in-out;
+}
+.js\:c-edit-button--update:disabled {
+	opacity: 0.5;
+}
+.js\:c-edit-button--update:hover:not([disabled]) {
+	background: var(--primary-blue);
+	color: var(--white);
+}
+.js\:c-edit-button--update:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+.c-note-skeleton-edit__done,
+.c-note-skeleton-edit__delete,
+.c-note-skeleton-edit__title,
+.c-note-skeleton-edit__body,
+.c-note-skeleton-display__done,
+.c-note-skeleton-preview div,
+.c-note-skeleton-title.c-note-skeleton-title,
+.c-brief-list-skeleton__brief {
+	height: 100%;
+	background-color: #eee;
+	background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
+	background-size: 200px 100%;
+	background-repeat: no-repeat;
+	border-radius: 4px;
+	display: block;
+	line-height: 1;
+	width: 100%;
+	animation: shimmer 1.2s ease-in-out infinite;
+	color: transparent;
+}
+.c-note-skeleton-edit__done:after,
+.c-note-skeleton-edit__delete:after,
+.c-note-skeleton-edit__title:after,
+.c-note-skeleton-edit__body:after,
+.c-note-skeleton-display__done:after,
+.c-note-skeleton-preview div:after,
+.c-note-skeleton-title:after,
+.c-brief-list-skeleton__brief:after {
+	content: 'Loading...';
+}
+.c-note-skeleton-edit__done:first-of-type,
+.c-note-skeleton-edit__delete:first-of-type,
+.c-note-skeleton-edit__title:first-of-type,
+.c-note-skeleton-edit__body:first-of-type,
+.c-note-skeleton-display__done:first-of-type,
+.c-note-skeleton-preview div:first-of-type,
+.c-note-skeleton-title:first-of-type,
+.c-brief-list-skeleton__brief:first-of-type {
+	margin: 0;
+}
+.c-note-skeleton-edit__done,
+.c-note-skeleton-edit__delete,
+.c-note-skeleton-display__done {
+	border-radius: 100px;
+	padding: 6px 20px 8px;
+	width: auto;
+}
+ul.c-brief-list,
+ul.c-brief-list-skeleton {
+	padding: 16px 0;
+}
+.c-brief-list > li,
+.c-brief-list-skeleton > li {
+	padding: 0 16px;
+}
+.c-brief-list-skeleton > * + * {
+	margin-block-start: 0.8em;
+}
+.c-brief-list-skeleton__brief {
+	position: relative;
+	margin-bottom: 12px;
+	padding: 16px;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	max-height: 100px;
+	height: 5em;
+}
+.c-brief-empty {
+	padding: 16px;
+}
+.c-brief-list > * + * {
+	margin-block-start: 0.8em;
+}
+.c-brief {
+	position: relative;
+	margin-bottom: 12px;
+	padding: 16px;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	max-height: 100px;
+	transition: max-height 0.25s ease-out;
+	transform: scale(1);
+}
+.c-brief:has(.c-brief__summary-state:checked) {
+	max-height: 300px;
+	transition: max-height 0.5s ease;
+}
+.c-brief.js\:c-brief--flash {
+	animation-name: flash;
+	animation-duration: 0.6s;
+}
+.c-brief header {
+	z-index: 1;
+	width: 85%;
+	pointer-events: none;
+}
+.c-brief strong {
+	display: block;
+	font-size: 1.25rem;
+	line-height: 1.2;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.c-brief time {
+	font-size: 0.8rem;
+}
+.c-brief__open {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	z-index: 0;
+	border: 1px solid transparent;
+	border-radius: 6px;
+	text-align: start;
+	background-color: var(--gray-95);
+	cursor: pointer;
+	outline-style: none;
+	color: transparent;
+	font-size: 0;
+}
+.c-brief__open:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+.c-brief__open:hover {
+	background-color: var(--gray-90);
+}
+.c-brief__open.c-brief--active {
+	background-color: var(--tertiary-blue);
+	border: 1px solid var(--primary-border);
+}
+.c-brief__open.c-brief--pending {
+	background-color: var(--gray-80);
+}
+.c-brief__no-content {
+	font-style: italic;
+}
+.c-brief__summary-state {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+.c-brief__summary-state:checked ~ .c-brief__summary-toggle svg {
+	transform: rotate(-180deg);
+}
+.c-brief__summary-state:checked ~ .c-brief__summary {
+	transform: translateY(5px);
+	opacity: 1;
+}
+.c-brief__summary-toggle {
+	z-index: 2;
+	border-radius: 50%;
+	height: 24px;
+	border: 1px solid var(--gray-60);
+	flex-shrink: 0;
+	visibility: hidden;
+	opacity: 0;
+	cursor: pointer;
+	transition:
+		visibility 0s linear 20ms,
+		opacity 0.3s;
+	outline-style: none;
+}
+.c-brief__summary-state:focus ~ .c-brief__summary-toggle {
+	box-shadow: var(--outline-box-shadow);
+}
+.c-brief__open:hover + .c-brief__summary-toggle,
+.c-brief__open:focus + .c-brief__summary-toggle,
+.c-brief__summary-toggle:hover,
+.c-brief__summary-toggle:focus {
+	visibility: visible;
+	opacity: 1;
+	transition:
+		visibility 0s linear 0s,
+		opacity 0.3s;
+}
+.c-brief__summary-toggle svg {
+	opacity: 0.8;
+	margin: 0.15rem 0.3rem;
+	transition: all 0.25s ease-in-out;
+	font-size: 0.8rem;
+}
+.c-brief__summary {
+	pointer-events: none;
+	z-index: 2;
+	flex: 1 1 250px;
+	position: relative;
+	overflow: hidden;
+	opacity: 0;
+	top: -5px;
+	transition:
+		transform 0.25s ease-out,
+		opacity 0.25s ease-in;
+}
+.c-note-skeleton-title.c-note-skeleton-title {
+	height: 3rem;
+	width: 65%;
+	margin-inline: 12px 1em;
+}
+.c-note-skeleton-preview > * + * {
+	margin-block-start: 0.8em;
+}
+.c-note-skeleton-preview div {
+	height: 1.5em;
+}
+.c-note-skeleton-display__done {
+	width: 8em;
+	height: 2.5em;
+}
+.c-note-skeleton-edit__form > * + * {
+	margin-block-start: 0.8em;
+}
+.c-note-skeleton-edit__title {
+	height: 3rem;
+}
+.c-note-skeleton-edit__body {
+	height: 100%;
+}
+.c-note-skeleton-edit__done,
+.c-note-skeleton-edit__delete {
+	width: 8em;
+	height: 2.5em;
+}
+.c-note-skeleton-edit__delete {
+	margin-inline: 12px 0;
+}
+@keyframes shimmer {
+	0% {
+		background-position: -200px 0;
+	}
+	to {
+		background-position: calc(200px + 100%) 0;
+	}
+}
+@keyframes flash {
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	50% {
+		transform: scale(1.05);
+		opacity: 0.9;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+.u-offscreen {
+	border: 0;
+	clip: rect(0, 0, 0, 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	width: 1px;
+	position: absolute;
+}
diff --git a/moq/reference/.gitignore b/moq/reference/.gitignore
new file mode 100644
index 0000000..1dcbbc1
--- /dev/null
+++ b/moq/reference/.gitignore
@@ -0,0 +1,9 @@
+# dependencies
+/node_modules
+
+# Temp
+gitignore
+
+# System Files
+.DS_Store
+
diff --git a/moq/reference/.prettierignore b/moq/reference/.prettierignore
new file mode 100644
index 0000000..7ca48a3
--- /dev/null
+++ b/moq/reference/.prettierignore
@@ -0,0 +1,4 @@
+package-lock.json
+pnpm-lock.yaml
+
+public/main.js
diff --git a/moq/reference/.prettierrc.json b/moq/reference/.prettierrc.json
new file mode 100644
index 0000000..2e97b3b
--- /dev/null
+++ b/moq/reference/.prettierrc.json
@@ -0,0 +1,9 @@
+{
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"semi": true,
+	"singleQuote": true,
+	"tabWidth": 2,
+	"trailingComma": "es5",
+	"useTabs": true
+}
diff --git a/moq/reference/README.md b/moq/reference/README.md
new file mode 100644
index 0000000..9a7b8fc
--- /dev/null
+++ b/moq/reference/README.md
@@ -0,0 +1,45 @@
+A moq (mock-up/maquette) page to explore the [React Server Components Demo](https://github.com/reactjs/server-components-demo) use of [`style.css`](https://github.com/reactjs/server-components-demo/blob/main/public/style.css).
+
+It serves as the visual reference implementation for the port's styling with [Sass](https://sass-lang.com/).
+
+Rather than launching the full React application this is just a page that cobbles together the DOM client side from [`<template>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) elements based on what it finds in [`location.href`](https://developer.mozilla.org/en-US/docs/Web/API/Location/href).
+The server is used to handle [`Cache-Control`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) headers; discouraging the caching of assets that are intentionally volatile while encouraging caching of the rest.
+
+```shell
+$ pnpm i
+
+Lockfile is up to date, resolution step is skipped
+Packages: +93
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+Progress: resolved 93, reused 93, downloaded 0, added 93, done
+
+dependencies:
++ polka 0.5.2
++ regexparam 3.0.0
++ sirv 2.0.4
+
+devDependencies:
++ @rollup/plugin-commonjs 25.0.7
++ @rollup/plugin-node-resolve 15.2.3
++ @rollup/plugin-terser 0.4.4
++ @types/node 20.11.22
++ @types/polka 0.5.7
++ @types/sanitize-html 2.11.0
++ marked 12.0.0
++ nanoid 5.0.6
++ prettier 3.2.5
++ rollup 4.12.0
++ sanitize-html 2.12.1
++ typescript 5.3.3
+
+Done in 488ms
+
+$ pnpm run serve
+
+> reference@0.0.0 serve moq/reference
+> node index.js
+
+> Running on localhost:3040
+```
+
+Once the server is running open [`http://localhost:3040/map`](http://localhost:3040/map) which will list a series of links with hardcoded `href`s which navigate to a specific “page view”. Beyond that the page isn't interactive (except for the expansion toggles on the note briefs).
diff --git a/moq/reference/index.js b/moq/reference/index.js
new file mode 100644
index 0000000..7c14b55
--- /dev/null
+++ b/moq/reference/index.js
@@ -0,0 +1,41 @@
+// @ts-check
+// file: index.js
+import polka from 'polka';
+import sirv from 'sirv';
+import { parse } from 'regexparam';
+
+/** @typedef { import('node:fs').Stats } Stats */
+/** @typedef { import('node:http').ServerResponse } ServerResponse */
+
+const pathNoStore = ['/', '/map(.html)?', '/main.js', '/style.css'];
+const patternNoStore = pathNoStore.map((uriTemplate) => parse(uriTemplate));
+
+/**
+ * @param { ServerResponse } res
+ * @param { string } pathname
+ * @param { Stats } _stats
+ */
+function setHeaders(res, pathname, _stats) {
+	const value = patternNoStore.some((route) => route.pattern.test(pathname))
+		? 'no-store'
+		: 'public,max-age=31536000,immutable';
+	res.setHeader('Cache-Control', value);
+}
+
+const assets = sirv('public', {
+	single: 'moq-page.html',
+	setHeaders,
+});
+
+const port = 3040;
+
+polka()
+	.use(assets)
+	.listen(port, () => {
+		console.log(`> Running on localhost:${port}`);
+	});
+
+/*
+ * http://localhost:3040/map (map.html) shows the links to the mapped out variations
+ * for everything else page.html does the work
+ */
diff --git a/moq/reference/package.json b/moq/reference/package.json
new file mode 100644
index 0000000..7db4445
--- /dev/null
+++ b/moq/reference/package.json
@@ -0,0 +1,37 @@
+{
+	"name": "reference",
+	"version": "0.0.0",
+	"description": "",
+	"type": "module",
+	"main": "index.js",
+	"scripts": {
+		"seed": "node seed-data.js",
+		"serve": "node index.js",
+		"build": "./node_modules/.bin/rollup -c rollup.config.mjs",
+		"format": "prettier . --write",
+		"lint:types": "./node_modules/.bin/tsc --noEmit -p src/tsconfig.json",
+		"server:types": "./node_modules/.bin/tsc --noEmit -p tsconfig.json"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"dependencies": {
+		"polka": "^0.5.2",
+		"regexparam": "^3.0.0",
+		"sirv": "^2.0.4"
+	},
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@types/node": "^20.11.22",
+		"@types/polka": "^0.5.7",
+		"@types/sanitize-html": "^2.11.0",
+		"marked": "^12.0.0",
+		"nanoid": "^5.0.6",
+		"prettier": "^3.2.5",
+		"rollup": "^4.12.0",
+		"sanitize-html": "^2.12.1",
+		"typescript": "^5.3.3"
+	}
+}
diff --git a/moq/reference/pnpm-lock.yaml b/moq/reference/pnpm-lock.yaml
new file mode 100644
index 0000000..e1a660c
--- /dev/null
+++ b/moq/reference/pnpm-lock.yaml
@@ -0,0 +1,761 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  polka:
+    specifier: ^0.5.2
+    version: 0.5.2
+  regexparam:
+    specifier: ^3.0.0
+    version: 3.0.0
+  sirv:
+    specifier: ^2.0.4
+    version: 2.0.4
+
+devDependencies:
+  '@rollup/plugin-commonjs':
+    specifier: ^25.0.7
+    version: 25.0.7(rollup@4.12.0)
+  '@rollup/plugin-node-resolve':
+    specifier: ^15.2.3
+    version: 15.2.3(rollup@4.12.0)
+  '@rollup/plugin-terser':
+    specifier: ^0.4.4
+    version: 0.4.4(rollup@4.12.0)
+  '@types/node':
+    specifier: ^20.11.22
+    version: 20.11.22
+  '@types/polka':
+    specifier: ^0.5.7
+    version: 0.5.7
+  '@types/sanitize-html':
+    specifier: ^2.11.0
+    version: 2.11.0
+  marked:
+    specifier: ^12.0.0
+    version: 12.0.0
+  nanoid:
+    specifier: ^5.0.6
+    version: 5.0.6
+  prettier:
+    specifier: ^3.2.5
+    version: 3.2.5
+  rollup:
+    specifier: ^4.12.0
+    version: 4.12.0
+  sanitize-html:
+    specifier: ^2.12.1
+    version: 2.12.1
+  typescript:
+    specifier: ^5.3.3
+    version: 5.3.3
+
+packages:
+
+  /@arr/every@1.0.1:
+    resolution: {integrity: sha512-UQFQ6SgyJ6LX42W8rHCs8KVc0JS0tzVL9ct4XYedJukskYVWTo49tNiMEK9C2HTyarbNiT/RVIRSY82vH+6sTg==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /@jridgewell/gen-mapping@0.3.4:
+    resolution: {integrity: sha512-Oud2QPM5dHviZNn4y/WhhYKSXksv+1xLEIsNrAbGcFzUN3ubqWRFT5gwPchNc5NuzILOU4tPBDTZ4VwhL8Y7cw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.23
+    dev: true
+
+  /@jridgewell/resolve-uri@3.1.2:
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/set-array@1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/source-map@0.3.5:
+    resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.4
+      '@jridgewell/trace-mapping': 0.3.23
+    dev: true
+
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true
+
+  /@jridgewell/trace-mapping@0.3.23:
+    resolution: {integrity: sha512-9/4foRoUKp8s96tSkh8DlAAc5A0Ty8vLXld+l9gjKKY6ckwI8G15f0hskGmuLZu78ZlGa1vtsfOa+lnB4vG6Jg==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
+  /@polka/url@0.5.0:
+    resolution: {integrity: sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==}
+    dev: false
+
+  /@polka/url@1.0.0-next.24:
+    resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
+    dev: false
+
+  /@rollup/plugin-commonjs@25.0.7(rollup@4.12.0):
+    resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.12.0)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      glob: 8.1.0
+      is-reference: 1.2.1
+      magic-string: 0.30.7
+      rollup: 4.12.0
+    dev: true
+
+  /@rollup/plugin-node-resolve@15.2.3(rollup@4.12.0):
+    resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.12.0)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-builtin-module: 3.2.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+      rollup: 4.12.0
+    dev: true
+
+  /@rollup/plugin-terser@0.4.4(rollup@4.12.0):
+    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      rollup: 4.12.0
+      serialize-javascript: 6.0.2
+      smob: 1.4.1
+      terser: 5.28.1
+    dev: true
+
+  /@rollup/pluginutils@5.1.0(rollup@4.12.0):
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 4.12.0
+    dev: true
+
+  /@rollup/rollup-android-arm-eabi@4.12.0:
+    resolution: {integrity: sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-android-arm64@4.12.0:
+    resolution: {integrity: sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-arm64@4.12.0:
+    resolution: {integrity: sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-x64@4.12.0:
+    resolution: {integrity: sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.12.0:
+    resolution: {integrity: sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.12.0:
+    resolution: {integrity: sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.12.0:
+    resolution: {integrity: sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-gnu@4.12.0:
+    resolution: {integrity: sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.12.0:
+    resolution: {integrity: sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.12.0:
+    resolution: {integrity: sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.12.0:
+    resolution: {integrity: sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.12.0:
+    resolution: {integrity: sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.12.0:
+    resolution: {integrity: sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@types/body-parser@1.19.5:
+    resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
+    dependencies:
+      '@types/connect': 3.4.38
+      '@types/node': 20.11.22
+    dev: true
+
+  /@types/connect@3.4.38:
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+    dependencies:
+      '@types/node': 20.11.22
+    dev: true
+
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+    dev: true
+
+  /@types/express-serve-static-core@4.17.43:
+    resolution: {integrity: sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==}
+    dependencies:
+      '@types/node': 20.11.22
+      '@types/qs': 6.9.12
+      '@types/range-parser': 1.2.7
+      '@types/send': 0.17.4
+    dev: true
+
+  /@types/express@4.17.21:
+    resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
+    dependencies:
+      '@types/body-parser': 1.19.5
+      '@types/express-serve-static-core': 4.17.43
+      '@types/qs': 6.9.12
+      '@types/serve-static': 1.15.5
+    dev: true
+
+  /@types/http-errors@2.0.4:
+    resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
+    dev: true
+
+  /@types/mime@1.3.5:
+    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
+    dev: true
+
+  /@types/mime@3.0.4:
+    resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
+    dev: true
+
+  /@types/node@20.11.22:
+    resolution: {integrity: sha512-/G+IxWxma6V3E+pqK1tSl2Fo1kl41pK1yeCyDsgkF9WlVAme4j5ISYM2zR11bgLFJGLN5sVK40T4RJNuiZbEjA==}
+    dependencies:
+      undici-types: 5.26.5
+    dev: true
+
+  /@types/polka@0.5.7:
+    resolution: {integrity: sha512-TH8CDXM8zoskPCNmWabtK7ziGv9Q21s4hMZLVYK5HFEfqmGXBqq/Wgi7jNELWXftZK/1J/9CezYa06x1RKeQ+g==}
+    dependencies:
+      '@types/express': 4.17.21
+      '@types/express-serve-static-core': 4.17.43
+      '@types/node': 20.11.22
+      '@types/trouter': 3.1.4
+    dev: true
+
+  /@types/qs@6.9.12:
+    resolution: {integrity: sha512-bZcOkJ6uWrL0Qb2NAWKa7TBU+mJHPzhx9jjLL1KHF+XpzEcR7EXHvjbHlGtR/IsP1vyPrehuS6XqkmaePy//mg==}
+    dev: true
+
+  /@types/range-parser@1.2.7:
+    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+    dev: true
+
+  /@types/resolve@1.20.2:
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+    dev: true
+
+  /@types/sanitize-html@2.11.0:
+    resolution: {integrity: sha512-7oxPGNQHXLHE48r/r/qjn7q0hlrs3kL7oZnGj0Wf/h9tj/6ibFyRkNbsDxaBBZ4XUZ0Dx5LGCyDJ04ytSofacQ==}
+    dependencies:
+      htmlparser2: 8.0.2
+    dev: true
+
+  /@types/send@0.17.4:
+    resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
+    dependencies:
+      '@types/mime': 1.3.5
+      '@types/node': 20.11.22
+    dev: true
+
+  /@types/serve-static@1.15.5:
+    resolution: {integrity: sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==}
+    dependencies:
+      '@types/http-errors': 2.0.4
+      '@types/mime': 3.0.4
+      '@types/node': 20.11.22
+    dev: true
+
+  /@types/trouter@3.1.4:
+    resolution: {integrity: sha512-4YIL/2AvvZqKBWenjvEpxpblT2KGO6793ipr5QS7/6DpQ3O3SwZGgNGWezxf3pzeYZc24a2pJIrR/+Jxh/wYNQ==}
+    dev: true
+
+  /acorn@8.11.3:
+    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
+
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
+  /buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    dev: true
+
+  /builtin-modules@3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    dev: true
+
+  /commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+    dev: true
+
+  /deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+    dev: true
+
+  /domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: true
+
+  /domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: true
+
+  /domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+    dev: true
+
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+    dev: true
+
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: true
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+    dev: true
+
+  /glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.6
+      once: 1.4.0
+    dev: true
+
+  /hasown@2.0.1:
+    resolution: {integrity: sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+    dev: true
+
+  /htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      entities: 4.5.0
+    dev: true
+
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: true
+
+  /is-builtin-module@3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
+  /is-core-module@2.13.1:
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+    dependencies:
+      hasown: 2.0.1
+    dev: true
+
+  /is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+    dev: true
+
+  /is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: true
+
+  /magic-string@0.30.7:
+    resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
+  /marked@12.0.0:
+    resolution: {integrity: sha512-Vkwtq9rLqXryZnWaQc86+FHLC6tr/fycMfYAhiOIXkrNmeGAyhSxjqu0Rs1i0bBqw5u0S7+lV9fdH2ZSVaoa0w==}
+    engines: {node: '>= 18'}
+    hasBin: true
+    dev: true
+
+  /matchit@1.1.0:
+    resolution: {integrity: sha512-+nGYoOlfHmxe5BW5tE0EMJppXEwdSf8uBA1GTZC7Q77kbT35+VKLYJMzVNWCHSsga1ps1tPYFtFyvxvKzWVmMA==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@arr/every': 1.0.1
+    dev: false
+
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /mrmime@2.0.0:
+    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: true
+
+  /nanoid@5.0.6:
+    resolution: {integrity: sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    dev: true
+
+  /once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: true
+
+  /parse-srcset@1.0.2:
+    resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
+    dev: true
+
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
+
+  /picocolors@1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+    dev: true
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: true
+
+  /polka@0.5.2:
+    resolution: {integrity: sha512-FVg3vDmCqP80tOrs+OeNlgXYmFppTXdjD5E7I4ET1NjvtNmQrb1/mJibybKkb/d4NA7YWAr1ojxuhpL3FHqdlw==}
+    dependencies:
+      '@polka/url': 0.5.0
+      trouter: 2.0.1
+    dev: false
+
+  /postcss@8.4.35:
+    resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
+  /prettier@3.2.5:
+    resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
+  /randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
+  /regexparam@3.0.0:
+    resolution: {integrity: sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.13.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /rollup@4.12.0:
+    resolution: {integrity: sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.12.0
+      '@rollup/rollup-android-arm64': 4.12.0
+      '@rollup/rollup-darwin-arm64': 4.12.0
+      '@rollup/rollup-darwin-x64': 4.12.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.12.0
+      '@rollup/rollup-linux-arm64-gnu': 4.12.0
+      '@rollup/rollup-linux-arm64-musl': 4.12.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.12.0
+      '@rollup/rollup-linux-x64-gnu': 4.12.0
+      '@rollup/rollup-linux-x64-musl': 4.12.0
+      '@rollup/rollup-win32-arm64-msvc': 4.12.0
+      '@rollup/rollup-win32-ia32-msvc': 4.12.0
+      '@rollup/rollup-win32-x64-msvc': 4.12.0
+      fsevents: 2.3.3
+    dev: true
+
+  /safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+    dev: true
+
+  /sanitize-html@2.12.1:
+    resolution: {integrity: sha512-Plh+JAn0UVDpBRP/xEjsk+xDCoOvMBwQUf/K+/cBAVuTbtX8bj2VB7S1sL1dssVpykqp0/KPSesHrqXtokVBpA==}
+    dependencies:
+      deepmerge: 4.3.1
+      escape-string-regexp: 4.0.0
+      htmlparser2: 8.0.2
+      is-plain-object: 5.0.0
+      parse-srcset: 1.0.2
+      postcss: 8.4.35
+    dev: true
+
+  /serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+    dependencies:
+      randombytes: 2.1.0
+    dev: true
+
+  /sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.24
+      mrmime: 2.0.0
+      totalist: 3.0.1
+    dev: false
+
+  /smob@1.4.1:
+    resolution: {integrity: sha512-9LK+E7Hv5R9u4g4C3p+jjLstaLe11MDsL21UpYaCNmapvMkYhqCV4A/f/3gyH8QjMyh6l68q9xC85vihY9ahMQ==}
+    dev: true
+
+  /source-map-js@1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+    dev: true
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /terser@5.28.1:
+    resolution: {integrity: sha512-wM+bZp54v/E9eRRGXb5ZFDvinrJIOaTapx3WUokyVGZu5ucVCK55zEgGd5Dl2fSr3jUo5sDiERErUWLY6QPFyA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/source-map': 0.3.5
+      acorn: 8.11.3
+      commander: 2.20.3
+      source-map-support: 0.5.21
+    dev: true
+
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /trouter@2.0.1:
+    resolution: {integrity: sha512-kr8SKKw94OI+xTGOkfsvwZQ8mWoikZDd2n8XZHjJVZUARZT+4/VV6cacRS6CLsH9bNm+HFIPU1Zx4CnNnb4qlQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      matchit: 1.1.0
+    dev: false
+
+  /typescript@5.3.3:
+    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
+  /undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+    dev: true
+
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
diff --git a/moq/reference/public/checkmark.svg b/moq/reference/public/checkmark.svg
new file mode 100644
index 0000000..fde2dfb
--- /dev/null
+++ b/moq/reference/public/checkmark.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666504 5.17139L4.77457 9.27954L13.3334 0.720551" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/moq/reference/public/chevron-down.svg b/moq/reference/public/chevron-down.svg
new file mode 100644
index 0000000..6222f78
--- /dev/null
+++ b/moq/reference/public/chevron-down.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 5.25L5 0.75L0.5 5.25" stroke="#8A8D91" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/moq/reference/public/chevron-up.svg b/moq/reference/public/chevron-up.svg
new file mode 100644
index 0000000..fc8c193
--- /dev/null
+++ b/moq/reference/public/chevron-up.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 0.75L5 5.25L0.5 0.75" stroke="#8A8D91" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/moq/reference/public/cross.svg b/moq/reference/public/cross.svg
new file mode 100644
index 0000000..3a10858
--- /dev/null
+++ b/moq/reference/public/cross.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M 12 0 L 0 12 M 0 0 L 12 12" stroke="#BD0D2A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/moq/reference/public/favicon.ico b/moq/reference/public/favicon.ico
new file mode 100644
index 0000000..d80eeb8
Binary files /dev/null and b/moq/reference/public/favicon.ico differ
diff --git a/moq/reference/public/logo.svg b/moq/reference/public/logo.svg
new file mode 100644
index 0000000..ea77a61
--- /dev/null
+++ b/moq/reference/public/logo.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <title>React Logo</title>
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>
diff --git a/moq/reference/public/main.js b/moq/reference/public/main.js
new file mode 100644
index 0000000..8604b8f
--- /dev/null
+++ b/moq/reference/public/main.js
@@ -0,0 +1,360 @@
+!(function () {
+	'use strict';
+	const e = document.getElementById('note-data');
+	if (!(e instanceof HTMLScriptElement))
+		throw new Error('Unable to locate "note-data" JSON content.');
+	const t = JSON.parse(e.text);
+	!Array.isArray(t) || t.length < 1 || (t[0].updatedAt = Date.now() - 72e5);
+	const n = t.reduce((e, t) => e.set(t.id, t), new Map());
+	function o(e, t) {
+		const n = e.querySelector(`#${t}`);
+		if (!(n instanceof HTMLTemplateElement))
+			throw new Error(`Can't find template for ID "${t}"`);
+		const o = n.content.firstElementChild;
+		if (!(o instanceof HTMLElement))
+			throw new Error(`Invalid root for template ID "${t}"`);
+		return o;
+	}
+	const r = {
+		locale: 'en-GB',
+		timeZone: 'UTC',
+		numberingSystem: 'latn',
+		calendar: 'gregory',
+		hour12: !1,
+	};
+	const i = 'Untitled';
+	const c = (function ({ locale: e, timeZone: t, hour12: n } = r) {
+			const o = Intl.DateTimeFormat(e, {
+				timeZone: t,
+				hour12: n,
+				dateStyle: 'medium',
+				timeStyle: 'short',
+			});
+			return function (e) {
+				const t = new Date(e);
+				return [o.format(t), t.toISOString()];
+			};
+		})(Intl.DateTimeFormat().resolvedOptions()),
+		s = (function (e) {
+			const t = o(e, 'note-preview');
+			return function (e) {
+				const n = t.cloneNode(!0),
+					o = n.querySelector('.text-with-markdown');
+				return o instanceof HTMLElement && (o.innerHTML = e), n;
+			};
+		})(document),
+		a = (function (e, t) {
+			const n = o(e, 'note-edit'),
+				r = o(e, 'note-edit__skeleton');
+			return function (o, c) {
+				if (c) return r.cloneNode(!0);
+				const s = n.cloneNode(!0),
+					a = s.querySelector('#note-title-input');
+				a instanceof HTMLInputElement && (a.value = o ? o.title : i);
+				const d = s.querySelector('.note-title');
+				d instanceof HTMLElement &&
+					(d.append(e.createTextNode(o ? o.title : i)),
+					d.insertAdjacentElement('afterend', t(o ? o.html : '')));
+				const l = s.querySelector('.note-editor-delete'),
+					u = s.querySelector('.note-editor-done');
+				if (o) {
+					const e = s.querySelector('#note-body-input');
+					e instanceof HTMLTextAreaElement && (e.textContent = o.body);
+				}
+				if (u instanceof HTMLButtonElement && l instanceof HTMLButtonElement) {
+					o || l.remove();
+					const t = o
+						? (e) => {
+								u.disabled = l.disabled = e.detail;
+							}
+						: (e) => {
+								u.disabled = e.detail;
+							};
+					e.addEventListener('moq-busy', t);
+				}
+				return s;
+			};
+		})(document, s);
+	const d = 'flash',
+		l = (function ({ locale: e, timeZone: t, hour12: n } = r) {
+			const o = Intl.DateTimeFormat(e, {
+					timeZone: t,
+					hour12: n,
+					dateStyle: 'short',
+				}),
+				i = Intl.DateTimeFormat(e, {
+					timeZone: t,
+					hour12: n,
+					timeStyle: 'short',
+				});
+			let c = new Date();
+			return function (e, t = !1) {
+				t && (c = new Date());
+				const n = new Date(e);
+				return [
+					n.getDate() === c.getDate() &&
+					n.getMonth() === c.getMonth() &&
+					n.getFullYear() === c.getFullYear()
+						? i.format(n)
+						: o.format(n),
+					n.toISOString(),
+				];
+			};
+		})(Intl.DateTimeFormat().resolvedOptions()),
+		u = (e) => 1 == (1 & e),
+		f = (e) => 2 === e,
+		m = (e) => 3 === e;
+	function p(e) {
+		const t = o(e, 'sidebar-note');
+		return function (n, o = 0) {
+			const r = t.cloneNode(!0);
+			if (r.querySelector('header') instanceof HTMLElement) {
+				const p = r.querySelector('strong');
+				if (p instanceof HTMLElement) {
+					const y = e.createTextNode(n.title);
+					p.appendChild(y);
+				}
+				const h = r.querySelector('small');
+				if (h instanceof HTMLElement) {
+					const [E] = l(n.updatedAt),
+						v = e.createTextNode(E);
+					h.appendChild(v);
+				}
+			}
+			const i = r.querySelector('.sidebar-note-excerpt');
+			if (i instanceof HTMLElement) {
+				const T = e.createTextNode(n.excerpt);
+				i.replaceChildren(T);
+			}
+			const c = r.querySelector('.sidebar-note-toggle-expand'),
+				s = [];
+			if (c instanceof HTMLButtonElement) {
+				const L = c.querySelector('[alt="expand" i]'),
+					g = c.querySelector('[alt="collapse" i]');
+				L instanceof HTMLElement &&
+					((s[0] = L), g instanceof HTMLElement && (s[1] = g));
+			}
+			i &&
+				c &&
+				2 === s.length &&
+				(c.removeChild(s[1]),
+				r.removeChild(i),
+				c.addEventListener('click', () => {
+					if (!i.parentNode)
+						return (
+							r.classList.add('note-expanded'),
+							r.append(i),
+							void c.replaceChild(s[1], s[0])
+						);
+					c.replaceChild(s[0], s[1]),
+						r.removeChild(i),
+						r.classList.remove('note-expanded');
+				}));
+			const a = r.querySelector('.sidebar-note-open');
+			if (a instanceof HTMLButtonElement) {
+				const S = u(o),
+					w = f(o) ? 'var(--gray-80)' : S ? 'var(--tertiary-blue)' : void 0,
+					b = S ? '1px solid var(--primary-border)' : void 0;
+				w && (a.style.backgroundColor = w), b && (a.style.border = b);
+			}
+			if (m(o)) {
+				function N() {
+					r.classList.add(d),
+						e.dispatchEvent(new CustomEvent('moq-busy', { detail: !0 }));
+				}
+				function q(t) {
+					if (t.animationName === d)
+						return (
+							r.classList.remove(d),
+							e.dispatchEvent(new CustomEvent('moq-busy', { detail: !1 })),
+							void setTimeout(N, 3e3)
+						);
+				}
+				r.addEventListener('animationend', q), N();
+			}
+			return r;
+		};
+	}
+	const h = (function (e) {
+			const t = o(e, 'app');
+			return function ({ newButton: e, note: n, noteList: o, searchField: r }) {
+				const i = t.cloneNode(!0),
+					c = i.querySelector('.sidebar-menu');
+				if (!c)
+					throw new Error('Failed to find ".sidebar-menu" in "app" content');
+				c.append(r), c.append(e);
+				const s = i.querySelector('nav');
+				if (!s) throw new Error('Failed to find "nav" in "app" content');
+				s.append(o);
+				const a = i.querySelector('.note-viewer');
+				if (!a)
+					throw new Error('Failed to find "note-viewer" in "app" content');
+				return a.append(n), i;
+			};
+		})(document),
+		y = (function (e) {
+			const t = o(e, 'edit-button');
+			return function (n, o = !1, r = !1) {
+				const i = t.cloneNode(!0),
+					c = e.createTextNode(n);
+				return (
+					i.appendChild(c),
+					o &&
+						i.classList.replace('edit-button--solid', 'edit-button--outline'),
+					r && i.setAttribute('disabled', ''),
+					i instanceof HTMLButtonElement &&
+						e.addEventListener('moq-busy', (e) => (i.disabled = e.detail)),
+					i
+				);
+			};
+		})(document),
+		E = (function (e, t) {
+			const n = o(e, 'note'),
+				r = o(e, 'note__skeleton'),
+				i = o(e, 'note__none');
+			return function (o, d = 0) {
+				const l = ((e) => 2 == (2 & e))(d);
+				if (((e) => 1 == (1 & e))(d)) return a(o, l);
+				if (l) return r.cloneNode(!0);
+				if (!o) return i.cloneNode(!0);
+				const u = n.cloneNode(!0),
+					f = u.querySelector('.note-title');
+				if (f instanceof HTMLElement) {
+					const t = e.createTextNode(o.title);
+					f.appendChild(t);
+				}
+				const m = u.querySelector('.note-updated-at');
+				if (m instanceof HTMLElement) {
+					const e = m.firstChild;
+					if (e instanceof Text) {
+						const [t] = c(o.updatedAt);
+						e.nodeValue = e.nodeValue + ' ' + t;
+					}
+				}
+				const p = u.querySelector('.note-menu');
+				return (
+					p instanceof HTMLElement && p.append(t('Edit')),
+					u.append(s(o.html)),
+					u
+				);
+			};
+		})(document, y),
+		v = (function (e) {
+			const t = p(e),
+				n = o(e, 'note-list__skeleton'),
+				r = o(e, 'note-list__empty'),
+				[i, c] = (function (e, t) {
+					const n = o(e, t),
+						r = n.firstElementChild;
+					if (!(r instanceof HTMLLIElement))
+						throw new Error(`Template ID "${t}" does not contain list item`);
+					return n.removeChild(r), [n, r];
+				})(e, 'note-list');
+			return function (e, o, s, a = !1, d = !1) {
+				if (a) return n.cloneNode(!0);
+				const [l, u] =
+					'string' == typeof e
+						? [void 0, e.length > 0 ? e : void 0]
+						: [Array.isArray(e) && e.length > 0 ? e : void 0, void 0];
+				if (!l) {
+					const e = r.cloneNode(!0);
+					return (
+						(e.textContent = u
+							? `Couldn't find any notes titled "${u}"`
+							: 'No notes created yet!'),
+						e
+					);
+				}
+				const f = i.cloneNode(!0),
+					m = (function (e, t, n) {
+						if (e) {
+							const o = t ? 3 : 1;
+							return n
+								? (t) => (n === t ? 2 : e === t ? o : 0)
+								: (t) => (t === e ? o : 0);
+						}
+						return n ? (e) => (e === n ? 2 : 0) : (e) => 0;
+					})(o, d, s);
+				for (const e of l) {
+					const n = c.cloneNode(!0);
+					n.append(t(e, m(e.id))), f.append(n);
+				}
+				return f;
+			};
+		})(document),
+		T = (function (e) {
+			const t = o(e, 'spinner'),
+				n = o(e, 'search-field');
+			return function (e, o = !1) {
+				const r = t.cloneNode(!0),
+					i = n.cloneNode(!0);
+				if (e) {
+					const t = i.querySelector('#sidebar-search-input');
+					if (!(t instanceof HTMLInputElement))
+						throw new Error(
+							'Failed to find "#sidebar-search-input" input in "search-field" content'
+						);
+					t.value = e;
+				}
+				return (
+					o &&
+						(r.classList.add('spinner--active'),
+						r.setAttribute('aria-busy', 'true')),
+					i.append(r),
+					i
+				);
+			};
+		})(document),
+		L = (e, t) => (e ? (t ? 3 : 1) : t ? 2 : 0);
+	document.title = 'React Notes';
+	document.querySelector('body').prepend(
+		(function ({
+			flushNote: e,
+			isEditing: o,
+			listLoading: r,
+			nextId: i,
+			noteId: c,
+			search: s,
+		}) {
+			const a = r
+				? void 0
+				: (d = (function (e) {
+							if (!e) return t;
+							const n = e.toLowerCase();
+							return t.filter((e) => e.title.toLowerCase().includes(n));
+					  })(s)).length > 0
+					? d
+					: s;
+			var d;
+			const l = c ? ((u = c), n.get(u)) : void 0;
+			var u;
+			const f = r || ('string' == typeof i && i.length > 0);
+			return h({
+				searchField: T(s, f),
+				newButton: y('New'),
+				noteList: v(a, l?.id, i, r, e),
+				note: E(l, L(o, i)),
+			});
+		})(
+			(function (e) {
+				const t = e.searchParams,
+					n = t.get('moqnextid') ?? void 0,
+					o = t.get('location') ?? void 0,
+					r = o ? JSON.parse(o) : {},
+					i = n && n.length > 0 ? n : void 0,
+					c = 'string' == typeof r.selectedId ? r.selectedId : void 0;
+				return {
+					flushNote: t.has('moqflush'),
+					isEditing: 'boolean' == typeof r.isEditing && r.isEditing,
+					listLoading: t.has('moqlistload'),
+					nextId: i && i !== c ? i : void 0,
+					noteId: c,
+					search:
+						'string' == typeof r.searchText && r.searchText.length > 0
+							? r.searchText
+							: void 0,
+				};
+			})(new URL(document.location.href))
+		)
+	);
+})();
diff --git a/moq/reference/public/map.html b/moq/reference/public/map.html
new file mode 100644
index 0000000..80dc299
--- /dev/null
+++ b/moq/reference/public/map.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en-us">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<title>Map to reference views</title>
+		<style></style>
+	</head>
+	<body>
+		<ul>
+			<!-- encodeURIComponent(JSON.stringify({ selectedId: '', isEditing: false, searchText: 'not'})) -->
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3Anull%2C%22isEditing%22%3Afalse%2C%22searchText%22%3A%22not%22%7D"
+					>First link</a
+				>
+			</li>
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3A%22%22%2C%22isEditing%22%3Afalse%2C%22searchText%22%3A%22zzz%22%7D"
+					>No search results</a
+				>
+			</li>
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3A%22%22%2C%22isEditing%22%3Afalse%2C%22searchText%22%3A%22not%22%7D&moqlistload"
+					>List Loading</a
+				>
+			</li>
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3A%22l3fdW2MshvG7GocvQ87Gx%22%2C%22isEditing%22%3Afalse%2C%22searchText%22%3A%22%22%7D"
+					>Active Note</a
+				>
+			</li>
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3A%22l3fdW2MshvG7GocvQ87Gx%22%2C%22isEditing%22%3Afalse%2C%22searchText%22%3A%22%22%7D&moqnextid=PPmPBS-X25GfKTJLGU7B8"
+					>Pending Note Preview</a
+				>
+			</li>
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3Anull%2C%22isEditing%22%3Atrue%2C%22searchText%22%3A%22%22%7D&moqnextid=PPmPBS-X25GfKTJLGU7B8"
+					>Pending Note Edit</a
+				>
+			</li>
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3Anull%2C%22isEditing%22%3Atrue%2C%22searchText%22%3A%22%22%7D"
+					>New Note</a
+				>
+			</li>
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3A%22w6PS9E_fgnOMYnEyfHzno%22%2C%22isEditing%22%3Atrue%2C%22searchText%22%3A%22%22%7D"
+					>1st note edit</a
+				>
+			</li>
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3A%22l3fdW2MshvG7GocvQ87Gx%22%2C%22isEditing%22%3Atrue%2C%22searchText%22%3A%22%22%7D&moqflush"
+					>2nd note edit (flushing)</a
+				>
+			</li>
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3A%22PPmPBS-X25GfKTJLGU7B8%22%2C%22isEditing%22%3Atrue%2C%22searchText%22%3A%22%22%7D"
+					>3rd note edit</a
+				>
+			</li>
+			<li>
+				<a
+					href="/?location=%7B%22selectedId%22%3A%22e0MhnDzAMRJ_-VELlL9Yt%22%2C%22isEditing%22%3Atrue%2C%22searchText%22%3A%22%22%7D"
+					>4th note edit</a
+				>
+			</li>
+		</ul>
+	</body>
+</html>
diff --git a/moq/reference/public/moq-page.html b/moq/reference/public/moq-page.html
new file mode 100644
index 0000000..d29e4c8
--- /dev/null
+++ b/moq/reference/public/moq-page.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<html lang="en-us">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<title>React RSC demo CSS reference</title>
+		<link rel="stylesheet" href="style.css" />
+		<script type="module" src="main.js"></script>
+		<style></style>
+	</head>
+	<body>
+		<!-- prettier-ignore -->
+		<script id="note-data" type="application/json">[{"id":"w6PS9E_fgnOMYnEyfHzno","title":"Meeting Notes","body":"This is an example note. It contains **Markdown**!","excerpt":"This is an example note. It contains Markdown!","html":"<p>This is an example note. It contains <strong>Markdown</strong>!</p>\n","createdAt":1709349242656,"updatedAt":1709349242656},{"id":"l3fdW2MshvG7GocvQ87Gx","title":"Make a thing","body":"It's very easy to make some words **bold** and other words *italic* with\nMarkdown. You can even [link to React's website!](https://www.reactjs.org).","excerpt":"It's very easy to make some words bold and other words italic with Markdown. You can even link to React's…","html":"<p>It's very easy to make some words <strong>bold</strong> and other words <em>italic</em> with\nMarkdown. You can even <a href=\"https://www.reactjs.org\">link to React's website!</a>.</p>\n","createdAt":1705960772962,"updatedAt":1705960772962},{"id":"PPmPBS-X25GfKTJLGU7B8","title":"A note with a very long title because sometimes you need more words","body":"You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing)\nnotes in this app! These note live on the server in the `notes` folder.\n\n![This app is powered by React](https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/React_Native_Logo.png/800px-React_Native_Logo.png)","excerpt":"You can write all kinds of amazing notes in this app! These note live on the server in the notes…","html":"<p>You can write all kinds of <a href=\"https://en.wikipedia.org/wiki/The_Amazing\">amazing</a>\nnotes in this app! These note live on the server in the <code>notes</code> folder.</p>\n<p><img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/React_Native_Logo.png/800px-React_Native_Logo.png\" alt=\"This app is powered by React\" /></p>\n","createdAt":1705590594948,"updatedAt":1705590594948},{"id":"e0MhnDzAMRJ_-VELlL9Yt","title":"I wrote this note today","body":"It was an excellent note.","excerpt":"It was an excellent note.","html":"<p>It was an excellent note.</p>\n","createdAt":1705316899688,"updatedAt":1705316899688}]</script>
+		<template id="app">
+			<div class="main">
+				<section class="col sidebar">
+					<section class="sidebar-header">
+						<img
+							class="logo"
+							src="logo.svg"
+							width="22px"
+							height="20px"
+							alt=""
+							role="presentation"
+						/>
+						<strong>React Notes</strong>
+					</section>
+					<section class="sidebar-menu" role="menubar"></section>
+					<nav></nav>
+				</section>
+				<section class="col note-viewer"></section>
+			</div>
+		</template>
+		<template id="search-field">
+			<form class="search" role="search">
+				<label class="offscreen" for="sidebar-search-input">
+					Search for a note by title
+				</label>
+				<input id="sidebar-search-input" placeholder="Search" />
+			</form>
+		</template>
+		<template id="spinner">
+			<div class="spinner" role="progressbar" aria-busy="false"></div>
+		</template>
+		<template id="edit-button">
+			<button class="edit-button edit-button--solid" role="menuitem"></button>
+		</template>
+		<template id="note-list">
+			<ul class="notes-list">
+				<li></li>
+			</ul>
+		</template>
+		<template id="note-list__empty">
+			<div class="notes-empty"></div>
+		</template>
+		<template id="note-list__skeleton">
+			<div>
+				<ul class="notes-list skeleton-container">
+					<li class="v-stack">
+						<div
+							class="sidebar-note-list-item skeleton"
+							style="height: 5em"
+						></div>
+					</li>
+					<li class="v-stack">
+						<div
+							class="sidebar-note-list-item skeleton"
+							style="height: 5em"
+						></div>
+					</li>
+					<li class="v-stack">
+						<div
+							class="sidebar-note-list-item skeleton"
+							style="height: 5em"
+						></div>
+					</li>
+				</ul>
+			</div>
+		</template>
+		<template id="sidebar-note">
+			<div class="sidebar-note-list-item">
+				<header class="sidebar-note-header">
+					<strong></strong>
+					<small></small>
+				</header>
+				<button class="sidebar-note-open" style="border: 1px solid transparent">
+					Open note for preview
+				</button>
+				<button class="sidebar-note-toggle-expand">
+					<img src="chevron-up.svg" width="10px" height="10px" alt="Expand" />
+					<img
+						src="chevron-down.svg"
+						width="10px"
+						height="10px"
+						alt="Collapse"
+					/>
+				</button>
+				<p class="sidebar-note-excerpt"><i>(No content)</i></p>
+			</div>
+		</template>
+		<template id="note__none">
+			<div class="note--empty-state">
+				<span class="note-text--empty-state"
+					>Click a note on the left to view something! 🥺</span
+				>
+			</div>
+		</template>
+		<template id="note">
+			<div class="note">
+				<div class="note-header">
+					<h1 class="note-title"></h1>
+					<div class="note-menu" role="menubar">
+						<small class="note-updated-at" role="status">Last updated on</small>
+					</div>
+				</div>
+			</div>
+		</template>
+		<template id="note__skeleton">
+			<div class="note skeleton-container" role="progressbar" aria-busy="true">
+				<div class="note-header">
+					<div
+						class="note-title skeleton"
+						style="height: 3rem; width: 65%; margin-inline: 12px 1em"
+					></div>
+					<div
+						class="skeleton skeleton--button"
+						style="width: 8em; height: 2.5em"
+					></div>
+				</div>
+				<div class="note-preview">
+					<div class="skeleton v-stack" style="height: 1.5em"></div>
+					<div class="skeleton v-stack" style="height: 1.5em"></div>
+					<div class="skeleton v-stack" style="height: 1.5em"></div>
+					<div class="skeleton v-stack" style="height: 1.5em"></div>
+					<div class="skeleton v-stack" style="height: 1.5em"></div>
+				</div>
+			</div>
+		</template>
+		<template id="note-preview">
+			<div class="note-preview">
+				<div class="text-with-markdown"></div>
+			</div>
+		</template>
+		<template id="note-edit">
+			<div class="note-editor">
+				<form class="note-editor-form" autocomplete="off">
+					<label class="offscreen" for="note-title-input"
+						>Enter a title for your note</label
+					>
+					<input id="note-title-input" type="text" value="" />
+					<label class="offscreen" for="note-body-input"
+						>Enter the body for your note</label
+					>
+					<textarea id="note-body-input"></textarea>
+				</form>
+				<div class="note-editor-preview">
+					<div class="note-editor-menu" role="menubar">
+						<button class="note-editor-done" role="menuitem">
+							<img
+								src="checkmark.svg"
+								width="14px"
+								height="10px"
+								alt=""
+								role="presentation"
+							/>
+							Done
+						</button>
+						<button class="note-editor-delete" role="menuitem">
+							<img
+								src="cross.svg"
+								width="10px"
+								height="10px"
+								alt=""
+								role="presentation"
+							/>
+							Delete
+						</button>
+					</div>
+					<div class="label label--preview" role="status">Preview</div>
+					<h1 class="note-title"></h1>
+				</div>
+			</div>
+		</template>
+		<template id="note-edit__skeleton">
+			<div
+				class="note-editor skeleton-container"
+				role="progressbar"
+				aria-busy="true"
+			>
+				<div class="note-editor-form">
+					<div class="skeleton v-stack" style="height: 3rem"></div>
+					<div class="skeleton v-stack" style="height: 100%"></div>
+				</div>
+				<div class="note-editor-preview">
+					<div class="note-editor-menu">
+						<div
+							class="skeleton skeleton--button"
+							style="width: 8em; height: 2.5em"
+						></div>
+						<div
+							class="skeleton skeleton--button"
+							style="width: 8em; height: 2.5em; margin-inline: 12px 0"
+						></div>
+					</div>
+					<div
+						class="note-title skeleton"
+						style="height: 3rem; width: 65%; margin-inline: 12px 1em"
+					></div>
+					<div class="note-preview">
+						<div class="skeleton v-stack" style="height: 1.5em"></div>
+						<div class="skeleton v-stack" style="height: 1.5em"></div>
+						<div class="skeleton v-stack" style="height: 1.5em"></div>
+						<div class="skeleton v-stack" style="height: 1.5em"></div>
+						<div class="skeleton v-stack" style="height: 1.5em"></div>
+					</div>
+				</div>
+			</div>
+		</template>
+	</body>
+</html>
diff --git a/moq/reference/public/style.css b/moq/reference/public/style.css
new file mode 100644
index 0000000..34443b7
--- /dev/null
+++ b/moq/reference/public/style.css
@@ -0,0 +1,704 @@
+/* -------------------------------- CSSRESET --------------------------------*/
+/* CSS Reset adapted from https://dev.to/hankchizljaw/a-modern-css-reset-6p3 */
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+	padding: 0;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+	margin: 0;
+}
+
+/* Set core body defaults */
+body {
+	min-height: 100vh;
+	scroll-behavior: smooth;
+	text-rendering: optimizeSpeed;
+	line-height: 1.5;
+}
+
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+	list-style: none;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+	text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img {
+	max-width: 100%;
+	display: block;
+}
+
+/* Natural flow and rhythm in articles by default */
+article > * + * {
+	margin-block-start: 1em;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+	* {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
+/* -------------------------------- /CSSRESET --------------------------------*/
+
+:root {
+	/* Colors */
+	--main-border-color: #ddd;
+	--primary-border: #037dba;
+	--gray-20: #404346;
+	--gray-60: #8a8d91;
+	--gray-70: #bcc0c4;
+	--gray-80: #c9ccd1;
+	--gray-90: #e4e6eb;
+	--gray-95: #f0f2f5;
+	--gray-100: #f5f7fa;
+	--primary-blue: #037dba;
+	--secondary-blue: #0396df;
+	--tertiary-blue: #c6efff;
+	--flash-blue: #4cf7ff;
+	--outline-blue: rgba(4, 164, 244, 0.6);
+	--navy-blue: #035e8c;
+	--red-25: #bd0d2a;
+	--secondary-text: #65676b;
+	--white: #fff;
+	--yellow: #fffae1;
+
+	--outline-box-shadow: 0 0 0 2px var(--outline-blue);
+	--outline-box-shadow-contrast: 0 0 0 2px var(--navy-blue);
+
+	/* Fonts */
+	--sans-serif: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		Ubuntu, Helvetica, sans-serif;
+	--monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+		monospace;
+}
+
+html {
+	font-size: 100%;
+}
+
+body {
+	font-family: var(--sans-serif);
+	background: var(--gray-100);
+	font-weight: 400;
+	line-height: 1.75;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+	margin: 0;
+	font-weight: 700;
+	line-height: 1.3;
+}
+
+h1 {
+	font-size: 3.052rem;
+}
+h2 {
+	font-size: 2.441rem;
+}
+h3 {
+	font-size: 1.953rem;
+}
+h4 {
+	font-size: 1.563rem;
+}
+h5 {
+	font-size: 1.25rem;
+}
+small,
+.text_small {
+	font-size: 0.8rem;
+}
+pre,
+code {
+	font-family: var(--monospace);
+	border-radius: 6px;
+}
+pre {
+	background: var(--gray-95);
+	padding: 12px;
+	line-height: 1.5;
+}
+code {
+	background: var(--yellow);
+	padding: 0 3px;
+	font-size: 0.94rem;
+	word-break: break-word;
+}
+pre code {
+	background: none;
+}
+a {
+	color: var(--primary-blue);
+}
+
+.text-with-markdown h1,
+.text-with-markdown h2,
+.text-with-markdown h3,
+.text-with-markdown h4,
+.text-with-markdown h5 {
+	margin-block: 2rem 0.7rem;
+	margin-inline: 0;
+}
+
+.text-with-markdown blockquote {
+	font-style: italic;
+	color: var(--gray-20);
+	border-left: 3px solid var(--gray-80);
+	padding-left: 10px;
+}
+
+hr {
+	border: 0;
+	height: 0;
+	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* ---------------------------------------------------------------------------*/
+.main {
+	display: flex;
+	height: 100vh;
+	width: 100%;
+	overflow: hidden;
+}
+
+.col {
+	height: 100%;
+}
+.col:last-child {
+	flex-grow: 1;
+}
+
+.logo {
+	height: 20px;
+	width: 22px;
+	margin-inline-end: 10px;
+}
+
+.edit-button {
+	border-radius: 100px;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+	padding: 6px 20px 8px;
+	cursor: pointer;
+	font-weight: 700;
+	outline-style: none;
+}
+.edit-button--solid {
+	background: var(--primary-blue);
+	color: var(--white);
+	border: none;
+	margin-inline-start: 6px;
+	transition: all 0.2s ease-in-out;
+}
+.edit-button--solid:hover {
+	background: var(--secondary-blue);
+}
+.edit-button--solid:focus {
+	box-shadow: var(--outline-box-shadow-contrast);
+}
+.edit-button--outline {
+	background: var(--white);
+	color: var(--primary-blue);
+	border: 1px solid var(--primary-blue);
+	margin-inline-start: 12px;
+	transition: all 0.1s ease-in-out;
+}
+.edit-button--outline:disabled {
+	opacity: 0.5;
+}
+.edit-button--outline:hover:not([disabled]) {
+	background: var(--primary-blue);
+	color: var(--white);
+}
+.edit-button--outline:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+
+ul.notes-list {
+	padding: 16px 0;
+}
+.notes-list > li {
+	padding: 0 16px;
+}
+.notes-empty {
+	padding: 16px;
+}
+
+.sidebar {
+	background: var(--white);
+	box-shadow:
+		0px 8px 24px rgba(0, 0, 0, 0.1),
+		0px 2px 2px rgba(0, 0, 0, 0.1);
+	overflow-y: scroll;
+	z-index: 1000;
+	flex-shrink: 0;
+	max-width: 350px;
+	min-width: 250px;
+	width: 30%;
+}
+.sidebar-header {
+	letter-spacing: 0.15em;
+	text-transform: uppercase;
+	padding: 36px 16px 16px;
+	display: flex;
+	align-items: center;
+}
+.sidebar-menu {
+	padding: 0 16px 16px;
+	display: flex;
+	justify-content: space-between;
+}
+.sidebar-menu > .search {
+	position: relative;
+	flex-grow: 1;
+}
+.sidebar-note-list-item {
+	position: relative;
+	margin-bottom: 12px;
+	padding: 16px;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	max-height: 100px;
+	transition: max-height 250ms ease-out;
+	transform: scale(1);
+}
+.sidebar-note-list-item.note-expanded {
+	max-height: 300px;
+	transition: max-height 0.5s ease;
+}
+.sidebar-note-list-item.flash {
+	animation-name: flash;
+	animation-duration: 0.6s;
+}
+
+.sidebar-note-open {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	z-index: 0;
+	border: none;
+	border-radius: 6px;
+	text-align: start;
+	background: var(--gray-95);
+	cursor: pointer;
+	outline-style: none;
+	color: transparent;
+	font-size: 0px;
+}
+.sidebar-note-open:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+.sidebar-note-open:hover {
+	background: var(--gray-90);
+}
+.sidebar-note-header {
+	z-index: 1;
+	max-width: 85%;
+	pointer-events: none;
+}
+.sidebar-note-header > strong {
+	display: block;
+	font-size: 1.25rem;
+	line-height: 1.2;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.sidebar-note-toggle-expand {
+	z-index: 2;
+	border-radius: 50%;
+	height: 24px;
+	border: 1px solid var(--gray-60);
+	cursor: pointer;
+	flex-shrink: 0;
+	visibility: hidden;
+	opacity: 0;
+	cursor: default;
+	transition:
+		visibility 0s linear 20ms,
+		opacity 300ms;
+	outline-style: none;
+	/* Firefox user agent styles button padding-inline is only 4px, not 6px */
+	padding-left: 6px;
+	padding-right: 6px;
+}
+.sidebar-note-toggle-expand:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+.sidebar-note-open:hover + .sidebar-note-toggle-expand,
+.sidebar-note-open:focus + .sidebar-note-toggle-expand,
+.sidebar-note-toggle-expand:hover,
+.sidebar-note-toggle-expand:focus {
+	visibility: visible;
+	opacity: 1;
+	transition:
+		visibility 0s linear 0s,
+		opacity 300ms;
+}
+.sidebar-note-toggle-expand img {
+	width: 10px;
+	height: 10px;
+}
+
+.sidebar-note-excerpt {
+	pointer-events: none;
+	z-index: 2;
+	flex: 1 1 250px;
+	color: var(--secondary-text);
+	position: relative;
+	animation: slideIn 100ms;
+}
+
+.search input {
+	padding: 0 16px;
+	border-radius: 100px;
+	border: 1px solid var(--gray-90);
+	width: 100%;
+	height: 100%;
+	outline-style: none;
+}
+.search input:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+.search .spinner {
+	position: absolute;
+	right: 10px;
+	top: 10px;
+}
+
+.note-viewer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.note {
+	background: var(--white);
+	box-shadow:
+		0px 0px 5px rgba(0, 0, 0, 0.1),
+		0px 0px 1px rgba(0, 0, 0, 0.1);
+	border-radius: 8px;
+	height: 95%;
+	width: 95%;
+	min-width: 400px;
+	padding: 8%;
+	overflow-y: auto;
+}
+.note--empty-state {
+	margin-inline: 20px 20px;
+}
+.note-text--empty-state {
+	font-size: 1.5rem;
+}
+.note-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap-reverse;
+	margin-inline-start: -12px;
+}
+.note-menu {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-grow: 1;
+}
+.note-title {
+	line-height: 1.3;
+	flex-grow: 1;
+	overflow-wrap: break-word;
+	margin-inline-start: 12px;
+}
+.note-updated-at {
+	color: var(--secondary-text);
+	white-space: nowrap;
+	margin-inline-start: 12px;
+}
+.note-preview {
+	margin-block-start: 50px;
+}
+
+.note-editor {
+	background: var(--white);
+	display: flex;
+	height: 100%;
+	width: 100%;
+	padding: 58px;
+	overflow-y: auto;
+}
+.note-editor .label {
+	margin-bottom: 20px;
+}
+.note-editor-form {
+	display: flex;
+	flex-direction: column;
+	width: 400px;
+	flex-shrink: 0;
+	position: sticky;
+	top: 0;
+}
+.note-editor-form input,
+.note-editor-form textarea {
+	background: none;
+	border: 1px solid var(--gray-70);
+	border-radius: 2px;
+	font-family: var(--monospace);
+	font-size: 0.8rem;
+	padding: 12px;
+	outline-style: none;
+}
+.note-editor-form input:focus,
+.note-editor-form textarea:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+.note-editor-form input {
+	height: 44px;
+	margin-bottom: 16px;
+}
+.note-editor-form textarea {
+	height: 100%;
+	max-width: 400px;
+}
+.note-editor-menu {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	margin-bottom: 12px;
+}
+.note-editor-preview {
+	margin-inline-start: 40px;
+	width: 100%;
+}
+.note-editor-done,
+.note-editor-delete {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-radius: 100px;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+	padding: 6px 20px 8px;
+	cursor: pointer;
+	font-weight: 700;
+	margin-inline-start: 12px;
+	outline-style: none;
+	transition: all 0.2s ease-in-out;
+}
+.note-editor-done:disabled,
+.note-editor-delete:disabled {
+	opacity: 0.5;
+}
+.note-editor-done {
+	border: none;
+	background: var(--primary-blue);
+	color: var(--white);
+}
+.note-editor-done:focus {
+	box-shadow: var(--outline-box-shadow-contrast);
+}
+.note-editor-done:hover:not([disabled]) {
+	background: var(--secondary-blue);
+}
+.note-editor-delete {
+	border: 1px solid var(--red-25);
+	background: var(--white);
+	color: var(--red-25);
+}
+.note-editor-delete:focus {
+	box-shadow: var(--outline-box-shadow);
+}
+.note-editor-delete:hover:not([disabled]) {
+	background: var(--red-25);
+	color: var(--white);
+}
+/* Hack to color our svg */
+.note-editor-delete:hover:not([disabled]) img {
+	filter: grayscale(1) invert(1) brightness(2);
+}
+.note-editor-done > img {
+	width: 14px;
+}
+.note-editor-delete > img {
+	width: 10px;
+}
+.note-editor-done > img,
+.note-editor-delete > img {
+	margin-inline-end: 12px;
+}
+.note-editor-done[disabled],
+.note-editor-delete[disabled] {
+	opacity: 0.5;
+}
+
+.label {
+	display: inline-block;
+	border-radius: 100px;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	font-weight: 700;
+	padding: 4px 14px;
+}
+.label--preview {
+	background: rgba(38, 183, 255, 0.15);
+	color: var(--primary-blue);
+}
+
+.text-with-markdown p {
+	margin-bottom: 16px;
+}
+.text-with-markdown img {
+	width: 100%;
+}
+
+/* https://codepen.io/mandelid/pen/vwKoe */
+.spinner {
+	display: inline-block;
+	transition: opacity linear 0.1s 0.2s;
+	width: 20px;
+	height: 20px;
+	border: 3px solid rgba(80, 80, 80, 0.5);
+	border-radius: 50%;
+	border-top-color: #fff;
+	animation: spin 1s ease-in-out infinite;
+	opacity: 0;
+}
+.spinner--active {
+	opacity: 1;
+}
+
+.skeleton::after {
+	content: 'Loading...';
+}
+.skeleton {
+	height: 100%;
+	background-color: #eee;
+	background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
+	background-size: 200px 100%;
+	background-repeat: no-repeat;
+	border-radius: 4px;
+	display: block;
+	line-height: 1;
+	width: 100%;
+	animation: shimmer 1.2s ease-in-out infinite;
+	color: transparent;
+}
+.skeleton:first-of-type {
+	margin: 0;
+}
+.skeleton--button {
+	border-radius: 100px;
+	padding: 6px 20px 8px;
+	width: auto;
+}
+.v-stack + .v-stack {
+	margin-block-start: 0.8em;
+}
+
+.offscreen {
+	border: 0;
+	clip: rect(0, 0, 0, 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	width: 1px;
+	position: absolute;
+}
+
+/* ---------------------------------------------------------------------------*/
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes shimmer {
+	0% {
+		background-position: -200px 0;
+	}
+	100% {
+		background-position: calc(200px + 100%) 0;
+	}
+}
+
+@keyframes slideIn {
+	0% {
+		top: -10px;
+		opacity: 0;
+	}
+	100% {
+		top: 0;
+		opacity: 1;
+	}
+}
+
+@keyframes flash {
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	50% {
+		transform: scale(1.05);
+		opacity: 0.9;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
diff --git a/moq/reference/rollup.config.mjs b/moq/reference/rollup.config.mjs
new file mode 100644
index 0000000..b34c38c
--- /dev/null
+++ b/moq/reference/rollup.config.mjs
@@ -0,0 +1,12 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+
+export default {
+	input: 'src/entry.js',
+	output: {
+		file: 'public/main.js',
+		format: 'iife',
+	},
+	plugins: [nodeResolve(), commonjs(), terser()],
+};
diff --git a/moq/reference/seed-data.js b/moq/reference/seed-data.js
new file mode 100644
index 0000000..6bc1958
--- /dev/null
+++ b/moq/reference/seed-data.js
@@ -0,0 +1,128 @@
+// file: seed-data.js
+import { nanoid } from 'nanoid';
+import { marked } from 'marked';
+import sanitizeHtml from 'sanitize-html';
+
+const optionsSanitized = {
+	allowedTags: sanitizeHtml.defaults.allowedTags.concat([
+		'img',
+		'h1',
+		'h2',
+		'h3',
+	]),
+	allowedAttributes: Object.assign(
+		{},
+		sanitizeHtml.defaults.allowedAttributes,
+		{
+			img: ['alt', 'src'],
+		}
+	),
+};
+
+/** @param { string } rawHtml */
+const sanitizedFromRaw = (rawHtml) => sanitizeHtml(rawHtml, optionsSanitized);
+
+const WORD_COUNT = 20;
+
+const optionsPlain = {
+	allowedTags: [],
+	allowedAttributes: {},
+};
+
+/** @param { string } rawHtml */
+function excerptFromRaw(rawHtml) {
+	// - strip tags from HTML
+	// - only use the first 20 words
+	const plain = sanitizeHtml(rawHtml, optionsPlain);
+	const words = plain.trim().split(/\s+/);
+	const begin = words.slice(0, WORD_COUNT).join(' ');
+	return words.length > WORD_COUNT ? begin + '…' : begin;
+}
+
+/**
+ * @param { number } size
+ * @param { number } low
+ * @param { number } high
+ */
+function makeEpochMsBetween(size, low, high) {
+	const [start, end] = low < high ? [low, high] : [high, low];
+	const interval = end - start;
+	/** @param {number} value */
+	const interpolate = (value) =>
+		start + Math.floor((interval * value) / 0xffff_ffff);
+	const values = new Uint32Array(size);
+	crypto.getRandomValues(values);
+	values.sort((a, b) => b - a);
+	// Borrow Array's `map` to get regular array instead of TypedArray
+	return /** @type { number[] } */ (
+		Array.prototype.map.call(values, interpolate)
+	);
+}
+
+/** @param { number } timestamp */
+function startOfYear(timestamp) {
+	const date = new Date(timestamp);
+	return new Date(date.getFullYear(), 0, 1).getTime();
+}
+
+/** typedef { [title: string, body: string] } ContentTuple */
+/**
+ * @typedef {{
+ *	id: string,
+ *	title: string,
+ *	body: string,
+ *	excerpt: string,
+ *	html: string,
+ *	createdAt: number,
+ *	updatedAt: number
+ * }} Note
+ */
+
+/** @param { ContentTuple[] } content */
+function makeCollectContent(content) {
+	/**
+	 * @param { Note[] } collect
+	 * @param { number } createdAt
+	 * @param { number } index
+	 */
+	return function (collected, createdAt, index) {
+		const [title, body] = content[index];
+		const rawHtml = /** @type { string } */ (
+			marked.parse(body, { async: false })
+		);
+		collected.push({
+			id: nanoid(),
+			title,
+			body,
+			excerpt: excerptFromRaw(rawHtml),
+			html: sanitizedFromRaw(rawHtml),
+			createdAt,
+			updatedAt: createdAt,
+		});
+		return collected;
+	};
+}
+
+/** @type {ContentTuple[]} */
+const content = [
+	['Meeting Notes', 'This is an example note. It contains **Markdown**!'],
+	[
+		'Make a thing',
+		`It's very easy to make some words **bold** and other words *italic* with
+Markdown. You can even [link to React's website!](https://www.reactjs.org).`,
+	],
+	[
+		'A note with a very long title because sometimes you need more words',
+		`You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing)
+notes in this app! These note live on the server in the \`notes\` folder.
+
+![This app is powered by React](https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/React_Native_Logo.png/800px-React_Native_Logo.png)`,
+	],
+	['I wrote this note today', 'It was an excellent note.'],
+];
+
+const now = Date.now();
+const created = makeEpochMsBetween(content.length, startOfYear(now), now);
+const json = JSON.stringify(created.reduce(makeCollectContent(content), []));
+
+console.log(json);
diff --git a/moq/reference/src/components/app.js b/moq/reference/src/components/app.js
new file mode 100644
index 0000000..3b8947a
--- /dev/null
+++ b/moq/reference/src/components/app.js
@@ -0,0 +1,38 @@
+// @ts-check
+// file: src/components/app.js
+import { contentById } from '../template';
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const appSource = contentById(document, 'app');
+
+	/** @param {{
+	 *		newButton: HTMLElement;
+	 *		note: HTMLElement;
+	 *		noteList: HTMLElement;
+	 *		searchField: HTMLElement;
+	 *	}} param0
+	 */
+	return function makeApp({ newButton, note, noteList, searchField }) {
+		const content = /** @type {HTMLElement} */ (appSource.cloneNode(true));
+
+		const menu = content.querySelector('.sidebar-menu');
+		if (!menu)
+			throw new Error('Failed to find ".sidebar-menu" in "app" content');
+		menu.append(searchField);
+		menu.append(newButton);
+
+		const nav = content.querySelector('nav');
+		if (!nav) throw new Error('Failed to find "nav" in "app" content');
+		nav.append(noteList);
+
+		const noteView = content.querySelector('.note-viewer');
+		if (!noteView)
+			throw new Error('Failed to find "note-viewer" in "app" content');
+		noteView.append(note);
+
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/reference/src/components/edit-button.js b/moq/reference/src/components/edit-button.js
new file mode 100644
index 0000000..44c52b9
--- /dev/null
+++ b/moq/reference/src/components/edit-button.js
@@ -0,0 +1,35 @@
+// @ts-check
+// file: src/components/edit-button.js
+import { contentById } from '../template';
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const buttonSource = contentById(document, 'edit-button');
+
+	/**
+	 *	@param { string } label
+	 *	@param { boolean } [isDraft = false]
+	 *	@param { boolean } [isDisabled = false]
+	 */
+	return function makeEditButton(label, isDraft = false, isDisabled = false) {
+		const content = /** @type {HTMLElement} */ (buttonSource.cloneNode(true));
+
+		const child = document.createTextNode(label);
+		content.appendChild(child);
+
+		if (isDraft)
+			content.classList.replace('edit-button--solid', 'edit-button--outline');
+
+		if (isDisabled) content.setAttribute('disabled', '');
+
+		if (content instanceof HTMLButtonElement)
+			document.addEventListener(
+				'moq-busy',
+				(event) => (content.disabled = event.detail)
+			);
+
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/reference/src/components/note-edit.js b/moq/reference/src/components/note-edit.js
new file mode 100644
index 0000000..9e5c998
--- /dev/null
+++ b/moq/reference/src/components/note-edit.js
@@ -0,0 +1,68 @@
+// @ts-check
+// file: src/components/note-edit.js
+import { contentById } from '../template';
+
+/** @typedef { import('../internal.d.ts').NotePersist } NotePersist */
+/** @typedef { ReturnType<import('./note-preview').makeDefinition> } MakeNotePreview */
+
+const INITIAL_TITLE = 'Untitled';
+const INITIAL_BODY = '';
+
+/**
+ * @param { Document } document
+ * @param { MakeNotePreview } makeNotePreview
+ */
+function makeDefinition(document, makeNotePreview) {
+	const editSource = contentById(document, 'note-edit');
+	const editSkeletonSource = contentById(document, 'note-edit__skeleton');
+
+	/**
+	 * @param { NotePersist | undefined } note
+	 * @param { boolean } [isLoading=false]
+	 */
+	return function makeNoteEdit(note, isLoading) {
+		if (isLoading) {
+			return /** @type {HTMLElement} */ (editSkeletonSource.cloneNode(true));
+		}
+
+		const content = /** @type {HTMLElement} */ (editSource.cloneNode(true));
+		const titleInput = content.querySelector('#note-title-input');
+		if (titleInput instanceof HTMLInputElement) {
+			titleInput.value = note ? note.title : INITIAL_TITLE;
+		}
+		const title = content.querySelector('.note-title');
+		if (title instanceof HTMLElement) {
+			title.append(document.createTextNode(note ? note.title : INITIAL_TITLE));
+			title.insertAdjacentElement(
+				'afterend',
+				makeNotePreview(note ? note.html : INITIAL_BODY)
+			);
+		}
+
+		const deleteButton = content.querySelector('.note-editor-delete');
+		const doneButton = content.querySelector('.note-editor-done');
+		if (note) {
+			const body = content.querySelector('#note-body-input');
+			if (body instanceof HTMLTextAreaElement) body.textContent = note.body;
+		}
+
+		if (
+			doneButton instanceof HTMLButtonElement &&
+			deleteButton instanceof HTMLButtonElement
+		) {
+			if (!note) deleteButton.remove();
+
+			/** @type {(event: CustomEvent<boolean>) => void} disabled */
+			const listener = note
+				? (event) =>
+						void (doneButton.disabled = deleteButton.disabled = event.detail)
+				: (event) => void (doneButton.disabled = event.detail);
+
+			document.addEventListener('moq-busy', listener);
+		}
+
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/reference/src/components/note-list.js b/moq/reference/src/components/note-list.js
new file mode 100644
index 0000000..9e86308
--- /dev/null
+++ b/moq/reference/src/components/note-list.js
@@ -0,0 +1,80 @@
+// @ts-check
+// file: src/components/note-list.js
+import { contentById, contentItemPairById } from '../template';
+import { makeDefinition as defineSidebarNote } from './sidebar-note';
+
+/** @typedef { import('../internal.d.ts').NotePersist } NotePersist */
+
+/**
+ * @param { string | undefined } noteId
+ * @param { boolean } flush
+ * @param { string | undefined } nextId
+ * @returns { (id: string) => Exclude<Parameters<ReturnType<typeof defineSidebarNote>>[1], undefined> }
+ */
+function makeBriefFlags(noteId, flush, nextId) {
+	if (noteId) {
+		const noteFlags = flush ? 3 : 1;
+		return nextId
+			? (id) => (nextId === id ? 2 : noteId === id ? noteFlags : 0)
+			: (id) => (id === noteId ? noteFlags : 0);
+	}
+	return nextId ? (id) => (id === nextId ? 2 : 0) : (_id) => 0;
+}
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const makeSidebarNote = defineSidebarNote(document);
+	const skeletonSource = contentById(document, 'note-list__skeleton');
+	const emptySource = contentById(document, 'note-list__empty');
+	const [contentSource, itemSource] = contentItemPairById(
+		document,
+		'note-list'
+	);
+
+	/**
+	 * @param { NotePersist[] | string | undefined } notes
+	 * @param { string | undefined } noteId
+	 * @param { string | undefined } nextId
+	 * @param { boolean } [loading=false]
+	 * @param { boolean } [flush=false]
+	 */
+	return function makeNoteList(
+		notes,
+		noteId,
+		nextId,
+		loading = false,
+		flush = false
+	) {
+		if (loading)
+			return /** @type {HTMLElement} */ (skeletonSource.cloneNode(true));
+
+		const [list, search] =
+			typeof notes === 'string'
+				? [undefined, notes.length > 0 ? notes : undefined]
+				: [
+						Array.isArray(notes) && notes.length > 0 ? notes : undefined,
+						undefined,
+					];
+
+		if (!list) {
+			const content = /** @type {HTMLElement} */ (emptySource.cloneNode(true));
+			content.textContent = search
+				? `Couldn't find any notes titled "${search}"`
+				: 'No notes created yet!';
+			return content;
+		}
+
+		const content = /** @type {HTMLElement} */ (contentSource.cloneNode(true));
+		const toFlags = makeBriefFlags(noteId, flush, nextId);
+		for (const info of list) {
+			const listItem = /** @type {HTMLLIElement} */ (
+				itemSource.cloneNode(true)
+			);
+			listItem.append(makeSidebarNote(info, toFlags(info.id)));
+			content.append(listItem);
+		}
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/reference/src/components/note-preview.js b/moq/reference/src/components/note-preview.js
new file mode 100644
index 0000000..cb04b1f
--- /dev/null
+++ b/moq/reference/src/components/note-preview.js
@@ -0,0 +1,20 @@
+// @ts-check
+// file: src/components/note-preview.js
+import { contentById } from '../template';
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const previewSource = contentById(document, 'note-preview');
+
+	/** @param { string } noteHtml */
+	return function makeNotePreview(noteHtml) {
+		const content = /** @type {HTMLElement} */ (previewSource.cloneNode(true));
+		const wrapper = content.querySelector('.text-with-markdown');
+		if (wrapper instanceof HTMLElement) {
+			wrapper.innerHTML = noteHtml;
+		}
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/reference/src/components/note.js b/moq/reference/src/components/note.js
new file mode 100644
index 0000000..9edf195
--- /dev/null
+++ b/moq/reference/src/components/note.js
@@ -0,0 +1,72 @@
+// @ts-check
+// file: src/components/edit-button.js
+import { contentById } from '../template';
+import { makeNoteDateFormat } from '../date-time';
+import { makeDefinition as defineNoteEdit } from './note-edit';
+import { makeDefinition as defineNotePreview } from './note-preview';
+
+/** @typedef { import('../internal.d.ts').NotePersist } NotePersist */
+/** @typedef { ReturnType<import('./edit-button').makeDefinition> } MakeButton */
+
+const updateFormat = makeNoteDateFormat(
+	Intl.DateTimeFormat().resolvedOptions()
+);
+
+const makeNotePreview = defineNotePreview(document);
+const makeNoteEdit = defineNoteEdit(document, makeNotePreview);
+
+/** @typedef { 0 | 1 | 2 | 3 } NoteFlags */
+
+/** @param { NoteFlags } flags */
+const isLoading = (flags) => (flags & 0x2) === 0x2;
+/** @param { NoteFlags } flags */
+const isEditing = (flags) => (flags & 0x1) === 0x1;
+
+/**
+ * @param { Document } document
+ * @param { MakeButton } makeButton
+ */
+function makeDefinition(document, makeButton) {
+	const noteSource = contentById(document, 'note');
+	const noteSkeletonSource = contentById(document, 'note__skeleton');
+	const noteNoneSource = contentById(document, 'note__none');
+
+	/**
+	 *	@param { NotePersist | undefined } note
+	 *	@param { NoteFlags } flags
+	 */
+	return function makeNote(note, flags = 0) {
+		const loading = isLoading(flags);
+		if (isEditing(flags)) return makeNoteEdit(note, loading);
+
+		if (loading)
+			return /** @type {HTMLElement} */ (noteSkeletonSource.cloneNode(true));
+
+		if (!note)
+			return /** @type {HTMLElement} */ (noteNoneSource.cloneNode(true));
+
+		// Note view
+		const content = /** @type {HTMLElement} */ (noteSource.cloneNode(true));
+		const title = content.querySelector('.note-title');
+		if (title instanceof HTMLElement) {
+			const child = document.createTextNode(note.title);
+			title.appendChild(child);
+		}
+		const updated = content.querySelector('.note-updated-at');
+		if (updated instanceof HTMLElement) {
+			const text = updated.firstChild;
+			if (text instanceof Text) {
+				const [updatedOn] = updateFormat(note.updatedAt);
+				text.nodeValue = text.nodeValue + ' ' + updatedOn;
+			}
+		}
+		const menu = content.querySelector('.note-menu');
+		if (menu instanceof HTMLElement) {
+			menu.append(makeButton('Edit'));
+		}
+		content.append(makeNotePreview(note.html));
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/reference/src/components/search-field.js b/moq/reference/src/components/search-field.js
new file mode 100644
index 0000000..2c9831c
--- /dev/null
+++ b/moq/reference/src/components/search-field.js
@@ -0,0 +1,39 @@
+// @ts-check
+// file: src/components/search-field.js
+import { contentById } from '../template';
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const spinnerSource = contentById(document, 'spinner');
+	const searchFieldSource = contentById(document, 'search-field');
+
+	/**
+	 * @param { string | undefined } search
+	 * @param { boolean } [loading = false]
+	 */
+	return function makeSearchField(search, loading = false) {
+		const spinner = /** @type {HTMLElement} */ (spinnerSource.cloneNode(true));
+		const content = /** @type {HTMLElement} */ (
+			searchFieldSource.cloneNode(true)
+		);
+
+		if (search) {
+			const input = content.querySelector('#sidebar-search-input');
+			if (!(input instanceof HTMLInputElement))
+				throw new Error(
+					'Failed to find "#sidebar-search-input" input in "search-field" content'
+				);
+			input.value = search;
+		}
+
+		if (loading) {
+			spinner.classList.add('spinner--active');
+			spinner.setAttribute('aria-busy', 'true');
+		}
+
+		content.append(spinner);
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/reference/src/components/sidebar-note.js b/moq/reference/src/components/sidebar-note.js
new file mode 100644
index 0000000..44f19c1
--- /dev/null
+++ b/moq/reference/src/components/sidebar-note.js
@@ -0,0 +1,135 @@
+// @ts-check
+// file: src/components/note-list.js
+import { contentById } from '../template';
+import { makeBriefDateFormat } from '../date-time';
+
+/** @typedef { import('../internal.d.ts').NotePersist } NotePersist */
+
+const NAME_FLUSH = 'flash';
+
+const updateFormat = makeBriefDateFormat(
+	Intl.DateTimeFormat().resolvedOptions()
+);
+
+/** @typedef { 0 | 1 | 2 | 3 } BriefFlags */
+
+/** @param { BriefFlags } flags */
+const isActive = (flags) => (flags & 0b01) === 0b01;
+/** @param { BriefFlags } flags */
+const isNext = (flags) => flags === 2;
+/** @param { BriefFlags } flags */
+const isFlush = (flags) => flags === 3;
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const briefSource = contentById(document, 'sidebar-note');
+
+	const sendBusyStart = () =>
+		document.dispatchEvent(new CustomEvent('moq-busy', { detail: true }));
+	const sendBusyEnd = () =>
+		document.dispatchEvent(new CustomEvent('moq-busy', { detail: false }));
+
+	/**
+	 * @param { NotePersist } note
+	 * @param { BriefFlags } [flags]
+	 */
+	return function makeSidebarNote(note, flags = 0) {
+		const content = /** @type {HTMLElement} */ (briefSource.cloneNode(true));
+
+		// fill header fields
+		const header = content.querySelector('header');
+		if (header instanceof HTMLElement) {
+			const title = content.querySelector('strong');
+			if (title instanceof HTMLElement) {
+				const child = document.createTextNode(note.title);
+				title.appendChild(child);
+			}
+
+			const updated = content.querySelector('small');
+			if (updated instanceof HTMLElement) {
+				const [timeOrDate] = updateFormat(note.updatedAt);
+				const child = document.createTextNode(timeOrDate);
+				updated.appendChild(child);
+			}
+		}
+		// Fill excerpt
+		const excerpt = content.querySelector('.sidebar-note-excerpt');
+		if (excerpt instanceof HTMLElement) {
+			const child = document.createTextNode(note.excerpt);
+			excerpt.replaceChildren(child);
+		}
+
+		// Expand button & expanded children
+		const buttonExpand = content.querySelector('.sidebar-note-toggle-expand');
+		/** @type { HTMLElement[] } */
+		const childrenExpand = [];
+		if (buttonExpand instanceof HTMLButtonElement) {
+			const expand = buttonExpand.querySelector('[alt="expand" i]');
+			const collapse = buttonExpand.querySelector('[alt="collapse" i]');
+			if (expand instanceof HTMLElement) {
+				childrenExpand[0] = expand;
+				if (collapse instanceof HTMLElement) {
+					childrenExpand[1] = collapse;
+				}
+			}
+		}
+
+		if (excerpt && buttonExpand && childrenExpand.length === 2) {
+			buttonExpand.removeChild(childrenExpand[1]);
+			content.removeChild(excerpt);
+
+			buttonExpand.addEventListener('click', () => {
+				if (!excerpt.parentNode) {
+					content.classList.add('note-expanded');
+					content.append(excerpt);
+					buttonExpand.replaceChild(childrenExpand[1], childrenExpand[0]);
+					return;
+				}
+				buttonExpand.replaceChild(childrenExpand[0], childrenExpand[1]);
+				content.removeChild(excerpt);
+				content.classList.remove('note-expanded');
+			});
+		}
+
+		// Open button
+		const buttonOpen = content.querySelector('.sidebar-note-open');
+		if (buttonOpen instanceof HTMLButtonElement) {
+			const active = isActive(flags);
+			const bgColor = isNext(flags)
+				? 'var(--gray-80)'
+				: active
+					? 'var(--tertiary-blue)'
+					: undefined;
+			const border = active ? '1px solid var(--primary-border)' : undefined;
+
+			if (bgColor) buttonOpen.style.backgroundColor = bgColor;
+			if (border) buttonOpen.style.border = border;
+		}
+
+		// add flushing-note-to-server animation
+		if (isFlush(flags)) {
+			function startFlush() {
+				content.classList.add(NAME_FLUSH);
+				sendBusyStart();
+			}
+
+			/** @param { AnimationEvent } event */
+			function endListener(event) {
+				if (event.animationName === NAME_FLUSH) {
+					content.classList.remove(NAME_FLUSH);
+					sendBusyEnd();
+
+					setTimeout(startFlush, 3000);
+					return;
+				}
+			}
+
+			content.addEventListener('animationend', endListener);
+			startFlush();
+		}
+
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/reference/src/data.js b/moq/reference/src/data.js
new file mode 100644
index 0000000..c74168c
--- /dev/null
+++ b/moq/reference/src/data.js
@@ -0,0 +1,37 @@
+// @ts-check
+// file: src/data.js
+
+/** @typedef { import('./internal.d.ts').NotePersist } NotePersist */
+
+const jsonContent = document.getElementById('note-data');
+if (!(jsonContent instanceof HTMLScriptElement))
+	throw new Error('Unable to locate "note-data" JSON content.');
+const noteData = /** @type { NotePersist[] } */ (JSON.parse(jsonContent.text));
+
+(function () {
+	if (!Array.isArray(noteData) || noteData.length < 1) return;
+
+	noteData[0].updatedAt = Date.now() - 7200000; // -2hrs
+})();
+
+/**
+ * @param { Map<string, NotePersist>} collect
+ * @param { NotePersist } note
+ */
+const collectNote = (collect, note) => collect.set(note.id, note);
+const noteIndexById = noteData.reduce(collectNote, new Map());
+
+/** @param { string } id */
+const noteById = (id) => noteIndexById.get(id);
+
+/** @param { string | undefined } part */
+function notesWithTitle(part) {
+	if (!part) return noteData;
+
+	const text = part.toLowerCase();
+	/** @param { NotePersist } note */
+	const predicate = (note) => note.title.toLowerCase().includes(text);
+	return noteData.filter(predicate);
+}
+
+export { noteById, notesWithTitle };
diff --git a/moq/reference/src/date-time.js b/moq/reference/src/date-time.js
new file mode 100644
index 0000000..dc2e5bf
--- /dev/null
+++ b/moq/reference/src/date-time.js
@@ -0,0 +1,96 @@
+// @ts-check
+// file: src/date-time.js
+
+/** @type { Intl.ResolvedDateTimeFormatOptions } */
+const defaultOptionsBriefDateFormat = {
+	locale: 'en-GB',
+	timeZone: 'UTC',
+	numberingSystem: 'latn',
+	calendar: 'gregory',
+	hour12: false,
+};
+
+/** @typedef { (epochTimestamp: number) => [local: string, utcIso: string] } FormatFn */
+
+function makeNoteDateFormat({
+	locale,
+	timeZone,
+	hour12,
+} = defaultOptionsBriefDateFormat) {
+	const display = Intl.DateTimeFormat(locale, {
+		timeZone,
+		hour12,
+		dateStyle: 'medium',
+		timeStyle: 'short',
+	});
+
+	/** @type { FormatFn } */
+	const format = function format(epochTimestamp) {
+		const dateTime = new Date(epochTimestamp);
+		return [display.format(dateTime), dateTime.toISOString()];
+	};
+	return format;
+}
+
+function makeBriefDateFormat({
+	locale,
+	timeZone,
+	hour12,
+} = defaultOptionsBriefDateFormat) {
+	const dateOnly = Intl.DateTimeFormat(locale, {
+		timeZone,
+		hour12,
+		dateStyle: 'short',
+	});
+	const timeOnly = Intl.DateTimeFormat(locale, {
+		timeZone,
+		hour12,
+		timeStyle: 'short',
+	});
+	let today = new Date();
+
+	/** @type { FormatFn } */
+	const format = function format(epochTimestamp, resetToday = false) {
+		if (resetToday) today = new Date();
+
+		const dateTime = new Date(epochTimestamp);
+		const display =
+			dateTime.getDate() === today.getDate() &&
+			dateTime.getMonth() === today.getMonth() &&
+			dateTime.getFullYear() === today.getFullYear()
+				? timeOnly.format(dateTime)
+				: dateOnly.format(dateTime);
+
+		return [display, dateTime.toISOString()];
+	};
+
+	return format;
+}
+
+/**
+ * @param { FormatFn } format
+ * @param { HTMLElement | undefined } timeAncestor
+ * @returns void
+ */
+/*
+function localizeFormat(
+	format,
+	timeAncestor
+) {
+	if (!(timeAncestor instanceof HTMLElement))
+		throw new Error('Unsuitable ancestor element');
+
+	const time = timeAncestor.querySelector('time');
+	if (!(time instanceof HTMLTimeElement))
+		throw new Error('Unable to locate time element under specified ancestor');
+
+	const current = time.textContent;
+	if (!current) return;
+	// i.e. nothing to do (CSR waiting for async content)
+
+	const epochTimestamp = Date.parse(time.dateTime);
+	const [local] = format(epochTimestamp);
+	if (current !== local) time.textContent = local;
+}
+*/
+export { /* localizeFormat, */ makeBriefDateFormat, makeNoteDateFormat };
diff --git a/moq/reference/src/entry.js b/moq/reference/src/entry.js
new file mode 100644
index 0000000..d464d9e
--- /dev/null
+++ b/moq/reference/src/entry.js
@@ -0,0 +1,54 @@
+// @ts-check
+// file: src/entry.js
+import { noteById, notesWithTitle } from './data';
+import { urlToParams } from './params';
+import { makeDefinition as defineApp } from './components/app.js';
+import { makeDefinition as defineEditButton } from './components/edit-button.js';
+import { makeDefinition as defineNote } from './components/note.js';
+import { makeDefinition as defineNoteList } from './components/note-list.js';
+import { makeDefinition as defineSearchField } from './components/search-field.js';
+
+/** @typedef { import('./internal.d.ts').NotePersist } NotePersist */
+
+const makeApp = defineApp(document);
+const makeEditButton = defineEditButton(document);
+const makeNote = defineNote(document, makeEditButton);
+const makeNoteList = defineNoteList(document);
+const makeSearchField = defineSearchField(document);
+
+/**
+ * @param { boolean } isEditing
+ * @param { string | undefined } nextId
+ * @returns { Exclude<Parameters<typeof makeNote>[1], undefined> }
+ */
+const toNoteFlags = (isEditing, nextId) =>
+	isEditing ? (nextId ? 3 : 1) : nextId ? 2 : 0;
+
+/** @param {ReturnType<typeof urlToParams>} param0 */
+function assemble({
+	flushNote,
+	isEditing,
+	listLoading,
+	nextId,
+	noteId,
+	search,
+}) {
+	const notes = listLoading
+		? undefined
+		: ((r) => (r.length > 0 ? r : search))(notesWithTitle(search));
+	const note = noteId ? noteById(noteId) : undefined;
+
+	const loading =
+		listLoading || (typeof nextId === 'string' && nextId.length > 0);
+
+	return makeApp({
+		searchField: makeSearchField(search, loading),
+		newButton: makeEditButton('New'),
+		noteList: makeNoteList(notes, note?.id, nextId, listLoading, flushNote),
+		note: makeNote(note, toNoteFlags(isEditing, nextId)),
+	});
+}
+
+document.title = 'React Notes';
+const body = /** @type {HTMLBodyElement} */ (document.querySelector('body'));
+body.prepend(assemble(urlToParams(new URL(document.location.href))));
diff --git a/moq/reference/src/internal.d.ts b/moq/reference/src/internal.d.ts
new file mode 100644
index 0000000..68785c2
--- /dev/null
+++ b/moq/reference/src/internal.d.ts
@@ -0,0 +1,23 @@
+interface CustomEventMap {
+	'moq-busy': CustomEvent<boolean>;
+}
+
+declare global {
+	interface Document {
+		addEventListener<K extends keyof CustomEventMap>(
+			type: K,
+			listener: (this: Document, ev: CustomEventMap[K]) => void
+		): void;
+		dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
+	}
+}
+
+export type NotePersist = {
+	id: string;
+	title: string;
+	body: string;
+	excerpt: string;
+	html: string;
+	createdAt: number;
+	updatedAt: number;
+};
diff --git a/moq/reference/src/params.js b/moq/reference/src/params.js
new file mode 100644
index 0000000..3813449
--- /dev/null
+++ b/moq/reference/src/params.js
@@ -0,0 +1,29 @@
+// @ts-check
+// file: src/params.js
+
+/** @param { URL } url */
+function urlToParams(url) {
+	const searchParams = url.searchParams;
+	const nextNoteId = searchParams.get('moqnextid') ?? undefined;
+	const locationJson = searchParams.get('location') ?? undefined;
+	const location = locationJson ? JSON.parse(locationJson) : {};
+
+	const nextId = nextNoteId && nextNoteId.length > 0 ? nextNoteId : undefined;
+	const noteId =
+		typeof location.selectedId === 'string' ? location.selectedId : undefined;
+
+	return {
+		flushNote: searchParams.has('moqflush'),
+		isEditing:
+			typeof location.isEditing === 'boolean' ? location.isEditing : false,
+		listLoading: searchParams.has('moqlistload'),
+		nextId: nextId && nextId !== noteId ? nextId : undefined,
+		noteId,
+		search:
+			typeof location.searchText === 'string' && location.searchText.length > 0
+				? location.searchText
+				: undefined,
+	};
+}
+
+export { urlToParams };
diff --git a/moq/reference/src/template.js b/moq/reference/src/template.js
new file mode 100644
index 0000000..8624a1c
--- /dev/null
+++ b/moq/reference/src/template.js
@@ -0,0 +1,34 @@
+// @ts-check
+// file: src/template.js
+/**
+ * @param { Document } document
+ * @param { string } id
+ */
+function contentById(document, id) {
+	const template = document.querySelector(`#${id}`);
+	if (!(template instanceof HTMLTemplateElement))
+		throw new Error(`Can't find template for ID "${id}"`);
+
+	const content = template.content.firstElementChild;
+	if (!(content instanceof HTMLElement))
+		throw new Error(`Invalid root for template ID "${id}"`);
+
+	return content;
+}
+
+/**
+ * @param { Document } document
+ * @param { string } id
+ */
+function contentItemPairById(document, id) {
+	const content = contentById(document, id);
+
+	const item = content.firstElementChild;
+	if (!(item instanceof HTMLLIElement))
+		throw new Error(`Template ID "${id}" does not contain list item`);
+
+	content.removeChild(item);
+	return [content, item];
+}
+
+export { contentById, contentItemPairById };
diff --git a/moq/reference/src/tsconfig.json b/moq/reference/src/tsconfig.json
new file mode 100644
index 0000000..e81ec1f
--- /dev/null
+++ b/moq/reference/src/tsconfig.json
@@ -0,0 +1,8 @@
+{
+	"extends": "../tsconfig.base.json",
+	"compilerOptions": {
+		"module": "ESNext",
+		"lib": ["ES2020", "DOM", "DOM.Iterable"]
+	},
+	"files": ["entry.js"]
+}
diff --git a/moq/reference/tsconfig.base.json b/moq/reference/tsconfig.base.json
new file mode 100644
index 0000000..75d9d30
--- /dev/null
+++ b/moq/reference/tsconfig.base.json
@@ -0,0 +1,17 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"skipLibCheck": true,
+
+		/* Linting */
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"strict": true,
+		"checkJs": true,
+		"allowJs": true,
+		"declaration": true,
+		"outDir": "types"
+	}
+}
diff --git a/moq/reference/tsconfig.json b/moq/reference/tsconfig.json
new file mode 100644
index 0000000..10abe41
--- /dev/null
+++ b/moq/reference/tsconfig.json
@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.base.json",
+	"compilerOptions": {
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext",
+		"allowSyntheticDefaultImports": true
+	},
+	"files": ["index.js"]
+}
diff --git a/moq/rollup.config.mjs b/moq/rollup.config.mjs
new file mode 100644
index 0000000..b34c38c
--- /dev/null
+++ b/moq/rollup.config.mjs
@@ -0,0 +1,12 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+
+export default {
+	input: 'src/entry.js',
+	output: {
+		file: 'public/main.js',
+		format: 'iife',
+	},
+	plugins: [nodeResolve(), commonjs(), terser()],
+};
diff --git a/moq/seed-data.js b/moq/seed-data.js
new file mode 100644
index 0000000..6f5e86c
--- /dev/null
+++ b/moq/seed-data.js
@@ -0,0 +1,126 @@
+// file: seed-data.js
+import { nanoid } from 'nanoid';
+import { marked } from 'marked';
+import sanitizeHtml from 'sanitize-html';
+
+const optionsSanitized = {
+	allowedTags: sanitizeHtml.defaults.allowedTags.concat([
+		'img',
+		'h1',
+		'h2',
+		'h3',
+	]),
+	allowedAttributes: Object.assign(
+		{},
+		sanitizeHtml.defaults.allowedAttributes,
+		{
+			img: ['alt', 'src'],
+		}
+	),
+};
+
+/** @param { string } rawHtml */
+const sanitizedFromRaw = (rawHtml) => sanitizeHtml(rawHtml, optionsSanitized);
+
+const WORD_COUNT = 20;
+
+const optionsPlain = {
+	allowedTags: [],
+	allowedAttributes: {},
+};
+
+/** @param { string } rawHtml */
+function excerptFromRaw(rawHtml) {
+	// - strip tags from HTML
+	// - only use the first 20 words
+	const plain = sanitizeHtml(rawHtml, optionsPlain);
+	const words = plain.trim().split(/\s+/);
+	const begin = words.slice(0, WORD_COUNT).join(' ');
+	return words.length > WORD_COUNT ? begin + '…' : begin;
+}
+
+/**
+ * @param { number } size
+ * @param { number } low
+ * @param { number } high
+ */
+function makeEpochMsBetween(size, low, high) {
+	const [start, end] = low < high ? [low, high] : [high, low];
+	const interval = end - start;
+	/** @param {number} value */
+	const interpolate = (value) =>
+		start + Math.floor((interval * value) / 0xffff_ffff);
+	const values = new Uint32Array(size);
+	crypto.getRandomValues(values);
+	values.sort((a, b) => b - a);
+	// Borrow Array's `map` to get regular array instead of TypedArray
+	return /** @type { number[] } */ (
+		Array.prototype.map.call(values, interpolate)
+	);
+}
+
+/** @param { number } timestamp */
+function startOfYear(timestamp) {
+	const date = new Date(timestamp);
+	return new Date(date.getFullYear(), 0, 1).getTime();
+}
+
+/** typedef { [title: string, body: string] } ContentTuple */
+/**
+ * @typedef {{
+ *	id: string,
+ *	title: string,
+ *	body: string,
+ *	excerpt: string,
+ *	html: string,
+ *	createdAt: number,
+ *	updatedAt: number
+ * }} Note
+ */
+
+/** @param { ContentTuple[] } content */
+function makeCollectContent(content) {
+	/**
+	 * @param { Note[] } collect
+	 * @param { number } createdAt
+	 * @param { number } index
+	 */
+	return function (collected, createdAt, index) {
+		const [title, body] = content[index];
+		const rawHtml = /** @type { string } */ (
+			marked.parse(body, { async: false })
+		);
+		collected.push({
+			id: nanoid(),
+			title,
+			body,
+			excerpt: excerptFromRaw(rawHtml),
+			html: sanitizedFromRaw(rawHtml),
+			createdAt,
+			updatedAt: createdAt,
+		});
+		return collected;
+	};
+}
+
+/** @type {ContentTuple[]} */
+const content = [
+	['Meeting Notes', 'This is an example note. It contains **Markdown**!'],
+	[
+		'Make a thing',
+		`It's very easy to make some words **bold** and other words *italic* with
+Markdown. You can even [link to SolidStart's website!](https://start.solidjs.com/).`,
+	],
+	[
+		'A note with a very long title because sometimes you need more words',
+		`You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing) notes in this app! These notes live on the server in the \`.data/notes\` file.
+![This app is powered by SolidStart](https://assets.solidjs.com/banner?project=Start&amp;type=core)`,
+	],
+	['I wrote this note today', 'It was an excellent note.'],
+];
+
+const now = Date.now();
+const created = makeEpochMsBetween(content.length, startOfYear(now), now);
+const json = JSON.stringify(created.reduce(makeCollectContent(content), []));
+
+console.log(json);
diff --git a/moq/src/components/app.js b/moq/src/components/app.js
new file mode 100644
index 0000000..15c61e6
--- /dev/null
+++ b/moq/src/components/app.js
@@ -0,0 +1,36 @@
+// @ts-check
+// file: src/components/app.js
+import { contentById } from '../template';
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const appSource = contentById(document, 'app');
+
+	/**
+	 * @param {{
+	 *		briefList: HTMLElement;
+	 *		newButton: HTMLElement;
+	 *		note: HTMLElement;
+	 *		searchField: HTMLElement;
+	 *	}} param0
+	 */
+	return function makeApp({ briefList, newButton, note, searchField }) {
+		const content = /** @type {HTMLElement} */ (appSource.cloneNode(true));
+
+		const menu = content.querySelector('.c-sidebar__menu');
+		if (!menu)
+			throw new Error('Failed to find ".c-sidebar__menu" in "app" content');
+		menu.append(searchField);
+		menu.append(newButton);
+		menu.insertAdjacentElement('afterend', briefList);
+
+		const noteView = content.querySelector('.c-note-view');
+		if (!noteView)
+			throw new Error('Failed to find "c-note-view" in "app" content');
+		noteView.append(note);
+
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/src/components/brief-list.js b/moq/src/components/brief-list.js
new file mode 100644
index 0000000..3053098
--- /dev/null
+++ b/moq/src/components/brief-list.js
@@ -0,0 +1,61 @@
+// @ts-check
+// file: src/components/note-list.js
+import { contentById, contentItemPairById } from '../template';
+import { makeBriefFlags, makeDefinition as defineBrief } from './brief';
+
+/** @typedef { import('../internal.d.ts').NotePersist } NotePersist */
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const makeBrief = defineBrief(document);
+	const emptySource = contentById(document, 'brief-list__empty');
+	const [contentSource, itemSource] = contentItemPairById(
+		document,
+		'brief-list'
+	);
+
+	/**
+	 * @param { NotePersist[] | string | undefined } notes
+	 * @param { string | undefined } noteId
+	 * @param { string | undefined } nextId
+	 * @param { boolean } [flush=false]
+	 */
+	return function makeBriefList(notes, noteId, nextId, flush = false) {
+		const content = /** @type {HTMLElement} */ (contentSource.cloneNode(true));
+		const [list, search] =
+			typeof notes === 'string'
+				? [undefined, notes.length > 0 ? notes : undefined]
+				: [
+						Array.isArray(notes) && notes.length > 0 ? notes : undefined,
+						undefined,
+					];
+
+		if (!list) {
+			const empty = /** @type {HTMLElement} */ (emptySource.cloneNode(true));
+			empty.appendChild(
+				document.createTextNode(
+					search
+						? `Couldn't find any notes titled "${search}"`
+						: 'No notes created yet!'
+				)
+			);
+			content.replaceChildren(empty);
+			return content;
+		}
+
+		const listRoot = content.firstElementChild;
+		if (listRoot) {
+			const toFlags = makeBriefFlags(noteId, flush, nextId);
+			for (const info of list) {
+				const listItem = /** @type {HTMLLIElement} */ (
+					itemSource.cloneNode(true)
+				);
+				listItem.append(makeBrief(info, toFlags(info.id)));
+				listRoot.append(listItem);
+			}
+		}
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/src/components/brief.js b/moq/src/components/brief.js
new file mode 100644
index 0000000..389074c
--- /dev/null
+++ b/moq/src/components/brief.js
@@ -0,0 +1,120 @@
+// @ts-check
+// file: src/components/note-list.js
+import { contentById } from '../template';
+import { sendBusy } from '../event-bus';
+import { makeBriefDateFormat } from '../date-time';
+
+/** @typedef { import('../internal.d.ts').NotePersist } NotePersist */
+
+const NAME_FLUSH = 'js:c-brief--flash';
+
+/** @typedef { 0 | 1 | 2 | 3 } BriefFlags */
+
+/** @param { BriefFlags } flags */
+const isActive = (flags) => (flags & 0b01) === 0b01;
+/** @param { BriefFlags } flags */
+const isNext = (flags) => flags === 2;
+/** @param { BriefFlags } flags */
+const isFlush = (flags) => flags === 3;
+
+/**
+ * @param { string | undefined } noteId
+ * @param { boolean } flush
+ * @param { string | undefined } nextId
+ * @returns { (id: string) => BriefFlags }
+ */
+function makeBriefFlags(noteId, flush, nextId) {
+	if (noteId) {
+		const noteFlags = flush ? 3 : 1;
+		return nextId
+			? (id) => (nextId === id ? 2 : noteId === id ? noteFlags : 0)
+			: (id) => (id === noteId ? noteFlags : 0);
+	}
+	return nextId ? (id) => (id === nextId ? 2 : 0) : (_id) => 0;
+}
+
+const updateFormat = makeBriefDateFormat(
+	Intl.DateTimeFormat().resolvedOptions()
+);
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const briefSource = contentById(document, 'brief');
+
+	/**
+	 * @param { NotePersist } note
+	 * @param { BriefFlags } [flags]
+	 */
+	return function makeSidebarNote(note, flags = 0) {
+		const content = /** @type {HTMLElement} */ (briefSource.cloneNode(true));
+		content.dataset.noteId = note.id;
+
+		// fill header fields
+		const header = content.querySelector('header');
+		if (header instanceof HTMLElement) {
+			const title = header.querySelector('strong');
+			if (title instanceof HTMLElement)
+				title.appendChild(document.createTextNode(note.title));
+
+			const updated = header.querySelector('time');
+			if (updated instanceof HTMLTimeElement) {
+				const [timeOrDate, dateTime] = updateFormat(note.updatedAt);
+				updated.dateTime = dateTime;
+				updated.appendChild(document.createTextNode(timeOrDate));
+			}
+		}
+
+		// Fill excerpt
+		const excerpt = content.querySelector('.c-brief__summary');
+		if (excerpt instanceof HTMLElement && note.excerpt)
+			excerpt.replaceChildren(document.createTextNode(note.excerpt));
+
+		// Expand/Collapse toggle
+		const summaryState = content.querySelector('input');
+		const summaryToggle = content.querySelector('label');
+		if (
+			summaryState instanceof HTMLInputElement &&
+			summaryToggle instanceof HTMLLabelElement
+		) {
+			summaryState.id = summaryState.id + note.id;
+			summaryToggle.htmlFor = summaryState.id;
+		}
+
+		// Open button
+		const buttonOpen = content.querySelector('.c-brief__open');
+		if (buttonOpen instanceof HTMLButtonElement) {
+			const className = isNext(flags)
+				? 'c-brief--pending'
+				: isActive(flags)
+					? 'c-brief--active'
+					: undefined;
+			if (className) buttonOpen.classList.add(className);
+		}
+
+		// add flushing-note-to-server animation
+		if (isFlush(flags)) {
+			function startFlush() {
+				content.classList.add(NAME_FLUSH);
+				sendBusy(true);
+			}
+
+			/** @param { AnimationEvent } event */
+			function endListener(event) {
+				if (event.animationName === 'flash') {
+					content.classList.remove(NAME_FLUSH);
+					sendBusy(false);
+
+					setTimeout(startFlush, 3000);
+					return;
+				}
+			}
+
+			content.addEventListener('animationend', endListener);
+			startFlush();
+		}
+
+		return content;
+	};
+}
+
+export { makeBriefFlags, makeDefinition };
diff --git a/moq/src/components/edit-button.js b/moq/src/components/edit-button.js
new file mode 100644
index 0000000..9cb64e7
--- /dev/null
+++ b/moq/src/components/edit-button.js
@@ -0,0 +1,30 @@
+// @ts-check
+// file: src/components/edit-button.js
+import { contentById } from '../template';
+import { onBusy } from '../event-bus';
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const buttonSource = contentById(document, 'edit-button');
+
+	/**
+	 *	@param { string } label
+	 *	@param { 'new' | 'edit' } kind
+	 */
+	return function makeEditButton(label, kind) {
+		const content = /** @type {HTMLElement} */ (buttonSource.cloneNode(true));
+
+		const child = document.createTextNode(label);
+		content.appendChild(child);
+		content.classList.add(
+			kind === 'new' ? 'js:c-edit-button--new' : 'js:c-edit-button--update'
+		);
+
+		if (content instanceof HTMLButtonElement)
+			onBusy((busy) => (content.disabled = busy));
+
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/src/components/note-edit.js b/moq/src/components/note-edit.js
new file mode 100644
index 0000000..9d44ae4
--- /dev/null
+++ b/moq/src/components/note-edit.js
@@ -0,0 +1,64 @@
+// @ts-check
+// file: src/components/note-edit.js
+import { contentById } from '../template';
+import { onBusy } from '../event-bus';
+
+/** @typedef { import('../internal.d.ts').NotePersist } NotePersist */
+/** @typedef { ReturnType<import('./note-preview').makeDefinition> } MakeNotePreview */
+
+const INITIAL_TITLE = 'Untitled';
+const INITIAL_BODY = '';
+
+/**
+ * @param { Document } document
+ * @param { MakeNotePreview } makeNotePreview
+ */
+function makeDefinition(document, makeNotePreview) {
+	const editSource = contentById(document, 'note-edit');
+
+	/**
+	 * @param { NotePersist | undefined } note
+	 */
+	return function makeNoteEdit(note) {
+		const content = /** @type {HTMLElement} */ (editSource.cloneNode(true));
+
+		const titleInput = content.querySelector('#note-edit__title');
+		if (titleInput instanceof HTMLInputElement) {
+			titleInput.value = note ? note.title : INITIAL_TITLE;
+		}
+
+		const title = content.querySelector('.c-note-edit__note-title');
+		if (title instanceof HTMLElement) {
+			title.append(document.createTextNode(note ? note.title : INITIAL_TITLE));
+			title.insertAdjacentElement(
+				'afterend',
+				makeNotePreview(note ? note.html : INITIAL_BODY)
+			);
+		}
+
+		const deleteButton = content.querySelector('.c-note-edit__delete');
+		const doneButton = content.querySelector('.c-note-edit__done');
+		if (note) {
+			const body = content.querySelector('#note-edit__body');
+			if (body instanceof HTMLTextAreaElement) body.textContent = note.body;
+		}
+
+		if (
+			doneButton instanceof HTMLButtonElement &&
+			deleteButton instanceof HTMLButtonElement
+		) {
+			if (!note) deleteButton.remove();
+
+			/** @type {(busy: boolean) => void} */
+			const listener = note
+				? (busy) => void (doneButton.disabled = deleteButton.disabled = busy)
+				: (busy) => void (doneButton.disabled = busy);
+
+			onBusy(listener);
+		}
+
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/src/components/note-preview.js b/moq/src/components/note-preview.js
new file mode 100644
index 0000000..ccfcb3f
--- /dev/null
+++ b/moq/src/components/note-preview.js
@@ -0,0 +1,20 @@
+// @ts-check
+// file: src/components/note-preview.js
+import { contentById } from '../template';
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const previewSource = contentById(document, 'note-preview');
+
+	/** @param { string } noteHtml */
+	return function makeNotePreview(noteHtml) {
+		const content = /** @type {HTMLElement} */ (previewSource.cloneNode(true));
+		const wrapper = content.querySelector('.o-from-markdown');
+		if (wrapper instanceof HTMLElement) {
+			wrapper.innerHTML = noteHtml;
+		}
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/src/components/note.js b/moq/src/components/note.js
new file mode 100644
index 0000000..325344e
--- /dev/null
+++ b/moq/src/components/note.js
@@ -0,0 +1,61 @@
+// @ts-check
+// file: src/components/edit-button.js
+import { contentById } from '../template';
+import { makeNoteDateFormat } from '../date-time';
+import { makeDefinition as defineNoteEdit } from './note-edit';
+import { makeDefinition as defineNotePreview } from './note-preview';
+
+/** @typedef { import('../internal.d.ts').NotePersist } NotePersist */
+/** @typedef { ReturnType<import('./edit-button').makeDefinition> } MakeButton */
+
+const updateFormat = makeNoteDateFormat(
+	Intl.DateTimeFormat().resolvedOptions()
+);
+
+/**
+ * @param { Document } document
+ * @param { MakeButton } makeButton
+ */
+function makeDefinition(document, makeButton) {
+	const noteSource = contentById(document, 'note');
+	const noteNoneSource = contentById(document, 'note-none');
+
+	const makeNotePreview = defineNotePreview(document);
+	const makeNoteEdit = defineNoteEdit(document, makeNotePreview);
+
+	/**
+	 *	@param { NotePersist | undefined } note
+	 *	@param { boolean } isEditing
+	 */
+	return function makeNote(note, isEditing) {
+		if (isEditing) return makeNoteEdit(note);
+
+		if (!note)
+			return /** @type {HTMLElement} */ (noteNoneSource.cloneNode(true));
+
+		// Note view
+		const content = /** @type {HTMLElement} */ (noteSource.cloneNode(true));
+
+		const title = content.querySelector('h1');
+		if (title instanceof HTMLElement)
+			title.appendChild(document.createTextNode(note.title));
+
+		const menu = content.querySelector('.c-note__menu');
+		if (menu instanceof HTMLElement) {
+			const updated = content.querySelector('time');
+			if (updated instanceof HTMLTimeElement) {
+				const [updatedOn, dateTime] = updateFormat(note.updatedAt);
+				updated.dateTime = dateTime;
+				updated.appendChild(document.createTextNode(updatedOn));
+			}
+
+			menu.append(makeButton('Edit', 'edit'));
+		}
+
+		content.append(makeNotePreview(note.html));
+
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/src/components/search-field.js b/moq/src/components/search-field.js
new file mode 100644
index 0000000..503e689
--- /dev/null
+++ b/moq/src/components/search-field.js
@@ -0,0 +1,37 @@
+// @ts-check
+// file: src/components/search-field.js
+import { contentById } from '../template';
+
+/** @param { Document } document */
+function makeDefinition(document) {
+	const searchFieldSource = contentById(document, 'search-field');
+
+	/**
+	 * @param { string | undefined } search
+	 * @param { boolean } [isLoading = false]
+	 */
+	return function makeSearchField(search, isLoading = false) {
+		const content = /** @type {HTMLElement} */ (
+			searchFieldSource.cloneNode(true)
+		);
+
+		if (search) {
+			const input = content.querySelector('#search-field__search');
+			if (!(input instanceof HTMLInputElement))
+				throw new Error(
+					'Failed to find "#search-field__search" input in "search-field" content'
+				);
+			input.value = search;
+		}
+
+		const spinner = content.querySelector('.c-spinner');
+		if (spinner instanceof HTMLElement && isLoading) {
+			spinner.classList.add('c-spinner--active');
+			spinner.setAttribute('aria-busy', 'true');
+		}
+
+		return content;
+	};
+}
+
+export { makeDefinition };
diff --git a/moq/src/data.js b/moq/src/data.js
new file mode 100644
index 0000000..c74168c
--- /dev/null
+++ b/moq/src/data.js
@@ -0,0 +1,37 @@
+// @ts-check
+// file: src/data.js
+
+/** @typedef { import('./internal.d.ts').NotePersist } NotePersist */
+
+const jsonContent = document.getElementById('note-data');
+if (!(jsonContent instanceof HTMLScriptElement))
+	throw new Error('Unable to locate "note-data" JSON content.');
+const noteData = /** @type { NotePersist[] } */ (JSON.parse(jsonContent.text));
+
+(function () {
+	if (!Array.isArray(noteData) || noteData.length < 1) return;
+
+	noteData[0].updatedAt = Date.now() - 7200000; // -2hrs
+})();
+
+/**
+ * @param { Map<string, NotePersist>} collect
+ * @param { NotePersist } note
+ */
+const collectNote = (collect, note) => collect.set(note.id, note);
+const noteIndexById = noteData.reduce(collectNote, new Map());
+
+/** @param { string } id */
+const noteById = (id) => noteIndexById.get(id);
+
+/** @param { string | undefined } part */
+function notesWithTitle(part) {
+	if (!part) return noteData;
+
+	const text = part.toLowerCase();
+	/** @param { NotePersist } note */
+	const predicate = (note) => note.title.toLowerCase().includes(text);
+	return noteData.filter(predicate);
+}
+
+export { noteById, notesWithTitle };
diff --git a/moq/src/date-time.js b/moq/src/date-time.js
new file mode 100644
index 0000000..dc2e5bf
--- /dev/null
+++ b/moq/src/date-time.js
@@ -0,0 +1,96 @@
+// @ts-check
+// file: src/date-time.js
+
+/** @type { Intl.ResolvedDateTimeFormatOptions } */
+const defaultOptionsBriefDateFormat = {
+	locale: 'en-GB',
+	timeZone: 'UTC',
+	numberingSystem: 'latn',
+	calendar: 'gregory',
+	hour12: false,
+};
+
+/** @typedef { (epochTimestamp: number) => [local: string, utcIso: string] } FormatFn */
+
+function makeNoteDateFormat({
+	locale,
+	timeZone,
+	hour12,
+} = defaultOptionsBriefDateFormat) {
+	const display = Intl.DateTimeFormat(locale, {
+		timeZone,
+		hour12,
+		dateStyle: 'medium',
+		timeStyle: 'short',
+	});
+
+	/** @type { FormatFn } */
+	const format = function format(epochTimestamp) {
+		const dateTime = new Date(epochTimestamp);
+		return [display.format(dateTime), dateTime.toISOString()];
+	};
+	return format;
+}
+
+function makeBriefDateFormat({
+	locale,
+	timeZone,
+	hour12,
+} = defaultOptionsBriefDateFormat) {
+	const dateOnly = Intl.DateTimeFormat(locale, {
+		timeZone,
+		hour12,
+		dateStyle: 'short',
+	});
+	const timeOnly = Intl.DateTimeFormat(locale, {
+		timeZone,
+		hour12,
+		timeStyle: 'short',
+	});
+	let today = new Date();
+
+	/** @type { FormatFn } */
+	const format = function format(epochTimestamp, resetToday = false) {
+		if (resetToday) today = new Date();
+
+		const dateTime = new Date(epochTimestamp);
+		const display =
+			dateTime.getDate() === today.getDate() &&
+			dateTime.getMonth() === today.getMonth() &&
+			dateTime.getFullYear() === today.getFullYear()
+				? timeOnly.format(dateTime)
+				: dateOnly.format(dateTime);
+
+		return [display, dateTime.toISOString()];
+	};
+
+	return format;
+}
+
+/**
+ * @param { FormatFn } format
+ * @param { HTMLElement | undefined } timeAncestor
+ * @returns void
+ */
+/*
+function localizeFormat(
+	format,
+	timeAncestor
+) {
+	if (!(timeAncestor instanceof HTMLElement))
+		throw new Error('Unsuitable ancestor element');
+
+	const time = timeAncestor.querySelector('time');
+	if (!(time instanceof HTMLTimeElement))
+		throw new Error('Unable to locate time element under specified ancestor');
+
+	const current = time.textContent;
+	if (!current) return;
+	// i.e. nothing to do (CSR waiting for async content)
+
+	const epochTimestamp = Date.parse(time.dateTime);
+	const [local] = format(epochTimestamp);
+	if (current !== local) time.textContent = local;
+}
+*/
+export { /* localizeFormat, */ makeBriefDateFormat, makeNoteDateFormat };
diff --git a/moq/src/entry.js b/moq/src/entry.js
new file mode 100644
index 0000000..0d54e65
--- /dev/null
+++ b/moq/src/entry.js
@@ -0,0 +1,37 @@
+// @ts-check
+// file: src/entry.js
+import { noteById, notesWithTitle } from './data';
+import { urlToParams } from './params';
+import { makeDefinition as defineApp } from './components/app';
+import { makeDefinition as defineEditButton } from './components/edit-button';
+import { makeDefinition as defineNote } from './components/note';
+import { makeDefinition as defineBriefList } from './components/brief-list';
+import { makeDefinition as defineSearchField } from './components/search-field';
+
+/** typedef { import('./internal.d.ts').NotePersist } NotePersist */
+
+const makeApp = defineApp(document);
+const makeEditButton = defineEditButton(document);
+const makeNote = defineNote(document, makeEditButton);
+const makeBriefList = defineBriefList(document);
+const makeSearchField = defineSearchField(document);
+
+/** @param {ReturnType<typeof urlToParams>} param0 */
+function assemble({ flushNote, isEditing, nextId, noteId, search }) {
+	const notes = notesWithTitle(search);
+	const notesOrEmptySearch = notes.length > 0 ? notes : search;
+	const note = noteId ? noteById(noteId) : undefined;
+	const isLoading = Boolean(nextId);
+
+	return makeApp({
+		briefList: makeBriefList(notesOrEmptySearch, note?.id, nextId, flushNote),
+		newButton: makeEditButton('New', 'new'),
+		note: makeNote(note, isEditing),
+		searchField: makeSearchField(search, isLoading),
+	});
+}
+
+const state = urlToParams(new URL(document.location.href));
+document.title = state.title;
+const body = /** @type {HTMLBodyElement} */ (document.querySelector('body'));
+body.prepend(assemble(state));
diff --git a/moq/src/event-bus.js b/moq/src/event-bus.js
new file mode 100644
index 0000000..96920a3
--- /dev/null
+++ b/moq/src/event-bus.js
@@ -0,0 +1,13 @@
+// @ts-check
+// file: src/event-bus.js
+
+/** @param { (busy: boolean) => void } listener */
+function onBusy(listener) {
+	document.addEventListener('moq-busy', (event) => listener(event.detail));
+}
+
+/** @param { boolean } busy */
+const sendBusy = (busy) =>
+	document.dispatchEvent(new CustomEvent('moq-busy', { detail: busy }));
+
+export { onBusy, sendBusy };
diff --git a/moq/src/internal.d.ts b/moq/src/internal.d.ts
new file mode 100644
index 0000000..68785c2
--- /dev/null
+++ b/moq/src/internal.d.ts
@@ -0,0 +1,23 @@
+interface CustomEventMap {
+	'moq-busy': CustomEvent<boolean>;
+}
+
+declare global {
+	interface Document {
+		addEventListener<K extends keyof CustomEventMap>(
+			type: K,
+			listener: (this: Document, ev: CustomEventMap[K]) => void
+		): void;
+		dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
+	}
+}
+
+export type NotePersist = {
+	id: string;
+	title: string;
+	body: string;
+	excerpt: string;
+	html: string;
+	createdAt: number;
+	updatedAt: number;
+};
diff --git a/moq/src/params.js b/moq/src/params.js
new file mode 100644
index 0000000..7c86ea5
--- /dev/null
+++ b/moq/src/params.js
@@ -0,0 +1,80 @@
+// @ts-check
+// file: src/params.js
+
+const MAIN_TITLE = 'SolidStart Notes';
+
+/** @param { string= } title */
+const makeTitle = (title) => (title ? `${title} - ${MAIN_TITLE}` : MAIN_TITLE);
+
+/**
+ * @param { string } pathname
+ * @returns { never }
+ */
+function invalidPath(pathname) {
+	throw new Error(`Invalid path "${pathname}"`);
+}
+
+/** @param { string } pathname */
+function pathToParams(pathname) {
+	const parts = pathname.split('/');
+	// `/`
+	if (parts.length === 2 && parts[1].length === 0)
+		return { noteId: undefined, isEditing: false, title: makeTitle() };
+
+	if (parts.length > 2 && parts[1] === 'note') {
+		// `/note/new`
+		if (parts.length === 3 && parts[2] === 'new')
+			return {
+				noteId: undefined,
+				isEditing: true,
+				title: makeTitle('New Note'),
+			};
+
+		if (parts.length < 5 && parts[2].length > 0) {
+			// `/note/:noteId`
+			if (parts.length === 3)
+				return {
+					noteId: parts[2],
+					isEditing: false,
+					title: makeTitle(parts[2]),
+				};
+
+			// `/note/:noteId/edit`
+			if (parts[3] === 'edit')
+				return {
+					noteId: parts[2],
+					isEditing: true,
+					title: makeTitle(`Edit ${parts[2]}`),
+				};
+
+			invalidPath(pathname);
+		}
+
+		invalidPath(pathname);
+	}
+
+	invalidPath(pathname);
+}
+
+/** @param { URL } url */
+function urlToParams(url) {
+	const { isEditing, noteId, title } = pathToParams(url.pathname);
+	const searchParams = url.searchParams;
+	const searchText = searchParams.get('search') ?? undefined;
+
+	const nextNoteId = searchParams.get('moqnextid') ?? undefined;
+
+	return {
+		flushNote: searchParams.has('moqflush'),
+		isEditing,
+		nextId: nextNoteId && nextNoteId.length > 0 ? nextNoteId : undefined,
+		noteId,
+		search:
+			typeof searchText === 'string' && searchText.length > 0
+				? searchText
+				: undefined,
+		title,
+	};
+}
+
+export { urlToParams };
diff --git a/moq/src/template.js b/moq/src/template.js
new file mode 100644
index 0000000..fd55b3e
--- /dev/null
+++ b/moq/src/template.js
@@ -0,0 +1,34 @@
+// @ts-check
+// file: src/template.js
+/**
+ * @param { Document } document
+ * @param { string } id
+ */
+function contentById(document, id) {
+	const template = document.querySelector(`#${id}`);
+	if (!(template instanceof HTMLTemplateElement))
+		throw new Error(`Can't find template for ID "${id}"`);
+
+	const content = template.content.firstElementChild;
+	if (!(content instanceof HTMLElement))
+		throw new Error(`Invalid root for template ID "${id}"`);
+
+	return content;
+}
+
+/**
+ * @param { Document } document
+ * @param { string } id
+ */
+function contentItemPairById(document, id) {
+	const content = contentById(document, id);
+
+	const item = content.querySelector('li');
+	if (!(item instanceof HTMLLIElement))
+		throw new Error(`Template ID "${id}" does not contain list item`);
+
+	item.remove();
+	return [content, item];
+}
+
+export { contentById, contentItemPairById };
diff --git a/moq/src/tsconfig.json b/moq/src/tsconfig.json
new file mode 100644
index 0000000..e81ec1f
--- /dev/null
+++ b/moq/src/tsconfig.json
@@ -0,0 +1,8 @@
+{
+	"extends": "../tsconfig.base.json",
+	"compilerOptions": {
+		"module": "ESNext",
+		"lib": ["ES2020", "DOM", "DOM.Iterable"]
+	},
+	"files": ["entry.js"]
+}
diff --git a/moq/tsconfig.base.json b/moq/tsconfig.base.json
new file mode 100644
index 0000000..75d9d30
--- /dev/null
+++ b/moq/tsconfig.base.json
@@ -0,0 +1,17 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"skipLibCheck": true,
+
+		/* Linting */
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"strict": true,
+		"checkJs": true,
+		"allowJs": true,
+		"declaration": true,
+		"outDir": "types"
+	}
+}
diff --git a/moq/tsconfig.json b/moq/tsconfig.json
new file mode 100644
index 0000000..10abe41
--- /dev/null
+++ b/moq/tsconfig.json
@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.base.json",
+	"compilerOptions": {
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext",
+		"allowSyntheticDefaultImports": true
+	},
+	"files": ["index.js"]
+}
diff --git a/package.json b/package.json
index 34e38c5..70ca830 100644
--- a/package.json
+++ b/package.json
@@ -13,16 +13,16 @@
   },
   "dependencies": {
     "@solidjs/meta": "^0.29.3",
-    "@solidjs/router": "^0.10.10",
-    "@solidjs/start": "^0.4.11",
-    "dompurify": "^3.0.8",
-    "marked": "^11.1.1",
-    "nanoid": "^5.0.4",
+    "@solidjs/router": "^0.12.4",
+    "@solidjs/start": "^0.5.10",
+    "dompurify": "^3.0.9",
+    "marked": "^12.0.0",
+    "nanoid": "^5.0.6",
     "rxjs": "8.0.0-alpha.14",
-    "sanitize-html": "^2.11.0",
-    "solid-js": "^1.8.12",
+    "sanitize-html": "^2.12.1",
+    "solid-js": "^1.8.15",
     "unstorage": "^1.10.1",
-    "vinxi": "^0.1.10"
+    "vinxi": "^0.2.1"
   },
   "engines": {
     "node": ">=18"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f28b233..852f257 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,37 +7,37 @@ settings:
 dependencies:
   '@solidjs/meta':
     specifier: ^0.29.3
-    version: 0.29.3(solid-js@1.8.12)
+    version: 0.29.3(solid-js@1.8.15)
   '@solidjs/router':
-    specifier: ^0.10.10
-    version: 0.10.10(solid-js@1.8.12)
+    specifier: ^0.12.4
+    version: 0.12.4(solid-js@1.8.15)
   '@solidjs/start':
-    specifier: ^0.4.11
-    version: 0.4.11(solid-js@1.8.12)(vinxi@0.1.10)(vite@5.0.11)
+    specifier: ^0.5.10
+    version: 0.5.10(solid-js@1.8.15)(vinxi@0.2.1)(vite@5.0.11)
   dompurify:
-    specifier: ^3.0.8
-    version: 3.0.8
+    specifier: ^3.0.9
+    version: 3.0.9
   marked:
-    specifier: ^11.1.1
-    version: 11.1.1
+    specifier: ^12.0.0
+    version: 12.0.0
   nanoid:
-    specifier: ^5.0.4
-    version: 5.0.4
+    specifier: ^5.0.6
+    version: 5.0.6
   rxjs:
     specifier: 8.0.0-alpha.14
     version: 8.0.0-alpha.14
   sanitize-html:
-    specifier: ^2.11.0
-    version: 2.11.0
+    specifier: ^2.12.1
+    version: 2.12.1
   solid-js:
-    specifier: ^1.8.12
-    version: 1.8.12
+    specifier: ^1.8.15
+    version: 1.8.15
   unstorage:
     specifier: ^1.10.1
     version: 1.10.1
   vinxi:
-    specifier: ^0.1.10
-    version: 0.1.10(preact@10.19.3)(sass@1.69.7)
+    specifier: ^0.2.1
+    version: 0.2.1(preact@10.19.3)(sass@1.69.7)
 
 devDependencies:
   '@types/dompurify':
@@ -151,24 +151,6 @@ packages:
       semver: 6.3.1
     dev: false
 
-  /@babel/helper-create-class-features-plugin@7.23.7(@babel/core@7.23.7):
-    resolution: {integrity: sha512-xCoqR/8+BoNnXOY7RVSgv6X+o7pmT5q1d+gGcRlXYkI+9B31glE4jeejhKVpA04O1AtzOt7OSQ6VYKP5FcRl9g==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.7
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.7)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      semver: 6.3.1
-    dev: false
-
   /@babel/helper-environment-visitor@7.22.20:
     resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
     engines: {node: '>=6.9.0'}
@@ -189,13 +171,6 @@ packages:
       '@babel/types': 7.23.6
     dev: false
 
-  /@babel/helper-member-expression-to-functions@7.23.0:
-    resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.6
-    dev: false
-
   /@babel/helper-module-imports@7.18.6:
     resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
     engines: {node: '>=6.9.0'}
@@ -224,30 +199,11 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
     dev: false
 
-  /@babel/helper-optimise-call-expression@7.22.5:
-    resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.6
-    dev: false
-
   /@babel/helper-plugin-utils@7.22.5:
     resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
     engines: {node: '>=6.9.0'}
     dev: false
 
-  /@babel/helper-replace-supers@7.22.20(@babel/core@7.23.7):
-    resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.7
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-    dev: false
-
   /@babel/helper-simple-access@7.22.5:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
@@ -255,13 +211,6 @@ packages:
       '@babel/types': 7.23.6
     dev: false
 
-  /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
-    resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.6
-    dev: false
-
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
@@ -332,18 +281,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
-  /@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.7):
-    resolution: {integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.7
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.7)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-simple-access': 7.22.5
-    dev: false
-
   /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.23.7):
     resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==}
     engines: {node: '>=6.9.0'}
@@ -368,33 +305,6 @@ packages:
       '@babel/types': 7.23.6
     dev: false
 
-  /@babel/plugin-transform-typescript@7.23.6(@babel/core@7.23.7):
-    resolution: {integrity: sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.7
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.23.7(@babel/core@7.23.7)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.7)
-    dev: false
-
-  /@babel/preset-typescript@7.23.3(@babel/core@7.23.7):
-    resolution: {integrity: sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.7
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.7)
-      '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.7)
-      '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.7)
-    dev: false
-
   /@babel/template@7.22.15:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
@@ -1454,46 +1364,47 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /@solidjs/meta@0.29.3(solid-js@1.8.12):
+  /@solidjs/meta@0.29.3(solid-js@1.8.15):
     resolution: {integrity: sha512-R2uirgjgyh3FPFh+rb840plF701N6GvM5w81/QeI61QwjXb4QzLkyI/uzXfC5UW8favpUn9KK9ILQeoTl6pX0A==}
     peerDependencies:
       solid-js: '>=1.8.4'
     dependencies:
-      solid-js: 1.8.12
+      solid-js: 1.8.15
     dev: false
 
-  /@solidjs/router@0.10.10(solid-js@1.8.12):
-    resolution: {integrity: sha512-nGl7gMgsojuaupI5MAK2cFtkndmWWSAPhill/8La3IjujY3vMBamcQFymBsA2ejzxEYJjkOlEQHYgp2jNFkwuQ==}
+  /@solidjs/router@0.12.4(solid-js@1.8.15):
+    resolution: {integrity: sha512-2S5QWYmpWSIWn5ei85eoStEMmECERX2BiBkEvmqYDrgX79I8D95YaWVdHbcFGOxISPTY4TP7RxjRiofs/AIFJQ==}
     peerDependencies:
       solid-js: ^1.8.6
     dependencies:
-      solid-js: 1.8.12
+      solid-js: 1.8.15
     dev: false
 
-  /@solidjs/router@0.8.4(solid-js@1.8.12):
+  /@solidjs/router@0.8.4(solid-js@1.8.15):
     resolution: {integrity: sha512-Gi/WVoVseGMKS1DBdT3pNAMgOzEOp6Q3dpgNd2mW9GUEnVocPmtyBjDvXwN6m7tjSGsqqfqJFXk7bm1hxabSRw==}
     peerDependencies:
       solid-js: ^1.5.3
     dependencies:
-      solid-js: 1.8.12
+      solid-js: 1.8.15
     dev: false
 
-  /@solidjs/start@0.4.11(solid-js@1.8.12)(vinxi@0.1.10)(vite@5.0.11):
-    resolution: {integrity: sha512-UdOiUwwM2C0nf7EzCyWT+Jx2UZWSzwir0+JMtazGWSgft1k1qF81UroAR6PzcrC/TyhvW+XVz73dMAP310oSVA==}
+  /@solidjs/start@0.5.10(solid-js@1.8.15)(vinxi@0.2.1)(vite@5.0.11):
+    resolution: {integrity: sha512-hAZ5V9gwo6YBrfk6dzOTKTFyx3KebK2a5nZNcQ3HAUSeRs89cEPxvATnMe0Qh2Vea/PCssqodb0jWbPAnlUp3Q==}
     dependencies:
-      '@vinxi/plugin-directives': 0.1.3(vinxi@0.1.10)
-      '@vinxi/server-components': 0.1.3(vinxi@0.1.10)
-      '@vinxi/server-functions': 0.1.4(vinxi@0.1.10)
+      '@vinxi/plugin-directives': 0.2.0(vinxi@0.2.1)
+      '@vinxi/server-components': 0.2.0(vinxi@0.2.1)
+      '@vinxi/server-functions': 0.2.1(vinxi@0.2.1)
       defu: 6.1.4
       error-stack-parser: 2.1.4
       html-to-image: 1.11.11
+      radix3: 1.1.0
       seroval: 1.0.4
       seroval-plugins: 1.0.4(seroval@1.0.4)
       shikiji: 0.9.19
       source-map-js: 1.0.2
-      terracotta: 1.0.4(seroval@1.0.4)(solid-js@1.8.12)
+      terracotta: 1.0.4(seroval@1.0.4)(solid-js@1.8.15)
       vite-plugin-inspect: 0.7.42(vite@5.0.11)
-      vite-plugin-solid: 2.9.1(solid-js@1.8.12)(vite@5.0.11)
+      vite-plugin-solid: 2.9.1(solid-js@1.8.15)(vite@5.0.11)
     transitivePeerDependencies:
       - '@nuxt/kit'
       - '@testing-library/jest-dom'
@@ -1766,19 +1677,20 @@ packages:
       - supports-color
     dev: false
 
-  /@vinxi/devtools@0.1.1(@babel/core@7.23.7)(preact@10.19.3)(vite@4.5.0):
-    resolution: {integrity: sha512-/A7X1hoNBsgC2n7nKOWbIa4cTt9dJq9nehyLGdNxgjEcGzbsaJrofUDrFLt+0YJlyb7OOhFEPYHRCat3tsrytw==}
+  /@vinxi/devtools@0.2.0(@babel/core@7.23.7)(preact@10.19.3)(vite@4.5.0):
+    resolution: {integrity: sha512-LpQp5zbiBhV4eo2w6AiJFtpZZj4LaRBOnzggIPTeSJYvgrxRMAqe/34Har3vVo+b7sPOjxFbE1zHZhLzaAcidw==}
     dependencies:
       '@preact/preset-vite': 2.8.1(@babel/core@7.23.7)(preact@10.19.3)(vite@4.5.0)
-      '@solidjs/router': 0.8.4(solid-js@1.8.12)
+      '@solidjs/router': 0.8.4(solid-js@1.8.15)
       birpc: 0.2.14
-      solid-js: 1.8.12
+      solid-js: 1.8.15
       vite-plugin-inspect: 0.7.42(vite@4.5.0)
-      vite-plugin-solid: 2.8.0(solid-js@1.8.12)(vite@4.5.0)
+      vite-plugin-solid: 2.9.1(solid-js@1.8.15)(vite@4.5.0)
       ws: 8.16.0
     transitivePeerDependencies:
       - '@babel/core'
       - '@nuxt/kit'
+      - '@testing-library/jest-dom'
       - bufferutil
       - preact
       - rollup
@@ -1810,10 +1722,10 @@ packages:
       uqr: 0.1.2
     dev: false
 
-  /@vinxi/plugin-directives@0.1.3(vinxi@0.1.10):
-    resolution: {integrity: sha512-gXCvemIQIxEjUlJRUyQUAoL9lT6iY39uEZXCFzONYRIelnI2PJ1DyAz44ieCdOdAVCWBYKwyYVG5jZRYaV26pQ==}
+  /@vinxi/plugin-directives@0.2.0(vinxi@0.2.1):
+    resolution: {integrity: sha512-DoYuIuvdylU+0XNOipvcbw08XDBBbEksc3euCsbApNVpmQ/mC+2CjoErHtjb4zX1RqNwe1sJ8awMK6fKUMLGRA==}
     peerDependencies:
-      vinxi: ^0.1.5
+      vinxi: ^0.2.0
     dependencies:
       '@babel/parser': 7.23.6
       acorn: 8.11.3
@@ -1824,37 +1736,37 @@ packages:
       magicast: 0.2.11
       recast: 0.23.4
       tslib: 2.6.2
-      vinxi: 0.1.10(preact@10.19.3)(sass@1.69.7)
+      vinxi: 0.2.1(preact@10.19.3)(sass@1.69.7)
     dev: false
 
-  /@vinxi/server-components@0.1.3(vinxi@0.1.10):
-    resolution: {integrity: sha512-QcvNeu0y1SZewg5QzK/zRdho8gJz99MlMLfda1aWIfYFHWWaOr7zMFbXsZh0Qcs7PYx0gHvqUXNLUmUW3/2XWg==}
+  /@vinxi/server-components@0.2.0(vinxi@0.2.1):
+    resolution: {integrity: sha512-U3z6pxK5CWBxaUmyg7zdDMTl1AMa47MpYCUcs0QVOz/C8kKlT6C9Ozh5pZWuzAO0cTeueNpQumDWhQ4YTXTsZw==}
     peerDependencies:
-      vinxi: ^0.1.5
+      vinxi: ^0.2.0
     dependencies:
-      '@vinxi/plugin-directives': 0.1.3(vinxi@0.1.10)
+      '@vinxi/plugin-directives': 0.2.0(vinxi@0.2.1)
       acorn: 8.11.3
       acorn-loose: 8.4.0
       acorn-typescript: 1.4.13(acorn@8.11.3)
       astring: 1.8.6
       magicast: 0.2.11
       recast: 0.23.4
-      vinxi: 0.1.10(preact@10.19.3)(sass@1.69.7)
+      vinxi: 0.2.1(preact@10.19.3)(sass@1.69.7)
     dev: false
 
-  /@vinxi/server-functions@0.1.4(vinxi@0.1.10):
-    resolution: {integrity: sha512-ZysR6zlcZ4xYBKUm6Q/oNhjjwUZXaLFLbXwIy9Q2SgcXJ74cUWQ0/EDz/WePhHgQ32NMiv2fPURBvN+XDzBO8g==}
+  /@vinxi/server-functions@0.2.1(vinxi@0.2.1):
+    resolution: {integrity: sha512-ir06Q6nEpJFU1uXqHdKE2OXqZFjChAIgAHpCJzMunHiutRNyYTJ7ZhbFCUk5xOx+StMpWKtqOv72TDeP/xTLtA==}
     peerDependencies:
-      vinxi: ^0.1.9
+      vinxi: ^0.2.1
     dependencies:
-      '@vinxi/plugin-directives': 0.1.3(vinxi@0.1.10)
+      '@vinxi/plugin-directives': 0.2.0(vinxi@0.2.1)
       acorn: 8.11.3
       acorn-loose: 8.4.0
       acorn-typescript: 1.4.13(acorn@8.11.3)
       astring: 1.8.6
       magicast: 0.2.11
       recast: 0.23.4
-      vinxi: 0.1.10(preact@10.19.3)(sass@1.69.7)
+      vinxi: 0.2.1(preact@10.19.3)(sass@1.69.7)
     dev: false
 
   /abbrev@1.1.1:
@@ -2525,8 +2437,8 @@ packages:
     dependencies:
       domelementtype: 2.3.0
 
-  /dompurify@3.0.8:
-    resolution: {integrity: sha512-b7uwreMYL2eZhrSCRC4ahLTeZcPZxSmYfmcQGXGkXiZSNW1X85v+SDM5KsWcpivIiUBH47Ji7NtyUdpLeF5JZQ==}
+  /dompurify@3.0.9:
+    resolution: {integrity: sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ==}
     dev: false
 
   /domutils@3.1.0:
@@ -3712,8 +3624,8 @@ packages:
       semver: 6.3.1
     dev: false
 
-  /marked@11.1.1:
-    resolution: {integrity: sha512-EgxRjgK9axsQuUa/oKMx5DEY8oXpKJfk61rT5iY3aRlgU6QJtUcxU5OAymdhCvWvhYcd9FKmO5eQoX8m9VGJXg==}
+  /marked@12.0.0:
+    resolution: {integrity: sha512-Vkwtq9rLqXryZnWaQc86+FHLC6tr/fycMfYAhiOIXkrNmeGAyhSxjqu0Rs1i0bBqw5u0S7+lV9fdH2ZSVaoa0w==}
     engines: {node: '>= 18'}
     hasBin: true
     dev: false
@@ -3843,8 +3755,8 @@ packages:
     hasBin: true
     dev: false
 
-  /nanoid@5.0.4:
-    resolution: {integrity: sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==}
+  /nanoid@5.0.6:
+    resolution: {integrity: sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==}
     engines: {node: ^18 || >=20}
     hasBin: true
     dev: false
@@ -4477,8 +4389,8 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: false
 
-  /sanitize-html@2.11.0:
-    resolution: {integrity: sha512-BG68EDHRaGKqlsNjJ2xUB7gpInPA8gVx/mvjO743hZaeMCZ2DwzW7xvsqZ+KNU4QKwj86HJ3uu2liISf2qBBUA==}
+  /sanitize-html@2.12.1:
+    resolution: {integrity: sha512-Plh+JAn0UVDpBRP/xEjsk+xDCoOvMBwQUf/K+/cBAVuTbtX8bj2VB7S1sL1dssVpykqp0/KPSesHrqXtokVBpA==}
     dependencies:
       deepmerge: 4.3.1
       escape-string-regexp: 4.0.0
@@ -4647,26 +4559,15 @@ packages:
     resolution: {integrity: sha512-9LK+E7Hv5R9u4g4C3p+jjLstaLe11MDsL21UpYaCNmapvMkYhqCV4A/f/3gyH8QjMyh6l68q9xC85vihY9ahMQ==}
     dev: false
 
-  /solid-js@1.8.12:
-    resolution: {integrity: sha512-sLE/i6M9FSWlov3a2pTC5ISzanH2aKwqXTZj+bbFt4SUrVb4iGEa7fpILBMOxsQjkv3eXqEk6JVLlogOdTe0UQ==}
+  /solid-js@1.8.15:
+    resolution: {integrity: sha512-d0QP/efr3UVcwGgWVPveQQ0IHOH6iU7yUhc2piy8arNG8wxKmvUy1kFxyF8owpmfCWGB87usDKMaVnsNYZm+Vw==}
     dependencies:
       csstype: 3.1.3
       seroval: 1.0.4
       seroval-plugins: 1.0.4(seroval@1.0.4)
     dev: false
 
-  /solid-refresh@0.5.3(solid-js@1.8.12):
-    resolution: {integrity: sha512-Otg5it5sjOdZbQZJnvo99TEBAr6J7PQ5AubZLNU6szZzg3RQQ5MX04oteBIIGDs0y2Qv8aXKm9e44V8z+UnFdw==}
-    peerDependencies:
-      solid-js: ^1.3
-    dependencies:
-      '@babel/generator': 7.23.6
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/types': 7.23.6
-      solid-js: 1.8.12
-    dev: false
-
-  /solid-refresh@0.6.3(solid-js@1.8.12):
+  /solid-refresh@0.6.3(solid-js@1.8.15):
     resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==}
     peerDependencies:
       solid-js: ^1.3
@@ -4674,10 +4575,10 @@ packages:
       '@babel/generator': 7.23.6
       '@babel/helper-module-imports': 7.22.15
       '@babel/types': 7.23.6
-      solid-js: 1.8.12
+      solid-js: 1.8.15
     dev: false
 
-  /solid-use@0.7.2(seroval@1.0.4)(solid-js@1.8.12):
+  /solid-use@0.7.2(seroval@1.0.4)(solid-js@1.8.15):
     resolution: {integrity: sha512-ZJbTj55W4VF2NSg86+PFioWOAI7STrZ6+38vuEWl6IB4ZBm7Q1U/Mncf+T/zc9e1xUk+4/FfFfM9ZaroycNKNw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -4688,7 +4589,7 @@ packages:
         optional: true
     dependencies:
       seroval: 1.0.4
-      solid-js: 1.8.12
+      solid-js: 1.8.15
     dev: false
 
   /source-map-js@1.0.2:
@@ -4849,14 +4750,14 @@ packages:
       yallist: 4.0.0
     dev: false
 
-  /terracotta@1.0.4(seroval@1.0.4)(solid-js@1.8.12):
+  /terracotta@1.0.4(seroval@1.0.4)(solid-js@1.8.15):
     resolution: {integrity: sha512-tMy152HBz6NehMYR63Phv9Zr+axhoKbHIuejurRa220J8zVKJ/L9hyjsiEC7WzjTdjherWe8g/ECYb3+jG/bBA==}
     engines: {node: '>=10'}
     peerDependencies:
       solid-js: ^1.8
     dependencies:
-      solid-js: 1.8.12
-      solid-use: 0.7.2(seroval@1.0.4)(solid-js@1.8.12)
+      solid-js: 1.8.15
+      solid-use: 0.7.2(seroval@1.0.4)(solid-js@1.8.15)
     transitivePeerDependencies:
       - seroval
     dev: false
@@ -5159,8 +5060,8 @@ packages:
     resolution: {integrity: sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==}
     dev: false
 
-  /vinxi@0.1.10(preact@10.19.3)(sass@1.69.7):
-    resolution: {integrity: sha512-MndPaR3fUx6FERfB2adWVkTw7qTAhSStM+A2KaqU2qUGMEk51krkKB28ouf+iG6IJGoAtuE+fANUs0hqOLMk2A==}
+  /vinxi@0.2.1(preact@10.19.3)(sass@1.69.7):
+    resolution: {integrity: sha512-zrgFO2XuKpdoW5VwlbieeQ0YhzMuuYCJyFWFyj41h9BnymHZ5dnKElALvFQn5JVzHhyrsdmlm8GU7tIuH786hw==}
     hasBin: true
     dependencies:
       '@babel/core': 7.23.7
@@ -5169,7 +5070,7 @@ packages:
       '@types/micromatch': 4.0.6
       '@types/serve-static': 1.15.5
       '@types/ws': 8.5.10
-      '@vinxi/devtools': 0.1.1(@babel/core@7.23.7)(preact@10.19.3)(vite@4.5.0)
+      '@vinxi/devtools': 0.2.0(@babel/core@7.23.7)(preact@10.19.3)(vite@4.5.0)
       '@vinxi/listhen': 1.5.6
       boxen: 7.1.1
       c12: 1.6.1
@@ -5219,6 +5120,7 @@ packages:
       - '@netlify/blobs'
       - '@nuxt/kit'
       - '@planetscale/database'
+      - '@testing-library/jest-dom'
       - '@types/node'
       - '@upstash/redis'
       - '@vercel/kv'
@@ -5287,26 +5189,29 @@ packages:
       - supports-color
     dev: false
 
-  /vite-plugin-solid@2.8.0(solid-js@1.8.12)(vite@4.5.0):
-    resolution: {integrity: sha512-n5FAm7ZmTl94VWUoiJCgG7bouF2NlC9CA1wY/qbVnkFbYDWk++bFWyNoU48aLJ+lMtzNeYzJypJXOHzFKxL9xA==}
+  /vite-plugin-solid@2.9.1(solid-js@1.8.15)(vite@4.5.0):
+    resolution: {integrity: sha512-RC4hj+lbvljw57BbMGDApvEOPEh14lwrr/GeXRLNQLcR1qnOdzOwwTSFy13Gj/6FNIZpBEl0bWPU+VYFawrqUw==}
     peerDependencies:
+      '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.*
       solid-js: ^1.7.2
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      '@testing-library/jest-dom':
+        optional: true
     dependencies:
       '@babel/core': 7.23.7
-      '@babel/preset-typescript': 7.23.3(@babel/core@7.23.7)
       '@types/babel__core': 7.20.5
       babel-preset-solid: 1.8.9(@babel/core@7.23.7)
       merge-anything: 5.1.7
-      solid-js: 1.8.12
-      solid-refresh: 0.5.3(solid-js@1.8.12)
+      solid-js: 1.8.15
+      solid-refresh: 0.6.3(solid-js@1.8.15)
       vite: 4.5.0(sass@1.69.7)
       vitefu: 0.2.5(vite@4.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /vite-plugin-solid@2.9.1(solid-js@1.8.12)(vite@5.0.11):
+  /vite-plugin-solid@2.9.1(solid-js@1.8.15)(vite@5.0.11):
     resolution: {integrity: sha512-RC4hj+lbvljw57BbMGDApvEOPEh14lwrr/GeXRLNQLcR1qnOdzOwwTSFy13Gj/6FNIZpBEl0bWPU+VYFawrqUw==}
     peerDependencies:
       '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.*
@@ -5320,8 +5225,8 @@ packages:
       '@types/babel__core': 7.20.5
       babel-preset-solid: 1.8.9(@babel/core@7.23.7)
       merge-anything: 5.1.7
-      solid-js: 1.8.12
-      solid-refresh: 0.6.3(solid-js@1.8.12)
+      solid-js: 1.8.15
+      solid-refresh: 0.6.3(solid-js@1.8.15)
       vite: 5.0.11(sass@1.69.7)
       vitefu: 0.2.5(vite@5.0.11)
     transitivePeerDependencies:
diff --git a/src/api.ts b/src/api.ts
index 2cb0317..5298120 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -19,15 +19,15 @@ const NAME_EDIT_ACTION = 'edit-action';
 const NAME_GET_BRIEFS = 'briefs';
 const NAME_GET_NOTE = 'note';
 
-const getBriefs = cache<
-	(search: string | undefined) => Promise<NoteBrief[]>,
-	Promise<NoteBrief[]>
->(async (search: string | undefined) => getBf(search), NAME_GET_BRIEFS);
+const getBriefs = cache<(search: string | undefined) => Promise<NoteBrief[]>>(
+	async (search: string | undefined) => getBf(search),
+	NAME_GET_BRIEFS
+);
 
-const getNote = cache<
-	(noteId: string) => Promise<Note | undefined>,
-	Promise<Note | undefined>
->(async (noteId: string) => getNt(noteId), NAME_GET_NOTE);
+const getNote = cache<(noteId: string) => Promise<Note | undefined>>(
+	async (noteId: string) => getNt(noteId),
+	NAME_GET_NOTE
+);
 
 const editAction = action(async (data: FormData) => {
 	const intent = data.get('intent');
@@ -50,7 +50,7 @@ const editAction = action(async (data: FormData) => {
 		throw new Error('Malformed edit-action. note params');
 
 	const id = noteId.length > 0 ? noteId : undefined;
-	if (intent === 'insert' || intent === 'update') {
+	if (intent === 'new' || intent === 'update') {
 		const note = await upsertNt(title, body, id);
 		// navigate to `/notes/:id` if note was returned
 		// otherwise navigate to `/`
diff --git a/src/app.tsx b/src/app.tsx
index 3c1e398..4c6aef6 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,25 +1,20 @@
 // @refresh reload
 // file: src/app.tsx
 import { mergeProps, Suspense } from 'solid-js';
-import {
-	Route,
-	Router,
-	useSearchParams,
-	RouteSectionProps,
-} from '@solidjs/router';
+import { Route, Router, useSearchParams } from '@solidjs/router';
 import { MetaProvider } from '@solidjs/meta';
-import EditButton from './components/edit-button';
-import SearchField from './components/search-field';
-import BriefList from './components/brief-list';
-import BriefListSkeleton from './components/brief-list-skeleton';
-import Note from './routes/note';
-import NoteNew from './routes/note-new';
-import NoteNone from './routes/note-none';
-import NotFound from './routes/not-found';
+import { EditButton } from './components/edit-button';
+import { SearchField } from './components/search-field';
+import { BriefList } from './components/brief-list';
+import { Note } from './routes/note';
+import { NoteNew } from './routes/note-new';
+import { NoteNone } from './routes/note-none';
+import { NotFound } from './routes/not-found';
 
 import './styles/critical.scss';
 
 import type { ParentProps } from 'solid-js';
+import type { RouteSectionProps } from '@solidjs/router';
 import type { SearchParams } from './route-path';
 
 function Layout(props: ParentProps) {
@@ -43,7 +38,7 @@ function Layout(props: ParentProps) {
 						<SearchField />
 						<EditButton kind={'new'}>New</EditButton>
 					</section>
-					<Suspense fallback={<BriefListSkeleton />}>
+					<Suspense>
 						<BriefList searchText={searchParams.search} />
 					</Suspense>
 				</section>
diff --git a/src/components/app-context.tsx b/src/components/app-context.tsx
index c2dd646..d884d75 100644
--- a/src/components/app-context.tsx
+++ b/src/components/app-context.tsx
@@ -12,7 +12,7 @@ import {
 	type ParentProps,
 } from 'solid-js';
 
-export type LastEdit = ['new'] | ['edit', string] | ['delete', string];
+import type { LastEdit } from '../types';
 
 // Primitives over features …
 const [lastEdit, sendLastEdit] = createSignal<LastEdit | undefined>(undefined, {
@@ -44,8 +44,8 @@ function useAppContext() {
 	return ctx;
 }
 
-const useLastEdit = (): LastEditHolder => useAppContext();
+const useLastEdit: () => LastEditHolder = useAppContext;
 
-const useSendLastEdit = (): SendLastEditHolder => useAppContext();
+const useSendLastEdit: () => SendLastEditHolder = useAppContext;
 
 export { AppProvider, useLastEdit, useSendLastEdit };
diff --git a/src/components/brief-list-skeleton.tsx b/src/components/brief-list-skeleton.tsx
deleted file mode 100644
index 0593614..0000000
--- a/src/components/brief-list-skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export default function BriefListSkeleton() {
-	return (
-		<ul class="c-brief-list-skeleton">
-			<li>
-				<div class="c-brief-list-skeleton__brief" />
-			</li>
-			<li>
-				<div class="c-brief-list-skeleton__brief" />
-			</li>
-			<li>
-				<div class="c-brief-list-skeleton__brief" />
-			</li>
-		</ul>
-	);
-}
diff --git a/src/components/brief-list.tsx b/src/components/brief-list.tsx
index 3cd482f..8371902 100644
--- a/src/components/brief-list.tsx
+++ b/src/components/brief-list.tsx
@@ -9,10 +9,10 @@ import {
 	useParams,
 } from '@solidjs/router';
 import { getBriefs } from '../api';
-import { hrefWithNote } from '../route-path';
+import { nextToNote } from '../route-path';
 import { makeBriefDateFormat } from '../lib/date-time';
-import { Brief } from './brief';
-import { useLastEdit } from './app-context';
+import { Brief, type Active } from './brief';
+import { useLastEdit, type LastEditHolder } from './app-context';
 
 import type { NoteBrief } from '../types';
 
@@ -48,81 +48,96 @@ function briefDateFormat() {
 	}
 }
 
-type Props = {
-	searchText: string | undefined;
-};
-
-export default function BriefList(props: Props) {
-	const params = useParams();
-	const [clickedId, setClickedId] = createSignal<[string, number]>(['', 0]);
-
-	// Highlight clicked brief BEFORE initiating
-	// navigation to the associated note
-	const navigate = useNavigate();
-	const location = useLocation();
-	const navigateToClicked = (event: MouseEvent) => {
-		const noteId = findNoteId(event.target);
-		if (!noteId) return;
-
-		setClickedId([noteId, performance.now()]);
-		navigate(hrefWithNote(location, noteId));
-	};
-
-	// Choose the most recent of
-	// - ID of note navigated to
-	// - ID of brief clicked
-	const active = createMemo<[string, number]>(
-		(last) => {
-			const navId = params.noteId ?? '';
-			const [_id, lastTime] = last;
-			const clicked = clickedId();
-			return clicked[1] > lastTime ? clicked : [navId, performance.now()];
+function setupBriefStore(currentSearch: () => string | undefined) {
+	// Combining createAsync with Store. Inspired by:
+	// https://github.com/solidjs/solid-realworld/blob/f6e77ecd652bf32f0dc9238f291313fd1af7e98b/src/store/createComments.js#L4-L8
+	const [briefStore, setBriefs] = createStore<NoteBrief[]>([]);
+	return [
+		async function updateBriefStore() {
+			const next = await getBriefs(currentSearch());
+			setBriefs(reconcile(next));
+			return briefStore;
 		},
-		[params.noteId ?? '', performance.now()]
-	);
-
-	// Active ID is the one navigated to
-	// until another brief is clicked
-	const activeId = () => active()[0];
+		{ initialValue: briefStore },
+	] as const;
+}
 
-	// updatedId
+function deriveLastUpdateId(
+	noteId: () => string,
+	lastEdit: LastEditHolder['lastEdit']
+) {
 	const NO_UPDATED_ID = '';
-	const { lastEdit } = useLastEdit();
-	const updatedId = createMemo(() => {
+
+	return () => {
 		const last = lastEdit();
 		switch (last?.[0]) {
 			case undefined:
 			case 'delete': {
 				return NO_UPDATED_ID;
 			}
-			case 'edit': {
+			case 'update': {
 				return last[1];
 			}
 			case 'new': {
 				// IDs are server assigned so get it form the URL
 				// of the currently open note.
-				return typeof params.noteId === 'string' && params.noteId.length > 0
-					? params.noteId
-					: NO_UPDATED_ID;
+				const id = noteId();
+				return typeof id === 'string' && id.length > 0 ? id : NO_UPDATED_ID;
 			}
 			default:
 				return NO_UPDATED_ID;
 		}
+	};
+}
+
+const briefActive = ([id, active]: [string, Active], briefId: string) =>
+	id === briefId ? active : 0;
+
+type ClickedInfo = {
+	noteId: string;
+	pathname: string;
+};
+
+type Props = {
+	searchText: string | undefined;
+};
+
+function BriefList(props: Props) {
+	const params = useParams();
+	const noteId = () => params.noteId ?? '';
+	const location = useLocation();
+	const [clickedInfo, setClickedInfo] = createSignal<ClickedInfo>({
+		noteId: noteId(),
+		pathname: location.pathname,
 	});
 
-	// Combining async with Store. See:cc
-	// https://github.com/solidjs/solid-realworld/blob/f6e77ecd652bf32f0dc9238f291313fd1af7e98b/src/store/createComments.js#L4-L8
+	const activeInfo = createMemo((): [string, Active] => {
+		const info = clickedInfo();
+		if (location.pathname !== info.pathname && info.noteId.length > 0)
+			return [info.noteId, 1];
+
+		const id = noteId();
+		return id.length > 0 ? [id, 2] : ['', 0];
+	});
+
+	// Highlight clicked brief BEFORE initiating
+	// navigation to the associated note
+	const navigate = useNavigate();
+	const navigateToClicked = (event: MouseEvent) => {
+		const id = findNoteId(event.target);
+		if (!id) return;
+
+		const next = nextToNote(location, id);
+		setClickedInfo({ noteId: id, pathname: next.pathname });
+		navigate(next.href);
+	};
+
+	// updatedId
+	const { lastEdit } = useLastEdit();
+	const updatedId = createMemo(deriveLastUpdateId(noteId, lastEdit));
+
 	// Note: briefs is a signal carrying a finer grained store
-	const initialValue: NoteBrief[] = [];
-	const [briefsStore, setBriefs] = createStore(initialValue);
-	const briefs = createAsync(
-		async () => {
-			const next = await getBriefs(props.searchText);
-			setBriefs(reconcile(next));
-			return briefsStore;
-		},
-		{ initialValue }
-	);
+	const briefs = createAsync(...setupBriefStore(() => props.searchText));
 
 	const format = briefDateFormat();
 	let root: HTMLElement | undefined;
@@ -146,8 +161,7 @@ export default function BriefList(props: Props) {
 									title={brief.title}
 									summary={brief.summary}
 									updatedAt={brief.updatedAt}
-									active={activeId() === brief.id}
-									pending={false}
+									active={briefActive(activeInfo(), brief.id)}
 									flushed={updatedId() === brief.id}
 									format={format}
 								/>
@@ -159,3 +173,5 @@ export default function BriefList(props: Props) {
 		</nav>
 	);
 }
+
+export { BriefList };
diff --git a/src/components/brief.tsx b/src/components/brief.tsx
index 269ac84..45b9800 100644
--- a/src/components/brief.tsx
+++ b/src/components/brief.tsx
@@ -1,32 +1,28 @@
 // file: src/components/brief.tsx
 import { createUniqueId, onMount, Show } from 'solid-js';
 import { NoHydration } from 'solid-js/web';
+import { localizeFormat, type FormatFn } from '../lib/date-time';
 
-import type { BriefDateFormat } from '../types';
+export type Active = 0 | 1 | 2;
 
 type Props = {
 	noteId: string;
 	title: string;
 	summary: string;
 	updatedAt: number;
-	pending: boolean;
-	active: boolean;
+	active: Active;
 	flushed: boolean;
-	format: BriefDateFormat;
+	format: FormatFn;
 };
 
-const CLASSNAME_FLASH = 'js:c-brief--flash';
+const CLASSNAME_FLASH = ' js:c-brief--flash';
+const activeModifier = ['', ' c-brief--pending', ' c-brief--active'];
 
 const classListBrief = (flushed: boolean) =>
-	'js:c-brief c-brief' + (flushed ? ' ' + CLASSNAME_FLASH : '');
+	'js:c-brief c-brief ' + (flushed ? CLASSNAME_FLASH : '');
 
-const classListOpen = (
-	active: boolean | undefined,
-	pending: boolean | undefined
-) =>
-	'js:c-brief__open c-brief__open' +
-	(active ? ' c-brief--active' : '') +
-	(pending ? ' c-brief--pending' : '');
+const classListOpen = (active: Active) =>
+	'js:c-brief__open c-brief__open' + activeModifier[active];
 
 function Brief(props: Props) {
 	let brief: HTMLDivElement | undefined;
@@ -45,15 +41,7 @@ function Brief(props: Props) {
 		// if it deviates from the server generated one
 		// (a request may carry the locale but not the timezone)
 		// Also `ref` doesn't work on elements inside `NoHydration`
-		if (header instanceof HTMLElement) {
-			const time = header.querySelector('time');
-			if (time instanceof HTMLTimeElement) {
-				const epochTimestamp = Date.parse(time.dateTime);
-				const current = time.textContent;
-				const [local] = props.format(epochTimestamp);
-				if (current !== local) time.textContent = local;
-			}
-		}
+		localizeFormat(props.format, header);
 	});
 
 	return (
@@ -69,11 +57,9 @@ function Brief(props: Props) {
 					<time datetime={updatedISO}>{updatedAt}</time>
 				</NoHydration>
 			</header>
-			<input id={toggleId} type="checkbox" class="c-brief__details-state" />
-			<button class={classListOpen(props.active, props.pending)}>
-				Open note for preview
-			</button>
-			<label for={toggleId} class="c-brief__details-toggle">
+			<input id={toggleId} type="checkbox" class="c-brief__summary-state" />
+			<button class={classListOpen(props.active)}>Open note for preview</button>
+			<label for={toggleId} class="c-brief__summary-toggle">
 				<svg
 					viewBox="0 0 512 512"
 					aria-hidden="true"
@@ -84,7 +70,7 @@ function Brief(props: Props) {
 					<path d="M60 99.333l196 196 196-196 60 60-256 256-256-256z"></path>
 				</svg>
 			</label>
-			<p class="c-brief__details">
+			<p class="c-brief__summary">
 				<Show
 					when={props.summary}
 					fallback={<span class="c-brief__no-content">(No Content)</span>}
diff --git a/src/components/edit-button.tsx b/src/components/edit-button.tsx
index ca520bd..c9a3fc4 100644
--- a/src/components/edit-button.tsx
+++ b/src/components/edit-button.tsx
@@ -1,21 +1,21 @@
 // file: src/components/edit-button.tsx
 import { useLocation, useNavigate } from '@solidjs/router';
-import { hrefToNoteEdit, hrefToNoteNew } from '../route-path';
+import { hrefToNoteUpdate, hrefToNoteNew } from '../route-path';
 
 import type { ParentProps } from 'solid-js';
 
 type Props = ParentProps & {
-	kind: 'edit' | 'new';
+	kind: 'update' | 'new';
 };
 
 const classList = (kind: Props['kind']) =>
 	'c-edit-button' +
-	(kind === 'new' ? ' c-edit-button--new' : ' c-edit-button--modify');
+	(kind === 'new' ? ' js:c-edit-button--new' : ' js:c-edit-button--update');
 
-export default function EditButton(props: Props) {
+function EditButton(props: Props) {
 	const location = useLocation();
 	const navigate = useNavigate();
-	const toHref = props.kind === 'new' ? hrefToNoteNew : hrefToNoteEdit;
+	const toHref = props.kind === 'new' ? hrefToNoteNew : hrefToNoteUpdate;
 
 	return (
 		<button
@@ -27,3 +27,5 @@ export default function EditButton(props: Props) {
 		</button>
 	);
 }
+
+export { EditButton };
diff --git a/src/components/note-edit-skeleton.tsx b/src/components/note-edit-skeleton.tsx
deleted file mode 100644
index b0852c5..0000000
--- a/src/components/note-edit-skeleton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// file: src/components/note-edit-skeleton.tsx
-export default function NoteEditSkeleton() {
-	return (
-		<div class="c-note-edit-skeleton" role="progressbar" aria-busy="true">
-			<div class="c-note-edit-skeleton__form">
-				<div class="c-note-edit-skeleton__title" />
-				<div class="c-note-edit-skeleton__body" />
-			</div>
-			<div class="c-note-edit-skeleton__preview">
-				<div class="c-note-edit-skeleton__menu">
-					<div class="c-note-edit-skeleton__done" />
-					<div class="c-note-edit-skeleton__delete" />
-				</div>
-				<div class="c-note-edit-skeleton__note-title" />
-				<div class="c-note-edit-skeleton__note-preview">
-					<div />
-					<div />
-					<div />
-					<div />
-					<div />
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/src/components/note-edit.tsx b/src/components/note-edit.tsx
index 34c8e72..beb932a 100644
--- a/src/components/note-edit.tsx
+++ b/src/components/note-edit.tsx
@@ -1,30 +1,45 @@
 // file: src/components/note-edit.tsx
 import { createSignal, Show } from 'solid-js';
 import { useLocation } from '@solidjs/router';
-import NotePreview from './note-preview';
-import { useSendLastEdit } from './app-context';
-import { editAction } from '../api';
+import { toLastEdit, type EditIntent } from '../types';
 import { toRootpath } from '../route-path';
-
-import type { EditIntent } from '../types';
+import { editAction } from '../api';
+import { useSendLastEdit } from './app-context';
+import { NotePreview } from './note-preview';
 
 type Props = {
 	noteId: string | undefined;
-	initialTitle: string;
-	initialBody: string;
+	initialTitle: string | undefined;
+	initialBody: string | undefined;
 };
 
+// remove `undefined` from setter argument union type
+type UpdatePair<T> = [
+	updated: () => T | undefined,
+	setter: (updated: Exclude<T, undefined>) => void,
+];
+type TextUpdate = string | undefined;
+type TextUpdatePair = UpdatePair<TextUpdate>;
+
 const maybeNoteId = (maybe: string | undefined) =>
 	typeof maybe === 'string' && maybe.length > 0 ? maybe : undefined;
 
-export default function NoteEdit(props: Props) {
+function NoteEdit(props: Props) {
 	const isUpdate = () => Boolean(maybeNoteId(props.noteId));
 	const [intent, setIntent] = createSignal<EditIntent>(
-		isUpdate() ? 'update' : 'insert'
+		isUpdate() ? 'update' : 'new'
 	);
 	const [busy, setBusy] = createSignal(false);
+	const [updatedTitle, setTitle] = createSignal<TextUpdate>(
+		undefined
+	) as TextUpdatePair;
+	const [updatedBody, setBody] = createSignal<TextUpdate>(
+		undefined
+	) as TextUpdatePair;
+	// follow reactive prop while no edit has taken place
+	const title = () => updatedTitle() ?? props.initialTitle ?? '';
+	const body = () => updatedBody() ?? props.initialBody ?? '';
 
-	const [title, setTitle] = createSignal(props.initialTitle);
 	const titleListener = (
 		e: InputEvent & {
 			currentTarget: HTMLInputElement;
@@ -35,7 +50,6 @@ export default function NoteEdit(props: Props) {
 		setTitle(e.currentTarget.value);
 	};
 
-	const [body, setBody] = createSignal(props.initialBody);
 	const bodyListener = (
 		e: InputEvent & {
 			currentTarget: HTMLTextAreaElement;
@@ -47,8 +61,11 @@ export default function NoteEdit(props: Props) {
 	};
 
 	const location = useLocation();
-	const { sendLastEdit } = useSendLastEdit();
+	const { sendLastEdit: send } = useSendLastEdit();
 	let noteForm: HTMLFormElement | undefined;
+	// clear app-context
+	send(undefined);
+
 	const saveNote = (
 		e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }
 	) => {
@@ -61,9 +78,7 @@ export default function NoteEdit(props: Props) {
 		//
 		// inform the rest of the application
 		// of impending `new` or `edit`
-		const id = maybeNoteId(props.noteId);
-		sendLastEdit(id ? ['edit', id] : ['new']);
-
+		send(toLastEdit(intent(), maybeNoteId(props.noteId)));
 		noteForm.requestSubmit();
 	};
 
@@ -79,14 +94,11 @@ export default function NoteEdit(props: Props) {
 		setIntent('delete');
 		// inform the rest of the application
 		// of impending delete
-		sendLastEdit(['delete', id]);
+		send(toLastEdit(intent(), id));
 		// submit editAction
 		noteForm.requestSubmit();
 	};
 
-	// clear signal
-	sendLastEdit(undefined);
-
 	return (
 		<div class="c-note-edit">
 			<form
@@ -162,3 +174,5 @@ export default function NoteEdit(props: Props) {
 		</div>
 	);
 }
+
+export { NoteEdit };
diff --git a/src/components/note-preview.tsx b/src/components/note-preview.tsx
index e68ddef..8904a2a 100644
--- a/src/components/note-preview.tsx
+++ b/src/components/note-preview.tsx
@@ -1,21 +1,17 @@
 // file: src/components/note-preview.tsx
-import { isServer } from 'solid-js/web';
-import { mdToHtml as server } from '../server/md-to-html';
-import { mdToHtml as client } from '../lib/md-to-html';
+import { mdToHtml } from '../lib/md-to-html';
 
 type Props = {
 	body: string;
 };
 
-const mdToHtml = isServer ? server : client;
+const NotePreview = (props: Props) => (
+	<div class="c-note-preview">
+		<div
+			class="o-from-markdown"
+			innerHTML={props.body ? mdToHtml(props.body) : ''}
+		/>
+	</div>
+);
 
-export default function NotePreview(props: Props) {
-	return (
-		<div class="c-note-preview">
-			<div
-				class="o-from-markdown"
-				innerHTML={props.body ? mdToHtml(props.body) : ''}
-			/>
-		</div>
-	);
-}
+export { NotePreview };
diff --git a/src/components/note-skeleton.tsx b/src/components/note-skeleton.tsx
deleted file mode 100644
index a2083b1..0000000
--- a/src/components/note-skeleton.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// file: src/components/note-edit-skeleton.tsx
-
-const NoteSkeletonPreview = () => (
-	<div class="c-note-skeleton-preview">
-		<div />
-		<div />
-		<div />
-		<div />
-		<div />
-	</div>
-);
-
-const NoteSkeletonDisplay = () => (
-	<div class="c-note-skeleton-display" role="progressbar" aria-busy="true">
-		<div class="c-note-skeleton-display__header">
-			<div class="c-note-skeleton-title" />
-			<div class="c-note-skeleton-display__done" />
-		</div>
-		<NoteSkeletonPreview />
-	</div>
-);
-
-const NoteSkeletonEdit = () => (
-	<div class="c-note-skeleton-edit" role="progressbar" aria-busy="true">
-		<div class="c-note-skeleton-edit__form">
-			<div class="c-note-skeleton-edit__title" />
-			<div class="c-note-skeleton-edit__body" />
-		</div>
-		<div class="c-note-skeleton-edit__preview">
-			<div class="c-note-skeleton-edit__menu">
-				<div class="c-note-skeleton-edit__done" />
-				<div class="c-note-skeleton-edit__delete" />
-			</div>
-			<div class="c-note-skeleton-title" />
-			<NoteSkeletonPreview />
-		</div>
-	</div>
-);
-
-export { NoteSkeletonDisplay, NoteSkeletonEdit };
diff --git a/src/components/search-field.tsx b/src/components/search-field.tsx
index dfa1e7e..53560eb 100644
--- a/src/components/search-field.tsx
+++ b/src/components/search-field.tsx
@@ -2,7 +2,7 @@
 import { createUniqueId } from 'solid-js';
 import { useIsRouting, useSearchParams } from '@solidjs/router';
 import { debounce } from '../lib/debounce';
-import Spinner from './spinner';
+import { Spinner } from './spinner';
 
 import type { SearchParams } from '../route-path';
 
@@ -27,7 +27,7 @@ const preventSubmit = (
 	}
 ) => event.preventDefault();
 
-export default function SearchField() {
+function SearchField() {
 	const searchInputId = createUniqueId();
 	const isRouting = useIsRouting();
 	const [searchParams, setSearchParams] = useSearchParams<SearchParams>();
@@ -48,3 +48,5 @@ export default function SearchField() {
 		</form>
 	);
 }
+
+export { SearchField };
diff --git a/src/components/spinner.tsx b/src/components/spinner.tsx
index 438a183..84b9e13 100644
--- a/src/components/spinner.tsx
+++ b/src/components/spinner.tsx
@@ -3,7 +3,7 @@ export type Props = {
 	active: boolean;
 };
 
-export default function Spinner(props: Props) {
+function Spinner(props: Props) {
 	return (
 		<div
 			class={'c-spinner' + (props.active ? ' c-spinner--active' : '')}
@@ -12,3 +12,5 @@ export default function Spinner(props: Props) {
 		/>
 	);
 }
+
+export { Spinner };
diff --git a/src/entry-client.tsx b/src/entry-client.tsx
index 87fec9c..7f95b97 100644
--- a/src/entry-client.tsx
+++ b/src/entry-client.tsx
@@ -1,3 +1,7 @@
 import { mount, StartClient } from '@solidjs/start/client';
 
-mount(() => <StartClient />, document.getElementById('app'));
+const mountTarget = document.getElementById('app');
+
+if (!mountTarget)
+	throw new Error('No HTMLElement with an "app" id attribute to mount on!');
+mount(() => <StartClient />, mountTarget);
diff --git a/src/entry-server.tsx b/src/entry-server.tsx
index 26ec9cc..02b7f55 100644
--- a/src/entry-server.tsx
+++ b/src/entry-server.tsx
@@ -1,5 +1,18 @@
-import { createHandler } from '@solidjs/start/entry';
-import { StartServer } from '@solidjs/start/server';
+// file: src/entry-server.tsx
+import { createHandler, StartServer } from '@solidjs/start/server';
+// See: src/lib/md-to-html.ts
+import { mdToHtml } from './server/md-to-html';
+
+declare global {
+	// eslint-disable-next-line no-var
+	var ssrSupport: {
+		mdToHtml: (mdText: string) => string;
+	};
+}
+
+globalThis.ssrSupport = {
+	mdToHtml,
+};
 
 export default createHandler(() => (
 	<StartServer
diff --git a/src/global.d.ts b/src/global.d.ts
index dc6f10c..4a72c49 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1 +1,7 @@
 /// <reference types="@solidjs/start/env" />
+
+declare module global {
+	interface envDependency {
+		mdToHtml: (mdText: string) => string;
+	}
+}
diff --git a/src/lib/date-time.ts b/src/lib/date-time.ts
index 21c81c9..829ea27 100644
--- a/src/lib/date-time.ts
+++ b/src/lib/date-time.ts
@@ -8,6 +8,10 @@ const defaultOptionsBriefDateFormat: Intl.ResolvedDateTimeFormatOptions = {
 	hour12: false,
 };
 
+export type FormatFn = (
+	epochTimestamp: number
+) => [local: string, utcIso: string];
+
 function makeNoteDateFormat({
 	locale,
 	timeZone,
@@ -20,15 +24,11 @@ function makeNoteDateFormat({
 		timeStyle: 'short',
 	});
 
-	return function format(epochTimestamp: number) {
+	const format: FormatFn = function format(epochTimestamp: number) {
 		const dateTime = new Date(epochTimestamp);
-		// TS always infers arrays, not tuples
-		const result: [string, string] = [
-			display.format(dateTime),
-			dateTime.toISOString(),
-		];
-		return result;
+		return [display.format(dateTime), dateTime.toISOString()];
 	};
+	return format;
 }
 
 function makeBriefDateFormat({
@@ -48,7 +48,10 @@ function makeBriefDateFormat({
 	});
 	let today = new Date();
 
-	return function format(epochTimestamp: number, resetToday = false) {
+	const format: FormatFn = function format(
+		epochTimestamp: number,
+		resetToday = false
+	) {
 		if (resetToday) today = new Date();
 
 		const dateTime = new Date(epochTimestamp);
@@ -58,10 +61,31 @@ function makeBriefDateFormat({
 			dateTime.getFullYear() === today.getFullYear()
 				? timeOnly.format(dateTime)
 				: dateOnly.format(dateTime);
-		// TS always infers arrays, not tuples
-		const result: [string, string] = [display, dateTime.toISOString()];
-		return result;
+
+		return [display, dateTime.toISOString()];
 	};
+
+	return format;
+}
+
+function localizeFormat(
+	format: FormatFn,
+	timeAncestor: HTMLElement | undefined
+): void {
+	if (!(timeAncestor instanceof HTMLElement))
+		throw new Error('Unsuitable ancestor element');
+
+	const time = timeAncestor.querySelector('time');
+	if (!(time instanceof HTMLTimeElement))
+		throw new Error('Unable to locate time element under specified ancestor');
+
+	const current = time.textContent;
+	if (!current) return;
+	// i.e. nothing to do (CSR waiting for async content)
+
+	const epochTimestamp = Date.parse(time.dateTime);
+	const [local] = format(epochTimestamp);
+	if (current !== local) time.textContent = local;
 }
 
-export { makeBriefDateFormat, makeNoteDateFormat };
+export { localizeFormat, makeBriefDateFormat, makeNoteDateFormat };
diff --git a/src/lib/md-to-html.ts b/src/lib/md-to-html.ts
index 7c2a8ba..0dc5768 100644
--- a/src/lib/md-to-html.ts
+++ b/src/lib/md-to-html.ts
@@ -1,11 +1,25 @@
 // file: src/lib/md-to-html.ts
+import { isServer } from 'solid-js/web';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 
-// Vite pulls in node APIs due to sanitizeHtml's optional postCSS support
-// Client side use DOMPurify instead
+let toHtml: ((mdText: string) => string) | undefined;
+
 function mdToHtml(mdText: string) {
-	return DOMPurify.sanitize(marked.parse(mdText, { async: false }) as string);
+	if (toHtml) return toHtml(mdText);
+
+	// entry-server.tsx attaches mdToHtml based on sanitizeHtml
+	// which doesn't require DOM for SSR.
+	toHtml = isServer
+		? globalThis.ssrSupport.mdToHtml
+		: (mdArg: string) =>
+				DOMPurify.sanitize(marked.parse(mdArg, { async: false }) as string);
+	// Vite pulls in node APIs due to sanitizeHtml's optional postCSS support
+	// On client side use DOMPurify instead but don't import HERE to keep `sanitizeHtml`
+	// out of the client bundle
+
+	if (!toHtml) throw new Error('Late binding of `mdToHtml` failed');
+	return mdToHtml(mdText);
 }
 
 export { mdToHtml };
diff --git a/src/route-path.ts b/src/route-path.ts
index 5ca48a4..4e47976 100644
--- a/src/route-path.ts
+++ b/src/route-path.ts
@@ -40,7 +40,7 @@ const rootpathToHome = (search = '') => homePathname + search;
 const rootpathWithNote = (noteId: string, search = '') =>
 	notePathname(noteId) + search;
 
-function hrefToNoteEdit(current: Location<unknown>) {
+function hrefToNoteUpdate(current: Location<unknown>) {
 	const noteId = extractNoteId(location.pathname);
 	if (noteId.length < 1)
 		throw new Error('Pathname was expected to contain a note ID');
@@ -54,8 +54,16 @@ const hrefToHome = (current: Location<unknown>) =>
 const hrefToNoteNew = (current: Location<unknown>) =>
 	noteNewPathname + (current.search ?? '');
 
-const hrefWithNote = (current: Location<unknown>, noteId: string) =>
-	notePathname(noteId) + (current.search ?? '');
+function nextToNote(current: Location<unknown>, noteId: string) {
+	const pathname = notePathname(noteId);
+	const search = current.search ?? '';
+
+	return {
+		pathname,
+		search,
+		href: pathname + search,
+	};
+}
 
 const MAIN_TITLE = 'SolidStart Notes';
 
@@ -64,10 +72,10 @@ const makeTitle = (title?: string) =>
 
 export {
 	hrefToHome,
-	hrefToNoteEdit,
 	hrefToNoteNew,
-	hrefWithNote,
+	hrefToNoteUpdate,
 	makeTitle,
+	nextToNote,
 	rootpathToHome,
 	rootpathWithNote,
 	searchFromRootpath,
diff --git a/src/routes/not-found.tsx b/src/routes/not-found.tsx
index 82a770f..4d65190 100644
--- a/src/routes/not-found.tsx
+++ b/src/routes/not-found.tsx
@@ -3,9 +3,9 @@ import { Title } from '@solidjs/meta';
 import { HttpStatusCode } from '@solidjs/start';
 import { makeTitle } from '../route-path';
 
-export default function NotFound() {
+function NotFound() {
 	return (
-		<>
+		<div class="c-not-found">
 			<Title>{makeTitle('Not Found')}</Title>
 			<HttpStatusCode code={404} />
 			<h1>Page Not Found</h1>
@@ -16,6 +16,8 @@ export default function NotFound() {
 				</a>{' '}
 				to learn how to build SolidStart apps.
 			</p>
-		</>
+		</div>
 	);
 }
+
+export { NotFound };
diff --git a/src/routes/note-common.ts b/src/routes/note-common.ts
deleted file mode 100644
index a3d3a29..0000000
--- a/src/routes/note-common.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// file: src/routes/note-common.ts
-import { isServer } from 'solid-js/web';
-import { makeNoteDateFormat } from '../lib/date-time';
-import { hrefToHome } from '../route-path';
-
-import type { Location, Navigator } from '@solidjs/router';
-import type { Note } from '../types';
-
-function makeTransformOrNavigate(
-	location: Location<unknown>,
-	navigate: Navigator
-) {
-	const noteDateFormat = isServer
-		? makeNoteDateFormat()
-		: makeNoteDateFormat(Intl.DateTimeFormat().resolvedOptions());
-
-	const toNoteExpanded = ({ id, title, body, updatedAt }: Note) => {
-		const [updated, updatedISO] = noteDateFormat(updatedAt);
-		return {
-			id,
-			title,
-			body,
-			updatedAt,
-			updatedISO,
-			updated,
-		};
-	};
-
-	return function transformOrNavigate(maybeNote: Note | undefined) {
-		if (maybeNote) return toNoteExpanded(maybeNote);
-
-		navigate(hrefToHome(location), { replace: true });
-	};
-}
-
-export { makeTransformOrNavigate };
diff --git a/src/routes/note-new.tsx b/src/routes/note-new.tsx
index 752792a..1903da2 100644
--- a/src/routes/note-new.tsx
+++ b/src/routes/note-new.tsx
@@ -1,17 +1,15 @@
 // file: src/routes/note-new.tsx
 import { Title } from '@solidjs/meta';
 import { makeTitle } from '../route-path';
-import NoteEditor from '../components/note-edit';
+import { NoteEdit } from '../components/note-edit';
 
-export default function NoteNew() {
+function NoteNew() {
 	return (
 		<>
 			<Title>{makeTitle('New Note')}</Title>
-			<NoteEditor
-				noteId={undefined}
-				initialTitle={'Untitled'}
-				initialBody={''}
-			/>
+			<NoteEdit noteId={undefined} initialTitle={'Untitled'} initialBody={''} />
 		</>
 	);
 }
+
+export { NoteNew };
diff --git a/src/routes/note-none.tsx b/src/routes/note-none.tsx
index 44736aa..24839e3 100644
--- a/src/routes/note-none.tsx
+++ b/src/routes/note-none.tsx
@@ -2,7 +2,7 @@
 import { Title } from '@solidjs/meta';
 import { makeTitle } from '../route-path';
 
-export default function NoteNone() {
+function NoteNone() {
 	return (
 		<>
 			<Title>{makeTitle()}</Title>
@@ -12,3 +12,5 @@ export default function NoteNone() {
 		</>
 	);
 }
+
+export { NoteNone };
diff --git a/src/routes/note.tsx b/src/routes/note.tsx
index edcccfb..12bc63d 100644
--- a/src/routes/note.tsx
+++ b/src/routes/note.tsx
@@ -1,55 +1,90 @@
 // file: src/routes/note.tsx
-import { Show, Suspense } from 'solid-js';
-import { NoHydration } from 'solid-js/web';
+import { onMount, Show } from 'solid-js';
+import { isServer, NoHydration } from 'solid-js/web';
 import { createAsync, useNavigate } from '@solidjs/router';
 import { Title } from '@solidjs/meta';
-import { makeTitle } from '../route-path';
+import { hrefToHome, makeTitle } from '../route-path';
 import { getNote } from '../api';
-import { makeTransformOrNavigate } from './note-common';
-import {
-	NoteSkeletonDisplay,
-	NoteSkeletonEdit,
-} from '../components/note-skeleton';
-import NoteEdit from '../components/note-edit';
-import EditButton from '../components/edit-button';
-import NotePreview from '../components/note-preview';
+import { localizeFormat, makeNoteDateFormat } from '../lib/date-time';
+import { NoteEdit } from '../components/note-edit';
+import { EditButton } from '../components/edit-button';
+import { NotePreview } from '../components/note-preview';
 
-import type { RouteSectionProps } from '@solidjs/router';
+import type { Location, Navigator, RouteSectionProps } from '@solidjs/router';
+import type { Note } from '../types';
+
+const noteDateFormat = isServer
+	? makeNoteDateFormat()
+	: makeNoteDateFormat(Intl.DateTimeFormat().resolvedOptions());
+
+function makeTransformOrNavigate(
+	location: Location<unknown>,
+	navigate: Navigator
+) {
+	const toNoteExpanded = ({ id, title, body, updatedAt }: Note) => {
+		const [updated, updatedISO] = noteDateFormat(updatedAt);
+		return {
+			id,
+			title,
+			body,
+			updatedAt,
+			updatedISO,
+			updated,
+		};
+	};
+
+	return function transformOrNavigate(maybeNote: Note | undefined) {
+		if (maybeNote) return toNoteExpanded(maybeNote);
+
+		navigate(hrefToHome(location), { replace: true });
+	};
+}
 
 type NoteExpanded = ReturnType<ReturnType<typeof makeTransformOrNavigate>>;
 
-function NoteDisplay(props: { note: NoteExpanded }) {
+function NoteDisplay(props: { noteId: string; note: NoteExpanded }) {
+	// `noteId` is available immediately
+	// while `note` (containing `id`) needs async to fulfill first
+	const ofNote = (
+		propName: 'title' | 'body' | 'updated' | 'updatedISO',
+		defaultValue = ''
+	) => props.note?.[propName] ?? defaultValue;
+
+	let noteUpdated: HTMLElement | undefined;
+
+	onMount(() => {
+		// After hydration correct the display date/time
+		// if it deviates from the server generated one
+		// (a request may carry the locale but not the timezone)
+		// Also `ref` doesn't work on elements inside a `NoHydration` boundary
+		localizeFormat(noteDateFormat, noteUpdated);
+	});
+
 	return (
-		<Suspense fallback={<NoteSkeletonDisplay />}>
-			<Show when={props.note}>
-				{(note) => (
-					<>
-						<Title>{makeTitle(note().id)}</Title>
-						<div class="c-note">
-							<div class="c-note__header">
-								<h1>{note().title}</h1>
-								<div class="c-note__menu" role="menubar">
-									<small class="c-note__updated" role="status">
-										Last updated on{' '}
-										<NoHydration>
-											<time dateTime={note().updatedISO}>{note().updated}</time>
-										</NoHydration>
-									</small>
-									<EditButton kind={'edit'}>Edit</EditButton>
-								</div>
-							</div>
-							<NotePreview body={note().body} />
-						</div>
-					</>
-				)}
-			</Show>
-		</Suspense>
+		<>
+			<Title>{makeTitle(props.noteId)}</Title>
+			<div class="c-note">
+				<div class="c-note__header">
+					<h1>{ofNote('title')}</h1>
+					<div class="c-note__menu" role="menubar">
+						<small ref={noteUpdated} class="c-note__updated" role="status">
+							Last updated on{' '}
+							<NoHydration>
+								<time dateTime={ofNote('updatedISO')}>{ofNote('updated')}</time>
+							</NoHydration>
+						</small>
+						<EditButton kind={'update'}>Edit</EditButton>
+					</div>
+				</div>
+				<NotePreview body={ofNote('body')} />
+			</div>
+		</>
 	);
 }
 
 export type NoteProps = RouteSectionProps & { edit: boolean };
 
-export default function Note(props: NoteProps) {
+function Note(props: NoteProps) {
 	const isEdit = () => props.edit;
 	const noteId = () => props.params.noteId;
 	const navigate = useNavigate();
@@ -60,19 +95,18 @@ export default function Note(props: NoteProps) {
 	return (
 		<>
 			<Title>{makeTitle(isEdit() ? `Edit ${noteId()}` : noteId())}</Title>
-			<Show when={isEdit()} fallback={<NoteDisplay note={note()} />}>
-				<Suspense fallback={<NoteSkeletonEdit />}>
-					<Show when={note()}>
-						{(note) => (
-							<NoteEdit
-								noteId={note().id}
-								initialTitle={note().title}
-								initialBody={note().body}
-							/>
-						)}
-					</Show>
-				</Suspense>
+			<Show
+				when={isEdit()}
+				fallback={<NoteDisplay noteId={noteId()} note={note()} />}
+			>
+				<NoteEdit
+					noteId={noteId()}
+					initialTitle={note()?.title}
+					initialBody={note()?.body}
+				/>
 			</Show>
 		</>
 	);
 }
+
+export { Note };
diff --git a/src/server/api.ts b/src/server/api.ts
index 5d26e78..401e79f 100644
--- a/src/server/api.ts
+++ b/src/server/api.ts
@@ -9,7 +9,7 @@ import {
 } from './repo';
 import { toNote, toNoteBrief, type NotePersist } from './types';
 import { excerptFrom } from './excerpt';
-
+/*
 const delay =
 	<T>(delayMs: number) =>
 	(value: T) => {
@@ -17,7 +17,7 @@ const delay =
 			setTimeout(resolve, delayMs, value);
 		});
 	};
-
+*/
 const toBriefs = (notes: NotePersist[]) => notes.map(toNoteBrief);
 
 const getBriefs = (search: string | undefined) =>
@@ -27,7 +27,7 @@ const toMaybeNote = (note: NotePersist | undefined) =>
 	note ? toNote(note) : undefined;
 
 const getNote = (id: string) =>
-	selectNote(id).then(toMaybeNote).then(delay(2000));
+	selectNote(id).then(toMaybeNote); /* .then(delay(2000)) */
 
 function upsertNote(title: string, body: string, id?: string) {
 	const excerpt = excerptFrom(body);
diff --git a/src/server/seed.ts b/src/server/seed.ts
index 7dbb9c4..a8ca76e 100644
--- a/src/server/seed.ts
+++ b/src/server/seed.ts
@@ -20,8 +20,7 @@ Markdown. You can even [link to SolidStart's website!](https://start.solidjs.com
 	],
 	[
 		'A note with a very long title because sometimes you need more words',
-		`You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing)
-notes in this app! These notes live on the server in the \`.data/notes\` file.
+		`You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing) notes in this app! These notes live on the server in the \`.data/notes\` file.
 ![This app is powered by SolidStart](https://assets.solidjs.com/banner?project=Start&amp;type=core)`,
 	],
 	['I wrote this note today', 'It was an excellent note.'],
diff --git a/src/server/types.ts b/src/server/types.ts
index 8952dc1..d3ba45f 100644
--- a/src/server/types.ts
+++ b/src/server/types.ts
@@ -1,19 +1,7 @@
 // file: src/server/types.ts
-export type Content = [title: string, body: string][];
-
-export type NoteInsert = {
-	title: string;
-	body: string;
-};
+import type { Note, NoteInsert, NoteUpdate, NoteBrief } from '../types-note';
 
-export type NoteUpdate = {
-	id: string;
-} & NoteInsert;
-
-export type Note = NoteUpdate & {
-	createdAt: number;
-	updatedAt: number;
-};
+export type Content = [title: string, body: string][];
 
 export type NotePersistInsert = {
 	excerpt: string;
@@ -41,21 +29,30 @@ const makeNoteStore = (notes: NotePersist[]) =>
 
 export type NoteStore = ReturnType<typeof makeNoteStore>;
 
-const toNoteBrief = (note: NotePersist) => ({
-	id: note.id,
-	title: note.title,
-	updatedAt: note.updatedAt,
-	summary: note.excerpt,
-});
-
-export type NoteBrief = ReturnType<typeof toNoteBrief>;
-
-const toNote = (note: NotePersist) => ({
-	id: note.id,
-	title: note.title,
-	body: note.body,
-	createdAt: note.createdAt,
-	updatedAt: note.updatedAt,
-});
+function toNoteBrief(note: NotePersist) {
+	// Leverage excess property checking
+	// https://www.typescriptlang.org/docs/handbook/2/objects.html#excess-property-checks
+	const brief: NoteBrief = {
+		id: note.id,
+		title: note.title,
+		updatedAt: note.updatedAt,
+		summary: note.excerpt,
+	};
+
+	return brief;
+}
+
+function toNote(note: NotePersist) {
+	// Leverage excess property checking
+	const bare: Note = {
+		id: note.id,
+		title: note.title,
+		body: note.body,
+		createdAt: note.createdAt,
+		updatedAt: note.updatedAt,
+	};
+
+	return bare;
+}
 
 export { makeNoteStore, toNote, toNoteBrief };
diff --git a/src/styles/critical.scss b/src/styles/critical.scss
index 5e32a32..7f99f82 100644
--- a/src/styles/critical.scss
+++ b/src/styles/critical.scss
@@ -505,7 +505,9 @@ body {
 	cursor: pointer;
 	font-weight: 700;
 	outline-style: none;
+}
 
+.js\:c-edit-button {
 	&--new {
 		background: var(--primary-blue);
 		color: var(--white);
@@ -522,7 +524,7 @@ body {
 		}
 	}
 
-	&--modify {
+	&--update {
 		background: var(--white);
 		color: var(--primary-blue);
 		border: 1px solid var(--primary-blue);
@@ -639,7 +641,7 @@ ul.c-brief-list {
 	transition: max-height 250ms ease-out;
 	transform: scale(1);
 
-	&:has(.c-brief__details-state:checked) {
+	&:has(.c-brief__summary-state:checked) {
 		max-height: 300px;
 		transition: max-height 500ms ease;
 	}
@@ -704,24 +706,24 @@ ul.c-brief-list {
 		font-style: italic;
 	}
 
-	&__details-state {
+	&__summary-state {
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
 
 		&:checked {
-			& ~ .c-brief__details-toggle svg {
+			& ~ .c-brief__summary-toggle svg {
 				transform: rotate(-180deg);
 			}
 
-			& ~ .c-brief__details {
+			& ~ .c-brief__summary {
 				transform: translateY(5px);
 				opacity: 1;
 			}
 		}
 	}
 
-	&__details-toggle {
+	&__summary-toggle {
 		z-index: 2;
 		border-radius: 50%;
 		height: 24px;
@@ -735,7 +737,7 @@ ul.c-brief-list {
 			opacity 300ms;
 		outline-style: none;
 
-		.c-brief__details-state:focus ~ & {
+		.c-brief__summary-state:focus ~ & {
 			box-shadow: var(--outline-box-shadow);
 		}
 
@@ -758,7 +760,7 @@ ul.c-brief-list {
 		}
 	}
 
-	&__details {
+	&__summary {
 		pointer-events: none;
 		z-index: 2;
 		flex: 1 1 250px;
diff --git a/src/types-note.ts b/src/types-note.ts
new file mode 100644
index 0000000..cab1920
--- /dev/null
+++ b/src/types-note.ts
@@ -0,0 +1,18 @@
+// file: src/types-note.ts
+export type NoteInsert = {
+	title: string;
+	body: string;
+};
+
+export type NoteUpdate = {
+	id: string;
+} & NoteInsert;
+
+export type Note = NoteUpdate & {
+	createdAt: number;
+	updatedAt: number;
+};
+
+export type NoteBrief = Pick<Note, 'id' | 'title' | 'updatedAt'> & {
+	summary: string;
+};
diff --git a/src/types.ts b/src/types.ts
index 36c4b4b..e83d034 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,14 +1,33 @@
 // file: src/types.ts
-export type { Note, NoteBrief } from './server/types';
+export type { Note, NoteBrief } from './types-note.ts';
 
-export type BriefDateFormat = (
-	epochTimestamp: number
-) => [display: string, iso: string];
+const EDIT = {
+	new: 'new',
+	update: 'update',
+	delete: 'delete',
+} as const;
 
-const editIntent = ['insert', 'update', 'delete'] as const;
-export type EditIntent = (typeof editIntent)[number];
+export type EditIntent = (typeof EDIT)[keyof typeof EDIT];
+export type LastEdit =
+	| [typeof EDIT.new]
+	| [typeof EDIT.update, string]
+	| [typeof EDIT.delete, string];
 
+const EDIT_INTENT = Object.values(EDIT);
 const isEditIntent = (intent: string): intent is EditIntent =>
-	(editIntent as ReadonlyArray<string>).includes(intent);
+	(EDIT_INTENT as Array<string>).includes(intent);
 
-export { isEditIntent };
+function toLastEdit(intent: EditIntent, id: string | undefined): LastEdit {
+	switch (intent) {
+		case 'new': {
+			return [intent];
+		}
+
+		default: {
+			if (!id) throw Error(`Missing Note ID for \`${intent}\` LastEdit`);
+			return [intent, id];
+		}
+	}
+}
+
+export { isEditIntent, toLastEdit };
diff --git a/tsconfig.json b/tsconfig.json
index b9dae73..519552e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,9 @@
 		"isolatedModules": true,
 		"paths": {
       "~/*": ["./src/*"]
-    }
-	}
+    },
+		"skipLibCheck": true
+	},
+	"include": ["src"],
+	"exclude": ["node_modules"] 
 }