npm - @a83/orbiter-admin - Versions diffs - 0.2.0 - Mend

@a83/orbiter-admin 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/README.md +115 -0
package/package.json +33 -0
package/public/admin-utils.js +302 -0
package/public/build.html +129 -0
package/public/collections.html +100 -0
package/public/dashboard.html +478 -0
package/public/editor.html +1569 -0
package/public/entries.html +367 -0
package/public/favicon.svg +6 -0
package/public/import.html +514 -0
package/public/login.html +76 -0
package/public/media.html +233 -0
package/public/router.js +142 -0
package/public/schema.html +366 -0
package/public/search.js +209 -0
package/public/settings.html +688 -0
package/public/sidebar.js +90 -0
package/public/style.css +1020 -0
package/public/theme.js +63 -0
package/public/users.html +192 -0
package/src/index.js +4 -0
package/src/middleware/auth.js +20 -0
package/src/routes/account.js +41 -0
package/src/routes/auth.js +55 -0
package/src/routes/build.js +25 -0
package/src/routes/collections.js +65 -0
package/src/routes/entries.js +103 -0
package/src/routes/github.js +133 -0
package/src/routes/import.js +120 -0
package/src/routes/info.js +19 -0
package/src/routes/media.js +95 -0
package/src/routes/meta.js +54 -0
package/src/routes/search.js +62 -0
package/src/routes/users.js +46 -0
package/src/server.js +85 -0
package/src/wp-importer.js +299 -0

package/public/editor.html ADDED Viewed

