@opsydyn/effect-three-foldkit 0.3.0 → 0.6.4

package/dist/index.js

@@ -1,7 +1,91 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+
+// src/boxSelect.ts
+var exports_boxSelect = {};
+__export(exports_boxSelect, {
+  Box: () => Box,
+  Message: () => Message,
+  Model: () => Model,
+  OutMessage: () => OutMessage,
+  claims: () => claims,
+  dragOf: () => dragOf,
+  drawing: () => drawing2,
+  init: () => init,
+  inside: () => inside,
+  rectangle: () => rectangle,
+  update: () => update
+});
+
+// src/measuringTape.ts
+var exports_measuringTape = {};
+__export(exports_measuringTape, {
+  Message: () => Message2,
+  Model: () => Model2,
+  OutMessage: () => OutMessage2,
+  init: () => init2,
+  label: () => label,
+  length: () => length,
+  nodes: () => nodes,
+  update: () => update2
+});
+
+// src/pivotControls.ts
+var exports_pivotControls = {};
+__export(exports_pivotControls, {
+  Message: () => Message3,
+  Model: () => Model3,
+  OutMessage: () => OutMessage3,
+  handleOf: () => handleOf,
+  held: () => held,
+  init: () => init3,
+  nodes: () => nodes2,
+  update: () => update3
+});
+
+// src/transformGizmo.ts
+var exports_transformGizmo = {};
+__export(exports_transformGizmo, {
+  Message: () => Message4,
+  Model: () => Model4,
+  OutMessage: () => OutMessage4,
+  handleOf: () => handleOf2,
+  held: () => held2,
+  init: () => init4,
+  nodes: () => nodes3,
+  update: () => update4
+});
+
+// src/viewportGizmo.ts
+var exports_viewportGizmo = {};
+__export(exports_viewportGizmo, {
+  Message: () => Message5,
+  Model: () => Model5,
+  OutMessage: () => OutMessage5,
+  axisOf: () => axisOf,
+  hud: () => hud,
+  init: () => init5,
+  nodes: () => nodes4,
+  update: () => update5
+});
+
 // src/assets.ts
 import { Data, Effect } from "effect";
 import {
   EquirectangularReflectionMapping,
+  LoadingManager,
   SRGBColorSpace,
   TextureLoader
 } from "three";
