@kokoa/clotho-editor 0.4.0 → 0.4.1

package/dist/clotho-editor.css

@@ -1229,6 +1229,13 @@ body.studio-player-popout #clotho-player-preview {
     font-size: 0.66rem;
     color: var(--color-fg-muted);
   }
+  /* A hint about something that will silently do nothing, rather than about taste. */
+  .studio-props-warn {
+    color: #b45309;
+    background-color: color-mix(in srgb, #d97706 12%, transparent);
+    border-radius: 4px;
+    padding: 0.3rem 0.4rem;
+  }
   .studio-camera-chips {
     display: flex;
     flex-wrap: wrap;
@@ -1682,6 +1689,24 @@ body.studio-player-popout #clotho-player-preview {
     font-size: 0.65rem;
     margin-right: 0.2rem;
   }
+  /* One effect on the selected element, as a button that selects it. */
+  .studio-effect-chip {
+    display: block;
+    width: 100%;
+    text-align: left;
+    margin-bottom: 0.25rem;
+    padding: 0.28rem 0.4rem;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    background-color: var(--color-surface);
+    color: var(--color-fg);
+    font-family: var(--font-mono);
+    font-size: 0.66rem;
+    cursor: pointer;
+  }
+  .studio-effect-chip:hover {
+    border-color: var(--color-accent);
+  }
   .studio-add-effect-bar {
     display: grid;
     grid-template-columns: 1fr 1fr auto;
@@ -2237,7 +2262,8 @@ body.studio-player-popout #clotho-player-preview {
   .studio-tl-element-track {
     position: relative;
     width: 100%;
-    height: 32px;
+    /* Room for an effect strip under the appearance bars. */
+    height: 42px;
     user-select: none;
   }
   .studio-tl-appearance {
@@ -2283,6 +2309,64 @@ body.studio-player-popout #clotho-player-preview {
     pointer-events: none;
     white-space: nowrap;
   }
+  /*
+   * Effects on the row of the element they decorate.
+   *
+   * They were nowhere on the timeline before, so an author scrubbing to find out
+   * when something was emphasised had nothing to scrub against. A thin strip under
+   * the appearance bars, because an effect is a note on an element's life rather
+   * than a life of its own.
+   */
+  .studio-tl-effect {
+    position: absolute;
+    top: 31px;
+    height: 9px;
+    border-radius: 3px;
+    background-color: color-mix(in srgb, #d97706 45%, var(--color-surface));
+    border: 1px solid #d97706;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    overflow: visible;
+  }
+  .studio-tl-effect.is-spotlight {
+    background-color: color-mix(in srgb, #7c3aed 45%, var(--color-surface));
+    border-color: #7c3aed;
+  }
+  .studio-tl-effect.is-trail {
+    background-color: color-mix(in srgb, #0891b2 45%, var(--color-surface));
+    border-color: #0891b2;
+  }
+  .studio-tl-effect.is-selected {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 1px;
+  }
+  .studio-tl-effect-label {
+    padding: 0 4px;
+    pointer-events: none;
+    white-space: nowrap;
+    font-family: var(--font-mono);
+    font-size: 0.58rem;
+    line-height: 1;
+    color: var(--color-fg);
+    opacity: 0.85;
+  }
+  /*
+   * How far a trail reaches back before its own start. `window` is the field
+   * authors get wrong, and drawing it makes it a length rather than a number.
+   */
+  .studio-tl-effect-reach {
+    position: absolute;
+    top: 2px;
+    bottom: 2px;
+    border-radius: 3px 0 0 3px;
+    background: repeating-linear-gradient(
+      90deg,
+      color-mix(in srgb, #0891b2 40%, transparent) 0 3px,
+      transparent 3px 6px
+    );
+    pointer-events: none;
+  }
   .studio-tl-keyframe {
     position: absolute;
     top: 50%;

package/dist/index.js

@@ -703,7 +703,7 @@ function StudioMount({
     if (repository) configureAnimationRepository(repository);
     let disposed = false;
     let cleanup;
-    void import('./main-HDE5SDKM.js').then(({ initStudio }) => {
+    void import('./main-VRQTHHZE.js').then(({ initStudio }) => {
       if (disposed) return;
       cleanup = initStudio({
         initialId,

package/dist/{main-HDE5SDKM.js → main-VRQTHHZE.js}

@@ -1,5 +1,5 @@
-import { updateCanvas, getDef, subscribe, updateMeta, mountEditorPlugins, setSelection, getSelection, setDef, undo, redo, downloadAnimationJson, importAnimation, markClean, updateSettings, isDirty, isDraft, canUndo, canRedo, uniqueChapterId, getCurrentTime, addChapter, uniqueElementId, registerExternalAsset, addElement, registerDataUriAsset, listAnimations, setDraft, saveAnimation, deleteAnimation, duplicateAnimation, createAnimation, getSelectedElementIds, deleteElement, deleteChapter, deleteEffect, updateChapter, isGroup, ungroupElement, groupElements, moveElementToEnd, moveElementToFront, reorderElement, loadAnimation, getCurrentSnapshot, setElementValueAtTime, findContainingGroup, isElementSelected, updateElementBase, createLayout, detachFromLayout, addCheckpoint, uniqueCheckpointId, deleteCheckpoint, addCameraFocus, updateCameraFocus, deleteCameraFocus, setCameraKeyframe, removeCameraKeyframe, removeCameraTrack, setCurrentTime, clearCamera, uniqueEffectId, addEffect, removeAppearance, removeTrack, removeTrackKeyframe, setTrackKeyframe, addAppearance, beginTransient, endTransient, getCamera, jumpBack, jumpForward, getHistory, promoteDraftToSaved, toggleSelectionFor, cameraControlAt, moveGroupBy, placeholderImageUrl, groupBbox, hasCamera, layoutIdsFor, findLayoutCollisions, updateEffect, updateLocales, updateData, updateResponsive, updateDuration, updateCheckpoint, setCameraStrokeScaling, updateAppearance, moveCameraKeyframe, childIdsOf, replaceEffect } from './chunk-WOP52KFW.js';
-import { activeAppearance, animationDocumentSchema, bindablePropertiesFor, computeCamera, resolveAsset, compileDataBindings } from '@kokoa/clotho';
+import { updateCanvas, getDef, subscribe, updateMeta, mountEditorPlugins, setSelection, getSelection, setDef, undo, redo, downloadAnimationJson, importAnimation, markClean, updateSettings, isDirty, isDraft, canUndo, canRedo, uniqueChapterId, getCurrentTime, addChapter, uniqueElementId, registerExternalAsset, addElement, registerDataUriAsset, listAnimations, setDraft, saveAnimation, deleteAnimation, duplicateAnimation, createAnimation, getSelectedElementIds, deleteElement, deleteChapter, deleteEffect, updateChapter, isGroup, ungroupElement, groupElements, moveElementToEnd, moveElementToFront, reorderElement, loadAnimation, getCurrentSnapshot, setElementValueAtTime, findContainingGroup, isElementSelected, updateElementBase, createLayout, detachFromLayout, addCheckpoint, uniqueCheckpointId, deleteCheckpoint, addCameraFocus, updateCameraFocus, deleteCameraFocus, setCameraKeyframe, removeCameraKeyframe, removeCameraTrack, setCurrentTime, clearCamera, removeAppearance, removeTrack, removeTrackKeyframe, setTrackKeyframe, addAppearance, beginTransient, endTransient, getCamera, jumpBack, jumpForward, getHistory, promoteDraftToSaved, toggleSelectionFor, cameraControlAt, moveGroupBy, placeholderImageUrl, groupBbox, hasCamera, layoutIdsFor, findLayoutCollisions, updateEffect, updateLocales, updateData, updateResponsive, updateDuration, updateCheckpoint, setCameraStrokeScaling, updateAppearance, uniqueEffectId, addEffect, moveCameraKeyframe, childIdsOf, replaceEffect } from './chunk-WOP52KFW.js';
+import { activeAppearance, animationDocumentSchema, bindablePropertiesFor, computeCamera, resolveAsset, buildScene, compileDataBindings, resolveBlendMode } from '@kokoa/clotho';
 
 // src/legacy/grid.ts
 var STORAGE_KEY = "studio.grid";
@@ -2239,6 +2239,8 @@ function render2() {
   if (cameraFrame) canvasEl.appendChild(cameraFrame);
   const spotlightPreview = renderSpotlightPreview(def, snap2, elementsById);
   if (spotlightPreview) canvasEl.appendChild(spotlightPreview);
+  const trailPreview = renderTrailPreview(def);
+  if (trailPreview) canvasEl.appendChild(trailPreview);
   const selection = getSelection();
   if (selection.kind === "element") {
     const selEl = elementsById.get(selection.elementId);
@@ -2608,6 +2610,49 @@ function renderSpotlightPreview(def, snap2, elementsById) {
   g.appendChild(label);
   return g;
 }
+function renderTrailPreview(def) {
+  const selection = getSelection();
+  if (selection.kind !== "effect") return null;
+  const effect = def.effects.find(
+    (candidate) => candidate.id === selection.effectId
+  );
+  if (!effect || effect.type !== "trail") return null;
+  const time = getCurrentTime();
+  const g = document.createElementNS(SVG_NS, "g");
+  g.setAttribute("class", "studio-trail-preview");
+  g.setAttribute("pointer-events", "none");
+  const label = document.createElementNS(SVG_NS, "text");
+  label.setAttribute("x", "8");
+  label.setAttribute("y", "18");
+  label.setAttribute("class", "studio-spotlight-preview-label");
+  const span = `${effect.time}\u2013${effect.time + effect.duration}ms`;
+  if (time < effect.time || time >= effect.time + effect.duration) {
+    label.textContent = `\u2733 ${effect.id} \xB7 \uC7AC\uC0DD \uC704\uCE58\uAC00 ${span} \uBC16\uC785\uB2C8\uB2E4`;
+    g.appendChild(label);
+    return g;
+  }
+  const pieces = buildScene(def, time, {}).nodes.filter(
+    (node) => typeof node.key === "string" && node.key.startsWith(`${effect.id}-`)
+  );
+  if (pieces.length === 0) {
+    label.textContent = `\u2733 ${effect.id} \xB7 \uCD5C\uADFC ${effect.window}ms \uB3D9\uC548 ${effect.elementId}\uAC00 \uC6C0\uC9C1\uC774\uC9C0 \uC54A\uC544 \uAF2C\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4`;
+    g.appendChild(label);
+    return g;
+  }
+  for (const piece of pieces) {
+    const node = document.createElementNS(SVG_NS, piece.kind);
+    for (const [name, value] of Object.entries(piece.attrs)) {
+      if (value !== void 0 && value !== null) {
+        node.setAttribute(name, String(value));
+      }
+    }
+    g.appendChild(node);
+  }
+  const kind = pieces[0].kind === "circle" ? "\uC810" : "\uC120";
+  label.textContent = `\u2733 ${effect.id} \xB7 window ${effect.window}ms \xB7 ${kind} ${pieces.length}\uAC1C (samples ${effect.samples})`;
+  g.appendChild(label);
+  return g;
+}
 function cameraHandles(view, control) {
   const g = document.createElementNS(SVG_NS, "g");
   if (control.kind === "tracks") {
@@ -3253,6 +3298,7 @@ function renderInner() {
           <option value="pulse">pulse</option>
           <option value="flow">flow</option>
           <option value="spotlight">spotlight</option>
+          <option value="trail">trail</option>
         </select>
         <button type="button" class="studio-btn" data-add-effect>\uFF0B \uD6A8\uACFC</button>
       </div>
@@ -3344,7 +3390,7 @@ function renderInner() {
       setSelection({ kind: "none" });
       return;
     }
-    const typeOpts = ["highlight", "pulse", "flow", "spotlight"].map(
+    const typeOpts = ["highlight", "pulse", "flow", "spotlight", "trail"].map(
       (t) => `<option value="${t}" ${t === eff.type ? "selected" : ""}>${t}</option>`
     ).join("");
     if (eff.type === "spotlight") {
@@ -3375,6 +3421,36 @@ function renderInner() {
       `;
       return;
     }
+    if (eff.type === "trail") {
+      const elemOptsTrail = def.elements.map(
+        (e) => `<option value="${escapeHtml2(e.id)}" ${e.id === eff.elementId ? "selected" : ""}>${escapeHtml2(e.id)}</option>`
+      ).join("");
+      const resolved = trailModeHint(def, eff);
+      panelEl.innerHTML = `
+        ${timeHint}
+        <div class="studio-props-header"><span class="studio-props-header-title">${escapeHtml2(eff.id)}</span><span class="studio-props-header-type">trail</span></div>
+        <label class="studio-field"><span>type</span><select data-prop-key="effect.type">${typeOpts}</select></label>
+        <p class="studio-props-empty" style="margin:0 0 0.4rem">\uC694\uC18C\uAC00 \uC9C0\uB098\uC628 \uC790\uB9AC\uB97C \uAF2C\uB9AC\uB85C \uB0A8\uAE41\uB2C8\uB2E4. \uC6C0\uC9C1\uC784 \uC790\uCCB4\uAC00 \uC815\uBCF4\uC778 \uBB38\uC11C\uC5D0\uC11C, \uC815\uC9C0 \uD504\uB808\uC784\uC774 \uC783\uC5B4\uBC84\uB9AC\uB294 \uAC83\uC744 \uB418\uB3CC\uB824 \uC90D\uB2C8\uB2E4.</p>
+        <label class="studio-field"><span>elementId</span><select data-prop-key="effect.elementId">${elemOptsTrail}</select></label>
+        ${trailMotionWarning(def, eff)}
+        ${numberField("time (ms)", "effect.time", eff.time, 50)}
+        ${numberField("duration (ms)", "effect.duration", eff.duration, 50)}
+        <div class="studio-props-header" style="margin-top:0.6rem"><span class="studio-props-header-title">\uAF2C\uB9AC</span></div>
+        ${rangeField("window (ms) \xB7 \uAF2C\uB9AC \uAE38\uC774", "effect.window", eff.window, 100, 5e3, 50, "\uC5BC\uB9C8\uB098 \uAC70\uC2AC\uB7EC \uC62C\uB77C\uAC08\uC9C0\uC785\uB2C8\uB2E4. \uD55C \uAC78\uC74C\uC758 \uBC15\uC790\uC5D0 \uB9DE\uCD94\uC138\uC694 \u2014 \uC774\uC0B0 \uCEE4\uC11C\uB294 \uD55C \uCE78, \uD6D1\uB294 \uC6C0\uC9C1\uC784\uC740 \uC870\uAE08 \uB354.")}
+        ${rangeField("samples \xB7 \uD574\uC0C1\uB3C4", "effect.samples", eff.samples, 2, 32, 1, "\uCC3D\uC744 \uBA87 \uAC1C\uB85C \uB098\uB20C\uC9C0\uC785\uB2C8\uB2E4. \uC62C\uB824\uB3C4 \uAF2C\uB9AC\uAC00 \uAE38\uC5B4\uC9C0\uC9C0\uB294 \uC54A\uC2B5\uB2C8\uB2E4 \u2014 \uAE38\uC774\uB294 window\uAC00 \uC815\uD569\uB2C8\uB2E4.")}
+        ${selectField("mode", "effect.mode", eff.mode, [
+        { value: "auto", label: "auto (\uBCF4\uAC04\uC73C\uB85C \uACB0\uC815)" },
+        { value: "path", label: "path \u2014 \uC120" },
+        { value: "dots", label: "dots \u2014 \uC810" }
+      ])}
+        <p class="studio-camera-hint">${resolved}</p>
+        ${checkboxField("fade \xB7 \uC624\uB798\uB41C \uCABD\uC744 \uD750\uB9AC\uAC8C", "effect.fade", eff.fade)}
+        ${colorField("color", "effect.color", eff.color)}
+        ${rangeField("width", "effect.width", eff.width, 0.5, 16, 0.5, "path\uB294 \uC120\uC758 \uAD75\uAE30, dots\uB294 \uC810\uC758 \uBC18\uC9C0\uB984\uC785\uB2C8\uB2E4.")}
+        <button type="button" class="studio-btn studio-btn-danger" data-delete-effect style="margin-top:0.6rem">\u{1F5D1} \uD6A8\uACFC \uC0AD\uC81C</button>
+      `;
+      return;
+    }
     const elemOpts = def.elements.map(
       (e) => `<option value="${escapeHtml2(e.id)}" ${e.id === eff.elementId ? "selected" : ""}>${escapeHtml2(e.id)}</option>`
     ).join("");
@@ -3530,11 +3606,13 @@ function renderElementForm(def, el) {
   const baseHeader = `<span class="studio-props-header-title">${escapeHtml2(el.id)}</span><span class="studio-props-header-type">${escapeHtml2(el.type)}</span>`;
   const apHeader = `<span class="studio-props-header-title">\uCD9C\uD604 (Appearances)</span><button type="button" class="studio-btn studio-btn-small" data-add-appearance>\uFF0B</button>`;
   const tracksHeader = `<span class="studio-props-header-title">\uD0A4\uD504\uB808\uC784 \uD2B8\uB799 (${el.tracks.length})</span>`;
+  const effects = renderElementEffects(def, el);
   panelEl.innerHTML = `
     ${timeHint}
     ${section("el-base", baseHeader, baseFields)}
     ${section("el-appearances", apHeader, appearances)}
     ${section("el-tracks", tracksHeader, tracks)}
+    ${section("el-effects", `<span class="studio-props-header-title">\uD6A8\uACFC</span>`, effects)}
     ${section("el-bindings", `<span class="studio-props-header-title">\uB370\uC774\uD130 \uC5F0\uACB0 (${el.bindings.length})</span>`, bindings)}
     <div class="studio-props-empty" style="font-size:0.72rem;margin-top:0.5rem">
       base \uC18D\uC131\uC744 \uBCC0\uACBD\uD558\uBA74 \u2192 t=${getCurrentTime()} ms \uC5D0 keyframe \uCD94\uAC00<br/>
@@ -3542,6 +3620,25 @@ function renderElementForm(def, el) {
     </div>
   `;
 }
+function renderElementEffects(def, el) {
+  const mine = def.effects.filter(
+    (effect) => effect.type === "spotlight" ? effect.elementIds.includes(el.id) : effect.elementId === el.id
+  );
+  const rows = mine.map(
+    (effect) => `<button type="button" class="studio-effect-chip" data-select-effect="${escapeHtml2(effect.id)}">${escapeHtml2(effect.type)} \xB7 ${effect.time}\u2013${effect.time + effect.duration}ms</button>`
+  ).join("");
+  return `${rows || '<p class="studio-props-empty" style="font-size:0.72rem">\uC774 \uC694\uC18C\uC5D0 \uAC78\uB9B0 \uD6A8\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.</p>'}
+    <div class="studio-add-effect-bar">
+      <select data-new-effect-for="${escapeHtml2(el.id)}">
+        <option value="highlight">highlight</option>
+        <option value="pulse">pulse</option>
+        <option value="flow">flow</option>
+        <option value="spotlight">spotlight</option>
+        <option value="trail">trail</option>
+      </select>
+      <button type="button" class="studio-btn" data-add-effect-for="${escapeHtml2(el.id)}">\uFF0B \uD6A8\uACFC</button>
+    </div>`;
+}
 function renderBindings(el) {
   const properties = bindablePropertiesFor(el);
   const rows = el.bindings.map(
@@ -4045,7 +4142,7 @@ function apply(key, value) {
   } else if (key.startsWith("effect.") && sel.kind === "effect") {
     const prop = key.slice(7);
     const patch = {};
-    if (prop === "time" || prop === "duration" || prop === "scale" || prop === "particles" || prop === "radius" || prop === "dim" || prop === "lit" || prop === "padding" || prop === "fadeIn") {
+    if (prop === "time" || prop === "duration" || prop === "scale" || prop === "particles" || prop === "radius" || prop === "dim" || prop === "lit" || prop === "padding" || prop === "fadeIn" || prop === "window" || prop === "samples" || prop === "width") {
       patch[prop] = Number(value);
     } else {
       patch[prop] = value;
@@ -4053,6 +4150,94 @@ function apply(key, value) {
     updateEffect(sel.effectId, patch);
   }
 }
+var TRAIL_POSITION_PROPERTIES = /* @__PURE__ */ new Set([
+  "x",
+  "y",
+  "cx",
+  "cy",
+  "x1",
+  "y1",
+  "x2",
+  "y2"
+]);
+function trailPositionTracks(def, elementId) {
+  const el = def.elements.find((candidate) => candidate.id === elementId);
+  return (el?.tracks ?? []).filter(
+    (track) => TRAIL_POSITION_PROPERTIES.has(track.property)
+  );
+}
+function trailModeHint(def, effect) {
+  if (effect.mode === "path") return "\uC0D8\uD50C\uC744 \uC120\uC73C\uB85C \uC787\uC2B5\uB2C8\uB2E4.";
+  if (effect.mode === "dots") return "\uC0D8\uD50C\uB9C8\uB2E4 \uC810\uC744 \uCC0D\uC2B5\uB2C8\uB2E4.";
+  const tracks = trailPositionTracks(def, effect.elementId);
+  if (tracks.length === 0) return "\uC704\uCE58 track\uC774 \uC5C6\uC73C\uBBC0\uB85C \uC120\uC73C\uB85C \uADF8\uB9BD\uB2C8\uB2E4.";
+  const steps = tracks.every(
+    (track) => resolveBlendMode(track.interpolate, track.property) === "discrete"
+  );
+  return steps ? "auto \u2192 \uC810. \uC704\uCE58 track\uC774 \uC774\uC0B0 \uBCF4\uAC04\uC774\uB77C \uC9C0\uB098\uC9C0 \uC54A\uC740 \uACF3\uC744 \uC787\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4." : "auto \u2192 \uC120. \uC704\uCE58\uAC00 \uC5F0\uC18D\uC73C\uB85C \uBCC0\uD558\uBBC0\uB85C \uC0D8\uD50C\uC744 \uC774\uC5B4\uB3C4 \uAC70\uC9D3\uC774 \uC544\uB2D9\uB2C8\uB2E4.";
+}
+function trailMotionWarning(def, effect) {
+  const el = def.elements.find(
+    (candidate) => candidate.id === effect.elementId
+  );
+  if (!el) return "";
+  if (trailPositionTracks(def, effect.elementId).length > 0) return "";
+  const inGroup = el.parentId !== void 0;
+  return `<p class="studio-camera-hint studio-props-warn">\u26A0 <code>${escapeHtml2(effect.elementId)}</code>\uC5D0 \uC704\uCE58 track\uC774 \uC5C6\uC2B5\uB2C8\uB2E4${inGroup ? " (\uBD80\uBAA8 group\uC774 \uC6C0\uC9C1\uC778\uB2E4\uBA74 \uAF2C\uB9AC\uB294 \uB0A8\uC2B5\uB2C8\uB2E4)" : ""}. \uC6C0\uC9C1\uC774\uC9C0 \uC54A\uB294 \uC694\uC18C\uB294 \uAF2C\uB9AC\uB97C \uB0A8\uAE30\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.</p>`;
+}
+function createEffect(def, type, seeds) {
+  const firstEl = def.elements[0];
+  if (!firstEl) return;
+  const targets = seeds.length > 0 ? seeds : [firstEl.id];
+  const id = uniqueEffectId();
+  const time = getCurrentTime();
+  const base = { id, elementId: targets[0], time, duration: 500 };
+  let effect;
+  if (type === "spotlight") {
+    effect = {
+      id,
+      type: "spotlight",
+      elementIds: [...targets],
+      time,
+      duration: 1200,
+      dim: 0.7,
+      lit: 0,
+      litColor: "#fde68a",
+      shape: "bbox",
+      padding: 12,
+      fadeIn: 200
+    };
+  } else if (type === "trail") {
+    effect = {
+      id,
+      type: "trail",
+      elementId: targets[0],
+      time,
+      duration: Math.max(1e3, def.duration - time),
+      window: 1200,
+      samples: 12,
+      mode: "auto",
+      fade: true,
+      color: "#94a3b8",
+      width: 2
+    };
+  } else if (type === "pulse") {
+    effect = { ...base, type: "pulse", scale: 1.12 };
+  } else if (type === "flow") {
+    effect = {
+      ...base,
+      type: "flow",
+      color: "#facc15",
+      particles: 3,
+      radius: 4,
+      duration: 800
+    };
+  } else {
+    effect = { ...base, type: "highlight", color: "#facc15" };
+  }
+  addEffect(effect);
+  setSelection({ kind: "effect", effectId: id });
+}
 function changeEffectType(def, effectId, type) {
   const current = def.effects.find((effect) => effect.id === effectId);
   if (!current || current.type === type) return;
@@ -4072,6 +4257,21 @@ function changeEffectType(def, effectId, type) {
       padding: 12,
       fadeIn: 200
     };
+  } else if (type === "trail") {
+    next = {
+      ...base,
+      type: "trail",
+      elementId: targets[0] ?? "",
+      // A trail needs long enough to be seen moving; the emphasis effects default
+      // to half a second, which is shorter than most single steps.
+      duration: Math.max(current.duration, 3e3),
+      window: 1200,
+      samples: 12,
+      mode: "auto",
+      fade: true,
+      color: "#94a3b8",
+      width: 2
+    };
   } else {
     const single = {
       ...base,
@@ -4278,45 +4478,25 @@ function onClick2(e) {
     const typeSel = document.getElementById(
       "studio-new-effect-type"
     );
-    const type = typeSel?.value ?? "highlight";
-    const firstEl = def.elements[0];
-    if (!firstEl) return;
-    const id = uniqueEffectId();
-    const base = {
-      id,
-      elementId: firstEl.id,
-      time: getCurrentTime(),
-      duration: 500
-    };
-    let eff;
-    if (type === "spotlight") {
-      const selected = sel.kind === "element" ? [sel.elementId] : sel.kind === "elements" ? [...sel.elementIds] : [firstEl.id];
-      eff = {
-        id,
-        type: "spotlight",
-        elementIds: selected,
-        time: getCurrentTime(),
-        duration: 1200,
-        dim: 0.7,
-        lit: 0,
-        litColor: "#fde68a",
-        shape: "bbox",
-        padding: 12,
-        fadeIn: 200
-      };
-    } else if (type === "highlight")
-      eff = { ...base, type: "highlight", color: "#facc15" };
-    else if (type === "pulse") eff = { ...base, type: "pulse", scale: 1.12 };
-    else
-      eff = {
-        ...base,
-        type: "flow",
-        color: "#facc15",
-        particles: 3,
-        radius: 4,
-        duration: 800
-      };
-    addEffect(eff);
+    const seeds = sel.kind === "element" ? [sel.elementId] : sel.kind === "elements" ? [...sel.elementIds] : [];
+    createEffect(def, typeSel?.value ?? "highlight", seeds);
+    return;
+  }
+  const addFor = target.closest("[data-add-effect-for]");
+  if (addFor) {
+    const elementId = addFor.dataset.addEffectFor;
+    const typeSel = panelEl?.querySelector(
+      `[data-new-effect-for="${CSS.escape(elementId)}"]`
+    );
+    createEffect(def, typeSel?.value ?? "highlight", [elementId]);
+    return;
+  }
+  const pickEffect = target.closest("[data-select-effect]");
+  if (pickEffect) {
+    setSelection({
+      kind: "effect",
+      effectId: pickEffect.dataset.selectEffect
+    });
     return;
   }
   if (target.closest("[data-delete-effect]") && sel.kind === "effect") {
@@ -4545,7 +4725,7 @@ function render4() {
     </div>
     <div class="studio-tl-total">\uC804\uCCB4 ${def.duration} ms \xB7 ${sortedChapters.length} chapters \xB7 ${def.elements.length} elements \xB7 \uD604\uC7AC ${currentTime} ms</div>
   `;
-  renderElementTracks(def.elements, currentTime, totalPx, sel);
+  renderElementTracks(def, currentTime, totalPx, sel);
 }
 function renderCameraRows(totalPx, sel) {
   const camera = getCamera();
@@ -4585,8 +4765,18 @@ function renderCameraRows(totalPx, sel) {
 function gutterLabel(el) {
   return `${friendlyElementLabel(el)} \xB7 ${el.type}`;
 }
-function renderElementTracks(elements, currentTime, totalPx, sel) {
+function renderElementTracks(def, currentTime, totalPx, sel) {
   if (!elTracksEl) return;
+  const elements = def.elements;
+  const effectsByElement = /* @__PURE__ */ new Map();
+  for (const effect of def.effects) {
+    const targets = effect.type === "spotlight" ? effect.elementIds : [effect.elementId];
+    for (const target of targets) {
+      const bucket = effectsByElement.get(target);
+      if (bucket) bucket.push(effect);
+      else effectsByElement.set(target, [effect]);
+    }
+  }
   if (elements.length === 0) {
     elTracksEl.innerHTML = '<p class="studio-tl-empty">\uC694\uC18C \uC5C6\uC74C</p>';
     return;
@@ -4620,12 +4810,24 @@ function renderElementTracks(elements, currentTime, totalPx, sel) {
     ).map(
       (kf) => `<div class="studio-tl-keyframe" style="left:${timeToPx(kf.time)}px" data-kf-elem-id="${escapeHtml3(el.id)}" data-kf-prop="${escapeHtml3(kf.prop)}" data-kf-time="${kf.time}" title="${escapeHtml3(kf.prop)} @ ${kf.time}ms (\uB4DC\uB798\uADF8\uB85C \uC774\uB3D9)">\u25C6</div>`
     ).join("");
+    const effectBars = (effectsByElement.get(el.id) ?? []).map((effect) => {
+      const left = timeToPx(effect.time);
+      const width = Math.max(6, timeToPx(effect.duration));
+      const selected = sel.kind === "effect" && sel.effectId === effect.id;
+      const trailWindow = effect.type === "trail" ? effect.window : 0;
+      const lead = Math.min(timeToPx(trailWindow), left);
+      const reach = lead > 0 ? `<span class="studio-tl-effect-reach" style="left:${-lead}px;width:${lead}px" title="window ${trailWindow}ms"></span>` : "";
+      return `<div class="studio-tl-effect ${selected ? "is-selected" : ""} is-${escapeHtml3(effect.type)}" style="left:${left}px;width:${width}px" data-effect-id="${escapeHtml3(effect.id)}" title="${escapeHtml3(effect.type)} ${escapeHtml3(effect.id)} \xB7 ${effect.time}-${effect.time + effect.duration}ms">
+            ${reach}<span class="studio-tl-effect-label">${escapeHtml3(effect.type)}</span>
+          </div>`;
+    }).join("");
     return `
         <div class="studio-tl-row studio-tl-element-row ${isSel ? "is-selected" : ""} ${el.type === "group" ? "is-group" : ""}" data-elem-id="${escapeHtml3(el.id)}">
           <div class="studio-tl-gutter studio-tl-element-label" style="--studio-tree-depth:${depth}" title="${escapeHtml3(el.id)}">${el.type === "group" ? "\u25BE " : depth > 0 ? "\u21B3 " : ""}${escapeHtml3(gutterLabel(el))}</div>
           <div class="studio-tl-body" style="width:${totalPx}px">
             <div class="studio-tl-element-track" data-tl-area="elements">
               ${appearanceBars}
+              ${effectBars}
               ${trackKfs}
             </div>
           </div>
@@ -4675,6 +4877,11 @@ function onElTracksClick(e) {
   if (dragMode) return;
   const target = e.target;
   if (target.closest("[data-ap-idx]") || target.closest("[data-edge]")) return;
+  const effectBar = target.closest("[data-effect-id]");
+  if (effectBar) {
+    setSelection({ kind: "effect", effectId: effectBar.dataset.effectId });
+    return;
+  }
   const row = target.closest("[data-elem-id]");
   if (row) {
     setSelection({ kind: "element", elementId: row.dataset.elemId });
@@ -18096,5 +18303,5 @@ function reflectState(ui) {
 }
 
 export { getVisibleElementIds, initStudio };
-//# sourceMappingURL=main-HDE5SDKM.js.map
-//# sourceMappingURL=main-HDE5SDKM.js.map
+//# sourceMappingURL=main-VRQTHHZE.js.map
+//# sourceMappingURL=main-VRQTHHZE.js.map