visualfries 0.1.0

package/dist/schemas/scene/subtitles.js

@@ -0,0 +1,111 @@
+import { z } from 'zod';
+import { ColorTypeShape } from './properties.js';
+// ============================================================================
+// COMPACT WORD FORMAT SCHEMAS
+// ============================================================================
+/**
+ * Compact word metadata object with optional short keys
+ */
+const CompactWordMetadataShape = z
+    .object({
+    s: z.number().optional(), // size override in percent
+    si: z.number().optional(), // speaker index
+    c: ColorTypeShape.optional(), // color (0-1)
+    e: z.string().optional(), // emoji
+    w: z.string().optional(), // font weight or bold, bolder etc.
+    f: z.string().optional() // font family
+})
+    .catchall(z.any())
+    .optional(); // Allow additional metadata fields
+/**
+ * Compact word tuple: [text, start_at, end_at, metadata?]
+ */
+const CompactWordTupleShape = z
+    .tuple([
+    z.string(), // text
+    z.number(), // start_at
+    z.number() // end_at
+])
+    .rest(z.union([CompactWordMetadataShape, z.null()])); // optional metadata as 4th element, can be null
+// ============================================================================
+// REGULAR WORD FORMAT SCHEMAS
+// ============================================================================
+/**
+ * Regular word object with full property names
+ */
+const SubtitleWordShape = z.object({
+    id: z.string(),
+    start_at: z.number(),
+    end_at: z.number(),
+    text: z.string(),
+    position: z.number().optional()
+});
+// ============================================================================
+// SUBTITLE SCHEMAS
+// ============================================================================
+const EnlargeShape = z
+    .union([
+    z.boolean(),
+    z.number(),
+    z.string().transform((val) => {
+        const num = parseFloat(val);
+        if (isNaN(num)) {
+            return true;
+        }
+        return num;
+    })
+])
+    .optional()
+    .transform((v) => {
+    if (typeof v === 'boolean') {
+        return v ? 150 : undefined;
+    }
+    return v;
+});
+/**
+ * Subtitle with compact words format
+ */
+const SubtitleWithCompactWordsShape = z.object({
+    id: z.string(),
+    start_at: z.number(),
+    end_at: z.number(),
+    text: z.string(),
+    words: z.array(CompactWordTupleShape).optional(),
+    // Optional appearance fields
+    enlarge: EnlargeShape.optional(),
+    visible: z.boolean().optional(),
+    emoji: z.string().optional(),
+    color: ColorTypeShape.optional(),
+    background: ColorTypeShape.optional()
+});
+/**
+ * Subtitle with regular words format (legacy)
+ */
+const SubtitleWithLegacyWordsShape = z.object({
+    id: z.string(),
+    start_at: z.number(),
+    end_at: z.number(),
+    text: z.string(),
+    words: z.array(SubtitleWordShape).optional(),
+    // Optional appearance fields
+    enlarge: EnlargeShape.optional(),
+    visible: z.boolean().optional(),
+    emoji: z.string().optional(),
+    color: z.string().optional(),
+    background: z.string().optional()
+});
+/**
+ * Union type that accepts both formats
+ */
+const SubtitleShape = z.union([SubtitleWithCompactWordsShape, SubtitleWithLegacyWordsShape]);
+// ============================================================================
+// COLLECTION SCHEMAS
+// ============================================================================
+/**
+ * Subtitle collection (language mapping)
+ */
+const SubtitleCollectionShape = z.record(z.string(), z.array(SubtitleShape));
+// ============================================================================
+// SCHEMA EXPORTS
+// ============================================================================
+export { CompactWordMetadataShape, CompactWordTupleShape, SubtitleWordShape, SubtitleWithCompactWordsShape, SubtitleWithLegacyWordsShape, SubtitleShape, SubtitleCollectionShape };

package/dist/schemas/scene/utils.d.ts

@@ -0,0 +1 @@
+export declare function isValidColor(color: string): boolean;

