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

package/src/components/duo-view.test.tsx

@@ -1,104 +0,0 @@
-import React, { act, useEffect } from 'react';
-import { createRoot } from 'react-dom/client';
-import { afterEach, expect, it, vi } from 'vitest';
-import DuoView from './duo-view';
-import type { DuoFrameProps } from './duo-frame';
-
-const renderer = vi.hoisted(() => ({ loaded: vi.fn(), released: vi.fn() }));
-vi.mock('./duo-frame', () => {
-  renderer.loaded();
-  return {
-    default: function Frame() {
-      useEffect(() => () => renderer.released(), []);
-      return <canvas />;
-    },
-  };
-});
-afterEach(() => {
-  vi.restoreAllMocks();
-  vi.unstubAllGlobals();
-});
-
-it('starts without a renderer, loads it on request and releases it when returning to native video', async () => {
-  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
-  vi.stubGlobal(
-    'ResizeObserver',
-    class {
-      observe() {}
-      disconnect() {}
-    },
-  );
-  vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined);
-  vi.spyOn(HTMLMediaElement.prototype, 'pause').mockImplementation(() => undefined);
-  const outer = document.createElement('video');
-  const inner = document.createElement('video');
-  outer.srcObject = {} as MediaStream;
-  inner.srcObject = {} as MediaStream;
-  const props: DuoFrameProps = {
-    outer,
-    inner,
-    state: {
-      angleDegrees: 0,
-      minAngleDegrees: 0,
-      maxAngleDegrees: 180,
-      orientation: 'portrait',
-      displays: [
-        { id: 'outer', screenId: 1, trackId: 'outer', width: 1398, height: 2034, scale: 3, orientation: 1 },
-        { id: 'inner', screenId: 2, trackId: 'inner', width: 2034, height: 2912, scale: 3, orientation: 3 },
-      ],
-    },
-    setAngle: vi.fn().mockResolvedValue(undefined),
-    setOrientation: vi.fn().mockResolvedValue(undefined),
-    button: vi.fn().mockResolvedValue(undefined),
-    touch: vi.fn(),
-    onKeyDown: vi.fn(),
-    onKeyUp: vi.fn(),
-  };
-  const host = document.createElement('div');
-  const root = createRoot(host);
-  const clickMode = async (label: string) => {
-    await act(async () => {
-      [...host.querySelectorAll('.rc-duo-mode button')]
-        .find((b) => b.textContent === label)!
-        .dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    });
-  };
-  try {
-    await act(async () => root.render(<DuoView {...props} />));
-    expect(renderer.loaded).not.toHaveBeenCalled();
-    expect(host.querySelector('canvas')).toBeNull();
-    expect(host.querySelector('.rc-duo-flat-frame')).not.toBeNull();
-    expect(host.querySelectorAll('.rc-duo-physical')).toHaveLength(3);
-    expect(host.querySelectorAll('.rc-duo-hardware')).toHaveLength(3);
-    expect(host.querySelector('[aria-label="Rotate device"]')).not.toBeNull();
-    expect(host.querySelector('input[type=range]')).not.toBeNull();
-    expect(host.querySelector('video')!.srcObject).toBe(outer.srcObject);
-    const press = async (selector: string, type: string) => {
-      await act(async () => {
-        host.querySelector(selector)!.dispatchEvent(new KeyboardEvent(type, { key: 'Enter', bubbles: true }));
-      });
-    };
-    await press('.rc-duo-physical[data-duo-button=side]', 'keydown');
-    await press('.rc-duo-physical[data-duo-button=side]', 'keyup');
-    await press('.rc-duo-hardware[data-duo-button=volumeUp]', 'keydown');
-    await press('.rc-duo-hardware[data-duo-button=volumeUp]', 'keyup');
-    expect(props.button).toHaveBeenNthCalledWith(1, 'side', true);
-    expect(props.button).toHaveBeenNthCalledWith(2, 'side', false);
-    expect(props.button).toHaveBeenNthCalledWith(3, 'volumeUp', true);
-    expect(props.button).toHaveBeenNthCalledWith(4, 'volumeUp', false);
-    await press('.rc-duo-hardware[data-duo-button=volumeDown]', 'keydown');
-    await clickMode('3D');
-    expect(props.button).toHaveBeenLastCalledWith('volumeDown', false);
-    expect(renderer.loaded).toHaveBeenCalledOnce();
-    expect(host.querySelector('canvas')).not.toBeNull();
-    await clickMode('2D');
-    expect(renderer.released).toHaveBeenCalledOnce();
-    expect(host.querySelector('canvas')).toBeNull();
-    expect(host.querySelector('video')!.srcObject).toBe(outer.srcObject);
-    expect(props.setAngle).not.toHaveBeenCalled();
-    await act(async () => root.render(<DuoView {...props} state={{ ...props.state, angleDegrees: 180 }} />));
-    expect(host.querySelector('video')!.srcObject).toBe(inner.srcObject);
-  } finally {
-    await act(async () => root.unmount());
-  }
-});

