create-obsidian-arrow 0.5.1 → 0.5.2

package/template/tools/sandbox/toolbar.ts

@@ -1,32 +1,43 @@
 import { html } from "@arrow-js/core";
 import type { ArrowTemplate } from "@arrow-js/core";
-import { MIN_WIDTH, WIDTH_PRESETS, layoutState, setWidth } from "./layout";
+import { MIN_WIDTH, WIDTH_PRESETS, layoutState, pageState, setWidth } from "./layout";
+import { themeState, toggleTheme } from "./theme";
 
 /**
- * Sandbox toolbar above the pane: panel-width controls for testing components
- * at the widths a real Obsidian side panel can be dragged to. Sandbox chrome —
- * not part of the component under test.
+ * Sandbox toolbar: home, breadcrumb, panel-width controls, and theme toggle.
+ * All sandbox-global chrome lives here so the story panels stay content-only.
  */
 const onRangeInput = (event: Event): void => {
 	setWidth(Number((event.target as HTMLInputElement).value));
 };
 
 export const Toolbar = (): ArrowTemplate => html`
-	<div class="oas-toolbar">
-		<span class="oas-toolbar-label">Panel width</span>
+	<div class="oasbox-toolbar">
+		<a class="clickable-icon oasbox-home" href="/" aria-label="Home">⌂</a>
+		${() =>
+			pageState.breadcrumb
+				? html`<span class="oasbox-breadcrumb">${() => pageState.breadcrumb}</span>`
+				: ""}
+		<div class="oasbox-toolbar-divider"></div>
+		<span class="oasbox-toolbar-label">Panel width</span>
 		<input
-			class="oas-width-range"
+			class="oasbox-width-range"
 			type="range"
 			min="${MIN_WIDTH}"
 			max="${() => window.innerWidth}"
 			.value="${() => String(layoutState.width)}"
 			@input="${onRangeInput}"
 		/>
-		<span class="oas-width-readout">${() => `${layoutState.width}px`}</span>
+		<span class="oasbox-width-readout">${() => `${layoutState.width}px`}</span>
 		${WIDTH_PRESETS.map((width) =>
-			html`<button class="oas-preset" @click="${() => setWidth(width)}">${width}</button>`.key(
+			html`<button class="oasbox-preset" @click="${() => setWidth(width)}">${width}</button>`.key(
 				width
 			)
 		)}
+		<button
+			class="clickable-icon oasbox-theme-toggle"
+			aria-label="Toggle theme"
+			@click="${toggleTheme}"
+		>${() => (themeState.theme === "theme-dark" ? "☾" : "☀")}</button>
 	</div>
 `;

package/template/tools/viewer/ClassesPage.ts

