visualfries 0.1.10115 → 0.3.2

package/docs/examples/image-animation.json

@@ -0,0 +1,87 @@
+{
+	"id": "image-animation-runtime-proof",
+	"version": "2.0",
+	"name": "IMAGE animation runtime proof",
+	"settings": {
+		"width": 1080,
+		"height": 1920,
+		"duration": 3,
+		"fps": 30,
+		"backgroundColor": "#111827"
+	},
+	"assets": [
+		{
+			"id": "proof-card-asset",
+			"type": "IMAGE",
+			"url": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='480'%3E%3Crect width='720' height='480' rx='48' fill='%23F5D547'/%3E%3Ccircle cx='360' cy='240' r='96' fill='%23101820'/%3E%3C/svg%3E"
+		}
+	],
+	"layers": [
+		{
+			"id": "image-layer",
+			"name": "Animated image",
+			"order": 10,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "proof-card",
+					"name": "Animated proof card asset",
+					"type": "IMAGE",
+					"source": {
+						"assetId": "proof-card-asset",
+						"url": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='480'%3E%3Crect width='720' height='480' rx='48' fill='%23F5D547'/%3E%3Ccircle cx='360' cy='240' r='96' fill='%23101820'/%3E%3C/svg%3E"
+					},
+					"timeline": { "startAt": 0.5, "endAt": 3 },
+					"visible": true,
+					"order": 0,
+					"appearance": {
+						"x": 180,
+						"y": 720,
+						"width": 720,
+						"height": 480,
+						"opacity": 0.9,
+						"rotation": 3,
+						"scaleX": 1,
+						"scaleY": 1
+					},
+					"animations": {
+						"enabled": true,
+						"list": [
+							{
+								"id": "proof-card-enter",
+								"name": "Image enter",
+								"startAt": 0.15,
+								"enabled": true,
+								"animation": {
+									"id": "proof-card-enter-preset",
+									"duration": 0.6,
+									"timeline": [
+										{
+											"tweens": [
+												{
+													"method": "from",
+													"vars": {
+														"duration": 0.6,
+														"x": -360,
+														"opacity": 0,
+														"scale": 0.82,
+														"rotation": -10,
+														"ease": "power3.out"
+													}
+												}
+											]
+										}
+									]
+								}
+							}
+						]
+					},
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		}
+	],
+	"transitions": [],
+	"audioTracks": []
+}

package/docs/examples/native-text-metric-badge.json

@@ -0,0 +1,109 @@
+{
+	"id": "native-text-metric-badge",
+	"version": "2.0",
+	"name": "Native TEXT metric badge",
+	"settings": {
+		"width": 1080,
+		"height": 1920,
+		"duration": 3,
+		"fps": 30,
+		"backgroundColor": "#151A22"
+	},
+	"assets": [],
+	"layers": [
+		{
+			"id": "metric-layer",
+			"name": "Semantic metric typography",
+			"order": 10,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "views-badge",
+					"name": "881 VIEWS",
+					"type": "TEXT",
+					"text": "881 VIEWS",
+					"timeline": { "startAt": 0.2, "endAt": 3 },
+					"visible": true,
+					"order": 0,
+					"appearance": {
+						"x": 90,
+						"y": 820,
+						"width": 900,
+						"height": 220,
+						"opacity": 1,
+						"rotation": -2,
+						"scaleX": 1,
+						"scaleY": 1,
+						"horizontalAlign": "center",
+						"verticalAlign": "center",
+						"background": {
+							"enabled": true,
+							"color": "#F5D547",
+							"target": "wrapper",
+							"radius": 32
+						},
+						"text": {
+							"fontFamily": "Montserrat",
+							"fontSize": { "value": 116, "unit": "px" },
+							"fontWeight": "900",
+							"lineHeight": { "value": 1, "unit": "em" },
+							"color": "#101820",
+							"textAlign": "center",
+							"textTransform": "uppercase",
+							"outline": {
+								"enabled": true,
+								"color": "#FFFFFF",
+								"size": 2,
+								"opacity": 1,
+								"style": "solid"
+							},
+							"shadow": {
+								"enabled": true,
+								"color": "#000000",
+								"blur": 16,
+								"offsetX": 0,
+								"offsetY": 8,
+								"opacity": 0.5
+							}
+						}
+					},
+					"animations": {
+						"enabled": true,
+						"list": [
+							{
+								"id": "views-badge-enter",
+								"name": "Badge enter",
+								"startAt": 0.1,
+								"enabled": true,
+								"animation": {
+									"id": "views-badge-enter-preset",
+									"duration": 0.5,
+									"timeline": [
+										{
+											"tweens": [
+												{
+													"method": "from",
+													"vars": {
+														"duration": 0.5,
+														"opacity": 0,
+														"scale": 0.82,
+														"y": 70,
+														"ease": "back.out(1.8)"
+													}
+												}
+											]
+										}
+									]
+								}
+							}
+						]
+					},
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		}
+	],
+	"transitions": [],
+	"audioTracks": []
+}

