@vosjs/elements 0.1.0

package/dist/bundle.d.ts

@@ -0,0 +1 @@
+export declare const elementsBundleCode: string

package/dist/bundle.js

@@ -0,0 +1,2 @@
+// AUTO-GENERATED by bundle.mjs — injectable IIFE defining globalThis.__vosElementsFactory
+export const elementsBundleCode = "\"use strict\";\nvar __vosElementsFactory = (() => {\n  var __defProp = Object.defineProperty;\n  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;\n  var __getOwnPropNames = Object.getOwnPropertyNames;\n  var __hasOwnProp = Object.prototype.hasOwnProperty;\n  var __export = (target, all) => {\n    for (var name in all)\n      __defProp(target, name, { get: all[name], enumerable: true });\n  };\n  var __copyProps = (to, from, except, desc) => {\n    if (from && typeof from === \"object\" || typeof from === \"function\") {\n      for (let key of __getOwnPropNames(from))\n        if (!__hasOwnProp.call(to, key) && key !== except)\n          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n    }\n    return to;\n  };\n  var __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\n\n  // src/index.ts\n  var index_exports = {};\n  __export(index_exports, {\n    createVosElements: () => createVosElements,\n    renderElements: () => renderElements\n  });\n\n  // src/assetCache.ts\n  var AssetCache = {\n    images: /* @__PURE__ */ new Map(),\n    videos: /* @__PURE__ */ new Map(),\n    svgContents: /* @__PURE__ */ new Map(),\n    getImage(url) {\n      return this.images.get(url) || null;\n    },\n    getVideo(url) {\n      return this.videos.get(url) || null;\n    },\n    getSVG(url) {\n      return this.svgContents.get(url) || null;\n    },\n    dispose() {\n      this.videos.forEach((cached) => {\n        cached.element.pause();\n        cached.element.src = \"\";\n        cached.element.load();\n        if (cached.blobUrl) {\n          URL.revokeObjectURL(cached.blobUrl);\n        }\n      });\n      this.images.clear();\n      this.videos.clear();\n      this.svgContents.clear();\n    }\n  };\n  function extractAssetUrls(elementsConfig) {\n    const assets = {\n      images: [],\n      videos: [],\n      svgs: []\n    };\n    for (const el of elementsConfig) {\n      if (el.type === \"image\" && el.src) {\n        assets.images.push(el.src);\n      } else if (el.type === \"video\" && el.src) {\n        assets.videos.push(el.src);\n      } else if (el.type === \"svg\" && el.src) {\n        assets.svgs.push(el.src);\n      }\n    }\n    assets.images = [...new Set(assets.images)];\n    assets.videos = [...new Set(assets.videos)];\n    assets.svgs = [...new Set(assets.svgs)];\n    return assets;\n  }\n  async function preloadImage(url) {\n    if (AssetCache.images.has(url)) return;\n    const img = new Image();\n    img.crossOrigin = \"anonymous\";\n    await new Promise((resolve) => {\n      img.onload = () => resolve();\n      img.onerror = () => {\n        console.warn(\"Failed to preload image:\", url);\n        resolve();\n      };\n      img.src = url;\n    });\n    AssetCache.images.set(url, {\n      element: img,\n      width: img.naturalWidth,\n      height: img.naturalHeight\n    });\n  }\n  async function preloadVideo(url) {\n    if (AssetCache.videos.has(url)) return;\n    try {\n      const response = await fetch(url);\n      if (!response.ok) {\n        throw new Error(\"Failed to fetch video: \" + response.status);\n      }\n      const blob = await response.blob();\n      const blobUrl = URL.createObjectURL(blob);\n      const video = document.createElement(\"video\");\n      video.crossOrigin = \"anonymous\";\n      video.muted = true;\n      video.playsInline = true;\n      video.preload = \"auto\";\n      await new Promise((resolve, reject) => {\n        video.oncanplaythrough = () => resolve();\n        video.onerror = reject;\n        video.src = blobUrl;\n        video.load();\n      });\n      video.currentTime = 0;\n      await new Promise((resolve) => {\n        video.onseeked = () => resolve();\n        setTimeout(() => resolve(), 100);\n      });\n      video.pause();\n      console.log(\"Video preloaded:\", url, \"duration:\", video.duration);\n      AssetCache.videos.set(url, {\n        element: video,\n        blobUrl,\n        duration: video.duration,\n        width: video.videoWidth,\n        height: video.videoHeight\n      });\n    } catch (e) {\n      console.warn(\"Failed to preload video:\", url, e);\n    }\n  }\n  async function preloadSVG(url) {\n    if (AssetCache.svgContents.has(url)) return;\n    try {\n      if (url.startsWith(\"<svg\") || url.startsWith(\"<?xml\")) {\n        AssetCache.svgContents.set(url, url);\n        return;\n      }\n      if (url.startsWith(\"data:image/svg\")) {\n        const base64 = url.split(\",\")[1];\n        const svgContent2 = atob(base64);\n        AssetCache.svgContents.set(url, svgContent2);\n        return;\n      }\n      const response = await fetch(url);\n      const svgContent = await response.text();\n      AssetCache.svgContents.set(url, svgContent);\n    } catch (e) {\n      console.warn(\"Failed to preload SVG:\", url, e);\n      AssetCache.svgContents.set(url, \"\");\n    }\n  }\n  async function preloadAssets(elementsConfig) {\n    const assets = extractAssetUrls(elementsConfig);\n    const total = assets.images.length + assets.videos.length + assets.svgs.length;\n    if (total === 0) return;\n    let loaded = 0;\n    if (window.parent !== window) {\n      window.parent.postMessage(\n        { type: \"PRELOAD_PROGRESS\", loaded: 0, total },\n        \"*\"\n      );\n    }\n    const preloadWithProgress = async (fn, url) => {\n      await fn(url);\n      loaded++;\n      if (window.parent !== window) {\n        window.parent.postMessage(\n          { type: \"PRELOAD_PROGRESS\", loaded, total },\n          \"*\"\n        );\n      }\n    };\n    const promises = [\n      ...assets.images.map((url) => preloadWithProgress(preloadImage, url)),\n      ...assets.videos.map((url) => preloadWithProgress(preloadVideo, url)),\n      ...assets.svgs.map((url) => preloadWithProgress(preloadSVG, url))\n    ];\n    await Promise.all(promises);\n  }\n\n  // src/createElementProps.ts\n  function createElementProps(_THREE, mesh, initialX, initialY, initialOpacity = 1, videoElement = null) {\n    const baseScaleX = mesh.scale.x;\n    const baseScaleY = mesh.scale.y;\n    const state = {\n      x: initialX,\n      y: initialY,\n      z: 0,\n      opacity: initialOpacity,\n      scale: 1,\n      scaleX: 1,\n      scaleY: 1,\n      rotation: 0,\n      rotationX: 0,\n      rotationY: 0,\n      zIndex: mesh.userData.zIndex ?? 0,\n      // Video-specific properties (only meaningful if videoElement is provided)\n      currentTime: videoElement ? videoElement.currentTime : 0,\n      playing: false,\n      startOffset: 0\n    };\n    const updateMeshPosition = () => {\n      mesh.position.x = state.x;\n      mesh.position.y = -state.y;\n      mesh.position.z = state.z;\n    };\n    const updateMeshTransform = () => {\n      mesh.scale.set(\n        baseScaleX * state.scale * state.scaleX,\n        baseScaleY * state.scale * state.scaleY,\n        1\n      );\n      mesh.rotation.set(\n        state.rotationX * Math.PI / 180,\n        state.rotationY * Math.PI / 180,\n        state.rotation * Math.PI / 180\n      );\n    };\n    const updateMeshOpacity = () => {\n      const mat = mesh.material;\n      mat.opacity = state.opacity;\n      mat.needsUpdate = true;\n    };\n    const updateVideoPlayback = () => {\n      if (!videoElement) return;\n      const vos = window.__vos__;\n      const shouldPlay = state.playing && !vos?.isPaused;\n      if (shouldPlay) {\n        if (videoElement.paused) {\n          const timeDiff = Math.abs(videoElement.currentTime - state.currentTime);\n          if (timeDiff > 0.5) {\n            videoElement.currentTime = state.currentTime;\n          }\n          videoElement.play().catch(() => {\n          });\n        }\n      } else {\n        videoElement.pause();\n        if (Math.abs(videoElement.currentTime - state.currentTime) > 0.05) {\n          videoElement.currentTime = state.currentTime;\n        }\n      }\n    };\n    if (videoElement) {\n      const vos = window.__vos__;\n      if (vos?.videoCallbacks) {\n        vos.videoCallbacks.add(updateVideoPlayback);\n      }\n    }\n    const updateVideoCurrentTime = () => {\n      if (!videoElement) return;\n      const vos = window.__vos__;\n      if (!state.playing || vos?.isPaused) {\n        videoElement.currentTime = state.currentTime;\n      }\n    };\n    return new Proxy(state, {\n      set(target, prop, value) {\n        target[prop] = value;\n        switch (prop) {\n          case \"x\":\n          case \"y\":\n          case \"z\":\n            updateMeshPosition();\n            break;\n          case \"scale\":\n          case \"scaleX\":\n          case \"scaleY\":\n          case \"rotation\":\n          case \"rotationX\":\n          case \"rotationY\":\n            updateMeshTransform();\n            break;\n          case \"opacity\":\n            updateMeshOpacity();\n            break;\n          case \"zIndex\":\n            mesh.renderOrder = value;\n            mesh.userData.zIndex = value;\n            break;\n          case \"currentTime\":\n            updateVideoCurrentTime();\n            break;\n          case \"playing\":\n          case \"startOffset\":\n            updateVideoPlayback();\n            break;\n        }\n        return true;\n      },\n      get(target, prop) {\n        if (prop === \"duration\" && videoElement) {\n          return videoElement.duration;\n        }\n        return target[prop];\n      }\n    });\n  }\n\n  // src/renderers/image.ts\n  async function renderImageElement(element, _resolution, THREE) {\n    const { src, size = {} } = element;\n    let img;\n    const cached = AssetCache.getImage(src);\n    if (cached) {\n      img = cached.element;\n    } else {\n      img = new Image();\n      img.crossOrigin = \"anonymous\";\n      await new Promise((resolve, reject) => {\n        img.onload = () => resolve();\n        img.onerror = reject;\n        img.src = src;\n      });\n    }\n    let width = size.width ?? img.naturalWidth;\n    let height = size.height ?? img.naturalHeight;\n    if (size.width === \"auto\" && size.height !== \"auto\" && size.height) {\n      const targetHeight = typeof size.height === \"number\" ? size.height : img.naturalHeight;\n      width = img.naturalWidth / img.naturalHeight * targetHeight;\n      height = targetHeight;\n    } else if (size.height === \"auto\" && size.width !== \"auto\" && size.width) {\n      const targetWidth = typeof size.width === \"number\" ? size.width : img.naturalWidth;\n      height = img.naturalHeight / img.naturalWidth * targetWidth;\n      width = targetWidth;\n    }\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = width;\n    canvas.height = height;\n    const ctx = canvas.getContext(\"2d\");\n    const fit = size.fit ?? \"fill\";\n    if (fit === \"contain\" || fit === \"cover\") {\n      const scale = fit === \"contain\" ? Math.min(width / img.naturalWidth, height / img.naturalHeight) : Math.max(width / img.naturalWidth, height / img.naturalHeight);\n      const drawWidth = img.naturalWidth * scale;\n      const drawHeight = img.naturalHeight * scale;\n      const offsetX = (width - drawWidth) / 2;\n      const offsetY = (height - drawHeight) / 2;\n      ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);\n    } else {\n      ctx.drawImage(img, 0, 0, width, height);\n    }\n    const texture = new THREE.CanvasTexture(canvas);\n    texture.minFilter = THREE.LinearFilter;\n    texture.magFilter = THREE.LinearFilter;\n    texture.needsUpdate = true;\n    const material = new THREE.MeshBasicMaterial({\n      map: texture,\n      transparent: true,\n      depthWrite: false\n    });\n    const geometry = new THREE.PlaneGeometry(width, height);\n    const mesh = new THREE.Mesh(geometry, material);\n    return { mesh, width, height };\n  }\n\n  // src/renderers/svg.ts\n  async function renderSVGElement(element, _resolution, THREE) {\n    const { src, size = {}, colors = {} } = element;\n    let svgContent = AssetCache.getSVG(src);\n    if (!svgContent) {\n      if (src.startsWith(\"http\") || src.startsWith(\"/\")) {\n        const response = await fetch(src);\n        svgContent = await response.text();\n      } else {\n        svgContent = src;\n      }\n    }\n    Object.entries(colors).forEach(([selector, color]) => {\n      const regex = new RegExp(`(${selector}[^>]*)(fill|stroke)=\"[^\"]*\"`, \"g\");\n      svgContent = svgContent.replace(regex, `$1$2=\"${color}\"`);\n    });\n    const parser = new DOMParser();\n    const svgDoc = parser.parseFromString(svgContent, \"image/svg+xml\");\n    const svgElement = svgDoc.documentElement;\n    const viewBox = svgElement.getAttribute(\"viewBox\");\n    let svgWidth = parseFloat(svgElement.getAttribute(\"width\") || \"\") || 100;\n    let svgHeight = parseFloat(svgElement.getAttribute(\"height\") || \"\") || 100;\n    if (viewBox) {\n      const [, , vbW, vbH] = viewBox.split(\" \").map(Number);\n      svgWidth = vbW || svgWidth;\n      svgHeight = vbH || svgHeight;\n    }\n    let width = size.width ?? svgWidth;\n    let height = size.height ?? svgHeight;\n    if (size.width === \"auto\" && size.height !== \"auto\" && size.height) {\n      width = svgWidth / svgHeight * size.height;\n    } else if (size.height === \"auto\" && size.width !== \"auto\" && size.width) {\n      height = svgHeight / svgWidth * size.width;\n    }\n    svgElement.setAttribute(\"width\", String(width));\n    svgElement.setAttribute(\"height\", String(height));\n    const updatedSvg = new XMLSerializer().serializeToString(svgElement);\n    const blob = new Blob([updatedSvg], { type: \"image/svg+xml\" });\n    const url = URL.createObjectURL(blob);\n    const img = new Image();\n    await new Promise((resolve, reject) => {\n      img.onload = () => resolve();\n      img.onerror = reject;\n      img.src = url;\n    });\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = width;\n    canvas.height = height;\n    const ctx = canvas.getContext(\"2d\");\n    ctx.drawImage(img, 0, 0, width, height);\n    URL.revokeObjectURL(url);\n    const texture = new THREE.CanvasTexture(canvas);\n    texture.minFilter = THREE.LinearFilter;\n    texture.magFilter = THREE.LinearFilter;\n    texture.needsUpdate = true;\n    const material = new THREE.MeshBasicMaterial({\n      map: texture,\n      transparent: true,\n      depthWrite: false\n    });\n    const geometry = new THREE.PlaneGeometry(width, height);\n    const mesh = new THREE.Mesh(geometry, material);\n    return { mesh, width, height };\n  }\n\n  // src/renderers/text.ts\n  function renderTextElement(element, _resolution, THREE) {\n    const { content, font = {} } = element;\n    const fontSize = font.size ?? 24;\n    const fontFamily = font.family ?? \"Inter, system-ui, sans-serif\";\n    const fontWeight = font.weight ?? \"normal\";\n    const fontStyle = font.style ?? \"normal\";\n    const color = font.color ?? \"#ffffff\";\n    const align = font.align ?? \"left\";\n    const letterSpacing = font.letterSpacing ?? 0;\n    const lineHeight = font.lineHeight ?? 1.2;\n    const canvas = document.createElement(\"canvas\");\n    const ctx = canvas.getContext(\"2d\");\n    const fontString = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;\n    ctx.font = fontString;\n    const lines = content.split(\"\\n\");\n    let maxWidth = 0;\n    lines.forEach((line) => {\n      let w = 0;\n      for (let i = 0; i < line.length; i++) {\n        w += ctx.measureText(line[i]).width;\n        if (i < line.length - 1) w += letterSpacing;\n      }\n      if (w > maxWidth) maxWidth = w;\n    });\n    const totalHeight = lines.length * fontSize * lineHeight;\n    const padding = Math.max(element.stroke?.width ?? 0, element.shadow?.blur ?? 0) * 2 + 10;\n    const canvasWidth = Math.ceil(maxWidth + padding * 2);\n    const canvasHeight = Math.ceil(totalHeight + padding * 2);\n    canvas.width = canvasWidth;\n    canvas.height = canvasHeight;\n    ctx.font = fontString;\n    ctx.textBaseline = \"top\";\n    ctx.textAlign = align;\n    ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n    if (element.shadow) {\n      ctx.shadowColor = element.shadow.color;\n      ctx.shadowBlur = element.shadow.blur;\n      ctx.shadowOffsetX = element.shadow.offsetX ?? 0;\n      ctx.shadowOffsetY = element.shadow.offsetY ?? 0;\n    }\n    let textX = padding;\n    if (align === \"center\") textX = canvasWidth / 2;\n    else if (align === \"right\") textX = canvasWidth - padding;\n    lines.forEach((line, i) => {\n      const y = padding + i * fontSize * lineHeight;\n      if (element.stroke) {\n        ctx.strokeStyle = element.stroke.color;\n        ctx.lineWidth = element.stroke.width;\n        ctx.lineJoin = \"round\";\n        ctx.strokeText(line, textX, y);\n      }\n      ctx.fillStyle = color;\n      ctx.fillText(line, textX, y);\n    });\n    const texture = new THREE.CanvasTexture(canvas);\n    texture.minFilter = THREE.LinearFilter;\n    texture.magFilter = THREE.LinearFilter;\n    texture.needsUpdate = true;\n    const material = new THREE.MeshBasicMaterial({\n      map: texture,\n      transparent: true,\n      depthWrite: false\n    });\n    const geometry = new THREE.PlaneGeometry(canvasWidth, canvasHeight);\n    const mesh = new THREE.Mesh(geometry, material);\n    return { mesh, canvas, width: canvasWidth, height: canvasHeight };\n  }\n  function renderTextSegment(text, font, element, THREE) {\n    const fontSize = font.size ?? 24;\n    const fontFamily = font.family ?? \"Inter, system-ui, sans-serif\";\n    const fontWeight = font.weight ?? \"normal\";\n    const fontStyle = font.style ?? \"normal\";\n    const color = font.color ?? \"#ffffff\";\n    const canvas = document.createElement(\"canvas\");\n    const ctx = canvas.getContext(\"2d\");\n    const fontString = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;\n    ctx.font = fontString;\n    const metrics = ctx.measureText(text);\n    const padding = Math.max(element.stroke?.width ?? 0, element.shadow?.blur ?? 0) * 2 + 4;\n    const canvasWidth = Math.ceil(metrics.width + padding * 2);\n    const canvasHeight = Math.ceil(fontSize * 1.4 + padding * 2);\n    canvas.width = canvasWidth;\n    canvas.height = canvasHeight;\n    ctx.font = fontString;\n    ctx.textBaseline = \"top\";\n    ctx.textAlign = \"left\";\n    if (element.shadow) {\n      ctx.shadowColor = element.shadow.color;\n      ctx.shadowBlur = element.shadow.blur;\n      ctx.shadowOffsetX = element.shadow.offsetX ?? 0;\n      ctx.shadowOffsetY = element.shadow.offsetY ?? 0;\n    }\n    if (element.stroke) {\n      ctx.strokeStyle = element.stroke.color;\n      ctx.lineWidth = element.stroke.width;\n      ctx.lineJoin = \"round\";\n      ctx.strokeText(text, padding, padding);\n    }\n    ctx.fillStyle = color;\n    ctx.fillText(text, padding, padding);\n    const texture = new THREE.CanvasTexture(canvas);\n    texture.minFilter = THREE.LinearFilter;\n    texture.magFilter = THREE.LinearFilter;\n    texture.needsUpdate = true;\n    const material = new THREE.MeshBasicMaterial({\n      map: texture,\n      transparent: true,\n      depthWrite: false\n    });\n    const geometry = new THREE.PlaneGeometry(canvasWidth, canvasHeight);\n    const mesh = new THREE.Mesh(geometry, material);\n    return {\n      mesh,\n      width: canvasWidth,\n      height: canvasHeight,\n      textWidth: metrics.width\n    };\n  }\n  function renderSplitTextElement(element, _resolution, THREE) {\n    const { content, font = {}, split } = element;\n    const splitType = split?.type ?? \"chars\";\n    const letterSpacing = font.letterSpacing ?? 0;\n    let segments;\n    if (splitType === \"chars\") {\n      segments = content.split(\"\");\n    } else if (splitType === \"words\") {\n      segments = content.split(/\\s+/);\n    } else {\n      segments = content.split(\"\\n\");\n    }\n    const meshes = [];\n    let totalWidth = 0;\n    segments.forEach((text, i) => {\n      if (text.length === 0) return;\n      const result = renderTextSegment(text, font, element, THREE);\n      meshes.push({\n        mesh: result.mesh,\n        width: result.width,\n        height: result.height,\n        textWidth: result.textWidth,\n        text\n      });\n      totalWidth += result.textWidth;\n      if (i < segments.length - 1) {\n        totalWidth += splitType === \"words\" ? (font.size ?? 24) * 0.4 : letterSpacing;\n      }\n    });\n    const totalHeight = meshes[0]?.height ?? 0;\n    let currentX = -totalWidth / 2;\n    meshes.forEach((item, i) => {\n      item.offsetX = currentX + item.textWidth / 2;\n      item.offsetY = 0;\n      currentX += item.textWidth;\n      if (i < meshes.length - 1) {\n        currentX += splitType === \"words\" ? (font.size ?? 24) * 0.4 : letterSpacing;\n      }\n    });\n    return { meshes, totalWidth, totalHeight };\n  }\n\n  // src/renderers/video.ts\n  async function renderVideoElement(element, _resolution, THREE) {\n    const {\n      src,\n      size = {},\n      loop = true,\n      muted = true,\n      playbackRate = 1,\n      startTime = 0\n    } = element;\n    let video;\n    const cached = AssetCache.getVideo(src);\n    if (cached) {\n      video = cached.element;\n      video.loop = loop;\n      video.muted = muted;\n      video.playbackRate = playbackRate;\n    } else {\n      video = document.createElement(\"video\");\n      video.crossOrigin = \"anonymous\";\n      video.src = src;\n      video.loop = loop;\n      video.muted = muted;\n      video.playbackRate = playbackRate;\n      video.playsInline = true;\n      video.preload = \"auto\";\n      await new Promise((resolve, reject) => {\n        video.oncanplaythrough = () => resolve();\n        video.onerror = reject;\n        video.load();\n      });\n    }\n    video.currentTime = startTime;\n    video.pause();\n    let width = size.width ?? video.videoWidth;\n    let height = size.height ?? video.videoHeight;\n    if (size.width === \"auto\" && size.height !== \"auto\" && size.height) {\n      const targetHeight = typeof size.height === \"number\" ? size.height : video.videoHeight;\n      width = video.videoWidth / video.videoHeight * targetHeight;\n      height = targetHeight;\n    } else if (size.height === \"auto\" && size.width !== \"auto\" && size.width) {\n      const targetWidth = typeof size.width === \"number\" ? size.width : video.videoWidth;\n      height = video.videoHeight / video.videoWidth * targetWidth;\n      width = targetWidth;\n    }\n    const texture = new THREE.VideoTexture(video);\n    texture.minFilter = THREE.LinearFilter;\n    texture.magFilter = THREE.LinearFilter;\n    texture.format = THREE.RGBAFormat;\n    texture.generateMipmaps = false;\n    texture.colorSpace = THREE.SRGBColorSpace;\n    const material = new THREE.MeshBasicMaterial({\n      map: texture,\n      transparent: true,\n      depthWrite: false\n    });\n    const geometry = new THREE.PlaneGeometry(width, height);\n    const mesh = new THREE.Mesh(geometry, material);\n    mesh.userData.video = video;\n    mesh.userData.texture = texture;\n    return { mesh, width, height, video };\n  }\n\n  // src/renderElements.ts\n  function calculatePosition(position, resolution, elementWidth, elementHeight) {\n    const { width, height } = resolution;\n    const halfW = elementWidth / 2;\n    const halfH = elementHeight / 2;\n    if (typeof position === \"string\") {\n      switch (position) {\n        case \"center\":\n          return { x: width / 2 - halfW, y: height / 2 - halfH };\n        case \"top-left\":\n          return { x: 0, y: 0 };\n        case \"top-center\":\n          return { x: width / 2 - halfW, y: 0 };\n        case \"top-right\":\n          return { x: width - elementWidth, y: 0 };\n        case \"center-left\":\n          return { x: 0, y: height / 2 - halfH };\n        case \"center-right\":\n          return { x: width - elementWidth, y: height / 2 - halfH };\n        case \"bottom-left\":\n          return { x: 0, y: height - elementHeight };\n        case \"bottom-center\":\n          return { x: width / 2 - halfW, y: height - elementHeight };\n        case \"bottom-right\":\n          return { x: width - elementWidth, y: height - elementHeight };\n        default:\n          return { x: 0, y: 0 };\n      }\n    }\n    const x = typeof position.x === \"string\" ? parseFloat(position.x) / 100 * width : position.x;\n    const y = typeof position.y === \"string\" ? parseFloat(position.y) / 100 * height : position.y;\n    return { x, y };\n  }\n  var DESIGN_HEIGHT = 1080;\n  async function renderElements(elementsConfig, overlayScenes, resolution, THREE) {\n    const getScene = (config) => overlayScenes[config.zIndex ?? 100];\n    await preloadAssets(elementsConfig);\n    const elementMap = /* @__PURE__ */ new Map();\n    const resolutionScale = resolution.height / DESIGN_HEIGHT;\n    for (let i = 0; i < elementsConfig.length; i++) {\n      const config = elementsConfig[i];\n      const id = config.id ?? `element_${i}`;\n      try {\n        let mesh;\n        let canvas = null;\n        let elementWidth = 0;\n        let elementHeight = 0;\n        let segments = null;\n        const segmentMeshes = [];\n        let videoElement = null;\n        if (config.type === \"text\" && config.split) {\n          const splitResult = renderSplitTextElement(config, resolution, THREE);\n          elementWidth = splitResult.totalWidth;\n          elementHeight = splitResult.totalHeight;\n          const scaledWidth = elementWidth * resolutionScale;\n          const scaledHeight = elementHeight * resolutionScale;\n          const { x, y } = calculatePosition(\n            config.position,\n            resolution,\n            scaledWidth,\n            scaledHeight\n          );\n          const basePosX = x - resolution.width / 2 + scaledWidth / 2;\n          const basePosY = -(y - resolution.height / 2 + scaledHeight / 2);\n          let transformX = 0;\n          let transformY = 0;\n          if (config.transform) {\n            transformX = (config.transform.translateX ?? 0) * resolutionScale;\n            transformY = -((config.transform.translateY ?? 0) * resolutionScale);\n          }\n          const zIndex = config.zIndex ?? 100;\n          segments = splitResult.meshes.map((item, si) => {\n            const segMesh = item.mesh;\n            segMesh.scale.set(resolutionScale, resolutionScale, 1);\n            segMesh.position.x = basePosX + item.offsetX * resolutionScale + transformX;\n            segMesh.position.y = basePosY + item.offsetY * resolutionScale + transformY;\n            segMesh.position.z = 0;\n            segMesh.renderOrder = zIndex + i * 0.01 + si * 1e-3;\n            if (config.opacity !== void 0) {\n              segMesh.material.opacity = config.opacity;\n            }\n            getScene(config).add(segMesh);\n            segmentMeshes.push(segMesh);\n            return createElementProps(\n              THREE,\n              segMesh,\n              segMesh.position.x,\n              -segMesh.position.y,\n              config.opacity ?? 1\n            );\n          });\n          mesh = splitResult.meshes[0]?.mesh ?? new THREE.Mesh();\n        } else if (config.type === \"text\") {\n          const result = renderTextElement(config, resolution, THREE);\n          mesh = result.mesh;\n          canvas = result.canvas;\n          elementWidth = result.width;\n          elementHeight = result.height;\n        } else if (config.type === \"image\") {\n          const result = await renderImageElement(config, resolution, THREE);\n          mesh = result.mesh;\n          elementWidth = result.width;\n          elementHeight = result.height;\n        } else if (config.type === \"svg\") {\n          const result = await renderSVGElement(config, resolution, THREE);\n          mesh = result.mesh;\n          elementWidth = result.width;\n          elementHeight = result.height;\n        } else if (config.type === \"video\") {\n          const result = await renderVideoElement(config, resolution, THREE);\n          mesh = result.mesh;\n          elementWidth = result.width;\n          elementHeight = result.height;\n          mesh.userData.video = result.video;\n          videoElement = result.video;\n          videoElement.pause();\n        } else {\n          mesh = new THREE.Mesh(\n            new THREE.PlaneGeometry(100, 100),\n            new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 })\n          );\n          console.warn(`Element type \"${config.type}\" not implemented`);\n        }\n        if (!config.split) {\n          const scaledWidth = elementWidth * resolutionScale;\n          const scaledHeight = elementHeight * resolutionScale;\n          const { x, y } = calculatePosition(\n            config.position,\n            resolution,\n            scaledWidth,\n            scaledHeight\n          );\n          const posX = x - resolution.width / 2 + scaledWidth / 2;\n          const posY = -(y - resolution.height / 2 + scaledHeight / 2);\n          mesh.scale.set(resolutionScale, resolutionScale, 1);\n          mesh.position.x = posX;\n          mesh.position.y = posY;\n          mesh.position.z = 0;\n          const zIndex = config.zIndex ?? 100;\n          mesh.renderOrder = zIndex + i * 0.01;\n          if (config.opacity !== void 0) {\n            ;\n            mesh.material.opacity = config.opacity;\n            mesh.material.transparent = true;\n          }\n          if (config.transform) {\n            const t = config.transform;\n            if (t.translateX) mesh.position.x += t.translateX * resolutionScale;\n            if (t.translateY) mesh.position.y -= t.translateY * resolutionScale;\n            if (t.translateZ) mesh.position.z += t.translateZ;\n            if (t.scale)\n              mesh.scale.set(\n                t.scale * resolutionScale,\n                t.scale * resolutionScale,\n                1\n              );\n            if (t.rotateZ || t.rotation) {\n              mesh.rotation.z = (t.rotateZ ?? t.rotation ?? 0) * Math.PI / 180;\n            }\n          }\n          getScene(config).add(mesh);\n        }\n        const props = createElementProps(\n          THREE,\n          mesh,\n          mesh.position.x,\n          -mesh.position.y,\n          config.opacity ?? 1,\n          videoElement\n        );\n        const elementInstance = {\n          config,\n          mesh,\n          node: null,\n          props,\n          segments,\n          setContent: (_content) => {\n            if (config.type === \"text\" && canvas) {\n              console.warn(\"setContent not fully implemented in inline renderer\");\n            }\n          },\n          destroy: () => {\n            const targetScene = getScene(config);\n            if (segmentMeshes.length > 0) {\n              segmentMeshes.forEach((m) => {\n                targetScene.remove(m);\n                m.geometry.dispose();\n                const mat = m.material;\n                if (mat.map) mat.map.dispose();\n                mat.dispose();\n              });\n            } else {\n              targetScene.remove(mesh);\n              mesh.geometry.dispose();\n              const mat = mesh.material;\n              if (mat.map) mat.map.dispose();\n              mat.dispose();\n            }\n          }\n        };\n        elementMap.set(id, elementInstance);\n      } catch (error) {\n        console.warn(\n          `[vos] Failed to render element \"${id}\" (${config.type}):`,\n          error\n        );\n        const fallbackMesh = new THREE.Mesh(\n          new THREE.PlaneGeometry(100, 100),\n          new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 })\n        );\n        getScene(config).add(fallbackMesh);\n        const props = createElementProps(THREE, fallbackMesh, 0, 0, 0);\n        elementMap.set(id, {\n          config,\n          mesh: fallbackMesh,\n          node: null,\n          props,\n          segments: null,\n          setContent: () => {\n          },\n          destroy: () => {\n            getScene(config).remove(fallbackMesh);\n            fallbackMesh.geometry.dispose();\n            fallbackMesh.material.dispose();\n          }\n        });\n      }\n    }\n    return elementMap;\n  }\n\n  // src/index.ts\n  function createVosElements(THREE) {\n    return {\n      renderElements: (elementsConfig, overlayScenes, resolution) => renderElements(elementsConfig, overlayScenes, resolution, THREE),\n      disposeElements: (elementMap) => {\n        elementMap.forEach((instance) => instance.destroy?.());\n        elementMap.clear();\n      }\n    };\n  }\n  return __toCommonJS(index_exports);\n})();\n"

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import * as THREE_NS from 'three';
+
+/**
+ * Render all elements to a dedicated overlay scene with pixel-space camera.
+ */
+declare function renderElements(elementsConfig: any[], overlayScenes: Record<number, THREE_NS.Scene>, resolution: any, THREE: typeof THREE_NS): Promise<Map<any, any>>;
+
+interface VosElements {
+    renderElements: (elementsConfig: any[], overlayScenes: Record<number, THREE_NS.Scene>, resolution: any, THREE: typeof THREE_NS) => Promise<Map<string, any>>;
+    disposeElements: (elementMap: Map<string, any>) => void;
+}
+/**
+ * Factory: create the Vos element system bound to a THREE instance.
+ */
+declare function createVosElements(THREE: typeof THREE_NS): VosElements;
+
+export { type VosElements, createVosElements, renderElements };

