@vibecook/ice 0.1.0 → 0.3.0

package/dist/r3f.js

@@ -1,19 +1,36 @@
 import {
+  EngineProvider,
+  hasPreviewSnapshot,
+  setPreviewSnapshot
+} from "./chunk-2GUYATUM.js";
+import "./chunk-PKK6GLSA.js";
+import {
+  Active,
   Camera,
+  Culled,
+  GESTURE_DEFAULTS,
+  GestureSettings,
   Grab,
+  Opacity,
   Position,
   PrefabId,
   RUNTIME_BUDGETS,
   Size,
   StackZ,
+  StageMode,
   Viewport,
   Visible,
+  createCanvasEngine,
+  createSiblingOrderIndex,
+  defineQuery,
+  navFlightActive,
   pickTopAt,
   widgets
-} from "./chunk-5S7GSXJG.js";
+} from "./chunk-5QY7HK6G.js";
 import {
   compositeCameraFrustum,
   computeIslandPhase,
+  cubicBezierEase,
   fboPixelSize,
   isOutOfBand,
   screenToWorld,
@@ -21,9 +38,10 @@ import {
   selectEvictions,
   worldRectToComposite,
   worldToIsland
-} from "./chunk-BCJ47SX7.js";
+} from "./chunk-OR5FNVUE.js";
 
 // ../r3f/src/island-state.ts
+var LIFT_DEFAULT_MS = 180;
 var FRESH_PAINTED_AT = { w: 0, h: 0, dpr: 1, band: 0 };
 function createIslandStateStore() {
   const entries = /* @__PURE__ */ new Map();
@@ -39,7 +57,17 @@ function createIslandStateStore() {
         animRefs: 0,
         animatedDecl: false,
         lastPaintSeq: 0,
-        compositeScale: 1
+        pendingDtMs: 0,
+        compositeScale: 1,
+        liftTarget: 1,
+        liftFrom: 1,
+        liftElapsedMs: 0,
+        liftMs: 0,
+        compositeOpacity: 1,
+        opacityTarget: 1,
+        opacityFrom: 1,
+        opacityElapsedMs: 0,
+        opacityMs: 0
       };
       entries.set(key, s);
     }
