@hypertools/sdk 0.2.0 → 0.3.0

package/dist/export/index.js

@@ -1,800 +0,0 @@
-import{createRequire as T}from"node:module";var v=Object.create;var{getPrototypeOf:S,defineProperty:G,getOwnPropertyNames:j}=Object;var D=Object.prototype.hasOwnProperty;var _=(q,z,A)=>{A=q!=null?v(S(q)):{};let B=z||!q||!q.__esModule?G(A,"default",{value:q,enumerable:!0}):A;for(let M of j(q))if(!D.call(B,M))G(B,M,{get:()=>q[M],enumerable:!0});return B};var $=T(import.meta.url);async function P(q){let z;try{z=await import("esbuild")}catch{throw Error("esbuild is not available. This function is meant to run server-side.")}let{mkdtemp:A,writeFile:B,readFile:M,rm:R,mkdir:O}=await import("fs/promises"),{tmpdir:L}=await import("os"),{join:K,dirname:U}=await import("path"),Q=await A(K(L(),"hypertool-bundle-"));try{if(q.files)for(let[Y,F]of Object.entries(q.files)){let W=K(Q,Y.replace(/^\//,"")),J=U(W);await O(J,{recursive:!0}),await B(W,F)}let X;if(typeof q.entry==="string")X=K(Q,q.entry.replace(/^\//,""));else{let Y=q.entry.filename??"entry.ts";X=K(Q,Y),await B(X,q.entry.code)}let Z=await z.build({entryPoints:[X],bundle:!0,outfile:K(Q,"out.js"),platform:q.target==="node"?"node":"browser",format:q.format??"iife",minify:q.minify??!0,sourcemap:q.sourcemap?"external":!1,globalName:q.globalName,external:q.external,define:q.define,write:!0,metafile:!0}),I=await M(K(Q,"out.js"),"utf-8"),V;if(q.sourcemap)try{V=await M(K(Q,"out.js.map"),"utf-8")}catch{}return{code:I,map:V,warnings:Z.warnings.map((Y)=>Y.text),size:Buffer.byteLength(I,"utf-8")}}finally{await R(Q,{recursive:!0,force:!0})}}function k(q){if(!q.match(/export\s+(?:const|let|var)\s+(?:paramDefs|controlDefinitions)\s*=\s*(\{[\s\S]*?\});?/))return null;try{return null}catch{return null}}function w(q){return`
-${q}
-
-// Expose setup function globally for web component
-if (typeof setup === 'function') {
-  window.__hypertool_setup__ = setup;
-}
-if (typeof paramDefs !== 'undefined') {
-  window.__hypertool_paramDefs__ = paramDefs;
-}
-`}function C(q){return q.replace(/\\/g,"\\\\").replace(/`/g,"\\`").replace(/\$/g,"\\$").replace(/<\/script>/gi,"<\\/script>")}function x(q){let{tagName:z,className:A,bundledCode:B,paramDefs:M,currentParams:R={},showControls:O=!1,background:L="transparent"}=q,K=JSON.stringify(R).replace(/</g,"\\u003c").replace(/>/g,"\\u003e"),U=JSON.stringify(M).replace(/</g,"\\u003c").replace(/>/g,"\\u003e"),Q=O?`
-    // Load Tweakpane for controls
-    async function loadTweakpane() {
-      if (window.Tweakpane) return window.Tweakpane;
-      return new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.src = 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.5/dist/tweakpane.min.js';
-        script.onload = () => resolve(window.Tweakpane);
-        script.onerror = reject;
-        document.head.appendChild(script);
-      });
-    }
-
-    async function createControls(params, defs, container) {
-      try {
-        const Tweakpane = await loadTweakpane();
-        const pane = new Tweakpane.Pane({
-          title: '${A} Controls',
-          container,
-        });
-
-        for (const [key, def] of Object.entries(defs)) {
-          const config = { label: def.label || key };
-          if (def.type === 'number') {
-            if (def.min !== undefined) config.min = def.min;
-            if (def.max !== undefined) config.max = def.max;
-            if (def.step !== undefined) config.step = def.step;
-          }
-          if (def.type === 'select' && def.options) {
-            config.options = def.options.reduce((acc, opt) => {
-              const val = typeof opt === 'object' ? opt.value : opt;
-              const label = typeof opt === 'object' ? opt.label : opt;
-              acc[label] = val;
-              return acc;
-            }, {});
-          }
-          try {
-            pane.addBinding(params, key, config);
-          } catch (e) {
-            console.warn('Failed to add control:', key, e);
-          }
-        }
-
-        return pane;
-      } catch (e) {
-        console.warn('Failed to load Tweakpane:', e);
-        return null;
-      }
-    }
-    `:"";return`
-/**
- * ${A} Web Component
- * Generated by HyperTool SDK
- */
-
-(function() {
-  'use strict';
-
-  const __PARAMS__ = ${K};
-  const __PARAM_DEFS__ = ${U};
-  const __SHOW_CONTROLS__ = ${O};
-  const __BACKGROUND__ = '${L}';
-
-  ${Q}
-
-  class ${A}Element extends HTMLElement {
-    #mount = null;
-    #params = null;
-    #cleanup = null;
-    #resizeObserver = null;
-    #pane = null;
-    #isReady = false;
-
-    constructor() {
-      super();
-      this.attachShadow({ mode: 'open' });
-    }
-
-    static get observedAttributes() {
-      return ['autoplay', 'background', ...Object.keys(__PARAM_DEFS__)];
-    }
-
-    connectedCallback() {
-      this.#render();
-      this.#initialize();
-    }
-
-    disconnectedCallback() {
-      this.#destroy();
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-      if (oldValue === newValue) return;
-
-      if (name === 'background') {
-        if (this.#mount) {
-          this.#mount.style.background = newValue || __BACKGROUND__;
-        }
-        return;
-      }
-
-      if (name in __PARAM_DEFS__ && this.#params) {
-        this.#params[name] = this.#parseAttribute(newValue, __PARAM_DEFS__[name].type);
-      }
-    }
-
-    #render() {
-      this.shadowRoot.innerHTML = \`
-        <style>
-          :host {
-            display: block;
-            width: 100%;
-            height: 100%;
-            position: relative;
-          }
-          .mount {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            overflow: hidden;
-            background: \${__BACKGROUND__};
-          }
-          .controls-container {
-            position: absolute;
-            top: 8px;
-            right: 8px;
-            z-index: 1000;
-          }
-        </style>
-        <div class="mount"></div>
-        \${__SHOW_CONTROLS__ ? '<div class="controls-container"></div>' : ''}
-      \`;
-
-      this.#mount = this.shadowRoot.querySelector('.mount');
-    }
-
-    async #initialize() {
-      // Initialize params from defaults + attributes
-      this.#params = { ...__PARAMS__ };
-
-      for (const [key, def] of Object.entries(__PARAM_DEFS__)) {
-        const attrValue = this.getAttribute(key);
-        if (attrValue !== null) {
-          this.#params[key] = this.#parseAttribute(attrValue, def.type);
-        }
-      }
-
-      // Create reactive proxy
-      const self = this;
-      this.#params = new Proxy(this.#params, {
-        set(target, prop, value) {
-          const previous = target[prop];
-          target[prop] = value;
-          if (previous !== value) {
-            self.dispatchEvent(new CustomEvent('paramchange', {
-              detail: { key: prop, value, previousValue: previous },
-              bubbles: true,
-            }));
-          }
-          return true;
-        }
-      });
-
-      // Setup resize observer
-      this.#resizeObserver = new ResizeObserver(() => {
-        this.dispatchEvent(new CustomEvent('resize', {
-          detail: {
-            width: this.#mount.clientWidth,
-            height: this.#mount.clientHeight
-          },
-          bubbles: true,
-        }));
-      });
-      this.#resizeObserver.observe(this.#mount);
-
-      // Setup controls if enabled
-      if (__SHOW_CONTROLS__) {
-        const controlsContainer = this.shadowRoot.querySelector('.controls-container');
-        if (controlsContainer && typeof createControls === 'function') {
-          this.#pane = await createControls(this.#params, __PARAM_DEFS__, controlsContainer);
-        }
-      }
-
-      // Run experience setup
-      try {
-        const context = {
-          mount: this.#mount,
-          params: this.#params,
-          exports: {
-            captureImage: (format) => this.captureImage(format),
-            setFilename: () => {},
-            useDefaultCanvasCapture: () => {},
-          },
-          environment: {
-            window,
-            document,
-            onResize: (cb) => {
-              const handler = () => cb(this.#mount.clientWidth, this.#mount.clientHeight);
-              handler();
-              const ro = new ResizeObserver(handler);
-              ro.observe(this.#mount);
-              return () => ro.disconnect();
-            },
-          },
-          registerObject: () => {},
-        };
-
-        // Execute bundled code
-        ${C(B)}
-
-        // Call setup if defined
-        if (typeof window.__hypertool_setup__ === 'function') {
-          this.#cleanup = await window.__hypertool_setup__(context);
-        } else if (typeof setup === 'function') {
-          this.#cleanup = await setup(context);
-        }
-
-        this.#isReady = true;
-        this.dispatchEvent(new CustomEvent('ready', { bubbles: true }));
-
-        // Autoplay by default
-        if (this.getAttribute('autoplay') !== 'false') {
-          this.play();
-        }
-      } catch (error) {
-        console.error('[${A}] Setup error:', error);
-        this.dispatchEvent(new CustomEvent('error', {
-          detail: { error },
-          bubbles: true,
-        }));
-      }
-    }
-
-    #destroy() {
-      if (this.#cleanup && typeof this.#cleanup === 'function') {
-        try {
-          this.#cleanup();
-        } catch (e) {
-          console.error('[${A}] Cleanup error:', e);
-        }
-      }
-      this.#resizeObserver?.disconnect();
-      this.#pane?.dispose();
-      this.#cleanup = null;
-      this.#params = null;
-      this.#isReady = false;
-    }
-
-    #parseAttribute(value, type) {
-      switch (type) {
-        case 'number':
-          return parseFloat(value);
-        case 'boolean':
-          return value === 'true' || value === '';
-        case 'color':
-          return value;
-        default:
-          return value;
-      }
-    }
-
-    // Public API
-    get isReady() { return this.#isReady; }
-
-    setParam(key, value) {
-      if (this.#params && key in __PARAM_DEFS__) {
-        this.#params[key] = value;
-        this.#pane?.refresh();
-      }
-    }
-
-    setParams(params) {
-      if (!this.#params) return;
-      for (const [key, value] of Object.entries(params)) {
-        if (key in __PARAM_DEFS__) {
-          this.#params[key] = value;
-        }
-      }
-      this.#pane?.refresh();
-    }
-
-    getParams() {
-      return this.#params ? { ...this.#params } : {};
-    }
-
-    getParamDefs() {
-      return __PARAM_DEFS__;
-    }
-
-    async captureImage(format = 'png') {
-      const canvas = this.#mount?.querySelector('canvas');
-      if (!canvas) return null;
-
-      return new Promise((resolve) => {
-        canvas.toBlob(resolve, \`image/\${format}\`, format === 'jpeg' ? 0.92 : undefined);
-      });
-    }
-
-    play() {
-      this.dispatchEvent(new CustomEvent('play', { bubbles: true }));
-    }
-
-    pause() {
-      this.dispatchEvent(new CustomEvent('pause', { bubbles: true }));
-    }
-  }
-
-  // Register custom element
-  if (!customElements.get('${z}')) {
-    customElements.define('${z}', ${A}Element);
-  }
-})();
-`}function H(q){let{className:z,tagName:A,paramDefs:B}=q,M=Object.entries(B).map(([R,O])=>{let L;switch(O.type){case"number":L="number";break;case"boolean":L="boolean";break;case"color":case"string":L="string";break;case"select":if(O.options)L=O.options.map((K)=>`'${typeof K==="object"?K.value:K}'`).join(" | ");else L="string";break;default:L="unknown"}return`  ${R}?: ${L};`}).join(`
-`);return`/**
- * TypeScript definitions for ${z}
- * Generated by HyperTool SDK
- */
-
-declare namespace JSX {
-  interface IntrinsicElements {
-    '${A}': ${z}Attributes;
-  }
-}
-
-interface ${z}Attributes {
-  autoplay?: boolean | 'true' | 'false';
-  background?: string;
-${M}
-}
-
-interface ${z}Element extends HTMLElement {
-  readonly isReady: boolean;
-  setParam(key: string, value: unknown): void;
-  setParams(params: Record<string, unknown>): void;
-  getParams(): Record<string, unknown>;
-  getParamDefs(): Record<string, { type: string; value: unknown; [key: string]: unknown }>;
-  captureImage(format?: 'png' | 'jpeg' | 'webp'): Promise<Blob | null>;
-  play(): void;
-  pause(): void;
-}
-
-interface ${z}Events {
-  ready: CustomEvent<void>;
-  error: CustomEvent<{ error: Error }>;
-  paramchange: CustomEvent<{ key: string; value: unknown; previousValue: unknown }>;
-  resize: CustomEvent<{ width: number; height: number }>;
-  play: CustomEvent<void>;
-  pause: CustomEvent<void>;
-}
-`}var E={cssVariables:{"--bg":"#0a0e14","--bg-elevated":"#0f1419","--muted":"#1a2332","--text":"#e6edf3","--text-secondary":"#8b949e","--accent":"#58d5ff","--accent-2":"#42a5cc","--border":"#21262d","--border-hover":"#30363d","--success":"#3fb950","--error":"#f85149","--ht-text-color-main-200":"#00ffd4","--ht-text-color-main-300":"#6ff3dd","--ht-text-color-main-500":"#4b8e85","--ht-text-color-grey-200":"#8c8d8f","--ht-bg-color-200":"#8c8d8f","--ht-bg-color-200-active":"#7a7b7d","--ht-bg-color-200-focus":"#7e7f81","--ht-bg-color-200-hover":"#828384","--ht-bg-color-300":"#5e6068","--ht-bg-color-300-active":"#4c4e56","--ht-bg-color-300-focus":"#55575f","--ht-bg-color-300-hover":"#595b63","--ht-bg-color-400":"#cccccc","--ht-bg-color-400-active":"#b3b3b3","--ht-bg-color-400-focus":"#c0c0c0","--ht-bg-color-400-hover":"#c6c6c6","--ht-bg-color-500":"#1C1D20","--ht-bg-color-500-active":"#0a0b0e","--ht-bg-color-500-focus":"#131417","--ht-bg-color-500-hover":"#16171a","--ht-bg-color-600":"#37383D","--ht-bg-color-600-active":"#25262b","--ht-bg-color-600-focus":"#2e2f34","--ht-bg-color-600-hover":"#323338","--ht-bg-color-700":"#0f1419","--ht-bg-color-700-active":"#16171c","--ht-bg-color-700-focus":"#1f2025","--ht-bg-color-700-hover":"#232429","--ht-border-radius":"8px","--ht-base-font-family-base":'"HydrogenType400", ui-sans-serif, system-ui, sans-serif',"--ht-base-font-family-display":'"Departure Mono", Roboto Mono, Source Code Pro, Menlo, Courier, monospace',"--ht-base-font-family-sans":'"Routed Gothic", ui-sans-serif, system-ui, sans-serif',"--ht-base-font-family-mono":'"Routed Gothic Narrow", ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace'},tweakpane:{"--tp-base-background-color":"var(--ht-bg-color-700)","--tp-base-shadow-color":"hsla(0, 0%, 0%, 0.2)","--tp-container-background-color":"var(--ht-bg-color-600)","--tp-container-background-color-active":"var(--ht-bg-color-600-active)","--tp-container-background-color-focus":"var(--ht-bg-color-600-focus)","--tp-container-background-color-hover":"var(--ht-bg-color-600-hover)","--tp-container-foreground-color":"var(--ht-text-color-main-300)","--tp-button-background-color":"var(--ht-bg-color-400)","--tp-button-background-color-active":"color-mix(in srgb, var(--ht-bg-color-400-active) 80%, white)","--tp-button-background-color-focus":"color-mix(in srgb, var(--ht-bg-color-400-focus) 85%, white)","--tp-button-background-color-hover":"color-mix(in srgb, var(--ht-bg-color-400-hover) 90%, white)","--tp-button-foreground-color":"var(--ht-text-color-main-300)","--tp-groove-foreground-color":"var(--ht-bg-color-300)","--tp-input-background-color":"var(--ht-bg-color-500)","--tp-input-background-color-active":"var(--ht-bg-color-500-active)","--tp-input-background-color-focus":"var(--ht-bg-color-500-focus)","--tp-input-background-color-hover":"var(--ht-bg-color-500-hover)","--tp-input-foreground-color":"var(--ht-text-color-main-300)","--tp-label-foreground-color":"var(--ht-text-color-main-300)","--tp-monitor-background-color":"var(--ht-bg-color-500)","--tp-monitor-foreground-color":"var(--ht-text-color-main-300)"}};function b(q){return JSON.stringify(q).replace(/</g,"\\u003c").replace(/>/g,"\\u003e").replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029")}function f(){return`
-/* Hypertool Theme - generated from studioTheme */
-:host {
-${Object.entries({...E.cssVariables,...E.tweakpane}).map(([z,A])=>`  ${z}: ${A};`).join(`
-`)}
-}
-
-/* Ensure Tweakpane uses our theme */
-.tp-dfwv {
-  background-color: var(--tp-base-background-color) !important;
-  border-radius: 8px;
-}
-`}function h(q){return`
-// Tweakpane loaded dynamically from esm.sh CDN at runtime
-let __Pane__: any = null;
-
-async function __loadTweakpane__(): Promise<void> {
-  if (__Pane__) return;
-  try {
-    const module = await import('https://esm.sh/tweakpane@4');
-    __Pane__ = module.Pane;
-  } catch (e) {
-    console.warn('[Controls] Failed to load Tweakpane from CDN:', e);
-  }
-}
-
-const __THEME_CSS__ = \`${f()}\`;
-
-async function __createControls__(params: Record<string, unknown>, defs: Record<string, any>, container: HTMLElement, shadowRoot: ShadowRoot) {
-  await __loadTweakpane__();
-  if (!__Pane__) return null;
-
-  try {
-    const pane = new __Pane__({
-      title: '${q}',
-      container,
-    });
-
-    for (const [key, def] of Object.entries(defs)) {
-      if (!def || def.type === 'folder') continue;
-
-      const config: Record<string, unknown> = { label: def.label || key };
-
-      if (def.type === 'number') {
-        if (def.min !== undefined) config.min = def.min;
-        if (def.max !== undefined) config.max = def.max;
-        if (def.step !== undefined) config.step = def.step;
-      }
-
-      if (def.type === 'select' && def.options) {
-        config.options = def.options.reduce((acc: Record<string, unknown>, opt: unknown) => {
-          const val = typeof opt === 'object' && opt !== null ? (opt as any).value : opt;
-          const label = typeof opt === 'object' && opt !== null ? (opt as any).label : String(opt);
-          acc[label] = val;
-          return acc;
-        }, {});
-      }
-
-      try {
-        pane.addBinding(params, key, config);
-      } catch (e) {
-        console.warn('[Controls] Failed to add binding for:', key, e);
-      }
-    }
-
-    // Tweakpane injects CSS into document.head - copy it to shadow root for isolation
-    setTimeout(() => {
-      const tpStyles = document.querySelectorAll('style');
-      tpStyles.forEach(style => {
-        if (style.textContent?.includes('.tp-') || style.textContent?.includes('tp-dfwv')) {
-          const clone = style.cloneNode(true) as HTMLStyleElement;
-          shadowRoot.appendChild(clone);
-        }
-      });
-    }, 0);
-
-    return pane;
-  } catch (e) {
-    console.warn('[Controls] Failed to create controls:', e);
-    return null;
-  }
-}
-`}function y(){return`
-// Make controls panel draggable
-function __setupDraggable__(container, pane) {
-  if (!pane || !pane.element) return;
-
-  const titleEl = pane.element.querySelector('.tp-rotv_t');
-  if (!titleEl) return;
-
-  let isDragging = false;
-  let startX = 0;
-  let startY = 0;
-  let initialRight = 8;
-  let initialTop = 8;
-
-  titleEl.style.cursor = 'grab';
-
-  titleEl.addEventListener('mousedown', (e) => {
-    if (e.button !== 0) return;
-    isDragging = true;
-    startX = e.clientX;
-    startY = e.clientY;
-
-    const style = getComputedStyle(container);
-    initialRight = parseInt(style.right) || 8;
-    initialTop = parseInt(style.top) || 8;
-
-    titleEl.style.cursor = 'grabbing';
-    e.preventDefault();
-  });
-
-  document.addEventListener('mousemove', (e) => {
-    if (!isDragging) return;
-
-    const deltaX = e.clientX - startX;
-    const deltaY = e.clientY - startY;
-
-    container.style.right = Math.max(0, initialRight - deltaX) + 'px';
-    container.style.top = Math.max(0, initialTop + deltaY) + 'px';
-  });
-
-  document.addEventListener('mouseup', () => {
-    if (isDragging) {
-      isDragging = false;
-      titleEl.style.cursor = 'grab';
-    }
-  });
-}
-`}function u(q){let{tagName:z,currentParams:A={},showControls:B=!1,controlsTitle:M,background:R="transparent"}=q,O=b(A),L=M||z.split("-").map((Z)=>Z.charAt(0).toUpperCase()+Z.slice(1)).join(" "),K=B?h(L):"",U=B?y():"",Q=B?'<div class="controls-container"></div>':"";return`
-// Export-friendly HyperTool Runtime
-// Generated by @hypertools/sdk
-// Controls: ${B?"enabled":"disabled"}
-
-// Baked-in current params from export
-const __BAKED_PARAMS__ = ${O};
-const __SHOW_CONTROLS__ = ${B};
-const __BACKGROUND__ = '${R}';
-
-${K}
-${U}
-
-export type ControlDefinitions = Record<string, {
-  type: string;
-  value: unknown;
-  label?: string;
-  min?: number;
-  max?: number;
-  step?: number;
-  options?: unknown[];
-}>;
-
-export interface SandboxContext {
-  mount: HTMLElement;
-  params: Record<string, unknown>;
-  exports: {
-    setFilename: (name: string) => void;
-    useDefaultCanvasCapture: (use: boolean) => void;
-    captureImage: () => Promise<Blob>;
-  };
-  environment: {
-    onResize: (callback: () => void) => () => void;
-    window: Window;
-    document: Document;
-  };
-  controls: null;
-}
-
-interface SandboxConfig {
-  controls?: {
-    definitions?: ControlDefinitions;
-    options?: { title?: string };
-  };
-  exportWidget?: {
-    filename?: string;
-    useCanvasCapture?: boolean;
-    enabled?: boolean;
-  };
-  setup: (context: SandboxContext) => (() => void) | void;
-}
-
-// Store for the experience definition
-let __experienceDef__: SandboxConfig | null = null;
-
-/**
- * createSandbox - Export version
- * Instead of connecting to studio, registers a web component
- */
-export async function createSandbox(config: SandboxConfig): Promise<void> {
-  __experienceDef__ = config;
-
-  // Create the web component
-  class HypertoolElement extends HTMLElement {
-    private _mount: HTMLElement | null = null;
-    private _controlsContainer: HTMLElement | null = null;
-    private _cleanup: (() => void) | void = undefined;
-    private _params: Record<string, unknown> = {};
-    private _pane: any = null;
-
-    constructor() {
-      super();
-      this.attachShadow({ mode: 'open' });
-    }
-
-    connectedCallback() {
-      if (!this.shadowRoot || !__experienceDef__) return;
-
-      // Setup styles (includes theme CSS when controls enabled)
-      const style = document.createElement('style');
-      style.textContent = \`
-        \${__SHOW_CONTROLS__ && typeof __THEME_CSS__ !== 'undefined' ? __THEME_CSS__ : ''}
-        :host { display: block; width: 100%; height: 100%; }
-        .mount {
-          width: 100%;
-          height: 100%;
-          position: relative;
-          overflow: hidden;
-          background: \${__BACKGROUND__};
-        }
-        ${B?`
-        .controls-container {
-          position: absolute;
-          top: 8px;
-          right: 8px;
-          z-index: 1000;
-          max-height: calc(100% - 16px);
-          overflow-y: auto;
-        }
-        /* Tweakpane theme overrides */
-        .controls-container .tp-dfwv {
-          background-color: rgba(15, 20, 25, 0.95) !important;
-        }
-      `:""}
-      \`;
-      this.shadowRoot.appendChild(style);
-
-      // Create mount
-      this._mount = document.createElement('div');
-      this._mount.className = 'mount';
-      this.shadowRoot.appendChild(this._mount);
-
-      // Create controls container if enabled
-      if (__SHOW_CONTROLS__) {
-        this._controlsContainer = document.createElement('div');
-        this._controlsContainer.className = 'controls-container';
-        this.shadowRoot.appendChild(this._controlsContainer);
-      }
-
-      // Initialize params: baked params > HTML attributes > definition defaults
-      const defs = __experienceDef__.controls?.definitions || {};
-      for (const [key, def] of Object.entries(defs)) {
-        // Priority: HTML attribute > baked param > definition default
-        if (this.getAttribute(key) !== null) {
-          this._params[key] = this._parseAttr(key, this.getAttribute(key)!, def);
-        } else if (key in __BAKED_PARAMS__) {
-          this._params[key] = __BAKED_PARAMS__[key];
-        } else {
-          this._params[key] = def.value;
-        }
-      }
-
-      // Make params reactive
-      const self = this;
-      this._params = new Proxy(this._params, {
-        set: (target, prop, value) => {
-          const previous = target[prop as string];
-          target[prop as string] = value;
-          if (previous !== value) {
-            self.dispatchEvent(new CustomEvent('paramchange', {
-              detail: { key: prop, value, previousValue: previous },
-              bubbles: true,
-            }));
-          }
-          return true;
-        }
-      });
-
-      // Create context
-      const context: SandboxContext = {
-        mount: this._mount,
-        params: this._params,
-        exports: {
-          setFilename: () => {},
-          useDefaultCanvasCapture: () => {},
-          captureImage: async () => {
-            const canvas = this._mount?.querySelector('canvas');
-            if (!canvas) throw new Error('No canvas found');
-            return new Promise((res, rej) => {
-              canvas.toBlob(b => b ? res(b) : rej(new Error('Failed to capture')));
-            });
-          },
-        },
-        environment: {
-          onResize: (callback) => {
-            const ro = new ResizeObserver(() => callback());
-            ro.observe(this._mount!);
-            return () => ro.disconnect();
-          },
-          window,
-          document,
-        },
-        controls: null,
-      };
-
-      // Run setup
-      this._cleanup = __experienceDef__.setup(context);
-
-      // Setup controls if enabled (async - loads Tweakpane from CDN)
-      if (__SHOW_CONTROLS__ && this._controlsContainer && typeof __createControls__ === 'function') {
-        __createControls__(this._params, defs, this._controlsContainer, this.shadowRoot!).then((pane: any) => {
-          this._pane = pane;
-          if (this._pane && typeof __setupDraggable__ === 'function') {
-            __setupDraggable__(this._controlsContainer, this._pane);
-          }
-        });
-      }
-
-      // Dispatch ready event
-      this.dispatchEvent(new CustomEvent('ready', { bubbles: true }));
-    }
-
-    disconnectedCallback() {
-      if (this._cleanup) this._cleanup();
-      if (this._pane?.dispose) this._pane.dispose();
-    }
-
-    private _parseAttr(key: string, value: string, def: { type: string }): unknown {
-      switch (def.type) {
-        case 'number': return parseFloat(value);
-        case 'boolean': return value === 'true' || value === '';
-        default: return value;
-      }
-    }
-
-    // Public API
-    setParam(key: string, value: unknown) {
-      this._params[key] = value;
-      this._pane?.refresh();
-    }
-    setParams(params: Record<string, unknown>) {
-      for (const [k, v] of Object.entries(params)) this._params[k] = v;
-      this._pane?.refresh();
-    }
-    getParams() { return { ...this._params }; }
-    getParamDefs() { return __experienceDef__?.controls?.definitions || {}; }
-  }
-
-  // Register the component
-  if (!customElements.get('${z}')) {
-    customElements.define('${z}', HypertoolElement);
-  }
-}
-`}function d(q){return`<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${q}</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
-    ${q} { display: block; width: 100%; height: 100%; }
-  </style>
-</head>
-<body>
-  <${q}></${q}>
-  <script src="./${q}.js"></script>
-</body>
-</html>`}function g(q,z){let A=["https://cdnjs.cloudflare.com","https://cdn.jsdelivr.net","https://unpkg.com","https://esm.sh","https://cdn.skypack.dev"].join(" ");return`<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self' blob: data: ${A}; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: data: ${A}; style-src 'self' 'unsafe-inline' ${A}; img-src 'self' blob: data: *; media-src 'self' blob: data: *; connect-src *; font-src 'self' data: ${A};">
-  <title>${q}</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
-    ${q} { display: block; width: 100%; height: 100%; }
-  </style>
-</head>
-<body>
-  <${q}></${q}>
-  <script>
-${z}
-  </script>
-</body>
-</html>`}function c(q,z){return`# ${z}
-
-## Usage
-
-\`\`\`html
-<script src="${q}.js"></script>
-<${q}></${q}>
-\`\`\`
-
-## API
-
-\`\`\`javascript
-const el = document.querySelector('${q}');
-
-// Set parameters
-el.setParam('paramName', value);
-el.setParams({ param1: value1, param2: value2 });
-
-// Get current parameters
-const params = el.getParams();
-
-// Get parameter definitions
-const defs = el.getParamDefs();
-\`\`\`
-
-## Events
-
-\`\`\`javascript
-el.addEventListener('ready', () => console.log('Ready!'));
-el.addEventListener('paramchange', (e) => {
-  console.log('Param changed:', e.detail.key, e.detail.value);
-});
-\`\`\`
-
-## Files
-
-- \`${q}.js\` - The bundled component
-- \`index.html\` - Example page (loads external JS)
-- \`preview.html\` - Standalone preview (inline JS)
-`}function N(q,z){return`export interface ${z}Element extends HTMLElement {
-  setParam(key: string, value: unknown): void;
-  setParams(params: Record<string, unknown>): void;
-  getParams(): Record<string, unknown>;
-  getParamDefs(): Record<string, { type: string; value: unknown; [key: string]: unknown }>;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    '${q}': ${z}Element;
-  }
-}
-`}export{w as wrapSetupCode,x as generateWebComponent,H as generateTypeDefinitions,g as generatePreviewHtml,N as generateExportTypes,u as generateExportRuntime,c as generateExportReadme,d as generateExportHtml,P as generateBundle,k as extractParamDefs};
-
-//# debugId=BBAF843355D811CE64756E2164756E21