@limrun/ui 0.16.0 → 0.17.0-rc.2

package/src/demo.tsx

@@ -1,269 +0,0 @@
-import { useState, useRef } from 'react';
-import { createRoot } from 'react-dom/client';
-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';
-
-// 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);
-const initialUrl = initialParams.get('url') || 'ws://localhost:8833/signaling';
-const initialToken = initialParams.get('token') || 'token';
-const initialPlatformParam = initialParams.get('platform');
-const initialPlatform: 'ios' | 'android' = initialPlatformParam === 'android' ? 'android' : 'ios';
-const initialInspect = (initialParams.get('inspect') as InspectChoice | null) ?? 'off';
-const initialAutoconnect =
-  initialParams.get('autoconnect') === '1' && initialParams.has('url') && initialParams.has('token');
-
-function Demo() {
-  const [url, setUrl] = useState(initialUrl);
-  const [token, setToken] = useState(initialToken);
-  const [platform, setPlatform] = useState<'ios' | 'android'>(initialPlatform);
-  const [isConnected, setIsConnected] = useState(initialAutoconnect);
-  const [key, setKey] = useState(0);
-  const [showDebugInfo, setShowDebugInfo] = useState(false);
-  const [inspectChoice, setInspectChoice] = useState<InspectChoice>(initialInspect);
-  const [latestSnapshot, setLatestSnapshot] = useState<AxSnapshot | null>(null);
-  const [latestSelection, setLatestSelection] = useState<string | null>(null);
-
-  const remoteControlRef = useRef<RemoteControlHandle>(null);
-
-  const inspectModeProp: boolean | 'hover-only' | undefined =
-    inspectChoice === 'off' ? undefined
-    : inspectChoice === 'hover-only' ? 'hover-only'
-    : true;
-
-  const handleConnect = () => {
-    if (url) {
-      setIsConnected(true);
-      // Force remount by changing key
-      setKey((prev) => prev + 1);
-    }
-  };
-
-  const handleDisconnect = () => {
-    setIsConnected(false);
-    setKey((prev) => prev + 1);
-  };
-
-  const handleScreenshot = async () => {
-    if (remoteControlRef.current) {
-      try {
-        const screenshot = await remoteControlRef.current.screenshot();
-        // Open screenshot in new window
-        const win = window.open();
-        if (win) {
-          win.document.write(`<img src="${screenshot.dataUri}" style="max-width: 100%;" />`);
-        }
-      } catch (error) {
-        console.error('Screenshot failed:', error);
-        alert('Screenshot failed: ' + (error as Error).message);
-      }
-    }
-  };
-
-  return (
-    <>
-      <div className="header">
-        <h1>📱 RemoteControl Component Demo</h1>
-        <p>Test the iOS device frame and remote control features</p>
-      </div>
-
-      <div className="demo-container">
-        <div className="info-box">
-          <h4>ℹ️ How to Use:</h4>
-          <p>
-            Enter your WebSocket URL and authentication token below, select iOS or Android platform, then
-            click Connect to see the remote control in action. The iOS platform will display a realistic
-            iPhone frame around the stream.
-          </p>
-          <p style={{ marginTop: '10px', fontWeight: 600 }}>
-            ✨ iOS Feature: Touches can start from the bottom bezel area (below the screen, near the home
-            indicator) to enable authentic iOS swipe-up gestures for going home or switching apps!
-          </p>
-        </div>
-
-        <div className="controls">
-          <div className="control-group">
-            <label htmlFor="url">WebSocket URL</label>
-            <input
-              id="url"
-              type="text"
-              value={url}
-              onChange={(e) => setUrl(e.target.value)}
-              placeholder="wss://your-instance.limrun.com/control"
-              disabled={isConnected}
-            />
-          </div>
-
-          <div className="control-group">
-            <label htmlFor="token">Authentication Token</label>
-            <input
-              id="token"
-              type="password"
-              value={token}
-              onChange={(e) => setToken(e.target.value)}
-              placeholder="Enter your token"
-              disabled={isConnected}
-            />
-          </div>
-
-          <div className="control-group">
-            <label htmlFor="platform">Platform</label>
-            <select
-              id="platform"
-              value={platform}
-              onChange={(e) => setPlatform(e.target.value as 'ios' | 'android')}
-              disabled={isConnected}
-            >
-              <option value="ios">iOS (with frame)</option>
-              <option value="android">Android (no frame)</option>
-            </select>
-          </div>
-
-          <div className="control-group">
-            <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
-              <input
-                type="checkbox"
-                checked={showDebugInfo}
-                onChange={(e) => setShowDebugInfo(e.target.checked)}
-                style={{ cursor: 'pointer' }}
-              />
-              Show iOS Extended Touch Area Info
-            </label>
-          </div>
-
-          <div className="control-group">
-            <label htmlFor="inspect-mode">Inspect Mode</label>
-            <select
-              id="inspect-mode"
-              value={inspectChoice}
-              onChange={(e) => setInspectChoice(e.target.value as InspectChoice)}
-            >
-              <option value="off">Off</option>
-              <option value="hover-only">Hover-only (input still works)</option>
-              <option value="select">Select (click to pin, ESC to clear)</option>
-            </select>
-          </div>
-
-          <div className="button-group">
-            {!isConnected ?
-              <button className="primary" onClick={handleConnect} disabled={!url}>
-                Connect
-              </button>
-            : <>
-                <button className="secondary" onClick={handleDisconnect}>
-                  Disconnect
-                </button>
-                <button className="primary" onClick={handleScreenshot}>
-                  Take Screenshot
-                </button>
-              </>
-            }
-          </div>
-        </div>
-
-        {showDebugInfo && platform === 'ios' && (
-          <div
-            style={{
-              background: '#e0f2fe',
-              border: '2px solid #0284c7',
-              borderRadius: '8px',
-              padding: '15px',
-              marginBottom: '20px',
-            }}
-          >
-            <h4 style={{ color: '#0c4a6e', marginBottom: '8px', fontSize: '0.95rem' }}>
-              🔧 iOS Extended Touch Area
-            </h4>
-            <p style={{ color: '#075985', fontSize: '0.9rem', lineHeight: '1.5', margin: 0 }}>
-              The iOS frame includes a <strong>60-pixel extended touch area</strong> below the visible screen.
-              This area (where the home indicator is located) can receive touch events and sends coordinates
-              beyond the screen bounds (y &gt; screenHeight), allowing iOS to properly detect gestures that
-              start from outside the screen - just like on a real iPhone. Try starting a swipe gesture from
-              the home indicator area!
-            </p>
-          </div>
-        )}
-
-        {isConnected ?
-          <>
-            <div className="device-preview">
-              <div className="preview-item">
-                <h3>{platform === 'ios' ? '📱 iOS with Frame' : '🤖 Android (No Frame)'}</h3>
-                <div className="device-wrapper">
-                  <RemoteControl
-                    key={key}
-                    ref={remoteControlRef}
-                    url={url}
-                    token={token}
-                    inspectMode={inspectModeProp}
-                    onAxSnapshotChange={setLatestSnapshot}
-                    onInspectSelectionChange={(sel) =>
-                      setLatestSelection(
-                        sel ?
-                          `${sel.element.role || sel.element.type} · ${sel.element.label || '(no label)'}`
-                        : null,
-                      )
-                    }
-                  />
-                </div>
-              </div>
-            </div>
-
-            {inspectChoice !== 'off' && (
-              <div
-                style={{
-                  marginTop: '20px',
-                  background: '#0f172a',
-                  color: '#e2e8f0',
-                  border: '1px solid #1e293b',
-                  borderRadius: '8px',
-                  padding: '12px 14px',
-                  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
-                  fontSize: '12px',
-                }}
-              >
-                <div
-                  style={{
-                    fontWeight: 600,
-                    marginBottom: '6px',
-                    display: 'flex',
-                    gap: '12px',
-                    flexWrap: 'wrap',
-                  }}
-                >
-                  <span>Inspect debug (demo-only)</span>
-                  <span style={{ color: '#94a3b8', fontWeight: 400 }}>
-                    elements: {latestSnapshot?.elements.length ?? 0} · screen:{' '}
-                    {latestSnapshot ? `${latestSnapshot.screen.width}×${latestSnapshot.screen.height}` : '—'}{' '}
-                    · platform: {latestSnapshot?.platform ?? '—'} · selection: {latestSelection ?? '(none)'}
-                  </span>
-                </div>
-              </div>
-            )}
-          </>
-        : <div
-            style={{
-              textAlign: 'center',
-              padding: '60px 20px',
-              color: '#9ca3af',
-              fontSize: '1.1rem',
-            }}
-          >
-            Enter your connection details above and click Connect to start
-          </div>
-        }
-      </div>
-    </>
-  );
-}
-
-// Mount the demo app
-const container = document.getElementById('root');
-if (container) {
-  const root = createRoot(container);
-  root.render(<Demo />);
-}