@@ -41,6 +125,48 @@ var namesIn = (root) => {
 // src/assets.ts
 class AssetLoadError extends Data.TaggedError("AssetLoadError") {
 }
+var nothing = [];
+var plain = (release) => ({ parts: nothing, clips: nothing, release });
+var lentTexture = (store, id, texture) => {
+  texture.colorSpace = SRGBColorSpace;
+  const withdraw = store.lendTexture(id, texture);
+  return plain(() => {
+    withdraw();
+    texture.dispose();
+  });
+};
+var lentModel = (store, id, gltf) => {
+  gltf.scene.animations = gltf.animations;
+  const withdraw = store.lend(id, gltf.scene);
+  return {
+    parts: namesIn(gltf.scene),
+    clips: gltf.animations.map((clip) => clip.name),
+    release: () => {
+      withdraw();
+      disposeModel(gltf.scene);
+    }
+  };
+};
+var lentEnvironment = (store, id, texture) => {
+  texture.mapping = EquirectangularReflectionMapping;
+  const withdraw = store.lendTexture(id, texture);
+  return plain(() => {
+    withdraw();
+    texture.dispose();
+  });
+};
+var lentFont = (store, id, font) => plain(store.lendFont(id, font));
+var loadAndLend = {
+  model: async (store, { id, url }, manager) => lentModel(store, id, await new GLTFLoader(manager).loadAsync(url)),
+  texture: async (store, { id, url }, manager) => lentTexture(store, id, await new TextureLoader(manager).loadAsync(url)),
+  environment: async (store, { id, url }, manager) => lentEnvironment(store, id, await new HDRLoader(manager).loadAsync(url)),
+  font: async (store, { id, url }, manager) => lentFont(store, id, await new FontLoader(manager).loadAsync(url))
+};
+var assetLoader = (store) => (asset, signal) => {
+  const manager = new LoadingManager;
+  signal.addEventListener("abort", () => manager.abort(), { once: true });
+  return loadAndLend[asset.kind](store, asset, manager);
+};
 var makeAssets = (store) => {
   const releases = new Map;
   const own = (id, release) => {
@@ -48,39 +174,21 @@ var makeAssets = (store) => {
     releases.set(id, release);
   };
   const lendTexture = (id) => (texture) => {
-    texture.colorSpace = SRGBColorSpace;
-    const withdraw = store.lendTexture(id, texture);
-    own(id, () => {
-      withdraw();
-      texture.dispose();
-    });
+    own(id, lentTexture(store, id, texture).release);
     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)
-    };
+    const lent = lentModel(store, id, gltf);
+    own(id, lent.release);
+    const info = { id, parts: lent.parts, clips: lent.clips };
     return info;
   };
   const lendEnvironment = (id) => (texture) => {
-    texture.mapping = EquirectangularReflectionMapping;
-    const withdraw = store.lendTexture(id, texture);
-    own(id, () => {
-      withdraw();
-      texture.dispose();
-    });
+    own(id, lentEnvironment(store, id, texture).release);
     return id;
   };
   const lendFont = (id) => (font) => {
-    own(id, store.lendFont(id, font));
+    own(id, lentFont(store, id, font).release);
     return id;
   };
   const releaseAll = () => {
@@ -162,6 +270,7 @@ var modifiersOf = (event) => ({
   meta: event.metaKey,
   alt: event.altKey
 });
+var deviceOf = (event) => event instanceof PointerEvent && (event.pointerType === "touch" || event.pointerType === "pen") ? event.pointerType : "mouse";
 var pointerIdOf = (event) => event instanceof PointerEvent ? event.pointerId : 0;
 var wheelScale = [1, 16, 100];
 var toPointerInput = (event, rect) => {
@@ -180,7 +289,8 @@ var toPointerInput = (event, rect) => {
         y,
         button: event.button,
         pointer,
-        modifiers: modifiersOf(event)
+        modifiers: modifiersOf(event),
+        device: deviceOf(event)
       };
     case "pointerup":
       return { _tag: "PointerUp", x, y, button: event.button, pointer };
@@ -556,6 +666,21 @@ var webglRendererFactory = (canvas, options = {}) => ({
         scissored = true;
         renderer.render(scene, camera);
       },
+      renderOver: (scene, camera) => {
+        if (renderer.xr.isPresenting)
+          return;
+        if (scissored) {
+          const { width, height } = renderer.getSize(drawingSize);
+          renderer.setScissorTest(false);
+          renderer.setViewport(0, 0, width, height);
+          scissored = false;
+        }
+        const autoClear = renderer.autoClear;
+        renderer.autoClear = false;
+        renderer.clearDepth();
+        renderer.render(scene, camera);
+        renderer.autoClear = autoClear;
+      },
       createTarget: (width, height) => createTarget(targets, width, height),
       createEnvironment: () => createRoom(renderer),
       configure: (settings) => {
@@ -783,6 +908,21 @@ var webgpuRendererFactory = (canvas, options = {}) => ({
         scissored = true;
         renderer.render(scene, camera);
       },
+      renderOver: (scene, camera) => {
+        if (renderer.xr.isPresenting)
+          return;
+        if (scissored) {
+          const { width, height } = renderer.getSize(drawingSize2);
+          renderer.setScissorTest(false);
+          renderer.setViewport(0, 0, width, height);
+          scissored = false;
+        }
+        const autoClear = renderer.autoClear;
+        renderer.autoClear = false;
+        renderer.clearDepth();
+        renderer.render(scene, camera);
+        renderer.autoClear = autoClear;
+      },
       createTarget: (width, height) => createTarget2(targets, width, height),
       createEnvironment: () => createRoom2(renderer),
       configure: (settings) => {
@@ -852,9 +992,11 @@ var sceneElement = CustomElement.define({
     "scene-drag": SceneSchema.DragDetail,
     "scene-drag-end": SceneSchema.DragDetail,
     "scene-gesture": SceneSchema.GestureDetail,
+    "scene-gesture-end": SceneSchema.GestureEndDetail,
     "scene-auto-rotated": SceneSchema.AutoRotatedDetail,
     "scene-collision": SceneSchema.CollisionDetail,
     "scene-contact-force": SceneSchema.ContactForceDetail,
+    "scene-physics-reached": SceneSchema.PhysicsReachedDetail,
     "scene-measured": SceneSchema.MeasuredDetail,
     "scene-label-measured": SceneSchema.LabelMeasuredDetail,
     "scene-xr": XrSessionDetail,
@@ -866,6 +1008,8 @@ var sceneElement = CustomElement.define({
     "scene-xr-meshes": SceneSchema.XrMeshesDetail,
     "scene-performance": SceneSchema.PerformanceDetail,
     "scene-error": Schema.Struct({ error: SceneError }),
+    "scene-asset-loaded": SceneSchema.AssetLoadedDetail,
+    "scene-asset-failed": SceneSchema.AssetFailedDetail,
     "scene-reconciled": ReconciledDetail
   }
 });
@@ -883,9 +1027,11 @@ var domEventName = {
   Drag: "scene-drag",
   DragEnd: "scene-drag-end",
   Gesture: "scene-gesture",
+  GestureEnd: "scene-gesture-end",
   AutoRotated: "scene-auto-rotated",
   Collision: "scene-collision",
   ContactForce: "scene-contact-force",
+  PhysicsReached: "scene-physics-reached",
   Measured: "scene-measured",
   LabelMeasured: "scene-label-measured",
   XrStick: "scene-xr-stick",
@@ -960,6 +1106,135 @@ import {
   createResourceStore
 } from "@opsydyn/effect-three";
 
+// src/assetRegistry.ts
+import { assetsEqual } from "@opsydyn/effect-three";
+var sameAsset = (a, b) => a.kind === b.kind && a.url === b.url && a.levels.length === b.levels.length && a.levels.every((level, i) => level === b.levels[i]);
+var urlsOf = (asset) => [...asset.levels, asset.url];
+var reasonOf = (asset, cause) => cause instanceof Error && cause.message !== "" ? `Could not load ${asset.url}: ${cause.message}` : `Could not load ${asset.url}`;
+var taken = (asset, holding) => ({
+  _tag: "Failed",
+  ...asset,
+  reason: `"${asset.id}" is already ${holding.url} for another scene`
+});
+var makeAssetRegistry = (load) => {
+  const entries = new Map;
+  const asking = new Map;
+  const tellAll = (entry, notice) => {
+    for (const holder of entry.holders)
+      asking.get(holder)?.notify(notice);
+  };
+  const loadedNotice = (entry, level, lent) => ({
+    _tag: "Loaded",
+    ...entry.asset,
+    level,
+    final: level === entry.asset.levels.length,
+    parts: lent.parts,
+    clips: lent.clips
+  });
+  const noticesOf = (entry) => [
+    ...entry.shown === undefined ? [] : [loadedNotice(entry, entry.shown.level, entry.shown.lent)],
+    ...entry.failure === undefined ? [] : [{ _tag: "Failed", ...entry.asset, reason: entry.failure }]
+  ];
+  const start = (asset) => {
+    const urls = urlsOf(asset);
+    const finest = urls.length - 1;
+    const entry = {
+      asset,
+      holders: new Set,
+      controllers: urls.map(() => new AbortController),
+      shown: undefined,
+      failure: undefined
+    };
+    entries.set(asset.id, entry);
+    function current(level) {
+      return entries.get(asset.id) === entry && entry.controllers[level]?.signal.aborted === false;
+    }
+    function loaded(level) {
+      return (lent) => {
+        if (!current(level) || entry.shown !== undefined && entry.shown.level >= level) {
+          lent.release();
+          return;
+        }
+        const before = entry.shown;
+        entry.shown = { level, lent };
+        before?.lent.release();
+        if (level === finest)
+          for (const coarser of entry.controllers.slice(0, level))
+            coarser.abort();
+        tellAll(entry, loadedNotice(entry, level, lent));
+      };
+    }
+    function failed(level) {
+      return (cause) => {
+        if (!current(level) || level !== finest)
+          return;
+        const reason = reasonOf({ ...asset, url: urls[level] ?? asset.url }, cause);
+        entry.failure = reason;
+        tellAll(entry, { _tag: "Failed", ...asset, reason });
+      };
+    }
+    urls.forEach((url, level) => {
+      const signal = entry.controllers[level]?.signal ?? AbortSignal.abort();
+      load({ ...asset, url }, signal).then(loaded(level), failed(level));
+    });
+    return entry;
+  };
+  const end = (entry) => {
+    entries.delete(entry.asset.id);
+    for (const controller of entry.controllers)
+      controller.abort();
+    entry.shown?.lent.release();
+  };
+  const letGo = (holder, id) => {
+    const entry = entries.get(id);
+    if (entry === undefined || !entry.holders.delete(holder) || entry.holders.size > 0)
+      return;
+    end(entry);
+    for (const [waiting, { assets }] of asking) {
+      if (assets.some((asset) => asset.id === id))
+        hold(waiting, assets);
+    }
+  };
+  const hold = (holder, assets) => {
+    for (const asset of assets) {
+      const entry = entries.get(asset.id) ?? start(asset);
+      if (!sameAsset(entry.asset, asset)) {
+        asking.get(holder)?.notify(taken(asset, entry.asset));
+        continue;
+      }
+      if (entry.holders.has(holder))
+        continue;
+      entry.holders.add(holder);
+      for (const notice of noticesOf(entry))
+        asking.get(holder)?.notify(notice);
+    }
+  };
+  const want = (holder, assets, notify) => {
+    const before = asking.get(holder);
+    asking.set(holder, { assets, notify });
+    if (before !== undefined && assetsEqual(before.assets, assets))
+      return;
+    for (const old of before?.assets ?? []) {
+      const still = assets.find((asset) => asset.id === old.id);
+      if (still === undefined || !sameAsset(still, old))
+        letGo(holder, old.id);
+    }
+    hold(holder, assets);
+  };
+  const release = (holder) => {
+    want(holder, [], () => {
+      return;
+    });
+    asking.delete(holder);
+  };
+  const dispose = () => {
+    asking.clear();
+    for (const entry of [...entries.values()])
+      end(entry);
+  };
+  return { want, release, dispose };
+};
+
 // src/dom/xr.ts
 import { Group as Group2 } from "three";
 
@@ -1614,6 +1889,7 @@ var createXrHub = (system) => {
 var makeEnvironment = (host, options = {}) => {
   const store = createResourceStore();
   const assets = makeAssets(store);
+  const assetRegistry = makeAssetRegistry(assetLoader(store));
   const xrHub = createXrHub(() => host.navigator?.xr);
   return {
     host,
@@ -1625,14 +1901,62 @@ var makeEnvironment = (host, options = {}) => {
     physics: Promise.resolve(options.physics),
     labels: options.labels,
     assets,
+    assetRegistry,
     xr: makeXr(xrHub),
     xrHub,
     dispose: () => {
+      assetRegistry.dispose();
       assets.dispose();
       store.dispose();
     }
   };
 };
+// src/inspector.ts
+var axisNames = ["x", "y", "z"];
+var nameOf = (field) => field.path.filter((part) => typeof part === "string").join(" ") || field.label;
+var hex = (colour) => `#${colour.toString(16).padStart(6, "0")}`;
+var numberInput = (h, label, value, report) => h.input([
+  h.Type("number"),
+  h.Step("any"),
+  h.Value(String(value)),
+  h.AriaLabel(label),
+  h.OnChange(report)
+]);
+var controlOf = (h, field, onEdit) => {
+  const name = nameOf(field);
+  switch (field._tag) {
+    case "Number":
+      return numberInput(h, name, field.value, (raw) => onEdit(field.path, Number(raw)));
+    case "Text":
+      return h.input([
+        h.Type("text"),
+        h.Value(field.value),
+        h.AriaLabel(name),
+        h.OnChange((raw) => onEdit(field.path, raw))
+      ]);
+    case "Toggle":
+      return h.input([
+        h.Type("checkbox"),
+        h.Checked(field.value),
+        h.AriaLabel(name),
+        h.OnClick(onEdit(field.path, !field.value))
+      ]);
+    case "Choice":
+      return h.select([h.AriaLabel(name), h.OnChange((raw) => onEdit(field.path, raw))], field.options.map((option) => h.option([h.Value(option), h.Selected(option === field.value)], [option])));
+    case "Colour":
+      return h.input([
+        h.Type("color"),
+        h.Value(hex(field.value)),
+        h.AriaLabel(name),
+        h.OnInput((raw) => onEdit(field.path, Number.parseInt(raw.slice(1), 16)))
+      ]);
+    case "Vector":
+      return h.span([h.Class("e3-inspector-vector")], field.value.map((component, index) => numberInput(h, `${name} ${axisNames[index] ?? index}`, component, (raw) => onEdit([...field.path, index], Number(raw)))));
+    case "Fixed":
+      return h.span([h.Class("e3-inspector-fixed")], [field.text]);
+  }
+};
+var inspectorView = (h, fields, onEdit) => h.div([h.Class("e3-inspector")], fields.map((field) => h.keyed("label")(field.path.join("."), [h.Class("e3-inspector-row")], [h.span([h.Class("e3-inspector-name")], [nameOf(field)]), controlOf(h, field, onEdit)])));
 // src/mount.ts
 import {
   createGatedFrames,
@@ -1660,6 +1984,11 @@ var dispatchSceneEvent = (element, event) => {
 var dispatchSceneError = (element, error) => {
   element.dispatchEvent(new CustomEvent("scene-error", { detail: { error } }));
 };
+var dispatchAssetNotice = (element, notice) => {
+  const { _tag, ...detail } = notice;
+  const name = _tag === "Loaded" ? "scene-asset-loaded" : "scene-asset-failed";
+  element.dispatchEvent(new CustomEvent(name, { detail }));
+};
 var canvasIn = (host) => () => appendCanvas(host);
 var removal = (node) => () => node.remove();
 var sceneEventDispatch = (element, live) => (event) => () => {
@@ -1683,10 +2012,10 @@ var createLatch = (open) => {
     }
   };
 };
-var nothing = [];
+var nothing2 = [];
 var routedWhileOpen = (latch, route) => (value) => {
   if (!latch.isOpen())
-    return nothing;
+    return nothing2;
   return route(value);
 };
 var applying = (f, value) => () => f(value);
@@ -1857,11 +2186,21 @@ var connectObserver = (observe) => (queue) => {
   return Effect3.acquireRelease(connect, Effect3.sync);
 };
 var observed = (observe) => Stream.callback(connectObserver(observe));
+var asking = (mounted, scene) => () => mounted.environment.assetRegistry.want(mounted.element, scene.assets, (notice) => dispatchAssetNotice(mounted.element, notice));
+var lettingGo = (mounted) => () => mounted.environment.assetRegistry.release(mounted.element);
+var acquireAssets = (mounted, initial) => {
+  const ask = Effect3.sync(asking(mounted, initial));
+  return Effect3.acquireRelease(ask, () => Effect3.sync(lettingGo(mounted)));
+};
+var updated = (mounted) => (scene) => {
+  const ask = Effect3.sync(asking(mounted, scene));
+  return Effect3.tap(mounted.handle.update(scene), () => ask);
+};
 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))));
+  const applied = decoded.pipe(Effect3.flatMap(updated(mounted)), 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))
@@ -1922,6 +2261,7 @@ function* runScene(environment, element, viewStateChanges) {
     gate: createFrameGate(frames),
     live: createLatch(true)
   };
+  yield* acquireAssets(mounted, initial);
   yield* acquirePointer(canvas, mounted);
   yield* acquireXrTarget(mounted);
   yield* Effect3.sync(touchActionSync(canvas, handle.graph));
@@ -1945,8 +2285,343 @@ var makeSceneMount = (environment) => Mount.define("EffectThreeScene", {
   messages: [SceneLifecycle.StartedScene, SceneLifecycle.FailedScene],
   execute: mountScene(environment)
 });
+// src/boxSelect.ts
+import { boxSelect, SceneSchema as SceneSchema3 } from "@opsydyn/effect-three";
+import { Option as Option2, Schema as Schema3 } from "effect";
+import { defineMessageUnion as defineMessageUnion2 } from "foldkit/message";
+var Corner = Schema3.Struct({ x: Schema3.Finite, y: Schema3.Finite });
+var Selectable = Schema3.Struct({ key: Schema3.String, at: SceneSchema3.Vec3 });
+var Box = Schema3.Struct({
+  from: Corner,
+  to: Corner,
+  width: Schema3.Finite,
+  height: Schema3.Finite
+});
+var Model = Schema3.Struct({ box: Schema3.Option(Box) });
+var Message = defineMessageUnion2({
+  Dragged: {
+    x: Schema3.Finite,
+    y: Schema3.Finite,
+    deltaX: Schema3.Finite,
+    deltaY: Schema3.Finite,
+    width: Schema3.Finite,
+    height: Schema3.Finite
+  },
+  Ended: { camera: SceneSchema3.Camera, selectable: Schema3.Array(Selectable) },
+  Cancelled: {}
+});
+var OutMessage = defineMessageUnion2({
+  Selected: { keys: Schema3.Array(Schema3.String) }
+});
+var init = () => ({ box: Option2.none() });
+var moved = (box, deltaX, deltaY) => ({
+  ...box,
+  to: { x: box.to.x + deltaX * 2 / box.width, y: box.to.y - deltaY * 2 / box.height }
+});
+var dragged = (model, message) => {
+  const { x, y, deltaX, deltaY, width, height } = message;
+  const start = { from: { x, y }, to: { x, y }, width, height };
+  const box = Option2.getOrElse(model.box, () => start);
+  return { box: Option2.some(moved(box, deltaX, deltaY)) };
+};
+var keysIn = (box, camera, selectable) => boxSelect(camera, box, box.from, box.to, selectable);
+var ended = (model, camera, selectable) => Option2.match(model.box, {
+  onNone: () => ({ model }),
+  onSome: (box) => ({
+    model: init(),
+    outMessage: OutMessage.Selected({ keys: keysIn(box, camera, selectable) })
+  })
+});
+var update = (model, message) => Message.match(message, {
+  Dragged: (drag) => ({ model: dragged(model, drag) }),
+  Ended: ({ camera, selectable }) => ended(model, camera, selectable),
+  Cancelled: () => ({ model: init() })
+});
+var drawing2 = (model) => Option2.isSome(model.box);
+var primaryButton = 0;
+var startsBox = (drag) => drag.button === primaryButton && drag.modifiers.shift && drag.key === undefined;
+var claims = (model, drag) => drawing2(model) || startsBox(drag);
+var dragOf = (gesture) => Message.Dragged({
+  x: gesture.x,
+  y: gesture.y,
+  deltaX: gesture.deltaX,
+  deltaY: gesture.deltaY,
+  width: gesture.width,
+  height: gesture.height
+});
+var inside = (model, camera, selectable) => Option2.match(model.box, {
+  onNone: () => [],
+  onSome: (box) => keysIn(box, camera, selectable)
+});
+var onCanvas = (box) => {
+  const left = (Math.min(box.from.x, box.to.x) + 1) / 2 * box.width;
+  const right = (Math.max(box.from.x, box.to.x) + 1) / 2 * box.width;
+  const top = (1 - Math.max(box.from.y, box.to.y)) / 2 * box.height;
+  const bottom = (1 - Math.min(box.from.y, box.to.y)) / 2 * box.height;
+  return { left, top, width: right - left, height: bottom - top };
+};
+var rectangle = (model) => Option2.map(model.box, onCanvas);
+// src/measuringTape.ts
+import {
+  clearTape,
+  overlay,
+  placeTapeEnd,
+  pointTape,
+  SceneSchema as SceneSchema4,
+  tape,
+  tapeLength,
+  tapeMiddle,
+  tapeNodes
+} from "@opsydyn/effect-three";
+import { Option as Option3, Schema as Schema4 } from "effect";
+import { defineMessageUnion as defineMessageUnion3 } from "foldkit/message";
+var Model2 = Schema4.Struct({
+  key: Schema4.String,
+  tape: SceneSchema4.Tape
+});
+var Message2 = defineMessageUnion3({
+  Placed: { point: SceneSchema4.Vec3 },
+  Pointed: { point: Schema4.NullOr(SceneSchema4.Vec3) },
+  Cleared: {},
+  ChoseSnap: { snap: SceneSchema4.Tape.fields.snap }
+});
+var OutMessage2 = defineMessageUnion3({
+  Measured: { from: SceneSchema4.Vec3, to: SceneSchema4.Vec3, length: Schema4.Finite }
+});
+var init2 = (key, options = {}) => ({
+  key,
+  tape: tape(options)
+});
+var measured = (next) => Option3.match(Option3.all([Option3.fromNullishOr(next.tape.from), Option3.fromNullishOr(next.tape.to)]), {
+  onNone: () => ({ model: next }),
+  onSome: ([from, to]) => ({
+    model: next,
+    outMessage: OutMessage2.Measured({ from, to, length: tapeLength(next.tape) ?? 0 })
+  })
+});
+var update2 = (model, message) => Message2.match(message, {
+  Placed: ({ point }) => measured({ ...model, tape: placeTapeEnd(model.tape, point) }),
+  Pointed: ({ point }) => ({ model: { ...model, tape: pointTape(model.tape, point) } }),
+  Cleared: () => ({ model: { ...model, tape: clearTape(model.tape) } }),
+  ChoseSnap: ({ snap }) => ({ model: { ...model, tape: { ...model.tape, snap } } })
+});
+var length = (model) => Option3.fromNullishOr(tapeLength(model.tape));
+var nodes = (model, look = {}) => tapeNodes(model.key, model.tape, look);
+var classOf = (h, className) => Option3.match(Option3.fromNullishOr(className), {
+  onNone: () => [],
+  onSome: (name) => [h.Class(name)]
+});
+var label = (model, h, options = {}) => Option3.match(Option3.all([length(model), Option3.fromNullishOr(tapeMiddle(model.tape))]), {
+  onNone: () => [],
+  onSome: ([measuredLength, middle]) => [
+    {
+      overlay: overlay({ key: `${model.key}:label`, position: middle, center: true }),
+      content: h.span(classOf(h, options.className), [
+        `${measuredLength.toFixed(2)} ${options.unit ?? "m"}`
+      ]),
+      pointerEvents: "none"
+    }
+  ]
+});
+// src/pivotControls.ts
+import {
+  dragPivot,
+  hoverPivot,
+  pivot,
+  pivotHandleOf,
+  pivotNodes,
+  pressPivot,
+  releasePivot,
+  SceneSchema as SceneSchema5
+} from "@opsydyn/effect-three";
+import { Option as Option4, Schema as Schema5 } from "effect";
+import { defineMessageUnion as defineMessageUnion4 } from "foldkit/message";
+var Model3 = Schema5.Struct({
+  key: Schema5.String,
+  pivot: SceneSchema5.Pivot,
+  last: Schema5.Option(SceneSchema5.Placement)
+});
+var Handle = SceneSchema5.PivotHandle;
+var Message3 = defineMessageUnion4({
+  Pressed: { handle: Handle, point: SceneSchema5.Vec3, placement: SceneSchema5.Placement },
+  Dragged: { origin: SceneSchema5.Vec3, direction: SceneSchema5.Vec3, snap: Schema5.Boolean },
+  Released: {},
+  Hovered: { handle: Schema5.NullOr(Handle) }
+});
+var OutMessage3 = defineMessageUnion4({
+  Moved: { placement: SceneSchema5.Placement },
+  Finished: { placement: SceneSchema5.Placement }
+});
+var init3 = (key, options = {}) => ({
+  key,
+  pivot: pivot(options),
+  last: Option4.none()
+});
+var withPivot = (model, next) => ({ ...model, pivot: next });
+var finished = (model) => ({
+  model: { ...withPivot(model, releasePivot(model.pivot)), last: Option4.none() },
+  ...Option4.match(model.last, {
+    onNone: () => ({}),
+    onSome: (placement) => ({ outMessage: OutMessage3.Finished({ placement }) })
+  })
+});
+var dragged2 = (model, origin, direction, snap) => {
+  const placement = Option4.fromNullishOr(dragPivot(model.pivot, { origin, direction }, { snap }));
+  return Option4.match(placement, {
+    onNone: () => ({ model }),
+    onSome: (placement) => ({
+      model: { ...model, last: Option4.some(placement) },
+      outMessage: OutMessage3.Moved({ placement })
+    })
+  });
+};
+var update3 = (model, message) => Message3.match(message, {
+  Pressed: ({ handle, point, placement }) => ({
+    model: {
+      ...withPivot(model, pressPivot(model.pivot, placement, handle, point)),
+      last: Option4.none()
+    }
+  }),
+  Dragged: ({ origin, direction, snap }) => dragged2(model, origin, direction, snap),
+  Released: () => finished(model),
+  Hovered: ({ handle }) => ({ model: withPivot(model, hoverPivot(model.pivot, handle)) })
+});
+var handleOf = (model, key) => Option4.fromNullishOr(pivotHandleOf(model.key, key));
+var held = (model) => model.pivot.grab !== null;
+var nodes2 = (model, placement) => pivotNodes(model.key, model.pivot, placement);
+// src/transformGizmo.ts
+import {
+  dragGizmo,
+  gizmo,
+  gizmoHandleOf,
+  gizmoNodes,
+  hoverGizmo,
+  pressGizmo,
+  releaseGizmo,
+  SceneSchema as SceneSchema6
+} from "@opsydyn/effect-three";
+import { Option as Option5, Schema as Schema6 } from "effect";
+import { defineMessageUnion as defineMessageUnion5 } from "foldkit/message";
+var Model4 = Schema6.Struct({
+  key: Schema6.String,
+  gizmo: SceneSchema6.Gizmo,
+  last: Schema6.Option(SceneSchema6.Placement)
+});
+var Handle2 = Schema6.Literals(["x", "y", "z", "xy", "yz", "xz", "xyz"]);
+var Message4 = defineMessageUnion5({
+  Pressed: {
+    handle: Handle2,
+    origin: SceneSchema6.Vec3,
+    direction: SceneSchema6.Vec3,
+    placement: SceneSchema6.Placement,
+    camera: SceneSchema6.Camera
+  },
+  Dragged: { origin: SceneSchema6.Vec3, direction: SceneSchema6.Vec3 },
+  Released: {},
+  Hovered: { handle: Schema6.NullOr(Handle2) },
+  ChoseMode: { mode: Schema6.Literals(["translate", "rotate", "scale"]) },
+  ChoseSpace: { space: Schema6.Literals(["world", "local"]) }
+});
+var OutMessage4 = defineMessageUnion5({
+  Moved: { placement: SceneSchema6.Placement },
+  Finished: { placement: SceneSchema6.Placement }
+});
+var init4 = (key, options = {}) => ({
+  key,
+  gizmo: gizmo(options),
+  last: Option5.none()
+});
+var withGizmo = (model, next) => ({ ...model, gizmo: next });
+var finished2 = (model) => ({
+  model: { ...withGizmo(model, releaseGizmo(model.gizmo)), last: Option5.none() },
+  ...Option5.match(model.last, {
+    onNone: () => ({}),
+    onSome: (placement) => ({ outMessage: OutMessage4.Finished({ placement }) })
+  })
+});
+var dragged3 = (model, origin, direction) => {
+  const placement = Option5.fromNullishOr(dragGizmo(model.gizmo, { origin, direction }));
+  return Option5.match(placement, {
+    onNone: () => ({ model }),
+    onSome: (placement) => ({
+      model: { ...model, last: Option5.some(placement) },
+      outMessage: OutMessage4.Moved({ placement })
+    })
+  });
+};
+var update4 = (model, message) => Message4.match(message, {
+  Pressed: ({ handle, origin, direction, placement, camera }) => ({
+    model: {
+      ...withGizmo(model, pressGizmo(model.gizmo, placement, handle, { origin, direction }, camera)),
+      last: Option5.none()
+    }
+  }),
+  Dragged: ({ origin, direction }) => dragged3(model, origin, direction),
+  Released: () => finished2(model),
+  Hovered: ({ handle }) => ({ model: withGizmo(model, hoverGizmo(model.gizmo, handle)) }),
+  ChoseMode: ({ mode }) => ({ model: withGizmo(model, { ...model.gizmo, mode }) }),
+  ChoseSpace: ({ space }) => ({ model: withGizmo(model, { ...model.gizmo, space }) })
+});
+var handleOf2 = (model, key) => Option5.fromNullishOr(gizmoHandleOf(model.key, key));
+var held2 = (model) => model.gizmo.grab !== null;
+var nodes3 = (model, placement, camera) => gizmoNodes(model.key, model.gizmo, placement, camera);
+// src/viewportGizmo.ts
+import {
+  cameraAlong,
+  hud as describeHud,
+  SceneSchema as SceneSchema7,
+  viewportAxisOf,
+  viewportGizmoNodes
+} from "@opsydyn/effect-three";
+import { Option as Option6, Schema as Schema7 } from "effect";
+import { defineMessageUnion as defineMessageUnion6 } from "foldkit/message";
+var Axis = Schema7.Literals(["x", "y", "z", "-x", "-y", "-z"]);
+var Model5 = Schema7.Struct({
+  key: Schema7.String,
+  hovered: Schema7.NullOr(Axis),
+  hideNegativeAxes: Schema7.Boolean
+});
+var Message5 = defineMessageUnion6({
+  Entered: { key: Schema7.String },
+  Left: { key: Schema7.String },
+  Pressed: { key: Schema7.String, camera: SceneSchema7.Camera }
+});
+var OutMessage5 = defineMessageUnion6({
+  Turned: { camera: SceneSchema7.Camera }
+});
+var init5 = (key, options = {}) => ({
+  key,
+  hovered: null,
+  hideNegativeAxes: options.hideNegativeAxes ?? false
+});
+var axisOf = (model, key) => Option6.fromNullishOr(viewportAxisOf(model.key, key));
+var entered = (model, key) => Option6.match(axisOf(model, key), {
+  onNone: () => model,
+  onSome: (axis) => ({ ...model, hovered: axis })
+});
+var left = (model, key) => Option6.match(axisOf(model, key), {
+  onNone: () => model,
+  onSome: () => ({ ...model, hovered: null })
+});
+var pressed = (model, key, camera) => Option6.match(axisOf(model, key), {
+  onNone: () => ({ model }),
+  onSome: (axis) => ({
+    model,
+    outMessage: OutMessage5.Turned({ camera: cameraAlong(camera, axis) })
+  })
+});
+var update5 = (model, message) => Message5.match(message, {
+  Entered: ({ key }) => ({ model: entered(model, key) }),
+  Left: ({ key }) => ({ model: left(model, key) }),
+  Pressed: ({ key, camera }) => pressed(model, key, camera)
+});
+var nodes4 = (model, camera) => viewportGizmoNodes(model.key, camera, {
+  hovered: model.hovered,
+  hideNegativeAxes: model.hideNegativeAxes
+});
+var hud = (model, camera, placement = {}) => describeHud({ ...placement, children: [nodes4(model, camera)] });
 // src/view.ts
-import { Array as Arr, Option as Option2 } from "effect";
+import { Array as Arr, Option as Option7 } from "effect";
 import { Mount as Mount2 } from "foldkit";
 
 // src/overlayView.ts
@@ -1973,39 +2648,43 @@ var overlayLayer = (h, overlays) => overlays.length === 0 ? [] : [
 ];
 
 // src/view.ts
-var given = Option2.fromNullishOr;
+var given = Option7.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)
+    Option7.map(given(config.onClick), element.OnSceneClick),
+    Option7.map(given(config.onDoubleClick), element.OnSceneDoubleClick),
+    Option7.map(given(config.onContextMenu), element.OnSceneContextMenu),
+    Option7.map(given(config.onPointerDown), element.OnScenePointerDown),
+    Option7.map(given(config.onPointerUp), element.OnScenePointerUp),
+    Option7.map(given(config.onPointerEnter), element.OnScenePointerEnter),
+    Option7.map(given(config.onPointerMove), element.OnScenePointerMove),
+    Option7.map(given(config.onPointerLeave), element.OnScenePointerLeave),
+    Option7.map(given(config.onPointerMissed), element.OnScenePointerMissed),
+    Option7.map(given(config.onWheel), element.OnSceneWheel),
+    Option7.map(given(config.onDrag), element.OnSceneDrag),
+    Option7.map(given(config.onDragEnd), element.OnSceneDragEnd),
+    Option7.map(given(config.onCollision), element.OnSceneCollision),
+    Option7.map(given(config.onContactForce), element.OnSceneContactForce),
+    Option7.map(given(config.onPhysicsReached), element.OnScenePhysicsReached),
+    Option7.map(given(config.onMeasured), element.OnSceneMeasured),
+    Option7.map(given(config.onLabelMeasured), element.OnSceneLabelMeasured),
+    Option7.map(given(config.onXRSession), element.OnSceneXr),
+    Option7.map(given(config.onXRStick), element.OnSceneXrStick),
+    Option7.map(given(config.onXRButton), element.OnSceneXrButton),
+    Option7.map(given(config.onXRSurface), element.OnSceneXrSurface),
+    Option7.map(given(config.onXRMoved), element.OnSceneXrMoved),
+    Option7.map(given(config.onXRPlanes), element.OnSceneXrPlanes),
+    Option7.map(given(config.onXRMeshes), element.OnSceneXrMeshes),
+    Option7.map(given(config.onAutoRotated), element.OnSceneAutoRotated),
+    Option7.map(given(config.onGesture), (toMessage) => element.OnSceneGesture((detail) => toMessage(detail.gesture))),
+    Option7.map(given(config.onGestureEnd), element.OnSceneGestureEnd),
+    Option7.map(given(config.onPerformanceChange), element.OnScenePerformance),
+    Option7.map(given(config.onError), element.OnSceneError),
+    Option7.map(given(config.onAssetLoaded), element.OnSceneAssetLoaded),
+    Option7.map(given(config.onAssetFailed), element.OnSceneAssetFailed),
+    Option7.map(given(config.onReconciled), element.OnSceneReconciled),
+    Option7.map(given(config.className), h.Class)
   ]);
   const lifecycle = Mount2.mapMessage(config.mount(), config.onLifecycle);
   const overlays = config.overlays ?? [];
@@ -2014,9 +2693,14 @@ var view = (config, h) => {
 };
 export {
   AssetLoadError,
+  exports_boxSelect as BoxSelect,
+  exports_measuringTape as MeasuringTape,
+  exports_pivotControls as PivotControls,
   ReconciledDetail,
   SceneError,
   SceneLifecycle,
+  exports_transformGizmo as TransformGizmo,
+  exports_viewportGizmo as ViewportGizmo,
   XrSessionDetail,
   XrUnavailable,
   animationFrameScheduler,
@@ -2024,6 +2708,7 @@ export {
   claimsContextMenu,
   defaultPixelRatio,
   domEventName,
+  inspectorView,
   makeAssets,
   makeEnvironment,
   makeSceneMount,
@@ -2037,5 +2722,5 @@ export {
   webgpuRendererFactory
 };
 
-//# debugId=4118984BABDF337D64756E2164756E21
+//# debugId=91E3923C3006D06864756E2164756E21
 //# sourceMappingURL=index.js.map