@kokoa/clotho-editor 0.1.4 → 0.3.0

package/dist/{main-NCPWDB2U.js → main-DC6D6RNQ.js}

@@ -1,5 +1,5 @@
-import { updateCanvas, getDef, subscribe, updateMeta, downloadAnimationJson, importAnimation, setDef, markClean, undo, redo, updateSettings, isDirty, canUndo, canRedo, isDraft, uniqueChapterId, getCurrentTime, addChapter, setSelection, uniqueElementId, registerExternalAsset, addElement, registerDataUriAsset, listAnimations, saveAnimation, deleteAnimation, duplicateAnimation, createAnimation, getSelection, getSelectedElementIds, deleteElement, deleteChapter, deleteEffect, updateChapter, isGroup, ungroupElement, groupElements, moveElementToEnd, moveElementToFront, reorderElement, loadAnimation, setDraft, getCurrentSnapshot, setElementValueAtTime, findContainingGroup, isElementSelected, updateElementBase, uniqueEffectId, addEffect, removeAppearance, removeTrack, removeTrackKeyframe, setTrackKeyframe, setCurrentTime, addAppearance, jumpBack, jumpForward, getHistory, promoteDraftToSaved, toggleSelectionFor, moveGroupBy, placeholderImageUrl, groupBbox, updateLocales, updateDuration, updateAppearance, updateEffect, childIdsOf } from './chunk-GMGB7NIL.js';
-import { activeAppearance, animationDocumentSchema, resolveAsset } 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, updateLocales, updateData, updateResponsive, updateDuration, updateCheckpoint, setCameraStrokeScaling, updateAppearance, updateEffect, moveCameraKeyframe, childIdsOf } from './chunk-N47HF4VB.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) {
@@ -646,6 +675,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         x: cx - 60,
         y: cy - 30,
         width: 120,
@@ -665,6 +695,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         cx,
         cy,
         r: 36,
@@ -682,6 +713,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         x1: cx - 80,
         y1: cy,
         x2: cx + 80,
@@ -698,6 +730,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         x1: cx - 100,
         y1: cy,
         x2: cx + 100,
@@ -718,10 +751,12 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         x: cx,
         y: cy,
         content: id,
         translations: {},
+        references: {},
         fontSize: 18,
         fontWeight: 400,
         color: "#18181b",
@@ -734,6 +769,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         x: cx - 50,
         y: cy - 50,
         width: 100,
@@ -749,6 +785,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         x: cx - 40,
         y: cy - 40,
         d: "M 0 0 L 80 0 L 40 80 Z",
@@ -770,6 +807,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         points: pts,
         fill: "#a5b4fc",
         stroke: "#6366f1",
@@ -1045,8 +1083,6 @@ function renderSelectionOutline(canvasEl2, elId, snap2, byId) {
   rect.classList.add("element-selected-outline");
   return rect;
 }
-
-// src/legacy/canvas-preview.ts
 var previewRoot = null;
 var previewHandle = null;
 var unsubscribePreview = null;
@@ -1075,7 +1111,7 @@ function showPreview(canvasEl2, def, options) {
   previewRoot.style.cssText = `position:absolute;left:0;top:0;width:${def.canvas.width}px;height:${def.canvas.height}px;background:${bg};z-index:2;overflow:hidden;`;
   parent.style.position = "relative";
   parent.appendChild(previewRoot);
-  void mountPreview(previewRoot, def, options);
+  void mountPreview(previewRoot, compileDataBindings(def).document, options);
 }
 function hidePreview(canvasEl2) {
   if (canvasEl2) canvasEl2.style.visibility = "";
@@ -1147,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;
@@ -1284,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);
@@ -1297,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();
@@ -1561,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) {
@@ -1761,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);
@@ -1824,6 +1890,7 @@ function onMouseUp(e) {
           rotation: 0,
           appearances: [],
           tracks: [],
+          bindings: [],
           fromId: connectState.fromId,
           toId: elemId,
           fromAnchor: connectState.fromAnchor,
@@ -2168,6 +2235,8 @@ function render2() {
       canvasEl.appendChild(g);
     }
   }
