From f484b02c587f484f612343f1e059d828dfde97ab Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Wed, 18 Mar 2026 14:01:11 -0700
Subject: [PATCH 01/26] refactor(honeycrisp): split god factory into focused
 state modules and reorganize files

Split the 538-line createNotesState into three focused factories (foldersState,
notesState, viewState) with a clean dependency DAG. Extract workspace schema from
client instantiation, co-locate editor utilities with the Editor component, and
consolidate date utils. All component imports updated to use the split state modules.
---
 .../src/lib/components/CommandPalette.svelte  |  12 +-
 .../src/lib/components/NoteCard.svelte        |  14 +-
 .../src/lib/components/NoteList.svelte        |  51 ++-
 .../src/lib/components/Sidebar.svelte         |  26 +-
 .../lib/{components => editor}/Editor.svelte  |  42 +--
 apps/honeycrisp/src/lib/editor/extensions.ts  |  28 ++
 apps/honeycrisp/src/lib/editor/utils.ts       |  34 ++
 .../src/lib/state/folders.svelte.ts           | 115 ++++++
 apps/honeycrisp/src/lib/state/index.ts        |   3 +
 apps/honeycrisp/src/lib/state/notes.svelte.ts | 326 ++----------------
 apps/honeycrisp/src/lib/state/view.svelte.ts  | 216 ++++++++++++
 apps/honeycrisp/src/lib/utils/date.ts         |  26 ++
 apps/honeycrisp/src/lib/workspace/client.ts   |  16 +
 apps/honeycrisp/src/lib/workspace/index.ts    |   8 +
 .../lib/{workspace.ts => workspace/schema.ts} |  25 +-
 apps/honeycrisp/src/routes/+page.svelte       |  16 +-
 specs/20260318T123322-honeycrisp-refactor.md  |  67 ++++
 17 files changed, 603 insertions(+), 422 deletions(-)
 rename apps/honeycrisp/src/lib/{components => editor}/Editor.svelte (87%)
 create mode 100644 apps/honeycrisp/src/lib/editor/extensions.ts
 create mode 100644 apps/honeycrisp/src/lib/editor/utils.ts
 create mode 100644 apps/honeycrisp/src/lib/state/folders.svelte.ts
 create mode 100644 apps/honeycrisp/src/lib/state/index.ts
 create mode 100644 apps/honeycrisp/src/lib/state/view.svelte.ts
 create mode 100644 apps/honeycrisp/src/lib/workspace/client.ts
 create mode 100644 apps/honeycrisp/src/lib/workspace/index.ts
 rename apps/honeycrisp/src/lib/{workspace.ts => workspace/schema.ts} (85%)
 create mode 100644 specs/20260318T123322-honeycrisp-refactor.md

diff --git a/apps/honeycrisp/src/lib/components/CommandPalette.svelte b/apps/honeycrisp/src/lib/components/CommandPalette.svelte
index 86af051e4d..9cca0769c8 100644
--- a/apps/honeycrisp/src/lib/components/CommandPalette.svelte
+++ b/apps/honeycrisp/src/lib/components/CommandPalette.svelte
@@ -4,7 +4,7 @@
 	import FolderIcon from '@lucide/svelte/icons/folder';
 	import FolderPlusIcon from '@lucide/svelte/icons/folder-plus';
 	import PlusIcon from '@lucide/svelte/icons/plus';
-	import { notesState } from '$lib/state/notes.svelte';
+	import { foldersState, notesState, viewState } from '$lib/state';
 
 	let { open = $bindable(false) }: { open: boolean } = $props();
 </script>
@@ -17,17 +17,17 @@
 		<Command.Group heading="Folders">
 			<Command.Item
 				onSelect={() => {
-					notesState.selectFolder(null);
+					viewState.selectFolder(null);
 					open = false;
 				}}
 			>
 				<FileTextIcon class="mr-2 size-4" />
 				All Notes
 			</Command.Item>
