@greese/ui 0.0.0-stage → 1.0.0

package/dist/effects/definitions.js

@@ -0,0 +1,379 @@
+/** The built-in effects' definitions: base effects, combos, and how far they reach. */
+/** Keys every call accepts, in the order positional arguments fill them. */
+export const timingKeys = ['duration', 'offset', 'ease'];
+export const base = (definition) => definition;
+export const px = (fn) => (value) => `${fn}(${typeof value === 'number' ? `${value}px` : value})`;
+export const plain = (fn) => (value) => `${fn}(${value})`;
+export const ZERO = '0px';
+/**
+ * Wipes and pockets: a mask that shows everything, anchored at one side (or
+ * the middle), sized from `start` to `end`. A mask, not `clip-path`, because
+ * the clip belongs to the element's shape and a mask composes with it (ADR
+ * 0024); it exists only while the effect plays.
+ */
+// Colors by name, not `#000`: greese.js interpolates the numbers in a value,
+// and would write `#000` back as `#0`, dropping the mask.
+export const SOLID = 'linear-gradient(black, black)';
+export const WHOLE = '100% 100%';
+export const masked = (position, start, end) => base({
+    property: 'maskSize',
+    params: { start, end },
+    fixed: { maskImage: SOLID, maskRepeat: 'no-repeat', maskPosition: position },
+});
+/** The directions wipes and pockets go in (physical, like the slides): x, y. */
+export const DIRECTIONS = {
+    Right: [1, 0],
+    Left: [-1, 0],
+    Up: [0, -1],
+    Down: [0, 1],
+    DownRight: [1, 1],
+    DownLeft: [-1, 1],
+    UpRight: [1, -1],
+    UpLeft: [-1, -1],
+};
+/** The directions wipes and pockets go in, by name: `Right`, `DownLeft`… */
+export const effectDirections = Object.keys(DIRECTIONS);
+/** `50% 0%` for a side: where a direction comes from (`-1`) or goes to (`1`). */
+export const side = (dx, dy, toward) => `${50 + 50 * dx * toward}% ${50 + 50 * dy * toward}%`;
+/** The mask's size with the moving axes at `amount`. */
+export const sized = (dx, dy, amount) => `${dx ? amount : '100%'} ${dy ? amount : '100%'}`;
+/**
+ * A wipe in `direction`: arriving, the edge sweeps that way and reveals the
+ * element from the side it leaves; leaving, it sweeps that way and covers it.
+ */
+export const wipes = Object.fromEntries(Object.entries(DIRECTIONS).flatMap(([name, [dx, dy]]) => [
+    [`wipe${name}`, masked(side(dx, dy, -1), sized(dx, dy, '0%'), WHOLE)],
+    [`wipeOut${name}`, masked(side(dx, dy, 1), WHOLE, sized(dx, dy, '0%'))],
+]));
+/**
+ * An iris: an opening the element's shape (an ellipse in its proportions)
+ * that grows from, or shrinks to, a point: the middle, a side or a corner. The
+ * mask is anchored at that point, so it stays put while the opening changes
+ * size. `IRIS_OPEN` is where it just covers the farthest corner from any of
+ * those points, so the whole run is visible change, in and out alike.
+ */
+export const iris = (at, start, end) => base({
+    property: 'maskSize',
+    params: { start, end },
+    fixed: {
+        maskImage: `radial-gradient(${at === '50% 50%' ? 'closest-side' : `farthest-side at ${at}`}, black 98%, transparent)`,
+        maskRepeat: 'no-repeat',
+        maskPosition: at,
+    },
+});
+// √2: an ellipse in the element's proportions reaches its far corner at 141.4%.
+export const OPEN = '142% 142%';
+export const SHUT = '0% 0%';
+/**
+ * Leaving, the opening closes toward the side it goes to; arriving, it plays
+ * that backwards, opening from the same side, so an entrance is its exit
+ * reversed.
+ */
+export const irises = Object.fromEntries(Object.entries(DIRECTIONS).flatMap(([name, [dx, dy]]) => [
+    [`iris${name}`, iris(side(dx, dy, 1), SHUT, OPEN)],
+    [`irisOut${name}`, iris(side(dx, dy, 1), OPEN, SHUT)],
+]));
+/**
+ * Three-dimensional turns and depth: `transform`, with its own perspective, so
+ * they foreshorten wherever they play, with no `perspective` on a parent. Not
+ * the individual `translate`/`rotate`/`scale` the other effects animate, so
+ * they compose with those, and never with a shape's clip-path (applied before
+ * the transform, it turns with the element).
+ */
+export const PERSPECTIVE = 'perspective(800px)';
+export const turn = (axis, start, end, origin) => base({
+    property: 'transform',
+    params: { start, end },
+    format: (v) => `${PERSPECTIVE} rotate${axis}(${v}deg)`,
+    ...(origin && { fixed: { transformOrigin: origin } }),
+});
+/** The flips' directions: the axis each turns about, and which way. */
+export const FLIPS = {
+    Up: ['X', 1],
+    Down: ['X', -1],
+    Left: ['Y', 1],
+    Right: ['Y', -1],
+};
+/**
+ * A flip over: a panel turned half a turn about its middle, its two faces
+ * the old and the new: arriving, it turns from its back (180 degrees) to its
+ * front; leaving, from its front to its back, the same way, so a pair played
+ * together turns as one panel. The back face is hidden, so each shows only
+ * while it faces the viewer, and the switch is at the quarter turn. A longer
+ * perspective than a flip's, so a panel as wide as the screen doesn't swing
+ * through the viewer at the quarter turn.
+ */
+export const FLIP_OVER_PERSPECTIVE = 'perspective(2000px)';
+const flipOver = (axis, start, end) => base({
+    property: 'transform',
+    params: { start, end },
+    format: (v) => `${FLIP_OVER_PERSPECTIVE} rotate${axis}(${v}deg)`,
+    fixed: { backfaceVisibility: 'hidden' },
+});
+export const flipOvers = Object.fromEntries(Object.entries(FLIPS).flatMap(([name, [axis, sign]]) => [
+    [`flipOver${name}`, flipOver(axis, sign * 180, 0)],
+    [`flipOverOut${name}`, flipOver(axis, 0, sign * 180)],
+]));
+export const baseEffects = {
+    fadeIn: base({ property: 'opacity', params: { start: 0, end: 1 } }),
+    fadeOut: base({ property: 'opacity', params: { start: 1, end: 0 } }),
+    scaleIn: base({ property: 'scale', params: { start: 0, end: 1 } }),
+    scaleOut: base({ property: 'scale', params: { start: 1, end: 0 } }),
+    blurIn: base({ property: 'filter', params: { start: 8, end: 0 }, format: px('blur') }),
+    blurOut: base({ property: 'filter', params: { start: 0, end: 8 }, format: px('blur') }),
+    slideUp: base({ property: 'y', params: { start: '100%', end: '0%' } }),
+    slideDown: base({ property: 'y', params: { start: '-100%', end: '0%' } }),
+    // Right and left are physical: the direction the element moves.
+    slideRight: base({ property: 'x', params: { start: '-100%', end: '0%' } }),
+    slideLeft: base({ property: 'x', params: { start: '100%', end: '0%' } }),
+    // A springy scale: past `end` by `peak` at `peakAt` (a share of the effect).
+    pop: base({
+        property: 'scale',
+        params: { start: 1, end: 1, peak: 1.075, peakAt: 0.6 },
+        stops: (p) => [
+            [0, p.start],
+            [Number(p.peakAt), p.peak],
+            [1, p.end],
+        ],
+    }),
+    squish: base({ property: 'scale', params: { start: 1, end: 0.96 } }),
+    tilt: base({ property: 'rotate', params: { start: 0, end: -2 } }),
+    glow: base({
+        property: 'filter',
+        params: { start: 1, end: 1.12 },
+        format: plain('brightness'),
+    }),
+    // Wipes, every direction (`wipeRight`, `wipeOutUp`, `wipeDownLeft`…),
+    // then from and to the middle.
+    ...wipes,
+    wipeOpenX: masked('50% 50%', '0% 100%', WHOLE),
+    wipeOpenY: masked('50% 50%', '100% 0%', WHOLE),
+    wipeCloseX: masked('50% 50%', WHOLE, '0% 100%'),
+    wipeCloseY: masked('50% 50%', WHOLE, '100% 0%'),
+    // Irises, from and to the middle, then every direction (`irisRight`, `irisOutUpLeft`…).
+    irisIn: iris('50% 50%', SHUT, OPEN),
+    irisOut: iris('50% 50%', OPEN, SHUT),
+    ...irises,
+    // In three dimensions: a turn about the horizontal (`turnX`) or vertical
+    // (`turnY`) axis through the middle, and a move along the line of sight
+    // (`depth`, in px: negative is away).
+    turnX: turn('X', 0, 0),
+    turnY: turn('Y', 0, 0),
+    depth: base({
+        property: 'transform',
+        params: { start: 0, end: 0 },
+        format: (v) => `${PERSPECTIVE} translateZ(${v}px)`,
+    }),
+    // A hinge along the top edge, like a sign swinging down into place.
+    hinge: turn('X', 0, 0, '50% 0%'),
+    // Half turns, a panel's two faces (`flipOverRight`, `flipOverOutLeft`…).
+    ...flipOvers,
+};
+/** `effect` must be a base effect's name: a typo, or a combo, fails to compile. */
+export const part = (effect, args = {}, at = [0, 1]) => ({ effect, args, at });
+export const combo = (definition) => definition;
+export const away = ({ distance }) => ({ distance });
+/**
+ * A pocket: the element moves out of (or into) an invisible slot at one of
+ * its own edges. It slides `distance` (its whole size, by default, so it
+ * starts or ends out of sight) while a mask anchored where it's going grows or
+ * shrinks by the same amount, so the window it shows through stays where the
+ * element rests. Arriving, it moves `direction`; leaving, it moves on that
+ * way, into the slot on that side.
+ */
+export const pocket = (direction, leaving) => {
+    const [dx, dy] = DIRECTIONS[direction];
+    return {
+        params: () => ({ distance: '100%' }),
+        parts: ({ distance }) => {
+            const far = (sign) => sign > 0 ? String(distance) : negate(String(distance));
+            const slide = (axis, sign) => {
+                const travel = {
+                    start: leaving ? ZERO : far(-sign),
+                    end: leaving ? far(sign) : ZERO,
+                };
+                return axis === 'x' ? part('slideRight', travel) : part('slideDown', travel);
+            };
+            // A share of its size (the default, 100%) is plain percentages, which
+            // every engine transitions; any other length is calc() at both ends,
+            // the same shape, so greese.js interpolates them.
+            const share = /^(-?[\d.]+)%$/.exec(String(distance).trim());
+            const short = sized(dx, dy, share ? `${100 - Number(share[1])}%` : `calc(100% - ${distance})`);
+            const full = sized(dx, dy, share ? '100%' : 'calc(100% - 0px)');
+            return [
+                ...(dx ? [slide('x', dx)] : []),
+                ...(dy ? [slide('y', dy)] : []),
+                // Arriving, the window is anchored at the side it moves toward; leaving, the side it leaves.
+                leaving
+                    ? part(`wipe${direction}`, { start: full, end: short })
+                    : part(`wipeOut${direction}`, { start: short, end: full }),
+            ];
+        },
+    };
+};
+export const pockets = Object.fromEntries(Object.keys(DIRECTIONS).flatMap((name) => [
+    [`pocket${name}`, pocket(name, false)],
+    [`pocketOut${name}`, pocket(name, true)],
+]));
+/**
+ * A flip: the element turns into place about its middle, from `angle` degrees
+ * (75 by default) toward the direction it arrives in: `flipUp` rises, its
+ * bottom edge leading; `flipRight` swings in from the left. Leaving, it turns
+ * back out the same way.
+ */
+export const flips = Object.fromEntries(Object.entries(FLIPS).flatMap(([name, [axis, sign]]) => {
+    const effect = `turn${axis}`;
+    return [
+        [
+            `flip${name}`,
+            combo({
+                params: () => ({ angle: 75 }),
+                parts: (p) => [
+                    part('fadeIn', {}, [0, 0.5]),
+                    part(effect, { start: sign * Number(p.angle), end: 0 }),
+                ],
+            }),
+        ],
+        [
+            `flipOut${name}`,
+            combo({
+                params: () => ({ angle: 75 }),
+                parts: (p) => [
+                    part('fadeOut', {}, [0.5, 1]),
+                    part(effect, { start: 0, end: sign * Number(p.angle) }),
+                ],
+            }),
+        ],
+    ];
+}));
+export const comboEffects = {
+    fadeUp: combo({
+        params: away,
+        parts: (p) => [part('fadeIn'), part('slideUp', { start: p.distance, end: ZERO })],
+    }),
+    fadeDown: combo({
+        params: away,
+        parts: (p, r) => [
+            part('fadeIn'),
+            part('slideDown', { start: r.negate(String(p.distance)), end: ZERO }),
+        ],
+    }),
+    fadeStart: combo({
+        params: away,
+        parts: (p, r) => [
+            part('fadeIn'),
+            part('slideRight', { start: r.start(String(p.distance)), end: ZERO }),
+        ],
+    }),
+    fadeEnd: combo({
+        params: away,
+        parts: (p, r) => [
+            part('fadeIn'),
+            part('slideLeft', { start: r.end(String(p.distance)), end: ZERO }),
+        ],
+    }),
+    fadeOutUp: combo({
+        params: away,
+        parts: (p, r) => [
+            part('fadeOut'),
+            part('slideUp', { start: ZERO, end: r.negate(String(p.distance)) }),
+        ],
+    }),
+    fadeOutDown: combo({
+        params: away,
+        parts: (p) => [part('fadeOut'), part('slideDown', { start: ZERO, end: p.distance })],
+    }),
+    popIn: combo({
+        params: () => ({ start: 0.8, peak: 1.04, peakAt: 0.6 }),
+        parts: (p) => [
+            part('pop', { start: p.start, peak: p.peak, peakAt: p.peakAt }),
+            part('fadeIn', {}, [0, Number(p.peakAt)]),
+        ],
+    }),
+    popOut: combo({
+        params: () => ({ end: 0.8, peak: 1.04, peakAt: 0.4 }),
+        parts: (p) => [
+            part('pop', { start: 1, end: p.end, peak: p.peak, peakAt: p.peakAt }),
+            part('fadeOut', {}, [Number(p.peakAt), 1]),
+        ],
+    }),
+    rise: combo({
+        params: () => ({ lift: -4, scale: 1.02 }),
+        parts: (p) => [
+            part('slideUp', { start: 0, end: p.lift }),
+            part('scaleIn', { start: 1, end: p.scale }),
+        ],
+    }),
+    fall: combo({
+        params: () => ({ drop: 4, scale: 0.98 }),
+        parts: (p) => [
+            part('slideDown', { start: 0, end: p.drop }),
+            part('scaleOut', { start: 1, end: p.scale }),
+        ],
+    }),
+    // Pockets, every direction, arriving and leaving.
+    ...pockets,
+    // Flips, depth and swings: three-dimensional, each leaving as its arrival
+    // reversed (`flipOutUp` turns back down the way `flipUp` came).
+    ...flips,
+    depthIn: combo({
+        params: () => ({ depth: -240 }),
+        parts: (p) => [
+            part('fadeIn', {}, [0, 0.6]),
+            part('depth', { start: p.depth, end: 0 }),
+        ],
+    }),
+    depthOut: combo({
+        params: () => ({ depth: -240 }),
+        parts: (p) => [
+            part('fadeOut', {}, [0.4, 1]),
+            part('depth', { start: 0, end: p.depth }),
+        ],
+    }),
+    swingIn: combo({
+        params: () => ({ angle: -80 }),
+        parts: (p) => [
+            part('fadeIn', {}, [0, 0.5]),
+            part('hinge', { start: p.angle, end: 0 }),
+        ],
+    }),
+    swingOut: combo({
+        params: () => ({ angle: -80 }),
+        parts: (p) => [
+            part('fadeOut', {}, [0.5, 1]),
+            part('hinge', { start: 0, end: p.angle }),
+        ],
+    }),
+};
+/** Base effects and combos together: every effect the library ships. */
+export const builtInEffects = { ...baseEffects, ...comboEffects };
+/** Every built-in effect name, base effects first. */
+export const effectNames = Object.keys(builtInEffects);
+/** Own keys only, so `constructor` is no effect. */
+export const isBuiltInEffect = (name) => Object.hasOwn(builtInEffects, name);
+export const isBase = (name) => Object.hasOwn(baseEffects, name);
+export const PLAIN = /^-?[\d.]+[a-z%]*$/i;
+/**
+ * A length the other way. Plain ones (`1rem`, `-12px`) flip textually,
+ * anything else (`calc(…)`, `var(…)`) through `calc()`.
+ */
+export const negate = (length) => PLAIN.test(length)
+    ? length.startsWith('-')
+        ? length.slice(1)
+        : `-${length}`
+    : `calc(-1 * ${length})`;
+/** The reach for JavaScript: lengths, flipped when the element is right to left. */
+export const jsReach = (distance, rtl) => ({
+    distance,
+    negate,
+    start: (length) => (rtl ? length : negate(length)),
+    end: (length) => (rtl ? negate(length) : length),
+});
+export const CSS_DIR = 'var(--greese-motion-dir, 1)';
+/** The reach for CSS: `--greese-motion-dir` is 1, or -1 in right-to-left (Motion.scss). */
+export const cssReach = {
+    distance: 'var(--greese-motion-distance, 1rem)',
+    negate,
+    start: (length) => `calc(-1 * ${CSS_DIR} * ${length})`,
+    end: (length) => `calc(${CSS_DIR} * ${length})`,
+};

