create-obsidian-arrow 0.2.2 → 0.4.0

package/README.md

@@ -45,9 +45,11 @@ prints this hint when it detects nesting.
 ## Update an existing project
 
 The scaffolder is create-only, but `update` refreshes an existing project's
-**managed** tooling (`scripts/`, `skills/`, `docs/`, `.github/`, `.husky/`,
-`biome.json`, agent guides) and merges new `package.json` scripts/deps — it never
-touches your `src/`, `public/`, `index.html`, or build configs:
+**managed** files (`scripts/`, `docs/`, `.github/`, `.husky/`, `biome.json`,
+agent guides, `tools/viewer/`, `tools/router/`, `tools/sandbox/`, `src/main.ts`,
+`src/utilities.css`, `test/`) and merges new `package.json` scripts/deps —
+it never touches `src/components/`, `stories/`, `public/`, `index.html`, or
+build configs:
 
 ```sh
 npx create-obsidian-arrow update            # in the project (or: update <dir>)
@@ -68,10 +70,11 @@ node create-obsidian-arrow/index.mjs update ../my-app   # update
 ## What you get
 
 A full sandbox: client-only Vite + TS, `@arrow-js/core` + `@arrow-js/framework`
-(no SSR), `routeToPage` + Navigation-API router with an `/example` demo, Biome +
-husky pre-commit + `node:test` + GitHub Actions CI, a `skills:install` that pulls
-the agent skills from the published repo, and the `pull-css` script that extracts
-Obsidian's `app.css`.
+(no SSR), `routeToPage` + Navigation-API router, a Storybook-style component
+viewer at `/components` (add `*.stories.ts` files in `stories/`), a live token
+and class reference at `/reference`, Biome + husky pre-commit + `node:test` +
+GitHub Actions CI, a `skills:install` that pulls the agent skills from the
+published repo, and the `pull-css` script that extracts Obsidian's `app.css`.
 
 ## Maintaining the template
 

package/index.mjs

@@ -13,9 +13,11 @@
  * Scaffold copies the vendored template/, restores .gitignore (vendored as
  * _gitignore), names the project, and runs `git init`.
  *
- * Update refreshes only the *managed* tooling files from the template and merges
- * package.json scripts + missing deps — it never touches your src/, public/,
- * index.html, or the core build configs. Use --dry-run to preview.
+ * Update refreshes *managed* files from the template and merges package.json
+ * scripts + missing deps. Managed = scripts/, docs/, .github/, .husky/,
+ * biome.json, AGENTS.md, CLAUDE.md, tools/, src/main.ts, src/utilities.css,
+ * test/. Never touches src/components/, stories/, public/, index.html,
+ * vite.config.ts, tsconfig.json, or .gitignore. Use --dry-run first.
  */
 import { spawnSync } from "node:child_process";
 import fs from "node:fs";
@@ -25,12 +27,29 @@ import { fileURLToPath } from "node:url";
 const here = path.dirname(fileURLToPath(import.meta.url));
 const templateDir = path.join(here, "template");
 
-// Files/dirs the template owns and `update` may overwrite/merge. Everything else
-// (src/, public/, index.html, vite.config.ts, tsconfig.json, lockfile, .gitignore,
-// port-parity.json, …) is treated as user-owned and left alone. Skills aren't
-// here — they're pulled from the published repo via `pnpm skills:update`, not
-// vendored into the scaffold.
-const MANAGED = ["scripts", "docs", ".github", ".husky", "biome.json", "AGENTS.md", "CLAUDE.md"];
+// Files/dirs the template owns and `update` may overwrite/merge.
+//
+// src/components/ and stories/ are user-owned and never touched.
+// tools/ contains all viewer/router/sandbox infrastructure and IS managed.
+// Everything else (public/, index.html, vite.config.ts, tsconfig.json,
+// lockfile, .gitignore, port-parity.json, …) is also user-owned. Skills aren't here — they're pulled from the published
+// repo via `pnpm skills:update`, not vendored into the scaffold.
+const MANAGED = [
+	// Tooling
+	"scripts",
+	"docs",
+	".github",
+	".husky",
+	"biome.json",
+	"AGENTS.md",
+	"CLAUDE.md",
+	// Viewer infrastructure — all managed; src/components/ and stories/ are user-owned
+	"tools",
+	"src/main.ts",
+	"src/utilities.css",
+	// Viewer tests
+	"test",
+];
 
 const argv = process.argv.slice(2);
 const dryRun = argv.includes("--dry-run");
@@ -175,7 +194,7 @@ function update(targetArg) {
 	console.log(
 		dryRun
 			? "\n(dry run — nothing written.)"
-			: "\nLeft alone: src/, public/, index.html, vite.config.ts, tsconfig.json, .gitignore.\nRun `pnpm install` then `pnpm check`. Update skills separately with `pnpm skills:update`.\n"
+			: "\nLeft alone: src/components/, stories/, public/, index.html, vite.config.ts, tsconfig.json, .gitignore.\n(tools/, src/main.ts, src/utilities.css, and test/ were refreshed above.)\nRun `pnpm install` then `pnpm check`. Update skills separately with `pnpm skills:update`.\n"
 	);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-obsidian-arrow",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "Scaffold an Obsidian-styled Arrow.js UI sandbox (pnpm create obsidian-arrow <dir>).",
   "type": "module",
   "bin": {

package/template/AGENTS.md

@@ -10,9 +10,13 @@ This file is the hub — everything else is linked from here:
 
 - [`docs/workflow.md`](docs/workflow.md) — fresh-machine → running workflow.
 - [`skills/`](skills/) — installable domain skills (`pnpm skills:install`):
-  obsidian-arrow-sandbox, arrow-js-obsidian-templates, arrow-js-obsidian-patterns,
-  arrow-js-obsidian-porting (sandbox→plugin parity check), obsidian-arrow-maintenance
-  (updating an existing project).
+  - `obsidian-arrow-sandbox` — running the sandbox, CSS scoping, porting basics.
+  - `obsidian-arrow-stories` — **component + story authoring workflow**: `defineStories` API, variants, children, status flag, DRY patterns, utilities.
+  - `obsidian-arrow-css` — **CSS decision hierarchy**: Obsidian classes → oas-* utilities → custom CSS; token reference; specificity scoping; overrides via variables; auditing for excess CSS.
+  - `arrow-js-obsidian-templates` — Arrow v1.0.6 template syntax + footguns.
+  - `arrow-js-obsidian-patterns` — icons, CSS scoping, lifecycle, reactive state.
+  - `arrow-js-obsidian-porting` — sandbox→plugin parity check (`component-hash`).
+  - `obsidian-arrow-maintenance` — updating an existing project.
 - [`docs/prompts/`](docs/prompts/) — copy-paste agent prompts: `agent-setup.md`
   (scaffold + orient) and `update-existing.md` (update tooling + skills, keep src).
 
@@ -78,6 +82,22 @@ events via `@event` (`@click="${fn}"`), keyed lists via
 `html\`…\`.key(id)`, async sections via `component(asyncFn, { fallback })` wrapped
 in `boundary()`.
 
