@ansh-ui/core 0.2.0

package/dist/chunk-C6XPQO2O.js

@@ -0,0 +1,1170 @@
+import { getRegistry, trackPointer, resolveMotion, getTicker, observeResize, prefersReducedMotion, observeIntersection } from './chunk-BOQQHICI.js';
+import { parseColor } from './chunk-QALZKHWH.js';
+import { resolveEasing } from './chunk-7MEIXWPH.js';
+import { clamp, damp, lerp } from './chunk-KU2C6GEA.js';
+
+// src/behaviours/types.ts
+function mountBehaviour(definition, element, userOptions = {}) {
+  getRegistry().requireCapability(definition.capability ?? "behaviour:core");
+  let options = { ...definition.defaults, ...stripUndefined(userOptions) };
+  let instance = definition.setup(element, options);
+  let destroyed = false;
+  return {
+    update(next) {
+      if (destroyed) return;
+      const incoming = stripUndefined(next);
+      if (Object.keys(incoming).length === 0) return;
+      options = { ...options, ...incoming };
+      if (instance?.update) {
+        instance.update(incoming);
+      } else {
+        instance?.destroy();
+        instance = definition.setup(element, options);
+      }
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      instance?.destroy();
+      instance = null;
+    }
+  };
+}
+function defineBehaviour(definition) {
+  const registry = getRegistry();
+  if (!registry.has("behaviour", definition.name)) {
+    registry.register("behaviour", definition.name, definition);
+  }
+  return definition;
+}
+function stripUndefined(input) {
+  const out = {};
+  for (const [key, value] of Object.entries(input)) {
+    if (value !== void 0) out[key] = value;
+  }
+  return out;
+}
+function captureStyles(element, properties) {
+  const saved = /* @__PURE__ */ new Map();
+  for (const property of properties) {
+    saved.set(property, element.style.getPropertyValue(kebab(property)));
+  }
+  return () => {
+    for (const [property, value] of saved) {
+      if (value) element.style.setProperty(kebab(property), value);
+      else element.style.removeProperty(kebab(property));
+    }
+  };
+}
+function kebab(property) {
+  return property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+// src/behaviours/magnetic.ts
+var DEFAULTS = {
+  intensity: 1,
+  // Magnetic response is a direct reaction to the user's own input rather than autonomous
+  // motion, but it is still large-scale movement, so the safe default is to disable it.
+  reducedMotion: "pause",
+  disabled: false,
+  strength: 12,
+  radius: 120,
+  stiffness: 260,
+  damping: 24,
+  scale: 1,
+  rotate: 0,
+  axis: "both",
+  target: ""
+};
+var magnetic = defineBehaviour({
+  name: "magnetic",
+  defaults: DEFAULTS,
+  setup(element, options) {
+    let opts = options;
+    const target = opts.target ? element.querySelector(opts.target) ?? element : element;
+    const restoreStyles = captureStyles(target, ["transform", "willChange"]);
+    const pointer = trackPointer(element, { trackOutside: true, smoothing: 1e-3 });
+    let x = 0;
+    let y = 0;
+    let vx = 0;
+    let vy = 0;
+    let scaleValue = 1;
+    let scaleVelocity = 0;
+    let rotation = 0;
+    let rotationVelocity = 0;
+    let motion = resolveMotion(opts.reducedMotion);
+    target.style.willChange = "transform";
+    const ticker = getTicker();
+    const stop = ticker.add(
+      ({ delta }) => {
+        if (opts.disabled || !motion.animate) return;
+        let targetX = 0;
+        let targetY = 0;
+        let targetScale = 1;
+        let targetRotation = 0;
+        const rect = element.getBoundingClientRect();
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const offsetX = pointer.state.x - centerX;
+        const offsetY = pointer.state.y - centerY;
+        const edgeDistanceX = Math.max(0, Math.abs(offsetX) - centerX);
+        const edgeDistanceY = Math.max(0, Math.abs(offsetY) - centerY);
+        const edgeDistance = Math.hypot(edgeDistanceX, edgeDistanceY);
+        const radius = Math.max(1, opts.radius);
+        if (pointer.state.everInside || edgeDistance < radius) {
+          const proximity = clamp(1 - edgeDistance / radius, 0, 1);
+          const influence = proximity * proximity * opts.intensity;
+          const maxDisplacement = opts.strength;
+          const magnitude = Math.hypot(offsetX, offsetY);
+          if (magnitude > 1e-3) {
+            const nx = offsetX / magnitude;
+            const ny = offsetY / magnitude;
+            targetX = nx * maxDisplacement * influence;
+            targetY = ny * maxDisplacement * influence;
+          }
+          if (opts.axis === "x") targetY = 0;
+          else if (opts.axis === "y") targetX = 0;
+          targetScale = 1 + (opts.scale - 1) * influence;
+          targetRotation = opts.rotate * influence * (offsetX / Math.max(1, centerX));
+        }
+        const stiffness = opts.stiffness;
+        const damping = opts.damping;
+        const steps = Math.min(4, Math.max(1, Math.ceil(delta / (1 / 60))));
+        const dt = delta / steps;
+        for (let i = 0; i < steps; i++) {
+          vx += (-stiffness * (x - targetX) - damping * vx) * dt;
+          vy += (-stiffness * (y - targetY) - damping * vy) * dt;
+          x += vx * dt;
+          y += vy * dt;
+          scaleVelocity += (-stiffness * (scaleValue - targetScale) - damping * scaleVelocity) * dt;
+          scaleValue += scaleVelocity * dt;
+          rotationVelocity += (-stiffness * (rotation - targetRotation) - damping * rotationVelocity) * dt;
+          rotation += rotationVelocity * dt;
+        }
+        const parts = [`translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0)`];
+        if (opts.scale !== 1) parts.push(`scale(${scaleValue.toFixed(4)})`);
+        if (opts.rotate !== 0) parts.push(`rotate(${rotation.toFixed(3)}deg)`);
+        target.style.transform = parts.join(" ");
+      },
+      { phase: "write", name: "behaviour:magnetic" }
+    );
+    return {
+      update(next) {
+        opts = { ...opts, ...next };
+        motion = resolveMotion(opts.reducedMotion);
+        if (opts.disabled || !motion.animate) {
+          x = y = vx = vy = 0;
+          scaleValue = 1;
+          rotation = 0;
+          target.style.transform = "";
+        }
+      },
+      destroy() {
+        stop();
+        pointer.destroy();
+        restoreStyles();
+      }
+    };
+  }
+});
+
+// src/behaviours/tilt.ts
+var DEFAULTS2 = {
+  intensity: 1,
+  reducedMotion: "pause",
+  disabled: false,
+  max: 10,
+  perspective: 900,
+  scale: 1.02,
+  stiffness: 180,
+  damping: 22,
+  reverse: false,
+  lift: 0,
+  glare: true,
+  glareOpacity: 0.18,
+  axis: "both"
+};
+var tilt = defineBehaviour({
+  name: "tilt",
+  defaults: DEFAULTS2,
+  setup(element, options) {
+    let opts = options;
+    const restoreStyles = captureStyles(element, ["transform", "transformStyle", "willChange"]);
+    const pointer = trackPointer(element, { smoothing: 2e-3 });
+    let rotateX = 0;
+    let rotateY = 0;
+    let velocityX = 0;
+    let velocityY = 0;
+    let presence = 0;
+    let presenceVelocity = 0;
+    let motion = resolveMotion(opts.reducedMotion);
+    element.style.willChange = "transform";
+    element.style.transformStyle = "preserve-3d";
+    let glareElement = null;
+    function ensureGlare() {
+      if (!opts.glare) {
+        removeGlare();
+        return;
+      }
+      if (glareElement) return;
+      const glare = document.createElement("div");
+      glare.setAttribute("aria-hidden", "true");
+      Object.assign(glare.style, {
+        position: "absolute",
+        inset: "0",
+        pointerEvents: "none",
+        borderRadius: "inherit",
+        // `overflow: hidden` on the host would clip content, so instead the gradient itself is
+        // sized to the element and simply moves within it.
+        opacity: "0",
+        transition: "none",
+        // Kept behind any positioned content but above the element's own background.
+        zIndex: "1"
+      });
+      element.appendChild(glare);
+      glareElement = glare;
+    }
+    function removeGlare() {
+      if (glareElement && glareElement.parentNode === element) {
+        element.removeChild(glareElement);
+      }
+      glareElement = null;
+    }
+    ensureGlare();
+    const ticker = getTicker();
+    const stop = ticker.add(
+      ({ delta }) => {
+        if (opts.disabled || !motion.animate) return;
+        const state = pointer.state;
+        const hovering = state.inside;
+        const nx = (state.smoothNx - 0.5) * 2;
+        const ny = (state.smoothNy - 0.5) * 2;
+        const direction = opts.reverse ? -1 : 1;
+        const max = opts.max * opts.intensity;
+        let targetRotateX = hovering ? -ny * max * direction : 0;
+        let targetRotateY = hovering ? nx * max * direction : 0;
+        if (opts.axis === "x") targetRotateY = 0;
+        else if (opts.axis === "y") targetRotateX = 0;
+        const targetPresence = hovering ? 1 : 0;
+        const steps = Math.min(4, Math.max(1, Math.ceil(delta / (1 / 60))));
+        const dt = delta / steps;
+        const stiffness = opts.stiffness;
+        const damping = opts.damping;
+        for (let i = 0; i < steps; i++) {
+          velocityX += (-stiffness * (rotateX - targetRotateX) - damping * velocityX) * dt;
+          velocityY += (-stiffness * (rotateY - targetRotateY) - damping * velocityY) * dt;
+          rotateX += velocityX * dt;
+          rotateY += velocityY * dt;
+          presenceVelocity += (-stiffness * (presence - targetPresence) - damping * presenceVelocity) * dt;
+          presence += presenceVelocity * dt;
+        }
+        presence = clamp(presence, 0, 1.2);
+        const scale = 1 + (opts.scale - 1) * presence;
+        const lift = opts.lift * presence;
+        element.style.transform = `perspective(${opts.perspective}px) rotateX(${rotateX.toFixed(3)}deg) rotateY(${rotateY.toFixed(3)}deg) translateZ(${lift.toFixed(2)}px) scale(${scale.toFixed(4)})`;
+        if (glareElement) {
+          const opacity = opts.glareOpacity * presence;
+          glareElement.style.opacity = opacity.toFixed(3);
+          if (opacity > 1e-3) {
+            const angle = Math.atan2(ny, nx) * (180 / Math.PI) + 90;
+            glareElement.style.background = `linear-gradient(${angle.toFixed(1)}deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 70%)`;
+          }
+        }
+      },
+      { phase: "write", name: "behaviour:tilt" }
+    );
+    return {
+      update(next) {
+        const previousGlare = opts.glare;
+        opts = { ...opts, ...next };
+        motion = resolveMotion(opts.reducedMotion);
+        if (opts.glare !== previousGlare) ensureGlare();
+        if (opts.disabled || !motion.animate) {
+          rotateX = rotateY = velocityX = velocityY = 0;
+          presence = presenceVelocity = 0;
+          element.style.transform = "";
+          if (glareElement) glareElement.style.opacity = "0";
+        }
+      },
+      destroy() {
+        stop();
+        pointer.destroy();
+        removeGlare();
+        restoreStyles();
+      }
+    };
+  }
+});
+
+// src/behaviours/marquee.ts
+var DEFAULTS3 = {
+  intensity: 1,
+  // Continuous horizontal motion across a wide area is a classic vestibular trigger, so the
+  // safe default is to hold it still. The content stays fully readable.
+  reducedMotion: "static",
+  disabled: false,
+  speed: 60,
+  direction: "left",
+  pauseOnHover: true,
+  pauseEasing: 0.4,
+  gap: 0,
+  fadeEdges: 0
+};
+var marquee = defineBehaviour({
+  name: "marquee",
+  defaults: DEFAULTS3,
+  setup(element, options) {
+    let opts = options;
+    const restoreHost = captureStyles(element, [
+      "overflow",
+      "display",
+      "maskImage",
+      "webkitMaskImage"
+    ]);
+    const track = document.createElement("div");
+    const originalChildren = Array.from(element.childNodes);
+    const vertical = opts.direction === "up" || opts.direction === "down";
+    Object.assign(element.style, {
+      overflow: "hidden",
+      display: vertical ? "block" : "flex"
+    });
+    Object.assign(track.style, {
+      display: "flex",
+      flexDirection: vertical ? "column" : "row",
+      flexShrink: "0",
+      willChange: "transform",
+      gap: opts.gap ? `${opts.gap}px` : ""
+    });
+    for (const child of originalChildren) track.appendChild(child);
+    element.appendChild(track);
+    let clones = [];
+    let cycleSize = 0;
+    let offset = 0;
+    let currentSpeed = 0;
+    let hovering = false;
+    let motion = resolveMotion(opts.reducedMotion);
+    function rebuild() {
+      for (const clone of clones) clone.remove();
+      clones = [];
+      const containerSize = vertical ? element.clientHeight : element.clientWidth;
+      const trackSize = vertical ? track.scrollHeight : track.scrollWidth;
+      cycleSize = trackSize + (opts.gap ?? 0);
+      if (cycleSize <= 0 || containerSize <= 0) return;
+      const needed = Math.ceil(containerSize / cycleSize) + 1;
+      for (let i = 0; i < needed; i++) {
+        const clone = track.cloneNode(true);
+        clone.setAttribute("aria-hidden", "true");
+        clone.style.willChange = "transform";
+        element.appendChild(clone);
+        clones.push(clone);
+      }
+    }
+    function applyEdgeFade() {
+      const fade = opts.fadeEdges ?? 0;
+      if (fade <= 0) {
+        element.style.removeProperty("mask-image");
+        element.style.removeProperty("-webkit-mask-image");
+        return;
+      }
+      const axis = vertical ? "to bottom" : "to right";
+      const mask = `linear-gradient(${axis}, transparent 0, black ${fade}px, black calc(100% - ${fade}px), transparent 100%)`;
+      element.style.setProperty("mask-image", mask);
+      element.style.setProperty("-webkit-mask-image", mask);
+    }
+    const stopResize = observeResize(element, rebuild);
+    const stopTrackResize = observeResize(track, rebuild);
+    const onEnter = () => {
+      hovering = true;
+    };
+    const onLeave = () => {
+      hovering = false;
+    };
+    element.addEventListener("pointerenter", onEnter, { passive: true });
+    element.addEventListener("pointerleave", onLeave, { passive: true });
+    applyEdgeFade();
+    rebuild();
+    const ticker = getTicker();
+    const stop = ticker.add(
+      ({ delta }) => {
+        if (opts.disabled || !motion.animate || cycleSize <= 0) return;
+        const targetSpeed = opts.pauseOnHover && hovering ? 0 : opts.speed * opts.intensity * motion.timeScale;
+        const easing = Math.max(0, opts.pauseEasing);
+        currentSpeed = easing <= 0 ? targetSpeed : damp(currentSpeed, targetSpeed, 1e-4 ** (1 / easing), delta);
+        offset += currentSpeed * delta;
+        offset = (offset % cycleSize + cycleSize) % cycleSize;
+        const sign = opts.direction === "left" || opts.direction === "up" ? -1 : 1;
+        const translate = sign * offset;
+        const transform = vertical ? `translate3d(0, ${translate.toFixed(2)}px, 0)` : `translate3d(${translate.toFixed(2)}px, 0, 0)`;
+        track.style.transform = transform;
+        for (const clone of clones) clone.style.transform = transform;
+      },
+      { phase: "write", name: "behaviour:marquee" }
+    );
+    return {
+      update(next) {
+        const previousGap = opts.gap;
+        const previousFade = opts.fadeEdges;
+        opts = { ...opts, ...next };
+        motion = resolveMotion(opts.reducedMotion);
+        if (opts.gap !== previousGap) {
+          track.style.gap = opts.gap ? `${opts.gap}px` : "";
+          rebuild();
+        }
+        if (opts.fadeEdges !== previousFade) applyEdgeFade();
+      },
+      destroy() {
+        stop();
+        stopResize();
+        stopTrackResize();
+        element.removeEventListener("pointerenter", onEnter);
+        element.removeEventListener("pointerleave", onLeave);
+        for (const clone of clones) clone.remove();
+        clones = [];
+        for (const child of originalChildren) element.appendChild(child);
+        track.remove();
+        restoreHost();
+      }
+    };
+  }
+});
+
+// src/behaviours/split-text.ts
+var DEFAULTS4 = {
+  intensity: 1,
+  reducedMotion: "none",
+  disabled: false,
+  by: "chars",
+  charClass: "ansh-char",
+  wordClass: "ansh-word",
+  lineClass: "ansh-line",
+  cssVariables: true,
+  mask: false
+};
+var results = /* @__PURE__ */ new WeakMap();
+function getSplitResult(element) {
+  return results.get(element);
+}
+var splitText = defineBehaviour({
+  name: "split-text",
+  defaults: DEFAULTS4,
+  setup(element, options) {
+    const opts = options;
+    const units = Array.isArray(opts.by) ? opts.by : [opts.by];
+    const originalHTML = element.innerHTML;
+    const originalText = element.textContent ?? "";
+    const result = { chars: [], words: [], lines: [] };
+    function createAccessibleCopy() {
+      const sr = document.createElement("span");
+      sr.textContent = originalText;
+      Object.assign(sr.style, {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: "0"
+      });
+      return sr;
+    }
+    function makeUnit(text, className) {
+      const span = document.createElement("span");
+      span.className = className;
+      span.textContent = text;
+      span.style.display = "inline-block";
+      return span;
+    }
+    function wrapInMask(unit) {
+      const wrapper = document.createElement("span");
+      wrapper.className = "ansh-mask";
+      Object.assign(wrapper.style, {
+        display: "inline-block",
+        overflow: "hidden",
+        // Without this, descenders (g, y, p) are clipped by the mask box.
+        verticalAlign: "top"
+      });
+      wrapper.appendChild(unit);
+      return wrapper;
+    }
+    function stampVariables(elements) {
+      if (!opts.cssVariables) return;
+      const total = elements.length;
+      elements.forEach((el, index) => {
+        el.style.setProperty("--ansh-index", String(index));
+        el.style.setProperty("--ansh-total", String(total));
+        el.style.setProperty("--ansh-progress", total <= 1 ? "0" : (index / (total - 1)).toFixed(4));
+      });
+    }
+    function segmentCharacters(text) {
+      if (typeof Intl !== "undefined" && "Segmenter" in Intl) {
+        const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+        return Array.from(segmenter.segment(text), (s) => s.segment);
+      }
+      return Array.from(text);
+    }
+    function buildWordsAndChars(container, text) {
+      const wantsWords = units.includes("words") || units.includes("lines");
+      const wantsChars = units.includes("chars");
+      const tokens = text.split(/(\s+)/);
+      for (const token of tokens) {
+        if (token.length === 0) continue;
+        if (/^\s+$/.test(token)) {
+          container.appendChild(document.createTextNode(token));
+          continue;
+        }
+        if (wantsWords) {
+          const word = makeUnit(wantsChars ? "" : token, opts.wordClass);
+          if (wantsChars) {
+            for (const character of segmentCharacters(token)) {
+              const char = makeUnit(character, opts.charClass);
+              result.chars.push(char);
+              word.appendChild(opts.mask ? wrapInMask(char) : char);
+            }
+          }
+          result.words.push(word);
+          container.appendChild(opts.mask && !wantsChars ? wrapInMask(word) : word);
+        } else if (wantsChars) {
+          for (const character of segmentCharacters(token)) {
+            const char = makeUnit(character, opts.charClass);
+            result.chars.push(char);
+            container.appendChild(opts.mask ? wrapInMask(char) : char);
+          }
+        } else {
+          container.appendChild(document.createTextNode(token));
+        }
+      }
+    }
+    function groupIntoLines(container) {
+      if (result.words.length === 0) return;
+      const lines = [];
+      let currentTop = null;
+      let current = [];
+      for (const word of result.words) {
+        const top = word.offsetTop;
+        if (currentTop === null || Math.abs(top - currentTop) <= 2) {
+          currentTop = currentTop ?? top;
+          current.push(word);
+        } else {
+          lines.push(current);
+          current = [word];
+          currentTop = top;
+        }
+      }
+      if (current.length > 0) lines.push(current);
+      for (const lineWords of lines) {
+        const line = document.createElement("span");
+        line.className = opts.lineClass;
+        line.style.display = "inline-block";
+        const first = lineWords[0];
+        const parent = first.parentElement ?? container;
+        parent.insertBefore(opts.mask ? wrapInMask(line) : line, first);
+        for (const word of lineWords) {
+          line.appendChild(word);
+        }
+        result.lines.push(line);
+      }
+    }
+    function build() {
+      result.chars = [];
+      result.words = [];
+      result.lines = [];
+      const fragment = document.createDocumentFragment();
+      const visual = document.createElement("span");
+      visual.setAttribute("aria-hidden", "true");
+      buildWordsAndChars(visual, originalText);
+      fragment.appendChild(createAccessibleCopy());
+      fragment.appendChild(visual);
+      element.replaceChildren(fragment);
+      if (units.includes("lines")) groupIntoLines(visual);
+      stampVariables(result.chars);
+      stampVariables(result.words);
+      stampVariables(result.lines);
+      results.set(element, result);
+    }
+    if (!opts.disabled) build();
+    return {
+      destroy() {
+        results.delete(element);
+        element.innerHTML = originalHTML;
+      }
+    };
+  }
+});
+function split(element, options = {}) {
+  const originalHTML = element.innerHTML;
+  const definition = splitText;
+  const merged = { ...definition.defaults, ...options };
+  const instance = definition.setup(element, merged);
+  const result = results.get(element) ?? { chars: [], words: [], lines: [] };
+  return {
+    ...result,
+    restore() {
+      instance.destroy();
+      element.innerHTML = originalHTML;
+    }
+  };
+}
+
+// src/motion/stagger.ts
+function stagger(count, options = {}) {
+  const total = Math.max(1, Math.floor(count));
+  const from = options.from ?? "first";
+  const baseDelay = options.delay ?? 0;
+  const ease = resolveEasing(options.easing);
+  if (total === 1) return () => baseDelay;
+  const distances = computeDistances(total, from, options.grid, options.axis);
+  let maxDistance = 0;
+  for (const d of distances) if (d > maxDistance) maxDistance = d;
+  const spanSeconds = options.total !== void 0 ? Math.max(0, options.total) : Math.max(0, options.each ?? 0.05) * maxDistance;
+  return (index) => {
+    const i = clamp(Math.floor(index), 0, total - 1);
+    const normalized = maxDistance === 0 ? 0 : distances[i] / maxDistance;
+    return baseDelay + ease(normalized) * spanSeconds;
+  };
+}
+function computeDistances(count, from, grid, axis) {
+  const distances = new Array(count);
+  if (grid) {
+    const [columns] = grid;
+    const cols = Math.max(1, Math.floor(columns));
+    const rows = Math.max(1, Math.ceil(count / cols));
+    const origin = resolveGridOrigin(from, cols, rows, count);
+    for (let i = 0; i < count; i++) {
+      const x = i % cols;
+      const y = Math.floor(i / cols);
+      const dx = x - origin.x;
+      const dy = y - origin.y;
+      if (axis === "x") distances[i] = Math.abs(dx);
+      else if (axis === "y") distances[i] = Math.abs(dy);
+      else distances[i] = Math.hypot(dx, dy);
+    }
+    if (from === "edges") {
+      let max = 0;
+      for (const d of distances) if (d > max) max = d;
+      for (let i = 0; i < count; i++) distances[i] = max - distances[i];
+    }
+    return distances;
+  }
+  switch (from) {
+    case "last":
+      for (let i = 0; i < count; i++) distances[i] = count - 1 - i;
+      return distances;
+    case "center": {
+      const centre = (count - 1) / 2;
+      for (let i = 0; i < count; i++) distances[i] = Math.abs(i - centre);
+      return distances;
+    }
+    case "edges": {
+      const centre = (count - 1) / 2;
+      for (let i = 0; i < count; i++) distances[i] = centre - Math.abs(i - centre);
+      return distances;
+    }
+    case "first":
+      for (let i = 0; i < count; i++) distances[i] = i;
+      return distances;
+    default: {
+      const origin = clamp(Math.floor(from), 0, count - 1);
+      for (let i = 0; i < count; i++) distances[i] = Math.abs(i - origin);
+      return distances;
+    }
+  }
+}
+function resolveGridOrigin(from, cols, rows, count) {
+  if (typeof from === "number") {
+    const index = clamp(Math.floor(from), 0, count - 1);
+    return { x: index % cols, y: Math.floor(index / cols) };
+  }
+  switch (from) {
+    case "last":
+      return { x: cols - 1, y: rows - 1 };
+    case "center":
+    case "edges":
+      return { x: (cols - 1) / 2, y: (rows - 1) / 2 };
+    case "first":
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+function staggerDuration(count, itemDuration, options = {}) {
+  const delayFor = stagger(count, options);
+  let latest = 0;
+  for (let i = 0; i < count; i++) {
+    const end = delayFor(i) + itemDuration;
+    if (end > latest) latest = end;
+  }
+  return latest;
+}
+
+// src/behaviours/scroll-reveal.ts
+var DEFAULTS5 = {
+  intensity: 1,
+  reducedMotion: "static",
+  disabled: false,
+  distance: 24,
+  direction: "up",
+  opacity: 0,
+  scale: 1,
+  rotate: 0,
+  blur: 0,
+  duration: 0.7,
+  easing: "cinematic",
+  delay: 0,
+  threshold: 0.15,
+  rootMargin: "0px 0px -10% 0px",
+  repeat: false,
+  selector: "",
+  stagger: { each: 0.06, from: "first" }
+};
+var scrollReveal = defineBehaviour({
+  name: "scroll-reveal",
+  defaults: DEFAULTS5,
+  setup(element, options) {
+    let opts = options;
+    const easing = resolveEasing(opts.easing);
+    const targets = [];
+    let revealing = false;
+    let reversing = false;
+    let stopTicker = null;
+    function collectTargets() {
+      const elements = opts.selector ? Array.from(element.querySelectorAll(opts.selector)) : [element];
+      const delayFor = stagger(elements.length, opts.stagger);
+      elements.forEach((el, index) => {
+        targets.push({
+          element: el,
+          restore: captureStyles(el, ["opacity", "transform", "filter", "willChange"]),
+          time: 0,
+          delay: opts.delay + (opts.selector ? delayFor(index) : 0),
+          done: false
+        });
+      });
+    }
+    function applyProgress(target, progress) {
+      const eased = easing(clamp(progress, 0, 1));
+      const inverse = 1 - eased;
+      const intensity = opts.intensity;
+      const distance = opts.distance * intensity * inverse;
+      let translateX = 0;
+      let translateY = 0;
+      switch (opts.direction) {
+        case "up":
+          translateY = distance;
+          break;
+        case "down":
+          translateY = -distance;
+          break;
+        case "left":
+          translateX = distance;
+          break;
+        case "right":
+          translateX = -distance;
+          break;
+      }
+      const style = target.element.style;
+      style.opacity = String(opts.opacity + (1 - opts.opacity) * eased);
+      const parts = [];
+      if (translateX !== 0 || translateY !== 0) {
+        parts.push(`translate3d(${translateX.toFixed(2)}px, ${translateY.toFixed(2)}px, 0)`);
+      }
+      if (opts.scale !== 1) {
+        parts.push(`scale(${(opts.scale + (1 - opts.scale) * eased).toFixed(4)})`);
+      }
+      if (opts.rotate !== 0) {
+        parts.push(`rotate(${(opts.rotate * inverse).toFixed(3)}deg)`);
+      }
+      style.transform = parts.length > 0 ? parts.join(" ") : "";
+      if (opts.blur > 0) {
+        const blur = opts.blur * inverse;
+        style.filter = blur > 0.05 ? `blur(${blur.toFixed(2)}px)` : "";
+      }
+    }
+    function settle(target) {
+      const style = target.element.style;
+      style.opacity = "";
+      style.transform = "";
+      style.filter = "";
+      style.willChange = "";
+      target.done = true;
+    }
+    function hide(target) {
+      target.element.style.willChange = "opacity, transform";
+      target.done = false;
+      target.time = 0;
+      applyProgress(target, 0);
+    }
+    const ticker = getTicker();
+    function startTicker() {
+      if (stopTicker) return;
+      stopTicker = ticker.add(
+        ({ delta }) => {
+          let allDone = true;
+          for (const target of targets) {
+            if (target.done && !reversing) continue;
+            target.time += reversing ? -delta : delta;
+            const elapsed = target.time - target.delay;
+            if (elapsed < 0) {
+              allDone = false;
+              continue;
+            }
+            const progress = opts.duration <= 0 ? 1 : elapsed / opts.duration;
+            if (!reversing && progress >= 1) {
+              settle(target);
+              continue;
+            }
+            if (reversing && target.time <= 0) {
+              applyProgress(target, 0);
+              continue;
+            }
+            applyProgress(target, progress);
+            allDone = false;
+          }
+          if (allDone) {
+            stopTicker?.();
+            stopTicker = null;
+          }
+        },
+        { phase: "write", name: "behaviour:scroll-reveal" }
+      );
+    }
+    collectTargets();
+    const skipAnimation = opts.disabled || prefersReducedMotion() && opts.reducedMotion !== "none";
+    if (!skipAnimation) {
+      for (const target of targets) hide(target);
+    }
+    const stopObserver = skipAnimation ? () => {
+    } : observeIntersection(
+      element,
+      (entry) => {
+        if (entry.isIntersecting) {
+          if (revealing && !opts.repeat) return;
+          revealing = true;
+          reversing = false;
+          for (const target of targets) {
+            if (target.done) continue;
+            target.time = 0;
+          }
+          startTicker();
+        } else if (opts.repeat) {
+          reversing = true;
+          for (const target of targets) {
+            target.done = false;
+            target.time = opts.duration + target.delay;
+            target.element.style.willChange = "opacity, transform";
+          }
+          startTicker();
+        }
+      },
+      { threshold: opts.threshold, rootMargin: opts.rootMargin }
+    );
+    return {
+      update(next) {
+        opts = { ...opts, ...next };
+        if (opts.disabled) {
+          for (const target of targets) settle(target);
+        }
+      },
+      destroy() {
+        stopObserver();
+        stopTicker?.();
+        stopTicker = null;
+        for (const target of targets) target.restore();
+        targets.length = 0;
+      }
+    };
+  }
+});
+
+// src/behaviours/parallax.ts
+var DEFAULTS6 = {
+  intensity: 1,
+  // Parallax is the canonical vestibular trigger. Under reduced motion it is disabled outright,
+  // not slowed — a slow parallax is still parallax.
+  reducedMotion: "pause",
+  disabled: false,
+  speed: 0.3,
+  axis: "y",
+  scale: 1,
+  rotate: 0,
+  fade: [1, 1, 1],
+  contain: true,
+  smoothing: 0
+};
+var parallax = defineBehaviour({
+  name: "parallax",
+  defaults: DEFAULTS6,
+  setup(element, options) {
+    let opts = options;
+    const restore = captureStyles(element, ["transform", "opacity", "willChange"]);
+    let elementTop = 0;
+    let elementHeight = 1;
+    let viewportHeight = 1;
+    let containerSize = 0;
+    let needsMeasure = true;
+    let currentTranslate = 0;
+    let motion = resolveMotion(opts.reducedMotion);
+    element.style.willChange = "transform";
+    function measure() {
+      const rect = element.getBoundingClientRect();
+      const scroll2 = opts.axis === "y" ? window.scrollY : window.scrollX;
+      elementTop = (opts.axis === "y" ? rect.top : rect.left) + scroll2;
+      elementHeight = Math.max(1, opts.axis === "y" ? rect.height : rect.width);
+      viewportHeight = Math.max(1, opts.axis === "y" ? window.innerHeight : window.innerWidth);
+      const parent = element.parentElement;
+      if (parent) {
+        const parentRect = parent.getBoundingClientRect();
+        containerSize = opts.axis === "y" ? parentRect.height : parentRect.width;
+      } else {
+        containerSize = elementHeight;
+      }
+      needsMeasure = false;
+    }
+    const invalidate = () => {
+      needsMeasure = true;
+    };
+    window.addEventListener("resize", invalidate, { passive: true });
+    const stopResize = observeResize(element, invalidate);
+    let scroll = 0;
+    let progress = 0;
+    const ticker = getTicker();
+    const stopRead = ticker.add(
+      () => {
+        if (opts.disabled || !motion.animate) return;
+        if (needsMeasure) measure();
+        scroll = opts.axis === "y" ? window.scrollY : window.scrollX;
+      },
+      { phase: "read", name: "behaviour:parallax:read" }
+    );
+    const stopWrite = ticker.add(
+      ({ delta }) => {
+        if (opts.disabled || !motion.animate) return;
+        const start = elementTop - viewportHeight;
+        const end = elementTop + elementHeight;
+        const span = Math.max(1, end - start);
+        progress = clamp((scroll - start) / span, 0, 1);
+        const centred = progress - 0.5;
+        let translate = centred * viewportHeight * opts.speed * opts.intensity;
+        if (opts.contain) {
+          const slack = Math.max(0, containerSize - elementHeight) / 2 || elementHeight * 0.25;
+          translate = clamp(translate, -slack, slack);
+        }
+        if (opts.smoothing > 0) {
+          const retain = Math.pow(clamp(opts.smoothing, 1e-3, 0.999), delta);
+          currentTranslate = lerp(translate, currentTranslate, retain);
+        } else {
+          currentTranslate = translate;
+        }
+        const parts = [];
+        if (opts.axis === "y") {
+          parts.push(`translate3d(0, ${currentTranslate.toFixed(2)}px, 0)`);
+        } else {
+          parts.push(`translate3d(${currentTranslate.toFixed(2)}px, 0, 0)`);
+        }
+        if (opts.scale !== 1) {
+          const proximity = 1 - Math.abs(centred) * 2;
+          parts.push(`scale(${(1 + (opts.scale - 1) * clamp(proximity, 0, 1)).toFixed(4)})`);
+        }
+        if (opts.rotate !== 0) {
+          parts.push(`rotate(${(centred * opts.rotate * 2).toFixed(3)}deg)`);
+        }
+        element.style.transform = parts.join(" ");
+        const [enter, centre, exit] = opts.fade;
+        if (enter !== 1 || centre !== 1 || exit !== 1) {
+          const opacity = progress < 0.5 ? lerp(enter, centre, progress * 2) : lerp(centre, exit, (progress - 0.5) * 2);
+          element.style.opacity = opacity.toFixed(4);
+        }
+      },
+      { phase: "write", name: "behaviour:parallax:write" }
+    );
+    return {
+      update(next) {
+        opts = { ...opts, ...next };
+        motion = resolveMotion(opts.reducedMotion);
+        needsMeasure = true;
+        if (opts.disabled || !motion.animate) {
+          element.style.transform = "";
+          element.style.opacity = "";
+        }
+      },
+      destroy() {
+        stopRead();
+        stopWrite();
+        stopResize();
+        window.removeEventListener("resize", invalidate);
+        restore();
+      }
+    };
+  }
+});
+
+// src/behaviours/ripple.ts
+var DEFAULTS7 = {
+  intensity: 1,
+  // A ripple is a small, local, user-initiated response — not the kind of motion that causes
+  // vestibular discomfort. But it is still motion, so `slow` rather than `none` is the honest
+  // default: reduced-motion users get a quick, subdued version instead of nothing.
+  reducedMotion: "slow",
+  disabled: false,
+  color: "currentColor",
+  opacity: 0.28,
+  duration: 0.55,
+  fadeDuration: 0.25,
+  easing: "easeOutQuart",
+  centered: false,
+  keyboard: true,
+  maxRipples: 6
+};
+var ripple = defineBehaviour({
+  name: "ripple",
+  defaults: DEFAULTS7,
+  setup(element, options) {
+    let opts = options;
+    let easing = resolveEasing(opts.easing);
+    const restore = captureStyles(element, ["position", "overflow"]);
+    if (getComputedStyle(element).position === "static") {
+      element.style.position = "relative";
+    }
+    const layer = document.createElement("span");
+    layer.setAttribute("aria-hidden", "true");
+    Object.assign(layer.style, {
+      position: "absolute",
+      inset: "0",
+      overflow: "hidden",
+      // Inherits the host's rounding, so a pill button clips its ripple to a pill.
+      borderRadius: "inherit",
+      pointerEvents: "none"
+    });
+    element.appendChild(layer);
+    const active = [];
+    let stopTicker = null;
+    const ticker = getTicker();
+    function resolveColor() {
+      const raw = opts.color;
+      if (raw === "currentColor") {
+        const computed = getComputedStyle(element).color;
+        try {
+          const parsed = parseColor(computed);
+          return `${Math.round(parsed.r * 255)},${Math.round(parsed.g * 255)},${Math.round(parsed.b * 255)}`;
+        } catch {
+          return "255,255,255";
+        }
+      }
+      try {
+        const parsed = parseColor(raw);
+        return `${Math.round(parsed.r * 255)},${Math.round(parsed.g * 255)},${Math.round(parsed.b * 255)}`;
+      } catch {
+        return "255,255,255";
+      }
+    }
+    function spawn(clientX, clientY) {
+      if (opts.disabled) return;
+      const rect = element.getBoundingClientRect();
+      const x = opts.centered ? rect.width / 2 : clientX - rect.left;
+      const y = opts.centered ? rect.height / 2 : clientY - rect.top;
+      const radius = Math.max(
+        Math.hypot(x, y),
+        Math.hypot(rect.width - x, y),
+        Math.hypot(x, rect.height - y),
+        Math.hypot(rect.width - x, rect.height - y)
+      );
+      const dot = document.createElement("div");
+      Object.assign(dot.style, {
+        position: "absolute",
+        left: `${x - radius}px`,
+        top: `${y - radius}px`,
+        width: `${radius * 2}px`,
+        height: `${radius * 2}px`,
+        borderRadius: "50%",
+        // A soft edge rather than a hard circle. A hard-edged expanding disc reads as a shape;
+        // a graded one reads as a wave.
+        background: `radial-gradient(circle, rgba(${resolveColor()},1) 0%, rgba(${resolveColor()},0.75) 55%, rgba(${resolveColor()},0) 100%)`,
+        opacity: "0",
+        transform: "scale(0)",
+        willChange: "transform, opacity",
+        pointerEvents: "none"
+      });
+      layer.appendChild(dot);
+      active.push({ element: dot, radius, time: 0 });
+      while (active.length > Math.max(1, opts.maxRipples)) {
+        const oldest = active.shift();
+        oldest?.element.remove();
+      }
+      startTicker();
+    }
+    function startTicker() {
+      if (stopTicker) return;
+      stopTicker = ticker.add(
+        ({ delta }) => {
+          const scale = prefersReducedMotion() && opts.reducedMotion === "slow" ? 0.4 : 1;
+          const duration = Math.max(0.01, opts.duration * scale);
+          const fade = Math.max(0, opts.fadeDuration * scale);
+          const total = duration + fade;
+          const peak = clamp(opts.opacity * opts.intensity, 0, 1);
+          for (let i = active.length - 1; i >= 0; i--) {
+            const r = active[i];
+            r.time += delta;
+            if (r.time >= total) {
+              r.element.remove();
+              active.splice(i, 1);
+              continue;
+            }
+            const expansion = clamp(r.time / duration, 0, 1);
+            r.element.style.transform = `scale(${easing(expansion).toFixed(4)})`;
+            const rampIn = clamp(r.time / 0.08, 0, 1);
+            const decay = 1 - clamp(r.time / total, 0, 1);
+            r.element.style.opacity = (peak * rampIn * decay).toFixed(4);
+          }
+          if (active.length === 0) {
+            stopTicker?.();
+            stopTicker = null;
+          }
+        },
+        { phase: "write", name: "behaviour:ripple" }
+      );
+    }
+    const onPointerDown = (event) => {
+      if (event.button !== 0 && event.pointerType === "mouse") return;
+      spawn(event.clientX, event.clientY);
+    };
+    const onKeyDown = (event) => {
+      if (!opts.keyboard) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      if (event.repeat) return;
+      const rect = element.getBoundingClientRect();
+      spawn(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    };
+    element.addEventListener("pointerdown", onPointerDown, { passive: true });
+    element.addEventListener("keydown", onKeyDown);
+    return {
+      update(next) {
+        opts = { ...opts, ...next };
+        easing = resolveEasing(opts.easing);
+      },
+      destroy() {
+        element.removeEventListener("pointerdown", onPointerDown);
+        element.removeEventListener("keydown", onKeyDown);
+        stopTicker?.();
+        stopTicker = null;
+        for (const r of active) r.element.remove();
+        active.length = 0;
+        layer.remove();
+        restore();
+      }
+    };
+  }
+});
+
+// src/behaviours/index.ts
+var behaviours = {
+  magnetic,
+  tilt,
+  marquee,
+  "split-text": splitText,
+  "scroll-reveal": scrollReveal,
+  parallax,
+  ripple
+};
+
+export { behaviours, captureStyles, defineBehaviour, getSplitResult, magnetic, marquee, mountBehaviour, parallax, ripple, scrollReveal, split, splitText, stagger, staggerDuration, tilt };
+//# sourceMappingURL=chunk-C6XPQO2O.js.map
+//# sourceMappingURL=chunk-C6XPQO2O.js.map