@kokoa/clotho-editor 0.2.0 → 0.4.0

package/dist/{main-SKM3P4X7.js → main-HDE5SDKM.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, uniqueEffectId, addEffect, removeAppearance, removeTrack, removeTrackKeyframe, setTrackKeyframe, setCurrentTime, addAppearance, jumpBack, jumpForward, getHistory, promoteDraftToSaved, toggleSelectionFor, moveGroupBy, placeholderImageUrl, groupBbox, layoutIdsFor, findLayoutCollisions, updateLocales, updateData, updateResponsive, updateDuration, updateCheckpoint, updateAppearance, updateEffect, childIdsOf } from './chunk-FAI2G3XK.js';
-import { activeAppearance, animationDocumentSchema, bindablePropertiesFor, 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, 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';
 
 // src/legacy/grid.ts
 var STORAGE_KEY = "studio.grid";
@@ -46,6 +46,35 @@ function snapPoint(pt) {
   return { x: snap(pt.x), y: snap(pt.y) };
 }
 
+// src/legacy/camera-interactions.ts
+function cameraDragMode(part, control) {
+  if (control.kind === "none" || part === "border") return null;
+  if (part === "resize") return control.kind === "focus" ? "padding" : "zoom";
+  return control.kind === "tracks" ? "pan" : null;
+}
+function centreDistance(point, centreX, centreY) {
+  return Math.max(1, Math.hypot(point.x - centreX, point.y - centreY));
+}
+function cameraDragResult(drag, point) {
+  if (drag.mode === "pan") {
+    return {
+      centerX: Math.round(drag.startCenterX - (point.x - drag.startX)),
+      centerY: Math.round(drag.startCenterY - (point.y - drag.startY))
+    };
+  }
+  const ratio = centreDistance(point, drag.startCenterX, drag.startCenterY) / drag.startDistance;
+  if (drag.mode === "zoom") {
+    const zoom = Math.max(0.05, Math.min(20, drag.startZoom / ratio));
+    return { zoom: Number(zoom.toFixed(3)) };
+  }
+  return {
+    padding: Math.max(
+      0,
+      Math.round(drag.startPadding * ratio + (ratio - 1) * 40)
+    )
+  };
+}
+
 // src/legacy/canvas-utils.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 function escapeXml(s) {
@@ -1154,11 +1183,29 @@ var endpointDragState = null;
 var vertexDragState = null;
 var resizeState = null;
 var marqueeState = null;
+var cameraDragState = null;
 var marqueeJustFinished = false;
 var toolJustFinished = false;
 var canvasEl = null;
 var hoveredElementId = null;
 var canvasZoom = 1;
+var showCameraFrame = true;
+var CAMERA_FRAME_KEY = "studio.canvas.cameraFrame";
+try {
+  showCameraFrame = localStorage.getItem(CAMERA_FRAME_KEY) !== "off";
+} catch {
+}
+function isCameraFrameVisible() {
+  return showCameraFrame;
+}
+function setCameraFrameVisible(value) {
+  showCameraFrame = value;
+  try {
+    localStorage.setItem(CAMERA_FRAME_KEY, value ? "on" : "off");
+  } catch {
+  }
+  requestCanvasRender();
+}
 var toolDrawState = null;
 var elementDrawState = null;
 var canvasRenderFrame = null;
@@ -1291,7 +1338,7 @@ function onCanvasClick(e) {
     return;
   }
   if (target?.closest(
-    "[data-rotate-handle], [data-anchor-handle], [data-resize-handle]"
+    "[data-rotate-handle], [data-anchor-handle], [data-resize-handle], [data-camera-frame]"
   ))
     return;
   const id = findElementId(e.target);
@@ -1304,6 +1351,8 @@ function onCanvasClick(e) {
 function onMouseDown(e) {
   if (e.button !== 0) return;
   const target = e.target;
+  const cameraPart = target?.closest("[data-camera-frame]");
+  if (cameraPart && beginCameraDrag(e, cameraPart)) return;
   const def = getDef();
   if (!def) return;
   const activeTool2 = getActiveTool();
@@ -1568,6 +1617,11 @@ function collectDragExtras(anchorId, def, snap2) {
   return extras;
 }
 function onMouseMove(e) {
+  if (cameraDragState) {
+    e.preventDefault();
+    moveCameraDrag(e);
+    return;
+  }
   if (pathDraftState && getActiveTool() === "path") {
     const point = svgPoint(e.clientX, e.clientY);
     if (point) {
@@ -1768,6 +1822,11 @@ function finishPathDraft() {
   render2();
 }
 function onMouseUp(e) {
+  if (cameraDragState) {
+    cameraDragState = null;
+    endTransient();
+    return;
+  }
   if (elementDrawState) {
     const draw = elementDrawState;
     const point = svgPoint(e.clientX, e.clientY);
@@ -2176,6 +2235,10 @@ function render2() {
       canvasEl.appendChild(g);
     }
   }
+  const cameraFrame = renderCameraFrame(def);
+  if (cameraFrame) canvasEl.appendChild(cameraFrame);
+  const spotlightPreview = renderSpotlightPreview(def, snap2, elementsById);
+  if (spotlightPreview) canvasEl.appendChild(spotlightPreview);
   const selection = getSelection();
   if (selection.kind === "element") {
     const selEl = elementsById.get(selection.elementId);
@@ -2386,6 +2449,199 @@ function renderGroupOutline(groupId) {
   `;
   return g;
 }
+function renderCameraFrame(def) {
+  if (!showCameraFrame) return null;
+  const view = computeCamera(def, getCurrentTime());
+  if (!view) return null;
+  const { width, height } = def.canvas;
+  const selected = getSelection().kind === "camera";
+  const control = cameraControlAt(getCurrentTime());
+  const g = document.createElementNS(SVG_NS, "g");
+  g.setAttribute(
+    "class",
+    `studio-camera-frame${selected ? " is-selected" : ""}`
+  );
+  g.setAttribute("pointer-events", "none");
+  const scrim = document.createElementNS(SVG_NS, "path");
+  scrim.setAttribute(
+    "d",
+    `M0 0H${width}V${height}H0Z M${view.x} ${view.y}H${view.x + view.width}V${view.y + view.height}H${view.x}Z`
+  );
+  scrim.setAttribute("fill-rule", "evenodd");
+  scrim.setAttribute("class", "studio-camera-frame-scrim");
+  g.appendChild(scrim);
+  const rect = document.createElementNS(SVG_NS, "rect");
+  rect.setAttribute("x", String(view.x));
+  rect.setAttribute("y", String(view.y));
+  rect.setAttribute("width", String(view.width));
+  rect.setAttribute("height", String(view.height));
+  rect.setAttribute("class", "studio-camera-frame-rect");
+  rect.setAttribute("vector-effect", "non-scaling-stroke");
+  rect.setAttribute("data-camera-frame", "border");
+  rect.setAttribute("pointer-events", "stroke");
+  g.appendChild(rect);
+  if (selected && control.kind !== "none") {
+    g.appendChild(cameraHandles(view, control));
+  }
+  const label = document.createElementNS(SVG_NS, "text");
+  label.setAttribute("x", String(view.x + 6));
+  label.setAttribute("y", String(view.y + 16));
+  label.setAttribute("class", "studio-camera-frame-label");
+  label.textContent = selected ? `\u{1F3A5} ${view.zoom.toFixed(2)}\xD7 \xB7 ${Math.round(view.centerX)}, ${Math.round(view.centerY)} \xB7 ${control.kind === "focus" ? `focus #${control.index + 1} \u2014 \uBAA8\uC11C\uB9AC\uB97C \uB04C\uBA74 padding` : "\uB04C\uC5B4\uC11C \uC774\uB3D9 \xB7 \uBAA8\uC11C\uB9AC\uB85C zoom"}` : `\u{1F3A5} ${view.zoom.toFixed(2)}\xD7 \xB7 ${Math.round(view.centerX)}, ${Math.round(view.centerY)}`;
+  g.appendChild(label);
+  if (view.issues.length > 0) {
+    const warning = document.createElementNS(SVG_NS, "text");
+    warning.setAttribute("x", String(view.x + 6));
+    warning.setAttribute("y", String(view.y + 32));
+    warning.setAttribute("class", "studio-camera-frame-warning");
+    warning.textContent = `\u26A0 ${view.issues[0].message}`;
+    g.appendChild(warning);
+  }
+  return g;
+}
+function beginCameraDrag(e, part) {
+  const def = getDef();
+  if (!def) return false;
+  const time = getCurrentTime();
+  const view = computeCamera(def, time);
+  if (!view) return false;
+  const wasSelected = getSelection().kind === "camera";
+  if (!wasSelected) setSelection({ kind: "camera" });
+  e.preventDefault();
+  e.stopPropagation();
+  const kind = part.dataset.cameraFrame;
+  if (kind === "border" || !wasSelected) return true;
+  const control = cameraControlAt(time);
+  const mode = cameraDragMode(kind, control);
+  if (!mode) return true;
+  const point = svgPoint(e.clientX, e.clientY);
+  if (!point) return true;
+  const focusIndex = control.kind === "focus" ? control.index : -1;
+  const padding = focusIndex >= 0 ? getCamera().focus[focusIndex]?.padding ?? 24 : 0;
+  cameraDragState = {
+    mode,
+    focusIndex,
+    time,
+    startX: point.x,
+    startY: point.y,
+    startCenterX: view.centerX,
+    startCenterY: view.centerY,
+    startZoom: view.zoom,
+    startPadding: padding,
+    startDistance: centreDistance(point, view.centerX, view.centerY)
+  };
+  beginTransient("\uCE74\uBA54\uB77C \uC870\uC815", "camera");
+  return true;
+}
+function moveCameraDrag(e) {
+  const drag = cameraDragState;
+  if (!drag) return;
+  const point = svgPoint(e.clientX, e.clientY);
+  if (!point) return;
+  const next = cameraDragResult(drag, point);
+  if (next.centerX !== void 0) {
+    setCameraKeyframe("x", drag.time, next.centerX);
+  }
+  if (next.centerY !== void 0) {
+    setCameraKeyframe("y", drag.time, next.centerY);
+  }
+  if (next.zoom !== void 0) setCameraKeyframe("zoom", drag.time, next.zoom);
+  if (next.padding !== void 0) {
+    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 cameraHandles(view, control) {
+  const g = document.createElementNS(SVG_NS, "g");
+  if (control.kind === "tracks") {
+    const body = document.createElementNS(SVG_NS, "rect");
+    body.setAttribute("x", String(view.x));
+    body.setAttribute("y", String(view.y));
+    body.setAttribute("width", String(view.width));
+    body.setAttribute("height", String(view.height));
+    body.setAttribute("class", "studio-camera-frame-body");
+    body.setAttribute("data-camera-frame", "pan");
+    body.setAttribute("pointer-events", "fill");
+    g.appendChild(body);
+  }
+  const corners = [
+    ["nw", view.x, view.y],
+    ["ne", view.x + view.width, view.y],
+    ["sw", view.x, view.y + view.height],
+    ["se", view.x + view.width, view.y + view.height]
+  ];
+  const size = 9 / canvasZoom;
+  for (const [corner, cx, cy] of corners) {
+    const handle = document.createElementNS(SVG_NS, "rect");
+    handle.setAttribute("x", String(cx - size / 2));
+    handle.setAttribute("y", String(cy - size / 2));
+    handle.setAttribute("width", String(size));
+    handle.setAttribute("height", String(size));
+    handle.setAttribute("class", "studio-camera-frame-handle");
+    handle.setAttribute("data-camera-frame", "resize");
+    handle.setAttribute("data-camera-corner", corner);
+    handle.setAttribute("pointer-events", "all");
+    g.appendChild(handle);
+  }
+  return g;
+}
 function makeG(elementId, rotation, cx, cy) {
   const g = document.createElementNS(SVG_NS, "g");
   g.setAttribute("data-elem-id", elementId);
@@ -2762,8 +3018,23 @@ function initProperties(root) {
   root.addEventListener("compositionend", onCompositionEnd);
   root.addEventListener("toggle", onSectionToggle, true);
   root.addEventListener("wheel", onNumberWheel, { passive: false });
+  root.addEventListener("pointerdown", onSliderGrab);
+  root.addEventListener("pointerup", onSliderRelease);
+  root.addEventListener("pointercancel", onSliderRelease);
   render3();
 }
+var slidingKey = null;
+function onSliderGrab(e) {
+  const target = e.target;
+  if (target.type !== "range" || !target.dataset.propKey) return;
+  slidingKey = target.dataset.propKey;
+  beginTransient(`\uC870\uC815: ${slidingKey}`, "camera");
+}
+function onSliderRelease() {
+  if (slidingKey === null) return;
+  slidingKey = null;
+  endTransient();
+}
 function onCompositionStart() {
   isComposingFallback = true;
 }
@@ -2981,9 +3252,12 @@ function renderInner() {
           <option value="highlight">highlight</option>
           <option value="pulse">pulse</option>
           <option value="flow">flow</option>
+          <option value="spotlight">spotlight</option>
         </select>
         <button type="button" class="studio-btn" data-add-effect>\uFF0B \uD6A8\uACFC</button>
       </div>
+      <div class="studio-props-header" style="margin-top:0.6rem"><span class="studio-props-header-title">\uCE74\uBA54\uB77C</span><span class="studio-props-header-type">${hasCamera() ? `focus ${getCamera().focus.length} \xB7 track ${getCamera().tracks.length}` : "\uC5C6\uC74C"}</span></div>
+      <button type="button" class="studio-btn" data-open-camera>\u{1F3A5} \uCE74\uBA54\uB77C \uD3B8\uC9D1</button>
     `;
     return;
   }
@@ -3042,6 +3316,10 @@ function renderInner() {
     renderElementForm(def, el);
     return;
   }
+  if (sel.kind === "camera") {
+    renderCameraForm(def, sel.focusIndex);
+    return;
+  }
   if (sel.kind === "chapter") {
     const ch = def.chapters.find((c) => c.id === sel.chapterId);
     if (!ch) {
@@ -3066,12 +3344,40 @@ function renderInner() {
       setSelection({ kind: "none" });
       return;
     }
+    const typeOpts = ["highlight", "pulse", "flow", "spotlight"].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;
+    }
     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}
@@ -3086,6 +3392,114 @@ function renderInner() {
     return;
   }
 }
+function rangeField(label, key, value, min, max, step, hint) {
+  return `<div class="studio-camera-range">
+    <div class="studio-camera-range-head"><span>${escapeHtml2(label)}</span><span class="studio-camera-range-value">${value}</span></div>
+    <div class="studio-camera-range-row">
+      <input type="range" data-prop-key="${escapeHtml2(key)}" min="${min}" max="${max}" step="${step}" value="${value}" />
+      <input type="number" data-prop-key="${escapeHtml2(key)}" step="${step}" value="${value}" />
+    </div>
+    ${hint ? `<p class="studio-camera-hint">${escapeHtml2(hint)}</p>` : ""}
+  </div>`;
+}
+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" ${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>
+      </label>`;
+  }).join("");
+  const missing = selected.filter(
+    (id) => !def.elements.some((element) => element.id === id)
+  );
+  return `<div class="studio-camera-targets">
+    ${rows || '<p class="studio-props-empty">\uC694\uC18C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.</p>'}
+    ${missing.length > 0 ? `<p class="studio-camera-issue">\u26A0 \uBB38\uC11C\uC5D0 \uC5C6\uB294 id: ${escapeHtml2(missing.join(", "))}</p>` : ""}
+  </div>`;
+}
+function renderCameraForm(def, focusIndex) {
+  if (!panelEl) return;
+  const camera = getCamera();
+  const time = getCurrentTime();
+  const view = computeCamera(def, time);
+  const control = cameraControlAt(time);
+  const scalingOpts = ["scale", "fixed"].map(
+    (value) => `<option value="${value}" ${value === camera.strokeScaling ? "selected" : ""}>${value}${value === "scale" ? " (\uAE30\uBCF8)" : ""}</option>`
+  ).join("");
+  const controlNote = control.kind === "focus" ? `focus #${control.index + 1}\uC774(\uAC00) \uC774 \uC2DC\uAC01\uC744 \uACB0\uC815\uD569\uB2C8\uB2E4 \xB7 \uCE94\uBC84\uC2A4 \uBAA8\uC11C\uB9AC\uB97C \uB04C\uBA74 padding` : control.kind === "tracks" ? "track\uC774 \uC774 \uC2DC\uAC01\uC744 \uACB0\uC815\uD569\uB2C8\uB2E4 \xB7 \uCE94\uBC84\uC2A4\uC5D0\uC11C \uB04C\uC5B4 \uC774\uB3D9, \uBAA8\uC11C\uB9AC\uB85C zoom" : "\uCE74\uBA54\uB77C \uC5C6\uC74C";
+  const readout = view ? `<div class="studio-camera-readout">zoom ${view.zoom.toFixed(2)}\xD7 \xB7 center ${Math.round(view.centerX)}, ${Math.round(view.centerY)}
+      <br/><span class="studio-camera-control">${escapeHtml2(controlNote)}</span>${view.issues.length > 0 ? `<br/><span class="studio-camera-issue">\u26A0 ${escapeHtml2(view.issues[0].message)}</span>` : ""}</div>` : '<div class="studio-camera-readout">\uC774 \uBB38\uC11C\uC5D0\uB294 \uCE74\uBA54\uB77C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4. \uC544\uB798\uC5D0\uC11C focus\uB098 track\uC744 \uCD94\uAC00\uD558\uBA74 \uC0DD\uAE41\uB2C8\uB2E4.</div>';
+  const focusRows = camera.focus.map((entry, index) => {
+    const open = index === focusIndex;
+    const targets = entry.elementIds.join(", ");
+    const preset = (value, label) => `<button type="button" class="studio-chip ${entry.duration === value ? "is-on" : ""}" data-camera-duration="${index}:${value}">${label}</button>`;
+    return `
+        <details class="studio-camera-focus" ${open ? "open" : ""}>
+          <summary>#${index + 1} \xB7 ${entry.time}ms \u2192 ${escapeHtml2(targets)}</summary>
+          <div class="studio-camera-focus-actions">
+            <button type="button" class="studio-btn" data-camera-seek="${entry.time}" title="\uC774 focus\uAC00 \uC2DC\uC791\uD558\uB294 \uC2DC\uAC01\uC73C\uB85C \uC774\uB3D9">\u23F1 ${entry.time}ms\uB85C \uC774\uB3D9</button>
+            <button type="button" class="studio-btn" data-camera-focus-now="${index}" title="\uD604\uC7AC \uC7AC\uC0DD \uC704\uCE58\uB97C \uC774 focus\uC758 \uC2DC\uC791 \uC2DC\uAC01\uC73C\uB85C">\uD604\uC7AC \uC2DC\uAC01\uC73C\uB85C</button>
+          </div>
+          ${numberField("time (ms)", `camera.focus.${index}.time`, entry.time, 50)}
+          <div class="studio-camera-range">
+            <div class="studio-camera-range-head"><span>duration (ms)</span><span class="studio-camera-range-value">${entry.duration}</span></div>
+            <div class="studio-camera-chips">${preset(0, "\uCEF7")}${preset(300, "300")}${preset(600, "600")}${preset(1e3, "1000")}${preset(1600, "1600")}</div>
+            <div class="studio-camera-range-row">
+              <input type="range" data-prop-key="camera.focus.${index}.duration" min="0" max="3000" step="50" value="${entry.duration}" />
+              <input type="number" data-prop-key="camera.focus.${index}.duration" step="50" value="${entry.duration}" />
+            </div>
+          </div>
+          <div class="studio-camera-field-label">\uB300\uC0C1 \uC694\uC18C (${entry.elementIds.length})</div>
+          ${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>
+        </details>`;
+  }).join("");
+  const trackRows = ["zoom", "x", "y"].map((property) => {
+    const track = camera.tracks.find((t) => t.property === property);
+    const current = property === "zoom" ? view?.zoom ?? 1 : property === "x" ? view?.centerX ?? def.canvas.width / 2 : view?.centerY ?? def.canvas.height / 2;
+    const keyframes = (track?.keyframes ?? []).map(
+      (kf) => `<li><button type="button" class="studio-camera-kf" data-camera-seek="${kf.time}">${kf.time}ms</button><span>${kf.value}</span><button type="button" class="studio-camera-kf-del" data-camera-kf-del="${property}:${kf.time}" title="keyframe \uC0AD\uC81C">\u2715</button></li>`
+    ).join("");
+    const bounds = property === "zoom" ? { min: 0.1, max: 8, step: 0.05 } : property === "x" ? { min: 0, max: def.canvas.width, step: 1 } : { min: 0, max: def.canvas.height, step: 1 };
+    return `
+        <div class="studio-camera-track">
+          <div class="studio-camera-track-head">
+            <span>${property}</span>
+            <span class="studio-camera-track-now">\uD604\uC7AC ${current.toFixed(property === "zoom" ? 2 : 0)}</span>
+            ${track ? `<button type="button" class="studio-btn studio-btn-danger" data-del-camera-track="${property}" title="track \uC0AD\uC81C">\u{1F5D1}</button>` : ""}
+          </div>
+          ${control.kind === "focus" ? `<div class="studio-camera-range-row">
+                   <input type="number" data-prop-key="camera.kf.${property}" step="${bounds.step}" value="${current.toFixed(property === "zoom" ? 2 : 0)}" />
+                 </div>
+                 <p class="studio-camera-hint">focus #${control.index + 1}\uC774(\uAC00) \uC774 \uC2DC\uAC01\uC744 \uACB0\uC815\uD558\uBBC0\uB85C \uC9C0\uAE08\uC740 \uD654\uBA74\uC774 \uBC14\uB00C\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uAC12\uC740 t = ${time}ms \uC5D0 \uAE30\uB85D\uB429\uB2C8\uB2E4.</p>` : `<div class="studio-camera-range-row">
+                   <input type="range" data-prop-key="camera.kf.${property}" min="${bounds.min}" max="${bounds.max}" step="${bounds.step}" value="${current.toFixed(property === "zoom" ? 2 : 0)}" />
+                   <input type="number" data-prop-key="camera.kf.${property}" step="${bounds.step}" value="${current.toFixed(property === "zoom" ? 2 : 0)}" />
+                 </div>
+                 <p class="studio-camera-hint">\uC6C0\uC9C1\uC774\uBA74 t = ${time}ms \uC5D0 keyframe\uC744 \uC501\uB2C8\uB2E4.</p>`}
+          ${keyframes ? `<ul class="studio-camera-kf-list">${keyframes}</ul>` : '<p class="studio-props-empty">keyframe \uC5C6\uC74C</p>'}
+        </div>`;
+  }).join("");
+  panelEl.innerHTML = `
+    <span class="studio-step-hint">\u{1F4CD} t = ${time} ms / ${def.duration} ms</span>
+    <div class="studio-props-header"><span class="studio-props-header-title">\uCE74\uBA54\uB77C</span><span class="studio-props-header-type">camera</span></div>
+    ${readout}
+    <label class="studio-field"><span>strokeScaling</span><select data-prop-key="camera.strokeScaling">${scalingOpts}</select></label>
+    <div class="studio-props-header" style="margin-top:0.6rem"><span class="studio-props-header-title">focus (${camera.focus.length})</span></div>
+    <p class="studio-props-empty" style="margin:0 0 0.4rem">\uC694\uC18C\uB97C \uC9C0\uC815\uD558\uBA74 \uADF8 \uC694\uC18C\uAC00 \uD654\uBA74\uC5D0 \uB2F4\uAE30\uB3C4\uB85D \uCE74\uBA54\uB77C\uB97C \uACC4\uC0B0\uD569\uB2C8\uB2E4. \uB300\uC0C1\uC774 \uC6C0\uC9C1\uC774\uBA74 \uB530\uB77C\uAC11\uB2C8\uB2E4.</p>
+    ${focusRows}
+    <button type="button" class="studio-btn" data-add-camera-focus style="margin-top:0.4rem">\uFF0B \uD604\uC7AC \uC2DC\uAC01\uC5D0 focus</button>
+    <div class="studio-props-header" style="margin-top:0.6rem"><span class="studio-props-header-title">tracks</span></div>
+    ${trackRows}
+    ${hasCamera() ? '<button type="button" class="studio-btn studio-btn-danger" data-clear-camera style="margin-top:0.8rem">\u{1F5D1} \uCE74\uBA54\uB77C \uC81C\uAC70</button>' : ""}
+  `;
+}
 function renderElementForm(def, el) {
   if (!panelEl) return;
   const timeHint = `<span class="studio-step-hint">\u{1F4CD} t = ${getCurrentTime()} ms</span>`;
@@ -3367,6 +3781,16 @@ function renderTracks(el) {
 }
 function onInput(e) {
   const target = e.target;
+  const focusTarget = target.dataset.cameraTarget;
+  if (focusTarget !== void 0 && target instanceof HTMLInputElement) {
+    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;
@@ -3385,6 +3809,16 @@ function onInput(e) {
     value = target.checked;
   apply(key, value);
 }
+function toggleFocusTarget(index, id, on) {
+  const entry = getCamera().focus[index];
+  if (!entry) return;
+  const next = on ? [...entry.elementIds, id] : entry.elementIds.filter((value) => value !== id);
+  if (next.length === 0) {
+    render3();
+    return;
+  }
+  updateCameraFocus(index, { elementIds: next });
+}
 function onChange(e) {
   const target = e.target;
   if (target instanceof HTMLInputElement && target.type === "color") {
@@ -3485,6 +3919,33 @@ function apply(key, value) {
         predicate: { type: "equals", value: answer }
       });
     }
+  } else if (key === "camera.strokeScaling")
+    setCameraStrokeScaling(String(value));
+  else if (key.startsWith("camera.kf.")) {
+    const property = key.slice("camera.kf.".length);
+    const raw = Number(value);
+    if (!Number.isFinite(raw)) return;
+    setCameraKeyframe(
+      property,
+      getCurrentTime(),
+      property === "zoom" ? Math.max(0.05, raw) : Math.round(raw)
+    );
+  } else if (key.startsWith("camera.focus.")) {
+    const [, , indexText, field] = key.split(".");
+    const index = Number(indexText);
+    if (!Number.isInteger(index)) return;
+    if (field === "elementIds") {
+      const ids = String(value).split(",").map((id) => id.trim()).filter(Boolean);
+      if (ids.length > 0) updateCameraFocus(index, { elementIds: ids });
+      return;
+    }
+    if (field === "time") updateCameraFocus(index, { time: Number(value) });
+    else if (field === "duration")
+      updateCameraFocus(index, { duration: Math.max(0, Number(value)) });
+    else if (field === "padding")
+      updateCameraFocus(index, { padding: Math.max(0, Number(value)) });
+    else if (field === "maxZoom")
+      updateCameraFocus(index, { maxZoom: Math.max(0.01, Number(value)) });
   } else if (key.startsWith("el.") && sel.kind === "element") {
     const prop = key.slice(3);
     const time = getCurrentTime();
@@ -3579,10 +4040,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") {
       patch[prop] = Number(value);
     } else {
       patch[prop] = value;
@@ -3590,6 +4053,52 @@ function apply(key, value) {
     updateEffect(sel.effectId, patch);
   }
 }
+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 {
+    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;
@@ -3682,6 +4191,74 @@ function onClick2(e) {
     });
     return;
   }
+  if (target.closest("[data-open-camera]")) {
+    setSelection({ kind: "camera" });
+    return;
+  }
+  if (target.closest("[data-add-camera-focus]")) {
+    const seed = sel.kind === "element" ? [sel.elementId] : sel.kind === "elements" ? [...sel.elementIds] : def.elements[0] ? [def.elements[0].id] : [];
+    if (seed.length === 0) return;
+    addCameraFocus({
+      time: getCurrentTime(),
+      duration: 600,
+      elementIds: seed,
+      padding: 24,
+      maxZoom: 4
+    });
+    return;
+  }
+  const durationChip = target.closest("[data-camera-duration]");
+  if (durationChip) {
+    const [index, duration] = (durationChip.dataset.cameraDuration ?? "").split(
+      ":"
+    );
+    updateCameraFocus(Number(index), { duration: Number(duration) });
+    return;
+  }
+  const focusNow = target.closest("[data-camera-focus-now]");
+  if (focusNow) {
+    updateCameraFocus(Number(focusNow.dataset.cameraFocusNow), {
+      time: getCurrentTime()
+    });
+    return;
+  }
+  const deleteFocus = target.closest("[data-delete-camera-focus]");
+  if (deleteFocus) {
+    deleteCameraFocus(Number(deleteFocus.dataset.deleteCameraFocus));
+    return;
+  }
+  const addCameraKf = target.closest("[data-add-camera-kf]");
+  if (addCameraKf) {
+    const property = addCameraKf.dataset.addCameraKf;
+    const view = computeCamera(def, getCurrentTime());
+    const value = property === "zoom" ? view?.zoom ?? 1 : property === "x" ? view?.centerX ?? def.canvas.width / 2 : view?.centerY ?? def.canvas.height / 2;
+    setCameraKeyframe(
+      property,
+      getCurrentTime(),
+      Number(value.toFixed(property === "zoom" ? 3 : 1))
+    );
+    return;
+  }
+  const delCameraKf = target.closest("[data-camera-kf-del]");
+  if (delCameraKf) {
+    const [property, at] = (delCameraKf.dataset.cameraKfDel ?? "").split(":");
+    removeCameraKeyframe(property, Number(at));
+    return;
+  }
+  const delCameraTrack = target.closest("[data-del-camera-track]");
+  if (delCameraTrack) {
+    removeCameraTrack(delCameraTrack.dataset.delCameraTrack);
+    return;
+  }
+  const cameraSeek = target.closest("[data-camera-seek]");
+  if (cameraSeek) {
+    setCurrentTime(Number(cameraSeek.dataset.cameraSeek));
+    return;
+  }
+  if (target.closest("[data-clear-camera]")) {
+    clearCamera();
+    return;
+  }
   if (target.closest("[data-add-chapter]")) {
     const id = uniqueChapterId();
     addChapter({
@@ -3712,7 +4289,22 @@ function onClick2(e) {
       duration: 500
     };
     let eff;
-    if (type === "highlight")
+    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
@@ -3930,6 +4522,7 @@ function render4() {
         <div class="studio-tl-chapter-label">${escapeHtml3(c.label || c.id)}</div>
       </div>`;
   }).join("");
+  const cameraRows = renderCameraRows(totalPx, sel);
   const playheadCol = `<div class="studio-tl-playhead-col" style="left:${GUTTER_PX}px;width:${totalPx}px"><div class="studio-tl-playhead" style="left:${timeToPx(currentTime)}px" title="t=${currentTime}ms"></div></div>`;
   tracksEl.innerHTML = `
     <div class="studio-tl-chart">
@@ -3947,12 +4540,48 @@ function render4() {
           </div>
         </div>
       </div>
+      ${cameraRows}
       ${playheadCol}
     </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);
 }
+function renderCameraRows(totalPx, sel) {
+  const camera = getCamera();
+  const isCameraSel = sel.kind === "camera";
+  const focusBars = camera.focus.map((entry, index) => {
+    const left = timeToPx(entry.time);
+    const width = Math.max(6, timeToPx(entry.duration));
+    const selected = isCameraSel && sel.focusIndex === index;
+    const targets = entry.elementIds.join(", ");
+    return `<div class="studio-tl-camera-focus ${selected ? "is-selected" : ""}" style="left:${left}px;width:${width}px" data-camera-focus="${index}" title="focus \u2192 ${escapeHtml3(targets)} @ ${entry.time}ms (${entry.duration}ms, \uB4DC\uB798\uADF8\uB85C \uC774\uB3D9)">
+        <span class="studio-tl-camera-focus-label">${escapeHtml3(targets)}</span>
+      </div>`;
+  }).join("");
+  const focusRow = `
+    <div class="studio-tl-row studio-tl-camera-row ${isCameraSel && sel.focusIndex === void 0 ? "is-selected" : ""}">
+      <div class="studio-tl-gutter studio-tl-camera-gutter" data-camera-select title="\uCE74\uBA54\uB77C \uC18D\uC131 \uC5F4\uAE30">\u{1F3A5} Camera<button type="button" class="studio-tl-camera-add" data-add-camera-focus title="\uD604\uC7AC \uC2DC\uAC01\uC5D0 focus \uCD94\uAC00">\uFF0B</button></div>
+      <div class="studio-tl-body" style="width:${totalPx}px">
+        <div class="studio-tl-camera-track" data-tl-area="camera">
+          ${focusBars || '<span class="studio-tl-camera-empty">focus \uC5C6\uC74C \xB7 \uFF0B \uB85C \uCD94\uAC00</span>'}
+        </div>
+      </div>
+    </div>`;
+  const trackRows = camera.tracks.map((track) => {
+    const marks = track.keyframes.map(
+      (kf) => `<div class="studio-tl-keyframe studio-tl-camera-keyframe" style="left:${timeToPx(kf.time)}px" data-camera-kf-prop="${track.property}" data-camera-kf-time="${kf.time}" title="${track.property} = ${kf.value} @ ${kf.time}ms (\uB4DC\uB798\uADF8\uB85C \uC774\uB3D9)">\u25C6</div>`
+    ).join("");
+    return `
+        <div class="studio-tl-row studio-tl-camera-row">
+          <div class="studio-tl-gutter studio-tl-camera-gutter is-sub" data-camera-select>\u21B3 ${track.property}</div>
+          <div class="studio-tl-body" style="width:${totalPx}px">
+            <div class="studio-tl-camera-track" data-tl-area="camera">${marks}</div>
+          </div>
+        </div>`;
+  }).join("");
+  return focusRow + trackRows;
+}
 function gutterLabel(el) {
   return `${friendlyElementLabel(el)} \xB7 ${el.type}`;
 }
@@ -4008,6 +4637,32 @@ function renderElementTracks(elements, currentTime, totalPx, sel) {
 }
 function onTracksClick(e) {
   const target = e.target;
+  if (target.closest("[data-add-camera-focus]")) {
+    const time = getCurrentTime();
+    const selected = getSelection();
+    const elementIds = selected.kind === "element" ? [selected.elementId] : selected.kind === "elements" ? [...selected.elementIds] : (getDef()?.elements[0]?.id ?? "").length > 0 ? [getDef().elements[0].id] : [];
+    if (elementIds.length === 0) return;
+    addCameraFocus({
+      time,
+      duration: 600,
+      elementIds,
+      padding: 24,
+      maxZoom: 4
+    });
+    return;
+  }
+  const focusBar = target.closest("[data-camera-focus]");
+  if (focusBar) {
+    setSelection({
+      kind: "camera",
+      focusIndex: Number(focusBar.dataset.cameraFocus)
+    });
+    return;
+  }
+  if (target.closest("[data-camera-select]")) {
+    setSelection({ kind: "camera" });
+    return;
+  }
   const chapterMarker = target.closest("[data-chapter-id]");
   if (chapterMarker) {
     setSelection({
@@ -4097,6 +4752,36 @@ function onMouseDown2(e) {
     }
     return;
   }
+  const cameraKf = target.closest("[data-camera-kf-prop]");
+  if (cameraKf) {
+    e.preventDefault();
+    e.stopPropagation();
+    const startTime = Number(cameraKf.dataset.cameraKfTime);
+    dragMode = {
+      kind: "camera-keyframe",
+      prop: cameraKf.dataset.cameraKfProp,
+      startTime,
+      startMouseX: e.clientX,
+      currentTime: startTime
+    };
+    return;
+  }
+  const cameraFocus = target.closest("[data-camera-focus]");
+  if (cameraFocus) {
+    e.preventDefault();
+    e.stopPropagation();
+    const index = Number(cameraFocus.dataset.cameraFocus);
+    const entry = getCamera().focus[index];
+    if (entry) {
+      dragMode = {
+        kind: "camera-focus",
+        index,
+        startTime: entry.time,
+        startMouseX: e.clientX
+      };
+    }
+    return;
+  }
   const chapterMarker = target.closest("[data-chapter-id]");
   if (chapterMarker) {
     e.preventDefault();
@@ -4157,6 +4842,29 @@ function onMouseMove2(e) {
     showDragTooltip(e.clientX, e.clientY, `\u25C6 ${dragMode.prop} @ ${newTime} ms`);
     return;
   }
+  if (dragMode.kind === "camera-keyframe") {
+    const dt = Math.round((e.clientX - dragMode.startMouseX) / pxPerMs);
+    const newTime = Math.max(0, dragMode.startTime + dt);
+    if (newTime !== dragMode.currentTime) {
+      moveCameraKeyframe(dragMode.prop, dragMode.currentTime, newTime);
+      dragMode.currentTime = newTime;
+    }
+    showDragTooltip(
+      e.clientX,
+      e.clientY,
+      `\u{1F3A5} ${dragMode.prop} @ ${newTime} ms`
+    );
+    return;
+  }
+  if (dragMode.kind === "camera-focus") {
+    const dt = Math.round((e.clientX - dragMode.startMouseX) / pxPerMs);
+    const newTime = Math.max(0, dragMode.startTime + dt);
+    updateCameraFocus(dragMode.index, { time: newTime });
+    const moved = getCamera().focus.findIndex((f) => f.time === newTime);
+    if (moved >= 0) dragMode.index = moved;
+    showDragTooltip(e.clientX, e.clientY, `\u{1F3A5} focus @ ${newTime} ms`);
+    return;
+  }
   if (dragMode.kind === "appearance") {
     const dxPx = e.clientX - dragMode.startMouseX;
     const dt = Math.round(dxPx / pxPerMs);
@@ -16159,6 +16867,7 @@ var KIND_ICON = {
   appearance: "\u25D0",
   chapter: "\u{1F4CD}",
   effect: "\u2728",
+  camera: "\u{1F3A5}",
   asset: "\u{1F5BC}",
   group: "\u2B1A",
   layout: "\u25A6",
@@ -16283,7 +16992,8 @@ function queryUi() {
   const undoBtn = $("studio-undo");
   const redoBtn = $("studio-redo");
   const gridToggleBtn = $("studio-grid-toggle");
-  if (!titleInput || !idDisplay || !status || !saveBtn || !exportBtn || !importBtn || !importFileInput || !deleteBtn || !newBtn || !openBtn || !playBtn || !restartBtn || !speedInput || !speedValue || !previewLoopInput || !detachTimelineBtn || !canvas || !elementList || !toolsRoot || !propsRoot || !timelineTracks || !elementTracks || !addStepBtn || !libraryDialog || !libraryList || !newDialog || !newIdInput || !newTitleInput || !newCreateBtn || !newError || !canvasWidthInput || !canvasHeightInput || !imageUploadBtn || !imageFileInput || !helpBtn || !helpDialog || !undoBtn || !redoBtn || !gridToggleBtn) {
+  const cameraFrameBtn = $("studio-camera-frame-toggle");
+  if (!titleInput || !idDisplay || !status || !saveBtn || !exportBtn || !importBtn || !importFileInput || !deleteBtn || !newBtn || !openBtn || !playBtn || !restartBtn || !speedInput || !speedValue || !previewLoopInput || !detachTimelineBtn || !canvas || !elementList || !toolsRoot || !propsRoot || !timelineTracks || !elementTracks || !addStepBtn || !libraryDialog || !libraryList || !newDialog || !newIdInput || !newTitleInput || !newCreateBtn || !newError || !canvasWidthInput || !canvasHeightInput || !imageUploadBtn || !imageFileInput || !helpBtn || !helpDialog || !undoBtn || !redoBtn || !gridToggleBtn || !cameraFrameBtn) {
     return null;
   }
   return {
@@ -16326,7 +17036,8 @@ function queryUi() {
     helpDialog,
     undoBtn,
     redoBtn,
-    gridToggleBtn
+    gridToggleBtn,
+    cameraFrameBtn
   };
 }
 
@@ -16434,6 +17145,14 @@ function reflectGridUi(ui) {
   const label = document.getElementById("studio-grid-label");
   if (label) label.textContent = on ? `\uACA9\uC790 ${size}px` : "\uACA9\uC790 \uB054";
 }
+function reflectCameraFrameUi(ui) {
+  const on = isCameraFrameVisible();
+  ui.cameraFrameBtn.setAttribute("aria-pressed", on ? "true" : "false");
+  ui.cameraFrameBtn.classList.toggle("is-active", on);
+  ui.cameraFrameBtn.title = on ? "\uCE74\uBA54\uB77C \uC601\uC5ED \uD45C\uC2DC \uC911 \u2014 \uCE94\uBC84\uC2A4\uC5D0 \uD604\uC7AC \uC2DC\uAC01\uC758 \uCE74\uBA54\uB77C \uC0AC\uAC01\uD615\uC744 \uADF8\uB9BD\uB2C8\uB2E4" : "\uCE74\uBA54\uB77C \uC601\uC5ED \uD45C\uC2DC\uD558\uAE30";
+  const label = document.getElementById("studio-camera-frame-label");
+  if (label) label.textContent = on ? "\uCE74\uBA54\uB77C \uC601\uC5ED" : "\uCE74\uBA54\uB77C \uC601\uC5ED \uB054";
+}
 function setupTimelineResizer(ui) {
   const resizer = document.getElementById("studio-timeline-resizer");
   if (!resizer) return;
@@ -17109,6 +17828,7 @@ function initStudio(opts = {}) {
   initGrid();
   reflectGridUi(ui);
   subscribeGrid(() => reflectGridUi(ui));
+  reflectCameraFrameUi(ui);
   initCanvas(ui.canvas);
   initElementList(ui.elementList, ui.toolsRoot);
   initProperties(ui.propsRoot);
@@ -17282,6 +18002,10 @@ function initStudio(opts = {}) {
     "click",
     () => setGridEnabled(!isGridEnabled())
   );
+  ui.cameraFrameBtn.addEventListener("click", () => {
+    setCameraFrameVisible(!isCameraFrameVisible());
+    reflectCameraFrameUi(ui);
+  });
   ui.playBtn.addEventListener("click", () => togglePlay(ui));
   ui.restartBtn.addEventListener("click", () => {
     if (isPlaying()) {
@@ -17372,5 +18096,5 @@ function reflectState(ui) {
 }
 
 export { getVisibleElementIds, initStudio };
-//# sourceMappingURL=main-SKM3P4X7.js.map
-//# sourceMappingURL=main-SKM3P4X7.js.map
+//# sourceMappingURL=main-HDE5SDKM.js.map
+//# sourceMappingURL=main-HDE5SDKM.js.map