@samline/notify 0.1.0

package/dist/notify.umd.js

@@ -0,0 +1,1137 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.notify = {}));
+})(this, (function (exports) { 'use strict';
+
+    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) {
+            const id = this.nextId();
+            const item = { id, options: { ...opts }, 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);
+                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;
+        }
+    }
+
+    var invariant = function () { };
+    if (process.env.NODE_ENV !== 'production') {
+        invariant = function (check, message) {
+            if (!check) {
+                throw new Error(message);
+            }
+        };
+    }
+
+    /**
+     * 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;
+            invariant(Boolean(numElements), "No valid element provided.");
+            invariant(Boolean(keyframes), "No keyframes defined.");
+            /**
+             * 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) {
+        const c = document.createElement('div');
+        c.className = 'sileo-toaster';
+        c.setAttribute('data-position', position);
+        c.setAttribute('role', 'status');
+        c.setAttribute('aria-live', 'polite');
+        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']) {
+        const containers = {};
+        positions.forEach((pos) => {
+            const c = createContainer(pos);
+            root.appendChild(c);
+            containers[pos] = c;
+        });
+        function rerender(items) {
+            positions.forEach((pos) => {
+                const container = containers[pos];
+                const visible = items.filter((t) => (t.options.position || 'top-right') === pos);
+                // Diff existing children and animate out removed toasts
+                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)) {
+                        // animate out then remove
+                        animate(child, { opacity: 0, y: -8 }, { duration: 0.18 }).finished.then(() => child.remove());
+                    }
+                });
+                // Add new items
+                visible.forEach((t) => {
+                    if (!container.querySelector(`[data-id="${t.id}"]`)) {
+                        const node = renderToast(t);
+                        container.appendChild(node);
+                        // animate in
+                        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;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));