+## Conventions
+
+- **Check `/reference/classes` first** — Obsidian has semantic classes for most
+  common patterns. Use them before writing any custom CSS.
+- **Use `oas-*` utilities second** (`src/utilities.css`) — flex, gap, padding,
+  margin, typography, border, overflow helpers built on Obsidian's token scale.
+  Prefer `class="oas-flex oas-gap-2"` over `style="display:flex;gap:8px"`.
+- **Custom CSS last** — only when Obsidian has no class and utilities don't cover
+  it. Scope under container + element type, use `var(--…)` tokens for values.
+- Add a story by creating `stories/MyThing.stories.ts` — stories live in the
+  top-level `stories/` directory (not in `src/`). Import via
+  `"../tools/viewer/stories"` and `"../src/components/MyThing"`. See the
+  `obsidian-arrow-stories` skill for the full `defineStories` API (variants,
+  children, status, notes). Browse live tokens at `/reference`, curated classes
+  at `/reference/classes`.
+
 ## CSS scoping
 
 - Use Obsidian's own classes (`.setting-item`, `.clickable-icon`,
@@ -86,7 +106,7 @@ in `boundary()`.
 - Scope any custom rule under a container class + element type (e.g.
   `.oas-frame button.oas-theme-toggle`) so it beats Obsidian's global
   `button:not(.clickable-icon)` rule and never leaks. Sandbox-only chrome lives
-  in `src/sandbox/sandbox.css`; component styling stays on Obsidian classes.
+  in `tools/sandbox/sandbox.css`; component styling stays on Obsidian classes.
 
 ## Verify before claiming done
 
