@hypertools/sdk 0.2.0 → 0.2.1

package/dist/export/index.js.map

@@ -1,13 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/export/bundler.ts", "../../src/export/generators/webComponent.ts", "../../src/controls/theme.ts", "../../src/export/runtime.ts"],
-  "sourcesContent": [
-    "/**\n * Bundle generation using esbuild\n */\n\nexport interface BundleOptions {\n  /** Entry file path or inline code */\n  entry: string | { code: string; filename?: string };\n\n  /** Additional files for bundling */\n  files?: Record<string, string>;\n\n  /** Output format (default: 'iife') */\n  format?: 'iife' | 'esm' | 'cjs';\n\n  /** Minify output (default: true) */\n  minify?: boolean;\n\n  /** Generate source maps */\n  sourcemap?: boolean;\n\n  /** Global name for IIFE format */\n  globalName?: string;\n\n  /** External packages to exclude from bundle */\n  external?: string[];\n\n  /** Target environment (default: 'browser') */\n  target?: 'browser' | 'node';\n\n  /** Define replacements */\n  define?: Record<string, string>;\n}\n\nexport interface BundleResult {\n  /** Bundled code */\n  code: string;\n\n  /** Source map (if requested) */\n  map?: string;\n\n  /** Build warnings */\n  warnings: string[];\n\n  /** Output size in bytes */\n  size: number;\n}\n\n/**\n * Bundle code using esbuild\n *\n * This function is designed to run in Node.js/Bun server environment\n * (e.g., backend export service)\n */\nexport async function generateBundle(options: BundleOptions): Promise<BundleResult> {\n  // Dynamic import esbuild (only available server-side)\n  let esbuild: typeof import('esbuild');\n  try {\n    esbuild = await import('esbuild');\n  } catch {\n    throw new Error(\n      'esbuild is not available. This function is meant to run server-side.'\n    );\n  }\n\n  const { mkdtemp, writeFile, readFile, rm, mkdir } = await import('fs/promises');\n  const { tmpdir } = await import('os');\n  const { join, dirname } = await import('path');\n\n  const tempDir = await mkdtemp(join(tmpdir(), 'hypertool-bundle-'));\n\n  try {\n    // Write files to temp directory\n    if (options.files) {\n      for (const [filePath, content] of Object.entries(options.files)) {\n        const fullPath = join(tempDir, filePath.replace(/^\\//, ''));\n        const dir = dirname(fullPath);\n        await mkdir(dir, { recursive: true });\n        await writeFile(fullPath, content);\n      }\n    }\n\n    // Determine entry\n    let entryPath: string;\n    if (typeof options.entry === 'string') {\n      entryPath = join(tempDir, options.entry.replace(/^\\//, ''));\n    } else {\n      const filename = options.entry.filename ?? 'entry.ts';\n      entryPath = join(tempDir, filename);\n      await writeFile(entryPath, options.entry.code);\n    }\n\n    // Bundle with esbuild\n    const result = await esbuild.build({\n      entryPoints: [entryPath],\n      bundle: true,\n      outfile: join(tempDir, 'out.js'),\n      platform: options.target === 'node' ? 'node' : 'browser',\n      format: options.format ?? 'iife',\n      minify: options.minify ?? true,\n      sourcemap: options.sourcemap ? 'external' : false,\n      globalName: options.globalName,\n      external: options.external,\n      define: options.define,\n      write: true,\n      metafile: true,\n    });\n\n    // Read output\n    const code = await readFile(join(tempDir, 'out.js'), 'utf-8');\n    let map: string | undefined;\n\n    if (options.sourcemap) {\n      try {\n        map = await readFile(join(tempDir, 'out.js.map'), 'utf-8');\n      } catch {\n        // Source map might not exist\n      }\n    }\n\n    return {\n      code,\n      map,\n      warnings: result.warnings.map((w: { text: string }) => w.text),\n      size: Buffer.byteLength(code, 'utf-8'),\n    };\n  } finally {\n    // Cleanup\n    await rm(tempDir, { recursive: true, force: true });\n  }\n}\n\n/**\n * Extract param definitions from code using regex\n */\nexport function extractParamDefs(\n  code: string\n): Record<string, { type: string; value: unknown }> | null {\n  // Match export const paramDefs = { ... }\n  const match = code.match(\n    /export\\s+(?:const|let|var)\\s+(?:paramDefs|controlDefinitions)\\s*=\\s*(\\{[\\s\\S]*?\\});?/\n  );\n\n  if (!match) return null;\n\n  try {\n    // This is a simplified extraction - in production you'd use AST parsing\n    // For now, we'll return null and let the backend handle it\n    return null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Wrap user code to expose setup function globally\n */\nexport function wrapSetupCode(code: string): string {\n  return `\n${code}\n\n// Expose setup function globally for web component\nif (typeof setup === 'function') {\n  window.__hypertool_setup__ = setup;\n}\nif (typeof paramDefs !== 'undefined') {\n  window.__hypertool_paramDefs__ = paramDefs;\n}\n`;\n}\n",
-    "/**\n * Web component generator for exports\n */\n\nimport type { ParamDefinitions } from '../../core/ParamStore';\n\nexport interface WebComponentOptions {\n  /** Component tag name (e.g., 'my-experience') */\n  tagName: string;\n\n  /** Class name (e.g., 'MyExperience') */\n  className: string;\n\n  /** Bundled experience code */\n  bundledCode: string;\n\n  /** Parameter definitions */\n  paramDefs: ParamDefinitions;\n\n  /** Current parameter values */\n  currentParams?: Record<string, unknown>;\n\n  /** Include Tweakpane controls */\n  showControls?: boolean;\n\n  /** Background color */\n  background?: string;\n}\n\n/**\n * Escape string for safe embedding in JavaScript\n */\nfunction escapeForJS(str: string): string {\n  return str\n    .replace(/\\\\/g, '\\\\\\\\')\n    .replace(/`/g, '\\\\`')\n    .replace(/\\$/g, '\\\\$')\n    .replace(/<\\/script>/gi, '<\\\\/script>');\n}\n\n/**\n * Generate a self-contained web component\n */\nexport function generateWebComponent(options: WebComponentOptions): string {\n  const {\n    tagName,\n    className,\n    bundledCode,\n    paramDefs,\n    currentParams = {},\n    showControls = false,\n    background = 'transparent',\n  } = options;\n\n  // Escape JSON for embedding\n  const paramsJson = JSON.stringify(currentParams)\n    .replace(/</g, '\\\\u003c')\n    .replace(/>/g, '\\\\u003e');\n\n  const defsJson = JSON.stringify(paramDefs)\n    .replace(/</g, '\\\\u003c')\n    .replace(/>/g, '\\\\u003e');\n\n  const controlsScript = showControls\n    ? `\n    // Load Tweakpane for controls\n    async function loadTweakpane() {\n      if (window.Tweakpane) return window.Tweakpane;\n      return new Promise((resolve, reject) => {\n        const script = document.createElement('script');\n        script.src = 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.5/dist/tweakpane.min.js';\n        script.onload = () => resolve(window.Tweakpane);\n        script.onerror = reject;\n        document.head.appendChild(script);\n      });\n    }\n\n    async function createControls(params, defs, container) {\n      try {\n        const Tweakpane = await loadTweakpane();\n        const pane = new Tweakpane.Pane({\n          title: '${className} Controls',\n          container,\n        });\n\n        for (const [key, def] of Object.entries(defs)) {\n          const config = { label: def.label || key };\n          if (def.type === 'number') {\n            if (def.min !== undefined) config.min = def.min;\n            if (def.max !== undefined) config.max = def.max;\n            if (def.step !== undefined) config.step = def.step;\n          }\n          if (def.type === 'select' && def.options) {\n            config.options = def.options.reduce((acc, opt) => {\n              const val = typeof opt === 'object' ? opt.value : opt;\n              const label = typeof opt === 'object' ? opt.label : opt;\n              acc[label] = val;\n              return acc;\n            }, {});\n          }\n          try {\n            pane.addBinding(params, key, config);\n          } catch (e) {\n            console.warn('Failed to add control:', key, e);\n          }\n        }\n\n        return pane;\n      } catch (e) {\n        console.warn('Failed to load Tweakpane:', e);\n        return null;\n      }\n    }\n    `\n    : '';\n\n  return `\n/**\n * ${className} Web Component\n * Generated by HyperTool SDK\n */\n\n(function() {\n  'use strict';\n\n  const __PARAMS__ = ${paramsJson};\n  const __PARAM_DEFS__ = ${defsJson};\n  const __SHOW_CONTROLS__ = ${showControls};\n  const __BACKGROUND__ = '${background}';\n\n  ${controlsScript}\n\n  class ${className}Element extends HTMLElement {\n    #mount = null;\n    #params = null;\n    #cleanup = null;\n    #resizeObserver = null;\n    #pane = null;\n    #isReady = false;\n\n    constructor() {\n      super();\n      this.attachShadow({ mode: 'open' });\n    }\n\n    static get observedAttributes() {\n      return ['autoplay', 'background', ...Object.keys(__PARAM_DEFS__)];\n    }\n\n    connectedCallback() {\n      this.#render();\n      this.#initialize();\n    }\n\n    disconnectedCallback() {\n      this.#destroy();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n      if (oldValue === newValue) return;\n\n      if (name === 'background') {\n        if (this.#mount) {\n          this.#mount.style.background = newValue || __BACKGROUND__;\n        }\n        return;\n      }\n\n      if (name in __PARAM_DEFS__ && this.#params) {\n        this.#params[name] = this.#parseAttribute(newValue, __PARAM_DEFS__[name].type);\n      }\n    }\n\n    #render() {\n      this.shadowRoot.innerHTML = \\`\n        <style>\n          :host {\n            display: block;\n            width: 100%;\n            height: 100%;\n            position: relative;\n          }\n          .mount {\n            width: 100%;\n            height: 100%;\n            position: relative;\n            overflow: hidden;\n            background: \\${__BACKGROUND__};\n          }\n          .controls-container {\n            position: absolute;\n            top: 8px;\n            right: 8px;\n            z-index: 1000;\n          }\n        </style>\n        <div class=\"mount\"></div>\n        \\${__SHOW_CONTROLS__ ? '<div class=\"controls-container\"></div>' : ''}\n      \\`;\n\n      this.#mount = this.shadowRoot.querySelector('.mount');\n    }\n\n    async #initialize() {\n      // Initialize params from defaults + attributes\n      this.#params = { ...__PARAMS__ };\n\n      for (const [key, def] of Object.entries(__PARAM_DEFS__)) {\n        const attrValue = this.getAttribute(key);\n        if (attrValue !== null) {\n          this.#params[key] = this.#parseAttribute(attrValue, def.type);\n        }\n      }\n\n      // Create reactive proxy\n      const self = this;\n      this.#params = new Proxy(this.#params, {\n        set(target, prop, value) {\n          const previous = target[prop];\n          target[prop] = value;\n          if (previous !== value) {\n            self.dispatchEvent(new CustomEvent('paramchange', {\n              detail: { key: prop, value, previousValue: previous },\n              bubbles: true,\n            }));\n          }\n          return true;\n        }\n      });\n\n      // Setup resize observer\n      this.#resizeObserver = new ResizeObserver(() => {\n        this.dispatchEvent(new CustomEvent('resize', {\n          detail: {\n            width: this.#mount.clientWidth,\n            height: this.#mount.clientHeight\n          },\n          bubbles: true,\n        }));\n      });\n      this.#resizeObserver.observe(this.#mount);\n\n      // Setup controls if enabled\n      if (__SHOW_CONTROLS__) {\n        const controlsContainer = this.shadowRoot.querySelector('.controls-container');\n        if (controlsContainer && typeof createControls === 'function') {\n          this.#pane = await createControls(this.#params, __PARAM_DEFS__, controlsContainer);\n        }\n      }\n\n      // Run experience setup\n      try {\n        const context = {\n          mount: this.#mount,\n          params: this.#params,\n          exports: {\n            captureImage: (format) => this.captureImage(format),\n            setFilename: () => {},\n            useDefaultCanvasCapture: () => {},\n          },\n          environment: {\n            window,\n            document,\n            onResize: (cb) => {\n              const handler = () => cb(this.#mount.clientWidth, this.#mount.clientHeight);\n              handler();\n              const ro = new ResizeObserver(handler);\n              ro.observe(this.#mount);\n              return () => ro.disconnect();\n            },\n          },\n          registerObject: () => {},\n        };\n\n        // Execute bundled code\n        ${escapeForJS(bundledCode)}\n\n        // Call setup if defined\n        if (typeof window.__hypertool_setup__ === 'function') {\n          this.#cleanup = await window.__hypertool_setup__(context);\n        } else if (typeof setup === 'function') {\n          this.#cleanup = await setup(context);\n        }\n\n        this.#isReady = true;\n        this.dispatchEvent(new CustomEvent('ready', { bubbles: true }));\n\n        // Autoplay by default\n        if (this.getAttribute('autoplay') !== 'false') {\n          this.play();\n        }\n      } catch (error) {\n        console.error('[${className}] Setup error:', error);\n        this.dispatchEvent(new CustomEvent('error', {\n          detail: { error },\n          bubbles: true,\n        }));\n      }\n    }\n\n    #destroy() {\n      if (this.#cleanup && typeof this.#cleanup === 'function') {\n        try {\n          this.#cleanup();\n        } catch (e) {\n          console.error('[${className}] Cleanup error:', e);\n        }\n      }\n      this.#resizeObserver?.disconnect();\n      this.#pane?.dispose();\n      this.#cleanup = null;\n      this.#params = null;\n      this.#isReady = false;\n    }\n\n    #parseAttribute(value, type) {\n      switch (type) {\n        case 'number':\n          return parseFloat(value);\n        case 'boolean':\n          return value === 'true' || value === '';\n        case 'color':\n          return value;\n        default:\n          return value;\n      }\n    }\n\n    // Public API\n    get isReady() { return this.#isReady; }\n\n    setParam(key, value) {\n      if (this.#params && key in __PARAM_DEFS__) {\n        this.#params[key] = value;\n        this.#pane?.refresh();\n      }\n    }\n\n    setParams(params) {\n      if (!this.#params) return;\n      for (const [key, value] of Object.entries(params)) {\n        if (key in __PARAM_DEFS__) {\n          this.#params[key] = value;\n        }\n      }\n      this.#pane?.refresh();\n    }\n\n    getParams() {\n      return this.#params ? { ...this.#params } : {};\n    }\n\n    getParamDefs() {\n      return __PARAM_DEFS__;\n    }\n\n    async captureImage(format = 'png') {\n      const canvas = this.#mount?.querySelector('canvas');\n      if (!canvas) return null;\n\n      return new Promise((resolve) => {\n        canvas.toBlob(resolve, \\`image/\\${format}\\`, format === 'jpeg' ? 0.92 : undefined);\n      });\n    }\n\n    play() {\n      this.dispatchEvent(new CustomEvent('play', { bubbles: true }));\n    }\n\n    pause() {\n      this.dispatchEvent(new CustomEvent('pause', { bubbles: true }));\n    }\n  }\n\n  // Register custom element\n  if (!customElements.get('${tagName}')) {\n    customElements.define('${tagName}', ${className}Element);\n  }\n})();\n`;\n}\n\n/**\n * Generate TypeScript definitions for the web component\n */\nexport function generateTypeDefinitions(options: WebComponentOptions): string {\n  const { className, tagName, paramDefs } = options;\n\n  const paramTypes = Object.entries(paramDefs)\n    .map(([key, def]) => {\n      let type: string;\n      switch (def.type) {\n        case 'number':\n          type = 'number';\n          break;\n        case 'boolean':\n          type = 'boolean';\n          break;\n        case 'color':\n        case 'string':\n          type = 'string';\n          break;\n        case 'select':\n          if (def.options) {\n            type = def.options\n              .map((opt) => `'${typeof opt === 'object' ? opt.value : opt}'`)\n              .join(' | ');\n          } else {\n            type = 'string';\n          }\n          break;\n        default:\n          type = 'unknown';\n      }\n      return `  ${key}?: ${type};`;\n    })\n    .join('\\n');\n\n  return `/**\n * TypeScript definitions for ${className}\n * Generated by HyperTool SDK\n */\n\ndeclare namespace JSX {\n  interface IntrinsicElements {\n    '${tagName}': ${className}Attributes;\n  }\n}\n\ninterface ${className}Attributes {\n  autoplay?: boolean | 'true' | 'false';\n  background?: string;\n${paramTypes}\n}\n\ninterface ${className}Element extends HTMLElement {\n  readonly isReady: boolean;\n  setParam(key: string, value: unknown): void;\n  setParams(params: Record<string, unknown>): void;\n  getParams(): Record<string, unknown>;\n  getParamDefs(): Record<string, { type: string; value: unknown; [key: string]: unknown }>;\n  captureImage(format?: 'png' | 'jpeg' | 'webp'): Promise<Blob | null>;\n  play(): void;\n  pause(): void;\n}\n\ninterface ${className}Events {\n  ready: CustomEvent<void>;\n  error: CustomEvent<{ error: Error }>;\n  paramchange: CustomEvent<{ key: string; value: unknown; previousValue: unknown }>;\n  resize: CustomEvent<{ width: number; height: number }>;\n  play: CustomEvent<void>;\n  pause: CustomEvent<void>;\n}\n`;\n}\n",
-    "/**\n * Design tokens inherited from the parent Studio application\n * These CSS variables are defined in src/app/globals.css\n */\nexport const studioTheme = {\n  // CSS variables that should be available in the iframe\n  cssVariables: {\n    '--bg': '#0a0e14',\n    '--bg-elevated': '#0f1419',\n    '--muted': '#1a2332',\n    '--text': '#e6edf3',\n    '--text-secondary': '#8b949e',\n    '--accent': '#58d5ff',\n    '--accent-2': '#42a5cc',\n    '--border': '#21262d',\n    '--border-hover': '#30363d',\n    '--success': '#3fb950',\n    '--error': '#f85149',\n\n    // Hypertool-specific variables\n    '--ht-text-color-main-200': '#00ffd4',\n    '--ht-text-color-main-300': '#6ff3dd',\n    '--ht-text-color-main-500': '#4b8e85',\n    '--ht-text-color-grey-200': '#8c8d8f',\n\n    '--ht-bg-color-200': '#8c8d8f',\n    '--ht-bg-color-200-active': '#7a7b7d',\n    '--ht-bg-color-200-focus': '#7e7f81',\n    '--ht-bg-color-200-hover': '#828384',\n\n    '--ht-bg-color-300': '#5e6068',\n    '--ht-bg-color-300-active': '#4c4e56',\n    '--ht-bg-color-300-focus': '#55575f',\n    '--ht-bg-color-300-hover': '#595b63',\n\n    '--ht-bg-color-400': '#cccccc',\n    '--ht-bg-color-400-active': '#b3b3b3',\n    '--ht-bg-color-400-focus': '#c0c0c0',\n    '--ht-bg-color-400-hover': '#c6c6c6',\n\n    '--ht-bg-color-500': '#1C1D20',\n    '--ht-bg-color-500-active': '#0a0b0e',\n    '--ht-bg-color-500-focus': '#131417',\n    '--ht-bg-color-500-hover': '#16171a',\n\n    '--ht-bg-color-600': '#37383D',\n    '--ht-bg-color-600-active': '#25262b',\n    '--ht-bg-color-600-focus': '#2e2f34',\n    '--ht-bg-color-600-hover': '#323338',\n\n    '--ht-bg-color-700': '#0f1419',\n    '--ht-bg-color-700-active': '#16171c',\n    '--ht-bg-color-700-focus': '#1f2025',\n    '--ht-bg-color-700-hover': '#232429',\n\n    '--ht-border-radius': '8px',\n\n    '--ht-base-font-family-base': '\"HydrogenType400\", ui-sans-serif, system-ui, sans-serif',\n    '--ht-base-font-family-display': '\"Departure Mono\", Roboto Mono, Source Code Pro, Menlo, Courier, monospace',\n    '--ht-base-font-family-sans': '\"Routed Gothic\", ui-sans-serif, system-ui, sans-serif',\n    '--ht-base-font-family-mono': '\"Routed Gothic Narrow\", ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace',\n  },\n\n  // Tweakpane-specific theme variables\n  tweakpane: {\n    '--tp-base-background-color': 'var(--ht-bg-color-700)',\n    '--tp-base-shadow-color': 'hsla(0, 0%, 0%, 0.2)',\n\n    '--tp-container-background-color': 'var(--ht-bg-color-600)',\n    '--tp-container-background-color-active': 'var(--ht-bg-color-600-active)',\n    '--tp-container-background-color-focus': 'var(--ht-bg-color-600-focus)',\n    '--tp-container-background-color-hover': 'var(--ht-bg-color-600-hover)',\n    '--tp-container-foreground-color': 'var(--ht-text-color-main-300)',\n\n    '--tp-button-background-color': 'var(--ht-bg-color-400)',\n    '--tp-button-background-color-active': 'color-mix(in srgb, var(--ht-bg-color-400-active) 80%, white)',\n    '--tp-button-background-color-focus': 'color-mix(in srgb, var(--ht-bg-color-400-focus) 85%, white)',\n    '--tp-button-background-color-hover': 'color-mix(in srgb, var(--ht-bg-color-400-hover) 90%, white)',\n    '--tp-button-foreground-color': 'var(--ht-text-color-main-300)',\n\n    '--tp-groove-foreground-color': 'var(--ht-bg-color-300)',\n\n    '--tp-input-background-color': 'var(--ht-bg-color-500)',\n    '--tp-input-background-color-active': 'var(--ht-bg-color-500-active)',\n    '--tp-input-background-color-focus': 'var(--ht-bg-color-500-focus)',\n    '--tp-input-background-color-hover': 'var(--ht-bg-color-500-hover)',\n    '--tp-input-foreground-color': 'var(--ht-text-color-main-300)',\n\n    '--tp-label-foreground-color': 'var(--ht-text-color-main-300)',\n\n    '--tp-monitor-background-color': 'var(--ht-bg-color-500)',\n    '--tp-monitor-foreground-color': 'var(--ht-text-color-main-300)',\n  }\n};\n\n/**\n * Inject CSS variables into the document\n */\nexport function injectThemeVariables() {\n  const style = document.createElement('style');\n  style.id = 'hypertool-theme';\n\n  const cssVars = Object.entries({\n    ...studioTheme.cssVariables,\n    ...studioTheme.tweakpane\n  })\n    .map(([key, value]) => `  ${key}: ${value};`)\n    .join('\\n');\n\n  style.textContent = `\n  body {\n   margin: 0;\n   padding: 0;\n  }\n\n:root {\n${cssVars}\n}\n\n/* Controls panel positioning and styling */\n.controls-container {\n  position: fixed;\n  top: 8px;\n  right: 8px;\n  z-index: 1000;\n  max-height: calc(100vh - 16px);\n  overflow-y: auto;\n}\n\n/* Ensure Tweakpane pane has background */\n.tp-dfwv {\n  background-color: var(--tp-base-background-color, #0f1419) !important;\n}\n`;\n\n  document.head.appendChild(style);\n}",
-    "/**\n * Export Runtime Generator\n *\n * Generates the __hypertool__ runtime replacement for standalone exports.\n * This provides the same API as the studio runtime but creates a web component\n * instead of connecting to studio controls.\n *\n * Used by both export and preview endpoints.\n */\n\nexport interface ExportRuntimeOptions {\n  /** Component tag name (kebab-case, e.g., 'my-experience') */\n  tagName: string;\n\n  /** Current parameter values to bake into the export */\n  currentParams?: Record<string, unknown>;\n\n  /** Whether to include Tweakpane controls panel */\n  showControls?: boolean;\n\n  /** Controls panel title (defaults to tagName) */\n  controlsTitle?: string;\n\n  /** Background color for the component */\n  background?: string;\n}\n\n/**\n * Safely serialize params for injection into JavaScript code\n * Escapes characters that could break script context\n */\nfunction safeJsonStringify(obj: unknown): string {\n  const json = JSON.stringify(obj);\n  return json\n    .replace(/</g, '\\\\u003c') // Prevent </script> injection\n    .replace(/>/g, '\\\\u003e') // Prevent tag injection\n    .replace(/\\u2028/g, '\\\\u2028') // Line separator\n    .replace(/\\u2029/g, '\\\\u2029'); // Paragraph separator\n}\n\n// Import theme from controls module - single source of truth\nimport { studioTheme } from '../controls/theme';\n\n/**\n * Generate theme CSS string from studioTheme object\n * Converts the theme variables to CSS that works in Shadow DOM\n */\nfunction generateThemeCSS(): string {\n  const cssVars = Object.entries({\n    ...studioTheme.cssVariables,\n    ...studioTheme.tweakpane\n  })\n    .map(([key, value]) => `  ${key}: ${value};`)\n    .join('\\n');\n\n  return `\n/* Hypertool Theme - generated from studioTheme */\n:host {\n${cssVars}\n}\n\n/* Ensure Tweakpane uses our theme */\n.tp-dfwv {\n  background-color: var(--tp-base-background-color) !important;\n  border-radius: 8px;\n}\n`;\n}\n\n/**\n * Generate controls-related code (Tweakpane loaded from esm.sh CDN)\n */\nfunction generateControlsCode(controlsTitle: string): string {\n  const themeCSS = generateThemeCSS();\n\n  return `\n// Tweakpane loaded dynamically from esm.sh CDN at runtime\nlet __Pane__: any = null;\n\nasync function __loadTweakpane__(): Promise<void> {\n  if (__Pane__) return;\n  try {\n    const module = await import('https://esm.sh/tweakpane@4');\n    __Pane__ = module.Pane;\n  } catch (e) {\n    console.warn('[Controls] Failed to load Tweakpane from CDN:', e);\n  }\n}\n\nconst __THEME_CSS__ = \\`${themeCSS}\\`;\n\nasync function __createControls__(params: Record<string, unknown>, defs: Record<string, any>, container: HTMLElement, shadowRoot: ShadowRoot) {\n  await __loadTweakpane__();\n  if (!__Pane__) return null;\n\n  try {\n    const pane = new __Pane__({\n      title: '${controlsTitle}',\n      container,\n    });\n\n    for (const [key, def] of Object.entries(defs)) {\n      if (!def || def.type === 'folder') continue;\n\n      const config: Record<string, unknown> = { label: def.label || key };\n\n      if (def.type === 'number') {\n        if (def.min !== undefined) config.min = def.min;\n        if (def.max !== undefined) config.max = def.max;\n        if (def.step !== undefined) config.step = def.step;\n      }\n\n      if (def.type === 'select' && def.options) {\n        config.options = def.options.reduce((acc: Record<string, unknown>, opt: unknown) => {\n          const val = typeof opt === 'object' && opt !== null ? (opt as any).value : opt;\n          const label = typeof opt === 'object' && opt !== null ? (opt as any).label : String(opt);\n          acc[label] = val;\n          return acc;\n        }, {});\n      }\n\n      try {\n        pane.addBinding(params, key, config);\n      } catch (e) {\n        console.warn('[Controls] Failed to add binding for:', key, e);\n      }\n    }\n\n    // Tweakpane injects CSS into document.head - copy it to shadow root for isolation\n    setTimeout(() => {\n      const tpStyles = document.querySelectorAll('style');\n      tpStyles.forEach(style => {\n        if (style.textContent?.includes('.tp-') || style.textContent?.includes('tp-dfwv')) {\n          const clone = style.cloneNode(true) as HTMLStyleElement;\n          shadowRoot.appendChild(clone);\n        }\n      });\n    }, 0);\n\n    return pane;\n  } catch (e) {\n    console.warn('[Controls] Failed to create controls:', e);\n    return null;\n  }\n}\n`;\n}\n\n/**\n * Generate draggable controls functionality\n */\nfunction generateDraggableCode(): string {\n  return `\n// Make controls panel draggable\nfunction __setupDraggable__(container, pane) {\n  if (!pane || !pane.element) return;\n\n  const titleEl = pane.element.querySelector('.tp-rotv_t');\n  if (!titleEl) return;\n\n  let isDragging = false;\n  let startX = 0;\n  let startY = 0;\n  let initialRight = 8;\n  let initialTop = 8;\n\n  titleEl.style.cursor = 'grab';\n\n  titleEl.addEventListener('mousedown', (e) => {\n    if (e.button !== 0) return;\n    isDragging = true;\n    startX = e.clientX;\n    startY = e.clientY;\n\n    const style = getComputedStyle(container);\n    initialRight = parseInt(style.right) || 8;\n    initialTop = parseInt(style.top) || 8;\n\n    titleEl.style.cursor = 'grabbing';\n    e.preventDefault();\n  });\n\n  document.addEventListener('mousemove', (e) => {\n    if (!isDragging) return;\n\n    const deltaX = e.clientX - startX;\n    const deltaY = e.clientY - startY;\n\n    container.style.right = Math.max(0, initialRight - deltaX) + 'px';\n    container.style.top = Math.max(0, initialTop + deltaY) + 'px';\n  });\n\n  document.addEventListener('mouseup', () => {\n    if (isDragging) {\n      isDragging = false;\n      titleEl.style.cursor = 'grab';\n    }\n  });\n}\n`;\n}\n\n/**\n * Generate the export-friendly __hypertool__ runtime\n *\n * This provides the same API as the studio runtime but creates a web component\n * instead of connecting to studio controls.\n */\nexport function generateExportRuntime(options: ExportRuntimeOptions): string {\n  const {\n    tagName,\n    currentParams = {},\n    showControls = false,\n    controlsTitle,\n    background = 'transparent',\n  } = options;\n\n  const currentParamsJson = safeJsonStringify(currentParams);\n  const title = controlsTitle || tagName.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ');\n\n  const controlsCode = showControls ? generateControlsCode(title) : '';\n  const draggableCode = showControls ? generateDraggableCode() : '';\n  const controlsContainerHtml = showControls\n    ? `<div class=\"controls-container\"></div>`\n    : '';\n  const controlsContainerStyle = showControls\n    ? `\n        .controls-container {\n          position: absolute;\n          top: 8px;\n          right: 8px;\n          z-index: 1000;\n          max-height: calc(100% - 16px);\n          overflow-y: auto;\n        }\n        /* Tweakpane theme overrides */\n        .controls-container .tp-dfwv {\n          background-color: rgba(15, 20, 25, 0.95) !important;\n        }\n      `\n    : '';\n\n  return `\n// Export-friendly HyperTool Runtime\n// Generated by @hypertools/sdk\n// Controls: ${showControls ? 'enabled' : 'disabled'}\n\n// Baked-in current params from export\nconst __BAKED_PARAMS__ = ${currentParamsJson};\nconst __SHOW_CONTROLS__ = ${showControls};\nconst __BACKGROUND__ = '${background}';\n\n${controlsCode}\n${draggableCode}\n\nexport type ControlDefinitions = Record<string, {\n  type: string;\n  value: unknown;\n  label?: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  options?: unknown[];\n}>;\n\nexport interface SandboxContext {\n  mount: HTMLElement;\n  params: Record<string, unknown>;\n  exports: {\n    setFilename: (name: string) => void;\n    useDefaultCanvasCapture: (use: boolean) => void;\n    captureImage: () => Promise<Blob>;\n  };\n  environment: {\n    onResize: (callback: () => void) => () => void;\n    window: Window;\n    document: Document;\n  };\n  controls: null;\n}\n\ninterface SandboxConfig {\n  controls?: {\n    definitions?: ControlDefinitions;\n    options?: { title?: string };\n  };\n  exportWidget?: {\n    filename?: string;\n    useCanvasCapture?: boolean;\n    enabled?: boolean;\n  };\n  setup: (context: SandboxContext) => (() => void) | void;\n}\n\n// Store for the experience definition\nlet __experienceDef__: SandboxConfig | null = null;\n\n/**\n * createSandbox - Export version\n * Instead of connecting to studio, registers a web component\n */\nexport async function createSandbox(config: SandboxConfig): Promise<void> {\n  __experienceDef__ = config;\n\n  // Create the web component\n  class HypertoolElement extends HTMLElement {\n    private _mount: HTMLElement | null = null;\n    private _controlsContainer: HTMLElement | null = null;\n    private _cleanup: (() => void) | void = undefined;\n    private _params: Record<string, unknown> = {};\n    private _pane: any = null;\n\n    constructor() {\n      super();\n      this.attachShadow({ mode: 'open' });\n    }\n\n    connectedCallback() {\n      if (!this.shadowRoot || !__experienceDef__) return;\n\n      // Setup styles (includes theme CSS when controls enabled)\n      const style = document.createElement('style');\n      style.textContent = \\`\n        \\${__SHOW_CONTROLS__ && typeof __THEME_CSS__ !== 'undefined' ? __THEME_CSS__ : ''}\n        :host { display: block; width: 100%; height: 100%; }\n        .mount {\n          width: 100%;\n          height: 100%;\n          position: relative;\n          overflow: hidden;\n          background: \\${__BACKGROUND__};\n        }\n        ${controlsContainerStyle}\n      \\`;\n      this.shadowRoot.appendChild(style);\n\n      // Create mount\n      this._mount = document.createElement('div');\n      this._mount.className = 'mount';\n      this.shadowRoot.appendChild(this._mount);\n\n      // Create controls container if enabled\n      if (__SHOW_CONTROLS__) {\n        this._controlsContainer = document.createElement('div');\n        this._controlsContainer.className = 'controls-container';\n        this.shadowRoot.appendChild(this._controlsContainer);\n      }\n\n      // Initialize params: baked params > HTML attributes > definition defaults\n      const defs = __experienceDef__.controls?.definitions || {};\n      for (const [key, def] of Object.entries(defs)) {\n        // Priority: HTML attribute > baked param > definition default\n        if (this.getAttribute(key) !== null) {\n          this._params[key] = this._parseAttr(key, this.getAttribute(key)!, def);\n        } else if (key in __BAKED_PARAMS__) {\n          this._params[key] = __BAKED_PARAMS__[key];\n        } else {\n          this._params[key] = def.value;\n        }\n      }\n\n      // Make params reactive\n      const self = this;\n      this._params = new Proxy(this._params, {\n        set: (target, prop, value) => {\n          const previous = target[prop as string];\n          target[prop as string] = value;\n          if (previous !== value) {\n            self.dispatchEvent(new CustomEvent('paramchange', {\n              detail: { key: prop, value, previousValue: previous },\n              bubbles: true,\n            }));\n          }\n          return true;\n        }\n      });\n\n      // Create context\n      const context: SandboxContext = {\n        mount: this._mount,\n        params: this._params,\n        exports: {\n          setFilename: () => {},\n          useDefaultCanvasCapture: () => {},\n          captureImage: async () => {\n            const canvas = this._mount?.querySelector('canvas');\n            if (!canvas) throw new Error('No canvas found');\n            return new Promise((res, rej) => {\n              canvas.toBlob(b => b ? res(b) : rej(new Error('Failed to capture')));\n            });\n          },\n        },\n        environment: {\n          onResize: (callback) => {\n            const ro = new ResizeObserver(() => callback());\n            ro.observe(this._mount!);\n            return () => ro.disconnect();\n          },\n          window,\n          document,\n        },\n        controls: null,\n      };\n\n      // Run setup\n      this._cleanup = __experienceDef__.setup(context);\n\n      // Setup controls if enabled (async - loads Tweakpane from CDN)\n      if (__SHOW_CONTROLS__ && this._controlsContainer && typeof __createControls__ === 'function') {\n        __createControls__(this._params, defs, this._controlsContainer, this.shadowRoot!).then((pane: any) => {\n          this._pane = pane;\n          if (this._pane && typeof __setupDraggable__ === 'function') {\n            __setupDraggable__(this._controlsContainer, this._pane);\n          }\n        });\n      }\n\n      // Dispatch ready event\n      this.dispatchEvent(new CustomEvent('ready', { bubbles: true }));\n    }\n\n    disconnectedCallback() {\n      if (this._cleanup) this._cleanup();\n      if (this._pane?.dispose) this._pane.dispose();\n    }\n\n    private _parseAttr(key: string, value: string, def: { type: string }): unknown {\n      switch (def.type) {\n        case 'number': return parseFloat(value);\n        case 'boolean': return value === 'true' || value === '';\n        default: return value;\n      }\n    }\n\n    // Public API\n    setParam(key: string, value: unknown) {\n      this._params[key] = value;\n      this._pane?.refresh();\n    }\n    setParams(params: Record<string, unknown>) {\n      for (const [k, v] of Object.entries(params)) this._params[k] = v;\n      this._pane?.refresh();\n    }\n    getParams() { return { ...this._params }; }\n    getParamDefs() { return __experienceDef__?.controls?.definitions || {}; }\n  }\n\n  // Register the component\n  if (!customElements.get('${tagName}')) {\n    customElements.define('${tagName}', HypertoolElement);\n  }\n}\n`;\n}\n\n/**\n * Generate HTML with external script reference\n */\nexport function generateExportHtml(tagName: string): string {\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>${tagName}</title>\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }\n    ${tagName} { display: block; width: 100%; height: 100%; }\n  </style>\n</head>\n<body>\n  <${tagName}></${tagName}>\n  <script src=\"./${tagName}.js\"></script>\n</body>\n</html>`;\n}\n\n/**\n * Generate HTML with inline script (for preview)\n * Includes permissive CSP for external library loading\n */\nexport function generatePreviewHtml(tagName: string, code: string): string {\n  const cdnHosts = [\n    'https://cdnjs.cloudflare.com',\n    'https://cdn.jsdelivr.net',\n    'https://unpkg.com',\n    'https://esm.sh',\n    'https://cdn.skypack.dev',\n  ].join(' ');\n\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self' blob: data: ${cdnHosts}; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: data: ${cdnHosts}; style-src 'self' 'unsafe-inline' ${cdnHosts}; img-src 'self' blob: data: *; media-src 'self' blob: data: *; connect-src *; font-src 'self' data: ${cdnHosts};\">\n  <title>${tagName}</title>\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }\n    ${tagName} { display: block; width: 100%; height: 100%; }\n  </style>\n</head>\n<body>\n  <${tagName}></${tagName}>\n  <script>\n${code}\n  </script>\n</body>\n</html>`;\n}\n\n/**\n * Generate README for the exported component\n */\nexport function generateExportReadme(tagName: string, className: string): string {\n  return `# ${className}\n\n## Usage\n\n\\`\\`\\`html\n<script src=\"${tagName}.js\"></script>\n<${tagName}></${tagName}>\n\\`\\`\\`\n\n## API\n\n\\`\\`\\`javascript\nconst el = document.querySelector('${tagName}');\n\n// Set parameters\nel.setParam('paramName', value);\nel.setParams({ param1: value1, param2: value2 });\n\n// Get current parameters\nconst params = el.getParams();\n\n// Get parameter definitions\nconst defs = el.getParamDefs();\n\\`\\`\\`\n\n## Events\n\n\\`\\`\\`javascript\nel.addEventListener('ready', () => console.log('Ready!'));\nel.addEventListener('paramchange', (e) => {\n  console.log('Param changed:', e.detail.key, e.detail.value);\n});\n\\`\\`\\`\n\n## Files\n\n- \\`${tagName}.js\\` - The bundled component\n- \\`index.html\\` - Example page (loads external JS)\n- \\`preview.html\\` - Standalone preview (inline JS)\n`;\n}\n\n/**\n * Generate TypeScript type definitions\n */\nexport function generateExportTypes(tagName: string, className: string): string {\n  return `export interface ${className}Element extends HTMLElement {\n  setParam(key: string, value: unknown): void;\n  setParams(params: Record<string, unknown>): void;\n  getParams(): Record<string, unknown>;\n  getParamDefs(): Record<string, { type: string; value: unknown; [key: string]: unknown }>;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    '${tagName}': ${className}Element;\n  }\n}\n`;\n}\n"
-  ],
-  "mappings": "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",
-  "debugId": "BBAF843355D811CE64756E2164756E21",
-  "names": []
-}

