npm - @auraindustry/aurajs - Versions diffs - 0.0.3 → 0.0.5 - Mend

@auraindustry/aurajs 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,36 @@
+# @auraindustry/aurajs
+> Alpha status: AuraJS is currently in alpha and is not safe for production use yet.
+Write games in JavaScript and build native binaries for macOS, Linux, and Windows.
+## Create A New Game
+```bash
+npm install -g auramaxx
+auramaxx create my-game
+cd my-game
+npm run dev
+```
+## Publish And Play
+In a scaffolded AuraJS game:
+```bash
+npm run publish
+npm run play
+```
+`npm run publish` maps to `npx auramaxx publish` in generated projects.
+## API Surfaces
+- React embedding: `@auraindustry/aurajs/react`
+- Web runtime helpers: `@auraindustry/aurajs/web`
+## Docs
+- Repo README: <https://github.com/Aura-Industry/aurajs>
+- Core API: <https://github.com/Aura-Industry/aurajs/blob/main/packages/aurascript/docs/api-contract-v1.md>
+- 3D API: <https://github.com/Aura-Industry/aurajs/blob/main/packages/aurascript/docs/api-contract-3d-v2.md>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@auraindustry/aurajs",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Write games in JavaScript, build native binaries.",
   "type": "module",
   "exports": {

package/src/build-contract.mjs CHANGED Viewed

@@ -309,12 +309,25 @@ const WEB_INDEX_HTML = [
   '  <meta charset="utf-8" />',
   '  <meta name="viewport" content="width=device-width, initial-scale=1" />',
   '  <title>AuraJS Web Build</title>',
+  '  <style>',
+  '    html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #060912; }',
+  '    #aura-root { width: 100vw; height: 100vh; display: grid; place-items: center; }',
+  '    #aura-canvas { display: block; max-width: 100%; max-height: 100%; }',
+  '  </style>',
   '</head>',
   '<body>',
   '  <div id="aura-root">',
   '    <canvas id="aura-canvas"></canvas>',
   '  </div>',
   '  <script src="./js/aura-web-loader.js"></script>',
+  '  <script>',
+  '    window.addEventListener("load", function () {',
+  '      if (!window.AuraWebLoader || typeof window.AuraWebLoader.mount !== "function") return;',
+  '      window.AuraWebLoader.mount("#aura-root", { rootUrl: ".", mount: "#aura-root" }).catch(function (error) {',
+  '        console.error(error);',
+  '      });',
+  '    });',
+  '  </script>',
   '</body>',
   '</html>',
 ].join('\n');
@@ -337,6 +350,7 @@ const WEB_LOADER_SOURCE = `
   let cachedManifest = null;
   let cachedRuntimeConfig = null;
   let mountedRuntime = null;
+  let auraRuntime = null;
   function normalizeCount(value) {
     const numeric = Number(value);
@@ -434,6 +448,135 @@ const WEB_LOADER_SOURCE = `
     return path.replace(/\\\\/g, '/').replace(/^\\.\\//, '');
   }
+  function clampUnit(value, fallback) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric)) return fallback;
+    if (numeric <= 0) return 0;
+    if (numeric >= 1) return 1;
+    return numeric;
+  }
+  function createUnitColor(r, g, b, a) {
+    return {
+      r: clampUnit(r, 0),
+      g: clampUnit(g, 0),
+      b: clampUnit(b, 0),
+      a: clampUnit(a == null ? 1 : a, 1)
+    };
+  }
+  function createByteColor(r, g, b, a) {
+    return {
+      r: Math.max(0, Math.min(255, Math.round(Number(r) || 0))),
+      g: Math.max(0, Math.min(255, Math.round(Number(g) || 0))),
+      b: Math.max(0, Math.min(255, Math.round(Number(b) || 0))),
+      a: Math.max(0, Math.min(255, Math.round(Number.isFinite(Number(a)) ? Number(a) : 255)))
+    };
+  }
+  function normalizeColor(value, fallback) {
+    const source = value && typeof value === 'object' ? value : null;
+    const base = fallback && typeof fallback === 'object' ? fallback : createUnitColor(1, 1, 1, 1);
+    if (!source) {
+      return createUnitColor(base.r, base.g, base.b, base.a);
+    }
+    const rawR = Number(source.r);
+    const rawG = Number(source.g);
+    const rawB = Number(source.b);
+    const rawA = source.a == null ? base.a : Number(source.a);
+    const treatAsByteRange = [rawR, rawG, rawB, rawA].some((component) => Number.isFinite(component) && component > 1);
+    if (treatAsByteRange) {
+      return createUnitColor(
+        Number.isFinite(rawR) ? rawR / 255 : base.r,
+        Number.isFinite(rawG) ? rawG / 255 : base.g,
+        Number.isFinite(rawB) ? rawB / 255 : base.b,
+        Number.isFinite(rawA) ? rawA / 255 : base.a
+      );
+    }
+    return createUnitColor(
+      Number.isFinite(rawR) ? rawR : base.r,
+      Number.isFinite(rawG) ? rawG : base.g,
+      Number.isFinite(rawB) ? rawB : base.b,
+      Number.isFinite(rawA) ? rawA : base.a
+    );
+  }
+  function colorToCss(value, fallback) {
+    const normalized = normalizeColor(value, fallback);
+    return 'rgba('
+      + Math.round(normalized.r * 255) + ', '
+      + Math.round(normalized.g * 255) + ', '
+      + Math.round(normalized.b * 255) + ', '
+      + normalized.a + ')';
+  }
+  function normalizeCanvasSize(value, fallback) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric) || numeric <= 0) return fallback;
+    return Math.max(1, Math.floor(numeric));
+  }
+  function normalizePositiveNumber(value, fallback) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric) || numeric <= 0) return fallback;
+    return numeric;
+  }
+  function normalizeTextAlign(value) {
+    if (value === 'center' || value === 'right' || value === 'left') {
+      return value;
+    }
+    return 'left';
+  }
+  function normalizeKeyName(value) {
+    if (typeof value !== 'string' || value.length === 0) {
+      return null;
+    }
+    const key = value.toLowerCase();
+    switch (key) {
+      case ' ':
+      case 'spacebar':
+        return 'space';
+      case 'left':
+      case 'arrowleft':
+        return 'arrowleft';
+      case 'right':
+      case 'arrowright':
+        return 'arrowright';
+      case 'up':
+      case 'arrowup':
+        return 'arrowup';
+      case 'down':
+      case 'arrowdown':
+        return 'arrowdown';
+      case 'return':
+        return 'enter';
+      default:
+        return key;
+    }
+  }
+  function rectIntersects(a, b) {
+    const ax = Number(a && a.x);
+    const ay = Number(a && a.y);
+    const aw = Number(a && a.w);
+    const ah = Number(a && a.h);
+    const bx = Number(b && b.x);
+    const by = Number(b && b.y);
+    const bw = Number(b && b.w);
+    const bh = Number(b && b.h);
+    if (![ax, ay, aw, ah, bx, by, bw, bh].every((value) => Number.isFinite(value))) {
+      return false;
+    }
+    return ax < bx + bw && ax + aw > bx && ay < by + bh && ay + ah > by;
+  }
   function resolveTarget(target) {
     if (typeof target === 'string') {
       return document.querySelector(target);
@@ -484,17 +627,503 @@ const WEB_LOADER_SOURCE = `
     });
   }
-  function normalizePositiveNumber(value, fallback) {
-    const numeric = Number(value);
-    if (!Number.isFinite(numeric) || numeric <= 0) return fallback;
-    return numeric;
+  function createBrowserAuraSurface(runtimeConfig) {
+    const defaultColor = createUnitColor(1, 1, 1, 1);
+    let currentRuntimeConfig = runtimeConfig && typeof runtimeConfig === 'object' ? runtimeConfig : {};
+    let currentCanvasConfig = currentRuntimeConfig.canvas && typeof currentRuntimeConfig.canvas === 'object'
+      ? currentRuntimeConfig.canvas
+      : {};
+    const auraRef = globalRef.aura && typeof globalRef.aura === 'object'
+      ? globalRef.aura
+      : {};
+    globalRef.aura = auraRef;
+    const inputState = {
+      down: new Set(),
+      pendingPressed: new Set(),
+      pendingReleased: new Set(),
+      framePressed: new Set(),
+      frameReleased: new Set()
+    };
+    const runtime = {
+      canvas: null,
+      mountTarget: null,
+      context2d: null,
+      configuredWidth: normalizeCanvasSize(currentCanvasConfig.width, 1280),
+      configuredHeight: normalizeCanvasSize(currentCanvasConfig.height, 720),
+      resizeMode: currentCanvasConfig.resizeMode === 'fixed' ? 'fixed' : 'fit-container',
+      pixelRatio: 1,
+      width: normalizeCanvasSize(currentCanvasConfig.width, 1280),
+      height: normalizeCanvasSize(currentCanvasConfig.height, 720),
+      transformDepth: 0,
+      listenersAttached: false,
+      keydownListener: null,
+      keyupListener: null,
+      blurListener: null,
+      resizeListener: null
+    };
+    function ensureStyleObject(node) {
+      if (!node || typeof node !== 'object') return null;
+      if (!node.style || typeof node.style !== 'object') {
+        node.style = {};
+      }
+      return node.style;
+    }
+    function ensureCanvasContext() {
+      if (!runtime.canvas) return null;
+      if (!runtime.context2d && typeof runtime.canvas.getContext === 'function') {
+        runtime.context2d = runtime.canvas.getContext('2d');
+      }
+      return runtime.context2d;
+    }
+    function syncCanvasSize(notifyResize) {
+      let width = runtime.configuredWidth;
+      let height = runtime.configuredHeight;
+      if (runtime.resizeMode === 'fit-container') {
+        const containerWidth = runtime.mountTarget
+          ? normalizeCanvasSize(runtime.mountTarget.clientWidth, 0)
+          : 0;
+        const containerHeight = runtime.mountTarget
+          ? normalizeCanvasSize(runtime.mountTarget.clientHeight, 0)
+          : 0;
+        if (containerWidth > 0 && containerHeight > 0) {
+          width = containerWidth;
+          height = containerHeight;
+        }
+      }
+      runtime.width = normalizeCanvasSize(width, runtime.configuredWidth);
+      runtime.height = normalizeCanvasSize(height, runtime.configuredHeight);
+      runtime.pixelRatio = Math.min(Math.max(normalizePositiveNumber(globalRef.devicePixelRatio, 1), 1), 2);
+      auraRef.window.width = runtime.width;
+      auraRef.window.height = runtime.height;
+      auraRef.window.pixelRatio = runtime.pixelRatio;
+      if (runtime.canvas) {
+        runtime.canvas.width = Math.max(1, Math.round(runtime.width * runtime.pixelRatio));
+        runtime.canvas.height = Math.max(1, Math.round(runtime.height * runtime.pixelRatio));
+        runtime.canvas.tabIndex = 0;
+        const style = ensureStyleObject(runtime.canvas);
+        if (style) {
+          style.width = runtime.width + 'px';
+          style.height = runtime.height + 'px';
+          style.display = 'block';
+        }
+      }
+      if (notifyResize && typeof auraRef.onResize === 'function') {
+        auraRef.onResize(runtime.width, runtime.height);
+      }
+    }
+    function resetDrawState() {
+      const ctx = ensureCanvasContext();
+      if (!ctx) return;
+      if (typeof ctx.setTransform === 'function') {
+        ctx.setTransform(runtime.pixelRatio, 0, 0, runtime.pixelRatio, 0, 0);
+      } else {
+        if (typeof ctx.resetTransform === 'function') {
+          ctx.resetTransform();
+        }
+        if (typeof ctx.scale === 'function') {
+          ctx.scale(runtime.pixelRatio, runtime.pixelRatio);
+        }
+      }
+      runtime.transformDepth = 0;
+      ctx.globalAlpha = 1;
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'top';
+    }
+    function applyFont(options) {
+      const ctx = ensureCanvasContext();
+      const source = options && typeof options === 'object' ? options : {};
+      const size = normalizePositiveNumber(source.size, 16);
+      const family = typeof source.font === 'string' && source.font.trim().length > 0
+        ? source.font.trim()
+        : 'sans-serif';
+      if (ctx) {
+        ctx.font = size + 'px ' + family;
+        ctx.textAlign = normalizeTextAlign(source.align);
+        ctx.textBaseline = 'top';
+      }
+      return { size, align: normalizeTextAlign(source.align) };
+    }
+    function attachListeners() {
+      if (runtime.listenersAttached) return;
+      runtime.listenersAttached = true;
+      runtime.keydownListener = function (event) {
+        const key = normalizeKeyName(event && (event.key || event.code));
+        if (!key) return;
+        if (!inputState.down.has(key)) {
+          inputState.pendingPressed.add(key);
+        }
+        inputState.down.add(key);
+        if (event && typeof event.preventDefault === 'function' && (key === 'space' || key.startsWith('arrow'))) {
+          event.preventDefault();
+        }
+      };
+      runtime.keyupListener = function (event) {
+        const key = normalizeKeyName(event && (event.key || event.code));
+        if (!key) return;
+        inputState.down.delete(key);
+        inputState.pendingReleased.add(key);
+        if (event && typeof event.preventDefault === 'function' && (key === 'space' || key.startsWith('arrow'))) {
+          event.preventDefault();
+        }
+      };
+      runtime.blurListener = function () {
+        inputState.down.clear();
+        inputState.pendingPressed.clear();
+        inputState.pendingReleased.clear();
+        inputState.framePressed.clear();
+        inputState.frameReleased.clear();
+      };
+      runtime.resizeListener = function () {
+        syncCanvasSize(true);
+      };
+      if (typeof globalRef.addEventListener === 'function') {
+        globalRef.addEventListener('keydown', runtime.keydownListener);
+        globalRef.addEventListener('keyup', runtime.keyupListener);
+        globalRef.addEventListener('blur', runtime.blurListener);
+        globalRef.addEventListener('resize', runtime.resizeListener);
+      }
+    }
+    function detachListeners() {
+      if (!runtime.listenersAttached) return;
+      runtime.listenersAttached = false;
+      if (typeof globalRef.removeEventListener === 'function') {
+        globalRef.removeEventListener('keydown', runtime.keydownListener);
+        globalRef.removeEventListener('keyup', runtime.keyupListener);
+        globalRef.removeEventListener('blur', runtime.blurListener);
+        globalRef.removeEventListener('resize', runtime.resizeListener);
+      }
+    }
+    auraRef.setup = typeof auraRef.setup === 'function' ? auraRef.setup : null;
+    auraRef.update = typeof auraRef.update === 'function' ? auraRef.update : null;
+    auraRef.draw = typeof auraRef.draw === 'function' ? auraRef.draw : null;
+    auraRef.onResize = typeof auraRef.onResize === 'function' ? auraRef.onResize : null;
+    auraRef.onFocus = typeof auraRef.onFocus === 'function' ? auraRef.onFocus : null;
+    auraRef.onBlur = typeof auraRef.onBlur === 'function' ? auraRef.onBlur : null;
+    auraRef.onQuit = typeof auraRef.onQuit === 'function' ? auraRef.onQuit : null;
+    auraRef.rgba = function (r, g, b, a) {
+      return createUnitColor(r, g, b, a == null ? 1 : a);
+    };
+    auraRef.color = auraRef.rgba;
+    auraRef.Color = auraRef.Color && typeof auraRef.Color === 'object'
+      ? auraRef.Color
+      : {
+        WHITE: createUnitColor(1, 1, 1, 1),
+        BLACK: createUnitColor(0, 0, 0, 1),
+        RED: createUnitColor(1, 0, 0, 1),
+        YELLOW: createUnitColor(1, 1, 0, 1),
+        TRANSPARENT: createUnitColor(0, 0, 0, 0)
+      };
+    auraRef.colors = auraRef.colors && typeof auraRef.colors === 'object'
+      ? auraRef.colors
+      : {
+        white: createByteColor(255, 255, 255, 255),
+        black: createByteColor(0, 0, 0, 255),
+        red: createByteColor(255, 0, 0, 255),
+        yellow: createByteColor(255, 255, 0, 255),
+        transparent: createByteColor(0, 0, 0, 0)
+      };
+    auraRef.window = auraRef.window && typeof auraRef.window === 'object' ? auraRef.window : {};
+    auraRef.window.width = runtime.width;
+    auraRef.window.height = runtime.height;
+    auraRef.window.pixelRatio = runtime.pixelRatio;
+    auraRef.window.fps = 60;
+    auraRef.window.setTitle = function (title) {
+      if (typeof title === 'string') {
+        document.title = title;
+      }
+    };
+    auraRef.window.setSize = function (width, height) {
+      runtime.configuredWidth = normalizeCanvasSize(width, runtime.configuredWidth);
+      runtime.configuredHeight = normalizeCanvasSize(height, runtime.configuredHeight);
+      syncCanvasSize(true);
+      resetDrawState();
+      return true;
+    };
+    auraRef.window.setFullscreen = function () {
+      return false;
+    };
+    auraRef.window.getSize = function () {
+      return { width: runtime.width, height: runtime.height };
+    };
+    auraRef.window.getPixelRatio = function () {
+      return runtime.pixelRatio;
+    };
+    auraRef.window.getFPS = function () {
+      return auraRef.window.fps;
+    };
+    auraRef.window.close = function () {
+      return true;
+    };
+    auraRef.collision = auraRef.collision && typeof auraRef.collision === 'object' ? auraRef.collision : {};
+    auraRef.collision.rectRect = function (a, b) {
+      return rectIntersects(a, b);
+    };
+    auraRef.collide = auraRef.collide && typeof auraRef.collide === 'object' ? auraRef.collide : auraRef.collision;
+    auraRef.collide.rectRect = auraRef.collision.rectRect;
+    auraRef.input = auraRef.input && typeof auraRef.input === 'object' ? auraRef.input : {};
+    auraRef.input.isDown = function (name) {
+      const key = normalizeKeyName(name);
+      return key ? inputState.down.has(key) : false;
+    };
+    auraRef.input.isPressed = function (name) {
+      const key = normalizeKeyName(name);
+      return key ? inputState.framePressed.has(key) : false;
+    };
+    auraRef.input.isReleased = function (name) {
+      const key = normalizeKeyName(name);
+      return key ? inputState.frameReleased.has(key) : false;
+    };
+    auraRef.input.isKeyDown = function (name) {
+      return auraRef.input.isDown(name);
+    };
+    auraRef.input.isKeyPressed = function (name) {
+      return auraRef.input.isPressed(name);
+    };
+    auraRef.input.isKeyReleased = function (name) {
+      return auraRef.input.isReleased(name);
+    };
+    auraRef.input.mouse = auraRef.input.mouse && typeof auraRef.input.mouse === 'object' ? auraRef.input.mouse : {};
+    auraRef.input.mouse.x = Number(auraRef.input.mouse.x) || 0;
+    auraRef.input.mouse.y = Number(auraRef.input.mouse.y) || 0;
+    auraRef.input.mouse.scroll = Number(auraRef.input.mouse.scroll) || 0;
+    auraRef.input.mouse.isDown = function () { return false; };
+    auraRef.input.mouse.isPressed = function () { return false; };
+    auraRef.input.mouse.isReleased = function () { return false; };
+    auraRef.input.getMousePosition = function () {
+      return { x: auraRef.input.mouse.x, y: auraRef.input.mouse.y };
+    };
+    auraRef.assets = auraRef.assets && typeof auraRef.assets === 'object' ? auraRef.assets : {};
+    auraRef.assets.load = typeof auraRef.assets.load === 'function'
+      ? auraRef.assets.load
+      : async function () { return true; };
+    auraRef.assets.exists = typeof auraRef.assets.exists === 'function'
+      ? auraRef.assets.exists
+      : function () { return false; };
+    auraRef.assets.image = typeof auraRef.assets.image === 'function'
+      ? auraRef.assets.image
+      : function (name) { return { kind: 'image', name: String(name || '') }; };
+    auraRef.assets.sound = typeof auraRef.assets.sound === 'function'
+      ? auraRef.assets.sound
+      : function (name) { return { kind: 'sound', name: String(name || '') }; };
+    auraRef.assets.text = typeof auraRef.assets.text === 'function'
+      ? auraRef.assets.text
+      : function () { return ''; };
+    auraRef.assets.json = typeof auraRef.assets.json === 'function'
+      ? auraRef.assets.json
+      : function () { return {}; };
+    auraRef.assets.bytes = typeof auraRef.assets.bytes === 'function'
+      ? auraRef.assets.bytes
+      : function () { return new Uint8Array(); };
+    auraRef.draw2d = auraRef.draw2d && typeof auraRef.draw2d === 'object' ? auraRef.draw2d : {};
+    auraRef.draw2d.clear = function (colorOrR, g, b, a) {
+      const ctx = ensureCanvasContext();
+      if (!ctx) return;
+      const fillColor = arguments.length > 1
+        ? createUnitColor(colorOrR, g, b, a == null ? 1 : a)
+        : normalizeColor(colorOrR, createUnitColor(0, 0, 0, 1));
+      resetDrawState();
+      ctx.clearRect(0, 0, runtime.width, runtime.height);
+      ctx.fillStyle = colorToCss(fillColor, createUnitColor(0, 0, 0, 1));
+      ctx.fillRect(0, 0, runtime.width, runtime.height);
+    };
+    auraRef.draw2d.rect = function (x, y, w, h, color) {
+      const ctx = ensureCanvasContext();
+      if (!ctx) return;
+      ctx.strokeStyle = colorToCss(color, defaultColor);
+      ctx.lineWidth = 1;
+      ctx.strokeRect(Number(x) || 0, Number(y) || 0, Number(w) || 0, Number(h) || 0);
+    };
+    auraRef.draw2d.rectOutline = auraRef.draw2d.rect;
+    auraRef.draw2d.rectFill = function (x, y, w, h, color) {
+      const ctx = ensureCanvasContext();
+      if (!ctx) return;
+      ctx.fillStyle = colorToCss(color, defaultColor);
+      ctx.fillRect(Number(x) || 0, Number(y) || 0, Number(w) || 0, Number(h) || 0);
+    };
+    auraRef.draw2d.circle = function (x, y, radius, color) {
+      const ctx = ensureCanvasContext();
+      if (!ctx) return;
+      ctx.beginPath();
+      ctx.arc(Number(x) || 0, Number(y) || 0, Math.max(0, Number(radius) || 0), 0, Math.PI * 2);
+      ctx.strokeStyle = colorToCss(color, defaultColor);
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    };
+    auraRef.draw2d.circleFill = function (x, y, radius, color) {
+      const ctx = ensureCanvasContext();
+      if (!ctx) return;
+      ctx.beginPath();
+      ctx.arc(Number(x) || 0, Number(y) || 0, Math.max(0, Number(radius) || 0), 0, Math.PI * 2);
+      ctx.fillStyle = colorToCss(color, defaultColor);
+      ctx.fill();
+    };
+    auraRef.draw2d.line = function (x1, y1, x2, y2, color, width) {
+      const ctx = ensureCanvasContext();
+      if (!ctx) return;
+      ctx.beginPath();
+      ctx.moveTo(Number(x1) || 0, Number(y1) || 0);
+      ctx.lineTo(Number(x2) || 0, Number(y2) || 0);
+      ctx.strokeStyle = colorToCss(color, defaultColor);
+      ctx.lineWidth = normalizePositiveNumber(width, 1);
+      ctx.stroke();
+    };
+    auraRef.draw2d.text = function (text, x, y, options) {
+      const ctx = ensureCanvasContext();
+      if (!ctx) return;
+      const config = applyFont(options);
+      const source = options && typeof options === 'object' ? options : {};
+      ctx.fillStyle = colorToCss(source.color, defaultColor);
+      ctx.textAlign = config.align;
+      ctx.textBaseline = 'top';
+      ctx.fillText(String(text == null ? '' : text), Number(x) || 0, Number(y) || 0);
+    };
+    auraRef.draw2d.measureText = function (text, options) {
+      const source = options && typeof options === 'object' ? options : {};
+      const size = normalizePositiveNumber(source.size, 16);
+      const ctx = ensureCanvasContext();
+      if (!ctx) {
+        const fallbackWidth = String(text == null ? '' : text).length * size * 0.6;
+        return { width: Number(fallbackWidth.toFixed(3)), height: size };
+      }
+      applyFont(options);
+      const metrics = ctx.measureText(String(text == null ? '' : text));
+      const measuredWidth = Number.isFinite(metrics && metrics.width)
+        ? metrics.width
+        : String(text == null ? '' : text).length * size * 0.6;
+      return { width: Number(measuredWidth.toFixed(3)), height: size };
+    };
+    auraRef.draw2d.image = typeof auraRef.draw2d.image === 'function'
+      ? auraRef.draw2d.image
+      : function () { return true; };
+    auraRef.draw2d.sprite = typeof auraRef.draw2d.sprite === 'function'
+      ? auraRef.draw2d.sprite
+      : function () { return true; };
+    auraRef.draw2d.pushTransform = function () {
+      const ctx = ensureCanvasContext();
+      if (!ctx || typeof ctx.save !== 'function') return;
+      runtime.transformDepth += 1;
+      ctx.save();
+    };
+    auraRef.draw2d.popTransform = function () {
+      const ctx = ensureCanvasContext();
+      if (!ctx || typeof ctx.restore !== 'function' || runtime.transformDepth <= 0) return;
+      runtime.transformDepth -= 1;
+      ctx.restore();
+    };
+    auraRef.draw2d.push = auraRef.draw2d.pushTransform;
+    auraRef.draw2d.pop = auraRef.draw2d.popTransform;
+    auraRef.draw2d.translate = function (x, y) {
+      const ctx = ensureCanvasContext();
+      if (!ctx || typeof ctx.translate !== 'function') return;
+      ctx.translate(Number(x) || 0, Number(y) || 0);
+    };
+    auraRef.draw2d.rotate = function (angle) {
+      const ctx = ensureCanvasContext();
+      if (!ctx || typeof ctx.rotate !== 'function') return;
+      ctx.rotate(Number(angle) || 0);
+    };
+    auraRef.draw2d.scale = function (x, y) {
+      const ctx = ensureCanvasContext();
+      if (!ctx || typeof ctx.scale !== 'function') return;
+      const scaleX = normalizePositiveNumber(x, 1);
+      const scaleY = normalizePositiveNumber(y, scaleX);
+      ctx.scale(scaleX, scaleY);
+    };
+    return {
+      aura: auraRef,
+      setRuntimeConfig(nextRuntimeConfig) {
+        currentRuntimeConfig = nextRuntimeConfig && typeof nextRuntimeConfig === 'object' ? nextRuntimeConfig : {};
+        currentCanvasConfig = currentRuntimeConfig.canvas && typeof currentRuntimeConfig.canvas === 'object'
+          ? currentRuntimeConfig.canvas
+          : {};
+        runtime.configuredWidth = normalizeCanvasSize(currentCanvasConfig.width, runtime.configuredWidth);
+        runtime.configuredHeight = normalizeCanvasSize(currentCanvasConfig.height, runtime.configuredHeight);
+        runtime.resizeMode = currentCanvasConfig.resizeMode === 'fixed' ? 'fixed' : 'fit-container';
+        syncCanvasSize(false);
+      },
+      mount(canvas, mountTarget) {
+        runtime.canvas = canvas || runtime.canvas;
+        runtime.mountTarget = mountTarget || runtime.mountTarget;
+        ensureCanvasContext();
+        syncCanvasSize(false);
+        resetDrawState();
+        attachListeners();
+        inputState.down.clear();
+        inputState.pendingPressed.clear();
+        inputState.pendingReleased.clear();
+        inputState.framePressed.clear();
+        inputState.frameReleased.clear();
+        if (runtime.canvas && typeof runtime.canvas.focus === 'function') {
+          runtime.canvas.focus();
+        }
+        return true;
+      },
+      beginFrame() {
+        inputState.framePressed = new Set(inputState.pendingPressed);
+        inputState.frameReleased = new Set(inputState.pendingReleased);
+        inputState.pendingPressed.clear();
+        inputState.pendingReleased.clear();
+        resetDrawState();
+      },
+      endFrame() {
+        const ctx = ensureCanvasContext();
+        if (ctx && typeof ctx.restore === 'function') {
+          while (runtime.transformDepth > 0) {
+            runtime.transformDepth -= 1;
+            ctx.restore();
+          }
+        }
+      },
+      unmount() {
+        detachListeners();
+        inputState.down.clear();
+        inputState.pendingPressed.clear();
+        inputState.pendingReleased.clear();
+        inputState.framePressed.clear();
+        inputState.frameReleased.clear();
+        runtime.mountTarget = null;
+        runtime.canvas = null;
+        runtime.context2d = null;
+        runtime.transformDepth = 0;
+        return true;
+      }
+    };
   }
   function createDeterministicBootstrap() {
     return async function bootstrap(input) {
-      const auraRef = globalRef.aura && typeof globalRef.aura === 'object'
-        ? globalRef.aura
-        : (globalRef.aura = {});
+      const auraRef = auraRuntime && auraRuntime.aura
+        ? auraRuntime.aura
+        : (globalRef.aura && typeof globalRef.aura === 'object'
+          ? globalRef.aura
+          : (globalRef.aura = {}));
       const runtimeConfig = input && typeof input.runtimeConfig === 'object' && input.runtimeConfig
         ? input.runtimeConfig
         : {};
@@ -571,6 +1200,9 @@ const WEB_LOADER_SOURCE = `
         runtimeState.lastDeltaSeconds = fixedDeltaSeconds;
         try {
+          if (auraRuntime && typeof auraRuntime.beginFrame === 'function') {
+            auraRuntime.beginFrame();
+          }
           if (typeof auraRef.update === 'function') {
             auraRef.update(fixedDeltaSeconds);
             runtimeState.updateCalls += 1;
@@ -579,6 +1211,9 @@ const WEB_LOADER_SOURCE = `
             auraRef.draw();
             runtimeState.drawCalls += 1;
           }
+          if (auraRuntime && typeof auraRuntime.endFrame === 'function') {
+            auraRuntime.endFrame();
+          }
         } catch (error) {
           runtimeState.running = false;
           syncLifecycle();
@@ -616,6 +1251,9 @@ const WEB_LOADER_SOURCE = `
             cancelFrame(runtimeState.rafHandle);
             runtimeState.rafHandle = null;
           }
+          if (auraRuntime && typeof auraRuntime.unmount === 'function') {
+            auraRuntime.unmount();
+          }
           syncLifecycle();
           return true;
         }
@@ -662,6 +1300,12 @@ const WEB_LOADER_SOURCE = `
           ensureManifestValid(cachedManifest);
           ensureRuntimeConfigValid(cachedRuntimeConfig);
+          if (!auraRuntime) {
+            auraRuntime = createBrowserAuraSurface(cachedRuntimeConfig);
+          } else if (typeof auraRuntime.setRuntimeConfig === 'function') {
+            auraRuntime.setRuntimeConfig(cachedRuntimeConfig);
+          }
           const bundleEntry = normalizePath(cachedManifest.entrypoints.bundle);
           if (bundleEntry.length === 0) {
             throw createError('web_entrypoint_missing', 'Bundle entrypoint is empty.', 'loader', false, {});
@@ -703,6 +1347,13 @@ const WEB_LOADER_SOURCE = `
             throw createError('web_loader_mount_failed', 'Canvas target was not found.', 'loader', true, {});
           }
+          if (!auraRuntime) {
+            auraRuntime = createBrowserAuraSurface(cachedRuntimeConfig || {});
+          }
+          if (typeof auraRuntime.mount === 'function') {
+            auraRuntime.mount(canvas, targetNode);
+          }
           const bootstrap = resolveBootstrap();
           if (typeof bootstrap !== 'function') {
             throw createError('web_runtime_bootstrap_missing', 'Bundle did not expose required bootstrap function.', 'runtime', false, {});