scroll-arrows 0.2.0 → 0.4.0

package/README.md

@@ -20,6 +20,8 @@ Framework-agnostic core + a thin React wrapper. Arrows live in a click-through
 overlay `<svg>`, auto-track their endpoints with `ResizeObserver`, and draw on
 scroll progress.
 
+**[▶ Live demo](https://dancj.github.io/scroll-arrows/)**
+
 ```bash
 npm install scroll-arrows
 ```
@@ -89,9 +91,11 @@ arrow.destroy();
   rendering fully drawn and static (no scroll animation) while still tracking
   layout. Opt out with `respectReducedMotion: false` to keep the animation.
   Works the same for `scrollArrowGroup`.
-- **Labels** — `label` rides along the line at `labelAt` (0..1, default mid)
-  and can sit off the line via `labelOffset` (perpendicular px; + = left of the
-  draw direction, − = right). Fades in as the pen draws through it.
+- **Labels** — `label` rides along the line at `labelAt` — a keyword
+  (`'start'` / `'middle'` / `'end'`), a `0..1` fraction, or a percentage string
+  like `'25%'` (default `'middle'`) — and can sit off the line via `labelOffset`
+  (perpendicular px; + = left of the draw direction, − = right). Fades in as the
+  pen draws through it.
   `labelBackground` masks a gap in the line behind the text (the excalidraw
   look); style via `labelColor` / `font`.
 - **Staggered groups** — `scrollArrowGroup` owns N arrows and reveals them in

package/dist/{chunk-LIT577GH.js → chunk-GX722UDR.js}

@@ -301,6 +301,25 @@ function clamp012(t) {
 }
 
 // src/draw.ts
+var LABEL_KEYWORDS = {
+  start: 0,
+  middle: 0.5,
+  end: 1
+};
+function resolveLabelAt(value, fallback = 0.5) {
+  if (value == null) return fallback;
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? clamp01(value) : fallback;
+  }
+  const key = value.trim().toLowerCase();
+  const keyword = LABEL_KEYWORDS[key];
+  if (keyword !== void 0) return keyword;
+  if (key.endsWith("%")) {
+    const n = Number.parseFloat(key.slice(0, -1));
+    return Number.isFinite(n) ? clamp01(n / 100) : fallback;
+  }
+  return fallback;
+}
 function lengths(segs) {
   let lineLen = 0;
   let headLen = 0;
@@ -330,7 +349,8 @@ function lineProgress(segs, eased) {
   return lineLen > 0 ? clamp01(drawn / lineLen) : 1;
 }
 function labelOpacity(lineProg, labelAt, fade = 0.08) {
-  return clamp01((lineProg - clamp01(labelAt)) / (fade || 1));
+  const start = Math.min(clamp01(labelAt), 1 - fade);
+  return clamp01((lineProg - start) / (fade || 1));
 }
 
 // src/scroll-arrow.ts
@@ -344,8 +364,17 @@ var ScrollArrow = class {
     this.segments = [];
     /** Representative line stroke + label nodes, when a label is set. */
     this.lineEl = null;
+    /**
+     * The smooth ideal path `d` (pre-roughjs). Label placement measures against
+     * this, not `lineEl`: rough.js bakes its double stroke into one path with two
+     * subpaths, so `lineEl.getTotalLength()` is ~2x the visible curve and would
+     * put `labelAt` at twice its intended fraction.
+     */
+    this.lineD = "";
     this.labelEl = null;
     this.labelBgEl = null;
+    /** `opts.labelAt` resolved to a 0..1 fraction; cached by renderLabel for the draw loop. */
+    this.resolvedLabelAt = 0.5;
     this.rafId = 0;
     this.destroyed = false;
     this.onScroll = () => {
@@ -501,6 +530,7 @@ var ScrollArrow = class {
       const belly = { x: clear.x * BOW, y: clear.y * BOW };
       d = buildPath(local, curvature, belly);
     }
+    this.lineD = d;
     this.appendDrawable(this.rc.path(d, roughOpts), "line");
     const head = this.opts.head;
     const size = this.opts.headSize;
@@ -537,25 +567,26 @@ var ScrollArrow = class {
     this.labelEl = null;
     this.labelBgEl = null;
     const text = this.opts.label;
-    if (!text || !this.lineEl) return;
-    const total = this.lineEl.getTotalLength();
-    const at = clampAt(this.opts.labelAt ?? 0.5);
-    const pt = this.lineEl.getPointAtLength(at * total);
+    if (!text || !this.lineEl || !this.lineD) return;
+    const at = resolveLabelAt(this.opts.labelAt);
+    this.resolvedLabelAt = at;
+    const measure = createSvgEl("path");
+    measure.setAttribute("d", this.lineD);
+    this.group.appendChild(measure);
+    const total = measure.getTotalLength();
+    const pt = measure.getPointAtLength(at * total);
     const offset = this.opts.labelOffset ?? 0;
     let x = pt.x;
     let y = pt.y;
     if (offset && total > 0) {
       const eps = Math.min(1, total / 2);
-      const before = this.lineEl.getPointAtLength(
-        Math.max(0, at * total - eps)
-      );
-      const after = this.lineEl.getPointAtLength(
-        Math.min(total, at * total + eps)
-      );
+      const before = measure.getPointAtLength(Math.max(0, at * total - eps));
+      const after = measure.getPointAtLength(Math.min(total, at * total + eps));
       const n = unitNormal(before, after);
       x += n.x * offset;
       y += n.y * offset;
     }
+    this.group.removeChild(measure);
     const label = createSvgEl("text");
     label.textContent = text;
     label.setAttribute("x", String(x));
@@ -605,7 +636,7 @@ var ScrollArrow = class {
     if (this.labelEl) {
       const op = labelOpacity(
         lineProgress(this.segments, eased),
-        this.opts.labelAt ?? 0.5
+        this.resolvedLabelAt
       );
       this.labelEl.style.opacity = String(op);
       if (this.labelBgEl) this.labelBgEl.style.opacity = String(op);
@@ -659,9 +690,6 @@ function resolve(ref) {
 function refKey(ref) {
   return typeof ref === "string" ? ref : ref.tagName + (ref.id ? "#" + ref.id : "");
 }
-function clampAt(t) {
-  return t < 0 ? 0 : t > 1 ? 1 : t;
-}
 
 // src/group.ts
 var ScrollArrowGroup = class {
@@ -798,5 +826,5 @@ function resolve2(ref) {
 }
 
 export { ScrollArrow, ScrollArrowGroup, easeInOutCubic };
-//# sourceMappingURL=chunk-LIT577GH.js.map
-//# sourceMappingURL=chunk-LIT577GH.js.map
+//# sourceMappingURL=chunk-GX722UDR.js.map
+//# sourceMappingURL=chunk-GX722UDR.js.map

package/dist/index.cjs

@@ -309,6 +309,25 @@ function clamp012(t) {
 }
 
 // src/draw.ts
+var LABEL_KEYWORDS = {
+  start: 0,
+  middle: 0.5,
+  end: 1
+};
+function resolveLabelAt(value, fallback = 0.5) {
+  if (value == null) return fallback;
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? clamp01(value) : fallback;
+  }
+  const key = value.trim().toLowerCase();
+  const keyword = LABEL_KEYWORDS[key];
+  if (keyword !== void 0) return keyword;
+  if (key.endsWith("%")) {
+    const n = Number.parseFloat(key.slice(0, -1));
+    return Number.isFinite(n) ? clamp01(n / 100) : fallback;
+  }
+  return fallback;
+}
 function lengths(segs) {
   let lineLen = 0;
   let headLen = 0;
@@ -338,7 +357,8 @@ function lineProgress(segs, eased) {
   return lineLen > 0 ? clamp01(drawn / lineLen) : 1;
 }
 function labelOpacity(lineProg, labelAt, fade = 0.08) {
-  return clamp01((lineProg - clamp01(labelAt)) / (fade || 1));
+  const start = Math.min(clamp01(labelAt), 1 - fade);
+  return clamp01((lineProg - start) / (fade || 1));
 }
 
 // src/scroll-arrow.ts
@@ -352,8 +372,17 @@ var ScrollArrow = class {
     this.segments = [];
     /** Representative line stroke + label nodes, when a label is set. */
     this.lineEl = null;
+    /**
+     * The smooth ideal path `d` (pre-roughjs). Label placement measures against
+     * this, not `lineEl`: rough.js bakes its double stroke into one path with two
+     * subpaths, so `lineEl.getTotalLength()` is ~2x the visible curve and would
+     * put `labelAt` at twice its intended fraction.
+     */
+    this.lineD = "";
     this.labelEl = null;
     this.labelBgEl = null;
+    /** `opts.labelAt` resolved to a 0..1 fraction; cached by renderLabel for the draw loop. */
+    this.resolvedLabelAt = 0.5;
     this.rafId = 0;
     this.destroyed = false;
     this.onScroll = () => {
@@ -509,6 +538,7 @@ var ScrollArrow = class {
       const belly = { x: clear.x * BOW, y: clear.y * BOW };
       d = buildPath(local, curvature, belly);
     }
+    this.lineD = d;
     this.appendDrawable(this.rc.path(d, roughOpts), "line");
     const head = this.opts.head;
     const size = this.opts.headSize;
@@ -545,25 +575,26 @@ var ScrollArrow = class {
     this.labelEl = null;
     this.labelBgEl = null;
     const text = this.opts.label;
-    if (!text || !this.lineEl) return;
-    const total = this.lineEl.getTotalLength();
-    const at = clampAt(this.opts.labelAt ?? 0.5);
-    const pt = this.lineEl.getPointAtLength(at * total);
+    if (!text || !this.lineEl || !this.lineD) return;
+    const at = resolveLabelAt(this.opts.labelAt);
+    this.resolvedLabelAt = at;
+    const measure = createSvgEl("path");
+    measure.setAttribute("d", this.lineD);
+    this.group.appendChild(measure);
+    const total = measure.getTotalLength();
+    const pt = measure.getPointAtLength(at * total);
     const offset = this.opts.labelOffset ?? 0;
     let x = pt.x;
     let y = pt.y;
     if (offset && total > 0) {
       const eps = Math.min(1, total / 2);
-      const before = this.lineEl.getPointAtLength(
-        Math.max(0, at * total - eps)
-      );
-      const after = this.lineEl.getPointAtLength(
-        Math.min(total, at * total + eps)
-      );
+      const before = measure.getPointAtLength(Math.max(0, at * total - eps));
+      const after = measure.getPointAtLength(Math.min(total, at * total + eps));
       const n = unitNormal(before, after);
       x += n.x * offset;
       y += n.y * offset;
     }
+    this.group.removeChild(measure);
     const label = createSvgEl("text");
     label.textContent = text;
     label.setAttribute("x", String(x));
@@ -613,7 +644,7 @@ var ScrollArrow = class {
     if (this.labelEl) {
       const op = labelOpacity(
         lineProgress(this.segments, eased),
-        this.opts.labelAt ?? 0.5
+        this.resolvedLabelAt
       );
       this.labelEl.style.opacity = String(op);
       if (this.labelBgEl) this.labelBgEl.style.opacity = String(op);
@@ -667,9 +698,6 @@ function resolve(ref) {
 function refKey(ref) {
   return typeof ref === "string" ? ref : ref.tagName + (ref.id ? "#" + ref.id : "");
 }
-function clampAt(t) {
-  return t < 0 ? 0 : t > 1 ? 1 : t;
-}
 
 // src/group.ts
 var ScrollArrowGroup = class {

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { S as ScrollArrowOptions, a as ScrollArrowGroupOptions } from './types-Cpvz9wtr.cjs';
-export { A as ArrowHead, E as ElementRef, P as Point, b as ScrollOptions, c as Socket } from './types-Cpvz9wtr.cjs';
+import { S as ScrollArrowOptions, a as ScrollArrowGroupOptions } from './types-CgHPWybd.cjs';
+export { A as ArrowHead, E as ElementRef, L as LabelPosition, P as Point, b as ScrollOptions, c as Socket } from './types-CgHPWybd.cjs';
 
 /** A single hand-drawn arrow that draws itself between two elements on scroll. */
 declare class ScrollArrow {
@@ -18,8 +18,17 @@ declare class ScrollArrow {
     private segments;
     /** Representative line stroke + label nodes, when a label is set. */
     private lineEl;
+    /**
+     * The smooth ideal path `d` (pre-roughjs). Label placement measures against
+     * this, not `lineEl`: rough.js bakes its double stroke into one path with two
+     * subpaths, so `lineEl.getTotalLength()` is ~2x the visible curve and would
+     * put `labelAt` at twice its intended fraction.
+     */
+    private lineD;
     private labelEl;
     private labelBgEl;
+    /** `opts.labelAt` resolved to a 0..1 fraction; cached by renderLabel for the draw loop. */
+    private resolvedLabelAt;
     private progress;
     private ro?;
     /**

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { S as ScrollArrowOptions, a as ScrollArrowGroupOptions } from './types-Cpvz9wtr.js';
-export { A as ArrowHead, E as ElementRef, P as Point, b as ScrollOptions, c as Socket } from './types-Cpvz9wtr.js';
+import { S as ScrollArrowOptions, a as ScrollArrowGroupOptions } from './types-CgHPWybd.js';
+export { A as ArrowHead, E as ElementRef, L as LabelPosition, P as Point, b as ScrollOptions, c as Socket } from './types-CgHPWybd.js';
 
 /** A single hand-drawn arrow that draws itself between two elements on scroll. */
 declare class ScrollArrow {
@@ -18,8 +18,17 @@ declare class ScrollArrow {
     private segments;
     /** Representative line stroke + label nodes, when a label is set. */
     private lineEl;
+    /**
+     * The smooth ideal path `d` (pre-roughjs). Label placement measures against
+     * this, not `lineEl`: rough.js bakes its double stroke into one path with two
+     * subpaths, so `lineEl.getTotalLength()` is ~2x the visible curve and would
+     * put `labelAt` at twice its intended fraction.
+     */
+    private lineD;
     private labelEl;
     private labelBgEl;
+    /** `opts.labelAt` resolved to a 0..1 fraction; cached by renderLabel for the draw loop. */
+    private resolvedLabelAt;
     private progress;
     private ro?;
     /**

package/dist/index.js

@@ -1,5 +1,5 @@
-import { ScrollArrow, ScrollArrowGroup } from './chunk-LIT577GH.js';
-export { ScrollArrow, ScrollArrowGroup, easeInOutCubic } from './chunk-LIT577GH.js';
+import { ScrollArrow, ScrollArrowGroup } from './chunk-GX722UDR.js';
+export { ScrollArrow, ScrollArrowGroup, easeInOutCubic } from './chunk-GX722UDR.js';
 
 // src/index.ts
 function scrollArrow(options) {

package/dist/react.cjs

@@ -310,6 +310,25 @@ function clamp012(t) {
 }
 
 // src/draw.ts
+var LABEL_KEYWORDS = {
+  start: 0,
+  middle: 0.5,
+  end: 1
+};
+function resolveLabelAt(value, fallback = 0.5) {
+  if (value == null) return fallback;
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? clamp01(value) : fallback;
+  }
+  const key = value.trim().toLowerCase();
+  const keyword = LABEL_KEYWORDS[key];
+  if (keyword !== void 0) return keyword;
+  if (key.endsWith("%")) {
+    const n = Number.parseFloat(key.slice(0, -1));
+    return Number.isFinite(n) ? clamp01(n / 100) : fallback;
+  }
+  return fallback;
+}
 function lengths(segs) {
   let lineLen = 0;
   let headLen = 0;
@@ -339,7 +358,8 @@ function lineProgress(segs, eased) {
   return lineLen > 0 ? clamp01(drawn / lineLen) : 1;
 }
 function labelOpacity(lineProg, labelAt, fade = 0.08) {
-  return clamp01((lineProg - clamp01(labelAt)) / (fade || 1));
+  const start = Math.min(clamp01(labelAt), 1 - fade);
+  return clamp01((lineProg - start) / (fade || 1));
 }
 
 // src/scroll-arrow.ts
@@ -353,8 +373,17 @@ var ScrollArrow = class {
     this.segments = [];
     /** Representative line stroke + label nodes, when a label is set. */
     this.lineEl = null;
+    /**
+     * The smooth ideal path `d` (pre-roughjs). Label placement measures against
+     * this, not `lineEl`: rough.js bakes its double stroke into one path with two
+     * subpaths, so `lineEl.getTotalLength()` is ~2x the visible curve and would
+     * put `labelAt` at twice its intended fraction.
+     */
+    this.lineD = "";
     this.labelEl = null;
     this.labelBgEl = null;
+    /** `opts.labelAt` resolved to a 0..1 fraction; cached by renderLabel for the draw loop. */
+    this.resolvedLabelAt = 0.5;
     this.rafId = 0;
     this.destroyed = false;
     this.onScroll = () => {
@@ -510,6 +539,7 @@ var ScrollArrow = class {
       const belly = { x: clear.x * BOW, y: clear.y * BOW };
       d = buildPath(local, curvature, belly);
     }
+    this.lineD = d;
     this.appendDrawable(this.rc.path(d, roughOpts), "line");
     const head = this.opts.head;
     const size = this.opts.headSize;
@@ -546,25 +576,26 @@ var ScrollArrow = class {
     this.labelEl = null;
     this.labelBgEl = null;
     const text = this.opts.label;
-    if (!text || !this.lineEl) return;
-    const total = this.lineEl.getTotalLength();
-    const at = clampAt(this.opts.labelAt ?? 0.5);
-    const pt = this.lineEl.getPointAtLength(at * total);
+    if (!text || !this.lineEl || !this.lineD) return;
+    const at = resolveLabelAt(this.opts.labelAt);
+    this.resolvedLabelAt = at;
+    const measure = createSvgEl("path");
+    measure.setAttribute("d", this.lineD);
+    this.group.appendChild(measure);
+    const total = measure.getTotalLength();
+    const pt = measure.getPointAtLength(at * total);
     const offset = this.opts.labelOffset ?? 0;
     let x = pt.x;
     let y = pt.y;
     if (offset && total > 0) {
       const eps = Math.min(1, total / 2);
-      const before = this.lineEl.getPointAtLength(
-        Math.max(0, at * total - eps)
-      );
-      const after = this.lineEl.getPointAtLength(
-        Math.min(total, at * total + eps)
-      );
+      const before = measure.getPointAtLength(Math.max(0, at * total - eps));
+      const after = measure.getPointAtLength(Math.min(total, at * total + eps));
       const n = unitNormal(before, after);
       x += n.x * offset;
       y += n.y * offset;
     }
+    this.group.removeChild(measure);
     const label = createSvgEl("text");
     label.textContent = text;
     label.setAttribute("x", String(x));
@@ -614,7 +645,7 @@ var ScrollArrow = class {
     if (this.labelEl) {
       const op = labelOpacity(
         lineProgress(this.segments, eased),
-        this.opts.labelAt ?? 0.5
+        this.resolvedLabelAt
       );
       this.labelEl.style.opacity = String(op);
       if (this.labelBgEl) this.labelBgEl.style.opacity = String(op);
@@ -668,9 +699,6 @@ function resolve(ref) {
 function refKey(ref) {
   return typeof ref === "string" ? ref : ref.tagName + (ref.id ? "#" + ref.id : "");
 }
-function clampAt(t) {
-  return t < 0 ? 0 : t > 1 ? 1 : t;
-}
 
 // src/group.ts
 var ScrollArrowGroup = class {

package/dist/react.d.cts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { S as ScrollArrowOptions, a as ScrollArrowGroupOptions } from './types-Cpvz9wtr.cjs';
+import { S as ScrollArrowOptions, a as ScrollArrowGroupOptions } from './types-CgHPWybd.cjs';
 
 type Anchor = RefObject<Element | null> | Element | string;
 interface UseScrollArrowOptions extends Omit<ScrollArrowOptions, 'start' | 'end'> {

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { S as ScrollArrowOptions, a as ScrollArrowGroupOptions } from './types-Cpvz9wtr.js';
+import { S as ScrollArrowOptions, a as ScrollArrowGroupOptions } from './types-CgHPWybd.js';
 
 type Anchor = RefObject<Element | null> | Element | string;
 interface UseScrollArrowOptions extends Omit<ScrollArrowOptions, 'start' | 'end'> {

package/dist/react.js

@@ -1,4 +1,4 @@
-import { ScrollArrow, ScrollArrowGroup } from './chunk-LIT577GH.js';
+import { ScrollArrow, ScrollArrowGroup } from './chunk-GX722UDR.js';
 import { useRef, useEffect } from 'react';
 
 function read(a) {

package/dist/{types-Cpvz9wtr.d.cts → types-CgHPWybd.d.cts}

@@ -13,6 +13,13 @@ type ArrowHead = 'start' | 'end' | 'both' | 'none';
 type Route = 'curved' | 'elbow';
 /** Anything we can resolve to a live DOM element. */
 type ElementRef = Element | string;
+/**
+ * Where a label sits along the line: a keyword, a `0..1` fraction, or a
+ * percentage string like `'25%'`. A dynamically built percentage string is
+ * typed as `string`, so cast it (`pct as LabelPosition`) — any unrecognized
+ * value falls back to the default at runtime.
+ */
+type LabelPosition = 'start' | 'middle' | 'end' | number | `${number}%`;
 interface ScrollOptions {
     /**
      * The element whose travel through the viewport drives the draw.
@@ -91,11 +98,18 @@ interface ScrollArrowOptions {
     headSize?: number;
     /** Text to place along the line. Omit for no label. */
     label?: string;
-    /** Position of the label along the line, 0 (start) .. 1 (end). Default 0.5. */
-    labelAt?: number;
     /**
-     * Perpendicular offset from the line in px. Positive sits to the left of the
-     * draw direction, negative to the right; 0 sits on the line. Default 0.
+     * Where the label sits *along* the line. Accepts:
+     * - a keyword: `'start'`, `'middle'`, or `'end'`;
+     * - a `0..1` fraction (`0` = start, `1` = end); or
+     * - a percentage string like `'25%'`.
+     * Default `'middle'`. For sideways placement see `labelOffset`.
+     */
+    labelAt?: LabelPosition;
+    /**
+     * How far the label sits *perpendicular* to the line, in px (sideways, not
+     * along it). Positive sits to the left of the draw direction, negative to the
+     * right; 0 sits on the line. Default 0.
      */
     labelOffset?: number;
     /** Label text color. Default: stroke color. */
@@ -179,4 +193,4 @@ interface ScrollArrowGroupOptions {
     enabled?: boolean;
 }
 
-export type { ArrowHead as A, ElementRef as E, Point as P, ScrollArrowOptions as S, ScrollArrowGroupOptions as a, ScrollOptions as b, Socket as c };
+export type { ArrowHead as A, ElementRef as E, LabelPosition as L, Point as P, ScrollArrowOptions as S, ScrollArrowGroupOptions as a, ScrollOptions as b, Socket as c };

package/dist/{types-Cpvz9wtr.d.ts → types-CgHPWybd.d.ts}

@@ -13,6 +13,13 @@ type ArrowHead = 'start' | 'end' | 'both' | 'none';
 type Route = 'curved' | 'elbow';
 /** Anything we can resolve to a live DOM element. */
 type ElementRef = Element | string;
+/**
+ * Where a label sits along the line: a keyword, a `0..1` fraction, or a
+ * percentage string like `'25%'`. A dynamically built percentage string is
+ * typed as `string`, so cast it (`pct as LabelPosition`) — any unrecognized
+ * value falls back to the default at runtime.
+ */
+type LabelPosition = 'start' | 'middle' | 'end' | number | `${number}%`;
 interface ScrollOptions {
     /**
      * The element whose travel through the viewport drives the draw.
@@ -91,11 +98,18 @@ interface ScrollArrowOptions {
     headSize?: number;
     /** Text to place along the line. Omit for no label. */
     label?: string;
-    /** Position of the label along the line, 0 (start) .. 1 (end). Default 0.5. */
-    labelAt?: number;
     /**
-     * Perpendicular offset from the line in px. Positive sits to the left of the
-     * draw direction, negative to the right; 0 sits on the line. Default 0.
+     * Where the label sits *along* the line. Accepts:
+     * - a keyword: `'start'`, `'middle'`, or `'end'`;
+     * - a `0..1` fraction (`0` = start, `1` = end); or
+     * - a percentage string like `'25%'`.
+     * Default `'middle'`. For sideways placement see `labelOffset`.
+     */
+    labelAt?: LabelPosition;
+    /**
+     * How far the label sits *perpendicular* to the line, in px (sideways, not
+     * along it). Positive sits to the left of the draw direction, negative to the
+     * right; 0 sits on the line. Default 0.
      */
     labelOffset?: number;
     /** Label text color. Default: stroke color. */
@@ -179,4 +193,4 @@ interface ScrollArrowGroupOptions {
     enabled?: boolean;
 }
 
-export type { ArrowHead as A, ElementRef as E, Point as P, ScrollArrowOptions as S, ScrollArrowGroupOptions as a, ScrollOptions as b, Socket as c };
+export type { ArrowHead as A, ElementRef as E, LabelPosition as L, Point as P, ScrollArrowOptions as S, ScrollArrowGroupOptions as a, ScrollOptions as b, Socket as c };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scroll-arrows",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Hand-drawn arrows that draw themselves between two elements as you scroll. Roughness goes from clean straight lines to scratchy and curvy.",
   "type": "module",
   "sideEffects": false,
@@ -54,6 +54,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "demo": "vite demo",
+    "demo:build": "vite build demo --base=/scroll-arrows/ --outDir dist-demo --emptyOutDir",
     "gen:hero": "node scripts/genHeroSvg.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",