solid-drift 0.2.0 → 0.8.0

package/dist/color.js

@@ -0,0 +1,391 @@
+import { resolveEasing } from "./easing.js";
+function clamp01(v) {
+    return v < 0 ? 0 : v > 1 ? 1 : v;
+}
+/** sRGB channel (0 to 1) to linear light. */
+function srgbToLinear(c) {
+    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+/** Linear light channel (0 to 1) back to sRGB. */
+function linearToSrgb(c) {
+    return c <= 0.0031308
+        ? 12.92 * c
+        : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+/** Round to at most 4 decimals so values like 0.30000000000000004 never leak. */
+function fmtNum(v) {
+    return String(Math.round(v * 10000) / 10000);
+}
+function failColor(input) {
+    throw new Error(`[solid-drift] could not parse color "${input}". ` +
+        "Use hex (#rgb, #rrggbb), rgb()/rgba(), hsl()/hsla(), or a CSS color name.");
+}
+function parseHexColor(raw) {
+    const hex = raw.slice(1);
+    if (!/^[0-9a-f]+$/.test(hex))
+        failColor(raw);
+    const pair = (s) => parseInt(s, 16);
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    let a = 1;
+    if (hex.length === 3 || hex.length === 4) {
+        const d = (c) => pair(c + c);
+        r = d(hex[0]);
+        g = d(hex[1]);
+        b = d(hex[2]);
+        if (hex.length === 4)
+            a = d(hex[3]) / 255;
+    }
+    else if (hex.length === 6 || hex.length === 8) {
+        r = pair(hex.slice(0, 2));
+        g = pair(hex.slice(2, 4));
+        b = pair(hex.slice(4, 6));
+        if (hex.length === 8)
+            a = pair(hex.slice(6, 8)) / 255;
+    }
+    else {
+        failColor(raw);
+    }
+    return {
+        r: srgbToLinear(r / 255),
+        g: srgbToLinear(g / 255),
+        b: srgbToLinear(b / 255),
+        a,
+    };
+}
+/** Split the inside of a rgb()/hsl() call into its 3 or 4 components. */
+function splitColorArgs(inner) {
+    return inner
+        .replace(/\//g, " ")
+        .split(/[\s,]+/)
+        .filter((part) => part.length > 0);
+}
+function parseAlpha(part) {
+    if (part.endsWith("%"))
+        return clamp01(parseFloat(part) / 100);
+    return clamp01(parseFloat(part));
+}
+function parseRgbChannel(part) {
+    if (part.endsWith("%"))
+        return clamp01(parseFloat(part) / 100);
+    return clamp01(parseFloat(part) / 255);
+}
+function parseRgbColor(raw) {
+    const inner = raw.slice(raw.indexOf("(") + 1, raw.lastIndexOf(")"));
+    const parts = splitColorArgs(inner);
+    if (parts.length < 3 || parts.length > 4)
+        failColor(raw);
+    const [r, g, b] = parts.map(parseRgbChannel);
+    const a = parts.length === 4 ? parseAlpha(parts[3]) : 1;
+    return {
+        r: srgbToLinear(r),
+        g: srgbToLinear(g),
+        b: srgbToLinear(b),
+        a,
+    };
+}
+function parseHue(part) {
+    let h = parseFloat(part);
+    if (part.endsWith("turn"))
+        h *= 360;
+    // Bare numbers and "deg" are degrees; wrap negative values around.
+    return ((h % 360) + 360) % 360;
+}
+function parsePercent(part) {
+    return clamp01(parseFloat(part) / 100);
+}
+function hslToRgb(h, s, l) {
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = l - c / 2;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (h < 60) {
+        r = c;
+        g = x;
+    }
+    else if (h < 120) {
+        r = x;
+        g = c;
+    }
+    else if (h < 180) {
+        g = c;
+        b = x;
+    }
+    else if (h < 240) {
+        g = x;
+        b = c;
+    }
+    else if (h < 300) {
+        r = x;
+        b = c;
+    }
+    else {
+        r = c;
+        b = x;
+    }
+    return [r + m, g + m, b + m];
+}
+function parseHslColor(raw) {
+    const inner = raw.slice(raw.indexOf("(") + 1, raw.lastIndexOf(")"));
+    const parts = splitColorArgs(inner);
+    if (parts.length < 3 || parts.length > 4)
+        failColor(raw);
+    const h = parseHue(parts[0]);
+    const s = parsePercent(parts[1]);
+    const l = parsePercent(parts[2]);
+    const a = parts.length === 4 ? parseAlpha(parts[3]) : 1;
+    const [r, g, b] = hslToRgb(h, s, l);
+    return {
+        r: srgbToLinear(r),
+        g: srgbToLinear(g),
+        b: srgbToLinear(b),
+        a,
+    };
+}
+/** The 148 CSS named colors, stored as hex. */
+const NAMED_COLORS = {
+    aliceblue: "#f0f8ff",
+    antiquewhite: "#faebd7",
+    aqua: "#00ffff",
+    aquamarine: "#7fffd4",
+    azure: "#f0ffff",
+    beige: "#f5f5dc",
+    bisque: "#ffe4c4",
+    black: "#000000",
+    blanchedalmond: "#ffebcd",
+    blue: "#0000ff",
+    blueviolet: "#8a2be2",
+    brown: "#a52a2a",
+    burlywood: "#deb887",
+    cadetblue: "#5f9ea0",
+    chartreuse: "#7fff00",
+    chocolate: "#d2691e",
+    coral: "#ff7f50",
+    cornflowerblue: "#6495ed",
+    cornsilk: "#fff8dc",
+    crimson: "#dc143c",
+    cyan: "#00ffff",
+    darkblue: "#00008b",
+    darkcyan: "#008b8b",
+    darkgoldenrod: "#b8860b",
+    darkgray: "#a9a9a9",
+    darkgrey: "#a9a9a9",
+    darkgreen: "#006400",
+    darkkhaki: "#bdb76b",
+    darkmagenta: "#8b008b",
+    darkolivegreen: "#556b2f",
+    darkorange: "#ff8c00",
+    darkorchid: "#9932cc",
+    darkred: "#8b0000",
+    darksalmon: "#e9967a",
+    darkseagreen: "#8fbc8f",
+    darkslateblue: "#483d8b",
+    darkslategray: "#2f4f4f",
+    darkslategrey: "#2f4f4f",
+    darkturquoise: "#00ced1",
+    darkviolet: "#9400d3",
+    deeppink: "#ff1493",
+    deepskyblue: "#00bfff",
+    dimgray: "#696969",
+    dimgrey: "#696969",
+    dodgerblue: "#1e90ff",
+    firebrick: "#b22222",
+    floralwhite: "#fffaf0",
+    forestgreen: "#228b22",
+    fuchsia: "#ff00ff",
+    gainsboro: "#dcdcdc",
+    ghostwhite: "#f8f8ff",
+    gold: "#ffd700",
+    goldenrod: "#daa520",
+    gray: "#808080",
+    grey: "#808080",
+    green: "#008000",
+    greenyellow: "#adff2f",
+    honeydew: "#f0fff0",
+    hotpink: "#ff69b4",
+    indianred: "#cd5c5c",
+    indigo: "#4b0082",
+    ivory: "#fffff0",
+    khaki: "#f0e68c",
+    lavender: "#e6e6fa",
+    lavenderblush: "#fff0f5",
+    lawngreen: "#7cfc00",
+    lemonchiffon: "#fffacd",
+    lightblue: "#add8e6",
+    lightcoral: "#f08080",
+    lightcyan: "#e0ffff",
+    lightgoldenrodyellow: "#fafad2",
+    lightgray: "#d3d3d3",
+    lightgrey: "#d3d3d3",
+    lightgreen: "#90ee90",
+    lightpink: "#ffb6c1",
+    lightsalmon: "#ffa07a",
+    lightseagreen: "#20b2aa",
+    lightskyblue: "#87cefa",
+    lightslategray: "#778899",
+    lightslategrey: "#778899",
+    lightsteelblue: "#b0c4de",
+    lightyellow: "#ffffe0",
+    lime: "#00ff00",
+    limegreen: "#32cd32",
+    linen: "#faf0e6",
+    magenta: "#ff00ff",
+    maroon: "#800000",
+    mediumaquamarine: "#66cdaa",
+    mediumblue: "#0000cd",
+    mediumorchid: "#ba55d3",
+    mediumpurple: "#9370db",
+    mediumseagreen: "#3cb371",
+    mediumslateblue: "#7b68ee",
+    mediumspringgreen: "#00fa9a",
+    mediumturquoise: "#48d1cc",
+    mediumvioletred: "#c71585",
+    midnightblue: "#191970",
+    mintcream: "#f5fffa",
+    mistyrose: "#ffe4e1",
+    moccasin: "#ffe4b5",
+    navajowhite: "#ffdead",
+    navy: "#000080",
+    oldlace: "#fdf5e6",
+    olive: "#808000",
+    olivedrab: "#6b8e23",
+    orange: "#ffa500",
+    orangered: "#ff4500",
+    orchid: "#da70d6",
+    palegoldenrod: "#eee8aa",
+    palegreen: "#98fb98",
+    paleturquoise: "#afeeee",
+    palevioletred: "#db7093",
+    papayawhip: "#ffefd5",
+    peachpuff: "#ffdab9",
+    peru: "#cd853f",
+    pink: "#ffc0cb",
+    plum: "#dda0dd",
+    powderblue: "#b0e0e6",
+    purple: "#800080",
+    rebeccapurple: "#663399",
+    red: "#ff0000",
+    rosybrown: "#bc8f8f",
+    royalblue: "#4169e1",
+    saddlebrown: "#8b4513",
+    salmon: "#fa8072",
+    sandybrown: "#f4a460",
+    seagreen: "#2e8b57",
+    seashell: "#fff5ee",
+    sienna: "#a0522d",
+    silver: "#c0c0c0",
+    skyblue: "#87ceeb",
+    slateblue: "#6a5acd",
+    slategray: "#708090",
+    slategrey: "#708090",
+    snow: "#fffafa",
+    springgreen: "#00ff7f",
+    steelblue: "#4682b4",
+    tan: "#d2b48c",
+    teal: "#008080",
+    thistle: "#d8bfd8",
+    tomato: "#ff6347",
+    turquoise: "#40e0d0",
+    violet: "#ee82ee",
+    wheat: "#f5deb3",
+    white: "#ffffff",
+    whitesmoke: "#f5f5f5",
+    yellow: "#ffff00",
+    yellowgreen: "#9acd32",
+};
+/** Parse any supported CSS color into linear RGB plus alpha. */
+export function parseColor(input) {
+    const raw = input.trim().toLowerCase();
+    if (raw.startsWith("#"))
+        return parseHexColor(raw);
+    if (raw.startsWith("rgb"))
+        return parseRgbColor(raw);
+    if (raw.startsWith("hsl"))
+        return parseHslColor(raw);
+    const named = NAMED_COLORS[raw];
+    if (named)
+        return parseHexColor(named);
+    return failColor(input);
+}
+export function lerpColor(a, b, t) {
+    return {
+        r: a.r + (b.r - a.r) * t,
+        g: a.g + (b.g - a.g) * t,
+        b: a.b + (b.b - a.b) * t,
+        a: a.a + (b.a - a.a) * t,
+    };
+}
+function rgbToHsl(r, g, b) {
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    let h = 0;
+    let s = 0;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === r)
+            h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
+        else if (max === g)
+            h = ((b - r) / d + 2) * 60;
+        else
+            h = ((r - g) / d + 4) * 60;
+    }
+    return { h, s, l };
+}
+export function formatColor(color, format) {
+    const r = Math.round(clamp01(linearToSrgb(color.r)) * 255);
+    const g = Math.round(clamp01(linearToSrgb(color.g)) * 255);
+    const b = Math.round(clamp01(linearToSrgb(color.b)) * 255);
+    const a = clamp01(color.a);
+    const hex2 = (n) => n.toString(16).padStart(2, "0");
+    if (format === "hex") {
+        const base = `#${hex2(r)}${hex2(g)}${hex2(b)}`;
+        return a >= 0.999 ? base : `${base}${hex2(Math.round(a * 255))}`;
+    }
+    if (format === "rgb") {
+        return a >= 0.999
+            ? `rgb(${r}, ${g}, ${b})`
+            : `rgba(${r}, ${g}, ${b}, ${fmtNum(a)})`;
+    }
+    const { h, s, l } = rgbToHsl(r / 255, g / 255, b / 255);
+    const hsl = `hsl(${Math.round(h)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
+    return a >= 0.999
+        ? hsl
+        : `hsla(${Math.round(h)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%, ${fmtNum(a)})`;
+}
+/**
+ * Sort stops by `at`, parse every color, and resolve each segment's
+ * easing. Shared by the scroll-driven and time-driven color primitives.
+ */
+export function parseColorStops(stops, fallbackEasing) {
+    const sorted = [...stops].sort((a, b) => a.at - b.at);
+    return sorted.map((stop) => ({
+        at: stop.at,
+        color: parseColor(stop.color),
+        easing: resolveEasing(stop.easing ?? fallbackEasing ?? "linear"),
+    }));
+}
+/**
+ * Sample a parsed stop list at progress `p` (clamped 0 to 1) and return
+ * the interpolated color string in the requested format.
+ */
+export function sampleColorStops(stops, p, format) {
+    const t = p < 0 ? 0 : p > 1 ? 1 : p;
+    if (t <= stops[0].at)
+        return formatColor(stops[0].color, format);
+    const last = stops[stops.length - 1];
+    if (t >= last.at)
+        return formatColor(last.color, format);
+    let i = 0;
+    while (i < stops.length - 2 && stops[i + 1].at <= t)
+        i++;
+    const a = stops[i];
+    const b = stops[i + 1];
+    const span = b.at - a.at;
+    const local = span <= 0 ? 0 : (t - a.at) / span;
+    return formatColor(lerpColor(a.color, b.color, b.easing(local)), format);
+}

package/dist/directive.d.ts

@@ -25,15 +25,15 @@ declare module "solid-js" {
 }
 /**
  * Directive that binds animated values straight to an element's style.
- * Each prop can be a plain number or any signal — combine with
+ * Each prop can be a plain number or any signal. Combine with
  * `createSpring` / `createTween` for buttery motion:
  *
  * ```tsx
- * import { drift } from "solid-drift";
+ * import { drift } from "solid-drift"
  *
- * const [open, setOpen] = createSignal(false);
- * const y = createSpring(() => (open() ? 0 : 24));
- * const opacity = createTween(() => (open() ? 1 : 0), { duration: 250 });
+ * const [open, setOpen] = createSignal(false)
+ * const y = createSpring(() => (open() ? 0 : 24))
+ * const opacity = createTween(() => (open() ? 1 : 0), { duration: 250 })
  *
  * <div use:drift={{ y, opacity }}>slides and fades</div>
  * ```

package/dist/directive.js

@@ -4,15 +4,15 @@ function resolve(value) {
 }
 /**
  * Directive that binds animated values straight to an element's style.
- * Each prop can be a plain number or any signal — combine with
+ * Each prop can be a plain number or any signal. Combine with
  * `createSpring` / `createTween` for buttery motion:
  *
  * ```tsx
- * import { drift } from "solid-drift";
+ * import { drift } from "solid-drift"
  *
- * const [open, setOpen] = createSignal(false);
- * const y = createSpring(() => (open() ? 0 : 24));
- * const opacity = createTween(() => (open() ? 1 : 0), { duration: 250 });
+ * const [open, setOpen] = createSignal(false)
+ * const y = createSpring(() => (open() ? 0 : 24))
+ * const opacity = createTween(() => (open() ? 1 : 0), { duration: 250 })
  *
  * <div use:drift={{ y, opacity }}>slides and fades</div>
  * ```
@@ -30,8 +30,16 @@ export function drift(el, props) {
         const rotate = p.rotate !== undefined ? resolve(p.rotate) : 0;
         if (rotate !== 0)
             parts.push(`rotate(${rotate}deg)`);
-        const sx = p.scaleX !== undefined ? resolve(p.scaleX) : p.scale !== undefined ? resolve(p.scale) : 1;
-        const sy = p.scaleY !== undefined ? resolve(p.scaleY) : p.scale !== undefined ? resolve(p.scale) : 1;
+        const sx = p.scaleX !== undefined
+            ? resolve(p.scaleX)
+            : p.scale !== undefined
+                ? resolve(p.scale)
+                : 1;
+        const sy = p.scaleY !== undefined
+            ? resolve(p.scaleY)
+            : p.scale !== undefined
+                ? resolve(p.scale)
+                : 1;
         if (sx !== 1 || sy !== 1)
             parts.push(`scale(${sx}, ${sy})`);
         el.style.transform = parts.join(" ");

package/dist/easing.d.ts

@@ -12,6 +12,23 @@ export declare const easeOutQuart: Easing;
 export declare const easeInOutQuart: Easing;
 export declare const easeOutExpo: Easing;
 export declare const easeOutBack: Easing;
+/**
+ * Anticipation easing: dips below the start value before climbing to 1.
+ * The classic cartoon wind-up, a character crouching before the jump.
+ */
+export declare const easeInBack: Easing;
+/** Overshoot at both ends: winds up, fires past the target, settles back. */
+export declare const easeInOutBack: Easing;
+/**
+ * Elastic wobble: overshoots and oscillates with decaying amplitude,
+ * like a plucked rubber band or a jelly landing.
+ */
+export declare const easeOutElastic: Easing;
+/**
+ * Cartoon bounce: hits the end value with a series of shrinking hops,
+ * like a dropped rubber ball.
+ */
+export declare const easeOutBounce: Easing;
 /**
  * Cubic bezier easing, same parameters as CSS `cubic-bezier(x1, y1, x2, y2)`.
  */
@@ -29,7 +46,11 @@ export declare const easings: {
     readonly easeInOutQuart: Easing;
     readonly easeOutExpo: Easing;
     readonly easeOutBack: Easing;
+    readonly easeInBack: Easing;
+    readonly easeInOutBack: Easing;
+    readonly easeOutElastic: Easing;
+    readonly easeOutBounce: Easing;
 };
 export type EasingName = keyof typeof easings;
-/** Accept an easing function or its name; throws on unknown names. */
+/** Accept an easing function or its name. Throws on unknown names. */
 export declare function resolveEasing(easing: Easing | EasingName | undefined): Easing;

package/dist/easing.js

@@ -14,6 +14,50 @@ export const easeOutBack = (t) => {
     const c3 = c1 + 1;
     return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
 };
+/**
+ * Anticipation easing: dips below the start value before climbing to 1.
+ * The classic cartoon wind-up, a character crouching before the jump.
+ */
+export const easeInBack = (t) => {
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return c3 * t * t * t - c1 * t * t;
+};
+/** Overshoot at both ends: winds up, fires past the target, settles back. */
+export const easeInOutBack = (t) => {
+    const c1 = 1.70158;
+    const c2 = c1 * 1.525;
+    return t < 0.5
+        ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
+        : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
+};
+/**
+ * Elastic wobble: overshoots and oscillates with decaying amplitude,
+ * like a plucked rubber band or a jelly landing.
+ */
+export const easeOutElastic = (t) => {
+    if (t <= 0)
+        return 0;
+    if (t >= 1)
+        return 1;
+    const c4 = (2 * Math.PI) / 3;
+    return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+};
+/**
+ * Cartoon bounce: hits the end value with a series of shrinking hops,
+ * like a dropped rubber ball.
+ */
+export const easeOutBounce = (t) => {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (t < 1 / d1)
+        return n1 * t * t;
+    if (t < 2 / d1)
+        return n1 * (t -= 1.5 / d1) * t + 0.75;
+    if (t < 2.5 / d1)
+        return n1 * (t -= 2.25 / d1) * t + 0.9375;
+    return n1 * (t -= 2.625 / d1) * t + 0.984375;
+};
 /**
  * Cubic bezier easing, same parameters as CSS `cubic-bezier(x1, y1, x2, y2)`.
  */
@@ -67,8 +111,12 @@ export const easings = {
     easeInOutQuart,
     easeOutExpo,
     easeOutBack,
+    easeInBack,
+    easeInOutBack,
+    easeOutElastic,
+    easeOutBounce,
 };
-/** Accept an easing function or its name; throws on unknown names. */
+/** Accept an easing function or its name. Throws on unknown names. */
 export function resolveEasing(easing) {
     if (!easing)
         return easeOutCubic;

package/dist/flip.d.ts

@@ -0,0 +1,44 @@
+import { type AnimateOptions, type AnimationControls } from "./animate.js";
+export interface FlipOptions {
+    /** Duration in milliseconds. Default 400. */
+    duration?: number;
+    /** Delay before starting, in milliseconds. Default 0. */
+    delay?: number;
+    /** Easing function or name. Default "easeOutCubic". */
+    easing?: AnimateOptions["easing"];
+    /**
+     * Also animate the size delta as scale, so growing or shrinking
+     * elements morph instead of just sliding. Default true.
+     */
+    scale?: boolean;
+}
+/**
+ * FLIP layout animation around a DOM mutation.
+ *
+ * Records the element's position and size (First), runs your `mutate()`
+ * which changes the layout (Last), then Inverts the delta as a transform
+ * and Plays it back to identity. List reorders, expanding panels, and
+ * grid reshuffles glide to their new spots instead of jumping.
+ *
+ * The element's pre-existing `transform` is captured and restored after
+ * the animation, so FLIP composes with other transform animations.
+ * `stop()` halts mid-flight and restores the original transform.
+ *
+ * SSR-safe and reduced-motion safe: the mutation runs with no animation.
+ * If the element does not move, no animation runs either.
+ *
+ * ```tsx
+ * import { animateFlip } from "solid-drift"
+ *
+ * const [items, setItems] = createSignal(["a", "b", "c"])
+ * let list!: HTMLUListElement
+ *
+ * const shuffle = () =>
+ *   animateFlip(
+ *     () => list,
+ *     () => setItems((prev) => [...prev].reverse()),
+ *     { duration: 450 },
+ *   )
+ * ```
+ */
+export declare function animateFlip(ref: () => Element | null | undefined, mutate: () => void, options?: FlipOptions): AnimationControls;