@@ -122,17 +150,45 @@ function createGLBridge(engine, opts = {}) {
   const islands = /* @__PURE__ */ new Map();
   const frameCbs = /* @__PURE__ */ new Map();
   const renderAssert = createRenderWriteTrap(world, opts.devAssertRenderWrites === true);
-  let invalidate = null;
-  let pending = false;
+  const now = opts.now ?? (() => performance.now());
+  let renderNow = null;
+  let wantsFrame = false;
+  let animDueAt = null;
+  let rendering = false;
   const requestFrame = () => {
-    if (invalidate !== null) invalidate();
-    else pending = true;
+    wantsFrame = true;
   };
   const removeReflector = engine.registerReflector({
     name: "r3fInvalidator",
-    observe: { resources: [Camera, Viewport] },
+    // StageMode: a background-hold flip must re-fire the pass — freezing on
+    // take, and (critically) REPAINTING Hot islands on release. The observe
+    // list also keeps strata enforcement armed (a rig must observe — the
+    // always-flush advance reflector below deliberately observes nothing).
+    observe: { resources: [Camera, Viewport, StageMode] },
     flush: () => requestFrame()
   });
+  const removeAdvanceReflector = engine.registerReflector({
+    name: "r3fAdvance",
+    always: true,
+    flush: () => {
+      if (rendering) return;
+      const t = now();
+      if (!wantsFrame && (animDueAt === null || t < animDueAt)) return;
+      if (renderNow === null) return;
+      wantsFrame = false;
+      animDueAt = null;
+      rendering = true;
+      try {
+        renderNow(t);
+      } finally {
+        rendering = false;
+      }
+    }
+  });
+  const order = createSiblingOrderIndex(world);
+  const removeOrderObserver = order.observe(() => {
+    if (order.stale()) requestFrame();
+  });
   const removeWorldObserver = world.observe({
     onDestroy: (e) => {
       if (state.get(e) !== void 0) {
@@ -151,6 +207,7 @@ function createGLBridge(engine, opts = {}) {
     engine,
     state,
     renderAssert,
+    order,
     registerIsland(entity, handle) {
       islands.set(entity, handle);
       const s = state.ensure(entity);
@@ -163,9 +220,12 @@ function createGLBridge(engine, opts = {}) {
           state.bumpPaint(entity);
           requestFrame();
         }),
-        // composite dirt — quad transform/order changed, texture still good:
+        // composite dirt — quad transform changed, texture still good (order
+        // dirt is bridge-scoped: the ChildOf reorder wake above):
         world.reactive.observeValue(entity, Position, () => requestFrame()),
-        world.reactive.observeValue(entity, StackZ, () => requestFrame())
+        // composite dirt — the durable Opacity cell rides the quad's uOpacity,
+        // never the island's FBO (a fade must not repaint the content):
+        world.reactive.observeValue(entity, Opacity, () => requestFrame())
       ];
       for (const group of widget?.groups ?? []) {
         unsubs.push(
@@ -208,63 +268,115 @@ function createGLBridge(engine, opts = {}) {
       state.bumpPaint(entity);
       requestFrame();
     },
-    setCompositeScale(entity, scale) {
+    setCompositeScale(entity, scale, durationMs = LIFT_DEFAULT_MS) {
       const s = state.ensure(entity);
-      if (s.compositeScale === scale) return;
-      s.compositeScale = scale;
+      if (s.liftTarget === scale) return;
+      s.liftTarget = scale;
+      if (durationMs <= 0) {
+        s.compositeScale = scale;
+        s.liftMs = 0;
+        s.liftElapsedMs = 0;
+      } else {
+        s.liftFrom = s.compositeScale;
+        s.liftMs = durationMs;
+        s.liftElapsedMs = 0;
+      }
       requestFrame();
     },
-    setInvalidate(fn) {
-      invalidate = fn;
-      if (fn !== null && pending) {
-        pending = false;
-        fn();
+    setCompositeOpacity(entity, opacity, durationMs = LIFT_DEFAULT_MS) {
+      const s = state.ensure(entity);
+      if (s.opacityTarget === opacity) return;
+      s.opacityTarget = opacity;
+      if (durationMs <= 0) {
+        s.compositeOpacity = opacity;
+        s.opacityMs = 0;
+        s.opacityElapsedMs = 0;
+      } else {
+        s.opacityFrom = s.compositeOpacity;
+        s.opacityMs = durationMs;
+        s.opacityElapsedMs = 0;
+      }
+      requestFrame();
+    },
+    setRenderNow(fn) {
+      renderNow = fn;
+    },
+    schedulePass(plan) {
+      if (plan === "now") {
+        wantsFrame = true;
+        animDueAt = null;
+      } else if (plan === "none") {
+        animDueAt = null;
+      } else {
+        animDueAt = now() + plan;
       }
     },
     uninstall() {
       removeReflector();
+      removeAdvanceReflector();
+      removeOrderObserver();
       removeWorldObserver();
       renderAssert.dispose();
       islands.clear();
       frameCbs.clear();
       state.clear();
-      invalidate = null;
+      renderNow = null;
+      wantsFrame = false;
+      animDueAt = null;
     }
   };
 }
 
 // ../r3f/src/compositor-pass.ts
 var GRABBED_RENDER_ORDER = 1e9;
+var LIFT_EASE = cubicBezierEase(0.2, 0.9, 0.3, 1.2);
+var OPACITY_EASE = cubicBezierEase(0.25, 0.1, 0.25, 1);
 function runCompositorPass(ctx) {
   const { world, bridge, pool, quads, gl } = ctx;
-  const stats = { repainted: 0, pendingPaints: 0, evicted: 0, fboBytes: 0, anyHot: false };
+  const stats = {
+    repainted: 0,
+    pendingPaints: 0,
+    evicted: 0,
+    fboBytes: 0,
+    anyHot: false,
+    liftAnimating: false
+  };
   const cam = world.getResource(Camera);
   const vp = world.getResource(Viewport);
   if (cam === void 0 || vp === void 0 || vp.w === 0) return stats;
+  const inFlight2 = navFlightActive(world);
+  const inMotion = cam.gesturing || inFlight2;
+  const backgrounded = (world.getResource(StageMode)?.backgroundHolds ?? 0) > 0;
+  const frozen = inFlight2 || backgrounded;
   ctx.compCamera.setFrustum(compositeCameraFrustum(cam, vp.w, vp.h));
   const idleDpr = vp.dpr > 0 ? vp.dpr : 1;
-  const targetDpr = cam.gesturing ? Math.min(idleDpr, 1) : idleDpr;
+  const targetDpr = inMotion ? Math.min(idleDpr, 1) : idleDpr;
   if (gl.getPixelRatio() !== targetDpr) gl.setPixelRatio(targetDpr);
   const phaseOf = (e) => {
     const alive = world.isAlive(e);
+    const active = alive && world.hasTag(e, Active);
     const visible = alive && world.hasTag(e, Visible) && bridge.islandFor(e) !== void 0;
     const s = bridge.state.get(e);
     const hasFbo = s !== void 0 && s.fboGeneration >= 0 && pool.get(e) !== null;
-    return computeIslandPhase(true, visible, bridge.state.isAnimating(e), hasFbo);
+    return computeIslandPhase(active, visible, bridge.state.isAnimating(e), hasFbo);
   };
   for (const [e, s] of bridge.state.all()) {
     s.phase = phaseOf(e);
     if (s.phase === "Hot") stats.anyHot = true;
   }
   const band = selectBand(cam.zoom);
-  const effectiveDpr = gl.getPixelRatio() * band;
+  const effectiveDpr = Math.min(gl.getPixelRatio(), ctx.maxPaintDpr) * band;
   const toPaint = [];
   for (const [e, s] of bridge.state.all()) {
     if (bridge.islandFor(e) === void 0) continue;
     const wantsPhase = s.phase === "Hot" || s.phase === "Waking";
     const genDirty = s.paintGeneration > s.fboGeneration;
-    const bandStale = !cam.gesturing && s.fboGeneration >= 0 && isOutOfBand(cam.zoom, s.paintedAt.band);
-    if (wantsPhase || genDirty || bandStale) toPaint.push(e);
+    const bandStale = !inMotion && s.fboGeneration >= 0 && isOutOfBand(cam.zoom, s.paintedAt.band);
+    const paintable = frozen ? wantsPhase && s.fboGeneration < 0 : wantsPhase || genDirty || bandStale;
+    if (paintable) {
+      toPaint.push(e);
+      if (s.phase === "Hot") s.pendingDtMs += ctx.dtMs;
+    }
   }
   toPaint.sort((a, b) => {
     const sa = bridge.state.get(a);
@@ -285,7 +397,9 @@ function runCompositorPass(ctx) {
     const size = world.isAlive(e) ? world.get(e, Size) : void 0;
     if (handle === void 0 || s === void 0 || size === void 0 || size.w <= 0 || size.h <= 0) continue;
     if (s.phase === "Hot") {
-      for (const cb of bridge.frameCallbacksFor(e)) cb(ctx.dtMs);
+      const owedMs = s.pendingDtMs;
+      s.pendingDtMs = 0;
+      for (const cb of bridge.frameCallbacksFor(e)) cb(owedMs);
     }
     ctx.islandCamera(e)?.setFrustum(size.w / 2, size.h / 2);
     const fbo = pool.acquire(e, size.w, size.h, effectiveDpr);
@@ -330,29 +444,63 @@ function runCompositorPass(ctx) {
   for (const key of quads.keys()) {
     if (!liveKeys.has(key)) quads.remove(key);
   }
+  const hasChrome = (e) => {
+    const type = world.get(e, PrefabId)?.id;
+    return typeof type === "string" && widgets.get(type)?.chrome != null;
+  };
+  const composited = [];
+  let clip = null;
+  const ordinals = bridge.order.ordinals();
   for (const [e, s] of bridge.state.all()) {
     const quad = quads.ensure(e);
     const alive = world.isAlive(e);
     const fbo = pool.get(e);
     const pos = alive ? world.get(e, Position) : void 0;
     const size = alive ? world.get(e, Size) : void 0;
-    if (fbo === null || s.fboGeneration < 0 || pos === void 0 || size === void 0) {
+    if (s.phase === "Dormant" || fbo === null || s.fboGeneration < 0 || pos === void 0 || size === void 0) {
       quad.setVisible(false);
       continue;
     }
     const q = worldRectToComposite({ x: pos.x, y: pos.y, width: size.w, height: size.h });
+    if (s.liftElapsedMs < s.liftMs) {
+      s.liftElapsedMs += ctx.dtMs;
+      const t = Math.min(1, s.liftElapsedMs / s.liftMs);
+      s.compositeScale = t >= 1 ? s.liftTarget : s.liftFrom + (s.liftTarget - s.liftFrom) * LIFT_EASE(t);
+      if (t < 1) stats.liftAnimating = true;
+    }
+    if (s.opacityElapsedMs < s.opacityMs) {
+      s.opacityElapsedMs += ctx.dtMs;
+      const t = Math.min(1, s.opacityElapsedMs / s.opacityMs);
+      s.compositeOpacity = t >= 1 ? s.opacityTarget : s.opacityFrom + (s.opacityTarget - s.opacityFrom) * OPACITY_EASE(t);
+      if (t < 1) stats.liftAnimating = true;
+    }
     const lift = s.compositeScale;
     quad.setTransform(q.x, q.y, q.sx * lift, q.sy * lift);
     quad.setTexture(fbo.texture);
+    const baseOpacity = world.get(e, Opacity)?.a ?? 1;
+    quad.setOpacity(Math.min(1, Math.max(0, baseOpacity * s.compositeOpacity)));
     const grabbed = world.get(e, Grab) !== void 0;
-    quad.setRenderOrder(grabbed || lift !== 1 ? GRABBED_RENDER_ORDER : world.get(e, StackZ)?.z ?? 0);
+    quad.setRenderOrder(
+      grabbed || lift !== 1 ? GRABBED_RENDER_ORDER : ordinals.get(e) ?? world.get(e, StackZ)?.z ?? 0
+    );
     quad.setVisible(true);
     pool.touch(e);
+    composited.push({ key: e, quad });
+    if (clip === null && grabbed && hasChrome(e)) {
+      const hw = q.sx * lift / 2;
+      const hh = q.sy * lift / 2;
+      clip = { key: e, minX: q.x - hw, minY: q.y - hh, maxX: q.x + hw, maxY: q.y + hh };
+    }
+  }
+  for (const { key, quad } of composited) {
+    if (clip === null) quad.setDragClip(0, 0, 0, 0, false);
+    else quad.setDragClip(clip.minX, clip.minY, clip.maxX, clip.maxY, key === clip.key);
   }
   gl.setRenderTarget(null);
   gl.clear();
   gl.render(ctx.compositeScene, ctx.compCamera.raw);
   stats.fboBytes = pool.bytesUsed();
+  if (backgrounded) stats.anyHot = false;
   return stats;
 }
 
@@ -373,8 +521,10 @@ var VERTEX_SHADER = (
   /* glsl */
   `
 varying vec2 vUv;
+varying vec2 vWorld;
 void main() {
   vUv = uv;
+  vWorld = (modelMatrix * vec4(position, 1.0)).xy;
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 }
 `
@@ -384,9 +534,20 @@ var FRAGMENT_SHADER = (
   `
 uniform sampler2D map;
 uniform float uOpacity;
+uniform vec4 uDraggedRect;
+uniform float uIsDragged;
 varying vec2 vUv;
+varying vec2 vWorld;
 
 void main() {
+  // Drag clip (v1 RFC-003, composite-space): while a chrome-carrying GL card
+  // is dragged, every OTHER quad discards fragments inside its rect so the
+  // card's P1 DOM chrome shows through. (0,0,0,0) rect \u21D2 measure-zero, off.
+  if (uIsDragged < 0.5 &&
+      vWorld.x >= uDraggedRect.x && vWorld.x <= uDraggedRect.z &&
+      vWorld.y >= uDraggedRect.y && vWorld.y <= uDraggedRect.w) {
+    discard;
+  }
   vec4 c = texture2D(map, vUv);
   if (c.a < 0.001) discard;
   c.a *= uOpacity;
@@ -402,10 +563,15 @@ var CompositeMaterial = class extends ShaderMaterial {
   // the setters allocation-free.
   mapUniform;
   opacityUniform;
+  draggedRectUniform;
+  isDraggedUniform;
   constructor() {
     const uniforms = {
       map: { value: null },
-      uOpacity: { value: 1 }
+      uOpacity: { value: 1 },
+      // three uploads number[] as vec4 — no Vector4 allocation needed.
+      uDraggedRect: { value: [0, 0, 0, 0] },
+      uIsDragged: { value: 0 }
     };
     super({
       vertexShader: VERTEX_SHADER,
@@ -422,6 +588,8 @@ var CompositeMaterial = class extends ShaderMaterial {
     });
     this.mapUniform = uniforms.map;
     this.opacityUniform = uniforms.uOpacity;
+    this.draggedRectUniform = uniforms.uDraggedRect;
+    this.isDraggedUniform = uniforms.uIsDragged;
   }
   /** Bind the island's FBO texture (null clears). */
   setMap(map) {
@@ -431,6 +599,21 @@ var CompositeMaterial = class extends ShaderMaterial {
   setOpacity(opacity) {
     this.opacityUniform.value = opacity;
   }
+  /**
+   * Drag clip, composite-space min/max (v1's uDraggedRect re-cut from screen
+   * space). (0,0,0,0) = inactive. Mutates the vec4 in place — no allocation.
+   */
+  setDraggedRect(minX, minY, maxX, maxY) {
+    const r = this.draggedRectUniform.value;
+    r[0] = minX;
+    r[1] = minY;
+    r[2] = maxX;
+    r[3] = maxY;
+  }
+  /** True on the dragged card's own quad — exempt from the clip. */
+  setIsDragged(isDragged) {
+    this.isDraggedUniform.value = isDragged ? 1 : 0;
+  }
   // dispose() is inherited from ShaderMaterial — it fires the dispose event that
   // frees the compiled program; no override needed.
 };
@@ -460,13 +643,20 @@ function useIslandInvalidate() {
   const { bridge, entity } = useIslandContext();
   return useCallback(() => bridge.bumpPaint(entity), [bridge, entity]);
 }
-function useIslandLift(scale) {
+function useIslandLift(scale, durationMs) {
   const { bridge, entity } = useIslandContext();
   useEffect(() => {
-    bridge.setCompositeScale(entity, scale);
-  }, [bridge, entity, scale]);
+    bridge.setCompositeScale(entity, scale, durationMs);
+  }, [bridge, entity, scale, durationMs]);
   useEffect(() => () => bridge.setCompositeScale(entity, 1), [bridge, entity]);
 }
+function useIslandOpacity(opacity, durationMs) {
+  const { bridge, entity } = useIslandContext();
+  useEffect(() => {
+    bridge.setCompositeOpacity(entity, opacity, durationMs);
+  }, [bridge, entity, opacity, durationMs]);
+  useEffect(() => () => bridge.setCompositeOpacity(entity, 1), [bridge, entity]);
+}
 
 // ../r3f/src/island.tsx
 function Island({ bridge, world, entity, widget, environment }) {
@@ -500,9 +690,13 @@ function Island({ bridge, world, entity, widget, environment }) {
 // ../r3f/src/pool.ts
 import { SRGBColorSpace, WebGLRenderTarget } from "three";
 var COLOR_BYTES_PER_PIXEL = 4;
+var DEPTH_BYTES_PER_PIXEL = 4;
 var SAMPLES = 4;
 function targetBytes(pixelWidth, pixelHeight) {
-  return pixelWidth * pixelHeight * COLOR_BYTES_PER_PIXEL * (SAMPLES > 1 ? 2 : 1);
+  const msaa = SAMPLES > 1;
+  const colorBytes = COLOR_BYTES_PER_PIXEL * (msaa ? 1 + SAMPLES : 1);
+  const depthBytes = DEPTH_BYTES_PER_PIXEL * (msaa ? SAMPLES : 1);
+  return pixelWidth * pixelHeight * (colorBytes + depthBytes);
 }
 var RenderTargetPool = class {
   entries = /* @__PURE__ */ new Map();
@@ -612,20 +806,37 @@ var RenderTargetPool = class {
   }
 };
 
+// ../r3f/src/self-sustain.ts
+var RATE_CAP_SLACK_MS = 4;
+function selfSustainPlan(stats, elapsedMs, maxFps) {
+  if (stats.liftAnimating) return "now";
+  if (!stats.anyHot && stats.pendingPaints <= 0) return "none";
+  const interval = 1e3 / Math.max(1, maxFps);
+  const delay = interval - elapsedMs - RATE_CAP_SLACK_MS;
+  return delay <= 0 ? "now" : delay;
+}
+
 // ../r3f/src/gl-root.tsx
+var visibleWidgetsQ = defineQuery([Visible]);
+var culledWidgetsQ = defineQuery([Culled]);
 function GLViews({
   engine,
   bridge,
   store,
   maxFboBytes = RUNTIME_BUDGETS.fboBytes,
   maxRepaintsPerFrame = 4,
-  environment
+  maxAnimationFps = 60,
+  maxPaintDpr = 1.5,
+  environment,
+  onFrameStats
 }) {
   const world = engine.world;
   const gl = useThree((s) => s.gl);
   const scene = useThree((s) => s.scene);
   const set = useThree((s) => s.set);
-  const invalidate = useThree((s) => s.invalidate);
+  const advance2 = useThree((s) => s.advance);
+  const frameloop = useThree((s) => s.frameloop);
+  const clock = useThree((s) => s.clock);
   const poolRef = useRef2(null);
   if (poolRef.current === null || poolRef.current.isDisposed()) {
     poolRef.current = new RenderTargetPool();
@@ -660,6 +871,12 @@ function GLViews({
           },
           setRenderOrder: (n) => {
             m.renderOrder = n;
+          },
+          setOpacity: (o) => m.material.setOpacity(o),
+          setDragClip: (minX, minY, maxX, maxY, exempt) => {
+            const mat = m.material;
+            mat.setDraggedRect(minX, minY, maxX, maxY);
+            mat.setIsDragged(exempt);
           }
         };
       },
@@ -689,9 +906,30 @@ function GLViews({
     [gl]
   );
   useEffect3(() => {
-    bridge.setInvalidate(() => invalidate());
-    return () => bridge.setInvalidate(null);
-  }, [bridge, invalidate]);
+    clock.elapsedTime = performance.now() / 1e3;
+    bridge.setRenderNow((nowMs) => advance2(nowMs / 1e3, true));
+    return () => bridge.setRenderNow(null);
+  }, [bridge, advance2, clock]);
+  useEffect3(() => {
+    if (frameloop !== "never") {
+      console.warn(
+        `[ice/r3f] GLViews: <Canvas frameloop="${frameloop}"> \u2014 use frameloop="never". The engine drives frames (reflect-phase advance); a self-scheduling loop renders out of phase with the DOM planes.`
+      );
+    }
+  }, [frameloop]);
+  const statsCbRef = useRef2(onFrameStats);
+  statsCbRef.current = onFrameStats;
+  const paintsOwedRef = useRef2(false);
+  const gpuProfilerRef = useRef2(null);
+  const gpuProfilerState = useRef2("idle");
+  useEffect3(
+    () => () => {
+      gpuProfilerRef.current?.dispose();
+      gpuProfilerRef.current = null;
+      gpuProfilerState.current = "idle";
+    },
+    []
+  );
   useEffect3(() => {
     const quadMap = quadsRef.current;
     return () => {
@@ -705,6 +943,25 @@ function GLViews({
     };
   }, [scene, pool, bridge]);
   useFrame((_, delta) => {
+    const profiling = statsCbRef.current !== void 0;
+    if (profiling) {
+      if (gpuProfilerState.current === "idle") {
+        gpuProfilerState.current = "loading";
+        void import("stats-gl").then(async ({ StatsProfiler }) => {
+          const p = new StatsProfiler({ trackGPU: true });
+          await p.init(gl);
+          gpuProfilerRef.current = p;
+          gpuProfilerState.current = "ready";
+        }).catch(() => {
+          gpuProfilerState.current = "failed";
+        });
+      }
+      gl.info.autoReset = false;
+      gl.info.reset();
+    } else if (!gl.info.autoReset) {
+      gl.info.autoReset = true;
+    }
+    const passStart = performance.now();
     bridge.renderAssert.begin();
     let stats;
     try {
@@ -742,13 +999,83 @@ function GLViews({
         compositeScene: scene,
         maxFboBytes,
         maxRepaintsPerFrame,
+        maxPaintDpr,
         dtMs: delta * 1e3
       });
     } finally {
       bridge.renderAssert.end();
     }
-    if (stats.anyHot || stats.pendingPaints > 0) invalidate();
+    const cb = statsCbRef.current;
+    if (cb !== void 0) {
+      const gpu = gpuProfilerRef.current;
+      gpu?.update();
+      const d = gpu?.getData();
+      const info = gl.info;
+      let total = 0;
+      let hot = 0;
+      let warm = 0;
+      let waking = 0;
+      let cold = 0;
+      let dormant = 0;
+      let pixels = 0;
+      const bandHistogram = {};
+      for (const [e, s] of bridge.state.all()) {
+        total++;
+        if (s.phase === "Hot") hot++;
+        else if (s.phase === "Warm") warm++;
+        else if (s.phase === "Waking") waking++;
+        else if (s.phase === "Dormant") dormant++;
+        else cold++;
+        if (s.fboGeneration >= 0 && pool.get(e) !== null) {
+          pixels += s.paintedAt.w * s.paintedAt.h;
+          const key = `\xD7${s.paintedAt.band}`;
+          bandHistogram[key] = (bandHistogram[key] ?? 0) + 1;
+        }
+      }
+      let visibleWidgets = 0;
+      let culledWidgets = 0;
+      world.query(visibleWidgetsQ).each((b) => {
+        visibleWidgets += b.count;
+      });
+      world.query(culledWidgetsQ).each((b) => {
+        culledWidgets += b.count;
+      });
+      const zoom = world.getResource(Camera)?.zoom ?? 1;
+      const band = selectBand(zoom);
+      cb({
+        cpuMs: performance.now() - passStart,
+        gpuMs: d?.gpu ?? 0,
+        fps: d?.fps ?? 0,
+        drawCalls: info.render.calls,
+        triangles: info.render.triangles,
+        points: info.render.points,
+        lines: info.render.lines,
+        programs: info.programs?.length ?? 0,
+        geometries: info.memory.geometries,
+        textures: info.memory.textures,
+        renderTargets: pool.size(),
+        renderMegaPixels: pixels / 1e6,
+        fboBytes: pool.bytesUsed(),
+        fboBudgetBytes: maxFboBytes,
+        islands: { total, hot, warm, waking, cold, dormant },
+        bandHistogram,
+        repainted: stats.repainted,
+        pendingPaints: stats.pendingPaints,
+        evicted: stats.evicted,
+        zoom,
+        band,
+        effectiveDpr: Math.min(gl.getPixelRatio(), maxPaintDpr) * band,
+        visibleWidgets,
+        culledWidgets
+      });
+    }
+    bridge.schedulePass(selfSustainPlan(stats, performance.now() - passStart, maxAnimationFps));
+    paintsOwedRef.current = stats.pendingPaints > 0 || stats.liftAnimating;
   }, 1);
+  useEffect3(
+    () => engine.frame.settleWhile("gl-paints", () => paintsOwedRef.current),
+    [engine]
+  );
   const entries = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
   const islands = [];
   for (const entry of entries) {
@@ -778,6 +1105,9 @@ var ResourceRegistry = class {
   textures = /* @__PURE__ */ new Map();
   disposed = false;
   acquireGeometry(key, factory) {
+    if (this.disposed) {
+      throw new Error("ResourceRegistry: cannot acquire after dispose");
+    }
     const existing = this.geometries.get(key);
     if (existing) {
       existing.refCount++;
@@ -791,6 +1121,9 @@ var ResourceRegistry = class {
     this.releaseFrom(this.geometries, key);
   }
   acquireMaterial(key, factory) {
+    if (this.disposed) {
+      throw new Error("ResourceRegistry: cannot acquire after dispose");
+    }
     const existing = this.materials.get(key);
     if (existing) {
       existing.refCount++;
@@ -804,6 +1137,9 @@ var ResourceRegistry = class {
     this.releaseFrom(this.materials, key);
   }
   acquireTexture(key, factory) {
+    if (this.disposed) {
+      throw new Error("ResourceRegistry: cannot acquire after dispose");
+    }
     const existing = this.textures.get(key);
     if (existing) {
       existing.refCount++;
@@ -888,14 +1224,53 @@ function handlersOf(obj) {
 function createGLPointerRouter({ world, bridge, index }) {
   const raycaster = new Raycaster();
   const ndc = new Vector2();
+  const routerOrder = createSiblingOrderIndex(world);
   const captures = /* @__PURE__ */ new Map();
   const hovered = /* @__PURE__ */ new Map();
   const unclaimedDowns = /* @__PURE__ */ new Map();
+  let hoverInteractive = false;
+  const chainInteractive = (hits) => {
+    for (const h of hits) {
+      for (let obj = h.object; obj !== null; obj = obj.parent) {
+        const handlers = handlersOf(obj);
+        if (handlers !== void 0 && (handlers.onPointerDown !== void 0 || handlers.onClick !== void 0)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  const withinTapSlop = (downX, downY, upX, upY) => {
+    const slop = world.getResource(GestureSettings)?.tapSlopPx ?? GESTURE_DEFAULTS.tapSlopPx;
+    const dx = upX - downX;
+    const dy = upY - downY;
+    return dx * dx + dy * dy <= slop * slop;
+  };
+  const chainHas = (hits, target) => {
+    for (const h of hits) {
+      for (let obj = h.object; obj !== null; obj = obj.parent) {
+        if (obj === target) return true;
+      }
+    }
+    return false;
+  };
+  const filterToChain = (hits, target) => {
+    const kept = [];
+    for (const h of hits) {
+      for (let obj = h.object; obj !== null; obj = obj.parent) {
+        if (obj === target) {
+          kept.push(h);
+          break;
+        }
+      }
+    }
+    return kept;
+  };
   const castAt = (screenX, screenY) => {
     const cam = world.getResource(Camera);
     if (cam === void 0) return void 0;
     const w = screenToWorld(screenX, screenY, cam);
-    const hit = pickTopAt(world, index, w.x, w.y, 0);
+    const hit = pickTopAt(world, index, w.x, w.y, 0, void 0, routerOrder.ordinals());
     if (hit === void 0) return void 0;
     const type = world.get(hit, PrefabId)?.id;
     const widget = typeof type === "string" ? widgets.get(type) : void 0;
@@ -919,6 +1294,11 @@ function createGLPointerRouter({ world, bridge, index }) {
     raycaster.setFromCamera(ndc, cam3);
     return { entity: hit, hits: raycaster.intersectObjects(handle.scene.children, true) };
   };
+  const captureHits = (x, y, capture) => {
+    const cast = castAt(x, y);
+    if (cast === void 0 || cast.entity !== capture.entity) return [];
+    return capture.downObject === void 0 ? cast.hits : filterToChain(cast.hits, capture.downObject);
+  };
   const dispatch = (type, eventType, entity, hits, native, only) => {
     const visited = /* @__PURE__ */ new Set();
     let stopped = false;
@@ -1022,34 +1402,48 @@ function createGLPointerRouter({ world, bridge, index }) {
   return {
     route(kind, screenX, screenY, native) {
       if (kind === "down") {
-        const cast2 = castAt(screenX, screenY);
-        if (cast2 === void 0) {
+        const cast = castAt(screenX, screenY);
+        if (cast === void 0) {
           unclaimedDowns.delete(native.pointerId);
           return false;
         }
-        const { stopped, claimedBy } = dispatch("onPointerDown", "pointerdown", cast2.entity, cast2.hits, native);
+        const { stopped, claimedBy } = dispatch("onPointerDown", "pointerdown", cast.entity, cast.hits, native);
         if (stopped) {
           unclaimedDowns.delete(native.pointerId);
-          captures.set(native.pointerId, { entity: cast2.entity, downObject: claimedBy });
+          captures.set(native.pointerId, {
+            entity: cast.entity,
+            downObject: claimedBy,
+            downX: screenX,
+            downY: screenY
+          });
           return true;
         }
-        const top = cast2.hits[0]?.object;
-        if (top !== void 0) unclaimedDowns.set(native.pointerId, { entity: cast2.entity, object: top });
+        const top = cast.hits[0]?.object;
+        if (top !== void 0) {
+          unclaimedDowns.set(native.pointerId, {
+            entity: cast.entity,
+            object: top,
+            downX: screenX,
+            downY: screenY
+          });
+        }
         return false;
       }
       const capture = captures.get(native.pointerId);
       if (kind === "move") {
         if (capture !== void 0) {
-          const cast2 = castAt(screenX, screenY);
-          const hits2 = cast2 !== void 0 && cast2.entity === capture.entity ? cast2.hits : [];
+          hoverInteractive = true;
+          const hits2 = captureHits(screenX, screenY, capture);
           dispatch("onPointerMove", "pointermove", capture.entity, hits2, native, capture.downObject);
           return true;
         }
+        hoverInteractive = false;
         if (native.buttons === 0) {
-          const cast2 = castAt(screenX, screenY);
-          syncHover(cast2, native);
-          if (cast2 !== void 0) {
-            dispatch("onPointerMove", "pointermove", cast2.entity, cast2.hits, native);
+          const cast = castAt(screenX, screenY);
+          hoverInteractive = cast !== void 0 && chainInteractive(cast.hits);
+          syncHover(cast, native);
+          if (cast !== void 0) {
+            dispatch("onPointerMove", "pointermove", cast.entity, cast.hits, native);
           }
         }
         return false;
@@ -1057,29 +1451,176 @@ function createGLPointerRouter({ world, bridge, index }) {
       if (capture === void 0) {
         const pending = unclaimedDowns.get(native.pointerId);
         unclaimedDowns.delete(native.pointerId);
-        if (kind === "up" && pending !== void 0) {
-          const cast2 = castAt(screenX, screenY);
-          if (cast2 !== void 0 && cast2.entity === pending.entity && cast2.hits[0]?.object === pending.object) {
-            dispatch("onClick", "click", cast2.entity, cast2.hits, native, pending.object);
+        if (kind === "up" && pending !== void 0 && withinTapSlop(pending.downX, pending.downY, screenX, screenY)) {
+          const cast = castAt(screenX, screenY);
+          if (cast !== void 0 && cast.entity === pending.entity && cast.hits[0]?.object === pending.object) {
+            dispatch("onClick", "click", cast.entity, cast.hits, native, pending.object);
           }
         }
         return false;
       }
       captures.delete(native.pointerId);
-      const cast = castAt(screenX, screenY);
-      const hits = cast !== void 0 && cast.entity === capture.entity ? cast.hits : [];
+      const hits = captureHits(screenX, screenY, capture);
       if (kind === "up") {
         const { claimedBy } = dispatch("onPointerUp", "pointerup", capture.entity, hits, native, capture.downObject);
-        const clickTarget = claimedBy ?? capture.downObject;
-        if (clickTarget !== void 0 && clickTarget === capture.downObject) {
-          dispatch("onClick", "click", capture.entity, hits, native, clickTarget);
+        if (capture.downObject !== void 0 && (claimedBy === void 0 || claimedBy === capture.downObject) && chainHas(hits, capture.downObject) && withinTapSlop(capture.downX, capture.downY, screenX, screenY)) {
+          dispatch("onClick", "click", capture.entity, hits, native, capture.downObject);
         }
       } else {
         dispatch("onPointerCancel", "pointercancel", capture.entity, hits, native, capture.downObject);
       }
       return true;
+    },
+    overInteractive: () => hoverInteractive
+  };
+}
+
+// ../r3f/src/preview-capture.tsx
+import { advance, createRoot } from "@react-three/fiber";
+import { createElement as createElement3 } from "react";
+var sandbox = null;
+function ensureEntity(def) {
+  if (sandbox === null) {
+    const ce = createCanvasEngine();
+    ce.docs.create();
+    ce.world.sync();
+    ce.step(16);
+    sandbox = { ce, entities: /* @__PURE__ */ new Map() };
+  }
+  const hit = sandbox.entities.get(def.type);
+  if (hit !== void 0) return hit;
+  try {
+    const e = sandbox.ce.ops.spawnWidget(def.type, {
+      x: 0,
+      y: 0,
+      undoable: false,
+      ...def.previewProps !== void 0 ? { props: def.previewProps } : {}
+    });
+    sandbox.ce.world.sync();
+    sandbox.ce.step(32);
+    sandbox.entities.set(def.type, e);
+    return e;
+  } catch (err) {
+    console.warn(`ice: preview capture \u2014 sandbox spawn failed for "${def.type}".`, err);
+    return void 0;
+  }
+}
+function stubBridge(callbacks) {
+  const stub = {
+    addFrameCallback: (_e, cb) => {
+      callbacks.add(cb);
+      return () => callbacks.delete(cb);
+    },
+    bumpPaint: () => {
+    },
+    setCompositeScale: () => {
+    },
+    setCompositeOpacity: () => {
     }
   };
+  return stub;
+}
+var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+var inFlight = null;
+function captureWidgetPreviews(opts = {}) {
+  if (inFlight !== null) return inFlight;
+  const run = doCapture(opts).finally(() => {
+    inFlight = null;
+  });
+  inFlight = run;
+  return run;
+}
+async function doCapture(opts) {
+  const wanted = opts.types ?? widgets.all().filter((d) => d.surface === "gl").map((d) => d.type);
+  const defs = wanted.map((t) => widgets.get(t)).filter((d) => d !== void 0 && d.surface === "gl" && d.component !== null && d.component !== void 0).filter((d) => !hasPreviewSnapshot(d.type));
+  if (defs.length === 0) return [];
+  const canvas = document.createElement("canvas");
+  const root = createRoot(canvas);
+  const captured = [];
+  let resolvedEnv;
+  try {
+    for (const def of defs) {
+      try {
+        const entity = ensureEntity(def);
+        if (entity === void 0 || sandbox === null) continue;
+        const { w, h } = def.defaultSize;
+        const scale = opts.scale ?? Math.min(2, 512 / Math.max(w, h));
+        const callbacks = /* @__PURE__ */ new Set();
+        root.configure({
+          frameloop: "never",
+          gl: { alpha: true, antialias: true, preserveDrawingBuffer: true },
+          orthographic: true,
+          // The island frustum verbatim (island.tsx / the paint pass): center
+          // origin, Y-up, camera on +Z looking at the content plane; `manual`
+          // pins it against R3F's resize auto-frustum.
+          camera: {
+            left: -w / 2,
+            right: w / 2,
+            top: h / 2,
+            bottom: -h / 2,
+            near: 0.1,
+            far: 2e3,
+            position: [0, 0, 500],
+            manual: true
+          },
+          size: { width: w, height: h, top: 0, left: 0 },
+          dpr: scale
+        });
+        const View = def.component;
+        const store = root.render(
+          createElement3(
+            EngineProvider,
+            { engine: sandbox.ce },
+            createElement3(
+              IslandContext.Provider,
+              { value: { bridge: stubBridge(callbacks), entity } },
+              createElement3(View, { entity, world: sandbox.ce.world })
+            )
+          )
+        );
+        if (resolvedEnv === void 0) {
+          resolvedEnv = typeof opts.environment === "function" ? opts.environment(store.getState().gl) : opts.environment ?? null;
+        }
+        store.getState().scene.environment = resolvedEnv;
+        const cam = store.getState().camera;
+        cam.left = -w / 2;
+        cam.right = w / 2;
+        cam.top = h / 2;
+        cam.bottom = -h / 2;
+        cam.near = 0.1;
+        cam.far = 2e3;
+        cam.position.set(0, 0, 500);
+        cam.lookAt(0, 0, 0);
+        cam.updateProjectionMatrix();
+        cam.updateMatrixWorld(true);
+        await sleep(30);
+        const frames = opts.settleFrames ?? 12;
+        for (let i = 0; i < frames; i++) {
+          for (const cb of callbacks) cb(16.7);
+          advance(i * 16.7 / 1e3, false, store.getState());
+          await sleep(16);
+        }
+        for (const cb of callbacks) cb(16.7);
+        advance(frames * 16.7 / 1e3, false, store.getState());
+        const snap = document.createElement("canvas");
+        snap.width = canvas.width;
+        snap.height = canvas.height;
+        snap.getContext("2d")?.drawImage(canvas, 0, 0);
+        setPreviewSnapshot(def.type, snap);
+        captured.push(def.type);
+      } catch (err) {
+        console.warn(`ice: preview capture failed for "${def.type}" \u2014 its tile keeps the fallback.`, err);
+      }
+      await new Promise((r) => {
+        const w = window;
+        if (w.requestIdleCallback !== void 0) w.requestIdleCallback(() => r(), { timeout: 500 });
+        else setTimeout(r, 50);
+      });
+    }
+  } finally {
+    root.unmount();
+  }
+  return captured;
 }
 export {
   CompositeMaterial,
@@ -1088,6 +1629,7 @@ export {
   IslandContext,
   RenderTargetPool,
   ResourceRegistry,
+  captureWidgetPreviews,
   createGLBridge,
   createGLPointerRouter,
   createIslandStateStore,
@@ -1096,6 +1638,7 @@ export {
   useIslandContext,
   useIslandFrame,
   useIslandInvalidate,
-  useIslandLift
+  useIslandLift,
+  useIslandOpacity
 };
 //# sourceMappingURL=r3f.js.map