fablecut 1.13.0 → 1.15.0

package/index.html

@@ -55,8 +55,21 @@
       <div class="bin-tabs" id="binTabs">
         <button type="button" data-tab="project" class="on" title="Media used by this project — right-click for New folder">Project</button>
         <button type="button" data-tab="elements" title="Overlay art from library/elements">Elements</button>
-        <button type="button" data-tab="sfx" title="Sound effects from library/sfx">Sound FX</button>
+        <button type="button" data-tab="sfx" title="Sound effects from library/sfx">SFX</button>
         <button type="button" data-tab="svg" title="Vector animations from library/svg">SVG</button>
+        <button type="button" data-tab="shapes" title="Shape layers and null objects">Shapes</button>
+        <button type="button" data-tab="templates" title="Lower thirds, logo animations and social layouts — with fields you edit in the Inspector">Templates</button>
+      </div>
+      <div class="bin-tools" id="binTools">
+        <input type="search" id="binSearch" class="bin-search" placeholder="Search name, #tag, codec, 4k…" aria-label="Search the Project bin" spellcheck="false" autocomplete="off">
+        <select id="binFilter" class="bin-filter" title="Show only…" aria-label="Show"></select>
+        <select id="binSort" class="bin-sort" title="Sort by" aria-label="Sort by">
+          <option value="name">Name</option><option value="kind">Kind</option><option value="duration">Duration</option>
+          <option value="resolution">Resolution</option><option value="fps">Frame rate</option><option value="codec">Codec</option>
+          <option value="audio">Audio channels</option><option value="size">File size</option><option value="usage">Times used</option>
+        </select>
+        <button type="button" class="btn tiny" id="binSortDir" title="Ascending — click for descending">↑</button>
+        <button type="button" class="btn tiny" id="binViewBtn" title="List view: metadata columns">☰</button>
       </div>
       <input type="file" id="fileInput" class="sr-only" multiple accept="video/*,audio/*,image/*,.mp4,.mov,.webm,.mkv,.mp3,.wav,.m4a,.png,.jpg,.jpeg,.gif,.webp,.svg">
       <div class="bin-list" id="binList">
@@ -93,6 +106,7 @@
           <button class="btn tiny toggle" id="btnExportFrame" title="Toggle export frame overlay (drag handle to reframe)">⬒ Frame</button>
           <button type="button" class="btn tiny toggle hidden" id="btnExportFrameDim" aria-pressed="true" title="Lights off — crop to the export frame"><svg class="ico" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><g class="ef-bulb-rays" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M8 .4v1.05M1.7 3.45l.85.65M14.3 3.45l-.85.65"/></g><path class="ef-bulb-glass" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linejoin="round" d="M8 1.7A4.1 4.1 0 0 0 3.9 5.8c0 1.62.86 2.72 1.8 3.5.38.32.62.68.62 1.15v.35h4.36v-.35c0-.47.24-.83.62-1.15.94-.78 1.8-1.88 1.8-3.5A4.1 4.1 0 0 0 8 1.7z"/><path fill="none" stroke="currentColor" stroke-width="1.45" stroke-linecap="square" d="M6.25 12.85h3.5M6.7 14.35h2.6"/></svg></button>
           <button class="btn tiny toggle" id="btnGuides" title="Toggle safe-area guides">▦ Safe</button>
+          <button class="btn tiny toggle proxy-btn" id="btnProxy" title="Play proxies while editing (export always uses the originals)">Proxy</button>
           <span class="dim" id="monitorRes"></span>
         </span>
       </div>
@@ -195,6 +209,7 @@
   <!-- ══════════ TIMELINE ══════════ -->
   <section class="panel timeline-panel" id="timelinePanel">
     <div class="timeline-toolbar">
+      <span class="comp-crumb hidden" id="compCrumb" aria-label="Open composition"></span>
       <button class="btn tiny hidden" id="btnTrimIO" title="Trim clips to IN/OUT (⇧T)"><svg class="ico" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="square" d="M1.25 4.5H12M4.5 1.25V12M4.5 12H14.75M12 4.5V14.75"/></svg> Trim</button>
       <button class="btn tiny toggle hidden" id="btnWorkAreaPlay" title="Limit playback to IN/OUT (Home/End jump to markers; playhead outside = override)"><svg class="ico" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="square" stroke-linejoin="miter" d="M1.5 2.5V13.5M14.5 2.5V13.5M4.25 8H11.75M9.35 5.6L12 8L9.35 10.4"/></svg> Limit</button>
       <span class="tool-seg" role="group" aria-label="Edit tool"><button type="button" class="btn tiny on" data-edit-tool="select" aria-pressed="true" title="Selection tool (V) — move and trim clips"><svg class="ico" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M4 1.5v11.2l3-2.9 1.9 4.6 1.8-.8-1.9-4.4h4.2z"/></svg></button><button type="button" class="btn tiny" data-edit-tool="ripple" aria-pressed="false" title="Ripple edit (B) — drag a clip edge; everything after it moves with it"><svg class="ico" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M5 2.5v11M5 8h8.5M11 5.5 13.5 8 11 10.5"/></svg></button><button type="button" class="btn tiny" data-edit-tool="roll" aria-pressed="false" title="Rolling edit (R) — drag a cut; the clips on both sides trim, nothing else moves"><svg class="ico" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M8 2v12M1.5 8h4M10.5 8h4M3.5 6 1.5 8l2 2M12.5 6l2 2-2 2"/></svg></button><button type="button" class="btn tiny" data-edit-tool="slip" aria-pressed="false" title="Slip (Y) — drag a clip to change which part of the source it shows"><svg class="ico" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M2.5 3v10M13.5 3v10M5 8h6M6.8 6.2 5 8l1.8 1.8M9.2 6.2 11 8l-1.8 1.8"/></svg></button><button type="button" class="btn tiny" data-edit-tool="slide" aria-pressed="false" title="Slide (U) — drag a clip along the track; its neighbours trim to make room"><svg class="ico" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><rect fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" x="5" y="4" width="6" height="8" rx="1"/><path fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M1 8h2.5M12.5 8H15M2.3 6.7 1 8l1.3 1.3M13.7 6.7 15 8l-1.3 1.3"/></svg></button></span>