package/dist/export/runtime.d.ts

@@ -1,46 +0,0 @@
-/**
- * Export Runtime Generator
- *
- * Generates the __hypertool__ runtime replacement for standalone exports.
- * This provides the same API as the studio runtime but creates a web component
- * instead of connecting to studio controls.
- *
- * Used by both export and preview endpoints.
- */
-export interface ExportRuntimeOptions {
-    /** Component tag name (kebab-case, e.g., 'my-experience') */
-    tagName: string;
-    /** Current parameter values to bake into the export */
-    currentParams?: Record<string, unknown>;
-    /** Whether to include Tweakpane controls panel */
-    showControls?: boolean;
-    /** Controls panel title (defaults to tagName) */
-    controlsTitle?: string;
-    /** Background color for the component */
-    background?: string;
-}
-/**
- * Generate the export-friendly __hypertool__ runtime
- *
- * This provides the same API as the studio runtime but creates a web component
- * instead of connecting to studio controls.
- */
-export declare function generateExportRuntime(options: ExportRuntimeOptions): string;
-/**
- * Generate HTML with external script reference
- */
-export declare function generateExportHtml(tagName: string): string;
-/**
- * Generate HTML with inline script (for preview)
- * Includes permissive CSP for external library loading
- */
-export declare function generatePreviewHtml(tagName: string, code: string): string;
-/**
- * Generate README for the exported component
- */
-export declare function generateExportReadme(tagName: string, className: string): string;
-/**
- * Generate TypeScript type definitions
- */
-export declare function generateExportTypes(tagName: string, className: string): string;
-//# sourceMappingURL=runtime.d.ts.map

