create-obsidian-arrow 0.2.2 → 0.4.0

package/template/pnpm-lock.yaml

@@ -14,6 +14,18 @@ importers:
       '@arrow-js/framework':
         specifier: ^1.0.6
         version: 1.0.6
+      '@codemirror/lang-markdown':
+        specifier: ^6.5.0
+        version: 6.5.0
+      '@codemirror/merge':
+        specifier: ^6.12.2
+        version: 6.12.2
+      '@codemirror/state':
+        specifier: ^6.7.0
+        version: 6.7.0
+      '@codemirror/view':
+        specifier: ^6.43.4
+        version: 6.43.4
     devDependencies:
       '@biomejs/biome':
         specifier: ^1.9.4
@@ -99,6 +111,36 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@codemirror/autocomplete@6.20.3':
+    resolution: {integrity: sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==}
+
+  '@codemirror/lang-css@6.3.1':
+    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
+
+  '@codemirror/lang-html@6.4.11':
+    resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==}
+
+  '@codemirror/lang-javascript@6.2.5':
+    resolution: {integrity: sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==}
+
+  '@codemirror/lang-markdown@6.5.0':
+    resolution: {integrity: sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==}
+
+  '@codemirror/language@6.12.4':
+    resolution: {integrity: sha512-1q4PaT+o6PbgpkJt4Q8Fv5XJxTy4FUZ4MWETtyiDw3J0Pyr9E2vqcKL+k9wcvjNTIsauxvE7OfmWj3FRPHQ76A==}
+
+  '@codemirror/lint@6.9.7':
+    resolution: {integrity: sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==}
+
+  '@codemirror/merge@6.12.2':
+    resolution: {integrity: sha512-V8JvyAPjHbPupqP7BeMcsdsYCbyPij74jxIbaIJDORI+VZzW44zFmon8bF+oxGWvOKhcRmkiUMXd8MxHr3YA2w==}
+
+  '@codemirror/state@6.7.0':
+    resolution: {integrity: sha512-Zbl9NyscLMZkfXPQnNAIIAFftidrA1UbcJEIMp24C0Bukc2I5T8wJS0wsXYsnDOqCFJUeJ1BITGNs5CqPDSmSg==}
+
+  '@codemirror/view@6.43.4':
+    resolution: {integrity: sha512-YImu23iyKfncJzT7sRy+rEqEhSc8RhOHqDxwy4WzXRKJwYm6iwf/9OJk5ctCAdZ6yi2ZqaGEvmf55fSVqMDrgg==}
+
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
     engines: {node: '>=18'}
@@ -136,6 +178,30 @@ packages:
   '@emnapi/wasi-threads@1.2.2':
     resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
 
+  '@lezer/common@1.5.2':
+    resolution: {integrity: sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==}
+
+  '@lezer/css@1.3.4':
+    resolution: {integrity: sha512-N+tn9tej2hPvyKgHEApMOQfHczDJCwxrRFS3SPn9QjYN+uwHvEDnCgKRrb3mxDYxRS8sKMM8fhC3+lc04Abz5Q==}
+
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+
+  '@lezer/html@1.3.13':
+    resolution: {integrity: sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==}
+
+  '@lezer/javascript@1.5.4':
+    resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
+
+  '@lezer/lr@1.4.10':
+    resolution: {integrity: sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==}
+
+  '@lezer/markdown@1.6.4':
+    resolution: {integrity: sha512-N0SxazMj4k65DBfaf1azqtMZd6u7MqluP84/NZnB/io8Td9aleFmAhz9hcbvSfsxT5tdYlJ5qgv5aMJGY4zEtA==}
+
+  '@marijn/find-cluster-break@1.0.3':
+    resolution: {integrity: sha512-FY+MKLBoTsLNJF/eLWaOsXGdz6uh3Iu1axjPf6TUq92IYumcTcXWHoS747JARLkcdlJ/Waiaxc5wQfFO8jC6NA==}
+
   '@napi-rs/wasm-runtime@1.1.6':
     resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
     peerDependencies:
@@ -288,6 +354,9 @@ packages:
     resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
     engines: {node: '>=18'}
 
