@konce-pt/motion 0.0.0-stage → 0.15.0

package/dist/stepper-dom.js

@@ -0,0 +1,44 @@
+import { layoutMotionAllowed } from "./dom.js";
+const STEPPER_ID = 'kpt-stepper-light';
+/**
+ * Światło przejścia kreatora wg `stepperSchedule`: kometa (`comet`, pozycjonowana względem tego
+ * samego przodka co linie) jedzie po kolejnych odcinkach `connectors`, gaśnie na ich końcu,
+ * a znacznik, do którego dociera kolor, wypuszcza falę - `::before` animowany z WAAPI, więc
+ * nie potrzebuje dodatkowego węzła. Wołaj po renderze nowego stanu. Przy "ogranicz ruch" nic
+ * nie robi.
+ */
+export function playStepperLight(schedule, comet, connectors, markers) {
+    if (!layoutMotionAllowed())
+        return;
+    if (comet)
+        for (const a of comet.getAnimations())
+            if (a.id === STEPPER_ID)
+                a.cancel();
+    if (!schedule.direction)
+        return;
+    const parent = comet?.offsetParent?.getBoundingClientRect();
+    if (comet && parent) {
+        schedule.lines.forEach((line, k) => {
+            const el = connectors[k];
+            if (!line.duration || !el)
+                return;
+            const r = el.getBoundingClientRect();
+            const y = r.top + r.height / 2 - parent.top;
+            const [a, b] = schedule.direction > 0 ? [r.left, r.right] : [r.right, r.left];
+            const x = (p) => a + (b - a) * p - parent.left;
+            comet.animate([
+                { transform: `translate(${x(0)}px, ${y}px)`, opacity: 0 },
+                { transform: `translate(${x(0.15)}px, ${y}px)`, opacity: 1, offset: 0.15 },
+                { transform: `translate(${x(0.85)}px, ${y}px)`, opacity: 1, offset: 0.85 },
+                { transform: `translate(${x(1)}px, ${y}px)`, opacity: 0 },
+            ], { id: STEPPER_ID, delay: line.delay, duration: line.duration, easing: 'cubic-bezier(.4, 0, .2, 1)' });
+        });
+    }
+    const target = schedule.arrival ? markers[schedule.arrival.index] : undefined;
+    if (target && schedule.arrival) {
+        target.animate([
+            { opacity: 0.9, transform: 'scale(1)' },
+            { opacity: 0, transform: 'scale(2)' },
+        ], { id: STEPPER_ID, delay: schedule.arrival.at, duration: 640, easing: 'ease-out', pseudoElement: '::before' });
+    }
+}

package/dist/stepper.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Harmonogram przełączenia kroku w kreatorze (`kpt-stepper`): kolor płynie po linii od kroku
+ * do kroku, a znacznik zmienia wygląd dopiero, gdy kolor do niego dotrze. Przy skoku o kilka
+ * kroków odcinki jadą po kolei, a całość mieści się w budżecie czasu.
+ *
+ * Wynik to same liczby - porty wpisują je w zmienne CSS (opóźnienia przejść) i w WAAPI (kometa,
+ * fala). Stan komponentu zmienia się od razu; harmonogram mówi tylko, kiedy to widać.
+ */
+export interface KptStepTiming {
+    /** Start w ms od zmiany. */
+    delay: number;
+    /** Czas trwania w ms. */
+    duration: number;
+}
+export interface KptStepperSchedule {
+    /** Opóźnienie zmiany wyglądu znacznika (indeks kroku -> ms); 0 dla nieruszanych. */
+    markers: number[];
+    /** Odcinek linii między krokiem `k` a `k + 1`. */
+    lines: KptStepTiming[];
+    /** Znacznik, do którego kolor dociera na końcu (nowy aktywny krok), i kiedy. */
+    arrival: {
+        index: number;
+        at: number;
+    } | null;
+    /** Kierunek: 1 do przodu, -1 wstecz, 0 bez zmiany. */
+    direction: 1 | -1 | 0;
+    /** Czas całego przejścia w ms. */
+    total: number;
+}
+export interface KptStepperScheduleOptions {
+    /** Najdłuższy pojedynczy odcinek (ms). */
+    segment?: number;
+    /** Najkrótszy odcinek przy długim skoku (ms). */
+    minSegment?: number;
+    /** Budżet całego skoku - dłuższe skoki skracają odcinki (ms). */
+    budget?: number;
+    /** Przerwa między zalaniem znacznika a ruszeniem linii (ms). */
+    gap?: number;
+}
+/**
+ * @param count liczba kroków
+ * @param from  krok przed zmianą
+ * @param to    krok po zmianie
+ */
+export declare function stepperSchedule(count: number, from: number, to: number, options?: KptStepperScheduleOptions): KptStepperSchedule;
+/**
+ * Tempo linii z jednego czasu (`animationDuration` kreatora), żeby ten sam input sterował całym
+ * ruchem, a nie tylko wejściem treści. Dla 500 ms daje wartości domyślne `stepperSchedule`;
+ * 0 ms - wszystko od razu.
+ */
+export declare function stepperScheduleOptions(duration: number): KptStepperScheduleOptions;