package/dist/export/runtime.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/export/runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,WAAW,oBAAoB;IACnC,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;IAEhB,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAExC,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAiLD;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,oBAAoB,GAAG,MAAM,CAqP3E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAkB1D;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CA6BzE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAyC/E;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAc9E"}

package/dist/frame/cssBridge.d.ts

@@ -1,34 +0,0 @@
-export declare const CSS_SYNC_MESSAGE_TYPE = "hyper-frame:css-sync";
-interface CssBridgeOptions {
-    sourceDocument?: Document | null;
-    targetDocument?: Document | null;
-    mirror?: boolean;
-}
-export declare class CssBridge {
-    private source;
-    private target;
-    private observer;
-    private nodeMap;
-    private active;
-    private messageListener;
-    private usePostMessage;
-    private cssNodesById;
-    constructor(options?: CssBridgeOptions);
-    start(): void;
-    stop(): void;
-    private startPostMessageMode;
-    private handleCssMessage;
-    private addCssNode;
-    private removeCssNode;
-    private updateCssNode;
-    private cleanupPreviousClones;
-    private syncAll;
-    private attachObserver;
-    private handleChildListMutation;
-    private handleCharacterDataMutation;
-    private handleAttributeMutation;
-    private cloneNode;
-    private fetchCssContent;
-}
-export {};
-//# sourceMappingURL=cssBridge.d.ts.map

