@refrakt-md/editor 0.8.0 → 0.8.2

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

@@ -15,9 +15,22 @@
 		parseContentTree,
 		serializeAttributes,
 		replaceNodeSource,
+		insertFieldContent,
+		removeFieldContent,
+		appendListItem,
+		removeListItem,
+		reorderListItem,
+		appendGreedyItem,
+		removeGreedyItem,
+		reorderGreedyItem,
+		splitListItems,
 	} from '../editor/block-parser.js';
+	import { resolveContentStructure, type ResolvedField } from '../editor/content-model-resolver.js';
+	import type { SectionMapping, CommandMapping } from '../editor/section-mapper.js';
+	import { stripInlineMarkdown } from '../editor/inline-markdown.js';
 	import RuneAttributes from './RuneAttributes.svelte';
 	import ContentTree from './ContentTree.svelte';
+	import ContentModelTree from './ContentModelTree.svelte';
 	import InlineEditor from './InlineEditor.svelte';
 
 	interface Props {
@@ -25,12 +38,16 @@
 		runeMap: Map<string, RuneInfo>;
 		runes: () => RuneInfo[];
 		aggregated?: Record<string, unknown>;
+		/** When set, auto-navigate to the Nth nested rune (DFS order) on mount */
+		initialRuneIndex?: number | null;
 		onupdate: (block: ParsedBlock) => void;
 		onremove: () => void;
 		onclose: () => void;
+		oneditfield?: (dataName: string, inlineSource: string, rect: DOMRect, mapping: SectionMapping) => void;
+		oneditcode?: (code: string, language: string, rect: DOMRect, mapping: CommandMapping) => void;
 	}
 
-	let { block, runeMap, runes, aggregated = {}, onupdate, onremove, onclose }: Props = $props();
+	let { block, runeMap, runes, aggregated = {}, initialRuneIndex = null, onupdate, onremove, onclose, oneditfield, oneditcode }: Props = $props();
 
 	let label = $derived(blockLabel(block));
 
@@ -58,6 +75,55 @@
 		contentTree.some(n => n.type === 'rune')
 	);
 
+	/** The effective rune info for the structure tab — nested rune if selected, root otherwise */
+	let effectiveRuneInfo = $derived.by(() => {
+		if (activeNode?.type === 'rune' && activeRuneInfo) return activeRuneInfo;
+		return runeInfo;
+	});
+
+	/** Content tree for the effective rune (nested rune's children or root's) */
+	let effectiveContentTree = $derived.by(() => {
+		if (activeNode?.type === 'rune' && activeNode.children) return activeNode.children;
+		return contentTree;
+	});
+
+	/** Whether the effective rune has a declarative content model */
+	let hasContentModel = $derived(effectiveRuneInfo?.contentModel != null);
+
+	/** Resolved structure: effective content tree matched against effective content model */
+	let resolvedStructure = $derived.by(() => {
+		if (!effectiveRuneInfo?.contentModel) return null;
+		return resolveContentStructure(effectiveContentTree, effectiveRuneInfo.contentModel);
+	});
+
+	/** Currently selected field in the content model tree */
+	let selectedField: string | null = $state(null);
+
+	/** Find the path to the Nth rune node in DFS order */
+	function findRunePathByDfsIndex(nodes: ContentNode[], target: number): number[] | null {
+		let count = 0;
+		function walk(ns: ContentNode[], path: number[]): number[] | null {
+			for (let i = 0; i < ns.length; i++) {
+				if (ns[i].type === 'rune') {
+					if (count === target) return [...path, i];
+					count++;
+					const found = walk(ns[i].children ?? [], [...path, i]);
+					if (found) return found;
+				}
+			}
+			return null;
+		}
+		return walk(nodes, []);
+	}
+
+	// Auto-navigate to a nested rune when initialRuneIndex is provided
+	$effect(() => {
+		if (initialRuneIndex != null && contentTree.length > 0) {
+			const path = findRunePathByDfsIndex(contentTree, initialRuneIndex);
+			if (path) activePath = path;
+		}
+	});
+
 	/** Resolve the active nested node from the path */
 	function resolveNode(nodes: ContentNode[], path: number[]): ContentNode | null {
 		if (path.length === 0) return null;
@@ -84,36 +150,253 @@
 		return activeNode.type;
 	});
 