package/package.json

@@ -1,101 +1,134 @@
 {
-  "name": "visualfries",
-  "version": "0.1.10115",
-  "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",
-    "zod": "^4.1.12"
-  },
-  "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",
-    "release-please": "^15.0.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"
-  },
-  "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",
-    "bench:deterministic": "pnpm vitest tests/perf/deterministic-server-render.perf.test.ts --run",
-    "lint": "eslint . && prettier --check .",
-    "format": "prettier --write .",
-    "knip": "knip",
-    "release:pr": "release-please release-pr",
-    "release:github": "release-please github-release",
-    "release:bootstrap": "release-please bootstrap"
-  }
-}
+	"name": "visualfries",
+	"version": "0.3.2",
+	"license": "MIT",
+	"author": "ContentFries",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ContentFries/visualfries"
+	},
+	"bugs": {
+		"url": "https://github.com/ContentFries/visualfries/issues"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && pnpm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "pnpm run package",
+		"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",
+		"release:pr": "release-please release-pr",
+		"release:github": "release-please github-release",
+		"release:bootstrap": "release-please bootstrap"
+	},
+	"files": [
+		"bin",
+		"dist",
+		"skills",
+		"docs",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"!dist/stories/**"
+	],
+	"bin": {
+		"visualfries": "bin/visualfries.js"
+	},
+	"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"
+		},
+		"./agent": {
+			"types": "./dist/agent/index.d.ts",
+			"import": "./dist/agent/index.js",
+			"default": "./dist/agent/index.js"
+		},
+		"./browser": {
+			"types": "./dist/browser/index.d.ts",
+			"import": "./dist/browser/index.js",
+			"default": "./dist/browser/index.js"
+		}
+	},
+	"peerDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^4.0.0 || ^5.0.0 || ^6.0.0",
+		"playwright": "^1.40.0",
+		"svelte": "^5.0.0",
+		"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+	},
+	"peerDependenciesMeta": {
+		"@sveltejs/vite-plugin-svelte": {
+			"optional": true
+		},
+		"playwright": {
+			"optional": true
+		},
+		"vite": {
+			"optional": true
+		}
+	},
+	"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",
+		"playwright": "^1.52.0",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.7.0",
+		"publint": "^0.2.0",
+		"release-please": "^15.0.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",
+		"earcut": "^2.2.4",
+		"gifuct-js": "^2.1.2",
+		"gsap": "^3.13.0",
+		"hls.js": "^1.5.17",
+		"lodash-es": "^4.17.21",
+		"mediabunny": "1.49.0",
+		"pixi.js-legacy": "^7.4.3",
+		"tinycolor2": "^1.6.0",
+		"uuid": "^10.0.0",
+		"zod": "^4.1.12"
+	}
+}