create-obsidian-arrow 0.5.1 → 0.5.2

package/template/src/components/EmptyState/EmptyState.ts

@@ -12,18 +12,14 @@ export interface EmptyStateOptions {
 
 export function EmptyState(options: EmptyStateOptions): ArrowExpression {
 	return html`
-		<div class="empty-state">
-			${options.icon ? html`<div class="empty-state-icon">${icon(options.icon)}</div>` : ""}
-			<div class="empty-state-title">${options.title}</div>
-			${
-				options.description
-					? html`<div class="empty-state-description">${options.description}</div>`
-					: ""
-			}
+		<div class="oas-empty-state">
+			${options.icon ? html`<div class="oas-empty-icon">${icon(options.icon)}</div>` : ""}
+			<div class="oas-empty-title">${options.title}</div>
+			${options.description ? html`<div class="oas-empty-desc">${options.description}</div>` : ""}
 			${
 				options.action
 					? html`<button
-							class="mod-cta empty-state-action"
+							class="mod-cta oas-empty-action"
 							@click="${options.action.onClick}"
 						>
 							${options.action.label}

package/template/src/utilities.css

@@ -303,3 +303,161 @@
 .oas-select-none {
 	user-select: none;
 }
+
+/* ── Badges ──────────────────────────────────────────────────── */
+/* Status and label badges. Portable — copy with components into plugin. */
+.oas-badge {
+	display: inline-flex;
+	align-items: center;
+	padding: 1px var(--size-4-1);
+	border-radius: var(--radius-s);
+	font-size: var(--font-ui-smaller);
+	font-weight: var(--font-medium);
+	vertical-align: middle;
+	margin-left: var(--size-4-1);
+}
+.oas-badge.is-live {
+	background: color-mix(in srgb, var(--text-success) 15%, var(--background-primary));
+	color: var(--text-success);
+}
+.oas-badge.is-draft {
+	background: var(--background-modifier-hover);
+	color: var(--text-faint);
+}
+
+/* ── Collapsible card ────────────────────────────────────────── */
+/* Expandable section with left-border accent. Portable — copy with components. */
+.oas-card {
+	border-bottom: 1px solid var(--background-modifier-border);
+	border-left: 3px solid var(--background-modifier-border-hover);
+}
+.oas-card.is-expanded {
+	border-left-color: var(--interactive-accent);
+}
+.oas-card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--size-4-2);
+	padding: var(--size-4-3);
+	cursor: pointer;
+	font-size: var(--font-ui-small);
+	font-weight: var(--font-semibold);
+	color: var(--text-normal);
+	user-select: none;
+}
+.oas-card-header:hover {
+	background: var(--background-modifier-hover);
+}
+.oas-card-title {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.oas-card-chevron {
+	flex-shrink: 0;
+	color: var(--text-faint);
+	transition: transform 0.15s;
+	font-size: var(--font-ui-medium);
+	line-height: 1;
+}
+.oas-card.is-expanded .oas-card-chevron {
+	transform: rotate(90deg);
+}
+.oas-card-body {
+	display: none;
+	border-top: 1px solid var(--background-modifier-border);
+}
+.oas-card.is-expanded .oas-card-body {
+	display: block;
+}
+.oas-card-desc {
+	margin: 0;
+	padding: var(--size-4-2) var(--size-4-3);
+	color: var(--text-muted);
+	font-size: var(--font-ui-smaller);
+}
+.oas-card-note {
+	margin: 0;
+	padding: 0 var(--size-4-3) var(--size-4-2);
+	color: var(--text-muted);
+	font-size: var(--font-ui-smaller);
+}
+.oas-card-children {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	gap: var(--size-4-1);
+	padding: var(--size-4-1) var(--size-4-3);
+}
+.oas-card-children-label {
+	color: var(--text-faint);
+	font-size: var(--font-ui-smaller);
+}
+.oas-card-actions {
+	padding: var(--size-4-2) var(--size-4-3);
+}
+
+/* ── View & component shells ─────────────────────────────────── */
+/*
+ * Portable structural shells. Copy these with your view/component into the
+ * plugin — they rely only on Obsidian tokens and need no sandbox-specific CSS.
+ *
+ * View shell: apply oas-shell-view to the root element your view returns.
+ * The view-content div (Obsidian) is the scroll container; oas-shell-view
+ * fills it as a flex column so the body can grow and the footer stays pinned.
+ *
+ * Component shell: apply oas-shell-panel to a standalone component root for a
+ * card-style container with border, radius, and padding.
+ */
+.oas-shell-view {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+}
+/* Header: pinned to the top, never shrinks, has a min-height floor but grows
+ * to fit taller content (e.g. a wrapping toolbar). */
+.oas-shell-view-header {
+	flex: 0 0 auto;
+	min-height: var(--header-height);
+}
+/* Body: fills all space between header and footer; scrolls its own overflow. */
+.oas-shell-view-body {
+	flex: 1 1 auto;
+	min-height: 0;
+	overflow-y: auto;
+}
+/* Footer: pinned to the bottom, never shrinks, has a min-height floor but
+ * expands to fit contained components (e.g. a composer that grows with input). */
+.oas-shell-view-footer {
+	flex: 0 0 auto;
+	min-height: var(--header-height);
+	border-top: 1px solid var(--background-modifier-border);
+}
+.oas-shell-panel {
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-4-2);
+	padding: var(--size-4-3);
+	background: var(--background-primary);
+	border: 1px solid var(--background-modifier-border);
+	border-radius: var(--radius-m);
+}
+
+/* ── Readable width (editor-style views) ─────────────────────────
+ * Reproduces Obsidian's "readable line length" for a *custom* view: caps
+ * content at the same --file-line-width token the markdown editor uses and
+ * centers it, with the editor's horizontal --file-margins. A custom ItemView
+ * does not inherit Obsidian's markdown editor chrome, so an editor-style
+ * (note/document) view wraps its content in this class to match. Portable: the
+ * tokens resolve against the active theme in both the sandbox and the plugin.
+ */
+.oas-readable-width {
+	width: 100%;
+	max-width: var(--file-line-width);
+	margin-inline: auto;
+	padding-inline: var(--file-margins-x);
+}

