AR-js-org · kalwalt · Nov 4, 2025 · Oct 30, 2025 · Oct 30, 2025 · Oct 30, 2025
diff --git a/README.md b/README.md
@@ -81,6 +81,7 @@ npm run serve:vite
 ```
 
 **Examples:**
+
 - Minimal Example: examples/minimal/index.html (Vite: http://localhost:5173/examples/minimal/index.html)
 - Image Source Example: examples/basic-ecs/image-example.html (Vite: http://localhost:5173/examples/basic-ecs/image-example.html)
 
@@ -94,4 +95,4 @@ The original Source and Profile classes are still available and fully supported:
 import { Source, Profile } from "ar.js-core";
 ```
 
-See existing documentation for legacy API usage.
+See existing documentation for legacy API usage.
diff --git a/examples/basic-ecs/image-example.html b/examples/basic-ecs/image-example.html
@@ -1,167 +1,172 @@
 <!doctype html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
     />
     <title>AR.js-core ECS - Image Source Example</title>
     <style>
-        html, body {
-            margin: 0;
-            padding: 0;
-            height: 100%;
-            background: #111;
-            color: #eee;
-            font-family: system-ui, sans-serif;
-        }
-        #app {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-        }
-        #panel {
-            position: absolute;
-            top: 12px;
-            left: 12px;
-            right: 12px;
-            max-width: 720px;
-            padding: 10px 12px;
-            background: rgba(0,0,0,0.55);
-            border-radius: 6px;
-            z-index: 10;
-        }
-        #row {
-            display: flex;
-            gap: 8px;
-            margin-top: 8px;
-        }
-        #url {
-            flex: 1;
-            min-width: 240px;
-            color: #eee;
-            background: rgba(255,255,255,0.08);
-            border: 1px solid rgba(255,255,255,0.2);
-            padding: 6px 8px;
-            border-radius: 4px;
-            outline: none;
-        }
-        button {
-            color: #111;
-            background: #9ef01a;
-            border: none;
-            padding: 8px 12px;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        button:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-        /* The image element created by the plugin gets id=arjs-video */
-        #arjs-video {
-            position: absolute !important;
-            top: 0 !important;
-            left: 0 !important;
-            width: 100% !important;
-            height: 100% !important;
-            object-fit: contain;
-            z-index: -2 !important;
-        }
-        .status-ok { color: #9ef01a; }
-        .status-bad { color: #ff6b6b; }
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        background: #111;
+        color: #eee;
+        font-family: system-ui, sans-serif;
+      }
+      #app {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      #panel {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+        right: 12px;
+        max-width: 720px;
+        padding: 10px 12px;
+        background: rgba(0, 0, 0, 0.55);
+        border-radius: 6px;
+        z-index: 10;
+      }
+      #row {
+        display: flex;
+        gap: 8px;
+        margin-top: 8px;
+      }
+      #url {
+        flex: 1;
+        min-width: 240px;
+        color: #eee;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        padding: 6px 8px;
+        border-radius: 4px;
+        outline: none;
+      }
+      button {
+        color: #111;
+        background: #9ef01a;
+        border: none;
+        padding: 8px 12px;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+      /* The image element created by the plugin gets id=arjs-video */
+      #arjs-video {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: contain;
+        z-index: -2 !important;
+      }
+      .status-ok {
+        color: #9ef01a;
+      }
+      .status-bad {
+        color: #ff6b6b;
+      }
     </style>
-</head>
-<body>
-<div id="app">
-    <div id="panel">
+  </head>
+  <body>
+    <div id="app">
+      <div id="panel">
         <div><strong>AR.js-core ECS Image Example</strong></div>
         <div id="status" class="status-ok">Ready</div>
         <div id="row">
-            <input
-                    id="url"
-                    type="text"
-                    placeholder="Enter image URL..."
-                    value="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Example.jpg/640px-Example.jpg"
-            />
-            <button id="load">Load</button>
-            <button id="clear">Clear</button>
+          <input
+            id="url"
+            type="text"
+            placeholder="Enter image URL..."
+            value="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Example.jpg/640px-Example.jpg"
+          />
+          <button id="load">Load</button>
+          <button id="clear">Clear</button>
         </div>
