fablecut 1.12.1 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fablecut",
-  "version": "1.12.1",
+  "version": "1.14.0",
   "description": "Zero-dependency browser video editor that AI agents can drive — JSON timeline, MCP server, REST API, live-reloading UI.",
   "main": "server.js",
   "bin": {

package/paths.js

@@ -33,7 +33,7 @@ const EXPORTS_DIR = path.join(DATA_DIR, "exports");
 const ANALYSIS_DIR = path.join(DATA_DIR, "analysis");
 const LIBRARY_DIR = path.join(DATA_DIR, "library");
 const PROJECT_FILE = path.join(DATA_DIR, "project.json");
-const LIBRARY_SUBDIRS = ["sfx", "elements", "svg", "fonts"];
+const LIBRARY_SUBDIRS = ["sfx", "elements", "svg", "fonts", "presets", "templates"];
 
 /* The asset library ships with the repo but users also drop their own files in
    (library/sfx is gitignored precisely for that). When the data dir is split
@@ -99,8 +99,31 @@ function ensureDirs() {
   seedLibrary();
 }
 
+/* Saved animation presets and templates: one JSON file each in library/presets/
+   and library/templates/ (templates.js validates them). Unreadable files are skipped. */
+function readSaved(kind) {
+  const dir = path.join(LIBRARY_DIR, kind);
+  let names = [];
+  try { names = fs.readdirSync(dir).filter((f) => f.toLowerCase().endsWith(".json")).sort(); } catch { return []; }
+  const out = [];
+  for (const f of names) {
+    try { out.push({ file: f, data: JSON.parse(fs.readFileSync(path.join(dir, f), "utf8").replace(new RegExp("^\\uFEFF"), "")) }); } catch { }
+  }
+  return out;
+}
+function writeSaved(kind, id, data) {
+  const dir = path.join(LIBRARY_DIR, kind);
+  fs.mkdirSync(dir, { recursive: true });
+  const file = path.join(dir, String(id).replace(/[^a-z0-9-]+/gi, "-").slice(0, 60) + ".json");
+  // tmp + rename, like the project file: a crash mid-write never leaves half a preset
+  const tmp = `${file}.${crypto.randomUUID()}.tmp`;   // unique: the editor and the MCP server may save at once
+  fs.writeFileSync(tmp, JSON.stringify(data, null, 2) + "\n");
+  fs.renameSync(tmp, file);
+  return file;
+}
+
 module.exports = {
   APP_DIR, DATA_DIR, SPLIT,
   MEDIA_DIR, EXPORTS_DIR, ANALYSIS_DIR, LIBRARY_DIR, PROJECT_FILE,
-  LIBRARY_SUBDIRS, ensureDirs,
+  LIBRARY_SUBDIRS, ensureDirs, readSaved, writeSaved,
 };

package/server.js

@@ -37,8 +37,9 @@ const { denoiseFile, AMOUNT_IDS: DENOISE_AMOUNTS } = require("./denoise");
 
 const {
   APP_DIR, DATA_DIR, MEDIA_DIR, EXPORTS_DIR, ANALYSIS_DIR, LIBRARY_DIR,
-  PROJECT_FILE, LIBRARY_SUBDIRS, ensureDirs,
+  PROJECT_FILE, LIBRARY_SUBDIRS, ensureDirs, readSaved, writeSaved,
 } = require("./paths");
+const Templates = require("./templates");
 
 /* Static app files are served from the install dir; everything the user creates
    lives under DATA_DIR. The two are the same unless FABLECUT_DATA_DIR is set. */
@@ -466,6 +467,24 @@ const server = http.createServer(async (req, res) => {
     return;
   }
 
+  /* API: saved animation presets and templates (library/presets, library/templates).
+       GET  /api/presets | /api/templates  → [ …validated items… ] (bad files skipped)
+       POST /api/presets {preset} | /api/templates {template} → saved as library/<kind>/<id>.json */
+  if ((p === "/api/presets" || p === "/api/templates") && (req.method === "GET" || req.method === "POST")) {
+    const kind = p.slice(5), norm = kind === "presets" ? Templates.normalizePreset : Templates.normalizeTemplate;
+    try {
+      if (req.method === "GET") {
+        sendJSON(res, 200, readSaved(kind).map((x) => norm(x.data)).filter(Boolean));
+        return;
+      }
+      const body = JSON.parse((await readBody(req)).toString("utf8") || "{}");
+      const item = Templates.asSaved(norm(kind === "presets" ? body.preset : body.template, true), kind);
+      const file = writeSaved(kind, item.id, item);
+      sendJSON(res, 200, { id: item.id, name: item.name, file: path.relative(DATA_DIR, file).split(path.sep).join("/") });
+    } catch (e) { sendJSON(res, 400, { error: String(e.message || e) }); }
+    return;
+  }
+
   /* API: upload → saved into ./media */
   if (p === "/api/upload" && req.method === "POST") {
     try {
@@ -541,7 +560,28 @@ const server = http.createServer(async (req, res) => {
       if (m != null && (typeof m !== "object" || typeof m.clip !== "string" || !Number.isInteger(m.layer) || m.layer < 0)) {
         sendJSON(res, 400, { error: "matte must be {clip: \"<clip id>\", layer: <index ≥ 0>}" }); return;
       }
-      sendJSON(res, 200, exportJobs.request({ kind: "scopes", time, where: opts.where, revision, matte: m || null }));
+      const mk = opts.mask;
+      if (mk != null && (typeof mk !== "object" || typeof mk.clip !== "string")) {
+        sendJSON(res, 400, { error: "mask must be {clip: \"<clip id>\"}" }); return;
+      }
+      sendJSON(res, 200, exportJobs.request({ kind: "scopes", time, where: opts.where, revision, matte: m || null, mask: mk || null }));
+    } catch (e) {
+      sendJSON(res, e.code === 409 || e.code === 400 ? e.code : 500, { error: String(e.message || e) });
+    }
+    return;
+  }
+  /* API: follow a region of a clip (fablecut_track) — a "track" job on the
+     same queue; the tab that runs it saves the track into the project. */
+  if (p === "/api/track/request" && req.method === "POST") {
+    try {
+      const opts = JSON.parse((await readBody(req)).toString("utf8") || "{}");
+      let revision = null;
+      try { revision = JSON.parse(fs.readFileSync(PROJECT_FILE, "utf8").replace(/^/, "")).revision ?? null; } catch {}
+      const t = opts.track;
+      if (!t || typeof t !== "object" || Array.isArray(t) || typeof t.clip !== "string") { sendJSON(res, 400, { error: "track must be {clip: \"<clip id>\", …}" }); return; }
+      const body = JSON.stringify(t);
+      if (body.length > 8192) { sendJSON(res, 400, { error: "track spec too large" }); return; }
+      sendJSON(res, 200, exportJobs.request({ kind: "track", where: opts.where, revision, track: JSON.parse(body) }));
     } catch (e) {
       sendJSON(res, e.code === 409 || e.code === 400 ? e.code : 500, { error: String(e.message || e) });
     }

package/style.css

@@ -2296,6 +2296,17 @@ input[type=range] {
   text-decoration: line-through;
 }
 
+/* A track matte: it cuts the clip below instead of drawing. */
+.clip.matte-src .clip-body {
+  opacity: .55;
+  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .08) 6px 12px);
+}
+
+.clip.matte-src .clip-label::before {
+  content: "Matte · ";
+  opacity: .8;
+}
+
 .timeline-scroll {
   flex: 1;
   min-height: 0;
@@ -2702,6 +2713,98 @@ body.track-size-s .clip .fade-grip {
   background: linear-gradient(180deg, #ffd16633, #ffd16611), #6b5420;
 }
 
+.lib-item .bin-thumb.shape-thumb {
+  display: grid;
+  place-items: center;
+  background: #1d4f63;
+}
+
+.lib-item .bin-thumb.shape-thumb svg {
+  width: 70%;
+  height: 70%;
+}
+
+.lib-group {
+  margin: 10px 4px 4px;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.lib-group:first-child {
+  margin-top: 2px;
+}
+
+.lib-hint {
+  margin: 10px 4px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--dim);
+}
+
+.clip.c-comp .comp-open-hint {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: #00000073;
+  color: #f3e8ff;
+  font-size: 10.5px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.clip.c-comp:hover .comp-open-hint {
+  opacity: 1;
+}
+
+body.track-size-s .clip.c-comp .comp-open-hint {
+  display: none;
+}
+
+.clip.c-comp .clip-body {
+  background: linear-gradient(180deg, #c084fc33, #c084fc11), #4c2a73;
+}
+
+.comp-crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px 2px 2px;
+  margin-right: 6px;
+  border: 1px solid #c084fc66;
+  border-radius: 6px;
+  background: #c084fc1a;
+  font-size: 12px;
+}
+
+.comp-crumb .crumb-sep {
+  opacity: .6;
+}
+
+.lib-item .bin-thumb.comp-thumb,
+.comp-item .bin-thumb.comp-thumb {
+  display: grid;
+  place-items: center;
+  background: #4c2a73;
+  color: #e9d5ff;
+  font-size: 20px;
+}
+
+.clip.c-shape .clip-body {
+  background: linear-gradient(180deg, #5ad1ff33, #5ad1ff11), #1d4f63;
+}
+
+.clip.c-null .clip-body {
+  background: repeating-linear-gradient(90deg, #ff6b6b22 0 6px, transparent 6px 12px), #4a2430;
+}
+
 .clip.c-adjust .clip-body {
   background: repeating-linear-gradient(135deg, #38bdf822 0 10px, transparent 10px 20px), #155e75;
 }
@@ -2938,9 +3041,43 @@ body.track-size-s .clip .fade-grip {
 }
 
 .dialog.help {
-  width: min(820px, 94vw);
-  max-height: min(90vh, 640px);
-  overflow: auto;
+  width: min(1080px, 94vw);
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 14px;
+}
+
+.dialog.help .help-head {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.dialog.help .help-head h2 {
+  margin: 0;
+  flex: 1;
+}
+
+.dialog.help .help-filter {
+  width: min(280px, 50%);
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+  padding: 6px 10px;
+}
+
+.dialog.help .help-filter:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.dialog.help .dialog-actions {
+  margin-top: 10px;
 }
 
 .dialog.settings {
@@ -3011,11 +3148,38 @@ body.track-size-s .clip .fade-grip {
 }
 
 .dialog.help .keys-cols {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0 28px;
-  margin-bottom: 12px;
-  align-items: start;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  columns: 2 380px;
+  column-gap: 16px;
+  padding-right: 4px;
+}
+
+.dialog.help .keys-sec {
+  break-inside: avoid;
+  margin: 0 0 14px;
+  padding: 10px 12px 6px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.dialog.help .keys-sec h3 {
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text);
+}
+
+.dialog.help .keys-sec h3 span {
+  margin-left: 6px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--dim);
 }
 
 .dialog.help .keys {
@@ -3025,22 +3189,31 @@ body.track-size-s .clip .fade-grip {
 }
 
 .dialog.help .keys td {
-  padding: 5px 6px;
-  border-bottom: 1px solid #26262c;
+  padding: 5px 0;
+  border-top: 1px solid var(--border);
   font-size: 12px;
+  line-height: 1.45;
   vertical-align: top;
 }
 
+.dialog.help .keys tr:first-child td {
+  border-top: 0;
+}
+
 .dialog.help .keys td:first-child {
-  width: 40%;
+  width: 34%;
+  padding-right: 12px;
   color: var(--dim);
+}
+
+.dialog.help .keys td:first-child kbd {
   white-space: nowrap;
 }
 
-@media (max-width: 700px) {
-  .dialog.help .keys-cols {
-    grid-template-columns: 1fr;
-  }
+.dialog.help .help-empty {
+  color: var(--dim);
+  font-size: 12px;
+  margin: 8px 2px;
 }
 
 kbd {
@@ -3552,12 +3725,3 @@ input[type="range"].cq-hue {
   border-radius: 3px;
   height: 6px;
 }
-.dialog.help .keys tr.keys-head td {
-  padding-top: 12px;
-  color: var(--text);
-  font-weight: 600;
-  font-size: 11px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  white-space: normal;
-}