@rigel-cms/rigel 0.0.0-stage → 0.1.0-beta.1

package/src/editor/lib/MarkdownEditor.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+  import { onDestroy, tick } from "svelte";
+  import { EditorState, TextSelection } from "prosemirror-state";
+  import { EditorView } from "prosemirror-view";
+  import { exampleSetup } from "prosemirror-example-setup";
+  import { lift, setBlockType, toggleMark, wrapIn } from "prosemirror-commands";
+  import { liftListItem, wrapInList } from "prosemirror-schema-list";
+  import type { Command } from "prosemirror-state";
+  import Icon from "./Icon.svelte";
+  import ImagePicker from "./ImagePicker.svelte";
+  import Select from "./Select.svelte";
+  import { safeImageUrl, type StockResult } from "./images";
+  import type { SelectionBookmark } from "prosemirror-state";
+  import { parseVisualMarkdown, serializeMarkdown, safeMarkdownUrl, schema } from "./rich-markdown";
+
+  let { value, label, oninput }: { value: string; label: string; oninput: (value: string) => void } = $props();
+  const id = $props.id();
+  let host: HTMLDivElement;
+  let mode = $state<"visual" | "source">("visual");
+  let warning = $state("");
+  let linkUrl = $state("");
+  let linkError = $state("");
+  let linkOpen = $state(false);
+  let linkInput: HTMLInputElement;
+  let linkButton: HTMLButtonElement;
+  let state = $state.raw<EditorState>();
+  let view: EditorView | undefined;
+  let lastValue: string | undefined;
+  let imageSelection: SelectionBookmark | undefined;
+  function insertImage(url: string, alt: string, credit?: StockResult) {
+    if (!view || !imageSelection || !safeImageUrl(url)) return;
+    let tr = view.state.tr.setSelection(imageSelection.resolve(view.state.doc));
+    tr = tr.replaceSelectionWith(schema.nodes.image.create({ src: url, alt }));
+    if (credit?.creditURL && safeImageUrl(credit.creditURL)) {
+      tr = tr.insert(tr.selection.to, schema.text(` (${credit.credit})`, [schema.marks.link.create({ href: credit.creditURL })]));
+    }
+    view.dispatch(tr.scrollIntoView());
+    imageSelection = undefined;
+    view.focus();
+  }
+  const marks = [
+    { name: "Bold", icon: "textB", type: "strong" },
+    { name: "Italic", icon: "textItalic", type: "em" },
+    { name: "Code", icon: "code", type: "code" },
+  ] as const;
+  const blocks = [
+    { name: "Bullet list", icon: "listBullets", type: "bullet_list" },
+    { name: "Numbered list", icon: "listNumbers", type: "ordered_list" },
+    { name: "Quote", icon: "quotes", type: "blockquote" },
+  ] as const;
+  const format = $derived(state?.selection.$from.parent.type.name === "heading" ? `h${state.selection.$from.parent.attrs.level}` : state?.selection.$from.parent.type.name ?? "paragraph");
+
+  function emit(next: string) {
+    lastValue = next;
+    oninput(next);
+  }
+
+  function load(source: string) {
+    const doc = parseVisualMarkdown(source);
+    warning = doc ? "" : "This Markdown contains formatting the visual editor cannot safely preserve. Edit the original source below; nothing has been converted.";
+    if (!doc) { mode = "source"; return false; }
+    state = EditorState.create({ doc, plugins: exampleSetup({ schema, menuBar: false }) });
+    view?.updateState(state);
+    return true;
+  }
+
+  $effect(() => {
+    if (!host) return;
+    if (!view) {
+      view = new EditorView(host, {
+        state: EditorState.create({ schema }),
+        attributes: { role: "textbox", "aria-label": label, "aria-multiline": "true" },
+        dispatchTransaction(transaction) {
+          state = view!.state.apply(transaction);
+          view!.updateState(state);
+          if (transaction.docChanged) emit(serializeMarkdown(state.doc));
+        },
+        handlePaste(editor, event) {
+          event.preventDefault();
+          const text = event.clipboardData?.getData("text/plain") ?? "";
+          if (text) editor.dispatch(editor.state.tr.insertText(text));
+          return true;
+        },
+        handleDrop(_editor, _event, _slice, moved) { return !moved; },
+        handleClickOn(_editor, _pos, node) { return node.type.name === "image"; },
+        handleDOMEvents: { click: (_editor, event) => { if ((event.target as Element).closest("a")) { event.preventDefault(); return true; } return false; } },
+      });
+    }
+    if (value !== lastValue) {
+      lastValue = value;
+      load(value);
+    }
+  });
+  onDestroy(() => view?.destroy());
+
+  function activeMark(type: string) {
+    if (!state) return false;
+    const { from, to, empty, $from: anchor } = state.selection;
+    return empty ? !!schema.marks[type].isInSet(state.storedMarks ?? anchor.marks()) : state.doc.rangeHasMark(from, to, schema.marks[type]);
+  }
+
+  function activeBlock(type: string) {
+    if (!state) return false;
+    const { $from: anchor } = state.selection;
+    for (let depth = anchor.depth; depth > 0; depth--) if (anchor.node(depth).type.name === type) return true;
+    return false;
+  }
+
+  function blockCommand(type: string): Command {
+    if (type === "blockquote") return activeBlock(type) ? lift : wrapIn(schema.nodes[type]);
+    return activeBlock(type) ? liftListItem(schema.nodes.list_item) : wrapInList(schema.nodes[type]);
+  }
+
+  function formatCommand(type: string) {
+    return type.startsWith("h") ? setBlockType(schema.nodes.heading, { level: Number(type.slice(1)) }) : setBlockType(schema.nodes[type]);
+  }
+
+  function command(action: Command) {
+    if (!view) return;
+    action(view.state, view.dispatch, view);
+    view.focus();
+  }
+
+  function visual() {
+    if (mode === "visual") return;
+    if (load(value)) { mode = "visual"; view?.focus(); }
+  }
+
+  async function openLink() {
+    const mark = state && schema.marks.link.isInSet(state.selection.$from.marks());
+    if (view && mark && view.state.selection.empty) {
+      const anchor = view.state.selection.$from;
+      let from = anchor.pos;
+      let to = anchor.pos;
+      view.state.doc.nodesBetween(anchor.start(), anchor.end(), (node, pos) => {
+        if (node.isText && mark.isInSet(node.marks) && pos <= to && pos + node.nodeSize >= from) {
+          from = Math.min(from, pos);
+          to = Math.max(to, pos + node.nodeSize);
+        }
+      });
+      view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, from, to)));
+    }
+    linkUrl = mark?.attrs.href ?? "";
+    linkError = "";
+    linkOpen = !linkOpen;
+    if (linkOpen) { await tick(); linkInput?.focus(); }
+  }
+
+  function link(remove = false) {
+    if (!view) return;
+    if (!remove && (!safeMarkdownUrl(linkUrl) || !linkUrl)) { linkError = "Enter a safe http, https, mailto or relative URL."; return; }
+    const { from, to, empty } = view.state.selection;
+    let tr = view.state.tr;
+    if (empty) tr = remove ? tr.removeStoredMark(schema.marks.link) : tr.addStoredMark(schema.marks.link.create({ href: linkUrl }));
+    else tr = remove ? tr.removeMark(from, to, schema.marks.link) : tr.addMark(from, to, schema.marks.link.create({ href: linkUrl }));
+    view.dispatch(tr);
+    linkOpen = false;
+    view.focus();
+  }
+</script>
+
+<svelte:window onpointerdown={event => { if (linkOpen && !document.getElementById(`${id}-link`)?.contains(event.target as Node) && !linkButton?.contains(event.target as Node)) linkOpen = false; }} />
+
+<div class="markdown-editor body-editor">
+  <div class="markdown-heading">
+    <div class="field-label" id={`${id}-label`}>{label}</div>
+    <div class="markdown-modes" role="group" aria-label={`${label} editing mode`}>
+      <button type="button" aria-pressed={mode === "visual"} onclick={visual}>Visual</button>
+      <button type="button" aria-pressed={mode === "source"} onclick={() => { mode = "source"; linkOpen = false; }}>Markdown</button>
+    </div>
+  </div>
+  {#if warning}<p class="markdown-warning" role="status">{warning}</p>{/if}
+  <div class="markdown-visual" hidden={mode !== "visual"}>
+    <div class="body-toolbar formatting-toolbar" role="group" aria-label={`${label} formatting`}>
+      <Select ariaLabel="Text style" title="Text style" value={format} options={[{ value: "paragraph", label: "Paragraph" }, ...[1, 2, 3, 4, 5, 6].map(level => ({ value: `h${level}`, label: `Heading ${level}` })), { value: "code_block", label: "Code block" }].map(option => ({ ...option, disabled: !!state && format !== option.value && !formatCommand(option.value)(state) }))} onchange={next => command(formatCommand(String(next)))} />
+      <div class="format-group" role="group" aria-label="Text formatting">
+        {#each marks as item}
+          <button type="button" aria-label={item.name} title={item.name} aria-pressed={activeMark(item.type)} disabled={!state || !toggleMark(schema.marks[item.type])(state)} onmousedown={event => event.preventDefault()} onclick={() => command(toggleMark(schema.marks[item.type]))}><Icon name={item.icon} size={18} /></button>
+        {/each}
+      </div>
+      <div class="format-group" role="group" aria-label="Lists and quote">
+        {#each blocks as item}
+          <button type="button" aria-label={item.name} title={item.name} aria-pressed={activeBlock(item.type)} disabled={!state || !blockCommand(item.type)(state)} onmousedown={event => event.preventDefault()} onclick={() => command(blockCommand(item.type))}><Icon name={item.icon} size={18} /></button>
+        {/each}
+      </div>
+      <button bind:this={linkButton} type="button" aria-label="Link" title="Link" aria-pressed={activeMark("link")} aria-expanded={linkOpen} aria-controls={`${id}-link`} disabled={!state || !toggleMark(schema.marks.link)(state)} onmousedown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
+      <ImagePicker toolbar onopen={() => { imageSelection = view?.state.selection.getBookmark(); linkOpen = false; }} onpick={insertImage} onclose={() => { imageSelection = undefined; }} />
+    </div>
+    {#if linkOpen}
+      <div class="markdown-link" id={`${id}-link`} role="group" aria-label="Edit link" onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); linkOpen = false; linkButton.focus(); } if (event.key === "Enter") { event.preventDefault(); link(); } }}>
+        <label for={`${id}-url`}>Link URL</label>
+        <div class="markdown-link-controls">
+          <input id={`${id}-url`} type="text" placeholder="https://…" bind:this={linkInput} bind:value={linkUrl} aria-invalid={!!linkError} aria-describedby={linkError ? `${id}-error` : undefined} />
+          <button type="button" aria-label="Apply link" title="Apply link" onclick={() => link()}><Icon name="check" size={16} /></button>
+          <button type="button" aria-label="Remove link" title="Remove link" disabled={!activeMark("link")} onclick={() => link(true)}><Icon name="linkBreak" size={16} /></button>
+          <button type="button" aria-label="Close link" title="Close link" onclick={() => { linkOpen = false; linkButton.focus(); }}><Icon name="x" size={16} /></button>
+        </div>
+        {#if linkError}<p id={`${id}-error`} role="alert">{linkError}</p>{/if}
+      </div>
+    {/if}
+    <div class="md-preview rich-text" bind:this={host}></div>
+  </div>
+  {#if mode === "source"}
+    <textarea class="mono" rows="14" aria-label={`${label} Markdown source`} value={value} oninput={(event) => { warning = ""; emit(event.currentTarget.value); }}></textarea>
+  {/if}
+</div>

package/src/editor/lib/MenuEditor.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+  import { tick } from "svelte";
+  import type { MenuItem } from "../../manifest/menu";
+  import { editMenuItem, menuRows, moveMenuItem } from "./menu-tree";
+  import ActionDialog from "./ActionDialog.svelte";
+  import Icon from "./Icon.svelte";
+
+  let { items, maxDepth, oninput }: { items: MenuItem[]; maxDepth: number; oninput: (items: MenuItem[]) => void } = $props();
+  let dragging = $state<string | null>(null);
+  let target = $state("");
+  let message = $state("");
+  let removing = $state<MenuItem | null>(null);
+  const rows = $derived(menuRows(items));
+  let selectedId = $state<string | null>(null);
+  let host: HTMLElement;
+  const chain = $derived.by(() => {
+    const selected: ReturnType<typeof menuRows> = [];
+    let row = rows.find(row => row.item.id === selectedId);
+    while (row) {
+      selected.unshift(row);
+      row = rows.find(parent => parent.item.id === row?.parentId);
+    }
+    return selected;
+  });
+  const panes = $derived([null, ...chain]);
+  let pointer: { id: string; pointerId: number; x: number; y: number; handle: HTMLButtonElement } | null = null;
+
+  function cancelDrag() {
+    const active = pointer;
+    pointer = null;
+    if (active?.handle.hasPointerCapture(active.pointerId)) active.handle.releasePointerCapture(active.pointerId);
+    dragging = null;
+    target = "";
+  }
+  function startDrag(e: PointerEvent, id: string) {
+    if (e.button !== 0 || !e.isPrimary) return;
+    const handle = e.currentTarget as HTMLButtonElement;
+    pointer = { id, pointerId: e.pointerId, x: e.clientX, y: e.clientY, handle };
+    handle.setPointerCapture(e.pointerId);
+  }
+  function dropAt(x: number, y: number) {
+    const list = document.elementFromPoint(x, y)?.closest<HTMLElement>('.menu-list');
+    const source = pointer?.handle.closest('.menu-item');
+    if (!list || source?.parentElement !== list) return null;
+    const siblings = [...list.querySelectorAll<HTMLElement>(':scope > .menu-item')];
+    const next = siblings.find(row => y < row.getBoundingClientRect().top + row.getBoundingClientRect().height / 2);
+    const row = next ?? siblings.at(-1);
+    if (!row || row === source) return null;
+    return { id: row.dataset.menuId!, position: next ? 'before' as const : 'after' as const };
+  }
+  function dragPointer(e: PointerEvent) {
+    if (!pointer || e.pointerId !== pointer.pointerId) return;
+    if (!dragging && Math.hypot(e.clientX - pointer.x, e.clientY - pointer.y) < 5) return;
+    dragging = pointer.id;
+    const drop = dropAt(e.clientX, e.clientY);
+    target = drop ? drop.id + drop.position : '';
+    if (e.clientY < 48) window.scrollBy(0, -16);
+    else if (e.clientY > window.innerHeight - 48) window.scrollBy(0, 16);
+  }
+  function finishDrag(e: PointerEvent) {
+    if (!pointer || e.pointerId !== pointer.pointerId) return;
+    const id = dragging;
+    const drop = dropAt(e.clientX, e.clientY);
+    cancelDrag();
+    if (id && drop) move(id, drop.id, drop.position);
+  }
+
+  function move(id: string, targetId: string | null, position: "before" | "after" | "inside") {
+    try {
+      oninput(moveMenuItem(items, id, targetId, position, maxDepth));
+      message = "Menu item moved";
+    } catch (error) { message = error instanceof Error ? error.message : "Cannot move item"; }
+    dragging = null;
+    target = "";
+  }
+  async function open(id: string | null) {
+    selectedId = id;
+    await tick();
+    const pane = host.querySelector<HTMLElement>('.menu-pane:last-child');
+    pane?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    pane?.querySelector<HTMLElement>('input, .menu-add')?.focus({ preventScroll: true });
+  }
+  function add(parentId: string | null = null) {
+    const parent = rows.find((row) => row.item.id === parentId);
+    if (parent && parent.depth >= maxDepth) { message = `Maximum ${maxDepth} levels`; return; }
+    const item: MenuItem = { id: crypto.randomUUID(), label: "New item", url: "/", children: [] };
+    oninput(parentId ? editMenuItem(items, parentId, (p) => ({ ...p, children: [...p.children, item] })) : [...items, item]);
+    message = "Menu item added";
+    void open(item.id);
+  }
+  function remove(item: MenuItem) {
+    removing = item;
+  }
+  function change(id: string, field: "label" | "url", value: string) {
+    oninput(editMenuItem(items, id, (item) => ({ ...item, [field]: value })));
+  }
+</script>
+
+<svelte:window onpointermove={dragPointer} onpointerup={finishDrag} onpointercancel={cancelDrag} onkeydown={(event) => { if (event.key === 'Escape' && pointer) { cancelDrag(); message = 'Move cancelled'; } }} />
+<section class="menu-editor" aria-label="Menu items" bind:this={host}>
+  <nav class="menu-path" aria-label="Menu path">
+    <button type="button" data-menu-path="" onclick={() => open(null)}>Menu items</button>
+    {#each chain as row}
+      <Icon name="caretRight" size={12} />
+      <button type="button" data-menu-path={row.item.id} aria-current={row.item.id === selectedId ? 'step' : undefined} onclick={() => open(row.item.id)}>{row.item.label || "Untitled item"}</button>
+    {/each}
+  </nav>
+  <p class="menu-message" role="status" aria-live="polite">{message}</p>
+  <div class="menu-panes">
+    {#each panes as parent, index (parent?.item.id ?? '')}
+      <section class="menu-pane" class:active={index === panes.length - 1} data-menu-parent={parent?.item.id ?? ''} aria-label={parent ? `${parent.item.label || 'Untitled item'} details` : 'Menu items'}>
+        <div class="menu-pane-head">
+          <h3>{parent?.item.label || (parent ? "Untitled item" : "Menu items")}</h3>
+          {#if parent}
+            <details class="menu-actions">
+              <summary aria-label={`Actions for ${parent.item.label}`}><Icon name="dotsThreeOutlineVertical" /></summary>
+              <div>
+                <button type="button" disabled={!parent.previous} onclick={() => parent.previous && move(parent.item.id, parent.previous, 'before')}>Up</button>
+                <button type="button" disabled={!parent.next} onclick={() => parent.next && move(parent.item.id, parent.next, 'after')}>Down</button>
+                <button type="button" disabled={!parent.previous || parent.depth + Math.max(...menuRows([parent.item]).map(row => row.depth)) > maxDepth} onclick={() => parent.previous && move(parent.item.id, parent.previous, 'inside')}>Indent</button>
+                <button type="button" disabled={!parent.parentId} onclick={() => parent.parentId && move(parent.item.id, parent.parentId, 'after')}>Outdent</button>
+                <button type="button" class="menu-remove" onclick={() => remove(parent.item)}>Remove</button>
+              </div>
+            </details>
+          {/if}
+        </div>
+        {#if parent}
+          <div class="menu-fields">
+            <label><span>Label</span><input type="text" aria-label={`Label for ${parent.item.id}`} value={parent.item.label} oninput={event => change(parent.item.id, 'label', event.currentTarget.value)} /></label>
+            <label><span>URL</span><input type="text" aria-label={`URL for ${parent.item.id}`} value={parent.item.url} placeholder="/about or https://example.com" oninput={event => change(parent.item.id, 'url', event.currentTarget.value)} /></label>
+            <label class="inline"><input type="checkbox" role="switch" class="switch" checked={parent.item.newTab ?? false} onchange={event => oninput(editMenuItem(items, parent.item.id, item => ({ ...item, newTab: event.currentTarget.checked })))} /><span>Open in new tab</span></label>
+          </div>
+          <h4>Items</h4>
+        {/if}
+        <div class="menu-list">
+          {#each (parent ? parent.item.children : items) as item (item.id)}
+            <div class="menu-item" class:is-dragging={dragging === item.id} class:drop-before={target === item.id + 'before'} class:drop-after={target === item.id + 'after'} class:selected={chain[index]?.item.id === item.id} data-menu-id={item.id} data-parent-id={parent?.item.id ?? ''} data-depth={index + 1}>
+              <button type="button" class="menu-drag" aria-label={`Drag ${item.label}`} onpointerdown={event => startDrag(event, item.id)} onlostpointercapture={cancelDrag}><Icon name="listBullets" /></button>
+              <button type="button" class="menu-open" aria-label={`Open ${item.label || 'Untitled item'}`} aria-expanded={chain[index]?.item.id === item.id} onclick={() => open(item.id)}>
+                <span><span class="menu-label">{item.label || "Untitled item"}</span><span class="menu-url">{item.url}</span></span>
+                {#if item.children.length}<span class="menu-count">{item.children.length}</span>{/if}
+                <Icon name="caretRight" size={12} />
+              </button>
+            </div>
+          {:else}
+            <p class="menu-empty">{parent ? "No items in this group." : "No menu items yet."}</p>
+          {/each}
+        </div>
+        <button type="button" class="menu-add" disabled={!!parent && parent.depth >= maxDepth} onclick={() => add(parent?.item.id ?? null)}><Icon name="plus" />{parent ? "Add child" : "Add item"}</button>
+        {#if parent && parent.depth >= maxDepth}<p class="hint">Maximum {maxDepth} levels.</p>{/if}
+      </section>
+    {/each}
+  </div>
+</section>
+{#if removing}
+  <ActionDialog title={`Remove “${removing.label}”?`} description="This removes the item and all its children from the draft. Press Save to persist the change." confirmLabel="Remove" danger onconfirm={() => {
+    if (removing) {
+      const parentId = rows.find(row => row.item.id === removing?.id)?.parentId ?? null;
+      oninput(editMenuItem(items, removing.id, () => null));
+      void open(parentId);
+    }
+    message = "Menu item removed";
+  }} onclose={() => { removing = null; }} />
+{/if}
+
+<style>
+  .menu-editor { padding: 0; border: 0; background: transparent; box-shadow: none; min-width: 0; }
+  .menu-path { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem; }
+  .menu-message, .menu-empty, .menu-url, .menu-count { color: var(--text-2); font-size: 0.8125rem; }
+  .menu-message:empty { display: none; }
+  .menu-panes { display: flex; overflow-x: auto; align-items: stretch; border: 1px solid var(--border-control); }
+  .menu-pane { flex: 1 0 280px; min-width: 0; margin: 0; padding: 1rem; border: 0; border-right: 1px solid var(--border-subtle); box-shadow: none; }
+  .menu-pane:last-child { border-right: 0; }
+  .menu-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
+  .menu-pane-head h3 { margin: 0; overflow-wrap: anywhere; }
+  .menu-fields { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
+  .menu-fields label { min-width: 0; margin: 0; }
+  .menu-pane h4 { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--text-2); }
+  .menu-list { display: grid; gap: 0.5rem; }
+  .menu-item { display: flex; position: relative; min-width: 0; border: 1px solid var(--border-control); }
+  .menu-item.selected { border-color: var(--accent); background: var(--accent-soft); }
+  .menu-item.is-dragging { border-style: dashed; }
+  .menu-editor button, .menu-actions summary { padding: 0.5rem; min-height: 36px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 0.8125rem; cursor: pointer; }
+  .menu-editor button:hover:not(:disabled), .menu-actions summary:hover { background: var(--surface-raised); }
+  .menu-editor button:disabled { opacity: 0.45; cursor: not-allowed; }
+  .menu-editor .menu-open { flex: 1; display: flex; align-items: center; gap: 0.5rem; text-align: left; min-width: 0; min-height: 56px; padding-inline: 0.25rem 0.75rem; }
+  .menu-open > span:first-child { flex: 1; min-width: 0; }
+  .menu-label, .menu-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .menu-label { margin-bottom: 0.25rem; }
+  .menu-drag { cursor: grab !important; touch-action: none; user-select: none; flex-shrink: 0; }
+  .menu-drag:active { cursor: grabbing !important; }
+  .menu-editor .menu-add { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin-top: 0.75rem; border: 1px solid var(--border-control); }
+  .menu-actions { position: relative; flex-shrink: 0; }
+  .menu-actions summary { display: flex; align-items: center; list-style: none; }
+  .menu-actions summary::-webkit-details-marker { display: none; }
+  .menu-actions > div { position: absolute; right: 0; top: 100%; z-index: 3; display: grid; min-width: 140px; padding: 0.25rem; border: 1px solid var(--border-control); background: var(--panel); box-shadow: var(--shadow-sm); }
+  .menu-actions button { text-align: left; }
+  .menu-actions .menu-remove { color: var(--danger); }
+  .menu-item.drop-before::before, .menu-item.drop-after::after { content: ""; position: absolute; left: -1px; right: -1px; height: 3px; background: var(--accent); pointer-events: none; }
+  .menu-item.drop-before::before { top: -6px; }
+  .menu-item.drop-after::after { bottom: -6px; }
+  @media (max-width: 700px) {
+    .menu-panes { display: block; overflow: visible; }
+    .menu-pane { display: none; border: 0; }
+    .menu-pane.active { display: block; }
+    .menu-path { gap: 0; }
+    .menu-editor button, .menu-actions summary { min-height: 44px; }
+  }
+</style>

package/src/editor/lib/PropertiesTabs.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  let { tab = $bindable("content") }: { tab?: "content" | "seo" } = $props();
+  function onkey(event: KeyboardEvent) {
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    tab = event.key === "Home" ? "content" : event.key === "End" ? "seo" : tab === "content" ? "seo" : "content";
+    (event.currentTarget as HTMLElement).parentElement?.querySelector<HTMLButtonElement>(`[data-tab="${tab}"]`)?.focus();
+  }
+</script>
+
+<div class="panel-tabs" role="tablist" aria-label="Properties">
+  {#each ["content", "seo"] as value}
+    <button type="button" role="tab" id={`properties-tab-${value}`} aria-controls={`properties-${value}`} aria-selected={tab === value} tabindex={tab === value ? 0 : -1} data-tab={value} onclick={() => (tab = value as "content" | "seo")} onkeydown={onkey}>{value === "content" ? "Content" : "SEO"}</button>
+  {/each}
+</div>

package/src/editor/lib/ReferenceSelect.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { ReferenceOption } from "../../manifest/references";
+  import Select from "./Select.svelte";
+
+  let { label, value, options, multiple = false, onchange }: {
+    label: string;
+    value: unknown;
+    options: ReferenceOption[];
+    multiple?: boolean;
+    onchange: (value: string | string[]) => void;
+  } = $props();
+  const selected = $derived((Array.isArray(value) ? value : [value]).filter((id): id is string => typeof id === "string" && !!id));
+  const missing = $derived(selected.filter(id => !options.some(option => option.value === id)));
+</script>
+
+<Select {label} {multiple} value={multiple ? selected : selected[0] ?? ""} options={[...(!multiple ? [{ value: "", label: `Select ${label.toLowerCase()}…` }] : []), ...options, ...missing.map(id => ({ value: id, label: `Unavailable (${id})` }))]} {onchange} />
+{#if !options.length}<p class="hint">No entries have been declared yet.</p>{/if}

package/src/editor/lib/SchemaField.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import ImagePicker from "./ImagePicker.svelte";
+  import MarkdownEditor from "./MarkdownEditor.svelte";
+  import SchemaField from "./SchemaField.svelte";
+  import Select from "./Select.svelte";
+  import Icon from "./Icon.svelte";
+  import DatePicker from "./DatePicker.svelte";
+  import {
+    blankItem,
+    duplicateItem,
+    itemFields,
+    moveItem,
+    objectFields,
+    referenceOptions,
+  } from "./schema-edit";
+  import { newKey } from "../../schema/paths";
+  import type { ContentDocument, FieldDef, Schema } from "../../schema/types";
+
+  let {
+    schema, field, value, base, documents, devMode = false, onvalue,
+  }: {
+    schema: Schema;
+    field: FieldDef;
+    value: unknown;
+    base: string;
+    documents: ContentDocument[];
+    devMode?: boolean;
+    onvalue: (next: unknown) => void;
+  } = $props();
+
+  const id = $props.id();
+  let revealed = $state(false);
+  const color = $derived(field.type === "color" && typeof value === "string" ? normalizeColor(value) : "");
+  const itemList = $derived(field.type === "array" && Array.isArray(value) ? (value as unknown[]) : []);
+  const itemSchema = $derived(field.type === "array" ? itemFields(schema, field) : []);
+  const objectSchema = $derived(field.type === "object" ? objectFields(schema, field) : []);
+  const options = $derived(field.type === "reference" ? referenceOptions(documents, field.to ?? []) : []);
+  const label = $derived(`${field.label}${field.required ? " *" : ""}${devMode ? ` (${field.key})` : ""}`);
+
+  function normalizeColor(input: string): string {
+    const hex = input.trim().replace(/^#/, "");
+    if (!/^(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex)) return input;
+    return `#${(hex.length === 3 ? [...hex].map(character => character.repeat(2)).join("") : hex).toLowerCase()}`;
+  }
+
+  function setItem(index: number, item: unknown) {
+    const next = [...itemList];
+    next[index] = item;
+    onvalue(next);
+  }
+</script>
+
+<div data-schema-path={base}>
+{#if field.type === "string" || field.type === "url"}
+  <label>
+    <span>{label}</span>
+    <input type={(field.type as string) === "url" ? "url" : "text"} value={typeof value === "string" ? value : ""} placeholder={field.placeholder ?? ""} oninput={(event) => onvalue(event.currentTarget.value)} />
+  </label>
+{:else if field.type === "color"}
+  <div class="schema-field">
+    <label for={id}><span>{label}</span></label>
+    <div class="schema-color">
+      <input type="color" aria-label={`${field.label} picker`} value={/^#[0-9a-f]{6}$/.test(color) ? color : "#000000"} oninput={(event) => onvalue(event.currentTarget.value)} />
+      <input id={id} type="text" aria-label={`${field.label} hex value`} value={typeof value === "string" ? value : ""} placeholder="#000000" spellcheck={false} oninput={(event) => onvalue(event.currentTarget.value)} onblur={(event) => onvalue(normalizeColor(event.currentTarget.value))} />
+    </div>
+  </div>
+{:else if field.type === "code"}
+  <label>
+    <span>{label}</span>
+    <textarea class="schema-code" rows="8" spellcheck={false} value={typeof value === "string" ? value : ""} oninput={(event) => onvalue(event.currentTarget.value)}></textarea>
+  </label>
+{:else if field.type === "password"}
+  <div class="schema-field">
+    <label for={id}><span>{label}</span></label>
+    <div class="secret-input">
+      <input id={id} type={revealed ? "text" : "password"} value={typeof value === "string" ? value : ""} placeholder={field.placeholder ?? ""} autocomplete="off" spellcheck={false} oninput={(event) => onvalue(event.currentTarget.value)} />
+      <button type="button" aria-label={`${revealed ? "Hide" : "Show"} ${field.label}`} aria-controls={id} aria-pressed={revealed} onclick={() => revealed = !revealed}><Icon name={revealed ? "eyeSlash" : "eye"} size={18} /></button>
+    </div>
+  </div>
+{:else if field.type === "text"}
+  <label>
+    <span>{label}</span>
+    <textarea rows="3" value={typeof value === "string" ? value : ""} oninput={(event) => onvalue(event.currentTarget.value)}></textarea>
+  </label>
+{:else if field.type === "markdown"}
+  <MarkdownEditor label={field.label} value={typeof value === "string" ? value : ""} oninput={(next) => onvalue(next)} />
+{:else if field.type === "image"}
+  <div class="schema-field">
+    <span class="schema-label">{label}</span>
+    <ImagePicker value={typeof value === "string" ? value : ""} onpick={(url) => onvalue(url)} />
+  </div>
+{:else if field.type === "boolean"}
+  <label class="inline">
+    <input type="checkbox" role="switch" class="switch" checked={value === true} onchange={(event) => onvalue(event.currentTarget.checked)} />
+    <span>{label}</span>
+  </label>
+{:else if field.type === "number"}
+  <label>
+    <span>{label}</span>
+    <input type="number" value={typeof value === "number" ? value : ""} oninput={(event) => onvalue(event.currentTarget.value === "" ? 0 : Number(event.currentTarget.value))} />
+  </label>
+{:else if field.type === "date"}
+  <DatePicker {label} value={typeof value === "string" ? value : ""} required={field.required} onchange={next => onvalue(next || undefined)} />
+{:else if field.type === "reference"}
+  <Select {label} value={value && typeof value === "object" ? String((value as Record<string, unknown>)._ref ?? "") : ""} options={[{ value: "", label: "Choose…" }, ...options.map(option => ({ value: option.id, label: String(option.data.title ?? option.data.name ?? option.slug) }))]} onchange={next => onvalue(next ? { _ref: String(next) } : undefined)} />
+{:else if field.type === "object"}
+  <fieldset class="schema-object">
+    <legend>{label}</legend>
+    {#each objectSchema as sub (sub.key)}
+      <SchemaField
+        {schema}
+        {documents}
+        {devMode}
+        field={sub}
+        base={`${base}.${sub.key}`}
+        value={value && typeof value === "object" ? (value as Record<string, unknown>)[sub.key] : undefined}
+        onvalue={(next) => onvalue({ ...(value && typeof value === "object" ? value : {}), [sub.key]: next })}
+      />
+    {/each}
+  </fieldset>
+{:else if field.type === "array"}
+  <div class="schema-array">
+    <div class="schema-label">{label}</div>
+    {#each itemList as item, index (`${base}.${item && typeof item === "object" ? (item as Record<string, unknown>)._key ?? index : index}`)}
+      <div class="schema-item" data-schema-path={`${base}.${item && typeof item === "object" ? (item as Record<string, unknown>)._key ?? index : index}`}>
+        <div class="schema-item-head">
+          <span>Item {index + 1}</span>
+          <span class="schema-key">{(item && typeof item === "object" ? (item as Record<string, unknown>)._key : "") ?? ""}</span>
+          <div class="schema-item-actions">
+            <button type="button" aria-label={`Move ${field.label} item ${index + 1} up`} title="Move up" disabled={index === 0} onclick={() => onvalue(moveItem(itemList, index, -1))}>↑</button>
+            <button type="button" aria-label={`Move ${field.label} item ${index + 1} down`} title="Move down" disabled={index === itemList.length - 1} onclick={() => onvalue(moveItem(itemList, index, 1))}>↓</button>
+            <button type="button" aria-label={`Duplicate ${field.label} item ${index + 1}`} title="Duplicate" onclick={() => onvalue(duplicateItem(itemList, index))}>⧉</button>
+            <button type="button" aria-label={`Remove ${field.label} item ${index + 1}`} title="Remove" onclick={() => onvalue(itemList.filter((_, position) => position !== index))}>×</button>
+          </div>
+        </div>
+        {#if itemSchema.length}
+          {#each itemSchema as sub (sub.key)}
+            <SchemaField
+              {schema}
+              {documents}
+              {devMode}
+              field={sub}
+              base={`${base}.${(item as Record<string, unknown>)._key}.${sub.key}`}
+              value={item && typeof item === "object" ? (item as Record<string, unknown>)[sub.key] : undefined}
+              onvalue={(next) => setItem(index, { ...(item as Record<string, unknown>), [sub.key]: next })}
+            />
+          {/each}
+        {:else}
+          <input type="text" aria-label={`${field.label} item ${index + 1}`} value={typeof item === "string" ? item : ""} oninput={(event) => setItem(index, event.currentTarget.value)} />
+        {/if}
+      </div>
+    {/each}
+    <button type="button" class="outlined" onclick={() => onvalue([...itemList, itemSchema.length ? blankItem(itemSchema) : field.items?.some((item) => item.type === "reference") ? { _key: newKey(), _ref: "" } : ""])}>Add item</button>
+  </div>
+{/if}
+</div>