simdeck 0.1.4 → 0.1.5

package/README.md

@@ -39,7 +39,7 @@ view inside the editor.
 - Full simulator control & inspection using private accessibility APIs - available using `simdeck` CLI
 - Real-time screen `describe` command using accessibility view tree - available in token-efficient format for agents
 - CoreSimulator chrome asset rendering for device bezels
-- NativeScript, React Native, UIKit and SwiftUI runtime inspector plugins to view app's view hierarchy live
+- NativeScript, React Native, Flutter, UIKit and SwiftUI runtime inspector plugins to view app's view hierarchy live
 - `simdeck/test` for fast JS/TS app tests that can query accessibility state and drive simulator controls.
 - SimDeck Studio for sharing Simulator streams & automatic PR deployments to on-demand simulators
 
@@ -47,6 +47,9 @@ view inside the editor.
 
 Full documentation lives at [simdeck.nativescript.org](https://simdeck.nativescript.org/), with guides, the CLI reference, the REST API, the video pipeline, and the inspector protocols.
 
+For hosted pull request simulator sessions, use the GitHub Actions integration
+documented in the [GitHub Actions guide](https://simdeck.nativescript.org/guide/github-actions).
+
 ## Quick start
 
 ```sh
@@ -179,9 +182,10 @@ booting is unavailable.
 `stream` writes an Annex B H.264 elementary stream to stdout for diagnostics or
 external tools such as `ffplay`.
 
-`describe` uses the project daemon to prefer React Native, NativeScript, or
-UIKit in-app inspectors, then falls back to the built-in private CoreSimulator
-accessibility bridge. Use `--format agent` or `--format compact-json` for
+`describe` uses the project daemon to prefer React Native, NativeScript,
+Flutter, or UIKit in-app inspectors, then falls back to the built-in private
+CoreSimulator accessibility bridge. Use `--format agent` or
+`--format compact-json` for
 lower-token hierarchy dumps. Coordinate commands accept screen coordinates from
 the accessibility tree by default; pass `--normalized` to send `0.0..1.0`
 coordinates directly.
@@ -229,19 +233,35 @@ React Native apps can expose their component tree and Metro dev-mode source
 locations with the React Native inspector package:
 
 ```ts
-import { AppRegistry } from "react-native";
-import { startSimDeckReactNativeInspector } from "react-native-simdeck";
-import App from "./App";
+import "react-native-simdeck/auto";
+import "expo-router/entry";
+```
 
-if (__DEV__) {
-  startSimDeckReactNativeInspector({ port: 4310 });
-}
+Import it before `expo-router/entry` or `AppRegistry.registerComponent(...)`
+so the package can capture React Fiber commits. The auto entrypoint no-ops
+outside development, reads `EXPO_PUBLIC_SIMDECK_PORT` when present, and
+otherwise scans common SimDeck daemon ports.
 
-AppRegistry.registerComponent("Example", () => App);
-```
+## Flutter Inspector
+
+Flutter apps can expose their widget tree, render frames, semantics metadata,
+and debug widget creation locations with the Flutter inspector package:
 
-Call it before `AppRegistry.registerComponent(...)` so the package can capture
-React Fiber commits.
+```dart
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
+import 'package:simdeck_flutter_inspector/simdeck_flutter_inspector.dart';
+
+void main() {
+  WidgetsFlutterBinding.ensureInitialized();
+
+  if (kDebugMode) {
+    startSimDeckFlutterInspector(port: 4310);
+  }
+
+  runApp(const App());
+}
+```
 
 ## VS Code
 

package/client/dist/assets/index-D2-CFde1.css

@@ -0,0 +1 @@
+:root{color-scheme:light dark;--bg: #1e1e1e;--surface: #252526;--surface-hover: #2d2d2e;--toolbar-bg: var(--surface);--toolbar-shadow: none;--border: #3c3c3c;--border-subtle: #333333;--text: #cccccc;--text-secondary: #888888;--text-muted: #666666;--accent: #0078d4;--accent-text: #ffffff;--success: #4ec9b0;--success-bg: rgba(78, 201, 176, .12);--error: #f14c4c;--error-bg: rgba(241, 76, 76, .1);--canvas-bg: #1a1a1a;--bezel: #111111;--bezel-highlight: rgba(255, 255, 255, .06);--screen-bg: #000000}@media(prefers-color-scheme:light){:root{--bg: #ffffff;--surface: #ffffff;--surface-hover: #f5f5f5;--toolbar-bg: #ffffff;--toolbar-shadow: 0 1px 6px rgba(0, 0, 0, .08);--border: #e3e3e3;--border-subtle: #eeeeee;--text: #1e1e1e;--text-secondary: #656565;--text-muted: #999999;--canvas-bg: #ffffff;--bezel: #1a1a1a;--bezel-highlight: rgba(255, 255, 255, .08);--error: #cd3131;--error-bg: rgba(205, 49, 49, .08);--success: #16825d;--success-bg: rgba(22, 130, 93, .08)}}*,*:before,*:after{box-sizing:border-box;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:13px;background:var(--bg);color:var(--text);overflow:hidden}button,input{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-rows:auto 1fr;height:100vh;height:100dvh;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:0 8px;background:var(--toolbar-bg);border-bottom:1px solid var(--border);box-shadow:var(--toolbar-shadow);-webkit-user-select:none;user-select:none;flex-shrink:0;z-index:10}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px;min-width:0}.toolbar-left{flex:1;min-width:0}.toolbar-sim-info{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}.toolbar-sim-copy{display:flex;flex-direction:column;gap:1px;min-width:0}.toolbar-sim-title-row{display:flex;align-items:center;gap:6px;min-width:0}.toolbar-sim-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-sim-detail{color:var(--text-secondary);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-status-dot{width:8px;height:8px}.toolbar-actions{display:flex;align-items:center;gap:6px;min-width:0}.main{position:relative;display:flex;overflow:hidden;min-height:0;min-width:0;width:100%;height:100%}.viewport-zoom-dock{position:absolute;right:16px;bottom:16px;z-index:8}@media(max-width:600px){.app{grid-template-rows:auto minmax(0,1fr)}.toolbar{height:40px;min-height:40px;flex-wrap:nowrap;align-items:center;gap:6px;padding:6px}.toolbar-left{flex:1 1 auto;min-width:0}.toolbar-right{flex:0 0 auto;max-width:58%;min-width:0;overflow:visible}.toolbar-sim-info{flex:1 1 auto;min-width:0}.toolbar-actions{flex:0 0 auto;width:auto;min-width:0}.error-msg{max-width:96px}.toolbar-mobile-hidden{display:inline-flex}.mobile-menu-action{display:none}.debug-grid{grid-template-columns:1fr}.debug-row-wide{grid-column:auto}.viewport-zoom-dock{right:12px;bottom:12px;max-width:calc(100vw - 24px)}.menu-popover{width:min(260px,calc(100vw - 16px))}.hierarchy-panel{position:absolute;top:8px;left:8px;bottom:8px;z-index:18;flex:none;width:min(360px,calc(100vw - 16px));min-width:0;max-width:calc(100vw - 16px);max-height:none;height:calc(100% - 16px);border:1px solid var(--border);border-radius:8px;box-shadow:0 16px 40px #00000047}.webkit-panel{position:absolute;top:8px;right:8px;bottom:8px;z-index:18;flex:none;width:min(720px,calc(100vw - 16px));min-width:0;max-width:calc(100vw - 16px);max-height:none;height:calc(100% - 16px);border:1px solid var(--border);border-radius:8px;box-shadow:0 16px 40px #00000047}.webkit-resize-x,.toolbar-sim-detail{display:none}}.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:26px;min-width:26px;padding:0 8px;border:none;border-radius:5px;background:transparent;color:var(--text);font-size:12px;white-space:nowrap;transition:background .1s}.tbtn:hover,.tbtn.active{background:var(--surface-hover)}.tbtn:disabled{cursor:default;opacity:.45}.tbtn:disabled:hover{background:transparent}.tbtn.accent{background:var(--accent);color:var(--accent-text);font-weight:600}.tbtn.accent:hover{filter:brightness(1.15)}.pairing-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pairing-panel{width:min(360px,calc(100vw - 32px));display:grid;gap:12px;padding:20px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 18px 48px #00000052}.pairing-panel h2{margin:0;color:var(--text);font-size:18px;line-height:1.2}.pairing-panel p{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.4}.pairing-panel input{width:100%;min-width:0;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-hover);color:var(--text);font:inherit;font-size:15px;font-variant-numeric:tabular-nums;outline:none}.pairing-panel input:focus{border-color:var(--accent)}.pairing-panel span{color:var(--error);font-size:12px;line-height:1.35}.icon-btn{padding:0}.toolbar .tbtn svg{width:18px;height:18px}.toolbar-right .icon-btn svg{width:16px;height:16px}.state-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex-shrink:0}.state-dot.booted{background:var(--success)}.zoom-controls{display:flex;align-items:center;gap:2px}.zoom-controls-floating{gap:4px;flex-wrap:wrap;justify-content:flex-end;padding:6px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 12px 24px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.zoom-label{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-secondary);min-width:36px;text-align:center;-webkit-user-select:none;user-select:none}.debug-panel{padding:10px 12px 12px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 12px 32px #00000047;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.debug-panel-popover{position:absolute;top:calc(100% + 8px);right:0;width:min(360px,calc(100vw - 16px));z-index:30}.debug-panel-inline{width:100%;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.debug-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.debug-close{display:inline-grid;place-items:center;width:24px;height:24px;margin:-6px -4px -4px 0;padding:0;color:var(--text-secondary);background:transparent;border:0;border-radius:6px;cursor:pointer;font-size:18px;line-height:1}.debug-close:hover{color:var(--text);background:var(--surface-raised)}.debug-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.debug-row{min-width:0}.debug-row-wide{grid-column:1 / -1}.debug-label{margin-bottom:2px;color:var(--text-muted);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.debug-value{color:var(--text);font-size:12px;font-variant-numeric:tabular-nums}.debug-value-wrap{line-height:1.4;white-space:normal;word-break:break-word}.menu-wrap{position:relative}.menu-popover{position:absolute;top:calc(100% + 6px);left:0;width:260px;max-height:min(72vh,560px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 12px 32px #00000047;overflow:hidden;z-index:20}.sidebar-search{width:100%;padding:8px 12px;border:none;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--text);outline:none;font-size:12px;flex-shrink:0}.sidebar-search:focus{background:var(--surface-hover)}.sidebar-search::placeholder{color:var(--text-muted)}.sim-list{flex:1;overflow-y:auto;padding:4px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.sim-list::-webkit-scrollbar{width:6px}.sim-list::-webkit-scrollbar-track{background:transparent}.sim-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.menu-divider{height:1px;background:var(--border-subtle)}.menu-actions{display:flex;flex-direction:column;padding:4px}.menu-section{display:flex;flex-direction:column;gap:6px;padding:8px}.menu-section+.menu-section{padding-top:0}.menu-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.menu-section-title{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:0;text-transform:uppercase}.menu-section-meta{min-width:0;overflow:hidden;color:var(--text-secondary);font-size:11px;line-height:1.2;text-align:right;text-overflow:ellipsis;white-space:nowrap}.menu-segment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.menu-segment.two{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-field{display:grid;gap:5px}.menu-field-label{color:var(--text-muted);font-size:10px;font-weight:600;letter-spacing:0;text-transform:uppercase}.menu-select{width:100%;height:32px;padding:0 28px 0 10px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--surface);color:var(--text);font:inherit;font-size:12px}.menu-select:hover{background:var(--surface-hover)}.menu-select:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}.menu-option{min-width:0;height:30px;padding:0 6px;border:1px solid var(--border-subtle);border-radius:6px;background:transparent;color:var(--text);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-option:hover:not(:disabled){background:var(--surface-hover)}.menu-option.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text)}.menu-option:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.55}.menu-debug-panel{padding:6px 4px 4px}.menu-action{width:100%;padding:8px 10px;border:none;border-radius:6px;background:transparent;color:var(--text);text-align:left;font-size:12px;transition:background .1s}.menu-action:hover{background:var(--surface-hover)}.mobile-menu-action{display:none}.sim-item{display:flex;flex-direction:column;gap:2px;width:100%;padding:7px 10px;border:none;border-radius:6px;background:transparent;color:inherit;text-align:left;transition:background .1s}.sim-item:hover{background:var(--surface-hover)}.sim-item.selected{background:var(--accent);color:#fff}.sim-item.selected .sim-item-meta{color:#ffffffb3}.sim-item.selected .state-dot{background:#ffffff80}.sim-item.selected .state-dot.booted{background:#80f0c8}.sim-item-name{font-size:12px;font-weight:600;line-height:1.3}.sim-item-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary);line-height:1.3}.list-empty{padding:20px 12px;text-align:center;color:var(--text-muted);font-size:12px}.hierarchy-panel{position:relative;box-sizing:border-box;flex:0 0 var(--hierarchy-panel-width, 320px);width:var(--hierarchy-panel-width, 320px);min-width:240px;max-width:55vw;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface);overflow:hidden;transition:flex-basis .24s cubic-bezier(.2,0,0,1),width .24s cubic-bezier(.2,0,0,1),opacity .18s ease}.hierarchy-panel[data-state=closed]{flex-basis:0;width:0;min-width:0;max-width:0;opacity:0;pointer-events:none;border-right-width:0}.hierarchy-tools{display:flex;align-items:center;gap:4px;min-height:34px;padding:4px 6px;border-bottom:1px solid var(--border-subtle)}.hierarchy-tools .tbtn.active{color:var(--accent-text);background:var(--accent)}.hierarchy-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:9px 10px 9px 12px;border-bottom:1px solid var(--border-subtle)}.hierarchy-title{color:var(--text);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.hierarchy-subtitle{max-width:190px;overflow:hidden;color:var(--text-secondary);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.hierarchy-tree{flex:1;min-height:0;overflow:auto;padding:4px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.hierarchy-source{display:flex;align-items:center;gap:6px;min-height:26px;padding:3px 6px 6px;color:var(--text-muted);font-size:10px}.hierarchy-source-switcher{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.hierarchy-source-pill{display:inline-flex;align-items:center;max-width:150px;overflow:hidden;position:relative;padding:2px 6px;border:1px solid var(--border-subtle);border-radius:999px;background:color-mix(in srgb,var(--surface-hover) 70%,transparent);color:var(--text-secondary);font-weight:700;letter-spacing:.03em;line-height:1.2;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.hierarchy-source-pill:not(:disabled):hover{background:var(--surface-hover);color:var(--text)}.hierarchy-source-pill.source-in-app-inspector{border-color:color-mix(in srgb,var(--success) 50%,var(--border));background:var(--success-bg);color:color-mix(in srgb,var(--success) 82%,var(--text))}.hierarchy-source-pill.source-nativescript{border-color:color-mix(in srgb,#65d2ff 55%,var(--border));background:color-mix(in srgb,#65d2ff 16%,transparent);color:color-mix(in srgb,#65d2ff 82%,var(--text))}.hierarchy-source-pill.source-react-native{border-color:color-mix(in srgb,#61dafb 50%,var(--border));background:color-mix(in srgb,#61dafb 14%,transparent);color:color-mix(in srgb,#61dafb 78%,var(--text))}.hierarchy-source-pill.source-flutter{border-color:color-mix(in srgb,#54c5f8 50%,var(--border));background:color-mix(in srgb,#54c5f8 14%,transparent);color:color-mix(in srgb,#54c5f8 80%,var(--text))}.hierarchy-source-pill.source-swiftui{border-color:color-mix(in srgb,#ff6b9d 50%,var(--border));background:color-mix(in srgb,#ff6b9d 14%,transparent);color:color-mix(in srgb,#ff6b9d 82%,var(--text))}.hierarchy-source-pill.source-native-ax{border-color:color-mix(in srgb,#d7ba7d 55%,var(--border));background:color-mix(in srgb,#d7ba7d 13%,transparent);color:color-mix(in srgb,#d7ba7d 82%,var(--text))}.hierarchy-source-pill.active{gap:5px;padding-inline:7px 8px;border-color:color-mix(in srgb,var(--accent) 34%,var(--border));background:color-mix(in srgb,var(--accent) 9%,var(--surface-hover));color:var(--text);box-shadow:none;opacity:1}.hierarchy-source-pill.active:before{content:"";width:6px;height:6px;flex:0 0 auto;border-radius:999px;background:color-mix(in srgb,var(--accent) 62%,var(--text-muted))}.hierarchy-source-pill:disabled{cursor:default}.hierarchy-source-note{min-width:0;overflow:hidden;color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap}.hierarchy-node{display:flex;align-items:center;gap:2px;width:max-content;min-width:100%;min-height:26px;padding-block:1px;padding-right:8px;border-radius:5px;color:var(--text)}.hierarchy-node:hover{background:var(--surface-hover)}.hierarchy-node.selected{background:var(--accent);color:var(--accent-text)}.hierarchy-disclosure{width:16px;height:22px;flex:0 0 auto;padding:0;border:none;background:transparent;color:var(--text-secondary);font-size:11px;line-height:1}.hierarchy-disclosure.empty{visibility:hidden}.hierarchy-node-main{display:flex;align-items:center;gap:7px;flex:0 0 auto;width:max-content;height:24px;padding:0;border:none;background:transparent;color:inherit;text-align:left}.hierarchy-node-kind{color:var(--success);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;white-space:nowrap}.hierarchy-node-chain{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:16px;padding:0 5px;border:1px solid var(--border-subtle);border-radius:999px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;line-height:1;white-space:nowrap}.hierarchy-node-chain-path{max-width:260px;overflow:hidden;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.hierarchy-node.selected .hierarchy-node-kind{color:color-mix(in srgb,var(--accent-text) 82%,var(--success))}.hierarchy-node-text{color:inherit;font-size:12px;white-space:nowrap}.hierarchy-node-source{color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;white-space:nowrap}.hierarchy-node.selected .hierarchy-node-source{color:color-mix(in srgb,var(--accent-text) 72%,transparent)}.hierarchy-empty{padding:18px 10px;color:var(--text-muted);font-size:12px;line-height:1.4;text-align:center}.hierarchy-empty.error{color:var(--error)}.hierarchy-details-wrap{position:relative;flex:0 0 auto;min-height:132px;max-height:60%;overflow:hidden;border-top:1px solid var(--border-subtle);background:color-mix(in srgb,var(--surface) 94%,var(--bg))}.hierarchy-details{height:100%;overflow:auto;padding:12px}.hierarchy-details-title{margin-bottom:8px;color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.hierarchy-detail-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;padding:3px 0;font-size:11px;line-height:1.35}.hierarchy-detail-label{color:var(--text-muted)}.hierarchy-detail-value{overflow-wrap:anywhere;color:var(--text)}.uikit-script{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-subtle)}.uikit-script-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}.uikit-script-title{color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.uikit-script-target,.uikit-script-result{color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;line-height:1.35;overflow-wrap:anywhere}.uikit-script-run{padding:6px 8px;border:1px solid var(--border-subtle);border-radius:6px;background:color-mix(in srgb,var(--surface) 88%,var(--bg));color:var(--text);cursor:pointer;font-size:11px;font-weight:650}.uikit-script-run:hover:not(:disabled){border-color:var(--accent)}.uikit-script-run:disabled{cursor:default;opacity:.55}.uikit-script-form{display:grid;gap:6px}.uikit-script-input{width:100%;min-height:58px;resize:vertical;padding:7px 8px;border:1px solid var(--border-subtle);border-radius:7px;outline:none;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px}.uikit-script-input:focus{border-color:var(--accent)}.uikit-script-result{margin-top:7px}.uikit-script-error{margin-top:7px;color:var(--error);font-size:11px;line-height:1.35}.webkit-panel{position:relative;box-sizing:border-box;flex:0 0 var(--webkit-panel-width, clamp(420px, 42vw, 760px));width:var(--webkit-panel-width, clamp(420px, 42vw, 760px));min-width:360px;max-width:min(82vw,max(360px,calc(100vw - 340px)));display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--surface);overflow:hidden;transition:flex-basis .24s cubic-bezier(.2,0,0,1),width .24s cubic-bezier(.2,0,0,1),opacity .18s ease}.webkit-panel[data-state=closed]{flex-basis:0;width:0;min-width:0;max-width:0;opacity:0;pointer-events:none;border-left-width:0}.webkit-panel.resizing .webkit-frame,.is-resizing-devtools .webkit-frame{pointer-events:none}.webkit-resize-x{position:absolute;top:0;bottom:0;left:-4px;z-index:6;width:8px;cursor:col-resize;touch-action:none}.webkit-resize-x:after{position:absolute;top:0;bottom:0;left:3px;width:1px;content:"";background:transparent}.webkit-resize-x:hover:after,.webkit-resize-x:focus-visible:after,.webkit-panel.resizing .webkit-resize-x:after{background:color-mix(in srgb,var(--accent) 55%,transparent)}.webkit-resize-x:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:-1px}.is-resizing-devtools{cursor:col-resize;-webkit-user-select:none;user-select:none}.webkit-targetbar{display:flex;align-items:center;gap:6px;min-height:38px;padding:6px 8px;border-bottom:1px solid var(--border-subtle)}.webkit-target-select{flex:1;min-width:0;height:28px;padding:0 26px 0 8px;border:1px solid var(--border-subtle);border-radius:6px;outline:none;background:var(--surface);color:var(--text);font:inherit;font-size:12px}.webkit-target-select:hover:not(:disabled){background:var(--surface-hover)}.webkit-target-select:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}.webkit-target-select:disabled{color:var(--text-muted);opacity:.7}.webkit-target-meta{display:flex;align-items:center;gap:8px;min-height:28px;padding:4px 10px;border-bottom:1px solid var(--border-subtle);color:var(--text-muted);font-size:11px}.webkit-target-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.webkit-target-meta span:first-child{flex:0 0 auto;color:var(--text-secondary);font-weight:650}.webkit-frame-wrap{position:relative;flex:1;min-height:0;background:var(--bg)}.webkit-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:var(--bg)}.devtools-overview{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;background:var(--bg)}.devtools-overview-list{display:grid;gap:10px;width:min(520px,100%)}.devtools-overview-card{display:grid;gap:5px;width:100%;min-height:82px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:8px;background:color-mix(in srgb,var(--surface) 92%,var(--bg));color:var(--text);font:inherit;text-align:left;cursor:pointer}.devtools-overview-card:hover{background:var(--surface-hover)}.devtools-overview-card:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}.devtools-overview-card-source{color:var(--text-secondary);font-size:11px;font-weight:650}.devtools-overview-card-title{min-width:0;overflow:hidden;color:var(--text);font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.devtools-overview-card-meta{min-width:0;overflow:hidden;color:var(--text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.webkit-status{position:absolute;inset:0;display:grid;place-items:center;padding:18px;color:var(--text-muted);font-size:12px;line-height:1.4;text-align:center;background:color-mix(in srgb,var(--surface) 96%,transparent)}.webkit-status.error{color:var(--error)}.webkit-warnings{flex:0 0 auto;max-height:96px;overflow:auto;padding:7px 10px;border-top:1px solid var(--border-subtle);color:var(--text-muted);font-size:11px;line-height:1.35}.console-panel{flex:1;overflow:auto;overflow-anchor:none;padding:6px 0;background:color-mix(in srgb,var(--surface) 92%,var(--bg));color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;line-height:1.35;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.console-filterbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:5px;overflow:visible;padding:6px 8px;border-bottom:1px solid var(--border-subtle);background:color-mix(in srgb,var(--surface) 96%,var(--bg))}.console-text-filterbar{flex:0 0 auto;padding:6px 8px;border-bottom:1px solid var(--border-subtle);background:color-mix(in srgb,var(--surface) 94%,var(--bg))}.console-text-filter{width:100%;height:26px;padding:0 8px;border:1px solid var(--border-subtle);border-radius:6px;outline:none;background:var(--bg);color:var(--text);font-size:12px}.console-text-filter:focus{border-color:color-mix(in srgb,var(--accent) 60%,var(--border))}.console-text-filter::placeholder{color:var(--text-muted)}.console-filter-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.console-filter-label{margin-right:2px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.console-filter-chip{max-width:120px;overflow:hidden;padding:3px 7px;border:1px solid var(--border-subtle);border-radius:999px;background:transparent;color:var(--text-secondary);font-size:10px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.console-filter-chip.active{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text)}.console-filter-chip.level-error.active{border-color:color-mix(in srgb,var(--error) 70%,var(--border));background:color-mix(in srgb,var(--error) 20%,transparent);color:color-mix(in srgb,var(--error) 78%,var(--text))}.console-filter-chip.level-default.active{border-color:color-mix(in srgb,var(--text-secondary) 70%,var(--border));background:color-mix(in srgb,var(--text-secondary) 18%,transparent)}.console-filter-chip.level-info.active{border-color:color-mix(in srgb,var(--success) 70%,var(--border));background:var(--success-bg);color:color-mix(in srgb,var(--success) 78%,var(--text))}.console-filter-chip.level-debug.active{border-color:color-mix(in srgb,#d7ba7d 70%,var(--border));background:color-mix(in srgb,#d7ba7d 18%,transparent);color:color-mix(in srgb,#d7ba7d 78%,var(--text))}.console-service-menu-wrap{position:relative;flex:0 0 auto}.console-service-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:32;width:min(280px,70vw);max-height:min(360px,58vh);overflow:auto;padding:5px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 12px 32px #00000047;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.console-service-empty{padding:12px;color:var(--text-muted);font-size:11px;text-align:center}.console-service-option{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:5px 7px;border:none;border-radius:5px;background:transparent;color:var(--text);font-size:11px;text-align:left}.console-service-option:hover:not(:disabled){background:var(--surface-hover)}.console-service-option:disabled{cursor:default}.console-service-check{width:12px;height:12px;flex:0 0 auto;border:1px solid var(--border);border-radius:3px}.console-service-check.checked{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 2px var(--surface)}.console-service-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.console-service-pin{color:var(--success);font-size:10px;text-transform:uppercase}.console-row{display:block;padding:3px 10px;border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 55%,transparent)}.console-process{display:inline;margin-right:7px;color:var(--console-service-color);font-weight:700}.console-message{display:inline;overflow-wrap:anywhere;color:var(--text)}.hierarchy-resize-x{position:absolute;top:0;right:-3px;bottom:0;z-index:4;width:6px;cursor:col-resize}.hierarchy-resize-x:hover{background:color-mix(in srgb,var(--accent) 35%,transparent)}.hierarchy-resize-y{position:absolute;top:-3px;right:0;left:0;z-index:4;height:6px;cursor:row-resize}.hierarchy-resize-y:hover{background:color-mix(in srgb,var(--accent) 35%,transparent)}.is-resizing{cursor:grabbing;-webkit-user-select:none;user-select:none}.is-resizing .hierarchy-panel,.is-resizing-devtools .webkit-panel{transition:none}.canvas{position:relative;overflow:hidden;display:flex;flex:1;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;min-height:0;min-width:0;width:100%;height:100%;overscroll-behavior:none;background:var(--canvas-bg)}.canvas.pan-enabled{cursor:grab}.canvas.panning{cursor:grabbing}.device-anchor{transform-origin:center center;will-change:transform;transition:transform .24s cubic-bezier(.2,0,0,1)}.device-anchor-loading{opacity:0;pointer-events:none}.device-frame{position:relative;transition:width .24s cubic-bezier(.2,0,0,1),height .24s cubic-bezier(.2,0,0,1)}.device-presentation{position:relative;transform-origin:top left;will-change:transform;transition:transform .24s cubic-bezier(.2,0,0,1)}.canvas.panning .device-anchor,.canvas.panning .device-frame,.canvas.panning .device-presentation{transition:none}.device-bezel{position:relative;background:var(--bezel);border-radius:48px;padding:14px;box-shadow:inset 0 0 0 1px var(--bezel-highlight)}.device-shell{position:relative}.device-chrome{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none;z-index:2}.device-chrome-buttons{position:absolute;inset:0;z-index:1;pointer-events:none}.device-chrome-buttons-over{z-index:3}.device-chrome-button{position:absolute;display:block;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;touch-action:none;transform:translate3d(var(--button-rest-x, 0),var(--button-rest-y, 0),0);transition:transform .13s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent;z-index:1}.device-chrome-button img{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.device-chrome-button-image-under{z-index:0}.device-chrome-button-image{z-index:1}.device-chrome-button .device-chrome-button-preload{display:none}.device-chrome-button:hover{transform:translate3d(var(--button-hover-x, 0),var(--button-hover-y, 0),0)}.device-chrome-button:active,.device-chrome-button.is-pressed{transform:translate3d(var(--button-rest-x, 0),var(--button-rest-y, 0),0)}.pan-enabled .device-bezel,.pan-enabled .device-shell{cursor:grab}.panning .device-bezel,.panning .device-shell{cursor:grabbing}.device-screen{width:320px;background:var(--screen-bg);border-radius:36px;overflow:hidden;cursor:crosshair;touch-action:none;position:relative;contain:paint;z-index:1}.device-screen.chrome-screen{position:absolute;width:auto;border-radius:0;box-shadow:0 0 0 1px var(--screen-bg)}.stream-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;background:transparent;pointer-events:none}.stream-video{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;background:#000;object-fit:fill;pointer-events:none;backface-visibility:hidden;transform:translateZ(0);will-change:transform}.accessibility-picker-layer{position:absolute;inset:0;z-index:3;cursor:crosshair;touch-action:none}.accessibility-overlay{position:absolute;inset:0;z-index:2;pointer-events:none}.touch-interaction-overlay{position:absolute;inset:0;z-index:4;pointer-events:none}.touch-indicator{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid rgba(245,245,245,.92);border-radius:999px;background:#ffffff2e;box-shadow:0 0 0 1px #00000070,0 0 14px #ffffff42;transform:translateZ(0) scale(.86);opacity:.9;transition:opacity .18s ease,transform .18s ease}.touch-indicator-began,.touch-indicator-moved{transform:translateZ(0) scale(1)}.touch-indicator-ended,.touch-indicator-cancelled{opacity:0;transform:translateZ(0) scale(1.55)}.accessibility-rect{position:absolute;min-width:8px;min-height:8px;border:1px solid var(--success);background:color-mix(in srgb,var(--success) 16%,transparent);box-shadow:0 0 0 1px #00000047}.accessibility-rect.hovered{border-style:dashed;background:color-mix(in srgb,var(--accent) 12%,transparent)}.accessibility-rect.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}.accessibility-rect span{position:absolute;left:-1px;bottom:calc(100% + 3px);max-width:180px;overflow:hidden;padding:2px 5px;border-radius:4px;background:var(--accent);color:var(--accent-text);font-size:10px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.screen-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;color:#f5f5f5db;font-size:13px;line-height:1.45;padding:24px 18px;text-align:center;overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.8);background:color-mix(in srgb,#000000 38%,transparent);pointer-events:none}.screen-loading{background:color-mix(in srgb,#000000 24%,transparent)}.canvas-empty{color:var(--text-muted);font-size:13px;text-align:center}.canvas-loading{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-secondary);font-size:13px;line-height:1.4;text-align:center;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.58)}.canvas-loading p{margin:0}.loading-spinner{width:28px;height:28px;border:2px solid color-mix(in srgb,var(--text-muted) 25%,transparent);border-top-color:var(--accent);border-radius:50%;animation:spin .78s linear infinite}.debug-overlay{position:absolute;top:12px;right:12px;z-index:14;width:min(360px,calc(100% - 24px));pointer-events:auto}.debug-overlay .debug-panel-inline{box-shadow:0 12px 32px #00000047;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media(max-width:600px){.hierarchy-panel{position:absolute;top:8px;left:8px;bottom:8px;z-index:18;flex:none;width:min(360px,calc(100vw - 16px))!important;min-width:0;max-width:calc(100vw - 16px);max-height:none;height:calc(100% - 16px);border:1px solid var(--border);border-radius:8px;box-shadow:0 16px 40px #00000047}.webkit-panel{position:absolute;top:8px;right:8px;bottom:8px;z-index:18;flex:none;width:min(720px,calc(100vw - 16px))!important;min-width:0;max-width:calc(100vw - 16px);max-height:none;height:calc(100% - 16px);border:1px solid var(--border);border-radius:8px;box-shadow:0 16px 40px #00000047}.webkit-resize-x,.hierarchy-resize-x{display:none}.viewport-zoom-dock{right:8px;bottom:8px;left:auto;width:max-content;max-width:calc(100vw - 16px)}.zoom-controls-floating{width:max-content;max-width:100%;justify-content:flex-end;overflow-x:auto;padding:5px;border-radius:8px}.zoom-controls-floating .tbtn{flex:0 0 auto}.debug-overlay{top:8px;right:8px;left:8px;width:auto;max-height:calc(100% - 72px);overflow:auto}.device-bezel{border-radius:34px;padding:10px}.device-screen{width:min(320px,calc(100vw - 44px))}.accessibility-rect span{max-width:120px}}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{height:24px;padding:0 6px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--error);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;max-width:220px}.error-msg:hover{border-color:color-mix(in srgb,var(--error) 35%,transparent);background:color-mix(in srgb,var(--error) 10%,transparent)}.error-msg.copied{color:var(--text)}.muted{color:var(--text-muted)}