@kokoa/clotho-editor 0.3.0 → 0.4.1

package/dist/{main-DC6D6RNQ.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, updateLocales, updateData, updateResponsive, updateDuration, updateCheckpoint, setCameraStrokeScaling, updateAppearance, updateEffect, moveCameraKeyframe, childIdsOf } from './chunk-N47HF4VB.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";
@@ -2237,6 +2237,10 @@ function render2() {
   }
   const cameraFrame = renderCameraFrame(def);
   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);
@@ -2548,6 +2552,107 @@ function moveCameraDrag(e) {
     updateCameraFocus(drag.focusIndex, { padding: next.padding });
   }
 }
+function renderSpotlightPreview(def, snap2, elementsById) {
+  const selection = getSelection();
+  if (selection.kind !== "effect") return null;
+  const effect = def.effects.find(
+    (candidate) => candidate.id === selection.effectId
+  );
+  if (!effect || effect.type !== "spotlight") return null;
+  const boxes = effect.elementIds.map((id) => {
+    const el = elementsById.get(id);
+    const state = el ? snap2.get(id) : void 0;
+    return el && state ? elementBBox(el, state) : null;
+  }).filter(
+    (box) => box !== null
+  );
+  if (boxes.length === 0) return null;
+  const { width, height } = def.canvas;
+  const pad = effect.padding;
+  const g = document.createElementNS(SVG_NS, "g");
+  g.setAttribute("class", "studio-spotlight-preview");
+  g.setAttribute("pointer-events", "none");
+  const holes = [];
+  if (effect.shape === "elements") {
+    for (const box of boxes) {
+      holes.push(
+        `M${box.x - pad} ${box.y - pad}H${box.x + box.w + pad}V${box.y + box.h + pad}H${box.x - pad}Z`
+      );
+    }
+  } else {
+    const x = Math.min(...boxes.map((box) => box.x)) - pad;
+    const y = Math.min(...boxes.map((box) => box.y)) - pad;
+    const right = Math.max(...boxes.map((box) => box.x + box.w)) + pad;
+    const bottom = Math.max(...boxes.map((box) => box.y + box.h)) + pad;
+    if (effect.shape === "circle") {
+      const cx = (x + right) / 2;
+      const cy = (y + bottom) / 2;
+      const r = Math.hypot(right - x, bottom - y) / 2;
+      holes.push(
+        `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${r * 2} 0a${r} ${r} 0 1 0 ${-r * 2} 0Z`
+      );
+    } else {
+      holes.push(`M${x} ${y}H${right}V${bottom}H${x}Z`);
+    }
+  }
+  const scrim = document.createElementNS(SVG_NS, "path");
+  scrim.setAttribute("d", `M0 0H${width}V${height}H0Z ${holes.join(" ")}`);
+  scrim.setAttribute("fill-rule", "evenodd");
+  scrim.setAttribute("fill", effect.dimColor ?? "#0b1120");
+  scrim.setAttribute("opacity", String(Math.max(effect.dim, 0.15)));
+  g.appendChild(scrim);
+  const label = document.createElementNS(SVG_NS, "text");
+  label.setAttribute("x", "8");
+  label.setAttribute("y", "18");
+  label.setAttribute("class", "studio-spotlight-preview-label");
+  const approximated = effect.shape === "elements" ? " \xB7 \uC2E4\uB8E8\uC5E3\uC740 \uC0C1\uC790\uB85C \uADFC\uC0AC" : "";
+  label.textContent = `\u{1F526} ${effect.id} \xB7 ${effect.time}\u2013${effect.time + effect.duration}ms${approximated}`;
+  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") {
@@ -3192,6 +3297,8 @@ function renderInner() {
           <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>\uFF0B \uD6A8\uACFC</button>
       </div>
@@ -3283,12 +3390,70 @@ function renderInner() {
       setSelection({ kind: "none" });
       return;
     }
+    const typeOpts = ["highlight", "pulse", "flow", "spotlight", "trail"].map(
+      (t) => `<option value="${t}" ${t === eff.type ? "selected" : ""}>${t}</option>`
+    ).join("");
+    if (eff.type === "spotlight") {
+      const shapeOpts = ["bbox", "circle", "elements"].map(
+        (shape) => `<option value="${shape}" ${shape === eff.shape ? "selected" : ""}>${shape}${shape === "bbox" ? " (\uAE30\uBCF8)" : ""}</option>`
+      ).join("");
+      panelEl.innerHTML = `
+        ${timeHint}
+        <div class="studio-props-header"><span class="studio-props-header-title">${escapeHtml2(eff.id)}</span><span class="studio-props-header-type">spotlight</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">\uB300\uC0C1\uC740 \uADF8\uB300\uB85C \uB450\uACE0 \uB098\uBA38\uC9C0\uB97C \uC5B4\uB461\uAC8C \uD569\uB2C8\uB2E4. \uB300\uC0C1\uC758 \uC0C9\uC774 \uC815\uBCF4\uC778 \uBB38\uC11C\uC5D0\uC11C <code>highlight</code> \uB300\uC2E0 \uC501\uB2C8\uB2E4.</p>
+        ${numberField("time (ms)", "effect.time", eff.time, 50)}
+        ${numberField("duration (ms)", "effect.duration", eff.duration, 50)}
+        ${numberField("fadeIn (ms) \xB7 \uC591 \uB05D\uC5D0 \uC801\uC6A9", "effect.fadeIn", eff.fadeIn, 50)}
+        <div class="studio-camera-field-label">\uB300\uC0C1 \uC694\uC18C (${eff.elementIds.length})</div>
+        ${elementCheckList(def, "data-spotlight-target", eff.id, eff.elementIds)}
+        <label class="studio-field"><span>shape</span><select data-prop-key="effect.shape">${shapeOpts}</select></label>
+        <p class="studio-camera-hint">\uB300\uC0C1\uC774 \uBB34\uB300 \uC5EC\uAE30\uC800\uAE30 \uD769\uC5B4\uC838 \uC788\uC73C\uBA74 <code>elements</code>\uB97C \uC4F0\uC138\uC694. <code>bbox</code>\uB294 \uC14B\uC744 \uB2F4\uB290\uB77C \uADF8 \uC0AC\uC774\uC758 \uAD00\uACC4\uC5C6\uB294 \uC694\uC18C\uAE4C\uC9C0 \uBC1D\uD799\uB2C8\uB2E4.</p>
+        ${rangeField("padding", "effect.padding", eff.padding, 0, 80, 1)}
+        <div class="studio-props-header" style="margin-top:0.6rem"><span class="studio-props-header-title">\uAC00\uB824\uC9C0\uB294 \uCABD</span></div>
+        ${rangeField("dim", "effect.dim", eff.dim, 0, 1, 0.01, "0\uC774\uBA74 \uC5B4\uB461\uAC8C \uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.")}
+        ${colorField("dimColor", "effect.dimColor", eff.dimColor ?? "#0b1120")}
+        <p class="studio-camera-hint">\uBE44\uC6CC \uB450\uBA74 \uD14C\uB9C8 \uD1A0\uD070\uC744 \uC501\uB2C8\uB2E4 \u2014 \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uBAA8\uB450 near-black.</p>
+        <div class="studio-props-header" style="margin-top:0.6rem"><span class="studio-props-header-title">\uBE44\uCD94\uB294 \uCABD</span></div>
+        ${rangeField("lit", "effect.lit", eff.lit, 0, 1, 0.01, "0\uC774\uBA74 \uB300\uC0C1\uC740 \uC790\uAE30 \uC0C9 \uADF8\uB300\uB85C\uC785\uB2C8\uB2E4. \uC870\uBA85\uC758 \uC824\uCC98\uB7FC \uC0C9\uC744 \uC5B9\uC73C\uB824\uBA74 \uC62C\uB9AC\uC138\uC694.")}
+        ${colorField("litColor", "effect.litColor", eff.litColor)}
+        <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;
+    }
+    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("");
-    const typeOpts = ["highlight", "pulse", "flow"].map(
-      (t) => `<option value="${t}" ${t === eff.type ? "selected" : ""}>${t}</option>`
-    ).join("");
     const specific = eff.type === "highlight" ? colorField("color", "effect.color", eff.color) : eff.type === "pulse" ? numberField("scale", "effect.scale", eff.scale, 0.05) : colorField("color", "effect.color", eff.color) + numberField("particles", "effect.particles", eff.particles, 1) + numberField("radius", "effect.radius", eff.radius, 0.5);
     panelEl.innerHTML = `
       ${timeHint}
@@ -3313,13 +3478,13 @@ function rangeField(label, key, value, min, max, step, hint) {
     ${hint ? `<p class="studio-camera-hint">${escapeHtml2(hint)}</p>` : ""}
   </div>`;
 }
-function focusTargetPicker(def, index, selected) {
+function elementCheckList(def, attribute, key, selected) {
   const chosen = new Set(selected);
   const rows = def.elements.map((element) => {
     const name = friendlyElementLabel(element);
     const same = name === element.id;
     return `<label class="studio-camera-target ${chosen.has(element.id) ? "is-on" : ""}">
-        <input type="checkbox" data-camera-target="${index}" value="${escapeHtml2(element.id)}" ${chosen.has(element.id) ? "checked" : ""} />
+        <input type="checkbox" ${attribute}="${escapeHtml2(key)}" value="${escapeHtml2(element.id)}" ${chosen.has(element.id) ? "checked" : ""} />
         <span class="studio-camera-target-name">${escapeHtml2(name)}</span>
         ${same ? "" : `<span class="studio-camera-target-id">${escapeHtml2(element.id)}</span>`}
         <span class="studio-camera-target-type">${element.type}</span>
@@ -3366,7 +3531,7 @@ function renderCameraForm(def, focusIndex) {
             </div>
           </div>
           <div class="studio-camera-field-label">\uB300\uC0C1 \uC694\uC18C (${entry.elementIds.length})</div>
-          ${focusTargetPicker(def, index, entry.elementIds)}
+          ${elementCheckList(def, "data-camera-target", String(index), entry.elementIds)}
           ${rangeField("padding", `camera.focus.${index}.padding`, entry.padding, 0, 200, 2, "\uB300\uC0C1 \uC8FC\uBCC0 \uC5EC\uBC31. \uD074\uC218\uB85D \uB113\uAC8C \uC7A1\uC2B5\uB2C8\uB2E4.")}
           ${rangeField("maxZoom", `camera.focus.${index}.maxZoom`, entry.maxZoom, 1, 8, 0.1, "\uD655\uB300 \uC0C1\uD55C. \uC791\uC740 \uC694\uC18C \uD558\uB098\uAC00 \uD654\uBA74\uC744 \uCC44\uC6B0\uB294 \uAC83\uC744 \uB9C9\uC2B5\uB2C8\uB2E4.")}
           <button type="button" class="studio-btn studio-btn-danger" data-delete-camera-focus="${index}">\u{1F5D1} focus \uC0AD\uC81C</button>
@@ -3441,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/>
@@ -3453,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(
@@ -3697,6 +3883,11 @@ function onInput(e) {
     toggleFocusTarget(Number(focusTarget), target.value, target.checked);
     return;
   }
+  const spotTarget = target.dataset.spotlightTarget;
+  if (spotTarget !== void 0 && target instanceof HTMLInputElement) {
+    toggleSpotlightTarget(spotTarget, target.value, target.checked);
+    return;
+  }
   const key = target.dataset.propKey;
   if (!key) return;
   if (target.type === "text" && e.isComposing) return;
@@ -3946,10 +4137,12 @@ function apply(key, value) {
     if (targets) references[token] = targets;
     else delete references[token];
     updateChapter(sel.chapterId, { references });
+  } else if (key === "effect.type" && sel.kind === "effect") {
+    changeEffectType(def, sel.effectId, String(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") {
+    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;
@@ -3957,6 +4150,155 @@ 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;
+  const targets = current.type === "spotlight" ? current.elementIds : [current.elementId];
+  const base = { id: current.id, time: current.time };
+  let next;
+  if (type === "spotlight") {
+    next = {
+      ...base,
+      type: "spotlight",
+      elementIds: targets,
+      duration: Math.max(current.duration, 800),
+      dim: 0.7,
+      lit: 0,
+      litColor: "#fde68a",
+      shape: "bbox",
+      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,
+      elementId: targets[0] ?? "",
+      duration: current.duration
+    };
+    next = type === "pulse" ? { ...single, type: "pulse", scale: 1.12 } : type === "flow" ? {
+      ...single,
+      type: "flow",
+      color: "#facc15",
+      particles: 3,
+      radius: 4
+    } : { ...single, type: "highlight", color: "#facc15" };
+  }
+  replaceEffect(effectId, next);
+}
+function toggleSpotlightTarget(effectId, id, on) {
+  const def = getDef();
+  const effect = def?.effects.find((candidate) => candidate.id === effectId);
+  if (!effect || effect.type !== "spotlight") return;
+  const next = on ? [...effect.elementIds, id] : effect.elementIds.filter((target) => target !== id);
+  if (next.length === 0) {
+    render3();
+    return;
+  }
+  updateEffect(effectId, { elementIds: next });
+}
 function parseBindingFallback(value) {
   if (value === "") return void 0;
   if (value === "true") return true;
@@ -4136,30 +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 === "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") {
@@ -4388,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();
@@ -4428,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;
@@ -4463,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>
@@ -4518,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 });
@@ -17939,5 +18303,5 @@ function reflectState(ui) {
 }
 
 export { getVisibleElementIds, initStudio };
-//# sourceMappingURL=main-DC6D6RNQ.js.map
-//# sourceMappingURL=main-DC6D6RNQ.js.map
+//# sourceMappingURL=main-VRQTHHZE.js.map
+//# sourceMappingURL=main-VRQTHHZE.js.map