@limrun/ui 0.15.1 → 0.17.0-rc.1

package/src/components/duo-flat-frame.tsx

@@ -0,0 +1,145 @@
+import React, { useId } from 'react';
+
+function outline(x: number, y: number, w: number, h: number, left: number, right: number) {
+  return (
+    'M' +
+    (x + left) +
+    ',' +
+    y +
+    'H' +
+    (x + w - right) +
+    'a' +
+    right +
+    ',' +
+    right +
+    ' 0 0 1 ' +
+    right +
+    ',' +
+    right +
+    'V' +
+    (y + h - right) +
+    'a' +
+    right +
+    ',' +
+    right +
+    ' 0 0 1 ' +
+    -right +
+    ',' +
+    right +
+    'H' +
+    (x + left) +
+    'a' +
+    left +
+    ',' +
+    left +
+    ' 0 0 1 ' +
+    -left +
+    ',' +
+    -left +
+    'V' +
+    (y + left) +
+    'a' +
+    left +
+    ',' +
+    left +
+    ' 0 0 1 ' +
+    left +
+    ',' +
+    -left +
+    'Z'
+  );
+}
+
+/** Static silver rails and glass seals follow the same front silhouette as the 3D frame. */
+export function DuoFlatFrame({ inner, width, height }: { inner: boolean; width: number; height: number }) {
+  const id = useId().replace(/:/g, '');
+  const left = inner ? 8.4 : 1.25;
+  const right = 8.4;
+  return (
+    <svg className="rc-duo-flat-frame" viewBox={'0 0 ' + width + ' ' + height} aria-hidden="true">
+      <defs>
+        <linearGradient id={id + '-silver'} x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stopColor="#62676b" />
+          <stop offset="0.035" stopColor="#f9faf9" />
+          <stop offset="0.11" stopColor="#b0b4b6" />
+          <stop offset="0.31" stopColor="#fdfefd" />
+          <stop offset="0.43" stopColor="#797f84" />
+          <stop offset="0.51" stopColor="#e8eaea" />
+          <stop offset="0.7" stopColor="#979da1" />
+          <stop offset="0.87" stopColor="#fafbf9" />
+          <stop offset="1" stopColor="#5f676c" />
+        </linearGradient>
+        <linearGradient id={id + '-spine'}>
+          <stop stopColor="#4a5154" />
+          <stop offset="0.16" stopColor="#d6d9d9" />
+          <stop offset="0.4" stopColor="#f8f9f7" />
+          <stop offset="0.62" stopColor="#a2a8ab" />
+          <stop offset="0.83" stopColor="#e4e7e5" />
+          <stop offset="1" stopColor="#666e72" />
+        </linearGradient>
+      </defs>
+      {!inner && (
+        <>
+          <rect
+            x="-2.3"
+            y="0.7"
+            width="3.3"
+            height={height - 1.4}
+            rx="0.85"
+            fill={'url(#' + id + '-spine)'}
+            stroke="#8b9296"
+            strokeWidth="0.15"
+          />
+          <path d={'M-.6 2V' + (height - 2)} stroke="#f5f6f4" strokeWidth="0.22" />
+        </>
+      )}
+      <path
+        d={outline(0, 0, width, height, left, right)}
+        fill={'url(#' + id + '-silver)'}
+        stroke="#696f72"
+        strokeWidth="0.24"
+      />
+      <path
+        d={outline(0.48, 0.48, width - 0.96, height - 0.96, Math.max(0.5, left - 0.48), right - 0.48)}
+        fill="none"
+        stroke="#ffffff"
+        strokeOpacity="0.85"
+        strokeWidth="0.2"
+      />
+      <path
+        d={outline(1.12, 1.12, width - 2.24, height - 2.24, inner ? 7.15 : 0.65, 7.15)}
+        fill="#090b0d"
+        stroke="#34393c"
+        strokeWidth="0.2"
+      />
+      {[width - 16, inner ? 19 : 16].map((x) => (
+        <React.Fragment key={x}>
+          <path
+            d={'M' + x + ',0.17v0.82M' + x + ',' + (height - 1) + 'v0.82'}
+            stroke="#b1b2ac"
+            strokeWidth="1.1"
+          />
+        </React.Fragment>
+      ))}
+      {inner &&
+        [0, height - 0.6].map((y) => (
+          <rect
+            key={y}
+            x={width / 2 - 2.2}
+            y={y}
+            width="4.4"
+            height="0.6"
+            rx="0.18"
+            fill={'url(#' + id + '-spine)'}
+            stroke="#697074"
+            strokeWidth="0.14"
+          />
+        ))}
+      <path
+        d={'M' + (width - 0.1) + ',20h-.9m.9,' + (height - 40) + 'h-.9'}
+        stroke="#b1b2ac"
+        strokeWidth="1.05"
+      />
+    </svg>
+  );
+}

