@refrakt-md/editor 0.8.1 → 0.8.2

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

@@ -3,6 +3,13 @@
 	import type { ContentNode } from '../editor/block-parser.js';
 	import { splitListItems } from '../editor/block-parser.js';
 
+	interface PreviewItem {
+		text: string;
+		type: 'text' | 'rune';
+		/** Index within field.nodes — used for rune navigation and greedy field editing */
+		nodeIndex?: number;
+	}
+
 	interface Props {
 		structure: ResolvedStructure;
 		rootLabel: string;
@@ -10,7 +17,10 @@
 		onremovefield: (fieldName: string, zoneName?: string) => void;
 		onappenditem: (fieldName: string, zoneName?: string) => void;
 		onremovelistitem: (fieldName: string, itemIndex: number, zoneName?: string) => void;
-		oneditfield: (fieldName: string, rect: DOMRect, zoneName?: string) => void;
+		onreorderlistitem: (fieldName: string, fromIndex: number, toIndex: number, zoneName?: string) => void;
+		oneditfield: (fieldName: string, rect: DOMRect, zoneName?: string, nodeIndex?: number) => void;
+		oneditlistitem: (fieldName: string, itemIndex: number, rect: DOMRect, zoneName?: string) => void;
+		onnavigaterune: (fieldName: string, nodeIndex: number, zoneName?: string) => void;
 		onfieldselect: (fieldName: string, zoneName?: string) => void;
 		selectedField?: string | null;
 	}
@@ -22,15 +32,84 @@
 		onremovefield,
 		onappenditem,
 		onremovelistitem,
+		onreorderlistitem,
 		oneditfield,
+		oneditlistitem,
+		onnavigaterune,
 		onfieldselect,
 		selectedField = null,
 	}: Props = $props();
 
+	// ── Drag and drop state ──────────────────────────────────────
+	let dragFieldName: string | null = $state(null);
+	let dragZoneName: string | undefined = $state(undefined);
+	let dragFromIndex: number | null = $state(null);
+	let dragOverIndex: number | null = $state(null);
+
+	function handleItemDragStart(e: DragEvent, fieldName: string, index: number, zoneName?: string) {
+		dragFieldName = fieldName;
+		dragZoneName = zoneName;
+		dragFromIndex = index;
+		dragOverIndex = index;
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('text/plain', String(index));
+		}
+	}
+
+	function handleItemDragOver(e: DragEvent, index: number) {
+		if (dragFromIndex === null) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+		dragOverIndex = index;
+	}
+
+	function handleItemDrop(e: DragEvent, index: number) {
+		e.preventDefault();
+		if (dragFromIndex !== null && dragFromIndex !== index && dragFieldName !== null) {
+			onreorderlistitem(dragFieldName, dragFromIndex, index, dragZoneName);
+		}
+		dragFieldName = null;
+		dragZoneName = undefined;
+		dragFromIndex = null;
+		dragOverIndex = null;
+	}
+
+	function handleItemDragEnd() {
+		dragFieldName = null;
+		dragZoneName = undefined;
+		dragFromIndex = null;
+		dragOverIndex = null;
+	}
+
 	function isListField(match: string): boolean {
 		return match === 'list' || match.startsWith('list:');
 	}
 
+	function isGreedyItemField(field: ResolvedField): boolean {
+		return field.greedy && field.filled && field.match !== 'any';
+	}
+
+	/** Extract individual items from a greedy field for per-item rendering */
+	function greedyItemPreviews(field: ResolvedField): { text: string; index: number }[] {
+		return field.nodes.map((node, i) => {
+			let text: string;
+			if (node.type === 'fence') {
+				text = node.fenceLanguage ? `[${node.fenceLanguage}]` : '[code]';
+			} else if (node.type === 'heading' && node.headingText) {
+				text = node.headingText;
+			} else if (node.type === 'rune' && node.runeName) {
+				text = node.runeName;
+			} else if (node.type === 'image') {
+				text = '[image]';
+			} else {
+				const raw = node.source.replace(/\n/g, ' ').trim();
+				text = raw.length > 50 ? raw.slice(0, 47) + '...' : raw;
+			}
+			return { text: text.length > 50 ? text.slice(0, 47) + '...' : text, index: i };
+		});
+	}
+
 	/** Icon SVG path for a match type */
 	function matchIcon(match: string): string {
 		// Take first alternative for pipe-separated matches
@@ -74,20 +153,21 @@
 		return result;
 	}
 