package/dist/frame/cssBridge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cssBridge.d.ts","sourceRoot":"","sources":["../../src/frame/cssBridge.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,yBAAyB,CAAC;AAE5D,UAAU,gBAAgB;IACxB,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAaD,qBAAa,SAAS;IACpB,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,eAAe,CAAgD;IACvE,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,YAAY,CAAkC;gBAE1C,OAAO,GAAE,gBAAqB;IAuB1C,KAAK;IAkBL,IAAI;IAcJ,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,qBAAqB;YAOf,OAAO;IAarB,OAAO,CAAC,cAAc;IA4BtB,OAAO,CAAC,uBAAuB;IAiC/B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,uBAAuB;YAejB,SAAS;YA2CT,eAAe;CAY9B"}

package/dist/frame/index.d.ts

@@ -1,9 +0,0 @@
-import type { HyperFrameRuntimeConfig, HyperFrameSandboxHandle, HyperFrameSandboxOptions } from './types';
-import { HyperFrameRuntime } from './runtime';
-declare const runtime: HyperFrameRuntime;
-export { runtime };
-export declare function configureRuntime(config: HyperFrameRuntimeConfig): HyperFrameRuntime;
-export declare function createSandbox(options: HyperFrameSandboxOptions): Promise<HyperFrameSandboxHandle>;
-export declare function mirrorCss(): void;
-export type { HyperFrameRuntimeConfig, HyperFrameRuntimeApi, HyperFrameSandboxOptions, HyperFrameSandboxHandle, ControlType, ControlDefinition, ControlDefinitions, NumberControlDefinition, ColorControlDefinition, BooleanControlDefinition, StringControlDefinition, SelectControlDefinition, SandboxContext, SandboxEnvironment, SandboxControlsHandle, SandboxExportsApi, SandboxCaptureFn, SandboxCaptureResult, SandboxImageCaptureHandler, SandboxVideoCaptureHandler, SandboxControlChangeHandler, ControlChangePayload, ControlPanelOptions, MountOptions, MountResult, } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/frame/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/frame/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACvB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAI9C,QAAA,MAAM,OAAO,mBAAuC,CAAC;AAGrD,OAAO,EAAE,OAAO,EAAE,CAAC;AAEnB,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,uBAAuB,qBAE/D;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,wBAAwB,GAAG,OAAO,CAAC,uBAAuB,CAAC,CAEjG;AAID,wBAAgB,SAAS,SAExB;AAGD,YAAY,EAEV,uBAAuB,EACvB,oBAAoB,EACpB,wBAAwB,EACxB,uBAAuB,EAGvB,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EAGvB,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,EAC1B,2BAA2B,EAG3B,oBAAoB,EACpB,mBAAmB,EAGnB,YAAY,EACZ,WAAW,GAGZ,MAAM,SAAS,CAAC"}

package/dist/frame/index.js

