@holoscript/cdn 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-2026 HoloScript Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# @holoscript/cdn
+
+Browser CDN distribution for HoloScript. Embed spatial scenes in web pages using the `<holo-scene>` web component.
+
+## Usage
+
+```bash
+pnpm install
+pnpm build
+```
+
+Include the built bundle in a web page to register the `<holo-scene>` custom element.
+
+## Development
+
+```bash
+pnpm dev      # Build with watch mode (tsup)
+pnpm test     # Run tests (vitest)
+```

package/dist/index.cdn.js

@@ -0,0 +1,207 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  HoloSceneElement: () => HoloSceneElement,
+  HoloSceneRenderer: () => HoloSceneRenderer,
+  defaultCDNConfig: () => defaultCDNConfig,
+  registerHoloScene: () => registerHoloScene
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/HoloSceneRenderer.ts
+var HoloSceneRenderer = class {
+  container;
+  canvas = null;
+  animationFrameId = null;
+  constructor(container) {
+    this.container = container;
+  }
+  async render(compiledOutput, options) {
+    this.cleanup();
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = options.width;
+    this.canvas.height = options.height;
+    this.canvas.style.width = "100%";
+    this.canvas.style.height = "100%";
+    this.container.appendChild(this.canvas);
+    switch (options.target) {
+      case "webxr":
+      case "threejs":
+        await this.renderThreeJS(compiledOutput, options);
+        break;
+      case "auto":
+        await this.renderThreeJS(compiledOutput, options);
+        break;
+      default:
+        this.renderStaticPreview(compiledOutput);
+    }
+  }
+  async renderThreeJS(compiledOutput, options) {
+    if (!this.canvas) return;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) return;
+    const gradient = ctx.createLinearGradient(0, 0, 0, options.height);
+    gradient.addColorStop(0, "#0a0a1a");
+    gradient.addColorStop(1, "#1a1a2e");
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, options.width, options.height);
+    ctx.fillStyle = "rgba(100, 200, 255, 0.9)";
+    ctx.font = `bold ${Math.floor(options.width / 20)}px monospace`;
+    ctx.textAlign = "center";
+    ctx.fillText("HoloScript Scene", options.width / 2, options.height / 2 - 20);
+    ctx.font = `${Math.floor(options.width / 30)}px monospace`;
+    ctx.fillStyle = "rgba(150, 150, 200, 0.7)";
+    ctx.fillText(`Target: ${options.target}`, options.width / 2, options.height / 2 + 20);
+    if (options.enableVR) {
+      this.addVRButton(options);
+    }
+    if (options.enableAR) {
+      this.addARButton(options);
+    }
+  }
+  renderStaticPreview(compiledOutput) {
+    const pre = document.createElement("pre");
+    pre.style.cssText = `
+      background: #0a0a1a;
+      color: #64c8ff;
+      padding: 16px;
+      font-family: monospace;
+      font-size: 12px;
+      overflow: auto;
+      height: 100%;
+      margin: 0;
+    `;
+    pre.textContent = compiledOutput.substring(0, 500) + (compiledOutput.length > 500 ? "\n..." : "");
+    this.container.appendChild(pre);
+  }
+  addVRButton(options) {
+    const btn = document.createElement("button");
+    btn.textContent = "Enter VR";
+    btn.style.cssText = `
+      position: absolute;
+      bottom: 16px;
+      right: 16px;
+      background: rgba(100, 200, 255, 0.9);
+      color: #000;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      font-family: monospace;
+      cursor: pointer;
+      font-size: 14px;
+    `;
+    btn.addEventListener("click", async () => {
+      if ("xr" in navigator) {
+        try {
+          const nav = navigator;
+          const session = await nav.xr.requestSession("immersive-vr");
+          session.addEventListener("end", () => {
+            btn.textContent = "Enter VR";
+          });
+          btn.textContent = "In VR...";
+        } catch (e) {
+          console.warn("WebXR session failed:", e);
+        }
+      }
+    });
+    this.container.style.position = "relative";
+    this.container.appendChild(btn);
+  }
+  addARButton(options) {
+    const btn = document.createElement("button");
+    btn.textContent = "Enter AR";
+    btn.style.cssText = `
+      position: absolute;
+      bottom: 16px;
+      left: 16px;
+      background: rgba(100, 255, 150, 0.9);
+      color: #000;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      font-family: monospace;
+      cursor: pointer;
+      font-size: 14px;
+    `;
+    this.container.style.position = "relative";
+    this.container.appendChild(btn);
+  }
+  cleanup() {
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    while (this.container.firstChild) {
+      this.container.removeChild(this.container.firstChild);
+    }
+    this.canvas = null;
+  }
+};
+
+// src/HoloSceneElement.ts
+var HoloSceneElement = class extends HTMLElement {
+  renderer = null;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) return;
+    const container = document.createElement("div");
+    container.style.width = "100%";
+    container.style.height = "100%";
+    this.shadowRoot.appendChild(container);
+    this.renderer = new HoloSceneRenderer(container);
+  }
+  disconnectedCallback() {
+    if (this.renderer) {
+      this.renderer.cleanup();
+    }
+  }
+  get src() {
+    return this.getAttribute("src") || "";
+  }
+  get target() {
+    return this.getAttribute("target") || "auto";
+  }
+};
+function registerHoloScene() {
+  if (typeof window !== "undefined" && !customElements.get("holo-scene")) {
+    customElements.define("holo-scene", HoloSceneElement);
+  }
+}
+
+// src/config.ts
+var defaultCDNConfig = {
+  cdnBase: "https://cdn.holoscript.net",
+  defaultTarget: "threejs",
+  debug: false,
+  loadTimeoutMs: 1e4
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HoloSceneElement,
+  HoloSceneRenderer,
+  defaultCDNConfig,
+  registerHoloScene
+});
+//# sourceMappingURL=index.cdn.js.map

