create-obsidian-arrow 0.2.1 → 0.3.0

package/template/src/sandbox/sandbox.css

@@ -80,6 +80,7 @@ body {
 
 .oas-frame .oas-view-content {
 	flex: 1;
+	min-height: 0;
 	overflow-y: auto;
 	padding: var(--size-4-3);
 }
@@ -109,6 +110,11 @@ body {
 	align-items: center;
 }
 
+.oas-frame .setting-item-control button.oas-recheck {
+	margin-left: var(--size-4-2);
+	font-size: var(--font-ui-smaller);
+}
+
 /* Drag-to-resize handle on the pane's right edge (Obsidian-like). */
 .oas-frame .oas-resize-handle {
 	position: absolute;
@@ -123,3 +129,304 @@ body {
 	background: var(--interactive-accent);
 	opacity: 0.5;
 }
+
+/* Collapsible card — Getting Started accordion and other expandable sections. */
+.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) 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);
+}
+
+/* Gallery: vertical stack of cards below the heading */
+.oas-gallery {
+	border-top: 1px solid var(--background-modifier-border);
+}
+
+/* Status badges for story live/draft state */
+.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: var(--background-modifier-success);
+	color: var(--text-success);
+}
+
+.oas-badge.is-draft {
+	background: var(--background-modifier-hover);
+	color: var(--text-faint);
+}
+
+/* Component viewer: sidebar (first child of the stage) + story page chrome. */
+.oas-shell nav.oas-sidebar {
+	flex: 0 0 220px;
+	overflow-y: auto;
+	padding: var(--size-4-3) 0;
+	background: var(--background-secondary);
+	border-right: 1px solid var(--background-modifier-border);
+}
+
+.oas-shell nav.oas-sidebar a.oas-nav-item {
+	display: block;
+	text-decoration: none;
+}
+
+.oas-shell nav.oas-sidebar .oas-nav-invalid {
+	color: var(--text-error);
+	font-size: var(--font-ui-smaller);
+}
+
+.oas-frame .oas-story-meta {
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-4-1);
+	margin: var(--size-4-2) 0;
+}
+
+.oas-frame .oas-story-path {
+	display: flex;
+	align-items: center;
+	gap: var(--size-4-2);
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+}
+
+.oas-frame .oas-story-path code {
+	font-family: var(--font-monospace);
+	color: var(--text-normal);
+}
+
+.oas-frame button.oas-copy {
+	height: var(--size-4-5);
+	padding: 0 var(--size-4-2);
+	font-size: var(--font-ui-smaller);
+}
+
+.oas-frame .oas-variants {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--size-4-1);
+	margin: var(--size-4-2) 0;
+}
+
+.oas-frame a.oas-variant {
+	padding: var(--size-4-1) var(--size-4-2);
+	border-radius: var(--radius-s);
+	background: var(--background-modifier-hover);
+	color: var(--text-normal);
+	font-size: var(--font-ui-smaller);
+	text-decoration: none;
+}
+
+.oas-frame a.oas-variant.is-active {
+	background: var(--interactive-accent);
+	color: var(--text-on-accent);
+}
+
+.oas-frame .oas-story-notes {
+	margin: var(--size-4-2) 0;
+	color: var(--text-muted);
+	font-size: var(--font-ui-small);
+}
+
+.oas-frame .oas-story-children {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--size-4-2);
+	margin: var(--size-4-2) 0;
+}
+
+.oas-frame a.oas-child {
+	color: var(--text-accent);
+	font-size: var(--font-ui-small);
+	text-decoration: none;
+}
+
+.oas-frame .oas-child-missing {
+	color: var(--text-error);
+	font-size: var(--font-ui-small);
+}
+
+.oas-frame .oas-story-canvas {
+	margin-top: var(--size-4-3);
+	padding-top: var(--size-4-3);
+	border-top: 1px solid var(--background-modifier-border);
+}
+
+.oas-frame .oas-story-missing {
+	color: var(--text-error);
+}
+
+/* Reference index: token rows and class previews. */
+.oas-frame input.oas-token-filter {
+	width: 100%;
+	margin: var(--size-4-2) 0 var(--size-4-3) 0;
+}
+
+.oas-frame .oas-token-group {
+	margin-bottom: var(--size-4-3);
+}
+
+.oas-frame .oas-token-row {
+	display: grid;
+	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 48px auto;
+	align-items: center;
+	gap: var(--size-4-2);
+	padding: var(--size-4-1) 0;
+	border-bottom: 1px solid var(--background-modifier-border);
+	font-size: var(--font-ui-smaller);
+}
+
+.oas-frame .oas-token-name {
+	font-family: var(--font-monospace);
+	overflow-wrap: anywhere;
+}
+
+.oas-frame .oas-token-value {
+	color: var(--text-muted);
+	overflow-wrap: anywhere;
+}
+
+.oas-frame .oas-swatch {
+	width: var(--size-4-4);
+	height: var(--size-4-4);
+	border-radius: var(--radius-s);
+	border: 1px solid var(--background-modifier-border);
+	justify-self: start;
+}
+
+.oas-frame .oas-sizebar {
+	height: var(--size-4-2);
+	max-width: 48px;
+	background: var(--text-accent);
+	border-radius: var(--radius-s);
+	justify-self: start;
+}
+
+.oas-frame .oas-swatch-none {
+	width: var(--size-4-4);
+}
+
+.oas-frame .oas-class-group {
+	margin-bottom: var(--size-4-4);
+}
+
+.oas-frame .oas-class-entry {
+	margin: var(--size-4-3) 0;
+}
+
+.oas-frame .oas-class-head {
+	display: flex;
+	align-items: center;
+	gap: var(--size-4-2);
+	font-family: var(--font-monospace);
+	font-size: var(--font-ui-small);
+}
+
+.oas-frame .oas-class-when {
+	margin: var(--size-4-1) 0;
+	color: var(--text-muted);
+	font-size: var(--font-ui-smaller);
+}
+
+/* transform creates a containing block, so position:fixed descendants (e.g.
+   .modal) stay inside the preview box instead of covering the viewport. */
+.oas-frame .oas-class-preview {
+	padding: var(--size-4-3);
+	border: 1px dashed var(--background-modifier-border);
+	border-radius: var(--radius-m);
+	transform: translate(0);
+}
+
+.oas-frame .modal.oas-modal-preview {
+	position: static;
+	width: auto;
+	max-width: 100%;
+}

