@limrun/ui 0.15.1 → 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

@@ -1,6 +1,7 @@
 import { useState, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
-import { RemoteControl, RemoteControlHandle } from './components/remote-control';
+import { RemoteControl } from './components/remote-control-framed';
+import type { RemoteControlHandle } from './components/remote-control';
 import { AxSnapshot } from './core/ax-tree';
 
 type InspectChoice = 'off' | 'hover-only' | 'select';
@@ -8,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');
@@ -63,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">
@@ -194,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}

package/src/frame-assets.ts

@@ -0,0 +1,22 @@
+// Limrun's bundled device frames and boot logos. Imported only by the default
+// entry so `@limrun/ui/lite` ships without ~600 KB of inlined artwork.
+import type { RemoteControlAssets } from './components/remote-control';
+import iphoneFrame from './assets/iphone16pro_black_bg.webp';
+import iphoneFrameLandscape from './assets/iphone16pro_black_landscape_bg.webp';
+import pixelFrame from './assets/pixel9_black.webp';
+import pixelFrameLandscape from './assets/pixel9_black_landscape.webp';
+import pixelTabletFrame from './assets/pixel_tablet_portrait.webp';
+import pixelTabletFrameLandscape from './assets/pixel_tablet_landscape.webp';
+import appleLogo from './assets/Apple_logo_white.svg';
+import androidBootLogo from './assets/android_boot.webp';
+
+export const defaultRemoteControlAssets: RemoteControlAssets = {
+  ios: { frame: iphoneFrame, frameLandscape: iphoneFrameLandscape, loadingLogo: appleLogo },
+  android: {
+    frame: pixelFrame,
+    frameLandscape: pixelFrameLandscape,
+    tabletFrame: pixelTabletFrame,
+    tabletFrameLandscape: pixelTabletFrameLandscape,
+    loadingLogo: androidBootLogo,
+  },
+};

package/src/index.ts

@@ -1,7 +1,11 @@
-export { RemoteControl } from './components/remote-control';
+export { RemoteControl } from './components/remote-control-framed';
+export { defaultRemoteControlAssets } from './frame-assets';
 export type {
   RemoteControlProps,
   RemoteControlHandle,
+  RemoteControlAssets,
+  RemoteControlPlatformAssets,
+  RemoteControlConnectionState,
   MicrophoneState,
   CameraStreamStats,
 } from './components/remote-control';

package/src/lite.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, test } from 'vitest';
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+// Guards the reason the lite entry exists: an embed that imports it must not
+// pull the bundled device artwork. Runs against dist, so build first.
+const dist = join(__dirname, '..', 'dist');
+const describeDist = existsSync(join(dist, 'lite.js')) ? describe : describe.skip;
+
+describeDist('@limrun/ui/lite bundle', () => {
+  const chunksOf = (entry: string): string[] => {
+    const src = readFileSync(join(dist, entry), 'utf8');
+    const chunks = [...src.matchAll(/from "\.\/([^"]+)"/g)].map((m) => m[1]);
+    return [src, ...chunks.map((c) => readFileSync(join(dist, c), 'utf8'))];
+  };
+
+  test('lite entry and its chunks carry no inlined images', () => {
+    for (const code of chunksOf('lite.js')) {
+      expect(code).not.toMatch(/data:image\//);
+    }
+  });
+
+  test('default entry still bundles the device frames (positive control)', () => {
+    expect(chunksOf('index.js').some((code) => /data:image\/webp/.test(code))).toBe(true);
+  });
+
+  test('one stylesheet keeps its historical name', () => {
+    expect(readdirSync(dist).filter((f) => f.endsWith('.css'))).toEqual(['index.css']);
+  });
+});

package/src/lite.ts

@@ -0,0 +1,30 @@
+// Frameless entry: identical API, but no bundled device artwork. Pass `assets`
+// to add frames or boot logos.
+export { RemoteControl } from './components/remote-control';
+export type {
+  RemoteControlProps,
+  RemoteControlHandle,
+  RemoteControlAssets,
+  RemoteControlPlatformAssets,
+  RemoteControlConnectionState,
+  MicrophoneState,
+  CameraStreamStats,
+} from './components/remote-control';
+export type { CameraCaptureInfo, CameraFacingMode, CameraRequest, CameraResult } from './core/camera';
+
+// Accessibility / inspect-mode types and helpers. Exported so customers can
+// build their own side panels, search UIs, or agent-driven inspectors on top
+// of the snapshots delivered via `onAxSnapshotChange`.
+export type { AxSnapshot, AxElement, AxRect, AxSelectors, AxPlatform } from './core/ax-tree';
+export type { AndroidElementTreeOptions, AxStatus } from './core/ax-fetcher';
+export {
+  axElementAtPoint,
+  axElementSelectorExpression,
+  axElementSummary,
+  axElementsEqual,
+  axSnapshotsEqual,
+  clampAxFrameForScreen,
+  normalizeAndroidTree,
+  normalizeIosTree,
+  AX_UNAVAILABLE_ERROR,
+} from './core/ax-tree';

package/vite.config.ts

@@ -11,6 +11,7 @@ export default defineConfig({
     lib: {
       entry: {
         index: resolve(__dirname, 'src/index.ts'),
+        lite: resolve(__dirname, 'src/lite.ts'),
       },
       name: 'LimrunUI',
       formats: ['es', 'cjs'],
@@ -19,6 +20,10 @@ export default defineConfig({
     rollupOptions: {
       external: ['react', 'react-dom', 'react/jsx-runtime'],
       output: {
+        // Both entries share one stylesheet; keep its historical name so
+        // consumers that reference dist/index.css directly keep working.
+        assetFileNames: (info) =>
+          info.names?.some((n) => n.endsWith('.css')) ? 'index.css' : '[name][extname]',
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',