+  const cameraFrame = renderCameraFrame(def);
+  if (cameraFrame) canvasEl.appendChild(cameraFrame);
   const selection = getSelection();
   if (selection.kind === "element") {
     const selEl = elementsById.get(selection.elementId);
@@ -2378,6 +2447,141 @@ 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 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);
@@ -2708,6 +2912,41 @@ function parseLocales(value) {
     return true;
   });
 }
+function annotationTokens(...values) {
+  const tokens = values.flatMap(
+    (value) => [...value.matchAll(/\{([a-z][a-z0-9_-]*)\}/g)].map((match) => match[1])
+  );
+  return [...new Set(tokens)];
+}
+function annotationReferenceFields(keyPrefix, values, references = {}) {
+  const tokens = annotationTokens(...values);
+  if (tokens.length === 0) {
+    return [
+      '<p class="studio-props-empty studio-annotation-hint">\uBB38\uAD6C\uC5D0 {token}\uC744 \uC785\uB825\uD558\uBA74 \uC7A5\uBA74 \uC694\uC18C\uC640 \uC5F0\uACB0\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.</p>'
+    ];
+  }
+  return [
+    '<p class="studio-props-empty studio-annotation-hint">\uB300\uC0C1 element id\uB97C \uC27C\uD45C\uB85C \uAD6C\uBD84\uD558\uC138\uC694. \uC5EC\uB7EC \uC694\uC18C\uB97C \uD568\uAED8 \uAC15\uC870\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.</p>',
+    ...tokens.map((token) => {
+      const target = references[token];
+      const value = typeof target === "string" ? target : target?.join(", ") ?? "";
+      return textField(
+        `{${token}} \uB300\uC0C1`,
+        `${keyPrefix}.reference.${token}`,
+        value
+      );
+    })
+  ];
+}
+function parseReferenceTargets(value) {
+  const targets = [
+    ...new Set(
+      value.split(",").map((id) => id.trim()).filter(Boolean)
+    )
+  ];
+  if (targets.length === 0) return void 0;
+  return targets.length === 1 ? targets[0] : targets;
+}
 function initProperties(root) {
   panelEl = root;
   subscribe(render3);
@@ -2719,8 +2958,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;
 }
@@ -2779,6 +3033,9 @@ function textField(label, key, value) {
     <input type="text" data-prop-key="${escapeHtml2(key)}" value="${escapeHtml2(value ?? "")}" />
   </label>`;
 }
+function textareaField(label, key, value) {
+  return `<label class="studio-field"><span>${escapeHtml2(label)}</span><textarea rows="7" spellcheck="false" data-prop-key="${escapeHtml2(key)}">${escapeHtml2(value)}</textarea></label>`;
+}
 function numberField(label, key, value, step = 1) {
   return `<label class="studio-field">
     <span>${escapeHtml2(label)}</span>
@@ -2833,7 +3090,18 @@ function renderInner() {
         "canvas.background",
         "canvas.background",
         def.canvas.background
-      )
+      ),
+      textareaField(
+        "\uC0D8\uD50C \uB370\uC774\uD130 (JSON)",
+        "meta.data",
+        JSON.stringify(def.data, null, 2)
+      ),
+      textareaField(
+        "Responsive variants (JSON)",
+        "meta.responsive",
+        JSON.stringify(def.responsive ?? [], null, 2)
+      ),
+      `<p class="studio-props-empty">JSON Pointer\uB85C \uC694\uC18C \uC18D\uC131\uC5D0 \uC5F0\uACB0\uD569\uB2C8\uB2E4. \uC774 \uB370\uC774\uD130\uB294 \uBBF8\uB9AC\uBCF4\uAE30\uC640 \uB0B4\uBCF4\uB0B4\uAE30\uC5D0 \uD568\uAED8 \uC800\uC7A5\uB429\uB2C8\uB2E4.</p>`
     ].join("");
     const settingsHeader = `<span class="studio-props-header-title">\uC124\uC815</span>`;
     const settingsBody = [
@@ -2861,10 +3129,61 @@ function renderInner() {
         ]
       )
     ].join("");
