visualfries 0.1.902 → 0.1.1095

package/dist/examples/animated-shapes.json

@@ -0,0 +1,148 @@
+{
+	"id": "animated-shapes-example",
+	"version": "2.0",
+	"name": "Animated Shapes",
+	"settings": {
+		"width": 1080,
+		"height": 1920,
+		"duration": 3,
+		"fps": 30,
+		"backgroundColor": "#0a0a0a"
+	},
+	"assets": [],
+	"layers": [
+		{
+			"id": "layer-main",
+			"name": "Main Layer",
+			"order": 0,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "bg",
+					"name": "Background",
+					"type": "SHAPE",
+					"timeline": { "startAt": 0, "endAt": 3 },
+					"visible": true,
+					"order": 0,
+					"shape": { "type": "rectangle" },
+					"appearance": {
+						"x": 0,
+						"y": 0,
+						"width": 1080,
+						"height": 1920,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"color": "#0a0a0a"
+					},
+					"animations": { "enabled": true, "list": [] },
+					"effects": { "enabled": true, "map": {} }
+				},
+				{
+					"id": "circle-1",
+					"name": "Circle",
+					"type": "SHAPE",
+					"timeline": { "startAt": 0, "endAt": 3 },
+					"visible": true,
+					"order": 1,
+					"shape": { "type": "circle" },
+					"appearance": {
+						"x": 290,
+						"y": 710,
+						"width": 500,
+						"height": 500,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"background": {
+							"colors": ["#f472b6", "#a855f7"],
+							"angle": 45
+						}
+					},
+					"animations": {
+						"enabled": true,
+						"list": [
+							{
+								"id": "circle-scale",
+								"name": "Pulse",
+								"animation": {
+									"id": "pulse",
+									"timeline": [
+										{
+											"tweens": [
+												{
+													"method": "from",
+													"vars": { "duration": 0.5, "scale": 0 }
+												},
+												{
+													"method": "to",
+													"vars": { "duration": 0.5, "scale": 1.1 }
+												},
+												{
+													"method": "to",
+													"vars": { "duration": 0.3, "scale": 1 }
+												}
+											]
+										}
+									]
+								}
+							}
+						]
+					},
+					"effects": { "enabled": true, "map": {} }
+				},
+				{
+					"id": "star-1",
+					"name": "Star",
+					"type": "SHAPE",
+					"timeline": { "startAt": 0.5, "endAt": 3 },
+					"visible": true,
+					"order": 2,
+					"shape": { "type": "star" },
+					"appearance": {
+						"x": 640,
+						"y": 300,
+						"width": 300,
+						"height": 300,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"background": {
+							"colors": ["#fbbf24", "#f59e0b"],
+							"angle": 90
+						}
+					},
+					"animations": {
+						"enabled": true,
+						"list": [
+							{
+								"id": "star-spin",
+								"name": "Spin",
+								"animation": {
+									"id": "spin",
+									"timeline": [
+										{
+											"tweens": [
+												{
+													"method": "from",
+													"vars": { "duration": 0.6, "rotation": 180, "scale": 0 }
+												}
+											]
+										}
+									]
+								}
+							}
+						]
+					},
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		}
+	],
+	"transitions": [],
+	"audioTracks": []
+}

package/dist/examples/gradient-background.json

@@ -0,0 +1,105 @@
+{
+	"id": "gradient-background-example",
+	"version": "2.0",
+	"name": "Gradient Background",
+	"settings": {
+		"width": 1080,
+		"height": 1920,
+		"duration": 5,
+		"fps": 30,
+		"backgroundColor": "#000000"
+	},
+	"assets": [],
+	"layers": [
+		{
+			"id": "layer-main",
+			"name": "Main Layer",
+			"order": 0,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "bg-gradient",
+					"name": "Background Gradient",
+					"type": "SHAPE",
+					"timeline": { "startAt": 0, "endAt": 5 },
+					"visible": true,
+					"order": 0,
+					"shape": { "type": "rectangle" },
+					"appearance": {
+						"x": 0,
+						"y": 0,
+						"width": 1080,
+						"height": 1920,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"background": {
+							"colors": ["#667eea", "#764ba2"],
+							"angle": 135
+						}
+					},
+					"animations": { "enabled": true, "list": [] },
+					"effects": { "enabled": true, "map": {} }
+				},
+				{
+					"id": "title-text",
+					"name": "Title",
+					"type": "TEXT",
+					"text": "Hello World",
+					"timeline": { "startAt": 0, "endAt": 5 },
+					"visible": true,
+					"order": 1,
+					"appearance": {
+						"x": 0,
+						"y": 800,
+						"width": 1080,
+						"height": 300,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"horizontalAlign": "center",
+						"verticalAlign": "center",
+						"text": {
+							"fontFamily": "Inter",
+							"fontSize": 120,
+							"fontWeight": "900",
+							"lineHeight": { "value": 1.1, "unit": "em" },
+							"letterSpacing": { "value": -0.02, "unit": "em" },
+							"color": "#ffffff",
+							"textAlign": "center",
+							"textTransform": "uppercase"
+						}
+					},
+					"animations": {
+						"enabled": true,
+						"list": [
+							{
+								"id": "title-scale",
+								"name": "Scale In",
+								"animation": {
+									"id": "scale-in",
+									"timeline": [
+										{
+											"tweens": [
+												{
+													"method": "from",
+													"vars": { "duration": 0.6, "scale": 0.5, "opacity": 0 }
+												}
+											]
+										}
+									]
+								}
+							}
+						]
+					},
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		}
+	],
+	"transitions": [],
+	"audioTracks": []
+}

package/dist/examples/karaoke-subtitles.json