-	let showTreeDropdown: boolean = $state(false);
-	let treeDropdownEl: HTMLDivElement;
+	type TabId = 'settings' | 'structure' | 'content';
+	let activeTab: TabId = $state('settings');
+
+	let availableTabs = $derived.by(() => {
+		if (block.type !== 'rune') return [] as TabId[];
+		const rb = block as RuneBlock;
+		const tabs: TabId[] = ['settings'];
+		// Show structure tab when the effective rune has a content model,
+		// or when no nested rune is selected and root has nested runes (legacy tree)
+		if (hasContentModel || (!activeNode && hasNestedRunes)) tabs.push('structure');
+		if (!rb.selfClosing) tabs.push('content');
+		return tabs;
+	});
+
+	// Auto-switch away from structure tab if it becomes unavailable
+	$effect(() => {
+		if (activeTab === 'structure' && !availableTabs.includes('structure')) {
+			activeTab = 'settings';
+		}
+	});
 
 	function handleTreeSelect(path: number[]) {
 		activePath = path;
-		showTreeDropdown = false;
+		// Auto-switch to Content tab when selecting a content node
+		const node = resolveNode(contentTree, path);
+		if (node && node.type !== 'rune') {
+			activeTab = 'content';
+		}
 	}
 
 	function navigateToRoot() {
 		activePath = [];
-		showTreeDropdown = false;
 	}
 
