@aznabee/freehand-ui 0.1.1

package/dist/freehand-ui.cjs

@@ -0,0 +1,1513 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  doodle: () => doodle
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils.js
+var DEFAULT_OPTIONS = {
+  border: true,
+  color: "#ffffff",
+  strokeWidth: 1.5,
+  roughness: 1.5,
+  padding: 8,
+  radius: null,
+  opacity: 0.9,
+  children: null,
+  note: null,
+  arrow: false,
+  decorations: false,
+  addBreaks: false
+};
+function resolveElement(target) {
+  if (!target) return null;
+  if (typeof target === "string") {
+    return document.querySelector(target);
+  }
+  if (target instanceof Element) {
+    return target;
+  }
+  return null;
+}
+function mergeOptions(options = {}) {
+  const merged = { ...DEFAULT_OPTIONS, ...options };
+  if (merged.note && typeof merged.note === "string") {
+    merged.note = { text: merged.note, position: "top-right" };
+  }
+  if (merged.arrow === true) {
+    const from = merged.note && typeof merged.note === "object" && merged.note.position ? merged.note.position : "top-right";
+    merged.arrow = { from, to: "edge", style: "curved" };
+  }
+  if (merged.decorations === true) {
+    merged.decorations = { count: null, types: null };
+  }
+  if (merged.addBreaks) {
+    const config = typeof merged.addBreaks === "number" ? { count: merged.addBreaks } : merged.addBreaks === true ? {} : merged.addBreaks;
+    merged.addBreaks = {
+      count: config.count ?? null,
+      min: config.min ?? 6,
+      max: config.max ?? 30
+    };
+  }
+  return merged;
+}
+function createRandom(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let t = Math.imul(state ^ state >>> 15, 1 | state);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function scheduleFrame(fn) {
+  if (typeof requestAnimationFrame === "function") {
+    return requestAnimationFrame(fn);
+  }
+  return setTimeout(fn, 16);
+}
+function cancelFrame(id) {
+  if (typeof cancelAnimationFrame === "function") {
+    cancelAnimationFrame(id);
+  } else {
+    clearTimeout(id);
+  }
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function isValidPosition(position) {
+  return [
+    "top",
+    "top-right",
+    "right",
+    "bottom-right",
+    "bottom",
+    "bottom-left",
+    "left",
+    "top-left",
+    "center"
+  ].includes(position);
+}
+function getScrollableAncestors(element) {
+  const ancestors = [];
+  let node = element.parentElement;
+  while (node && node !== document.documentElement) {
+    const style = getComputedStyle(node);
+    const overflow = style.overflow + style.overflowY + style.overflowX;
+    if (/(auto|scroll|overlay)/.test(overflow)) {
+      ancestors.push(node);
+    }
+    node = node.parentElement;
+  }
+  ancestors.push(window);
+  return ancestors;
+}
+
+// src/geometry.js
+function averageCornerRadius(element) {
+  const style = getComputedStyle(element);
+  const corners = [
+    style.borderTopLeftRadius,
+    style.borderTopRightRadius,
+    style.borderBottomRightRadius,
+    style.borderBottomLeftRadius
+  ];
+  const values = corners.map((value) => parseFloat(value) || 0).filter((value) => value > 0);
+  if (values.length === 0) return 0;
+  return values.reduce((sum, value) => sum + value, 0) / values.length;
+}
+function detectBorderRadius(element) {
+  const own = averageCornerRadius(element);
+  if (own > 0) return own;
+  const child = element.children.length === 1 ? element.firstElementChild : null;
+  if (!child) return 0;
+  const outer = element.getBoundingClientRect();
+  const inner = child.getBoundingClientRect();
+  const fitsTightly = Math.abs(outer.width - inner.width) <= 2 && Math.abs(outer.height - inner.height) <= 2;
+  return fitsTightly ? averageCornerRadius(child) : 0;
+}
+function getElementBounds(element, padding = 0, radiusOverride = null) {
+  const rect = element.getBoundingClientRect();
+  const radius = radiusOverride != null ? radiusOverride : detectBorderRadius(element);
+  const width = rect.width + padding * 2;
+  const height = rect.height + padding * 2;
+  return {
+    x: rect.left - padding,
+    y: rect.top - padding,
+    width,
+    height,
+    // Grow the radius with the padding so the doodle stays concentric with the
+    // element instead of cutting its corners.
+    radius: clamp(radius + padding * 0.6, 0, Math.min(width, height) / 2)
+  };
+}
+function relativeRect(outer, inner) {
+  return {
+    x: inner.x - outer.x,
+    y: inner.y - outer.y,
+    width: inner.width,
+    height: inner.height,
+    radius: inner.radius
+  };
+}
+function unionRects(rects, margin = 0) {
+  if (rects.length === 0) {
+    return { x: 0, y: 0, width: 0, height: 0, radius: 0 };
+  }
+  const minX = Math.min(...rects.map((r) => r.x)) - margin;
+  const minY = Math.min(...rects.map((r) => r.y)) - margin;
+  const maxX = Math.max(...rects.map((r) => r.x + r.width)) + margin;
+  const maxY = Math.max(...rects.map((r) => r.y + r.height)) + margin;
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+    radius: 0
+  };
+}
+function inflateRect(rect, amount) {
+  return {
+    x: rect.x - amount,
+    y: rect.y - amount,
+    width: rect.width + amount * 2,
+    height: rect.height + amount * 2
+  };
+}
+function intersectionArea(a, b) {
+  if (!a || !b) return 0;
+  const w = Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x);
+  const h = Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y);
+  return w > 0 && h > 0 ? w * h : 0;
+}
+function outsideArea(box, bounds) {
+  if (!bounds) return 0;
+  return Math.max(0, box.width * box.height - intersectionArea(box, bounds));
+}
+function nearestPointOnRect(rect, point) {
+  return {
+    x: clamp(point.x, rect.x, rect.x + rect.width),
+    y: clamp(point.y, rect.y, rect.y + rect.height)
+  };
+}
+function distanceToRoundedRect(point, rect, radius = 0) {
+  const r = clamp(radius, 0, Math.min(rect.width, rect.height) / 2);
+  const cx = clamp(point.x, rect.x + r, rect.x + rect.width - r);
+  const cy = clamp(point.y, rect.y + r, rect.y + rect.height - r);
+  return Math.hypot(point.x - cx, point.y - cy) - r;
+}
+function directionFromPosition(position) {
+  return {
+    x: position.includes("right") ? 1 : position.includes("left") ? -1 : 0,
+    y: position.includes("top") ? -1 : position.includes("bottom") ? 1 : 0
+  };
+}
+function pointFromPosition(position, rect) {
+  const cx = rect.x + rect.width / 2;
+  const cy = rect.y + rect.height / 2;
+  switch (position) {
+    case "top":
+      return { x: cx, y: rect.y };
+    case "top-right":
+      return { x: rect.x + rect.width, y: rect.y };
+    case "right":
+      return { x: rect.x + rect.width, y: cy };
+    case "bottom-right":
+      return { x: rect.x + rect.width, y: rect.y + rect.height };
+    case "bottom":
+      return { x: cx, y: rect.y + rect.height };
+    case "bottom-left":
+      return { x: rect.x, y: rect.y + rect.height };
+    case "left":
+      return { x: rect.x, y: cy };
+    case "top-left":
+      return { x: rect.x, y: rect.y };
+    case "center":
+    default:
+      return { x: cx, y: cy };
+  }
+}
+function annotationAnchor(position, rect, offset = 12) {
+  const point = pointFromPosition(position, rect);
+  if (position.includes("top")) point.y -= offset;
+  if (position.includes("bottom")) point.y += offset;
+  if (position.includes("left")) point.x -= offset;
+  if (position.includes("right")) point.x += offset;
+  if (position === "top") point.y -= offset * 0.5;
+  if (position === "bottom") point.y += offset * 0.5;
+  if (position === "left") point.x -= offset * 0.5;
+  if (position === "right") point.x += offset * 0.5;
+  return point;
+}
+
+// src/renderer.js
+var SVG_NS = "http://www.w3.org/2000/svg";
+var HANDWRITTEN_FONT = '"Caveat", "Kalam", "Patrick Hand", cursive';
+var NOTE_FONT_SIZE = 19;
+function clearSvg(svg) {
+  while (svg.firstChild) {
+    svg.removeChild(svg.firstChild);
+  }
+}
+function fmt(n) {
+  return (Number.isFinite(n) ? n : 0).toFixed(2);
+}
+function catmullRomPath(points, closed = false) {
+  if (!points.length) return "";
+  if (points.length === 1) {
+    return `M ${fmt(points[0].x)} ${fmt(points[0].y)}`;
+  }
+  const n = points.length;
+  const at = (i) => closed ? points[(i % n + n) % n] : points[clamp(i, 0, n - 1)];
+  let path = `M ${fmt(points[0].x)} ${fmt(points[0].y)}`;
+  const segments = closed ? n : n - 1;
+  for (let i = 0; i < segments; i++) {
+    const p0 = at(i - 1);
+    const p1 = at(i);
+    const p2 = at(i + 1);
+    const p3 = at(i + 2);
+    const c1x = p1.x + (p2.x - p0.x) / 6;
+    const c1y = p1.y + (p2.y - p0.y) / 6;
+    const c2x = p2.x - (p3.x - p1.x) / 6;
+    const c2y = p2.y - (p3.y - p1.y) / 6;
+    path += ` C ${fmt(c1x)} ${fmt(c1y)} ${fmt(c2x)} ${fmt(c2y)} ${fmt(p2.x)} ${fmt(p2.y)}`;
+  }
+  if (closed) path += " Z";
+  return path;
+}
+function createWave(random, period, amplitude) {
+  const p = period || 1;
+  const tau = Math.PI * 2 / p;
+  const f1 = tau * (2 + Math.floor(random() * 2));
+  const f2 = tau * (5 + Math.floor(random() * 3));
+  const phase1 = random() * Math.PI * 2;
+  const phase2 = random() * Math.PI * 2;
+  return (distance) => Math.sin(distance * f1 + phase1) * amplitude + Math.sin(distance * f2 + phase2) * amplitude * 0.4;
+}
+function roughLine(x1, y1, x2, y2, roughness, random, opts = {}) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const length = Math.hypot(dx, dy) || 1;
+  const steps = opts.steps ?? clamp(Math.round(length / 22), 2, 14);
+  const bow = opts.bow ?? 0;
+  const nx = -dy / length;
+  const ny = dx / length;
+  const amplitude = roughness * 0.32;
+  const frequency = 1 + random() * 1.4;
+  const phase = random() * Math.PI * 2;
+  const points = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const envelope = Math.sin(t * Math.PI);
+    const offset = bow * envelope + Math.sin(t * Math.PI * frequency + phase) * amplitude * envelope;
+    points.push({
+      x: x1 + dx * t + nx * offset,
+      y: y1 + dy * t + ny * offset
+    });
+  }
+  return catmullRomPath(points, false);
+}
+function roundedRectOutline(x, y, width, height, radius, spacing) {
+  const r = clamp(radius, 0, Math.min(width, height) / 2);
+  const right = x + width;
+  const bottom = y + height;
+  const HALF_PI = Math.PI / 2;
+  const line = (x1, y1, x2, y2, nx, ny) => ({
+    type: "line",
+    x1,
+    y1,
+    x2,
+    y2,
+    nx,
+    ny,
+    length: Math.hypot(x2 - x1, y2 - y1)
+  });
+  const arc = (cx, cy, start, end) => ({
+    type: "arc",
+    cx,
+    cy,
+    start,
+    end,
+    r,
+    length: Math.abs(end - start) * r
+  });
+  const segments = [
+    line(x + r, y, right - r, y, 0, -1),
+    arc(right - r, y + r, -HALF_PI, 0),
+    line(right, y + r, right, bottom - r, 1, 0),
+    arc(right - r, bottom - r, 0, HALF_PI),
+    line(right - r, bottom, x + r, bottom, 0, 1),
+    arc(x + r, bottom - r, HALF_PI, Math.PI),
+    line(x, bottom - r, x, y + r, -1, 0),
+    arc(x + r, y + r, Math.PI, Math.PI + HALF_PI)
+  ];
+  const total = segments.reduce((sum, seg) => sum + seg.length, 0);
+  const points = [];
+  const edgeStarts = [];
+  for (const seg of segments) {
+    if (seg.length <= 0.01) continue;
+    const steps = Math.max(1, Math.round(seg.length / spacing));
+    if (seg.type === "line") edgeStarts.push(points.length);
+    for (let i = 0; i < steps; i++) {
+      const t = i / steps;
+      if (seg.type === "line") {
+        points.push({
+          x: seg.x1 + (seg.x2 - seg.x1) * t,
+          y: seg.y1 + (seg.y2 - seg.y1) * t,
+          nx: seg.nx,
+          ny: seg.ny
+        });
+      } else {
+        const angle = seg.start + (seg.end - seg.start) * t;
+        const nx = Math.cos(angle);
+        const ny = Math.sin(angle);
+        points.push({
+          x: seg.cx + nx * seg.r,
+          y: seg.cy + ny * seg.r,
+          nx,
+          ny
+        });
+      }
+    }
+  }
+  return { points, total, edgeStarts };
+}
+function generateHandDrawnRectPaths(x, y, width, height, radius, roughness, random, opts = {}) {
+  if (width <= 0 || height <= 0) return [];
+  const spacing = opts.spacing ?? 11;
+  const { points, total, edgeStarts } = roundedRectOutline(
+    x,
+    y,
+    width,
+    height,
+    radius,
+    spacing
+  );
+  const count = points.length;
+  if (count < 3) return [];
+  const amplitude = opts.amplitude ?? roughness * 0.45;
+  const wave = createWave(random, total, amplitude);
+  const step = total / count;
+  const portion = clamp(opts.portion ?? 1, 0.05, 1);
+  const overshoot = opts.overshoot ?? 0;
+  let startIndex = Math.floor((opts.startAt ?? random()) * count);
+  if (opts.snapToEdge && edgeStarts.length) {
+    startIndex = edgeStarts.reduce(
+      (best, index) => Math.abs(index - startIndex) < Math.abs(best - startIndex) ? index : best
+    );
+  }
+  let drawn = Math.round(count * portion);
+  if (opts.snapToEdge && edgeStarts.length && portion < 1) {
+    const target = startIndex + drawn;
+    let snapped = target;
+    let bestDelta = Infinity;
+    for (let lap = 0; lap <= 2; lap++) {
+      for (const index of edgeStarts) {
+        const candidate = index + lap * count;
+        const delta = Math.abs(candidate - target);
+        if (candidate > startIndex + 2 && delta < bestDelta) {
+          bestDelta = delta;
+          snapped = candidate;
+        }
+      }
+    }
+    drawn = Math.min(snapped - startIndex, count);
+  }
+  const tail = portion >= 1 ? Math.max(1, Math.round(overshoot / step)) : 0;
+  const breaks = opts.breaks ?? [];
+  const runs = [];
+  let run = [];
+  for (let k = 0; k <= drawn + tail; k++) {
+    const index = (startIndex + k) % count;
+    if (breaks.length && isBroken(index / count, breaks)) {
+      if (run.length > 1) runs.push(run);
+      run = [];
+      continue;
+    }
+    const point = points[index];
+    let offset = wave((startIndex + k) * step);
+    if (tail > 0 && k > drawn) {
+      offset += (k - drawn) / tail * 0.5;
+    }
+    run.push({
+      x: point.x + point.nx * offset,
+      y: point.y + point.ny * offset
+    });
+  }
+  if (run.length > 1) runs.push(run);
+  return runs.map((points2) => catmullRomPath(points2, false));
+}
+function isBroken(fraction, breaks) {
+  return breaks.some(
+    (gap) => gap.end > gap.start ? fraction >= gap.start && fraction < gap.end : fraction >= gap.start || fraction < gap.end
+  );
+}
+function createBorderBreaks(perimeter, config, random) {
+  if (!config || perimeter <= 0) return [];
+  const settings = config === true ? {} : config;
+  const count = Math.max(
+    1,
+    Math.round(settings.count ?? 2 + random() * 3)
+  );
+  const min = Math.max(2, settings.min ?? 6);
+  const max = Math.max(min, settings.max ?? 30);
+  const slice = perimeter / count;
+  let budget = perimeter * 0.35;
+  const breaks = [];
+  for (let i = 0; i < count; i++) {
+    const length = Math.min(
+      min + random() * (max - min),
+      slice * 0.7,
+      budget
+    );
+    if (length < 2) break;
+    budget -= length;
+    const start = i * slice + random() * Math.max(0, slice - length);
+    breaks.push({
+      start: start / perimeter,
+      end: (start + length) / perimeter
+    });
+  }
+  return breaks;
+}
+function createGroup(parent, x, y, rotation = 0) {
+  const group = document.createElementNS(SVG_NS, "g");
+  group.setAttribute(
+    "transform",
+    `translate(${fmt(x)} ${fmt(y)}) rotate(${rotation.toFixed(1)})`
+  );
+  parent.appendChild(group);
+  return group;
+}
+function appendPath(svg, d, style) {
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", d);
+  path.setAttribute("fill", style.fill ?? "none");
+  path.setAttribute("stroke", style.color);
+  path.setAttribute("stroke-width", String(style.strokeWidth));
+  path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("stroke-linejoin", "round");
+  path.setAttribute("opacity", String(style.opacity));
+  if (style.dashed) {
+    path.setAttribute("stroke-dasharray", "2.5 4.5");
+  }
+  svg.appendChild(path);
+  return path;
+}
+function rectPerimeter(width, height, radius) {
+  const r = clamp(radius, 0, Math.min(width, height) / 2);
+  return 2 * (width - 2 * r) + 2 * (height - 2 * r) + 2 * Math.PI * r;
+}
+function drawBorder(svg, rect, options, seed) {
+  const random = createRandom(seed);
+  const roughness = clamp(options.roughness, 0, 3);
+  const radius = rect.radius || 0;
+  const breaks = options.breaks ? createBorderBreaks(
+    rectPerimeter(rect.width, rect.height, radius),
+    options.breaks,
+    random
+  ) : [];
+  const spacing = breaks.length ? 5.5 : 11;
+  const main = generateHandDrawnRectPaths(
+    rect.x,
+    rect.y,
+    rect.width,
+    rect.height,
+    radius,
+    roughness,
+    random,
+    {
+      amplitude: roughness * 0.5,
+      overshoot: 9 + roughness * 5,
+      startAt: random(),
+      snapToEdge: true,
+      spacing,
+      breaks
+    }
+  );
+  for (const d of main) {
+    appendPath(svg, d, {
+      color: options.color,
+      strokeWidth: options.strokeWidth,
+      opacity: options.opacity
+    });
+  }
+  if (roughness < 0.9) return;
+  const offset = 1.1 + random() * 0.9;
+  const ghost = generateHandDrawnRectPaths(
+    rect.x - offset,
+    rect.y - offset,
+    rect.width + offset * 2,
+    rect.height + offset * 2,
+    radius + offset,
+    roughness,
+    random,
+    {
+      amplitude: roughness * 0.45,
+      portion: 0.45 + random() * 0.25,
+      startAt: random(),
+      snapToEdge: true,
+      spacing,
+      breaks
+    }
+  );
+  for (const d of ghost) {
+    appendPath(svg, d, {
+      color: options.color,
+      strokeWidth: options.strokeWidth * 0.7,
+      opacity: options.opacity * 0.4
+    });
+  }
+}
+function normalize(vector) {
+  const length = Math.hypot(vector.x, vector.y);
+  if (!length) return { x: 0, y: 0 };
+  return { x: vector.x / length, y: vector.y / length };
+}
+function arrowStartFromNote(origin, target) {
+  const cx = origin.x + origin.width / 2;
+  const cy = origin.y + origin.height / 2;
+  const dx = target.x - cx;
+  const dy = target.y - cy;
+  const hw = origin.width / 2 || 1e-3;
+  const hh = origin.height / 2 || 1e-3;
+  const sx = Math.sign(dx) || 1;
+  const sy = Math.sign(dy) || 1;
+  if (Math.abs(dy) / hh >= Math.abs(dx) / hw) {
+    return { x: cx - sx * hw * 0.72, y: cy + sy * (hh + 7) };
+  }
+  return { x: cx + sx * (hw + 7), y: cy + sy * hh * 0.2 };
+}
+function arrowEndpoints(rect, arrowOptions, random, origin) {
+  const center = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+  const anchored = Boolean(origin && origin.width > 0 && origin.height > 0);
+  let start = anchored ? arrowStartFromNote(origin, center) : annotationAnchor(
+    arrowOptions.from || "top-right",
+    rect,
+    38 + random() * 12
+  );
+  const toPos = arrowOptions.to || "edge";
+  let end;
+  if (toPos === "center") {
+    end = center;
+  } else if (toPos === "edge") {
+    const near = nearestPointOnRect(rect, start);
+    let outward = normalize({ x: start.x - near.x, y: start.y - near.y });
+    if (!outward.x && !outward.y) outward = { x: 0, y: -1 };
+    const gap = 6 + random() * 3;
+    end = { x: near.x + outward.x * gap, y: near.y + outward.y * gap };
+  } else {
+    end = pointFromPosition(toPos, rect);
+  }
+  const distance = Math.hypot(end.x - start.x, end.y - start.y);
+  const minimum = 34;
+  if (!anchored && distance < minimum) {
+    const unit = distance > 0 ? { x: (start.x - end.x) / distance, y: (start.y - end.y) / distance } : { x: 0, y: -1 };
+    start = { x: end.x + unit.x * minimum, y: end.y + unit.y * minimum };
+  }
+  return { start, end };
+}
+function drawArrow(svg, rect, arrowOptions, style, seed, origin = null) {
+  const random = createRandom(seed + 17);
+  const { start, end } = arrowEndpoints(rect, arrowOptions, random, origin);
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const distance = Math.hypot(dx, dy) || 1;
+  const dashed = arrowOptions.style === "dotted";
+  let tipAngle = Math.atan2(dy, dx);
+  let shaft;
+  const hull = [start, end];
+  if (arrowOptions.style === "straight") {
+    shaft = roughLine(start.x, start.y, end.x, end.y, style.roughness, random, {
+      bow: (random() - 0.5) * style.roughness
+    });
+  } else {
+    const perpendicular = { x: -dy / distance, y: dx / distance };
+    const mid = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
+    const towardCenter = {
+      x: rect.x + rect.width / 2 - mid.x,
+      y: rect.y + rect.height / 2 - mid.y
+    };
+    const sign = perpendicular.x * towardCenter.x + perpendicular.y * towardCenter.y > 0 ? -1 : 1;
+    const bow = Math.min(distance * (0.16 + random() * 0.08), 30) * sign;
+    const c1x = start.x + dx * 0.28 + perpendicular.x * bow;
+    const c1y = start.y + dy * 0.28 + perpendicular.y * bow;
+    const c2x = start.x + dx * 0.72 + perpendicular.x * bow * 0.85;
+    const c2y = start.y + dy * 0.72 + perpendicular.y * bow * 0.85;
+    hull.push({ x: c1x, y: c1y }, { x: c2x, y: c2y });
+    shaft = `M ${fmt(start.x)} ${fmt(start.y)} C ${fmt(c1x)} ${fmt(c1y)} ${fmt(c2x)} ${fmt(c2y)} ${fmt(end.x)} ${fmt(end.y)}`;
+    if (style.roughness >= 1.1) {
+      const drift = () => (random() - 0.5) * 1.4;
+      const ghost = `M ${fmt(start.x + drift())} ${fmt(start.y + drift())} C ${fmt(c1x + drift())} ${fmt(c1y + drift())} ${fmt(c2x + drift())} ${fmt(c2y + drift())} ${fmt(end.x + drift() * 0.4)} ${fmt(end.y + drift() * 0.4)}`;
+      appendPath(svg, ghost, {
+        ...style,
+        opacity: style.opacity * 0.3,
+        strokeWidth: style.strokeWidth * 0.7,
+        dashed
+      });
+    }
+    tipAngle = Math.atan2(end.y - c2y, end.x - c2x);
+  }
+  appendPath(svg, shaft, { ...style, dashed });
+  const headLength = 9 + style.strokeWidth * 1.4;
+  const spread = 0.46 + random() * 0.1;
+  for (const side of [-1, 1]) {
+    const angle = tipAngle + spread * side;
+    const tail = {
+      x: end.x - headLength * Math.cos(angle),
+      y: end.y - headLength * Math.sin(angle)
+    };
+    appendPath(
+      svg,
+      roughLine(tail.x, tail.y, end.x, end.y, style.roughness * 0.5, random, {
+        steps: 2,
+        bow: 0.35 * side
+      }),
+      { ...style, dashed: false }
+    );
+  }
+  const xs = hull.map((p) => p.x);
+  const ys = hull.map((p) => p.y);
+  const bounds = {
+    x: Math.min(...xs),
+    y: Math.min(...ys),
+    width: Math.max(...xs) - Math.min(...xs),
+    height: Math.max(...ys) - Math.min(...ys)
+  };
+  return { start, end, bounds };
+}
+function drawUnderline(svg, x, y, width, style, random) {
+  if (width <= 4) return;
+  const slope = (random() - 0.5) * 2.4;
+  appendPath(
+    svg,
+    roughLine(x, y, x + width, y + slope, style.roughness * 0.6, random, {
+      bow: (random() - 0.5) * 1.4,
+      steps: 5
+    }),
+    {
+      color: style.color,
+      strokeWidth: style.strokeWidth * 0.95,
+      opacity: style.opacity * 0.9
+    }
+  );
+  const inset = width * (0.06 + random() * 0.12);
+  const length = width * (0.62 + random() * 0.24);
+  appendPath(
+    svg,
+    roughLine(
+      x + inset,
+      y + 2.6,
+      x + Math.min(width, inset + length),
+      y + 2.6 + slope * 0.6,
+      style.roughness * 0.5,
+      random,
+      { bow: (random() - 0.5) * 1.1, steps: 4 }
+    ),
+    {
+      color: style.color,
+      strokeWidth: style.strokeWidth * 0.7,
+      opacity: style.opacity * 0.38
+    }
+  );
+}
+function createNoteText(svg, text, style) {
+  const fontSize = style.fontSize ?? NOTE_FONT_SIZE;
+  const group = document.createElementNS(SVG_NS, "g");
+  const textEl = document.createElementNS(SVG_NS, "text");
+  textEl.textContent = text;
+  textEl.setAttribute("x", "0");
+  textEl.setAttribute("y", "0");
+  textEl.setAttribute("fill", style.color);
+  textEl.setAttribute("opacity", String(style.opacity));
+  textEl.setAttribute("font-size", String(fontSize));
+  textEl.setAttribute("font-family", HANDWRITTEN_FONT);
+  textEl.setAttribute("font-weight", "600");
+  textEl.setAttribute("letter-spacing", "0.4");
+  textEl.setAttribute("text-anchor", "start");
+  textEl.setAttribute("dominant-baseline", "auto");
+  group.appendChild(textEl);
+  svg.appendChild(group);
+  let width = 0;
+  try {
+    const box = textEl.getBBox();
+    if (box && box.width > 0) width = box.width;
+  } catch {
+  }
+  if (!width) {
+    try {
+      const measured = textEl.getComputedTextLength();
+      if (Number.isFinite(measured) && measured > 0) width = measured;
+    } catch {
+    }
+  }
+  if (!width) width = text.length * fontSize * 0.45;
+  const ascent = fontSize * 0.74;
+  const descent = fontSize * 0.26;
+  return { group, textEl, width, ascent, descent, fontSize };
+}
+function placeNoteText(note, box, style, seed, options = {}) {
+  const random = createRandom(seed + 55);
+  const tilt = options.tilt ?? (random() - 0.5) * 7;
+  note.textEl.setAttribute("x", fmt(box.x));
+  note.textEl.setAttribute("y", fmt(box.y + note.ascent));
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  note.group.setAttribute(
+    "transform",
+    `rotate(${tilt.toFixed(2)} ${fmt(cx)} ${fmt(cy)})`
+  );
+  if (options.underline !== false) {
+    drawUnderline(
+      note.group,
+      box.x + 1,
+      box.y + box.height + 2,
+      box.width - 2,
+      {
+        color: style.color,
+        strokeWidth: style.strokeWidth || 1.4,
+        roughness: style.roughness || 1.4,
+        opacity: style.opacity
+      },
+      random
+    );
+  }
+  return note.group;
+}
+function createOverlaySvg(left, top, width, height) {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", "doodle-ui-overlay");
+  svg.setAttribute("xmlns", SVG_NS);
+  svg.setAttribute("width", String(width));
+  svg.setAttribute("height", String(height));
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.style.position = "fixed";
+  svg.style.left = `${left}px`;
+  svg.style.top = `${top}px`;
+  svg.style.width = `${width}px`;
+  svg.style.height = `${height}px`;
+  svg.style.pointerEvents = "none";
+  svg.style.overflow = "visible";
+  svg.style.zIndex = "2147483646";
+  return svg;
+}
+
+// src/annotations.js
+var NOTE_GAP = 14;
+function mirror(position, axis) {
+  if (axis === "x") {
+    if (position.includes("right")) return position.replace("right", "left");
+    if (position.includes("left")) return position.replace("left", "right");
+    return position;
+  }
+  if (position.includes("top")) return position.replace("top", "bottom");
+  if (position.includes("bottom")) return position.replace("bottom", "top");
+  return position;
+}
+function candidatePositions(position) {
+  const candidates = [
+    position,
+    mirror(position, "x"),
+    mirror(position, "y"),
+    mirror(mirror(position, "x"), "y")
+  ];
+  return candidates.filter((value, index) => candidates.indexOf(value) === index);
+}
+function boxForPosition(rect, position, size, gap) {
+  const direction = directionFromPosition(position);
+  const guard = inflateRect(rect, gap);
+  const cx = rect.x + rect.width / 2;
+  const cy = rect.y + rect.height / 2;
+  let x;
+  let y;
+  if (direction.y !== 0) {
+    y = direction.y > 0 ? guard.y + guard.height : guard.y - size.height;
+    if (direction.x > 0) x = guard.x + guard.width - size.width * 0.35;
+    else if (direction.x < 0) x = guard.x - size.width * 0.65;
+    else x = cx - size.width / 2;
+  } else {
+    x = direction.x > 0 ? guard.x + guard.width : guard.x - size.width;
+    y = cy - size.height / 2;
+  }
+  return { x, y, width: size.width, height: size.height };
+}
+function placeNote(rect, position, size, gap, viewport) {
+  const guard = inflateRect(rect, gap * 0.7);
+  let best = null;
+  candidatePositions(position).forEach((candidate, index) => {
+    const box = boxForPosition(rect, candidate, size, gap);
+    const penalty = intersectionArea(box, guard) * 6 + outsideArea(box, viewport) + index * 0.5;
+    if (!best || penalty < best.penalty) {
+      best = { box, penalty, position: candidate };
+    }
+  });
+  return best;
+}
+function clampToViewport(box, guard, viewport) {
+  if (!viewport || viewport.width <= 0 || viewport.height <= 0) return box;
+  const shifted = {
+    ...box,
+    x: clamp(
+      box.x,
+      viewport.x,
+      Math.max(viewport.x, viewport.x + viewport.width - box.width)
+    ),
+    y: clamp(
+      box.y,
+      viewport.y,
+      Math.max(viewport.y, viewport.y + viewport.height - box.height)
+    )
+  };
+  if (intersectionArea(shifted, guard) > intersectionArea(box, guard)) {
+    return box;
+  }
+  return shifted;
+}
+function renderAnnotation(svg, rect, noteOptions, style, seed = 1, layout = {}) {
+  if (!noteOptions?.text) return null;
+  const viewport = layout.viewport ?? null;
+  const position = isValidPosition(noteOptions.position) ? noteOptions.position : "top-right";
+  const random = createRandom(seed + 9);
+  const note = createNoteText(svg, noteOptions.text, style);
+  const tilt = (random() - 0.45) * 7;
+  const tiltPad = Math.abs(Math.sin(tilt * Math.PI / 180)) * note.width * 0.5;
+  const size = {
+    width: note.width,
+    height: note.ascent + note.descent + (noteOptions.underline === false ? 0 : 5)
+  };
+  const gap = (layout.gap ?? NOTE_GAP) + random() * 6;
+  const placed = placeNote(
+    rect,
+    position,
+    { width: size.width, height: size.height + tiltPad },
+    gap,
+    viewport
+  );
+  const guard = inflateRect(rect, gap * 0.7);
+  const outer = clampToViewport(
+    { ...placed.box, height: size.height + tiltPad },
+    guard,
+    viewport
+  );
+  const box = {
+    x: outer.x,
+    y: outer.y + tiltPad / 2,
+    width: size.width,
+    height: note.ascent + note.descent
+  };
+  placeNoteText(note, box, style, seed, {
+    tilt,
+    underline: noteOptions.underline !== false
+  });
+  return { group: note.group, box: inflateRect(outer, 4), position: placed.position };
+}
+
+// src/decorations.js
+function drawDot(parent, x, y, style, scale = 1.7) {
+  appendPath(parent, `M ${x.toFixed(2)} ${y.toFixed(2)} l 0.01 0`, {
+    ...style,
+    strokeWidth: style.strokeWidth * scale
+  });
+}
+function drawHeart(parent, size, style, random) {
+  const s = size;
+  const j = () => (random() - 0.5) * s * 0.12;
+  const path = [
+    `M 0 ${(s * 0.95).toFixed(2)}`,
+    `C ${(-s * 1.16 + j()).toFixed(2)} ${(s * 0.08).toFixed(2)}, ${(-s * 0.94 + j()).toFixed(2)} ${(-s * 0.78).toFixed(2)}, 0 ${(-s * 0.3).toFixed(2)}`,
+    `C ${(s * 0.94 + j()).toFixed(2)} ${(-s * 0.78).toFixed(2)}, ${(s * 1.16 + j()).toFixed(2)} ${(s * 0.08).toFixed(2)}, 0 ${(s * 0.95).toFixed(2)}`,
+    "Z"
+  ].join(" ");
+  appendPath(parent, path, style);
+}
+function twinkle(parent, radiusX, radiusY, pinch, style) {
+  const rx = radiusX;
+  const ry = radiusY;
+  const c = pinch;
+  const path = [
+    `M 0 ${(-ry).toFixed(2)}`,
+    `Q ${c.toFixed(2)} ${(-c).toFixed(2)} ${rx.toFixed(2)} 0`,
+    `Q ${c.toFixed(2)} ${c.toFixed(2)} 0 ${ry.toFixed(2)}`,
+    `Q ${(-c).toFixed(2)} ${c.toFixed(2)} ${(-rx).toFixed(2)} 0`,
+    `Q ${(-c).toFixed(2)} ${(-c).toFixed(2)} 0 ${(-ry).toFixed(2)}`,
+    "Z"
+  ].join(" ");
+  appendPath(parent, path, style);
+}
+function drawSparkle(parent, size, style, random) {
+  twinkle(
+    parent,
+    size * (0.34 + random() * 0.1),
+    size,
+    size * (0.06 + random() * 0.06),
+    style
+  );
+}
+function drawStar(parent, size, style, random) {
+  twinkle(
+    parent,
+    size * (0.66 + random() * 0.12),
+    size,
+    size * (0.2 + random() * 0.08),
+    style
+  );
+}
+function drawTwinkle(parent, size, style, random) {
+  const count = 5;
+  const first = -Math.PI / 2 + (random() - 0.5) * 0.5;
+  const at = (angle, radius) => ({
+    x: Math.cos(angle) * radius,
+    y: Math.sin(angle) * radius
+  });
+  const tips = [];
+  for (let i = 0; i < count; i++) {
+    const angle = first + Math.PI * 2 * i / count + (random() - 0.5) * 0.24;
+    tips.push({ angle, ...at(angle, size * (0.8 + random() * 0.4)) });
+  }
+  let path = `M ${tips[0].x.toFixed(2)} ${tips[0].y.toFixed(2)}`;
+  for (let i = 0; i < count; i++) {
+    const from = tips[i];
+    const to = tips[(i + 1) % count];
+    let delta = to.angle - from.angle;
+    while (delta <= 0) delta += Math.PI * 2;
+    const control = at(
+      from.angle + delta / 2 + (random() - 0.5) * 0.16,
+      size * (0.02 + random() * 0.13)
+    );
+    path += ` Q ${control.x.toFixed(2)} ${control.y.toFixed(2)} ${to.x.toFixed(2)} ${to.y.toFixed(2)}`;
+  }
+  path += " Z";
+  const filled = appendPath(parent, path, {
+    ...style,
+    fill: style.color,
+    strokeWidth: style.strokeWidth * 0.45
+  });
+  filled.setAttribute("stroke-linejoin", "miter");
+  filled.setAttribute("stroke-linecap", "butt");
+}
+function drawArcs(parent, size, style, random) {
+  const count = 2 + Math.floor(random() * 2);
+  const focus = size * 0.55;
+  for (let i = 0; i < count; i++) {
+    const radius = size * (0.75 + i * 0.4);
+    const sweep = 0.8 + random() * 0.3 - i * 0.08;
+    const steps = 7;
+    const points = [];
+    for (let s = 0; s <= steps; s++) {
+      const angle = -Math.PI / 2 - sweep / 2 + sweep * (s / steps);
+      const wobble = radius + (random() - 0.5) * size * 0.06;
+      points.push({
+        x: Math.cos(angle) * wobble,
+        y: focus + Math.sin(angle) * wobble
+      });
+    }
+    appendPath(parent, catmullRomPath(points, false), {
+      ...style,
+      strokeWidth: style.strokeWidth * (1 - i * 0.12),
+      opacity: style.opacity * (1 - i * 0.14)
+    });
+  }
+}
+function drawSmiley(parent, size, style, random) {
+  const r = size * 0.92;
+  const circle = generateHandDrawnRectPaths(
+    -r,
+    -r,
+    r * 2,
+    r * 2,
+    r,
+    style.roughness * 0.7,
+    random,
+    {
+      amplitude: style.roughness * 0.22,
+      overshoot: r * 0.55,
+      spacing: Math.max(3, r * 0.45),
+      startAt: random()
+    }
+  );
+  for (const d of circle) {
+    appendPath(parent, d, { ...style, strokeWidth: style.strokeWidth * 0.9 });
+  }
+  drawDot(parent, -r * 0.36, -r * 0.22, style, 1.5);
+  drawDot(parent, r * 0.36, -r * 0.22, style, 1.5);
+  appendPath(
+    parent,
+    `M ${(-r * 0.44).toFixed(2)} ${(r * 0.18).toFixed(2)} Q 0 ${(r * 0.72).toFixed(2)} ${(r * 0.44).toFixed(2)} ${(r * 0.18).toFixed(2)}`,
+    style
+  );
+}
+function drawEmphasis(parent, size, style, random, opts = {}) {
+  const count = opts.count ?? 3 + Math.floor(random() * 2);
+  const spread = opts.spread ?? 0.62 + random() * 0.3;
+  for (let i = 0; i < count; i++) {
+    const t = count === 1 ? 0 : i / (count - 1) - 0.5;
+    const angle = -Math.PI / 2 + t * spread * 2;
+    const inner = size * (0.34 + random() * 0.12);
+    const outer = size * (0.86 + random() * 0.36);
+    appendPath(
+      parent,
+      roughLine(
+        Math.cos(angle) * inner,
+        Math.sin(angle) * inner,
+        Math.cos(angle) * outer,
+        Math.sin(angle) * outer,
+        0.7,
+        random,
+        { steps: 2, bow: (random() - 0.5) * 0.9 }
+      ),
+      { ...style, strokeWidth: style.strokeWidth * (0.85 + random() * 0.4) }
+    );
+  }
+}
+function drawDots(parent, size, style, random) {
+  let x = -size * 0.7;
+  for (let i = 0; i < 3; i++) {
+    drawDot(parent, x, (random() - 0.5) * size * 0.16, style);
+    x += size * (0.6 + random() * 0.25);
+  }
+}
+function drawStroke(parent, size, style, random) {
+  appendPath(
+    parent,
+    roughLine(-size, 0, size, 0, 1.2, random, {
+      bow: (random() - 0.5) * size * 0.35,
+      steps: 4
+    }),
+    style
+  );
+}
+function drawSteam(parent, size, style, random) {
+  const lean = random() < 0.5 ? -1 : 1;
+  for (let i = 0; i < 2; i++) {
+    const x = (i - 0.5) * size * 0.72;
+    const base = size * 0.62 - i * size * 0.14;
+    appendPath(
+      parent,
+      `M ${x.toFixed(2)} ${base.toFixed(2)} Q ${(x + lean * size * 0.52).toFixed(2)} ${(base - size * 0.62).toFixed(2)} ${(x + lean * size * 0.06).toFixed(2)} ${(base - size * 1.3).toFixed(2)}`,
+      style
+    );
+  }
+}
+var DECORATION_DRAWERS = {
+  heart: drawHeart,
+  sparkle: drawSparkle,
+  star: drawStar,
+  twinkle: drawTwinkle,
+  smiley: drawSmiley,
+  emphasis: drawEmphasis,
+  arcs: drawArcs,
+  dots: drawDots,
+  stroke: drawStroke,
+  steam: drawSteam
+};
+var TEXT_TYPES = ["heart", "sparkle"];
+var CORNER_ACCENTS = ["arcs", "emphasis"];
+var CORNER_STARS = ["twinkle", "star"];
+var MAX_BORDER_MARKS = 2;
+var TYPE_TRAITS = {
+  heart: { size: [7, 10], tilt: 14, standoff: 22 },
+  sparkle: { size: [6, 9], tilt: 20, standoff: 22 },
+  star: { size: [8, 11], tilt: 25, standoff: 26 },
+  twinkle: { size: [5, 7.5], tilt: 30, standoff: 26, brightness: 1.4 },
+  smiley: { size: [8, 11], tilt: 10, standoff: 22 },
+  emphasis: { size: [12, 17], tilt: 10, standoff: 13, outward: true },
+  arcs: { size: [11, 16], tilt: 12, standoff: 12, outward: true },
+  dots: { size: [6, 9], tilt: 8, standoff: 20 },
+  stroke: { size: [8, 12], tilt: 40, standoff: 20 },
+  steam: { size: [8, 11], tilt: 10, standoff: 20 }
+};
+var DEFAULT_TYPES = [
+  "twinkle",
+  "arcs",
+  "emphasis",
+  "heart",
+  "sparkle"
+];
+function isClear(point, radius, blockers) {
+  const box = {
+    x: point.x - radius,
+    y: point.y - radius,
+    width: radius * 2,
+    height: radius * 2
+  };
+  return !blockers.some((blocker) => intersectionArea(box, blocker) > 0);
+}
+function pickFrom(types, family, random) {
+  const pool = types.filter(
+    (type) => family.includes(type) && DECORATION_DRAWERS[type]
+  );
+  if (!pool.length) return null;
+  return pool[Math.floor(random() * pool.length)];
+}
+function sizeFrom(range, random) {
+  return range[0] + random() * (range[1] - range[0]);
+}
+function markOpacity(style, traits, variation) {
+  return clamp(style.opacity * variation * (traits.brightness ?? 1), 0, 1);
+}
+function cornerAnchors(rect) {
+  const radius = clamp(
+    rect.radius ?? 0,
+    0,
+    Math.min(rect.width, rect.height) / 2
+  );
+  const d = Math.SQRT1_2;
+  const right = rect.x + rect.width - radius;
+  const bottom = rect.y + rect.height - radius;
+  const left = rect.x + radius;
+  const top = rect.y + radius;
+  return [
+    { cx: left, cy: top, dir: { x: -d, y: -d } },
+    { cx: right, cy: top, dir: { x: d, y: -d } },
+    { cx: right, cy: bottom, dir: { x: d, y: d } },
+    { cx: left, cy: bottom, dir: { x: -d, y: d } }
+  ].map((anchor) => ({ ...anchor, radius }));
+}
+function cornerPoint(anchor, standoff) {
+  return {
+    x: anchor.cx + anchor.dir.x * (anchor.radius + standoff),
+    y: anchor.cy + anchor.dir.y * (anchor.radius + standoff)
+  };
+}
+function outwardTilt(dir) {
+  return Math.atan2(dir.y, dir.x) * 180 / Math.PI + 90;
+}
+function placeAtCorner(svg, type, anchor, style, random, hasRoom) {
+  const traits = TYPE_TRAITS[type] ?? { size: [8, 12], tilt: 15 };
+  const size = sizeFrom(traits.size, random);
+  const point = cornerPoint(anchor, traits.standoff ?? 20);
+  const needed = (traits.outward ? size * 0.35 : size) + 4;
+  if (!hasRoom(point, needed)) return false;
+  const tilt = traits.outward ? outwardTilt(anchor.dir) + (random() - 0.5) * traits.tilt : (random() - 0.5) * traits.tilt;
+  DECORATION_DRAWERS[type](
+    createGroup(svg, point.x, point.y, tilt),
+    size,
+    { ...style, opacity: markOpacity(style, traits, 0.8 + random() * 0.18) },
+    random
+  );
+  return true;
+}
+function renderCornerMarks(svg, rect, types, budget, style, random, hasRoom) {
+  const accent = pickFrom(types, CORNER_ACCENTS, random);
+  const star = pickFrom(types, CORNER_STARS, random);
+  const picks = [accent, star].filter(Boolean);
+  if (picks.length < budget) {
+    const rest = types.filter(
+      (type) => DECORATION_DRAWERS[type] && !TEXT_TYPES.includes(type) && !CORNER_ACCENTS.includes(type) && !CORNER_STARS.includes(type)
+    );
+    picks.push(...rest);
+  }
+  if (!picks.length) return;
+  for (let i = 0; picks.length < budget; i++) {
+    picks.push(picks[i % picks.length]);
+  }
+  const anchors = cornerAnchors(rect).map((anchor) => ({ anchor, rank: random() })).sort((a, b) => a.rank - b.rank).map((entry) => entry.anchor);
+  let placed = 0;
+  let previous = null;
+  for (const type of picks.slice(0, budget)) {
+    const ordered = previous ? [...anchors].sort(
+      (a, b) => Math.hypot(b.cx - previous.cx, b.cy - previous.cy) - Math.hypot(a.cx - previous.cx, a.cy - previous.cy)
+    ) : anchors;
+    const anchor = ordered.find(
+      (candidate) => candidate !== previous && placeAtCorner(svg, type, candidate, style, random, hasRoom)
+    );
+    if (anchor) {
+      previous = anchor;
+      placed += 1;
+      if (placed >= budget) break;
+    }
+  }
+}
+function renderSideMarks(svg, rect, style, random, hasRoom) {
+  const cy = rect.y + rect.height / 2;
+  for (const side of [-1, 1]) {
+    const size = 10 + random() * 4;
+    const dir = { x: side, y: 0 };
+    const point = {
+      x: side < 0 ? rect.x - (13 + size * 0.35) : rect.x + rect.width + (13 + size * 0.35),
+      y: cy + (random() - 0.5) * rect.height * 0.45
+    };
+    if (!hasRoom(point, size * 0.35 + 4)) continue;
+    drawEmphasis(
+      createGroup(
+        svg,
+        point.x,
+        point.y,
+        outwardTilt(dir) + (random() - 0.5) * 12
+      ),
+      size,
+      { ...style, opacity: style.opacity * (0.82 + random() * 0.15) },
+      random,
+      { count: 2, spread: 0.3 + random() * 0.14 }
+    );
+  }
+}
+function renderTextMark(svg, rect, note, types, style, random) {
+  if (!note) return null;
+  const type = pickFrom(types, TEXT_TYPES, random);
+  if (!type) return null;
+  const traits = TYPE_TRAITS[type];
+  const size = sizeFrom(traits.size, random);
+  const trailing = note.x + note.width / 2 >= rect.x + rect.width / 2 ? 1 : -1;
+  const x = trailing > 0 ? note.x + note.width + size + 2 : note.x - size - 2;
+  const y = note.y + note.height * 0.44;
+  DECORATION_DRAWERS[type](
+    createGroup(svg, x, y, (random() - 0.5) * traits.tilt),
+    size,
+    { ...style, opacity: markOpacity(style, traits, 0.85 + random() * 0.15) },
+    random
+  );
+  return {
+    x: x - size - 2,
+    y: y - size - 2,
+    width: size * 2 + 4,
+    height: size * 2 + 4
+  };
+}
+function isSmall(rect) {
+  return Math.min(rect.width, rect.height) < 48 || rect.width < 130;
+}
+function renderDecorations(svg, rect, decorationOptions, style, seed, context = {}) {
+  const random = createRandom(seed + 101);
+  const types = decorationOptions.types?.length ? decorationOptions.types : DEFAULT_TYPES;
+  const avoid = [...context.avoid ?? []];
+  const textMark = renderTextMark(
+    svg,
+    rect,
+    context.note ?? null,
+    types,
+    style,
+    random
+  );
+  if (textMark) avoid.push(textMark);
+  const budget = Math.min(
+    decorationOptions.count ?? MAX_BORDER_MARKS,
+    MAX_BORDER_MARKS
+  );
+  if (budget < 1) return;
+  const hasRoom = (point, radius) => distanceToRoundedRect(point, rect, rect.radius) >= radius && isClear(point, radius, avoid);
+  const layout = decorationOptions.style ?? (isSmall(rect) && types.includes("emphasis") ? "sides" : "corners");
+  if (layout === "sides") {
+    renderSideMarks(svg, rect, style, random, hasRoom);
+  } else {
+    renderCornerMarks(svg, rect, types, budget, style, random, hasRoom);
+  }
+}
+
+// src/doodle.js
+var instances = /* @__PURE__ */ new WeakMap();
+function localViewport(overlayRect, inset = 8) {
+  const width = window.innerWidth || document.documentElement.clientWidth || 0;
+  const height = window.innerHeight || document.documentElement.clientHeight || 0;
+  return {
+    x: -overlayRect.x + inset,
+    y: -overlayRect.y + inset,
+    width: Math.max(0, width - inset * 2),
+    height: Math.max(0, height - inset * 2)
+  };
+}
+var DoodleOverlay = class {
+  /**
+   * @param {Element} element
+   * @param {ReturnType<typeof mergeOptions>} options
+   */
+  constructor(element, options) {
+    this.element = element;
+    this.options = options;
+    this.seed = Math.floor(Math.random() * 1e9);
+    this.svg = null;
+    this.resizeObserver = null;
+    this.mutationObserver = null;
+    this.pendingFrame = null;
+    this.scrollTargets = [];
+    this.onScroll = this.scheduleUpdate.bind(this);
+    this.onResize = this.scheduleUpdate.bind(this);
+    this.childElements = [];
+    this.mount();
+  }
+  mount() {
+    this.svg = createOverlaySvg(0, 0, 0, 0);
+    document.body.appendChild(this.svg);
+    this.resizeObserver = new ResizeObserver(this.onResize);
+    this.resizeObserver.observe(this.element);
+    if (this.options.children) {
+      this.observeChildren();
+    }
+    this.mutationObserver = new MutationObserver(this.scheduleUpdate.bind(this));
+    this.mutationObserver.observe(this.element, {
+      childList: true,
+      subtree: true,
+      attributes: true
+    });
+    for (const target of getScrollableAncestors(this.element)) {
+      target.addEventListener("scroll", this.onScroll, { passive: true });
+      this.scrollTargets.push({ target, type: "scroll" });
+    }
+    window.addEventListener("resize", this.onResize, { passive: true });
+    this.scrollTargets.push({ target: window, type: "resize" });
+    document.fonts?.ready?.then(() => this.scheduleUpdate()).catch(() => {
+    });
+    this.update();
+  }
+  observeChildren() {
+    const children = this.element.querySelectorAll(this.options.children);
+    this.childElements = Array.from(children);
+    for (const child of this.childElements) {
+      this.resizeObserver.observe(child);
+    }
+  }
+  scheduleUpdate() {
+    if (this.pendingFrame != null) return;
+    this.pendingFrame = scheduleFrame(() => {
+      this.pendingFrame = null;
+      this.update();
+    });
+  }
+  getTargets() {
+    if (this.options.children) {
+      const nodes = this.element.querySelectorAll(this.options.children);
+      return Array.from(nodes);
+    }
+    return [this.element];
+  }
+  update() {
+    if (!this.svg || !this.element.isConnected) return;
+    const { padding, radius, color, strokeWidth, roughness, opacity } = this.options;
+    const targets = this.getTargets();
+    const margin = this.overlayMargin();
+    const absoluteRects = targets.map(
+      (target) => getElementBounds(target, padding, radius)
+    );
+    const overlayRect = unionRects(absoluteRects, margin);
+    clearSvg(this.svg);
+    this.svg.setAttribute("width", String(overlayRect.width));
+    this.svg.setAttribute("height", String(overlayRect.height));
+    this.svg.setAttribute("viewBox", `0 0 ${overlayRect.width} ${overlayRect.height}`);
+    this.svg.style.left = `${overlayRect.x}px`;
+    this.svg.style.top = `${overlayRect.y}px`;
+    this.svg.style.width = `${overlayRect.width}px`;
+    this.svg.style.height = `${overlayRect.height}px`;
+    const strokeStyle = { color, strokeWidth, roughness, opacity };
+    const noteStyle = { color, opacity, strokeWidth, roughness };
+    const noteGroups = [];
+    const noteLayout = {
+      viewport: localViewport(overlayRect),
+      gap: this.options.arrow ? 32 : 14
+    };
+    targets.forEach((target, index) => {
+      const absolute = absoluteRects[index];
+      const local = relativeRect(overlayRect, absolute);
+      const seed = this.seed + index * 31;
+      const note = this.options.note && index === 0 ? renderAnnotation(
+        this.svg,
+        local,
+        this.options.note,
+        noteStyle,
+        seed,
+        noteLayout
+      ) : null;
+      if (this.options.border) {
+        drawBorder(
+          this.svg,
+          local,
+          { ...strokeStyle, breaks: this.options.addBreaks },
+          seed
+        );
+      }
+      const arrow = this.options.arrow ? drawArrow(
+        this.svg,
+        local,
+        this.options.arrow,
+        strokeStyle,
+        seed,
+        note ? note.box : null
+      ) : null;
+      if (this.options.decorations) {
+        renderDecorations(
+          this.svg,
+          local,
+          this.options.decorations,
+          strokeStyle,
+          seed,
+          {
+            avoid: [note?.box, arrow?.bounds].filter(Boolean),
+            note: note?.box ?? null
+          }
+        );
+      }
+      if (note) noteGroups.push(note.group);
+    });
+    for (const group of noteGroups) {
+      this.svg.appendChild(group);
+    }
+  }
+  /**
+   * Room the overlay needs beyond the element for notes, arrows and decorations.
+   */
+  overlayMargin() {
+    const { note, arrow, decorations } = this.options;
+    if (!note && !arrow && !decorations) return 48;
+    const text = typeof note?.text === "string" ? note.text : "";
+    return Math.max(96, Math.min(240, 80 + text.length * 8));
+  }
+  destroy() {
+    if (this.pendingFrame != null) {
+      cancelFrame(this.pendingFrame);
+      this.pendingFrame = null;
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+    for (const { target, type } of this.scrollTargets) {
+      target.removeEventListener(type, type === "scroll" ? this.onScroll : this.onResize);
+    }
+    this.scrollTargets = [];
+    if (this.svg?.parentNode) {
+      this.svg.parentNode.removeChild(this.svg);
+    }
+    this.svg = null;
+    instances.delete(this.element);
+  }
+};
+function doodle(target, options = {}) {
+  const element = resolveElement(target);
+  if (!element) {
+    throw new Error("doodle-ui: target element not found");
+  }
+  const existing = instances.get(element);
+  if (existing) {
+    existing.destroy();
+  }
+  const merged = mergeOptions(options);
+  const instance = new DoodleOverlay(element, merged);
+  instances.set(element, instance);
+  return {
+    update: () => instance.update(),
+    destroy: () => instance.destroy()
+  };
+}