@mappoh/nova 0.3.0 → 0.5.0

package/dist/editor/editor.js

@@ -0,0 +1,955 @@
+/**
+ * Nova Engine — Markdown Editor
+ *
+ * Interactive split-pane markdown editor with live preview,
+ * toolbar, keyboard shortcuts, and auto-list continuation.
+ * Uses Nova's internal markdown parser for rendering.
+ */
+import { parse } from '../markdown/markdown';
+// ── Style Injection ─────────────────────────────────────────────────
+const STYLE_ID = 'nova-editor-styles';
+function injectStyles() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    const s = document.createElement('style');
+    s.id = STYLE_ID;
+    s.textContent = `
+.nova-editor {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+  border-radius: 8px;
+  background: var(--color-bg-surface, rgba(18, 18, 18, 0.95));
+  color: var(--color-text-primary, #e5e5e5);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  overflow: hidden;
+}
+
+/* ── Toolbar ── */
+.nova-editor__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+  background: var(--color-bg-elevated, rgba(22, 22, 22, 0.98));
+  flex-wrap: wrap;
+}
+.nova-editor__toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.55));
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.nova-editor__toolbar-btn:hover {
+  background: var(--color-bg-hover, rgba(255, 255, 255, 0.06));
+  color: var(--color-text-primary, #e5e5e5);
+}
+.nova-editor__toolbar-btn:focus-visible {
+  outline: 2px solid var(--color-focus-ring, rgba(99, 102, 241, 0.6));
+  outline-offset: -2px;
+}
+.nova-editor__toolbar-btn[aria-pressed="true"] {
+  background: var(--color-bg-active, rgba(255, 255, 255, 0.1));
+  color: var(--color-text-primary, #e5e5e5);
+}
+.nova-editor__toolbar-sep {
+  width: 1px;
+  height: 20px;
+  background: var(--color-border, rgba(255, 255, 255, 0.08));
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+
+/* ── Body ── */
+.nova-editor__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.nova-editor__body--split {
+  flex-direction: row;
+}
+.nova-editor__body--write .nova-editor__pane-write {
+  flex: 1;
+}
+.nova-editor__body--write .nova-editor__pane-preview {
+  display: none;
+}
+.nova-editor__body--preview .nova-editor__pane-write {
+  display: none;
+}
+.nova-editor__body--preview .nova-editor__pane-preview {
+  flex: 1;
+}
+
+/* ── Write Pane ── */
+.nova-editor__pane-write {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+.nova-editor__line-numbers {
+  padding: 12px 0;
+  width: 44px;
+  flex-shrink: 0;
+  text-align: right;
+  font: 13px/1.6 "SF Mono", "Fira Code", "Cascadia Code", Menlo, Monaco, Consolas, monospace;
+  color: var(--color-text-tertiary, rgba(255, 255, 255, 0.25));
+  background: var(--color-bg-inset, rgba(0, 0, 0, 0.15));
+  border-right: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
+  user-select: none;
+  overflow: hidden;
+}
+.nova-editor__line-numbers span {
+  display: block;
+  padding-right: 8px;
+}
+.nova-editor__textarea {
+  flex: 1;
+  resize: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--color-text-primary, #e5e5e5);
+  font: 14px/1.6 "SF Mono", "Fira Code", "Cascadia Code", Menlo, Monaco, Consolas, monospace;
+  padding: 12px 16px;
+  tab-size: 2;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-y: auto;
+}
+.nova-editor__textarea::placeholder {
+  color: var(--color-text-tertiary, rgba(255, 255, 255, 0.25));
+}
+.nova-editor__textarea:focus {
+  box-shadow: inset 0 0 0 1px var(--color-focus-ring, rgba(99, 102, 241, 0.4));
+}
+
+/* ── Divider ── */
+.nova-editor__divider {
+  width: 1px;
+  background: var(--color-border, rgba(255, 255, 255, 0.08));
+  flex-shrink: 0;
+}
+
+/* ── Preview Pane ── */
+.nova-editor__pane-preview {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 20px;
+  min-width: 0;
+}
+
+/* ── Preview Typography ── */
+.nova-editor__preview h1,
+.nova-editor__preview h2,
+.nova-editor__preview h3,
+.nova-editor__preview h4,
+.nova-editor__preview h5,
+.nova-editor__preview h6 {
+  color: var(--color-text-primary, #e5e5e5);
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 1.4em;
+  margin-bottom: 0.6em;
+}
+.nova-editor__preview h1:first-child,
+.nova-editor__preview h2:first-child,
+.nova-editor__preview h3:first-child {
+  margin-top: 0;
+}
+.nova-editor__preview h1 { font-size: 1.75em; }
+.nova-editor__preview h2 { font-size: 1.4em; }
+.nova-editor__preview h3 { font-size: 1.15em; }
+.nova-editor__preview h4 { font-size: 1em; }
+.nova-editor__preview p {
+  margin: 0 0 0.8em 0;
+  line-height: 1.65;
+}
+.nova-editor__preview a {
+  color: var(--color-accent, #6366f1);
+  text-decoration: underline;
+  text-decoration-color: var(--color-accent-muted, rgba(99, 102, 241, 0.4));
+  text-underline-offset: 2px;
+}
+.nova-editor__preview a:hover {
+  text-decoration-color: var(--color-accent, #6366f1);
+}
+.nova-editor__preview strong { color: var(--color-text-primary, #e5e5e5); }
+.nova-editor__preview code {
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875em;
+  background: var(--color-bg-inset, rgba(255, 255, 255, 0.06));
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
+}
+.nova-editor__preview pre {
+  background: var(--color-bg-inset, rgba(0, 0, 0, 0.25));
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
+  border-radius: 6px;
+  padding: 14px 16px;
+  overflow-x: auto;
+  margin: 0 0 1em 0;
+}
+.nova-editor__preview pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.85em;
+  line-height: 1.6;
+}
+.nova-editor__preview blockquote {
+  border-left: 3px solid var(--color-accent-muted, rgba(99, 102, 241, 0.4));
+  margin: 0 0 1em 0;
+  padding: 0.4em 0 0.4em 16px;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.55));
+}
+.nova-editor__preview ul,
+.nova-editor__preview ol {
+  margin: 0 0 1em 0;
+  padding-left: 1.6em;
+}
+.nova-editor__preview ul { list-style: disc; }
+.nova-editor__preview ol { list-style: decimal; }
+.nova-editor__preview li {
+  margin-bottom: 0.3em;
+  line-height: 1.6;
+}
+.nova-editor__preview hr {
+  border: none;
+  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+  margin: 1.5em 0;
+}
+.nova-editor__preview img {
+  max-width: 100%;
+  border-radius: 6px;
+}
+.nova-editor__preview del {
+  color: var(--color-text-tertiary, rgba(255, 255, 255, 0.35));
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .nova-editor__body--split {
+    flex-direction: column;
+  }
+  .nova-editor__body--split .nova-editor__divider {
+    width: auto;
+    height: 1px;
+  }
+}
+
+/* ── Reduced Motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .nova-editor__toolbar-btn { transition: none; }
+}`;
+    document.head.appendChild(s);
+}
+// ── SVG Icon Helpers ────────────────────────────────────────────────
+const SVG_NS = 'http://www.w3.org/2000/svg';
+function svgIcon(paths, viewBox = '0 0 24 24', size = 16) {
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', String(size));
+    svg.setAttribute('height', String(size));
+    svg.setAttribute('viewBox', viewBox);
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+    for (const d of paths) {
+        const path = document.createElementNS(SVG_NS, 'path');
+        path.setAttribute('d', d);
+        svg.appendChild(path);
+    }
+    return svg;
+}
+function svgIconRaw(children, viewBox = '0 0 24 24', size = 16) {
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', String(size));
+    svg.setAttribute('height', String(size));
+    svg.setAttribute('viewBox', viewBox);
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+    children(svg);
+    return svg;
+}
+// ── Toolbar Icons ───────────────────────────────────────────────────
+function iconBold() {
+    return svgIconRaw((svg) => {
+        const p1 = document.createElementNS(SVG_NS, 'path');
+        p1.setAttribute('d', 'M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z');
+        const p2 = document.createElementNS(SVG_NS, 'path');
+        p2.setAttribute('d', 'M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z');
+        svg.appendChild(p1);
+        svg.appendChild(p2);
+    });
+}
+function iconItalic() {
+    return svgIconRaw((svg) => {
+        const l1 = document.createElementNS(SVG_NS, 'line');
+        l1.setAttribute('x1', '19');
+        l1.setAttribute('y1', '4');
+        l1.setAttribute('x2', '10');
+        l1.setAttribute('y2', '4');
+        const l2 = document.createElementNS(SVG_NS, 'line');
+        l2.setAttribute('x1', '14');
+        l2.setAttribute('y1', '20');
+        l2.setAttribute('x2', '5');
+        l2.setAttribute('y2', '20');
+        const l3 = document.createElementNS(SVG_NS, 'line');
+        l3.setAttribute('x1', '15');
+        l3.setAttribute('y1', '4');
+        l3.setAttribute('x2', '9');
+        l3.setAttribute('y2', '20');
+        svg.appendChild(l1);
+        svg.appendChild(l2);
+        svg.appendChild(l3);
+    });
+}
+function iconStrikethrough() {
+    return svgIconRaw((svg) => {
+        const p = document.createElementNS(SVG_NS, 'path');
+        p.setAttribute('d', 'M16 4H9a3 3 0 0 0-3 3v0a3 3 0 0 0 3 3h6a3 3 0 0 1 3 3v0a3 3 0 0 1-3 3H8');
+        const l = document.createElementNS(SVG_NS, 'line');
+        l.setAttribute('x1', '4');
+        l.setAttribute('y1', '12');
+        l.setAttribute('x2', '20');
+        l.setAttribute('y2', '12');
+        svg.appendChild(p);
+        svg.appendChild(l);
+    });
+}
+function iconHeading() {
+    return svgIconRaw((svg) => {
+        const l1 = document.createElementNS(SVG_NS, 'line');
+        l1.setAttribute('x1', '4');
+        l1.setAttribute('y1', '4');
+        l1.setAttribute('x2', '4');
+        l1.setAttribute('y2', '20');
+        const l2 = document.createElementNS(SVG_NS, 'line');
+        l2.setAttribute('x1', '18');
+        l2.setAttribute('y1', '4');
+        l2.setAttribute('x2', '18');
+        l2.setAttribute('y2', '20');
+        const l3 = document.createElementNS(SVG_NS, 'line');
+        l3.setAttribute('x1', '4');
+        l3.setAttribute('y1', '12');
+        l3.setAttribute('x2', '18');
+        l3.setAttribute('y2', '12');
+        svg.appendChild(l1);
+        svg.appendChild(l2);
+        svg.appendChild(l3);
+    });
+}
+function iconLink() {
+    return svgIcon([
+        'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
+        'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+    ]);
+}
+function iconImage() {
+    return svgIconRaw((svg) => {
+        const rect = document.createElementNS(SVG_NS, 'rect');
+        rect.setAttribute('x', '3');
+        rect.setAttribute('y', '3');
+        rect.setAttribute('width', '18');
+        rect.setAttribute('height', '18');
+        rect.setAttribute('rx', '2');
+        rect.setAttribute('ry', '2');
+        const circle = document.createElementNS(SVG_NS, 'circle');
+        circle.setAttribute('cx', '8.5');
+        circle.setAttribute('cy', '8.5');
+        circle.setAttribute('r', '1.5');
+        circle.setAttribute('fill', 'currentColor');
+        circle.setAttribute('stroke', 'none');
+        const poly = document.createElementNS(SVG_NS, 'polyline');
+        poly.setAttribute('points', '21 15 16 10 5 21');
+        svg.appendChild(rect);
+        svg.appendChild(circle);
+        svg.appendChild(poly);
+    });
+}
+function iconCode() {
+    return svgIconRaw((svg) => {
+        const p1 = document.createElementNS(SVG_NS, 'polyline');
+        p1.setAttribute('points', '16 18 22 12 16 6');
+        const p2 = document.createElementNS(SVG_NS, 'polyline');
+        p2.setAttribute('points', '8 6 2 12 8 18');
+        svg.appendChild(p1);
+        svg.appendChild(p2);
+    });
+}
+function iconQuote() {
+    return svgIconRaw((svg) => {
+        const l1 = document.createElementNS(SVG_NS, 'line');
+        l1.setAttribute('x1', '3');
+        l1.setAttribute('y1', '6');
+        l1.setAttribute('x2', '3');
+        l1.setAttribute('y2', '18');
+        l1.setAttribute('stroke-width', '3');
+        const l2 = document.createElementNS(SVG_NS, 'line');
+        l2.setAttribute('x1', '9');
+        l2.setAttribute('y1', '8');
+        l2.setAttribute('x2', '21');
+        l2.setAttribute('y2', '8');
+        const l3 = document.createElementNS(SVG_NS, 'line');
+        l3.setAttribute('x1', '9');
+        l3.setAttribute('y1', '12');
+        l3.setAttribute('x2', '18');
+        l3.setAttribute('y2', '12');
+        const l4 = document.createElementNS(SVG_NS, 'line');
+        l4.setAttribute('x1', '9');
+        l4.setAttribute('y1', '16');
+        l4.setAttribute('x2', '15');
+        l4.setAttribute('y2', '16');
+        svg.appendChild(l1);
+        svg.appendChild(l2);
+        svg.appendChild(l3);
+        svg.appendChild(l4);
+    });
+}
+function iconUnorderedList() {
+    return svgIconRaw((svg) => {
+        const items = [
+            ['10', '6', '21', '6'],
+            ['10', '12', '21', '12'],
+            ['10', '18', '21', '18'],
+        ];
+        for (const [x1, y1, x2, y2] of items) {
+            const l = document.createElementNS(SVG_NS, 'line');
+            l.setAttribute('x1', x1);
+            l.setAttribute('y1', y1);
+            l.setAttribute('x2', x2);
+            l.setAttribute('y2', y2);
+            svg.appendChild(l);
+        }
+        const dots = [['4', '6'], ['4', '12'], ['4', '18']];
+        for (const [cx, cy] of dots) {
+            const c = document.createElementNS(SVG_NS, 'circle');
+            c.setAttribute('cx', cx);
+            c.setAttribute('cy', cy);
+            c.setAttribute('r', '1');
+            c.setAttribute('fill', 'currentColor');
+            c.setAttribute('stroke', 'none');
+            svg.appendChild(c);
+        }
+    });
+}
+function iconOrderedList() {
+    return svgIconRaw((svg) => {
+        const items = [
+            ['12', '6', '21', '6'],
+            ['12', '12', '21', '12'],
+            ['12', '18', '21', '18'],
+        ];
+        for (const [x1, y1, x2, y2] of items) {
+            const l = document.createElementNS(SVG_NS, 'line');
+            l.setAttribute('x1', x1);
+            l.setAttribute('y1', y1);
+            l.setAttribute('x2', x2);
+            l.setAttribute('y2', y2);
+            svg.appendChild(l);
+        }
+        const text = document.createElementNS(SVG_NS, 'text');
+        text.setAttribute('x', '4');
+        text.setAttribute('y', '8');
+        text.setAttribute('font-size', '7');
+        text.setAttribute('fill', 'currentColor');
+        text.setAttribute('stroke', 'none');
+        text.setAttribute('font-family', 'sans-serif');
+        text.textContent = '1';
+        const text2 = document.createElementNS(SVG_NS, 'text');
+        text2.setAttribute('x', '4');
+        text2.setAttribute('y', '14');
+        text2.setAttribute('font-size', '7');
+        text2.setAttribute('fill', 'currentColor');
+        text2.setAttribute('stroke', 'none');
+        text2.setAttribute('font-family', 'sans-serif');
+        text2.textContent = '2';
+        const text3 = document.createElementNS(SVG_NS, 'text');
+        text3.setAttribute('x', '4');
+        text3.setAttribute('y', '20');
+        text3.setAttribute('font-size', '7');
+        text3.setAttribute('fill', 'currentColor');
+        text3.setAttribute('stroke', 'none');
+        text3.setAttribute('font-family', 'sans-serif');
+        text3.textContent = '3';
+        svg.appendChild(text);
+        svg.appendChild(text2);
+        svg.appendChild(text3);
+    });
+}
+function iconWrite() {
+    return svgIcon([
+        'M12 20h9',
+        'M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z',
+    ]);
+}
+function iconSplit() {
+    return svgIconRaw((svg) => {
+        const rect = document.createElementNS(SVG_NS, 'rect');
+        rect.setAttribute('x', '3');
+        rect.setAttribute('y', '3');
+        rect.setAttribute('width', '18');
+        rect.setAttribute('height', '18');
+        rect.setAttribute('rx', '2');
+        const line = document.createElementNS(SVG_NS, 'line');
+        line.setAttribute('x1', '12');
+        line.setAttribute('y1', '3');
+        line.setAttribute('x2', '12');
+        line.setAttribute('y2', '21');
+        svg.appendChild(rect);
+        svg.appendChild(line);
+    });
+}
+function iconPreview() {
+    return svgIconRaw((svg) => {
+        const p1 = document.createElementNS(SVG_NS, 'path');
+        p1.setAttribute('d', 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z');
+        const c = document.createElementNS(SVG_NS, 'circle');
+        c.setAttribute('cx', '12');
+        c.setAttribute('cy', '12');
+        c.setAttribute('r', '3');
+        svg.appendChild(p1);
+        svg.appendChild(c);
+    });
+}
+// ── Factory ─────────────────────────────────────────────────────────
+/** Create an interactive markdown editor. */
+export function createEditor(container, options = {}) {
+    const { value: initialValue = '', mode: initialMode = 'split', placeholder = 'Write markdown...', toolbar: showToolbar = true, lineNumbers = false, minHeight = '300px', maxHeight = 'none', onChange, onSave, } = options;
+    injectStyles();
+    let destroyed = false;
+    let currentMode = initialMode;
+    let debounceTimer;
+    // Listener bookkeeping for cleanup
+    const listeners = [];
+    function on(target, evt, fn, capture) {
+        target.addEventListener(evt, fn, capture);
+        listeners.push([target, evt, fn, capture]);
+    }
+    // ── Root Element ──────────────────────────────────────────────────
+    const root = document.createElement('div');
+    root.className = 'nova-editor';
+    root.setAttribute('role', 'group');
+    root.setAttribute('aria-label', 'Markdown editor');
+    root.style.minHeight = minHeight;
+    if (maxHeight !== 'none')
+        root.style.maxHeight = maxHeight;
+    // ── Toolbar ───────────────────────────────────────────────────────
+    let toolbarEl = null;
+    const modeButtons = new Map();
+    function createToolbarButton(label, icon, action, shortcut) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'nova-editor__toolbar-btn';
+        const title = shortcut ? `${label} (${shortcut})` : label;
+        btn.setAttribute('aria-label', title);
+        btn.setAttribute('title', title);
+        btn.appendChild(icon);
+        on(btn, 'click', (e) => {
+            e.preventDefault();
+            action();
+        });
+        return btn;
+    }
+    function createSeparator() {
+        const sep = document.createElement('span');
+        sep.className = 'nova-editor__toolbar-sep';
+        sep.setAttribute('role', 'separator');
+        return sep;
+    }
+    function createModeButton(label, icon, mode) {
+        const btn = createToolbarButton(label, icon, () => setMode(mode));
+        btn.setAttribute('aria-pressed', String(currentMode === mode));
+        modeButtons.set(mode, btn);
+        return btn;
+    }
+    if (showToolbar) {
+        toolbarEl = document.createElement('div');
+        toolbarEl.className = 'nova-editor__toolbar';
+        toolbarEl.setAttribute('role', 'toolbar');
+        toolbarEl.setAttribute('aria-label', 'Formatting');
+        // Formatting buttons
+        toolbarEl.appendChild(createToolbarButton('Bold', iconBold(), () => wrapSelection('**', '**'), 'Ctrl+B'));
+        toolbarEl.appendChild(createToolbarButton('Italic', iconItalic(), () => wrapSelection('*', '*'), 'Ctrl+I'));
+        toolbarEl.appendChild(createToolbarButton('Strikethrough', iconStrikethrough(), () => wrapSelection('~~', '~~')));
+        toolbarEl.appendChild(createSeparator());
+        toolbarEl.appendChild(createToolbarButton('Heading', iconHeading(), () => insertAtLineStart('## ')));
+        toolbarEl.appendChild(createToolbarButton('Link', iconLink(), () => insertLink(), 'Ctrl+K'));
+        toolbarEl.appendChild(createToolbarButton('Image', iconImage(), () => insertImage()));
+        toolbarEl.appendChild(createToolbarButton('Code', iconCode(), () => insertCode()));
+        toolbarEl.appendChild(createToolbarButton('Quote', iconQuote(), () => insertAtLineStart('> ')));
+        toolbarEl.appendChild(createToolbarButton('Unordered list', iconUnorderedList(), () => insertAtLineStart('- ')));
+        toolbarEl.appendChild(createToolbarButton('Ordered list', iconOrderedList(), () => insertAtLineStart('1. ')));
+        toolbarEl.appendChild(createSeparator());
+        // Mode buttons
+        toolbarEl.appendChild(createModeButton('Write', iconWrite(), 'write'));
+        toolbarEl.appendChild(createModeButton('Split', iconSplit(), 'split'));
+        toolbarEl.appendChild(createModeButton('Preview', iconPreview(), 'preview'));
+        root.appendChild(toolbarEl);
+    }
+    // ── Body ──────────────────────────────────────────────────────────
+    const body = document.createElement('div');
+    body.className = 'nova-editor__body';
+    applyModeClass();
+    // ── Write Pane ────────────────────────────────────────────────────
+    const writePane = document.createElement('div');
+    writePane.className = 'nova-editor__pane-write';
+    // Line numbers gutter
+    let gutterEl = null;
+    if (lineNumbers) {
+        gutterEl = document.createElement('div');
+        gutterEl.className = 'nova-editor__line-numbers';
+        gutterEl.setAttribute('aria-hidden', 'true');
+        writePane.appendChild(gutterEl);
+    }
+    const textarea = document.createElement('textarea');
+    textarea.className = 'nova-editor__textarea';
+    textarea.value = initialValue;
+    textarea.placeholder = placeholder;
+    textarea.setAttribute('aria-label', 'Markdown input');
+    textarea.setAttribute('spellcheck', 'true');
+    writePane.appendChild(textarea);
+    // ── Divider ───────────────────────────────────────────────────────
+    const divider = document.createElement('div');
+    divider.className = 'nova-editor__divider';
+    // ── Preview Pane ──────────────────────────────────────────────────
+    const previewPane = document.createElement('div');
+    previewPane.className = 'nova-editor__pane-preview';
+    const previewContent = document.createElement('div');
+    previewContent.className = 'nova-editor__preview';
+    previewContent.setAttribute('role', 'document');
+    previewContent.setAttribute('aria-label', 'Markdown preview');
+    previewPane.appendChild(previewContent);
+    body.appendChild(writePane);
+    body.appendChild(divider);
+    body.appendChild(previewPane);
+    root.appendChild(body);
+    container.appendChild(root);
+    // ── Internal Helpers ──────────────────────────────────────────────
+    function applyModeClass() {
+        body.className = `nova-editor__body nova-editor__body--${currentMode}`;
+        // Toggle divider visibility
+        divider.style.display = currentMode === 'split' ? '' : 'none';
+    }
+    function updateModeButtons() {
+        for (const [mode, btn] of modeButtons) {
+            btn.setAttribute('aria-pressed', String(currentMode === mode));
+        }
+    }
+    function updatePreview() {
+        if (currentMode === 'write')
+            return;
+        // Rendered from trusted internal Nova markdown parser
+        previewContent.innerHTML = parse(textarea.value);
+    }
+    function updateLineNumbers() {
+        if (!gutterEl)
+            return;
+        const count = textarea.value.split('\n').length;
+        // Clear existing numbers
+        while (gutterEl.firstChild)
+            gutterEl.removeChild(gutterEl.firstChild);
+        for (let i = 1; i <= count; i++) {
+            const span = document.createElement('span');
+            span.textContent = String(i);
+            gutterEl.appendChild(span);
+        }
+    }
+    function syncGutterScroll() {
+        if (!gutterEl)
+            return;
+        gutterEl.scrollTop = textarea.scrollTop;
+    }
+    function schedulePreview() {
+        if (debounceTimer !== undefined)
+            clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(updatePreview, 150);
+    }
+    function getLineStart(pos) {
+        const val = textarea.value;
+        const lineStart = val.lastIndexOf('\n', pos - 1);
+        return lineStart + 1;
+    }
+    function getCurrentLine(pos) {
+        const val = textarea.value;
+        const start = getLineStart(pos);
+        const end = val.indexOf('\n', pos);
+        return val.substring(start, end === -1 ? val.length : end);
+    }
+    // ── Editing Operations ────────────────────────────────────────────
+    function wrapSelection(before, after) {
+        if (destroyed)
+            return;
+        textarea.focus();
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const val = textarea.value;
+        const selected = val.substring(start, end);
+        const replacement = before + selected + after;
+        textarea.value = val.substring(0, start) + replacement + val.substring(end);
+        // Select the inner text (without the wrapping markers)
+        textarea.selectionStart = start + before.length;
+        textarea.selectionEnd = start + before.length + selected.length;
+        triggerChange();
+    }
+    function insertAtLineStart(prefix) {
+        if (destroyed)
+            return;
+        textarea.focus();
+        const start = textarea.selectionStart;
+        const val = textarea.value;
+        const lineStart = getLineStart(start);
+        textarea.value = val.substring(0, lineStart) + prefix + val.substring(lineStart);
+        textarea.selectionStart = start + prefix.length;
+        textarea.selectionEnd = start + prefix.length;
+        triggerChange();
+    }
+    function insertLink() {
+        if (destroyed)
+            return;
+        textarea.focus();
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const val = textarea.value;
+        const selected = val.substring(start, end);
+        if (selected) {
+            const replacement = `[${selected}](url)`;
+            textarea.value = val.substring(0, start) + replacement + val.substring(end);
+            // Select "url"
+            textarea.selectionStart = start + selected.length + 3;
+            textarea.selectionEnd = start + selected.length + 6;
+        }
+        else {
+            const replacement = '[text](url)';
+            textarea.value = val.substring(0, start) + replacement + val.substring(end);
+            // Select "text"
+            textarea.selectionStart = start + 1;
+            textarea.selectionEnd = start + 5;
+        }
+        triggerChange();
+    }
+    function insertImage() {
+        if (destroyed)
+            return;
+        textarea.focus();
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const val = textarea.value;
+        const selected = val.substring(start, end);
+        const alt = selected || 'alt';
+        const replacement = `![${alt}](url)`;
+        textarea.value = val.substring(0, start) + replacement + val.substring(end);
+        // Select "url"
+        textarea.selectionStart = start + alt.length + 4;
+        textarea.selectionEnd = start + alt.length + 7;
+        triggerChange();
+    }
+    function insertCode() {
+        if (destroyed)
+            return;
+        textarea.focus();
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const val = textarea.value;
+        const selected = val.substring(start, end);
+        // If selection spans multiple lines, use fenced code block
+        if (selected.includes('\n')) {
+            const replacement = '```\n' + selected + '\n```';
+            textarea.value = val.substring(0, start) + replacement + val.substring(end);
+            textarea.selectionStart = start + 4;
+            textarea.selectionEnd = start + 4 + selected.length;
+        }
+        else {
+            wrapSelection('`', '`');
+            return; // wrapSelection already calls triggerChange
+        }
+        triggerChange();
+    }
+    function insertText(text) {
+        if (destroyed)
+            return;
+        textarea.focus();
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const val = textarea.value;
+        textarea.value = val.substring(0, start) + text + val.substring(end);
+        textarea.selectionStart = start + text.length;
+        textarea.selectionEnd = start + text.length;
+        triggerChange();
+    }
+    function triggerChange() {
+        updateLineNumbers();
+        schedulePreview();
+        onChange?.(textarea.value);
+    }
+    // ── Event Handlers ────────────────────────────────────────────────
+    on(textarea, 'input', () => {
+        triggerChange();
+    });
+    on(textarea, 'scroll', () => {
+        syncGutterScroll();
+    });
+    // Tab key: insert 2 spaces
+    on(textarea, 'keydown', ((e) => {
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            insertText('  ');
+            return;
+        }
+        // Enter: auto-continue lists
+        if (e.key === 'Enter') {
+            const pos = textarea.selectionStart;
+            const line = getCurrentLine(pos);
+            // Unordered list continuation
+            const ulMatch = line.match(/^(\s*[-*+]\s)/);
+            if (ulMatch) {
+                // If the line is just the prefix (empty item), remove it and break out
+                if (line.trim() === '-' || line.trim() === '*' || line.trim() === '+') {
+                    e.preventDefault();
+                    const lineStart = getLineStart(pos);
+                    const lineEnd = textarea.value.indexOf('\n', pos);
+                    const end = lineEnd === -1 ? textarea.value.length : lineEnd;
+                    textarea.value = textarea.value.substring(0, lineStart) + textarea.value.substring(end);
+                    textarea.selectionStart = lineStart;
+                    textarea.selectionEnd = lineStart;
+                    triggerChange();
+                    return;
+                }
+                e.preventDefault();
+                insertText('\n' + ulMatch[1]);
+                return;
+            }
+            // Ordered list continuation
+            const olMatch = line.match(/^(\s*)(\d+)\.\s/);
+            if (olMatch) {
+                // If the line is just the number (empty item), remove it and break out
+                if (line.trim().match(/^\d+\.$/)) {
+                    e.preventDefault();
+                    const lineStart = getLineStart(pos);
+                    const lineEnd = textarea.value.indexOf('\n', pos);
+                    const end = lineEnd === -1 ? textarea.value.length : lineEnd;
+                    textarea.value = textarea.value.substring(0, lineStart) + textarea.value.substring(end);
+                    textarea.selectionStart = lineStart;
+                    textarea.selectionEnd = lineStart;
+                    triggerChange();
+                    return;
+                }
+                e.preventDefault();
+                const nextNum = parseInt(olMatch[2], 10) + 1;
+                insertText('\n' + olMatch[1] + nextNum + '. ');
+                return;
+            }
+        }
+    }));
+    // Keyboard shortcuts
+    on(textarea, 'keydown', ((e) => {
+        const mod = e.metaKey || e.ctrlKey;
+        if (!mod)
+            return;
+        if (e.key === 'b') {
+            e.preventDefault();
+            wrapSelection('**', '**');
+        }
+        else if (e.key === 'i') {
+            e.preventDefault();
+            wrapSelection('*', '*');
+        }
+        else if (e.key === 'k') {
+            e.preventDefault();
+            insertLink();
+        }
+        else if (e.key === 's') {
+            e.preventDefault();
+            onSave?.(textarea.value);
+        }
+        else if (e.key === 'p' && e.shiftKey) {
+            e.preventDefault();
+            setMode(currentMode === 'preview' ? 'write' : 'preview');
+        }
+    }));
+    // Also handle Ctrl+Shift+P and Ctrl+S from anywhere in the editor
+    on(root, 'keydown', ((e) => {
+        const mod = e.metaKey || e.ctrlKey;
+        if (!mod)
+            return;
+        if (e.key === 'p' && e.shiftKey) {
+            e.preventDefault();
+            setMode(currentMode === 'preview' ? 'write' : 'preview');
+        }
+        if (e.key === 's' && !e.shiftKey) {
+            e.preventDefault();
+            onSave?.(textarea.value);
+        }
+    }));
+    // ── Mode Management ───────────────────────────────────────────────
+    function setMode(mode) {
+        if (destroyed)
+            return;
+        currentMode = mode;
+        applyModeClass();
+        updateModeButtons();
+        updatePreview();
+        updateLineNumbers();
+    }
+    // ── Initial Render ────────────────────────────────────────────────
+    updatePreview();
+    updateLineNumbers();
+    // ── Public Instance ───────────────────────────────────────────────
+    const instance = {
+        getValue() {
+            return textarea.value;
+        },
+        setValue(value) {
+            if (destroyed)
+                return;
+            textarea.value = value;
+            triggerChange();
+        },
+        getMode() {
+            return currentMode;
+        },
+        setMode,
+        focus() {
+            if (destroyed)
+                return;
+            textarea.focus();
+        },
+        insertText(text) {
+            insertText(text);
+        },
+        wrapSelection(before, after) {
+            wrapSelection(before, after);
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            if (debounceTimer !== undefined)
+                clearTimeout(debounceTimer);
+            for (const [target, evt, fn, capture] of listeners) {
+                target.removeEventListener(evt, fn, capture);
+            }
+            listeners.length = 0;
+            root.remove();
+        },
+    };
+    return instance;
+}
+//# sourceMappingURL=editor.js.map