transform-marquee 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Muhsinjon Bokijonov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,143 @@
-# Temporary Holding Version
+# transform-marquee
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A React marquee where every chip **wipes from a "before" state into an "after" state** as it crosses a line. Rows of chips drift across the screen; at the split line, *Rough idea* becomes *Production-ready product*.
+
+- **One component, a few props:** rows, chips per row, speed, direction and split position
+- **Restyle with CSS variables:** border radius, colours, icon size, padding
+- **Fast:** layout is measured once with `ResizeObserver`, each frame only writes `transform` and `clip-path`, and the animation stops when the marquee is off-screen
+- **Accessible:** respects `prefers-reduced-motion`, has an optional pause button, and hides the animation from screen readers while giving them a plain list of the pairs
+- **No dependencies** besides React 18+. Works with Next.js App Router (ships as a client component).
+
+## Install
+
+```bash
+npm i transform-marquee
+```
+
+## Usage
+
+```tsx
+import { TransformMarquee } from "transform-marquee";
+import "transform-marquee/styles.css";
+
+const items = [
+  { from: "Rough idea", to: "Production-ready product" },
+  { from: "Slow experience", to: "Lightning-fast UX" },
+  { from: "Buggy code", to: "Reliable software" },
+];
+
+export function Hero() {
+  return (
+    <div style={{ height: 420 }}>
+      <TransformMarquee items={items} />
+    </div>
+  );
+}
+```
+
+By default `rows="auto"` fills the container's height with as many whole rows as fit, **so the container needs a height**. To size it from the content instead, pass a number: `rows={4}`.
+
+### Icons
+
+Pass any React node as an icon, such as an SVG or a component from your icon library:
+
+```tsx
+import { LuLightbulb, LuRocket } from "react-icons/lu";
+
+const items = [
+  { from: "Rough idea", to: "Production-ready product", fromIcon: <LuLightbulb />, toIcon: <LuRocket /> },
+];
+```
+
+### Responsive values
+
+`rows`, `perRow` and `edgeFade` accept a value per breakpoint, mobile-first:
+
+```tsx
+<TransformMarquee items={items} rows={{ base: 4, md: 6 }} perRow={{ base: 2, lg: 4 }} />
+```
+
+Breakpoints are measured on the **container's width**, not the viewport's, so the marquee adapts the same way in a sidebar or a full-width section. Defaults: `sm: 640`, `md: 768`, `lg: 1024`, `xl: 1280`. Override them with the `breakpoints` prop.
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `items` | `TransformMarqueeItem[]` | required | `{ from, to, fromIcon?, toIcon?, id? }`. Items are dealt out across rows in order and repeat if there are fewer items than chips. |
+| `rows` | `Responsive<number \| "auto">` | `"auto"` | Number of rows, or fill the container's height. |
+| `perRow` | `Responsive<number>` | `{ base: 2, lg: 4 }` | Chips travelling in each row at once. |
+| `speed` | `number \| [min, max]` | `[120, 155]` | Pixels per second. A range gives each row its own speed. |
+| `direction` | `"right" \| "left"` | `"right"` | Travel direction. |
+| `splitAt` | `number` | `0.5` | Position of the wipe line, from 0 to 1 across the row. |
+| `rowHeight` | `number` | `68` | Row height in px. |
+| `rowGap` | `number` | `4` | Gap between rows in px. |
+| `chipGap` | `number` | `48` | Minimum gap between chips in the same row, in px. |
+| `pauseOnHover` | `boolean` | `true` | Pause a row while the pointer is over it. |
+| `paused` | `boolean` | | Controlled pause state. |
+| `onPausedChange` | `(paused) => void` | | Called when the pause button is pressed. |
+| `pauseButton` | `boolean` | `false` | Show a pause/play button. Recommended for [WCAG 2.2.2](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide). |
+| `divider` | `boolean` | `true` | Draw the vertical line at the split. |
+| `edgeFade` | `Responsive<string \| number> \| false` | `"clamp(3rem, 15%, 16rem)"` | Width of the left and right fade masks. |
+| `breakpoints` | `Partial<Breakpoints>` | see above | Container widths used by responsive props. |
+| `renderChip` | `(item, side) => ReactNode` | | Replace a chip's content (the icon and label) entirely. |
+| `classNames` | `{ root, lane, chip, from, to, icon, divider, fade, pauseButton }` | | Extra classes for each part. |
+| `srList` | `boolean` | `true` | Render a visually hidden list of the pairs for screen readers. |
+| `labels` | `{ pause?, play? }` | | Accessible labels for the pause button. |
+
+Other `div` attributes (`className`, `style`, `id`, `aria-*`…) are passed to the root element.
+
+## Styling
+
+Every visual choice is a CSS custom property on `.tm-root`. Set them with `style`, a class, or on any ancestor:
+
+```tsx
+<TransformMarquee
+  items={items}
+  style={{ "--tm-radius": "999px", "--tm-accent": "#16a34a" } as React.CSSProperties}
+/>
+```
+
+| Variable | Default |
+|---|---|
+| `--tm-radius` | `0.5rem` |
+| `--tm-icon-radius` | `0.5rem` |
+| `--tm-icon-size` / `--tm-icon-glyph-size` | `1.75rem` / `1rem` |
+| `--tm-font-size` | `1rem` |
+| `--tm-font-weight` / `--tm-font-weight-to` | `500` / `600` |
+| `--tm-padding-x` / `--tm-padding-y` | `1rem` / `0.75rem` |
+| `--tm-chip-gap` | `0.625rem` (space between icon and label) |
+| `--tm-border-width` | `1px` |
+| `--tm-bg` | `Canvas` |
+| `--tm-fg` | `CanvasText` |
+| `--tm-muted` | 60% of `--tm-fg` |
+| `--tm-border` | 15% of `--tm-fg` |
+| `--tm-accent` / `--tm-accent-fg` | `#6366f1` / `#fff` |
+| `--tm-fade-color` | `--tm-bg` |
+| `--tm-divider-color` | `--tm-accent` |
+
+The colour defaults use the CSS system colours `Canvas` and `CanvasText`, so they follow your page's `color-scheme`. If your site sets its own background colours, set `--tm-bg` (and `--tm-fade-color`, if different) to match the section behind the marquee, so the edge fades blend in.
+
+### Tailwind
+
+Use `classNames` for utility classes, or set variables with arbitrary properties:
+
+```tsx
+<TransformMarquee
+  items={items}
+  className="[--tm-radius:9999px] [--tm-accent:var(--color-primary)]"
+  classNames={{ chip: "shadow-sm" }}
+/>
+```
+
+## Development
+
+```bash
+npm install
+npm run dev        # demo playground at http://localhost:5173
+npm test           # unit tests for the layout/timing engine
+npm run build      # builds dist/ (ESM + CJS + types + styles.css)
+```
+
+## License
+
+MIT © Muhsinjon Bokijonov