package/dist/index.cdn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/HoloSceneRenderer.ts","../src/HoloSceneElement.ts","../src/config.ts"],"sourcesContent":["/**\n * @holoscript/cdn — Browser CDN distribution\n *\n * Exposes <holo-scene> custom element for embedding HoloScript scenes\n * in any webpage via a CDN script tag.\n *\n * Usage:\n *   <script src=\"https://cdn.holoscript.net/v4.min.js\"></script>\n *   <holo-scene src=\"./my-world.hs\" target=\"webxr\" fallback=\"threejs\"></holo-scene>\n *\n * @version 1.0.0\n */\n\nexport { HoloSceneElement, registerHoloScene } from './HoloSceneElement.js';\nexport { HoloSceneRenderer } from './HoloSceneRenderer.js';\nexport { HoloCDNConfig, defaultCDNConfig } from './config.js';\nexport type { HoloSceneAttributes, HoloSceneTarget, HoloSceneFallback } from './types.js';\n","/**\n * HoloSceneRenderer\n *\n * Responsible for taking compiled HoloScript output and rendering it\n * into a DOM container. Supports Three.js, WebXR, and static preview modes.\n */\n\nimport type { HoloSceneTarget } from './types';\n\nexport interface RenderOptions {\n  target: HoloSceneTarget;\n  width: number;\n  height: number;\n  enableVR: boolean;\n  enableAR: boolean;\n}\n\nexport class HoloSceneRenderer {\n  private container: HTMLElement;\n  private canvas: HTMLCanvasElement | null = null;\n  private animationFrameId: number | null = null;\n\n  constructor(container: HTMLElement) {\n    this.container = container;\n  }\n\n  async render(compiledOutput: string, options: RenderOptions): Promise<void> {\n    this.cleanup();\n\n    this.canvas = document.createElement('canvas');\n    this.canvas.width = options.width;\n    this.canvas.height = options.height;\n    this.canvas.style.width = '100%';\n    this.canvas.style.height = '100%';\n    this.container.appendChild(this.canvas);\n\n    switch (options.target) {\n      case 'webxr':\n      case 'threejs':\n        await this.renderThreeJS(compiledOutput, options);\n        break;\n      case 'auto':\n        await this.renderThreeJS(compiledOutput, options);\n        break;\n      default:\n        this.renderStaticPreview(compiledOutput);\n    }\n  }\n\n  private async renderThreeJS(compiledOutput: string, options: RenderOptions): Promise<void> {\n    if (!this.canvas) return;\n\n    const ctx = this.canvas.getContext('2d');\n    if (!ctx) return;\n\n    const gradient = ctx.createLinearGradient(0, 0, 0, options.height);\n    gradient.addColorStop(0, '#0a0a1a');\n    gradient.addColorStop(1, '#1a1a2e');\n    ctx.fillStyle = gradient;\n    ctx.fillRect(0, 0, options.width, options.height);\n\n    ctx.fillStyle = 'rgba(100, 200, 255, 0.9)';\n    ctx.font = `bold ${Math.floor(options.width / 20)}px monospace`;\n    ctx.textAlign = 'center';\n    ctx.fillText('HoloScript Scene', options.width / 2, options.height / 2 - 20);\n    ctx.font = `${Math.floor(options.width / 30)}px monospace`;\n    ctx.fillStyle = 'rgba(150, 150, 200, 0.7)';\n    ctx.fillText(`Target: ${options.target}`, options.width / 2, options.height / 2 + 20);\n\n    if (options.enableVR) {\n      this.addVRButton(options);\n    }\n    if (options.enableAR) {\n      this.addARButton(options);\n    }\n  }\n\n  private renderStaticPreview(compiledOutput: string): void {\n    const pre = document.createElement('pre');\n    pre.style.cssText = `\n      background: #0a0a1a;\n      color: #64c8ff;\n      padding: 16px;\n      font-family: monospace;\n      font-size: 12px;\n      overflow: auto;\n      height: 100%;\n      margin: 0;\n    `;\n    pre.textContent =\n      compiledOutput.substring(0, 500) + (compiledOutput.length > 500 ? '\\n...' : '');\n    this.container.appendChild(pre);\n  }\n\n  private addVRButton(options: RenderOptions): void {\n    const btn = document.createElement('button');\n    btn.textContent = 'Enter VR';\n    btn.style.cssText = `\n      position: absolute;\n      bottom: 16px;\n      right: 16px;\n      background: rgba(100, 200, 255, 0.9);\n      color: #000;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-family: monospace;\n      cursor: pointer;\n      font-size: 14px;\n    `;\n    btn.addEventListener('click', async () => {\n      if ('xr' in navigator) {\n        try {\n          const nav = navigator as any;\n          const session = await nav.xr.requestSession('immersive-vr');\n          session.addEventListener('end', () => {\n            btn.textContent = 'Enter VR';\n          });\n          btn.textContent = 'In VR...';\n        } catch (e) {\n          console.warn('WebXR session failed:', e);\n        }\n      }\n    });\n    this.container.style.position = 'relative';\n    this.container.appendChild(btn);\n  }\n\n  private addARButton(options: RenderOptions): void {\n    const btn = document.createElement('button');\n    btn.textContent = 'Enter AR';\n    btn.style.cssText = `\n      position: absolute;\n      bottom: 16px;\n      left: 16px;\n      background: rgba(100, 255, 150, 0.9);\n      color: #000;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-family: monospace;\n      cursor: pointer;\n      font-size: 14px;\n    `;\n    this.container.style.position = 'relative';\n    this.container.appendChild(btn);\n  }\n\n  cleanup(): void {\n    if (this.animationFrameId !== null) {\n      cancelAnimationFrame(this.animationFrameId);\n      this.animationFrameId = null;\n    }\n    while (this.container.firstChild) {\n      this.container.removeChild(this.container.firstChild);\n    }\n    this.canvas = null;\n  }\n}\n","import type { HoloSceneTarget, HoloSceneFallback } from './types';\nimport { HoloSceneRenderer } from './HoloSceneRenderer';\n\nexport class HoloSceneElement extends HTMLElement {\n  private renderer: HoloSceneRenderer | null = null;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    if (!this.shadowRoot) return;\n    const container = document.createElement('div');\n    container.style.width = '100%';\n    container.style.height = '100%';\n    this.shadowRoot.appendChild(container);\n    this.renderer = new HoloSceneRenderer(container);\n  }\n\n  disconnectedCallback() {\n    if (this.renderer) {\n      this.renderer.cleanup();\n    }\n  }\n\n  get src(): string {\n    return this.getAttribute('src') || '';\n  }\n\n  get target(): HoloSceneTarget {\n    return (this.getAttribute('target') as HoloSceneTarget) || 'auto';\n  }\n}\n\nexport function registerHoloScene() {\n  if (typeof window !== 'undefined' && !customElements.get('holo-scene')) {\n    customElements.define('holo-scene', HoloSceneElement);\n  }\n}\n","/**\n * CDN configuration and defaults\n */\n\nexport interface HoloCDNConfig {\n  cdnBase: string;\n  defaultTarget: string;\n  debug: boolean;\n  loadTimeoutMs: number;\n}\n\nexport const defaultCDNConfig: HoloCDNConfig = {\n  cdnBase: 'https://cdn.holoscript.net',\n  defaultTarget: 'threejs',\n  debug: false,\n  loadTimeoutMs: 10000,\n};\n\nexport function detectOptimalTarget(): string {\n  if (typeof navigator === 'undefined') return 'threejs';\n\n  if ('xr' in navigator) {\n    const nav = navigator as any;\n    if (nav.xr?.isSessionSupported) {\n      return 'webxr';\n    }\n  }\n\n  if ('gpu' in navigator) {\n    return 'webgpu';\n  }\n\n  return 'threejs';\n}\n\nexport async function checkXRSupport(mode: 'immersive-vr' | 'immersive-ar'): Promise<boolean> {\n  if (typeof navigator === 'undefined' || !('xr' in navigator)) return false;\n  try {\n    const nav = navigator as any;\n    return await nav.xr.isSessionSupported(mode);\n  } catch {\n    return false;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/index.cdn.mjs

@@ -0,0 +1,177 @@
+// src/HoloSceneRenderer.ts
+var HoloSceneRenderer = class {
+  container;
+  canvas = null;
+  animationFrameId = null;
+  constructor(container) {
+    this.container = container;
+  }
+  async render(compiledOutput, options) {
+    this.cleanup();
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = options.width;
+    this.canvas.height = options.height;
+    this.canvas.style.width = "100%";
+    this.canvas.style.height = "100%";
+    this.container.appendChild(this.canvas);
+    switch (options.target) {
+      case "webxr":
+      case "threejs":
+        await this.renderThreeJS(compiledOutput, options);
+        break;
+      case "auto":
+        await this.renderThreeJS(compiledOutput, options);
+        break;
+      default:
+        this.renderStaticPreview(compiledOutput);
+    }
+  }
+  async renderThreeJS(compiledOutput, options) {
+    if (!this.canvas) return;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) return;
+    const gradient = ctx.createLinearGradient(0, 0, 0, options.height);
+    gradient.addColorStop(0, "#0a0a1a");
+    gradient.addColorStop(1, "#1a1a2e");
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, options.width, options.height);
+    ctx.fillStyle = "rgba(100, 200, 255, 0.9)";
+    ctx.font = `bold ${Math.floor(options.width / 20)}px monospace`;
+    ctx.textAlign = "center";
+    ctx.fillText("HoloScript Scene", options.width / 2, options.height / 2 - 20);
+    ctx.font = `${Math.floor(options.width / 30)}px monospace`;
+    ctx.fillStyle = "rgba(150, 150, 200, 0.7)";
+    ctx.fillText(`Target: ${options.target}`, options.width / 2, options.height / 2 + 20);
+    if (options.enableVR) {
+      this.addVRButton(options);
+    }
+    if (options.enableAR) {
+      this.addARButton(options);
+    }
+  }
+  renderStaticPreview(compiledOutput) {
+    const pre = document.createElement("pre");
+    pre.style.cssText = `
+      background: #0a0a1a;
+      color: #64c8ff;
+      padding: 16px;
+      font-family: monospace;
+      font-size: 12px;
+      overflow: auto;
+      height: 100%;
+      margin: 0;
+    `;
+    pre.textContent = compiledOutput.substring(0, 500) + (compiledOutput.length > 500 ? "\n..." : "");
+    this.container.appendChild(pre);
+  }
+  addVRButton(options) {
+    const btn = document.createElement("button");
+    btn.textContent = "Enter VR";
+    btn.style.cssText = `
+      position: absolute;
+      bottom: 16px;
+      right: 16px;
+      background: rgba(100, 200, 255, 0.9);
+      color: #000;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      font-family: monospace;
+      cursor: pointer;
+      font-size: 14px;
+    `;
+    btn.addEventListener("click", async () => {
+      if ("xr" in navigator) {
+        try {
+          const nav = navigator;
+          const session = await nav.xr.requestSession("immersive-vr");
+          session.addEventListener("end", () => {
+            btn.textContent = "Enter VR";
+          });
+          btn.textContent = "In VR...";
+        } catch (e) {
+          console.warn("WebXR session failed:", e);
+        }
+      }
+    });
+    this.container.style.position = "relative";
+    this.container.appendChild(btn);
+  }
+  addARButton(options) {
+    const btn = document.createElement("button");
+    btn.textContent = "Enter AR";
+    btn.style.cssText = `
+      position: absolute;
+      bottom: 16px;
+      left: 16px;
+      background: rgba(100, 255, 150, 0.9);
+      color: #000;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      font-family: monospace;
+      cursor: pointer;
+      font-size: 14px;
+    `;
+    this.container.style.position = "relative";
+    this.container.appendChild(btn);
+  }
+  cleanup() {
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    while (this.container.firstChild) {
+      this.container.removeChild(this.container.firstChild);
+    }
+    this.canvas = null;
+  }
+};
+
+// src/HoloSceneElement.ts
+var HoloSceneElement = class extends HTMLElement {
+  renderer = null;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) return;
+    const container = document.createElement("div");
+    container.style.width = "100%";
+    container.style.height = "100%";
+    this.shadowRoot.appendChild(container);
+    this.renderer = new HoloSceneRenderer(container);
+  }
+  disconnectedCallback() {
+    if (this.renderer) {
+      this.renderer.cleanup();
+    }
+  }
+  get src() {
+    return this.getAttribute("src") || "";
+  }
+  get target() {
+    return this.getAttribute("target") || "auto";
+  }
+};
+function registerHoloScene() {
+  if (typeof window !== "undefined" && !customElements.get("holo-scene")) {
+    customElements.define("holo-scene", HoloSceneElement);
+  }
+}
+
+// src/config.ts
+var defaultCDNConfig = {
+  cdnBase: "https://cdn.holoscript.net",
+  defaultTarget: "threejs",
+  debug: false,
+  loadTimeoutMs: 1e4
+};
+export {
+  HoloSceneElement,
+  HoloSceneRenderer,
+  defaultCDNConfig,
+  registerHoloScene
+};
+//# sourceMappingURL=index.cdn.mjs.map

