@efxlab/motion-canvas-responsive 4.0.0

package/lib/components/ParticleGroup.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+export interface ParticleGroupProps {
+    count: number;
+    compositeOperation?: GlobalCompositeOperation;
+    opacity?: number;
+    children: (index: number) => ReactElement;
+}
+export declare function ParticleGroup({ count, compositeOperation, opacity, children, }: ParticleGroupProps): ReactElement[];
+//# sourceMappingURL=ParticleGroup.d.ts.map

package/lib/components/ParticleGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleGroup.d.ts","sourceRoot":"","sources":["../../src/components/ParticleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,YAAY,EAAC,MAAM,OAAO,CAAC;AAGjE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,wBAAwB,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,YAAY,CAAC;CAC3C;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,kBAAkC,EAClC,OAAW,EACX,QAAQ,GACT,EAAE,kBAAkB,GAAG,YAAY,EAAE,CAoBrC"}

package/lib/components/ParticleGroup.js

@@ -0,0 +1,20 @@
+import { cloneElement, isValidElement } from 'react';
+import { useRatio } from '../layout/ResponsiveLayout';
+export function ParticleGroup({ count, compositeOperation = 'source-over', opacity = 1, children, }) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const _layout = useRatio();
+    const elements = [];
+    for (let i = 0; i < count; i++) {
+        const child = children(i);
+        if (isValidElement(child)) {
+            const childOpacity = child.props.opacity ?? 1;
+            elements.push(cloneElement(child, {
+                key: i,
+                compositeOperation,
+                opacity: childOpacity * opacity,
+            }));
+        }
+    }
+    return elements;
+}
+//# sourceMappingURL=ParticleGroup.js.map

package/lib/components/ParticleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleGroup.js","sourceRoot":"","sources":["../../src/components/ParticleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,cAAc,EAAe,MAAM,OAAO,CAAC;AACjE,OAAO,EAAC,QAAQ,EAAC,MAAM,4BAA4B,CAAC;AASpD,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,kBAAkB,GAAG,aAAa,EAClC,OAAO,GAAG,CAAC,EACX,QAAQ,GACW;IACnB,6DAA6D;IAC7D,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC;IAC3B,MAAM,QAAQ,GAAmB,EAAE,CAAC;IAEpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,MAAM,YAAY,GAAI,KAAK,CAAC,KAAa,CAAC,OAAO,IAAI,CAAC,CAAC;YACvD,QAAQ,CAAC,IAAI,CACX,YAAY,CAAC,KAAK,EAAE;gBAClB,GAAG,EAAE,CAAC;gBACN,kBAAkB;gBAClB,OAAO,EAAE,YAAY,GAAG,OAAO;aACzB,CAAC,CACV,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC"}

package/lib/components/RatioLayer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { UseRatioElementOptions } from '../hooks/useRatioElement';
+export interface RatioLayerProps extends UseRatioElementOptions {
+    children?: React.ReactElement | null;
+}
+export declare function RatioLayer({ children, ...options }: RatioLayerProps): React.ReactElement | null;
+//# sourceMappingURL=RatioLayer.d.ts.map

package/lib/components/RatioLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatioLayer.d.ts","sourceRoot":"","sources":["../../src/components/RatioLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,sBAAsB,EACvB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CACtC;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,GAAG,OAAO,EACX,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAK7C"}

package/lib/components/RatioLayer.js

@@ -0,0 +1,8 @@
+import { useRatioElement, } from '../hooks/useRatioElement';
+export function RatioLayer({ children, ...options }) {
+    return useRatioElement({
+        ...options,
+        element: () => children ?? null,
+    });
+}
+//# sourceMappingURL=RatioLayer.js.map

package/lib/components/RatioLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatioLayer.js","sourceRoot":"","sources":["../../src/components/RatioLayer.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,GAEhB,MAAM,0BAA0B,CAAC;AAMlC,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,GAAG,OAAO,EACM;IAChB,OAAO,eAAe,CAAC;QACrB,GAAG,OAAO;QACV,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,IAAI;KAChC,CAAC,CAAC;AACL,CAAC"}

package/lib/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ParticleGroup';
+export * from './RatioLayer';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}

package/lib/components/index.js

@@ -0,0 +1,3 @@
+export * from './ParticleGroup';
+export * from './RatioLayer';
+//# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}

package/lib/context/ResponsiveContext.d.ts

