@aznabee/freehand-ui 0.2.0 → 0.3.0

package/README.md

@@ -21,7 +21,7 @@ Wrap any existing web element with a beautiful, responsive, hand-drawn doodle la
 
 **Live on [Aznabee.com](https://aznabee.com)** - see it in production on the real product.
 
-## ![Basic hand-drawn border around a card](docs/images/basic.png)
+![Basic hand-drawn border around a card](docs/images/basic.png)
 
 ## Install
 
@@ -121,6 +121,32 @@ doodle(".cta", {
 
 Notes are measured from real glyph metrics and laid out so they never sit on top of the element. The underline is drawn to the measured text width; set `underline: false` for plain handwriting.
 
+#### Styling a note
+
+A note writes in the doodle's `color` by default. Give it its own look, and paint chosen words in another colour:
+
+```javascript
+doodle(".cta", {
+  border: false,
+  note: {
+    text: "Start chat\nin Game Mode!",
+    position: "right",
+    color: "#ffffff", // the handwriting and its underline
+    fontSize: 25, // px, default 19
+    fontWeight: 600, // default 600
+    tilt: -11, // degrees, exactly; omit for a small random tilt
+    wordsPerLine: 0, // break only at \n (default 2 words per line)
+    underline: false,
+    highlight: { text: "Game Mode!", color: "#ffc83d", fontWeight: 700 },
+  },
+});
+```
+
+- **`highlight`** takes one entry or a list (`{ text, color?, fontWeight? }`; a bare string only finds the words). Every occurrence is painted, and a phrase that wraps onto the next line keeps its colour. Where two entries overlap, the earlier one wins. Words that are not in the note are ignored.
+- **`\n`** in `text` starts a new line. `wordsPerLine` wraps the rest: `2` by default, `0` to break only at `\n`.
+- **`tilt`** pins the rotation. Without it each note gets a small random tilt, as before.
+- For a note in several languages, list the words for each language as separate highlights; only the ones that occur in the language drawn are painted.
+
 ### Notes in the visitor's language
 
 Write the note once per language and it is drawn in the one the visitor reads - taken from `navigator.languages`, which is what their operating system is set to. No configuration, no i18n library.
@@ -220,6 +246,23 @@ doodle(".cta", {
 
 **`to`:** `"edge"` (default) lands the tip just outside the frame; `"center"` points into the element.
 
+**The arrow's pen.** It draws in the doodle's `color`, `strokeWidth`, `roughness` and `opacity`; each can be set for the arrow alone:
+
+```javascript
+doodle(".cta", {
+  color: "#ffffff",
+  note: { text: "start chat", position: "right" },
+  arrow: {
+    color: "#ff4fa3", // any CSS colour
+    strokeWidth: 3.4, // line thickness, px
+    roughness: 1, // how shaky the pen is
+    opacity: 1,
+  },
+});
+```
+
+A setting that cannot be used (a negative width, an empty colour) is ignored and the doodle's own is kept.
+
 ### Arrow animation
 
 Arrows animate by default. Two gestures, both pure CSS:
@@ -493,6 +536,12 @@ Then open:
 
 ---
 
+## Contributing
+
+Contributions are welcome - see [CONTRIBUTING.md](CONTRIBUTING.md) and the [Code of Conduct](CODE_OF_CONDUCT.md). Report vulnerabilities privately as described in [SECURITY.md](SECURITY.md). Release notes live in [CHANGELOG.md](CHANGELOG.md).
+
+---
+
 ## License
 
-MIT
+[MIT](LICENSE)

package/dist/freehand-ui.cjs

@@ -351,6 +351,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 };
@@ -472,14 +475,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
@@ -1075,7 +1087,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;
@@ -1195,17 +1224,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 : [String(text)];
+  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 segments;
 }
 function measureWidth(element, content, fontSize) {
   try {
@@ -1222,7 +1303,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");
@@ -1233,7 +1320,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");
@@ -1244,11 +1331,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;
   });
@@ -1367,7 +1468,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
@@ -1378,9 +1493,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,
@@ -1852,14 +1969,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;
@@ -1867,10 +1984,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 {
@@ -1959,12 +2076,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 };
@@ -1985,7 +2103,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/freehand-ui.js

@@ -326,6 +326,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 };
@@ -447,14 +450,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
@@ -1050,7 +1062,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;
@@ -1170,17 +1199,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 : [String(text)];
+  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 segments;
 }
 function measureWidth(element, content, fontSize) {
   try {
@@ -1197,7 +1278,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");
@@ -1208,7 +1295,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");
@@ -1219,11 +1306,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;
   });
@@ -1342,7 +1443,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
@@ -1353,9 +1468,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,
@@ -1827,14 +1944,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;
@@ -1842,10 +1959,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 {
@@ -1934,12 +2051,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 };
@@ -1960,7 +2078,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) => {