getobsrv 0.8.0 → 0.10.0

package/out/renderer/assets/{index-Cgx8iixu.js → index-CQVE5hF3.js}

@@ -12782,7 +12782,13 @@ const useStore = create()((set) => ({
   update: null,
   image: null,
   surround: "graphite",
-  viewMode: "1:1",
+  // Fit, not 1:1: fit never enlarges past 1:1, so a render that already fits
+  // its pane opens at true magnification anyway, while one that does not is
+  // shown whole instead of as its top-left corner. Fit is interactive, so
+  // this costs nothing — and the footer names the actual magnification
+  // whenever fit is minifying.
+  viewMode: "fit",
+  panes: "both",
   fitScale: null,
   agentPan: null,
   agentHighlight: null,
@@ -12810,6 +12816,9 @@ const useStore = create()((set) => ({
   setImage: (image) => set({ image }),
   setSurround: (surround) => set({ surround }),
   setViewMode: (viewMode) => set({ viewMode }),
+  // No `agentHighlight: null` here, unlike setPreset: hiding a pane does not
+  // re-raster the target, so the highlight still marks the pixels it marked.
+  setPanes: (panes) => set({ panes }),
   setFitScale: (fitScale2) => set({ fitScale: fitScale2 }),
   requestAgentPan: (p) => set((s) => ({ agentPan: { ...p, seq: (s.agentPan?.seq ?? 0) + 1 } })),
   clearAgentPan: () => set({ agentPan: null }),
@@ -14021,7 +14030,6 @@ function TargetCanvas({ onFatal, imageFrame }) {
     canvas.addEventListener("wheel", onWheel, { passive: false });
     const onWindowUp = (e) => {
       if (useStore.getState().mode !== "url") return;
-      if (useStore.getState().viewMode !== "1:1") return;
       if (panRef.current || e.button === 1) return;
       if (e.altKey && !forwardDrag.current) return;
       if (e.target === canvas) return;
@@ -14095,7 +14103,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
     return body instanceof HTMLElement ? body : null;
   };
   const startPan = (e) => {
-    if (viewMode !== "1:1") return;
+    if (fit) return;
     if (!(e.button === 1 || e.button === 0 && e.altKey)) return;
     const body = paneBody();
     if (!body) return;
@@ -14144,7 +14152,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
     pendingJump.current = null;
   }, [viewMode]);
   const jumpTo1x = (e) => {
-    if (viewMode !== "fit") return;
+    if (!fit || !e.altKey) return;
     const r = e.currentTarget.getBoundingClientRect();
     pendingJump.current = jumpScroll(
       e.clientX - r.left,
@@ -14185,7 +14193,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
   }, [agentHighlight, clearAgentHighlight]);
   const send = (type) => (e) => {
     if (mode !== "url") return;
-    if (viewMode !== "1:1" || panRef.current || e.button === 1) return;
+    if (panRef.current || e.button === 1) return;
     if (e.altKey && !forwardDrag.current) return;
     const out = mouseEvent(type, e, e.currentTarget.getBoundingClientRect(), scale * dsf / dpr);
     if (out) {
@@ -14216,7 +14224,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
         "canvas",
         {
           ref: canvasRef,
-          className: `target-canvas${fit ? " fit" : panning ? " panning" : altHeld ? " pan-ready" : ""}`,
+          className: `target-canvas${panning ? " panning" : altHeld ? fit ? " fit" : " pan-ready" : ""}`,
           tabIndex: 0,
           style: { width: `${cssW}px`, height: `${cssH}px` },
           onClick: jumpTo1x,
@@ -14228,12 +14236,12 @@ function TargetCanvas({ onFatal, imageFrame }) {
           onMouseUp: send("mouseUp"),
           onMouseMove: send("mouseMove"),
           onKeyDown: (e) => {
-            if (mode !== "url" || viewMode !== "1:1") return;
+            if (mode !== "url") return;
             if (!e.metaKey && !e.ctrlKey) e.preventDefault();
             for (const ev of keyDownEvents(e)) window.obsrv.sendInput(ev);
           },
           onKeyUp: (e) => {
-            if (mode !== "url" || viewMode !== "1:1") return;
+            if (mode !== "url") return;
             const ev = keyUpEvent(e);
             if (ev) window.obsrv.sendInput(ev);
           }
@@ -14271,6 +14279,321 @@ function Toast() {
   if (!toast) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "toast", role: "status", children: toast });
 }
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+  return false;
+};
+const LucideContext = reactExports.createContext({});
+const useLucideContext = () => reactExports.useContext(LucideContext);
+const Icon$1 = reactExports.forwardRef(
+  ({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
+    const {
+      size: contextSize = 24,
+      strokeWidth: contextStrokeWidth = 2,
+      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
+      color: contextColor = "currentColor",
+      className: contextClass = ""
+    } = useLucideContext() ?? {};
+    const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
+    return reactExports.createElement(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes,
+        width: size ?? contextSize ?? defaultAttributes.width,
+        height: size ?? contextSize ?? defaultAttributes.height,
+        stroke: color ?? contextColor,
+        strokeWidth: calculatedStrokeWidth,
+        className: mergeClasses("lucide", contextClass, className),
+        ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+        ...rest
+      },
+      [
+        ...iconNode.map(([tag, attrs]) => reactExports.createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = reactExports.forwardRef(
+    ({ className, ...props }, ref) => reactExports.createElement(Icon$1, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$7 = [
+  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
+  ["path", { d: "M19 12H5", key: "x3x0zl" }]
+];
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$7);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$6 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
+];
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$6);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$5 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$5);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$4 = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
+  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
+];
+const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$4);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [
+  ["path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8", key: "1p45f6" }],
+  ["path", { d: "M21 3v5h-5", key: "1q7to0" }]
+];
+const RotateCw = createLucideIcon("rotate-cw", __iconNode$3);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$2 = [
+  [
+    "path",
+    {
+      d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
+      key: "1i5ecw"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+];
+const Settings = createLucideIcon("settings", __iconNode$2);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [
+  ["path", { d: "M10 5H3", key: "1qgfaw" }],
+  ["path", { d: "M12 19H3", key: "yhmn1j" }],
+  ["path", { d: "M14 3v4", key: "1sua03" }],
+  ["path", { d: "M16 17v4", key: "1q0r14" }],
+  ["path", { d: "M21 12h-9", key: "1o4lsq" }],
+  ["path", { d: "M21 19h-5", key: "1rlt1p" }],
+  ["path", { d: "M21 5h-7", key: "1oszz2" }],
+  ["path", { d: "M8 10v4", key: "tgpxqk" }],
+  ["path", { d: "M8 12H3", key: "a7s4jb" }]
+];
+const SlidersHorizontal = createLucideIcon("sliders-horizontal", __iconNode$1);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
+const ICONS = {
+  back: ArrowLeft,
+  forward: ArrowRight,
+  reload: RotateCw,
+  overflow: EllipsisVertical,
+  close: X,
+  sliders: SlidersHorizontal,
+  gear: Settings,
+  chevron: ChevronDown
+};
+function Icon({ name, size = 16 }) {
+  const Glyph = ICONS[name];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Glyph, { size, strokeWidth: 1.5, "aria-hidden": "true", focusable: "false" });
+}
+function OverflowMenu({ children }) {
+  const [open, setOpen] = reactExports.useState(false);
+  const ref = reactExports.useRef(null);
+  const buttonRef = reactExports.useRef(null);
+  const close = () => setOpen(false);
+  reactExports.useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (!ref.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      buttonRef.current?.focus();
+    };
+    const onBlur = () => setOpen(false);
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("blur", onBlur);
+    const offNativeFocus = window.obsrv.onNativeFocused(onBlur);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("blur", onBlur);
+      offNativeFocus();
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow", ref, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        ref: buttonRef,
+        className: "icon-button overflow-button",
+        type: "button",
+        title: "More",
+        "aria-label": "More",
+        "aria-haspopup": "true",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "overflow" })
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-menu", children: children(close) })
+  ] });
+}
+function Segmented({
+  className,
+  ariaLabel,
+  value,
+  options,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `segmented ${className}`, role: "group", "aria-label": ariaLabel, children: options.map((o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      className: o.className,
+      title: o.title,
+      "aria-pressed": value === o.id,
+      onClick: () => onChange(o.id),
+      children: o.label
+    },
+    o.id
+  )) });
+}
+function Select({ className, value, label, ariaLabel, onChange, children }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "select-shell", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-label", "aria-hidden": "true", children: label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-chevron", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "chevron", size: 14 }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "select",
+      {
+        className,
+        value,
+        "aria-label": ariaLabel,
+        onChange: (e) => onChange(e.target.value),
+        children
+      }
+    )
+  ] });
+}
 const SURROUNDS = [
   { id: "black", label: "Black surround", swatch: "#000000" },
   { id: "graphite", label: "Graphite surround", swatch: "#2a2a2a" },
@@ -14280,6 +14603,10 @@ const VIEWS = [
   { id: "1:1", label: "1:1", title: "Actual size" },
   { id: "fit", label: "Fit", title: "Fit the pane — not pixel-exact" }
 ];
+const PANES = [
+  { id: "both", label: "Both", title: "Native and target side by side" },
+  { id: "target", label: "Target", title: "The target render alone, full width" }
+];
 function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
   const mode = useStore((s) => s.mode);
   const presetId = useStore((s) => s.presetId);
@@ -14300,6 +14627,8 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
   const setSurround = useStore((s) => s.setSurround);
   const viewMode = useStore((s) => s.viewMode);
   const setViewMode = useStore((s) => s.setViewMode);
+  const panes = useStore((s) => s.panes);
+  const setPanes = useStore((s) => s.setPanes);
   const agentControl = useStore((s) => s.settings.agentControl);
   const setSettings = useStore((s) => s.setSettings);
   const inputRef = reactExports.useRef(null);
@@ -14344,152 +14673,206 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
     setUrl(applied);
     setDraft(applied);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "toolbar", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", title: "Back", onClick: () => window.obsrv.back(), children: "‹" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", title: "Forward", onClick: () => window.obsrv.forward(), children: "›" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", title: "Reload", onClick: () => window.obsrv.reload(), children: "⟳" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("form", { className: "url-form", onSubmit: submit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "input",
-      {
-        ref: inputRef,
-        value: draft,
-        readOnly,
-        spellCheck: false,
-        placeholder: "Enter a URL, or drop a PNG",
-        onChange: (e) => setDraft(e.target.value),
-        onKeyDown: (e) => {
-          if (e.key === "Escape") setDraft(barText);
+  const presetLabel = SCREEN_PRESETS.find((p) => p.id === presetId)?.label ?? "Custom";
+  const profileLabel = PANEL_PROFILES.find((p) => p.id === profileId)?.label ?? profileId;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "chrome", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "chrome-row chrome-browse", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          className: "icon-button",
+          type: "button",
+          title: "Back",
+          "aria-label": "Back",
+          onClick: () => window.obsrv.back(),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "back" })
         }
