create-obsidian-arrow 0.2.2 → 0.4.0

package/template/tools/viewer/token-utils.ts

@@ -0,0 +1,84 @@
+/**
+ * Pure token parsing/grouping for the reference index. The browser side feeds
+ * this CSSOM rule text (rule.cssText); keeping the parser string-in/data-out
+ * makes it node:test-able without a DOM.
+ */
+
+export interface TokenDecl {
+	name: string;
+	value: string;
+}
+
+export function parseCustomProps(cssText: string): TokenDecl[] {
+	const out: TokenDecl[] = [];
+	const re = /(--[A-Za-z0-9_-]+)\s*:\s*([^;}]+)/g;
+	let match = re.exec(cssText);
+	while (match !== null) {
+		out.push({ name: match[1], value: match[2].trim() });
+		match = re.exec(cssText);
+	}
+	return out;
+}
+
+const GROUP_PREFIXES: [string, string][] = [
+	["--size-", "Size & spacing"],
+	["--radius-", "Radius"],
+	["--color-", "Colors"],
+	["--background-", "Backgrounds"],
+	["--text-", "Text"],
+	["--font-", "Fonts & type"],
+	["--shadow-", "Shadows"],
+	["--interactive-", "Interactive"],
+	["--icon-", "Icons"],
+];
+const OTHER_LABEL = "Other";
+
+export interface TokenGroup {
+	label: string;
+	tokens: TokenDecl[];
+}
+
+export function groupTokens(decls: TokenDecl[]): TokenGroup[] {
+	const latest = new Map<string, string>();
+	for (const decl of decls) {
+		latest.set(decl.name, decl.value);
+	}
+	const buckets = new Map<string, TokenDecl[]>();
+	for (const [name, value] of latest) {
+		const label = GROUP_PREFIXES.find(([prefix]) => name.startsWith(prefix))?.[1] ?? OTHER_LABEL;
+		const bucket = buckets.get(label) ?? [];
+		bucket.push({ name, value });
+		buckets.set(label, bucket);
+	}
+	const order = [...GROUP_PREFIXES.map(([, label]) => label), OTHER_LABEL];
+	return order
+		.filter((label) => buckets.has(label))
+		.map((label) => ({
+			label,
+			tokens: (buckets.get(label) ?? []).sort((a, b) => a.name.localeCompare(b.name)),
+		}));
+}
+
+export type ValueKind = "color" | "length" | "other";
+
+export function classifyValue(resolved: string): ValueKind {
+	const value = resolved.trim();
+	if (
+		/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value) ||
+		/^(rgb|rgba|hsl|hsla)\(/i.test(value)
+	) {
+		return "color";
+	}
+	if (value === "0" || /^-?\d+(\.\d+)?(px|em|rem|%|ch|vw|vh|vmin|vmax|pt)$/.test(value)) {
+		return "length";
+	}
+	return "other";
+}
+
+export function filterTokens(decls: TokenDecl[], query: string): TokenDecl[] {
+	const q = query.trim().toLowerCase();
+	if (q === "") {
+		return decls;
+	}
+	return decls.filter((decl) => decl.name.toLowerCase().includes(q));
+}

package/template/tools/viewer/tokens.ts

@@ -0,0 +1,30 @@
+import type { TokenDecl } from "./token-utils";
+import { parseCustomProps } from "./token-utils";
+
+/** Walk every same-origin stylesheet (recursing into @media etc.) and parse
+ * custom-property declarations out of each style rule's cssText. */
+export function collectTokenDecls(): TokenDecl[] {
+	const out: TokenDecl[] = [];
+	const walk = (rules: CSSRuleList): void => {
+		for (const rule of Array.from(rules)) {
+			if (rule instanceof CSSStyleRule) {
+				out.push(...parseCustomProps(rule.cssText));
+			} else if (rule instanceof CSSGroupingRule) {
+				walk(rule.cssRules);
+			}
+		}
+	};
+	for (const sheet of Array.from(document.styleSheets)) {
+		try {
+			walk(sheet.cssRules);
+		} catch {
+			// cross-origin sheet — skip
+		}
+	}
+	return out;
+}
+
+/** Resolved value of a token in the CURRENT theme. */
+export function resolveToken(name: string): string {
+	return getComputedStyle(document.body).getPropertyValue(name).trim();
+}