package/dist/schemas/scene/utils.js

@@ -0,0 +1,5 @@
+import tinycolor from 'tinycolor2';
+export function isValidColor(color) {
+    const c = tinycolor(color);
+    return c.isValid(); // true
+}

package/dist/seeds/SeedFactory.d.ts

@@ -0,0 +1,59 @@
+/**
+ * SeedFactory - A utility for deterministic seed-based value generation
+ *
+ * This class implements functionality for creating deterministic sequences
+ * from seed values, useful for consistent animations and randomization.
+ */
+export declare class SeedFactory {
+    /**
+     * Generates a hash value from a string
+     * Implementation of djb2 hash algorithm
+     *
+     * @param str The string to hash
+     * @returns A numeric hash value
+     */
+    static hash(str: string): number;
+    /**
+     * Creates a deterministic random number generator
+     *
+     * @param seed The seed value for random generation
+     * @returns A function that produces deterministic random numbers between 0 and 1
+     */
+    static createRandomGenerator(seed?: number): () => number;
+    /**
+     * Generates a deterministic array of values selected from possible values
+     *
+     * @param seed The seed value for deterministic selection
+     * @param possibleValues Array of possible values to select from
+     * @param count Number of items to generate (default: 50)
+     * @returns Array of values in deterministic pseudo-random order
+     */
+    static generateValues<T>(seed: number, possibleValues: T[], count?: number): T[];
+    /**
+     * Generates an array of possible values within a numeric range
+     *
+     * @param min Minimum value (inclusive)
+     * @param max Maximum value (inclusive)
+     * @param step Step size between values (default: 1)
+     * @returns Array of all possible values in the range
+     */
+    static generatePossibleValues(min: number, max: number, step?: number): number[];
+    /**
+     * Generates deterministic numeric values within a range
+     *
+     * @param seed The seed value for deterministic generation
+     * @param min Minimum value (inclusive)
+     * @param max Maximum value (inclusive)
+     * @param step Step size between values (default: 1)
+     * @param count Number of items to generate (default: 50)
+     * @returns Array of deterministic numeric values
+     */
+    static generateRangeValues(seed: number, min: number, max: number, step?: number, count?: number): number[];
+    /**
+     * Converts an array to a seed value
+     *
+     * @param array Array to convert to seed
+     * @returns Numeric seed value
+     */
+    static arrayToSeed<T>(array: T[]): number;
+}

package/dist/seeds/SeedFactory.js