+      </div>
     </div>
-</div>
 
-<script type="module">
-    import { Engine } from "../../src/core/engine.js";
-    import { imagePlugin } from "../../plugins/source/image.js";
+    <script type="module">
+      import { Engine } from "../../src/core/engine.js";
+      import { imagePlugin } from "../../plugins/source/image.js";
 
-    const statusEl = document.getElementById("status");
-    const urlEl = document.getElementById("url");
-    const loadBtn = document.getElementById("load");
-    const clearBtn = document.getElementById("clear");
+      const statusEl = document.getElementById("status");
+      const urlEl = document.getElementById("url");
+      const loadBtn = document.getElementById("load");
+      const clearBtn = document.getElementById("clear");
 
-    // Initialize engine (provides eventBus and context)
-    const engine = new Engine();
-    const context = engine.getContext();
+      // Initialize engine (provides eventBus and context)
+      const engine = new Engine();
+      const context = engine.getContext();
 
-    // Initialize the image plugin
-    await imagePlugin.init(context);
+      // Initialize the image plugin
+      await imagePlugin.init(context);
 
-    function setStatus(msg, ok = true) {
+      function setStatus(msg, ok = true) {
         statusEl.textContent = msg;
         statusEl.className = ok ? "status-ok" : "status-bad";
-    }
+      }
 
-    function removeExisting() {
+      function removeExisting() {
         const el = document.getElementById("arjs-video");
         if (el && el.parentNode) el.parentNode.removeChild(el);
-    }
+      }
 
-    async function loadImage(url) {
+      async function loadImage(url) {
         if (!url) return;
         try {
-            setStatus("Loading image...", true);
-            // Remove any previous image first
-            removeExisting();
+          setStatus("Loading image...", true);
+          // Remove any previous image first
+          removeExisting();
 
-            // Ask plugin to capture; it will append to document.body on load
-            const frame = await imagePlugin.capture(
-                {
-                    sourceUrl: url,
-                    sourceWidth: 640,
-                    sourceHeight: 480,
-                    displayWidth: 640,
-                    displayHeight: 480,
-                },
-                context
-            );
+          // Ask plugin to capture; it will append to document.body on load
+          const frame = await imagePlugin.capture(
+            {
+              sourceUrl: url,
+              sourceWidth: 640,
+              sourceHeight: 480,
+              displayWidth: 640,
+              displayHeight: 480,
+            },
+            context,
+          );
 
-            // If not yet appended by plugin, ensure it’s visible
-            if (frame?.element && !frame.element.isConnected) {
-                document.body.appendChild(frame.element);
-            }
+          // If not yet appended by plugin, ensure it’s visible
+          if (frame?.element && !frame.element.isConnected) {
+            document.body.appendChild(frame.element);
+          }
 
-            setStatus("Image loaded", true);
+          setStatus("Image loaded", true);
         } catch (e) {
-            console.error(e);
-            setStatus("Failed to load image. Check the URL and CORS.", false);
+          console.error(e);
+          setStatus("Failed to load image. Check the URL and CORS.", false);
         }
-    }
+      }
 
-    // Wire up UI
-    loadBtn.addEventListener("click", () => {
+      // Wire up UI
+      loadBtn.addEventListener("click", () => {
         const url = (urlEl.value || "").trim();
         loadImage(url);
-    });
+      });
 
-    clearBtn.addEventListener("click", () => {
+      clearBtn.addEventListener("click", () => {
         removeExisting();
         setStatus("Cleared", true);
-    });
+      });
 
-    // Auto-load the initial URL
-    loadImage(urlEl.value);
-</script>
-</body>
-</html>
+      // Auto-load the initial URL
+      loadImage(urlEl.value);
+    </script>
+  </body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -4,8 +4,8 @@ module.exports = {
   entry: "./src/index.js",
   output: {
     path: path.resolve("dist"),
-    filename: "ARjs-core.js",
-    library: "ARjs-core",
+    filename: "ar-core.js",
+    library: "ar.js-core",
     libraryTarget: "umd",
     // @see: https://github.com/webpack/webpack/issues/3929
     libraryExport: "default",