@kokoa/clotho-editor 0.1.1 → 0.1.4

package/dist/{main-SWHHYTLM.js → main-NCPWDB2U.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, updateLocales, updateDuration, updateAppearance, updateEffect, childIdsOf } from './chunk-GMGB7NIL.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,1694 +431,2077 @@ 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) {
-    const id = node.getAttribute?.("data-elem-id");
-    if (id) return id;
-    node = node.parentElement;
+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,
+        translations: {},
+        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;
   }
-  return null;
 }
-function onCanvasClick(e) {
-  if (dragState || rotateState || connectState) return;
-  if (marqueeJustFinished) {
-    marqueeJustFinished = false;
-    return;
-  }
-  const target = e.target;
-  const addVertexHandle = target?.closest("[data-vertex-add]");
-  if (addVertexHandle) {
-    e.preventDefault();
-    e.stopPropagation();
-    const id2 = addVertexHandle.dataset.elemId ?? "";
-    const afterIdx = Number(addVertexHandle.dataset.afterIndex ?? "-1");
-    const def = getDef();
-    if (!def || afterIdx < 0) return;
-    const el = def.elements.find((x) => x.id === id2);
-    if (!el || el.type !== "polygon") return;
-    const snap2 = getCurrentSnapshot();
-    const state = snap2.get(id2);
-    if (!state) return;
-    const points = String(state.points ?? "").trim().split(/\s+/);
-    const a = points[afterIdx]?.split(",").map(Number) ?? [];
-    const b = points[(afterIdx + 1) % points.length]?.split(",").map(Number) ?? [];
-    if (a.length !== 2 || b.length !== 2) return;
-    const mx = (a[0] + b[0]) / 2;
-    const my = (a[1] + b[1]) / 2;
-    points.splice(afterIdx + 1, 0, `${mx.toFixed(1)},${my.toFixed(1)}`);
-    setElementValueAtTime(id2, { points: points.join(" ") });
-    return;
-  }
-  if (target?.closest(
-    "[data-rotate-handle], [data-anchor-handle], [data-resize-handle]"
-  ))
-    return;
-  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 });
-    }
-  } else if (e.target === canvasEl) setSelection({ kind: "none" });
+
+// 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 onMouseDown(e) {
-  if (e.button !== 0) return;
-  const target = e.target;
-  const def = getDef();
-  if (!def) return;
-  if (target?.closest("[data-vertex-add]")) {
-    e.preventDefault();
-    e.stopPropagation();
-    return;
-  }
-  const resizeHandle = target?.closest("[data-resize-handle]");
-  if (resizeHandle) {
-    e.preventDefault();
-    const id2 = resizeHandle.dataset.elemId ?? "";
-    const handle = resizeHandle.dataset.resizeHandle;
-    const snap3 = getCurrentSnapshot();
-    const elState2 = snap3.get(id2);
-    const baseEl2 = def.elements.find((x) => x.id === id2);
-    if (!elState2 || !baseEl2) return;
-    const rs = {
-      elementId: id2,
-      handle,
-      startMouseX: e.clientX,
-      startMouseY: e.clientY,
-      startX: 0,
-      startY: 0,
-      startW: 0,
-      startH: 0,
-      aspect: 1
+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
     };
-    if (baseEl2.type === "rect" || baseEl2.type === "image") {
-      rs.startX = elState2.x;
-      rs.startY = elState2.y;
-      rs.startW = elState2.width;
-      rs.startH = elState2.height;
-      rs.aspect = rs.startW / Math.max(1, rs.startH);
-    } else if (baseEl2.type === "circle") {
-      rs.startCx = elState2.cx;
-      rs.startCy = elState2.cy;
-      rs.startR = elState2.r;
-    } else if (baseEl2.type === "text") {
-      const bbox = textBBoxOnCanvas(canvasEl, id2);
-      rs.startX = bbox?.x ?? elState2.x;
-      rs.startY = bbox?.y ?? elState2.y;
-      rs.startW = bbox?.w ?? 100;
-      rs.startH = bbox?.h ?? elState2.fontSize;
-      rs.startFontSize = elState2.fontSize;
-      rs.aspect = rs.startW / Math.max(1, rs.startH);
-    } else {
-      return;
-    }
-    resizeState = rs;
-    setSelection({ kind: "element", elementId: id2 });
-    render();
-    return;
-  }
-  const vertexHandle = target?.closest("[data-vertex-handle]");
-  if (vertexHandle) {
-    e.preventDefault();
-    const id2 = vertexHandle.dataset.elemId ?? "";
-    const vi = Number(vertexHandle.dataset.vertexIndex ?? "-1");
-    const snap3 = getCurrentSnapshot();
-    const elState2 = snap3.get(id2);
-    if (!elState2 || vi < 0) return;
-    vertexDragState = {
-      elementId: id2,
-      vertexIndex: vi,
-      originalPoints: String(elState2.points ?? "")
+  } else if (baseEl.type === "circle") {
+    const r = state.r;
+    box = {
+      x: state.cx - r,
+      y: state.cy - r,
+      w: r * 2,
+      h: r * 2
     };
-    setSelection({ kind: "element", elementId: id2 });
-    render();
-    return;
+    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 endpointHandle = target?.closest("[data-endpoint-handle]");
-  if (endpointHandle) {
-    e.preventDefault();
-    const id2 = endpointHandle.dataset.elemId ?? "";
-    const end = endpointHandle.dataset.endpointHandle === "end" ? "end" : "start";
-    const pt = svgPoint(e.clientX, e.clientY);
-    if (!pt) return;
-    endpointDragState = {
-      elementId: id2,
-      end,
-      currentX: pt.x,
-      currentY: pt.y,
-      snapTarget: null
-    };
-    setSelection({ kind: "element", elementId: id2 });
-    render();
-    return;
+  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})`);
   }
-  const midHandle = target?.closest("[data-line-mid-handle]");
-  if (midHandle) {
-    e.preventDefault();
-    const id2 = midHandle.dataset.elemId ?? "";
-    const snap3 = getCurrentSnapshot();
-    const elState2 = snap3.get(id2);
-    const baseEl2 = def.elements.find((x) => x.id === id2);
-    if (!elState2 || !baseEl2) return;
-    const anchor2 = readPositionAnchor(baseEl2, elState2);
-    if (!anchor2) return;
-    dragState = {
-      elementId: id2,
-      startMouseX: e.clientX,
-      startMouseY: e.clientY,
-      startElemX: anchor2.x,
-      startElemY: anchor2.y,
-      extras: collectDragExtras(id2, def, snap3)
-    };
-    if (!isElementSelected(getSelection(), id2)) {
-      setSelection({ kind: "element", elementId: id2 });
-    }
-    return;
+  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;
   }
-  const rotateHandle = target?.closest("[data-rotate-handle]");
-  if (rotateHandle) {
-    e.preventDefault();
-    const id2 = rotateHandle.dataset.rotateHandle ?? "";
-    const snap3 = getCurrentSnapshot();
-    const state = snap3.get(id2);
-    const baseEl2 = def.elements.find((x) => x.id === id2);
-    if (!state || !baseEl2) return;
-    const center = centerOfElement(baseEl2, state);
-    if (!center) return;
-    const pt = svgPoint(e.clientX, e.clientY);
-    if (!pt) return;
-    const startAngle = Math.atan2(pt.y - center.y, pt.x - center.x) * 180 / Math.PI;
-    rotateState = {
-      elementId: id2,
-      centerX: center.x,
-      centerY: center.y,
-      startAngle,
-      startRotation: state.rotation || 0
-    };
-    return;
+  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" />`;
   }
