Add version history, screenshots, embed generator, collections, npm search, format-on-save, and custom fonts

2026-02-27 01:47:16 -06:00
parent 6ca8519250
commit 0d84c56008
14 changed files with 1046 additions and 25 deletions
--- a/db.js
+++ b/db.js
@@ -54,6 +54,47 @@ db.exec(`

 db.exec(`CREATE INDEX IF NOT EXISTS idx_fiddles_listed_updated ON fiddles(listed, updated_at DESC)`);

+// Migration: add screenshot column
+try {
+  db.exec(`ALTER TABLE fiddles ADD COLUMN screenshot TEXT`);
+} catch (_) { /* column already exists */ }
+
+// Version history table
+db.exec(`
+  CREATE TABLE IF NOT EXISTS fiddle_versions (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    fiddle_id TEXT NOT NULL REFERENCES fiddles(id) ON DELETE CASCADE,
+    version INTEGER NOT NULL,
+    html TEXT NOT NULL DEFAULT '',
+    css TEXT NOT NULL DEFAULT '',
+    css_type TEXT NOT NULL DEFAULT 'css',
+    js TEXT NOT NULL DEFAULT '',
+    js_type TEXT NOT NULL DEFAULT 'javascript',
+    options TEXT NOT NULL DEFAULT '{}',
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )
+`);
+db.exec(`CREATE INDEX IF NOT EXISTS idx_versions_fiddle ON fiddle_versions(fiddle_id, version DESC)`);
+
+// Collections tables
+db.exec(`
+  CREATE TABLE IF NOT EXISTS collections (
+    id TEXT PRIMARY KEY,
+    name TEXT NOT NULL,
+    description TEXT NOT NULL DEFAULT '',
+    created_at TEXT NOT NULL DEFAULT (datetime('now')),
+    updated_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )
+`);
+db.exec(`
+  CREATE TABLE IF NOT EXISTS collection_fiddles (
+    collection_id TEXT NOT NULL REFERENCES collections(id) ON DELETE CASCADE,
+    fiddle_id TEXT NOT NULL REFERENCES fiddles(id) ON DELETE CASCADE,
+    position INTEGER NOT NULL DEFAULT 0,
+    PRIMARY KEY (collection_id, fiddle_id)
+  )
+`);
+
 export const stmts = {
  insert: db.prepare(`
    INSERT INTO fiddles (id, title, html, css, css_type, js, js_type, listed, options)
@@ -86,6 +127,58 @@ export const stmts = {
    HAVING count > 0
    ORDER BY count DESC
  `),
+
+  // Versions
+  insertVersion: db.prepare(`
+    INSERT INTO fiddle_versions (fiddle_id, version, html, css, css_type, js, js_type, options)
+    VALUES (@fiddle_id, @version, @html, @css, @css_type, @js, @js_type, @options)
+  `),
+  getMaxVersion: db.prepare('SELECT COALESCE(MAX(version), 0) as max_ver FROM fiddle_versions WHERE fiddle_id = ?'),
+  listVersions: db.prepare('SELECT id, version, created_at FROM fiddle_versions WHERE fiddle_id = ? ORDER BY version DESC'),
+  getVersion: db.prepare('SELECT * FROM fiddle_versions WHERE fiddle_id = ? AND version = ?'),
+  deleteOldVersions: db.prepare(`
+    DELETE FROM fiddle_versions WHERE fiddle_id = ? AND id NOT IN (
+      SELECT id FROM fiddle_versions WHERE fiddle_id = ? ORDER BY version DESC LIMIT 50
+    )
+  `),
+
+  // Screenshot
+  updateScreenshot: db.prepare('UPDATE fiddles SET screenshot = ? WHERE id = ?'),
+
+  // Collections
+  insertCollection: db.prepare(`
+    INSERT INTO collections (id, name, description) VALUES (@id, @name, @description)
+  `),
+  listCollections: db.prepare(`
+    SELECT c.*, COUNT(cf.fiddle_id) as fiddle_count
+    FROM collections c
+    LEFT JOIN collection_fiddles cf ON cf.collection_id = c.id
+    GROUP BY c.id
+    ORDER BY c.updated_at DESC
+  `),
+  getCollection: db.prepare('SELECT * FROM collections WHERE id = ?'),
+  updateCollection: db.prepare(`
+    UPDATE collections SET name = @name, description = @description, updated_at = datetime('now') WHERE id = @id
+  `),
+  deleteCollection: db.prepare('DELETE FROM collections WHERE id = ?'),
+  addFiddleToCollection: db.prepare(`
+    INSERT OR IGNORE INTO collection_fiddles (collection_id, fiddle_id, position)
+    VALUES (@collection_id, @fiddle_id, (SELECT COALESCE(MAX(position), 0) + 1 FROM collection_fiddles WHERE collection_id = @collection_id))
+  `),
+  removeFiddleFromCollection: db.prepare('DELETE FROM collection_fiddles WHERE collection_id = ? AND fiddle_id = ?'),
+  getCollectionFiddles: db.prepare(`
+    SELECT f.id, f.title, f.css_type, f.js_type, f.created_at, f.updated_at, f.screenshot,
+      SUBSTR(f.html, 1, 200) as html_preview, SUBSTR(f.js, 1, 200) as js_preview
+    FROM fiddles f
+    JOIN collection_fiddles cf ON cf.fiddle_id = f.id
+    WHERE cf.collection_id = ?
+    ORDER BY cf.position
+  `),
+  getCollectionsForFiddle: db.prepare(`
+    SELECT c.id, c.name FROM collections c
+    JOIN collection_fiddles cf ON cf.collection_id = c.id
+    WHERE cf.fiddle_id = ?
+  `),
 };

 /**
@@ -102,4 +195,26 @@ export function setFiddleTags(fiddleId, tagNames) {
  }
 }

+/**
+ * Snapshot current fiddle state as a version before overwriting.
+ */
+export function snapshotVersion(fiddleId) {
+  const fiddle = stmts.get.get(fiddleId);
+  if (!fiddle) return;
+  const { max_ver } = stmts.getMaxVersion.get(fiddleId);
+  const version = max_ver + 1;
+  stmts.insertVersion.run({
+    fiddle_id: fiddleId,
+    version,
+    html: fiddle.html,
+    css: fiddle.css,
+    css_type: fiddle.css_type,
+    js: fiddle.js,
+    js_type: fiddle.js_type,
+    options: fiddle.options || '{}',
+  });
+  // Cap at 50 versions
+  stmts.deleteOldVersions.run(fiddleId, fiddleId);
+}
+
 export default db;
--- a/public/browse.html
+++ b/public/browse.html
@@ -31,11 +31,26 @@
    </select>
  </div>

-  <div id="tags-bar" class="tags-bar"></div>
+  <div class="browse-tabs">
+    <button class="browse-tab active" data-view="fiddles">Fiddles</button>
+    <button class="browse-tab" data-view="collections">Collections</button>
+  </div>

-  <main id="fiddle-grid" class="fiddle-grid"></main>
+  <div id="fiddles-view">
+    <div id="tags-bar" class="tags-bar"></div>
+    <main id="fiddle-grid" class="fiddle-grid"></main>
+    <div id="pagination" class="pagination"></div>
+  </div>

-  <div id="pagination" class="pagination"></div>
+  <div id="collections-view" style="display:none">
+    <div id="collections-grid" class="collections-grid"></div>
+    <div id="collection-detail" style="display:none">
+      <button id="collection-back" class="collection-back-btn">&larr; Back to collections</button>
+      <div id="collection-header" class="collection-header"></div>
+      <div id="collection-desc" class="collection-desc"></div>
+      <div id="collection-fiddles" class="fiddle-grid" style="padding:0 24px 24px"></div>
+    </div>
+  </div>

  <script type="module" src="/js/browse.js"></script>
 </body>
--- a/public/css/browse.css
+++ b/public/css/browse.css
@@ -107,18 +107,22 @@ html, body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
-  padding: 16px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
-  gap: 8px;
+  overflow: hidden;
 }
 .fiddle-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
 }
+.card-thumbnail {
+  width: 100%; height: 160px; object-fit: cover;
+  background: #2a2a2a; display: block;
+}
+.card-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
 .card-title {
  font-size: 14px;
  font-weight: 600;
@@ -194,6 +198,52 @@ html, body {
  font-size: 14px;
 }

+/* Collections */
+.browse-tabs {
+  display: flex; gap: 0; padding: 0 24px; border-bottom: 1px solid var(--border);
+  margin-bottom: 12px;
+}
+.browse-tab {
+  background: transparent; color: var(--text-dim); border: none;
+  border-bottom: 2px solid transparent; padding: 8px 16px;
+  font-size: 13px; font-weight: 500; cursor: pointer;
+}
+.browse-tab:hover { color: var(--text); }
+.browse-tab.active { color: var(--text); border-bottom-color: var(--accent); }
+
+.collections-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 12px;
+  padding: 0 24px 24px;
+}
+.collection-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 16px;
+  text-decoration: none;
+  color: var(--text);
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.collection-card:hover { border-color: var(--accent); }
+.collection-card-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
+.collection-card-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
+.collection-card-count { font-size: 11px; color: var(--text-dim); }
+.collection-back-btn {
+  background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
+  padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer;
+  margin: 0 24px 12px;
+}
+.collection-back-btn:hover { color: var(--text); border-color: var(--accent); }
+.collection-header {
+  padding: 0 24px 8px; font-size: 16px; font-weight: 600;
+}
+.collection-desc {
+  padding: 0 24px 12px; font-size: 12px; color: var(--text-dim);
+}
+
 /* Mobile responsive */
@media (max-width: 768px) {
  .browse-header { padding: 10px 16px; }
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -137,6 +137,27 @@ body.resizing iframe { pointer-events: none; }
  background: rgba(255,255,255,0.06);
 }

+/* Language color indicators on tabs */
+.tab-color-dot {
+  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+}
+.tab-btn.active .tab-color-dot { box-shadow: 0 0 4px currentColor; }
+.tab-lang-html .tab-color-dot { background: #E44D26; }
+.tab-lang-css .tab-color-dot { background: #264DE4; }
+.tab-lang-javascript .tab-color-dot { background: #F7DF1E; }
+.tab-lang-typescript .tab-color-dot { background: #3178C6; }
+.tab-lang-markdown .tab-color-dot { background: #83B; }
+.tab-lang-html .tab-btn-label, .tab-lang-css .tab-btn-label,
+.tab-lang-javascript .tab-btn-label, .tab-lang-typescript .tab-btn-label,
+.tab-lang-markdown .tab-btn-label { /* no extra style needed, just grouping */ }
+
+/* Active tab border matches language color */
+.tab-lang-html.active { border-bottom-color: #E44D26; }
+.tab-lang-css.active { border-bottom-color: #264DE4; }
+.tab-lang-javascript.active { border-bottom-color: #F7DF1E; }
+.tab-lang-typescript.active { border-bottom-color: #3178C6; }
+.tab-lang-markdown.active { border-bottom-color: #83B; }
+
 /* CSS type selector inside tab bar */
 .tab-css-type {
  background: var(--bg);
@@ -595,3 +616,134 @@ body.resizing iframe { pointer-events: none; }
  .templates-modal-content { min-width: unset !important; }
  .templates-grid { grid-template-columns: 1fr; }
 }
+
+/* ===================== Format Save Toggle ===================== */
+.format-save-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-dim);
+  cursor: pointer;
+  user-select: none;
+}
+.format-save-toggle input { cursor: pointer; }
+
+/* ===================== Editor Font Select ===================== */
+#editor-font {
+  background: var(--bg); color: var(--text); border: 1px solid var(--border);
+  padding: 4px 6px; border-radius: 4px; font-size: 12px; cursor: pointer;
+}
+
+/* ===================== Version History Modal ===================== */
+.history-modal-content { min-width: 500px; max-width: 700px; text-align: left; }
+.history-list {
+  max-height: 200px; overflow-y: auto;
+  border: 1px solid var(--border); border-radius: 4px;
+  margin-bottom: 12px;
+}
+.history-item {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
+  transition: background 0.1s;
+}
+.history-item:last-child { border-bottom: none; }
+.history-item:hover { background: rgba(255,255,255,0.04); }
+.history-item.active { background: rgba(0,120,212,0.15); }
+.history-version {
+  font-weight: 600; font-size: 13px; color: var(--accent);
+  font-family: 'Cascadia Code', 'Fira Code', monospace;
+}
+.history-date { font-size: 11px; color: var(--text-dim); }
+.history-preview-header {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 8px;
+}
+.history-preview-header span { font-size: 12px; color: var(--text-dim); }
+.history-diff-section { margin-bottom: 8px; }
+.history-diff-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  color: var(--accent); margin-bottom: 4px;
+}
+.history-diff-code {
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: 4px; padding: 8px; font-size: 11px;
+  font-family: 'Cascadia Code', 'Fira Code', monospace;
+  max-height: 150px; overflow-y: auto; white-space: pre-wrap;
+  word-break: break-all; color: var(--text-dim);
+}
+.history-diff { max-height: 300px; overflow-y: auto; }
+
+/* ===================== Embed Modal ===================== */
+.embed-modal-content { min-width: 480px; max-width: 600px; text-align: left; }
+.embed-options {
+  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
+}
+.embed-options label {
+  display: flex; align-items: center; gap: 4px;
+  font-size: 12px; color: var(--text-dim);
+}
+.embed-options select, .embed-options input {
+  background: var(--bg); color: var(--text); border: 1px solid var(--border);
+  padding: 3px 6px; border-radius: 4px; font-size: 12px;
+}
+.embed-code-wrap {
+  position: relative; margin-bottom: 12px;
+}
+.embed-code {
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: 4px; padding: 10px; font-size: 11px;
+  font-family: 'Cascadia Code', 'Fira Code', monospace;
+  white-space: pre-wrap; word-break: break-all; color: var(--text);
+  max-height: 80px; overflow-y: auto;
+}
+.embed-code-wrap .btn-small {
+  position: absolute; top: 6px; right: 6px;
+  background: var(--border); padding: 2px 8px;
+}
+.embed-live-preview { margin-top: 8px; }
+
+/* ===================== Collection Modal ===================== */
+.collection-new-row {
+  display: flex; gap: 6px; margin-bottom: 12px;
+}
+.collection-new-row input {
+  flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text);
+  padding: 5px 8px; border-radius: 4px; font-size: 12px;
+}
+.collection-new-row input:focus { border-color: var(--accent); outline: none; }
+.collection-list {
+  max-height: 250px; overflow-y: auto;
+  border: 1px solid var(--border); border-radius: 4px;
+}
+.collection-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px; border-bottom: 1px solid var(--border);
+}
+.collection-item:last-child { border-bottom: none; }
+.collection-name { flex: 1; font-size: 13px; font-weight: 500; }
+.collection-count { font-size: 11px; color: var(--text-dim); }
+.collection-add-btn { flex-shrink: 0; }
+
+/* ===================== npm Search ===================== */
+.npm-search-row { position: relative; }
+#npm-search-input {
+  flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text);
+  padding: 5px 8px; border-radius: 4px; font-size: 12px; width: 100%;
+}
+#npm-search-input:focus { border-color: var(--accent); outline: none; }
+.npm-search-results {
+  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
+  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
+  max-height: 220px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+.npm-search-results.hidden { display: none; }
+.npm-result {
+  padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border);
+}
+.npm-result:last-child { border-bottom: none; }
+.npm-result:hover { background: rgba(0,120,212,0.1); }
+.npm-result-name { font-size: 12px; font-weight: 600; color: var(--text); }
+.npm-result-version { font-size: 10px; color: var(--text-dim); font-weight: 400; }
+.npm-result-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
+.npm-no-results { padding: 12px; text-align: center; color: var(--text-dim); font-size: 12px; }
--- a/public/index.html
+++ b/public/index.html
@@ -40,6 +40,14 @@
        <option value="dracula">Dracula</option>
        <option value="github-dark">GitHub Dark</option>
      </select>
+      <select id="editor-font" title="Editor font">
+        <option value="default">Default Font</option>
+        <option value="Fira Code">Fira Code</option>
+        <option value="JetBrains Mono">JetBrains Mono</option>
+        <option value="Source Code Pro">Source Code Pro</option>
+        <option value="IBM Plex Mono">IBM Plex Mono</option>
+        <option value="Cascadia Code">Cascadia Code</option>
+      </select>
    </div>
    <div class="toolbar-right">
      <div class="tags-input-wrap">
@@ -62,6 +70,10 @@
        <input type="checkbox" id="listed-checkbox" checked>
        Listed
      </label>
+      <label class="format-save-toggle" title="Auto-format code on save">
+        <input type="checkbox" id="format-save-checkbox">
+        Fmt
+      </label>
      <label class="auto-run-toggle" title="Auto-run on change">
        <input type="checkbox" id="auto-run-checkbox" checked>
        Auto
@@ -69,6 +81,9 @@
      <button id="btn-run" title="Run (Ctrl+Enter)">Run</button>
      <button id="btn-save" title="Save (Ctrl+S)">Save</button>
      <button id="btn-fork" title="Fork">Fork</button>
+      <button id="btn-history" title="Version history" class="btn-secondary">History</button>
+      <button id="btn-embed" title="Embed code generator" class="btn-secondary">Embed</button>
+      <button id="btn-collection" title="Add to collection" class="btn-secondary">Collection</button>
      <button id="btn-export" title="Export standalone HTML" class="btn-secondary">Export</button>
      <button id="btn-qr" title="QR code" class="btn-secondary">QR</button>
    </div>
@@ -142,6 +157,10 @@
          <input type="text" id="resource-js-input" placeholder="JS URL (e.g. https://cdn.jsdelivr.net/...)">
          <button id="btn-add-js" class="btn-small">+ JS</button>
        </div>
+        <div class="resource-row npm-search-row">
+          <input type="text" id="npm-search-input" placeholder="Search npm packages..." autocomplete="off">
+          <div id="npm-search-results" class="npm-search-results hidden"></div>
+        </div>
      </div>
      <div id="resource-list" class="resource-list"></div>
    </div>
@@ -189,6 +208,60 @@
    </div>
  </div>

+  <div id="history-modal" class="modal-overlay hidden">
+    <div class="modal-content history-modal-content">
+      <div class="modal-header">
+        <span>Version History</span>
+        <button id="history-modal-close" class="btn-small">&times;</button>
+      </div>
+      <div id="history-list" class="history-list"></div>
+      <div id="history-preview" class="history-preview hidden">
+        <div class="history-preview-header">
+          <span id="history-preview-label"></span>
+          <button id="history-restore-btn">Restore This Version</button>
+        </div>
+        <div id="history-diff" class="history-diff"></div>
+      </div>
+    </div>
+  </div>
+
+  <div id="embed-modal" class="modal-overlay hidden">
+    <div class="modal-content embed-modal-content">
+      <div class="modal-header">
+        <span>Embed Code</span>
+        <button id="embed-modal-close" class="btn-small">&times;</button>
+      </div>
+      <div class="embed-options">
+        <label>Theme <select id="embed-theme"><option value="light">Light</option><option value="dark">Dark</option></select></label>
+        <label>Show tabs <select id="embed-tabs"><option value="1">Yes</option><option value="0">No</option></select></label>
+        <label>Auto-run <select id="embed-autorun"><option value="1">Yes</option><option value="0">No</option></select></label>
+        <label>Width <input type="text" id="embed-width" value="100%" style="width:70px"></label>
+        <label>Height <input type="text" id="embed-height" value="400" style="width:70px"></label>
+      </div>
+      <div class="embed-code-wrap">
+        <pre id="embed-code" class="embed-code"></pre>
+        <button id="embed-copy" class="btn-small">Copy</button>
+      </div>
+      <div class="embed-live-preview">
+        <iframe id="embed-preview-frame" style="border:1px solid var(--border);border-radius:4px;width:100%;height:200px"></iframe>
+      </div>
+    </div>
+  </div>
+
+  <div id="collection-modal" class="modal-overlay hidden">
+    <div class="modal-content" style="min-width:340px">
+      <div class="modal-header">
+        <span>Add to Collection</span>
+        <button id="collection-modal-close" class="btn-small">&times;</button>
+      </div>
+      <div class="collection-new-row">
+        <input type="text" id="new-collection-name" placeholder="New collection name...">
+        <button id="btn-create-collection" class="btn-small">Create</button>
+      </div>
+      <div id="collection-list" class="collection-list"></div>
+    </div>
+  </div>
+
  <div id="share-toast" class="toast hidden"></div>

  <script>
--- a/public/js/api.js
+++ b/public/js/api.js
@@ -39,3 +39,47 @@ export function listFiddles({ q, js_type, tag, page, limit, sort } = {}) {
 export function listTags() {
  return request('/api/tags');
 }
+
+// Version history
+export function listVersions(id) {
+  return request(`${BASE}/${id}/versions`);
+}
+
+export function getVersion(id, ver) {
+  return request(`${BASE}/${id}/versions/${ver}`);
+}
+
+export function revertVersion(id, ver) {
+  return request(`${BASE}/${id}/revert/${ver}`, { method: 'POST' });
+}
+
+// Collections
+export function createCollection(data) {
+  return request('/api/collections', { method: 'POST', body: JSON.stringify(data) });
+}
+
+export function listCollections() {
+  return request('/api/collections');
+}
+
+export function getCollection(id) {
+  return request(`/api/collections/${id}`);
+}
+
+export function updateCollection(id, data) {
+  return request(`/api/collections/${id}`, { method: 'PUT', body: JSON.stringify(data) });
+}
+
+export function deleteCollection(id) {
+  return request(`/api/collections/${id}`, { method: 'DELETE' });
+}
+
+export function addToCollection(collectionId, fiddleId) {
+  return request(`/api/collections/${collectionId}/fiddles`, {
+    method: 'POST', body: JSON.stringify({ fiddle_id: fiddleId }),
+  });
+}
+
+export function removeFromCollection(collectionId, fiddleId) {
+  return request(`/api/collections/${collectionId}/fiddles/${fiddleId}`, { method: 'DELETE' });
+}
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,7 +1,7 @@
 import {
  initEditors, switchMode, getEditorValues, setEditorValues,
  setOnChange, setOnTabSwitch, getCurrentMode, getCssType, setCssType,
-  setOnFormat, setOnDiff, setEditorTheme,
+  setOnFormat, setOnDiff, setEditorTheme, setEditorFont,
  relayoutEditors,
  MODE_TABS, MODE_TO_JS_TYPE, JS_TYPE_TO_MODE,
 } from './editors.js';
@@ -9,7 +9,11 @@ import { renderPreview } from './preview.js';
 import { initConsole, clearConsole } from './console-panel.js';
 import { compileCss } from './preprocessors.js';
 import { compileJs } from './js-preprocessors.js';
-import { createFiddle, loadFiddle, updateFiddle, listTags } from './api.js';
+import {
+  createFiddle, loadFiddle, updateFiddle, listTags,
+  listVersions, getVersion, revertVersion,
+  listCollections, createCollection, addToCollection,
+} from './api.js';
 import { getPref, setPref } from './preferences.js';
 import { initEmmet } from './emmet.js';
 import { initKeybindings } from './keybindings.js';
@@ -20,12 +24,13 @@ import { initDevtools } from './devtools.js';
 import { initNetwork, clearNetwork } from './network-panel.js';
 import { initElements, clearElements } from './elements-panel.js';
 import { initPerformance, clearPerformance } from './performance-panel.js';
-import { formatActiveEditor } from './formatter.js';
+import { formatActiveEditor, formatAll } from './formatter.js';
 import { initLinter, lintOnChange } from './linter.js';
 import { toggleDiff, snapshotValues, onTabSwitch as diffOnTabSwitch } from './diff-view.js';
 import { registerCustomThemes, THEMES } from './editor-themes.js';
 import { GALLERY_TEMPLATES } from './templates.js';
 import { configureTypeDefaults, registerSnippetProviders } from './autocomplete.js';
+import { initNpmSearch } from './npm-search.js';

 let currentId = null;
 let debounceTimer = null;
@@ -125,6 +130,11 @@ function showToast(msg) {
 }

 async function save() {
+  // Format on save if enabled
+  if (getPref('formatOnSave')) {
+    try { await formatAll(); } catch (_) { /* best effort */ }
+  }
+
  const { html, css, js } = getEditorValues();
  const title = $('#title-input').value || 'Untitled';
  const css_type = getCssType();
@@ -132,14 +142,25 @@ async function save() {
  const listed = $('#listed-checkbox').checked ? 1 : 0;
  const tags = currentTags.slice();
  const options = JSON.stringify({ tailwind: getTailwindChecked(), resources: currentResources });
+
+  // Capture screenshot from preview iframe
+  let screenshot = undefined;
+  try {
+    screenshot = await captureScreenshot();
+  } catch (_) { /* screenshot is optional */ }
+
  try {
    if (currentId) {
-      await updateFiddle(currentId, { title, html, css, css_type, js, js_type, listed, options, tags });
+      await updateFiddle(currentId, { title, html, css, css_type, js, js_type, listed, options, tags, screenshot });
      snapshotValues();
      showToast(`Saved! Share: ${location.origin}/f/${currentId}`);
    } else {
      const result = await createFiddle({ title, html, css, css_type, js, js_type, listed, options, tags });
      currentId = result.id;
+      // Capture screenshot for new fiddle too
+      if (screenshot) {
+        try { await updateFiddle(currentId, { title, html, css, css_type, js, js_type, listed, options, tags, screenshot }); } catch (_) {}
+      }
      snapshotValues();
      history.pushState(null, '', `/f/${currentId}`);
      showToast(`Saved! Share: ${location.origin}/f/${currentId}`);
@@ -149,6 +170,36 @@ async function save() {
  }
 }

+async function captureScreenshot() {
+  const iframe = $('#preview-frame');
+  if (!iframe || !iframe.contentDocument) return undefined;
+  try {
+    // Use html2canvas to capture the iframe content
+    if (!window.html2canvas) {
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
+      await new Promise((resolve, reject) => {
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+      });
+    }
+    const canvas = await html2canvas(iframe.contentDocument.body, {
+      width: 600, height: 400, scale: 1,
+      useCORS: true, logging: false, backgroundColor: '#ffffff',
+    });
+    // Resize to 600x400
+    const resized = document.createElement('canvas');
+    resized.width = 600;
+    resized.height = 400;
+    const ctx = resized.getContext('2d');
+    ctx.drawImage(canvas, 0, 0, 600, 400);
+    return resized.toDataURL('image/jpeg', 0.7);
+  } catch (_) {
+    return undefined;
+  }
+}
+
 async function fork() {
  const { html, css, js } = getEditorValues();
  const title = ($('#title-input').value || 'Untitled') + ' (fork)';
@@ -345,6 +396,24 @@ async function init() {
    handleModeChange(e.target.value);
  });

+  // Format on save toggle
+  const fmtCb = $('#format-save-checkbox');
+  fmtCb.checked = getPref('formatOnSave');
+  fmtCb.addEventListener('change', (e) => setPref('formatOnSave', e.target.checked));
+
+  // Editor font selector
+  const fontSel = $('#editor-font');
+  const savedFont = getPref('editorFont') || 'default';
+  fontSel.value = savedFont;
+  if (savedFont !== 'default') loadGoogleFont(savedFont);
+  setEditorFont(savedFont);
+  fontSel.addEventListener('change', (e) => {
+    const font = e.target.value;
+    if (font !== 'default') loadGoogleFont(font);
+    setEditorFont(font);
+    setPref('editorFont', font);
+  });
+
  // Toolbar buttons
  $('#btn-run').addEventListener('click', run);
  $('#btn-save').addEventListener('click', save);
@@ -429,6 +498,45 @@ async function init() {
    showQrModal(url);
  });

+  // Version History modal
+  const histModal = $('#history-modal');
+  $('#btn-history').addEventListener('click', () => openHistoryModal());
+  $('#history-modal-close').addEventListener('click', () => histModal.classList.add('hidden'));
+  histModal.addEventListener('click', (e) => { if (e.target === histModal) histModal.classList.add('hidden'); });
+
+  // Embed modal
+  const embedModal = $('#embed-modal');
+  $('#btn-embed').addEventListener('click', () => openEmbedModal());
+  $('#embed-modal-close').addEventListener('click', () => embedModal.classList.add('hidden'));
+  embedModal.addEventListener('click', (e) => { if (e.target === embedModal) embedModal.classList.add('hidden'); });
+  ['embed-theme', 'embed-tabs', 'embed-autorun', 'embed-width', 'embed-height'].forEach(id => {
+    $(`#${id}`).addEventListener('change', updateEmbedCode);
+    $(`#${id}`).addEventListener('input', updateEmbedCode);
+  });
+  $('#embed-copy').addEventListener('click', () => {
+    navigator.clipboard.writeText($('#embed-code').textContent).then(() => showToast('Embed code copied!'));
+  });
+
+  // Collection modal
+  const colModal = $('#collection-modal');
+  $('#btn-collection').addEventListener('click', () => openCollectionModal());
+  $('#collection-modal-close').addEventListener('click', () => colModal.classList.add('hidden'));
+  colModal.addEventListener('click', (e) => { if (e.target === colModal) colModal.classList.add('hidden'); });
+  $('#btn-create-collection').addEventListener('click', async () => {
+    const name = $('#new-collection-name').value.trim();
+    if (!name) return;
+    await createCollection({ name });
+    $('#new-collection-name').value = '';
+    openCollectionModal(); // refresh list
+  });
+
+  // npm search in resources modal
+  initNpmSearch((pkg) => {
+    currentResources.push({ type: pkg.type, url: pkg.url });
+    renderResourceList();
+    scheduleRun();
+  });
+
  // Preview theme selector
  const themeSel = $('#preview-theme');
  const savedTheme = getPref('previewTheme');