package/template/src/utilities.css

@@ -0,0 +1,205 @@
+/*
+ * Portable utility classes for Obsidian Arrow components.
+ *
+ * These travel with component ports into the plugin — copy this file once into
+ * the plugin's styles directory and import it alongside your component CSS.
+ * All classes are prefixed `oas-` to avoid any conflict with Obsidian's own
+ * selectors. Values use Obsidian's CSS custom property scale so they track the
+ * active theme automatically.
+ */
+
+/* ── Layout ──────────────────────────────────────────────────── */
+.oas-flex {
+	display: flex;
+}
+.oas-inline-flex {
+	display: inline-flex;
+}
+.oas-flex-col {
+	flex-direction: column;
+}
+.oas-flex-wrap {
+	flex-wrap: wrap;
+}
+.oas-items-start {
+	align-items: flex-start;
+}
+.oas-items-center {
+	align-items: center;
+}
+.oas-items-end {
+	align-items: flex-end;
+}
+.oas-items-baseline {
+	align-items: baseline;
+}
+.oas-justify-start {
+	justify-content: flex-start;
+}
+.oas-justify-center {
+	justify-content: center;
+}
+.oas-justify-end {
+	justify-content: flex-end;
+}
+.oas-justify-between {
+	justify-content: space-between;
+}
+.oas-grow {
+	flex: 1;
+}
+.oas-shrink-0 {
+	flex-shrink: 0;
+}
+
+/* ── Spacing (Obsidian 4-px step scale) ─────────────────────── */
+.oas-gap-1 {
+	gap: var(--size-4-1);
+}
+.oas-gap-2 {
+	gap: var(--size-4-2);
+}
+.oas-gap-3 {
+	gap: var(--size-4-3);
+}
+.oas-gap-4 {
+	gap: var(--size-4-4);
+}
+.oas-p-1 {
+	padding: var(--size-4-1);
+}
+.oas-p-2 {
+	padding: var(--size-4-2);
+}
+.oas-p-3 {
+	padding: var(--size-4-3);
+}
+.oas-p-4 {
+	padding: var(--size-4-4);
+}
+.oas-px-2 {
+	padding-inline: var(--size-4-2);
+}
+.oas-px-3 {
+	padding-inline: var(--size-4-3);
+}
+.oas-py-1 {
+	padding-block: var(--size-4-1);
+}
+.oas-py-2 {
+	padding-block: var(--size-4-2);
+}
+.oas-py-3 {
+	padding-block: var(--size-4-3);
+}
+.oas-mt-1 {
+	margin-top: var(--size-4-1);
+}
+.oas-mt-2 {
+	margin-top: var(--size-4-2);
+}
+.oas-mt-3 {
+	margin-top: var(--size-4-3);
+}
+.oas-mb-1 {
+	margin-bottom: var(--size-4-1);
+}
+.oas-mb-2 {
+	margin-bottom: var(--size-4-2);
+}
+.oas-mb-3 {
+	margin-bottom: var(--size-4-3);
+}
+.oas-ml-auto {
+	margin-left: auto;
+}
+
+/* ── Sizing ──────────────────────────────────────────────────── */
+.oas-w-full {
+	width: 100%;
+}
+.oas-min-w-0 {
+	min-width: 0;
+}
+.oas-min-h-0 {
+	min-height: 0;
+}
+
+/* ── Typography ──────────────────────────────────────────────── */
+.oas-text-xs {
+	font-size: var(--font-ui-smaller);
+}
+.oas-text-sm {
+	font-size: var(--font-ui-small);
+}
+.oas-text-md {
+	font-size: var(--font-ui-medium);
+}
+.oas-font-medium {
+	font-weight: var(--font-medium);
+}
+.oas-font-semibold {
+	font-weight: var(--font-semibold);
+}
+.oas-font-mono {
+	font-family: var(--font-monospace);
+}
+.oas-leading-1 {
+	line-height: 1;
+}
+.oas-text-normal {
+	color: var(--text-normal);
+}
+.oas-text-muted {
+	color: var(--text-muted);
+}
+.oas-text-faint {
+	color: var(--text-faint);
+}
+.oas-text-accent {
+	color: var(--text-accent);
+}
+.oas-text-success {
+	color: var(--text-success);
+}
+.oas-text-error {
+	color: var(--text-error);
+}
+
+/* ── Overflow ────────────────────────────────────────────────── */
+.oas-truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.oas-overflow-hidden {
+	overflow: hidden;
+}
+.oas-overflow-auto {
+	overflow: auto;
+}
+
+/* ── Border ──────────────────────────────────────────────────── */
+.oas-border {
+	border: 1px solid var(--background-modifier-border);
+}
+.oas-border-b {
+	border-bottom: 1px solid var(--background-modifier-border);
+}
+.oas-border-t {
+	border-top: 1px solid var(--background-modifier-border);
+}
+.oas-rounded-s {
+	border-radius: var(--radius-s);
+}
+.oas-rounded-m {
+	border-radius: var(--radius-m);
+}
+
+/* ── Interaction ─────────────────────────────────────────────── */
+.oas-cursor-pointer {
+	cursor: pointer;
+}
+.oas-select-none {
+	user-select: none;
+}

