@alivelabs/expo-orchestrator-react-client 0.1.0 → 0.1.1

package/dist/components/SessionViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionViewer.d.ts","sourceRoot":"","sources":["../../src/components/SessionViewer.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyHD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CAgJ5F"}
+{"version":3,"file":"SessionViewer.d.ts","sourceRoot":"","sources":["../../src/components/SessionViewer.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyHD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CA4J5F"}

package/dist/components/SessionViewer.js

@@ -153,11 +153,14 @@ export function SessionViewer({ sessionId, apiToken, baseUrl, className }) {
     const handleSwipe = useCallback((input) => {
         sendInput(input).catch(() => { });
     }, [sendInput]);
+    const handleKeyInput = useCallback((input) => {
+        sendInput(input).catch(() => { });
+    }, [sendInput]);
     return (_jsxs("div", { style: rootStyle, className: className, children: [_jsxs("div", { style: headerStyle, children: [_jsxs("h2", { style: titleStyle, children: ["Session ", sessionId] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: [_jsx(StatusBadge, { status: status }), _jsx("span", { style: {
                                     fontSize: "11px",
                                     color: connected ? "#4ade80" : "#6b7280",
                                     fontWeight: 500,
-                                }, children: connected ? "● live" : "○ disconnected" }), !connected && (_jsx("button", { type: "button", style: btnStyle("secondary"), onClick: reconnect, children: "Reconnect" }))] })] }), error && _jsxs("div", { style: errorBannerStyle, children: ["\u26A0 ", error] }), _jsxs("div", { style: bodyStyle, children: [_jsx("div", { style: simulatorColStyle, children: _jsx(SimulatorScreen, { frame: frame, onTap: handleTap, onSwipe: handleSwipe }) }), _jsxs("div", { style: rightColStyle, children: [_jsxs("div", { style: controlsStyle, children: [_jsx("div", { style: {
+                                }, children: connected ? "● live" : "○ disconnected" }), !connected && (_jsx("button", { type: "button", style: btnStyle("secondary"), onClick: reconnect, children: "Reconnect" }))] })] }), error && _jsxs("div", { style: errorBannerStyle, children: ["\u26A0 ", error] }), _jsxs("div", { style: bodyStyle, children: [_jsx("div", { style: simulatorColStyle, children: _jsx(SimulatorScreen, { frame: frame, onTap: handleTap, onSwipe: handleSwipe, onKeyInput: handleKeyInput }) }), _jsxs("div", { style: rightColStyle, children: [_jsxs("div", { style: controlsStyle, children: [_jsx("div", { style: {
                                             fontSize: "11px",
                                             fontWeight: 600,
                                             color: "#8b949e",

package/dist/components/SimulatorScreen.d.ts

@@ -7,11 +7,17 @@ interface SimulatorScreenProps {
     onSwipe?: (input: Extract<SimulatorInput, {
         type: "swipe";
     }>) => void;
+    /** Forward the focused viewer's keystrokes to the simulator (text + key events). */
+    onKeyInput?: (input: Extract<SimulatorInput, {
+        type: "type";
+    } | {
+        type: "key";
+    }>) => void;
     /** Cap on the rendered simulator height; the image scales down proportionally
      *  to fit. Accepts any CSS length. Defaults to `80vh` so the device never
      *  exceeds the viewport on a tall phone like iPhone 17 Pro Max. */
     maxHeight?: number | string;
 }
-export declare function SimulatorScreen({ frame, onTap, onSwipe, maxHeight, }: SimulatorScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function SimulatorScreen({ frame, onTap, onSwipe, onKeyInput, maxHeight, }: SimulatorScreenProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SimulatorScreen.d.ts.map

package/dist/components/SimulatorScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimulatorScreen.d.ts","sourceRoot":"","sources":["../../src/components/SimulatorScreen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,EAAE;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IACtE;;uEAEmE;IACnE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAgFD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,OAAO,EACP,SAAkB,GACnB,EAAE,oBAAoB,2CA2GtB"}
+{"version":3,"file":"SimulatorScreen.d.ts","sourceRoot":"","sources":["../../src/components/SimulatorScreen.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAA0C,MAAM,aAAa,CAAC;AAE1F,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,EAAE;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IACtE,oFAAoF;IACpF,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC1F;;uEAEmE;IACnE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAoJD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,OAAO,EACP,UAAU,EACV,SAAkB,GACnB,EAAE,oBAAoB,2CA+HtB"}

package/dist/components/SimulatorScreen.js

@@ -1,6 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
+// biome-ignore-all lint/a11y/noNoninteractiveTabindex: the simulator screen is an application-role surface that forwards keyboard + pointer input and must be focusable.
+import { useCallback, useRef, useState, } from "react";
 const SWIPE_THRESHOLD_PX = 5;
+// Browser KeyboardEvent.code values baguette accepts (mirrors KeyCodeSchema in
+// @alivelabs/expo-orchestrator-schemas). Built at module load to stay compact.
+const SUPPORTED_KEY_CODES = (() => {
+    const set = new Set([
+        "Enter",
+        "Escape",
+        "Backspace",
+        "Tab",
+        "Space",
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "Minus",
+        "Equal",
+        "BracketLeft",
+        "BracketRight",
+        "Backslash",
+        "Semicolon",
+        "Quote",
+        "Backquote",
+        "Comma",
+        "Period",
+        "Slash",
+    ]);
+    for (let i = 0; i < 26; i += 1)
+        set.add(`Key${String.fromCharCode(65 + i)}`);
+    for (let i = 0; i < 10; i += 1)
+        set.add(`Digit${i}`);
+    return set;
+})();
+function isSupportedKeyCode(code) {
+    return SUPPORTED_KEY_CODES.has(code);
+}
+/**
+ * Translate a browser keydown into a simulator input. A printable character
+ * (no Ctrl/Cmd) is sent as `type` so layout/shift resolve correctly; everything
+ * else (Enter, Backspace, arrows, shortcuts like Cmd+A) goes as a `key` event
+ * with modifiers. Returns null for keys baguette can't take (e.g. F-keys).
+ */
+function mapKeyboardEvent(e) {
+    const usesCommand = e.ctrlKey || e.metaKey;
+    if (e.key.length === 1 && !usesCommand) {
+        return { type: "type", text: e.key };
+    }
+    if (isSupportedKeyCode(e.code)) {
+        const modifiers = [];
+        if (e.shiftKey)
+            modifiers.push("shift");
+        if (e.ctrlKey)
+            modifiers.push("control");
+        if (e.altKey)
+            modifiers.push("option");
+        if (e.metaKey)
+            modifiers.push("command");
+        return { type: "key", code: e.code, modifiers: modifiers.length > 0 ? modifiers : undefined };
+    }
+    return null;
+}
 // The outer titanium-style bezel that makes the screen read as a physical
 // device. The screen (wrapper) sits inside it with its own rounded corners.
 const deviceFrameStyle = {
@@ -11,6 +71,12 @@ const deviceFrameStyle = {
     boxShadow: "0 24px 60px -18px rgba(0,0,0,0.75), 0 4px 14px rgba(0,0,0,0.4)," +
         " inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 1.5px 1px rgba(255,255,255,0.12)",
     lineHeight: 0,
+    transition: "box-shadow 0.18s ease",
+};
+// Extra ring + soft glow layered onto the bezel shadow while the screen is
+// focused, so it's clear keystrokes are being forwarded to the simulator.
+const focusedFrameStyle = {
+    boxShadow: `${deviceFrameStyle.boxShadow}, 0 0 0 2px rgba(59,130,246,0.7), 0 0 18px -4px rgba(59,130,246,0.5)`,
 };
 const wrapperStyle = {
     position: "relative",
@@ -22,6 +88,9 @@ const wrapperStyle = {
     userSelect: "none",
     lineHeight: 0,
     boxShadow: "inset 0 0 0 2px rgba(0,0,0,0.85)",
+    // The bezel renders the focus ring; suppress the default outline on the
+    // focusable screen itself.
+    outline: "none",
 };
 const basePlaceholderStyle = {
     // iPhone 17 logical resolution (402×874 pt). Using aspect-ratio keeps the
@@ -60,9 +129,10 @@ function toNatural(el, clientX, clientY) {
         y: Math.round((clientY - rect.top) * scaleY),
     };
 }
-export function SimulatorScreen({ frame, onTap, onSwipe, maxHeight = "80vh", }) {
+export function SimulatorScreen({ frame, onTap, onSwipe, onKeyInput, maxHeight = "80vh", }) {
     const imgRef = useRef(null);
     const dragRef = useRef(null);
+    const [focused, setFocused] = useState(false);
     const imgStyle = { ...baseImgStyle, maxHeight };
     // Drive the placeholder by height so its width derives from the iPhone 17
     // aspect ratio (a block div would otherwise fill the column width and distort).
@@ -110,7 +180,19 @@ export function SimulatorScreen({ frame, onTap, onSwipe, maxHeight = "80vh", })
             });
         }
     }, [onTap, onSwipe]);
-    return (_jsx("div", { style: deviceFrameStyle, children: _jsxs("div", { style: wrapperStyle, role: "application", "aria-label": "iOS simulator \u2014 click to tap, drag to swipe", onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, children: [frame ? (_jsx("img", { ref: imgRef, src: frame, alt: "iOS Simulator", style: imgStyle, draggable: false })) : (_jsxs("div", { style: placeholderStyle, children: [_jsx("span", { style: { fontWeight: 500 }, children: "Waiting for the simulator" }), _jsx("div", { style: { display: "flex", gap: "6px" }, children: [0, 1, 2].map((i) => (_jsx("span", { style: {
+    const handleKeyDown = useCallback((e) => {
+        if (!onKeyInput)
+            return;
+        const input = mapKeyboardEvent(e);
+        if (!input)
+            return;
+        // Keep the keystroke off the page (no scrolling on space/arrows, no focus
+        // loss on Tab) — it goes to the simulator instead.
+        e.preventDefault();
+        onKeyInput(input);
+    }, [onKeyInput]);
+    const frameStyle = focused ? { ...deviceFrameStyle, ...focusedFrameStyle } : deviceFrameStyle;
+    return (_jsx("div", { style: frameStyle, children: _jsxs("div", { style: wrapperStyle, role: "application", "aria-label": "iOS simulator \u2014 click to focus; tap, drag to swipe, type to send keys", tabIndex: 0, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onKeyDown: handleKeyDown, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: [frame ? (_jsx("img", { ref: imgRef, src: frame, alt: "iOS Simulator", style: imgStyle, draggable: false })) : (_jsxs("div", { style: placeholderStyle, children: [_jsx("span", { style: { fontWeight: 500 }, children: "Waiting for the simulator" }), _jsx("div", { style: { display: "flex", gap: "6px" }, children: [0, 1, 2].map((i) => (_jsx("span", { style: {
                                     width: 6,
                                     height: 6,
                                     borderRadius: "50%",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alivelabs/expo-orchestrator-react-client",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React client for Expo CI Orchestrator — streaming logs, live simulator video, and interactive controls.",
   "type": "module",
   "license": "MIT",