@@ -517,4 +625,179 @@ async function loadTagSuggestions() {
  } catch (_) { /* ignore */ }
 }

+// ===================== Version History =====================
+
+async function openHistoryModal() {
+  if (!currentId) {
+    showToast('Save the fiddle first to see history');
+    return;
+  }
+  const modal = $('#history-modal');
+  const list = $('#history-list');
+  const preview = $('#history-preview');
+  preview.classList.add('hidden');
+  modal.classList.remove('hidden');
+
+  try {
+    const { versions } = await listVersions(currentId);
+    if (!versions.length) {
+      list.innerHTML = '<div style="padding:16px;color:var(--text-dim);text-align:center">No versions yet. Versions are created each time you save.</div>';
+      return;
+    }
+    list.innerHTML = versions.map(v => `
+      <div class="history-item" data-version="${v.version}">
+        <span class="history-version">v${v.version}</span>
+        <span class="history-date">${new Date(v.created_at + 'Z').toLocaleString()}</span>
+      </div>
+    `).join('');
+
+    list.querySelectorAll('.history-item').forEach(item => {
+      item.addEventListener('click', async () => {
+        list.querySelectorAll('.history-item').forEach(i => i.classList.remove('active'));
+        item.classList.add('active');
+        const ver = parseInt(item.dataset.version, 10);
+        const vData = await getVersion(currentId, ver);
+        showVersionPreview(vData);
+      });
+    });
+  } catch (e) {
+    list.innerHTML = `<div style="padding:16px;color:var(--text-dim)">Error: ${e.message}</div>`;
+  }
+}
+
+function showVersionPreview(vData) {
+  const preview = $('#history-preview');
+  const label = $('#history-preview-label');
+  const diff = $('#history-diff');
+  preview.classList.remove('hidden');
+  label.textContent = `Version ${vData.version} — ${new Date(vData.created_at + 'Z').toLocaleString()}`;
+
+  const current = getEditorValues();
+  diff.innerHTML = '';
+
+  const sections = [
+    { label: 'HTML', old: vData.html, cur: current.html },
+    { label: 'CSS', old: vData.css, cur: current.css },
+    { label: 'JS', old: vData.js, cur: current.js },
+  ];
+
+  for (const s of sections) {
+    if (s.old === s.cur) continue;
+    const sec = document.createElement('div');
+    sec.className = 'history-diff-section';
+    sec.innerHTML = `<div class="history-diff-label">${s.label}</div><pre class="history-diff-code">${escHtml(s.old || '(empty)')}</pre>`;
+    diff.appendChild(sec);
+  }
+
+  if (!diff.children.length) {
+    diff.innerHTML = '<div style="padding:12px;color:var(--text-dim)">No changes from current version</div>';
+  }
+
+  // Wire restore button
+  const restoreBtn = $('#history-restore-btn');
+  restoreBtn.onclick = async () => {
+    try {
+      const result = await revertVersion(currentId, vData.version);
+      setEditorValues({ html: result.html, css: result.css, js: result.js });
+      snapshotValues();
+      $('#history-modal').classList.add('hidden');
+      showToast('Restored version ' + vData.version);
+      run();
+    } catch (e) {
+      showToast('Restore failed: ' + e.message);
+    }
+  };
+}
+
+function escHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+// ===================== Embed Modal =====================
+
+function openEmbedModal() {
+  if (!currentId) {
+    showToast('Save the fiddle first to generate embed code');
+    return;
+  }
+  $('#embed-modal').classList.remove('hidden');
+  updateEmbedCode();
+}
+
+function updateEmbedCode() {
+  if (!currentId) return;
+  const theme = $('#embed-theme').value;
+  const tabs = $('#embed-tabs').value;
+  const autorun = $('#embed-autorun').value;
+  const width = $('#embed-width').value || '100%';
+  const height = $('#embed-height').value || '400';
+
+  const params = new URLSearchParams();
+  if (theme !== 'light') params.set('theme', theme);
+  if (tabs === '0') params.set('tabs', '0');
+  if (autorun === '0') params.set('run', '0');
+  const qs = params.toString();
+
+  const url = `${location.origin}/embed/${currentId}${qs ? '?' + qs : ''}`;
+  const heightVal = /^\d+$/.test(height) ? height + 'px' : height;
+  const snippet = `<iframe src="${url}" style="width:${width};height:${heightVal};border:0;border-radius:4px;overflow:hidden" sandbox="allow-scripts allow-same-origin"></iframe>`;
+
+  $('#embed-code').textContent = snippet;
+  $('#embed-preview-frame').src = url;
+}
+
+// ===================== Collection Modal =====================
+
+async function openCollectionModal() {
+  if (!currentId) {
+    showToast('Save the fiddle first to add to a collection');
+    return;
+  }
+  const modal = $('#collection-modal');
+  const list = $('#collection-list');
+  modal.classList.remove('hidden');
+
+  try {
+    const { collections } = await listCollections();
+    if (!collections.length) {
+      list.innerHTML = '<div style="padding:12px;color:var(--text-dim);text-align:center">No collections yet</div>';
+      return;
+    }
+    list.innerHTML = collections.map(c => `
+      <div class="collection-item" data-id="${c.id}">
+        <span class="collection-name">${escHtml(c.name)}</span>
+        <span class="collection-count">${c.fiddle_count} fiddles</span>
+        <button class="btn-small collection-add-btn">Add</button>
+      </div>
+    `).join('');
+
+    list.querySelectorAll('.collection-add-btn').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        const id = btn.closest('.collection-item').dataset.id;
+        try {
+          await addToCollection(id, currentId);
+          btn.textContent = 'Added';
+          btn.disabled = true;
+        } catch (e) {
+          showToast('Failed to add: ' + e.message);
+        }
+      });
+    });
+  } catch (e) {
+    list.innerHTML = `<div style="padding:12px;color:var(--text-dim)">Error: ${e.message}</div>`;
+  }
+}
+
+// ===================== Google Fonts Loader =====================
+
+const loadedFonts = new Set();
+function loadGoogleFont(fontName) {
+  if (loadedFonts.has(fontName)) return;
+  loadedFonts.add(fontName);
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/ /g, '+')}:wght@400;500;600;700&display=swap`;
+  document.head.appendChild(link);
+}
+
 init();
--- a/public/js/browse.js
+++ b/public/js/browse.js
@@ -1,9 +1,10 @@
-import { listFiddles, listTags } from './api.js';
+import { listFiddles, listTags, listCollections, getCollection } from './api.js';

 const $ = (sel) => document.querySelector(sel);
 let debounceTimer = null;
 let currentPage = 1;
 let activeTag = '';
+let currentView = 'fiddles';

 const JS_TYPE_LABELS = {
  javascript: 'JS',
@@ -27,8 +28,8 @@ function relativeTime(dateStr) {
  return new Date(dateStr).toLocaleDateString();
 }

-function renderCards(fiddles) {
-  const grid = $('#fiddle-grid');
+function renderCards(fiddles, gridSelector = '#fiddle-grid') {
+  const grid = $(gridSelector);
  if (!fiddles.length) {
    grid.innerHTML = '<div class="empty-state">No fiddles found. <a href="/new" style="color: var(--accent)">Create one!</a></div>';
    return;
@@ -37,15 +38,20 @@ function renderCards(fiddles) {
    const preview = f.js_preview || f.html_preview || '';
    const badge = JS_TYPE_LABELS[f.js_type] || 'JS';
    const tags = (f.tags || []).map(t => `<span class="card-tag">${esc(t.name)}</span>`).join('');
+    const thumb = f.screenshot
+      ? `<img class="card-thumbnail" src="${f.screenshot}" alt="" loading="lazy">`
+      : (preview ? `<div class="card-preview" style="padding:12px 16px">${esc(preview)}</div>` : '');
    return `
      <a href="/f/${f.id}" class="fiddle-card">
