@godscene/playground-electron 1.7.11

package/dist/es/ScrcpyPanel.mjs

@@ -0,0 +1,390 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrcpyVideoCodecId } from "@yume-chan/scrcpy";
+import { BitmapVideoFrameRenderer, WebCodecsVideoDecoder, WebGLVideoFrameRenderer } from "@yume-chan/scrcpy-decoder-webcodecs";
+import { Alert, Spin, Typography } from "antd";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { io } from "socket.io-client";
+import { SCRCPY_METADATA_TIMEOUT_MS, getDefaultScrcpyWaitingStatusText, getScrcpyDecoderStatusText, getScrcpyMetadataTimeoutMessage, getScrcpyPreviewStatusText, isScrcpyPreviewStatusEvent } from "./scrcpy-preview.mjs";
+import { createScrcpyVideoStream } from "./scrcpy-stream.mjs";
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+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;
+}
+function ScrcpyPanel_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else ScrcpyPanel_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const { Text } = Typography;
+function ScrcpyPanel({ connectingOverlay, deviceId, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000, viewportStyle }) {
+    const canvasStageRef = useRef(null);
+    const socketRef = useRef(null);
+    const decoderRef = useRef(null);
+    const metadataTimeoutRef = useRef(null);
+    const reconnectTimerRef = useRef(null);
+    const ignoreDisconnectRef = useRef(false);
+    const [status, setStatus] = useState('connecting');
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [waitingStatusMessage, setWaitingStatusMessage] = useState(()=>getDefaultScrcpyWaitingStatusText());
+    const [webCodecsSupported, setWebCodecsSupported] = useState(true);
+    const [retryNonce, setRetryNonce] = useState(0);
+    const statusText = useMemo(()=>getScrcpyPreviewStatusText(status, waitingStatusMessage), [
+        status,
+        waitingStatusMessage
+    ]);
+    const showCustomErrorOverlay = ('error' === status || 'disconnected' === status) && Boolean(renderErrorOverlay);
+    const renderResolvedErrorOverlay = renderErrorOverlay;
+    const requestRetry = useCallback(()=>{
+        setStatus('connecting');
+        setErrorMessage(null);
+        setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+        setRetryNonce((current)=>current + 1);
+    }, []);
+    useEffect(()=>{
+        null == onStatusChange || onStatusChange(status, statusText);
+    }, [
+        onStatusChange,
+        status,
+        statusText
+    ]);
+    const clearCanvas = ()=>{
+        const stage = canvasStageRef.current;
+        if (!stage) return;
+        stage.replaceChildren();
+    };
+    const disposeDecoder = ()=>{
+        if (!decoderRef.current) return;
+        decoderRef.current.dispose();
+        decoderRef.current = null;
+    };
+    const clearMetadataTimeout = ()=>{
+        if (metadataTimeoutRef.current) {
+            clearTimeout(metadataTimeoutRef.current);
+            metadataTimeoutRef.current = null;
+        }
+    };
+    useEffect(()=>{
+        if (!serverUrl) {
+            setStatus('error');
+            setErrorMessage('scrcpy preview metadata is missing a server URL.');
+            return;
+        }
+        if (!WebCodecsVideoDecoder.isSupported) {
+            setWebCodecsSupported(false);
+            setStatus('error');
+            setErrorMessage('Current browser does not support WebCodecs, so live scrcpy preview is unavailable.');
+            return;
+        }
+        let disposed = false;
+        let connectTimer = null;
+        const cleanup = ()=>{
+            if (connectTimer) {
+                clearTimeout(connectTimer);
+                connectTimer = null;
+            }
+            clearMetadataTimeout();
+            if (reconnectTimerRef.current) {
+                clearTimeout(reconnectTimerRef.current);
+                reconnectTimerRef.current = null;
+            }
+            if (socketRef.current) {
+                socketRef.current.disconnect();
+                socketRef.current = null;
+            }
+            disposeDecoder();
+            clearCanvas();
+        };
+        const scheduleReconnect = ()=>{
+            if (disposed || reconnectTimerRef.current) return;
+            reconnectTimerRef.current = setTimeout(()=>{
+                reconnectTimerRef.current = null;
+                cleanup();
+                connect();
+            }, reconnectInterval);
+        };
+        const createDecoder = (codecId)=>_async_to_generator(function*() {
+                var _canvasStageRef_current;
+                const renderer = WebGLVideoFrameRenderer.isSupported ? new WebGLVideoFrameRenderer() : new BitmapVideoFrameRenderer();
+                const canvas = renderer.canvas;
+                canvas.style.width = '100%';
+                canvas.style.height = '100%';
+                canvas.style.objectFit = 'contain';
+                clearCanvas();
+                null == (_canvasStageRef_current = canvasStageRef.current) || _canvasStageRef_current.appendChild(canvas);
+                const decoder = new WebCodecsVideoDecoder({
+                    codec: codecId,
+                    renderer
+                });
+                return decoder;
+            })();
+        const connect = ()=>{
+            if (disposed) return;
+            ignoreDisconnectRef.current = false;
+            setStatus('connecting');
+            setErrorMessage(null);
+            setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+            const socket = io(serverUrl, {
+                withCredentials: true,
+                reconnection: false,
+                timeout: 10000,
+                transports: [
+                    'websocket'
+                ]
+            });
+            socketRef.current = socket;
+            const videoStream = createScrcpyVideoStream(socket);
+            socket.on('connect', ()=>{
+                setStatus('waiting-for-stream');
+                setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+                clearMetadataTimeout();
+                metadataTimeoutRef.current = setTimeout(()=>{
+                    if (disposed) return;
+                    ignoreDisconnectRef.current = true;
+                    setStatus('error');
+                    setErrorMessage(getScrcpyMetadataTimeoutMessage(metadataTimeoutMs));
+                    setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+                    socket.disconnect();
+                    socketRef.current = null;
+                    scheduleReconnect();
+                }, metadataTimeoutMs);
+                socket.emit('connect-device', _object_spread_props(_object_spread({}, 'string' == typeof deviceId && deviceId.trim() ? {
+                    deviceId: deviceId.trim()
+                } : {}), {
+                    maxSize: 1024
+                }));
+            });
+            socket.on('preview-status', (event)=>{
+                if (disposed || !isScrcpyPreviewStatusEvent(event)) return;
+                setStatus('waiting-for-stream');
+                setWaitingStatusMessage(event.message);
+            });
+            socket.on('video-metadata', (metadata)=>_async_to_generator(function*() {
+                    try {
+                        clearMetadataTimeout();
+                        disposeDecoder();
+                        setWaitingStatusMessage(getScrcpyDecoderStatusText());
+                        const codecId = metadata.codec ? metadata.codec : ScrcpyVideoCodecId.H264;
+                        const decoder = yield createDecoder(codecId);
+                        decoderRef.current = decoder;
+                        videoStream.pipeTo(decoder.writable).catch((error)=>{
+                            if (disposed) return;
+                            setStatus('error');
+                            setErrorMessage(error.message);
+                            scheduleReconnect();
+                        });
+                        setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+                        setStatus('connected');
+                    } catch (error) {
+                        if (disposed) return;
+                        setStatus('error');
+                        setErrorMessage(error instanceof Error ? error.message : 'Failed to start decoder.');
+                        setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+                        scheduleReconnect();
+                    }
+                })());
+            socket.on('disconnect', ()=>{
+                clearMetadataTimeout();
+                if (disposed) return;
+                if (ignoreDisconnectRef.current) {
+                    ignoreDisconnectRef.current = false;
+                    return;
+                }
+                setStatus('disconnected');
+                setErrorMessage(null);
+                setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+                scheduleReconnect();
+            });
+            socket.on('connect_error', (error)=>{
+                clearMetadataTimeout();
+                if (disposed) return;
+                setStatus('error');
+                setErrorMessage(error.message);
+                setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+                scheduleReconnect();
+            });
+            socket.on('error', (error)=>{
+                clearMetadataTimeout();
+                if (disposed) return;
+                setStatus('error');
+                setErrorMessage(error.message);
+                setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+                scheduleReconnect();
+            });
+        };
+        connectTimer = setTimeout(()=>{
+            connectTimer = null;
+            connect();
+        }, 0);
+        return ()=>{
+            disposed = true;
+            cleanup();
+        };
+    }, [
+        deviceId,
+        metadataTimeoutMs,
+        reconnectInterval,
+        retryNonce,
+        serverUrl
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column'
+        },
+        children: [
+            errorMessage && !showCustomErrorOverlay ? /*#__PURE__*/ jsx(Alert, {
+                type: "warning",
+                showIcon: true,
+                style: {
+                    marginBottom: 12
+                },
+                message: statusText,
+                description: errorMessage
+            }) : null,
+            /*#__PURE__*/ jsxs("div", {
+                style: _object_spread({
+                    position: 'relative',
+                    flex: 1,
+                    minHeight: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#111827',
+                    borderRadius: 8,
+                    overflow: 'hidden'
+                }, viewportStyle),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        ref: canvasStageRef,
+                        style: {
+                            position: 'absolute',
+                            inset: 0,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        }
+                    }),
+                    'connected' !== status ? showCustomErrorOverlay && renderResolvedErrorOverlay ? /*#__PURE__*/ jsx("div", {
+                        style: {
+                            position: 'absolute',
+                            inset: 0,
+                            zIndex: 1
+                        },
+                        children: renderResolvedErrorOverlay({
+                            errorMessage,
+                            retry: requestRetry,
+                            status,
+                            statusText
+                        })
+                    }) : 'error' !== status && 'disconnected' !== status && connectingOverlay ? /*#__PURE__*/ jsx("div", {
+                        style: {
+                            position: 'absolute',
+                            inset: 0,
+                            zIndex: 1
+                        },
+                        children: connectingOverlay
+                    }) : /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            position: 'absolute',
+                            inset: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: 12,
+                            color: '#fff',
+                            background: 'rgba(17, 24, 39, 0.78)',
+                            textAlign: 'center',
+                            padding: 24,
+                            zIndex: 1
+                        },
+                        children: [
+                            'error' === status ? null : /*#__PURE__*/ jsx(Spin, {
+                                spinning: true
+                            }),
+                            /*#__PURE__*/ jsx(Text, {
+                                style: {
+                                    color: '#fff'
+                                },
+                                children: statusText
+                            }),
+                            'error' === status ? /*#__PURE__*/ jsx(Text, {
+                                style: {
+                                    color: '#d1d5db'
+                                },
+                                children: "Scrcpy preview will retry automatically."
+                            }) : null,
+                            !webCodecsSupported && /*#__PURE__*/ jsx(Text, {
+                                style: {
+                                    color: '#d1d5db'
+                                },
+                                children: "Please use a modern Chromium browser to view the stream."
+                            })
+                        ]
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+export { ScrcpyPanel };

package/dist/es/SessionSetupPanel.css

@@ -0,0 +1,299 @@
+.session-setup-panel {
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  background: var(--midscene-surface, #fff);
+  flex-direction: column;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 0;
+  padding: 0 56px 32px;
+  display: flex;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.session-setup-card {
+  flex-direction: column;
+  flex-shrink: 0;
+  align-items: center;
+  width: 100%;
+  max-width: 288px;
+  margin-top: max(32px, min(10vh, 96px));
+  padding-bottom: 32px;
+  display: flex;
+}
+
+.session-setup-logo {
+  object-fit: contain;
+  flex-shrink: 0;
+  width: 51px;
+  height: 48px;
+}
+
+.session-setup-title {
+  width: 240px;
+  color: var(--midscene-text-primary, #000);
+  text-align: center;
+  white-space: pre-line;
+  margin: 16px 0 0;
+  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.session-setup-description {
+  width: 276px;
+  color: var(--midscene-text-secondary, rgba(0, 0, 0, .7));
+  text-align: center;
+  margin: 14.7px 0 0;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.session-setup-alert.ant-alert {
+  width: 100%;
+  margin-top: 16px;
+}
+
+.session-setup-form {
+  width: 100%;
+  margin-top: 24px;
+}
+
+.session-setup-form .ant-form-item {
+  margin-bottom: 16px;
+}
+
+.session-setup-form .ant-form-item-label {
+  padding-bottom: 4px;
+}
+
+.session-setup-form .ant-form-item-label > label {
+  height: 15px;
+  color: var(--midscene-text-tertiary, rgba(0, 0, 0, .5));
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14.5px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:before {
+  color: var(--midscene-text-tertiary, rgba(0, 0, 0, .5));
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
+  margin-right: 2px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
+  margin-right: 2px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
+  margin-right: 2px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
+  margin-left: 2px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
+  margin-left: 2px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
+  margin-left: 2px;
+}
+
+.session-setup-form .ant-select-single .ant-select-selector {
+  background: var(--midscene-surface-muted, #f2f4f7);
+  height: 36px;
+  box-shadow: none;
+  border: none;
+  border-radius: 8px;
+  align-items: center;
+  padding: 0 12px;
+  display: flex;
+}
+
+.session-setup-form .ant-select-single .ant-select-selector .ant-select-selection-item, .session-setup-form .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+  color: var(--midscene-text-primary, #000);
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 36px;
+}
+
+.session-setup-form .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+  color: var(--midscene-text-placeholder, rgba(0, 0, 0, .4));
+}
+
+.session-setup-form .ant-select-arrow:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: 12px;
+}
+
+.session-setup-form .ant-select-arrow:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: 12px;
+}
+
+.session-setup-form .ant-select-arrow:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: 12px;
+}
+
+.session-setup-form .ant-select-arrow:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: 12px;
+}
+
+.session-setup-form .ant-select-arrow:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: 12px;
+}
+
+.session-setup-form .ant-select-arrow:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: 12px;
+}
+
+.session-setup-form .ant-input, .session-setup-form .ant-input-number {
+  background: var(--midscene-surface-muted, #f2f4f7);
+  height: 36px;
+  box-shadow: none;
+  color: var(--midscene-text-primary, #000);
+  border: none;
+  border-radius: 8px;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 14px;
+}
+
+.session-setup-form .ant-input-number-input {
+  height: 36px;
+}
+
+.session-setup-select-icon {
+  object-fit: contain;
+  pointer-events: none;
+  width: 16px;
+  height: 16px;
+}
+
+.session-setup-submit {
+  background: var(--midscene-brand, #1979ff);
+  color: #f2f4f7;
+  cursor: pointer;
+  border: 0;
+  border-radius: 8px;
+  width: 100%;
+  height: 32px;
+  margin-top: 7px;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  transition: opacity .2s;
+}
+
+.session-setup-submit:hover:not(:disabled) {
+  opacity: .9;
+}
+
+.session-setup-submit:disabled {
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+.platform-selector-group {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  width: 100%;
+  display: grid;
+}
+
+.platform-selector-group .ant-radio-button-wrapper {
+  white-space: normal;
+  background: #fff;
+  border-radius: 14px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  height: auto;
+  min-height: 92px;
+  padding: 14px 16px;
+  transition: border-color .2s, box-shadow .2s, transform .2s;
+  display: flex;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  border-left-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  border-left-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  border-left-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  border-right-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  border-right-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  border-right-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:before {
+  display: none;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:hover {
+  border-color: #1677ff;
+  transform: translateY(-1px);
+}
+
+.platform-selector-group .ant-radio-button-wrapper-checked {
+  border-color: #1677ff;
+  box-shadow: 0 10px 24px rgba(22, 119, 255, .12);
+}
+
+.platform-selector-card .platform-selector-title {
+  color: rgba(0, 0, 0, .88);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.platform-selector-card .platform-selector-description {
+  color: rgba(0, 0, 0, .5);
+  margin-top: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.session-select-option {
+  flex-direction: column;
+  gap: 2px;
+  line-height: 1.4;
+  display: flex;
+}
+
+.session-select-option-label {
+  color: rgba(0, 0, 0, .88);
+}
+
+.session-select-option-description {
+  color: rgba(0, 0, 0, .45);
+  font-size: 12px;
+}
+
+@media (max-width: 640px) {
+  .platform-selector-group {
+    grid-template-columns: 1fr;
+  }
+}
+