@x33025/sveltely 0.1.10 → 0.1.12

package/dist/components/Library/ArticleEditor/ArticleEditor.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	import VStack from '../VStack';
+	import TextEditor from '../TextEditor';
+	import ArticleBlockFAQ from './ArticleBlockFAQ.svelte';
+	import ArticleEditorBody from './ArticleEditorBody.svelte';
+	import ArticleEditorHeader from './ArticleEditorHeader.svelte';
+	import type { BlockInsertKind, BlockTextFormat } from './articleEditor.svelte.js';
+	import type { ArticleEditorArticle, BlockDraft } from './types.js';
+
+	let {
+		article,
+		draftTitle,
+		draftImageAltText,
+		blocks,
+		selectedBlockID,
+		onTitleChange,
+		onImageAltTextChange,
+		onSelectBlock,
+		onUpdateBlock,
+		onChangeBlockTextFormat,
+		onInsertBlockAfter,
+		onUpdateListItem,
+		onInsertListItemAfter,
+		onMergeListItemWithPrevious,
+		onRemoveListItem,
+		onCreateParagraphAfter,
+		onMergeBlockWithPrevious,
+		onRemoveBlock,
+		onConvertToList,
+		onUpdateFAQItem,
+		onUpdateTableCell,
+		onUpdateTableHeader,
+		onAddTableColumn,
+		onAddTableRow,
+		onRemoveTableColumn,
+		onRemoveTableRow,
+		onReorderBlock,
+		focusTarget,
+		focusPosition,
+		onFocusHandled,
+		onUndo,
+		onRedo
+	} = $props<{
+		article: ArticleEditorArticle;
+		draftTitle: string;
+		draftImageAltText: string;
+		blocks: BlockDraft[];
+		selectedBlockID: string | null;
+		onTitleChange: (value: string) => void;
+		onImageAltTextChange: (value: string) => void;
+		onSelectBlock: (id: string) => void;
+		onUpdateBlock: (id: string, patch: Partial<BlockDraft>) => void;
+		onChangeBlockTextFormat: (id: string, format: BlockTextFormat) => void;
+		onInsertBlockAfter: (id: string, kind: BlockInsertKind) => void;
+		onUpdateListItem: (blockID: string, index: number, value: string) => void;
+		onInsertListItemAfter: (
+			blockID: string,
+			index: number,
+			text?: string,
+			currentText?: string | null
+		) => void;
+		onMergeListItemWithPrevious: (blockID: string, index: number) => void;
+		onRemoveListItem: (blockID: string, index: number) => void;
+		onCreateParagraphAfter: (id: string, text?: string, currentText?: string | null) => void;
+		onMergeBlockWithPrevious: (id: string) => void;
+		onRemoveBlock: (id: string) => void;
+		onConvertToList: (id: string, kind: 'bullet_list' | 'numbered_list') => void;
+		onUpdateFAQItem: (
+			blockID: string,
+			index: number,
+			field: 'question' | 'answer',
+			value: string
+		) => void;
+		onUpdateTableCell: (
+			blockID: string,
+			rowIndex: number,
+			cellIndex: number,
+			value: string
+		) => void;
+		onUpdateTableHeader: (blockID: string, cellIndex: number, value: string) => void;
+		onAddTableColumn: (blockID: string) => void;
+		onAddTableRow: (blockID: string) => void;
+		onRemoveTableColumn: (blockID: string, columnIndex: number) => void;
+		onRemoveTableRow: (blockID: string, rowIndex: number) => void;
+		onReorderBlock: (draggedID: string, targetID: string, placement: 'before' | 'after') => void;
+		focusTarget: string | null;
+		focusPosition: number | null;
+		onFocusHandled: () => void;
+		onUndo: () => void;
+		onRedo: () => void;
+	}>();
+
+	const faqBlocks = $derived(blocks.filter((block: BlockDraft) => block.type === 'faq'));
+
+	const handleGlobalKeyDown = (event: KeyboardEvent) => {
+		const isUndoKey = event.key.toLowerCase() === 'z';
+		const isRedoKey = event.key.toLowerCase() === 'y';
+		const hasShortcutModifier = event.metaKey || event.ctrlKey;
+
+		if (!hasShortcutModifier || event.altKey) return;
+
+		if (isUndoKey && !event.shiftKey) {
+			event.preventDefault();
+			onUndo();
+			return;
+		}
+
+		if ((isUndoKey && event.shiftKey) || isRedoKey) {
+			event.preventDefault();
+			onRedo();
+		}
+	};
+</script>
+
+<svelte:window onkeydown={handleGlobalKeyDown} />
+
+<VStack
+	width="100%"
+	maxWidth="860px"
+	gap="2.5rem"
+	paddingX="3.5rem"
+	paddingY="2.5rem"
+	background="var(--sveltely-background-color)"
+>
+	<ArticleEditorHeader
+		{article}
+		{draftTitle}
+		{draftImageAltText}
+		{onTitleChange}
+		{onImageAltTextChange}
+	/>
+
+	<ArticleEditorBody
+		{draftTitle}
+		{blocks}
+		{onSelectBlock}
+		{onUpdateBlock}
+		{onChangeBlockTextFormat}
+		{onInsertBlockAfter}
+		{onUpdateListItem}
+		{onInsertListItemAfter}
+		{onMergeListItemWithPrevious}
+		{onRemoveListItem}
+		{onCreateParagraphAfter}
+		{onMergeBlockWithPrevious}
+		{onRemoveBlock}
+		{onConvertToList}
+		{onUpdateTableCell}
+		{onUpdateTableHeader}
+		{onAddTableColumn}
+		{onAddTableRow}
+		{onRemoveTableColumn}
+		{onRemoveTableRow}
+		{onReorderBlock}
+		{focusTarget}
+		{focusPosition}
+		{onFocusHandled}
+	/>
+
+	{#if faqBlocks.length > 0}
+		<section class="article-editor-faq-section">
+			<VStack gap="1.25rem">
+				{#each faqBlocks as block (block.id)}
+					<TextEditor
+						autosize
+						value={block.text ?? 'Frequently asked questions'}
+						rows={1}
+						onInput={(event) =>
+							onUpdateBlock(block.id, {
+								text: (event.currentTarget as HTMLTextAreaElement).value
+							})}
+						className="text-2xl leading-tight font-semibold tracking-[-0.025em] text-zinc-950 placeholder:text-zinc-300"
+						placeholder="FAQ title"
+					/>
+					<ArticleBlockFAQ {block} onUpdateItem={onUpdateFAQItem} />
+				{/each}
+			</VStack>
+		</section>
+	{/if}
+</VStack>
+
+<style>
+	.article-editor-faq-section {
+		display: flex;
+		min-width: 0;
+		min-height: 0;
+		flex-direction: column;
+		gap: 1.25rem;
+		border-top: 1px solid color-mix(in oklab, var(--sveltely-border-color) 70%, transparent);
+		padding-block: 2.5rem;
+	}
+</style>

package/dist/components/Library/ArticleEditor/ArticleEditor.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { BlockInsertKind, BlockTextFormat } from './articleEditor.svelte.js';
+import type { ArticleEditorArticle, BlockDraft } from './types.js';
+type $$ComponentProps = {
+    article: ArticleEditorArticle;
+    draftTitle: string;
+    draftImageAltText: string;
+    blocks: BlockDraft[];
+    selectedBlockID: string | null;
+    onTitleChange: (value: string) => void;
+    onImageAltTextChange: (value: string) => void;
+    onSelectBlock: (id: string) => void;
+    onUpdateBlock: (id: string, patch: Partial<BlockDraft>) => void;
+    onChangeBlockTextFormat: (id: string, format: BlockTextFormat) => void;
+    onInsertBlockAfter: (id: string, kind: BlockInsertKind) => void;
+    onUpdateListItem: (blockID: string, index: number, value: string) => void;
+    onInsertListItemAfter: (blockID: string, index: number, text?: string, currentText?: string | null) => void;
+    onMergeListItemWithPrevious: (blockID: string, index: number) => void;
+    onRemoveListItem: (blockID: string, index: number) => void;
+    onCreateParagraphAfter: (id: string, text?: string, currentText?: string | null) => void;
+    onMergeBlockWithPrevious: (id: string) => void;
+    onRemoveBlock: (id: string) => void;
+    onConvertToList: (id: string, kind: 'bullet_list' | 'numbered_list') => void;
+    onUpdateFAQItem: (blockID: string, index: number, field: 'question' | 'answer', value: string) => void;
+    onUpdateTableCell: (blockID: string, rowIndex: number, cellIndex: number, value: string) => void;
+    onUpdateTableHeader: (blockID: string, cellIndex: number, value: string) => void;
+    onAddTableColumn: (blockID: string) => void;
+    onAddTableRow: (blockID: string) => void;
+    onRemoveTableColumn: (blockID: string, columnIndex: number) => void;
+    onRemoveTableRow: (blockID: string, rowIndex: number) => void;
+    onReorderBlock: (draggedID: string, targetID: string, placement: 'before' | 'after') => void;
+    focusTarget: string | null;
+    focusPosition: number | null;
+    onFocusHandled: () => void;
+    onUndo: () => void;
+    onRedo: () => void;
+};
+declare const ArticleEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleEditor = ReturnType<typeof ArticleEditor>;
+export default ArticleEditor;

package/dist/components/Library/ArticleEditor/ArticleEditorBody.svelte

@@ -0,0 +1,328 @@
+<script lang="ts">
+	import VStack from '../VStack';
+	import type { BlockInsertKind, BlockTextFormat } from './articleEditor.svelte.js';
+	import type { BlockDraft } from './types.js';
+	import ArticleBlockCode from './ArticleBlockCode.svelte';
+	import ArticleBlockFallback from './ArticleBlockFallback.svelte';
+	import ArticleBlockHeading from './ArticleBlockHeading.svelte';
+	import ArticleBlockImage from './ArticleBlockImage.svelte';
+	import ArticleBlockList from './ArticleBlockList.svelte';
+	import ArticleBlockParagraph from './ArticleBlockParagraph.svelte';
+	import ArticleBlockShell from './ArticleBlockShell.svelte';
+	import ArticleBlockTable from './ArticleBlockTable.svelte';
+
+	let {
+		draftTitle,
+		blocks,
+		onSelectBlock,
+		onUpdateBlock,
+		onChangeBlockTextFormat,
+		onInsertBlockAfter,
+		onUpdateListItem,
+		onInsertListItemAfter,
+		onMergeListItemWithPrevious,
+		onRemoveListItem,
+		onCreateParagraphAfter,
+		onMergeBlockWithPrevious,
+		onRemoveBlock,
+		onConvertToList,
+		onUpdateTableCell,
+		onUpdateTableHeader,
+		onAddTableColumn,
+		onAddTableRow,
+		onRemoveTableColumn,
+		onRemoveTableRow,
+		onReorderBlock,
+		focusTarget,
+		focusPosition,
+		onFocusHandled
+	} = $props<{
+		draftTitle: string;
+		blocks: BlockDraft[];
+		onSelectBlock: (id: string) => void;
+		onUpdateBlock: (id: string, patch: Partial<BlockDraft>) => void;
+		onChangeBlockTextFormat: (id: string, format: BlockTextFormat) => void;
+		onInsertBlockAfter: (id: string, kind: BlockInsertKind) => void;
+		onUpdateListItem: (blockID: string, index: number, value: string) => void;
+		onInsertListItemAfter: (
+			blockID: string,
+			index: number,
+			text?: string,
+			currentText?: string | null
+		) => void;
+		onMergeListItemWithPrevious: (blockID: string, index: number) => void;
+		onRemoveListItem: (blockID: string, index: number) => void;
+		onCreateParagraphAfter: (id: string, text?: string, currentText?: string | null) => void;
+		onMergeBlockWithPrevious: (id: string) => void;
+		onRemoveBlock: (id: string) => void;
+		onConvertToList: (id: string, kind: 'bullet_list' | 'numbered_list') => void;
+		onUpdateTableCell: (
+			blockID: string,
+			rowIndex: number,
+			cellIndex: number,
+			value: string
+		) => void;
+		onUpdateTableHeader: (blockID: string, cellIndex: number, value: string) => void;
+		onAddTableColumn: (blockID: string) => void;
+		onAddTableRow: (blockID: string) => void;
+		onRemoveTableColumn: (blockID: string, columnIndex: number) => void;
+		onRemoveTableRow: (blockID: string, rowIndex: number) => void;
+		onReorderBlock: (draggedID: string, targetID: string, placement: 'before' | 'after') => void;
+		focusTarget: string | null;
+		focusPosition: number | null;
+		onFocusHandled: () => void;
+	}>();
+
+	let draggedBlockID = $state<string | null>(null);
+	let dropTarget = $state<{ id: string; placement: 'before' | 'after' } | null>(null);
+	let autoScrollFrame: number | null = null;
+	let autoScrollVelocity = 0;
+	let autoScrollTarget: HTMLElement | Window | null = null;
+
+	const articleBlocks = $derived(blocks.filter((block: BlockDraft) => block.type !== 'faq'));
+
+	const blockTextFormat = (block: BlockDraft): BlockTextFormat | null => {
+		if (block.type === 'heading') {
+			const level = Math.min(3, Math.max(1, Number(block.level ?? 2)));
+			if (level === 1) return null;
+			return `heading-${level}` as BlockTextFormat;
+		}
+		if (block.type === 'paragraph' || block.type === 'code') return 'paragraph';
+		if (block.type === 'numbered_list') return 'numbered_list';
+		if (block.type === 'bullet_list' || block.type === 'list') return 'bullet_list';
+		return null;
+	};
+
+	const canChangeBlockTextFormat = (block: BlockDraft) => blockTextFormat(block) !== null;
+
+	const updateDropTarget = (event: DragEvent, id: string) => {
+		if (!draggedBlockID || draggedBlockID === id) {
+			dropTarget = null;
+			return;
+		}
+
+		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		dropTarget = {
+			id,
+			placement: event.clientY < rect.top + rect.height / 2 ? 'before' : 'after'
+		};
+	};
+
+	const stopAutoScroll = () => {
+		autoScrollVelocity = 0;
+		if (autoScrollFrame === null) return;
+		cancelAnimationFrame(autoScrollFrame);
+		autoScrollFrame = null;
+	};
+
+	const runAutoScroll = () => {
+		if (!autoScrollVelocity) {
+			autoScrollFrame = null;
+			return;
+		}
+
+		const target = autoScrollTarget ?? window;
+		if (target instanceof Window) {
+			target.scrollBy(0, autoScrollVelocity);
+		} else {
+			target.scrollTop += autoScrollVelocity;
+		}
+		autoScrollFrame = requestAnimationFrame(runAutoScroll);
+	};
+
+	const scrollTargetFor = (event: DragEvent): HTMLElement | Window =>
+		((event.target as HTMLElement | null)?.closest?.(
+			'.scroll-view, .navigation-stack-content'
+		) as HTMLElement | null) ?? window;
+
+	const updateAutoScroll = (event: DragEvent) => {
+		if (!draggedBlockID) {
+			stopAutoScroll();
+			return;
+		}
+
+		autoScrollTarget = scrollTargetFor(event);
+		const scrollRect =
+			autoScrollTarget instanceof Window
+				? { top: 0, bottom: window.innerHeight, height: window.innerHeight }
+				: autoScrollTarget.getBoundingClientRect();
+		const edgeSize = Math.min(160, scrollRect.height / 3);
+		const maxSpeed = 22;
+		const topDistance = event.clientY - scrollRect.top;
+		const bottomDistance = scrollRect.bottom - event.clientY;
+
+		if (topDistance < edgeSize) {
+			autoScrollVelocity = -Math.ceil(((edgeSize - topDistance) / edgeSize) * maxSpeed);
+		} else if (bottomDistance < edgeSize) {
+			autoScrollVelocity = Math.ceil(((edgeSize - bottomDistance) / edgeSize) * maxSpeed);
+		} else {
+			stopAutoScroll();
+			return;
+		}
+
+		if (autoScrollFrame === null) {
+			autoScrollFrame = requestAnimationFrame(runAutoScroll);
+		}
+	};
+
+	const dropPlacementFor = (id: string) => {
+		const currentDropTarget = dropTarget;
+		return currentDropTarget?.id === id ? currentDropTarget.placement : null;
+	};
+
+	const handleBlockDragOver = (event: DragEvent, id: string) => {
+		if (!draggedBlockID) return;
+		event.preventDefault();
+		event.dataTransfer!.dropEffect = 'move';
+		updateAutoScroll(event);
+		updateDropTarget(event, id);
+	};
+
+	const handleBlockDragLeave = (event: DragEvent) => {
+		if (!(event.currentTarget as HTMLElement).contains(event.relatedTarget as Node | null)) {
+			dropTarget = null;
+		}
+	};
+
+	const handleBlockDrop = (event: DragEvent, id: string) => {
+		event.preventDefault();
+		const draggedID = event.dataTransfer?.getData('text/plain') || draggedBlockID;
+		const currentDropTarget = dropTarget;
+		if (draggedID && currentDropTarget && currentDropTarget.id === id) {
+			onReorderBlock(draggedID, id, currentDropTarget.placement);
+		}
+		draggedBlockID = null;
+		dropTarget = null;
+		stopAutoScroll();
+	};
+
+	const handleBlockDragStart = (event: DragEvent, id: string) => {
+		draggedBlockID = id;
+		dropTarget = null;
+		event.dataTransfer!.effectAllowed = 'move';
+		event.dataTransfer!.setData('text/plain', id);
+		const row = (event.currentTarget as HTMLElement).closest<HTMLElement>('[data-block-row]');
+		if (row) {
+			const rect = row.getBoundingClientRect();
+			event.dataTransfer!.setDragImage(row, event.clientX - rect.left, event.clientY - rect.top);
+		}
+	};
+
+	const handleBlockDragEnd = () => {
+		draggedBlockID = null;
+		dropTarget = null;
+		stopAutoScroll();
+	};
+
+	$effect(() => {
+		const handleWindowDragOver = (event: DragEvent) => {
+			if (!draggedBlockID) return;
+			updateAutoScroll(event);
+		};
+
+		const handleWindowDrop = () => {
+			draggedBlockID = null;
+			dropTarget = null;
+			stopAutoScroll();
+		};
+
+		window.addEventListener('dragover', handleWindowDragOver);
+		window.addEventListener('drop', handleWindowDrop);
+
+		return () => {
+			window.removeEventListener('dragover', handleWindowDragOver);
+			window.removeEventListener('drop', handleWindowDrop);
+			stopAutoScroll();
+		};
+	});
+</script>
+
+<VStack gap="0.5rem" paddingX="0" paddingY="0">
+	{#each articleBlocks as block (block.id)}
+		{@const dropPlacement = dropPlacementFor(block.id)}
+		{@const textFormat = blockTextFormat(block)}
+		{@const canChangeTextFormat = canChangeBlockTextFormat(block)}
+		<ArticleBlockShell
+			{block}
+			{draggedBlockID}
+			{dropPlacement}
+			{textFormat}
+			{canChangeTextFormat}
+			onSelect={onSelectBlock}
+			onChangeTextFormat={onChangeBlockTextFormat}
+			{onInsertBlockAfter}
+			onDragOver={handleBlockDragOver}
+			onDragLeave={handleBlockDragLeave}
+			onDrop={handleBlockDrop}
+			onDragStart={handleBlockDragStart}
+			onDragEnd={handleBlockDragEnd}
+		>
+			{#snippet children()}
+				{#if block.type === 'heading'}
+					<ArticleBlockHeading
+						{block}
+						onUpdate={onUpdateBlock}
+						{onCreateParagraphAfter}
+						{onMergeBlockWithPrevious}
+						{onRemoveBlock}
+						shouldFocus={focusTarget === block.id}
+						focusPosition={focusTarget === block.id ? focusPosition : null}
+						onFocused={onFocusHandled}
+					/>
+				{:else if block.type === 'paragraph'}
+					<ArticleBlockParagraph
+						{block}
+						onUpdate={onUpdateBlock}
+						{onCreateParagraphAfter}
+						{onMergeBlockWithPrevious}
+						{onRemoveBlock}
+						{onConvertToList}
+						shouldFocus={focusTarget === block.id}
+						focusPosition={focusTarget === block.id ? focusPosition : null}
+						onFocused={onFocusHandled}
+					/>
+				{:else if block.type === 'bullet_list' || block.type === 'list' || block.type === 'numbered_list'}
+					<ArticleBlockList
+						{block}
+						onUpdateItem={onUpdateListItem}
+						onInsertItemAfter={onInsertListItemAfter}
+						{onMergeListItemWithPrevious}
+						{onCreateParagraphAfter}
+						{onRemoveListItem}
+						focusItemIndex={focusTarget?.startsWith(`${block.id}:`)
+							? Number(focusTarget.split(':')[1])
+							: null}
+						focusPosition={focusTarget?.startsWith(`${block.id}:`) ? focusPosition : null}
+						onFocused={onFocusHandled}
+					/>
+				{:else if block.type === 'image'}
+					<ArticleBlockImage {block} titleFallback={draftTitle} onUpdate={onUpdateBlock} />
+				{:else if block.type === 'table'}
+					<ArticleBlockTable
+						{block}
+						onUpdateHeader={onUpdateTableHeader}
+						onUpdateCell={onUpdateTableCell}
+						onAddColumn={onAddTableColumn}
+						onAddRow={onAddTableRow}
+						onRemoveColumn={onRemoveTableColumn}
+						onRemoveRow={onRemoveTableRow}
+					/>
+				{:else if block.type === 'code'}
+					<ArticleBlockCode {block} onUpdate={onUpdateBlock} />
+				{:else}
+					<ArticleBlockFallback
+						{block}
+						onUpdate={onUpdateBlock}
+						{onCreateParagraphAfter}
+						{onMergeBlockWithPrevious}
+						{onRemoveBlock}
+						{onConvertToList}
+						shouldFocus={focusTarget === block.id}
+						focusPosition={focusTarget === block.id ? focusPosition : null}
+						onFocused={onFocusHandled}
+					/>
+				{/if}
+			{/snippet}
+		</ArticleBlockShell>
+	{/each}
+</VStack>

package/dist/components/Library/ArticleEditor/ArticleEditorBody.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { BlockInsertKind, BlockTextFormat } from './articleEditor.svelte.js';
+import type { BlockDraft } from './types.js';
+type $$ComponentProps = {
+    draftTitle: string;
+    blocks: BlockDraft[];
+    onSelectBlock: (id: string) => void;
+    onUpdateBlock: (id: string, patch: Partial<BlockDraft>) => void;
+    onChangeBlockTextFormat: (id: string, format: BlockTextFormat) => void;
+    onInsertBlockAfter: (id: string, kind: BlockInsertKind) => void;
+    onUpdateListItem: (blockID: string, index: number, value: string) => void;
+    onInsertListItemAfter: (blockID: string, index: number, text?: string, currentText?: string | null) => void;
+    onMergeListItemWithPrevious: (blockID: string, index: number) => void;
+    onRemoveListItem: (blockID: string, index: number) => void;
+    onCreateParagraphAfter: (id: string, text?: string, currentText?: string | null) => void;
+    onMergeBlockWithPrevious: (id: string) => void;
+    onRemoveBlock: (id: string) => void;
+    onConvertToList: (id: string, kind: 'bullet_list' | 'numbered_list') => void;
+    onUpdateTableCell: (blockID: string, rowIndex: number, cellIndex: number, value: string) => void;
+    onUpdateTableHeader: (blockID: string, cellIndex: number, value: string) => void;
+    onAddTableColumn: (blockID: string) => void;
+    onAddTableRow: (blockID: string) => void;
+    onRemoveTableColumn: (blockID: string, columnIndex: number) => void;
+    onRemoveTableRow: (blockID: string, rowIndex: number) => void;
+    onReorderBlock: (draggedID: string, targetID: string, placement: 'before' | 'after') => void;
+    focusTarget: string | null;
+    focusPosition: number | null;
+    onFocusHandled: () => void;
+};
+declare const ArticleEditorBody: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleEditorBody = ReturnType<typeof ArticleEditorBody>;
+export default ArticleEditorBody;

package/dist/components/Library/ArticleEditor/ArticleEditorHeader.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import VStack from '../VStack';
+	import ArticleImagePreview from './ArticleImagePreview.svelte';
+	import TextEditor from '../TextEditor';
+	import type { ArticleEditorArticle } from './types.js';
+
+	let { article, draftTitle, draftImageAltText, onTitleChange, onImageAltTextChange } = $props<{
+		article: ArticleEditorArticle;
+		draftTitle: string;
+		draftImageAltText: string;
+		onTitleChange: (value: string) => void;
+		onImageAltTextChange: (value: string) => void;
+	}>();
+</script>
+
+<VStack gap="2rem" paddingX="0" paddingY="2rem">
+	<TextEditor
+		autosize
+		value={draftTitle}
+		rows={1}
+		spellcheck={true}
+		onInput={(event) => onTitleChange((event.currentTarget as HTMLTextAreaElement).value)}
+		className="text-4xl leading-tight font-semibold tracking-[-0.03em] text-zinc-950 placeholder:text-zinc-300"
+		placeholder="Untitled article"
+	/>
+
+	{#if article.imageURL}
+		<ArticleImagePreview
+			src={article.imageURL}
+			alt={draftImageAltText || article.title}
+			aspectRatio="4 / 3"
+		/>
+		<TextEditor
+			autosize
+			value={draftImageAltText}
+			rows={1}
+			onInput={(event) => onImageAltTextChange((event.currentTarget as HTMLTextAreaElement).value)}
+			className="article-editor-hero-description"
+			placeholder="Image description"
+		/>
+	{/if}
+</VStack>
+
+<style>
+	:global(.article-editor-hero-description) {
+		border: 0;
+		background: transparent;
+		padding: 0;
+		color: #3f3f46;
+		font-size: 0.875rem;
+		line-height: 1.5rem;
+	}
+
+	:global(.article-editor-hero-description::placeholder) {
+		color: #d4d4d8;
+	}
+</style>

package/dist/components/Library/ArticleEditor/ArticleEditorHeader.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ArticleEditorArticle } from './types.js';
+type $$ComponentProps = {
+    article: ArticleEditorArticle;
+    draftTitle: string;
+    draftImageAltText: string;
+    onTitleChange: (value: string) => void;
+    onImageAltTextChange: (value: string) => void;
+};
+declare const ArticleEditorHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleEditorHeader = ReturnType<typeof ArticleEditorHeader>;
+export default ArticleEditorHeader;