@@ -1,3 +0,0 @@
-import uL from"react";import{createRoot as pL}from"react-dom/client";var $L=new Set(["STYLE","LINK"]);class JL{source;target;observer=null;nodeMap=new WeakMap;active=!1;messageListener=null;usePostMessage=!1;cssNodesById=new Map;constructor(L={}){let $=null;if(L.sourceDocument)$=L.sourceDocument;else if(typeof window<"u")try{$=window.parent?.document??null}catch(J){console.debug("[hyper-frame] Using postMessage for CSS sync (cross-origin)"),this.usePostMessage=!0,$=null}this.source=$,this.target=L.targetDocument??(typeof document<"u"?document:null),this.active=Boolean(L.mirror??!0)}start(){if(!this.active)return;if(this.usePostMessage)this.startPostMessageMode();else if(this.source&&this.target)this.cleanupPreviousClones(),this.syncAll(),this.attachObserver();else console.warn("[hyper-frame] Unable to mirror CSS – missing source or target document.")}stop(){if(this.observer?.disconnect(),this.observer=null,this.nodeMap=new WeakMap,this.cleanupPreviousClones(),this.messageListener&&typeof window<"u")window.removeEventListener("message",this.messageListener),this.messageListener=null;this.cssNodesById.clear()}startPostMessageMode(){if(!this.target||typeof window>"u")return;this.cleanupPreviousClones(),this.messageListener=(L)=>{if(!L.data||L.data.type!=="hyper-frame:css-sync")return;this.handleCssMessage(L.data)},window.addEventListener("message",this.messageListener),console.debug("[hyper-frame] CSS postMessage receiver ready")}handleCssMessage(L){if(!this.target)return;switch(L.action){case"init":this.cleanupPreviousClones(),this.cssNodesById.clear();break;case"add":if(L.id&&L.tagName)this.addCssNode(L.id,L.tagName,L.attributes,L.textContent);break;case"remove":if(L.id)this.removeCssNode(L.id);break;case"update":if(L.id)this.updateCssNode(L.id,L.attributes,L.textContent);break}}addCssNode(L,$,J,Q){if(!this.target)return;if(this.cssNodesById.has(L))return;let Z=document.createElement($);if(Z.setAttribute("data-hyper-frame-clone","true"),Z.setAttribute("data-css-id",L),J)for(let[K,X]of Object.entries(J))Z.setAttribute(K,X);if(Q)Z.textContent=Q;this.target.head.appendChild(Z),this.cssNodesById.set(L,Z)}removeCssNode(L){let $=this.cssNodesById.get(L);if($&&$.parentNode)$.parentNode.removeChild($),this.cssNodesById.delete(L)}updateCssNode(L,$,J){let Q=this.cssNodesById.get(L);if(!Q)return;if($){for(let Z of Array.from(Q.attributes))if(!Z.name.startsWith("data-"))Q.removeAttribute(Z.name);for(let[Z,K]of Object.entries($))Q.setAttribute(Z,K)}if(J!==void 0)Q.textContent=J}cleanupPreviousClones(){if(!this.target)return;this.target.querySelectorAll('[data-hyper-frame-clone="true"]').forEach((L)=>L.parentNode?.removeChild(L))}async syncAll(){if(!this.source||!this.target)return;let L=this.source.head,$=Array.from(L.children).filter((J)=>$L.has(J.nodeName));for(let J of $){let Q=await this.cloneNode(J);if(!Q)continue;this.target?.head.appendChild(Q),this.nodeMap.set(J,Q)}}attachObserver(){if(!this.source||!this.target)return;if(this.observer)return;this.observer=new MutationObserver((L)=>{L.forEach(($)=>{switch($.type){case"childList":this.handleChildListMutation($);break;case"characterData":this.handleCharacterDataMutation($);break;case"attributes":this.handleAttributeMutation($);break}})}),this.observer.observe(this.source.head,{childList:!0,subtree:!0,characterData:!0,attributes:!0})}handleChildListMutation(L){if(!this.target)return;L.removedNodes.forEach(($)=>{let J=this.nodeMap.get($);if(J&&J.parentNode)J.parentNode.removeChild(J),this.nodeMap.delete($)}),L.addedNodes.forEach(async($)=>{if(!($ instanceof HTMLElement))return;if(!$L.has($.nodeName))return;try{let J=await this.cloneNode($);if(!J)return;let Q=L.nextSibling?this.nodeMap.get(L.nextSibling):null;if(Q&&Q.parentNode)Q.parentNode.insertBefore(J,Q);else this.target?.head.appendChild(J);this.nodeMap.set($,J)}catch(J){console.error("[CssBridge] Failed to clone node:",J)}})}handleCharacterDataMutation(L){let J=L.target.parentNode;if(!J)return;let Q=this.nodeMap.get(J);if(!Q)return;Q.textContent=J.textContent}handleAttributeMutation(L){let $=L.target,J=this.nodeMap.get($);if(!J||!(J instanceof Element))return;if(L.attributeName){let Q=$.getAttribute(L.attributeName);if(Q===null)J.removeAttribute(L.attributeName);else J.setAttribute(L.attributeName,Q)}}async cloneNode(L){if(!(L instanceof HTMLElement))return null;if(!$L.has(L.nodeName))return null;if(L.nodeName==="LINK"&&L instanceof HTMLLinkElement){let J=L.getAttribute("href"),Q=L.getAttribute("rel");if(J){if(Q==="stylesheet")try{let K=await this.fetchCssContent(J),X=document.createElement("STYLE");return X.textContent=K,X.setAttribute("data-hyper-frame-clone","true"),X}catch(K){console.error(`[CssBridge] Failed to fetch CSS from ${J}:`,K)}let Z=L.cloneNode(!0);try{let K=this.source?new URL(this.source.location.href):new URL(window.location.href),X=new URL(J,K).href;Z.setAttribute("href",X)}catch(K){console.error(`[CssBridge] Failed to convert URL to absolute: ${J}`,K)}return Z.setAttribute("data-hyper-frame-clone","true"),Z}}let $=L.cloneNode(!0);return $.setAttribute("data-hyper-frame-clone","true"),$}async fetchCssContent(L){let $=this.source?new URL(this.source.location.href):new URL(window.location.href),J=new URL(L,$).href,Q=await fetch(J);if(!Q.ok)throw Error(`HTTP ${Q.status}: ${Q.statusText}`);return await Q.text()}}class QL{_handlers=new Map;on(L,$){if(!this._handlers.has(L))this._handlers.set(L,new Set);return this._handlers.get(L).add($),()=>this.off(L,$)}once(L,$){let J=(Q)=>{this.off(L,J),$(Q)};return this.on(L,J)}off(L,$){let J=this._handlers.get(L);if(J)J.delete($)}emit(L){let $=this._handlers.get(L.type);if(!$)return;for(let J of $)try{J(L)}catch(Q){console.error(`[EventEmitter] Handler error for ${L.type}:`,Q)}}removeAllListeners(L){if(L)this._handlers.delete(L);else this._handlers.clear()}listenerCount(L){return this._handlers.get(L)?.size??0}}class ZL{_definitions;_values;_listeners;_proxy;constructor(L,$){this._definitions=L,this._listeners=new Set,this._values={};for(let[J,Q]of Object.entries(L))this._values[J]=Q.value;if($){for(let[J,Q]of Object.entries($))if(J in this._definitions)this._values[J]=this._validate(J,Q)}this._proxy=this._createProxy()}_createProxy(){let L=this;return new Proxy(this._values,{get($,J){return $[J]},set($,J,Q){if(!(J in L._definitions))return console.warn(`[ParamStore] Unknown parameter: ${J}`),!1;let Z=L._validate(J,Q),K=$[J];if(Z!==K)$[J]=Z,L._notify(J,Z,K);return!0},has($,J){return J in $},ownKeys($){return Object.keys($)},getOwnPropertyDescriptor($,J){if(J in $)return{enumerable:!0,configurable:!0,value:$[J]};return}})}_validate(L,$){let J=this._definitions[L];if(!J)return $;switch(J.type){case"number":{let Q=typeof $==="number"?$:parseFloat(String($));if(isNaN(Q))Q=J.value;if(J.min!==void 0)Q=Math.max(J.min,Q);if(J.max!==void 0)Q=Math.min(J.max,Q);if(J.step!==void 0)Q=Math.round(Q/J.step)*J.step;return Q}case"color":{let Q=String($);if(/^#[0-9A-Fa-f]{6}$/.test(Q))return Q;if(/^#[0-9A-Fa-f]{3}$/.test(Q))return Q;if(/^#[0-9A-Fa-f]{8}$/.test(Q))return Q;if(/^rgb\(/.test(Q))return Q;if(/^rgba\(/.test(Q))return Q;if(/^hsl\(/.test(Q))return Q;if(/^hsla\(/.test(Q))return Q;return J.value}case"boolean":if(typeof $==="boolean")return $;if($==="true"||$==="1")return!0;if($==="false"||$==="0")return!1;return Boolean($);case"string":return String($);case"select":{let Q=String($);return(J.options||[]).some((X)=>typeof X==="object"?X.value===Q:X===Q)?Q:J.value}case"point2d":{if(typeof $==="object"&&$!==null&&"x"in $&&"y"in $)return{x:Number($.x),y:Number($.y)};return J.value}case"point3d":{if(typeof $==="object"&&$!==null&&"x"in $&&"y"in $&&"z"in $)return{x:Number($.x),y:Number($.y),z:Number($.z)};return J.value}default:return $}}_notify(L,$,J){for(let Q of this._listeners)try{Q(L,$,J)}catch(Z){console.error("[ParamStore] Listener error:",Z)}}getProxy(){return this._proxy}getSnapshot(){return{...this._values}}getDefinitions(){return{...this._definitions}}set(L,$){this._proxy[L]=$}setMultiple(L){for(let[$,J]of Object.entries(L))this._proxy[$]=J}reset(){for(let[L,$]of Object.entries(this._definitions))this._proxy[L]=$.value}subscribe(L){return this._listeners.add(L),()=>this._listeners.delete(L)}addDefinition(L,$){this._definitions[L]=$,this._values[L]=$.value}}class KL{_byName=new Map;_byId=new Map;_onRegister=new Set;_onUnregister=new Set;register(L,$,J){if(this._byName.has(L))this.unregister(L);let Q=this._generateId(),Z={name:L,id:Q,object:$,metadata:J};this._byName.set(L,Z),this._byId.set(Q,Z);for(let K of this._onRegister)try{K(L,Q,$)}catch(X){console.error("[ObjectRegistry] onRegister callback error:",X)}return Q}unregister(L){let $=this._byName.get(L);if(!$)return!1;this._byName.delete(L),this._byId.delete($.id);for(let J of this._onUnregister)try{J(L)}catch(Q){console.error("[ObjectRegistry] onUnregister callback error:",Q)}return!0}findByName(L){return this._byName.get(L)?.object}findById(L){return this._byId.get(L)?.object}getInfo(L){return this._byName.get(L)}has(L){return this._byName.has(L)}getNames(){return Array.from(this._byName.keys())}getAll(){let L=new Map;for(let[$,J]of this._byName)L.set($,J.object);return L}query(L){let $=[];for(let J of this._byName.values())if(L(J))$.push(J);return $}findByType(L){return this.query(($)=>$.metadata?.type===L).map(($)=>$.object)}clear(){let L=Array.from(this._byName.keys());for(let $ of L)this.unregister($)}onRegister(L){return this._onRegister.add(L),()=>this._onRegister.delete(L)}onUnregister(L){return this._onUnregister.add(L),()=>this._onUnregister.delete(L)}get size(){return this._byName.size}_generateId(){return`obj_${Date.now()}_${Math.random().toString(36).slice(2,9)}`}}class GL{_isReady=!1;_isPlaying=!1;_isDestroyed=!1;_currentFrame=0;_paramStore;_events;_objects;_mount;_frameRate;_filename="capture";_cleanups=[];_userCleanup;_animationFrameId;_lastFrameTime=0;_resizeObserver;_captureHandler;constructor(L){if(this._mount=L.mount,this._frameRate=L.frameRate??60,L.background)this._mount.style.background=L.background;this._paramStore=new ZL(L.paramDefs??{},L.initialParams),this._events=new QL,this._objects=new KL,this._paramStore.subscribe(($,J,Q)=>{this._events.emit({type:"paramChange",timestamp:Date.now(),key:$,value:J,previousValue:Q})}),this._setupResizeObserver(),this._runSetup(L.setup,L.autoplay??!0)}get isReady(){return this._isReady}get isPlaying(){return this._isPlaying}get isDestroyed(){return this._isDestroyed}get currentFrame(){return this._currentFrame}get mount(){return this._mount}get params(){return this._paramStore.getProxy()}get events(){return this._events}get objects(){return this._objects}setParam(L,$){this._paramStore.set(L,$)}setParams(L){this._paramStore.setMultiple(L)}getParams(){return this._paramStore.getSnapshot()}getParamDefs(){return this._paramStore.getDefinitions()}resetParams(){this._paramStore.reset()}registerObject(L,$,J){return this._objects.register(L,$,J)}findObjectByName(L){return this._objects.findByName(L)}findObjectById(L){return this._objects.findById(L)}getAllObjects(){return this._objects.getAll()}play(){if(this._isPlaying||this._isDestroyed)return;this._isPlaying=!0,this._lastFrameTime=performance.now(),this._tick(),this._events.emit({type:"play",timestamp:Date.now()})}pause(){if(!this._isPlaying)return;if(this._isPlaying=!1,this._animationFrameId)cancelAnimationFrame(this._animationFrameId),this._animationFrameId=void 0;this._events.emit({type:"pause",timestamp:Date.now()})}toggle(){if(this._isPlaying)this.pause();else this.play()}on(L,$){return this._events.on(L,$)}once(L,$){return this._events.once(L,$)}off(L,$){this._events.off(L,$)}async captureImage(L="png"){if(this._captureHandler)return this._captureHandler(L);let $=this._mount.querySelector("canvas");if(!$)return console.warn("[Experience] No canvas found for capture"),null;return new Promise((J)=>{let Q=`image/${L}`,Z=L==="jpeg"?0.92:void 0;$.toBlob((K)=>J(K),Q,Z)})}getFilename(){return this._filename}addCleanup(L){if(typeof L==="function")this._cleanups.push(L)}destroy(){if(this._isDestroyed)return;if(this._isDestroyed=!0,this.pause(),this._userCleanup)try{this._userCleanup()}catch(L){console.error("[Experience] User cleanup error:",L)}while(this._cleanups.length>0){let L=this._cleanups.pop();if(L)try{L()}catch($){console.error("[Experience] Cleanup error:",$)}}this._resizeObserver?.disconnect(),this._objects.clear(),this._events.removeAllListeners(),this._events.emit({type:"destroyed",timestamp:Date.now()})}async _runSetup(L,$){try{let J=this._createContext(),Q=await L(J);if(typeof Q==="function")this._userCleanup=Q;if(this._isReady=!0,this._events.emit({type:"ready",timestamp:Date.now()}),$)this.play()}catch(J){console.error("[Experience] Setup error:",J),this._events.emit({type:"error",timestamp:Date.now(),error:J instanceof Error?J:Error(String(J))})}}_createContext(){return{mount:this._mount,params:this._paramStore.getProxy(),exports:this._createExportsApi(),environment:this._createEnvironmentApi(),registerObject:(L,$,J)=>this._objects.register(L,$,J),findObjectByName:(L)=>this._objects.findByName(L),experience:this}}_createExportsApi(){return{captureImage:(L)=>this.captureImage(L),setFilename:(L)=>{this._filename=L},registerCaptureHandler:(L)=>{this._captureHandler=L}}}_createEnvironmentApi(){return{window,document,onResize:(L)=>{let $=()=>{L(this._mount.clientWidth,this._mount.clientHeight)};$();let J=new ResizeObserver($);J.observe(this._mount);let Q=()=>J.disconnect();return this._cleanups.push(Q),Q},addCleanup:(L)=>this.addCleanup(L)}}_setupResizeObserver(){this._resizeObserver=new ResizeObserver((L)=>{for(let $ of L){let{width:J,height:Q}=$.contentRect;this._events.emit({type:"resize",timestamp:Date.now(),width:J,height:Q})}}),this._resizeObserver.observe(this._mount)}_tick(){if(!this._isPlaying)return;let L=performance.now(),$=L-this._lastFrameTime,J=1000/this._frameRate;if($>=J)this._currentFrame++,this._lastFrameTime=L-$%J,this._events.emit({type:"frame",timestamp:Date.now(),frame:this._currentFrame,deltaTime:$});this._animationFrameId=requestAnimationFrame(()=>this._tick())}}function BL(L={}){let $=L.documentRef??document;if(!$)throw Error("[hyper-frame] document is not available");let J=L.containerClassName||"hyper-frame",Q=L.target;if(Q instanceof HTMLElement)return Q.classList.add(J),{element:Q,createdInternally:!1};if(typeof Q==="string"&&Q.trim().length>0){let K=$.querySelector(Q);if(K)return K.classList.add(J),{element:K,createdInternally:!1};console.warn(`[hyper-frame] Could not find container for selector "${Q}", creating one instead.`)}let Z=$.createElement("div");return Z.classList.add(J),Z.classList.add("hyper-frame-container"),$.body.appendChild(Z),{element:Z,createdInternally:!0}}import{useState as vL,useCallback as hL}from"react";import{useCallback as l,useEffect as p,useMemo as WL,useRef as r,useState as XL}from"react";import{jsxDEV as m}from"react/jsx-dev-runtime";var UL=({definitions:L,options:$,onChange:J,onReady:Q})=>{let Z=r(null),K=r(null),X=r(null),Y=r(null),A=r(Q),[V,j]=XL(!1),[O,E]=XL(!1),[W,H]=XL(!1),D=WL(()=>{let G=[{type:"number",label:"Number",description:"Slider with min/max/step"},{type:"color",label:"Color",description:"Color picker"},{type:"boolean",label:"Toggle",description:"On/off switch"},{type:"string",label:"Text",description:"Single-line string"},{type:"text",label:"Textarea",description:"Multiline string"},{type:"select",label:"Select",description:"Dropdown options"},{type:"point2d",label:"Point 2D",description:"Vector {x,y}"},{type:"point3d",label:"Point 3D",description:"Vector {x,y,z}"},{type:"file",label:"File",description:"Upload image/audio/etc"}],q=$?.controlTypes;if(!q||q.length===0)return G;return G.filter((P)=>q.includes(P.type))},[$?.controlTypes]),y=l(()=>j(!1),[]),B=l(()=>{let G=Z.current,q=K.current;if(!G||!q)return;let P=G.getBoundingClientRect(),_=window.innerHeight-P.top-12,z=q.scrollHeight;H(z>_)},[]);p(()=>{let G=(q)=>{if(!(q.target instanceof HTMLElement))return;if(!q.target.closest(".hyper-frame-controls-panel"))y()};if(V)document.addEventListener("click",G);return()=>{document.removeEventListener("click",G)}},[V,y]),p(()=>{B()},[V,B,D.length]),p(()=>{let G=()=>B();return window.addEventListener("resize",G),()=>window.removeEventListener("resize",G)},[B]);let N=l((G)=>{let q=Math.random().toString(36).slice(2,6);return`${G}-control-${q}`},[]),F=l((G,q)=>{return[`Add a new ${G} control named "${q}" to the existing controls definitions.`,"Do NOT regenerate files; only patch the controls definitions object.",`Use sensible defaults for ${G} (e.g., 0/1 for numbers, "#00ff88" for colors).`,"Return a search-replace JSON patch that only touches the controls definitions section.","Keep all other code intact."].join(" ")},[]),I=l((G)=>{let q=N(G),P=F(G,q),_={source:"hypertool-controls",type:"ADD_CONTROL_REQUEST",controlType:G,name:q,prompt:P,timestamp:Date.now()};if($?.onAddControlRequest);if($?.onAddControlRequest?.({type:G,name:q,prompt:P}),window.dispatchEvent(new CustomEvent("hypertool:add-control-request",{detail:_})),window.parent&&window.parent!==window)window.parent.postMessage(_,"*")},[F,N,$]);return p(()=>{A.current=Q},[Q]),p(()=>{let G=(q)=>{let P=q;if(!P.detail||typeof P.detail.loading!=="boolean")return;E(Boolean(P.detail.loading))};return window.addEventListener("hypertool:add-control-status",G),()=>{window.removeEventListener("hypertool:add-control-status",G)}},[]),p(()=>{if(!X.current)return;let G=()=>B(),q=()=>B(),P=null,_=window;if(!_.hypertoolControls){console.warn("[ControlsPanel] hypertoolControls not available on window");return}try{let z=_.hypertoolControls.createControlPanel(L,{title:$?.title,position:$?.position,expanded:$?.expanded,container:X.current,onChange:(U,T)=>{if(J)J({key:T.key,value:T.value,event:T.event})}});if(Y.current=z,P=document.querySelector(".hyper-frame-controls-panel__add-btn"),P?.addEventListener("click",G),window.addEventListener("resize",q),B(),A.current)A.current(z)}catch(z){console.error("[ControlsPanel] Failed to create controls:",z)}return()=>{if(Y.current){if(typeof Y.current.dispose==="function")Y.current.dispose();else if(typeof Y.current.destroy==="function")Y.current.destroy();Y.current=null}P?.removeEventListener("click",G),window.removeEventListener("resize",q)}},[L,$,J]),m("div",{className:"hyper-frame-controls-panel",ref:Z,children:m("div",{ref:K,className:W?"hyper-frame-controls-panel__scroll hyper-frame-controls-panel__scroll--overflow":"hyper-frame-controls-panel__scroll",children:[m("div",{ref:X,className:"hyper-frame-controls-panel__pane"},void 0,!1,void 0,this),$?.showAddControlActions!==!1&&D.length>0&&m("div",{className:"hyper-frame-controls-panel__actions",children:[m("button",{type:"button",className:"hyper-frame-controls-panel__add-btn",onClick:()=>j((G)=>!G),"aria-expanded":V,"aria-haspopup":"true",disabled:O,children:[O?m("span",{className:"hyper-frame-controls-panel__spinner"},void 0,!1,void 0,this):"+",m("span",{children:O?"Adding…":"Add control"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),V&&m("div",{className:"hyper-frame-controls-panel__menu",role:"menu",children:D.map((G)=>m("button",{className:"hyper-frame-controls-panel__menu-item",onClick:()=>{E(!0),I(G.type),y()},role:"menuitem",children:[m("div",{className:"hyper-frame-controls-panel__menu-title",children:[G.label,": "]},void 0,!0,void 0,this),m("div",{className:"hyper-frame-controls-panel__menu-desc",children:G.description},void 0,!1,void 0,this)]},G.type,!0,void 0,this))},void 0,!1,void 0,this)]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)},void 0,!1,void 0,this)};import{useState as YL,useEffect as CL,useRef as AL,useCallback as i}from"react";import{createContext as yL,useContext as SL,useState as h,useEffect as bL,useCallback as d,useMemo as NL}from"react";import{jsxDEV as RL}from"react/jsx-dev-runtime";var OL=yL(null),o=()=>{let{innerWidth:L,innerHeight:$}=window;return{width:Math.max(100,Math.round(L)),height:Math.max(100,Math.round($))}},TL=({children:L})=>{let $=NL(()=>{let U=o(),T=window.devicePixelRatio||1,M=Math.round(U.width*T),w=Math.round(U.height*T);return{canvasWidth:Math.max(100,Math.round(M*0.9)),canvasHeight:Math.max(100,Math.round(w*0.9)),maxWidth:M,maxHeight:w}},[]),[J,Q]=h($.canvasWidth),[Z,K]=h($.canvasHeight),[X,Y]=h($.maxWidth),[A,V]=h($.maxHeight),[j,O]=h(!1),[E,W]=h(!1),[H,D]=h(null),[y,B]=h(null),N=NL(()=>{let U=window.devicePixelRatio||1,T=J/U,M=Z/U;if(T===0||M===0)return 1;let w=X/U,b=A/U,R=w/T,S=b/M;return Math.min(R,S,1)},[J,Z,X,A]);bL(()=>{let U=()=>{let T=o(),M=window.devicePixelRatio||1,w=Math.round(T.width*M),b=Math.round(T.height*M);if(Y(w),V(b),j)Q(w),K(b);else if(H!==null){let R,S;if(w/b>H)S=b,R=Math.round(S*H);else R=w,S=Math.round(R/H);Q(R),K(S)}};return window.addEventListener("resize",U),()=>window.removeEventListener("resize",U)},[j,H]);let F=d((U)=>{let T=Math.max(100,Math.round(U));Q(T),O(!1),D(null)},[]),I=d((U)=>{let T=Math.max(100,Math.round(U));K(T),O(!1),D(null)},[]),G=d((U,T)=>{let M=Math.max(100,Math.round(U)),w=Math.max(100,Math.round(T));Q(M),K(w),O(!1),D(null)},[]),q=d((U,T)=>{let M=o(),w=window.devicePixelRatio||1,b=U/T,R=Math.round(M.width*w),S=Math.round(M.height*w),x,v;if(R/S>b)v=S,x=Math.round(v*b);else x=R,v=Math.round(x/b);Q(x),K(v),D(b),O(!1)},[]),P=d((U)=>{let{width:T,height:M}=U;if(T>0&&M>0)console.log("[CanvasContext] Syncing with actual canvas:",{actual:{width:T,height:M},current:{width:J,height:Z}}),Q(T),K(M),O(!1),D(null)},[J,Z]),_=d(()=>{if(j&&y)Q(y.width),K(y.height),O(!1),B(null);else{B({width:J,height:Z});let U=o(),T=window.devicePixelRatio||1,M=Math.round(U.width*T),w=Math.round(U.height*T);Q(M),K(w),D(null),O(!0)}},[j,y,J,Z]),z={canvasWidth:J,canvasHeight:Z,maxCanvasWidth:X,maxCanvasHeight:A,scale:N,isFittedToScreen:j,isRecording:E,setIsRecording:W,setCanvasWidth:F,setCanvasHeight:I,setCanvasSize:G,setAspectRatio:q,syncWithCanvas:P,fitToScreen:_};return RL(OL.Provider,{value:z,children:L},void 0,!1,void 0,this)},u=()=>{let L=SL(OL);if(!L)throw Error("useCanvas must be used within a CanvasProvider");return L};import{jsxDEV as f}from"react/jsx-dev-runtime";var FL=({getContainer:L,filename:$="hyperframe-export",useCanvasCapture:J=!0})=>{let{setIsRecording:Q}=u(),[Z,K]=YL(!1),[X,Y]=YL(!1),[A,V]=YL(!1),j=AL(null),O=AL([]);CL(()=>{let B=()=>{let F=L();if(F&&J){if(F.querySelector("canvas"))return K(!0),Y(!0),!0}return!1};if(B())return;let N=setInterval(()=>{if(B())clearInterval(N)},100);return()=>clearInterval(N)},[L,J]);let E=i((B,N)=>{let F=URL.createObjectURL(B),I=document.createElement("a");I.href=F,I.download=N,I.rel="noopener",I.style.display="none",document.body.appendChild(I),I.click(),document.body.removeChild(I),URL.revokeObjectURL(F)},[]),W=i(async()=>{try{let B=L();if(!B)throw Error("Container not available.");let N=B.querySelector("canvas");if(!N||!(N instanceof HTMLCanvasElement))throw Error("No canvas element available for capture.");let F=await new Promise((I,G)=>{N.toBlob((q)=>{if(q)I(q);else G(Error("Canvas capture returned an empty blob."))})});if(F)E(F,`${$}.png`),console.log("PNG captured")}catch(B){console.error("[ExportWidget] Failed to capture image:",B)}},[L,$,E]),H=i(()=>{if(!j.current){console.warn("[ExportWidget] No active recorder to stop");return}console.log("Stopping recording"),j.current.stop()},[]),D=i(async()=>{try{let B=L();if(!B)throw Error("Container not available.");let N=B.querySelector("canvas");if(!N||!(N instanceof HTMLCanvasElement))throw Error("No canvas element available for recording.");if(typeof N.captureStream!=="function")throw Error("Canvas captureStream API is not supported in this browser.");let F=N.captureStream(60),G=[{mimeType:"video/mp4;codecs=avc1",extension:"mp4"},{mimeType:"video/mp4;codecs=h264",extension:"mp4"},{mimeType:"video/mp4;codecs=avc1.42E01E",extension:"mp4"},{mimeType:"video/mp4",extension:"mp4"},{mimeType:"video/webm;codecs=h264",extension:"webm"},{mimeType:"video/webm;codecs=vp9",extension:"webm"},{mimeType:"video/webm;codecs=vp8",extension:"webm"},{mimeType:"video/webm",extension:"webm"}].find((z)=>MediaRecorder.isTypeSupported(z.mimeType));if(!G)G={mimeType:"",extension:"webm"};console.log("[ExportWidget] Using video format:",G.mimeType||"browser default");let q={videoBitsPerSecond:5000000};if(G.mimeType)q.mimeType=G.mimeType;let P=new MediaRecorder(F,q),_=[];O.current=_,P.addEventListener("dataavailable",(z)=>{if(z.data?.size)_.push(z.data)}),P.addEventListener("stop",()=>{let z=G.mimeType||P.mimeType||"video/webm",U=new Blob(_,{type:z});console.log("[ExportWidget] Recording complete:",{size:U.size,type:U.type,chunks:_.length}),E(U,`${$}.${G.extension}`),F.getTracks().forEach((T)=>T.stop()),V(!1),Q(!1),j.current=null,O.current=[]}),P.start(),j.current=P,V(!0),Q(!0),console.log("Recording started")}catch(B){console.error("[ExportWidget] Failed to start recording:",B),V(!1),Q(!1),j.current=null}},[L,$,E,Q]),y=i(async()=>{if(A)H();else await D()},[A,H,D]);return f("div",{className:"export-widget-container absolute top-0 left-0 py-2 px-2 z-[9999]",children:f("div",{className:"flex items-center gap-2",children:[f("button",{type:"button",className:`inline-flex items-center gap-2 rounded-lg border border-border bg-background px-2 py-1 text-sm text-text transition hover:bg-muted/80 whitespace-nowrap ${!Z?"opacity-60 cursor-not-allowed":""}`,onClick:W,disabled:!Z,title:"Screenshot",children:[f("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[f("path",{d:"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"},void 0,!1,void 0,this),f("circle",{cx:"12",cy:"13",r:"3"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),f("span",{children:"Screenshot"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),f("button",{type:"button",className:`inline-flex items-center gap-2 rounded-lg border transition hover:bg-muted/80 whitespace-nowrap px-2 py-1 text-sm ${A?"bg-red-500/20 text-red-400 border-red-500/30":"bg-background text-text border-border"} ${!X?"opacity-60 cursor-not-allowed":""}`,onClick:y,disabled:!X,title:A?"Stop Recording":"Record Video",children:[f("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[f("path",{d:"m22 8-6 4 6 4V8Z"},void 0,!1,void 0,this),f("rect",{x:"2",y:"6",width:"14",height:"12",rx:"2",ry:"2"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),f("span",{children:A?"Stop":"Rec"},void 0,!1,void 0,this)]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)},void 0,!1,void 0,this)};import{useRef as IL,useEffect as _L,useState as gL}from"react";import{useState as s,useEffect as PL,useCallback as fL,useRef as xL}from"react";import{jsxDEV as g,Fragment as mL}from"react/jsx-dev-runtime";var ML=({canvasWidth:L,canvasHeight:$,scale:J,onResize:Q})=>{let{isRecording:Z}=u(),[K,X]=s(!1),[Y,A]=s(null),[V,j]=s({x:0,y:0}),[O,E]=s({width:0,height:0}),W=window.devicePixelRatio||1,H=xL(J),D=1;PL(()=>{H.current=J},[J]);let y=fL((N,F)=>{if(Z)return;F.preventDefault(),F.stopPropagation(),X(!0),A(N),j({x:F.clientX,y:F.clientY}),E({width:L,height:$})},[L,$,Z]);PL(()=>{if(!K||!Y)return;let N=(G)=>{let q=G.clientX-V.x,P=G.clientY-V.y,_=H.current||1,z=Y.length===2,U=Y==="e"||Y==="w",T=Y==="n"||Y==="s",M=O.width,w=O.height,b=Y.includes("e")?q*W/_:Y.includes("w")?-q*W/_:0,R=Y.includes("s")?P*W/_:Y.includes("n")?-P*W/_:0;if(M=O.width+b,w=O.height+R,G.shiftKey){let S=Math.max(1,O.width),x=Math.max(1,O.height),v=b/S,t=R/x,e=(C,LL)=>{if(!Number.isFinite(C)||C<=0)return 1/LL;return C};if(U&&!T){let C=e(1+v,S);M=S*C,w=x*C}else if(T&&!U){let C=e(1+t,x);M=S*C,w=x*C}else if(z){let C=Math.abs(v)>=Math.abs(t),LL=C?v:t,HL=C?S:x,qL=e(1+LL,HL);M=S*qL,w=x*qL}}M=Math.max(1,M),w=Math.max(1,w),Q(M,w)},F=()=>{X(!1),A(null)},I=()=>{X(!1),A(null)};return document.addEventListener("mousemove",N),document.addEventListener("mouseup",F),document.addEventListener("mouseleave",I),()=>{document.removeEventListener("mousemove",N),document.removeEventListener("mouseup",F),document.removeEventListener("mouseleave",I)}},[K,Y,V,O,W,Q]);let B=({handle:N,className:F})=>g("div",{className:`absolute ${F} group ${Z?"cursor-not-allowed opacity-0":""}`,onMouseDown:(I)=>y(N,I),style:{zIndex:10},title:Z?"Canvas resizing is locked during recording":void 0,children:g("div",{className:`w-full h-full transition-opacity bg-accent/20 ${Z?"opacity-0":"opacity-0 group-hover:opacity-100"}`},void 0,!1,void 0,this)},void 0,!1,void 0,this);return g(mL,{children:[g(B,{handle:"nw",className:"top-0 left-0 w-3 h-3 cursor-nw-resize"},void 0,!1,void 0,this),g(B,{handle:"ne",className:"top-0 right-0 w-3 h-3 cursor-ne-resize"},void 0,!1,void 0,this),g(B,{handle:"sw",className:"bottom-0 left-0 w-3 h-3 cursor-sw-resize"},void 0,!1,void 0,this),g(B,{handle:"se",className:"bottom-0 right-0 w-3 h-3 cursor-se-resize"},void 0,!1,void 0,this),g(B,{handle:"n",className:"top-0 left-3 right-3 h-1 cursor-n-resize"},void 0,!1,void 0,this),g(B,{handle:"s",className:"bottom-0 left-3 right-3 h-1 cursor-s-resize"},void 0,!1,void 0,this),g(B,{handle:"w",className:"left-0 top-3 bottom-3 w-1 cursor-w-resize"},void 0,!1,void 0,this),g(B,{handle:"e",className:"right-0 top-3 bottom-3 w-1 cursor-e-resize"},void 0,!1,void 0,this)]},void 0,!0,void 0,this)};import{jsxDEV as n}from"react/jsx-dev-runtime";var zL=({onReady:L})=>{let $=IL(null),J=IL(null),{canvasWidth:Q,canvasHeight:Z,scale:K,setCanvasSize:X,syncWithCanvas:Y}=u(),[A,V]=gL(!1),j=window.devicePixelRatio||1,O=Math.max(1,Math.round(Q/j)),E=Math.max(1,Math.round(Z/j)),W=Math.max(1,Math.round(O*K)),H=Math.max(1,Math.round(E*K));return _L(()=>{if($.current)L($.current)},[L]),_L(()=>{if(!$.current||A)return;let D=()=>{let N=$.current?.querySelector("canvas");if(N&&N instanceof HTMLCanvasElement){let{width:F,height:I}=N;if(F>100&&I>100){let G=Math.abs(F-Q),q=Math.abs(I-Z);if(G>Q*0.1||q>Z*0.1)console.log("[SandboxContainer] Canvas detected, syncing dimensions"),Y(N),V(!0)}}};D();let y=setInterval(D,100),B=setTimeout(()=>{clearInterval(y),V(!0)},3000);return()=>{clearInterval(y),clearTimeout(B)}},[$,Q,Z,A,Y]),_L(()=>{let D=new Event("resize");window.dispatchEvent(D),console.log("[SandboxContainer] Dispatched resize event:",{canvas:{width:Q,height:Z},container:{width:O,height:E},display:{width:W,height:H},scale:K})},[Q,Z,O,E,W,H,K]),n("div",{className:"hyper-frame-sandbox-wrapper absolute inset-0 flex items-center justify-center pointer-events-none",children:n("div",{ref:J,className:"hyper-frame-sandbox-display-container relative pointer-events-auto",style:{width:`${W}px`,height:`${H}px`,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)"},children:[n(ML,{canvasWidth:Q,canvasHeight:Z,scale:K,onResize:X},void 0,!1,void 0,this),n("div",{ref:$,className:"hyper-frame-sandbox-container absolute top-0 left-0 flex items-center justify-center",style:{width:`${O}px`,height:`${E}px`,overflow:"hidden",transform:`scale(${K})`,transformOrigin:"top left"}},void 0,!1,void 0,this)]},void 0,!0,void 0,this)},void 0,!1,void 0,this)};import{useState as VL,useEffect as kL}from"react";import{jsxDEV as k}from"react/jsx-dev-runtime";var wL=[{label:"16:9 Landscape",width:1920,height:1080},{label:"9:16 Portrait",width:1080,height:1920},{label:"4:3 Standard",width:1024,height:768},{label:"1:1 Square",width:1080,height:1080},{label:"21:9 Ultrawide",width:2560,height:1080},{label:"3:2 Classic",width:1440,height:960},{label:"---",width:0,height:0},{label:"iPhone 15 Pro",width:1179,height:2556},{label:"iPhone 15 Pro Max",width:1290,height:2796},{label:"iPhone SE",width:750,height:1334},{label:"iPhone 15",width:1170,height:2532},{label:"---",width:0,height:0},{label:'MacBook Air 13"',width:2560,height:1664},{label:'MacBook Pro 14"',width:3024,height:1964},{label:'MacBook Pro 16"',width:3456,height:2234},{label:'iMac 24"',width:4480,height:2520},{label:"Studio Display",width:5120,height:2880}],jL=()=>{let{canvasWidth:L,canvasHeight:$,scale:J,isRecording:Q,setCanvasWidth:Z,setCanvasHeight:K,setAspectRatio:X,fitToScreen:Y}=u(),[A,V]=VL(L.toString()),[j,O]=VL($.toString());kL(()=>{V(L.toString())},[L]),kL(()=>{O($.toString())},[$]);let E=()=>{if(Q)return;let _=Math.round(parseFloat(A));if(!isNaN(_)&&_>=100)Z(_),V(_.toString());else V(L.toString())},W=()=>{if(Q)return;let _=Math.round(parseFloat(j));if(!isNaN(_)&&_>=100)K(_),O(_.toString());else O($.toString())},H=(_)=>{if(_.key==="Enter")E(),_.currentTarget.blur()},D=(_)=>{if(_.key==="Enter")W(),_.currentTarget.blur()},y=(_)=>{if(Q)return;let z=wL.find((U)=>U.label===_.target.value);if(z&&z.width>0&&z.height>0)X(z.width,z.height)},B=window.devicePixelRatio||1,N=Math.round(L/B*J),F=Math.round($/B*J),I=`${L}×${$}`,G=`${N}×${F}`,q=J<1,P=Math.round(J*100);return k("div",{className:"canvas-size-widget-container absolute top-0 center px-2 py-2 z-[9999] flex items-center gap-2",children:[k("select",{onChange:y,className:`rounded border border-border w-[90px] bg-background px-2 py-1 text-sm text-text focus:border-accent focus:outline-none ${Q?"opacity-50 cursor-not-allowed":"cursor-pointer"}`,defaultValue:"",disabled:Q,title:Q?"Canvas resizing is locked during recording":"Choose a preset size",children:[k("option",{value:"",disabled:!0,children:"Presets"},void 0,!1,void 0,this),wL.map((_,z)=>_.label==="---"?k("option",{disabled:!0,children:"────────"},z,!1,void 0,this):k("option",{value:_.label,children:_.label},z,!1,void 0,this))]},void 0,!0,void 0,this),k("div",{className:"flex items-center gap-1",children:[k("label",{className:"text-sm text-accent",children:"W:"},void 0,!1,void 0,this),k("input",{value:A,onChange:(_)=>V(_.target.value),onBlur:E,onKeyDown:H,className:`rounded border border-border bg-background px-2 py-1 text-sm text-text focus:border-accent focus:outline-none ${Q?"opacity-50 cursor-not-allowed":""}`,style:{width:`${Math.max(A.length*8+16,55)}px`},min:"60",step:"1",disabled:Q,title:Q?"Canvas resizing is locked during recording":"Canvas width"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),k("div",{className:"flex items-center gap-1",children:[k("label",{className:"text-sm text-accent",children:"H:"},void 0,!1,void 0,this),k("input",{value:j,onChange:(_)=>O(_.target.value),onBlur:W,onKeyDown:D,className:`rounded border border-border bg-background px-2 py-1 text-sm text-text focus:border-accent focus:outline-none ${Q?"opacity-50 cursor-not-allowed":""}`,style:{width:`${Math.max(j.length*8+16,55)}px`},min:"60",step:"1",disabled:Q,title:Q?"Canvas resizing is locked during recording":"Canvas height"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),k("div",{className:"flex items-center gap-1.5 px-2 py-1 rounded border border-border bg-background/50",title:q?`Canvas: ${I} → Display: ${G} (scaled to ${P}%)`:`Canvas: ${I} = Display: ${G} (no scaling)`,style:{display:q?"flex":"none"},children:[k("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:q?"text-accent":"text-muted",children:[k("circle",{cx:"11",cy:"11",r:"8"},void 0,!1,void 0,this),k("path",{d:"m21 21-4.3-4.3"},void 0,!1,void 0,this),k("line",{x1:"11",y1:"8",x2:"11",y2:"14"},void 0,!1,void 0,this),k("line",{x1:"8",y1:"11",x2:"14",y2:"11"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),k("div",{className:"flex items-center gap-1",children:k("span",{className:`text-xs ${q?"text-accent":"text-muted"}`,children:[P,"%"]},void 0,!0,void 0,this)},void 0,!1,void 0,this)]},void 0,!0,void 0,this),k("button",{type:"button",className:`inline-flex items-center gap-1 h-[30px] rounded-lg border border-border bg-background px-3 py-2 text-sm text-text transition whitespace-nowrap ${Q?"opacity-50 cursor-not-allowed":"hover:bg-muted/80"}`,onClick:Y,disabled:Q,title:Q?"Canvas resizing is locked during recording":"Fit to screen",children:k("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[k("path",{d:"M8 3H5a2 2 0 0 0-2 2v3"},void 0,!1,void 0,this),k("path",{d:"M21 8V5a2 2 0 0 0-2-2h-3"},void 0,!1,void 0,this),k("path",{d:"M3 16v3a2 2 0 0 0 2 2h3"},void 0,!1,void 0,this),k("path",{d:"M16 21h3a2 2 0 0 0 2-2v-3"},void 0,!1,void 0,this)]},void 0,!0,void 0,this)},void 0,!1,void 0,this)]},void 0,!0,void 0,this)};import{jsxDEV as c}from"react/jsx-dev-runtime";var DL=({onContainerReady:L,controls:$,exportWidget:J})=>{let[Q,Z]=vL(null),K=hL((X)=>{Z(X),L(X)},[L]);return c(TL,{children:c("div",{className:"hyper-container flex flex-col items-center justify-center",children:[J&&J.enabled&&c(FL,{getContainer:()=>Q,filename:J.filename,useCanvasCapture:J.useCanvasCapture},void 0,!1,void 0,this),c(jL,{},void 0,!1,void 0,this),c(zL,{onReady:K},void 0,!1,void 0,this),$&&c(UL,{definitions:$.definitions,options:$.options,onChange:$.onChange,onReady:$.onReady},void 0,!1,void 0,this)]},void 0,!0,void 0,this)},void 0,!1,void 0,this)};class a{cssBridge=null;config;currentExperience=null;constructor(L={}){this.config=L,this.setupMessageHandlers()}setupMessageHandlers(){if(typeof window>"u")return;window.addEventListener("message",(L)=>{let{type:$,data:J}=L.data||{};switch($){case"CAPTURE_SCREENSHOT":this.handleCaptureScreenshot(L.data?.requestId);break;case"HYPERTOOL_SET_PARAMS":this.handleSetParams(J?.params);break;case"HYPERTOOL_GET_PARAMS":this.handleGetParams();break}})}handleCaptureScreenshot(L){let $=null;if(this.currentExperience)$=this.currentExperience.mount.querySelector("canvas");if(!$){let J=document.querySelectorAll("canvas");if(J.length>0){let Q=J[0],Z=Q.width*Q.height;J.forEach((K)=>{let X=K,Y=X.width*X.height;if(Y>Z)Q=X,Z=Y}),$=Q}}if(!$){this.sendToParent("SCREENSHOT_RESULT",{requestId:L,noCanvas:!0,error:"No canvas found"});return}try{let J=this.createOptimizedThumbnail($,400,0.8);this.sendToParent("SCREENSHOT_RESULT",{requestId:L,dataUrl:J})}catch(J){this.sendToParent("SCREENSHOT_RESULT",{requestId:L,error:J instanceof Error?J.message:"Unknown error"})}}handleSetParams(L){if(!L||!this.currentExperience)return;this.currentExperience.setParams(L)}handleGetParams(){let L=this.currentExperience?.getParams()??{};this.sendToParent("HYPERTOOL_PARAMS_RESPONSE",{params:L})}sendToParent(L,$){window.parent.postMessage({type:L,...$},"*")}notifyParamChange(L){let $={};for(let[J,Q]of Object.entries(L))if(Q===null||typeof Q==="string"||typeof Q==="number"||typeof Q==="boolean")$[J]=Q;else if(typeof Q==="object")try{$[J]=JSON.parse(JSON.stringify(Q))}catch{}window.parent.postMessage({type:"HYPERTOOL_PARAMS_CHANGED",source:"hypertool-iframe",data:{params:$}},"*")}createOptimizedThumbnail(L,$,J){let{width:Q,height:Z}=L,K=Q,X=Z;if(Q>$){let V=$/Q;K=$,X=Math.round(Z*V)}let Y=document.createElement("canvas");Y.width=K,Y.height=X;let A=Y.getContext("2d");if(!A)return L.toDataURL("image/jpeg",J);return A.imageSmoothingEnabled=!0,A.imageSmoothingQuality="high",A.drawImage(L,0,0,K,X),Y.toDataURL("image/jpeg",J)}mirrorCss(){if(this.cssBridge)return;this.cssBridge=new JL({mirror:this.config.mirrorCss!==!1}),this.cssBridge.start()}async createSandbox(L){if(this.config.mirrorCss!==!1&&L.mirrorCss!==!1)this.mirrorCss();let $=await this.createReactMount(L),J=new GL({mount:$.sandboxContainer,paramDefs:L.controls?.definitions,autoplay:!0,setup:(Z)=>this.wrapUserSetup(L.setup,Z,L)});if(this.currentExperience=J,J.on("paramChange",()=>{this.notifyParamChange(J.getParams())}),L.controls?.definitions)this.wireControlsToExperience(J,$);if(typeof globalThis.__hypertool_registerParams==="function")globalThis.__hypertool_registerParams(J.params);return this.notifyParamChange(J.getParams()),{container:$.sandboxContainer,controls:null,params:J.params,destroy:()=>{J.destroy(),$.destroy()}}}wrapUserSetup(L,$,J){let Q={mount:$.mount,params:$.params,controls:null,exports:{registerImageCapture:()=>{},registerVideoCapture:()=>{},setFilename:$.exports.setFilename,setVisible:()=>{},useDefaultCanvasCapture:()=>{},destroy:()=>{}},runtime:this,environment:{window:$.environment.window,document:$.environment.document,addCleanup:$.environment.addCleanup,onResize:(Z,K)=>{$.environment.window.addEventListener("resize",Z,K);let X=()=>$.environment.window.removeEventListener("resize",Z,K);return $.environment.addCleanup(X),X}}};return L(Q)}wireControlsToExperience(L,$){}async createReactMount(L){let $=L.mount,J=BL({target:$?.target,containerClassName:$?.containerClassName}),Q=pL(J.element),Z=L.controls?.definitions?{definitions:L.controls.definitions,options:L.controls.options,onChange:(Y)=>{if(this.currentExperience&&Y?.key!==void 0)this.currentExperience.setParam(Y.key,Y.value);L.controls?.onChange?.(Y,{})},onReady:(Y)=>{if(this.currentExperience){let A=Y.params;this.currentExperience.setParams(A)}if(typeof globalThis.__hypertool_registerControls==="function")globalThis.__hypertool_registerControls(Y)}}:null,X=await new Promise((Y)=>{Q.render(uL.createElement(DL,{onContainerReady:Y,controls:Z,exportWidget:{enabled:L.exportWidget?.enabled!==!1,filename:L.exportWidget?.filename,position:L.exportWidget?.position,useCanvasCapture:L.exportWidget?.useCanvasCapture!==!1}}))});if(typeof $?.onReady==="function")$.onReady({container:X});return{sandboxContainer:X,destroy:()=>{if(Q.unmount(),J.createdInternally)J.element.remove()}}}}var dL={mirrorCss:!0},EL=new a(dL);function l$(L){return new a(L)}function r$(L){return EL.createSandbox(L)}function i$(){EL.mirrorCss()}export{EL as runtime,i$ as mirrorCss,r$ as createSandbox,l$ as configureRuntime};
-
-//# debugId=0C88A8B0F323342264756E2164756E21