+  crelt@1.0.7:
+    resolution: {integrity: sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -648,6 +717,9 @@ packages:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
 
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
+
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -731,6 +803,9 @@ packages:
       yaml:
         optional: true
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -843,6 +918,87 @@ snapshots:
   '@biomejs/cli-win32-x64@1.9.4':
     optional: true
 
+  '@codemirror/autocomplete@6.20.3':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+
+  '@codemirror/lang-css@6.3.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@lezer/common': 1.5.2
+      '@lezer/css': 1.3.4
+
+  '@codemirror/lang-html@6.4.11':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-javascript': 6.2.5
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/css': 1.3.4
+      '@lezer/html': 1.3.13
+
+  '@codemirror/lang-javascript@6.2.5':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/lint': 6.9.7
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/javascript': 1.5.4
+
+  '@codemirror/lang-markdown@6.5.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/markdown': 1.6.4
+
+  '@codemirror/language@6.12.4':
+    dependencies:
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+      style-mod: 4.1.3
+
+  '@codemirror/lint@6.9.7':
+    dependencies:
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      crelt: 1.0.7
+
+  '@codemirror/merge@6.12.2':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.0
+      '@codemirror/view': 6.43.4
+      '@lezer/highlight': 1.2.3
+      style-mod: 4.1.3
+
+  '@codemirror/state@6.7.0':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.3
+
+  '@codemirror/view@6.43.4':
+    dependencies:
+      '@codemirror/state': 6.7.0
+      crelt: 1.0.7
+      style-mod: 4.1.3
+      w3c-keyname: 2.2.8
+
   '@csstools/color-helpers@5.1.0': {}
 
   '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
@@ -879,6 +1035,41 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@lezer/common@1.5.2': {}
+
+  '@lezer/css@1.3.4':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/highlight@1.2.3':
+    dependencies:
+      '@lezer/common': 1.5.2
+
+  '@lezer/html@1.3.13':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/javascript@1.5.4':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/lr@1.4.10':
+    dependencies:
+      '@lezer/common': 1.5.2
+
+  '@lezer/markdown@1.6.4':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+
+  '@marijn/find-cluster-break@1.0.3': {}
+
   '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
     dependencies:
       '@emnapi/core': 1.11.1
@@ -986,6 +1177,8 @@ snapshots:
 
   commander@13.1.0: {}
 
+  crelt@1.0.7: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -1326,6 +1519,8 @@ snapshots:
 
   strip-final-newline@3.0.0: {}
 
+  style-mod@4.1.3: {}
+
   symbol-tree@3.2.4: {}
 
   tinyglobby@0.2.17:
@@ -1372,6 +1567,8 @@ snapshots:
       fsevents: 2.3.3
       yaml: 2.9.0
 
+  w3c-keyname@2.2.8: {}
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0

package/template/src/components/DiffViewer.ts

@@ -0,0 +1,42 @@
+import type { ArrowExpression } from "@arrow-js/core";
+import { markdown } from "@codemirror/lang-markdown";
+import { MergeView } from "@codemirror/merge";
+import { EditorState } from "@codemirror/state";
+
+export interface DiffViewerOptions {
+	original: string;
+	modified: string;
+	/** Which side shows original (a) and which shows modified (b). Default: a-b */
+	orientation?: "a-b" | "b-a";
+}
+
+/**
+ * CodeMirror 6 MergeView — side-by-side diff using the same CM6 engine as
+ * Obsidian's editor. Obsidian's app.css styles .cm-* classes automatically,
+ * so this looks native without additional theming.
+ *
+ * Arrow's ArrowExpression type doesn't include Node but accepts it at runtime.
+ * The cast is intentional — CM6 manages its own DOM and Arrow inserts it as-is.
+ */
+export function DiffViewer(options: DiffViewerOptions): ArrowExpression {
+	const el = document.createElement("div");
+	el.className = "oas-diff-viewer";
+
+	new MergeView({
+		a: {
+			doc: options.original,
+			extensions: [markdown(), EditorState.readOnly.of(true)],
+		},
+		b: {
+			doc: options.modified,
+			extensions: [markdown(), EditorState.readOnly.of(true)],
+		},
+		parent: el,
+		orientation: options.orientation ?? "a-b",
+		highlightChanges: true,
+		collapseUnchanged: { margin: 3, minSize: 4 },
+	});
+
+	// biome-ignore lint/suspicious/noExplicitAny: Arrow accepts Node at runtime; type doesn't include it
+	return el as unknown as ArrowExpression;
+}

package/template/src/components/SettingsPanel.ts

@@ -70,7 +70,7 @@ function rebuildIndex(): void {
  * live state; clicking flips it in place (deep reactivity re-runs only the
  * tracked expressions below — no list re-render).
  */
-const Toggle = (enabled: () => boolean, onToggle: () => void): ArrowTemplate => html`<div
+export const Toggle = (enabled: () => boolean, onToggle: () => void): ArrowTemplate => html`<div
     class="${() => `checkbox-container${enabled() ? " is-enabled" : ""}`}"
     @click="${onToggle}"
   >

package/template/src/main.ts

@@ -2,9 +2,10 @@
 // This is the one extra line a plugin would add to adopt @arrow-js/framework.
 import "@arrow-js/framework";
 
-import { startRouter } from "./router/client";
-import { applyTheme } from "./sandbox/theme";
-import "./sandbox/sandbox.css";
+import { startRouter } from "../tools/router/client";
+import { applyTheme } from "../tools/sandbox/theme";
+import "./utilities.css";
+import "../tools/sandbox/sandbox.css";
 
 applyTheme();
 

package/template/src/utilities.css

@@ -0,0 +1,205 @@
+/*
+ * Portable utility classes for Obsidian Arrow components.
+ *
+ * These travel with component ports into the plugin — copy this file once into
+ * the plugin's styles directory and import it alongside your component CSS.
+ * All classes are prefixed `oas-` to avoid any conflict with Obsidian's own
+ * selectors. Values use Obsidian's CSS custom property scale so they track the
+ * active theme automatically.
+ */
+
+/* ── Layout ──────────────────────────────────────────────────── */
+.oas-flex {
+	display: flex;
+}
+.oas-inline-flex {
+	display: inline-flex;
+}
+.oas-flex-col {
+	flex-direction: column;
+}
+.oas-flex-wrap {
+	flex-wrap: wrap;
+}
+.oas-items-start {
+	align-items: flex-start;
+}
+.oas-items-center {
+	align-items: center;
+}
+.oas-items-end {
+	align-items: flex-end;
+}
+.oas-items-baseline {
+	align-items: baseline;
+}
+.oas-justify-start {
+	justify-content: flex-start;
+}
+.oas-justify-center {
+	justify-content: center;
+}
+.oas-justify-end {
+	justify-content: flex-end;
+}
+.oas-justify-between {
+	justify-content: space-between;
+}
+.oas-grow {
+	flex: 1;
+}
+.oas-shrink-0 {
+	flex-shrink: 0;
+}
+
+/* ── Spacing (Obsidian 4-px step scale) ─────────────────────── */
+.oas-gap-1 {
+	gap: var(--size-4-1);
+}
+.oas-gap-2 {
+	gap: var(--size-4-2);
+}
+.oas-gap-3 {
+	gap: var(--size-4-3);
+}
+.oas-gap-4 {
+	gap: var(--size-4-4);
+}
+.oas-p-1 {
+	padding: var(--size-4-1);
+}
+.oas-p-2 {
+	padding: var(--size-4-2);
+}
+.oas-p-3 {
+	padding: var(--size-4-3);
+}
+.oas-p-4 {
+	padding: var(--size-4-4);
+}
+.oas-px-2 {
+	padding-inline: var(--size-4-2);
+}
+.oas-px-3 {
+	padding-inline: var(--size-4-3);
+}
+.oas-py-1 {
+	padding-block: var(--size-4-1);
+}
+.oas-py-2 {
+	padding-block: var(--size-4-2);
+}
+.oas-py-3 {
+	padding-block: var(--size-4-3);
+}
+.oas-mt-1 {
+	margin-top: var(--size-4-1);
+}
+.oas-mt-2 {
+	margin-top: var(--size-4-2);
+}
+.oas-mt-3 {
+	margin-top: var(--size-4-3);
+}
+.oas-mb-1 {
+	margin-bottom: var(--size-4-1);
+}
+.oas-mb-2 {
+	margin-bottom: var(--size-4-2);
+}
+.oas-mb-3 {
+	margin-bottom: var(--size-4-3);
+}
+.oas-ml-auto {
+	margin-left: auto;
+}
+
+/* ── Sizing ──────────────────────────────────────────────────── */
+.oas-w-full {
+	width: 100%;
+}
+.oas-min-w-0 {
+	min-width: 0;
+}
+.oas-min-h-0 {
+	min-height: 0;
+}
+
+/* ── Typography ──────────────────────────────────────────────── */
+.oas-text-xs {
+	font-size: var(--font-ui-smaller);
+}
+.oas-text-sm {
+	font-size: var(--font-ui-small);
+}
+.oas-text-md {
+	font-size: var(--font-ui-medium);
+}
+.oas-font-medium {
+	font-weight: var(--font-medium);
+}
+.oas-font-semibold {
+	font-weight: var(--font-semibold);
+}
+.oas-font-mono {
+	font-family: var(--font-monospace);
+}
+.oas-leading-1 {
+	line-height: 1;
+}
+.oas-text-normal {
+	color: var(--text-normal);
+}
+.oas-text-muted {
+	color: var(--text-muted);
+}
+.oas-text-faint {
+	color: var(--text-faint);
+}
+.oas-text-accent {
+	color: var(--text-accent);
+}
+.oas-text-success {
+	color: var(--text-success);
+}
+.oas-text-error {
+	color: var(--text-error);
+}
+
+/* ── Overflow ────────────────────────────────────────────────── */
+.oas-truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.oas-overflow-hidden {
+	overflow: hidden;
+}
+.oas-overflow-auto {
+	overflow: auto;
+}
+
+/* ── Border ──────────────────────────────────────────────────── */
+.oas-border {
+	border: 1px solid var(--background-modifier-border);
+}
+.oas-border-b {
+	border-bottom: 1px solid var(--background-modifier-border);
+}
+.oas-border-t {
+	border-top: 1px solid var(--background-modifier-border);
+}
+.oas-rounded-s {
+	border-radius: var(--radius-s);
+}
+.oas-rounded-m {
+	border-radius: var(--radius-m);
+}
+
+/* ── Interaction ─────────────────────────────────────────────── */
+.oas-cursor-pointer {
+	cursor: pointer;
+}
+.oas-select-none {
+	user-select: none;
+}

package/template/stories/DiffViewer.stories.ts

@@ -0,0 +1,75 @@
+import { DiffViewer } from "../src/components/DiffViewer";
+import { defineStories } from "../tools/viewer/stories";
+
+const ORIGINAL = `---
+title: Meeting Notes
+status: draft
+---
+
+# Team Standup
+
+Quick notes from today's standup.
+
+## Done
+
+- Reviewed the PR for the search panel
+- Fixed the token filter in the reference viewer
+
+## In Progress
+
+- Arrow component for the diff viewer
+- Documentation updates
+
+## Notes
+
+See the project board for full task breakdown.
+`;
+
+const MODIFIED = `---
+title: Meeting Notes
+status: complete
+tags: [standup, team]
+---
+
+# Team Standup — 2026-07-02
+
+Notes from today's standup.
+
+## Done
+
+- Reviewed and merged the PR for the search panel
+- Fixed the token filter in the reference viewer
+- Added DiffViewer component to the sandbox
+
+## In Progress
+
+- Documentation updates
+- Editor pane integration
+
+## Notes
+
+See the project board for full task breakdown.
+Next standup: Thursday.
+`;
+
+const SHORT_ORIGINAL = `function greet(name: string): string {
+	return "Hello, " + name;
+}
+`;
+
+const SHORT_MODIFIED = `function greet(name: string, greeting = "Hello"): string {
+	return \`\${greeting}, \${name}!\`;
+}
+`;
+
+export default defineStories({
+	description:
+		"CodeMirror 6 MergeView — side-by-side diff using the same engine as Obsidian's editor. Changed lines highlight inline; unchanged sections collapse.",
+	status: "draft",
+	variants: {
+		"markdown document": () => DiffViewer({ original: ORIGINAL, modified: MODIFIED }),
+		"code snippet": () => DiffViewer({ original: SHORT_ORIGINAL, modified: SHORT_MODIFIED }),
+		"reversed (b-a)": () =>
+			DiffViewer({ original: ORIGINAL, modified: MODIFIED, orientation: "b-a" }),
+	},
+});

package/template/stories/SettingsPanel.stories.ts

@@ -0,0 +1,11 @@
+import { SettingsPanel } from "../src/components/SettingsPanel";
+import { defineStories } from "../tools/viewer/stories";
+
+export default defineStories({
+	description: "Vertical tabs, toggles, a keyed list, and an async boundary() section.",
+	status: "live",
+	variants: {
+		default: () => SettingsPanel(),
+	},
+	children: ["toggle"],
+});

package/template/stories/Toggle.stories.ts

@@ -0,0 +1,28 @@
+import { reactive } from "@arrow-js/core";
+import { Toggle } from "../src/components/SettingsPanel";
+import { defineStories } from "../tools/viewer/stories";
+
+export default defineStories({
+	description: "Obsidian checkbox-container toggle used by SettingsPanel.",
+	componentPath: "src/components/SettingsPanel.ts",
+	status: "live",
+	variants: {
+		interactive: () => {
+			const state = reactive({ on: true });
+			return Toggle(
+				() => state.on,
+				() => {
+					state.on = !state.on;
+				}
+			);
+		},
+		off: {
+			render: () =>
+				Toggle(
+					() => false,
+					() => {}
+				),
+			notes: "Static off state (click does nothing).",
+		},
+	},
+});