package/src/frame-assets.ts

@@ -1,22 +0,0 @@
-// 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/hooks/index.ts

@@ -1 +0,0 @@
-export {};

package/src/index.ts

@@ -1,29 +0,0 @@
-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';
-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/src/lite.test.ts

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-// 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/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": false,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": false,
-    "emitDeclarationOnly": true,
-    "declaration": true,
-    "declarationDir": "dist",
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "outDir": "dist"
-  },
-  "include": ["src"],
-  "exclude": ["**/*.test.ts", "**/*.test.tsx", "node_modules", "dist"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": false,
-    "emitDeclarationOnly": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,35 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc';
-import { resolve } from 'path';
-import dts from 'vite-plugin-dts';
-import { libInjectCss } from 'vite-plugin-lib-inject-css';
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), libInjectCss(), dts({ include: ['src'] })],
-  build: {
-    lib: {
-      entry: {
-        index: resolve(__dirname, 'src/index.ts'),
-        lite: resolve(__dirname, 'src/lite.ts'),
-      },
-      name: 'LimrunUI',
-      formats: ['es', 'cjs'],
-      fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'js' : 'cjs'}`,
-    },
-    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',
-          'react/jsx-runtime': 'jsxRuntime',
-        },
-      },
-    },
-  },
-});

package/vitest.config.ts

@@ -1,24 +0,0 @@
-import { defineConfig } from 'vitest/config';
-
-// Vitest config for @limrun/ui unit tests.
-//
-// We use jsdom as the default environment because the runtime code uses
-// browser globals (window.setTimeout, window.requestAnimationFrame, etc.).
-// Pure modules can opt back into the node env per-file via:
-//
-//   // @vitest-environment node
-//
-// at the top of the test file.
-//
-// The actual <RemoteControl> component is intentionally NOT under unit
-// test here — its WebRTC plumbing is integration-tested via the demo +
-// staging instance. These tests cover the smaller, pure-logic pieces:
-// `core/ax-tree.ts`, `core/ax-fetcher.ts` and the URL helper exported from
-// `components/remote-control.tsx`.
-export default defineConfig({
-  test: {
-    environment: 'jsdom',
-    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
-    globals: false,
-  },
-});