package/dist/index.cdn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/HoloSceneRenderer.ts","../src/HoloSceneElement.ts","../src/config.ts"],"sourcesContent":["/**\n * HoloSceneRenderer\n *\n * Responsible for taking compiled HoloScript output and rendering it\n * into a DOM container. Supports Three.js, WebXR, and static preview modes.\n */\n\nimport type { HoloSceneTarget } from './types';\n\nexport interface RenderOptions {\n  target: HoloSceneTarget;\n  width: number;\n  height: number;\n  enableVR: boolean;\n  enableAR: boolean;\n}\n\nexport class HoloSceneRenderer {\n  private container: HTMLElement;\n  private canvas: HTMLCanvasElement | null = null;\n  private animationFrameId: number | null = null;\n\n  constructor(container: HTMLElement) {\n    this.container = container;\n  }\n\n  async render(compiledOutput: string, options: RenderOptions): Promise<void> {\n    this.cleanup();\n\n    this.canvas = document.createElement('canvas');\n    this.canvas.width = options.width;\n    this.canvas.height = options.height;\n    this.canvas.style.width = '100%';\n    this.canvas.style.height = '100%';\n    this.container.appendChild(this.canvas);\n\n    switch (options.target) {\n      case 'webxr':\n      case 'threejs':\n        await this.renderThreeJS(compiledOutput, options);\n        break;\n      case 'auto':\n        await this.renderThreeJS(compiledOutput, options);\n        break;\n      default:\n        this.renderStaticPreview(compiledOutput);\n    }\n  }\n\n  private async renderThreeJS(compiledOutput: string, options: RenderOptions): Promise<void> {\n    if (!this.canvas) return;\n\n    const ctx = this.canvas.getContext('2d');\n    if (!ctx) return;\n\n    const gradient = ctx.createLinearGradient(0, 0, 0, options.height);\n    gradient.addColorStop(0, '#0a0a1a');\n    gradient.addColorStop(1, '#1a1a2e');\n    ctx.fillStyle = gradient;\n    ctx.fillRect(0, 0, options.width, options.height);\n\n    ctx.fillStyle = 'rgba(100, 200, 255, 0.9)';\n    ctx.font = `bold ${Math.floor(options.width / 20)}px monospace`;\n    ctx.textAlign = 'center';\n    ctx.fillText('HoloScript Scene', options.width / 2, options.height / 2 - 20);\n    ctx.font = `${Math.floor(options.width / 30)}px monospace`;\n    ctx.fillStyle = 'rgba(150, 150, 200, 0.7)';\n    ctx.fillText(`Target: ${options.target}`, options.width / 2, options.height / 2 + 20);\n\n    if (options.enableVR) {\n      this.addVRButton(options);\n    }\n    if (options.enableAR) {\n      this.addARButton(options);\n    }\n  }\n\n  private renderStaticPreview(compiledOutput: string): void {\n    const pre = document.createElement('pre');\n    pre.style.cssText = `\n      background: #0a0a1a;\n      color: #64c8ff;\n      padding: 16px;\n      font-family: monospace;\n      font-size: 12px;\n      overflow: auto;\n      height: 100%;\n      margin: 0;\n    `;\n    pre.textContent =\n      compiledOutput.substring(0, 500) + (compiledOutput.length > 500 ? '\\n...' : '');\n    this.container.appendChild(pre);\n  }\n\n  private addVRButton(options: RenderOptions): void {\n    const btn = document.createElement('button');\n    btn.textContent = 'Enter VR';\n    btn.style.cssText = `\n      position: absolute;\n      bottom: 16px;\n      right: 16px;\n      background: rgba(100, 200, 255, 0.9);\n      color: #000;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-family: monospace;\n      cursor: pointer;\n      font-size: 14px;\n    `;\n    btn.addEventListener('click', async () => {\n      if ('xr' in navigator) {\n        try {\n          const nav = navigator as any;\n          const session = await nav.xr.requestSession('immersive-vr');\n          session.addEventListener('end', () => {\n            btn.textContent = 'Enter VR';\n          });\n          btn.textContent = 'In VR...';\n        } catch (e) {\n          console.warn('WebXR session failed:', e);\n        }\n      }\n    });\n    this.container.style.position = 'relative';\n    this.container.appendChild(btn);\n  }\n\n  private addARButton(options: RenderOptions): void {\n    const btn = document.createElement('button');\n    btn.textContent = 'Enter AR';\n    btn.style.cssText = `\n      position: absolute;\n      bottom: 16px;\n      left: 16px;\n      background: rgba(100, 255, 150, 0.9);\n      color: #000;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-family: monospace;\n      cursor: pointer;\n      font-size: 14px;\n    `;\n    this.container.style.position = 'relative';\n    this.container.appendChild(btn);\n  }\n\n  cleanup(): void {\n    if (this.animationFrameId !== null) {\n      cancelAnimationFrame(this.animationFrameId);\n      this.animationFrameId = null;\n    }\n    while (this.container.firstChild) {\n      this.container.removeChild(this.container.firstChild);\n    }\n    this.canvas = null;\n  }\n}\n","import type { HoloSceneTarget, HoloSceneFallback } from './types';\nimport { HoloSceneRenderer } from './HoloSceneRenderer';\n\nexport class HoloSceneElement extends HTMLElement {\n  private renderer: HoloSceneRenderer | null = null;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    if (!this.shadowRoot) return;\n    const container = document.createElement('div');\n    container.style.width = '100%';\n    container.style.height = '100%';\n    this.shadowRoot.appendChild(container);\n    this.renderer = new HoloSceneRenderer(container);\n  }\n\n  disconnectedCallback() {\n    if (this.renderer) {\n      this.renderer.cleanup();\n    }\n  }\n\n  get src(): string {\n    return this.getAttribute('src') || '';\n  }\n\n  get target(): HoloSceneTarget {\n    return (this.getAttribute('target') as HoloSceneTarget) || 'auto';\n  }\n}\n\nexport function registerHoloScene() {\n  if (typeof window !== 'undefined' && !customElements.get('holo-scene')) {\n    customElements.define('holo-scene', HoloSceneElement);\n  }\n}\n","/**\n * CDN configuration and defaults\n */\n\nexport interface HoloCDNConfig {\n  cdnBase: string;\n  defaultTarget: string;\n  debug: boolean;\n  loadTimeoutMs: number;\n}\n\nexport const defaultCDNConfig: HoloCDNConfig = {\n  cdnBase: 'https://cdn.holoscript.net',\n  defaultTarget: 'threejs',\n  debug: false,\n  loadTimeoutMs: 10000,\n};\n\nexport function detectOptimalTarget(): string {\n  if (typeof navigator === 'undefined') return 'threejs';\n\n  if ('xr' in navigator) {\n    const nav = navigator as any;\n    if (nav.xr?.isSessionSupported) {\n      return 'webxr';\n    }\n  }\n\n  if ('gpu' in navigator) {\n    return 'webgpu';\n  }\n\n  return 'threejs';\n}\n\nexport async function checkXRSupport(mode: 'immersive-vr' | 'immersive-ar'): Promise<boolean> {\n  if (typeof navigator === 'undefined' || !('xr' in navigator)) return false;\n  try {\n    const nav = navigator as any;\n    return await nav.xr.isSessionSupported(mode);\n  } catch {\n    return false;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,68 @@
+/**
+ * HoloScene custom element attribute types
+ */
+type HoloSceneTarget = 'webxr' | 'threejs' | 'babylon' | 'unity' | 'godot' | 'visionos' | 'android-xr' | 'auto';
+type HoloSceneFallback = 'threejs' | 'canvas2d' | 'static-image' | 'none';
+interface HoloSceneAttributes {
+    src?: string;
+    inline?: string;
+    target?: HoloSceneTarget;
+    fallback?: HoloSceneFallback;
+    width?: string | number;
+    height?: string | number;
+    autoplay?: boolean;
+    vr?: boolean;
+    ar?: boolean;
+    loading?: boolean;
+    class?: string;
+}
+
+declare class HoloSceneElement extends HTMLElement {
+    private renderer;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get src(): string;
+    get target(): HoloSceneTarget;
+}
+declare function registerHoloScene(): void;
+
+/**
+ * HoloSceneRenderer
+ *
+ * Responsible for taking compiled HoloScript output and rendering it
+ * into a DOM container. Supports Three.js, WebXR, and static preview modes.
+ */
+
+interface RenderOptions {
+    target: HoloSceneTarget;
+    width: number;
+    height: number;
+    enableVR: boolean;
+    enableAR: boolean;
+}
+declare class HoloSceneRenderer {
+    private container;
+    private canvas;
+    private animationFrameId;
+    constructor(container: HTMLElement);
+    render(compiledOutput: string, options: RenderOptions): Promise<void>;
+    private renderThreeJS;
+    private renderStaticPreview;
+    private addVRButton;
+    private addARButton;
+    cleanup(): void;
+}
+
+/**
+ * CDN configuration and defaults
+ */
+interface HoloCDNConfig {
+    cdnBase: string;
+    defaultTarget: string;
+    debug: boolean;
+    loadTimeoutMs: number;
+}
+declare const defaultCDNConfig: HoloCDNConfig;
+
+export { type HoloCDNConfig, type HoloSceneAttributes, HoloSceneElement, type HoloSceneFallback, HoloSceneRenderer, type HoloSceneTarget, defaultCDNConfig, registerHoloScene };

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+/**
+ * HoloScene custom element attribute types
+ */
+type HoloSceneTarget = 'webxr' | 'threejs' | 'babylon' | 'unity' | 'godot' | 'visionos' | 'android-xr' | 'auto';
+type HoloSceneFallback = 'threejs' | 'canvas2d' | 'static-image' | 'none';
+interface HoloSceneAttributes {
+    src?: string;
+    inline?: string;
+    target?: HoloSceneTarget;
+    fallback?: HoloSceneFallback;
+    width?: string | number;
+    height?: string | number;
+    autoplay?: boolean;
+    vr?: boolean;
+    ar?: boolean;
+    loading?: boolean;
+    class?: string;
+}
+
+declare class HoloSceneElement extends HTMLElement {
+    private renderer;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get src(): string;
+    get target(): HoloSceneTarget;
+}
+declare function registerHoloScene(): void;
+
+/**
+ * HoloSceneRenderer
+ *
+ * Responsible for taking compiled HoloScript output and rendering it
+ * into a DOM container. Supports Three.js, WebXR, and static preview modes.
+ */
+
+interface RenderOptions {
+    target: HoloSceneTarget;
+    width: number;
+    height: number;
+    enableVR: boolean;
+    enableAR: boolean;
+}
+declare class HoloSceneRenderer {
+    private container;
+    private canvas;
+    private animationFrameId;
+    constructor(container: HTMLElement);
+    render(compiledOutput: string, options: RenderOptions): Promise<void>;
+    private renderThreeJS;
+    private renderStaticPreview;
+    private addVRButton;
+    private addARButton;
+    cleanup(): void;
+}
+
+/**
+ * CDN configuration and defaults
+ */
+interface HoloCDNConfig {
+    cdnBase: string;
+    defaultTarget: string;
+    debug: boolean;
+    loadTimeoutMs: number;
+}
+declare const defaultCDNConfig: HoloCDNConfig;
+
+export { type HoloCDNConfig, type HoloSceneAttributes, HoloSceneElement, type HoloSceneFallback, HoloSceneRenderer, type HoloSceneTarget, defaultCDNConfig, registerHoloScene };