@@ -0,0 +1,97 @@
+{
+	"id": "karaoke-subtitles-example",
+	"version": "2.0",
+	"name": "Karaoke Subtitles",
+	"settings": {
+		"width": 1080,
+		"height": 1920,
+		"duration": 4,
+		"fps": 30,
+		"backgroundColor": "#1a1a2e"
+	},
+	"assets": [],
+	"layers": [
+		{
+			"id": "layer-main",
+			"name": "Main Layer",
+			"order": 0,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "bg",
+					"name": "Background",
+					"type": "SHAPE",
+					"timeline": { "startAt": 0, "endAt": 4 },
+					"visible": true,
+					"order": 0,
+					"shape": { "type": "rectangle" },
+					"appearance": {
+						"x": 0,
+						"y": 0,
+						"width": 1080,
+						"height": 1920,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"background": {
+							"colors": ["#0f0f23", "#1a1a3e"],
+							"angle": 180
+						}
+					},
+					"animations": { "enabled": true, "list": [] },
+					"effects": { "enabled": true, "map": {} }
+				},
+				{
+					"id": "subtitle-karaoke",
+					"name": "Karaoke Text",
+					"type": "TEXT",
+					"text": "Create stunning videos",
+					"timeline": { "startAt": 0, "endAt": 4 },
+					"visible": true,
+					"order": 1,
+					"appearance": {
+						"x": 0,
+						"y": 850,
+						"width": 1080,
+						"height": 200,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"horizontalAlign": "center",
+						"verticalAlign": "center",
+						"text": {
+							"fontFamily": "Montserrat",
+							"fontSize": 90,
+							"fontWeight": "900",
+							"lineHeight": { "value": 1.2, "unit": "em" },
+							"color": "rgba(255,255,255,0.4)",
+							"textAlign": "center",
+							"textTransform": "uppercase",
+							"activeWord": {
+								"enabled": true,
+								"color": "#ffd700",
+								"scale": 1.3
+							}
+						}
+					},
+					"animations": {
+						"enabled": true,
+						"list": [
+							{
+								"id": "words-anim",
+								"name": "Words Highlight",
+								"animation": "cf-words-highlight"
+							}
+						]
+					},
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		}
+	],
+	"transitions": [],
+	"audioTracks": []
+}

package/dist/managers/SubtitlesManager.svelte.js

@@ -208,7 +208,9 @@ function buildSubtitlesManager(timeManager, eventManager, sceneData, subtitles)
             for (const [lang, langIndex] of Object.entries(assetIndex)) {
                 for (const [subtitleId, subtitle] of Object.entries(langIndex)) {
                     const text = subtitle.text;
-                    const characters = text.split('');
+                    // Use Array.from to properly handle multi-codepoint characters (emojis, etc.)
+                    // This prevents splitting emojis into unpaired surrogates that cause encodeURIComponent to fail
+                    const characters = Array.from(text);
                     if (characters && characters.length > 0) {
                         for (const char of characters) {
                             if (!charactersList.includes(char)) {

package/dist/schemas/runtime/types.d.ts

@@ -37,6 +37,13 @@ export interface LayerEvents {
 export interface ComponentEvents {
     componentschange: void;
     componentchange: ComponentData;
+    hookerror: {
+        hookName: string;
+        hookType: string;
+        error: Error;
+        componentId: string;
+        timestamp: number;
+    };
 }
 export interface SubtitlesEvents {
     subtitleschange: void;

package/dist/utils/utils.js

@@ -19,6 +19,19 @@ export function changeIdDeep(obj) {
     }
     return obj;
 }
+/**
+ * Checks if a character is an emoji.
+ * Preserves all legitimate Unicode letters and numbers (Chinese, Japanese, Korean, Arabic, etc.).
+ */
+function isEmoji(char) {
+    // If it's a legitimate Unicode letter or number, it's NOT an emoji
+    // This includes Chinese, Japanese, Korean, Arabic, and all other writing systems
+    if (/\p{L}|\p{N}/u.test(char)) {
+        return false;
+    }
+    // Use Unicode emoji property - automatically maintained by the Unicode standard
+    return /\p{Emoji}/u.test(char);
+}
 export const buildCharactersListFromComponentsAndSubtitles = function (layers, subtitlesCharactersList) {
     const characters = ' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-,;:!$?\'"';
     const charactestList = characters.split('');
@@ -28,11 +41,16 @@ export const buildCharactersListFromComponentsAndSubtitles = function (layers, s
             const c = component;
             const text = c.text;
             if (text) {
-                const textList = text.split('');
+                // Use Array.from to properly handle multi-codepoint characters (emojis, etc.)
+                // This prevents splitting emojis into unpaired surrogates
+                const textList = Array.from(text);
                 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);
+                    // is a Unicode letter or number, and is NOT an emoji
+                    return (!/\s/.test(char) &&
+                        !characters.includes(char) &&
+                        /\p{L}|\p{N}/u.test(char) &&
+                        !isEmoji(char));
                 });
                 // Add both uppercase and lowercase variants of missing chars
                 const variantChars = missingChars.flatMap((char) => [
@@ -44,7 +62,7 @@ export const buildCharactersListFromComponentsAndSubtitles = function (layers, s
         }
         if (subtitlesCharactersList.length > 0) {
             for (const char of subtitlesCharactersList) {
-                if (!characters.includes(char)) {
+                if (!characters.includes(char) && !isEmoji(char)) {
                     // Add both uppercase and lowercase variants of missing chars
                     charactestList.push(char.toLowerCase(), char.toUpperCase());
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visualfries",
-  "version": "0.1.902",
+  "version": "0.1.1095",
   "license": "MIT",
   "author": "ContentFries",
   "repository": {