package/template/src/views/DiffViewer/DiffViewerView.css

@@ -0,0 +1,42 @@
+/* DiffViewer as a full-pane editor view. */
+
+/* Label row above each editor pane. */
+.oas-diff-view-labels {
+	display: flex;
+	border-bottom: 1px solid var(--background-modifier-border);
+	flex-shrink: 0;
+}
+
+.oas-diff-view-label {
+	flex: 1;
+	padding: var(--size-2-1) var(--size-4-3);
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	border-right: 1px solid var(--background-modifier-border);
+}
+
+.oas-diff-view-label:last-child {
+	border-right: none;
+}
+
+/* Body: fills remaining height. position: relative lets the diff viewer use inset: 0. */
+.oas-diff-view-body {
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+	position: relative;
+}
+
+/* Absolute positioning gives CM6 an explicit pixel height so height: 100% resolves
+   correctly on .cm-mergeView. Flex-resolved heights (flex: 1 + height: auto) don't
+   propagate to percentage-height grandchildren in all browsers. */
+.oas-diff-view-body .oas-diff-viewer {
+	position: absolute;
+	inset: 0;
+	height: auto;
+	border: none;
+	border-radius: 0;
+}

package/template/src/views/DiffViewer/DiffViewerView.ts

@@ -0,0 +1,53 @@
+/**
+ * DiffViewerView — full-pane editor view wrapping the DiffViewer component.
+ *
+ * Shell anatomy:
+ *   oas-shell-view-header   pinned header: file labels + accept/reject actions
+ *   oas-diff-view-labels    per-pane filename labels (original | modified)
+ *   oas-diff-view-body      fills remaining height; CM6 handles internal scroll
+ *
+ * Duplicate this folder, rename DiffViewerView → YourDiffView, and wire in
+ * your real file content. The oas-shell-* classes handle the flex layout.
+ */
+
+import { html } from "@arrow-js/core";
+import type { ArrowExpression } from "@arrow-js/core";
+import { DiffViewer } from "../../components/DiffViewer/DiffViewer";
+import "./DiffViewerView.css";
+
+export interface DiffViewerViewOptions {
+	original: string;
+	modified: string;
+	originalLabel?: string;
+	modifiedLabel?: string;
+}
+
+export function DiffViewerView({
+	original,
+	modified,
+	originalLabel = "Original",
+	modifiedLabel = "Modified",
+}: DiffViewerViewOptions): ArrowExpression {
+	return html`
+		<div class="oas-shell-view">
+			<div class="oas-shell-view-header">
+				<div class="oas-flex oas-items-center oas-justify-between oas-px-3 oas-py-2-1">
+					<span class="oas-font-semibold oas-text-sm">Changes</span>
+					<div class="oas-flex oas-gap-2">
+						<button class="mod-cta" style="font-size: var(--font-ui-smaller);">Accept all</button>
+						<button class="mod-destructive" style="font-size: var(--font-ui-smaller);">Reject all</button>
+					</div>
+				</div>
+			</div>
+
+			<div class="oas-diff-view-labels">
+				<div class="oas-diff-view-label">${originalLabel}</div>
+				<div class="oas-diff-view-label">${modifiedLabel}</div>
+			</div>
+
+			<div class="oas-diff-view-body">
+				${DiffViewer({ original, modified })}
+			</div>
+		</div>
+	`;
+}