-  const anchorHandle = target?.closest("[data-anchor-handle]");
-  if (anchorHandle) {
-    e.preventDefault();
-    const fromId = anchorHandle.dataset.elemId ?? "";
-    const fromAnchor = anchorHandle.dataset.anchor ?? "auto";
-    const pt = svgPoint(e.clientX, e.clientY);
-    if (!pt) return;
-    connectState = {
-      fromId,
-      fromAnchor,
-      startX: Number(anchorHandle.getAttribute("cx")) || pt.x,
-      startY: Number(anchorHandle.getAttribute("cy")) || pt.y,
-      currentX: pt.x,
-      currentY: pt.y
-    };
-    render();
-    return;
+  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 rawId = findElementId(e.target);
-  if (!rawId) {
-    if (!e.shiftKey && e.target === canvasEl) {
-      const pt = svgPoint(e.clientX, e.clientY);
-      if (pt) {
-        marqueeState = {
-          startX: pt.x,
-          startY: pt.y,
-          currentX: pt.x,
-          currentY: pt.y
-        };
-      }
+  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>`;
     }
-    return;
-  }
-  const id = e.altKey ? rawId : findContainingGroup(rawId)?.id ?? rawId;
-  const snap2 = getCurrentSnapshot();
-  const elState = snap2.get(id);
-  const baseEl = def.elements.find((x) => x.id === id);
-  if (!elState || !baseEl) return;
-  if ((baseEl.type === "arrow" || baseEl.type === "line") && baseEl.fromId && baseEl.toId) {
-    setSelection({ kind: "element", elementId: id });
-    return;
   }
-  const anchor = readPositionAnchor(baseEl, elState);
-  if (!anchor) return;
-  dragState = {
-    elementId: id,
-    startMouseX: e.clientX,
-    startMouseY: e.clientY,
-    startElemX: anchor.x,
-    startElemY: anchor.y,
-    originalPolygonPoints: baseEl.type === "polygon" ? String(elState.points ?? "") : void 0,
-    extras: collectDragExtras(id, def, snap2)
-  };
-  if (!isElementSelected(getSelection(), id)) {
-    setSelection({ kind: "element", elementId: id });
+  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 collectDragExtras(anchorId, def, snap2) {
-  if (!def) return [];
-  const sel = getSelection();
-  const ids = getSelectedElementIds(sel).filter((id) => id !== anchorId);
-  const extras = [];
-  for (const id of ids) {
-    const el = def.elements.find((x) => x.id === id);
-    const st = snap2.get(id);
-    if (!el || !st) continue;
-    const a = readPositionAnchor(el, st);
-    if (!a) continue;
-    extras.push({
-      id,
-      startX: a.x,
-      startY: a.y,
-      originalPolygonPoints: el.type === "polygon" ? String(st.points ?? "") : void 0
-    });
+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" />`;
+      }
+    }
   }
-  return extras;
+  g.innerHTML = html;
+  return g;
 }
-function onMouseMove(e) {
-  if (resizeState) {
-    handleResizeMove(e);
-    return;
+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 (vertexDragState) {
-    const pt = svgPoint(e.clientX, e.clientY);
-    if (!pt) return;
-    const pts = vertexDragState.originalPoints.trim().split(/\s+/);
-    if (vertexDragState.vertexIndex < pts.length) {
-      pts[vertexDragState.vertexIndex] = `${pt.x.toFixed(1)},${pt.y.toFixed(1)}`;
-      setElementValueAtTime(vertexDragState.elementId, {
-        points: pts.join(" ")
-      });
+  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
     }
-    return;
+  });
+  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;
   }
-  if (endpointDragState) {
-    const pt = svgPoint(e.clientX, e.clientY);
-    if (!pt) return;
-    endpointDragState.currentX = pt.x;
-    endpointDragState.currentY = pt.y;
-    endpointDragState.snapTarget = findSnapTarget(
-      pt.x,
-      pt.y,
-      endpointDragState.elementId
-    );
-    const def2 = getDef();
-    if (!def2) return;
-    const baseEl2 = def2.elements.find(
-      (x) => x.id === endpointDragState.elementId
+}
+
+// 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))
     );
-    if (!baseEl2) return;
-    const finalX = endpointDragState.snapTarget ? endpointDragState.snapTarget.x : pt.x;
-    const finalY = endpointDragState.snapTarget ? endpointDragState.snapTarget.y : pt.y;
-    if (baseEl2.type === "line" || baseEl2.type === "arrow") {
-      if (endpointDragState.snapTarget) {
-        if (endpointDragState.end === "start") {
-          setElementValueAtTime(baseEl2.id, {
-            fromId: endpointDragState.snapTarget.elementId,
-            fromAnchor: endpointDragState.snapTarget.anchor,
-            x1: void 0,
-            y1: void 0
-          });
-        } else {
-          setElementValueAtTime(baseEl2.id, {
-            toId: endpointDragState.snapTarget.elementId,
-            toAnchor: endpointDragState.snapTarget.anchor,
-            x2: void 0,
-            y2: void 0
-          });
-        }
-      } else {
-        if (endpointDragState.end === "start") {
-          updateElementBase(baseEl2.id, {
-            fromId: void 0,
-            fromAnchor: void 0,
-            x1: finalX,
-            y1: finalY
-          });
-        } else {
-          updateElementBase(baseEl2.id, {
-            toId: void 0,
-            toAnchor: void 0,
-            x2: finalX,
-            y2: finalY
-          });
-        }
-      }
-    }
-    render();
-    return;
-  }
-  if (rotateState) {
-    const pt = svgPoint(e.clientX, e.clientY);
-    if (!pt) return;
-    const angle = Math.atan2(pt.y - rotateState.centerY, pt.x - rotateState.centerX) * 180 / Math.PI;
-    const delta = angle - rotateState.startAngle;
-    setElementValueAtTime(rotateState.elementId, {
-      rotation: Math.round((rotateState.startRotation + delta + 360) % 360)
-    });
+    render2();
     return;
   }
-  if (connectState) {
-    const pt = svgPoint(e.clientX, e.clientY);
-    if (!pt) return;
-    connectState.currentX = pt.x;
-    connectState.currentY = pt.y;
-    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))
+  );
+  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();
   }
-  if (marqueeState) {
-    const pt = svgPoint(e.clientX, e.clientY);
-    if (!pt) return;
-    marqueeState.currentX = pt.x;
-    marqueeState.currentY = pt.y;
-    render();
-    return;
+}
+function onMouseLeave() {
+  if (hoveredElementId !== null) {
+    hoveredElementId = null;
+    render2();
   }
-  if (!dragState || !canvasEl) return;
+}
+function svgPoint(clientX, clientY) {
+  if (!canvasEl) return null;
   const def = getDef();
-  if (!def) return;
-  const baseEl = def.elements.find((x) => x.id === dragState.elementId);
-  if (!baseEl) return;
-  const svgRect = canvasEl.getBoundingClientRect();
-  const scaleX = def.canvas.width / svgRect.width;
-  const scaleY = def.canvas.height / svgRect.height;
-  const dx = (e.clientX - dragState.startMouseX) * scaleX;
-  const dy = (e.clientY - dragState.startMouseY) * scaleY;
-  const targetX = Math.round(dragState.startElemX + dx);
-  const targetY = Math.round(dragState.startElemY + dy);
-  const snap2 = getCurrentSnapshot();
-  const elState = snap2.get(dragState.elementId);
-  if (!elState) return;
-  applyMove(baseEl, elState, targetX, targetY);
-  for (const extra of dragState.extras) {
-    const eEl = def.elements.find((x) => x.id === extra.id);
-    const eState = snap2.get(extra.id);
-    if (!eEl || !eState) continue;
-    applyMove(
-      eEl,
-      eState,
-      Math.round(extra.startX + dx),
-      Math.round(extra.startY + dy),
-      extra.originalPolygonPoints
-    );
+  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;
   }
+  return null;
 }
