scroll-arrows 0.1.0 → 0.1.3

package/README.md

@@ -2,8 +2,15 @@
 
 [![CI](https://github.com/dancj/scroll-arrows/actions/workflows/ci.yml/badge.svg)](https://github.com/dancj/scroll-arrows/actions/workflows/ci.yml)
 [![npm](https://img.shields.io/npm/v/scroll-arrows.svg)](https://www.npmjs.com/package/scroll-arrows)
-[![bundle size](https://img.shields.io/bundlephobia/minzip/scroll-arrows)](https://bundlephobia.com/package/scroll-arrows)
-[![license](https://img.shields.io/npm/l/scroll-arrows.svg)](./LICENSE)
+[![bundle size](https://img.shields.io/bundlejs/size/scroll-arrows)](https://bundlejs.com/?q=scroll-arrows)
+[![license](https://img.shields.io/github/license/dancj/scroll-arrows.svg)](./LICENSE)
+
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/hero-arrow-dark.svg" />
+    <img alt="A hand-drawn arrow drawing itself" src="./assets/hero-arrow-light.svg" width="640" />
+  </picture>
+</p>
 
 Hand-drawn arrows that **draw themselves between two elements as you scroll**.
 A single `roughness` knob slides from clean straight lines (0) to scratchy,
@@ -20,15 +27,15 @@ npm install scroll-arrows
 ## Vanilla
 
 ```ts
-import { scrollArrow } from "scroll-arrows";
+import { scrollArrow } from 'scroll-arrows';
 
 const arrow = scrollArrow({
-  start: "#box-a",     // Element or CSS selector
-  end: "#box-b",
-  roughness: 0.7,      // 0 clean → 1 scratchy
-  stroke: "#e7e9ee",
+  start: '#box-a', // Element or CSS selector
+  end: '#box-b',
+  roughness: 0.7, // 0 clean → 1 scratchy
+  stroke: '#e7e9ee',
   strokeWidth: 2.5,
-  head: "end",         // "start" | "end" | "both" | "none"
+  head: 'end', // "start" | "end" | "both" | "none"
 });
 
 // later
@@ -61,8 +68,8 @@ arrow.destroy();
 ## React
 
 ```tsx
-import { useRef } from "react";
-import { ScrollArrowLine } from "scroll-arrows/react";
+import { useRef } from 'react';
+import { ScrollArrowLine } from 'scroll-arrows/react';
 
 function Diagram() {
   const a = useRef<HTMLDivElement>(null);
@@ -137,8 +144,12 @@ titles):
    version from the newest `v*` tag, bumps `package.json` + prepends a
    `CHANGELOG.md` entry on a `release-<version>` branch, tags `v<version>`, and
    opens a sync PR back to `staging`.
-4. The pushed `v*` tag triggers `release.yml`, publishing to npm via
-   **trusted publishing (OIDC)** with provenance (version pinned to the tag).
+4. `release-changelog.yml` then dispatches `release.yml` via `workflow_dispatch`
+   (a tag pushed under `GITHUB_TOKEN` cannot trigger `on: push: tags` — GitHub's
+   anti-recursion guard), passing the tag. `release.yml` publishes to npm via
+   **trusted publishing (OIDC)** with provenance (version pinned to the tag). A
+   `v*` tag pushed manually with your own credentials also triggers `release.yml`
+   directly via `on: push: tags`.
 
 Release logic lives in `scripts/*.mjs` (pure helpers + injectable-deps
 orchestrators), unit-tested under vitest.

package/dist/{chunk-HLZXSGP5.js → chunk-GKWBGFLA.js}

@@ -80,8 +80,14 @@ function buildPath(ep, curvature, belly = { x: 0, y: 0 }) {
   const reach = dist * (0.3 + curvature * 0.4);
   const sn = startNormal.x || startNormal.y ? startNormal : unit(dx, dy);
   const en = endNormal.x || endNormal.y ? endNormal : unit(-dx, -dy);
-  const c1 = { x: start.x + sn.x * reach + belly.x, y: start.y + sn.y * reach + belly.y };
-  const c2 = { x: end.x + en.x * reach + belly.x, y: end.y + en.y * reach + belly.y };
+  const c1 = {
+    x: start.x + sn.x * reach + belly.x,
+    y: start.y + sn.y * reach + belly.y
+  };
+  const c2 = {
+    x: end.x + en.x * reach + belly.x,
+    y: end.y + en.y * reach + belly.y
+  };
   return `M ${r(start.x)} ${r(start.y)} C ${r(c1.x)} ${r(c1.y)} ${r(c2.x)} ${r(c2.y)} ${r(end.x)} ${r(end.y)}`;
 }
 function routeOffset(start, end, obstacles, padding = 14) {
@@ -201,7 +207,8 @@ function getOverlay(container) {
     (_a = document.body.style).position || (_a.position = "relative");
   } else {
     const pos = getComputedStyle(container).position;
-    if (pos === "static") container.style.position = "relative";
+    if (pos === "static")
+      container.style.position = "relative";
   }
   container.appendChild(svg);
   overlays.set(container, svg);
@@ -457,8 +464,12 @@ var ScrollArrow = class {
     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 = this.lineEl.getPointAtLength(
+        Math.max(0, at * total - eps)
+      );
+      const after = this.lineEl.getPointAtLength(
+        Math.min(total, at * total + eps)
+      );
       const n = unitNormal(before, after);
       x += n.x * offset;
       y += n.y * offset;
@@ -553,5 +564,5 @@ function clampAt(t) {
 }
 
 export { ScrollArrow, easeInOutCubic };
-//# sourceMappingURL=chunk-HLZXSGP5.js.map
-//# sourceMappingURL=chunk-HLZXSGP5.js.map
+//# sourceMappingURL=chunk-GKWBGFLA.js.map
+//# sourceMappingURL=chunk-GKWBGFLA.js.map

package/dist/index.cjs

@@ -88,8 +88,14 @@ function buildPath(ep, curvature, belly = { x: 0, y: 0 }) {
   const reach = dist * (0.3 + curvature * 0.4);
   const sn = startNormal.x || startNormal.y ? startNormal : unit(dx, dy);
   const en = endNormal.x || endNormal.y ? endNormal : unit(-dx, -dy);
-  const c1 = { x: start.x + sn.x * reach + belly.x, y: start.y + sn.y * reach + belly.y };
-  const c2 = { x: end.x + en.x * reach + belly.x, y: end.y + en.y * reach + belly.y };
+  const c1 = {
+    x: start.x + sn.x * reach + belly.x,
+    y: start.y + sn.y * reach + belly.y
+  };
+  const c2 = {
+    x: end.x + en.x * reach + belly.x,
+    y: end.y + en.y * reach + belly.y
+  };
   return `M ${r(start.x)} ${r(start.y)} C ${r(c1.x)} ${r(c1.y)} ${r(c2.x)} ${r(c2.y)} ${r(end.x)} ${r(end.y)}`;
 }
 function routeOffset(start, end, obstacles, padding = 14) {
@@ -209,7 +215,8 @@ function getOverlay(container) {
     (_a = document.body.style).position || (_a.position = "relative");
   } else {
     const pos = getComputedStyle(container).position;
-    if (pos === "static") container.style.position = "relative";
+    if (pos === "static")
+      container.style.position = "relative";
   }
   container.appendChild(svg);
   overlays.set(container, svg);
@@ -465,8 +472,12 @@ var ScrollArrow = class {
     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 = this.lineEl.getPointAtLength(
+        Math.max(0, at * total - eps)
+      );
+      const after = this.lineEl.getPointAtLength(
+        Math.min(total, at * total + eps)
+      );
       const n = unitNormal(before, after);
       x += n.x * offset;
       y += n.y * offset;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { S as ScrollArrowOptions } from './types-DehQP2Hx.cjs';
-export { A as ArrowHead, E as ElementRef, P as Point, a as ScrollOptions, b as Socket } from './types-DehQP2Hx.cjs';
+import { S as ScrollArrowOptions } from './types-CDd8JqZX.cjs';
+export { A as ArrowHead, E as ElementRef, P as Point, a as ScrollOptions, b as Socket } from './types-CDd8JqZX.cjs';
 
 /** A single hand-drawn arrow that draws itself between two elements on scroll. */
 declare class ScrollArrow {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { S as ScrollArrowOptions } from './types-DehQP2Hx.js';
-export { A as ArrowHead, E as ElementRef, P as Point, a as ScrollOptions, b as Socket } from './types-DehQP2Hx.js';
+import { S as ScrollArrowOptions } from './types-CDd8JqZX.js';
+export { A as ArrowHead, E as ElementRef, P as Point, a as ScrollOptions, b as Socket } from './types-CDd8JqZX.js';
 
 /** A single hand-drawn arrow that draws itself between two elements on scroll. */
 declare class ScrollArrow {

package/dist/index.js

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

package/dist/react.cjs

@@ -89,8 +89,14 @@ function buildPath(ep, curvature, belly = { x: 0, y: 0 }) {
   const reach = dist * (0.3 + curvature * 0.4);
   const sn = startNormal.x || startNormal.y ? startNormal : unit(dx, dy);
   const en = endNormal.x || endNormal.y ? endNormal : unit(-dx, -dy);
-  const c1 = { x: start.x + sn.x * reach + belly.x, y: start.y + sn.y * reach + belly.y };
-  const c2 = { x: end.x + en.x * reach + belly.x, y: end.y + en.y * reach + belly.y };
+  const c1 = {
+    x: start.x + sn.x * reach + belly.x,
+    y: start.y + sn.y * reach + belly.y
+  };
+  const c2 = {
+    x: end.x + en.x * reach + belly.x,
+    y: end.y + en.y * reach + belly.y
+  };
   return `M ${r(start.x)} ${r(start.y)} C ${r(c1.x)} ${r(c1.y)} ${r(c2.x)} ${r(c2.y)} ${r(end.x)} ${r(end.y)}`;
 }
 function routeOffset(start, end, obstacles, padding = 14) {
@@ -210,7 +216,8 @@ function getOverlay(container) {
     (_a = document.body.style).position || (_a.position = "relative");
   } else {
     const pos = getComputedStyle(container).position;
-    if (pos === "static") container.style.position = "relative";
+    if (pos === "static")
+      container.style.position = "relative";
   }
   container.appendChild(svg);
   overlays.set(container, svg);
@@ -466,8 +473,12 @@ var ScrollArrow = class {
     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 = this.lineEl.getPointAtLength(
+        Math.max(0, at * total - eps)
+      );
+      const after = this.lineEl.getPointAtLength(
+        Math.min(total, at * total + eps)
+      );
       const n = unitNormal(before, after);
       x += n.x * offset;
       y += n.y * offset;

package/dist/react.d.cts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react';
-import { S as ScrollArrowOptions } from './types-DehQP2Hx.cjs';
+import { S as ScrollArrowOptions } from './types-CDd8JqZX.cjs';
 
 type Anchor = RefObject<Element | null> | Element | string;
-interface UseScrollArrowOptions extends Omit<ScrollArrowOptions, "start" | "end"> {
+interface UseScrollArrowOptions extends Omit<ScrollArrowOptions, 'start' | 'end'> {
     start: Anchor;
     end: Anchor;
     /** Re-create the arrow when any value here changes. */
@@ -13,8 +13,7 @@ interface UseScrollArrowOptions extends Omit<ScrollArrowOptions, "start" | "end"
  * the arrow lives in an overlay <svg>, not the React tree.
  */
 declare function useScrollArrow(options: UseScrollArrowOptions): void;
-interface ScrollArrowProps extends UseScrollArrowOptions {
-}
+type ScrollArrowProps = UseScrollArrowOptions;
 /** Declarative component form. Renders nothing itself. */
 declare function ScrollArrowLine(props: ScrollArrowProps): null;
 

package/dist/react.d.ts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react';
-import { S as ScrollArrowOptions } from './types-DehQP2Hx.js';
+import { S as ScrollArrowOptions } from './types-CDd8JqZX.js';
 
 type Anchor = RefObject<Element | null> | Element | string;
-interface UseScrollArrowOptions extends Omit<ScrollArrowOptions, "start" | "end"> {
+interface UseScrollArrowOptions extends Omit<ScrollArrowOptions, 'start' | 'end'> {
     start: Anchor;
     end: Anchor;
     /** Re-create the arrow when any value here changes. */
@@ -13,8 +13,7 @@ interface UseScrollArrowOptions extends Omit<ScrollArrowOptions, "start" | "end"
  * the arrow lives in an overlay <svg>, not the React tree.
  */
 declare function useScrollArrow(options: UseScrollArrowOptions): void;
-interface ScrollArrowProps extends UseScrollArrowOptions {
-}
+type ScrollArrowProps = UseScrollArrowOptions;
 /** Declarative component form. Renders nothing itself. */
 declare function ScrollArrowLine(props: ScrollArrowProps): null;
 

package/dist/react.js

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

package/dist/{types-DehQP2Hx.d.cts → types-CDd8JqZX.d.cts}

@@ -3,8 +3,8 @@ type Point = {
     y: number;
 };
 /** Which edge of an element the arrow attaches to. `auto` picks the best side. */
-type Socket = "auto" | "top" | "bottom" | "left" | "right" | "center";
-type ArrowHead = "start" | "end" | "both" | "none";
+type Socket = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'center';
+type ArrowHead = 'start' | 'end' | 'both' | 'none';
 /** Anything we can resolve to a live DOM element. */
 type ElementRef = Element | string;
 interface ScrollOptions {

package/dist/{types-DehQP2Hx.d.ts → types-CDd8JqZX.d.ts}

@@ -3,8 +3,8 @@ type Point = {
     y: number;
 };
 /** Which edge of an element the arrow attaches to. `auto` picks the best side. */
-type Socket = "auto" | "top" | "bottom" | "left" | "right" | "center";
-type ArrowHead = "start" | "end" | "both" | "none";
+type Socket = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'center';
+type ArrowHead = 'start' | 'end' | 'both' | 'none';
 /** Anything we can resolve to a live DOM element. */
 type ElementRef = Element | string;
 interface ScrollOptions {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "scroll-arrows",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "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,
   "license": "MIT",
-  "author": "Dan <dan@dorvie.com>",
+  "author": "Dan (https://github.com/dancj)",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dancj/scroll-arrows.git"
@@ -54,11 +54,16 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "demo": "vite demo",
+    "gen:hero": "node scripts/genHeroSvg.mjs",
     "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "test": "vitest run",
     "test:watch": "vitest",
     "coverage": "vitest run --coverage",
-    "prepublishOnly": "npm run typecheck && npm run coverage && npm run build"
+    "prepublishOnly": "npm run lint && npm run typecheck && npm run coverage && npm run build"
   },
   "dependencies": {
     "roughjs": "^4.6.6"
@@ -72,12 +77,18 @@
     }
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.4",
     "@types/react": "^18.3.0",
     "@vitest/coverage-v8": "^2.1.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "jsdom": "^25.0.0",
+    "prettier": "^3.8.4",
     "react": "^18.3.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
+    "typescript-eslint": "^8.61.1",
     "vite": "^5.0.0",
     "vitest": "^2.1.0"
   }