visualfries 0.1.0

package/dist/utils/html.js

@@ -0,0 +1,45 @@
+import DOMPurify from 'dompurify';
+export const sanitizeText = (str) => {
+    return DOMPurify.sanitize(str, {
+        ALLOWED_TAGS: [
+            'em',
+            'strong',
+            'b',
+            'i',
+            'u',
+            's',
+            'br',
+            'span',
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6'
+            // 'p' // schvalne zakazane
+        ],
+        ALLOWED_ATTR: ['class', 'style'],
+        ALLOW_DATA_ATTR: false,
+        ALLOW_UNKNOWN_PROTOCOLS: false
+    });
+};
+export const sanitizeHtml = (html) => {
+    return DOMPurify.sanitize(html);
+};
+export const sanitizeElement = (element) => {
+    const sanitized = sanitizeHtml(element.outerHTML);
+    const isSame = element.outerHTML === sanitized;
+    if (isSame) {
+        return element;
+    }
+    const parsed = new DOMParser().parseFromString(sanitized, 'text/html').body.firstChild;
+    if (!parsed) {
+        throw new Error('Failed to parse sanitized HTML.');
+    }
+    return parsed;
+};
+export const wrapEmojis = function (text) {
+    ///(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gm;
+    const emojiRegex = /([\uD800-\uDBFF][\uDC00-\uDFFF](?:[\u200D\uFE0F][\uD800-\uDBFF][\uDC00-\uDFFF]){2,}|\uD83D\uDC69(?:\u200D(?:(?:\uD83D\uDC69\u200D)?\uD83D\uDC67|(?:\uD83D\uDC69\u200D)?\uD83D\uDC66)|\uD83C[\uDFFB-\uDFFF])|\uD83D\uDC69\u200D(?:\uD83D\uDC69\u200D)?\uD83D\uDC66\u200D\uD83D\uDC66|\uD83D\uDC69\u200D(?:\uD83D\uDC69\u200D)?\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67])|\uD83C\uDFF3\uFE0F\u200D\uD83C\uDF08|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3D\uDD3E\uDDD6-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2640\u2642]\uFE0F|\uD83D\uDC69(?:\uD83C[\uDFFB-\uDFFF])\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC6F\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3C-\uDD3E\uDDD6-\uDDDF])\u200D[\u2640\u2642]\uFE0F|\uD83C\uDDFD\uD83C\uDDF0|\uD83C\uDDF6\uD83C\uDDE6|\uD83C\uDDF4\uD83C\uDDF2|\uD83C\uDDE9(?:\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF])|\uD83C\uDDF7(?:\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC])|\uD83C\uDDE8(?:\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF])|(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)(?:\uFE0F\u200D[\u2640\u2642]|(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2640\u2642])\uFE0F|(?:\uD83D\uDC41\uFE0F\u200D\uD83D\uDDE8|\uD83D\uDC69(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2695\u2696\u2708]|\uD83D\uDC69\u200D[\u2695\u2696\u2708]|\uD83D\uDC68(?:(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2695\u2696\u2708]|\u200D[\u2695\u2696\u2708]))\uFE0F|\uD83C\uDDF2(?:\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF])|\uD83D\uDC69\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\u2764\uFE0F\u200D(?:\uD83D\uDC8B\u200D(?:\uD83D[\uDC68\uDC69])|\uD83D[\uDC68\uDC69]))|\uD83C\uDDF1(?:\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE])|\uD83C\uDDEF(?:\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5])|\uD83C\uDDED(?:\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA])|\uD83C\uDDEB(?:\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7])|[#\*0-9]\uFE0F\u20E3|\uD83C\uDDE7(?:\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF])|\uD83C\uDDE6(?:\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF])|\uD83C\uDDFF(?:\uD83C[\uDDE6\uDDF2\uDDFC])|\uD83C\uDDF5(?:\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE])|\uD83C\uDDFB(?:\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA])|\uD83C\uDDF3(?:\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF])|\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62(?:\uDB40\uDC77\uDB40\uDC6C\uDB40\uDC73|\uDB40\uDC73\uDB40\uDC63\uDB40\uDC74|\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67)\uDB40\uDC7F|\uD83D\uDC68(?:\u200D(?:\u2764\uFE0F\u200D(?:\uD83D\uDC8B\u200D)?\uD83D\uDC68|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC66\u200D\uD83D\uDC66|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83C[\uDFFB-\uDFFF])\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]))|\uD83C\uDDF8(?:\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF])|\uD83C\uDDF0(?:\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF])|\uD83C\uDDFE(?:\uD83C[\uDDEA\uDDF9])|\uD83C\uDDEE(?:\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9])|\uD83C\uDDF9(?:\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF])|\uD83C\uDDEC(?:\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE])|\uD83C\uDDFA(?:\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF])|\uD83C\uDDEA(?:\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA])|\uD83C\uDDFC(?:\uD83C[\uDDEB\uDDF8])|(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)(?:\uD83C[\uDFFB-\uDFFF])|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3D\uDD3E\uDDD6-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u261D\u270A-\u270D]|\uD83C[\uDF85\uDFC2\uDFC7]|\uD83D[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC70\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDCAA\uDD74\uDD7A\uDD90\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC]|\uD83E[\uDD18-\uDD1C\uDD1E\uDD1F\uDD30-\uDD36\uDDD1-\uDDD5])(?:\uD83C[\uDFFB-\uDFFF])|\uD83D\uDC68(?:\u200D(?:(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC67|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC66)|\uD83C[\uDFFB-\uDFFF])|(?:[\u261D\u26F9\u270A-\u270D]|\uD83C[\uDF85\uDFC2-\uDFC4\uDFC7\uDFCA-\uDFCC]|\uD83D[\uDC42\uDC43\uDC46-\uDC50\uDC66-\uDC69\uDC6E\uDC70-\uDC78\uDC7C\uDC81-\uDC83\uDC85-\uDC87\uDCAA\uDD74\uDD75\uDD7A\uDD90\uDD95\uDD96\uDE45-\uDE47\uDE4B-\uDE4F\uDEA3\uDEB4-\uDEB6\uDEC0\uDECC]|\uD83E[\uDD18-\uDD1C\uDD1E\uDD1F\uDD26\uDD30-\uDD39\uDD3D\uDD3E\uDDD1-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])?|(?:[\u231A\u231B\u23E9-\u23EC\u23F0\u23F3\u25FD\u25FE\u2614\u2615\u2648-\u2653\u267F\u2693\u26A1\u26AA\u26AB\u26BD\u26BE\u26C4\u26C5\u26CE\u26D4\u26EA\u26F2\u26F3\u26F5\u26FA\u26FD\u2705\u270A\u270B\u2728\u274C\u274E\u2753-\u2755\u2757\u2795-\u2797\u27B0\u27BF\u2B1B\u2B1C\u2B50\u2B55]|\uD83C[\uDC04\uDCCF\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF7C\uDF7E-\uDF93\uDFA0-\uDFCA\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF4\uDFF8-\uDFFF]|\uD83D[\uDC00-\uDC3E\uDC40\uDC42-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDD7A\uDD95\uDD96\uDDA4\uDDFB-\uDE4F\uDE80-\uDEC5\uDECC\uDED0-\uDED2\uDEEB\uDEEC\uDEF4-\uDEF8]|\uD83E[\uDD10-\uDD3A\uDD3C-\uDD3E\uDD40-\uDD45\uDD47-\uDD4C\uDD50-\uDD6B\uDD80-\uDD97\uDDC0\uDDD0-\uDDE6])|(?:[#\*0-9\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u261D\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267B\u267F\u2692-\u2697\u2699\u269B\u269C\u26A0\u26A1\u26AA\u26AB\u26B0\u26B1\u26BD\u26BE\u26C4\u26C5\u26C8\u26CE\u26CF\u26D1\u26D3\u26D4\u26E9\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763\u2764\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC04\uDCCF\uDD70\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE02\uDE1A\uDE2F\uDE32-\uDE3A\uDE50\uDE51\uDF00-\uDF21\uDF24-\uDF93\uDF96\uDF97\uDF99-\uDF9B\uDF9E-\uDFF0\uDFF3-\uDFF5\uDFF7-\uDFFF]|\uD83D[\uDC00-\uDCFD\uDCFF-\uDD3D\uDD49-\uDD4E\uDD50-\uDD67\uDD6F\uDD70\uDD73-\uDD7A\uDD87\uDD8A-\uDD8D\uDD90\uDD95\uDD96\uDDA4\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA-\uDE4F\uDE80-\uDEC5\uDECB-\uDED2\uDEE0-\uDEE5\uDEE9\uDEEB\uDEEC\uDEF0\uDEF3-\uDEF8]|\uD83E[\uDD10-\uDD3A\uDD3C-\uDD3E\uDD40-\uDD45\uDD47-\uDD4C\uDD50-\uDD6B\uDD80-\uDD97\uDDC0\uDDD0-\uDDE6])\uFE0F)/gm;
+    return text.replace(emojiRegex, '<span class="cf-emoji">$1</span>');
+};

