@kokoa/clotho-editor 0.1.4 → 0.2.0

package/dist/{main-NCPWDB2U.js → main-SKM3P4X7.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, 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';
 
 // src/legacy/grid.ts
 var STORAGE_KEY = "studio.grid";
@@ -646,6 +646,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         x: cx - 60,
         y: cy - 30,
         width: 120,
@@ -665,6 +666,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         cx,
         cy,
         r: 36,
@@ -682,6 +684,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         x1: cx - 80,
         y1: cy,
         x2: cx + 80,
@@ -698,6 +701,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         x1: cx - 100,
         y1: cy,
         x2: cx + 100,
@@ -718,10 +722,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 +740,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         x: cx - 50,
         y: cy - 50,
         width: 100,
@@ -749,6 +756,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 +778,7 @@ function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
         rotation: 0,
         appearances: [],
         tracks: [],
+        bindings: [],
         points: pts,
         fill: "#a5b4fc",
         stroke: "#6366f1",
@@ -1045,8 +1054,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 +1082,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 = "";
@@ -1824,6 +1831,7 @@ function onMouseUp(e) {
           rotation: 0,
           appearances: [],
           tracks: [],
+          bindings: [],
           fromId: connectState.fromId,
           toId: elemId,
           fromAnchor: connectState.fromAnchor,
@@ -2708,6 +2716,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);
@@ -2779,6 +2822,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 +2879,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 +2918,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>
@@ -2882,6 +2990,10 @@ function renderInner() {
   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 +3017,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>
@@ -2926,12 +3048,14 @@ function renderInner() {
       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;
@@ -2988,6 +3112,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 +3121,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 +3291,11 @@ function renderBaseFields(def, el) {
           `el.translation.${locale}`,
           localized.translations?.[locale] ?? ""
         )
+      ),
+      ...annotationReferenceFields(
+        "el",
+        [el.content, ...Object.values(localized.translations ?? {})],
+        localized.references
       )
     ];
   })();
@@ -3208,7 +3371,7 @@ function onInput(e) {
   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,8 +3379,10 @@ 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 onChange(e) {
@@ -3239,6 +3404,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 +3436,56 @@ 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.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 +3506,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 +3540,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 +3569,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 +3590,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 +3638,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;
@@ -3362,7 +3688,8 @@ function onClick2(e) {
       id,
       time: getCurrentTime(),
       label: `Chapter ${id.split("-")[1]}`,
-      subtitle: ""
+      subtitle: "",
+      references: {}
     });
     return;
   }
@@ -3497,7 +3824,8 @@ function initTimeline(tracksRoot, addChapterBtn, elementTracks) {
       id,
       time: newTime,
       label: `Chapter ${id.split("-")[1]}`,
-      subtitle: ""
+      subtitle: "",
+      references: {}
     });
     setSelection({ kind: "chapter", chapterId: id });
   });
@@ -15348,6 +15676,7 @@ var IconLibraryDialog = class _IconLibraryDialog {
       rotation: 0,
       appearances: [],
       tracks: [],
+      bindings: [],
       x: cx - 32,
       y: cy - 32,
       width: 64,
@@ -15408,6 +15737,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,
@@ -15831,6 +16161,8 @@ var KIND_ICON = {
   effect: "\u2728",
   asset: "\u{1F5BC}",
   group: "\u2B1A",
+  layout: "\u25A6",
+  checkpoint: "\u25C6",
   other: "\xB7"
 };
 var dialogEl2 = null;
@@ -16766,7 +17098,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");
@@ -16856,6 +17189,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 +17246,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 +17261,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");
@@ -16978,12 +17326,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 +17372,5 @@ function reflectState(ui) {
 }
 
 export { getVisibleElementIds, initStudio };
-//# sourceMappingURL=main-NCPWDB2U.js.map
-//# sourceMappingURL=main-NCPWDB2U.js.map
+//# sourceMappingURL=main-SKM3P4X7.js.map
+//# sourceMappingURL=main-SKM3P4X7.js.map