package/dist/stepper.js

@@ -0,0 +1,60 @@
+/**
+ * Harmonogram przełączenia kroku w kreatorze (`kpt-stepper`): kolor płynie po linii od kroku
+ * do kroku, a znacznik zmienia wygląd dopiero, gdy kolor do niego dotrze. Przy skoku o kilka
+ * kroków odcinki jadą po kolei, a całość mieści się w budżecie czasu.
+ *
+ * Wynik to same liczby - porty wpisują je w zmienne CSS (opóźnienia przejść) i w WAAPI (kometa,
+ * fala). Stan komponentu zmienia się od razu; harmonogram mówi tylko, kiedy to widać.
+ */
+/**
+ * @param count liczba kroków
+ * @param from  krok przed zmianą
+ * @param to    krok po zmianie
+ */
+export function stepperSchedule(count, from, to, options = {}) {
+    const { segment = 420, minSegment = 200, budget = 900, gap = 60 } = options;
+    const markers = Array.from({ length: Math.max(0, count) }, () => 0);
+    const lines = Array.from({ length: Math.max(0, count - 1) }, () => ({ delay: 0, duration: 0 }));
+    const last = count - 1;
+    from = Math.max(0, Math.min(from, last));
+    to = Math.max(0, Math.min(to, last));
+    if (count < 2 || from === to)
+        return { markers, lines, arrival: null, direction: 0, total: 0 };
+    const n = Math.abs(to - from);
+    const dur = Math.round(Math.max(minSegment, Math.min(segment, budget / n)));
+    let t = 0;
+    if (to > from) {
+        // Krok k zalewa się kolorem, po chwili rusza linia, a jej koniec zapala krok k + 1.
+        const g = n > 1 ? Math.round(gap / 2) : gap;
+        for (let k = from; k < to; k++) {
+            markers[k] = t;
+            lines[k] = { delay: t + g, duration: dur };
+            t += g + dur;
+            markers[k + 1] = t;
+        }
+        return { markers, lines, arrival: { index: to, at: t }, direction: 1, total: t };
+    }
+    // Wstecz: krok k + 1 gaśnie, linia zwija się szybciej, a jej koniec przywraca krok k.
+    const back = Math.round(dur * 0.8);
+    for (let k = from - 1; k >= to; k--) {
+        markers[k + 1] = t;
+        lines[k] = { delay: t, duration: back };
+        t += back;
+        markers[k] = t;
+    }
+    return { markers, lines, arrival: { index: to, at: t }, direction: -1, total: t };
+}
+/**
+ * Tempo linii z jednego czasu (`animationDuration` kreatora), żeby ten sam input sterował całym
+ * ruchem, a nie tylko wejściem treści. Dla 500 ms daje wartości domyślne `stepperSchedule`;
+ * 0 ms - wszystko od razu.
+ */
+export function stepperScheduleOptions(duration) {
+    const d = Math.max(0, duration);
+    return {
+        segment: Math.round(d * 0.84),
+        minSegment: Math.round(Math.min(200, d * 0.4)),
+        budget: Math.round(d * 1.8),
+        gap: Math.round(Math.min(60, d * 0.12)),
+    };
+}

