create-obsidian-arrow 0.2.2 → 0.4.0

package/template/tools/sandbox/sandbox.css

@@ -0,0 +1,474 @@
+/*
+ * Sandbox-only chrome. NOT ported into the plugin.
+ *
+ * Per the arrow-js-obsidian CSS-specificity lesson, every custom rule is scoped
+ * under a container class + element type so it can't lose to Obsidian's global
+ * rules (e.g. `button:not(.clickable-icon)`) and can't leak. All values use
+ * Obsidian tokens so the sandbox tracks the active theme.
+ */
+
+html,
+body {
+	margin: 0;
+	height: 100%;
+	background: var(--background-primary);
+	color: var(--text-normal);
+	font-family: var(--font-interface);
+}
+
+#app {
+	height: 100vh;
+}
+
+/* Shell: width-control toolbar on top, pane stage below. */
+.oas-shell {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+}
+
+.oas-toolbar {
+	display: flex;
+	align-items: center;
+	gap: var(--size-4-2);
+	padding: var(--size-4-1) var(--size-4-3);
+	background: var(--background-secondary);
+	border-bottom: 1px solid var(--background-modifier-border);
+	color: var(--text-muted);
+	font-size: var(--font-ui-small);
+}
+
+.oas-toolbar .oas-toolbar-label {
+	font-weight: var(--font-medium);
+}
+
+.oas-toolbar .oas-width-range {
+	flex: 0 1 220px;
+}
+
+.oas-toolbar .oas-width-readout {
+	min-width: 52px;
+	font-family: var(--font-monospace);
+	color: var(--text-normal);
+}
+
+.oas-toolbar button.oas-preset {
+	height: var(--size-4-5);
+	padding: 0 var(--size-4-2);
+	font-size: var(--font-ui-smaller);
+}
+
+/* Stage: left-aligned so the edge drag handle resizes width 1:1. */
+.oas-stage {
+	flex: 1;
+	display: flex;
+	justify-content: flex-start;
+	overflow: hidden;
+	background: var(--background-secondary);
+}
+
+.oas-frame.workspace-leaf {
+	position: relative;
+	flex: 0 0 auto;
+	height: 100%;
+	min-width: 240px;
+	display: flex;
+	flex-direction: column;
+	background: var(--background-primary);
+	border-right: 1px solid var(--background-modifier-border);
+}
+
+.oas-frame .oas-view-content {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	padding: var(--size-4-3);
+}
+
+.oas-frame .view-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.oas-frame .oas-view-header-left {
+	display: flex;
+	align-items: center;
+	gap: var(--size-4-2);
+}
+
+.oas-frame .view-header .oas-theme-toggle,
+.oas-frame .view-header .oas-home {
+	font-size: var(--font-ui-medium);
+	line-height: 1;
+	text-decoration: none;
+}
+
+.oas-frame a.oas-open-link {
+	text-decoration: none;
+	display: inline-flex;
+	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;
+	top: 0;
+	right: 0;
+	width: 6px;
+	height: 100%;
+	cursor: ew-resize;
+}
+
+.oas-frame .oas-resize-handle:hover {
+	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%;
+}
+
+/* DiffViewer — CodeMirror 6 MergeView container */
+.oas-diff-viewer {
+	height: 480px;
+	overflow: hidden;
+	border: 1px solid var(--background-modifier-border);
+	border-radius: var(--radius-m);
+	font-family: var(--font-monospace);
+	font-size: var(--font-ui-small);
+}
+
+.oas-diff-viewer .cm-mergeView {
+	height: 100%;
+}
+
+.oas-diff-viewer .cm-editor {
+	height: 100%;
+	background: var(--background-primary);
+	color: var(--text-normal);
+}
+
+.oas-diff-viewer .cm-scroller {
+	overflow: auto;
+	font-family: var(--font-monospace);
+}
+
+.oas-diff-viewer .cm-mergeViewEditor {
+	border-right: 1px solid var(--background-modifier-border);
+}
+
+.oas-diff-viewer .cm-mergeViewEditor:last-child {
+	border-right: none;
+}
+
+.oas-diff-viewer .cm-deletedChunk {
+	background: color-mix(in srgb, var(--color-red) 15%, transparent);
+}
+
+.oas-diff-viewer .cm-insertedChunk,
+.oas-diff-viewer .cm-changedLine {
+	background: color-mix(in srgb, var(--color-green) 12%, transparent);
+}

package/template/tools/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/tools/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/tools/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>
+	`;
+}