@aznabee/freehand-ui 0.2.1 → 0.3.0

package/dist/react.cjs

@@ -356,6 +356,9 @@ function mergeOptions(options = {}) {
       // `animate: false` opts out, an object tunes speed and gestures
       animate: normalizeArrowAnimation(config.animate)
     };
+    for (const key of ["color", "strokeWidth", "roughness", "opacity"]) {
+      if (config[key] !== void 0) merged.arrow[key] = config[key];
+    }
   }
   if (merged.decorations === true) {
     merged.decorations = { count: null, types: null };
@@ -477,14 +480,23 @@ function detectBorderRadius(element) {
   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) {
+function screenScaleOf(element) {
+  const layoutWidth = (
+    /** @type {HTMLElement} */
+    element.offsetWidth
+  );
+  if (!layoutWidth) return 1;
+  const scale = element.getBoundingClientRect().width / layoutWidth;
+  return Number.isFinite(scale) && scale > 0.01 ? scale : 1;
+}
+function getElementBounds(element, padding = 0, radiusOverride = null, scale = 1) {
   const rect = element.getBoundingClientRect();
   const radius = radiusOverride != null ? radiusOverride : detectBorderRadius(element);
-  const width = rect.width + padding * 2;
-  const height = rect.height + padding * 2;
+  const width = rect.width / scale + padding * 2;
+  const height = rect.height / scale + padding * 2;
   return {
-    x: rect.left - padding,
-    y: rect.top - padding,
+    x: rect.left / scale - padding,
+    y: rect.top / scale - padding,
     width,
     height,
     // Grow the radius with the padding so the doodle stays concentric with the
@@ -1080,7 +1092,24 @@ function boundsOf(points) {
     height: Math.max(...ys) - Math.min(...ys)
   };
 }
-function drawArrow(svg, rect, arrowOptions, style, seed, origin = null, context = {}) {
+function resolveArrowStyle(base, options = {}) {
+  const style = { ...base };
+  if (typeof options.color === "string" && options.color.trim()) {
+    style.color = options.color;
+  }
+  if (Number.isFinite(options.strokeWidth) && options.strokeWidth > 0) {
+    style.strokeWidth = options.strokeWidth;
+  }
+  if (Number.isFinite(options.roughness) && options.roughness >= 0) {
+    style.roughness = options.roughness;
+  }
+  if (Number.isFinite(options.opacity)) {
+    style.opacity = Math.min(1, Math.max(0, options.opacity));
+  }
+  return style;
+}
+function drawArrow(svg, rect, arrowOptions, baseStyle, seed, origin = null, context = {}) {
+  const style = resolveArrowStyle(baseStyle, arrowOptions);
   const random = createRandom(seed + 17);
   const { start, end } = arrowEndpoints(rect, arrowOptions, random, origin);
   const dx = end.x - start.x;
@@ -1200,17 +1229,69 @@ function drawUnderline(svg, x, y, width, style, random) {
   );
 }
 var DEFAULT_WORDS_PER_LINE = 2;
-function wrapWords(text, perLine) {
+function wrapWords(text, perLine, marks = null) {
+  const source = String(text);
   const lines = [];
-  for (const paragraph of String(text).split(/\r?\n/)) {
-    const words = paragraph.trim().split(/\s+/).filter(Boolean);
+  let cursor = 0;
+  for (const [index, paragraph] of source.split(/(\r?\n)/).entries()) {
+    const start = cursor;
+    cursor += paragraph.length;
+    if (index % 2 === 1) continue;
+    const words = [...paragraph.matchAll(/\S+/g)].map((m) => ({
+      text: m[0],
+      at: start + m.index
+    }));
     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(" "));
+      lines.push(lineOf(words.slice(i, i + size), marks));
+    }
+  }
+  return lines.length ? lines : [lineOf([{ text: source, at: 0 }], marks)];
+}
+function lineOf(words, marks) {
+  const text = words.map((w) => w.text).join(" ");
+  const result = [];
+  let previous = -1;
+  words.forEach((word, index) => {
+    const first = marks ? marks[word.at] ?? -1 : -1;
+    if (index > 0) result.push(previous === first ? first : -1);
+    for (let k = 0; k < word.text.length; k++) {
+      result.push(marks ? marks[word.at + k] ?? -1 : -1);
+    }
+    previous = marks ? marks[word.at + word.text.length - 1] ?? -1 : -1;
+  });
+  return { text, marks: result };
+}
+function normalizeHighlights(highlight) {
+  const list = Array.isArray(highlight) ? highlight : highlight ? [highlight] : [];
+  return list.map((entry) => typeof entry === "string" ? { text: entry } : entry).filter((entry) => entry && typeof entry.text === "string" && entry.text);
+}
+function highlightMarks(text, highlights) {
+  if (!highlights.length) return null;
+  const marks = new Int16Array(text.length).fill(-1);
+  let any = false;
+  highlights.forEach((highlight, index) => {
+    for (let at = text.indexOf(highlight.text); at !== -1; at = text.indexOf(highlight.text, at + highlight.text.length)) {
+      for (let k = at; k < at + highlight.text.length; k++) {
+        if (marks[k] === -1) {
+          marks[k] = index;
+          any = true;
+        }
+      }
     }
+  });
+  return any ? marks : null;
+}
+function segmentsOf(line) {
+  const segments = [];
+  for (let i = 0; i < line.text.length; i++) {
+    const highlight = line.marks[i] ?? -1;
+    const last = segments[segments.length - 1];
+    if (last && last.highlight === highlight) last.text += line.text[i];
+    else segments.push({ text: line.text[i], highlight });
   }
-  return lines.length ? lines : [String(text)];
+  return segments;
 }
 function measureWidth(element, content, fontSize) {
   try {
@@ -1227,7 +1308,13 @@ function measureWidth(element, content, fontSize) {
 }
 function createNoteText(svg, text, style, options = {}) {
   const fontSize = style.fontSize ?? NOTE_FONT_SIZE;
-  const lines = wrapWords(text, options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE);
+  const highlights = normalizeHighlights(options.highlight);
+  const wrapped = wrapWords(
+    text,
+    options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE,
+    highlightMarks(String(text), highlights)
+  );
+  const lines = wrapped.map((line) => line.text);
   const lineHeight = fontSize * 1.05;
   const rtl = options.rtl ?? isRtlText(text);
   const group = createSvgElement("g");
@@ -1238,7 +1325,7 @@ function createNoteText(svg, text, style, options = {}) {
   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("font-weight", String(style.fontWeight ?? "600"));
   textEl.setAttribute("letter-spacing", "0.4");
   textEl.setAttribute("text-anchor", "start");
   textEl.setAttribute("dominant-baseline", "auto");
@@ -1249,11 +1336,25 @@ function createNoteText(svg, text, style, options = {}) {
   if (options.locale) {
     textEl.setAttributeNS(XML_NS, "xml:lang", options.locale);
   }
-  const tspans = lines.map((line, index) => {
+  const tspans = wrapped.map((line, index) => {
     const tspan = createSvgElement("tspan");
-    tspan.textContent = line;
     tspan.setAttribute("x", "0");
     tspan.setAttribute("dy", index === 0 ? "0" : String(lineHeight));
+    const segments = segmentsOf(line);
+    if (segments.every((segment) => segment.highlight === -1)) {
+      tspan.textContent = line.text;
+    } else {
+      for (const segment of segments) {
+        const run = createSvgElement("tspan");
+        run.textContent = segment.text;
+        const highlight = highlights[segment.highlight];
+        if (highlight?.color) run.setAttribute("fill", highlight.color);
+        if (highlight?.fontWeight != null) {
+          run.setAttribute("font-weight", String(highlight.fontWeight));
+        }
+        tspan.appendChild(run);
+      }
+    }
     textEl.appendChild(tspan);
     return tspan;
   });
@@ -1372,7 +1473,21 @@ function nudgeIntoBand(box, guard, band) {
   if (!dx) return box;
   return { ...box, x: box.x + dx };
 }
-function renderAnnotation(svg, rect, noteOptions, style, seed = 1, layout = {}) {
+function resolveNoteStyle(base, options = {}) {
+  const style = { ...base };
+  if (typeof options.color === "string" && options.color.trim()) {
+    style.color = options.color;
+  }
+  if (Number.isFinite(options.fontSize) && options.fontSize > 0) {
+    style.fontSize = options.fontSize;
+  }
+  if (typeof options.fontWeight === "number" && options.fontWeight > 0 || typeof options.fontWeight === "string" && options.fontWeight.trim()) {
+    style.fontWeight = options.fontWeight;
+  }
+  return style;
+}
+function renderAnnotation(svg, rect, noteOptions, baseStyle, seed = 1, layout = {}) {
+  const style = resolveNoteStyle(baseStyle, noteOptions ?? {});
   const { text, locale } = resolveLocalizedText(
     noteOptions?.text,
     noteOptions?.locale
@@ -1383,9 +1498,11 @@ function renderAnnotation(svg, rect, noteOptions, style, seed = 1, layout = {})
   const random = createRandom(seed + 9);
   const note = createNoteText(svg, text, style, {
     wordsPerLine: noteOptions.wordsPerLine,
-    locale
+    locale,
+    highlight: noteOptions.highlight
   });
-  const tilt = (random() - 0.45) * 7;
+  const randomTilt = (random() - 0.45) * 7;
+  const tilt = Number.isFinite(noteOptions.tilt) ? noteOptions.tilt : randomTilt;
   const tiltPad = Math.abs(Math.sin(tilt * Math.PI / 180)) * note.width * 0.5;
   const size = {
     width: note.width,
@@ -1857,14 +1974,14 @@ var instances = /* @__PURE__ */ new WeakMap();
 function now() {
   return typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
 }
-function localBand(originLeft, inset = 8) {
+function localBand(originLeft, inset = 8, scale = 1) {
   const width = window.innerWidth || document.documentElement.clientWidth || 0;
   return {
-    x: -originLeft + inset,
-    width: Math.max(0, width - inset * 2)
+    x: -originLeft + inset / scale,
+    width: Math.max(0, width - inset * 2) / scale
   };
 }
-function paddingBox(element) {
+function paddingBox(element, scale = 1) {
   const rect = element.getBoundingClientRect();
   const style = getComputedStyle(element);
   const left = parseFloat(style.borderLeftWidth) || 0;
@@ -1872,10 +1989,10 @@ function paddingBox(element) {
   const right = parseFloat(style.borderRightWidth) || 0;
   const bottom = parseFloat(style.borderBottomWidth) || 0;
   return {
-    left: rect.left + left,
-    top: rect.top + top,
-    width: Math.max(0, rect.width - left - right),
-    height: Math.max(0, rect.height - top - bottom)
+    left: rect.left / scale + left,
+    top: rect.top / scale + top,
+    width: Math.max(0, rect.width / scale - left - right),
+    height: Math.max(0, rect.height / scale - top - bottom)
   };
 }
 var DoodleOverlay = class {
@@ -1964,12 +2081,13 @@ var DoodleOverlay = class {
     const { padding, radius, color, strokeWidth, roughness, opacity } = this.options;
     const targets = this.getTargets();
     const elapsed = now() - this.startedAt;
+    const scale = screenScaleOf(this.element);
     const absoluteRects = targets.map(
-      (target) => getElementBounds(target, padding, radius)
+      (target) => getElementBounds(target, padding, radius, scale)
     );
     clearSvg(this.svg);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
-    const box = paddingBox(this.element);
+    const box = paddingBox(this.element, scale);
     const width = Math.max(1, box.width);
     const height = Math.max(1, box.height);
     const origin = { x: box.left, y: box.top };
@@ -1990,7 +2108,7 @@ var DoodleOverlay = class {
     };
     const noteGroups = [];
     const noteLayout = {
-      band: localBand(origin.x),
+      band: localBand(origin.x, 8, scale),
       gap: this.options.arrow ? 40 : 14
     };
     targets.forEach((target, index) => {

package/dist/react.d.ts

@@ -14,6 +14,7 @@ export type {
   DecorationType,
   LocalizedText,
   NoteOptions,
+  NoteHighlight,
   ArrowOptions,
   ArrowAnimationOptions,
   DecorationOptions,

package/dist/react.js

@@ -339,6 +339,9 @@ function mergeOptions(options = {}) {
       // `animate: false` opts out, an object tunes speed and gestures
       animate: normalizeArrowAnimation(config.animate)
     };
+    for (const key of ["color", "strokeWidth", "roughness", "opacity"]) {
+      if (config[key] !== void 0) merged.arrow[key] = config[key];
+    }
   }
   if (merged.decorations === true) {
     merged.decorations = { count: null, types: null };
@@ -460,14 +463,23 @@ function detectBorderRadius(element) {
   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) {
+function screenScaleOf(element) {
+  const layoutWidth = (
+    /** @type {HTMLElement} */
+    element.offsetWidth
+  );
+  if (!layoutWidth) return 1;
+  const scale = element.getBoundingClientRect().width / layoutWidth;
+  return Number.isFinite(scale) && scale > 0.01 ? scale : 1;
+}
+function getElementBounds(element, padding = 0, radiusOverride = null, scale = 1) {
   const rect = element.getBoundingClientRect();
   const radius = radiusOverride != null ? radiusOverride : detectBorderRadius(element);
-  const width = rect.width + padding * 2;
-  const height = rect.height + padding * 2;
+  const width = rect.width / scale + padding * 2;
+  const height = rect.height / scale + padding * 2;
   return {
-    x: rect.left - padding,
-    y: rect.top - padding,
+    x: rect.left / scale - padding,
+    y: rect.top / scale - padding,
     width,
     height,
     // Grow the radius with the padding so the doodle stays concentric with the
@@ -1063,7 +1075,24 @@ function boundsOf(points) {
     height: Math.max(...ys) - Math.min(...ys)
   };
 }
-function drawArrow(svg, rect, arrowOptions, style, seed, origin = null, context = {}) {
+function resolveArrowStyle(base, options = {}) {
+  const style = { ...base };
+  if (typeof options.color === "string" && options.color.trim()) {
+    style.color = options.color;
+  }
+  if (Number.isFinite(options.strokeWidth) && options.strokeWidth > 0) {
+    style.strokeWidth = options.strokeWidth;
+  }
+  if (Number.isFinite(options.roughness) && options.roughness >= 0) {
+    style.roughness = options.roughness;
+  }
+  if (Number.isFinite(options.opacity)) {
+    style.opacity = Math.min(1, Math.max(0, options.opacity));
+  }
+  return style;
+}
+function drawArrow(svg, rect, arrowOptions, baseStyle, seed, origin = null, context = {}) {
+  const style = resolveArrowStyle(baseStyle, arrowOptions);
   const random = createRandom(seed + 17);
   const { start, end } = arrowEndpoints(rect, arrowOptions, random, origin);
   const dx = end.x - start.x;
@@ -1183,17 +1212,69 @@ function drawUnderline(svg, x, y, width, style, random) {
   );
 }
 var DEFAULT_WORDS_PER_LINE = 2;
-function wrapWords(text, perLine) {
+function wrapWords(text, perLine, marks = null) {
+  const source = String(text);
   const lines = [];
-  for (const paragraph of String(text).split(/\r?\n/)) {
-    const words = paragraph.trim().split(/\s+/).filter(Boolean);
+  let cursor = 0;
+  for (const [index, paragraph] of source.split(/(\r?\n)/).entries()) {
+    const start = cursor;
+    cursor += paragraph.length;
+    if (index % 2 === 1) continue;
+    const words = [...paragraph.matchAll(/\S+/g)].map((m) => ({
+      text: m[0],
+      at: start + m.index
+    }));
     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(" "));
+      lines.push(lineOf(words.slice(i, i + size), marks));
+    }
+  }
+  return lines.length ? lines : [lineOf([{ text: source, at: 0 }], marks)];
+}
+function lineOf(words, marks) {
+  const text = words.map((w) => w.text).join(" ");
+  const result = [];
+  let previous = -1;
+  words.forEach((word, index) => {
+    const first = marks ? marks[word.at] ?? -1 : -1;
+    if (index > 0) result.push(previous === first ? first : -1);
+    for (let k = 0; k < word.text.length; k++) {
+      result.push(marks ? marks[word.at + k] ?? -1 : -1);
+    }
+    previous = marks ? marks[word.at + word.text.length - 1] ?? -1 : -1;
+  });
+  return { text, marks: result };
+}
+function normalizeHighlights(highlight) {
+  const list = Array.isArray(highlight) ? highlight : highlight ? [highlight] : [];
+  return list.map((entry) => typeof entry === "string" ? { text: entry } : entry).filter((entry) => entry && typeof entry.text === "string" && entry.text);
+}
+function highlightMarks(text, highlights) {
+  if (!highlights.length) return null;
+  const marks = new Int16Array(text.length).fill(-1);
+  let any = false;
+  highlights.forEach((highlight, index) => {
+    for (let at = text.indexOf(highlight.text); at !== -1; at = text.indexOf(highlight.text, at + highlight.text.length)) {
+      for (let k = at; k < at + highlight.text.length; k++) {
+        if (marks[k] === -1) {
+          marks[k] = index;
+          any = true;
+        }
+      }
     }
+  });
+  return any ? marks : null;
+}
+function segmentsOf(line) {
+  const segments = [];
+  for (let i = 0; i < line.text.length; i++) {
+    const highlight = line.marks[i] ?? -1;
+    const last = segments[segments.length - 1];
+    if (last && last.highlight === highlight) last.text += line.text[i];
+    else segments.push({ text: line.text[i], highlight });
   }
-  return lines.length ? lines : [String(text)];
+  return segments;
 }
 function measureWidth(element, content, fontSize) {
   try {
@@ -1210,7 +1291,13 @@ function measureWidth(element, content, fontSize) {
 }
 function createNoteText(svg, text, style, options = {}) {
   const fontSize = style.fontSize ?? NOTE_FONT_SIZE;
-  const lines = wrapWords(text, options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE);
+  const highlights = normalizeHighlights(options.highlight);
+  const wrapped = wrapWords(
+    text,
+    options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE,
+    highlightMarks(String(text), highlights)
+  );
+  const lines = wrapped.map((line) => line.text);
   const lineHeight = fontSize * 1.05;
   const rtl = options.rtl ?? isRtlText(text);
   const group = createSvgElement("g");
@@ -1221,7 +1308,7 @@ function createNoteText(svg, text, style, options = {}) {
   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("font-weight", String(style.fontWeight ?? "600"));
   textEl.setAttribute("letter-spacing", "0.4");
   textEl.setAttribute("text-anchor", "start");
   textEl.setAttribute("dominant-baseline", "auto");
@@ -1232,11 +1319,25 @@ function createNoteText(svg, text, style, options = {}) {
   if (options.locale) {
     textEl.setAttributeNS(XML_NS, "xml:lang", options.locale);
   }
-  const tspans = lines.map((line, index) => {
+  const tspans = wrapped.map((line, index) => {
     const tspan = createSvgElement("tspan");
-    tspan.textContent = line;
     tspan.setAttribute("x", "0");
     tspan.setAttribute("dy", index === 0 ? "0" : String(lineHeight));
+    const segments = segmentsOf(line);
+    if (segments.every((segment) => segment.highlight === -1)) {
+      tspan.textContent = line.text;
+    } else {
+      for (const segment of segments) {
+        const run = createSvgElement("tspan");
+        run.textContent = segment.text;
+        const highlight = highlights[segment.highlight];
+        if (highlight?.color) run.setAttribute("fill", highlight.color);
+        if (highlight?.fontWeight != null) {
+          run.setAttribute("font-weight", String(highlight.fontWeight));
+        }
+        tspan.appendChild(run);
+      }
+    }
     textEl.appendChild(tspan);
     return tspan;
   });
@@ -1355,7 +1456,21 @@ function nudgeIntoBand(box, guard, band) {
   if (!dx) return box;
   return { ...box, x: box.x + dx };
 }
-function renderAnnotation(svg, rect, noteOptions, style, seed = 1, layout = {}) {
+function resolveNoteStyle(base, options = {}) {
+  const style = { ...base };
+  if (typeof options.color === "string" && options.color.trim()) {
+    style.color = options.color;
+  }
+  if (Number.isFinite(options.fontSize) && options.fontSize > 0) {
+    style.fontSize = options.fontSize;
+  }
+  if (typeof options.fontWeight === "number" && options.fontWeight > 0 || typeof options.fontWeight === "string" && options.fontWeight.trim()) {
+    style.fontWeight = options.fontWeight;
+  }
+  return style;
+}
+function renderAnnotation(svg, rect, noteOptions, baseStyle, seed = 1, layout = {}) {
+  const style = resolveNoteStyle(baseStyle, noteOptions ?? {});
   const { text, locale } = resolveLocalizedText(
     noteOptions?.text,
     noteOptions?.locale
@@ -1366,9 +1481,11 @@ function renderAnnotation(svg, rect, noteOptions, style, seed = 1, layout = {})
   const random = createRandom(seed + 9);
   const note = createNoteText(svg, text, style, {
     wordsPerLine: noteOptions.wordsPerLine,
-    locale
+    locale,
+    highlight: noteOptions.highlight
   });
-  const tilt = (random() - 0.45) * 7;
+  const randomTilt = (random() - 0.45) * 7;
+  const tilt = Number.isFinite(noteOptions.tilt) ? noteOptions.tilt : randomTilt;
   const tiltPad = Math.abs(Math.sin(tilt * Math.PI / 180)) * note.width * 0.5;
   const size = {
     width: note.width,
@@ -1840,14 +1957,14 @@ var instances = /* @__PURE__ */ new WeakMap();
 function now() {
   return typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
 }
-function localBand(originLeft, inset = 8) {
+function localBand(originLeft, inset = 8, scale = 1) {
   const width = window.innerWidth || document.documentElement.clientWidth || 0;
   return {
-    x: -originLeft + inset,
-    width: Math.max(0, width - inset * 2)
+    x: -originLeft + inset / scale,
+    width: Math.max(0, width - inset * 2) / scale
   };
 }
-function paddingBox(element) {
+function paddingBox(element, scale = 1) {
   const rect = element.getBoundingClientRect();
   const style = getComputedStyle(element);
   const left = parseFloat(style.borderLeftWidth) || 0;
@@ -1855,10 +1972,10 @@ function paddingBox(element) {
   const right = parseFloat(style.borderRightWidth) || 0;
   const bottom = parseFloat(style.borderBottomWidth) || 0;
   return {
-    left: rect.left + left,
-    top: rect.top + top,
-    width: Math.max(0, rect.width - left - right),
-    height: Math.max(0, rect.height - top - bottom)
+    left: rect.left / scale + left,
+    top: rect.top / scale + top,
+    width: Math.max(0, rect.width / scale - left - right),
+    height: Math.max(0, rect.height / scale - top - bottom)
   };
 }
 var DoodleOverlay = class {
@@ -1947,12 +2064,13 @@ var DoodleOverlay = class {
     const { padding, radius, color, strokeWidth, roughness, opacity } = this.options;
     const targets = this.getTargets();
     const elapsed = now() - this.startedAt;
+    const scale = screenScaleOf(this.element);
     const absoluteRects = targets.map(
-      (target) => getElementBounds(target, padding, radius)
+      (target) => getElementBounds(target, padding, radius, scale)
     );
     clearSvg(this.svg);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
-    const box = paddingBox(this.element);
+    const box = paddingBox(this.element, scale);
     const width = Math.max(1, box.width);
     const height = Math.max(1, box.height);
     const origin = { x: box.left, y: box.top };
@@ -1973,7 +2091,7 @@ var DoodleOverlay = class {
     };
     const noteGroups = [];
     const noteLayout = {
-      band: localBand(origin.x),
+      band: localBand(origin.x, 8, scale),
       gap: this.options.arrow ? 40 : 14
     };
     targets.forEach((target, index) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aznabee/freehand-ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Wrap any existing web element with a beautiful, responsive, hand-drawn doodle layer",
   "type": "module",
   "main": "./dist/freehand-ui.cjs",
@@ -36,7 +36,9 @@
     "build:example-react": "node scripts/build-example-react.js",
     "dev": "node scripts/build.js && node scripts/build-example-react.js && node scripts/serve.js",
     "test": "node --test tests/*.test.js",
-    "prepublishOnly": "npm run build && npm test"
+    "prepublishOnly": "npm run build && npm test",
+    "typecheck": "tsc --noEmit --strict --skipLibCheck --jsx react-jsx --moduleResolution bundler --module esnext src/index.d.ts src/react.d.ts",
+    "check": "npm run typecheck && npm test && npm run build"
   },
   "author": "Lakshay Gupta",
   "repository": {
@@ -76,8 +78,14 @@
     }
   },
   "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "esbuild": "^0.25.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "typescript": "^7.0.2"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }