@konce-pt/motion 0.0.0-stage → 0.15.0

package/dist/loader-dom.js

@@ -0,0 +1,821 @@
+import { BOUNCE_GROUND, LOADER_EASE, LOADER_MARKS, LOADER_QUIET_MS, LOADER_RESULT_MS, LOADER_VIEWBOX, SHAPE_CIRCLE, SHAPE_SQUIRCLE, WAVE_WIDTH, bounceIdle, bounceResult, bounceShadow, bridgeDot, bridgePillWidth, bridgeTraveler, bubblesOrbit, bubblesSpin, clamp01, easeIn, easeInOut, easeOut, flatPath, loaderColor, loaderOnColor, loaderPalette, loaderSubtle, mix, mixRadii, ringArcPath, ringIdleArc, shapePath, shapesFrame, waveIdleSpan, wavePath, waveResultPath, } from "./loader.js";
+/**
+ * Wkłada loader do `stage` i zaczyna grać. `content` to element z treścią komponentu (ikona
+ * w środku pierścienia) - moduł tylko go skaluje, nigdy nie zmienia jego dzieci.
+ */
+export function createLoader(stage, content, options) {
+    return new Loader(stage, content, options);
+}
+/**
+ * Podmienia napis w `box` z przenikaniem: stary odpływa w górę i rozmywa się, nowy wchodzi z dołu.
+ * Pudełko musi trzymać dzieci w jednej komórce siatki (np. `.kpt-update__swap`), żeby na chwilę
+ * leżały na sobie. Stary napis od razu dostaje `aria-hidden`. Bez ruchu (`motion: false` albo
+ * systemowe "ogranicz ruch") napis zmienia się od razu.
+ */
+export function swapText(box, text, motion = true) {
+    const current = currentText(box);
+    if (current?.textContent === text)
+        return;
+    const next = document.createElement('span');
+    next.textContent = text;
+    if (!motion || reduceMotion() || typeof next.animate !== 'function' || !current) {
+        box.replaceChildren(next);
+        return;
+    }
+    current.setAttribute('aria-hidden', 'true');
+    current.setAttribute('data-leaving', '');
+    current
+        .animate({ opacity: [1, 0], transform: ['none', 'translateY(-0.45em)'], filter: ['blur(0px)', 'blur(3px)'] }, { duration: 200, easing: 'cubic-bezier(.4, 0, 1, 1)', fill: 'forwards' })
+        .finished.then(() => current.remove(), () => current.remove());
+    box.appendChild(next);
+    next.animate({ opacity: [0, 1], transform: ['translateY(0.45em)', 'none'], filter: ['blur(3px)', 'blur(0px)'] }, { duration: 300, delay: 90, easing: 'cubic-bezier(.2, 0, 0, 1)', fill: 'backwards' });
+}
+/** Zmienia bieżący napis `box` bez przenikania - licznik bajtów w trakcie pobierania. */
+export function setText(box, text) {
+    const current = currentText(box);
+    if (current)
+        current.textContent = text;
+    else
+        swapText(box, text, false);
+}
+function currentText(box) {
+    const last = box.lastElementChild;
+    return last instanceof HTMLElement && !last.hasAttribute('data-leaving') ? last : null;
+}
+let reduceQuery;
+/** Systemowe "ogranicz ruch" - zapytanie tworzone raz, bo pętla pyta o nie w każdej klatce. */
+function reduceMotion() {
+    if (reduceQuery === undefined) {
+        reduceQuery = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
+    }
+    return !!reduceQuery?.matches;
+}
+// -- SVG --
+const NS = 'http://www.w3.org/2000/svg';
+let gooSeq = 0;
+function svg(tag, attrs, parent, cls) {
+    const el = document.createElementNS(NS, tag);
+    for (const [k, v] of Object.entries(attrs))
+        el.setAttribute(k, String(v));
+    if (cls)
+        el.setAttribute('class', cls);
+    parent?.appendChild(el);
+    return el;
+}
+/** Przesunięcie i skala w jednostkach rysunku. */
+function place(el, x, y, sx = 1, sy = sx) {
+    el.setAttribute('transform', `translate(${x.toFixed(2)} ${y.toFixed(2)}) scale(${sx.toFixed(3)} ${sy.toFixed(3)})`);
+}
+/** Wartość z listy klatek w chwili `p` (0..1), klatki rozłożone równo albo wg `offsets`. */
+function keyframe(p, frames, offsets) {
+    const at = offsets ?? frames.map((_, i) => i / (frames.length - 1));
+    for (let i = 1; i < frames.length; i++) {
+        if (p <= at[i])
+            return mix(frames[i - 1], frames[i], (p - at[i - 1]) / (at[i] - at[i - 1] || 1));
+    }
+    return frames[frames.length - 1];
+}
+class Loader {
+    constructor(stage, content, options) {
+        this.stage = stage;
+        this.content = content;
+        /** Zegar loadera w sekundach - w pętli płynie z `speed`, w wyniku w czasie rzeczywistym. */
+        this.t = 0;
+        this.timers = [];
+        this.tweens = [];
+        this.phase = 'loading';
+        this.notify = true;
+        this.live = true;
+        this.frame = 0;
+        this.last = 0;
+        this.visible = true;
+        this.io = null;
+        this.step = (now) => {
+            this.frame = 0;
+            // Pierwsza klatka po pauzie liczy się jak zwykła - inaczej loader przeskoczyłby o czas postoju.
+            const dt = this.last ? Math.min(Math.max((now - this.last) / 1000, 0), 0.05) : 1 / 60;
+            this.last = now;
+            this.advance(dt);
+            if (this.visible && (this.phase !== 'settled' || this.tweens.length))
+                this.frame = requestAnimationFrame(this.step);
+            else
+                this.last = 0;
+        };
+        this.opts = { ...options };
+        if (typeof IntersectionObserver !== 'undefined') {
+            this.io = new IntersectionObserver((entries) => {
+                this.visible = entries.some((e) => e.isIntersecting);
+                // Wynik poza ekranem nikogo nie cieszy, a `settled` nie może czekać na przewinięcie.
+                if (!this.visible && this.phase === 'result')
+                    this.fastForward();
+                this.wake();
+            });
+            this.io.observe(stage);
+        }
+        this.mount();
+        if (this.opts.status !== 'loading')
+            this.play(this.opts.status, false);
+    }
+    update(next) {
+        const prev = this.opts;
+        const o = (this.opts = { ...prev, ...next });
+        const repaint = o.variant !== prev.variant ||
+            o.successColor !== prev.successColor ||
+            o.errorColor !== prev.errorColor ||
+            (o.colors ?? []).join('|') !== (prev.colors ?? []).join('|');
+        if (repaint) {
+            this.mount();
+            if (o.status !== 'loading')
+                this.play(o.status, false);
+            return;
+        }
+        if (o.status !== prev.status) {
+            if (o.status === 'loading')
+                this.mount();
+            else {
+                if (this.phase !== 'loading')
+                    this.mount();
+                this.play(o.status, true);
+            }
+        }
+        else if (o.successText !== prev.successText || o.errorText !== prev.errorText) {
+            this.scene.relabel?.();
+        }
+        this.wake();
+    }
+    destroy() {
+        if (this.frame)
+            cancelAnimationFrame(this.frame);
+        this.frame = 0;
+        this.io?.disconnect();
+        this.stage.replaceChildren();
+        if (this.content)
+            this.content.style.transform = '';
+    }
+    // -- dla scen --
+    get options() {
+        return this.opts;
+    }
+    /** Barwy pętli już jako wartości CSS. */
+    palette() {
+        return loaderPalette(this.opts.variant, this.opts.colors);
+    }
+    /** Pierwsza barwa w postaci podanej przez użytkownika (rola albo kolor) - do tła `-subtle`. */
+    firstColor() {
+        return this.opts.colors?.find((c) => c.trim() !== '') ?? 'primary';
+    }
+    resultColor(kind) {
+        return loaderColor(kind === 'success' ? this.opts.successColor : this.opts.errorColor);
+    }
+    onResultColor(kind) {
+        return loaderOnColor(kind === 'success' ? this.opts.successColor : this.opts.errorColor);
+    }
+    resultText(kind) {
+        return kind === 'success' ? this.opts.successText : this.opts.errorText;
+    }
+    hasContent() {
+        const c = this.content;
+        return !!c && (c.childElementCount > 0 || !!c.textContent?.trim());
+    }
+    /** Środek pola rysunku (tam staje znak wersji z ograniczonym ruchem). */
+    center() {
+        const [x, y, w, h] = LOADER_VIEWBOX[this.opts.variant];
+        return [x + w / 2, y + h / 2];
+    }
+    later(ms, fn) {
+        this.timers.push({ at: this.t + ms / 1000, fn });
+    }
+    tween(ms, fn, delay = 0, done) {
+        this.tweens.push({ start: this.t + delay / 1000, dur: Math.max(1, ms) / 1000, fn, done });
+    }
+    /** Scena skończyła ruch - zostają już tylko przejścia i timery. */
+    stop() {
+        this.live = false;
+    }
+    /** Element przejściowy (kropla, iskra, poświata) - znika, gdy wynik się skończy. */
+    fx(el) {
+        el.setAttribute('data-fx', '');
+        return el;
+    }
+    /** Filtr cieczy dla tej instancji - własne `id`, bo loaderów na stronie bywa kilka. */
+    goo() {
+        const id = `kpt-loader-goo-${++gooSeq}`;
+        const f = svg('filter', { id, x: -200, y: -200, width: 400, height: 400, filterUnits: 'userSpaceOnUse', 'color-interpolation-filters': 'sRGB' }, this.defs);
+        svg('feGaussianBlur', { in: 'SourceGraphic', stdDeviation: 6, result: 'blur' }, f);
+        svg('feColorMatrix', { in: 'blur', mode: 'matrix', values: '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -9', result: 'goo' }, f);
+        svg('feComposite', { in: 'SourceGraphic', in2: 'goo', operator: 'atop' }, f);
+        return `url(#${id})`;
+    }
+    /** Znak (ptaszek, krzyżyk, wykrzyknik) o boku `size`, rysowany kreską od `delay`. */
+    mark(parent, kind, size, cx, cy, color, delay = 0, instant = false) {
+        const g = svg('g', { transform: `translate(${cx - size / 2} ${cy - size / 2}) scale(${size / 24})` }, parent, 'kpt-loader__mark');
+        g.style.color = color;
+        LOADER_MARKS[kind].forEach((d, i) => {
+            const p = svg('path', { d, pathLength: 1 }, g);
+            p.style.strokeDasharray = '1 2';
+            p.style.strokeDashoffset = instant ? '0' : '1';
+            if (!instant)
+                this.tween(340, (q) => (p.style.strokeDashoffset = String(1 - LOADER_EASE.out(q))), delay + i * 140);
+        });
+        return g;
+    }
+    /** Pierścień, który rozchodzi się i gaśnie - "udało się". */
+    halo(parent, color, size, cx = 0, cy = 0) {
+        const c = this.fx(svg('circle', { cx, cy, r: size / 2 }, parent, 'kpt-loader__halo'));
+        c.style.color = color;
+        this.tween(720, (q) => {
+            const e = LOADER_EASE.out(q);
+            const s = mix(0.9, 2.1, e);
+            c.setAttribute('r', String((size / 2) * s));
+            c.style.strokeWidth = String(2 * s);
+            c.style.opacity = String(0.7 * (1 - e));
+        }, 0, () => c.remove());
+    }
+    /** Iskry rozlatujące się z `r0` do `r1` wokół środka. */
+    sparks(parent, n, color, r0, r1, cx = 0, cy = 0) {
+        for (let i = 0; i < n; i++) {
+            const a = (i / n) * Math.PI * 2 + 0.4;
+            const s = this.fx(svg('circle', { r: 3 }, parent, 'kpt-loader__spark'));
+            s.style.fill = color;
+            this.tween(620, (q) => {
+                const e = LOADER_EASE.out(q);
+                const r = mix(r0, r1, e);
+                s.setAttribute('cx', (cx + Math.cos(a) * r).toFixed(2));
+                s.setAttribute('cy', (cy + Math.sin(a) * r).toFixed(2));
+                s.setAttribute('r', (3 * mix(1, 0.2, e)).toFixed(2));
+                s.style.opacity = String(1 - e);
+            }, 0, () => s.remove());
+        }
+    }
+    /** Krótkie, gasnące potrząśnięcie w poziomie - "nie tak". Grupa nie może mieć innego transformu. */
+    shake(el, amp) {
+        const k = [0, -1, 0.8, -0.6, 0.4, -0.2, 0];
+        this.tween(480, (q) => el.setAttribute('transform', `translate(${(keyframe(q, k) * amp).toFixed(2)} 0)`), 0, () => el.removeAttribute('transform'));
+    }
+    setContentTransform(value) {
+        if (this.content)
+            this.content.style.transform = value;
+    }
+    // -- cykl życia --
+    mount() {
+        this.timers = [];
+        this.tweens = [];
+        this.t = 0;
+        this.phase = 'loading';
+        this.live = true;
+        const variant = this.opts.variant;
+        const [x, y, w, h] = LOADER_VIEWBOX[variant];
+        this.svgEl = svg('svg', { viewBox: `${x} ${y} ${w} ${h}`, 'aria-hidden': 'true', focusable: 'false' }, null, 'kpt-loader__svg');
+        this.svgEl.style.setProperty('--_vw', String(w));
+        this.svgEl.style.setProperty('--_vh', String(h));
+        this.defs = svg('defs', {}, this.svgEl);
+        this.body = svg('g', {}, this.svgEl, 'kpt-loader__body');
+        this.stage.replaceChildren(this.svgEl);
+        this.setContentTransform('');
+        this.scene = SCENES[variant](this);
+        this.scene.tick?.(0, 0);
+        this.wake();
+    }
+    play(kind, notify) {
+        this.phase = 'result';
+        this.notify = notify;
+        const ms = this.reduced() ? (this.scene.quiet?.(kind) ?? quietResult(this, kind)) : this.scene.result(kind);
+        this.later(ms, () => this.settle(kind));
+        // Wynik bez widza (od razu przy starcie, poza ekranem, w ukrytej karcie) - od razu stan końcowy.
+        const hidden = typeof document !== 'undefined' && document.visibilityState === 'hidden';
+        if (!notify || !this.visible || hidden)
+            this.fastForward();
+        this.wake();
+    }
+    settle(kind) {
+        this.phase = 'settled';
+        this.live = false;
+        // Przejścia, które jeszcze trwają (np. kreska znaku), kończymy w stanie docelowym.
+        for (const tw of this.tweens)
+            tw.fn(1);
+        for (const tw of this.tweens)
+            tw.done?.();
+        this.tweens = [];
+        this.timers = [];
+        for (const el of this.svgEl.querySelectorAll('[data-fx]'))
+            el.remove();
+        if (this.notify)
+            this.opts.onSettled?.(kind);
+    }
+    fastForward() {
+        for (let i = 0; i < 600 && this.phase === 'result'; i++)
+            this.advance(1 / 60);
+    }
+    reduced() {
+        return this.opts.reduced || reduceMotion();
+    }
+    wake() {
+        if (this.frame || !this.visible || typeof requestAnimationFrame === 'undefined')
+            return;
+        if (this.phase === 'settled' && !this.tweens.length)
+            return;
+        this.frame = requestAnimationFrame(this.step);
+    }
+    advance(dt) {
+        const scaled = this.phase === 'loading' ? dt * Math.max(0.05, this.opts.speed || 1) * (this.reduced() ? 0.35 : 1) : dt;
+        this.t += scaled;
+        const due = this.timers.filter((tm) => tm.at <= this.t + 1e-9).sort((a, b) => a.at - b.at);
+        if (due.length) {
+            this.timers = this.timers.filter((tm) => !due.includes(tm));
+            for (const tm of due) {
+                tm.fn();
+                if (this.phase === 'settled')
+                    return;
+            }
+        }
+        for (const tw of [...this.tweens]) {
+            if (this.t < tw.start)
+                continue;
+            const p = clamp01((this.t - tw.start) / tw.dur);
+            tw.fn(p);
+            if (p >= 1) {
+                this.tweens.splice(this.tweens.indexOf(tw), 1);
+                tw.done?.();
+            }
+        }
+        if (this.live)
+            this.scene.tick?.(this.t, scaled);
+    }
+}
+/** Wynik z ograniczonym ruchem: rysunek gaśnie, a w środku pojawia się znak w kółku. */
+function quietResult(L, kind) {
+    L.stop();
+    const body = L.body;
+    L.tween(180, (q) => (body.style.opacity = String(1 - q)));
+    const [cx, cy] = L.center();
+    // Obok rysunku, nie w nim - gaszony rysunek nie może zabrać znaku ze sobą.
+    const badge = svg('g', {}, body.parentNode);
+    const dot = svg('circle', { cx, cy, r: 22 }, badge);
+    dot.style.fill = L.resultColor(kind);
+    L.mark(badge, kind === 'success' ? 'check' : 'x', 24, cx, cy, L.onResultColor(kind), 0, true);
+    badge.style.opacity = '0';
+    L.tween(200, (q) => (badge.style.opacity = String(q)), 120);
+    return LOADER_QUIET_MS;
+}
+// -- warianty --
+const SCENES = {
+    bubbles: bubblesScene,
+    bridge: bridgeScene,
+    shapes: shapesScene,
+    ring: ringScene,
+    wave: waveScene,
+    bounce: bounceScene,
+};
+/** 1 - cztery krople krążą, zlewają się i rozpryskują; wynik: jedna kropla rośnie w znak. */
+function bubblesScene(L) {
+    const grp = svg('g', {}, L.body);
+    const layer = svg('g', { filter: L.goo() }, grp);
+    const blobs = L.palette().map((color) => {
+        const b = svg('circle', { r: 14 }, layer, 'kpt-loader__blob');
+        b.style.fill = color;
+        return b;
+    });
+    let angle = 0;
+    let radius = 6;
+    let res = null;
+    return {
+        tick(t, dt) {
+            let r;
+            let scale = 1;
+            let rt = 0;
+            if (!res)
+                r = radius = bubblesOrbit(t);
+            else {
+                rt = t - res.t0;
+                r = res.r0 * (1 - easeIn(clamp01(rt / 0.4)));
+                scale = 1 + (res.kind === 'success' ? 1.25 : 0.9) * LOADER_EASE.wobble(clamp01((rt - 0.42) / 0.7));
+            }
+            angle += bubblesSpin(r) * (res ? Math.exp(-Math.max(0, rt - 0.4) * 2.5) : 1) * dt;
+            blobs.forEach((b, i) => {
+                const th = angle + (i * Math.PI) / 2;
+                const rr = r * (1 + 0.1 * Math.sin(t * 3.1 + i * 1.9));
+                place(b, Math.cos(th) * rr, Math.sin(th) * rr, scale * (res ? 1 : 1 + 0.12 * Math.sin(t * 4.3 + i * 1.3)));
+            });
+        },
+        result(kind) {
+            const ok = kind === 'success';
+            res = { kind, t0: L.t, r0: radius };
+            L.later(200, () => blobs.forEach((b) => (b.style.fill = L.resultColor(kind))));
+            L.later(760, () => L.mark(grp, ok ? 'check' : 'x', 30, 0, 0, L.onResultColor(kind)));
+            if (ok) {
+                L.later(560, () => {
+                    // Rozprysk: krople odrywają się od dużej kropli.
+                    for (let i = 0; i < 8; i++) {
+                        const a = (i / 8) * Math.PI * 2 + 0.3;
+                        const dist = 62 + (i % 3) * 8;
+                        const d = L.fx(svg('circle', { r: 7 }, layer, 'kpt-loader__blob'));
+                        d.style.fill = L.resultColor(kind);
+                        L.tween(720, (q) => {
+                            const e = LOADER_EASE.splash(q);
+                            place(d, Math.cos(a) * dist * e, Math.sin(a) * dist * e, mix(1, 0.25, e));
+                        }, 0, () => d.remove());
+                    }
+                    L.halo(grp, L.resultColor(kind), 64);
+                });
+            }
+            else {
+                L.later(820, () => L.shake(grp, 10));
+                L.later(1000, () => {
+                    // Kapanie: krople zwisają, rozciągają się i odrywają w dół.
+                    [-10, 5, 14].forEach((x, j) => {
+                        const d = L.fx(svg('circle', { r: 7 }, layer, 'kpt-loader__blob'));
+                        d.style.fill = L.resultColor(kind);
+                        place(d, x, 12, 0.6);
+                        L.tween(700, (q) => {
+                            const e = LOADER_EASE.in(q);
+                            const at = [0, 0.3, 1];
+                            place(d, x, keyframe(e, [12, 26, 86], at), keyframe(e, [0.6, 1, 0.5], at), keyframe(e, [0.6, 1.3, 1.4], at));
+                        }, j * 160, () => d.remove());
+                    });
+                });
+            }
+            return LOADER_RESULT_MS.bubbles[kind];
+        },
+    };
+}
+/** 2 - kropla przelatuje przez rząd kropek mostkiem cieczy; wynik: kapsuła z napisem. */
+function bridgeScene(L) {
+    const grp = svg('g', {}, L.body);
+    const layer = svg('g', { filter: L.goo() }, grp);
+    const [dotColor, travelerColor] = L.palette();
+    const dots = [-40, 0, 40].map((home) => {
+        const el = svg('circle', { r: 9 }, layer, 'kpt-loader__blob');
+        el.style.fill = dotColor;
+        return { home, el };
+    });
+    const traveler = svg('circle', { r: 11 }, layer, 'kpt-loader__blob');
+    traveler.style.fill = travelerColor;
+    let x = 0;
+    let res = null;
+    let pill = null;
+    const hideRow = () => {
+        for (const el of [...dots.map((d) => d.el), traveler])
+            el.style.visibility = 'hidden';
+        L.stop();
+    };
+    /** Kapsuła i jej treść; `instant` - od razu w rozmiarze końcowym. */
+    const showPill = (kind, instant) => {
+        const rect = svg('rect', {}, layer, 'kpt-loader__blob');
+        rect.style.fill = L.resultColor(kind);
+        const content = svg('g', {}, grp);
+        content.style.color = L.onResultColor(kind);
+        const text = svg('text', { 'font-size': 15, 'dominant-baseline': 'central' }, content, 'kpt-loader__text');
+        text.style.fill = 'currentColor';
+        text.textContent = L.resultText(kind);
+        const mark = L.mark(content, kind === 'success' ? 'check' : 'x', 18, 0, 0, 'currentColor', instant ? 0 : 320, instant);
+        pill = { rect, content, mark, text, width: 0 };
+        layoutPill();
+        const size = (w, h) => {
+            rect.setAttribute('x', String(-w / 2));
+            rect.setAttribute('y', String(-h / 2));
+            rect.setAttribute('width', String(Math.max(0, w)));
+            rect.setAttribute('height', String(h));
+            rect.setAttribute('rx', String(h / 2));
+        };
+        const target = pill.width;
+        if (instant) {
+            size(target, 40);
+            return;
+        }
+        size(22, 22);
+        L.tween(700, (q) => {
+            const e = LOADER_EASE.wobble(q);
+            size(mix(22, target, e), mix(22, 40, e));
+        });
+        content.style.opacity = '0';
+        L.tween(320, (q) => {
+            const e = LOADER_EASE.out(q);
+            content.style.opacity = String(e);
+            content.setAttribute('transform', `translate(0 ${(6 * (1 - e)).toFixed(2)})`);
+        }, 200);
+    };
+    /** Szerokość z napisu: mierzymy wyrenderowany tekst, a bez układu (ukryty loader) szacujemy. */
+    const layoutPill = () => {
+        if (!pill)
+            return;
+        let measured = 0;
+        try {
+            measured = pill.text.getComputedTextLength();
+        }
+        catch {
+            // Firefox rzuca dla tekstu bez układu (`display: none` u przodka) - zostaje szacunek.
+        }
+        const textWidth = measured > 0 ? measured : (pill.text.textContent?.length ?? 0) * 8.4;
+        const width = bridgePillWidth(textWidth);
+        const left = -(width - 34) / 2;
+        pill.mark.setAttribute('transform', `translate(${left} -9) scale(0.75)`);
+        pill.text.setAttribute('x', String(left + 18 + 6.4));
+        pill.width = width;
+    };
+    return {
+        tick(t) {
+            let sx = 1;
+            let sy = 1;
+            let gather = 1;
+            if (!res)
+                ({ x, sx, sy } = bridgeTraveler(t));
+            else {
+                const p = easeInOut(clamp01((t - res.t0) / 0.38));
+                x = res.x0 * (1 - p);
+                gather = 1 - p;
+            }
+            place(traveler, x, 0, sx, sy);
+            for (const d of dots) {
+                const f = bridgeDot(d.home, x, gather);
+                place(d.el, f.x, 0, f.scale);
+            }
+        },
+        result(kind) {
+            res = { kind, t0: L.t, x0: x };
+            L.later(330, () => showPill(kind, false));
+            L.later(460, hideRow);
+            if (kind === 'error')
+                L.later(950, () => L.shake(grp, 9));
+            return LOADER_RESULT_MS.bridge[kind];
+        },
+        quiet(kind) {
+            res = { kind, t0: L.t, x0: x };
+            hideRow();
+            showPill(kind, true);
+            return LOADER_QUIET_MS;
+        },
+        relabel() {
+            if (!pill || !res)
+                return;
+            pill.text.textContent = L.resultText(res.kind);
+            layoutPill();
+            const w = pill.width;
+            pill.rect.setAttribute('x', String(-w / 2));
+            pill.rect.setAttribute('width', String(w));
+        },
+    };
+}
+/** 3 - kształt przechodzi płynnie w następny i obraca się sprężyście; wynik: koło albo kwadrat. */
+function shapesScene(L) {
+    const bg = svg('circle', { r: 46 }, L.body, 'kpt-loader__shape-bg');
+    bg.style.fill = loaderSubtle(L.firstColor());
+    const path = svg('path', {}, L.body, 'kpt-loader__blob');
+    path.style.fill = L.palette()[0];
+    let radii = [];
+    let rotation = 0;
+    let res = null;
+    return {
+        tick(t) {
+            let scale;
+            let r;
+            let rot;
+            if (!res) {
+                const f = shapesFrame(t);
+                r = radii = f.radii;
+                rot = rotation = f.rotation;
+                scale = f.scale;
+            }
+            else {
+                const rt = t - res.t0;
+                const ok = res.kind === 'success';
+                r = mixRadii(res.r0, ok ? SHAPE_CIRCLE : SHAPE_SQUIRCLE, LOADER_EASE.wobble(clamp01(rt / 0.7)));
+                rot = mix(res.rot0, res.rot1, easeOut(clamp01(rt / 0.8)));
+                if (!ok && rt > 0.35)
+                    rot += 0.22 * Math.sin((rt - 0.35) * 26) * Math.exp(-(rt - 0.35) * 3.5);
+                scale = 30 * (1 + (ok ? 0.32 : 0.14) * LOADER_EASE.wobble(clamp01((rt - 0.12) / 0.7)));
+            }
+            path.setAttribute('d', shapePath(r, rot, scale));
+        },
+        result(kind) {
+            const quarter = Math.PI / 2;
+            res = { kind, t0: L.t, r0: radii, rot0: rotation, rot1: Math.ceil((rotation + 1.2) / quarter) * quarter + quarter / 2 };
+            L.later(260, () => {
+                path.style.fill = L.resultColor(kind);
+                L.tween(480, (q) => {
+                    const e = LOADER_EASE.out(q);
+                    bg.style.opacity = String(1 - e);
+                    bg.setAttribute('r', String(46 * mix(1, 1.3, e)));
+                });
+            });
+            L.later(600, () => {
+                L.mark(L.body, kind === 'success' ? 'check' : 'x', 34, 0, 0, L.onResultColor(kind));
+                if (kind === 'success')
+                    L.halo(L.body, L.resultColor(kind), 80);
+            });
+            return LOADER_RESULT_MS.shapes[kind];
+        },
+    };
+}
+/**
+ * 4 - pierścień z falą. Z treścią (ikona aplikacji) ikona kurczy się w środku, a wynik ją
+ * wypuszcza; bez treści pierścień sam domyka się albo zwija i rysuje znak w środku.
+ */
+function ringScene(L) {
+    const grp = svg('g', {}, L.body);
+    const ring = svg('g', {}, grp);
+    const track = svg('path', {}, ring, 'kpt-loader__track');
+    const arc = svg('path', {}, ring, 'kpt-loader__arc');
+    arc.style.stroke = L.palette()[0];
+    const withContent = L.hasContent();
+    const iconScale = (s, extra = '') => L.setContentTransform(`scale(${s.toFixed(3)})${extra}`);
+    if (withContent)
+        iconScale(0.7);
+    let det = null;
+    let shown = 0;
+    let a0 = 0;
+    let a1 = 0;
+    let res = null;
+    return {
+        tick(t, dt) {
+            let amp = 2.2;
+            if (!res) {
+                ({ a0, a1 } = ringIdleArc(t));
+                const target = L.options.progress;
+                if (target != null) {
+                    // Z nieokreślonego do postępu: łuk dojeżdża do "dwunastej", a wartość goni cel wygładzona.
+                    det ??= { t0: t, base: -90 + 360 * Math.ceil((a0 + 90) / 360) };
+                    shown += (target - shown) * (1 - Math.exp(-dt * 8));
+                    const kb = easeInOut(clamp01((t - det.t0) / 0.5));
+                    a0 = mix(a0, det.base, kb);
+                    a1 = mix(a1, det.base + Math.max(4, 360 * shown), kb);
+                }
+                else if (det) {
+                    det = null;
+                    shown = 0;
+                }
+            }
+            else {
+                const rt = t - res.t0;
+                amp = 2.2 * (1 - easeOut(clamp01(rt / 0.35)));
+                a0 = res.base;
+                a1 = res.kind === 'success' ? mix(res.from, a0 + 360, easeOut(clamp01(rt / 0.35))) : mix(res.from, a0, easeIn(clamp01(rt / 0.45)));
+            }
+            arc.setAttribute('d', ringArcPath(a0, a1, amp, t * 5));
+            const gap = a1 - a0 < 0.5 ? 0 : 14;
+            track.setAttribute('d', a1 - a0 > 340 ? '' : ringArcPath(a1 + gap, a0 + 360 - gap - (gap ? 0 : 0.1), 0, 0));
+        },
+        result(kind) {
+            const ok = kind === 'success';
+            res = { kind, t0: L.t, base: a0, from: a1 };
+            if (withContent) {
+                if (ok) {
+                    L.later(350, () => {
+                        L.tween(380, (q) => {
+                            const e = LOADER_EASE.out(q);
+                            ring.style.opacity = String(1 - e);
+                            ring.setAttribute('transform', `scale(${mix(1, 1.14, e).toFixed(3)})`);
+                        });
+                        L.tween(700, (q) => iconScale(mix(0.7, 1, LOADER_EASE.wobble(q))));
+                    });
+                    L.later(520, () => L.sparks(grp, 6, L.resultColor(kind), 34, 54));
+                    L.later(800, () => L.stop());
+                }
+                else {
+                    L.later(200, () => track.style.setProperty('stroke', 'var(--kpt-color-danger-border)'));
+                    L.later(450, () => L.tween(480, (q) => iconScale(0.7, ` rotate(${keyframe(q, [0, -9, 8, -5, 3, 0]).toFixed(2)}deg)`)));
+                    L.later(520, () => badge(kind, false));
+                    L.later(1000, () => L.stop());
+                }
+            }
+            else if (ok) {
+                L.later(250, () => (arc.style.stroke = L.resultColor(kind)));
+                L.later(420, () => {
+                    L.mark(grp, 'check', 40, 0, 0, L.resultColor(kind));
+                    L.halo(grp, L.resultColor(kind), 70);
+                });
+                L.later(800, () => L.stop());
+            }
+            else {
+                L.later(200, () => {
+                    track.style.setProperty('stroke', 'var(--kpt-color-danger-border)');
+                    arc.style.stroke = L.resultColor(kind);
+                });
+                L.later(480, () => L.mark(grp, 'x', 30, 0, 0, L.resultColor(kind)));
+                L.later(600, () => L.shake(grp, 8));
+                L.later(1000, () => L.stop());
+            }
+            return LOADER_RESULT_MS.ring[kind];
+        },
+        quiet(kind) {
+            if (!withContent)
+                return quietResult(L, kind);
+            L.stop();
+            ring.style.opacity = '0';
+            iconScale(1);
+            if (kind === 'error')
+                badge(kind, true);
+            return LOADER_QUIET_MS;
+        },
+    };
+    /** Znaczek błędu na rogu ikony - wyskakuje na sprężynie. */
+    function badge(kind, instant) {
+        const g = svg('g', {}, grp);
+        const dot = svg('circle', { r: 11 }, g);
+        dot.style.fill = L.resultColor(kind);
+        L.mark(g, 'alert', 16, 0, 0, L.onResultColor(kind), 160, instant);
+        if (instant) {
+            place(g, 33, -33);
+            return;
+        }
+        place(g, 33, -33, 0.2);
+        g.style.opacity = '0';
+        L.tween(560, (q) => place(g, 33, -33, mix(0.2, 1, LOADER_EASE.pop(q))));
+        L.tween(160, (q) => (g.style.opacity = String(q)));
+    }
+}
+/** 6 - pasek postępu jako fala; wynik: fala wygładza się, kurczy w kreskę i zgina w znak. */
+function waveScene(L) {
+    const grp = svg('g', {}, L.body);
+    const track = svg('path', {}, grp, 'kpt-loader__track kpt-loader__line');
+    const act = svg('path', {}, grp, 'kpt-loader__line');
+    act.style.stroke = L.palette()[0];
+    let det = null;
+    let shown = 0;
+    let x0 = 0;
+    let x1 = 0;
+    let res = null;
+    return {
+        tick(t, dt) {
+            const phase = t * 7;
+            if (res) {
+                const r = waveResultPath(res.kind, t - res.t0, res.x0, res.x1, phase);
+                act.setAttribute('d', r.d);
+                if (r.mark)
+                    act.style.strokeWidth = '5';
+                return;
+            }
+            ({ x0, x1 } = waveIdleSpan(t));
+            const target = L.options.progress;
+            if (target != null) {
+                det ??= { t0: t };
+                shown += (target - shown) * (1 - Math.exp(-dt * 8));
+                const kb = easeInOut(clamp01((t - det.t0) / 0.4));
+                x0 = mix(x0, 0, kb);
+                x1 = mix(x1, WAVE_WIDTH * shown, kb);
+            }
+            else if (det) {
+                det = null;
+                shown = 0;
+            }
+            x0 = Math.min(Math.max(x0, 0), WAVE_WIDTH);
+            x1 = Math.min(Math.max(x1, 0), WAVE_WIDTH);
+            act.setAttribute('d', wavePath(x0, x1, 3, phase));
+            track.setAttribute('d', flatPath(0, x0 - 8) + flatPath(x1 + 8, WAVE_WIDTH));
+        },
+        result(kind) {
+            const ok = kind === 'success';
+            res = { kind, t0: L.t, x0, x1 };
+            L.later(ok ? 300 : 60, () => (act.style.stroke = L.resultColor(kind)));
+            L.later(250, () => L.tween(250, (q) => (track.style.opacity = String(1 - q))));
+            if (!ok)
+                L.later(780, () => L.shake(grp, 8));
+            L.later(1450, () => L.stop());
+            return LOADER_RESULT_MS.wave[kind];
+        },
+    };
+}
+/** 8 - trzy bąbelki skaczą z cieniem; wynik: wspólny skok i lądowanie znakiem albo kałuża. */
+function bounceScene(L) {
+    const grp = svg('g', {}, L.body);
+    const balls = L.palette().map((color, i) => {
+        const shadow = svg('ellipse', { rx: 11, ry: 3 }, grp, 'kpt-loader__shadow');
+        const el = svg('g', {}, grp);
+        // Kula stoi na początku układu: skala od dołu, więc przysiad nie odrywa jej od ziemi.
+        const body = svg('circle', { cy: -10, r: 10 }, el, 'kpt-loader__blob');
+        body.style.fill = color;
+        return { home: (i - 1) * 30, h: 0, from: { x: 0, h: 0 }, shadow, el, body };
+    });
+    let res = null;
+    const put = (b, f) => {
+        place(b.el, f.x, BOUNCE_GROUND - f.h, f.sx * f.k, f.sy * f.k);
+        const s = bounceShadow(f);
+        place(b.shadow, f.x, BOUNCE_GROUND, s.scale);
+        b.shadow.style.opacity = s.opacity.toFixed(3);
+        b.el.style.visibility = f.k <= 0 ? 'hidden' : '';
+    };
+    return {
+        tick(t) {
+            balls.forEach((b, i) => {
+                if (!res) {
+                    const f = bounceIdle(t, i, b.home);
+                    b.h = f.h;
+                    put(b, f);
+                }
+                else
+                    put(b, bounceResult(res.kind, t - res.t0, i, b.from));
+            });
+        },
+        result(kind) {
+            const ok = kind === 'success';
+            for (const b of balls)
+                b.from = { x: b.home, h: b.h };
+            res = { kind, t0: L.t };
+            L.later(ok ? 300 : 250, () => balls.forEach((b) => (b.body.style.fill = L.resultColor(kind))));
+            L.later(ok ? 1000 : 1150, () => L.mark(grp, ok ? 'check' : 'x', ok ? 28 : 20, 0, BOUNCE_GROUND - (ok ? 26 : 17), L.onResultColor(kind)));
+            if (ok)
+                L.later(870, () => L.sparks(grp, 6, L.resultColor(kind), 30, 52, 0, BOUNCE_GROUND - 26));
+            L.later(1500, () => L.stop());
+            return LOADER_RESULT_MS.bounce[kind];
+        },
+    };
+}