package/dist/utils/svgGenerator.d.ts

@@ -0,0 +1,20 @@
+import type { TextAppearance } from '..';
+export declare class SVGGenerator {
+    private fontCache;
+    private emojiCache;
+    private fontDataBase64Cache;
+    private fontDataBase64Inflight;
+    private static instance;
+    static getInstance(): SVGGenerator;
+    generateSVG(el: HTMLElement, config: TextAppearance, width: number, height: number, svgParentId?: string, fontText?: string): Promise<{
+        base: string;
+        content: string;
+        end: string;
+    }>;
+    private isTextEmoji;
+    private getFontDataArrayBuffer;
+    private arrayBufferToDataURL;
+    private getFontDataBase64;
+    clearCache(): void;
+}
+export declare const svgGenerator: SVGGenerator;

package/dist/utils/svgGenerator.js

@@ -0,0 +1,103 @@
+import { fetchFont } from '../fonts/fontLoader.js';
+import { loadEmoji, getIconCode } from './emoji.js';
+import { sanitizeHtml } from './html.js';
+export class SVGGenerator {
+    fontCache = new Map();
+    emojiCache = new Map();
+    fontDataBase64Cache = {};
+    fontDataBase64Inflight = new Map();
+    static instance;
+    static getInstance() {
+        if (!SVGGenerator.instance) {
+            SVGGenerator.instance = new SVGGenerator();
+        }
+        return SVGGenerator.instance;
+    }
+    async generateSVG(el, config, width, height, svgParentId, fontText) {
+        const fontFamily = config.fontFamily
+            ? config.fontFamily.replace(/\s+/g, '+').replace(/^(.)/, (match) => match.toUpperCase())
+            : null;
+        const fontFamilyName = config.fontFamily
+            ? config.fontFamily.replace(/^(.)/, (match) => match.toUpperCase())
+            : null;
+        const weightAppend = config.fontWeight && config.fontWeight !== 'normal' && config.fontWeight !== '400'
+            ? `:wght@${config.fontWeight}`
+            : '';
+        const isEmoji = /^(\p{Emoji_Presentation}|\p{Emoji}\uFE0F|\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\s)+$/u.test(el.textContent || '');
+        const getFontText = isEmoji ? 'a' : fontText || el.textContent;
+        let fontData = null;
+        if (fontFamily && !isEmoji) {
+            const cacheKey = `${fontFamily + weightAppend}_${getFontText}`;
+            if (cacheKey in this.fontDataBase64Cache) {
+                fontData = this.fontDataBase64Cache[cacheKey];
+            }
+            else if (this.fontDataBase64Inflight.has(cacheKey)) {
+                fontData = await this.fontDataBase64Inflight.get(cacheKey);
+            }
+            else {
+                const inflight = this.getFontDataBase64(fontFamily + weightAppend, getFontText || '').finally(() => this.fontDataBase64Inflight.delete(cacheKey));
+                this.fontDataBase64Inflight.set(cacheKey, inflight);
+                fontData = await inflight;
+            }
+        }
+        const styleTag = fontData
+            ? `<style>@font-face { font-family: ${fontFamilyName}; src: url('${fontData}') }</style>`
+            : '';
+        const correctedHTML = sanitizeHtml(el.outerHTML).replace(/<br\s*>/gi, '<br />');
+        // const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" version="1.1">${styleTag}<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="transform: scale(1); transform-origin: top left; display: inline-block;" id="base">${el.outerHTML}</div></foreignObject></svg>`;
+        return {
+            base: `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" version="1.1">${styleTag}<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="transform-origin: 0 0;">`,
+            content: correctedHTML,
+            end: `</div></foreignObject></svg>`
+        };
+    }
+    isTextEmoji(text) {
+        return /^(\p{Emoji_Presentation}|\p{Emoji}\uFE0F|\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\s)+$/u.test(text);
+    }
+    async getFontDataArrayBuffer(fontFamily, text) {
+        const isEmoji = /^(\p{Emoji_Presentation}|\p{Emoji}\uFE0F|\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\s)+$/u.test(text || '');
+        const cacheKey = isEmoji ? 'emojitext' : `${fontFamily}_${text}`;
+        if (!this.fontCache.has(cacheKey)) {
+            const fontData = await fetchFont(isEmoji ? 'Noto+Sans' : fontFamily, isEmoji ? 'a' : text);
+            if (!fontData) {
+                console.error('Failed to fetch font data: ' + cacheKey);
+                this.fontCache.set(cacheKey, null);
+                return null;
+            }
+            this.fontCache.set(cacheKey, fontData);
+        }
+        return this.fontCache.get(cacheKey);
+    }
+    async arrayBufferToDataURL(buffer, mimeType) {
+        // const uint = new Uint8Array(buffer);
+        // const base64 = 'data:' + mimeType + ';base64,' + (await toBase64(uint));
+        // return base64;
+        return new Promise((resolve, reject) => {
+            const blob = new Blob([buffer], { type: mimeType });
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(blob);
+        });
+    }
+    async getFontDataBase64(fontFamily, text) {
+        const cacheKey = `${fontFamily}_${text}`;
+        if (cacheKey in this.fontDataBase64Cache) {
+            return this.fontDataBase64Cache[cacheKey];
+        }
+        const fontData = await this.getFontDataArrayBuffer(fontFamily, text);
+        if (fontData) {
+            const base64Data = await this.arrayBufferToDataURL(fontData, 'font/woff2');
+            this.fontDataBase64Cache[cacheKey] = base64Data;
+            return base64Data;
+        }
+        this.fontDataBase64Cache[cacheKey] = null;
+        return null;
+    }
+    clearCache() {
+        this.fontCache.clear();
+        this.emojiCache.clear();
+        this.fontDataBase64Cache = {};
+    }
+}
+export const svgGenerator = SVGGenerator.getInstance();

