create-obsidian-arrow 0.4.1 → 0.5.1

package/template/tools/viewer/StoryPage.ts

@@ -3,7 +3,6 @@ import type { ArrowExpression } from "@arrow-js/core";
 import type { DiscoveredStory } from "./discovery";
 import { findStory } from "./discovery";
 
-/** Copy to clipboard, best-effort (clipboard API needs a secure context). */
 export function copyText(text: string): void {
 	void navigator.clipboard?.writeText(text);
 }
@@ -18,18 +17,23 @@ function pathRow(label: string, path: string): ArrowExpression {
 	`;
 }
 
-export function StoryPage(story: DiscoveredStory, variantName: string): ArrowExpression {
-	const variant = story.variants[variantName];
+/** Metadata panel: title, status, variant tabs, notes, paths, children.
+ *  No rendered component — used for kind: "component" left panel. */
+export function StoryPageDetails(story: DiscoveredStory, variantName: string): ArrowExpression {
 	const variantNames = Object.keys(story.variants);
-	const badge =
-		story.status === "live"
-			? html`<span class="oas-badge is-live">live</span>`
-			: html`<span class="oas-badge is-draft">draft</span>`;
+	const variant = story.variants[variantName];
 	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} ${badge}</div>
+					<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>`
@@ -54,20 +58,35 @@ export function StoryPage(story: DiscoveredStory, variantName: string): ArrowExp
 					? html`<div class="oas-story-children">
 						${story.children.map((slug) => {
 							const child = findStory(slug);
+							const childHref = `/components/${slug}`;
 							return child
-								? html`<a class="oas-child" href="${`/components/${slug}`}">${child.title} →</a>`
+								? html`<a class="oas-child" href="${childHref}">${child.title} →</a>`
 								: html`<span class="oas-child-missing">${slug} (missing story)</span>`;
 						})}
 					</div>`
 					: ""
 			}
-			<div class="oas-story-canvas">
-				${
-					variant
-						? variant.render()
-						: html`<div class="oas-story-missing">No variant "${variantName}" — pick one above.</div>`
-				}
-			</div>
+		</div>
+	`;
+}
+
+/** Rendered component only — decorator applied if present.
+ *  Used for kind: "component" canvas area. */
+export function StoryPageCanvas(story: DiscoveredStory, variantName: string): ArrowExpression {
+	const variant = story.variants[variantName];
+	const rendered = variant
+		? variant.render()
+		: html`<div class="oas-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. */
+export function StoryPageView(story: DiscoveredStory, variantName: string): ArrowExpression {
+	return html`
+		${StoryPageDetails(story, variantName)}
+		<div class="oas-story-canvas">
+			${StoryPageCanvas(story, variantName)}
 		</div>
 	`;
 }

package/template/tools/viewer/discovery.ts

@@ -1,3 +1,4 @@
+import type { ArrowExpression } from "@arrow-js/core";
 import { buildStoryTree, storyMetaFromGlobKey, titleFromSlug } from "./derive";
 import type { StoryDef, StoryVariant } from "./stories";
 import { normalizeVariants, validateStoryDef } from "./stories";
@@ -19,6 +20,8 @@ export interface DiscoveredStory {
 	variants: Record<string, StoryVariant>;
 	children: string[];
 	status: "live" | "draft";
+	kind: "view" | "component";
+	decorator?: (content: ArrowExpression) => ArrowExpression;
 }
 
 export interface InvalidStory {
@@ -43,6 +46,7 @@ for (const [globKey, mod] of Object.entries(modules)) {
 		continue;
 	}
 	const def = mod.default as StoryDef;
+	const autoKind = meta.storiesPath.startsWith("stories/views/") ? "view" : "component";
 	stories.push({
 		slug: meta.slug,
 		title: def.title ?? titleFromSlug(meta.slug),
@@ -52,6 +56,8 @@ for (const [globKey, mod] of Object.entries(modules)) {
 		variants: normalizeVariants(def.variants),
 		children: def.children ?? [],
 		status: def.status ?? "draft",
+		kind: def.kind ?? autoKind,
+		decorator: def.decorator,
 	});
 }
 

package/template/tools/viewer/stories.ts

@@ -21,6 +21,12 @@ export interface StoryDef {
 	/** 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`. */
 	componentPath?: string;
+	/** "view" = full pane frame. "component" = centered canvas with separate details panel.
+	 *  Auto-detected from stories/ path if omitted. */
+	kind?: "view" | "component";
+	/** Wraps the rendered variant — use for ancestor class context.
+	 *  Example: (content) => html`<div class="my-shell">${content}</div>` */
+	decorator?: (content: ArrowExpression) => ArrowExpression;
 	/** Named variants; keys are human strings ("default", "dev mode off"). */
 	variants: Record<string, VariantInput>;
 	/** Slugs of subcomponent stories for drill-in nesting. */
@@ -69,6 +75,16 @@ export function validateStoryDef(def: unknown): ValidationResult {
 			return { ok: false, reason: '"status" must be "live" or "draft"' };
 		}
 	}
+	if ("kind" in def) {
+		if (def.kind !== "view" && def.kind !== "component") {
+			return { ok: false, reason: '"kind" must be "view" or "component"' };
+		}
+	}
+	if ("decorator" in def) {
+		if (typeof def.decorator !== "function") {
+			return { ok: false, reason: '"decorator" must be a function' };
+		}
+	}
 	return { ok: true };
 }