@@ -0,0 +1,45 @@
+import type { Vector2 } from '@efxlab/motion-canvas-core';
+import type { RatioClass, RatioId, ResponsiveRatioConfig, ResponsiveRatiosConfig, ResponsiveState } from '../types';
+export declare function startResponsive(state: ResponsiveState): void;
+export declare function endResponsive(state: ResponsiveState): void;
+export declare function useResponsiveContext(): ResponsiveState;
+export declare function getResponsiveState(): ResponsiveState | undefined;
+export declare function setGlobalRatio(ratio: RatioId, width: number, height: number): void;
+export declare function getGlobalRatio(): ResponsiveState;
+export declare function initResponsiveFromSize(size: Vector2, ratio?: RatioId): void;
+export declare function detectRatioClass(aspectRatio: number): RatioClass;
+export declare function parseRatioString(ratio: string): number;
+/**
+ * Register custom ratios for the responsive system.
+ * This allows templates to define custom aspect ratios beyond the defaults.
+ *
+ * @param ratios - Object mapping ratio IDs to their configuration
+ *
+ * @example
+ * ```typescript
+ * registerCustomRatios({
+ *   'cinema': { aspect: '21:9' },
+ *   'story': { aspect: '9:18' },
+ *   'portrait2': { aspect: '3:4' },
+ * });
+ * ```
+ */
+export declare function registerCustomRatios(ratios: ResponsiveRatiosConfig): void;
+/**
+ * Get all registered custom ratios.
+ */
+export declare function getCustomRatios(): ResponsiveRatiosConfig;
+/**
+ * Get ratio configuration for a specific ratio ID.
+ * Checks custom ratios first, then falls back to defaults.
+ */
+export declare function getRatioConfig(ratioId: string): ResponsiveRatioConfig | undefined;
+/**
+ * Get all available ratio configurations (custom + default).
+ */
+export declare function getAllRatioConfigs(): ResponsiveRatiosConfig;
+/**
+ * Clear all custom ratios.
+ */
+export declare function clearCustomRatios(): void;
+//# sourceMappingURL=ResponsiveContext.d.ts.map

package/lib/context/ResponsiveContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveContext.d.ts","sourceRoot":"","sources":["../../src/context/ResponsiveContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACxD,OAAO,KAAK,EACV,UAAU,EACV,OAAO,EACP,qBAAqB,EACrB,sBAAsB,EACtB,eAAe,EAChB,MAAM,UAAU,CAAC;AA6BlB,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,QAErD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,eAAe,QAInD;AAED,wBAAgB,oBAAoB,IAAI,eAAe,CAMtD;AAED,wBAAgB,kBAAkB,IAAI,eAAe,GAAG,SAAS,CAEhE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAI3E;AAED,wBAAgB,cAAc,IAAI,eAAe,CAEhD;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,GAAE,OAAgB,QAE5E;AAED,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAWhE;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAUtD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,sBAAsB,GAAG,IAAI,CAEzE;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,sBAAsB,CAExD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,MAAM,GACd,qBAAqB,GAAG,SAAS,CAEnC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,sBAAsB,CAE3D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAExC"}

package/lib/context/ResponsiveContext.js