@@ -0,0 +1,99 @@
+/**
+ * SeedFactory - A utility for deterministic seed-based value generation
+ *
+ * This class implements functionality for creating deterministic sequences
+ * from seed values, useful for consistent animations and randomization.
+ */
+export class SeedFactory {
+    /**
+     * Generates a hash value from a string
+     * Implementation of djb2 hash algorithm
+     *
+     * @param str The string to hash
+     * @returns A numeric hash value
+     */
+    static hash(str) {
+        // Optional: Limit string length to prevent excessive computation
+        const limitedStr = str.length > 10000 ? str.substring(0, 10000) : str;
+        let hash = 5381;
+        for (let i = 0; i < limitedStr.length; i++) {
+            hash = (hash * 33) ^ limitedStr.charCodeAt(i);
+        }
+        return hash >>> 0;
+    }
+    /**
+     * Creates a deterministic random number generator
+     *
+     * @param seed The seed value for random generation
+     * @returns A function that produces deterministic random numbers between 0 and 1
+     */
+    static createRandomGenerator(seed = 5381) {
+        let currentSeed = seed;
+        return function () {
+            // Simple LCG (Linear Congruential Generator)
+            currentSeed = (currentSeed * 9301 + 49297) % 233280;
+            return currentSeed / 233280;
+        };
+    }
+    /**
+     * Generates a deterministic array of values selected from possible values
+     *
+     * @param seed The seed value for deterministic selection
+     * @param possibleValues Array of possible values to select from
+     * @param count Number of items to generate (default: 50)
+     * @returns Array of values in deterministic pseudo-random order
+     */
+    static generateValues(seed, possibleValues, count = 50) {
+        if (!possibleValues.length)
+            return [];
+        // Create seeded random generator
+        const seededRandom = this.createRandomGenerator(seed);
+        const result = [];
+        // Fill array with deterministic selections
+        for (let i = 0; i < count; i++) {
+            const randomIndex = Math.floor(seededRandom() * possibleValues.length);
+            result.push(possibleValues[randomIndex]);
+        }
+        return result;
+    }
+    /**
+     * Generates an array of possible values within a numeric range
+     *
+     * @param min Minimum value (inclusive)
+     * @param max Maximum value (inclusive)
+     * @param step Step size between values (default: 1)
+     * @returns Array of all possible values in the range
+     */
+    static generatePossibleValues(min, max, step = 1) {
+        const values = [];
+        for (let i = min; i <= max; i += step) {
+            values.push(Number(i.toFixed(2))); // Fix precision
+        }
+        return values;
+    }
+    /**
+     * Generates deterministic numeric values within a range
+     *
+     * @param seed The seed value for deterministic generation
+     * @param min Minimum value (inclusive)
+     * @param max Maximum value (inclusive)
+     * @param step Step size between values (default: 1)
+     * @param count Number of items to generate (default: 50)
+     * @returns Array of deterministic numeric values
+     */
+    static generateRangeValues(seed, min, max, step = 1, count = 50) {
+        // Generate all possible values in the range
+        const possibleValues = this.generatePossibleValues(min, max, step);
+        // Use the standard generateValues method with the possible values
+        return this.generateValues(seed, possibleValues, count);
+    }
+    /**
+     * Converts an array to a seed value
+     *
+     * @param array Array to convert to seed
+     * @returns Numeric seed value
+     */
+    static arrayToSeed(array) {
+        return this.hash(JSON.stringify(array));
+    }
+}

package/dist/seeds/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Seeds module
+ *
+ * Provides utilities for deterministic seed-based value generation
+ * used for animations, rotation randomizers, and other areas
+ * where consistent pseudo-randomness is needed.
+ */
+export * from './SeedFactory.js';

package/dist/seeds/index.js

@@ -0,0 +1,8 @@
+/**
+ * Seeds module
+ *
+ * Provides utilities for deterministic seed-based value generation
+ * used for animations, rotation randomizers, and other areas
+ * where consistent pseudo-randomness is needed.
+ */
+export * from './SeedFactory.js';

package/dist/transformers/ColorTransformer.d.ts

@@ -0,0 +1,5 @@
+import type { ColorType } from '..';
+import type { HtmlElementStyle } from '../builders/html/HtmlBuilder.js';
+export declare class ColorTransformer {
+    static transform(color: ColorType, type: 'text' | 'background'): HtmlElementStyle;
+}

package/dist/transformers/ColorTransformer.js