package/src/components/duo-flat-geometry.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest';
+import { flatFrameGeometry, flatHoverEdge, hardwareIconSize } from './duo-flat-geometry';
+
+describe('2D Duo frame controls', () => {
+  it('shrinks glyphs with the device without shrinking click targets', () => {
+    const compact = flatFrameGeometry(false, 0, 320, 360);
+    const regular = flatFrameGeometry(false, 0, 600, 600);
+    const large = flatFrameGeometry(false, 0, 1000, 1000);
+    expect(compact.iconSize).toBe(12);
+    expect(regular.iconSize).toBe(20);
+    expect(large.iconSize).toBe(24);
+    expect(hardwareIconSize({ min: { x: 0, y: 0 }, max: { x: 0, y: 0 } })).toBe(12);
+  });
+  for (const inner of [false, true]) {
+    for (const turns of [0, 1, 2, 3]) {
+      it('keeps ' + (inner ? 'inner' : 'cover') + ' controls outside the glass at rotation ' + turns, () => {
+        for (const [width, height] of [
+          [320, 240],
+          [440, 650],
+          [1000, 800],
+        ]) {
+          const f = flatFrameGeometry(inner, turns, width!, height!);
+          expect(f.scale).toBeGreaterThan(0);
+          for (const g of f.guides) {
+            expect(g.targetX - 22).toBeGreaterThanOrEqual(0);
+            expect(g.targetX + 22).toBeLessThanOrEqual(width!);
+            expect(g.targetY - 22).toBeGreaterThanOrEqual(0);
+            expect(g.targetY + 22).toBeLessThanOrEqual(height!);
+            expect(Math.abs(g.x - g.targetX) + f.iconSize / 2).toBeLessThanOrEqual(22.000001);
+            expect(Math.abs(g.y - g.targetY) + f.iconSize / 2).toBeLessThanOrEqual(22.000001);
+            expect(g.x < f.rect.min.x || g.x > f.rect.max.x || g.y < f.rect.min.y || g.y > f.rect.max.y).toBe(
+              true,
+            );
+            expect(flatHoverEdge(g.x, g.y, f.rect)).toBe(g.edge);
+          }
+          const volume = f.guides.filter((g) => g.button !== 'side');
+          expect(
+            Math.hypot(volume[0]!.targetX - volume[1]!.targetX, volume[0]!.targetY - volume[1]!.targetY),
+          ).toBeGreaterThanOrEqual(44);
+          for (const g of f.guides) {
+            const b = f.buttons.find((b) => b.button === g.button)!;
+            const radians = (f.turns * Math.PI) / 2;
+            const x = (b.x - f.bodyWidth / 2) * f.scale;
+            const y = (b.y - f.bodyHeight / 2) * f.scale;
+            if (g.edge === 'top' || g.edge === 'bottom') {
+              expect(g.x).toBeCloseTo(width! / 2 + x * Math.cos(radians) - y * Math.sin(radians));
+            } else {
+              expect(g.y).toBeCloseTo(height! / 2 + x * Math.sin(radians) + y * Math.cos(radians));
+            }
+          }
+        }
+      });
+    }
+  }
+  it('uses the 3D body proportions and rotates the inner display from native portrait pixels', () => {
+    const folded = flatFrameGeometry(false, 0, 500, 700);
+    const unfolded = flatFrameGeometry(true, 1, 700, 500);
+    expect(folded.bodyWidth * 2).toBe(unfolded.bodyWidth);
+    expect(folded.bodyHeight).toBe(unfolded.bodyHeight);
+    expect(unfolded.turns).toBe(0);
+    expect(flatFrameGeometry(true, 0, 500, 700).turns).toBe(3);
+  });
+});

