@refrakt-md/editor 0.7.1 → 0.8.0

package/app/src/lib/components/ContentTree.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import type { ContentNode } from '../editor/block-parser.js';
+
+	interface Props {
+		nodes: ContentNode[];
+		activePath: number[];
+		onselect: (path: number[]) => void;
+		// Root node (only at top level)
+		rootLabel?: string;
+		onrootclick?: () => void;
+		isRootActive?: boolean;
+		// Internal (for recursion)
+		depth?: number;
+		pathPrefix?: number[];
+	}
+
+	let {
+		nodes, activePath, onselect,
+		rootLabel, onrootclick, isRootActive = false,
+		depth = 0, pathPrefix = [],
+	}: Props = $props();
+
+	function isActivePath(path: number[]): boolean {
+		if (path.length !== activePath.length) return false;
+		return path.every((v, i) => v === activePath[i]);
+	}
+
+	function isInActivePath(path: number[]): boolean {
+		if (path.length > activePath.length) return false;
+		return path.every((v, i) => v === activePath[i]);
+	}
+
+	const TYPE_ICONS: Record<string, string> = {
+		heading: 'M3 3v10M13 3v10M3 8h10',
+		paragraph: 'M2 4h12M2 8h12M2 12h8',
+		fence: 'M5 4L2 8l3 4M11 4l3 4-3 4',
+		list: 'M4 4h10M4 8h10M4 12h10M2 4h0M2 8h0M2 12h0',
+		quote: 'M4 4h8M4 7h6M1 3v8',
+		hr: 'M2 8h12',
+		image: 'M2 2h12v12H2zM5 5l-3 7h12l-4-5-2 2.5',
+	};
+</script>
+
+<!-- Root node (only rendered at top level) -->
+{#if rootLabel && onrootclick}
+	<div class="tree-node">
+		<button
+			type="button"
+			class="tree-node__btn tree-node__btn--rune"
+			class:active={isRootActive}
+			onclick={onrootclick}
+		>
+			<span class="tree-node__indicator">▾</span>
+			<span class="tree-node__rune-dot"></span>
+			<span class="tree-node__label tree-node__label--rune">{rootLabel}</span>
+		</button>
+	</div>
+{/if}
+
+{#each nodes as node, i}
+	{@const nodePath = [...pathPrefix, i]}
+	{@const isRune = node.type === 'rune'}
+	{@const isActive = isActivePath(nodePath)}
+	{@const isAncestor = isInActivePath(nodePath) && !isActive}
+	{@const hasChildren = isRune && !node.selfClosing && node.children && node.children.length > 0}
+
+	<div class="tree-node" style="padding-left: {(depth + (rootLabel ? 1 : 0)) * 16}px">
+		{#if isRune}
+			<button
+				type="button"
+				class="tree-node__btn tree-node__btn--rune"
+				class:active={isActive}
+				class:ancestor={isAncestor}
+				onclick={() => onselect(nodePath)}
+			>
+				<span class="tree-node__indicator">{hasChildren ? '▾' : '▸'}</span>
+				<span class="tree-node__rune-dot"></span>
+				<span class="tree-node__label tree-node__label--rune">{node.label}</span>
+			</button>
+		{:else}
+			<button
+				type="button"
+				class="tree-node__btn tree-node__btn--content"
+				class:active={isActive}
+				onclick={() => onselect(nodePath)}
+			>
+				<svg class="tree-node__icon" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+					<path d={TYPE_ICONS[node.type] ?? 'M2 4h12M2 8h12M2 12h8'} />
+				</svg>
+				<span class="tree-node__label tree-node__label--content">{node.label}</span>
+			</button>
+		{/if}
+	</div>
+
+	{#if hasChildren && node.children}
+		<svelte:self
+			nodes={node.children}
+			{activePath}
+			{onselect}
+			depth={depth + 1}
+			pathPrefix={nodePath}
+		/>
+	{/if}
+{/each}
+
+<style>
+	.tree-node {
+		display: flex;
+	}
+
+	.tree-node__btn {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		width: 100%;
+		padding: 0.2rem 0.4rem;
+		border: none;
+		border-radius: calc(var(--ed-radius-sm, 4px) - 1px);
+		background: transparent;
+		color: var(--ed-text-secondary);
+		font-size: var(--ed-text-base);
+		cursor: pointer;
+		text-align: left;
+		transition: background var(--ed-transition-fast);
+	}
+
+	.tree-node__btn:hover {
+		background: var(--ed-surface-2);
+	}
+
+	.tree-node__btn.active {
+		background: var(--ed-accent-muted);
+		color: var(--ed-accent);
+	}
+
+	.tree-node__btn.ancestor {
+		color: var(--ed-text-primary);
+	}
+
+	.tree-node__btn--content {
+		color: var(--ed-text-muted);
+		font-size: var(--ed-text-sm);
+	}
+
+	.tree-node__btn--content.active {
+		background: var(--ed-surface-2);
+		color: var(--ed-text-secondary);
+	}
+
+	.tree-node__indicator {
+		width: 12px;
+		font-size: 10px;
+		color: var(--ed-text-muted);
+		flex-shrink: 0;
+		text-align: center;
+	}
+
+	.tree-node__rune-dot {
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background: var(--ed-warning);
+		flex-shrink: 0;
+	}
+
+	.tree-node__icon {
+		flex-shrink: 0;
+		opacity: 0.5;
+	}
+
+	.tree-node__label--rune {
+		font-weight: 500;
+	}
+
+	.tree-node__label--content {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+</style>

package/app/src/lib/components/HeaderBar.svelte

@@ -113,6 +113,37 @@
 					</svg>
 				</button>
 			</div>
+			<span class="header__divider"></span>
+			<div class="header__group">
+				<button
+					class="header__btn header__btn--icon"
+					class:header__btn--active={editorState.previewTheme === 'light'}
+					onclick={() => editorState.previewTheme = 'light'}
+					title="Light mode"
+				>
+					<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+						<circle cx="8" cy="8" r="3" />
+						<line x1="8" y1="1.5" x2="8" y2="3" />
+						<line x1="8" y1="13" x2="8" y2="14.5" />
+						<line x1="2.4" y1="2.4" x2="3.5" y2="3.5" />
+						<line x1="12.5" y1="12.5" x2="13.6" y2="13.6" />
+						<line x1="1.5" y1="8" x2="3" y2="8" />
+						<line x1="13" y1="8" x2="14.5" y2="8" />
+						<line x1="2.4" y1="13.6" x2="3.5" y2="12.5" />
+						<line x1="12.5" y1="3.5" x2="13.6" y2="2.4" />
+					</svg>
+				</button>
+				<button
+					class="header__btn header__btn--icon"
+					class:header__btn--active={editorState.previewTheme === 'dark'}
+					onclick={() => editorState.previewTheme = 'dark'}
+					title="Dark mode"
+				>
+					<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M13.5 8.5a5.5 5.5 0 0 1-7-7 5.5 5.5 0 1 0 7 7Z" />
+					</svg>
+				</button>
+			</div>
 		{:else if isEdit}
 			<div class="header__group">
 				<button
@@ -253,6 +284,13 @@
 		gap: var(--ed-space-2);
 	}
 
+	.header__divider {
+		width: 1px;
+		height: 16px;
+		background: var(--ed-border-strong);
+		opacity: 0.5;
+	}
+
 	/* ── Unified button style ─────────────────────────── */
 
 	.header__btn {

package/app/src/lib/components/InlineEditor.svelte

@@ -18,10 +18,11 @@
 		content: string;
 		onchange: (content: string) => void;
 		runes: () => RuneInfo[];
+		aggregated?: () => Record<string, unknown>;
 		language?: string;
 	}
 
-	let { content, onchange, runes, language }: Props = $props();
+	let { content, onchange, runes, aggregated, language }: Props = $props();
 
 	let container: HTMLElement;
 	let view = $state<EditorView | undefined>(undefined);
@@ -127,7 +128,7 @@
 				completionCompartment.of(codeMode ? [] : autocompletion({
 					override: [
 						runeCompletionSource(runes),
-						attributeCompletionSource(runes),
+						attributeCompletionSource(runes, aggregated),
 					],
 					icons: false,
 				})),
@@ -175,7 +176,7 @@
 					completionCompartment.reconfigure(autocompletion({
 						override: [
 							runeCompletionSource(runes),
-							attributeCompletionSource(runes),
+							attributeCompletionSource(runes, aggregated),
 						],
 						icons: false,
 					})),

package/app/src/lib/components/InsertBlockDialog.svelte

@@ -0,0 +1,429 @@
+<script lang="ts">
+	import type { RuneInfo } from '../api/client.js';
+
+	interface Props {
+		runes: RuneInfo[];
+		runesByCategory: Map<string, RuneInfo[]>;
+		oninsert: (type: 'heading' | 'paragraph' | 'fence' | 'hr' | 'rune', runeName?: string) => void;
+		onclose: () => void;
+	}
+
+	let { runes, runesByCategory, oninsert, onclose }: Props = $props();
+
+	// Preferred tab order
+	const TAB_ORDER = ['Content', 'Section', 'Layout', 'Code & Data', 'Semantic', 'Design', 'Site'];
+
+	let activeTab = $state('Content');
+	let search = $state('');
+	let dialogEl: HTMLDialogElement;
+	let searchEl: HTMLInputElement;
+
+	// Sorted category names following TAB_ORDER
+	let categories = $derived.by(() => {
+		const present = new Set(runesByCategory.keys());
+		const ordered = TAB_ORDER.filter(c => present.has(c));
+		// Append any categories not in TAB_ORDER
+		for (const c of present) {
+			if (!ordered.includes(c)) ordered.push(c);
+		}
+		return ordered;
+	});
+
+	// Filtered runes when searching
+	let searchResults = $derived.by(() => {
+		if (!search.trim()) return null;
+		const q = search.toLowerCase();
+		return runes.filter(r =>
+			r.name.toLowerCase().includes(q) ||
+			(r.description && r.description.toLowerCase().includes(q))
+		);
+	});
+
+	// Standard content blocks (shown in Content tab)
+	const standardBlocks = [
+		{ type: 'heading' as const, name: 'Heading', description: 'Section heading', icon: 'M3 3v10M13 3v10M3 8h10' },
+		{ type: 'paragraph' as const, name: 'Paragraph', description: 'Body text', icon: 'M2 4h12M2 8h12M2 12h8' },
+		{ type: 'fence' as const, name: 'Code Block', description: 'Fenced code', icon: 'M5 4L2 8l3 4M11 4l3 4-3 4' },
+		{ type: 'hr' as const, name: 'Divider', description: 'Horizontal rule', icon: 'M2 8h12' },
+	];
+
+	$effect(() => {
+		dialogEl?.showModal();
+		// Focus search on open
+		searchEl?.focus();
+	});
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === dialogEl) onclose();
+	}
+
+	function handleInsertStandard(type: 'heading' | 'paragraph' | 'fence' | 'hr') {
+		oninsert(type);
+	}
+
+	function handleInsertRune(name: string) {
+		oninsert('rune', name);
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<dialog
+	bind:this={dialogEl}
+	class="insert-dialog"
+	onclose={onclose}
+	onclick={handleBackdropClick}
+	onkeydown={(e) => { if (e.key === 'Escape') { e.preventDefault(); onclose(); } }}
+>
+	<div class="insert-dialog__inner">
+		<!-- Header -->
+		<div class="insert-dialog__header">
+			<h2 class="insert-dialog__title">Insert Block</h2>
+			<div class="insert-dialog__search-wrap">
+				<svg class="insert-dialog__search-icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+					<circle cx="7" cy="7" r="4.5" />
+					<path d="M10.5 10.5L14 14" />
+				</svg>
+				<input
+					bind:this={searchEl}
+					class="insert-dialog__search"
+					type="text"
+					placeholder="Search blocks..."
+					bind:value={search}
+				/>
+			</div>
+			<button class="insert-dialog__close" onclick={onclose}>
+				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+					<path d="M4 4l8 8M12 4l-8 8" />
+				</svg>
+			</button>
+		</div>
+
+		<!-- Tabs -->
+		{#if !searchResults}
+			<div class="insert-dialog__tabs">
+				{#each categories as category}
+					<button
+						type="button"
+						class="insert-dialog__tab"
+						class:active={activeTab === category}
+						onclick={() => activeTab = category}
+					>
+						{category}
+					</button>
+				{/each}
+			</div>
+		{/if}
+
+		<!-- Body -->
+		<div class="insert-dialog__body">
+			{#if searchResults}
+				<!-- Search results -->
+				{#if searchResults.length === 0}
+					<div class="insert-dialog__empty">No blocks match "{search}"</div>
+				{:else}
+					<div class="insert-dialog__grid">
+						{#each searchResults as rune}
+							<button
+								class="insert-dialog__btn insert-dialog__btn--rune"
+								onclick={() => handleInsertRune(rune.name)}
+							>
+								<span class="insert-dialog__rune-dot"></span>
+								<span class="insert-dialog__rune-info">
+									<span class="insert-dialog__rune-name">{rune.name}</span>
+									{#if rune.description}
+										<span class="insert-dialog__rune-desc">{rune.description}</span>
+									{/if}
+								</span>
+							</button>
+						{/each}
+					</div>
+				{/if}
+			{:else}
+				<!-- Tab content -->
+				<div class="insert-dialog__grid">
+					{#if activeTab === 'Content'}
+						<!-- Standard blocks first -->
+						{#each standardBlocks as block}
+							<button
+								class="insert-dialog__btn"
+								onclick={() => handleInsertStandard(block.type)}
+							>
+								<svg class="insert-dialog__btn-icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+									<path d={block.icon} />
+								</svg>
+								<span class="insert-dialog__btn-info">
+									<span class="insert-dialog__btn-name">{block.name}</span>
+									<span class="insert-dialog__btn-desc">{block.description}</span>
+								</span>
+							</button>
+						{/each}
+					{/if}
+					<!-- Runes for active category -->
+					{#each runesByCategory.get(activeTab) ?? [] as rune}
+						<button
+							class="insert-dialog__btn insert-dialog__btn--rune"
+							onclick={() => handleInsertRune(rune.name)}
+						>
+							<span class="insert-dialog__rune-dot"></span>
+							<span class="insert-dialog__rune-info">
+								<span class="insert-dialog__rune-name">{rune.name}</span>
+								{#if rune.description}
+									<span class="insert-dialog__rune-desc">{rune.description}</span>
+								{/if}
+							</span>
+						</button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</div>
+</dialog>
+
+<style>
+	.insert-dialog {
+		border: none;
+		border-radius: var(--ed-radius-lg, 12px);
+		background: var(--ed-surface-0);
+		box-shadow: var(--ed-shadow-lg);
+		padding: 0;
+		margin: auto;
+		width: 960px;
+		max-width: calc(100vw - 2rem);
+		height: min(600px, calc(100vh - 4rem));
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		animation: dialog-enter 0.15s ease-out;
+	}
+
+	.insert-dialog::backdrop {
+		background: rgba(0, 0, 0, 0.3);
+		backdrop-filter: blur(2px);
+		animation: backdrop-fade 0.15s ease-out;
+	}
+
+	@keyframes dialog-enter {
+		from { opacity: 0; transform: translateY(8px) scale(0.98); }
+		to { opacity: 1; transform: translateY(0) scale(1); }
+	}
+
+	@keyframes backdrop-fade {
+		from { opacity: 0; }
+		to { opacity: 1; }
+	}
+
+	.insert-dialog__inner {
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		height: 100%;
+	}
+
+	/* Header */
+	.insert-dialog__header {
+		display: flex;
+		align-items: center;
+		gap: var(--ed-space-3);
+		padding: var(--ed-space-3) var(--ed-space-4);
+		border-bottom: 1px solid var(--ed-border-subtle);
+		flex-shrink: 0;
+	}
+
+	.insert-dialog__title {
+		font-size: var(--ed-text-md);
+		font-weight: 600;
+		color: var(--ed-text-primary);
+		margin: 0;
+		white-space: nowrap;
+	}
+
+	.insert-dialog__search-wrap {
+		flex: 1;
+		position: relative;
+		max-width: 240px;
+		margin-left: auto;
+	}
+
+	.insert-dialog__search-icon {
+		position: absolute;
+		left: 0.5rem;
+		top: 50%;
+		transform: translateY(-50%);
+		color: var(--ed-text-muted);
+		pointer-events: none;
+	}
+
+	.insert-dialog__search {
+		width: 100%;
+		padding: var(--ed-space-1) var(--ed-space-2) var(--ed-space-1) 1.8rem;
+		border: 1px solid var(--ed-border-default);
+		border-radius: var(--ed-radius-sm);
+		font-size: var(--ed-text-sm);
+		color: var(--ed-text-primary);
+		background: var(--ed-surface-1);
+		outline: none;
+	}
+
+	.insert-dialog__search:focus {
+		border-color: var(--ed-accent);
+		box-shadow: 0 0 0 2px var(--ed-accent-ring);
+	}
+
+	.insert-dialog__close {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border: none;
+		border-radius: var(--ed-radius-sm);
+		background: transparent;
+		color: var(--ed-text-muted);
+		cursor: pointer;
+		transition: background var(--ed-transition-fast), color var(--ed-transition-fast);
+	}
+
+	.insert-dialog__close:hover {
+		background: var(--ed-surface-2);
+		color: var(--ed-text-secondary);
+	}
+
+	/* Tabs */
+	.insert-dialog__tabs {
+		display: flex;
+		gap: 2px;
+		padding: var(--ed-space-2) var(--ed-space-4);
+		border-bottom: 1px solid var(--ed-border-subtle);
+		background: var(--ed-surface-1);
+		flex-shrink: 0;
+		overflow-x: auto;
+	}
+
+	.insert-dialog__tab {
+		padding: 0.3rem 0.7rem;
+		border: none;
+		background: transparent;
+		color: var(--ed-text-muted);
+		font-size: var(--ed-text-sm);
+		font-weight: 500;
+		cursor: pointer;
+		border-radius: var(--ed-radius-sm);
+		white-space: nowrap;
+		transition: background var(--ed-transition-fast), color var(--ed-transition-fast);
+	}
+
+	.insert-dialog__tab:hover {
+		color: var(--ed-text-secondary);
+		background: var(--ed-surface-2);
+	}
+
+	.insert-dialog__tab.active {
+		background: var(--ed-surface-0);
+		color: var(--ed-text-primary);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+	}
+
+	/* Body */
+	.insert-dialog__body {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		padding: var(--ed-space-4);
+	}
+
+	.insert-dialog__empty {
+		text-align: center;
+		padding: 2rem;
+		color: var(--ed-text-muted);
+		font-size: var(--ed-text-sm);
+	}
+
+	/* Grid */
+	.insert-dialog__grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		gap: 0.4rem;
+	}
+
+	/* Block buttons */
+	.insert-dialog__btn {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		padding: var(--ed-space-2) var(--ed-space-3);
+		border: 1px solid var(--ed-border-default);
+		border-radius: var(--ed-radius-sm);
+		background: var(--ed-surface-0);
+		color: var(--ed-text-secondary);
+		font-size: var(--ed-text-sm);
+		cursor: pointer;
+		text-align: left;
+		transition: background var(--ed-transition-fast), border-color var(--ed-transition-fast);
+	}
+
+	.insert-dialog__btn:hover {
+		background: var(--ed-accent-muted);
+		border-color: var(--ed-accent);
+		color: var(--ed-heading);
+	}
+
+	.insert-dialog__btn-icon {
+		flex-shrink: 0;
+		opacity: 0.6;
+		margin-top: 0.15rem;
+	}
+
+	.insert-dialog__btn-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+		min-width: 0;
+	}
+
+	.insert-dialog__btn-name {
+		font-weight: 500;
+	}
+
+	.insert-dialog__btn-desc {
+		font-size: 10px;
+		color: var(--ed-text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* Rune buttons */
+	.insert-dialog__rune-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--ed-warning);
+		flex-shrink: 0;
+		margin-top: 0.35rem;
+	}
+
+	.insert-dialog__rune-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+		min-width: 0;
+	}
+
+	.insert-dialog__rune-name {
+		font-weight: 500;
+	}
+
+	.insert-dialog__rune-desc {
+		font-size: 10px;
+		color: var(--ed-text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.insert-dialog__btn--rune:hover {
+		background: var(--ed-warning-subtle);
+		border-color: var(--ed-warning);
+	}
+</style>

package/app/src/lib/components/MarkdownEditor.svelte

@@ -54,7 +54,7 @@
 				autocompletion({
 					override: [
 						runeCompletionSource(() => editorState.runes),
-						attributeCompletionSource(() => editorState.runes),
+						attributeCompletionSource(() => editorState.runes, () => editorState.aggregated),
 					],
 					icons: false,
 				}),