-			{#each notesState.folders as folder (folder.id)}
+			{#each foldersState.folders as folder (folder.id)}
 				<Command.Item
 					onSelect={() => {
-						notesState.selectFolder(folder.id);
+						viewState.selectFolder(folder.id);
 						open = false;
 					}}
 				>
@@ -47,7 +47,7 @@
 			{#each notesState.notes as note (note.id)}
 				<Command.Item
 					onSelect={() => {
-					notesState.selectNote(note.id);
+					viewState.selectNote(note.id);
 						open = false;
 					}}
 				>
@@ -78,7 +78,7 @@
 			</Command.Item>
 			<Command.Item
 				onSelect={() => {
-				notesState.createFolder();
+				foldersState.createFolder();
 					open = false;
 				}}
 			>
diff --git a/apps/honeycrisp/src/lib/components/NoteCard.svelte b/apps/honeycrisp/src/lib/components/NoteCard.svelte
index 0e6af4a143..6e3d6fc609 100644
--- a/apps/honeycrisp/src/lib/components/NoteCard.svelte
+++ b/apps/honeycrisp/src/lib/components/NoteCard.svelte
@@ -8,13 +8,13 @@
 	import PinIcon from '@lucide/svelte/icons/pin';
 	import TrashIcon from '@lucide/svelte/icons/trash-2';
 	import { format } from 'date-fns';
-	import type { Note } from '$lib/workspace';
-	import { notesState } from '$lib/state/notes.svelte';
+	import { foldersState, notesState, viewState } from '$lib/state';
 	import { parseDateTime } from '$lib/utils/date';
+	import type { Note } from '$lib/workspace';
 
 	let { note }: { note: Note } = $props();
 
-	const isSelected = $derived(note.id === notesState.selectedNoteId);
+	const isSelected = $derived(note.id === viewState.selectedNoteId);
 
 	let confirmingPermanentDelete = $state(false);
 </script>
@@ -27,7 +27,7 @@
 			class="group relative flex cursor-pointer flex-col gap-0.5 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-accent/30 {isSelected
 				? 'bg-accent'
 				: ''}"
-			onclick={() => notesState.selectNote(note.id)}
+			onclick={() => viewState.selectNote(note.id)}
 		>
 			<div class="flex items-start justify-between gap-2">
 				<span class="font-medium line-clamp-1">
@@ -44,7 +44,7 @@
 				{note.preview || 'No content'}
 			</p>
 
-			{#if notesState.isRecentlyDeletedView}
+			{#if viewState.isRecentlyDeletedView}
 				<div
 					class="absolute bottom-1 right-2 hidden items-center gap-0.5 group-hover:flex {isSelected
 						? 'flex'
@@ -107,7 +107,7 @@
 	</ContextMenu.Trigger>
 
 	<ContextMenu.Content class="w-48">
-		{#if notesState.isRecentlyDeletedView}
+		{#if viewState.isRecentlyDeletedView}
 			<ContextMenu.Item onclick={() => notesState.restoreNote(note.id)}>
 				<ArchiveRestoreIcon class="mr-2 size-4" />
 				Restore
@@ -141,7 +141,7 @@
 						Unfiled
 					</ContextMenu.Item>
 					<ContextMenu.Separator />
-					{#each notesState.folders as folder (folder.id)}
+					{#each foldersState.folders as folder (folder.id)}
 						<ContextMenu.Item
 							onclick={() => notesState.moveNoteToFolder(note.id, folder.id)}
 						>
diff --git a/apps/honeycrisp/src/lib/components/NoteList.svelte b/apps/honeycrisp/src/lib/components/NoteList.svelte
index b96ce7fb22..a622f66d79 100644
--- a/apps/honeycrisp/src/lib/components/NoteList.svelte
+++ b/apps/honeycrisp/src/lib/components/NoteList.svelte
@@ -5,29 +5,18 @@
 	import ArrowUpDownIcon from '@lucide/svelte/icons/arrow-up-down';
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import PlusIcon from '@lucide/svelte/icons/plus';
-	import { differenceInDays, format, isToday, isYesterday } from 'date-fns';
 	import NoteCard from '$lib/components/NoteCard.svelte';
-	import { notesState } from '$lib/state/notes.svelte';
-	import { parseDateTime } from '$lib/utils/date';
+	import { notesState, viewState } from '$lib/state';
+	import { getDateLabel } from '$lib/utils/date';
 	import type { Note } from '$lib/workspace';
 
 	/** Notes to display — filtered active notes or deleted notes depending on view. */
 	const notes = $derived(
-		notesState.isRecentlyDeletedView
+		viewState.isRecentlyDeletedView
 			? notesState.deletedNotes
-			: notesState.filteredNotes,
+			: viewState.filteredNotes,
 	);
 
-	function getDateLabel(dts: string): string {
-		const date = parseDateTime(dts);
-		if (isToday(date)) return 'Today';
-		if (isYesterday(date)) return 'Yesterday';
-		const daysAgo = differenceInDays(new Date(), date);
-		if (daysAgo <= 7) return 'Previous 7 Days';
-		if (daysAgo <= 30) return 'Previous 30 Days';
-		return format(date, 'MMMM yyyy');
-	}
-
 	const groupedNotes = $derived.by(() => {
 		const pinned = notes
 			.filter((n) => n.pinned)
@@ -76,18 +65,18 @@
 		if (flatNoteIds.length === 0) return;
 		e.preventDefault();
 
-		const currentIndex = notesState.selectedNoteId
-			? flatNoteIds.indexOf(notesState.selectedNoteId)
+		const currentIndex = viewState.selectedNoteId
+			? flatNoteIds.indexOf(viewState.selectedNoteId)
 			: -1;
 
 		if (e.key === 'ArrowDown') {
 			const nextIndex =
 				currentIndex < flatNoteIds.length - 1 ? currentIndex + 1 : 0;
-			notesState.selectNote(flatNoteIds[nextIndex]!);
+			viewState.selectNote(flatNoteIds[nextIndex]!);
 		} else {
 			const prevIndex =
 				currentIndex > 0 ? currentIndex - 1 : flatNoteIds.length - 1;
-			notesState.selectNote(flatNoteIds[prevIndex]!);
+			viewState.selectNote(flatNoteIds[prevIndex]!);
 		}
 	}
 </script>
@@ -96,10 +85,10 @@
 <div class="flex h-full flex-col" onkeydown={handleKeydown} tabindex="-1">
 	<div class="flex items-center justify-between border-b px-4 py-3">
 		<div class="flex items-center gap-2">
-			<h2 class="text-sm font-semibold">{notesState.folderName}</h2>
+			<h2 class="text-sm font-semibold">{viewState.folderName}</h2>
 			<span class="text-xs text-muted-foreground">{notes.length}</span>
 		</div>
-		{#if !notesState.isRecentlyDeletedView}
+		{#if !viewState.isRecentlyDeletedView}
 			<div class="flex items-center gap-1">
 				<DropdownMenu.Root>
 					<DropdownMenu.Trigger>
@@ -110,24 +99,28 @@
 						{/snippet}
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content align="end" class="w-44">
-						<DropdownMenu.Item onclick={() => notesState.setSortBy('dateEdited')}>
-							{#if notesState.sortBy === 'dateEdited'}
+						<DropdownMenu.Item
+							onclick={() => viewState.setSortBy('dateEdited')}
+						>
+							{#if viewState.sortBy === 'dateEdited'}
 								<CheckIcon class="mr-2 size-4" />
 							{:else}
 								<span class="mr-2 size-4"></span>
 							{/if}
 							Date Edited
 						</DropdownMenu.Item>
-						<DropdownMenu.Item onclick={() => notesState.setSortBy('dateCreated')}>
-							{#if notesState.sortBy === 'dateCreated'}
+						<DropdownMenu.Item
+							onclick={() => viewState.setSortBy('dateCreated')}
+						>
+							{#if viewState.sortBy === 'dateCreated'}
 								<CheckIcon class="mr-2 size-4" />
 							{:else}
 								<span class="mr-2 size-4"></span>
 							{/if}
 							Date Created
 						</DropdownMenu.Item>
-						<DropdownMenu.Item onclick={() => notesState.setSortBy('title')}>
-							{#if notesState.sortBy === 'title'}
+						<DropdownMenu.Item onclick={() => viewState.setSortBy('title')}>
+							{#if viewState.sortBy === 'title'}
 								<CheckIcon class="mr-2 size-4" />
 							{:else}
 								<span class="mr-2 size-4"></span>
@@ -154,7 +147,7 @@
 				class="flex h-full items-center justify-center p-8 text-center text-muted-foreground"
 			>
 				<p class="text-sm">
-					{#if notesState.isRecentlyDeletedView}
+					{#if viewState.isRecentlyDeletedView}
 						No deleted notes
 					{:else}
 						No notes yet. Click + to create one.
@@ -169,7 +162,7 @@
 							{group.label}
 						</h3>
 						{#each group.entries as note (note.id)}
-						<NoteCard {note} />
+							<NoteCard {note} />
 						{/each}
 					</div>
 				{/each}
diff --git a/apps/honeycrisp/src/lib/components/Sidebar.svelte b/apps/honeycrisp/src/lib/components/Sidebar.svelte
index dd56fdd73b..4c8790a930 100644
--- a/apps/honeycrisp/src/lib/components/Sidebar.svelte
+++ b/apps/honeycrisp/src/lib/components/Sidebar.svelte
@@ -9,8 +9,8 @@
 	import PencilIcon from '@lucide/svelte/icons/pencil';
 	import PlusIcon from '@lucide/svelte/icons/plus';
 	import TrashIcon from '@lucide/svelte/icons/trash-2';
+	import { foldersState, notesState, viewState } from '$lib/state';
 	import type { Folder, FolderId } from '$lib/workspace';
-	import { notesState } from '$lib/state/notes.svelte';
 
 	let editingFolderId = $state<FolderId | null>(null);
 	let editingName = $state('');
@@ -23,7 +23,7 @@
 
 	function commitRename() {
 		if (editingFolderId && editingName.trim()) {
-			notesState.renameFolder(editingFolderId, editingName.trim());
+			foldersState.renameFolder(editingFolderId, editingName.trim());
 		}
 		editingFolderId = null;
 		editingName = '';
@@ -36,7 +36,7 @@
 
 	function confirmDelete() {
 		if (deletingFolderId) {
-			notesState.deleteFolder(deletingFolderId);
+			foldersState.deleteFolder(deletingFolderId);
 		}
 		deletingFolderId = null;
 	}
@@ -51,8 +51,8 @@
 		<div class="px-2 pb-1">
 			<Sidebar.Input
 				placeholder="Search notes…"
-				value={notesState.searchQuery}
-				oninput={(e) => notesState.setSearchQuery(e.currentTarget.value)}
+				value={viewState.searchQuery}
+				oninput={(e) => viewState.setSearchQuery(e.currentTarget.value)}
 			/>
 		</div>
 	</Sidebar.Header>
@@ -63,8 +63,8 @@
 				<Sidebar.Menu>
 					<Sidebar.MenuItem>
 						<Sidebar.MenuButton
-							isActive={notesState.selectedFolderId === null && !notesState.isRecentlyDeletedView}
-							onclick={() => notesState.selectFolder(null)}
+							isActive={viewState.selectedFolderId === null && !viewState.isRecentlyDeletedView}
+							onclick={() => viewState.selectFolder(null)}
 						>
 							<FileTextIcon class="size-4" />
 							<span>All Notes</span>
@@ -75,8 +75,8 @@
 					</Sidebar.MenuItem>
 					<Sidebar.MenuItem>
 						<Sidebar.MenuButton
-							isActive={notesState.isRecentlyDeletedView && notesState.selectedFolderId === null}
-							onclick={() => notesState.selectRecentlyDeleted()}
+							isActive={viewState.isRecentlyDeletedView && viewState.selectedFolderId === null}
+							onclick={() => viewState.selectRecentlyDeleted()}
 						>
 							<TrashIcon class="size-4" />
 							<span>Recently Deleted</span>
@@ -98,7 +98,7 @@
 				</Collapsible.Trigger>
 				<Sidebar.GroupAction
 					title="New Folder"
-					onclick={() => notesState.createFolder()}
+					onclick={() => foldersState.createFolder()}
 				>
 					<PlusIcon />
 					<span class="sr-only">New Folder</span>
@@ -106,7 +106,7 @@
 				<Collapsible.Content>
 					<Sidebar.GroupContent>
 						<Sidebar.Menu>
-							{#each notesState.folders as folder (folder.id)}
+							{#each foldersState.folders as folder (folder.id)}
 								<Sidebar.MenuItem>
 									{#if editingFolderId === folder.id}
 										<div class="flex items-center gap-2 px-2 py-1">
@@ -124,8 +124,8 @@
 										</div>
 									{:else}
 										<Sidebar.MenuButton
-											isActive={notesState.selectedFolderId === folder.id}
-											onclick={() => notesState.selectFolder(folder.id)}
+											isActive={viewState.selectedFolderId === folder.id}
+											onclick={() => viewState.selectFolder(folder.id)}
 										>
 											{#if folder.icon}
 												<span class="text-base leading-none"
diff --git a/apps/honeycrisp/src/lib/components/Editor.svelte b/apps/honeycrisp/src/lib/editor/Editor.svelte
similarity index 87%
rename from apps/honeycrisp/src/lib/components/Editor.svelte
rename to apps/honeycrisp/src/lib/editor/Editor.svelte
index 00ee8f2530..297706a1e1 100644
--- a/apps/honeycrisp/src/lib/components/Editor.svelte
+++ b/apps/honeycrisp/src/lib/editor/Editor.svelte
@@ -14,21 +14,26 @@
 	import QuoteIcon from '@lucide/svelte/icons/quote';
 	import StrikethroughIcon from '@lucide/svelte/icons/strikethrough';
 	import UnderlineIcon from '@lucide/svelte/icons/underline';
-	import { Editor, Extension } from '@tiptap/core';
+	import { Editor } from '@tiptap/core';
 	import Placeholder from '@tiptap/extension-placeholder';
 	import TaskItem from '@tiptap/extension-task-item';
 	import TaskList from '@tiptap/extension-task-list';
 	import Underline from '@tiptap/extension-underline';
 	import StarterKit from '@tiptap/starter-kit';
-	import { ySyncPlugin, yUndoPlugin } from 'y-prosemirror';
 	import type * as Y from 'yjs';
+	import { createYjsExtension } from './extensions';
+	import { extractTitleAndPreview } from './utils';
 
 	let {
 		yxmlfragment,
 		onContentChange,
 	}: {
 		yxmlfragment: Y.XmlFragment;
-		onContentChange?: (content: { title: string; preview: string; wordCount: number }) => void;
+		onContentChange?: (content: {
+			title: string;
+			preview: string;
+			wordCount: number;
+		}) => void;
 	} = $props();
 
 	let element: HTMLDivElement | undefined = $state();
@@ -47,37 +52,6 @@
 		blockquote: false,
 	});
 
-	/**
-	 * Create a Tiptap extension that wraps y-prosemirror plugins for Yjs collaboration.
-	 *
-	 * Uses ySyncPlugin for binding ProseMirror state to Y.XmlFragment, and yUndoPlugin for
-	 * collaborative undo/redo that respects per-client origins.
-	 */
-	function createYjsExtension(xmlFragment: Y.XmlFragment) {
-		return Extension.create({
-			name: 'yjs-collaboration',
-			addProseMirrorPlugins() {
-				return [ySyncPlugin(xmlFragment), yUndoPlugin()];
-			},
-		});
-	}
-
-	function extractTitleAndPreview(ed: Editor): {
-		title: string;
-		preview: string;
-		wordCount: number;
-	} {
-		const text = ed.getText();
-		const firstNewline = text.indexOf('\n');
-		const firstLine = firstNewline === -1 ? text : text.slice(0, firstNewline);
-		const trimmed = text.trim();
-		return {
-			title: firstLine.slice(0, 80).trim(),
-			preview: text.slice(0, 100).trim(),
-			wordCount: trimmed.length === 0 ? 0 : trimmed.split(/\s+/).length,
-		};
-	}
-
 	$effect(() => {
 		if (!element) return;
 
diff --git a/apps/honeycrisp/src/lib/editor/extensions.ts b/apps/honeycrisp/src/lib/editor/extensions.ts
new file mode 100644
index 0000000000..ed78fa52ab
--- /dev/null
+++ b/apps/honeycrisp/src/lib/editor/extensions.ts
@@ -0,0 +1,28 @@
+/**
+ * Tiptap extensions for Honeycrisp's rich-text editor.
+ */
+
+import { Extension } from '@tiptap/core';
+import { ySyncPlugin, yUndoPlugin } from 'y-prosemirror';
+import type * as Y from 'yjs';
+
+/**
+ * Create a Tiptap extension that wraps y-prosemirror plugins for Yjs collaboration.
+ *
+ * Uses ySyncPlugin for binding ProseMirror state to Y.XmlFragment, and yUndoPlugin for
+ * collaborative undo/redo that respects per-client origins.
+ *
+ * @example
+ * ```typescript
+ * const yjsExtension = createYjsExtension(yxmlfragment);
+ * const editor = new Editor({ extensions: [StarterKit, yjsExtension] });
+ * ```
+ */
+export function createYjsExtension(xmlFragment: Y.XmlFragment) {
+	return Extension.create({
+		name: 'yjs-collaboration',
+		addProseMirrorPlugins() {
+			return [ySyncPlugin(xmlFragment), yUndoPlugin()];
+		},
+	});
+}
diff --git a/apps/honeycrisp/src/lib/editor/utils.ts b/apps/honeycrisp/src/lib/editor/utils.ts
new file mode 100644
index 0000000000..e0ce2b8b7b
--- /dev/null
+++ b/apps/honeycrisp/src/lib/editor/utils.ts
@@ -0,0 +1,34 @@
+/**
+ * Editor content extraction utilities for Honeycrisp.
+ */
+
+import type { Editor } from '@tiptap/core';
+
+/**
+ * Extract title, preview, and word count from editor content.
+ *
+ * Title is the first line (up to 80 chars), preview is the first 100 chars,
+ * and word count is computed by splitting on whitespace. Returns zeros/empty
+ * strings for empty content.
+ *
+ * @example
+ * ```typescript
+ * const { title, preview, wordCount } = extractTitleAndPreview(editor);
+ * notesState.updateNoteContent({ title, preview, wordCount });
+ * ```
+ */
+export function extractTitleAndPreview(editor: Editor): {
+	title: string;
+	preview: string;
+	wordCount: number;
+} {
+	const text = editor.getText();
+	const firstNewline = text.indexOf('\n');
+	const firstLine = firstNewline === -1 ? text : text.slice(0, firstNewline);
+	const trimmed = text.trim();
+	return {
+		title: firstLine.slice(0, 80).trim(),
+		preview: text.slice(0, 100).trim(),
+		wordCount: trimmed.length === 0 ? 0 : trimmed.split(/\s+/).length,
+	};
+}
diff --git a/apps/honeycrisp/src/lib/state/folders.svelte.ts b/apps/honeycrisp/src/lib/state/folders.svelte.ts
new file mode 100644
index 0000000000..11636f9c0a
--- /dev/null
+++ b/apps/honeycrisp/src/lib/state/folders.svelte.ts
@@ -0,0 +1,115 @@
+/**
+ * Reactive folder state for Honeycrisp.
+ *
+ * Manages folder CRUD operations and the reactive folder list. Backed by
+ * a Y.Doc CRDT table, so folders sync across devices. Uses a factory
+ * function pattern to encapsulate `$state`.
+ *
+ * Observers are registered once during factory construction and never
+ * cleaned up (SPA lifetime).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { foldersState } from '$lib/state';
+ * </script>
+ *
+ * {#each foldersState.folders as folder (folder.id)}
+ *   <p>{folder.name}</p>
+ * {/each}
+ * <button onclick={() => foldersState.createFolder()}>New Folder</button>
+ * ```
+ */
+
+import { generateId } from '@epicenter/workspace';
+import workspaceClient, { type Folder, type FolderId } from '$lib/workspace';
+
+function createFoldersState() {
+	// ─── Reactive State ──────────────────────────────────────────────────
+
+	/** Read all valid folders, used as initial seed + observer refresh. */
+	const readFolders = () => workspaceClient.tables.folders.getAllValid();
+
+	let folders = $state<Folder[]>(readFolders());
+
+	// ─── Workspace Observers ─────────────────────────────────────────────
+
+	const _unobserveFolders = workspaceClient.tables.folders.observe(() => {
+		folders = readFolders();
+	});
+
+	// ─── Public API ──────────────────────────────────────────────────────
+
+	return {
+		get folders() {
+			return folders;
+		},
+
+		/**
+		 * Create a new folder with the default name "New Folder".
+		 *
+		 * The folder is added to the end of the folder list and can be renamed
+		 * immediately. Use this when the user clicks "New Folder" in the sidebar.
+		 *
+		 * @example
+		 * ```typescript
+		 * foldersState.createFolder();
+		 * // Folder appears in sidebar with name "New Folder"
+		 * ```
+		 */
+		createFolder() {
+			const id = generateId() as string as FolderId;
+			workspaceClient.tables.folders.set({
+				id,
+				name: 'New Folder',
+				sortOrder: folders.length,
+				_v: 1,
+			});
+		},
+
+		/**
+		 * Rename an existing folder.
+		 *
+		 * Updates the folder name in the sidebar and all references. The folder
+		 * must exist; if it doesn't, the update is silently ignored.
+		 *
+		 * @example
+		 * ```typescript
+		 * foldersState.renameFolder(folderId, 'Work');
+		 * ```
+		 */
+		renameFolder(folderId: FolderId, name: string) {
+			workspaceClient.tables.folders.update(folderId, { name });
+		},
+
+		/**
+		 * Delete a folder and move all its notes to unfiled.
+		 *
+		 * The folder is removed from the sidebar. All notes that were in this
+		 * folder are moved to the unfiled section (folderId set to undefined).
+		 * If the deleted folder was selected, the selection is cleared.
+		 *
+		 * @example
+		 * ```typescript
+		 * foldersState.deleteFolder(folderId);
+		 * // Folder disappears from sidebar, its notes move to "All Notes"
+		 * ```
+		 */
+		deleteFolder(folderId: FolderId) {
+			const folderNotes = workspaceClient.tables.notes
+				.getAllValid()
+				.filter((n) => n.folderId === folderId);
+			for (const note of folderNotes) {
+				workspaceClient.tables.notes.update(note.id, {
+					folderId: undefined,
+				});
+			}
+			workspaceClient.tables.folders.delete(folderId);
+			if (workspaceClient.kv.get('selectedFolderId') === folderId) {
+				workspaceClient.kv.set('selectedFolderId', null);
+			}
+		},
+	};
+}
+
+export const foldersState = createFoldersState();
diff --git a/apps/honeycrisp/src/lib/state/index.ts b/apps/honeycrisp/src/lib/state/index.ts
new file mode 100644
index 0000000000..41cac4736b
--- /dev/null
+++ b/apps/honeycrisp/src/lib/state/index.ts
@@ -0,0 +1,3 @@
+export { foldersState } from './folders.svelte';
+export { notesState } from './notes.svelte';
+export { viewState } from './view.svelte';
diff --git a/apps/honeycrisp/src/lib/state/notes.svelte.ts b/apps/honeycrisp/src/lib/state/notes.svelte.ts
index 1e7c0ee935..bf1dd224ac 100644
--- a/apps/honeycrisp/src/lib/state/notes.svelte.ts
+++ b/apps/honeycrisp/src/lib/state/notes.svelte.ts
@@ -1,24 +1,17 @@
 /**
  * Reactive notes state for Honeycrisp.
  *
- * Backed by a Y.Doc CRDT table, so notes sync across devices. Uses a
- * factory function pattern to encapsulate `$state` — Svelte 5 doesn't
- * allow exporting reassigned `$state` from modules.
- *
- * Uses a plain `$state` array (not `SvelteMap`) because the access pattern
- * is always "render the full sorted list." There's no keyed lookup, no
- * partial mutation — the Y.Doc observer wholesale-replaces the array on
- * every change, which is the simplest reactive model for a list that's
- * always read in full.
+ * Manages note CRUD operations and reactive note collections. Backed by
+ * a Y.Doc CRDT table, so notes sync across devices. Uses a factory
+ * function pattern to encapsulate `$state`.
  *
  * Observers are registered once during factory construction and never
- * cleaned up (SPA lifetime). Same pattern as tab-manager's
- * `saved-tab-state.svelte.ts`.
+ * cleaned up (SPA lifetime).
  *
  * @example
  * ```svelte
  * <script>
- *   import { notesState } from '$lib/state/notes.svelte';
+ *   import { notesState } from '$lib/state';
  * </script>
  *
  * {#each notesState.notes as note (note.id)}
@@ -30,61 +23,26 @@
 
 import { dateTimeStringNow, generateId } from '@epicenter/workspace';
 import workspaceClient, {
-	type Folder,
 	type FolderId,
 	type Note,
 	type NoteId,
 } from '$lib/workspace';
+import { foldersState } from './folders.svelte';
 
 function createNotesState() {
 	// ─── Reactive State ──────────────────────────────────────────────────
 
-	/** Read all valid folders, used as initial seed + observer refresh. */
-	const readFolders = () => workspaceClient.tables.folders.getAllValid();
-
 	/** Read all valid notes (including deleted), used as initial seed + observer refresh. */
 	const readNotes = () => workspaceClient.tables.notes.getAllValid();
 
-	let folders = $state<Folder[]>(readFolders());
 	let allNotes = $state<Note[]>(readNotes());
 
-	let selectedFolderId = $state<FolderId | null>(
-		workspaceClient.kv.get('selectedFolderId'),
-	);
-	let selectedNoteId = $state<NoteId | null>(
-		workspaceClient.kv.get('selectedNoteId'),
-	);
-	let sortBy = $state<'dateEdited' | 'dateCreated' | 'title'>(
-		workspaceClient.kv.get('sortBy'),
-	);
-	let searchQuery = $state('');
-	let isRecentlyDeletedView = $state(false);
-
 	// ─── Workspace Observers ─────────────────────────────────────────────
 
-	// Observers fire on Y.Doc changes (local + remote). They wholesale-replace
-	// the $state arrays — same pattern as tab-manager's saved-tab-state.
-
-	const _unobserveFolders = workspaceClient.tables.folders.observe(() => {
-		folders = readFolders();
-	});
-
 	const _unobserveNotes = workspaceClient.tables.notes.observe(() => {
 		allNotes = readNotes();
 	});
 
-	const _unobserveSelectedFolder = workspaceClient.kv.observe('selectedFolderId', (change) => {
-		selectedFolderId = change.type === 'set' ? change.value : null;
-	});
-
-	const _unobserveSelectedNote = workspaceClient.kv.observe('selectedNoteId', (change) => {
-		selectedNoteId = change.type === 'set' ? change.value : null;
-	});
-
-	const _unobserveSortBy = workspaceClient.kv.observe('sortBy', (change) => {
-		sortBy = change.type === 'set' ? change.value : 'dateEdited';
-	});
-
 	// ─── Derived State ───────────────────────────────────────────────────
 
 	/** Active notes — not soft-deleted. */
@@ -95,28 +53,6 @@ function createNotesState() {
 		allNotes.filter((n) => n.deletedAt !== undefined),
 	);
 
-	/** Notes filtered by selected folder and search query. */
-	const filteredNotes = $derived.by(() => {
-		let result =
-			selectedFolderId === null
-				? notes
-				: notes.filter((n) => n.folderId === selectedFolderId);
-		if (searchQuery.trim()) {
-			const q = searchQuery.trim().toLowerCase();
-			result = result.filter(
-				(n) =>
-					n.title.toLowerCase().includes(q) ||
-					n.preview.toLowerCase().includes(q),
-			);
-		}
-		return [...result].sort((a, b) => {
-			if (sortBy === 'title') return a.title.localeCompare(b.title);
-			if (sortBy === 'dateCreated')
-				return b.createdAt.localeCompare(a.createdAt);
-			return b.updatedAt.localeCompare(a.updatedAt);
-		});
-	});
-
 	/** Per-folder note counts for the sidebar (active notes only). */
 	const noteCounts = $derived.by(() => {
 		const counts: Record<string, number> = {};
@@ -128,27 +64,9 @@ function createNotesState() {
 		return counts;
 	});
 
-	/** Human-readable name for the current view (sidebar + NoteList header). */
-	const folderName = $derived(
-		isRecentlyDeletedView
-			? 'Recently Deleted'
-			: selectedFolderId
-				? (folders.find((f) => f.id === selectedFolderId)?.name ?? 'Notes')
-				: 'All Notes',
-	);
-
-	/** The currently selected note (can be active or deleted). */
-	const selectedNote = $derived(
-		allNotes.find((n) => n.id === selectedNoteId) ?? null,
-	);
-
 	// ─── Public API ──────────────────────────────────────────────────────
 
 	return {
-		// State (read-only via getters)
-		get folders() {
-			return folders;
-		},
 		get allNotes() {
 			return allNotes;
 		},
@@ -158,102 +76,9 @@ function createNotesState() {
 		get deletedNotes() {
 			return deletedNotes;
 		},
-		get filteredNotes() {
-			return filteredNotes;
-		},
 		get noteCounts() {
 			return noteCounts;
 		},
-		get selectedFolderId() {
-			return selectedFolderId;
-		},
-		get selectedNoteId() {
-			return selectedNoteId;
-		},
-		get selectedNote() {
-			return selectedNote;
-		},
-		get searchQuery() {
-			return searchQuery;
-		},
-		get sortBy() {
-			return sortBy;
-		},
-		get isRecentlyDeletedView() {
-			return isRecentlyDeletedView;
-		},
-		get folderName() {
-			return folderName;
-		},
-
-		// Actions
-
-		/**
-		 * Create a new folder with the default name "New Folder".
-		 *
-		 * The folder is added to the end of the folder list and can be renamed
-		 * immediately. Use this when the user clicks "New Folder" in the sidebar.
-		 *
-		 * @example
-		 * ```typescript
-		 * // Create a new folder
-		 * notesState.createFolder();
-		 * // Folder appears in sidebar with name "New Folder"
-		 * ```
-		 */
-		createFolder() {
-			const id = generateId() as string as FolderId;
-			workspaceClient.tables.folders.set({
-				id,
-				name: 'New Folder',
-				sortOrder: folders.length,
-				_v: 1,
-			});
-		},
-
-		/**
-		 * Rename an existing folder.
-		 *
-		 * Updates the folder name in the sidebar and all references. The folder
-		 * must exist; if it doesn't, the update is silently ignored.
-		 *
-		 * @example
-		 * ```typescript
-		 * // Rename a folder to "Work"
-		 * notesState.renameFolder(folderId, 'Work');
-		 * // Sidebar updates immediately
-		 * ```
-		 */
-		renameFolder(folderId: FolderId, name: string) {
-			workspaceClient.tables.folders.update(folderId, { name });
-		},
-
-		/**
-		 * Delete a folder and move all its notes to unfiled.
-		 *
-		 * The folder is removed from the sidebar. All notes that were in this
-		 * folder are moved to the unfiled section (folderId set to undefined).
-		 * If the deleted folder was selected, the selection is cleared.
-		 *
-		 * @example
-		 * ```typescript
-		 * // Delete a folder and move its notes to unfiled
-		 * notesState.deleteFolder(folderId);
-		 * // Folder disappears from sidebar, its notes move to "All Notes"
-		 * ```
-		 */
-		deleteFolder(folderId: FolderId) {
-			const folderNotes = allNotes.filter((n) => n.folderId === folderId);
-			for (const note of folderNotes) {
-				workspaceClient.tables.notes.update(note.id, {
-					folderId: undefined,
-				});
-			}
-			workspaceClient.tables.folders.delete(folderId);
-			if (selectedFolderId === folderId) {
-				workspaceClient.kv.set('selectedFolderId', null);
-			}
-		},
 
 		/**
 		 * Create a new note in the currently selected folder.
@@ -264,13 +89,13 @@ function createNotesState() {
 		 *
 		 * @example
 		 * ```typescript
-		 * // From a Svelte component:
 		 * notesState.createNote();
 		 * // New note appears in the list and editor opens
 		 * ```
 		 */
 		createNote() {
 			const id = generateId() as string as NoteId;
+			const selectedFolderId = workspaceClient.kv.get('selectedFolderId');
 			workspaceClient.tables.notes.set({
 				id,
 				folderId: selectedFolderId ?? undefined,
@@ -295,7 +120,6 @@ function createNotesState() {
 		 *
 		 * @example
 		 * ```typescript
-		 * // Soft-delete a note
 		 * notesState.softDeleteNote(noteId);
 		 * // Note moves to Recently Deleted, editor closes
 		 * ```
@@ -304,7 +128,7 @@ function createNotesState() {
 			workspaceClient.tables.notes.update(noteId, {
 				deletedAt: dateTimeStringNow(),
 			});
-			if (selectedNoteId === noteId) {
+			if (workspaceClient.kv.get('selectedNoteId') === noteId) {
 				workspaceClient.kv.set('selectedNoteId', null);
 			}
 		},
@@ -317,7 +141,6 @@ function createNotesState() {
 		 *
 		 * @example
 		 * ```typescript
-		 * // Restore a deleted note
 		 * notesState.restoreNote(noteId);
 		 * // Note reappears in its original folder (or unfiled)
 		 * ```
@@ -325,9 +148,8 @@ function createNotesState() {
 		restoreNote(noteId: NoteId) {
 			const note = allNotes.find((n) => n.id === noteId);
 			if (!note) return;
-			// If the note's folder no longer exists, restore to unfiled
 			const folderExists = note.folderId
-				? folders.some((f) => f.id === note.folderId)
+				? foldersState.folders.some((f) => f.id === note.folderId)
 				: true;
 			workspaceClient.tables.notes.update(noteId, {
 				deletedAt: undefined,
@@ -343,14 +165,13 @@ function createNotesState() {
 		 *
 		 * @example
 		 * ```typescript
-		 * // Permanently delete a note
 		 * notesState.permanentlyDeleteNote(noteId);
 		 * // Note is removed from Recently Deleted and database
 		 * ```
 		 */
 		permanentlyDeleteNote(noteId: NoteId) {
 			workspaceClient.tables.notes.delete(noteId);
-			if (selectedNoteId === noteId) {
+			if (workspaceClient.kv.get('selectedNoteId') === noteId) {
 				workspaceClient.kv.set('selectedNoteId', null);
 			}
 		},
@@ -363,7 +184,6 @@ function createNotesState() {
 		 *
 		 * @example
 		 * ```typescript
-		 * // Pin a note to keep it at the top
 		 * notesState.pinNote(noteId);
 		 * // Note moves to the top of the list
 		 * ```
@@ -377,72 +197,28 @@ function createNotesState() {
 		},
 
 		/**
-		 * Select a folder and clear the note selection.
-		 *
-		 * Switches the view to show notes in the selected folder. If `null` is
-		 * passed, shows all notes (unfiled + all folders). Also clears the
-		 * Recently Deleted view if it was active.
-		 *
-		 * @example
-		 * ```typescript
-		 * // Select a specific folder
-		 * notesState.selectFolder(folderId);
-		 * // View updates to show only notes in that folder
-		 *
-		 * // Show all notes
-		 * notesState.selectFolder(null);
-		 * // View updates to show all notes
-		 * ```
-		 */
-		selectFolder(folderId: FolderId | null) {
-			isRecentlyDeletedView = false;
-			workspaceClient.kv.set('selectedFolderId', folderId);
-			workspaceClient.kv.set('selectedNoteId', null);
-		},
-
-		/**
-		 * Switch to the Recently Deleted view.
+		 * Move a note to a different folder.
 		 *
-		 * Shows only soft-deleted notes. Clears the folder selection and note
-		 * selection. Use this when the user clicks "Recently Deleted" in the sidebar.
+		 * Pass `undefined` to move the note to unfiled (remove from folder).
+		 * The note remains selected if it was selected before the move.
 		 *
 		 * @example
 		 * ```typescript
-		 * // Switch to Recently Deleted view
-		 * notesState.selectRecentlyDeleted();
-		 * // View updates to show only deleted notes
-		 * ```
-		 */
-		selectRecentlyDeleted() {
-			isRecentlyDeletedView = true;
-			workspaceClient.kv.set('selectedFolderId', null);
-			workspaceClient.kv.set('selectedNoteId', null);
-		},
-
-		/**
-		 * Select a note by ID to open it in the editor.
-		 *
-		 * The note can be active or soft-deleted. The editor will open and
-		 * display the selected note's content.
+		 * notesState.moveNoteToFolder(noteId, folderId);
 		 *
-		 * @example
-		 * ```typescript
-		 * // Select a note to open it in the editor
-		 * notesState.selectNote(noteId);
-		 * // Editor opens and displays the note
+		 * // Move a note to unfiled
+		 * notesState.moveNoteToFolder(noteId, undefined);
 		 * ```
 		 */
-		selectNote(noteId: NoteId) {
-			workspaceClient.kv.set('selectedNoteId', noteId);
+		moveNoteToFolder(noteId: NoteId, folderId: FolderId | undefined) {
+			workspaceClient.tables.notes.update(noteId, { folderId });
 		},
 
 		/**
 		 * Update the title, preview, and word count of the currently selected note.
 		 *
 		 * Called when the editor content changes. Only updates if a note is
-		 * currently selected. The preview is typically the first line or a
-		 * summary of the note content. Word count is computed from the full
-		 * editor text.
+		 * currently selected.
 		 *
 		 * @example
 		 * ```typescript
@@ -462,6 +238,7 @@ function createNotesState() {
 			preview: string;
 			wordCount: number;
 		}) {
+			const selectedNoteId = workspaceClient.kv.get('selectedNoteId');
 			if (!selectedNoteId) return;
 			workspaceClient.tables.notes.update(selectedNoteId, {
 				title,
@@ -469,69 +246,6 @@ function createNotesState() {
 				wordCount,
 			});
 		},
-
-		/**
-		 * Change the note sort order.
-		 *
-		 * Sorts the note list by the specified criteria. The sort preference
-		 * is persisted to the workspace KV store.
-		 *
-		 * @example
-		 * ```typescript
-		 * // Sort by title alphabetically
-		 * notesState.setSortBy('title');
-		 *
-		 * // Sort by date edited (most recent first)
-		 * notesState.setSortBy('dateEdited');
-		 *
-		 * // Sort by date created (most recent first)
-		 * notesState.setSortBy('dateCreated');
-		 * ```
-		 */
-		setSortBy(value: 'dateEdited' | 'dateCreated' | 'title') {
-			workspaceClient.kv.set('sortBy', value);
-		},
-
-		/**
-		 * Update the search filter text.
-		 *
-		 * Filters the note list to show only notes whose title or preview
-		 * contains the search query (case-insensitive). Pass an empty string
-		 * to clear the search.
-		 *
-		 * @example
-		 * ```typescript
-		 * // Search for notes containing "meeting"
-		 * notesState.setSearchQuery('meeting');
-		 * // List updates to show only matching notes
-		 *
-		 * // Clear search
-		 * notesState.setSearchQuery('');
-		 * // List shows all notes again
-		 * ```
-		 */
-		setSearchQuery(query: string) {
-			searchQuery = query;
-		},
-
-		/**
-		 * Move a note to a different folder.
-		 *
-		 * Pass `undefined` to move the note to unfiled (remove from folder).
-		 * The note remains selected if it was selected before the move.
-		 *
-		 * @example
-		 * ```typescript
-		 * // Move a note to a specific folder
-		 * notesState.moveNoteToFolder(noteId, folderId);
-		 *
-		 * // Move a note to unfiled
-		 * notesState.moveNoteToFolder(noteId, undefined);
-		 * ```
-		 */
-		moveNoteToFolder(noteId: NoteId, folderId: FolderId | undefined) {
-			workspaceClient.tables.notes.update(noteId, { folderId });
-		},
 	};
 }
 
diff --git a/apps/honeycrisp/src/lib/state/view.svelte.ts b/apps/honeycrisp/src/lib/state/view.svelte.ts
new file mode 100644
index 0000000000..4f045ec0f9
--- /dev/null
+++ b/apps/honeycrisp/src/lib/state/view.svelte.ts
@@ -0,0 +1,216 @@
+/**
+ * Reactive view state for Honeycrisp.
+ *
+ * Manages navigation, selection, search, sort, and view mode. Cross-cutting
+ * derivations (filteredNotes, folderName, selectedNote) live here because
+ * they combine data from multiple domains.
+ *
+ * Uses a factory function pattern to encapsulate `$state`. Observers are
+ * registered once during factory construction and never cleaned up (SPA
+ * lifetime).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { viewState } from '$lib/state';
+ * </script>
+ *
+ * {#each viewState.filteredNotes as note (note.id)}
+ *   <p>{note.title}</p>
+ * {/each}
+ * <p>Current folder: {viewState.folderName}</p>
+ * ```
+ */
+
+import workspaceClient, { type FolderId, type NoteId } from '$lib/workspace';
+import { foldersState } from './folders.svelte';
+import { notesState } from './notes.svelte';
+
+function createViewState() {
+	// ─── Reactive State ──────────────────────────────────────────────────
+
+	let selectedFolderId = $state<FolderId | null>(
+		workspaceClient.kv.get('selectedFolderId'),
+	);
+	let selectedNoteId = $state<NoteId | null>(
+		workspaceClient.kv.get('selectedNoteId'),
+	);
+	let sortBy = $state<'dateEdited' | 'dateCreated' | 'title'>(
+		workspaceClient.kv.get('sortBy'),
+	);
+	let searchQuery = $state('');
+	let isRecentlyDeletedView = $state(false);
+
+	// ─── Workspace Observers ─────────────────────────────────────────────
+
+	const _unobserveSelectedFolder = workspaceClient.kv.observe(
+		'selectedFolderId',
+		(change) => {
+			selectedFolderId = change.type === 'set' ? change.value : null;
+		},
+	);
+
+	const _unobserveSelectedNote = workspaceClient.kv.observe(
+		'selectedNoteId',
+		(change) => {
+			selectedNoteId = change.type === 'set' ? change.value : null;
+		},
+	);
+
+	const _unobserveSortBy = workspaceClient.kv.observe('sortBy', (change) => {
+		sortBy = change.type === 'set' ? change.value : 'dateEdited';
+	});
+
+	// ─── Derived State ───────────────────────────────────────────────────
+
+	/** Notes filtered by selected folder and search query. */
+	const filteredNotes = $derived.by(() => {
+		let result =
+			selectedFolderId === null
+				? notesState.notes
+				: notesState.notes.filter((n) => n.folderId === selectedFolderId);
+		if (searchQuery.trim()) {
+			const q = searchQuery.trim().toLowerCase();
+			result = result.filter(
+				(n) =>
+					n.title.toLowerCase().includes(q) ||
+					n.preview.toLowerCase().includes(q),
+			);
+		}
+		return [...result].sort((a, b) => {
+			if (sortBy === 'title') return a.title.localeCompare(b.title);
+			if (sortBy === 'dateCreated')
+				return b.createdAt.localeCompare(a.createdAt);
+			return b.updatedAt.localeCompare(a.updatedAt);
+		});
+	});
+
+	/** Human-readable name for the current view (sidebar + NoteList header). */
+	const folderName = $derived(
+		isRecentlyDeletedView
+			? 'Recently Deleted'
+			: selectedFolderId
+				? (foldersState.folders.find((f) => f.id === selectedFolderId)?.name ??
+					'Notes')
+				: 'All Notes',
+	);
+
+	/** The currently selected note (can be active or deleted). */
+	const selectedNote = $derived(
+		notesState.allNotes.find((n) => n.id === selectedNoteId) ?? null,
+	);
+
+	// ─── Public API ──────────────────────────────────────────────────────
+
+	return {
+		get selectedFolderId() {
+			return selectedFolderId;
+		},
+		get selectedNoteId() {
+			return selectedNoteId;
+		},
+		get selectedNote() {
+			return selectedNote;
+		},
+		get searchQuery() {
+			return searchQuery;
+		},
+		get sortBy() {
+			return sortBy;
+		},
+		get isRecentlyDeletedView() {
+			return isRecentlyDeletedView;
+		},
+		get folderName() {
+			return folderName;
+		},
+		get filteredNotes() {
+			return filteredNotes;
+		},
+
+		/**
+		 * Select a folder and clear the note selection.
+		 *
+		 * Switches the view to show notes in the selected folder. If `null` is
+		 * passed, shows all notes (unfiled + all folders). Also clears the
+		 * Recently Deleted view if it was active.
+		 *
+		 * @example
+		 * ```typescript
+		 * viewState.selectFolder(folderId);
+		 *
+		 * // Show all notes
+		 * viewState.selectFolder(null);
+		 * ```
+		 */
+		selectFolder(folderId: FolderId | null) {
+			isRecentlyDeletedView = false;
+			workspaceClient.kv.set('selectedFolderId', folderId);
+			workspaceClient.kv.set('selectedNoteId', null);
+		},
+
+		/**
+		 * Switch to the Recently Deleted view.
+		 *
+		 * Shows only soft-deleted notes. Clears the folder selection and note
+		 * selection.
+		 *
+		 * @example
+		 * ```typescript
+		 * viewState.selectRecentlyDeleted();
+		 * ```
+		 */
+		selectRecentlyDeleted() {
+			isRecentlyDeletedView = true;
+			workspaceClient.kv.set('selectedFolderId', null);
+			workspaceClient.kv.set('selectedNoteId', null);
+		},
+
+		/**
+		 * Select a note by ID to open it in the editor.
+		 *
+		 * @example
+		 * ```typescript
+		 * viewState.selectNote(noteId);
+		 * ```
+		 */
+		selectNote(noteId: NoteId) {
+			workspaceClient.kv.set('selectedNoteId', noteId);
+		},
+
+		/**
+		 * Change the note sort order.
+		 *
+		 * Sorts the note list by the specified criteria. The sort preference
+		 * is persisted to the workspace KV store.
+		 *
+		 * @example
+		 * ```typescript
+		 * viewState.setSortBy('title');
+		 * viewState.setSortBy('dateEdited');
+		 * ```
+		 */
+		setSortBy(value: 'dateEdited' | 'dateCreated' | 'title') {
+			workspaceClient.kv.set('sortBy', value);
+		},
+
+		/**
+		 * Update the search filter text.
+		 *
+		 * Filters the note list to show only notes whose title or preview
+		 * contains the search query (case-insensitive). Pass an empty string
+		 * to clear the search.
+		 *
+		 * @example
+		 * ```typescript
+		 * viewState.setSearchQuery('meeting');
+		 * viewState.setSearchQuery(''); // clear
+		 * ```
+		 */
+		setSearchQuery(query: string) {
+			searchQuery = query;
+		},
+	};
+}
+
+export const viewState = createViewState();
diff --git a/apps/honeycrisp/src/lib/utils/date.ts b/apps/honeycrisp/src/lib/utils/date.ts
index 957687c761..8bdcf3f487 100644
--- a/apps/honeycrisp/src/lib/utils/date.ts
+++ b/apps/honeycrisp/src/lib/utils/date.ts
@@ -16,3 +16,29 @@
 export function parseDateTime(dts: string): Date {
 	return new Date(dts.split('|')[0]!);
 }
+
+import { differenceInDays, format, isToday, isYesterday } from 'date-fns';
+
+/**
+ * Get a human-readable date group label for note list grouping.
+ *
+ * Returns labels like "Today", "Yesterday", "Previous 7 Days",
+ * "Previous 30 Days", or a month/year string for older dates.
+ *
+ * @example
+ * ```typescript
+ * import { getDateLabel } from '$lib/utils/date';
+ *
+ * const label = getDateLabel(note.updatedAt);
+ * // "Today" | "Yesterday" | "Previous 7 Days" | "March 2026"
+ * ```
+ */
+export function getDateLabel(dts: string): string {
+	const date = parseDateTime(dts);
+	if (isToday(date)) return 'Today';
+	if (isYesterday(date)) return 'Yesterday';
+	const daysAgo = differenceInDays(new Date(), date);
+	if (daysAgo <= 7) return 'Previous 7 Days';
+	if (daysAgo <= 30) return 'Previous 30 Days';
+	return format(date, 'MMMM yyyy');
+}
diff --git a/apps/honeycrisp/src/lib/workspace/client.ts b/apps/honeycrisp/src/lib/workspace/client.ts
new file mode 100644
index 0000000000..8a62c70635
--- /dev/null
+++ b/apps/honeycrisp/src/lib/workspace/client.ts
@@ -0,0 +1,16 @@
+/**
+ * Honeycrisp workspace client — single Y.Doc instance with IndexedDB persistence.
+ *
+ * Access tables via `workspaceClient.tables.folders` / `workspaceClient.tables.notes`
+ * and KV settings via `workspaceClient.kv`. The client is ready when
+ * `workspaceClient.whenReady` resolves.
+ */
+
+import { createWorkspace } from '@epicenter/workspace';
+import { indexeddbPersistence } from '@epicenter/workspace/extensions/sync/web';
+import { honeycrisp } from './schema';
+
+export default createWorkspace(honeycrisp).withExtension(
+	'persistence',
+	indexeddbPersistence,
+);
diff --git a/apps/honeycrisp/src/lib/workspace/index.ts b/apps/honeycrisp/src/lib/workspace/index.ts
new file mode 100644
index 0000000000..c2efef6976
--- /dev/null
+++ b/apps/honeycrisp/src/lib/workspace/index.ts
@@ -0,0 +1,8 @@
+export { default } from './client';
+export {
+	type Folder,
+	FolderId,
+	honeycrisp,
+	type Note,
+	NoteId,
+} from './schema';
diff --git a/apps/honeycrisp/src/lib/workspace.ts b/apps/honeycrisp/src/lib/workspace/schema.ts
similarity index 85%
rename from apps/honeycrisp/src/lib/workspace.ts
rename to apps/honeycrisp/src/lib/workspace/schema.ts
index 4222d6cc15..787478340f 100644
--- a/apps/honeycrisp/src/lib/workspace.ts
+++ b/apps/honeycrisp/src/lib/workspace/schema.ts
@@ -1,26 +1,22 @@
 /**
- * Workspace — schema and client for Honeycrisp notes.
+ * Workspace schema — branded IDs, table definitions, and workspace definition.
  *
  * Honeycrisp is an Apple Notes clone with three-column layout: sidebar folders,
  * note list, and rich-text editor. Folders organize notes; notes have Y.Text
  * bodies for collaborative editing via Tiptap + y-prosemirror.
  *
  * Contains branded NoteId/FolderId types, folders and notes table definitions
- * with DateTimeString timestamps, KV settings, and the workspace client with
- * IndexedDB persistence.
+ * with DateTimeString timestamps, KV settings, and the workspace definition.
  */
 
 import {
-	createWorkspace,
 	DateTimeString,
 	dateTimeStringNow,
 	defineKv,
 	defineTable,
 	defineWorkspace,
-	generateId,
 	type InferTableRow,
 } from '@epicenter/workspace';
-import { indexeddbPersistence } from '@epicenter/workspace/extensions/sync/web';
 import { type } from 'arktype';
 import type { Brand } from 'wellcrafted/brand';
 
@@ -123,19 +119,10 @@ export const honeycrisp = defineWorkspace({
 	kv: {
 		selectedFolderId: defineKv(FolderId.or(type('null')), null),
 		selectedNoteId: defineKv(NoteId.or(type('null')), null),
-		sortBy: defineKv(type("'dateEdited' | 'dateCreated' | 'title'"), 'dateEdited'),
+		sortBy: defineKv(
+			type("'dateEdited' | 'dateCreated' | 'title'"),
+			'dateEdited',
+		),
 		sidebarCollapsed: defineKv(type('boolean'), false),
 	},
 });
-
-/**
- * Honeycrisp workspace client — single Y.Doc instance with IndexedDB persistence.
- *
- * Access tables via `workspaceClient.tables.folders` / `workspaceClient.tables.notes`
- * and KV settings via `workspaceClient.kv`. The client is ready when
- * `workspaceClient.whenReady` resolves.
- */
-export default createWorkspace(honeycrisp).withExtension(
-	'persistence',
-	indexeddbPersistence,
-);
diff --git a/apps/honeycrisp/src/routes/+page.svelte b/apps/honeycrisp/src/routes/+page.svelte
index 53b3250793..cdf8f6b568 100644
--- a/apps/honeycrisp/src/routes/+page.svelte
+++ b/apps/honeycrisp/src/routes/+page.svelte
@@ -4,12 +4,12 @@
 	import type { DocumentHandle } from '@epicenter/workspace';
 	import type * as Y from 'yjs';
 	import CommandPalette from '$lib/components/CommandPalette.svelte';
-	import HoneycripEditor from '$lib/components/Editor.svelte';
 	import NoteList from '$lib/components/NoteList.svelte';
 	import HoneycripSidebar from '$lib/components/Sidebar.svelte';
-	import { notesState } from '$lib/state/notes.svelte';
+	import HoneycripEditor from '$lib/editor/Editor.svelte';
+	import { foldersState, notesState, viewState } from '$lib/state';
 	import workspaceClient from '$lib/workspace';
-	
+
 	let commandPaletteOpen = $state(false);
 
 	// ─── Document Handle ────────────────────────────────────────────────────
@@ -18,7 +18,7 @@
 	let currentDocHandle = $state<DocumentHandle | null>(null);
 
 	$effect(() => {
-		const noteId = notesState.selectedNoteId;
+		const noteId = viewState.selectedNoteId;
 		if (!noteId) {
 			currentYXmlFragment = null;
 			currentDocHandle = null;
@@ -56,7 +56,7 @@
 
 		if (e.key === 'n' && e.shiftKey) {
 			e.preventDefault();
-			notesState.createFolder();
+			foldersState.createFolder();
 		} else if (e.key === 'n') {
 			e.preventDefault();
 			notesState.createNote();
@@ -76,14 +76,14 @@
 			</Resizable.Pane>
 			<Resizable.Handle />
 			<Resizable.Pane defaultSize={65} minSize={30} class="flex flex-col">
-				{#if notesState.selectedNote && currentYXmlFragment}
-					{#key notesState.selectedNoteId}
+				{#if viewState.selectedNote && currentYXmlFragment}
+					{#key viewState.selectedNoteId}
 						<HoneycripEditor
 							yxmlfragment={currentYXmlFragment}
 							onContentChange={(change) => notesState.updateNoteContent(change)}
 						/>
 					{/key}
-				{:else if notesState.selectedNote}
+				{:else if viewState.selectedNote}
 					<div class="flex h-full items-center justify-center">
 						<p class="text-muted-foreground">Loading editor…</p>
 					</div>
diff --git a/specs/20260318T123322-honeycrisp-refactor.md b/specs/20260318T123322-honeycrisp-refactor.md
new file mode 100644
index 0000000000..4157806499
--- /dev/null
+++ b/specs/20260318T123322-honeycrisp-refactor.md
@@ -0,0 +1,67 @@
+# Honeycrisp: Factory Consolidation & File Reorganization
+
+## Goal
+
+Split the 538-line god factory (`createNotesState`) into 3 focused factories, extract editor utilities, and reorganize files for clarity.
+
+## Changes
+
+### 1. workspace/ split
+- `workspace.ts` → `workspace/schema.ts` (types, tables, defineWorkspace) + `workspace/client.ts` (createWorkspace + extension) + `workspace/index.ts` (re-exports)
+- No import changes needed—`$lib/workspace` resolves to `workspace/index.ts`
+
+### 2. state/ split (the big one)
+- `state/notes.svelte.ts` (538 lines) → 3 factories:
+  - `state/folders.svelte.ts` — folder CRUD + reactive folder list (~70 lines)
+  - `state/notes.svelte.ts` — note CRUD + derived note collections (~140 lines)
+  - `state/view.svelte.ts` — selection, search, sort, view mode + cross-cutting derivations (~120 lines)
+  - `state/index.ts` — re-exports all 3
+- Dependency chain: `foldersState` → `notesState` → `viewState` (clean DAG, no cycles)
+- Cross-cutting: `deleteFolder` reads workspace directly instead of $state cache; notes observer picks up changes
+
+### 3. editor/ extraction
+- Extract `createYjsExtension()` → `editor/extensions.ts`
+- Extract `extractTitleAndPreview()` → `editor/utils.ts`
+- Move `components/Editor.svelte` → `editor/Editor.svelte`
+
+### 4. Date util consolidation
+- Move `getDateLabel()` from NoteList.svelte → `utils/date.ts`
+
+### 5. Component import updates
+All 5 consumers update from `notesState.*` to `foldersState.*` / `viewState.*` / `notesState.*` as appropriate.
+
+## Todo
+
+- [x] Create workspace/schema.ts, workspace/client.ts, workspace/index.ts; delete workspace.ts
+- [x] Create state/folders.svelte.ts
+- [x] Create state/notes.svelte.ts (slimmed)
+- [x] Create state/view.svelte.ts
+- [x] Create state/index.ts; delete old state/notes.svelte.ts
+- [x] Create editor/extensions.ts, editor/utils.ts
+- [x] Move and update Editor.svelte → editor/Editor.svelte
+- [x] Update utils/date.ts with getDateLabel
+- [x] Update Sidebar.svelte imports
+- [x] Update NoteCard.svelte imports
+- [x] Update NoteList.svelte imports
+- [x] Update CommandPalette.svelte imports
+- [x] Update +page.svelte imports
+- [x] Verify with diagnostics/typecheck
+
+## Review
+
+## Summary
+
+**Before:** 10 source files, 1,700 lines. One 538-line god factory (`createNotesState`) handling folders, notes, and navigation in a single closure.
+
+**After:** 20 source files, ~1,800 lines (slight increase from JSDoc). Three focused state factories (116/253/217 lines), workspace split into schema/client, editor utilities extracted, date utils consolidated.
+
+### Key architectural decisions:
+- **No cycles in state DAG:** `foldersState` → `notesState` → `viewState`. View state depends on both folders and notes for cross-cutting derivations (`filteredNotes`, `folderName`, `selectedNote`).
+- **Direct workspace reads over $state cache:** `deleteFolder` reads `workspaceClient.kv.get('selectedFolderId')` and `workspaceClient.tables.notes.getAllValid()` directly instead of depending on $state variables from other factories. The observers in the affected factory pick up the changes.
+- **`$lib/workspace` import path preserved:** The workspace/index.ts barrel re-exports everything with the same names, so zero import changes were needed for the workspace split.
+- **Editor as a domain directory:** Editor.svelte moved from components/ to editor/ alongside its extracted utilities (extensions.ts, utils.ts), co-locating related code.
+
+### Files changed:
+- Created: `workspace/schema.ts`, `workspace/client.ts`, `workspace/index.ts`, `state/folders.svelte.ts`, `state/view.svelte.ts`, `state/index.ts`, `editor/extensions.ts`, `editor/utils.ts`, `editor/Editor.svelte`
+- Modified: `state/notes.svelte.ts` (slimmed from 538→253 lines), `utils/date.ts` (+getDateLabel), `Sidebar.svelte`, `NoteCard.svelte`, `NoteList.svelte`, `CommandPalette.svelte`, `+page.svelte`
+- Deleted: `workspace.ts`, `components/Editor.svelte`

From 0608d900f147f3fa8af62d071cd87a3df563295d Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Wed, 18 Mar 2026 14:14:32 -0700
Subject: [PATCH 02/26] =?UTF-8?q?refactor(honeycrisp):=20fix=20code=20smel?=
 =?UTF-8?q?ls=20=E2=80=94=20prop-driven=20NoteList,=20self-describing=20No?=
 =?UTF-8?q?teCard,=20data-driven=20Editor=20toolbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

NoteList now takes notes/title/showControls props instead of branching on
view mode internally. NoteCard derives isDeleted from note.deletedAt and
accepts isSelected/onSelect props, dropping the viewState import entirely.
Editor toolbar uses snippets for the 12 repeated button patterns, cutting
150 lines of copy-paste to 20 lines of snippet calls. Sort dropdown is
data-driven via array + {#each}. Svelte skill updated with three new
patterns: prop-first derivation, view-mode branching limit, data-driven
repetitive markup.
---
 .agents/skills/svelte/SKILL.md                | 147 +++++++++++++
 .../src/lib/components/NoteCard.svelte        |  21 +-
 .../src/lib/components/NoteList.svelte        |  81 ++++---
 apps/honeycrisp/src/lib/editor/Editor.svelte  | 198 +++++++-----------
 apps/honeycrisp/src/routes/+page.svelte       |  14 +-
 .../20260318T141054-honeycrisp-code-smells.md |  44 ++++
 6 files changed, 328 insertions(+), 177 deletions(-)
 create mode 100644 specs/20260318T141054-honeycrisp-code-smells.md

diff --git a/.agents/skills/svelte/SKILL.md b/.agents/skills/svelte/SKILL.md
index ef644601e4..020bd29b3b 100644
--- a/.agents/skills/svelte/SKILL.md
+++ b/.agents/skills/svelte/SKILL.md
@@ -385,3 +385,150 @@ When building interactive components (especially with dialogs/modals), create se
 - When you find yourself passing callbacks just to update parent state
 
 The key insight: It's perfectly fine to instantiate multiple dialogs (one per row) rather than managing a single shared dialog with complex state. Modern frameworks handle this efficiently, and the code clarity is worth it.
+
+# Prop-First Data Derivation
+
+When a component receives a prop that already carries the information needed for a decision, derive from the prop. Never reach into global state for data the component already has.
+
+```svelte
+<!-- BAD: Reading global state for info the prop already carries -->
+<script lang="ts">
+	import { viewState } from '$lib/state';
+	let { note }: { note: Note } = $props();
+
+	// viewState.isRecentlyDeletedView is redundant — note.deletedAt has the answer
+	const showRestoreActions = $derived(viewState.isRecentlyDeletedView);
+</script>
+
+<!-- GOOD: Derive from the prop itself -->
+<script lang="ts">
+	let { note }: { note: Note } = $props();
+
+	// The note knows its own state — no global state needed
+	const isDeleted = $derived(note.deletedAt !== undefined);
+</script>
+```
+
+### Why This Matters
+
+- **Self-describing**: The component works correctly regardless of which view rendered it.
+- **Fewer imports**: Dropping a global state import reduces coupling.
+- **Testable**: Pass a note with `deletedAt` set and the component behaves correctly — no need to mock view state.
+
+### The Rule
+
+If the data needed for a decision is already on a prop (directly or derivable), **always** derive from the prop. Global state is for information the component genuinely doesn't have.
+
+# View-Mode Branching Limit
+
+If a component checks the same boolean flag (like `isRecentlyDeletedView`, `isEditing`, `isCompact`) in **3 or more template locations**, the component is likely serving two purposes and should be considered for extraction.
+
+```svelte
+<!-- SMELL: Same flag checked 3+ times -->
+<script lang="ts">
+	const notes = $derived(
+		isRecentlyDeletedView ? deletedNotes : filteredNotes,  // branch 1
+	);
+</script>
+
+{#if !isRecentlyDeletedView}  <!-- branch 2 -->
+	<div>sort controls...</div>
+{/if}
+
+{#if isRecentlyDeletedView}  <!-- branch 3 -->
+	No deleted notes
+{:else}
+	No notes yet
+{/if}
+```
+
+### The Fix: Push Branching Up to the Parent
+
+Move the view-mode decision to the parent. The child component takes the varying data as props:
+
+```svelte
+<!-- Parent: one branch point, explicit data flow -->
+{#if viewState.isRecentlyDeletedView}
+	<NoteList
+		notes={notesState.deletedNotes}
+		title="Recently Deleted"
+		showControls={false}
+		emptyMessage="No deleted notes"
+	/>
+{:else}
+	<NoteList
+		notes={viewState.filteredNotes}
+		title={viewState.folderName}
+	/>
+{/if}
+```
+
+The child becomes dumb — it renders what it's told, with zero awareness of view modes. This keeps the branching in **one place** instead of scattered across the component tree.
+
+### The Threshold
+
+- **1–2 checks**: Acceptable — simple conditional rendering.
+- **3+ checks on the same flag**: The component is likely two views in one. Consider pushing the varying data up as props.
+
+# Data-Driven Repetitive Markup
+
+When **3 or more sequential sibling elements** follow an identical pattern with only data varying, consider extracting the data into an array and using `{#each}` or a `{#snippet}`.
+
+```svelte
+<!-- BAD: Copy-paste ×3 with only value/label changing -->
+<DropdownMenu.Item onclick={() => setSortBy('dateEdited')}>
+	{#if sortBy === 'dateEdited'}<CheckIcon class="mr-2 size-4" />{/if}
+	Date Edited
+</DropdownMenu.Item>
+<DropdownMenu.Item onclick={() => setSortBy('dateCreated')}>
+	{#if sortBy === 'dateCreated'}<CheckIcon class="mr-2 size-4" />{/if}
+	Date Created
+</DropdownMenu.Item>
+<DropdownMenu.Item onclick={() => setSortBy('title')}>
+	{#if sortBy === 'title'}<CheckIcon class="mr-2 size-4" />{/if}
+	Title
+</DropdownMenu.Item>
+
+<!-- GOOD: Data-driven with {#each} -->
+<script lang="ts">
+	const sortOptions = [
+		{ value: 'dateEdited' as const, label: 'Date Edited' },
+		{ value: 'dateCreated' as const, label: 'Date Created' },
+		{ value: 'title' as const, label: 'Title' },
+	];
+</script>
+
+{#each sortOptions as option}
+	<DropdownMenu.Item onclick={() => setSortBy(option.value)}>
+		{#if sortBy === option.value}
+			<CheckIcon class="mr-2 size-4" />
+		{:else}
+			<span class="mr-2 size-4"></span>
+		{/if}
+		{option.label}
+	</DropdownMenu.Item>
+{/each}
+```
+
+For more complex repeated patterns (e.g., toolbar buttons with tooltips), use `{#snippet}` to define the shared structure once:
+
+```svelte
+{#snippet toggleButton(pressed: boolean, onToggle: () => void, icon: typeof BoldIcon, label: string)}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Toggle size="sm" {pressed} onPressedChange={onToggle}>
+				<svelte:component this={icon} class="size-4" />
+			</Toggle>
+		</Tooltip.Trigger>
+		<Tooltip.Content>{label}</Tooltip.Content>
+	</Tooltip.Root>
+{/snippet}
+
+{@render toggleButton(activeFormats.bold, () => editor?.chain().focus().toggleBold().run(), BoldIcon, 'Bold (⌘B)')}
+{@render toggleButton(activeFormats.italic, () => editor?.chain().focus().toggleItalic().run(), ItalicIcon, 'Italic (⌘I)')}
+```
+
+### When NOT to Extract
+
+- **2 or fewer** repetitions — extraction adds indirection without meaningful savings.
+- **Structurally similar but semantically different** — if the elements serve different purposes and might diverge, keep them separate.
diff --git a/apps/honeycrisp/src/lib/components/NoteCard.svelte b/apps/honeycrisp/src/lib/components/NoteCard.svelte
index 6e3d6fc609..23e6f2740c 100644
--- a/apps/honeycrisp/src/lib/components/NoteCard.svelte
+++ b/apps/honeycrisp/src/lib/components/NoteCard.svelte
@@ -8,13 +8,22 @@
 	import PinIcon from '@lucide/svelte/icons/pin';
 	import TrashIcon from '@lucide/svelte/icons/trash-2';
 	import { format } from 'date-fns';
-	import { foldersState, notesState, viewState } from '$lib/state';
+	import { foldersState, notesState } from '$lib/state';
 	import { parseDateTime } from '$lib/utils/date';
 	import type { Note } from '$lib/workspace';
 
-	let { note }: { note: Note } = $props();
+	let {
+		note,
+		isSelected,
+		onSelect,
+	}: {
+		note: Note;
+		isSelected: boolean;
+		onSelect: () => void;
+	} = $props();
 
-	const isSelected = $derived(note.id === viewState.selectedNoteId);
+	/** Derive deleted status from the note itself — no need to check view mode. */
+	const isDeleted = $derived(note.deletedAt !== undefined);
 
 	let confirmingPermanentDelete = $state(false);
 </script>
@@ -27,7 +36,7 @@
 			class="group relative flex cursor-pointer flex-col gap-0.5 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-accent/30 {isSelected
 				? 'bg-accent'
 				: ''}"
-			onclick={() => viewState.selectNote(note.id)}
+			onclick={onSelect}
 		>
 			<div class="flex items-start justify-between gap-2">
 				<span class="font-medium line-clamp-1">
@@ -44,7 +53,7 @@
 				{note.preview || 'No content'}
 			</p>
 
-			{#if viewState.isRecentlyDeletedView}
+			{#if isDeleted}
 				<div
 					class="absolute bottom-1 right-2 hidden items-center gap-0.5 group-hover:flex {isSelected
 						? 'flex'
@@ -107,7 +116,7 @@
 	</ContextMenu.Trigger>
 
 	<ContextMenu.Content class="w-48">
-		{#if viewState.isRecentlyDeletedView}
+		{#if isDeleted}
 			<ContextMenu.Item onclick={() => notesState.restoreNote(note.id)}>
 				<ArchiveRestoreIcon class="mr-2 size-4" />
 				Restore
diff --git a/apps/honeycrisp/src/lib/components/NoteList.svelte b/apps/honeycrisp/src/lib/components/NoteList.svelte
index a622f66d79..06a643015f 100644
--- a/apps/honeycrisp/src/lib/components/NoteList.svelte
+++ b/apps/honeycrisp/src/lib/components/NoteList.svelte
@@ -10,12 +10,23 @@
 	import { getDateLabel } from '$lib/utils/date';
 	import type { Note } from '$lib/workspace';
 
-	/** Notes to display — filtered active notes or deleted notes depending on view. */
-	const notes = $derived(
-		viewState.isRecentlyDeletedView
-			? notesState.deletedNotes
-			: viewState.filteredNotes,
-	);
+	let {
+		notes,
+		title,
+		showControls = true,
+		emptyMessage = 'No notes yet. Click + to create one.',
+	}: {
+		notes: Note[];
+		title: string;
+		showControls?: boolean;
+		emptyMessage?: string;
+	} = $props();
+
+	const sortOptions = [
+		{ value: 'dateEdited' as const, label: 'Date Edited' },
+		{ value: 'dateCreated' as const, label: 'Date Created' },
+		{ value: 'title' as const, label: 'Title' },
+	];
 
 	const groupedNotes = $derived.by(() => {
 		const pinned = notes
@@ -85,10 +96,10 @@
 <div class="flex h-full flex-col" onkeydown={handleKeydown} tabindex="-1">
 	<div class="flex items-center justify-between border-b px-4 py-3">
 		<div class="flex items-center gap-2">
-			<h2 class="text-sm font-semibold">{viewState.folderName}</h2>
+			<h2 class="text-sm font-semibold">{title}</h2>
 			<span class="text-xs text-muted-foreground">{notes.length}</span>
 		</div>
-		{#if !viewState.isRecentlyDeletedView}
+		{#if showControls}
 			<div class="flex items-center gap-1">
 				<DropdownMenu.Root>
 					<DropdownMenu.Trigger>
@@ -99,34 +110,18 @@
 						{/snippet}
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content align="end" class="w-44">
-						<DropdownMenu.Item
-							onclick={() => viewState.setSortBy('dateEdited')}
-						>
-							{#if viewState.sortBy === 'dateEdited'}
-								<CheckIcon class="mr-2 size-4" />
-							{:else}
-								<span class="mr-2 size-4"></span>
-							{/if}
-							Date Edited
-						</DropdownMenu.Item>
-						<DropdownMenu.Item
-							onclick={() => viewState.setSortBy('dateCreated')}
-						>
-							{#if viewState.sortBy === 'dateCreated'}
-								<CheckIcon class="mr-2 size-4" />
-							{:else}
-								<span class="mr-2 size-4"></span>
-							{/if}
-							Date Created
-						</DropdownMenu.Item>
-						<DropdownMenu.Item onclick={() => viewState.setSortBy('title')}>
-							{#if viewState.sortBy === 'title'}
-								<CheckIcon class="mr-2 size-4" />
-							{:else}
-								<span class="mr-2 size-4"></span>
-							{/if}
-							Title
-						</DropdownMenu.Item>
+						{#each sortOptions as option}
+							<DropdownMenu.Item
+								onclick={() => viewState.setSortBy(option.value)}
+							>
+								{#if viewState.sortBy === option.value}
+									<CheckIcon class="mr-2 size-4" />
+								{:else}
+									<span class="mr-2 size-4"></span>
+								{/if}
+								{option.label}
+							</DropdownMenu.Item>
+						{/each}
 					</DropdownMenu.Content>
 				</DropdownMenu.Root>
 				<Button
@@ -146,13 +141,7 @@
 			<div
 				class="flex h-full items-center justify-center p-8 text-center text-muted-foreground"
 			>
-				<p class="text-sm">
-					{#if viewState.isRecentlyDeletedView}
-						No deleted notes
-					{:else}
-						No notes yet. Click + to create one.
-					{/if}
-				</p>
+				<p class="text-sm">{emptyMessage}</p>
 			</div>
 		{:else}
 			<div class="flex flex-col gap-4 p-2">
@@ -162,7 +151,11 @@
 							{group.label}
 						</h3>
 						{#each group.entries as note (note.id)}
-							<NoteCard {note} />
+							<NoteCard
+								{note}
+								isSelected={note.id === viewState.selectedNoteId}
+								onSelect={() => viewState.selectNote(note.id)}
+							/>
 						{/each}
 					</div>
 				{/each}
diff --git a/apps/honeycrisp/src/lib/editor/Editor.svelte b/apps/honeycrisp/src/lib/editor/Editor.svelte
index 297706a1e1..d92f54726c 100644
--- a/apps/honeycrisp/src/lib/editor/Editor.svelte
+++ b/apps/honeycrisp/src/lib/editor/Editor.svelte
@@ -52,6 +52,41 @@
 		blockquote: false,
 	});
 
+	const activeHeading = $derived(
+		activeFormats.heading1
+			? 'h1'
+			: activeFormats.heading2
+				? 'h2'
+				: activeFormats.heading3
+					? 'h3'
+					: '',
+	);
+
+	const activeListType = $derived(
+		activeFormats.bulletList
+			? 'bullet'
+			: activeFormats.orderedList
+				? 'ordered'
+				: activeFormats.taskList
+					? 'task'
+					: '',
+	);
+
+	function toggleHeading(value: string) {
+		const levels: Record<string, number> = { h1: 1, h2: 2, h3: 3 };
+		const level = levels[value];
+		if (level) editor?.chain().focus().toggleHeading({ level }).run();
+	}
+
+	function toggleListType(value: string) {
+		const commands: Record<string, () => void> = {
+			bullet: () => editor?.chain().focus().toggleBulletList().run(),
+			ordered: () => editor?.chain().focus().toggleOrderedList().run(),
+			task: () => editor?.chain().focus().toggleTaskList().run(),
+		};
+		commands[value]?.();
+	}
+
 	$effect(() => {
 		if (!element) return;
 
@@ -113,94 +148,47 @@
 	});
 </script>
 
+{#snippet toggleButton(pressed: boolean, onToggle: () => void, icon: typeof BoldIcon, label: string)}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Toggle size="sm" {pressed} onPressedChange={onToggle}>
+				<svelte:component this={icon} class="size-4" />
+			</Toggle>
+		</Tooltip.Trigger>
+		<Tooltip.Content>{label}</Tooltip.Content>
+	</Tooltip.Root>
+{/snippet}
+
+{#snippet groupItem(value: string, icon: typeof BoldIcon, label: string)}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<ToggleGroup.Item {value}>
+				<svelte:component this={icon} class="size-4" />
+			</ToggleGroup.Item>
+		</Tooltip.Trigger>
+		<Tooltip.Content>{label}</Tooltip.Content>
+	</Tooltip.Root>
+{/snippet}
+
 <div class="flex h-full flex-col">
 	{#if editor}
 		<div class="flex items-center gap-1 border-b p-2">
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					<Toggle
-						size="sm"
-						pressed={activeFormats.bold}
-						onPressedChange={() => editor?.chain().focus().toggleBold().run()}
-					>
-						<BoldIcon class="size-4" />
-					</Toggle>
-				</Tooltip.Trigger>
-				<Tooltip.Content>Bold (⌘B)</Tooltip.Content>
-			</Tooltip.Root>
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					<Toggle
-						size="sm"
-						pressed={activeFormats.italic}
-						onPressedChange={() => editor?.chain().focus().toggleItalic().run()}
-					>
-						<ItalicIcon class="size-4" />
-					</Toggle>
-				</Tooltip.Trigger>
-				<Tooltip.Content>Italic (⌘I)</Tooltip.Content>
-			</Tooltip.Root>
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					<Toggle
-						size="sm"
-						pressed={activeFormats.underline}
-						onPressedChange={() => editor?.chain().focus().toggleUnderline().run()}
-					>
-						<UnderlineIcon class="size-4" />
-					</Toggle>
-				</Tooltip.Trigger>
-				<Tooltip.Content>Underline (⌘U)</Tooltip.Content>
-			</Tooltip.Root>
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					<Toggle
-						size="sm"
-						pressed={activeFormats.strike}
-						onPressedChange={() => editor?.chain().focus().toggleStrike().run()}
-					>
-						<StrikethroughIcon class="size-4" />
-					</Toggle>
-				</Tooltip.Trigger>
-				<Tooltip.Content>Strikethrough (⌘⇧S)</Tooltip.Content>
-			</Tooltip.Root>
+			{@render toggleButton(activeFormats.bold, () => editor?.chain().focus().toggleBold().run(), BoldIcon, 'Bold (⌘B)')}
+			{@render toggleButton(activeFormats.italic, () => editor?.chain().focus().toggleItalic().run(), ItalicIcon, 'Italic (⌘I)')}
+			{@render toggleButton(activeFormats.underline, () => editor?.chain().focus().toggleUnderline().run(), UnderlineIcon, 'Underline (⌘U)')}
+			{@render toggleButton(activeFormats.strike, () => editor?.chain().focus().toggleStrike().run(), StrikethroughIcon, 'Strikethrough (⌘⇧S)')}
 
 			<Separator orientation="vertical" class="mx-1 h-6" />
 
 			<ToggleGroup.Root
 				type="single"
 				size="sm"
-				value={activeFormats.heading1 ? 'h1' : activeFormats.heading2 ? 'h2' : activeFormats.heading3 ? 'h3' : ''}
-				onValueChange={(v) => {
-					if (v === 'h1') editor?.chain().focus().toggleHeading({ level: 1 }).run();
-					else if (v === 'h2') editor?.chain().focus().toggleHeading({ level: 2 }).run();
-					else if (v === 'h3') editor?.chain().focus().toggleHeading({ level: 3 }).run();
-				}}
+				value={activeHeading}
+				onValueChange={toggleHeading}
 			>
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<ToggleGroup.Item value="h1"
-							><Heading1Icon class="size-4" /></ToggleGroup.Item
-						>
-					</Tooltip.Trigger>
-					<Tooltip.Content>Heading 1</Tooltip.Content>
-				</Tooltip.Root>
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<ToggleGroup.Item value="h2"
-							><Heading2Icon class="size-4" /></ToggleGroup.Item
-						>
-					</Tooltip.Trigger>
-					<Tooltip.Content>Heading 2</Tooltip.Content>
-				</Tooltip.Root>
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<ToggleGroup.Item value="h3"
-							><Heading3Icon class="size-4" /></ToggleGroup.Item
-						>
-					</Tooltip.Trigger>
-					<Tooltip.Content>Heading 3</Tooltip.Content>
-				</Tooltip.Root>
+				{@render groupItem('h1', Heading1Icon, 'Heading 1')}
+				{@render groupItem('h2', Heading2Icon, 'Heading 2')}
+				{@render groupItem('h3', Heading3Icon, 'Heading 3')}
 			</ToggleGroup.Root>
 
 			<Separator orientation="vertical" class="mx-1 h-6" />
@@ -208,59 +196,17 @@
 			<ToggleGroup.Root
 				type="single"
 				size="sm"
-				value={activeFormats.bulletList
-					? 'bullet'
-					: activeFormats.orderedList
-						? 'ordered'
-						: activeFormats.taskList
-							? 'task'
-							: ''}
-				onValueChange={(v) => {
-					if (v === 'bullet') editor?.chain().focus().toggleBulletList().run();
-					else if (v === 'ordered') editor?.chain().focus().toggleOrderedList().run();
-					else if (v === 'task') editor?.chain().focus().toggleTaskList().run();
-				}}
+				value={activeListType}
+				onValueChange={toggleListType}
 			>
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<ToggleGroup.Item value="bullet"
-							><ListIcon class="size-4" /></ToggleGroup.Item
-						>
-					</Tooltip.Trigger>
-					<Tooltip.Content>Bullet List</Tooltip.Content>
-				</Tooltip.Root>
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<ToggleGroup.Item value="ordered"
-							><ListOrderedIcon class="size-4" /></ToggleGroup.Item
-						>
-					</Tooltip.Trigger>
-					<Tooltip.Content>Ordered List</Tooltip.Content>
-				</Tooltip.Root>
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<ToggleGroup.Item value="task"
-							><ListChecksIcon class="size-4" /></ToggleGroup.Item
-						>
-					</Tooltip.Trigger>
-					<Tooltip.Content>Checklist</Tooltip.Content>
-				</Tooltip.Root>
+				{@render groupItem('bullet', ListIcon, 'Bullet List')}
+				{@render groupItem('ordered', ListOrderedIcon, 'Ordered List')}
+				{@render groupItem('task', ListChecksIcon, 'Checklist')}
 			</ToggleGroup.Root>
 
 			<Separator orientation="vertical" class="mx-1 h-6" />
 
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					<Toggle
-						size="sm"
-						pressed={activeFormats.blockquote}
-						onPressedChange={() => editor?.chain().focus().toggleBlockquote().run()}
-					>
-						<QuoteIcon class="size-4" />
-					</Toggle>
-				</Tooltip.Trigger>
-				<Tooltip.Content>Blockquote (⌘⇧B)</Tooltip.Content>
-			</Tooltip.Root>
+			{@render toggleButton(activeFormats.blockquote, () => editor?.chain().focus().toggleBlockquote().run(), QuoteIcon, 'Blockquote (⌘⇧B)')}
 		</div>
 	{/if}
 	<div bind:this={element} class="flex-1 overflow-y-auto p-8"></div>
diff --git a/apps/honeycrisp/src/routes/+page.svelte b/apps/honeycrisp/src/routes/+page.svelte
index cdf8f6b568..90139d9aad 100644
--- a/apps/honeycrisp/src/routes/+page.svelte
+++ b/apps/honeycrisp/src/routes/+page.svelte
@@ -72,7 +72,19 @@
 	<main class="flex h-screen flex-1 overflow-hidden">
 		<Resizable.PaneGroup direction="horizontal">
 			<Resizable.Pane defaultSize={35} minSize={20}>
-				<NoteList />
+				{#if viewState.isRecentlyDeletedView}
+					<NoteList
+						notes={notesState.deletedNotes}
+						title="Recently Deleted"
+						showControls={false}
+						emptyMessage="No deleted notes"
+					/>
+				{:else}
+					<NoteList
+						notes={viewState.filteredNotes}
+						title={viewState.folderName}
+					/>
+				{/if}
 			</Resizable.Pane>
 			<Resizable.Handle />
 			<Resizable.Pane defaultSize={65} minSize={30} class="flex flex-col">
diff --git a/specs/20260318T141054-honeycrisp-code-smells.md b/specs/20260318T141054-honeycrisp-code-smells.md
new file mode 100644
index 0000000000..4d40980d79
--- /dev/null
+++ b/specs/20260318T141054-honeycrisp-code-smells.md
@@ -0,0 +1,44 @@
+# Honeycrisp: Code Smell Fixes
+
+## Goal
+
+Fix 7 code smells: dual-personality components, over-coupled card, repetitive toolbar, nested ternaries, copy-paste sort dropdown. Update Svelte skill to prevent recurrence.
+
+## Changes
+
+### 1. NoteList — props instead of dual-source $derived
+- Accept `notes: Note[]`, `title: string`, `showControls?: boolean`, `emptyMessage?: string`
+- Parent (+page.svelte) does the view-mode branching, passes appropriate data
+- Data-driven sort dropdown (array + {#each})
+- Pass `isSelected` and `onSelect` to NoteCard
+
+### 2. NoteCard — derive from note, drop viewState
+- Derive `isDeleted` from `note.deletedAt !== undefined` instead of viewState
+- Accept `isSelected: boolean` and `onSelect: () => void` props
+- Remove viewState import entirely
+
+### 3. +page.svelte — explicit view-mode branching
+- `{#if viewState.isRecentlyDeletedView}` wraps NoteList with different props
+
+### 4. Editor — snippets for toolbar, extract ternaries
+- `toggleButton` snippet for inline format buttons
+- `groupItem` snippet for ToggleGroup items
+- Extract `activeHeading` and `activeListType` to $derived variables
+
+### 5. Svelte skill — add 3 new patterns
+- Prop-first data derivation
+- View-mode branching limit
+- Data-driven repetitive markup
+
+## Todo
+
+- [ ] NoteList: props + data-driven sort + pass isSelected/onSelect to NoteCard
+- [ ] NoteCard: derive isDeleted from note, accept isSelected/onSelect props, drop viewState
+- [ ] +page.svelte: view-mode branching for NoteList props
+- [ ] Editor: snippets + extract ternaries
+- [ ] Svelte skill: add 3 new pattern sections
+- [ ] Verify diagnostics
+
+## Review
+
+_To be filled after completion._

From 2377cc23a6be3fe08a62928ba126a317ccce65e2 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Wed, 18 Mar 2026 14:27:24 -0700
Subject: [PATCH 03/26] refactor(honeycrisp): extract self-contained
 FolderMenuItem, remove dead folderName branch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extract FolderMenuItem.svelte from Sidebar per the self-contained component
pattern — each folder row now owns its own rename editing state and delete
confirmation dialog instead of sharing a single dialog managed by the parent.
Sidebar drops from 212 to 93 lines. Also remove the dead isRecentlyDeletedView
branch from viewState.folderName since the parent now passes the title directly.
---
 .../src/lib/components/FolderMenuItem.svelte  | 117 +++++++++++++++++
 .../src/lib/components/Sidebar.svelte         | 124 +-----------------
 apps/honeycrisp/src/lib/state/view.svelte.ts  |  10 +-
 3 files changed, 123 insertions(+), 128 deletions(-)
 create mode 100644 apps/honeycrisp/src/lib/components/FolderMenuItem.svelte

diff --git a/apps/honeycrisp/src/lib/components/FolderMenuItem.svelte b/apps/honeycrisp/src/lib/components/FolderMenuItem.svelte
new file mode 100644
index 0000000000..a7fcb65ab6
--- /dev/null
+++ b/apps/honeycrisp/src/lib/components/FolderMenuItem.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import * as AlertDialog from '@epicenter/ui/alert-dialog';
+	import * as DropdownMenu from '@epicenter/ui/dropdown-menu';
+	import * as Sidebar from '@epicenter/ui/sidebar';
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import FolderIcon from '@lucide/svelte/icons/folder';
+	import PencilIcon from '@lucide/svelte/icons/pencil';
+	import TrashIcon from '@lucide/svelte/icons/trash-2';
+	import { foldersState, notesState, viewState } from '$lib/state';
+	import type { Folder } from '$lib/workspace';
+
+	let { folder }: { folder: Folder } = $props();
+
+	// ─── Rename State ────────────────────────────────────────────────────
+
+	let isEditing = $state(false);
+	let editingName = $state('');
+
+	function startRename() {
+		isEditing = true;
+		editingName = folder.name;
+	}
+
+	function commitRename() {
+		if (editingName.trim()) {
+			foldersState.renameFolder(folder.id, editingName.trim());
+		}
+		isEditing = false;
+		editingName = '';
+	}
+
+	function cancelRename() {
+		isEditing = false;
+		editingName = '';
+	}
+
+	// ─── Delete Confirmation ─────────────────────────────────────────────
+
+	let confirmingDelete = $state(false);
+</script>
+
+<Sidebar.MenuItem>
+	{#if isEditing}
+		<div class="flex items-center gap-2 px-2 py-1">
+			<!-- svelte-ignore a11y_autofocus -->
+			<input
+				class="flex-1 rounded border bg-background px-1 py-0.5 text-sm outline-none focus:ring-1 focus:ring-ring"
+				bind:value={editingName}
+				onkeydown={(e) => {
+					if (e.key === 'Enter') commitRename();
+					if (e.key === 'Escape') cancelRename();
+				}}
+				onblur={commitRename}
+				autofocus
+			>
+		</div>
+	{:else}
+		<Sidebar.MenuButton
+			isActive={viewState.selectedFolderId === folder.id}
+			onclick={() => viewState.selectFolder(folder.id)}
+		>
+			{#if folder.icon}
+				<span class="text-base leading-none">{folder.icon}</span>
+			{:else}
+				<FolderIcon class="size-4" />
+			{/if}
+			<span>{folder.name}</span>
+			<span class="ml-auto text-xs text-muted-foreground">
+				{notesState.noteCounts[folder.id] ?? 0}
+			</span>
+		</Sidebar.MenuButton>
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Sidebar.MenuAction showOnHover {...props}>
+						<EllipsisIcon class="size-4" />
+						<span class="sr-only">Folder actions</span>
+					</Sidebar.MenuAction>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content align="start" side="right" class="w-40">
+				<DropdownMenu.Item onclick={startRename}>
+					<PencilIcon class="mr-2 size-4" />
+					Rename
+				</DropdownMenu.Item>
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item
+					class="text-destructive focus:text-destructive"
+					onclick={() => (confirmingDelete = true)}
+				>
+					<TrashIcon class="mr-2 size-4" />
+					Delete
+				</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	{/if}
+</Sidebar.MenuItem>
+
+<AlertDialog.Root bind:open={confirmingDelete}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Delete Folder?</AlertDialog.Title>
+			<AlertDialog.Description>
+				Notes in this folder will be moved to All Notes.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+				onclick={() => foldersState.deleteFolder(folder.id)}
+			>
+				Delete
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/apps/honeycrisp/src/lib/components/Sidebar.svelte b/apps/honeycrisp/src/lib/components/Sidebar.svelte
index 4c8790a930..2c41ba3a09 100644
--- a/apps/honeycrisp/src/lib/components/Sidebar.svelte
+++ b/apps/honeycrisp/src/lib/components/Sidebar.svelte
@@ -1,45 +1,11 @@
 <script lang="ts">
-	import * as AlertDialog from '@epicenter/ui/alert-dialog';
 	import * as Collapsible from '@epicenter/ui/collapsible';
-	import * as DropdownMenu from '@epicenter/ui/dropdown-menu';
 	import * as Sidebar from '@epicenter/ui/sidebar';
-	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
 	import FileTextIcon from '@lucide/svelte/icons/file-text';
-	import FolderIcon from '@lucide/svelte/icons/folder';
-	import PencilIcon from '@lucide/svelte/icons/pencil';
 	import PlusIcon from '@lucide/svelte/icons/plus';
 	import TrashIcon from '@lucide/svelte/icons/trash-2';
+	import FolderMenuItem from '$lib/components/FolderMenuItem.svelte';
 	import { foldersState, notesState, viewState } from '$lib/state';
-	import type { Folder, FolderId } from '$lib/workspace';
-
-	let editingFolderId = $state<FolderId | null>(null);
-	let editingName = $state('');
-	let deletingFolderId = $state<FolderId | null>(null);
-
-	function startRename(folder: Folder) {
-		editingFolderId = folder.id;
-		editingName = folder.name;
-	}
-
-	function commitRename() {
-		if (editingFolderId && editingName.trim()) {
-			foldersState.renameFolder(editingFolderId, editingName.trim());
-		}
-		editingFolderId = null;
-		editingName = '';
-	}
-
-	function cancelRename() {
-		editingFolderId = null;
-		editingName = '';
-	}
-
-	function confirmDelete() {
-		if (deletingFolderId) {
-			foldersState.deleteFolder(deletingFolderId);
-		}
-		deletingFolderId = null;
-	}
 </script>
 
 <Sidebar.Root>
@@ -107,68 +73,7 @@
 					<Sidebar.GroupContent>
 						<Sidebar.Menu>
 							{#each foldersState.folders as folder (folder.id)}
-								<Sidebar.MenuItem>
-									{#if editingFolderId === folder.id}
-										<div class="flex items-center gap-2 px-2 py-1">
-											<!-- svelte-ignore a11y_autofocus -->
-											<input
-												class="flex-1 rounded border bg-background px-1 py-0.5 text-sm outline-none focus:ring-1 focus:ring-ring"
-												bind:value={editingName}
-												onkeydown={(e) => {
-													if (e.key === 'Enter') commitRename();
-													if (e.key === 'Escape') cancelRename();
-												}}
-												onblur={commitRename}
-												autofocus
-											>
-										</div>
-									{:else}
-										<Sidebar.MenuButton
-											isActive={viewState.selectedFolderId === folder.id}
-											onclick={() => viewState.selectFolder(folder.id)}
-										>
-											{#if folder.icon}
-												<span class="text-base leading-none"
-													>{folder.icon}</span
-												>
-											{:else}
-												<FolderIcon class="size-4" />
-											{/if}
-											<span>{folder.name}</span>
-											<span class="ml-auto text-xs text-muted-foreground">
-												{notesState.noteCounts[folder.id] ?? 0}
-											</span>
-										</Sidebar.MenuButton>
-										<DropdownMenu.Root>
-											<DropdownMenu.Trigger>
-												{#snippet child({ props })}
-													<Sidebar.MenuAction showOnHover {...props}>
-														<EllipsisIcon class="size-4" />
-														<span class="sr-only">Folder actions</span>
-													</Sidebar.MenuAction>
-												{/snippet}
-											</DropdownMenu.Trigger>
-											<DropdownMenu.Content
-												align="start"
-												side="right"
-												class="w-40"
-											>
-												<DropdownMenu.Item onclick={() => startRename(folder)}>
-													<PencilIcon class="mr-2 size-4" />
-													Rename
-												</DropdownMenu.Item>
-												<DropdownMenu.Separator />
-												<DropdownMenu.Item
-													class="text-destructive focus:text-destructive"
-													onclick={() => (deletingFolderId = folder.id)}
-												>
-													<TrashIcon class="mr-2 size-4" />
-													Delete
-												</DropdownMenu.Item>
-											</DropdownMenu.Content>
-										</DropdownMenu.Root>
-									{/if}
-								</Sidebar.MenuItem>
+								<FolderMenuItem {folder} />
 							{:else}
 								<Sidebar.MenuItem>
 									<span class="text-muted-foreground px-2 py-1 text-xs">
@@ -185,28 +90,3 @@
 
 	<Sidebar.Rail />
 </Sidebar.Root>
-
-<AlertDialog.Root
-	open={!!deletingFolderId}
-	onOpenChange={(open) => { if (!open) deletingFolderId = null; }}
->
-	<AlertDialog.Content>
-		<AlertDialog.Header>
-			<AlertDialog.Title>Delete Folder?</AlertDialog.Title>
-			<AlertDialog.Description>
-				Notes in this folder will be moved to All Notes.
-			</AlertDialog.Description>
-		</AlertDialog.Header>
-		<AlertDialog.Footer>
-			<AlertDialog.Cancel onclick={() => (deletingFolderId = null)}
-				>Cancel</AlertDialog.Cancel
-			>
-			<AlertDialog.Action
-				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-				onclick={confirmDelete}
-			>
-				Delete
-			</AlertDialog.Action>
-		</AlertDialog.Footer>
-	</AlertDialog.Content>
-</AlertDialog.Root>
diff --git a/apps/honeycrisp/src/lib/state/view.svelte.ts b/apps/honeycrisp/src/lib/state/view.svelte.ts
index 4f045ec0f9..e60c6c3dfe 100644
--- a/apps/honeycrisp/src/lib/state/view.svelte.ts
+++ b/apps/honeycrisp/src/lib/state/view.svelte.ts
@@ -85,14 +85,12 @@ function createViewState() {
 		});
 	});
 
-	/** Human-readable name for the current view (sidebar + NoteList header). */
+	/** Human-readable name for the current folder (used as NoteList title). */
 	const folderName = $derived(
-		isRecentlyDeletedView
-			? 'Recently Deleted'
-			: selectedFolderId
-				? (foldersState.folders.find((f) => f.id === selectedFolderId)?.name ??
+		selectedFolderId
+			? (foldersState.folders.find((f) => f.id === selectedFolderId)?.name ??
 					'Notes')
-				: 'All Notes',
+			: 'All Notes',
 	);
 
 	/** The currently selected note (can be active or deleted). */

From 0d2175d405c7167db6f6eb0703fd12708b315029 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Wed, 18 Mar 2026 14:33:03 -0700
Subject: [PATCH 04/26] refactor(honeycrisp): inline single-use functions,
 update skill with inlining rule

Inline 7 single-use functions across 4 components: startRename/cancelRename
in FolderMenuItem, toggleHeading/toggleListType in Editor, handleKeydown in
NoteList and +page. commitRename stays extracted (used 2x: keydown + blur).
Update Svelte skill to replace the narrow 'no handle* functions' rule with
a broader single-use inlining rule: inline by default, keep extracted only
with JSDoc + semantic name. Multi-use functions always stay extracted.
---
 .agents/skills/svelte/SKILL.md                | 59 +++++++++++++++++--
 .../src/lib/components/FolderMenuItem.svelte  | 24 ++++----
 .../src/lib/components/NoteList.svelte        | 14 +++--
 apps/honeycrisp/src/lib/editor/Editor.svelte  | 30 ++++------
 apps/honeycrisp/src/routes/+page.svelte       | 12 ++--
 5 files changed, 91 insertions(+), 48 deletions(-)

diff --git a/.agents/skills/svelte/SKILL.md b/.agents/skills/svelte/SKILL.md
index 020bd29b3b..b42788b907 100644
--- a/.agents/skills/svelte/SKILL.md
+++ b/.agents/skills/svelte/SKILL.md
@@ -163,12 +163,16 @@ Only use `.execute()` in Svelte files when:
 2. You're performing a one-off operation
 3. You need fine-grained control over async flow
 
-## No `handle*` Functions - Always Inline
+## Single-Use Functions: Inline or Document
 
-Never create functions prefixed with `handle` in the script tag. If the function is used only once and the logic isn't deeply nested, inline it directly in the template:
+If a function is defined in the script tag and used only once in the template, inline it at the call site. This applies to event handlers, callbacks, and any other single-use logic.
+
+### Why Inline?
+
+Single-use extracted functions add indirection — the reader jumps between the function definition and the template to understand what happens on click/keydown/etc. Inlining keeps cause and effect together at the point where the action happens.
 
 ```svelte
-<!-- BAD: Unnecessary wrapper function -->
+<!-- BAD: Extracted single-use function with no JSDoc or semantic value -->
 <script>
 	function handleShare() {
 		share.mutate({ id });
@@ -182,12 +186,57 @@ Never create functions prefixed with `handle` in the script tag. If the function
 <Button onclick={handleShare}>Share</Button>
 <Item onclick={() => handleSelectItem(item.id)} />
 
-<!-- GOOD: Inline the logic directly -->
+<!-- GOOD: Inlined at the call site -->
 <Button onclick={() => share.mutate({ id })}>Share</Button>
 <Item onclick={() => goto(`/items/${item.id}`)} />
 ```
 
-This keeps related logic co-located with the UI element that triggers it, making the code easier to follow.
+This also applies to longer handlers. If the logic is linear (guard clauses + branches, not deeply nested), inline it even if it's 10–15 lines:
+
+```svelte
+<!-- GOOD: Inlined keyboard shortcut handler -->
+<svelte:window onkeydown={(e) => {
+	const meta = e.metaKey || e.ctrlKey;
+	if (!meta) return;
+	if (e.key === 'k') {
+		e.preventDefault();
+		commandPaletteOpen = !commandPaletteOpen;
+		return;
+	}
+	if (e.key === 'n') {
+		e.preventDefault();
+		notesState.createNote();
+	}
+}} />
+```
+
+### The Exception: JSDoc + Semantic Name
+
+Keep a single-use function extracted **only** when both conditions are met:
+
+1. It has **JSDoc** explaining why it exists as a named unit.
+2. The name provides a **clear semantic meaning** that makes the template more readable than the inlined version would be.
+
+```svelte
+<script lang="ts">
+	/**
+	 * Navigate the note list with arrow keys, wrapping at boundaries.
+	 * Operates on the flattened display-order ID list to respect date grouping.
+	 */
+	function navigateWithArrowKeys(e: KeyboardEvent) {
+		// 15 lines of keyboard navigation logic...
+	}
+</script>
+
+<!-- The semantic name communicates intent better than inlined logic would -->
+<div onkeydown={navigateWithArrowKeys} tabindex="-1">
+```
+
+Without JSDoc and a meaningful name, extract it anyway — the indirection isn't earning its keep.
+
+### Multi-Use Functions
+
+Functions used **2 or more times** should always stay extracted — this rule only applies to single-use functions.
 
 # Styling
 
diff --git a/apps/honeycrisp/src/lib/components/FolderMenuItem.svelte b/apps/honeycrisp/src/lib/components/FolderMenuItem.svelte
index a7fcb65ab6..0a7dd80076 100644
--- a/apps/honeycrisp/src/lib/components/FolderMenuItem.svelte
+++ b/apps/honeycrisp/src/lib/components/FolderMenuItem.svelte
@@ -16,11 +16,6 @@
 	let isEditing = $state(false);
 	let editingName = $state('');
 
-	function startRename() {
-		isEditing = true;
-		editingName = folder.name;
-	}
-
 	function commitRename() {
 		if (editingName.trim()) {
 			foldersState.renameFolder(folder.id, editingName.trim());
@@ -29,11 +24,6 @@
 		editingName = '';
 	}
 
-	function cancelRename() {
-		isEditing = false;
-		editingName = '';
-	}
-
 	// ─── Delete Confirmation ─────────────────────────────────────────────
 
 	let confirmingDelete = $state(false);
@@ -47,8 +37,11 @@
 				class="flex-1 rounded border bg-background px-1 py-0.5 text-sm outline-none focus:ring-1 focus:ring-ring"
 				bind:value={editingName}
 				onkeydown={(e) => {
-					if (e.key === 'Enter') commitRename();
-					if (e.key === 'Escape') cancelRename();
+				if (e.key === 'Enter') commitRename();
+				if (e.key === 'Escape') {
+					isEditing = false;
+					editingName = '';
+				}
 				}}
 				onblur={commitRename}
 				autofocus
@@ -79,7 +72,12 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content align="start" side="right" class="w-40">
-				<DropdownMenu.Item onclick={startRename}>
+			<DropdownMenu.Item
+				onclick={() => {
+					isEditing = true;
+					editingName = folder.name;
+				}}
+			>
 					<PencilIcon class="mr-2 size-4" />
 					Rename
 				</DropdownMenu.Item>
diff --git a/apps/honeycrisp/src/lib/components/NoteList.svelte b/apps/honeycrisp/src/lib/components/NoteList.svelte
index 06a643015f..070e0c7c19 100644
--- a/apps/honeycrisp/src/lib/components/NoteList.svelte
+++ b/apps/honeycrisp/src/lib/components/NoteList.svelte
@@ -70,8 +70,12 @@
 	const flatNoteIds = $derived(
 		groupedNotes.flatMap((g) => g.entries.map((n) => n.id)),
 	);
+</script>
 
-	function handleKeydown(e: KeyboardEvent) {
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="flex h-full flex-col"
+	onkeydown={(e) => {
 		if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
 		if (flatNoteIds.length === 0) return;
 		e.preventDefault();
@@ -89,11 +93,9 @@
 				currentIndex > 0 ? currentIndex - 1 : flatNoteIds.length - 1;
 			viewState.selectNote(flatNoteIds[prevIndex]!);
 		}
-	}
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="flex h-full flex-col" onkeydown={handleKeydown} tabindex="-1">
+	}}
+	tabindex="-1"
+>
 	<div class="flex items-center justify-between border-b px-4 py-3">
 		<div class="flex items-center gap-2">
 			<h2 class="text-sm font-semibold">{title}</h2>
diff --git a/apps/honeycrisp/src/lib/editor/Editor.svelte b/apps/honeycrisp/src/lib/editor/Editor.svelte
index d92f54726c..11c19575ae 100644
--- a/apps/honeycrisp/src/lib/editor/Editor.svelte
+++ b/apps/honeycrisp/src/lib/editor/Editor.svelte
@@ -72,21 +72,6 @@
 					: '',
 	);
 
-	function toggleHeading(value: string) {
-		const levels: Record<string, number> = { h1: 1, h2: 2, h3: 3 };
-		const level = levels[value];
-		if (level) editor?.chain().focus().toggleHeading({ level }).run();
-	}
-
-	function toggleListType(value: string) {
-		const commands: Record<string, () => void> = {
-			bullet: () => editor?.chain().focus().toggleBulletList().run(),
-			ordered: () => editor?.chain().focus().toggleOrderedList().run(),
-			task: () => editor?.chain().focus().toggleTaskList().run(),
-		};
-		commands[value]?.();
-	}
-
 	$effect(() => {
 		if (!element) return;
 
@@ -184,7 +169,11 @@
 				type="single"
 				size="sm"
 				value={activeHeading}
-				onValueChange={toggleHeading}
+				onValueChange={(value) => {
+					const levels: Record<string, number> = { h1: 1, h2: 2, h3: 3 };
+					const level = levels[value];
+					if (level) editor?.chain().focus().toggleHeading({ level }).run();
+				}}
 			>
 				{@render groupItem('h1', Heading1Icon, 'Heading 1')}
 				{@render groupItem('h2', Heading2Icon, 'Heading 2')}
@@ -197,7 +186,14 @@
 				type="single"
 				size="sm"
 				value={activeListType}
-				onValueChange={toggleListType}
+				onValueChange={(value) => {
+					const commands: Record<string, () => void> = {
+						bullet: () => editor?.chain().focus().toggleBulletList().run(),
+						ordered: () => editor?.chain().focus().toggleOrderedList().run(),
+						task: () => editor?.chain().focus().toggleTaskList().run(),
+					};
+					commands[value]?.();
+				}}
 			>
 				{@render groupItem('bullet', ListIcon, 'Bullet List')}
 				{@render groupItem('ordered', ListOrderedIcon, 'Ordered List')}
diff --git a/apps/honeycrisp/src/routes/+page.svelte b/apps/honeycrisp/src/routes/+page.svelte
index 90139d9aad..e716001b0d 100644
--- a/apps/honeycrisp/src/routes/+page.svelte
+++ b/apps/honeycrisp/src/routes/+page.svelte
@@ -41,10 +41,10 @@
 			currentDocHandle = null;
 		};
 	});
+</script>
 
-	// ─── Keyboard Shortcuts ──────────────────────────────────────────────────
-
-	function handleKeydown(e: KeyboardEvent) {
+<svelte:window
+	onkeydown={(e) => {
 		const meta = e.metaKey || e.ctrlKey;
 		if (!meta) return;
 
@@ -61,10 +61,8 @@
 			e.preventDefault();
 			notesState.createNote();
 		}
-	}
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
+	}}
+/>
 
 <SidebarProvider>
 	<HoneycripSidebar />

From 6d7cfd70a71a2ee3e920487f9d1f218d239348aa Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 00:32:43 -0700
Subject: [PATCH 05/26] refactor: inline 17 single-use handle* functions across
 5 apps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Grep for 'function handle' found 20 handle* functions in .svelte files
across the monorepo. 17 were single-use wrappers adding unnecessary
indirection — inlined at the call site. FileTree.handleKeydown renamed
to navigateFileTree with JSDoc (75-line keyboard nav switch, legitimate
exception). Two skipped: TransformationPickerBody (imperative onMount
listener) and UpdateDialog (30-line download flow).

Apps touched: opensidian (6 files), tab-manager (2), fuji (2),
landing (1). Also adds docs/articles/grep-for-handle-functions.md
explaining the grep command and the smell pattern.
---
 apps/fuji/src/lib/components/TagInput.svelte  | 27 +++++-----
 apps/fuji/src/routes/+page.svelte             | 46 +++++++++-------
 .../src/components/WaitlistForm.svelte        | 45 ++++++++--------
 .../src/lib/components/CommandPalette.svelte  | 16 +-----
 .../src/lib/components/CreateDialog.svelte    | 25 +--------
 .../lib/components/DeleteConfirmation.svelte  |  7 +--
 .../src/lib/components/FileTree.svelte        |  7 ++-
 .../src/lib/components/RenameDialog.svelte    | 16 +-----
 .../src/lib/components/TabBar.svelte          | 28 ++--------
 .../src/entrypoints/sidepanel/App.svelte      | 37 +++++++------
 .../lib/components/chat/ToolCallPart.svelte   | 21 ++------
 docs/articles/grep-for-handle-functions.md    | 53 +++++++++++++++++++
 12 files changed, 151 insertions(+), 177 deletions(-)
 create mode 100644 docs/articles/grep-for-handle-functions.md

diff --git a/apps/fuji/src/lib/components/TagInput.svelte b/apps/fuji/src/lib/components/TagInput.svelte
index a1046dcece..5f45348ae2 100644
--- a/apps/fuji/src/lib/components/TagInput.svelte
+++ b/apps/fuji/src/lib/components/TagInput.svelte
@@ -16,19 +16,6 @@
 
 	let inputValue = $state('');
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' && inputValue.trim()) {
-			e.preventDefault();
-			const value = inputValue.trim().toLowerCase();
-			if (!values.includes(value)) {
-				onAdd(value);
-			}
-			inputValue = '';
-		}
-		if (e.key === 'Backspace' && !inputValue && values.length > 0) {
-			onRemove(values[values.length - 1]!);
-		}
-	}
 </script>
 
 <div
@@ -51,6 +38,18 @@
 		class="flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
 		placeholder={values.length === 0 ? placeholder : ''}
 		bind:value={inputValue}
-		onkeydown={handleKeydown}
+		onkeydown={(e) => {
+		if (e.key === 'Enter' && inputValue.trim()) {
+			e.preventDefault();
+			const value = inputValue.trim().toLowerCase();
+			if (!values.includes(value)) {
+				onAdd(value);
+			}
+			inputValue = '';
+		}
+		if (e.key === 'Backspace' && !inputValue && values.length > 0) {
+			onRemove(values[values.length - 1]!);
+		}
+	}}
 	>
 </div>
diff --git a/apps/fuji/src/routes/+page.svelte b/apps/fuji/src/routes/+page.svelte
index 602d8a9c6b..64d9ffcccf 100644
--- a/apps/fuji/src/routes/+page.svelte
+++ b/apps/fuji/src/routes/+page.svelte
@@ -81,7 +81,7 @@
 
 	// ─── Actions ─────────────────────────────────────────────────────────────────
 
-	function createEntry() {
+function createEntry() {
 		const id = generateId() as unknown as EntryId;
 		workspaceClient.tables.entries.set({
 			id,
@@ -101,23 +101,6 @@
 
 	// ─── Keyboard Shortcuts ───────────────────────────────────────────────────────
 
-	function handleKeydown(event: KeyboardEvent) {
-		const isInputFocused =
-			event.target instanceof HTMLInputElement ||
-			event.target instanceof HTMLTextAreaElement ||
-			(event.target instanceof HTMLElement && event.target.isContentEditable);
-
-		if (event.key === 'n' && event.metaKey) {
-			event.preventDefault();
-			createEntry();
-			return;
-		}
-
-		if (event.key === 'Escape' && !isInputFocused && selectedEntryId) {
-			event.preventDefault();
-			workspaceClient.kv.set('selectedEntryId', null);
-		}
-	}
 
 	// ─── Document Handle (Y.Text) ────────────────────────────────────────────────
 
@@ -147,7 +130,32 @@
 	});
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
+<svelte:window onkeydown={(event) => {
+	const isInputFocused =
+		event.target instanceof HTMLInputElement ||
+		event.target instanceof HTMLTextAreaElement ||
+		(event.target instanceof HTMLElement && event.target.isContentEditable);
+
+	if (event.key === 'n' && event.metaKey) {
+		event.preventDefault();
+		const id = generateId() as unknown as EntryId;
+		workspaceClient.tables.entries.set({
+			id,
+			title: '',
+			preview: '',
+			createdAt: dateTimeStringNow(),
+			updatedAt: dateTimeStringNow(),
+			_v: 2,
+		});
+		workspaceClient.kv.set('selectedEntryId', id);
+		return;
+	}
+
+	if (event.key === 'Escape' && !isInputFocused && selectedEntryId) {
+		event.preventDefault();
+		workspaceClient.kv.set('selectedEntryId', null);
+	}
+}} />
 
 <SidebarProvider>
 	<FujiSidebar
diff --git a/apps/landing/src/components/WaitlistForm.svelte b/apps/landing/src/components/WaitlistForm.svelte
index 0205783099..f84188c009 100644
--- a/apps/landing/src/components/WaitlistForm.svelte
+++ b/apps/landing/src/components/WaitlistForm.svelte
@@ -26,28 +26,6 @@
 	let isSubmitting = $state(false);
 	let submitted = $state(false);
 
-	async function handleSubmit(e: Event) {
-		e.preventDefault();
-		isSubmitting = true;
-
-		try {
-			const formData = new FormData();
-			formData.append('email', email);
-			interests.forEach((interest) => formData.append('interests', interest));
-			if (otherInterest) {
-				formData.append('otherInterest', otherInterest);
-			}
-
-			// TODO: Implement form submission
-			// Simulating submission for now
-			await new Promise((resolve) => setTimeout(resolve, 1000));
-			submitted = true;
-		} catch (error) {
-			console.error('Error submitting form:', error);
-		} finally {
-			isSubmitting = false;
-		}
-	}
 
 	function toggleInterest(
 		optionId: string,
@@ -71,7 +49,28 @@
 		</p>
 	</div>
 {:else}
-	<form onsubmit={handleSubmit} class={cn('space-y-6', className)}>
+	<form onsubmit={async (e) => {
+		e.preventDefault();
+		isSubmitting = true;
+
+		try {
+			const formData = new FormData();
+			formData.append('email', email);
+			interests.forEach((interest) => formData.append('interests', interest));
+			if (otherInterest) {
+				formData.append('otherInterest', otherInterest);
+			}
+
+			// TODO: Implement form submission
+			// Simulating submission for now
+			await new Promise((resolve) => setTimeout(resolve, 1000));
+			submitted = true;
+		} catch (error) {
+			console.error('Error submitting form:', error);
+		} finally {
+			isSubmitting = false;
+		}
+	}} class={cn('space-y-6', className)}
 		<div>
 			<Label for="email">Email</Label>
 			<Input
diff --git a/apps/opensidian/src/lib/components/CommandPalette.svelte b/apps/opensidian/src/lib/components/CommandPalette.svelte
index 8f9454e3df..4276e0d7a1 100644
--- a/apps/opensidian/src/lib/components/CommandPalette.svelte
+++ b/apps/opensidian/src/lib/components/CommandPalette.svelte
@@ -77,21 +77,9 @@
 		return [...startsWith, ...includes].slice(0, 50);
 	});
 
-	// ── Handlers ─────────────────────────────────────────────────────
-	function handleSelect(id: FileId) {
-		fsState.actions.selectFile(id);
-		open = false;
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-			e.preventDefault();
-			open = !open;
-		}
-	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
+<svelte:window onkeydown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); open = !open; } }} />
 
 <Command.Dialog
 	bind:open
@@ -104,7 +92,7 @@
 		<Command.Empty>No files found.</Command.Empty>
 		<Command.Group heading="Files">
 			{#each filteredFiles as file (file.id)}
-				<Command.Item value={file.id} onSelect={() => handleSelect(file.id)}>
+				<Command.Item value={file.id} onSelect={() => { fsState.actions.selectFile(file.id); open = false; }}>
 					{@const Icon = getFileIcon(file.name)}
 					<Icon class="h-4 w-4 shrink-0 text-muted-foreground" />
 					<span>{file.name}</span>
diff --git a/apps/opensidian/src/lib/components/CreateDialog.svelte b/apps/opensidian/src/lib/components/CreateDialog.svelte
index d0f3550cf6..c0d8da8c36 100644
--- a/apps/opensidian/src/lib/components/CreateDialog.svelte
+++ b/apps/opensidian/src/lib/components/CreateDialog.svelte
@@ -15,30 +15,9 @@
 
 	const title = $derived(mode === 'file' ? 'New File' : 'New Folder');
 
-	async function handleSubmit(e: Event) {
-		e.preventDefault();
-		if (!name.trim()) return;
-
-		const parentId =
-			fsState.selectedNode?.type === 'folder' ? fsState.activeFileId : null;
-
-		if (mode === 'file') {
-			await fsState.actions.createFile(parentId, name.trim());
-		} else {
-			await fsState.actions.createFolder(parentId, name.trim());
-		}
-
-		name = '';
-		open = false;
-	}
-
-	function handleOpenChange(isOpen: boolean) {
-		open = isOpen;
-		if (!isOpen) name = '';
-	}
 </script>
 
-<Dialog.Root {open} onOpenChange={handleOpenChange}>
+<Dialog.Root {open} onOpenChange={(isOpen) => { open = isOpen; if (!isOpen) name = ''; }}>
 	<Dialog.Content class="sm:max-w-md">
 		<Dialog.Header>
 			<Dialog.Title>{title}</Dialog.Title>
@@ -46,7 +25,7 @@
 				Enter a name for the new {mode}.
 			</Dialog.Description>
 		</Dialog.Header>
-		<form onsubmit={handleSubmit}>
+		<form onsubmit={async (e) => { e.preventDefault(); if (!name.trim()) return; const parentId = fsState.selectedNode?.type === 'folder' ? fsState.activeFileId : null; if (mode === 'file') { await fsState.actions.createFile(parentId, name.trim()); } else { await fsState.actions.createFolder(parentId, name.trim()); } name = ''; open = false; }}>
 			<Field>
 				<FieldLabel>Name</FieldLabel>
 				<Input
diff --git a/apps/opensidian/src/lib/components/DeleteConfirmation.svelte b/apps/opensidian/src/lib/components/DeleteConfirmation.svelte
index 16177e3211..0b26acc591 100644
--- a/apps/opensidian/src/lib/components/DeleteConfirmation.svelte
+++ b/apps/opensidian/src/lib/components/DeleteConfirmation.svelte
@@ -12,11 +12,6 @@
 	const nodeName = $derived(fsState.selectedNode?.name ?? 'this item');
 	const nodeType = $derived(fsState.selectedNode?.type ?? 'file');
 
-	async function handleDelete() {
-		if (!fsState.activeFileId) return;
-		await fsState.actions.deleteFile(fsState.activeFileId);
-		open = false;
-	}
 </script>
 
 <AlertDialog.Root bind:open>
@@ -34,7 +29,7 @@
 		</AlertDialog.Header>
 		<AlertDialog.Footer>
 			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-			<Button variant="destructive" onclick={handleDelete}>Delete</Button>
+			<Button variant="destructive" onclick={async () => { if (!fsState.activeFileId) return; await fsState.actions.deleteFile(fsState.activeFileId); open = false; }}>Delete</Button>
 		</AlertDialog.Footer>
 	</AlertDialog.Content>
 </AlertDialog.Root>
diff --git a/apps/opensidian/src/lib/components/FileTree.svelte b/apps/opensidian/src/lib/components/FileTree.svelte
index 3dad3f37e5..9482e35c09 100644
--- a/apps/opensidian/src/lib/components/FileTree.svelte
+++ b/apps/opensidian/src/lib/components/FileTree.svelte
@@ -26,7 +26,10 @@
 		return ids;
 	});
 
-	function handleKeydown(e: KeyboardEvent) {
+	/**
+	 * Navigate the file tree with keyboard shortcuts. Handles arrow keys for movement, Enter/Space for selection, and Home/End for jumping to boundaries. Operates on the visible (expansion-aware) ID list.
+	 */
+	function navigateFileTree(e: KeyboardEvent) {
 		const current = fsState.focusedId;
 		const currentIndex = current ? visibleIds.indexOf(current) : -1;
 
@@ -115,7 +118,7 @@
 	</Empty.Root>
 {:else}
 	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-	<TreeView.Root tabindex={0} onkeydown={handleKeydown}>
+	<TreeView.Root tabindex={0} onkeydown={navigateFileTree}>
 		{#each fsState.rootChildIds as childId (childId)}
 			<FileTreeItem id={childId} />
 		{/each}
diff --git a/apps/opensidian/src/lib/components/RenameDialog.svelte b/apps/opensidian/src/lib/components/RenameDialog.svelte
index 81325b8842..cec26fe745 100644
--- a/apps/opensidian/src/lib/components/RenameDialog.svelte
+++ b/apps/opensidian/src/lib/components/RenameDialog.svelte
@@ -19,27 +19,15 @@
 		}
 	});
 
-	async function handleSubmit(e: Event) {
-		e.preventDefault();
-		if (!name.trim() || !fsState.activeFileId) return;
-
-		await fsState.actions.rename(fsState.activeFileId, name.trim());
-		open = false;
-	}
-
-	function handleOpenChange(isOpen: boolean) {
-		open = isOpen;
-		if (!isOpen) name = '';
-	}
 </script>
 
-<Dialog.Root {open} onOpenChange={handleOpenChange}>
+<Dialog.Root {open} onOpenChange={(isOpen) => { open = isOpen; if (!isOpen) name = ''; }}>
 	<Dialog.Content class="sm:max-w-md">
 		<Dialog.Header>
 			<Dialog.Title>Rename</Dialog.Title>
 			<Dialog.Description>Enter a new name.</Dialog.Description>
 		</Dialog.Header>
-		<form onsubmit={handleSubmit}>
+		<form onsubmit={async (e) => { e.preventDefault(); if (!name.trim() || !fsState.activeFileId) return; await fsState.actions.rename(fsState.activeFileId, name.trim()); open = false; }}>
 			<Field>
 				<FieldLabel>Name</FieldLabel>
 				<Input
diff --git a/apps/opensidian/src/lib/components/TabBar.svelte b/apps/opensidian/src/lib/components/TabBar.svelte
index 6a438ed2ee..b9cb43d3cf 100644
--- a/apps/opensidian/src/lib/components/TabBar.svelte
+++ b/apps/opensidian/src/lib/components/TabBar.svelte
@@ -6,34 +6,12 @@
 
 	const hasOpenFiles = $derived(fsState.openFileIds.length > 0);
 
-	function handleValueChange(value: string) {
-		fsState.actions.selectFile(value as FileId);
-	}
-
-	/**
-	 * Close a tab, stopping propagation so the tab doesn't also get selected.
-	 */
-	function handleClose(e: MouseEvent, id: FileId) {
-		e.stopPropagation();
-		e.preventDefault();
-		fsState.actions.closeFile(id);
-	}
-
-	/**
-	 * Middle-click to close a tab.
-	 */
-	function handleAuxClick(e: MouseEvent, id: FileId) {
-		if (e.button === 1) {
-			e.preventDefault();
-			fsState.actions.closeFile(id);
-		}
-	}
 </script>
 
 {#if hasOpenFiles}
 	<Tabs.Root
 		value={fsState.activeFileId ?? ''}
-		onValueChange={handleValueChange}
+		onValueChange={(value) => fsState.actions.selectFile(value as FileId)}
 		class="w-full"
 	>
 		<Tabs.List
@@ -45,13 +23,13 @@
 					<Tabs.Trigger
 						value={fileId}
 						class="relative flex-none rounded-none border-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=active]:shadow-none"
-						onauxclick={(e) => handleAuxClick(e, fileId)}
+					onauxclick={(e) => { if (e.button === 1) { e.preventDefault(); fsState.actions.closeFile(fileId); } }}
 					>
 						<span class="mr-4">{row.name}</span>
 						<button
 							type="button"
 							class="absolute right-1 top-1/2 -translate-y-1/2 rounded-sm p-0.5 opacity-50 hover:opacity-100 hover:bg-accent"
-							onclick={(e) => handleClose(e, fileId)}
+					onclick={(e) => { e.stopPropagation(); e.preventDefault(); fsState.actions.closeFile(fileId); }}
 							aria-label="Close {row.name}"
 						>
 							<X class="h-3 w-3" />
diff --git a/apps/tab-manager/src/entrypoints/sidepanel/App.svelte b/apps/tab-manager/src/entrypoints/sidepanel/App.svelte
index 1e8f13bf38..d0d773f045 100644
--- a/apps/tab-manager/src/entrypoints/sidepanel/App.svelte
+++ b/apps/tab-manager/src/entrypoints/sidepanel/App.svelte
@@ -39,26 +39,9 @@
 		};
 	});
 
-	let searchInputRef = $state<HTMLInputElement | null>(null);
+let searchInputRef = $state<HTMLInputElement | null>(null);
 	let commandPaletteOpen = $state(false);
 	let aiDrawerOpen = $state(false);
-	function handleSearchKeydown(e: KeyboardEvent) {
-		// "/" in empty input opens command palette
-		if (e.key === '/' && unifiedViewState.searchQuery === '') {
-			e.preventDefault();
-			commandPaletteOpen = true;
-		}
-		// "@" in empty input opens AI drawer (Phase 4)
-		if (e.key === '@' && unifiedViewState.searchQuery === '') {
-			e.preventDefault();
-			aiDrawerOpen = true;
-		}
-		// Escape clears search
-		if (e.key === 'Escape') {
-			unifiedViewState.searchQuery = '';
-			searchInputRef?.blur();
-		}
-	}
 </script>
 
 <Tooltip.Provider>
@@ -78,7 +61,23 @@
 						type="search"
 						placeholder="Search tabs..."
 						bind:value={unifiedViewState.searchQuery}
-						onkeydown={handleSearchKeydown}
+						onkeydown={(e) => {
+					// "/" in empty input opens command palette
+					if (e.key === '/' && unifiedViewState.searchQuery === '') {
+						e.preventDefault();
+						commandPaletteOpen = true;
+					}
+					// "@" in empty input opens AI drawer (Phase 4)
+					if (e.key === '@' && unifiedViewState.searchQuery === '') {
+						e.preventDefault();
+						aiDrawerOpen = true;
+					}
+					// Escape clears search
+					if (e.key === 'Escape') {
+						unifiedViewState.searchQuery = '';
+						searchInputRef?.blur();
+					}
+				}}
 						class="h-8 pl-8 pr-8 text-sm [&::-webkit-search-cancel-button]:hidden"
 					/>
 					{#if unifiedViewState.searchQuery}
diff --git a/apps/tab-manager/src/lib/components/chat/ToolCallPart.svelte b/apps/tab-manager/src/lib/components/chat/ToolCallPart.svelte
index db05580450..0f34cf6c29 100644
--- a/apps/tab-manager/src/lib/components/chat/ToolCallPart.svelte
+++ b/apps/tab-manager/src/lib/components/chat/ToolCallPart.svelte
@@ -48,21 +48,6 @@
 		}
 	});
 
-	function handleAllow() {
-		if (!approval?.id) return;
-		aiChatState.active?.approveToolCall(approval.id, true);
-	}
-
-	function handleAlwaysAllow() {
-		if (!approval?.id) return;
-		toolTrustState.set(part.name, 'always');
-		aiChatState.active?.approveToolCall(approval.id, true);
-	}
-
-	function handleDeny() {
-		if (!approval?.id) return;
-		aiChatState.active?.approveToolCall(approval.id, false);
-	}
 	const badgeVariant = $derived.by(() => {
 		if (isFailed) return 'status.failed';
 		if (isRunning) return 'status.running';
@@ -94,15 +79,15 @@
 
 	{#if isApprovalRequested && !toolTrustState.shouldAutoApprove(part.name)}
 		<div class="flex items-center gap-1.5 pl-[1.125rem]">
-			<Button variant="outline" size="sm" onclick={handleAllow}> Allow </Button>
-			<Button variant="outline" size="sm" onclick={handleAlwaysAllow}>
+			<Button variant="outline" size="sm" onclick={() => { if (!approval?.id) return; aiChatState.active?.approveToolCall(approval.id, true); }}> Allow </Button>
+			<Button variant="outline" size="sm" onclick={() => { if (!approval?.id) return; toolTrustState.set(part.name, 'always'); aiChatState.active?.approveToolCall(approval.id, true); }}>
 				Always Allow
 			</Button>
 			<Button
 				variant="ghost"
 				size="sm"
 				class="text-muted-foreground"
-				onclick={handleDeny}
+				onclick={() => { if (!approval?.id) return; aiChatState.active?.approveToolCall(approval.id, false); }}
 			>
 				Deny
 			</Button>
diff --git a/docs/articles/grep-for-handle-functions.md b/docs/articles/grep-for-handle-functions.md
new file mode 100644
index 0000000000..684eb6f72f
--- /dev/null
+++ b/docs/articles/grep-for-handle-functions.md
@@ -0,0 +1,53 @@
+# Grep for `handle*` Functions
+
+```bash
+grep -rn 'function handle' --include='*.svelte' apps/
+```
+
+Run that in your project. If you get more than a handful of hits, you probably have an indirection problem.
+
+`handle*` functions are almost always single-use wrappers. They sit between the event and the actual action, forcing you to jump from the template to the script block just to understand what happens when someone clicks a button. That's two reads where one would do.
+
+**Before:**
+
+```svelte
+<script>
+  function handleSave() {
+    save(draft);
+  }
+</script>
+
+<button onclick={handleSave}>Save</button>
+```
+
+**After:**
+
+```svelte
+<button onclick={() => save(draft)}>Save</button>
+```
+
+The inlined version is shorter, and you can read the whole thing without scrolling. The function name `handleSave` wasn't adding information—it was just restating what `save` already says.
+
+This pattern shows up constantly in AI-generated code. AI assistants extract every event handler into a named function by default, even when the body is a single expression. It's not wrong, exactly, but it's not helpful either. The result is a script block full of one-liner functions that exist only to be called once.
+
+## When to Keep It Extracted
+
+Two cases where the extracted form is actually better:
+
+**Used in multiple places.** If the same function is wired to both `onkeydown` and `onblur`, extract it. Duplicating the inline arrow function in two places is worse than one named function.
+
+```svelte
+<input onkeydown={handleCommit} onblur={handleCommit} />
+```
+
+**Has a JSDoc and a meaningful semantic name.** If the function does something non-obvious and you've written a doc comment explaining it, the name carries real information. Keep it. But if the JSDoc just says "handles the save button click," delete both the comment and the function.
+
+## The Real Test
+
+Ask: does the function name tell you something the inlined code doesn't? If the answer is no, inline it.
+
+`handleClick`, `handleSubmit`, `handleChange`—these names describe the event, not the action. They're noise. `confirmAndDelete` or `syncToRemote` are different; those names carry intent that an arrow function can't.
+
+This is related to the "Single-Use Functions: Inline or Document" rule in the Svelte skill guidelines. The principle is the same: if a function is used once and its name doesn't add meaning, it shouldn't exist as a named function.
+
+Run the grep. If a handle function is used once, inline it.

From f8e25c1d828c519e0486fd0bf18369e76b8103c6 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 01:22:35 -0700
Subject: [PATCH 06/26] feat(svelte): add fromKv/fromTable reactive bindings,
 rename package to @epicenter/svelte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rename @epicenter/svelte-utils → @epicenter/svelte and add two new
reactive utilities that eliminate boilerplate observer patterns across
all apps.

fromKv wraps a single KV key into a { current } box (mirrors Svelte 5's
fromStore). fromTable returns a SvelteMap with granular per-row updates
via the table observer, replacing the wholesale array re-read pattern.

Migrated 8 files across honeycrisp, fuji, and tab-manager from manual
$state + observe → fromKv/fromTable. All derived arrays cached via
$derived to avoid re-creating on every getter access.

Also standardizes tsconfig lib from ES2022 → ESNext across 12 packages.
---
 .agents/skills/svelte/SKILL.md                |  58 +++-
 apps/fuji/package.json                        |   3 +-
 apps/fuji/src/routes/+page.svelte             |  89 ++----
 apps/honeycrisp/package.json                  |   3 +-
 .../src/lib/state/folders.svelte.ts           |  14 +-
 apps/honeycrisp/src/lib/state/notes.svelte.ts |  17 +-
 apps/honeycrisp/src/lib/state/view.svelte.ts  |  65 ++---
 apps/opensidian/tsconfig.json                 |   2 +-
 apps/tab-manager-markdown/tsconfig.json       |   2 +-
 apps/tab-manager/package.json                 |   3 +-
 .../src/lib/state/bookmark-state.svelte.ts    |  25 +-
 .../src/lib/state/saved-tab-state.svelte.ts   |  29 +-
 .../src/lib/state/tool-trust.svelte.ts        |  26 +-
 apps/whispering/package.json                  |   2 +-
 .../lib/services/desktop/recorder/ffmpeg.ts   |   2 +-
 .../(app)/(config)/recordings/+page.svelte    |   2 +-
 .../(config)/transformations/+page.svelte     |   2 +-
 bun.lock                                      |  26 +-
 examples/yjs-size-benchmark/tsconfig.json     |   2 +-
 packages/cli/tsconfig.json                    |   2 +-
 packages/constants/tsconfig.json              |   2 +-
 packages/filesystem/tsconfig.json             |   2 +-
 packages/svelte-utils/package.json            |   5 +-
 packages/svelte-utils/src/fromKv.svelte.ts    |  50 ++++
 packages/svelte-utils/src/fromTable.svelte.ts |  58 ++++
 packages/svelte-utils/src/index.ts            |   2 +
 packages/svelte-utils/tsconfig.json           |  10 +-
 packages/sync-client/tsconfig.json            |   2 +-
 packages/sync/tsconfig.json                   |   2 +-
 packages/ui/tsconfig.json                     |   2 +-
 packages/workspace/tsconfig.json              |   2 +-
 ...54-rename-svelte-package-and-add-fromKv.md | 271 ++++++++++++++++++
 tsconfig.base.json                            |   4 +-
 33 files changed, 561 insertions(+), 225 deletions(-)
 create mode 100644 packages/svelte-utils/src/fromKv.svelte.ts
 create mode 100644 packages/svelte-utils/src/fromTable.svelte.ts
 create mode 100644 specs/20260318T234754-rename-svelte-package-and-add-fromKv.md

diff --git a/.agents/skills/svelte/SKILL.md b/.agents/skills/svelte/SKILL.md
index b42788b907..a8a394b43c 100644
--- a/.agents/skills/svelte/SKILL.md
+++ b/.agents/skills/svelte/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: svelte
-description: Svelte 5 patterns including TanStack Query mutations, shadcn-svelte components, and component composition. Use when writing Svelte components, using TanStack Query, or working with shadcn-svelte UI.
+description: Svelte 5 patterns including TanStack Query mutations, SvelteMap reactive state, shadcn-svelte components, and component composition. Use when writing Svelte components, using TanStack Query, working with SvelteMap/fromTable/fromKv, or working with shadcn-svelte UI.
 metadata:
   author: epicenter
   version: '1.0'
@@ -19,6 +19,7 @@ Use this pattern when you need to:
 - Decide between `createMutation` in `.svelte` and `.execute()` in `.ts`.
 - Follow shadcn-svelte import, composition, and component organization patterns.
 - Refactor one-off `handle*` wrappers into inline template actions.
+- Convert SvelteMap data to arrays for derived state or component props.
 
 # `$derived` Value Mapping: Use `satisfies Record`, Not Ternaries
 
@@ -73,6 +74,61 @@ Reserve `$derived.by()` for multi-statement logic where you genuinely need a fun
 
 See `docs/articles/record-lookup-over-nested-ternaries.md` for rationale.
 
+# SvelteMap to Array: Always Cache with `$derived`
+
+When exposing `SvelteMap` contents as arrays (from `fromTable`, `fromKv`, or raw `SvelteMap`), always wrap the conversion in `$derived`. Never spread inside a plain getter — it re-creates the array on every access, even if the map hasn't changed.
+
+`$derived` caches the result and only recomputes when the map actually changes (pull-based reactivity).
+
+```typescript
+// Bad: creates a new array on EVERY getter access
+get folders() {
+	return [...foldersMap.values()];
+}
+
+// Good: cached — only recomputes when foldersMap changes
+const folders = $derived([...foldersMap.values()]);
+// ...
+return {
+	get folders() {
+		return folders;
+	},
+};
+```
+
+With chained operations (filter, sort), the entire pipeline is cached:
+
+```typescript
+// Good: sort + filter cached together
+const tabs = $derived([...tabsMap.values()].sort((a, b) => b.savedAt - a.savedAt));
+const activeNotes = $derived(allNotes.filter((n) => n.deletedAt === undefined));
+```
+
+## When `.values()` Alone Suffices
+
+`map.values()` returns a `MapIterator` — single-use, no `.filter()`, `.find()`, `.sort()`, `.length`. Use the spread only when you need array methods:
+
+| Need | Pattern |
+|---|---|
+| Just iterating in `{#each}` | `{#each map.values() as item}` or `{#each map as [id, item] (id)}` — no spread needed |
+| Chaining array methods | `$derived([...map.values()].filter(...))` — spread required |
+| Exposing from factory getter | `$derived([...map.values()])` — consumers expect `T[]` with array methods |
+| One-time snapshot in action | `const all = [...map.values()];` — necessary, not wasteful |
+
+## Template Props
+
+For component props expecting `T[]`, derive once in the script block — never spread in the template:
+
+```svelte
+<!-- Bad: re-creates array on every render -->
+<FujiSidebar entries={[...entries.values()]} />
+
+<!-- Good: cached via $derived -->
+<script>
+	const entriesArray = $derived([...entries.values()]);
+</script>
+<FujiSidebar entries={entriesArray} />
+```
 # Mutation Pattern Preference
 
 ## In Svelte Files (.svelte)
diff --git a/apps/fuji/package.json b/apps/fuji/package.json
index 121c77ab32..0777b3ace6 100644
--- a/apps/fuji/package.json
+++ b/apps/fuji/package.json
@@ -25,7 +25,8 @@
 		"typescript": "catalog:",
 		"vite": "catalog:"
 	},
-	"dependencies": {
+"dependencies": {
+		"@epicenter/svelte": "workspace:*",
 		"@epicenter/workspace": "workspace:*",
 		"@tanstack/svelte-query": "catalog:",
 		"@tanstack/svelte-query-devtools": "catalog:",
diff --git a/apps/fuji/src/routes/+page.svelte b/apps/fuji/src/routes/+page.svelte
index 64d9ffcccf..b6f457ea0a 100644
--- a/apps/fuji/src/routes/+page.svelte
+++ b/apps/fuji/src/routes/+page.svelte
@@ -3,6 +3,7 @@
 	import { SidebarProvider } from '@epicenter/ui/sidebar';
 	import type { DocumentHandle } from '@epicenter/workspace';
 	import { dateTimeStringNow, generateId } from '@epicenter/workspace';
+	import { fromKv, fromTable } from '@epicenter/svelte';
 	import ClockIcon from '@lucide/svelte/icons/clock';
 	import TableIcon from '@lucide/svelte/icons/table-2';
 	import type * as Y from 'yjs';
@@ -14,9 +15,10 @@
 
 	// ─── Reactive State ────────────────────────────────────────────────────────────
 
-	let entries = $state<Entry[]>([]);
-	let selectedEntryId = $state<EntryId | null>(null);
-	let viewMode = $state<'table' | 'timeline'>('table');
+	const entries = fromTable(workspaceClient.tables.entries);
+	const entriesArray = $derived([...entries.values()]);
+	const selectedEntryId = fromKv(workspaceClient.kv, 'selectedEntryId');
+	const viewMode = fromKv(workspaceClient.kv, 'viewMode');
 	let currentYText = $state<Y.Text | null>(null);
 	let currentDocHandle = $state<DocumentHandle | null>(null);
 
@@ -26,48 +28,15 @@
 	let activeTagFilter = $state<string | null>(null);
 	let searchQuery = $state('');
 
-	// ─── Workspace Observation ───────────────────────────────────────────────────
-
-	$effect(() => {
-		entries = workspaceClient.tables.entries.getAllValid();
-
-		const kvEntryId = workspaceClient.kv.get('selectedEntryId');
-		selectedEntryId = kvEntryId.status === 'valid' ? kvEntryId.value : null;
-
-		const kvViewMode = workspaceClient.kv.get('viewMode');
-		viewMode = kvViewMode.status === 'valid' ? kvViewMode.value : 'table';
-
-		const unsubEntries = workspaceClient.tables.entries.observe(() => {
-			entries = workspaceClient.tables.entries.getAllValid();
-		});
-
-		const unsubSelectedEntry = workspaceClient.kv.observe(
-			'selectedEntryId',
-			(change) => {
-				selectedEntryId = change.type === 'set' ? change.value : null;
-			},
-		);
-
-		const unsubViewMode = workspaceClient.kv.observe('viewMode', (change) => {
-			viewMode = change.type === 'set' ? change.value : 'table';
-		});
-
-		return () => {
-			unsubEntries();
-			unsubSelectedEntry();
-			unsubViewMode();
-		};
-	});
-
 	// ─── Derived State ───────────────────────────────────────────────────────────
 
 	const selectedEntry = $derived(
-		entries.find((e) => e.id === selectedEntryId) ?? null,
+		selectedEntryId.current ? entries.get(selectedEntryId.current) ?? null : null,
 	);
 
 	/** Entries filtered by sidebar type/tag filters. */
 	const filteredEntries = $derived.by(() => {
-		let result = entries;
+		let result = entriesArray;
 		const typeFilter = activeTypeFilter;
 		const tagFilter = activeTagFilter;
 		if (typeFilter) {
@@ -91,12 +60,12 @@ function createEntry() {
 			updatedAt: dateTimeStringNow(),
 			_v: 2,
 		});
-		workspaceClient.kv.set('selectedEntryId', id);
+		selectedEntryId.current = id;
 	}
 
 	function toggleViewMode() {
-		const next = viewMode === 'table' ? 'timeline' : 'table';
-		workspaceClient.kv.set('viewMode', next);
+		const next = viewMode.current === 'table' ? 'timeline' : 'table';
+		viewMode.current = next;
 	}
 
 	// ─── Keyboard Shortcuts ───────────────────────────────────────────────────────
@@ -105,7 +74,7 @@ function createEntry() {
 	// ─── Document Handle (Y.Text) ────────────────────────────────────────────────
 
 	$effect(() => {
-		const entryId = selectedEntryId;
+		const entryId = selectedEntryId.current;
 		if (!entryId) {
 			currentYText = null;
 			currentDocHandle = null;
@@ -147,43 +116,43 @@ function createEntry() {
 			updatedAt: dateTimeStringNow(),
 			_v: 2,
 		});
-		workspaceClient.kv.set('selectedEntryId', id);
+		selectedEntryId.current = id;
 		return;
 	}
 
-	if (event.key === 'Escape' && !isInputFocused && selectedEntryId) {
+	if (event.key === 'Escape' && !isInputFocused && selectedEntryId.current) {
 		event.preventDefault();
-		workspaceClient.kv.set('selectedEntryId', null);
+		selectedEntryId.current = null;
 	}
 }} />
 
 <SidebarProvider>
 	<FujiSidebar
-		{entries}
+		entries={entriesArray}
 		{activeTypeFilter}
 		{activeTagFilter}
 		{searchQuery}
 		onFilterByType={(type) => (activeTypeFilter = type)}
 		onFilterByTag={(tag) => (activeTagFilter = tag)}
 		onSearchChange={(query) => (searchQuery = query)}
-		onSelectEntry={(id) => workspaceClient.kv.set('selectedEntryId', id)}
+		onSelectEntry={(id) => (selectedEntryId.current = id)}
 	/>
 
 	<main class="flex h-screen flex-1 flex-col overflow-hidden">
 		{#if selectedEntry && currentYText}
-			{#key selectedEntryId}
+			{#key selectedEntryId.current}
 				<EntryEditor
 					entry={selectedEntry}
 					ytext={currentYText}
 					onUpdateEntry={(updates) => {
-						if (!selectedEntryId) return;
-						workspaceClient.tables.entries.update(selectedEntryId, updates);
+						if (!selectedEntryId.current) return;
+						workspaceClient.tables.entries.update(selectedEntryId.current, updates);
 					}}
 					onPreviewChange={(preview) => {
-						if (!selectedEntryId) return;
-						workspaceClient.tables.entries.update(selectedEntryId, { preview });
+						if (!selectedEntryId.current) return;
+						workspaceClient.tables.entries.update(selectedEntryId.current, { preview });
 					}}
-					onBack={() => workspaceClient.kv.set('selectedEntryId', null)}
+					onBack={() => (selectedEntryId.current = null)}
 				/>
 			{/key}
 		{:else if selectedEntry}
@@ -198,9 +167,9 @@ function createEntry() {
 					size="icon"
 					class="size-7"
 					onclick={toggleViewMode}
-					title={viewMode === 'table' ? 'Switch to timeline' : 'Switch to table'}
+					title={viewMode.current === 'table' ? 'Switch to timeline' : 'Switch to table'}
 				>
-					{#if viewMode === 'table'}
+					{#if viewMode.current === 'table'}
 						<ClockIcon class="size-4" />
 					{:else}
 						<TableIcon class="size-4" />
@@ -208,19 +177,19 @@ function createEntry() {
 				</Button>
 			</div>
 
-			{#if viewMode === 'table'}
+			{#if viewMode.current === 'table'}
 				<EntriesTable
 					entries={filteredEntries}
 					globalFilter={searchQuery}
-					{selectedEntryId}
-					onSelectEntry={(id) => workspaceClient.kv.set('selectedEntryId', id)}
+					selectedEntryId={selectedEntryId.current}
+					onSelectEntry={(id) => (selectedEntryId.current = id)}
 					onAddEntry={createEntry}
 				/>
 			{:else}
 				<EntryTimeline
 					entries={filteredEntries}
-					{selectedEntryId}
-					onSelectEntry={(id) => workspaceClient.kv.set('selectedEntryId', id)}
+					selectedEntryId={selectedEntryId.current}
+					onSelectEntry={(id) => (selectedEntryId.current = id)}
 					onAddEntry={createEntry}
 				/>
 			{/if}
diff --git a/apps/honeycrisp/package.json b/apps/honeycrisp/package.json
index 7de73ca868..ef81f4036f 100644
--- a/apps/honeycrisp/package.json
+++ b/apps/honeycrisp/package.json
@@ -25,7 +25,8 @@
 		"typescript": "catalog:",
 		"vite": "catalog:"
 	},
-	"dependencies": {
+"dependencies": {
+		"@epicenter/svelte": "workspace:*",
 		"@epicenter/workspace": "workspace:*",
 		"@tanstack/svelte-query": "catalog:",
 		"@tanstack/svelte-query-devtools": "catalog:",
diff --git a/apps/honeycrisp/src/lib/state/folders.svelte.ts b/apps/honeycrisp/src/lib/state/folders.svelte.ts
index 11636f9c0a..368752b09a 100644
--- a/apps/honeycrisp/src/lib/state/folders.svelte.ts
+++ b/apps/honeycrisp/src/lib/state/folders.svelte.ts
@@ -22,21 +22,15 @@
  */
 
 import { generateId } from '@epicenter/workspace';
+import { fromTable } from '@epicenter/svelte';
 import workspaceClient, { type Folder, type FolderId } from '$lib/workspace';
 
 function createFoldersState() {
 	// ─── Reactive State ──────────────────────────────────────────────────
 
-	/** Read all valid folders, used as initial seed + observer refresh. */
-	const readFolders = () => workspaceClient.tables.folders.getAllValid();
+	const foldersMap = fromTable(workspaceClient.tables.folders);
 
-	let folders = $state<Folder[]>(readFolders());
-
-	// ─── Workspace Observers ─────────────────────────────────────────────
-
-	const _unobserveFolders = workspaceClient.tables.folders.observe(() => {
-		folders = readFolders();
-	});
+	const folders = $derived([...foldersMap.values()]);
 
 	// ─── Public API ──────────────────────────────────────────────────────
 
@@ -62,7 +56,7 @@ function createFoldersState() {
 			workspaceClient.tables.folders.set({
 				id,
 				name: 'New Folder',
-				sortOrder: folders.length,
+				sortOrder: foldersMap.size,
 				_v: 1,
 			});
 		},
diff --git a/apps/honeycrisp/src/lib/state/notes.svelte.ts b/apps/honeycrisp/src/lib/state/notes.svelte.ts
index bf1dd224ac..d52491b7ce 100644
--- a/apps/honeycrisp/src/lib/state/notes.svelte.ts
+++ b/apps/honeycrisp/src/lib/state/notes.svelte.ts
@@ -22,6 +22,7 @@
  */
 
 import { dateTimeStringNow, generateId } from '@epicenter/workspace';
+import { fromTable } from '@epicenter/svelte';
 import workspaceClient, {
 	type FolderId,
 	type Note,
@@ -32,16 +33,10 @@ import { foldersState } from './folders.svelte';
 function createNotesState() {
 	// ─── Reactive State ──────────────────────────────────────────────────
 
-	/** Read all valid notes (including deleted), used as initial seed + observer refresh. */
-	const readNotes = () => workspaceClient.tables.notes.getAllValid();
+	const allNotesMap = fromTable(workspaceClient.tables.notes);
 
-	let allNotes = $state<Note[]>(readNotes());
-
-	// ─── Workspace Observers ─────────────────────────────────────────────
-
-	const _unobserveNotes = workspaceClient.tables.notes.observe(() => {
-		allNotes = readNotes();
-	});
+	/** All valid notes (including deleted). Cached — only recomputes when table changes. */
+	const allNotes = $derived([...allNotesMap.values()]);
 
 	// ─── Derived State ───────────────────────────────────────────────────
 
@@ -146,7 +141,7 @@ function createNotesState() {
 		 * ```
 		 */
 		restoreNote(noteId: NoteId) {
-			const note = allNotes.find((n) => n.id === noteId);
+			const note = allNotesMap.get(noteId);
 			if (!note) return;
 			const folderExists = note.folderId
 				? foldersState.folders.some((f) => f.id === note.folderId)
@@ -189,7 +184,7 @@ function createNotesState() {
 		 * ```
 		 */
 		pinNote(noteId: NoteId) {
-			const note = allNotes.find((n) => n.id === noteId);
+			const note = allNotesMap.get(noteId);
 			if (!note) return;
 			workspaceClient.tables.notes.update(noteId, {
 				pinned: !note.pinned,
diff --git a/apps/honeycrisp/src/lib/state/view.svelte.ts b/apps/honeycrisp/src/lib/state/view.svelte.ts
index e60c6c3dfe..a00222842b 100644
--- a/apps/honeycrisp/src/lib/state/view.svelte.ts
+++ b/apps/honeycrisp/src/lib/state/view.svelte.ts
@@ -23,52 +23,27 @@
  */
 
 import workspaceClient, { type FolderId, type NoteId } from '$lib/workspace';
+import { fromKv } from '@epicenter/svelte';
 import { foldersState } from './folders.svelte';
 import { notesState } from './notes.svelte';
 
 function createViewState() {
 	// ─── Reactive State ──────────────────────────────────────────────────
 
-	let selectedFolderId = $state<FolderId | null>(
-		workspaceClient.kv.get('selectedFolderId'),
-	);
-	let selectedNoteId = $state<NoteId | null>(
-		workspaceClient.kv.get('selectedNoteId'),
-	);
-	let sortBy = $state<'dateEdited' | 'dateCreated' | 'title'>(
-		workspaceClient.kv.get('sortBy'),
-	);
+	const selectedFolderId = fromKv(workspaceClient.kv, 'selectedFolderId');
+	const selectedNoteId = fromKv(workspaceClient.kv, 'selectedNoteId');
+	const sortBy = fromKv(workspaceClient.kv, 'sortBy');
 	let searchQuery = $state('');
 	let isRecentlyDeletedView = $state(false);
 
-	// ─── Workspace Observers ─────────────────────────────────────────────
-
-	const _unobserveSelectedFolder = workspaceClient.kv.observe(
-		'selectedFolderId',
-		(change) => {
-			selectedFolderId = change.type === 'set' ? change.value : null;
-		},
-	);
-
-	const _unobserveSelectedNote = workspaceClient.kv.observe(
-		'selectedNoteId',
-		(change) => {
-			selectedNoteId = change.type === 'set' ? change.value : null;
-		},
-	);
-
-	const _unobserveSortBy = workspaceClient.kv.observe('sortBy', (change) => {
-		sortBy = change.type === 'set' ? change.value : 'dateEdited';
-	});
-
 	// ─── Derived State ───────────────────────────────────────────────────
 
 	/** Notes filtered by selected folder and search query. */
 	const filteredNotes = $derived.by(() => {
 		let result =
-			selectedFolderId === null
+			selectedFolderId.current === null
 				? notesState.notes
-				: notesState.notes.filter((n) => n.folderId === selectedFolderId);
+				: notesState.notes.filter((n) => n.folderId === selectedFolderId.current);
 		if (searchQuery.trim()) {
 			const q = searchQuery.trim().toLowerCase();
 			result = result.filter(
@@ -78,8 +53,8 @@ function createViewState() {
 			);
 		}
 		return [...result].sort((a, b) => {
-			if (sortBy === 'title') return a.title.localeCompare(b.title);
-			if (sortBy === 'dateCreated')
+			if (sortBy.current === 'title') return a.title.localeCompare(b.title);
+			if (sortBy.current === 'dateCreated')
 				return b.createdAt.localeCompare(a.createdAt);
 			return b.updatedAt.localeCompare(a.updatedAt);
 		});
@@ -87,25 +62,25 @@ function createViewState() {
 
 	/** Human-readable name for the current folder (used as NoteList title). */
 	const folderName = $derived(
-		selectedFolderId
-			? (foldersState.folders.find((f) => f.id === selectedFolderId)?.name ??
+		selectedFolderId.current
+			? (foldersState.folders.find((f) => f.id === selectedFolderId.current)?.name ??
 					'Notes')
 			: 'All Notes',
 	);
 
 	/** The currently selected note (can be active or deleted). */
 	const selectedNote = $derived(
-		notesState.allNotes.find((n) => n.id === selectedNoteId) ?? null,
+		notesState.allNotes.find((n) => n.id === selectedNoteId.current) ?? null,
 	);
 
 	// ─── Public API ──────────────────────────────────────────────────────
 
 	return {
 		get selectedFolderId() {
-			return selectedFolderId;
+			return selectedFolderId.current;
 		},
 		get selectedNoteId() {
-			return selectedNoteId;
+			return selectedNoteId.current;
 		},
 		get selectedNote() {
 			return selectedNote;
@@ -114,7 +89,7 @@ function createViewState() {
 			return searchQuery;
 		},
 		get sortBy() {
-			return sortBy;
+			return sortBy.current;
 		},
 		get isRecentlyDeletedView() {
 			return isRecentlyDeletedView;
@@ -143,8 +118,8 @@ function createViewState() {
 		 */
 		selectFolder(folderId: FolderId | null) {
 			isRecentlyDeletedView = false;
-			workspaceClient.kv.set('selectedFolderId', folderId);
-			workspaceClient.kv.set('selectedNoteId', null);
+			selectedFolderId.current = folderId;
+			selectedNoteId.current = null;
 		},
 
 		/**
@@ -160,8 +135,8 @@ function createViewState() {
 		 */
 		selectRecentlyDeleted() {
 			isRecentlyDeletedView = true;
-			workspaceClient.kv.set('selectedFolderId', null);
-			workspaceClient.kv.set('selectedNoteId', null);
+			selectedFolderId.current = null;
+			selectedNoteId.current = null;
 		},
 
 		/**
@@ -173,7 +148,7 @@ function createViewState() {
 		 * ```
 		 */
 		selectNote(noteId: NoteId) {
-			workspaceClient.kv.set('selectedNoteId', noteId);
+			selectedNoteId.current = noteId;
 		},
 
 		/**
@@ -189,7 +164,7 @@ function createViewState() {
 		 * ```
 		 */
 		setSortBy(value: 'dateEdited' | 'dateCreated' | 'title') {
-			workspaceClient.kv.set('sortBy', value);
+			sortBy.current = value;
 		},
 
 		/**
diff --git a/apps/opensidian/tsconfig.json b/apps/opensidian/tsconfig.json
index ede3f1b2b4..e7e01deba5 100644
--- a/apps/opensidian/tsconfig.json
+++ b/apps/opensidian/tsconfig.json
@@ -12,7 +12,7 @@
 		"moduleResolution": "bundler",
 		"module": "esnext",
 		"target": "esnext",
-		"lib": ["esnext", "dom"],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"types": ["bun-types"]
 	}
 }
diff --git a/apps/tab-manager-markdown/tsconfig.json b/apps/tab-manager-markdown/tsconfig.json
index c043b0d04d..388c3df108 100644
--- a/apps/tab-manager-markdown/tsconfig.json
+++ b/apps/tab-manager-markdown/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"lib": ["ESNext", "DOM"],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"target": "ESNext"
 	},
 	"include": ["src/**/*"]
diff --git a/apps/tab-manager/package.json b/apps/tab-manager/package.json
index b6a6dd710a..9b7e80b00b 100644
--- a/apps/tab-manager/package.json
+++ b/apps/tab-manager/package.json
@@ -16,7 +16,8 @@
 		"typecheck": "svelte-check --tsconfig ./tsconfig.json",
 		"postinstall": "wxt prepare"
 	},
-	"dependencies": {
+"dependencies": {
+		"@epicenter/svelte": "workspace:*",
 		"@epicenter/ai": "workspace:*",
 		"@epicenter/constants": "workspace:*",
 		"@epicenter/sync-client": "workspace:*",
diff --git a/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts b/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts
index 8ae552dd62..10b0bf9a7b 100644
--- a/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts
+++ b/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts
@@ -27,6 +27,7 @@
  */
 
 import { getDeviceId } from '$lib/device/device-id';
+import { fromTable } from '@epicenter/svelte';
 import {
 	type Bookmark,
 	type BookmarkId,
@@ -36,28 +37,12 @@ import {
 } from '$lib/workspace';
 
 function createBookmarkState() {
-	/** Read all valid bookmarks, most recently created first. */
-	const readAll = () =>
-		workspaceClient.tables.bookmarks
-			.getAllValid()
-			.sort((a, b) => b.createdAt - a.createdAt);
+	const bookmarksMap = fromTable(workspaceClient.tables.bookmarks);
 
-	/**
-	 * The full sorted list of bookmarks.
-	 *
-	 * Wholesale-replaced on every Y.Doc change rather than surgically mutated.
-	 * Same rationale as saved-tab-state: the observer doesn't tell us what
-	 * changed, so a full re-read is the simplest correct approach.
-	 */
-	let bookmarks = $state<Bookmark[]>(readAll());
-
-	// Re-read on every Y.Doc change.
-	const _unobserveBookmarks = workspaceClient.tables.bookmarks.observe(() => {
-		bookmarks = readAll();
-	});
+	/** All bookmarks, sorted by most recently created first. Cached via $derived. */
+	const bookmarks = $derived([...bookmarksMap.values()].sort((a, b) => b.createdAt - a.createdAt));
 
 	return {
-		/** All bookmarks, sorted by most recently created first. */
 		get bookmarks() {
 			return bookmarks;
 		},
@@ -108,7 +93,7 @@ function createBookmarkState() {
 
 			/** Delete all bookmarks. Wrapped in a Y.Doc transaction. */
 			removeAll() {
-				const all = workspaceClient.tables.bookmarks.getAllValid();
+				const all = [...bookmarksMap.values()];
 				if (!all.length) return;
 
 				workspaceClient.batch(() => {
diff --git a/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts b/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts
index bec4f9cb7d..b56be1d367 100644
--- a/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts
+++ b/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts
@@ -32,6 +32,7 @@
  */
 
 import { getDeviceId } from '$lib/device/device-id';
+import { fromTable } from '@epicenter/svelte';
 import {
 	generateSavedTabId,
 	type SavedTab,
@@ -41,30 +42,12 @@ import {
 } from '$lib/workspace';
 
 function createSavedTabState() {
-	/** Read all valid saved tabs, most recently saved first. */
-	const readAll = () =>
-		workspaceClient.tables.savedTabs
-			.getAllValid()
-			.sort((a, b) => b.savedAt - a.savedAt);
+	const tabsMap = fromTable(workspaceClient.tables.savedTabs);
 
-	/**
-	 * The full sorted list of saved tabs.
-	 *
-	 * Wholesale-replaced on every Y.Doc change rather than surgically mutated.
-	 * This is intentional — the Y.Doc observer doesn't tell us *what* changed,
-	 * only *that* something changed, so a full re-read is the simplest correct
-	 * approach. The list is small enough that this is never a perf concern.
-	 */
-	let tabs = $state<SavedTab[]>(readAll());
-
-	// Re-read on every Y.Doc change — observer fires when persistence
-	// loads and on any subsequent remote/local modification.
-	const _unobserveSavedTabs = workspaceClient.tables.savedTabs.observe(() => {
-		tabs = readAll();
-	});
+	/** All saved tabs, sorted by most recently saved first. Cached via $derived. */
+	const tabs = $derived([...tabsMap.values()].sort((a, b) => b.savedAt - a.savedAt));
 
 	return {
-		/** All saved tabs, sorted by most recently saved first. */
 		get tabs() {
 			return tabs;
 		},
@@ -129,7 +112,7 @@ function createSavedTabState() {
 			 *    collapses N observer callbacks into one.
 			 */
 			async restoreAll() {
-				const all = workspaceClient.tables.savedTabs.getAllValid();
+				const all = [...tabsMap.values()];
 				if (!all.length) return;
 
 				// Fire all tab creations without awaiting each one individually.
@@ -164,7 +147,7 @@ function createSavedTabState() {
 			 * (not N times for N tabs).
 			 */
 			removeAll() {
-				const all = workspaceClient.tables.savedTabs.getAllValid();
+				const all = [...tabsMap.values()];
 				if (!all.length) return;
 
 				workspaceClient.batch(() => {
diff --git a/apps/tab-manager/src/lib/state/tool-trust.svelte.ts b/apps/tab-manager/src/lib/state/tool-trust.svelte.ts
index 8ab0db2a58..291ab7c9ac 100644
--- a/apps/tab-manager/src/lib/state/tool-trust.svelte.ts
+++ b/apps/tab-manager/src/lib/state/tool-trust.svelte.ts
@@ -11,6 +11,7 @@
  * @module
  */
 
+import { fromTable } from '@epicenter/svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import { type ToolTrust, workspaceClient } from '$lib/workspace';
 
@@ -27,24 +28,7 @@ export type TrustLevel = ToolTrust['trust'];
 // ─────────────────────────────────────────────────────────────────────────────
 
 function createToolTrustState() {
-	/** Build the trust map from the workspace table. */
-	function readAllTrust(): Map<string, TrustLevel> {
-		const entries = workspaceClient.tables.toolTrust.getAllValid();
-		return new Map(entries.map((row) => [row.id, row.trust]));
-	}
-
-	/** Internal reactive map — hidden from consumers. */
-	const trustMap = new SvelteMap<string, TrustLevel>(readAllTrust());
-
-	// Keep reactive state in sync with Y.Doc changes (local + remote)
-	const _unobserveToolTrust = workspaceClient.tables.toolTrust.observe(() => {
-		const fresh = readAllTrust();
-		// Clear and repopulate to trigger Svelte reactivity
-		trustMap.clear();
-		for (const [key, value] of fresh) {
-			trustMap.set(key, value);
-		}
-	});
+	const trustMap = fromTable(workspaceClient.tables.toolTrust);
 
 	return {
 		/**
@@ -61,7 +45,7 @@ function createToolTrustState() {
 		 * ```
 		 */
 		get(name: string): TrustLevel {
-			return trustMap.get(name) ?? 'ask';
+			return (trustMap.get(name)?.trust) ?? 'ask';
 		},
 
 		/**
@@ -101,7 +85,7 @@ function createToolTrustState() {
 		 * ```
 		 */
 		shouldAutoApprove(name: string): boolean {
-			return (trustMap.get(name) ?? 'ask') === 'always';
+			return ((trustMap.get(name)?.trust) ?? 'ask') === 'always';
 		},
 
 		/**
@@ -120,7 +104,7 @@ function createToolTrustState() {
 		 * ```
 		 */
 		entries(): SvelteMap<string, TrustLevel> {
-			return trustMap;
+			return new SvelteMap([...trustMap].map(([k, v]) => [k, v.trust]));
 		},
 	};
 }
diff --git a/apps/whispering/package.json b/apps/whispering/package.json
index 784fe2bb36..2a8f022930 100644
--- a/apps/whispering/package.json
+++ b/apps/whispering/package.json
@@ -45,7 +45,7 @@
 		"@aptabase/tauri": "^0.4.1",
 		"@aptabase/web": "^0.4.3",
 		"@epicenter/constants": "workspace:*",
-		"@epicenter/svelte-utils": "workspace:*",
+		"@epicenter/svelte": "workspace:*",
 		"@epicenter/workspace": "workspace:*",
 		"@google/generative-ai": "^0.24.1",
 		"@mistralai/mistralai": "^1.9.18",
diff --git a/apps/whispering/src/lib/services/desktop/recorder/ffmpeg.ts b/apps/whispering/src/lib/services/desktop/recorder/ffmpeg.ts
index 8b35eed36a..ee627752de 100644
--- a/apps/whispering/src/lib/services/desktop/recorder/ffmpeg.ts
+++ b/apps/whispering/src/lib/services/desktop/recorder/ffmpeg.ts
@@ -1,4 +1,4 @@
-import { createPersistedState } from '@epicenter/svelte-utils';
+import { createPersistedState } from '@epicenter/svelte';
 import { invoke } from '@tauri-apps/api/core';
 import { join } from '@tauri-apps/api/path';
 import { exists, remove, stat } from '@tauri-apps/plugin-fs';
diff --git a/apps/whispering/src/routes/(app)/(config)/recordings/+page.svelte b/apps/whispering/src/routes/(app)/(config)/recordings/+page.svelte
index 9dfa1fe5a9..cb2385528e 100644
--- a/apps/whispering/src/routes/(app)/(config)/recordings/+page.svelte
+++ b/apps/whispering/src/routes/(app)/(config)/recordings/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createPersistedState } from '@epicenter/svelte-utils';
+	import { createPersistedState } from '@epicenter/svelte';
 	import { Badge } from '@epicenter/ui/badge';
 	import { Button, buttonVariants } from '@epicenter/ui/button';
 	import * as ButtonGroup from '@epicenter/ui/button-group';
diff --git a/apps/whispering/src/routes/(app)/(config)/transformations/+page.svelte b/apps/whispering/src/routes/(app)/(config)/transformations/+page.svelte
index e113d1483d..4b587157da 100644
--- a/apps/whispering/src/routes/(app)/(config)/transformations/+page.svelte
+++ b/apps/whispering/src/routes/(app)/(config)/transformations/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createPersistedState } from '@epicenter/svelte-utils';
+	import { createPersistedState } from '@epicenter/svelte';
 	import { Badge } from '@epicenter/ui/badge';
 	import { Button } from '@epicenter/ui/button';
 	import * as ButtonGroup from '@epicenter/ui/button-group';
diff --git a/bun.lock b/bun.lock
index 00ddcbba4a..d3bc3e57fd 100644
--- a/bun.lock
+++ b/bun.lock
@@ -48,6 +48,7 @@
       "name": "@epicenter/fuji",
       "version": "0.0.1",
       "dependencies": {
+        "@epicenter/svelte": "workspace:*",
         "@epicenter/workspace": "workspace:*",
         "@tanstack/svelte-query": "catalog:",
         "@tanstack/svelte-query-devtools": "catalog:",
@@ -87,6 +88,7 @@
       "name": "@epicenter/honeycrisp",
       "version": "0.0.1",
       "dependencies": {
+        "@epicenter/svelte": "workspace:*",
         "@epicenter/workspace": "workspace:*",
         "@tanstack/svelte-query": "catalog:",
         "@tanstack/svelte-query-devtools": "catalog:",
@@ -187,6 +189,7 @@
       "dependencies": {
         "@epicenter/ai": "workspace:*",
         "@epicenter/constants": "workspace:*",
+        "@epicenter/svelte": "workspace:*",
         "@epicenter/sync-client": "workspace:*",
         "@epicenter/ui": "workspace:*",
         "@epicenter/workspace": "workspace:*",
@@ -244,7 +247,7 @@
         "@aptabase/tauri": "^0.4.1",
         "@aptabase/web": "^0.4.3",
         "@epicenter/constants": "workspace:*",
-        "@epicenter/svelte-utils": "workspace:*",
+        "@epicenter/svelte": "workspace:*",
         "@epicenter/workspace": "workspace:*",
         "@google/generative-ai": "^0.24.1",
         "@mistralai/mistralai": "^1.9.18",
@@ -385,9 +388,10 @@
       },
     },
     "packages/svelte-utils": {
-      "name": "@epicenter/svelte-utils",
+      "name": "@epicenter/svelte",
       "version": "0.0.1",
       "dependencies": {
+        "@epicenter/workspace": "workspace:*",
         "wellcrafted": "catalog:",
       },
       "devDependencies": {
@@ -502,9 +506,11 @@
         "lib0": "catalog:",
         "mime": "catalog:",
         "nanoid": "catalog:",
+        "remark-parse": "^11.0.0",
         "temporal-polyfill": "^0.3.0",
         "tinybase": "^5.4.2",
         "typebox": "catalog:",
+        "unified": "^11.0.5",
         "wellcrafted": "catalog:",
         "y-indexeddb": "catalog:",
         "y-protocols": "catalog:",
@@ -767,7 +773,7 @@
 
     "@epicenter/posthog-reverse-proxy": ["@epicenter/posthog-reverse-proxy@workspace:apps/posthog-reverse-proxy"],
 
-    "@epicenter/svelte-utils": ["@epicenter/svelte-utils@workspace:packages/svelte-utils"],
+    "@epicenter/svelte": ["@epicenter/svelte@workspace:packages/svelte-utils"],
 
     "@epicenter/sync": ["@epicenter/sync@workspace:packages/sync"],
 
@@ -2333,7 +2339,7 @@
 
     "nano-spawn": ["nano-spawn@2.0.0", "", {}, "sha512-tacvGzUY5o2D8CBh2rrwxyNojUsZNU2zjNTzKQrkgGJQTbGAfArVWXSKMBokBeeg6C7OLRGUEyoFlYbfeWQIqw=="],
 
-    "nanoid": ["nanoid@5.1.6", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg=="],
+    "nanoid": ["nanoid@5.1.7", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-ua3NDgISf6jdwezAheMOk4mbE1LXjm1DfMUDMuJf4AqxLFK3ccGpgWizwa5YV7Yz9EpXwEaWoRXSb/BnV0t5dQ=="],
 
     "nanostores": ["nanostores@1.1.1", "", {}, "sha512-EYJqS25r2iBeTtGQCHidXl1VfZ1jXM7Q04zXJOrMlxVVmD0ptxJaNux92n1mJ7c5lN3zTq12MhH/8x59nP+qmg=="],
 
@@ -3121,8 +3127,14 @@
 
     "@devicefarmer/adbkit/debug": ["debug@4.3.7", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ=="],
 
+    "@epicenter/filesystem/@types/bun": ["@types/bun@1.3.11", "", { "dependencies": { "bun-types": "1.3.11" } }, "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg=="],
+
     "@epicenter/filesystem/drizzle-orm": ["drizzle-orm@0.38.4", "", { "peerDependencies": { "@aws-sdk/client-rds-data": ">=3", "@cloudflare/workers-types": ">=4", "@electric-sql/pglite": ">=0.2.0", "@libsql/client": ">=0.10.0", "@libsql/client-wasm": ">=0.10.0", "@neondatabase/serverless": ">=0.10.0", "@op-engineering/op-sqlite": ">=2", "@opentelemetry/api": "^1.4.1", "@planetscale/database": ">=1", "@prisma/client": "*", "@tidbcloud/serverless": "*", "@types/better-sqlite3": "*", "@types/pg": "*", "@types/react": ">=18", "@types/sql.js": "*", "@vercel/postgres": ">=0.8.0", "@xata.io/client": "*", "better-sqlite3": ">=7", "bun-types": "*", "expo-sqlite": ">=14.0.0", "knex": "*", "kysely": "*", "mysql2": ">=2", "pg": ">=8", "postgres": ">=3", "react": ">=18", "sql.js": ">=1", "sqlite3": ">=5" }, "optionalPeers": ["@aws-sdk/client-rds-data", "@cloudflare/workers-types", "@electric-sql/pglite", "@libsql/client", "@libsql/client-wasm", "@neondatabase/serverless", "@op-engineering/op-sqlite", "@opentelemetry/api", "@planetscale/database", "@prisma/client", "@tidbcloud/serverless", "@types/better-sqlite3", "@types/pg", "@types/react", "@types/sql.js", "@vercel/postgres", "@xata.io/client", "better-sqlite3", "bun-types", "expo-sqlite", "knex", "kysely", "mysql2", "pg", "postgres", "react", "sql.js", "sqlite3"] }, "sha512-s7/5BpLKO+WJRHspvpqTydxFob8i1vo2rEx4pY6TGY7QSMuUfWUuzaY0DIpXCkgHOo37BaFC+SJQb99dDUXT3Q=="],
 
+    "@epicenter/sync/@types/bun": ["@types/bun@1.3.11", "", { "dependencies": { "bun-types": "1.3.11" } }, "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg=="],
+
+    "@epicenter/workspace/@types/bun": ["@types/bun@1.3.11", "", { "dependencies": { "bun-types": "1.3.11" } }, "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg=="],
+
     "@esbuild-kit/core-utils/esbuild": ["esbuild@0.18.20", "", { "optionalDependencies": { "@esbuild/android-arm": "0.18.20", "@esbuild/android-arm64": "0.18.20", "@esbuild/android-x64": "0.18.20", "@esbuild/darwin-arm64": "0.18.20", "@esbuild/darwin-x64": "0.18.20", "@esbuild/freebsd-arm64": "0.18.20", "@esbuild/freebsd-x64": "0.18.20", "@esbuild/linux-arm": "0.18.20", "@esbuild/linux-arm64": "0.18.20", "@esbuild/linux-ia32": "0.18.20", "@esbuild/linux-loong64": "0.18.20", "@esbuild/linux-mips64el": "0.18.20", "@esbuild/linux-ppc64": "0.18.20", "@esbuild/linux-riscv64": "0.18.20", "@esbuild/linux-s390x": "0.18.20", "@esbuild/linux-x64": "0.18.20", "@esbuild/netbsd-x64": "0.18.20", "@esbuild/openbsd-x64": "0.18.20", "@esbuild/sunos-x64": "0.18.20", "@esbuild/win32-arm64": "0.18.20", "@esbuild/win32-ia32": "0.18.20", "@esbuild/win32-x64": "0.18.20" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA=="],
 
     "@isaacs/cliui/string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],
@@ -3365,6 +3377,12 @@
 
     "@astrojs/check/yargs/yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
 
+    "@epicenter/filesystem/@types/bun/bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
+
+    "@epicenter/sync/@types/bun/bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
+
+    "@epicenter/workspace/@types/bun/bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
+
     "@esbuild-kit/core-utils/esbuild/@esbuild/android-arm": ["@esbuild/android-arm@0.18.20", "", { "os": "android", "cpu": "arm" }, "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw=="],
 
     "@esbuild-kit/core-utils/esbuild/@esbuild/android-arm64": ["@esbuild/android-arm64@0.18.20", "", { "os": "android", "cpu": "arm64" }, "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ=="],
diff --git a/examples/yjs-size-benchmark/tsconfig.json b/examples/yjs-size-benchmark/tsconfig.json
index b19552b5f9..1cb5c64646 100644
--- a/examples/yjs-size-benchmark/tsconfig.json
+++ b/examples/yjs-size-benchmark/tsconfig.json
@@ -3,7 +3,7 @@
 		"target": "ES2022",
 		"useDefineForClassFields": true,
 		"module": "ESNext",
-		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"skipLibCheck": true,
 		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
index b078964720..8e7fc16a50 100644
--- a/packages/cli/tsconfig.json
+++ b/packages/cli/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
 		// Environment setup & latest features
-		"lib": ["ESNext", "DOM"],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"target": "es2022",
 		"module": "Preserve",
 		"moduleDetection": "force",
diff --git a/packages/constants/tsconfig.json b/packages/constants/tsconfig.json
index e555a6febf..9316307845 100644
--- a/packages/constants/tsconfig.json
+++ b/packages/constants/tsconfig.json
@@ -13,7 +13,7 @@
 		"composite": true,
 		"declarationMap": true,
 
-		"lib": ["es2022"]
+		"lib": ["ESNext"]
 	},
 	"include": ["src/**/*"],
 	"exclude": ["node_modules", "dist"]
diff --git a/packages/filesystem/tsconfig.json b/packages/filesystem/tsconfig.json
index 214810dc38..f36a701d20 100644
--- a/packages/filesystem/tsconfig.json
+++ b/packages/filesystem/tsconfig.json
@@ -1,6 +1,6 @@
 {
 	"compilerOptions": {
-		"lib": ["ESNext", "DOM"],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"target": "es2022",
 		"module": "Preserve",
 		"moduleDetection": "force",
diff --git a/packages/svelte-utils/package.json b/packages/svelte-utils/package.json
index 6592fb2d6b..71d8036221 100644
--- a/packages/svelte-utils/package.json
+++ b/packages/svelte-utils/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@epicenter/svelte-utils",
+	"name": "@epicenter/svelte",
 	"version": "0.0.1",
 	"private": true,
 	"type": "module",
@@ -8,7 +8,8 @@
 		".": "./src/index.ts",
 		"./createPersistedState": "./src/createPersistedState.svelte.ts"
 	},
-	"dependencies": {
+"dependencies": {
+		"@epicenter/workspace": "workspace:*",
 		"wellcrafted": "catalog:"
 	},
 	"devDependencies": {
diff --git a/packages/svelte-utils/src/fromKv.svelte.ts b/packages/svelte-utils/src/fromKv.svelte.ts
new file mode 100644
index 0000000000..16982cd775
--- /dev/null
+++ b/packages/svelte-utils/src/fromKv.svelte.ts
@@ -0,0 +1,50 @@
+import type {
+	InferKvValue,
+	KvDefinitions,
+	KvHelper,
+} from '@epicenter/workspace';
+
+/**
+ * Create a reactive binding to a single workspace KV key.
+ *
+ * Mirrors Svelte 5's `fromStore()` pattern—wraps an external data source
+ * into a reactive `{ current }` box. Reading `.current` is reactive (triggers
+ * re-renders). Writing `.current` calls `kv.set()` under the hood.
+ *
+ * The observer fires on both local and remote changes (Yjs CRDT sync).
+ * On delete, falls back to the KV definition's `defaultValue` via `kv.get()`.
+ *
+ * @example
+ * ```typescript
+ * const selectedFolderId = fromKv(workspaceClient.kv, 'selectedFolderId');
+ *
+ * // Read (reactive):
+ * console.log(selectedFolderId.current); // FolderId | null
+ *
+ * // Write (calls kv.set):
+ * selectedFolderId.current = newFolderId;
+ * ```
+ */
+export function fromKv<
+	TDefs extends KvDefinitions,
+	K extends keyof TDefs & string,
+>(
+	kv: KvHelper<TDefs>,
+	key: K,
+): { current: InferKvValue<TDefs[K]>; destroy: () => void } {
+	let value = $state(kv.get(key));
+
+	const unobserve = kv.observe(key, (change) => {
+		value = change.type === 'set' ? change.value : kv.get(key);
+	});
+
+	return {
+		get current() {
+			return value;
+		},
+		set current(newValue: InferKvValue<TDefs[K]>) {
+			kv.set(key, newValue);
+		},
+		destroy: unobserve,
+	};
+}
diff --git a/packages/svelte-utils/src/fromTable.svelte.ts b/packages/svelte-utils/src/fromTable.svelte.ts
new file mode 100644
index 0000000000..71dbd862f7
--- /dev/null
+++ b/packages/svelte-utils/src/fromTable.svelte.ts
@@ -0,0 +1,58 @@
+import type { BaseRow, TableHelper } from '@epicenter/workspace';
+import { SvelteMap } from 'svelte/reactivity';
+
+/**
+ * Create a reactive SvelteMap binding to a workspace table.
+ *
+ * Returns a `SvelteMap<id, Row>` that stays in sync with the underlying
+ * Yjs table via granular per-row updates. Only changed rows trigger
+ * re-renders—not the entire collection.
+ *
+ * Read-only—mutations go through `table.set()`, `table.update()`, etc.
+ * The observer picks up changes from both local writes and remote CRDT sync.
+ *
+ * @example
+ * ```typescript
+ * const entries = fromTable(workspaceClient.tables.entries);
+ *
+ * // Per-item access (reactive):
+ * const entry = entries.get(id);
+ *
+ * // Iterate (reactive):
+ * for (const [id, entry] of entries) { ... }
+ *
+ * // Array access:
+ * const all = [...entries.values()];
+ *
+ * // Derived state:
+ * const filtered = $derived([...entries.values()].filter(e => !e.deletedAt));
+ * ```
+ */
+export function fromTable<TRow extends BaseRow>(
+	table: TableHelper<TRow>,
+): SvelteMap<string, TRow> & { destroy: () => void } {
+	const map = new SvelteMap<string, TRow>();
+
+	// Seed with current valid rows
+	for (const row of table.getAllValid()) {
+		map.set(row.id, row);
+	}
+
+	// Granular updates — only touch changed rows
+	const unobserve = table.observe((changedIds) => {
+		for (const id of changedIds) {
+			const result = table.get(id);
+			switch (result.status) {
+				case 'valid':
+					map.set(id, result.row);
+					break;
+				case 'not_found':
+				case 'invalid':
+					map.delete(id);
+					break;
+			}
+		}
+	});
+
+	return Object.assign(map, { destroy: unobserve });
+}
diff --git a/packages/svelte-utils/src/index.ts b/packages/svelte-utils/src/index.ts
index 096fe24881..9d54d93362 100644
--- a/packages/svelte-utils/src/index.ts
+++ b/packages/svelte-utils/src/index.ts
@@ -1 +1,3 @@
 export { createPersistedState } from './createPersistedState.svelte.js';
+export { fromKv } from './fromKv.svelte.js';
+export { fromTable } from './fromTable.svelte.js';
diff --git a/packages/svelte-utils/tsconfig.json b/packages/svelte-utils/tsconfig.json
index c944f8a218..0fd071958f 100644
--- a/packages/svelte-utils/tsconfig.json
+++ b/packages/svelte-utils/tsconfig.json
@@ -1,15 +1,7 @@
 {
 	"extends": ["../../tsconfig.base.json"],
 	"compilerOptions": {
-		"module": "NodeNext",
-		"moduleResolution": "NodeNext",
-		"outDir": "dist",
-		"sourceMap": true,
 
-		"declaration": true,
-		"composite": true,
-		"declarationMap": true,
-
-		"lib": ["es2022", "dom", "dom.iterable"]
+		"lib": ["ESNext", "DOM", "DOM.Iterable"]
 	}
 }
diff --git a/packages/sync-client/tsconfig.json b/packages/sync-client/tsconfig.json
index 209b6198e7..4fcce9c65a 100644
--- a/packages/sync-client/tsconfig.json
+++ b/packages/sync-client/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"lib": ["ES2022", "DOM"]
+		"lib": ["ESNext", "DOM", "DOM.Iterable"]
 	},
 	"include": ["src/**/*"]
 }
diff --git a/packages/sync/tsconfig.json b/packages/sync/tsconfig.json
index 214810dc38..f36a701d20 100644
--- a/packages/sync/tsconfig.json
+++ b/packages/sync/tsconfig.json
@@ -1,6 +1,6 @@
 {
 	"compilerOptions": {
-		"lib": ["ESNext", "DOM"],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"target": "es2022",
 		"module": "Preserve",
 		"moduleDetection": "force",
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 659a5c1a76..94e8fb80f6 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -11,7 +11,7 @@
 		"composite": true,
 		"declarationMap": true,
 
-		"lib": ["es2022", "dom", "dom.iterable"],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"rootDir": "src",
 		"paths": {
 			"#/*": ["./src/*"]
diff --git a/packages/workspace/tsconfig.json b/packages/workspace/tsconfig.json
index b078964720..8e7fc16a50 100644
--- a/packages/workspace/tsconfig.json
+++ b/packages/workspace/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
 		// Environment setup & latest features
-		"lib": ["ESNext", "DOM"],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"target": "es2022",
 		"module": "Preserve",
 		"moduleDetection": "force",
diff --git a/specs/20260318T234754-rename-svelte-package-and-add-fromKv.md b/specs/20260318T234754-rename-svelte-package-and-add-fromKv.md
new file mode 100644
index 0000000000..48890a022a
--- /dev/null
+++ b/specs/20260318T234754-rename-svelte-package-and-add-fromKv.md
@@ -0,0 +1,271 @@
+# Rename @epicenter/svelte-utils → @epicenter/svelte, add `fromKv` + `fromTable`, standardize tsconfig
+
+## Problem
+
+Two repeating patterns across the codebase:
+
+**1. KV state boilerplate** — `$state(kv.get(key))` + `kv.observe(key, callback)` appears 5 times across 2 apps. Each instance is 6–8 lines of identical shape.
+
+**2. Table state boilerplate** — `$state<Row[]>(readAll())` + `table.observe(() => { items = readAll() })` appears 7+ times across 4 apps. The naive array approach re-fetches ALL rows on every change, even when only one row changed. The table observer already gives `changedIds`—we should do granular O(changed) updates.
+
+**3. tsconfig drift** — Base config is ES2022, but packages inconsistently override with ESNext, mixed casing, and missing DOM.Iterable.
+
+## Solution
+
+### 1. Rename package: `@epicenter/svelte-utils` → `@epicenter/svelte`
+
+- Change `name` in `packages/svelte-utils/package.json`
+- Update all import sites (whispering has 3 files importing from it)
+- Keep directory as `packages/svelte-utils` for now (separate PR for directory rename)
+- Run `bun install` to regenerate lockfile
+
+### 2. Standardize tsconfig to ESNext
+
+**Base**: `lib: ["ESNext"]` (up from `["ES2022"]`)
+
+ESNext is correct for a private monorepo targeting only modern runtimes (Tauri WebView, Chrome extension, Cloudflare Workers). It's a superset of ES2024—includes `Symbol.dispose`, `Promise.withResolvers`, `Object.groupBy`, Set methods, Iterator helpers, and everything else. No manual bumping needed. Pin to a specific version only when publishing public packages.
+
+**Standardize individual packages**: All packages use `ESNext`. Packages needing DOM use `["ESNext", "DOM", "DOM.Iterable"]`. TS lib arrays don't merge on `extends`—they replace—so each package needing DOM must list the full set.
+
+### 3. Add `fromKv` utility
+
+**File**: `packages/svelte-utils/src/fromKv.svelte.ts`
+
+```typescript
+import type { InferKvValue, KvDefinitions, KvHelper } from '@epicenter/workspace';
+
+/**
+ * Create a reactive binding to a single workspace KV key.
+ *
+ * Mirrors Svelte 5's `fromStore()` pattern—wraps an external data source
+ * into a reactive `{ current }` box. Reading `.current` is reactive (triggers
+ * re-renders). Writing `.current` calls `kv.set()` under the hood.
+ *
+ * The observer fires on both local and remote changes (Yjs CRDT sync).
+ * On delete, falls back to the KV definition's `defaultValue` via `kv.get()`.
+ *
+ * @example
+ * ```typescript
+ * const selectedFolderId = fromKv(workspaceClient.kv, 'selectedFolderId');
+ *
+ * // Read (reactive):
+ * console.log(selectedFolderId.current); // FolderId | null
+ *
+ * // Write (calls kv.set):
+ * selectedFolderId.current = newFolderId;
+ * ```
+ */
+export function fromKv<
+  TDefs extends KvDefinitions,
+  K extends keyof TDefs & string,
+>(
+  kv: KvHelper<TDefs>,
+  key: K,
+): { current: InferKvValue<TDefs[K]>; destroy: () => void } {
+  let value = $state(kv.get(key));
+
+  const unobserve = kv.observe(key, (change) => {
+    value = change.type === 'set' ? change.value : kv.get(key);
+  });
+
+  return {
+    get current() {
+      return value;
+    },
+    set current(newValue: InferKvValue<TDefs[K]>) {
+      kv.set(key, newValue);
+    },
+    destroy: unobserve,
+  };
+}
+```
+
+### 4. Add `fromTable` utility
+
+**File**: `packages/svelte-utils/src/fromTable.svelte.ts`
+
+Uses a `SvelteMap` for granular per-row reactivity. The table observer gives `changedIds`, so we update only the rows that changed—O(changed) not O(all).
+
+```typescript
+import type { BaseRow, TableHelper } from '@epicenter/workspace';
+import { SvelteMap } from 'svelte/reactivity';
+
+/**
+ * Create a reactive SvelteMap binding to a workspace table.
+ *
+ * Returns a `SvelteMap<id, Row>` that stays in sync with the underlying
+ * Yjs table via granular per-row updates. Only changed rows trigger
+ * re-renders—not the entire collection.
+ *
+ * Read-only—mutations go through `table.set()`, `table.update()`, etc.
+ * The observer picks up changes from both local writes and remote CRDT sync.
+ *
+ * @example
+ * ```typescript
+ * const entries = fromTable(workspaceClient.tables.entries);
+ *
+ * // Per-item access (reactive):
+ * const entry = entries.get(id);
+ *
+ * // Iterate (reactive):
+ * for (const [id, entry] of entries) { ... }
+ *
+ * // Array access:
+ * const all = [...entries.values()];
+ *
+ * // Derived state:
+ * const filtered = $derived([...entries.values()].filter(e => !e.deletedAt));
+ * ```
+ */
+export function fromTable<TRow extends BaseRow>(
+  table: TableHelper<TRow>,
+): SvelteMap<string, TRow> & { destroy: () => void } {
+  const map = new SvelteMap<string, TRow>();
+
+  // Seed with current valid rows
+  for (const row of table.getAllValid()) {
+    map.set(row.id, row);
+  }
+
+  // Granular updates — only touch changed rows
+  const unobserve = table.observe((changedIds) => {
+    for (const id of changedIds) {
+      const result = table.get(id);
+      switch (result.status) {
+        case 'valid':
+          map.set(id, result.row);
+          break;
+        case 'not_found':
+        case 'invalid':
+          map.delete(id);
+          break;
+      }
+    }
+  });
+
+  return Object.assign(map, { destroy: unobserve });
+}
+```
+
+### 5. Migrate honeycrisp `view.svelte.ts` (fromKv)
+
+**Before** (18+ lines): 3 `$state` + 3 `kv.observe` pairs
+**After** (3 lines): 3 `fromKv` calls
+
+All reads: `selectedFolderId` → `selectedFolderId.current`
+All writes: `workspaceClient.kv.set('selectedFolderId', v)` → `selectedFolderId.current = v`
+
+### 6. Migrate fuji `+page.svelte` (fromKv + fromTable)
+
+- KV observers (`selectedEntryId`, `viewMode`) → `fromKv` at script top-level
+- Table observer (`entries`) → `fromTable` at script top-level
+- Remove the `$effect` wrapper (observers move out of effect scope)
+- Derived state adapts: `entries.find(...)` → `entries.get(id)` or `[...entries.values()].filter(...)`
+
+### 7. Migrate honeycrisp notes + folders (fromTable)
+
+- `notes.svelte.ts`: Replace `let allNotes = $state(readNotes()); table.observe(() => { allNotes = readNotes() })` → `fromTable(tables.notes)`
+- `folders.svelte.ts`: Same pattern → `fromTable(tables.folders)`
+- Derived state (`notes`, `deletedNotes`, `noteCounts`) adapts to read from SvelteMap `.values()`
+
+### 8. Migrate tab-manager simple observers (fromTable)
+
+- `saved-tab-state.svelte.ts`: `let tabs = $state(readAll()); table.observe(...)` → `fromTable(tables.savedTabs)`
+- `bookmark-state.svelte.ts`: Same pattern → `fromTable(tables.bookmarks)`
+- `tool-trust.svelte.ts`: Already uses SvelteMap, but with inefficient clear+repopulate. `fromTable` gives granular updates.
+
+## Design decisions
+
+### Why `from*` (not `use*` or `create*`)
+Svelte 5's own `fromStore()` establishes the convention: convert an external data source into reactive Svelte state. The `from*` family scales: `fromKv`, `fromTable`, future `fromKvAll`.
+
+### Why `.current` on `fromKv` but not `fromTable`
+`fromKv` wraps a scalar value → needs a box (`{ current }`). `fromTable` wraps a collection → IS a collection (SvelteMap). Same distinction as `$state(value)` vs `SvelteMap`.
+
+### Why `destroy` (not `dispose` or `Symbol.dispose`)
+- `destroy` matches the workspace codebase convention (extensions, WorkspaceClient all use `destroy`)
+- `Symbol.dispose` requires `using` syntax, but `using` is block-scoped (doesn't match SPA-lifetime factory usage) and Svelte's `<script>` blocks don't support it
+- Cost is one line per utility. Callers who don't need cleanup ignore it.
+
+### Why single entry point (no subpath exports)
+With 3 utilities (`fromKv`, `fromTable`, `createPersistedState`), one entry point keeps imports simple. Revisit at ~10 exports.
+
+### Why ESNext (not ES2024)
+- Private monorepo targeting only modern runtimes (Tauri, Chrome extension, Cloudflare Workers)
+- ESNext ⊃ ES2024—includes everything ES2024 has plus newer proposals
+- No manual bumping needed; TypeScript auto-includes latest features
+- Pin to a specific version only when publishing public packages
+- Several packages already use ESNext—standardizing reduces inconsistency
+
+### Why SvelteMap for tables (not array wholesale replacement)
+- Table observer gives `changedIds`—do O(changed) updates, not O(all) re-fetches
+- SvelteMap provides per-key reactivity—only components reading changed rows re-render
+- Matches existing pattern in browser-state, chat-state, and tool-trust
+- Strictly better than array replacement in all cases
+
+## Todo
+
+### Phase 1 — Foundation
+- [x] Rename package in `packages/svelte-utils/package.json`: `@epicenter/svelte-utils` → `@epicenter/svelte`
+- [x] Update whispering imports: `@epicenter/svelte-utils` → `@epicenter/svelte` (3 files)
+- [x] Bump `tsconfig.base.json` lib from `["ES2022"]` to `["ESNext"]`
+- [x] Standardize all package/app tsconfigs: replace mixed `ESNext`/`es2022` lib overrides with consistent `ESNext` (12 files)
+- [x] Add `@epicenter/workspace` as a dependency to `@epicenter/svelte` (for types)
+- [x] Create `packages/svelte-utils/src/fromKv.svelte.ts`
+- [x] Create `packages/svelte-utils/src/fromTable.svelte.ts`
+- [x] Export both from `packages/svelte-utils/src/index.ts`
+
+### Phase 2 — First migrations (honeycrisp + fuji)
+- [x] Add `@epicenter/svelte` as dependency to honeycrisp `package.json`
+- [x] Migrate honeycrisp `view.svelte.ts`: 3 KV state+observer pairs → 3 `fromKv` calls
+- [x] Add `@epicenter/svelte` as dependency to fuji `package.json`
+- [x] Migrate fuji `+page.svelte`: 2 KV observers → `fromKv`, 1 table observer → `fromTable`
+
+### Phase 3 — Full rollout (remaining simple observers)
+- [x] Migrate honeycrisp `notes.svelte.ts`: array+observe → `fromTable`
+- [x] Migrate honeycrisp `folders.svelte.ts`: array+observe → `fromTable`
+- [x] Migrate tab-manager `saved-tab-state.svelte.ts`: array+observe → `fromTable`
+- [x] Migrate tab-manager `bookmark-state.svelte.ts`: array+observe → `fromTable`
+- [x] Migrate tab-manager `tool-trust.svelte.ts`: clear+repopulate SvelteMap → `fromTable`
+
+### Verify
+- [x] Run `bun install` to regenerate lockfile
+- [x] Typecheck all affected packages (all errors are pre-existing: workspace mdast/NumberKeysOf, Editor Level type, defineKv arity, YText/YXmlFragment, Record generic)
+
+### Future work (separate specs)
+- Rename directory `packages/svelte-utils` → `packages/svelte`
+- Migrate tab-manager browser-state (complex nested SvelteMap — custom logic, doesn't fit `fromTable`)
+- Migrate tab-manager chat-state (multi-table reconciliation — custom logic)
+- Migrate opensidian fs-state (version counter + requestAnimationFrame batching — different pattern)
+- `fromKvAll` utility (SvelteMap over all KV keys, replaces whispering workspace-settings pattern)
+- Add `Symbol.dispose` alongside `destroy` when Svelte script blocks support `using`
+
+## Review
+
+### Changes made
+
+**Phase 1 — Foundation:**
+- Renamed `@epicenter/svelte-utils` → `@epicenter/svelte` in `packages/svelte-utils/package.json`
+- Updated 3 whispering source files + `apps/whispering/package.json` to use new package name
+- Bumped `tsconfig.base.json` lib from `["ES2022"]` → `["ESNext"]`
+- Standardized 12 tsconfig lib overrides to `["ESNext"]` or `["ESNext", "DOM", "DOM.Iterable"]`
+- Added `@epicenter/workspace` as dependency to `@epicenter/svelte`
+- Created `fromKv.svelte.ts` and `fromTable.svelte.ts` with full JSDoc, exported from `index.ts`
+- Removed `NodeNext` module/moduleResolution from svelte-utils tsconfig (incompatible with workspace's bundler resolution)
+
+**Phase 2 — First migrations:**
+- Added `@epicenter/svelte` dep to honeycrisp + fuji `package.json`
+- Migrated honeycrisp `view.svelte.ts`: 3 `$state` + 3 `kv.observe` → 3 `fromKv` calls. Updated all `.current` reads/writes.
+- Migrated fuji `+page.svelte`: removed `$effect` wrapper, replaced 2 KV observers with `fromKv`, 1 table observer with `fromTable`. Updated derived state to use SvelteMap `.get()` and `[...values()]`.
+
+**Phase 3 — Full rollout:**
+- Migrated honeycrisp `notes.svelte.ts`: replaced `allNotes` array + observe with `fromTable`. Derived `notes`, `deletedNotes`, `noteCounts` now read from `[...allNotesMap.values()]`.
+- Migrated honeycrisp `folders.svelte.ts`: replaced `folders` array + observe with `fromTable`.
+- Migrated tab-manager `saved-tab-state.svelte.ts`: replaced `tabs` array + observe with `fromTable`.
+- Migrated tab-manager `bookmark-state.svelte.ts`: replaced `bookmarks` array + observe with `fromTable`.
+- Migrated tab-manager `tool-trust.svelte.ts`: replaced inefficient clear+repopulate SvelteMap with `fromTable`. Trust values accessed via `.trust` property on the row.
+
+**Verification:**
+- `bun install` succeeded (tab-manager `wxt prepare` postinstall fails due to pre-existing nypm/tinyexec issue)
+- All migrated files typecheck clean — zero new errors introduced
+- Pre-existing errors in workspace (mdast, NumberKeysOf), Editor.svelte (Level), fuji workspace.ts (defineKv arity), UI (Record generic)
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 0b39f0fbce..86752f6025 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -12,8 +12,8 @@
 
 		/* Language and Environment */
 		"target": "ES2022" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-		"lib": [
-			"ES2022"
+"lib": [
+			"ESNext"
 		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
 		// "jsx": "preserve",                                /* Specify what JSX code is generated. */
 		// "libReplacement": true,                           /* Enable lib replacement. */

From f5ba4c11548f6596adc089f3ab88e91d12c45fbc Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:07:09 -0700
Subject: [PATCH 07/26] refactor: replace spread-to-array with iterator helpers
 (.toArray(), .filter())
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TC39 Iterator Helpers (Stage 4) are fully typed in TS 5.9 via
lib.esnext.iterator.d.ts. MapIterator extends IteratorObject which
provides .filter(), .map(), .find(), .toArray(), .some(), .every(),
.reduce(), .take(), .drop(), .flatMap() — no spread needed.

Replaces all [...map.values()] patterns with map.values().toArray().
Sort still requires materialization (.toArray().sort()) since sort
needs random access.

Updated svelte skill with iterator helpers guidance.
---
 .agents/skills/svelte/SKILL.md                | 48 ++++++++++++++-----
 apps/fuji/src/routes/+page.svelte             |  2 +-
 .../src/lib/state/folders.svelte.ts           |  2 +-
 apps/honeycrisp/src/lib/state/notes.svelte.ts |  2 +-
 .../src/lib/state/bookmark-state.svelte.ts    |  4 +-
 .../src/lib/state/saved-tab-state.svelte.ts   |  6 +--
 6 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/.agents/skills/svelte/SKILL.md b/.agents/skills/svelte/SKILL.md
index a8a394b43c..3ff4c807b1 100644
--- a/.agents/skills/svelte/SKILL.md
+++ b/.agents/skills/svelte/SKILL.md
@@ -76,7 +76,7 @@ See `docs/articles/record-lookup-over-nested-ternaries.md` for rationale.
 
 # SvelteMap to Array: Always Cache with `$derived`
 
-When exposing `SvelteMap` contents as arrays (from `fromTable`, `fromKv`, or raw `SvelteMap`), always wrap the conversion in `$derived`. Never spread inside a plain getter — it re-creates the array on every access, even if the map hasn't changed.
+When exposing `SvelteMap` contents as arrays (from `fromTable`, `fromKv`, or raw `SvelteMap`), always wrap the conversion in `$derived`. Never spread inside a plain getter—it re-creates the array on every access, even if the map hasn't changed.
 
 `$derived` caches the result and only recomputes when the map actually changes (pull-based reactivity).
 
@@ -87,7 +87,7 @@ get folders() {
 }
 
 // Good: cached — only recomputes when foldersMap changes
-const folders = $derived([...foldersMap.values()]);
+const folders = $derived(foldersMap.values().toArray());
 // ...
 return {
 	get folders() {
@@ -96,28 +96,52 @@ return {
 };
 ```
 
-With chained operations (filter, sort), the entire pipeline is cached:
+## Use Iterator Helpers, Not Spread
+
+TypeScript 5.9+ with `lib: ["ESNext"]` includes **TC39 Iterator Helpers** (Stage 4, shipped in all modern runtimes). `MapIterator` extends `IteratorObject`, which has `.filter()`, `.map()`, `.find()`, `.toArray()`, `.some()`, `.every()`, `.reduce()`, `.take()`, `.drop()`, `.flatMap()`, and `.forEach()` built in.
+
+**Always prefer `.toArray()` over `[...spread]`** for materializing iterators. Use `.filter()` and `.find()` directly on the iterator when possible—they're lazy and avoid intermediate array allocations.
+
+```typescript
+// Bad: spread to materialize
+const all = [...map.values()];
+const active = [...map.values()].filter((n) => !n.deleted);
+
+// Good: iterator helpers
+const all = map.values().toArray();
+const active = map.values().filter((n) => !n.deleted).toArray();
+```
+
+**`.sort()` is the exception**—it requires random access and is not on `IteratorObject`. Materialize first:
+
+```typescript
+// sort needs an array, so toArray() first
+const sorted = $derived(map.values().toArray().sort((a, b) => b.date - a.date));
+```
+
+With chained operations (filter, sort), the entire pipeline is cached via `$derived`:
 
 ```typescript
-// Good: sort + filter cached together
-const tabs = $derived([...tabsMap.values()].sort((a, b) => b.savedAt - a.savedAt));
+const tabs = $derived(tabsMap.values().toArray().sort((a, b) => b.savedAt - a.savedAt));
 const activeNotes = $derived(allNotes.filter((n) => n.deletedAt === undefined));
 ```
 
 ## When `.values()` Alone Suffices
 
-`map.values()` returns a `MapIterator` — single-use, no `.filter()`, `.find()`, `.sort()`, `.length`. Use the spread only when you need array methods:
+`map.values()` returns a `MapIterator`—an `IteratorObject` with `.filter()`, `.find()`, `.toArray()` etc. No materialization needed for:
 
 | Need | Pattern |
 |---|---|
-| Just iterating in `{#each}` | `{#each map.values() as item}` or `{#each map as [id, item] (id)}` — no spread needed |
-| Chaining array methods | `$derived([...map.values()].filter(...))` — spread required |
-| Exposing from factory getter | `$derived([...map.values()])` — consumers expect `T[]` with array methods |
-| One-time snapshot in action | `const all = [...map.values()];` — necessary, not wasteful |
+| Just iterating in `{#each}` | `{#each map.values() as item}` or `{#each map as [id, item] (id)}` |
+| Finding a single item | `map.values().find(v => v.id === id)` |
+| Checking existence | `map.values().some(v => v.active)` |
+| Chaining filter + toArray | `map.values().filter(fn).toArray()` |
+| Sorting (needs array) | `map.values().toArray().sort(fn)` |
+| One-time snapshot in action | `map.values().toArray()` |
 
 ## Template Props
 
-For component props expecting `T[]`, derive once in the script block — never spread in the template:
+For component props expecting `T[]`, derive once in the script block—never materialize in the template:
 
 ```svelte
 <!-- Bad: re-creates array on every render -->
@@ -125,7 +149,7 @@ For component props expecting `T[]`, derive once in the script block — never s
 
 <!-- Good: cached via $derived -->
 <script>
-	const entriesArray = $derived([...entries.values()]);
+	const entriesArray = $derived(entries.values().toArray());
 </script>
 <FujiSidebar entries={entriesArray} />
 ```
diff --git a/apps/fuji/src/routes/+page.svelte b/apps/fuji/src/routes/+page.svelte
index b6f457ea0a..c0c9ced3d6 100644
--- a/apps/fuji/src/routes/+page.svelte
+++ b/apps/fuji/src/routes/+page.svelte
@@ -16,7 +16,7 @@
 	// ─── Reactive State ────────────────────────────────────────────────────────────
 
 	const entries = fromTable(workspaceClient.tables.entries);
-	const entriesArray = $derived([...entries.values()]);
+	const entriesArray = $derived(entries.values().toArray());
 	const selectedEntryId = fromKv(workspaceClient.kv, 'selectedEntryId');
 	const viewMode = fromKv(workspaceClient.kv, 'viewMode');
 	let currentYText = $state<Y.Text | null>(null);
diff --git a/apps/honeycrisp/src/lib/state/folders.svelte.ts b/apps/honeycrisp/src/lib/state/folders.svelte.ts
index 368752b09a..8eca9d5905 100644
--- a/apps/honeycrisp/src/lib/state/folders.svelte.ts
+++ b/apps/honeycrisp/src/lib/state/folders.svelte.ts
@@ -30,7 +30,7 @@ function createFoldersState() {
 
 	const foldersMap = fromTable(workspaceClient.tables.folders);
 
-	const folders = $derived([...foldersMap.values()]);
+	const folders = $derived(foldersMap.values().toArray());
 
 	// ─── Public API ──────────────────────────────────────────────────────
 
diff --git a/apps/honeycrisp/src/lib/state/notes.svelte.ts b/apps/honeycrisp/src/lib/state/notes.svelte.ts
index d52491b7ce..0cb41e0716 100644
--- a/apps/honeycrisp/src/lib/state/notes.svelte.ts
+++ b/apps/honeycrisp/src/lib/state/notes.svelte.ts
@@ -36,7 +36,7 @@ function createNotesState() {
 	const allNotesMap = fromTable(workspaceClient.tables.notes);
 
 	/** All valid notes (including deleted). Cached — only recomputes when table changes. */
-	const allNotes = $derived([...allNotesMap.values()]);
+	const allNotes = $derived(allNotesMap.values().toArray());
 
 	// ─── Derived State ───────────────────────────────────────────────────
 
diff --git a/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts b/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts
index 10b0bf9a7b..124d24e411 100644
--- a/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts
+++ b/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts
@@ -40,7 +40,7 @@ function createBookmarkState() {
 	const bookmarksMap = fromTable(workspaceClient.tables.bookmarks);
 
 	/** All bookmarks, sorted by most recently created first. Cached via $derived. */
-	const bookmarks = $derived([...bookmarksMap.values()].sort((a, b) => b.createdAt - a.createdAt));
+	const bookmarks = $derived(bookmarksMap.values().toArray().sort((a, b) => b.createdAt - a.createdAt));
 
 	return {
 		get bookmarks() {
@@ -93,7 +93,7 @@ function createBookmarkState() {
 
 			/** Delete all bookmarks. Wrapped in a Y.Doc transaction. */
 			removeAll() {
-				const all = [...bookmarksMap.values()];
+				const all = bookmarksMap.values().toArray();
 				if (!all.length) return;
 
 				workspaceClient.batch(() => {
diff --git a/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts b/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts
index b56be1d367..5571b6a420 100644
--- a/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts
+++ b/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts
@@ -45,7 +45,7 @@ function createSavedTabState() {
 	const tabsMap = fromTable(workspaceClient.tables.savedTabs);
 
 	/** All saved tabs, sorted by most recently saved first. Cached via $derived. */
-	const tabs = $derived([...tabsMap.values()].sort((a, b) => b.savedAt - a.savedAt));
+	const tabs = $derived(tabsMap.values().toArray().sort((a, b) => b.savedAt - a.savedAt));
 
 	return {
 		get tabs() {
@@ -112,7 +112,7 @@ function createSavedTabState() {
 			 *    collapses N observer callbacks into one.
 			 */
 			async restoreAll() {
-				const all = [...tabsMap.values()];
+				const all = tabsMap.values().toArray();
 				if (!all.length) return;
 
 				// Fire all tab creations without awaiting each one individually.
@@ -147,7 +147,7 @@ function createSavedTabState() {
 			 * (not N times for N tabs).
 			 */
 			removeAll() {
-				const all = [...tabsMap.values()];
+				const all = tabsMap.values().toArray();
 				if (!all.length) return;
 
 				workspaceClient.batch(() => {

From d1aefd7244b173fa94815d6e6cbebacafddc870b Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:11:20 -0700
Subject: [PATCH 08/26] docs(skills): reorganize iterator helpers into TS
 skill, add reactive table state pattern to Svelte skill
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Iterator helpers (.toArray(), .filter(), .find() on IteratorObject) are
a TS/JS language feature — moved to typescript skill where it belongs.

Svelte skill now documents the fromTable → $derived → getter naming
convention: {name}Map → {name} → get {name}(). Consolidated from ~80
lines of mixed TS/Svelte content into ~45 focused lines.
---
 .agents/skills/svelte/SKILL.md     | 63 +++++++-----------------------
 .agents/skills/typescript/SKILL.md | 17 ++++++++
 2 files changed, 32 insertions(+), 48 deletions(-)

diff --git a/.agents/skills/svelte/SKILL.md b/.agents/skills/svelte/SKILL.md
index 3ff4c807b1..8fe7e9f0ea 100644
--- a/.agents/skills/svelte/SKILL.md
+++ b/.agents/skills/svelte/SKILL.md
@@ -74,21 +74,18 @@ Reserve `$derived.by()` for multi-statement logic where you genuinely need a fun
 
 See `docs/articles/record-lookup-over-nested-ternaries.md` for rationale.
 
-# SvelteMap to Array: Always Cache with `$derived`
+# Reactive Table State Pattern
 
-When exposing `SvelteMap` contents as arrays (from `fromTable`, `fromKv`, or raw `SvelteMap`), always wrap the conversion in `$derived`. Never spread inside a plain getter—it re-creates the array on every access, even if the map hasn't changed.
-
-`$derived` caches the result and only recomputes when the map actually changes (pull-based reactivity).
+When a factory function exposes workspace table data via `fromTable`, follow this three-layer convention:
 
 ```typescript
-// Bad: creates a new array on EVERY getter access
-get folders() {
-	return [...foldersMap.values()];
-}
+// 1. Map — reactive source (private, suffixed with Map)
+const foldersMap = fromTable(workspaceClient.tables.folders);
 
-// Good: cached — only recomputes when foldersMap changes
+// 2. Derived array — cached materialization (private, no suffix)
 const folders = $derived(foldersMap.values().toArray());
-// ...
+
+// 3. Getter — public API (matches the derived name)
 return {
 	get folders() {
 		return folders;
@@ -96,56 +93,26 @@ return {
 };
 ```
 
-## Use Iterator Helpers, Not Spread
-
-TypeScript 5.9+ with `lib: ["ESNext"]` includes **TC39 Iterator Helpers** (Stage 4, shipped in all modern runtimes). `MapIterator` extends `IteratorObject`, which has `.filter()`, `.map()`, `.find()`, `.toArray()`, `.some()`, `.every()`, `.reduce()`, `.take()`, `.drop()`, `.flatMap()`, and `.forEach()` built in.
-
-**Always prefer `.toArray()` over `[...spread]`** for materializing iterators. Use `.filter()` and `.find()` directly on the iterator when possible—they're lazy and avoid intermediate array allocations.
-
-```typescript
-// Bad: spread to materialize
-const all = [...map.values()];
-const active = [...map.values()].filter((n) => !n.deleted);
-
-// Good: iterator helpers
-const all = map.values().toArray();
-const active = map.values().filter((n) => !n.deleted).toArray();
-```
-
-**`.sort()` is the exception**—it requires random access and is not on `IteratorObject`. Materialize first:
+Naming: `{name}Map` (private source) → `{name}` (cached derived) → `get {name}()` (public getter).
 
-```typescript
-// sort needs an array, so toArray() first
-const sorted = $derived(map.values().toArray().sort((a, b) => b.date - a.date));
-```
+### With Sort or Filter
 
-With chained operations (filter, sort), the entire pipeline is cached via `$derived`:
+Chain operations inside `$derived` — the entire pipeline is cached:
 
 ```typescript
 const tabs = $derived(tabsMap.values().toArray().sort((a, b) => b.savedAt - a.savedAt));
-const activeNotes = $derived(allNotes.filter((n) => n.deletedAt === undefined));
+const notes = $derived(allNotes.filter((n) => n.deletedAt === undefined));
 ```
 
-## When `.values()` Alone Suffices
-
-`map.values()` returns a `MapIterator`—an `IteratorObject` with `.filter()`, `.find()`, `.toArray()` etc. No materialization needed for:
-
-| Need | Pattern |
-|---|---|
-| Just iterating in `{#each}` | `{#each map.values() as item}` or `{#each map as [id, item] (id)}` |
-| Finding a single item | `map.values().find(v => v.id === id)` |
-| Checking existence | `map.values().some(v => v.active)` |
-| Chaining filter + toArray | `map.values().filter(fn).toArray()` |
-| Sorting (needs array) | `map.values().toArray().sort(fn)` |
-| One-time snapshot in action | `map.values().toArray()` |
+See the `typescript` skill for iterator helpers (`.toArray()`, `.filter()`, `.find()` on `IteratorObject`).
 
-## Template Props
+### Template Props
 
-For component props expecting `T[]`, derive once in the script block—never materialize in the template:
+For component props expecting `T[]`, derive in the script block — never materialize in the template:
 
 ```svelte
 <!-- Bad: re-creates array on every render -->
-<FujiSidebar entries={[...entries.values()]} />
+<FujiSidebar entries={entries.values().toArray()} />
 
 <!-- Good: cached via $derived -->
 <script>
diff --git a/.agents/skills/typescript/SKILL.md b/.agents/skills/typescript/SKILL.md
index deeacec3cb..b33c05d9ba 100644
--- a/.agents/skills/typescript/SKILL.md
+++ b/.agents/skills/typescript/SKILL.md
@@ -165,6 +165,23 @@ When the record is used once, inline it. When it's shared or has 5+ entries, ext
 
 See `docs/articles/record-lookup-over-nested-ternaries.md` for rationale.
 
+## Iterator Helpers Over Spread
+
+TS 5.9+ with `lib: ["ESNext"]` includes TC39 Iterator Helpers (Stage 4). `MapIterator`, `SetIterator`, and `ArrayIterator` all extend `IteratorObject`, which provides `.filter()`, `.map()`, `.find()`, `.toArray()`, `.some()`, `.every()`, `.reduce()`, `.take()`, `.drop()`, `.flatMap()`, and `.forEach()`.
+
+**Prefer `.toArray()` over `[...spread]`** for materializing iterators:
+
+```typescript
+// Bad
+const all = [...map.values()];
+const active = [...map.values()].filter((n) => !n.deleted);
+
+// Good
+const all = map.values().toArray();
+const active = map.values().filter((n) => !n.deleted).toArray();
+```
+
+`.sort()` is not on `IteratorObject` (requires random access). Materialize first: `map.values().toArray().sort(fn)`.
 # Type Co-location Principles
 
 ## Never Use Generic Type Buckets

From d88ed99dd88f6625b8fdfccdc433986f67f9f9a8 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:14:04 -0700
Subject: [PATCH 09/26] docs(skills): add CRUD and observation API to
 workspace-api skill

The workspace-api skill covered schema definition thoroughly but said
nothing about reading, writing, or observing data. Added table CRUD
(get, getAllValid, set, update, delete, has, count), KV CRUD (get, set),
and observation patterns. Cross-references svelte skill for fromTable/
fromKv reactive wrappers.
---
 .agents/skills/workspace-api/SKILL.md | 48 +++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/.agents/skills/workspace-api/SKILL.md b/.agents/skills/workspace-api/SKILL.md
index 324107a5ef..d4bba66e12 100644
--- a/.agents/skills/workspace-api/SKILL.md
+++ b/.agents/skills/workspace-api/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: workspace-api
-description: Workspace API patterns for defineTable, defineKv, versioning, and migrations. Use when defining workspace schemas, adding versions to existing tables, or writing migration functions.
+description: Workspace API patterns for defineTable, defineKv, versioning, migrations, and data access (CRUD + observation). Use when defining workspace schemas, reading/writing table data, observing changes, or writing migration functions.
 metadata:
   author: epicenter
   version: '4.0'
@@ -10,13 +10,14 @@ metadata:
 
 Type-safe schema definitions for tables and KV stores.
 
-> **Related Skills**: See `yjs` for Yjs CRDT patterns and shared types.
+> **Related Skills**: See `yjs` for Yjs CRDT patterns and shared types. See `svelte` for reactive wrappers (`fromTable`, `fromKv`).
 
 ## When to Apply This Skill
 
 - Defining a new table or KV store with `defineTable()` or `defineKv()`
 - Adding a new version to an existing table definition
 - Writing table migration functions
+- Reading, writing, or observing table/KV data
 
 ## Tables
 
@@ -275,6 +276,49 @@ return { ...row, views: 0, _v: 2 }; // Works — contextual narrowing
 return { ...row, views: 0, _v: 2 as const }; // Also works — redundant
 ```
 
+## Reading & Observing Data
+
+### Table CRUD
+
+```typescript
+table.get(id)          // { status: 'valid', row } | { status: 'not_found' } | { status: 'invalid' }
+table.getAllValid()     // T[] — all rows that pass schema validation
+table.set(row)         // upsert full row (replaces entire row)
+table.update(id, partial) // merge partial fields into existing row
+table.delete(id)       // remove row
+table.has(id)          // boolean
+table.count()          // number
+```
+
+### KV CRUD
+
+```typescript
+kv.get('key')          // returns value (or default from defineKv)
+kv.set('key', value)   // set value
+```
+
+### Observation
+
+Tables and KV stores support change observation for reactive updates:
+
+```typescript
+// Table — callback receives changed row IDs per Y.Transaction
+const unsub = tables.posts.observe((changedIds) => {
+	for (const id of changedIds) {
+		const result = tables.posts.get(id);
+		// ...
+	}
+});
+
+// KV — per-key observation
+const unsub = kv.observe('theme', (change) => {
+	if (change.type === 'set') { /* change.value */ }
+	if (change.type === 'delete') { /* fell back to default */ }
+});
+```
+
+**In Svelte apps**, prefer `fromTable`/`fromKv` from `@epicenter/svelte` instead of raw observers. See the `svelte` skill for the reactive table state pattern.
+
 ## Document Content (Per-Row Y.Docs)
 
 Tables with `.withDocument()` create a content Y.Doc per row. Content is stored using a **timeline model**: a `Y.Array('timeline')` inside the Y.Doc, where each entry is a typed `Y.Map` supporting text, richtext, and sheet modes.

From dbe3bc7e5a4e8fb7c877b8bc927500b1d961f944 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:18:34 -0700
Subject: [PATCH 10/26] refactor(tsconfig): clean up base config, add
 base.dom.json for browser packages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Strip tsc --init boilerplate from base (115→32 lines). Update target
to ESNext. Add tsconfig.base.dom.json extending base with DOM and
DOM.Iterable libs for browser-only packages.
---
 tsconfig.base.dom.json |   6 ++
 tsconfig.base.json     | 138 ++++++++---------------------------------
 2 files changed, 33 insertions(+), 111 deletions(-)
 create mode 100644 tsconfig.base.dom.json

diff --git a/tsconfig.base.dom.json b/tsconfig.base.dom.json
new file mode 100644
index 0000000000..d6d06f52c1
--- /dev/null
+++ b/tsconfig.base.dom.json
@@ -0,0 +1,6 @@
+{
+	"extends": "./tsconfig.base.json",
+	"compilerOptions": {
+		"lib": ["ESNext", "DOM", "DOM.Iterable"]
+	}
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 86752f6025..b707cf427f 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -1,115 +1,31 @@
 {
 	"compilerOptions": {
-		/* Visit https://aka.ms/tsconfig to read more about this file */
-
-		/* Projects */
-		// "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-		// "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
-		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
-		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
-		/* Language and Environment */
-		"target": "ES2022" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-"lib": [
-			"ESNext"
-		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-		// "jsx": "preserve",                                /* Specify what JSX code is generated. */
-		// "libReplacement": true,                           /* Enable lib replacement. */
-		// "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
-		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
-		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
-		// "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
-		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-		"moduleDetection": "force" /* Control what method is used to detect module-format JS files. */,
-
-		/* Modules */
-		"module": "ESNext" /* Specify what module code is generated. */,
-		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
-		"moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
-		// "baseUrl": "." /* Specify the base directory to resolve non-relative module names. */,
-		// "paths": {} /* Specify a set of entries that re-map imports to additional lookup locations. */,
-		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-		// "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-		// "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-		// "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-		// "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
-		// "rewriteRelativeImportExtensions": true,          /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
-		"resolvePackageJsonExports": true /* Use the package.json 'exports' field when resolving package imports. */,
-		// "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
-		// "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
-		// "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
-		// "resolveJsonModule": true,                        /* Enable importing .json files. */
-		// "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
-		// "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
-
-		/* JavaScript Support */
-		"allowJs": false /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
-		"checkJs": false /* Enable error reporting in type-checked JavaScript files. */,
-		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
-
-		/* Emit */
-		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-		// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-		"noEmit": true /* Disable emitting files from a compilation. */,
-		// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-		// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
-		// "removeComments": true,                           /* Disable emitting comments. */
-		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
-		// "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
-		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
-		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-		// "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-
-		/* Interop Constraints */
-		"isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
-		"verbatimModuleSyntax": true /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */,
-		// "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
-		// "erasableSyntaxOnly": true,                       /* Do not allow runtime constructs that are not part of ECMAScript. */
-		// "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
-		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
-
-		/* Type Checking */
-		"strict": true /* Enable all strict type-checking options. */,
-		// "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-		// "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
-		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-		// "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
-		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-		// "strictBuiltinIteratorReturn": true,              /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
-		// "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
-		"useUnknownInCatchVariables": true /* Default catch clause variables as 'unknown' instead of 'any'. */,
-		// "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-		// "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-		// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
-		// "exactOptionalPropertyTypes": true /* Interpret optional property types as written, rather than adding 'undefined'. */,
-		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-		"noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
-		"noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
-		"noImplicitOverride": true /* Ensure overriding members in derived classes are marked with an override modifier. */,
-		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
-		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-		// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
-		/* Completeness */
-		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-		"skipLibCheck": true /* Skip type checking all .d.ts files. */
+		// Language
+		"target": "ESNext",
+		"lib": ["ESNext"],
+		"moduleDetection": "force",
+
+		// Modules
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"resolvePackageJsonExports": true,
+
+		// Emit
+		"noEmit": true,
+
+		// Interop
+		"isolatedModules": true,
+		"verbatimModuleSyntax": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+
+		// Type Checking
+		"strict": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedIndexedAccess": true,
+		"noImplicitOverride": true,
+
+		// Completeness
+		"skipLibCheck": true
 	}
 }

From ce73115f306445804818aee9a0e6fb573699a257 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:18:40 -0700
Subject: [PATCH 11/26] refactor(constants): remove redundant lib from
 tsconfig, extend base

---
 packages/constants/tsconfig.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/constants/tsconfig.json b/packages/constants/tsconfig.json
index 9316307845..7e6d581342 100644
--- a/packages/constants/tsconfig.json
+++ b/packages/constants/tsconfig.json
@@ -11,9 +11,7 @@
 
 		"declaration": true,
 		"composite": true,
-		"declarationMap": true,
-
-		"lib": ["ESNext"]
+		"declarationMap": true
 	},
 	"include": ["src/**/*"],
 	"exclude": ["node_modules", "dist"]

From a690e24f881d84918900311aee1269b86c19078b Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:18:44 -0700
Subject: [PATCH 12/26] refactor(svelte-utils): extend base.dom, remove
 redundant lib override

---
 packages/svelte-utils/tsconfig.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/svelte-utils/tsconfig.json b/packages/svelte-utils/tsconfig.json
index 0fd071958f..938159078e 100644
--- a/packages/svelte-utils/tsconfig.json
+++ b/packages/svelte-utils/tsconfig.json
@@ -1,7 +1,3 @@
 {
-	"extends": ["../../tsconfig.base.json"],
-	"compilerOptions": {
-
-		"lib": ["ESNext", "DOM", "DOM.Iterable"]
-	}
+	"extends": ["../../tsconfig.base.dom.json"]
 }

From dbefc475e48e36482a7f7dd60d27cf00385f109a Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:18:49 -0700
Subject: [PATCH 13/26] refactor(sync-client): extend base.dom, remove
 redundant lib override

---
 packages/sync-client/tsconfig.json | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/sync-client/tsconfig.json b/packages/sync-client/tsconfig.json
index 4fcce9c65a..370cb9ede6 100644
--- a/packages/sync-client/tsconfig.json
+++ b/packages/sync-client/tsconfig.json
@@ -1,7 +1,4 @@
 {
-	"extends": "../../tsconfig.base.json",
-	"compilerOptions": {
-		"lib": ["ESNext", "DOM", "DOM.Iterable"]
-	},
+	"extends": "../../tsconfig.base.dom.json",
 	"include": ["src/**/*"]
 }

From 0392f09aa9f70a102e095384031a9318464d9049 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:18:54 -0700
Subject: [PATCH 14/26] refactor(ui): extend base.dom, remove redundant lib
 override

---
 packages/ui/tsconfig.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 94e8fb80f6..b8b1978126 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,5 +1,5 @@
 {
-	"extends": ["../../tsconfig.base.json"],
+	"extends": ["../../tsconfig.base.dom.json"],
 	"compilerOptions": {
 		"allowJs": true,
 		"resolveJsonModule": true,
@@ -11,7 +11,6 @@
 		"composite": true,
 		"declarationMap": true,
 
-		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"rootDir": "src",
 		"paths": {
 			"#/*": ["./src/*"]

From 46e8aab5777ebebdcf76628a113fac66a3d017c3 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:19:01 -0700
Subject: [PATCH 15/26] refactor(filesystem,sync,workspace,cli): extend base,
 remove redundant options
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

These packages don't use browser DOM APIs—switched from standalone
configs to extending tsconfig.base.json. Removed ~10 options per
package that were already inherited from base.
---
 packages/cli/tsconfig.json        | 23 +----------------------
 packages/filesystem/tsconfig.json | 18 +-----------------
 packages/sync/tsconfig.json       | 18 +-----------------
 packages/workspace/tsconfig.json  | 23 +----------------------
 4 files changed, 4 insertions(+), 78 deletions(-)

diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
index 8e7fc16a50..58c715326d 100644
--- a/packages/cli/tsconfig.json
+++ b/packages/cli/tsconfig.json
@@ -1,32 +1,11 @@
 {
+	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		// Environment setup & latest features
-		"lib": ["ESNext", "DOM", "DOM.Iterable"],
-		"target": "es2022",
 		"module": "Preserve",
-		"moduleDetection": "force",
 		"allowJs": true,
 		"resolveJsonModule": true,
-		"esModuleInterop": true,
-		"isolatedModules": true,
-
-		// Bundler mode
-		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
-		"verbatimModuleSyntax": true,
-		"noEmit": true,
-
-		// Source maps for debugging
 		"sourceMap": true,
-
-		// Best practices
-		"strict": true,
-		"skipLibCheck": true,
-		"noFallthroughCasesInSwitch": true,
-		"noUncheckedIndexedAccess": true,
-		"noImplicitOverride": true,
-
-		// Some stricter flags (disabled by default)
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/packages/filesystem/tsconfig.json b/packages/filesystem/tsconfig.json
index f36a701d20..58c715326d 100644
--- a/packages/filesystem/tsconfig.json
+++ b/packages/filesystem/tsconfig.json
@@ -1,27 +1,11 @@
 {
+	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"lib": ["ESNext", "DOM", "DOM.Iterable"],
-		"target": "es2022",
 		"module": "Preserve",
-		"moduleDetection": "force",
 		"allowJs": true,
 		"resolveJsonModule": true,
-		"esModuleInterop": true,
-		"isolatedModules": true,
-
-		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
-		"verbatimModuleSyntax": true,
-		"noEmit": true,
-
 		"sourceMap": true,
-
-		"strict": true,
-		"skipLibCheck": true,
-		"noFallthroughCasesInSwitch": true,
-		"noUncheckedIndexedAccess": true,
-		"noImplicitOverride": true,
-
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/packages/sync/tsconfig.json b/packages/sync/tsconfig.json
index f36a701d20..58c715326d 100644
--- a/packages/sync/tsconfig.json
+++ b/packages/sync/tsconfig.json
@@ -1,27 +1,11 @@
 {
+	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"lib": ["ESNext", "DOM", "DOM.Iterable"],
-		"target": "es2022",
 		"module": "Preserve",
-		"moduleDetection": "force",
 		"allowJs": true,
 		"resolveJsonModule": true,
-		"esModuleInterop": true,
-		"isolatedModules": true,
-
-		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
-		"verbatimModuleSyntax": true,
-		"noEmit": true,
-
 		"sourceMap": true,
-
-		"strict": true,
-		"skipLibCheck": true,
-		"noFallthroughCasesInSwitch": true,
-		"noUncheckedIndexedAccess": true,
-		"noImplicitOverride": true,
-
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/packages/workspace/tsconfig.json b/packages/workspace/tsconfig.json
index 8e7fc16a50..58c715326d 100644
--- a/packages/workspace/tsconfig.json
+++ b/packages/workspace/tsconfig.json
@@ -1,32 +1,11 @@
 {
+	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		// Environment setup & latest features
-		"lib": ["ESNext", "DOM", "DOM.Iterable"],
-		"target": "es2022",
 		"module": "Preserve",
-		"moduleDetection": "force",
 		"allowJs": true,
 		"resolveJsonModule": true,
-		"esModuleInterop": true,
-		"isolatedModules": true,
-
-		// Bundler mode
-		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
-		"verbatimModuleSyntax": true,
-		"noEmit": true,
-
-		// Source maps for debugging
 		"sourceMap": true,
-
-		// Best practices
-		"strict": true,
-		"skipLibCheck": true,
-		"noFallthroughCasesInSwitch": true,
-		"noUncheckedIndexedAccess": true,
-		"noImplicitOverride": true,
-
-		// Some stricter flags (disabled by default)
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false

From 2c97f5b8a783cf7a004f2d86df0ab6f899c1781a Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:19:06 -0700
Subject: [PATCH 16/26] refactor(vault): extend base, remove redundant options

---
 packages/vault/tsconfig.json | 38 +++---------------------------------
 1 file changed, 3 insertions(+), 35 deletions(-)

diff --git a/packages/vault/tsconfig.json b/packages/vault/tsconfig.json
index 5e515b4388..04c8545633 100644
--- a/packages/vault/tsconfig.json
+++ b/packages/vault/tsconfig.json
@@ -1,44 +1,12 @@
 {
-	// Visit https://aka.ms/tsconfig to read more about this file
+	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		// File Layout
-		// "rootDir": "./src",
-		// "outDir": "./dist",
-
-		// Environment Settings
-		// See also https://aka.ms/tsconfig/module
-		"module": "esnext",
-		"target": "esnext",
+		"module": "ESNext",
 		"types": ["bun-types"],
-		"moduleResolution": "bundler",
-		// For nodejs:
-		// "lib": ["esnext"],
-		// "types": ["node"],
-		// and npm install -D @types/node
-
-		// Other Outputs
 		"sourceMap": true,
 		"declaration": true,
 		"declarationMap": true,
-
-		// Stricter Typechecking Options
-		"noUncheckedIndexedAccess": true,
-		"exactOptionalPropertyTypes": true,
-
-		// Style Options
-		// "noImplicitReturns": true,
-		// "noImplicitOverride": true,
-		// "noUnusedLocals": true,
-		// "noUnusedParameters": true,
-		// "noFallthroughCasesInSwitch": true,
-		// "noPropertyAccessFromIndexSignature": true,
-
-		// Recommended Options
-		"strict": true,
-		"verbatimModuleSyntax": true,
-		"isolatedModules": true,
 		"noUncheckedSideEffectImports": true,
-		"moduleDetection": "force",
-		"skipLibCheck": true
+		"exactOptionalPropertyTypes": true
 	}
 }

From 942e897a035ef61700e86c8afdef607c5514e083 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:19:13 -0700
Subject: [PATCH 17/26] refactor(tab-manager-markdown): extend base, remove
 lib/target overrides
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CLI exporter—no browser DOM APIs needed.
---
 apps/tab-manager-markdown/tsconfig.json | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/tab-manager-markdown/tsconfig.json b/apps/tab-manager-markdown/tsconfig.json
index 388c3df108..269232f374 100644
--- a/apps/tab-manager-markdown/tsconfig.json
+++ b/apps/tab-manager-markdown/tsconfig.json
@@ -1,8 +1,4 @@
 {
 	"extends": "../../tsconfig.base.json",
-	"compilerOptions": {
-		"lib": ["ESNext", "DOM", "DOM.Iterable"],
-		"target": "ESNext"
-	},
 	"include": ["src/**/*"]
 }

From b1e6ef8a5b677ff9d914d0ead8b816c12b86fd3f Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:19:18 -0700
Subject: [PATCH 18/26] refactor(opensidian): extend base.dom + svelte-kit,
 remove redundant options

---
 apps/opensidian/tsconfig.json | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/apps/opensidian/tsconfig.json b/apps/opensidian/tsconfig.json
index e7e01deba5..4664ee151b 100644
--- a/apps/opensidian/tsconfig.json
+++ b/apps/opensidian/tsconfig.json
@@ -1,18 +1,10 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
+	"extends": ["../../tsconfig.base.dom.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
 		"allowJs": true,
 		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
 		"resolveJsonModule": true,
-		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler",
-		"module": "esnext",
-		"target": "esnext",
-		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"types": ["bun-types"]
 	}
 }

From f3bb73e398be7f7eab941d948532cb8f0ea1cfcb Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:19:23 -0700
Subject: [PATCH 19/26] refactor(yjs-size-benchmark): extend base.dom, remove
 redundant options

---
 examples/yjs-size-benchmark/tsconfig.json | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/examples/yjs-size-benchmark/tsconfig.json b/examples/yjs-size-benchmark/tsconfig.json
index 1cb5c64646..1e9ceb8fe5 100644
--- a/examples/yjs-size-benchmark/tsconfig.json
+++ b/examples/yjs-size-benchmark/tsconfig.json
@@ -1,19 +1,11 @@
 {
+	"extends": "../../tsconfig.base.dom.json",
 	"compilerOptions": {
-		"target": "ES2022",
 		"useDefineForClassFields": true,
-		"module": "ESNext",
-		"lib": ["ESNext", "DOM", "DOM.Iterable"],
-		"skipLibCheck": true,
-		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
 		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"noEmit": true,
-		"strict": true,
 		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true
+		"noUnusedParameters": true
 	},
 	"include": ["src"]
 }

From 33749b3725255acb9a71b93787dc1e93898fd8d1 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:23:38 -0700
Subject: [PATCH 20/26] refactor(tsconfig): promote sourceMap and
 resolveJsonModule to base

These options were duplicated in 10/14 child configs. Moving them to
base eliminates the redundancy. Options that conflict with noEmit
(declaration, declarationMap, inlineSources) stay per-package since
library packages must opt into emit individually.
---
 apps/fuji/tsconfig.json                   | 4 +---
 apps/honeycrisp/tsconfig.json             | 4 +---
 apps/opensidian/tsconfig.json             | 2 --
 apps/whispering/tsconfig.json             | 4 +---
 examples/yjs-size-benchmark/tsconfig.json | 1 -
 packages/cli/tsconfig.json                | 2 --
 packages/constants/tsconfig.json          | 4 ----
 packages/filesystem/tsconfig.json         | 2 --
 packages/sync/tsconfig.json               | 2 --
 packages/ui/tsconfig.json                 | 4 ----
 packages/vault/tsconfig.json              | 1 -
 packages/workspace/tsconfig.json          | 2 --
 tsconfig.base.json                        | 2 ++
 13 files changed, 5 insertions(+), 29 deletions(-)

diff --git a/apps/fuji/tsconfig.json b/apps/fuji/tsconfig.json
index 6c0eae8f0c..114bf9ac55 100644
--- a/apps/fuji/tsconfig.json
+++ b/apps/fuji/tsconfig.json
@@ -2,8 +2,6 @@
 	"extends": ["../../tsconfig.base.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
 		"allowJs": true,
-		"checkJs": true,
-		"resolveJsonModule": true,
-		"sourceMap": true
+		"checkJs": true
 	}
 }
diff --git a/apps/honeycrisp/tsconfig.json b/apps/honeycrisp/tsconfig.json
index 6c0eae8f0c..114bf9ac55 100644
--- a/apps/honeycrisp/tsconfig.json
+++ b/apps/honeycrisp/tsconfig.json
@@ -2,8 +2,6 @@
 	"extends": ["../../tsconfig.base.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
 		"allowJs": true,
-		"checkJs": true,
-		"resolveJsonModule": true,
-		"sourceMap": true
+		"checkJs": true
 	}
 }
diff --git a/apps/opensidian/tsconfig.json b/apps/opensidian/tsconfig.json
index 4664ee151b..af61276045 100644
--- a/apps/opensidian/tsconfig.json
+++ b/apps/opensidian/tsconfig.json
@@ -3,8 +3,6 @@
 	"compilerOptions": {
 		"allowJs": true,
 		"checkJs": true,
-		"resolveJsonModule": true,
-		"sourceMap": true,
 		"types": ["bun-types"]
 	}
 }
diff --git a/apps/whispering/tsconfig.json b/apps/whispering/tsconfig.json
index 4dbc06e048..e249bac06f 100644
--- a/apps/whispering/tsconfig.json
+++ b/apps/whispering/tsconfig.json
@@ -2,9 +2,7 @@
 	"extends": ["../../tsconfig.base.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
 		"allowJs": true,
-		"checkJs": true,
-		"resolveJsonModule": true,
-		"sourceMap": true
+		"checkJs": true
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
diff --git a/examples/yjs-size-benchmark/tsconfig.json b/examples/yjs-size-benchmark/tsconfig.json
index 1e9ceb8fe5..393e8b7c81 100644
--- a/examples/yjs-size-benchmark/tsconfig.json
+++ b/examples/yjs-size-benchmark/tsconfig.json
@@ -3,7 +3,6 @@
 	"compilerOptions": {
 		"useDefineForClassFields": true,
 		"allowImportingTsExtensions": true,
-		"resolveJsonModule": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true
 	},
diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
index 58c715326d..a97ea4039b 100644
--- a/packages/cli/tsconfig.json
+++ b/packages/cli/tsconfig.json
@@ -3,9 +3,7 @@
 	"compilerOptions": {
 		"module": "Preserve",
 		"allowJs": true,
-		"resolveJsonModule": true,
 		"allowImportingTsExtensions": true,
-		"sourceMap": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/packages/constants/tsconfig.json b/packages/constants/tsconfig.json
index 7e6d581342..00365dbae1 100644
--- a/packages/constants/tsconfig.json
+++ b/packages/constants/tsconfig.json
@@ -2,13 +2,9 @@
 	"extends": ["../../tsconfig.base.json"],
 	"compilerOptions": {
 		"allowJs": true,
-		"resolveJsonModule": true,
-
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
 		"outDir": "dist",
-		"sourceMap": true,
-
 		"declaration": true,
 		"composite": true,
 		"declarationMap": true
diff --git a/packages/filesystem/tsconfig.json b/packages/filesystem/tsconfig.json
index 58c715326d..a97ea4039b 100644
--- a/packages/filesystem/tsconfig.json
+++ b/packages/filesystem/tsconfig.json
@@ -3,9 +3,7 @@
 	"compilerOptions": {
 		"module": "Preserve",
 		"allowJs": true,
-		"resolveJsonModule": true,
 		"allowImportingTsExtensions": true,
-		"sourceMap": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/packages/sync/tsconfig.json b/packages/sync/tsconfig.json
index 58c715326d..a97ea4039b 100644
--- a/packages/sync/tsconfig.json
+++ b/packages/sync/tsconfig.json
@@ -3,9 +3,7 @@
 	"compilerOptions": {
 		"module": "Preserve",
 		"allowJs": true,
-		"resolveJsonModule": true,
 		"allowImportingTsExtensions": true,
-		"sourceMap": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index b8b1978126..768671bc5c 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -2,11 +2,7 @@
 	"extends": ["../../tsconfig.base.dom.json"],
 	"compilerOptions": {
 		"allowJs": true,
-		"resolveJsonModule": true,
-
 		"outDir": "dist",
-		"sourceMap": true,
-
 		"declaration": true,
 		"composite": true,
 		"declarationMap": true,
diff --git a/packages/vault/tsconfig.json b/packages/vault/tsconfig.json
index 04c8545633..534bdf9f72 100644
--- a/packages/vault/tsconfig.json
+++ b/packages/vault/tsconfig.json
@@ -3,7 +3,6 @@
 	"compilerOptions": {
 		"module": "ESNext",
 		"types": ["bun-types"],
-		"sourceMap": true,
 		"declaration": true,
 		"declarationMap": true,
 		"noUncheckedSideEffectImports": true,
diff --git a/packages/workspace/tsconfig.json b/packages/workspace/tsconfig.json
index 58c715326d..a97ea4039b 100644
--- a/packages/workspace/tsconfig.json
+++ b/packages/workspace/tsconfig.json
@@ -3,9 +3,7 @@
 	"compilerOptions": {
 		"module": "Preserve",
 		"allowJs": true,
-		"resolveJsonModule": true,
 		"allowImportingTsExtensions": true,
-		"sourceMap": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/tsconfig.base.json b/tsconfig.base.json
index b707cf427f..bd049bf09b 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -9,9 +9,11 @@
 		"module": "ESNext",
 		"moduleResolution": "bundler",
 		"resolvePackageJsonExports": true,
+		"resolveJsonModule": true,
 
 		// Emit
 		"noEmit": true,
+		"sourceMap": true,
 
 		// Interop
 		"isolatedModules": true,

From d788373f660b164f0fa8f498c7f8585e197c2ad3 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:23:47 -0700
Subject: [PATCH 21/26] refactor: flatten actions namespace in state modules
 for consistent flat API surface

Removes the nested `actions` sub-object from bookmark, saved-tab,
browser, and filesystem state modules. All mutation methods now live
directly on the returned object, matching the existing pattern in
Honeycrisp (folders, notes, view) and Whispering (deviceConfig, etc.).

Updates all consumer components to drop the `.actions.` accessor.
Adds reactive state module conventions to the svelte skill.
---
 .agents/skills/svelte/SKILL.md                |  38 +++
 .../src/lib/components/CommandPalette.svelte  |   2 +-
 .../src/lib/components/CreateDialog.svelte    |   2 +-
 .../lib/components/DeleteConfirmation.svelte  |   2 +-
 .../src/lib/components/FileTree.svelte        |  24 +-
 .../src/lib/components/FileTreeItem.svelte    |  10 +-
 .../src/lib/components/RenameDialog.svelte    |   2 +-
 .../src/lib/components/TabBar.svelte          |   6 +-
 apps/opensidian/src/lib/fs/fs-state.svelte.ts | 221 +++++++++---------
 .../src/lib/components/tabs/TabItem.svelte    |  20 +-
 .../lib/components/tabs/UnifiedTabList.svelte |  12 +-
 .../src/lib/state/bookmark-state.svelte.ts    | 107 +++++----
 .../src/lib/state/browser-state.svelte.ts     |  93 ++++----
 .../src/lib/state/saved-tab-state.svelte.ts   | 194 ++++++++-------
 14 files changed, 376 insertions(+), 357 deletions(-)

diff --git a/.agents/skills/svelte/SKILL.md b/.agents/skills/svelte/SKILL.md
index 8fe7e9f0ea..0ba837b5fa 100644
--- a/.agents/skills/svelte/SKILL.md
+++ b/.agents/skills/svelte/SKILL.md
@@ -120,6 +120,44 @@ For component props expecting `T[]`, derive in the script block — never materi
 </script>
 <FujiSidebar entries={entriesArray} />
 ```
+
+# Reactive State Module Conventions
+
+State modules use a factory function that returns a flat object with getters and methods, exported as a singleton.
+
+```typescript
+function createBookmarkState() {
+	const bookmarksMap = fromTable(workspaceClient.tables.bookmarks);
+	const bookmarks = $derived(bookmarksMap.values().toArray());
+
+	return {
+		get bookmarks() { return bookmarks; },
+		async add(tab: Tab) { /* ... */ },
+		remove(id: BookmarkId) { /* ... */ },
+	};
+}
+
+export const bookmarkState = createBookmarkState();
+```
+
+## Naming
+
+| Concern | Convention | Example |
+|---|---|---|
+| **Export name** | `xState` for domain state; descriptive noun for utilities | `bookmarkState`, `notesState`, `deviceConfig`, `vadRecorder` |
+| **Factory function** | `createX()` matching the export name | `createBookmarkState()` |
+| **File name** | Domain name, optionally with `-state` suffix | `bookmark-state.svelte.ts`, `auth.svelte.ts` |
+
+Use the `State` suffix when the export name would collide with a key property (`bookmarkState.bookmarks`, not `bookmarks.bookmarks`).
+
+## Accessor Patterns
+
+| Data Shape | Accessor | Example |
+|---|---|---|
+| **Collection** | Named getter | `bookmarkState.bookmarks`, `notesState.notes` |
+| **Single reactive value** | `.current` (Svelte 5 convention) | `selectedFolderId.current`, `serverUrl.current` |
+| **Keyed lookup** | `.get(key)` | `toolTrustState.get(name)`, `deviceConfig.get(key)` |
+
 # Mutation Pattern Preference
 
 ## In Svelte Files (.svelte)
diff --git a/apps/opensidian/src/lib/components/CommandPalette.svelte b/apps/opensidian/src/lib/components/CommandPalette.svelte
index 4276e0d7a1..0f52d10c1a 100644
--- a/apps/opensidian/src/lib/components/CommandPalette.svelte
+++ b/apps/opensidian/src/lib/components/CommandPalette.svelte
@@ -92,7 +92,7 @@
 		<Command.Empty>No files found.</Command.Empty>
 		<Command.Group heading="Files">
 			{#each filteredFiles as file (file.id)}
-				<Command.Item value={file.id} onSelect={() => { fsState.actions.selectFile(file.id); open = false; }}>
+				<Command.Item value={file.id} onSelect={() => { fsState.selectFile(file.id); open = false; }}>
 					{@const Icon = getFileIcon(file.name)}
 					<Icon class="h-4 w-4 shrink-0 text-muted-foreground" />
 					<span>{file.name}</span>
diff --git a/apps/opensidian/src/lib/components/CreateDialog.svelte b/apps/opensidian/src/lib/components/CreateDialog.svelte
index c0d8da8c36..545ced96ab 100644
--- a/apps/opensidian/src/lib/components/CreateDialog.svelte
+++ b/apps/opensidian/src/lib/components/CreateDialog.svelte
@@ -25,7 +25,7 @@
 				Enter a name for the new {mode}.
 			</Dialog.Description>
 		</Dialog.Header>
-		<form onsubmit={async (e) => { e.preventDefault(); if (!name.trim()) return; const parentId = fsState.selectedNode?.type === 'folder' ? fsState.activeFileId : null; if (mode === 'file') { await fsState.actions.createFile(parentId, name.trim()); } else { await fsState.actions.createFolder(parentId, name.trim()); } name = ''; open = false; }}>
+		<form onsubmit={async (e) => { e.preventDefault(); if (!name.trim()) return; const parentId = fsState.selectedNode?.type === 'folder' ? fsState.activeFileId : null; if (mode === 'file') { await fsState.createFile(parentId, name.trim()); } else { await fsState.createFolder(parentId, name.trim()); } name = ''; open = false; }}>
 			<Field>
 				<FieldLabel>Name</FieldLabel>
 				<Input
diff --git a/apps/opensidian/src/lib/components/DeleteConfirmation.svelte b/apps/opensidian/src/lib/components/DeleteConfirmation.svelte
index 0b26acc591..09413efd93 100644
--- a/apps/opensidian/src/lib/components/DeleteConfirmation.svelte
+++ b/apps/opensidian/src/lib/components/DeleteConfirmation.svelte
@@ -29,7 +29,7 @@
 		</AlertDialog.Header>
 		<AlertDialog.Footer>
 			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-			<Button variant="destructive" onclick={async () => { if (!fsState.activeFileId) return; await fsState.actions.deleteFile(fsState.activeFileId); open = false; }}>Delete</Button>
+			<Button variant="destructive" onclick={async () => { if (!fsState.activeFileId) return; await fsState.deleteFile(fsState.activeFileId); open = false; }}>Delete</Button>
 		</AlertDialog.Footer>
 	</AlertDialog.Content>
 </AlertDialog.Root>
diff --git a/apps/opensidian/src/lib/components/FileTree.svelte b/apps/opensidian/src/lib/components/FileTree.svelte
index 9482e35c09..d69de6c50f 100644
--- a/apps/opensidian/src/lib/components/FileTree.svelte
+++ b/apps/opensidian/src/lib/components/FileTree.svelte
@@ -37,21 +37,21 @@
 			case 'ArrowDown': {
 				e.preventDefault();
 				if (currentIndex === -1) {
-					fsState.actions.focus(visibleIds[0] ?? null);
+					fsState.focus(visibleIds[0] ?? null);
 				} else {
 					const next =
 						visibleIds[Math.min(currentIndex + 1, visibleIds.length - 1)];
-					fsState.actions.focus(next ?? null);
+					fsState.focus(next ?? null);
 				}
 				break;
 			}
 			case 'ArrowUp': {
 				e.preventDefault();
 				if (currentIndex === -1) {
-					fsState.actions.focus(visibleIds[0] ?? null);
+					fsState.focus(visibleIds[0] ?? null);
 				} else {
 					const prev = visibleIds[Math.max(currentIndex - 1, 0)];
-					fsState.actions.focus(prev ?? null);
+					fsState.focus(prev ?? null);
 				}
 				break;
 			}
@@ -61,10 +61,10 @@
 				const row = fsState.getRow(current);
 				if (row?.type !== 'folder') break;
 				if (!fsState.expandedIds.has(current)) {
-					fsState.actions.toggleExpand(current);
+					fsState.toggleExpand(current);
 				} else {
 					const children = fsState.getChildIds(current);
-					if (children.length > 0) fsState.actions.focus(children[0]!);
+					if (children.length > 0) fsState.focus(children[0]!);
 				}
 				break;
 			}
@@ -73,9 +73,9 @@
 				if (!current) break;
 				const row = fsState.getRow(current);
 				if (row?.type === 'folder' && fsState.expandedIds.has(current)) {
-					fsState.actions.toggleExpand(current);
+					fsState.toggleExpand(current);
 				} else if (row?.parentId) {
-					fsState.actions.focus(row.parentId);
+					fsState.focus(row.parentId);
 				}
 				break;
 			}
@@ -85,20 +85,20 @@
 				if (!current) break;
 				const row = fsState.getRow(current);
 				if (row?.type === 'file') {
-					fsState.actions.selectFile(current);
+					fsState.selectFile(current);
 				} else if (row?.type === 'folder') {
-					fsState.actions.toggleExpand(current);
+					fsState.toggleExpand(current);
 				}
 				break;
 			}
 			case 'Home': {
 				e.preventDefault();
-				fsState.actions.focus(visibleIds[0] ?? null);
+				fsState.focus(visibleIds[0] ?? null);
 				break;
 			}
 			case 'End': {
 				e.preventDefault();
-				fsState.actions.focus(visibleIds.at(-1) ?? null);
+				fsState.focus(visibleIds.at(-1) ?? null);
 				break;
 			}
 			default:
diff --git a/apps/opensidian/src/lib/components/FileTreeItem.svelte b/apps/opensidian/src/lib/components/FileTreeItem.svelte
index 6f2f630490..385b66665e 100644
--- a/apps/opensidian/src/lib/components/FileTreeItem.svelte
+++ b/apps/opensidian/src/lib/components/FileTreeItem.svelte
@@ -24,18 +24,18 @@
 	let deleteDialogOpen = $state(false);
 
 	function selectAndOpenCreate(mode: 'file' | 'folder') {
-		fsState.actions.selectFile(id);
+		fsState.selectFile(id);
 		createDialogMode = mode;
 		createDialogOpen = true;
 	}
 
 	function selectAndOpenRename() {
-		fsState.actions.selectFile(id);
+		fsState.selectFile(id);
 		renameDialogOpen = true;
 	}
 
 	function selectAndOpenDelete() {
-		fsState.actions.selectFile(id);
+		fsState.selectFile(id);
 		deleteDialogOpen = true;
 	}
 </script>
@@ -49,7 +49,7 @@
 						<TreeView.Folder
 							name={row.name}
 							open={isExpanded}
-							onOpenChange={() => fsState.actions.toggleExpand(id)}
+							onOpenChange={() => fsState.toggleExpand(id)}
 							class="w-full rounded-sm px-2 py-1 text-sm hover:bg-accent {isSelected
 								? 'bg-accent text-accent-foreground'
 								: ''} {isFocused ? 'ring-1 ring-ring' : ''}"
@@ -67,7 +67,7 @@
 						class="w-full rounded-sm px-2 py-1 text-sm hover:bg-accent {isSelected
 							? 'bg-accent text-accent-foreground'
 							: ''} {isFocused ? 'ring-1 ring-ring' : ''}"
-						onclick={() => fsState.actions.selectFile(id)}
+						onclick={() => fsState.selectFile(id)}
 						role="treeitem"
 					>
 						{#snippet icon()}
diff --git a/apps/opensidian/src/lib/components/RenameDialog.svelte b/apps/opensidian/src/lib/components/RenameDialog.svelte
index cec26fe745..c32e3abed0 100644
--- a/apps/opensidian/src/lib/components/RenameDialog.svelte
+++ b/apps/opensidian/src/lib/components/RenameDialog.svelte
@@ -27,7 +27,7 @@
 			<Dialog.Title>Rename</Dialog.Title>
 			<Dialog.Description>Enter a new name.</Dialog.Description>
 		</Dialog.Header>
-		<form onsubmit={async (e) => { e.preventDefault(); if (!name.trim() || !fsState.activeFileId) return; await fsState.actions.rename(fsState.activeFileId, name.trim()); open = false; }}>
+		<form onsubmit={async (e) => { e.preventDefault(); if (!name.trim() || !fsState.activeFileId) return; await fsState.rename(fsState.activeFileId, name.trim()); open = false; }}>
 			<Field>
 				<FieldLabel>Name</FieldLabel>
 				<Input
diff --git a/apps/opensidian/src/lib/components/TabBar.svelte b/apps/opensidian/src/lib/components/TabBar.svelte
index b9cb43d3cf..134b0f62df 100644
--- a/apps/opensidian/src/lib/components/TabBar.svelte
+++ b/apps/opensidian/src/lib/components/TabBar.svelte
@@ -11,7 +11,7 @@
 {#if hasOpenFiles}
 	<Tabs.Root
 		value={fsState.activeFileId ?? ''}
-		onValueChange={(value) => fsState.actions.selectFile(value as FileId)}
+		onValueChange={(value) => fsState.selectFile(value as FileId)}
 		class="w-full"
 	>
 		<Tabs.List
@@ -23,13 +23,13 @@
 					<Tabs.Trigger
 						value={fileId}
 						class="relative flex-none rounded-none border-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=active]:shadow-none"
-					onauxclick={(e) => { if (e.button === 1) { e.preventDefault(); fsState.actions.closeFile(fileId); } }}
+					onauxclick={(e) => { if (e.button === 1) { e.preventDefault(); fsState.closeFile(fileId); } }}
 					>
 						<span class="mr-4">{row.name}</span>
 						<button
 							type="button"
 							class="absolute right-1 top-1/2 -translate-y-1/2 rounded-sm p-0.5 opacity-50 hover:opacity-100 hover:bg-accent"
-					onclick={(e) => { e.stopPropagation(); e.preventDefault(); fsState.actions.closeFile(fileId); }}
+					onclick={(e) => { e.stopPropagation(); e.preventDefault(); fsState.closeFile(fileId); }}
 							aria-label="Close {row.name}"
 						>
 							<X class="h-3 w-3" />
diff --git a/apps/opensidian/src/lib/fs/fs-state.svelte.ts b/apps/opensidian/src/lib/fs/fs-state.svelte.ts
index 2432ced0d3..94f4c776fa 100644
--- a/apps/opensidian/src/lib/fs/fs-state.svelte.ts
+++ b/apps/opensidian/src/lib/fs/fs-state.svelte.ts
@@ -33,7 +33,8 @@ function createFsState() {
 	const ws = createWorkspace({
 		id: 'opensidian',
 		tables: { files: filesTable },
-	}).withExtension('persistence', indexeddbPersistence)
+	})
+		.withExtension('persistence', indexeddbPersistence)
 		.withWorkspaceExtension('sqliteIndex', createSqliteIndex());
 	const fs = createYjsFileSystem(ws.tables.files, ws.documents.files.content);
 	const documents = ws.documents.files.content;
@@ -146,127 +147,121 @@ function createFsState() {
 			return null;
 		},
 
-		actions: {
-			selectFile(id: FileId) {
-				activeFileId = id;
-				if (!openFileIds.includes(id)) {
-					openFileIds = [...openFileIds, id];
-				}
-			},
+		selectFile(id: FileId) {
+			activeFileId = id;
+			if (!openFileIds.includes(id)) {
+				openFileIds = [...openFileIds, id];
+			}
+		},
 
-			closeFile(id: FileId) {
-				openFileIds = openFileIds.filter((f) => f !== id);
-				if (activeFileId === id) {
-					activeFileId = openFileIds.at(-1) ?? null;
-				}
-			},
+		closeFile(id: FileId) {
+			openFileIds = openFileIds.filter((f) => f !== id);
+			if (activeFileId === id) {
+				activeFileId = openFileIds.at(-1) ?? null;
+			}
+		},
 
-			toggleExpand(id: FileId) {
-				if (expandedIds.has(id)) expandedIds.delete(id);
-				else expandedIds.add(id);
-			},
+		toggleExpand(id: FileId) {
+			if (expandedIds.has(id)) expandedIds.delete(id);
+			else expandedIds.add(id);
+		},
 
-			focus(id: FileId | null) {
-				focusedId = id;
-			},
+		focus(id: FileId | null) {
+			focusedId = id;
+		},
 
-			async createFile(parentId: FileId | null, name: string) {
-				try {
-					const parentPath = parentId
-						? (state.getPathForId(parentId) ?? '/')
-						: '/';
-					const path =
-						parentPath === '/' ? `/${name}` : `${parentPath}/${name}`;
-					await fs.writeFile(path, '');
-					toast.success(`Created ${path}`);
-				} catch (err) {
-					toast.error(
-						err instanceof Error ? err.message : 'Failed to create file',
-					);
-					console.error(err);
-				}
-			},
+		async createFile(parentId: FileId | null, name: string) {
+			try {
+				const parentPath = parentId
+					? (state.getPathForId(parentId) ?? '/')
+					: '/';
+				const path = parentPath === '/' ? `/${name}` : `${parentPath}/${name}`;
+				await fs.writeFile(path, '');
+				toast.success(`Created ${path}`);
+			} catch (err) {
+				toast.error(
+					err instanceof Error ? err.message : 'Failed to create file',
+				);
+				console.error(err);
+			}
+		},
 
-			async createFolder(parentId: FileId | null, name: string) {
-				try {
-					const parentPath = parentId
-						? (state.getPathForId(parentId) ?? '/')
-						: '/';
-					const path =
-						parentPath === '/' ? `/${name}` : `${parentPath}/${name}`;
-					await fs.mkdir(path);
-					if (parentId) expandedIds.add(parentId);
-					toast.success(`Created ${path}/`);
-				} catch (err) {
-					toast.error(
-						err instanceof Error ? err.message : 'Failed to create folder',
-					);
-					console.error(err);
-				}
-			},
+		async createFolder(parentId: FileId | null, name: string) {
+			try {
+				const parentPath = parentId
+					? (state.getPathForId(parentId) ?? '/')
+					: '/';
+				const path = parentPath === '/' ? `/${name}` : `${parentPath}/${name}`;
+				await fs.mkdir(path);
+				if (parentId) expandedIds.add(parentId);
+				toast.success(`Created ${path}/`);
+			} catch (err) {
+				toast.error(
+					err instanceof Error ? err.message : 'Failed to create folder',
+				);
+				console.error(err);
+			}
+		},
 
-			async deleteFile(id: FileId) {
-				try {
-					const path = state.getPathForId(id);
-					if (!path) return;
-					await fs.rm(path, { recursive: true });
-					if (activeFileId === id) activeFileId = null;
-					openFileIds = openFileIds.filter((f) => f !== id);
-					toast.success(`Deleted ${path}`);
-				} catch (err) {
-					toast.error(err instanceof Error ? err.message : 'Failed to delete');
-					console.error(err);
-				}
-			},
+		async deleteFile(id: FileId) {
+			try {
+				const path = state.getPathForId(id);
+				if (!path) return;
+				await fs.rm(path, { recursive: true });
+				if (activeFileId === id) activeFileId = null;
+				openFileIds = openFileIds.filter((f) => f !== id);
+				toast.success(`Deleted ${path}`);
+			} catch (err) {
+				toast.error(err instanceof Error ? err.message : 'Failed to delete');
+				console.error(err);
+			}
+		},
 
-			async rename(id: FileId, newName: string) {
-				try {
-					const oldPath = state.getPathForId(id);
-					if (!oldPath) return;
-					const parentPath =
-						oldPath.substring(0, oldPath.lastIndexOf('/')) || '/';
-					const newPath =
-						parentPath === '/' ? `/${newName}` : `${parentPath}/${newName}`;
-					await fs.mv(oldPath, newPath);
-					toast.success(`Renamed to ${newName}`);
-				} catch (err) {
-					toast.error(err instanceof Error ? err.message : 'Failed to rename');
-					console.error(err);
-				}
-			},
+		async rename(id: FileId, newName: string) {
+			try {
+				const oldPath = state.getPathForId(id);
+				if (!oldPath) return;
+				const parentPath =
+					oldPath.substring(0, oldPath.lastIndexOf('/')) || '/';
+				const newPath =
+					parentPath === '/' ? `/${newName}` : `${parentPath}/${newName}`;
+				await fs.mv(oldPath, newPath);
+				toast.success(`Renamed to ${newName}`);
+			} catch (err) {
+				toast.error(err instanceof Error ? err.message : 'Failed to rename');
+				console.error(err);
+			}
+		},
 
-			/**
-			 * Read file content as string.
-			 *
-			 * Opens the per-file content Y.Doc and reads from the timeline.
-			 */
-			async readContent(id: FileId): Promise<string | null> {
-				try {
-					const handle = await documents.open(id);
-					return handle.read();
-				} catch (err) {
-					console.error('Failed to read content:', err);
-					return null;
-				}
-			},
+		/**
+		 * Read file content as string.
+		 *
+		 * Opens the per-file content Y.Doc and reads from the timeline.
+		 */
+		async readContent(id: FileId): Promise<string | null> {
+			try {
+				const handle = await documents.open(id);
+				return handle.read();
+			} catch (err) {
+				console.error('Failed to read content:', err);
+				return null;
+			}
+		},
 
-			/**
-			 * Write file content as string.
-			 *
-			 * Opens the per-file content Y.Doc and writes to the timeline.
-			 * The documents manager's `onUpdate` callback bumps `updatedAt` on the file row.
-			 */
-			async writeContent(id: FileId, data: string): Promise<void> {
-				try {
-					const handle = await documents.open(id);
-					handle.write(data);
-				} catch (err) {
-					toast.error(
-						err instanceof Error ? err.message : 'Failed to save file',
-					);
-					console.error(err);
-				}
-			},
+		/**
+		 * Write file content as string.
+		 *
+		 * Opens the per-file content Y.Doc and writes to the timeline.
+		 * The documents manager's `onUpdate` callback bumps `updatedAt` on the file row.
+		 */
+		async writeContent(id: FileId, data: string): Promise<void> {
+			try {
+				const handle = await documents.open(id);
+				handle.write(data);
+			} catch (err) {
+				toast.error(err instanceof Error ? err.message : 'Failed to save file');
+				console.error(err);
+			}
 		},
 
 		/** Cleanup — call from +layout.svelte onDestroy if needed. */
diff --git a/apps/tab-manager/src/lib/components/tabs/TabItem.svelte b/apps/tab-manager/src/lib/components/tabs/TabItem.svelte
index 532da2ce8d..84e78eb547 100644
--- a/apps/tab-manager/src/lib/components/tabs/TabItem.svelte
+++ b/apps/tab-manager/src/lib/components/tabs/TabItem.svelte
@@ -36,7 +36,7 @@
 		<button
 			type="button"
 			{...props}
-			onclick={() => browserState.actions.activate(tabId)}
+			onclick={() => browserState.activate(tabId)}
 		>
 			<Item.Media> <TabFavicon src={tab.favIconUrl} /> </Item.Media>
 
@@ -83,9 +83,9 @@
 					onclick={(e: MouseEvent) => {
 						e.stopPropagation();
 						if (tab.pinned) {
-							browserState.actions.unpin(tabId);
+							browserState.unpin(tabId);
 						} else {
-							browserState.actions.pin(tabId);
+							browserState.pin(tabId);
 						}
 					}}
 				>
@@ -104,9 +104,9 @@
 						onclick={(e: MouseEvent) => {
 							e.stopPropagation();
 							if (tab.mutedInfo?.muted) {
-								browserState.actions.unmute(tabId);
+								browserState.unmute(tabId);
 							} else {
-								browserState.actions.mute(tabId);
+								browserState.mute(tabId);
 							}
 						}}
 					>
@@ -124,7 +124,7 @@
 					tooltip="Reload"
 					onclick={(e: MouseEvent) => {
 						e.stopPropagation();
-						browserState.actions.reload(tabId);
+						browserState.reload(tabId);
 					}}
 				>
 					<RefreshCwIcon />
@@ -136,7 +136,7 @@
 					tooltip="Duplicate"
 					onclick={(e: MouseEvent) => {
 						e.stopPropagation();
-						browserState.actions.duplicate(tabId);
+						browserState.duplicate(tabId);
 					}}
 				>
 					<CopyIcon />
@@ -148,7 +148,7 @@
 					tooltip="Save for later"
 					onclick={(e: MouseEvent) => {
 						e.stopPropagation();
-						savedTabState.actions.save(tab);
+						savedTabState.save(tab);
 					}}
 				>
 					<ArchiveIcon />
@@ -160,7 +160,7 @@
 					tooltip="Bookmark"
 					onclick={(e: MouseEvent) => {
 						e.stopPropagation();
-						bookmarkState.actions.add(tab);
+						bookmarkState.add(tab);
 					}}
 				>
 					<StarIcon />
@@ -173,7 +173,7 @@
 					tooltip="Close"
 					onclick={(e: MouseEvent) => {
 						e.stopPropagation();
-						browserState.actions.close(tabId);
+						browserState.close(tabId);
 					}}
 				>
 					<XIcon />
diff --git a/apps/tab-manager/src/lib/components/tabs/UnifiedTabList.svelte b/apps/tab-manager/src/lib/components/tabs/UnifiedTabList.svelte
index 393e8047eb..bcd7aba2a4 100644
--- a/apps/tab-manager/src/lib/components/tabs/UnifiedTabList.svelte
+++ b/apps/tab-manager/src/lib/components/tabs/UnifiedTabList.svelte
@@ -95,7 +95,7 @@
 								variant="ghost"
 								size="icon-xs"
 								tooltip="Restore All"
-								onclick={() => savedTabState.actions.restoreAll()}
+								onclick={() => savedTabState.restoreAll()}
 							>
 								<RotateCcwIcon />
 							</Button>
@@ -104,7 +104,7 @@
 								size="icon-xs"
 								class="text-destructive"
 								tooltip="Delete All"
-								onclick={() => savedTabState.actions.removeAll()}
+								onclick={() => savedTabState.removeAll()}
 							>
 								<Trash2Icon />
 							</Button>
@@ -171,7 +171,7 @@
 								size="icon-xs"
 								tooltip="Restore"
 								onclick={() =>
-									savedTabState.actions.restore(tab)}
+									savedTabState.restore(tab)}
 							>
 								<RotateCcwIcon />
 							</Button>
@@ -181,7 +181,7 @@
 								class="text-destructive"
 								tooltip="Delete"
 								onclick={() =>
-									savedTabState.actions.remove(tab.id)}
+									savedTabState.remove(tab.id)}
 							>
 								<Trash2Icon />
 							</Button>
@@ -216,7 +216,7 @@
 								variant="ghost"
 								size="icon-xs"
 								tooltip="Open"
-								onclick={() => bookmarkState.actions.open(bookmark)}
+								onclick={() => bookmarkState.open(bookmark)}
 							>
 								<ExternalLinkIcon />
 							</Button>
@@ -225,7 +225,7 @@
 								size="icon-xs"
 								class="text-destructive"
 								tooltip="Delete"
-								onclick={() => bookmarkState.actions.remove(bookmark.id)}
+								onclick={() => bookmarkState.remove(bookmark.id)}
 							>
 								<Trash2Icon />
 							</Button>
diff --git a/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts b/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts
index 124d24e411..e0cb338682 100644
--- a/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts
+++ b/apps/tab-manager/src/lib/state/bookmark-state.svelte.ts
@@ -20,14 +20,14 @@
  *   <BookmarkItem {bookmark} />
  * {/each}
  *
- * <button onclick={() => bookmarkState.actions.add(tab)}>
+ * <button onclick={() => bookmarkState.add(tab)}>
  *   Bookmark
  * </button>
  * ```
  */
 
-import { getDeviceId } from '$lib/device/device-id';
 import { fromTable } from '@epicenter/svelte';
+import { getDeviceId } from '$lib/device/device-id';
 import {
 	type Bookmark,
 	type BookmarkId,
@@ -40,7 +40,12 @@ function createBookmarkState() {
 	const bookmarksMap = fromTable(workspaceClient.tables.bookmarks);
 
 	/** All bookmarks, sorted by most recently created first. Cached via $derived. */
-	const bookmarks = $derived(bookmarksMap.values().toArray().sort((a, b) => b.createdAt - a.createdAt));
+	const bookmarks = $derived(
+		bookmarksMap
+			.values()
+			.toArray()
+			.sort((a, b) => b.createdAt - a.createdAt),
+	);
 
 	return {
 		get bookmarks() {
@@ -48,65 +53,57 @@ function createBookmarkState() {
 		},
 
 		/**
-		 * Actions that mutate bookmark state.
+		 * Bookmark a tab—snapshot its metadata to Y.Doc.
+		 *
+		 * Unlike "save for later," this does NOT close the browser tab.
+		 * The bookmark persists until explicitly deleted.
 		 *
-		 * All mutations go through the Y.Doc table. The observer re-reads
-		 * into `bookmarks` automatically—no direct array mutation.
+		 * Silently no-ops for tabs without a URL.
 		 */
-		actions: {
-			/**
-			 * Bookmark a tab—snapshot its metadata to Y.Doc.
-			 *
-			 * Unlike "save for later," this does NOT close the browser tab.
-			 * The bookmark persists until explicitly deleted.
-			 *
-			 * Silently no-ops for tabs without a URL.
-			 */
-			async add(tab: Tab) {
-				if (!tab.url) return;
-				const deviceId = await getDeviceId();
-				workspaceClient.tables.bookmarks.set({
-					id: generateBookmarkId(),
-					url: tab.url,
-					title: tab.title || 'Untitled',
-					favIconUrl: tab.favIconUrl,
-					description: undefined,
-					sourceDeviceId: deviceId,
-					createdAt: Date.now(),
-					_v: 1,
-				});
-			},
+		async add(tab: Tab) {
+			if (!tab.url) return;
+			const deviceId = await getDeviceId();
+			workspaceClient.tables.bookmarks.set({
+				id: generateBookmarkId(),
+				url: tab.url,
+				title: tab.title || 'Untitled',
+				favIconUrl: tab.favIconUrl,
+				description: undefined,
+				sourceDeviceId: deviceId,
+				createdAt: Date.now(),
+				_v: 1,
+			});
+		},
 
-			/**
-			 * Open a bookmark in a new browser tab.
-			 *
-			 * Unlike saved tab restore, the bookmark record is NOT deleted.
-			 */
-			async open(bookmark: Bookmark) {
-				await browser.tabs.create({ url: bookmark.url });
-			},
+		/**
+		 * Open a bookmark in a new browser tab.
+		 *
+		 * Unlike saved tab restore, the bookmark record is NOT deleted.
+		 */
+		async open(bookmark: Bookmark) {
+			await browser.tabs.create({ url: bookmark.url });
+		},
 
-			/** Delete a bookmark. */
-			remove(id: BookmarkId) {
-				workspaceClient.tables.bookmarks.delete(id);
-			},
+		/** Delete a bookmark. */
+		remove(id: BookmarkId) {
+			workspaceClient.tables.bookmarks.delete(id);
+		},
 
-			/** Delete all bookmarks. Wrapped in a Y.Doc transaction. */
-			removeAll() {
-				const all = bookmarksMap.values().toArray();
-				if (!all.length) return;
+		/** Delete all bookmarks. Wrapped in a Y.Doc transaction. */
+		removeAll() {
+			const all = bookmarksMap.values().toArray();
+			if (!all.length) return;
 
-				workspaceClient.batch(() => {
-					for (const bookmark of all) {
-						workspaceClient.tables.bookmarks.delete(bookmark.id);
-					}
-				});
-			},
+			workspaceClient.batch(() => {
+				for (const bookmark of all) {
+					workspaceClient.tables.bookmarks.delete(bookmark.id);
+				}
+			});
+		},
 
-			/** Update a bookmark's metadata in Y.Doc. */
-			update(bookmark: Bookmark) {
-				workspaceClient.tables.bookmarks.set(bookmark);
-			},
+		/** Update a bookmark's metadata in Y.Doc. */
+		update(bookmark: Bookmark) {
+			workspaceClient.tables.bookmarks.set(bookmark);
 		},
 	};
 }
diff --git a/apps/tab-manager/src/lib/state/browser-state.svelte.ts b/apps/tab-manager/src/lib/state/browser-state.svelte.ts
index fae7e8c0ec..560cceca80 100644
--- a/apps/tab-manager/src/lib/state/browser-state.svelte.ts
+++ b/apps/tab-manager/src/lib/state/browser-state.svelte.ts
@@ -620,57 +620,52 @@ function createBrowserState() {
 		},
 
 		/**
-		 * Browser API calls that trigger state changes indirectly.
+		 * Close a tab. Browser onRemoved event updates state.
 		 *
-		 * None of these mutate `windowStates` directly — they call the browser
-		 * API, which fires an event (e.g. `onRemoved`, `onUpdated`), and the
-		 * event listener above handles the state update. This keeps mutation
-		 * in one place (the listeners) and makes actions safe to call from
-		 * any component without worrying about state consistency.
+		 * None of these methods mutate `windowStates` directly \u2014 they call the
+		 * browser API, which fires an event (e.g. `onRemoved`, `onUpdated`),
+		 * and the event listener above handles the state update.
 		 */
-		actions: {
-			/** Close a tab. Browser onRemoved event updates state. */
-			async close(tabId: number) {
-				await browser.tabs.remove(tabId);
-			},
-
-			/** Activate a tab and focus its window. */
-			async activate(tabId: number) {
-				const tab = await browser.tabs.update(tabId, { active: true });
-				if (tab?.windowId) {
-					await browser.windows.update(tab.windowId, { focused: true });
-				}
-			},
-
-			/** Pin a tab. */
-			async pin(tabId: number) {
-				await browser.tabs.update(tabId, { pinned: true });
-			},
-
-			/** Unpin a tab. */
-			async unpin(tabId: number) {
-				await browser.tabs.update(tabId, { pinned: false });
-			},
-
-			/** Mute a tab. */
-			async mute(tabId: number) {
-				await browser.tabs.update(tabId, { muted: true });
-			},
-
-			/** Unmute a tab. */
-			async unmute(tabId: number) {
-				await browser.tabs.update(tabId, { muted: false });
-			},
-
-			/** Reload a tab. */
-			async reload(tabId: number) {
-				await browser.tabs.reload(tabId);
-			},
-
-			/** Duplicate a tab. */
-			async duplicate(tabId: number) {
-				await browser.tabs.duplicate(tabId);
-			},
+		async close(tabId: number) {
+			await browser.tabs.remove(tabId);
+		},
+
+		/** Activate a tab and focus its window. */
+		async activate(tabId: number) {
+			const tab = await browser.tabs.update(tabId, { active: true });
+			if (tab?.windowId) {
+				await browser.windows.update(tab.windowId, { focused: true });
+			}
+		},
+
+		/** Pin a tab. */
+		async pin(tabId: number) {
+			await browser.tabs.update(tabId, { pinned: true });
+		},
+
+		/** Unpin a tab. */
+		async unpin(tabId: number) {
+			await browser.tabs.update(tabId, { pinned: false });
+		},
+
+		/** Mute a tab. */
+		async mute(tabId: number) {
+			await browser.tabs.update(tabId, { muted: true });
+		},
+
+		/** Unmute a tab. */
+		async unmute(tabId: number) {
+			await browser.tabs.update(tabId, { muted: false });
+		},
+
+		/** Reload a tab. */
+		async reload(tabId: number) {
+			await browser.tabs.reload(tabId);
+		},
+
+		/** Duplicate a tab. */
+		async duplicate(tabId: number) {
+			await browser.tabs.duplicate(tabId);
 		},
 	};
 }
diff --git a/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts b/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts
index 5571b6a420..0df3775f03 100644
--- a/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts
+++ b/apps/tab-manager/src/lib/state/saved-tab-state.svelte.ts
@@ -25,14 +25,14 @@
  *   <SavedTabItem {tab} />
  * {/each}
  *
- * <button onclick={() => savedTabState.actions.restoreAll()}>
+ * <button onclick={() => savedTabState.restoreAll()}>
  *   Restore all
  * </button>
  * ```
  */
 
-import { getDeviceId } from '$lib/device/device-id';
 import { fromTable } from '@epicenter/svelte';
+import { getDeviceId } from '$lib/device/device-id';
 import {
 	generateSavedTabId,
 	type SavedTab,
@@ -45,7 +45,12 @@ function createSavedTabState() {
 	const tabsMap = fromTable(workspaceClient.tables.savedTabs);
 
 	/** All saved tabs, sorted by most recently saved first. Cached via $derived. */
-	const tabs = $derived(tabsMap.values().toArray().sort((a, b) => b.savedAt - a.savedAt));
+	const tabs = $derived(
+		tabsMap
+			.values()
+			.toArray()
+			.sort((a, b) => b.savedAt - a.savedAt),
+	);
 
 	return {
 		get tabs() {
@@ -53,114 +58,103 @@ function createSavedTabState() {
 		},
 
 		/**
-		 * Actions that mutate saved tab state.
+		 * Save a tab — snapshot its metadata to Y.Doc and close the
+		 * browser tab. The tab can be restored later on any synced device.
 		 *
-		 * All mutations go through the Y.Doc table, which fires the observer,
-		 * which re-reads the full list into `tabs`. This keeps the mutation path
-		 * unidirectional — components call actions, actions write to Y.Doc,
-		 * Y.Doc observer updates the reactive array. No direct `tabs` mutation
-		 * outside the observer.
+		 * Silently no-ops for tabs without a URL (e.g. `chrome://` pages
+		 * that can't be re-opened via `browser.tabs.create`).
 		 */
-		actions: {
-			/**
-			 * Save a tab — snapshot its metadata to Y.Doc and close the
-			 * browser tab. The tab can be restored later on any synced device.
-			 *
-			 * Silently no-ops for tabs without a URL (e.g. `chrome://` pages
-			 * that can't be re-opened via `browser.tabs.create`).
-			 */
-			async save(tab: Tab) {
-				if (!tab.url) return;
-				const deviceId = await getDeviceId();
-				workspaceClient.tables.savedTabs.set({
-					id: generateSavedTabId(),
-					url: tab.url,
-					title: tab.title || 'Untitled',
-					favIconUrl: tab.favIconUrl,
-					pinned: tab.pinned,
-					sourceDeviceId: deviceId,
-					savedAt: Date.now(),
-					_v: 1,
-				});
-				await browser.tabs.remove(tab.tabId);
-			},
+		async save(tab: Tab) {
+			if (!tab.url) return;
+			const deviceId = await getDeviceId();
+			workspaceClient.tables.savedTabs.set({
+				id: generateSavedTabId(),
+				url: tab.url,
+				title: tab.title || 'Untitled',
+				favIconUrl: tab.favIconUrl,
+				pinned: tab.pinned,
+				sourceDeviceId: deviceId,
+				savedAt: Date.now(),
+				_v: 1,
+			});
+			await browser.tabs.remove(tab.tabId);
+		},
 
-			/**
-			 * Restore a saved tab — re-open it in the browser and remove
-			 * the record from Y.Doc. Preserves the tab's pinned state.
-			 */
-			async restore(savedTab: SavedTab) {
-				await browser.tabs.create({
-					url: savedTab.url,
-					pinned: savedTab.pinned,
-				});
-				workspaceClient.tables.savedTabs.delete(savedTab.id);
-			},
+		/**
+		 * Restore a saved tab — re-open it in the browser and remove
+		 * the record from Y.Doc. Preserves the tab's pinned state.
+		 */
+		async restore(savedTab: SavedTab) {
+			await browser.tabs.create({
+				url: savedTab.url,
+				pinned: savedTab.pinned,
+			});
+			workspaceClient.tables.savedTabs.delete(savedTab.id);
+		},
 
-			/**
-			 * Restore all saved tabs at once.
-			 *
-			 * Fires all `browser.tabs.create()` calls in parallel (no sequential
-			 * awaiting) and batch-deletes from Y.Doc in a single transaction.
-			 *
-			 * This avoids two problems with the naive sequential approach:
-			 * 1. **Popup teardown**: `browser.tabs.create()` shifts focus, which
-			 *    can cause Chrome to destroy the popup mid-loop — killing the
-			 *    async context and leaving remaining tabs un-restored.
-			 * 2. **Observer spam**: Each individual `delete()` fires the Y.Doc
-			 *    observer, triggering a full `readAll()`. Wrapping in `transact()`
-			 *    collapses N observer callbacks into one.
-			 */
-			async restoreAll() {
-				const all = tabsMap.values().toArray();
-				if (!all.length) return;
+		/**
+		 * Restore all saved tabs at once.
+		 *
+		 * Fires all `browser.tabs.create()` calls in parallel (no sequential
+		 * awaiting) and batch-deletes from Y.Doc in a single transaction.
+		 *
+		 * This avoids two problems with the naive sequential approach:
+		 * 1. **Popup teardown**: `browser.tabs.create()` shifts focus, which
+		 *    can cause Chrome to destroy the popup mid-loop — killing the
+		 *    async context and leaving remaining tabs un-restored.
+		 * 2. **Observer spam**: Each individual `delete()` fires the Y.Doc
+		 *    observer, triggering a full `readAll()`. Wrapping in `transact()`
+		 *    collapses N observer callbacks into one.
+		 */
+		async restoreAll() {
+			const all = tabsMap.values().toArray();
+			if (!all.length) return;
 
-				// Fire all tab creations without awaiting each one individually.
-				// browser.tabs.create() sends IPC to the browser process immediately —
-				// the tabs will be created even if the popup is torn down afterward.
-				const createPromises = all.map((tab) =>
-					browser.tabs.create({ url: tab.url, pinned: tab.pinned }),
-				);
+			// Fire all tab creations without awaiting each one individually.
+			// browser.tabs.create() sends IPC to the browser process immediately —
+			// the tabs will be created even if the popup is torn down afterward.
+			const createPromises = all.map((tab) =>
+				browser.tabs.create({ url: tab.url, pinned: tab.pinned }),
+			);
 
-				// Batch-delete from Y.Doc in a single transaction so the observer
-				// fires exactly once (not N times).
-				workspaceClient.batch(() => {
-					for (const tab of all) {
-						workspaceClient.tables.savedTabs.delete(tab.id);
-					}
-				});
+			// Batch-delete from Y.Doc in a single transaction so the observer
+			// fires exactly once (not N times).
+			workspaceClient.batch(() => {
+				for (const tab of all) {
+					workspaceClient.tables.savedTabs.delete(tab.id);
+				}
+			});
 
-				// Best-effort await — popup may die before this resolves, which is
-				// fine because the browser process is already creating the tabs.
-				await Promise.allSettled(createPromises);
-			},
+			// Best-effort await — popup may die before this resolves, which is
+			// fine because the browser process is already creating the tabs.
+			await Promise.allSettled(createPromises);
+		},
 
-			/** Delete a saved tab without restoring it. */
-			remove(id: SavedTabId) {
-				workspaceClient.tables.savedTabs.delete(id);
-			},
+		/** Delete a saved tab without restoring it. */
+		remove(id: SavedTabId) {
+			workspaceClient.tables.savedTabs.delete(id);
+		},
 
-			/**
-			 * Delete all saved tabs without restoring them.
-			 *
-			 * Wrapped in a Y.Doc transaction so the observer fires once
-			 * (not N times for N tabs).
-			 */
-			removeAll() {
-				const all = tabsMap.values().toArray();
-				if (!all.length) return;
+		/**
+		 * Delete all saved tabs without restoring them.
+		 *
+		 * Wrapped in a Y.Doc transaction so the observer fires once
+		 * (not N times for N tabs).
+		 */
+		removeAll() {
+			const all = tabsMap.values().toArray();
+			if (!all.length) return;
 
-				workspaceClient.batch(() => {
-					for (const tab of all) {
-						workspaceClient.tables.savedTabs.delete(tab.id);
-					}
-				});
-			},
+			workspaceClient.batch(() => {
+				for (const tab of all) {
+					workspaceClient.tables.savedTabs.delete(tab.id);
+				}
+			});
+		},
 
-			/** Update a saved tab's metadata in Y.Doc. */
-			update(savedTab: SavedTab) {
-				workspaceClient.tables.savedTabs.set(savedTab);
-			},
+		/** Update a saved tab's metadata in Y.Doc. */
+		update(savedTab: SavedTab) {
+			workspaceClient.tables.savedTabs.set(savedTab);
 		},
 	};
 }

From c22a72a5ee77f043343d102fb5293b81a4b580a9 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:27:55 -0700
Subject: [PATCH 22/26] refactor(tsconfig): add base.lib.json for library
 packages

Shared config for packages that emit declarations: noEmit:false,
declaration, declarationMap, inlineSources. Eliminates duplication
across constants, ui, and vault. Also removes redundant module:ESNext
from vault (already inherited from base).
---
 packages/constants/tsconfig.json | 6 ++----
 packages/ui/tsconfig.json        | 6 ++----
 packages/vault/tsconfig.json     | 5 +----
 tsconfig.base.lib.json           | 9 +++++++++
 4 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 tsconfig.base.lib.json

diff --git a/packages/constants/tsconfig.json b/packages/constants/tsconfig.json
index 00365dbae1..e6ca0d12af 100644
--- a/packages/constants/tsconfig.json
+++ b/packages/constants/tsconfig.json
@@ -1,13 +1,11 @@
 {
-	"extends": ["../../tsconfig.base.json"],
+	"extends": ["../../tsconfig.base.lib.json"],
 	"compilerOptions": {
 		"allowJs": true,
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
 		"outDir": "dist",
-		"declaration": true,
-		"composite": true,
-		"declarationMap": true
+		"composite": true
 	},
 	"include": ["src/**/*"],
 	"exclude": ["node_modules", "dist"]
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 768671bc5c..fff524737c 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,12 +1,10 @@
 {
-	"extends": ["../../tsconfig.base.dom.json"],
+	"extends": ["../../tsconfig.base.lib.json"],
 	"compilerOptions": {
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"allowJs": true,
 		"outDir": "dist",
-		"declaration": true,
 		"composite": true,
-		"declarationMap": true,
-
 		"rootDir": "src",
 		"paths": {
 			"#/*": ["./src/*"]
diff --git a/packages/vault/tsconfig.json b/packages/vault/tsconfig.json
index 534bdf9f72..b63ae15cd3 100644
--- a/packages/vault/tsconfig.json
+++ b/packages/vault/tsconfig.json
@@ -1,10 +1,7 @@
 {
-	"extends": "../../tsconfig.base.json",
+	"extends": "../../tsconfig.base.lib.json",
 	"compilerOptions": {
-		"module": "ESNext",
 		"types": ["bun-types"],
-		"declaration": true,
-		"declarationMap": true,
 		"noUncheckedSideEffectImports": true,
 		"exactOptionalPropertyTypes": true
 	}
diff --git a/tsconfig.base.lib.json b/tsconfig.base.lib.json
new file mode 100644
index 0000000000..8e0d05bfd5
--- /dev/null
+++ b/tsconfig.base.lib.json
@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.base.json",
+	"compilerOptions": {
+		"noEmit": false,
+		"declaration": true,
+		"declarationMap": true,
+		"inlineSources": true
+	}
+}

From 26ff271840d8d47ebe8553de04771316944b2633 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:27:57 -0700
Subject: [PATCH 23/26] docs(svelte): clarify $derived caching over getters

---
 .agents/skills/svelte/SKILL.md                |  8 +++
 .../derived-vs-getter-caching-matters.md      | 55 +++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 docs/articles/derived-vs-getter-caching-matters.md

diff --git a/.agents/skills/svelte/SKILL.md b/.agents/skills/svelte/SKILL.md
index 0ba837b5fa..aa2d4b935a 100644
--- a/.agents/skills/svelte/SKILL.md
+++ b/.agents/skills/svelte/SKILL.md
@@ -121,6 +121,14 @@ For component props expecting `T[]`, derive in the script block — never materi
 <FujiSidebar entries={entriesArray} />
 ```
 
+### Why `$derived`, Not a Plain Getter
+
+A getter that reads from a `SvelteMap` is also reactive—Svelte tracks the `SvelteMap` read. But a getter recomputes on every access, while `$derived` computes once and caches until dependencies change. Multiple reads in the same render cycle (template, count badge, child component) hit the cache instead of re-sorting.
+
+Always put the computation in `$derived`. The getter is a pass-through, not a computation site.
+
+See `docs/articles/derived-vs-getter-caching-matters.md` for rationale.
+
 # Reactive State Module Conventions
 
 State modules use a factory function that returns a flat object with getters and methods, exported as a singleton.
diff --git a/docs/articles/derived-vs-getter-caching-matters.md b/docs/articles/derived-vs-getter-caching-matters.md
new file mode 100644
index 0000000000..8db05de0bf
--- /dev/null
+++ b/docs/articles/derived-vs-getter-caching-matters.md
@@ -0,0 +1,55 @@
+# `$derived` vs Getter—Both Reactive, Only One Caches
+
+A getter that reads from a `SvelteMap` is reactive. Svelte tracks the `SvelteMap` read, and anything consuming the getter re-renders when the map changes. So why bother with `$derived`?
+
+Caching.
+
+## The Two Approaches
+
+```typescript
+function createSavedTabState() {
+  const tabsMap = fromTable(workspaceClient.tables.savedTabs);
+
+  // Option A: $derived — computes once, caches until tabsMap changes
+  const tabs = $derived(tabsMap.values().toArray().sort((a, b) => b.savedAt - a.savedAt));
+
+  return {
+    get tabs() { return tabs; },
+  };
+
+  // Option B: plain getter — recomputes on every access
+  return {
+    get tabs() {
+      return tabsMap.values().toArray().sort((a, b) => b.savedAt - a.savedAt);
+    },
+  };
+}
+```
+
+Both are reactive. Both return fresh data. The difference is what happens when `tabs` is read multiple times in the same render cycle.
+
+## What Each Does
+
+**`$derived`** creates a reactive signal. The expression runs once when its dependencies change, and the result is memoized. Ten reads in the same cycle—template, a count badge, a conditional, a child component—all hit the cache. The sort runs once.
+
+**A plain getter** is just a JavaScript getter. Every access runs `values().toArray().sort()` from scratch. Ten reads means ten sorts. Svelte doesn't know it's a computed value—it only tracks the `SvelteMap` reads inside the getter body.
+
+## Why It Matters
+
+For a list of 20 saved tabs, the performance difference is negligible. But the principle scales. As the dataset grows, as more consumers read the same derived value, caching pays off. And `$derived` is the idiomatic Svelte 5 way to express "computed from reactive state"—it communicates intent.
+
+Both approaches are reactive because both ultimately read from a `SvelteMap` that Svelte's runtime tracks. The getter doesn't break reactivity. `$derived` adds caching on top.
+
+## The Rule
+
+Prefer `$derived` for any computation derived from reactive state. Use a getter only to expose the derived value as a public API—not to house the computation itself.
+
+```typescript
+// Correct: $derived holds the computation, getter exposes it
+const tabs = $derived(tabsMap.values().toArray().sort((a, b) => b.savedAt - a.savedAt));
+return {
+  get tabs() { return tabs; },
+};
+```
+
+This is the three-layer pattern: `fromTable` (reactive source) → `$derived` (cached computation) → `get` (public API). The getter is a pass-through, not a computation site.

From da68b0a4be7c193c3c72334ddfad7d17e1ba6f76 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:29:12 -0700
Subject: [PATCH 24/26] docs(svelte): generalize $derived guidance

---
 .agents/skills/svelte/SKILL.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.agents/skills/svelte/SKILL.md b/.agents/skills/svelte/SKILL.md
index aa2d4b935a..6b83dfb2eb 100644
--- a/.agents/skills/svelte/SKILL.md
+++ b/.agents/skills/svelte/SKILL.md
@@ -123,9 +123,11 @@ For component props expecting `T[]`, derive in the script block — never materi
 
 ### Why `$derived`, Not a Plain Getter
 
-A getter that reads from a `SvelteMap` is also reactive—Svelte tracks the `SvelteMap` read. But a getter recomputes on every access, while `$derived` computes once and caches until dependencies change. Multiple reads in the same render cycle (template, count badge, child component) hit the cache instead of re-sorting.
+Put reactive computations in `$derived`, not inside public getters.
 
-Always put the computation in `$derived`. The getter is a pass-through, not a computation site.
+A getter may still be reactive if it reads reactive state, but it recomputes on every access. `$derived` computes reactively and caches until dependencies change.
+
+Use `$derived` for the computation. Use the getter only as a pass-through to expose that derived value.
 
 See `docs/articles/derived-vs-getter-caching-matters.md` for rationale.
 

From 72826de423373fd9f5891a03a573c4e13cedafa1 Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:31:25 -0700
Subject: [PATCH 25/26] refactor(tsconfig): promote allowJs,
 allowImportingTsExtensions, outDir, composite to shared configs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

allowJs and allowImportingTsExtensions → base (used by 9 and 5
packages respectively). outDir:dist and composite:true → base.lib
(standard for all library packages). Removes 20+ redundant overrides
across child configs.
---
 apps/fuji/tsconfig.json                   | 1 -
 apps/honeycrisp/tsconfig.json             | 1 -
 apps/opensidian/tsconfig.json             | 1 -
 apps/whispering/tsconfig.json             | 1 -
 examples/yjs-size-benchmark/tsconfig.json | 1 -
 packages/cli/tsconfig.json                | 2 --
 packages/constants/tsconfig.json          | 3 ---
 packages/filesystem/tsconfig.json         | 2 --
 packages/sync/tsconfig.json               | 2 --
 packages/ui/tsconfig.json                 | 3 ---
 packages/workspace/tsconfig.json          | 2 --
 tsconfig.base.json                        | 4 ++++
 tsconfig.base.lib.json                    | 2 ++
 13 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/apps/fuji/tsconfig.json b/apps/fuji/tsconfig.json
index 114bf9ac55..4ca3ab621e 100644
--- a/apps/fuji/tsconfig.json
+++ b/apps/fuji/tsconfig.json
@@ -1,7 +1,6 @@
 {
 	"extends": ["../../tsconfig.base.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
-		"allowJs": true,
 		"checkJs": true
 	}
 }
diff --git a/apps/honeycrisp/tsconfig.json b/apps/honeycrisp/tsconfig.json
index 114bf9ac55..4ca3ab621e 100644
--- a/apps/honeycrisp/tsconfig.json
+++ b/apps/honeycrisp/tsconfig.json
@@ -1,7 +1,6 @@
 {
 	"extends": ["../../tsconfig.base.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
-		"allowJs": true,
 		"checkJs": true
 	}
 }
diff --git a/apps/opensidian/tsconfig.json b/apps/opensidian/tsconfig.json
index af61276045..234518dc9f 100644
--- a/apps/opensidian/tsconfig.json
+++ b/apps/opensidian/tsconfig.json
@@ -1,7 +1,6 @@
 {
 	"extends": ["../../tsconfig.base.dom.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
-		"allowJs": true,
 		"checkJs": true,
 		"types": ["bun-types"]
 	}
diff --git a/apps/whispering/tsconfig.json b/apps/whispering/tsconfig.json
index e249bac06f..eae1e92704 100644
--- a/apps/whispering/tsconfig.json
+++ b/apps/whispering/tsconfig.json
@@ -1,7 +1,6 @@
 {
 	"extends": ["../../tsconfig.base.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
-		"allowJs": true,
 		"checkJs": true
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
diff --git a/examples/yjs-size-benchmark/tsconfig.json b/examples/yjs-size-benchmark/tsconfig.json
index 393e8b7c81..e4b6c1ce90 100644
--- a/examples/yjs-size-benchmark/tsconfig.json
+++ b/examples/yjs-size-benchmark/tsconfig.json
@@ -2,7 +2,6 @@
 	"extends": "../../tsconfig.base.dom.json",
 	"compilerOptions": {
 		"useDefineForClassFields": true,
-		"allowImportingTsExtensions": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true
 	},
diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
index a97ea4039b..f68d9fab3e 100644
--- a/packages/cli/tsconfig.json
+++ b/packages/cli/tsconfig.json
@@ -2,8 +2,6 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"module": "Preserve",
-		"allowJs": true,
-		"allowImportingTsExtensions": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/packages/constants/tsconfig.json b/packages/constants/tsconfig.json
index e6ca0d12af..cae4840e83 100644
--- a/packages/constants/tsconfig.json
+++ b/packages/constants/tsconfig.json
@@ -1,11 +1,8 @@
 {
 	"extends": ["../../tsconfig.base.lib.json"],
 	"compilerOptions": {
-		"allowJs": true,
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
-		"outDir": "dist",
-		"composite": true
 	},
 	"include": ["src/**/*"],
 	"exclude": ["node_modules", "dist"]
diff --git a/packages/filesystem/tsconfig.json b/packages/filesystem/tsconfig.json
index a97ea4039b..f68d9fab3e 100644
--- a/packages/filesystem/tsconfig.json
+++ b/packages/filesystem/tsconfig.json
@@ -2,8 +2,6 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"module": "Preserve",
-		"allowJs": true,
-		"allowImportingTsExtensions": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/packages/sync/tsconfig.json b/packages/sync/tsconfig.json
index a97ea4039b..f68d9fab3e 100644
--- a/packages/sync/tsconfig.json
+++ b/packages/sync/tsconfig.json
@@ -2,8 +2,6 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"module": "Preserve",
-		"allowJs": true,
-		"allowImportingTsExtensions": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index fff524737c..071c7b9930 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -2,9 +2,6 @@
 	"extends": ["../../tsconfig.base.lib.json"],
 	"compilerOptions": {
 		"lib": ["ESNext", "DOM", "DOM.Iterable"],
-		"allowJs": true,
-		"outDir": "dist",
-		"composite": true,
 		"rootDir": "src",
 		"paths": {
 			"#/*": ["./src/*"]
diff --git a/packages/workspace/tsconfig.json b/packages/workspace/tsconfig.json
index a97ea4039b..f68d9fab3e 100644
--- a/packages/workspace/tsconfig.json
+++ b/packages/workspace/tsconfig.json
@@ -2,8 +2,6 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"module": "Preserve",
-		"allowJs": true,
-		"allowImportingTsExtensions": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noPropertyAccessFromIndexSignature": false
diff --git a/tsconfig.base.json b/tsconfig.base.json
index bd049bf09b..9731c4a995 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -10,6 +10,10 @@
 		"moduleResolution": "bundler",
 		"resolvePackageJsonExports": true,
 		"resolveJsonModule": true,
+		"allowImportingTsExtensions": true,
+
+		// JavaScript Support
+		"allowJs": true,
 
 		// Emit
 		"noEmit": true,
diff --git a/tsconfig.base.lib.json b/tsconfig.base.lib.json
index 8e0d05bfd5..00d52832bc 100644
--- a/tsconfig.base.lib.json
+++ b/tsconfig.base.lib.json
@@ -2,8 +2,10 @@
 	"extends": "./tsconfig.base.json",
 	"compilerOptions": {
 		"noEmit": false,
+		"outDir": "dist",
 		"declaration": true,
 		"declarationMap": true,
+		"composite": true,
 		"inlineSources": true
 	}
 }

From 09528037e86d9c4cab488589209839650d07d50c Mon Sep 17 00:00:00 2001
From: Braden Wong <13159333+braden-w@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:43:53 -0700
Subject: [PATCH 26/26] refactor(sveltekit): add bun-types to all SvelteKit
 apps

Standardizes Bun runtime types across all SvelteKit apps (fuji,
honeycrisp, whispering). Opensidian already had it. Monorepo runs
on Bun so all apps should have the types available.
---
 apps/fuji/package.json        | 1 +
 apps/fuji/tsconfig.json       | 4 ++--
 apps/honeycrisp/package.json  | 1 +
 apps/honeycrisp/tsconfig.json | 4 ++--
 apps/whispering/package.json  | 1 +
 apps/whispering/tsconfig.json | 3 ++-
 bun.lock                      | 2 ++
 7 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/fuji/package.json b/apps/fuji/package.json
index 0777b3ace6..46bee21f4b 100644
--- a/apps/fuji/package.json
+++ b/apps/fuji/package.json
@@ -12,6 +12,7 @@
 	},
 	"devDependencies": {
 		"@epicenter/ui": "workspace:*",
+		"bun-types": "catalog:",
 		"@lucide/svelte": "catalog:",
 		"@sveltejs/adapter-static": "catalog:",
 		"@sveltejs/kit": "catalog:",
diff --git a/apps/fuji/tsconfig.json b/apps/fuji/tsconfig.json
index 4ca3ab621e..643a459564 100644
--- a/apps/fuji/tsconfig.json
+++ b/apps/fuji/tsconfig.json
@@ -1,6 +1,6 @@
 {
 	"extends": ["../../tsconfig.base.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
-		"checkJs": true
-	}
+		"checkJs": true,
+		"types": ["bun-types"]
 }
diff --git a/apps/honeycrisp/package.json b/apps/honeycrisp/package.json
index ef81f4036f..ec5bbcc402 100644
--- a/apps/honeycrisp/package.json
+++ b/apps/honeycrisp/package.json
@@ -12,6 +12,7 @@
 	},
 	"devDependencies": {
 		"@epicenter/ui": "workspace:*",
+		"bun-types": "catalog:",
 		"@lucide/svelte": "catalog:",
 		"@sveltejs/adapter-static": "catalog:",
 		"@sveltejs/kit": "catalog:",
diff --git a/apps/honeycrisp/tsconfig.json b/apps/honeycrisp/tsconfig.json
index 4ca3ab621e..643a459564 100644
--- a/apps/honeycrisp/tsconfig.json
+++ b/apps/honeycrisp/tsconfig.json
@@ -1,6 +1,6 @@
 {
 	"extends": ["../../tsconfig.base.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
-		"checkJs": true
-	}
+		"checkJs": true,
+		"types": ["bun-types"]
 }
diff --git a/apps/whispering/package.json b/apps/whispering/package.json
index 2a8f022930..1f7111e867 100644
--- a/apps/whispering/package.json
+++ b/apps/whispering/package.json
@@ -20,6 +20,7 @@
 	"license": "AGPL-3.0",
 	"devDependencies": {
 		"@epicenter/ui": "workspace:*",
+		"bun-types": "catalog:",
 		"@lucide/svelte": "catalog:",
 		"@sveltejs/adapter-static": "catalog:",
 		"@sveltejs/kit": "catalog:",
diff --git a/apps/whispering/tsconfig.json b/apps/whispering/tsconfig.json
index eae1e92704..be5787547f 100644
--- a/apps/whispering/tsconfig.json
+++ b/apps/whispering/tsconfig.json
@@ -1,7 +1,8 @@
 {
 	"extends": ["../../tsconfig.base.json", "./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
-		"checkJs": true
+		"checkJs": true,
+		"types": ["bun-types"]
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
diff --git a/bun.lock b/bun.lock
index d3bc3e57fd..1b4c673ee1 100644
--- a/bun.lock
+++ b/bun.lock
@@ -3279,6 +3279,8 @@
 
     "onnx-proto/protobufjs": ["protobufjs@6.11.4", "", { "dependencies": { "@protobufjs/aspromise": "^1.1.2", "@protobufjs/base64": "^1.1.2", "@protobufjs/codegen": "^2.0.4", "@protobufjs/eventemitter": "^1.1.0", "@protobufjs/fetch": "^1.1.0", "@protobufjs/float": "^1.0.2", "@protobufjs/inquire": "^1.1.0", "@protobufjs/path": "^1.1.2", "@protobufjs/pool": "^1.1.0", "@protobufjs/utf8": "^1.1.0", "@types/long": "^4.0.1", "@types/node": ">=13.7.0", "long": "^4.0.0" }, "bin": { "pbjs": "bin/pbjs", "pbts": "bin/pbts" } }, "sha512-5kQWPaJHi1WoCpjTGszzQ32PG2F4+wRY6BmAT4Vfw56Q2FZ4YZzK20xUYQH4YkfehY1e6QSICrJquM6xXZNcrw=="],
 
+    "opensidian/bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
+
     "ora/string-width": ["string-width@8.2.0", "", { "dependencies": { "get-east-asian-width": "^1.5.0", "strip-ansi": "^7.1.2" } }, "sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw=="],
 
     "paneforge/runed": ["runed@0.23.4", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA=="],