@samline/notify 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,1124 @@
+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;
+
+export { POSITIONS, defaultExport as default, initToasters, notify };