@kokoa/clotho-editor 0.1.0 → 0.1.3

package/dist/{main-SWHHYTLM.js → main-5YXLTYPQ.js}

@@ -1,4 +1,4 @@
-import { updateCanvas, getDef, subscribe, updateMeta, undo, redo, isDirty, canUndo, canRedo, isDraft, uniqueChapterId, getCurrentTime, addChapter, setSelection, uniqueElementId, registerExternalAsset, addElement, registerDataUriAsset, listAnimations, saveAnimation, setDef, markClean, deleteAnimation, duplicateAnimation, createAnimation, getSelection, getSelectedElementIds, deleteElement, deleteChapter, deleteEffect, updateChapter, isGroup, ungroupElement, groupElements, moveElementToEnd, moveElementToFront, reorderElement, loadAnimation, setDraft, getCurrentSnapshot, setElementValueAtTime, findContainingGroup, toggleSelectionFor, isElementSelected, updateElementBase, uniqueEffectId, addEffect, removeAppearance, removeTrack, removeTrackKeyframe, setTrackKeyframe, setCurrentTime, addAppearance, updateAppearance, jumpBack, jumpForward, getHistory, promoteDraftToSaved, moveGroupBy, groupBbox, placeholderImageUrl, updateDuration, updateSettings, updateEffect, childIdsOf } from './chunk-UE32Q6U5.js';
+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, updateDuration, updateAppearance, updateEffect, childIdsOf } from './chunk-Z2K5HFHI.js';
 import { activeAppearance, animationDocumentSchema, resolveAsset } from '@kokoa/clotho';
 
 // src/legacy/grid.ts