+    const checkpoints = def.checkpoints.map((checkpoint, index) => {
+      const specific = checkpoint.interaction === "choice" ? textField(
+        "\uC120\uD0DD\uC9C0 (value:label, \uC27C\uD45C \uAD6C\uBD84)",
+        `checkpoint.${index}.options`,
+        checkpoint.options.map(({ value, label }) => `${value}:${label}`).join(", ")
+      ) : checkpoint.interaction === "select-element" ? textField(
+        "\uC120\uD0DD \uAC00\uB2A5\uD55C element id",
+        `checkpoint.${index}.elementIds`,
+        checkpoint.elementIds.join(", ")
+      ) : checkpoint.interaction === "number-input" ? [
+        numberField(
+          "\uCD5C\uC19F\uAC12",
+          `checkpoint.${index}.min`,
+          checkpoint.min
+        ),
+        numberField(
+          "\uCD5C\uB313\uAC12",
+          `checkpoint.${index}.max`,
+          checkpoint.max
+        ),
+        numberField(
+          "\uAC04\uACA9",
+          `checkpoint.${index}.step`,
+          checkpoint.step
+        )
+      ].join("") : "";
+      const predicate = "predicate" in checkpoint && checkpoint.predicate?.type === "equals" ? textField(
+        "\uC815\uB2F5 (equals)",
+        `checkpoint.${index}.answer`,
+        String(checkpoint.predicate.value)
+      ) : "";
+      return `<div class="studio-checkpoint-card" data-checkpoint-id="${escapeHtml2(checkpoint.id)}">
+          <div class="studio-props-header"><span class="studio-props-header-title">${escapeHtml2(checkpoint.id)}</span><button type="button" class="studio-btn studio-btn-danger" data-delete-checkpoint="${escapeHtml2(checkpoint.id)}">\uC0AD\uC81C</button></div>
+          ${numberField("time (ms)", `checkpoint.${index}.time`, checkpoint.time, 50)}
+          ${textField("\uC9C8\uBB38", `checkpoint.${index}.prompt`, checkpoint.prompt)}
+          ${selectField(
+        "\uC0C1\uD638\uC791\uC6A9",
+        `checkpoint.${index}.interaction`,
+        checkpoint.interaction,
+        [
+          { value: "continue", label: "\uACC4\uC18D" },
+          { value: "choice", label: "\uC120\uD0DD\uC9C0" },
+          { value: "select-element", label: "\uC694\uC18C \uC120\uD0DD" },
+          { value: "number-input", label: "\uC22B\uC790 \uC785\uB825" }
+        ]
+      )}
+          ${checkboxField("\uC751\uB2F5 \uD544\uC218", `checkpoint.${index}.required`, checkpoint.required)}
+          ${specific}${predicate}
+        </div>`;
+    }).join("");
     panelEl.innerHTML = `
       ${timeHint}
       ${section("meta", metaHeader, metaBody)}
       ${section("settings", settingsHeader, settingsBody)}
+      ${section("checkpoints", `<span class="studio-props-header-title">Checkpoint (${def.checkpoints.length})</span>`, `${checkpoints}<button type="button" class="studio-btn" data-add-checkpoint>\uFF0B \uD604\uC7AC \uC2DC\uAC04\uC5D0 checkpoint \uCD94\uAC00</button>`)}
       <div class="studio-props-header" style="margin-top:0.6rem"><span class="studio-props-header-title">\uBAA9\uCC28 (${def.chapters.length})</span></div>
       <button type="button" class="studio-btn" data-add-chapter>\uFF0B \uD604\uC7AC \uC2DC\uAC04\uC5D0 chapter \uCD94\uAC00</button>
       <div class="studio-props-header" style="margin-top:0.6rem"><span class="studio-props-header-title">\uD6A8\uACFC (${def.effects.length})</span></div>
@@ -2876,12 +3195,18 @@ function renderInner() {
         </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;
   }
   if (sel.kind === "elements") {
     const alignBtn = (kind, label, title) => `<button type="button" class="studio-btn studio-align-btn" data-align="${kind}" title="${escapeHtml2(title)}" aria-label="${escapeHtml2(title)}">${label}</button>`;
     const distributeDisabled = sel.elementIds.length < 3 ? "disabled" : "";
+    const layoutIds = layoutIdsFor(sel.elementIds);
+    const collisions = findLayoutCollisions(def).filter(
+      ({ firstId, secondId }) => sel.elementIds.includes(firstId) || sel.elementIds.includes(secondId)
+    );
     panelEl.innerHTML = `
       ${timeHint}
       <div class="studio-props-header"><span class="studio-props-header-title">\uB2E4\uC911 \uC120\uD0DD</span><span class="studio-props-header-type">${sel.elementIds.length} elements</span></div>