-	/** Generate a preview string for matched content */
-	function contentPreview(nodes: ContentNode[]): string[] {
-		const previews: string[] = [];
-		for (const node of nodes) {
+	/** Generate preview items for matched content */
+	function contentPreview(nodes: ContentNode[]): PreviewItem[] {
+		const previews: PreviewItem[] = [];
+		for (let idx = 0; idx < nodes.length; idx++) {
+			const node = nodes[idx];
 			if (node.type === 'heading' && node.headingText) {
-				previews.push(node.headingText);
+				previews.push({ text: node.headingText, type: 'text', nodeIndex: idx });
 			} else if (node.type === 'paragraph') {
 				const text = node.source.replace(/\n/g, ' ').trim();
-				previews.push(text.length > 60 ? text.slice(0, 57) + '...' : text);
+				previews.push({ text: text.length > 60 ? text.slice(0, 57) + '...' : text, type: 'text', nodeIndex: idx });
 			} else if (node.type === 'rune' && node.runeName) {
-				previews.push(node.runeName);
+				previews.push({ text: node.runeName, type: 'rune', nodeIndex: idx });
 			} else if (node.type === 'fence') {
 				const lang = node.fenceLanguage ? `[${node.fenceLanguage}]` : '[code]';
-				previews.push(lang);
+				previews.push({ text: lang, type: 'text', nodeIndex: idx });
 			} else if (node.type === 'list') {
 				// Show abbreviated list items from source
 				const items = node.source.split('\n')
@@ -95,20 +175,145 @@
 					.map(l => l.replace(/^[-*\d.]+\s+/, '').trim())
 					.filter(Boolean);
 				for (const item of items.slice(0, 3)) {
-					previews.push(item.length > 50 ? item.slice(0, 47) + '...' : item);
+					previews.push({ text: item.length > 50 ? item.slice(0, 47) + '...' : item, type: 'text' });
 				}
-				if (items.length > 3) previews.push(`... +${items.length - 3} more`);
+				if (items.length > 3) previews.push({ text: `... +${items.length - 3} more`, type: 'text' });
 			} else if (node.type === 'image') {
-				previews.push('[image]');
+				previews.push({ text: '[image]', type: 'text', nodeIndex: idx });
 			} else {
 				const text = node.source.replace(/\n/g, ' ').trim();
-				if (text) previews.push(text.length > 50 ? text.slice(0, 47) + '...' : text);
+				if (text) previews.push({ text: text.length > 50 ? text.slice(0, 47) + '...' : text, type: 'text', nodeIndex: idx });
 			}
 		}
 		return previews;
 	}
 </script>
 
+{#snippet previewItems(previews: PreviewItem[], fieldName: string, zoneName?: string)}
+	{#each previews as preview}
+		{#if preview.type === 'rune' && preview.nodeIndex !== undefined}
+			<button
+				type="button"
+				class="cm-tree__preview-line cm-tree__preview-line--rune"
+				onclick={() => onnavigaterune(fieldName, preview.nodeIndex!, zoneName)}
+			>
+				<span class="cm-tree__rune-dot"></span>
+				{preview.text}
+			</button>
+		{:else}
+			<button
+				type="button"
+				class="cm-tree__preview-line cm-tree__preview-line--clickable"
+				onclick={(e) => oneditfield(fieldName, (e.currentTarget as HTMLElement).getBoundingClientRect(), zoneName, preview.nodeIndex)}
+			>
+				{preview.text}
+			</button>
+		{/if}
+	{/each}
+{/snippet}
+
+{#snippet listItemRows(listItems: { text: string; index: number }[], fieldName: string, zoneName?: string)}
+	{#each listItems as item}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="cm-tree__preview-item"
+			class:cm-tree__preview-item--drag-over={dragFieldName === fieldName && dragZoneName === zoneName && dragOverIndex === item.index && dragFromIndex !== item.index}
+			class:cm-tree__preview-item--dragging={dragFieldName === fieldName && dragZoneName === zoneName && dragFromIndex === item.index}
+			draggable="true"
+			ondragstart={(e) => handleItemDragStart(e, fieldName, item.index, zoneName)}
+			ondragover={(e) => handleItemDragOver(e, item.index)}
+			ondrop={(e) => handleItemDrop(e, item.index)}
+			ondragend={handleItemDragEnd}
+		>
+			<span
+				class="cm-tree__preview-grip"
+				title="Drag to reorder"
+			>
+				<svg width="6" height="10" viewBox="0 0 6 10" fill="none">
+					<circle cx="1.5" cy="1.5" r="1" fill="currentColor"/>
+					<circle cx="4.5" cy="1.5" r="1" fill="currentColor"/>
+					<circle cx="1.5" cy="5" r="1" fill="currentColor"/>
+					<circle cx="4.5" cy="5" r="1" fill="currentColor"/>
+					<circle cx="1.5" cy="8.5" r="1" fill="currentColor"/>
+					<circle cx="4.5" cy="8.5" r="1" fill="currentColor"/>
+				</svg>
+			</span>
+			<button
+				type="button"
+				class="cm-tree__preview-text cm-tree__preview-text--clickable"
+				onclick={(e) => {
+					e.stopPropagation();
+					oneditlistitem(fieldName, item.index, (e.currentTarget as HTMLElement).getBoundingClientRect(), zoneName);
+				}}
+			>
+				{item.text}
+			</button>
+			<button
+				type="button"
+				class="cm-tree__preview-remove"
+				title="Remove item"
+				onclick={() => onremovelistitem(fieldName, item.index, zoneName)}
+			>
+				<svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+					<line x1="4" y1="4" x2="12" y2="12" />
+					<line x1="12" y1="4" x2="4" y2="12" />
+				</svg>
+			</button>
+		</div>
+	{/each}
+{/snippet}
+
+{#snippet greedyItemRows(items: { text: string; index: number }[], fieldName: string, zoneName?: string)}
+	{#each items as item}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="cm-tree__preview-item"
+			class:cm-tree__preview-item--drag-over={dragFieldName === fieldName && dragZoneName === zoneName && dragOverIndex === item.index && dragFromIndex !== item.index}
+			class:cm-tree__preview-item--dragging={dragFieldName === fieldName && dragZoneName === zoneName && dragFromIndex === item.index}
+			draggable="true"
+			ondragstart={(e) => handleItemDragStart(e, fieldName, item.index, zoneName)}
+			ondragover={(e) => handleItemDragOver(e, item.index)}
+			ondrop={(e) => handleItemDrop(e, item.index)}
+			ondragend={handleItemDragEnd}
+		>
+			<span
+				class="cm-tree__preview-grip"
+				title="Drag to reorder"
+			>
+				<svg width="6" height="10" viewBox="0 0 6 10" fill="none">
+					<circle cx="1.5" cy="1.5" r="1" fill="currentColor"/>
+					<circle cx="4.5" cy="1.5" r="1" fill="currentColor"/>
+					<circle cx="1.5" cy="5" r="1" fill="currentColor"/>
+					<circle cx="4.5" cy="5" r="1" fill="currentColor"/>
+					<circle cx="1.5" cy="8.5" r="1" fill="currentColor"/>
+					<circle cx="4.5" cy="8.5" r="1" fill="currentColor"/>
+				</svg>
+			</span>
+			<button
+				type="button"
+				class="cm-tree__preview-text cm-tree__preview-text--clickable"
+				onclick={(e) => {
+					e.stopPropagation();
+					oneditfield(fieldName, (e.currentTarget as HTMLElement).getBoundingClientRect(), zoneName, item.index);
+				}}
+			>
+				{item.text}
+			</button>
+			<button
+				type="button"
+				class="cm-tree__preview-remove"
+				title="Remove item"
+				onclick={() => onremovelistitem(fieldName, item.index, zoneName)}
+			>
+				<svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+					<line x1="4" y1="4" x2="12" y2="12" />
+					<line x1="12" y1="4" x2="4" y2="12" />
+				</svg>
+			</button>
+		</div>
+	{/each}
+{/snippet}
+
 <div class="cm-tree">
 	<!-- Root node -->
 	<div class="cm-tree__root">
@@ -121,6 +326,7 @@
 			{#each structure.fields as field}
 				{@const previews = contentPreview(field.nodes)}
 				{@const listItems = isListField(field.match) ? listItemPreviews(field.nodes) : []}
+				{@const greedyItems = isGreedyItemField(field) ? greedyItemPreviews(field) : []}
 				<button
 					type="button"
 					class="cm-tree__field"
@@ -128,13 +334,7 @@
 					class:cm-tree__field--empty={!field.filled}
 					class:cm-tree__field--required={!field.optional && !field.filled}
 					class:cm-tree__field--selected={selectedField === field.name}
-					onclick={(e) => {
-						if (field.filled && !isListField(field.match)) {
-							oneditfield(field.name, (e.currentTarget as HTMLElement).getBoundingClientRect());
-						} else {
-							onfieldselect(field.name);
-						}
-					}}
+					onclick={() => onfieldselect(field.name)}
 				>
 					<svg class="cm-tree__field-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={matchIcon(field.match)} />
@@ -145,7 +345,7 @@
 					{/if}
 					<span class="cm-tree__field-spacer"></span>
 					{#if field.filled}
-						{#if isListField(field.match)}
+						{#if isListField(field.match) || isGreedyItemField(field)}
 							<button
 								type="button"
 								class="cm-tree__action cm-tree__action--add"
@@ -187,28 +387,15 @@
 				</button>
 				{#if field.filled && isListField(field.match) && listItems.length > 0}
 					<div class="cm-tree__previews">
-						{#each listItems as item}
-							<div class="cm-tree__preview-item">
-								<span class="cm-tree__preview-text">{item.text}</span>
-								<button
-									type="button"
-									class="cm-tree__preview-remove"
-									title="Remove item"
-									onclick={() => onremovelistitem(field.name, item.index)}
-								>
-									<svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-										<line x1="4" y1="4" x2="12" y2="12" />
-										<line x1="12" y1="4" x2="4" y2="12" />
-									</svg>
-								</button>
-							</div>
-						{/each}
+						{@render listItemRows(listItems, field.name)}
+					</div>
+				{:else if field.filled && greedyItems.length > 0}
+					<div class="cm-tree__previews">
+						{@render greedyItemRows(greedyItems, field.name)}
 					</div>
 				{:else if field.filled && previews.length > 0}
 					<div class="cm-tree__previews">
-						{#each previews as preview}
-							<div class="cm-tree__preview-line">{preview}</div>
-						{/each}
+						{@render previewItems(previews, field.name)}
 					</div>
 				{/if}
 			{/each}
@@ -227,6 +414,7 @@
 					{#each zone.fields as field}
 						{@const previews = contentPreview(field.nodes)}
 						{@const listItems = isListField(field.match) ? listItemPreviews(field.nodes) : []}
+						{@const greedyItems = isGreedyItemField(field) ? greedyItemPreviews(field) : []}
 						<button
 							type="button"
 							class="cm-tree__field"
@@ -234,13 +422,7 @@
 							class:cm-tree__field--empty={!field.filled}
 							class:cm-tree__field--required={!field.optional && !field.filled}
 							class:cm-tree__field--selected={selectedField === `${zone.name}.${field.name}`}
-							onclick={(e) => {
-								if (field.filled && !isListField(field.match)) {
-									oneditfield(field.name, (e.currentTarget as HTMLElement).getBoundingClientRect(), zone.name);
-								} else {
-									onfieldselect(field.name, zone.name);
-								}
-							}}
+							onclick={() => onfieldselect(field.name, zone.name)}
 						>
 							<svg class="cm-tree__field-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={matchIcon(field.match)} />
@@ -251,7 +433,7 @@
 							{/if}
 							<span class="cm-tree__field-spacer"></span>
 							{#if field.filled}
-								{#if isListField(field.match)}
+								{#if isListField(field.match) || isGreedyItemField(field)}
 									<button
 										type="button"
 										class="cm-tree__action cm-tree__action--add"
@@ -293,28 +475,15 @@
 						</button>
 						{#if field.filled && isListField(field.match) && listItems.length > 0}
 							<div class="cm-tree__previews">
-								{#each listItems as item}
-									<div class="cm-tree__preview-item">
-										<span class="cm-tree__preview-text">{item.text}</span>
-										<button
-											type="button"
-											class="cm-tree__preview-remove"
-											title="Remove item"
-											onclick={() => onremovelistitem(field.name, item.index, zone.name)}
-										>
-											<svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-												<line x1="4" y1="4" x2="12" y2="12" />
-												<line x1="12" y1="4" x2="4" y2="12" />
-											</svg>
-										</button>
-									</div>
-								{/each}
+								{@render listItemRows(listItems, field.name, zone.name)}
+							</div>
+						{:else if field.filled && greedyItems.length > 0}
+							<div class="cm-tree__previews">
+								{@render greedyItemRows(greedyItems, field.name, zone.name)}
 							</div>
 						{:else if field.filled && previews.length > 0}
 							<div class="cm-tree__previews">
-								{#each previews as preview}
-									<div class="cm-tree__preview-line">{preview}</div>
-								{/each}
+								{@render previewItems(previews, field.name, zone.name)}
 							</div>
 						{/if}
 					{/each}
@@ -509,11 +678,68 @@
 		line-height: 1.4;
 	}
 
+	.cm-tree__preview-line--clickable {
+		display: block;
+		width: 100%;
+		background: none;
+		border: none;
+		padding: 0.05rem 0.25rem;
+		cursor: pointer;
+		text-align: left;
+		font: inherit;
+		font-size: var(--ed-text-xs);
+		color: var(--ed-text-muted);
+		border-radius: 2px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		line-height: 1.4;
+		transition: background var(--ed-transition-fast), color var(--ed-transition-fast);
+	}
+
+	.cm-tree__preview-line--clickable:hover {
+		background: var(--ed-surface-2);
+		color: var(--ed-text-secondary);
+	}
+
+	.cm-tree__preview-line--rune {
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+		width: 100%;
+		background: none;
+		border: none;
+		padding: 0.05rem 0.25rem;
+		cursor: pointer;
+		text-align: left;
+		font: inherit;
+		font-size: var(--ed-text-xs);
+		color: var(--ed-warning-text);
+		font-weight: 500;
+		border-radius: 2px;
+		line-height: 1.4;
+		transition: background var(--ed-transition-fast);
+	}
+
+	.cm-tree__preview-line--rune:hover {
+		background: var(--ed-warning-subtle);
+	}
+
 	.cm-tree__preview-item {
 		display: flex;
 		align-items: center;
 		gap: 0.25rem;
 		line-height: 1.4;
+		border-top: 2px solid transparent;
+		transition: border-color var(--ed-transition-fast);
+	}
+
+	.cm-tree__preview-item--drag-over {
+		border-top-color: var(--ed-accent);
+	}
+
+	.cm-tree__preview-item--dragging {
+		opacity: 0.4;
 	}
 
 	.cm-tree__preview-text {
@@ -526,6 +752,53 @@
 		min-width: 0;
 	}
 
+	.cm-tree__preview-text--clickable {
+		background: none;
+		border: none;
+		padding: 0.05rem 0.15rem;
+		cursor: pointer;
+		font: inherit;
+		font-size: var(--ed-text-xs);
+		color: var(--ed-text-muted);
+		text-align: left;
+		border-radius: 2px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: 1;
+		min-width: 0;
+		transition: color var(--ed-transition-fast), background var(--ed-transition-fast);
+	}
+
+	.cm-tree__preview-text--clickable:hover {
+		color: var(--ed-text-secondary);
+		background: var(--ed-surface-2);
+	}
+
+	/* Drag grip handle */
+	.cm-tree__preview-grip {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 12px;
+		height: 16px;
+		padding: 0;
+		color: var(--ed-text-muted);
+		cursor: grab;
+		flex-shrink: 0;
+		opacity: 0;
+		transition: opacity var(--ed-transition-fast), color var(--ed-transition-fast);
+	}
+
+	.cm-tree__preview-item:hover .cm-tree__preview-grip {
+		opacity: 0.6;
+	}
+
+	.cm-tree__preview-grip:hover {
+		opacity: 1 !important;
+		color: var(--ed-text-secondary);
+	}
+
 	.cm-tree__preview-remove {
 		display: flex;
 		align-items: center;