@@ -255,8 +270,9 @@
 
 <!-- ══════════ EXPORT SETUP ══════════ -->
 <div class="overlay hidden" id="exportSetup">
-  <div class="dialog">
-    <h2>Export</h2>
+  <div class="dialog export-dialog" role="dialog" aria-modal="true" aria-labelledby="exportSetupTitle">
+    <h2 id="exportSetupTitle">Export</h2>
+    <div class="export-body">
     <div class="export-profile-row" id="exportRangeRow">
       <label class="export-profile-label" for="exportRangeSel">Range</label>
       <select class="export-profile-sel" id="exportRangeSel" aria-describedby="exportRangeNote">
@@ -273,11 +289,102 @@
       <input type="radio" name="engine" id="engineRealtime">
       <span><b>WebCodecs (HW encode)</b><br><span class="dim" id="engineWebCodecsNote">Frame-accurate. Browser encodes H.264; server muxes. Needs a modern Chromium and ffmpeg.</span></span>
     </label>
-    <div class="export-profile-row" id="exportProfileRow">
-      <label class="export-profile-label" for="exportProfileSel">Encoding profile</label>
+    <div class="export-profile-row dlv" id="exportProfileRow">
+      <div class="dlv-preset-line">
+        <label class="export-profile-label" for="exportProfileSel">Preset</label>
+        <span class="dlv-preset-actions">
+          <button type="button" class="btn tiny" id="dlvSaveBtn" title="Save these settings as a preset for every project">Save preset…</button>
+          <button type="button" class="btn tiny hidden" id="dlvDeleteBtn" title="Delete this saved preset">Delete</button>
+        </span>
+      </div>
       <select class="export-profile-sel" id="exportProfileSel" aria-describedby="exportProfileNote exportProfileHint"></select>
+      <div class="dlv-save-row hidden" id="dlvSaveRow">
+        <input type="text" id="dlvSaveName" maxlength="60" placeholder="Preset name, e.g. Client 4K" aria-label="Preset name">
+        <button type="button" class="btn tiny primary" id="dlvSaveOk">Save</button>
+        <button type="button" class="btn tiny" id="dlvSaveCancel">Cancel</button>
+      </div>
       <p class="dim export-profile-note" id="exportProfileNote"></p>
       <p class="dim export-profile-hint" id="exportProfileHint"></p>
