@relu-interactives/spatial-ecs 0.8.0 → 0.10.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var THREE60 = require('three');
+var THREE67 = require('three');
 var DRACOLoader_js = require('three/examples/jsm/loaders/DRACOLoader.js');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var meshopt_decoder_module_js = require('three/examples/jsm/libs/meshopt_decoder.module.js');
@@ -44,7 +44,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var THREE60__namespace = /*#__PURE__*/_interopNamespace(THREE60);
+var THREE67__namespace = /*#__PURE__*/_interopNamespace(THREE67);
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -826,14 +826,14 @@ var _AnimationComponent = class _AnimationComponent extends Component {
       return;
     }
     this.importedClips = clips.map((entry) => {
-      if (entry instanceof THREE60__namespace.AnimationClip) {
+      if (entry instanceof THREE67__namespace.AnimationClip) {
         return { clip: entry, sourceUrl: null };
       }
       if (!entry || typeof entry !== "object") {
         return null;
       }
       const candidate = entry;
-      if (!(candidate.clip instanceof THREE60__namespace.AnimationClip)) {
+      if (!(candidate.clip instanceof THREE67__namespace.AnimationClip)) {
         return null;
       }
       return {
@@ -1042,11 +1042,11 @@ function normalizeDistanceModel(distanceModel) {
 }
 __name(normalizeDistanceModel, "normalizeDistanceModel");
 function createConfiguredAudio(listener, options) {
-  const sound = options.positional ? new THREE60__namespace.PositionalAudio(listener) : new THREE60__namespace.Audio(listener);
+  const sound = options.positional ? new THREE67__namespace.PositionalAudio(listener) : new THREE67__namespace.Audio(listener);
   sound.setLoop(options.loop);
   sound.setVolume(options.volume);
   sound.setPlaybackRate(options.pitch);
-  if (sound instanceof THREE60__namespace.PositionalAudio) {
+  if (sound instanceof THREE67__namespace.PositionalAudio) {
     sound.setRefDistance(options.refDistance);
     sound.setDistanceModel(normalizeDistanceModel(options.distanceModel));
     sound.setRolloffFactor(options.rolloffFactor);
@@ -1056,16 +1056,16 @@ function createConfiguredAudio(listener, options) {
 __name(createConfiguredAudio, "createConfiguredAudio");
 function createAudioEditorHelper() {
   if (typeof document === "undefined") {
-    const geometry = new THREE60__namespace.EdgesGeometry(
-      new THREE60__namespace.OctahedronGeometry(0.22, 0)
+    const geometry = new THREE67__namespace.EdgesGeometry(
+      new THREE67__namespace.OctahedronGeometry(0.22, 0)
     );
-    const material2 = new THREE60__namespace.LineBasicMaterial({
+    const material2 = new THREE67__namespace.LineBasicMaterial({
       color: "#8bc8ff",
       transparent: true,
       opacity: 0.95,
       depthTest: false
     });
-    const fallback = new THREE60__namespace.LineSegments(geometry, material2);
+    const fallback = new THREE67__namespace.LineSegments(geometry, material2);
     fallback.renderOrder = 10;
     fallback.userData.ecsHelper = true;
     fallback.visible = false;
@@ -1077,7 +1077,7 @@ function createAudioEditorHelper() {
   canvas.height = size;
   const ctx = canvas.getContext("2d");
   if (!ctx) {
-    return new THREE60__namespace.Object3D();
+    return new THREE67__namespace.Object3D();
   }
   ctx.clearRect(0, 0, size, size);
   ctx.fillStyle = "rgba(27, 35, 52, 0.9)";
@@ -1108,14 +1108,14 @@ function createAudioEditorHelper() {
   ctx.beginPath();
   ctx.arc(56, 48, 16, -0.8, 0.8);
   ctx.stroke();
-  const texture = new THREE60__namespace.CanvasTexture(canvas);
+  const texture = new THREE67__namespace.CanvasTexture(canvas);
   texture.needsUpdate = true;
-  const material = new THREE60__namespace.SpriteMaterial({
+  const material = new THREE67__namespace.SpriteMaterial({
     map: texture,
     transparent: true,
     depthTest: false
   });
-  const helper = new THREE60__namespace.Sprite(material);
+  const helper = new THREE67__namespace.Sprite(material);
   helper.scale.set(0.68, 0.68, 0.68);
   helper.renderOrder = 10;
   helper.userData.ecsHelper = true;
@@ -1149,7 +1149,7 @@ var DEFAULT_ORTHO_TOP = 5;
 var DEFAULT_ORTHO_BOTTOM = -5;
 var DEFAULT_ZOOM = 1;
 function inferProjection(camera) {
-  if (camera instanceof THREE60__namespace.OrthographicCamera) {
+  if (camera instanceof THREE67__namespace.OrthographicCamera) {
     return "orthographic";
   }
   return "perspective";
@@ -1170,7 +1170,7 @@ function readCameraFar(camera) {
 }
 __name(readCameraFar, "readCameraFar");
 function inferFov(camera) {
-  if (camera instanceof THREE60__namespace.PerspectiveCamera && Number.isFinite(camera.fov)) {
+  if (camera instanceof THREE67__namespace.PerspectiveCamera && Number.isFinite(camera.fov)) {
     return camera.fov;
   }
   return DEFAULT_FOV;
@@ -1193,28 +1193,28 @@ function inferFar(camera) {
 }
 __name(inferFar, "inferFar");
 function inferOrthoLeft(camera) {
-  if (camera instanceof THREE60__namespace.OrthographicCamera && Number.isFinite(camera.left)) {
+  if (camera instanceof THREE67__namespace.OrthographicCamera && Number.isFinite(camera.left)) {
     return camera.left;
   }
   return DEFAULT_ORTHO_LEFT;
 }
 __name(inferOrthoLeft, "inferOrthoLeft");
 function inferOrthoRight(camera) {
-  if (camera instanceof THREE60__namespace.OrthographicCamera && Number.isFinite(camera.right)) {
+  if (camera instanceof THREE67__namespace.OrthographicCamera && Number.isFinite(camera.right)) {
     return camera.right;
   }
   return DEFAULT_ORTHO_RIGHT;
 }
 __name(inferOrthoRight, "inferOrthoRight");
 function inferOrthoTop(camera) {
-  if (camera instanceof THREE60__namespace.OrthographicCamera && Number.isFinite(camera.top)) {
+  if (camera instanceof THREE67__namespace.OrthographicCamera && Number.isFinite(camera.top)) {
     return camera.top;
   }
   return DEFAULT_ORTHO_TOP;
 }
 __name(inferOrthoTop, "inferOrthoTop");
 function inferOrthoBottom(camera) {
-  if (camera instanceof THREE60__namespace.OrthographicCamera && Number.isFinite(camera.bottom)) {
+  if (camera instanceof THREE67__namespace.OrthographicCamera && Number.isFinite(camera.bottom)) {
     return camera.bottom;
   }
   return DEFAULT_ORTHO_BOTTOM;
@@ -1230,7 +1230,7 @@ __name(inferZoom, "inferZoom");
 var _CameraComponent = class _CameraComponent extends Component {
   constructor(payload = {}) {
     super();
-    this.camera = payload.camera ?? new THREE60__namespace.PerspectiveCamera();
+    this.camera = payload.camera ?? new THREE67__namespace.PerspectiveCamera();
     this.type = payload.type ?? "3d";
     this.isDefault = typeof payload.isDefault === "boolean" ? payload.isDefault : false;
     this.projection = payload.projection ?? inferProjection(payload.camera);
@@ -1261,7 +1261,7 @@ var Object3DRef = _Object3DRef;
 // core/factories/components/CameraFactory.ts
 function createCameraComponent(world, entityId, payload = {}) {
   const object = world.getComponent(entityId, Object3DRef)?.object;
-  const objectCamera = object instanceof THREE60__namespace.Camera ? object : void 0;
+  const objectCamera = object instanceof THREE67__namespace.Camera ? object : void 0;
   const component = new CameraComponent({
     ...payload,
     camera: payload.camera ?? objectCamera
@@ -1885,15 +1885,15 @@ function createValueState(light) {
     castShadow: light.castShadow ?? false,
     frustumCulling: light.frustumCulled
   };
-  if (light instanceof THREE60__namespace.PointLight) {
+  if (light instanceof THREE67__namespace.PointLight) {
     base.distance = light.distance;
     base.decay = light.decay;
-  } else if (light instanceof THREE60__namespace.SpotLight) {
+  } else if (light instanceof THREE67__namespace.SpotLight) {
     base.distance = light.distance;
     base.decay = light.decay;
     base.angle = light.angle;
     base.penumbra = light.penumbra;
-  } else if (light instanceof THREE60__namespace.RectAreaLight) {
+  } else if (light instanceof THREE67__namespace.RectAreaLight) {
     base.width = light.width;
     base.height = light.height;
   }
@@ -1936,13 +1936,13 @@ function toHexColor2(value, fallback) {
 }
 __name(toHexColor2, "toHexColor");
 function getMaterialType(material) {
-  if (material instanceof THREE60__namespace.MeshPhysicalMaterial) {
+  if (material instanceof THREE67__namespace.MeshPhysicalMaterial) {
     return "physical";
   }
-  if (material instanceof THREE60__namespace.MeshPhongMaterial) {
+  if (material instanceof THREE67__namespace.MeshPhongMaterial) {
     return "phong";
   }
-  if (material instanceof THREE60__namespace.MeshBasicMaterial) {
+  if (material instanceof THREE67__namespace.MeshBasicMaterial) {
     return "basic";
   }
   return "standard";
@@ -1977,8 +1977,8 @@ function createMaterialValue(material) {
     opacity: typeof materialRecord.opacity === "number" ? materialRecord.opacity : 1,
     emissive: toHexColor2(materialRecord.emissive, "#000000"),
     emissiveIntensity: typeof materialRecord.emissiveIntensity === "number" ? materialRecord.emissiveIntensity : 0,
-    side: typeof materialRecord.side === "number" ? materialRecord.side : THREE60__namespace.FrontSide,
-    blending: typeof materialRecord.blending === "number" ? materialRecord.blending : THREE60__namespace.NormalBlending,
+    side: typeof materialRecord.side === "number" ? materialRecord.side : THREE67__namespace.FrontSide,
+    blending: typeof materialRecord.blending === "number" ? materialRecord.blending : THREE67__namespace.NormalBlending,
     depthTest: materialRecord.depthTest !== false,
     depthWrite: materialRecord.depthWrite !== false,
     wireframe: Boolean(materialRecord.wireframe),
@@ -2010,7 +2010,7 @@ function createMaterialValue(material) {
       materialRecord.lightMap
     ),
     envMap: textureImageSrc(materialRecord.envMap),
-    textureFiltering: map?.magFilter === THREE60__namespace.NearestFilter ? "sharp" : "smooth",
+    textureFiltering: map?.magFilter === THREE67__namespace.NearestFilter ? "sharp" : "smooth",
     useMipmaps: map?.generateMipmaps !== false
   };
 }
@@ -2025,8 +2025,8 @@ function defaultMaterialValue() {
     opacity: 1,
     emissive: "#000000",
     emissiveIntensity: 0,
-    side: THREE60__namespace.FrontSide,
-    blending: THREE60__namespace.NormalBlending,
+    side: THREE67__namespace.FrontSide,
+    blending: THREE67__namespace.NormalBlending,
     depthTest: true,
     depthWrite: true,
     wireframe: false,
@@ -2594,14 +2594,14 @@ var _TransformComponent = class _TransformComponent extends Component {
       z: scale.z ?? 1
     };
   }
-  toPositionVector3(target = new THREE60.Vector3()) {
+  toPositionVector3(target = new THREE67.Vector3()) {
     return target.set(this.position.x, this.position.y, this.position.z);
   }
-  toRotationEuler(target = new THREE60.Euler(), order = "XYZ") {
+  toRotationEuler(target = new THREE67.Euler(), order = "XYZ") {
     return target.set(this.rotation.x, this.rotation.y, this.rotation.z, order);
   }
-  toRotationQuaternion(target = new THREE60.Quaternion(), order = "XYZ") {
-    const euler = new THREE60.Euler(
+  toRotationQuaternion(target = new THREE67.Quaternion(), order = "XYZ") {
+    const euler = new THREE67.Euler(
       this.rotation.x,
       this.rotation.y,
       this.rotation.z,
@@ -2609,7 +2609,7 @@ var _TransformComponent = class _TransformComponent extends Component {
     );
     return target.setFromEuler(euler);
   }
-  toScaleVector3(target = new THREE60.Vector3()) {
+  toScaleVector3(target = new THREE67.Vector3()) {
     return target.set(this.scale.x, this.scale.y, this.scale.z);
   }
   setPosition(input) {
@@ -2627,8 +2627,8 @@ var _TransformComponent = class _TransformComponent extends Component {
     return this;
   }
   setRotation(input, order = "XYZ") {
-    if (input instanceof THREE60.Quaternion) {
-      const euler = new THREE60.Euler().setFromQuaternion(input, order);
+    if (input instanceof THREE67.Quaternion) {
+      const euler = new THREE67.Euler().setFromQuaternion(input, order);
       this.rotation.x = euler.x;
       this.rotation.y = euler.y;
       this.rotation.z = euler.z;
@@ -3373,6 +3373,223 @@ function createXRInteractorSideComponent(world, entityId, ...args) {
 }
 __name(createXRInteractorSideComponent, "createXRInteractorSideComponent");
 
+// core/ui/uiStyle.ts
+var isRecord = /* @__PURE__ */ __name((value) => typeof value === "object" && value !== null && !Array.isArray(value), "isRecord");
+var finite = /* @__PURE__ */ __name((value) => typeof value === "number" && Number.isFinite(value), "finite");
+var nonEmpty = /* @__PURE__ */ __name((value) => typeof value === "string" && value.length > 0, "nonEmpty");
+function normalizeStops(value) {
+  if (!Array.isArray(value)) return null;
+  const stops = [];
+  for (const stop of value) {
+    if (isRecord(stop) && finite(stop.at) && nonEmpty(stop.color)) {
+      stops.push({ at: Math.min(1, Math.max(0, stop.at)), color: stop.color });
+    }
+  }
+  return stops.length >= 2 ? stops : null;
+}
+__name(normalizeStops, "normalizeStops");
+function normalizePaint(value) {
+  if (!isRecord(value)) return void 0;
+  if (value.kind === "solid" && nonEmpty(value.color)) {
+    return { kind: "solid", color: value.color };
+  }
+  if (value.kind === "linear") {
+    const stops = normalizeStops(value.stops);
+    if (stops) {
+      return {
+        kind: "linear",
+        angle: finite(value.angle) ? value.angle : 180,
+        stops
+      };
+    }
+  }
+  if (value.kind === "radial") {
+    const stops = normalizeStops(value.stops);
+    if (stops) return { kind: "radial", stops };
+  }
+  if (value.kind === "image" && nonEmpty(value.src)) {
+    const fit = value.fit === "contain" || value.fit === "fill" ? value.fit : "cover";
+    return {
+      kind: "image",
+      src: value.src,
+      fit,
+      ...nonEmpty(value.tint) ? { tint: value.tint } : {}
+    };
+  }
+  return void 0;
+}
+__name(normalizePaint, "normalizePaint");
+function normalizeShadow(value) {
+  if (!isRecord(value) || !nonEmpty(value.color)) return void 0;
+  return {
+    x: finite(value.x) ? value.x : 0,
+    y: finite(value.y) ? value.y : 0,
+    blur: finite(value.blur) ? Math.max(0, value.blur) : 0,
+    color: value.color
+  };
+}
+__name(normalizeShadow, "normalizeShadow");
+function normalizeText(value) {
+  if (!isRecord(value)) return void 0;
+  const text = {};
+  if (nonEmpty(value.font)) text.font = value.font;
+  if (finite(value.weight)) text.weight = value.weight;
+  if (finite(value.tracking)) text.tracking = value.tracking;
+  if (value.transform === "upper" || value.transform === "lower") {
+    text.transform = value.transform;
+  }
+  const paint = normalizePaint(value.paint);
+  if (paint) text.paint = paint;
+  if (finite(value.maxLines) && value.maxLines >= 1) {
+    text.maxLines = Math.floor(value.maxLines);
+  }
+  const shadow = normalizeShadow(value.shadow);
+  if (shadow) text.shadow = shadow;
+  return Object.keys(text).length > 0 ? text : void 0;
+}
+__name(normalizeText, "normalizeText");
+function normalizeUiStyle(value) {
+  if (!isRecord(value)) return void 0;
+  const style = {};
+  const fill = normalizePaint(value.fill);
+  if (fill) style.fill = fill;
+  if (isRecord(value.border) && finite(value.border.width)) {
+    const paint = normalizePaint(value.border.paint);
+    if (paint) {
+      style.border = { width: Math.max(0, value.border.width), paint };
+    }
+  }
+  if (finite(value.radius)) {
+    style.radius = Math.max(0, value.radius);
+  } else if (Array.isArray(value.radius) && value.radius.length === 4 && value.radius.every(finite)) {
+    style.radius = value.radius.map((r) => Math.max(0, r));
+  }
+  if (Array.isArray(value.shadows)) {
+    const shadows = value.shadows.map(normalizeShadow).filter((s) => !!s);
+    if (shadows.length > 0) style.shadows = shadows;
+  }
+  if (isRecord(value.edge) && finite(value.edge.width) && nonEmpty(value.edge.color)) {
+    style.edge = {
+      width: Math.max(0, value.edge.width),
+      color: value.edge.color
+    };
+  }
+  if (finite(value.opacity)) {
+    style.opacity = Math.min(1, Math.max(0, value.opacity));
+  }
+  const text = normalizeText(value.text);
+  if (text) style.text = text;
+  return Object.keys(style).length > 0 ? style : void 0;
+}
+__name(normalizeUiStyle, "normalizeUiStyle");
+function normalizeUiTokens(value) {
+  if (!isRecord(value)) return void 0;
+  const tokens = {};
+  for (const [key, token] of Object.entries(value)) {
+    if (nonEmpty(token) && key.length > 0 && !key.includes("/")) {
+      tokens[key] = token;
+    }
+  }
+  return Object.keys(tokens).length > 0 ? tokens : void 0;
+}
+__name(normalizeUiTokens, "normalizeUiTokens");
+function resolveToken(value, tokens, fallback = value) {
+  if (!value.startsWith("$")) return value;
+  return tokens?.[value.slice(1)] ?? fallback;
+}
+__name(resolveToken, "resolveToken");
+function resolvePaint(paint, tokens) {
+  switch (paint.kind) {
+    case "solid":
+      return { kind: "solid", color: resolveToken(paint.color, tokens) };
+    case "linear":
+    case "radial":
+      return {
+        ...paint,
+        stops: paint.stops.map((stop) => ({
+          at: stop.at,
+          color: resolveToken(stop.color, tokens)
+        }))
+      };
+    case "image":
+      return {
+        ...paint,
+        src: resolveToken(paint.src, tokens),
+        ...paint.tint ? { tint: resolveToken(paint.tint, tokens) } : {}
+      };
+  }
+}
+__name(resolvePaint, "resolvePaint");
+function solidOf(paint) {
+  if (paint.kind === "solid") return paint.color;
+  if (paint.kind === "image") return paint.tint ?? "#ffffff";
+  return paint.stops[0].color;
+}
+__name(solidOf, "solidOf");
+function radiusOf(radius, fallback) {
+  if (Array.isArray(radius)) return radius;
+  const r = radius ?? fallback;
+  return [r, r, r, r];
+}
+__name(radiusOf, "radiusOf");
+function resolveChrome(flat, style, tokens) {
+  const borderWidth = style?.border?.width ?? flat.borderWidth;
+  const border = borderWidth > 0 ? {
+    width: borderWidth,
+    color: style?.border ? solidOf(resolvePaint(style.border.paint, tokens)) : resolveToken(flat.borderColor, tokens)
+  } : null;
+  return {
+    fill: style?.fill ? resolvePaint(style.fill, tokens) : { kind: "solid", color: resolveToken(flat.backgroundColor, tokens) },
+    fillOpacity: style?.fill ? 1 : flat.backgroundOpacity,
+    radius: radiusOf(style?.radius, flat.cornerRadius),
+    border,
+    shadows: (style?.shadows ?? []).map((shadow) => ({
+      ...shadow,
+      color: resolveToken(shadow.color, tokens)
+    })),
+    edge: style?.edge ? { ...style.edge, color: resolveToken(style.edge.color, tokens) } : null
+  };
+}
+__name(resolveChrome, "resolveChrome");
+function resolveText(flat, style, tokens) {
+  const text = style?.text;
+  return {
+    ...flat,
+    color: resolveToken(flat.color, tokens),
+    fontWeight: text?.weight ?? flat.fontWeight,
+    paint: text?.paint ? resolvePaint(text.paint, tokens) : { kind: "solid", color: resolveToken(flat.color, tokens) },
+    font: text?.font ? resolveToken(text.font, tokens) : null,
+    tracking: text?.tracking ?? 0,
+    transform: text?.transform ?? null,
+    maxLines: text?.maxLines ?? null,
+    shadow: text?.shadow ? {
+      ...text.shadow,
+      color: resolveToken(text.shadow.color, tokens)
+    } : null
+  };
+}
+__name(resolveText, "resolveText");
+function chromeBleed(chrome) {
+  let bleed = 0;
+  for (const shadow of chrome.shadows) {
+    bleed = Math.max(
+      bleed,
+      shadow.blur + Math.max(Math.abs(shadow.x), Math.abs(shadow.y))
+    );
+  }
+  return bleed;
+}
+__name(chromeBleed, "chromeBleed");
+function styleAssets(chrome, text) {
+  const images2 = [];
+  const fonts2 = [];
+  if (chrome?.fill?.kind === "image") images2.push(chrome.fill.src);
+  if (text?.paint.kind === "image") images2.push(text.paint.src);
+  if (text?.font) fonts2.push(text.font);
+  return { images: images2, fonts: fonts2 };
+}
+__name(styleAssets, "styleAssets");
+
 // core/components/UIButton.ts
 var _UIButtonComponent = class _UIButtonComponent extends Component {
   constructor(options) {
@@ -3389,6 +3606,13 @@ var _UIButtonComponent = class _UIButtonComponent extends Component {
     this.cornerRadius = options?.cornerRadius ?? 0.02;
     this.borderWidth = options?.borderWidth ?? 2e-3;
     this.borderColor = options?.borderColor ?? "#3a3a3a";
+    if (options?.pixelDensity !== void 0) {
+      this.pixelDensity = options.pixelDensity;
+    }
+    const style = normalizeUiStyle(options?.style);
+    if (style) this.style = style;
+    if (options?.icon) this.icon = options.icon;
+    if (options?.iconPosition) this.iconPosition = options.iconPosition;
   }
 };
 __name(_UIButtonComponent, "UIButtonComponent");
@@ -3415,6 +3639,10 @@ var _UIPanelComponent = class _UIPanelComponent extends Component {
     this.borderColor = options?.borderColor ?? "#333333";
     this.pixelDensity = options?.pixelDensity ?? 1024;
     this.follow = options?.follow ?? "world";
+    const style = normalizeUiStyle(options?.style);
+    if (style) this.style = style;
+    const tokens = normalizeUiTokens(options?.tokens);
+    if (tokens) this.tokens = tokens;
   }
 };
 __name(_UIPanelComponent, "UIPanelComponent");
@@ -3443,6 +3671,14 @@ var _UISliderComponent = class _UISliderComponent extends Component {
     this.trackColor = options?.trackColor ?? "#2a2a2a";
     this.accentColor = options?.accentColor ?? "#ff6b35";
     this.knobColor = options?.knobColor ?? "#ffffff";
+    if (options?.pixelDensity !== void 0) {
+      this.pixelDensity = options.pixelDensity;
+    }
+    const style = normalizeUiStyle(options?.style);
+    if (style) this.style = style;
+    if (options?.variant) this.variant = options.variant;
+    if (options?.step !== void 0) this.step = options.step;
+    if (options?.readOnly !== void 0) this.readOnly = options.readOnly;
   }
 };
 __name(_UISliderComponent, "UISliderComponent");
@@ -3470,6 +3706,11 @@ var _UITextComponent = class _UITextComponent extends Component {
     this.valign = options?.valign ?? "middle";
     this.lineHeight = options?.lineHeight ?? 1.25;
     this.padding = options?.padding ?? 0.01;
+    if (options?.pixelDensity !== void 0) {
+      this.pixelDensity = options.pixelDensity;
+    }
+    const style = normalizeUiStyle(options?.style);
+    if (style) this.style = style;
   }
 };
 __name(_UITextComponent, "UITextComponent");
@@ -3494,6 +3735,12 @@ var _UIToggleComponent = class _UIToggleComponent extends Component {
     this.trackColor = options?.trackColor ?? "#2a2a2a";
     this.accentColor = options?.accentColor ?? "#ff6b35";
     this.knobColor = options?.knobColor ?? "#ffffff";
+    if (options?.pixelDensity !== void 0) {
+      this.pixelDensity = options.pixelDensity;
+    }
+    const style = normalizeUiStyle(options?.style);
+    if (style) this.style = style;
+    if (options?.variant) this.variant = options.variant;
   }
 };
 __name(_UIToggleComponent, "UIToggleComponent");
@@ -3846,7 +4093,7 @@ function findModelBone(root, ref) {
   for (const b of bones) if (!byName.has(b.name)) byName.set(b.name, b);
   const name = ref.bone ?? "";
   if (name) {
-    const hit = byName.get(name) ?? byName.get(THREE60__namespace.PropertyBinding.sanitizeNodeName(name));
+    const hit = byName.get(name) ?? byName.get(THREE67__namespace.PropertyBinding.sanitizeNodeName(name));
     if (hit) return hit;
   }
   if (ref.humanoid) {
@@ -3907,7 +4154,7 @@ var SHARED_MODEL_RESOURCE_FLAG = "spatialEcsSharedModelResource";
 var modelCache = /* @__PURE__ */ new Map();
 function markSharedResources(root) {
   root.traverse((child) => {
-    if (!(child instanceof THREE60__namespace.Mesh)) {
+    if (!(child instanceof THREE67__namespace.Mesh)) {
       return;
     }
     if (child.geometry) {
@@ -4081,7 +4328,7 @@ function createModel({
   payload,
   isEditor
 }) {
-  const anchor = new THREE60__namespace.Object3D();
+  const anchor = new THREE67__namespace.Object3D();
   const modelPath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Model",
@@ -4186,8 +4433,8 @@ __name(reloadModelEntity, "reloadModelEntity");
 
 // core/systems/ObjectManagementSystem.ts
 var BONE_SOCKET_FLAG = "__reluBoneSocket";
-var _boneScale = new THREE60__namespace.Vector3();
-var _anchorScale = new THREE60__namespace.Vector3();
+var _boneScale = new THREE67__namespace.Vector3();
+var _anchorScale = new THREE67__namespace.Vector3();
 function createTransform(input) {
   return new TransformComponent(input);
 }
@@ -4226,10 +4473,10 @@ var _ObjectManagementSystem = class _ObjectManagementSystem {
   }
   getOrCreateAudioListener() {
     const existing = this.camera.userData.ecsAudioListener;
-    if (existing instanceof THREE60__namespace.AudioListener) {
+    if (existing instanceof THREE67__namespace.AudioListener) {
       return existing;
     }
-    const listener = new THREE60__namespace.AudioListener();
+    const listener = new THREE67__namespace.AudioListener();
     this.camera.add(listener);
     this.camera.userData.ecsAudioListener = listener;
     return listener;
@@ -4303,7 +4550,7 @@ var _ObjectManagementSystem = class _ObjectManagementSystem {
     }
     if (dispose && object3d) {
       object3d.traverse((child) => {
-        if (child instanceof THREE60__namespace.Mesh) {
+        if (child instanceof THREE67__namespace.Mesh) {
           if (!child.geometry?.userData?.[SHARED_MODEL_RESOURCE_FLAG]) {
             child.geometry?.dispose();
           }
@@ -4455,7 +4702,7 @@ var _ObjectManagementSystem = class _ObjectManagementSystem {
       return null;
     }
     this.boneMisses.delete(entityId);
-    const socket = new THREE60__namespace.Object3D();
+    const socket = new THREE67__namespace.Object3D();
     socket.name = `socket:${bone.name}`;
     socket.userData[BONE_SOCKET_FLAG] = entityId;
     bone.add(socket);
@@ -4629,10 +4876,10 @@ __name(createBaseEntity, "createBaseEntity");
 // core/factories/objects/AudioFactory.ts
 function getOrCreateListener(camera) {
   const existing = camera.userData.ecsAudioListener;
-  if (existing instanceof THREE60__namespace.AudioListener) {
+  if (existing instanceof THREE67__namespace.AudioListener) {
     return existing;
   }
-  const listener = new THREE60__namespace.AudioListener();
+  const listener = new THREE67__namespace.AudioListener();
   camera.add(listener);
   camera.userData.ecsAudioListener = listener;
   return listener;
@@ -4645,7 +4892,7 @@ function createAudio({
   payload,
   isEditor
 }) {
-  const anchor = new THREE60__namespace.Object3D();
+  const anchor = new THREE67__namespace.Object3D();
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Audio",
     entityType: "audio",
@@ -4667,7 +4914,7 @@ function createAudio({
     return entityId;
   }
   if (!isEditor) {
-    const loader = new THREE60__namespace.AudioLoader();
+    const loader = new THREE67__namespace.AudioLoader();
     loader.load(
       audio.path,
       (buffer) => {
@@ -4742,7 +4989,7 @@ function applyCameraSettings(camera, options) {
   const near = typeof options.near === "number" ? options.near : DEFAULT_NEAR2;
   const far = typeof options.far === "number" ? options.far : DEFAULT_FAR2;
   const projection = options.projection;
-  if (camera instanceof THREE60__namespace.PerspectiveCamera) {
+  if (camera instanceof THREE67__namespace.PerspectiveCamera) {
     if (!projection || projection === "perspective") {
       camera.fov = typeof options.fov === "number" ? options.fov : DEFAULT_FOV2;
     }
@@ -4752,7 +4999,7 @@ function applyCameraSettings(camera, options) {
     camera.updateProjectionMatrix();
     return;
   }
-  if (camera instanceof THREE60__namespace.OrthographicCamera) {
+  if (camera instanceof THREE67__namespace.OrthographicCamera) {
     camera.left = typeof options.left === "number" ? options.left : -DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
     camera.right = typeof options.right === "number" ? options.right : DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
     camera.top = typeof options.top === "number" ? options.top : DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
@@ -4773,7 +5020,7 @@ function createCameraObject(options) {
     const bottom = options.bottom ?? -DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
     const left = options.left ?? -DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
     const right = options.right ?? DEFAULT_ORTHOGRAPHIC_HALF_HEIGHT;
-    const camera = new THREE60__namespace.OrthographicCamera(
+    const camera = new THREE67__namespace.OrthographicCamera(
       left,
       right,
       top,
@@ -4785,7 +5032,7 @@ function createCameraObject(options) {
     camera.updateProjectionMatrix();
     return camera;
   }
-  return new THREE60__namespace.PerspectiveCamera(
+  return new THREE67__namespace.PerspectiveCamera(
     options.fov ?? DEFAULT_FOV2,
     readViewportAspect(),
     near,
@@ -4803,7 +5050,7 @@ function createCamera({ world, scene, camera, payload, isEditor }) {
     transformInput: payload.transform
   });
   const objectRef = world.getComponent(entityId, Object3DRef);
-  if (objectRef?.object instanceof THREE60__namespace.Camera) {
+  if (objectRef?.object instanceof THREE67__namespace.Camera) {
     objectRef.object.userData.entityId = entityId;
   }
   const componentOptions = {
@@ -4835,9 +5082,9 @@ function createCapsule({
   scene,
   payload
 }) {
-  const geometry = new THREE60__namespace.CapsuleGeometry(0.5, 1, 4, 8);
-  const material = new THREE60__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE60__namespace.Mesh(geometry, material);
+  const geometry = new THREE67__namespace.CapsuleGeometry(0.5, 1, 4, 8);
+  const material = new THREE67__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE67__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Capsule",
     entityType: "capsule",
@@ -4857,9 +5104,9 @@ function createCapsule({
 }
 __name(createCapsule, "createCapsule");
 function createCube({ world, scene, payload }) {
-  const geometry = new THREE60__namespace.BoxGeometry(1, 1, 1);
-  const material = new THREE60__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE60__namespace.Mesh(geometry, material);
+  const geometry = new THREE67__namespace.BoxGeometry(1, 1, 1);
+  const material = new THREE67__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE67__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Cube",
     entityType: "cube",
@@ -4884,9 +5131,9 @@ function createCylinder({
   scene,
   payload
 }) {
-  const geometry = new THREE60__namespace.CylinderGeometry(0.5, 0.5, 1, 20);
-  const material = new THREE60__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE60__namespace.Mesh(geometry, material);
+  const geometry = new THREE67__namespace.CylinderGeometry(0.5, 0.5, 1, 20);
+  const material = new THREE67__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE67__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Cylinder",
     entityType: "cylinder",
@@ -4906,7 +5153,7 @@ function createCylinder({
 }
 __name(createCylinder, "createCylinder");
 function createEmpty({ world, scene, payload, isEditor }) {
-  const object = new THREE60__namespace.Group();
+  const object = new THREE67__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "Empty",
     entityType: "empty",
@@ -4917,7 +5164,7 @@ function createEmpty({ world, scene, payload, isEditor }) {
 }
 __name(createEmpty, "createEmpty");
 function createImage({ world, scene, payload }) {
-  const anchor = new THREE60__namespace.Object3D();
+  const anchor = new THREE67__namespace.Object3D();
   const imagePath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Image",
@@ -4930,7 +5177,7 @@ function createImage({ world, scene, payload }) {
   if (!imagePath) {
     return entityId;
   }
-  const loader = new THREE60__namespace.TextureLoader();
+  const loader = new THREE67__namespace.TextureLoader();
   loader.load(
     imagePath,
     (texture) => {
@@ -4938,13 +5185,13 @@ function createImage({ world, scene, payload }) {
         texture.dispose();
         return;
       }
-      const material = new THREE60__namespace.MeshBasicMaterial({
+      const material = new THREE67__namespace.MeshBasicMaterial({
         map: texture,
         transparent: true,
-        side: THREE60__namespace.DoubleSide
+        side: THREE67__namespace.DoubleSide
       });
-      const geometry = new THREE60__namespace.PlaneGeometry(1, 1);
-      const plane = new THREE60__namespace.Mesh(geometry, material);
+      const geometry = new THREE67__namespace.PlaneGeometry(1, 1);
+      const plane = new THREE67__namespace.Mesh(geometry, material);
       plane.userData.entityId = entityId;
       const textureImage = texture.image;
       const width = textureImage?.width ?? 1;
@@ -4990,7 +5237,7 @@ function createImageTarget({
   payload,
   isEditor
 }) {
-  const anchor = new THREE60__namespace.Object3D();
+  const anchor = new THREE67__namespace.Object3D();
   const imagePath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Image Target",
@@ -5007,7 +5254,7 @@ function createImageTarget({
   if (!isEditor || !imagePath) {
     return entityId;
   }
-  const loader = new THREE60__namespace.TextureLoader();
+  const loader = new THREE67__namespace.TextureLoader();
   loader.load(
     imagePath,
     (texture) => {
@@ -5015,13 +5262,13 @@ function createImageTarget({
         texture.dispose();
         return;
       }
-      const material = new THREE60__namespace.MeshBasicMaterial({
+      const material = new THREE67__namespace.MeshBasicMaterial({
         map: texture,
         transparent: true,
-        side: THREE60__namespace.DoubleSide
+        side: THREE67__namespace.DoubleSide
       });
-      const geometry = new THREE60__namespace.PlaneGeometry(1, 1);
-      const plane = new THREE60__namespace.Mesh(geometry, material);
+      const geometry = new THREE67__namespace.PlaneGeometry(1, 1);
+      const plane = new THREE67__namespace.Mesh(geometry, material);
       plane.userData.entityId = entityId;
       const textureImage = texture.image;
       const width = textureImage?.width ?? 1;
@@ -5072,7 +5319,7 @@ function createInstancedMesh({
   scene,
   payload
 }) {
-  const anchor = new THREE60__namespace.Object3D();
+  const anchor = new THREE67__namespace.Object3D();
   const opts = payload.options ?? {};
   const meshKind = isInstancedMeshKind(opts.meshKind) ? opts.meshKind : "cube";
   const meshParameters = opts.meshParameters && typeof opts.meshParameters === "object" ? opts.meshParameters : void 0;
@@ -5143,7 +5390,7 @@ function createAmbientLight({
   scene,
   payload
 }) {
-  const light = new THREE60__namespace.AmbientLight("#ffffff", 0.6);
+  const light = new THREE67__namespace.AmbientLight("#ffffff", 0.6);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Ambient Light",
     entityType: "ambientLight",
@@ -5157,10 +5404,10 @@ __name(createAmbientLight, "createAmbientLight");
 var unsupportedWebGpuFallbackBackend = {
   kind: "webgpu",
   createPostprocessing: /* @__PURE__ */ __name(() => null, "createPostprocessing"),
-  createChromaKeyMaterial: /* @__PURE__ */ __name((texture) => new THREE60__namespace.MeshBasicMaterial({
+  createChromaKeyMaterial: /* @__PURE__ */ __name((texture) => new THREE67__namespace.MeshBasicMaterial({
     map: texture,
     transparent: true,
-    side: THREE60__namespace.DoubleSide
+    side: THREE67__namespace.DoubleSide
   }), "createChromaKeyMaterial"),
   updateChromaKeyMaterial: /* @__PURE__ */ __name(() => false, "updateChromaKeyMaterial")
 };
@@ -5189,7 +5436,7 @@ var PixelationShader = {
   name: "PixelationShader",
   uniforms: {
     tDiffuse: { value: null },
-    resolution: { value: new THREE60__namespace.Vector2(1, 1) },
+    resolution: { value: new THREE67__namespace.Vector2(1, 1) },
     pixelSize: { value: 6 }
   },
   vertexShader: (
@@ -5259,10 +5506,10 @@ function createWebglPostprocessing({
     );
   }
   if (values.bloom.enabled) {
-    const size = renderer.getSize(new THREE60__namespace.Vector2());
+    const size = renderer.getSize(new THREE67__namespace.Vector2());
     composer.addPass(
       new UnrealBloomPass_js.UnrealBloomPass(
-        new THREE60__namespace.Vector2(size.width, size.height),
+        new THREE67__namespace.Vector2(size.width, size.height),
         values.bloom.intensity,
         values.bloom.radius,
         values.bloom.threshold
@@ -5307,7 +5554,7 @@ function createWebglPostprocessing({
   if (values.dotScreen.enabled) {
     composer.addPass(
       new DotScreenPass_js.DotScreenPass(
-        new THREE60__namespace.Vector2(0, 0),
+        new THREE67__namespace.Vector2(0, 0),
         values.dotScreen.angle ?? values.dotScreen.dotScreenAngle,
         values.dotScreen.scale ?? values.dotScreen.dotScreenScale
       )
@@ -5356,10 +5603,10 @@ function createWebglPostprocessing({
 __name(createWebglPostprocessing, "createWebglPostprocessing");
 var CHROMA_KEY_FLAG = "ecsChromaKey";
 function createWebglChromaKeyMaterial(texture, options) {
-  const material = new THREE60__namespace.ShaderMaterial({
+  const material = new THREE67__namespace.ShaderMaterial({
     uniforms: {
       tex: { value: texture },
-      keyColor: { value: new THREE60__namespace.Color(options.keyColor) },
+      keyColor: { value: new THREE67__namespace.Color(options.keyColor) },
       similarity: { value: options.similarity },
       smoothness: { value: options.smoothness },
       spill: { value: options.spill }
@@ -5391,14 +5638,14 @@ function createWebglChromaKeyMaterial(texture, options) {
       }
     `,
     transparent: true,
-    side: THREE60__namespace.DoubleSide
+    side: THREE67__namespace.DoubleSide
   });
   material.userData[CHROMA_KEY_FLAG] = true;
   return material;
 }
 __name(createWebglChromaKeyMaterial, "createWebglChromaKeyMaterial");
 function updateWebglChromaKeyMaterial(material, options) {
-  if (!(material instanceof THREE60__namespace.ShaderMaterial)) return false;
+  if (!(material instanceof THREE67__namespace.ShaderMaterial)) return false;
   const { keyColor, similarity, smoothness, spill } = material.uniforms;
   if (!keyColor || !similarity || !smoothness || !spill) return false;
   keyColor.value.set(options.keyColor);
@@ -5475,7 +5722,7 @@ function createAreaLight({
   isEditor
 }) {
   readWorldRenderBackend(world).prepareAreaLights?.(world);
-  const light = new THREE60__namespace.RectAreaLight("#ffffff", 5, 4, 4);
+  const light = new THREE67__namespace.RectAreaLight("#ffffff", 5, 4, 4);
   light.lookAt(0, 0, 0);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Area Light",
@@ -5504,7 +5751,7 @@ function createDirectionalLight({
   payload,
   isEditor
 }) {
-  const light = new THREE60__namespace.DirectionalLight("#ffffff", 1.5);
+  const light = new THREE67__namespace.DirectionalLight("#ffffff", 1.5);
   light.castShadow = true;
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Directional Light",
@@ -5515,7 +5762,7 @@ function createDirectionalLight({
   });
   createLightComponent(world, entityId, light);
   if (isEditor) {
-    const helper = new THREE60__namespace.DirectionalLightHelper(light, 1.8, "#38bdf8");
+    const helper = new THREE67__namespace.DirectionalLightHelper(light, 1.8, "#38bdf8");
     helper.onBeforeRender = () => {
       helper.update();
     };
@@ -5533,7 +5780,7 @@ function createPointLight({
   payload,
   isEditor
 }) {
-  const light = new THREE60__namespace.PointLight("#ffffff", 1, 10);
+  const light = new THREE67__namespace.PointLight("#ffffff", 1, 10);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Point Light",
     entityType: "pointLight",
@@ -5543,7 +5790,7 @@ function createPointLight({
   });
   createLightComponent(world, entityId, light);
   if (isEditor) {
-    const helper = new THREE60__namespace.PointLightHelper(light, 0.35, "#fbbf24");
+    const helper = new THREE67__namespace.PointLightHelper(light, 0.35, "#fbbf24");
     helper.onBeforeRender = () => {
       helper.update();
     };
@@ -5561,7 +5808,7 @@ function createSpotLight({
   payload,
   isEditor
 }) {
-  const light = new THREE60__namespace.SpotLight("#ffffff", 1, 20, Math.PI / 6, 0.1, 1);
+  const light = new THREE67__namespace.SpotLight("#ffffff", 1, 20, Math.PI / 6, 0.1, 1);
   const entityId = createBaseEntity(world, light, {
     label: payload.name ?? "Spot Light",
     entityType: "spotLight",
@@ -5571,7 +5818,7 @@ function createSpotLight({
   });
   createLightComponent(world, entityId, light);
   if (isEditor) {
-    const helper = new THREE60__namespace.SpotLightHelper(light, "#f59e0b");
+    const helper = new THREE67__namespace.SpotLightHelper(light, "#f59e0b");
     helper.onBeforeRender = () => {
       helper.update();
     };
@@ -5584,12 +5831,12 @@ function createSpotLight({
 }
 __name(createSpotLight, "createSpotLight");
 function createPlane({ world, scene, payload }) {
-  const geometry = new THREE60__namespace.PlaneGeometry(100, 100);
-  const material = new THREE60__namespace.MeshStandardMaterial({
+  const geometry = new THREE67__namespace.PlaneGeometry(100, 100);
+  const material = new THREE67__namespace.MeshStandardMaterial({
     color: "#ffffff",
-    side: THREE60__namespace.DoubleSide
+    side: THREE67__namespace.DoubleSide
   });
-  const mesh = new THREE60__namespace.Mesh(geometry, material);
+  const mesh = new THREE67__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(
     world,
     mesh,
@@ -5625,7 +5872,7 @@ function createScriptObject({
   scene,
   payload
 }) {
-  const object = new THREE60__namespace.Group();
+  const object = new THREE67__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "Script Object",
     entityType: "scriptObject",
@@ -5650,15 +5897,15 @@ function createTeleportArea({
   const options = payload.options ?? {};
   const width = typeof options.width === "number" ? options.width : 10;
   const depth = typeof options.depth === "number" ? options.depth : 10;
-  const geometry = new THREE60__namespace.PlaneGeometry(width, depth);
-  const material = new THREE60__namespace.MeshBasicMaterial({
+  const geometry = new THREE67__namespace.PlaneGeometry(width, depth);
+  const material = new THREE67__namespace.MeshBasicMaterial({
     color: "#4da3ff",
     transparent: true,
     opacity: 0.18,
-    side: THREE60__namespace.DoubleSide,
+    side: THREE67__namespace.DoubleSide,
     depthWrite: false
   });
-  const object = new THREE60__namespace.Mesh(geometry, material);
+  const object = new THREE67__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "Teleport Area",
     entityType: "teleportArea",
@@ -5686,7 +5933,7 @@ function createXRInteractor({
   scene,
   payload
 }) {
-  const root = new THREE60__namespace.Group();
+  const root = new THREE67__namespace.Group();
   const options = payload.options ?? {};
   const entityId = createBaseEntity(world, root, {
     label: payload.name ?? "XR Interactor",
@@ -5699,7 +5946,7 @@ function createXRInteractor({
     return entityId;
   }
   for (const side of ["left", "right"]) {
-    const slot = new THREE60__namespace.Group();
+    const slot = new THREE67__namespace.Group();
     const label = side === "left" ? "Left Interactor" : "Right Interactor";
     const slotEntityId = createBaseEntity(world, slot, {
       label,
@@ -5717,7 +5964,7 @@ function createUIButton({
   scene,
   payload
 }) {
-  const object = new THREE60__namespace.Group();
+  const object = new THREE67__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "UI Button",
     entityType: "uiButton",
@@ -5742,7 +5989,7 @@ function createUIPanel({
   scene,
   payload
 }) {
-  const object = new THREE60__namespace.Group();
+  const object = new THREE67__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "UI Panel",
     entityType: "uiPanel",
@@ -5759,7 +6006,7 @@ function createUISlider({
   scene,
   payload
 }) {
-  const object = new THREE60__namespace.Group();
+  const object = new THREE67__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "UI Slider",
     entityType: "uiSlider",
@@ -5784,7 +6031,7 @@ function createUIText({
   scene,
   payload
 }) {
-  const object = new THREE60__namespace.Group();
+  const object = new THREE67__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "UI Text",
     entityType: "uiText",
@@ -5801,7 +6048,7 @@ function createUIToggle({
   scene,
   payload
 }) {
-  const object = new THREE60__namespace.Group();
+  const object = new THREE67__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "UI Toggle",
     entityType: "uiToggle",
@@ -5826,7 +6073,7 @@ function createXRRig({
   scene,
   payload
 }) {
-  const object = new THREE60__namespace.Group();
+  const object = new THREE67__namespace.Group();
   const entityId = createBaseEntity(world, object, {
     label: payload.name ?? "XR Rig",
     entityType: "xrRig",
@@ -5839,7 +6086,7 @@ function createXRRig({
 }
 __name(createXRRig, "createXRRig");
 function createSprite({ world, scene, payload }) {
-  const anchor = new THREE60__namespace.Object3D();
+  const anchor = new THREE67__namespace.Object3D();
   const imagePath = payload.path ?? "";
   const entityId = createBaseEntity(world, anchor, {
     label: payload.name ?? "Sprite",
@@ -5851,7 +6098,7 @@ function createSprite({ world, scene, payload }) {
   if (!imagePath) {
     return entityId;
   }
-  const loader = new THREE60__namespace.TextureLoader();
+  const loader = new THREE67__namespace.TextureLoader();
   loader.load(
     imagePath,
     (texture) => {
@@ -5859,11 +6106,11 @@ function createSprite({ world, scene, payload }) {
         texture.dispose();
         return;
       }
-      const material = new THREE60__namespace.SpriteMaterial({
+      const material = new THREE67__namespace.SpriteMaterial({
         map: texture,
         transparent: true
       });
-      const sprite = new THREE60__namespace.Sprite(material);
+      const sprite = new THREE67__namespace.Sprite(material);
       sprite.userData.entityId = entityId;
       const textureImage = texture.image;
       spriteComponent.width = textureImage?.width ?? 1;
@@ -5881,9 +6128,9 @@ function createSprite({ world, scene, payload }) {
 }
 __name(createSprite, "createSprite");
 function createSphere({ world, scene, payload }) {
-  const geometry = new THREE60__namespace.SphereGeometry(0.5, 24, 24);
-  const material = new THREE60__namespace.MeshStandardMaterial({ color: "#ffffff" });
-  const mesh = new THREE60__namespace.Mesh(geometry, material);
+  const geometry = new THREE67__namespace.SphereGeometry(0.5, 24, 24);
+  const material = new THREE67__namespace.MeshStandardMaterial({ color: "#ffffff" });
+  const mesh = new THREE67__namespace.Mesh(geometry, material);
   const entityId = createBaseEntity(world, mesh, {
     label: payload.name ?? "Sphere",
     entityType: "sphere",
@@ -5903,10 +6150,10 @@ function createSphere({ world, scene, payload }) {
 __name(createSphere, "createSphere");
 function getOrCreateListener2(camera) {
   const existing = camera.userData.ecsAudioListener;
-  if (existing instanceof THREE60__namespace.AudioListener) {
+  if (existing instanceof THREE67__namespace.AudioListener) {
     return existing;
   }
-  const listener = new THREE60__namespace.AudioListener();
+  const listener = new THREE67__namespace.AudioListener();
   camera.add(listener);
   camera.userData.ecsAudioListener = listener;
   return listener;
@@ -5956,22 +6203,22 @@ function normalizeOptions(input) {
 }
 __name(normalizeOptions, "normalizeOptions");
 function createStandardMaterial(texture) {
-  return new THREE60__namespace.MeshBasicMaterial({
+  return new THREE67__namespace.MeshBasicMaterial({
     map: texture,
     transparent: true,
-    side: THREE60__namespace.DoubleSide
+    side: THREE67__namespace.DoubleSide
   });
 }
 __name(createStandardMaterial, "createStandardMaterial");
 function createVideoMesh(entityId, texture, options, backend) {
-  const geometry = new THREE60__namespace.PlaneGeometry(1, 1);
+  const geometry = new THREE67__namespace.PlaneGeometry(1, 1);
   const material = options.isGreenScreen ? backend.createChromaKeyMaterial(texture, {
     keyColor: options.backgroundColor,
     similarity: options.similarity,
     smoothness: options.smoothness,
     spill: options.spill
   }) : createStandardMaterial(texture);
-  const mesh = new THREE60__namespace.Mesh(geometry, material);
+  const mesh = new THREE67__namespace.Mesh(geometry, material);
   mesh.userData.entityId = entityId;
   mesh.scale.set(options.width, options.height, 1);
   return { mesh, material };
@@ -6006,7 +6253,7 @@ function createVideo({
   payload,
   isEditor
 }) {
-  const anchor = new THREE60__namespace.Object3D();
+  const anchor = new THREE67__namespace.Object3D();
   const path = payload.path ?? "";
   const options = normalizeOptions(payload.options);
   const entityId = createBaseEntity(world, anchor, {
@@ -6021,8 +6268,8 @@ function createVideo({
     return entityId;
   }
   const video = createVideoElement(path, options);
-  const texture = new THREE60__namespace.VideoTexture(video);
-  texture.colorSpace = THREE60__namespace.SRGBColorSpace;
+  const texture = new THREE67__namespace.VideoTexture(video);
+  texture.colorSpace = THREE67__namespace.SRGBColorSpace;
   texture.needsUpdate = true;
   const { mesh, material } = createVideoMesh(
     entityId,
@@ -6043,7 +6290,7 @@ function createVideo({
   });
   if (!isEditor && options.positional) {
     const listener = getOrCreateListener2(camera);
-    const audioNode = new THREE60__namespace.PositionalAudio(listener);
+    const audioNode = new THREE67__namespace.PositionalAudio(listener);
     audioNode.setVolume(options.volume);
     audioNode.setRefDistance(options.refDistance);
     audioNode.setDistanceModel(normalizeDistanceModel2(options.distanceModel));
@@ -6289,6 +6536,14 @@ function applyParentLinks(snapshot, idMap, objectManagementSystem, world) {
 __name(applyParentLinks, "applyParentLinks");
 
 // core/hydration/postCreateComponents.ts
+var OPTIONAL_UI_FIELDS = {
+  pixelDensity: "number",
+  icon: "string",
+  iconPosition: "string",
+  variant: "string",
+  step: "number",
+  readOnly: "boolean"
+};
 function remapEntityRefsInScriptData(data, idMap) {
   const result = {};
   for (const [key, value] of Object.entries(data)) {
@@ -6672,6 +6927,20 @@ function restorePostCreateComponents(world, objectManagementSystem, targetEntity
       const target = component;
       for (const [key, value] of Object.entries(source)) {
         const current = target[key];
+        if (key === "style") {
+          const style = normalizeUiStyle(value);
+          if (style) target.style = style;
+          continue;
+        }
+        if (key === "tokens") {
+          const tokens = normalizeUiTokens(value);
+          if (tokens) target.tokens = tokens;
+          continue;
+        }
+        if (OPTIONAL_UI_FIELDS[key] === typeof value) {
+          target[key] = value;
+          continue;
+        }
         if ((typeof value === "string" || typeof value === "number" || typeof value === "boolean") && typeof current === typeof value) {
           target[key] = value;
         }
@@ -8175,16 +8444,16 @@ function prefabFileVersionFor(snapshot) {
   return findTopLevelNestedRegions(snapshot).length > 0 ? PREFAB_FILE_VERSION_NESTED : PREFAB_FILE_VERSION;
 }
 __name(prefabFileVersionFor, "prefabFileVersionFor");
-var isRecord = /* @__PURE__ */ __name((value) => value !== null && typeof value === "object" && !Array.isArray(value), "isRecord");
+var isRecord2 = /* @__PURE__ */ __name((value) => value !== null && typeof value === "object" && !Array.isArray(value), "isRecord");
 function parsePrefabAsset(json) {
-  if (!isRecord(json)) {
+  if (!isRecord2(json)) {
     return null;
   }
   if (typeof json.version !== "number" || json.version < 1) {
     return null;
   }
   const snapshot = json.snapshot;
-  if (!isRecord(snapshot)) {
+  if (!isRecord2(snapshot)) {
     return null;
   }
   const entities = snapshot.entities;
@@ -8196,7 +8465,7 @@ function parsePrefabAsset(json) {
     return null;
   }
   if (!components.every(
-    (block) => isRecord(block) && typeof block.component === "string" && Array.isArray(block.entries)
+    (block) => isRecord2(block) && typeof block.component === "string" && Array.isArray(block.entries)
   )) {
     return null;
   }
@@ -8471,7 +8740,7 @@ function transitionToClip(runtime, nextClipId, crossFadeDuration) {
 }
 __name(transitionToClip, "transitionToClip");
 function applyActionState(action, component, paused, shouldLoop) {
-  const loopMode = shouldLoop ? THREE60__namespace.LoopRepeat : THREE60__namespace.LoopOnce;
+  const loopMode = shouldLoop ? THREE67__namespace.LoopRepeat : THREE67__namespace.LoopOnce;
   const repetitions = shouldLoop ? Infinity : 1;
   action.setLoop(loopMode, repetitions);
   action.clampWhenFinished = !shouldLoop;
@@ -8644,7 +8913,7 @@ var _AnimationSystem = class _AnimationSystem {
         if (runtime) {
           stopAllActions(runtime);
         }
-        const mixer = new THREE60__namespace.AnimationMixer(root);
+        const mixer = new THREE67__namespace.AnimationMixer(root);
         const entries2 = readRuntimeClipEntries(animation);
         const indexedActions = createActions(mixer, entries2);
         runtime = {
@@ -8770,11 +9039,11 @@ function normalizeOrthoBounds(component) {
 }
 __name(normalizeOrthoBounds, "normalizeOrthoBounds");
 function isPerspectiveCamera(camera) {
-  return camera instanceof THREE60__namespace.PerspectiveCamera;
+  return camera instanceof THREE67__namespace.PerspectiveCamera;
 }
 __name(isPerspectiveCamera, "isPerspectiveCamera");
 function isOrthographicCamera(camera) {
-  return camera instanceof THREE60__namespace.OrthographicCamera;
+  return camera instanceof THREE67__namespace.OrthographicCamera;
 }
 __name(isOrthographicCamera, "isOrthographicCamera");
 function readWindowAspect() {
@@ -8828,7 +9097,7 @@ var _CameraSyncSystem = class _CameraSyncSystem {
         continue;
       }
       const camera = objectRef.object;
-      if (!(camera instanceof THREE60__namespace.Camera)) {
+      if (!(camera instanceof THREE67__namespace.Camera)) {
         continue;
       }
       if (xrCamera !== null && camera === xrCamera) {
@@ -8893,8 +9162,8 @@ var ObjectVisibilitySystem = _ObjectVisibilitySystem;
 function getUrlExtension(url) {
   const path = url.split(/[?#]/)[0] ?? "";
   const lastSegment = path.split("/").pop() ?? "";
-  const dot = lastSegment.lastIndexOf(".");
-  return dot >= 0 ? lastSegment.slice(dot + 1).toLowerCase() : "";
+  const dot2 = lastSegment.lastIndexOf(".");
+  return dot2 >= 0 ? lastSegment.slice(dot2 + 1).toLowerCase() : "";
 }
 __name(getUrlExtension, "getUrlExtension");
 async function loadEquirectTexture(url) {
@@ -8907,10 +9176,10 @@ async function loadEquirectTexture(url) {
     const { EXRLoader } = await import('three/examples/jsm/loaders/EXRLoader.js');
     texture = await new EXRLoader().loadAsync(url);
   } else {
-    texture = await new THREE60__namespace.TextureLoader().loadAsync(url);
-    texture.colorSpace = THREE60__namespace.SRGBColorSpace;
+    texture = await new THREE67__namespace.TextureLoader().loadAsync(url);
+    texture.colorSpace = THREE67__namespace.SRGBColorSpace;
   }
-  texture.mapping = THREE60__namespace.EquirectangularReflectionMapping;
+  texture.mapping = THREE67__namespace.EquirectangularReflectionMapping;
   texture.needsUpdate = true;
   return texture;
 }
@@ -8919,13 +9188,13 @@ var rendererStates = /* @__PURE__ */ new WeakMap();
 function toThreeToneMapping(mode) {
   switch (mode) {
     case "aces":
-      return THREE60__namespace.ACESFilmicToneMapping;
+      return THREE67__namespace.ACESFilmicToneMapping;
     case "agx":
-      return THREE60__namespace.AgXToneMapping;
+      return THREE67__namespace.AgXToneMapping;
     case "neutral":
-      return THREE60__namespace.NeutralToneMapping;
+      return THREE67__namespace.NeutralToneMapping;
     default:
-      return THREE60__namespace.NoToneMapping;
+      return THREE67__namespace.NoToneMapping;
   }
 }
 __name(toThreeToneMapping, "toThreeToneMapping");
@@ -8946,7 +9215,7 @@ function setRendererToneMappingSource(renderer, source, request) {
     if (request === null) return;
     state = {
       baseline: {
-        toneMapping: target.toneMapping ?? THREE60__namespace.NoToneMapping,
+        toneMapping: target.toneMapping ?? THREE67__namespace.NoToneMapping,
         exposure: typeof target.toneMappingExposure === "number" ? target.toneMappingExposure : 1
       },
       environment: null,
@@ -8977,7 +9246,7 @@ var MIN_DENSITY = 0;
 function createGradientTexture(effect, colors) {
   if (typeof document === "undefined") {
     const pixel = new Uint8Array([30, 30, 30, 255]);
-    const fallback = new THREE60__namespace.DataTexture(pixel, 1, 1, THREE60__namespace.RGBAFormat);
+    const fallback = new THREE67__namespace.DataTexture(pixel, 1, 1, THREE67__namespace.RGBAFormat);
     fallback.needsUpdate = true;
     return fallback;
   }
@@ -8986,7 +9255,7 @@ function createGradientTexture(effect, colors) {
   canvas.height = 512;
   const context = canvas.getContext("2d");
   if (!context) {
-    const fallback = new THREE60__namespace.CanvasTexture(canvas);
+    const fallback = new THREE67__namespace.CanvasTexture(canvas);
     fallback.needsUpdate = true;
     return fallback;
   }
@@ -9014,8 +9283,8 @@ function createGradientTexture(effect, colors) {
     context.fillRect(0, 0, 512, 512);
     context.globalCompositeOperation = "source-over";
   }
-  const texture = new THREE60__namespace.CanvasTexture(canvas);
-  texture.colorSpace = THREE60__namespace.SRGBColorSpace;
+  const texture = new THREE67__namespace.CanvasTexture(canvas);
+  texture.colorSpace = THREE67__namespace.SRGBColorSpace;
   texture.needsUpdate = true;
   return texture;
 }
@@ -9032,7 +9301,7 @@ function readRenderer(world) {
 __name(readRenderer, "readRenderer");
 var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
   constructor(scene) {
-    this.textureLoader = new THREE60__namespace.TextureLoader();
+    this.textureLoader = new THREE67__namespace.TextureLoader();
     /** `true` once an Environment entity has been seen (drives the reset path). */
     this.hasEnvironment = false;
     this.skyboxSignature = null;
@@ -9116,7 +9385,7 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
     if (skybox.type === "color") {
       this.disposeActiveTexture();
       this.pendingImageUrl = null;
-      this.setSkyboxBackground(new THREE60__namespace.Color(skybox.color || "#1e1e1e"));
+      this.setSkyboxBackground(new THREE67__namespace.Color(skybox.color || "#1e1e1e"));
       return;
     }
     if (skybox.type === "gradient") {
@@ -9151,7 +9420,7 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
         return;
       }
       if (!equirect) {
-        texture.colorSpace = THREE60__namespace.SRGBColorSpace;
+        texture.colorSpace = THREE67__namespace.SRGBColorSpace;
       }
       this.activeTexture = texture;
       this.setSkyboxBackground(texture);
@@ -9179,16 +9448,16 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
       this.scene.fog = null;
       return;
     }
-    const fogColor = new THREE60__namespace.Color(fog.color || "#1e1e1e");
+    const fogColor = new THREE67__namespace.Color(fog.color || "#1e1e1e");
     if (fog.type === "linear") {
       const near = Number.isFinite(fog.linear.near) ? fog.linear.near : 1;
       const farCandidate = Number.isFinite(fog.linear.far) ? fog.linear.far : near + 10;
       const far = Math.max(near + MIN_FOG_DELTA, farCandidate);
-      this.scene.fog = new THREE60__namespace.Fog(fogColor, near, far);
+      this.scene.fog = new THREE67__namespace.Fog(fogColor, near, far);
       return;
     }
     const density = Number.isFinite(fog.exponential.density) ? Math.max(MIN_DENSITY, fog.exponential.density) : 2e-3;
-    this.scene.fog = new THREE60__namespace.FogExp2(fogColor, density);
+    this.scene.fog = new THREE67__namespace.FogExp2(fogColor, density);
   }
   // ── Image-based lighting ────────────────────────────────────────────────
   disposeEnvResources() {
@@ -9250,7 +9519,7 @@ var _EnvironmentSyncSystem = class _EnvironmentSyncSystem {
     if (!renderer || getRendererKindOf(renderer) === "webgpu") return null;
     let generator = null;
     try {
-      generator = new THREE60__namespace.PMREMGenerator(renderer);
+      generator = new THREE67__namespace.PMREMGenerator(renderer);
       return generator.fromEquirectangular(texture);
     } catch (error) {
       console.warn(
@@ -9545,7 +9814,7 @@ function computeColliderState(colliderValues, object) {
   if (!object) {
     return colliderValues;
   }
-  const scale = new THREE60__namespace.Vector3();
+  const scale = new THREE67__namespace.Vector3();
   object.getWorldScale(scale);
   return {
     ...colliderValues,
@@ -9596,8 +9865,8 @@ function createColliderDesc(RAPIER, values, triMeshData) {
     values.offsetPosition.y,
     values.offsetPosition.z
   );
-  const offsetQuaternion = new THREE60__namespace.Quaternion().setFromEuler(
-    new THREE60__namespace.Euler(
+  const offsetQuaternion = new THREE67__namespace.Quaternion().setFromEuler(
+    new THREE67__namespace.Euler(
       values.offsetRotation.x,
       values.offsetRotation.y,
       values.offsetRotation.z
@@ -9612,17 +9881,17 @@ function collectTriMeshParts(object) {
     return null;
   }
   object.updateWorldMatrix(true, true);
-  const worldScale = new THREE60__namespace.Vector3();
+  const worldScale = new THREE67__namespace.Vector3();
   object.getWorldScale(worldScale);
   const scale = {
     x: Math.abs(worldScale.x) || 1,
     y: Math.abs(worldScale.y) || 1,
     z: Math.abs(worldScale.z) || 1
   };
-  const worldToObject = new THREE60__namespace.Matrix4().copy(object.matrixWorld).invert();
+  const worldToObject = new THREE67__namespace.Matrix4().copy(object.matrixWorld).invert();
   const parts = [];
   object.traverse((child) => {
-    if (!(child instanceof THREE60__namespace.Mesh) || !child.geometry) {
+    if (!(child instanceof THREE67__namespace.Mesh) || !child.geometry) {
       return;
     }
     const geometry = child.geometry;
@@ -9639,7 +9908,7 @@ function collectTriMeshParts(object) {
     if (indexCount < 3) {
       return;
     }
-    const relativeMatrix = new THREE60__namespace.Matrix4().multiplyMatrices(
+    const relativeMatrix = new THREE67__namespace.Matrix4().multiplyMatrices(
       worldToObject,
       child.matrixWorld
     );
@@ -9680,7 +9949,7 @@ function createTriMeshData(collected) {
   }
   const vertices = new Float32Array(vertexTotal * 3);
   const indices = new Uint32Array(indexTotal);
-  const point = new THREE60__namespace.Vector3();
+  const point = new THREE67__namespace.Vector3();
   let vertexOffset = 0;
   let indexOffset = 0;
   for (const part of parts) {
@@ -9712,8 +9981,8 @@ function createTriMeshData(collected) {
 }
 __name(createTriMeshData, "createTriMeshData");
 function syncBodyFromTransform(body, transform) {
-  const quaternion = new THREE60__namespace.Quaternion().setFromEuler(
-    new THREE60__namespace.Euler(transform.rotation.x, transform.rotation.y, transform.rotation.z)
+  const quaternion = new THREE67__namespace.Quaternion().setFromEuler(
+    new THREE67__namespace.Euler(transform.rotation.x, transform.rotation.y, transform.rotation.z)
   );
   body.setTranslation(
     {
@@ -9740,8 +10009,8 @@ function syncTransformFromBody(transform, body) {
   transform.position.x = position.x;
   transform.position.y = position.y;
   transform.position.z = position.z;
-  const euler = new THREE60__namespace.Euler().setFromQuaternion(
-    new THREE60__namespace.Quaternion(rotation.x, rotation.y, rotation.z, rotation.w)
+  const euler = new THREE67__namespace.Euler().setFromQuaternion(
+    new THREE67__namespace.Quaternion(rotation.x, rotation.y, rotation.z, rotation.w)
   );
   transform.rotation.x = euler.x;
   transform.rotation.y = euler.y;
@@ -9854,8 +10123,8 @@ var _PhysicsSyncSystem = class _PhysicsSyncSystem {
           transform.position.y,
           transform.position.z
         );
-        const quaternion = new THREE60__namespace.Quaternion().setFromEuler(
-          new THREE60__namespace.Euler(
+        const quaternion = new THREE67__namespace.Quaternion().setFromEuler(
+          new THREE67__namespace.Euler(
             transform.rotation.x,
             transform.rotation.y,
             transform.rotation.z
@@ -10586,7 +10855,7 @@ function applyLightValues(lightComponent, rendererKind) {
       values.castShadow
     );
   }
-  if (light instanceof THREE60__namespace.PointLight) {
+  if (light instanceof THREE67__namespace.PointLight) {
     if (typeof values.distance === "number" && Number.isFinite(values.distance)) {
       light.distance = Math.max(MIN_LIGHT_DISTANCE, values.distance);
     }
@@ -10594,7 +10863,7 @@ function applyLightValues(lightComponent, rendererKind) {
       light.decay = Math.max(0, values.decay);
     }
   }
-  if (light instanceof THREE60__namespace.SpotLight) {
+  if (light instanceof THREE67__namespace.SpotLight) {
     if (typeof values.distance === "number" && Number.isFinite(values.distance)) {
       light.distance = Math.max(MIN_LIGHT_DISTANCE, values.distance);
     }
@@ -10608,7 +10877,7 @@ function applyLightValues(lightComponent, rendererKind) {
       light.penumbra = Math.max(0, Math.min(1, values.penumbra));
     }
   }
-  if (light instanceof THREE60__namespace.RectAreaLight) {
+  if (light instanceof THREE67__namespace.RectAreaLight) {
     if (typeof values.width === "number" && Number.isFinite(values.width)) {
       light.width = Math.max(MIN_AREA_SIZE, values.width);
     }
@@ -10672,15 +10941,15 @@ function resolveMaterialPropertyKey(key) {
 __name(resolveMaterialPropertyKey, "resolveMaterialPropertyKey");
 function createMaterialByType(type) {
   if (type === "basic") {
-    return new THREE60__namespace.MeshBasicMaterial();
+    return new THREE67__namespace.MeshBasicMaterial();
   }
   if (type === "phong") {
-    return new THREE60__namespace.MeshPhongMaterial();
+    return new THREE67__namespace.MeshPhongMaterial();
   }
   if (type === "physical") {
-    return new THREE60__namespace.MeshPhysicalMaterial();
+    return new THREE67__namespace.MeshPhysicalMaterial();
   }
-  return new THREE60__namespace.MeshStandardMaterial();
+  return new THREE67__namespace.MeshStandardMaterial();
 }
 __name(createMaterialByType, "createMaterialByType");
 function replaceMaterialAcrossObject(object, previous, next) {
@@ -10739,12 +11008,12 @@ function applyTextureFiltering(material, filtering) {
   const target = material;
   for (const slot of materialTextureSlots) {
     const texture = target[slot];
-    if (!texture || !(texture instanceof THREE60__namespace.Texture)) {
+    if (!texture || !(texture instanceof THREE67__namespace.Texture)) {
       continue;
     }
     const useMipmaps = texture.generateMipmaps !== false;
-    texture.magFilter = sharp ? THREE60__namespace.NearestFilter : THREE60__namespace.LinearFilter;
-    texture.minFilter = useMipmaps ? sharp ? THREE60__namespace.NearestMipmapNearestFilter : THREE60__namespace.LinearMipmapLinearFilter : sharp ? THREE60__namespace.NearestFilter : THREE60__namespace.LinearFilter;
+    texture.magFilter = sharp ? THREE67__namespace.NearestFilter : THREE67__namespace.LinearFilter;
+    texture.minFilter = useMipmaps ? sharp ? THREE67__namespace.NearestMipmapNearestFilter : THREE67__namespace.LinearMipmapLinearFilter : sharp ? THREE67__namespace.NearestFilter : THREE67__namespace.LinearFilter;
     texture.needsUpdate = true;
   }
   material.needsUpdate = true;
@@ -10754,12 +11023,12 @@ function setTextureMipmaps(material, enabled) {
   const target = material;
   for (const slot of materialTextureSlots) {
     const texture = target[slot];
-    if (!texture || !(texture instanceof THREE60__namespace.Texture)) {
+    if (!texture || !(texture instanceof THREE67__namespace.Texture)) {
       continue;
     }
     texture.generateMipmaps = enabled;
-    const sharp = texture.magFilter === THREE60__namespace.NearestFilter;
-    texture.minFilter = enabled ? sharp ? THREE60__namespace.NearestMipmapNearestFilter : THREE60__namespace.LinearMipmapLinearFilter : sharp ? THREE60__namespace.NearestFilter : THREE60__namespace.LinearFilter;
+    const sharp = texture.magFilter === THREE67__namespace.NearestFilter;
+    texture.minFilter = enabled ? sharp ? THREE67__namespace.NearestMipmapNearestFilter : THREE67__namespace.LinearMipmapLinearFilter : sharp ? THREE67__namespace.NearestFilter : THREE67__namespace.LinearFilter;
     texture.needsUpdate = true;
   }
   material.needsUpdate = true;
@@ -10770,7 +11039,7 @@ function assignMaterialTexture(material, rawKey, url, textureCache) {
   const key = resolveMaterialPropertyKey(rawKey);
   let texture = textureCache.get(url);
   if (!texture) {
-    texture = new THREE60__namespace.TextureLoader().load(url);
+    texture = new THREE67__namespace.TextureLoader().load(url);
     textureCache.set(url, texture);
   }
   target[key] = texture;
@@ -10808,7 +11077,7 @@ function applyMaterialState(material, value, textureCache) {
   }
   target.side = value.side;
   target.blending = value.blending;
-  target.premultipliedAlpha = value.blending === THREE60__namespace.MultiplyBlending || value.blending === THREE60__namespace.SubtractiveBlending;
+  target.premultipliedAlpha = value.blending === THREE67__namespace.MultiplyBlending || value.blending === THREE67__namespace.SubtractiveBlending;
   target.depthTest = value.depthTest;
   target.depthWrite = value.depthWrite;
   target.wireframe = value.wireframe;
@@ -10969,12 +11238,12 @@ function resolvePrimaryMesh(object) {
   if (!object) {
     return null;
   }
-  if (object instanceof THREE60__namespace.Mesh) {
+  if (object instanceof THREE67__namespace.Mesh) {
     return object;
   }
   let found = null;
   object.traverse((child) => {
-    if (!found && child instanceof THREE60__namespace.Mesh) {
+    if (!found && child instanceof THREE67__namespace.Mesh) {
       found = child;
     }
   });
@@ -10995,22 +11264,22 @@ function applyGeometry(component) {
   switch (component.kind) {
     case "cube": {
       const params = sanitized;
-      nextGeometry = new THREE60__namespace.BoxGeometry(params.width, params.height, params.depth);
+      nextGeometry = new THREE67__namespace.BoxGeometry(params.width, params.height, params.depth);
       break;
     }
     case "plane": {
       const params = sanitized;
-      nextGeometry = new THREE60__namespace.PlaneGeometry(params.width, params.height);
+      nextGeometry = new THREE67__namespace.PlaneGeometry(params.width, params.height);
       break;
     }
     case "sphere": {
       const params = sanitized;
-      nextGeometry = new THREE60__namespace.SphereGeometry(params.radius, 24, 24);
+      nextGeometry = new THREE67__namespace.SphereGeometry(params.radius, 24, 24);
       break;
     }
     case "cylinder": {
       const params = sanitized;
-      nextGeometry = new THREE60__namespace.CylinderGeometry(
+      nextGeometry = new THREE67__namespace.CylinderGeometry(
         params.radius,
         params.radius,
         params.height,
@@ -11020,7 +11289,7 @@ function applyGeometry(component) {
     }
     case "capsule": {
       const params = sanitized;
-      nextGeometry = new THREE60__namespace.CapsuleGeometry(params.radius, params.height, 4, 8);
+      nextGeometry = new THREE67__namespace.CapsuleGeometry(params.radius, params.height, 4, 8);
       break;
     }
     default:
@@ -11036,7 +11305,7 @@ function applyShadowFlags(component) {
     return;
   }
   component.object.traverse((child) => {
-    if (child instanceof THREE60__namespace.Mesh) {
+    if (child instanceof THREE67__namespace.Mesh) {
       child.castShadow = component.castShadow;
       child.receiveShadow = component.receiveShadow;
     }
@@ -11112,35 +11381,35 @@ function buildGeometry(component) {
   switch (component.meshKind) {
     case "cube": {
       const params = p;
-      return new THREE60__namespace.BoxGeometry(params.width, params.height, params.depth);
+      return new THREE67__namespace.BoxGeometry(params.width, params.height, params.depth);
     }
     case "plane": {
       const params = p;
-      return new THREE60__namespace.PlaneGeometry(params.width, params.height);
+      return new THREE67__namespace.PlaneGeometry(params.width, params.height);
     }
     case "sphere": {
       const params = p;
-      return new THREE60__namespace.SphereGeometry(params.radius, 24, 24);
+      return new THREE67__namespace.SphereGeometry(params.radius, 24, 24);
     }
     case "cylinder": {
       const params = p;
-      return new THREE60__namespace.CylinderGeometry(params.radius, params.radius, params.height, 20);
+      return new THREE67__namespace.CylinderGeometry(params.radius, params.radius, params.height, 20);
     }
     case "capsule": {
       const params = p;
-      return new THREE60__namespace.CapsuleGeometry(params.radius, params.height, 4, 8);
+      return new THREE67__namespace.CapsuleGeometry(params.radius, params.height, 4, 8);
     }
     default:
-      return new THREE60__namespace.BoxGeometry(1, 1, 1);
+      return new THREE67__namespace.BoxGeometry(1, 1, 1);
   }
 }
 __name(buildGeometry, "buildGeometry");
-var _position = new THREE60__namespace.Vector3();
-var _quaternion = new THREE60__namespace.Quaternion();
-var _euler = new THREE60__namespace.Euler();
-var _scale = new THREE60__namespace.Vector3();
-var _matrix = new THREE60__namespace.Matrix4();
-var _modelMatrix = new THREE60__namespace.Matrix4();
+var _position = new THREE67__namespace.Vector3();
+var _quaternion = new THREE67__namespace.Quaternion();
+var _euler = new THREE67__namespace.Euler();
+var _scale = new THREE67__namespace.Vector3();
+var _matrix = new THREE67__namespace.Matrix4();
+var _modelMatrix = new THREE67__namespace.Matrix4();
 function instanceTransformFromComponent(transform, out) {
   _position.set(transform.position.x, transform.position.y, transform.position.z);
   _euler.set(transform.rotation.x, transform.rotation.y, transform.rotation.z, "XYZ");
@@ -11222,9 +11491,9 @@ var _InstancedMeshSystem = class _InstancedMeshSystem {
       const instanceCount = comp.instanceEntityIds.length;
       const geometrySignature = comp.meshKind === "model" ? `model:${comp.modelPath}:${instanceCount}` : `${comp.meshKind}:${JSON.stringify(comp.meshParameters)}:${instanceCount}`;
       if (comp.instancedMesh === null) {
-        const tracked = this.trackedMeshes.get(entityId);
-        if (tracked) {
-          comp.instancedMesh = tracked;
+        const tracked2 = this.trackedMeshes.get(entityId);
+        if (tracked2) {
+          comp.instancedMesh = tracked2;
         }
       }
       const pendingLoadSignature = this.loadingSignatures.get(entityId);
@@ -11293,7 +11562,7 @@ var _InstancedMeshSystem = class _InstancedMeshSystem {
                 const sourceMaterial = Array.isArray(meshChild.material) ? meshChild.material.map((m) => m.clone()) : meshChild.material.clone();
                 meshChild.updateWorldMatrix(true, false);
                 const localMatrix = meshChild.matrixWorld.clone();
-                const instancedMesh2 = new THREE60__namespace.InstancedMesh(
+                const instancedMesh2 = new THREE67__namespace.InstancedMesh(
                   geometry2,
                   Array.isArray(sourceMaterial) ? sourceMaterial : sourceMaterial,
                   count2
@@ -11318,7 +11587,7 @@ var _InstancedMeshSystem = class _InstancedMeshSystem {
                 this.loadingSignatures.delete(targetEntityId);
                 return;
               }
-              const group = new THREE60__namespace.Group();
+              const group = new THREE67__namespace.Group();
               for (const entry of entries) {
                 group.add(entry.instancedMesh);
               }
@@ -11336,8 +11605,8 @@ var _InstancedMeshSystem = class _InstancedMeshSystem {
         }
         const count = instanceCount;
         const geometry = buildGeometry(comp);
-        const material = new THREE60__namespace.MeshStandardMaterial({ color: "#ffffff" });
-        const instancedMesh = new THREE60__namespace.InstancedMesh(geometry, material, count);
+        const material = new THREE67__namespace.MeshStandardMaterial({ color: "#ffffff" });
+        const instancedMesh = new THREE67__namespace.InstancedMesh(geometry, material, count);
         instancedMesh.castShadow = comp.castShadow;
         instancedMesh.receiveShadow = comp.receiveShadow;
         for (let i = 0; i < count; i++) {
@@ -11607,7 +11876,7 @@ var _Behaviour = class _Behaviour {
     if (!this.threeRef) {
       return null;
     }
-    const position = new THREE60__namespace.Vector3();
+    const position = new THREE67__namespace.Vector3();
     this.threeRef.object.getWorldPosition(position);
     return position;
   }
@@ -11619,7 +11888,7 @@ var _Behaviour = class _Behaviour {
     if (!this.threeRef) {
       return null;
     }
-    const target = new THREE60__namespace.Vector3();
+    const target = new THREE67__namespace.Vector3();
     this.threeRef.object.getWorldDirection(target);
     return target;
   }
@@ -11681,7 +11950,7 @@ var _Behaviour = class _Behaviour {
     if (!this.threeRef) {
       return;
     }
-    const rotation = new THREE60__namespace.Quaternion();
+    const rotation = new THREE67__namespace.Quaternion();
     this.threeRef.object.getWorldQuaternion(rotation);
     rotation.slerp(targetRotation, alpha);
     this.transform.setRotation(rotation);
@@ -11698,7 +11967,7 @@ var _Behaviour = class _Behaviour {
       return;
     }
     const clone3 = this.threeRef.object.clone();
-    const rotation = new THREE60__namespace.Quaternion();
+    const rotation = new THREE67__namespace.Quaternion();
     clone3.lookAt(targetPosition);
     clone3.getWorldQuaternion(rotation);
     this.transform.setRotation(rotation);
@@ -11961,8 +12230,8 @@ var _ScriptBehaviourSystem = class _ScriptBehaviourSystem {
     const retryDelay = options?.errorRetryDelay;
     this.errorRetryDelay = typeof retryDelay === "number" && Number.isFinite(retryDelay) ? Math.max(0, retryDelay) : DEFAULT_SCRIPT_ERROR_RETRY_DELAY;
     this.selectionCtx = selectionContext ?? null;
-    this.raycaster = new THREE60__namespace.Raycaster();
-    this.ndcPointer = new THREE60__namespace.Vector2();
+    this.raycaster = new THREE67__namespace.Raycaster();
+    this.ndcPointer = new THREE67__namespace.Vector2();
     if (this.selectionCtx) {
       this.selectionCtx.domElement.addEventListener("pointerdown", this.onPointerDown);
       this.selectionCtx.domElement.addEventListener("pointerup", this.onPointerUp);
@@ -12406,7 +12675,7 @@ function disposeBuiltObject(root) {
     for (const mat of materials) {
       if (mat.userData?.[SHARED_MODEL_RESOURCE_FLAG]) continue;
       for (const value of Object.values(mat)) {
-        if (value instanceof THREE60__namespace.Texture) value.dispose();
+        if (value instanceof THREE67__namespace.Texture) value.dispose();
       }
       mat.dispose?.();
     }
@@ -13007,7 +13276,7 @@ var _AudioSystem = class _AudioSystem {
     if (!prev || prev.volume !== opts.volume) {
       sound.setVolume(opts.volume);
     }
-    if (opts.positional && sound instanceof THREE60__namespace.PositionalAudio) {
+    if (opts.positional && sound instanceof THREE67__namespace.PositionalAudio) {
       if (!prev || prev.refDistance !== opts.refDistance) {
         sound.setRefDistance(opts.refDistance);
       }
@@ -13147,7 +13416,7 @@ var _VideoSystem = class _VideoSystem {
         spill: opts.spill
       });
     }
-    if (opts.positional && component.audioNode instanceof THREE60__namespace.PositionalAudio) {
+    if (opts.positional && component.audioNode instanceof THREE67__namespace.PositionalAudio) {
       const posAudio = component.audioNode;
       if (!prev || prev.refDistance !== opts.refDistance) {
         posAudio.setRefDistance(opts.refDistance);
@@ -13187,8 +13456,8 @@ function blankState(source) {
     handedness: handednessOf(source),
     kind: kindOf(source),
     connected: true,
-    rayOrigin: new THREE60__namespace.Vector3(),
-    rayDirection: new THREE60__namespace.Vector3(0, 0, -1),
+    rayOrigin: new THREE67__namespace.Vector3(),
+    rayDirection: new THREE67__namespace.Vector3(0, 0, -1),
     gripPosition: null,
     gripQuaternion: null,
     select: false,
@@ -13214,7 +13483,7 @@ function readHandJoints(frame, hand, referenceSpace, rigMatrix, existing) {
   }
   if (spaces.length === 0) return null;
   const target = existing ?? {};
-  const matrix = new THREE60__namespace.Matrix4();
+  const matrix = new THREE67__namespace.Matrix4();
   const buffer = spaces.length * 16 <= JOINT_MATRIX_BUFFER.length ? JOINT_MATRIX_BUFFER : new Float32Array(spaces.length * 16);
   const fillPoses = frame.fillPoses;
   if (typeof fillPoses === "function") {
@@ -13227,7 +13496,7 @@ function readHandJoints(frame, hand, referenceSpace, rigMatrix, existing) {
     if (filled) {
       for (let i = 0; i < names.length; i += 1) {
         matrix.fromArray(buffer, i * 16).premultiply(rigMatrix);
-        const vector = target[names[i]] ?? new THREE60__namespace.Vector3();
+        const vector = target[names[i]] ?? new THREE67__namespace.Vector3();
         vector.setFromMatrixPosition(matrix);
         target[names[i]] = vector;
       }
@@ -13245,7 +13514,7 @@ function readHandJoints(frame, hand, referenceSpace, rigMatrix, existing) {
       continue;
     }
     matrix.fromArray(pose.transform.matrix).premultiply(rigMatrix);
-    const vector = target[names[i]] ?? new THREE60__namespace.Vector3();
+    const vector = target[names[i]] ?? new THREE67__namespace.Vector3();
     vector.setFromMatrixPosition(matrix);
     target[names[i]] = vector;
     anyTracked = true;
@@ -13257,7 +13526,7 @@ var _XRInputSystem = class _XRInputSystem {
   constructor() {
     this.records = /* @__PURE__ */ new Map();
     /** Reference-space → world matrix, rebuilt each frame from the XR rig. */
-    this.referenceToWorld = new THREE60__namespace.Matrix4();
+    this.referenceToWorld = new THREE67__namespace.Matrix4();
     this.session = null;
     this.onSelectStart = /* @__PURE__ */ __name((event) => this.mark(event, "pendingSelectStart"), "onSelectStart");
     this.onSelectEnd = /* @__PURE__ */ __name((event) => this.mark(event, "pendingSelectEnd"), "onSelectEnd");
@@ -13355,19 +13624,19 @@ var _XRInputSystem = class _XRInputSystem {
       if (frame && referenceSpace && source.targetRaySpace) {
         const pose = frame.getPose(source.targetRaySpace, referenceSpace);
         if (pose) {
-          const m = new THREE60__namespace.Matrix4().fromArray(pose.transform.matrix).premultiply(rigMatrix);
+          const m = new THREE67__namespace.Matrix4().fromArray(pose.transform.matrix).premultiply(rigMatrix);
           state.rayOrigin.setFromMatrixPosition(m);
           state.rayDirection.set(0, 0, -1).applyQuaternion(
-            new THREE60__namespace.Quaternion().setFromRotationMatrix(m)
+            new THREE67__namespace.Quaternion().setFromRotationMatrix(m)
           ).normalize();
         }
       }
       if (frame && referenceSpace && source.gripSpace) {
         const gripPose = frame.getPose(source.gripSpace, referenceSpace);
         if (gripPose) {
-          const m = new THREE60__namespace.Matrix4().fromArray(gripPose.transform.matrix).premultiply(rigMatrix);
-          state.gripPosition ?? (state.gripPosition = new THREE60__namespace.Vector3());
-          state.gripQuaternion ?? (state.gripQuaternion = new THREE60__namespace.Quaternion());
+          const m = new THREE67__namespace.Matrix4().fromArray(gripPose.transform.matrix).premultiply(rigMatrix);
+          state.gripPosition ?? (state.gripPosition = new THREE67__namespace.Vector3());
+          state.gripQuaternion ?? (state.gripQuaternion = new THREE67__namespace.Quaternion());
           state.gripPosition.setFromMatrixPosition(m);
           state.gripQuaternion.setFromRotationMatrix(m);
         }
@@ -13469,6 +13738,51 @@ var _XRInputSystem = class _XRInputSystem {
 };
 __name(_XRInputSystem, "XRInputSystem");
 var XRInputSystem = _XRInputSystem;
+
+// core/ui/uiWidgetTree.ts
+var UI_PART_KEY = "__uiPart";
+function applyPartColor(mesh, tag) {
+  const material = mesh.material;
+  material.color.copy(tag.baseColor).multiplyScalar(tag.premultiplied ? tag.tint * tag.opacity : tag.tint);
+  material.opacity = tag.opacity;
+}
+__name(applyPartColor, "applyPartColor");
+function isUiWidget(world, entityId) {
+  return !!world.getComponent(entityId, UIPanelComponent) || !!world.getComponent(entityId, UITextComponent) || !!world.getComponent(entityId, UIButtonComponent) || !!world.getComponent(entityId, UIToggleComponent) || !!world.getComponent(entityId, UISliderComponent);
+}
+__name(isUiWidget, "isUiWidget");
+function isShownInScene(world, entityId) {
+  let object = world.getComponent(entityId, Object3DRef)?.object ?? null;
+  while (object) {
+    if (!object.visible) return false;
+    object = object.parent;
+  }
+  return true;
+}
+__name(isShownInScene, "isShownInScene");
+function nearestWidgetAncestor(world, entityId) {
+  const visited = /* @__PURE__ */ new Set([entityId]);
+  let current = entityId;
+  for (; ; ) {
+    const parentId = world.getComponent(current, ParentId)?.value;
+    if (typeof parentId !== "number" || visited.has(parentId)) return null;
+    if (isUiWidget(world, parentId)) return parentId;
+    visited.add(parentId);
+    current = parentId;
+  }
+}
+__name(nearestWidgetAncestor, "nearestWidgetAncestor");
+function widgetTreeRoot(world, entityId) {
+  const visited = /* @__PURE__ */ new Set([entityId]);
+  let root = entityId;
+  for (; ; ) {
+    const parent = nearestWidgetAncestor(world, root);
+    if (parent === null || visited.has(parent)) return root;
+    visited.add(parent);
+    root = parent;
+  }
+}
+__name(widgetTreeRoot, "widgetTreeRoot");
 var VELOCITY_SAMPLES = 5;
 var MAX_SAMPLE_AGE_SECONDS = 0.2;
 var MAX_PLAUSIBLE_SPEED = 20;
@@ -13495,15 +13809,15 @@ var _ThrowVelocityTracker = class _ThrowVelocityTracker {
     const fresh = this.samples.filter(
       (sample) => now - sample.time <= MAX_SAMPLE_AGE_SECONDS
     );
-    if (fresh.length < 2) return new THREE60__namespace.Vector3();
-    let best = new THREE60__namespace.Vector3();
+    if (fresh.length < 2) return new THREE67__namespace.Vector3();
+    let best = new THREE67__namespace.Vector3();
     let bestSpeed = 0;
     for (let i = 1; i < fresh.length; i += 1) {
       const previous = fresh[i - 1];
       const current = fresh[i];
       const dt = current.time - previous.time;
       if (dt <= 1e-5) continue;
-      const velocity = new THREE60__namespace.Vector3().subVectors(current.position, previous.position).divideScalar(dt);
+      const velocity = new THREE67__namespace.Vector3().subVectors(current.position, previous.position).divideScalar(dt);
       const speed = velocity.length();
       if (speed > MAX_PLAUSIBLE_SPEED) continue;
       if (speed > bestSpeed) {
@@ -13520,15 +13834,15 @@ var _ThrowVelocityTracker = class _ThrowVelocityTracker {
 __name(_ThrowVelocityTracker, "ThrowVelocityTracker");
 var ThrowVelocityTracker = _ThrowVelocityTracker;
 function angularVelocityFrom(previous, current, deltaTime) {
-  if (deltaTime <= 1e-5) return new THREE60__namespace.Vector3();
+  if (deltaTime <= 1e-5) return new THREE67__namespace.Vector3();
   const delta = current.clone().multiply(previous.clone().invert());
   if (delta.w < 0) {
     delta.set(-delta.x, -delta.y, -delta.z, -delta.w);
   }
-  const angle = 2 * Math.acos(THREE60__namespace.MathUtils.clamp(delta.w, -1, 1));
+  const angle = 2 * Math.acos(THREE67__namespace.MathUtils.clamp(delta.w, -1, 1));
   const sinHalf = Math.sqrt(Math.max(0, 1 - delta.w * delta.w));
-  if (sinHalf < 1e-6 || angle < 1e-6) return new THREE60__namespace.Vector3();
-  return new THREE60__namespace.Vector3(delta.x, delta.y, delta.z).divideScalar(sinHalf).multiplyScalar(angle / deltaTime);
+  if (sinHalf < 1e-6 || angle < 1e-6) return new THREE67__namespace.Vector3();
+  return new THREE67__namespace.Vector3(delta.x, delta.y, delta.z).divideScalar(sinHalf).multiplyScalar(angle / deltaTime);
 }
 __name(angularVelocityFrom, "angularVelocityFrom");
 var MIN_HAND_SEPARATION = 0.06;
@@ -13536,7 +13850,7 @@ var MIN_ANCHOR_SEPARATION = 1e-3;
 var SCALE_DEADZONE = 0.05;
 function solveTwoHandTransform(primary, secondary, basis, options) {
   const separation = primary.position.distanceTo(secondary.position);
-  const anchorDelta = new THREE60__namespace.Vector3().subVectors(
+  const anchorDelta = new THREE67__namespace.Vector3().subVectors(
     basis.secondaryLocal,
     basis.primaryLocal
   );
@@ -13560,8 +13874,8 @@ function solveTwoHandTransform(primary, secondary, basis, options) {
   } else {
     const axisLocal = anchorDelta.clone().normalize();
     const currentAxis = axisLocal.clone().applyQuaternion(base).normalize();
-    const desiredAxis = new THREE60__namespace.Vector3().subVectors(secondary.position, primary.position).normalize();
-    const correction = new THREE60__namespace.Quaternion().setFromUnitVectors(
+    const desiredAxis = new THREE67__namespace.Vector3().subVectors(secondary.position, primary.position).normalize();
+    const correction = new THREE67__namespace.Quaternion().setFromUnitVectors(
       currentAxis,
       desiredAxis
     );
@@ -13576,11 +13890,11 @@ __name(solveTwoHandTransform, "solveTwoHandTransform");
 // core/systems/XRInteractionSystem.ts
 var RAYLESS_HOLD_DISTANCE = 0.5;
 function quatFromEulerVec(r) {
-  return new THREE60__namespace.Quaternion().setFromEuler(new THREE60__namespace.Euler(r.x, r.y, r.z));
+  return new THREE67__namespace.Quaternion().setFromEuler(new THREE67__namespace.Euler(r.x, r.y, r.z));
 }
 __name(quatFromEulerVec, "quatFromEulerVec");
 function writeEuler(target, q) {
-  const euler = new THREE60__namespace.Euler().setFromQuaternion(q);
+  const euler = new THREE67__namespace.Euler().setFromQuaternion(q);
   target.x = euler.x;
   target.y = euler.y;
   target.z = euler.z;
@@ -13588,7 +13902,7 @@ function writeEuler(target, q) {
 __name(writeEuler, "writeEuler");
 var _XRInteractionSystem = class _XRInteractionSystem {
   constructor(inputSystem) {
-    this.raycaster = new THREE60__namespace.Raycaster();
+    this.raycaster = new THREE67__namespace.Raycaster();
     this.grabs = /* @__PURE__ */ new Map();
     this.hoveredEntityId = null;
     /** Per-hand hover, with the hit distance so the ray can stop at the surface. */
@@ -13699,7 +14013,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     const hand = this.handPosition(input);
     const handQuaternion = this.handQuaternion(input);
     const objectQuaternion = quatFromEulerVec(transform.rotation);
-    record.offset = new THREE60__namespace.Vector3(
+    record.offset = new THREE67__namespace.Vector3(
       transform.position.x - hand.x,
       transform.position.y - hand.y,
       transform.position.z - hand.z
@@ -13731,7 +14045,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     primary.record.twoHand = {
       primaryLocal,
       secondaryLocal,
-      initialScale: new THREE60__namespace.Vector3(
+      initialScale: new THREE67__namespace.Vector3(
         transform.scale.x,
         transform.scale.y,
         transform.scale.z
@@ -13752,7 +14066,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
   /** World point → the object's UNSCALED local space. */
   objectLocalPoint(transform, worldPoint) {
     const local = worldPoint.clone().sub(
-      new THREE60__namespace.Vector3(
+      new THREE67__namespace.Vector3(
         transform.position.x,
         transform.position.y,
         transform.position.z
@@ -13810,7 +14124,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       );
       if (!interactable2) continue;
       if (interactable2.grabReach === "distance") continue;
-      const position = new THREE60__namespace.Vector3();
+      const position = new THREE67__namespace.Vector3();
       entry.object.getWorldPosition(position);
       const distance = position.distanceTo(hand);
       if (distance <= interactable2.grabRadius && distance < nearestDistance) {
@@ -13842,6 +14156,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       const interactable = world.getComponent(entityId, XRInteractableComponent);
       if (!interactable?.enabled) continue;
       if (!world.isEntityVisible(entityId)) continue;
+      if (!isShownInScene(world, entityId)) continue;
       const object = world.getComponent(entityId, Object3DRef)?.object;
       if (object) {
         out.push({ entityId, object, pointable: interactable.pointable });
@@ -13882,13 +14197,13 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       this.holdersOf(entityId).map((holder) => holder.record.attachPointId).filter((id) => id !== null)
     );
     const hand = this.handPosition(input);
-    const objectPosition = new THREE60__namespace.Vector3(
+    const objectPosition = new THREE67__namespace.Vector3(
       transform.position.x,
       transform.position.y,
       transform.position.z
     );
     const objectQuaternion = quatFromEulerVec(transform.rotation);
-    const scale = new THREE60__namespace.Vector3(
+    const scale = new THREE67__namespace.Vector3(
       transform.scale.x,
       transform.scale.y,
       transform.scale.z
@@ -13899,7 +14214,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       if (taken.has(point.id)) continue;
       if (point.hand !== "any" && point.hand !== input.handedness) continue;
       if (point.role !== "any" && point.role !== role) continue;
-      const world3 = new THREE60__namespace.Vector3(
+      const world3 = new THREE67__namespace.Vector3(
         point.position.x,
         point.position.y,
         point.position.z
@@ -13922,21 +14237,21 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     let offset;
     let remoteDistance = 0;
     if (remote) {
-      const position = new THREE60__namespace.Vector3(
+      const position = new THREE67__namespace.Vector3(
         transform.position.x,
         transform.position.y,
         transform.position.z
       );
       remoteDistance = position.distanceTo(input.rayOrigin);
-      offset = new THREE60__namespace.Vector3();
+      offset = new THREE67__namespace.Vector3();
     } else if (viaDistance) {
-      offset = new THREE60__namespace.Vector3(
+      offset = new THREE67__namespace.Vector3(
         interactable.grabOffsetPosition.x,
         interactable.grabOffsetPosition.y,
         interactable.grabOffsetPosition.z
       );
     } else {
-      offset = new THREE60__namespace.Vector3(
+      offset = new THREE67__namespace.Vector3(
         transform.position.x - hand.x,
         transform.position.y - hand.y,
         transform.position.z - hand.z
@@ -13963,7 +14278,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       entityId,
       role,
       attachPointId: attachPoint?.id ?? null,
-      attachLocal: attachPoint ? new THREE60__namespace.Vector3(
+      attachLocal: attachPoint ? new THREE67__namespace.Vector3(
         attachPoint.position.x,
         attachPoint.position.y,
         attachPoint.position.z
@@ -13972,8 +14287,8 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       handRotationOffset,
       twoHand: null,
       offset,
-      rotationOffset: new THREE60__namespace.Quaternion().setFromEuler(
-        new THREE60__namespace.Euler(
+      rotationOffset: new THREE67__namespace.Quaternion().setFromEuler(
+        new THREE67__namespace.Euler(
           interactable.grabOffsetRotation.x,
           interactable.grabOffsetRotation.y,
           interactable.grabOffsetRotation.z
@@ -13984,7 +14299,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       restoreBodyType,
       tracker,
       lastHandQuaternion: handQuaternion.clone(),
-      angularVelocity: new THREE60__namespace.Vector3()
+      angularVelocity: new THREE67__namespace.Vector3()
     });
     if (role === "primary") {
       this.dispatch(world, entityId, "onGrab", (b) => b.onGrab(input));
@@ -14057,14 +14372,14 @@ var _XRInteractionSystem = class _XRInteractionSystem {
     const handQuaternion = this.handQuaternion(input);
     const objectQuaternion = held.attachQuaternion ? handQuaternion.clone().multiply(held.rotationOffset).multiply(held.attachQuaternion.clone().invert()) : handQuaternion.clone().multiply(held.handRotationOffset);
     if (held.remote) {
-      const target = new THREE60__namespace.Vector3().copy(input.rayDirection).multiplyScalar(held.remoteDistance).add(input.rayOrigin);
+      const target = new THREE67__namespace.Vector3().copy(input.rayDirection).multiplyScalar(held.remoteDistance).add(input.rayOrigin);
       transform.position.x = target.x;
       transform.position.y = target.y;
       transform.position.z = target.z;
       writeEuler(transform.rotation, objectQuaternion);
     } else if (held.attachLocal) {
       const anchor = held.attachLocal.clone().multiply(
-        new THREE60__namespace.Vector3(
+        new THREE67__namespace.Vector3(
           transform.scale.x,
           transform.scale.y,
           transform.scale.z
@@ -14082,7 +14397,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
       writeEuler(transform.rotation, objectQuaternion);
     }
     held.tracker.record(
-      held.remote ? new THREE60__namespace.Vector3(
+      held.remote ? new THREE67__namespace.Vector3(
         transform.position.x,
         transform.position.y,
         transform.position.z
@@ -14157,7 +14472,7 @@ var _XRInteractionSystem = class _XRInteractionSystem {
    */
   handPosition(input) {
     if (input.gripPosition) return input.gripPosition;
-    return new THREE60__namespace.Vector3().copy(input.rayDirection).multiplyScalar(RAYLESS_HOLD_DISTANCE).add(input.rayOrigin);
+    return new THREE67__namespace.Vector3().copy(input.rayDirection).multiplyScalar(RAYLESS_HOLD_DISTANCE).add(input.rayOrigin);
   }
   /**
    * Hand orientation. Grip-less sources (gaze / transient-pointer) have none,
@@ -14165,8 +14480,8 @@ var _XRInteractionSystem = class _XRInteractionSystem {
    */
   handQuaternion(input) {
     if (input.gripQuaternion) return input.gripQuaternion.clone();
-    return new THREE60__namespace.Quaternion().setFromUnitVectors(
-      new THREE60__namespace.Vector3(0, 0, -1),
+    return new THREE67__namespace.Quaternion().setFromUnitVectors(
+      new THREE67__namespace.Vector3(0, 0, -1),
       input.rayDirection.clone().normalize()
     );
   }
@@ -14303,7 +14618,7 @@ function sampleTeleportArc(origin, direction, out = [], options) {
   for (let i = 0; i < steps; i += 1) {
     const t = i / (steps - 1) * maxTime;
     out.push(
-      new THREE60__namespace.Vector3(
+      new THREE67__namespace.Vector3(
         origin.x + velocity.x * t,
         origin.y + velocity.y * t - 0.5 * gravity * t * t,
         origin.z + velocity.z * t
@@ -14320,7 +14635,7 @@ function arcGroundCrossing(points, groundY) {
     if (previous.y >= groundY && current.y <= groundY) {
       const span = previous.y - current.y;
       const alpha = span > 1e-6 ? (previous.y - groundY) / span : 0;
-      return new THREE60__namespace.Vector3().lerpVectors(previous, current, alpha);
+      return new THREE67__namespace.Vector3().lerpVectors(previous, current, alpha);
     }
   }
   return null;
@@ -14364,11 +14679,11 @@ __name(_TeleportAimGate, "TeleportAimGate");
 var TeleportAimGate = _TeleportAimGate;
 
 // core/systems/XRLocomotionSystem.ts
-var UP = new THREE60__namespace.Vector3(0, 1, 0);
+var UP = new THREE67__namespace.Vector3(0, 1, 0);
 var AXIS_DEADZONE = 0.5;
 var _XRLocomotionSystem = class _XRLocomotionSystem {
   constructor(inputSystem) {
-    this.raycaster = new THREE60__namespace.Raycaster();
+    this.raycaster = new THREE67__namespace.Raycaster();
     /** Per-source latch so one stick push yields exactly one snap turn. */
     this.turnLatched = /* @__PURE__ */ new WeakSet();
     /** Reused arc buffer — aiming runs every frame. */
@@ -14494,7 +14809,7 @@ var _XRLocomotionSystem = class _XRLocomotionSystem {
       }
       if (this.turnLatched.has(source)) continue;
       this.turnLatched.add(source);
-      transform.rotation.y -= Math.sign(x) * THREE60__namespace.MathUtils.degToRad(rig.snapTurnDegrees);
+      transform.rotation.y -= Math.sign(x) * THREE67__namespace.MathUtils.degToRad(rig.snapTurnDegrees);
     }
   }
   applySmoothMove(world, rig, transform, inputs, deltaTime) {
@@ -14504,12 +14819,12 @@ var _XRLocomotionSystem = class _XRLocomotionSystem {
       const y = input.axes[1] ?? 0;
       if (Math.abs(x) < 0.15 && Math.abs(y) < 0.15) continue;
       const camera = world.getCamera();
-      const forward = new THREE60__namespace.Vector3();
+      const forward = new THREE67__namespace.Vector3();
       camera.getWorldDirection(forward);
       forward.y = 0;
       if (forward.lengthSq() < 1e-6) continue;
       forward.normalize();
-      const right = new THREE60__namespace.Vector3().crossVectors(forward, UP).normalize();
+      const right = new THREE67__namespace.Vector3().crossVectors(forward, UP).normalize();
       const step = rig.moveSpeed * Math.max(0, deltaTime);
       transform.position.x += (forward.x * -y + right.x * x) * step;
       transform.position.z += (forward.z * -y + right.z * x) * step;
@@ -14590,7 +14905,7 @@ var _XRLocomotionSystem = class _XRLocomotionSystem {
     for (let i = 1; i < points.length; i += 1) {
       const from = points[i - 1];
       const to = points[i];
-      const delta = new THREE60__namespace.Vector3().subVectors(to, from);
+      const delta = new THREE67__namespace.Vector3().subVectors(to, from);
       const distance = delta.length();
       if (distance < 1e-6) continue;
       this.raycaster.set(from, delta.divideScalar(distance));
@@ -14863,12 +15178,12 @@ function planeColliderFromPolygon(polygon) {
 }
 __name(planeColliderFromPolygon, "planeColliderFromPolygon");
 function writeXrMeshGeometry(vertices, indices, existing) {
-  const geometry = existing ?? new THREE60__namespace.BufferGeometry();
+  const geometry = existing ?? new THREE67__namespace.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE60__namespace.BufferAttribute(vertices.slice(), 3)
+    new THREE67__namespace.BufferAttribute(vertices.slice(), 3)
   );
-  geometry.setIndex(new THREE60__namespace.BufferAttribute(indices.slice(), 1));
+  geometry.setIndex(new THREE67__namespace.BufferAttribute(indices.slice(), 1));
   geometry.deleteAttribute("normal");
   geometry.computeBoundingSphere();
   geometry.computeVertexNormals();
@@ -14876,14 +15191,14 @@ function writeXrMeshGeometry(vertices, indices, existing) {
 }
 __name(writeXrMeshGeometry, "writeXrMeshGeometry");
 function decomposeXrPose(matrixElements, target) {
-  const matrix = new THREE60__namespace.Matrix4().fromArray(
+  const matrix = new THREE67__namespace.Matrix4().fromArray(
     matrixElements
   );
-  const position = new THREE60__namespace.Vector3();
-  const quaternion = new THREE60__namespace.Quaternion();
-  const scale = new THREE60__namespace.Vector3();
+  const position = new THREE67__namespace.Vector3();
+  const quaternion = new THREE67__namespace.Quaternion();
+  const scale = new THREE67__namespace.Vector3();
   matrix.decompose(position, quaternion, scale);
-  const euler = new THREE60__namespace.Euler().setFromQuaternion(quaternion, "XYZ");
+  const euler = new THREE67__namespace.Euler().setFromQuaternion(quaternion, "XYZ");
   target.position.x = position.x;
   target.position.y = position.y;
   target.position.z = position.z;
@@ -15045,8 +15360,8 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
     this.viewerPos = null;
     /** The ONE global room mesh currently allowed to spawn. */
     this.electedGlobalMesh = null;
-    this.tmpViewerMatrix = new THREE60__namespace.Matrix4();
-    this.tmpViewPos = new THREE60__namespace.Vector3();
+    this.tmpViewerMatrix = new THREE67__namespace.Matrix4();
+    this.tmpViewPos = new THREE67__namespace.Vector3();
   }
   update(world, deltaTime = 0) {
     const presenting = world.isXrPresenting();
@@ -15405,7 +15720,7 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
     const geometry = writeXrMeshGeometry(mesh.vertices, mesh.indices);
     const label = mesh.semanticLabel ?? null;
     const isGlobalMesh = label === "global mesh";
-    const material = new THREE60__namespace.MeshBasicMaterial({
+    const material = new THREE67__namespace.MeshBasicMaterial({
       color: debugColorFor("mesh", label),
       wireframe: true,
       // The global scan is a coarse triangle soup of the whole room; at full
@@ -15426,8 +15741,8 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
       depthTest: true,
       depthWrite: false
     });
-    const root = new THREE60__namespace.Group();
-    const child = new THREE60__namespace.Mesh(geometry, material);
+    const root = new THREE67__namespace.Group();
+    const child = new THREE67__namespace.Mesh(geometry, material);
     child.visible = this.debugVisible;
     child.renderOrder = DEBUG_RENDER_ORDER;
     root.add(child);
@@ -15453,21 +15768,21 @@ var _XREnvironmentSystem = class _XREnvironmentSystem {
   }
   /** A thin box so a detected plane can be SEEN, not just collided with. */
   attachPlaneDebug(world, entry, collider, semanticLabel) {
-    const box = new THREE60__namespace.BoxGeometry(
+    const box = new THREE67__namespace.BoxGeometry(
       collider.size.x,
       collider.size.y,
       collider.size.z
     );
-    const geometry = new THREE60__namespace.EdgesGeometry(box);
+    const geometry = new THREE67__namespace.EdgesGeometry(box);
     box.dispose();
-    const material = new THREE60__namespace.LineBasicMaterial({
+    const material = new THREE67__namespace.LineBasicMaterial({
       color: debugColorFor("plane", semanticLabel),
       // Same depth policy as the mesh overlay — see createMeshEntity.
       depthTest: true,
       depthWrite: false
     });
-    const root = new THREE60__namespace.Group();
-    const child = new THREE60__namespace.LineSegments(geometry, material);
+    const root = new THREE67__namespace.Group();
+    const child = new THREE67__namespace.LineSegments(geometry, material);
     child.renderOrder = DEBUG_RENDER_ORDER;
     child.position.set(collider.offset.x, collider.offset.y, collider.offset.z);
     child.visible = this.debugVisible;
@@ -15543,6 +15858,14 @@ function normalizeOrientation(value) {
   return value === "horizontal" || value === "vertical" ? value : null;
 }
 __name(normalizeOrientation, "normalizeOrientation");
+var isDisplayOnlySlider = /* @__PURE__ */ __name((slider) => slider.readOnly === true || slider.variant !== void 0 && slider.variant !== "slider", "isDisplayOnlySlider");
+function snapToStep(value, slider) {
+  const { step, min, max } = slider;
+  if (!step || step <= 0) return value;
+  const snapped = min + Math.round((value - min) / step) * step;
+  return Math.min(max, Math.max(min, snapped));
+}
+__name(snapToStep, "snapToStep");
 var MOUSE_CLICK_TRAVEL_PX = 6;
 var PRESS_TINT_MIN_SECONDS = 0.1;
 var PRESS_TINT = 0.72;
@@ -15556,11 +15879,12 @@ var _UIInteractionSystem = class _UIInteractionSystem {
   constructor(interaction, options) {
     this.xrPresses = /* @__PURE__ */ new Map();
     this.mousePress = null;
-    this.mouseHover = null;
+    /** What each pointer is on. Two hands can rest on one widget. */
+    this.hovers = /* @__PURE__ */ new Map();
     /** entityId → seconds of pressed-tint left to display. */
     this.tintFloors = /* @__PURE__ */ new Map();
     this.tinted = /* @__PURE__ */ new Set();
-    this.raycaster = new THREE60__namespace.Raycaster();
+    this.raycaster = new THREE67__namespace.Raycaster();
     this.interaction = interaction;
     this.inputSystem = options?.inputSystem ?? null;
     interaction?.registerBusyContributor(
@@ -15570,8 +15894,10 @@ var _UIInteractionSystem = class _UIInteractionSystem {
   update(world, deltaTime = 0) {
     if (world.isEditorMode()) return;
     if (world.isXrPresenting()) {
+      this.setHover(world, "mouse", null, null);
       this.updateXr(world);
     } else {
+      this.dropGoneXrHovers(world, []);
       this.updateMouse(world);
     }
     this.updateTints(world, deltaTime);
@@ -15585,6 +15911,7 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     for (const input of inputs) {
       const hover = interaction.getHoverForInput(input);
       const hovered = hover ? this.widgetKind(world, hover.entityId) : null;
+      this.setHover(world, input, hover && hovered ? hover.entityId : null, input);
       if (input.selectStart && hover && hovered) {
         this.xrPresses.set(input, {
           entityId: hover.entityId,
@@ -15613,6 +15940,15 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     for (const [input] of this.xrPresses) {
       if (!inputs.includes(input)) this.xrPresses.delete(input);
     }
+    this.dropGoneXrHovers(world, inputs);
+  }
+  /** A transient source leaves with no select edge to clear its hover. */
+  dropGoneXrHovers(world, inputs) {
+    for (const source of [...this.hovers.keys()]) {
+      if (source !== "mouse" && !inputs.includes(source)) {
+        this.setHover(world, source, null, source);
+      }
+    }
   }
   // ── Mouse path (flat preview) ──────────────────────────────────────────────
   updateMouse(world) {
@@ -15620,22 +15956,7 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     if (!input) return;
     const hit = this.raycastMouse(world);
     const hovered = hit && this.widgetKind(world, hit) ? hit : null;
-    if (hovered !== this.mouseHover) {
-      if (this.mouseHover !== null) {
-        this.setTint(world, this.mouseHover, 1);
-        this.dispatchBubbling(
-          world,
-          this.mouseHover,
-          "onUiHoverEnd",
-          (b, e) => b.onUiHoverEnd(e)
-        );
-      }
-      if (hovered !== null) {
-        this.setTint(world, hovered, HOVER_TINT);
-        this.dispatchBubbling(world, hovered, "onUiHoverStart", (b, e) => b.onUiHoverStart(e));
-      }
-      this.mouseHover = hovered;
-    }
+    this.setHover(world, "mouse", hovered, null);
     if (input.getMouseDown("left") && hovered) {
       const kind = this.widgetKind(world, hovered);
       if (kind) {
@@ -15643,12 +15964,12 @@ var _UIInteractionSystem = class _UIInteractionSystem {
         this.beginPressTint(world, hovered);
       }
     }
-    if (this.mousePress) {
+    if (this.mousePress && !input.getMouseDown("left")) {
       const delta = input.getMouseDelta();
       this.mousePress.travelPx += Math.hypot(delta.x, delta.y);
-      if (this.mousePress.kind === "slider") {
-        this.dragSliderMouse(world, this.mousePress.entityId);
-      }
+    }
+    if (this.mousePress?.kind === "slider") {
+      this.dragSliderMouse(world, this.mousePress.entityId);
     }
     if (input.getMouseUp("left") && this.mousePress) {
       const press = this.mousePress;
@@ -15677,15 +15998,24 @@ var _UIInteractionSystem = class _UIInteractionSystem {
       ndcY = -((pos.y - rect.top) / Math.max(1, rect.height) * 2 - 1);
       if (ndcX < -1 || ndcX > 1 || ndcY < -1 || ndcY > 1) return null;
     }
-    this.raycaster.setFromCamera(new THREE60__namespace.Vector2(ndcX, ndcY), world.getCamera());
+    this.raycaster.setFromCamera(new THREE67__namespace.Vector2(ndcX, ndcY), world.getCamera());
     const hits = world.raycast(
       this.raycaster.ray.origin,
       this.raycaster.ray.direction
     );
+    let surfaceTree = null;
     for (const hit of hits) {
-      if (typeof hit.entityId !== "number") continue;
-      if (this.widgetKind(world, hit.entityId)) return hit.entityId;
-      return null;
+      const entityId = hit.entityId;
+      if (typeof entityId !== "number") continue;
+      if (!isShownInScene(world, entityId)) continue;
+      if (this.widgetKind(world, entityId)) {
+        const sameSurface = surfaceTree === null || widgetTreeRoot(world, entityId) === surfaceTree;
+        return sameSurface ? entityId : null;
+      }
+      if (!isUiWidget(world, entityId)) return null;
+      const tree = widgetTreeRoot(world, entityId);
+      if (surfaceTree !== null && tree !== surfaceTree) return null;
+      surfaceTree = tree;
     }
     return null;
   }
@@ -15693,7 +16023,8 @@ var _UIInteractionSystem = class _UIInteractionSystem {
   widgetKind(world, entityId) {
     if (world.getComponent(entityId, UIButtonComponent)) return "button";
     if (world.getComponent(entityId, UIToggleComponent)) return "toggle";
-    if (world.getComponent(entityId, UISliderComponent)) return "slider";
+    const slider = world.getComponent(entityId, UISliderComponent);
+    if (slider && !isDisplayOnlySlider(slider)) return "slider";
     return null;
   }
   fire(world, press, input) {
@@ -15744,7 +16075,10 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     const inset = slider.height / 2;
     const usable = Math.max(1e-3, slider.width - inset * 2);
     const t = Math.min(1, Math.max(0, local.x / usable + 0.5));
-    const next = slider.min + t * (slider.max - slider.min);
+    const next = snapToStep(
+      slider.min + t * (slider.max - slider.min),
+      slider
+    );
     if (Math.abs(next - slider.value) < 1e-4) return;
     slider.value = next;
     this.dispatchBubbling(
@@ -15822,6 +16156,43 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     const name = world.getComponent(entityId, Name)?.value;
     return typeof name === "string" ? name : String(entityId);
   }
+  // ── Hover ──────────────────────────────────────────────────────────────────
+  setHover(world, source, next, input) {
+    const previous = this.hovers.get(source) ?? null;
+    if (previous === next) return;
+    if (next === null) this.hovers.delete(source);
+    else this.hovers.set(source, next);
+    if (previous !== null && !this.isHovered(previous)) {
+      if (!this.tintFloors.has(previous)) this.setTint(world, previous, 1);
+      this.dispatchBubbling(
+        world,
+        previous,
+        "onUiHoverEnd",
+        (b, e) => b.onUiHoverEnd(e),
+        input
+      );
+    }
+    if (next !== null && this.hoverCount(next) === 1) {
+      if (!this.tintFloors.has(next)) this.setTint(world, next, HOVER_TINT);
+      this.dispatchBubbling(
+        world,
+        next,
+        "onUiHoverStart",
+        (b, e) => b.onUiHoverStart(e),
+        input
+      );
+    }
+  }
+  hoverCount(entityId) {
+    let count = 0;
+    for (const hovered of this.hovers.values()) {
+      if (hovered === entityId) count += 1;
+    }
+    return count;
+  }
+  isHovered(entityId) {
+    return this.hoverCount(entityId) > 0;
+  }
   // ── Pressed/hover tint ─────────────────────────────────────────────────────
   beginPressTint(world, entityId) {
     this.setTint(world, entityId, PRESS_TINT);
@@ -15839,11 +16210,7 @@ var _UIInteractionSystem = class _UIInteractionSystem {
       if (stillHeld) continue;
       if (next <= 0) {
         this.tintFloors.delete(entityId);
-        this.setTint(
-          world,
-          entityId,
-          this.mouseHover === entityId ? HOVER_TINT : 1
-        );
+        this.setTint(world, entityId, this.isHovered(entityId) ? HOVER_TINT : 1);
       } else {
         this.tintFloors.set(entityId, next);
       }
@@ -15854,14 +16221,101 @@ var _UIInteractionSystem = class _UIInteractionSystem {
     if (!object) return;
     if (scalar === 1) this.tinted.delete(entityId);
     else this.tinted.add(entityId);
-    object.traverse((child) => {
-      const material = child.material;
-      if (material?.color) material.color.setScalar(scalar);
-    });
+    for (const child of object.children) {
+      const tag = child.userData[UI_PART_KEY];
+      if (!tag) continue;
+      tag.tint = scalar;
+      applyPartColor(child, tag);
+    }
   }
 };
 __name(_UIInteractionSystem, "UIInteractionSystem");
 var UIInteractionSystem = _UIInteractionSystem;
+var fonts = /* @__PURE__ */ new Map();
+var images = /* @__PURE__ */ new Map();
+function hash(text) {
+  let value = 5381;
+  for (let i = 0; i < text.length; i += 1) {
+    value = (value * 33 ^ text.charCodeAt(i)) >>> 0;
+  }
+  return value.toString(36);
+}
+__name(hash, "hash");
+function tracked(url, work) {
+  const manager = THREE67__namespace.DefaultLoadingManager;
+  manager.itemStart(url);
+  return work.catch((error) => {
+    manager.itemError(url);
+    throw error;
+  }).finally(() => manager.itemEnd(url));
+}
+__name(tracked, "tracked");
+function uiFontFamily(src) {
+  if (typeof FontFace === "undefined" || typeof document === "undefined") {
+    return null;
+  }
+  const known = fonts.get(src);
+  if (known) return known.value;
+  const entry = { value: null, settled: false };
+  fonts.set(src, entry);
+  const url = resolvePrefabAssetUrl(src);
+  const family = `relu-ui-${hash(url)}`;
+  tracked(
+    url,
+    (async () => {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const buffer = await response.arrayBuffer();
+      const face = new FontFace(family, buffer, { weight: "100 900" });
+      await face.load();
+      document.fonts.add(face);
+    })()
+  ).then(() => {
+    entry.value = family;
+  }).catch((error) => {
+    console.warn(`[spatial-ecs] Couldn't load UI font ${src}.`, error);
+  }).finally(() => {
+    entry.settled = true;
+  });
+  return null;
+}
+__name(uiFontFamily, "uiFontFamily");
+function uiImage(src) {
+  if (typeof Image === "undefined" || typeof fetch === "undefined") {
+    return null;
+  }
+  const known = images.get(src);
+  if (known) return known.value;
+  const entry = { value: null, settled: false };
+  images.set(src, entry);
+  const url = resolvePrefabAssetUrl(src);
+  tracked(
+    url,
+    (async () => {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const blob = await response.blob();
+      const typed = /\.svg(\?|#|$)/i.test(url) ? new Blob([blob], { type: "image/svg+xml" }) : blob;
+      const image = new Image();
+      const objectUrl = URL.createObjectURL(typed);
+      try {
+        image.src = objectUrl;
+        await image.decode();
+        return image;
+      } finally {
+        URL.revokeObjectURL(objectUrl);
+      }
+    })()
+  ).then((image) => {
+    entry.value = image;
+  }).catch((error) => {
+    console.warn(`[spatial-ecs] Couldn't load UI image ${src}.`, error);
+  }).finally(() => {
+    entry.settled = true;
+  });
+  return null;
+}
+__name(uiImage, "uiImage");
 
 // core/ui/uiCanvas.ts
 var DEFAULT_PIXELS_PER_METER = 1024;
@@ -15934,18 +16388,21 @@ function clampLines(measure, lines, maxLines, maxWidthPx) {
 }
 __name(clampLines, "clampLines");
 var UI_FONT_STACK = '-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-function tracePath(ctx, x, y, w, h, r) {
-  const radius = Math.max(0, Math.min(r, w / 2, h / 2));
+var NO_ASSETS = { image: /* @__PURE__ */ __name(() => null, "image") };
+function tracePath(ctx, x, y, w, h, radii) {
+  const limit = Math.min(w / 2, h / 2);
+  const fit = /* @__PURE__ */ __name((r) => Math.max(0, Math.min(r, limit)), "fit");
+  const [tl, tr, br, bl] = (Array.isArray(radii) ? radii : [radii, radii, radii, radii]).map(fit);
   ctx.beginPath();
   if (typeof ctx.roundRect === "function") {
-    ctx.roundRect(x, y, w, h, radius);
+    ctx.roundRect(x, y, w, h, [tl, tr, br, bl]);
     return;
   }
-  ctx.moveTo(x + radius, y);
-  ctx.arcTo(x + w, y, x + w, y + h, radius);
-  ctx.arcTo(x + w, y + h, x, y + h, radius);
-  ctx.arcTo(x, y + h, x, y, radius);
-  ctx.arcTo(x, y, x + w, y, radius);
+  ctx.moveTo(x + tl, y);
+  ctx.arcTo(x + w, y, x + w, y + h, tr);
+  ctx.arcTo(x + w, y + h, x, y + h, br);
+  ctx.arcTo(x, y + h, x, y, bl);
+  ctx.arcTo(x, y, x + w, y, tl);
   ctx.closePath();
 }
 __name(tracePath, "tracePath");
@@ -15965,108 +16422,244 @@ function withOpacity(ctx, color, opacity) {
   return parsed;
 }
 __name(withOpacity, "withOpacity");
-function drawChrome(ctx, pxWidth, pxHeight, density, style) {
-  ctx.clearRect(0, 0, pxWidth, pxHeight);
-  const border = Math.max(0, style.borderWidthMeters * density);
-  const radius = style.cornerRadiusMeters * density;
-  tracePath(ctx, 0, 0, pxWidth, pxHeight, radius);
-  ctx.fillStyle = withOpacity(
-    ctx,
-    style.backgroundColor,
-    Math.max(0, Math.min(1, style.backgroundOpacity))
-  );
+function fillStyleFor(ctx, paint, box, opacity) {
+  if (paint.kind === "solid") return withOpacity(ctx, paint.color, opacity);
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  let gradient;
+  if (paint.kind === "linear") {
+    const radians = paint.angle * Math.PI / 180;
+    const dx = Math.sin(radians);
+    const dy = -Math.cos(radians);
+    const half = (Math.abs(box.w * dx) + Math.abs(box.h * dy)) / 2;
+    gradient = ctx.createLinearGradient(
+      cx - dx * half,
+      cy - dy * half,
+      cx + dx * half,
+      cy + dy * half
+    );
+  } else {
+    gradient = ctx.createRadialGradient(
+      cx,
+      cy,
+      0,
+      cx,
+      cy,
+      Math.max(box.w, box.h) / 2
+    );
+  }
+  for (const stop of paint.stops) {
+    gradient.addColorStop(stop.at, withOpacity(ctx, stop.color, opacity));
+  }
+  return gradient;
+}
+__name(fillStyleFor, "fillStyleFor");
+function drawImagePaint(ctx, paint, box, assets) {
+  const image = assets.image(paint.src);
+  if (!image) return;
+  const sourceW = image.naturalWidth || box.w;
+  const sourceH = image.naturalHeight || box.h;
+  const scale = paint.fit === "fill" ? 1 : paint.fit === "cover" ? Math.max(box.w / sourceW, box.h / sourceH) : Math.min(box.w / sourceW, box.h / sourceH);
+  const w = paint.fit === "fill" ? box.w : sourceW * scale;
+  const h = paint.fit === "fill" ? box.h : sourceH * scale;
+  const x = box.x + (box.w - w) / 2;
+  const y = box.y + (box.h - h) / 2;
+  if (!paint.tint) {
+    ctx.drawImage(image, x, y, w, h);
+    return;
+  }
+  const scratch = assets.scratch?.(Math.ceil(w), Math.ceil(h));
+  if (!scratch) {
+    ctx.drawImage(image, x, y, w, h);
+    return;
+  }
+  scratch.drawImage(image, 0, 0, w, h);
+  scratch.globalCompositeOperation = "source-in";
+  scratch.fillStyle = paint.tint;
+  scratch.fillRect(0, 0, w, h);
+  ctx.drawImage(scratch.canvas, x, y, w, h);
+}
+__name(drawImagePaint, "drawImagePaint");
+function pxRadii(radius, density) {
+  return radius.map((r) => r * density);
+}
+__name(pxRadii, "pxRadii");
+function drawBoxShadow(ctx, box, radii, shadow, density) {
+  ctx.save();
+  ctx.shadowColor = shadow.color;
+  ctx.shadowBlur = shadow.blur * density;
+  ctx.shadowOffsetX = shadow.x * density;
+  ctx.shadowOffsetY = -shadow.y * density;
+  ctx.fillStyle = "#000000";
+  tracePath(ctx, box.x, box.y, box.w, box.h, radii);
+  ctx.fill();
+  ctx.restore();
+  ctx.save();
+  ctx.globalCompositeOperation = "destination-out";
+  ctx.fillStyle = "#000000";
+  tracePath(ctx, box.x, box.y, box.w, box.h, radii);
   ctx.fill();
-  if (border > 0) {
+  ctx.restore();
+}
+__name(drawBoxShadow, "drawBoxShadow");
+function drawChrome(ctx, box, density, chrome, assets = NO_ASSETS) {
+  const radii = pxRadii(chrome.radius, density);
+  for (const shadow of chrome.shadows) {
+    drawBoxShadow(ctx, box, radii, shadow, density);
+  }
+  const opacity = Math.max(0, Math.min(1, chrome.fillOpacity));
+  if (chrome.fill?.kind === "image") {
+    ctx.save();
+    tracePath(ctx, box.x, box.y, box.w, box.h, radii);
+    ctx.clip();
+    ctx.globalAlpha = opacity;
+    drawImagePaint(ctx, chrome.fill, box, assets);
+    ctx.restore();
+  } else if (chrome.fill) {
+    tracePath(ctx, box.x, box.y, box.w, box.h, radii);
+    ctx.fillStyle = fillStyleFor(ctx, chrome.fill, box, opacity);
+    ctx.fill();
+  }
+  if (chrome.edge) {
+    const width = chrome.edge.width * density;
+    ctx.save();
+    tracePath(ctx, box.x, box.y, box.w, box.h, radii);
+    ctx.clip();
+    const fade = ctx.createLinearGradient(0, box.y, 0, box.y + box.h / 2);
+    fade.addColorStop(0, chrome.edge.color);
+    fade.addColorStop(1, withOpacity(ctx, chrome.edge.color, 0));
+    ctx.strokeStyle = fade;
+    ctx.lineWidth = width * 2;
+    tracePath(ctx, box.x, box.y, box.w, box.h, radii);
+    ctx.stroke();
+    ctx.restore();
+  }
+  if (chrome.border) {
+    const border = chrome.border.width * density;
     tracePath(
       ctx,
-      border / 2,
-      border / 2,
-      pxWidth - border,
-      pxHeight - border,
-      Math.max(0, radius - border / 2)
+      box.x + border / 2,
+      box.y + border / 2,
+      box.w - border,
+      box.h - border,
+      radii.map((r) => Math.max(0, r - border / 2))
     );
-    ctx.strokeStyle = style.borderColor;
+    ctx.strokeStyle = chrome.border.color;
     ctx.lineWidth = border;
     ctx.stroke();
   }
 }
 __name(drawChrome, "drawChrome");
-function drawTextBlock(ctx, pxWidth, pxHeight, density, text, style) {
-  const fontPx = Math.max(4, style.fontSizeMeters * density);
-  const paddingPx = style.paddingMeters * density;
-  const contentW = Math.max(1, pxWidth - paddingPx * 2);
-  const contentH = Math.max(1, pxHeight - paddingPx * 2);
+var applyTransform2 = /* @__PURE__ */ __name((text, transform) => transform === "upper" ? text.toUpperCase() : transform === "lower" ? text.toLowerCase() : text, "applyTransform");
+function fillTracked(ctx, line, x, y, trackingPx, width) {
+  let cursor = ctx.textAlign === "center" ? x - width / 2 : ctx.textAlign === "right" ? x - width : x;
+  const align = ctx.textAlign;
+  ctx.textAlign = "left";
+  for (const glyph of line) {
+    ctx.fillText(glyph, cursor, y);
+    cursor += ctx.measureText(glyph).width + trackingPx;
+  }
+  ctx.textAlign = align;
+}
+__name(fillTracked, "fillTracked");
+function drawTextBlock(ctx, box, density, text, style, family = null, assets = NO_ASSETS) {
+  const fontPx = Math.max(4, style.fontSize * density);
+  const paddingPx = style.padding * density;
+  const contentW = Math.max(1, box.w - paddingPx * 2);
+  const contentH = Math.max(1, box.h - paddingPx * 2);
   const lineHeightPx = fontPx * style.lineHeight;
-  ctx.font = `${style.fontWeight} ${fontPx}px ${UI_FONT_STACK}`;
-  const measure = /* @__PURE__ */ __name((s) => ctx.measureText(s).width, "measure");
-  const maxLines = Math.max(1, Math.floor(contentH / lineHeightPx));
+  const trackingPx = style.tracking * density;
+  const stack = family ? `"${family}", ${UI_FONT_STACK}` : UI_FONT_STACK;
+  ctx.font = `${style.fontWeight} ${fontPx}px ${stack}`;
+  const nativeTracking = trackingPx !== 0 && "letterSpacing" in ctx;
+  if (nativeTracking) {
+    ctx.letterSpacing = `${trackingPx}px`;
+  }
+  const manualTracking = trackingPx !== 0 && !nativeTracking;
+  const measure = /* @__PURE__ */ __name((s) => ctx.measureText(s).width + (manualTracking ? trackingPx * s.length : 0), "measure");
+  const fits = Math.max(1, Math.floor(contentH / lineHeightPx));
+  const maxLines = style.maxLines ? Math.min(fits, style.maxLines) : fits;
   const lines = clampLines(
     measure,
-    wrapText(measure, text, contentW),
+    wrapText(measure, applyTransform2(text, style.transform), contentW),
     maxLines,
     contentW
   );
   const blockH = lines.length * lineHeightPx;
-  const top = style.valign === "top" ? paddingPx : style.valign === "bottom" ? pxHeight - paddingPx - blockH : (pxHeight - blockH) / 2;
-  const anchorX = style.align === "left" ? paddingPx : style.align === "right" ? pxWidth - paddingPx : pxWidth / 2;
+  const top = style.valign === "top" ? box.y + paddingPx : style.valign === "bottom" ? box.y + box.h - paddingPx - blockH : box.y + (box.h - blockH) / 2;
+  const anchorX = style.align === "left" ? box.x + paddingPx : style.align === "right" ? box.x + box.w - paddingPx : box.x + box.w / 2;
   ctx.save();
-  tracePath(ctx, 0, 0, pxWidth, pxHeight, 0);
-  ctx.clip();
-  ctx.fillStyle = style.color;
+  if (style.paint.kind === "image") {
+    ctx.fillStyle = "#ffffff";
+  } else {
+    ctx.fillStyle = fillStyleFor(ctx, style.paint, box, 1);
+  }
+  if (style.shadow) {
+    ctx.shadowColor = style.shadow.color;
+    ctx.shadowBlur = style.shadow.blur * density;
+    ctx.shadowOffsetX = style.shadow.x * density;
+    ctx.shadowOffsetY = -style.shadow.y * density;
+  }
   ctx.textAlign = style.align;
   ctx.textBaseline = "middle";
   for (let i = 0; i < lines.length; i += 1) {
-    ctx.fillText(lines[i], anchorX, top + (i + 0.5) * lineHeightPx);
+    const y = top + (i + 0.5) * lineHeightPx;
+    if (manualTracking) {
+      fillTracked(ctx, lines[i], anchorX, y, trackingPx, measure(lines[i]));
+    } else {
+      ctx.fillText(lines[i], anchorX, y);
+    }
   }
   ctx.restore();
+  if (style.paint.kind === "image") {
+    ctx.save();
+    ctx.globalCompositeOperation = "source-atop";
+    drawImagePaint(ctx, style.paint, box, assets);
+    ctx.restore();
+  }
+  if (nativeTracking) {
+    ctx.letterSpacing = "0px";
+  }
 }
 __name(drawTextBlock, "drawTextBlock");
-function panelSignature(widthM, heightM, size, style) {
+function panelSignature(widthM, heightM, size, chrome, loaded = null) {
   return JSON.stringify([
     widthM,
     heightM,
     size.pxWidth,
     size.pxHeight,
-    style.backgroundColor,
-    style.backgroundOpacity,
-    style.cornerRadiusMeters,
-    style.borderWidthMeters,
-    style.borderColor
+    chrome,
+    loaded
   ]);
 }
 __name(panelSignature, "panelSignature");
-function textSignature(widthM, heightM, size, text, style) {
+function textSignature(widthM, heightM, size, text, style, family = null) {
   return JSON.stringify([
     widthM,
     heightM,
     size.pxWidth,
     size.pxHeight,
     text,
-    style.fontSizeMeters,
-    style.fontWeight,
-    style.color,
-    style.align,
-    style.valign,
-    style.lineHeight,
-    style.paddingMeters
+    style,
+    family
   ]);
 }
 __name(textSignature, "textSignature");
-function buttonSignature(widthM, heightM, size, panel, label, text) {
+function buttonSignature(widthM, heightM, size, chrome, label, text, family = null, loaded = null) {
   return JSON.stringify([
-    panelSignature(widthM, heightM, size, panel),
+    panelSignature(widthM, heightM, size, chrome, loaded),
     label,
-    text.fontSizeMeters,
-    text.fontWeight,
-    text.color
+    text,
+    family
   ]);
 }
 __name(buttonSignature, "buttonSignature");
-function trackSignature(widthM, heightM, size, panel, accentColor, knobColor) {
+function trackSignature(widthM, heightM, size, chrome, accentColor, knobColor, variant = null) {
   return JSON.stringify([
-    panelSignature(widthM, heightM, size, panel),
+    panelSignature(widthM, heightM, size, chrome),
     accentColor,
-    knobColor
+    knobColor,
+    variant
   ]);
 }
 __name(trackSignature, "trackSignature");
@@ -16076,17 +16669,226 @@ function drawRoundedBar(ctx, pxX, pxY, pxW, pxH, color) {
   ctx.fill();
 }
 __name(drawRoundedBar, "drawRoundedBar");
+function drawCheckMark(ctx, box, color) {
+  ctx.beginPath();
+  ctx.moveTo(box.x + box.w * 0.24, box.y + box.h * 0.54);
+  ctx.lineTo(box.x + box.w * 0.43, box.y + box.h * 0.72);
+  ctx.lineTo(box.x + box.w * 0.77, box.y + box.h * 0.3);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = box.h * 0.13;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.stroke();
+}
+__name(drawCheckMark, "drawCheckMark");
+function drawDot(ctx, cx, cy, radius, color) {
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+__name(drawDot, "drawDot");
+function drawRing(ctx, box, t, trackColor, accentColor) {
+  const thickness = Math.min(box.w, box.h) * 0.14;
+  const radius = Math.min(box.w, box.h) / 2 - thickness / 2;
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  ctx.lineWidth = thickness;
+  ctx.lineCap = "round";
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+  ctx.strokeStyle = trackColor;
+  ctx.stroke();
+  if (t <= 0) return;
+  const start = -Math.PI / 2;
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, start, start + t * Math.PI * 2);
+  ctx.strokeStyle = accentColor;
+  ctx.stroke();
+}
+__name(drawRing, "drawRing");
+function drawIconLabel(ctx, box, density, label, style, family, icon, position, assets) {
+  const fontPx = style.fontSize * density;
+  const iconPx = fontPx * 1.3;
+  const gapPx = label ? fontPx * 0.5 : 0;
+  const stack = family ? `"${family}", ${UI_FONT_STACK}` : UI_FONT_STACK;
+  ctx.font = `${style.fontWeight} ${fontPx}px ${stack}`;
+  const labelPx = label ? ctx.measureText(label).width : 0;
+  const groupPx = iconPx + gapPx + labelPx;
+  const startX = box.x + (box.w - groupPx) / 2;
+  const iconX = position === "left" ? startX : startX + labelPx + gapPx;
+  const labelX = position === "left" ? startX + iconPx + gapPx : startX;
+  drawImagePaint(
+    ctx,
+    { src: icon, fit: "contain", tint: style.color },
+    { x: iconX, y: box.y + (box.h - iconPx) / 2, w: iconPx, h: iconPx },
+    assets
+  );
+  if (label) {
+    drawTextBlock(
+      ctx,
+      { x: labelX, y: box.y, w: labelPx + 2, h: box.h },
+      density,
+      label,
+      { ...style, align: "left", padding: 0 },
+      family,
+      assets
+    );
+  }
+}
+__name(drawIconLabel, "drawIconLabel");
+
+// core/ui/uiPaintOrder.ts
+var BASE_RENDER_ORDER = 10;
+var MAX_RENDER_ORDER = 890;
+var MAX_TREE_RANK = MAX_RENDER_ORDER - BASE_RENDER_ORDER - 1;
+var SLOT_STEP = 1e-4;
+var SLOTS_PER_WIDGET = 3;
+var MAX_WIDGET_INDEX = Math.floor(1 / SLOT_STEP / SLOTS_PER_WIDGET) - 1;
+var PLANE_EPSILON_METERS = 1e-3;
+var PARALLEL_DOT = 1 - 1e-4;
+var dot = /* @__PURE__ */ __name((a, b) => a.x * b.x + a.y * b.y + a.z * b.z, "dot");
+var length = /* @__PURE__ */ __name((a) => Math.sqrt(dot(a, a)), "length");
+var subtract = /* @__PURE__ */ __name((a, b) => ({
+  x: a.x - b.x,
+  y: a.y - b.y,
+  z: a.z - b.z
+}), "subtract");
+function unit(a) {
+  const len = length(a);
+  if (len < 1e-9) return { x: 0, y: 0, z: 0 };
+  return { x: a.x / len, y: a.y / len, z: a.z / len };
+}
+__name(unit, "unit");
+function normalOf(rect) {
+  const { halfX: a, halfY: b } = rect;
+  return unit({
+    x: a.y * b.z - a.z * b.y,
+    y: a.z * b.x - a.x * b.z,
+    z: a.x * b.y - a.y * b.x
+  });
+}
+__name(normalOf, "normalOf");
+var planeDistance = /* @__PURE__ */ __name((rect, normal, eye) => Math.abs(dot(subtract(eye, rect.center), normal)), "planeDistance");
+function closestPointDistance(rect, eye) {
+  const toEye = subtract(eye, rect.center);
+  const lenX = length(rect.halfX);
+  const lenY = length(rect.halfY);
+  const axisX = unit(rect.halfX);
+  const axisY = unit(rect.halfY);
+  const s = Math.max(-lenX, Math.min(lenX, dot(toEye, axisX)));
+  const t = Math.max(-lenY, Math.min(lenY, dot(toEye, axisY)));
+  return length({
+    x: toEye.x - axisX.x * s - axisY.x * t,
+    y: toEye.y - axisX.y * s - axisY.y * t,
+    z: toEye.z - axisX.z * s - axisY.z * t
+  });
+}
+__name(closestPointDistance, "closestPointDistance");
+var areaOf = /* @__PURE__ */ __name((rect) => length(rect.halfX) * length(rect.halfY), "areaOf");
+function comparePaintRects(a, b, eye) {
+  const normalA = normalOf(a);
+  const normalB = normalOf(b);
+  const parallel = Math.abs(dot(normalA, normalB)) >= PARALLEL_DOT;
+  const distanceA = parallel ? planeDistance(a, normalA, eye) : closestPointDistance(a, eye);
+  const distanceB = parallel ? planeDistance(b, normalB, eye) : closestPointDistance(b, eye);
+  if (Math.abs(distanceA - distanceB) > PLANE_EPSILON_METERS) {
+    return distanceB - distanceA;
+  }
+  const areaA = areaOf(a);
+  const areaB = areaOf(b);
+  if (areaA !== areaB) return areaB - areaA;
+  return a.id - b.id;
+}
+__name(comparePaintRects, "comparePaintRects");
+function buildPaintTrees(nodes) {
+  const known = new Set(nodes.map((node) => node.id));
+  const children = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const node of nodes) {
+    if (node.parent !== null && known.has(node.parent)) {
+      const siblings = children.get(node.parent);
+      if (siblings) siblings.push(node.id);
+      else children.set(node.parent, [node.id]);
+    } else {
+      roots.push(node.id);
+    }
+  }
+  const trees = [];
+  const visited = /* @__PURE__ */ new Set();
+  const walk = /* @__PURE__ */ __name((id, order) => {
+    if (visited.has(id)) return;
+    visited.add(id);
+    order.push(id);
+    const kids = children.get(id);
+    if (!kids) return;
+    for (const kid of [...kids].sort((a, b) => a - b)) walk(kid, order);
+  }, "walk");
+  for (const rootId of [...roots].sort((a, b) => a - b)) {
+    const order = [];
+    walk(rootId, order);
+    trees.push({ rootId, order });
+  }
+  return trees;
+}
+__name(buildPaintTrees, "buildPaintTrees");
+function paintSlots(treeRank, widgetIndex) {
+  const base = BASE_RENDER_ORDER + Math.min(treeRank, MAX_TREE_RANK);
+  const index = Math.min(widgetIndex, MAX_WIDGET_INDEX);
+  const slot = /* @__PURE__ */ __name((offset) => base + (index * SLOTS_PER_WIDGET + offset) * SLOT_STEP, "slot");
+  return { face: slot(0), parts: slot(1), descendants: slot(2) };
+}
+__name(paintSlots, "paintSlots");
+function assignPaintOrder(trees, rects, eye) {
+  const sorted = trees.filter((tree) => rects.has(tree.rootId)).sort(
+    (a, b) => comparePaintRects(
+      rects.get(a.rootId),
+      rects.get(b.rootId),
+      eye
+    )
+  );
+  const slots = /* @__PURE__ */ new Map();
+  sorted.forEach((tree, rank) => {
+    tree.order.forEach((id, index) => {
+      slots.set(id, paintSlots(rank, index));
+    });
+  });
+  return slots;
+}
+__name(assignPaintOrder, "assignPaintOrder");
 
 // core/systems/UIPanelSystem.ts
-var FACE_RENDER_ORDER = 10;
 var CHILD_Z = 2e-3;
+var DESCENDANT_WALK_INTERVAL = 30;
+var METER_STEPS = 200;
+var CLEAR_CHROME = {
+  backgroundColor: "#000000",
+  backgroundOpacity: 0,
+  cornerRadius: 0,
+  borderWidth: 0,
+  borderColor: "#000000"
+};
+var PAINT_STAMP_KEY = "__uiPaintStamp";
 var _UIPanelSystem = class _UIPanelSystem {
   constructor(options) {
     this.entries = /* @__PURE__ */ new Map();
+    this.framesUntilDescendantWalk = 0;
+    /** Whether any panel defines tokens, so plain scenes skip the parent walk. */
+    this.anyTokens = false;
+    this.drawAssets = {
+      image: /* @__PURE__ */ __name((src) => uiImage(src), "image"),
+      scratch: /* @__PURE__ */ __name((width, height) => {
+        const canvas = this.createCanvas();
+        canvas.width = width;
+        canvas.height = height;
+        return canvas.getContext("2d");
+      }, "scratch")
+    };
     this.createCanvas = options?.createCanvas ?? (() => document.createElement("canvas"));
   }
   update(world, deltaTime = 0) {
     const live = /* @__PURE__ */ new Set();
+    this.anyTokens = world.query(UIPanelComponent).some((id) => world.getComponent(id, UIPanelComponent)?.tokens);
     for (const entityId of world.query(UIPanelComponent, Object3DRef)) {
       const panel = world.getComponent(entityId, UIPanelComponent);
       if (!panel) continue;
@@ -16124,6 +16926,7 @@ var _UIPanelSystem = class _UIPanelSystem {
         this.entries.delete(entityId);
       }
     }
+    this.applyPaintOrder(world);
   }
   /** All GPU/canvas resources; call on world teardown. */
   dispose() {
@@ -16132,84 +16935,188 @@ var _UIPanelSystem = class _UIPanelSystem {
   }
   // ── Widgets ────────────────────────────────────────────────────────────────
   syncPanel(world, entityId, panel) {
-    const size = resolveCanvasSize(panel.width, panel.height, panel.pixelDensity);
-    const style = {
-      backgroundColor: panel.backgroundColor,
-      backgroundOpacity: panel.backgroundOpacity,
-      cornerRadiusMeters: panel.cornerRadius,
-      borderWidthMeters: panel.borderWidth,
-      borderColor: panel.borderColor
-    };
-    const signature = panelSignature(panel.width, panel.height, size, style);
-    this.rebuildIfChanged(world, entityId, signature, panel.width, panel.height, size, (ctx) => {
-      drawChrome(ctx, size.pxWidth, size.pxHeight, size.density, style);
-    });
+    const chrome = resolveChrome(
+      panel,
+      panel.style,
+      this.tokensFor(world, entityId)
+    );
+    const bleed = chromeBleed(chrome);
+    const size = resolveCanvasSize(
+      panel.width + bleed * 2,
+      panel.height + bleed * 2,
+      panel.pixelDensity
+    );
+    const signature = panelSignature(
+      panel.width,
+      panel.height,
+      size,
+      chrome,
+      imagesLoaded(chrome)
+    );
+    this.rebuildIfChanged(
+      world,
+      entityId,
+      signature,
+      panel,
+      bleed,
+      size,
+      (ctx) => {
+        drawChrome(
+          ctx,
+          layoutBox(panel, bleed, size.density),
+          size.density,
+          chrome,
+          this.drawAssets
+        );
+      },
+      THREE67__namespace.DoubleSide
+    );
   }
   syncText(world, entityId, text) {
-    const size = resolveCanvasSize(text.width, text.height);
-    const style = {
-      fontSizeMeters: text.fontSize,
-      fontWeight: text.fontWeight,
-      color: text.color,
-      align: text.align,
-      valign: text.valign,
-      lineHeight: text.lineHeight,
-      paddingMeters: text.padding
-    };
-    const signature = textSignature(text.width, text.height, size, text.text, style);
-    this.rebuildIfChanged(world, entityId, signature, text.width, text.height, size, (ctx) => {
-      ctx.clearRect(0, 0, size.pxWidth, size.pxHeight);
-      drawTextBlock(ctx, size.pxWidth, size.pxHeight, size.density, text.text, style);
-    });
+    const tokens = this.tokensFor(world, entityId);
+    const chrome = text.style ? resolveChrome(CLEAR_CHROME, text.style, tokens) : null;
+    const bleed = chrome ? chromeBleed(chrome) : 0;
+    const size = resolveCanvasSize(
+      text.width + bleed * 2,
+      text.height + bleed * 2,
+      text.pixelDensity
+    );
+    const style = resolveText(text, text.style, tokens);
+    const family = familyOf(style.font);
+    const signature = JSON.stringify([
+      textSignature(text.width, text.height, size, text.text, style, family),
+      chrome,
+      chrome ? imagesLoaded(chrome) : null
+    ]);
+    this.rebuildIfChanged(
+      world,
+      entityId,
+      signature,
+      text,
+      bleed,
+      size,
+      (ctx) => {
+        const box = layoutBox(text, bleed, size.density);
+        if (chrome) {
+          drawChrome(ctx, box, size.density, chrome, this.drawAssets);
+        }
+        drawTextBlock(
+          ctx,
+          box,
+          size.density,
+          text.text,
+          style,
+          family,
+          this.drawAssets
+        );
+      }
+    );
   }
   syncButton(world, entityId, button) {
-    const size = resolveCanvasSize(button.width, button.height);
-    const chrome = {
-      backgroundColor: button.backgroundColor,
-      backgroundOpacity: button.backgroundOpacity,
-      cornerRadiusMeters: button.cornerRadius,
-      borderWidthMeters: button.borderWidth,
-      borderColor: button.borderColor
-    };
-    const label = {
-      fontSizeMeters: button.fontSize,
-      fontWeight: button.fontWeight,
-      color: button.textColor,
-      align: "center",
-      valign: "middle",
-      lineHeight: 1.2,
-      paddingMeters: 0.01
-    };
+    const tokens = this.tokensFor(world, entityId);
+    const chrome = resolveChrome(button, button.style, tokens);
+    const bleed = chromeBleed(chrome);
+    const size = resolveCanvasSize(
+      button.width + bleed * 2,
+      button.height + bleed * 2,
+      button.pixelDensity
+    );
+    const label = resolveText(
+      {
+        fontSize: button.fontSize,
+        fontWeight: button.fontWeight,
+        color: button.textColor,
+        align: "center",
+        valign: "middle",
+        lineHeight: 1.2,
+        padding: 0.01
+      },
+      button.style,
+      tokens
+    );
+    const family = familyOf(label.font);
+    const icon = button.icon ? resolveToken(button.icon, tokens) : null;
     const signature = buttonSignature(
       button.width,
       button.height,
       size,
       chrome,
       button.label,
-      label
+      label,
+      family,
+      [imagesLoaded(chrome), icon, icon ? !!uiImage(icon) : false]
+    );
+    this.rebuildIfChanged(
+      world,
+      entityId,
+      signature,
+      button,
+      bleed,
+      size,
+      (ctx) => {
+        const box = layoutBox(button, bleed, size.density);
+        drawChrome(ctx, box, size.density, chrome, this.drawAssets);
+        if (icon) {
+          drawIconLabel(
+            ctx,
+            box,
+            size.density,
+            button.label,
+            label,
+            family,
+            icon,
+            button.iconPosition ?? "left",
+            this.drawAssets
+          );
+        } else {
+          drawTextBlock(
+            ctx,
+            box,
+            size.density,
+            button.label,
+            label,
+            family,
+            this.drawAssets
+          );
+        }
+      }
     );
-    this.rebuildIfChanged(world, entityId, signature, button.width, button.height, size, (ctx) => {
-      drawChrome(ctx, size.pxWidth, size.pxHeight, size.density, chrome);
-      drawTextBlock(ctx, size.pxWidth, size.pxHeight, size.density, button.label, label);
-    });
   }
   syncToggle(world, entityId, toggle, deltaTime) {
-    const size = resolveCanvasSize(toggle.width, toggle.height);
-    const chrome = {
-      backgroundColor: toggle.value ? toggle.accentColor : toggle.trackColor,
-      backgroundOpacity: 1,
-      cornerRadiusMeters: toggle.height / 2,
-      borderWidthMeters: 0,
-      borderColor: "#000000"
-    };
+    const tokens = this.tokensFor(world, entityId);
+    const accent = resolveToken(toggle.accentColor, tokens);
+    const track = resolveToken(toggle.trackColor, tokens);
+    const knobColor = resolveToken(toggle.knobColor, tokens);
+    const size = resolveCanvasSize(
+      toggle.width,
+      toggle.height,
+      toggle.pixelDensity
+    );
+    const variant = toggle.variant ?? "switch";
+    if (variant !== "switch") {
+      this.syncMarkToggle(world, entityId, toggle, accent, track, knobColor);
+      return;
+    }
+    const chrome = resolveChrome(
+      {
+        backgroundColor: toggle.value ? accent : track,
+        backgroundOpacity: 1,
+        cornerRadius: toggle.height / 2,
+        borderWidth: 0,
+        borderColor: "#000000"
+      },
+      toggle.style,
+      tokens
+    );
     const signature = JSON.stringify([
       trackSignature(
         toggle.width,
         toggle.height,
         size,
         chrome,
-        toggle.accentColor,
-        toggle.knobColor
+        accent,
+        knobColor,
+        variant
       ),
       toggle.value
     ]);
@@ -16217,18 +17124,24 @@ var _UIPanelSystem = class _UIPanelSystem {
       world,
       entityId,
       signature,
-      toggle.width,
-      toggle.height,
+      toggle,
+      0,
       size,
       (ctx) => {
-        drawChrome(ctx, size.pxWidth, size.pxHeight, size.density, chrome);
+        drawChrome(
+          ctx,
+          layoutBox(toggle, 0, size.density),
+          size.density,
+          chrome,
+          this.drawAssets
+        );
       }
     );
     if (!entry) return;
     if (!entry.knob) {
       entry.knob = this.makeDisc(
         toggle.height * 0.4,
-        toggle.knobColor,
+        knobColor,
         entry.face.parent,
         CHILD_Z
       );
@@ -16240,35 +17153,95 @@ var _UIPanelSystem = class _UIPanelSystem {
     knob.position.x += (target - knob.position.x) * (deltaTime > 0 ? ease : 1);
     knob.position.z = CHILD_Z;
   }
+  /** Checkbox and radio: a box or ring at the left of the widget's area. */
+  syncMarkToggle(world, entityId, toggle, accent, track, markColor) {
+    const tokens = this.tokensFor(world, entityId);
+    const radio = toggle.variant === "radio";
+    const size = resolveCanvasSize(
+      toggle.width,
+      toggle.height,
+      toggle.pixelDensity
+    );
+    const side = toggle.height;
+    const chrome = resolveChrome(
+      {
+        backgroundColor: toggle.value ? accent : track,
+        backgroundOpacity: 1,
+        cornerRadius: radio ? side / 2 : side * 0.2,
+        borderWidth: 0,
+        borderColor: "#000000"
+      },
+      toggle.style,
+      tokens
+    );
+    const signature = JSON.stringify([
+      trackSignature(
+        toggle.width,
+        toggle.height,
+        size,
+        chrome,
+        accent,
+        markColor,
+        toggle.variant ?? null
+      ),
+      toggle.value
+    ]);
+    this.rebuildIfChanged(world, entityId, signature, toggle, 0, size, (ctx) => {
+      const px = side * size.density;
+      const box = { x: 0, y: 0, w: px, h: px };
+      drawChrome(ctx, box, size.density, chrome, this.drawAssets);
+      if (!toggle.value) return;
+      if (radio) drawDot(ctx, px / 2, px / 2, px * 0.24, markColor);
+      else drawCheckMark(ctx, box, markColor);
+    });
+  }
   syncSlider(world, entityId, slider) {
-    const size = resolveCanvasSize(slider.width, slider.height);
+    const tokens = this.tokensFor(world, entityId);
+    const accent = resolveToken(slider.accentColor, tokens);
+    const track = resolveToken(slider.trackColor, tokens);
+    const knobColor = resolveToken(slider.knobColor, tokens);
+    const size = resolveCanvasSize(
+      slider.width,
+      slider.height,
+      slider.pixelDensity
+    );
+    const range = Math.max(1e-6, slider.max - slider.min);
+    const t = Math.min(1, Math.max(0, (slider.value - slider.min) / range));
+    if (slider.variant === "progress" || slider.variant === "ring") {
+      this.syncMeter(world, entityId, slider, t, accent, track, knobColor);
+      return;
+    }
     const trackThickness = slider.height * 0.32;
     const knobRadius = slider.height * 0.45;
     const usable = Math.max(1e-3, slider.width - slider.height);
-    const chrome = {
-      backgroundColor: slider.trackColor,
-      backgroundOpacity: 1,
-      cornerRadiusMeters: trackThickness / 2,
-      borderWidthMeters: 0,
-      borderColor: "#000000"
-    };
+    const chrome = resolveChrome(
+      {
+        backgroundColor: track,
+        backgroundOpacity: 1,
+        cornerRadius: trackThickness / 2,
+        borderWidth: 0,
+        borderColor: "#000000"
+      },
+      void 0,
+      null
+    );
     const signature = trackSignature(
       slider.width,
       slider.height,
       size,
       chrome,
-      slider.accentColor,
-      slider.knobColor
+      accent,
+      knobColor,
+      slider.variant ?? null
     );
     const entry = this.rebuildIfChanged(
       world,
       entityId,
       signature,
-      slider.width,
-      slider.height,
+      slider,
+      0,
       size,
       (ctx) => {
-        ctx.clearRect(0, 0, size.pxWidth, size.pxHeight);
         const trackWidthM = usable + trackThickness;
         drawRoundedBar(
           ctx,
@@ -16276,7 +17249,7 @@ var _UIPanelSystem = class _UIPanelSystem {
           (slider.height - trackThickness) / 2 * size.density,
           trackWidthM * size.density,
           trackThickness * size.density,
-          slider.trackColor
+          track
         );
       }
     );
@@ -16285,13 +17258,13 @@ var _UIPanelSystem = class _UIPanelSystem {
       entry.fill = this.makeQuad(
         1,
         trackThickness,
-        slider.accentColor,
+        accent,
         entry.face.parent,
         CHILD_Z / 2
       );
       entry.cap = this.makeDisc(
         trackThickness / 2,
-        slider.accentColor,
+        accent,
         entry.face.parent,
         CHILD_Z / 2,
         Math.PI / 2,
@@ -16302,51 +17275,124 @@ var _UIPanelSystem = class _UIPanelSystem {
     if (!entry.knob) {
       entry.knob = this.makeDisc(
         knobRadius,
-        slider.knobColor,
+        knobColor,
         entry.face.parent,
         CHILD_Z
       );
     }
-    const range = Math.max(1e-6, slider.max - slider.min);
-    const t = Math.min(1, Math.max(0, (slider.value - slider.min) / range));
     entry.knob.position.x = -usable / 2 + t * usable;
     entry.knob.position.z = CHILD_Z;
     entry.fill.scale.x = Math.max(1e-4, t * usable);
     entry.fill.position.x = -usable / 2 + t * usable / 2;
     entry.fill.position.z = CHILD_Z / 2;
   }
+  /**
+   * Progress bars and rings. Unlike a slider these change rarely and have no
+   * drag to keep smooth, so the value is drawn, in steps of half a percent.
+   */
+  syncMeter(world, entityId, slider, t, accent, track, knobColor) {
+    const size = resolveCanvasSize(
+      slider.width,
+      slider.height,
+      slider.pixelDensity
+    );
+    const shown = Math.round(t * METER_STEPS) / METER_STEPS;
+    const signature = JSON.stringify([
+      slider.width,
+      slider.height,
+      size,
+      slider.variant,
+      accent,
+      track,
+      knobColor,
+      shown
+    ]);
+    this.rebuildIfChanged(world, entityId, signature, slider, 0, size, (ctx) => {
+      const box = {
+        x: 0,
+        y: 0,
+        w: size.pxWidth,
+        h: size.pxHeight
+      };
+      if (slider.variant === "ring") {
+        drawRing(ctx, box, shown, track, accent);
+        return;
+      }
+      drawRoundedBar(ctx, 0, 0, box.w, box.h, track);
+      if (shown <= 0) return;
+      const fill = Math.max(box.h, box.w * shown);
+      drawRoundedBar(ctx, 0, 0, fill, box.h, accent);
+    });
+  }
+  /** The tokens in scope for a widget, nearest panel first. */
+  tokensFor(world, entityId) {
+    if (!this.anyTokens) return null;
+    let merged = null;
+    const visited = /* @__PURE__ */ new Set();
+    let current = entityId;
+    while (current !== null && !visited.has(current)) {
+      visited.add(current);
+      const tokens = world.getComponent(current, UIPanelComponent)?.tokens;
+      if (tokens) merged = { ...tokens, ...merged ?? {} };
+      const parent = world.getComponent(current, ParentId)?.value;
+      current = typeof parent === "number" ? parent : null;
+    }
+    return merged;
+  }
   // ── Machinery ──────────────────────────────────────────────────────────────
-  rebuildIfChanged(world, entityId, signature, widthM, heightM, size, draw) {
+  rebuildIfChanged(world, entityId, signature, widget, bleed, size, draw, side = THREE67__namespace.FrontSide) {
     const root = world.getComponent(entityId, Object3DRef)?.object;
     if (!root) return null;
+    const widthM = widget.width;
+    const heightM = widget.height;
+    const faceWidth = widthM + bleed * 2;
+    const faceHeight = heightM + bleed * 2;
     let entry = this.entries.get(entityId);
+    if (entry) entry.opacity = widget.style?.opacity ?? 1;
     if (entry && entry.signature === signature) return entry;
     if (entry) this.disposeMovingParts(entry);
     if (!entry) {
       const canvas2 = this.createCanvas();
-      const texture = new THREE60__namespace.CanvasTexture(
+      const texture = new THREE67__namespace.CanvasTexture(
         canvas2
       );
       this.configureTexture(world, texture);
-      const material = new THREE60__namespace.MeshBasicMaterial({
+      const material = new THREE67__namespace.MeshBasicMaterial({
         map: texture,
         transparent: true,
         depthWrite: false,
         // UI colours are authored absolutes; scene tone mapping would shift
         // them (the classic "why is my white UI beige" bug).
         toneMapped: false,
-        side: THREE60__namespace.DoubleSide,
-        premultipliedAlpha: true
+        side,
+        premultipliedAlpha: false,
+        blending: THREE67__namespace.CustomBlending,
+        blendSrc: THREE67__namespace.OneFactor,
+        blendDst: THREE67__namespace.OneMinusSrcAlphaFactor,
+        blendSrcAlpha: THREE67__namespace.OneFactor,
+        blendDstAlpha: THREE67__namespace.OneMinusSrcAlphaFactor
       });
-      const face = new THREE60__namespace.Mesh(
-        new THREE60__namespace.PlaneGeometry(widthM, heightM),
+      const face = new THREE67__namespace.Mesh(
+        new THREE67__namespace.PlaneGeometry(faceWidth, faceHeight),
         material
       );
-      face.renderOrder = FACE_RENDER_ORDER;
+      tagPart(face, 16777215, true);
+      face.raycast = () => {
+      };
       root.add(face);
+      const hit = new THREE67__namespace.Mesh(
+        new THREE67__namespace.PlaneGeometry(widthM, heightM),
+        new THREE67__namespace.MeshBasicMaterial({ visible: false, side })
+      );
+      root.add(hit);
       entry = {
         signature: "",
+        root,
+        width: widthM,
+        height: heightM,
+        opacity: widget.style?.opacity ?? 1,
         face,
+        hit,
         texture,
         material,
         canvas: canvas2,
@@ -16360,23 +17406,26 @@ var _UIPanelSystem = class _UIPanelSystem {
     if (canvas.width !== size.pxWidth || canvas.height !== size.pxHeight) {
       canvas.width = size.pxWidth;
       canvas.height = size.pxHeight;
+      if (entry.signature) entry.texture.dispose();
     }
-    const params = entry.face.geometry.parameters;
-    if (params.width !== widthM || params.height !== heightM) {
-      entry.face.geometry.dispose();
-      entry.face.geometry = new THREE60__namespace.PlaneGeometry(widthM, heightM);
-    }
+    entry.width = widthM;
+    entry.height = heightM;
+    resizePlane(entry.face, faceWidth, faceHeight);
+    resizePlane(entry.hit, widthM, heightM);
     const ctx = canvas.getContext("2d");
-    if (ctx) draw(ctx);
+    if (ctx) {
+      ctx.clearRect(0, 0, size.pxWidth, size.pxHeight);
+      draw(ctx);
+    }
     entry.texture.needsUpdate = true;
     entry.signature = signature;
     return entry;
   }
   configureTexture(world, texture) {
-    texture.colorSpace = THREE60__namespace.SRGBColorSpace;
+    texture.colorSpace = THREE67__namespace.SRGBColorSpace;
     texture.generateMipmaps = true;
-    texture.minFilter = THREE60__namespace.LinearMipmapLinearFilter;
-    texture.magFilter = THREE60__namespace.LinearFilter;
+    texture.minFilter = THREE67__namespace.LinearMipmapLinearFilter;
+    texture.magFilter = THREE67__namespace.LinearFilter;
     texture.premultiplyAlpha = true;
     try {
       const renderer = world.getRenderer();
@@ -16387,7 +17436,7 @@ var _UIPanelSystem = class _UIPanelSystem {
   }
   makeQuad(widthM, heightM, color, parent, z) {
     return this.addPart(
-      new THREE60__namespace.PlaneGeometry(widthM, heightM),
+      new THREE67__namespace.PlaneGeometry(widthM, heightM),
       color,
       parent,
       z
@@ -16396,24 +17445,23 @@ var _UIPanelSystem = class _UIPanelSystem {
   /** A filled disc (or arc segment, for the fill's rounded cap). */
   makeDisc(radiusM, color, parent, z, thetaStart = 0, thetaLength = Math.PI * 2) {
     return this.addPart(
-      new THREE60__namespace.CircleGeometry(radiusM, 32, thetaStart, thetaLength),
+      new THREE67__namespace.CircleGeometry(radiusM, 32, thetaStart, thetaLength),
       color,
       parent,
       z
     );
   }
   addPart(geometry, color, parent, z) {
-    const mesh = new THREE60__namespace.Mesh(
+    const mesh = new THREE67__namespace.Mesh(
       geometry,
-      new THREE60__namespace.MeshBasicMaterial({
+      new THREE67__namespace.MeshBasicMaterial({
         color,
         transparent: true,
         depthWrite: false,
-        toneMapped: false,
-        side: THREE60__namespace.DoubleSide
+        toneMapped: false
       })
     );
-    mesh.renderOrder = FACE_RENDER_ORDER + 1;
+    tagPart(mesh, color);
     mesh.position.z = z;
     mesh.raycast = () => {
     };
@@ -16444,22 +17492,144 @@ var _UIPanelSystem = class _UIPanelSystem {
     const object = world.getComponent(entityId, Object3DRef)?.object;
     if (!transform || !object) return;
     const camera = world.getCamera();
-    const cam = new THREE60__namespace.Vector3();
-    const self = new THREE60__namespace.Vector3();
+    const cam = new THREE67__namespace.Vector3();
+    const self = new THREE67__namespace.Vector3();
     camera.getWorldPosition(cam);
     object.getWorldPosition(self);
     transform.rotation.y = Math.atan2(cam.x - self.x, cam.z - self.z);
   }
+  /**
+   * Stamp every widget's meshes with this frame's paint order. Written each
+   * frame because the eye moves: the order between trees can change at any
+   * time, and a plain property write costs less than checking it.
+   */
+  applyPaintOrder(world) {
+    if (this.entries.size === 0) return;
+    const camera = world.getCamera();
+    camera.getWorldPosition(eyeScratch);
+    const nodes = [...this.entries.keys()].map((id) => ({
+      id,
+      parent: nearestWidgetAncestor(world, id)
+    }));
+    const trees = buildPaintTrees(nodes);
+    const rects = /* @__PURE__ */ new Map();
+    for (const tree of trees) {
+      const entry = this.entries.get(tree.rootId);
+      if (entry) rects.set(tree.rootId, rootRect(tree.rootId, entry));
+    }
+    const slots = assignPaintOrder(trees, rects, eyeScratch);
+    this.framesUntilDescendantWalk -= 1;
+    const walkDescendants = this.framesUntilDescendantWalk <= 0;
+    if (walkDescendants) {
+      this.framesUntilDescendantWalk = DESCENDANT_WALK_INTERVAL;
+    }
+    const widgetRoots = /* @__PURE__ */ new Set();
+    if (walkDescendants) {
+      for (const entry of this.entries.values()) widgetRoots.add(entry.root);
+    }
+    for (const [entityId, entry] of this.entries) {
+      const slot = slots.get(entityId);
+      if (!slot) continue;
+      entry.face.renderOrder = slot.face;
+      for (const part of [entry.knob, entry.fill, entry.cap]) {
+        if (part) part.renderOrder = slot.parts;
+      }
+      if (walkDescendants) stampDescendants(entry.root, slot, widgetRoots);
+    }
+    const effective = /* @__PURE__ */ new Map();
+    const parentOf = new Map(nodes.map((node) => [node.id, node.parent]));
+    for (const tree of trees) {
+      for (const id of tree.order) {
+        const entry = this.entries.get(id);
+        if (!entry) continue;
+        const parent = parentOf.get(id);
+        const inherited = parent != null ? effective.get(parent) ?? 1 : 1;
+        const opacity = entry.opacity * inherited;
+        effective.set(id, opacity);
+        for (const mesh of [entry.face, entry.knob, entry.fill, entry.cap]) {
+          if (!mesh) continue;
+          const tag = mesh.userData[UI_PART_KEY];
+          if (tag.opacity === opacity) continue;
+          tag.opacity = opacity;
+          applyPartColor(mesh, tag);
+        }
+      }
+    }
+  }
   destroyEntry(entry) {
     this.disposeMovingParts(entry);
     entry.face.removeFromParent();
     entry.face.geometry.dispose();
     entry.face.material.dispose();
+    entry.hit.removeFromParent();
+    entry.hit.geometry.dispose();
+    entry.hit.material.dispose();
     entry.texture.dispose();
   }
 };
 __name(_UIPanelSystem, "UIPanelSystem");
 var UIPanelSystem = _UIPanelSystem;
+var eyeScratch = new THREE67__namespace.Vector3();
+function tagPart(mesh, color, premultiplied = false) {
+  const tag = {
+    baseColor: new THREE67__namespace.Color(color),
+    tint: 1,
+    opacity: 1,
+    premultiplied
+  };
+  mesh.userData[UI_PART_KEY] = tag;
+}
+__name(tagPart, "tagPart");
+function resizePlane(mesh, width, height) {
+  const params = mesh.geometry.parameters;
+  if (params.width === width && params.height === height) return;
+  mesh.geometry.dispose();
+  mesh.geometry = new THREE67__namespace.PlaneGeometry(width, height);
+}
+__name(resizePlane, "resizePlane");
+function layoutBox(widget, bleed, density) {
+  return {
+    x: bleed * density,
+    y: bleed * density,
+    w: widget.width * density,
+    h: widget.height * density
+  };
+}
+__name(layoutBox, "layoutBox");
+function familyOf(font) {
+  return font ? uiFontFamily(font) : null;
+}
+__name(familyOf, "familyOf");
+function imagesLoaded(chrome) {
+  return styleAssets(chrome, null).images.map((src) => !!uiImage(src));
+}
+__name(imagesLoaded, "imagesLoaded");
+function rootRect(id, entry) {
+  const e = entry.root.matrixWorld.elements;
+  const halfW = entry.width / 2;
+  const halfH = entry.height / 2;
+  return {
+    id,
+    center: { x: e[12], y: e[13], z: e[14] },
+    halfX: { x: e[0] * halfW, y: e[1] * halfW, z: e[2] * halfW },
+    halfY: { x: e[4] * halfH, y: e[5] * halfH, z: e[6] * halfH }
+  };
+}
+__name(rootRect, "rootRect");
+function stampDescendants(root, slot, widgetRoots) {
+  for (const child of root.children) {
+    if (widgetRoots.has(child) || child.userData[UI_PART_KEY]) continue;
+    const material = child.material;
+    const transparent = Array.isArray(material) ? material.some((m) => m.transparent) : material?.transparent === true;
+    const untouched = child.renderOrder === 0 || child.userData[PAINT_STAMP_KEY] === child.renderOrder;
+    if (transparent && untouched) {
+      child.renderOrder = slot.descendants;
+      child.userData[PAINT_STAMP_KEY] = slot.descendants;
+    }
+    stampDescendants(child, slot, widgetRoots);
+  }
+}
+__name(stampDescendants, "stampDescendants");
 var _XRHitTestSystem = class _XRHitTestSystem {
   constructor() {
     this.sources = /* @__PURE__ */ new Map();
@@ -16496,12 +17666,12 @@ var _XRHitTestSystem = class _XRHitTestSystem {
       if (!hits || hits.length === 0) continue;
       const pose = hits[0].getPose(referenceSpace);
       if (!pose) continue;
-      const matrix = new THREE60__namespace.Matrix4().fromArray(
+      const matrix = new THREE67__namespace.Matrix4().fromArray(
         pose.transform.matrix
       );
-      const position = new THREE60__namespace.Vector3();
-      const quaternion = new THREE60__namespace.Quaternion();
-      matrix.decompose(position, quaternion, new THREE60__namespace.Vector3());
+      const position = new THREE67__namespace.Vector3();
+      const quaternion = new THREE67__namespace.Quaternion();
+      matrix.decompose(position, quaternion, new THREE67__namespace.Vector3());
       this.results.set(key, { position, quaternion });
     }
   }
@@ -16575,8 +17745,8 @@ var _XRAnchorSystem = class _XRAnchorSystem {
     /** Per-anchor head-glue gates — see XREnvironmentSystem's TrackedEntry. */
     this.gates = /* @__PURE__ */ new Map();
     this.presenting = false;
-    this.tmpViewerMatrix = new THREE60__namespace.Matrix4();
-    this.tmpViewPos = new THREE60__namespace.Vector3();
+    this.tmpViewerMatrix = new THREE67__namespace.Matrix4();
+    this.tmpViewPos = new THREE67__namespace.Vector3();
   }
   update(world, deltaTime = 0) {
     const presenting = world.isXrPresenting();
@@ -16650,8 +17820,8 @@ var _XRAnchorSystem = class _XRAnchorSystem {
     if (typeof frame.createAnchor !== "function") return;
     const RigidTransform = globalThis.XRRigidTransform;
     if (!RigidTransform) return;
-    const quaternion = new THREE60__namespace.Quaternion().setFromEuler(
-      new THREE60__namespace.Euler(
+    const quaternion = new THREE67__namespace.Quaternion().setFromEuler(
+      new THREE67__namespace.Euler(
         transform.rotation.x,
         transform.rotation.y,
         transform.rotation.z,
@@ -16694,13 +17864,13 @@ var _XRAnchorSystem = class _XRAnchorSystem {
 };
 __name(_XRAnchorSystem, "XRAnchorSystem");
 var XRAnchorSystem = _XRAnchorSystem;
-var _q = new THREE60__namespace.Quaternion();
-var _q2 = new THREE60__namespace.Quaternion();
-var _s = new THREE60__namespace.Vector3();
-var _e = new THREE60__namespace.Vector3();
-var _w = new THREE60__namespace.Vector3();
-var _v = new THREE60__namespace.Vector3();
-var _p = new THREE60__namespace.Vector3();
+var _q = new THREE67__namespace.Quaternion();
+var _q2 = new THREE67__namespace.Quaternion();
+var _s = new THREE67__namespace.Vector3();
+var _e = new THREE67__namespace.Vector3();
+var _w = new THREE67__namespace.Vector3();
+var _v = new THREE67__namespace.Vector3();
+var _p = new THREE67__namespace.Vector3();
 function setWorldQuaternion(o, q) {
   if (o.parent) {
     o.parent.getWorldQuaternion(_q2).invert();
@@ -16725,31 +17895,31 @@ function twoBoneIK(upper, lower, end, target, pole) {
   if (a < 1e-6 || b < 1e-6) return target.distanceTo(_w);
   const toT = _v.subVectors(target, _s);
   const want = toT.length();
-  const c = THREE60__namespace.MathUtils.clamp(want, Math.abs(a - b) + 1e-4, a + b - 1e-4);
+  const c = THREE67__namespace.MathUtils.clamp(want, Math.abs(a - b) + 1e-4, a + b - 1e-4);
   const dir = toT.divideScalar(want || 1).clone();
   const pv = _p.subVectors(pole, _s);
   pv.addScaledVector(dir, -pv.dot(dir));
   if (pv.lengthSq() < 1e-8) pv.set(0, -1, 0).addScaledVector(dir, dir.y);
   pv.normalize();
-  const cosA = THREE60__namespace.MathUtils.clamp((a * a + c * c - b * b) / (2 * a * c), -1, 1);
+  const cosA = THREE67__namespace.MathUtils.clamp((a * a + c * c - b * b) / (2 * a * c), -1, 1);
   const joint = _s.clone().addScaledVector(dir, a * cosA).addScaledVector(pv, a * Math.sqrt(1 - cosA * cosA));
-  turn(upper, new THREE60__namespace.Quaternion().setFromUnitVectors(_e.clone().sub(_s).normalize(), joint.clone().sub(_s).normalize()));
+  turn(upper, new THREE67__namespace.Quaternion().setFromUnitVectors(_e.clone().sub(_s).normalize(), joint.clone().sub(_s).normalize()));
   lower.getWorldPosition(_e);
   end.getWorldPosition(_w);
   const reach = _s.clone().addScaledVector(dir, c);
-  turn(lower, new THREE60__namespace.Quaternion().setFromUnitVectors(_w.clone().sub(_e).normalize(), reach.clone().sub(_e).normalize()));
+  turn(lower, new THREE67__namespace.Quaternion().setFromUnitVectors(_w.clone().sub(_e).normalize(), reach.clone().sub(_e).normalize()));
   return want - c;
 }
 __name(twoBoneIK, "twoBoneIK");
-function gripQuaternion(axis, back, forearm, out = new THREE60__namespace.Quaternion()) {
+function gripQuaternion(axis, back, forearm, out = new THREE67__namespace.Quaternion()) {
   let X = axis.clone();
   const Z = back.clone().addScaledVector(X, -back.dot(X)).normalize().negate();
-  let Y = new THREE60__namespace.Vector3().crossVectors(Z, X);
+  let Y = new THREE67__namespace.Vector3().crossVectors(Z, X);
   if (Y.dot(forearm) < 0) {
     X = X.negate();
     Y = Y.negate();
   }
-  return out.setFromRotationMatrix(new THREE60__namespace.Matrix4().makeBasis(X, Y, Z));
+  return out.setFromRotationMatrix(new THREE67__namespace.Matrix4().makeBasis(X, Y, Z));
 }
 __name(gripQuaternion, "gripQuaternion");
 
@@ -16760,18 +17930,20 @@ var LIMB_BONES = {
   leftFoot: ["leftUpperLeg", "leftLowerLeg", "leftFoot"],
   rightFoot: ["rightUpperLeg", "rightLowerLeg", "rightFoot"]
 };
-var _t = new THREE60__namespace.Vector3();
-var _p2 = new THREE60__namespace.Vector3();
-var _q3 = new THREE60__namespace.Quaternion();
-var _pq = new THREE60__namespace.Quaternion();
+var _t = new THREE67__namespace.Vector3();
+var _p2 = new THREE67__namespace.Vector3();
+var _q3 = new THREE67__namespace.Quaternion();
+var _pq = new THREE67__namespace.Quaternion();
 var _IKSystem = class _IKSystem {
   constructor() {
     this.runtimes = /* @__PURE__ */ new Map();
-    this.reach = /* @__PURE__ */ new Map();
   }
-  /** How far a limb's end stayed from its target last frame, in metres (0 = reached). */
+  /**
+   * How far a limb's end stayed from its target last frame, in metres
+   * (0 = reached), or null if the limb's chain didn't run.
+   */
   getReachError(entityId, limb) {
-    return this.reach.get(`${entityId}:${limb}`) ?? null;
+    return this.runtimes.get(entityId)?.reach.get(limb) ?? null;
   }
   restore(runtime) {
     for (const [bone, w] of runtime.written) {
@@ -16797,13 +17969,14 @@ var _IKSystem = class _IKSystem {
       let runtime = this.runtimes.get(id);
       if (!runtime || runtime.rootUuid !== root.uuid) {
         if (runtime) this.restore(runtime);
-        runtime = { rootUuid: root.uuid, limbs: /* @__PURE__ */ new Map(), written: /* @__PURE__ */ new Map() };
+        runtime = { rootUuid: root.uuid, limbs: /* @__PURE__ */ new Map(), written: /* @__PURE__ */ new Map(), reach: /* @__PURE__ */ new Map() };
         this.runtimes.set(id, runtime);
       }
       for (const [bone, w] of runtime.written) {
         if (bone.quaternion.equals(w.written)) bone.quaternion.copy(w.before);
       }
       runtime.written.clear();
+      runtime.reach.clear();
       if (!ik.enabled) continue;
       const active = ik.chains.filter((c) => c.enabled && c.weight > 0 && typeof c.target === "number");
       if (active.length === 0) continue;
@@ -16824,7 +17997,7 @@ var _IKSystem = class _IKSystem {
         const [upper, lower, end] = limb.bones;
         for (const bone of [upper, lower, end]) {
           if (!runtime.written.has(bone)) {
-            runtime.written.set(bone, { before: bone.quaternion.clone(), written: new THREE60__namespace.Quaternion() });
+            runtime.written.set(bone, { before: bone.quaternion.clone(), written: new THREE67__namespace.Quaternion() });
           }
         }
         const animated = [upper.quaternion.clone(), lower.quaternion.clone(), end.quaternion.clone()];
@@ -16833,7 +18006,7 @@ var _IKSystem = class _IKSystem {
         if (poleObject) poleObject.getWorldPosition(_p2);
         else lower.getWorldPosition(_p2);
         const miss = twoBoneIK(upper, lower, end, _t, _p2);
-        this.reach.set(`${id}:${chain.limb}`, Math.max(0, miss));
+        runtime.reach.set(chain.limb, Math.max(0, miss));
         if (chain.matchRotation) {
           target.getWorldQuaternion(_q3);
           end.parent?.getWorldQuaternion(_pq);
@@ -16862,9 +18035,9 @@ var IKSystem = _IKSystem;
 function buildGeometry2(area) {
   if (area.shape === "circle") {
     const radius = Math.max(5e-3, area.width / 2);
-    return new THREE60__namespace.CircleGeometry(radius, 48);
+    return new THREE67__namespace.CircleGeometry(radius, 48);
   }
-  return new THREE60__namespace.PlaneGeometry(
+  return new THREE67__namespace.PlaneGeometry(
     Math.max(0.01, area.width),
     Math.max(0.01, area.depth)
   );
@@ -16881,13 +18054,13 @@ var _VRTeleportAreaSystem = class _VRTeleportAreaSystem {
   update(world) {
     const entityIds = world.query(VRTeleportAreaComponent, Object3DRef);
     const alive = new Set(entityIds);
-    for (const tracked of this.signatures.keys()) {
-      if (!alive.has(tracked)) this.signatures.delete(tracked);
+    for (const tracked2 of this.signatures.keys()) {
+      if (!alive.has(tracked2)) this.signatures.delete(tracked2);
     }
     for (const entityId of entityIds) {
       const area = world.getComponent(entityId, VRTeleportAreaComponent);
       const object = world.getComponent(entityId, Object3DRef)?.object;
-      if (!area || !(object instanceof THREE60__namespace.Mesh)) continue;
+      if (!area || !(object instanceof THREE67__namespace.Mesh)) continue;
       const signature = signatureOf(area);
       if (this.signatures.get(entityId) === signature) continue;
       this.signatures.set(entityId, signature);
@@ -16899,18 +18072,18 @@ var _VRTeleportAreaSystem = class _VRTeleportAreaSystem {
 __name(_VRTeleportAreaSystem, "VRTeleportAreaSystem");
 var VRTeleportAreaSystem = _VRTeleportAreaSystem;
 function createHandMaterial(preset, options) {
-  const color = new THREE60__namespace.Color(options.color);
+  const color = new THREE67__namespace.Color(options.color);
   switch (preset) {
     case "ghost":
-      return new THREE60__namespace.MeshBasicMaterial({
+      return new THREE67__namespace.MeshBasicMaterial({
         color,
         transparent: true,
         opacity: Math.min(1, Math.max(0.05, options.opacity * 0.45)),
         depthWrite: false,
-        side: THREE60__namespace.DoubleSide
+        side: THREE67__namespace.DoubleSide
       });
     case "neon":
-      return new THREE60__namespace.MeshStandardMaterial({
+      return new THREE67__namespace.MeshStandardMaterial({
         color,
         emissive: color,
         emissiveIntensity: Math.max(0.5, options.emissiveIntensity || 2),
@@ -16920,7 +18093,7 @@ function createHandMaterial(preset, options) {
         opacity: options.opacity
       });
     case "skeleton":
-      return new THREE60__namespace.MeshBasicMaterial({
+      return new THREE67__namespace.MeshBasicMaterial({
         color,
         wireframe: true,
         transparent: true,
@@ -16928,7 +18101,7 @@ function createHandMaterial(preset, options) {
       });
     case "custom":
     case "default":
-      return new THREE60__namespace.MeshStandardMaterial({
+      return new THREE67__namespace.MeshStandardMaterial({
         color,
         roughness: 0.85,
         metalness: 0,
@@ -16936,10 +18109,10 @@ function createHandMaterial(preset, options) {
         emissiveIntensity: Math.max(0, options.emissiveIntensity),
         transparent: options.opacity < 1,
         opacity: options.opacity,
-        side: THREE60__namespace.DoubleSide
+        side: THREE67__namespace.DoubleSide
       });
     default: {
-      return new THREE60__namespace.MeshStandardMaterial({ color });
+      return new THREE67__namespace.MeshStandardMaterial({ color });
     }
   }
 }
@@ -16964,9 +18137,9 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
   constructor(options) {
     this.controllerModelFactory = new XRControllerModelFactory_js.XRControllerModelFactory();
     this.handModelFactory = new XRHandModelFactory_js.XRHandModelFactory();
-    this.group = new THREE60__namespace.Group();
+    this.group = new THREE67__namespace.Group();
     /** Reused so a per-frame colour compare allocates nothing. */
-    this.rayColorScratch = new THREE60__namespace.Color();
+    this.rayColorScratch = new THREE67__namespace.Color();
     this.slots = /* @__PURE__ */ new Map();
     this.attachedTo = null;
     /** Last applied preset signature, so materials rebuild only on real change. */
@@ -17103,8 +18276,8 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
    */
   fitRayToHover(ray, side) {
     const hover = this.interactionSystem?.getHoverFor(side) ?? null;
-    const length = hover && Number.isFinite(hover.distance) && hover.distance > 0 ? Math.min(hover.distance, RAY_LENGTH) : RAY_LENGTH;
-    ray.scale.z = length;
+    const length2 = hover && Number.isFinite(hover.distance) && hover.distance > 0 ? Math.min(hover.distance, RAY_LENGTH) : RAY_LENGTH;
+    ray.scale.z = length2;
   }
   /** Lazily build per-slot visuals; the device reports profiles late. */
   ensureSlots(world) {
@@ -17153,17 +18326,17 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
    * without pulling in a line-rendering extension.
    */
   createRay() {
-    const geometry = new THREE60__namespace.CylinderGeometry(RAY_RADIUS, RAY_RADIUS, 1, 8, 1);
+    const geometry = new THREE67__namespace.CylinderGeometry(RAY_RADIUS, RAY_RADIUS, 1, 8, 1);
     geometry.rotateX(-Math.PI / 2);
     geometry.translate(0, 0, -0.5);
-    const material = new THREE60__namespace.MeshBasicMaterial({
+    const material = new THREE67__namespace.MeshBasicMaterial({
       color: "#4da3ff",
       transparent: true,
       opacity: 0.75,
       depthTest: false,
       depthWrite: false
     });
-    const mesh = new THREE60__namespace.Mesh(geometry, material);
+    const mesh = new THREE67__namespace.Mesh(geometry, material);
     mesh.name = "XRPointerRay";
     mesh.renderOrder = 999;
     mesh.visible = false;
@@ -17194,14 +18367,14 @@ var _XRControllerVisualSystem = class _XRControllerVisualSystem {
 __name(_XRControllerVisualSystem, "XRControllerVisualSystem");
 var XRControllerVisualSystem = _XRControllerVisualSystem;
 var MARKER_RADIUS = 0.28;
-var ACCENT = new THREE60__namespace.Color("#4da3ff");
-var SEGMENT_AXIS = new THREE60__namespace.Vector3(0, 1, 0);
+var ACCENT = new THREE67__namespace.Color("#4da3ff");
+var SEGMENT_AXIS = new THREE67__namespace.Vector3(0, 1, 0);
 var HEAD_CLEARANCE = 0.25;
 var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
   constructor(locomotionSystem) {
-    this.group = new THREE60__namespace.Group();
+    this.group = new THREE67__namespace.Group();
     /** Holds the segment chain that draws the arc. */
-    this.arc = new THREE60__namespace.Group();
+    this.arc = new THREE67__namespace.Group();
     /**
      * Unit cylinder along +Y, reused by every segment.
      *
@@ -17210,14 +18383,14 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
      * scaled cylinders gives real thickness while rebuilding no geometry: each
      * frame only moves, rotates and scales meshes that already exist.
      */
-    this.segmentGeometry = new THREE60__namespace.CylinderGeometry(1, 1, 1, 6, 1);
+    this.segmentGeometry = new THREE67__namespace.CylinderGeometry(1, 1, 1, 6, 1);
     this.segments = [];
-    this.marker = new THREE60__namespace.Group();
+    this.marker = new THREE67__namespace.Group();
     this.attached = false;
-    this.scratchDirection = new THREE60__namespace.Vector3();
-    this.scratchHead = new THREE60__namespace.Vector3();
-    this.validColor = new THREE60__namespace.Color();
-    this.invalidColor = new THREE60__namespace.Color();
+    this.scratchDirection = new THREE67__namespace.Vector3();
+    this.scratchHead = new THREE67__namespace.Vector3();
+    this.validColor = new THREE67__namespace.Color();
+    this.invalidColor = new THREE67__namespace.Color();
     this.locomotionSystem = locomotionSystem;
     this.group.name = "XRTeleportVisuals";
     this.group.userData.ecsPreviewHidden = true;
@@ -17275,8 +18448,8 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
       const from = curve[i];
       const to = curve[i + 1];
       this.scratchDirection.subVectors(to, from);
-      const length = this.scratchDirection.length();
-      if (length < 1e-6) {
+      const length2 = this.scratchDirection.length();
+      if (length2 < 1e-6) {
         segment.visible = false;
         continue;
       }
@@ -17284,9 +18457,9 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
       segment.position.copy(from).addScaledVector(this.scratchDirection, 0.5);
       segment.quaternion.setFromUnitVectors(
         SEGMENT_AXIS,
-        this.scratchDirection.divideScalar(length)
+        this.scratchDirection.divideScalar(length2)
       );
-      segment.scale.set(radius, length, radius);
+      segment.scale.set(radius, length2, radius);
       const t = needed > 1 ? i / (needed - 1) : 0;
       const fade = 1 - t * 0.75;
       segment.material.color.copy(tint).multiplyScalar(fade);
@@ -17295,12 +18468,12 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
   /** Grow the segment pool to cover the current arc. */
   ensureSegments(count) {
     while (this.segments.length < count) {
-      const material = new THREE60__namespace.MeshBasicMaterial({
+      const material = new THREE67__namespace.MeshBasicMaterial({
         transparent: true,
         depthTest: false,
         depthWrite: false
       });
-      const mesh = new THREE60__namespace.Mesh(this.segmentGeometry, material);
+      const mesh = new THREE67__namespace.Mesh(this.segmentGeometry, material);
       mesh.frustumCulled = false;
       mesh.renderOrder = 998;
       mesh.raycast = () => {
@@ -17324,33 +18497,33 @@ var _XRTeleportVisualSystem = class _XRTeleportVisualSystem {
     return world.getComponent(entityId, XRRigComponent) ?? null;
   }
   createRing() {
-    const geometry = new THREE60__namespace.RingGeometry(
+    const geometry = new THREE67__namespace.RingGeometry(
       MARKER_RADIUS * 0.72,
       MARKER_RADIUS,
       48
     );
     geometry.rotateX(-Math.PI / 2);
-    return new THREE60__namespace.Mesh(
+    return new THREE67__namespace.Mesh(
       geometry,
-      new THREE60__namespace.MeshBasicMaterial({
+      new THREE67__namespace.MeshBasicMaterial({
         color: ACCENT,
         transparent: true,
         opacity: 0.9,
-        side: THREE60__namespace.DoubleSide,
+        side: THREE67__namespace.DoubleSide,
         depthTest: false
       })
     );
   }
   createDot() {
-    const geometry = new THREE60__namespace.CircleGeometry(MARKER_RADIUS * 0.16, 24);
+    const geometry = new THREE67__namespace.CircleGeometry(MARKER_RADIUS * 0.16, 24);
     geometry.rotateX(-Math.PI / 2);
-    return new THREE60__namespace.Mesh(
+    return new THREE67__namespace.Mesh(
       geometry,
-      new THREE60__namespace.MeshBasicMaterial({
+      new THREE67__namespace.MeshBasicMaterial({
         color: ACCENT,
         transparent: true,
         opacity: 0.55,
-        side: THREE60__namespace.DoubleSide,
+        side: THREE67__namespace.DoubleSide,
         depthTest: false
       })
     );
@@ -17461,7 +18634,7 @@ function boneDirections(joints, finger) {
     const from = joints[chain[i - 1]];
     const to = joints[chain[i]];
     if (!from || !to) return null;
-    const direction = new THREE60__namespace.Vector3().subVectors(to, from);
+    const direction = new THREE67__namespace.Vector3().subVectors(to, from);
     if (direction.lengthSq() < 1e-12) return null;
     directions.push(direction.normalize());
   }
@@ -17534,8 +18707,8 @@ function computeSpread(joints, a, b) {
   const bBase = joints[METACARPAL_JOINTS[b]];
   const bTip = joints[TIP_JOINTS[b]];
   if (!aBase || !aTip || !bBase || !bTip) return null;
-  const dirA = new THREE60__namespace.Vector3().subVectors(aTip, aBase);
-  const dirB = new THREE60__namespace.Vector3().subVectors(bTip, bBase);
+  const dirA = new THREE67__namespace.Vector3().subVectors(aTip, aBase);
+  const dirB = new THREE67__namespace.Vector3().subVectors(bTip, bBase);
   if (dirA.lengthSq() < 1e-12 || dirB.lengthSq() < 1e-12) return null;
   return clamp01((1 - dirA.normalize().dot(dirB.normalize())) / 0.45);
 }
@@ -17545,18 +18718,18 @@ function computePalmPose(joints, handedness) {
   const indexBase = joints["index-finger-metacarpal"];
   const pinkyBase = joints["pinky-finger-metacarpal"];
   if (!wrist || !indexBase || !pinkyBase) return null;
-  const u = new THREE60__namespace.Vector3().subVectors(indexBase, wrist);
-  const v = new THREE60__namespace.Vector3().subVectors(pinkyBase, wrist);
-  const normal = new THREE60__namespace.Vector3().crossVectors(u, v);
+  const u = new THREE67__namespace.Vector3().subVectors(indexBase, wrist);
+  const v = new THREE67__namespace.Vector3().subVectors(pinkyBase, wrist);
+  const normal = new THREE67__namespace.Vector3().crossVectors(u, v);
   if (normal.lengthSq() < 1e-12) return null;
   normal.normalize();
   if (handedness === "left") normal.multiplyScalar(-1);
-  const right = new THREE60__namespace.Vector3().subVectors(indexBase, pinkyBase);
+  const right = new THREE67__namespace.Vector3().subVectors(indexBase, pinkyBase);
   if (right.lengthSq() < 1e-12) return null;
   right.normalize();
   if (handedness === "left") right.multiplyScalar(-1);
-  const up = new THREE60__namespace.Vector3().crossVectors(normal, right).normalize();
-  const center = new THREE60__namespace.Vector3().add(wrist).add(indexBase).add(pinkyBase).divideScalar(3);
+  const up = new THREE67__namespace.Vector3().crossVectors(normal, right).normalize();
+  const center = new THREE67__namespace.Vector3().add(wrist).add(indexBase).add(pinkyBase).divideScalar(3);
   return {
     center,
     normal,
@@ -17568,17 +18741,17 @@ function computePalmPose(joints, handedness) {
 __name(computePalmPose, "computePalmPose");
 function computeHandShape(joints, handedness) {
   const fingers2 = {};
-  let tracked = 0;
+  let tracked2 = 0;
   for (const finger of XR_FINGERS) {
     const curl = computeFingerCurl(joints, finger);
     if (curl) {
       fingers2[finger] = curl;
-      tracked += 1;
+      tracked2 += 1;
     } else {
       fingers2[finger] = { baseCurl: 0, tipCurl: 0, curl: 0 };
     }
   }
-  if (tracked === 0) return null;
+  if (tracked2 === 0) return null;
   const pinch = {};
   for (const finger of PINCH_FINGERS) {
     pinch[finger] = computePinch(joints, finger) ?? 0;
@@ -17587,7 +18760,7 @@ function computeHandShape(joints, handedness) {
   const thumbTip = joints["thumb-tip"];
   let thumbDirection = null;
   if (thumbBase && thumbTip) {
-    const direction = new THREE60__namespace.Vector3().subVectors(thumbTip, thumbBase);
+    const direction = new THREE67__namespace.Vector3().subVectors(thumbTip, thumbBase);
     if (direction.lengthSq() > 1e-12) thumbDirection = direction.normalize();
   }
   const fingerDirections = {};
@@ -17598,7 +18771,7 @@ function computeHandShape(joints, handedness) {
       fingerDirections[finger] = null;
       continue;
     }
-    const direction = new THREE60__namespace.Vector3().subVectors(tip, base);
+    const direction = new THREE67__namespace.Vector3().subVectors(tip, base);
     fingerDirections[finger] = direction.lengthSq() > 1e-12 ? direction.normalize() : null;
   }
   return {
@@ -17632,12 +18805,12 @@ function scoreAgainst(actual, target, tolerance) {
 __name(scoreAgainst, "scoreAgainst");
 var DEFAULT_DIRECTION_TOLERANCE = 45;
 var WORLD_DIRECTIONS = {
-  up: new THREE60__namespace.Vector3(0, 1, 0),
-  down: new THREE60__namespace.Vector3(0, -1, 0),
-  forward: new THREE60__namespace.Vector3(0, 0, -1),
-  back: new THREE60__namespace.Vector3(0, 0, 1),
-  left: new THREE60__namespace.Vector3(-1, 0, 0),
-  right: new THREE60__namespace.Vector3(1, 0, 0)
+  up: new THREE67__namespace.Vector3(0, 1, 0),
+  down: new THREE67__namespace.Vector3(0, -1, 0),
+  forward: new THREE67__namespace.Vector3(0, 0, -1),
+  back: new THREE67__namespace.Vector3(0, 0, 1),
+  left: new THREE67__namespace.Vector3(-1, 0, 0),
+  right: new THREE67__namespace.Vector3(1, 0, 0)
 };
 function axisVector(shape, axis) {
   if (axis === "thumb") return shape.thumbDirection;
@@ -17652,7 +18825,7 @@ function resolveDirection(direction, shape, context) {
   const head = context?.headPosition;
   const origin = shape.palm?.center;
   if (!head || !origin) return null;
-  const toHead = new THREE60__namespace.Vector3().subVectors(head, origin);
+  const toHead = new THREE67__namespace.Vector3().subVectors(head, origin);
   if (toHead.lengthSq() < 1e-12) return null;
   toHead.normalize();
   return direction === "toward-head" ? toHead : toHead.multiplyScalar(-1);
@@ -17664,8 +18837,8 @@ function scoreDirections(actual, accepted, shape, toleranceDegrees, context) {
   for (const direction of accepted) {
     const wanted = resolveDirection(direction, shape, context);
     if (!wanted) continue;
-    const angle = THREE60__namespace.MathUtils.radToDeg(
-      Math.acos(THREE60__namespace.MathUtils.clamp(actual.dot(wanted), -1, 1))
+    const angle = THREE67__namespace.MathUtils.radToDeg(
+      Math.acos(THREE67__namespace.MathUtils.clamp(actual.dot(wanted), -1, 1))
     );
     const normalizedError = Math.max(0, angle - toleranceDegrees) / 90;
     const score = clamp01(1 - normalizedError / MATCH_FALLOFF);
@@ -17730,8 +18903,8 @@ function matchHandPose(shape, definition, context) {
     if (!handAxis || !wanted) {
       consider(0, "orientation");
     } else {
-      const angle = THREE60__namespace.MathUtils.radToDeg(
-        Math.acos(THREE60__namespace.MathUtils.clamp(handAxis.dot(wanted), -1, 1))
+      const angle = THREE67__namespace.MathUtils.radToDeg(
+        Math.acos(THREE67__namespace.MathUtils.clamp(handAxis.dot(wanted), -1, 1))
       );
       const normalizedError = Math.max(0, angle - toleranceDegrees) / 90;
       consider(clamp01(1 - normalizedError / MATCH_FALLOFF), "orientation");
@@ -17809,7 +18982,7 @@ var _XRHandPoseSystem = class _XRHandPoseSystem {
     this.trackers = /* @__PURE__ */ new Map();
     this.shapes = /* @__PURE__ */ new Map();
     /** Reused so head-relative orientation checks allocate nothing per frame. */
-    this.headPosition = new THREE60__namespace.Vector3();
+    this.headPosition = new THREE67__namespace.Vector3();
     this.elapsed = 0;
     this.warnedNoHands = false;
     this.noHandSeconds = 0;
@@ -17825,8 +18998,8 @@ var _XRHandPoseSystem = class _XRHandPoseSystem {
     const entries = this.collectEntries(world);
     if (entries.length === 0) return;
     if (!this.warnedNoHands) {
-      const tracked = this.shapes.get("left") !== null || this.shapes.get("right") !== null;
-      if (tracked) {
+      const tracked2 = this.shapes.get("left") !== null || this.shapes.get("right") !== null;
+      if (tracked2) {
         this.warnedNoHands = true;
       } else {
         this.noHandSeconds += deltaTime;
@@ -17972,6 +19145,7 @@ var _XRHoverVisualSystem = class _XRHoverVisualSystem {
       const interactable = world.getComponent(entityId, XRInteractableComponent);
       if (!interactable?.enabled) continue;
       if (interactable.hoverBehavior === "none") continue;
+      if (isUiWidget(world, entityId)) continue;
       this.begin(world, entityId, interactable);
     }
     for (const [entityId, record] of this.records) {
@@ -17992,7 +19166,7 @@ var _XRHoverVisualSystem = class _XRHoverVisualSystem {
     const wantsColor = interactable.hoverBehavior === "color" || interactable.hoverBehavior === "both";
     this.records.set(entityId, {
       shell: wantsColor ? this.addShell(world, entityId, interactable) : null,
-      baseScale: new THREE60__namespace.Vector3(
+      baseScale: new THREE67__namespace.Vector3(
         transform.scale.x,
         transform.scale.y,
         transform.scale.z
@@ -18005,27 +19179,27 @@ var _XRHoverVisualSystem = class _XRHoverVisualSystem {
   addShell(world, entityId, interactable) {
     const object = world.getComponent(entityId, Object3DRef)?.object;
     if (!object) return null;
-    const material = new THREE60__namespace.MeshBasicMaterial({
-      color: new THREE60__namespace.Color(interactable.hoverColor),
+    const material = new THREE67__namespace.MeshBasicMaterial({
+      color: new THREE67__namespace.Color(interactable.hoverColor),
       // Back faces only, so the shell shows just outside the silhouette instead
       // of covering the object.
-      side: THREE60__namespace.BackSide,
+      side: THREE67__namespace.BackSide,
       transparent: true,
       opacity: 0.85,
       depthWrite: false
     });
-    const group = new THREE60__namespace.Group();
+    const group = new THREE67__namespace.Group();
     group.name = "XRHoverShell";
     group.userData[XR_HOVER_SHELL_FLAG] = true;
     group.renderOrder = 998;
     object.traverse((child) => {
-      if (!(child instanceof THREE60__namespace.Mesh) || !child.geometry) return;
+      if (!(child instanceof THREE67__namespace.Mesh) || !child.geometry) return;
       if (child.userData[XR_HOVER_SHELL_FLAG]) return;
-      const clone3 = new THREE60__namespace.Mesh(child.geometry, material);
+      const clone3 = new THREE67__namespace.Mesh(child.geometry, material);
       child.updateWorldMatrix(true, false);
       object.updateWorldMatrix(true, false);
       clone3.matrixAutoUpdate = false;
-      clone3.matrix.copy(object.matrixWorld).invert().multiply(child.matrixWorld).scale(new THREE60__namespace.Vector3(SHELL_INFLATE, SHELL_INFLATE, SHELL_INFLATE));
+      clone3.matrix.copy(object.matrixWorld).invert().multiply(child.matrixWorld).scale(new THREE67__namespace.Vector3(SHELL_INFLATE, SHELL_INFLATE, SHELL_INFLATE));
       clone3.userData[XR_HOVER_SHELL_FLAG] = true;
       clone3.raycast = () => {
       };
@@ -18074,7 +19248,7 @@ var _XRHoverVisualSystem = class _XRHoverVisualSystem {
     if (!shell) return;
     shell.parent?.remove(shell);
     shell.traverse((child) => {
-      if (child instanceof THREE60__namespace.Mesh) {
+      if (child instanceof THREE67__namespace.Mesh) {
         const material = child.material;
         if (Array.isArray(material)) {
           for (const entry of material) entry.dispose();
@@ -18852,8 +20026,8 @@ var _World = class _World {
    * ```
    */
   raycast(origin, direction, near = 0, far = Infinity) {
-    const rayOrigin = new THREE60__namespace.Vector3(origin.x, origin.y, origin.z);
-    const rayDirection = new THREE60__namespace.Vector3(
+    const rayOrigin = new THREE67__namespace.Vector3(origin.x, origin.y, origin.z);
+    const rayDirection = new THREE67__namespace.Vector3(
       direction.x,
       direction.y,
       direction.z
@@ -18862,7 +20036,7 @@ var _World = class _World {
       return [];
     }
     rayDirection.normalize();
-    const raycaster = new THREE60__namespace.Raycaster(rayOrigin, rayDirection, near, far);
+    const raycaster = new THREE67__namespace.Raycaster(rayOrigin, rayDirection, near, far);
     const intersections = raycaster.intersectObjects(
       this.scene.children,
       true
@@ -18896,14 +20070,14 @@ var _World = class _World {
     if (!sourceObject) {
       return [];
     }
-    const rayOrigin = new THREE60__namespace.Vector3();
-    const rayDirection = new THREE60__namespace.Vector3();
+    const rayOrigin = new THREE67__namespace.Vector3();
+    const rayDirection = new THREE67__namespace.Vector3();
     sourceObject.getWorldPosition(rayOrigin);
     sourceObject.getWorldDirection(rayDirection);
     if (rayDirection.lengthSq() === 0) {
       return [];
     }
-    const raycaster = new THREE60__namespace.Raycaster(rayOrigin, rayDirection, near, far);
+    const raycaster = new THREE67__namespace.Raycaster(rayOrigin, rayDirection, near, far);
     const intersections = raycaster.intersectObjects(
       this.scene.children,
       true