package/src/components/duo-flat-geometry.ts

@@ -0,0 +1,97 @@
+import { DUO_DIMENSIONS, type DuoButton } from '../core/duo';
+
+type Edge = 'top' | 'right' | 'bottom' | 'left';
+
+/** A front projection of the 3D body's dimensions, with room for its edge controls. */
+export function flatFrameGeometry(inner: boolean, displayTurns: number, width: number, height: number) {
+  const bodyWidth = DUO_DIMENSIONS.width / (inner ? 1 : 2);
+  const bodyHeight = DUO_DIMENSIONS.height;
+  const screenWidth = inner ? 157.5 : 77.1;
+  const screenHeight = inner ? 110.8 : 112.2;
+  const turns = (displayTurns + (inner ? 3 : 0)) % 4;
+  const scale = Math.max(
+    0,
+    Math.min(
+      (width - 120) / (turns % 2 ? bodyHeight : bodyWidth),
+      (height - 120) / (turns % 2 ? bodyWidth : bodyHeight),
+    ),
+  );
+  const project = (x: number, y: number) => {
+    x = (x - bodyWidth / 2) * scale;
+    y = (y - bodyHeight / 2) * scale;
+    const p =
+      turns === 1 ? { x: -y, y: x }
+      : turns === 2 ? { x: -x, y: -y }
+      : turns === 3 ? { x: y, y: -x }
+      : { x, y };
+    return { x: p.x + width / 2, y: p.y + height / 2 };
+  };
+  const horizontal = (turns % 2 ? bodyHeight : bodyWidth) * scale;
+  const vertical = (turns % 2 ? bodyWidth : bodyHeight) * scale;
+  const rect = {
+    min: { x: (width - horizontal) / 2, y: (height - vertical) / 2 },
+    max: { x: (width + horizontal) / 2, y: (height + vertical) / 2 },
+  };
+  const buttons: { button: DuoButton; x: number; y: number; width: number; height: number; edge: Edge }[] = [
+    { button: 'volumeDown', x: bodyWidth - 37, y: -0.32, width: 9.5, height: 0.65, edge: 'top' },
+    { button: 'volumeUp', x: bodyWidth - 25, y: -0.32, width: 9.5, height: 0.65, edge: 'top' },
+    { button: 'side', x: bodyWidth + 0.35, y: bodyHeight / 2 - 21, width: 0.7, height: 13, edge: 'right' },
+  ];
+  const edges: Edge[] = ['top', 'right', 'bottom', 'left'];
+  const guides = buttons.map((b) => {
+    const edge = edges[(edges.indexOf(b.edge) + turns) % 4]!;
+    const p = project(b.x, b.y);
+    if (edge === 'top') p.y = rect.min.y - 28;
+    if (edge === 'bottom') p.y = rect.max.y + 28;
+    if (edge === 'left') p.x = rect.min.x - 28;
+    if (edge === 'right') p.x = rect.max.x + 28;
+    return { button: b.button, edge, ...p, targetX: p.x, targetY: p.y };
+  });
+  const volume = guides.filter((g) => g.button !== 'side');
+  const axis = turns % 2 ? 'y' : 'x';
+  volume.sort((a, b) => a[axis] - b[axis]);
+  // Keep glyphs over the metal caps; only spread their invisible click areas.
+  const targetAxis = turns % 2 ? 'targetY' : 'targetX';
+  if (volume[1]![axis] - volume[0]![axis] < 44) {
+    const center = (volume[0]![axis] + volume[1]![axis]) / 2;
+    volume[0]![targetAxis] = center - 22;
+    volume[1]![targetAxis] = center + 22;
+  }
+  return {
+    bodyWidth,
+    bodyHeight,
+    screenWidth,
+    screenHeight,
+    scale,
+    turns,
+    buttons,
+    guides,
+    rect,
+    iconSize: Math.min(hardwareIconSize(rect), 12 * scale),
+  };
+}
+
+/** Scale the glyph with the device while its surrounding click target stays 44 pixels. */
+export function hardwareIconSize(rect: { min: { x: number; y: number }; max: { x: number; y: number } }) {
+  return Math.max(12, Math.min(24, Math.max(rect.max.x - rect.min.x, rect.max.y - rect.min.y) / 24));
+}
+
+/** The hover band joins the metal edge to its icons without covering the display. */
+export function flatHoverEdge(
+  x: number,
+  y: number,
+  rect: ReturnType<typeof flatFrameGeometry>['rect'],
+): Edge | undefined {
+  const edges: [Edge, number, number, number, number][] = [
+    ['top', rect.min.y - y, x, rect.min.x, rect.max.x],
+    ['bottom', y - rect.max.y, x, rect.min.x, rect.max.x],
+    ['left', rect.min.x - x, y, rect.min.y, rect.max.y],
+    ['right', x - rect.max.x, y, rect.min.y, rect.max.y],
+  ];
+  return edges
+    .filter(
+      ([, distance, along, min, max]) =>
+        distance >= -7 && distance <= 52 && along >= min - 12 && along <= max + 12,
+    )
+    .sort((a, b) => Math.abs(a[1]) - Math.abs(b[1]))[0]?.[0];
+}

