@limrun/ui 0.16.0 → 0.17.0-rc.1

package/src/core/duo.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+  createDisplayTouchMessage,
+  flatDisplayTouch,
+  duoPointerMode,
+  DuoButtonSender,
+  HingeSender,
+  panelTouch,
+  validHingeAngle,
+} from './duo';
+
+describe('native Duo input', () => {
+  it.each([
+    [0, 0.2, 0.3],
+    [1, 0.3, 0.8],
+    [2, 0.8, 0.7],
+    [3, 0.7, 0.2],
+  ])('maps 2D screen coordinates back to the native panel at rotation %s', (turns, x, y) => {
+    const point = flatDisplayTouch(0.2, 0.3, turns!);
+    expect(point.x).toBeCloseTo(x!);
+    expect(point.y).toBeCloseTo(y!);
+  });
+  it('keeps a captured drag inside the native panel after it leaves the screen', () => {
+    expect(flatDisplayTouch(-1, 2, 1)).toEqual({ x: 1, y: 1 });
+  });
+  it('rejects non-finite and out-of-range hinge values', () => {
+    for (const angle of [NaN, Infinity, -1, 181]) expect(validHingeAngle(angle)).toBe(false);
+    for (const angle of [0, 45.5, 90, 180]) expect(validHingeAngle(angle)).toBe(true);
+  });
+  it('encodes panel identity and top-left coordinates without video rotation', () => {
+    const point = panelTouch(0.3, 0.6);
+    const data = new DataView(createDisplayTouchMessage(0, 3, point.x, point.y));
+    expect(data.byteLength).toBe(12);
+    expect(data.getUint8(0)).toBe(19);
+    expect(data.getUint8(2)).toBe(3);
+    expect(data.getFloat32(4, true)).toBeCloseTo(0.3);
+    expect(data.getFloat32(8, true)).toBeCloseTo(0.4);
+    expect(() => createDisplayTouchMessage(0, 3, NaN, 0)).toThrow();
+  });
+  it('sends the final slider angle while coalescing intermediate positions', async () => {
+    let finish!: () => void;
+    const send = vi
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise<void>((resolve) => {
+            finish = resolve;
+          }),
+      )
+      .mockResolvedValue(undefined);
+    const sender = new HingeSender(send, vi.fn());
+    sender.set(10);
+    sender.set(20);
+    sender.set(90);
+    sender.set(180);
+    expect(send.mock.calls).toEqual([[10]]);
+    finish();
+    await vi.waitFor(() => expect(send.mock.calls).toEqual([[10], [180]]));
+  });
+  it('drops pending angles after disconnect and reports failures', async () => {
+    const failed = vi.fn();
+    const sender = new HingeSender(async () => {
+      throw new Error('offline');
+    }, failed);
+    sender.set(120);
+    await vi.waitFor(() => expect(failed).toHaveBeenCalledOnce());
+    sender.stop();
+    sender.set(0);
+    expect(failed).toHaveBeenCalledOnce();
+  });
+});
+
+describe('Duo position lock', () => {
+  it.each([false, true])('keeps touch active while locked (Alt=%s)', (alt) => {
+    expect(duoPointerMode(true, true, alt)).toBe('touch');
+    expect(duoPointerMode(true, false, alt)).toBe('ignore');
+  });
+  it('allows deliberate orbit only after unlocking', () => {
+    expect(duoPointerMode(false, false, false)).toBe('orbit');
+    expect(duoPointerMode(false, true, false)).toBe('touch');
+    expect(duoPointerMode(false, true, true)).toBe('orbit');
+  });
+});
+
+describe('Duo hardware input', () => {
+  it('orders a quick release after the acknowledged down event', async () => {
+    let ack!: () => void;
+    const send = vi
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise<void>((resolve) => {
+            ack = resolve;
+          }),
+      )
+      .mockResolvedValue(undefined);
+    const sender = new DuoButtonSender(send, vi.fn());
+    sender.press('side');
+    sender.release();
+    sender.release();
+    await vi.waitFor(() => expect(send.mock.calls).toEqual([['side', true]]));
+    ack();
+    await vi.waitFor(() =>
+      expect(send.mock.calls).toEqual([
+        ['side', true],
+        ['side', false],
+      ]),
+    );
+  });
+  it('still releases when a down event fails or times out', async () => {
+    const send = vi.fn().mockRejectedValueOnce(new Error('timeout')).mockResolvedValue(undefined);
+    const failed = vi.fn();
+    const sender = new DuoButtonSender(send, failed);
+    sender.press('volumeDown');
+    sender.press('volumeUp');
+    sender.release();
+    await vi.waitFor(() =>
+      expect(send.mock.calls).toEqual([
+        ['volumeDown', true],
+        ['volumeDown', false],
+      ]),
+    );
+    expect(failed).toHaveBeenCalledOnce();
+  });
+  it('releases a button if the browser loses the pointer release', async () => {
+    vi.useFakeTimers();
+    try {
+      const send = vi.fn().mockResolvedValue(undefined);
+      const sender = new DuoButtonSender(send, vi.fn());
+      sender.press('volumeUp');
+      await vi.advanceTimersByTimeAsync(10000);
+      expect(send.mock.calls).toEqual([
+        ['volumeUp', true],
+        ['volumeUp', false],
+      ]);
+      sender.release();
+      expect(send).toHaveBeenCalledTimes(2);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/src/core/duo.ts

@@ -0,0 +1,156 @@
+/** Native iPhone Duo display metadata. Pixel geometry comes from CoreSimulator. */
+export interface DuoDisplay {
+  id: 'outer' | 'inner';
+  screenId: number;
+  trackId: string;
+  width: number;
+  height: number;
+  scale: number;
+  orientation: number;
+}
+
+export type DuoOrientation = 'portrait' | 'pud' | 'landscape-left' | 'landscape-right';
+
+export interface DuoState {
+  orientation: DuoOrientation;
+  angleDegrees: number;
+  minAngleDegrees: number;
+  maxAngleDegrees: number;
+  displays: DuoDisplay[];
+}
+
+export const DUO_DIMENSIONS = { width: 164.6, height: 117.8, depth: 5.2 } as const;
+
+/** Invert the CSS display rotation before sending native panel coordinates. */
+export function flatDisplayTouch(x: number, y: number, turns: number): { x: number; y: number } {
+  x = Math.max(0, Math.min(1, x));
+  y = Math.max(0, Math.min(1, y));
+  if (turns === 1) return { x: y, y: 1 - x };
+  if (turns === 2) return { x: 1 - x, y: 1 - y };
+  if (turns === 3) return { x: 1 - y, y: x };
+  return { x, y };
+}
+
+export function validHingeAngle(angle: number): boolean {
+  return Number.isFinite(angle) && angle >= 0 && angle <= 180;
+}
+
+/** Mesh UVs use the native portrait panel; HID has a top-left origin. */
+export function panelTouch(u: number, v: number): { x: number; y: number } {
+  return { x: Math.max(0, Math.min(1, u)), y: Math.max(0, Math.min(1, 1 - v)) };
+}
+
+/** Locking the view never suppresses screen input, including accidental Alt presses. */
+export function duoPointerMode(
+  locked: boolean,
+  screenHit: boolean,
+  altKey: boolean,
+): 'touch' | 'orbit' | 'ignore' {
+  if (screenHit && (locked || !altKey)) return 'touch';
+  return locked ? 'ignore' : 'orbit';
+}
+
+export function createDisplayTouchMessage(
+  action: number,
+  screenId: number,
+  x: number,
+  y: number,
+): ArrayBuffer {
+  if (
+    !Number.isInteger(action) ||
+    action < 0 ||
+    action > 3 ||
+    !Number.isInteger(screenId) ||
+    screenId < 1 ||
+    screenId > 255 ||
+    !Number.isFinite(x) ||
+    !Number.isFinite(y) ||
+    x < 0 ||
+    x > 1 ||
+    y < 0 ||
+    y > 1
+  ) {
+    throw new RangeError('Invalid display touch coordinates');
+  }
+  const message = new ArrayBuffer(12);
+  const view = new DataView(message);
+  view.setUint8(0, 19);
+  view.setUint8(1, action);
+  view.setUint8(2, screenId);
+  view.setFloat32(4, x, true);
+  view.setFloat32(8, y, true);
+  return message;
+}
+
+/** One request in flight; intermediate slider positions are replaced by the newest position. */
+export class HingeSender {
+  private latest: number | undefined;
+  private running = false;
+  private stopped = false;
+  constructor(
+    private send: (angle: number) => Promise<void>,
+    private failed: (error: unknown) => void,
+  ) {}
+
+  set(angle: number): void {
+    if (this.stopped || !validHingeAngle(angle)) return;
+    this.latest = angle;
+    void this.flush();
+  }
+
+  stop(): void {
+    this.stopped = true;
+    this.latest = undefined;
+  }
+
+  private async flush(): Promise<void> {
+    if (this.running || this.stopped) return;
+    this.running = true;
+    try {
+      while (this.latest !== undefined && !this.stopped) {
+        const angle = this.latest;
+        this.latest = undefined;
+        await this.send(angle);
+      }
+    } catch (error) {
+      this.latest = undefined;
+      if (!this.stopped) this.failed(error);
+    } finally {
+      this.running = false;
+    }
+  }
+}
+
+export type DuoButton = 'side' | 'volumeUp' | 'volumeDown';
+export const DUO_BUTTONS: Record<DuoButton, string> = {
+  side: 'Sleep/Wake',
+  volumeUp: 'Volume Up',
+  volumeDown: 'Volume Down',
+};
+
+/** Keeps button edges ordered, including releases after cancellation or a failed press. */
+export class DuoButtonSender {
+  private held?: DuoButton;
+  private tail = Promise.resolve();
+  private timeout?: ReturnType<typeof setTimeout>;
+  constructor(
+    private send: (button: DuoButton, down: boolean) => Promise<void>,
+    private failed: (error: unknown) => void,
+  ) {}
+  press(button: DuoButton): void {
+    if (this.held) return;
+    this.held = button;
+    this.enqueue(button, true);
+    this.timeout = setTimeout(() => this.release(), 10000);
+  }
+  release(): void {
+    if (!this.held) return;
+    clearTimeout(this.timeout);
+    const button = this.held;
+    this.held = undefined;
+    this.enqueue(button, false);
+  }
+  private enqueue(button: DuoButton, down: boolean): void {
+    this.tail = this.tail.then(() => this.send(button, down)).catch(this.failed);
+  }
+}

package/src/demo.tsx

@@ -9,6 +9,7 @@ type InspectChoice = 'off' | 'hover-only' | 'select';
 // Pre-fill from query string so the developer testing the demo can deeplink
 // `?url=...&token=...&inspect=select&autoconnect=1`. Nothing is persisted.
 const initialParams = new URLSearchParams(window.location.search);
+window.debugRemoteControl = initialParams.get('debug') === '1';
 const initialUrl = initialParams.get('url') || 'ws://localhost:8833/signaling';
 const initialToken = initialParams.get('token') || 'token';
 const initialPlatformParam = initialParams.get('platform');
@@ -64,6 +65,18 @@ function Demo() {
     }
   };
 
+  if (initialParams.get('compact') === '1') {
+    return (
+      <div style={{ position: 'fixed', inset: 0, background: '#edf0f4' }}>
+        <RemoteControl
+          url={url}
+          token={token}
+          deviceModel={initialParams.get('model') === 'iphone-duo' ? 'iphone-duo' : undefined}
+        />
+      </div>
+    );
+  }
+
   return (
     <>
       <div className="header">
@@ -195,6 +208,7 @@ function Demo() {
                 <h3>{platform === 'ios' ? '📱 iOS with Frame' : '🤖 Android (No Frame)'}</h3>
                 <div className="device-wrapper">
                   <RemoteControl
+                    deviceModel={initialParams.get('model') === 'iphone-duo' ? 'iphone-duo' : undefined}
                     key={key}
                     ref={remoteControlRef}
                     url={url}