kuinetic 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +99 -0
- package/dist/esm/chunk-LWS4OSLX.mjs +730 -0
- package/dist/esm/chunk-QZIJ7WZI.mjs +3312 -0
- package/dist/esm/chunk-R3TGDJKA.mjs +1264 -0
- package/dist/esm/core/index.mjs +34 -0
- package/dist/esm/effects/index.mjs +27 -0
- package/dist/esm/index.mjs +52 -0
- package/dist/kuinetic.all.js +5291 -0
- package/dist/kuinetic.css +2338 -0
- package/dist/kuinetic.js +5281 -0
- package/dist/types/core/activation.d.ts +21 -0
- package/dist/types/core/animator.d.ts +216 -0
- package/dist/types/core/attrs.d.ts +15 -0
- package/dist/types/core/capabilities.d.ts +19 -0
- package/dist/types/core/channels.d.ts +25 -0
- package/dist/types/core/compile.d.ts +49 -0
- package/dist/types/core/dom-watcher.d.ts +35 -0
- package/dist/types/core/effect-context.d.ts +49 -0
- package/dist/types/core/element-config.d.ts +52 -0
- package/dist/types/core/flip.d.ts +80 -0
- package/dist/types/core/gesture.d.ts +99 -0
- package/dist/types/core/index.d.ts +14 -0
- package/dist/types/core/instances.d.ts +98 -0
- package/dist/types/core/js-effect-preparer.d.ts +46 -0
- package/dist/types/core/js-params.d.ts +124 -0
- package/dist/types/core/owned-styles.d.ts +44 -0
- package/dist/types/core/params.d.ts +65 -0
- package/dist/types/core/parse.d.ts +22 -0
- package/dist/types/core/path-morph.d.ts +83 -0
- package/dist/types/core/play.d.ts +48 -0
- package/dist/types/core/registry.d.ts +38 -0
- package/dist/types/core/reporter.d.ts +35 -0
- package/dist/types/core/scroll-scheduler.d.ts +153 -0
- package/dist/types/core/spring.d.ts +83 -0
- package/dist/types/core/stagger.d.ts +19 -0
- package/dist/types/core/style-plan.d.ts +56 -0
- package/dist/types/core/types.d.ts +239 -0
- package/dist/types/effects/catalog/ambient.d.ts +18 -0
- package/dist/types/effects/catalog/core.d.ts +19 -0
- package/dist/types/effects/catalog/feedback.d.ts +21 -0
- package/dist/types/effects/catalog/index.d.ts +21 -0
- package/dist/types/effects/catalog/interaction-shared.d.ts +56 -0
- package/dist/types/effects/catalog/interaction.d.ts +22 -0
- package/dist/types/effects/catalog/media.d.ts +13 -0
- package/dist/types/effects/catalog/numbers-shared.d.ts +103 -0
- package/dist/types/effects/catalog/numbers.d.ts +31 -0
- package/dist/types/effects/catalog/shared.d.ts +3 -0
- package/dist/types/effects/catalog/text-shared.d.ts +180 -0
- package/dist/types/effects/catalog/text.d.ts +17 -0
- package/dist/types/effects/forms/index.d.ts +14 -0
- package/dist/types/effects/forms/primitives.d.ts +32 -0
- package/dist/types/effects/gestures/index.d.ts +19 -0
- package/dist/types/effects/gestures/primitives.d.ts +2 -0
- package/dist/types/effects/index.d.ts +19 -0
- package/dist/types/effects/layout/index.d.ts +12 -0
- package/dist/types/effects/layout/presets.d.ts +9 -0
- package/dist/types/effects/layout/primitives.d.ts +2 -0
- package/dist/types/effects/navigation/index.d.ts +30 -0
- package/dist/types/effects/scroll-mechanics/index.d.ts +14 -0
- package/dist/types/effects/scroll-mechanics/presets.d.ts +6 -0
- package/dist/types/effects/scroll-mechanics/primitives.d.ts +2 -0
- package/dist/types/effects/scroll-mechanics/tracker.d.ts +55 -0
- package/dist/types/effects/shared.d.ts +26 -0
- package/dist/types/effects/svg/index.d.ts +13 -0
- package/dist/types/effects/three-d/index.d.ts +20 -0
- package/dist/types/index.d.ts +16 -0
- package/package.json +78 -0
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pure math for the pointer-tracking half of section I (`tilt-3d`, `tilt-parallax`, and the
|
|
3
|
+
* `cursor-*` family) — kept separate from DOM/timer wiring so the position → transform arithmetic
|
|
4
|
+
* is assertable without a browser, the same separation `text-shared.ts` uses for its state
|
|
5
|
+
* machines.
|
|
6
|
+
*/
|
|
7
|
+
export interface TiltAngles {
|
|
8
|
+
rotateX: number;
|
|
9
|
+
rotateY: number;
|
|
10
|
+
}
|
|
11
|
+
/** A pointer position relative to an element's own top-left corner, in pixels. */
|
|
12
|
+
export interface LocalPoint {
|
|
13
|
+
x: number;
|
|
14
|
+
y: number;
|
|
15
|
+
}
|
|
16
|
+
/** An element's own content box size, in pixels. */
|
|
17
|
+
export interface ElementSize {
|
|
18
|
+
width: number;
|
|
19
|
+
height: number;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Convert a pointer position within an element into a two-axis tilt, for `tilt-3d`.
|
|
23
|
+
*
|
|
24
|
+
* X drives `rotateY` (moving right tilts the far edge away) and Y drives `rotateX`, inverted, so
|
|
25
|
+
* hovering the top of the card tilts it back rather than forward — the direction a physical card
|
|
26
|
+
* would rotate if pushed at that point.
|
|
27
|
+
*
|
|
28
|
+
* @param point - Pointer position relative to the element's own top-left corner.
|
|
29
|
+
* @param size - Element's own content box size.
|
|
30
|
+
* @param maxAngleDeg - Rotation at the element's edge, in degrees.
|
|
31
|
+
* @returns The rotation to apply on each axis.
|
|
32
|
+
* @complexity O(1) time and space.
|
|
33
|
+
* @overallScore 100
|
|
34
|
+
*/
|
|
35
|
+
export declare function tiltAngles(point: LocalPoint, size: ElementSize, maxAngleDeg: number): TiltAngles;
|
|
36
|
+
/**
|
|
37
|
+
* Convert a pointer position within an element into a translate offset, for `tilt-parallax`'s
|
|
38
|
+
* per-layer depth effect. The caller multiplies the result by each layer's own depth factor.
|
|
39
|
+
*
|
|
40
|
+
* @param point - Pointer position relative to the element's own top-left corner.
|
|
41
|
+
* @param size - Element's own content box size.
|
|
42
|
+
* @param strengthPx - Translation at the element's edge, in pixels, for a depth of 1.
|
|
43
|
+
* @returns The base offset to scale by each layer's depth.
|
|
44
|
+
* @complexity O(1) time and space.
|
|
45
|
+
* @overallScore 100
|
|
46
|
+
*/
|
|
47
|
+
export declare function parallaxOffset(point: LocalPoint, size: ElementSize, strengthPx: number): LocalPoint;
|
|
48
|
+
/**
|
|
49
|
+
* Whether the environment can express a genuine hover — a touchscreen cannot, and treating a tap
|
|
50
|
+
* as a hover leaves an element visibly "stuck" in its hovered state with no pointer to leave it.
|
|
51
|
+
*
|
|
52
|
+
* @param win - Window to query; injected so tests can supply a fake `matchMedia`.
|
|
53
|
+
* @complexity O(1) time and space.
|
|
54
|
+
* @overallScore 100
|
|
55
|
+
*/
|
|
56
|
+
export declare function supportsFineHover(win: Window): boolean;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { Preset, Primitive } from '../../core/types.js';
|
|
2
|
+
import type { Registry } from '../../core/registry.js';
|
|
3
|
+
export declare const HOVER_PRIMITIVES: Primitive[];
|
|
4
|
+
export declare const HOVER_PRESETS: Preset[];
|
|
5
|
+
export declare const CONTINUOUS_BORDER_PRIMITIVES: Primitive[];
|
|
6
|
+
export declare const CONTINUOUS_BORDER_PRESETS: Preset[];
|
|
7
|
+
export declare const POINTER_PRIMITIVES: Primitive[];
|
|
8
|
+
export declare const POINTER_PRESETS: Preset[];
|
|
9
|
+
export declare const INTERACTION_PRIMITIVES: Primitive[];
|
|
10
|
+
export declare const INTERACTION_PRESETS: Preset[];
|
|
11
|
+
/**
|
|
12
|
+
* Register the hover and pointer catalog (section I).
|
|
13
|
+
*
|
|
14
|
+
* A standalone top-level registration, the same shape as `registerGestures`/`registerThreeD`, so
|
|
15
|
+
* wiring it into `createRegistry()` never has to touch the shared `catalog/index.ts` aggregator.
|
|
16
|
+
*
|
|
17
|
+
* @param registry - Registry to populate.
|
|
18
|
+
* @returns The same registry, for chaining.
|
|
19
|
+
* @complexity O(n) time in registered primitives and presets.
|
|
20
|
+
* @overallScore 100
|
|
21
|
+
*/
|
|
22
|
+
export declare function registerInteraction(registry: Registry): Registry;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Preset, Primitive } from '../../core/types.js';
|
|
2
|
+
import type { Registry } from '../../core/registry.js';
|
|
3
|
+
export declare const MEDIA_PRIMITIVES: Primitive[];
|
|
4
|
+
export declare const MEDIA_PRESETS: Preset[];
|
|
5
|
+
/**
|
|
6
|
+
* Register catalog section G (media & images) into a registry.
|
|
7
|
+
*
|
|
8
|
+
* @param registry - Registry to populate.
|
|
9
|
+
* @returns The same registry, for chaining.
|
|
10
|
+
* @complexity O(n) time in registered primitives and presets; O(1) extra space.
|
|
11
|
+
* @overallScore 100
|
|
12
|
+
*/
|
|
13
|
+
export declare function registerMedia(registry: Registry): Registry;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import type { Cleanup } from '../../core/types.js';
|
|
2
|
+
/** Formats `count` can render its tweened value in. */
|
|
3
|
+
export type CountFormat = 'number' | 'currency' | 'percent' | 'compact';
|
|
4
|
+
export interface CountFormatOptions {
|
|
5
|
+
format: CountFormat;
|
|
6
|
+
decimals: number;
|
|
7
|
+
currency: string;
|
|
8
|
+
}
|
|
9
|
+
export interface CountLayers {
|
|
10
|
+
/** `aria-hidden` node the ticking display writes to on every frame. */
|
|
11
|
+
decorative: HTMLElement;
|
|
12
|
+
/**
|
|
13
|
+
* Visually-hidden twin. The caller must write this exactly once, on completion — never
|
|
14
|
+
* mid-tick — so a screen reader is told the final value and nothing in between.
|
|
15
|
+
*/
|
|
16
|
+
srOnly: HTMLElement;
|
|
17
|
+
/** Remove both layers, restoring the element to plain text of whatever the SR layer last held. */
|
|
18
|
+
restore: Cleanup;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Replace an element's content with an `aria-hidden` ticking display plus a visually-hidden twin,
|
|
22
|
+
* both empty until the caller populates them, so a counter's mid-flight text is never read aloud
|
|
23
|
+
* and its `aria-live` region changes exactly once.
|
|
24
|
+
*
|
|
25
|
+
* @param el - Element whose content is being taken over. Assumed to hold no meaningful children.
|
|
26
|
+
* @param doc - Document to create nodes in, rather than the ambient global.
|
|
27
|
+
* @returns The decorative node to tick, the SR-only node to finalize once, and a cleanup.
|
|
28
|
+
* @complexity O(1) time and space.
|
|
29
|
+
* @overallScore 100
|
|
30
|
+
*/
|
|
31
|
+
export declare function installCountLayers(el: Element, doc: Document): CountLayers;
|
|
32
|
+
/**
|
|
33
|
+
* Ease a linear 0–1 ratio for a count tween. Counters read as mechanical on a linear ramp; cubic
|
|
34
|
+
* ease-out gives the settle a physical "spinning down" character without a spring's overshoot,
|
|
35
|
+
* which would put a currency counter briefly past its final total.
|
|
36
|
+
*
|
|
37
|
+
* @complexity O(1) time and space.
|
|
38
|
+
* @overallScore 100
|
|
39
|
+
*/
|
|
40
|
+
export declare function easeOutCubic(t: number): number;
|
|
41
|
+
/**
|
|
42
|
+
* Interpolate between `from` and `to` at an already-eased ratio.
|
|
43
|
+
*
|
|
44
|
+
* @param t - Eased progress, 0–1. Not clamped here — `easeOutCubic` already clamps its input.
|
|
45
|
+
* @complexity O(1) time and space.
|
|
46
|
+
* @overallScore 100
|
|
47
|
+
*/
|
|
48
|
+
export declare function tweenValue(t: number, from: number, to: number): number;
|
|
49
|
+
/**
|
|
50
|
+
* Resolve an author's validated `EffectTiming.easing` to a JS evaluator a tween can call per tick.
|
|
51
|
+
*
|
|
52
|
+
* `easeOutCubic` is both the historical no-easing-authored default and the fallback for a value
|
|
53
|
+
* this cannot map: `steps()`/`linear()` functions, `step-start`/`step-end`, `spring` (a keyframed
|
|
54
|
+
* `linear()` easing, not a bezier), or any keyword outside the table above. Falling back silently
|
|
55
|
+
* would leave an author's explicit easing quietly ignored a second time — the exact bug this
|
|
56
|
+
* function exists to close — so every unmapped-but-authored value warns once instead.
|
|
57
|
+
*
|
|
58
|
+
* @param warn - Diagnostic sink, called once for an easing this cannot map.
|
|
59
|
+
* @complexity O(1) time and space beyond the returned evaluator's own bounded solve.
|
|
60
|
+
* @overallScore 100
|
|
61
|
+
*/
|
|
62
|
+
export declare function resolveEasing(easing: string | undefined, warn: (message: string) => void): (t: number) => number;
|
|
63
|
+
/**
|
|
64
|
+
* Format a tweened numeric value for display, sharing one formatter shape across the four
|
|
65
|
+
* text-rendered count presets rather than each hand-rolling its own string building.
|
|
66
|
+
*
|
|
67
|
+
* @param value - Current tweened value.
|
|
68
|
+
* @param options - Which display family to use, decimal precision, and currency code.
|
|
69
|
+
* @returns The formatted string for this frame.
|
|
70
|
+
* @complexity O(1) time and space (bounded by `Intl.NumberFormat`'s own cost).
|
|
71
|
+
* @overallScore 100
|
|
72
|
+
*/
|
|
73
|
+
export declare function formatCount(value: number, options: CountFormatOptions): string;
|
|
74
|
+
/**
|
|
75
|
+
* Render a non-negative integer as a fixed-width digit string, so an odometer's column count
|
|
76
|
+
* never changes mid-count — only the digits inside each column do.
|
|
77
|
+
*
|
|
78
|
+
* @param value - Non-negative integer to render.
|
|
79
|
+
* @param width - Minimum digit count; shorter values are left-padded with zeros.
|
|
80
|
+
* @complexity O(w) time and space in the output width.
|
|
81
|
+
* @overallScore 100
|
|
82
|
+
*/
|
|
83
|
+
export declare function paddedDigits(value: number, width: number): string;
|
|
84
|
+
/**
|
|
85
|
+
* Insert thousands separators into a fixed-width digit string, grouping from the right.
|
|
86
|
+
*
|
|
87
|
+
* @complexity O(n) time and space in digit count.
|
|
88
|
+
* @overallScore 100
|
|
89
|
+
*/
|
|
90
|
+
export declare function groupDigits(digits: string): string;
|
|
91
|
+
/**
|
|
92
|
+
* Split a grouped digit string into its digit characters and the separators between them, so the
|
|
93
|
+
* odometer can roll digits in place while leaving separators static.
|
|
94
|
+
*
|
|
95
|
+
* @param grouped - A grouped digit string, e.g. "12,480".
|
|
96
|
+
* @returns One token per character, tagged as a rolling digit or a static separator.
|
|
97
|
+
* @complexity O(n) time and space in string length.
|
|
98
|
+
* @overallScore 100
|
|
99
|
+
*/
|
|
100
|
+
export declare function odometerTokens(grouped: string): {
|
|
101
|
+
char: string;
|
|
102
|
+
digit: boolean;
|
|
103
|
+
}[];
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { Preset, Primitive } from '../../core/types.js';
|
|
2
|
+
import type { Registry } from '../../core/registry.js';
|
|
3
|
+
export interface NumberTween {
|
|
4
|
+
from: number;
|
|
5
|
+
to: number;
|
|
6
|
+
durationMs: number;
|
|
7
|
+
/** Time before the ramp starts. Author `delay`, same as every other timed JS primitive. */
|
|
8
|
+
delayMs: number;
|
|
9
|
+
/** Author `easing`, already resolved to a JS evaluator — `resolveEasing`'s fallback if none. */
|
|
10
|
+
easing: (t: number) => number;
|
|
11
|
+
onTick: (value: number, done: boolean) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const COUNT_PRIMITIVES: Primitive[];
|
|
14
|
+
export declare const COUNT_PRESETS: Preset[];
|
|
15
|
+
export declare const METER_PRIMITIVES: Primitive[];
|
|
16
|
+
export declare const METER_PRESETS: Preset[];
|
|
17
|
+
export declare const NUMBERS_PRIMITIVES: Primitive[];
|
|
18
|
+
export declare const NUMBERS_PRESETS: Preset[];
|
|
19
|
+
/**
|
|
20
|
+
* Register the numbers and data-viz catalog (section F).
|
|
21
|
+
*
|
|
22
|
+
* A standalone top-level registration, the same shape as `registerGestures`/`registerThreeD`,
|
|
23
|
+
* rather than folded into `registerCatalog` — that keeps this module wireable into
|
|
24
|
+
* `createRegistry()` without touching the shared `catalog/index.ts` aggregator.
|
|
25
|
+
*
|
|
26
|
+
* @param registry - Registry to populate.
|
|
27
|
+
* @returns The same registry, for chaining.
|
|
28
|
+
* @complexity O(n) time in registered primitives and presets.
|
|
29
|
+
* @overallScore 100
|
|
30
|
+
*/
|
|
31
|
+
export declare function registerNumbers(registry: Registry): Registry;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/** Re-exported for same-directory catalog siblings; the canonical definition lives in `effects/shared.ts` — neutral ground for every CSS-keyframe category, not just `catalog/`. */
|
|
2
|
+
export { cssPrimitive } from '../shared.js';
|
|
3
|
+
export type { CssPrimitiveOptions } from '../shared.js';
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import type { Cleanup, EffectParams } from '../../core/types.js';
|
|
2
|
+
/** How `split-text` breaks a string into decorative pieces. */
|
|
3
|
+
export type SplitUnit = 'chars' | 'words' | 'lines';
|
|
4
|
+
export interface SplitLayers {
|
|
5
|
+
/** `aria-hidden` container the caller populates with decorative markup or text. */
|
|
6
|
+
decorative: HTMLElement;
|
|
7
|
+
/** The element's text at the moment splitting began. */
|
|
8
|
+
originalText: string;
|
|
9
|
+
/** Remove both layers and put the original text back, selectable and unabridged. */
|
|
10
|
+
restore: Cleanup;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Replace an element's text with an `aria-hidden` decorative layer plus a visually-hidden twin
|
|
14
|
+
* holding the real text, so exactly one reading representation is ever exposed to assistive tech
|
|
15
|
+
* — the decorative layer is free to sit mid-scramble, mid-type, or split into spans without a
|
|
16
|
+
* screen reader ever seeing an incomplete or garbled read of the content.
|
|
17
|
+
*
|
|
18
|
+
* @param el - Element whose text is being taken over. Assumed to hold plain text (no children) —
|
|
19
|
+
* every DOM-surgery primitive in this module shares that constraint.
|
|
20
|
+
* @param doc - Document to create nodes in, rather than the ambient global, so callers can point
|
|
21
|
+
* this at a test document.
|
|
22
|
+
* @returns The decorative layer to populate, the captured text, and a cleanup.
|
|
23
|
+
* @complexity O(1) time and space beyond the caller's own population work.
|
|
24
|
+
* @overallScore 100
|
|
25
|
+
*/
|
|
26
|
+
export declare function installSplitLayers(el: Element, doc: Document): SplitLayers;
|
|
27
|
+
/**
|
|
28
|
+
* Grapheme clusters, not UTF-16 code units — an emoji, a flag, or a base letter plus combining
|
|
29
|
+
* mark stays one unit instead of being torn across two "characters".
|
|
30
|
+
*
|
|
31
|
+
* @complexity O(n) time in text length; O(n) space for the returned array.
|
|
32
|
+
* @overallScore 100
|
|
33
|
+
*/
|
|
34
|
+
export declare function segmentGraphemes(text: string): string[];
|
|
35
|
+
/**
|
|
36
|
+
* Forward validated timing params onto a synthetic container, so the `--kui-i` × `--kui-stagger`
|
|
37
|
+
* delay formula in text.css can read them by inheritance.
|
|
38
|
+
*
|
|
39
|
+
* A JS-rendered primitive's per-primitive namespaced `cssProperty` (see `registry.ts`) only
|
|
40
|
+
* governs what `resolveParams` writes onto the *authored* element for CSS-tier effects — nothing
|
|
41
|
+
* here reads that. These are plain, self-chosen custom properties on a container this module
|
|
42
|
+
* created and owns outright, populated straight from the validated `EffectParams` reader.
|
|
43
|
+
*
|
|
44
|
+
* Segment timing wins over the same-named parameters: `split-words 2s 1s linear` and
|
|
45
|
+
* `split-words duration:2s delay:1s ease:linear` are two spellings of one intent, and the
|
|
46
|
+
* positional one is the spelling `play()` emits, so it cannot be the one that gets dropped.
|
|
47
|
+
*
|
|
48
|
+
* @complexity O(1) time and space.
|
|
49
|
+
* @overallScore 100
|
|
50
|
+
*/
|
|
51
|
+
export declare function applyStaggerVars(el: HTMLElement, params: EffectParams): void;
|
|
52
|
+
/**
|
|
53
|
+
* Milliseconds per tick for a stepped effect.
|
|
54
|
+
*
|
|
55
|
+
* A `step:` parameter names one tick; an authored duration names the *whole* effect, so it divides
|
|
56
|
+
* across the ticks the effect needs. That is the only reading that makes `typewriter 2s` mean the
|
|
57
|
+
* same thing as `fade-up 2s` — both take two seconds — rather than two seconds per character.
|
|
58
|
+
*
|
|
59
|
+
* @param params - Reader carrying both the `step` parameter and the segment's timing.
|
|
60
|
+
* @param ticks - How many ticks the effect will take to complete.
|
|
61
|
+
* @param fallback - The primitive's own per-tick default.
|
|
62
|
+
* @complexity O(1) time and space.
|
|
63
|
+
* @overallScore 100
|
|
64
|
+
*/
|
|
65
|
+
export declare function stepMsFor(params: EffectParams, ticks: number, fallback: number): number;
|
|
66
|
+
/**
|
|
67
|
+
* Total time before every staggered `.kui-split-item` has finished its reveal keyframe: the last
|
|
68
|
+
* item's `--kui-i * --kui-stagger` delay (text.css), plus its own duration. `prepareSplitText`
|
|
69
|
+
* needs this as a plain number to know when `finished` may resolve — nothing else in this file
|
|
70
|
+
* derives it, so it is expressed here once rather than re-parsed at the call site.
|
|
71
|
+
*
|
|
72
|
+
* @param itemCount - Staggered item count; zero when there was nothing to split, in which case
|
|
73
|
+
* nothing animates and the effect is already over.
|
|
74
|
+
* @complexity O(1) time and space.
|
|
75
|
+
* @overallScore 100
|
|
76
|
+
*/
|
|
77
|
+
export declare function splitRevealFinishMs(params: EffectParams, itemCount: number): number;
|
|
78
|
+
export interface StepRunOptions {
|
|
79
|
+
/** Milliseconds before the first tick. */
|
|
80
|
+
delayMs: number;
|
|
81
|
+
/** Milliseconds between ticks. */
|
|
82
|
+
stepMs: number;
|
|
83
|
+
/** One frame of work. Returns `true` when there is nothing left to do. */
|
|
84
|
+
tick(): boolean;
|
|
85
|
+
}
|
|
86
|
+
export interface StepRun {
|
|
87
|
+
/**
|
|
88
|
+
* Resolves once a tick reports it is done, or once `stop()` runs. A looping effect never
|
|
89
|
+
* reports done, so its promise never resolves — which is exactly right, and matches what an
|
|
90
|
+
* infinite CSS animation's `Animation.finished` does.
|
|
91
|
+
*/
|
|
92
|
+
finished: Promise<void>;
|
|
93
|
+
stop(): void;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Run `tick` on an interval after an optional delay, and report when it is genuinely over.
|
|
97
|
+
*
|
|
98
|
+
* The delay is the whole point of the leading timeout: a JS-rendered effect had no way to honour
|
|
99
|
+
* an authored delay at all, because it never participates in the CSS `animation-delay` that the
|
|
100
|
+
* same attribute already means for every other effect.
|
|
101
|
+
*
|
|
102
|
+
* @param win - Timer source, injected so tests can drive it with fake timers.
|
|
103
|
+
* @param options - Delay, interval, and the work itself.
|
|
104
|
+
* @complexity O(1) time and space beyond the caller's own per-tick work.
|
|
105
|
+
* @overallScore 100
|
|
106
|
+
*/
|
|
107
|
+
export declare function createStepRunner(win: Window, options: StepRunOptions): StepRun;
|
|
108
|
+
/**
|
|
109
|
+
* Split text into one span per grapheme cluster, leaving whitespace graphemes as plain text nodes.
|
|
110
|
+
*
|
|
111
|
+
* A `display: inline-block` span whose only content is a single space renders at zero width — the
|
|
112
|
+
* lone space is both the first and last "character" of that box's own formatting context, so CSS
|
|
113
|
+
* whitespace collapsing trims it away entirely. Every word ran together until this skipped
|
|
114
|
+
* wrapping the space itself, the same way `appendWordSpans` already leaves inter-word whitespace
|
|
115
|
+
* unwrapped.
|
|
116
|
+
*
|
|
117
|
+
* @complexity O(n) time and space in grapheme count.
|
|
118
|
+
* @overallScore 100
|
|
119
|
+
*/
|
|
120
|
+
export declare function appendCharSpans(container: Element, doc: Document, text: string): HTMLElement[];
|
|
121
|
+
/**
|
|
122
|
+
* Split text into one span per word, leaving the whitespace and punctuation between them as plain
|
|
123
|
+
* text nodes so natural line-wrapping and spacing survive untouched.
|
|
124
|
+
*
|
|
125
|
+
* @complexity O(n) time and space in segment count.
|
|
126
|
+
* @overallScore 100
|
|
127
|
+
*/
|
|
128
|
+
export declare function appendWordSpans(container: Element, doc: Document, text: string): HTMLElement[];
|
|
129
|
+
/**
|
|
130
|
+
* Split text into one span per visual line.
|
|
131
|
+
*
|
|
132
|
+
* Lines are not a text property — they only exist after wrapping — so this measures word spans
|
|
133
|
+
* already laid out in the live DOM, then regroups their nodes (words and the whitespace between
|
|
134
|
+
* them) into per-line containers.
|
|
135
|
+
*
|
|
136
|
+
* @complexity O(n) time and space in word-span count.
|
|
137
|
+
* @overallScore 100
|
|
138
|
+
*/
|
|
139
|
+
export declare function appendLineSpans(container: Element, doc: Document, text: string): HTMLElement[];
|
|
140
|
+
/**
|
|
141
|
+
* Split text by the requested unit.
|
|
142
|
+
*
|
|
143
|
+
* @complexity O(n) time and space in text length, dominated by the chosen unit's own cost.
|
|
144
|
+
* @overallScore 100
|
|
145
|
+
*/
|
|
146
|
+
export declare function appendSpansFor(unit: SplitUnit, container: Element, doc: Document, text: string): HTMLElement[];
|
|
147
|
+
export interface TypeState {
|
|
148
|
+
index: number;
|
|
149
|
+
deleting: boolean;
|
|
150
|
+
}
|
|
151
|
+
export interface TypeStep extends TypeState {
|
|
152
|
+
done: boolean;
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* Advance a typewriter one tick: typing forward, then — when looping — deleting back to zero
|
|
156
|
+
* before typing again. Pure so the state machine is assertable without any timer or DOM.
|
|
157
|
+
*
|
|
158
|
+
* @param state - Current position and direction.
|
|
159
|
+
* @param total - Grapheme count of the full string.
|
|
160
|
+
* @param loop - Whether to reverse at the end instead of stopping.
|
|
161
|
+
* @returns The next state, plus whether the effect has nothing left to do.
|
|
162
|
+
* @complexity O(1) time and space.
|
|
163
|
+
* @overallScore 100
|
|
164
|
+
*/
|
|
165
|
+
export declare function nextTypeState(state: TypeState, total: number, loop: boolean): TypeStep;
|
|
166
|
+
/** Charsets the scramble family cycles through while a character is still unresolved. */
|
|
167
|
+
export declare const SCRAMBLE_CHARSETS: Record<string, string>;
|
|
168
|
+
/**
|
|
169
|
+
* Render one frame of a scramble/decode/glitch resolve: graphemes before `resolved` show their
|
|
170
|
+
* real value, the rest render as a random charset character. Whitespace is never scrambled, so
|
|
171
|
+
* word boundaries stay legible mid-resolve.
|
|
172
|
+
*
|
|
173
|
+
* @param graphemes - The target text, already grapheme-segmented.
|
|
174
|
+
* @param resolved - Count of graphemes (from the start) considered final.
|
|
175
|
+
* @param charset - Characters to draw unresolved positions from.
|
|
176
|
+
* @param random - Source of randomness, injected so the frame is reproducible in tests.
|
|
177
|
+
* @complexity O(n) time and space in grapheme count.
|
|
178
|
+
* @overallScore 100
|
|
179
|
+
*/
|
|
180
|
+
export declare function scrambledFrame(graphemes: string[], resolved: number, charset: string, random: () => number): string;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Preset, Primitive } from '../../core/types.js';
|
|
2
|
+
import type { Registry } from '../../core/registry.js';
|
|
3
|
+
export declare const TEXT_CSS_PRIMITIVES: Primitive[];
|
|
4
|
+
export declare const TEXT_CSS_PRESETS: Preset[];
|
|
5
|
+
export declare const TEXT_JS_PRIMITIVES: Primitive[];
|
|
6
|
+
export declare const TEXT_JS_PRESETS: Preset[];
|
|
7
|
+
export declare const TEXT_PRIMITIVES: Primitive[];
|
|
8
|
+
export declare const TEXT_PRESETS: Preset[];
|
|
9
|
+
/**
|
|
10
|
+
* Register catalog section D (text & typography) into a registry.
|
|
11
|
+
*
|
|
12
|
+
* @param registry - Registry to populate.
|
|
13
|
+
* @returns The same registry, for chaining.
|
|
14
|
+
* @complexity O(n) time in registered primitives and presets; O(1) extra space.
|
|
15
|
+
* @overallScore 100
|
|
16
|
+
*/
|
|
17
|
+
export declare function registerText(registry: Registry): Registry;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Preset, Primitive } from '../../core/types.js';
|
|
2
|
+
import type { Registry } from '../../core/registry.js';
|
|
3
|
+
export * from './primitives.js';
|
|
4
|
+
export declare const FORMS_PRIMITIVES: Primitive[];
|
|
5
|
+
export declare const FORMS_PRESETS: Preset[];
|
|
6
|
+
/**
|
|
7
|
+
* Register the forms catalog.
|
|
8
|
+
*
|
|
9
|
+
* @param registry - Registry to populate.
|
|
10
|
+
* @returns The same registry, for chaining.
|
|
11
|
+
* @complexity O(n) time in the number of primitives and presets.
|
|
12
|
+
* @overallScore 100
|
|
13
|
+
*/
|
|
14
|
+
export declare function registerForms(registry: Registry): Registry;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { Primitive } from '../../core/types.js';
|
|
2
|
+
export declare const NATIVE_STATE_PRIMITIVE: Primitive;
|
|
3
|
+
export declare const FOCUS_RING_PRIMITIVE: Primitive;
|
|
4
|
+
export declare const VALIDATE_SHAKE_PRIMITIVE: Primitive;
|
|
5
|
+
export declare const VALIDATE_CHECK_PRIMITIVE: Primitive;
|
|
6
|
+
/**
|
|
7
|
+
* Score a password's strength on length and character variety — a rough, dependency-free
|
|
8
|
+
* heuristic; real strength scoring (zxcvbn and friends) is out of scope for a demo primitive.
|
|
9
|
+
*
|
|
10
|
+
* @complexity O(n) time in value length; O(1) space.
|
|
11
|
+
* @overallScore 100
|
|
12
|
+
*/
|
|
13
|
+
export declare function computeStrength(value: string): number;
|
|
14
|
+
export declare const STRENGTH_METER_PRIMITIVE: Primitive;
|
|
15
|
+
export declare const RANGE_FILL_PRIMITIVE: Primitive;
|
|
16
|
+
/**
|
|
17
|
+
* Advance a step index, wrapping back to 0 — pure, so the wrap rule is assertable without a DOM.
|
|
18
|
+
*
|
|
19
|
+
* @complexity O(1) time and space.
|
|
20
|
+
* @overallScore 100
|
|
21
|
+
*/
|
|
22
|
+
export declare function nextStep(step: number, total: number): number;
|
|
23
|
+
export declare const STEP_PROGRESS_PRIMITIVE: Primitive;
|
|
24
|
+
export type SubmitStage = 'idle' | 'loading' | 'done';
|
|
25
|
+
/**
|
|
26
|
+
* Advance the submit flow one stage: idle -> loading -> done -> idle.
|
|
27
|
+
*
|
|
28
|
+
* @complexity O(1) time and space.
|
|
29
|
+
* @overallScore 100
|
|
30
|
+
*/
|
|
31
|
+
export declare function nextSubmitStage(stage: SubmitStage): SubmitStage;
|
|
32
|
+
export declare const SUBMIT_FLOW_PRIMITIVE: Primitive;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { Preset } from '../../core/types.js';
|
|
2
|
+
import type { Registry } from '../../core/registry.js';
|
|
3
|
+
export { GESTURE_PRIMITIVES } from './primitives.js';
|
|
4
|
+
/**
|
|
5
|
+
* Gesture names. Twelve names over four primitives.
|
|
6
|
+
*
|
|
7
|
+
* The drag family differs only in where a release goes: back to origin (elastic), onward with
|
|
8
|
+
* momentum (throwable), or nowhere (plain drag). That is one primitive with two booleans.
|
|
9
|
+
*/
|
|
10
|
+
export declare const GESTURE_PRESETS: Preset[];
|
|
11
|
+
/**
|
|
12
|
+
* Register the gesture catalog.
|
|
13
|
+
*
|
|
14
|
+
* @param registry - Registry to populate.
|
|
15
|
+
* @returns The same registry, for chaining.
|
|
16
|
+
* @complexity O(n) time in the number of primitives and presets.
|
|
17
|
+
* @overallScore 100
|
|
18
|
+
*/
|
|
19
|
+
export declare function registerGestures(registry: Registry): Registry;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Registry } from '../core/registry.js';
|
|
2
|
+
export { PRIMITIVES, PRESETS, COMBOS, registerCore } from './catalog/core.js';
|
|
3
|
+
export { registerGestures } from './gestures/index.js';
|
|
4
|
+
export { registerLayout } from './layout/index.js';
|
|
5
|
+
export { registerScrollMechanics } from './scroll-mechanics/index.js';
|
|
6
|
+
export { registerSvg } from './svg/index.js';
|
|
7
|
+
export { registerThreeD } from './three-d/index.js';
|
|
8
|
+
export { registerCatalog } from './catalog/index.js';
|
|
9
|
+
/**
|
|
10
|
+
* A registry with the full catalog registered.
|
|
11
|
+
*
|
|
12
|
+
* Packages register separately so a consumer paying attention to payload can take only what they
|
|
13
|
+
* use — `registerCore` alone is entirely CSS-rendered and ships no scroll orchestration at all.
|
|
14
|
+
*
|
|
15
|
+
* @returns A populated registry.
|
|
16
|
+
* @complexity O(n) time in the total number of primitives and presets.
|
|
17
|
+
* @overallScore 100
|
|
18
|
+
*/
|
|
19
|
+
export declare function createRegistry(): Registry;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Registry } from '../../core/registry.js';
|
|
2
|
+
export { LAYOUT_PRIMITIVES } from './primitives.js';
|
|
3
|
+
export { LAYOUT_PRESETS } from './presets.js';
|
|
4
|
+
/**
|
|
5
|
+
* Register the layout/FLIP catalog.
|
|
6
|
+
*
|
|
7
|
+
* @param registry - Registry to populate.
|
|
8
|
+
* @returns The same registry, for chaining.
|
|
9
|
+
* @complexity O(n) time in the number of primitives and presets.
|
|
10
|
+
* @overallScore 100
|
|
11
|
+
*/
|
|
12
|
+
export declare function registerLayout(registry: Registry): Registry;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Preset } from '../../core/types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Layout-transition names. Nine names over three primitives.
|
|
4
|
+
*
|
|
5
|
+
* The four `flip-*` names are the same primitive: what differs is why the children moved, and the
|
|
6
|
+
* engine neither knows nor needs to. They exist as separate names because authors think in terms
|
|
7
|
+
* of "I filtered a list", not "I mutated a child list".
|
|
8
|
+
*/
|
|
9
|
+
export declare const LAYOUT_PRESETS: Preset[];
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { Preset, Primitive } from '../../core/types.js';
|
|
2
|
+
import type { Registry } from '../../core/registry.js';
|
|
3
|
+
/**
|
|
4
|
+
* Navigation effects (catalog section M).
|
|
5
|
+
*
|
|
6
|
+
* Boundary, same as section H's FLIP group: these animate a menu, header, or drawer *you*
|
|
7
|
+
* control. None of them own `aria-expanded`, focus trapping, roving tabindex, or Escape-to-close
|
|
8
|
+
* — that is an accessible-menu-component's job, not an animation primitive's. An author wires the
|
|
9
|
+
* open/closed state (a class, an attribute, a framework) and triggers playback; this module only
|
|
10
|
+
* ever supplies the motion.
|
|
11
|
+
*
|
|
12
|
+
* Three of the eight names — `header-shrink`, `header-hide-on-scroll`, `back-to-top-fade` — react
|
|
13
|
+
* to raw scroll position rather than a trigger, so they share one small helper over the same
|
|
14
|
+
* `ctx.scheduler`/`ctx.rootFor` primitives every scroll-mechanics effect already uses.
|
|
15
|
+
*/
|
|
16
|
+
export declare const NAV_CSS_PRIMITIVES: Primitive[];
|
|
17
|
+
export declare const NAV_CSS_PRESETS: Preset[];
|
|
18
|
+
export declare const NAV_JS_PRIMITIVES: Primitive[];
|
|
19
|
+
export declare const NAV_JS_PRESETS: Preset[];
|
|
20
|
+
export declare const NAVIGATION_PRIMITIVES: Primitive[];
|
|
21
|
+
export declare const NAVIGATION_PRESETS: Preset[];
|
|
22
|
+
/**
|
|
23
|
+
* Register the navigation catalog.
|
|
24
|
+
*
|
|
25
|
+
* @param registry - Registry to populate.
|
|
26
|
+
* @returns The same registry, for chaining.
|
|
27
|
+
* @complexity O(n) time in the number of primitives and presets.
|
|
28
|
+
* @overallScore 100
|
|
29
|
+
*/
|
|
30
|
+
export declare function registerNavigation(registry: Registry): Registry;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Registry } from '../../core/registry.js';
|
|
2
|
+
export { SCROLL_PRIMITIVES } from './primitives.js';
|
|
3
|
+
export { SCROLL_PRESETS } from './presets.js';
|
|
4
|
+
export { domGeometry, progressFrom, trackProgress } from './tracker.js';
|
|
5
|
+
export type { ElementGeometry, Measurer, TrackOptions } from './tracker.js';
|
|
6
|
+
/**
|
|
7
|
+
* Register the scroll-mechanics catalog.
|
|
8
|
+
*
|
|
9
|
+
* @param registry - Registry to populate.
|
|
10
|
+
* @returns The same registry, for chaining.
|
|
11
|
+
* @complexity O(n) time in the number of primitives and presets.
|
|
12
|
+
* @overallScore 100
|
|
13
|
+
*/
|
|
14
|
+
export declare function registerScrollMechanics(registry: Registry): Registry;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Preset } from '../../core/types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Scroll-mechanics names. Eleven names over six primitives — the same alias-table shape the
|
|
4
|
+
* entrance matrix uses, so adding a variant stays a data change.
|
|
5
|
+
*/
|
|
6
|
+
export declare const SCROLL_PRESETS: Preset[];
|