@leavepulse/ui 0.24.0 → 0.25.0

package/dist/components/chart.js

@@ -0,0 +1,353 @@
+const plotWidth = (b) => Math.max(0, b.width - b.left - b.right);
+const plotHeight = (b) => Math.max(0, b.height - b.top - b.bottom);
+const CHART_PALETTE = [
+  "var(--color-brand)",
+  "var(--color-action)",
+  "var(--color-accent)",
+  "var(--color-danger)",
+  "var(--color-muted-strong)"
+];
+const valueOf = (d) => d == null ? null : typeof d === "number" ? d : d.y;
+const normalise = (series) => series.map((s, i) => ({
+  name: s.name,
+  color: s.color ?? CHART_PALETTE[i % CHART_PALETTE.length],
+  dashed: s.dashed ?? false,
+  axis: s.axis ?? "left",
+  values: s.data.map(valueOf)
+}));
+const resolveLabels = (series, labels, count) => Array.from({ length: count }, (_, i) => {
+  for (const s of series) {
+    const d = s.data[i];
+    if (d && typeof d !== "number" && d.x != null) return d.x;
+  }
+  return labels?.[i] ?? String(i + 1);
+});
+const pointCount = (series) => series.reduce((n, s) => Math.max(n, s.values.length), 0);
+const niceScale = (min, max, ticks) => {
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return { min: 0, max: 1, step: 1 };
+  if (min === max) {
+    const pad = Math.abs(min) || 1;
+    min -= pad / 2;
+    max += pad / 2;
+  }
+  const raw = (max - min) / Math.max(1, ticks);
+  const mag = 10 ** Math.floor(Math.log10(raw));
+  const norm = raw / mag;
+  const step = (norm >= 5 ? 10 : norm >= 2 ? 5 : norm >= 1 ? 2 : 1) * mag;
+  return { min: Math.floor(min / step) * step, max: Math.ceil(max / step) * step, step };
+};
+const axisTicks = (min, max, step) => {
+  const out = [];
+  if (!(step > 0)) return [min, max];
+  for (let v = min; v <= max + step / 2; v += step) out.push(Number(v.toFixed(10)));
+  return out;
+};
+const extent = (series, includeZero) => {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const s of series)
+    for (const v of s.values) {
+      if (v == null) continue;
+      if (v < min) min = v;
+      if (v > max) max = v;
+    }
+  if (min === Infinity) return { min: 0, max: 1 };
+  if (includeZero) {
+    min = Math.min(min, 0);
+    max = Math.max(max, 0);
+  }
+  return { min, max };
+};
+const xAt = (i, count, box, banded) => {
+  const w = plotWidth(box);
+  if (banded) return box.left + w / Math.max(1, count) * (i + 0.5);
+  if (count <= 1) return box.left + w / 2;
+  return box.left + w / (count - 1) * i;
+};
+const yAt = (v, min, max, box) => {
+  const h = plotHeight(box);
+  const span = max - min || 1;
+  return box.top + h - (v - min) / span * h;
+};
+const runs = (values, count) => {
+  const out = [];
+  let cur = [];
+  for (let i = 0; i < count; i++) {
+    if (values[i] == null) {
+      if (cur.length) out.push(cur);
+      cur = [];
+    } else cur.push(i);
+  }
+  if (cur.length) out.push(cur);
+  return out;
+};
+const smoothSegment = (pts, tension) => {
+  let d = `M${pts[0].x},${pts[0].y}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] ?? pts[i];
+    const p1 = pts[i];
+    const p2 = pts[i + 1];
+    const p3 = pts[i + 2] ?? p2;
+    const c1x = p1.x + (p2.x - p0.x) / 6 * tension;
+    const c2x = p2.x - (p3.x - p1.x) / 6 * tension;
+    let c1y = p1.y + (p2.y - p0.y) / 6 * tension;
+    let c2y = p2.y - (p3.y - p1.y) / 6 * tension;
+    const lo = Math.min(p1.y, p2.y);
+    const hi = Math.max(p1.y, p2.y);
+    c1y = Math.min(hi, Math.max(lo, c1y));
+    c2y = Math.min(hi, Math.max(lo, c2y));
+    d += `C${c1x},${c1y} ${c2x},${c2y} ${p2.x},${p2.y}`;
+  }
+  return d;
+};
+const segmentPath = (idx, values, s, smooth) => {
+  const pts = idx.map((i) => ({
+    x: xAt(i, s.count, s.box, s.banded),
+    y: yAt(values[i], s.min, s.max, s.box)
+  }));
+  if (pts.length === 1) return `M${pts[0].x},${pts[0].y}L${pts[0].x},${pts[0].y}`;
+  if (smooth > 0) return smoothSegment(pts, smooth);
+  return pts.map((p, i) => `${i ? "L" : "M"}${p.x},${p.y}`).join("");
+};
+const linePath = (values, s, smooth) => runs(values, s.count).map((idx) => segmentPath(idx, values, s, smooth)).join(" ");
+const areaPath = (values, s, smooth) => {
+  const base = yAt(Math.max(s.min, Math.min(s.max, 0)), s.min, s.max, s.box);
+  return runs(values, s.count).map((idx) => {
+    const d = segmentPath(idx, values, s, smooth);
+    const x0 = xAt(idx[0], s.count, s.box, s.banded);
+    const x1 = xAt(idx[idx.length - 1], s.count, s.box, s.banded);
+    return `${d}L${x1},${base}L${x0},${base}Z`;
+  }).join(" ");
+};
+const nearestIndex = (px, s) => {
+  if (s.count === 0) return -1;
+  let best = 0;
+  let bestDist = Infinity;
+  for (let i = 0; i < s.count; i++) {
+    const d = Math.abs(xAt(i, s.count, s.box, s.banded) - px);
+    if (d < bestDist) {
+      bestDist = d;
+      best = i;
+    }
+  }
+  return best;
+};
+const barPath = (x, y, w, h, r, round) => {
+  const k = Math.max(0, Math.min(r, w / 2, h / 2));
+  const rt = round.top ? k : 0;
+  const rb = round.bottom ? k : 0;
+  return [
+    `M${x},${y + rt}`,
+    rt ? `A${rt},${rt} 0 0 1 ${x + rt},${y}` : `L${x},${y}`,
+    `L${x + w - rt},${y}`,
+    rt ? `A${rt},${rt} 0 0 1 ${x + w},${y + rt}` : "",
+    `L${x + w},${y + h - rb}`,
+    rb ? `A${rb},${rb} 0 0 1 ${x + w - rb},${y + h}` : `L${x + w},${y + h}`,
+    `L${x + rb},${y + h}`,
+    rb ? `A${rb},${rb} 0 0 1 ${x},${y + h - rb}` : "",
+    "Z"
+  ].filter(Boolean).join("");
+};
+const resolveSlices = (slices, max, otherLabel, preserveOrder = true) => {
+  const usable = slices.filter((s) => Number.isFinite(s.value) && s.value > 0);
+  const total = usable.reduce((sum, s) => sum + s.value, 0);
+  if (!total) return { slices: [], total: 0 };
+  const coloured = usable.map((s) => ({
+    ...s,
+    color: s.color ?? CHART_PALETTE[slices.indexOf(s) % CHART_PALETTE.length]
+  }));
+  const ranked = [...coloured].sort((a, b) => b.value - a.value);
+  const collapse = max != null && max > 0 && ranked.length > max;
+  const keptRanked = collapse ? ranked.slice(0, max - 1) : ranked;
+  const tail = collapse ? ranked.slice(max - 1) : [];
+  const kept = preserveOrder ? coloured.filter((s) => keptRanked.includes(s)) : keptRanked;
+  const out = kept.map((s) => ({
+    label: s.label,
+    value: s.value,
+    color: s.color,
+    fraction: s.value / total,
+    isOther: false,
+    count: 1
+  }));
+  if (tail.length) {
+    const value = tail.reduce((sum, s) => sum + s.value, 0);
+    out.push({
+      label: otherLabel,
+      value,
+      color: "var(--color-line-strong)",
+      fraction: value / total,
+      isOther: true,
+      count: tail.length
+    });
+  }
+  return { slices: out, total };
+};
+const arcPath = (cx, cy, outer, inner, startAngle, endAngle, corner = 0) => {
+  const full = endAngle - startAngle >= Math.PI * 2 - 1e-9;
+  if (full) {
+    const mid = startAngle + Math.PI;
+    return arcPath(cx, cy, outer, inner, startAngle, mid) + arcPath(cx, cy, outer, inner, mid, startAngle + Math.PI * 2);
+  }
+  const at = (r, a) => `${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`;
+  const large = endAngle - startAngle > Math.PI ? 1 : 0;
+  if (corner <= 0) {
+    if (inner <= 0) {
+      return [
+        `M${cx},${cy}`,
+        `L${at(outer, startAngle)}`,
+        `A${outer},${outer} 0 ${large} 1 ${at(outer, endAngle)}`,
+        "Z"
+      ].join("");
+    }
+    return [
+      `M${at(outer, startAngle)}`,
+      `A${outer},${outer} 0 ${large} 1 ${at(outer, endAngle)}`,
+      `L${at(inner, endAngle)}`,
+      `A${inner},${inner} 0 ${large} 0 ${at(inner, startAngle)}`,
+      "Z"
+    ].join("");
+  }
+  const band = inner > 0 ? outer - inner : outer;
+  const sweep = endAngle - startAngle;
+  const rOuter = Math.min(corner, band / 2, sweep * outer / 4);
+  const rInner = inner > 0 ? Math.min(corner, band / 2, sweep * inner / 4) : 0;
+  const aOuter = rOuter / outer;
+  const aInner = inner > 0 ? rInner / inner : 0;
+  const outerIn = outer - rOuter;
+  const innerOut = inner + rInner;
+  const oStart = startAngle + aOuter;
+  const oEnd = endAngle - aOuter;
+  const iStart = startAngle + aInner;
+  const iEnd = endAngle - aInner;
+  if (inner <= 0) {
+    const tip = Math.min(corner, sweep * outer / 6);
+    if (tip <= 0.25) {
+      return [
+        `M${cx},${cy}`,
+        `L${at(outerIn, startAngle)}`,
+        `A${rOuter},${rOuter} 0 0 1 ${at(outer, oStart)}`,
+        `A${outer},${outer} 0 ${oEnd - oStart > Math.PI ? 1 : 0} 1 ${at(outer, oEnd)}`,
+        `A${rOuter},${rOuter} 0 0 1 ${at(outerIn, endAngle)}`,
+        "Z"
+      ].join("");
+    }
+    return [
+      `M${at(tip, startAngle)}`,
+      `L${at(outerIn, startAngle)}`,
+      `A${rOuter},${rOuter} 0 0 1 ${at(outer, oStart)}`,
+      `A${outer},${outer} 0 ${oEnd - oStart > Math.PI ? 1 : 0} 1 ${at(outer, oEnd)}`,
+      `A${rOuter},${rOuter} 0 0 1 ${at(outerIn, endAngle)}`,
+      `L${at(tip, endAngle)}`,
+      `A${tip},${tip} 0 0 0 ${at(tip, startAngle)}`,
+      "Z"
+    ].join("");
+  }
+  return [
+    `M${at(outerIn, startAngle)}`,
+    `A${rOuter},${rOuter} 0 0 1 ${at(outer, oStart)}`,
+    `A${outer},${outer} 0 ${oEnd - oStart > Math.PI ? 1 : 0} 1 ${at(outer, oEnd)}`,
+    `A${rOuter},${rOuter} 0 0 1 ${at(outerIn, endAngle)}`,
+    `L${at(innerOut, endAngle)}`,
+    `A${rInner},${rInner} 0 0 1 ${at(inner, iEnd)}`,
+    `A${inner},${inner} 0 ${iEnd - iStart > Math.PI ? 1 : 0} 0 ${at(inner, iStart)}`,
+    `A${rInner},${rInner} 0 0 1 ${at(innerOut, startAngle)}`,
+    "Z"
+  ].join("");
+};
+const calloutLabels = (angles, cx, cy, radius, elbow, run, spacing, height) => {
+  const sides = {
+    left: [],
+    right: []
+  };
+  const fits = Math.max(1, Math.floor(height / spacing));
+  const ordered = [...angles].sort(
+    (p, q) => Math.abs(Math.cos(q.mid)) - Math.abs(Math.cos(p.mid))
+  );
+  for (const a of ordered) {
+    const natural = Math.cos(a.mid) >= 0 ? "right" : "left";
+    const other = natural === "right" ? "left" : "right";
+    const side = sides[natural].length >= fits && sides[other].length < fits ? other : natural;
+    sides[side].push({ ...a, y: cy + Math.sin(a.mid) * (radius + elbow) });
+  }
+  const out = [];
+  for (const side of ["left", "right"]) {
+    const rank = (mid) => {
+      let a = mid;
+      while (a < -Math.PI / 2) a += Math.PI * 2;
+      while (a >= 3 * Math.PI / 2) a -= Math.PI * 2;
+      return side === "right" ? a : -a;
+    };
+    const list = sides[side].sort((p, q) => rank(p.mid) - rank(q.mid));
+    const top = spacing / 2;
+    const bottom = height - spacing / 2;
+    for (let pass = 0; pass < 24; pass++) {
+      let moved = false;
+      for (let i = 0; i < list.length - 1; i++) {
+        const gap = list[i + 1].y - list[i].y;
+        if (gap >= spacing) continue;
+        const push = (spacing - gap) / 2;
+        list[i].y -= push;
+        list[i + 1].y += push;
+        moved = true;
+      }
+      list[0].y = Math.max(list[0].y, top);
+      list[list.length - 1].y = Math.min(list[list.length - 1].y, bottom);
+      if (!moved) break;
+    }
+    let cursor = top;
+    for (const item of list) {
+      item.y = Math.max(item.y, cursor);
+      cursor = item.y + spacing;
+    }
+    let limit = bottom;
+    for (let i = list.length - 1; i >= 0; i--) {
+      list[i].y = Math.min(list[i].y, limit);
+      limit = list[i].y - spacing;
+    }
+    list.forEach((item, rank2) => {
+      const dir = side === "right" ? 1 : -1;
+      const stagger = elbow + rank2 * 1.6;
+      const startX = cx + Math.cos(item.mid) * radius;
+      const startY = cy + Math.sin(item.mid) * radius;
+      const outX = cx + Math.cos(item.mid) * (radius + stagger);
+      const outY = cy + Math.sin(item.mid) * (radius + stagger);
+      const endX = cx + dir * (radius + elbow + run);
+      out.push({
+        index: item.index,
+        side,
+        points: `${startX},${startY} ${outX},${outY} ${endX},${item.y}`,
+        x: endX + dir * 4,
+        y: item.y
+      });
+    });
+  }
+  return out;
+};
+const formatTick = (v) => {
+  const abs = Math.abs(v);
+  if (abs >= 1e9) return `${Number((v / 1e9).toFixed(1))}B`;
+  if (abs >= 1e6) return `${Number((v / 1e6).toFixed(1))}M`;
+  if (abs >= 1e3) return `${Number((v / 1e3).toFixed(1))}k`;
+  return String(Number(v.toFixed(2)));
+};
+export {
+  CHART_PALETTE,
+  arcPath,
+  areaPath,
+  axisTicks,
+  barPath,
+  calloutLabels,
+  extent,
+  formatTick,
+  linePath,
+  nearestIndex,
+  niceScale,
+  normalise,
+  plotHeight,
+  plotWidth,
+  pointCount,
+  resolveLabels,
+  resolveSlices,
+  xAt,
+  yAt
+};

package/dist/composables/easing.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Does the OS ask for less motion?
+ *
+ * Written out in eight places before this, in two different shapes — some
+ * guarded against SSR, some not, which is a crash in a Nuxt app rather than a
+ * style difference. Anything that animates asks here.
+ *
+ * A plain function, not a reactive composable: it is read at the moment an
+ * animation starts, and a component that also needs to RE-RENDER when the
+ * setting changes mid-session should use motion-v's `useReducedMotion`.
+ */
+export declare const prefersReducedMotion: () => boolean;
+/**
+ * A motion token's value, for an API that cannot take a `var()`.
+ *
+ * The Web Animations API and SVG's SMIL both want a literal easing string, so
+ * three call sites had `cubic-bezier(0.2, 0, 0, 1)` typed out — the value of
+ * `--ease-emphasized`, copied. A theme that retuned the token moved everything
+ * except those, and nothing said they were meant to match.
+ *
+ * Reading the custom property keeps them themeable. The fallback covers SSR and
+ * the frame before tokens are applied.
+ */
+export declare const easingToken: (name: "ease-emphasized" | "ease-travel" | "ease-settle", fallback?: string) => string;
+/**
+ * Comes to rest — `--ease-settle`'s shape without the overshoot.
+ *
+ * Gently decelerating: the value keeps moving visibly for most of the travel
+ * instead of arriving early and then creeping. Use it wherever a figure counts
+ * up to something, so the digits keep turning across the whole duration.
+ */
+export declare const easeOut: (t: number) => number;
+/**
+ * Travels a distance the eye follows — the JS form of `--ease-travel`.
+ *
+ * Nearly linear, and deliberately so: an ease-out spends about half its
+ * duration covering the last tenth of the path, so a stroke or sweep animated
+ * with one flashes past and then visibly creeps. Use this wherever the journey
+ * is the content — a line drawing itself, a wipe crossing a plot, a circle
+ * sweeping open.
+ *
+ * The ease is applied only near the ends, and the finish is NOT flattened onto
+ * the target: the motion is still moving when it lands, which is what keeps
+ * the tail short.
+ */
+export declare const easeTravel: (t: number) => number;

package/dist/composables/easing.js

@@ -0,0 +1,23 @@
+const prefersReducedMotion = () => typeof window !== "undefined" && (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false);
+const easingToken = (name, fallback = "cubic-bezier(0.2, 0, 0, 1)") => {
+  if (typeof window === "undefined" || !window.getComputedStyle) return fallback;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
+  return value || fallback;
+};
+const easeOut = (t) => 1 - (1 - t) ** 2;
+const easeTravel = (t) => {
+  const EDGE = 0.2;
+  if (t < EDGE) return t * t / (2 * EDGE) + t * 0.1;
+  if (t > 1 - EDGE) {
+    const r = 1 - t;
+    return 1 - (r * r / (2 * EDGE) + r * 0.1);
+  }
+  const head = EDGE * EDGE / (2 * EDGE) + EDGE * 0.1;
+  return head + (t - EDGE) / (1 - 2 * EDGE) * (1 - 2 * head);
+};
+export {
+  easeOut,
+  easeTravel,
+  easingToken,
+  prefersReducedMotion
+};

package/dist/composables/usePillTransition.d.ts

@@ -6,4 +6,16 @@ export type PillTransition = {
     stiffness: number;
     damping: number;
 };
-export declare function usePillTransition(): ComputedRef<PillTransition>;
+export type PillFeel = "pill" | "float";
+export declare function usePillTransition(feel?: PillFeel): ComputedRef<PillTransition>;
+export interface SpringState {
+    /** Current position; seed it with the start value. */
+    value: number;
+    /** Current velocity; seed with 0. */
+    velocity: number;
+}
+export declare function springStep(state: SpringState, target: number, feel?: PillFeel, 
+/** Frame time in seconds; clamped so a backgrounded tab can't explode it. */
+dt?: number): SpringState;
+/** True once a spring is close enough to its target to stop animating. */
+export declare const springSettled: (state: SpringState, target: number) => boolean;

package/dist/composables/usePillTransition.js

@@ -1,11 +1,31 @@
 import { useReducedMotion } from "motion-v";
 import { computed } from "vue";
-function usePillTransition() {
+const SPRING = {
+  pill: { type: "spring", stiffness: 520, damping: 40 },
+  float: { type: "spring", stiffness: 210, damping: 26 }
+};
+function usePillTransition(feel = "pill") {
   const reduceMotion = useReducedMotion();
   return computed(
-    () => reduceMotion.value ? { duration: 0 } : { type: "spring", stiffness: 520, damping: 40 }
+    () => reduceMotion.value ? { duration: 0 } : SPRING[feel]
   );
 }
+const STEP_SPRING = {
+  // Critically damped: reaches the target quickly, never past it.
+  pill: { stiffness: 420, damping: 41 },
+  float: { stiffness: 260, damping: 32 }
+};
+function springStep(state, target, feel = "float", dt = 1 / 60) {
+  const { stiffness, damping } = STEP_SPRING[feel];
+  const step = Math.min(dt, 1 / 30);
+  const force = (target - state.value) * stiffness;
+  const drag = state.velocity * damping;
+  const velocity = state.velocity + (force - drag) * step;
+  return { value: state.value + velocity * step, velocity };
+}
+const springSettled = (state, target) => Math.abs(target - state.value) < 0.3 && Math.abs(state.velocity) < 0.3;
 export {
+  springSettled,
+  springStep,
   usePillTransition
 };

package/dist/composables/useReveal.d.ts

@@ -0,0 +1,26 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+export interface UseRevealOptions {
+    /**
+     * Skip the wait and reveal at once. For a caller that has switched its
+     * entrance off — there is nothing to gate, and holding content back for an
+     * observer that no longer guards anything only delays the first paint.
+     */
+    immediate?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Fraction of the element that must be on screen. A sliver of a tall chart
+     * scrolling into view is not yet an arrival; a quarter of it is.
+     */
+    threshold?: number;
+    /**
+     * Grow the viewport for the test, so an element just past the fold starts
+     * drawing as it is scrolled toward rather than after it lands.
+     */
+    rootMargin?: string;
+}
+export interface UseReveal {
+    /** Attach to the element whose appearance starts the animation. */
+    el: Ref<Element | null>;
+    /** False until that element has been seen; true forever after. */
+    revealed: Ref<boolean>;
+}
+export declare function useReveal(options?: UseRevealOptions): UseReveal;

package/dist/composables/useReveal.js

@@ -0,0 +1,45 @@
+import { ref, watch, toValue, onBeforeUnmount } from "vue";
+import { prefersReducedMotion } from "./easing.js";
+function useReveal(options = {}) {
+  const { threshold = 0.25, rootMargin = "0px 0px -10% 0px" } = options;
+  const el = ref(null);
+  const revealed = ref(typeof window === "undefined");
+  let observer = null;
+  function stop() {
+    observer?.disconnect();
+    observer = null;
+  }
+  function reveal() {
+    revealed.value = true;
+    stop();
+  }
+  watch(
+    [el, () => toValue(options.immediate)],
+    ([node, immediate]) => {
+      if (revealed.value) return;
+      if (immediate || prefersReducedMotion()) {
+        reveal();
+        return;
+      }
+      stop();
+      if (!node) return;
+      if (typeof IntersectionObserver === "undefined") {
+        reveal();
+        return;
+      }
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((entry) => entry.isIntersecting)) reveal();
+        },
+        { threshold, rootMargin }
+      );
+      observer.observe(node);
+    },
+    { immediate: true, flush: "post" }
+  );
+  onBeforeUnmount(stop);
+  return { el, revealed };
+}
+export {
+  useReveal
+};

package/dist/composables/useSettled.js

@@ -1,4 +1,5 @@
 import { ref, watch, toValue, onScopeDispose } from "vue";
+import { prefersReducedMotion } from "./easing.js";
 const SETTLE_MS = 260;
 function useSettled(open, options = {}) {
   const settled = ref(false);
@@ -18,8 +19,7 @@ function useSettled(open, options = {}) {
         return;
       }
       settled.value = false;
-      const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-      const wait = reduced ? 0 : toValue(options.delay) ?? SETTLE_MS;
+      const wait = prefersReducedMotion() ? 0 : toValue(options.delay) ?? SETTLE_MS;
       timer = setTimeout(() => {
         settled.value = true;
         timer = void 0;

package/dist/composables/useShift.js

@@ -1,4 +1,5 @@
 import { ref, watch, toValue, onBeforeUnmount } from "vue";
+import { prefersReducedMotion } from "./easing.js";
 const TWEEN_MS = 160;
 function useShift(options = {}) {
   const el = ref(null);
@@ -14,9 +15,6 @@ function useShift(options = {}) {
   const axisOf = () => toValue(options.axis) ?? "height";
   const wantsHeight = () => axisOf() !== "width";
   const wantsWidth = () => axisOf() !== "height";
-  function reducedMotion() {
-    return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-  }
   function retune() {
     const node = el.value;
     if (!node) return;
@@ -48,7 +46,7 @@ function useShift(options = {}) {
     inFlight = true;
     resizing.value = true;
     clearTimeout(settleTimer);
-    const wait = reducedMotion() ? 0 : toValue(options.duration) ?? TWEEN_MS;
+    const wait = prefersReducedMotion() ? 0 : toValue(options.duration) ?? TWEEN_MS;
     settleTimer = setTimeout(() => {
       inFlight = false;
       resizing.value = false;

package/dist/index.d.ts

@@ -14,6 +14,10 @@ export type { Crumb } from './components/LpBreadcrumbs.vue';
 export { default as LpButton } from './components/LpButton.vue';
 export { default as LpCalendar } from './components/LpCalendar.vue';
 export { default as LpCard } from './components/LpCard.vue';
+export { default as LpChart } from './components/LpChart.vue';
+export type { ChartPointEvent } from './components/LpChart.vue';
+export { CHART_PALETTE, axisTicks, formatTick, niceScale, } from './components/chart';
+export type { ChartAxis, ChartPoint, ChartSeries } from './components/chart';
 export { default as LpCheckbox } from './components/LpCheckbox.vue';
 export { default as LpCodeBlock } from './components/LpCodeBlock.vue';
 export type { CodeLang } from './components/codeHighlight';
@@ -48,9 +52,14 @@ export { default as LpModal } from './components/LpModal.vue';
 export { default as LpNotificationBell } from './components/LpNotificationBell.vue';
 export type { NotificationItem, NotificationLabels, } from './components/LpNotificationBell.vue';
 export { default as LpNumberField } from './components/LpNumberField.vue';
+export { default as LpNumberFlow } from './components/LpNumberFlow.vue';
 export { default as LpOtpInput } from './components/LpOtpInput.vue';
 export { default as LpPagination } from './components/LpPagination.vue';
 export { default as LpPasswordInput } from './components/LpPasswordInput.vue';
+export { default as LpPie } from './components/LpPie.vue';
+export type { SliceEvent } from './components/LpPie.vue';
+export { resolveSlices } from './components/chart';
+export type { PieSlice, ResolvedSlice } from './components/chart';
 export { default as LpPhoneInput } from './components/LpPhoneInput.vue';
 export type { PhoneDetail } from './components/LpPhoneInput.vue';
 export { flagEmoji, loadCountries, matchCountryByValue } from './components/countries';
@@ -60,6 +69,7 @@ export { default as LpProgress } from './components/LpProgress.vue';
 export { default as LpRadio } from './components/LpRadio.vue';
 export { default as LpRadioGroup } from './components/LpRadioGroup.vue';
 export type { RadioOption } from './components/LpRadioGroup.vue';
+export { default as LpRollingText } from './components/LpRollingText.vue';
 export { default as LpScrollArea } from './components/LpScrollArea.vue';
 export { default as LpSegmented } from './components/LpSegmented.vue';
 export type { SegmentedOption } from './components/LpSegmented.vue';
@@ -74,6 +84,7 @@ export { default as LpSidebar } from './components/LpSidebar.vue';
 export type { SidebarItem, SidebarSection } from './components/LpSidebar.vue';
 export { default as LpSkeleton } from './components/LpSkeleton.vue';
 export { default as LpSlider } from './components/LpSlider.vue';
+export { default as LpSparkline } from './components/LpSparkline.vue';
 export { default as LpStat } from './components/LpStat.vue';
 export { default as LpStepper } from './components/LpStepper.vue';
 export type { Step } from './components/LpStepper.vue';
@@ -114,6 +125,9 @@ export { useHotkeys, isAppleKeyboard, appleModifierLabel } from './composables/u
 export type { HotkeyBinding } from './composables/useHotkeys';
 export { useInputFilter } from './composables/useInputFilter';
 export type { UseInputFilterOptions } from './composables/useInputFilter';
+export { easeOut, easeTravel, easingToken, prefersReducedMotion } from './composables/easing';
+export { useReveal } from './composables/useReveal';
+export type { UseReveal, UseRevealOptions } from './composables/useReveal';
 export { useRovingFocus } from './composables/useRovingFocus';
 export type { RovingItem, UseRovingFocusOptions } from './composables/useRovingFocus';
 export { useSettled } from './composables/useSettled';