@samline/notify 0.3.0 → 1.0.0

package/dist/index.cjs.js

@@ -1,1171 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-class NotifyController {
-    constructor() {
-        this.toasts = [];
-        this.listeners = new Set();
-        this.idCounter = 1;
-    }
-    nextId() {
-        return `notify_${Date.now()}_${this.idCounter++}`;
-    }
-    subscribe(fn) {
-        this.listeners.add(fn);
-        fn(this.toasts.slice());
-        return () => this.listeners.delete(fn);
-    }
-    notify() {
-        const snapshot = this.toasts.slice();
-        this.listeners.forEach((l) => l(snapshot));
-    }
-    getToasts() {
-        return this.toasts.slice();
-    }
-    show(opts) {
-        // Normalizar props avanzadas
-        const { icon, fill, styles, roundness, autopilot, ...rest } = opts;
-        const id = this.nextId();
-        const item = {
-            id,
-            options: {
-                ...rest,
-                ...(icon !== undefined ? { icon } : {}),
-                ...(fill !== undefined ? { fill } : {}),
-                ...(styles !== undefined ? { styles } : {}),
-                ...(roundness !== undefined ? { roundness } : {}),
-                ...(autopilot !== undefined ? { autopilot } : {}),
-            },
-            createdAt: Date.now(),
-        };
-        this.toasts.push(item);
-        this.notify();
-        return id;
-    }
-    success(opts) {
-        return this.show({ ...opts, type: 'success' });
-    }
-    error(opts) {
-        return this.show({ ...opts, type: 'error' });
-    }
-    info(opts) {
-        return this.show({ ...opts, type: 'info' });
-    }
-    warning(opts) {
-        return this.show({ ...opts, type: 'warning' });
-    }
-    action(opts) {
-        return this.show({ ...opts, type: 'action' });
-    }
-    dismiss(id) {
-        const idx = this.toasts.findIndex((t) => t.id === id);
-        if (idx >= 0) {
-            this.toasts.splice(idx, 1);
-            this.notify();
-        }
-    }
-    clear(position) {
-        if (position) {
-            this.toasts = this.toasts.filter((t) => t.options.position !== position);
-        }
-        else {
-            this.toasts = [];
-        }
-        this.notify();
-    }
-    promise(p, opts) {
-        const loadingId = this.show({ ...(opts.loading || {}), type: 'loading', position: opts.position });
-        p.then((res) => {
-            this.dismiss(loadingId);
-            if (opts.action) {
-                const actionOpt = typeof opts.action === 'function' ? opts.action(res) : opts.action;
-                if (actionOpt) {
-                    this.show({ ...(actionOpt || {}), type: 'action', position: opts.position });
-                    return;
-                }
-            }
-            const successOpt = typeof opts.success === 'function' ? opts.success(res) : opts.success;
-            if (successOpt)
-                this.show({ ...(successOpt || {}), type: 'success', position: opts.position });
-        }).catch((err) => {
-            this.dismiss(loadingId);
-            const errorOpt = typeof opts.error === 'function' ? opts.error(err) : opts.error;
-            if (errorOpt)
-                this.show({ ...(errorOpt || {}), type: 'error', position: opts.position });
-        });
-        return p;
-    }
-}
-const notify$1 = new NotifyController();
-// backward compatibility alias
-const sileo = notify$1;
-
-function addUniqueItem(array, item) {
-    array.indexOf(item) === -1 && array.push(item);
-}
-
-const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
-
-const defaults = {
-    duration: 0.3,
-    delay: 0,
-    endDelay: 0,
-    repeat: 0,
-    easing: "ease",
-};
-
-const isNumber = (value) => typeof value === "number";
-
-const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
-
-const wrap = (min, max, v) => {
-    const rangeSize = max - min;
-    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-};
-
-function getEasingForSegment(easing, i) {
-    return isEasingList(easing) ? easing[wrap(0, easing.length, i)] : easing;
-}
-
-const mix = (min, max, progress) => -progress * min + progress * max + min;
-
-const noop = () => { };
-const noopReturn = (v) => v;
-
-const progress = (min, max, value) => max - min === 0 ? 1 : (value - min) / (max - min);
-
-function fillOffset(offset, remaining) {
-    const min = offset[offset.length - 1];
-    for (let i = 1; i <= remaining; i++) {
-        const offsetProgress = progress(0, remaining, i);
-        offset.push(mix(min, 1, offsetProgress));
-    }
-}
-function defaultOffset(length) {
-    const offset = [0];
-    fillOffset(offset, length - 1);
-    return offset;
-}
-
-function interpolate(output, input = defaultOffset(output.length), easing = noopReturn) {
-    const length = output.length;
-    /**
-     * If the input length is lower than the output we
-     * fill the input to match. This currently assumes the input
-     * is an animation progress value so is a good candidate for
-     * moving outside the function.
-     */
-    const remainder = length - input.length;
-    remainder > 0 && fillOffset(input, remainder);
-    return (t) => {
-        let i = 0;
-        for (; i < length - 2; i++) {
-            if (t < input[i + 1])
-                break;
-        }
-        let progressInRange = clamp(0, 1, progress(input[i], input[i + 1], t));
-        const segmentEasing = getEasingForSegment(easing, i);
-        progressInRange = segmentEasing(progressInRange);
-        return mix(output[i], output[i + 1], progressInRange);
-    };
-}
-
-const isCubicBezier = (easing) => Array.isArray(easing) && isNumber(easing[0]);
-
-const isEasingGenerator = (easing) => typeof easing === "object" &&
-    Boolean(easing.createAnimation);
-
-const isFunction = (value) => typeof value === "function";
-
-const isString = (value) => typeof value === "string";
-
-const time = {
-    ms: (seconds) => seconds * 1000,
-    s: (milliseconds) => milliseconds / 1000,
-};
-
-/*
-  Bezier function generator
-
-  This has been modified from Gaëtan Renaudeau's BezierEasing
-  https://github.com/gre/bezier-easing/blob/master/src/index.js
-  https://github.com/gre/bezier-easing/blob/master/LICENSE
-  
-  I've removed the newtonRaphsonIterate algo because in benchmarking it
-  wasn't noticiably faster than binarySubdivision, indeed removing it
-  usually improved times, depending on the curve.
-
-  I also removed the lookup table, as for the added bundle size and loop we're
-  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-  to 12 to compensate and this still tended to be faster for no perceivable
-  loss in accuracy.
-
-  Usage
-    const easeOut = cubicBezier(.17,.67,.83,.67);
-    const x = easeOut(0.5); // returns 0.627...
-*/
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) * t;
-const subdivisionPrecision = 0.0000001;
-const subdivisionMaxIterations = 12;
-function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-    let currentX;
-    let currentT;
-    let i = 0;
-    do {
-        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-        currentX = calcBezier(currentT, mX1, mX2) - x;
-        if (currentX > 0.0) {
-            upperBound = currentT;
-        }
-        else {
-            lowerBound = currentT;
-        }
-    } while (Math.abs(currentX) > subdivisionPrecision &&
-        ++i < subdivisionMaxIterations);
-    return currentT;
-}
-function cubicBezier(mX1, mY1, mX2, mY2) {
-    // If this is a linear gradient, return linear easing
-    if (mX1 === mY1 && mX2 === mY2)
-        return noopReturn;
-    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-    // If animation is at start/end, return t without easing
-    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-}
-
-const steps = (steps, direction = "end") => (progress) => {
-    progress =
-        direction === "end"
-            ? Math.min(progress, 0.999)
-            : Math.max(progress, 0.001);
-    const expanded = progress * steps;
-    const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
-    return clamp(0, 1, rounded / steps);
-};
-
-const namedEasings = {
-    ease: cubicBezier(0.25, 0.1, 0.25, 1.0),
-    "ease-in": cubicBezier(0.42, 0.0, 1.0, 1.0),
-    "ease-in-out": cubicBezier(0.42, 0.0, 0.58, 1.0),
-    "ease-out": cubicBezier(0.0, 0.0, 0.58, 1.0),
-};
-const functionArgsRegex = /\((.*?)\)/;
-function getEasingFunction(definition) {
-    // If already an easing function, return
-    if (isFunction(definition))
-        return definition;
-    // If an easing curve definition, return bezier function
-    if (isCubicBezier(definition))
-        return cubicBezier(...definition);
-    // If we have a predefined easing function, return
-    const namedEasing = namedEasings[definition];
-    if (namedEasing)
-        return namedEasing;
-    // If this is a steps function, attempt to create easing curve
-    if (definition.startsWith("steps")) {
-        const args = functionArgsRegex.exec(definition);
-        if (args) {
-            const argsArray = args[1].split(",");
-            return steps(parseFloat(argsArray[0]), argsArray[1].trim());
-        }
-    }
-    return noopReturn;
-}
-
-class Animation {
-    constructor(output, keyframes = [0, 1], { easing, duration: initialDuration = defaults.duration, delay = defaults.delay, endDelay = defaults.endDelay, repeat = defaults.repeat, offset, direction = "normal", autoplay = true, } = {}) {
-        this.startTime = null;
-        this.rate = 1;
-        this.t = 0;
-        this.cancelTimestamp = null;
-        this.easing = noopReturn;
-        this.duration = 0;
-        this.totalDuration = 0;
-        this.repeat = 0;
-        this.playState = "idle";
-        this.finished = new Promise((resolve, reject) => {
-            this.resolve = resolve;
-            this.reject = reject;
-        });
-        easing = easing || defaults.easing;
-        if (isEasingGenerator(easing)) {
-            const custom = easing.createAnimation(keyframes);
-            easing = custom.easing;
-            keyframes = custom.keyframes || keyframes;
-            initialDuration = custom.duration || initialDuration;
-        }
-        this.repeat = repeat;
-        this.easing = isEasingList(easing) ? noopReturn : getEasingFunction(easing);
-        this.updateDuration(initialDuration);
-        const interpolate$1 = interpolate(keyframes, offset, isEasingList(easing) ? easing.map(getEasingFunction) : noopReturn);
-        this.tick = (timestamp) => {
-            var _a;
-            // TODO: Temporary fix for OptionsResolver typing
-            delay = delay;
-            let t = 0;
-            if (this.pauseTime !== undefined) {
-                t = this.pauseTime;
-            }
-            else {
-                t = (timestamp - this.startTime) * this.rate;
-            }
-            this.t = t;
-            // Convert to seconds
-            t /= 1000;
-            // Rebase on delay
-            t = Math.max(t - delay, 0);
-            /**
-             * If this animation has finished, set the current time
-             * to the total duration.
-             */
-            if (this.playState === "finished" && this.pauseTime === undefined) {
-                t = this.totalDuration;
-            }
-            /**
-             * Get the current progress (0-1) of the animation. If t is >
-             * than duration we'll get values like 2.5 (midway through the
-             * third iteration)
-             */
-            const progress = t / this.duration;
-            // TODO progress += iterationStart
-            /**
-             * Get the current iteration (0 indexed). For instance the floor of
-             * 2.5 is 2.
-             */
-            let currentIteration = Math.floor(progress);
-            /**
-             * Get the current progress of the iteration by taking the remainder
-             * so 2.5 is 0.5 through iteration 2
-             */
-            let iterationProgress = progress % 1.0;
-            if (!iterationProgress && progress >= 1) {
-                iterationProgress = 1;
-            }
-            /**
-             * If iteration progress is 1 we count that as the end
-             * of the previous iteration.
-             */
-            iterationProgress === 1 && currentIteration--;
-            /**
-             * Reverse progress if we're not running in "normal" direction
-             */
-            const iterationIsOdd = currentIteration % 2;
-            if (direction === "reverse" ||
-                (direction === "alternate" && iterationIsOdd) ||
-                (direction === "alternate-reverse" && !iterationIsOdd)) {
-                iterationProgress = 1 - iterationProgress;
-            }
-            const p = t >= this.totalDuration ? 1 : Math.min(iterationProgress, 1);
-            const latest = interpolate$1(this.easing(p));
-            output(latest);
-            const isAnimationFinished = this.pauseTime === undefined &&
-                (this.playState === "finished" || t >= this.totalDuration + endDelay);
-            if (isAnimationFinished) {
-                this.playState = "finished";
-                (_a = this.resolve) === null || _a === void 0 ? void 0 : _a.call(this, latest);
-            }
-            else if (this.playState !== "idle") {
-                this.frameRequestId = requestAnimationFrame(this.tick);
-            }
-        };
-        if (autoplay)
-            this.play();
-    }
-    play() {
-        const now = performance.now();
-        this.playState = "running";
-        if (this.pauseTime !== undefined) {
-            this.startTime = now - this.pauseTime;
-        }
-        else if (!this.startTime) {
-            this.startTime = now;
-        }
-        this.cancelTimestamp = this.startTime;
-        this.pauseTime = undefined;
-        this.frameRequestId = requestAnimationFrame(this.tick);
-    }
-    pause() {
-        this.playState = "paused";
-        this.pauseTime = this.t;
-    }
-    finish() {
-        this.playState = "finished";
-        this.tick(0);
-    }
-    stop() {
-        var _a;
-        this.playState = "idle";
-        if (this.frameRequestId !== undefined) {
-            cancelAnimationFrame(this.frameRequestId);
-        }
-        (_a = this.reject) === null || _a === void 0 ? void 0 : _a.call(this, false);
-    }
-    cancel() {
-        this.stop();
-        this.tick(this.cancelTimestamp);
-    }
-    reverse() {
-        this.rate *= -1;
-    }
-    commitStyles() { }
-    updateDuration(duration) {
-        this.duration = duration;
-        this.totalDuration = duration * (this.repeat + 1);
-    }
-    get currentTime() {
-        return this.t;
-    }
-    set currentTime(t) {
-        if (this.pauseTime !== undefined || this.rate === 0) {
-            this.pauseTime = t;
-        }
-        else {
-            this.startTime = performance.now() - t / this.rate;
-        }
-    }
-    get playbackRate() {
-        return this.rate;
-    }
-    set playbackRate(rate) {
-        this.rate = rate;
-    }
-}
-
-/**
- * The MotionValue tracks the state of a single animatable
- * value. Currently, updatedAt and current are unused. The
- * long term idea is to use this to minimise the number
- * of DOM reads, and to abstract the DOM interactions here.
- */
-class MotionValue {
-    setAnimation(animation) {
-        this.animation = animation;
-        animation === null || animation === void 0 ? void 0 : animation.finished.then(() => this.clearAnimation()).catch(() => { });
-    }
-    clearAnimation() {
-        this.animation = this.generator = undefined;
-    }
-}
-
-const data = new WeakMap();
-function getAnimationData(element) {
-    if (!data.has(element)) {
-        data.set(element, {
-            transforms: [],
-            values: new Map(),
-        });
-    }
-    return data.get(element);
-}
-function getMotionValue(motionValues, name) {
-    if (!motionValues.has(name)) {
-        motionValues.set(name, new MotionValue());
-    }
-    return motionValues.get(name);
-}
-
-/**
- * A list of all transformable axes. We'll use this list to generated a version
- * of each axes for each transform.
- */
-const axes = ["", "X", "Y", "Z"];
-/**
- * An ordered array of each transformable value. By default, transform values
- * will be sorted to this order.
- */
-const order = ["translate", "scale", "rotate", "skew"];
-const transformAlias = {
-    x: "translateX",
-    y: "translateY",
-    z: "translateZ",
-};
-const rotation = {
-    syntax: "<angle>",
-    initialValue: "0deg",
-    toDefaultUnit: (v) => v + "deg",
-};
-const baseTransformProperties = {
-    translate: {
-        syntax: "<length-percentage>",
-        initialValue: "0px",
-        toDefaultUnit: (v) => v + "px",
-    },
-    rotate: rotation,
-    scale: {
-        syntax: "<number>",
-        initialValue: 1,
-        toDefaultUnit: noopReturn,
-    },
-    skew: rotation,
-};
-const transformDefinitions = new Map();
-const asTransformCssVar = (name) => `--motion-${name}`;
-/**
- * Generate a list of every possible transform key
- */
-const transforms = ["x", "y", "z"];
-order.forEach((name) => {
-    axes.forEach((axis) => {
-        transforms.push(name + axis);
-        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
-    });
-});
-/**
- * A function to use with Array.sort to sort transform keys by their default order.
- */
-const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b);
-/**
- * Provide a quick way to check if a string is the name of a transform
- */
-const transformLookup = new Set(transforms);
-const isTransform = (name) => transformLookup.has(name);
-const addTransformToElement = (element, name) => {
-    // Map x to translateX etc
-    if (transformAlias[name])
-        name = transformAlias[name];
-    const { transforms } = getAnimationData(element);
-    addUniqueItem(transforms, name);
-    /**
-     * TODO: An optimisation here could be to cache the transform in element data
-     * and only update if this has changed.
-     */
-    element.style.transform = buildTransformTemplate(transforms);
-};
-const buildTransformTemplate = (transforms) => transforms
-    .sort(compareTransformOrder)
-    .reduce(transformListToString, "")
-    .trim();
-const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;
-
-const isCssVar = (name) => name.startsWith("--");
-const registeredProperties = new Set();
-function registerCssVariable(name) {
-    if (registeredProperties.has(name))
-        return;
-    registeredProperties.add(name);
-    try {
-        const { syntax, initialValue } = transformDefinitions.has(name)
-            ? transformDefinitions.get(name)
-            : {};
-        CSS.registerProperty({
-            name,
-            inherits: false,
-            syntax,
-            initialValue,
-        });
-    }
-    catch (e) { }
-}
-
-const testAnimation = (keyframes, options) => document.createElement("div").animate(keyframes, options);
-const featureTests = {
-    cssRegisterProperty: () => typeof CSS !== "undefined" &&
-        Object.hasOwnProperty.call(CSS, "registerProperty"),
-    waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
-    partialKeyframes: () => {
-        try {
-            testAnimation({ opacity: [1] });
-        }
-        catch (e) {
-            return false;
-        }
-        return true;
-    },
-    finished: () => Boolean(testAnimation({ opacity: [0, 1] }, { duration: 0.001 }).finished),
-    linearEasing: () => {
-        try {
-            testAnimation({ opacity: 0 }, { easing: "linear(0, 1)" });
-        }
-        catch (e) {
-            return false;
-        }
-        return true;
-    },
-};
-const results = {};
-const supports = {};
-for (const key in featureTests) {
-    supports[key] = () => {
-        if (results[key] === undefined)
-            results[key] =
-                featureTests[key]();
-        return results[key];
-    };
-}
-
-// Create a linear easing point for every x second
-const resolution = 0.015;
-const generateLinearEasingPoints = (easing, duration) => {
-    let points = "";
-    const numPoints = Math.round(duration / resolution);
-    for (let i = 0; i < numPoints; i++) {
-        points += easing(progress(0, numPoints - 1, i)) + ", ";
-    }
-    return points.substring(0, points.length - 2);
-};
-const convertEasing = (easing, duration) => {
-    if (isFunction(easing)) {
-        return supports.linearEasing()
-            ? `linear(${generateLinearEasingPoints(easing, duration)})`
-            : defaults.easing;
-    }
-    else {
-        return isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;
-    }
-};
-const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-
-function hydrateKeyframes(keyframes, readInitialValue) {
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] === null) {
-            keyframes[i] = i ? keyframes[i - 1] : readInitialValue();
-        }
-    }
-    return keyframes;
-}
-const keyframesList = (keyframes) => Array.isArray(keyframes) ? keyframes : [keyframes];
-
-function getStyleName(key) {
-    if (transformAlias[key])
-        key = transformAlias[key];
-    return isTransform(key) ? asTransformCssVar(key) : key;
-}
-
-const style = {
-    get: (element, name) => {
-        name = getStyleName(name);
-        let value = isCssVar(name)
-            ? element.style.getPropertyValue(name)
-            : getComputedStyle(element)[name];
-        // TODO Decide if value can be 0
-        if (!value && value !== 0) {
-            const definition = transformDefinitions.get(name);
-            if (definition)
-                value = definition.initialValue;
-        }
-        return value;
-    },
-    set: (element, name, value) => {
-        name = getStyleName(name);
-        if (isCssVar(name)) {
-            element.style.setProperty(name, value);
-        }
-        else {
-            element.style[name] = value;
-        }
-    },
-};
-
-function stopAnimation(animation, needsCommit = true) {
-    if (!animation || animation.playState === "finished")
-        return;
-    // Suppress error thrown by WAAPI
-    try {
-        if (animation.stop) {
-            animation.stop();
-        }
-        else {
-            needsCommit && animation.commitStyles();
-            animation.cancel();
-        }
-    }
-    catch (e) { }
-}
-
-function getUnitConverter(keyframes, definition) {
-    var _a;
-    let toUnit = (definition === null || definition === void 0 ? void 0 : definition.toDefaultUnit) || noopReturn;
-    const finalKeyframe = keyframes[keyframes.length - 1];
-    if (isString(finalKeyframe)) {
-        const unit = ((_a = finalKeyframe.match(/(-?[\d.]+)([a-z%]*)/)) === null || _a === void 0 ? void 0 : _a[2]) || "";
-        if (unit)
-            toUnit = (value) => value + unit;
-    }
-    return toUnit;
-}
-
-function getDevToolsRecord() {
-    return window.__MOTION_DEV_TOOLS_RECORD;
-}
-function animateStyle(element, key, keyframesDefinition, options = {}, AnimationPolyfill) {
-    const record = getDevToolsRecord();
-    const isRecording = options.record !== false && record;
-    let animation;
-    let { duration = defaults.duration, delay = defaults.delay, endDelay = defaults.endDelay, repeat = defaults.repeat, easing = defaults.easing, persist = false, direction, offset, allowWebkitAcceleration = false, autoplay = true, } = options;
-    const data = getAnimationData(element);
-    const valueIsTransform = isTransform(key);
-    let canAnimateNatively = supports.waapi();
-    /**
-     * If this is an individual transform, we need to map its
-     * key to a CSS variable and update the element's transform style
-     */
-    valueIsTransform && addTransformToElement(element, key);
-    const name = getStyleName(key);
-    const motionValue = getMotionValue(data.values, name);
-    /**
-     * Get definition of value, this will be used to convert numerical
-     * keyframes into the default value type.
-     */
-    const definition = transformDefinitions.get(name);
-    /**
-     * Stop the current animation, if any. Because this will trigger
-     * commitStyles (DOM writes) and we might later trigger DOM reads,
-     * this is fired now and we return a factory function to create
-     * the actual animation that can get called in batch,
-     */
-    stopAnimation(motionValue.animation, !(isEasingGenerator(easing) && motionValue.generator) &&
-        options.record !== false);
-    /**
-     * Batchable factory function containing all DOM reads.
-     */
-    return () => {
-        const readInitialValue = () => { var _a, _b; return (_b = (_a = style.get(element, name)) !== null && _a !== void 0 ? _a : definition === null || definition === void 0 ? void 0 : definition.initialValue) !== null && _b !== void 0 ? _b : 0; };
-        /**
-         * Replace null values with the previous keyframe value, or read
-         * it from the DOM if it's the first keyframe.
-         */
-        let keyframes = hydrateKeyframes(keyframesList(keyframesDefinition), readInitialValue);
-        /**
-         * Detect unit type of keyframes.
-         */
-        const toUnit = getUnitConverter(keyframes, definition);
-        if (isEasingGenerator(easing)) {
-            const custom = easing.createAnimation(keyframes, key !== "opacity", readInitialValue, name, motionValue);
-            easing = custom.easing;
-            keyframes = custom.keyframes || keyframes;
-            duration = custom.duration || duration;
-        }
-        /**
-         * If this is a CSS variable we need to register it with the browser
-         * before it can be animated natively. We also set it with setProperty
-         * rather than directly onto the element.style object.
-         */
-        if (isCssVar(name)) {
-            if (supports.cssRegisterProperty()) {
-                registerCssVariable(name);
-            }
-            else {
-                canAnimateNatively = false;
-            }
-        }
-        /**
-         * If we've been passed a custom easing function, and this browser
-         * does **not** support linear() easing, and the value is a transform
-         * (and thus a pure number) we can still support the custom easing
-         * by falling back to the animation polyfill.
-         */
-        if (valueIsTransform &&
-            !supports.linearEasing() &&
-            (isFunction(easing) || (isEasingList(easing) && easing.some(isFunction)))) {
-            canAnimateNatively = false;
-        }
-        /**
-         * If we can animate this value with WAAPI, do so.
-         */
-        if (canAnimateNatively) {
-            /**
-             * Convert numbers to default value types. Currently this only supports
-             * transforms but it could also support other value types.
-             */
-            if (definition) {
-                keyframes = keyframes.map((value) => isNumber(value) ? definition.toDefaultUnit(value) : value);
-            }
-            /**
-             * If this browser doesn't support partial/implicit keyframes we need to
-             * explicitly provide one.
-             */
-            if (keyframes.length === 1 &&
-                (!supports.partialKeyframes() || isRecording)) {
-                keyframes.unshift(readInitialValue());
-            }
-            const animationOptions = {
-                delay: time.ms(delay),
-                duration: time.ms(duration),
-                endDelay: time.ms(endDelay),
-                easing: !isEasingList(easing)
-                    ? convertEasing(easing, duration)
-                    : undefined,
-                direction,
-                iterations: repeat + 1,
-                fill: "both",
-            };
-            animation = element.animate({
-                [name]: keyframes,
-                offset,
-                easing: isEasingList(easing)
-                    ? easing.map((thisEasing) => convertEasing(thisEasing, duration))
-                    : undefined,
-            }, animationOptions);
-            /**
-             * Polyfill finished Promise in browsers that don't support it
-             */
-            if (!animation.finished) {
-                animation.finished = new Promise((resolve, reject) => {
-                    animation.onfinish = resolve;
-                    animation.oncancel = reject;
-                });
-            }
-            const target = keyframes[keyframes.length - 1];
-            animation.finished
-                .then(() => {
-                if (persist)
-                    return;
-                // Apply styles to target
-                style.set(element, name, target);
-                // Ensure fill modes don't persist
-                animation.cancel();
-            })
-                .catch(noop);
-            /**
-             * This forces Webkit to run animations on the main thread by exploiting
-             * this condition:
-             * https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp?rev=281238#L1099
-             *
-             * This fixes Webkit's timing bugs, like accelerated animations falling
-             * out of sync with main thread animations and massive delays in starting
-             * accelerated animations in WKWebView.
-             */
-            if (!allowWebkitAcceleration)
-                animation.playbackRate = 1.000001;
-            /**
-             * If we can't animate the value natively then we can fallback to the numbers-only
-             * polyfill for transforms.
-             */
-        }
-        else if (AnimationPolyfill && valueIsTransform) {
-            /**
-             * If any keyframe is a string (because we measured it from the DOM), we need to convert
-             * it into a number before passing to the Animation polyfill.
-             */
-            keyframes = keyframes.map((value) => typeof value === "string" ? parseFloat(value) : value);
-            /**
-             * If we only have a single keyframe, we need to create an initial keyframe by reading
-             * the current value from the DOM.
-             */
-            if (keyframes.length === 1) {
-                keyframes.unshift(parseFloat(readInitialValue()));
-            }
-            animation = new AnimationPolyfill((latest) => {
-                style.set(element, name, toUnit ? toUnit(latest) : latest);
-            }, keyframes, Object.assign(Object.assign({}, options), { duration,
-                easing }));
-        }
-        else {
-            const target = keyframes[keyframes.length - 1];
-            style.set(element, name, definition && isNumber(target)
-                ? definition.toDefaultUnit(target)
-                : target);
-        }
-        if (isRecording) {
-            record(element, key, keyframes, {
-                duration,
-                delay: delay,
-                easing,
-                repeat,
-                offset,
-            }, "motion-one");
-        }
-        motionValue.setAnimation(animation);
-        if (animation && !autoplay)
-            animation.pause();
-        return animation;
-    };
-}
-
-const getOptions = (options, key) => 
-/**
- * TODO: Make test for this
- * Always return a new object otherwise delay is overwritten by results of stagger
- * and this results in no stagger
- */
-options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
-
-function resolveElements(elements, selectorCache) {
-    var _a;
-    if (typeof elements === "string") {
-        if (selectorCache) {
-            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
-            elements = selectorCache[elements];
-        }
-        else {
-            elements = document.querySelectorAll(elements);
-        }
-    }
-    else if (elements instanceof Element) {
-        elements = [elements];
-    }
-    /**
-     * Return an empty array
-     */
-    return Array.from(elements || []);
-}
-
-const createAnimation = (factory) => factory();
-const withControls = (animationFactory, options, duration = defaults.duration) => {
-    return new Proxy({
-        animations: animationFactory.map(createAnimation).filter(Boolean),
-        duration,
-        options,
-    }, controls);
-};
-/**
- * TODO:
- * Currently this returns the first animation, ideally it would return
- * the first active animation.
- */
-const getActiveAnimation = (state) => state.animations[0];
-const controls = {
-    get: (target, key) => {
-        const activeAnimation = getActiveAnimation(target);
-        switch (key) {
-            case "duration":
-                return target.duration;
-            case "currentTime":
-                return time.s((activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation[key]) || 0);
-            case "playbackRate":
-            case "playState":
-                return activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation[key];
-            case "finished":
-                if (!target.finished) {
-                    target.finished = Promise.all(target.animations.map(selectFinished)).catch(noop);
-                }
-                return target.finished;
-            case "stop":
-                return () => {
-                    target.animations.forEach((animation) => stopAnimation(animation));
-                };
-            case "forEachNative":
-                /**
-                 * This is for internal use only, fire a callback for each
-                 * underlying animation.
-                 */
-                return (callback) => {
-                    target.animations.forEach((animation) => callback(animation, target));
-                };
-            default:
-                return typeof (activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation[key]) ===
-                    "undefined"
-                    ? undefined
-                    : () => target.animations.forEach((animation) => animation[key]());
-        }
-    },
-    set: (target, key, value) => {
-        switch (key) {
-            case "currentTime":
-                value = time.ms(value);
-            // Fall-through
-            case "playbackRate":
-                for (let i = 0; i < target.animations.length; i++) {
-                    target.animations[i][key] = value;
-                }
-                return true;
-        }
-        return false;
-    },
-};
-const selectFinished = (animation) => animation.finished;
-
-function resolveOption(option, i, total) {
-    return isFunction(option) ? option(i, total) : option;
-}
-
-function createAnimate(AnimatePolyfill) {
-    return function animate(elements, keyframes, options = {}) {
-        elements = resolveElements(elements);
-        const numElements = elements.length;
-        /**
-         * Create and start new animations
-         */
-        const animationFactories = [];
-        for (let i = 0; i < numElements; i++) {
-            const element = elements[i];
-            for (const key in keyframes) {
-                const valueOptions = getOptions(options, key);
-                valueOptions.delay = resolveOption(valueOptions.delay, i, numElements);
-                const animation = animateStyle(element, key, keyframes[key], valueOptions, AnimatePolyfill);
-                animationFactories.push(animation);
-            }
-        }
-        return withControls(animationFactories, options, 
-        /**
-         * TODO:
-         * If easing is set to spring or glide, duration will be dynamically
-         * generated. Ideally we would dynamically generate this from
-         * animation.effect.getComputedTiming().duration but this isn't
-         * supported in iOS13 or our number polyfill. Perhaps it's possible
-         * to Proxy animations returned from animateStyle that has duration
-         * as a getter.
-         */
-        options.duration);
-    };
-}
-
-const animate$1 = createAnimate(Animation);
-
-function animateProgress(target, options = {}) {
-    return withControls([
-        () => {
-            const animation = new Animation(target, [0, 1], options);
-            animation.finished.catch(() => { });
-            return animation;
-        },
-    ], options, options.duration);
-}
-function animate(target, keyframesOrOptions, options) {
-    const factory = isFunction(target) ? animateProgress : animate$1;
-    return factory(target, keyframesOrOptions, options);
-}
-
-const POSITIONS = [
-    'top-left',
-    'top-center',
-    'top-right',
-    'bottom-left',
-    'bottom-center',
-    'bottom-right'
-];
-function createContainer(position, root, opts) {
-    const c = document.createElement('div');
-    c.className = 'sileo-toaster';
-    c.setAttribute('data-position', position);
-    c.setAttribute('role', 'status');
-    c.setAttribute('aria-live', 'polite');
-    if (opts === null || opts === void 0 ? void 0 : opts.theme)
-        c.setAttribute('data-theme', opts.theme);
-    // offset
-    if ((opts === null || opts === void 0 ? void 0 : opts.offset) !== undefined) {
-        if (typeof opts.offset === 'number' || typeof opts.offset === 'string') {
-            c.style.margin = typeof opts.offset === 'number' ? `${opts.offset}px` : opts.offset;
-        }
-        else if (typeof opts.offset === 'object') {
-            if (opts.offset.top !== undefined)
-                c.style.marginTop = `${opts.offset.top}px`;
-            if (opts.offset.right !== undefined)
-                c.style.marginRight = `${opts.offset.right}px`;
-            if (opts.offset.bottom !== undefined)
-                c.style.marginBottom = `${opts.offset.bottom}px`;
-            if (opts.offset.left !== undefined)
-                c.style.marginLeft = `${opts.offset.left}px`;
-        }
-    }
-    return c;
-}
-function renderToast(item) {
-    const el = document.createElement('div');
-    el.className = 'sileo-toast';
-    el.dataset.id = item.id;
-    el.setAttribute('data-type', item.options.type || 'info');
-    el.style.opacity = '0';
-    el.style.transform = 'translateY(-6px)';
-    const body = document.createElement('div');
-    body.style.display = 'flex';
-    body.style.flexDirection = 'column';
-    body.style.flex = '1';
-    const header = document.createElement('div');
-    header.className = 'sileo-toast-header';
-    header.textContent = item.options.title || '';
-    body.appendChild(header);
-    if (item.options.description) {
-        const desc = document.createElement('div');
-        desc.className = 'sileo-toast-desc';
-        desc.textContent = item.options.description;
-        body.appendChild(desc);
-    }
-    el.appendChild(body);
-    if (item.options.button) {
-        const btn = document.createElement('button');
-        btn.className = 'sileo-toast-btn';
-        btn.textContent = item.options.button.title;
-        btn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            try {
-                if (item.options.button && typeof item.options.button.onClick === 'function') {
-                    item.options.button.onClick();
-                }
-            }
-            catch (err) {
-                console.error(err);
-            }
-        });
-        el.appendChild(btn);
-    }
-    const close = document.createElement('button');
-    close.className = 'sileo-toast-close';
-    close.innerHTML = '×';
-    close.addEventListener('click', () => sileo.dismiss(item.id));
-    el.appendChild(close);
-    if (typeof item.options.duration === 'number') {
-        if (item.options.duration > 0) {
-            setTimeout(() => sileo.dismiss(item.id), item.options.duration);
-        }
-    }
-    return el;
-}
-function initToasters(root = document.body, positions = ['top-right'], opts) {
-    const containers = {};
-    positions.forEach((pos) => {
-        const c = createContainer(pos, root, opts);
-        root.appendChild(c);
-        containers[pos] = c;
-    });
-    if (opts === null || opts === void 0 ? void 0 : opts.options)
-        window.sileo._globalOptions = opts.options;
-    if (opts === null || opts === void 0 ? void 0 : opts.theme)
-        window.sileo._theme = opts.theme;
-    // fallback dinámico: si solo hay una posición, usarla como default
-    const fallbackPosition = positions.length === 1 ? positions[0] : 'top-right';
-    function rerender(items) {
-        // Lanzar advertencia para todos los toasts con posición no inicializada
-        items.forEach((t) => {
-            if (t.options.position && !containers[t.options.position]) {
-                console.warn(`[sileo] Toast con posición "${t.options.position}" pero no se inicializó ningún contenedor para esa posición. Inicializa con initToasters(..., ['${t.options.position}']) para mostrarlo.`);
-            }
-        });
-        positions.forEach((pos) => {
-            const container = containers[pos];
-            // fallback dinámico
-            const visible = items.filter((t) => (t.options.position || fallbackPosition) === pos);
-            // Diff existing children y animar salida de toasts removidos
-            const visibleIds = new Set(visible.map((v) => v.id));
-            const existing = Array.from(container.children);
-            existing.forEach((child) => {
-                const id = child.dataset.id;
-                if (!id || !visibleIds.has(id)) {
-                    // animar salida y luego remover
-                    animate(child, { opacity: 0, y: -8 }, { duration: 0.18 }).finished.then(() => child.remove());
-                }
-            });
-            // Añadir nuevos toasts
-            visible.forEach((t) => {
-                if (!container.querySelector(`[data-id="${t.id}"]`)) {
-                    const node = renderToast(t);
-                    container.appendChild(node);
-                    // animar entrada
-                    requestAnimationFrame(() => {
-                        animate(node, { opacity: [0, 1], y: [-6, 0] }, { duration: 0.24 });
-                    });
-                }
-            });
-        });
-    }
-    const unsub = sileo.subscribe(rerender);
-    return {
-        destroy() {
-            unsub();
-            Object.values(containers).forEach((c) => c.remove());
-        }
-    };
-}
-
-// convenience: keep the previous shape where `notify` was the quick-show function
-const notify = notify$1.show.bind(notify$1);
-const defaultExport = { sileo: sileo, initToasters, notify, controller: notify$1 };
-// backward compatibility: expose `notifications` key pointing to the same API object
-defaultExport.notifications = defaultExport;
-
-exports.POSITIONS = POSITIONS;
-exports.default = defaultExport;
-exports.initToasters = initToasters;
-exports.notify = notify;