package/dist/index.cjs

@@ -0,0 +1,405 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_BREAKPOINTS: () => DEFAULT_BREAKPOINTS,
+  TransformMarquee: () => TransformMarquee
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/transform-marquee.tsx
+var import_react = require("react");
+
+// src/engine.ts
+var DEFAULT_BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+var ORDER = ["sm", "md", "lg", "xl"];
+function isPerBreakpoint(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function resolveResponsive(value, width, breakpoints, fallback) {
+  if (value === void 0) return fallback;
+  if (!isPerBreakpoint(value)) return value;
+  let result = value.base ?? fallback;
+  for (const bp of ORDER) {
+    const v = value[bp];
+    if (v !== void 0 && width >= breakpoints[bp]) result = v;
+  }
+  return result;
+}
+function vanDerCorput(n, base = 2) {
+  let result = 0;
+  let denominator = 1 / base;
+  let k = Math.floor(n);
+  while (k > 0) {
+    result += k % base * denominator;
+    k = Math.floor(k / base);
+    denominator /= base;
+  }
+  return result;
+}
+function fitRows(height, rowHeight, gap) {
+  if (rowHeight <= 0 || height < rowHeight) return 0;
+  return Math.floor((height + gap) / (rowHeight + gap));
+}
+function rowsHeight(rows, rowHeight, gap) {
+  return rows <= 0 ? 0 : rows * rowHeight + (rows - 1) * gap;
+}
+function laneSpeed(lane, speed) {
+  if (typeof speed === "number") return speed;
+  const [min, max] = speed;
+  return min + (max - min) * vanDerCorput(lane + 1, 3);
+}
+function travelerPhase(lane, slot, perRow) {
+  return (vanDerCorput(lane + 1) + slot / perRow) % 1;
+}
+function itemIndexFor(lane, slot, perRow, count) {
+  return count <= 0 ? 0 : (lane * perRow + slot) % count;
+}
+function travelGeometry(rowWidth, widestChip, perRow, minGap) {
+  const range = Math.max(rowWidth + widestChip, perRow * (widestChip + minGap));
+  return { start: -widestChip, range };
+}
+function positionAt(elapsedS, speed, phase, start, range) {
+  if (range <= 0) return start;
+  const traveled = elapsedS * speed + phase * range;
+  return start + (traveled % range + range) % range;
+}
+function wipeFraction(x, width, split) {
+  if (width <= 0) return 0;
+  return Math.min(1, Math.max(0, (split - x) / width));
+}
+function clipPaths(fraction, direction) {
+  const left = `inset(0 ${(1 - fraction) * 100}% 0 0)`;
+  const right = `inset(0 0 0 ${fraction * 100}%)`;
+  return direction === "right" ? { from: left, to: right } : { from: right, to: left };
+}
+
+// src/transform-marquee.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var newClock = () => ({
+  holds: 0,
+  pausedMs: 0,
+  pauseStartedAt: null,
+  globalHeld: false,
+  hoverHeld: false
+});
+function hold(clock, now) {
+  if (clock.holds++ === 0) clock.pauseStartedAt = now;
+}
+function release(clock, now) {
+  if (clock.holds === 0) return;
+  if (--clock.holds === 0 && clock.pauseStartedAt !== null) {
+    clock.pausedMs += now - clock.pauseStartedAt;
+    clock.pauseStartedAt = null;
+  }
+}
+function pausedFor(clock, now) {
+  return clock.pausedMs + (clock.pauseStartedAt !== null ? now - clock.pauseStartedAt : 0);
+}
+function syncGlobal(clock, paused, now) {
+  if (paused && !clock.globalHeld) {
+    hold(clock, now);
+    clock.globalHeld = true;
+  } else if (!paused && clock.globalHeld) {
+    release(clock, now);
+    clock.globalHeld = false;
+  }
+}
+var cx = (...names) => names.filter(Boolean).join(" ");
+var toLength = (value) => typeof value === "number" ? `${value}px` : value;
+var isDev = () => typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+function TransformMarquee({
+  items,
+  rows = "auto",
+  perRow = { base: 2, lg: 4 },
+  speed = [120, 155],
+  direction = "right",
+  splitAt = 0.5,
+  rowHeight = 68,
+  rowGap = 4,
+  chipGap = 48,
+  pauseOnHover = true,
+  paused,
+  onPausedChange,
+  pauseButton = false,
+  divider = true,
+  edgeFade = "clamp(3rem, 15%, 16rem)",
+  breakpoints,
+  classNames = {},
+  renderChip,
+  srList = true,
+  labels,
+  className,
+  style,
+  ...rest
+}) {
+  const rootRef = (0, import_react.useRef)(null);
+  const gridRef = (0, import_react.useRef)(null);
+  const [size, setSize] = (0, import_react.useState)(null);
+  const [internalPaused, setInternalPaused] = (0, import_react.useState)(false);
+  const isPaused = paused ?? internalPaused;
+  const startRef = (0, import_react.useRef)(null);
+  const clocksRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const pausedRef = (0, import_react.useRef)(isPaused);
+  const bps = { ...DEFAULT_BREAKPOINTS, ...breakpoints };
+  const width = size?.w ?? 0;
+  const split = Math.min(1, Math.max(0, splitAt));
+  const rowsSetting = resolveResponsive(rows, width, bps, "auto");
+  const perRowCount = Math.max(1, Math.round(resolveResponsive(perRow, width, bps, 2)));
+  const fixedRows = rowsSetting === "auto" ? null : Math.max(0, Math.floor(rowsSetting));
+  const laneCount = !size || items.length === 0 ? 0 : fixedRows ?? fitRows(size.h, rowHeight, rowGap);
+  const fade = edgeFade === false ? null : resolveResponsive(edgeFade, width, bps, "0px");
+  const [speedMin, speedMax] = typeof speed === "number" ? [speed, speed] : speed;
+  (0, import_react.useEffect)(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      const w = Math.round(entry.contentRect.width);
+      const h = Math.round(entry.contentRect.height);
+      setSize((prev) => prev && prev.w === w && prev.h === h ? prev : { w, h });
+    });
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, []);
+  const warnedRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!size || fixedRows !== null || warnedRef.current || !isDev()) return;
+    if (size.h < rowHeight) {
+      warnedRef.current = true;
+      console.warn(
+        `[transform-marquee] rows="auto" needs a container with a height of at least rowHeight (${rowHeight}px); this one is ${size.h}px tall. Give it a height, or pass a number to \`rows\`.`
+      );
+    }
+  }, [size, fixedRows, rowHeight]);
+  (0, import_react.useEffect)(() => {
+    pausedRef.current = isPaused;
+    const now = performance.now();
+    for (const clock of clocksRef.current.values()) syncGlobal(clock, isPaused, now);
+  }, [isPaused]);
+  (0, import_react.useEffect)(() => {
+    const grid = gridRef.current;
+    if (!grid || laneCount === 0) return;
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const start = startRef.current ?? (startRef.current = performance.now());
+    const builtAt = performance.now();
+    const speedSetting = [speedMin, speedMax];
+    const lanes = Array.from(grid.querySelectorAll("[data-tm-lane]"), (el, index) => {
+      let clock = clocksRef.current.get(index);
+      if (!clock) {
+        clock = newClock();
+        clocksRef.current.set(index, clock);
+      }
+      syncGlobal(clock, pausedRef.current, builtAt);
+      return {
+        el,
+        speed: laneSpeed(index, speedSetting),
+        width: 0,
+        widest: 0,
+        clock,
+        chips: Array.from(el.querySelectorAll("[data-tm-traveler]"), (traveler) => ({
+          el: traveler,
+          from: traveler.querySelector("[data-tm-from]"),
+          to: traveler.querySelector("[data-tm-to]"),
+          phase: Number(traveler.dataset.phase),
+          width: 0
+        }))
+      };
+    });
+    const laneByEl = new Map(lanes.map((lane) => [lane.el, lane]));
+    const chipByEl = /* @__PURE__ */ new Map();
+    for (const lane of lanes) for (const chip of lane.chips) chipByEl.set(chip.el, chip);
+    const render = (now) => {
+      for (const lane of lanes) {
+        if (!lane.width || !lane.widest) continue;
+        const { start: from, range } = travelGeometry(lane.width, lane.widest, lane.chips.length, chipGap);
+        const elapsedS = reduceMotion ? 0 : (now - start - pausedFor(lane.clock, now)) / 1e3;
+        const splitPx = lane.width * split;
+        for (const chip of lane.chips) {
+          if (!chip.width) continue;
+          const pos = positionAt(elapsedS, lane.speed, chip.phase, from, range);
+          const x = direction === "right" ? pos : lane.width - pos - chip.width;
+          const clips = clipPaths(wipeFraction(x, chip.width, splitPx), direction);
+          chip.el.style.transform = `translate3d(${x}px, 0, 0)`;
+          chip.from.style.clipPath = clips.from;
+          chip.to.style.clipPath = clips.to;
+        }
+      }
+    };
+    const sizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const w = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+        const lane = laneByEl.get(entry.target);
+        if (lane) lane.width = w;
+        else {
+          const chip = chipByEl.get(entry.target);
+          if (chip) chip.width = w;
+        }
+      }
+      for (const lane of lanes) lane.widest = Math.max(0, ...lane.chips.map((chip) => chip.width));
+      render(performance.now());
+      grid.dataset.ready = "";
+    });
+    for (const lane of lanes) {
+      sizeObserver.observe(lane.el);
+      for (const chip of lane.chips) sizeObserver.observe(chip.el);
+    }
+    if (reduceMotion) return () => sizeObserver.disconnect();
+    const enter = (event) => {
+      const lane = laneByEl.get(event.currentTarget);
+      if (lane && !lane.clock.hoverHeld) {
+        hold(lane.clock, performance.now());
+        lane.clock.hoverHeld = true;
+      }
+    };
+    const leave = (event) => {
+      const lane = laneByEl.get(event.currentTarget);
+      if (lane?.clock.hoverHeld) {
+        release(lane.clock, performance.now());
+        lane.clock.hoverHeld = false;
+      }
+    };
+    if (pauseOnHover) {
+      for (const lane of lanes) {
+        lane.el.addEventListener("mouseenter", enter);
+        lane.el.addEventListener("mouseleave", leave);
+      }
+    }
+    let raf = 0;
+    const frame = (now) => {
+      raf = requestAnimationFrame(frame);
+      render(now);
+    };
+    const visibilityObserver = new IntersectionObserver(([entry]) => {
+      cancelAnimationFrame(raf);
+      raf = entry?.isIntersecting ? requestAnimationFrame(frame) : 0;
+    });
+    visibilityObserver.observe(grid);
+    return () => {
+      cancelAnimationFrame(raf);
+      visibilityObserver.disconnect();
+      sizeObserver.disconnect();
+      const now = performance.now();
+      for (const lane of lanes) {
+        lane.el.removeEventListener("mouseenter", enter);
+        lane.el.removeEventListener("mouseleave", leave);
+        if (lane.clock.hoverHeld) {
+          release(lane.clock, now);
+          lane.clock.hoverHeld = false;
+        }
+      }
+    };
+  }, [laneCount, perRowCount, speedMin, speedMax, chipGap, split, direction, pauseOnHover]);
+  const togglePaused = () => {
+    const next = !isPaused;
+    if (paused === void 0) setInternalPaused(next);
+    onPausedChange?.(next);
+  };
+  const rootStyle = {
+    "--tm-row-height": `${rowHeight}px`,
+    "--tm-row-gap": `${rowGap}px`,
+    "--tm-split": `${split * 100}%`,
+    ...fade !== null && { "--tm-fade-width": toLength(fade) },
+    ...fixedRows !== null && { height: rowsHeight(fixedRows, rowHeight, rowGap) },
+    ...style
+  };
+  const initialClips = clipPaths(0, direction);
+  const chipContent = (item, side) => {
+    if (renderChip) return renderChip(item, side);
+    const icon = side === "from" ? item.fromIcon : item.toIcon;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      icon != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cx("tm-icon", classNames.icon), children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tm-label", children: side === "from" ? item.from : item.to })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: rootRef,
+      className: cx("tm-root", fixedRows === null && "tm-root--auto", className, classNames.root),
+      "data-direction": direction,
+      style: rootStyle,
+      ...rest,
+      children: [
+        srList && items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "tm-sr-only", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+          item.from,
+          " \u2192 ",
+          item.to
+        ] }, item.id ?? i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: gridRef, className: "tm-grid", "aria-hidden": "true", children: Array.from({ length: laneCount }, (_, lane) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-tm-lane": "", className: cx("tm-lane", classNames.lane), children: Array.from({ length: perRowCount }, (_2, slot) => {
+          const item = items[itemIndexFor(lane, slot, perRowCount, items.length)];
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              "data-tm-traveler": "",
+              "data-phase": travelerPhase(lane, slot, perRowCount),
+              className: "tm-traveler",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tm-stack", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    "data-tm-from": "",
+                    className: cx("tm-chip", "tm-chip-from", classNames.chip, classNames.from),
+                    style: { clipPath: initialClips.from },
+                    children: chipContent(item, "from")
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    "data-tm-to": "",
+                    className: cx("tm-chip", "tm-chip-to", classNames.chip, classNames.to),
+                    style: { clipPath: initialClips.to },
+                    children: chipContent(item, "to")
+                  }
+                )
+              ] })
+            },
+            slot
+          );
+        }) }, lane)) }),
+        divider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("tm-divider", classNames.divider), "aria-hidden": "true" }),
+        fade !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("tm-fade", "tm-fade-left", classNames.fade), "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("tm-fade", "tm-fade-right", classNames.fade), "aria-hidden": "true" })
+        ] }),
+        pauseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: cx("tm-pause", classNames.pauseButton),
+            "aria-pressed": isPaused,
+            "aria-label": isPaused ? labels?.play ?? "Play animation" : labels?.pause ?? "Pause animation",
+            onClick: togglePaused,
+            children: isPaused ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 2.5v11l9-5.5z", fill: "currentColor" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 2.5h3v11H4zM9 2.5h3v11H9z", fill: "currentColor" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_BREAKPOINTS,
+  TransformMarquee
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/transform-marquee.tsx","../src/engine.ts"],"sourcesContent":["export { TransformMarquee } from \"./transform-marquee\";\nexport type {\n  TransformMarqueeClassNames,\n  TransformMarqueeItem,\n  TransformMarqueeProps,\n} from \"./transform-marquee\";\nexport { DEFAULT_BREAKPOINTS } from \"./engine\";\nexport type { Breakpoint, Breakpoints, Direction, Responsive } from \"./engine\";\n","import {\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport {\n  DEFAULT_BREAKPOINTS,\n  clipPaths,\n  fitRows,\n  itemIndexFor,\n  laneSpeed,\n  positionAt,\n  resolveResponsive,\n  rowsHeight,\n  travelGeometry,\n  travelerPhase,\n  wipeFraction,\n  type Breakpoints,\n  type Direction,\n  type Responsive,\n} from \"./engine\";\n\nexport type TransformMarqueeItem = {\n  /** Stable key. Falls back to the item's index. */\n  id?: string | number;\n  /** The \"before\" state, shown until the chip crosses the split line. */\n  from: ReactNode;\n  /** The \"after\" state, revealed as the chip crosses the split line. */\n  to: ReactNode;\n  fromIcon?: ReactNode;\n  toIcon?: ReactNode;\n};\n\nexport type TransformMarqueeClassNames = Partial<\n  Record<\"root\" | \"lane\" | \"chip\" | \"from\" | \"to\" | \"icon\" | \"divider\" | \"fade\" | \"pauseButton\", string>\n>;\n\nexport interface TransformMarqueeProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  items: TransformMarqueeItem[];\n  /**\n   * Number of rows, or `\"auto\"` to fit as many whole rows as the container's\n   * height allows (the container then needs a height). Default `\"auto\"`.\n   */\n  rows?: Responsive<number | \"auto\">;\n  /** Chips travelling in each row at once. Default `{ base: 2, lg: 4 }`. */\n  perRow?: Responsive<number>;\n  /** Speed in px/s, or a `[min, max]` range spread across rows. Default `[120, 155]`. */\n  speed?: number | readonly [number, number];\n  /** Travel direction. Default `\"right\"`. */\n  direction?: Direction;\n  /** Where the wipe line sits, 0–1 of the row width. Default `0.5`. */\n  splitAt?: number;\n  /** Row height in px. Default `68`. */\n  rowHeight?: number;\n  /** Gap between rows in px. Default `4`. */\n  rowGap?: number;\n  /** Minimum horizontal gap between chips in the same row, px. Default `48`. */\n  chipGap?: number;\n  /** Pause a row while the pointer is over it. Default `true`. */\n  pauseOnHover?: boolean;\n  /** Controlled pause state. Omit to let the component manage it. */\n  paused?: boolean;\n  /** Called when the built-in pause button is pressed. */\n  onPausedChange?: (paused: boolean) => void;\n  /** Show a pause/play button (helps meet WCAG 2.2.2). Default `false`. */\n  pauseButton?: boolean;\n  /** Draw the vertical line at the split. Default `true`. */\n  divider?: boolean;\n  /** Width of the left/right fade masks (CSS length or px), or `false`. */\n  edgeFade?: Responsive<string | number> | false;\n  /** Min-widths (px) for responsive props. Measured on the container, not the viewport. */\n  breakpoints?: Partial<Breakpoints>;\n  classNames?: TransformMarqueeClassNames;\n  /** Replace the default chip content (icon + label) for a side. */\n  renderChip?: (item: TransformMarqueeItem, side: \"from\" | \"to\") => ReactNode;\n  /**\n   * Render a visually hidden list of all `from → to` pairs for screen\n   * readers (the animation itself is hidden from them). Default `true`.\n   */\n  srList?: boolean;\n  /** Labels for the pause button. */\n  labels?: { pause?: string; play?: string };\n}\n\ntype Clock = {\n  holds: number;\n  pausedMs: number;\n  pauseStartedAt: number | null;\n  globalHeld: boolean;\n  hoverHeld: boolean;\n};\n\nconst newClock = (): Clock => ({\n  holds: 0,\n  pausedMs: 0,\n  pauseStartedAt: null,\n  globalHeld: false,\n  hoverHeld: false,\n});\n\nfunction hold(clock: Clock, now: number) {\n  if (clock.holds++ === 0) clock.pauseStartedAt = now;\n}\n\nfunction release(clock: Clock, now: number) {\n  if (clock.holds === 0) return;\n  if (--clock.holds === 0 && clock.pauseStartedAt !== null) {\n    clock.pausedMs += now - clock.pauseStartedAt;\n    clock.pauseStartedAt = null;\n  }\n}\n\nfunction pausedFor(clock: Clock, now: number) {\n  return clock.pausedMs + (clock.pauseStartedAt !== null ? now - clock.pauseStartedAt : 0);\n}\n\nfunction syncGlobal(clock: Clock, paused: boolean, now: number) {\n  if (paused && !clock.globalHeld) {\n    hold(clock, now);\n    clock.globalHeld = true;\n  } else if (!paused && clock.globalHeld) {\n    release(clock, now);\n    clock.globalHeld = false;\n  }\n}\n\nconst cx = (...names: (string | false | undefined)[]) => names.filter(Boolean).join(\" \");\nconst toLength = (value: string | number) => (typeof value === \"number\" ? `${value}px` : value);\n\nconst isDev = () =>\n  typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\";\n\nexport function TransformMarquee({\n  items,\n  rows = \"auto\",\n  perRow = { base: 2, lg: 4 },\n  speed = [120, 155],\n  direction = \"right\",\n  splitAt = 0.5,\n  rowHeight = 68,\n  rowGap = 4,\n  chipGap = 48,\n  pauseOnHover = true,\n  paused,\n  onPausedChange,\n  pauseButton = false,\n  divider = true,\n  edgeFade = \"clamp(3rem, 15%, 16rem)\",\n  breakpoints,\n  classNames = {},\n  renderChip,\n  srList = true,\n  labels,\n  className,\n  style,\n  ...rest\n}: TransformMarqueeProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const gridRef = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<{ w: number; h: number } | null>(null);\n  const [internalPaused, setInternalPaused] = useState(false);\n  const isPaused = paused ?? internalPaused;\n\n  // Persist across engine rebuilds (resize, prop changes) so motion and\n  // accumulated pauses continue instead of jumping back to the start.\n  const startRef = useRef<number | null>(null);\n  const clocksRef = useRef(new Map<number, Clock>());\n  const pausedRef = useRef(isPaused);\n\n  const bps: Breakpoints = { ...DEFAULT_BREAKPOINTS, ...breakpoints };\n  const width = size?.w ?? 0;\n  const split = Math.min(1, Math.max(0, splitAt));\n  const rowsSetting = resolveResponsive(rows, width, bps, \"auto\");\n  const perRowCount = Math.max(1, Math.round(resolveResponsive(perRow, width, bps, 2)));\n  const fixedRows = rowsSetting === \"auto\" ? null : Math.max(0, Math.floor(rowsSetting));\n  const laneCount =\n    !size || items.length === 0\n      ? 0\n      : fixedRows ?? fitRows(size.h, rowHeight, rowGap);\n  const fade = edgeFade === false ? null : resolveResponsive(edgeFade, width, bps, \"0px\");\n  const [speedMin, speedMax] = typeof speed === \"number\" ? [speed, speed] : speed;\n\n  // Container size drives breakpoints and, in \"auto\" mode, the row count.\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const w = Math.round(entry.contentRect.width);\n      const h = Math.round(entry.contentRect.height);\n      setSize((prev) => (prev && prev.w === w && prev.h === h ? prev : { w, h }));\n    });\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, []);\n\n  const warnedRef = useRef(false);\n  useEffect(() => {\n    if (!size || fixedRows !== null || warnedRef.current || !isDev()) return;\n    if (size.h < rowHeight) {\n      warnedRef.current = true;\n      console.warn(\n        `[transform-marquee] rows=\"auto\" needs a container with a height of at least rowHeight (${rowHeight}px); ` +\n          `this one is ${size.h}px tall. Give it a height, or pass a number to \\`rows\\`.`,\n      );\n    }\n  }, [size, fixedRows, rowHeight]);\n\n  // Apply the controlled/uncontrolled pause to every lane clock. Declared\n  // before the engine effect so pausedRef is current when lanes are built.\n  useEffect(() => {\n    pausedRef.current = isPaused;\n    const now = performance.now();\n    for (const clock of clocksRef.current.values()) syncGlobal(clock, isPaused, now);\n  }, [isPaused]);\n\n  // The animation engine. Sizes come from ResizeObserver and are cached, so\n  // each frame only does arithmetic and style writes — no layout reads.\n  useEffect(() => {\n    const grid = gridRef.current;\n    if (!grid || laneCount === 0) return;\n\n    const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    const start = (startRef.current ??= performance.now());\n    const builtAt = performance.now();\n    const speedSetting: [number, number] = [speedMin, speedMax];\n\n    type Chip = { el: HTMLElement; from: HTMLElement; to: HTMLElement; phase: number; width: number };\n    type Lane = { el: HTMLElement; speed: number; width: number; widest: number; chips: Chip[]; clock: Clock };\n\n    const lanes: Lane[] = Array.from(grid.querySelectorAll<HTMLElement>(\"[data-tm-lane]\"), (el, index) => {\n      let clock = clocksRef.current.get(index);\n      if (!clock) {\n        clock = newClock();\n        clocksRef.current.set(index, clock);\n      }\n      syncGlobal(clock, pausedRef.current, builtAt);\n      return {\n        el,\n        speed: laneSpeed(index, speedSetting),\n        width: 0,\n        widest: 0,\n        clock,\n        chips: Array.from(el.querySelectorAll<HTMLElement>(\"[data-tm-traveler]\"), (traveler) => ({\n          el: traveler,\n          from: traveler.querySelector<HTMLElement>(\"[data-tm-from]\")!,\n          to: traveler.querySelector<HTMLElement>(\"[data-tm-to]\")!,\n          phase: Number(traveler.dataset.phase),\n          width: 0,\n        })),\n      };\n    });\n\n    const laneByEl = new Map<Element, Lane>(lanes.map((lane) => [lane.el, lane]));\n    const chipByEl = new Map<Element, Chip>();\n    for (const lane of lanes) for (const chip of lane.chips) chipByEl.set(chip.el, chip);\n\n    const render = (now: number) => {\n      for (const lane of lanes) {\n        if (!lane.width || !lane.widest) continue;\n        const { start: from, range } = travelGeometry(lane.width, lane.widest, lane.chips.length, chipGap);\n        const elapsedS = reduceMotion ? 0 : (now - start - pausedFor(lane.clock, now)) / 1000;\n        const splitPx = lane.width * split;\n        for (const chip of lane.chips) {\n          if (!chip.width) continue;\n          const pos = positionAt(elapsedS, lane.speed, chip.phase, from, range);\n          const x = direction === \"right\" ? pos : lane.width - pos - chip.width;\n          const clips = clipPaths(wipeFraction(x, chip.width, splitPx), direction);\n          chip.el.style.transform = `translate3d(${x}px, 0, 0)`;\n          chip.from.style.clipPath = clips.from;\n          chip.to.style.clipPath = clips.to;\n        }\n      }\n    };\n\n    // Callbacks run after layout, so reading sizes here is free. The first\n    // callback also places every chip before the (hidden) grid is revealed.\n    const sizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const w = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n        const lane = laneByEl.get(entry.target);\n        if (lane) lane.width = w;\n        else {\n          const chip = chipByEl.get(entry.target);\n          if (chip) chip.width = w;\n        }\n      }\n      for (const lane of lanes) lane.widest = Math.max(0, ...lane.chips.map((chip) => chip.width));\n      render(performance.now());\n      grid.dataset.ready = \"\";\n    });\n    for (const lane of lanes) {\n      sizeObserver.observe(lane.el);\n      for (const chip of lane.chips) sizeObserver.observe(chip.el);\n    }\n\n    if (reduceMotion) return () => sizeObserver.disconnect();\n\n    // Pause a whole lane, not a single chip: its chips share one speed, so\n    // pausing only one would let the next chip run into it.\n    const enter = (event: Event) => {\n      const lane = laneByEl.get(event.currentTarget as Element);\n      if (lane && !lane.clock.hoverHeld) {\n        hold(lane.clock, performance.now());\n        lane.clock.hoverHeld = true;\n      }\n    };\n    const leave = (event: Event) => {\n      const lane = laneByEl.get(event.currentTarget as Element);\n      if (lane?.clock.hoverHeld) {\n        release(lane.clock, performance.now());\n        lane.clock.hoverHeld = false;\n      }\n    };\n    if (pauseOnHover) {\n      for (const lane of lanes) {\n        lane.el.addEventListener(\"mouseenter\", enter);\n        lane.el.addEventListener(\"mouseleave\", leave);\n      }\n    }\n\n    // Animate only while on screen.\n    let raf = 0;\n    const frame = (now: number) => {\n      raf = requestAnimationFrame(frame);\n      render(now);\n    };\n    const visibilityObserver = new IntersectionObserver(([entry]) => {\n      cancelAnimationFrame(raf);\n      raf = entry?.isIntersecting ? requestAnimationFrame(frame) : 0;\n    });\n    visibilityObserver.observe(grid);\n\n    return () => {\n      cancelAnimationFrame(raf);\n      visibilityObserver.disconnect();\n      sizeObserver.disconnect();\n      const now = performance.now();\n      for (const lane of lanes) {\n        lane.el.removeEventListener(\"mouseenter\", enter);\n        lane.el.removeEventListener(\"mouseleave\", leave);\n        if (lane.clock.hoverHeld) {\n          release(lane.clock, now);\n          lane.clock.hoverHeld = false;\n        }\n      }\n    };\n  }, [laneCount, perRowCount, speedMin, speedMax, chipGap, split, direction, pauseOnHover]);\n\n  const togglePaused = () => {\n    const next = !isPaused;\n    if (paused === undefined) setInternalPaused(next);\n    onPausedChange?.(next);\n  };\n\n  const rootStyle = {\n    \"--tm-row-height\": `${rowHeight}px`,\n    \"--tm-row-gap\": `${rowGap}px`,\n    \"--tm-split\": `${split * 100}%`,\n    ...(fade !== null && { \"--tm-fade-width\": toLength(fade) }),\n    ...(fixedRows !== null && { height: rowsHeight(fixedRows, rowHeight, rowGap) }),\n    ...style,\n  } as CSSProperties;\n\n  const initialClips = clipPaths(0, direction);\n\n  const chipContent = (item: TransformMarqueeItem, side: \"from\" | \"to\") => {\n    if (renderChip) return renderChip(item, side);\n    const icon = side === \"from\" ? item.fromIcon : item.toIcon;\n    return (\n      <>\n        {icon != null && <span className={cx(\"tm-icon\", classNames.icon)}>{icon}</span>}\n        <span className=\"tm-label\">{side === \"from\" ? item.from : item.to}</span>\n      </>\n    );\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      className={cx(\"tm-root\", fixedRows === null && \"tm-root--auto\", className, classNames.root)}\n      data-direction={direction}\n      style={rootStyle}\n      {...rest}\n    >\n      {srList && items.length > 0 && (\n        <ul className=\"tm-sr-only\">\n          {items.map((item, i) => (\n            <li key={item.id ?? i}>\n              {item.from} → {item.to}\n            </li>\n          ))}\n        </ul>\n      )}\n\n      <div ref={gridRef} className=\"tm-grid\" aria-hidden=\"true\">\n        {Array.from({ length: laneCount }, (_, lane) => (\n          <div key={lane} data-tm-lane=\"\" className={cx(\"tm-lane\", classNames.lane)}>\n            {Array.from({ length: perRowCount }, (_, slot) => {\n              const item = items[itemIndexFor(lane, slot, perRowCount, items.length)]!;\n              return (\n                <div\n                  key={slot}\n                  data-tm-traveler=\"\"\n                  data-phase={travelerPhase(lane, slot, perRowCount)}\n                  className=\"tm-traveler\"\n                >\n                  <div className=\"tm-stack\">\n                    <div\n                      data-tm-from=\"\"\n                      className={cx(\"tm-chip\", \"tm-chip-from\", classNames.chip, classNames.from)}\n                      style={{ clipPath: initialClips.from }}\n                    >\n                      {chipContent(item, \"from\")}\n                    </div>\n                    <div\n                      data-tm-to=\"\"\n                      className={cx(\"tm-chip\", \"tm-chip-to\", classNames.chip, classNames.to)}\n                      style={{ clipPath: initialClips.to }}\n                    >\n                      {chipContent(item, \"to\")}\n                    </div>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n\n      {divider && <div className={cx(\"tm-divider\", classNames.divider)} aria-hidden=\"true\" />}\n      {fade !== null && (\n        <>\n          <div className={cx(\"tm-fade\", \"tm-fade-left\", classNames.fade)} aria-hidden=\"true\" />\n          <div className={cx(\"tm-fade\", \"tm-fade-right\", classNames.fade)} aria-hidden=\"true\" />\n        </>\n      )}\n\n      {pauseButton && (\n        <button\n          type=\"button\"\n          className={cx(\"tm-pause\", classNames.pauseButton)}\n          aria-pressed={isPaused}\n          aria-label={isPaused ? labels?.play ?? \"Play animation\" : labels?.pause ?? \"Pause animation\"}\n          onClick={togglePaused}\n        >\n          {isPaused ? (\n            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n              <path d=\"M4 2.5v11l9-5.5z\" fill=\"currentColor\" />\n            </svg>\n          ) : (\n            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n              <path d=\"M4 2.5h3v11H4zM9 2.5h3v11H9z\" fill=\"currentColor\" />\n            </svg>\n          )}\n        </button>\n      )}\n    </div>\n  );\n}\n","// Pure layout and timing maths for TransformMarquee. No DOM access here, so\n// every function is deterministic and unit-testable.\n\nexport type Breakpoint = \"base\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type Breakpoints = Record<Exclude<Breakpoint, \"base\">, number>;\n\n/** A single value, or a value per breakpoint (mobile-first, like Tailwind). */\nexport type Responsive<T> = T | Partial<Record<Breakpoint, T>>;\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };\n\nconst ORDER = [\"sm\", \"md\", \"lg\", \"xl\"] as const;\n\nfunction isPerBreakpoint<T>(value: Responsive<T>): value is Partial<Record<Breakpoint, T>> {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\n/**\n * Resolves a responsive value for a container width. Each breakpoint applies\n * from its min-width upwards; below the first defined one, `base` (or\n * `fallback`) applies.\n */\nexport function resolveResponsive<T>(\n  value: Responsive<T> | undefined,\n  width: number,\n  breakpoints: Breakpoints,\n  fallback: T,\n): T {\n  if (value === undefined) return fallback;\n  if (!isPerBreakpoint(value)) return value;\n  let result = value.base ?? fallback;\n  for (const bp of ORDER) {\n    const v = value[bp];\n    if (v !== undefined && width >= breakpoints[bp]) result = v;\n  }\n  return result;\n}\n\n/**\n * Low-discrepancy sequence in [0, 1). Any prefix of it is evenly spread, so\n * however many lanes are visible their starting points never clump.\n */\nexport function vanDerCorput(n: number, base = 2): number {\n  let result = 0;\n  let denominator = 1 / base;\n  let k = Math.floor(n);\n  while (k > 0) {\n    result += (k % base) * denominator;\n    k = Math.floor(k / base);\n    denominator /= base;\n  }\n  return result;\n}\n\n/** How many whole rows of `rowHeight` fit in `height` with `gap` between them. */\nexport function fitRows(height: number, rowHeight: number, gap: number): number {\n  if (rowHeight <= 0 || height < rowHeight) return 0;\n  return Math.floor((height + gap) / (rowHeight + gap));\n}\n\n/** Height of `rows` rows of `rowHeight` with `gap` between them. */\nexport function rowsHeight(rows: number, rowHeight: number, gap: number): number {\n  return rows <= 0 ? 0 : rows * rowHeight + (rows - 1) * gap;\n}\n\n/**\n * Speed for a lane in px/s. A range is spread deterministically across lanes\n * (base-3 sequence, so it doesn't line up with the base-2 phase sequence).\n * Every chip in a lane shares its lane's speed, so they can never collide.\n */\nexport function laneSpeed(lane: number, speed: number | readonly [number, number]): number {\n  if (typeof speed === \"number\") return speed;\n  const [min, max] = speed;\n  return min + (max - min) * vanDerCorput(lane + 1, 3);\n}\n\n/** Starting phase (0–1 of the lane's travel cycle) for one chip. */\nexport function travelerPhase(lane: number, slot: number, perRow: number): number {\n  return (vanDerCorput(lane + 1) + slot / perRow) % 1;\n}\n\n/** Which item a lane/slot shows: items are dealt out in order, wrapping. */\nexport function itemIndexFor(lane: number, slot: number, perRow: number, count: number): number {\n  return count <= 0 ? 0 : (lane * perRow + slot) % count;\n}\n\n/**\n * The travel cycle of a lane. Chips enter fully off one edge and leave fully\n * off the other (`range >= rowWidth + widest chip`), and the cycle is long\n * enough that `perRow` evenly spaced chips keep at least `minGap` between\n * them however long their labels are.\n */\nexport function travelGeometry(\n  rowWidth: number,\n  widestChip: number,\n  perRow: number,\n  minGap: number,\n): { start: number; range: number } {\n  const range = Math.max(rowWidth + widestChip, perRow * (widestChip + minGap));\n  return { start: -widestChip, range };\n}\n\n/** Left edge (px, for rightward travel) of a chip after `elapsedS` seconds. */\nexport function positionAt(\n  elapsedS: number,\n  speed: number,\n  phase: number,\n  start: number,\n  range: number,\n): number {\n  if (range <= 0) return start;\n  const traveled = elapsedS * speed + phase * range;\n  return start + (((traveled % range) + range) % range);\n}\n\n/** Fraction (0–1) of a chip at `x` with `width` that lies left of `split`. */\nexport function wipeFraction(x: number, width: number, split: number): number {\n  if (width <= 0) return 0;\n  return Math.min(1, Math.max(0, (split - x) / width));\n}\n\nexport type Direction = \"right\" | \"left\";\n\n/**\n * clip-path values for both chip layers. Moving right, the part left of the\n * split hasn't crossed yet (shows \"from\"); moving left, it's the reverse.\n */\nexport function clipPaths(fraction: number, direction: Direction): { from: string; to: string } {\n  const left = `inset(0 ${(1 - fraction) * 100}% 0 0)`;\n  const right = `inset(0 0 0 ${fraction * 100}%)`;\n  return direction === \"right\" ? { from: left, to: right } : { from: right, to: left };\n}\n"],"mappings":"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","names":["_"]}