-      }
-    ) }),
-    mode === "image" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        className: "close-image",
-        type: "button",
-        title: "Back to the live page",
-        "aria-label": "Back to the live page",
-        onClick: () => setMode("url"),
-        children: "✕"
-      }
-    ),
-    loading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "muted", children: "loading…" }),
-    error && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "badge-error", title: error.description, children: error.code }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "select",
-      {
-        className: "preset-select",
-        value: presetId,
-        onChange: (e) => setPreset(e.target.value),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("optgroup", { label: "Laptops", children: SCREEN_PRESETS.filter((p) => p.group === "laptop").map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id)) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("optgroup", { label: "Desktops", children: SCREEN_PRESETS.filter((p) => p.group === "desktop").map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id)) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("optgroup", { label: "Mobile", children: SCREEN_PRESETS.filter((p) => p.group === "mobile").map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id)) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: CUSTOM_PRESET_ID, children: "Custom" })
-        ]
-      }
-    ),
-    viewport.clamped && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "warn", children: [
-      "clamped to ",
-      viewport.width,
-      "×",
-      viewport.height
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "view-control", role: "group", "aria-label": "Target view", children: VIEWS.map((v) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        type: "button",
-        className: v.id === "fit" ? "view-fit" : "view-1x",
-        title: v.title,
-        "aria-pressed": viewMode === v.id,
-        onClick: () => setViewMode(v.id),
-        children: v.label
-      },
-      v.id
-    )) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "select",
-      {
-        className: "profile-select",
-        value: profileId,
-        onChange: (e) => setProfile(e.target.value),
-        children: PANEL_PROFILES.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id))
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "pixel-exact", children: [
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
+        "button",
         {
-          type: "checkbox",
-          checked: pixelExact,
-          onChange: (e) => setPixelExact(e.target.checked)
+          className: "icon-button",
+          type: "button",
+          title: "Forward",
+          "aria-label": "Forward",
+          onClick: () => window.obsrv.forward(),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "forward" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          className: "icon-button",
+          type: "button",
+          title: "Reload",
+          "aria-label": "Reload",
+          onClick: () => window.obsrv.reload(),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "reload" })
         }
       ),
