@needle-tools/engine 5.0.0 → 5.1.0-experimental.0

package/lib/engine-components/ui/TextUikit.d.ts

@@ -0,0 +1,42 @@
+import { type ContainerProperties } from "@pmndrs/uikit";
+import { RGBAColor } from "../../engine/js-extensions/index.js";
+import { BaseUikitComponent } from "./BaseUikitComponent.js";
+export declare enum TextAnchor {
+    UpperLeft = 0,
+    UpperCenter = 1,
+    UpperRight = 2,
+    MiddleLeft = 3,
+    MiddleCenter = 4,
+    MiddleRight = 5,
+    LowerLeft = 6,
+    LowerCenter = 7,
+    LowerRight = 8
+}
+/**
+ * TextUikit is a UI component that displays text using pmndrs/uikit.
+ * It's the uikit equivalent of the Text component.
+ *
+ * @summary Display text in the UI using uikit
+ * @category User Interface
+ * @group Components
+ */
+export declare class TextUikit extends BaseUikitComponent {
+    alignment: TextAnchor;
+    get text(): string;
+    set text(val: string);
+    get fontSize(): number;
+    set fontSize(val: number);
+    get color(): RGBAColor;
+    set color(col: RGBAColor);
+    private _text;
+    private _fontSize;
+    private _color;
+    private _sRGBColor;
+    private _uikitTextElement;
+    protected createUikitElement(): void;
+    protected getUikitProperties(): ContainerProperties;
+    private updateTextContent;
+    private onColorChanged;
+    private updateColorForUikit;
+    onDestroy(): void;
+}

package/lib/engine-components/ui/TextUikit.js