@@ -0,0 +1,118 @@
+const ResponsiveStack = [];
+// Custom ratio registry
+const CustomRatios = {};
+// Default built-in ratios
+const RATIO_16X9 = '16x9';
+const RATIO_9X16 = '9x16';
+const RATIO_4X3 = '4x3';
+const RATIO_1X1 = '1x1';
+const DefaultRatios = {
+    [RATIO_16X9]: { aspect: '16:9' },
+    [RATIO_9X16]: { aspect: '9:16' },
+    [RATIO_4X3]: { aspect: '4:3' },
+    [RATIO_1X1]: { aspect: '1:1' },
+    fullwindow: { aspect: 'auto' },
+};
+// eslint-disable-next-line @typescript-eslint/naming-convention
+let globalResponsiveState = {
+    ratio: '16x9',
+    ratioClass: 'landscape',
+    width: 1920,
+    height: 1080,
+};
+export function startResponsive(state) {
+    ResponsiveStack.push(state);
+}
+export function endResponsive(state) {
+    if (ResponsiveStack.pop() !== state) {
+        throw new Error('startResponsive/endResponsive called out of order.');
+    }
+}
+export function useResponsiveContext() {
+    const state = ResponsiveStack.at(-1);
+    if (!state) {
+        return globalResponsiveState;
+    }
+    return state;
+}
+export function getResponsiveState() {
+    return ResponsiveStack.at(-1) ?? globalResponsiveState;
+}
+export function setGlobalRatio(ratio, width, height) {
+    const aspectRatio = width / height;
+    const ratioClass = detectRatioClass(aspectRatio);
+    globalResponsiveState = { ratio, ratioClass, width, height };
+}
+export function getGlobalRatio() {
+    return globalResponsiveState;
+}
+export function initResponsiveFromSize(size, ratio = '16x9') {
+    setGlobalRatio(ratio, size.x, size.y);
+}
+export function detectRatioClass(aspectRatio) {
+    if (aspectRatio > 2) {
+        return 'ultrawide';
+    }
+    if (aspectRatio > 1) {
+        return 'landscape';
+    }
+    if (aspectRatio === 1) {
+        return 'square';
+    }
+    return 'portrait';
+}
+export function parseRatioString(ratio) {
+    const [w, h] = ratio.split(':').map(Number);
+    if (w && h) {
+        return w / h;
+    }
+    const parts = ratio.split('x').map(Number);
+    if (parts.length === 2 && parts[0] && parts[1]) {
+        return parts[0] / parts[1];
+    }
+    return 16 / 9;
+}
+/**
+ * Register custom ratios for the responsive system.
+ * This allows templates to define custom aspect ratios beyond the defaults.
+ *
+ * @param ratios - Object mapping ratio IDs to their configuration
+ *
+ * @example
+ * ```typescript
+ * registerCustomRatios({
+ *   'cinema': { aspect: '21:9' },
+ *   'story': { aspect: '9:18' },
+ *   'portrait2': { aspect: '3:4' },
+ * });
+ * ```
+ */
+export function registerCustomRatios(ratios) {
+    Object.assign(CustomRatios, ratios);
+}
+/**
+ * Get all registered custom ratios.
+ */
+export function getCustomRatios() {
+    return { ...CustomRatios };
+}
+/**
+ * Get ratio configuration for a specific ratio ID.
+ * Checks custom ratios first, then falls back to defaults.
+ */
+export function getRatioConfig(ratioId) {
+    return CustomRatios[ratioId] ?? DefaultRatios[ratioId];
+}
+/**
+ * Get all available ratio configurations (custom + default).
+ */
+export function getAllRatioConfigs() {
+    return { ...DefaultRatios, ...CustomRatios };
+}
+/**
+ * Clear all custom ratios.
+ */
+export function clearCustomRatios() {
+    Object.keys(CustomRatios).forEach(key => delete CustomRatios[key]);
+}
+//# sourceMappingURL=ResponsiveContext.js.map

package/lib/context/ResponsiveContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveContext.js","sourceRoot":"","sources":["../../src/context/ResponsiveContext.ts"],"names":[],"mappings":"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"}

package/lib/context/ResponsiveContext.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ResponsiveContext.test.d.ts.map

package/lib/context/ResponsiveContext.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveContext.test.d.ts","sourceRoot":"","sources":["../../src/context/ResponsiveContext.test.ts"],"names":[],"mappings":""}