package/template/src/views/ExampleView/ExampleView.ts

@@ -0,0 +1,92 @@
+/**
+ * ExampleView — a fuller reference for a new Obsidian plugin view.
+ *
+ * Shows header + scrollable list body + pinned footer input, matching the
+ * ChatView shell pattern from pi-vault-mind. Duplicate this folder, rename
+ * ExampleView → YourView everywhere, and replace the stub content.
+ *
+ * Shell anatomy (oas-shell-* classes handle all layout — no flex CSS to write):
+ *   oas-shell-view-header  pinned top bar: title + actions
+ *   oas-shell-view-body    scrollable content area
+ *   oas-shell-view-footer  pinned bottom bar: input + action button
+ */
+
+import { html } from "@arrow-js/core";
+import type { ArrowExpression, ArrowTemplate } from "@arrow-js/core";
+import { EmptyState } from "../../components/EmptyState/EmptyState";
+
+/** Stub item type — replace with your real data model. */
+interface ExampleItem {
+	id: string;
+	label: string;
+	note?: string;
+}
+
+const STUB_ITEMS: ExampleItem[] = [
+	{ id: "1", label: "First item", note: "This is an example note." },
+	{ id: "2", label: "Second item" },
+	{ id: "3", label: "Third item", note: "Another note." },
+	{ id: "4", label: "Fourth item" },
+	{ id: "5", label: "Fifth item", note: "More content here." },
+	{ id: "6", label: "Sixth item" },
+	{ id: "7", label: "Seventh item", note: "Scroll to see this." },
+	{ id: "8", label: "Eighth item" },
+];
+
+function ItemRow(item: ExampleItem): ArrowTemplate {
+	return html`
+		<div class="setting-item">
+			<div class="setting-item-info">
+				<div class="setting-item-name">${item.label}</div>
+				${item.note ? html`<div class="setting-item-description">${item.note}</div>` : ""}
+			</div>
+			<div class="setting-item-control">
+				<button class="clickable-icon" aria-label="Options">⋯</button>
+			</div>
+		</div>
+	`;
+}
+
+export function ExampleView(items: ExampleItem[] = STUB_ITEMS): ArrowExpression {
+	return html`
+		<div class="oas-shell-view">
+
+			<div class="oas-shell-view-header">
+				<div class="oas-flex oas-items-center oas-justify-between oas-px-3 oas-py-2-1">
+					<span class="oas-font-semibold oas-text-sm">Example View</span>
+					<div class="oas-flex oas-gap-1">
+						<button class="clickable-icon" aria-label="Filter">⊟</button>
+						<button class="mod-cta" style="font-size: var(--font-ui-smaller);">New item</button>
+					</div>
+				</div>
+			</div>
+
+			<div class="oas-shell-view-body">
+				${
+					items.length === 0
+						? EmptyState({
+								icon: "file",
+								title: "No items yet",
+								description: "Create your first item to get started.",
+								action: { label: "New item", onClick: () => {} },
+							})
+						: ""
+				}
+				${items.map((item) => ItemRow(item))}
+			</div>
+
+			<div class="oas-shell-view-footer">
+				<div class="oas-flex oas-items-center oas-gap-2 oas-px-3 oas-py-2">
+					<input
+						type="text"
+						class="search-input"
+						placeholder="Quick add…"
+						style="flex: 1;"
+					/>
+					<button class="mod-cta" aria-label="Add">+</button>
+				</div>
+			</div>
+
+		</div>
+	`;
+}

