scroll-arrows 0.1.0 → 0.2.0

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

@@ -3,8 +3,14 @@ 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';
+/**
+ * Line routing style. `curved` (default) is the smooth bezier with single-bend
+ * obstacle avoidance. `elbow` draws right-angle connectors (tree/org-chart
+ * brackets); `elbow` ignores `avoid`/`curvature`.
+ */
+type Route = 'curved' | 'elbow';
 /** Anything we can resolve to a live DOM element. */
 type ElementRef = Element | string;
 interface ScrollOptions {
@@ -48,8 +54,24 @@ interface ScrollArrowOptions {
     startSocket?: Socket;
     /** Force an end edge. Default "auto". */
     endSocket?: Socket;
+    /**
+     * Slide the start attach point along its edge, as a fraction of the edge
+     * length: `0` (default) = centered, `-0.5`/`+0.5` = the corners. Use to fan
+     * out several arrows that leave the same element so they don't stack on one
+     * point (e.g. `-0.25`, `0`, `+0.25` for three siblings).
+     */
+    startSocketOffset?: number;
+    /** Slide the end attach point along its edge. See `startSocketOffset`. */
+    endSocketOffset?: number;
     /** Extra bow of the underlying curve, 0..1. Folded into roughness if unset. */
     curvature?: number;
+    /**
+     * Routing style. `"curved"` (default) is the smooth bezier with obstacle
+     * avoidance; `"elbow"` draws right-angle connectors for tree/org-chart
+     * diagrams. Elbow mode ignores `avoid` and `curvature`. Pair with explicit
+     * `startSocket`/`endSocket` for predictable bracket shapes.
+     */
+    route?: Route;
     /**
      * Pin the stroke's endpoints to the anchor sockets so the arrow always lands
      * on its targets, even at high roughness. Set false to let the scratchy ends
@@ -99,6 +121,62 @@ interface ScrollArrowOptions {
     easing?: (t: number) => number;
     /** Start fully drawn instead of empty. Useful with `scroll:false`. Default 0. */
     progress?: number;
+    /**
+     * Auto-respect `prefers-reduced-motion: reduce`. When the user prefers reduced
+     * motion, the arrow renders fully drawn and static (no scroll animation),
+     * while still tracking layout. Set false to keep the scroll animation
+     * regardless of the OS setting. Default true. Evaluated once at construction.
+     */
+    respectReducedMotion?: boolean;
+    /**
+     * Initial enabled state. When `false`, the arrow is created hidden and draws
+     * nothing until `setEnabled(true)` is called. Use with a `matchMedia` listener
+     * to switch arrows off below a breakpoint (where the diagram reflows) without
+     * destroying and rebuilding them. Default true.
+     */
+    enabled?: boolean;
+}
+/**
+ * A coordinated set of arrows that draw in a staggered sequence, driven by one
+ * shared scroll trigger (or manually). Each arrow gets a slice of the group's
+ * progress so they reveal as `A then B then C` rather than independently.
+ */
+interface ScrollArrowGroupOptions {
+    /**
+     * The arrows in the group, in reveal order. Each entry takes the usual
+     * per-arrow options (roughness, stroke, label, ...); the group forces
+     * `scroll: false` on each and drives their progress itself.
+     */
+    arrows: ScrollArrowOptions[];
+    /**
+     * How sequential the reveal is, 0..1. `1` (default) draws each arrow in its
+     * own non-overlapping slice (`A` finishes before `B` starts). `0` draws them
+     * all at once. Values between overlap the slices.
+     */
+    stagger?: number;
+    /**
+     * Shared scroll behavior for the whole group. Pass `false` to drive the group
+     * manually via `setProgress()`. The `target` defaults to a synthetic rect
+     * spanning every arrow's endpoints, so the group reveals as it scrolls in.
+     */
+    scroll?: ScrollOptions | false;
+    /** Multiplier on the group's draw rate. See `ScrollArrowOptions.speed`. Default 1. */
+    speed?: number;
+    /** Easing applied to the group's overall progress before slicing. Default linear. */
+    easing?: (t: number) => number;
+    /**
+     * Auto-respect `prefers-reduced-motion: reduce` for the whole group. When the
+     * user prefers reduced motion, every arrow renders fully drawn and static (no
+     * scroll animation). Set false to keep the staggered scroll reveal regardless
+     * of the OS setting. Default true. Evaluated once at construction.
+     */
+    respectReducedMotion?: boolean;
+    /**
+     * Initial enabled state for the whole group. When `false`, every arrow starts
+     * hidden until `setEnabled(true)`. Pairs with a `matchMedia` listener for
+     * breakpoint-aware diagrams. Default true.
+     */
+    enabled?: boolean;
 }
 
-export type { ArrowHead as A, ElementRef as E, Point as P, ScrollArrowOptions as S, ScrollOptions as a, Socket as b };
+export type { ArrowHead as A, ElementRef as E, Point as P, ScrollArrowOptions as S, ScrollArrowGroupOptions as a, ScrollOptions as b, Socket as c };

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

@@ -3,8 +3,14 @@ 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';
+/**
+ * Line routing style. `curved` (default) is the smooth bezier with single-bend
+ * obstacle avoidance. `elbow` draws right-angle connectors (tree/org-chart
+ * brackets); `elbow` ignores `avoid`/`curvature`.
+ */
+type Route = 'curved' | 'elbow';
 /** Anything we can resolve to a live DOM element. */
 type ElementRef = Element | string;
 interface ScrollOptions {
@@ -48,8 +54,24 @@ interface ScrollArrowOptions {
     startSocket?: Socket;
     /** Force an end edge. Default "auto". */
     endSocket?: Socket;
+    /**
+     * Slide the start attach point along its edge, as a fraction of the edge
+     * length: `0` (default) = centered, `-0.5`/`+0.5` = the corners. Use to fan
+     * out several arrows that leave the same element so they don't stack on one
+     * point (e.g. `-0.25`, `0`, `+0.25` for three siblings).
+     */
+    startSocketOffset?: number;
+    /** Slide the end attach point along its edge. See `startSocketOffset`. */
+    endSocketOffset?: number;
     /** Extra bow of the underlying curve, 0..1. Folded into roughness if unset. */
     curvature?: number;
+    /**
+     * Routing style. `"curved"` (default) is the smooth bezier with obstacle
+     * avoidance; `"elbow"` draws right-angle connectors for tree/org-chart
+     * diagrams. Elbow mode ignores `avoid` and `curvature`. Pair with explicit
+     * `startSocket`/`endSocket` for predictable bracket shapes.
+     */
+    route?: Route;
     /**
      * Pin the stroke's endpoints to the anchor sockets so the arrow always lands
      * on its targets, even at high roughness. Set false to let the scratchy ends
@@ -99,6 +121,62 @@ interface ScrollArrowOptions {
     easing?: (t: number) => number;
     /** Start fully drawn instead of empty. Useful with `scroll:false`. Default 0. */
     progress?: number;
+    /**
+     * Auto-respect `prefers-reduced-motion: reduce`. When the user prefers reduced
+     * motion, the arrow renders fully drawn and static (no scroll animation),
+     * while still tracking layout. Set false to keep the scroll animation
+     * regardless of the OS setting. Default true. Evaluated once at construction.
+     */
+    respectReducedMotion?: boolean;
+    /**
+     * Initial enabled state. When `false`, the arrow is created hidden and draws
+     * nothing until `setEnabled(true)` is called. Use with a `matchMedia` listener
+     * to switch arrows off below a breakpoint (where the diagram reflows) without
+     * destroying and rebuilding them. Default true.
+     */
+    enabled?: boolean;
+}
+/**
+ * A coordinated set of arrows that draw in a staggered sequence, driven by one
+ * shared scroll trigger (or manually). Each arrow gets a slice of the group's
+ * progress so they reveal as `A then B then C` rather than independently.
+ */
+interface ScrollArrowGroupOptions {
+    /**
+     * The arrows in the group, in reveal order. Each entry takes the usual
+     * per-arrow options (roughness, stroke, label, ...); the group forces
+     * `scroll: false` on each and drives their progress itself.
+     */
+    arrows: ScrollArrowOptions[];
+    /**
+     * How sequential the reveal is, 0..1. `1` (default) draws each arrow in its
+     * own non-overlapping slice (`A` finishes before `B` starts). `0` draws them
+     * all at once. Values between overlap the slices.
+     */
+    stagger?: number;
+    /**
+     * Shared scroll behavior for the whole group. Pass `false` to drive the group
+     * manually via `setProgress()`. The `target` defaults to a synthetic rect
+     * spanning every arrow's endpoints, so the group reveals as it scrolls in.
+     */
+    scroll?: ScrollOptions | false;
+    /** Multiplier on the group's draw rate. See `ScrollArrowOptions.speed`. Default 1. */
+    speed?: number;
+    /** Easing applied to the group's overall progress before slicing. Default linear. */
+    easing?: (t: number) => number;
+    /**
+     * Auto-respect `prefers-reduced-motion: reduce` for the whole group. When the
+     * user prefers reduced motion, every arrow renders fully drawn and static (no
+     * scroll animation). Set false to keep the staggered scroll reveal regardless
+     * of the OS setting. Default true. Evaluated once at construction.
+     */
+    respectReducedMotion?: boolean;
+    /**
+     * Initial enabled state for the whole group. When `false`, every arrow starts
+     * hidden until `setEnabled(true)`. Pairs with a `matchMedia` listener for
+     * breakpoint-aware diagrams. Default true.
+     */
+    enabled?: boolean;
 }
 
-export type { ArrowHead as A, ElementRef as E, Point as P, ScrollArrowOptions as S, ScrollOptions as a, Socket as b };
+export type { ArrowHead as A, ElementRef as E, Point as P, ScrollArrowOptions as S, ScrollArrowGroupOptions as a, ScrollOptions as b, Socket as c };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "scroll-arrows",
-  "version": "0.1.0",
+  "version": "0.2.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,
   "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"
   }