@newtil/drawing 0.1.0

package/dist/index.js

@@ -0,0 +1,1224 @@
+// src/_styles.ts
+var STYLES = '/* @newtil/drawing \u2014 \uADF8\uB9BC\uD310 \uD31D\uC5C5. \uC790\uAE30 shadow root \uC5D0 \uC8FC\uC785\uB418\uBBC0\uB85C \uD638\uC2A4\uD2B8 \uD398\uC774\uC9C0\uC640 \uC11C\uB85C \uC548 \uC11E\uC778\uB2E4 */\n:host { all: initial; }\n* { box-sizing: border-box; }\n\n.nd-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.45);\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;\n  font-size: 13px;\n  color: #111;\n}\n.nd-dialog {\n  display: flex;\n  flex-direction: column;\n  width: min(96vw, 1280px);\n  height: min(94vh, 900px);\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);\n  outline: none;\n  overflow: hidden;\n}\n\n/* \u2500\u2500\u2500 \uD234\uBC14 \u2500\u2500\u2500 */\n.nd-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid #e5e5e5;\n  background: #fafafa;\n}\n.nd-group { display: flex; align-items: center; gap: 2px; }\n.nd-group + .nd-group { padding-left: 8px; border-left: 1px solid #e0e0e0; }\n.nd-group--end { margin-left: auto; border-left: 0 !important; }\n.nd-btn {\n  min-width: 30px;\n  height: 30px;\n  padding: 0 6px;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  background: transparent;\n  color: #333;\n  font: 15px/1 inherit;\n  font-family: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n}\n.nd-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n.nd-btn:hover { background: #ececec; }\n.nd-btn[aria-pressed="true"] { background: #e3edf9; border-color: #4a90e2; color: #1a5fb4; }\n.nd-btn:disabled { opacity: 0.35; cursor: default; }\n.nd-btn--text { padding: 0 12px; font-size: 13px; font-weight: 600; border: 1px solid #d0d0d0; background: #fff; }\n.nd-btn--primary { background: #4a90e2; border-color: #4a90e2; color: #fff; }\n.nd-btn--primary:hover { background: #3b7fd1; }\n.nd-swatch { width: 22px; min-width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--swatch); border: 2px solid #fff; box-shadow: 0 0 0 1px #c8c8c8; }\n.nd-swatch:hover { background: var(--swatch); }\n.nd-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #4a90e2; background: var(--swatch); }\n.nd-color-input { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }\n.nd-range { width: 80px; accent-color: #4a90e2; }\n.nd-label { font-size: 11px; color: #777; margin-left: 4px; white-space: nowrap; }\n.nd-stroke-preview { display: inline-block; width: 18px; border-radius: 2px; background: #333; }\n\n/* \u2500\u2500\u2500 \uD310 \u2500\u2500\u2500 */\n.nd-stage {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  background: #ececec;\n  overflow: hidden;\n}\n.nd-canvas {\n  position: relative;\n  background: #fff;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);\n  overflow: hidden;\n}\n.nd-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }\n.nd-bg[hidden] { display: none; }\n.nd-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; overflow: visible; }\n.nd-svg[data-tool="select"] { cursor: default; }\n/* \uADF8\uB9AC\uB294 \uB3C4\uAD6C\uC5D0\uC120 \uB3C4\uD615\uC774 \uC774\uBCA4\uD2B8\uB97C \uBA39\uC9C0 \uC54A\uB294\uB2E4. \uC120\uD0DD \uB3C4\uAD6C\uC5D0\uC120 \uC7A1\uAE30\uC6A9 \uD22C\uBA85 \uAD75\uC740 \uD68D(.nd-hit)\uC774 \uB9DE\uB294\uB2E4 */\n.nd-svg [data-shape] * { pointer-events: none; }\n.nd-svg[data-tool="select"] [data-shape] .nd-hit { pointer-events: stroke; cursor: move; }\n.nd-svg[data-tool="select"] [data-shape] rect.nd-hit,\n.nd-svg[data-tool="select"] [data-shape] ellipse.nd-hit,\n.nd-svg[data-tool="select"] [data-shape] circle.nd-hit { pointer-events: all; }\n.nd-selection * { pointer-events: none; }\n.nd-svg[data-tool="select"] .nd-handle { pointer-events: all; }\n.nd-handle[data-handle="nw"], .nd-handle[data-handle="se"] { cursor: nwse-resize; }\n.nd-handle[data-handle="ne"], .nd-handle[data-handle="sw"] { cursor: nesw-resize; }\n.nd-handle[data-handle="n"], .nd-handle[data-handle="s"] { cursor: ns-resize; }\n.nd-handle[data-handle="e"], .nd-handle[data-handle="w"] { cursor: ew-resize; }\n.nd-handle[data-handle="p1"], .nd-handle[data-handle="p2"] { cursor: grab; }\n.nd-rubber { fill: rgba(74, 144, 226, 0.12); stroke: #4a90e2; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }\n.nd-hint {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  text-align: center;\n  color: #888;\n  font-size: 14px;\n  pointer-events: none;\n}\n.nd-hint[hidden] { display: none; }\n.nd-notice {\n  position: absolute;\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n  max-width: 80%;\n  padding: 8px 14px;\n  border-radius: 8px;\n  background: rgba(0, 0, 0, 0.8);\n  color: #fff;\n  font-size: 13px;\n  pointer-events: none;\n}\n.nd-notice[hidden] { display: none; }\n/* \uAE00\uC790 \uC778\uB77C\uC778 \uD3B8\uC9D1 \u2014 \uB3C4\uD615 \uC790\uB9AC\uC5D0 \uACB9\uCCD0 \uB193\uB294 textarea */\n.nd-text-edit {\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  border: 1px dashed #4a90e2;\n  border-radius: 2px;\n  background: rgba(255, 255, 255, 0.85);\n  color: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.25;\n  resize: none;\n  overflow: hidden;\n  outline: none;\n  white-space: pre;\n  min-width: 40px;\n}\n\n/* \u2500\u2500\u2500 \uBC1C \u2500\u2500\u2500 */\n.nd-footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  border-top: 1px solid #e5e5e5;\n  background: #fafafa;\n}\n.nd-footer .nd-status { color: #888; font-size: 12px; margin-right: auto; }\n.nd-footer .nd-btn--bg { font-weight: 500; }\n';
+
+// src/i18n.ts
+var ko = {
+  title: "\uADF8\uB9BC\uD310",
+  toolSelect: "\uC120\uD0DD\xB7\uC774\uB3D9 (V)",
+  toolPen: "\uD39C (P)",
+  toolHighlighter: "\uD615\uAD11\uD39C (H)",
+  toolLine: "\uC9C1\uC120 (L)",
+  toolArrow: "\uD654\uC0B4\uD45C (A)",
+  toolArrow2: "\uC591\uCABD \uD654\uC0B4\uD45C",
+  toolRect: "\uC0AC\uAC01\uD615 (R)",
+  toolEllipse: "\uD0C0\uC6D0 (E)",
+  toolText: "\uAE00\uC790 (T)",
+  toolBadge: "\uBC88\uD638 \uBC30\uC9C0 (B)",
+  color: "\uC0C9",
+  customColor: "\uB2E4\uB978 \uC0C9\u2026",
+  strokeWidth: "\uC120 \uAD75\uAE30",
+  fillNone: "\uCC44\uC6B0\uAE30 \uC5C6\uC74C",
+  fillTranslucent: "\uBC18\uD22C\uBA85 \uCC44\uC6B0\uAE30",
+  fillSolid: "\uCC44\uC6B0\uAE30",
+  dashed: "\uC810\uC120",
+  opacity: "\uD22C\uBA85\uB3C4",
+  undo: "\uB418\uB3CC\uB9AC\uAE30 (\u2318Z)",
+  redo: "\uB2E4\uC2DC \uC2E4\uD589 (\u21E7\u2318Z)",
+  delete: "\uC9C0\uC6B0\uAE30 (Delete)",
+  duplicate: "\uBCF5\uC81C (\u2318D)",
+  bringForward: "\uC55E\uC73C\uB85C",
+  sendBackward: "\uB4A4\uB85C",
+  background: "\uBC30\uACBD \uC774\uBBF8\uC9C0\u2026",
+  clearBackground: "\uBC30\uACBD \uC9C0\uC6B0\uAE30",
+  zoomFit: "\uD654\uBA74\uC5D0 \uB9DE\uCDA4",
+  done: "\uC644\uB8CC",
+  cancel: "\uCDE8\uC18C",
+  saving: "\uC800\uC7A5 \uC911\u2026",
+  textPrompt: "\uB123\uC744 \uAE00\uC790",
+  pasteHint: "\uCEA1\uCC98\uB97C \uBD99\uC5EC\uB123\uAC70\uB098(\u2318V / Ctrl+V) \uBC30\uACBD \uC774\uBBF8\uC9C0\uB97C \uACE0\uB974\uC138\uC694. \uBE48 \uD310\uC5D0 \uBC14\uB85C \uADF8\uB824\uB3C4 \uB429\uB2C8\uB2E4.",
+  discardConfirm: "\uADF8\uB9B0 \uAC83\uC744 \uBC84\uB9B4\uAE4C\uC694?",
+  exportFailed: "\uADF8\uB9BC\uC744 \uC774\uBBF8\uC9C0\uB85C \uB9CC\uB4E4\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.",
+  saveFailed: (reason) => `\uADF8\uB9BC\uC744 \uC800\uC7A5\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uAC70\uB098 \uCDE8\uC18C\uD558\uC138\uC694.
+
+${reason}`
+};
+var en = {
+  title: "Drawing",
+  toolSelect: "Select / move (V)",
+  toolPen: "Pen (P)",
+  toolHighlighter: "Highlighter (H)",
+  toolLine: "Line (L)",
+  toolArrow: "Arrow (A)",
+  toolArrow2: "Double arrow",
+  toolRect: "Rectangle (R)",
+  toolEllipse: "Ellipse (E)",
+  toolText: "Text (T)",
+  toolBadge: "Number badge (B)",
+  color: "Color",
+  customColor: "Custom color\u2026",
+  strokeWidth: "Stroke width",
+  fillNone: "No fill",
+  fillTranslucent: "Translucent fill",
+  fillSolid: "Solid fill",
+  dashed: "Dashed",
+  opacity: "Opacity",
+  undo: "Undo (\u2318Z)",
+  redo: "Redo (\u21E7\u2318Z)",
+  delete: "Delete",
+  duplicate: "Duplicate (\u2318D)",
+  bringForward: "Bring forward",
+  sendBackward: "Send backward",
+  background: "Background image\u2026",
+  clearBackground: "Clear background",
+  zoomFit: "Fit to screen",
+  done: "Done",
+  cancel: "Cancel",
+  saving: "Saving\u2026",
+  textPrompt: "Text",
+  pasteHint: "Paste a screenshot (\u2318V / Ctrl+V) or pick a background image. You can also draw on the blank board.",
+  discardConfirm: "Discard the drawing?",
+  exportFailed: "Could not render the drawing to an image.",
+  saveFailed: (reason) => `Could not save the drawing. Try again or cancel.
+
+${reason}`
+};
+function messagesFor(lang) {
+  const l = (lang ?? (typeof document !== "undefined" ? document.documentElement.lang : "") ?? "").toLowerCase();
+  return l.startsWith("ko") || l === "" ? ko : en;
+}
+
+// src/model.ts
+var DEFAULT_SIZE = { width: 800, height: 450 };
+var MAX_EDGE = 1600;
+var TRANSLUCENT = 0.25;
+var HIGHLIGHTER_ALPHA = 0.35;
+var seq = 0;
+var nextId = () => `s${Date.now().toString(36)}${(seq++).toString(36)}`;
+function emptyDrawing(width = DEFAULT_SIZE.width, height = DEFAULT_SIZE.height) {
+  return { version: 1, width, height, background: null, shapes: [] };
+}
+function textSize(stroke) {
+  return 14 + stroke * 4;
+}
+function fillOpacity(s) {
+  return s.fill === "solid" ? 1 : s.fill === "translucent" ? TRANSLUCENT : 0;
+}
+function clamp(v, lo, hi) {
+  return Math.min(hi, Math.max(lo, v));
+}
+function isBoxShape(s) {
+  return "x1" in s;
+}
+function isPath(s) {
+  return "points" in s;
+}
+function isLineLike(s) {
+  return s.type === "line" || s.type === "arrow" || s.type === "arrow2";
+}
+function bounds(s) {
+  if (isPath(s)) {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (let i = 0; i + 1 < s.points.length; i += 2) {
+      const x = s.points[i], y = s.points[i + 1];
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y);
+    }
+    if (!Number.isFinite(minX)) return { x: 0, y: 0, w: 0, h: 0 };
+    return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+  }
+  if (s.type === "text") {
+    const lines = s.text.split("\n");
+    const w = Math.max(1, ...lines.map((l) => l.length)) * s.size * 0.6;
+    return { x: s.x, y: s.y, w, h: lines.length * s.size * 1.25 };
+  }
+  if (s.type === "badge") {
+    const r = s.size;
+    return { x: s.x - r, y: s.y - r, w: r * 2, h: r * 2 };
+  }
+  return { x: Math.min(s.x1, s.x2), y: Math.min(s.y1, s.y2), w: Math.abs(s.x2 - s.x1), h: Math.abs(s.y2 - s.y1) };
+}
+function moveShape(s, dx, dy) {
+  if (isPath(s)) {
+    for (let i = 0; i + 1 < s.points.length; i += 2) {
+      s.points[i] += dx;
+      s.points[i + 1] += dy;
+    }
+  } else if (s.type === "text" || s.type === "badge") {
+    s.x += dx;
+    s.y += dy;
+  } else {
+    s.x1 += dx;
+    s.x2 += dx;
+    s.y1 += dy;
+    s.y2 += dy;
+  }
+}
+function arrowHead(x1, y1, x2, y2, stroke) {
+  const len = 8 + stroke * 3, ang = Math.atan2(y2 - y1, x2 - x1), spread = Math.PI / 7;
+  return [
+    [x2, y2],
+    [x2 - len * Math.cos(ang - spread), y2 - len * Math.sin(ang - spread)],
+    [x2 - len * Math.cos(ang + spread), y2 - len * Math.sin(ang + spread)]
+  ];
+}
+function smoothPoints(points) {
+  if (points.length < 8) return points;
+  const out = [points[0], points[1]];
+  for (let i = 2; i + 3 < points.length; i += 2) {
+    out.push((points[i - 2] + points[i] + points[i + 2]) / 3, (points[i - 1] + points[i + 1] + points[i + 3]) / 3);
+  }
+  out.push(points[points.length - 2], points[points.length - 1]);
+  return out;
+}
+var FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif';
+
+// src/render.ts
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("image load failed"));
+    img.src = src;
+  });
+}
+function blobToDataURL(blob) {
+  return new Promise((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => resolve(String(r.result));
+    r.onerror = () => reject(r.error ?? new Error("read failed"));
+    r.readAsDataURL(blob);
+  });
+}
+function paintShape(ctx, s) {
+  ctx.save();
+  ctx.globalAlpha = s.opacity ?? 1;
+  ctx.strokeStyle = s.color;
+  ctx.fillStyle = s.color;
+  ctx.lineWidth = s.stroke;
+  ctx.setLineDash(s.dashed ? [s.stroke * 3, s.stroke * 2] : []);
+  const b = bounds(s);
+  switch (s.type) {
+    case "rect": {
+      const r = Math.min(s.radius ?? 0, b.w / 2, b.h / 2);
+      ctx.beginPath();
+      if (r > 0) ctx.roundRect(b.x, b.y, b.w, b.h, r);
+      else ctx.rect(b.x, b.y, b.w, b.h);
+      if (fillOpacity(s) > 0) {
+        ctx.save();
+        ctx.globalAlpha *= fillOpacity(s);
+        ctx.fill();
+        ctx.restore();
+      }
+      ctx.stroke();
+      break;
+    }
+    case "ellipse":
+      ctx.beginPath();
+      ctx.ellipse(b.x + b.w / 2, b.y + b.h / 2, b.w / 2, b.h / 2, 0, 0, Math.PI * 2);
+      if (fillOpacity(s) > 0) {
+        ctx.save();
+        ctx.globalAlpha *= fillOpacity(s);
+        ctx.fill();
+        ctx.restore();
+      }
+      ctx.stroke();
+      break;
+    case "line":
+    case "arrow":
+    case "arrow2": {
+      ctx.lineCap = "round";
+      ctx.beginPath();
+      ctx.moveTo(s.x1, s.y1);
+      ctx.lineTo(s.x2, s.y2);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      const heads = [];
+      if (s.type !== "line") heads.push(arrowHead(s.x1, s.y1, s.x2, s.y2, s.stroke));
+      if (s.type === "arrow2") heads.push(arrowHead(s.x2, s.y2, s.x1, s.y1, s.stroke));
+      for (const [a, b2, c] of heads) {
+        ctx.beginPath();
+        ctx.moveTo(a[0], a[1]);
+        ctx.lineTo(b2[0], b2[1]);
+        ctx.lineTo(c[0], c[1]);
+        ctx.closePath();
+        ctx.fill();
+      }
+      break;
+    }
+    case "pen":
+    case "highlighter": {
+      const pts = s.type === "pen" ? smoothPoints(s.points) : s.points;
+      if (pts.length < 4) break;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      if (s.type === "highlighter") {
+        ctx.globalAlpha *= HIGHLIGHTER_ALPHA;
+        ctx.lineWidth = s.stroke * 4;
+        ctx.lineCap = "butt";
+      }
+      ctx.beginPath();
+      ctx.moveTo(pts[0], pts[1]);
+      for (let i = 2; i + 1 < pts.length; i += 2) ctx.lineTo(pts[i], pts[i + 1]);
+      ctx.stroke();
+      break;
+    }
+    case "text": {
+      ctx.font = `bold ${s.size}px ${FONT}`;
+      ctx.textBaseline = "top";
+      ctx.lineWidth = Math.max(3, s.size / 6);
+      ctx.strokeStyle = "#ffffff";
+      ctx.setLineDash([]);
+      s.text.split("\n").forEach((line, i) => {
+        ctx.strokeText(line, s.x, s.y + i * s.size * 1.25);
+        ctx.fillText(line, s.x, s.y + i * s.size * 1.25);
+      });
+      break;
+    }
+    case "badge": {
+      ctx.setLineDash([]);
+      ctx.beginPath();
+      ctx.arc(s.x, s.y, s.size, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = "#ffffff";
+      ctx.stroke();
+      ctx.fillStyle = "#ffffff";
+      ctx.font = `bold ${Math.round(s.size * 1.2)}px ${FONT}`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(String(s.n), s.x, s.y + s.size * 0.05);
+      break;
+    }
+  }
+  ctx.restore();
+}
+async function renderToPng(data) {
+  const c = document.createElement("canvas");
+  c.width = data.width;
+  c.height = data.height;
+  const ctx = c.getContext("2d");
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, c.width, c.height);
+  if (data.background) ctx.drawImage(await loadImage(data.background), 0, 0, data.width, data.height);
+  for (const s of data.shapes) paintShape(ctx, s);
+  return new Promise((resolve, reject) => c.toBlob((b) => b ? resolve(b) : reject(new Error("toBlob failed")), "image/png"));
+}
+
+// src/board.ts
+var COLORS = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#a855f7", "#111111", "#ffffff"];
+var SVG_NS = "http://www.w3.org/2000/svg";
+var ICONS = {
+  select: '<path d="M5 3l14 8-6 2-3 6z"/>',
+  pen: '<path d="M4 20l4-1 11-11-3-3L5 16z"/>',
+  highlighter: '<path d="M4 20h6M9 15l6-6 3 3-6 6H9z"/><path d="M14 8l2-2 3 3-2 2"/>',
+  line: '<path d="M5 19L19 5"/>',
+  arrow: '<path d="M5 19L19 5M11 5h8v8"/>',
+  arrow2: '<path d="M5 19L19 5M11 5h8v8M13 19H5v-8"/>',
+  rect: '<rect x="4" y="6" width="16" height="12" rx="1"/>',
+  ellipse: '<ellipse cx="12" cy="12" rx="8" ry="6"/>',
+  text: '<path d="M5 6h14M12 6v13"/>',
+  badge: '<circle cx="12" cy="12" r="8"/><path d="M11 9l2-1v8"/>',
+  undo: '<path d="M9 14L4 9l5-5"/><path d="M4 9h10a6 6 0 010 12h-3"/>',
+  redo: '<path d="M15 14l5-5-5-5"/><path d="M20 9H10a6 6 0 000 12h3"/>',
+  delete: '<path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/>',
+  duplicate: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a1 1 0 00-1-1H5a1 1 0 00-1 1v10a1 1 0 001 1h3"/>',
+  forward: '<path d="M12 19V5M6 11l6-6 6 6"/>',
+  backward: '<path d="M12 5v14M6 13l6 6 6-6"/>',
+  fillNone: '<rect x="5" y="5" width="14" height="14" rx="2"/>',
+  fillTranslucent: '<rect x="5" y="5" width="14" height="14" rx="2"/><path d="M5 12h14M12 5v14" opacity=".5"/>',
+  fillSolid: '<rect x="5" y="5" width="14" height="14" rx="2" fill="currentColor"/>',
+  dashed: '<path d="M4 12h3M10 12h4M17 12h3"/>'
+};
+var icon = (name) => `<svg viewBox="0 0 24 24" aria-hidden="true">${ICONS[name] ?? ""}</svg>`;
+async function toBackground(src) {
+  const url = typeof src === "string" ? src : await blobToDataURL(src);
+  const img = await loadImage(url);
+  const k = Math.min(1, MAX_EDGE / Math.max(img.naturalWidth, img.naturalHeight));
+  const width = Math.max(1, Math.round(img.naturalWidth * k)), height = Math.max(1, Math.round(img.naturalHeight * k));
+  const c = document.createElement("canvas");
+  c.width = width;
+  c.height = height;
+  c.getContext("2d").drawImage(img, 0, 0, width, height);
+  return { src: c.toDataURL("image/png"), width, height };
+}
+var DrawingBoard = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.toolBtns = /* @__PURE__ */ new Map();
+    this.colorBtns = /* @__PURE__ */ new Map();
+    this.fillBtns = /* @__PURE__ */ new Map();
+    this.textEdit = null;
+    this.tool = "arrow";
+    this.color = COLORS[0];
+    this.stroke = 4;
+    this.fill = null;
+    this.dashed = false;
+    this.opacity = 1;
+    this.scale = 1;
+    this.selected = /* @__PURE__ */ new Set();
+    this.drag = null;
+    /** 두 번 클릭 판정 — pointerdown 을 preventDefault 하면 브라우저가 click/dblclick 을 안 만들어 직접 잰다 */
+    this.lastDown = { id: null, t: 0 };
+    this.past = [];
+    this.future = [];
+    this.dirty = false;
+    this.saving = false;
+    this.onResize = () => this.fit();
+    this.onPaste = (e) => {
+      if (this.textEdit) return;
+      const file = Array.from(e.clipboardData?.files ?? []).find((f) => f.type.startsWith("image/"));
+      if (!file) return;
+      e.preventDefault();
+      e.stopPropagation();
+      void this.setBackground(file);
+    };
+    this.onPointerDown = (e) => {
+      if (e.button !== 0 || this.saving) return;
+      e.preventDefault();
+      this.commitTextEdit();
+      const p = this.toPoint(e);
+      if (this.tool === "select") {
+        const hitId = this.shapeAt(e.target);
+        const now = performance.now();
+        const dbl = hitId !== null && hitId === this.lastDown.id && now - this.lastDown.t < 350;
+        this.lastDown = { id: hitId, t: now };
+        if (dbl) {
+          const s = this.data.shapes.find((x) => x.id === hitId);
+          if (s?.type === "text") {
+            this.select([s.id]);
+            this.startTextEdit(s, false);
+            return;
+          }
+        }
+        const handle = this.handleAt(e.target);
+        const only = this.selected.size === 1 ? this.selectedShapes()[0] : void 0;
+        if (handle && only) {
+          this.commit();
+          this.drag = { kind: "handle", id: only.id, handle, start: bounds(only), startShape: structuredClone(only), pointerId: e.pointerId };
+          this.dialog.focus({ preventScroll: true });
+          return;
+        }
+        const id = this.shapeAt(e.target);
+        if (id) {
+          if (e.shiftKey) {
+            const next = new Set(this.selected);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            this.select([...next]);
+          } else if (!this.selected.has(id)) this.select([id]);
+          if (this.selected.has(id)) {
+            this.commit();
+            this.drag = { kind: "move", ids: [...this.selected], last: p, moved: false, pointerId: e.pointerId };
+          }
+          this.dialog.focus({ preventScroll: true });
+          return;
+        }
+        if (!e.shiftKey) this.select([]);
+        this.drag = { kind: "rubber", from: p, to: p, additive: e.shiftKey, pointerId: e.pointerId };
+        this.dialog.focus({ preventScroll: true });
+        return;
+      }
+      if (this.tool === "text") {
+        this.startTextEdit({ id: nextId(), type: "text", color: this.color, stroke: this.stroke, x: p.x, y: p.y, text: "", size: textSize(this.stroke), opacity: this.opacity }, true);
+        return;
+      }
+      if (this.tool === "badge") {
+        const n = this.data.shapes.filter((s) => s.type === "badge").length + 1;
+        this.commit();
+        const shape2 = { id: nextId(), type: "badge", color: this.color, stroke: this.stroke, x: p.x, y: p.y, n, size: 8 + this.stroke * 2, opacity: this.opacity };
+        this.data.shapes.push(shape2);
+        this.render();
+        this.updateButtons();
+        this.dialog.focus({ preventScroll: true });
+        return;
+      }
+      this.dialog.focus({ preventScroll: true });
+      const base = { id: nextId(), color: this.color, stroke: this.stroke, dashed: this.dashed || void 0, opacity: this.opacity !== 1 ? this.opacity : void 0 };
+      const shape = this.tool === "pen" || this.tool === "highlighter" ? { ...base, type: this.tool, points: [p.x, p.y] } : this.tool === "rect" || this.tool === "ellipse" ? { ...base, type: this.tool, x1: p.x, y1: p.y, x2: p.x, y2: p.y, fill: this.fill } : { ...base, type: this.tool, x1: p.x, y1: p.y, x2: p.x, y2: p.y };
+      this.commit();
+      this.data.shapes.push(shape);
+      this.drag = { kind: "draw", shape, pointerId: e.pointerId };
+      this.render();
+    };
+    this.onPointerMove = (e) => {
+      if (!this.drag || e.pointerId !== this.drag.pointerId) return;
+      const p = this.toPoint(e);
+      const d = this.drag;
+      if (d.kind === "draw") {
+        const s = d.shape;
+        if (isPath(s)) s.points.push(p.x, p.y);
+        else if (isBoxShape(s)) {
+          if (e.shiftKey) {
+            const dx = p.x - s.x1, dy = p.y - s.y1;
+            const m = Math.max(Math.abs(dx), Math.abs(dy));
+            s.x2 = s.x1 + Math.sign(dx || 1) * m;
+            s.y2 = s.y1 + Math.sign(dy || 1) * m;
+          } else {
+            s.x2 = p.x;
+            s.y2 = p.y;
+          }
+        }
+      } else if (d.kind === "move") {
+        const dx = p.x - d.last.x, dy = p.y - d.last.y;
+        if (dx || dy) {
+          d.moved = true;
+          for (const s of this.data.shapes) if (d.ids.includes(s.id)) moveShape(s, dx, dy);
+          d.last = p;
+        }
+      } else if (d.kind === "handle") {
+        const s = this.data.shapes.find((x) => x.id === d.id);
+        if (!s || !isBoxShape(s)) return;
+        if (d.handle === "p1") {
+          s.x1 = p.x;
+          s.y1 = p.y;
+        } else if (d.handle === "p2") {
+          s.x2 = p.x;
+          s.y2 = p.y;
+        } else {
+          const b = d.start;
+          let x1 = b.x, y1 = b.y, x2 = b.x + b.w, y2 = b.y + b.h;
+          if (d.handle.includes("w")) x1 = p.x;
+          if (d.handle.includes("e")) x2 = p.x;
+          if (d.handle.includes("n")) y1 = p.y;
+          if (d.handle.includes("s")) y2 = p.y;
+          s.x1 = x1;
+          s.y1 = y1;
+          s.x2 = x2;
+          s.y2 = y2;
+        }
+      } else {
+        d.to = p;
+      }
+      this.render();
+    };
+    this.onPointerUp = (e) => {
+      if (!this.drag || e.pointerId !== this.drag.pointerId) return;
+      const d = this.drag;
+      this.drag = null;
+      if (d.kind === "draw") {
+        const s = d.shape;
+        const tiny = isPath(s) ? s.points.length < 4 : isBoxShape(s) ? Math.abs(s.x2 - s.x1) < 2 && Math.abs(s.y2 - s.y1) < 2 : false;
+        if (tiny) {
+          this.data.shapes = this.data.shapes.filter((x) => x.id !== s.id);
+          this.past.pop();
+        } else if (s.type === "pen") s.points = smoothPoints(s.points);
+      } else if (d.kind === "move" && !d.moved) {
+        this.past.pop();
+      } else if (d.kind === "rubber") {
+        const box = { x: Math.min(d.from.x, d.to.x), y: Math.min(d.from.y, d.to.y), w: Math.abs(d.to.x - d.from.x), h: Math.abs(d.to.y - d.from.y) };
+        if (box.w > 3 || box.h > 3) {
+          const hit = this.data.shapes.filter((s) => {
+            const b = bounds(s);
+            return b.x < box.x + box.w && b.x + b.w > box.x && b.y < box.y + box.h && b.y + b.h > box.y;
+          }).map((s) => s.id);
+          this.select(d.additive ? [.../* @__PURE__ */ new Set([...this.selected, ...hit])] : hit);
+        }
+      }
+      this.render();
+      this.updateButtons();
+    };
+    this.onKeyDown = (e) => {
+      e.stopPropagation();
+      if (this.textEdit) return;
+      const mod = e.metaKey || e.ctrlKey;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (this.selected.size) this.select([]);
+        else this.cancel();
+        return;
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && this.selected.size) {
+        e.preventDefault();
+        this.deleteSelected();
+        return;
+      }
+      if (mod && e.key.toLowerCase() === "z") {
+        e.preventDefault();
+        if (e.shiftKey) this.redo();
+        else this.undo();
+        return;
+      }
+      if (mod && e.key.toLowerCase() === "d") {
+        e.preventDefault();
+        this.duplicate();
+        return;
+      }
+      if (mod && e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        this.setTool("select");
+        this.select(this.data.shapes.map((s) => s.id));
+        return;
+      }
+      if (e.key.startsWith("Arrow") && this.selected.size) {
+        e.preventDefault();
+        const step = e.shiftKey ? 10 : 1;
+        this.nudge(e.key === "ArrowLeft" ? -step : e.key === "ArrowRight" ? step : 0, e.key === "ArrowUp" ? -step : e.key === "ArrowDown" ? step : 0);
+        return;
+      }
+      if (e.key === "]" && this.selected.size) {
+        this.reorder(1);
+        return;
+      }
+      if (e.key === "[" && this.selected.size) {
+        this.reorder(-1);
+        return;
+      }
+      const tool = { v: "select", p: "pen", h: "highlighter", l: "line", a: "arrow", r: "rect", e: "ellipse", t: "text", b: "badge" }[e.key.toLowerCase()];
+      if (tool && !mod && !e.altKey) this.setTool(tool);
+    };
+    this.m = { ...messagesFor(opts.lang), ...opts.messages ?? {} };
+    this.data = structuredClone(opts.initial ?? emptyDrawing());
+    this.host = document.createElement("div");
+    this.host.className = "newtil-drawing";
+    const shadow = this.host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = STYLES;
+    shadow.appendChild(style);
+    this.backdrop = el("div", "nd-backdrop");
+    this.dialog = el("div", "nd-dialog");
+    this.dialog.setAttribute("role", "dialog");
+    this.dialog.setAttribute("aria-label", this.m.title);
+    this.dialog.tabIndex = -1;
+    this.backdrop.appendChild(this.dialog);
+    shadow.appendChild(this.backdrop);
+    this.dialog.appendChild(this.buildToolbar());
+    this.stage = el("div", "nd-stage");
+    this.canvasEl = el("div", "nd-canvas");
+    this.bgImg = document.createElement("img");
+    this.bgImg.className = "nd-bg";
+    this.bgImg.draggable = false;
+    this.bgImg.alt = "";
+    this.svg = document.createElementNS(SVG_NS, "svg");
+    this.svg.classList.add("nd-svg");
+    this.hintEl = el("div", "nd-hint");
+    this.hintEl.textContent = this.m.pasteHint;
+    this.canvasEl.append(this.bgImg, this.svg, this.hintEl);
+    this.noticeEl = el("div", "nd-notice");
+    this.noticeEl.hidden = true;
+    this.stage.append(this.canvasEl, this.noticeEl);
+    this.dialog.appendChild(this.stage);
+    const foot = el("div", "nd-footer");
+    this.statusEl = el("span", "nd-status");
+    const bgBtn = textBtn(this.m.background, () => {
+      void this.pickBackground();
+    });
+    bgBtn.classList.add("nd-btn--bg");
+    const cancel = textBtn(this.m.cancel, () => this.cancel());
+    this.doneBtn = textBtn(this.m.done, () => {
+      void this.finish();
+    });
+    this.doneBtn.classList.add("nd-btn--primary");
+    foot.append(bgBtn, this.statusEl, cancel, this.doneBtn);
+    this.dialog.appendChild(foot);
+    this.svg.addEventListener("pointerdown", this.onPointerDown);
+    window.addEventListener("pointermove", this.onPointerMove);
+    window.addEventListener("pointerup", this.onPointerUp);
+    window.addEventListener("pointercancel", this.onPointerUp);
+    this.dialog.addEventListener("keydown", this.onKeyDown);
+    this.dialog.addEventListener("paste", this.onPaste);
+    this.backdrop.addEventListener("pointerdown", (e) => {
+      if (e.target === this.backdrop) this.cancel();
+    });
+    window.addEventListener("resize", this.onResize);
+  }
+  async open() {
+    (this.opts.mount ?? document.body).appendChild(this.host);
+    if (!this.opts.initial && this.opts.background) {
+      try {
+        const bg = await toBackground(this.opts.background);
+        this.data.background = bg.src;
+        this.data.width = bg.width;
+        this.data.height = bg.height;
+      } catch {
+      }
+    }
+    this.applyBackground();
+    this.render();
+    this.setTool(this.tool);
+    this.reflectStyle();
+    this.updateButtons();
+    if (this.opts.notice) this.showNotice(this.opts.notice);
+    requestAnimationFrame(() => {
+      this.fit();
+      this.dialog.focus();
+    });
+    return new Promise((resolve) => {
+      this.done = resolve;
+    });
+  }
+  // ─── 툴바 ───
+  buildToolbar() {
+    const bar = el("div", "nd-toolbar");
+    const tools = [
+      ["select", this.m.toolSelect],
+      ["pen", this.m.toolPen],
+      ["highlighter", this.m.toolHighlighter],
+      ["line", this.m.toolLine],
+      ["arrow", this.m.toolArrow],
+      ["arrow2", this.m.toolArrow2],
+      ["rect", this.m.toolRect],
+      ["ellipse", this.m.toolEllipse],
+      ["text", this.m.toolText],
+      ["badge", this.m.toolBadge]
+    ];
+    const g1 = el("div", "nd-group");
+    for (const [tool, title] of tools) {
+      const b = iconBtn(icon(tool), title, () => this.setTool(tool));
+      b.dataset["tool"] = tool;
+      this.toolBtns.set(tool, b);
+      g1.appendChild(b);
+    }
+    bar.appendChild(g1);
+    const g2 = el("div", "nd-group");
+    for (const c of COLORS) {
+      const b = iconBtn("", this.m.color, () => this.setColor(c));
+      b.classList.add("nd-swatch");
+      b.style.setProperty("--swatch", c);
+      b.dataset["color"] = c;
+      this.colorBtns.set(c, b);
+      g2.appendChild(b);
+    }
+    this.colorInput = document.createElement("input");
+    this.colorInput.type = "color";
+    this.colorInput.className = "nd-color-input";
+    this.colorInput.title = this.m.customColor;
+    this.colorInput.addEventListener("input", () => this.setColor(this.colorInput.value));
+    g2.appendChild(this.colorInput);
+    bar.appendChild(g2);
+    const g3 = el("div", "nd-group");
+    this.strokePreview = el("span", "nd-stroke-preview");
+    this.strokeRange = range(1, 12, 1, this.m.strokeWidth, () => this.setStroke(Number(this.strokeRange.value)));
+    g3.append(this.strokePreview, this.strokeRange);
+    bar.appendChild(g3);
+    const g4 = el("div", "nd-group");
+    const fills = [[null, "fillNone", this.m.fillNone], ["translucent", "fillTranslucent", this.m.fillTranslucent], ["solid", "fillSolid", this.m.fillSolid]];
+    for (const [f, ic, title] of fills) {
+      const b = iconBtn(icon(ic), title, () => this.setFill(f));
+      b.dataset["fill"] = f ?? "none";
+      this.fillBtns.set(f ?? "none", b);
+      g4.appendChild(b);
+    }
+    this.dashedBtn = iconBtn(icon("dashed"), this.m.dashed, () => this.setDashed(!this.dashed));
+    this.dashedBtn.dataset["action"] = "dashed";
+    g4.appendChild(this.dashedBtn);
+    const opLabel = el("span", "nd-label");
+    opLabel.textContent = this.m.opacity;
+    this.opacityRange = range(10, 100, 5, this.m.opacity, () => this.setOpacity(Number(this.opacityRange.value) / 100));
+    g4.append(opLabel, this.opacityRange);
+    bar.appendChild(g4);
+    const g5 = el("div", "nd-group");
+    this.undoBtn = iconBtn(icon("undo"), this.m.undo, () => this.undo());
+    this.redoBtn = iconBtn(icon("redo"), this.m.redo, () => this.redo());
+    this.dupBtn = iconBtn(icon("duplicate"), this.m.duplicate, () => this.duplicate());
+    this.fwdBtn = iconBtn(icon("forward"), this.m.bringForward, () => this.reorder(1));
+    this.backBtn = iconBtn(icon("backward"), this.m.sendBackward, () => this.reorder(-1));
+    this.deleteBtn = iconBtn(icon("delete"), this.m.delete, () => this.deleteSelected());
+    this.deleteBtn.dataset["action"] = "delete";
+    g5.append(this.undoBtn, this.redoBtn, this.dupBtn, this.fwdBtn, this.backBtn, this.deleteBtn);
+    bar.appendChild(g5);
+    return bar;
+  }
+  /** 툴바가 지금 값(또는 고른 도형의 값)을 비추게 */
+  reflectStyle() {
+    for (const [k, b] of this.colorBtns) b.setAttribute("aria-pressed", String(k === this.color));
+    this.colorInput.value = /^#[0-9a-f]{6}$/i.test(this.color) ? this.color : "#000000";
+    this.strokeRange.value = String(this.stroke);
+    this.strokePreview.style.height = `${Math.min(12, this.stroke)}px`;
+    for (const [k, b] of this.fillBtns) b.setAttribute("aria-pressed", String(k === (this.fill ?? "none")));
+    this.dashedBtn.setAttribute("aria-pressed", String(this.dashed));
+    this.opacityRange.value = String(Math.round(this.opacity * 100));
+  }
+  fit() {
+    const r = this.stage.getBoundingClientRect();
+    const availW = Math.max(100, r.width - 24), availH = Math.max(100, r.height - 24);
+    this.scale = Math.min(1, availW / this.data.width, availH / this.data.height);
+    this.canvasEl.style.width = `${Math.round(this.data.width * this.scale)}px`;
+    this.canvasEl.style.height = `${Math.round(this.data.height * this.scale)}px`;
+    this.svg.setAttribute("viewBox", `0 0 ${this.data.width} ${this.data.height}`);
+    this.render();
+  }
+  applyBackground() {
+    if (this.data.background) {
+      this.bgImg.src = this.data.background;
+      this.bgImg.hidden = false;
+    } else {
+      this.bgImg.removeAttribute("src");
+      this.bgImg.hidden = true;
+    }
+    this.fit();
+    this.updateButtons();
+  }
+  showNotice(text) {
+    this.noticeEl.textContent = text;
+    this.noticeEl.hidden = false;
+    window.setTimeout(() => {
+      this.noticeEl.hidden = true;
+    }, 6e3);
+  }
+  // ─── 상태 ───
+  setTool(tool) {
+    this.commitTextEdit();
+    this.tool = tool;
+    for (const [t, b] of this.toolBtns) b.setAttribute("aria-pressed", String(t === tool));
+    this.svg.dataset["tool"] = tool;
+    if (tool !== "select") this.select([]);
+  }
+  selectedShapes() {
+    return this.data.shapes.filter((s) => this.selected.has(s.id));
+  }
+  /** 고른 도형들에 스타일을 적용 — 고른 게 없으면 다음 도형의 기본값만 바뀐다 */
+  applyStyle(mutate) {
+    const targets = this.selectedShapes();
+    if (!targets.length) return;
+    let changed = false;
+    const snapshot = structuredClone(this.data.shapes);
+    for (const s of targets) changed = mutate(s) || changed;
+    if (changed) {
+      this.past.push(snapshot);
+      this.future = [];
+      this.dirty = true;
+      this.render();
+      this.updateButtons();
+    }
+  }
+  setColor(c) {
+    this.color = c;
+    this.applyStyle((s) => s.color !== c ? (s.color = c, true) : false);
+    this.reflectStyle();
+  }
+  setStroke(w) {
+    this.stroke = w;
+    this.applyStyle((s) => {
+      if (s.stroke === w) return false;
+      s.stroke = w;
+      if (s.type === "text") s.size = textSize(w);
+      if (s.type === "badge") s.size = 8 + w * 2;
+      return true;
+    });
+    this.reflectStyle();
+  }
+  setFill(f) {
+    this.fill = f;
+    this.applyStyle((s) => (s.type === "rect" || s.type === "ellipse") && (s.fill ?? null) !== f ? (s.fill = f, true) : false);
+    this.reflectStyle();
+  }
+  setDashed(d) {
+    this.dashed = d;
+    this.applyStyle((s) => !!s.dashed !== d ? (s.dashed = d, true) : false);
+    this.reflectStyle();
+  }
+  setOpacity(o) {
+    this.opacity = o;
+    this.applyStyle((s) => (s.opacity ?? 1) !== o ? (s.opacity = o, true) : false);
+    this.reflectStyle();
+  }
+  select(ids) {
+    this.selected = new Set(ids);
+    const one = ids.length === 1 ? this.data.shapes.find((s) => s.id === ids[0]) : void 0;
+    if (one) {
+      this.color = one.color;
+      this.stroke = one.stroke;
+      this.fill = one.fill ?? null;
+      this.dashed = !!one.dashed;
+      this.opacity = one.opacity ?? 1;
+      this.reflectStyle();
+    }
+    this.render();
+    this.updateButtons();
+  }
+  commit() {
+    this.past.push(structuredClone(this.data.shapes));
+    if (this.past.length > 200) this.past.shift();
+    this.future = [];
+    this.dirty = true;
+    this.updateButtons();
+  }
+  undo() {
+    this.commitTextEdit();
+    const prev = this.past.pop();
+    if (!prev) return;
+    this.future.push(structuredClone(this.data.shapes));
+    this.data.shapes = prev;
+    this.select([...this.selected].filter((id) => prev.some((s) => s.id === id)));
+  }
+  redo() {
+    const next = this.future.pop();
+    if (!next) return;
+    this.past.push(structuredClone(this.data.shapes));
+    this.data.shapes = next;
+    this.select([...this.selected].filter((id) => next.some((s) => s.id === id)));
+  }
+  deleteSelected() {
+    if (!this.selected.size) return;
+    this.commit();
+    this.data.shapes = this.data.shapes.filter((s) => !this.selected.has(s.id));
+    this.select([]);
+  }
+  duplicate() {
+    const targets = this.selectedShapes();
+    if (!targets.length) return;
+    this.commit();
+    const copies = targets.map((s) => {
+      const c = structuredClone(s);
+      c.id = nextId();
+      moveShape(c, 16, 16);
+      return c;
+    });
+    this.data.shapes.push(...copies);
+    this.select(copies.map((c) => c.id));
+  }
+  /** 앞으로/뒤로 — 고른 도형들의 그리는 순서를 한 칸 옮긴다 */
+  reorder(dir) {
+    if (!this.selected.size) return;
+    const shapes = this.data.shapes;
+    const idx = shapes.map((s, i) => this.selected.has(s.id) ? i : -1).filter((i) => i >= 0);
+    if (dir === 1 && idx[idx.length - 1] === shapes.length - 1) return;
+    if (dir === -1 && idx[0] === 0) return;
+    this.commit();
+    const order = dir === 1 ? [...idx].reverse() : idx;
+    for (const i of order) {
+      const j = i + dir;
+      [shapes[i], shapes[j]] = [shapes[j], shapes[i]];
+    }
+    this.render();
+    this.updateButtons();
+  }
+  nudge(dx, dy) {
+    const targets = this.selectedShapes();
+    if (!targets.length) return;
+    this.commit();
+    for (const s of targets) moveShape(s, dx, dy);
+    this.render();
+  }
+  updateButtons() {
+    const n = this.selected.size;
+    this.undoBtn.disabled = this.past.length === 0;
+    this.redoBtn.disabled = this.future.length === 0;
+    this.deleteBtn.disabled = n === 0;
+    this.dupBtn.disabled = n === 0;
+    this.fwdBtn.disabled = n === 0;
+    this.backBtn.disabled = n === 0;
+    this.hintEl.hidden = !!this.data.background || this.data.shapes.length > 0;
+    this.statusEl.textContent = `${this.data.width}\xD7${this.data.height} \xB7 ${Math.round(this.scale * 100)}%` + (n ? ` \xB7 ${n}` : "");
+  }
+  // ─── 배경 ───
+  async pickBackground() {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    const file = await new Promise((resolve) => {
+      input.addEventListener("change", () => resolve(input.files?.[0] ?? null));
+      input.click();
+    });
+    if (file) await this.setBackground(file);
+    this.dialog.focus();
+  }
+  async setBackground(blob) {
+    try {
+      const bg = await toBackground(blob);
+      this.commit();
+      this.data.background = bg.src;
+      this.data.width = bg.width;
+      this.data.height = bg.height;
+      this.applyBackground();
+    } catch {
+    }
+  }
+  // ─── 포인터 ───
+  toPoint(e) {
+    const r = this.svg.getBoundingClientRect();
+    const k = r.width > 0 ? this.data.width / r.width : 1;
+    return { x: clamp((e.clientX - r.left) * k, 0, this.data.width), y: clamp((e.clientY - r.top) * k, 0, this.data.height) };
+  }
+  shapeAt(target) {
+    const g = target?.closest?.("[data-shape]");
+    return g?.dataset["shape"] ?? null;
+  }
+  handleAt(target) {
+    const h = target?.closest?.("[data-handle]");
+    return h?.dataset["handle"] ?? null;
+  }
+  // ─── 글자 인라인 편집 ───
+  startTextEdit(shape, isNew) {
+    this.commitTextEdit();
+    const ta = document.createElement("textarea");
+    ta.className = "nd-text-edit";
+    ta.value = shape.text;
+    ta.rows = 1;
+    const place = () => {
+      ta.style.left = `${shape.x * this.scale - 2}px`;
+      ta.style.top = `${shape.y * this.scale - 2}px`;
+      ta.style.fontSize = `${shape.size * this.scale}px`;
+      ta.style.color = shape.color;
+      const lines = ta.value.split("\n");
+      ta.style.width = `${Math.max(40, (Math.max(1, ...lines.map((l) => l.length)) * 0.65 + 1) * shape.size * this.scale)}px`;
+      ta.style.height = `${(lines.length * 1.25 + 0.2) * shape.size * this.scale}px`;
+    };
+    place();
+    ta.addEventListener("input", place);
+    ta.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.textEdit = null;
+        ta.remove();
+        if (!isNew) this.render();
+        this.dialog.focus();
+      } else if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        this.commitTextEdit();
+      }
+    });
+    ta.addEventListener("blur", () => this.commitTextEdit());
+    this.canvasEl.appendChild(ta);
+    this.textEdit = ta;
+    ta.__shape = shape;
+    ta.__isNew = isNew;
+    if (!isNew) {
+      this.selected = /* @__PURE__ */ new Set();
+      this.render();
+    }
+    ta.focus();
+    ta.select();
+  }
+  commitTextEdit() {
+    const ta = this.textEdit;
+    if (!ta) return;
+    this.textEdit = null;
+    const shape = ta.__shape;
+    const text = ta.value.replace(/\s+$/, "");
+    ta.remove();
+    if (!shape) return;
+    if (ta.__isNew) {
+      if (text.trim()) {
+        this.commit();
+        shape.text = text;
+        this.data.shapes.push(shape);
+        this.setTool("select");
+        this.select([shape.id]);
+      }
+    } else if (text.trim() && text !== shape.text) {
+      this.commit();
+      shape.text = text;
+      this.select([shape.id]);
+    } else if (!text.trim()) {
+      this.commit();
+      this.data.shapes = this.data.shapes.filter((s) => s.id !== shape.id);
+      this.select([]);
+    }
+    this.render();
+    this.updateButtons();
+    this.dialog.focus({ preventScroll: true });
+  }
+  // ─── 그리기(SVG) ───
+  render() {
+    while (this.svg.firstChild) this.svg.removeChild(this.svg.firstChild);
+    for (const s of this.data.shapes) this.svg.appendChild(this.renderShape(s));
+    this.renderSelection();
+    if (this.drag?.kind === "rubber") {
+      const d = this.drag;
+      this.svg.appendChild(svgEl("rect", { class: "nd-rubber", x: Math.min(d.from.x, d.to.x), y: Math.min(d.from.y, d.to.y), width: Math.abs(d.to.x - d.from.x), height: Math.abs(d.to.y - d.from.y) }));
+    }
+  }
+  renderShape(s) {
+    const g = document.createElementNS(SVG_NS, "g");
+    g.dataset["shape"] = s.id;
+    g.setAttribute("fill", "none");
+    g.setAttribute("stroke", s.color);
+    g.setAttribute("stroke-width", String(s.stroke));
+    g.setAttribute("stroke-linecap", "round");
+    g.setAttribute("stroke-linejoin", "round");
+    if ((s.opacity ?? 1) !== 1) g.setAttribute("opacity", String(s.opacity));
+    if (s.dashed) g.setAttribute("stroke-dasharray", `${s.stroke * 3} ${s.stroke * 2}`);
+    const hitWidth = Math.max(14, s.stroke * 4);
+    const b = bounds(s);
+    const hit = (elm) => {
+      elm.classList.add("nd-hit");
+      elm.setAttribute("stroke", "transparent");
+      elm.setAttribute("stroke-width", String(hitWidth));
+      elm.setAttribute("stroke-dasharray", "none");
+      return elm;
+    };
+    switch (s.type) {
+      case "rect": {
+        const r = Math.min(s.radius ?? 0, b.w / 2, b.h / 2);
+        const shape = svgEl("rect", { x: b.x, y: b.y, width: b.w, height: b.h, rx: r });
+        if (fillOpacity(s) > 0) {
+          shape.setAttribute("fill", s.color);
+          shape.setAttribute("fill-opacity", String(fillOpacity(s)));
+        }
+        const h = hit(svgEl("rect", { x: b.x, y: b.y, width: b.w, height: b.h, rx: r, fill: fillOpacity(s) > 0 ? s.color : "none", "fill-opacity": 0 }));
+        g.append(h, shape);
+        break;
+      }
+      case "ellipse": {
+        const attrs = { cx: b.x + b.w / 2, cy: b.y + b.h / 2, rx: b.w / 2, ry: b.h / 2 };
+        const shape = svgEl("ellipse", attrs);
+        if (fillOpacity(s) > 0) {
+          shape.setAttribute("fill", s.color);
+          shape.setAttribute("fill-opacity", String(fillOpacity(s)));
+        }
+        g.append(hit(svgEl("ellipse", { ...attrs, fill: fillOpacity(s) > 0 ? s.color : "none", "fill-opacity": 0 })), shape);
+        break;
+      }
+      case "line":
+      case "arrow":
+      case "arrow2": {
+        g.appendChild(hit(svgEl("line", { x1: s.x1, y1: s.y1, x2: s.x2, y2: s.y2 })));
+        g.appendChild(svgEl("line", { x1: s.x1, y1: s.y1, x2: s.x2, y2: s.y2 }));
+        const heads = [];
+        if (s.type !== "line") heads.push(arrowHead(s.x1, s.y1, s.x2, s.y2, s.stroke));
+        if (s.type === "arrow2") heads.push(arrowHead(s.x2, s.y2, s.x1, s.y1, s.stroke));
+        for (const h of heads) {
+          const poly = svgEl("polygon", { points: h.map((p) => p.join(",")).join(" "), fill: s.color, stroke: "none" });
+          g.appendChild(poly);
+        }
+        break;
+      }
+      case "pen":
+      case "highlighter": {
+        const pts = [];
+        for (let i = 0; i + 1 < s.points.length; i += 2) pts.push(`${s.points[i]},${s.points[i + 1]}`);
+        const line = svgEl("polyline", { points: pts.join(" ") });
+        if (s.type === "highlighter") {
+          line.setAttribute("stroke-width", String(s.stroke * 4));
+          line.setAttribute("stroke-opacity", String(HIGHLIGHTER_ALPHA));
+          line.setAttribute("stroke-linecap", "butt");
+        }
+        g.append(hit(svgEl("polyline", { points: pts.join(" ") })), line);
+        break;
+      }
+      case "text": {
+        g.appendChild(hit(svgEl("rect", { x: b.x - 4, y: b.y - 4, width: b.w + 8, height: b.h + 8, fill: "transparent" })));
+        const t = svgEl("text", { x: s.x, y: s.y, "font-size": s.size, "font-weight": "bold", "paint-order": "stroke", "stroke-width": Math.max(3, s.size / 6), "dominant-baseline": "hanging", fill: s.color, stroke: "#ffffff", "font-family": FONT });
+        s.text.split("\n").forEach((line, i) => {
+          const span = svgEl("tspan", { x: s.x, dy: i === 0 ? 0 : s.size * 1.25 });
+          span.textContent = line || " ";
+          t.appendChild(span);
+        });
+        g.appendChild(t);
+        break;
+      }
+      case "badge": {
+        g.appendChild(hit(svgEl("circle", { cx: s.x, cy: s.y, r: s.size + 4, fill: "transparent" })));
+        g.appendChild(svgEl("circle", { cx: s.x, cy: s.y, r: s.size, fill: s.color, stroke: "#ffffff", "stroke-width": 2 }));
+        const t = svgEl("text", { x: s.x, y: s.y + s.size * 0.05, "font-size": Math.round(s.size * 1.2), "font-weight": "bold", "text-anchor": "middle", "dominant-baseline": "central", fill: "#ffffff", stroke: "none", "font-family": FONT });
+        t.textContent = String(s.n);
+        g.appendChild(t);
+        break;
+      }
+    }
+    return g;
+  }
+  /** 고른 도형의 점선 상자 + 손잡이(하나만 골랐을 때: 상자 8개 / 선 양 끝) */
+  renderSelection() {
+    const shapes = this.selectedShapes();
+    if (!shapes.length) return;
+    const sel = document.createElementNS(SVG_NS, "g");
+    sel.classList.add("nd-selection");
+    const pad = 6;
+    for (const s of shapes) {
+      const b = bounds(s);
+      sel.appendChild(svgEl("rect", { x: b.x - pad, y: b.y - pad, width: b.w + pad * 2, height: b.h + pad * 2, fill: "none", stroke: "#4a90e2", "stroke-width": 1.5, "stroke-dasharray": "6 4", "vector-effect": "non-scaling-stroke" }));
+    }
+    if (shapes.length === 1) {
+      const s = shapes[0];
+      const b = bounds(s);
+      const handles = isLineLike(s) && isBoxShape(s) ? [["p1", s.x1, s.y1], ["p2", s.x2, s.y2]] : s.type === "rect" || s.type === "ellipse" ? [["nw", b.x, b.y], ["n", b.x + b.w / 2, b.y], ["ne", b.x + b.w, b.y], ["e", b.x + b.w, b.y + b.h / 2], ["se", b.x + b.w, b.y + b.h], ["s", b.x + b.w / 2, b.y + b.h], ["sw", b.x, b.y + b.h], ["w", b.x, b.y + b.h / 2]] : [];
+      const r = 6 / Math.max(this.scale, 0.2);
+      for (const [h, x, y] of handles) {
+        const c = svgEl("circle", { cx: x, cy: y, r, fill: "#ffffff", stroke: "#4a90e2", "stroke-width": 2, "vector-effect": "non-scaling-stroke", class: "nd-handle" });
+        c.dataset["handle"] = h;
+        sel.appendChild(c);
+      }
+    }
+    this.svg.appendChild(sel);
+  }
+  // ─── 끝내기 ───
+  cancel() {
+    if (this.saving) return;
+    this.commitTextEdit();
+    if (this.dirty && !window.confirm(this.m.discardConfirm)) {
+      this.dialog.focus();
+      return;
+    }
+    this.close(null);
+  }
+  async finish() {
+    if (this.saving) return;
+    this.commitTextEdit();
+    this.saving = true;
+    this.doneBtn.disabled = true;
+    this.doneBtn.textContent = this.m.saving;
+    try {
+      const png = await renderToPng(this.data);
+      const saved = this.opts.save ? await this.opts.save(png, this.data) : void 0;
+      this.close({ data: this.data, png, saved: saved ?? void 0 });
+    } catch (e) {
+      this.saving = false;
+      this.doneBtn.disabled = false;
+      this.doneBtn.textContent = this.m.done;
+      window.alert(this.m.saveFailed(e instanceof Error ? e.message : String(e)));
+      this.dialog.focus();
+    }
+  }
+  close(result) {
+    window.removeEventListener("resize", this.onResize);
+    window.removeEventListener("pointermove", this.onPointerMove);
+    window.removeEventListener("pointerup", this.onPointerUp);
+    window.removeEventListener("pointercancel", this.onPointerUp);
+    this.host.remove();
+    this.done(result);
+  }
+};
+function el(tag, className) {
+  const e = document.createElement(tag);
+  e.className = className;
+  return e;
+}
+function svgEl(tag, attrs) {
+  const e = document.createElementNS(SVG_NS, tag);
+  for (const [k, v] of Object.entries(attrs)) e.setAttribute(k, String(v));
+  return e;
+}
+function iconBtn(html, title, onClick) {
+  const b = document.createElement("button");
+  b.type = "button";
+  b.className = "nd-btn";
+  b.innerHTML = html;
+  b.title = title;
+  b.setAttribute("aria-label", title);
+  b.addEventListener("click", onClick);
+  return b;
+}
+function textBtn(label, onClick) {
+  const b = iconBtn("", label, onClick);
+  b.textContent = label;
+  b.classList.add("nd-btn--text");
+  return b;
+}
+function range(min, max, step, title, onInput) {
+  const r = document.createElement("input");
+  r.type = "range";
+  r.min = String(min);
+  r.max = String(max);
+  r.step = String(step);
+  r.className = "nd-range";
+  r.title = title;
+  r.setAttribute("aria-label", title);
+  r.addEventListener("input", onInput);
+  r.addEventListener("pointerdown", (e) => e.stopPropagation());
+  return r;
+}
+function openDrawing(opts = {}) {
+  return new DrawingBoard(opts).open();
+}
+
+// src/index.ts
+var VERSION = "0.1.0";
+
+export { DrawingBoard, VERSION, blobToDataURL, bounds, emptyDrawing, loadImage, en as messagesEn, ko as messagesKo, openDrawing, renderToPng };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map