@refrakt-md/editor 0.6.0

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

@@ -0,0 +1,165 @@
+<script lang="ts">
+	interface Props {
+		slug: string;
+		onchange: (newSlug: string) => void;
+		ondelete: () => void;
+		ondragstart: (e: PointerEvent) => void;
+	}
+
+	let { slug, onchange, ondelete, ondragstart }: Props = $props();
+
+	let editing = $state(false);
+	let editValue = $state(slug);
+
+	function startEdit() {
+		editValue = slug;
+		editing = true;
+	}
+
+	function commitEdit() {
+		const trimmed = editValue.trim();
+		if (trimmed && trimmed !== slug) {
+			onchange(trimmed);
+		}
+		editing = false;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			commitEdit();
+		} else if (e.key === 'Escape') {
+			editing = false;
+		}
+	}
+</script>
+
+<div class="nav-item">
+	<button
+		class="nav-item__grip"
+		onpointerdown={ondragstart}
+		title="Drag to reorder"
+	>
+		<svg width="10" height="14" viewBox="0 0 10 14" fill="none">
+			<circle cx="3" cy="3" r="1.2" fill="currentColor"/>
+			<circle cx="7" cy="3" r="1.2" fill="currentColor"/>
+			<circle cx="3" cy="7" r="1.2" fill="currentColor"/>
+			<circle cx="7" cy="7" r="1.2" fill="currentColor"/>
+			<circle cx="3" cy="11" r="1.2" fill="currentColor"/>
+			<circle cx="7" cy="11" r="1.2" fill="currentColor"/>
+		</svg>
+	</button>
+
+	{#if editing}
+		<input
+			class="nav-item__input"
+			type="text"
+			bind:value={editValue}
+			onblur={commitEdit}
+			onkeydown={handleKeydown}
+			autofocus
+		/>
+	{:else}
+		<button class="nav-item__slug" ondblclick={startEdit}>
+			{slug}
+		</button>
+	{/if}
+
+	<button
+		class="nav-item__remove"
+		onclick={ondelete}
+		title="Remove item"
+	>
+		<svg width="12" height="12" viewBox="0 0 16 16" fill="none">
+			<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.nav-item {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.2rem 0.25rem;
+		border-radius: var(--ed-radius-sm);
+	}
+
+	.nav-item:hover {
+		background: var(--ed-surface-2);
+	}
+
+	.nav-item__grip {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 18px;
+		height: 22px;
+		border: none;
+		background: none;
+		color: var(--ed-border-strong);
+		cursor: grab;
+		flex-shrink: 0;
+		touch-action: none;
+	}
+
+	.nav-item__grip:hover {
+		color: var(--ed-text-muted);
+	}
+
+	.nav-item__slug {
+		flex: 1;
+		font-size: var(--ed-text-base);
+		color: var(--ed-text-primary);
+		background: none;
+		border: none;
+		text-align: left;
+		cursor: default;
+		padding: 0.1rem 0.2rem;
+		border-radius: 2px;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.nav-item__slug:hover {
+		background: var(--ed-surface-3);
+	}
+
+	.nav-item__input {
+		flex: 1;
+		font-size: var(--ed-text-base);
+		color: var(--ed-text-primary);
+		border: 1px solid var(--ed-accent);
+		border-radius: var(--ed-radius-sm);
+		padding: 0.1rem 0.25rem;
+		outline: none;
+		background: var(--ed-surface-0);
+		min-width: 0;
+	}
+
+	.nav-item__remove {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 18px;
+		height: 18px;
+		border: none;
+		background: none;
+		color: var(--ed-border-strong);
+		cursor: pointer;
+		border-radius: var(--ed-radius-sm);
+		flex-shrink: 0;
+		opacity: 0;
+	}
+
+	.nav-item:hover .nav-item__remove {
+		opacity: 1;
+	}
+
+	.nav-item__remove:hover {
+		color: var(--ed-danger);
+		background: var(--ed-danger-subtle);
+	}
+</style>

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { editorState } from '../state/editor.svelte.js';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	// Viewport presets for preview mode card width
+	const VIEWPORT_WIDTHS: Record<string, number> = {
+		desktop: 1200,
+		tablet: 768,
+		mobile: 375,
+	};
+
+	const cardMaxWidth = $derived(
+		editorState.editorMode === 'preview'
+			? VIEWPORT_WIDTHS[editorState.viewport] ?? 1200
+			: 1200
+	);
+</script>
+
+<div class="page-card" style="--page-card-width: {cardMaxWidth}px">
+	{@render children()}
+</div>
+
+<style>
+	.page-card {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		width: calc(100% - 2 * var(--ed-space-4));
+		max-width: var(--page-card-width, 960px);
+		margin: var(--ed-space-4) auto;
+		background: var(--ed-surface-0);
+		border: 1px solid var(--ed-border-default);
+		border-radius: var(--ed-radius-lg);
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+		overflow: hidden;
+		transition: max-width var(--ed-transition-slow);
+	}
+</style>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		anchorRect: { x: number; y: number; width: number; height: number };
+		onclose: () => void;
+		children: Snippet;
+	}
+
+	let { anchorRect, onclose, children }: Props = $props();
+
+	let popoverEl: HTMLDivElement;
+
+	// Position to the right of the anchor, aligned at the top
+	let left = $state(anchorRect.x + anchorRect.width + 8);
+	let top = $state(anchorRect.y);
+
+	onMount(() => {
+		if (popoverEl) {
+			const rect = popoverEl.getBoundingClientRect();
+			// Adjust if overflowing right edge
+			if (rect.right > window.innerWidth - 8) {
+				left = anchorRect.x - rect.width - 8;
+			}
+			// Adjust if overflowing bottom edge
+			if (rect.bottom > window.innerHeight - 8) {
+				top = window.innerHeight - rect.height - 8;
+			}
+			// Ensure it doesn't go above the viewport
+			if (top < 8) {
+				top = 8;
+			}
+		}
+
+		function handleClickOutside(e: MouseEvent) {
+			if (popoverEl && !popoverEl.contains(e.target as Node)) {
+				onclose();
+			}
+		}
+
+		function handleKeydown(e: KeyboardEvent) {
+			if (e.key === 'Escape') {
+				onclose();
+			}
+		}
+
+		// Delay to avoid catching the triggering click
+		requestAnimationFrame(() => {
+			document.addEventListener('click', handleClickOutside);
+		});
+		document.addEventListener('keydown', handleKeydown);
+
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+			document.removeEventListener('keydown', handleKeydown);
+		};
+	});
+</script>
+
+<div
+	class="popover"
+	bind:this={popoverEl}
+	style="left: {left}px; top: {top}px"
+>
+	{@render children()}
+</div>
+
+<style>
+	.popover {
+		position: fixed;
+		z-index: 1000;
+		background: var(--ed-surface-0);
+		border: 1px solid var(--ed-border-default);
+		border-radius: var(--ed-radius-lg);
+		box-shadow: var(--ed-shadow-xl);
+		padding: 0;
+		animation: popover-enter 150ms ease-out;
+		transform-origin: top left;
+	}
+
+	@keyframes popover-enter {
+		from { opacity: 0; transform: scale(0.96) translateY(-4px); }
+		to { opacity: 1; transform: scale(1) translateY(0); }
+	}
+</style>

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

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import { editorState } from '../state/editor.svelte.js';
+	import { fetchPreviewHtml, fetchPreviewData } from '../api/client.js';
+
+	let { onnavigate }: { onnavigate?: (path: string) => void } = $props();
+
+	let previewHtml = $state('');
+	let previewIframe: HTMLIFrameElement | undefined = $state();
+	let debounceTimer: ReturnType<typeof setTimeout>;
+	let pageMap: Map<string, string> = new Map(); // url → file path
+	let loading = $state(false);
+
+	// Listen for messages from the preview runtime iframe
+	$effect(() => {
+		function onMessage(e: MessageEvent) {
+			if (e.data?.type === 'preview-ready') {
+				editorState.previewRuntimeReady = true;
+			} else if (e.data?.type === 'preview-navigate') {
+				const href = e.data.href as string;
+				const filePath = pageMap.get(href);
+				if (filePath && onnavigate) onnavigate(filePath);
+			}
+		}
+		window.addEventListener('message', onMessage);
+		return () => window.removeEventListener('message', onMessage);
+	});
+
+	// Determine which mode to use
+	const useRuntime = $derived(
+		editorState.previewRuntimeAvailable && editorState.previewRuntimeReady,
+	);
+
+	// Forward routeRules changes to the preview iframe
+	$effect(() => {
+		const rules = editorState.routeRules;
+		if (useRuntime && previewIframe?.contentWindow) {
+			previewIframe.contentWindow.postMessage(
+				{ type: 'route-rules-update', routeRules: rules },
+				'*',
+			);
+		}
+	});
+
+	// Main preview effect — debounces content changes
+	$effect(() => {
+		const path = editorState.currentPath;
+		const content = editorState.editorContent;
+		// Read useRuntime to re-trigger when mode changes
+		const runtime = useRuntime;
+		if (!path || !content) {
+			previewHtml = '';
+			return;
+		}
+
+		loading = true;
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(async () => {
+			try {
+				if (runtime) {
+					// Svelte preview runtime — send data via postMessage
+					const data = await fetchPreviewData(path, content) as any;
+					if (data.pages) {
+						pageMap = new Map(data.pages.map((p: any) => [p.url, p.path]));
+					}
+					previewIframe?.contentWindow?.postMessage(
+						{ type: 'preview-update', page: data },
+						'*',
+					);
+				} else {
+					// HTML fallback — use srcdoc
+					previewHtml = await fetchPreviewHtml(path, content);
+				}
+			} catch {
+				// Ignore preview errors during typing
+			} finally {
+				loading = false;
+			}
+		}, 400);
+
+		return () => clearTimeout(debounceTimer);
+	});
+</script>
+
+{#if !editorState.currentPath}
+	<div class="preview__empty">
+		<svg class="preview__empty-icon" width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+			<rect x="4" y="8" width="40" height="32" rx="3" />
+			<line x1="4" y1="16" x2="44" y2="16" />
+			<circle cx="10" cy="12" r="1.5" fill="currentColor" stroke="none" />
+			<circle cx="15" cy="12" r="1.5" fill="currentColor" stroke="none" />
+			<circle cx="20" cy="12" r="1.5" fill="currentColor" stroke="none" />
+			<line x1="14" y1="26" x2="34" y2="26" />
+			<line x1="14" y1="32" x2="28" y2="32" />
+		</svg>
+		<span class="preview__empty-text">Select a page to preview</span>
+	</div>
+{:else}
+	<div class="preview__container">
+		{#if loading}
+			<div class="preview__progress"></div>
+		{/if}
+		<div class="preview__viewport">
+			{#if editorState.previewRuntimeAvailable}
+				<iframe
+					bind:this={previewIframe}
+					title="Preview"
+					src="/preview/"
+					class="preview__iframe"
+				></iframe>
+			{:else}
+				<iframe
+					title="Preview"
+					srcdoc={previewHtml}
+					class="preview__iframe"
+				></iframe>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.preview__container {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	/* Indeterminate progress bar */
+	.preview__progress {
+		height: 2px;
+		background: var(--ed-surface-2);
+		flex-shrink: 0;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.preview__progress::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 30%;
+		background: var(--ed-accent);
+		animation: progress-slide 1s ease-in-out infinite;
+	}
+
+	@keyframes progress-slide {
+		0% { left: -30%; }
+		100% { left: 100%; }
+	}
+
+	.preview__viewport {
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+	}
+
+	.preview__iframe {
+		width: 100%;
+		height: 100%;
+		border: none;
+		background: var(--ed-surface-0);
+	}
+
+	/* Empty state */
+	.preview__empty {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		background: var(--ed-surface-1);
+		gap: var(--ed-space-3);
+	}
+
+	.preview__empty-icon {
+		color: var(--ed-border-strong);
+	}
+
+	.preview__empty-text {
+		color: var(--ed-text-muted);
+		font-size: var(--ed-text-md);
+	}
+</style>

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import yaml from 'yaml';
+	import { editorState } from '../state/editor.svelte.js';
+	import type { Frontmatter } from '../state/editor.svelte.js';
+
+	let rawYaml = $state('');
+	let parseError: string | null = $state(null);
+
+	// Sync from frontmatter state to raw YAML when entering raw mode or frontmatter changes externally
+	$effect(() => {
+		if (editorState.frontmatterRawMode) {
+			const keys = Object.keys(editorState.frontmatter);
+			rawYaml = keys.length > 0
+				? yaml.stringify(editorState.frontmatter, { lineWidth: 0 }).trimEnd()
+				: '';
+		}
+	});
+
+	function handleInput(e: Event) {
+		const value = (e.target as HTMLTextAreaElement).value;
+		rawYaml = value;
+		parseError = null;
+
+		if (value.trim() === '') {
+			editorState.replaceFrontmatter({});
+			return;
+		}
+
+		try {
+			const parsed = yaml.parse(value) as Frontmatter;
+			if (parsed && typeof parsed === 'object') {
+				editorState.replaceFrontmatter(parsed);
+			} else {
+				parseError = 'YAML must be an object';
+			}
+		} catch (err) {
+			parseError = err instanceof Error ? err.message : 'Invalid YAML';
+		}
+	}
+</script>
+
+<div class="raw-yaml">
+	<textarea
+		class="raw-yaml__editor"
+		class:error={parseError !== null}
+		value={rawYaml}
+		oninput={handleInput}
+		spellcheck={false}
+	></textarea>
+	{#if parseError}
+		<div class="raw-yaml__error">{parseError}</div>
+	{/if}
+</div>
+
+<style>
+	.raw-yaml {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.raw-yaml__editor {
+		font-family: var(--ed-font-mono);
+		font-size: var(--ed-text-base);
+		line-height: 1.5;
+		padding: var(--ed-space-2);
+		border: 1px solid var(--ed-border-default);
+		border-radius: var(--ed-radius-sm);
+		background: var(--ed-surface-1);
+		color: var(--ed-text-primary);
+		resize: vertical;
+		min-height: 80px;
+		outline: none;
+	}
+
+	.raw-yaml__editor:focus {
+		border-color: var(--ed-accent);
+		box-shadow: 0 0 0 2px var(--ed-accent-ring);
+	}
+
+	.raw-yaml__editor.error {
+		border-color: var(--ed-danger);
+	}
+
+	.raw-yaml__error {
+		color: var(--ed-danger);
+		font-size: var(--ed-text-xs);
+		margin-top: var(--ed-space-1);
+	}
+</style>