package/template/src/examples/ExamplesIndex.ts

@@ -1,36 +0,0 @@
-import { html } from "@arrow-js/core";
-import type { ArrowTemplate } from "@arrow-js/core";
-import type { Example } from "./registry";
-
-/**
- * Landing page at "/" — an Obsidian-styled list of the available example
- * components, each linking to its own route. Plain anchors (full reloads) keep
- * the router trivial; the sandbox doesn't need SPA navigation.
- */
-export const ExamplesIndex = (items: Example[]): ArrowTemplate => html`
-	<div class="oas-settings">
-		<div class="setting-item setting-item-heading">
-			<div class="setting-item-info">
-				<div class="setting-item-name">Examples</div>
-				<div class="setting-item-description">
-					Component demos rendered with real Obsidian styling.
-				</div>
-			</div>
-		</div>
-		${items.map((example) =>
-			html`
-					<div class="setting-item">
-						<div class="setting-item-info">
-							<div class="setting-item-name">
-								<a href="${example.path}">${example.label}</a>
-							</div>
-							<div class="setting-item-description">${example.description}</div>
-						</div>
-						<div class="setting-item-control">
-							<a class="mod-cta oas-open-link" href="${example.path}">Open</a>
-						</div>
-					</div>
-				`.key(example.path)
-		)}
-	</div>
-`;

package/template/src/examples/registry.ts

@@ -1,26 +0,0 @@
-import type { ArrowExpression } from "@arrow-js/core";
-import { SettingsPanel } from "../components/SettingsPanel";
-
-/**
- * Registry of example components, keyed by route path. Add a new demo here and
- * it shows up on the index page and at its own path automatically.
- */
-export interface Example {
-	path: string;
-	label: string;
-	description: string;
-	view: () => ArrowExpression;
-}
-
-export const examples: Example[] = [
-	{
-		path: "/example",
-		label: "Settings panel",
-		description: "Vertical tabs, toggles, a keyed list, and an async boundary() section.",
-		view: () => SettingsPanel(),
-	},
-];
-
-export function findExample(path: string): Example | undefined {
-	return examples.find((example) => example.path === path);
-}

package/template/src/router/routeToPage.ts

@@ -1,57 +0,0 @@
-import { html } from "@arrow-js/core";
-import type { ArrowExpression } from "@arrow-js/core";
-import { findExample } from "../examples/registry";
-import { Home } from "../sandbox/home";
-
-/**
- * Single route resolver, shared by every entry point. Returns the page status,
- * title (metadata), and Arrow view together — the same shape the Arrow Vite
- * scaffold uses, so a future SSR/hydration lane can call this identically on
- * both server and client. The client router (./client.ts) wraps the view in the
- * sandbox Frame and sets document.title from this.
- */
-export interface Page {
-	status: number;
-	title: string;
-	view: ArrowExpression;
-}
-
-const APP_NAME = "Arrow Sandbox";
-
-export function routeToPage(url: string): Page {
-	const { pathname } = new URL(url, window.location.origin);
-
-	if (pathname === "/" || pathname === "") {
-		return {
-			status: 200,
-			title: APP_NAME,
-			view: Home(),
-		};
-	}
-
-	const match = findExample(pathname);
-	if (match) {
-		return {
-			status: 200,
-			title: `${match.label} · ${APP_NAME}`,
-			view: match.view(),
-		};
-	}
-
-	return {
-		status: 404,
-		title: `Not found · ${APP_NAME}`,
-		view: html`
-			<div class="oas-settings">
-				<div class="setting-item setting-item-heading">
-					<div class="setting-item-info">
-						<div class="setting-item-name">Not found</div>
-						<div class="setting-item-description">
-							No route for <code>${pathname}</code>. <a href="/">Back to examples</a>.
-						</div>
-					</div>
-				</div>
-			</div>
-		`,
-	};
-}

package/template/src/sandbox/sandbox.css

@@ -1,130 +0,0 @@
-/*
- * 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;
-	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;
-}