package/dist/swap.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Podmiana treści w miejscu (krok kreatora, zakładka): stara treść wychodzi w kierunku przeciwnym
+ * do ruchu i rozmywa się, a pojemnik płynnie zmienia wysokość. Wejście nowej treści zostaje po
+ * stronie CSS komponentu (`@keyframes` na nowym elemencie).
+ *
+ * Framework zamienia treść od razu, więc starej już nie ma po renderze - dlatego wołasz to PRZED
+ * zmianą (zdejmuje klon starej treści i mierzy wysokość), a zwróconą funkcję po renderze
+ * (Angular: `afterNextRender`, React: `useLayoutEffect`). Warstwa DOM bez testów.
+ *
+ * @param container pojemnik treści - musi być pozycjonowany (`position: relative`)
+ * @param direction 1 - ruch do przodu (stara treść ucieka w lewo), -1 - wstecz
+ */
+export declare function preparePanelSwap(container: HTMLElement, direction: 1 | -1): () => void;

package/dist/swap.js

@@ -0,0 +1,61 @@
+import { layoutMotionAllowed } from "./dom.js";
+import { springEasing } from "./spring.js";
+/**
+ * Podmiana treści w miejscu (krok kreatora, zakładka): stara treść wychodzi w kierunku przeciwnym
+ * do ruchu i rozmywa się, a pojemnik płynnie zmienia wysokość. Wejście nowej treści zostaje po
+ * stronie CSS komponentu (`@keyframes` na nowym elemencie).
+ *
+ * Framework zamienia treść od razu, więc starej już nie ma po renderze - dlatego wołasz to PRZED
+ * zmianą (zdejmuje klon starej treści i mierzy wysokość), a zwróconą funkcję po renderze
+ * (Angular: `afterNextRender`, React: `useLayoutEffect`). Warstwa DOM bez testów.
+ *
+ * @param container pojemnik treści - musi być pozycjonowany (`position: relative`)
+ * @param direction 1 - ruch do przodu (stara treść ucieka w lewo), -1 - wstecz
+ */
+export function preparePanelSwap(container, direction) {
+    if (!layoutMotionAllowed())
+        return () => undefined;
+    const current = container.firstElementChild;
+    // Ślady poprzedniej podmiany: przerwana zmiana nie zostawia ducha ani wysokości w stylu.
+    for (const a of container.getAnimations())
+        a.cancel();
+    for (const old of container.querySelectorAll(':scope > [data-kpt-swap-ghost]'))
+        old.remove();
+    const h0 = container.offsetHeight;
+    const ghost = current instanceof HTMLElement ? current.cloneNode(true) : null;
+    const top = current instanceof HTMLElement ? current.offsetTop : 0;
+    return () => {
+        if (ghost instanceof HTMLElement) {
+            ghost.setAttribute('data-kpt-swap-ghost', '');
+            ghost.setAttribute('aria-hidden', 'true');
+            ghost.inert = true;
+            for (const node of [ghost, ...ghost.querySelectorAll('[id]')])
+                node.removeAttribute('id');
+            Object.assign(ghost.style, {
+                position: 'absolute',
+                insetInline: '0',
+                top: `${top}px`,
+                pointerEvents: 'none',
+                animation: 'none',
+            });
+            container.appendChild(ghost);
+            ghost
+                .animate([
+                { opacity: 1, transform: 'none', filter: 'blur(0)' },
+                { opacity: 0, transform: `translateX(${-direction * 14}px)`, filter: 'blur(4px)' },
+            ], { duration: 180, easing: 'ease-in', fill: 'forwards' })
+                .finished.then(() => ghost.remove(), () => ghost.remove());
+        }
+        const h1 = container.offsetHeight;
+        if (Math.abs(h1 - h0) < 1)
+            return;
+        const overflow = container.style.overflow;
+        container.style.overflow = 'clip';
+        const restore = () => {
+            container.style.overflow = overflow;
+        };
+        container
+            .animate([{ height: `${h0}px` }, { height: `${h1}px` }], { duration: 440, easing: springEasing(0.18) })
+            .finished.then(restore, restore);
+    };
+}

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@konce-pt/motion",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.15.0",
+  "description": "Motion core for Koncept UI - spring curves sampled to linear() and FLIP flight plans for layout changes. Framework-free TypeScript, zero runtime dependencies.",
+  "license": "MIT",
+  "author": "konce.pt",
+  "homepage": "https://ui.konce.pt/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/konce-pt/koncept-ui.git",
+    "directory": "packages/motion"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/konce-pt/koncept-ui/-/issues"
+  },
+  "keywords": [
+    "motion",
+    "animation",
+    "flip",
+    "spring",
+    "design-system",
+    "koncept-ui",
+    "kpt"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "typescript": "~6.0.3"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "node --test \"src/**/*.test.ts\"",
+    "lint": "eslint .",
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
+  }
 }