@@ -0,0 +1,1569 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Orbiter Admin — Editor</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Space+Grotesk:wght@300;400;500;600&family=Noto+Serif+JP:wght@200;300&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/style.css" />
+  <script src="/theme.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script>
+  <style>
+    html,body,.app { height:100%; overflow:hidden; }
+    .app { display:flex; flex-direction:column; }
+    .editor-shell { display:grid; grid-template-columns:1fr 280px; flex:1; overflow:hidden; }
+    .editor-shell.mode-split   { grid-template-columns:1fr 1fr 280px; }
+    .editor-shell.mode-preview { grid-template-columns:0   1fr 280px; }
+    /* Main writing area */
+    .editor-main { display:flex; flex-direction:column; overflow:hidden; background:var(--bg0); }
+    /* Toolbar */
+    .editor-toolbar { display:flex; align-items:center; gap:1px; padding:0 20px; height:40px; border-bottom:1px solid var(--line); background:var(--bg2); flex-shrink:0; }
+    .tool-group { display:flex; align-items:center; gap:3px; }
+    .tool-btn { height:26px; min-width:26px; padding:0 7px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:10px; cursor:pointer; transition:all .12s; border-radius:4px; }
+    .tool-btn:hover { color:var(--heading); background:var(--bg3); border-color:var(--mid); }
+    .tool-btn.active { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
+    .tool-sep { width:1px; height:16px; background:var(--line); margin:0 6px; flex-shrink:0; }
+    .view-toggle { display:flex; gap:3px; margin-left:0; }
+    .view-btn { height:24px; padding:0 10px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.06em; cursor:pointer; transition:all .12s; }
+    .view-btn:hover { color:var(--text); border-color:var(--mid); }
+    .view-btn.active { background:var(--gold); color:var(--bg0); border-color:var(--gold); }
+    /* Writing page */
+    .editor-scroll { flex:1; overflow-y:auto; }
+    .editor-page { max-width:680px; margin:0 auto; padding:48px 40px 120px; }
+    .editor-title-input { width:100%; background:transparent; border:none; outline:none; font-family:var(--serif); font-weight:200; font-size:32px; color:var(--heading); letter-spacing:.02em; line-height:1.2; margin-bottom:8px; resize:none; overflow:hidden; }
+    .editor-title-input::placeholder { color:var(--line); }
+    .editor-slug-line { font-size:10px; color:var(--muted); margin-bottom:32px; padding-bottom:14px; border-bottom:1px solid var(--line); }
+    .editor-slug-line span { color:var(--accent); }
+    .word-count { font-size:10px; color:var(--muted); margin-top:28px; padding-top:12px; border-top:1px solid var(--line2); }
+    /* Block editor */
+    .be-editor { min-height:400px; cursor:text; }
+    .be-block { outline:none; font-family:var(--serif); font-weight:300; font-size:16px; color:var(--text); line-height:2; letter-spacing:.01em; padding:1px 0; min-height:1.6em; position:relative; word-break:break-word; }
+    .be-block:focus { outline:none; }
+    .be-block:empty::before { content:attr(data-ph); color:var(--line); pointer-events:none; position:absolute; }
+    .be-block[data-type="h1"] { font-size:26px; color:var(--heading); line-height:1.3; padding:4px 0 2px; font-family:var(--serif); font-weight:200; }
+    .be-block[data-type="h2"] { font-size:20px; color:var(--heading); line-height:1.4; padding:3px 0 2px; font-family:var(--serif); font-weight:200; }
+    .be-block[data-type="h3"] { font-size:13px; color:var(--text); line-height:1.6; padding:2px 0; font-family:var(--mono); }
+    .be-block[data-type="blockquote"] { border-left:2px solid var(--gold); padding:2px 0 2px 16px; color:var(--mid); font-style:italic; }
+    .be-block[data-type="pre"] { font-family:var(--mono); font-size:12px; background:var(--bg1); border:1px solid var(--line); padding:14px 16px; white-space:pre-wrap; line-height:1.6; margin:4px 0; }
+    .be-block[data-type="ul"] { padding-left:20px; }
+    .be-block[data-type="ul"]::before { content:"·"; position:absolute; left:6px; color:var(--muted); }
+    .be-block[data-type="ol"] { padding-left:20px; }
+    .be-block[data-type="hr"] { height:1px; min-height:1px; border:none; border-top:1px solid var(--line); margin:12px 0; padding:0; pointer-events:none; }
+    .be-block code { font-family:var(--mono); font-size:12px; background:var(--bg3); padding:1px 5px; }
+    .be-block strong { font-weight:600; color:var(--heading); }
+    .be-block em { color:var(--mid); font-style:italic; }
+    /* Saved indicator */
+    .saved-flash { background:var(--jade-bg); border-bottom:1px solid rgba(45,139,106,.15); padding:6px 20px; font-size:10px; color:var(--jade); display:flex; align-items:center; gap:6px; flex-shrink:0; }
+    .saved-flash::before { content:"✓"; }
+    /* Preview panel */
+    .preview-panel { display:none; border-left:1px solid var(--line); flex-direction:column; overflow:hidden; background:var(--bg2); }
+    .editor-shell.mode-split .preview-panel,
+    .editor-shell.mode-preview .preview-panel { display:flex; }
+    .preview-src-bar { display:flex; align-items:center; gap:4px; padding:6px 12px; border-bottom:1px solid var(--line); background:var(--bg1); flex-shrink:0; }
+    .src-btn { height:22px; padding:0 10px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--muted); font-family:var(--mono); font-size:9px; cursor:pointer; transition:all .12s; }
+    .src-btn:hover { color:var(--text); border-color:var(--mid); }
+    .src-btn.active { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
+    .preview-scroll { flex:1; overflow-y:auto; padding:36px 40px 80px; }
+    .md-preview h1 { font-family:var(--serif); font-weight:200; font-size:28px; color:var(--heading); margin:0 0 16px; }
+    .md-preview h2 { font-family:var(--serif); font-weight:200; font-size:22px; color:var(--heading); margin:28px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line); }
+    .md-preview h3 { font-family:var(--mono); font-size:13px; color:var(--text); margin:20px 0 8px; }
+    .md-preview p  { font-family:var(--serif); font-size:15px; color:var(--text); line-height:1.9; margin:0 0 16px; }
+    .md-preview blockquote { border-left:2px solid var(--gold); padding:4px 16px; margin:16px 0; color:var(--mid); font-style:italic; }
+    .md-preview code { font-family:var(--mono); font-size:12px; background:var(--bg3); padding:1px 5px; }
+    .md-preview pre { background:var(--bg1); border:1px solid var(--line); padding:16px; margin:16px 0; }
+    .md-preview strong { font-weight:600; color:var(--heading); }
+    .md-preview ul,.md-preview ol { padding-left:20px; margin:0 0 16px; }
+    .md-preview li { font-family:var(--serif); font-size:15px; line-height:1.9; }
+    .md-preview hr { border:none; border-top:1px solid var(--line); margin:28px 0; }
+    .md-preview-title { font-family:var(--serif); font-weight:200; font-size:30px; color:var(--heading); margin-bottom:6px; }
+    .md-preview-slug { font-size:10px; color:var(--muted); margin-bottom:28px; padding-bottom:16px; border-bottom:1px solid var(--line); }
+    .md-preview-slug span { color:var(--accent); }
+    .preview-iframe { flex:1; border:none; width:100%; }
+    /* Meta panel */
+    .meta-panel { background:var(--bg1); border-left:1px solid var(--line); display:flex; flex-direction:column; overflow-y:auto; width:280px; flex-shrink:0; }
+    .meta-section { padding:14px 16px; border-bottom:1px solid var(--line); }
+    .meta-section:last-child { border-bottom:none; }
+    .meta-label { font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
+    .meta-field { margin-bottom:10px; }
+    .meta-field:last-child { margin-bottom:0; }
+    .field-label { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
+    .field-readonly { font-size:11px; color:var(--muted); padding:6px 0; }
+    /* Status */
+    .status-bar { display:flex; align-items:center; gap:8px; padding:8px 0; margin-bottom:10px; }
+    .status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
+    .status-dot.published { background:var(--jade); }
+    .status-dot.draft { background:var(--gold); }
+    .status-lbl { font-size:11px; }
+    .status-lbl.published { color:var(--jade); }
+    .status-lbl.draft { color:var(--gold); }
+    .btn-publish { display:block; width:100%; padding:9px; background:var(--gold); border:none; color:var(--bg0); font-family:var(--mono); font-size:10px; letter-spacing:.12em; cursor:pointer; transition:background .15s; margin-bottom:5px; border-radius:var(--radius); }
+    .btn-publish:hover { background:#7a5520; }
+    .btn-draft { display:block; width:100%; padding:8px; background:transparent; border:1px solid var(--line); color:var(--mid); font-family:var(--mono); font-size:10px; cursor:pointer; transition:all .12s; border-radius:var(--radius); }
+    .btn-draft:hover { border-color:var(--mid); color:var(--text); }
+    /* Schema fields in sidebar */
+    .field-input,.field-select { width:100%; background:var(--bg0); border:1px solid var(--line); padding:6px 8px; color:var(--heading); font-family:var(--mono); font-size:11px; outline:none; appearance:none; transition:border-color .15s; border-radius:var(--radius); box-sizing:border-box; }
+    .field-input:focus,.field-select:focus { border-color:var(--accent); }
+    .media-drop-zone { border:1px dashed var(--line); background:var(--bg0); height:72px; cursor:pointer; transition:border-color .12s,background .12s; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; border-radius:var(--radius); margin-top:5px; }
+    .media-drop-zone:hover { border-color:var(--gold); background:var(--gold-bg); }
+    .media-drop-zone.has-image { border-style:solid; }
+    .media-drop-zone img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
+    .media-drop-label { font-size:9px; color:var(--muted); letter-spacing:.08em; position:relative; z-index:1; }
+    .media-drop-zone.has-image .media-drop-label { display:none; }
+    .weekday-grid { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
+    .wd-btn { height:26px; min-width:32px; padding:0 4px; background:var(--bg0); border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:9px; cursor:pointer; transition:all .1s; border-radius:2px; }
+    .wd-btn.active { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
+    .tag-input { width:100%; background:var(--bg0); border:1px solid var(--line); padding:6px 8px; color:var(--heading); font-family:var(--mono); font-size:11px; outline:none; transition:border-color .15s; border-radius:var(--radius); box-sizing:border-box; }
+    .tag-input:focus { border-color:var(--accent); }
+    .tag-preview { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
+    .tag-chip { font-size:9px; padding:2px 6px; background:var(--accent-bg); color:var(--accent); border:1px solid rgba(90,122,240,.2); border-radius:2px; }
+    .rel-picker { display:flex; flex-direction:column; gap:4px; }
+    .rel-search { width:100%; background:var(--bg0); border:1px solid var(--line); padding:5px 8px; color:var(--heading); font-family:var(--mono); font-size:11px; outline:none; transition:border-color .15s; border-radius:var(--radius); box-sizing:border-box; }
+    .rel-search:focus { border-color:var(--accent); }
+    .rel-list { max-height:140px; overflow-y:auto; border:1px solid var(--line); background:var(--bg0); border-radius:var(--radius); }
+    .rel-item { display:flex; align-items:center; gap:6px; padding:5px 8px; cursor:pointer; border-bottom:1px solid var(--line2); }
+    .rel-item:last-child { border-bottom:none; }
+    .rel-item:hover { background:var(--line2); }
+    .rel-item input[type=checkbox] { display:none; }
+    .rel-check { width:13px; height:13px; flex-shrink:0; border:1px solid var(--line); background:var(--bg0); display:flex; align-items:center; justify-content:center; font-size:8px; color:transparent; transition:all .12s; }
+    .rel-item:has(input:checked) .rel-check { background:var(--accent); border-color:var(--accent); color:var(--bg0); }
+    .rel-name { font-size:11px; color:var(--text); }
+    .rel-selected { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:4px; min-height:18px; }
+    .rel-tag { font-size:9px; padding:2px 6px; background:var(--accent-bg); color:var(--accent); border:1px solid rgba(90,122,240,.2); border-radius:2px; }
+    /* Version history */
+    .version-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--line2); }
+    .version-row:last-child { border-bottom:none; }
+    .v-dot { width:6px; height:6px; background:var(--line); border-radius:50%; flex-shrink:0; }
+    .v-dot.cur { background:var(--gold); }
+    .v-hash { font-size:10px; color:var(--mid); font-family:var(--mono); flex:1; }
+    .v-time { font-size:9px; color:var(--muted); }
+    /* Block picker */
+    .block-picker { position:fixed; z-index:9999; width:220px; background:var(--bg2); border:1px solid var(--line); box-shadow:0 4px 16px rgba(0,0,0,.12); border-radius:2px; overflow:hidden; display:none; font-family:var(--mono); }
+    .bp-header { padding:7px 12px; border-bottom:1px solid var(--line); font-size:10px; color:var(--muted); letter-spacing:.06em; }
+    .bp-list { max-height:240px; overflow-y:auto; }
+    .bp-item { display:flex; align-items:center; gap:10px; padding:7px 12px; cursor:pointer; }
+    .bp-item:hover,.bp-item.active { background:var(--accent-bg); }
+    .bp-icon { width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:var(--bg3); border:1px solid var(--line); font-size:10px; flex-shrink:0; }
+    .bp-label { font-size:11px; color:var(--text); flex:1; }
+    .bp-hint { font-size:9px; color:var(--muted); }
+    /* Autosave indicator */
+    #autosave-indicator { font-size:10px; color:var(--muted); padding:0 12px 0 8px; border-left:1px solid var(--line); margin-left:8px; }
+    /* SEO char counter */
+    .seo-counter { font-size:9px; float:right; color:var(--muted); transition:color .12s; }
+    .seo-counter.ok { color:var(--jade); }
+    .seo-counter.warn { color:var(--gold); }
+    .seo-counter.over { color:var(--red); }
+    /* ── Image blocks ───────────────────────────────────────────── */
+    .be-block[data-type="image"] { position:relative; min-height:auto; padding:6px 0; line-height:1; cursor:default; user-select:none; outline:none; }
+    .be-block[data-type="image"] > .be-img { display:block; max-width:100%; border-radius:6px; border:2px solid transparent; transition:border-color .15s; }
+    .be-block[data-type="image"].img-sel > .be-img { border-color:var(--accent); }
+    .be-block[data-type="image"][data-align="left"]  { float:left;  max-width:48%; margin:4px 20px 12px 0; }
+    .be-block[data-type="image"][data-align="right"] { float:right; max-width:48%; margin:4px 0 12px 20px; }
+    .be-block[data-type="image"][data-align="center"] { clear:both; }
+    .be-block[data-type="image"][data-align="center"] > .be-img { margin:0 auto; }
+    .be-block[data-type="image"][data-align="full"]   { clear:both; }
+    .be-block[data-type="image"][data-align="full"]   > .be-img { width:100%; max-width:100%; }
+    .be-img-ctrl {
+      position:absolute; top:10px; left:50%; transform:translateX(-50%);
+      display:flex; align-items:center; gap:2px;
+      background:var(--bg2); border:1px solid var(--mid); border-radius:6px;
+      padding:3px 4px; box-shadow:0 4px 14px rgba(0,0,0,.35);
+      z-index:20; opacity:0; pointer-events:none; transition:opacity .15s; white-space:nowrap;
+    }
+    .be-block[data-type="image"].img-sel .be-img-ctrl { opacity:1; pointer-events:auto; }
+    .img-ab {
+      height:22px; min-width:28px; padding:0 6px;
+      background:transparent; border:1px solid transparent; border-radius:3px;
+      color:var(--muted); font-size:9px; font-family:var(--mono);
+      cursor:pointer; transition:all .1s;
+      display:flex; align-items:center; justify-content:center; gap:3px;
+    }
+    .img-ab:hover { background:var(--bg3); color:var(--text); border-color:var(--line); }
+    .img-ab.on  { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
+    .img-ab.del:hover { background:var(--red); color:#fff; border-color:var(--red); }
+    .img-ctrl-sep { width:1px; height:14px; background:var(--line); margin:0 2px; }
+    .be-img-cap {
+      display:block; width:100%; margin-top:5px;
+      background:transparent; border:none; border-bottom:1px dashed transparent;
+      color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.02em;
+      padding:2px 0; outline:none; text-align:center; transition:border-color .12s; box-sizing:border-box;
+    }
+    .be-img-cap:focus { border-color:var(--line); color:var(--text); }
+    .be-block[data-type="image"].img-sel .be-img-cap { border-color:var(--line2); }
+    /* ── Image picker sheet ──────────────────────────────────────── */
+    .img-pick-overlay {
+      position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
+      z-index:8000; display:none; align-items:flex-end;
+    }
+    .img-pick-overlay.open { display:flex; }
+    .img-pick-sheet {
+      width:100%; max-height:64vh;
+      background:var(--bg1); border-top:1px solid var(--mid);
+      border-radius:12px 12px 0 0; display:flex; flex-direction:column; overflow:hidden;
+    }
+    .img-pick-head {
+      display:flex; align-items:center; gap:8px; padding:10px 16px;
+      border-bottom:1px solid var(--line); background:var(--bg2); flex-shrink:0;
+    }
+    .img-pick-title { font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; flex:1; }
+    .img-pick-upload {
+      height:26px; padding:0 12px; background:var(--accent-bg); border:1px solid var(--accent);
+      color:var(--accent); font-family:var(--mono); font-size:10px; border-radius:4px; cursor:pointer; transition:background .12s;
+    }
+    .img-pick-upload:hover { background:rgba(90,122,240,.2); }
+    .img-pick-close {
+      width:26px; height:26px; background:transparent; border:1px solid var(--line);
+      border-radius:4px; color:var(--muted); font-size:16px; cursor:pointer;
+      display:flex; align-items:center; justify-content:center; line-height:1;
+    }
+    .img-pick-close:hover { color:var(--text); border-color:var(--mid); }
+    .img-pick-body { flex:1; overflow-y:auto; padding:12px 16px 24px; }
+    .img-pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
+    .img-pick-thumb {
+      aspect-ratio:4/3; border:1px solid var(--line); border-radius:6px;
+      overflow:hidden; cursor:pointer; position:relative; background:var(--bg0);
+      transition:border-color .12s, transform .1s;
+    }
+    .img-pick-thumb:hover { border-color:var(--accent); transform:scale(1.03); }
+    .img-pick-thumb img { width:100%; height:100%; object-fit:cover; }
+    .img-pick-name {
+      position:absolute; bottom:0; left:0; right:0;
+      padding:3px 6px; background:rgba(0,0,0,.6);
+      font-size:9px; color:rgba(255,255,255,.75);
+      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
+    }
+    .img-pick-empty { padding:40px; text-align:center; font-size:12px; color:var(--muted); }
+    .img-pick-tabs { display:flex; gap:0; border-bottom:1px solid var(--line); flex-shrink:0; }
+    .img-pick-tab { flex:1; padding:8px; background:transparent; border:none; font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:all .12s; border-bottom:2px solid transparent; margin-bottom:-1px; }
+    .img-pick-tab:hover { color:var(--text); }
+    .img-pick-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
+    .img-pick-pane { display:none; flex:1; overflow-y:auto; }
+    .img-pick-pane.active { display:block; }
+    .img-url-pane { padding:16px; display:flex; flex-direction:column; gap:10px; }
+    .img-url-inp { width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--text); font-family:var(--mono); font-size:11px; padding:8px 10px; border-radius:4px; box-sizing:border-box; }
+    .img-url-inp:focus { outline:none; border-color:var(--accent); }
+    .img-url-hint { font-size:10px; color:var(--muted); line-height:1.6; }
+    .img-url-hint strong { color:var(--text); font-weight:500; }
+    .img-url-btn { align-self:flex-end; padding:6px 16px; background:var(--accent-bg); border:1px solid var(--accent); color:var(--accent); font-family:var(--mono); font-size:10px; border-radius:4px; cursor:pointer; transition:all .12s; }
+    .img-url-btn:hover { background:rgba(90,122,240,.25); }
+    .img-url-btn:disabled { opacity:.5; cursor:default; }
+    .img-url-status { font-size:10px; color:var(--muted); min-height:14px; }
+    /* ── Video blocks ───────────────────────────────────────────── */
+    .be-block[data-type="video"] {
+      position:relative; min-height:auto; padding:4px 0;
+      line-height:1; cursor:default; user-select:none; outline:none; clear:both;
+    }
+    .be-video-wrap {
+      position:relative; width:100%; padding-bottom:56.25%; /* 16:9 */
+      border-radius:8px; overflow:hidden;
+      border:2px solid transparent; transition:border-color .15s; background:var(--bg1);
+    }
+    .be-block[data-type="video"].vid-sel .be-video-wrap { border-color:var(--accent); }
+    .be-video-wrap iframe, .be-video-wrap video {
+      position:absolute; inset:0; width:100%; height:100%; border:none; border-radius:6px;
+    }
+    .be-video-overlay {
+      position:absolute; inset:0; cursor:default; z-index:5; border-radius:6px;
+    }
+    .be-block[data-type="video"].vid-sel .be-video-overlay { pointer-events:none; }
+    .be-vid-ctrl {
+      position:absolute; top:8px; left:50%; transform:translateX(-50%);
+      display:flex; align-items:center; gap:2px;
+      background:var(--bg2); border:1px solid var(--mid); border-radius:6px;
+      padding:3px 4px; box-shadow:0 4px 14px rgba(0,0,0,.35);
+      z-index:20; opacity:0; pointer-events:none; transition:opacity .15s; white-space:nowrap;
+    }
+    .be-block[data-type="video"].vid-sel .be-vid-ctrl { opacity:1; pointer-events:auto; }
+    .be-vid-url {
+      display:block; width:100%; margin-top:5px;
+      background:transparent; border:none; border-bottom:1px dashed transparent;
+      color:var(--muted); font-family:var(--mono); font-size:10px;
+      padding:2px 0; outline:none; text-align:center; transition:border-color .12s; box-sizing:border-box;
+    }
+    .be-vid-url:focus { border-color:var(--line); color:var(--text); }
+    .be-block[data-type="video"].vid-sel .be-vid-url { border-color:var(--line2); }
+    /* Video URL input modal */
+    .vid-url-overlay {
+      position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
+      z-index:8000; display:none; align-items:center; justify-content:center;
+    }
+    .vid-url-overlay.open { display:flex; }
+    .vid-url-box {
+      background:var(--bg2); border:1px solid var(--mid); border-radius:12px;
+      padding:24px 28px; width:460px; max-width:90vw;
+      box-shadow:0 8px 40px rgba(0,0,0,.5);
+    }
+    .vid-url-title { font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; margin-bottom:12px; }
+    .vid-url-inp {
+      width:100%; background:var(--bg0); border:1px solid var(--line); border-radius:6px;
+      padding:9px 12px; color:var(--heading); font-family:var(--mono); font-size:12px;
+      outline:none; box-sizing:border-box; transition:border-color .15s;
+    }
+    .vid-url-inp:focus { border-color:var(--accent); }
+    .vid-url-hint { font-size:10px; color:var(--muted); margin-top:6px; }
+    .vid-url-actions { display:flex; gap:8px; margin-top:14px; justify-content:flex-end; }
+    .vid-url-ok {
+      height:30px; padding:0 16px; background:var(--accent-bg); border:1px solid var(--accent);
+      color:var(--accent); font-family:var(--mono); font-size:10px; border-radius:4px; cursor:pointer;
+    }
+    .vid-url-ok:hover { background:rgba(90,122,240,.2); }
+    .vid-url-cancel {
+      height:30px; padding:0 12px; background:transparent; border:1px solid var(--line);
+      color:var(--muted); font-family:var(--mono); font-size:10px; border-radius:4px; cursor:pointer;
+    }
+    .vid-url-cancel:hover { border-color:var(--mid); color:var(--text); }
+    /* SERP preview */
+    .serp-preview { background:var(--bg0); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-top:12px; }
+    .serp-url { font-size:9px; color:var(--jade); margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .serp-title { font-size:13px; color:#8ab4f8; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+    .serp-desc { font-size:10px; color:var(--mid); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <header class="topbar">
+      <a class="logo" href="/dashboard.html"><div class="logo-mark">OR</div>Orbiter</a>
+      <div id="editor-breadcrumb" style="font-size:11px;color:var(--muted);margin-left:16px;padding-left:16px;border-left:1px solid var(--line);display:flex;align-items:center;gap:6px;">
+        <a href="/collections.html" style="color:var(--muted);text-decoration:none;">Collections</a>
+        <span style="color:var(--line);">/</span>
+        <a id="back-to-col" href="/collections.html" style="color:var(--mid);text-decoration:none;"></a>
+        <span style="color:var(--line);">/</span>
+        <span id="breadcrumb-slug" style="color:var(--text);"></span>
+      </div>
+      <div class="topbar-right">
+        <span id="autosave-indicator"></span>
+        <span id="wc" style="font-size:10px;color:var(--muted);padding:0 8px;"></span>
+        <div class="view-toggle" onmousedown="event.preventDefault()" style="margin-left:0;margin-right:12px;">
+          <button type="button" class="view-btn active" id="vbtn-edit"    onclick="setViewMode('edit')">Edit</button>
+          <button type="button" class="view-btn"        id="vbtn-split"   onclick="setViewMode('split')">Split</button>
+          <button type="button" class="view-btn"        id="vbtn-preview" onclick="setViewMode('preview')">Preview</button>
+        </div>
+        <button class="scheme-toggle" id="scheme-toggle" title="Toggle scheme">◐</button>
+        <span class="user" id="topbar-user"></span>
+        <span class="logout" id="logout-btn">Sign out</span>
+      </div>
+    </header>
+    <div class="editor-shell" id="editor-shell">
+      <div class="editor-main" id="editor-main">
+        <div id="saved-flash" style="display:none;" class="saved-flash">Entry saved</div>
+        <div class="editor-toolbar">
+          <div class="tool-group" onmousedown="event.preventDefault()">
+            <button type="button" class="tool-btn" onclick="beCmd('bold')" title="Bold"><b style="font-size:11px;">B</b></button>
+            <button type="button" class="tool-btn" onclick="beCmd('italic')" title="Italic"><i style="font-size:11px;">I</i></button>
+            <button type="button" class="tool-btn" onclick="beCmd('code')" title="Inline code" style="font-size:9px;">&lt;/&gt;</button>
+          </div>
+          <div class="tool-sep"></div>
+          <div class="tool-group" onmousedown="event.preventDefault()">
+            <button type="button" class="tool-btn" onclick="changeBlockType('h1')"         style="font-size:9px;">H1</button>
+            <button type="button" class="tool-btn" onclick="changeBlockType('h2')"         style="font-size:9px;">H2</button>
+            <button type="button" class="tool-btn" onclick="changeBlockType('h3')"         style="font-size:9px;">H3</button>
+            <button type="button" class="tool-btn" onclick="changeBlockType('blockquote')" >❝</button>
+            <button type="button" class="tool-btn" onclick="changeBlockType('ul')"         style="font-size:12px;">·</button>
+            <button type="button" class="tool-btn" onclick="insertHr()"                   style="font-size:9px;">—</button>
+          </div>
+          <div class="tool-sep"></div>
+          <div class="tool-group" onmousedown="event.preventDefault()">
+            <button type="button" class="tool-btn" onclick="openImgPicker()" title="Insert image">
+              <svg width="13" height="13" viewBox="0 0 13 13" fill="none" style="display:block"><rect x=".75" y="1.75" width="11.5" height="9.5" rx="1.5" stroke="currentColor" stroke-width="1.1"/><circle cx="4.25" cy="5" r=".9" fill="currentColor"/><path d="M.75 9l2.9-2.9L6 8.45l1.85-1.85L12.25 10.5" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+            <button type="button" class="tool-btn" onclick="openVideoPicker()" title="Insert video (YouTube, Vimeo, mp4)">
+              <svg width="13" height="13" viewBox="0 0 13 13" fill="none" style="display:block"><rect x=".75" y="2.25" width="11.5" height="8.5" rx="1.5" stroke="currentColor" stroke-width="1.1"/><path d="M5.25 4.75l3.5 1.75-3.5 1.75V4.75z" fill="currentColor"/></svg>
+            </button>
+          </div>
+        </div>
+        <div class="editor-scroll">
+          <div class="editor-page">
+            <textarea id="title-input" class="editor-title-input" placeholder="Untitled" rows="1"
+              oninput="this.style.height='auto';this.style.height=this.scrollHeight+'px';onTitleInput()"></textarea>
+            <div class="editor-slug-line">/<span id="collection-id-display"></span>/<span id="slug-preview">…</span></div>
+            <div id="be-editor" class="be-editor" spellcheck="false"></div>
+            <textarea id="body-input" style="display:none"></textarea>
+            <div class="word-count" id="word-count-display"></div>
+          </div>
+        </div>
+      </div>
+      <!-- Preview panel -->
+      <div class="preview-panel" id="preview-panel">
+        <div class="preview-src-bar">
+          <button class="src-btn active" id="src-md"   onclick="setPreviewSrc('md')">Markdown</button>
+          <button class="src-btn"        id="src-site" onclick="setPreviewSrc('site')">Site</button>
+        </div>
+        <div class="preview-scroll" id="preview-md-pane">
+          <div class="md-preview-title" id="preview-title"></div>
+          <div class="md-preview-slug"  id="preview-slug-line"></div>
+          <div class="md-preview"       id="preview-body"></div>
+        </div>
+        <iframe class="preview-iframe" id="preview-iframe" style="display:none;" src="about:blank"></iframe>
+      </div>
+      <!-- Meta / sidebar -->
+      <div class="meta-panel" id="meta-panel">
+        <!-- filled by JS -->
+      </div>
+    </div>
+  </div>
+  <div class="block-picker" id="block-picker">
+    <div class="bp-header">/ Blocks — type to filter</div>
+    <div class="bp-list" id="bp-list"></div>
+  </div>
+  <script type="module">
+    // ── Bootstrap ─────────────────────────────────────────────────────
+    const me = await fetch('/api/auth/me',{credentials:'include'}).then(r=>r.json()).catch(()=>null);
+    if (!me?.user) { location.replace('/login.html'); }
+    document.getElementById('topbar-user').textContent = me.user.username;
+    document.getElementById('logout-btn').addEventListener('click',async()=>{
+      await fetch('/api/auth/logout',{method:'POST',credentials:'include'});
+      location.replace('/login.html');
+    });
+    // Parse ?collection=X&slug=Y from URL
+    const params = new URLSearchParams(location.search);
+    const COLLECTION = params.get('collection');
+    const SLUG       = params.get('slug') ?? 'new';
+    const IS_NEW     = SLUG === 'new';
+    if (!COLLECTION) { location.replace('/collections.html'); }
+    document.getElementById('collection-id-display').textContent = COLLECTION;
+    // Load collection schema + entry
+    const [colData, entryData, versionsData, mediaData] = await Promise.all([
+      fetch(`/api/collections/${COLLECTION}`,{credentials:'include'}).then(r=>r.ok?r.json():null),
+      IS_NEW ? null : fetch(`/api/collections/${COLLECTION}/entries/${SLUG}`,{credentials:'include'}).then(r=>r.ok?r.json():null),
+      IS_NEW ? [] : fetch(`/api/collections/${COLLECTION}/entries/${SLUG}/versions`,{credentials:'include'}).then(r=>r.ok?r.json():[]).catch(()=>[]),
+      fetch('/api/media',{credentials:'include'}).then(r=>r.json()).catch(()=>[]),
+    ]);
+    if (!colData) { location.replace('/collections.html'); }
+    // Breadcrumb
+    document.getElementById('back-to-col').textContent = colData.label;
+    document.getElementById('back-to-col').href = `/entries.html?col=${COLLECTION}&label=${encodeURIComponent(colData.label)}`;
+    document.getElementById('breadcrumb-slug').textContent = IS_NEW ? 'New entry' : SLUG;
+    document.title = `${IS_NEW ? 'New entry' : SLUG} — ${colData.label} — Orbiter`;
+    const schema = colData.schema ? (typeof colData.schema==='string'?JSON.parse(colData.schema):colData.schema) : {};
+    const extraFields = Object.entries(schema).filter(([k])=>k!=='title'&&k!=='body');
+    // Load relation entries for any relation fields
+    const relationEntries = {};
+    for (const [,f] of extraFields) {
+      if (f.type==='relation' && f.collection && !relationEntries[f.collection]) {
+        relationEntries[f.collection] = await fetch(`/api/collections/${f.collection}/entries`,{credentials:'include'}).then(r=>r.ok?r.json():[]).catch(()=>[]);
+      }
+    }
+    // Set title + slug
+    const titleInput = document.getElementById('title-input');
+    titleInput.value = IS_NEW ? '' : (entryData?.data?.title ?? SLUG);
+    titleInput.style.height = 'auto';
+    titleInput.style.height = titleInput.scrollHeight + 'px';
+    let currentSlug = IS_NEW ? '' : SLUG;
+    document.getElementById('slug-preview').textContent = currentSlug || '…';
+    // ── Meta panel ────────────────────────────────────────────────────
+    const SEO_TITLE_KEYS = new Set(['meta_title','seo_title','og_title']);
+    const SEO_DESC_KEYS  = new Set(['meta_description','seo_description','og_description']);
+    function renderMetaPanel() {
+      const panel = document.getElementById('meta-panel');
+      const status = IS_NEW ? 'draft' : (entryData?.status ?? 'draft');
+      const updatedAt = entryData?.updated_at;
+      let fieldsHtml = '';
+      const seoFields = {};
+      for (const [key, field] of extraFields) {
+        const val = entryData?.data?.[key];
+        if (SEO_TITLE_KEYS.has(key)) seoFields.titleKey = key;
+        if (SEO_DESC_KEYS.has(key))  seoFields.descKey  = key;
+        const isSeoTitle = SEO_TITLE_KEYS.has(key);
+        const isSeoDesc  = SEO_DESC_KEYS.has(key);
+        if (isSeoTitle || isSeoDesc) {
+          fieldsHtml += `<div class="meta-field" data-field-key="${key}" ${field.showWhen?`data-show-when="${field.showWhen}"`:''}><div class="field-label" style="display:flex;justify-content:space-between;">${escHtml(field.label??key)}<span class="seo-counter" id="seo-ctr-${key}">${(val??'').length}</span></div>`;
+        } else {
+          fieldsHtml += `<div class="meta-field" data-field-key="${key}" ${field.showWhen?`data-show-when="${field.showWhen}"`:''}><div class="field-label">${escHtml(field.label??key)}</div>`;
+        }
+        if (field.type==='datetime') {
+          fieldsHtml += `<input type="datetime-local" class="field-input" name="${key}" value="${escHtml(val??'')}" />`;
+        } else if (field.type==='date') {
+          fieldsHtml += `<input type="date" class="field-input" name="${key}" value="${escHtml(val??'')}" />`;
+        } else if (field.type==='select') {
+          fieldsHtml += `<select class="field-select" name="${key}">${(field.options??[]).map(o=>`<option value="${escHtml(o)}"${val===o?' selected':''}>${escHtml(o)}</option>`).join('')}</select>`;
+        } else if (field.type==='weekdays') {
+          const active = Array.isArray(val) ? val : [];
+          fieldsHtml += `<div class="weekday-grid" id="wd-grid-${key}">
+            ${[['Mon','Mo'],['Tue','Di'],['Wed','Mi'],['Thu','Do'],['Fri','Fr'],['Sat','Sa'],['Sun','So']].map(([d,l])=>`<button type="button" class="wd-btn${active.includes(d)?' active':''}" data-day="${d}" data-key="${key}">${l}</button>`).join('')}
+            <input type="hidden" name="${key}" id="wd-val-${key}" value="${active.join(',')}" />
+          </div>`;
+        } else if (field.type==='media') {
+          const hasVal = !!(val);
+          fieldsHtml += `<div>
+            <select class="field-select" name="${key}" id="media-sel-${key}">
+              <option value="">— none —</option>
+              ${mediaData.map(m=>`<option value="${m.id}"${val===m.id?' selected':''}>${escHtml(m.filename)}${m.alt?` (${m.alt})`:''}</option>`).join('')}
+            </select>
+            <div class="media-drop-zone${hasVal?' has-image':''}" id="media-drop-${key}">
+              <img src="${hasVal?`/api/media/${val}/raw`:''}" alt="" id="media-img-${key}" style="${hasVal?'':'display:none'}" />
+              <div class="media-drop-label" id="media-drop-label-${key}">↑ drop or click</div>
+            </div>
+            <div style="margin-top:4px;"><span class="field-readonly" id="media-status-${key}"></span></div>
+          </div>`;
+        } else if (field.type==='array') {
+          const arrVal = Array.isArray(val) ? val.join(', ') : (val??'');
+          fieldsHtml += `<div>
+            <input type="text" class="tag-input" name="${key}" id="arr-${key}" value="${escHtml(arrVal)}" placeholder="tag1, tag2, …" />
+            <div class="tag-preview" id="tags-${key}"></div>
+          </div>`;
+        } else if (field.type==='relation') {
+          const selected = Array.isArray(val) ? val : (val ? [val] : []);
+          const entries  = relationEntries[field.collection] ?? [];
+          const selHtml  = selected.length
+            ? selected.map(id=>{ const e=entries.find(x=>x.id===id); return e?`<span class="rel-tag">${escHtml(e.data?.title??e.slug)}</span>`:''; }).join('')
+            : '<span style="font-size:10px;color:var(--muted);">—</span>';
+          fieldsHtml += `<div class="rel-picker">
+            <div class="rel-selected" id="rel-selected-${key}">${selHtml}</div>
+            <input class="rel-search" type="text" placeholder="Filter…" id="rel-search-${key}" />
+            <div class="rel-list" id="rel-list-${key}">
+              ${entries.length ? entries.map(e=>{
+                const checked = selected.includes(e.id);
+                return `<label class="rel-item" data-key="${key}">
+                  <input type="checkbox" name="${key}" value="${e.id}"${checked?' checked':''} />
+                  <span class="rel-check">${checked?'✓':''}</span>
+                  <span class="rel-name">${escHtml(e.data?.title??e.data?.name??e.slug)}</span>
+                </label>`;
+              }).join('') : '<div style="padding:10px;font-size:10px;color:var(--muted);">No entries</div>'}
+            </div>
+          </div>`;
+        } else if (field.type==='url') {
+          fieldsHtml += `<input type="url" class="field-input" name="${key}" value="${escHtml(val??'')}" placeholder="https://…" />`;
+        } else if (field.type==='number') {
+          fieldsHtml += `<input type="number" class="field-input" name="${key}" value="${escHtml(val??'')}" />`;
+        } else if (SEO_TITLE_KEYS.has(key)) {
+          fieldsHtml += `<input type="text" class="field-input" name="${key}" id="seo-inp-${key}" value="${escHtml(val??'')}" maxlength="120" />`;
+        } else if (SEO_DESC_KEYS.has(key)) {
+          fieldsHtml += `<textarea class="field-input" name="${key}" id="seo-inp-${key}" rows="3" maxlength="300" style="resize:vertical;">${escHtml(val??'')}</textarea>`;
+        } else {
+          fieldsHtml += `<input type="text" class="field-input" name="${key}" value="${escHtml(val??'')}" />`;
+        }
+        fieldsHtml += '</div>';
+      }
+      const versHtml = versionsData.slice(0,8).map((v,i)=>`
+        <div class="version-row">
+          <div class="v-dot${i===0?' cur':''}"></div>
+          <div class="v-hash">${v.id.slice(0,7)}</div>
+          <div class="v-time">${new Date(v.created_at).toLocaleDateString()}</div>
+        </div>
+      `).join('');
+      const hasSeo = !!(seoFields.titleKey || seoFields.descKey);
+      const serpHtml = hasSeo ? `<div class="serp-preview" id="serp-preview">
+        <div class="serp-url" id="serp-url">${location.host}/${COLLECTION}/<span id="serp-slug-part">${escHtml(IS_NEW?'…':SLUG)}</span></div>
+        <div class="serp-title" id="serp-title">${escHtml(document.getElementById('title-input')?.value||'Untitled')}</div>
+        <div class="serp-desc" id="serp-desc">—</div>
+      </div>` : '';
+      panel.innerHTML = `
+        ${extraFields.length ? `<div class="meta-section"><div class="meta-label">Fields</div>${fieldsHtml}${serpHtml}</div>` : ''}
+        <div class="meta-section">
+          <div class="status-bar">
+            <div class="status-dot ${status}" id="status-dot"></div>
+            <div class="status-lbl ${status}" id="status-lbl">${status==='published'?'Published':'Draft'}</div>
+          </div>
+          <button type="button" class="btn-publish" id="btn-publish">Publish</button>
+          <button type="button" class="btn-draft"   id="btn-draft">Save as draft</button>
+        </div>
+        <div class="meta-section">
+          <div class="meta-label">Details</div>
+          <div class="meta-field">
+            <div class="field-label">Slug</div>
+            <input class="field-input" id="slug-input" value="${escHtml(IS_NEW?'':SLUG)}" placeholder="entry-slug" />
+          </div>
+          <div class="meta-field">
+            <div class="field-label">Status</div>
+            <select class="field-select" id="status-select">
+              <option value="draft"     ${status==='draft'     ?'selected':''}>Draft</option>
+              <option value="published" ${status==='published' ?'selected':''}>Published</option>
+            </select>
+          </div>
+          ${updatedAt ? `<div class="meta-field"><div class="field-label">Modified</div><div class="field-readonly">${new Date(updatedAt).toLocaleDateString()}</div></div>` : ''}
+        </div>
+        ${versionsData.length ? `<div class="meta-section"><div class="meta-label">History</div>${versHtml}</div>` : ''}
+      `;
+      // Wire up weekday toggles
+      panel.querySelectorAll('.wd-btn').forEach(btn=>{
+        btn.addEventListener('click',()=>{
+          btn.classList.toggle('active');
+          const key = btn.dataset.key;
+          const hidden = document.getElementById('wd-val-'+key);
+          const cur = hidden.value ? hidden.value.split(',') : [];
+          const idx = cur.indexOf(btn.dataset.day);
+          if (idx===-1) cur.push(btn.dataset.day); else cur.splice(idx,1);
+          hidden.value = cur.join(',');
+        });
+      });
+      // Wire up tag previews
+      panel.querySelectorAll('[id^="arr-"]').forEach(el=>{
+        const key = el.id.replace('arr-','');
+        renderTags(key);
+        el.addEventListener('input',()=>renderTags(key));
+      });
+      // Wire up relation search + selection
+      panel.querySelectorAll('.rel-search').forEach(search=>{
+        const key = search.id.replace('rel-search-','');
+        search.addEventListener('input',()=>{
+          const q = search.value.toLowerCase();
+          document.querySelectorAll(`#rel-list-${key} .rel-item`).forEach(item=>{
+            item.style.display = item.querySelector('.rel-name').textContent.toLowerCase().includes(q) ? '' : 'none';
+          });
+        });
+      });
+      panel.querySelectorAll('.rel-item').forEach(item=>{
+        item.addEventListener('change',()=>updateRelSelected(item.dataset.key));
+      });
+      // Wire up media drop zones
+      panel.querySelectorAll('.media-drop-zone').forEach(zone=>{
+        const key = zone.id.replace('media-drop-','');
+        zone.addEventListener('click',()=>{ const fi=document.createElement('input');fi.type='file';fi.accept='image/*,video/*,application/pdf';fi.onchange=()=>uploadMediaField(key,fi);fi.click(); });
+        zone.addEventListener('dragover',e=>{e.preventDefault();zone.classList.add('drag-over');});
+        zone.addEventListener('dragleave',()=>zone.classList.remove('drag-over'));
+        zone.addEventListener('drop',e=>{e.preventDefault();zone.classList.remove('drag-over');if(e.dataTransfer.files.length){const fi={files:e.dataTransfer.files};uploadMediaField(key,fi);}});
+      });
+      // Publish / draft buttons
+      document.getElementById('btn-publish').addEventListener('click',()=>saveEntry('published'));
+      document.getElementById('btn-draft').addEventListener('click',()=>saveEntry('draft'));
+      // Slug input → slug preview
+      document.getElementById('slug-input').addEventListener('input', e=>{
+        e.target.dataset.manual='1';
+        document.getElementById('slug-preview').textContent = e.target.value || '…';
+      });
+      // Status select sync
+      document.getElementById('status-select').addEventListener('change',e=>{
+        updateStatusUI(e.target.value);
+      });
+      // showWhen conditional fields
+      initConditional();
+      // SEO char counters + SERP preview live update
+      if (hasSeo) {
+        function seoCounterClass(len, isTitle) {
+          const [lo, hi] = isTitle ? [30, 60] : [120, 160];
+          if (len === 0) return '';
+          if (len < lo) return 'warn';
+          if (len <= hi) return 'ok';
+          return 'over';
+        }
+        function updateSerp() {
+          const titleEl = document.getElementById('serp-title');
+          const descEl  = document.getElementById('serp-desc');
+          const slugEl  = document.getElementById('serp-slug-part');
+          const slugVal = document.getElementById('slug-input')?.value || document.getElementById('slug-preview')?.textContent || '…';
+          if (slugEl) slugEl.textContent = slugVal;
+          if (titleEl) {
+            const seoTitle = seoFields.titleKey ? document.getElementById('seo-inp-'+seoFields.titleKey)?.value : '';
+            titleEl.textContent = seoTitle || document.getElementById('title-input')?.value || 'Untitled';
+          }
+          if (descEl) {
+            const seoDesc = seoFields.descKey ? document.getElementById('seo-inp-'+seoFields.descKey)?.value : '';
+            descEl.textContent = seoDesc || '—';
+          }
+        }
+        if (seoFields.titleKey) {
+          const inp = document.getElementById('seo-inp-'+seoFields.titleKey);
+          const ctr = document.getElementById('seo-ctr-'+seoFields.titleKey);
+          inp?.addEventListener('input',()=>{
+            const len = inp.value.length;
+            if (ctr) { ctr.textContent=len; ctr.className='seo-counter '+seoCounterClass(len,true); }
+            updateSerp();
+          });
+          if (ctr && inp) { const l=inp.value.length; ctr.textContent=l; ctr.className='seo-counter '+seoCounterClass(l,true); }
+        }
+        if (seoFields.descKey) {
+          const inp = document.getElementById('seo-inp-'+seoFields.descKey);
+          const ctr = document.getElementById('seo-ctr-'+seoFields.descKey);
+          inp?.addEventListener('input',()=>{
+            const len = inp.value.length;
+            if (ctr) { ctr.textContent=len; ctr.className='seo-counter '+seoCounterClass(len,false); }
+            updateSerp();
+          });
+          if (ctr && inp) { const l=inp.value.length; ctr.textContent=l; ctr.className='seo-counter '+seoCounterClass(l,false); }
+        }
+        // Also update SERP when title or slug changes
+        document.getElementById('title-input')?.addEventListener('input', updateSerp);
+        document.getElementById('slug-input')?.addEventListener('input', updateSerp);
+        updateSerp();
+      }
+    }
+    function updateStatusUI(status) {
+      document.getElementById('status-dot').className = 'status-dot ' + status;
+      document.getElementById('status-lbl').className = 'status-lbl ' + status;
+      document.getElementById('status-lbl').textContent = status==='published'?'Published':'Draft';
+      document.getElementById('status-select').value = status;
+    }
+    function renderTags(key) {
+      const input = document.getElementById('arr-'+key);
+      const preview = document.getElementById('tags-'+key);
+      if (!preview) return;
+      const tags = input.value.split(',').map(t=>t.trim()).filter(Boolean);
+      preview.innerHTML = tags.map(t=>`<span class="tag-chip">${escHtml(t)}</span>`).join('');
+    }
+    function updateRelSelected(key) {
+      const list = document.getElementById('rel-list-'+key);
+      const selected = document.getElementById('rel-selected-'+key);
+      if (!list||!selected) return;
+      setTimeout(()=>{
+        const checked = [...list.querySelectorAll('input[type=checkbox]:checked')];
+        selected.innerHTML = checked.length
+          ? checked.map(cb=>{ const name=cb.closest('.rel-item')?.querySelector('.rel-name')?.textContent??cb.value; return `<span class="rel-tag">${escHtml(name)}</span>`; }).join('')
+          : '<span style="font-size:10px;color:var(--muted);">—</span>';
+        list.querySelectorAll('.rel-item').forEach(item=>{
+          const cb=item.querySelector('input[type=checkbox]');
+          const box=item.querySelector('.rel-check');
+          if (box) { box.textContent=cb?.checked?'✓':''; box.style.color=cb?.checked?'var(--bg0)':'transparent'; box.style.background=cb?.checked?'var(--accent)':'var(--bg0)'; box.style.borderColor=cb?.checked?'var(--accent)':'var(--line)'; }
+        });
+      }, 0);
+    }
+    async function uploadMediaField(key, input) {
+      if (!input.files?.length) return;
+      const file = input.files[0];
+      const statusEl = document.getElementById('media-status-'+key);
+      const sel = document.getElementById('media-sel-'+key);
+      const zone = document.getElementById('media-drop-'+key);
+      const img = document.getElementById('media-img-'+key);
+      statusEl.textContent = '↑ uploading…';
+      const fd = new FormData();
+      fd.append('file',file); fd.append('alt',''); fd.append('folder','');
+      try {
+        const res  = await fetch('/api/media',{method:'POST',credentials:'include',body:fd});
+        const data = await res.json();
+        if (data.id) {
+          const opt = document.createElement('option');
+          opt.value=data.id; opt.textContent=data.filename; opt.selected=true;
+          sel.appendChild(opt);
+          img.src='/api/media/'+data.id+'/raw'; img.style.display='block';
+          zone.classList.add('has-image');
+          statusEl.textContent='✓ '+data.filename;
+          setTimeout(()=>{statusEl.textContent='';},3000);
+        }
+      } catch(e) { statusEl.textContent='✗ '+e.message; }
+    }
+    function initConditional() {
+      const conditionals = document.querySelectorAll('[data-show-when]');
+      if (!conditionals.length) return;
+      function evalCond(cond) {
+        const [key,rawVal] = cond.split(':');
+        const negate = rawVal.startsWith('!');
+        const expected = negate ? rawVal.slice(1) : rawVal;
+        const ctrl = document.querySelector(`[name="${key}"]`);
+        const current = ctrl ? ctrl.value : 'none';
+        return negate ? current!==expected : current===expected;
+      }
+      function refreshAll() { conditionals.forEach(el=>{ el.style.display=evalCond(el.dataset.showWhen)?'':'none'; }); }
+      const controlKeys = new Set([...conditionals].map(el=>el.dataset.showWhen.split(':')[0]));
+      controlKeys.forEach(key=>{
+        const ctrl = document.querySelector(`[name="${key}"]`);
+        if (ctrl) ctrl.addEventListener('change',refreshAll);
+      });
+      refreshAll();
+    }
+    // ── Save entry ────────────────────────────────────────────────────
+    let currentPath = location.pathname + location.search;
+    async function saveEntry(status, isAutosave=false) {
+      const title = document.getElementById('title-input').value;
+      syncToHidden();
+      const body = document.getElementById('body-input').value;
+      const slugInput = document.getElementById('slug-input');
+      const slug = isAutosave ? (currentSlug || slugify(title) || 'untitled') : (slugInput.value.trim() || slugify(title) || 'untitled');
+      // Gather extra field values
+      const data = { title, body };
+      for (const [key, field] of extraFields) {
+        if (field.type==='array'||field.type==='weekdays') {
+          const raw = document.getElementById('wd-val-'+key)?.value || document.querySelector(`[name="${key}"]`)?.value || '';
+          data[key] = raw ? raw.split(',').map(s=>s.trim()).filter(Boolean) : [];
+        } else if (field.type==='relation') {
+          data[key] = [...document.querySelectorAll(`[name="${key}"]:checked`)].map(cb=>cb.value);
+        } else {
+          const el = document.querySelector(`[name="${key}"]`);
+          data[key] = el ? el.value : '';
+        }
+      }
+      if (IS_NEW && !currentSlug) {
+        // Create new entry
+        const res = await fetch(`/api/collections/${COLLECTION}/entries`,{
+          method:'POST', credentials:'include',
+          headers:{'Content-Type':'application/json'},
+          body: JSON.stringify({ slug, data, status }),
+        });
+        const json = await res.json();
+        if (json.slug || json.id) {
+          currentSlug = json.slug ?? slug;
+          document.getElementById('slug-preview').textContent = currentSlug;
+          slugInput.value = currentSlug;
+          const newUrl = `/editor.html?collection=${COLLECTION}&slug=${currentSlug}`;
+          history.replaceState(null,'',newUrl);
+          currentPath = newUrl;
+          setIndicator('saved');
+          updateStatusUI(status);
+          if (!isAutosave) showFlash();
+        } else { setIndicator('error'); }
+      } else {
+        const targetSlug = currentSlug || SLUG;
+        const res = await fetch(`/api/collections/${COLLECTION}/entries/${targetSlug}`,{
+          method:'PUT', credentials:'include',
+          headers:{'Content-Type':'application/json'},
+          body: JSON.stringify({ slug, data, status }),
+        });
+        if (res.ok) {
+          const json = await res.json();
+          if (json.slug && json.slug!==currentSlug) {
+            currentSlug = json.slug;
+            const newUrl = `/editor.html?collection=${COLLECTION}&slug=${currentSlug}`;
+            history.replaceState(null,'',newUrl);
+            document.getElementById('slug-preview').textContent = currentSlug;
+            slugInput.value = currentSlug;
+          }
+          setIndicator('saved'); updateStatusUI(status);
+          if (!isAutosave) showFlash();
+        } else { setIndicator('error'); }
+      }
+    }
+    function slugify(s) {
+      return s.toLowerCase().replace(/\s+/g,'-').replace(/[^a-z0-9-]/g,'').slice(0,60);
+    }
+    function showFlash() {
+      const f = document.getElementById('saved-flash');
+      f.style.display=''; setTimeout(()=>f.style.display='none',2000);
+    }
+    // ── Autosave ──────────────────────────────────────────────────────
+    const indicator = document.getElementById('autosave-indicator');
+    let autosaveTimer = null;
+    function setIndicator(state) {
+      const states = { pending:{text:'Unsaved',color:'var(--gold)'}, saving:{text:'Saving…',color:'var(--muted)'}, saved:{text:'✓ Saved',color:'var(--jade)'}, error:{text:'Error',color:'var(--red)'} };
+      const s = states[state] ?? {};
+      indicator.textContent = s.text ?? '';
+      indicator.style.color = s.color ?? '';
+    }
+    function scheduleAutosave() {
+      clearTimeout(autosaveTimer);
+      setIndicator('pending');
+      autosaveTimer = setTimeout(()=>{ setIndicator('saving'); saveEntry(document.getElementById('status-select')?.value??'draft', true); }, 2000);
+    }
+    window.onTitleInput = function() {
+      const slugInput = document.getElementById('slug-input');
+      if (!slugInput.dataset.manual) {
+        const s = slugify(document.getElementById('title-input').value);
+        slugInput.value = s;
+        document.getElementById('slug-preview').textContent = s || '…';
+      }
+      updateWc(); scheduleAutosave(); updatePreview();
+    };
+    // Cmd+S
+    document.addEventListener('keydown', e=>{
+      if ((e.metaKey||e.ctrlKey) && e.key==='s') {
+        e.preventDefault();
+        saveEntry(document.getElementById('status-select')?.value??'draft');
+      }
+    });
+    // ── Block editor ──────────────────────────────────────────────────
+    const beEditor = document.getElementById('be-editor');
+    const bodyInput = document.getElementById('body-input');
+    function inlineMd(text) {
+      return text
+        .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+        .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
+        .replace(/__(.+?)__/g,'<strong>$1</strong>')
+        .replace(/\*(.+?)\*/g,'<em>$1</em>')
+        .replace(/_(.+?)_/g,'<em>$1</em>')
+        .replace(/`(.+?)`/g,'<code>$1</code>');
+    }
+    function htmlToMd(html) {
+      return html
+        .replace(/<strong>([\s\S]*?)<\/strong>/gi,'**$1**')
+        .replace(/<b>([\s\S]*?)<\/b>/gi,'**$1**')
+        .replace(/<em>([\s\S]*?)<\/em>/gi,'_$1_')
+        .replace(/<i>([\s\S]*?)<\/i>/gi,'_$1_')
+        .replace(/<code>([\s\S]*?)<\/code>/gi,'`$1`')
+        .replace(/<br\s*\/?>/gi,' ')
+        .replace(/<[^>]+>/g,'')
+        .replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&nbsp;/g,' ');
+    }
+    function serialize() {
+      const lines = [];
+      beEditor.querySelectorAll('.be-block').forEach(b=>{
+        const type = b.dataset.type||'p';
+        if (type==='image') {
+          const id    = b.dataset.mediaId ?? '';
+          const alt   = b.querySelector('.be-img-cap')?.value ?? b.dataset.alt ?? '';
+          const align = b.dataset.align ?? 'center';
+          const suf   = (align && align!=='center') ? `{.${align}}` : '';
+          lines.push(`![${alt}](${id})${suf}`);
+          return;
+        }
+        if (type==='video') {
+          lines.push(`::video[${b.dataset.videoUrl ?? ''}]`);
+          return;
+        }
+        const text = htmlToMd(b.innerHTML);
+        if      (type==='h1')         lines.push('# '+text);
+        else if (type==='h2')         lines.push('## '+text);
+        else if (type==='h3')         lines.push('### '+text);
+        else if (type==='blockquote') lines.push('> '+text);
+        else if (type==='pre')        lines.push('```\n'+text+'\n```');
+        else if (type==='ul')         lines.push('- '+text);
+        else if (type==='ol')         lines.push('1. '+text);
+        else if (type==='hr')         lines.push('---');
+        else                          lines.push(text);
+      });
+      return lines.join('\n\n');
+    }
+    function syncToHidden() { bodyInput.value = serialize(); updateWc(); }
+    const BLK_PH = { h1:'Heading 1',h2:'Heading 2',h3:'Heading 3',blockquote:'Quote…',pre:'Code…',ul:'List item',ol:'List item',p:'Write something…' };
+    function createBlock(type, content) {
+      const el = document.createElement('div');
+      el.className='be-block'; el.dataset.type=type||'p'; el.dataset.ph=BLK_PH[type]||'Write something…';
+      if (type==='hr') { el.contentEditable='false'; }
+      else { el.contentEditable='true'; el.innerHTML=content||''; }
+      return el;
+    }
+    function parseMd(md) {
+      beEditor.innerHTML='';
+      if (!md) { beEditor.appendChild(createBlock('p','')); return; }
+      md.split(/\n{2,}/).forEach(chunk=>{
+        chunk=chunk.trim(); if (!chunk) return;
+        // Video block: ::video[url]
+        const vidM = chunk.match(/^::video\[(.+)\]$/);
+        if (vidM) { beEditor.appendChild(createVideoBlock(vidM[1])); return; }
+        // Image block: ![alt](mediaId) or ![alt](mediaId){.align}
+        const imgM = chunk.match(/^!\[([^\]]*)\]\(([^)]+)\)(?:\{\.(\w+)\})?$/);
+        if (imgM) { beEditor.appendChild(createImgBlock(imgM[2], imgM[1], imgM[3]||'center')); return; }
+        let type='p', content=chunk;
+        if      (chunk.startsWith('# '))   { type='h1';         content=inlineMd(chunk.slice(2)); }
+        else if (chunk.startsWith('## '))  { type='h2';         content=inlineMd(chunk.slice(3)); }
+        else if (chunk.startsWith('### ')) { type='h3';         content=inlineMd(chunk.slice(4)); }
+        else if (chunk.startsWith('> '))   { type='blockquote'; content=inlineMd(chunk.slice(2)); }
+        else if (/^```/.test(chunk))       { type='pre';        content=chunk.replace(/^```[^\n]*\n?/,'').replace(/\n?```$/,''); }
+        else if (chunk.startsWith('- '))   { type='ul';         content=inlineMd(chunk.slice(2)); }
+        else if (/^\d+\.\s/.test(chunk))   { type='ol';         content=inlineMd(chunk.replace(/^\d+\.\s/,'')); }
+        else if (chunk==='---')            { type='hr';         content=''; }
+        else                               { type='p';          content=inlineMd(chunk); }
+        beEditor.appendChild(createBlock(type,content));
+      });
+      if (!beEditor.querySelector('.be-block')) beEditor.appendChild(createBlock('p',''));
+    }
+    function focusStart(el) { if (!el||el.contentEditable==='false') return; el.focus(); const r=document.createRange();r.setStart(el,0);r.collapse(true);const s=window.getSelection();s.removeAllRanges();s.addRange(r); }
+    function focusEnd(el)   { if (!el||el.contentEditable==='false') return; el.focus(); const r=document.createRange();r.selectNodeContents(el);r.collapse(false);const s=window.getSelection();s.removeAllRanges();s.addRange(r); }
+    function getFocusedBlock() {
+      const sel=window.getSelection(); if (!sel||!sel.rangeCount) return null;
+      let node=sel.getRangeAt(0).commonAncestorContainer;
+      while (node&&node!==beEditor) { if (node.classList?.contains('be-block')) return node; node=node.parentNode; }
+      return null;
+    }
+    window.changeBlockType = function(type, block) {
+      const b=block||getFocusedBlock(); if (!b) return;
+      b.dataset.type=type; b.dataset.ph=BLK_PH[type]||'Write something…';
+      if (type==='hr') { b.innerHTML=''; b.contentEditable='false'; }
+      else { b.contentEditable='true'; focusEnd(b); }
+      syncToHidden(); scheduleAutosave(); updatePreview();
+    };
+    window.insertHr = function() {
+      const b=getFocusedBlock(); const hr=createBlock('hr',''); const next=createBlock('p','');
+      if (b) { b.after(hr); hr.after(next); } else { beEditor.appendChild(hr); beEditor.appendChild(next); }
+      focusStart(next); syncToHidden(); scheduleAutosave(); updatePreview();
+    };
+    window.beCmd = function(cmd) {
+      if (cmd==='code') {
+        const sel=window.getSelection(); if (!sel||!sel.rangeCount) return;
+        const range=sel.getRangeAt(0); const text=range.toString();
+        if (text) { const code=document.createElement('code'); code.textContent=text; range.deleteContents(); range.insertNode(code); }
+      } else { document.execCommand(cmd,false,null); }
+      syncToHidden(); scheduleAutosave(); updatePreview();
+    };
+    beEditor.addEventListener('keydown',e=>{
+      if (bpOpen) {
+        const items=bpFiltered();
+        if (e.key==='ArrowDown') { e.preventDefault(); bpIdx=(bpIdx+1)%(items.length||1); bpRender(); return; }
+        if (e.key==='ArrowUp')   { e.preventDefault(); bpIdx=(bpIdx-1+(items.length||1))%(items.length||1); bpRender(); return; }
+        if (e.key==='Enter')     { e.preventDefault(); bpInsert(bpIdx); return; }
+        if (e.key==='Escape')    { e.preventDefault(); bpClose(); return; }
+      }
+      const b=getFocusedBlock(); if (!b) return;
+      if (e.key==='Enter'&&!e.shiftKey) {
+        e.preventDefault();
+        const type=b.dataset.type; const newType=(type==='ul'||type==='ol')?type:'p';
+        const next=createBlock(newType,''); b.after(next); focusStart(next);
+        syncToHidden(); scheduleAutosave(); updatePreview(); return;
+      }
+      if (e.key==='Backspace') {
+        const isEmpty=b.innerText.trim()===''; const isFirst=b===beEditor.firstElementChild;
+        if (isEmpty&&b.dataset.type!=='p') { e.preventDefault(); b.dataset.type='p'; b.dataset.ph=BLK_PH.p; b.innerHTML=''; b.contentEditable='true'; focusStart(b); syncToHidden(); scheduleAutosave(); updatePreview(); return; }
+        if (isEmpty&&!isFirst) { e.preventDefault(); const prev=b.previousElementSibling; b.remove(); if (prev&&prev.contentEditable!=='false') focusEnd(prev); syncToHidden(); scheduleAutosave(); updatePreview(); return; }
+      }
+    });
+    beEditor.addEventListener('input',()=>{
+      const b=getFocusedBlock(); if (!b||b.dataset.type==='hr') { syncToHidden(); scheduleAutosave(); updatePreview(); return; }
+      if (bpOpen&&bpTargetBlock) {
+        const text=bpTargetBlock.innerText; const typed=text.substring(1);
+        if (typed.includes('\n')) bpClose(); else { bpQuery=typed; bpIdx=0; bpRender(); } return;
+      }
+      const text=b.innerText;
+      if (text==='# ')   { b.innerHTML=''; changeBlockType('h1',b); return; }
+      if (text==='## ')  { b.innerHTML=''; changeBlockType('h2',b); return; }
+      if (text==='### ') { b.innerHTML=''; changeBlockType('h3',b); return; }
+      if (text==='> ')   { b.innerHTML=''; changeBlockType('blockquote',b); return; }
+      if (text==='- ')   { b.innerHTML=''; changeBlockType('ul',b); return; }
+      if (text==='---')  { const hr=createBlock('hr',''); const next=createBlock('p',''); b.replaceWith(hr); hr.after(next); focusStart(next); syncToHidden(); scheduleAutosave(); updatePreview(); return; }
+      if (text==='/') { bpOpen_(b); return; }
+      syncToHidden(); scheduleAutosave(); updatePreview();
+    });
+    beEditor.addEventListener('paste',e=>{
+      e.preventDefault();
+      const text=(e.clipboardData||window.clipboardData).getData('text/plain').trim();
+      if (text && /^https?:\/\//i.test(text) && /youtube\.com|youtu\.be|vimeo\.com|wistia\.(com|net)|\.(?:mp4|webm|ogg|mov)(\?|$)/i.test(text)) {
+        const b=getFocusedBlock();
+        const block=createVideoBlock(text);
+        if (b) {
+          b.after(block);
+          if (b.innerText.trim()==='') b.remove();
+          if (!block.nextElementSibling||block.nextElementSibling.contentEditable==='false') block.after(createBlock('p',''));
+        } else {
+          beEditor.appendChild(block);
+          beEditor.appendChild(createBlock('p',''));
+        }
+        syncToHidden(); scheduleAutosave(); updatePreview(); return;
+      }
+      if (text) document.execCommand('insertText',false,text);
+      syncToHidden(); scheduleAutosave(); updatePreview();
+    });
+    beEditor.addEventListener('click',e=>{
+      if (e.target===beEditor) {
+        const last=beEditor.lastElementChild;
+        if (last&&last.contentEditable!=='false') focusEnd(last);
+        else { const p=createBlock('p',''); beEditor.appendChild(p); focusStart(p); }
+      }
+    });
+    function updateWc() {
+      const body = bodyInput.value;
+      const words = body.trim() ? body.trim().split(/\s+/).filter(w=>w).length : 0;
+      const chars = body.length;
+      const mins  = Math.max(1, Math.round(words / 200));
+      const wcEl  = document.getElementById('wc');
+      const detEl = document.getElementById('word-count-display');
+      if (wcEl)  wcEl.textContent  = words ? `${words.toLocaleString()} w · ${mins} min` : '';
+      if (detEl) detEl.textContent = words ? `${words.toLocaleString()} words · ${chars.toLocaleString()} chars · ~${mins} min read` : '';
+    }
+    // ── View modes ────────────────────────────────────────────────────
+    let viewMode='edit'; let previewSrc='md';
+    const shell=document.getElementById('editor-shell');
+    window.setViewMode = function(mode) {
+      viewMode=mode;
+      shell.classList.remove('mode-split','mode-preview');
+      if (mode!=='edit') shell.classList.add('mode-'+mode);
+      ['edit','split','preview'].forEach(m=>document.getElementById('vbtn-'+m).classList.toggle('active',m===mode));
+      if (mode!=='edit') updatePreview();
+    };
+    window.setPreviewSrc = function(src) {
+      previewSrc=src;
+      document.getElementById('src-md').classList.toggle('active',src==='md');
+      document.getElementById('src-site').classList.toggle('active',src==='site');
+      document.getElementById('preview-md-pane').style.display  = src==='md'   ? '' : 'none';
+      document.getElementById('preview-iframe').style.display   = src==='site' ? '' : 'none';
+      updatePreview();
+    };
+    function updatePreview() {
+      if (viewMode==='edit') return;
+      if (previewSrc==='md') renderMarkdown(); else renderIframe();
+    }
+    function renderMarkdown() {
+      const title=document.getElementById('title-input').value;
+      const slug=document.getElementById('slug-preview').textContent;
+      document.getElementById('preview-title').textContent=title||'Untitled';
+      document.getElementById('preview-slug-line').innerHTML='/'+COLLECTION+'/<span>'+slug+'</span>';
+      if (window.marked) {
+        // Expand image blocks: ![alt](id){.align} → <img> with alignment style
+        const prepped = (bodyInput.value||'').replace(
+          /!\[([^\]]*)\]\(([0-9a-f-]{32,36})\)(?:\{\.(\w+)\})?/g,
+          (_,alt,id,align)=>{
+            const st = align==='left'  ? 'float:left;max-width:48%;margin:4px 20px 12px 0;'
+                     : align==='right' ? 'float:right;max-width:48%;margin:4px 0 12px 20px;'
+                     : align==='full'  ? 'width:100%;display:block;'
+                     : 'display:block;margin:0 auto;';
+            return `<img src="/api/media/${id}/raw" alt="${alt}" style="border-radius:6px;max-width:100%;${st}">`;
+          }
+        );
+        const prepped2 = prepped.replace(/::video\[([^\]]+)\]/g, (_,url)=>{
+          const embed = parseVideoUrl(url);
+          if (!embed) return `<video src="${url}" controls style="width:100%;border-radius:8px;margin:16px 0;"></video>`;
+          return `<div style="position:relative;padding-bottom:56.25%;height:0;margin:16px 0;overflow:hidden;border-radius:8px;"><iframe src="${embed}" frameborder="0" allowfullscreen allow="autoplay;encrypted-media" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>`;
+        });
+        document.getElementById('preview-body').innerHTML=marked.parse(prepped2);
+      }
+    }
+    function renderIframe() {
+      const slug=document.getElementById('slug-preview').textContent||currentSlug;
+      document.getElementById('preview-iframe').src=window.location.origin+'/'+COLLECTION+'/'+slug;
+    }
+    // ── Block picker ──────────────────────────────────────────────────
+    const BP_BLOCKS = [
+      {label:'Heading 1',  icon:'H1',  hint:'#',   type:'h1'},
+      {label:'Heading 2',  icon:'H2',  hint:'##',  type:'h2'},
+      {label:'Heading 3',  icon:'H3',  hint:'###', type:'h3'},
+      {label:'Quote',      icon:'❝',   hint:'>',   type:'blockquote'},
+      {label:'Code block', icon:'{}',  hint:'```', type:'pre'},
+      {label:'List',       icon:'·',   hint:'-',   type:'ul'},
+      {label:'Numbered',   icon:'1.',  hint:'1.',  type:'ol'},
+      {label:'Divider',    icon:'—',   hint:'---', type:'hr'},
+      {label:'Image',      icon:'⊡',   hint:'img', type:'image'},
+      {label:'Video',      icon:'▶',   hint:'vid', type:'video'},
+    ];
+    let bpOpen=false, bpIdx=0, bpQuery='', bpTargetBlock=null;
+    const bpEl=document.getElementById('block-picker');
+    const bpListEl=document.getElementById('bp-list');
+    function bpFiltered() {
+      if (!bpQuery) return BP_BLOCKS;
+      const q=bpQuery.toLowerCase();
+      return BP_BLOCKS.filter(b=>b.label.toLowerCase().includes(q)||b.hint.includes(q));
+    }
+    function bpRender() {
+      bpListEl.innerHTML='';
+      const items=bpFiltered();
+      if (!items.length) { bpListEl.innerHTML='<div style="padding:12px;font-size:11px;color:var(--muted);text-align:center;">No blocks</div>'; return; }
+      items.forEach((b,i)=>{
+        const row=document.createElement('div');
+        row.className='bp-item'+(i===bpIdx?' active':'');
+        row.innerHTML=`<div class="bp-icon">${b.icon}</div><div class="bp-label">${b.label}</div><div class="bp-hint">${b.hint}</div>`;
+        row.addEventListener('mousedown',ev=>{ev.preventDefault();bpInsert(i);});
+        row.addEventListener('mouseover',()=>{bpIdx=i;bpRender();});
+        bpListEl.appendChild(row);
+      });
+    }
+    function bpOpen_(block) {
+      bpTargetBlock=block; bpQuery=''; bpIdx=0; bpOpen=true;
+      const rect=block.getBoundingClientRect();
+      bpEl.style.top=Math.min(rect.bottom+6,window.innerHeight-280)+'px';
+      bpEl.style.left=Math.min(rect.left,window.innerWidth-240)+'px';
+      bpEl.style.display='block'; bpRender();
+    }
+    function bpClose() { bpOpen=false; bpEl.style.display='none'; }
+    function bpInsert(relIdx) {
+      const items=bpFiltered(); const blk=items[relIdx];
+      if (!blk||!bpTargetBlock) { bpClose(); return; }
+      if (blk.type==='image') {
+        pickerAnchor = bpTargetBlock;
+        bpTargetBlock.innerHTML=''; bpClose(); openImgPicker(); return;
+      }
+      if (blk.type==='video') {
+        vidPickerAnchor = bpTargetBlock;
+        bpTargetBlock.innerHTML=''; bpClose(); openVideoPicker(); return;
+      }
+      bpTargetBlock.innerHTML='';
+      if (blk.type==='hr') {
+        const hr=createBlock('hr',''); const next=createBlock('p','');
+        bpTargetBlock.replaceWith(hr); hr.after(next); focusStart(next);
+      } else { changeBlockType(blk.type,bpTargetBlock); }
+      syncToHidden(); scheduleAutosave(); updatePreview(); bpClose();
+    }
+    document.addEventListener('mousedown',e=>{if(bpOpen&&!bpEl.contains(e.target))bpClose();});
+    // ── Image blocks ──────────────────────────────────────────────────
+    let pickerAnchor = null;
+    function refreshAlignBtns(block, align) {
+      block.querySelectorAll('.img-ab[data-align]').forEach(b=>b.classList.toggle('on', b.dataset.align===align));
+    }
+    function createImgBlock(mediaId, alt, align) {
+      alt   = alt   ?? '';
+      align = align ?? 'center';
+      const el = document.createElement('div');
+      el.className='be-block'; el.dataset.type='image';
+      el.dataset.mediaId=mediaId; el.dataset.alt=alt; el.dataset.align=align;
+      el.contentEditable='false';
+      el.innerHTML = `
+        <div class="be-img-ctrl">
+          <button class="img-ab" data-align="left"   title="Float left"   onclick="imgAlign(this)">◧ left</button>
+          <button class="img-ab" data-align="center" title="Center"       onclick="imgAlign(this)">▣ center</button>
+          <button class="img-ab" data-align="right"  title="Float right"  onclick="imgAlign(this)">◨ right</button>
+          <button class="img-ab" data-align="full"   title="Full width"   onclick="imgAlign(this)">▭ full</button>
+          <div class="img-ctrl-sep"></div>
+          <button class="img-ab del" title="Remove image" onclick="imgDelete(this)">✕</button>
+        </div>
+        <img class="be-img" src="/api/media/${mediaId}/raw" alt="">
+        <input class="be-img-cap" type="text" placeholder="Caption / alt text…" value="">
+      `;
+      el.querySelector('.be-img').alt = alt;
+      el.querySelector('.be-img-cap').value = alt;
+      refreshAlignBtns(el, align);
+      el.querySelector('.be-img-cap').addEventListener('input', function() {
+        el.dataset.alt = this.value;
+        el.querySelector('.be-img').alt = this.value;
+        syncToHidden(); scheduleAutosave();
+      });
+      el.querySelector('.be-img-cap').addEventListener('click', e=>e.stopPropagation());
+      el.addEventListener('click', e=>{
+        if (e.target.closest('.img-ab')) return;
+        e.stopPropagation();
+        beEditor.querySelectorAll('.be-block[data-type="image"]').forEach(b=>b.classList.remove('img-sel'));
+        el.classList.add('img-sel');
+      });
+      return el;
+    }
+    window.imgAlign = function(btn) {
+      const block=btn.closest('.be-block[data-type="image"]'); if(!block) return;
+      block.dataset.align=btn.dataset.align;
+      refreshAlignBtns(block, btn.dataset.align);
+      syncToHidden(); scheduleAutosave(); updatePreview();
+    };
+    window.imgDelete = function(btn) {
+      const block=btn.closest('.be-block[data-type="image"]'); if(!block) return;
+      const prev=block.previousElementSibling, next=block.nextElementSibling;
+      block.remove();
+      if (next&&next.contentEditable!=='false') focusStart(next);
+      else if (prev&&prev.contentEditable!=='false') focusEnd(prev);
+      else { const p=createBlock('p',''); beEditor.appendChild(p); focusStart(p); }
+      syncToHidden(); scheduleAutosave(); updatePreview();
+    };
+    // Deselect image blocks on outside click
+    document.addEventListener('click', e=>{
+      if (!e.target.closest('.be-block[data-type="image"]'))
+        beEditor.querySelectorAll('.be-block[data-type="image"]').forEach(b=>b.classList.remove('img-sel'));
+    });
+    // ── Image picker ──────────────────────────────────────────────────
+    window.openImgPicker = function() {
+      pickerAnchor = getFocusedBlock();
+      document.getElementById('img-pick-overlay').classList.add('open');
+      renderPickerGrid();
+    };
+    window.closeImgPicker = function() {
+      document.getElementById('img-pick-overlay').classList.remove('open');
+    };
+    function renderPickerGrid() {
+      const grid=document.getElementById('img-pick-grid');
+      const images=mediaData.filter(m=>m.mime_type?.startsWith('image/'));
+      if (!images.length) {
+        grid.innerHTML='<div class="img-pick-empty">No images yet.<br>Upload one to get started.</div>'; return;
+      }
+      grid.innerHTML=images.map(m=>`
+        <div class="img-pick-thumb" onclick="pickInsert('${m.id}','${escHtml(m.alt??m.filename)}')">
+          <img src="/api/media/${m.id}/raw" alt="${escHtml(m.alt??m.filename)}" loading="lazy">
+          <div class="img-pick-name">${escHtml(m.filename)}</div>
+        </div>`).join('');
+    }
+    window.pickInsert = function(mediaId, alt) {
+      closeImgPicker();
+      doInsertImg(mediaId, alt||'');
+    };
+    function doInsertImg(mediaId, alt) {
+      const block=createImgBlock(mediaId, alt, 'center');
+      const anchor=pickerAnchor;
+      if (anchor) {
+        anchor.after(block);
+        if (!block.nextElementSibling||block.nextElementSibling.dataset.type==='image')
+          block.after(createBlock('p',''));
+      } else {
+        beEditor.appendChild(block);
+        beEditor.appendChild(createBlock('p',''));
+      }
+      syncToHidden(); scheduleAutosave(); updatePreview();
+    }
+    // Upload from file (native picker — supports iCloud Drive, Dropbox, Google Drive via OS)
+    document.getElementById('img-file-inp').addEventListener('change', async function() {
+      const file=this.files[0]; if (!file) return;
+      this.value='';
+      const btn=document.querySelector('.img-pick-upload');
+      const orig=btn.textContent; btn.textContent='Uploading…'; btn.disabled=true;
+      const fd=new FormData(); fd.append('file',file); fd.append('alt',''); fd.append('folder','');
+      try {
+        const res=await fetch('/api/media',{method:'POST',credentials:'include',body:fd});
+        if (res.ok) {
+          const media=await res.json();
+          mediaData.unshift(media);
+          closeImgPicker();
+          doInsertImg(media.id, media.alt??'');
+        } else { alert('Upload failed'); }
+      } catch { alert('Upload error'); }
+      finally { btn.textContent=orig; btn.disabled=false; }
+    });
+    window.imgPickTab = function(tab, btn) {
+      document.querySelectorAll('.img-pick-tab').forEach(b=>b.classList.remove('active'));
+      document.querySelectorAll('.img-pick-pane').forEach(p=>p.classList.remove('active'));
+      btn.classList.add('active');
+      document.getElementById('img-pick-pane-'+tab).classList.add('active');
+      if (tab==='url') setTimeout(()=>document.getElementById('img-url-inp').focus(), 40);
+    };
+    window.importFromUrl = async function() {
+      const inp = document.getElementById('img-url-inp');
+      const url = inp.value.trim();
+      if (!url) return;
+      const btn = document.getElementById('img-url-btn');
+      const status = document.getElementById('img-url-status');
+      btn.disabled=true; btn.textContent='Wird geladen…'; status.textContent='';
+      try {
+        const res = await fetch('/api/media/import-url', {
+          method:'POST', credentials:'include',
+          headers:{'Content-Type':'application/json'},
+          body: JSON.stringify({ url, alt:'', folder:'' })
+        });
+        if (!res.ok) { const e=await res.json().catch(()=>({})); status.textContent='Fehler: '+(e.error||res.status); return; }
+        const media = await res.json();
+        mediaData.unshift(media);
+        closeImgPicker();
+        doInsertImg(media.id, media.alt??'');
+        inp.value='';
+      } catch(e) {
+        status.textContent='Netzwerkfehler: '+e.message;
+      } finally {
+        btn.disabled=false; btn.textContent='Importieren';
+      }
+    };
+    document.getElementById('img-url-inp').addEventListener('keydown', e=>{
+      if (e.key==='Enter') { e.preventDefault(); importFromUrl(); }
+    });
+    function escHtml(str) {
+      return String(str??'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    }
+    // ── Video blocks ──────────────────────────────────────────────────
+    let vidPickerAnchor = null;
+    function parseVideoUrl(url) {
+      url = (url||'').trim();
+      let m = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
+      if (m) return `https://www.youtube.com/embed/${m[1]}?rel=0`;
+      m = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+      if (m) return `https://player.vimeo.com/video/${m[1]}`;
+      m = url.match(/wistia\.(?:com|net)\/(?:medias|embed\/iframe)\/(\w+)/);
+      if (m) return `https://fast.wistia.net/embed/iframe/${m[1]}`;
+      return null; // direct file URL — use <video> tag
+    }
+    function createVideoBlock(url) {
+      const embed = parseVideoUrl(url);
+      const isDirect = /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(url);
+      const el = document.createElement('div');
+      el.className='be-block'; el.dataset.type='video';
+      el.dataset.videoUrl = url;
+      el.contentEditable='false';
+      let mediaHtml;
+      if (embed) {
+        mediaHtml = `<iframe src="${escHtml(embed)}" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe><div class="be-video-overlay"></div>`;
+      } else if (isDirect) {
+        mediaHtml = `<video src="${escHtml(url)}" controls></video>`;
+      } else {
+        mediaHtml = `<div style="padding:20px;color:var(--muted);font-size:11px;font-family:var(--mono);text-align:center;">Unsupported video URL</div>`;
+      }
+      el.innerHTML = `
+        <div class="be-video-wrap">${mediaHtml}</div>
+        <div class="be-vid-ctrl">
+          <input class="be-vid-url" type="text" value="${escHtml(url)}" readonly tabindex="-1">
+          <button class="img-ab del" onclick="vidDelete(this)" title="Remove video">✕ remove</button>
+        </div>`;
+      el.addEventListener('click', e=>{
+        if (e.target.closest('.img-ab')) return;
+        e.stopPropagation();
+        beEditor.querySelectorAll('.be-block[data-type="video"]').forEach(b=>b.classList.remove('vid-sel'));
+        el.classList.add('vid-sel');
+      });
+      return el;
+    }
+    window.vidDelete = function(btn) {
+      const block=btn.closest('.be-block[data-type="video"]'); if(!block) return;
+      const prev=block.previousElementSibling, next=block.nextElementSibling;
+      block.remove();
+      if (next&&next.contentEditable!=='false') focusStart(next);
+      else if (prev&&prev.contentEditable!=='false') focusEnd(prev);
+      else { const p=createBlock('p',''); beEditor.appendChild(p); focusStart(p); }
+      syncToHidden(); scheduleAutosave(); updatePreview();
+    };
+    document.addEventListener('click', e=>{
+      if (!e.target.closest('.be-block[data-type="video"]'))
+        beEditor.querySelectorAll('.be-block[data-type="video"]').forEach(b=>b.classList.remove('vid-sel'));
+    });
+    window.openVideoPicker = function() {
+      vidPickerAnchor = getFocusedBlock();
+      const inp = document.getElementById('vid-url-inp');
+      inp.value = '';
+      document.getElementById('vid-url-overlay').classList.add('open');
+      setTimeout(()=>inp.focus(), 60);
+    };
+    window.closeVideoPicker = function() {
+      document.getElementById('vid-url-overlay').classList.remove('open');
+    };
+    window.confirmVideoUrl = function() {
+      const url = document.getElementById('vid-url-inp').value.trim();
+      if (!url) return;
+      closeVideoPicker();
+      const block = createVideoBlock(url);
+      const anchor = vidPickerAnchor;
+      if (anchor) {
+        anchor.after(block);
+        if (!block.nextElementSibling||block.nextElementSibling.contentEditable==='false')
+          block.after(createBlock('p',''));
+        if (anchor.innerText.trim()==='') anchor.remove();
+      } else {
+        beEditor.appendChild(block);
+        beEditor.appendChild(createBlock('p',''));
+      }
+      syncToHidden(); scheduleAutosave(); updatePreview();
+    };
+    document.getElementById('vid-url-inp').addEventListener('keydown', e=>{
+      if (e.key==='Enter')  { e.preventDefault(); confirmVideoUrl(); }
+      if (e.key==='Escape') { e.preventDefault(); closeVideoPicker(); }
+    });
+    // ── Init ──────────────────────────────────────────────────────────
+    renderMetaPanel();
+    parseMd(IS_NEW ? '' : (entryData?.data?.body ?? ''));
+    syncToHidden(); // serializes blocks → bodyInput, then calls updateWc()
+    updatePreview();
+    if (!IS_NEW) setIndicator('saved');
+  </script>
+  <!-- Video URL dialog -->
+  <div id="vid-url-overlay" class="vid-url-overlay" onclick="if(event.target===this)closeVideoPicker()">
+    <div class="vid-url-box">
+      <div class="vid-url-title">Insert Video</div>
+      <input id="vid-url-inp" class="vid-url-inp" type="url" placeholder="https://youtu.be/… or https://vimeo.com/… or .mp4 URL" />
+      <div class="vid-url-hint">YouTube · Vimeo · Wistia · direct MP4/WebM URL</div>
+      <div class="vid-url-actions">
+        <button class="vid-url-cancel" onclick="closeVideoPicker()">Cancel</button>
+        <button class="vid-url-ok" onclick="confirmVideoUrl()">Insert</button>
+      </div>
+    </div>
+  </div>
+  <!-- Image picker sheet -->
+  <div id="img-pick-overlay" class="img-pick-overlay" onclick="if(event.target===this)closeImgPicker()">
+    <div class="img-pick-sheet">
+      <div class="img-pick-head">
+        <span class="img-pick-title">Insert Image</span>
+        <button class="img-pick-upload" onclick="document.getElementById('img-file-inp').click()">↑ Upload</button>
+        <button class="img-pick-close" onclick="closeImgPicker()">×</button>
+      </div>
+      <div class="img-pick-tabs">
+        <button class="img-pick-tab active" onclick="imgPickTab('library',this)">Library</button>
+        <button class="img-pick-tab" onclick="imgPickTab('url',this)">From URL</button>
+      </div>
+      <div id="img-pick-pane-library" class="img-pick-pane active">
+        <div class="img-pick-body">
+          <div id="img-pick-grid" class="img-pick-grid"></div>
+        </div>
+      </div>
+      <div id="img-pick-pane-url" class="img-pick-pane">
+        <div class="img-url-pane">
+          <input id="img-url-inp" class="img-url-inp" type="url" placeholder="https://…" />
+          <div class="img-url-hint">
+            <strong>Dropbox</strong> — Teilen → Link kopieren<br>
+            <strong>Google Drive</strong> — Freigeben → Link abrufen<br>
+            <strong>OneDrive</strong> — Teilen → Link kopieren<br>
+            <strong>Jede öffentliche Bild-URL</strong>
+          </div>
+          <div id="img-url-status" class="img-url-status"></div>
+          <button id="img-url-btn" class="img-url-btn" onclick="importFromUrl()">Importieren</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <input type="file" id="img-file-inp" accept="image/*" style="display:none">
+  <script src="/sidebar.js"></script>
+  <script src="/router.js"></script>
+</body>
+</html>