@@ -4,7 +4,7 @@ import { classGroups } from "./obsidian-classes";
 
 export const ClassesPage = component(() => {
 	return html`
-		<div class="oas-reference">
+		<div class="oasbox-reference">
 			<div class="setting-item setting-item-heading">
 				<div class="setting-item-info">
 					<div class="setting-item-name">Obsidian classes</div>
@@ -15,17 +15,17 @@ export const ClassesPage = component(() => {
 			</div>
 			${classGroups.map(
 				(group) => html`
-				<div class="oas-class-group">
+				<div class="oasbox-class-group">
 					<div class="vertical-tab-header-group-title">${group.label}</div>
 					${group.entries.map(
 						(entry) => html`
-						<div class="oas-class-entry">
-							<div class="oas-class-head">
+						<div class="oasbox-class-entry">
+							<div class="oasbox-class-head">
 								<code>${entry.className}</code>
-								<button class="oas-copy" @click="${() => copyText(entry.className)}">Copy</button>
+								<button class="oasbox-copy" @click="${() => copyText(entry.className)}">Copy</button>
 							</div>
-							<div class="oas-class-when">${entry.whenToUse}</div>
-							<div class="oas-class-preview">${entry.preview()}</div>
+							<div class="oasbox-class-when">${entry.whenToUse}</div>
+							<div class="oasbox-class-preview">${entry.preview()}</div>
 						</div>
 					`
 					)}

package/template/tools/viewer/ComponentsIndex.ts

@@ -5,7 +5,7 @@ import { stories } from "./discovery";
 export function ComponentsIndex(): ArrowExpression {
 	if (stories.length === 0) {
 		return html`
-			<div class="oas-settings">
+			<div class="oasbox-settings">
 				<div class="setting-item setting-item-heading">
 					<div class="setting-item-info">
 						<div class="setting-item-name">Components</div>
@@ -18,7 +18,7 @@ export function ComponentsIndex(): ArrowExpression {
 		`;
 	}
 	return html`
-		<div class="oas-settings">
+		<div class="oasbox-settings">
 			<div class="setting-item setting-item-heading">
 				<div class="setting-item-info">
 					<div class="setting-item-name">Components</div>
@@ -46,7 +46,7 @@ export function ComponentsIndex(): ArrowExpression {
 							}
 						</div>
 						<div class="setting-item-control">
-							<a class="mod-cta oas-open-link" href="${path}">Open →</a>
+							<a class="mod-cta oasbox-open-link" href="${path}">Open →</a>
 						</div>
 					</div>
 				`.key(story.slug);

package/template/tools/viewer/StoryPage.ts

@@ -9,59 +9,61 @@ export function copyText(text: string): void {
 
 function pathRow(label: string, path: string): ArrowExpression {
 	return html`
-		<div class="oas-story-path">
-			<span class="oas-path-label">${label}</span>
-			<code>${path}</code>
-			<button class="oas-copy" @click="${() => copyText(path)}">Copy</button>
+		<div class="oasbox-story-path">
+			<span class="oasbox-path-label">${label}</span>
+			<code class="oasbox-path-code" title="${path}">${path}</code>
+			<button class="oasbox-copy" @click="${() => copyText(path)}">Copy</button>
 		</div>
 	`;
 }
 
-/** Metadata panel: title, status, variant tabs, notes, paths, children.
- *  No rendered component — used for kind: "component" left panel. */
+/** Metadata panel: story info, references, variants, notes, children.
+ *  Sections are visually separated with labels. Used as the left panel for
+ *  both component and view stories. */
 export function StoryPageDetails(story: DiscoveredStory, variantName: string): ArrowExpression {
 	const variantNames = Object.keys(story.variants);
 	const variant = story.variants[variantName];
+	const badge =
+		story.status === "live"
+			? html`<span class="oas-badge is-live">live</span>`
+			: html`<span class="oas-badge is-draft">draft</span>`;
+
 	return html`
-		<div class="oas-story">
-			<div class="setting-item setting-item-heading">
-				<div class="setting-item-info">
-					<div class="setting-item-name">
-						${story.title}
-						${
-							story.status === "live"
-								? html`<span class="oas-badge is-live">live</span>`
-								: html`<span class="oas-badge is-draft">draft</span>`
-						}
-					</div>
-					${
-						story.description
-							? html`<div class="setting-item-description">${story.description}</div>`
-							: ""
-					}
-				</div>
+		<div class="oasbox-story">
+			<div class="oasbox-story-header">
+				<div class="oasbox-story-title">${story.title} ${badge}</div>
+				${story.description ? html`<div class="oasbox-story-desc">${story.description}</div>` : ""}
 			</div>
-			<div class="oas-story-meta">
+			<div class="oasbox-story-section">
+				<div class="oasbox-section-label">References</div>
 				${pathRow("component", story.componentPath)}
 				${pathRow("stories", story.storiesPath)}
 			</div>
-			<div class="oas-variants">
-				${variantNames.map((name) => {
-					const cls = name === variantName ? "oas-variant is-active" : "oas-variant";
-					const href = `/components/${story.slug}?variant=${encodeURIComponent(name)}`;
-					return html`<a class="${cls}" href="${href}">${name}</a>`;
-				})}
-			</div>
-			${variant?.notes ? html`<div class="oas-story-notes">${variant.notes}</div>` : ""}
+			${
+				variantNames.length > 1
+					? html`<div class="oasbox-story-section">
+						<div class="oasbox-section-label">Variants</div>
+						<div class="oasbox-variants">
+							${variantNames.map((name) => {
+								const cls = name === variantName ? "oasbox-variant is-active" : "oasbox-variant";
+								const href = `/components/${story.slug}?variant=${encodeURIComponent(name)}`;
+								return html`<a class="${cls}" href="${href}">${name}</a>`;
+							})}
+						</div>
+					</div>`
+					: ""
+			}
+
+			${variant?.notes ? html`<div class="oasbox-story-notes">${variant.notes}</div>` : ""}
 			${
 				story.children.length > 0
-					? html`<div class="oas-story-children">
+					? html`<div class="oasbox-story-children">
 						${story.children.map((slug) => {
 							const child = findStory(slug);
 							const childHref = `/components/${slug}`;
 							return child
-								? html`<a class="oas-child" href="${childHref}">${child.title} →</a>`
-								: html`<span class="oas-child-missing">${slug} (missing story)</span>`;
+								? html`<a class="oasbox-child" href="${childHref}">${child.title} →</a>`
+								: html`<span class="oasbox-child-missing">${slug} (missing story)</span>`;
 						})}
 					</div>`
 					: ""
@@ -76,16 +78,27 @@ export function StoryPageCanvas(story: DiscoveredStory, variantName: string): Ar
 	const variant = story.variants[variantName];
 	const rendered = variant
 		? variant.render()
-		: html`<div class="oas-story-missing">No variant "${variantName}" — pick one above.</div>`;
+		: html`<div class="oasbox-story-missing">No variant "${variantName}" — pick one above.</div>`;
 	return story.decorator ? story.decorator(rendered) : rendered;
 }
 
-/** Full story page: details + canvas together.
- *  Used for kind: "view" — StoryPageDetails provides the .oas-story wrapper. */
+/** @deprecated Use StoryPageDetails + StoryPageCanvas via the router's viewCanvas flag instead. */
 export function StoryPageView(story: DiscoveredStory, variantName: string): ArrowExpression {
+	const variantNames = Object.keys(story.variants);
+	const hasMultiple = variantNames.length > 1;
 	return html`
-		${StoryPageDetails(story, variantName)}
-		<div class="oas-story-canvas">
+		${
+			hasMultiple
+				? html`<div class="oasbox-view-variant-bar">
+					${variantNames.map((name) => {
+						const cls = name === variantName ? "oasbox-variant is-active" : "oasbox-variant";
+						const href = `/components/${story.slug}?variant=${encodeURIComponent(name)}`;
+						return html`<a class="${cls}" href="${href}">${name}</a>`;
+					})}
+				</div>`
+				: ""
+		}
+		<div class="oasbox-story-view">
 			${StoryPageCanvas(story, variantName)}
 		</div>
 	`;

package/template/tools/viewer/TokensPage.ts

@@ -14,20 +14,20 @@ function tokenRow(decl: TokenDecl) {
 		return resolveToken(decl.name) || decl.value;
 	};
 	return html`
-		<div class="oas-token-row">
-			<code class="oas-token-name">${decl.name}</code>
-			<span class="oas-token-value">${() => resolved()}</span>
+		<div class="oasbox-token-row">
+			<code class="oasbox-token-name">${decl.name}</code>
+			<span class="oasbox-token-value">${() => resolved()}</span>
 			${() => {
 				const kind = classifyValue(resolved());
 				if (kind === "color") {
-					return html`<span class="oas-swatch" style="${() => `background: ${resolved()};`}"></span>`;
+					return html`<span class="oasbox-swatch" style="${() => `background: ${resolved()};`}"></span>`;
 				}
 				if (kind === "length") {
-					return html`<span class="oas-sizebar" style="${() => `width: ${resolved()};`}"></span>`;
+					return html`<span class="oasbox-sizebar" style="${() => `width: ${resolved()};`}"></span>`;
 				}
-				return html`<span class="oas-swatch-none"></span>`;
+				return html`<span class="oasbox-swatch-none"></span>`;
 			}}
-			<button class="oas-copy" @click="${() => copyText(`var(${decl.name})`)}">Copy</button>
+			<button class="oasbox-copy" @click="${() => copyText(`var(${decl.name})`)}">Copy</button>
 		</div>
 	`;
 }
@@ -35,7 +35,7 @@ function tokenRow(decl: TokenDecl) {
 export const TokensPage = component(() => {
 	const decls = collectTokenDecls();
 	return html`
-		<div class="oas-reference">
+		<div class="oasbox-reference">
 			<div class="setting-item setting-item-heading">
 				<div class="setting-item-info">
 					<div class="setting-item-name">Obsidian tokens (${String(decls.length)})</div>
@@ -58,7 +58,7 @@ export const TokensPage = component(() => {
 					: ""
 			}
 			<input
-				class="oas-token-filter"
+				class="oasbox-token-filter"
 				type="search"
 				placeholder="Filter tokens…"
 				.value="${() => state.query}"
@@ -69,7 +69,7 @@ export const TokensPage = component(() => {
 			${() =>
 				groupTokens(filterTokens(decls, state.query)).map((group) =>
 					html`
-						<div class="oas-token-group">
+						<div class="oasbox-token-group">
 							<div class="vertical-tab-header-group-title">
 								${group.label} (${String(group.tokens.length)})
 							</div>

package/template/tools/viewer/ViewsIndex.ts

@@ -0,0 +1,66 @@
+import { html } from "@arrow-js/core";
+import type { ArrowExpression } from "@arrow-js/core";
+import { stories } from "./discovery";
+
+/**
+ * Index page for all kind: "view" stories. Mirrors ComponentsIndex for views.
+ */
+export function ViewsIndex(): ArrowExpression {
+	const views = stories.filter((s) => s.kind === "view");
+
+	if (views.length === 0) {
+		return html`
+			<div class="oasbox-settings">
+				<div class="setting-item setting-item-heading">
+					<div class="setting-item-info">
+						<div class="setting-item-name">Views</div>
+						<div class="setting-item-description">
+							No view stories found. Create a
+							<code>*.stories.ts</code>
+							file under
+							<code>stories/views/</code>
+							to register a view.
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	return html`
+		<div class="oasbox-settings">
+			<div class="setting-item setting-item-heading">
+				<div class="setting-item-info">
+					<div class="setting-item-name">Views</div>
+					<div class="setting-item-description">
+						${views.length} ${views.length === 1 ? "view" : "views"} — click to open.
+					</div>
+				</div>
+			</div>
+			${views.map((story) => {
+				const path = `/components/${story.slug}`;
+				const badge =
+					story.status === "live"
+						? html`<span class="oas-badge is-live">live</span>`
+						: html`<span class="oas-badge is-draft">draft</span>`;
+				return html`
+					<div class="setting-item">
+						<div class="setting-item-info">
+							<div class="setting-item-name">
+								<a href="${path}">${story.title}</a> ${badge}
+							</div>
+							${
+								story.description
+									? html`<div class="setting-item-description">${story.description}</div>`
+									: ""
+							}
+						</div>
+						<div class="setting-item-control">
+							<a class="mod-cta oasbox-open-link" href="${path}">Open →</a>
+						</div>
+					</div>
+				`.key(story.slug);
+			})}
+		</div>
+	`;
+}

package/template/tools/viewer/discovery.ts

@@ -21,6 +21,7 @@ export interface DiscoveredStory {
 	children: string[];
 	status: "live" | "draft";
 	kind: "view" | "component";
+	surface: "panel" | "editor";
 	decorator?: (content: ArrowExpression) => ArrowExpression;
 }
 
@@ -57,6 +58,7 @@ for (const [globKey, mod] of Object.entries(modules)) {
 		children: def.children ?? [],
 		status: def.status ?? "draft",
 		kind: def.kind ?? autoKind,
+		surface: def.surface ?? "panel",
 		decorator: def.decorator,
 	});
 }

package/template/tools/viewer/obsidian-classes.ts

@@ -101,7 +101,7 @@ export const classGroups: ClassGroup[] = [
 				whenToUse:
 					"Dialog card (.modal-title + .modal-content). Preview is contained by a transformed wrapper.",
 				preview: () => html`
-					<div class="modal oas-modal-preview">
+					<div class="modal oasbox-modal-preview">
 						<div class="modal-title">Modal title</div>
 						<div class="modal-content">Modal content goes here.</div>
 					</div>

package/template/tools/viewer/sidebar.ts

@@ -1,54 +1,43 @@
-import { html } from "@arrow-js/core";
-import type { ArrowTemplate } from "@arrow-js/core";
+import { html, reactive } from "@arrow-js/core";
 import type { ArrowExpression } from "@arrow-js/core";
-import type { TreeNode } from "./derive";
-import { findStory, invalidStories, storyTree } from "./discovery";
 
 /**
- * Viewer navigation: component tree (children indented under parents) plus the
- * Reference section. Rendered OUTSIDE the pane, as the first child of the
- * stage. Sandbox chrome — never ports to a plugin.
+ * Viewer navigation sidebar. Sandbox chrome — never ports to a plugin.
  */
 
+const sidebarState = reactive({ collapsed: false });
+
 function navClass(active: boolean): string {
 	return active
-		? "vertical-tab-nav-item oas-nav-item is-active"
-		: "vertical-tab-nav-item oas-nav-item";
+		? "vertical-tab-nav-item oasbox-nav-item is-active"
+		: "vertical-tab-nav-item oasbox-nav-item";
 }
 
-function nodeRows(node: TreeNode, activePath: string, depth: number): ArrowTemplate | string {
-	const story = findStory(node.slug);
-	if (!story) {
-		return "";
-	}
-	const href = `/components/${node.slug}`;
-	return html`
-		<a
-			class="${navClass(activePath === href)}"
-			style="${`padding-left: calc(var(--size-4-3) * ${depth + 1});`}"
-			href="${href}"
-		>${story.title}</a>
-		${node.children.map((child) => nodeRows(child, activePath, depth + 1))}
-	`;
+function toggleSidebar(): void {
+	sidebarState.collapsed = !sidebarState.collapsed;
 }
 
 export function ViewerSidebar(activePath: string): ArrowExpression {
+	const onComponents = activePath.startsWith("/components");
+	const onViews = activePath.startsWith("/views");
 	return html`
-		<nav class="oas-sidebar">
-			<div class="vertical-tab-header-group">
-				<div class="vertical-tab-header-group-title">Components</div>
-				${storyTree.roots.map((node) => nodeRows(node, activePath, 0))}
-				${invalidStories.map(
-					(bad) =>
-						html`<div class="vertical-tab-nav-item oas-nav-invalid" title="${bad.reason}">
-							invalid: ${bad.storiesPath}
-						</div>`
-				)}
-			</div>
-			<div class="vertical-tab-header-group">
-				<div class="vertical-tab-header-group-title">Reference</div>
-				<a class="${navClass(activePath === "/reference")}" href="/reference">Tokens</a>
-				<a class="${navClass(activePath === "/reference/classes")}" href="/reference/classes">Classes</a>
+		<nav class="${() => `oasbox-sidebar${sidebarState.collapsed ? " is-collapsed" : ""}`}">
+			<button
+				class="oasbox-sidebar-toggle clickable-icon"
+				aria-label="Toggle sidebar"
+				@click="${toggleSidebar}"
+			>${() => (sidebarState.collapsed ? "›" : "‹")}</button>
+			<div class="oasbox-sidebar-content">
+				<div class="vertical-tab-header-group">
+					<div class="vertical-tab-header-group-title">Sandbox</div>
+					<a class="${navClass(onComponents)}" href="/components">Components</a>
+					<a class="${navClass(onViews)}" href="/views">Views</a>
+				</div>
+				<div class="vertical-tab-header-group">
+					<div class="vertical-tab-header-group-title">Reference</div>
+					<a class="${navClass(activePath === "/reference")}" href="/reference">Tokens</a>
+					<a class="${navClass(activePath === "/reference/classes")}" href="/reference/classes">Classes</a>
+				</div>
 			</div>
 		</nav>
 	`;

package/template/tools/viewer/stories.ts

@@ -18,12 +18,21 @@ export interface StoryDef {
 	title?: string;
 	/** One-line description shown in the tree and header. */
 	description?: string;
-	/** Repo-relative override for where the component lives (e.g. a subcomponent
-	 * defined inside its parent's file). Defaults to the stories path minus `.stories`. */
+	/** Repo-relative override for where the component lives. Defaults to mirroring
+	 * the stories/ subtree into src/components/ (stories/Foo.stories.ts →
+	 * src/components/Foo.ts), so set this for views (src/views/…) and for a
+	 * subcomponent defined inside its parent's file. */
 	componentPath?: string;
 	/** "view" = full pane frame. "component" = centered canvas with separate details panel.
 	 *  Auto-detected from stories/ path if omitted. */
 	kind?: "view" | "component";
+	/** Obsidian surface a view replicates — orthogonal to `kind`.
+	 *  "panel" (default) = full-bleed custom view (workspace leaf).
+	 *  "editor" = readable line width (note/document style): the sandbox widens
+	 *  the pane so the centering is visible. The width itself comes from the
+	 *  component wrapping its content in the portable `oas-readable-width` utility
+	 *  (scaffolded by `create:view --editor`), so it ports 1:1 into the plugin. */
+	surface?: "panel" | "editor";
 	/** Wraps the rendered variant — use for ancestor class context.
 	 *  Example: (content) => html`<div class="my-shell">${content}</div>` */
 	decorator?: (content: ArrowExpression) => ArrowExpression;
@@ -80,6 +89,11 @@ export function validateStoryDef(def: unknown): ValidationResult {
 			return { ok: false, reason: '"kind" must be "view" or "component"' };
 		}
 	}
+	if ("surface" in def) {
+		if (def.surface !== "panel" && def.surface !== "editor") {
+			return { ok: false, reason: '"surface" must be "panel" or "editor"' };
+		}
+	}
 	if ("decorator" in def) {
 		if (typeof def.decorator !== "function") {
 			return { ok: false, reason: '"decorator" must be a function' };

package/template/.github/workflows/ci.yml

@@ -1,36 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-
-jobs:
-  check:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        with:
-          version: 10.14.0
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          cache: pnpm
-
-      - name: Install
-        run: pnpm install --frozen-lockfile
-
-      - name: Lint + format check (Biome)
-        run: pnpm biome ci .
-
-      - name: Typecheck
-        run: pnpm typecheck
-
-      - name: Test
-        run: pnpm test
-
-      - name: Build
-        run: pnpm build