@@ -0,0 +1,164 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Color } from "three";
+import { Container, Text as UikitText } from "@pmndrs/uikit";
+import { serializable } from "../../engine/engine_serialization_decorator.js";
+import { RGBAColor } from "../../engine/js-extensions/index.js";
+import { BaseUikitComponent } from "./BaseUikitComponent.js";
+export var TextAnchor;
+(function (TextAnchor) {
+    TextAnchor[TextAnchor["UpperLeft"] = 0] = "UpperLeft";
+    TextAnchor[TextAnchor["UpperCenter"] = 1] = "UpperCenter";
+    TextAnchor[TextAnchor["UpperRight"] = 2] = "UpperRight";
+    TextAnchor[TextAnchor["MiddleLeft"] = 3] = "MiddleLeft";
+    TextAnchor[TextAnchor["MiddleCenter"] = 4] = "MiddleCenter";
+    TextAnchor[TextAnchor["MiddleRight"] = 5] = "MiddleRight";
+    TextAnchor[TextAnchor["LowerLeft"] = 6] = "LowerLeft";
+    TextAnchor[TextAnchor["LowerCenter"] = 7] = "LowerCenter";
+    TextAnchor[TextAnchor["LowerRight"] = 8] = "LowerRight";
+})(TextAnchor || (TextAnchor = {}));
+/**
+ * TextUikit is a UI component that displays text using pmndrs/uikit.
+ * It's the uikit equivalent of the Text component.
+ *
+ * @summary Display text in the UI using uikit
+ * @category User Interface
+ * @group Components
+ */
+export class TextUikit extends BaseUikitComponent {
+    alignment = TextAnchor.UpperLeft;
+    get text() {
+        return this._text;
+    }
+    set text(val) {
+        if (val !== this._text) {
+            this._text = val;
+            this.updateTextContent();
+        }
+    }
+    get fontSize() {
+        return this._fontSize;
+    }
+    set fontSize(val) {
+        this._fontSize = val;
+        this.updateUikitProperties({ fontSize: val });
+    }
+    get color() {
+        if (!this._color)
+            this._color = new RGBAColor(1, 1, 1, 1);
+        return this._color;
+    }
+    set color(col) {
+        const changed = !this._color || this._color.r !== col.r || this._color.g !== col.g || this._color.b !== col.b || this._color.alpha !== col.alpha;
+        if (!changed)
+            return;
+        if (!this._color) {
+            this._color = new RGBAColor(1, 1, 1, 1);
+        }
+        this._color.copy(col);
+        this.onColorChanged();
+    }
+    _text = "";
+    _fontSize = 16;
+    _color = null;
+    _sRGBColor = new Color();
+    _uikitTextElement = null;
+    createUikitElement() {
+        if (this.uikitElement)
+            return;
+        // Create container for the text
+        const properties = this.getUikitProperties();
+        this.uikitElement = new Container(properties);
+        this.uikitElement.name = this.name || "TextUikit";
+        // Create and add text element
+        this.updateColorForUikit();
+        this._uikitTextElement = new UikitText({
+            text: this._text,
+            fontSize: this._fontSize,
+            color: `#${this._sRGBColor.getHexString()}`,
+        });
+        this.uikitElement.add(this._uikitTextElement);
+    }
+    getUikitProperties() {
+        const props = {};
+        // Map alignment to flexbox properties
+        switch (this.alignment) {
+            case TextAnchor.UpperLeft:
+            case TextAnchor.MiddleLeft:
+            case TextAnchor.LowerLeft:
+                props.alignItems = "flex-start";
+                break;
+            case TextAnchor.UpperCenter:
+            case TextAnchor.MiddleCenter:
+            case TextAnchor.LowerCenter:
+                props.alignItems = "center";
+                break;
+            case TextAnchor.UpperRight:
+            case TextAnchor.MiddleRight:
+            case TextAnchor.LowerRight:
+                props.alignItems = "flex-end";
+                break;
+        }
+        switch (this.alignment) {
+            case TextAnchor.UpperLeft:
+            case TextAnchor.UpperCenter:
+            case TextAnchor.UpperRight:
+                props.justifyContent = "flex-start";
+                break;
+            case TextAnchor.MiddleLeft:
+            case TextAnchor.MiddleCenter:
+            case TextAnchor.MiddleRight:
+                props.justifyContent = "center";
+                break;
+            case TextAnchor.LowerLeft:
+            case TextAnchor.LowerCenter:
+            case TextAnchor.LowerRight:
+                props.justifyContent = "flex-end";
+                break;
+        }
+        return props;
+    }
+    updateTextContent() {
+        if (this._uikitTextElement) {
+            this._uikitTextElement.setProperties({ text: this._text });
+        }
+    }
+    onColorChanged() {
+        this.updateColorForUikit();
+        if (this._uikitTextElement) {
+            this._uikitTextElement.setProperties({
+                color: `#${this._sRGBColor.getHexString()}`,
+            });
+        }
+    }
+    updateColorForUikit() {
+        if (this._color) {
+            this._sRGBColor.copy(this._color);
+            this._sRGBColor.convertLinearToSRGB();
+        }
+    }
+    onDestroy() {
+        if (this._uikitTextElement) {
+            this._uikitTextElement.removeFromParent();
+            this._uikitTextElement = null;
+        }
+        super.onDestroy();
+    }
+}
+__decorate([
+    serializable()
+], TextUikit.prototype, "alignment", void 0);
+__decorate([
+    serializable()
+], TextUikit.prototype, "text", null);
+__decorate([
+    serializable()
+], TextUikit.prototype, "fontSize", null);
+__decorate([
+    serializable(RGBAColor)
+], TextUikit.prototype, "color", null);
+//# sourceMappingURL=TextUikit.js.map

package/lib/engine-components/ui/TextUikit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextUikit.js","sourceRoot":"","sources":["../../../src/engine-components/ui/TextUikit.ts"],"names":[],"mappings":"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"}

package/lib/engine-components/ui/index.d.ts

@@ -1 +1,2 @@
 export * from "./PointerEvents.js";
+export * from "./Text.js";

package/lib/engine-components/ui/index.js

@@ -1,2 +1,3 @@
 export * from "./PointerEvents.js";
+export * from "./Text.js";
 //# sourceMappingURL=index.js.map

package/lib/engine-components/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/engine-components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/engine-components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}

package/lib/engine-components/webxr/WebARCameraBackground.d.ts