@@ -2905,6 +3230,16 @@ function renderInner() {
           <button type="button" class="studio-btn studio-align-btn" data-distribute="vertical" title="\uC138\uB85C \uADE0\uB4F1 \uBD84\uD3EC" ${distributeDisabled}>\u2195</button>
         </div>
       </div>
+      <div class="studio-align-section studio-layout-section">
+        <div class="studio-align-title">Constraint Layout</div>
+        <div class="studio-align-row">
+          <button type="button" class="studio-btn" data-create-layout="row">\uAC00\uB85C</button>
+          <button type="button" class="studio-btn" data-create-layout="column">\uC138\uB85C</button>
+          <button type="button" class="studio-btn" data-create-layout="grid">\uACA9\uC790</button>
+        </div>
+        ${layoutIds.length > 0 ? `<p class="studio-layout-status">\uC801\uC6A9 \uC911: ${layoutIds.map(escapeHtml2).join(", ")}</p><button type="button" class="studio-btn" data-detach-layout>\uD604\uC7AC \uC88C\uD45C\uB85C \uACE0\uC815</button>` : '<p class="studio-layout-status">\uC120\uD0DD\uD55C \uC694\uC18C\uC5D0 \uC801\uC6A9\uB41C layout\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.</p>'}
+        ${collisions.length > 0 ? `<p class="studio-layout-collision" role="alert">\uACB9\uCE68: ${collisions.map(({ firstId, secondId }) => `${escapeHtml2(firstId)} \u2194 ${escapeHtml2(secondId)}`).join(", ")}</p>` : ""}
+      </div>
       <ul style="font-family:var(--font-mono);font-size:0.72rem;color:var(--color-fg-muted);padding-left:1rem;margin:0.6rem 0 0">
         ${sel.elementIds.map((id) => `<li>${escapeHtml2(id)}</li>`).join("")}
       </ul>
@@ -2920,18 +3255,24 @@ 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) {
       setSelection({ kind: "none" });
       return;
     }
+    const chapterReferences = ch.references;
     panelEl.innerHTML = `
       ${timeHint}
       <div class="studio-props-header"><span class="studio-props-header-title">${escapeHtml2(ch.id)}</span><span class="studio-props-header-type">chapter</span></div>
       ${numberField("time (ms)", "chapter.time", ch.time, 50)}
       ${textField("label", "chapter.label", ch.label)}
       ${textField("subtitle", "chapter.subtitle", ch.subtitle)}
+      ${annotationReferenceFields("chapter", [ch.label, ch.subtitle], chapterReferences).join("")}
       <button type="button" class="studio-btn studio-btn-danger" data-delete-chapter style="margin-top:0.6rem">\u{1F5D1} chapter \uC0AD\uC81C</button>
     `;
     return;