-	function toggleTreeDropdown() {
-		showTreeDropdown = !showTreeDropdown;
+	// ── Content model field handlers ─────────────────────────────
+
+	function handleFieldSelect(fieldName: string, zoneName?: string) {
+		selectedField = zoneName ? `${zoneName}.${fieldName}` : fieldName;
 	}
 
-	function handleTreeClickOutside(e: MouseEvent) {
-		if (showTreeDropdown && treeDropdownEl && !treeDropdownEl.contains(e.target as Node)) {
-			showTreeDropdown = false;
+	/** Apply a field content change — works for both root and nested runes */
+	function applyFieldChange(updater: (content: string) => string) {
+		const rb = block as RuneBlock;
+		if (activeNode?.type === 'rune' && activeNode.innerContent !== undefined) {
+			// Nested rune: update its inner content, then replace in root
+			const newNestedInner = updater(activeNode.innerContent);
+			if (newNestedInner === activeNode.innerContent) return;
+			const attrStr = serializeAttributes(activeNode.attributes ?? {});
+			const inner = newNestedInner.trim();
+			const newSource = inner
+				? `{% ${activeNode.runeName}${attrStr} %}\n${inner}\n{% /${activeNode.runeName} %}`
+				: `{% ${activeNode.runeName}${attrStr} %}\n\n{% /${activeNode.runeName} %}`;
+			const newRootInner = replaceNodeSource(rb.innerContent, activeNode.source, newSource);
+			const updated: RuneBlock = { ...rb, innerContent: newRootInner, source: '' };
+			updated.source = rebuildRuneSource(updated);
+			onupdate(updated);
+		} else {
+			// Root rune
+			const newInner = updater(rb.innerContent);
+			if (newInner === rb.innerContent) return;
+			const updated: RuneBlock = { ...rb, innerContent: newInner, source: '' };
+			updated.source = rebuildRuneSource(updated);
+			onupdate(updated);
+		}
+	}
+
+	function handleAddField(fieldName: string, zoneName?: string) {
+		if (!resolvedStructure) return;
+		applyFieldChange(content => insertFieldContent(content, resolvedStructure!, fieldName, zoneName));
+	}
+
+	function handleRemoveField(fieldName: string, zoneName?: string) {
+		if (!resolvedStructure) return;
+		applyFieldChange(content => removeFieldContent(content, resolvedStructure!, fieldName, zoneName));
+	}
+
+	function findResolvedField(fieldName: string, zoneName?: string): ResolvedField | null {
+		if (!resolvedStructure) return null;
+		if (resolvedStructure.type === 'sequence') {
+			return resolvedStructure.fields.find(f => f.name === fieldName) ?? null;
+		}
+		if (resolvedStructure.type === 'delimited' && zoneName) {
+			const zone = resolvedStructure.zones.find(z => z.name === zoneName);
+			return zone?.fields.find(f => f.name === fieldName) ?? null;
 		}
+		return null;
 	}
 
-	function handleTreeKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape' && showTreeDropdown) {
-			showTreeDropdown = false;
-			e.stopPropagation();
+	function isGreedyItemField(field: ResolvedField): boolean {
+		return field.greedy && field.match !== 'any';
+	}
+
+	function handleAppendItem(fieldName: string, zoneName?: string) {
+		if (!resolvedStructure) return;
+		const field = findResolvedField(fieldName, zoneName);
+		if (field && isGreedyItemField(field)) {
+			applyFieldChange(content => appendGreedyItem(content, resolvedStructure!, fieldName, zoneName));
+		} else {
+			applyFieldChange(content => appendListItem(content, resolvedStructure!, fieldName, zoneName));
 		}
 	}
 
+	function handleRemoveListItem(fieldName: string, itemIndex: number, zoneName?: string) {
+		if (!resolvedStructure) return;
+		const field = findResolvedField(fieldName, zoneName);
+		if (field && isGreedyItemField(field)) {
+			applyFieldChange(content => removeGreedyItem(content, resolvedStructure!, fieldName, itemIndex, zoneName));
+		} else {
+			applyFieldChange(content => removeListItem(content, resolvedStructure!, fieldName, itemIndex, zoneName));
+		}
+	}
+
+	function handleReorderListItem(fieldName: string, fromIndex: number, toIndex: number, zoneName?: string) {
+		if (!resolvedStructure) return;
+		const field = findResolvedField(fieldName, zoneName);
+		if (field && isGreedyItemField(field)) {
+			applyFieldChange(content => reorderGreedyItem(content, resolvedStructure!, fieldName, fromIndex, toIndex, zoneName));
+		} else {
+			applyFieldChange(content => reorderListItem(content, resolvedStructure!, fieldName, fromIndex, toIndex, zoneName));
+		}
+	}
+
+	function handleEditField(fieldName: string, rect: DOMRect, zoneName?: string, nodeIndex?: number) {
+		if (!resolvedStructure) return;
+		// Find the field in the resolved structure
+		let field;
+		if (resolvedStructure.type === 'sequence') {
+			field = resolvedStructure.fields.find(f => f.name === fieldName);
+		} else if (resolvedStructure.type === 'delimited' && zoneName) {
+			const zone = resolvedStructure.zones.find(z => z.name === zoneName);
+			field = zone?.fields.find(f => f.name === fieldName);
+		}
+		if (!field || !field.filled) return;
+
+		// Pick the target node — use nodeIndex for greedy fields, default to single-node fields
+		const targetIndex = nodeIndex ?? 0;
+		if (targetIndex >= field.nodes.length) return;
+		if (nodeIndex === undefined && field.nodes.length !== 1) return;
+
+		const targetNode = field.nodes[targetIndex];
+		const source = targetNode.source;
+
+		// Fence nodes → open code editor instead of inline text editor
+		if (targetNode.type === 'fence' && oneditcode) {
+			const code = targetNode.fenceCode ?? '';
+			const language = targetNode.fenceLanguage ?? '';
+			const opener = source.split('\n')[0];
+			const delimMatch = opener.match(/^(`{3,}|~{3,})/);
+			const delimiter = delimMatch ? delimMatch[1] : '```';
+			const mapping: CommandMapping = { source, code, language, opener, delimiter };
+			oneditcode(code, language, rect, mapping);
+			return;
+		}
+
+		if (!oneditfield) return;
+
+		const trimmed = source.trim();
+
+		// Strip markdown prefix (heading markers, blockquote markers)
+		let prefix = '';
+		let inlineContent = trimmed;
+		const headingMatch = trimmed.match(/^(#{1,6}\s+)(.*)/);
+		if (headingMatch) {
+			prefix = headingMatch[1];
+			inlineContent = headingMatch[2];
+		} else {
+			const quoteMatch = trimmed.match(/^(>\s*)(.*)/);
+			if (quoteMatch) {
+				prefix = quoteMatch[1];
+				inlineContent = quoteMatch[2];
+			}
+		}
+
+		const mapping: SectionMapping = {
+			dataName: fieldName,
+			text: stripInlineMarkdown(inlineContent),
+			source,
+			sourcePrefix: prefix,
+			inlineSource: inlineContent,
+		};
+		oneditfield(fieldName, inlineContent, rect, mapping);
+	}
+
+	function handleEditListItem(fieldName: string, itemIndex: number, rect: DOMRect, zoneName?: string) {
+		if (!resolvedStructure || !oneditfield) return;
+		// Find the field in the resolved structure
+		let field;
+		if (resolvedStructure.type === 'sequence') {
+			field = resolvedStructure.fields.find(f => f.name === fieldName);
+		} else if (resolvedStructure.type === 'delimited' && zoneName) {
+			const zone = resolvedStructure.zones.find(z => z.name === zoneName);
+			field = zone?.fields.find(f => f.name === fieldName);
+		}
+		if (!field || !field.filled || field.nodes.length === 0) return;
+
+		const listNode = field.nodes[0];
+		const items = splitListItems(listNode.source);
+		if (itemIndex < 0 || itemIndex >= items.length) return;
+
+		const itemSource = items[itemIndex];
+		// Strip the list marker to get inline content
+		const markerMatch = itemSource.match(/^([-*+]\s+|\d+\.\s+)/);
+		const prefix = markerMatch ? markerMatch[1] : '';
+		const inlineContent = markerMatch ? itemSource.slice(prefix.length) : itemSource;
+
+		const mapping: SectionMapping = {
+			dataName: `${fieldName}[${itemIndex}]`,
+			text: stripInlineMarkdown(inlineContent),
+			source: itemSource,
+			sourcePrefix: prefix,
+			inlineSource: inlineContent,
+		};
+		oneditfield(`${fieldName}[${itemIndex}]`, inlineContent, rect, mapping);
+	}
+
+	function handleNavigateRune(fieldName: string, nodeIndex: number, zoneName?: string) {
+		if (!resolvedStructure) return;
+
+		// Find the field
+		let field;
+		if (resolvedStructure.type === 'sequence') {
+			field = resolvedStructure.fields.find(f => f.name === fieldName);
+		} else if (resolvedStructure.type === 'delimited' && zoneName) {
+			const zone = resolvedStructure.zones.find(z => z.name === zoneName);
+			field = zone?.fields.find(f => f.name === fieldName);
+		}
+		if (!field || nodeIndex < 0 || nodeIndex >= field.nodes.length) return;
+
+		const targetNode = field.nodes[nodeIndex];
+		if (targetNode.type !== 'rune') return;
+
+		// Find this node's index in the effectiveContentTree
+		const tree = effectiveContentTree;
+		const treeIndex = tree.findIndex(n => n.source === targetNode.source);
+		if (treeIndex === -1) return;
+
+		// Navigate to the nested rune
+		if (activeNode?.type === 'rune') {
+			activePath = [...activePath, treeIndex];
+		} else {
+			activePath = [treeIndex];
+		}
+
+		// Switch to settings tab to show the nested rune's settings
+		activeTab = 'settings';
+	}
+
 	// ── Edit handlers ────────────────────────────────────────────
 
 	function handleHeadingTextChange(text: string) {
@@ -241,27 +524,13 @@
 
 </script>
 
-<svelte:window onmousedown={handleTreeClickOutside} onkeydown={handleTreeKeydown} />
-
 <div class="edit-panel">
-	<div class="edit-panel__header-wrap" bind:this={treeDropdownEl}>
+	<div class="edit-panel__top">
 		<div class="edit-panel__header">
 			<span class="edit-panel__type">{headerLabel}</span>
 			{#if !activeIsContent && category}
 				<span class="edit-panel__category">{category}</span>
 			{/if}
-			{#if hasNestedRunes}
-				<button
-					class="edit-panel__btn"
-					class:active={showTreeDropdown}
-					onclick={toggleTreeDropdown}
-					title="Content tree"
-				>
-					<svg 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="M2 3h4M2 7h4M6 11h4M6 15h4M4 3v8M8 11v4" />
-					</svg>
-				</button>
-			{/if}
 			<div class="edit-panel__spacer"></div>
 			<button
 				class="edit-panel__btn edit-panel__btn--danger"
@@ -283,176 +552,217 @@
 			>&times;</button>
 		</div>
 
-		{#if showTreeDropdown && hasNestedRunes && block.type === 'rune'}
-			{@const rb = block as RuneBlock}
-			<div class="edit-panel__tree-dropdown">
-				<ContentTree
-					nodes={contentTree}
-					{activePath}
-					onselect={handleTreeSelect}
-					rootLabel={rb.runeName}
-					onrootclick={navigateToRoot}
-					isRootActive={activePath.length === 0}
-				/>
+		{#if block.type === 'rune' && availableTabs.length > 1}
+			<div class="edit-panel__tabs">
+				{#each availableTabs as tab}
+					<button
+						type="button"
+						class="edit-panel__tab"
+						class:active={activeTab === tab}
+						onclick={() => activeTab = tab}
+					>
+						{#if tab === 'settings'}
+							<svg width="14" height="14" 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="2" />
+								<path d="M6.7 1.6h2.6l.4 1.8.8.4 1.7-.7 1.8 1.8-.7 1.7.4.8 1.8.4v2.6l-1.8.4-.4.8.7 1.7-1.8 1.8-1.7-.7-.8.4-.4 1.8H6.7l-.4-1.8-.8-.4-1.7.7-1.8-1.8.7-1.7-.4-.8-1.8-.4V6.7l1.8-.4.4-.8-.7-1.7 1.8-1.8 1.7.7.8-.4z" />
+							</svg>
+							Settings
+						{:else if tab === 'structure'}
+							<svg 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="M2 3h4M2 7h4M6 11h4M6 15h4M4 3v8M8 11v4" />
+							</svg>
+							Structure
+						{:else if tab === 'content'}
+							<svg 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="M2 4h12M2 8h12M2 12h8" />
+							</svg>
+							Content
+						{/if}
+					</button>
+				{/each}
 			</div>
 		{/if}
 	</div>
 
-	<div class="edit-panel__body">
-		{#if block.type === 'heading'}
-			{@const hb = block as HeadingBlock}
-			<div class="edit-panel__field-group">
-				<label class="edit-panel__field">
-					<span class="edit-panel__field-label">Level</span>
-					<select
-						class="edit-panel__select"
-						value={String(hb.level)}
-						onchange={(e) => handleHeadingLevelChange(Number((e.target as HTMLSelectElement).value))}
-					>
-						<option value="1">H1</option>
-						<option value="2">H2</option>
-						<option value="3">H3</option>
-						<option value="4">H4</option>
-						<option value="5">H5</option>
-						<option value="6">H6</option>
-					</select>
-				</label>
-				<label class="edit-panel__field">
-					<span class="edit-panel__field-label">Text</span>
-					<input
-						class="edit-panel__input"
-						type="text"
-						value={hb.text}
-						oninput={(e) => handleHeadingTextChange((e.target as HTMLInputElement).value)}
+	{#if block.type === 'rune'}
+		{@const rb = block as RuneBlock}
+
+		<!-- Settings tab -->
+		{#if activeTab === 'settings'}
+			<div class="edit-panel__tab-panel">
+				{#if activeIsContent && activeNode}
+					{#if activeNode.type === 'heading'}
+						<div class="edit-panel__field-group">
+							<label class="edit-panel__field">
+								<span class="edit-panel__field-label">Level</span>
+								<select
+									class="edit-panel__select"
+									value={String(activeNode.headingLevel ?? 1)}
+									onchange={(e) => handleNestedHeadingLevelChange(Number((e.target as HTMLSelectElement).value))}
+								>
+									<option value="1">H1</option>
+									<option value="2">H2</option>
+									<option value="3">H3</option>
+									<option value="4">H4</option>
+									<option value="5">H5</option>
+									<option value="6">H6</option>
+								</select>
+							</label>
+							<label class="edit-panel__field">
+								<span class="edit-panel__field-label">Text</span>
+								<input
+									class="edit-panel__input"
+									type="text"
+									value={activeNode.headingText ?? ''}
+									oninput={(e) => handleNestedHeadingTextChange((e.target as HTMLInputElement).value)}
+								/>
+							</label>
+						</div>
+					{:else if activeNode.type === 'fence'}
+						<div class="edit-panel__field-group">
+							<label class="edit-panel__field">
+								<span class="edit-panel__field-label">Language</span>
+								<input
+									class="edit-panel__input"
+									type="text"
+									value={activeNode.fenceLanguage ?? ''}
+									oninput={(e) => handleNestedFenceLangChange((e.target as HTMLInputElement).value)}
+									placeholder="e.g. js, python, html"
+								/>
+							</label>
+						</div>
+					{:else}
+						<div class="edit-panel__empty-tab">
+							<span class="edit-panel__empty-tab-text">No settings for this element</span>
+						</div>
+					{/if}
+
+				{:else if activeNode && activeRuneInfo}
+					<RuneAttributes
+						runeInfo={activeRuneInfo}
+						attributes={activeNode.attributes ?? {}}
+						onchange={handleNestedAttrsChange}
 					/>
-				</label>
-			</div>
 
-		{:else if block.type === 'rune'}
-			{@const rb = block as RuneBlock}
-
-			<!-- Editor for the active node -->
-			{#if activeIsContent && activeNode}
-				<!-- Type-specific editors for content nodes -->
-				{#if activeNode.type === 'heading'}
-					<div class="edit-panel__field-group">
-						<label class="edit-panel__field">
-							<span class="edit-panel__field-label">Level</span>
-							<select
-								class="edit-panel__select"
-								value={String(activeNode.headingLevel ?? 1)}
-								onchange={(e) => handleNestedHeadingLevelChange(Number((e.target as HTMLSelectElement).value))}
-							>
-								<option value="1">H1</option>
-								<option value="2">H2</option>
-								<option value="3">H3</option>
-								<option value="4">H4</option>
-								<option value="5">H5</option>
-								<option value="6">H6</option>
-							</select>
-						</label>
-						<label class="edit-panel__field">
-							<span class="edit-panel__field-label">Text</span>
-							<input
-								class="edit-panel__input"
-								type="text"
-								value={activeNode.headingText ?? ''}
-								oninput={(e) => handleNestedHeadingTextChange((e.target as HTMLInputElement).value)}
-							/>
-						</label>
-					</div>
-				{:else if activeNode.type === 'fence'}
-					<div class="edit-panel__field-group">
-						<label class="edit-panel__field">
-							<span class="edit-panel__field-label">Language</span>
-							<input
-								class="edit-panel__input"
-								type="text"
-								value={activeNode.fenceLanguage ?? ''}
-								oninput={(e) => handleNestedFenceLangChange((e.target as HTMLInputElement).value)}
-								placeholder="e.g. js, python, html"
-							/>
-						</label>
-					</div>
-					<div class="edit-panel__content-editor">
-						<InlineEditor
-							content={activeNode.fenceCode ?? ''}
-							onchange={handleNestedFenceCodeChange}
-							language={activeNode.fenceLanguage}
-							{runes}
-							aggregated={() => aggregated}
-						/>
-					</div>
-				{:else if activeNode.type === 'paragraph'}
-					<div class="edit-panel__content-editor">
-						<InlineEditor
-							content={activeNode.source}
-							onchange={handleNestedSourceChange}
-							{runes}
-							aggregated={() => aggregated}
+				{:else if !activeNode}
+					{#if runeInfo}
+						<RuneAttributes
+							{runeInfo}
+							attributes={rb.attributes}
+							onchange={handleRuneAttrsChange}
 						/>
-					</div>
-				{:else}
-					<!-- List, quote, image, hr — raw source editing -->
-					<div class="edit-panel__field-group">
-						<label class="edit-panel__field">
-							<span class="edit-panel__field-label">Source</span>
-							<textarea
-								class="edit-panel__textarea"
-								value={activeNode.source}
-								oninput={(e) => handleNestedSourceChange((e.target as HTMLTextAreaElement).value)}
-								rows={Math.max(4, activeNode.source.split('\n').length)}
-							></textarea>
-						</label>
-					</div>
+					{:else}
+						<div class="edit-panel__unknown">
+							<span class="edit-panel__unknown-label">Unknown rune: {rb.runeName}</span>
+							{#each Object.entries(rb.attributes) as [key, val]}
+								<label class="edit-panel__field">
+									<span class="edit-panel__field-label">{key}</span>
+									<input
+										class="edit-panel__input"
+										type="text"
+										value={val}
+										oninput={(e) => {
+											const next = { ...rb.attributes, [key]: (e.target as HTMLInputElement).value };
+											handleRuneAttrsChange(next);
+										}}
+									/>
+								</label>
+							{/each}
+						</div>
+					{/if}
 				{/if}
+			</div>
+		{/if}
 
-			{:else if activeNode && activeRuneInfo}
-				<!-- Nested rune: attributes + content -->
-				<RuneAttributes
-					runeInfo={activeRuneInfo}
-					attributes={activeNode.attributes ?? {}}
-					onchange={handleNestedAttrsChange}
-				/>
-				{#if !activeNode.selfClosing && activeNode.innerContent !== undefined}
-					<div class="edit-panel__content-editor">
-						<InlineEditor
-							content={activeNode.innerContent}
-							onchange={handleNestedContentChange}
-							{runes}
-							aggregated={() => aggregated}
-						/>
-					</div>
+		<!-- Structure tab -->
+		{#if activeTab === 'structure'}
+			<div class="edit-panel__tab-panel">
+				{#if hasContentModel && resolvedStructure}
+					<ContentModelTree
+						structure={resolvedStructure}
+						rootLabel={activeNode?.runeName ?? rb.runeName}
+						onaddfield={handleAddField}
+						onremovefield={handleRemoveField}
+						onappenditem={handleAppendItem}
+						onremovelistitem={handleRemoveListItem}
+						onreorderlistitem={handleReorderListItem}
+						oneditfield={handleEditField}
+						oneditlistitem={handleEditListItem}
+						onnavigaterune={handleNavigateRune}
+						onfieldselect={handleFieldSelect}
+						{selectedField}
+					/>
+				{:else if !activeNode && hasNestedRunes}
+					<ContentTree
+						nodes={contentTree}
+						{activePath}
+						onselect={handleTreeSelect}
+						rootLabel={rb.runeName}
+						onrootclick={navigateToRoot}
+						isRootActive={activePath.length === 0}
+					/>
 				{/if}
+			</div>
+		{/if}
 
-			{:else if !activeNode}
-				<!-- Root rune: attributes + content -->
-				{#if runeInfo}
-					<RuneAttributes
-						{runeInfo}
-						attributes={rb.attributes}
-						onchange={handleRuneAttrsChange}
-					/>
-				{:else}
-					<div class="edit-panel__unknown">
-						<span class="edit-panel__unknown-label">Unknown rune: {rb.runeName}</span>
-						{#each Object.entries(rb.attributes) as [key, val]}
+		<!-- Content tab -->
+		{#if activeTab === 'content' && !rb.selfClosing}
+			<div class="edit-panel__tab-panel">
+				{#if activeIsContent && activeNode}
+					{#if activeNode.type === 'fence'}
+						<div class="edit-panel__content-editor">
+							<InlineEditor
+								content={activeNode.fenceCode ?? ''}
+								onchange={handleNestedFenceCodeChange}
+								language={activeNode.fenceLanguage}
+								{runes}
+								aggregated={() => aggregated}
+							/>
+						</div>
+					{:else if activeNode.type === 'paragraph'}
+						<div class="edit-panel__content-editor">
+							<InlineEditor
+								content={activeNode.source}
+								onchange={handleNestedSourceChange}
+								{runes}
+								aggregated={() => aggregated}
+							/>
+						</div>
+					{:else if activeNode.type === 'heading'}
+						<div class="edit-panel__empty-tab">
+							<span class="edit-panel__empty-tab-text">Edit heading text in Settings</span>
+						</div>
+					{:else}
+						<div class="edit-panel__field-group">
 							<label class="edit-panel__field">
-								<span class="edit-panel__field-label">{key}</span>
-								<input
-									class="edit-panel__input"
-									type="text"
-									value={val}
-									oninput={(e) => {
-										const next = { ...rb.attributes, [key]: (e.target as HTMLInputElement).value };
-										handleRuneAttrsChange(next);
-									}}
-								/>
+								<span class="edit-panel__field-label">Source</span>
+								<textarea
+									class="edit-panel__textarea"
+									value={activeNode.source}
+									oninput={(e) => handleNestedSourceChange((e.target as HTMLTextAreaElement).value)}
+									rows={Math.max(4, activeNode.source.split('\n').length)}
+								></textarea>
 							</label>
-						{/each}
-					</div>
-				{/if}
-				{#if !rb.selfClosing}
+						</div>
+					{/if}
+
+				{:else if activeNode && activeRuneInfo}
+					{#if !activeNode.selfClosing && activeNode.innerContent !== undefined}
+						<div class="edit-panel__content-editor">
+							<InlineEditor
+								content={activeNode.innerContent}
+								onchange={handleNestedContentChange}
+								{runes}
+								aggregated={() => aggregated}
+							/>
+						</div>
+					{:else}
+						<div class="edit-panel__empty-tab">
+							<span class="edit-panel__empty-tab-text">This rune has no inner content</span>
+						</div>
+					{/if}
+
+				{:else if !activeNode}
 					<div class="edit-panel__content-editor">
 						<InlineEditor
 							content={rb.innerContent}
@@ -462,64 +772,104 @@
 						/>
 					</div>
 				{/if}
-			{/if}
-
-		{:else if block.type === 'fence'}
-			{@const fb = block as FenceBlock}
-			<div class="edit-panel__field-group">
-				<label class="edit-panel__field">
-					<span class="edit-panel__field-label">Language</span>
-					<input
-						class="edit-panel__input"
-						type="text"
-						value={fb.language}
-						oninput={(e) => handleFenceLangChange((e.target as HTMLInputElement).value)}
-						placeholder="e.g. js, python, html"
-					/>
-				</label>
-			</div>
-			<div class="edit-panel__content-editor">
-				<InlineEditor
-					content={fb.code}
-					onchange={handleFenceCodeChange}
-					language={fb.language}
-					{runes}
-				/>
-					aggregated={() => aggregated}
-			</div>
-
-		{:else if block.type === 'paragraph'}
-			<div class="edit-panel__content-editor">
-				<InlineEditor
-					content={block.source}
-					onchange={handleSourceChange}
-					{runes}
-				/>
-					aggregated={() => aggregated}
-			</div>
-
-		{:else}
-			<!-- List, quote, image, etc. — raw source editing -->
-			<div class="edit-panel__field-group">
-				<label class="edit-panel__field">
-					<span class="edit-panel__field-label">Source</span>
-					<textarea
-						class="edit-panel__textarea"
-						value={block.source}
-						oninput={(e) => handleSourceChange((e.target as HTMLTextAreaElement).value)}
-						rows={Math.max(4, block.source.split('\n').length)}
-					></textarea>
-				</label>
 			</div>
 		{/if}
-	</div>
+
+	{:else}
+		<div class="edit-panel__body">
+			{#if block.type === 'heading'}
+				{@const hb = block as HeadingBlock}
+				<div class="edit-panel__field-group">
+					<label class="edit-panel__field">
+						<span class="edit-panel__field-label">Level</span>
+						<select
+							class="edit-panel__select"
+							value={String(hb.level)}
+							onchange={(e) => handleHeadingLevelChange(Number((e.target as HTMLSelectElement).value))}
+						>
+							<option value="1">H1</option>
+							<option value="2">H2</option>
+							<option value="3">H3</option>
+							<option value="4">H4</option>
+							<option value="5">H5</option>
+							<option value="6">H6</option>
+						</select>
+					</label>
+					<label class="edit-panel__field">
+						<span class="edit-panel__field-label">Text</span>
+						<input
+							class="edit-panel__input"
+							type="text"
+							value={hb.text}
+							oninput={(e) => handleHeadingTextChange((e.target as HTMLInputElement).value)}
+						/>
+					</label>
+				</div>
+
+			{:else if block.type === 'fence'}
+				{@const fb = block as FenceBlock}
+				<div class="edit-panel__field-group">
+					<label class="edit-panel__field">
+						<span class="edit-panel__field-label">Language</span>
+						<input
+							class="edit-panel__input"
+							type="text"
+							value={fb.language}
+							oninput={(e) => handleFenceLangChange((e.target as HTMLInputElement).value)}
+							placeholder="e.g. js, python, html"
+						/>
+					</label>
+				</div>
+				<div class="edit-panel__content-editor">
+					<InlineEditor
+						content={fb.code}
+						onchange={handleFenceCodeChange}
+						language={fb.language}
+						{runes}
+						aggregated={() => aggregated}
+					/>
+				</div>
+
+			{:else if block.type === 'paragraph'}
+				<div class="edit-panel__content-editor">
+					<InlineEditor
+						content={block.source}
+						onchange={handleSourceChange}
+						{runes}
+						aggregated={() => aggregated}
+					/>
+				</div>
+
+			{:else}
+				<!-- List, quote, image, etc. — raw source editing -->
+				<div class="edit-panel__field-group">
+					<label class="edit-panel__field">
+						<span class="edit-panel__field-label">Source</span>
+						<textarea
+							class="edit-panel__textarea"
+							value={block.source}
+							oninput={(e) => handleSourceChange((e.target as HTMLTextAreaElement).value)}
+							rows={Math.max(4, block.source.split('\n').length)}
+						></textarea>
+					</label>
+				</div>
+			{/if}
+		</div>
+	{/if}
 </div>
 
 <style>
 	.edit-panel {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
+		flex: 1;
+		min-height: 0;
+	}
+
+	.edit-panel__top {
+		flex-shrink: 0;
+		background: var(--ed-surface-0);
+		border-bottom: 1px solid var(--ed-border-default);
 	}
 
 	.edit-panel__header {
@@ -527,11 +877,6 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: var(--ed-space-4) var(--ed-space-5);
-		border-bottom: 1px solid var(--ed-border-default);
-		background: transparent;
-		position: sticky;
-		top: 0;
-		z-index: 1;
 	}
 
 	.edit-panel__type {
@@ -672,9 +1017,10 @@
 	.edit-panel__content-editor {
 		display: flex;
 		flex-direction: column;
+		flex-shrink: 0;
 		overflow: hidden;
-		margin-left: calc(-1 * var(--ed-space-4));
-		margin-right: calc(-1 * var(--ed-space-4));
+		margin-left: calc(-1 * var(--ed-space-5));
+		margin-right: calc(-1 * var(--ed-space-5));
 		border-top: 1px solid var(--ed-border-subtle);
 	}
 
@@ -690,30 +1036,64 @@
 		font-style: italic;
 	}
 
-	/* Header wrap (contains header + tree dropdown) */
-	.edit-panel__header-wrap {
-		position: relative;
-		flex-shrink: 0;
+	/* Tab strip */
+	.edit-panel__tabs {
+		display: flex;
+		gap: 2px;
+		background: var(--ed-surface-2);
+		border-radius: var(--ed-radius-sm);
+		padding: 2px;
+		margin: 0 var(--ed-space-4) var(--ed-space-3);
+	}
+
+	.edit-panel__tab {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.35rem;
+		padding: 0.35rem 0.5rem;
+		border: none;
+		background: transparent;
+		color: var(--ed-text-muted);
+		font-size: var(--ed-text-sm);
+		font-weight: 500;
+		cursor: pointer;
+		border-radius: calc(var(--ed-radius-sm) - 1px);
+		transition: background var(--ed-transition-fast), color var(--ed-transition-fast);
 	}
 
-	/* Tree button active state */
-	.edit-panel__btn.active {
-		color: var(--ed-accent);
-		background: var(--ed-accent-muted);
+	.edit-panel__tab:hover {
+		color: var(--ed-text-secondary);
 	}
 
-	/* Content tree dropdown */
-	.edit-panel__tree-dropdown {
-		padding: 0.5rem;
-		border-bottom: 1px solid var(--ed-border-default);
+	.edit-panel__tab.active {
 		background: var(--ed-surface-0);
-		max-height: 300px;
+		color: var(--ed-text-primary);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+	}
+
+	/* Tab panels */
+	.edit-panel__tab-panel {
+		flex: 1;
 		overflow-y: auto;
-		animation: tree-dropdown-enter 0.1s ease-out;
+		padding: var(--ed-space-5);
+		display: flex;
+		flex-direction: column;
+		gap: var(--ed-space-5);
 	}
 
-	@keyframes tree-dropdown-enter {
-		from { opacity: 0; transform: translateY(-4px); }
-		to { opacity: 1; transform: translateY(0); }
+	/* Empty tab state */
+	.edit-panel__empty-tab {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--ed-space-8) var(--ed-space-4);
+	}
+
+	.edit-panel__empty-tab-text {
+		font-size: var(--ed-text-sm);
+		color: var(--ed-text-muted);
+		font-style: italic;
 	}
 </style>