@signal9/era-ui 3.9.0 → 3.11.0

package/dist/apps/notes/notes-store.svelte.js

@@ -0,0 +1,234 @@
+/**
+ * The Notes data layer — reactive state plus a pluggable persistence adapter.
+ *
+ * The store owns the notes; the adapter owns where they live. That split is
+ * deliberate: era ships a browser-only app (localStorage), but the same
+ * component is meant to drop into a host that persists server-side. Such a host
+ * supplies its own adapter and changes nothing else — which is why `load`/`save`
+ * are allowed to return promises even though the bundled adapters are sync.
+ *
+ * Writes are debounced and coalesced: every mutation marks the store dirty and
+ * re-arms one timer, so a burst of keystrokes costs a single `save`.
+ */
+import { tiptapToMarkdown, textContent } from './markdown.js';
+import { EMPTY_DOC } from './types.js';
+export const DEFAULT_STORAGE_KEY = 'era-ui:notes';
+/** Loose structural check — storage is untrusted (stale schema, another tab, a
+ *  user editing devtools), so a malformed entry is dropped rather than crashing
+ *  the list on first render. */
+function isNote(value) {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    const n = value;
+    return (typeof n.id === 'string' &&
+        typeof n.title === 'string' &&
+        typeof n.content === 'object' &&
+        n.content !== null &&
+        Array.isArray(n.content.content));
+}
+/**
+ * Persist to `localStorage`. Safe to construct during SSR — it only touches
+ * storage inside `load`/`save`, and returns empty / no-ops when there is none.
+ */
+export function localStorageAdapter(key = DEFAULT_STORAGE_KEY) {
+    const available = () => typeof localStorage !== 'undefined';
+    return {
+        load() {
+            if (!available())
+                return [];
+            try {
+                const raw = localStorage.getItem(key);
+                if (!raw)
+                    return [];
+                const parsed = JSON.parse(raw);
+                return Array.isArray(parsed) ? parsed.filter(isNote) : [];
+            }
+            catch {
+                return [];
+            }
+        },
+        save(notes) {
+            if (!available())
+                return;
+            // Let a quota/private-mode failure reach the store so the UI can say so,
+            // rather than silently dropping the user's writing.
+            localStorage.setItem(key, JSON.stringify(notes));
+        }
+    };
+}
+/** In-memory only — for demos, tests, and SSR snapshots. */
+export function memoryAdapter(seed = []) {
+    let notes = seed;
+    return {
+        load: () => notes,
+        save: (next) => {
+            notes = next;
+        }
+    };
+}
+function newId() {
+    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto)
+        return crypto.randomUUID();
+    return `note-${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+}
+export class NotesStore {
+    #adapter;
+    #debounce;
+    #statusLinger;
+    #saveTimer = null;
+    #statusTimer = null;
+    notes = $state([]);
+    /** True until the first `load()` settles — the list renders a skeleton on it. */
+    loading = $state(true);
+    status = $state('idle');
+    lastError = $state(null);
+    /** Pinned first, then most-recently-touched. The order the sidebar renders. */
+    ordered = $derived([...this.notes].sort((a, b) => Number(b.pinned) - Number(a.pinned) || b.updatedAt - a.updatedAt));
+    constructor(options = {}) {
+        this.#adapter = options.adapter ?? localStorageAdapter();
+        this.#debounce = options.debounce ?? 400;
+        this.#statusLinger = options.statusLinger ?? 1600;
+    }
+    async load() {
+        this.loading = true;
+        try {
+            const loaded = await this.#adapter.load();
+            this.notes = loaded;
+            this.lastError = null;
+        }
+        catch (error) {
+            this.notes = [];
+            this.#fail(error);
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    get(id) {
+        if (!id)
+            return undefined;
+        return this.notes.find((n) => n.id === id);
+    }
+    /**
+     * Case-insensitive match over title AND body. Matching the body is why
+     * `plainText` is denormalised — the alternative is walking every document's
+     * AST on every keystroke.
+     */
+    search(query) {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return this.ordered;
+        return this.ordered.filter((n) => n.title.toLowerCase().includes(q) || n.plainText.toLowerCase().includes(q));
+    }
+    create(init = {}) {
+        const now = Date.now();
+        const content = init.content ?? structuredClone(EMPTY_DOC);
+        const note = {
+            id: newId(),
+            title: init.title ?? 'Untitled',
+            icon: init.icon ?? null,
+            content,
+            plainText: content.content.map(textContent).join(' ').trim(),
+            pinned: init.pinned ?? false,
+            createdAt: now,
+            updatedAt: now
+        };
+        this.notes.push(note);
+        this.#schedule();
+        return note;
+    }
+    update(id, patch) {
+        const note = this.get(id);
+        if (!note)
+            return;
+        if (patch.title !== undefined)
+            note.title = patch.title;
+        if (patch.icon !== undefined)
+            note.icon = patch.icon;
+        if (patch.pinned !== undefined)
+            note.pinned = patch.pinned;
+        if (patch.content !== undefined) {
+            note.content = patch.content;
+            note.plainText = patch.content.content.map(textContent).join(' ').trim();
+        }
+        note.updatedAt = Date.now();
+        this.#schedule();
+    }
+    remove(id) {
+        const index = this.notes.findIndex((n) => n.id === id);
+        if (index < 0)
+            return;
+        this.notes.splice(index, 1);
+        this.#schedule();
+    }
+    togglePin(id) {
+        const note = this.get(id);
+        if (!note)
+            return;
+        // Pinning is an ordering change, not an edit — leave `updatedAt` alone so a
+        // pin doesn't shuffle the note to the top of the recency list as well.
+        note.pinned = !note.pinned;
+        this.#schedule();
+    }
+    setIcon(id, icon) {
+        this.update(id, { icon });
+    }
+    /** The note as markdown — for copy-out, export, or handing to a model. */
+    toMarkdown(id) {
+        const note = this.get(id);
+        if (!note)
+            return '';
+        const heading = note.title ? `# ${note.title}\n\n` : '';
+        return heading + tiptapToMarkdown(note.content);
+    }
+    /** Persist immediately, cancelling any pending debounce. Safe to call spuriously. */
+    async flush() {
+        if (this.#saveTimer) {
+            clearTimeout(this.#saveTimer);
+            this.#saveTimer = null;
+        }
+        await this.#persist();
+    }
+    /** Clear timers and write out whatever is pending. Call from `onDestroy`. */
+    destroy() {
+        if (this.#statusTimer)
+            clearTimeout(this.#statusTimer);
+        this.#statusTimer = null;
+        void this.flush();
+    }
+    #schedule() {
+        this.status = 'saving';
+        if (this.#saveTimer)
+            clearTimeout(this.#saveTimer);
+        this.#saveTimer = setTimeout(() => {
+            this.#saveTimer = null;
+            void this.#persist();
+        }, this.#debounce);
+    }
+    async #persist() {
+        try {
+            await this.#adapter.save($state.snapshot(this.notes));
+            this.lastError = null;
+            this.#flash('saved');
+        }
+        catch (error) {
+            this.#fail(error);
+        }
+    }
+    #flash(status) {
+        this.status = status;
+        if (this.#statusTimer)
+            clearTimeout(this.#statusTimer);
+        this.#statusTimer = setTimeout(() => {
+            this.#statusTimer = null;
+            this.status = 'idle';
+        }, this.#statusLinger);
+    }
+    #fail(error) {
+        this.lastError = error instanceof Error ? error.message : String(error);
+        this.status = 'error';
+        if (this.#statusTimer)
+            clearTimeout(this.#statusTimer);
+        this.#statusTimer = null;
+    }
+}

package/dist/apps/notes/notes.svelte

@@ -0,0 +1,377 @@
+<script lang="ts">
+	/**
+	 * Notes — a complete, client-side notes app.
+	 *
+	 * An era port of the term/web notes app: same TipTap editor, same slash menu
+	 * and selection toolbar, same heading-tree index. Two things changed.
+	 *
+	 * PERSISTENCE. The original round-tripped every edit through a server via
+	 * TanStack Query, which forced a whole dirty-override layer — local edits had
+	 * to out-rank refetched query data, or an in-flight save clobbered what you
+	 * were typing. Here the store IS the source of truth and persistence is a
+	 * debounced write behind it, so the editor writes straight through and there
+	 * is nothing to reconcile.
+	 *
+	 * CHROME. Everything visible is an era primitive (Bar, Button, Input, Badge,
+	 * Popover, ScrollArea, AlertDialog, Skeleton) on era tokens, so the app
+	 * follows the density, surface, corners, motion, and font axes like any other
+	 * component in the library.
+	 */
+	import { onDestroy, onMount, untrack } from 'svelte';
+	import FileText from '@lucide/svelte/icons/file-text';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Search from '@lucide/svelte/icons/search';
+	import Pin from '@lucide/svelte/icons/pin';
+	import PinOff from '@lucide/svelte/icons/pin-off';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import { Bar } from '../../ui/bar/index.js';
+	import { Badge } from '../../ui/badge/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { Input } from '../../ui/input/index.js';
+	import { Skeleton } from '../../ui/skeleton/index.js';
+	import * as AlertDialog from '../../ui/alert-dialog/index.js';
+	import * as Popover from '../../ui/popover/index.js';
+	import * as ScrollArea from '../../ui/scroll-area/index.js';
+	import { cn, keys } from '../../utils/index.js';
+	import NoteEditor from './note-editor.svelte';
+	import { NotesStore, localStorageAdapter, type NotesAdapter } from './notes-store.svelte.js';
+	import type { NoteInit, TiptapDocument } from './types.js';
+
+	interface Props {
+		/**
+		 * Bring your own store — for a custom adapter, or to share one set of
+		 * notes between two mounted views. When supplied, the host owns its
+		 * lifecycle: this component will not destroy it on unmount.
+		 */
+		store?: NotesStore;
+		/** Persistence for the store this component creates. Ignored if `store` is set. */
+		adapter?: NotesAdapter;
+		/** `localStorage` key for the default adapter. Ignored if `store`/`adapter` is set. */
+		storageKey?: string;
+		/** The open note. Bindable, so a host can deep-link or restore a session. */
+		noteId?: string | null;
+		/** Notes created only when storage comes back empty — a first-run sample. */
+		seed?: NoteInit[];
+		class?: string;
+	}
+
+	let {
+		store: providedStore,
+		adapter,
+		storageKey,
+		noteId = $bindable(null),
+		seed,
+		class: className
+	}: Props = $props();
+
+	// Resolved once, on purpose — untrack() is the declaration of that intent, not
+	// a workaround. A store swapped in mid-flight would strand the notes currently
+	// on screen and the editor mounted over them.
+	const owned = untrack(() => providedStore === undefined);
+	const store = untrack(
+		() => providedStore ?? new NotesStore({ adapter: adapter ?? localStorageAdapter(storageKey) })
+	);
+
+	let query = $state('');
+	let pendingDelete = $state<string | null>(null);
+	let iconPickerOpen = $state(false);
+
+	const visible = $derived(store.search(query));
+	const selected = $derived(store.get(noteId));
+	const pendingDeleteNote = $derived(store.get(pendingDelete));
+
+	/** A compact glyph set — enough to tell notes apart at a glance, no picker UI. */
+	const ICON_ROWS = [
+		['📝', '📋', '📌', '💡', '🔥', '⭐'],
+		['🎯', '🚀', '🔧', '📦', '🔒', '🔑'],
+		['💻', '🤖', '🧠', '⚡', '🔍', '🌐']
+	];
+
+	onMount(async () => {
+		// `loading` is only true before a first successful load, so this is also the
+		// flag for "this mount is the one that hydrated the store". Seeding keys off
+		// it rather than off `owned`: a second view sharing an already-loaded store
+		// must not seed again, but a HOST-supplied store that comes back empty
+		// should still get its first-run notes.
+		const hydrating = store.loading;
+		if (hydrating) await store.load();
+		if (hydrating && seed?.length && store.notes.length === 0) {
+			for (const init of seed) store.create(init);
+		}
+		if (!store.get(noteId)) noteId = store.ordered[0]?.id ?? null;
+	});
+
+	onDestroy(() => {
+		if (owned) store.destroy();
+	});
+
+	function createNote() {
+		const note = store.create();
+		noteId = note.id;
+		query = '';
+	}
+
+	function confirmDelete() {
+		const id = pendingDelete;
+		pendingDelete = null;
+		if (!id) return;
+		store.remove(id);
+		if (noteId === id) noteId = store.ordered[0]?.id ?? null;
+	}
+
+	/** Short relative age — the list has a single cell for it, so it must stay narrow. */
+	function formatAge(ts: number) {
+		const d = Date.now() - ts;
+		if (d < 60_000) return 'now';
+		if (d < 3_600_000) return `${Math.floor(d / 60_000)}m`;
+		if (d < 86_400_000) return `${Math.floor(d / 3_600_000)}h`;
+		return new Date(ts).toLocaleDateString();
+	}
+
+	function onRowKeydown(event: KeyboardEvent) {
+		if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+		event.preventDefault();
+		const row = event.currentTarget as HTMLElement;
+		const next = event.key === 'ArrowDown' ? row.nextElementSibling : row.previousElementSibling;
+		(next as HTMLElement | null)?.focus();
+	}
+</script>
+
+<div
+	class={cn('flex h-full min-h-0 text-body text-fg', className)}
+	use:keys={{
+		// Persistence is already debounced; Ctrl/Cmd-S is the reassurance gesture
+		// people press anyway, wired to a real immediate flush.
+		'$mod+s': (e) => {
+			e.preventDefault();
+			void store.flush();
+		}
+	}}
+>
+	<!-- Sidebar: filter + note list -->
+	<div class="flex w-56 shrink-0 flex-col border-r border-divider-faded">
+		<Bar class="shrink-0 rounded-none border-b border-divider-faded">
+			<div
+				class="flex h-md w-full items-center gap-gutter rounded-md bg-elevated px-field text-body era-text-trim shadow-well focus-within:bg-highlight"
+			>
+				<Search class="size-xs shrink-0 text-muted" />
+				<input
+					class="h-full w-full min-w-0 bg-transparent text-fg outline-none placeholder:text-muted"
+					type="text"
+					placeholder="Filter…"
+					aria-label="Filter notes"
+					bind:value={query}
+				/>
+			</div>
+			<Button icon aria-label="New note" title="New note" onclick={createNote}>
+				<Plus />
+			</Button>
+		</Bar>
+
+		{#if store.loading}
+			<div class="flex flex-col gap-gutter p-gutter">
+				{#each Array.from({ length: 5 }, (_, i) => i) as i (i)}
+					<Skeleton class="h-md rounded-item" />
+				{/each}
+			</div>
+		{:else if visible.length === 0}
+			<!-- No call to action here: the document pane already carries the primary
+			     one, and the bar's + is always within reach. Two competing CTAs for
+			     an empty list reads as indecision. -->
+			<div
+				class="flex flex-1 flex-col items-center justify-center gap-gutter p-content text-center"
+			>
+				<p class="text-muted">{query ? 'No matches' : 'No notes yet'}</p>
+			</div>
+		{:else}
+			<ScrollArea.Root class="min-h-0 flex-1 rounded-none">
+				<ScrollArea.Viewport>
+					<div class="flex flex-col gap-gutter p-gutter" role="listbox" aria-label="Notes">
+						{#each visible as note (note.id)}
+							{@const current = note.id === noteId}
+							<!-- The row is the selectable option; the pin/delete buttons inside it
+							     are separate actions, so they stop propagation rather than
+							     selecting the note out from under the click. -->
+							<div
+								class="group flex h-md cursor-pointer items-center gap-(--era-xs-inset-md) rounded-item px-(--era-xs-inset-md) era-text-trim {current
+									? 'bg-hover text-bright shadow-(--era-shadow-pressed)'
+									: 'hover:bg-highlight hover:shadow-highlight'}"
+								role="option"
+								aria-selected={current}
+								tabindex="0"
+								onclick={() => (noteId = note.id)}
+								onkeydown={(e) => {
+									if (e.key === 'Enter' || e.key === ' ') {
+										e.preventDefault();
+										noteId = note.id;
+										return;
+									}
+									onRowKeydown(e);
+								}}
+							>
+								<span class="flex size-xs shrink-0 items-center justify-center">
+									{#if note.icon}
+										{note.icon}
+									{:else}
+										<FileText class="size-xs text-muted" />
+									{/if}
+								</span>
+
+								<span class="min-w-0 flex-1 truncate">{note.title || 'Untitled'}</span>
+
+								<!-- One cell, three occupants: the age at rest, the actions on
+								     hover. Swapping them in place keeps the row from reflowing. -->
+								<span class="shrink-0 text-muted group-hover:hidden">
+									{#if note.pinned}<Pin class="size-xs" />{:else}{formatAge(note.updatedAt)}{/if}
+								</span>
+								<span class="hidden shrink-0 items-center gap-(--era-xs-inset-md) group-hover:flex">
+									<Button
+										icon
+										size="icon"
+										aria-label={note.pinned ? 'Unpin note' : 'Pin note'}
+										title={note.pinned ? 'Unpin note' : 'Pin note'}
+										active={note.pinned}
+										onclick={(e: MouseEvent) => {
+											e.stopPropagation();
+											store.togglePin(note.id);
+										}}
+									>
+										{#if note.pinned}<PinOff />{:else}<Pin />{/if}
+									</Button>
+									<Button
+										icon
+										size="icon"
+										tone="destructive"
+										aria-label="Delete note"
+										title="Delete note"
+										onclick={(e: MouseEvent) => {
+											e.stopPropagation();
+											pendingDelete = note.id;
+										}}
+									>
+										<Trash2 />
+									</Button>
+								</span>
+							</div>
+						{/each}
+					</div>
+				</ScrollArea.Viewport>
+				<ScrollArea.Scrollbar orientation="vertical">
+					<ScrollArea.Thumb />
+				</ScrollArea.Scrollbar>
+			</ScrollArea.Root>
+		{/if}
+	</div>
+
+	<!-- Document pane -->
+	<div class="flex min-w-0 flex-1 flex-col">
+		{#if selected}
+			<Bar class="shrink-0 rounded-none border-b border-divider-faded">
+				<Popover.Root bind:open={iconPickerOpen}>
+					<Popover.Trigger icon aria-label="Change icon" title="Change icon">
+						{#if selected.icon}
+							<span aria-hidden="true">{selected.icon}</span>
+						{:else}
+							<FileText />
+						{/if}
+					</Popover.Trigger>
+					<Popover.Content align="start" class="w-max">
+						<div class="flex flex-col gap-gutter">
+							{#each ICON_ROWS as row, r (r)}
+								<div class="flex gap-gutter">
+									{#each row as glyph (glyph)}
+										<Button
+											icon
+											size="default"
+											active={selected.icon === glyph}
+											aria-label={glyph}
+											onclick={() => {
+												store.setIcon(selected.id, glyph);
+												iconPickerOpen = false;
+											}}
+										>
+											{glyph}
+										</Button>
+									{/each}
+								</div>
+							{/each}
+							{#if selected.icon}
+								<Button
+									size="sm"
+									class="w-full"
+									onclick={() => {
+										store.setIcon(selected.id, null);
+										iconPickerOpen = false;
+									}}
+								>
+									Clear icon
+								</Button>
+							{/if}
+						</div>
+					</Popover.Content>
+				</Popover.Root>
+
+				<Input
+					class="min-w-0 flex-1 bg-transparent shadow-none"
+					aria-label="Note title"
+					placeholder="Untitled"
+					value={selected.title}
+					oninput={(e: Event & { currentTarget: HTMLInputElement }) =>
+						store.update(selected.id, { title: e.currentTarget.value })}
+				/>
+
+				<!-- Fixed-width so the badge appearing and clearing never nudges the
+				     title field; `saving` is deliberately silent — the badge only
+				     reports a settled outcome. -->
+				<span class="flex w-16 shrink-0 justify-end">
+					{#if store.status === 'saved'}
+						<Badge tone="success">saved</Badge>
+					{:else if store.status === 'error'}
+						<Badge tone="destructive" title={store.lastError ?? undefined}>error</Badge>
+					{/if}
+				</span>
+			</Bar>
+
+			<div class="min-h-0 flex-1 overflow-x-hidden overflow-y-auto p-content">
+				<!-- ProseMirror owns the document once running, so switching notes
+				     rebuilds the editor rather than pushing new content into it. -->
+				{#key selected.id}
+					<NoteEditor
+						content={selected.content}
+						onUpdate={(json) => store.update(selected.id, { content: json as TiptapDocument })}
+					/>
+				{/key}
+			</div>
+		{:else}
+			<div class="flex flex-1 flex-col items-center justify-center gap-gutter p-content">
+				<p class="text-muted">
+					{store.notes.length === 0 ? 'Create a note to get started' : 'Select a note'}
+				</p>
+				{#if store.notes.length === 0}
+					<Button onclick={createNote}>
+						<Plus />
+						New note
+					</Button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<AlertDialog.Root
+	open={pendingDelete !== null}
+	onOpenChange={(open) => {
+		if (!open) pendingDelete = null;
+	}}
+>
+	<AlertDialog.Content>
+		<AlertDialog.Title>Delete note</AlertDialog.Title>
+		<AlertDialog.Description>
+			“{pendingDeleteNote?.title || 'Untitled'}” will be removed. This cannot be undone.
+		</AlertDialog.Description>
+		<div class="flex justify-end gap-gutter">
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action tone="destructive" onclick={confirmDelete}>Delete</AlertDialog.Action>
+		</div>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/dist/apps/notes/notes.svelte.d.ts

@@ -0,0 +1,22 @@
+import { NotesStore, type NotesAdapter } from './notes-store.svelte.js';
+import type { NoteInit } from './types.js';
+interface Props {
+    /**
+     * Bring your own store — for a custom adapter, or to share one set of
+     * notes between two mounted views. When supplied, the host owns its
+     * lifecycle: this component will not destroy it on unmount.
+     */
+    store?: NotesStore;
+    /** Persistence for the store this component creates. Ignored if `store` is set. */
+    adapter?: NotesAdapter;
+    /** `localStorage` key for the default adapter. Ignored if `store`/`adapter` is set. */
+    storageKey?: string;
+    /** The open note. Bindable, so a host can deep-link or restore a session. */
+    noteId?: string | null;
+    /** Notes created only when storage comes back empty — a first-run sample. */
+    seed?: NoteInit[];
+    class?: string;
+}
+declare const Notes: import("svelte").Component<Props, {}, "noteId">;
+type Notes = ReturnType<typeof Notes>;
+export default Notes;