-function onMouseUp(e) {
-  if (resizeState) {
-    resizeState = null;
-    render();
+function onCanvasClick(e) {
+  if (dragState || rotateState || connectState) return;
+  if (marqueeJustFinished) {
+    marqueeJustFinished = false;
+    return;
   }
-  if (vertexDragState) {
-    vertexDragState = null;
-    render();
+  if (toolJustFinished) {
+    toolJustFinished = false;
+    return;
   }
-  if (endpointDragState) {
-    endpointDragState = null;
-    render();
+  const target = e.target;
+  const addVertexHandle = target?.closest("[data-vertex-add]");
+  if (addVertexHandle) {
+    e.preventDefault();
+    e.stopPropagation();
+    const id2 = addVertexHandle.dataset.elemId ?? "";
+    const afterIdx = Number(addVertexHandle.dataset.afterIndex ?? "-1");
+    const def = getDef();
+    if (!def || afterIdx < 0) return;
+    const el = def.elements.find((x) => x.id === id2);
+    if (!el || el.type !== "polygon") return;
+    const snap2 = getCurrentSnapshot();
+    const state = snap2.get(id2);
+    if (!state) return;
+    const points = String(state.points ?? "").trim().split(/\s+/);
+    const a = points[afterIdx]?.split(",").map(Number) ?? [];
+    const b = points[(afterIdx + 1) % points.length]?.split(",").map(Number) ?? [];
+    if (a.length !== 2 || b.length !== 2) return;
+    const mx = (a[0] + b[0]) / 2;
+    const my = (a[1] + b[1]) / 2;
+    points.splice(afterIdx + 1, 0, `${mx.toFixed(1)},${my.toFixed(1)}`);
+    setElementValueAtTime(id2, { points: points.join(" ") });
+    return;
   }
-  if (connectState) {
-    const target = e.target;
-    const anchorHandle = target?.closest("[data-anchor-handle]");
-    const elemId = anchorHandle?.dataset.elemId ?? findElementId(e.target);
-    const toAnchor = anchorHandle?.dataset.anchor ?? "auto";
-    if (elemId && elemId !== connectState.fromId) {
-      const def = getDef();
-      if (def) {
-        const newId = uniqueElementId("arrow");
-        addElement({
-          type: "arrow",
-          id: newId,
-          rotation: 0,
-          appearances: [],
-          tracks: [],
-          fromId: connectState.fromId,
-          toId: elemId,
-          fromAnchor: connectState.fromAnchor,
-          toAnchor,
-          stroke: "#6366f1",
-          strokeWidth: 2,
-          curvature: 0,
-          labelColor: "#0b0b0f",
-          labelOffsetX: 0,
-          labelOffsetY: 4,
-          headStart: "none",
-          headEnd: "arrow"
-        });
+  if (target?.closest(
+    "[data-rotate-handle], [data-anchor-handle], [data-resize-handle]"
+  ))
+    return;
+  const id = findElementId(e.target);
+  if (id) {
+    const resolvedId = e.altKey ? id : findContainingGroup(id)?.id ?? id;
+    setActiveTool("select");
+    setSelection(nextPointerSelection(getSelection(), resolvedId, e));
+  } else if (e.target === canvasEl) setSelection({ kind: "none" });
+}
+function onMouseDown(e) {
+  if (e.button !== 0) return;
+  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;
     }
-    connectState = null;
-    render();
-  }
-  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);
-    marqueeState = null;
-    marqueeJustFinished = true;
-    if (mw > 0 && mh > 0) {
-      const def = getDef();
-      if (def) {
-        const snap2 = getCurrentSnapshot();
-        const marqueeBbox = { x: mx, y: my, w: mw, h: mh };
-        const matchedIds = [];
-        for (const el of def.elements) {
-          const state = snap2.get(el.id);
-          if (!state) continue;
-          const bbox = elementBBox(el, state);
-          if (bbox && intersectsMarquee(bbox, marqueeBbox)) {
-            matchedIds.push(el.id);
-          }
-        }
-        if (matchedIds.length === 1) {
-          setSelection({ kind: "element", elementId: matchedIds[0] });
-        } else if (matchedIds.length > 1) {
-          setSelection({ kind: "elements", elementIds: matchedIds });
-        } else {
-          setSelection({ kind: "none" });
-        }
-      }
+    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;
     }
-    render();
   }
-  dragState = null;
-  rotateState = null;
-}
-function applyMove(baseEl, state, x, y, polygonOriginal) {
-  if (baseEl.type === "rect" || baseEl.type === "image" || baseEl.type === "text") {
-    setElementValueAtTime(baseEl.id, { x, y });
-  } else if (baseEl.type === "circle") {
-    setElementValueAtTime(baseEl.id, { cx: x, cy: y });
-  } else if ((baseEl.type === "line" || baseEl.type === "arrow") && typeof state.x1 === "number" && typeof state.y1 === "number" && typeof state.x2 === "number" && typeof state.y2 === "number") {
-    const dx = x - state.x1;
-    const dy = y - state.y1;
-    setElementValueAtTime(baseEl.id, {
-      x1: x,
-      y1: y,
-      x2: state.x2 + dx,
-      y2: state.y2 + dy
-    });
-  } else if (baseEl.type === "path") {
-    setElementValueAtTime(baseEl.id, { x, y });
-  } else if (baseEl.type === "polygon") {
-    const orig = polygonOriginal ?? dragState?.originalPolygonPoints;
-    if (!orig) return;
-    const startFirst = firstPolygonPoint(orig);
-    if (!startFirst) return;
-    const dx = x - startFirst.x;
-    const dy = y - startFirst.y;
-    const newPoints = shiftPolygonPoints(orig, dx, dy);
-    setElementValueAtTime(baseEl.id, { points: newPoints });
-  } else if (baseEl.type === "group") {
-    const dx = x - baseEl.x;
-    const dy = y - baseEl.y;
-    moveGroupBy(baseEl.id, dx, dy);
+  if (activeTool2 !== "select" && !((activeTool2 === "line" || activeTool2 === "arrow") && target?.closest("[data-anchor-handle]"))) {
+    return;
   }
-}
-function readPositionAnchor(baseEl, state) {
-  if (baseEl.type === "rect" || baseEl.type === "image" || baseEl.type === "text") {
-    return { x: state.x, y: state.y };
+  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 (baseEl.type === "circle")
-    return { x: state.cx, y: state.cy };
-  if ((baseEl.type === "line" || baseEl.type === "arrow") && typeof state.x1 === "number") {
-    return { x: state.x1, y: state.y1 };
+  if (target?.closest("[data-vertex-add]")) {
+    e.preventDefault();
+    e.stopPropagation();
+    return;
   }
-  if (baseEl.type === "path")
-    return { x: state.x ?? 0, y: state.y ?? 0 };
-  if (baseEl.type === "polygon") {
-    const first = firstPolygonPoint(String(state.points ?? ""));
-    return first;
+  const resizeHandle = target?.closest("[data-resize-handle]");
+  if (resizeHandle && activeTool2 === "select") {
+    e.preventDefault();
+    const id2 = resizeHandle.dataset.elemId ?? "";
+    const handle = resizeHandle.dataset.resizeHandle;
+    const snap3 = getCurrentSnapshot();
+    const elState2 = snap3.get(id2);
+    const baseEl2 = def.elements.find((x) => x.id === id2);
+    if (!elState2 || !baseEl2) return;
+    const rs = {
+      elementId: id2,
+      handle,
+      startMouseX: e.clientX,
+      startMouseY: e.clientY,
+      startX: 0,
+      startY: 0,
+      startW: 0,
+      startH: 0,
+      aspect: 1
+    };
+    if (baseEl2.type === "rect" || baseEl2.type === "image") {
+      rs.startX = elState2.x;
+      rs.startY = elState2.y;
+      rs.startW = elState2.width;
+      rs.startH = elState2.height;
+      rs.aspect = rs.startW / Math.max(1, rs.startH);
+    } else if (baseEl2.type === "circle") {
+      rs.startCx = elState2.cx;
+      rs.startCy = elState2.cy;
+      rs.startR = elState2.r;
+    } else if (baseEl2.type === "text") {
+      const bbox = textBBoxOnCanvas(canvasEl, id2);
+      rs.startX = bbox?.x ?? elState2.x;
+      rs.startY = bbox?.y ?? elState2.y;
+      rs.startW = bbox?.w ?? 100;
+      rs.startH = bbox?.h ?? elState2.fontSize;
+      rs.startFontSize = elState2.fontSize;
+      rs.aspect = rs.startW / Math.max(1, rs.startH);
+    } else {
+      return;
+    }
+    resizeState = rs;
+    setSelection({ kind: "element", elementId: id2 });
+    render2();
+    return;
   }
-  if (baseEl.type === "group") {
-    return { x: baseEl.x, y: baseEl.y };
+  const vertexHandle = target?.closest("[data-vertex-handle]");
+  if (vertexHandle) {
+    e.preventDefault();
+    const id2 = vertexHandle.dataset.elemId ?? "";
+    const vi = Number(vertexHandle.dataset.vertexIndex ?? "-1");
+    const snap3 = getCurrentSnapshot();
+    const elState2 = snap3.get(id2);
+    if (!elState2 || vi < 0) return;
+    vertexDragState = {
+      elementId: id2,
+      vertexIndex: vi,
+      originalPoints: String(elState2.points ?? "")
+    };
+    setSelection({ kind: "element", elementId: id2 });
+    render2();
+    return;
   }
-  return null;
-}
-function elementBBox(baseEl, state) {
-  if (baseEl.type === "rect" || baseEl.type === "image") {
-    return {
-      x: state.x,
-      y: state.y,
-      w: state.width,
-      h: state.height
+  const endpointHandle = target?.closest("[data-endpoint-handle]");
+  if (endpointHandle) {
+    e.preventDefault();
+    const id2 = endpointHandle.dataset.elemId ?? "";
+    const end = endpointHandle.dataset.endpointHandle === "end" ? "end" : "start";
+    const pt = svgPoint(e.clientX, e.clientY);
+    if (!pt) return;
+    endpointDragState = {
+      elementId: id2,
+      end,
+      currentX: pt.x,
+      currentY: pt.y,
+      snapTarget: null
     };
+    setSelection({ kind: "element", elementId: id2 });
+    render2();
+    return;
   }
-  if (baseEl.type === "circle") {
-    const r = state.r;
-    return {
-      x: state.cx - r,
-      y: state.cy - r,
-      w: r * 2,
-      h: r * 2
+  const midHandle = target?.closest("[data-line-mid-handle]");
+  if (midHandle) {
+    e.preventDefault();
+    const id2 = midHandle.dataset.elemId ?? "";
+    const snap3 = getCurrentSnapshot();
+    const elState2 = snap3.get(id2);
+    const baseEl2 = def.elements.find((x) => x.id === id2);
+    if (!elState2 || !baseEl2) return;
+    const anchor2 = readPositionAnchor(baseEl2, elState2);
+    if (!anchor2) return;
+    dragState = {
+      elementId: id2,
+      startMouseX: e.clientX,
+      startMouseY: e.clientY,
+      startElemX: anchor2.x,
+      startElemY: anchor2.y,
+      extras: collectDragExtras(id2, def, snap3)
     };
+    if (!isElementSelected(getSelection(), id2)) {
+      setSelection({ kind: "element", elementId: id2 });
+    }
+    return;
   }
-  if (baseEl.type === "text") {
-    const bbox = textBBoxOnCanvas(canvasEl, baseEl.id);
-    if (bbox) return bbox;
-    return {
-      x: state.x,
-      y: state.y,
-      w: 100,
-      h: state.fontSize ?? 16
+  const rotateHandle = target?.closest("[data-rotate-handle]");
+  if (rotateHandle) {
+    e.preventDefault();
+    const id2 = rotateHandle.dataset.rotateHandle ?? "";
+    const snap3 = getCurrentSnapshot();
+    const state = snap3.get(id2);
+    const baseEl2 = def.elements.find((x) => x.id === id2);
+    if (!state || !baseEl2) return;
+    const center = centerOfElement(baseEl2, state);
+    if (!center) return;
+    const pt = svgPoint(e.clientX, e.clientY);
+    if (!pt) return;
+    const startAngle = Math.atan2(pt.y - center.y, pt.x - center.x) * 180 / Math.PI;
+    rotateState = {
+      elementId: id2,
+      centerX: center.x,
+      centerY: center.y,
+      startAngle,
+      startRotation: state.rotation || 0
     };
+    return;
   }
-  if (baseEl.type === "line" || baseEl.type === "arrow") {
-    const coords = baseEl.type === "line" ? resolveLineCoords(
-      state,
-      getCurrentSnapshot(),
-      /* @__PURE__ */ new Map()
-    ) : resolveArrowCoords(
-      state,
-      getCurrentSnapshot(),
-      /* @__PURE__ */ new Map()
-    );
-    if (!coords) return null;
-    return {
-      x: Math.min(coords.x1, coords.x2),
-      y: Math.min(coords.y1, coords.y2),
-      w: Math.abs(coords.x2 - coords.x1),
-      h: Math.abs(coords.y2 - coords.y1)
+  const anchorHandle = target?.closest("[data-anchor-handle]");
+  if (anchorHandle && (activeTool2 === "line" || activeTool2 === "arrow")) {
+    e.preventDefault();
+    const fromId = anchorHandle.dataset.elemId ?? "";
+    const fromAnchor = anchorHandle.dataset.anchor ?? "auto";
+    const pt = svgPoint(e.clientX, e.clientY);
+    if (!pt) return;
+    connectState = {
+      fromId,
+      fromAnchor,
+      startX: Number(anchorHandle.getAttribute("cx")) || pt.x,
+      startY: Number(anchorHandle.getAttribute("cy")) || pt.y,
+      currentX: pt.x,
+      currentY: pt.y
     };
+    render2();
+    return;
   }
-  if (baseEl.type === "polygon") {
-    return polygonBoundingBox(String(state.points ?? ""));
+  const rawId = findElementId(e.target);
+  if (!rawId) {
+    if (!e.shiftKey && e.target === canvasEl) {
+      const pt = svgPoint(e.clientX, e.clientY);
+      if (pt) {
+        marqueeState = {
+          startX: pt.x,
+          startY: pt.y,
+          currentX: pt.x,
+          currentY: pt.y
+        };
+      }
+    }
+    return;
   }
-  if (baseEl.type === "path") {
-    return pathBBoxOnCanvas(canvasEl, baseEl.id);
+  const id = e.altKey ? rawId : findContainingGroup(rawId)?.id ?? rawId;
+  const snap2 = getCurrentSnapshot();
+  const elState = snap2.get(id);
+  const baseEl = def.elements.find((x) => x.id === id);
+  if (!elState || !baseEl) return;
+  if ((baseEl.type === "arrow" || baseEl.type === "line") && baseEl.fromId && baseEl.toId) {
+    setSelection({ kind: "element", elementId: id });
+    return;
+  }
+  const anchor = readPositionAnchor(baseEl, elState);
+  if (!anchor) return;
+  dragState = {
+    elementId: id,
+    startMouseX: e.clientX,
+    startMouseY: e.clientY,
+    startElemX: anchor.x,
+    startElemY: anchor.y,
+    originalPolygonPoints: baseEl.type === "polygon" ? String(elState.points ?? "") : void 0,
+    extras: collectDragExtras(id, def, snap2)
+  };
+  if (!isElementSelected(getSelection(), id)) {
+    setSelection({ kind: "element", elementId: id });
   }
-  return null;
 }
-function intersectsMarquee(elBbox, marquee) {
-  return elBbox.x < marquee.x + marquee.w && elBbox.x + elBbox.w > marquee.x && elBbox.y < marquee.y + marquee.h && elBbox.y + elBbox.h > marquee.y;
+function collectDragExtras(anchorId, def, snap2) {
+  if (!def) return [];
+  const sel = getSelection();
+  const ids = getSelectedElementIds(sel).filter((id) => id !== anchorId);
+  const extras = [];
+  for (const id of ids) {
+    const el = def.elements.find((x) => x.id === id);
+    const st = snap2.get(id);
+    if (!el || !st) continue;
+    const a = readPositionAnchor(el, st);
+    if (!a) continue;
+    extras.push({
+      id,
+      startX: a.x,
+      startY: a.y,
+      originalPolygonPoints: el.type === "polygon" ? String(st.points ?? "") : void 0
+    });
+  }
+  return extras;
 }
-function handleResizeMove(e) {
-  if (!resizeState || !canvasEl) return;
-  const def = getDef();
-  if (!def) return;
-  const baseEl = def.elements.find((x) => x.id === resizeState.elementId);
-  if (!baseEl) return;
-  const rect = canvasEl.getBoundingClientRect();
-  const sx = def.canvas.width / rect.width;
-  const sy = def.canvas.height / rect.height;
-  const dx = (e.clientX - resizeState.startMouseX) * sx;
-  const dy = (e.clientY - resizeState.startMouseY) * sy;
-  const h = resizeState.handle;
-  const uniform = e.shiftKey;
-  if (baseEl.type === "rect" || baseEl.type === "image") {
-    let newX = resizeState.startX;
-    let newY = resizeState.startY;
-    let newW = resizeState.startW;
-    let newH = resizeState.startH;
-    if (h.includes("w")) {
-      newX = resizeState.startX + dx;
-      newW = resizeState.startW - dx;
-    }
-    if (h.includes("e")) {
-      newW = resizeState.startW + dx;
-    }
-    if (h.includes("n")) {
-      newY = resizeState.startY + dy;
-      newH = resizeState.startH - dy;
+function onMouseMove(e) {
+  if (pathDraftState && getActiveTool() === "path") {
+    const point = svgPoint(e.clientX, e.clientY);
+    if (point) {
+      pathDraftState.current = point;
+      render2();
     }
-    if (h.includes("s")) {
-      newH = resizeState.startH + dy;
+    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;
+  }
+  if (vertexDragState) {
+    const pt = svgPoint(e.clientX, e.clientY);
+    if (!pt) return;
+    const pts = vertexDragState.originalPoints.trim().split(/\s+/);
+    if (vertexDragState.vertexIndex < pts.length) {
+      pts[vertexDragState.vertexIndex] = `${pt.x.toFixed(1)},${pt.y.toFixed(1)}`;
+      setElementValueAtTime(vertexDragState.elementId, {
+        points: pts.join(" ")
+      });
     }
-    if (uniform && (h === "nw" || h === "ne" || h === "se" || h === "sw")) {
-      const aspect = resizeState.aspect;
-      const fromW = Math.abs(newW);
-      const fromH = Math.abs(newH);
-      if (fromW / aspect > fromH) {
-        const targetH = Math.max(1, Math.round(fromW / aspect));
-        if (h.includes("n"))
-          newY = resizeState.startY + resizeState.startH - targetH;
-        newH = targetH;
-      } else {
-        const targetW = Math.max(1, Math.round(fromH * aspect));
-        if (h.includes("w"))
-          newX = resizeState.startX + resizeState.startW - targetW;
-        newW = targetW;
+    return;
+  }
+  if (endpointDragState) {
+    const pt = svgPoint(e.clientX, e.clientY);
+    if (!pt) return;
+    endpointDragState.currentX = pt.x;
+    endpointDragState.currentY = pt.y;
+    endpointDragState.snapTarget = findSnapTarget(
+      pt.x,
+      pt.y,
+      endpointDragState.elementId
+    );
+    const def2 = getDef();
+    if (!def2) return;
+    const baseEl2 = def2.elements.find(
+      (x) => x.id === endpointDragState.elementId
+    );
+    if (!baseEl2) return;
+    const finalX = endpointDragState.snapTarget ? endpointDragState.snapTarget.x : pt.x;
+    const finalY = endpointDragState.snapTarget ? endpointDragState.snapTarget.y : pt.y;
+    if (baseEl2.type === "line" || baseEl2.type === "arrow") {
+      if (endpointDragState.snapTarget) {
+        if (endpointDragState.end === "start") {
+          setElementValueAtTime(baseEl2.id, {
+            fromId: endpointDragState.snapTarget.elementId,
+            fromAnchor: endpointDragState.snapTarget.anchor,
+            x1: void 0,
+            y1: void 0
+          });
+        } else {
+          setElementValueAtTime(baseEl2.id, {
+            toId: endpointDragState.snapTarget.elementId,
+            toAnchor: endpointDragState.snapTarget.anchor,
+            x2: void 0,
+            y2: void 0
+          });
+        }
+      } else {
+        if (endpointDragState.end === "start") {
+          updateElementBase(baseEl2.id, {
+            fromId: void 0,
+            fromAnchor: void 0,
+            x1: finalX,
+            y1: finalY
+          });
+        } else {
+          updateElementBase(baseEl2.id, {
+            toId: void 0,
+            toAnchor: void 0,
+            x2: finalX,
+            y2: finalY
+          });
+        }
       }
     }
-    if (newW < 0) {
-      newX = newX + newW;
-      newW = -newW;
-    }
-    if (newH < 0) {
-      newY = newY + newH;
-      newH = -newH;
-    }
-    newW = Math.max(2, Math.round(newW));
-    newH = Math.max(2, Math.round(newH));
-    setElementValueAtTime(baseEl.id, {
-      x: Math.round(newX),
-      y: Math.round(newY),
-      width: newW,
-      height: newH
+    render2();
+    return;
+  }
+  if (rotateState) {
+    const pt = svgPoint(e.clientX, e.clientY);
+    if (!pt) return;
+    const angle = Math.atan2(pt.y - rotateState.centerY, pt.x - rotateState.centerX) * 180 / Math.PI;
+    const delta = angle - rotateState.startAngle;
+    setElementValueAtTime(rotateState.elementId, {
+      rotation: Math.round((rotateState.startRotation + delta + 360) % 360)
     });
     return;
   }
-  if (baseEl.type === "circle") {
-    const cx = resizeState.startCx ?? 0;
-    const cy = resizeState.startCy ?? 0;
-    const r0 = resizeState.startR ?? 1;
-    let r1;
-    if (h === "e") r1 = Math.max(2, r0 + dx);
-    else if (h === "w") r1 = Math.max(2, r0 - dx);
-    else if (h === "s") r1 = Math.max(2, r0 + dy);
-    else if (h === "n") r1 = Math.max(2, r0 - dy);
-    else {
-      const ddx = h.includes("e") ? dx : -dx;
-      const ddy = h.includes("s") ? dy : -dy;
-      const dd = uniform ? Math.max(ddx, ddy) : (ddx + ddy) / 2;
-      r1 = Math.max(2, r0 + dd);
-    }
-    setElementValueAtTime(baseEl.id, { r: Math.round(r1), cx, cy });
+  if (connectState) {
+    const pt = svgPoint(e.clientX, e.clientY);
+    if (!pt) return;
+    connectState.currentX = pt.x;
+    connectState.currentY = pt.y;
+    render2();
     return;
   }
-  if (baseEl.type === "text") {
-    const startFs = resizeState.startFontSize ?? 16;
-    const startH0 = Math.max(1, resizeState.startH);
-    const newH = h.includes("n") ? Math.max(1, startH0 - dy) : Math.max(1, startH0 + dy);
-    const ratio = newH / startH0;
-    const newFontSize = Math.max(6, Math.round(startFs * ratio));
-    setElementValueAtTime(baseEl.id, { fontSize: newFontSize });
+  if (marqueeState) {
+    const pt = svgPoint(e.clientX, e.clientY);
+    if (!pt) return;
+    marqueeState.currentX = pt.x;
+    marqueeState.currentY = pt.y;
+    render2();
     return;
   }
-}
-function render() {
-  if (!canvasEl) return;
+  if (!dragState || !canvasEl) return;
   const def = getDef();
-  if (!def) {
-    canvasEl.innerHTML = "";
-    canvasEl.removeAttribute("viewBox");
-    canvasEl.style.width = "0";
-    canvasEl.style.height = "0";
+  if (!def) return;
+  const baseEl = def.elements.find((x) => x.id === dragState.elementId);
+  if (!baseEl) return;
+  const svgRect = canvasEl.getBoundingClientRect();
+  const scaleX = def.canvas.width / svgRect.width;
+  const scaleY = def.canvas.height / svgRect.height;
+  const dx = (e.clientX - dragState.startMouseX) * scaleX;
+  const dy = (e.clientY - dragState.startMouseY) * scaleY;
+  const targetX = Math.round(dragState.startElemX + dx);
+  const targetY = Math.round(dragState.startElemY + dy);
+  const snap2 = getCurrentSnapshot();
+  const elState = snap2.get(dragState.elementId);
+  if (!elState) return;
+  applyMove(baseEl, elState, targetX, targetY);
+  for (const extra of dragState.extras) {
+    const eEl = def.elements.find((x) => x.id === extra.id);
+    const eState = snap2.get(extra.id);
+    if (!eEl || !eState) continue;
+    applyMove(
+      eEl,
+      eState,
+      Math.round(extra.startX + dx),
+      Math.round(extra.startY + dy),
+      extra.originalPolygonPoints
+    );
+  }
+}
+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;
   }
-  canvasEl.setAttribute(
-    "viewBox",
-    `0 0 ${def.canvas.width} ${def.canvas.height}`
+  const origin = draft.points[0];
+  const element = makeDefaultElement(
+    "path",
+    uniqueElementId("path"),
+    origin.x,
+    origin.y
   );
-  canvasEl.style.width = def.canvas.width * canvasZoom + "px";
-  canvasEl.style.height = def.canvas.height * canvasZoom + "px";
-  canvasEl.style.backgroundColor = def.canvas.background;
-  canvasEl.innerHTML = `<defs>${HEAD_MARKER_DEFS}</defs>`;
-  const snap2 = getCurrentSnapshot();
-  const elementsById = /* @__PURE__ */ new Map();
-  for (const el of def.elements) elementsById.set(el.id, el);
-  for (const el of def.elements) {
-    const state = snap2.get(el.id);
-    if (!state) continue;
-    const g = renderElement(el, state, snap2, elementsById);
-    if (g) {
-      if (!state.visible) g.setAttribute("opacity", "0.25");
-      canvasEl.appendChild(g);
-    }
+  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 });
   }
-  const selection = getSelection();
-  if (selection.kind === "element") {
-    const selEl = elementsById.get(selection.elementId);
-    if (selEl && isGroup(selEl)) {
-      const groupOutline = renderGroupOutline(selection.elementId);
-      if (groupOutline) canvasEl.appendChild(groupOutline);
-    } else {
-      const outline = renderSelectionOutline(
-        canvasEl,
-        selection.elementId,
-        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(
-        canvasEl,
-        selection.elementId,
-        snap2,
-        elementsById
-      );
-      if (resize) canvasEl.appendChild(resize);
+  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;
     }
-  } else if (selection.kind === "elements") {
-    for (const elId of selection.elementIds) {
-      const outline = renderSelectionOutline(
-        canvasEl,
-        elId,
-        snap2,
-        elementsById
+    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 (outline) canvasEl.appendChild(outline);
+      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 (endpointDragState) {
-    const guides = renderSnapTargets(
-      endpointDragState.elementId,
-      snap2,
-      elementsById,
-      endpointDragState.snapTarget
-    );
-    if (guides) canvasEl.appendChild(guides);
+  if (resizeState) {
+    resizeState = null;
+    render2();
   }
-  if (hoveredElementId && (!connectState || hoveredElementId !== connectState.fromId)) {
-    const anchors = renderAnchorDots(hoveredElementId, snap2, elementsById);
-    if (anchors) canvasEl.appendChild(anchors);
+  if (vertexDragState) {
+    vertexDragState = null;
+    render2();
   }
-  if (connectState && connectState.fromId !== hoveredElementId) {
-    const anchors = renderAnchorDots(connectState.fromId, snap2, elementsById);
-    if (anchors) canvasEl.appendChild(anchors);
+  if (endpointDragState) {
+    endpointDragState = null;
+    render2();
   }
   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);
+    const target = e.target;
+    const anchorHandle = target?.closest("[data-anchor-handle]");
+    const elemId = anchorHandle?.dataset.elemId ?? findElementId(e.target);
+    const toAnchor = anchorHandle?.dataset.anchor ?? "auto";
+    if (elemId && elemId !== connectState.fromId) {
+      const def = getDef();
+      if (def) {
+        const connectionType = getActiveTool() === "line" ? "line" : "arrow";
+        const common = {
+          id: uniqueElementId(connectionType),
+          rotation: 0,
+          appearances: [],
+          tracks: [],
+          fromId: connectState.fromId,
+          toId: elemId,
+          fromAnchor: connectState.fromAnchor,
+          toAnchor,
+          stroke: "#6366f1",
+          strokeWidth: 2,
+          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;
+    render2();
   }
   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);
+    marqueeState = null;
+    marqueeJustFinished = true;
+    if (mw > 0 && mh > 0) {
+      const def = getDef();
+      if (def) {
+        const snap2 = getCurrentSnapshot();
+        const marqueeBbox = { x: mx, y: my, w: mw, h: mh };
+        const matchedIds = [];
+        for (const el of def.elements) {
+          const state = snap2.get(el.id);
+          if (!state) continue;
+          const bbox = elementBBox(el, state);
+          if (bbox && intersectsMarquee(bbox, marqueeBbox)) {
+            matchedIds.push(el.id);
+          }
+        }
+        if (matchedIds.length === 1) {
+          setSelection({ kind: "element", elementId: matchedIds[0] });
+        } else if (matchedIds.length > 1) {
+          setSelection({ kind: "elements", elementIds: matchedIds });
+        } else {
+          setSelection({ kind: "none" });
+        }
+      }
     }
+    render2();
   }
+  dragState = null;
+  rotateState = null;
 }
-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 requestCanvasRender() {
+  if (canvasRenderFrame !== null) return;
+  canvasRenderFrame = requestAnimationFrame(() => {
+    canvasRenderFrame = null;
+    render2();
+  });
 }
-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 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 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 applyMove(baseEl, state, x, y, polygonOriginal) {
+  if (baseEl.type === "rect" || baseEl.type === "image" || baseEl.type === "text") {
+    setElementValueAtTime(baseEl.id, { x, y });
+  } else if (baseEl.type === "circle") {
+    setElementValueAtTime(baseEl.id, { cx: x, cy: y });
+  } else if ((baseEl.type === "line" || baseEl.type === "arrow") && typeof state.x1 === "number" && typeof state.y1 === "number" && typeof state.x2 === "number" && typeof state.y2 === "number") {
+    const dx = x - state.x1;
+    const dy = y - state.y1;
+    setElementValueAtTime(baseEl.id, {
+      x1: x,
+      y1: y,
+      x2: state.x2 + dx,
+      y2: state.y2 + dy
+    });
+  } else if (baseEl.type === "path") {
+    setElementValueAtTime(baseEl.id, { x, y });
+  } else if (baseEl.type === "polygon") {
+    const orig = polygonOriginal ?? dragState?.originalPolygonPoints;
+    if (!orig) return;
+    const startFirst = firstPolygonPoint(orig);
+    if (!startFirst) return;
+    const dx = x - startFirst.x;
+    const dy = y - startFirst.y;
+    const newPoints = shiftPolygonPoints(orig, dx, dy);
+    setElementValueAtTime(baseEl.id, { points: newPoints });
+  } else if (baseEl.type === "group") {
+    const dx = x - baseEl.x;
+    const dy = y - baseEl.y;
+    moveGroupBy(baseEl.id, dx, dy);
+  }
 }
-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;
+function readPositionAnchor(baseEl, state) {
+  if (baseEl.type === "rect" || baseEl.type === "image" || baseEl.type === "text") {
+    return { x: state.x, y: state.y };
   }
-  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 === "circle")
+    return { x: state.cx, y: state.cy };
+  if ((baseEl.type === "line" || baseEl.type === "arrow") && typeof state.x1 === "number") {
+    return { x: state.x1, y: state.y1 };
   }
-  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 === "path")
+    return { x: state.x ?? 0, y: state.y ?? 0 };
+  if (baseEl.type === "polygon") {
+    const first = firstPolygonPoint(String(state.points ?? ""));
+    return first;
   }
-  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 === "group") {
+    return { x: baseEl.x, y: baseEl.y };
   }
-  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;
+  return null;
+}
+function elementBBox(baseEl, state) {
+  if (baseEl.type === "rect" || baseEl.type === "image") {
+    return {
+      x: state.x,
+      y: state.y,
+      w: state.width,
+      h: state.height
+    };
   }
-  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 === "circle") {
+    const r = state.r;
+    return {
+      x: state.cx - r,
+      y: state.cy - r,
+      w: r * 2,
+      h: r * 2
+    };
   }
-  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 === "text") {
+    const bbox = textBBoxOnCanvas(canvasEl, baseEl.id);
+    if (bbox) return bbox;
+    return {
+      x: state.x,
+      y: state.y,
+      w: 100,
+      h: state.fontSize ?? 16
+    };
+  }
+  if (baseEl.type === "line" || baseEl.type === "arrow") {
+    const coords = baseEl.type === "line" ? resolveLineCoords(
+      state,
+      getCurrentSnapshot(),
+      /* @__PURE__ */ new Map()
+    ) : resolveArrowCoords(
+      state,
+      getCurrentSnapshot(),
+      /* @__PURE__ */ new Map()
+    );
+    if (!coords) return null;
+    return {
+      x: Math.min(coords.x1, coords.x2),
+      y: Math.min(coords.y1, coords.y2),
+      w: Math.abs(coords.x2 - coords.x1),
+      h: Math.abs(coords.y2 - coords.y1)
+    };
   }
   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 polygonBoundingBox(String(state.points ?? ""));
+  }
+  if (baseEl.type === "path") {
+    return pathBBoxOnCanvas(canvasEl, baseEl.id);
   }
   return null;
 }
-function showPreview2(def) {
-  showPreview(canvasEl, def);
-}
-function hidePreview2() {
-  hidePreview(canvasEl);
+function intersectsMarquee(elBbox, marquee) {
+  return elBbox.x < marquee.x + marquee.w && elBbox.x + elBbox.w > marquee.x && elBbox.y < marquee.y + marquee.h && elBbox.y + elBbox.h > marquee.y;
 }
-
-// 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();
+function handleResizeMove(e) {
+  if (!resizeState || !canvasEl) return;
+  const def = getDef();
+  if (!def) return;
+  const baseEl = def.elements.find((x) => x.id === resizeState.elementId);
+  if (!baseEl) return;
+  const rect = canvasEl.getBoundingClientRect();
+  const sx = def.canvas.width / rect.width;
+  const sy = def.canvas.height / rect.height;
+  const dx = (e.clientX - resizeState.startMouseX) * sx;
+  const dy = (e.clientY - resizeState.startMouseY) * sy;
+  const h = resizeState.handle;
+  const uniform = e.shiftKey;
+  if (baseEl.type === "rect" || baseEl.type === "image") {
+    let newX = resizeState.startX;
+    let newY = resizeState.startY;
+    let newW = resizeState.startW;
+    let newH = resizeState.startH;
+    if (h.includes("w")) {
+      newX = resizeState.startX + dx;
+      newW = resizeState.startW - dx;
     }
-  });
-  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);
+    if (h.includes("e")) {
+      newW = resizeState.startW + dx;
+    }
+    if (h.includes("n")) {
+      newY = resizeState.startY + dy;
+      newH = resizeState.startH - dy;
+    }
+    if (h.includes("s")) {
+      newH = resizeState.startH + dy;
+    }
+    if (uniform && (h === "nw" || h === "ne" || h === "se" || h === "sw")) {
+      const aspect = resizeState.aspect;
+      const fromW = Math.abs(newW);
+      const fromH = Math.abs(newH);
+      if (fromW / aspect > fromH) {
+        const targetH = Math.max(1, Math.round(fromW / aspect));
+        if (h.includes("n"))
+          newY = resizeState.startY + resizeState.startH - targetH;
+        newH = targetH;
+      } else {
+        const targetW = Math.max(1, Math.round(fromH * aspect));
+        if (h.includes("w"))
+          newX = resizeState.startX + resizeState.startW - targetW;
+        newW = targetW;
+      }
+    }
+    if (newW < 0) {
+      newX = newX + newW;
+      newW = -newW;
+    }
+    if (newH < 0) {
+      newY = newY + newH;
+      newH = -newH;
+    }
+    newW = Math.max(2, Math.round(newW));
+    newH = Math.max(2, Math.round(newH));
+    setElementValueAtTime(baseEl.id, {
+      x: Math.round(newX),
+      y: Math.round(newY),
+      width: newW,
+      height: newH
+    });
+    return;
+  }
+  if (baseEl.type === "circle") {
+    const cx = resizeState.startCx ?? 0;
+    const cy = resizeState.startCy ?? 0;
+    const r0 = resizeState.startR ?? 1;
+    let r1;
+    if (h === "e") r1 = Math.max(2, r0 + dx);
+    else if (h === "w") r1 = Math.max(2, r0 - dx);
+    else if (h === "s") r1 = Math.max(2, r0 + dy);
+    else if (h === "n") r1 = Math.max(2, r0 - dy);
+    else {
+      const ddx = h.includes("e") ? dx : -dx;
+      const ddy = h.includes("s") ? dy : -dy;
+      const dd = uniform ? Math.max(ddx, ddy) : (ddx + ddy) / 2;
+      r1 = Math.max(2, r0 + dd);
+    }
+    setElementValueAtTime(baseEl.id, { r: Math.round(r1), cx, cy });
+    return;
+  }
+  if (baseEl.type === "text") {
+    const startFs = resizeState.startFontSize ?? 16;
+    const startH0 = Math.max(1, resizeState.startH);
+    const newH = h.includes("n") ? Math.max(1, startH0 - dy) : Math.max(1, startH0 + dy);
+    const ratio = newH / startH0;
+    const newFontSize = Math.max(6, Math.round(startFs * ratio));
+    setElementValueAtTime(baseEl.id, { fontSize: newFontSize });
+    return;
+  }
 }
 function render2() {
-  if (!listEl) return;
+  if (!canvasEl) 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>';
+  if (!def) {
+    canvasEl.innerHTML = "";
+    canvasEl.removeAttribute("viewBox");
+    canvasEl.style.width = "0";
+    canvasEl.style.height = "0";
     return;
   }
-  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;
+  canvasEl.setAttribute(
+    "viewBox",
+    `0 0 ${def.canvas.width} ${def.canvas.height}`
+  );
+  canvasEl.style.width = def.canvas.width * canvasZoom + "px";
+  canvasEl.style.height = def.canvas.height * canvasZoom + "px";
+  canvasEl.style.backgroundColor = def.canvas.background;
+  canvasEl.innerHTML = `<defs>${HEAD_MARKER_DEFS}</defs>`;
+  const snap2 = getCurrentSnapshot();
+  const elementsById = /* @__PURE__ */ new Map();
+  for (const el of def.elements) elementsById.set(el.id, el);
+  for (const el of def.elements) {
+    const state = snap2.get(el.id);
+    if (!state) continue;
+    const g = renderElement(el, state, snap2, elementsById);
+    if (g) {
+      if (!state.visible) g.setAttribute("opacity", "0.25");
+      canvasEl.appendChild(g);
+    }
+  }
+  const selection = getSelection();
+  if (selection.kind === "element") {
+    const selEl = elementsById.get(selection.elementId);
+    if (selEl && isGroup(selEl)) {
+      const groupOutline = renderGroupOutline(selection.elementId);
+      if (groupOutline) canvasEl.appendChild(groupOutline);
+    } else {
+      const outline = renderSelectionOutline(
+        canvasEl,
+        selection.elementId,
+        snap2,
+        elementsById
+      );
+      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") {
+    for (const elId of selection.elementIds) {
+      const outline = renderSelectionOutline(
+        canvasEl,
+        elId,
+        snap2,
+        elementsById
+      );
+      if (outline) canvasEl.appendChild(outline);
+    }
+  }
+  if (endpointDragState) {
+    const guides = renderSnapTargets(
+      endpointDragState.elementId,
+      snap2,
+      elementsById,
+      endpointDragState.snapTarget
+    );
+    if (guides) canvasEl.appendChild(guides);
+  }
+  const activeTool2 = getActiveTool();
+  if (hoveredElementId && (activeTool2 === "line" || activeTool2 === "arrow") && (!connectState || hoveredElementId !== connectState.fromId)) {
+    const anchors = renderAnchorDots(hoveredElementId, snap2, elementsById);
+    if (anchors) canvasEl.appendChild(anchors);
   }
-  const me = e;
-  if (me.shiftKey || me.ctrlKey || me.metaKey) {
-    const sel = getSelection();
-    setSelection(toggleSelectionFor(sel, id));
-    return;
+  if (connectState && (activeTool2 === "line" || activeTool2 === "arrow") && connectState.fromId !== hoveredElementId) {
+    const anchors = renderAnchorDots(connectState.fromId, snap2, elementsById);
+    if (anchors) canvasEl.appendChild(anchors);
   }
-  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 (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 (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);
+  }
+  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);
+  }
+  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
@@ -2303,6 +2698,16 @@ function distributeSelected(kind) {
 var panelEl = null;
 var closedSections = /* @__PURE__ */ new Set();
 var isComposingFallback = false;
+var DEFAULT_LOCALES = ["ko", "en"];
+function parseLocales(value) {
+  const seen = /* @__PURE__ */ new Set();
+  return value.split(",").map((locale) => locale.trim()).filter((locale) => {
+    const key = locale.toLowerCase();
+    if (!locale || seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
 function initProperties(root) {
   panelEl = root;
   subscribe(render3);
@@ -2416,6 +2821,11 @@ function renderInner() {
     const metaBody = [
       textField("title", "meta.title", def.title),
       textField("description", "meta.description", def.description),
+      textField(
+        "\uBB38\uC11C \uC5B8\uC5B4 (\uC27C\uD45C\uB85C \uAD6C\uBD84)",
+        "meta.locales",
+        (def.locales ?? DEFAULT_LOCALES).join(", ")
+      ),
       numberField("duration (ms)", "meta.duration", def.duration, 100),
       numberField("canvas.width", "canvas.width", def.canvas.width),
       numberField("canvas.height", "canvas.height", def.canvas.height),
@@ -2438,6 +2848,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 = `
@@ -2564,7 +2985,7 @@ function renderElementForm(def, el) {
     `;
     return;
   }
-  const baseFields = renderBaseFields(el);
+  const baseFields = renderBaseFields(def, el);
   const appearances = renderAppearances(def, el);
   const tracks = renderTracks(el);
   const baseHeader = `<span class="studio-props-header-title">${escapeHtml2(el.id)}</span><span class="studio-props-header-type">${escapeHtml2(el.type)}</span>`;
@@ -2581,7 +3002,7 @@ function renderElementForm(def, el) {
     </div>
   `;
 }
-function renderBaseFields(el) {
+function renderBaseFields(def, el) {
   const numberFields = [];
   const colorFields = [];
   const textFields = [];
@@ -2612,6 +3033,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 });
@@ -2686,8 +3115,30 @@ function renderBaseFields(el) {
     value: e.rotation,
     step: 5
   });
+  const localizedTextFields = (() => {
+    if (el.type !== "text") return [];
+    const localized = el;
+    const documentLocales = def.locales ?? DEFAULT_LOCALES;
+    const locales = localized.locales ?? documentLocales;
+    return [
+      textField(
+        "\uC774 \uC694\uC18C\uC758 \uC5B8\uC5B4 (\uBE44\uC6B0\uBA74 \uBB38\uC11C \uC124\uC815 \uC0AC\uC6A9)",
+        "el.locales",
+        localized.locales?.join(", ") ?? ""
+      ),
+      `<p class="studio-props-empty studio-i18n-hint">\uAE30\uBCF8 \uBB38\uAD6C\uB294 content\uC785\uB2C8\uB2E4. \uBC88\uC5ED\uC774 \uC5C6\uAC70\uB098 \uD604\uC7AC \uC5B8\uC5B4\uC640 \uC77C\uCE58\uD558\uC9C0 \uC54A\uC73C\uBA74 \uAE30\uBCF8 \uBB38\uAD6C\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4.</p>`,
+      ...locales.map(
+        (locale) => textField(
+          `${locale} \uBC88\uC5ED`,
+          `el.translation.${locale}`,
+          localized.translations?.[locale] ?? ""
+        )
+      )
+    ];
+  })();
   const html = [
     ...textFields.map((f) => textField(f.label, `el.${f.key}`, f.value)),
+    ...localizedTextFields,
     ...numberFields.map(
       (f) => numberField(f.label, `el.${f.key}`, f.value, f.step)
     ),
@@ -2757,12 +3208,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) {
@@ -2772,7 +3236,10 @@ function apply(key, value) {
   if (key === "meta.title") updateMeta({ title: String(value) });
   else if (key === "meta.description")
     updateMeta({ description: String(value) });
-  else if (key === "meta.duration") updateDuration(Number(value));
+  else if (key === "meta.locales") {
+    const locales = parseLocales(String(value));
+    if (locales.length > 0) updateLocales(locales);
+  } else if (key === "meta.duration") updateDuration(Number(value));
   else if (key === "canvas.width") updateCanvas({ width: Number(value) });
   else if (key === "canvas.height") updateCanvas({ height: Number(value) });
   else if (key === "canvas.background")
@@ -2784,11 +3251,49 @@ 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 === "locales" && el.type === "text") {
+      const locales = parseLocales(String(value));
+      updateElementBase(sel.elementId, {
+        locales: locales.length > 0 ? locales : void 0
+      });
+      return;
+    }
+    if (prop.startsWith("translation.") && el.type === "text") {
+      const locale = prop.slice("translation.".length);
+      const localized = el;
+      const translations = { ...localized.translations ?? {} };
+      if (String(value)) translations[locale] = String(value);
+      else delete translations[locale];
+      updateElementBase(sel.elementId, { translations });
+      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 +3464,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 +3487,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 +3547,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 +3634,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 +3664,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 +15389,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 +15412,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 +15481,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 +15914,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 +15924,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 +15951,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 +15960,9 @@ function queryUi() {
     idDisplay,
     status,
     saveBtn,
+    exportBtn,
+    importBtn,
+    importFileInput,
     deleteBtn,
     newBtn,
     openBtn,
@@ -15420,6 +15970,8 @@ function queryUi() {
     restartBtn,
     speedInput,
     speedValue,
+    previewLoopInput,
+    detachTimelineBtn,
     canvas,
     elementList,
     toolsRoot,
@@ -15455,39 +16007,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 +16068,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 +16215,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 +16410,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 +16480,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 +16593,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 +16770,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 +16802,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 +16904,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 +16943,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 +16968,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 +16990,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 +17004,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-NCPWDB2U.js.map
+//# sourceMappingURL=main-NCPWDB2U.js.map