@aznabee/freehand-ui 0.1.8 → 0.2.1

package/dist/native.cjs

@@ -0,0 +1,2422 @@
+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/native/react-native.js
+var react_native_exports = {};
+__export(react_native_exports, {
+  Doodle: () => Doodle,
+  buildDoodle: () => buildDoodle,
+  default: () => react_native_default
+});
+module.exports = __toCommonJS(react_native_exports);
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_react_native_svg = require("react-native-svg");
+
+// src/animation.js
+var STYLE_MARKER = "data-freehand-animation";
+var CSS = `
+@keyframes freehand-arrow-dash {
+  from { stroke-dashoffset: var(--freehand-dash, 0px); }
+  to { stroke-dashoffset: 0; }
+}
+@keyframes freehand-arrow-drift {
+  0%, 100% { transform: translate(0px, 0px); }
+  50% { transform: translate(var(--freehand-drift-x, 0px), var(--freehand-drift-y, 0px)); }
+}
+@keyframes freehand-arrow-settle {
+  from { transform: translate(0px, 0px); }
+  to { transform: translate(var(--freehand-drift-x, 0px), var(--freehand-drift-y, 0px)); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .freehand-arrow, .freehand-arrow path { animation: none !important; }
+  .freehand-arrow path { stroke-dashoffset: 0 !important; }
+}
+`;
+var ARROW_ANIMATION_DEFAULTS = {
+  /** Reveal the stroke with a dash sweep. */
+  draw: true,
+  /** Lean the arrow toward its tip. */
+  drift: true,
+  /** Multiplier over every duration - 2 plays twice as fast. */
+  speed: 1,
+  /** How long the shaft takes to draw, ms, before `speed`. */
+  duration: 900,
+  /** Wait before the first stroke appears, ms. */
+  delay: 150,
+  /** How far the arrow leans, px. */
+  distance: 5,
+  /** One full lean-and-return, ms. */
+  driftDuration: 2200,
+  /** Keep leaning. `false` settles once and stays put. */
+  repeat: true
+};
+function positive(value, fallback) {
+  const n = Number(value);
+  return Number.isFinite(n) && n > 0 ? n : fallback;
+}
+function atLeastZero(value, fallback) {
+  const n = Number(value);
+  return Number.isFinite(n) && n >= 0 ? n : fallback;
+}
+function normalizeArrowAnimation(config) {
+  if (config === false || config === null) return false;
+  const settings = config === true || config === void 0 || typeof config !== "object" ? {} : config;
+  const animation = {
+    draw: settings.draw !== false,
+    drift: settings.drift !== false,
+    speed: positive(settings.speed, ARROW_ANIMATION_DEFAULTS.speed),
+    duration: positive(settings.duration, ARROW_ANIMATION_DEFAULTS.duration),
+    delay: atLeastZero(settings.delay, ARROW_ANIMATION_DEFAULTS.delay),
+    distance: atLeastZero(settings.distance, ARROW_ANIMATION_DEFAULTS.distance),
+    driftDuration: positive(
+      settings.driftDuration,
+      ARROW_ANIMATION_DEFAULTS.driftDuration
+    ),
+    repeat: settings.repeat !== false
+  };
+  if (!animation.draw && (!animation.drift || !animation.distance)) return false;
+  return animation;
+}
+var FLOW_PERIOD = 260;
+function arrowTiming(animation) {
+  const duration = animation.duration / animation.speed;
+  const delay = animation.delay / animation.speed;
+  const drawn = animation.draw ? duration : 0;
+  return {
+    shaft: { duration, delay },
+    head: { duration: duration * 0.22, delay: delay + drawn * 0.82 },
+    flow: { duration: FLOW_PERIOD / animation.speed, delay },
+    drift: {
+      duration: animation.driftDuration / animation.speed,
+      delay: delay + drawn * 1.04
+    }
+  };
+}
+var injected = false;
+function ensureArrowAnimationStyles() {
+  if (injected) return;
+  if (typeof document === "undefined" || !document.head) return;
+  injected = true;
+  if (document.querySelector(`style[${STYLE_MARKER}]`)) return;
+  const style = document.createElement("style");
+  style.setAttribute(STYLE_MARKER, "");
+  style.textContent = CSS;
+  document.head.appendChild(style);
+}
+function time(ms) {
+  return `${Math.round(ms)}ms`;
+}
+function setAnimation(element, spec) {
+  const parts = [
+    spec.name,
+    time(spec.duration),
+    spec.easing,
+    time(spec.delay),
+    spec.iterations ?? "1"
+  ];
+  if (spec.fill) parts.push(spec.fill);
+  element.style.animation = parts.join(" ");
+}
+function pathLength(path) {
+  try {
+    const length = path.getTotalLength();
+    return Number.isFinite(length) && length > 0 ? length : 0;
+  } catch {
+    return 0;
+  }
+}
+function dashPeriod(path) {
+  const pattern = (path.getAttribute("stroke-dasharray") || "").split(/[\s,]+/).map(Number).filter((n) => Number.isFinite(n) && n > 0);
+  if (!pattern.length) return 0;
+  const sum = pattern.reduce((total, n) => total + n, 0);
+  return pattern.length % 2 === 0 ? sum : sum * 2;
+}
+function applyDash(path, timing, elapsed, flow) {
+  const length = pathLength(path);
+  if (!length) return;
+  const period = dashPeriod(path);
+  if (period) {
+    path.style.setProperty("--freehand-dash", `${period.toFixed(2)}px`);
+    setAnimation(path, {
+      name: "freehand-arrow-dash",
+      duration: flow.duration,
+      easing: "linear",
+      delay: flow.delay - elapsed,
+      iterations: "infinite"
+    });
+    return;
+  }
+  path.style.setProperty("--freehand-dash", `${length.toFixed(2)}px`);
+  path.style.strokeDasharray = `${length.toFixed(2)}px`;
+  setAnimation(path, {
+    name: "freehand-arrow-dash",
+    duration: timing.duration,
+    easing: "ease-out",
+    delay: timing.delay - elapsed,
+    fill: "both"
+  });
+}
+function applyDrift(group, parts, timing, elapsed, animation) {
+  const dx = parts.end.x - parts.start.x;
+  const dy = parts.end.y - parts.start.y;
+  const length = Math.hypot(dx, dy);
+  if (!length) return;
+  const scale = animation.distance / length;
+  group.style.setProperty("--freehand-drift-x", `${(dx * scale).toFixed(2)}px`);
+  group.style.setProperty("--freehand-drift-y", `${(dy * scale).toFixed(2)}px`);
+  setAnimation(
+    group,
+    animation.repeat ? {
+      name: "freehand-arrow-drift",
+      duration: timing.duration,
+      easing: "ease-in-out",
+      delay: timing.delay - elapsed,
+      iterations: "infinite"
+    } : {
+      // A single lean is a settle, not a round trip, so it takes half a cycle
+      name: "freehand-arrow-settle",
+      duration: timing.duration * 0.5,
+      easing: "ease-out",
+      delay: timing.delay - elapsed,
+      fill: "both"
+    }
+  );
+}
+function animateArrow(group, parts, animation, elapsed = 0) {
+  if (!animation || !group) return;
+  ensureArrowAnimationStyles();
+  group.setAttribute("class", "freehand-arrow");
+  const timing = arrowTiming(animation);
+  const age = Number.isFinite(elapsed) ? Math.max(0, elapsed) : 0;
+  if (animation.draw) {
+    for (const path of parts.shaft) {
+      applyDash(path, timing.shaft, age, timing.flow);
+    }
+    for (const path of parts.head) applyDash(path, timing.head, age, timing.flow);
+  }
+  if (animation.drift && animation.distance > 0) {
+    applyDrift(group, parts, timing.drift, age, animation);
+  }
+}
+
+// src/locale.js
+var DEFAULT_KEY = "default";
+var LANGUAGE_TAG = /^[a-z]{2,3}(-[a-z0-9]{2,8})*$/i;
+var RTL_STRONG = /[֑-߿יִ-﷿ﹰ-ﻼ]/;
+var LTR_STRONG = /[A-Za-zÀ-֏ऀ-῿Ⰰ-퟿豈-ﬗＡ-Ｚａ-ｚ]/;
+function normalizeTag(tag) {
+  if (typeof tag !== "string") return "";
+  return tag.trim().replace(/_/g, "-").toLowerCase();
+}
+function isLocaleMap(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const entries = Object.entries(value);
+  if (!entries.length) return false;
+  return entries.every(([key, text]) => {
+    if (typeof text !== "string") return false;
+    const tag = normalizeTag(key);
+    return tag === DEFAULT_KEY || LANGUAGE_TAG.test(tag);
+  });
+}
+function preferredLocales(override) {
+  const tags = [];
+  const add = (value) => {
+    const tag = normalizeTag(value);
+    if (tag && !tags.includes(tag)) tags.push(tag);
+  };
+  if (Array.isArray(override)) override.forEach(add);
+  else add(override);
+  const nav = typeof navigator === "undefined" ? null : navigator;
+  if (nav) {
+    if (Array.isArray(nav.languages)) nav.languages.forEach(add);
+    add(nav.language);
+  }
+  if (typeof document !== "undefined") add(document.documentElement?.lang);
+  return tags;
+}
+function matchLocale(tags, preferred) {
+  const available = tags.map(normalizeTag);
+  for (const want of preferred) {
+    let tag = want;
+    while (tag) {
+      const exact = available.indexOf(tag);
+      if (exact !== -1) return exact;
+      const cut = tag.lastIndexOf("-");
+      tag = cut > 0 ? tag.slice(0, cut) : "";
+    }
+    const base = want.split("-")[0];
+    const sibling = available.findIndex((key) => key.split("-")[0] === base);
+    if (sibling !== -1) return sibling;
+  }
+  return -1;
+}
+function resolveLocalizedText(text, locale = null) {
+  if (typeof text === "string") return { text, locale: null };
+  if (!isLocaleMap(text)) return { text: "", locale: null };
+  const keys = Object.keys(text);
+  const tags = keys.filter((key) => normalizeTag(key) !== DEFAULT_KEY);
+  const index = matchLocale(tags, preferredLocales(locale));
+  if (index !== -1) {
+    return { text: text[tags[index]], locale: normalizeTag(tags[index]) };
+  }
+  const fallback = keys.find((key) => normalizeTag(key) === DEFAULT_KEY);
+  if (fallback) return { text: text[fallback], locale: null };
+  return { text: text[keys[0]], locale: normalizeTag(keys[0]) };
+}
+function isRtlText(text) {
+  if (typeof text !== "string") return false;
+  const rtl = text.search(RTL_STRONG);
+  if (rtl === -1) return false;
+  const ltr = text.search(LTR_STRONG);
+  return ltr === -1 || rtl < ltr;
+}
+
+// src/utils.js
+var DEFAULT_OPTIONS = {
+  border: true,
+  color: "#ffffff",
+  strokeWidth: 1.5,
+  roughness: 1.5,
+  // The frame traces the element's own edge. Raise this to stand it off.
+  padding: 0,
+  radius: null,
+  opacity: 0.9,
+  children: null,
+  note: null,
+  arrow: false,
+  decorations: false,
+  addBreaks: false,
+  /** Override the handwriting stack, e.g. a next/font CSS variable. */
+  fontFamily: null,
+  /** Fetch Caveat when the page has not provided it. */
+  autoLoadFont: true,
+  /**
+   * Language for a note written in more than one. Omit to follow the visitor's
+   * own languages, which is what their operating system is set to.
+   */
+  locale: null,
+  /**
+   * Overlay stacking order. Omit to mirror the target element's z-index so
+   * doodles stay above the annotated element but below modals and other UI.
+   */
+  zIndex: null
+};
+function mergeOptions(options = {}) {
+  const merged = { ...DEFAULT_OPTIONS, ...options };
+  if (merged.note) {
+    const config = typeof merged.note === "string" || isLocaleMap(merged.note) ? { text: merged.note } : merged.note;
+    merged.note = {
+      ...config,
+      position: config.position ?? "top-right",
+      // The note carries the chosen language, so `renderAnnotation` can resolve
+      // a multilingual note on its own.
+      locale: config.locale ?? merged.locale ?? null
+    };
+  }
+  if (merged.arrow) {
+    const config = merged.arrow === true ? {} : merged.arrow;
+    merged.arrow = {
+      // "note" launches from the annotation, a position name from that side of
+      // the element. Normalised for every arrow, not just `arrow: true`, so an
+      // explicit `from` is honoured whether or not there is a note.
+      from: config.from ?? (merged.note ? "note" : "top-right"),
+      to: config.to ?? "edge",
+      style: config.style ?? "curved",
+      // Arrows draw themselves on and lean toward their target by default;
+      // `animate: false` opts out, an object tunes speed and gestures
+      animate: normalizeArrowAnimation(config.animate)
+    };
+  }
+  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 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);
+}
+
+// src/geometry.js
+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 h2 = Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y);
+  return w > 0 && h2 > 0 ? w * h2 : 0;
+}
+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 pointOnBoxToward(box, target) {
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const dx = target.x - cx;
+  const dy = target.y - cy;
+  if (dx === 0 && dy === 0) return { x: cx, y: cy };
+  const hw = box.width / 2 || 1e-3;
+  const hh = box.height / 2 || 1e-3;
+  const scale = 1 / Math.max(Math.abs(dx) / hw, Math.abs(dy) / hh);
+  return { x: cx + dx * scale, y: cy + dy * scale };
+}
+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/native/svg-dom.js
+var CAVEAT_ADVANCES = [
+  0.242,
+  0.21,
+  0.237,
+  0.559,
+  0.45,
+  0.6,
+  0.564,
+  0.117,
+  0.33,
+  0.33,
+  0.363,
+  0.446,
+  0.198,
+  0.326,
+  0.198,
+  0.33,
+  0.45,
+  0.45,
+  0.45,
+  0.45,
+  0.45,
+  0.439,
+  0.464,
+  0.447,
+  0.45,
+  0.442,
+  0.198,
+  0.198,
+  0.446,
+  0.446,
+  0.446,
+  0.374,
+  0.643,
+  0.508,
+  0.522,
+  0.475,
+  0.584,
+  0.532,
+  0.462,
+  0.492,
+  0.57,
+  0.406,
+  0.312,
+  0.505,
+  0.426,
+  0.726,
+  0.612,
+  0.502,
+  0.467,
+  0.495,
+  0.542,
+  0.492,
+  0.458,
+  0.482,
+  0.49,
+  0.72,
+  0.524,
+  0.504,
+  0.522,
+  0.33,
+  0.33,
+  0.33,
+  0.446,
+  0.446,
+  0.353,
+  0.443,
+  0.441,
+  0.361,
+  0.399,
+  0.331,
+  0.297,
+  0.361,
+  0.47,
+  0.193,
+  0.21,
+  0.371,
+  0.175,
+  0.566,
+  0.456,
+  0.359,
+  0.378,
+  0.377,
+  0.36,
+  0.347,
+  0.331,
+  0.37,
+  0.331,
+  0.517,
+  0.343,
+  0.341,
+  0.315,
+  0.33,
+  0.33,
+  0.33,
+  0.446
+];
+var CAVEAT_FALLBACK_EM = 0.37;
+var NON_LATIN_EM = 0.62;
+var LETTER_SPACING = 0.4;
+var FAMILY_WIDTH = {
+  caveat: 1,
+  noteworthy: 1.4,
+  casual: 1.5
+};
+var OTHER_FAMILY_WIDTH = 1.3;
+function familyWidth(stack) {
+  if (!stack) return 1;
+  const first = String(stack).split(",")[0].trim().replace(/^["']|["']$/g, "").toLowerCase();
+  return FAMILY_WIDTH[first] ?? OTHER_FAMILY_WIDTH;
+}
+function caveatAdvance(char) {
+  const code = char.codePointAt(0);
+  if (code >= 32 && code <= 126) return CAVEAT_ADVANCES[code - 32];
+  return code > 767 ? NON_LATIN_EM : CAVEAT_FALLBACK_EM;
+}
+function estimateTextWidth(text, fontSize, fontFamily = null) {
+  let em = 0;
+  let glyphs = 0;
+  for (const char of String(text)) {
+    glyphs += 1;
+    em += caveatAdvance(char);
+  }
+  return em * fontSize * familyWidth(fontFamily) + Math.max(0, glyphs - 1) * LETTER_SPACING;
+}
+function bezierPoint(p, t) {
+  const u = 1 - t;
+  if (p.length === 6) {
+    return {
+      x: u * u * p[0] + 2 * u * t * p[2] + t * t * p[4],
+      y: u * u * p[1] + 2 * u * t * p[3] + t * t * p[5]
+    };
+  }
+  return {
+    x: u * u * u * p[0] + 3 * u * u * t * p[2] + 3 * u * t * t * p[4] + t * t * t * p[6],
+    y: u * u * u * p[1] + 3 * u * u * t * p[3] + 3 * u * t * t * p[5] + t * t * t * p[7]
+  };
+}
+function curveLength(p) {
+  const steps = 16;
+  let length = 0;
+  let previous = { x: p[0], y: p[1] };
+  for (let i = 1; i <= steps; i++) {
+    const point = bezierPoint(p, i / steps);
+    length += Math.hypot(point.x - previous.x, point.y - previous.y);
+    previous = point;
+  }
+  return length;
+}
+function pathDataLength(d) {
+  const commands = String(d).match(/[MLCQZmlcqz][^MLCQZmlcqz]*/g) ?? [];
+  let x = 0;
+  let y = 0;
+  let startX = 0;
+  let startY = 0;
+  let length = 0;
+  for (const command of commands) {
+    const type = command[0];
+    const upper = type.toUpperCase();
+    const relative = type !== upper;
+    const numbers = (command.slice(1).match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi) ?? []).map(
+      Number
+    );
+    if (upper === "Z") {
+      length += Math.hypot(startX - x, startY - y);
+      x = startX;
+      y = startY;
+      continue;
+    }
+    const arity = { M: 2, L: 2, Q: 4, C: 6 }[upper];
+    for (let i = 0; i + arity <= numbers.length; i += arity) {
+      const args = numbers.slice(i, i + arity);
+      const ox = relative ? x : 0;
+      const oy = relative ? y : 0;
+      const points = [];
+      for (let j = 0; j < args.length; j += 2) {
+        points.push(args[j] + ox, args[j + 1] + oy);
+      }
+      const endX = points[points.length - 2];
+      const endY = points[points.length - 1];
+      if (upper === "M" && i === 0) {
+        startX = endX;
+        startY = endY;
+      } else if (upper === "M" || upper === "L") {
+        length += Math.hypot(endX - x, endY - y);
+      } else {
+        length += curveLength([x, y, ...points]);
+      }
+      x = endX;
+      y = endY;
+    }
+  }
+  return length;
+}
+function createStyle() {
+  const custom = {};
+  return Object.defineProperties(
+    {},
+    {
+      setProperty: {
+        value: (name, value) => {
+          custom[name] = String(value);
+        }
+      },
+      getPropertyValue: { value: (name) => custom[name] ?? "" },
+      custom: { value: custom }
+    }
+  );
+}
+var VirtualElement = class {
+  /**
+   * @param {string} tagName
+   */
+  constructor(tagName) {
+    this.tagName = tagName;
+    this.nodeName = tagName;
+    this.attributes = {};
+    this.children = [];
+    this.parentNode = null;
+    this.style = createStyle();
+    this._text = "";
+  }
+  get childNodes() {
+    return this.children;
+  }
+  get firstChild() {
+    return this.children[0] ?? null;
+  }
+  get textContent() {
+    if (this.children.length) {
+      return this.children.map((child) => child.textContent).join("");
+    }
+    return this._text;
+  }
+  set textContent(value) {
+    this.children = [];
+    this._text = String(value ?? "");
+  }
+  setAttribute(name, value) {
+    this.attributes[name] = String(value);
+  }
+  setAttributeNS(_namespace, name, value) {
+    this.setAttribute(name, value);
+  }
+  getAttribute(name) {
+    return name in this.attributes ? this.attributes[name] : null;
+  }
+  removeAttribute(name) {
+    delete this.attributes[name];
+  }
+  /**
+   * Moves the node if it already has a parent, like the DOM does - the note
+   * groups rely on that to be re-appended on top of every stroke.
+   * @param {VirtualElement} child
+   */
+  appendChild(child) {
+    if (child.parentNode) child.parentNode.removeChild(child);
+    child.parentNode = this;
+    this.children.push(child);
+    return child;
+  }
+  removeChild(child) {
+    const index = this.children.indexOf(child);
+    if (index !== -1) this.children.splice(index, 1);
+    child.parentNode = null;
+    return child;
+  }
+  contains(node) {
+    for (let current = node; current; current = current.parentNode) {
+      if (current === this) return true;
+    }
+    return false;
+  }
+  getTotalLength() {
+    return pathDataLength(this.getAttribute("d") ?? "");
+  }
+  /**
+   * @param {string} name
+   */
+  inherited(name) {
+    for (let node = this; node; node = node.parentNode) {
+      const value = node.getAttribute(name);
+      if (value != null) return value;
+    }
+    return null;
+  }
+  getComputedTextLength() {
+    return estimateTextWidth(
+      this.textContent,
+      Number(this.inherited("font-size")) || 19,
+      this.inherited("font-family")
+    );
+  }
+  getBBox() {
+    return { x: 0, y: 0, width: this.getComputedTextLength(), height: 0 };
+  }
+};
+function createSvgElement(tag) {
+  return new VirtualElement(tag);
+}
+
+// src/renderer.js
+var XML_NS = "http://www.w3.org/XML/1998/namespace";
+var HANDWRITTEN_FONT = '"Caveat", "Kalam", "Patrick Hand", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive';
+var NOTE_FONT_SIZE = 19;
+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 = createSvgElement("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 = createSvgElement("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 appendGlow(svg, radius, style) {
+  const circle = createSvgElement("circle");
+  circle.setAttribute("r", fmt(radius));
+  circle.setAttribute("fill", style.color);
+  circle.setAttribute("opacity", String(style.opacity));
+  circle.style.filter = `blur(${fmt(radius * 0.4)}px)`;
+  svg.appendChild(circle);
+  return circle;
+}
+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 cubicAt(p0, c1, c2, p3, t) {
+  const u = 1 - t;
+  const a = u * u * u;
+  const b = 3 * u * u * t;
+  const c = 3 * u * t * t;
+  const d = t * t * t;
+  return {
+    x: a * p0.x + b * c1.x + c * c2.x + d * p3.x,
+    y: a * p0.y + b * c1.y + c * c2.y + d * p3.y
+  };
+}
+function cubicTangentAt(p0, c1, c2, p3, t) {
+  const u = 1 - t;
+  const a = 3 * u * u;
+  const b = 6 * u * t;
+  const c = 3 * t * t;
+  return {
+    x: a * (c1.x - p0.x) + b * (c2.x - c1.x) + c * (p3.x - c2.x),
+    y: a * (c1.y - p0.y) + b * (c2.y - c1.y) + c * (p3.y - c2.y)
+  };
+}
+var STRADDLE = 0.75;
+function loopedCurvePoints(start, c1, c2, end, radius, random, side = 1) {
+  const at = (t) => cubicAt(start, c1, c2, end, t);
+  const knot = 0.46 + random() * 0.12;
+  const points = [];
+  const lead = Math.max(2, Math.round(knot * 16));
+  for (let i = 0; i <= lead; i++) points.push(at(knot * i / lead));
+  const pivot = at(knot);
+  const derivative = cubicTangentAt(start, c1, c2, end, knot);
+  const speed = Math.hypot(derivative.x, derivative.y) || 1;
+  const heading = normalize(derivative);
+  const normal = { x: -heading.y, y: heading.x };
+  const centre = {
+    x: pivot.x + normal.x * radius * STRADDLE * side,
+    y: pivot.y + normal.y * radius * STRADDLE * side
+  };
+  const from = Math.atan2(pivot.y - centre.y, pivot.x - centre.x);
+  const turns = Math.PI * 2 * (0.97 + random() * 0.08);
+  const steps = 18;
+  for (let i = 1; i <= steps; i++) {
+    const progress = i / steps;
+    const angle = from + turns * progress * side;
+    const spread = radius * (STRADDLE + (1 - STRADDLE) * progress);
+    const drift = radius * 0.55 * progress;
+    points.push({
+      x: centre.x + Math.cos(angle) * spread + heading.x * drift,
+      y: centre.y + Math.sin(angle) * spread + heading.y * drift
+    });
+  }
+  const exit = points[points.length - 1];
+  const gained = (exit.x - pivot.x) * heading.x + (exit.y - pivot.y) * heading.y;
+  const resume = Math.min(knot + Math.max(0, gained) / speed, 0.985);
+  const rejoin = at(resume);
+  const residual = (exit.x - rejoin.x) * normal.x + (exit.y - rejoin.y) * normal.y;
+  const settle = 6;
+  const tail = 14;
+  for (let i = 1; i <= tail; i++) {
+    const point = at(resume + (1 - resume) * (i / tail));
+    const fade = Math.max(0, 1 - i / settle);
+    points.push({
+      x: point.x + normal.x * residual * fade,
+      y: point.y + normal.y * residual * fade
+    });
+  }
+  return points;
+}
+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 };
+}
+var NOTE_CLEARANCE = 10;
+var TIP_GAP = 11;
+function arrowStartFromNote(origin, target, from) {
+  const cx = origin.x + origin.width / 2;
+  const cy = origin.y + origin.height / 2;
+  if (from && from !== "note") {
+    const point = pointFromPosition(from, origin);
+    const away = directionFromPosition(from);
+    if (!away.x && !away.y) {
+      const edge = pointOnBoxToward(origin, target);
+      const outward = normalize({ x: edge.x - cx, y: edge.y - cy });
+      return {
+        x: edge.x + outward.x * NOTE_CLEARANCE,
+        y: edge.y + outward.y * NOTE_CLEARANCE
+      };
+    }
+    return {
+      x: point.x + away.x * NOTE_CLEARANCE,
+      y: point.y + away.y * NOTE_CLEARANCE
+    };
+  }
+  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 + 10), y: cy + sy * (hh + 4) };
+  }
+  return { x: cx + sx * (hw + 8), y: cy + sy * (hh + 6) };
+}
+function arrowEndpoints(rect, arrowOptions, random, origin) {
+  const center = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+  const from = arrowOptions.from || "note";
+  const anchored = Boolean(origin && origin.width > 0 && origin.height > 0);
+  let start = anchored ? arrowStartFromNote(origin, center, from) : annotationAnchor(
+    from === "note" ? "top-right" : from,
+    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 = TIP_GAP + random() * 5;
+    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 drawArrowHead(svg, tip, angle, style, random, shaftLength = Infinity) {
+  const length = Math.min(9 + style.strokeWidth * 1.4, shaftLength * 0.3);
+  const spread = 0.46 + random() * 0.1;
+  const arms = [];
+  for (const side of [-1, 1]) {
+    const armAngle = angle + spread * side;
+    const tail = {
+      x: tip.x - length * Math.cos(armAngle),
+      y: tip.y - length * Math.sin(armAngle)
+    };
+    arms.push(
+      appendPath(
+        svg,
+        roughLine(tail.x, tail.y, tip.x, tip.y, style.roughness * 0.5, random, {
+          steps: 2,
+          bow: 0.35 * side
+        }),
+        { ...style, dashed: false }
+      )
+    );
+  }
+  return arms;
+}
+function bowOverTheTop(perpendicular) {
+  if (Math.abs(perpendicular.y) < 0.02) return perpendicular.x > 0 ? 1 : -1;
+  return perpendicular.y > 0 ? -1 : 1;
+}
+function boundsOf(points) {
+  const xs = points.map((p) => p.x);
+  const ys = points.map((p) => p.y);
+  return {
+    x: Math.min(...xs),
+    y: Math.min(...ys),
+    width: Math.max(...xs) - Math.min(...xs),
+    height: Math.max(...ys) - Math.min(...ys)
+  };
+}
+function drawArrow(svg, rect, arrowOptions, style, seed, origin = null, context = {}) {
+  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;
+  let ghost = null;
+  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 lateral = perpendicular.x * towardCenter.x + perpendicular.y * towardCenter.y;
+    const sign = Math.abs(lateral) > distance * 0.12 ? lateral > 0 ? -1 : 1 : (
+      // Nothing to steer around, so sweep over the top: a hand arcs above
+      // the straight line and drops onto the target, and a coin flip here
+      // used to mirror the whole gesture from one redraw to the next.
+      bowOverTheTop(perpendicular)
+    );
+    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 });
+    if (arrowOptions.style === "looped") {
+      const radius = clamp(distance * 0.11, 7, 17);
+      const points = loopedCurvePoints(
+        start,
+        { x: c1x, y: c1y },
+        { x: c2x, y: c2y },
+        end,
+        radius,
+        random,
+        -sign
+      );
+      shaft = catmullRomPath(points, false);
+      hull.push(...points);
+      const last = points[points.length - 1];
+      const prior = points[points.length - 2] ?? start;
+      tipAngle = Math.atan2(last.y - prior.y, last.x - prior.x);
+    } else {
+      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;
+        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)}`;
+      }
+      tipAngle = Math.atan2(end.y - c2y, end.x - c2x);
+    }
+  }
+  const group = createSvgElement("g");
+  svg.appendChild(group);
+  const shaftPaths = [];
+  if (ghost) {
+    shaftPaths.push(
+      appendPath(group, ghost, {
+        ...style,
+        opacity: style.opacity * 0.3,
+        strokeWidth: style.strokeWidth * 0.7,
+        dashed
+      })
+    );
+  }
+  shaftPaths.push(appendPath(group, shaft, { ...style, dashed }));
+  const head = drawArrowHead(group, end, tipAngle, style, random, distance);
+  animateArrow(
+    group,
+    { shaft: shaftPaths, head, start, end },
+    arrowOptions.animate,
+    context.elapsed
+  );
+  const bounds = boundsOf(hull);
+  return { start, end, bounds, group };
+}
+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
+    }
+  );
+}
+var DEFAULT_WORDS_PER_LINE = 2;
+function wrapWords(text, perLine) {
+  const lines = [];
+  for (const paragraph of String(text).split(/\r?\n/)) {
+    const words = paragraph.trim().split(/\s+/).filter(Boolean);
+    if (!words.length) continue;
+    const size = Number.isFinite(perLine) && perLine >= 1 ? Math.round(perLine) : words.length;
+    for (let i = 0; i < words.length; i += size) {
+      lines.push(words.slice(i, i + size).join(" "));
+    }
+  }
+  return lines.length ? lines : [String(text)];
+}
+function measureWidth(element, content, fontSize) {
+  try {
+    const box = element.getBBox();
+    if (box && box.width > 0) return box.width;
+  } catch {
+  }
+  try {
+    const measured = element.getComputedTextLength();
+    if (Number.isFinite(measured) && measured > 0) return measured;
+  } catch {
+  }
+  return content.length * fontSize * 0.45;
+}
+function createNoteText(svg, text, style, options = {}) {
+  const fontSize = style.fontSize ?? NOTE_FONT_SIZE;
+  const lines = wrapWords(text, options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE);
+  const lineHeight = fontSize * 1.05;
+  const rtl = options.rtl ?? isRtlText(text);
+  const group = createSvgElement("g");
+  const textEl = createSvgElement("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", style.fontFamily || HANDWRITTEN_FONT);
+  textEl.setAttribute("font-weight", "600");
+  textEl.setAttribute("letter-spacing", "0.4");
+  textEl.setAttribute("text-anchor", "start");
+  textEl.setAttribute("dominant-baseline", "auto");
+  if (rtl) {
+    textEl.setAttribute("direction", "rtl");
+    textEl.setAttribute("unicode-bidi", "embed");
+  }
+  if (options.locale) {
+    textEl.setAttributeNS(XML_NS, "xml:lang", options.locale);
+  }
+  const tspans = lines.map((line, index) => {
+    const tspan = createSvgElement("tspan");
+    tspan.textContent = line;
+    tspan.setAttribute("x", "0");
+    tspan.setAttribute("dy", index === 0 ? "0" : String(lineHeight));
+    textEl.appendChild(tspan);
+    return tspan;
+  });
+  group.appendChild(textEl);
+  svg.appendChild(group);
+  const lineWidths = tspans.map(
+    (tspan, index) => measureWidth(tspan, lines[index], fontSize)
+  );
+  const width = Math.max(...lineWidths);
+  const ascent = fontSize * 0.74;
+  const descent = fontSize * 0.26;
+  const height = (lines.length - 1) * lineHeight + ascent + descent;
+  return {
+    group,
+    textEl,
+    tspans,
+    lines,
+    lineWidths,
+    lineHeight,
+    width,
+    height,
+    ascent,
+    descent,
+    fontSize,
+    rtl
+  };
+}
+function placeNoteText(note, box, style, seed, options = {}) {
+  const random = createRandom(seed + 55);
+  const tilt = options.tilt ?? (random() - 0.5) * 7;
+  const anchorX = note.rtl ? box.x + box.width : box.x;
+  note.textEl.setAttribute("x", fmt(anchorX));
+  note.textEl.setAttribute("y", fmt(box.y + note.ascent));
+  for (const tspan of note.tspans) tspan.setAttribute("x", fmt(anchorX));
+  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) {
+    const lastWidth = note.lineWidths[note.lineWidths.length - 1] ?? box.width;
+    const underlineX = note.rtl ? box.x + box.width - lastWidth + 1 : box.x + 1;
+    drawUnderline(
+      note.group,
+      underlineX,
+      box.y + box.height + 2,
+      lastWidth - 2,
+      {
+        color: style.color,
+        strokeWidth: style.strokeWidth || 1.4,
+        roughness: style.roughness || 1.4,
+        opacity: style.opacity
+      },
+      random
+    );
+  }
+  return note.group;
+}
+
+// src/annotations.js
+var NOTE_GAP = 14;
+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 limitAgainstElement(box, guard, dx) {
+  const level = box.y < guard.y + guard.height && box.y + box.height > guard.y;
+  if (!level) return dx;
+  if (dx < 0) {
+    const room2 = box.x - (guard.x + guard.width);
+    return room2 <= 0 ? 0 : -Math.min(-dx, room2);
+  }
+  const room = guard.x - (box.x + box.width);
+  return room <= 0 ? 0 : Math.min(dx, room);
+}
+function nudgeIntoBand(box, guard, band) {
+  if (!band || band.width <= 0) return box;
+  const overhangLeft = band.x - box.x;
+  const overhangRight = box.x + box.width - (band.x + band.width);
+  let dx = 0;
+  if (overhangLeft > 0) dx = overhangLeft;
+  else if (overhangRight > 0) dx = -overhangRight;
+  if (!dx) return box;
+  dx = limitAgainstElement(box, guard, dx);
+  if (!dx) return box;
+  return { ...box, x: box.x + dx };
+}
+function renderAnnotation(svg, rect, noteOptions, style, seed = 1, layout = {}) {
+  const { text, locale } = resolveLocalizedText(
+    noteOptions?.text,
+    noteOptions?.locale
+  );
+  if (!text) return null;
+  const band = layout.band ?? null;
+  const position = isValidPosition(noteOptions.position) ? noteOptions.position : "top-right";
+  const random = createRandom(seed + 9);
+  const note = createNoteText(svg, text, style, {
+    wordsPerLine: noteOptions.wordsPerLine,
+    locale
+  });
+  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.height + (noteOptions.underline === false ? 0 : 5)
+  };
+  const gap = (layout.gap ?? NOTE_GAP) + random() * 6;
+  const placed = boxForPosition(
+    rect,
+    position,
+    { width: size.width, height: size.height + tiltPad },
+    gap
+  );
+  const shifted = {
+    ...placed,
+    x: placed.x + (Number(noteOptions.offset?.x) || 0),
+    y: placed.y + (Number(noteOptions.offset?.y) || 0)
+  };
+  const guard = inflateRect(rect, gap * 0.7);
+  const outer = nudgeIntoBand(shifted, guard, band);
+  const box = {
+    x: outer.x,
+    y: outer.y + tiltPad / 2,
+    width: size.width,
+    height: note.height
+  };
+  placeNoteText(note, box, style, seed, {
+    tilt,
+    underline: noteOptions.underline !== false
+  });
+  return { group: note.group, box: inflateRect(outer, 4), 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 drawFleck(parent, x, y, radius, style, random) {
+  const count = 6;
+  const points = [];
+  for (let i = 0; i < count; i++) {
+    const angle = Math.PI * 2 * i / count + (random() - 0.5) * 0.5;
+    const r = radius * (0.78 + random() * 0.34);
+    points.push({
+      x: x + Math.cos(angle) * r,
+      y: y + Math.sin(angle) * r
+    });
+  }
+  const blob = appendPath(parent, catmullRomPath(points, true), {
+    ...style,
+    fill: style.color,
+    strokeWidth: 0
+  });
+  blob.style.filter = `blur(${(radius * 0.35).toFixed(2)}px)`;
+  return blob;
+}
+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(" ");
+  return appendPath(parent, path, style);
+}
+function drawSparkle(parent, size, style, random) {
+  twinkle(
+    parent,
+    size * (0.62 + random() * 0.12),
+    size,
+    size * (0.14 + random() * 0.08),
+    style
+  );
+}
+function drawStar(parent, size, style, random) {
+  twinkle(
+    parent,
+    size * (0.62 + random() * 0.12),
+    size * (0.8 + random() * 0.12),
+    size * (0.14 + random() * 0.08),
+    style
+  );
+}
+function drawGlimmer(parent, size, style, random) {
+  appendGlow(parent, size * (1.2 + random() * 0.2), {
+    color: style.color,
+    opacity: style.opacity * 0.22
+  });
+  const armX = size * (0.5 + random() * 0.08);
+  const armY = size * (0.45 + random() * 0.08);
+  const bluntness = size * 0.19;
+  const main = twinkle(parent, armX, armY, size * (0.08 + random() * 0.03), {
+    ...style,
+    fill: style.color,
+    strokeWidth: bluntness
+  });
+  main.setAttribute("stroke-linejoin", "round");
+  main.setAttribute("stroke-linecap", "round");
+  main.style.filter = `blur(${(size * 0.05).toFixed(2)}px)`;
+  const gap = bluntness / 2 + size * 0.2;
+  const corners = [
+    { x: 0, y: -(armY + gap) },
+    { x: armX + gap, y: 0 },
+    { x: 0, y: armY + gap },
+    { x: -(armX + gap), y: 0 }
+  ];
+  for (const { x, y } of corners) {
+    const jitter = 0.95 + random() * 0.1;
+    drawFleck(
+      parent,
+      x * jitter,
+      y * jitter,
+      size * (0.1 + random() * 0.03),
+      style,
+      random
+    );
+  }
+}
+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) }
+    );
+  }
+}
+var DECORATION_DRAWERS = {
+  heart: drawHeart,
+  sparkle: drawSparkle,
+  star: drawStar,
+  twinkle: drawTwinkle,
+  glimmer: drawGlimmer,
+  smiley: drawSmiley,
+  emphasis: drawEmphasis,
+  arcs: drawArcs
+};
+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 },
+  glimmer: { size: [7, 10], tilt: 20, standoff: 28, brightness: 1.3 },
+  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 }
+};
+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/native/layout.js
+var INK_MARGIN = 48;
+function buildDoodle({
+  width,
+  height,
+  options = {},
+  seed = 1,
+  band = null,
+  elapsed = 0
+}) {
+  const merged = mergeOptions(options);
+  const { padding, color, strokeWidth, roughness, opacity } = merged;
+  const root = createSvgElement("svg");
+  const outerWidth = Math.max(0, width) + padding * 2;
+  const outerHeight = Math.max(0, height) + padding * 2;
+  const rect = {
+    x: -padding,
+    y: -padding,
+    width: outerWidth,
+    height: outerHeight,
+    // Grown with the padding so the frame stays concentric with the element,
+    // as `getElementBounds` does on the web
+    radius: clamp(
+      (Number(merged.radius) || 0) + padding * 0.6,
+      0,
+      Math.max(0, Math.min(outerWidth, outerHeight) / 2)
+    )
+  };
+  const strokeStyle = { color, strokeWidth, roughness, opacity };
+  const noteStyle = {
+    color,
+    opacity,
+    strokeWidth,
+    roughness,
+    fontFamily: merged.fontFamily
+  };
+  const note = merged.note ? renderAnnotation(root, rect, merged.note, noteStyle, seed, {
+    band,
+    gap: merged.arrow ? 40 : 14
+  }) : null;
+  if (merged.border) {
+    drawBorder(root, rect, { ...strokeStyle, breaks: merged.addBreaks }, seed);
+  }
+  const arrow = merged.arrow ? drawArrow(root, rect, merged.arrow, strokeStyle, seed, note?.box ?? null, {
+    elapsed
+  }) : null;
+  if (merged.decorations) {
+    renderDecorations(root, rect, merged.decorations, strokeStyle, seed, {
+      avoid: [note?.box, arrow?.bounds].filter(Boolean),
+      note: note?.box ?? null
+    });
+  }
+  if (note) root.appendChild(note.group);
+  const bounds = inflateRect(
+    unionRects([rect, note?.box, arrow?.bounds].filter(Boolean)),
+    INK_MARGIN
+  );
+  return { root, bounds };
+}
+
+// src/native/svg-props.js
+var ATTRIBUTES = {
+  d: "d",
+  fill: "fill",
+  stroke: "stroke",
+  "stroke-width": "strokeWidth",
+  "stroke-linecap": "strokeLinecap",
+  "stroke-linejoin": "strokeLinejoin",
+  "stroke-dasharray": "strokeDasharray",
+  opacity: "opacity",
+  transform: "transform",
+  r: "r",
+  cx: "cx",
+  cy: "cy",
+  x: "x",
+  y: "y",
+  dy: "dy",
+  "font-size": "fontSize",
+  "font-weight": "fontWeight",
+  "letter-spacing": "letterSpacing",
+  "text-anchor": "textAnchor"
+};
+function firstFamily(stack) {
+  const first = String(stack ?? "").split(",")[0].trim().replace(/^["']|["']$/g, "");
+  return first && first !== "cursive" ? first : void 0;
+}
+function parseAnimation(value) {
+  const parts = String(value ?? "").trim().split(/\s+/);
+  if (parts.length < 5) return null;
+  const [name, duration, easing, delay, iterations] = parts;
+  return {
+    name,
+    duration: parseFloat(duration) || 0,
+    easing,
+    delay: parseFloat(delay) || 0,
+    infinite: iterations === "infinite"
+  };
+}
+function propsOf(node) {
+  const props = {};
+  for (const [name, value] of Object.entries(node.attributes)) {
+    const prop = ATTRIBUTES[name];
+    if (prop) props[prop] = value;
+  }
+  const family = firstFamily(node.getAttribute("font-family"));
+  if (family) props.fontFamily = family;
+  if (node.getAttribute("direction") === "rtl") props.textAnchor = "end";
+  if (node.tagName === "text" && node.children.length && node.children.every((child) => child.getAttribute("x") != null)) {
+    delete props.x;
+  }
+  return props;
+}
+
+// src/native/react-native.js
+var AnimatedPath = import_react_native.Animated.createAnimatedComponent(import_react_native_svg.Path);
+var OPTION_KEYS = [
+  "border",
+  "color",
+  "strokeWidth",
+  "roughness",
+  "padding",
+  "radius",
+  "opacity",
+  "note",
+  "arrow",
+  "decorations",
+  "addBreaks",
+  "fontFamily",
+  "locale",
+  // Web-only, accepted so shared doodle configs can be spread onto either
+  "autoLoadFont",
+  "zIndex"
+];
+var BAND_INSET = 8;
+var PLATFORM_HANDWRITING = import_react_native.Platform.select({
+  ios: "Noteworthy",
+  android: "casual",
+  default: void 0
+});
+var ELEMENTS = { g: import_react_native_svg.G, path: import_react_native_svg.Path, circle: import_react_native_svg.Circle, text: import_react_native_svg.Text };
+var EASINGS = {
+  linear: import_react_native.Easing.linear,
+  // The CSS keywords' own curves
+  "ease-out": import_react_native.Easing.bezier(0, 0, 0.58, 1),
+  "ease-in-out": import_react_native.Easing.bezier(0.42, 0, 0.58, 1)
+};
+function blurOf(node) {
+  const match = /blur\(\s*([\d.]+)px\s*\)/.exec(node.style.filter ?? "");
+  return match ? Number(match[1]) : 0;
+}
+function renderNode(node, key, context) {
+  const props = { key, ...propsOf(node) };
+  if (node.tagName === "tspan") return (0, import_react.createElement)(import_react_native_svg.TSpan, props, node.textContent);
+  if (node.tagName === "circle" && blurOf(node) > 0) {
+    const id = `${context.prefix}-glow-${context.defs.length}`;
+    const color = props.fill;
+    context.defs.push(
+      (0, import_react.createElement)(
+        import_react_native_svg.RadialGradient,
+        { key: id, id, cx: "50%", cy: "50%", r: "50%" },
+        (0, import_react.createElement)(import_react_native_svg.Stop, { offset: "0", stopColor: color, stopOpacity: 1 }),
+        (0, import_react.createElement)(import_react_native_svg.Stop, { offset: "0.55", stopColor: color, stopOpacity: 0.55 }),
+        (0, import_react.createElement)(import_react_native_svg.Stop, { offset: "1", stopColor: color, stopOpacity: 0 })
+      )
+    );
+    props.fill = `url(#${id})`;
+    props.r = String(Number(props.r) + blurOf(node) * 1.5);
+  }
+  const animation = parseAnimation(node.style.animation);
+  if (node.tagName === "path" && context.clock && animation?.name === "freehand-arrow-dash" && // A dotted shaft crawls forever on the web; that would keep the JS thread
+  // busy for as long as the doodle is on screen, so it is left still here
+  !animation.infinite && animation.duration > 0) {
+    const length = node.getTotalLength();
+    if (length > 0) {
+      return (0, import_react.createElement)(AnimatedPath, {
+        ...props,
+        strokeDasharray: [length, length],
+        strokeDashoffset: context.clock.interpolate({
+          inputRange: [animation.delay, animation.delay + animation.duration],
+          outputRange: [length, 0],
+          easing: EASINGS[animation.easing] ?? EASINGS.linear,
+          extrapolate: "clamp"
+        })
+      });
+    }
+  }
+  const Component = ELEMENTS[node.tagName];
+  if (!Component) return null;
+  return (0, import_react.createElement)(
+    Component,
+    props,
+    node.children.map((child, index) => renderNode(child, index, context))
+  );
+}
+function splitLayers(root) {
+  const layers = [];
+  let run = null;
+  for (const child of root.children) {
+    if (child.getAttribute("class") === "freehand-arrow") {
+      layers.push({ arrow: true, nodes: [child] });
+      run = null;
+    } else {
+      if (!run) {
+        run = { arrow: false, nodes: [] };
+        layers.push(run);
+      }
+      run.nodes.push(child);
+    }
+  }
+  return layers;
+}
+function LayerSvg({ nodes, bounds, clock, prefix }) {
+  const context = { defs: [], clock, prefix };
+  const content = nodes.map((node, index) => renderNode(node, index, context));
+  return (0, import_react.createElement)(
+    import_react_native_svg.Svg,
+    {
+      style: import_react_native.StyleSheet.absoluteFill,
+      width: bounds.width,
+      height: bounds.height
+    },
+    context.defs.length ? (0, import_react.createElement)(import_react_native_svg.Defs, null, context.defs) : null,
+    // Drawing coordinates are the element's own; the canvas starts further out
+    (0, import_react.createElement)(import_react_native_svg.G, { transform: `translate(${-bounds.x} ${-bounds.y})` }, content)
+  );
+}
+function arrowPlan(group) {
+  let drawEnd = 0;
+  for (const path of group.children) {
+    const animation = parseAnimation(path.style.animation);
+    if (animation && !animation.infinite) {
+      drawEnd = Math.max(drawEnd, animation.delay + animation.duration);
+    }
+  }
+  const lean = parseAnimation(group.style.animation);
+  const dx = parseFloat(group.style.getPropertyValue("--freehand-drift-x")) || 0;
+  const dy = parseFloat(group.style.getPropertyValue("--freehand-drift-y")) || 0;
+  return {
+    drawEnd,
+    drift: lean && (dx || dy) ? {
+      dx,
+      dy,
+      duration: lean.duration,
+      delay: Math.max(0, lean.delay),
+      repeat: lean.infinite
+    } : null
+  };
+}
+function ArrowLayer({ node, bounds, prefix }) {
+  const clock = (0, import_react.useRef)(new import_react_native.Animated.Value(0)).current;
+  const lean = (0, import_react.useRef)(new import_react_native.Animated.Value(0)).current;
+  const plan = arrowPlan(node);
+  const initialPlan = (0, import_react.useRef)(plan).current;
+  (0, import_react.useEffect)(() => {
+    const running = [];
+    let timer = null;
+    if (initialPlan.drawEnd > 0) {
+      const draw = import_react_native.Animated.timing(clock, {
+        toValue: initialPlan.drawEnd,
+        duration: initialPlan.drawEnd,
+        easing: import_react_native.Easing.linear,
+        useNativeDriver: false
+      });
+      draw.start();
+      running.push(draw);
+    }
+    const drift2 = initialPlan.drift;
+    if (drift2) {
+      const step = (toValue, duration, easing) => import_react_native.Animated.timing(lean, { toValue, duration, easing, useNativeDriver: true });
+      const gesture = drift2.repeat ? import_react_native.Animated.loop(
+        import_react_native.Animated.sequence([
+          step(1, drift2.duration / 2, EASINGS["ease-in-out"]),
+          step(0, drift2.duration / 2, EASINGS["ease-in-out"])
+        ])
+      ) : step(1, drift2.duration, EASINGS["ease-out"]);
+      timer = setTimeout(() => gesture.start(), drift2.delay);
+      running.push(gesture);
+    }
+    return () => {
+      if (timer != null) clearTimeout(timer);
+      for (const animation of running) animation.stop();
+    };
+  }, [clock, lean, initialPlan]);
+  const drift = plan.drift;
+  const transform = drift ? [
+    { translateX: lean.interpolate({ inputRange: [0, 1], outputRange: [0, drift.dx] }) },
+    { translateY: lean.interpolate({ inputRange: [0, 1], outputRange: [0, drift.dy] }) }
+  ] : void 0;
+  return (0, import_react.createElement)(
+    import_react_native.Animated.View,
+    { pointerEvents: "none", style: [import_react_native.StyleSheet.absoluteFill, { transform }] },
+    (0, import_react.createElement)(LayerSvg, { nodes: [node], bounds, clock, prefix })
+  );
+}
+function DoodleLayers({ doodle, session, animate }) {
+  const { root, bounds } = doodle;
+  const layers = splitLayers(root);
+  return (0, import_react.createElement)(
+    import_react_native.View,
+    {
+      pointerEvents: "none",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: {
+        position: "absolute",
+        left: bounds.x,
+        top: bounds.y,
+        width: bounds.width,
+        height: bounds.height
+      }
+    },
+    layers.map((layer, index) => {
+      const prefix = `fh${session.id}-${index}`;
+      return layer.arrow && animate ? (
+        // Keyed by session: new options restart the draw, a relayout does not
+        (0, import_react.createElement)(ArrowLayer, { key: `a${session.id}-${index}`, node: layer.nodes[0], bounds, prefix })
+      ) : (0, import_react.createElement)(LayerSvg, { key: `s${index}`, nodes: layer.nodes, bounds, clock: null, prefix });
+    })
+  );
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    let alive = true;
+    import_react_native.AccessibilityInfo.isReduceMotionEnabled?.().then((value) => alive && setReduced(Boolean(value))).catch(() => {
+    });
+    const subscription = import_react_native.AccessibilityInfo.addEventListener?.(
+      "reduceMotionChanged",
+      (value) => setReduced(Boolean(value))
+    );
+    return () => {
+      alive = false;
+      subscription?.remove?.();
+    };
+  }, []);
+  return reduced;
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(value);
+      else ref.current = value;
+    }
+  };
+}
+var sessions = 0;
+var Doodle = (0, import_react.forwardRef)(function Doodle2(props, forwardedRef) {
+  const { children, style, disabled = false, onLayout, ...rest } = props;
+  const options = {};
+  const viewProps = {};
+  for (const [name, value] of Object.entries(rest)) {
+    if (OPTION_KEYS.includes(name)) {
+      if (value !== void 0) options[name] = value;
+    } else {
+      viewProps[name] = value;
+    }
+  }
+  if (options.fontFamily == null && PLATFORM_HANDWRITING) {
+    options.fontFamily = PLATFORM_HANDWRITING;
+  }
+  if (options.radius == null) {
+    const radius = import_react_native.StyleSheet.flatten(style)?.borderRadius;
+    if (typeof radius === "number") options.radius = radius;
+  }
+  const key = JSON.stringify(options);
+  const session = (0, import_react.useMemo)(
+    () => ({ id: ++sessions, seed: Math.floor(Math.random() * 1e9) }),
+    [key]
+  );
+  const viewRef = (0, import_react.useRef)(null);
+  const onLayoutRef = (0, import_react.useRef)(onLayout);
+  onLayoutRef.current = onLayout;
+  const [frame, setFrame] = (0, import_react.useState)(null);
+  const { width: windowWidth } = (0, import_react_native.useWindowDimensions)();
+  const reducedMotion = useReducedMotion();
+  const handleLayout = (0, import_react.useCallback)((event) => {
+    onLayoutRef.current?.(event);
+    const { width, height } = event.nativeEvent.layout;
+    setFrame(
+      (previous) => previous && previous.width === width && previous.height === height ? previous : { left: previous?.left ?? null, width, height }
+    );
+    viewRef.current?.measureInWindow?.((left) => {
+      if (!Number.isFinite(left)) return;
+      setFrame(
+        (previous) => previous && Math.round(previous.left ?? NaN) !== Math.round(left) ? { ...previous, left } : previous
+      );
+    });
+  }, []);
+  const doodle = (0, import_react.useMemo)(() => {
+    if (disabled || !frame || frame.width <= 0 || frame.height <= 0) return null;
+    const band = frame.left == null ? null : {
+      x: -frame.left + BAND_INSET,
+      width: Math.max(0, windowWidth - BAND_INSET * 2)
+    };
+    return buildDoodle({
+      width: frame.width,
+      height: frame.height,
+      options: JSON.parse(key),
+      seed: session.seed,
+      band
+    });
+  }, [disabled, frame, key, session, windowWidth]);
+  return (0, import_react.createElement)(
+    import_react_native.View,
+    {
+      ...viewProps,
+      ref: mergeRefs(viewRef, forwardedRef),
+      style,
+      onLayout: handleLayout
+    },
+    children,
+    doodle ? (0, import_react.createElement)(DoodleLayers, { doodle, session, animate: !reducedMotion }) : null
+  );
+});
+var react_native_default = Doodle;