package/dist/effects/frames.d.ts

@@ -0,0 +1,18 @@
+/** An effect call as greese.js keyframes: its parts' tracks, resolved for a reach. */
+import { type BuiltInEffect, type EffectFrames, type Reach, type Stop, type Value } from './definitions.ts';
+export type Track = {
+    property: string;
+    stops: Stop[];
+};
+export declare const round: (offset: number) => number;
+export declare const tracksOf: (name: BuiltInEffect, args: Record<string, Value | undefined>, reach: Reach) => Track[];
+/** Properties with evenly spaced stops are written as `{ property: [values] }`, else as a list of frames. */
+export declare const framesOf: (tracks: Track[]) => EffectFrames;
+/**
+ * An effect's keyframes for a reach and arguments (parameter names to values).
+ * Defaults to a left-to-right `1rem` and every parameter's default, which is
+ * what tools that show or edit the effects want.
+ */
+export declare const effectFrames: (name: BuiltInEffect, reach?: Reach, args?: Record<string, Value | undefined>) => EffectFrames;
+/** The parameters an effect has, then the timing keys: the order positional arguments fill. */
+export declare const effectParamNames: (name: string) => string[];

package/dist/effects/frames.js

@@ -0,0 +1,68 @@
+/** An effect call as greese.js keyframes: its parts' tracks, resolved for a reach. */
+import { baseEffects, builtInEffects, comboEffects, cssReach, isBase, isBuiltInEffect, jsReach, timingKeys, } from "./definitions.js";
+export const round = (offset) => Math.round(offset * 10_000) / 10_000;
+export const tracksOf = (name, args, reach) => {
+    const definition = builtInEffects[name];
+    const defaults = isBase(name)
+        ? baseEffects[name].params
+        : definition.params(reach);
+    const params = { ...defaults };
+    for (const key of Object.keys(defaults))
+        if (args[key] !== undefined)
+            params[key] = args[key];
+    if (isBase(name)) {
+        const { stops, format, property, fixed } = baseEffects[name];
+        const at = stops
+            ? stops(params)
+            : [
+                [0, params.start],
+                [1, params.end],
+            ];
+        return [
+            {
+                property,
+                stops: at.map(([offset, value]) => [offset, format ? format(value) : value]),
+            },
+            ...Object.entries(fixed ?? {}).map(([prop, value]) => ({
+                property: prop,
+                stops: [
+                    [0, value],
+                    [1, value],
+                ],
+            })),
+        ];
+    }
+    return definition.parts(params, reach).flatMap((p) => tracksOf(p.effect, p.args, reach).map(({ property, stops }) => ({
+        property,
+        stops: stops.map(([offset, value]) => [round(p.at[0] + offset * (p.at[1] - p.at[0])), value]),
+    })));
+};
+/** Properties with evenly spaced stops are written as `{ property: [values] }`, else as a list of frames. */
+export const framesOf = (tracks) => {
+    const even = tracks.every(({ stops }) => stops.length > 1 &&
+        stops.every(([offset], i) => round(offset) === round(i / (stops.length - 1))));
+    if (even)
+        return Object.fromEntries(tracks.map(({ property, stops }) => [property, stops.map(([, value]) => value)]));
+    const at = new Map();
+    for (const { property, stops } of tracks)
+        for (const [offset, value] of stops) {
+            const key = round(offset);
+            at.set(key, { ...at.get(key), [property]: value });
+        }
+    return [...at]
+        .sort(([a], [b]) => a - b)
+        .map(([offset, values]) => ({ ...values, offset }));
+};
+/**
+ * An effect's keyframes for a reach and arguments (parameter names to values).
+ * Defaults to a left-to-right `1rem` and every parameter's default, which is
+ * what tools that show or edit the effects want.
+ */
+export const effectFrames = (name, reach = jsReach('1rem', false), args = {}) => framesOf(tracksOf(name, args, reach));
+/** The parameters an effect has, then the timing keys: the order positional arguments fill. */
+export const effectParamNames = (name) => isBuiltInEffect(name)
+    ? [
+        ...Object.keys(isBase(name) ? baseEffects[name].params : comboEffects[name].params(cssReach)),
+        ...timingKeys,
+    ]
+    : [...timingKeys];

