@a83/orbiter-admin 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a83/orbiter-admin",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Standalone admin server for Orbiter CMS",
   "type": "module",
   "main": "./src/server.js",
@@ -26,7 +26,7 @@
     "directory": "packages/admin"
   },
   "dependencies": {
-    "@a83/orbiter-core": "^0.3.1",
+    "@a83/orbiter-core": "^0.3.2",
     "@hono/node-server": "^1.14.4",
     "hono": "^4.7.11"
   }

package/public/editor.html

@@ -114,6 +114,13 @@
     /* 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); }
+    .bool-toggle { display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer; user-select:none; }
+    .bool-toggle input[type=checkbox] { display:none; }
+    .bool-track { width:32px; height:18px; border-radius:9px; background:var(--line); border:1px solid var(--line); transition:background .15s,border-color .15s; flex-shrink:0; position:relative; }
+    .bool-track::after { content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--muted); transition:transform .15s,background .15s; }
+    .bool-toggle input:checked + .bool-track { background:var(--accent); border-color:var(--accent); }
+    .bool-toggle input:checked + .bool-track::after { transform:translateX(14px); background:#fff; }
+    .bool-label { font-size:11px; color:var(--text); font-family:var(--mono); }
     .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; }
@@ -331,6 +338,19 @@
     }
     .vid-url-cancel:hover { border-color:var(--mid); color:var(--text); }
 
+    /* ── Callout blocks ─────────────────────────────────────────── */
+    .be-block[data-type="callout"] { background:color-mix(in srgb,var(--accent) 8%,transparent); border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; padding:10px 14px; margin:4px 0; color:var(--text); font-size:13px; }
+
+    /* ── Table blocks ───────────────────────────────────────────── */
+    .be-block[data-type="table"] { padding:0; overflow:auto; margin:4px 0; }
+    .be-table { border-collapse:collapse; width:100%; font-size:12px; }
+    .be-table th,.be-table td { border:1px solid var(--line); padding:6px 10px; min-width:80px; outline:none; }
+    .be-table th { background:var(--bg2); font-weight:600; }
+    .be-table td:focus,.be-table th:focus { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,transparent); }
+    .table-toolbar { display:flex; gap:6px; padding:6px 8px; background:var(--bg2); border-bottom:1px solid var(--line); font-size:10px; }
+    .table-toolbar button { background:none; border:1px solid var(--line); color:var(--text); padding:2px 8px; border-radius:var(--radius); cursor:pointer; font-size:10px; font-family:var(--mono); }
+    .table-toolbar button:hover { border-color:var(--accent); color:var(--accent); }
+
     /* 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; }
@@ -357,6 +377,7 @@
           <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>
+        <a id="btn-preview-link" href="#" target="_blank" rel="noopener" title="Open preview" style="display:none;font-size:11px;color:var(--muted);text-decoration:none;padding:4px 8px;border:1px solid var(--line);border-radius:var(--radius);">↗ Preview</a>
         <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>
@@ -438,13 +459,24 @@
       location.replace('/login.html');
     });
 
-    // Parse ?collection=X&slug=Y from URL
+    // Parse ?collection=X&slug=Y&singleton=1 from URL
     const params = new URLSearchParams(location.search);
     const COLLECTION = params.get('collection');
-    const SLUG       = params.get('slug') ?? 'new';
-    const IS_NEW     = SLUG === 'new';
+    const IS_SINGLETON = params.get('singleton') === '1';
 
     if (!COLLECTION) { location.replace('/collections.html'); }
+
+    // Singleton: resolve the canonical entry slug before proceeding
+    let SLUG = params.get('slug') ?? 'new';
+    if (IS_SINGLETON) {
+      const singletonEntry = await fetch(`/api/collections/${COLLECTION}/singleton`,{credentials:'include'}).then(r=>r.ok?r.json():null);
+      if (singletonEntry?.slug) {
+        SLUG = singletonEntry.slug;
+        history.replaceState(null,'',`/editor.html?collection=${encodeURIComponent(COLLECTION)}&slug=${encodeURIComponent(SLUG)}&singleton=1`);
+      }
+    }
+    const IS_NEW = SLUG === 'new';
+
     document.getElementById('collection-id-display').textContent = COLLECTION;
 
     // Load collection schema + entry
@@ -474,6 +506,17 @@
       }
     }
 
+    // Fetch preview URL for this collection
+    const previewMeta = await fetch(`/api/meta/preview_url~${COLLECTION}`,{credentials:'include'}).then(r=>r.json()).catch(()=>null);
+    const previewUrlTemplate = previewMeta?.value || '';
+    function updatePreviewLink() {
+      const btn = document.getElementById('btn-preview-link');
+      if (!btn || !previewUrlTemplate) return;
+      const slug = document.getElementById('slug-input')?.value || currentSlug || SLUG;
+      btn.href = previewUrlTemplate.replace('{slug}', slug);
+      btn.style.display = '';
+    }
+
     // Set title + slug
     const titleInput = document.getElementById('title-input');
     titleInput.value = IS_NEW ? '' : (entryData?.data?.title ?? SLUG);
@@ -506,7 +549,10 @@
           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') {
+        if (field.type==='boolean') {
+          const checked = val===true||val==='true'||val===1;
+          fieldsHtml += `<label class="bool-toggle"><input type="checkbox" name="${key}"${checked?' checked':''} /><span class="bool-track"></span><span class="bool-label">${checked?'An':'Aus'}</span></label>`;
+        } else 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??'')}" />`;
@@ -518,7 +564,7 @@
             ${[['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') {
+        } else if (field.type==='image'||field.type==='media') {
           const hasVal = !!(val);
           fieldsHtml += `<div>
             <select class="field-select" name="${key}" id="media-sel-${key}">
@@ -657,6 +703,15 @@
         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);}});
       });
 
+      // Boolean toggle — live label + dirty
+      panel.querySelectorAll('.bool-toggle input[type=checkbox]').forEach(cb=>{
+        cb.addEventListener('change',()=>{
+          const lbl = cb.closest('.bool-toggle')?.querySelector('.bool-label');
+          if (lbl) lbl.textContent = cb.checked ? 'An' : 'Aus';
+          markDirty();
+        });
+      });
+
       // Publish / draft buttons
       document.getElementById('btn-publish').addEventListener('click',()=>saveEntry('published'));
       document.getElementById('btn-draft').addEventListener('click',()=>saveEntry('draft'));
@@ -665,6 +720,7 @@
       document.getElementById('slug-input').addEventListener('input', e=>{
         e.target.dataset.manual='1';
         document.getElementById('slug-preview').textContent = e.target.value || '…';
+        updatePreviewLink();
       });
 
       // Status select sync
@@ -816,7 +872,9 @@
       // Gather extra field values
       const data = { title, body };
       for (const [key, field] of extraFields) {
-        if (field.type==='array'||field.type==='weekdays') {
+        if (field.type==='boolean') {
+          data[key] = !!(document.querySelector(`[name="${key}"]`)?.checked);
+        } else 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') {
@@ -881,11 +939,21 @@
     const indicator = document.getElementById('autosave-indicator');
     let autosaveTimer = null;
 
+    let _dirty = false;
+    function markDirty() { _dirty = true; }
+    function markClean() { _dirty = false; }
+
+    window.addEventListener('beforeunload', e => {
+      if (_dirty) { e.preventDefault(); e.returnValue = ''; }
+    });
+
     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 ?? '';
+      if (state === 'saved') markClean();
+      if (state === 'pending') markDirty();
     }
 
     function scheduleAutosave() {
@@ -954,6 +1022,20 @@
           lines.push(`::video[${b.dataset.videoUrl ?? ''}]`);
           return;
         }
+        if (type==='callout') {
+          lines.push(`::callout[${b.innerHTML.replace(/\n+/g,' ')}]`);
+          return;
+        }
+        if (type==='table') {
+          const tbl = b.querySelector('table');
+          if (tbl) {
+            const clean = tbl.cloneNode(true);
+            clean.querySelectorAll('[contenteditable]').forEach(c=>c.removeAttribute('contenteditable'));
+            // Collapse newlines so the chunk-based parser never splits table HTML
+            lines.push(`::table[${clean.outerHTML.replace(/\n+/g,' ')}]`);
+          }
+          return;
+        }
         const text = htmlToMd(b.innerHTML);
         if      (type==='h1')         lines.push('# '+text);
         else if (type==='h2')         lines.push('## '+text);
@@ -970,16 +1052,43 @@
 
     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…' };
+    const BLK_PH = { h1:'Heading 1',h2:'Heading 2',h3:'Heading 3',blockquote:'Quote…',pre:'Code…',ul:'List item',ol:'List item',callout:'Callout…',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 if (type==='table') {
+        el.contentEditable='false';
+        el.innerHTML = `<div class="table-toolbar">
+          <button onclick="tableAddRow(this)">+ Row</button>
+          <button onclick="tableAddCol(this)">+ Col</button>
+          <button onclick="tableDelRow(this)">− Row</button>
+          <button onclick="tableDelCol(this)">− Col</button>
+        </div>
+        <table class="be-table">
+          <thead><tr><th contenteditable="true"></th><th contenteditable="true"></th></tr></thead>
+          <tbody><tr><td contenteditable="true"></td><td contenteditable="true"></td></tr><tr><td contenteditable="true"></td><td contenteditable="true"></td></tr></tbody>
+        </table>`;
+      }
       else { el.contentEditable='true'; el.innerHTML=content||''; }
       return el;
     }
 
+    function createTableBlock(tableEl) {
+      const el = document.createElement('div');
+      el.className='be-block'; el.dataset.type='table'; el.dataset.ph='';
+      el.contentEditable='false';
+      el.innerHTML = `<div class="table-toolbar">
+        <button onclick="tableAddRow(this)">+ Row</button>
+        <button onclick="tableAddCol(this)">+ Col</button>
+        <button onclick="tableDelRow(this)">− Row</button>
+        <button onclick="tableDelCol(this)">− Col</button>
+      </div>`;
+      el.appendChild(tableEl);
+      return el;
+    }
+
     function parseMd(md) {
       beEditor.innerHTML='';
       if (!md) { beEditor.appendChild(createBlock('p','')); return; }
@@ -988,6 +1097,27 @@
         // Video block: ::video[url]
         const vidM = chunk.match(/^::video\[(.+)\]$/);
         if (vidM) { beEditor.appendChild(createVideoBlock(vidM[1])); return; }
+        // Callout block: ::callout[html]
+        const calloutM = chunk.match(/^::callout\[([\s\S]*)\]$/);
+        if (calloutM) {
+          const b = createBlock('callout', '');
+          b.innerHTML = calloutM[1];
+          beEditor.appendChild(b);
+          return;
+        }
+        // Table block: ::table[<table>...</table>]
+        const tableM = chunk.match(/^::table\[([\s\S]*)\]$/);
+        if (tableM) {
+          const tmp = document.createElement('div');
+          tmp.innerHTML = tableM[1];
+          const tbl = tmp.querySelector('table');
+          if (tbl) {
+            tbl.className = 'be-table';
+            tbl.querySelectorAll('th,td').forEach(c=>c.setAttribute('contenteditable','true'));
+            beEditor.appendChild(createTableBlock(tbl));
+          }
+          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; }
@@ -1047,7 +1177,30 @@
         if (e.key==='Enter')     { e.preventDefault(); bpInsert(bpIdx); return; }
         if (e.key==='Escape')    { e.preventDefault(); bpClose(); return; }
       }
+      // Tab inside a table cell: move to next/prev cell
+      if (e.key==='Tab') {
+        const cell=e.target.closest('.be-table th,.be-table td');
+        if (cell) {
+          e.preventDefault();
+          const table=cell.closest('table');
+          const cells=Array.from(table.querySelectorAll('th[contenteditable],td[contenteditable]'));
+          const idx=cells.indexOf(cell);
+          const nextCell=e.shiftKey ? cells[idx-1] : cells[idx+1];
+          if (nextCell) { nextCell.focus(); } else if (!e.shiftKey) {
+            // Tab past last cell: add a new row
+            const cols=table.rows[0].cells.length;
+            const tr=document.createElement('tr');
+            for (let i=0;i<cols;i++){const td=document.createElement('td');td.contentEditable='true';tr.appendChild(td);}
+            table.tBodies[0].appendChild(tr);
+            tr.cells[0].focus();
+            syncToHidden(); scheduleAutosave();
+          }
+          return;
+        }
+      }
       const b=getFocusedBlock(); if (!b) return;
+      // Skip block-level Enter/Backspace handling when focus is inside a table cell
+      if (b.dataset.type==='table') return;
       if (e.key==='Enter'&&!e.shiftKey) {
         e.preventDefault();
         const type=b.dataset.type; const newType=(type==='ul'||type==='ol')?type:'p';
@@ -1062,7 +1215,7 @@
     });
 
     beEditor.addEventListener('input',()=>{
-      const b=getFocusedBlock(); if (!b||b.dataset.type==='hr') { syncToHidden(); scheduleAutosave(); updatePreview(); return; }
+      const b=getFocusedBlock(); if (!b||b.dataset.type==='hr'||b.dataset.type==='table') { 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;
@@ -1181,6 +1334,8 @@
       {label:'Heading 3',  icon:'H3',  hint:'###', type:'h3'},
       {label:'Quote',      icon:'❝',   hint:'>',   type:'blockquote'},
       {label:'Code block', icon:'{}',  hint:'```', type:'pre'},
+      {label:'Callout',    icon:'ℹ',   hint:'note', type:'callout'},
+      {label:'Table',      icon:'▦',   hint:'tbl',  type:'table'},
       {label:'List',       icon:'·',   hint:'-',   type:'ul'},
       {label:'Numbered',   icon:'1.',  hint:'1.',  type:'ol'},
       {label:'Divider',    icon:'—',   hint:'---', type:'hr'},
@@ -1236,6 +1391,10 @@
       if (blk.type==='hr') {
         const hr=createBlock('hr',''); const next=createBlock('p','');
         bpTargetBlock.replaceWith(hr); hr.after(next); focusStart(next);
+      } else if (blk.type==='table') {
+        const tbl=createBlock('table',''); const next=createBlock('p','');
+        bpTargetBlock.replaceWith(tbl); tbl.after(next);
+        const firstCell=tbl.querySelector('th,td'); if (firstCell) firstCell.focus();
       } else { changeBlockType(blk.type,bpTargetBlock); }
       syncToHidden(); scheduleAutosave(); updatePreview(); bpClose();
     }
@@ -1540,8 +1699,34 @@
       if (e.key==='Escape') { e.preventDefault(); closeVideoPicker(); }
     });
 
+    // ── Table toolbar helpers ─────────────────────────────────────────
+    window.tableAddRow = function(btn) {
+      const table = btn.closest('.be-block').querySelector('table');
+      const cols = table.rows[0].cells.length;
+      const tr = document.createElement('tr');
+      for (let i=0;i<cols;i++) { const td=document.createElement('td'); td.contentEditable='true'; tr.appendChild(td); }
+      table.tBodies[0].appendChild(tr);
+      syncToHidden(); scheduleAutosave();
+    };
+    window.tableAddCol = function(btn) {
+      const table = btn.closest('.be-block').querySelector('table');
+      Array.from(table.rows).forEach(row => { const cell = row.cells[0].tagName==='TH' ? document.createElement('th') : document.createElement('td'); cell.contentEditable='true'; row.appendChild(cell); });
+      syncToHidden(); scheduleAutosave();
+    };
+    window.tableDelRow = function(btn) {
+      const table = btn.closest('.be-block').querySelector('table');
+      if (table.tBodies[0].rows.length > 1) table.tBodies[0].deleteRow(-1);
+      syncToHidden(); scheduleAutosave();
+    };
+    window.tableDelCol = function(btn) {
+      const table = btn.closest('.be-block').querySelector('table');
+      if (table.rows[0].cells.length > 1) Array.from(table.rows).forEach(row => row.deleteCell(-1));
+      syncToHidden(); scheduleAutosave();
+    };
+
     // ── Init ──────────────────────────────────────────────────────────
     renderMetaPanel();
+    updatePreviewLink();
     parseMd(IS_NEW ? '' : (entryData?.data?.body ?? ''));
     syncToHidden(); // serializes blocks → bodyInput, then calls updateWc()
     updatePreview();

package/public/entries.html

@@ -39,6 +39,12 @@
     .filter-tab { display:inline-flex; align-items:center; padding:3px 11px; font-size:10px; font-family:var(--mono); border-radius:20px; border:1px solid var(--line); background:none; color:var(--muted); cursor:pointer; transition:all 0.12s; }
     .filter-tab:hover { color:var(--text); border-color:var(--mid); }
     .filter-tab.active { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
+    .drag-col { width:24px; padding:0 4px !important; text-align:center; }
+    .drag-handle { color:var(--line); cursor:grab; font-size:13px; line-height:1; user-select:none; display:block; padding:4px 2px; }
+    .drag-handle:hover { color:var(--muted); }
+    tr.drag-over td { border-top:2px solid var(--accent); }
+    tr[draggable="true"] { transition:opacity .15s; }
+    tr.dragging { opacity:.4; }
   </style>
 </head>
 <body>
@@ -158,10 +164,12 @@
         wrap.innerHTML = '<div class="empty"><div class="empty-icon">◈</div>No entries yet</div>';
         return;
       }
+      const canSort = !activeFilter;
       wrap.innerHTML = `
         <table>
           <thead>
             <tr>
+              ${canSort ? '<th class="drag-col"></th>' : ''}
               <th class="cb-col"><input type="checkbox" id="check-all" title="Select all" /></th>
               <th>Title / Slug</th><th>Status</th><th>Updated</th><th></th>
             </tr>
@@ -172,7 +180,8 @@
               const updated = e.updated_at ? e.updated_at.split(' ')[0] : '—';
               const nextStatus = e.status === 'published' ? 'draft' : 'published';
               const toggleLabel = e.status === 'published' ? 'Unpublish' : 'Publish';
-              return `<tr data-slug="${e.slug}">
+              return `<tr data-slug="${e.slug}"${canSort ? ' draggable="true"' : ''}>
+                ${canSort ? `<td class="drag-col"><span class="drag-handle" title="Drag to reorder">⠿</span></td>` : ''}
                 <td class="cb-col"><input type="checkbox" class="row-cb" data-slug="${e.slug}" ${selected.has(e.slug) ? 'checked' : ''} /></td>
                 <td>
                   <div style="color:var(--heading);font-weight:500">${title}</div>
@@ -212,6 +221,47 @@
         });
       });
 
+      // Drag-to-reorder
+      if (canSort) {
+        let dragSrc = null;
+        wrap.querySelectorAll('tr[draggable]').forEach(row => {
+          row.addEventListener('dragstart', e => {
+            dragSrc = row;
+            row.classList.add('dragging');
+            e.dataTransfer.effectAllowed = 'move';
+          });
+          row.addEventListener('dragend', () => {
+            dragSrc = null;
+            wrap.querySelectorAll('tr').forEach(r => r.classList.remove('dragging','drag-over'));
+          });
+          row.addEventListener('dragover', e => {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+            wrap.querySelectorAll('tr').forEach(r => r.classList.remove('drag-over'));
+            if (row !== dragSrc) row.classList.add('drag-over');
+          });
+          row.addEventListener('dragleave', () => row.classList.remove('drag-over'));
+          row.addEventListener('drop', async e => {
+            e.preventDefault();
+            row.classList.remove('drag-over');
+            if (!dragSrc || dragSrc === row) return;
+            const tbody = row.closest('tbody');
+            const rows  = [...tbody.querySelectorAll('tr')];
+            const fromIdx = rows.indexOf(dragSrc);
+            const toIdx   = rows.indexOf(row);
+            tbody.removeChild(dragSrc);
+            if (fromIdx < toIdx) row.after(dragSrc);
+            else row.before(dragSrc);
+            const slugs = [...tbody.querySelectorAll('tr')].map(r => r.dataset.slug);
+            await fetch(`/api/collections/${colId}/entries/reorder`, {
+              method: 'PATCH', credentials: 'include',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ slugs }),
+            });
+          });
+        });
+      }
+
       // Status toggle
       wrap.querySelectorAll('.status-toggle').forEach(btn => {
         btn.addEventListener('click', async () => {

package/public/schema.html

@@ -106,15 +106,16 @@
     const FIELD_TYPES = [
       {value:'string',   label:'String — single line text'},
       {value:'richtext', label:'Rich Text — block editor'},
+      {value:'boolean',  label:'Boolean — on / off toggle'},
       {value:'date',     label:'Date'},
       {value:'datetime', label:'Date & time'},
-      {value:'array',    label:'Array — tags, comma-separated'},
-      {value:'media',    label:'Media — image / file'},
-      {value:'select',   label:'Select — dropdown'},
-      {value:'url',      label:'URL'},
       {value:'number',   label:'Number'},
-      {value:'weekdays', label:'Weekdays'},
+      {value:'url',      label:'URL'},
+      {value:'select',   label:'Select — dropdown'},
+      {value:'array',    label:'Array — tags, comma-separated'},
+      {value:'image',    label:'Image — media picker'},
       {value:'relation', label:'Relation — link to collection'},
+      {value:'weekdays', label:'Weekdays'},
     ];
 
     let allColls = [];
@@ -272,7 +273,16 @@
             <label>Label</label>
             <input class="input" id="new-col-label" placeholder="e.g. Posts, Products" />
           </div>
+          <div class="field-group" style="grid-column:1/-1">
+            <label>Preview URL</label>
+            <input class="input" id="new-preview-url" placeholder="https://mysite.com/posts/{slug}" />
+            <div class="field-id-hint">{slug} is replaced with the entry slug when opening preview</div>
+          </div>
         </div>
+        <label style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);cursor:pointer;margin-bottom:12px;">
+          <input type="checkbox" id="new-col-singleton" />
+          <span>Singleton — single entry, opens directly from sidebar (for About pages, site config, etc.)</span>
+        </label>
         <div class="section-label">Fields</div>
         <div id="new-field-rows" class="field-rows"></div>
         <div class="editor-actions">
@@ -292,10 +302,14 @@
         const label=document.getElementById('new-col-label').value.trim();
         if (!id||!label) { showBannerIn('banner','banner-err','ID and label are required'); return; }
         const schema=serializeSchema(document.getElementById('new-field-rows'));
-        const res=await fetch('/api/collections',{method:'POST',credentials:'include',headers:{'Content-Type':'application/json'},body:JSON.stringify({id,label,schema})});
+        const previewUrl=(document.getElementById('new-preview-url')?.value??'').trim();
+        const singleton=!!(document.getElementById('new-col-singleton')?.checked);
+        const res=await fetch('/api/collections',{method:'POST',credentials:'include',headers:{'Content-Type':'application/json'},body:JSON.stringify({id,label,schema,singleton})});
         const json=await res.json();
-        if (res.ok) { selectedId=id; await loadColls(); const col=allColls.find(c=>c.id===id); if(col)renderEditor(col); }
-        else showBannerIn('banner','banner-err',json.error??'Failed');
+        if (res.ok) {
+          if (previewUrl) await fetch(`/api/meta/preview_url~${id}`,{method:'PUT',credentials:'include',headers:{'Content-Type':'application/json'},body:JSON.stringify({value:previewUrl})}).catch(()=>{});
+          selectedId=id; await loadColls(); const col=allColls.find(c=>c.id===id); if(col)renderEditor(col);
+        } else showBannerIn('banner','banner-err',json.error??'Failed');
       });
     }
 
@@ -319,7 +333,16 @@
             <label>Label</label>
             <input class="input" id="edit-label" value="${escHtml(col.label)}" />
           </div>
+          <div class="field-group" style="grid-column:1/-1">
+            <label>Preview URL</label>
+            <input class="input" id="edit-preview-url" placeholder="https://mysite.com/posts/{slug}" />
+            <div class="field-id-hint">{slug} is replaced with the entry slug when opening preview</div>
+          </div>
         </div>
+        <label style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);cursor:pointer;margin-bottom:12px;">
+          <input type="checkbox" id="edit-col-singleton"${col.singleton?' checked':''} />
+          <span>Singleton — single entry, opens directly from sidebar</span>
+        </label>
         <div class="section-label">Fields</div>
         ${total>0?'<div class="delete-warn">Adding fields is non-destructive. Removing fields hides existing data but does not delete it.</div>':''}
         <div id="edit-field-rows" class="field-rows"></div>
@@ -334,10 +357,19 @@
       const rowsEl=document.getElementById('edit-field-rows');
       Object.entries(schema).forEach(([k,f])=>addFieldRow(rowsEl,k,f.label??k,f.type??'string',!!f.required,(f.options??[]).join(', '),f.collection??'',f.multiple!==false));
       document.getElementById('btn-add-edit').addEventListener('click',()=>addFieldRow(rowsEl));
+      // Load existing preview URL for this collection
+      fetch(`/api/meta/preview_url~${col.id}`,{credentials:'include'}).then(r=>r.json()).then(d=>{
+        const inp=document.getElementById('edit-preview-url'); if(inp)inp.value=d.value??'';
+      }).catch(()=>{});
       document.getElementById('btn-save-edit').addEventListener('click',async()=>{
         const label=document.getElementById('edit-label').value.trim();
         const schema=serializeSchema(rowsEl);
-        const res=await fetch(`/api/collections/${col.id}`,{method:'PUT',credentials:'include',headers:{'Content-Type':'application/json'},body:JSON.stringify({label,schema})});
+        const previewUrl=(document.getElementById('edit-preview-url')?.value??'').trim();
+        const singleton=!!(document.getElementById('edit-col-singleton')?.checked);
+        const [res] = await Promise.all([
+          fetch(`/api/collections/${col.id}`,{method:'PUT',credentials:'include',headers:{'Content-Type':'application/json'},body:JSON.stringify({label,schema,singleton})}),
+          fetch(`/api/meta/preview_url~${col.id}`,{method:'PUT',credentials:'include',headers:{'Content-Type':'application/json'},body:JSON.stringify({value:previewUrl})}),
+        ]);
         if (res.ok) { await loadColls(); showBannerIn('banner','banner-ok','Saved'); }
         else { const j=await res.json(); showBannerIn('banner','banner-err',j.error??'Failed'); }
       });

package/public/sidebar.js

@@ -40,14 +40,19 @@
         var frag = document.createDocumentFragment();
 
         topLevel.forEach(function (col) {
-          var isActive = (page === 'entries') && activeCol === col.id;
+          var isSingleton = !!col.singleton;
+          var isActive = isSingleton
+            ? (page === 'editor') && activeCol === col.id
+            : (page === 'entries') && activeCol === col.id;
           var a = document.createElement('a');
           a.className = 'nav-item' + (isActive ? ' active' : '');
-          a.href = '/entries.html?col=' + encodeURIComponent(col.id) + '&label=' + encodeURIComponent(col.label);
+          a.href = isSingleton
+            ? '/editor.html?collection=' + encodeURIComponent(col.id) + '&singleton=1'
+            : '/entries.html?col=' + encodeURIComponent(col.id) + '&label=' + encodeURIComponent(col.label);
           a.innerHTML =
-            '<span class="nav-icon">▤</span>' +
+            '<span class="nav-icon">' + (isSingleton ? '◈' : '▤') + '</span>' +
             '<span class="nav-label">' + col.label + '</span>' +
-            '<span class="nav-badge">' + col.total + '</span>';
+            (isSingleton ? '' : '<span class="nav-badge">' + col.total + '</span>');
           frag.appendChild(a);
 
           // Children

package/src/routes/collections.js

@@ -9,8 +9,9 @@ collectionRoutes.get('/', (c) => {
   const db   = openPod(c.get('podPath'));
   const cols = db.getCollections().map(col => ({
     ...col,
-    schema: col.schema ? JSON.parse(col.schema) : {},
-    total:  db.getEntries(col.id).length,
+    schema:    col.schema ? JSON.parse(col.schema) : {},
+    singleton: !!col.singleton,
+    total:     db.getEntries(col.id).length,
   }));
   db.close();
   return c.json(cols);
@@ -22,12 +23,26 @@ collectionRoutes.get('/:id', (c) => {
   const col = db.getCollection(c.req.param('id'));
   db.close();
   if (!col) return c.json({ error: 'Not found' }, 404);
-  return c.json({ ...col, schema: col.schema ? JSON.parse(col.schema) : {} });
+  return c.json({ ...col, schema: col.schema ? JSON.parse(col.schema) : {}, singleton: !!col.singleton });
+});
+
+// GET /api/collections/:id/singleton — get or auto-create the single entry
+collectionRoutes.get('/:id/singleton', (c) => {
+  const db  = openPod(c.get('podPath'));
+  const col = db.getCollection(c.req.param('id'));
+  if (!col) { db.close(); return c.json({ error: 'Not found' }, 404); }
+  let entries = db.getEntries(col.id);
+  if (entries.length === 0) {
+    db.createEntry(col.id, 'index', {}, 'draft');
+    entries = db.getEntries(col.id);
+  }
+  db.close();
+  return c.json(entries[0]);
 });
 
 // POST /api/collections  (admin only)
 collectionRoutes.post('/', requireAdmin, async (c) => {
-  const { id, label, schema = {} } = await c.req.json();
+  const { id, label, schema = {}, singleton = false } = await c.req.json();
   if (!id || !label) return c.json({ error: 'id and label are required' }, 400);
 
   const safeId = id.toLowerCase().replace(/[^a-z0-9_]/g, '_').replace(/^_+|_+$/g, '');
@@ -36,22 +51,22 @@ collectionRoutes.post('/', requireAdmin, async (c) => {
     db.close();
     return c.json({ error: `Collection "${safeId}" already exists` }, 409);
   }
-  db.createCollection(safeId, label, schema);
+  db.createCollection(safeId, label, schema, singleton);
   const created = db.getCollection(safeId);
   db.close();
-  return c.json({ ...created, schema }, 201);
+  return c.json({ ...created, schema, singleton: !!singleton }, 201);
 });
 
 // PUT /api/collections/:id  (admin only)
 collectionRoutes.put('/:id', requireAdmin, async (c) => {
-  const { label, schema } = await c.req.json();
+  const { label, schema, singleton } = await c.req.json();
   const db  = openPod(c.get('podPath'));
   const col = db.getCollection(c.req.param('id'));
   if (!col) { db.close(); return c.json({ error: 'Not found' }, 404); }
-  db.updateCollection(col.id, label ?? col.label, schema ?? JSON.parse(col.schema ?? '{}'));
+  db.updateCollection(col.id, label ?? col.label, schema ?? JSON.parse(col.schema ?? '{}'), singleton);
   const updated = db.getCollection(col.id);
   db.close();
-  return c.json({ ...updated, schema: updated.schema ? JSON.parse(updated.schema) : {} });
+  return c.json({ ...updated, schema: updated.schema ? JSON.parse(updated.schema) : {}, singleton: !!updated.singleton });
 });
 
 // DELETE /api/collections/:id  (admin only)

package/src/routes/entries.js

@@ -11,6 +11,19 @@ function fireWebhook(podPath) {
   if (url) fetch(url, { method: 'POST' }).catch(() => {});
 }
 
+// PATCH /api/collections/:id/entries/reorder — set sort_order by slug array
+entryRoutes.patch('/:collectionId/entries/reorder', async (c) => {
+  const { collectionId } = c.req.param();
+  const { slugs } = await c.req.json();
+  if (!Array.isArray(slugs)) return c.json({ error: 'slugs must be an array' }, 400);
+  const db  = openPod(c.get('podPath'));
+  const set = db.db.prepare('UPDATE _entries SET sort_order = ? WHERE collection_id = ? AND slug = ?');
+  const tx  = db.db.transaction(() => { slugs.forEach((slug, i) => set.run(i, collectionId, slug)); });
+  tx();
+  db.close();
+  return c.json({ ok: true });
+});
+
 // GET /api/collections/:id/entries?status=draft|published
 entryRoutes.get('/:collectionId/entries', (c) => {
   const { collectionId } = c.req.param();
@@ -95,7 +108,9 @@ entryRoutes.post('/:collectionId/entries/:slug/duplicate', (c) => {
   const db    = openPod(c.get('podPath'));
   const entry = db.getEntry(collectionId, slug);
   if (!entry) { db.close(); return c.json({ error: 'Not found' }, 404); }
-  const newSlug = slug + '-copy';
+  let newSlug = slug + '-copy';
+  let i = 2;
+  while (db.getEntry(collectionId, newSlug)) newSlug = `${slug}-copy-${i++}`;
   db.createEntry(collectionId, newSlug, entry.data, 'draft');
   const created = db.getEntry(collectionId, newSlug);
   db.close();

package/src/routes/meta.js

@@ -16,11 +16,14 @@ const ALLOWED_KEYS = [
   'format_version',
 ];
 
+const PREVIEW_URL_RE = /^preview_url\.[a-z0-9_-]+$/;
+
 // GET /api/meta — returns all allowed keys as a flat object
 metaRoutes.get('/', (c) => {
   const db  = openPod(c.get('podPath'));
   const out = {};
   for (const key of ALLOWED_KEYS) out[key] = db.getMeta(key) ?? null;
+  // preview_url keys are per-collection and not enumerated here
   db.close();
   return c.json(out);
 });
@@ -39,7 +42,7 @@ metaRoutes.put('/', async (c) => {
   const body = await c.req.json();
   const db   = openPod(c.get('podPath'));
   for (const [key, value] of Object.entries(body)) {
-    if (ALLOWED_KEYS.includes(key)) db.setMeta(key, value == null ? '' : String(value));
+    if (ALLOWED_KEYS.includes(key) || PREVIEW_URL_RE.test(key)) db.setMeta(key, value == null ? '' : String(value));
   }
   db.close();
   return c.json({ ok: true });
@@ -48,7 +51,7 @@ metaRoutes.put('/', async (c) => {
 // PUT /api/meta/:key — single key update
 metaRoutes.put('/:key', async (c) => {
   const key = c.req.param('key').replace(/~/g, '.');
-  if (!ALLOWED_KEYS.includes(key)) return c.json({ error: 'Key not allowed' }, 403);
+  if (!ALLOWED_KEYS.includes(key) && !PREVIEW_URL_RE.test(key)) return c.json({ error: 'Key not allowed' }, 403);
   const { value } = await c.req.json();
   const db = openPod(c.get('podPath'));
   db.setMeta(key, value == null ? '' : String(value));