create-obsidian-arrow 0.5.0 → 0.5.2

package/template/tools/sandbox/frame.ts

@@ -1,35 +1,15 @@
 import { html } from "@arrow-js/core";
 import type { ArrowExpression, ArrowTemplate } from "@arrow-js/core";
-import { layoutState, startResize } from "./layout";
-import { themeState, toggleTheme } from "./theme";
 
 /**
- * Wraps a route view in an Obsidian workspace-leaf shell so the sandbox looks
- * like a real side-panel view. Uses Obsidian's own layout classes
- * (.workspace-leaf, .view-header, .view-content) so the chrome is styled by
- * app.css. Width is driven by reactive layout state (toolbar slider / presets /
- * the edge drag handle); height fills the stage.
+ * Story details frame — fixed-width left panel showing story metadata
+ * (REFERENCES, VARIANTS, etc.). This is sandbox chrome, not an Obsidian leaf.
  *
- * Sandbox chrome only — the route view mounted inside is what ports to a plugin.
+ * No view-header here: the breadcrumb lives in the top toolbar, and the right
+ * canvas shows whatever view-header the story component defines.
  */
-export const Frame = (title: string, content: ArrowExpression): ArrowTemplate => html`
-	<div class="workspace-leaf oas-frame" style="${() => `width:${layoutState.width}px`}">
-		<div class="workspace-leaf-content" data-type="arrow-sandbox">
-			<div class="view-header">
-				<div class="oas-view-header-left">
-					<a class="clickable-icon oas-home" href="/" aria-label="Examples">⌂</a>
-					<div class="view-header-title">${title}</div>
-				</div>
-				<div class="view-actions">
-					<button
-						class="clickable-icon oas-theme-toggle"
-						aria-label="Toggle theme"
-						@click="${toggleTheme}"
-					>${() => (themeState.theme === "theme-dark" ? "☾" : "☀")}</button>
-				</div>
-			</div>
-			<div class="view-content oas-view-content">${content}</div>
-		</div>
-		<div class="oas-resize-handle" aria-hidden="true" @mousedown="${startResize}"></div>
+export const Frame = (content: ArrowExpression): ArrowTemplate => html`
+	<div class="oasbox-frame">
+		<div class="oasbox-view-content">${content}</div>
 	</div>
 `;

package/template/tools/sandbox/home.ts

@@ -30,6 +30,7 @@ const GETTING_STARTED = [
 
 const VIEWS = [
 	{ label: "Components", path: "/components", note: "Component story viewer" },
+	{ label: "Views", path: "/views", note: "Full-pane view stories" },
 	{ label: "Tokens", path: "/reference", note: "CSS custom property reference" },
 	{ label: "Classes", path: "/reference/classes", note: "Obsidian class catalog" },
 ];
@@ -38,7 +39,7 @@ export const Home = component((): ArrowTemplate => {
 	setTimeout(recheck, 250);
 
 	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">Obsidian Arrow Sandbox</div>
@@ -63,7 +64,7 @@ export const Home = component((): ArrowTemplate => {
 						style="${() =>
 							`color: ${stylingLoaded() ? "var(--text-success)" : "var(--text-error)"}; font-weight: var(--font-semibold);`}"
 					>${() => (stylingLoaded() ? "READY" : "MISSING")}</span>
-					<button class="oas-recheck" @click="${recheck}">Re-check</button>
+					<button class="oasbox-recheck" @click="${recheck}">Re-check</button>
 				</div>
 			</div>
 
@@ -88,7 +89,7 @@ export const Home = component((): ArrowTemplate => {
 				<span class="oas-card-chevron">›</span>
 			</div>
 			<div class="oas-card-body">
-				<div class="oas-settings">
+				<div class="oasbox-settings">
 					${GETTING_STARTED.map((step) =>
 						html`
 							<div class="setting-item">
@@ -108,13 +109,7 @@ export const Home = component((): ArrowTemplate => {
 			</div>
 		</div>
 
-		<div class="oas-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">Main pages in this sandbox.</div>
-				</div>
-			</div>
+		<div class="oasbox-settings">
 			${VIEWS.map((view) =>
 				html`
 					<div class="setting-item">
@@ -125,7 +120,7 @@ export const Home = component((): ArrowTemplate => {
 							<div class="setting-item-description">${view.note}</div>
 						</div>
 						<div class="setting-item-control">
-							<a class="mod-cta oas-open-link" href="${view.path}">Open</a>
+							<a class="mod-cta oasbox-open-link" href="${view.path}">Open</a>
 						</div>
 					</div>
 				`.key(view.label)

package/template/tools/sandbox/layout.ts

@@ -6,9 +6,30 @@ import { reactive } from "@arrow-js/core";
  * chrome — not ported into the plugin.
  */
 export const MIN_WIDTH = 240;
-export const WIDTH_PRESETS = [280, 360, 480, 640];
+export const WIDTH_PRESETS = [280, 360, 480, 640, 800];
 
-export const layoutState = reactive<{ width: number }>({ width: 420 });
+/** Sensible starting pane width per view chrome. Editor (readable-line-width)
+ * views need a pane wider than --file-line-width (700px) for the centering to
+ * be visible; panels open at the standard side-panel width. */
+export const PANEL_DEFAULT_WIDTH = 420;
+export const EDITOR_DEFAULT_WIDTH = 820;
+
+/** `userAdjusted` flips true the first time the tester drags the handle; after
+ * that we stop applying per-page defaults so their chosen width sticks. */
+export const layoutState = reactive<{ width: number; userAdjusted: boolean }>({
+	width: PANEL_DEFAULT_WIDTH,
+	userAdjusted: false,
+});
+
+/** Apply a route's preferred default width, unless the tester has taken over. */
+export function applyDefaultWidth(px: number): void {
+	if (!layoutState.userAdjusted) {
+		setWidth(px);
+	}
+}
+
+/** Current page breadcrumb shown in the toolbar. Updated by the client router. */
+export const pageState = reactive<{ breadcrumb: string }>({ breadcrumb: "" });
 
 function maxWidth(): number {
 	return Math.max(MIN_WIDTH, window.innerWidth);
@@ -22,6 +43,7 @@ export function setWidth(px: number): void {
  * binds directly to Arrow's `@mousedown` handler signature. */
 export function startResize(event: Event): void {
 	event.preventDefault();
+	layoutState.userAdjusted = true;
 	const startX = (event as MouseEvent).clientX;
 	const startWidth = layoutState.width;