@@ -108,4 +128,10 @@ is mechanical: copy the component file into the plugin's view directory and
 mount it from `ItemView.onOpen()` via `template(this.contentEl)`. If it uses
 `boundary()`/async components, add `@arrow-js/framework` to the plugin and the
 `import '@arrow-js/framework'` side-effect import. Strip any sandbox chrome
-(`src/sandbox/*`) — that stays here.
+(`tools/sandbox/*`) — that stays here.
+
+**Bring `src/utilities.css` along.** Components may use `oas-`-prefixed utility
+classes (flex, gap, padding, typography, border — all built on Obsidian's token
+scale). Copy `src/utilities.css` once into the plugin's styles directory and
+import it there. The `oas-` prefix guarantees no conflict with Obsidian selectors.
+Re-copy when the sandbox file changes (the porting-parity skill covers this).

package/template/README.md

@@ -24,9 +24,10 @@ Then `cd my-app && pnpm install && pnpm pull-css && pnpm dev`. A freshly
 scaffolded project passes `pnpm run ci` out of the box. The initializer's
 template is generated from this repo (`pnpm create:sync`), so it never drifts.
 
-**Update an existing project's tooling** (refreshes the managed files — scripts,
-skills, docs, agent guides, CI, `biome.json` — and merges new `package.json`
-scripts/deps; never touches `src/`, `public/`, `index.html`, or build configs):
+**Update an existing project's tooling** (refreshes managed files — scripts,
+docs, CI, `biome.json`, agent guides, and the viewer/router/sandbox
+infrastructure in `src/` — merges new `package.json` scripts/deps; never
+touches `src/components/`, `stories/`, `public/`, `index.html`, or build configs):
 
 ```sh
 npx create-obsidian-arrow update            # in the project (or: update <dir>)
@@ -86,12 +87,14 @@ typecheck. CI (`.github/workflows/ci.yml`) runs the `ci` script on push/PR.
 
 ## Agent skills
 
-This repo is the source of truth for five [`skills`](https://github.com/vercel-labs/skills)-compatible
+This repo is the source of truth for seven [`skills`](https://github.com/vercel-labs/skills)-compatible
 skills under [`skills/`](skills/) — it's a skill marketplace. Scaffolds **don't
 vendor copies**; they pull from this published repo, so installs are always
 current.
 
-- `obsidian-arrow-sandbox` — running and using this sandbox, and porting to a plugin.
+- `obsidian-arrow-sandbox` — running and using this sandbox, CSS scoping, porting basics.
+- `obsidian-arrow-stories` — **component + story authoring workflow**: the complete `defineStories` API (variants, children, status flag, notes), DRY patterns, utility classes, story viewing, and how to structure sub-components.
+- `obsidian-arrow-css` — **CSS decision hierarchy**: Obsidian classes first, `oas-*` utilities second, custom CSS last; the live token reference (`/reference`), class catalog (`/reference/classes`), specificity scoping, overrides via CSS variables, and auditing components to minimize hand-written CSS.
 - `arrow-js-obsidian-templates` — Arrow v1.0.6 template rules + footguns.
 - `arrow-js-obsidian-patterns` — integration patterns: icons (Lucide / data-icon
   sweep), CSS scoping vs Obsidian globals, mount/unmount lifecycle, reactive state.
@@ -125,6 +128,40 @@ different project root, e.g. an outer repo a scaffold is nested in), `--global`
 forms `SKILLS_AGENT` / `SKILLS_PROJECT_DIR` / `SKILLS_GLOBAL` (and
 `SKIP_SKILLS_INSTALL=1`) influence *that* path.
 
+## Component viewer & reference
+
+**Component viewer (`/components`):** a Storybook-style browser for sandbox
+components. Co-locate a `*.stories.ts` file next to any component and it appears
+in the sidebar and on Home automatically. Stories support named variants,
+drill-in via `children` slugs, and a derived src path shown in the viewer — all
+discovered at build time via `import.meta.glob`.
+
+**Reference index (`/reference`):** all `var(--)` tokens parsed live from
+`app.css`, grouped by category (Size & spacing, Radius, Colors, …) with color
+swatches, size bars, a filter input, theme-aware resolved values, and a copy
+button. `/reference/classes` is a curated catalog of Obsidian pattern classes
+with live previews.
+
+### Add a story
+
+Create `stories/MyThing.stories.ts` — stories live in the top-level `stories/`
+directory, keeping `src/` purely for component code:
+
+```ts
+import { defineStories } from "../tools/viewer/stories";
+import { MyThing } from "../src/components/MyThing";
+
+export default defineStories({
+	description: "What it demonstrates.",
+	status: "draft",
+	variants: { default: () => MyThing() },
+});
+```
+
+It appears in the sidebar and at `/components` automatically; the component path
+shown in the viewer is derived from the filename. Stories are sandbox-only —
+they never port to the plugin.
+
 ## Porting a component into the plugin
 
 Components use only Obsidian classes + `var(--…)` tokens and mount via
@@ -133,6 +170,11 @@ copy the component file into the plugin's view directory and mount it from
 `onOpen()`. If it uses `boundary()`/async components, add `@arrow-js/framework`
 to the plugin and the `import '@arrow-js/framework'` side-effect import.
 
+Also copy `src/utilities.css` into the plugin once — components may use `oas-`
+utility classes (flex, gap, padding, typography, border helpers built on
+Obsidian's token scale). The `oas-` prefix means no conflicts with Obsidian's
+own selectors. All ported components in a plugin share one copy of this file.
+
 ## Arrow v1.0.6 footguns (learned the hard way)
 
 These are enforced/encoded so they don't regress:

package/template/_gitignore

@@ -10,3 +10,6 @@ dist
 # Obsidian's app.css is proprietary — extract it locally with `pnpm pull-css`,
 # don't commit/redistribute it.
 public/app.css
+
+# subagent-driven-development scratch (briefs, reports, ledger)
+.superpowers/

package/template/docs/prompts/agent-setup.md

@@ -30,7 +30,8 @@ Then:
                     # committed; it's Obsidian's proprietary CSS). Auto-detect is
                     # macOS-only; on Windows/WSL pass --path <obsidian.asar|app.css>
                     # or set OBSIDIAN_ASAR=<path>.
-  pnpm dev          # open the printed URL: / is the examples index, /example the demo.
+  pnpm dev          # open the printed URL: / is home, /components the story viewer,
+                    # /reference the Obsidian token/class index.
                     # The toolbar slider/presets + edge drag handle resize the panel.
   pnpm skills:install --yes   # install all agent skills non-interactively, pulled
                               # from the published repo (not vendored) — this loads
@@ -42,11 +43,17 @@ Then:
 READ FIRST
 - AGENTS.md (root) — operating guide + docs map (links everything below).
 - docs/workflow.md — fresh-machine → running workflow.
-- skills/*/SKILL.md — obsidian-arrow-sandbox (workflow), arrow-js-obsidian-
-  templates (template syntax + footguns), arrow-js-obsidian-patterns (icons via
-  Lucide/data-icon sweep, CSS scoping, mount/unmount lifecycle, reactive state),
-  arrow-js-obsidian-porting (sandbox→plugin parity check),
-  obsidian-arrow-maintenance (updating an existing project).
+- skills/*/SKILL.md — seven installable skills:
+    obsidian-arrow-sandbox    running the sandbox, CSS scoping, porting basics
+    obsidian-arrow-stories    component + story authoring: defineStories API,
+                              variants, children, status, DRY patterns, utilities
+    obsidian-arrow-css        CSS decision hierarchy: Obsidian classes → oas-*
+                              utilities → custom CSS; token/class reference;
+                              scoping rules; overrides via variables; CSS audit
+    arrow-js-obsidian-templates  template syntax + hard footguns
+    arrow-js-obsidian-patterns   icons, CSS scoping, lifecycle, reactive state
+    arrow-js-obsidian-porting    sandbox→plugin parity check
+    obsidian-arrow-maintenance   updating an existing project
 
 ARROW v1.0.6 FOOTGUNS — do not relearn these the hard way:
 1. NO literal HTML comments inside html`` templates — Arrow treats HTML comments
@@ -67,9 +74,11 @@ CONVENTIONS
   .vertical-tab-*, .modal, .mod-cta) and var(--…) tokens first; add custom CSS
   only when Obsidian has no class, scoped under a container class + element type
   (e.g. `.my-panel button.my-action`) so it beats Obsidian's global button rule.
-- Sandbox-only chrome lives in src/sandbox/* — it does NOT port to a plugin.
-- Add a demo by exporting an Arrow component and registering it in
-  src/examples/registry.ts (it shows on the index and at its own route).
+- Sandbox-only chrome lives in tools/sandbox/* — it does NOT port to a plugin.
+- Add a story by creating `stories/MyThing.stories.ts` (top-level `stories/`
+  dir, NOT in `src/`). Import: `"../tools/viewer/stories"` and
+  `"../src/components/MyThing"`. It appears at `/components/<slug>` automatically.
+  Browse tokens at `/reference`, curated classes at `/reference/classes`.
 
 VERIFY BEFORE CLAIMING DONE
 - `pnpm typecheck && pnpm test && pnpm lint` (or `pnpm run ci` for the full chain).
@@ -81,15 +90,19 @@ PORTING TO A PLUGIN
 Copy the component file into the plugin's view dir and mount from
 ItemView.onOpen() via `template(this.contentEl)`. If it uses boundary()/async
 components, add @arrow-js/framework to the plugin and the side-effect
-`import '@arrow-js/framework'`. Leave src/sandbox/* behind. Guard against drift
-with the porting-parity check (see the arrow-js-obsidian-porting skill).
+`import '@arrow-js/framework'`. Also copy src/utilities.css into the plugin once
+(all ported components share it) — components may use oas-* utility classes
+(flex, gap, padding, text, border helpers built on Obsidian's token scale).
+Leave tools/sandbox/* behind. Guard against drift with the porting-parity check
+(see the arrow-js-obsidian-porting skill).
 
 MAINTENANCE (existing project)
-Refresh tooling later with `npx create-obsidian-arrow update` (preserves src/),
+Refresh tooling with `npx create-obsidian-arrow update` (preserves src/components/
+and stories/ — updates viewer, router, sandbox, utilities, and tooling files),
 update skills with `pnpm skills:update`. See the obsidian-arrow-maintenance skill.
 
 Start by scaffolding, running setup steps, then read AGENTS.md and confirm
-`pnpm dev` renders /example correctly. Report what you see.
+`pnpm dev` renders correctly at /components and /reference. Report what you see.
 ```
 
 ---