+      <div class="dlv-body" id="dlvBody">
+        <details class="dlv-sec" id="dlvVideoSec" open>
+          <summary>Video</summary>
+          <div class="dlv-grid">
+            <label class="dlv-f">Resolution<select id="dlvRes"></select></label>
+            <label class="dlv-f dlv-wh hidden" id="dlvWhField">Width × height
+              <span class="dlv-wh-in"><input type="number" id="dlvW" min="16" max="8192" step="2" aria-label="Width"><span>×</span><input type="number" id="dlvH" min="16" max="8192" step="2" aria-label="Height"></span></label>
+            <label class="dlv-f" id="dlvReframeField">Reframe<select id="dlvReframe">
+              <option value="fill">Fill (crop to fit)</option>
+              <option value="fit">Fit (black bars)</option>
+              <option value="stretch">Stretch</option>
+            </select></label>
+            <label class="dlv-f">Frame rate<select id="dlvFps"></select></label>
+            <label class="dlv-f">Codec<select id="dlvCodec"></select></label>
+            <label class="dlv-f" id="dlvEncoderField">Encoder<select id="dlvEncoder"></select></label>
+            <label class="dlv-f" id="dlvProfileField">Profile<select id="dlvProfile"></select></label>
+            <label class="dlv-f" id="dlvRateField">Rate control<select id="dlvRate">
+              <option value="crf">CRF (constant quality)</option>
+              <option value="vbr">VBR (variable bitrate)</option>
+              <option value="cbr">CBR (constant bitrate)</option>
+            </select></label>
+            <label class="dlv-f" id="dlvCrfField">CRF<input type="number" id="dlvCrf" min="0" max="63" step="1" title="Lower = better quality, bigger file"></label>
+            <label class="dlv-f" id="dlvBitrateField">Bitrate (Mb/s)<input type="number" id="dlvBitrate" min="0.1" max="400" step="0.5"></label>
+            <label class="dlv-f" id="dlvMaxrateField">Max rate (Mb/s)<input type="number" id="dlvMaxrate" min="0.1" max="800" step="0.5" placeholder="none"></label>
+            <label class="dlv-f" id="dlvKeyintField">Keyframe every (s)<input type="number" id="dlvKeyint" min="0" max="20" step="0.5" title="0 = the encoder's default"></label>
+            <label class="dlv-f" id="dlvSpeedField">Encoder speed<select id="dlvSpeed">
+              <option value="fast">Fast</option>
+              <option value="balanced">Balanced</option>
+              <option value="best">Best quality (slow)</option>
+            </select></label>
+            <label class="dlv-f">Pixel format<select id="dlvPixFmt"></select></label>
+            <label class="dlv-f">Color<select id="dlvColor"></select></label>
+            <label class="dlv-f">Container<select id="dlvContainer"></select></label>
+          </div>
+        </details>
+        <details class="dlv-sec" id="dlvAudioSec" open>
+          <summary>Audio</summary>
+          <div class="dlv-grid">
+            <label class="dlv-f">Codec<select id="dlvACodec"></select></label>
+            <label class="dlv-f" id="dlvABitrateField">Bitrate (kb/s)<select id="dlvABitrate"></select></label>
+            <label class="dlv-f" id="dlvARateField">Sample rate<select id="dlvARate">
+              <option value="48000">48 kHz</option>
+              <option value="44100">44.1 kHz</option>
+            </select></label>
+            <label class="dlv-f" id="dlvAChField">Channels<select id="dlvACh">
+              <option value="2">Stereo</option>
+              <option value="1">Mono</option>
+            </select></label>
+            <label class="dlv-f" id="dlvLoudField">Loudness<select id="dlvLoud" title="Turn the whole mix up or down to an integrated loudness, with a true-peak limiter"></select></label>
+            <label class="dlv-f" id="dlvTpField">True peak (dBTP)<input type="number" id="dlvTp" min="-9" max="0" step="0.5"></label>
+          </div>
+        </details>
+        <details class="dlv-sec" id="dlvFileSec">
+          <summary>File name and metadata</summary>
+          <label class="dlv-f dlv-wide">File name
+            <input type="text" id="dlvFilename" maxlength="160" spellcheck="false" aria-describedby="dlvFilePreview dlvTokens"></label>
+          <p class="dim dlv-file-preview" id="dlvFilePreview"></p>
+          <p class="dim dlv-tokens" id="dlvTokens"></p>
+          <div class="dlv-grid dlv-meta">
+            <label class="dlv-f">Title<input type="text" id="dlvMetaTitle" maxlength="300"></label>
+            <label class="dlv-f">Artist / author<input type="text" id="dlvMetaArtist" maxlength="300"></label>
+            <label class="dlv-f">Copyright<input type="text" id="dlvMetaCopyright" maxlength="300"></label>
+            <label class="dlv-f">Date<input type="text" id="dlvMetaDate" maxlength="40" placeholder="2026-10-18"></label>
+            <label class="dlv-f dlv-wide">Description<textarea id="dlvMetaDescription" rows="2" maxlength="2000"></textarea></label>
+            <label class="dlv-f dlv-wide">Keywords<input type="text" id="dlvMetaKeywords" maxlength="300" placeholder="comma, separated"></label>
+          </div>
+        </details>
+        <p class="dim dlv-summary" id="dlvSummary"></p>
+      </div>
+    </div>
+    <div class="export-profile-row dlv-batch" id="dlvBatch">
+      <div class="dlv-preset-line">
+        <span class="export-profile-label">Batch outputs <span class="dim" id="dlvBatchCount"></span></span>
+        <span class="dlv-preset-actions">
+          <button type="button" class="btn tiny" id="dlvBatchAdd" title="Add the settings above to this project's outputs">+ Add these settings</button>
+          <button type="button" class="btn tiny" id="dlvBatchTypical" title="Master, YouTube 1080p, Reel 1080×1920, Square 1080 and a 720p preview">+ Typical set</button>
+        </span>
+      </div>
+      <p class="dim export-profile-hint" id="dlvBatchHint">One render, several files: every checked output is encoded from the same frames. Saved with the project.</p>
+      <ul class="dlv-batch-list" id="dlvBatchList"></ul>
     </div>
     <div class="export-wc-opts hidden" id="exportWcOpts">
       <label class="export-wc-field" for="exportWcBitrate">Bitrate
@@ -302,14 +409,33 @@
       </label>
       <p class="dim export-wc-hint">WebCodecs has no CRF — quality is driven by bitrate. VBR spends bits on hard frames; CBR holds a steady rate.</p>
     </div>
+    <div class="export-track-warn hidden" id="dlvWarn" role="status"></div>
     <div class="export-track-warn hidden" id="exportTrackWarn" role="status"></div>
+    </div>
     <div class="dialog-actions">
+      <button class="btn dlv-queue-open" id="btnOpenQueue" title="Show the export queue">Queue</button>
       <button class="btn" id="btnCancelSetup">Cancel</button>
+      <button class="btn" id="btnBatchExport" title="Queue every checked batch output and start">Export checked</button>
+      <button class="btn" id="btnQueueExport" title="Add these settings to the export queue">Add to queue</button>
       <button class="btn primary" id="btnStartExport">Export</button>
     </div>
   </div>
 </div>
 
+<!-- ══════════ EXPORT QUEUE ══════════ -->
+<div class="overlay hidden" id="exportQueue">
+  <div class="dialog export-dialog" role="dialog" aria-modal="true" aria-labelledby="exportQueueTitle">
+    <h2 id="exportQueueTitle">Export queue</h2>
+    <p class="dim" id="exportQueueNote"></p>
+    <div class="export-body"><ol class="xq-list" id="exportQueueList"></ol></div>
+    <div class="dialog-actions">
+      <button class="btn" id="btnQueueClear">Clear finished</button>
+      <button class="btn" id="btnQueueClose">Close</button>
+      <button class="btn primary" id="btnQueueStart">Start</button>
+    </div>
+  </div>
+</div>
+
 <!-- ══════════ EXPORT OVERLAY ══════════ -->
 <div class="overlay hidden" id="exportOverlay">
   <div class="dialog">