package/dist/index.js

@@ -0,0 +1,864 @@
+// src/assetCache.ts
+var AssetCache = {
+  images: /* @__PURE__ */ new Map(),
+  videos: /* @__PURE__ */ new Map(),
+  svgContents: /* @__PURE__ */ new Map(),
+  getImage(url) {
+    return this.images.get(url) || null;
+  },
+  getVideo(url) {
+    return this.videos.get(url) || null;
+  },
+  getSVG(url) {
+    return this.svgContents.get(url) || null;
+  },
+  dispose() {
+    this.videos.forEach((cached) => {
+      cached.element.pause();
+      cached.element.src = "";
+      cached.element.load();
+      if (cached.blobUrl) {
+        URL.revokeObjectURL(cached.blobUrl);
+      }
+    });
+    this.images.clear();
+    this.videos.clear();
+    this.svgContents.clear();
+  }
+};
+function extractAssetUrls(elementsConfig) {
+  const assets = {
+    images: [],
+    videos: [],
+    svgs: []
+  };
+  for (const el of elementsConfig) {
+    if (el.type === "image" && el.src) {
+      assets.images.push(el.src);
+    } else if (el.type === "video" && el.src) {
+      assets.videos.push(el.src);
+    } else if (el.type === "svg" && el.src) {
+      assets.svgs.push(el.src);
+    }
+  }
+  assets.images = [...new Set(assets.images)];
+  assets.videos = [...new Set(assets.videos)];
+  assets.svgs = [...new Set(assets.svgs)];
+  return assets;
+}
+async function preloadImage(url) {
+  if (AssetCache.images.has(url)) return;
+  const img = new Image();
+  img.crossOrigin = "anonymous";
+  await new Promise((resolve) => {
+    img.onload = () => resolve();
+    img.onerror = () => {
+      console.warn("Failed to preload image:", url);
+      resolve();
+    };
+    img.src = url;
+  });
+  AssetCache.images.set(url, {
+    element: img,
+    width: img.naturalWidth,
+    height: img.naturalHeight
+  });
+}
+async function preloadVideo(url) {
+  if (AssetCache.videos.has(url)) return;
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error("Failed to fetch video: " + response.status);
+    }
+    const blob = await response.blob();
+    const blobUrl = URL.createObjectURL(blob);
+    const video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.muted = true;
+    video.playsInline = true;
+    video.preload = "auto";
+    await new Promise((resolve, reject) => {
+      video.oncanplaythrough = () => resolve();
+      video.onerror = reject;
+      video.src = blobUrl;
+      video.load();
+    });
+    video.currentTime = 0;
+    await new Promise((resolve) => {
+      video.onseeked = () => resolve();
+      setTimeout(() => resolve(), 100);
+    });
+    video.pause();
+    console.log("Video preloaded:", url, "duration:", video.duration);
+    AssetCache.videos.set(url, {
+      element: video,
+      blobUrl,
+      duration: video.duration,
+      width: video.videoWidth,
+      height: video.videoHeight
+    });
+  } catch (e) {
+    console.warn("Failed to preload video:", url, e);
+  }
+}
+async function preloadSVG(url) {
+  if (AssetCache.svgContents.has(url)) return;
+  try {
+    if (url.startsWith("<svg") || url.startsWith("<?xml")) {
+      AssetCache.svgContents.set(url, url);
+      return;
+    }
+    if (url.startsWith("data:image/svg")) {
+      const base64 = url.split(",")[1];
+      const svgContent2 = atob(base64);
+      AssetCache.svgContents.set(url, svgContent2);
+      return;
+    }
+    const response = await fetch(url);
+    const svgContent = await response.text();
+    AssetCache.svgContents.set(url, svgContent);
+  } catch (e) {
+    console.warn("Failed to preload SVG:", url, e);
+    AssetCache.svgContents.set(url, "");
+  }
+}
+async function preloadAssets(elementsConfig) {
+  const assets = extractAssetUrls(elementsConfig);
+  const total = assets.images.length + assets.videos.length + assets.svgs.length;
+  if (total === 0) return;
+  let loaded = 0;
+  if (window.parent !== window) {
+    window.parent.postMessage(
+      { type: "PRELOAD_PROGRESS", loaded: 0, total },
+      "*"
+    );
+  }
+  const preloadWithProgress = async (fn, url) => {
+    await fn(url);
+    loaded++;
+    if (window.parent !== window) {
+      window.parent.postMessage(
+        { type: "PRELOAD_PROGRESS", loaded, total },
+        "*"
+      );
+    }
+  };
+  const promises = [
+    ...assets.images.map((url) => preloadWithProgress(preloadImage, url)),
+    ...assets.videos.map((url) => preloadWithProgress(preloadVideo, url)),
+    ...assets.svgs.map((url) => preloadWithProgress(preloadSVG, url))
+  ];
+  await Promise.all(promises);
+}
+
+// src/createElementProps.ts
+function createElementProps(_THREE, mesh, initialX, initialY, initialOpacity = 1, videoElement = null) {
+  const baseScaleX = mesh.scale.x;
+  const baseScaleY = mesh.scale.y;
+  const state = {
+    x: initialX,
+    y: initialY,
+    z: 0,
+    opacity: initialOpacity,
+    scale: 1,
+    scaleX: 1,
+    scaleY: 1,
+    rotation: 0,
+    rotationX: 0,
+    rotationY: 0,
+    zIndex: mesh.userData.zIndex ?? 0,
+    // Video-specific properties (only meaningful if videoElement is provided)
+    currentTime: videoElement ? videoElement.currentTime : 0,
+    playing: false,
+    startOffset: 0
+  };
+  const updateMeshPosition = () => {
+    mesh.position.x = state.x;
+    mesh.position.y = -state.y;
+    mesh.position.z = state.z;
+  };
+  const updateMeshTransform = () => {
+    mesh.scale.set(
+      baseScaleX * state.scale * state.scaleX,
+      baseScaleY * state.scale * state.scaleY,
+      1
+    );
+    mesh.rotation.set(
+      state.rotationX * Math.PI / 180,
+      state.rotationY * Math.PI / 180,
+      state.rotation * Math.PI / 180
+    );
+  };
+  const updateMeshOpacity = () => {
+    const mat = mesh.material;
+    mat.opacity = state.opacity;
+    mat.needsUpdate = true;
+  };
+  const updateVideoPlayback = () => {
+    if (!videoElement) return;
+    const vos = window.__vos__;
+    const shouldPlay = state.playing && !vos?.isPaused;
+    if (shouldPlay) {
+      if (videoElement.paused) {
+        const timeDiff = Math.abs(videoElement.currentTime - state.currentTime);
+        if (timeDiff > 0.5) {
+          videoElement.currentTime = state.currentTime;
+        }
+        videoElement.play().catch(() => {
+        });
+      }
+    } else {
+      videoElement.pause();
+      if (Math.abs(videoElement.currentTime - state.currentTime) > 0.05) {
+        videoElement.currentTime = state.currentTime;
+      }
+    }
+  };
+  if (videoElement) {
+    const vos = window.__vos__;
+    if (vos?.videoCallbacks) {
+      vos.videoCallbacks.add(updateVideoPlayback);
+    }
+  }
+  const updateVideoCurrentTime = () => {
+    if (!videoElement) return;
+    const vos = window.__vos__;
+    if (!state.playing || vos?.isPaused) {
+      videoElement.currentTime = state.currentTime;
+    }
+  };
+  return new Proxy(state, {
+    set(target, prop, value) {
+      target[prop] = value;
+      switch (prop) {
+        case "x":
+        case "y":
+        case "z":
+          updateMeshPosition();
+          break;
+        case "scale":
+        case "scaleX":
+        case "scaleY":
+        case "rotation":
+        case "rotationX":
+        case "rotationY":
+          updateMeshTransform();
+          break;
+        case "opacity":
+          updateMeshOpacity();
+          break;
+        case "zIndex":
+          mesh.renderOrder = value;
+          mesh.userData.zIndex = value;
+          break;
+        case "currentTime":
+          updateVideoCurrentTime();
+          break;
+        case "playing":
+        case "startOffset":
+          updateVideoPlayback();
+          break;
+      }
+      return true;
+    },
+    get(target, prop) {
+      if (prop === "duration" && videoElement) {
+        return videoElement.duration;
+      }
+      return target[prop];
+    }
+  });
+}
+
+// src/renderers/image.ts
+async function renderImageElement(element, _resolution, THREE) {
+  const { src, size = {} } = element;
+  let img;
+  const cached = AssetCache.getImage(src);
+  if (cached) {
+    img = cached.element;
+  } else {
+    img = new Image();
+    img.crossOrigin = "anonymous";
+    await new Promise((resolve, reject) => {
+      img.onload = () => resolve();
+      img.onerror = reject;
+      img.src = src;
+    });
+  }
+  let width = size.width ?? img.naturalWidth;
+  let height = size.height ?? img.naturalHeight;
+  if (size.width === "auto" && size.height !== "auto" && size.height) {
+    const targetHeight = typeof size.height === "number" ? size.height : img.naturalHeight;
+    width = img.naturalWidth / img.naturalHeight * targetHeight;
+    height = targetHeight;
+  } else if (size.height === "auto" && size.width !== "auto" && size.width) {
+    const targetWidth = typeof size.width === "number" ? size.width : img.naturalWidth;
+    height = img.naturalHeight / img.naturalWidth * targetWidth;
+    width = targetWidth;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  const fit = size.fit ?? "fill";
+  if (fit === "contain" || fit === "cover") {
+    const scale = fit === "contain" ? Math.min(width / img.naturalWidth, height / img.naturalHeight) : Math.max(width / img.naturalWidth, height / img.naturalHeight);
+    const drawWidth = img.naturalWidth * scale;
+    const drawHeight = img.naturalHeight * scale;
+    const offsetX = (width - drawWidth) / 2;
+    const offsetY = (height - drawHeight) / 2;
+    ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+  } else {
+    ctx.drawImage(img, 0, 0, width, height);
+  }
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
+  texture.needsUpdate = true;
+  const material = new THREE.MeshBasicMaterial({
+    map: texture,
+    transparent: true,
+    depthWrite: false
+  });
+  const geometry = new THREE.PlaneGeometry(width, height);
+  const mesh = new THREE.Mesh(geometry, material);
+  return { mesh, width, height };
+}
+
+// src/renderers/svg.ts
+async function renderSVGElement(element, _resolution, THREE) {
+  const { src, size = {}, colors = {} } = element;
+  let svgContent = AssetCache.getSVG(src);
+  if (!svgContent) {
+    if (src.startsWith("http") || src.startsWith("/")) {
+      const response = await fetch(src);
+      svgContent = await response.text();
+    } else {
+      svgContent = src;
+    }
+  }
+  Object.entries(colors).forEach(([selector, color]) => {
+    const regex = new RegExp(`(${selector}[^>]*)(fill|stroke)="[^"]*"`, "g");
+    svgContent = svgContent.replace(regex, `$1$2="${color}"`);
+  });
+  const parser = new DOMParser();
+  const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
+  const svgElement = svgDoc.documentElement;
+  const viewBox = svgElement.getAttribute("viewBox");
+  let svgWidth = parseFloat(svgElement.getAttribute("width") || "") || 100;
+  let svgHeight = parseFloat(svgElement.getAttribute("height") || "") || 100;
+  if (viewBox) {
+    const [, , vbW, vbH] = viewBox.split(" ").map(Number);
+    svgWidth = vbW || svgWidth;
+    svgHeight = vbH || svgHeight;
+  }
+  let width = size.width ?? svgWidth;
+  let height = size.height ?? svgHeight;
+  if (size.width === "auto" && size.height !== "auto" && size.height) {
+    width = svgWidth / svgHeight * size.height;
+  } else if (size.height === "auto" && size.width !== "auto" && size.width) {
+    height = svgHeight / svgWidth * size.width;
+  }
+  svgElement.setAttribute("width", String(width));
+  svgElement.setAttribute("height", String(height));
+  const updatedSvg = new XMLSerializer().serializeToString(svgElement);
+  const blob = new Blob([updatedSvg], { type: "image/svg+xml" });
+  const url = URL.createObjectURL(blob);
+  const img = new Image();
+  await new Promise((resolve, reject) => {
+    img.onload = () => resolve();
+    img.onerror = reject;
+    img.src = url;
+  });
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  ctx.drawImage(img, 0, 0, width, height);
+  URL.revokeObjectURL(url);
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
+  texture.needsUpdate = true;
+  const material = new THREE.MeshBasicMaterial({
+    map: texture,
+    transparent: true,
+    depthWrite: false
+  });
+  const geometry = new THREE.PlaneGeometry(width, height);
+  const mesh = new THREE.Mesh(geometry, material);
+  return { mesh, width, height };
+}
+
+// src/renderers/text.ts
+function renderTextElement(element, _resolution, THREE) {
+  const { content, font = {} } = element;
+  const fontSize = font.size ?? 24;
+  const fontFamily = font.family ?? "Inter, system-ui, sans-serif";
+  const fontWeight = font.weight ?? "normal";
+  const fontStyle = font.style ?? "normal";
+  const color = font.color ?? "#ffffff";
+  const align = font.align ?? "left";
+  const letterSpacing = font.letterSpacing ?? 0;
+  const lineHeight = font.lineHeight ?? 1.2;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const fontString = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.font = fontString;
+  const lines = content.split("\n");
+  let maxWidth = 0;
+  lines.forEach((line) => {
+    let w = 0;
+    for (let i = 0; i < line.length; i++) {
+      w += ctx.measureText(line[i]).width;
+      if (i < line.length - 1) w += letterSpacing;
+    }
+    if (w > maxWidth) maxWidth = w;
+  });
+  const totalHeight = lines.length * fontSize * lineHeight;
+  const padding = Math.max(element.stroke?.width ?? 0, element.shadow?.blur ?? 0) * 2 + 10;
+  const canvasWidth = Math.ceil(maxWidth + padding * 2);
+  const canvasHeight = Math.ceil(totalHeight + padding * 2);
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  ctx.font = fontString;
+  ctx.textBaseline = "top";
+  ctx.textAlign = align;
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  if (element.shadow) {
+    ctx.shadowColor = element.shadow.color;
+    ctx.shadowBlur = element.shadow.blur;
+    ctx.shadowOffsetX = element.shadow.offsetX ?? 0;
+    ctx.shadowOffsetY = element.shadow.offsetY ?? 0;
+  }
+  let textX = padding;
+  if (align === "center") textX = canvasWidth / 2;
+  else if (align === "right") textX = canvasWidth - padding;
+  lines.forEach((line, i) => {
+    const y = padding + i * fontSize * lineHeight;
+    if (element.stroke) {
+      ctx.strokeStyle = element.stroke.color;
+      ctx.lineWidth = element.stroke.width;
+      ctx.lineJoin = "round";
+      ctx.strokeText(line, textX, y);
+    }
+    ctx.fillStyle = color;
+    ctx.fillText(line, textX, y);
+  });
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
+  texture.needsUpdate = true;
+  const material = new THREE.MeshBasicMaterial({
+    map: texture,
+    transparent: true,
+    depthWrite: false
+  });
+  const geometry = new THREE.PlaneGeometry(canvasWidth, canvasHeight);
+  const mesh = new THREE.Mesh(geometry, material);
+  return { mesh, canvas, width: canvasWidth, height: canvasHeight };
+}
+function renderTextSegment(text, font, element, THREE) {
+  const fontSize = font.size ?? 24;
+  const fontFamily = font.family ?? "Inter, system-ui, sans-serif";
+  const fontWeight = font.weight ?? "normal";
+  const fontStyle = font.style ?? "normal";
+  const color = font.color ?? "#ffffff";
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const fontString = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.font = fontString;
+  const metrics = ctx.measureText(text);
+  const padding = Math.max(element.stroke?.width ?? 0, element.shadow?.blur ?? 0) * 2 + 4;
+  const canvasWidth = Math.ceil(metrics.width + padding * 2);
+  const canvasHeight = Math.ceil(fontSize * 1.4 + padding * 2);
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  ctx.font = fontString;
+  ctx.textBaseline = "top";
+  ctx.textAlign = "left";
+  if (element.shadow) {
+    ctx.shadowColor = element.shadow.color;
+    ctx.shadowBlur = element.shadow.blur;
+    ctx.shadowOffsetX = element.shadow.offsetX ?? 0;
+    ctx.shadowOffsetY = element.shadow.offsetY ?? 0;
+  }
+  if (element.stroke) {
+    ctx.strokeStyle = element.stroke.color;
+    ctx.lineWidth = element.stroke.width;
+    ctx.lineJoin = "round";
+    ctx.strokeText(text, padding, padding);
+  }
+  ctx.fillStyle = color;
+  ctx.fillText(text, padding, padding);
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
+  texture.needsUpdate = true;
+  const material = new THREE.MeshBasicMaterial({
+    map: texture,
+    transparent: true,
+    depthWrite: false
+  });
+  const geometry = new THREE.PlaneGeometry(canvasWidth, canvasHeight);
+  const mesh = new THREE.Mesh(geometry, material);
+  return {
+    mesh,
+    width: canvasWidth,
+    height: canvasHeight,
+    textWidth: metrics.width
+  };
+}
+function renderSplitTextElement(element, _resolution, THREE) {
+  const { content, font = {}, split } = element;
+  const splitType = split?.type ?? "chars";
+  const letterSpacing = font.letterSpacing ?? 0;
+  let segments;
+  if (splitType === "chars") {
+    segments = content.split("");
+  } else if (splitType === "words") {
+    segments = content.split(/\s+/);
+  } else {
+    segments = content.split("\n");
+  }
+  const meshes = [];
+  let totalWidth = 0;
+  segments.forEach((text, i) => {
+    if (text.length === 0) return;
+    const result = renderTextSegment(text, font, element, THREE);
+    meshes.push({
+      mesh: result.mesh,
+      width: result.width,
+      height: result.height,
+      textWidth: result.textWidth,
+      text
+    });
+    totalWidth += result.textWidth;
+    if (i < segments.length - 1) {
+      totalWidth += splitType === "words" ? (font.size ?? 24) * 0.4 : letterSpacing;
+    }
+  });
+  const totalHeight = meshes[0]?.height ?? 0;
+  let currentX = -totalWidth / 2;
+  meshes.forEach((item, i) => {
+    item.offsetX = currentX + item.textWidth / 2;
+    item.offsetY = 0;
+    currentX += item.textWidth;
+    if (i < meshes.length - 1) {
+      currentX += splitType === "words" ? (font.size ?? 24) * 0.4 : letterSpacing;
+    }
+  });
+  return { meshes, totalWidth, totalHeight };
+}
+
+// src/renderers/video.ts
+async function renderVideoElement(element, _resolution, THREE) {
+  const {
+    src,
+    size = {},
+    loop = true,
+    muted = true,
+    playbackRate = 1,
+    startTime = 0
+  } = element;
+  let video;
+  const cached = AssetCache.getVideo(src);
+  if (cached) {
+    video = cached.element;
+    video.loop = loop;
+    video.muted = muted;
+    video.playbackRate = playbackRate;
+  } else {
+    video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.src = src;
+    video.loop = loop;
+    video.muted = muted;
+    video.playbackRate = playbackRate;
+    video.playsInline = true;
+    video.preload = "auto";
+    await new Promise((resolve, reject) => {
+      video.oncanplaythrough = () => resolve();
+      video.onerror = reject;
+      video.load();
+    });
+  }
+  video.currentTime = startTime;
+  video.pause();
+  let width = size.width ?? video.videoWidth;
+  let height = size.height ?? video.videoHeight;
+  if (size.width === "auto" && size.height !== "auto" && size.height) {
+    const targetHeight = typeof size.height === "number" ? size.height : video.videoHeight;
+    width = video.videoWidth / video.videoHeight * targetHeight;
+    height = targetHeight;
+  } else if (size.height === "auto" && size.width !== "auto" && size.width) {
+    const targetWidth = typeof size.width === "number" ? size.width : video.videoWidth;
+    height = video.videoHeight / video.videoWidth * targetWidth;
+    width = targetWidth;
+  }
+  const texture = new THREE.VideoTexture(video);
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
+  texture.format = THREE.RGBAFormat;
+  texture.generateMipmaps = false;
+  texture.colorSpace = THREE.SRGBColorSpace;
+  const material = new THREE.MeshBasicMaterial({
+    map: texture,
+    transparent: true,
+    depthWrite: false
+  });
+  const geometry = new THREE.PlaneGeometry(width, height);
+  const mesh = new THREE.Mesh(geometry, material);
+  mesh.userData.video = video;
+  mesh.userData.texture = texture;
+  return { mesh, width, height, video };
+}
+
+// src/renderElements.ts
+function calculatePosition(position, resolution, elementWidth, elementHeight) {
+  const { width, height } = resolution;
+  const halfW = elementWidth / 2;
+  const halfH = elementHeight / 2;
+  if (typeof position === "string") {
+    switch (position) {
+      case "center":
+        return { x: width / 2 - halfW, y: height / 2 - halfH };
+      case "top-left":
+        return { x: 0, y: 0 };
+      case "top-center":
+        return { x: width / 2 - halfW, y: 0 };
+      case "top-right":
+        return { x: width - elementWidth, y: 0 };
+      case "center-left":
+        return { x: 0, y: height / 2 - halfH };
+      case "center-right":
+        return { x: width - elementWidth, y: height / 2 - halfH };
+      case "bottom-left":
+        return { x: 0, y: height - elementHeight };
+      case "bottom-center":
+        return { x: width / 2 - halfW, y: height - elementHeight };
+      case "bottom-right":
+        return { x: width - elementWidth, y: height - elementHeight };
+      default:
+        return { x: 0, y: 0 };
+    }
+  }
+  const x = typeof position.x === "string" ? parseFloat(position.x) / 100 * width : position.x;
+  const y = typeof position.y === "string" ? parseFloat(position.y) / 100 * height : position.y;
+  return { x, y };
+}
+var DESIGN_HEIGHT = 1080;
+async function renderElements(elementsConfig, overlayScenes, resolution, THREE) {
+  const getScene = (config) => overlayScenes[config.zIndex ?? 100];
+  await preloadAssets(elementsConfig);
+  const elementMap = /* @__PURE__ */ new Map();
+  const resolutionScale = resolution.height / DESIGN_HEIGHT;
+  for (let i = 0; i < elementsConfig.length; i++) {
+    const config = elementsConfig[i];
+    const id = config.id ?? `element_${i}`;
+    try {
+      let mesh;
+      let canvas = null;
+      let elementWidth = 0;
+      let elementHeight = 0;
+      let segments = null;
+      const segmentMeshes = [];
+      let videoElement = null;
+      if (config.type === "text" && config.split) {
+        const splitResult = renderSplitTextElement(config, resolution, THREE);
+        elementWidth = splitResult.totalWidth;
+        elementHeight = splitResult.totalHeight;
+        const scaledWidth = elementWidth * resolutionScale;
+        const scaledHeight = elementHeight * resolutionScale;
+        const { x, y } = calculatePosition(
+          config.position,
+          resolution,
+          scaledWidth,
+          scaledHeight
+        );
+        const basePosX = x - resolution.width / 2 + scaledWidth / 2;
+        const basePosY = -(y - resolution.height / 2 + scaledHeight / 2);
+        let transformX = 0;
+        let transformY = 0;
+        if (config.transform) {
+          transformX = (config.transform.translateX ?? 0) * resolutionScale;
+          transformY = -((config.transform.translateY ?? 0) * resolutionScale);
+        }
+        const zIndex = config.zIndex ?? 100;
+        segments = splitResult.meshes.map((item, si) => {
+          const segMesh = item.mesh;
+          segMesh.scale.set(resolutionScale, resolutionScale, 1);
+          segMesh.position.x = basePosX + item.offsetX * resolutionScale + transformX;
+          segMesh.position.y = basePosY + item.offsetY * resolutionScale + transformY;
+          segMesh.position.z = 0;
+          segMesh.renderOrder = zIndex + i * 0.01 + si * 1e-3;
+          if (config.opacity !== void 0) {
+            segMesh.material.opacity = config.opacity;
+          }
+          getScene(config).add(segMesh);
+          segmentMeshes.push(segMesh);
+          return createElementProps(
+            THREE,
+            segMesh,
+            segMesh.position.x,
+            -segMesh.position.y,
+            config.opacity ?? 1
+          );
+        });
+        mesh = splitResult.meshes[0]?.mesh ?? new THREE.Mesh();
+      } else if (config.type === "text") {
+        const result = renderTextElement(config, resolution, THREE);
+        mesh = result.mesh;
+        canvas = result.canvas;
+        elementWidth = result.width;
+        elementHeight = result.height;
+      } else if (config.type === "image") {
+        const result = await renderImageElement(config, resolution, THREE);
+        mesh = result.mesh;
+        elementWidth = result.width;
+        elementHeight = result.height;
+      } else if (config.type === "svg") {
+        const result = await renderSVGElement(config, resolution, THREE);
+        mesh = result.mesh;
+        elementWidth = result.width;
+        elementHeight = result.height;
+      } else if (config.type === "video") {
+        const result = await renderVideoElement(config, resolution, THREE);
+        mesh = result.mesh;
+        elementWidth = result.width;
+        elementHeight = result.height;
+        mesh.userData.video = result.video;
+        videoElement = result.video;
+        videoElement.pause();
+      } else {
+        mesh = new THREE.Mesh(
+          new THREE.PlaneGeometry(100, 100),
+          new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 })
+        );
+        console.warn(`Element type "${config.type}" not implemented`);
+      }
+      if (!config.split) {
+        const scaledWidth = elementWidth * resolutionScale;
+        const scaledHeight = elementHeight * resolutionScale;
+        const { x, y } = calculatePosition(
+          config.position,
+          resolution,
+          scaledWidth,
+          scaledHeight
+        );
+        const posX = x - resolution.width / 2 + scaledWidth / 2;
+        const posY = -(y - resolution.height / 2 + scaledHeight / 2);
+        mesh.scale.set(resolutionScale, resolutionScale, 1);
+        mesh.position.x = posX;
+        mesh.position.y = posY;
+        mesh.position.z = 0;
+        const zIndex = config.zIndex ?? 100;
+        mesh.renderOrder = zIndex + i * 0.01;
+        if (config.opacity !== void 0) {
+          ;
+          mesh.material.opacity = config.opacity;
+          mesh.material.transparent = true;
+        }
+        if (config.transform) {
+          const t = config.transform;
+          if (t.translateX) mesh.position.x += t.translateX * resolutionScale;
+          if (t.translateY) mesh.position.y -= t.translateY * resolutionScale;
+          if (t.translateZ) mesh.position.z += t.translateZ;
+          if (t.scale)
+            mesh.scale.set(
+              t.scale * resolutionScale,
+              t.scale * resolutionScale,
+              1
+            );
+          if (t.rotateZ || t.rotation) {
+            mesh.rotation.z = (t.rotateZ ?? t.rotation ?? 0) * Math.PI / 180;
+          }
+        }
+        getScene(config).add(mesh);
+      }
+      const props = createElementProps(
+        THREE,
+        mesh,
+        mesh.position.x,
+        -mesh.position.y,
+        config.opacity ?? 1,
+        videoElement
+      );
+      const elementInstance = {
+        config,
+        mesh,
+        node: null,
+        props,
+        segments,
+        setContent: (_content) => {
+          if (config.type === "text" && canvas) {
+            console.warn("setContent not fully implemented in inline renderer");
+          }
+        },
+        destroy: () => {
+          const targetScene = getScene(config);
+          if (segmentMeshes.length > 0) {
+            segmentMeshes.forEach((m) => {
+              targetScene.remove(m);
+              m.geometry.dispose();
+              const mat = m.material;
+              if (mat.map) mat.map.dispose();
+              mat.dispose();
+            });
+          } else {
+            targetScene.remove(mesh);
+            mesh.geometry.dispose();
+            const mat = mesh.material;
+            if (mat.map) mat.map.dispose();
+            mat.dispose();
+          }
+        }
+      };
+      elementMap.set(id, elementInstance);
+    } catch (error) {
+      console.warn(
+        `[vos] Failed to render element "${id}" (${config.type}):`,
+        error
+      );
+      const fallbackMesh = new THREE.Mesh(
+        new THREE.PlaneGeometry(100, 100),
+        new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 })
+      );
+      getScene(config).add(fallbackMesh);
+      const props = createElementProps(THREE, fallbackMesh, 0, 0, 0);
+      elementMap.set(id, {
+        config,
+        mesh: fallbackMesh,
+        node: null,
+        props,
+        segments: null,
+        setContent: () => {
+        },
+        destroy: () => {
+          getScene(config).remove(fallbackMesh);
+          fallbackMesh.geometry.dispose();
+          fallbackMesh.material.dispose();
+        }
+      });
+    }
+  }
+  return elementMap;
+}
+
+// src/index.ts
+function createVosElements(THREE) {
+  return {
+    renderElements: (elementsConfig, overlayScenes, resolution) => renderElements(elementsConfig, overlayScenes, resolution, THREE),
+    disposeElements: (elementMap) => {
+      elementMap.forEach((instance) => instance.destroy?.());
+      elementMap.clear();
+    }
+  };
+}
+export {
+  createVosElements,
+  renderElements
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/assetCache.ts","../src/createElementProps.ts","../src/renderers/image.ts","../src/renderers/svg.ts","../src/renderers/text.ts","../src/renderers/video.ts","../src/renderElements.ts","../src/index.ts"],"sourcesContent":["/**\n * Global asset cache - stores preloaded assets by URL.\n * Handles images, videos, and SVGs.\n */\nexport const AssetCache = {\n  images: new Map<\n    string,\n    { element: HTMLImageElement; width: number; height: number }\n  >(),\n  videos: new Map<\n    string,\n    {\n      element: HTMLVideoElement\n      blobUrl?: string\n      duration: number\n      width: number\n      height: number\n    }\n  >(),\n  svgContents: new Map<string, string>(),\n\n  getImage(url: string) {\n    return this.images.get(url) || null\n  },\n  getVideo(url: string) {\n    return this.videos.get(url) || null\n  },\n  getSVG(url: string) {\n    return this.svgContents.get(url) || null\n  },\n\n  dispose() {\n    this.videos.forEach((cached) => {\n      cached.element.pause()\n      cached.element.src = ''\n      cached.element.load()\n      if (cached.blobUrl) {\n        URL.revokeObjectURL(cached.blobUrl)\n      }\n    })\n    this.images.clear()\n    this.videos.clear()\n    this.svgContents.clear()\n  },\n}\n\n/**\n * Extract all asset URLs from elements config\n */\nfunction extractAssetUrls(elementsConfig: any[]) {\n  const assets: {\n    images: string[]\n    videos: string[]\n    svgs: string[]\n  } = {\n    images: [],\n    videos: [],\n    svgs: [],\n  }\n\n  for (const el of elementsConfig) {\n    if (el.type === 'image' && el.src) {\n      assets.images.push(el.src)\n    } else if (el.type === 'video' && el.src) {\n      assets.videos.push(el.src)\n    } else if (el.type === 'svg' && el.src) {\n      assets.svgs.push(el.src)\n    }\n  }\n\n  assets.images = [...new Set(assets.images)]\n  assets.videos = [...new Set(assets.videos)]\n  assets.svgs = [...new Set(assets.svgs)]\n\n  return assets\n}\n\nasync function preloadImage(url: string) {\n  if (AssetCache.images.has(url)) return\n\n  const img = new Image()\n  img.crossOrigin = 'anonymous'\n\n  await new Promise<void>((resolve) => {\n    img.onload = () => resolve()\n    img.onerror = () => {\n      console.warn('Failed to preload image:', url)\n      resolve()\n    }\n    img.src = url\n  })\n\n  AssetCache.images.set(url, {\n    element: img,\n    width: img.naturalWidth,\n    height: img.naturalHeight,\n  })\n}\n\nasync function preloadVideo(url: string) {\n  if (AssetCache.videos.has(url)) return\n\n  try {\n    const response = await fetch(url)\n    if (!response.ok) {\n      throw new Error('Failed to fetch video: ' + response.status)\n    }\n    const blob = await response.blob()\n    const blobUrl = URL.createObjectURL(blob)\n\n    const video = document.createElement('video')\n    video.crossOrigin = 'anonymous'\n    video.muted = true\n    video.playsInline = true\n    video.preload = 'auto'\n\n    await new Promise<void>((resolve, reject) => {\n      video.oncanplaythrough = () => resolve()\n      video.onerror = reject\n      video.src = blobUrl\n      video.load()\n    })\n\n    video.currentTime = 0\n    await new Promise<void>((resolve) => {\n      video.onseeked = () => resolve()\n      setTimeout(() => resolve(), 100)\n    })\n\n    video.pause()\n\n    console.log('Video preloaded:', url, 'duration:', video.duration)\n\n    AssetCache.videos.set(url, {\n      element: video,\n      blobUrl,\n      duration: video.duration,\n      width: video.videoWidth,\n      height: video.videoHeight,\n    })\n  } catch (e) {\n    console.warn('Failed to preload video:', url, e)\n  }\n}\n\nasync function preloadSVG(url: string) {\n  if (AssetCache.svgContents.has(url)) return\n\n  try {\n    if (url.startsWith('<svg') || url.startsWith('<?xml')) {\n      AssetCache.svgContents.set(url, url)\n      return\n    }\n\n    if (url.startsWith('data:image/svg')) {\n      const base64 = url.split(',')[1]\n      const svgContent = atob(base64)\n      AssetCache.svgContents.set(url, svgContent)\n      return\n    }\n\n    const response = await fetch(url)\n    const svgContent = await response.text()\n    AssetCache.svgContents.set(url, svgContent)\n  } catch (e) {\n    console.warn('Failed to preload SVG:', url, e)\n    AssetCache.svgContents.set(url, '')\n  }\n}\n\n/**\n * Preload all assets from elements config.\n * Reports progress via postMessage to parent.\n */\nexport async function preloadAssets(elementsConfig: any[]) {\n  const assets = extractAssetUrls(elementsConfig)\n  const total = assets.images.length + assets.videos.length + assets.svgs.length\n\n  if (total === 0) return\n\n  let loaded = 0\n\n  if (window.parent !== window) {\n    window.parent.postMessage(\n      { type: 'PRELOAD_PROGRESS', loaded: 0, total },\n      '*',\n    )\n  }\n\n  const preloadWithProgress = async (\n    fn: (url: string) => Promise<void>,\n    url: string,\n  ) => {\n    await fn(url)\n    loaded++\n    if (window.parent !== window) {\n      window.parent.postMessage(\n        { type: 'PRELOAD_PROGRESS', loaded, total },\n        '*',\n      )\n    }\n  }\n\n  const promises = [\n    ...assets.images.map((url) => preloadWithProgress(preloadImage, url)),\n    ...assets.videos.map((url) => preloadWithProgress(preloadVideo, url)),\n    ...assets.svgs.map((url) => preloadWithProgress(preloadSVG, url)),\n  ]\n\n  await Promise.all(promises)\n}\n","import type * as THREE_NS from 'three'\n\n/**\n * Create GSAP-animatable props proxy for an element.\n * For video elements, pass the videoElement to enable currentTime animation.\n */\nexport function createElementProps(\n  _THREE: typeof THREE_NS,\n  mesh: THREE_NS.Mesh,\n  initialX: number,\n  initialY: number,\n  initialOpacity = 1,\n  videoElement: HTMLVideoElement | null = null,\n) {\n  // Capture base scale (set by renderer for resolution scaling)\n  const baseScaleX = mesh.scale.x\n  const baseScaleY = mesh.scale.y\n\n  const state: Record<string, any> = {\n    x: initialX,\n    y: initialY,\n    z: 0,\n    opacity: initialOpacity,\n    scale: 1,\n    scaleX: 1,\n    scaleY: 1,\n    rotation: 0,\n    rotationX: 0,\n    rotationY: 0,\n    zIndex: mesh.userData.zIndex ?? 0,\n    // Video-specific properties (only meaningful if videoElement is provided)\n    currentTime: videoElement ? videoElement.currentTime : 0,\n    playing: false,\n    startOffset: 0,\n  }\n\n  const updateMeshPosition = () => {\n    mesh.position.x = state.x\n    mesh.position.y = -state.y\n    mesh.position.z = state.z\n  }\n\n  const updateMeshTransform = () => {\n    mesh.scale.set(\n      baseScaleX * state.scale * state.scaleX,\n      baseScaleY * state.scale * state.scaleY,\n      1,\n    )\n    mesh.rotation.set(\n      (state.rotationX * Math.PI) / 180,\n      (state.rotationY * Math.PI) / 180,\n      (state.rotation * Math.PI) / 180,\n    )\n  }\n\n  const updateMeshOpacity = () => {\n    const mat = mesh.material as THREE_NS.MeshBasicMaterial\n    mat.opacity = state.opacity\n    mat.needsUpdate = true\n  }\n\n  const updateVideoPlayback = () => {\n    if (!videoElement) return\n\n    // Video plays only if:\n    // 1. It is marked as 'playing' (active in timeline)\n    // 2. The global timeline is NOT paused\n    const vos = (window as any).__vos__\n    const shouldPlay = state.playing && !vos?.isPaused\n\n    if (shouldPlay) {\n      if (videoElement.paused) {\n        const timeDiff = Math.abs(videoElement.currentTime - state.currentTime)\n        if (timeDiff > 0.5) {\n          videoElement.currentTime = state.currentTime\n        }\n        videoElement.play().catch(() => {})\n      }\n    } else {\n      videoElement.pause()\n      if (Math.abs(videoElement.currentTime - state.currentTime) > 0.05) {\n        videoElement.currentTime = state.currentTime\n      }\n    }\n  }\n\n  // Register callback for global pause/resume\n  if (videoElement) {\n    const vos = (window as any).__vos__\n    if (vos?.videoCallbacks) {\n      vos.videoCallbacks.add(updateVideoPlayback)\n    }\n  }\n\n  const updateVideoCurrentTime = () => {\n    if (!videoElement) return\n    const vos = (window as any).__vos__\n    if (!state.playing || vos?.isPaused) {\n      videoElement.currentTime = state.currentTime\n    }\n  }\n\n  return new Proxy(state, {\n    set(target, prop, value) {\n      target[prop as string] = value\n      switch (prop) {\n        case 'x':\n        case 'y':\n        case 'z':\n          updateMeshPosition()\n          break\n        case 'scale':\n        case 'scaleX':\n        case 'scaleY':\n        case 'rotation':\n        case 'rotationX':\n        case 'rotationY':\n          updateMeshTransform()\n          break\n        case 'opacity':\n          updateMeshOpacity()\n          break\n        case 'zIndex':\n          mesh.renderOrder = value\n          mesh.userData.zIndex = value\n          break\n        case 'currentTime':\n          updateVideoCurrentTime()\n          break\n        case 'playing':\n        case 'startOffset':\n          updateVideoPlayback()\n          break\n      }\n      return true\n    },\n    get(target, prop) {\n      if (prop === 'duration' && videoElement) {\n        return videoElement.duration\n      }\n      return target[prop as string]\n    },\n  })\n}\n","import { AssetCache } from '../assetCache'\nimport type * as THREE_NS from 'three'\n\n/**\n * Load and render an image element\n */\nexport async function renderImageElement(\n  element: any,\n  _resolution: any,\n  THREE: typeof THREE_NS,\n) {\n  const { src, size = {} } = element\n\n  let img: HTMLImageElement\n  const cached = AssetCache.getImage(src)\n  if (cached) {\n    img = cached.element\n  } else {\n    img = new Image()\n    img.crossOrigin = 'anonymous'\n    await new Promise<void>((resolve, reject) => {\n      img.onload = () => resolve()\n      img.onerror = reject\n      img.src = src\n    })\n  }\n\n  let width = size.width ?? img.naturalWidth\n  let height = size.height ?? img.naturalHeight\n\n  if (size.width === 'auto' && size.height !== 'auto' && size.height) {\n    const targetHeight =\n      typeof size.height === 'number' ? size.height : img.naturalHeight\n    width = (img.naturalWidth / img.naturalHeight) * targetHeight\n    height = targetHeight\n  } else if (size.height === 'auto' && size.width !== 'auto' && size.width) {\n    const targetWidth =\n      typeof size.width === 'number' ? size.width : img.naturalWidth\n    height = (img.naturalHeight / img.naturalWidth) * targetWidth\n    width = targetWidth\n  }\n\n  const canvas = document.createElement('canvas')\n  canvas.width = width\n  canvas.height = height\n  const ctx = canvas.getContext('2d')!\n\n  const fit = size.fit ?? 'fill'\n  if (fit === 'contain' || fit === 'cover') {\n    const scale =\n      fit === 'contain'\n        ? Math.min(width / img.naturalWidth, height / img.naturalHeight)\n        : Math.max(width / img.naturalWidth, height / img.naturalHeight)\n    const drawWidth = img.naturalWidth * scale\n    const drawHeight = img.naturalHeight * scale\n    const offsetX = (width - drawWidth) / 2\n    const offsetY = (height - drawHeight) / 2\n    ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight)\n  } else {\n    ctx.drawImage(img, 0, 0, width, height)\n  }\n\n  const texture = new THREE.CanvasTexture(canvas)\n  texture.minFilter = THREE.LinearFilter\n  texture.magFilter = THREE.LinearFilter\n  texture.needsUpdate = true\n\n  const material = new THREE.MeshBasicMaterial({\n    map: texture,\n    transparent: true,\n    depthWrite: false,\n  })\n\n  const geometry = new THREE.PlaneGeometry(width, height)\n  const mesh = new THREE.Mesh(geometry, material)\n\n  return { mesh, width, height }\n}\n","import { AssetCache } from '../assetCache'\nimport type * as THREE_NS from 'three'\n\n/**\n * Load and render an SVG element\n */\nexport async function renderSVGElement(\n  element: any,\n  _resolution: any,\n  THREE: typeof THREE_NS,\n) {\n  const { src, size = {}, colors = {} } = element\n\n  let svgContent = AssetCache.getSVG(src)\n  if (!svgContent) {\n    if (src.startsWith('http') || src.startsWith('/')) {\n      const response = await fetch(src)\n      svgContent = await response.text()\n    } else {\n      svgContent = src\n    }\n  }\n\n  Object.entries(colors).forEach(([selector, color]) => {\n    const regex = new RegExp(`(${selector}[^>]*)(fill|stroke)=\"[^\"]*\"`, 'g')\n    svgContent = svgContent!.replace(regex, `$1$2=\"${color}\"`)\n  })\n\n  const parser = new DOMParser()\n  const svgDoc = parser.parseFromString(svgContent!, 'image/svg+xml')\n  const svgElement = svgDoc.documentElement\n\n  const viewBox = svgElement.getAttribute('viewBox')\n  let svgWidth = parseFloat(svgElement.getAttribute('width') || '') || 100\n  let svgHeight = parseFloat(svgElement.getAttribute('height') || '') || 100\n\n  if (viewBox) {\n    const [, , vbW, vbH] = viewBox.split(' ').map(Number)\n    svgWidth = vbW || svgWidth\n    svgHeight = vbH || svgHeight\n  }\n\n  let width = size.width ?? svgWidth\n  let height = size.height ?? svgHeight\n\n  if (size.width === 'auto' && size.height !== 'auto' && size.height) {\n    width = (svgWidth / svgHeight) * size.height\n  } else if (size.height === 'auto' && size.width !== 'auto' && size.width) {\n    height = (svgHeight / svgWidth) * size.width\n  }\n\n  svgElement.setAttribute('width', String(width))\n  svgElement.setAttribute('height', String(height))\n  const updatedSvg = new XMLSerializer().serializeToString(svgElement)\n\n  const blob = new Blob([updatedSvg], { type: 'image/svg+xml' })\n  const url = URL.createObjectURL(blob)\n\n  const img = new Image()\n  await new Promise<void>((resolve, reject) => {\n    img.onload = () => resolve()\n    img.onerror = reject\n    img.src = url\n  })\n\n  const canvas = document.createElement('canvas')\n  canvas.width = width\n  canvas.height = height\n  const ctx = canvas.getContext('2d')!\n  ctx.drawImage(img, 0, 0, width, height)\n\n  URL.revokeObjectURL(url)\n\n  const texture = new THREE.CanvasTexture(canvas)\n  texture.minFilter = THREE.LinearFilter\n  texture.magFilter = THREE.LinearFilter\n  texture.needsUpdate = true\n\n  const material = new THREE.MeshBasicMaterial({\n    map: texture,\n    transparent: true,\n    depthWrite: false,\n  })\n\n  const geometry = new THREE.PlaneGeometry(width, height)\n  const mesh = new THREE.Mesh(geometry, material)\n\n  return { mesh, width, height }\n}\n","import type * as THREE_NS from 'three'\n\n/**\n * Render text to canvas and create textured plane\n */\nexport function renderTextElement(\n  element: any,\n  _resolution: any,\n  THREE: typeof THREE_NS,\n) {\n  const { content, font = {} } = element\n  const fontSize = font.size ?? 24\n  const fontFamily = font.family ?? 'Inter, system-ui, sans-serif'\n  const fontWeight = font.weight ?? 'normal'\n  const fontStyle = font.style ?? 'normal'\n  const color = font.color ?? '#ffffff'\n  const align = font.align ?? 'left'\n  const letterSpacing = font.letterSpacing ?? 0\n  const lineHeight = font.lineHeight ?? 1.2\n\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')!\n  const fontString = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`\n  ctx.font = fontString\n\n  const lines = content.split('\\n')\n  let maxWidth = 0\n  lines.forEach((line: string) => {\n    let w = 0\n    for (let i = 0; i < line.length; i++) {\n      w += ctx.measureText(line[i]).width\n      if (i < line.length - 1) w += letterSpacing\n    }\n    if (w > maxWidth) maxWidth = w\n  })\n\n  const totalHeight = lines.length * fontSize * lineHeight\n  const padding =\n    Math.max(element.stroke?.width ?? 0, element.shadow?.blur ?? 0) * 2 + 10\n  const canvasWidth = Math.ceil(maxWidth + padding * 2)\n  const canvasHeight = Math.ceil(totalHeight + padding * 2)\n\n  canvas.width = canvasWidth\n  canvas.height = canvasHeight\n  ctx.font = fontString\n  ctx.textBaseline = 'top'\n  ctx.textAlign = align as CanvasTextAlign\n  ctx.clearRect(0, 0, canvasWidth, canvasHeight)\n\n  if (element.shadow) {\n    ctx.shadowColor = element.shadow.color\n    ctx.shadowBlur = element.shadow.blur\n    ctx.shadowOffsetX = element.shadow.offsetX ?? 0\n    ctx.shadowOffsetY = element.shadow.offsetY ?? 0\n  }\n\n  let textX = padding\n  if (align === 'center') textX = canvasWidth / 2\n  else if (align === 'right') textX = canvasWidth - padding\n\n  lines.forEach((line: string, i: number) => {\n    const y = padding + i * fontSize * lineHeight\n    if (element.stroke) {\n      ctx.strokeStyle = element.stroke.color\n      ctx.lineWidth = element.stroke.width\n      ctx.lineJoin = 'round'\n      ctx.strokeText(line, textX, y)\n    }\n    ctx.fillStyle = color\n    ctx.fillText(line, textX, y)\n  })\n\n  const texture = new THREE.CanvasTexture(canvas)\n  texture.minFilter = THREE.LinearFilter\n  texture.magFilter = THREE.LinearFilter\n  texture.needsUpdate = true\n\n  const material = new THREE.MeshBasicMaterial({\n    map: texture,\n    transparent: true,\n    depthWrite: false,\n  })\n\n  const geometry = new THREE.PlaneGeometry(canvasWidth, canvasHeight)\n  const mesh = new THREE.Mesh(geometry, material)\n\n  return { mesh, canvas, width: canvasWidth, height: canvasHeight }\n}\n\n/**\n * Render a single text segment (char/word) to canvas and create mesh\n */\nexport function renderTextSegment(\n  text: string,\n  font: any,\n  element: any,\n  THREE: typeof THREE_NS,\n) {\n  const fontSize = font.size ?? 24\n  const fontFamily = font.family ?? 'Inter, system-ui, sans-serif'\n  const fontWeight = font.weight ?? 'normal'\n  const fontStyle = font.style ?? 'normal'\n  const color = font.color ?? '#ffffff'\n\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')!\n  const fontString = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`\n  ctx.font = fontString\n\n  const metrics = ctx.measureText(text)\n  const padding =\n    Math.max(element.stroke?.width ?? 0, element.shadow?.blur ?? 0) * 2 + 4\n  const canvasWidth = Math.ceil(metrics.width + padding * 2)\n  const canvasHeight = Math.ceil(fontSize * 1.4 + padding * 2)\n\n  canvas.width = canvasWidth\n  canvas.height = canvasHeight\n  ctx.font = fontString\n  ctx.textBaseline = 'top'\n  ctx.textAlign = 'left'\n\n  if (element.shadow) {\n    ctx.shadowColor = element.shadow.color\n    ctx.shadowBlur = element.shadow.blur\n    ctx.shadowOffsetX = element.shadow.offsetX ?? 0\n    ctx.shadowOffsetY = element.shadow.offsetY ?? 0\n  }\n\n  if (element.stroke) {\n    ctx.strokeStyle = element.stroke.color\n    ctx.lineWidth = element.stroke.width\n    ctx.lineJoin = 'round'\n    ctx.strokeText(text, padding, padding)\n  }\n  ctx.fillStyle = color\n  ctx.fillText(text, padding, padding)\n\n  const texture = new THREE.CanvasTexture(canvas)\n  texture.minFilter = THREE.LinearFilter\n  texture.magFilter = THREE.LinearFilter\n  texture.needsUpdate = true\n\n  const material = new THREE.MeshBasicMaterial({\n    map: texture,\n    transparent: true,\n    depthWrite: false,\n  })\n\n  const geometry = new THREE.PlaneGeometry(canvasWidth, canvasHeight)\n  const mesh = new THREE.Mesh(geometry, material)\n\n  return {\n    mesh,\n    width: canvasWidth,\n    height: canvasHeight,\n    textWidth: metrics.width,\n  }\n}\n\n/**\n * Render split text - creates multiple meshes (one per char/word/line)\n */\nexport function renderSplitTextElement(\n  element: any,\n  _resolution: any,\n  THREE: typeof THREE_NS,\n) {\n  const { content, font = {}, split } = element\n  const splitType = split?.type ?? 'chars'\n  const letterSpacing = font.letterSpacing ?? 0\n\n  let segments: string[]\n  if (splitType === 'chars') {\n    segments = content.split('')\n  } else if (splitType === 'words') {\n    segments = content.split(/\\s+/)\n  } else {\n    segments = content.split('\\n')\n  }\n\n  const meshes: any[] = []\n  let totalWidth = 0\n\n  segments.forEach((text: string, i: number) => {\n    if (text.length === 0) return\n\n    const result = renderTextSegment(text, font, element, THREE)\n    meshes.push({\n      mesh: result.mesh,\n      width: result.width,\n      height: result.height,\n      textWidth: result.textWidth,\n      text,\n    })\n    totalWidth += result.textWidth\n    if (i < segments.length - 1) {\n      totalWidth +=\n        splitType === 'words' ? (font.size ?? 24) * 0.4 : letterSpacing\n    }\n  })\n\n  const totalHeight = meshes[0]?.height ?? 0\n  let currentX = -totalWidth / 2\n\n  meshes.forEach((item: any, i: number) => {\n    item.offsetX = currentX + item.textWidth / 2\n    item.offsetY = 0\n    currentX += item.textWidth\n    if (i < meshes.length - 1) {\n      currentX +=\n        splitType === 'words' ? (font.size ?? 24) * 0.4 : letterSpacing\n    }\n  })\n\n  return { meshes, totalWidth, totalHeight }\n}\n","import { AssetCache } from '../assetCache'\nimport type * as THREE_NS from 'three'\n\n/**\n * Load and render a video element\n */\nexport async function renderVideoElement(\n  element: any,\n  _resolution: any,\n  THREE: typeof THREE_NS,\n) {\n  const {\n    src,\n    size = {},\n    loop = true,\n    muted = true,\n    playbackRate = 1,\n    startTime = 0,\n  } = element\n\n  let video: HTMLVideoElement\n  const cached = AssetCache.getVideo(src)\n  if (cached) {\n    video = cached.element\n    video.loop = loop\n    video.muted = muted\n    video.playbackRate = playbackRate\n  } else {\n    video = document.createElement('video')\n    video.crossOrigin = 'anonymous'\n    video.src = src\n    video.loop = loop\n    video.muted = muted\n    video.playbackRate = playbackRate\n    video.playsInline = true\n    video.preload = 'auto'\n\n    await new Promise<void>((resolve, reject) => {\n      video.oncanplaythrough = () => resolve()\n      video.onerror = reject\n      video.load()\n    })\n  }\n\n  video.currentTime = startTime\n  video.pause()\n\n  let width = size.width ?? video.videoWidth\n  let height = size.height ?? video.videoHeight\n\n  if (size.width === 'auto' && size.height !== 'auto' && size.height) {\n    const targetHeight =\n      typeof size.height === 'number' ? size.height : video.videoHeight\n    width = (video.videoWidth / video.videoHeight) * targetHeight\n    height = targetHeight\n  } else if (size.height === 'auto' && size.width !== 'auto' && size.width) {\n    const targetWidth =\n      typeof size.width === 'number' ? size.width : video.videoWidth\n    height = (video.videoHeight / video.videoWidth) * targetWidth\n    width = targetWidth\n  }\n\n  const texture = new THREE.VideoTexture(video)\n  texture.minFilter = THREE.LinearFilter\n  texture.magFilter = THREE.LinearFilter\n  texture.format = THREE.RGBAFormat\n  texture.generateMipmaps = false\n  texture.colorSpace = THREE.SRGBColorSpace\n\n  const material = new THREE.MeshBasicMaterial({\n    map: texture,\n    transparent: true,\n    depthWrite: false,\n  })\n\n  const geometry = new THREE.PlaneGeometry(width, height)\n  const mesh = new THREE.Mesh(geometry, material)\n\n  mesh.userData.video = video\n  mesh.userData.texture = texture\n\n  return { mesh, width, height, video }\n}\n","import { preloadAssets } from './assetCache'\nimport { createElementProps } from './createElementProps'\nimport { renderImageElement } from './renderers/image'\nimport { renderSVGElement } from './renderers/svg'\nimport { renderSplitTextElement, renderTextElement } from './renderers/text'\nimport { renderVideoElement } from './renderers/video'\nimport type * as THREE_NS from 'three'\n\n/**\n * Calculate position from config\n */\nfunction calculatePosition(\n  position: any,\n  resolution: any,\n  elementWidth: number,\n  elementHeight: number,\n) {\n  const { width, height } = resolution\n  const halfW = elementWidth / 2\n  const halfH = elementHeight / 2\n\n  if (typeof position === 'string') {\n    switch (position) {\n      case 'center':\n        return { x: width / 2 - halfW, y: height / 2 - halfH }\n      case 'top-left':\n        return { x: 0, y: 0 }\n      case 'top-center':\n        return { x: width / 2 - halfW, y: 0 }\n      case 'top-right':\n        return { x: width - elementWidth, y: 0 }\n      case 'center-left':\n        return { x: 0, y: height / 2 - halfH }\n      case 'center-right':\n        return { x: width - elementWidth, y: height / 2 - halfH }\n      case 'bottom-left':\n        return { x: 0, y: height - elementHeight }\n      case 'bottom-center':\n        return { x: width / 2 - halfW, y: height - elementHeight }\n      case 'bottom-right':\n        return { x: width - elementWidth, y: height - elementHeight }\n      default:\n        return { x: 0, y: 0 }\n    }\n  }\n\n  const x =\n    typeof position.x === 'string'\n      ? (parseFloat(position.x) / 100) * width\n      : position.x\n  const y =\n    typeof position.y === 'string'\n      ? (parseFloat(position.y) / 100) * height\n      : position.y\n  return { x, y }\n}\n\n// Design resolution baseline\nconst DESIGN_HEIGHT = 1080\n\n/**\n * Render all elements to a dedicated overlay scene with pixel-space camera.\n */\nexport async function renderElements(\n  elementsConfig: any[],\n  overlayScenes: Record<number, THREE_NS.Scene>,\n  resolution: any,\n  THREE: typeof THREE_NS,\n) {\n  const getScene = (config: any) => overlayScenes[config.zIndex ?? 100]\n  await preloadAssets(elementsConfig)\n\n  const elementMap = new Map()\n  const resolutionScale = resolution.height / DESIGN_HEIGHT\n\n  for (let i = 0; i < elementsConfig.length; i++) {\n    const config = elementsConfig[i]\n    const id = config.id ?? `element_${i}`\n\n    try {\n      let mesh: THREE_NS.Mesh\n      let canvas: HTMLCanvasElement | null = null\n      let elementWidth = 0\n      let elementHeight = 0\n      let segments: any = null\n      const segmentMeshes: THREE_NS.Mesh[] = []\n      let videoElement: HTMLVideoElement | null = null\n\n      if (config.type === 'text' && config.split) {\n        const splitResult = renderSplitTextElement(config, resolution, THREE)\n        elementWidth = splitResult.totalWidth\n        elementHeight = splitResult.totalHeight\n\n        const scaledWidth = elementWidth * resolutionScale\n        const scaledHeight = elementHeight * resolutionScale\n\n        const { x, y } = calculatePosition(\n          config.position,\n          resolution,\n          scaledWidth,\n          scaledHeight,\n        )\n        const basePosX = x - resolution.width / 2 + scaledWidth / 2\n        const basePosY = -(y - resolution.height / 2 + scaledHeight / 2)\n\n        let transformX = 0\n        let transformY = 0\n        if (config.transform) {\n          transformX = (config.transform.translateX ?? 0) * resolutionScale\n          transformY = -((config.transform.translateY ?? 0) * resolutionScale)\n        }\n\n        const zIndex = config.zIndex ?? 100\n\n        segments = splitResult.meshes.map((item: any, si: number) => {\n          const segMesh = item.mesh\n          segMesh.scale.set(resolutionScale, resolutionScale, 1)\n          segMesh.position.x =\n            basePosX + item.offsetX * resolutionScale + transformX\n          segMesh.position.y =\n            basePosY + item.offsetY * resolutionScale + transformY\n          segMesh.position.z = 0\n          segMesh.renderOrder = zIndex + i * 0.01 + si * 0.001\n\n          if (config.opacity !== undefined) {\n            segMesh.material.opacity = config.opacity\n          }\n\n          getScene(config).add(segMesh)\n          segmentMeshes.push(segMesh)\n\n          return createElementProps(\n            THREE,\n            segMesh,\n            segMesh.position.x,\n            -segMesh.position.y,\n            config.opacity ?? 1,\n          )\n        })\n\n        mesh = splitResult.meshes[0]?.mesh ?? new THREE.Mesh()\n      } else if (config.type === 'text') {\n        const result = renderTextElement(config, resolution, THREE)\n        mesh = result.mesh\n        canvas = result.canvas\n        elementWidth = result.width\n        elementHeight = result.height\n      } else if (config.type === 'image') {\n        const result = await renderImageElement(config, resolution, THREE)\n        mesh = result.mesh\n        elementWidth = result.width\n        elementHeight = result.height\n      } else if (config.type === 'svg') {\n        const result = await renderSVGElement(config, resolution, THREE)\n        mesh = result.mesh\n        elementWidth = result.width\n        elementHeight = result.height\n      } else if (config.type === 'video') {\n        const result = await renderVideoElement(config, resolution, THREE)\n        mesh = result.mesh\n        elementWidth = result.width\n        elementHeight = result.height\n        mesh.userData.video = result.video\n        videoElement = result.video\n        videoElement.pause()\n      } else {\n        mesh = new THREE.Mesh(\n          new THREE.PlaneGeometry(100, 100),\n          new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 }),\n        )\n        console.warn(`Element type \"${config.type}\" not implemented`)\n      }\n\n      if (!config.split) {\n        const scaledWidth = elementWidth * resolutionScale\n        const scaledHeight = elementHeight * resolutionScale\n\n        const { x, y } = calculatePosition(\n          config.position,\n          resolution,\n          scaledWidth,\n          scaledHeight,\n        )\n\n        const posX = x - resolution.width / 2 + scaledWidth / 2\n        const posY = -(y - resolution.height / 2 + scaledHeight / 2)\n\n        mesh.scale.set(resolutionScale, resolutionScale, 1)\n        mesh.position.x = posX\n        mesh.position.y = posY\n        mesh.position.z = 0\n\n        const zIndex = config.zIndex ?? 100\n        mesh.renderOrder = zIndex + i * 0.01\n\n        if (config.opacity !== undefined) {\n          ;(mesh.material as THREE_NS.MeshBasicMaterial).opacity =\n            config.opacity\n          ;(mesh.material as THREE_NS.MeshBasicMaterial).transparent = true\n        }\n\n        if (config.transform) {\n          const t = config.transform\n          if (t.translateX) mesh.position.x += t.translateX * resolutionScale\n          if (t.translateY) mesh.position.y -= t.translateY * resolutionScale\n          if (t.translateZ) mesh.position.z += t.translateZ\n          if (t.scale)\n            mesh.scale.set(\n              t.scale * resolutionScale,\n              t.scale * resolutionScale,\n              1,\n            )\n          if (t.rotateZ || t.rotation) {\n            mesh.rotation.z = ((t.rotateZ ?? t.rotation ?? 0) * Math.PI) / 180\n          }\n        }\n\n        getScene(config).add(mesh)\n      }\n\n      const props = createElementProps(\n        THREE,\n        mesh,\n        mesh.position.x,\n        -mesh.position.y,\n        config.opacity ?? 1,\n        videoElement,\n      )\n\n      const elementInstance = {\n        config,\n        mesh,\n        node: null,\n        props,\n        segments,\n        setContent: (_content: string) => {\n          if (config.type === 'text' && canvas) {\n            console.warn('setContent not fully implemented in inline renderer')\n          }\n        },\n        destroy: () => {\n          const targetScene = getScene(config)\n          if (segmentMeshes.length > 0) {\n            segmentMeshes.forEach((m) => {\n              targetScene.remove(m)\n              m.geometry.dispose()\n              const mat = m.material as THREE_NS.MeshBasicMaterial\n              if (mat.map) mat.map.dispose()\n              mat.dispose()\n            })\n          } else {\n            targetScene.remove(mesh)\n            mesh.geometry.dispose()\n            const mat = mesh.material as THREE_NS.MeshBasicMaterial\n            if (mat.map) mat.map.dispose()\n            mat.dispose()\n          }\n        },\n      }\n\n      elementMap.set(id, elementInstance)\n    } catch (error) {\n      console.warn(\n        `[vos] Failed to render element \"${id}\" (${config.type}):`,\n        error,\n      )\n      // Insert transparent placeholder so layout/animation refs still work\n      const fallbackMesh = new THREE.Mesh(\n        new THREE.PlaneGeometry(100, 100),\n        new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 }),\n      )\n      getScene(config).add(fallbackMesh)\n      const props = createElementProps(THREE, fallbackMesh, 0, 0, 0)\n      elementMap.set(id, {\n        config,\n        mesh: fallbackMesh,\n        node: null,\n        props,\n        segments: null,\n        setContent: () => {},\n        destroy: () => {\n          getScene(config).remove(fallbackMesh)\n          fallbackMesh.geometry.dispose()\n          fallbackMesh.material.dispose()\n        },\n      })\n    }\n  }\n\n  return elementMap\n}\n","import { renderElements } from './renderElements'\nimport type * as THREE_NS from 'three'\n\nexport interface VosElements {\n  renderElements: (\n    elementsConfig: any[],\n    overlayScenes: Record<number, THREE_NS.Scene>,\n    resolution: any,\n    THREE: typeof THREE_NS,\n  ) => Promise<Map<string, any>>\n  disposeElements: (elementMap: Map<string, any>) => void\n}\n\n/**\n * Factory: create the Vos element system bound to a THREE instance.\n */\nexport function createVosElements(THREE: typeof THREE_NS): VosElements {\n  return {\n    renderElements: (\n      elementsConfig: any[],\n      overlayScenes: Record<number, THREE_NS.Scene>,\n      resolution: any,\n    ) => renderElements(elementsConfig, overlayScenes, resolution, THREE),\n    disposeElements: (elementMap: Map<string, any>) => {\n      elementMap.forEach((instance) => instance.destroy?.())\n      elementMap.clear()\n    },\n  }\n}\n\nexport { renderElements } from './renderElements'\n"],"mappings":"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","names":["svgContent"]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@vosjs/elements",
+  "version": "0.1.0",
+  "description": "Vos element system — text / image / SVG / video renderers for Three.js overlays, shipped as both a typed ESM factory and an injectable IIFE bundle.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Hongbin Li",
+  "homepage": "https://github.com/vosjs/vos#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vosjs/vos.git",
+    "directory": "packages/elements"
+  },
+  "bugs": {
+    "url": "https://github.com/vosjs/vos/issues"
+  },
+  "keywords": [
+    "vos",
+    "three",
+    "threejs",
+    "elements",
+    "overlay",
+    "text",
+    "svg"
+  ],
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./bundle": {
+      "types": "./dist/bundle.d.ts",
+      "import": "./dist/bundle.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup && node bundle.mjs",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "clean": "rm -rf dist node_modules"
+  },
+  "peerDependencies": {
+    "three": ">=0.160.0"
+  },
+  "devDependencies": {
+    "@types/three": "^0.182.0",
+    "esbuild": "^0.27.0",
+    "three": "^0.182.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "./bundle": {
+        "types": "./dist/bundle.d.ts",
+        "import": "./dist/bundle.js"
+      }
+    }
+  }
+}