package/template/docs/prompts/update-existing.md

@@ -11,10 +11,12 @@ Update this existing Obsidian Arrow project to the latest tooling and agent
 skills. Do NOT change any of my source code.
 
 HARD CONSTRAINTS
-- Never modify src/, public/, index.html, vite.config.ts, tsconfig.json, or my
-  component/app code. Only managed tooling, skills, and docs may change.
+- Never modify src/components/, stories/, public/, index.html, vite.config.ts,
+  tsconfig.json, or my component/app code. Only managed tooling, skills, docs,
+  and the viewer/router/sandbox infrastructure in src/ may change.
 - Preview before applying anything destructive; don't commit unless I ask.
-- At the end, prove src/ was untouched (`git diff --stat` shows no src/ changes).
+- At the end, prove src/components/ and stories/ were untouched
+  (`git diff --stat` shows no changes to those paths).
 
 CONTEXT
 Scaffolded from create-obsidian-arrow. Tooling + agent skills come from the
@@ -29,12 +31,14 @@ STEPS (in order)
      project dir. If the OUTER root differs, that's where skills must be installed
      so the session's skill:// registry (repo-root + global only) can find them.
 
-2. Refresh tooling — preserves src/
+2. Refresh tooling — preserves src/components/ only
    - Preview:  npx create-obsidian-arrow update --dry-run
    - Apply:    npx create-obsidian-arrow update
    - Then:     pnpm install