package/lib/context/ResponsiveContext.test.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var vitest_1 = require("vitest");
+var ResponsiveContext_1 = require("../context/ResponsiveContext");
+(0, vitest_1.describe)('ResponsiveContext', function () {
+    (0, vitest_1.describe)('detectRatioClass', function () {
+        (0, vitest_1.it)('should detect landscape ratios (ar > 1)', function () {
+            (0, vitest_1.expect)((0, ResponsiveContext_1.detectRatioClass)(16 / 9)).toBe('landscape');
+            (0, vitest_1.expect)((0, ResponsiveContext_1.detectRatioClass)(4 / 3)).toBe('landscape');
+            (0, vitest_1.expect)((0, ResponsiveContext_1.detectRatioClass)(2)).toBe('landscape');
+        });
+        (0, vitest_1.it)('should detect portrait ratios (ar < 1)', function () {
+            (0, vitest_1.expect)((0, ResponsiveContext_1.detectRatioClass)(9 / 16)).toBe('portrait');
+            (0, vitest_1.expect)((0, ResponsiveContext_1.detectRatioClass)(3 / 4)).toBe('portrait');
+            (0, vitest_1.expect)((0, ResponsiveContext_1.detectRatioClass)(0.5)).toBe('portrait');
+        });
+        (0, vitest_1.it)('should detect square ratios (ar === 1)', function () {
+            (0, vitest_1.expect)((0, ResponsiveContext_1.detectRatioClass)(1)).toBe('square');
+        });
+        (0, vitest_1.it)('should detect ultrawide ratios (ar > 2)', function () {
+            (0, vitest_1.expect)((0, ResponsiveContext_1.detectRatioClass)(21 / 9)).toBe('ultrawide');
+            (0, vitest_1.expect)((0, ResponsiveContext_1.detectRatioClass)(3)).toBe('ultrawide');
+        });
+    });
+    (0, vitest_1.describe)('parseRatioString', function () {
+        (0, vitest_1.it)('should parse colon-separated ratios', function () {
+            (0, vitest_1.expect)((0, ResponsiveContext_1.parseRatioString)('16:9')).toBe(16 / 9);
+            (0, vitest_1.expect)((0, ResponsiveContext_1.parseRatioString)('9:16')).toBe(9 / 16);
+            (0, vitest_1.expect)((0, ResponsiveContext_1.parseRatioString)('4:3')).toBe(4 / 3);
+        });
+        (0, vitest_1.it)('should parse x-separated ratios', function () {
+            (0, vitest_1.expect)((0, ResponsiveContext_1.parseRatioString)('16x9')).toBe(16 / 9);
+            (0, vitest_1.expect)((0, ResponsiveContext_1.parseRatioString)('9x16')).toBe(9 / 16);
+        });
+        (0, vitest_1.it)('should default to 16:9 for invalid input', function () {
+            (0, vitest_1.expect)((0, ResponsiveContext_1.parseRatioString)('invalid')).toBe(16 / 9);
+        });
+    });
+    (0, vitest_1.describe)('global state', function () {
+        (0, vitest_1.it)('should set and get global ratio', function () {
+            (0, ResponsiveContext_1.setGlobalRatio)('9x16', 1080, 1920);
+            var state = (0, ResponsiveContext_1.getGlobalRatio)();
+            (0, vitest_1.expect)(state.ratio).toBe('9x16');
+            (0, vitest_1.expect)(state.width).toBe(1080);
+            (0, vitest_1.expect)(state.height).toBe(1920);
+            (0, vitest_1.expect)(state.ratioClass).toBe('portrait');
+        });
+        (0, vitest_1.it)('should update ratio class when width/height changes', function () {
+            (0, ResponsiveContext_1.setGlobalRatio)('16x9', 1920, 1080);
+            var state = (0, ResponsiveContext_1.getGlobalRatio)();
+            (0, vitest_1.expect)(state.ratioClass).toBe('landscape');
+            (0, ResponsiveContext_1.setGlobalRatio)('9x16', 1080, 1920);
+            state = (0, ResponsiveContext_1.getGlobalRatio)();
+            (0, vitest_1.expect)(state.ratioClass).toBe('portrait');
+        });
+    });
+    (0, vitest_1.describe)('stack operations', function () {
+        (0, vitest_1.it)('should push and pop responsive state', function () {
+            var state = { ratio: '16x9', ratioClass: 'landscape', width: 1920, height: 1080 };
+            (0, ResponsiveContext_1.startResponsive)(state);
+            var result = (0, ResponsiveContext_1.useResponsiveContext)();
+            (0, vitest_1.expect)(result.ratio).toBe('16x9');
+            (0, ResponsiveContext_1.endResponsive)(state);
+            var afterPop = (0, ResponsiveContext_1.useResponsiveContext)();
+            (0, vitest_1.expect)(afterPop.ratio).toBe('9x16'); // falls back to global
+        });
+        (0, vitest_1.it)('should throw on mismatched endResponsive', function () {
+            var state1 = { ratio: '16x9', ratioClass: 'landscape', width: 1920, height: 1080 };
+            var state2 = { ratio: '9x16', ratioClass: 'portrait', width: 1080, height: 1920 };
+            (0, ResponsiveContext_1.startResponsive)(state1);
+            (0, vitest_1.expect)(function () { return (0, ResponsiveContext_1.endResponsive)(state2); }).toThrow();
+        });
+    });
+});