package/template/src/viewer/ClassesPage.ts

@@ -0,0 +1,37 @@
+import { component, html } from "@arrow-js/core";
+import { copyText } from "./StoryPage";
+import { classGroups } from "./obsidian-classes";
+
+export const ClassesPage = component(() => {
+	return html`
+		<div class="oas-reference">
+			<div class="setting-item setting-item-heading">
+				<div class="setting-item-info">
+					<div class="setting-item-name">Obsidian classes</div>
+					<div class="setting-item-description">
+						Curated pattern classes worth leveraging, rendered live against app.css.
+					</div>
+				</div>
+			</div>
+			${classGroups.map(
+				(group) => html`
+				<div class="oas-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">
+								<code>${entry.className}</code>
+								<button class="oas-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>
+					`
+					)}
+				</div>
+			`
+			)}
+		</div>
+	`;
+});

package/template/src/viewer/ComponentsIndex.ts

@@ -0,0 +1,56 @@
+import { html } from "@arrow-js/core";
+import type { ArrowExpression } from "@arrow-js/core";
+import { stories } from "./discovery";
+
+export function ComponentsIndex(): ArrowExpression {
+	if (stories.length === 0) {
+		return html`
+			<div class="oas-settings">
+				<div class="setting-item setting-item-heading">
+					<div class="setting-item-info">
+						<div class="setting-item-name">Components</div>
+						<div class="setting-item-description">
+							No stories found. Create a <code>*.stories.ts</code> file next to a component.
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+	return html`
+		<div class="oas-settings">
+			<div class="setting-item setting-item-heading">
+				<div class="setting-item-info">
+					<div class="setting-item-name">Components</div>
+					<div class="setting-item-description">
+						${stories.length} ${stories.length === 1 ? "story" : "stories"} — click to open.
+					</div>
+				</div>
+			</div>
+			${stories.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 oas-open-link" href="${path}">Open →</a>
+						</div>
+					</div>
+				`.key(story.slug);
+			})}
+		</div>
+	`;
+}

package/template/src/viewer/StoryPage.ts

@@ -0,0 +1,73 @@
+import { html } from "@arrow-js/core";
+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);
+}
+
+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>
+	`;
+}
+
+export function StoryPage(story: DiscoveredStory, variantName: string): ArrowExpression {
+	const variant = story.variants[variantName];
+	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>`;
+	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>
+					${
+						story.description
+							? html`<div class="setting-item-description">${story.description}</div>`
+							: ""
+					}
+				</div>
+			</div>
+			<div class="oas-story-meta">
+				${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>` : ""}
+			${
+				story.children.length > 0
+					? html`<div class="oas-story-children">
+						${story.children.map((slug) => {
+							const child = findStory(slug);
+							return child
+								? html`<a class="oas-child" href="${`/components/${slug}`}">${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>
+	`;
+}