@opsydyn/effect-three-foldkit 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,2041 @@
+// src/assets.ts
+import { Data, Effect } from "effect";
+import {
+  EquirectangularReflectionMapping,
+  SRGBColorSpace,
+  TextureLoader
+} from "three";
+import { FontLoader } from "three/addons/loaders/FontLoader.js";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+import { HDRLoader } from "three/addons/loaders/HDRLoader.js";
+
+// src/dom/models.ts
+import { Mesh, Texture } from "three";
+var disposeMaterial = (material) => {
+  for (const value of Object.values(material)) {
+    if (value instanceof Texture)
+      value.dispose();
+  }
+  material.dispose();
+};
+function disposeMesh(object) {
+  if (!(object instanceof Mesh))
+    return;
+  object.geometry.dispose();
+  const materials = Array.isArray(object.material) ? object.material : [object.material];
+  for (const material of materials)
+    disposeMaterial(material);
+}
+var disposeModel = (root) => {
+  root.traverse(disposeMesh);
+};
+var namesIn = (root) => {
+  const names = [];
+  root.traverse((object) => {
+    if (object !== root && object.name !== "")
+      names.push(object.name);
+  });
+  return names;
+};
+
+// src/assets.ts
+class AssetLoadError extends Data.TaggedError("AssetLoadError") {
+}
+var makeAssets = (store) => {
+  const releases = new Map;
+  const own = (id, release) => {
+    releases.get(id)?.();
+    releases.set(id, release);
+  };
+  const lendTexture = (id) => (texture) => {
+    texture.colorSpace = SRGBColorSpace;
+    const withdraw = store.lendTexture(id, texture);
+    own(id, () => {
+      withdraw();
+      texture.dispose();
+    });
+    return id;
+  };
+  const lendModel = (id) => (gltf) => {
+    gltf.scene.animations = gltf.animations;
+    const withdraw = store.lend(id, gltf.scene);
+    own(id, () => {
+      withdraw();
+      disposeModel(gltf.scene);
+    });
+    const info = {
+      id,
+      parts: namesIn(gltf.scene),
+      clips: gltf.animations.map((clip) => clip.name)
+    };
+    return info;
+  };
+  const lendEnvironment = (id) => (texture) => {
+    texture.mapping = EquirectangularReflectionMapping;
+    const withdraw = store.lendTexture(id, texture);
+    own(id, () => {
+      withdraw();
+      texture.dispose();
+    });
+    return id;
+  };
+  const lendFont = (id) => (font) => {
+    own(id, store.lendFont(id, font));
+    return id;
+  };
+  const releaseAll = () => {
+    for (const release of releases.values())
+      release();
+    releases.clear();
+  };
+  return {
+    loadTexture: (id, url) => {
+      const load = Effect.tryPromise({
+        try: () => new TextureLoader().loadAsync(url),
+        catch: (cause) => new AssetLoadError({ url, cause })
+      });
+      return Effect.map(load, lendTexture(id));
+    },
+    loadModel: (id, url) => {
+      const load = Effect.tryPromise({
+        try: () => new GLTFLoader().loadAsync(url),
+        catch: (cause) => new AssetLoadError({ url, cause })
+      });
+      return Effect.map(load, lendModel(id));
+    },
+    loadEnvironment: (id, url) => {
+      const load = Effect.tryPromise({
+        try: () => new HDRLoader().loadAsync(url),
+        catch: (cause) => new AssetLoadError({ url, cause })
+      });
+      return Effect.map(load, lendEnvironment(id));
+    },
+    loadFont: (id, url) => {
+      const load = Effect.tryPromise({
+        try: () => new FontLoader().loadAsync(url),
+        catch: (cause) => new AssetLoadError({ url, cause })
+      });
+      return Effect.map(load, lendFont(id));
+    },
+    unload: (id) => Effect.sync(() => {
+      releases.get(id)?.();
+      releases.delete(id);
+    }),
+    dispose: releaseAll
+  };
+};
+// src/dom/animationFrames.ts
+var animationFrameScheduler = (host) => {
+  const callbacks = new Set;
+  let handle;
+  const tick = () => {
+    handle = host.requestAnimationFrame(tick);
+    for (const onFrame of Array.from(callbacks))
+      onFrame();
+  };
+  return {
+    subscribe: (onFrame) => {
+      callbacks.add(onFrame);
+      handle ??= host.requestAnimationFrame(tick);
+      return () => {
+        callbacks.delete(onFrame);
+        if (callbacks.size > 0 || handle === undefined)
+          return;
+        host.cancelAnimationFrame(handle);
+        handle = undefined;
+      };
+    }
+  };
+};
+// src/dom/pointer.ts
+var toNdc = (rect, clientX, clientY) => {
+  if (rect.width === 0 || rect.height === 0)
+    return { x: 0, y: 0 };
+  return {
+    x: (clientX - rect.left) / rect.width * 2 - 1,
+    y: -((clientY - rect.top) / rect.height * 2 - 1)
+  };
+};
+var modifiersOf = (event) => ({
+  shift: event.shiftKey,
+  control: event.ctrlKey,
+  meta: event.metaKey,
+  alt: event.altKey
+});
+var pointerIdOf = (event) => event instanceof PointerEvent ? event.pointerId : 0;
+var wheelScale = [1, 16, 100];
+var toPointerInput = (event, rect) => {
+  if (event.type === "pointerleave" || event.type === "pointercancel") {
+    return { _tag: "PointerLeave" };
+  }
+  const { x, y } = toNdc(rect, event.clientX, event.clientY);
+  const pointer = pointerIdOf(event);
+  switch (event.type) {
+    case "pointermove":
+      return { _tag: "PointerMove", x, y, pointer };
+    case "pointerdown":
+      return {
+        _tag: "PointerDown",
+        x,
+        y,
+        button: event.button,
+        pointer,
+        modifiers: modifiersOf(event)
+      };
+    case "pointerup":
+      return { _tag: "PointerUp", x, y, button: event.button, pointer };
+    case "dblclick":
+      return { _tag: "DoubleClick", x, y, button: event.button };
+    case "contextmenu":
+      return { _tag: "ContextMenu", x, y };
+    case "wheel":
+      return event instanceof WheelEvent ? {
+        _tag: "Wheel",
+        x,
+        y,
+        deltaX: event.deltaX * (wheelScale[event.deltaMode] ?? 1),
+        deltaY: event.deltaY * (wheelScale[event.deltaMode] ?? 1),
+        modifiers: modifiersOf(event)
+      } : undefined;
+    default:
+      return;
+  }
+};
+var capturesPointer = (events) => events.some((event) => event._tag === "PointerDown");
+var claimsContextMenu = (events) => events.some((event) => event._tag === "ContextMenu");
+var eventTypes = [
+  "pointermove",
+  "pointerdown",
+  "pointerup",
+  "pointerleave",
+  "pointercancel",
+  "dblclick",
+  "contextmenu",
+  "wheel"
+];
+var listenForPointer = (element, onInput, claimsGestures = () => false) => {
+  const listener = (event) => {
+    if (!(event instanceof MouseEvent))
+      return;
+    const input = toPointerInput(event, element.getBoundingClientRect());
+    if (input === undefined)
+      return;
+    const events = onInput(input);
+    const claimed = claimsGestures();
+    if (claimed && (event.type === "wheel" || event.type === "contextmenu")) {
+      event.preventDefault();
+    }
+    if (event.type === "contextmenu" && claimsContextMenu(events))
+      event.preventDefault();
+    if (event instanceof PointerEvent && event.type === "pointerdown" && (claimed || capturesPointer(events))) {
+      element.setPointerCapture(event.pointerId);
+    }
+  };
+  for (const type of eventTypes)
+    element.addEventListener(type, listener, { passive: false });
+  return () => {
+    for (const type of eventTypes)
+      element.removeEventListener(type, listener);
+  };
+};
+var claimsGestures = (owner) => () => owner.gestures() === "scene";
+var touchActionSync = (element, owner) => () => {
+  const touchAction = claimsGestures(owner)() ? "none" : "";
+  if (element.style.touchAction !== touchAction)
+    element.style.touchAction = touchAction;
+};
+// src/dom/viewport.ts
+var defaultPixelRatio = [1, 2];
+var resolvePixelRatio = (devicePixelRatio, setting) => typeof setting === "number" ? setting : Math.min(Math.max(setting[0], devicePixelRatio), setting[1]);
+var measureViewport = (element, devicePixelRatio, pixelRatio = defaultPixelRatio) => {
+  const rect = element.getBoundingClientRect();
+  return {
+    width: Math.max(1, rect.width),
+    height: Math.max(1, rect.height),
+    pixelRatio: resolvePixelRatio(devicePixelRatio, pixelRatio)
+  };
+};
+var observeSize = (element, onResize) => {
+  const observer = new ResizeObserver(onResize);
+  observer.observe(element);
+  return () => observer.disconnect();
+};
+var observeVisibility = (element, onVisible) => {
+  const observer = new IntersectionObserver((entries) => {
+    for (const entry of entries)
+      onVisible(entry.isIntersecting);
+  });
+  observer.observe(element);
+  return () => observer.disconnect();
+};
+var observeReducedMotion = (view, onChange) => {
+  const query = view.matchMedia("(prefers-reduced-motion: reduce)");
+  const listener = (event) => onChange(event.matches);
+  onChange(query.matches);
+  query.addEventListener("change", listener);
+  return () => query.removeEventListener("change", listener);
+};
+var observePixelRatio = (view, onChange) => {
+  let query;
+  const listener = () => {
+    query?.removeEventListener("change", listener);
+    arm();
+    onChange();
+  };
+  const arm = () => {
+    query = view.matchMedia(`(resolution: ${view.devicePixelRatio}dppx)`);
+    query.addEventListener("change", listener);
+  };
+  arm();
+  return () => query?.removeEventListener("change", listener);
+};
+// src/dom/webgl.ts
+import { webglKit } from "@opsydyn/effect-three/webgl";
+import {
+  HalfFloatType as HalfFloatType2,
+  LinearFilter,
+  PMREMGenerator,
+  Vector2 as Vector22,
+  WebGLRenderer,
+  WebGLRenderTarget as WebGLRenderTarget2
+} from "three";
+import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";
+
+// src/dom/postprocessing.ts
+import { effectsEqual } from "@opsydyn/effect-three";
+import {
+  HalfFloatType,
+  PerspectiveCamera,
+  Scene as EmptyScene,
+  Vector2,
+  WebGLRenderTarget
+} from "three";
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { FilmPass } from "three/addons/postprocessing/FilmPass.js";
+import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
+import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
+import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
+import { VignetteShader } from "three/addons/shaders/VignetteShader.js";
+var passFor = (effect, size) => {
+  switch (effect._tag) {
+    case "Bloom":
+      return new UnrealBloomPass(new Vector2(size.width, size.height), effect.strength, effect.radius, effect.threshold);
+    case "Vignette": {
+      const pass = new ShaderPass(VignetteShader);
+      pass.uniforms["offset"] = { value: effect.offset };
+      pass.uniforms["darkness"] = { value: effect.darkness };
+      return pass;
+    }
+    case "Film":
+      return new FilmPass(effect.intensity, effect.grayscale);
+  }
+};
+var createPostProcessing = (renderer) => {
+  let effects = [];
+  let composer;
+  let renderPass;
+  const size = { width: 1, height: 1, pixelRatio: 1 };
+  const dispose = () => {
+    if (composer === undefined)
+      return;
+    for (const pass of composer.passes)
+      pass.dispose();
+    composer.dispose();
+    composer = undefined;
+    renderPass = undefined;
+  };
+  const build = () => {
+    dispose();
+    if (effects.length === 0)
+      return;
+    const target = new WebGLRenderTarget(size.width, size.height, {
+      type: HalfFloatType,
+      samples: 4
+    });
+    const next = new EffectComposer(renderer, target);
+    const first = new RenderPass(new EmptyScene, new PerspectiveCamera);
+    next.addPass(first);
+    for (const effect of effects)
+      next.addPass(passFor(effect, size));
+    next.addPass(new OutputPass);
+    next.setPixelRatio(size.pixelRatio);
+    next.setSize(size.width, size.height);
+    composer = next;
+    renderPass = first;
+  };
+  return {
+    configure: (next) => {
+      if (effectsEqual(next, effects))
+        return;
+      effects = next;
+      build();
+    },
+    setSize: (width, height, pixelRatio) => {
+      size.width = width;
+      size.height = height;
+      size.pixelRatio = pixelRatio;
+      composer?.setPixelRatio(pixelRatio);
+      composer?.setSize(width, height);
+    },
+    render: (scene, camera) => {
+      if (composer === undefined || renderPass === undefined)
+        return false;
+      renderPass.scene = scene;
+      renderPass.camera = camera;
+      composer.render();
+      return true;
+    },
+    dispose
+  };
+};
+
+// src/dom/renderSettings.ts
+import {
+  ACESFilmicToneMapping,
+  AgXToneMapping,
+  BasicShadowMap,
+  CineonToneMapping,
+  LinearSRGBColorSpace,
+  LinearToneMapping,
+  Material,
+  NeutralToneMapping,
+  NoToneMapping,
+  PCFShadowMap,
+  ReinhardToneMapping,
+  SRGBColorSpace as SRGBColorSpace2,
+  VSMShadowMap
+} from "three";
+var shadowTypes = {
+  basic: BasicShadowMap,
+  percentage: PCFShadowMap,
+  soft: PCFShadowMap,
+  variance: VSMShadowMap
+};
+var toneMappings = {
+  none: NoToneMapping,
+  linear: LinearToneMapping,
+  reinhard: ReinhardToneMapping,
+  cineon: CineonToneMapping,
+  aces: ACESFilmicToneMapping,
+  agx: AgXToneMapping,
+  neutral: NeutralToneMapping
+};
+var colorSpaces = {
+  srgb: SRGBColorSpace2,
+  linear: LinearSRGBColorSpace
+};
+var recompileMaterials = (scene) => {
+  scene.traverse((object) => {
+    const material = Reflect.get(object, "material");
+    const materials = Array.isArray(material) ? material : [material];
+    for (const each of materials)
+      if (each instanceof Material)
+        each.needsUpdate = true;
+  });
+};
+var presentable = new WeakMap;
+var drawing = new WeakMap;
+var registerPresentable = (canvas, renderer, presenting) => {
+  presentable.set(canvas, presenting);
+  drawing.set(canvas, renderer);
+};
+var forgetPresentable = (canvas) => {
+  presentable.delete(canvas);
+  drawing.delete(canvas);
+};
+var presentableRendererOf = (canvas) => presentable.get(canvas);
+
+// src/dom/webgl.ts
+var configure = (renderer, settings) => {
+  const shadowMap = renderer.shadowMap;
+  const enabled = settings.shadows !== "off";
+  const switched = shadowMap.enabled !== enabled;
+  const type = enabled ? shadowTypes[settings.shadows] : shadowMap.type;
+  if (switched || shadowMap.type !== type)
+    shadowMap.needsUpdate = true;
+  shadowMap.enabled = enabled;
+  shadowMap.type = type;
+  renderer.toneMapping = toneMappings[settings.toneMapping];
+  renderer.toneMappingExposure = settings.exposure;
+  renderer.outputColorSpace = colorSpaces[settings.colorSpace];
+  return switched;
+};
+var drawingSize = new Vector22;
+var createTarget = (targets, width, height) => {
+  const target = new WebGLRenderTarget2(width, height, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    type: HalfFloatType2,
+    samples: 8
+  });
+  const handle = { texture: target.texture, dispose: () => target.dispose() };
+  targets.set(handle, target);
+  return handle;
+};
+var createRoom = (renderer) => {
+  const generator = new PMREMGenerator(renderer);
+  const room = new RoomEnvironment;
+  const target = generator.fromScene(room, 0.04);
+  room.dispose();
+  generator.dispose();
+  return { texture: target.texture, dispose: () => target.dispose() };
+};
+var drawPresenting = (renderer, scene, camera) => {
+  const passthrough = renderer.xr.getEnvironmentBlendMode() !== "opaque";
+  if (!passthrough || scene.background === null) {
+    renderer.render(scene, camera);
+    return;
+  }
+  const background = scene.background;
+  scene.background = null;
+  renderer.render(scene, camera);
+  scene.background = background;
+};
+var webglRendererFactory = (canvas, options = {}) => ({
+  kit: webglKit,
+  create: () => {
+    const renderer = new WebGLRenderer({ antialias: true, ...options, canvas });
+    registerPresentable(canvas, renderer, {
+      xr: renderer.xr,
+      setXrLoop: (callback) => renderer.xr.setAnimationLoop(callback)
+    });
+    const post = createPostProcessing(renderer);
+    const targets = new WeakMap;
+    let pixelRatio = 1;
+    let resolution = 1;
+    let scissored = false;
+    let shadowSwitches = 0;
+    const compiledAt = new WeakMap;
+    const applyPixelRatio = () => {
+      if (renderer.getPixelRatio() !== pixelRatio * resolution) {
+        renderer.setPixelRatio(pixelRatio * resolution);
+      }
+      const { width, height } = renderer.getSize(drawingSize);
+      post.setSize(width, height, pixelRatio * resolution);
+    };
+    return {
+      render: (scene, camera, area, target) => {
+        if (shadowSwitches > 0 && compiledAt.get(scene) !== shadowSwitches) {
+          recompileMaterials(scene);
+          compiledAt.set(scene, shadowSwitches);
+        }
+        const webglTarget = target === undefined ? undefined : targets.get(target);
+        if (webglTarget !== undefined) {
+          const previous = renderer.getRenderTarget();
+          const clearAlpha = renderer.getClearAlpha();
+          const xrEnabled = renderer.xr.enabled;
+          renderer.xr.enabled = false;
+          renderer.setClearAlpha(0);
+          renderer.setRenderTarget(webglTarget);
+          renderer.render(scene, camera);
+          renderer.setRenderTarget(previous);
+          renderer.setClearAlpha(clearAlpha);
+          renderer.xr.enabled = xrEnabled;
+          return;
+        }
+        if (renderer.xr.isPresenting) {
+          drawPresenting(renderer, scene, camera);
+          return;
+        }
+        const { width, height } = renderer.getSize(drawingSize);
+        if (area === undefined) {
+          if (scissored) {
+            renderer.setScissorTest(false);
+            renderer.setViewport(0, 0, width, height);
+            scissored = false;
+          }
+          if (!post.render(scene, camera))
+            renderer.render(scene, camera);
+          return;
+        }
+        const bottom = height - area.y - area.height;
+        renderer.setViewport(area.x, bottom, area.width, area.height);
+        renderer.setScissor(area.x, bottom, area.width, area.height);
+        renderer.setScissorTest(true);
+        scissored = true;
+        renderer.render(scene, camera);
+      },
+      createTarget: (width, height) => createTarget(targets, width, height),
+      createEnvironment: () => createRoom(renderer),
+      configure: (settings) => {
+        if (configure(renderer, settings))
+          shadowSwitches++;
+        resolution = settings.resolution;
+        post.configure(settings.effects);
+        applyPixelRatio();
+      },
+      setViewport: (viewport) => {
+        pixelRatio = viewport.pixelRatio;
+        applyPixelRatio();
+        renderer.setSize(viewport.width, viewport.height, false);
+        post.setSize(viewport.width, viewport.height, pixelRatio * resolution);
+      },
+      memory: () => ({
+        geometries: renderer.info.memory.geometries,
+        textures: renderer.info.memory.textures
+      }),
+      dispose: () => {
+        forgetPresentable(canvas);
+        renderer.xr.getSession()?.end();
+        post.dispose();
+        renderer.dispose();
+        renderer.forceContextLoss();
+      }
+    };
+  }
+});
+// src/dom/webgpu.ts
+import { webgpuKit } from "@opsydyn/effect-three/webgpu";
+import {
+  HalfFloatType as HalfFloatType3,
+  LinearFilter as LinearFilter2,
+  RenderTarget as ThreeRenderTarget,
+  Vector2 as Vector23
+} from "three";
+import { RoomEnvironment as RoomEnvironment2 } from "three/addons/environments/RoomEnvironment.js";
+import { PMREMGenerator as PMREMGenerator2, WebGPURenderer } from "three/webgpu";
+
+// src/dom/webgpuPostprocessing.ts
+import { effectsEqual as effectsEqual2 } from "@opsydyn/effect-three";
+import { bloom } from "three/addons/tsl/display/BloomNode.js";
+import {
+  clamp,
+  dot,
+  fract,
+  luminance,
+  max,
+  mix,
+  pass,
+  rand,
+  screenUV,
+  time,
+  uv,
+  vec3,
+  vec4
+} from "three/tsl";
+import { RenderPipeline } from "three/webgpu";
+var applied = (input, effect) => {
+  switch (effect._tag) {
+    case "Bloom": {
+      const glow = bloom(input, effect.strength, effect.radius, effect.threshold);
+      const shine = max(glow.r, max(glow.g, glow.b));
+      return vec4(input.rgb.add(glow.rgb), clamp(input.a.add(shine), 0, 1));
+    }
+    case "Vignette": {
+      const centred = screenUV.sub(0.5).mul(effect.offset);
+      return vec4(mix(input.rgb, vec3(1 - effect.darkness), dot(centred, centred)), input.a);
+    }
+    case "Film": {
+      const base = input.rgb;
+      const noise = rand(fract(uv().add(time)));
+      const grained = mix(base, base.add(base.mul(clamp(noise.add(0.1), 0, 1))), effect.intensity);
+      return vec4(effect.grayscale ? vec3(luminance(grained)) : grained, input.a);
+    }
+  }
+};
+var createWebGPUPostProcessing = (renderer) => {
+  let effects = [];
+  let pipeline;
+  let drawn;
+  const dispose = () => {
+    pipeline?.dispose();
+    pipeline = undefined;
+    drawn = undefined;
+  };
+  const build = (scene, camera) => {
+    dispose();
+    const output = effects.reduce(applied, pass(scene, camera));
+    const next = new RenderPipeline(renderer, output);
+    pipeline = next;
+    drawn = { scene, camera };
+    return next;
+  };
+  return {
+    configure: (next) => {
+      if (effectsEqual2(next, effects))
+        return;
+      effects = next;
+      dispose();
+    },
+    setSize: () => {
+      return;
+    },
+    render: (scene, camera) => {
+      if (effects.length === 0)
+        return false;
+      const current = pipeline !== undefined && drawn?.scene === scene && drawn.camera === camera ? pipeline : build(scene, camera);
+      current.render();
+      return true;
+    },
+    dispose
+  };
+};
+
+// src/dom/webgpu.ts
+var configure2 = (renderer, settings) => {
+  const shadowMap = renderer.shadowMap;
+  const enabled = settings.shadows !== "off";
+  const switched = shadowMap.enabled !== enabled;
+  shadowMap.enabled = enabled;
+  if (enabled)
+    shadowMap.type = shadowTypes[settings.shadows];
+  renderer.toneMapping = toneMappings[settings.toneMapping];
+  renderer.toneMappingExposure = settings.exposure;
+  renderer.outputColorSpace = colorSpaces[settings.colorSpace];
+  return switched;
+};
+var drawingSize2 = new Vector23;
+var createTarget2 = (targets, width, height) => {
+  const target = new ThreeRenderTarget(width, height, {
+    minFilter: LinearFilter2,
+    magFilter: LinearFilter2,
+    type: HalfFloatType3,
+    samples: 4
+  });
+  const handle = { texture: target.texture, dispose: () => target.dispose() };
+  targets.set(handle, target);
+  return handle;
+};
+var createRoom2 = (renderer) => {
+  const generator = new PMREMGenerator2(renderer);
+  const room = new RoomEnvironment2;
+  const target = generator.fromScene(room, 0.04);
+  room.dispose();
+  generator.dispose();
+  return { texture: target.texture, dispose: () => target.dispose() };
+};
+var drawPresenting2 = (renderer, scene, camera) => {
+  const passthrough = renderer.xr.getEnvironmentBlendMode() !== "opaque";
+  if (!passthrough || scene.background === null) {
+    renderer.render(scene, camera);
+    return;
+  }
+  const background = scene.background;
+  scene.background = null;
+  renderer.render(scene, camera);
+  scene.background = background;
+};
+var webgpuRendererFactory = (canvas, options = {}) => ({
+  kit: webgpuKit,
+  create: () => {
+    const renderer = new WebGPURenderer({ antialias: true, alpha: false, ...options, canvas });
+    registerPresentable(canvas, renderer, {
+      xr: renderer.xr,
+      setXrLoop: (callback) => {
+        renderer.setAnimationLoop(callback);
+      }
+    });
+    const post = createWebGPUPostProcessing(renderer);
+    const targets = new WeakMap;
+    let pixelRatio = 1;
+    let resolution = 1;
+    let scissored = false;
+    let shadowSwitches = 0;
+    const compiledAt = new WeakMap;
+    const applyPixelRatio = () => {
+      if (renderer.getPixelRatio() !== pixelRatio * resolution) {
+        renderer.setPixelRatio(pixelRatio * resolution);
+      }
+    };
+    return {
+      ready: () => renderer.init().then(() => {
+        return;
+      }),
+      render: (scene, camera, area, target) => {
+        if (shadowSwitches > 0 && compiledAt.get(scene) !== shadowSwitches) {
+          recompileMaterials(scene);
+          compiledAt.set(scene, shadowSwitches);
+        }
+        const offscreen = target === undefined ? undefined : targets.get(target);
+        if (offscreen !== undefined) {
+          const previous = renderer.getRenderTarget();
+          const clearAlpha = renderer.getClearAlpha();
+          const xrEnabled = renderer.xr.enabled;
+          renderer.xr.enabled = false;
+          renderer.setClearAlpha(0);
+          renderer.setRenderTarget(offscreen);
+          renderer.render(scene, camera);
+          renderer.setRenderTarget(previous);
+          renderer.setClearAlpha(clearAlpha);
+          renderer.xr.enabled = xrEnabled;
+          return;
+        }
+        if (renderer.xr.isPresenting) {
+          drawPresenting2(renderer, scene, camera);
+          return;
+        }
+        const { width, height } = renderer.getSize(drawingSize2);
+        if (area === undefined) {
+          if (scissored) {
+            renderer.setScissorTest(false);
+            renderer.setViewport(0, 0, width, height);
+            scissored = false;
+          }
+          if (!post.render(scene, camera))
+            renderer.render(scene, camera);
+          return;
+        }
+        const bottom = height - area.y - area.height;
+        renderer.setViewport(area.x, bottom, area.width, area.height);
+        renderer.setScissor(area.x, bottom, area.width, area.height);
+        renderer.setScissorTest(true);
+        scissored = true;
+        renderer.render(scene, camera);
+      },
+      createTarget: (width, height) => createTarget2(targets, width, height),
+      createEnvironment: () => createRoom2(renderer),
+      configure: (settings) => {
+        if (configure2(renderer, settings))
+          shadowSwitches++;
+        resolution = settings.resolution;
+        post.configure(settings.effects);
+        applyPixelRatio();
+      },
+      setViewport: (viewport) => {
+        pixelRatio = viewport.pixelRatio;
+        applyPixelRatio();
+        renderer.setSize(viewport.width, viewport.height, false);
+      },
+      memory: () => ({
+        geometries: renderer.info.memory.geometries,
+        textures: renderer.info.memory.textures
+      }),
+      dispose: () => {
+        forgetPresentable(canvas);
+        renderer.xr.getSession()?.end();
+        post.dispose();
+        renderer.dispose();
+      }
+    };
+  }
+});
+// src/element.ts
+import { SceneSchema } from "@opsydyn/effect-three";
+import { Schema } from "effect";
+import { CustomElement } from "foldkit";
+import { defineMessageUnion } from "foldkit/message";
+var SceneError = Schema.Union([
+  ...SceneSchema.DescriptionError.members,
+  Schema.TaggedStruct("MalformedScene", { issue: Schema.String })
+]);
+var Counts = Schema.Struct({ live: Schema.Int, created: Schema.Int, disposed: Schema.Int });
+var ReconciledDetail = Schema.Struct({
+  ops: Schema.Struct({
+    created: Schema.Int,
+    updated: Schema.Int,
+    moved: Schema.Int,
+    removed: Schema.Int,
+    replaced: Schema.Int,
+    reordered: Schema.Int,
+    configured: Schema.Int
+  }),
+  resources: Schema.Struct({ geometries: Counts, materials: Counts })
+});
+var XrSessionDetail = Schema.Struct({
+  mode: Schema.NullOr(Schema.Literals(["immersive-vr", "immersive-ar"]))
+});
+var sceneElement = CustomElement.define({
+  tag: "effect-three-scene",
+  properties: { scene: SceneSchema.SceneDescription },
+  events: {
+    "scene-click": SceneSchema.ButtonDetail,
+    "scene-double-click": SceneSchema.ButtonDetail,
+    "scene-context-menu": SceneSchema.HitDetail,
+    "scene-pointer-down": SceneSchema.ButtonDetail,
+    "scene-pointer-up": SceneSchema.ButtonDetail,
+    "scene-pointer-enter": SceneSchema.HitDetail,
+    "scene-pointer-move": SceneSchema.HitDetail,
+    "scene-pointer-leave": SceneSchema.KeyDetail,
+    "scene-pointer-missed": SceneSchema.MissDetail,
+    "scene-wheel": SceneSchema.WheelDetail,
+    "scene-drag": SceneSchema.DragDetail,
+    "scene-drag-end": SceneSchema.DragDetail,
+    "scene-gesture": SceneSchema.GestureDetail,
+    "scene-auto-rotated": SceneSchema.AutoRotatedDetail,
+    "scene-collision": SceneSchema.CollisionDetail,
+    "scene-contact-force": SceneSchema.ContactForceDetail,
+    "scene-measured": SceneSchema.MeasuredDetail,
+    "scene-label-measured": SceneSchema.LabelMeasuredDetail,
+    "scene-xr": XrSessionDetail,
+    "scene-xr-stick": SceneSchema.XrStickDetail,
+    "scene-xr-button": SceneSchema.XrButtonDetail,
+    "scene-xr-surface": SceneSchema.XrSurfaceDetail,
+    "scene-xr-moved": SceneSchema.XrMovedDetail,
+    "scene-xr-planes": SceneSchema.XrPlanesDetail,
+    "scene-xr-meshes": SceneSchema.XrMeshesDetail,
+    "scene-performance": SceneSchema.PerformanceDetail,
+    "scene-error": Schema.Struct({ error: SceneError }),
+    "scene-reconciled": ReconciledDetail
+  }
+});
+var domEventName = {
+  Click: "scene-click",
+  DoubleClick: "scene-double-click",
+  ContextMenu: "scene-context-menu",
+  PointerDown: "scene-pointer-down",
+  PointerUp: "scene-pointer-up",
+  PointerEnter: "scene-pointer-enter",
+  PointerMove: "scene-pointer-move",
+  PointerLeave: "scene-pointer-leave",
+  PointerMissed: "scene-pointer-missed",
+  Wheel: "scene-wheel",
+  Drag: "scene-drag",
+  DragEnd: "scene-drag-end",
+  Gesture: "scene-gesture",
+  AutoRotated: "scene-auto-rotated",
+  Collision: "scene-collision",
+  ContactForce: "scene-contact-force",
+  Measured: "scene-measured",
+  LabelMeasured: "scene-label-measured",
+  XrStick: "scene-xr-stick",
+  XrButton: "scene-xr-button",
+  XrSurface: "scene-xr-surface",
+  XrMoved: "scene-xr-moved",
+  XrPlanes: "scene-xr-planes",
+  XrMeshes: "scene-xr-meshes",
+  PerformanceChanged: "scene-performance"
+};
+var SceneLifecycle = defineMessageUnion({
+  StartedScene: {},
+  FailedScene: { reason: Schema.String }
+});
+// src/xr.ts
+import { Data as Data2, Effect as Effect2 } from "effect";
+
+class XrUnavailable extends Data2.TaggedError("XrUnavailable") {
+}
+var makeXr = (hub) => ({
+  supported: (mode) => Effect2.promise(() => hub.supported(mode)),
+  enter: (mode) => Effect2.tryPromise({
+    try: () => hub.enter(mode),
+    catch: (cause) => new XrUnavailable({ mode, cause })
+  }),
+  exit: Effect2.promise(() => hub.exit())
+});
+// src/dom/reconciled.ts
+var summarise = (ops, stats) => {
+  const counts = {
+    created: 0,
+    updated: 0,
+    moved: 0,
+    removed: 0,
+    replaced: 0,
+    reordered: 0,
+    configured: 0
+  };
+  for (const op of ops) {
+    switch (op._tag) {
+      case "Create":
+        counts.created++;
+        break;
+      case "Update":
+        counts.updated++;
+        break;
+      case "Move":
+        counts.moved++;
+        break;
+      case "Remove":
+        counts.removed++;
+        break;
+      case "Replace":
+        counts.replaced++;
+        break;
+      case "Order":
+        counts.reordered++;
+        break;
+      case "SetCamera":
+      case "DefineResources":
+        counts.configured++;
+        break;
+    }
+  }
+  return {
+    ops: counts,
+    resources: { geometries: { ...stats.geometries }, materials: { ...stats.materials } }
+  };
+};
+// src/environment.ts
+import {
+  createResourceStore
+} from "@opsydyn/effect-three";
+
+// src/dom/xr.ts
+import { Group as Group2 } from "three";
+
+// src/dom/xrGlide.ts
+var deadZone = 0.15;
+var turnZone = 0.5;
+var startGlider = (pose) => ({ pose, snapReady: true, moved: false });
+var floorFacing = (q) => {
+  const x = -2 * (q.x * q.z + q.w * q.y);
+  const z = -(1 - 2 * (q.x * q.x + q.y * q.y));
+  const length = Math.hypot(x, z);
+  return length < 0.000001 ? [0, -1] : [x / length, z / length];
+};
+var still = (stick, zone) => Math.abs(stick[0]) < zone && Math.abs(stick[1]) < zone;
+var moveBy = (origin, stick, facing, distance) => {
+  const [fx, fz] = facing;
+  const forward = -stick[1] * distance;
+  const right = stick[0] * distance;
+  return [origin[0] + fx * forward - fz * right, origin[1], origin[2] + fz * forward + fx * right];
+};
+var turnBy = (glider, glide, stick, seconds) => {
+  const { heading } = glider.pose;
+  const pushed = Math.abs(stick[0]) >= turnZone;
+  if (glide.turn === "smooth") {
+    return {
+      heading: pushed ? heading - stick[0] * glide.turnSpeed * seconds : heading,
+      snapReady: true
+    };
+  }
+  if (!pushed)
+    return { heading, snapReady: true };
+  if (!glider.snapReady)
+    return { heading, snapReady: false };
+  return {
+    heading: heading - Math.sign(stick[0]) * (glide.snapDegrees * Math.PI) / 180,
+    snapReady: false
+  };
+};
+var glideFrame = (glider, glide, sticks, facing, seconds) => {
+  const moving = !still(sticks.move, deadZone);
+  const origin = moving ? moveBy(glider.pose.origin, sticks.move, facing, glide.speed * seconds) : glider.pose.origin;
+  const { heading, snapReady } = turnBy(glider, glide, sticks.turn, seconds);
+  const changed = moving || heading !== glider.pose.heading;
+  const resting = !moving && still(sticks.turn, turnZone);
+  const moved = glider.moved || changed;
+  const pose = { origin, heading };
+  if (resting && moved)
+    return { glider: { pose, snapReady, moved: false }, stopped: pose };
+  return { glider: { pose, snapReady, moved }, stopped: undefined };
+};
+
+// src/dom/xrInputs.ts
+import {
+  BufferGeometry,
+  Float32BufferAttribute,
+  InstancedMesh,
+  Line,
+  LineBasicMaterial,
+  Matrix4,
+  MeshBasicMaterial,
+  Quaternion,
+  SphereGeometry,
+  Vector3
+} from "three";
+var rayOf = (pose) => {
+  const { position, orientation } = pose.transform;
+  const { x, y, z, w } = orientation;
+  return {
+    origin: [position.x, position.y, position.z],
+    direction: [-2 * (x * z + w * y), -2 * (y * z - w * x), -(1 - 2 * (x * x + y * y))]
+  };
+};
+var buttonNames = [
+  "trigger",
+  "squeeze",
+  "touchpad",
+  "thumbstick",
+  "primary",
+  "secondary"
+];
+var stickThresholds = { push: 0.6, release: 0.3 };
+var stickDirection = (x, y, previous) => {
+  if (Math.max(Math.abs(x), Math.abs(y)) < stickThresholds.release)
+    return "center";
+  if (Math.max(Math.abs(x), Math.abs(y)) < stickThresholds.push)
+    return previous;
+  if (Math.abs(x) >= Math.abs(y))
+    return x < 0 ? "left" : "right";
+  return y < 0 ? "forward" : "back";
+};
+var handOf = (source) => source.handedness;
+var rayLength = 1.5;
+var jointCount = 25;
+var rayMaterial = new LineBasicMaterial({ color: 16777215, transparent: true, opacity: 0.6 });
+var jointMaterial = new MeshBasicMaterial({ color: 15262940 });
+var jointGeometry = new SphereGeometry(1, 10, 8);
+var makeVisual = (source, group) => {
+  const geometry = new BufferGeometry;
+  geometry.setAttribute("position", new Float32BufferAttribute([0, 0, 0, 0, 0, -rayLength], 3));
+  const ray = new Line(geometry, rayMaterial);
+  ray.raycast = () => {
+    return;
+  };
+  ray.matrixAutoUpdate = false;
+  group.add(ray);
+  const joints = source.hand === undefined ? undefined : new InstancedMesh(jointGeometry, jointMaterial, jointCount);
+  if (joints !== undefined) {
+    joints.raycast = () => {
+      return;
+    };
+    joints.frustumCulled = false;
+    group.add(joints);
+  }
+  return { ray, joints };
+};
+var disposeVisual = (visual) => {
+  visual.ray.removeFromParent();
+  visual.ray.geometry.dispose();
+  visual.joints?.removeFromParent();
+  visual.joints?.dispose();
+};
+var matrix = new Matrix4;
+var up = new Vector3(0, 1, 0);
+var position = new Vector3;
+var turn = new Quaternion;
+var size = new Vector3;
+var placeJoints = (joints, hand, frame, space) => {
+  let slot = 0;
+  for (const jointSpace of hand.values()) {
+    const pose = frame.getJointPose?.(jointSpace, space);
+    if (pose !== undefined && pose !== null && slot < jointCount) {
+      const { x, y, z } = pose.transform.position;
+      const o = pose.transform.orientation;
+      const radius = pose.radius ?? 0.008;
+      matrix.compose(position.set(x, y, z), turn.set(o.x, o.y, o.z, o.w), size.setScalar(radius));
+      joints.setMatrixAt(slot, matrix);
+      slot++;
+    }
+  }
+  joints.count = slot;
+  joints.instanceMatrix.needsUpdate = true;
+};
+var surfaceOf = (pose) => {
+  const { position: p, orientation: q } = pose.transform;
+  return {
+    point: [p.x, p.y, p.z],
+    normal: [
+      2 * (q.x * q.y - q.w * q.z),
+      1 - 2 * (q.x * q.x + q.z * q.z),
+      2 * (q.y * q.z + q.w * q.x)
+    ]
+  };
+};
+var trackInputs = (session, group, settings, input) => {
+  const tracked = new Map;
+  let nextId = 0;
+  const trackedOf = (source) => {
+    const known = tracked.get(source);
+    if (known !== undefined)
+      return known;
+    const created = {
+      id: nextId++,
+      visual: undefined,
+      stick: "center",
+      axes: [0, 0],
+      pressed: [],
+      hitTest: undefined,
+      surface: undefined
+    };
+    tracked.set(source, created);
+    if (settings()?.hitTest === true && session.requestHitTestSource !== undefined) {
+      session.requestHitTestSource({ space: source.targetRaySpace })?.then((hitTest) => {
+        if (tracked.get(source) === created)
+          created.hitTest = hitTest;
+        else
+          hitTest.cancel();
+      }, () => {
+        return;
+      });
+    }
+    return created;
+  };
+  const forget = (source, state) => {
+    tracked.delete(source);
+    if (state.visual !== undefined)
+      disposeVisual(state.visual);
+    state.hitTest?.cancel();
+    input({ _tag: "Lost", source: state.id });
+  };
+  const gamepad = (source, state) => {
+    const pad = source.gamepad;
+    if (pad === undefined || pad === null || pad.mapping !== "xr-standard")
+      return;
+    const hand = handOf(source);
+    buttonNames.forEach((button, index) => {
+      const pressed = pad.buttons[index]?.pressed ?? false;
+      if (pressed !== (state.pressed[index] ?? false)) {
+        state.pressed[index] = pressed;
+        input({ _tag: "Button", source: state.id, hand, button, pressed });
+      }
+    });
+    state.axes = [pad.axes[2] ?? 0, pad.axes[3] ?? 0];
+    const direction = stickDirection(state.axes[0], state.axes[1], state.stick);
+    if (direction !== state.stick) {
+      state.stick = direction;
+      input({ _tag: "Stick", source: state.id, hand, direction });
+    }
+  };
+  const show = (source, state, ray, frame, space) => {
+    if (settings()?.showInputs !== true) {
+      if (state.visual !== undefined)
+        disposeVisual(state.visual);
+      state.visual = undefined;
+      return;
+    }
+    state.visual ??= makeVisual(source, group);
+    const [ox, oy, oz] = ray.origin;
+    const [dx, dy, dz] = ray.direction;
+    matrix.lookAt(position.set(0, 0, 0), size.set(dx, dy, dz), up);
+    matrix.setPosition(ox, oy, oz);
+    state.visual.ray.matrix.copy(matrix);
+    state.visual.ray.visible = source.hand === undefined;
+    if (state.visual.joints !== undefined && source.hand !== undefined) {
+      placeJoints(state.visual.joints, source.hand, frame, space);
+    }
+  };
+  return {
+    frame: (frame, space) => {
+      const present = new Set;
+      for (const source of session.inputSources) {
+        present.add(source);
+        const state = trackedOf(source);
+        const pose = frame.getPose(source.targetRaySpace, space);
+        if (pose !== undefined && pose !== null) {
+          const ray = rayOf(pose);
+          input({ _tag: "Aim", source: state.id, ray });
+          show(source, state, ray, frame, space);
+        }
+        gamepad(source, state);
+        if (state.hitTest !== undefined) {
+          const result = frame.getHitTestResults(state.hitTest)[0]?.getPose(space);
+          state.surface = result === undefined || result === null ? undefined : surfaceOf(result);
+        }
+      }
+      for (const [source, state] of tracked)
+        if (!present.has(source))
+          forget(source, state);
+    },
+    idOf: (source) => trackedOf(source).id,
+    selected: (source) => {
+      const state = tracked.get(source);
+      if (state?.surface === undefined)
+        return;
+      input({ _tag: "Surface", source: state.id, hand: handOf(source), ...state.surface });
+    },
+    sticks: () => {
+      const axesOf = (hand) => {
+        for (const [source, state] of tracked)
+          if (source.handedness === hand)
+            return state.axes;
+        return [0, 0];
+      };
+      return { left: axesOf("left"), right: axesOf("right") };
+    },
+    stop: () => {
+      for (const [source, state] of tracked)
+        forget(source, state);
+    }
+  };
+};
+
+// src/dom/xrSpaces.ts
+import {
+  xrMeshGeometryId
+} from "@opsydyn/effect-three";
+import { BufferAttribute, BufferGeometry as BufferGeometry2, Euler, Quaternion as Quaternion2 } from "three";
+var turn2 = new Quaternion2;
+var angles = new Euler;
+var poseOf = (pose) => {
+  if (pose === null || pose === undefined)
+    return;
+  const { position: p, orientation: o } = pose.transform;
+  return { position: [p.x, p.y, p.z], quaternion: [o.x, o.y, o.z, o.w] };
+};
+var sameVec3 = (a, b) => a.every((value, i) => value === b[i]);
+var sameAnchor = (a, b) => sameVec3(a.position, b.position) && sameVec3(a.rotation, b.rotation);
+var transformOf = ({ position: [x, y, z], rotation }) => {
+  turn2.setFromEuler(angles.fromArray([...rotation]));
+  return new XRRigidTransform({ x, y, z }, { x: turn2.x, y: turn2.y, z: turn2.z, w: turn2.w });
+};
+var planeOf = (id, plane, pose) => {
+  angles.setFromQuaternion(turn2.fromArray([...pose.quaternion]));
+  return {
+    id,
+    orientation: plane.orientation,
+    label: plane.semanticLabel ?? "",
+    position: pose.position,
+    rotation: [angles.x, angles.y, angles.z],
+    polygon: plane.polygon.map((point) => [point.x, point.y, point.z])
+  };
+};
+var signatureOf = (plane) => [plane.id, plane.orientation, plane.label, ...plane.position, ...plane.rotation].concat(plane.polygon.flat()).join(",");
+var meshSignatureOf = (mesh) => [mesh.id, mesh.label, ...mesh.position, ...mesh.rotation].join(",");
+var meshGeometryOf = (mesh) => {
+  const geometry = new BufferGeometry2;
+  geometry.setIndex(new BufferAttribute(mesh.indices, 1));
+  geometry.setAttribute("position", new BufferAttribute(mesh.vertices, 3));
+  geometry.computeVertexNormals();
+  return geometry;
+};
+var withdrawLent = (lent) => {
+  lent.withdraw();
+  lent.geometry.dispose();
+};
+var trackSpaces = (session, settings, follow, input, lend) => {
+  const anchors = new Map;
+  const planeIds = new WeakMap;
+  const planes = new Map;
+  let nextPlane = 0;
+  let reported;
+  const meshIds = new WeakMap;
+  const meshes = new Map;
+  const lentMeshes = new Map;
+  let nextMesh = 0;
+  let reportedMeshes;
+  const syncAnchors = (frame, space) => {
+    const wanted = settings()?.anchors ?? [];
+    const seen = new Set;
+    for (const spec of wanted) {
+      seen.add(spec.id);
+      const made = anchors.get(spec.id);
+      if (made !== undefined && sameAnchor(made.spec, spec))
+        continue;
+      made?.anchor?.delete();
+      const entry = { spec, anchor: undefined };
+      anchors.set(spec.id, entry);
+      frame.createAnchor?.(transformOf(spec), space).then((anchor) => {
+        if (anchors.get(spec.id) === entry)
+          entry.anchor = anchor;
+        else
+          anchor.delete();
+      }, () => {
+        return;
+      });
+    }
+    for (const [id, made] of anchors) {
+      if (seen.has(id))
+        continue;
+      made.anchor?.delete();
+      anchors.delete(id);
+    }
+  };
+  const syncPlanes = (frame, space) => {
+    planes.clear();
+    if (settings()?.planes !== true || frame.detectedPlanes === undefined)
+      return;
+    const found = [];
+    for (const plane of frame.detectedPlanes) {
+      const id = planeIds.get(plane) ?? `plane-${nextPlane++}`;
+      planeIds.set(plane, id);
+      planes.set(id, plane);
+      const pose = poseOf(frame.getPose(plane.planeSpace, space));
+      if (pose !== undefined)
+        found.push(planeOf(id, plane, pose));
+    }
+    const now = found.map(signatureOf).join(" ");
+    if (now === reported)
+      return;
+    reported = now;
+    input({ _tag: "Planes", planes: found });
+  };
+  const lendMesh = (id, mesh) => {
+    const lent = lentMeshes.get(id);
+    if (lent?.vertices === mesh.vertices && lent.indices === mesh.indices)
+      return;
+    if (lent !== undefined)
+      withdrawLent(lent);
+    const geometry = meshGeometryOf(mesh);
+    lentMeshes.set(id, {
+      vertices: mesh.vertices,
+      indices: mesh.indices,
+      geometry,
+      withdraw: lend(xrMeshGeometryId(id), geometry)
+    });
+  };
+  const syncMeshes = (frame, space) => {
+    meshes.clear();
+    if (settings()?.meshes === true && frame.detectedMeshes !== undefined) {
+      const found = [];
+      for (const mesh of frame.detectedMeshes) {
+        const id = meshIds.get(mesh) ?? `mesh-${nextMesh++}`;
+        meshIds.set(mesh, id);
+        meshes.set(id, mesh);
+        lendMesh(id, mesh);
+        const pose = poseOf(frame.getPose(mesh.meshSpace, space));
+        if (pose !== undefined) {
+          angles.setFromQuaternion(turn2.fromArray([...pose.quaternion]));
+          found.push({
+            id,
+            label: mesh.semanticLabel ?? "",
+            position: pose.position,
+            rotation: [angles.x, angles.y, angles.z]
+          });
+        }
+      }
+      const now = found.map(meshSignatureOf).join(" ");
+      if (now !== reportedMeshes) {
+        reportedMeshes = now;
+        input({ _tag: "Meshes", meshes: found });
+      }
+    }
+    for (const [id, lent] of lentMeshes) {
+      if (meshes.has(id))
+        continue;
+      withdrawLent(lent);
+      lentMeshes.delete(id);
+    }
+  };
+  const sourceOf = (hand, tracked) => {
+    for (const source of session.inputSources) {
+      if (source.handedness === hand && source.hand !== undefined === tracked)
+        return source;
+    }
+    return;
+  };
+  const locateIn = (frame, space) => (target) => {
+    switch (target._tag) {
+      case "Head":
+        return poseOf(frame.getViewerPose(space));
+      case "Joint": {
+        const joint = sourceOf(target.hand, true)?.hand?.get(target.joint);
+        return joint === undefined ? undefined : poseOf(frame.getJointPose?.(joint, space));
+      }
+      case "Controller": {
+        const source = sourceOf(target.hand, false);
+        const located = target.space === "grip" ? source?.gripSpace : source?.targetRaySpace;
+        return located === undefined ? undefined : poseOf(frame.getPose(located, space));
+      }
+      case "Anchor": {
+        const anchor = anchors.get(target.id)?.anchor;
+        return anchor === undefined ? undefined : poseOf(frame.getPose(anchor.anchorSpace, space));
+      }
+      case "Plane": {
+        const plane = planes.get(target.id);
+        return plane === undefined ? undefined : poseOf(frame.getPose(plane.planeSpace, space));
+      }
+      case "Mesh": {
+        const mesh = meshes.get(target.id);
+        return mesh === undefined ? undefined : poseOf(frame.getPose(mesh.meshSpace, space));
+      }
+    }
+  };
+  return {
+    frame: (frame, space) => {
+      syncAnchors(frame, space);
+      syncPlanes(frame, space);
+      syncMeshes(frame, space);
+      follow(locateIn(frame, space));
+    },
+    stop: () => {
+      for (const made of anchors.values())
+        made.anchor?.delete();
+      anchors.clear();
+      planes.clear();
+      meshes.clear();
+      for (const lent of lentMeshes.values())
+        withdrawLent(lent);
+      lentMeshes.clear();
+      follow(() => {
+        return;
+      });
+    }
+  };
+};
+
+// src/dom/xr.ts
+var sessionInit = (settings, mode = "immersive-vr", overlay) => ({
+  requiredFeatures: [settings.referenceSpace],
+  optionalFeatures: [
+    ...["local-floor", "bounded-floor", "hand-tracking", "anchors"].filter((feature) => feature !== settings.referenceSpace),
+    ...settings.planes ? ["plane-detection"] : [],
+    ...settings.meshes ? ["mesh-detection"] : [],
+    ...settings.domOverlay && overlay !== undefined ? ["dom-overlay"] : [],
+    ...mode === "immersive-ar" && settings.hitTest ? ["hit-test"] : []
+  ],
+  ...settings.domOverlay && overlay !== undefined ? { domOverlay: { root: overlay } } : {}
+});
+var originOffset = (settings) => {
+  const [x, y, z] = settings.origin;
+  const half = -settings.heading / 2;
+  const cos = Math.cos(-settings.heading);
+  const sin = Math.sin(-settings.heading);
+  return new XRRigidTransform({ x: -x * cos - z * sin, y: -y, z: x * sin - z * cos }, { x: 0, y: Math.sin(half), z: 0, w: Math.cos(half) });
+};
+var listenForSelects = (session, space, inputs, input) => {
+  const forward = (tag) => (event) => {
+    const reference = space();
+    const pose = reference === null ? undefined : event.frame.getPose(event.inputSource.targetRaySpace, reference);
+    if (pose !== undefined && pose !== null) {
+      input({ _tag: tag, source: inputs.idOf(event.inputSource), ray: rayOf(pose) });
+    }
+    if (tag === "SelectEnd")
+      inputs.selected(event.inputSource);
+  };
+  const started = forward("SelectStart");
+  const ended = forward("SelectEnd");
+  session.addEventListener("selectstart", started);
+  session.addEventListener("selectend", ended);
+  return () => {
+    session.removeEventListener("selectstart", started);
+    session.removeEventListener("selectend", ended);
+  };
+};
+var present = async (renderer, session, settings, presented, ended) => {
+  const { scene, draw, input } = presented;
+  const { xr } = renderer;
+  xr.enabled = true;
+  xr.setReferenceSpaceType(settings.referenceSpace);
+  xr.setFramebufferScaleFactor(settings.framebufferScale);
+  let inputs;
+  const spaces = trackSpaces(session, () => current, presented.follow, input, presented.lend);
+  let current = settings;
+  let glider = startGlider({ origin: settings.origin, heading: settings.heading });
+  let lastTime;
+  let base = null;
+  const place = (pose) => {
+    if (base !== null)
+      xr.setReferenceSpace(base.getOffsetReferenceSpace(originOffset(pose)));
+  };
+  const glideStep = (time, frame, space) => {
+    const seconds = Math.min(0.1, Math.max(0, (time - (lastTime ?? time)) / 1000));
+    lastTime = time;
+    if (current.glide === null || inputs === undefined)
+      return;
+    const head = frame.getViewerPose(space);
+    const facing = floorFacing(head?.transform.orientation ?? { x: 0, y: 0, z: 0, w: 1 });
+    const { left, right } = inputs.sticks();
+    const next = glideFrame(glider, current.glide, { move: left, turn: right }, facing, seconds);
+    if (next.glider.pose !== glider.pose)
+      place(next.glider.pose);
+    glider = next.glider;
+    if (next.stopped !== undefined)
+      input({ _tag: "Moved", ...next.stopped });
+  };
+  function sessionFrame(time, frame) {
+    if (!xr.isPresenting)
+      return;
+    const space = xr.getReferenceSpace();
+    if (frame !== undefined && space !== null) {
+      inputs?.frame(frame, space);
+      glideStep(time, frame, space);
+      spaces.frame(frame, xr.getReferenceSpace() ?? space);
+    }
+    draw();
+  }
+  renderer.setXrLoop(sessionFrame);
+  await xr.setSession(session);
+  base = xr.getReferenceSpace();
+  place(glider.pose);
+  const shown = new Group2;
+  shown.name = "xr-inputs";
+  scene.add(shown);
+  const tracked = trackInputs(session, shown, () => current, input);
+  inputs = tracked;
+  const stopSelects = listenForSelects(session, () => xr.getReferenceSpace(), tracked, input);
+  session.addEventListener("end", () => {
+    stopSelects();
+    tracked.stop();
+    spaces.stop();
+    shown.removeFromParent();
+    renderer.setXrLoop(null);
+    xr.enabled = false;
+    ended();
+  }, { once: true });
+  return {
+    session,
+    update: (next) => {
+      const moved = next.origin.some((value, i) => value !== current.origin[i]) || next.heading !== current.heading;
+      current = next;
+      if (!moved)
+        return;
+      glider = startGlider({ origin: next.origin, heading: next.heading });
+      place(glider.pose);
+    }
+  };
+};
+
+// src/dom/xrHub.ts
+var createXrHub = (system) => {
+  const targets = new Set;
+  let current;
+  const presentable = () => {
+    for (const target of targets) {
+      const settings = target.settings();
+      if (settings !== null)
+        return { target, settings };
+    }
+    return;
+  };
+  const enter = async (mode) => {
+    if (current !== undefined)
+      return;
+    const xr = system();
+    if (xr === undefined)
+      throw new Error("WebXR is not available in this browser");
+    const chosen = presentable();
+    if (chosen === undefined)
+      throw new Error("no mounted scene describes xr");
+    const renderer = presentableRendererOf(chosen.target.canvas);
+    if (renderer === undefined)
+      throw new Error("the scene is not drawn by a three.js renderer");
+    const session = await xr.requestSession(mode, sessionInit(chosen.settings, mode, chosen.target.element));
+    const { target } = chosen;
+    const draw = () => {
+      const settings = target.settings();
+      if (settings !== null)
+        current?.presentation.update(settings);
+      target.draw();
+    };
+    const ended = () => {
+      current = undefined;
+      target.presenting(null);
+    };
+    const presentation = await present(renderer, session, chosen.settings, {
+      scene: target.scene,
+      draw,
+      follow: target.follow,
+      lend: target.lend,
+      input: target.input
+    }, ended);
+    current = { target, presentation };
+    target.presenting(mode);
+  };
+  return {
+    register: (target) => {
+      targets.add(target);
+      return () => {
+        targets.delete(target);
+        if (current?.target === target)
+          current.presentation.session.end();
+      };
+    },
+    supported: async (mode) => await system()?.isSessionSupported(mode) ?? false,
+    enter,
+    exit: async () => {
+      await current?.presentation.session.end();
+    }
+  };
+};
+
+// src/environment.ts
+var makeEnvironment = (host, options = {}) => {
+  const store = createResourceStore();
+  const assets = makeAssets(store);
+  const xrHub = createXrHub(() => host.navigator?.xr);
+  return {
+    host,
+    store,
+    frames: animationFrameScheduler(host),
+    renderer: options.renderer ?? ((canvas) => webglRendererFactory(canvas)),
+    pixelRatio: options.pixelRatio ?? defaultPixelRatio,
+    behaviours: options.behaviours ?? {},
+    physics: Promise.resolve(options.physics),
+    labels: options.labels,
+    assets,
+    xr: makeXr(xrHub),
+    xrHub,
+    dispose: () => {
+      assets.dispose();
+      store.dispose();
+    }
+  };
+};
+// src/mount.ts
+import {
+  createGatedFrames,
+  FrameSource,
+  ResourceRegistry,
+  SceneRuntime,
+  SceneSchema as SceneSchema2
+} from "@opsydyn/effect-three";
+import { Data as Data3, Effect as Effect3, Option, Queue, Schema as Schema2, Stream } from "effect";
+import { Mount } from "foldkit";
+
+// src/dom/canvas.ts
+var appendCanvas = (host) => {
+  const canvas = host.ownerDocument.createElement("canvas");
+  canvas.style.display = "block";
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.style.touchAction = "none";
+  host.append(canvas);
+  return canvas;
+};
+var dispatchSceneEvent = (element, event) => {
+  element.dispatchEvent(new CustomEvent(domEventName[event._tag], { detail: event }));
+};
+var dispatchSceneError = (element, error) => {
+  element.dispatchEvent(new CustomEvent("scene-error", { detail: { error } }));
+};
+var canvasIn = (host) => () => appendCanvas(host);
+var removal = (node) => () => node.remove();
+var sceneEventDispatch = (element, live) => (event) => () => {
+  if (live.isOpen())
+    dispatchSceneEvent(element, event);
+};
+var sceneErrorDispatch = (element) => (error) => () => dispatchSceneError(element, error);
+var reconciledDispatch = (element, store) => (ops) => () => {
+  if (ops.length === 0)
+    return;
+  element.dispatchEvent(new CustomEvent("scene-reconciled", { detail: summarise(ops, store.stats()) }));
+};
+
+// src/dom/latch.ts
+var createLatch = (open) => {
+  let current = open;
+  return {
+    isOpen: () => current,
+    set: (next) => {
+      current = next;
+    }
+  };
+};
+var nothing = [];
+var routedWhileOpen = (latch, route) => (value) => {
+  if (!latch.isOpen())
+    return nothing;
+  return route(value);
+};
+var applying = (f, value) => () => f(value);
+
+// src/dom/overlays.ts
+var overlayData = {
+  key: "effect-three-overlay",
+  attribute: "data-effect-three-overlay"
+};
+var transformOf2 = (placement) => `translate3d(${placement.x}px,${placement.y}px,0) scale(${placement.scale})${placement.center ? " translate(-50%,-50%)" : ""}`;
+var write = (element, placement) => {
+  const { style } = element;
+  const transform = transformOf2(placement);
+  if (style.transform !== transform)
+    style.transform = transform;
+  const zIndex = String(placement.zIndex);
+  if (style.zIndex !== zIndex)
+    style.zIndex = zIndex;
+  const visibility = placement.visible ? "visible" : "hidden";
+  if (style.visibility !== visibility)
+    style.visibility = visibility;
+};
+var createOverlayWriter = (host) => {
+  let latest = [];
+  const rewrite = () => {
+    for (const placement of latest) {
+      const element = host.querySelector(`[${overlayData.attribute}="${CSS.escape(placement.key)}"]`);
+      if (element instanceof HTMLElement)
+        write(element, placement);
+    }
+  };
+  return {
+    place: (placements) => {
+      latest = placements;
+      rewrite();
+    },
+    rewrite
+  };
+};
+var containOverlays = (host) => () => {
+  if (!(host instanceof HTMLElement))
+    return;
+  if (getComputedStyle(host).position === "static")
+    host.style.position = "relative";
+};
+
+// src/dom/property.ts
+var interceptProperty = (element, key, onSet) => {
+  const initial = Reflect.get(element, key);
+  let current = initial;
+  Object.defineProperty(element, key, {
+    configurable: true,
+    enumerable: true,
+    get: () => current,
+    set: (value) => {
+      current = value;
+      onSet(value);
+    }
+  });
+  return {
+    initial,
+    restore: () => {
+      Object.defineProperty(element, key, {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: current
+      });
+    }
+  };
+};
+
+// src/dom/typedScenes.ts
+var typed = new WeakMap;
+var markTyped = (scene) => {
+  typed.set(scene, scene);
+  return scene;
+};
+var typedScene = (value) => typeof value === "object" && value !== null ? typed.get(value) : undefined;
+
+// src/dom/updates.ts
+var afterUpdate = (report, steps) => (value) => () => {
+  report(value)();
+  for (const step of steps)
+    step();
+};
+
+// src/dom/xrTarget.ts
+var createFrameGate = (frames) => {
+  let visible = true;
+  let presenting = false;
+  const apply = () => frames.setOpen(visible && !presenting);
+  return {
+    setVisible: (next) => {
+      visible = next;
+      apply();
+    },
+    setPresenting: (next) => {
+      presenting = next;
+      apply();
+    }
+  };
+};
+var dispatchXrSession = (element, live, mode) => {
+  if (live.isOpen())
+    element.dispatchEvent(new CustomEvent("scene-xr", { detail: { mode } }));
+};
+var xrTarget = (scene) => ({
+  canvas: scene.canvas,
+  element: scene.element,
+  follow: scene.follow,
+  lend: scene.lend,
+  settings: scene.settings,
+  draw: scene.draw,
+  scene: scene.scene,
+  input: (input) => {
+    if (scene.live.isOpen())
+      scene.input(input);
+  },
+  presenting: (mode) => {
+    scene.gate.setPresenting(mode !== null);
+    if (mode === null)
+      scene.draw();
+    dispatchXrSession(scene.element, scene.live, mode);
+  }
+});
+
+// src/mount.ts
+var decodeUnknownScene = Schema2.decodeUnknownEffect(SceneSchema2.SceneDescription);
+var decodeScene = (value) => Option.fromNullishOr(typedScene(value)).pipe(Option.match({ onNone: () => decodeUnknownScene(value), onSome: Effect3.succeed }));
+var isLive = Schema2.is(Schema2.Literal("Live"));
+var acquireCanvas = (element) => {
+  const create = Effect3.sync(canvasIn(element));
+  return Effect3.acquireRelease(create, (canvas) => Effect3.sync(removal(canvas)));
+};
+var acquireSceneUpdates = () => {
+  const create = Queue.sliding(1);
+  return Effect3.acquireRelease(create, Queue.shutdown);
+};
+var interception = (element, updates) => () => interceptProperty(element, "scene", (value) => Queue.offerUnsafe(updates, value));
+var acquireInterception = (element, updates) => {
+  const intercept = Effect3.sync(interception(element, updates));
+  return Effect3.acquireRelease(intercept, (intercepted) => Effect3.sync(intercepted.restore));
+};
+var pointerListening = (canvas, onInput, claimsGestures) => () => listenForPointer(canvas, onInput, claimsGestures);
+var acquirePointer = (canvas, mounted) => {
+  const listen = Effect3.sync(pointerListening(canvas, routedWhileOpen(mounted.live, mounted.handle.pointer), claimsGestures(mounted.handle.graph)));
+  return Effect3.acquireRelease(listen, Effect3.sync);
+};
+var xrRegistration = (mounted) => () => mounted.environment.xrHub.register(xrTarget({
+  element: mounted.element,
+  canvas: mounted.canvas,
+  live: mounted.live,
+  gate: mounted.gate,
+  settings: mounted.handle.graph.xr,
+  draw: mounted.handle.drawNow,
+  scene: mounted.handle.graph.scene,
+  follow: mounted.handle.graph.follow,
+  lend: mounted.handle.graph.store.lendGeometry,
+  input: mounted.handle.xrInput
+}));
+var acquireXrTarget = (mounted) => {
+  const register = Effect3.sync(xrRegistration(mounted));
+  return Effect3.acquireRelease(register, Effect3.sync);
+};
+var connectObserver = (observe) => (queue) => {
+  const connect = Effect3.sync(applying(observe, (value) => Queue.offerUnsafe(queue, value)));
+  return Effect3.acquireRelease(connect, Effect3.sync);
+};
+var observed = (observe) => Stream.callback(connectObserver(observe));
+var applyUpdate = (mounted) => (value) => {
+  const reportError = sceneErrorDispatch(mounted.element);
+  const reportReconciled = afterUpdate(reconciledDispatch(mounted.element, mounted.environment.store), [touchActionSync(mounted.canvas, mounted.handle.graph), mounted.overlays.rewrite]);
+  const decoded = decodeScene(value);
+  const applied = decoded.pipe(Effect3.flatMap(mounted.handle.update), Effect3.flatMap((ops) => Effect3.sync(reportReconciled(ops))));
+  return applied.pipe(Effect3.catchTags({
+    SchemaError: (error) => Effect3.sync(reportError({ _tag: "MalformedScene", issue: error.message })),
+    InvalidScene: ({ error }) => Effect3.sync(reportError(error))
+  }));
+};
+var resize = (mounted) => () => mounted.handle.resize(measureViewport(mounted.element, mounted.environment.host.devicePixelRatio, mounted.environment.pixelRatio));
+var watchers = (mounted, updates, viewStateChanges) => {
+  const dispatchEvent = sceneEventDispatch(mounted.element, mounted.live);
+  const sizes = observed((emit) => observeSize(mounted.element, emit));
+  const ratios = observed((emit) => observePixelRatio(mounted.environment.host, emit));
+  const visibility = observed((emit) => observeVisibility(mounted.element, emit));
+  const reducedMotion = observed((emit) => observeReducedMotion(mounted.environment.host, emit));
+  return [
+    Stream.runForEach(Stream.fromQueue(updates), applyUpdate(mounted)),
+    Stream.runForEach(mounted.handle.events, (event) => Effect3.sync(dispatchEvent(event))),
+    Stream.runForEach(viewStateChanges, (state) => Effect3.sync(applying(mounted.live.set, isLive(state)))),
+    Stream.runForEach(sizes, resize(mounted)),
+    Stream.runForEach(ratios, resize(mounted)),
+    Stream.runForEach(visibility, (visible) => Effect3.sync(applying(mounted.gate.setVisible, visible))),
+    Stream.runForEach(reducedMotion, (reduced) => mounted.handle.setAnimating(!reduced))
+  ];
+};
+
+class PhysicsUnavailable extends Data3.TaggedError("PhysicsUnavailable") {
+}
+var sceneRuntimeFor = (environment, element, canvas, overlays, physics) => (scene) => {
+  const frames = createGatedFrames(environment.frames);
+  const started = SceneRuntime.make({
+    scene,
+    renderer: environment.renderer(canvas),
+    behaviours: environment.behaviours,
+    physics,
+    labels: environment.labels,
+    placeOverlays: overlays.place,
+    viewport: measureViewport(element, environment.host.devicePixelRatio, environment.pixelRatio)
+  }).pipe(Effect3.provideService(FrameSource.FrameSource, FrameSource.fromScheduler(frames)), Effect3.provideService(ResourceRegistry.ResourceRegistry, { store: environment.store }));
+  return Effect3.map(started, (handle) => ({ handle, frames }));
+};
+function* runScene(environment, element, viewStateChanges) {
+  const canvas = yield* acquireCanvas(element);
+  const updates = yield* acquireSceneUpdates();
+  const intercepted = yield* acquireInterception(element, updates);
+  const initial = yield* decodeScene(intercepted.initial);
+  const overlays = createOverlayWriter(element);
+  yield* Effect3.sync(containOverlays(element));
+  const physics = yield* Effect3.tryPromise({
+    try: () => environment.physics,
+    catch: (cause) => new PhysicsUnavailable({ cause })
+  });
+  const { handle, frames } = yield* sceneRuntimeFor(environment, element, canvas, overlays, physics)(initial);
+  const mounted = {
+    environment,
+    element,
+    canvas,
+    overlays,
+    handle,
+    frames,
+    gate: createFrameGate(frames),
+    live: createLatch(true)
+  };
+  yield* acquirePointer(canvas, mounted);
+  yield* acquireXrTarget(mounted);
+  yield* Effect3.sync(touchActionSync(canvas, handle.graph));
+  yield* Effect3.sync(reconciledDispatch(element, environment.store)(handle.startupOps));
+  const forks = watchers(mounted, updates, viewStateChanges).map((watcher) => Effect3.forkScoped(watcher));
+  yield* Effect3.all(forks, { concurrency: "unbounded" });
+  return SceneLifecycle.StartedScene();
+}
+var failure = (reason) => SceneLifecycle.FailedScene({ reason });
+var recoverStart = {
+  SchemaError: (error) => Effect3.succeed(failure(`malformed scene: ${error.message}`)),
+  InvalidScene: ({ error }) => Effect3.succeed(failure(`invalid scene: ${error._tag}`)),
+  RendererUnavailable: () => Effect3.succeed(failure("renderer unavailable")),
+  PhysicsUnavailable: () => Effect3.succeed(failure("physics unavailable"))
+};
+var mountScene = (environment) => ({ element, viewStateChanges }) => {
+  const scene = Effect3.gen(() => runScene(environment, element, viewStateChanges));
+  return scene.pipe(Effect3.catchTags(recoverStart));
+};
+var makeSceneMount = (environment) => Mount.define("EffectThreeScene", {
+  messages: [SceneLifecycle.StartedScene, SceneLifecycle.FailedScene],
+  execute: mountScene(environment)
+});
+// src/view.ts
+import { Array as Arr, Option as Option2 } from "effect";
+import { Mount as Mount2 } from "foldkit";
+
+// src/overlayView.ts
+var withOverlays = (scene, overlays) => overlays.length === 0 ? scene : { ...scene, overlays: [...scene.overlays, ...overlays.map((view) => view.overlay)] };
+var layerStyle = {
+  position: "absolute",
+  inset: "0",
+  overflow: "hidden",
+  pointerEvents: "none",
+  isolation: "isolate"
+};
+var overlayLayer = (h, overlays) => overlays.length === 0 ? [] : [
+  h.div([h.Style(layerStyle)], overlays.map(({ overlay, content, pointerEvents = "auto" }) => h.keyed("div")(overlay.key, [
+    h.DataAttribute(overlayData.key, overlay.key),
+    h.Style({
+      position: "absolute",
+      top: "0",
+      left: "0",
+      transformOrigin: "0 0",
+      visibility: "hidden",
+      pointerEvents
+    })
+  ], [content])))
+];
+
+// src/view.ts
+var given = Option2.fromNullishOr;
+var view = (config, h) => {
+  const element = sceneElement.withMessage(h);
+  const optional = Arr.getSomes([
+    Option2.map(given(config.onClick), element.OnSceneClick),
+    Option2.map(given(config.onDoubleClick), element.OnSceneDoubleClick),
+    Option2.map(given(config.onContextMenu), element.OnSceneContextMenu),
+    Option2.map(given(config.onPointerDown), element.OnScenePointerDown),
+    Option2.map(given(config.onPointerUp), element.OnScenePointerUp),
+    Option2.map(given(config.onPointerEnter), element.OnScenePointerEnter),
+    Option2.map(given(config.onPointerMove), element.OnScenePointerMove),
+    Option2.map(given(config.onPointerLeave), element.OnScenePointerLeave),
+    Option2.map(given(config.onPointerMissed), element.OnScenePointerMissed),
+    Option2.map(given(config.onWheel), element.OnSceneWheel),
+    Option2.map(given(config.onDrag), element.OnSceneDrag),
+    Option2.map(given(config.onDragEnd), element.OnSceneDragEnd),
+    Option2.map(given(config.onCollision), element.OnSceneCollision),
+    Option2.map(given(config.onContactForce), element.OnSceneContactForce),
+    Option2.map(given(config.onMeasured), element.OnSceneMeasured),
+    Option2.map(given(config.onLabelMeasured), element.OnSceneLabelMeasured),
+    Option2.map(given(config.onXRSession), element.OnSceneXr),
+    Option2.map(given(config.onXRStick), element.OnSceneXrStick),
+    Option2.map(given(config.onXRButton), element.OnSceneXrButton),
+    Option2.map(given(config.onXRSurface), element.OnSceneXrSurface),
+    Option2.map(given(config.onXRMoved), element.OnSceneXrMoved),
+    Option2.map(given(config.onXRPlanes), element.OnSceneXrPlanes),
+    Option2.map(given(config.onXRMeshes), element.OnSceneXrMeshes),
+    Option2.map(given(config.onAutoRotated), element.OnSceneAutoRotated),
+    Option2.map(given(config.onGesture), (toMessage) => element.OnSceneGesture((detail) => toMessage(detail.gesture))),
+    Option2.map(given(config.onPerformanceChange), element.OnScenePerformance),
+    Option2.map(given(config.onError), element.OnSceneError),
+    Option2.map(given(config.onReconciled), element.OnSceneReconciled),
+    Option2.map(given(config.className), h.Class)
+  ]);
+  const lifecycle = Mount2.mapMessage(config.mount(), config.onLifecycle);
+  const overlays = config.overlays ?? [];
+  const scene = markTyped(withOverlays(config.scene, overlays));
+  return element([element.Scene(scene), h.OnMount(lifecycle), ...optional], overlayLayer(h, overlays));
+};
+export {
+  AssetLoadError,
+  ReconciledDetail,
+  SceneError,
+  SceneLifecycle,
+  XrSessionDetail,
+  XrUnavailable,
+  animationFrameScheduler,
+  capturesPointer,
+  claimsContextMenu,
+  defaultPixelRatio,
+  domEventName,
+  makeAssets,
+  makeEnvironment,
+  makeSceneMount,
+  resolvePixelRatio,
+  sceneElement,
+  summarise,
+  toNdc,
+  toPointerInput,
+  view,
+  webglRendererFactory,
+  webgpuRendererFactory
+};
+
+//# debugId=4118984BABDF337D64756E2164756E21
+//# sourceMappingURL=index.js.map