create-obsidian-arrow 0.5.0 → 0.5.2

package/template/src/components/EmptyState/EmptyState.css

@@ -1,4 +1,4 @@
-.empty-state {
+.oas-empty-state {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -8,23 +8,23 @@
 	color: var(--text-muted);
 }
 
-.empty-state-icon {
+.oas-empty-icon {
 	font-size: var(--font-ui-larger, 2rem);
 	line-height: 1;
 	color: var(--text-faint);
 }
 
-.empty-state-title {
+.oas-empty-title {
 	font-size: var(--font-ui-medium);
 	font-weight: var(--font-semibold);
 	color: var(--text-normal);
 }
 
-.empty-state-description {
+.oas-empty-desc {
 	font-size: var(--font-ui-small);
 	max-width: 280px;
 }
 
-.empty-state-action {
+.oas-empty-action {
 	margin-top: var(--size-4-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

@@ -52,7 +52,56 @@
 	flex-shrink: 0;
 }
 
-/* ── Spacing (Obsidian 4-px step scale) ─────────────────────── */
+/*
+ * Spacing — two Obsidian token families:
+ *
+ * 4-px scale  oas-gap-N / oas-p-N / oas-px-N / oas-py-N / oas-mt-N / oas-mb-N
+ *   N=1 → --size-4-1 (4px)   N=2 → --size-4-2 (8px)   N=3 → --size-4-3 (12px)
+ *   N=4 → --size-4-4 (16px)  N=5 → --size-4-5 (20px)  N=6 → --size-4-6 (24px)
+ *
+ * 2-px sub-scale  oas-gap-2-1 / oas-p-2-1 … (mirrors Obsidian token name)
+ *   2-1 → --size-2-1 (2px)   2-3 → --size-2-3 (6px)
+ */
+
+/* 2-px sub-scale ── */
+.oas-gap-2-1 {
+	gap: var(--size-2-1);
+}
+.oas-p-2-1 {
+	padding: var(--size-2-1);
+}
+.oas-px-2-1 {
+	padding-inline: var(--size-2-1);
+}
+.oas-py-2-1 {
+	padding-block: var(--size-2-1);
+}
+.oas-mt-2-1 {
+	margin-top: var(--size-2-1);
+}
+.oas-mb-2-1 {
+	margin-bottom: var(--size-2-1);
+}
+.oas-gap-2-3 {
+	gap: var(--size-2-3);
+}
+.oas-p-2-3 {
+	padding: var(--size-2-3);
+}
+.oas-px-2-3 {
+	padding-inline: var(--size-2-3);
+}
+.oas-py-2-3 {
+	padding-block: var(--size-2-3);
+}
+.oas-mt-2-3 {
+	margin-top: var(--size-2-3);
+}
+.oas-mb-2-3 {
+	margin-bottom: var(--size-2-3);
+}
+
+/* 4-px scale ── */
 .oas-gap-1 {
 	gap: var(--size-4-1);
 }
@@ -65,6 +114,12 @@
 .oas-gap-4 {
 	gap: var(--size-4-4);
 }
+.oas-gap-5 {
+	gap: var(--size-4-5);
+}
+.oas-gap-6 {
+	gap: var(--size-4-6);
+}
 .oas-p-1 {
 	padding: var(--size-4-1);
 }
@@ -77,12 +132,27 @@
 .oas-p-4 {
 	padding: var(--size-4-4);
 }
+.oas-p-5 {
+	padding: var(--size-4-5);
+}
+.oas-p-6 {
+	padding: var(--size-4-6);
+}
 .oas-px-2 {
 	padding-inline: var(--size-4-2);
 }
 .oas-px-3 {
 	padding-inline: var(--size-4-3);
 }
+.oas-px-4 {
+	padding-inline: var(--size-4-4);
+}
+.oas-px-5 {
+	padding-inline: var(--size-4-5);
+}
+.oas-px-6 {
+	padding-inline: var(--size-4-6);
+}
 .oas-py-1 {
 	padding-block: var(--size-4-1);
 }
@@ -92,6 +162,15 @@
 .oas-py-3 {
 	padding-block: var(--size-4-3);
 }
+.oas-py-4 {
+	padding-block: var(--size-4-4);
+}
+.oas-py-5 {
+	padding-block: var(--size-4-5);
+}
+.oas-py-6 {
+	padding-block: var(--size-4-6);
+}
 .oas-mt-1 {
 	margin-top: var(--size-4-1);
 }
@@ -101,6 +180,15 @@
 .oas-mt-3 {
 	margin-top: var(--size-4-3);
 }
+.oas-mt-4 {
+	margin-top: var(--size-4-4);
+}
+.oas-mt-5 {
+	margin-top: var(--size-4-5);
+}
+.oas-mt-6 {
+	margin-top: var(--size-4-6);
+}
 .oas-mb-1 {
 	margin-bottom: var(--size-4-1);
 }
@@ -110,6 +198,15 @@
 .oas-mb-3 {
 	margin-bottom: var(--size-4-3);
 }
+.oas-mb-4 {
+	margin-bottom: var(--size-4-4);
+}
+.oas-mb-5 {
+	margin-bottom: var(--size-4-5);
+}
+.oas-mb-6 {
+	margin-bottom: var(--size-4-6);
+}
 .oas-ml-auto {
 	margin-left: auto;
 }
@@ -195,6 +292,9 @@
 .oas-rounded-m {
 	border-radius: var(--radius-m);
 }
+.oas-rounded-l {
+	border-radius: var(--radius-l);
+}
 
 /* ── Interaction ─────────────────────────────────────────────── */
 .oas-cursor-pointer {
@@ -203,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>
+			`;
+		},
+	},
+});