@@ -86,7 +86,11 @@ function anchorPointsOf(baseEl, state) {
       { x: x + w / 2, y, anchor: "top" },
       { x: x + w, y: y + h / 2, anchor: "right" },
       { x: x + w / 2, y: y + h, anchor: "bottom" },
-      { x, y: y + h / 2, anchor: "left" }
+      { x, y: y + h / 2, anchor: "left" },
+      { x, y, anchor: "top-left" },
+      { x: x + w, y, anchor: "top-right" },
+      { x, y: y + h, anchor: "bottom-left" },
+      { x: x + w, y: y + h, anchor: "bottom-right" }
     ];
   }
   if (baseEl.type === "circle") {
@@ -119,6 +123,14 @@ function anchorPointOf(el, state, anchor) {
         return { x: cx, y: y + h };
       case "left":
         return { x, y: cy };
+      case "top-left":
+        return { x, y };
+      case "top-right":
+        return { x: x + w, y };
+      case "bottom-left":
+        return { x, y: y + h };
+      case "bottom-right":
+        return { x: x + w, y: y + h };
       case "center":
       case "auto":
       default:
@@ -419,422 +431,817 @@ function parsePolygonPoints(points) {
   return result;
 }
 
-// src/legacy/canvas-handles.ts
-function renderResizeHandles(canvasEl2, elId, snap2, byId) {
-  const baseEl = byId.get(elId);
-  const state = snap2.get(elId);
-  if (!baseEl || !state) return null;
-  let box;
-  let handles = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
-  if (baseEl.type === "rect" || baseEl.type === "image") {
-    box = {
-      x: state.x,
-      y: state.y,
-      w: state.width,
-      h: state.height
-    };
-  } else if (baseEl.type === "circle") {
-    const r = state.r;
-    box = {
-      x: state.cx - r,
-      y: state.cy - r,
-      w: r * 2,
-      h: r * 2
-    };
-    handles = ["n", "e", "s", "w"];
-  } else if (baseEl.type === "text") {
-    const bbox = textBBoxOnCanvas(canvasEl2, elId);
-    if (!bbox) return null;
-    box = bbox;
-    handles = ["se"];
-  } else {
-    return null;
-  }
-  const positions = {
-    nw: { x: box.x, y: box.y, cursor: "nwse-resize" },
-    n: { x: box.x + box.w / 2, y: box.y, cursor: "ns-resize" },
-    ne: { x: box.x + box.w, y: box.y, cursor: "nesw-resize" },
-    e: { x: box.x + box.w, y: box.y + box.h / 2, cursor: "ew-resize" },
-    se: { x: box.x + box.w, y: box.y + box.h, cursor: "nwse-resize" },
-    s: { x: box.x + box.w / 2, y: box.y + box.h, cursor: "ns-resize" },
-    sw: { x: box.x, y: box.y + box.h, cursor: "nesw-resize" },
-    w: { x: box.x, y: box.y + box.h / 2, cursor: "ew-resize" }
-  };
-  const g = document.createElementNS(SVG_NS, "g");
-  const rotation = state.rotation || 0;
-  if (rotation && (baseEl.type === "rect" || baseEl.type === "image" || baseEl.type === "circle")) {
-    const cx = box.x + box.w / 2;
-    const cy = box.y + box.h / 2;
-    g.setAttribute("transform", `rotate(${rotation} ${cx} ${cy})`);
-  }
-  let html = "";
-  for (const h of handles) {
-    const p = positions[h];
-    html += `<rect x="${p.x - 5}" y="${p.y - 5}" width="10" height="10"
-      fill="white" stroke="var(--color-accent)" stroke-width="2" rx="2"
-      data-resize-handle="${h}" data-elem-id="${escapeXml(elId)}" style="cursor: ${p.cursor}" />`;
-  }
-  g.innerHTML = html;
-  return g;
+// src/legacy/tool-state.ts
+var activeTool = "select";
+var listeners2 = /* @__PURE__ */ new Set();
+function getActiveTool() {
+  return activeTool;
 }
-function renderRotationHandle(canvasEl2, elId, snap2, byId) {
-  const baseEl = byId.get(elId);
-  const state = snap2.get(elId);
-  if (!baseEl || !state) return null;
-  const center = centerOfElement(baseEl, state);
-  if (!center) return null;
-  let topY = null;
-  if (baseEl.type === "rect" || baseEl.type === "image") {
-    topY = state.y - 24;
-  } else if (baseEl.type === "circle") {
-    topY = state.cy - state.r - 24;
-  } else if (baseEl.type === "text") {
-    const bbox = textBBoxOnCanvas(canvasEl2, elId);
-    if (bbox) topY = bbox.y - 24;
-  } else if (baseEl.type === "polygon") {
-    const bbox = polygonBoundingBox(String(state.points ?? ""));
-    if (bbox) topY = bbox.y - 24;
-  } else if (baseEl.type === "path") {
-    const bbox = pathBBoxOnCanvas(canvasEl2, elId);
-    if (bbox) topY = bbox.y - 24;
-  }
-  if (topY === null) return null;
-  const g = document.createElementNS(SVG_NS, "g");
-  const rotation = state.rotation || 0;
-  if (rotation)
-    g.setAttribute("transform", `rotate(${rotation} ${center.x} ${center.y})`);
-  g.innerHTML = `
-    <line x1="${center.x}" y1="${center.y}" x2="${center.x}" y2="${topY + 8}" stroke="var(--color-accent)" stroke-width="1.5" stroke-dasharray="3 2" pointer-events="none" />
-    <circle cx="${center.x}" cy="${topY}" r="8" fill="var(--color-accent)" stroke="white" stroke-width="2" data-rotate-handle="${escapeXml(elId)}" style="cursor: grab" />
-    <text x="${center.x + 14}" y="${topY + 4}" font-size="10" fill="var(--color-accent)" font-family="ui-monospace, monospace" pointer-events="none">${Math.round(rotation)}\xB0</text>
-  `;
-  return g;
+function setActiveTool(tool) {
+  activeTool = tool;
+  for (const listener of listeners2) listener(tool);
 }
-function renderAnchorDots(elId, snap2, byId) {
-  const baseEl = byId.get(elId);
-  const state = snap2.get(elId);
-  if (!baseEl || !state) return null;
-  if (baseEl.type !== "rect" && baseEl.type !== "circle" && baseEl.type !== "image")
-    return null;
-  const points = anchorPointsOf(baseEl, state);
-  const g = document.createElementNS(SVG_NS, "g");
-  for (const p of points) {
-    g.innerHTML += `<circle cx="${p.x}" cy="${p.y}" r="6" fill="white" stroke="#6366f1" stroke-width="2"
-      data-anchor-handle data-elem-id="${escapeXml(elId)}" data-anchor="${p.anchor}" style="cursor: crosshair" />`;
-  }
-  return g;
+function subscribeActiveTool(listener) {
+  listeners2.add(listener);
+  listener(activeTool);
+  return () => listeners2.delete(listener);
 }
-function renderLineEndpointHandles(elId, snap2, byId) {
-  const baseEl = byId.get(elId);
-  const state = snap2.get(elId);
-  if (!baseEl || !state) return null;
-  if (baseEl.type !== "line" && baseEl.type !== "arrow") return null;
-  const coords = baseEl.type === "line" ? resolveLineCoords(state, snap2, byId) : resolveArrowCoords(state, snap2, byId);
-  if (!coords) return null;
-  const midX = (coords.x1 + coords.x2) / 2;
-  const midY = (coords.y1 + coords.y2) / 2;
-  const g = document.createElementNS(SVG_NS, "g");
-  g.innerHTML = `
-    <rect x="${coords.x1 - 6}" y="${coords.y1 - 6}" width="12" height="12" rx="2"
-      fill="white" stroke="var(--color-accent)" stroke-width="2"
-      data-endpoint-handle="start" data-elem-id="${escapeXml(elId)}" style="cursor: grab" />
-    <rect x="${coords.x2 - 6}" y="${coords.y2 - 6}" width="12" height="12" rx="2"
-      fill="white" stroke="var(--color-accent)" stroke-width="2"
-      data-endpoint-handle="end" data-elem-id="${escapeXml(elId)}" style="cursor: grab" />
-    <circle cx="${midX}" cy="${midY}" r="6"
-      fill="var(--color-accent)" stroke="white" stroke-width="2"
-      data-line-mid-handle data-elem-id="${escapeXml(elId)}" style="cursor: move" />
-  `;
-  return g;
+
+// src/legacy/ui-interactions.ts
+function hasSelectionModifier(modifiers) {
+  return modifiers.shiftKey || modifiers.ctrlKey || modifiers.metaKey;
 }
-function renderPolygonVertexHandles(elId, snap2, byId) {
-  const baseEl = byId.get(elId);
-  const state = snap2.get(elId);
-  if (!baseEl || !state) return null;
-  if (baseEl.type !== "polygon") return null;
-  const points = String(state.points ?? "").trim().split(/\s+/);
-  const parsed = [];
-  for (let i = 0; i < points.length; i += 1) {
-    const [x, y] = points[i].split(",").map(Number);
-    if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
-    parsed.push({ x, y, i });
-  }
-  const g = document.createElementNS(SVG_NS, "g");
-  let html = "";
-  if (parsed.length >= 2) {
-    for (let i = 0; i < parsed.length; i += 1) {
-      const a = parsed[i];
-      const b = parsed[(i + 1) % parsed.length];
-      const mx = (a.x + b.x) / 2;
-      const my = (a.y + b.y) / 2;
-      html += `<g data-vertex-add data-elem-id="${escapeXml(elId)}" data-after-index="${a.i}" style="cursor: copy">
-        <circle cx="${mx}" cy="${my}" r="6" fill="rgba(99, 102, 241, 0.15)" stroke="var(--color-accent)" stroke-width="1.5" stroke-dasharray="2 2" />
-        <text x="${mx}" y="${my + 3}" text-anchor="middle" font-size="10" fill="var(--color-accent)" font-weight="700" pointer-events="none">+</text>
-      </g>`;
+function shouldDeferElementPointerDown(modifiers, options) {
+  return hasSelectionModifier(modifiers) && options.isElement && !options.isHandle;
+}
+function nextPointerSelection(current, elementId, modifiers) {
+  return hasSelectionModifier(modifiers) ? toggleSelectionFor(current, elementId) : { kind: "element", elementId };
+}
+var TOOL_SHORTCUTS = {
+  v: "select",
+  r: "rect",
+  o: "circle",
+  l: "line",
+  a: "arrow",
+  t: "text",
+  i: "image",
+  b: "path",
+  y: "polygon"
+};
+function toolForShortcut(key, options) {
+  if (options.isEditing || options.modifierKey || options.altKey) return null;
+  return TOOL_SHORTCUTS[key.toLowerCase()] ?? null;
+}
+
+// src/legacy/element-list.ts
+var listEl = null;
+var toolsRootEl = null;
+var searchEl = null;
+var dragSourceId = null;
+function initElementList(root, toolsRoot) {
+  listEl = root;
+  toolsRootEl = toolsRoot;
+  searchEl = document.getElementById(
+    "studio-element-search"
+  );
+  subscribe(render);
+  root.addEventListener("click", onClick);
+  root.addEventListener("dragstart", onDragStart);
+  root.addEventListener("dragover", onDragOver);
+  root.addEventListener("dragleave", onDragLeave);
+  root.addEventListener("drop", onDrop);
+  root.addEventListener("dragend", onDragEnd);
+  toolsRootEl?.addEventListener("click", onToolsClick);
+  subscribeActiveTool((tool) => {
+    toolsRootEl?.setAttribute("data-active-tool", tool);
+    document.body.dataset.studioTool = tool;
+    toolsRootEl?.querySelectorAll("[data-studio-tool], [data-add-element]").forEach((button) => {
+      const value = button.dataset.studioTool ?? button.dataset.addElement;
+      const active = value === tool;
+      button.classList.toggle("is-active", active);
+      button.setAttribute("aria-pressed", String(active));
+    });
+  });
+  searchEl?.addEventListener("input", render);
+  searchEl?.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && searchEl) {
+      searchEl.value = "";
+      render();
     }
+  });
+  render();
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function friendlyElementLabel(el) {
+  const e = el;
+  const visible = e.name?.trim() || e.label?.trim() || e.content?.trim();
+  return visible ? visible : el.id;
+}
+function matchesSearch(el, query) {
+  if (!query) return true;
+  const e = el;
+  const haystack = [el.id, el.type, e.name, e.label, e.content].filter(Boolean).join(" ").toLowerCase();
+  return haystack.includes(query);
+}
+function render() {
+  if (!listEl) return;
+  const def = getDef();
+  if (!def || def.elements.length === 0) {
+    listEl.innerHTML = '<li style="color: var(--color-fg-muted); padding: 0.4rem;">\uC694\uC18C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.</li>';
+    return;
   }
-  for (const p of parsed) {
-    const removable = parsed.length > 3;
-    html += `<circle cx="${p.x}" cy="${p.y}" r="6" fill="white" stroke="var(--color-accent)" stroke-width="2"
-      data-vertex-handle data-elem-id="${escapeXml(elId)}" data-vertex-index="${p.i}"
-      style="cursor: grab" >
-      <title>${removable ? "\uB4DC\uB798\uADF8=\uC774\uB3D9, \uC6B0\uD074\uB9AD=\uC0AD\uC81C" : "\uB4DC\uB798\uADF8=\uC774\uB3D9"}</title>
-    </circle>`;
+  const sel = getSelection();
+  const query = searchEl?.value.trim().toLowerCase() ?? "";
+  const allReversed = [...def.elements].reverse();
+  const items = query ? allReversed.filter((el) => matchesSearch(el, query)) : allReversed;
+  const multiHint = sel.kind === "elements" ? `<div class="studio-element-list-hint">\uB2E4\uC911 \uC120\uD0DD: ${sel.elementIds.length}\uAC1C (Shift+\uD074\uB9AD\uC73C\uB85C \uCD94\uAC00/\uD574\uC81C)</div>` : "";
+  const filterHint = query ? `<div class="studio-element-list-hint">\uAC80\uC0C9 "${escapeHtml(query)}" \xB7 ${items.length}/${def.elements.length} \uC77C\uCE58 \xB7 Esc = \uC9C0\uC6B0\uAE30</div>` : `<div class="studio-element-list-hint">\uC704 = \uC55E\uCABD (z-index \u2191) \xB7 Shift+\uD074\uB9AD = \uB2E4\uC911 \uC120\uD0DD</div>`;
+  const emptyMsg = query && items.length === 0 ? `<li style="color: var(--color-fg-muted); padding: 0.4rem; font-size:0.78rem;">"${escapeHtml(query)}" \uC77C\uCE58 \uC5C6\uC74C</li>` : "";
+  const byParent = /* @__PURE__ */ new Map();
+  for (const element of items) {
+    if (!element.parentId) continue;
+    const children = byParent.get(element.parentId) ?? [];
+    children.push(element);
+    byParent.set(element.parentId, children);
   }
-  g.innerHTML = html;
-  return g;
+  const renderItem = (el, depth = 0) => {
+    const isSel = isElementSelected(sel, el.id);
+    const label = friendlyElementLabel(el);
+    const subId = label !== el.id ? `<span class="studio-element-list-item-sub">${escapeHtml(el.id)}</span>` : "";
+    const group = el.type === "group";
+    const children = query ? [] : byParent.get(el.id) ?? [];
+    return `<li class="studio-element-list-item ${isSel ? "is-selected" : ""} ${group ? "is-group" : ""}" data-elem-id="${escapeHtml(el.id)}" draggable="true" style="--studio-tree-depth:${depth}">
+      <span class="studio-element-grip" aria-hidden="true">${group ? "\u25BE" : "\u22EE\u22EE"}</span>
+      <span class="studio-element-list-item-label">${group ? "\uADF8\uB8F9 \xB7 " : ""}${escapeHtml(label)} <span class="studio-element-list-item-type">${escapeHtml(el.type)}</span>${subId}</span>
+      <button type="button" class="studio-element-list-delete" data-delete title="\uC0AD\uC81C">\u2715</button>
+    </li>${children.map((child) => renderItem(child, depth + 1)).join("")}`;
+  };
+  const visibleItems = query ? items : items.filter((element) => !element.parentId);
+  listEl.innerHTML = filterHint + multiHint + emptyMsg + visibleItems.map((element) => renderItem(element)).join("");
 }
-function renderSnapTargets(draggingElementId, snap2, byId, activeSnapTarget) {
-  const g = document.createElementNS(SVG_NS, "g");
-  let html = "";
-  for (const baseEl of byId.values()) {
-    if (baseEl.id === draggingElementId) continue;
-    if (baseEl.type === "line" || baseEl.type === "arrow") continue;
-    const state = snap2.get(baseEl.id);
-    if (!state || !state.visible) continue;
-    const points = getAnchorPoints(baseEl, state);
-    for (const p of points) {
-      const isActive = activeSnapTarget?.elementId === baseEl.id && activeSnapTarget?.anchor === p.anchor;
-      if (isActive) {
-        html += `<circle cx="${p.x}" cy="${p.y}" r="6" fill="var(--color-accent)" stroke="white" stroke-width="2" opacity="0.85" pointer-events="none" />`;
-        html += `<circle cx="${p.x}" cy="${p.y}" r="12" fill="none" stroke="var(--color-accent)" stroke-width="1.5" opacity="0.4" pointer-events="none" />`;
-      } else {
-        html += `<circle cx="${p.x}" cy="${p.y}" r="3" fill="white" stroke="var(--color-accent)" stroke-width="1.5" opacity="0.5" pointer-events="none" />`;
-      }
-    }
+function onClick(e) {
+  const target = e.target;
+  const li = target.closest(".studio-element-list-item");
+  if (!li) return;
+  const id = li.dataset.elemId ?? "";
+  if (target.closest("[data-delete]")) {
+    deleteElement(id);
+    return;
   }
-  g.innerHTML = html;
-  return g;
+  setActiveTool("select");
+  const me = e;
+  setSelection(nextPointerSelection(getSelection(), id, me));
 }
-function renderSelectionOutline(canvasEl2, elId, snap2, byId) {
-  const baseEl = byId.get(elId);
-  const state = snap2.get(elId);
-  if (!baseEl || !state) return null;
-  let box = null;
-  if (baseEl.type === "rect" || baseEl.type === "image") {
-    box = {
-      x: state.x - 4,
-      y: state.y - 4,
-      w: state.width + 8,
-      h: state.height + 8
-    };
-  } else if (baseEl.type === "circle") {
-    const r = state.r;
-    box = {
-      x: state.cx - r - 4,
-      y: state.cy - r - 4,
-      w: r * 2 + 8,
-      h: r * 2 + 8
-    };
-  } else if (baseEl.type === "text") {
-    const bbox = textBBoxOnCanvas(canvasEl2, elId);
-    if (bbox)
-      box = { x: bbox.x - 4, y: bbox.y - 4, w: bbox.w + 8, h: bbox.h + 8 };
-  } else if (baseEl.type === "line" || baseEl.type === "arrow") {
-    const coords = baseEl.type === "line" ? resolveLineCoords(state, snap2, byId) : resolveArrowCoords(state, snap2, byId);
-    if (!coords) return null;
-    box = {
-      x: Math.min(coords.x1, coords.x2) - 4,
-      y: Math.min(coords.y1, coords.y2) - 4,
-      w: Math.abs(coords.x2 - coords.x1) + 8,
-      h: Math.abs(coords.y2 - coords.y1) + 8
-    };
-  } else if (baseEl.type === "polygon") {
-    const bbox = polygonBoundingBox(String(state.points ?? ""));
-    if (bbox)
-      box = { x: bbox.x - 4, y: bbox.y - 4, w: bbox.w + 8, h: bbox.h + 8 };
-  } else if (baseEl.type === "path") {
-    const bbox = pathBBoxOnCanvas(canvasEl2, elId);
-    if (bbox)
-      box = { x: bbox.x - 4, y: bbox.y - 4, w: bbox.w + 8, h: bbox.h + 8 };
-  }
-  if (!box) return null;
-  const rect = document.createElementNS(SVG_NS, "rect");
-  rect.setAttribute("x", String(box.x));
-  rect.setAttribute("y", String(box.y));
-  rect.setAttribute("width", String(box.w));
-  rect.setAttribute("height", String(box.h));
-  rect.classList.add("element-selected-outline");
-  return rect;
-}
-
-// src/legacy/canvas-preview.ts
-var previewRoot = null;
-var previewHandle = null;
-async function mountPreview(host, doc) {
-  const { mountStage } = await import('@kokoa/clotho/dom');
-  previewHandle = mountStage(host, doc, { player: { autoplay: true } });
-}
-function showPreview(canvasEl2, def) {
-  if (!canvasEl2) return;
-  const parent = canvasEl2.parentElement;
-  if (!parent) return;
-  hidePreview(canvasEl2);
-  canvasEl2.style.visibility = "hidden";
-  previewRoot = document.createElement("div");
-  const bg = def.canvas.background && def.canvas.background !== "transparent" ? def.canvas.background : "transparent";
-  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);
-}
-function hidePreview(canvasEl2) {
-  if (canvasEl2) canvasEl2.style.visibility = "";
-  previewHandle?.destroy();
-  previewHandle = null;
-  if (previewRoot) {
-    previewRoot.remove();
-    previewRoot = null;
+function onDragStart(e) {
+  const li = e.target.closest(
+    ".studio-element-list-item"
+  );
+  if (!li) return;
+  dragSourceId = li.dataset.elemId ?? null;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", dragSourceId ?? "");
   }
+  li.classList.add("is-dragging");
 }
-
-// src/legacy/canvas.ts
-var SNAP_RADIUS = 12;
-var HEAD_MARKER_DEFS = `
-  <marker id="studio-h-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
-    <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />
-  </marker>
-  <marker id="studio-h-arrow-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-    <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />
-  </marker>
-  <marker id="studio-h-triangle" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
-    <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />
-  </marker>
-  <marker id="studio-h-triangle-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-    <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />
-  </marker>
-  <marker id="studio-h-triangle-open" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto">
-    <path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="currentColor" stroke-width="1.5" />
-  </marker>
-  <marker id="studio-h-triangle-open-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="9" markerHeight="9" orient="auto-start-reverse">
-    <path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="currentColor" stroke-width="1.5" />
-  </marker>
-  <marker id="studio-h-circle" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6">
-    <circle cx="5" cy="5" r="4" fill="currentColor" />
-  </marker>
-  <marker id="studio-h-circle-open" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="7" markerHeight="7">
-    <circle cx="5" cy="5" r="4" fill="white" stroke="currentColor" stroke-width="1.5" />
-  </marker>
-  <marker id="studio-h-diamond" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
-    <path d="M 0 5 L 5 0 L 10 5 L 5 10 z" fill="currentColor" />
-  </marker>
-  <marker id="studio-h-diamond-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
-    <path d="M 0 5 L 5 0 L 10 5 L 5 10 z" fill="currentColor" />
-  </marker>
-  <marker id="studio-h-diamond-open" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
-    <path d="M 0 5 L 5 0 L 10 5 L 5 10 z" fill="white" stroke="currentColor" stroke-width="1.5" />
-  </marker>
-  <marker id="studio-h-diamond-open-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
-    <path d="M 0 5 L 5 0 L 10 5 L 5 10 z" fill="white" stroke="currentColor" stroke-width="1.5" />
-  </marker>
-  <marker id="studio-h-bar" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="10" orient="auto">
-    <rect x="4" y="0" width="2" height="10" fill="currentColor" />
-  </marker>
-`;
-function markerUrlFor(head, end) {
-  if (!head || head === "none") return "";
-  const isOpenCircle = head === "circle-open";
-  const isCircle = head === "circle" || isOpenCircle;
-  if (isCircle) return `url(#studio-h-${head})`;
-  const idBase = `studio-h-${head}`;
-  return end === "start" ? `url(#${idBase}-start)` : `url(#${idBase})`;
-}
-var dragState = null;
-var rotateState = null;
-var connectState = null;
-var endpointDragState = null;
-var vertexDragState = null;
-var resizeState = null;
-var marqueeState = null;
-var marqueeJustFinished = false;
-var canvasEl = null;
-var hoveredElementId = null;
-var canvasZoom = 1;
-function initCanvas(root) {
-  canvasEl = root;
-  root.addEventListener("click", onCanvasClick);
-  root.addEventListener("mousedown", onMouseDown);
-  root.addEventListener("mouseover", onMouseOver);
-  root.addEventListener("mouseleave", onMouseLeave);
-  root.addEventListener("contextmenu", onContextMenu);
-  root.addEventListener("wheel", onCanvasWheel, { passive: false });
-  document.addEventListener("mousemove", onMouseMove);
-  document.addEventListener("mouseup", onMouseUp);
-  subscribe(render);
-  render();
-}
-function onCanvasWheel(e) {
-  if (!e.ctrlKey && !e.metaKey) return;
+function onDragOver(e) {
+  if (!dragSourceId) return;
   e.preventDefault();
-  const wrap = canvasEl?.closest(".studio-canvas-wrap");
-  if (!wrap) {
-    canvasZoom = Math.max(
-      0.1,
-      Math.min(5, canvasZoom * (e.deltaY < 0 ? 1.1 : 1 / 1.1))
-    );
-    render();
-    return;
-  }
-  const wrapRect = wrap.getBoundingClientRect();
-  const mxInWrap = e.clientX - wrapRect.left + wrap.scrollLeft;
-  const myInWrap = e.clientY - wrapRect.top + wrap.scrollTop;
-  const old = canvasZoom;
-  canvasZoom = Math.max(
-    0.1,
-    Math.min(5, canvasZoom * (e.deltaY < 0 ? 1.1 : 1 / 1.1))
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+  const li = e.target.closest(
+    ".studio-element-list-item"
   );
-  const ratio = canvasZoom / old;
-  render();
-  wrap.scrollLeft = mxInWrap * ratio - (e.clientX - wrapRect.left);
-  wrap.scrollTop = myInWrap * ratio - (e.clientY - wrapRect.top);
+  listEl?.querySelectorAll(".is-drop-above, .is-drop-below").forEach((n) => n.classList.remove("is-drop-above", "is-drop-below"));
+  if (!li) return;
+  const rect = li.getBoundingClientRect();
+  const upper = e.clientY < rect.top + rect.height / 2;
+  li.classList.add(upper ? "is-drop-above" : "is-drop-below");
 }
-function onContextMenu(e) {
-  const target = e.target;
-  const vertexEl = target?.closest("[data-vertex-handle]");
-  if (!vertexEl) return;
-  const id = vertexEl.dataset.elemId ?? "";
-  const idx = Number(vertexEl.dataset.vertexIndex ?? "-1");
-  const def = getDef();
-  if (!def || idx < 0) return;
-  const el = def.elements.find((x) => x.id === id);
-  if (!el || el.type !== "polygon") return;
-  const snap2 = getCurrentSnapshot();
-  const state = snap2.get(id);
-  if (!state) return;
-  const points = String(state.points ?? "").trim().split(/\s+/);
-  if (points.length <= 3) return;
-  e.preventDefault();
-  points.splice(idx, 1);
-  setElementValueAtTime(id, { points: points.join(" ") });
+function onDragLeave(e) {
+  const li = e.target.closest(
+    ".studio-element-list-item"
+  );
+  li?.classList.remove("is-drop-above", "is-drop-below");
 }
-function onMouseOver(e) {
-  const id = findElementId(e.target);
-  if (id !== hoveredElementId) {
-    hoveredElementId = id;
-    render();
-  }
+function onDrop(e) {
+  if (!dragSourceId) return;
+  e.preventDefault();
+  const li = e.target.closest(
+    ".studio-element-list-item"
+  );
+  if (!li) return;
+  const targetId = li.dataset.elemId ?? "";
+  if (!targetId || targetId === dragSourceId) return;
+  const rect = li.getBoundingClientRect();
+  const upper = e.clientY < rect.top + rect.height / 2;
+  const positionInVisualList = upper ? "before" : "after";
+  const positionInDefArray = positionInVisualList === "before" ? "after" : "before";
+  reorderElement(dragSourceId, targetId, positionInDefArray);
+  dragSourceId = null;
 }
-function onMouseLeave() {
-  if (hoveredElementId !== null) {
-    hoveredElementId = null;
-    render();
-  }
+function onDragEnd() {
+  dragSourceId = null;
+  listEl?.querySelectorAll(".is-drop-above, .is-drop-below, .is-dragging").forEach(
+    (n) => n.classList.remove("is-drop-above", "is-drop-below", "is-dragging")
+  );
 }
-function svgPoint(clientX, clientY) {
-  if (!canvasEl) return null;
-  const def = getDef();
-  if (!def) return null;
-  const rect = canvasEl.getBoundingClientRect();
-  const sx = def.canvas.width / rect.width;
-  const sy = def.canvas.height / rect.height;
-  return snapPoint({
-    x: (clientX - rect.left) * sx,
-    y: (clientY - rect.top) * sy
-  });
+function onToolsClick(e) {
+  const target = e.target;
+  const btn = target.closest(
+    "[data-studio-tool], [data-add-element]"
+  );
+  if (!btn) return;
+  const type = btn.dataset.studioTool ?? btn.dataset.addElement;
+  if (!type) return;
+  setActiveTool(type);
 }
-function findElementId(target) {
-  let node = target;
-  while (node && node !== canvasEl) {
+function makeDefaultElement(type, id, cx, cy, polygonSides = 6) {
+  switch (type) {
+    case "rect":
+      return {
+        type: "rect",
+        id,
+        rotation: 0,
+        appearances: [],
+        tracks: [],
+        x: cx - 60,
+        y: cy - 30,
+        width: 120,
+        height: 60,
+        fill: "#a5b4fc",
+        stroke: "#6366f1",
+        strokeWidth: 1.5,
+        cornerRadius: 8,
+        label: id,
+        labelColor: "#0b0b0f",
+        labelSize: 14
+      };
+    case "circle":
+      return {
+        type: "circle",
+        id,
+        rotation: 0,
+        appearances: [],
+        tracks: [],
+        cx,
+        cy,
+        r: 36,
+        fill: "#a5b4fc",
+        stroke: "#6366f1",
+        strokeWidth: 1.5,
+        label: id,
+        labelColor: "#0b0b0f",
+        labelSize: 14
+      };
+    case "line":
+      return {
+        type: "line",
+        id,
+        rotation: 0,
+        appearances: [],
+        tracks: [],
+        x1: cx - 80,
+        y1: cy,
+        x2: cx + 80,
+        y2: cy,
+        stroke: "#6366f1",
+        strokeWidth: 2,
+        headStart: "none",
+        headEnd: "none"
+      };
+    case "arrow":
+      return {
+        type: "arrow",
+        id,
+        rotation: 0,
+        appearances: [],
+        tracks: [],
+        x1: cx - 100,
+        y1: cy,
+        x2: cx + 100,
+        y2: cy,
+        stroke: "#6366f1",
+        strokeWidth: 2,
+        curvature: 0,
+        labelColor: "#0b0b0f",
+        labelOffsetX: 0,
+        labelOffsetY: 4,
+        headStart: "none",
+        headEnd: "arrow"
+      };
+    case "text":
+      return {
+        type: "text",
+        id,
+        rotation: 0,
+        appearances: [],
+        tracks: [],
+        x: cx,
+        y: cy,
+        content: id,
+        fontSize: 18,
+        fontWeight: 400,
+        color: "#18181b",
+        textAnchor: "middle"
+      };
+    case "image":
+      return {
+        type: "image",
+        id,
+        rotation: 0,
+        appearances: [],
+        tracks: [],
+        x: cx - 50,
+        y: cy - 50,
+        width: 100,
+        height: 100,
+        assetId: registerExternalAsset(placeholderImageUrl()),
+        preserveAspectRatio: "xMidYMid meet",
+        opacity: 1
+      };
+    case "path":
+      return {
+        type: "path",
+        id,
+        rotation: 0,
+        appearances: [],
+        tracks: [],
+        x: cx - 40,
+        y: cy - 40,
+        d: "M 0 0 L 80 0 L 40 80 Z",
+        fill: "#a5b4fc",
+        stroke: "#6366f1",
+        strokeWidth: 2,
+        opacity: 1
+      };
+    case "polygon": {
+      const r = 40;
+      const sides = Math.max(3, Math.min(24, Math.round(polygonSides) || 6));
+      const pts = Array.from({ length: sides }, (_, i) => {
+        const a = i * Math.PI * 2 / sides - Math.PI / 2;
+        return `${(cx + r * Math.cos(a)).toFixed(1)},${(cy + r * Math.sin(a)).toFixed(1)}`;
+      }).join(" ");
+      return {
+        type: "polygon",
+        id,
+        rotation: 0,
+        appearances: [],
+        tracks: [],
+        points: pts,
+        fill: "#a5b4fc",
+        stroke: "#6366f1",
+        strokeWidth: 1.5,
+        opacity: 1
+      };
+    }
+    default:
+      return null;
+  }
+}
+
+// src/legacy/drawing-interactions.ts
+function dragBounds(start, end) {
+  const width = Math.abs(end.x - start.x);
+  const height = Math.abs(end.y - start.y);
+  return {
+    x: Math.min(start.x, end.x),
+    y: Math.min(start.y, end.y),
+    width,
+    height,
+    centerX: (start.x + end.x) / 2,
+    centerY: (start.y + end.y) / 2,
+    distance: Math.hypot(end.x - start.x, end.y - start.y)
+  };
+}
+function isShapeDrag(start, end) {
+  return dragBounds(start, end).distance >= 4;
+}
+function regularPolygonPoints(center, radius, requestedSides) {
+  const sides = Math.max(3, Math.min(24, Math.round(requestedSides) || 6));
+  return Array.from({ length: sides }, (_, index) => {
+    const angle = index * Math.PI * 2 / sides - Math.PI / 2;
+    return `${(center.x + radius * Math.cos(angle)).toFixed(1)},${(center.y + radius * Math.sin(angle)).toFixed(1)}`;
+  }).join(" ");
+}
+
+// src/legacy/canvas-handles.ts
+function renderResizeHandles(canvasEl2, elId, snap2, byId) {
+  const baseEl = byId.get(elId);
+  const state = snap2.get(elId);
+  if (!baseEl || !state) return null;
+  let box;
+  let handles = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+  if (baseEl.type === "rect" || baseEl.type === "image") {
+    box = {
+      x: state.x,
+      y: state.y,
+      w: state.width,
+      h: state.height
+    };
+  } else if (baseEl.type === "circle") {
+    const r = state.r;
+    box = {
+      x: state.cx - r,
+      y: state.cy - r,
+      w: r * 2,
+      h: r * 2
+    };
+    handles = ["nw", "ne", "se", "sw"];
+  } else if (baseEl.type === "text") {
+    const bbox = textBBoxOnCanvas(canvasEl2, elId);
+    if (!bbox) return null;
+    box = bbox;
+    handles = ["se"];
+  } else {
+    return null;
+  }
+  const positions = {
+    nw: { x: box.x, y: box.y, cursor: "nwse-resize" },
+    n: { x: box.x + box.w / 2, y: box.y, cursor: "ns-resize" },
+    ne: { x: box.x + box.w, y: box.y, cursor: "nesw-resize" },
+    e: { x: box.x + box.w, y: box.y + box.h / 2, cursor: "ew-resize" },
+    se: { x: box.x + box.w, y: box.y + box.h, cursor: "nwse-resize" },
+    s: { x: box.x + box.w / 2, y: box.y + box.h, cursor: "ns-resize" },
+    sw: { x: box.x, y: box.y + box.h, cursor: "nesw-resize" },
+    w: { x: box.x, y: box.y + box.h / 2, cursor: "ew-resize" }
+  };
+  const g = document.createElementNS(SVG_NS, "g");
+  const rotation = state.rotation || 0;
+  if (rotation && (baseEl.type === "rect" || baseEl.type === "image" || baseEl.type === "circle")) {
+    const cx = box.x + box.w / 2;
+    const cy = box.y + box.h / 2;
+    g.setAttribute("transform", `rotate(${rotation} ${cx} ${cy})`);
+  }
+  let html = "";
+  for (const h of handles) {
+    const p = positions[h];
+    html += `<rect x="${p.x - 5}" y="${p.y - 5}" width="10" height="10"
+      fill="white" stroke="var(--color-accent)" stroke-width="2" rx="2"
+      data-resize-handle="${h}" data-elem-id="${escapeXml(elId)}" style="cursor: ${p.cursor}" />`;
+  }
+  g.innerHTML = html;
+  return g;
+}
+function renderRotationHandle(canvasEl2, elId, snap2, byId) {
+  const baseEl = byId.get(elId);
+  const state = snap2.get(elId);
+  if (!baseEl || !state) return null;
+  const center = centerOfElement(baseEl, state);
+  if (!center) return null;
+  let topY = null;
+  if (baseEl.type === "rect" || baseEl.type === "image") {
+    topY = state.y - 24;
+  } else if (baseEl.type === "circle") {
+    topY = state.cy - state.r - 24;
+  } else if (baseEl.type === "text") {
+    const bbox = textBBoxOnCanvas(canvasEl2, elId);
+    if (bbox) topY = bbox.y - 24;
+  } else if (baseEl.type === "polygon") {
+    const bbox = polygonBoundingBox(String(state.points ?? ""));
+    if (bbox) topY = bbox.y - 24;
+  } else if (baseEl.type === "path") {
+    const bbox = pathBBoxOnCanvas(canvasEl2, elId);
+    if (bbox) topY = bbox.y - 24;
+  }
+  if (topY === null) return null;
+  const g = document.createElementNS(SVG_NS, "g");
+  const rotation = state.rotation || 0;
+  if (rotation)
+    g.setAttribute("transform", `rotate(${rotation} ${center.x} ${center.y})`);
+  g.innerHTML = `
+    <line x1="${center.x}" y1="${center.y}" x2="${center.x}" y2="${topY + 8}" stroke="var(--color-accent)" stroke-width="1.5" stroke-dasharray="3 2" pointer-events="none" />
+    <circle cx="${center.x}" cy="${topY}" r="8" fill="var(--color-accent)" stroke="white" stroke-width="2" data-rotate-handle="${escapeXml(elId)}" style="cursor: grab" />
+    <text x="${center.x + 14}" y="${topY + 4}" font-size="10" fill="var(--color-accent)" font-family="ui-monospace, monospace" pointer-events="none">${Math.round(rotation)}\xB0</text>
+  `;
+  return g;
+}
+function renderAnchorDots(elId, snap2, byId) {
+  const baseEl = byId.get(elId);
+  const state = snap2.get(elId);
+  if (!baseEl || !state) return null;
+  if (baseEl.type !== "rect" && baseEl.type !== "circle" && baseEl.type !== "image")
+    return null;
+  const points = anchorPointsOf(baseEl, state);
+  const g = document.createElementNS(SVG_NS, "g");
+  for (const p of points) {
+    g.innerHTML += `<circle cx="${p.x}" cy="${p.y}" r="6" fill="white" stroke="#6366f1" stroke-width="2"
+      data-anchor-handle data-elem-id="${escapeXml(elId)}" data-anchor="${p.anchor}" style="cursor: crosshair" />`;
+  }
+  return g;
+}
+function renderLineEndpointHandles(elId, snap2, byId) {
+  const baseEl = byId.get(elId);
+  const state = snap2.get(elId);
+  if (!baseEl || !state) return null;
+  if (baseEl.type !== "line" && baseEl.type !== "arrow") return null;
+  const coords = baseEl.type === "line" ? resolveLineCoords(state, snap2, byId) : resolveArrowCoords(state, snap2, byId);
+  if (!coords) return null;
+  const midX = (coords.x1 + coords.x2) / 2;
+  const midY = (coords.y1 + coords.y2) / 2;
+  const g = document.createElementNS(SVG_NS, "g");
+  g.innerHTML = `
+    <rect x="${coords.x1 - 6}" y="${coords.y1 - 6}" width="12" height="12" rx="2"
+      fill="white" stroke="var(--color-accent)" stroke-width="2"
+      data-endpoint-handle="start" data-elem-id="${escapeXml(elId)}" style="cursor: grab" />
+    <rect x="${coords.x2 - 6}" y="${coords.y2 - 6}" width="12" height="12" rx="2"
+      fill="white" stroke="var(--color-accent)" stroke-width="2"
+      data-endpoint-handle="end" data-elem-id="${escapeXml(elId)}" style="cursor: grab" />
+    <circle cx="${midX}" cy="${midY}" r="6"
+      fill="var(--color-accent)" stroke="white" stroke-width="2"
+      data-line-mid-handle data-elem-id="${escapeXml(elId)}" style="cursor: move" />
+  `;
+  return g;
+}
+function renderPolygonVertexHandles(elId, snap2, byId) {
+  const baseEl = byId.get(elId);
+  const state = snap2.get(elId);
+  if (!baseEl || !state) return null;
+  if (baseEl.type !== "polygon") return null;
+  const points = String(state.points ?? "").trim().split(/\s+/);
+  const parsed = [];
+  for (let i = 0; i < points.length; i += 1) {
+    const [x, y] = points[i].split(",").map(Number);
+    if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
+    parsed.push({ x, y, i });
+  }
+  const g = document.createElementNS(SVG_NS, "g");
+  let html = "";
+  if (parsed.length >= 2) {
+    for (let i = 0; i < parsed.length; i += 1) {
+      const a = parsed[i];
+      const b = parsed[(i + 1) % parsed.length];
+      const mx = (a.x + b.x) / 2;
+      const my = (a.y + b.y) / 2;
+      html += `<g data-vertex-add data-elem-id="${escapeXml(elId)}" data-after-index="${a.i}" style="cursor: copy">
+        <circle cx="${mx}" cy="${my}" r="6" fill="rgba(99, 102, 241, 0.15)" stroke="var(--color-accent)" stroke-width="1.5" stroke-dasharray="2 2" />
+        <text x="${mx}" y="${my + 3}" text-anchor="middle" font-size="10" fill="var(--color-accent)" font-weight="700" pointer-events="none">+</text>
+      </g>`;
+    }
+  }
+  for (const p of parsed) {
+    const removable = parsed.length > 3;
+    html += `<circle cx="${p.x}" cy="${p.y}" r="6" fill="white" stroke="var(--color-accent)" stroke-width="2"
+      data-vertex-handle data-elem-id="${escapeXml(elId)}" data-vertex-index="${p.i}"
+      style="cursor: grab" >
+      <title>${removable ? "\uB4DC\uB798\uADF8=\uC774\uB3D9, \uC6B0\uD074\uB9AD=\uC0AD\uC81C" : "\uB4DC\uB798\uADF8=\uC774\uB3D9"}</title>
+    </circle>`;
+  }
+  g.innerHTML = html;
+  return g;
+}
+function renderSnapTargets(draggingElementId, snap2, byId, activeSnapTarget) {
+  const g = document.createElementNS(SVG_NS, "g");
+  let html = "";
+  for (const baseEl of byId.values()) {
+    if (baseEl.id === draggingElementId) continue;
+    if (baseEl.type === "line" || baseEl.type === "arrow") continue;
+    const state = snap2.get(baseEl.id);
+    if (!state || !state.visible) continue;
+    const points = getAnchorPoints(baseEl, state);
+    for (const p of points) {
+      const isActive = activeSnapTarget?.elementId === baseEl.id && activeSnapTarget?.anchor === p.anchor;
+      if (isActive) {
+        html += `<circle cx="${p.x}" cy="${p.y}" r="6" fill="var(--color-accent)" stroke="white" stroke-width="2" opacity="0.85" pointer-events="none" />`;
+        html += `<circle cx="${p.x}" cy="${p.y}" r="12" fill="none" stroke="var(--color-accent)" stroke-width="1.5" opacity="0.4" pointer-events="none" />`;
+      } else {
+        html += `<circle cx="${p.x}" cy="${p.y}" r="3" fill="white" stroke="var(--color-accent)" stroke-width="1.5" opacity="0.5" pointer-events="none" />`;
+      }
+    }
+  }
+  g.innerHTML = html;
+  return g;
+}
+function renderSelectionOutline(canvasEl2, elId, snap2, byId) {
+  const baseEl = byId.get(elId);
+  const state = snap2.get(elId);
+  if (!baseEl || !state) return null;
+  let box = null;
+  if (baseEl.type === "rect" || baseEl.type === "image") {
+    box = {
+      x: state.x - 4,
+      y: state.y - 4,
+      w: state.width + 8,
+      h: state.height + 8
+    };
+  } else if (baseEl.type === "circle") {
+    const r = state.r;
+    box = {
+      x: state.cx - r - 4,
+      y: state.cy - r - 4,
+      w: r * 2 + 8,
+      h: r * 2 + 8
+    };
+  } else if (baseEl.type === "text") {
+    const bbox = textBBoxOnCanvas(canvasEl2, elId);
+    if (bbox)
+      box = { x: bbox.x - 4, y: bbox.y - 4, w: bbox.w + 8, h: bbox.h + 8 };
+  } else if (baseEl.type === "line" || baseEl.type === "arrow") {
+    const coords = baseEl.type === "line" ? resolveLineCoords(state, snap2, byId) : resolveArrowCoords(state, snap2, byId);
+    if (!coords) return null;
+    box = {
+      x: Math.min(coords.x1, coords.x2) - 4,
+      y: Math.min(coords.y1, coords.y2) - 4,
+      w: Math.abs(coords.x2 - coords.x1) + 8,
+      h: Math.abs(coords.y2 - coords.y1) + 8
+    };
+  } else if (baseEl.type === "polygon") {
+    const bbox = polygonBoundingBox(String(state.points ?? ""));
+    if (bbox)
+      box = { x: bbox.x - 4, y: bbox.y - 4, w: bbox.w + 8, h: bbox.h + 8 };
+  } else if (baseEl.type === "path") {
+    const bbox = pathBBoxOnCanvas(canvasEl2, elId);
+    if (bbox)
+      box = { x: bbox.x - 4, y: bbox.y - 4, w: bbox.w + 8, h: bbox.h + 8 };
+  }
+  if (!box) return null;
+  const rect = document.createElementNS(SVG_NS, "rect");
+  rect.setAttribute("x", String(box.x));
+  rect.setAttribute("y", String(box.y));
+  rect.setAttribute("width", String(box.w));
+  rect.setAttribute("height", String(box.h));
+  rect.classList.add("element-selected-outline");
+  return rect;
+}
+
+// src/legacy/canvas-preview.ts
+var previewRoot = null;
+var previewHandle = null;
+var unsubscribePreview = null;
+async function mountPreview(host, doc, options) {
+  const { mountStage } = await import('@kokoa/clotho/dom');
+  previewHandle = mountStage(host, doc, {
+    player: {
+      autoplay: true,
+      loop: options.loop,
+      speed: options.speed,
+      onEnd: options.onEnd
+    }
+  });
+  unsubscribePreview = previewHandle.player.subscribe((state) => {
+    options.onTime(state.time);
+  });
+}
+function showPreview(canvasEl2, def, options) {
+  if (!canvasEl2) return;
+  const parent = canvasEl2.parentElement;
+  if (!parent) return;
+  hidePreview(canvasEl2);
+  canvasEl2.style.visibility = "hidden";
+  previewRoot = document.createElement("div");
+  const bg = def.canvas.background && def.canvas.background !== "transparent" ? def.canvas.background : "transparent";
+  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);
+}
+function hidePreview(canvasEl2) {
+  if (canvasEl2) canvasEl2.style.visibility = "";
+  unsubscribePreview?.();
+  unsubscribePreview = null;
+  previewHandle?.destroy();
+  previewHandle = null;
+  if (previewRoot) {
+    previewRoot.remove();
+    previewRoot = null;
+  }
+}
+
+// src/legacy/canvas.ts
+var SNAP_RADIUS = 12;
+var HEAD_MARKER_DEFS = `
+  <marker id="studio-h-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
+    <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />
+  </marker>
+  <marker id="studio-h-arrow-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+    <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />
+  </marker>
+  <marker id="studio-h-triangle" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
+    <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />
+  </marker>
+  <marker id="studio-h-triangle-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+    <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />
+  </marker>
+  <marker id="studio-h-triangle-open" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto">
+    <path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="currentColor" stroke-width="1.5" />
+  </marker>
+  <marker id="studio-h-triangle-open-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="9" markerHeight="9" orient="auto-start-reverse">
+    <path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="currentColor" stroke-width="1.5" />
+  </marker>
+  <marker id="studio-h-circle" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6">
+    <circle cx="5" cy="5" r="4" fill="currentColor" />
+  </marker>
+  <marker id="studio-h-circle-open" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="7" markerHeight="7">
+    <circle cx="5" cy="5" r="4" fill="white" stroke="currentColor" stroke-width="1.5" />
+  </marker>
+  <marker id="studio-h-diamond" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
+    <path d="M 0 5 L 5 0 L 10 5 L 5 10 z" fill="currentColor" />
+  </marker>
+  <marker id="studio-h-diamond-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+    <path d="M 0 5 L 5 0 L 10 5 L 5 10 z" fill="currentColor" />
+  </marker>
+  <marker id="studio-h-diamond-open" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
+    <path d="M 0 5 L 5 0 L 10 5 L 5 10 z" fill="white" stroke="currentColor" stroke-width="1.5" />
+  </marker>
+  <marker id="studio-h-diamond-open-start" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+    <path d="M 0 5 L 5 0 L 10 5 L 5 10 z" fill="white" stroke="currentColor" stroke-width="1.5" />
+  </marker>
+  <marker id="studio-h-bar" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="10" orient="auto">
+    <rect x="4" y="0" width="2" height="10" fill="currentColor" />
+  </marker>
+`;
+function markerUrlFor(head, end) {
+  if (!head || head === "none") return "";
+  const isOpenCircle = head === "circle-open";
+  const isCircle = head === "circle" || isOpenCircle;
+  if (isCircle) return `url(#studio-h-${head})`;
+  const idBase = `studio-h-${head}`;
+  return end === "start" ? `url(#${idBase}-start)` : `url(#${idBase})`;
+}
+var dragState = null;
+var rotateState = null;
+var connectState = null;
+var endpointDragState = null;
+var vertexDragState = null;
+var resizeState = null;
+var marqueeState = null;
+var marqueeJustFinished = false;
+var toolJustFinished = false;
+var canvasEl = null;
+var hoveredElementId = null;
+var canvasZoom = 1;
+var toolDrawState = null;
+var elementDrawState = null;
+var canvasRenderFrame = null;
+var pathDraftState = null;
+function initCanvas(root) {
+  canvasEl = root;
+  root.addEventListener("click", onCanvasClick);
+  root.addEventListener("dblclick", onPathDoubleClick);
+  root.addEventListener("mousedown", onMouseDown);
+  root.addEventListener("mouseover", onMouseOver);
+  root.addEventListener("mouseleave", onMouseLeave);
+  root.addEventListener("contextmenu", onContextMenu);
+  root.addEventListener("wheel", onCanvasWheel, { passive: false });
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+  document.addEventListener("keydown", onPathKeyDown);
+  subscribe(render2);
+  render2();
+}
+function onCanvasWheel(e) {
+  if (!e.ctrlKey && !e.metaKey) return;
+  e.preventDefault();
+  const wrap = canvasEl?.closest(".studio-canvas-wrap");
+  if (!wrap) {
+    canvasZoom = Math.max(
+      0.1,
+      Math.min(5, canvasZoom * (e.deltaY < 0 ? 1.1 : 1 / 1.1))
+    );
+    render2();
+    return;
+  }
+  const wrapRect = wrap.getBoundingClientRect();
+  const mxInWrap = e.clientX - wrapRect.left + wrap.scrollLeft;
+  const myInWrap = e.clientY - wrapRect.top + wrap.scrollTop;
+  const old = canvasZoom;
+  canvasZoom = Math.max(
+    0.1,
+    Math.min(5, canvasZoom * (e.deltaY < 0 ? 1.1 : 1 / 1.1))
+  );
+  const ratio = canvasZoom / old;
+  render2();
+  wrap.scrollLeft = mxInWrap * ratio - (e.clientX - wrapRect.left);
+  wrap.scrollTop = myInWrap * ratio - (e.clientY - wrapRect.top);
+}
+function onContextMenu(e) {
+  const target = e.target;
+  const vertexEl = target?.closest("[data-vertex-handle]");
+  if (!vertexEl) return;
+  const id = vertexEl.dataset.elemId ?? "";
+  const idx = Number(vertexEl.dataset.vertexIndex ?? "-1");
+  const def = getDef();
+  if (!def || idx < 0) return;
+  const el = def.elements.find((x) => x.id === id);
+  if (!el || el.type !== "polygon") return;
+  const snap2 = getCurrentSnapshot();
+  const state = snap2.get(id);
+  if (!state) return;
+  const points = String(state.points ?? "").trim().split(/\s+/);
+  if (points.length <= 3) return;
+  e.preventDefault();
+  points.splice(idx, 1);
+  setElementValueAtTime(id, { points: points.join(" ") });
+}
+function onMouseOver(e) {
+  const id = findElementId(e.target);
+  if (id !== hoveredElementId) {
+    hoveredElementId = id;
+    render2();
+  }
+}
+function onMouseLeave() {
+  if (hoveredElementId !== null) {
+    hoveredElementId = null;
+    render2();
+  }
+}
+function svgPoint(clientX, clientY) {
+  if (!canvasEl) return null;
+  const def = getDef();
+  if (!def) return null;
+  const rect = canvasEl.getBoundingClientRect();
+  const sx = def.canvas.width / rect.width;
+  const sy = def.canvas.height / rect.height;
+  return snapPoint({
+    x: (clientX - rect.left) * sx,
+    y: (clientY - rect.top) * sy
+  });
+}
+function findElementId(target) {
+  let node = target;
+  while (node && node !== canvasEl) {
     const id = node.getAttribute?.("data-elem-id");
     if (id) return id;
     node = node.parentElement;
@@ -847,6 +1254,10 @@ function onCanvasClick(e) {
     marqueeJustFinished = false;
     return;
   }
+  if (toolJustFinished) {
+    toolJustFinished = false;
+    return;
+  }
   const target = e.target;
   const addVertexHandle = target?.closest("[data-vertex-add]");
   if (addVertexHandle) {
@@ -878,11 +1289,8 @@ function onCanvasClick(e) {
   const id = findElementId(e.target);
   if (id) {
     const resolvedId = e.altKey ? id : findContainingGroup(id)?.id ?? id;
-    if (e.shiftKey || e.ctrlKey || e.metaKey) {
-      setSelection(toggleSelectionFor(getSelection(), resolvedId));
-    } else {
-      setSelection({ kind: "element", elementId: resolvedId });
-    }
+    setActiveTool("select");
+    setSelection(nextPointerSelection(getSelection(), resolvedId, e));
   } else if (e.target === canvasEl) setSelection({ kind: "none" });
 }
 function onMouseDown(e) {
@@ -890,13 +1298,66 @@ function onMouseDown(e) {
   const target = e.target;
   const def = getDef();
   if (!def) return;
+  const activeTool2 = getActiveTool();
+  if (activeTool2 !== "select" && e.target === canvasEl) {
+    const point = svgPoint(e.clientX, e.clientY);
+    if (!point) return;
+    e.preventDefault();
+    if (activeTool2 === "path") {
+      if (!pathDraftState) {
+        pathDraftState = { points: [point], current: point };
+      } else {
+        pathDraftState.points.push(point);
+        pathDraftState.current = point;
+      }
+      render2();
+      return;
+    }
+    if (activeTool2 === "line" || activeTool2 === "arrow") {
+      toolDrawState = {
+        tool: activeTool2,
+        startX: point.x,
+        startY: point.y,
+        currentX: point.x,
+        currentY: point.y
+      };
+      render2();
+      return;
+    }
+    const sidesInput = document.getElementById(
+      "studio-polygon-sides"
+    );
+    if (activeTool2 === "rect" || activeTool2 === "circle" || activeTool2 === "polygon" || activeTool2 === "text" || activeTool2 === "image") {
+      elementDrawState = {
+        tool: activeTool2,
+        start: point,
+        current: point,
+        polygonSides: Number(sidesInput?.value ?? 6)
+      };
+      requestCanvasRender();
+      return;
+    }
+  }
+  if (activeTool2 !== "select" && !((activeTool2 === "line" || activeTool2 === "arrow") && target?.closest("[data-anchor-handle]"))) {
+    return;
+  }
+  if (shouldDeferElementPointerDown(e, {
+    isElement: Boolean(findElementId(e.target)),
+    isHandle: Boolean(
+      target?.closest(
+        "[data-rotate-handle], [data-anchor-handle], [data-resize-handle], [data-endpoint-handle], [data-line-mid-handle], [data-vertex-handle], [data-vertex-add]"
+      )
+    )
+  })) {
+    return;
+  }
   if (target?.closest("[data-vertex-add]")) {
     e.preventDefault();
     e.stopPropagation();
     return;
   }
   const resizeHandle = target?.closest("[data-resize-handle]");
-  if (resizeHandle) {
+  if (resizeHandle && activeTool2 === "select") {
     e.preventDefault();
     const id2 = resizeHandle.dataset.elemId ?? "";
     const handle = resizeHandle.dataset.resizeHandle;
@@ -938,7 +1399,7 @@ function onMouseDown(e) {
     }
     resizeState = rs;
     setSelection({ kind: "element", elementId: id2 });
-    render();
+    render2();
     return;
   }
   const vertexHandle = target?.closest("[data-vertex-handle]");
@@ -955,7 +1416,7 @@ function onMouseDown(e) {
       originalPoints: String(elState2.points ?? "")
     };
     setSelection({ kind: "element", elementId: id2 });
-    render();
+    render2();
     return;
   }
   const endpointHandle = target?.closest("[data-endpoint-handle]");
@@ -973,7 +1434,7 @@ function onMouseDown(e) {
       snapTarget: null
     };
     setSelection({ kind: "element", elementId: id2 });
-    render();
+    render2();
     return;
   }
   const midHandle = target?.closest("[data-line-mid-handle]");
@@ -1022,7 +1483,7 @@ function onMouseDown(e) {
     return;
   }
   const anchorHandle = target?.closest("[data-anchor-handle]");
-  if (anchorHandle) {
+  if (anchorHandle && (activeTool2 === "line" || activeTool2 === "arrow")) {
     e.preventDefault();
     const fromId = anchorHandle.dataset.elemId ?? "";
     const fromAnchor = anchorHandle.dataset.anchor ?? "auto";
@@ -1036,7 +1497,7 @@ function onMouseDown(e) {
       currentX: pt.x,
       currentY: pt.y
     };
-    render();
+    render2();
     return;
   }
   const rawId = findElementId(e.target);
@@ -1099,6 +1560,29 @@ function collectDragExtras(anchorId, def, snap2) {
   return extras;
 }
 function onMouseMove(e) {
+  if (pathDraftState && getActiveTool() === "path") {
+    const point = svgPoint(e.clientX, e.clientY);
+    if (point) {
+      pathDraftState.current = point;
+      render2();
+    }
+    return;
+  }
+  if (elementDrawState) {
+    const point = svgPoint(e.clientX, e.clientY);
+    if (!point) return;
+    elementDrawState.current = point;
+    requestCanvasRender();
+    return;
+  }
+  if (toolDrawState) {
+    const point = svgPoint(e.clientX, e.clientY);
+    if (!point) return;
+    toolDrawState.currentX = point.x;
+    toolDrawState.currentY = point.y;
+    render2();
+    return;
+  }
   if (resizeState) {
     handleResizeMove(e);
     return;
@@ -1168,7 +1652,7 @@ function onMouseMove(e) {
         }
       }
     }
-    render();
+    render2();
     return;
   }
   if (rotateState) {
@@ -1186,7 +1670,7 @@ function onMouseMove(e) {
     if (!pt) return;
     connectState.currentX = pt.x;
     connectState.currentY = pt.y;
-    render();
+    render2();
     return;
   }
   if (marqueeState) {
@@ -1194,7 +1678,7 @@ function onMouseMove(e) {
     if (!pt) return;
     marqueeState.currentX = pt.x;
     marqueeState.currentY = pt.y;
-    render();
+    render2();
     return;
   }
   if (!dragState || !canvasEl) return;
@@ -1226,18 +1710,104 @@ function onMouseMove(e) {
     );
   }
 }
+function onPathDoubleClick(e) {
+  if (!pathDraftState || getActiveTool() !== "path") return;
+  e.preventDefault();
+  const points = pathDraftState.points;
+  if (points.length >= 2 && Math.hypot(
+    points.at(-1).x - points.at(-2).x,
+    points.at(-1).y - points.at(-2).y
+  ) < 2) {
+    points.pop();
+  }
+  finishPathDraft();
+}
+function onPathKeyDown(e) {
+  if (!pathDraftState || getActiveTool() !== "path") return;
+  const target = e.target;
+  const isEditing = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+  if (isEditing) return;
+  if (e.key === "Enter") {
+    e.preventDefault();
+    finishPathDraft();
+  } else if (e.key === "Escape") {
+    e.preventDefault();
+    pathDraftState = null;
+    render2();
+  }
+}
+function finishPathDraft() {
+  const draft = pathDraftState;
+  pathDraftState = null;
+  if (!draft || draft.points.length < 2) {
+    render2();
+    return;
+  }
+  const origin = draft.points[0];
+  const element = makeDefaultElement(
+    "path",
+    uniqueElementId("path"),
+    origin.x,
+    origin.y
+  );
+  if (element?.type === "path") {
+    const d = draft.points.map((point, index) => {
+      const command = index === 0 ? "M" : "L";
+      return `${command} ${(point.x - origin.x).toFixed(1)} ${(point.y - origin.y).toFixed(1)}`;
+    }).join(" ");
+    addElement({ ...element, x: origin.x, y: origin.y, d });
+  }
+  render2();
+}
 function onMouseUp(e) {
+  if (elementDrawState) {
+    const draw = elementDrawState;
+    const point = svgPoint(e.clientX, e.clientY);
+    if (point) draw.current = point;
+    elementDrawState = null;
+    if (canvasRenderFrame !== null) {
+      cancelAnimationFrame(canvasRenderFrame);
+      canvasRenderFrame = null;
+    }
+    toolJustFinished = true;
+    finishElementDraw(draw);
+    render2();
+    return;
+  }
+  if (toolDrawState) {
+    const draw = toolDrawState;
+    toolDrawState = null;
+    if (Math.hypot(draw.currentX - draw.startX, draw.currentY - draw.startY) >= 4) {
+      const element = makeDefaultElement(
+        draw.tool,
+        uniqueElementId(draw.tool),
+        0,
+        0
+      );
+      if (element && (element.type === "line" || element.type === "arrow")) {
+        addElement({
+          ...element,
+          x1: draw.startX,
+          y1: draw.startY,
+          x2: draw.currentX,
+          y2: draw.currentY
+        });
+      }
+    }
+    render2();
+    return;
+  }
   if (resizeState) {
     resizeState = null;
-    render();
+    render2();
   }
   if (vertexDragState) {
     vertexDragState = null;
-    render();
+    render2();
   }
   if (endpointDragState) {
     endpointDragState = null;
-    render();
+    render2();
   }
   if (connectState) {
     const target = e.target;
@@ -1247,10 +1817,9 @@ function onMouseUp(e) {
     if (elemId && elemId !== connectState.fromId) {
       const def = getDef();
       if (def) {
-        const newId = uniqueElementId("arrow");
-        addElement({
-          type: "arrow",
-          id: newId,
+        const connectionType = getActiveTool() === "line" ? "line" : "arrow";
+        const common = {
+          id: uniqueElementId(connectionType),
           rotation: 0,
           appearances: [],
           tracks: [],
@@ -1260,17 +1829,25 @@ function onMouseUp(e) {
           toAnchor,
           stroke: "#6366f1",
           strokeWidth: 2,
-          curvature: 0,
-          labelColor: "#0b0b0f",
-          labelOffsetX: 0,
-          labelOffsetY: 4,
-          headStart: "none",
-          headEnd: "arrow"
-        });
+          headStart: "none"
+        };
+        if (connectionType === "line") {
+          addElement({ ...common, type: "line", headEnd: "none" });
+        } else {
+          addElement({
+            ...common,
+            type: "arrow",
+            curvature: 0,
+            labelColor: "#0b0b0f",
+            labelOffsetX: 0,
+            labelOffsetY: 4,
+            headEnd: "arrow"
+          });
+        }
       }
     }
     connectState = null;
-    render();
+    render2();
   }
   if (marqueeState) {
     const mx = Math.min(marqueeState.startX, marqueeState.currentX);
@@ -1302,11 +1879,62 @@ function onMouseUp(e) {
         }
       }
     }
-    render();
+    render2();
   }
   dragState = null;
   rotateState = null;
 }
+function requestCanvasRender() {
+  if (canvasRenderFrame !== null) return;
+  canvasRenderFrame = requestAnimationFrame(() => {
+    canvasRenderFrame = null;
+    render2();
+  });
+}
+function finishElementDraw(draw) {
+  if (draw.tool === "image") {
+    document.getElementById("studio-image-file")?.click();
+    return;
+  }
+  const dragged = isShapeDrag(draw.start, draw.current);
+  const bounds = dragBounds(draw.start, draw.current);
+  const center = dragged ? { x: bounds.centerX, y: bounds.centerY } : draw.start;
+  const element = makeDefaultElement(
+    draw.tool,
+    uniqueElementId(draw.tool),
+    center.x,
+    center.y,
+    draw.polygonSides
+  );
+  if (!element) return;
+  if (dragged && element.type === "rect") {
+    addElement({
+      ...element,
+      x: bounds.x,
+      y: bounds.y,
+      width: Math.max(1, bounds.width),
+      height: Math.max(1, bounds.height)
+    });
+  } else if (dragged && element.type === "circle") {
+    addElement({
+      ...element,
+      cx: bounds.centerX,
+      cy: bounds.centerY,
+      r: Math.max(2, bounds.distance / 2)
+    });
+  } else if (dragged && element.type === "polygon") {
+    addElement({
+      ...element,
+      points: regularPolygonPoints(
+        { x: bounds.centerX, y: bounds.centerY },
+        Math.max(2, bounds.distance / 2),
+        draw.polygonSides
+      )
+    });
+  } else {
+    addElement(element);
+  }
+}
 function applyMove(baseEl, state, x, y, polygonOriginal) {
   if (baseEl.type === "rect" || baseEl.type === "image" || baseEl.type === "text") {
     setElementValueAtTime(baseEl.id, { x, y });
@@ -1509,7 +2137,7 @@ function handleResizeMove(e) {
     return;
   }
 }
-function render() {
+function render2() {
   if (!canvasEl) return;
   const def = getDef();
   if (!def) {
@@ -1552,32 +2180,20 @@ function render() {
         snap2,
         elementsById
       );
-      if (outline) canvasEl.appendChild(outline);
-      const handle = renderRotationHandle(
-        canvasEl,
-        selection.elementId,
-        snap2,
-        elementsById
-      );
-      if (handle) canvasEl.appendChild(handle);
-      const endpoints = renderLineEndpointHandles(
-        selection.elementId,
-        snap2,
-        elementsById
-      );
-      if (endpoints) canvasEl.appendChild(endpoints);
-      const vertices = renderPolygonVertexHandles(
-        selection.elementId,
-        snap2,
-        elementsById
-      );
-      if (vertices) canvasEl.appendChild(vertices);
-      const resize = renderResizeHandles(
+      if (outline) canvasEl.appendChild(outline);
+      const selectMode = getActiveTool() === "select";
+      const handle = selectMode ? renderRotationHandle(
         canvasEl,
         selection.elementId,
         snap2,
         elementsById
-      );
+      ) : null;
+      if (handle) canvasEl.appendChild(handle);
+      const endpoints = selectMode ? renderLineEndpointHandles(selection.elementId, snap2, elementsById) : null;
+      if (endpoints) canvasEl.appendChild(endpoints);
+      const vertices = selectMode ? renderPolygonVertexHandles(selection.elementId, snap2, elementsById) : null;
+      if (vertices) canvasEl.appendChild(vertices);
+      const resize = selectMode ? renderResizeHandles(canvasEl, selection.elementId, snap2, elementsById) : null;
       if (resize) canvasEl.appendChild(resize);
     }
   } else if (selection.kind === "elements") {
@@ -1600,513 +2216,291 @@ function render() {
     );
     if (guides) canvasEl.appendChild(guides);
   }
-  if (hoveredElementId && (!connectState || hoveredElementId !== connectState.fromId)) {
+  const activeTool2 = getActiveTool();
+  if (hoveredElementId && (activeTool2 === "line" || activeTool2 === "arrow") && (!connectState || hoveredElementId !== connectState.fromId)) {
     const anchors = renderAnchorDots(hoveredElementId, snap2, elementsById);
     if (anchors) canvasEl.appendChild(anchors);
   }
-  if (connectState && connectState.fromId !== hoveredElementId) {
+  if (connectState && (activeTool2 === "line" || activeTool2 === "arrow") && connectState.fromId !== hoveredElementId) {
     const anchors = renderAnchorDots(connectState.fromId, snap2, elementsById);
     if (anchors) canvasEl.appendChild(anchors);
   }
   if (connectState) {
-    const tempLine = document.createElementNS(SVG_NS, "line");
-    tempLine.setAttribute("x1", String(connectState.startX));
-    tempLine.setAttribute("y1", String(connectState.startY));
-    tempLine.setAttribute("x2", String(connectState.currentX));
-    tempLine.setAttribute("y2", String(connectState.currentY));
-    tempLine.setAttribute("stroke", "#6366f1");
-    tempLine.setAttribute("stroke-width", "2");
-    tempLine.setAttribute("stroke-dasharray", "5 3");
-    tempLine.setAttribute("marker-end", "url(#studio-arrow)");
-    tempLine.style.pointerEvents = "none";
-    canvasEl.appendChild(tempLine);
-  }
-  if (marqueeState) {
-    const mx = Math.min(marqueeState.startX, marqueeState.currentX);
-    const my = Math.min(marqueeState.startY, marqueeState.currentY);
-    const mw = Math.abs(marqueeState.currentX - marqueeState.startX);
-    const mh = Math.abs(marqueeState.currentY - marqueeState.startY);
-    if (mw > 0 || mh > 0) {
-      const marqueeRect = document.createElementNS(SVG_NS, "rect");
-      marqueeRect.setAttribute("x", String(mx));
-      marqueeRect.setAttribute("y", String(my));
-      marqueeRect.setAttribute("width", String(mw));
-      marqueeRect.setAttribute("height", String(mh));
-      marqueeRect.setAttribute("fill", "rgba(99, 102, 241, 0.08)");
-      marqueeRect.setAttribute("stroke", "#6366f1");
-      marqueeRect.setAttribute("stroke-width", "1");
-      marqueeRect.setAttribute("stroke-dasharray", "4 3");
-      marqueeRect.style.pointerEvents = "none";
-      canvasEl.appendChild(marqueeRect);
-    }
-  }
-}
-function findSnapTarget(x, y, excludeElementId) {
-  const def = getDef();
-  if (!def) return null;
-  const snap2 = getCurrentSnapshot();
-  const allAnchors = [];
-  for (const baseEl of def.elements) {
-    if (baseEl.id === excludeElementId) continue;
-    if (baseEl.type === "line" || baseEl.type === "arrow") continue;
-    const state = snap2.get(baseEl.id);
-    if (!state || !state.visible) continue;
-    const points = getAnchorPoints(baseEl, state);
-    allAnchors.push(...points);
-  }
-  const nearest = findNearestAnchor({ x, y }, allAnchors, SNAP_RADIUS);
-  if (!nearest) return null;
-  return {
-    elementId: nearest.elementId,
-    anchor: nearest.anchor,
-    x: nearest.x,
-    y: nearest.y
-  };
-}
-function renderGroupOutline(groupId) {
-  const box = groupBbox(groupId);
-  if (!box) return null;
-  const g = document.createElementNS(SVG_NS, "g");
-  g.setAttribute("data-elem-id", groupId);
-  const pad = 6;
-  const x = box.x - pad;
-  const y = box.y - pad;
-  const w = box.w + pad * 2;
-  const h = box.h + pad * 2;
-  const thickness = 8;
-  g.innerHTML = `
-    <rect x="${x}" y="${y}" width="${w}" height="${h}"
-      fill="none" stroke="var(--color-accent)" stroke-width="2" stroke-dasharray="6 4" rx="4" pointer-events="none" />
-    <rect x="${x - thickness}" y="${y - thickness}" width="${w + thickness * 2}" height="${thickness * 2}"
-      fill="rgba(0,0,0,0.0001)" style="cursor: move" pointer-events="all" />
-    <rect x="${x - thickness}" y="${y + h - thickness}" width="${w + thickness * 2}" height="${thickness * 2}"
-      fill="rgba(0,0,0,0.0001)" style="cursor: move" pointer-events="all" />
-    <rect x="${x - thickness}" y="${y}" width="${thickness * 2}" height="${h}"
-      fill="rgba(0,0,0,0.0001)" style="cursor: move" pointer-events="all" />
-    <rect x="${x + w - thickness}" y="${y}" width="${thickness * 2}" height="${h}"
-      fill="rgba(0,0,0,0.0001)" style="cursor: move" pointer-events="all" />
-  `;
-  return g;
-}
-function makeG(elementId, rotation, cx, cy) {
-  const g = document.createElementNS(SVG_NS, "g");
-  g.setAttribute("data-elem-id", elementId);
-  g.classList.add("element-handle");
-  if (rotation) g.setAttribute("transform", `rotate(${rotation} ${cx} ${cy})`);
-  return g;
-}
-function renderElement(baseEl, state, snap2, byId) {
-  const rotation = state.rotation || 0;
-  if (baseEl.type === "rect") {
-    const r = state;
-    const cx = r.x + r.width / 2;
-    const cy = r.y + r.height / 2;
-    const g = makeG(baseEl.id, rotation, cx, cy);
-    g.innerHTML = `
-      <rect x="${r.x}" y="${r.y}" width="${r.width}" height="${r.height}" rx="${r.cornerRadius}"
-        fill="${r.fill}" stroke="${r.stroke}" stroke-width="${r.strokeWidth}" />
-      ${r.label ? `<text x="${cx}" y="${cy + 5}" text-anchor="middle"
-        font-size="${r.labelSize}" font-weight="600" fill="${r.labelColor}">${escapeXml(r.label)}</text>` : ""}
-      ${r.subtitle ? `<text x="${cx}" y="${cy + r.labelSize + 8}"
-        text-anchor="middle" font-size="10" fill="${r.labelColor}" opacity="0.7">${escapeXml(r.subtitle)}</text>` : ""}
-    `;
-    return g;
-  }
-  if (baseEl.type === "circle") {
-    const c = state;
-    const g = makeG(baseEl.id, rotation, c.cx, c.cy);
-    g.innerHTML = `
-      <circle cx="${c.cx}" cy="${c.cy}" r="${c.r}" fill="${c.fill}" stroke="${c.stroke}"
-        stroke-width="${c.strokeWidth}" />
-      ${c.label ? `<text x="${c.cx}" y="${c.cy + 5}" text-anchor="middle"
-        font-size="${c.labelSize}" font-weight="600" fill="${c.labelColor}">${escapeXml(c.label)}</text>` : ""}
-    `;
-    return g;
-  }
-  if (baseEl.type === "line") {
-    const l = state;
-    const coords = resolveLineCoords(l, snap2, byId);
-    if (!coords) return null;
-    const g = makeG(baseEl.id, 0, 0, 0);
-    g.style.color = l.stroke;
-    const dash = l.strokeDasharray ? `stroke-dasharray="${l.strokeDasharray}"` : "";
-    const mStart = markerUrlFor(l.headStart, "start");
-    const mEnd = markerUrlFor(l.headEnd, "end");
-    const mAttr = `${mStart ? `marker-start="${mStart}"` : ""} ${mEnd ? `marker-end="${mEnd}"` : ""}`;
-    g.innerHTML = `<line x1="${coords.x1}" y1="${coords.y1}" x2="${coords.x2}" y2="${coords.y2}"
-      stroke="currentColor" stroke-width="${l.strokeWidth}" ${dash} ${mAttr} />`;
-    return g;
-  }
-  if (baseEl.type === "arrow") {
-    const a = state;
-    const coords = resolveArrowCoords(a, snap2, byId);
-    if (!coords) return null;
-    const g = makeG(baseEl.id, 0, 0, 0);
-    g.style.color = a.stroke;
-    const dash = a.strokeDasharray ? `stroke-dasharray="${a.strokeDasharray}"` : "";
-    const midX = (coords.x1 + coords.x2) / 2;
-    const midY = (coords.y1 + coords.y2) / 2;
-    const isCurved = (a.curvature || 0) !== 0;
-    const mStart = markerUrlFor(a.headStart ?? "none", "start");
-    const mEnd = markerUrlFor(a.headEnd ?? "arrow", "end");
-    const mAttr = `${mStart ? `marker-start="${mStart}"` : ""} ${mEnd ? `marker-end="${mEnd}"` : ""}`;
-    let pathHtml;
-    if (isCurved) {
-      const dx = coords.x2 - coords.x1;
-      const dy = coords.y2 - coords.y1;
-      const len = Math.hypot(dx, dy) || 1;
-      const nx = -dy / len;
-      const ny = dx / len;
-      const cpx = midX + nx * (a.curvature ?? 0);
-      const cpy = midY + ny * (a.curvature ?? 0);
-      pathHtml = `<path d="M ${coords.x1} ${coords.y1} Q ${cpx} ${cpy} ${coords.x2} ${coords.y2}" fill="none" stroke="currentColor" stroke-width="${a.strokeWidth}" ${dash} ${mAttr} />`;
-    } else {
-      pathHtml = `<line x1="${coords.x1}" y1="${coords.y1}" x2="${coords.x2}" y2="${coords.y2}" stroke="currentColor" stroke-width="${a.strokeWidth}" ${dash} ${mAttr} />`;
-    }
-    g.innerHTML = `
-      ${pathHtml}
-      ${a.label ? `<g>
-        <rect x="${midX - 80}" y="${midY - 11}" width="160" height="22" rx="4" fill="white" stroke="currentColor" stroke-opacity="0.4"/>
-        <text x="${midX}" y="${midY + 4}" text-anchor="middle" font-size="12" font-family="ui-monospace, monospace" fill="${a.labelColor}">${escapeXml(a.label)}</text>
-      </g>` : ""}
-    `;
-    return g;
-  }
-  if (baseEl.type === "text") {
-    const t = state;
-    const g = makeG(baseEl.id, rotation, t.x, t.y);
-    g.innerHTML = `<text x="${t.x}" y="${t.y}" font-size="${t.fontSize}" font-weight="${t.fontWeight}"
-      fill="${t.color}" text-anchor="${t.textAnchor}">${escapeXml(t.content)}</text>`;
-    return g;
-  }
-  if (baseEl.type === "image") {
-    const i = state;
-    const cx = i.x + i.width / 2;
-    const cy = i.y + i.height / 2;
-    const g = makeG(baseEl.id, rotation, cx, cy);
-    const resolved = resolveAsset(i.assetId, getDef()?.assets ?? {});
-    const href = resolved.status === "resolved" ? resolved.href ?? "" : "";
-    g.innerHTML = href ? `<image href="${escapeXml(href)}" x="${i.x}" y="${i.y}" width="${i.width}"
-      height="${i.height}" preserveAspectRatio="${i.preserveAspectRatio}" opacity="${i.opacity}" />` : `<rect x="${i.x}" y="${i.y}" width="${i.width}" height="${i.height}" fill="none"
-      stroke="currentColor" stroke-width="1" stroke-dasharray="4 4" opacity="0.4" />`;
-    return g;
-  }
-  if (baseEl.type === "path") {
-    const p = state;
-    const g = makeG(baseEl.id, rotation, p.x, p.y);
-    const dash = p.strokeDasharray ? `stroke-dasharray="${p.strokeDasharray}"` : "";
-    const xform = p.x || p.y ? `transform="translate(${p.x} ${p.y})"` : "";
-    g.innerHTML = `<path d="${escapeXml(p.d)}" fill="${p.fill}" stroke="${p.stroke}" stroke-width="${p.strokeWidth}" ${dash} opacity="${p.opacity}" ${xform} pointer-events="all" />`;
-    return g;
-  }
-  if (baseEl.type === "polygon") {
-    const pg = state;
-    const g = makeG(baseEl.id, rotation, 0, 0);
-    g.innerHTML = `<polygon points="${escapeXml(pg.points)}" fill="${pg.fill}" stroke="${pg.stroke}" stroke-width="${pg.strokeWidth}" opacity="${pg.opacity}" pointer-events="all" />`;
-    return g;
-  }
-  return null;
-}
-function showPreview2(def) {
-  showPreview(canvasEl, def);
-}
-function hidePreview2() {
-  hidePreview(canvasEl);
-}
-
-// src/legacy/element-list.ts
-var listEl = null;
-var toolsRootEl = null;
-var searchEl = null;
-var dragSourceId = null;
-function initElementList(root, toolsRoot) {
-  listEl = root;
-  toolsRootEl = toolsRoot;
-  searchEl = document.getElementById(
-    "studio-element-search"
-  );
-  subscribe(render2);
-  root.addEventListener("click", onClick);
-  root.addEventListener("dragstart", onDragStart);
-  root.addEventListener("dragover", onDragOver);
-  root.addEventListener("dragleave", onDragLeave);
-  root.addEventListener("drop", onDrop);
-  root.addEventListener("dragend", onDragEnd);
-  toolsRootEl?.addEventListener("click", onToolsClick);
-  searchEl?.addEventListener("input", render2);
-  searchEl?.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && searchEl) {
-      searchEl.value = "";
-      render2();
-    }
-  });
-  render2();
-}
-function escapeHtml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function friendlyElementLabel(el) {
-  const e = el;
-  const visible = e.name?.trim() || e.label?.trim() || e.content?.trim();
-  return visible ? visible : el.id;
-}
-function matchesSearch(el, query) {
-  if (!query) return true;
-  const e = el;
-  const haystack = [el.id, el.type, e.name, e.label, e.content].filter(Boolean).join(" ").toLowerCase();
-  return haystack.includes(query);
-}
-function render2() {
-  if (!listEl) return;
-  const def = getDef();
-  if (!def || def.elements.length === 0) {
-    listEl.innerHTML = '<li style="color: var(--color-fg-muted); padding: 0.4rem;">\uC694\uC18C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.</li>';
-    return;
+    const tempLine = document.createElementNS(SVG_NS, "line");
+    tempLine.setAttribute("x1", String(connectState.startX));
+    tempLine.setAttribute("y1", String(connectState.startY));
+    tempLine.setAttribute("x2", String(connectState.currentX));
+    tempLine.setAttribute("y2", String(connectState.currentY));
+    tempLine.setAttribute("stroke", "#6366f1");
+    tempLine.setAttribute("stroke-width", "2");
+    tempLine.setAttribute("stroke-dasharray", "5 3");
+    tempLine.setAttribute("marker-end", "url(#studio-arrow)");
+    tempLine.style.pointerEvents = "none";
+    canvasEl.appendChild(tempLine);
   }
-  const sel = getSelection();
-  const query = searchEl?.value.trim().toLowerCase() ?? "";
-  const allReversed = [...def.elements].reverse();
-  const items = query ? allReversed.filter((el) => matchesSearch(el, query)) : allReversed;
-  const multiHint = sel.kind === "elements" ? `<div class="studio-element-list-hint">\uB2E4\uC911 \uC120\uD0DD: ${sel.elementIds.length}\uAC1C (Shift+\uD074\uB9AD\uC73C\uB85C \uCD94\uAC00/\uD574\uC81C)</div>` : "";
-  const filterHint = query ? `<div class="studio-element-list-hint">\uAC80\uC0C9 "${escapeHtml(query)}" \xB7 ${items.length}/${def.elements.length} \uC77C\uCE58 \xB7 Esc = \uC9C0\uC6B0\uAE30</div>` : `<div class="studio-element-list-hint">\uC704 = \uC55E\uCABD (z-index \u2191) \xB7 Shift+\uD074\uB9AD = \uB2E4\uC911 \uC120\uD0DD</div>`;
-  const emptyMsg = query && items.length === 0 ? `<li style="color: var(--color-fg-muted); padding: 0.4rem; font-size:0.78rem;">"${escapeHtml(query)}" \uC77C\uCE58 \uC5C6\uC74C</li>` : "";
-  listEl.innerHTML = filterHint + multiHint + emptyMsg + items.map((el) => {
-    const isSel = isElementSelected(sel, el.id);
-    const label = friendlyElementLabel(el);
-    const subId = label !== el.id ? `<span class="studio-element-list-item-sub">${escapeHtml(el.id)}</span>` : "";
-    return `<li class="studio-element-list-item ${isSel ? "is-selected" : ""}" data-elem-id="${escapeHtml(el.id)}" draggable="true">
-          <span class="studio-element-grip" aria-hidden="true">\u22EE\u22EE</span>
-          <span class="studio-element-list-item-label">${escapeHtml(label)} <span class="studio-element-list-item-type">${escapeHtml(el.type)}</span>${subId}</span>
-          <button type="button" class="studio-element-list-delete" data-delete title="\uC0AD\uC81C">\u2715</button>
-        </li>`;
-  }).join("");
-}
-function onClick(e) {
-  const target = e.target;
-  const li = target.closest(".studio-element-list-item");
-  if (!li) return;
-  const id = li.dataset.elemId ?? "";
-  if (target.closest("[data-delete]")) {
-    deleteElement(id);
-    return;
+  if (toolDrawState) {
+    const preview = document.createElementNS(SVG_NS, "line");
+    preview.setAttribute("x1", String(toolDrawState.startX));
+    preview.setAttribute("y1", String(toolDrawState.startY));
+    preview.setAttribute("x2", String(toolDrawState.currentX));
+    preview.setAttribute("y2", String(toolDrawState.currentY));
+    preview.setAttribute("stroke", "#6366f1");
+    preview.setAttribute("stroke-width", "2");
+    preview.setAttribute("stroke-dasharray", "5 3");
+    preview.style.pointerEvents = "none";
+    canvasEl.appendChild(preview);
   }
-  const me = e;
-  if (me.shiftKey || me.ctrlKey || me.metaKey) {
-    const sel = getSelection();
-    setSelection(toggleSelectionFor(sel, id));
-    return;
+  if (elementDrawState) {
+    const bounds = dragBounds(elementDrawState.start, elementDrawState.current);
+    const preview = document.createElementNS(
+      SVG_NS,
+      elementDrawState.tool === "circle" ? "circle" : elementDrawState.tool === "polygon" ? "polygon" : "rect"
+    );
+    if (elementDrawState.tool === "circle") {
+      preview.setAttribute("cx", String(bounds.centerX));
+      preview.setAttribute("cy", String(bounds.centerY));
+      preview.setAttribute("r", String(Math.max(2, bounds.distance / 2)));
+    } else if (elementDrawState.tool === "polygon") {
+      preview.setAttribute(
+        "points",
+        regularPolygonPoints(
+          { x: bounds.centerX, y: bounds.centerY },
+          Math.max(2, bounds.distance / 2),
+          elementDrawState.polygonSides
+        )
+      );
+    } else {
+      preview.setAttribute("x", String(bounds.x));
+      preview.setAttribute("y", String(bounds.y));
+      preview.setAttribute("width", String(Math.max(1, bounds.width)));
+      preview.setAttribute("height", String(Math.max(1, bounds.height)));
+    }
+    preview.setAttribute("fill", "rgba(99, 102, 241, 0.12)");
+    preview.setAttribute("stroke", "#6366f1");
+    preview.setAttribute("stroke-width", "2");
+    preview.setAttribute("stroke-dasharray", "5 3");
+    preview.style.pointerEvents = "none";
+    canvasEl.appendChild(preview);
   }
-  setSelection({ kind: "element", elementId: id });
-}
-function onDragStart(e) {
-  const li = e.target.closest(
-    ".studio-element-list-item"
-  );
-  if (!li) return;
-  dragSourceId = li.dataset.elemId ?? null;
-  if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/plain", dragSourceId ?? "");
+  if (pathDraftState) {
+    const points = [
+      ...pathDraftState.points,
+      ...pathDraftState.current ? [pathDraftState.current] : []
+    ];
+    const preview = document.createElementNS(SVG_NS, "polyline");
+    preview.setAttribute(
+      "points",
+      points.map((point) => `${point.x},${point.y}`).join(" ")
+    );
+    preview.setAttribute("fill", "none");
+    preview.setAttribute("stroke", "#6366f1");
+    preview.setAttribute("stroke-width", "2");
+    preview.setAttribute("stroke-dasharray", "5 3");
+    preview.style.pointerEvents = "none";
+    canvasEl.appendChild(preview);
+    for (const point of pathDraftState.points) {
+      const anchor = document.createElementNS(SVG_NS, "circle");
+      anchor.setAttribute("cx", String(point.x));
+      anchor.setAttribute("cy", String(point.y));
+      anchor.setAttribute("r", "4");
+      anchor.setAttribute("fill", "#fff");
+      anchor.setAttribute("stroke", "#6366f1");
+      anchor.setAttribute("stroke-width", "2");
+      anchor.style.pointerEvents = "none";
+      canvasEl.appendChild(anchor);
+    }
+  }
+  if (marqueeState) {
+    const mx = Math.min(marqueeState.startX, marqueeState.currentX);
+    const my = Math.min(marqueeState.startY, marqueeState.currentY);
+    const mw = Math.abs(marqueeState.currentX - marqueeState.startX);
+    const mh = Math.abs(marqueeState.currentY - marqueeState.startY);
+    if (mw > 0 || mh > 0) {
+      const marqueeRect = document.createElementNS(SVG_NS, "rect");
+      marqueeRect.setAttribute("x", String(mx));
+      marqueeRect.setAttribute("y", String(my));
+      marqueeRect.setAttribute("width", String(mw));
+      marqueeRect.setAttribute("height", String(mh));
+      marqueeRect.setAttribute("fill", "rgba(99, 102, 241, 0.08)");
+      marqueeRect.setAttribute("stroke", "#6366f1");
+      marqueeRect.setAttribute("stroke-width", "1");
+      marqueeRect.setAttribute("stroke-dasharray", "4 3");
+      marqueeRect.style.pointerEvents = "none";
+      canvasEl.appendChild(marqueeRect);
+    }
   }
-  li.classList.add("is-dragging");
-}
-function onDragOver(e) {
-  if (!dragSourceId) return;
-  e.preventDefault();
-  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-  const li = e.target.closest(
-    ".studio-element-list-item"
-  );
-  listEl?.querySelectorAll(".is-drop-above, .is-drop-below").forEach((n) => n.classList.remove("is-drop-above", "is-drop-below"));
-  if (!li) return;
-  const rect = li.getBoundingClientRect();
-  const upper = e.clientY < rect.top + rect.height / 2;
-  li.classList.add(upper ? "is-drop-above" : "is-drop-below");
-}
-function onDragLeave(e) {
-  const li = e.target.closest(
-    ".studio-element-list-item"
-  );
-  li?.classList.remove("is-drop-above", "is-drop-below");
-}
-function onDrop(e) {
-  if (!dragSourceId) return;
-  e.preventDefault();
-  const li = e.target.closest(
-    ".studio-element-list-item"
-  );
-  if (!li) return;
-  const targetId = li.dataset.elemId ?? "";
-  if (!targetId || targetId === dragSourceId) return;
-  const rect = li.getBoundingClientRect();
-  const upper = e.clientY < rect.top + rect.height / 2;
-  const positionInVisualList = upper ? "before" : "after";
-  const positionInDefArray = positionInVisualList === "before" ? "after" : "before";
-  reorderElement(dragSourceId, targetId, positionInDefArray);
-  dragSourceId = null;
-}
-function onDragEnd() {
-  dragSourceId = null;
-  listEl?.querySelectorAll(".is-drop-above, .is-drop-below, .is-dragging").forEach(
-    (n) => n.classList.remove("is-drop-above", "is-drop-below", "is-dragging")
-  );
 }
-function onToolsClick(e) {
-  const target = e.target;
-  const btn = target.closest("[data-add-element]");
-  if (!btn) return;
-  const type = btn.dataset.addElement;
-  if (!type) return;
+function findSnapTarget(x, y, excludeElementId) {
   const def = getDef();
-  if (!def) return;
-  const cx = def.canvas.width / 2;
-  const cy = def.canvas.height / 2;
-  const id = uniqueElementId(type);
-  const elem = makeDefaultElement(type, id, cx, cy);
-  if (elem) addElement(elem);
-}
-function makeDefaultElement(type, id, cx, cy) {
-  switch (type) {
-    case "rect":
-      return {
-        type: "rect",
-        id,
-        rotation: 0,
-        appearances: [],
-        tracks: [],
-        x: cx - 60,
-        y: cy - 30,
-        width: 120,
-        height: 60,
-        fill: "#a5b4fc",
-        stroke: "#6366f1",
-        strokeWidth: 1.5,
-        cornerRadius: 8,
-        label: id,
-        labelColor: "#0b0b0f",
-        labelSize: 14
-      };
-    case "circle":
-      return {
-        type: "circle",
-        id,
-        rotation: 0,
-        appearances: [],
-        tracks: [],
-        cx,
-        cy,
-        r: 36,
-        fill: "#a5b4fc",
-        stroke: "#6366f1",
-        strokeWidth: 1.5,
-        label: id,
-        labelColor: "#0b0b0f",
-        labelSize: 14
-      };
-    case "line":
-      return {
-        type: "line",
-        id,
-        rotation: 0,
-        appearances: [],
-        tracks: [],
-        x1: cx - 80,
-        y1: cy,
-        x2: cx + 80,
-        y2: cy,
-        stroke: "#6366f1",
-        strokeWidth: 2,
-        headStart: "none",
-        headEnd: "none"
-      };
-    case "arrow":
-      return {
-        type: "arrow",
-        id,
-        rotation: 0,
-        appearances: [],
-        tracks: [],
-        x1: cx - 100,
-        y1: cy,
-        x2: cx + 100,
-        y2: cy,
-        stroke: "#6366f1",
-        strokeWidth: 2,
-        curvature: 0,
-        labelColor: "#0b0b0f",
-        labelOffsetX: 0,
-        labelOffsetY: 4,
-        headStart: "none",
-        headEnd: "arrow"
-      };
-    case "text":
-      return {
-        type: "text",
-        id,
-        rotation: 0,
-        appearances: [],
-        tracks: [],
-        x: cx,
-        y: cy,
-        content: id,
-        fontSize: 18,
-        fontWeight: 400,
-        color: "#18181b",
-        textAnchor: "middle"
-      };
-    case "image":
-      return {
-        type: "image",
-        id,
-        rotation: 0,
-        appearances: [],
-        tracks: [],
-        x: cx - 50,
-        y: cy - 50,
-        width: 100,
-        height: 100,
-        assetId: registerExternalAsset(placeholderImageUrl()),
-        preserveAspectRatio: "xMidYMid meet",
-        opacity: 1
-      };
-    case "path":
-      return {
-        type: "path",
-        id,
-        rotation: 0,
-        appearances: [],
-        tracks: [],
-        x: cx - 40,
-        y: cy - 40,
-        d: "M 0 0 L 80 0 L 40 80 Z",
-        fill: "#a5b4fc",
-        stroke: "#6366f1",
-        strokeWidth: 2,
-        opacity: 1
-      };
-    case "polygon": {
-      const r = 40;
-      const sides = 6;
-      const pts = Array.from({ length: sides }, (_, i) => {
-        const a = i * Math.PI * 2 / sides - Math.PI / 2;
-        return `${(cx + r * Math.cos(a)).toFixed(1)},${(cy + r * Math.sin(a)).toFixed(1)}`;
-      }).join(" ");
-      return {
-        type: "polygon",
-        id,
-        rotation: 0,
-        appearances: [],
-        tracks: [],
-        points: pts,
-        fill: "#a5b4fc",
-        stroke: "#6366f1",
-        strokeWidth: 1.5,
-        opacity: 1
-      };
+  if (!def) return null;
+  const snap2 = getCurrentSnapshot();
+  const allAnchors = [];
+  for (const baseEl of def.elements) {
+    if (baseEl.id === excludeElementId) continue;
+    if (baseEl.type === "line" || baseEl.type === "arrow") continue;
+    const state = snap2.get(baseEl.id);
+    if (!state || !state.visible) continue;
+    const points = getAnchorPoints(baseEl, state);
+    allAnchors.push(...points);
+  }
+  const nearest = findNearestAnchor({ x, y }, allAnchors, SNAP_RADIUS);
+  if (!nearest) return null;
+  return {
+    elementId: nearest.elementId,
+    anchor: nearest.anchor,
+    x: nearest.x,
+    y: nearest.y
+  };
+}
+function renderGroupOutline(groupId) {
+  const box = groupBbox(groupId);
+  if (!box) return null;
+  const g = document.createElementNS(SVG_NS, "g");
+  g.setAttribute("data-elem-id", groupId);
+  const pad = 6;
+  const x = box.x - pad;
+  const y = box.y - pad;
+  const w = box.w + pad * 2;
+  const h = box.h + pad * 2;
+  const thickness = 8;
+  g.innerHTML = `
+    <rect x="${x}" y="${y}" width="${w}" height="${h}"
+      fill="none" stroke="var(--color-accent)" stroke-width="2" stroke-dasharray="6 4" rx="4" pointer-events="none" />
+    <rect x="${x - thickness}" y="${y - thickness}" width="${w + thickness * 2}" height="${thickness * 2}"
+      fill="rgba(0,0,0,0.0001)" style="cursor: move" pointer-events="all" />
+    <rect x="${x - thickness}" y="${y + h - thickness}" width="${w + thickness * 2}" height="${thickness * 2}"
+      fill="rgba(0,0,0,0.0001)" style="cursor: move" pointer-events="all" />
+    <rect x="${x - thickness}" y="${y}" width="${thickness * 2}" height="${h}"
+      fill="rgba(0,0,0,0.0001)" style="cursor: move" pointer-events="all" />
+    <rect x="${x + w - thickness}" y="${y}" width="${thickness * 2}" height="${h}"
+      fill="rgba(0,0,0,0.0001)" style="cursor: move" pointer-events="all" />
+  `;
+  return g;
+}
+function makeG(elementId, rotation, cx, cy) {
+  const g = document.createElementNS(SVG_NS, "g");
+  g.setAttribute("data-elem-id", elementId);
+  g.classList.add("element-handle");
+  if (rotation) g.setAttribute("transform", `rotate(${rotation} ${cx} ${cy})`);
+  return g;
+}
+function renderElement(baseEl, state, snap2, byId) {
+  const rotation = state.rotation || 0;
+  if (baseEl.type === "rect") {
+    const r = state;
+    const cx = r.x + r.width / 2;
+    const cy = r.y + r.height / 2;
+    const g = makeG(baseEl.id, rotation, cx, cy);
+    g.innerHTML = `
+      <rect x="${r.x}" y="${r.y}" width="${r.width}" height="${r.height}" rx="${r.cornerRadius}"
+        fill="${r.fill}" stroke="${r.stroke}" stroke-width="${r.strokeWidth}" />
+      ${r.label ? `<text x="${cx}" y="${cy + 5}" text-anchor="middle"
+        font-size="${r.labelSize}" font-weight="600" fill="${r.labelColor}">${escapeXml(r.label)}</text>` : ""}
+      ${r.subtitle ? `<text x="${cx}" y="${cy + r.labelSize + 8}"
+        text-anchor="middle" font-size="10" fill="${r.labelColor}" opacity="0.7">${escapeXml(r.subtitle)}</text>` : ""}
+    `;
+    return g;
+  }
+  if (baseEl.type === "circle") {
+    const c = state;
+    const g = makeG(baseEl.id, rotation, c.cx, c.cy);
+    g.innerHTML = `
+      <circle cx="${c.cx}" cy="${c.cy}" r="${c.r}" fill="${c.fill}" stroke="${c.stroke}"
+        stroke-width="${c.strokeWidth}" />
+      ${c.label ? `<text x="${c.cx}" y="${c.cy + 5}" text-anchor="middle"
+        font-size="${c.labelSize}" font-weight="600" fill="${c.labelColor}">${escapeXml(c.label)}</text>` : ""}
+    `;
+    return g;
+  }
+  if (baseEl.type === "line") {
+    const l = state;
+    const coords = resolveLineCoords(l, snap2, byId);
+    if (!coords) return null;
+    const g = makeG(baseEl.id, 0, 0, 0);
+    g.style.color = l.stroke;
+    const dash = l.strokeDasharray ? `stroke-dasharray="${l.strokeDasharray}"` : "";
+    const mStart = markerUrlFor(l.headStart, "start");
+    const mEnd = markerUrlFor(l.headEnd, "end");
+    const mAttr = `${mStart ? `marker-start="${mStart}"` : ""} ${mEnd ? `marker-end="${mEnd}"` : ""}`;
+    g.innerHTML = `<line x1="${coords.x1}" y1="${coords.y1}" x2="${coords.x2}" y2="${coords.y2}"
+      stroke="currentColor" stroke-width="${l.strokeWidth}" ${dash} ${mAttr} />`;
+    return g;
+  }
+  if (baseEl.type === "arrow") {
+    const a = state;
+    const coords = resolveArrowCoords(a, snap2, byId);
+    if (!coords) return null;
+    const g = makeG(baseEl.id, 0, 0, 0);
+    g.style.color = a.stroke;
+    const dash = a.strokeDasharray ? `stroke-dasharray="${a.strokeDasharray}"` : "";
+    const midX = (coords.x1 + coords.x2) / 2;
+    const midY = (coords.y1 + coords.y2) / 2;
+    const isCurved = (a.curvature || 0) !== 0;
+    const mStart = markerUrlFor(a.headStart ?? "none", "start");
+    const mEnd = markerUrlFor(a.headEnd ?? "arrow", "end");
+    const mAttr = `${mStart ? `marker-start="${mStart}"` : ""} ${mEnd ? `marker-end="${mEnd}"` : ""}`;
+    let pathHtml;
+    if (isCurved) {
+      const dx = coords.x2 - coords.x1;
+      const dy = coords.y2 - coords.y1;
+      const len = Math.hypot(dx, dy) || 1;
+      const nx = -dy / len;
+      const ny = dx / len;
+      const cpx = midX + nx * (a.curvature ?? 0);
+      const cpy = midY + ny * (a.curvature ?? 0);
+      pathHtml = `<path d="M ${coords.x1} ${coords.y1} Q ${cpx} ${cpy} ${coords.x2} ${coords.y2}" fill="none" stroke="currentColor" stroke-width="${a.strokeWidth}" ${dash} ${mAttr} />`;
+    } else {
+      pathHtml = `<line x1="${coords.x1}" y1="${coords.y1}" x2="${coords.x2}" y2="${coords.y2}" stroke="currentColor" stroke-width="${a.strokeWidth}" ${dash} ${mAttr} />`;
     }
-    default:
-      return null;
+    g.innerHTML = `
+      ${pathHtml}
+      ${a.label ? `<g>
+        <rect x="${midX - 80}" y="${midY - 11}" width="160" height="22" rx="4" fill="white" stroke="currentColor" stroke-opacity="0.4"/>
+        <text x="${midX}" y="${midY + 4}" text-anchor="middle" font-size="12" font-family="ui-monospace, monospace" fill="${a.labelColor}">${escapeXml(a.label)}</text>
+      </g>` : ""}
+    `;
+    return g;
   }
+  if (baseEl.type === "text") {
+    const t = state;
+    const g = makeG(baseEl.id, rotation, t.x, t.y);
+    g.innerHTML = `<text x="${t.x}" y="${t.y}" font-size="${t.fontSize}" font-weight="${t.fontWeight}"
+      fill="${t.color}" text-anchor="${t.textAnchor}">${escapeXml(t.content)}</text>`;
+    return g;
+  }
+  if (baseEl.type === "image") {
+    const i = state;
+    const cx = i.x + i.width / 2;
+    const cy = i.y + i.height / 2;
+    const g = makeG(baseEl.id, rotation, cx, cy);
+    const resolved = resolveAsset(i.assetId, getDef()?.assets ?? {});
+    const href = resolved.status === "resolved" ? resolved.href ?? "" : "";
+    g.innerHTML = href ? `<image href="${escapeXml(href)}" x="${i.x}" y="${i.y}" width="${i.width}"
+      height="${i.height}" preserveAspectRatio="${i.preserveAspectRatio}" opacity="${i.opacity}" />` : `<rect x="${i.x}" y="${i.y}" width="${i.width}" height="${i.height}" fill="none"
+      stroke="currentColor" stroke-width="1" stroke-dasharray="4 4" opacity="0.4" />`;
+    return g;
+  }
+  if (baseEl.type === "path") {
+    const p = state;
+    const g = makeG(baseEl.id, rotation, p.x, p.y);
+    const dash = p.strokeDasharray ? `stroke-dasharray="${p.strokeDasharray}"` : "";
+    const xform = p.x || p.y ? `transform="translate(${p.x} ${p.y})"` : "";
+    g.innerHTML = `<path d="${escapeXml(p.d)}" fill="${p.fill}" stroke="${p.stroke}" stroke-width="${p.strokeWidth}" ${dash} opacity="${p.opacity}" ${xform} pointer-events="all" />`;
+    return g;
+  }
+  if (baseEl.type === "polygon") {
+    const pg = state;
+    const g = makeG(baseEl.id, rotation, 0, 0);
+    g.innerHTML = `<polygon points="${escapeXml(pg.points)}" fill="${pg.fill}" stroke="${pg.stroke}" stroke-width="${pg.strokeWidth}" opacity="${pg.opacity}" pointer-events="all" />`;
+    return g;
+  }
+  return null;
+}
+function showPreview2(def, options) {
+  showPreview(canvasEl, def, options);
+}
+function hidePreview2() {
+  hidePreview(canvasEl);
 }
 
 // src/legacy/studio-focus.ts
@@ -2438,6 +2832,17 @@ function renderInner() {
         "\uBAA9\uCC28 \uD45C\uC2DC (chapter list)",
         "settings.showChapterList",
         def.settings.showChapterList ?? false
+      ),
+      selectField(
+        "\uBAA9\uCC28 \uC704\uCE58",
+        "settings.chapterListPosition",
+        def.settings.chapterListPosition ?? "right",
+        [
+          { value: "left", label: "\uC88C\uCE21" },
+          { value: "right", label: "\uC6B0\uCE21" },
+          { value: "top", label: "\uC0C1\uB2E8" },
+          { value: "bottom", label: "\uD558\uB2E8" }
+        ]
       )
     ].join("");
     panelEl.innerHTML = `
@@ -2612,6 +3017,14 @@ function renderBaseFields(el) {
     numberFields.push({ label: "cy", key: "cy", value: e.cy });
     numberFields.push({ label: "r", key: "r", value: e.r });
   }
+  if (el.type === "polygon") {
+    const pointCount = String(e.points ?? "").trim().split(/\s+/).filter(Boolean).length;
+    numberFields.push({
+      label: "\uBCC0 \uAC1C\uC218",
+      key: "polygonSides",
+      value: pointCount
+    });
+  }
   if (el.type === "line" || el.type === "arrow") {
     if (typeof e.x1 === "number") {
       numberFields.push({ label: "x1", key: "x1", value: e.x1 });
@@ -2757,12 +3170,25 @@ function onInput(e) {
   if (!key) return;
   if (target.type === "text" && e.isComposing) return;
   if (target.type === "text" && isComposingFallback) return;
+  if (target.type === "color") {
+    const textInput = target.parentElement?.querySelector(
+      `input[type="text"][data-prop-key="${CSS.escape(key)}"]`
+    );
+    if (textInput) textInput.value = target.value;
+    return;
+  }
   let value = target.value;
   if (target.type === "number") value = Number(target.value);
   else if (target.type === "checkbox") value = target.checked;
   apply(key, value);
 }
 function onChange(e) {
+  const target = e.target;
+  if (target instanceof HTMLInputElement && target.type === "color") {
+    const key = target.dataset.propKey;
+    if (key) apply(key, target.value);
+    return;
+  }
   onInput(e);
 }
 function apply(key, value) {
@@ -2784,11 +3210,33 @@ function apply(key, value) {
     updateSettings({ showCaption: Boolean(value) });
   else if (key === "settings.showChapterList")
     updateSettings({ showChapterList: Boolean(value) });
+  else if (key === "settings.chapterListPosition")
+    updateSettings({
+      chapterListPosition: String(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);
     if (!el) 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;
+      const minX = Math.min(...points.map(([x]) => x));
+      const maxX = Math.max(...points.map(([x]) => x));
+      const minY = Math.min(...points.map(([, y]) => y));
+      const maxY = Math.max(...points.map(([, y]) => y));
+      const cx = (minX + maxX) / 2;
+      const cy = (minY + maxY) / 2;
+      const radius = Math.max(4, Math.max(maxX - minX, maxY - minY) / 2);
+      const sides = Math.max(3, Math.min(24, Math.round(Number(value)) || 3));
+      const next = Array.from({ length: sides }, (_, index) => {
+        const angle = index * Math.PI * 2 / sides - Math.PI / 2;
+        return `${(cx + radius * Math.cos(angle)).toFixed(1)},${(cy + radius * Math.sin(angle)).toFixed(1)}`;
+      }).join(" ");
+      updateElementBase(sel.elementId, { points: next });
+      return;
+    }
     const hasTrack = el.tracks.some((t) => t.property === prop);
     if (hasTrack) {
       setTrackKeyframe(sel.elementId, prop, time, value);
@@ -2959,6 +3407,20 @@ try {
 } catch {
 }
 var dragMode = null;
+var boundDocuments = /* @__PURE__ */ new WeakMap();
+function bindTimelinePointerDocument(doc) {
+  const existing = boundDocuments.get(doc);
+  if (existing) return existing;
+  doc.addEventListener("mousemove", onMouseMove2);
+  doc.addEventListener("mouseup", onMouseUp2);
+  const cleanup = () => {
+    doc.removeEventListener("mousemove", onMouseMove2);
+    doc.removeEventListener("mouseup", onMouseUp2);
+    boundDocuments.delete(doc);
+  };
+  boundDocuments.set(doc, cleanup);
+  return cleanup;
+}
 function initTimeline(tracksRoot, addChapterBtn, elementTracks) {
   tracksEl = tracksRoot;
   elTracksEl = elementTracks;
@@ -2968,8 +3430,7 @@ function initTimeline(tracksRoot, addChapterBtn, elementTracks) {
   tracksRoot.addEventListener("mousedown", onMouseDown2);
   elementTracks.addEventListener("click", onElTracksClick);
   elementTracks.addEventListener("mousedown", onMouseDown2);
-  document.addEventListener("mousemove", onMouseMove2);
-  document.addEventListener("mouseup", onMouseUp2);
+  bindTimelinePointerDocument(document);
   addBtn?.addEventListener("click", () => {
     const id = uniqueChapterId();
     const def = getDef();
@@ -3029,9 +3490,15 @@ function mirrorScroll(source, target) {
 }
 function showDragTooltip(clientX, clientY, text) {
   if (!dragTooltipEl) {
-    dragTooltipEl = document.createElement("div");
+    const ownerDocument = tracksEl?.ownerDocument ?? document;
+    dragTooltipEl = ownerDocument.createElement("div");
     dragTooltipEl.className = "studio-tl-drag-tooltip";
-    document.body.appendChild(dragTooltipEl);
+    ownerDocument.body.appendChild(dragTooltipEl);
+  } else if (tracksEl && dragTooltipEl.ownerDocument !== tracksEl.ownerDocument) {
+    dragTooltipEl.remove();
+    dragTooltipEl = null;
+    showDragTooltip(clientX, clientY, text);
+    return;
   }
   dragTooltipEl.textContent = text;
   dragTooltipEl.style.left = `${clientX + 14}px`;
@@ -3110,7 +3577,20 @@ function renderElementTracks(elements, currentTime, totalPx, sel) {
     elTracksEl.innerHTML = '<p class="studio-tl-empty">\uC694\uC18C \uC5C6\uC74C</p>';
     return;
   }
+  const byId = new Map(elements.map((element) => [element.id, element]));
+  const depthOf = (element) => {
+    let depth = 0;
+    let parentId = element.parentId;
+    const seen = /* @__PURE__ */ new Set();
+    while (parentId && !seen.has(parentId)) {
+      seen.add(parentId);
+      depth += 1;
+      parentId = byId.get(parentId)?.parentId;
+    }
+    return depth;
+  };
   const rows = elements.map((el) => {
+    const depth = depthOf(el);
     const isSel = sel.kind === "element" && sel.elementId === el.id || sel.kind === "elements" && sel.elementIds.includes(el.id);
     const appearanceBars = el.appearances.map((ap, idx) => {
       const left = timeToPx(ap.start);
@@ -3127,8 +3607,8 @@ function renderElementTracks(elements, currentTime, totalPx, sel) {
       (kf) => `<div class="studio-tl-keyframe" style="left:${timeToPx(kf.time)}px" data-kf-elem-id="${escapeHtml3(el.id)}" data-kf-prop="${escapeHtml3(kf.prop)}" data-kf-time="${kf.time}" title="${escapeHtml3(kf.prop)} @ ${kf.time}ms (\uB4DC\uB798\uADF8\uB85C \uC774\uB3D9)">\u25C6</div>`
     ).join("");
     return `
-        <div class="studio-tl-row studio-tl-element-row ${isSel ? "is-selected" : ""}" data-elem-id="${escapeHtml3(el.id)}">
-          <div class="studio-tl-gutter studio-tl-element-label" title="${escapeHtml3(el.id)}">${escapeHtml3(gutterLabel(el))}</div>
+        <div class="studio-tl-row studio-tl-element-row ${isSel ? "is-selected" : ""} ${el.type === "group" ? "is-group" : ""}" data-elem-id="${escapeHtml3(el.id)}">
+          <div class="studio-tl-gutter studio-tl-element-label" style="--studio-tree-depth:${depth}" title="${escapeHtml3(el.id)}">${el.type === "group" ? "\u25BE " : depth > 0 ? "\u21B3 " : ""}${escapeHtml3(gutterLabel(el))}</div>
           <div class="studio-tl-body" style="width:${totalPx}px">
             <div class="studio-tl-element-track" data-tl-area="elements">
               ${appearanceBars}
@@ -14852,10 +15332,10 @@ async function uploadAndInsertImage(file, host) {
   }
   try {
     host.setStatus("\uC774\uBBF8\uC9C0 \uCC98\uB9AC \uC911\u2026");
-    const dataUrl = await readAsDataUrl(file);
+    const source = host.resolveImage ? await host.resolveImage(file) : await readAsDataUrl(file);
     const cx = def.canvas.width / 2;
     const cy = def.canvas.height / 2;
-    const tempImg = await loadImageSize(dataUrl);
+    const tempImg = await loadImageSize(source);
     const maxDim = Math.min(def.canvas.width, def.canvas.height) * 0.5;
     let w = tempImg?.w ?? 200;
     let h = tempImg?.h ?? 200;
@@ -14875,7 +15355,7 @@ async function uploadAndInsertImage(file, host) {
       y: Math.round(cy - h / 2),
       width: w,
       height: h,
-      assetId: registerDataUriAsset(dataUrl),
+      assetId: source.startsWith("data:") ? registerDataUriAsset(source) : registerExternalAsset(source),
       preserveAspectRatio: "xMidYMid meet",
       opacity: 1
     });
@@ -14944,7 +15424,12 @@ function escapeHtml5(s) {
 function startDraft() {
   const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[-:.TZ]/g, "").slice(0, 14);
   const id = `draft-${stamp}`;
-  const def = animationDocumentSchema.parse({ id, title: "", description: "" });
+  const def = animationDocumentSchema.parse({
+    clothoVersion: 1,
+    id,
+    title: "",
+    description: ""
+  });
   setDraft(def);
 }
 async function openLibrary(ui) {
@@ -15372,6 +15857,9 @@ function queryUi() {
   const idDisplay = $("studio-id-display");
   const status = $("studio-status");
   const saveBtn = $("studio-save");
+  const exportBtn = $("studio-export-json");
+  const importBtn = $("studio-import-json");
+  const importFileInput = $("studio-import-file");
   const deleteBtn = $("studio-delete");
   const newBtn = $("studio-new");
   const openBtn = $("studio-open");
@@ -15379,6 +15867,8 @@ function queryUi() {
   const restartBtn = $("studio-restart");
   const speedInput = $("studio-speed");
   const speedValue = $("studio-speed-value");
+  const previewLoopInput = $("studio-preview-loop");
+  const detachTimelineBtn = $("studio-detach-timeline");
   const canvas = document.getElementById(
     "studio-canvas"
   );
@@ -15404,7 +15894,7 @@ function queryUi() {
   const undoBtn = $("studio-undo");
   const redoBtn = $("studio-redo");
   const gridToggleBtn = $("studio-grid-toggle");
-  if (!titleInput || !idDisplay || !status || !saveBtn || !deleteBtn || !newBtn || !openBtn || !playBtn || !restartBtn || !speedInput || !speedValue || !canvas || !elementList || !toolsRoot || !propsRoot || !timelineTracks || !elementTracks || !addStepBtn || !libraryDialog || !libraryList || !newDialog || !newIdInput || !newTitleInput || !newCreateBtn || !newError || !canvasWidthInput || !canvasHeightInput || !imageUploadBtn || !imageFileInput || !helpBtn || !helpDialog || !undoBtn || !redoBtn || !gridToggleBtn) {
+  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) {
     return null;
   }
   return {
@@ -15413,6 +15903,9 @@ function queryUi() {
     idDisplay,
     status,
     saveBtn,
+    exportBtn,
+    importBtn,
+    importFileInput,
     deleteBtn,
     newBtn,
     openBtn,
@@ -15420,6 +15913,8 @@ function queryUi() {
     restartBtn,
     speedInput,
     speedValue,
+    previewLoopInput,
+    detachTimelineBtn,
     canvas,
     elementList,
     toolsRoot,
@@ -15455,39 +15950,59 @@ function startInlineTextEdit(canvas, el) {
     "foreignObject"
   );
   fo.setAttribute("data-inline-text-editor", "");
-  fo.setAttribute("x", String(el.x - 8));
-  fo.setAttribute("y", String(el.y - fontSize));
-  const width = Math.max(160, (el.content?.length ?? 5) * fontSize * 0.7);
+  const width = Math.max(80, (el.content?.length ?? 5) * fontSize * 0.7 + 20);
+  const anchor = el.textAnchor ?? "start";
+  const x = anchor === "middle" ? el.x - width / 2 : anchor === "end" ? el.x - width : el.x;
+  fo.setAttribute("x", String(x));
+  fo.setAttribute("y", String(el.y - fontSize * 1.15));
   fo.setAttribute("width", String(width));
-  fo.setAttribute("height", String(fontSize * 1.6));
-  const input = document.createElement("input");
-  input.type = "text";
-  input.value = el.content ?? "";
-  Object.assign(input.style, {
+  fo.setAttribute("height", String(fontSize * 1.8));
+  const renderedText = Array.from(
+    canvas.querySelectorAll("[data-elem-id]")
+  ).find((node) => node.dataset.elemId === el.id);
+  const previousVisibility = renderedText?.style.visibility ?? "";
+  if (renderedText) renderedText.style.visibility = "hidden";
+  const editor = document.createElement("div");
+  editor.contentEditable = "true";
+  editor.spellcheck = false;
+  editor.textContent = el.content ?? "";
+  editor.setAttribute("role", "textbox");
+  editor.setAttribute("aria-label", "\uD14D\uC2A4\uD2B8 \uB0B4\uC6A9 \uD3B8\uC9D1");
+  Object.assign(editor.style, {
     width: "100%",
     height: "100%",
     boxSizing: "border-box",
-    border: "2px solid #6366f1",
-    borderRadius: "4px",
-    background: "rgba(255, 255, 255, 0.96)",
-    padding: "0 6px",
+    border: "0",
+    borderBottom: "2px solid #6366f1",
+    background: "color-mix(in srgb, Canvas 82%, transparent)",
+    padding: "0 2px",
     font: `${el.fontWeight ?? 400} ${fontSize}px ui-sans-serif,system-ui,sans-serif`,
     color: el.color ?? "#0f172a",
     outline: "none",
-    boxShadow: "0 0 0 3px rgba(99, 102, 241, 0.2)"
+    whiteSpace: "pre",
+    overflow: "hidden"
   });
-  fo.appendChild(input);
+  fo.appendChild(editor);
   canvas.appendChild(fo);
   requestAnimationFrame(() => {
-    input.focus();
-    input.select();
+    editor.focus();
+    const range = document.createRange();
+    range.selectNodeContents(editor);
+    range.collapse(false);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
   });
   let settled = false;
+  const restoreRenderedText = () => {
+    if (renderedText) renderedText.style.visibility = previousVisibility;
+  };
   const commit = () => {
     if (settled) return;
     settled = true;
-    const newContent = input.value;
+    const newContent = editor.textContent ?? "";
     fo.remove();
+    restoreRenderedText();
     if (newContent !== el.content) {
       updateElementBase(el.id, { content: newContent });
     }
@@ -15496,16 +16011,17 @@ function startInlineTextEdit(canvas, el) {
     if (settled) return;
     settled = true;
     fo.remove();
+    restoreRenderedText();
   };
   let isComposingFallback2 = false;
-  input.addEventListener("compositionstart", () => {
+  editor.addEventListener("compositionstart", () => {
     isComposingFallback2 = true;
   });
-  input.addEventListener("compositionend", () => {
+  editor.addEventListener("compositionend", () => {
     isComposingFallback2 = false;
   });
-  input.addEventListener("blur", commit);
-  input.addEventListener("keydown", (e) => {
+  editor.addEventListener("blur", commit);
+  editor.addEventListener("keydown", (e) => {
     if (e.isComposing || isComposingFallback2) return;
     if (e.key === "Enter") {
       e.preventDefault();
@@ -15642,7 +16158,12 @@ function togglePlay(ui) {
   if (playState === "playing") {
     stopPreview(ui);
   } else {
-    showPreview2(def);
+    showPreview2(def, {
+      loop: ui.previewLoopInput.checked,
+      speed: Number(ui.speedInput.value),
+      onTime: setCurrentTime,
+      onEnd: () => stopPreview(ui)
+    });
     playState = "playing";
     ui.playBtn.textContent = "\u23F9 Stop";
   }
@@ -15832,9 +16353,12 @@ function bindKeyboardShortcuts(ui) {
     const inText = e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLElement && e.target.isContentEditable;
     const mod = e.metaKey || e.ctrlKey;
     if (e.key === "Escape") {
-      const sel = getSelection();
-      if (sel.kind !== "none") {
-        setSelection({ kind: "none" });
+      if (!inText) {
+        setActiveTool("select");
+        const sel = getSelection();
+        if (sel.kind !== "none") {
+          setSelection({ kind: "none" });
+        }
       }
       return;
     }
@@ -15899,6 +16423,16 @@ function bindKeyboardShortcuts(ui) {
       if (selectAdjacentElement(e.shiftKey ? -1 : 1)) e.preventDefault();
       return;
     }
+    const shortcutTool = toolForShortcut(e.key, {
+      isEditing: inText,
+      modifierKey: mod,
+      altKey: e.altKey
+    });
+    if (shortcutTool) {
+      e.preventDefault();
+      setActiveTool(shortcutTool);
+      return;
+    }
     if (!inText && !mod && (e.key === "g" || e.key === "G")) {
       e.preventDefault();
       setGridEnabled(!isGridEnabled());
@@ -16002,8 +16536,176 @@ function bindKeyboardShortcuts(ui) {
   });
 }
 
+// src/legacy/popup-document.ts
+function prepareStudioPopupDocument(popupDocument, sourceDocument, sourceApp, options) {
+  popupDocument.open();
+  popupDocument.write(
+    `<!doctype html><html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>${escapeHtml8(options.title)}</title></head><body class="editor-active ${escapeHtml8(options.bodyClass)}"></body></html>`
+  );
+  popupDocument.close();
+  const base = popupDocument.createElement("base");
+  base.href = sourceDocument.baseURI;
+  popupDocument.head.prepend(base);
+  for (const source of sourceDocument.querySelectorAll(
+    'link[rel="stylesheet"], style'
+  )) {
+    popupDocument.head.appendChild(source.cloneNode(true));
+  }
+  const computed = getComputedStyle(sourceApp);
+  const target = popupDocument.documentElement.style;
+  for (let index = 0; index < computed.length; index += 1) {
+    const property = computed.item(index);
+    if (property.startsWith("--")) {
+      target.setProperty(property, computed.getPropertyValue(property));
+    }
+  }
+}
+function escapeHtml8(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/legacy/timeline-popout.ts
+var POPUP_FEATURES = "popup=yes,width=1200,height=620";
+function setupTimelinePopout(ui, _togglePlayback) {
+  const timeline = ui.detachTimelineBtn.closest(
+    ".studio-timeline-wrap"
+  );
+  if (!timeline) return;
+  let popup = null;
+  let placeholder = null;
+  let closeTimer = null;
+  let unbindPopupPointerEvents = null;
+  let restoring = false;
+  const restoreTimeline = (closePopup) => {
+    if (restoring) return;
+    restoring = true;
+    if (placeholder?.parentNode) {
+      placeholder.parentNode.insertBefore(timeline, placeholder.nextSibling);
+      placeholder.remove();
+    }
+    placeholder = null;
+    unbindPopupPointerEvents?.();
+    unbindPopupPointerEvents = null;
+    if (closeTimer !== null) window.clearInterval(closeTimer);
+    closeTimer = null;
+    ui.app.classList.remove("is-timeline-detached");
+    ui.detachTimelineBtn.setAttribute("aria-pressed", "false");
+    ui.detachTimelineBtn.textContent = "\u25A3 \uD0C0\uC784\uB77C\uC778 \uBD84\uB9AC";
+    const windowToClose = popup;
+    popup = null;
+    if (closePopup && windowToClose && !windowToClose.closed) {
+      windowToClose.close();
+    }
+    restoring = false;
+  };
+  ui.detachTimelineBtn.addEventListener("click", () => {
+    if (popup && !popup.closed) {
+      restoreTimeline(true);
+      return;
+    }
+    const opened = window.open("", "_blank", POPUP_FEATURES);
+    if (!opened) {
+      ui.status.textContent = "\uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C popup\uC744 \uD5C8\uC6A9\uD574\uC8FC\uC138\uC694.";
+      return;
+    }
+    popup = opened;
+    placeholder = document.createComment("clotho-timeline-home");
+    timeline.before(placeholder);
+    prepareStudioPopupDocument(opened.document, document, ui.app, {
+      title: "Clotho Timeline",
+      bodyClass: "studio-timeline-popout"
+    });
+    opened.document.body.appendChild(timeline);
+    unbindPopupPointerEvents = bindTimelinePointerDocument(opened.document);
+    opened.addEventListener("beforeunload", () => restoreTimeline(false), {
+      once: true
+    });
+    closeTimer = window.setInterval(() => {
+      if (!popup || popup.closed) restoreTimeline(false);
+    }, 500);
+    ui.app.classList.add("is-timeline-detached");
+    ui.detachTimelineBtn.setAttribute("aria-pressed", "true");
+    ui.detachTimelineBtn.textContent = "\u2199 \uD3B8\uC9D1\uAE30\uC5D0 \uB2E4\uC2DC \uD569\uCE58\uAE30";
+    opened.focus();
+  });
+}
+
+// src/legacy/player-popout.ts
+function setupPlayerPopout(ui) {
+  const button = document.getElementById(
+    "studio-player-preview"
+  );
+  if (!button) return;
+  let popup = null;
+  let playerHandle = null;
+  let unsubscribe = null;
+  let renderedDocument = getDef();
+  const cleanup = () => {
+    playerHandle?.destroy();
+    playerHandle = null;
+    unsubscribe?.();
+    unsubscribe = null;
+    popup = null;
+    button.setAttribute("aria-pressed", "false");
+  };
+  const render5 = async () => {
+    const targetWindow = popup;
+    const def = getDef();
+    if (!targetWindow || targetWindow.closed || !def) return;
+    const container = targetWindow.document.getElementById(
+      "clotho-player-preview"
+    );
+    if (!container) return;
+    playerHandle?.destroy();
+    container.replaceChildren();
+    const { mountPlayer, koreanStrings } = await import('@kokoa/clotho/dom');
+    if (!popup || popup !== targetWindow || targetWindow.closed) return;
+    playerHandle = mountPlayer(container, def, {
+      strings: koreanStrings,
+      player: {
+        autoplay: def.settings.autoplay,
+        loop: def.settings.loop
+      }
+    });
+    renderedDocument = def;
+  };
+  button.addEventListener("click", () => {
+    if (popup && !popup.closed) {
+      popup.focus();
+      return;
+    }
+    const def = getDef();
+    if (!def) {
+      ui.status.textContent = "\uBA3C\uC800 \uC560\uB2C8\uBA54\uC774\uC158\uC744 \uC5F4\uAC70\uB098 \uB9CC\uB4E4\uC5B4\uC8FC\uC138\uC694.";
+      return;
+    }
+    const opened = window.open("", "_blank", "popup=yes,width=1100,height=760");
+    if (!opened) {
+      ui.status.textContent = "\uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C popup\uC744 \uD5C8\uC6A9\uD574\uC8FC\uC138\uC694.";
+      return;
+    }
+    popup = opened;
+    prepareStudioPopupDocument(opened.document, document, ui.app, {
+      title: `${def.title || def.id} \xB7 \uC2E4\uC81C \uBBF8\uB9AC\uBCF4\uAE30`,
+      bodyClass: "studio-player-popout"
+    });
+    const container = opened.document.createElement("main");
+    container.id = "clotho-player-preview";
+    opened.document.body.appendChild(container);
+    button.setAttribute("aria-pressed", "true");
+    renderedDocument = def;
+    void render5();
+    unsubscribe = subscribe(() => {
+      const next = getDef();
+      if (next !== renderedDocument) void render5();
+    });
+    opened.addEventListener("beforeunload", cleanup, { once: true });
+    opened.focus();
+  });
+}
+
 // src/legacy/main.ts
-function initStudio(opts) {
+function initStudio(opts = {}) {
   const ui = queryUi();
   if (!ui) {
     console.error("[studio] missing required elements");
@@ -16011,6 +16713,9 @@ function initStudio(opts) {
   }
   document.body.classList.add("editor-active");
   document.documentElement.classList.add("editor-active");
+  const editorTitle = document.getElementById("studio-editor-title");
+  if (editorTitle)
+    editorTitle.textContent = opts.editorTitle ?? "Clotho Editor";
   initGrid();
   reflectGridUi(ui);
   subscribeGrid(() => reflectGridUi(ui));
@@ -16040,7 +16745,8 @@ function initStudio(opts) {
   });
   const imageHost = {
     app: ui.app,
-    setStatus: (text, kind) => setStatus(ui, text, kind)
+    setStatus: (text, kind) => setStatus(ui, text, kind),
+    resolveImage: opts.resolveImage
   };
   ui.imageUploadBtn.addEventListener("click", () => ui.imageFileInput.click());
   ui.imageFileInput.addEventListener("change", () => {
@@ -16141,6 +16847,29 @@ function initStudio(opts) {
     { id: "help", label: "\u2328 \uB2E8\uCD95\uD0A4 \uBCF4\uAE30", hint: "? / Shift+/", run: openHelp }
   ]);
   ui.saveBtn.addEventListener("click", () => void saveCurrent(ui));
+  ui.exportBtn.addEventListener("click", () => {
+    const def = getDef();
+    if (!def) return;
+    downloadAnimationJson(def);
+    setStatus(ui, `${def.id}.json \uD30C\uC77C\uC744 \uB0B4\uB824\uBC1B\uC558\uC2B5\uB2C8\uB2E4.`, "ok");
+  });
+  ui.importBtn.addEventListener("click", () => ui.importFileInput.click());
+  ui.importFileInput.addEventListener("change", () => {
+    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) => {
+      setDef(def);
+      markClean();
+      setStatus(ui, `${def.id}.json \uD30C\uC77C\uC744 \uAC00\uC838\uC654\uC2B5\uB2C8\uB2E4.`, "ok");
+    }).catch((error) => {
+      setStatus(
+        ui,
+        `JSON \uAC00\uC838\uC624\uAE30 \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`,
+        "error"
+      );
+    });
+  });
   ui.deleteBtn.addEventListener("click", () => void deleteCurrent(ui));
   ui.undoBtn.addEventListener("click", () => undo());
   ui.redoBtn.addEventListener("click", () => redo());
@@ -16157,7 +16886,20 @@ function initStudio(opts) {
   });
   ui.speedInput.addEventListener("input", () => {
     ui.speedValue.textContent = Number(ui.speedInput.value).toFixed(2) + "x";
+    if (isPlaying()) {
+      stopPreview(ui);
+      togglePlay(ui);
+    }
   });
+  ui.previewLoopInput.addEventListener("change", () => {
+    updateSettings({ loop: ui.previewLoopInput.checked });
+    if (isPlaying()) {
+      stopPreview(ui);
+      togglePlay(ui);
+    }
+  });
+  setupTimelinePopout(ui);
+  setupPlayerPopout(ui);
   ui.newCreateBtn.addEventListener("click", () => void createNew(ui));
   document.addEventListener("click", (e) => {
     const closer = e.target.closest(
@@ -16169,11 +16911,15 @@ function initStudio(opts) {
     dialog.close();
     if (dialog === ui.newDialog) dialog.removeAttribute("data-mode");
   });
+  document.addEventListener("click", (e) => {
+    const dialog = e.target;
+    if (dialog instanceof HTMLDialogElement && dialog.open) dialog.close();
+  });
   bindKeyboardShortcuts(ui);
   window.addEventListener("beforeunload", (e) => {
     if (isDirty()) e.preventDefault();
   });
-  if (opts?.initialId) {
+  if (opts.initialId) {
     void loadAnimation2(ui, opts.initialId);
   } else if (!getDef()) {
     startDraft();
@@ -16187,6 +16933,9 @@ function reflectState(ui) {
   ui.redoBtn.disabled = !canRedo();
   const def = getDef();
   if (def) {
+    ui.titleInput.disabled = false;
+    ui.canvasWidthInput.disabled = false;
+    ui.canvasHeightInput.disabled = false;
     if (document.activeElement !== ui.titleInput) {
       ui.titleInput.value = def.title;
     }
@@ -16198,17 +16947,25 @@ function reflectState(ui) {
     }
     ui.idDisplay.textContent = isDraft() ? "Draft" : def.id ?? "";
     ui.saveBtn.disabled = false;
+    ui.exportBtn.disabled = false;
     ui.deleteBtn.disabled = isDraft();
+    if (document.activeElement !== ui.previewLoopInput) {
+      ui.previewLoopInput.checked = def.settings.loop;
+    }
   } else {
+    ui.titleInput.disabled = true;
+    ui.canvasWidthInput.disabled = true;
+    ui.canvasHeightInput.disabled = true;
     ui.titleInput.value = "";
     ui.canvasWidthInput.value = "";
     ui.canvasHeightInput.value = "";
     ui.idDisplay.textContent = "";
     ui.saveBtn.disabled = true;
+    ui.exportBtn.disabled = true;
     ui.deleteBtn.disabled = true;
   }
 }
 
 export { getVisibleElementIds, initStudio };
-//# sourceMappingURL=main-SWHHYTLM.js.map
-//# sourceMappingURL=main-SWHHYTLM.js.map
+//# sourceMappingURL=main-5YXLTYPQ.js.map
+//# sourceMappingURL=main-5YXLTYPQ.js.map