package/src/components/duo-fold-motion.test.tsx

@@ -0,0 +1,245 @@
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { DuoFoldMotion, useDuoFoldMotion } from './duo-fold-motion';
+import { flatFrameGeometry } from './duo-flat-geometry';
+import type { DuoOrientation } from '../core/duo';
+
+const renderer = vi.hoisted(() => ({
+  start: vi.fn(),
+  dispose: vi.fn(),
+  finish: undefined as undefined | (() => void),
+}));
+vi.mock('./duo-fold-renderer', () => ({ renderFold: renderer.start }));
+let ready: VideoFrameRequestCallback | undefined;
+let reduced = false;
+const video = document.createElement('video');
+const host = document.createElement('div');
+let root: ReturnType<typeof createRoot>;
+let prepareFold: (inner: boolean) => void;
+const cancel = vi.fn();
+const draw = vi.fn();
+const readPixels = vi.fn();
+const changePreference = new EventTarget();
+function View({
+  inner = false,
+  width = 600,
+  turns,
+  orientation = 'portrait',
+}: {
+  inner?: boolean;
+  width?: number;
+  turns?: number;
+  orientation?: DuoOrientation;
+}) {
+  const { motion, finish, prepare } = useDuoFoldMotion(
+    { current: video },
+    inner,
+    flatFrameGeometry(inner, turns ?? (inner ? 1 : 0), width, 700),
+    orientation,
+  );
+  prepareFold = prepare;
+  return motion && <DuoFoldMotion motion={motion} onFinish={finish} />;
+}
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+  reduced = false;
+  ready = undefined;
+  cancel.mockClear();
+  draw.mockClear();
+  readPixels.mockClear();
+  renderer.start.mockReset();
+  renderer.dispose.mockClear();
+  renderer.start.mockImplementation((_canvas, _motion, finish) => {
+    renderer.finish = finish;
+    return renderer.dispose;
+  });
+  vi.stubGlobal('matchMedia', () => ({
+    get matches() {
+      return reduced;
+    },
+    addEventListener: changePreference.addEventListener.bind(changePreference),
+    removeEventListener: changePreference.removeEventListener.bind(changePreference),
+  }));
+  Object.defineProperties(video, {
+    readyState: { configurable: true, value: 4 },
+    videoWidth: { configurable: true, value: 1398 },
+    videoHeight: { configurable: true, value: 2034 },
+    requestVideoFrameCallback: {
+      configurable: true,
+      value: (callback: VideoFrameRequestCallback) => {
+        ready = callback;
+        return 1;
+      },
+    },
+    cancelVideoFrameCallback: { configurable: true, value: cancel },
+  });
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+    drawImage: draw,
+    getImageData: readPixels,
+  } as unknown as CanvasRenderingContext2D);
+  root = createRoot(host);
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  expect(vi.getTimerCount()).toBe(0);
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+async function incoming() {
+  await act(async () => ready!(0, {} as VideoFrameCallbackMetadata));
+}
+it('loads the renderer only for a confirmed fold and disposes it when finished', async () => {
+  await act(async () => root.render(<View />));
+  expect(renderer.start).not.toHaveBeenCalled();
+  expect(draw).not.toHaveBeenCalled();
+  await act(async () => root.render(<View inner />));
+  expect(host.querySelector('.rc-duo-fold-hold')).not.toBeNull();
+  await incoming();
+  expect(renderer.start).toHaveBeenCalledTimes(1);
+  const motion = renderer.start.mock.calls[0]![1];
+  expect(Math.max(motion.before.width, motion.before.height)).toBeLessThanOrEqual(1024);
+  expect(Math.max(motion.after.width, motion.after.height)).toBeLessThanOrEqual(1024);
+  await act(async () => renderer.finish!());
+  expect(host.childElementCount).toBe(0);
+  expect(renderer.dispose).toHaveBeenCalledTimes(1);
+});
+it('cancels on resize and ignores a late frame callback', async () => {
+  await act(async () => root.render(<View />));
+  await act(async () => root.render(<View inner />));
+  const late = ready!;
+  await act(async () => root.render(<View inner width={400} />));
+  await act(async () => late(0, {} as VideoFrameCallbackMetadata));
+  expect(host.childElementCount).toBe(0);
+  expect(renderer.start).not.toHaveBeenCalled();
+});
+it('disposes an interrupted fold before starting its reverse', async () => {
+  await act(async () => root.render(<View />));
+  await act(async () => root.render(<View inner />));
+  await incoming();
+  await act(async () => root.render(<View />));
+  expect(renderer.dispose).toHaveBeenCalledTimes(1);
+  await incoming();
+  expect(renderer.start).toHaveBeenCalledTimes(2);
+  await act(async () => renderer.finish!());
+  expect(host.childElementCount).toBe(0);
+});
+it('skips GPU work with reduced motion and cancels when the preference changes', async () => {
+  reduced = true;
+  await act(async () => root.render(<View />));
+  await act(async () => root.render(<View inner />));
+  expect(draw).not.toHaveBeenCalled();
+  expect(renderer.start).not.toHaveBeenCalled();
+  reduced = false;
+  await act(async () => root.render(<View />));
+  await incoming();
+  reduced = true;
+  await act(async () => changePreference.dispatchEvent(new Event('change')));
+  expect(renderer.dispose).toHaveBeenCalledTimes(1);
+  expect(host.childElementCount).toBe(0);
+});
+it('starts on the first incoming frame without brightness checks or timer delays', async () => {
+  await act(async () => root.render(<View />));
+  await act(async () => root.render(<View inner />));
+  expect(renderer.start).not.toHaveBeenCalled();
+  expect(host.querySelector('.rc-duo-fold-hold')).not.toBeNull();
+  await incoming();
+  expect(renderer.start).toHaveBeenCalledTimes(1);
+  expect(readPixels).not.toHaveBeenCalled();
+  expect(vi.getTimerCount()).toBe(0);
+});
+it('uses the settled native orientation without rotating the entire phone', async () => {
+  await act(async () => root.render(<View />));
+  await act(async () => root.render(<View inner turns={0} />));
+  await act(async () => root.render(<View inner turns={1} />));
+  await incoming();
+  const motion = renderer.start.mock.calls[0]![1];
+  expect(motion.to.frame.turns).toBe(0);
+  expect(motion.from.frame.turns).toBe(0);
+});
+for (const fromInner of [false, true]) {
+  for (const pose of [0, 1, 2, 3]) {
+    it(`finishes ${
+      fromInner ? 'folding' : 'unfolding'
+    } at pose ${pose} when orientation arrives after video`, async () => {
+      const fromTurns = (pose + (fromInner ? 1 : 0)) % 4;
+      const toTurns = (pose + (fromInner ? 0 : 1)) % 4;
+      await act(async () => root.render(<View inner={fromInner} turns={fromTurns} />));
+      await act(async () => root.render(<View inner={!fromInner} turns={fromTurns} />));
+      await incoming();
+      expect(renderer.start).toHaveBeenCalledTimes(1);
+      const motion = renderer.start.mock.calls[0]![1];
+      expect(motion.from.frame.turns).toBe(pose);
+      expect(motion.to.frame.turns).toBe(pose);
+      await act(async () => root.render(<View inner={!fromInner} turns={toTurns} />));
+      expect(renderer.start).toHaveBeenCalledTimes(1);
+      expect(renderer.dispose).not.toHaveBeenCalled();
+      expect(host.querySelector('.rc-duo-fold-canvas')).not.toBeNull();
+      await act(async () => renderer.finish!());
+      expect(renderer.dispose).toHaveBeenCalledTimes(1);
+    });
+  }
+}
+it('still cancels an active fold when the device is explicitly rotated', async () => {
+  await act(async () => root.render(<View />));
+  await act(async () => root.render(<View inner />));
+  await incoming();
+  await act(async () => root.render(<View inner turns={2} orientation="landscape-left" />));
+  expect(renderer.dispose).toHaveBeenCalledTimes(1);
+  expect(host.childElementCount).toBe(0);
+});
+it('waits for a usable frame if a video event precedes its dimensions', async () => {
+  await act(async () => root.render(<View />));
+  await act(async () => root.render(<View inner />));
+  Object.defineProperty(video, 'videoWidth', { configurable: true, value: 0 });
+  await incoming();
+  expect(renderer.start).not.toHaveBeenCalled();
+  expect(host.querySelector('.rc-duo-fold-hold')).not.toBeNull();
+  Object.defineProperty(video, 'videoWidth', { configurable: true, value: 1398 });
+  await incoming();
+  expect(renderer.start).toHaveBeenCalledTimes(1);
+});
+it('returns to live video on missing frames or WebGL failure', async () => {
+  await act(async () => root.render(<View />));
+  await act(async () => root.render(<View inner />));
+  Object.defineProperty(video, 'readyState', { configurable: true, value: 0 });
+  await act(async () => vi.advanceTimersByTime(2500));
+  expect(host.childElementCount).toBe(0);
+  Object.defineProperty(video, 'readyState', { configurable: true, value: 4 });
+  renderer.start.mockImplementation(() => {
+    throw new Error('WebGL unavailable');
+  });
+  await act(async () => root.render(<View />));
+  await incoming();
+  expect(host.childElementCount).toBe(0);
+});
+
+it('captures before the native command can blank the outgoing display', async () => {
+  await act(async () => root.render(<View />));
+  await act(async () => prepareFold(true));
+  expect(host.querySelector('.rc-duo-fold-hold')).not.toBeNull();
+  const outgoingCaptures = () => draw.mock.calls.filter(([source]) => source === video).length;
+  expect(outgoingCaptures()).toBe(1);
+  await act(async () => root.render(<View inner />));
+  expect(outgoingCaptures()).toBe(1);
+  await incoming();
+  expect(renderer.start).toHaveBeenCalledTimes(1);
+});
+it('releases a prepared image when a command never changes the native display', async () => {
+  await act(async () => root.render(<View />));
+  await act(async () => prepareFold(true));
+  await act(async () => vi.advanceTimersByTime(5000));
+  expect(host.childElementCount).toBe(0);
+  expect(renderer.start).not.toHaveBeenCalled();
+});
+
+it('accepts a black first frame without waiting for a brighter one', async () => {
+  await act(async () => root.render(<View />));
+  await act(async () => root.render(<View inner />));
+  readPixels.mockReturnValue({ data: new Uint8ClampedArray([0, 0, 0, 255]) });
+  await incoming();
+  expect(renderer.start).toHaveBeenCalledTimes(1);
+  expect(vi.getTimerCount()).toBe(0);
+});