@@ -0,0 +1,67 @@
+import { ColorTypeShape, GradientDefinitionShape } from '..';
+import tinycolor from 'tinycolor2';
+function buildGradientCss(gradient) {
+    const colorsWithStops = gradient.colors
+        .map((col, index) => {
+        if (gradient.stops?.[index] !== undefined) {
+            return `${col} ${gradient.stops[index]}%`;
+        }
+        return col;
+    })
+        .join(', ');
+    if (gradient.type === 'linear') {
+        const angle = gradient.angle !== undefined ? `${gradient.angle}deg` : 'to bottom';
+        return `linear-gradient(${angle}, ${colorsWithStops})`;
+    }
+    else if (gradient.type === 'radial') {
+        let definition = '';
+        if (gradient.shape)
+            definition += gradient.shape;
+        if (gradient.position) {
+            definition += definition ? ` at ${gradient.position}` : `at ${gradient.position}`;
+        }
+        return `radial-gradient(${definition ? definition + ', ' : ''}${colorsWithStops})`;
+    }
+    return '';
+}
+export class ColorTransformer {
+    static transform(color, type) {
+        const styles = {};
+        const validTypes = ['text', 'background'];
+        if (!validTypes.includes(type)) {
+            return styles;
+        }
+        const resp = ColorTypeShape.safeParse(color);
+        if (!resp.success) {
+            return styles;
+        }
+        if (typeof resp.data === 'string') {
+            const output = tinycolor(resp.data);
+            if (output.isValid()) {
+                const prop = type === 'text' ? 'color' : 'backgroundColor';
+                if (output.getAlpha() === 0) {
+                    styles[prop] = 'transparent';
+                    return styles;
+                }
+                styles[prop] = output.toRgbString();
+                return styles;
+            }
+            return styles;
+        }
+        if (resp.data.type === 'linear' || resp.data.type === 'radial') {
+            const gradient = GradientDefinitionShape.safeParse(resp.data);
+            if (!gradient.success) {
+                return styles;
+            }
+            const prop = type === 'text' ? 'backgroundImage' : 'background';
+            styles[prop] = buildGradientCss(gradient.data);
+            if (type === 'text') {
+                styles.webkitBackgroundClip = 'text';
+                styles.backgroundClip = 'text';
+                styles.color = 'transparent';
+            }
+            return styles;
+        }
+        return styles;
+    }
+}

package/dist/transformers/PixiColorTransformer.d.ts

@@ -0,0 +1,22 @@
+import * as PIXI from 'pixi.js-legacy';
+import type { ColorType } from '..';
+interface PixiColorResult {
+    type: 'solid' | 'gradient';
+    color?: number;
+    texture?: PIXI.Texture;
+    width?: number;
+    height?: number;
+}
+interface BgShape {
+    enabled: boolean;
+    color: ColorType;
+    target?: string;
+    radius?: number;
+}
+type BackgroundShape = BgShape | ColorType | null | undefined;
+export declare class PixiColorTransformer {
+    #private;
+    static transform(background: BackgroundShape, width: number, height: number): PixiColorResult;
+    static isGradient(background: BackgroundShape): boolean;
+}
+export {};

package/dist/transformers/PixiColorTransformer.js