@@ -31,7 +31,7 @@ export declare class WebARCameraBackground extends Behaviour {
      * The tint color of the camera feed
      */
     backgroundTint: RGBAColor;
-    get background(): Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes>, import("three").Material | import("three").Material[], import("three").Object3DEventMap> | undefined;
+    get background(): Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>, import("three").Material | import("three").Material[], import("three").Object3DEventMap> | undefined;
     private backgroundPlane?;
     private threeTexture?;
     private forceTextureInitialization;

package/lib/include/three/EXT_mesh_gpu_instancing_exporter.d.ts

@@ -0,0 +1,6 @@
+export default class GLTFMeshGPUInstancingExtension {
+    constructor(writer: any);
+    writer: any;
+    name: string;
+    writeNode(node: any, nodeDef: any): void;
+}

package/lib/include/three/EXT_mesh_gpu_instancing_exporter.js

@@ -0,0 +1,46 @@
+/**
+ * Mesh GPU Instancing extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_mesh_gpu_instancing
+ */
+import { BufferAttribute, Matrix4, Vector3, Quaternion, } from 'three';
+export default class GLTFMeshGPUInstancingExtension {
+    constructor(writer) {
+        this.writer = writer;
+        this.name = 'EXT_mesh_gpu_instancing';
+    }
+    writeNode(node, nodeDef) {
+        if (node.constructor.name !== "InstancedMesh")
+            return;
+        const writer = this.writer;
+        const extensionsUsed = writer.extensionsUsed;
+        const extensionDef = {};
+        nodeDef.extensions = nodeDef.extensions || {};
+        nodeDef.extensions[this.name] = extensionDef;
+        let mat = new Matrix4();
+        const pos0 = new Array();
+        const rot0 = new Array();
+        const scl0 = new Array();
+        for (let i = 0; i < node.count; i++) {
+            node.getMatrixAt(i, mat);
+            let p = new Vector3();
+            let r = new Quaternion();
+            let s = new Vector3();
+            mat.decompose(p, r, s);
+            pos0.push(p.x, p.y, p.z);
+            rot0.push(r.x, r.y, r.z, r.w);
+            scl0.push(s.x, s.y, s.z);
+        }
+        ;
+        const pos = new Float32Array(pos0);
+        const rot = new Float32Array(rot0);
+        const scl = new Float32Array(scl0);
+        extensionDef.attributes = {
+            "TRANSLATION": writer.processAccessor(new BufferAttribute(pos, 3)),
+            "ROTATION": writer.processAccessor(new BufferAttribute(rot, 4)),
+            "SCALE": writer.processAccessor(new BufferAttribute(scl, 3)),
+        };
+        extensionsUsed[this.name] = true;
+    }
+}
+//# sourceMappingURL=EXT_mesh_gpu_instancing_exporter.js.map

package/lib/include/three/EXT_mesh_gpu_instancing_exporter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EXT_mesh_gpu_instancing_exporter.js","sourceRoot":"","sources":["../../../src/include/three/EXT_mesh_gpu_instancing_exporter.js"],"names":[],"mappings":"AAAA;;;;GAIG;AAEF,OAAO,EACP,eAAe,EACf,OAAO,EACP,OAAO,EACP,UAAU,GACV,MAAM,OAAO,CAAC;AAEf,MAAM,CAAC,OAAO,OAAO,8BAA8B;IAElD,YAAa,MAAM;QAElB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,yBAAyB,CAAC;IAEvC,CAAC;IAED,SAAS,CAAE,IAAI,EAAE,OAAO;QAEvB,IAAG,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,eAAe;YAAE,OAAO;QAErD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,MAAM,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;QAC7C,MAAM,YAAY,GAAG,EAAE,CAAC;QAExB,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC;QAC9C,OAAO,CAAC,UAAU,CAAE,IAAI,CAAC,IAAI,CAAE,GAAG,YAAY,CAAC;QAE/C,IAAI,GAAG,GAAG,IAAI,OAAO,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC;QAEzB,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,EAClC;YACC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAEzB,IAAI,CAAC,GAAG,IAAI,OAAO,EAAE,CAAC;YACtB,IAAI,CAAC,GAAG,IAAI,UAAU,EAAE,CAAC;YACzB,IAAI,CAAC,GAAG,IAAI,OAAO,EAAE,CAAC;YAEtB,GAAG,CAAC,SAAS,CAAC,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,CAAC;YAErB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACvB;QAAA,CAAC;QAEF,MAAM,GAAG,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;QACnC,MAAM,GAAG,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;QACnC,MAAM,GAAG,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;QAEnC,YAAY,CAAC,UAAU,GAAG;YACzB,aAAa,EAAG,MAAM,CAAC,eAAe,CAAE,IAAI,eAAe,CAAE,GAAG,EAAE,CAAC,CAAE,CAAE;YACvE,UAAU,EAAG,MAAM,CAAC,eAAe,CAAE,IAAI,eAAe,CAAE,GAAG,EAAE,CAAC,CAAE,CAAE;YACpE,OAAO,EAAG,MAAM,CAAC,eAAe,CAAE,IAAI,eAAe,CAAE,GAAG,EAAE,CAAC,CAAE,CAAE;SACjE,CAAC;QAEF,cAAc,CAAE,IAAI,CAAC,IAAI,CAAE,GAAG,IAAI,CAAC;IAEpC,CAAC;CACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "5.0.0",
+  "version": "5.1.0-experimental.0",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.",
   "main": "dist/needle-engine.min.js",
   "exports": {
@@ -121,7 +121,7 @@
   ],
   "dependencies": {
     "@dimforge/rapier3d-compat": "0.19.3",
-    "@needle-tools/gltf-progressive": "3.4.0-beta.3",
+    "@needle-tools/gltf-progressive": "4.0.0-alpha",
     "@needle-tools/materialx": "1.5.1",
     "@needle-tools/three-animation-pointer": "1.0.7",
     "@webxr-input-profiles/motion-controllers": "1.0.0",
@@ -133,7 +133,7 @@
     "scroll-timeline-polyfill": "1.1.0",
     "simplex-noise": "4.0.3",
     "stats.js": "0.17.0",
-    "three": "npm:@needle-tools/three@0.169.19",
+    "three": "npm:@needle-tools/three@0.183.2-canary.0",
     "three-mesh-bvh": "0.9.7",
     "three-mesh-ui": "npm:@needle-tools/three-mesh-ui@7.1.5-alpha.5",
     "three.quarks": "0.15.6",
@@ -147,7 +147,7 @@
     "@needle-tools/helper": "2.0.0-next.faf57e6",
     "@needle-tools/needle-component-compiler": "3.0.0-alpha.1.999f08a",
     "@types/node": "^20.14.8",
-    "@types/three": "0.169.0",
+    "@types/three": "0.183.1",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "esbuild": "^0.15.10",

package/plugins/common/buildinfo.d.ts

@@ -0,0 +1,6 @@
+
+export type BuildInfo = {
+    fileCount: number;
+    totalSizeBytes: number;
+    totalSizeInMB: number;
+}

package/plugins/vite/ai.d.ts

@@ -1,15 +1,14 @@
 /**
  * Needle Engine AI skill installer.
  *
- * Writes a Needle Engine skill to `<dir>/skills/needle-engine/SKILL.md`
- * for each supported AI agent directory (`.claude/`, `.github/`, `.agents/`).
- * Both Claude Code and GitHub Copilot auto-load skills based on their
- * description frontmatter, so the AI agent will automatically have Needle
- * Engine context when working in the project.
+ * Auto-detects AI coding agents by checking for their config directories
+ * in the project root, then writes the Needle Engine skill in each agent's
+ * native format.
  *
- * The skill is only written if at least one of the supported directories
- * already exists in the project root (i.e. the developer is already using
- * an AI coding agent).
+ * Supported agents: Claude Code, GitHub Copilot, Cursor, Codex / universal.
+ *
+ * The skill is only written if at least one agent directory already exists
+ * (i.e. the developer is already using an AI coding agent).
  * Old skill files are always overwritten so the skill stays up to date with
  * the engine version.
  *

package/plugins/vite/ai.js

@@ -8,18 +8,47 @@ const __dirname = dirname(__filename);
 
 const pluginName = "needle-ai";
 
+/**
+ * Supported AI coding agents.
+ * Each entry defines how to detect the agent and how to write its skill file.
+ * `detect` is the directory that must exist in the project root.
+ * `write(cwd, content)` writes the skill in the agent's native format and returns the written path.
+ */
+const agents = [
+    {
+        name: "Claude Code",
+        detect: ".claude",
+        write: (cwd, content) => writeSkillMd(join(cwd, ".claude"), content),
+    },
+    {
+        name: "GitHub Copilot",
+        detect: ".github",
+        write: (cwd, content) => writeSkillMd(join(cwd, ".github"), content),
+    },
+    {
+        name: "Cursor",
+        detect: ".cursor",
+        write: (cwd, content) => writeCursorRule(cwd, content),
+    },
+    {
+        // Universal .agents/ dir (Codex, Gemini CLI, OpenCode, and others)
+        name: "Codex / Universal",
+        detect: ".agents",
+        write: (cwd, content) => writeSkillMd(join(cwd, ".agents"), content),
+    },
+];
+
 /**
  * Needle Engine AI skill installer.
  *
- * Writes a Needle Engine skill to `<dir>/skills/needle-engine/SKILL.md`
- * for each supported AI agent directory (`.claude/`, `.github/`, `.agents/`).
- * Both Claude Code and GitHub Copilot auto-load skills based on their
- * description frontmatter, so the AI agent will automatically have Needle
- * Engine context when working in the project.
+ * Auto-detects AI coding agents by checking for their config directories
+ * in the project root, then writes the Needle Engine skill in each agent's
+ * native format.
  *
- * The skill is only written if at least one of the supported directories
- * already exists in the project root (i.e. the developer is already using
- * an AI coding agent).
+ * Supported agents: Claude Code, GitHub Copilot, Cursor, Codex / universal.
+ *
+ * The skill is only written if at least one agent directory already exists
+ * (i.e. the developer is already using an AI coding agent).
  * Old skill files are always overwritten so the skill stays up to date with
  * the engine version.
  *
@@ -33,33 +62,79 @@ export function needleAI(command, config, userSettings) {
         name: pluginName,
         enforce: "pre",
         buildStart() {
-            installClaudeSkill();
+            installSkills();
         },
         configureServer() {
-            installClaudeSkill();
+            installSkills();
         },
     };
 }
 
-function writeSkill(claudeDir) {
-    const skillDir = join(claudeDir, "skills", "needle-engine");
+/** Read the SKILL.md template shipped with the engine. */
+function getSkillContent() {
+    const templatePath = join(__dirname, "../../SKILL.md");
+    return readFileSync(templatePath, "utf8");
+}
+
+/**
+ * Extract the body of a SKILL.md file (everything after the YAML frontmatter).
+ * Returns the full content if no frontmatter is found.
+ */
+function stripFrontmatter(content) {
+    const match = content.match(/^---\r?\n[\s\S]*?\r?\n---\r?\n([\s\S]*)$/);
+    return match ? match[1].trimStart() : content;
+}
+
+/**
+ * Write a SKILL.md file into `<agentDir>/skills/needle-engine/SKILL.md`.
+ * Used by Claude Code, GitHub Copilot, and the universal .agents/ directory.
+ */
+function writeSkillMd(agentDir, content) {
+    const skillDir = join(agentDir, "skills", "needle-engine");
     if (!existsSync(skillDir)) {
         mkdirSync(skillDir, { recursive: true });
     }
     const skillPath = join(skillDir, "SKILL.md");
-    const templatePath = join(__dirname, "../../SKILL.md");
-    const content = readFileSync(templatePath, "utf8");
     writeFileSync(skillPath, content, "utf8");
     return skillPath;
 }
 
-function installClaudeSkill() {
+/**
+ * Write a Cursor rule file at `.cursor/rules/needle-engine.mdc`.
+ * Cursor uses its own frontmatter format (description, globs, alwaysApply).
+ */
+function writeCursorRule(cwd, content) {
+    const rulesDir = join(cwd, ".cursor", "rules");
+    if (!existsSync(rulesDir)) {
+        mkdirSync(rulesDir, { recursive: true });
+    }
+    const rulePath = join(rulesDir, "needle-engine.mdc");
+    const body = stripFrontmatter(content);
+    const cursorContent = `---
+description: Needle Engine context — use when editing TypeScript components, Vite config, GLB assets, or anything related to @needle-tools/engine.
+globs:
+alwaysApply: false
+---
+${body}`;
+    writeFileSync(rulePath, cursorContent, "utf8");
+    return rulePath;
+}
+
+/** Detect agents and install the Needle Engine skill for each. */
+function installSkills() {
     const cwd = process.cwd();
-    const dirs = [".claude", ".github", ".agents"].map(d => join(cwd, d)).filter(d => existsSync(d));
-    if (dirs.length === 0) return; // only install if developer uses an AI coding agent
+    const detected = agents.filter(a => existsSync(join(cwd, a.detect)));
+    if (detected.length === 0) return;
+
+    const content = getSkillContent();
+    const names = [];
+
+    for (const agent of detected) {
+        const path = agent.write(cwd, content);
+        if (path) names.push(agent.name);
+    }
 
-    for (const dir of dirs) {
-        const path = writeSkill(dir);
-        if (path) needleLog(`[${pluginName}] Installed Needle Engine skill → ${path}`);
+    if (names.length > 0) {
+        needleLog(`[${pluginName}] Detected ${names.length} agent${names.length === 1 ? "" : "s"}: ${names.join(", ")}`);
     }
 }

package/plugins/vite/alias.js

@@ -25,6 +25,12 @@ const packages_to_resolve = {
     'three/nodes': (res, packageName, index, importPath) => {
         return "three/examples/jsm/nodes/Nodes.js";
     },
+    'three/tsl': (res, packageName, index, importPath) => {
+        return "three/src/nodes/TSL.js";
+    },
+    'three/webgpu': (res, packageName, index, importPath) => {
+        return "three/src/Three.WebGPU.js";
+    },
     'three': "auto-resolve",
 
     // Handle all previous imports where users did import using @needle-engine/src

package/plugins/vite/dependencies.js

@@ -158,6 +158,13 @@ function handleOptimizeDeps(config) {
             config.optimizeDeps.exclude.push('@needle-tools/engine');
             needleLog("needle-dependencies", 'Detected local @needle-tools/engine package → will exclude it from optimization');
         }
+        // When engine is excluded from optimizeDeps, three must also be excluded
+        // to prevent vite from pre-bundling a second copy → "Multiple instances of Three.js"
+        if (!config.optimizeDeps.include?.includes('three') &&
+            !config.optimizeDeps.exclude.includes('three')) {
+            config.optimizeDeps.exclude.push('three');
+            needleLog("needle-dependencies", 'Detected local @needle-tools/engine package → will also exclude three from optimization');
+        }
         // When engine is excluded from optimizeDeps, three-mesh-bvh must also be excluded.
         // The BVH worker (generateMeshBVH.worker.js) uses bare imports like `import 'three'`
         // which only resolve correctly when served through Vite's dev server module system.

package/src/engine/engine_animation.ts

@@ -130,7 +130,7 @@ export class AnimationUtils {
                     const objectName = track["__objectName"] ?? track.name.substring(0, track.name.indexOf("."));
                     // let obj = gltf.scene.getObjectByName(objectName);
                     // this finds unnamed objects that still have tracks targeting them
-                    obj = scene.getObjectByProperty('uuid', objectName);
+                    obj = scene.getObjectByProperty('uuid', objectName) ?? null;
 
                     if (!obj) {
                         // console.warn("could not find " + objectName, animation, gltf.scene);

package/src/engine/engine_audio.ts

@@ -8,7 +8,7 @@ import { Application } from "./engine_application.js";
 export function ensureAudioContextIsResumed() {
     Application.registerWaitForInteraction(() => {
         // this is a fix for https://github.com/mrdoob/three.js/issues/27779 & https://linear.app/needle/issue/NE-4257
-        const ctx = AudioContext.getContext();
+        const ctx = AudioContext.getContext() as unknown as globalThis.AudioContext;
         ctx.addEventListener("statechange", () => {
             setTimeout(() => {
                 // on iOS the audiocontext can be interrupted: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/state#resuming_interrupted_play_states_in_ios_safari

package/src/engine/engine_context.ts

@@ -8,7 +8,7 @@ import {
 	Texture, WebGLRenderer, type WebGLRendererParameters, WebGLRenderTarget, type WebXRArrayCamera
 } from 'three';
 /** @ts-ignore (not yet in types?) */
-import { BasicNodeLibrary } from "three";
+import BasicNodeLibrary from "three/src/renderers/webgpu/nodes/BasicNodeLibrary.js";
 import * as Stats from 'three/examples/jsm/libs/stats.module.js';
 import type { EffectComposer as ThreeEffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
 import { nodeFrame } from "three/examples/jsm/renderers/webgl-legacy/nodes/WebGLNodeBuilder.js";
@@ -637,12 +637,9 @@ export class Context implements IContext {
 		this.renderer.outputColorSpace = SRGBColorSpace;
 
 		// Injecting the core nodes library here, like WebGPURenderer backends do
+		// In r183, three.js reads renderer.library directly (not renderer.nodes.library)
 		//@ts-ignore
-		this.renderer.nodes = {
-			library: new BasicNodeLibrary(),
-			modelViewMatrix: null,
-			modelNormalViewMatrix: null,
-		};
+		this.renderer.library = new BasicNodeLibrary();
 		// this.renderer.toneMapping = AgXToneMapping;
 		this.lodsManager.setRenderer(this.renderer);
 

package/src/engine/engine_create_objects.ts

@@ -134,7 +134,6 @@ export class ObjectUtils {
             font,
             size: 1,
             depth: depth,
-            height: depth,
             bevelEnabled: opts?.bevel || false,
             bevelThickness: .01,
             bevelOffset: .01,

package/src/engine/engine_license.ts

@@ -1,5 +1,3 @@
-import { dof } from "three/src/nodes/TSL.js";
-
 import { isDevEnvironment } from "./debug/index.js";
 import { BUILD_TIME, GENERATOR, PUBLIC_KEY, VERSION } from "./engine_constants.js";
 import { ContextEvent, ContextRegistry } from "./engine_context_registry.js";

package/src/engine/engine_pmrem.ts

@@ -2,7 +2,7 @@ import { createLoaders } from "@needle-tools/gltf-progressive";
 import { CubeUVReflectionMapping, EquirectangularRefractionMapping, SRGBColorSpace, Texture, TextureLoader, WebGLRenderer } from "three";
 import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader";
 import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader";
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import { HDRLoader } from "three/examples/jsm/loaders/HDRLoader";
 
 const running: Map<string, Promise<Texture | null>> = new Map();
 
@@ -41,13 +41,13 @@ async function internalLoadPMREM(url: URL, renderer: WebGLRenderer) {
     const isHdr = pathname.endsWith(".hdr");
     const isKtx2 = pathname.endsWith(".ktx2");
 
-    let loader: RGBELoader | EXRLoader | TextureLoader | KTX2Loader;
+    let loader: HDRLoader | EXRLoader | TextureLoader | KTX2Loader;
 
     if (isEXR) {
         loader = new EXRLoader();
     }
     else if (isHdr) {
-        loader = new RGBELoader();
+        loader = new HDRLoader();
     }
     else if (isKtx2) {
         const { ktx2Loader } = createLoaders(renderer);

package/src/engine/engine_three_utils.ts

@@ -533,7 +533,7 @@ export class Graphics {
         mesh.frustumCulled = false;
         this.scene.children.length = 0;
         this.scene.add(mesh);
-        this.renderer.setSize(texture.image.width, texture.image.height);
+        this.renderer.setSize((texture.image as any).width, (texture.image as any).height);
         this.renderer.clear();
         this.renderer.render(this.scene, this.perspectiveCam);
         const tex = new Texture(this.renderer.domElement);
@@ -618,7 +618,7 @@ export class Graphics {
         if (force === true || texture["isCompressedTexture"] === true) {
             texture = copyTexture(texture);
         }
-        const image = texture.image;
+        const image = texture.image as any;
         if (isImageBitmap(image)) {
             const canvas = document.createElement('canvas');
             canvas.width = image.width;