phormat 0.0.5

package/dist/demo/documentLifecycle.js

@@ -0,0 +1,196 @@
+import { clearDraft, draftKeyForFileFingerprint, draftKeyUntitled, fileFingerprint, loadDraftForFileWithLegacy } from '../editor/draftPersistence.js';
+export function createDemoDocumentSession() {
+    return {
+        fingerprint: null,
+        origin: 'new',
+        persistenceKind: 'none',
+        lastMarkedSavedAt: null,
+        lastExportedAt: null,
+        pendingFileDraft: null,
+        fileConflictDismissed: false,
+        diskSourceAtConflictDecision: null
+    };
+}
+export function demoDraftStorageKey(session) {
+    return session.fingerprint
+        ? draftKeyForFileFingerprint(session.fingerprint)
+        : draftKeyUntitled();
+}
+export function shouldDeferDraftAutosave(session, currentSource) {
+    if (session.pendingFileDraft)
+        return true;
+    return (session.fileConflictDismissed &&
+        session.diskSourceAtConflictDecision !== null &&
+        currentSource === session.diskSourceAtConflictDecision);
+}
+export function fileFromInput(input) {
+    if (input instanceof File)
+        return input;
+    if (input instanceof HTMLInputElement)
+        return input.files?.item(0) ?? null;
+    const target = input instanceof Event ? input.currentTarget : null;
+    if (target instanceof HTMLInputElement)
+        return target.files?.item(0) ?? null;
+    return null;
+}
+export async function loadMarkdownFile(file) {
+    try {
+        const source = await file.text();
+        const fingerprint = fileFingerprint(file);
+        const draft = loadDraftForFileWithLegacy(fingerprint, file.name);
+        const pendingDraft = draft && draft.source !== source ? draft : null;
+        return {
+            ok: true,
+            source,
+            fileName: file.name,
+            fingerprint,
+            pendingDraft
+        };
+    }
+    catch (error) {
+        return {
+            ok: false,
+            error: error instanceof Error ? error.message : 'Unable to load markdown file.'
+        };
+    }
+}
+export async function loadMarkdownFileFromInput(input) {
+    const file = fileFromInput(input);
+    if (!file)
+        return { ok: false, error: 'Choose a markdown file to load.' };
+    return loadMarkdownFile(file);
+}
+export function applyLoadedFileToEditor(editor, result, session) {
+    editor.setSource(result.source, {
+        fileName: result.fileName,
+        resetHistory: true,
+        syncBaseline: true
+    });
+    session.fingerprint = result.fingerprint;
+    session.origin = 'loaded_from_file';
+    session.pendingFileDraft = result.pendingDraft;
+    session.fileConflictDismissed = false;
+    session.diskSourceAtConflictDecision = null;
+}
+export function restoreLocalDraft(editor, session, source) {
+    editor.setSource(source, {
+        fileName: null,
+        resetHistory: true,
+        syncBaseline: false
+    });
+    session.fingerprint = null;
+    session.origin = 'draft_restored';
+    session.pendingFileDraft = null;
+    session.fileConflictDismissed = false;
+    session.diskSourceAtConflictDecision = null;
+}
+export function discardLocalDraftSnapshot(session) {
+    clearDraft(demoDraftStorageKey(session));
+}
+export function restorePendingFileDraft(editor, session) {
+    const draft = session.pendingFileDraft;
+    if (!draft?.source)
+        return;
+    session.pendingFileDraft = null;
+    session.fileConflictDismissed = false;
+    session.diskSourceAtConflictDecision = null;
+    editor.setSource(draft.source, {
+        resetHistory: true,
+        syncBaseline: false
+    });
+    session.origin = 'draft_restored';
+}
+export function discardPendingFileDraft(session) {
+    if (!session.pendingFileDraft)
+        return;
+    clearDraft(demoDraftStorageKey(session));
+    session.pendingFileDraft = null;
+    session.fileConflictDismissed = false;
+    session.diskSourceAtConflictDecision = null;
+}
+export function dismissPendingFileDraftConflict(editor, session) {
+    if (!session.pendingFileDraft)
+        return;
+    session.pendingFileDraft = null;
+    session.fileConflictDismissed = true;
+    session.diskSourceAtConflictDecision = editor.source;
+}
+export function downloadMarkdownFile(editor, session, fileName) {
+    const blob = new Blob([editor.source], { type: 'text/markdown;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    const fn = fileName ?? editor.fileName;
+    a.download =
+        fn && /\.(md|markdown)$/i.test(fn)
+            ? fn
+            : `${(fn && fn.replace(/\.[^/.]+$/, '')) || 'document'}.md`;
+    a.href = url;
+    a.click();
+    URL.revokeObjectURL(url);
+    editor.markSaved();
+    session.persistenceKind = 'exported';
+    session.lastExportedAt = Date.now();
+    clearDraft(demoDraftStorageKey(session));
+}
+export function markDocumentSaved(editor, session) {
+    editor.markSaved();
+    session.persistenceKind = 'marked_saved';
+    session.lastMarkedSavedAt = Date.now();
+}
+/** Controlled demo: mark session saved without a {@link MarkdownEditor} instance. */
+export function markDemoSessionSaved(session) {
+    session.persistenceKind = 'marked_saved';
+    session.lastMarkedSavedAt = Date.now();
+}
+/** Controlled demo: restore local draft — returns source to assign to `value`. */
+export function restoreLocalDraftControlled(session, source) {
+    session.fingerprint = null;
+    session.origin = 'draft_restored';
+    session.pendingFileDraft = null;
+    session.fileConflictDismissed = false;
+    session.diskSourceAtConflictDecision = null;
+    return source;
+}
+/** Controlled demo: apply pending file draft — returns draft source or null. */
+export function restorePendingFileDraftControlled(session) {
+    const draft = session.pendingFileDraft;
+    if (!draft?.source)
+        return null;
+    session.pendingFileDraft = null;
+    session.fileConflictDismissed = false;
+    session.diskSourceAtConflictDecision = null;
+    session.origin = 'draft_restored';
+    return draft.source;
+}
+export function dismissPendingFileDraftConflictControlled(session, currentSource) {
+    if (!session.pendingFileDraft)
+        return;
+    session.pendingFileDraft = null;
+    session.fileConflictDismissed = true;
+    session.diskSourceAtConflictDecision = currentSource;
+}
+/** Controlled demo: download source string as .md file. */
+export function downloadMarkdownSource(source, session, fileName) {
+    const blob = new Blob([source], { type: 'text/markdown;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    const fn = fileName;
+    a.download =
+        fn && /\.(md|markdown)$/i.test(fn)
+            ? fn
+            : `${(fn && fn.replace(/\.[^/.]+$/, '')) || 'document'}.md`;
+    a.href = url;
+    a.click();
+    URL.revokeObjectURL(url);
+    session.persistenceKind = 'exported';
+    session.lastExportedAt = Date.now();
+    clearDraft(demoDraftStorageKey(session));
+}
+export function applyLoadedFileControlled(result, session) {
+    session.fingerprint = result.fingerprint;
+    session.origin = 'loaded_from_file';
+    session.pendingFileDraft = result.pendingDraft;
+    session.fileConflictDismissed = false;
+    session.diskSourceAtConflictDecision = null;
+    return { source: result.source, fileName: result.fileName };
+}

package/dist/demo/index.d.ts

@@ -0,0 +1,2 @@
+export { applyLoadedFileControlled, applyLoadedFileToEditor, createDemoDocumentSession, demoDraftStorageKey, discardLocalDraftSnapshot, discardPendingFileDraft, dismissPendingFileDraftConflict, dismissPendingFileDraftConflictControlled, downloadMarkdownFile, downloadMarkdownSource, fileFromInput, loadMarkdownFile, loadMarkdownFileFromInput, markDemoSessionSaved, markDocumentSaved, restoreLocalDraft, restoreLocalDraftControlled, restorePendingFileDraft, restorePendingFileDraftControlled, shouldDeferDraftAutosave, type DemoDocumentSession, type DemoPersistenceKind, type DemoSessionOrigin, type LoadMarkdownFileResult, type LoadMDFileInput } from './documentLifecycle.js';
+export { clearDraft, draftKeyForFileFingerprint, draftKeyUntitled, draftStorageKey, fileFingerprint, legacyDraftKeyForFileName, loadDraft, loadDraftForFileWithLegacy, saveDraft, type SaveDraftMeta, type StoredDraft } from '../editor/draftPersistence.js';

package/dist/demo/index.js

@@ -0,0 +1,2 @@
+export { applyLoadedFileControlled, applyLoadedFileToEditor, createDemoDocumentSession, demoDraftStorageKey, discardLocalDraftSnapshot, discardPendingFileDraft, dismissPendingFileDraftConflict, dismissPendingFileDraftConflictControlled, downloadMarkdownFile, downloadMarkdownSource, fileFromInput, loadMarkdownFile, loadMarkdownFileFromInput, markDemoSessionSaved, markDocumentSaved, restoreLocalDraft, restoreLocalDraftControlled, restorePendingFileDraft, restorePendingFileDraftControlled, shouldDeferDraftAutosave } from './documentLifecycle.js';
+export { clearDraft, draftKeyForFileFingerprint, draftKeyUntitled, draftStorageKey, fileFingerprint, legacyDraftKeyForFileName, loadDraft, loadDraftForFileWithLegacy, saveDraft } from '../editor/draftPersistence.js';

package/dist/editor/BlockEditor.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { dndTree, DndTreeGhost, DndTreeIndicator } from 'phoundry-ui';
+	import type { Attachment } from 'svelte/attachments';
+	import BlockSpecMissing from './block-specs/BlockSpecMissing.svelte';
+	import BlockRow from './BlockRow.svelte';
+	import type { MarkdownEditor } from './MarkdownEditor.svelte';
+	import { getBlockSpec } from './block-specs/registry';
+	import { canBlockTreeDrop } from './model/blockTreeDrop';
+	import { listRegionBounds } from './model/blockTree';
+	import type { EditorBlock } from './model/types';
+
+	let { editor }: { editor: MarkdownEditor } = $props();
+
+	const blocks = $derived(editor.document.blocks);
+
+	/** px-1 (4) + grip (24) + mr-1 (4) + gap-1 (4) — content column start past block grip. */
+	const BLOCK_GRIP_CONTENT_INSET = 44;
+
+	type ListRegionSegment = {
+		kind: 'listRegion';
+		regionStart: number;
+		items: { blockIndex: number; block: EditorBlock }[];
+	};
+
+	type BlockSegment = {
+		kind: 'block';
+		blockIndex: number;
+		block: EditorBlock;
+	};
+
+	type EditorSegment = ListRegionSegment | BlockSegment;
+
+	const segments = $derived.by((): EditorSegment[] => {
+		const out: EditorSegment[] = [];
+		let i = 0;
+		while (i < blocks.length) {
+			const block = blocks[i]!;
+			if (block.type === 'listItem') {
+				const { start, end } = listRegionBounds(blocks, i);
+				const items: { blockIndex: number; block: EditorBlock }[] = [];
+				for (let j = start; j < end; j++) {
+					items.push({ blockIndex: j, block: blocks[j]! });
+				}
+				out.push({ kind: 'listRegion', regionStart: start, items });
+				i = end;
+			} else {
+				out.push({ kind: 'block', blockIndex: i, block });
+				i++;
+			}
+		}
+		return out;
+	});
+
+	const documentTreeAttach: Attachment = (element) => {
+		const inner = dndTree({
+			id: 'md-editor-document-tree',
+			contentInsetLeft: BLOCK_GRIP_CONTENT_INSET,
+			nestIndent: 16,
+			canDrop(result) {
+				if (editor.readonly) return false;
+				return canBlockTreeDrop(
+					editor.document.blocks,
+					result.draggedId,
+					result.targetId,
+					result.placement
+				);
+			},
+			onDrop(result) {
+				editor.blockTreeDropAt(result.draggedId, result.targetId, result.placement);
+			}
+		});
+		return inner(element);
+	};
+</script>
+
+<div class="flex flex-col gap-2" {@attach documentTreeAttach}>
+	{#each segments as segment (segment.kind === 'listRegion' ? `list-${segment.regionStart}` : segment.block.id)}
+		{#if segment.kind === 'listRegion'}
+			<div>
+				{#each segment.items as { block, blockIndex } (block.id)}
+					{@const spec = getBlockSpec('listItem')}
+					{#if spec}
+						<spec.editComponent {editor} {blockIndex} {block} />
+					{:else}
+						<BlockSpecMissing blockType="listItem" />
+					{/if}
+				{/each}
+			</div>
+		{:else}
+			{@const block = segment.block}
+			{@const blockIndex = segment.blockIndex}
+			<BlockRow
+				{editor}
+				{blockIndex}
+				blockId={block.id}
+				blockType={block.type}
+				blockSynthetic={block.sourceRange.synthetic === true}
+				canMoveUp={blockIndex > 0}
+				canMoveDown={blockIndex < blocks.length - 1}
+			>
+				{@const spec = getBlockSpec(block.type)}
+				{#if spec}
+					<spec.editComponent {editor} {blockIndex} {block} />
+				{:else}
+					<BlockSpecMissing blockType={block.type} />
+				{/if}
+			</BlockRow>
+		{/if}
+	{/each}
+</div>
+<DndTreeGhost />
+<DndTreeIndicator />

package/dist/editor/BlockEditor.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MarkdownEditor } from './MarkdownEditor.svelte';
+type $$ComponentProps = {
+    editor: MarkdownEditor;
+};
+declare const BlockEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type BlockEditor = ReturnType<typeof BlockEditor>;
+export default BlockEditor;

package/dist/editor/BlockRow.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import NestedRowChrome from './NestedRowChrome.svelte';
+	import type { MarkdownEditor } from './MarkdownEditor.svelte';
+	import { blockCanMoveSibling, blockTreeDepth } from './model/blockTree';
+	import type { EditorBlockType } from './model/types';
+
+	let {
+		editor,
+		blockIndex,
+		blockId,
+		blockType,
+		blockSynthetic,
+		canMoveUp,
+		canMoveDown,
+		moveUpCommandId,
+		moveDownCommandId,
+		nestedRowBlockId,
+		nestedRowBlockType,
+		children
+	}: {
+		editor: MarkdownEditor;
+		blockIndex: number;
+		blockId: string;
+		blockType: EditorBlockType;
+		blockSynthetic: boolean;
+		canMoveUp?: boolean;
+		canMoveDown?: boolean;
+		moveUpCommandId?: string;
+		moveDownCommandId?: string;
+		nestedRowBlockId?: string;
+		nestedRowBlockType?: EditorBlockType;
+		children: Snippet;
+	} = $props();
+
+	const treeDepth = $derived(blockTreeDepth(editor.document.blocks, blockId));
+
+	const resolvedCanMoveUp = $derived(
+		canMoveUp ?? blockCanMoveSibling(editor.document.blocks, blockId, 'up')
+	);
+	const resolvedCanMoveDown = $derived(
+		canMoveDown ?? blockCanMoveSibling(editor.document.blocks, blockId, 'down')
+	);
+
+	const commandCtx = $derived({
+		editor,
+		blockIndex,
+		blockId,
+		blockType,
+		blockSynthetic,
+		canMoveUp: resolvedCanMoveUp,
+		canMoveDown: resolvedCanMoveDown,
+		nestedRowBlockId,
+		nestedRowBlockType
+	});
+</script>
+
+<div>
+	<NestedRowChrome
+		{commandCtx}
+		rowId={blockId}
+		{treeDepth}
+		gripDisabled={blockSynthetic}
+		toolbarAriaLabel="Block controls"
+		gripAriaLabel="Block actions"
+		menuAriaLabel="Block actions"
+		moveUpCommandId={moveUpCommandId ??
+			(nestedRowBlockId !== undefined ? 'moveListItemUp' : 'moveBlockUp')}
+		moveDownCommandId={moveDownCommandId ??
+			(nestedRowBlockId !== undefined ? 'moveListItemDown' : 'moveBlockDown')}
+		canMoveUp={resolvedCanMoveUp}
+		canMoveDown={resolvedCanMoveDown}
+	>
+		{@render children()}
+	</NestedRowChrome>
+</div>

package/dist/editor/BlockRow.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { MarkdownEditor } from './MarkdownEditor.svelte';
+import type { EditorBlockType } from './model/types';
+type $$ComponentProps = {
+    editor: MarkdownEditor;
+    blockIndex: number;
+    blockId: string;
+    blockType: EditorBlockType;
+    blockSynthetic: boolean;
+    canMoveUp?: boolean;
+    canMoveDown?: boolean;
+    moveUpCommandId?: string;
+    moveDownCommandId?: string;
+    nestedRowBlockId?: string;
+    nestedRowBlockType?: EditorBlockType;
+    children: Snippet;
+};
+declare const BlockRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type BlockRow = ReturnType<typeof BlockRow>;
+export default BlockRow;

package/dist/editor/Editor.svelte

@@ -0,0 +1,103 @@
+<!--
+	@deprecated Use {@link PhormatEditor} for embeddable controlled editing.
+	State-object shell for advanced use: pass an existing {@link MarkdownEditor} instance.
+-->
+<script lang="ts">
+	import { Button, CheckboxToggle, EmptyState } from 'phoundry-ui';
+	import BlockEditor from './BlockEditor.svelte';
+	import RawMarkdownPanel from './RawMarkdownPanel.svelte';
+	import InlineChromeCoordinator from './inlineChrome/InlineChromeCoordinator.svelte';
+	import type { MarkdownEditor } from './MarkdownEditor.svelte';
+
+	let { editor }: { editor: MarkdownEditor } = $props();
+
+	let editorRoot = $state.raw<HTMLElement | null>(null);
+	let showRawMarkdown = $state(false);
+</script>
+
+<section class="text-txt-primary">
+	<div
+		class="mb-4 flex shrink-0 flex-wrap items-center justify-between gap-4 border-b border-border-muted pb-4"
+	>
+		<div>
+			<p class="text-sm text-txt-secondary">
+				{editor.fileName ?? 'No file name.'}
+			</p>
+		</div>
+
+		<div class="flex flex-wrap items-center gap-2">
+			<CheckboxToggle
+				checked={showRawMarkdown}
+				onchange={() => (showRawMarkdown = !showRawMarkdown)}
+				label="Raw markdown"
+				size="sm"
+				data-testid="toggle-raw-markdown"
+			/>
+			<Button
+				variant="secondary"
+				size="sm"
+				icon="carbon:undo"
+				disabled={!editor.canUndo}
+				aria-label="Undo last edit"
+				onclick={() => editor.undo()}
+			>
+				Undo
+			</Button>
+			<Button
+				variant="secondary"
+				size="sm"
+				icon="carbon:redo"
+				disabled={!editor.canRedo}
+				aria-label="Redo previously undone edit"
+				onclick={() => editor.redo()}
+			>
+				Redo
+			</Button>
+		</div>
+	</div>
+
+	{#if editor.document.parseWarnings?.length}
+		<div
+			class="mb-4 rounded-lg border border-semantic-warning/50 bg-semantic-warning/10 px-3 py-2"
+			role="status"
+		>
+			<p class="text-sm font-medium text-txt-primary">Parse notes</p>
+			<ul class="mt-1 list-inside list-disc text-sm text-txt-secondary">
+				{#each editor.document.parseWarnings as w (w)}
+					<li>{w}</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+
+	{#if editor.error}
+		<p
+			class="mb-4 rounded-lg border border-semantic-error/50 bg-semantic-error/10 px-3 py-2 text-sm text-semantic-error"
+			role="alert"
+		>
+			{editor.error}
+		</p>
+	{/if}
+
+	{#if editor.blocks.length}
+		<div class={showRawMarkdown ? 'grid grid-cols-2 gap-4' : undefined}>
+			<article bind:this={editorRoot} class="relative">
+				<BlockEditor {editor} />
+				{#if editorRoot}
+					<InlineChromeCoordinator {editor} root={editorRoot} />
+				{/if}
+			</article>
+			{#if showRawMarkdown}
+				<RawMarkdownPanel source={editor.source} />
+			{/if}
+		</div>
+	{:else}
+		<EmptyState
+			icon="carbon:document-blank"
+			title="No markdown loaded yet."
+			description="Set source on the editor instance to start editing."
+			size="sm"
+			class="rounded-lg border border-dashed border-border-default/60"
+		/>
+	{/if}
+</section>

package/dist/editor/Editor.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MarkdownEditor } from './MarkdownEditor.svelte';
+type $$ComponentProps = {
+    editor: MarkdownEditor;
+};
+declare const Editor: import("svelte").Component<$$ComponentProps, {}, "">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;