package/dist/utils/utils.d.ts

@@ -0,0 +1,5 @@
+import type { Appearance, SceneLayer, SubtitleCollection } from '..';
+import * as PIXI from 'pixi.js-legacy';
+export declare function changeIdDeep<T>(obj: T): T;
+export declare const buildCharactersListFromComponentsAndSubtitles: (layers: SceneLayer[], subtitles: Record<string, SubtitleCollection>) => string[];
+export declare const setPlacementAndOpacity: (obj: PIXI.Sprite | PIXI.Graphics, c: Appearance) => void;

package/dist/utils/utils.js

@@ -0,0 +1,125 @@
+import { AppearanceShape, TextComponentShape } from '..';
+import * as PIXI from 'pixi.js-legacy';
+import { v4 as uuidv4 } from 'uuid';
+export function changeIdDeep(obj) {
+    if (Array.isArray(obj)) {
+        return obj.map(changeIdDeep);
+    }
+    else if (obj !== null && typeof obj === 'object') {
+        const newObj = {};
+        for (const key in obj) {
+            if (key === 'id') {
+                newObj[key] = uuidv4(); // Replace this with the logic to generate new id
+            }
+            else {
+                newObj[key] = changeIdDeep(obj[key]);
+            }
+        }
+        return newObj;
+    }
+    return obj;
+}
+export const buildCharactersListFromComponentsAndSubtitles = function (layers, subtitles) {
+    const characters = ' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-,;:!$?\'"';
+    const charactestList = characters.split('');
+    const components = layers.flatMap((layer) => layer.components);
+    components.forEach((component) => {
+        if (component.type === 'TEXT') {
+            const c = component;
+            const text = c.text;
+            if (text) {
+                const textList = text.split('');
+                const missingChars = textList.filter((char) => {
+                    // Check if the character is not whitespace, not in the characters list,
+                    // and is a Unicode letter or number
+                    return !/\s/.test(char) && !characters.includes(char) && /\p{L}|\p{N}/u.test(char);
+                });
+                // Add both uppercase and lowercase variants of missing chars
+                const variantChars = missingChars.flatMap((char) => [
+                    char.toLowerCase(),
+                    char.toUpperCase()
+                ]);
+                charactestList.push(...new Set(variantChars));
+            }
+        }
+        if (component.type === 'SUBTITLES' &&
+            component.source &&
+            component.source?.assetId &&
+            subtitles[component.source.assetId]) {
+            const c = component;
+            const source = c.source;
+            if (source && source.assetId && subtitles[source.assetId]) {
+                for (const langSubs of Object.values(subtitles[source.assetId])) {
+                    for (const subtitle of langSubs) {
+                        const textList = subtitle.text.split('');
+                        const missingChars = textList.filter((char) => {
+                            // Check if the character is not whitespace, not in the characters list,
+                            // and is a Unicode letter or number
+                            return !/\s/.test(char) && !characters.includes(char) && /\p{L}|\p{N}/u.test(char);
+                        });
+                        // Add both uppercase and lowercase variants of missing chars
+                        const variantChars = missingChars.flatMap((char) => [
+                            char.toLowerCase(),
+                            char.toUpperCase()
+                        ]);
+                        charactestList.push(...new Set(variantChars));
+                    }
+                }
+            }
+        }
+    });
+    return charactestList;
+};
+const rotationAwareConfig = function (config) {
+    const conf = AppearanceShape.safeParse(config);
+    if (!conf.success) {
+        return config;
+    }
+    const { rotation } = conf.data;
+    if (rotation) {
+        const { x, y, width, height } = conf.data;
+        const halfWidth = width / 2;
+        const halfHeight = height / 2;
+        const offsetX = halfWidth;
+        const offsetY = halfHeight;
+        const rotatedX = x + halfWidth;
+        const rotatedY = y + halfHeight;
+        return {
+            ...config,
+            x: rotatedX,
+            y: rotatedY,
+            offsetX,
+            offsetY,
+            rotation
+        };
+    }
+    return config;
+};
+export const setPlacementAndOpacity = function (obj, c) {
+    const conf = AppearanceShape.safeParse(c);
+    if (!conf.success) {
+        return;
+    }
+    const config = rotationAwareConfig(c);
+    const offsetX = config.offsetX ? config.offsetX : 0;
+    const offsetY = config.offsetY ? config.offsetY : 0;
+    obj.x = config.x;
+    obj.y = config.y;
+    obj.width = config.width;
+    obj.height = config.height;
+    obj.alpha = config.opacity || 1;
+    if (config.rotation) {
+        obj.angle = config.rotation;
+    }
+    if (obj instanceof PIXI.Sprite) {
+        if (config.rotation) {
+            obj.anchor.set(0.5);
+            // obj.pivot.x = offsetX;
+            // obj.pivot.y = offsetY;
+        }
+    }
+    else {
+        obj.pivot.x = offsetX;
+        obj.pivot.y = offsetY;
+    }
+};

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "visualfries",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "ContentFries",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentfries/visualfries"
+  },
+  "bugs": {
+    "url": "https://github.com/contentfries/visualfries/issues"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "!dist/stories/**"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "@parcel/resolver-default": {
+    "packageExports": true
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.46.4",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/lodash-es": "^4.17.12",
+    "@types/md5": "^2.3.5",
+    "@types/node": "^20.17.30",
+    "@types/tinycolor2": "^1.4.6",
+    "@types/uuid": "^10.0.0",
+    "autoprefixer": "^10.4.20",
+    "daisyui": "^4.12.13",
+    "eslint": "^9.7.0",
+    "jsdom": "^26.1.0",
+    "knip": "^5.65.0",
+    "md5": "^2.3.0",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.7.0",
+    "publint": "^0.2.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.8.3",
+    "vite": "^5.0.11",
+    "vitest": "^2.0.4"
+  },
+  "dependencies": {
+    "awilix": "^12.0.3",
+    "dompurify": "^3.3.0",
+    "gifuct-js": "^2.1.2",
+    "gsap": "^3.13.0",
+    "hls.js": "^1.5.17",
+    "lodash-es": "^4.17.21",
+    "pixi.js-legacy": "^7.4.3",
+    "tinycolor2": "^1.6.0",
+    "uuid": "^10.0.0",
+    "zod": "^3.25.76"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "pnpm run test:unit -- --run",
+    "test:unit": "vitest",
+    "lint": "eslint . && prettier --check .",
+    "format": "prettier --write .",
+    "knip": "knip"
+  }
+}