package/src/components/duo-view.tsx

@@ -1,315 +0,0 @@
-import React, { lazy, Suspense, useEffect, useRef, useState } from 'react';
-import { DUO_BUTTONS, DuoButtonSender, flatDisplayTouch, type DuoButton } from '../core/duo';
-import type { DuoFrameProps } from './duo-frame';
-import { DuoControls, DuoHardwareIcon, useDuoHinge } from './duo-controls';
-import { DuoFlatFrame } from './duo-flat-frame';
-import { flatFrameGeometry, flatHoverEdge } from './duo-flat-geometry';
-import { DuoFoldMotion, useDuoFoldMotion } from './duo-fold-motion';
-
-const DuoFrame = lazy(() => import('./duo-frame'));
-
-/** Native video is the default; only an explicit 3D selection loads the renderer and body asset. */
-export default function DuoView(props: DuoFrameProps) {
-  const [mode, setMode] = useState<'2d' | '3d'>('2d');
-  return (
-    <div className="rc-duo-view">
-      {mode === '3d' ?
-        <Suspense fallback={<DuoFlat {...props} />}>
-          <DuoFrame {...props} />
-        </Suspense>
-      : <DuoFlat {...props} />}
-      <div className="rc-duo-mode" role="group" aria-label="Device rendering">
-        <button type="button" aria-pressed={mode === '2d'} onClick={() => setMode('2d')}>
-          2D
-        </button>
-        <button type="button" aria-pressed={mode === '3d'} onClick={() => setMode('3d')}>
-          3D
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function DuoFlat(props: DuoFrameProps) {
-  const stage = useRef<HTMLDivElement>(null);
-  const video = useRef<HTMLVideoElement>(null);
-  const latest = useRef(props);
-  latest.current = props;
-  const [size, setSize] = useState({ width: 0, height: 0 });
-  const [error, setError] = useState<string>();
-  const [edge, setEdge] = useState<ReturnType<typeof flatHoverEdge>>();
-  const [hovered, setHovered] = useState<DuoButton>();
-  const [pressed, setPressed] = useState<DuoButton>();
-  const held = useRef<{ pointer: number; screenId: number; x: number; y: number } | undefined>(undefined);
-  const hardware = useRef<DuoButtonSender | null>(null);
-  const display = props.state.displays.find(
-    (d) => d.id === (props.state.angleDegrees < 90 ? 'outer' : 'inner'),
-  );
-  const source = display?.id === 'inner' ? props.inner : props.outer;
-  const turns =
-    display?.orientation === 2 ? 2
-    : display?.orientation === 3 ? 1
-    : display?.orientation === 4 ? 3
-    : 0;
-  const inner = display?.id === 'inner';
-  const frame = flatFrameGeometry(inner, turns, size.width, size.height);
-  const { bodyWidth, bodyHeight, screenWidth, screenHeight, scale } = frame;
-  const width = screenWidth * scale;
-  const height = screenHeight * scale;
-
-  useEffect(() => {
-    const observer = new ResizeObserver(([entry]) => {
-      if (entry) setSize({ width: entry.contentRect.width, height: entry.contentRect.height });
-    });
-    if (stage.current) observer.observe(stage.current);
-    return () => observer.disconnect();
-  }, []);
-
-  useEffect(() => {
-    const target = video.current;
-    if (!target || !source) return;
-    const sync = () => {
-      if (target.srcObject !== source.srcObject) target.srcObject = source.srcObject;
-      void target.play().catch(() => undefined);
-      props.outer?.pause();
-      props.inner?.pause();
-    };
-    sync();
-    source.addEventListener('loadedmetadata', sync);
-    return () => {
-      source.removeEventListener('loadedmetadata', sync);
-      target.pause();
-      target.srcObject = null;
-      for (const original of [props.outer, props.inner]) void original?.play().catch(() => undefined);
-    };
-  }, [source, props.outer, props.inner]);
-
-  const {
-    motion,
-    finish: finishMotion,
-    prepare,
-  } = useDuoFoldMotion(video, inner, frame, props.state.orientation);
-  const { angle, changeAngle, interacting } = useDuoHinge(
-    props.state.angleDegrees,
-    async (value) => {
-      prepare(value >= 90);
-      try {
-        await props.setAngle(value);
-      } catch (reason) {
-        finishMotion();
-        throw reason;
-      }
-    },
-    setError,
-  );
-
-  const releaseTouch = () => {
-    if (!held.current) return;
-    const { screenId, x, y } = held.current;
-    latest.current.touch(1, screenId, x, y);
-    held.current = undefined;
-  };
-  useEffect(() => {
-    hardware.current = new DuoButtonSender(
-      (button, down) => latest.current.button(button, down),
-      (e) => setError(String(e)),
-    );
-    const release = () => {
-      releaseTouch();
-      hardware.current?.release();
-      setPressed(undefined);
-    };
-    window.addEventListener('blur', release);
-    return () => {
-      release();
-      window.removeEventListener('blur', release);
-    };
-  }, []);
-  useEffect(() => {
-    releaseTouch();
-  }, [display?.screenId, turns]);
-
-  const releaseButton = () => {
-    hardware.current?.release();
-    setPressed(undefined);
-  };
-  const buttonEvents = (button: DuoButton): React.ButtonHTMLAttributes<HTMLButtonElement> => ({
-    onPointerDown: (event) => {
-      if (motion || event.button !== 0) return;
-      event.currentTarget.setPointerCapture(event.pointerId);
-      hardware.current?.press(button);
-      setPressed(button);
-    },
-    onPointerUp: releaseButton,
-    onPointerCancel: releaseButton,
-    onLostPointerCapture: releaseButton,
-    onBlur: releaseButton,
-    onPointerEnter: () => setHovered(button),
-    onPointerLeave: () => setHovered(undefined),
-    onFocus: () => setEdge(frame.guides.find((g) => g.button === button)?.edge),
-    onKeyDown: (event) => {
-      if (motion) return;
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        if (!event.repeat) {
-          hardware.current?.press(button);
-          setPressed(button);
-        }
-      }
-    },
-    onKeyUp: (event) => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        releaseButton();
-      }
-    },
-  });
-  const point = (event: React.PointerEvent<HTMLDivElement>) => {
-    const rect = event.currentTarget.getBoundingClientRect();
-    return flatDisplayTouch(
-      (event.clientX - rect.left) / rect.width,
-      (event.clientY - rect.top) / rect.height,
-      turns,
-    );
-  };
-  return (
-    <div className="rc-duo">
-      <div
-        ref={stage}
-        className="rc-duo-flat-stage"
-        data-folding={!!motion}
-        aria-busy={!!motion}
-        onPointerMove={(event) => {
-          const rect = event.currentTarget.getBoundingClientRect();
-          setEdge(flatHoverEdge(event.clientX - rect.left, event.clientY - rect.top, frame.rect));
-        }}
-        onPointerLeave={() => {
-          setEdge(undefined);
-          setHovered(undefined);
-        }}
-      >
-        <div
-          className="rc-duo-flat-device"
-          data-display={inner ? 'inner' : 'outer'}
-          style={{
-            width: bodyWidth * scale,
-            height: bodyHeight * scale,
-            transform: 'translate(-50%, -50%) rotate(' + frame.turns * 90 + 'deg)',
-          }}
-        >
-          <DuoFlatFrame inner={inner} width={bodyWidth} height={bodyHeight} />
-          <div
-            className="rc-duo-flat-screen"
-            role="application"
-            aria-label="iPhone Duo 2D simulator"
-            tabIndex={0}
-            style={{
-              width,
-              height,
-              left: ((bodyWidth - screenWidth) / 2) * scale,
-              top: ((bodyHeight - screenHeight) / 2) * scale,
-              borderRadius: inner ? 5.3 * scale : [0.8, 6.6, 6.6, 0.8].map((r) => r * scale + 'px').join(' '),
-            }}
-            onKeyDown={motion ? undefined : props.onKeyDown}
-            onKeyUp={props.onKeyUp}
-            onPointerDown={(event) => {
-              if (motion || held.current || event.button !== 0 || !display) return;
-              event.currentTarget.focus({ preventScroll: true });
-              event.currentTarget.setPointerCapture(event.pointerId);
-              const p = point(event);
-              held.current = { pointer: event.pointerId, screenId: display.screenId, ...p };
-              props.touch(0, display.screenId, p.x, p.y);
-            }}
-            onPointerMove={(event) => {
-              if (held.current?.pointer !== event.pointerId) return;
-              const p = point(event);
-              Object.assign(held.current, p);
-              props.touch(2, held.current.screenId, p.x, p.y);
-            }}
-            onPointerUp={(event) => {
-              if (held.current?.pointer === event.pointerId) releaseTouch();
-            }}
-            onPointerCancel={releaseTouch}
-            onLostPointerCapture={releaseTouch}
-          >
-            <video
-              ref={video}
-              autoPlay
-              muted
-              playsInline
-              style={{
-                width: inner ? height : width,
-                height: inner ? width : height,
-                transform: 'translate(-50%, -50%) rotate(' + (inner ? 90 : 0) + 'deg)',
-              }}
-            />
-          </div>
-          {frame.buttons.map((b) => (
-            <button
-              key={b.button}
-              type="button"
-              className="rc-duo-physical"
-              data-duo-button={b.button}
-              data-edge={b.edge}
-              data-highlighted={hovered === b.button}
-              data-pressed={pressed === b.button}
-              aria-label={DUO_BUTTONS[b.button] + ' physical button'}
-              title={DUO_BUTTONS[b.button]}
-              style={{
-                left: b.x * scale,
-                top: b.y * scale,
-                width: b.edge === 'top' ? Math.max(28, b.width * scale) : 28,
-                height: b.edge === 'top' ? 28 : Math.max(28, b.height * scale),
-              }}
-              {...buttonEvents(b.button)}
-            >
-              <span style={{ width: Math.max(2, b.width * scale), height: Math.max(2, b.height * scale) }} />
-            </button>
-          ))}
-        </div>
-        {frame.guides.map((g) => (
-          <button
-            key={g.button}
-            type="button"
-            className="rc-duo-hardware"
-            data-duo-button={g.button}
-            data-visible={edge === g.edge}
-            data-pressed={pressed === g.button}
-            aria-label={DUO_BUTTONS[g.button]}
-            title={DUO_BUTTONS[g.button]}
-            style={
-              {
-                left: g.targetX,
-                top: g.targetY,
-                '--duo-hardware-icon-size': `${frame.iconSize}px`,
-                '--duo-hardware-icon-x': `${g.x - g.targetX}px`,
-                '--duo-hardware-icon-y': `${g.y - g.targetY}px`,
-              } as React.CSSProperties
-            }
-            {...buttonEvents(g.button)}
-          >
-            <DuoHardwareIcon button={g.button} />
-          </button>
-        ))}
-        {motion && <DuoFoldMotion motion={motion} onFinish={finishMotion} />}
-      </div>
-      <DuoControls
-        angle={angle}
-        changeAngle={changeAngle}
-        interacting={interacting}
-        rotate={() => {
-          void props
-            .setOrientation(props.state.orientation === 'portrait' ? 'landscape-left' : 'portrait')
-            .catch((e) => setError(String(e)));
-        }}
-      >
-        <span className="rc-duo-view-label">Front view</span>
-      </DuoControls>
-      {error && (
-        <div role="alert" className="rc-duo-error">
-          {error}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/inspect-overlay.css

@@ -1,223 +0,0 @@
-.rc-inspect-overlay {
-  position: absolute;
-  z-index: 25;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.rc-inspect-overlay-select {
-  /* When click-to-select is enabled, the container also captures clicks
-     that fall outside any box so we can clear selection. */
-  pointer-events: auto;
-}
-
-.rc-inspect-box {
-  position: absolute;
-  box-sizing: border-box;
-  border: 1px solid rgba(64, 169, 255, 0.55);
-  background: rgba(64, 169, 255, 0.06);
-  border-radius: 2px;
-  cursor: pointer;
-  pointer-events: none;
-  transition:
-    border-color 80ms ease,
-    border-width 80ms ease,
-    background-color 80ms ease;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  outline: none;
-}
-
-.rc-inspect-overlay-select .rc-inspect-box {
-  pointer-events: auto;
-}
-
-.rc-inspect-box-disabled {
-  opacity: 0.55;
-}
-
-.rc-inspect-box[data-highlighted='true'] {
-  border-color: rgba(255, 197, 28, 0.95);
-  border-width: 1.5px;
-  background: rgba(255, 197, 28, 0.16);
-  z-index: 1;
-}
-
-.rc-inspect-box[data-selected='true'] {
-  border-color: rgba(0, 122, 255, 1);
-  border-width: 2px;
-  background: rgba(0, 122, 255, 0.22);
-  z-index: 2;
-}
-
-.rc-inspect-card {
-  /* Card is rendered via React portal to document.body so it can escape
-     any ancestor overflow:hidden (e.g. customer-provided .device-wrapper
-     in our demo). Coordinates passed in via inline style are
-     viewport-absolute. */
-  position: fixed;
-  z-index: 2147483600;
-  pointer-events: auto;
-  background: rgba(22, 24, 30, 0.97);
-  color: #f5f5f7;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 10px;
-  padding: 9px 11px 11px;
-  min-width: 200px;
-  max-width: 260px;
-  /* Cap card height. Anything longer scrolls inside the card instead of
-     pushing the viewport. */
-  max-height: 220px;
-  overflow-y: auto;
-  box-shadow:
-    0 12px 36px rgba(0, 0, 0, 0.4),
-    0 1px 0 rgba(255, 255, 255, 0.04) inset;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 12px;
-  line-height: 1.4;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  scrollbar-width: thin;
-}
-
-.rc-inspect-card-header {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex-wrap: wrap;
-  margin-bottom: 4px;
-}
-
-.rc-inspect-card-role {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: rgba(245, 245, 247, 0.55);
-  display: inline-block;
-  white-space: nowrap;
-}
-
-.rc-inspect-card-tag {
-  font-size: 9px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 1px 5px;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(245, 245, 247, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.rc-inspect-card-tag-blue {
-  background: rgba(10, 132, 255, 0.18);
-  border-color: rgba(10, 132, 255, 0.45);
-  color: rgb(140, 195, 255);
-}
-
-.rc-inspect-card-title {
-  font-size: 12.5px;
-  font-weight: 600;
-  color: #fff;
-  margin: 0 0 7px;
-  word-break: break-word;
-  /* Clamp to 2 lines so a paragraph-long AXLabel doesn't take over. The
-     full text is available on hover via the title attribute and via the
-     value/id rows below. */
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.rc-inspect-card-row {
-  display: flex;
-  gap: 6px;
-  align-items: baseline;
-  font-size: 10.5px;
-  color: rgba(245, 245, 247, 0.72);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-    monospace;
-  margin: 1px 0;
-  min-width: 0;
-}
-
-.rc-inspect-card-row-label {
-  color: rgba(245, 245, 247, 0.42);
-  font-weight: 500;
-  flex-shrink: 0;
-}
-
-.rc-inspect-card-row-value {
-  flex: 1 1 auto;
-  min-width: 0;
-  word-break: break-word;
-  /* Clamp long values (selectors, IDs) to two lines, full value visible
-     via the row's title attr or via "Copy" action. */
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.rc-inspect-card-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 10px;
-  padding-top: 9px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.rc-inspect-card-btn {
-  appearance: none;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.06);
-  color: #f5f5f7;
-  font: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  padding: 4px 9px;
-  border-radius: 6px;
-  cursor: pointer;
-  transition:
-    background-color 100ms ease,
-    border-color 100ms ease,
-    color 100ms ease;
-}
-
-.rc-inspect-card-btn:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.12);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.rc-inspect-card-btn:active:not(:disabled) {
-  background: rgba(255, 255, 255, 0.16);
-}
-
-.rc-inspect-card-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.rc-inspect-card-btn-primary {
-  background: rgba(0, 122, 255, 0.85);
-  border-color: rgba(0, 122, 255, 0.9);
-  color: #fff;
-}
-
-.rc-inspect-card-btn-primary:hover:not(:disabled) {
-  background: rgba(10, 132, 255, 1);
-  border-color: rgba(10, 132, 255, 1);
-}
-
-.rc-inspect-card-btn-copied {
-  background: rgba(48, 209, 88, 0.22);
-  border-color: rgba(48, 209, 88, 0.55);
-  color: rgb(159, 240, 178);
-}