-      "Pixel-exact"
+      /* @__PURE__ */ jsxRuntimeExports.jsx("form", { className: "url-form", onSubmit: submit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          ref: inputRef,
+          value: draft,
+          readOnly,
+          spellCheck: false,
+          placeholder: "Enter a URL, or drop a PNG",
+          onChange: (e) => setDraft(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Escape") setDraft(barText);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "status-cluster", children: [
+        mode === "image" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            className: "icon-button close-image",
+            type: "button",
+            title: "Back to the live page",
+            "aria-label": "Back to the live page",
+            onClick: () => setMode("url"),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "close" })
+          }
+        ),
+        loading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "muted", children: "loading…" }),
+        error && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "badge-error", title: error.description, children: error.code }),
+        viewport.clamped && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "warn", children: [
+          "clamped to ",
+          viewport.width,
+          "×",
+          viewport.height
+        ] }),
+        update?.status === "available" && update.latest !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            className: "update-button",
+            type: "button",
+            title: `Obsrv ${update.latest} is available — opens the download page`,
+            onClick: () => void window.obsrv.openRelease(),
+            children: [
+              "v",
+              update.latest,
+              " ↓"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(OverflowMenu, { children: (close) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "menu-row pixel-exact", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: pixelExact,
+              onChange: (e) => setPixelExact(e.target.checked)
+            }
+          ),
+          "Pixel-exact"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            className: "menu-row toggle-panel",
+            type: "button",
+            "aria-pressed": drawer === "panel",
+            onClick: () => {
+              onTogglePanel();
+              close();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "sliders" }),
+              "Panel controls"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            className: "menu-row toggle-settings",
+            type: "button",
+            "aria-pressed": drawer === "settings",
+            onClick: () => {
+              onToggleSettings();
+              close();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "gear" }),
+              "Settings"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "menu-sep" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "menu-row agent-toggle", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "checkbox", checked: agentControl, onChange: toggleAgent }),
+          "Agent control"
+        ] })
+      ] }) })
     ] }),