package/template/stories/components/ComponentShell.stories.ts

@@ -0,0 +1,28 @@
+import { html } from "@arrow-js/core";
+import { defineStories } from "../../tools/viewer/stories";
+
+export default defineStories({
+	title: "Structural / Card",
+	description:
+		"Standard panel container for standalone components. Use oas-shell-panel as the root wrapper when a component needs its own card frame.",
+	status: "live",
+	componentPath: "src/utilities.css",
+	variants: {
+		default: () => html`
+			<div class="oas-shell-panel" style="max-width: 320px;">
+				<div class="setting-item-name">Panel heading</div>
+				<div class="setting-item-description">Panel description or sub-content goes here.</div>
+				<div><button class="mod-cta">Primary action</button></div>
+			</div>
+		`,
+		with_badge: () => html`
+			<div class="oas-shell-panel" style="max-width: 320px;">
+				<div class="oas-flex oas-items-center oas-justify-between">
+					<div class="setting-item-name">Panel with badge</div>
+					<span class="oas-badge is-live">live</span>
+				</div>
+				<div class="setting-item-description">Panel using oas-badge alongside shell.</div>
+			</div>
+		`,
+	},
+});

package/template/stories/components/EmptyState.stories.ts

@@ -4,6 +4,7 @@ import { defineStories } from "../../tools/viewer/stories";
 export default defineStories({
 	description: "Reusable empty state for any view — icon, title, description, optional action.",
 	status: "live",
+	componentPath: "src/components/EmptyState/EmptyState.ts",
 	variants: {
 		default: () => EmptyState({ title: "Nothing here yet" }),
 		"with description": () => {

package/template/stories/components/LoadingState.stories.ts

@@ -4,6 +4,7 @@ import { defineStories } from "../../tools/viewer/stories";
 export default defineStories({
 	description: "Loading indicator for async view content.",
 	status: "live",
+	componentPath: "src/components/LoadingState.ts",
 	variants: {
 		default: () => LoadingState(),
 		"with message": () => LoadingState("Loading sessions…"),

package/template/stories/components/Toggle.stories.ts

@@ -0,0 +1,50 @@
+import { html, reactive } from "@arrow-js/core";
+import { Toggle } from "../../src/components/SettingsPanel";
+import { defineStories } from "../../tools/viewer/stories";
+
+export default defineStories({
+	title: "Settings / Toggle",
+	description:
+		"Obsidian-native checkbox toggle used in settings rows. Pass a reactive getter and an onToggle handler.",
+	status: "live",
+	componentPath: "src/components/SettingsPanel.ts",
+	variants: {
+		on: () => {
+			const state = reactive({ enabled: true });
+			return Toggle(
+				() => state.enabled,
+				() => {
+					state.enabled = !state.enabled;
+				}
+			);
+		},
+		off: () => {
+			const state = reactive({ enabled: false });
+			return Toggle(
+				() => state.enabled,
+				() => {
+					state.enabled = !state.enabled;
+				}
+			);
+		},
+		in_setting_row: () => {
+			const state = reactive({ enabled: true });
+			return html`
+				<div class="setting-item">
+					<div class="setting-item-info">
+						<div class="setting-item-name">Enable feature</div>
+						<div class="setting-item-description">Toggles the feature on or off.</div>
+					</div>
+					<div class="setting-item-control">
+						${Toggle(
+							() => state.enabled,
+							() => {
+								state.enabled = !state.enabled;
+							}
+						)}
+					</div>
+				</div>
+			`;
+		},
+	},
+});

package/template/stories/views/DiffViewer/DiffViewer.stories.ts

@@ -0,0 +1,94 @@
+import { DiffViewerView } from "../../../src/views/DiffViewer/DiffViewerView";
+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-04
+
+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 view to the sandbox
+
+## In Progress
+
+- Documentation updates
+- Editor pane integration
+
+## Notes
+
+See the project board for full task breakdown.
+Next standup: Thursday.
+`;
+
+const CODE_ORIGINAL = `function greet(name: string): string {
+\treturn "Hello, " + name;
+}
+
+const result = greet("world");
+console.log(result);
+`;
+
+const CODE_MODIFIED = `function greet(name: string, greeting = "Hello"): string {
+\treturn \`\${greeting}, \${name}!\`;
+}
+
+const result = greet("world", "Hi");
+console.log(result);
+`;
+
+export default defineStories({
+	title: "Editor / DiffViewer",
+	description:
+		"Full-pane diff editor using CodeMirror 6 MergeView. Header shows file labels and accept/reject actions. Body fills the remaining height — CM6 manages internal scrolling.",
+	status: "live",
+	kind: "view",
+	componentPath: "src/views/DiffViewer/DiffViewerView.ts",
+	variants: {
+		markdown: () =>
+			DiffViewerView({
+				original: ORIGINAL,
+				modified: MODIFIED,
+				originalLabel: "notes-draft.md",
+				modifiedLabel: "notes-revised.md",
+			}),
+		code: () =>
+			DiffViewerView({
+				original: CODE_ORIGINAL,
+				modified: CODE_MODIFIED,
+				originalLabel: "utils.ts (original)",
+				modifiedLabel: "utils.ts (modified)",
+			}),
+	},
+});

package/template/stories/views/EditorView.stories.ts

@@ -0,0 +1,55 @@
+import { html } from "@arrow-js/core";
+import { defineStories } from "../../tools/viewer/stories";
+
+export default defineStories({
+	title: "Views / Editor View",
+	description:
+		"Note/document view at readable line width. Full-bleed header + footer with the body content capped at --file-line-width via oas-readable-width. Copy this for any editor- or reader-style view; scaffold with `pnpm create:view <Name> --editor`.",
+	status: "live",
+	kind: "view",
+	surface: "editor",
+	componentPath: "src/utilities.css",
+	variants: {
+		default: () => html`
+			<div class="oas-shell-view" style="height: 420px; border: 1px dashed var(--background-modifier-border);">
+				<div class="oas-shell-view-header" style="padding: var(--size-4-2) var(--size-4-3); background: var(--background-secondary); border-bottom: 1px solid var(--background-modifier-border);">
+					Editor header (title, actions) — spans the full pane
+				</div>
+				<div class="oas-shell-view-body">
+					<div class="oas-readable-width">
+						<h1>Document title</h1>
+						<p>
+							The body content is capped at Obsidian's readable line width
+							(<code>--file-line-width</code>, 700px) and centered — the same
+							measure the markdown editor uses. Header and footer stay full-bleed.
+						</p>
+						${Array.from({ length: 4 }, (_, i) =>
+							html`<p>
+								Paragraph ${i + 1}. Long-form prose stays comfortable to read
+								because the line length never exceeds the readable measure, no
+								matter how wide the pane is dragged. Resize the panel to see the
+								column stay put while the chrome fills the width.
+							</p>`.key(i)
+						)}
+					</div>
+				</div>
+				<div class="oas-shell-view-footer" style="padding: var(--size-4-2) var(--size-4-3);">
+					Editor footer (word count, status) — spans the full pane
+				</div>
+			</div>
+		`,
+		body_only: () => html`
+			<div class="oas-shell-view" style="height: 420px; border: 1px dashed var(--background-modifier-border);">
+				<div class="oas-shell-view-body">
+					<div class="oas-readable-width">
+						<h1>Reader view</h1>
+						<p>
+							Body only — no header or footer. Content is centered at readable
+							line width, ideal for a distraction-free reader or preview pane.
+						</p>
+					</div>
+				</div>
+			</div>
+		`,
+	},
+});

package/template/stories/views/ExampleView/ExampleView.stories.ts

@@ -0,0 +1,15 @@
+import { ExampleView } from "../../../src/views/ExampleView/ExampleView";
+import { defineStories } from "../../../tools/viewer/stories";
+
+export default defineStories({
+	title: "Example / ExampleView",
+	description:
+		"Reference shell for a new view. Duplicate this folder, rename ExampleView → YourView, and replace the stub content. The oas-shell-* classes handle all layout.",
+	status: "live",
+	kind: "view",
+	componentPath: "src/views/ExampleView/ExampleView.ts",
+	variants: {
+		with_items: () => ExampleView(),
+		empty: () => ExampleView([]),
+	},
+});