package/dist/effects/sequence.d.ts

@@ -0,0 +1,33 @@
+/** Sequence strings (`'fadeIn+scaleIn,+1,pop'`): steps, calls and their arguments. */
+import { type Timing, type Value } from './definitions.ts';
+/** One effect in a sequence, with the arguments written for it. */
+export interface EffectCall {
+    name: string;
+    args: Record<string, Value>;
+}
+/** A step of a sequence: effects that play together, or a pause in seconds. */
+export type EffectStep = EffectCall[] | number;
+/** Splits at `separator` outside brackets, braces, parentheses and quotes. */
+export declare const splitTop: (text: string, separator: string) => string[];
+export declare const NUMBER: RegExp;
+export declare const valueOf: (text: string) => Value;
+export declare const NAMED: RegExp;
+/**
+ * `0.25, 0.8, { duration: 1 }`: positional values fill the effect's parameters
+ * in order, `key: value` (or `key=value`) sets one by name, and an object sets
+ * several. Only what is written is set.
+ */
+export declare const parseArgs: (name: string, text: string) => Record<string, Value>;
+export declare const CALL: RegExp;
+/**
+ * Parses `'fadeIn(0.25)+scaleIn,+2,fadeOut({ duration: 1 })'`: commas separate
+ * steps that play in turn, `+` joins effects that play together, a number is a
+ * pause, and a negative one (`-0.2`) backs the next step up, so it overlaps
+ * the last. An effect may be followed by arguments in parentheses.
+ */
+export declare const parseSequence: (sequence: string) => EffectStep[];
+/** A call's timing keys, apart from the effect's own parameters. */
+export declare const splitTiming: (args: Record<string, Value>) => {
+    timing: Timing;
+    params: Record<string, Value>;
+};