@@ -2962,6 +3303,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 focusTargetPicker(def, index, 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" : ""} />
+        <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>
+          ${focusTargetPicker(def, 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>`;
@@ -2988,6 +3437,7 @@ function renderElementForm(def, el) {
   const baseFields = renderBaseFields(def, el);
   const appearances = renderAppearances(def, el);
   const tracks = renderTracks(el);
+  const bindings = renderBindings(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>`;
@@ -2996,12 +3446,45 @@ function renderElementForm(def, el) {
     ${section("el-base", baseHeader, baseFields)}
     ${section("el-appearances", apHeader, appearances)}
     ${section("el-tracks", tracksHeader, tracks)}
+    ${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/>
       \uD2B8\uB799\uC774 \uC5C6\uB294 \uC18D\uC131\uC740 base \uAC12\uC774 \uD56D\uC0C1 \uC0AC\uC6A9\uB428
     </div>
   `;
 }
+function renderBindings(el) {
+  const properties = bindablePropertiesFor(el);
+  const rows = el.bindings.map(
+    (binding, index) => `<div class="studio-appearance-row">
+    <div class="studio-appearance-row-head"><span class="studio-appearance-row-title">#${index + 1}</span><button type="button" class="studio-btn studio-btn-small studio-btn-danger" data-delete-binding="${index}">\u2715</button></div>
+    ${selectField(
+      "\uC18D\uC131",
+      `binding.${index}.property`,
+      binding.property,
+      properties.map((value) => ({ value }))
+    )}
+    ${textField("JSON Pointer", `binding.${index}.pointer`, binding.pointer)}
+    ${selectField(
+      "\uD45C\uD604 \uBC29\uC2DD",
+      `binding.${index}.formatter`,
+      binding.formatter,
+      [
+        "identity",
+        "string",
+        "number",
+        "fixed",
+        "percent",
+        "uppercase",
+        "lowercase",
+        "color"
+      ].map((value) => ({ value }))
+    )}
+    ${textField("\uB300\uCCB4 \uAC12", `binding.${index}.fallback`, binding.fallback === void 0 ? "" : String(binding.fallback))}
+  </div>`
+  ).join("");
+  return `${rows || '<p class="studio-props-empty">\uC5F0\uACB0\uB41C \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.</p>'}<button type="button" class="studio-btn" data-add-binding ${properties.length === 0 ? "disabled" : ""}>\uFF0B \uB370\uC774\uD130 \uC5F0\uACB0</button>`;
+}
 function renderBaseFields(def, el) {
   const numberFields = [];
   const colorFields = [];
@@ -3133,6 +3616,11 @@ function renderBaseFields(def, el) {
           `el.translation.${locale}`,
           localized.translations?.[locale] ?? ""
         )
+      ),
+      ...annotationReferenceFields(
+        "el",
+        [el.content, ...Object.values(localized.translations ?? {})],
+        localized.references
       )
     ];
   })();
@@ -3204,11 +3692,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 key = target.dataset.propKey;
   if (!key) return;
   if (target.type === "text" && e.isComposing) return;
   if (target.type === "text" && isComposingFallback) return;
-  if (target.type === "color") {
+  if (target instanceof HTMLInputElement && target.type === "color") {
     const textInput = target.parentElement?.querySelector(
       `input[type="text"][data-prop-key="${CSS.escape(key)}"]`
     );
@@ -3216,10 +3709,22 @@ function onInput(e) {
     return;
   }
   let value = target.value;
-  if (target.type === "number") value = Number(target.value);
-  else if (target.type === "checkbox") value = target.checked;
+  if (target instanceof HTMLInputElement && target.type === "number")
+    value = Number(target.value);
+  else if (target instanceof HTMLInputElement && target.type === "checkbox")
+    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") {
@@ -3239,6 +3744,22 @@ function apply(key, value) {
   else if (key === "meta.locales") {
     const locales = parseLocales(String(value));
     if (locales.length > 0) updateLocales(locales);
+  } else if (key === "meta.data") {
+    try {
+      const parsed = JSON.parse(String(value));
+      if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed))
+        updateData(parsed);
+    } catch {
+    }
+  } else if (key === "meta.responsive") {
+    try {
+      const parsed = JSON.parse(String(value));
+      if (Array.isArray(parsed))
+        updateResponsive(
+          parsed
+        );
+    } catch {
+    }
   } else if (key === "meta.duration") updateDuration(Number(value));
   else if (key === "canvas.width") updateCanvas({ width: Number(value) });
   else if (key === "canvas.height") updateCanvas({ height: Number(value) });
@@ -3255,7 +3776,83 @@ function apply(key, value) {
     updateSettings({
       chapterListPosition: String(value)
     });
-  else if (key.startsWith("el.") && sel.kind === "element") {
+  else if (key.startsWith("checkpoint.")) {
+    const [, indexText, property] = key.split(".");
+    const checkpoint = def.checkpoints[Number(indexText)];
+    if (!checkpoint || !property) return;
+    if (property === "interaction") {
+      const base = {
+        id: checkpoint.id,
+        time: checkpoint.time,
+        prompt: checkpoint.prompt,
+        required: checkpoint.required
+      };
+      const interaction = String(value);
+      const replacement = interaction === "choice" ? {
+        ...base,
+        interaction,
+        options: [{ value: "option", label: "\uC120\uD0DD\uC9C0" }]
+      } : interaction === "select-element" ? {
+        ...base,
+        interaction,
+        elementIds: [def.elements[0]?.id ?? "element"]
+      } : interaction === "number-input" ? { ...base, interaction } : { ...base, interaction: "continue" };
+      updateCheckpoint(checkpoint.id, replacement);
+    } else if (property === "time")
+      updateCheckpoint(checkpoint.id, { time: Number(value) });
+    else if (property === "prompt")
+      updateCheckpoint(checkpoint.id, { prompt: String(value) });
+    else if (property === "required")
+      updateCheckpoint(checkpoint.id, { required: Boolean(value) });
+    else if (property === "options" && checkpoint.interaction === "choice") {
+      const options = String(value).split(",").map((entry) => entry.trim()).filter(Boolean).map((entry) => {
+        const [optionValue, ...label] = entry.split(":");
+        return {
+          value: optionValue || "option",
+          label: label.join(":") || optionValue || "\uC120\uD0DD\uC9C0"
+        };
+      });
+      if (options.length > 0) updateCheckpoint(checkpoint.id, { options });
+    } else if (property === "elementIds" && checkpoint.interaction === "select-element") {
+      const elementIds = String(value).split(",").map((id) => id.trim()).filter(Boolean);
+      if (elementIds.length > 0)
+        updateCheckpoint(checkpoint.id, { elementIds });
+    } else if (["min", "max", "step"].includes(property) && checkpoint.interaction === "number-input") {
+      updateCheckpoint(checkpoint.id, { [property]: Number(value) });
+    } else if (property === "answer" && checkpoint.interaction !== "continue") {
+      const answer = checkpoint.interaction === "number-input" ? Number(value) : String(value);
+      updateCheckpoint(checkpoint.id, {
+        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();
     const el = def.elements.find((e) => e.id === sel.elementId);
@@ -3276,6 +3873,16 @@ function apply(key, value) {
       updateElementBase(sel.elementId, { translations });
       return;
     }
+    if (prop.startsWith("reference.") && el.type === "text") {
+      const token = prop.slice("reference.".length);
+      const annotated = el;
+      const references = { ...annotated.references ?? {} };
+      const targets = parseReferenceTargets(String(value));
+      if (targets) references[token] = targets;
+      else delete references[token];
+      updateElementBase(sel.elementId, { references });
+      return;
+    }
     if (prop === "polygonSides" && el.type === "polygon") {
       const points = el.points.trim().split(/\s+/).map((point) => point.split(",").map(Number)).filter(([x, y]) => Number.isFinite(x) && Number.isFinite(y));
       if (points.length < 3) return;
@@ -3300,6 +3907,18 @@ function apply(key, value) {
     } else {
       updateElementBase(sel.elementId, { [prop]: value });
     }
+  } else if (key.startsWith("binding.") && sel.kind === "element") {
+    const [, indexText, property] = key.split(".");
+    const el = def.elements.find((item) => item.id === sel.elementId);
+    const binding = el?.bindings[Number(indexText)];
+    if (!el || !binding || !property) return;
+    const bindings = el.bindings.map(
+      (item, index) => index === Number(indexText) ? {
+        ...item,
+        [property]: property === "fallback" ? parseBindingFallback(String(value)) : String(value)
+      } : item
+    );
+    updateElementBase(el.id, { bindings });
   } else if (key.startsWith("ap.") && sel.kind === "element") {
     const [, idxStr, prop] = key.split(".");
     const idx = Number(idxStr);
@@ -3317,6 +3936,16 @@ function apply(key, value) {
     updateChapter(sel.chapterId, { label: String(value) });
   } else if (key === "chapter.subtitle" && sel.kind === "chapter") {
     updateChapter(sel.chapterId, { subtitle: String(value) });
+  } else if (key.startsWith("chapter.reference.") && sel.kind === "chapter") {
+    const chapter = def.chapters.find(({ id }) => id === sel.chapterId);
+    if (!chapter) return;
+    const token = key.slice("chapter.reference.".length);
+    const annotated = chapter;
+    const references = { ...annotated.references ?? {} };
+    const targets = parseReferenceTargets(String(value));
+    if (targets) references[token] = targets;
+    else delete references[token];
+    updateChapter(sel.chapterId, { references });
   } else if (key.startsWith("effect.") && sel.kind === "effect") {
     const prop = key.slice(7);
     const patch = {};
@@ -3328,11 +3957,44 @@ function apply(key, value) {
     updateEffect(sel.effectId, patch);
   }
 }
+function parseBindingFallback(value) {
+  if (value === "") return void 0;
+  if (value === "true") return true;
+  if (value === "false") return false;
+  const number = Number(value);
+  return Number.isFinite(number) && value.trim() !== "" ? number : value;
+}
 function onClick2(e) {
   const target = e.target;
   const def = getDef();
   if (!def) return;
   const sel = getSelection();
+  if (target.closest("[data-add-binding]") && sel.kind === "element") {
+    const el = def.elements.find((item) => item.id === sel.elementId);
+    if (!el) return;
+    const property = bindablePropertiesFor(el).find(
+      (candidate) => !el.bindings.some((binding) => binding.property === candidate)
+    );
+    if (property)
+      updateElementBase(el.id, {
+        bindings: [
+          ...el.bindings,
+          { property, pointer: "", formatter: "identity" }
+        ]
+      });
+    return;
+  }
+  const deleteBinding = target.closest("[data-delete-binding]");
+  if (deleteBinding && sel.kind === "element") {
+    const el = def.elements.find((item) => item.id === sel.elementId);
+    if (el)
+      updateElementBase(el.id, {
+        bindings: el.bindings.filter(
+          (_, index) => index !== Number(deleteBinding.dataset.deleteBinding)
+        )
+      });
+    return;
+  }
   const alignBtn = target.closest("[data-align]");
   if (alignBtn) {
     alignSelected(alignBtn.dataset.align);
@@ -3343,6 +4005,37 @@ function onClick2(e) {
     distributeSelected(distBtn.dataset.distribute);
     return;
   }
+  const createLayoutButton = target.closest(
+    "[data-create-layout]"
+  );
+  if (createLayoutButton && sel.kind === "elements") {
+    createLayout(
+      sel.elementIds,
+      createLayoutButton.dataset.createLayout
+    );
+    return;
+  }
+  if (target.closest("[data-detach-layout]") && sel.kind === "elements") {
+    detachFromLayout(sel.elementIds);
+    return;
+  }
+  if (target.closest("[data-add-checkpoint]")) {
+    addCheckpoint({
+      id: uniqueCheckpointId(),
+      time: getCurrentTime(),
+      prompt: "\uACC4\uC18D \uC9C4\uD589\uD560\uAE4C\uC694?",
+      required: true,
+      interaction: "continue"
+    });
+    return;
+  }
+  const deleteCheckpointButton = target.closest(
+    "[data-delete-checkpoint]"
+  );
+  if (deleteCheckpointButton?.dataset.deleteCheckpoint) {
+    deleteCheckpoint(deleteCheckpointButton.dataset.deleteCheckpoint);
+    return;
+  }
   if (target.closest("[data-ungroup]") && sel.kind === "element") {
     ungroupElement(sel.elementId);
     return;
@@ -3356,13 +4049,82 @@ 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({
       id,
       time: getCurrentTime(),
       label: `Chapter ${id.split("-")[1]}`,
-      subtitle: ""
+      subtitle: "",
+      references: {}
     });
     return;
   }
@@ -3497,7 +4259,8 @@ function initTimeline(tracksRoot, addChapterBtn, elementTracks) {
       id,
       time: newTime,
       label: `Chapter ${id.split("-")[1]}`,
-      subtitle: ""
+      subtitle: "",
+      references: {}
     });
     setSelection({ kind: "chapter", chapterId: id });
   });
@@ -3602,6 +4365,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">
@@ -3619,12 +4383,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}`;
 }
@@ -3680,6 +4480,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({
@@ -3769,6 +4595,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();
@@ -3829,6 +4685,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);
@@ -15348,6 +16227,7 @@ var IconLibraryDialog = class _IconLibraryDialog {
       rotation: 0,
       appearances: [],
       tracks: [],
+      bindings: [],
       x: cx - 32,
       y: cy - 32,
       width: 64,
@@ -15408,6 +16288,7 @@ async function uploadAndInsertImage(file, host) {
       rotation: 0,
       appearances: [],
       tracks: [],
+      bindings: [],
       x: Math.round(cx - w / 2),
       y: Math.round(cy - h / 2),
       width: w,
@@ -15829,8 +16710,11 @@ var KIND_ICON = {
   appearance: "\u25D0",
   chapter: "\u{1F4CD}",
   effect: "\u2728",
+  camera: "\u{1F3A5}",
   asset: "\u{1F5BC}",
   group: "\u2B1A",
+  layout: "\u25A6",
+  checkpoint: "\u25C6",
   other: "\xB7"
 };
 var dialogEl2 = null;
@@ -15951,7 +16835,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 {
@@ -15994,7 +16879,8 @@ function queryUi() {
     helpDialog,
     undoBtn,
     redoBtn,
-    gridToggleBtn
+    gridToggleBtn,
+    cameraFrameBtn
   };
 }
 
@@ -16102,6 +16988,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;
@@ -16766,7 +17660,8 @@ function initStudio(opts = {}) {
   const ui = queryUi();
   if (!ui) {
     console.error("[studio] missing required elements");
-    return;
+    return () => {
+    };
   }
   document.body.classList.add("editor-active");
   document.documentElement.classList.add("editor-active");
@@ -16776,6 +17671,7 @@ function initStudio(opts = {}) {
   initGrid();
   reflectGridUi(ui);
   subscribeGrid(() => reflectGridUi(ui));
+  reflectCameraFrameUi(ui);
   initCanvas(ui.canvas);
   initElementList(ui.elementList, ui.toolsRoot);
   initProperties(ui.propsRoot);
@@ -16856,6 +17752,18 @@ function initStudio(opts = {}) {
   ui.newBtn.addEventListener("click", () => openNewDialog(ui));
   initPalette();
   initHistoryPanel();
+  if (!getDef()) startDraft();
+  const pluginMount = mountEditorPlugins(
+    ui.app,
+    opts.plugins ?? [],
+    opts.resolvePluginPermissions ?? (() => ({})),
+    {
+      getDocument: getDef,
+      replaceDocument: setDef,
+      getSelection,
+      setSelection
+    }
+  );
   registerCommands([
     {
       id: "open",
@@ -16901,7 +17809,8 @@ function initStudio(opts = {}) {
       hint: "G",
       run: () => setGridEnabled(!isGridEnabled())
     },
-    { id: "help", label: "\u2328 \uB2E8\uCD95\uD0A4 \uBCF4\uAE30", hint: "? / Shift+/", run: openHelp }
+    { id: "help", label: "\u2328 \uB2E8\uCD95\uD0A4 \uBCF4\uAE30", hint: "? / Shift+/", run: openHelp },
+    ...pluginMount.commands
   ]);
   ui.saveBtn.addEventListener("click", () => void saveCurrent(ui));
   ui.exportBtn.addEventListener("click", () => {
@@ -16915,7 +17824,9 @@ function initStudio(opts = {}) {
     const file = ui.importFileInput.files?.[0];
     ui.importFileInput.value = "";
     if (!file) return;
-    void file.text().then((text) => animationDocumentSchema.parse(JSON.parse(text))).then((def) => importAnimation(def)).then((def) => {
+    void file.text().then((text) => JSON.parse(text)).then(
+      (input) => opts.importDocument ? opts.importDocument(input) : animationDocumentSchema.parse(input)
+    ).then((def) => importAnimation(def)).then((def) => {
       setDef(def);
       markClean();
       setStatus(ui, `${def.id}.json \uD30C\uC77C\uC744 \uAC00\uC838\uC654\uC2B5\uB2C8\uB2E4.`, "ok");
@@ -16934,6 +17845,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()) {
@@ -16978,12 +17893,12 @@ function initStudio(opts = {}) {
   });
   if (opts.initialId) {
     void loadAnimation2(ui, opts.initialId);
-  } else if (!getDef()) {
-    startDraft();
+  } else if (isDraft()) {
     setStatus(ui, "\uC784\uC2DC \uC791\uC5C5 (Draft), \uC800\uC7A5 \uC2DC ID/\uC81C\uBAA9 \uC785\uB825", "ok");
   } else {
     setStatus(ui, "\uC900\uBE44\uB428", "ok");
   }
+  return () => pluginMount.dispose();
 }
 function reflectState(ui) {
   ui.undoBtn.disabled = !canUndo();
@@ -17024,5 +17939,5 @@ function reflectState(ui) {
 }
 
 export { getVisibleElementIds, initStudio };
-//# sourceMappingURL=main-NCPWDB2U.js.map
-//# sourceMappingURL=main-NCPWDB2U.js.map
+//# sourceMappingURL=main-DC6D6RNQ.js.map
+//# sourceMappingURL=main-DC6D6RNQ.js.map