@@ -342,73 +468,152 @@
 <!-- ══════════ HELP OVERLAY ══════════ -->
 <div class="overlay hidden" id="helpOverlay">
   <div class="dialog help">
-    <h2>Keyboard shortcuts</h2>
-    <div class="keys-cols">
-      <table class="keys">
-        <tr><td><kbd>Space</kbd></td><td>Play / pause (Source or Program — whichever is active)</td></tr>
-        <tr><td>Dbl-click bin / clip</td><td>Load into Source monitor</td></tr>
-        <tr><td><kbd>,</kbd></td><td>Insert Source In→Out at the timeline playhead (ripples later clips)</td></tr>
-        <tr><td><kbd>.</kbd></td><td>Replace — overwrite at playhead, or apply new Source In/Out to a timeline-loaded clip (ripples if duration changes)</td></tr>
-        <tr><td><kbd>J</kbd> <kbd>K</kbd> <kbd>L</kbd></td><td>Shuttle — <kbd>L</kbd> plays forward, <kbd>J</kbd> in reverse (silent); tap again for 1.5× · 2× · 4×, the other key turns around; <kbd>K</kbd> stops</td></tr>
-        <tr><td><kbd>K</kbd>+<kbd>J</kbd> / <kbd>K</kbd>+<kbd>L</kbd></td><td>Hold <kbd>K</kbd> and tap to step one frame; hold both to crawl at ¼ speed</td></tr>
-        <tr><td><kbd>S</kbd></td><td>Split clip(s) at playhead (selection, else targeted tracks)</td></tr>
-        <tr><td><kbd>G</kbd></td><td>Find next shared gap (wraps; respects IN/OUT)</td></tr>
-        <tr><td><kbd>⇧</kbd>+<kbd>G</kbd></td><td>Close gap at playhead (targeted tracks)</td></tr>
-        <tr><td><kbd>Alt</kbd>+<kbd>T</kbd></td><td>Add transition at playhead (in / out by half)</td></tr>
-        <tr><td><kbd>Del</kbd></td><td>Delete selected clip(s), or clear focused transition</td></tr>
-        <tr><td><kbd>⇧</kbd>+<kbd>Del</kbd></td><td>Ripple delete — remove selection and close the gap on targeted tracks</td></tr>
-        <tr><td>Drag empty area</td><td>Marquee-select clips</td></tr>
-        <tr><td>Right-click track</td><td>Remove empty track (keeps ≥1 video + ≥1 audio)</td></tr>
-        <tr><td>Track <b>S</b></td><td>Solo track (mute all others; click again to restore)</td></tr>
-        <tr><td>Click track name</td><td>Target / untarget the track — edits touch lit (targeted) tracks only</td></tr>
-        <tr><td>Track padlock</td><td>Lock the track — nothing on it can be edited or moved</td></tr>
-        <tr><td>Right-click clip</td><td>Disable / lock / link or unlink the clip</td></tr>
-        <tr><td><kbd>V</kbd> <kbd>B</kbd> <kbd>R</kbd> <kbd>Y</kbd> <kbd>U</kbd></td><td>Tools: Selection · Ripple edit (drag an edge, the rest follows) · Rolling edit (drag a cut) · Slip (change the source under a clip) · Slide (move a clip, neighbours trim)</td></tr>
-        <tr><td><kbd>;</kbd> / <kbd>'</kbd></td><td>Lift / Extract IN→OUT on targeted tracks (Extract closes the gap)</td></tr>
-        <tr><td><kbd>⇧</kbd>+<kbd>E</kbd></td><td>Disable / enable selected clip(s) — hidden from preview and export</td></tr>
-        <tr><td><kbd>⇧</kbd>+<kbd>D</kbd></td><td>Crossfade the audio cut next to the selected clip (or at the playhead)</td></tr>
-        <tr><td><kbd>Ctrl/Cmd</kbd>+<kbd>L</kbd></td><td>Unlink / link video and its audio</td></tr>
-        <tr><td><kbd>Ctrl</kbd>+click bin</td><td>Import media files</td></tr>
-        <tr><td><kbd>Ctrl</kbd>+click clip</td><td>Add / remove from selection</td></tr>
-        <tr><td><kbd>Ctrl</kbd>+<kbd>A</kbd> / <kbd>Esc</kbd></td><td>Select all / deselect</td></tr>
-        <tr><td><kbd>←</kbd> <kbd>→</kbd></td><td>Step 1 frame (⇧ = 1 second)</td></tr>
-        <tr><td><kbd>↑</kbd> / <kbd>↓</kbd></td><td>Jump playhead to previous / next cut (selected clip In then Out; no selection → targeted tracks). Source monitor: In / Out marks</td></tr>
-        <tr><td><kbd>Ctrl/Cmd</kbd>+<kbd>←</kbd> / <kbd>Ctrl/Cmd</kbd>+<kbd>→</kbd></td><td>Go to previous / next keyframe (inspector follows)</td></tr>
-        <tr><td><kbd>Ctrl/Cmd</kbd>+click inspector label or slider</td><td>Reset property + clear all its keyframes</td></tr>
-        <tr><td><kbd>⇧</kbd>+click inspector label</td><td>Reset value at playhead, or remove that keyframe</td></tr>
-        <tr><td><kbd>[</kbd> / <kbd>]</kbd></td><td>Trim selected in / out to playhead</td></tr>
-        <tr><td><kbd>Home</kbd> / <kbd>End</kbd></td><td>Jump to start / end</td></tr>
-      </table>
-      <table class="keys">
-        <tr><td><kbd>M</kbd></td><td>Add / remove marker at playhead</td></tr>
-        <tr><td><kbd>⇧</kbd>+<kbd>M</kbd> / <kbd>Alt</kbd>+<kbd>⇧</kbd>+<kbd>M</kbd></td><td>Go to next / previous marker</td></tr>
-        <tr><td>Marker on ruler</td><td>Drag to move · click to jump · double-click or right-click to name / colour / delete · <b>Markers</b> button lists them all</td></tr>
-        <tr><td><kbd>0</kbd>–<kbd>9</kbd> / click timecode</td><td>Type a time: <code>01:15:00</code>, packed <code>1500</code> (= 15 s), <code>+30</code> / <code>-1:00</code> to offset, <code>12.5</code> seconds. Click IN / OUT readouts to type those too</td></tr>
-        <tr><td><kbd>I</kbd> / <kbd>O</kbd></td><td>Set Source In/Out (Source mode) or timeline work-area (Program; also bounds Export)</td></tr>
-        <tr><td><kbd>⇧</kbd>+<kbd>I</kbd> / <kbd>⇧</kbd>+<kbd>O</kbd></td><td>Clear Source or timeline IN / OUT</td></tr>
-        <tr><td><kbd>T</kbd></td><td>Split clips at IN/OUT markers</td></tr>
-        <tr><td><kbd>⇧</kbd>+<kbd>T</kbd></td><td>Trim clips to IN/OUT (remove heads/tails)</td></tr>
-        <tr><td>Limit (toolbar)</td><td>Play stops at OUT; Home/End use IN/OUT</td></tr>
-        <tr><td><kbd>N</kbd></td><td>Toggle snapping — <b>▾</b> picks targets (clip edges, playhead, markers, IN/OUT, keyframes, frame grid)</td></tr>
-        <tr><td><kbd>+</kbd> / <kbd>-</kbd></td><td>Zoom timeline</td></tr>
-        <tr><td><kbd>Z</kbd></td><td>Zoom to selected clip(s)</td></tr>
-        <tr><td><kbd>Alt</kbd>+<kbd>Z</kbd></td><td>Zoom to IN–OUT work area</td></tr>
-        <tr><td><kbd>⇧</kbd>+<kbd>Z</kbd></td><td>Zoom timeline to fit</td></tr>
-        <tr><td><kbd>Ctrl</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>⇧</kbd>+<kbd>Z</kbd></td><td>Undo / redo (also <kbd>Ctrl</kbd>+<kbd>Y</kbd>)</td></tr>
-        <tr><td><kbd>Ctrl</kbd>+wheel</td><td>Zoom timeline at cursor</td></tr>
-        <tr><td>Audio volume line</td><td>Drag to change the level · <kbd>Ctrl/Cmd</kbd>+click adds a keyframe · <kbd>Alt</kbd>+click or double-click removes one · corner grips drag fades</td></tr>
-        <tr class="keys-head"><td colspan="2">Color workspace</td></tr>
-        <tr><td>Colour wheel</td><td>Drag to tint (<kbd>⇧</kbd> = fine) · double-click resets the colour · double-click a label or slider name to reset it</td></tr>
-        <tr><td>WB pick / Pick</td><td>Click the monitor to balance, to mark a colour on the curves, or to select it in a layer's qualifier · <kbd>Esc</kbd> cancels</td></tr>
-        <tr><td>Curves</td><td>Click adds a point on the curve · drag moves it · double-click removes it</td></tr>
-        <tr><td>Layer mask on the monitor</td><td>Drag inside to move · handles resize · the knob rotates (<kbd>⇧</kbd> snaps to 15°) · poly / bezier: <kbd>Ctrl/Cmd</kbd>+click adds a point, double-click removes one · <b>Draw</b>: drag a free-hand outline</td></tr>
-        <tr class="keys-head"><td colspan="2">Masks (Inspector → Masks)</td></tr>
-        <tr><td>Pen</td><td>Click to place points, drag while placing to pull curve handles · click the first point or <kbd>Enter</kbd> closes · <kbd>Ctrl</kbd>+<kbd>Z</kbd> / <kbd>Backspace</kbd> removes the last point, <kbd>Ctrl</kbd>+<kbd>⇧</kbd>+<kbd>Z</kbd> puts it back · <kbd>Esc</kbd> cancels</td></tr>
-        <tr><td>Draw</td><td>Drag a free-hand outline — it becomes an editable bezier</td></tr>
-        <tr><td>Mask on the monitor</td><td>Drag inside to move · edge handles resize · the knob rotates (<kbd>⇧</kbd> snaps to 15°) · drag a point or its handles (<kbd>Alt</kbd> breaks the pair) · <kbd>Alt</kbd>+drag a point pulls new handles · <kbd>Ctrl/Cmd</kbd>+click the outline adds a point · double-click a point removes it · <kbd>Esc</kbd> deselects</td></tr>
-        <tr class="keys-head"><td colspan="2">Tracking (Inspector → Tracking, or a mask's Track buttons)</td></tr>
-        <tr><td>Track point</td><td>Click the spot to follow on the monitor — it tracks from the playhead to the clip's end · <kbd>Esc</kbd> cancels the pick, or stops a track that is running (what was tracked so far is kept)</td></tr>
-      </table>
+    <div class="help-head">
+      <h2>Keyboard shortcuts</h2>
+      <input type="search" id="helpFilter" class="help-filter" placeholder="Filter — e.g. marker, trim, mask" aria-label="Filter shortcuts" autocomplete="off" spellcheck="false">
+    </div>
+    <div class="keys-cols" id="helpKeys">
+      <section class="keys-sec">
+        <h3>Playback</h3>
+        <table class="keys">
+          <tr><td><kbd>Space</kbd></td><td>Play / pause (Source or Program — whichever is active)</td></tr>
+          <tr><td><kbd>J</kbd> <kbd>K</kbd> <kbd>L</kbd></td><td>Shuttle — <kbd>L</kbd> plays forward, <kbd>J</kbd> in reverse (silent); tap again for 1.5× · 2× · 4×, the other key turns around; <kbd>K</kbd> stops</td></tr>
+          <tr><td><kbd>K</kbd>+<kbd>J</kbd> / <kbd>K</kbd>+<kbd>L</kbd></td><td>Hold <kbd>K</kbd> and tap to step one frame; hold both to crawl at ¼ speed</td></tr>
+          <tr><td><kbd>←</kbd> <kbd>→</kbd></td><td>Step 1 frame (<kbd>⇧</kbd> = 1 second)</td></tr>
+          <tr><td><kbd>↑</kbd> / <kbd>↓</kbd></td><td>Jump to previous / next cut (selected clip In then Out; no selection → targeted tracks). Source monitor: In / Out marks</td></tr>
+          <tr><td><kbd>Home</kbd> / <kbd>End</kbd></td><td>Jump to start / end</td></tr>
+          <tr><td><kbd>0</kbd>–<kbd>9</kbd> / click timecode</td><td>Type a time: <code>01:15:00</code>, packed <code>1500</code> (= 15 s), <code>+30</code> / <code>-1:00</code> to offset, <code>12.5</code> seconds. Click IN / OUT readouts to type those too</td></tr>
+          <tr><td>Limit (toolbar)</td><td>Play stops at OUT; Home / End use IN / OUT</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Source monitor</h3>
+        <table class="keys">
+          <tr><td>Dbl-click bin / clip</td><td>Load into the Source monitor</td></tr>
+          <tr><td><kbd>,</kbd></td><td>Insert Source In→Out at the timeline playhead (ripples later clips)</td></tr>
+          <tr><td><kbd>.</kbd></td><td>Replace — overwrite at the playhead, or apply new Source In / Out to a timeline-loaded clip (ripples if the duration changes)</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Editing</h3>
+        <table class="keys">
+          <tr><td><kbd>V</kbd> <kbd>B</kbd> <kbd>R</kbd> <kbd>Y</kbd> <kbd>U</kbd></td><td>Tools: Selection · Ripple edit (drag an edge, the rest follows) · Rolling edit (drag a cut) · Slip (change the source under a clip) · Slide (move a clip, neighbours trim)</td></tr>
+          <tr><td><kbd>S</kbd></td><td>Split clip(s) at the playhead (selection, else targeted tracks)</td></tr>
+          <tr><td><kbd>[</kbd> / <kbd>]</kbd></td><td>Trim selected in / out to the playhead</td></tr>
+          <tr><td><kbd>Del</kbd></td><td>Delete selected clip(s), or clear the focused transition</td></tr>
+          <tr><td><kbd>⇧</kbd>+<kbd>Del</kbd></td><td>Ripple delete — remove the selection and close the gap on targeted tracks</td></tr>
+          <tr><td><kbd>G</kbd></td><td>Find the next shared gap (wraps; respects IN / OUT)</td></tr>
+          <tr><td><kbd>⇧</kbd>+<kbd>G</kbd></td><td>Close the gap at the playhead (targeted tracks)</td></tr>
+          <tr><td><kbd>Alt</kbd>+<kbd>T</kbd></td><td>Add a transition at the playhead (in / out by half)</td></tr>
+          <tr><td><kbd>⇧</kbd>+<kbd>E</kbd></td><td>Disable / enable selected clip(s) — hidden from preview and export</td></tr>
+          <tr><td><kbd>Ctrl/Cmd</kbd>+<kbd>L</kbd></td><td>Unlink / link video and its audio</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>⇧</kbd>+<kbd>Z</kbd></td><td>Undo / redo (also <kbd>Ctrl</kbd>+<kbd>Y</kbd>)</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Selection</h3>
+        <table class="keys">
+          <tr><td>Drag empty area</td><td>Marquee-select clips</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+click clip</td><td>Add to / remove from the selection</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+<kbd>A</kbd> / <kbd>Esc</kbd></td><td>Select all / deselect</td></tr>
+          <tr><td>Right-click clip</td><td>Disable / lock / link or unlink / precompose</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>IN / OUT and markers</h3>
+        <table class="keys">
+          <tr><td><kbd>I</kbd> / <kbd>O</kbd></td><td>Set Source In / Out (Source mode) or the timeline work area (Program; also bounds Export)</td></tr>
+          <tr><td><kbd>⇧</kbd>+<kbd>I</kbd> / <kbd>⇧</kbd>+<kbd>O</kbd></td><td>Clear Source or timeline IN / OUT</td></tr>
+          <tr><td><kbd>T</kbd></td><td>Split clips at the IN / OUT marks</td></tr>
+          <tr><td><kbd>⇧</kbd>+<kbd>T</kbd></td><td>Trim clips to IN / OUT (remove heads and tails)</td></tr>
+          <tr><td><kbd>;</kbd> / <kbd>'</kbd></td><td>Lift / Extract IN→OUT on targeted tracks (Extract closes the gap)</td></tr>
+          <tr><td><kbd>M</kbd></td><td>Add / remove a marker at the playhead</td></tr>
+          <tr><td><kbd>⇧</kbd>+<kbd>M</kbd> / <kbd>Alt</kbd>+<kbd>⇧</kbd>+<kbd>M</kbd></td><td>Go to the next / previous marker</td></tr>
+          <tr><td>Marker on ruler</td><td>Drag to move · click to jump · double-click or right-click to name / colour / delete · <b>Markers</b> lists them all</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Timeline view and tracks</h3>
+        <table class="keys">
+          <tr><td><kbd>+</kbd> / <kbd>-</kbd></td><td>Zoom the timeline</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+wheel</td><td>Zoom at the cursor</td></tr>
+          <tr><td><kbd>Z</kbd></td><td>Zoom to the selected clip(s)</td></tr>
+          <tr><td><kbd>Alt</kbd>+<kbd>Z</kbd></td><td>Zoom to the IN–OUT work area</td></tr>
+          <tr><td><kbd>⇧</kbd>+<kbd>Z</kbd></td><td>Zoom to fit</td></tr>
+          <tr><td><kbd>N</kbd></td><td>Snapping on / off — <b>▾</b> picks targets (clip edges, playhead, markers, IN / OUT, keyframes, frame grid)</td></tr>
+          <tr><td>Click track name</td><td>Target / untarget the track — edits touch lit (targeted) tracks only</td></tr>
+          <tr><td>Track <b>S</b></td><td>Solo the track (mutes all others; click again to restore)</td></tr>
+          <tr><td>Track padlock</td><td>Lock the track — nothing on it can be edited or moved</td></tr>
+          <tr><td>Right-click track</td><td>Remove an empty track (keeps ≥1 video + ≥1 audio)</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Keyframes, presets and Inspector</h3>
+        <table class="keys">
+          <tr><td><kbd>Ctrl/Cmd</kbd>+<kbd>←</kbd> / <kbd>→</kbd></td><td>Go to the previous / next keyframe (the Inspector follows)</td></tr>
+          <tr><td><kbd>Ctrl/Cmd</kbd>+click inspector label or slider</td><td>Reset a property and clear all its keyframes</td></tr>
+          <tr><td><kbd>⇧</kbd>+click label</td><td>Reset the value at the playhead, or remove that keyframe</td></tr>
+          <tr><td>Motion → Presets</td><td>In · Out · At playhead · Loop menus key a ready-made animation onto the selected clips · <b>Save as preset</b> keeps this clip's keyframes for every project</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Audio</h3>
+        <table class="keys">
+          <tr><td>Volume line</td><td>Drag to change the level · <kbd>Ctrl/Cmd</kbd>+click adds a keyframe · <kbd>Alt</kbd>+click or double-click removes one · corner grips drag fades</td></tr>
+          <tr><td><kbd>⇧</kbd>+<kbd>D</kbd></td><td>Crossfade the audio cut next to the selected clip (or at the playhead)</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Bin, compositions and templates</h3>
+        <table class="keys">
+          <tr><td><kbd>Ctrl</kbd>+click bin</td><td>Import media files</td></tr>
+          <tr><td>Right-click <b>Project</b> tab</td><td>New folder · New composition</td></tr>
+          <tr><td>Bin search</td><td>Name, kind, codec, <code>2160p</code> or a tag; <code>#tag</code> matches tags only · <kbd>Esc</kbd> clears</td></tr>
+          <tr><td>Right-click a bin file</td><td>Find timeline instances · Media info · favorites · Tags · collections</td></tr>
+          <tr><td>☆ / uses badge on a bin file</td><td>Star it · list where it is used (click one to jump there)</td></tr>
+          <tr><td>☰ in the bin</td><td>List view with metadata columns · click a heading to sort</td></tr>
+          <tr><td>Right-click a clip</td><td><b>Reveal in project</b> — show its file in the bin</td></tr>
+          <tr><td>Right-click a bin file</td><td><b>Relink…</b> — point it at the footage where it is now · <b>Replace file…</b> — a new file for every clip that uses it</td></tr>
+          <tr><td>Right-click a bin video</td><td><b>Create proxy</b> — a light copy to edit with (right-click the Project tab for all of them) · <b>Proxy</b> above the monitor plays proxies on / off; export always uses the originals</td></tr>
+          <tr><td>Comp clip / bin comp</td><td>Double-click to open it on the timeline · drag a bin comp onto the timeline to place it · the breadcrumb above the timeline steps back out</td></tr>
+          <tr><td>Right-click clips</td><td><b>Precompose</b> — move the selection into a new comp</td></tr>
+          <tr><td><kbd>Esc</kbd> inside a comp</td><td>Back out one level (once nothing is selected)</td></tr>
+          <tr><td><b>Templates</b> tab</td><td>Drag a lower third, logo animation or social layout onto the timeline (or click ＋) · fill in its fields in the Inspector's <b>Template</b> section · right-click a comp → <b>Save as template</b></td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Color workspace</h3>
+        <table class="keys">
+          <tr><td>Colour wheel</td><td>Drag to tint (<kbd>⇧</kbd> = fine) · double-click resets the colour · double-click a label or slider name to reset it</td></tr>
+          <tr><td>WB pick / Pick</td><td>Click the monitor to balance, to mark a colour on the curves, or to select it in a layer's qualifier · <kbd>Esc</kbd> cancels</td></tr>
+          <tr><td>Curves</td><td>Click adds a point on the curve · drag moves it · double-click removes it</td></tr>
+          <tr><td>Layer mask on monitor</td><td>Drag inside to move · handles resize · the knob rotates (<kbd>⇧</kbd> snaps to 15°) · poly / bezier: <kbd>Ctrl/Cmd</kbd>+click adds a point, double-click removes one · <b>Draw</b>: drag a free-hand outline</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Masks <span>Inspector → Masks</span></h3>
+        <table class="keys">
+          <tr><td>Pen</td><td>Click to place points, drag while placing to pull curve handles · click the first point or <kbd>Enter</kbd> closes · <kbd>Ctrl</kbd>+<kbd>Z</kbd> / <kbd>Backspace</kbd> removes the last point, <kbd>Ctrl</kbd>+<kbd>⇧</kbd>+<kbd>Z</kbd> puts it back · <kbd>Esc</kbd> cancels</td></tr>
+          <tr><td>Draw</td><td>Drag a free-hand outline — it becomes an editable bezier</td></tr>
+          <tr><td>Mask on monitor</td><td>Drag inside to move · edge handles resize · the knob rotates (<kbd>⇧</kbd> snaps to 15°) · drag a point or its handles (<kbd>Alt</kbd> breaks the pair) · <kbd>Alt</kbd>+drag a point pulls new handles · <kbd>Ctrl/Cmd</kbd>+click the outline adds a point · double-click a point removes it · <kbd>Esc</kbd> deselects</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Shapes and transforms <span>bin → Shapes · Inspector</span></h3>
+        <table class="keys">
+          <tr><td>Shape item on monitor</td><td>Drag inside to move · corners resize (<kbd>⇧</kbd> keeps the proportions) · the knob rotates (<kbd>⇧</kbd> snaps to 15°) · line / path: drag a point or its handles (<kbd>Alt</kbd> breaks the pair), <kbd>Alt</kbd>+drag a point pulls new handles · path: <kbd>Ctrl/Cmd</kbd>+click the outline adds a point, double-click a point removes it · <kbd>Esc</kbd> deselects</td></tr>
+          <tr><td>Shape / text-path pen</td><td>Click to place points, drag while placing to pull curve handles · click the first point closes the path · <kbd>Enter</kbd> keeps it open · <kbd>Ctrl</kbd>+<kbd>Z</kbd> / <kbd>Backspace</kbd> removes the last point, <kbd>Ctrl</kbd>+<kbd>⇧</kbd>+<kbd>Z</kbd> puts it back · <kbd>Esc</kbd> cancels</td></tr>
+          <tr><td>Motion path</td><td>Drag a key square to move it · drag a handle to bend the path (<kbd>Alt</kbd> breaks the pair) · <kbd>Alt</kbd>+drag a key pulls new handles · double-click a key makes it a corner again</td></tr>
+          <tr><td>Anchor ✥ Move</td><td>Drag on the monitor to move the anchor point; the picture stays put (<kbd>⇧</kbd> snaps to its centre) · <kbd>Esc</kbd> turns it off</td></tr>
+        </table>
+      </section>
+      <section class="keys-sec">
+        <h3>Tracking <span>Inspector → Tracking · a mask’s Track buttons</span></h3>
+        <table class="keys">
+          <tr><td>Track point</td><td>Click the spot to follow on the monitor — it tracks from the playhead to the clip's end · <kbd>Esc</kbd> cancels the pick, or stops a running track (what was tracked so far is kept)</td></tr>
+        </table>
+      </section>
+      <p class="help-empty hidden" id="helpEmpty">No shortcut matches that.</p>
     </div>
     <div class="dialog-actions"><button class="btn primary" id="btnCloseHelp">Close</button></div>
   </div>
@@ -421,8 +626,13 @@
 <script src="audio-fx.js"></script>
 <script src="mask.js"></script>
 <script src="tracker.js"></script>
+<script src="motion.js"></script>
 <script src="color.js"></script>
 <script src="edit-ops.js"></script>
+<script src="comp.js"></script>
+<script src="templates.js"></script>
+<script src="media-lib.js"></script>
+<script src="delivery.js"></script>
 <script src="app.js"></script>
 </body>
 </html>

package/library/README.md

@@ -10,6 +10,8 @@ place (`/library/...`), never copied into the project.
 | `elements/` | Elements   | overlay art: PNGs with alpha, light leaks, textures, short loops |
 | `svg/`      | SVG        | vector animations authored by Claude (see CLAUDE.md conventions) |
 | `fonts/`    | (Font editor) | `.ttf .otf .woff .woff2` — auto-registered, family = file name |
+| `presets/`  | (Inspector → Motion) | saved animation presets, one `.json` each |
+| `templates/`| Templates  | saved templates, one `.json` each, after the built-in ones    |
 
 Drop free assets you find online into the matching folder — the open editor
 refreshes the list automatically. Subfolders are allowed and listed too.

package/library/elements/logo-placeholder.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
+  <!-- A stand-in logo for the logo templates: pick your own in the template's Logo field. -->
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#7b6cff"/>
+      <stop offset="1" stop-color="#ff7ac8"/>
+    </linearGradient>
+  </defs>
+  <rect x="40" y="40" width="320" height="320" rx="84" fill="url(#g)"/>
+  <path d="M138 118 L138 282 L262 282" fill="none" stroke="#ffffff" stroke-width="34" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="258" cy="142" r="26" fill="#ffffff"/>
+</svg>