package/dist/effects/sequence.js

@@ -0,0 +1,106 @@
+/** Sequence strings (`'fadeIn+scaleIn,+1,pop'`): steps, calls and their arguments. */
+import {} from "./definitions.js";
+import { effectParamNames } from "./frames.js";
+/** Splits at `separator` outside brackets, braces, parentheses and quotes. */
+export const splitTop = (text, separator) => {
+    const parts = [];
+    let depth = 0;
+    let quote = '';
+    let start = 0;
+    for (let i = 0; i < text.length; i++) {
+        const c = text[i];
+        if (quote) {
+            if (c === quote)
+                quote = '';
+        }
+        else if (c === '"' || c === "'")
+            quote = c;
+        else if ('([{'.includes(c))
+            depth++;
+        else if (')]}'.includes(c))
+            depth--;
+        else if (c === separator && depth === 0) {
+            parts.push(text.slice(start, i));
+            start = i + 1;
+        }
+    }
+    parts.push(text.slice(start));
+    return parts;
+};
+export const NUMBER = /^[+-]?(\d+\.?\d*|\.\d+)$/;
+export const valueOf = (text) => {
+    const value = text.trim().replace(/^(['"])(.*)\1$/, '$2');
+    return NUMBER.test(value) ? Number(value) : value;
+};
+export const NAMED = /^([A-Za-z_$][\w$]*)\s*[:=]\s*([\s\S]+)$/;
+/**
+ * `0.25, 0.8, { duration: 1 }`: positional values fill the effect's parameters
+ * in order, `key: value` (or `key=value`) sets one by name, and an object sets
+ * several. Only what is written is set.
+ */
+export const parseArgs = (name, text) => {
+    const names = effectParamNames(name);
+    const args = {};
+    let next = 0;
+    const set = (key, value) => {
+        args[key] = valueOf(value);
+    };
+    for (const raw of splitTop(text, ',')) {
+        const arg = raw.trim();
+        if (!arg)
+            continue;
+        if (arg.startsWith('{') && arg.endsWith('}')) {
+            for (const entry of splitTop(arg.slice(1, -1), ',')) {
+                const named = NAMED.exec(entry.trim());
+                if (named)
+                    set(named[1], named[2]);
+            }
+        }
+        else {
+            const named = NAMED.exec(arg);
+            if (named)
+                set(named[1], named[2]);
+            else if (names[next])
+                set(names[next++], arg);
+        }
+    }
+    return args;
+};
+export const CALL = /^([A-Za-z_$][\w$]*)\s*(?:\(([\s\S]*)\))?$/;
+/**
+ * Parses `'fadeIn(0.25)+scaleIn,+2,fadeOut({ duration: 1 })'`: commas separate
+ * steps that play in turn, `+` joins effects that play together, a number is a
+ * pause, and a negative one (`-0.2`) backs the next step up, so it overlaps
+ * the last. An effect may be followed by arguments in parentheses.
+ */
+export const parseSequence = (sequence) => {
+    const steps = [];
+    for (const raw of splitTop(sequence, ',')) {
+        const step = raw.trim();
+        if (NUMBER.test(step))
+            steps.push(Number(step));
+        else if (step)
+            steps.push(splitTop(step, '+')
+                .map((call) => call.trim())
+                .filter(Boolean)
+                .map((call) => {
+                const match = CALL.exec(call);
+                return match
+                    ? { name: match[1], args: parseArgs(match[1], match[2] ?? '') }
+                    : { name: call, args: {} };
+            }));
+    }
+    return steps;
+};
+/** A call's timing keys, apart from the effect's own parameters. */
+export const splitTiming = (args) => {
+    const { duration, offset, ease, ...params } = args;
+    const timing = {};
+    if (duration !== undefined && Number.isFinite(Number(duration)))
+        timing.duration = Number(duration);
+    if (offset !== undefined && Number.isFinite(Number(offset)))
+        timing.offset = Number(offset);
+    if (ease !== undefined)
+        timing.ease = String(ease);
+    return { timing, params };
+};

package/dist/effects.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The built-in effects of the `greese` prop: the one place they are defined.
+ *
+ * - **Base effects** animate one property each (opacity, scale, a translation,
+ *   a filter…) and take optional parameters: `start`, `end` and whatever else
+ *   they need, each with a default. `fadeIn` fades from 0 to 1; `fadeIn(0.25,
+ *   0.8)` or `fadeIn({ end: 0.8 })` changes that.
+ * - **Combo effects** are made of base effects, by name (typed against
+ *   `baseEffects`), each placed in time as a share of the combo: `popIn` is
+ *   `pop` plus a `fadeIn` over its first 60%.
+ *
+ * Every call also takes the timing keys `duration` and `offset` (seconds) and
+ * `ease`, after the effect's own parameters when given by position:
+ * `someEffect(start, end, duration, offset, ease)`.
+ *
+ * Nothing else lists the effects. The runtime plays what this file says; the
+ * build writes every effect that ends at the element's resting state as CSS
+ * (`@keyframes greese-<name>`) and every one that ends away from it as an
+ * overlay exit (`dist/_maps.scss`); the name types and Theme Studio's lists are
+ * derived; an effect Studio defines is turned into the same CSS by the same
+ * `cssPlan()`. To add an effect, add it here.
+ *
+ * Its modules (effects/) import nothing but each other and `kebab.ts` (which
+ * imports nothing, so the runtime chunk carries no tokens): the build script
+ * runs them directly under Node's type stripping.
+ */
+export { baseEffects, builtInEffects, comboEffects, cssReach, effectDirections, effectNames, isBuiltInEffect, jsReach, negate, timingKeys, type BaseArgs, type BaseEffect, type BuiltInEffect, type ComboEffect, type EffectFrames, type Reach, type Timing, } from './effects/definitions.ts';
+export { effectFrames, effectParamNames } from './effects/frames.ts';
+export { parseSequence, splitTiming, type EffectCall, type EffectStep, } from './effects/sequence.ts';
+export { cssPlan, effectClass, effectCss, effectPlan, endsHidden, entranceNames, exitNames, toCssSteps, type CssPlan, type CssStep, } from './effects/css.ts';

package/dist/effects.js

@@ -0,0 +1,30 @@
+/**
+ * The built-in effects of the `greese` prop: the one place they are defined.
+ *
+ * - **Base effects** animate one property each (opacity, scale, a translation,
+ *   a filter…) and take optional parameters: `start`, `end` and whatever else
+ *   they need, each with a default. `fadeIn` fades from 0 to 1; `fadeIn(0.25,
+ *   0.8)` or `fadeIn({ end: 0.8 })` changes that.
+ * - **Combo effects** are made of base effects, by name (typed against
+ *   `baseEffects`), each placed in time as a share of the combo: `popIn` is
+ *   `pop` plus a `fadeIn` over its first 60%.
+ *
+ * Every call also takes the timing keys `duration` and `offset` (seconds) and
+ * `ease`, after the effect's own parameters when given by position:
+ * `someEffect(start, end, duration, offset, ease)`.
+ *
+ * Nothing else lists the effects. The runtime plays what this file says; the
+ * build writes every effect that ends at the element's resting state as CSS
+ * (`@keyframes greese-<name>`) and every one that ends away from it as an
+ * overlay exit (`dist/_maps.scss`); the name types and Theme Studio's lists are
+ * derived; an effect Studio defines is turned into the same CSS by the same
+ * `cssPlan()`. To add an effect, add it here.
+ *
+ * Its modules (effects/) import nothing but each other and `kebab.ts` (which
+ * imports nothing, so the runtime chunk carries no tokens): the build script
+ * runs them directly under Node's type stripping.
+ */
+export { baseEffects, builtInEffects, comboEffects, cssReach, effectDirections, effectNames, isBuiltInEffect, jsReach, negate, timingKeys, } from "./effects/definitions.js";
+export { effectFrames, effectParamNames } from "./effects/frames.js";
+export { parseSequence, splitTiming, } from "./effects/sequence.js";
+export { cssPlan, effectClass, effectCss, effectPlan, endsHidden, entranceNames, exitNames, toCssSteps, } from "./effects/css.js";