package/lib/helpers/color.d.ts

@@ -0,0 +1,26 @@
+export interface ColorHelpers {
+    tint: (from: string, to: string) => {
+        from: string;
+        to: string;
+    };
+    highlight: (color: string) => {
+        color: string;
+        duration: number;
+    };
+    gradient: (colors: string[]) => {
+        colors: string[];
+        duration: number;
+    };
+}
+export interface StrokeHelpers {
+    draw: (duration: number) => {
+        duration: number;
+    };
+    dash: (length: number, gap: number) => {
+        length: number;
+        gap: number;
+    };
+}
+export declare const color: ColorHelpers;
+export declare const stroke: StrokeHelpers;
+//# sourceMappingURL=color.d.ts.map

package/lib/helpers/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/helpers/color.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,CAAC;IAC/D,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,CAAC;IAChE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK;QAAC,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,CAAC;CACtE;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,CAAC;IAC/C,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,CAAC;CACtE;AAED,eAAO,MAAM,KAAK,EAAE,YAInB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,aAGpB,CAAC"}

package/lib/helpers/color.js

@@ -0,0 +1,10 @@
+export const color = {
+    tint: (from, to) => ({ from, to }),
+    highlight: (color) => ({ color, duration: 0.3 }),
+    gradient: (colors) => ({ colors, duration: colors.length * 0.5 }),
+};
+export const stroke = {
+    draw: (duration) => ({ duration }),
+    dash: (length, gap) => ({ length, gap }),
+};
+//# sourceMappingURL=color.js.map

package/lib/helpers/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../src/helpers/color.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,KAAK,GAAiB;IACjC,IAAI,EAAE,CAAC,IAAY,EAAE,EAAU,EAAE,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,EAAE,EAAC,CAAC;IAChD,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAC,CAAC;IACtD,QAAQ,EAAE,CAAC,MAAgB,EAAE,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,GAAG,GAAG,EAAC,CAAC;CAC1E,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAkB;IACnC,IAAI,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,CAAC,EAAC,QAAQ,EAAC,CAAC;IACxC,IAAI,EAAE,CAAC,MAAc,EAAE,GAAW,EAAE,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,GAAG,EAAC,CAAC;CACvD,CAAC"}

package/lib/helpers/filter.d.ts

@@ -0,0 +1,25 @@
+export interface FilterHelpers {
+    blur: (from: number, to: number) => {
+        from: number;
+        to: number;
+        duration: number;
+    };
+    brightness: (value: number) => {
+        value: number;
+        duration: number;
+    };
+    contrast: (value: number) => {
+        value: number;
+        duration: number;
+    };
+    saturate: (value: number) => {
+        value: number;
+        duration: number;
+    };
+    grayscale: (value: number) => {
+        value: number;
+        duration: number;
+    };
+}
+export declare const filter: FilterHelpers;
+//# sourceMappingURL=filter.d.ts.map

package/lib/helpers/filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../src/helpers/filter.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,CACJ,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,KACP;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,CAAC;IAClD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,CAAC;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,CAAC;IAC/D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,CAAC;IAC/D,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,CAAC;CACjE;AAED,eAAO,MAAM,MAAM,EAAE,aAMpB,CAAC"}

package/lib/helpers/filter.js

@@ -0,0 +1,8 @@
+export const filter = {
+    blur: (from, to) => ({ from, to, duration: 1 }),
+    brightness: (value) => ({ value, duration: 0.5 }),
+    contrast: (value) => ({ value, duration: 0.5 }),
+    saturate: (value) => ({ value, duration: 0.5 }),
+    grayscale: (value) => ({ value, duration: 0.5 }),
+};
+//# sourceMappingURL=filter.js.map

package/lib/helpers/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.js","sourceRoot":"","sources":["../../src/helpers/filter.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,MAAM,GAAkB;IACnC,IAAI,EAAE,CAAC,IAAY,EAAE,EAAU,EAAE,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAC,CAAC;IAC7D,UAAU,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAC,CAAC;IACvD,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAC,CAAC;IACrD,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAC,CAAC;IACrD,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAC,CAAC;CACvD,CAAC"}

package/lib/helpers/helpers.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=helpers.test.d.ts.map

package/lib/helpers/helpers.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.test.d.ts","sourceRoot":"","sources":["../../src/helpers/helpers.test.ts"],"names":[],"mappings":""}