@godscene/playground-electron 1.7.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,4 @@
+# @midscene/playground-app
+
+Reusable React shell for Midscene playground applications.
+

package/dist/es/DeviceInteractionLayer.mjs

@@ -0,0 +1,383 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+const keyboardControlKeys = new Set([
+    'Backspace',
+    'Delete',
+    'Enter',
+    'Tab',
+    'Escape',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End',
+    'PageUp',
+    'PageDown'
+]);
+const pureModifierKeys = new Set([
+    'Alt',
+    'Control',
+    'Meta',
+    'Shift'
+]);
+function isHostCopyShortcut(event) {
+    return !event.altKey && (event.metaKey || event.ctrlKey) && 'c' === event.key.toLowerCase();
+}
+function isHostReservedShortcut(event) {
+    if ('F5' === event.key || 'F11' === event.key || 'F12' === event.key) return true;
+    const hasPrimaryModifier = event.metaKey || event.ctrlKey;
+    if (!hasPrimaryModifier) return false;
+    const lowerKey = event.key.toLowerCase();
+    if (event.altKey && 'i' === lowerKey) return true;
+    if (event.shiftKey && ('i' === lowerKey || 'j' === lowerKey)) return true;
+    const hostReservedKeys = new Set([
+        'r',
+        'q',
+        'w',
+        'm',
+        'h',
+        'n',
+        't',
+        '+',
+        '=',
+        '-',
+        '_',
+        '0'
+    ]);
+    return hostReservedKeys.has(lowerKey);
+}
+function hasHostSelectionOutsideOverlay(overlay) {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || !overlay) return false;
+    const { anchorNode, focusNode } = selection;
+    if (!anchorNode || !focusNode) return false;
+    return !overlay.contains(anchorNode) && !overlay.contains(focusNode);
+}
+function keyNameForKeyboardEvent(event) {
+    if (pureModifierKeys.has(event.key)) return null;
+    const parts = [];
+    if (event.ctrlKey) parts.push('Control');
+    if (event.metaKey) parts.push('Meta');
+    if (event.altKey) parts.push('Alt');
+    if (event.shiftKey && 'Shift' !== event.key) parts.push('Shift');
+    parts.push(' ' === event.key ? 'Space' : event.key);
+    return parts.join('+');
+}
+function inscribedContentRect(panel, deviceSize) {
+    const aspect = deviceSize.width / deviceSize.height;
+    if (panel.height <= 0 || panel.width <= 0) return panel;
+    if (panel.width / panel.height > aspect) {
+        const renderedWidth = panel.height * aspect;
+        return {
+            left: panel.left + (panel.width - renderedWidth) / 2,
+            top: panel.top,
+            width: renderedWidth,
+            height: panel.height
+        };
+    }
+    const renderedHeight = panel.width / aspect;
+    return {
+        left: panel.left,
+        top: panel.top + (panel.height - renderedHeight) / 2,
+        width: panel.width,
+        height: renderedHeight
+    };
+}
+function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardEnabled = false, onTextInput, onKeyboardPress, tapMaxDistance = 8, tapMaxDurationMs = 250, style }) {
+    const overlayRef = useRef(null);
+    const keyboardSinkRef = useRef(null);
+    const activePointer = useRef(null);
+    const composingRef = useRef(false);
+    const keyboardArmedRef = useRef(false);
+    const lastKeyboardPointRef = useRef(null);
+    const focusKeyboardSink = useCallback(()=>{
+        if (keyboardEnabled) {
+            var _keyboardSinkRef_current;
+            keyboardArmedRef.current = true;
+            null == (_keyboardSinkRef_current = keyboardSinkRef.current) || _keyboardSinkRef_current.focus({
+                preventScroll: true
+            });
+        }
+    }, [
+        keyboardEnabled
+    ]);
+    const positionKeyboardSink = useCallback((clientX, clientY)=>{
+        const overlay = overlayRef.current;
+        const sink = keyboardSinkRef.current;
+        if (!overlay || !sink) return;
+        const rect = overlay.getBoundingClientRect();
+        sink.style.left = `${Math.max(0, clientX - rect.left)}px`;
+        sink.style.top = `${Math.max(0, clientY - rect.top)}px`;
+    }, []);
+    const projectToDevice = useCallback((clientX, clientY, contentRect)=>{
+        if (!deviceSize) return null;
+        const ratioX = (clientX - contentRect.left) / contentRect.width;
+        const ratioY = (clientY - contentRect.top) / contentRect.height;
+        const x = Math.max(0, Math.min(deviceSize.width - 1, Math.round(ratioX * deviceSize.width)));
+        const y = Math.max(0, Math.min(deviceSize.height - 1, Math.round(ratioY * deviceSize.height)));
+        return {
+            x,
+            y
+        };
+    }, [
+        deviceSize
+    ]);
+    const handlePointerDown = useCallback((event)=>{
+        if (!enabled || !deviceSize || !overlayRef.current) return;
+        if (0 !== event.button && 'mouse' === event.pointerType) return;
+        const panelRect = overlayRef.current.getBoundingClientRect();
+        const contentRect = inscribedContentRect(panelRect, deviceSize);
+        if (event.clientX < contentRect.left || event.clientX > contentRect.left + contentRect.width || event.clientY < contentRect.top || event.clientY > contentRect.top + contentRect.height) {
+            keyboardArmedRef.current = false;
+            return;
+        }
+        positionKeyboardSink(event.clientX, event.clientY);
+        focusKeyboardSink();
+        try {
+            overlayRef.current.setPointerCapture(event.pointerId);
+        } catch (unused) {}
+        activePointer.current = {
+            startX: event.clientX,
+            startY: event.clientY,
+            startTime: performance.now(),
+            contentRect
+        };
+        event.preventDefault();
+    }, [
+        enabled,
+        deviceSize,
+        focusKeyboardSink,
+        positionKeyboardSink
+    ]);
+    const finishPointer = useCallback((event, cancelled)=>{
+        const active = activePointer.current;
+        activePointer.current = null;
+        if (!active) return;
+        try {
+            var _overlayRef_current;
+            null == (_overlayRef_current = overlayRef.current) || _overlayRef_current.releasePointerCapture(event.pointerId);
+        } catch (unused) {}
+        if (cancelled) return;
+        const dx = event.clientX - active.startX;
+        const dy = event.clientY - active.startY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const duration = Math.max(0, performance.now() - active.startTime);
+        const startPoint = projectToDevice(active.startX, active.startY, active.contentRect);
+        const endPoint = projectToDevice(event.clientX, event.clientY, active.contentRect);
+        if (!startPoint || !endPoint) return;
+        lastKeyboardPointRef.current = endPoint;
+        if (distance <= tapMaxDistance && duration <= tapMaxDurationMs) null == onTap || onTap(startPoint);
+        else null == onSwipe || onSwipe(startPoint, endPoint, Math.round(duration));
+    }, [
+        onTap,
+        onSwipe,
+        projectToDevice,
+        tapMaxDistance,
+        tapMaxDurationMs
+    ]);
+    const handlePointerUp = useCallback((event)=>finishPointer(event, false), [
+        finishPointer
+    ]);
+    const handlePointerCancel = useCallback((event)=>finishPointer(event, true), [
+        finishPointer
+    ]);
+    const clearLocalEditableText = useCallback(()=>{
+        var _keyboardSinkRef_current;
+        if (null == (_keyboardSinkRef_current = keyboardSinkRef.current) ? void 0 : _keyboardSinkRef_current.value) keyboardSinkRef.current.value = '';
+    }, []);
+    const handleKeyboardEvent = useCallback((event)=>{
+        if (!keyboardEnabled || !keyboardArmedRef.current) return;
+        if (isHostCopyShortcut(event) && hasHostSelectionOutsideOverlay(overlayRef.current)) {
+            keyboardArmedRef.current = false;
+            return;
+        }
+        if (composingRef.current || event.isComposing) return;
+        if (isHostReservedShortcut(event)) return;
+        if (keyboardControlKeys.has(event.key) || event.altKey || event.ctrlKey || event.metaKey) {
+            var _lastKeyboardPointRef_current;
+            const keyName = keyNameForKeyboardEvent(event);
+            if (!keyName) return;
+            event.preventDefault();
+            event.stopPropagation();
+            null == onKeyboardPress || onKeyboardPress(keyName, null != (_lastKeyboardPointRef_current = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current : void 0);
+        }
+    }, [
+        keyboardEnabled,
+        onKeyboardPress
+    ]);
+    const handlePaste = useCallback((event)=>{
+        var _lastKeyboardPointRef_current;
+        if (!keyboardEnabled || !keyboardArmedRef.current) return;
+        const text = event.clipboardData.getData('text');
+        if (!text) return;
+        event.preventDefault();
+        event.stopPropagation();
+        null == onTextInput || onTextInput(text, null != (_lastKeyboardPointRef_current = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current : void 0);
+    }, [
+        keyboardEnabled,
+        onTextInput
+    ]);
+    const handleEditableInput = useCallback((event)=>{
+        var _lastKeyboardPointRef_current;
+        var _keyboardSinkRef_current;
+        if (!keyboardEnabled || !keyboardArmedRef.current) {
+            if (!composingRef.current) clearLocalEditableText();
+            return;
+        }
+        if (composingRef.current) return;
+        const nativeEvent = event.nativeEvent;
+        if ('insertLineBreak' === nativeEvent.inputType) {
+            var _lastKeyboardPointRef_current1;
+            clearLocalEditableText();
+            event.preventDefault();
+            event.stopPropagation();
+            null == onKeyboardPress || onKeyboardPress('Enter', null != (_lastKeyboardPointRef_current1 = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current1 : void 0);
+            return;
+        }
+        if ('deleteContentBackward' === nativeEvent.inputType) {
+            var _lastKeyboardPointRef_current2;
+            clearLocalEditableText();
+            event.preventDefault();
+            event.stopPropagation();
+            null == onKeyboardPress || onKeyboardPress('Backspace', null != (_lastKeyboardPointRef_current2 = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current2 : void 0);
+            return;
+        }
+        if ('deleteContentForward' === nativeEvent.inputType) {
+            var _lastKeyboardPointRef_current3;
+            clearLocalEditableText();
+            event.preventDefault();
+            event.stopPropagation();
+            null == onKeyboardPress || onKeyboardPress('Delete', null != (_lastKeyboardPointRef_current3 = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current3 : void 0);
+            return;
+        }
+        const text = nativeEvent.data || (null == (_keyboardSinkRef_current = keyboardSinkRef.current) ? void 0 : _keyboardSinkRef_current.value) || '';
+        clearLocalEditableText();
+        if (!text) return;
+        event.preventDefault();
+        event.stopPropagation();
+        null == onTextInput || onTextInput(text, null != (_lastKeyboardPointRef_current = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current : void 0);
+    }, [
+        clearLocalEditableText,
+        keyboardEnabled,
+        onKeyboardPress,
+        onTextInput
+    ]);
+    useEffect(()=>{
+        if (!enabled) {
+            activePointer.current = null;
+            composingRef.current = false;
+            keyboardArmedRef.current = false;
+            lastKeyboardPointRef.current = null;
+        }
+    }, [
+        enabled
+    ]);
+    useEffect(()=>{
+        if (!enabled || !keyboardEnabled) {
+            keyboardArmedRef.current = false;
+            return;
+        }
+        const handleDocumentPointerDown = (event)=>{
+            const overlay = overlayRef.current;
+            if (overlay && event.target instanceof Node && overlay.contains(event.target)) return;
+            keyboardArmedRef.current = false;
+        };
+        window.addEventListener('keydown', handleKeyboardEvent, true);
+        window.addEventListener('pointerdown', handleDocumentPointerDown, true);
+        return ()=>{
+            window.removeEventListener('keydown', handleKeyboardEvent, true);
+            window.removeEventListener('pointerdown', handleDocumentPointerDown, true);
+        };
+    }, [
+        enabled,
+        handleKeyboardEvent,
+        keyboardEnabled
+    ]);
+    if (!enabled || !deviceSize) return null;
+    return /*#__PURE__*/ jsx("div", {
+        ref: overlayRef,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
+        onContextMenu: (e)=>e.preventDefault(),
+        "data-midscene-device-interaction-layer": "true",
+        style: _object_spread({
+            position: 'absolute',
+            inset: 0,
+            zIndex: 5,
+            cursor: keyboardEnabled ? 'default' : 'crosshair',
+            outline: 'none',
+            color: 'transparent',
+            caretColor: 'transparent',
+            touchAction: 'none',
+            userSelect: 'none'
+        }, style),
+        children: keyboardEnabled ? /*#__PURE__*/ jsx("textarea", {
+            ref: keyboardSinkRef,
+            "data-midscene-keyboard-sink": "true",
+            tabIndex: -1,
+            onPaste: handlePaste,
+            onCompositionStart: ()=>{
+                keyboardArmedRef.current = true;
+                composingRef.current = true;
+            },
+            onCompositionEnd: (event)=>{
+                var _keyboardSinkRef_current;
+                if (!keyboardEnabled || !keyboardArmedRef.current) return;
+                composingRef.current = false;
+                const text = event.data || (null == (_keyboardSinkRef_current = keyboardSinkRef.current) ? void 0 : _keyboardSinkRef_current.value) || '';
+                clearLocalEditableText();
+                if (text) {
+                    var _lastKeyboardPointRef_current;
+                    null == onTextInput || onTextInput(text, null != (_lastKeyboardPointRef_current = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current : void 0);
+                }
+            },
+            onInput: handleEditableInput,
+            style: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: 32,
+                height: 24,
+                opacity: 0.01,
+                pointerEvents: 'none',
+                resize: 'none',
+                border: 0,
+                padding: 0,
+                margin: 0,
+                outline: 'none',
+                background: 'transparent',
+                color: 'transparent',
+                caretColor: 'transparent',
+                fontSize: 16,
+                lineHeight: '20px',
+                transform: 'translate(-50%, -50%)'
+            }
+        }) : null
+    });
+}
+export { DeviceInteractionLayer, inscribedContentRect, keyNameForKeyboardEvent };

package/dist/es/PlaygroundApp.css

@@ -0,0 +1,207 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-size: 14px;
+}
+
+h3 {
+  text-transform: capitalize;
+}
+
+.app-container {
+  background-color: #f5f5f5;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+}
+
+.app-content {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app-panel {
+  background-color: #fff;
+  border-radius: 0;
+  height: 100%;
+  transition: box-shadow .3s;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+}
+
+.app-panel:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .09);
+}
+
+.app-panel.left-panel {
+  flex-direction: column;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.app-panel.right-panel {
+  border-radius: 0;
+  flex: 1;
+  padding-top: 16px;
+  overflow: hidden;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, .04);
+}
+
+.panel-content {
+  flex-direction: column;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+}
+
+.panel-content.left-panel-content {
+  flex-direction: column;
+  height: 100%;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.panel-content.left-panel-content .playground-panel-header {
+  border-bottom: 1px solid rgba(0, 0, 0, .06);
+  flex-shrink: 0;
+  align-items: center;
+  height: 60px;
+  padding: 0 24px;
+  display: flex;
+}
+
+.panel-content.left-panel-content .playground-panel-header .header-row {
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  display: flex;
+}
+
+.panel-content.left-panel-content .playground-panel-playground {
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding: 0 24px;
+  display: flex;
+}
+
+.panel-content.left-panel-content .playground-panel-playground .playground-container {
+  background: #fff;
+  border: none;
+  border-radius: 8px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.panel-content.right-panel-content {
+  border-radius: 0;
+  flex-direction: column;
+  padding: 0 24px 24px;
+  display: flex;
+  overflow: hidden;
+}
+
+.panel-content.right-panel-content .screenshot-viewer {
+  flex: 1;
+  overflow: hidden;
+}
+
+.server-offline-container {
+  background: #f5f5f5;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  display: flex;
+}
+
+.server-offline-container .server-offline-message {
+  background: #f2f4f7;
+  border-radius: 8px;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 14px 24px 0;
+  display: flex;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
+}
+
+.server-offline-container .server-offline-message .server-offline-content {
+  text-align: center;
+  flex-direction: column;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  padding-top: max(200px, min(24vh, 280px));
+  display: flex;
+}
+
+.server-offline-container .server-offline-message .server-offline-icon {
+  width: 300px;
+  height: 212px;
+  display: inline-block;
+  position: relative;
+}
+
+.server-offline-container .server-offline-message .server-offline-icon .icon-background, .server-offline-container .server-offline-message .server-offline-icon .icon-foreground {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.server-offline-container .server-offline-message .server-offline-icon .icon-background {
+  z-index: 1;
+  width: 300px;
+  height: 212px;
+}
+
+.server-offline-container .server-offline-message .server-offline-icon .icon-foreground {
+  z-index: 2;
+  width: 134px;
+  height: 101px;
+}
+
+.server-offline-container .server-offline-message h1 {
+  color: #000;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.server-offline-container .server-offline-message .connection-status {
+  text-align: center;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.panel-resize-handle {
+  background-color: #f0f0f0;
+  transition: background-color .2s;
+  position: relative;
+}
+
+.panel-resize-handle.horizontal {
+  cursor: col-resize;
+  width: 1px;
+}
+
+.panel-resize-handle.vertical {
+  cursor: row-resize;
+  height: 1px;
+}
+
+.panel-resize-handle:hover, .panel-resize-handle:active, .panel-resize-handle[data-resize-handle-active] {
+  background-color: #1677ff;
+}
+
+.clear-button-container {
+  top: 20px !important;
+  right: -4px !important;
+}
+