@@ -0,0 +1,104 @@
+import * as PIXI from 'pixi.js-legacy';
+import { ColorTypeShape, GradientDefinitionShape } from '..';
+import tinycolor from 'tinycolor2';
+export class PixiColorTransformer {
+    static transform(background, width, height) {
+        if (!background) {
+            return { type: 'solid', color: 0x000000 };
+        }
+        // Extract the actual color from the background
+        const color = this.#extractColor(background);
+        if (!color) {
+            return { type: 'solid', color: 0x000000 };
+        }
+        const resp = ColorTypeShape.safeParse(color);
+        if (!resp.success) {
+            return { type: 'solid', color: 0x000000 };
+        }
+        // Handle solid color
+        if (typeof resp.data === 'string') {
+            const output = tinycolor(resp.data);
+            if (output.isValid()) {
+                if (output.getAlpha() === 0) {
+                    return { type: 'solid', color: 0x000000 };
+                }
+                return { type: 'solid', color: parseInt(output.toHex(), 16) };
+            }
+            return { type: 'solid', color: 0x000000 };
+        }
+        // Handle gradient
+        if (resp.data.type === 'linear' || resp.data.type === 'radial') {
+            const gradient = GradientDefinitionShape.safeParse(resp.data);
+            if (!gradient.success) {
+                return { type: 'solid', color: 0x000000 };
+            }
+            const canvas = this.#createGradientCanvas(gradient.data, width, height);
+            const texture = PIXI.Texture.from(canvas);
+            return { type: 'gradient', texture, width, height };
+        }
+        return { type: 'solid', color: 0x000000 };
+    }
+    static #extractColor(background) {
+        if (!background)
+            return null;
+        // If it's a direct ColorType (string or gradient object)
+        if (typeof background === 'string' ||
+            (typeof background === 'object' && 'type' in background)) {
+            return background;
+        }
+        // If it's a BgShape object
+        if (typeof background === 'object' && 'enabled' in background) {
+            const bgShape = background;
+            if (!bgShape.enabled)
+                return null;
+            return bgShape.color;
+        }
+        return null;
+    }
+    static #createGradientCanvas(gradient, width, height) {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        const colorsWithStops = gradient.colors.map((col, index) => {
+            if (gradient.stops?.[index] !== undefined) {
+                return { color: col, stop: gradient.stops[index] / 100 };
+            }
+            return { color: col, stop: index / (gradient.colors.length - 1) };
+        });
+        if (gradient.type === 'linear') {
+            const angle = gradient.angle !== undefined ? gradient.angle : 0;
+            const rad = (angle * Math.PI) / 180;
+            const x1 = (Math.cos(rad) * width) / 2 + width / 2;
+            const y1 = (Math.sin(rad) * height) / 2 + height / 2;
+            const gradientObj = ctx.createLinearGradient(width / 2, height / 2, x1, y1);
+            colorsWithStops.forEach(({ color, stop }) => {
+                gradientObj.addColorStop(stop, color);
+            });
+            ctx.fillStyle = gradientObj;
+            ctx.fillRect(0, 0, width, height);
+        }
+        else if (gradient.type === 'radial') {
+            // For radial gradients, we'll use a simplified approach
+            // PIXI doesn't have native radial gradient support, so we create a linear approximation
+            const gradientObj = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, Math.max(width, height) / 2);
+            colorsWithStops.forEach(({ color, stop }) => {
+                gradientObj.addColorStop(stop, color);
+            });
+            ctx.fillStyle = gradientObj;
+            ctx.fillRect(0, 0, width, height);
+        }
+        return canvas;
+    }
+    static isGradient(background) {
+        if (!background)
+            return false;
+        const color = this.#extractColor(background);
+        if (!color)
+            return false;
+        const resp = ColorTypeShape.safeParse(color);
+        if (!resp.success)
+            return false;
+        return (typeof resp.data === 'object' && (resp.data.type === 'linear' || resp.data.type === 'radial'));
+    }
+}

package/dist/utils/canvas.d.ts

@@ -0,0 +1,6 @@
+export declare const computeXYAngle: (angleInDeg: number, width: number, height: number) => {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+};

package/dist/utils/canvas.js

@@ -0,0 +1,18 @@
+export const computeXYAngle = (angleInDeg, width, height) => {
+    // Compute angle in radians - CSS starts from 180 degrees and goes clockwise
+    // Math functions start from 0 and go anti-clockwise so we use 180 - angleInDeg to convert between the two
+    const angle = ((180 - angleInDeg) * Math.PI) / 180;
+    // const angle = ((180 - angleInDeg) / 180) * Math.PI;
+    // // This computes the length such that the start/stop points will be at the corners
+    const length = Math.abs(width * Math.sin(angle)) + Math.abs(height * Math.cos(angle));
+    // Compute the actual x,y points based on the angle, length of the gradient line and the center of the div
+    const halfx = (Math.sin(angle) * length) / 2.0;
+    const halfy = (Math.cos(angle) * length) / 2.0;
+    const cx = width / 2.0;
+    const cy = height / 2.0;
+    const x1 = Math.round(cx - halfx);
+    const y1 = Math.round(cy - halfy);
+    const x2 = Math.round(cx + halfx);
+    const y2 = Math.round(cy + halfy);
+    return { x1, x2, y1, y2 };
+};

package/dist/utils/document.d.ts

@@ -0,0 +1,2 @@
+import type { FontType } from '..';
+export declare const loadFonts: (fonts: FontType[]) => Promise<void>;