-   Refreshes scripts/, docs/, .github/, .husky/, biome.json, AGENTS.md, CLAUDE.md
-   and merges package.json scripts/deps. It never touches src/, public/, or configs.
+   Refreshes scripts/, docs/, .github/, .husky/, biome.json, AGENTS.md, CLAUDE.md,
+   tools/, src/main.ts, src/utilities.css, test/,
+   and merges package.json scripts/deps. It never touches src/components/, public/,
+   index.html, vite.config.ts, tsconfig.json, or .gitignore.
 
 3. Reset agent skills to the current set
    - Audit:   npx skills list
@@ -60,7 +64,7 @@ STEPS (in order)
 
 7. Verify
    - pnpm run ci          (biome + typecheck + tests + build)
-   - pnpm dev             and confirm /example renders with a clean console
+   - pnpm dev             and confirm /components and /reference render with a clean console
 
 REPORT
 - What `update` changed, which skills are now installed and where, the pull-css
@@ -73,6 +77,6 @@ REPORT
 - Skills are pulled from the published repo, so step 3 is location-independent for
   the *source* — only the *install location* matters (run it at the repo root the
   agent uses; reload after).
-- `npx create-obsidian-arrow update` is **create-only-safe**: it refreshes managed
-  files and merges `package.json`, but never overwrites `src/`, `public/`,
+- `npx create-obsidian-arrow update` refreshes managed files and merges
+  `package.json`, but never overwrites `src/components/`, `stories/`, `public/`,
   `index.html`, or build configs. See the `obsidian-arrow-maintenance` skill.

