@limrun/ui 0.17.0-rc.1 → 0.17.0-rc.2

package/src/components/duo-frame.tsx

@@ -1,579 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import * as THREE from 'three';
-import { createDuoModel } from './duo-model';
-import { duoFoldAngle } from './duo-fold-timing';
-import { hardwareLayout, hardwareHoverEdge } from './duo-hardware';
-import { DuoControls, DuoHardwareIcon } from './duo-controls';
-import { useDuoButtonHinge } from './duo-button-hinge';
-import {
-  panelTouch,
-  duoPointerMode,
-  DuoButtonSender,
-  DUO_BUTTONS,
-  type DuoButton,
-  type DuoState,
-  type DuoOrientation,
-} from '../core/duo';
-
-export interface DuoFrameProps {
-  modelUrl?: string;
-  outer: HTMLVideoElement | null;
-  inner: HTMLVideoElement | null;
-  state: DuoState;
-  setAngle: (degrees: number) => Promise<void>;
-  setOrientation: (orientation: DuoOrientation) => Promise<void>;
-  button: (button: DuoButton, down: boolean) => Promise<void>;
-  touch: (action: number, screenId: number, x: number, y: number) => void;
-  onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
-  onKeyUp: React.KeyboardEventHandler<HTMLDivElement>;
-}
-
-type View = 'front' | 'book' | 'table' | 'back';
-
-/** A procedural titanium frame. Each glass panel carries its own native video texture. */
-export default function DuoFrame(props: DuoFrameProps) {
-  const host = useRef<HTMLDivElement>(null);
-  const hardwareNodes = useRef(new Map<DuoButton, HTMLButtonElement>());
-  const latest = useRef(props);
-  latest.current = props;
-  const [error, setError] = useState<string>();
-  const { angle, changeAngle, interacting, motion, target, fold, cancelFold } = useDuoButtonHinge(
-    props.state.angleDegrees,
-    props.setAngle,
-    setError,
-  );
-  const angleRef = useRef(angle);
-  angleRef.current = angle;
-  const [view, setView] = useState<View>('front');
-  const viewRevision = useRef(0);
-  const viewRef = useRef(view);
-  viewRef.current = view;
-  const [positionLocked, setPositionLocked] = useState(true);
-  const lockedRef = useRef(positionLocked);
-  lockedRef.current = positionLocked;
-  const invalidateFrame = useRef<() => void>(() => undefined);
-
-  useEffect(() => {
-    invalidateFrame.current();
-  }, [angle, target, view, positionLocked, props.state.orientation]);
-
-  useEffect(() => {
-    const container = host.current;
-    if (!container || !props.outer || !props.inner) return;
-    let renderer: THREE.WebGLRenderer;
-    try {
-      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-    } catch {
-      setError('3D rendering is unavailable in this browser. Enable WebGL to use the folding frame.');
-      return;
-    }
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
-    renderer.outputColorSpace = THREE.SRGBColorSpace;
-    renderer.toneMapping = THREE.ACESFilmicToneMapping;
-    renderer.toneMappingExposure = 1;
-    renderer.setClearColor(0x000000, 0);
-    container.appendChild(renderer.domElement);
-    const scene = new THREE.Scene();
-    const camera = new THREE.OrthographicCamera(-150, 150, 150, -150, 1, 2000);
-    let aspect = 1;
-    camera.position.set(0, 0, 340);
-    const root = new THREE.Group();
-    // Continuous light-to-dark studio sweeps give broad metal faces reflections at every viewing angle.
-    const studioWidth = 512;
-    const studioHeight = 256;
-    const studioPixels = new Float32Array(studioWidth * studioHeight * 4);
-    for (let y = 0; y < studioHeight; y++) {
-      const latitude = ((y + 0.5) / studioHeight - 0.5) * Math.PI;
-      for (let x = 0; x < studioWidth; x++) {
-        const longitude = ((x + 0.5) / studioWidth) * Math.PI * 2;
-        const sweep = Math.pow(0.5 + 0.5 * Math.sin(4 * longitude + 1.8 * Math.sin(latitude)), 3);
-        const fill = Math.pow(0.5 + 0.5 * Math.cos(2 * longitude - 3 * latitude), 3);
-        const light = 0.12 + 3.2 * sweep + 0.8 * fill;
-        const offset = (y * studioWidth + x) * 4;
-        studioPixels.set([light, light, light, 1], offset);
-      }
-    }
-    const studio = new THREE.DataTexture(
-      studioPixels,
-      studioWidth,
-      studioHeight,
-      THREE.RGBAFormat,
-      THREE.FloatType,
-    );
-    studio.mapping = THREE.EquirectangularReflectionMapping;
-    studio.needsUpdate = true;
-    const pmrem = new THREE.PMREMGenerator(renderer);
-    const environmentMap = pmrem.fromEquirectangular(studio);
-    scene.environment = environmentMap.texture;
-    scene.environmentIntensity = 0.4;
-    studio.dispose();
-    pmrem.dispose();
-    scene.add(new THREE.HemisphereLight(0xffffff, 0xc1c8d1, 1.1));
-    const key = new THREE.DirectionalLight(0xffffff, 2.4);
-    key.position.set(-100, 180, 260);
-    scene.add(key);
-    const rim = new THREE.DirectionalLight(0xe4edff, 0.8);
-    rim.position.set(200, -40, -200);
-    scene.add(rim);
-    const outerTexture = new THREE.VideoTexture(props.outer);
-    const innerTexture = new THREE.VideoTexture(props.inner);
-    for (const texture of [outerTexture, innerTexture]) {
-      texture.colorSpace = THREE.SRGBColorSpace;
-      texture.minFilter = THREE.LinearFilter;
-      texture.magFilter = THREE.LinearFilter;
-    }
-
-    const model = createDuoModel(outerTexture, innerTexture, environmentMap.texture);
-    const { device } = model;
-    if (props.modelUrl)
-      void model
-        .loadAppearance(props.modelUrl)
-        .then(() => invalidate())
-        .catch((reason) => setError(String(reason)));
-    const buttons = new DuoButtonSender(
-      (button, down) => latest.current.button(button, down),
-      (reason) => setError(String(reason)),
-    );
-    root.add(device);
-    scene.add(root);
-
-    const ray = new THREE.Raycaster();
-    const pointer = new THREE.Vector2();
-    let drag:
-      | {
-          pointer: number;
-          button?: DuoButton;
-          screenId?: number;
-          x: number;
-          y: number;
-          clientX: number;
-          clientY: number;
-        }
-      | undefined;
-    let yaw = 0,
-      pitch = 0;
-    let previousViewRevision = viewRevision.current;
-    let renderedAngle = angleRef.current;
-    let foldFrom = renderedAngle;
-    let foldTarget = renderedAngle;
-    let foldStartedAt = 0;
-    let foldDragging = false;
-    let renderedYaw = 0;
-    let animation = 0;
-    let visible = true;
-    let disposed = false;
-    const invalidate = () => {
-      if (!animation && visible && !document.hidden && !disposed) animation = requestAnimationFrame(animate);
-    };
-    invalidateFrame.current = invalidate;
-    let lastTime = 0;
-    let layout: ReturnType<typeof hardwareLayout> | undefined;
-    let hoveredEdge: ReturnType<typeof hardwareHoverEdge>;
-    const iconButton = (target: EventTarget | null) =>
-      target instanceof Element ? target.closest<HTMLButtonElement>('[data-duo-button]') : null;
-    const showEdge = (edge: typeof hoveredEdge) => {
-      hoveredEdge = edge;
-      for (const guide of layout?.guides ?? []) {
-        const element = hardwareNodes.current.get(guide.button);
-        if (element) element.dataset.visible = String(guide.edge === edge);
-      }
-    };
-    const pick = (event: PointerEvent) => {
-      const icon = iconButton(event.target);
-      if (icon) return { button: icon.dataset.duoButton as DuoButton };
-      const rect = renderer.domElement.getBoundingClientRect();
-      pointer.set(
-        ((event.clientX - rect.left) / rect.width) * 2 - 1,
-        1 - ((event.clientY - rect.top) / rect.height) * 2,
-      );
-      ray.setFromCamera(pointer, camera);
-      const intersection = model.pick(ray);
-      const button = intersection?.object.userData['button'] as DuoButton | undefined;
-      if (button) return { button };
-      if (!intersection?.object.userData['display']) return undefined;
-      if (!intersection.uv) return undefined;
-      const display = latest.current.state.displays.find(
-        (d) => d.id === intersection.object.userData['display'],
-      );
-      if (!display) return undefined;
-      return { screenId: display.screenId, ...panelTouch(intersection.uv.x, intersection.uv.y) };
-    };
-    const down = (event: PointerEvent) => {
-      invalidate();
-      if (drag || event.button !== 0) return;
-      if (!iconButton(event.target)) container.focus({ preventScroll: true });
-      const picked = pick(event);
-      const hardware = picked && 'button' in picked ? picked.button : undefined;
-      const mode = duoPointerMode(lockedRef.current, !!picked && !hardware, event.altKey);
-      if (mode === 'ignore' && !hardware) return;
-      const hit = mode === 'touch' && picked && 'screenId' in picked ? picked : undefined;
-      drag = {
-        pointer: event.pointerId,
-        button: hardware,
-        ...hit,
-        x: hit?.x ?? 0,
-        y: hit?.y ?? 0,
-        clientX: event.clientX,
-        clientY: event.clientY,
-      };
-      container.setPointerCapture(event.pointerId);
-      if (hardware) {
-        setError(undefined);
-        buttons.press(hardware);
-        model.highlightButton(hardware, true);
-      } else if (hit) latest.current.touch(0, hit.screenId, hit.x, hit.y);
-    };
-    const move = (event: PointerEvent) => {
-      invalidate();
-      if (!drag) {
-        const hit = pick(event);
-        const button = hit && 'button' in hit ? hit.button : undefined;
-        const rect = container.getBoundingClientRect();
-        showEdge(
-          button ?
-            layout?.guides.find((guide) => guide.button === button)?.edge
-          : layout && hardwareHoverEdge(event.clientX - rect.left, event.clientY - rect.top, layout.rect),
-        );
-        renderer.domElement.style.cursor = button ? 'pointer' : '';
-        renderer.domElement.title = button ? DUO_BUTTONS[button] : '';
-        model.highlightButton(button);
-        return;
-      }
-      if (drag.pointer !== event.pointerId || drag.button) return;
-      if (drag.screenId) {
-        const hit = pick(event);
-        if (hit && 'screenId' in hit && hit.screenId === drag.screenId) {
-          drag.x = hit.x;
-          drag.y = hit.y;
-          latest.current.touch(2, hit.screenId, hit.x, hit.y);
-        }
-      } else if (!lockedRef.current) {
-        yaw += (event.clientX - drag.clientX) * 0.008;
-        pitch = THREE.MathUtils.clamp(pitch + (event.clientY - drag.clientY) * 0.008, -1.4, 1.4);
-      }
-      drag.clientX = event.clientX;
-      drag.clientY = event.clientY;
-    };
-    const up = (event?: PointerEvent) => {
-      invalidate();
-      if (!drag || (event && drag.pointer !== event.pointerId)) return;
-      if (drag.button) {
-        buttons.release();
-        model.highlightButton();
-      } else if (drag.screenId) latest.current.touch(1, drag.screenId, drag.x, drag.y);
-      drag = undefined;
-      if (event) move(event);
-    };
-    const leave = () => {
-      invalidate();
-      if (!drag) {
-        model.highlightButton();
-        showEdge(undefined);
-      }
-    };
-    const keyDown = (event: KeyboardEvent) => {
-      invalidate();
-      const icon = iconButton(event.target);
-      if (!icon) return;
-      event.stopPropagation();
-      if (event.code !== 'Space' && event.code !== 'Enter') return;
-      event.preventDefault();
-      if (event.repeat) return;
-      const button = icon.dataset.duoButton as DuoButton;
-      buttons.press(button);
-      model.highlightButton(button, true);
-      icon.dataset.pressed = 'true';
-    };
-    const keyUp = (event: KeyboardEvent) => {
-      invalidate();
-      const icon = iconButton(event.target);
-      if (!icon) return;
-      event.stopPropagation();
-      if (event.code !== 'Space' && event.code !== 'Enter') return;
-      event.preventDefault();
-      buttons.release();
-      model.highlightButton(icon.dataset.duoButton as DuoButton);
-      icon.dataset.pressed = 'false';
-    };
-    const focus = (event: FocusEvent) => {
-      const icon = iconButton(event.target);
-      if (icon) showEdge(layout?.guides.find((guide) => guide.button === icon.dataset.duoButton)?.edge);
-    };
-    const blur = () => {
-      invalidate();
-      up();
-      buttons.release();
-      model.highlightButton();
-      showEdge(undefined);
-      hardwareNodes.current.forEach((element) => {
-        element.dataset.pressed = 'false';
-      });
-    };
-    const focusOut = (event: FocusEvent) => {
-      if (!container.contains(event.relatedTarget as Node | null)) blur();
-      else if (iconButton(event.target)) {
-        buttons.release();
-        model.highlightButton();
-      }
-    };
-    container.addEventListener('pointerleave', leave);
-    container.addEventListener('pointerdown', down);
-    container.addEventListener('pointermove', move);
-    container.addEventListener('pointerup', up);
-    container.addEventListener('pointercancel', up);
-    container.addEventListener('lostpointercapture', up);
-    container.addEventListener('keydown', keyDown);
-    container.addEventListener('keyup', keyUp);
-    container.addEventListener('focusin', focus);
-    container.addEventListener('focusout', focusOut);
-    window.addEventListener('blur', blur);
-    const resize = () => {
-      const w = container.clientWidth,
-        h = container.clientHeight;
-      if (!w || !h) return;
-      aspect = w / h;
-
-      camera.updateProjectionMatrix();
-      renderer.setSize(w, h, false);
-      invalidate();
-    };
-    const observer = new ResizeObserver(resize);
-    observer.observe(container);
-    const bounds = new THREE.Box3();
-    const center = new THREE.Vector3();
-    const extent = new THREE.Vector3();
-    const animate = (time: number) => {
-      animation = 0;
-      if (disposed || !visible || document.hidden) return;
-      const dt = Math.min((time - lastTime) / 1000, 0.05);
-      lastTime = time;
-      if (viewRevision.current !== previousViewRevision) {
-        yaw = 0;
-        pitch = 0;
-        previousViewRevision = viewRevision.current;
-      }
-      if (foldTarget !== angleRef.current) {
-        foldFrom = renderedAngle;
-        foldTarget = angleRef.current;
-        foldStartedAt = time;
-        foldDragging = interacting.current;
-      }
-      const buttonFold = motion.current;
-      renderedAngle =
-        buttonFold ? duoFoldAngle(buttonFold.from, buttonFold.target, (time - buttonFold.startedAt) / 1000)
-        : foldDragging ? THREE.MathUtils.damp(renderedAngle, foldTarget, 18, dt)
-        : duoFoldAngle(foldFrom, foldTarget, (time - foldStartedAt) / 1000);
-      if (Math.abs(renderedAngle - angleRef.current) < 0.001) renderedAngle = angleRef.current;
-      model.setAngle(renderedAngle);
-      // Closed view presents the cover; intermediate poses retain depth and true occlusion.
-      const closed = 1 - THREE.MathUtils.smoothstep(renderedAngle, 15, 110);
-      const baseYaw = (closed * Math.PI) / 2 + (viewRef.current === 'back' ? Math.PI : 0);
-      renderedYaw = THREE.MathUtils.damp(renderedYaw, baseYaw, 12, dt);
-      if (Math.abs(renderedYaw - baseYaw) < 0.001) renderedYaw = baseYaw;
-      // Camera orbit stays independent of the native device orientation.
-      root.rotation.set(
-        pitch +
-          (viewRef.current === 'table' ? -0.35
-          : viewRef.current === 'book' ? 0.2
-          : 0),
-        yaw + (viewRef.current === 'book' ? -0.2 : 0),
-        0,
-      );
-      // Apply screen rotation after turning the device over so the cover remains upright.
-      device.rotation.set(
-        0,
-        renderedYaw,
-        { portrait: 0, pud: Math.PI, 'landscape-left': Math.PI / 2, 'landscape-right': -Math.PI / 2 }[
-          latest.current.state.orientation
-        ] ?? 0,
-        'ZYX',
-      );
-      root.position.set(0, 0, 0);
-      root.updateMatrixWorld(true);
-      model.getBounds(bounds).getCenter(center);
-      bounds.getSize(extent);
-      root.position.copy(center).negate();
-      // Parallel projection keeps the far leaf's buttons visible when the device is closed.
-      const width = container.clientWidth;
-      const height = container.clientHeight;
-      const usableWidth = Math.max(0.4, 1 - 108 / width);
-      const usableHeight = Math.min(0.8, Math.max(0.35, 1 - 108 / height));
-      const halfHeight = Math.max(extent.y / (2 * usableHeight), extent.x / (2 * aspect * usableWidth));
-      camera.top = THREE.MathUtils.damp(camera.top, halfHeight, 14, dt);
-      if (Math.abs(camera.top - halfHeight) < 0.001) camera.top = halfHeight;
-      camera.bottom = -camera.top;
-      camera.left = -camera.top * aspect;
-      camera.right = camera.top * aspect;
-      camera.updateProjectionMatrix();
-
-      const buttonsMoving = model.animateButtons(dt);
-      renderer.render(scene, camera);
-      model.getBounds(bounds);
-      layout = hardwareLayout(model.buttonAnchors(), bounds, camera, width, height);
-      for (const guide of layout.guides) {
-        const element = hardwareNodes.current.get(guide.button);
-        if (!element) continue;
-        element.style.left = `${guide.x}px`;
-        element.style.top = `${guide.y}px`;
-        element.style.setProperty('--duo-hardware-icon-size', `${layout.iconSize}px`);
-        element.dataset.visible = String(guide.edge === hoveredEdge);
-      }
-      if (
-        motion.current ||
-        renderedAngle !== angleRef.current ||
-        renderedYaw !== baseYaw ||
-        camera.top !== halfHeight ||
-        buttonsMoving
-      )
-        invalidate();
-    };
-    const videoCallbacks = new Map<HTMLVideoElement, number>();
-    for (const video of [props.outer, props.inner]) {
-      const frame = () => {
-        if (disposed) return;
-        invalidate();
-        videoCallbacks.set(video, video.requestVideoFrameCallback(frame));
-      };
-      if ('requestVideoFrameCallback' in video)
-        videoCallbacks.set(video, video.requestVideoFrameCallback(frame));
-    }
-    const fallback =
-      !('requestVideoFrameCallback' in props.outer) ? window.setInterval(invalidate, 1000 / 30) : undefined;
-    const intersection = new IntersectionObserver(([entry]) => {
-      visible = !!entry?.isIntersecting;
-      invalidate();
-    });
-    intersection.observe(container);
-    document.addEventListener('visibilitychange', invalidate);
-    resize();
-    return () => {
-      disposed = true;
-      invalidateFrame.current = () => undefined;
-      intersection.disconnect();
-      document.removeEventListener('visibilitychange', invalidate);
-      for (const [video, id] of videoCallbacks) video.cancelVideoFrameCallback(id);
-      clearInterval(fallback);
-      up();
-      buttons.release();
-      cancelAnimationFrame(animation);
-      observer.disconnect();
-      window.removeEventListener('blur', blur);
-      container.removeEventListener('pointerleave', leave);
-      container.removeEventListener('pointerdown', down);
-      container.removeEventListener('pointermove', move);
-      container.removeEventListener('pointerup', up);
-      container.removeEventListener('pointercancel', up);
-      container.removeEventListener('lostpointercapture', up);
-      container.removeEventListener('keydown', keyDown);
-      container.removeEventListener('keyup', keyUp);
-      container.removeEventListener('focusin', focus);
-      container.removeEventListener('focusout', focusOut);
-      renderer.dispose();
-      renderer.forceContextLoss();
-      model.dispose();
-      outerTexture.dispose();
-      innerTexture.dispose();
-      environmentMap.dispose();
-      renderer.domElement.remove();
-    };
-  }, [props.outer, props.inner, props.modelUrl]);
-
-  return (
-    <div className="rc-duo">
-      <div
-        ref={host}
-        className="rc-duo-stage"
-        data-position-locked={positionLocked}
-        tabIndex={0}
-        role="application"
-        aria-label="iPhone Duo simulator. Touch the screen to control iOS. Unlock position to rotate the view."
-        onKeyDown={props.onKeyDown}
-        onKeyUp={props.onKeyUp}
-      >
-        {(Object.keys(DUO_BUTTONS) as DuoButton[]).map((button) => (
-          <button
-            key={button}
-            ref={(element) => {
-              if (element) hardwareNodes.current.set(button, element);
-              else hardwareNodes.current.delete(button);
-            }}
-            type="button"
-            className="rc-duo-hardware"
-            data-duo-button={button}
-            data-visible="false"
-            aria-label={DUO_BUTTONS[button]}
-            title={DUO_BUTTONS[button]}
-          >
-            <DuoHardwareIcon button={button} />
-          </button>
-        ))}
-      </div>
-      <DuoControls
-        angle={angle}
-        onFold={fold}
-        foldTarget={target}
-        onHingeDrag={cancelFold}
-        changeAngle={changeAngle}
-        interacting={interacting}
-        rotate={() => {
-          void props
-            .setOrientation(props.state.orientation === 'portrait' ? 'landscape-left' : 'portrait')
-            .catch((reason) => setError(String(reason)));
-        }}
-      >
-        {(['front', 'book', 'table', 'back'] as const).map((value) => (
-          <button
-            key={value}
-            aria-pressed={view === value}
-            onClick={() => {
-              viewRevision.current++;
-              setView(value);
-              invalidateFrame.current();
-              if (value === 'book') {
-                void props
-                  .setOrientation('portrait')
-                  .then(() => changeAngle(110))
-                  .catch((reason) => setError(String(reason)));
-              }
-              if (value === 'table') {
-                void props
-                  .setOrientation('landscape-left')
-                  .then(() => changeAngle(110))
-                  .catch((reason) => setError(String(reason)));
-              }
-            }}
-          >
-            {value === 'table' ? 'Laptop view' : value[0]!.toUpperCase() + value.slice(1)}
-          </button>
-        ))}
-        <button
-          className="rc-duo-lock"
-          aria-label="Lock position"
-          aria-pressed={positionLocked}
-          title={
-            positionLocked ?
-              'Position is locked. Screen touches still control iOS.'
-            : 'Drag the frame or background to rotate. Alt-drag rotates from the screen.'
-          }
-          onClick={() => setPositionLocked(!positionLocked)}
-        >
-          <svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
-            <rect x="4" y="9" width="12" height="9" rx="2" stroke="currentColor" strokeWidth="1.6" />
-            <path
-              d={positionLocked ? 'M6 9V6a4 4 0 0 1 8 0v3' : 'M6 9V6a4 4 0 0 1 8 0'}
-              stroke="currentColor"
-              strokeWidth="1.6"
-              strokeLinecap="round"
-            />
-          </svg>
-          {positionLocked ? 'Position locked' : 'Lock position'}
-        </button>
-      </DuoControls>
-      {error && (
-        <div role="alert" className="rc-duo-error">
-          {error}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/duo-hardware.test.ts

@@ -1,61 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import * as THREE from 'three';
-import { createDuoModel } from './duo-model';
-import { hardwareHoverEdge, hardwareLayout } from './duo-hardware';
-import { hardwareIconSize } from './duo-flat-geometry';
-
-describe('Duo edge hints', () => {
-  it.each([0, 110, 180])('keeps icon targets outside the screen at %s degrees', (angle) => {
-    const model = createDuoModel(new THREE.Texture(), new THREE.Texture());
-    model.setAngle(angle);
-    model.device.rotation.y = angle === 0 ? Math.PI / 2 : 0;
-    model.device.updateMatrixWorld(true);
-    const camera = new THREE.OrthographicCamera(-120, 120, 120, -120, 1, 1000);
-    camera.position.z = 340;
-    camera.updateMatrixWorld(true);
-    const { guides, rect, iconSize } = hardwareLayout(
-      model.buttonAnchors(),
-      model.getBounds(new THREE.Box3()),
-      camera,
-      500,
-      500,
-    );
-    expect(guides).toHaveLength(3);
-    expect(iconSize).toBe(hardwareIconSize(rect));
-    for (const guide of guides) {
-      expect(rect.containsPoint(new THREE.Vector2(guide.x, guide.y))).toBe(false);
-      expect(hardwareHoverEdge(guide.x, guide.y, rect)).toBe(guide.edge);
-    }
-    expect(guides.filter((g) => g.button !== 'side').every((g) => g.edge === 'top')).toBe(true);
-    const volume = guides.filter((guide) => guide.button !== 'side');
-    expect(Math.abs(volume[0]!.x - volume[1]!.x)).toBeGreaterThanOrEqual(48);
-    model.dispose();
-  });
-
-  it('keeps the edge visible while crossing from the device to its icon', () => {
-    const rect = new THREE.Box2(new THREE.Vector2(100, 100), new THREE.Vector2(400, 600));
-    for (const y of [104, 100, 90, 80, 72]) expect(hardwareHoverEdge(250, y, rect)).toBe('top');
-    expect(hardwareHoverEdge(250, 350, rect)).toBeUndefined();
-    expect(hardwareHoverEdge(250, 40, rect)).toBeUndefined();
-    expect(hardwareHoverEdge(428, 250, rect)).toBe('right');
-  });
-
-  it('moves hints with native screen orientation', () => {
-    const model = createDuoModel(new THREE.Texture(), new THREE.Texture());
-    model.device.rotation.z = Math.PI / 2;
-    model.device.updateMatrixWorld(true);
-    const camera = new THREE.OrthographicCamera(-120, 120, 120, -120, 1, 1000);
-    camera.position.z = 340;
-    camera.updateMatrixWorld(true);
-    const { guides } = hardwareLayout(
-      model.buttonAnchors(),
-      model.getBounds(new THREE.Box3()),
-      camera,
-      500,
-      500,
-    );
-    expect(guides.filter((g) => g.button !== 'side').every((g) => g.edge === 'left')).toBe(true);
-    expect(guides.find((g) => g.button === 'side')?.edge).toBe('top');
-    model.dispose();
-  });
-});