package/dist/utils/document.js

@@ -0,0 +1,36 @@
+async function waitForAllFonts() {
+    // Guard clause for server-side rendering or non-browser environments
+    if (typeof document === 'undefined' || !document.fonts) {
+        return;
+    }
+    try {
+        await document.fonts.ready;
+    }
+    catch (error) {
+        console.warn('One or more fonts failed to load.', error);
+    }
+}
+export const loadFonts = async function (fonts) {
+    // const results = await PIXI.Assets.load(fonts);
+    const googleFonts = fonts.reduce((acc, font) => {
+        if (font.source == 'google' && font.data) {
+            acc.push(font.data.family);
+        }
+        return acc;
+    }, []);
+    if (document && googleFonts.length > 0 && typeof document !== 'undefined') {
+        const fontPromises = googleFonts.map((font) => new Promise((resolve) => {
+            const link = document.createElement('link');
+            link.href = `https://fonts.googleapis.com/css?family=${encodeURIComponent(font)}`;
+            link.rel = 'stylesheet';
+            link.onload = () => resolve(true);
+            link.onerror = () => {
+                console.warn(`Failed to load font: ${font}`);
+                resolve(false);
+            };
+            document.head.appendChild(link);
+        }));
+        await Promise.all(fontPromises);
+    }
+    await waitForAllFonts();
+};

package/dist/utils/emoji.d.ts

@@ -0,0 +1,10 @@
+export declare function getIconCode(char: string): string;
+export declare const apis: {
+    twemoji: (code: string) => string;
+    openmoji: string;
+    blobmoji: string;
+    noto: string;
+    fluent: (code: string) => string;
+    fluentFlat: (code: string) => string;
+};
+export declare function loadEmoji(type: keyof typeof apis, code: string): Promise<any>;

package/dist/utils/emoji.js

@@ -0,0 +1,51 @@
+const U200D = String.fromCharCode(8205);
+const UFE0Fg = /\uFE0F/g;
+export function getIconCode(char) {
+    return toCodePoint(char.indexOf(U200D) < 0 ? char.replace(UFE0Fg, "") : char);
+}
+function toCodePoint(unicodeSurrogates) {
+    const r = [];
+    let c = 0, p = 0, i = 0;
+    while (i < unicodeSurrogates.length) {
+        c = unicodeSurrogates.charCodeAt(i++);
+        if (p) {
+            r.push((65536 + ((p - 55296) << 10) + (c - 56320)).toString(16));
+            p = 0;
+        }
+        else if (55296 <= c && c <= 56319) {
+            p = c;
+        }
+        else {
+            r.push(c.toString(16));
+        }
+    }
+    return r.join("-");
+}
+export const apis = {
+    twemoji: (code) => "https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/" +
+        code.toLowerCase() +
+        ".svg",
+    openmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/",
+    blobmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/",
+    noto: "https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/",
+    fluent: (code) => "https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" +
+        code.toLowerCase() +
+        "_color.svg",
+    fluentFlat: (code) => "https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" +
+        code.toLowerCase() +
+        "_flat.svg",
+};
+const emojiCache = {};
+export function loadEmoji(type, code) {
+    const key = type + ":" + code;
+    if (key in emojiCache)
+        return emojiCache[key];
+    if (!type || !apis[type]) {
+        type = "twemoji";
+    }
+    const api = apis[type];
+    if (typeof api === "function") {
+        return (emojiCache[key] = fetch(api(code)).then((r) => r.text()));
+    }
+    return (emojiCache[key] = fetch(`${api}${code.toUpperCase()}.svg`).then((r) => r.text()));
+}

package/dist/utils/html.d.ts

@@ -0,0 +1,4 @@
+export declare const sanitizeText: (str: string) => string;
+export declare const sanitizeHtml: (html: string) => string;
+export declare const sanitizeElement: (element: HTMLElement) => HTMLElement;
+export declare const wrapEmojis: (text: string) => string;