package/template/docs/workflow.md

@@ -25,7 +25,8 @@ pnpm pull-css                            # macOS: auto-detects /Applications/Obs
                                          #        or  OBSIDIAN_ASAR=<path> pnpm pull-css
 
 # 4. Run it
-pnpm dev                                 # open the printed URL — / is the index, /example the demo
+pnpm dev                                 # open the printed URL — / is home, /components the story
+                                         # viewer, /reference the token/class index
 ```
 
 `public/app.css` is **git-ignored and never shipped** (it's Obsidian's proprietary
@@ -48,14 +49,22 @@ Then point the agent at [`AGENTS.md`](../AGENTS.md), or brief a fresh agent with
 `skills` CLI is cwd-relative). To install them at the outer repo instead:
 `pnpm skills:install --yes --project-dir=<outer-repo>` (or `--global`).
 
-**Refresh an existing project's tooling** (scripts, skills, docs, CI — never your
-`src/`): `npx create-obsidian-arrow update` (add `--dry-run` to preview).
+**Refresh an existing project's tooling** (scripts, docs, CI, viewer/router/sandbox
+in `src/` — never `src/components/` or `stories/`):
+`npx create-obsidian-arrow update` (add `--dry-run` to preview).
 
 ## Build → verify → port loop
 
 ```sh
-# add a component in src/components/, register it in src/examples/registry.ts
+# 1. Check /reference/classes in the running sandbox — does Obsidian have a class
+#    for your pattern? Use it before writing custom CSS.
+# 2. Add src/components/MyThing.ts (Arrow component)
+# 3. Add stories/MyThing.stories.ts (story file — lives in stories/, not src/)
 pnpm dev          # iterate with HMR
+#    /components          → index of all discovered stories
+#    /components/my-thing → story for MyThing
+#    /reference           → live Obsidian token reference
+#    /reference/classes   → curated class catalog with live previews
 pnpm run ci       # biome + typecheck + tests + build before trusting it
 ```
 
@@ -63,10 +72,14 @@ Always confirm the actual render in the browser — Arrow's footguns surface onl
 at render, so a passing `tsc` is not proof a component works. See the footguns in
 [`AGENTS.md`](../AGENTS.md) and the `arrow-js-obsidian-templates` skill.
 
-**Port a component into a plugin:** copy the file into the plugin's view directory
-and mount it from `ItemView.onOpen()` via `template(this.contentEl)`. If it uses
-`boundary()`/async components, add `@arrow-js/framework` to the plugin and the
-side-effect `import '@arrow-js/framework'`. Leave `src/sandbox/*` behind.
+For the complete story authoring workflow (`defineStories` API, variants, children,
+status flag, DRY patterns) see the `obsidian-arrow-stories` skill.
+
+**Port a component into a plugin:** copy the component file and `src/utilities.css`
+(once, shared by all ports) into the plugin. Mount from `ItemView.onOpen()` via
+`template(this.contentEl)`. If it uses `boundary()`/async, add
+`@arrow-js/framework` and `import '@arrow-js/framework'`. Leave `tools/sandbox/*`
+behind.
 
 ## Scaffold vs. clone
 

package/template/package.json

@@ -14,7 +14,7 @@
 		"create:sync": "node create-obsidian-arrow/scripts/sync-template.mjs",
 		"lint": "biome check .",
 		"format": "biome check --write .",
-		"test": "node --test test/*.test.mjs",
+		"test": "node --experimental-strip-types --test test/*.test.mjs",
 		"check": "biome check --write . && pnpm typecheck && pnpm test",
 		"ci": "biome ci . && pnpm typecheck && pnpm test && pnpm build",
 		"skills:install": "node scripts/install-skills.mjs --force",
@@ -27,7 +27,11 @@
 	},
 	"dependencies": {
 		"@arrow-js/core": "^1.0.6",
-		"@arrow-js/framework": "^1.0.6"
+		"@arrow-js/framework": "^1.0.6",
+		"@codemirror/lang-markdown": "^6.5.0",
+		"@codemirror/merge": "^6.12.2",
+		"@codemirror/state": "^6.7.0",
+		"@codemirror/view": "^6.43.4"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",