-    update?.status === "available" && update.latest !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        className: "update-button",
-        type: "button",
-        title: `Obsrv ${update.latest} is available — opens the download page`,
-        onClick: () => void window.obsrv.openRelease(),
-        children: [
-          "v",
-          update.latest,
-          " ↓"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "surround-control", role: "group", "aria-label": "Pane surround", children: SURROUNDS.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        type: "button",
-        title: s.label,
-        "aria-label": s.label,
-        "aria-pressed": surround === s.id,
-        onClick: () => setSurround(s.id),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "surround-swatch", style: { background: s.swatch } })
-      },
-      s.id
-    )) }),
-    agentActive && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "agent-activity", children: "AGENT" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        className: "agent-toggle",
-        type: "button",
-        title: "Agent control — let a local agent drive this window",
-        "aria-label": "Agent control",
-        "aria-pressed": agentControl,
-        onClick: toggleAgent,
-        children: "Agent"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        className: "toggle-panel",
-        type: "button",
-        title: "Panel controls",
-        "aria-label": "Panel controls",
-        "aria-pressed": drawer === "panel",
-        onClick: onTogglePanel,
-        children: "▦"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        className: "toggle-settings",
-        type: "button",
-        title: "Settings",
-        "aria-label": "Settings",
-        "aria-pressed": drawer === "settings",
-        onClick: onToggleSettings,
-        children: "⚙"
-      }
-    )
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "chrome-row chrome-screen", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Select,
+        {
+          className: "preset-select",
+          value: presetId,
+          label: presetLabel,
+          ariaLabel: "Target screen",
+          onChange: setPreset,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("optgroup", { label: "Laptops", children: SCREEN_PRESETS.filter((p) => p.group === "laptop").map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id)) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("optgroup", { label: "Desktops", children: SCREEN_PRESETS.filter((p) => p.group === "desktop").map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id)) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("optgroup", { label: "Mobile", children: SCREEN_PRESETS.filter((p) => p.group === "mobile").map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id)) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: CUSTOM_PRESET_ID, children: "Custom" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Segmented,
+        {
+          className: "view-control",
+          ariaLabel: "Target view",
+          value: viewMode,
+          options: VIEWS.map((v) => ({ ...v, className: v.id === "fit" ? "view-fit" : "view-1x" })),
+          onChange: setViewMode
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Segmented,
+        {
+          className: "panes-control",
+          ariaLabel: "Panes",
+          value: panes,
+          options: PANES.map((p) => ({ ...p, className: `panes-${p.id}` })),
+          onChange: setPanes
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Select,
+        {
+          className: "profile-select",
+          value: profileId,
+          label: profileLabel,
+          ariaLabel: "Panel profile",
+          onChange: setProfile,
+          children: PANEL_PROFILES.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.id, children: p.label }, p.id))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "surround-control", role: "group", "aria-label": "Pane surround", children: SURROUNDS.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          title: s.label,
+          "aria-label": s.label,
+          "aria-pressed": surround === s.id,
+          onClick: () => setSurround(s.id),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "surround-swatch", style: { background: s.swatch } })
+        },
+        s.id
+      )) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "chrome-spacer" }),
+      agentControl && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `agent-activity${agentActive ? " active" : ""}`, children: "AGENT" })
+    ] })
   ] });
 }
 function App() {
@@ -14517,6 +14900,7 @@ function App() {
   const presetId = useStore((s) => s.presetId);
   const profileId = useStore((s) => s.profileId);
   const viewMode = useStore((s) => s.viewMode);
+  const panes = useStore((s) => s.panes);
   reactExports.useEffect(() => {
     window.obsrv.getHostInfo().then(setHost, (e) => console.warn("obsrv: getHostInfo failed", e));
     window.obsrv.getSettings().then(setSettings, (e) => console.warn("obsrv: getSettings failed", e));
@@ -14544,6 +14928,9 @@ function App() {
   reactExports.useEffect(() => {
     window.obsrv.setMode(mode);
   }, [mode]);
+  reactExports.useEffect(() => {
+    window.obsrv.setNativeVisible(panes === "both");
+  }, [panes]);
   reactExports.useEffect(() => {
     const el = targetPaneRef.current;
     if (!el) return;
@@ -14574,14 +14961,15 @@ function App() {
     };
   }, []);
   reactExports.useEffect(() => {
-    window.obsrv.reportUiState({ presetId, profileId, viewMode, mode, targetBounds, canvasBounds });
-  }, [presetId, profileId, viewMode, mode, targetBounds, canvasBounds]);
+    window.obsrv.reportUiState({ presetId, profileId, viewMode, panes, mode, targetBounds, canvasBounds });
+  }, [presetId, profileId, viewMode, panes, mode, targetBounds, canvasBounds]);
   reactExports.useEffect(() => {
     return window.obsrv.onAgentApply((patch) => {
       const s = useStore.getState();
       if (patch.presetId !== void 0) s.setPreset(patch.presetId);
       if (patch.profileId !== void 0) s.setProfile(patch.profileId);
       if (patch.viewMode !== void 0) s.setViewMode(patch.viewMode);
+      if (patch.panes !== void 0) s.setPanes(patch.panes);
       if (patch.pixelExact !== void 0) s.setPixelExact(patch.pixelExact);
       if (patch.panTo !== void 0) s.requestAgentPan(patch.panTo);
       if (patch.highlight !== void 0) s.showAgentHighlight(patch.highlight);
@@ -14647,15 +15035,15 @@ function App() {
     /* @__PURE__ */ jsxRuntimeExports.jsx(Toolbar, { drawer, onTogglePanel: toggle("panel"), onToggleSettings: toggle("settings") }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(DropZone, { onImage }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "body", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "panes", children: [
-        mode === "image" && image ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "panes", "data-panes": panes, children: [
+        panes === "both" && (mode === "image" && image ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           ImagePane,
           {
             src: image.objectUrl,
             width: image.natural.width,
             height: image.natural.height
           }
-        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(NativeSlot, {}),
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(NativeSlot, {})),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pane target-pane", ref: targetPaneRef, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pane-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TargetCanvas, { onFatal: setFatal, imageFrame }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TargetFooter, {})