-        <div class="card-title">${esc(f.title)}</div>
-        <div class="card-meta">
-          <span class="card-badge">${badge}</span>
-          <span>${relativeTime(f.updated_at)}</span>
+        ${thumb}
+        <div class="card-body">
+          <div class="card-title">${esc(f.title)}</div>
+          <div class="card-meta">
+            <span class="card-badge">${badge}</span>
+            <span>${relativeTime(f.updated_at)}</span>
+          </div>
+          ${tags ? `<div class="card-tags">${tags}</div>` : ''}
        </div>
-        ${preview ? `<div class="card-preview">${esc(preview)}</div>` : ''}
-        ${tags ? `<div class="card-tags">${tags}</div>` : ''}
      </a>
    `;
  }).join('');
@@ -130,6 +136,64 @@ $('#filter-sort').addEventListener('change', () => {
  fetchAndRender();
 });

+// Browse tabs
+document.querySelectorAll('.browse-tab').forEach(tab => {
+  tab.addEventListener('click', () => {
+    currentView = tab.dataset.view;
+    document.querySelectorAll('.browse-tab').forEach(t => t.classList.toggle('active', t === tab));
+    $('#fiddles-view').style.display = currentView === 'fiddles' ? '' : 'none';
+    $('#collections-view').style.display = currentView === 'collections' ? '' : 'none';
+    if (currentView === 'collections') renderCollections();
+  });
+});
+
+async function renderCollections() {
+  const grid = $('#collections-grid');
+  const detail = $('#collection-detail');
+  grid.style.display = '';
+  detail.style.display = 'none';
+
+  try {
+    const { collections } = await listCollections();
+    if (!collections.length) {
+      grid.innerHTML = '<div class="empty-state">No collections yet</div>';
+      return;
+    }
+    grid.innerHTML = collections.map(c => `
+      <div class="collection-card" data-id="${c.id}">
+        <div class="collection-card-name">${esc(c.name)}</div>
+        <div class="collection-card-desc">${esc(c.description || '')}</div>
+        <div class="collection-card-count">${c.fiddle_count} fiddle${c.fiddle_count !== 1 ? 's' : ''}</div>
+      </div>
+    `).join('');
+
+    grid.querySelectorAll('.collection-card').forEach(card => {
+      card.addEventListener('click', () => showCollectionDetail(card.dataset.id));
+    });
+  } catch (e) {
+    grid.innerHTML = `<div class="empty-state">Error: ${esc(e.message)}</div>`;
+  }
+}
+
+async function showCollectionDetail(id) {
+  const grid = $('#collections-grid');
+  const detail = $('#collection-detail');
+  grid.style.display = 'none';
+  detail.style.display = '';
+
+  try {
+    const col = await getCollection(id);
+    $('#collection-header').textContent = col.name;
+    $('#collection-desc').textContent = col.description || '';
+    renderCards(col.fiddles || [], '#collection-fiddles');
+  } catch (e) {
+    $('#collection-header').textContent = 'Error';
+    $('#collection-desc').textContent = e.message;
+  }
+}
+
+$('#collection-back').addEventListener('click', () => renderCollections());
+
 // Init
 renderTagsBar();
 fetchAndRender();
--- a/public/js/editors.js
+++ b/public/js/editors.js
@@ -204,9 +204,16 @@ function renderTabBar(tabs) {

  tabs.forEach((tab) => {
    const btn = document.createElement('button');
-    btn.className = 'tab-btn';
+    btn.className = `tab-btn tab-lang-${tab.lang}`;
    btn.dataset.tab = tab.id;
-    btn.textContent = tab.label;
+
+    const dot = document.createElement('span');
+    dot.className = 'tab-color-dot';
+    btn.appendChild(dot);
+
+    const label = document.createElement('span');
+    label.textContent = tab.label;
+    btn.appendChild(label);

    // Add CSS type selector inside the CSS tab
    if (tab.id === 'css') {
@@ -360,3 +367,13 @@ export function setEditorTheme(themeId) {
  editorOpts.theme = themeId;
  monaco.editor.setTheme(themeId);
 }
+
+export function setEditorFont(fontFamily) {
+  const family = fontFamily === 'default' ? "'Cascadia Code', 'Fira Code', monospace" : `'${fontFamily}', monospace`;
+  editorOpts.fontFamily = family;
+  const tabs = MODE_TABS[currentMode];
+  if (!tabs) return;
+  tabs.forEach((tab) => {
+    if (editors[tab.id]) editors[tab.id].updateOptions({ fontFamily: family });
+  });
+}
--- a/public/js/embed.js
+++ b/public/js/embed.js
@@ -21,9 +21,11 @@ async function init() {
    return;
  }

-  // Theme
+  // URL params
  const params = new URLSearchParams(location.search);
  if (params.get('theme') === 'dark') document.body.classList.add('dark');
+  if (params.get('tabs') === '0') document.body.classList.add('no-tabs');
+  const autoRun = params.get('run') !== '0';

  try {
    const fiddle = await loadFiddle(match[1]);
--- a/public/js/formatter.js
+++ b/public/js/formatter.js
@@ -1,5 +1,5 @@
 import { loadScript } from './utils.js';
-import { getActiveEditor, getActiveTab, getCurrentMode, getCssType } from './editors.js';
+import { getActiveEditor, getActiveTab, getCurrentMode, getCssType, switchTab, getEditorValues } from './editors.js';

 const PRETTIER_CDN = 'https://cdn.jsdelivr.net/npm/prettier@3';
 const PLUGINS = [
@@ -79,3 +79,31 @@ export async function formatActiveEditor() {
    console.warn('Prettier format error:', e.message);
  }
 }
+
+export async function formatAll() {
+  await ensurePrettier();
+  const mode = getCurrentMode();
+  const cssType = getCssType();
+  const tabIds = ['html', 'css', 'js'];
+
+  for (const tabId of tabIds) {
+    const config = getParser(tabId, mode, cssType);
+    if (!config) continue;
+    // Temporarily switch to this tab to get its editor
+    switchTab(tabId);
+    const editor = getActiveEditor();
+    if (!editor) continue;
+    const code = editor.getValue();
+    if (!code.trim()) continue;
+    try {
+      const formatted = await prettier.format(code, {
+        parser: config.parser,
+        plugins: config.plugins,
+        singleQuote: true,
+        trailingComma: 'all',
+        printWidth: 100,
+      });
+      editor.setValue(formatted);
+    } catch (_) { /* skip tabs that fail */ }
+  }
+}
--- a/public/js/npm-search.js
+++ b/public/js/npm-search.js
@@ -0,0 +1,74 @@
+let debounceTimer = null;
+
+export function initNpmSearch(onSelect) {
+  const input = document.getElementById('npm-search-input');
+  const results = document.getElementById('npm-search-results');
+  if (!input || !results) return;
+
+  input.addEventListener('input', () => {
+    clearTimeout(debounceTimer);
+    const q = input.value.trim();
+    if (q.length < 2) {
+      results.classList.add('hidden');
+      results.innerHTML = '';
+      return;
+    }
+    debounceTimer = setTimeout(() => searchNpm(q, results, input, onSelect), 300);
+  });
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      results.classList.add('hidden');
+    }
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!input.contains(e.target) && !results.contains(e.target)) {
+      results.classList.add('hidden');
+    }
+  });
+}
+
+async function searchNpm(query, container, input, onSelect) {
+  try {
+    const res = await fetch(`https://registry.npmjs.org/-/v1/search?text=${encodeURIComponent(query)}&size=8`);
+    if (!res.ok) return;
+    const data = await res.json();
+    const packages = data.objects || [];
+
+    if (!packages.length) {
+      container.innerHTML = '<div class="npm-no-results">No packages found</div>';
+      container.classList.remove('hidden');
+      return;
+    }
+
+    container.innerHTML = packages.map(p => {
+      const pkg = p.package;
+      const desc = (pkg.description || '').slice(0, 80);
+      return `<div class="npm-result" data-name="${esc(pkg.name)}" data-version="${esc(pkg.version)}">
+        <div class="npm-result-name">${esc(pkg.name)} <span class="npm-result-version">${esc(pkg.version)}</span></div>
+        <div class="npm-result-desc">${esc(desc)}</div>
+      </div>`;
+    }).join('');
+
+    container.querySelectorAll('.npm-result').forEach(el => {
+      el.addEventListener('click', () => {
+        const name = el.dataset.name;
+        const url = `https://esm.sh/${name}`;
+        onSelect({ name, url, type: 'js' });
+        input.value = '';
+        container.classList.add('hidden');
+      });
+    });
+
+    container.classList.remove('hidden');
+  } catch (_) {
+    container.classList.add('hidden');
+  }
+}
+
+function esc(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
--- a/public/js/preferences.js
+++ b/public/js/preferences.js
@@ -8,6 +8,8 @@ const DEFAULTS = {
  previewTheme: 'light',
  previewDevice: 'desktop',
  editorTheme: 'vs-dark',
+  formatOnSave: false,
+  editorFont: 'default',
 };

 export function getPref(key) {
--- a/server.js
+++ b/server.js
@@ -1,9 +1,9 @@
 import express from 'express';
 import { nanoid } from 'nanoid';
-import db, { stmts, setFiddleTags } from './db.js';
+import db, { stmts, setFiddleTags, snapshotVersion } from './db.js';

 const app = express();
-app.use(express.json());
+app.use(express.json({ limit: '2mb' }));

 // HTML routes must be defined before static middleware (which would serve index.html for /)
 app.get('/', (_req, res) => {
@@ -66,7 +66,7 @@ app.get('/api/fiddles', (req, res) => {
  try {
    const countRow = db.prepare(`SELECT COUNT(*) as total FROM fiddles f ${where}`).get(params);
    const fiddles = db.prepare(`
-      SELECT f.id, f.title, f.css_type, f.js_type, f.created_at, f.updated_at,
+      SELECT f.id, f.title, f.css_type, f.js_type, f.created_at, f.updated_at, f.screenshot,
        SUBSTR(f.html, 1, 200) as html_preview, SUBSTR(f.js, 1, 200) as js_preview
      FROM fiddles f ${where}
      ORDER BY ${orderBy}
@@ -96,6 +96,10 @@ app.get('/api/fiddles/:id', (req, res) => {
 app.put('/api/fiddles/:id', (req, res) => {
  const existing = stmts.get.get(req.params.id);
  if (!existing) return res.status(404).json({ error: 'Not found' });
+
+  // Snapshot current state as a version before overwriting
+  snapshotVersion(req.params.id);
+
  const {
    title = existing.title,
    html = existing.html,
@@ -105,9 +109,11 @@ app.put('/api/fiddles/:id', (req, res) => {
    js_type = existing.js_type || 'javascript',
    listed = existing.listed,
    options = existing.options || '{}',
+    screenshot,
    tags,
  } = req.body;
  stmts.update.run({ id: req.params.id, title, html, css, css_type, js, js_type, listed: listed ? 1 : 0, options });
+  if (screenshot !== undefined) stmts.updateScreenshot.run(screenshot, req.params.id);
  if (Array.isArray(tags)) setFiddleTags(req.params.id, tags);
  const fiddleTags = stmts.getTagsForFiddle.all(req.params.id);
  res.json({ id: req.params.id, title, html, css, css_type, js, js_type, listed, options, tags: fiddleTags });
@@ -118,5 +124,101 @@ app.get('/api/tags', (_req, res) => {
  res.json({ tags: stmts.listTags.all() });
 });

+// ===================== Version History API =====================
+
+app.get('/api/fiddles/:id/versions', (req, res) => {
+  const fiddle = stmts.get.get(req.params.id);
+  if (!fiddle) return res.status(404).json({ error: 'Not found' });
+  const versions = stmts.listVersions.all(req.params.id);
+  res.json({ versions });
+});
+
+app.get('/api/fiddles/:id/versions/:ver', (req, res) => {
+  const ver = parseInt(req.params.ver, 10);
+  const version = stmts.getVersion.get(req.params.id, ver);
+  if (!version) return res.status(404).json({ error: 'Version not found' });
+  res.json(version);
+});
+
+app.post('/api/fiddles/:id/revert/:ver', (req, res) => {
+  const existing = stmts.get.get(req.params.id);
+  if (!existing) return res.status(404).json({ error: 'Not found' });
+  const ver = parseInt(req.params.ver, 10);
+  const version = stmts.getVersion.get(req.params.id, ver);
+  if (!version) return res.status(404).json({ error: 'Version not found' });
+
+  // Snapshot current state before reverting
+  snapshotVersion(req.params.id);
+
+  stmts.update.run({
+    id: req.params.id,
+    title: existing.title,
+    html: version.html,
+    css: version.css,
+    css_type: version.css_type,
+    js: version.js,
+    js_type: version.js_type,
+    listed: existing.listed,
+    options: version.options || existing.options || '{}',
+  });
+  const updated = stmts.get.get(req.params.id);
+  updated.tags = stmts.getTagsForFiddle.all(req.params.id);
+  res.json(updated);
+});
+
+// ===================== Collections API =====================
+
+app.post('/api/collections', (req, res) => {
+  const id = nanoid(10);
+  const { name = 'Untitled Collection', description = '' } = req.body;
+  try {
+    stmts.insertCollection.run({ id, name, description });
+    res.json({ id, name, description, fiddle_count: 0 });
+  } catch (e) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
+app.get('/api/collections', (_req, res) => {
+  res.json({ collections: stmts.listCollections.all() });
+});
+
+app.get('/api/collections/:id', (req, res) => {
+  const col = stmts.getCollection.get(req.params.id);
+  if (!col) return res.status(404).json({ error: 'Not found' });
+  const fiddles = stmts.getCollectionFiddles.all(req.params.id);
+  for (const f of fiddles) f.tags = stmts.getTagsForFiddle.all(f.id);
+  res.json({ ...col, fiddles });
+});
+
+app.put('/api/collections/:id', (req, res) => {
+  const col = stmts.getCollection.get(req.params.id);
+  if (!col) return res.status(404).json({ error: 'Not found' });
+  const { name = col.name, description = col.description } = req.body;
+  stmts.updateCollection.run({ id: req.params.id, name, description });
+  res.json({ id: req.params.id, name, description });
+});
+
+app.delete('/api/collections/:id', (req, res) => {
+  const col = stmts.getCollection.get(req.params.id);
+  if (!col) return res.status(404).json({ error: 'Not found' });
+  stmts.deleteCollection.run(req.params.id);
+  res.json({ ok: true });
+});
+
+app.post('/api/collections/:id/fiddles', (req, res) => {
+  const col = stmts.getCollection.get(req.params.id);
+  if (!col) return res.status(404).json({ error: 'Collection not found' });
+  const { fiddle_id } = req.body;
+  if (!fiddle_id) return res.status(400).json({ error: 'fiddle_id required' });
+  stmts.addFiddleToCollection.run({ collection_id: req.params.id, fiddle_id });
+  res.json({ ok: true });
+});
+
+app.delete('/api/collections/:id/fiddles/:fid', (req, res) => {
+  stmts.removeFiddleFromCollection.run(req.params.id, req.params.fid);
+  res.json({ ok: true });
+});
+
 const port = process.env.PORT || 3000;
 app.listen(port, () => console.log(`Fiddle server running on http://localhost:${port}`));