getobsrv 0.9.0 → 0.10.0

package/README.md

@@ -73,11 +73,16 @@ the advanced sliders. Enter your own monitor's diagonal in Settings once so the
 pane renders at true physical size. Drop a 2x/3x PNG or JPG export to check a design
 before it's built.
 
-The target pane opens at 1:1, which usually overflows the pane: pan with a
-middle-button drag, Option+drag or Option+wheel, or switch the toolbar's
-`1:1 / Fit` control to a fit-to-pane overview (smoothly minified, so not
-pixel-exact — the footer says so) and click anywhere in it to jump back to 1:1
-at that spot.
+The target pane opens in **Fit**, a fit-to-pane view of the whole render. Fit
+never enlarges past 1:1, so a render that already fits is shown at true size;
+a larger one is smoothly minified to fit, which is not pixel-exact — the footer
+says so, and names the magnification. Fit is fully interactive: clicks, drags,
+the wheel and the keyboard all reach the page.
+
+Switch the toolbar's `1:1 / Fit` control to **1:1** for true magnification,
+which usually overflows the pane: pan with a middle-button drag, Option+drag or
+Option+wheel. From fit, **Option+click** jumps straight to 1:1 with the clicked
+spot centred (plain clicks belong to the page).
 
 The `Both / Target` control beside it hides the native pane so the target render
 takes the whole window — useful for a small mobile preset that would otherwise

package/out/main/index.js

@@ -792,7 +792,7 @@ function registerIpc(ctx) {
     settings = s;
     if (s.agentControl !== wasEnabled) applyAgentControl(s.agentControl);
   });
-  const uiState = { presetId: "1080p-24", profileId: "reference", viewMode: "1:1", panes: "both", mode: "url" };
+  const uiState = { presetId: "1080p-24", profileId: "reference", viewMode: "fit", panes: "both", mode: "url" };
   let targetBounds = null;
   let canvasBounds = null;
   const MAX_PENDING_APPLIES = 32;

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

@@ -12782,7 +12782,12 @@ 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,
@@ -14025,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;
@@ -14099,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;
@@ -14148,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,
@@ -14189,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) {
@@ -14220,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,
@@ -14232,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);
           }

package/out/renderer/assets/{index-CasW01OP.css → index-CZUlXhEb.css}

@@ -551,6 +551,27 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
    `left: 0` holds while a wide canvas is scrolled horizontally. The fill is a
    neutral grey: only the rule under it is red, so the one chromatic thing on
    screen is the error itself. */
+/* At 1:1 the render usually overflows and the pane is a scroll box, so it
+   starts at the top-left and you pan around it. When it is *smaller* than the
+   pane — a small preset, fit mode, or solo target on a wide window — hugging
+   the corner leaves it stranded against the chrome with dead field to the
+   right. Centre it instead.
+
+   `safe` is what lets one rule serve both cases: it falls back to start
+   alignment the moment the content overflows, so the top-left of an oversized
+   render stays reachable by scrolling. Plain `center` would push it out of
+   reach. The image pane already centres this way. */
+.target-pane .pane-body {
+  display: flex;
+  flex-direction: column;
+  align-items: safe center;
+  justify-content: safe center;
+}
+/* The stall notice spans the pane, not the canvas: it is sticky at `left: 0`
+   and must stay pane-width while a wide canvas scrolls under it, so it opts
+   out of the centring its sibling wants. */
+.target-pane .pane-body > .stall { align-self: stretch; }
+
 /* position: relative anchors the agent highlight to the canvas origin. */
 .target-wrap { min-width: min-content; position: relative; }
 
@@ -598,8 +619,10 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
    and being (0,1,1) and later in the file they beat `.segmented button` and
    split the two groups apart. Nothing about 1:1/Fit is control-specific. */
 
-/* The overview invites the jump-to-1:1 click; the pan chords (middle drag,
-   Option+drag) show the grab affordances. Cursors only — no overlay may sit
+/* Option is what a view gesture needs, so Option is what the cursor answers:
+   the jump-to-1:1 zoom in fit, the grab affordances for the pan chords
+   (middle drag, Option+drag) at 1:1. Unmodified, both views are interactive
+   and the page's own cursors show through. Cursors only — no overlay may sit
    on the pixels under inspection. */
 .target-canvas.fit { cursor: zoom-in; }
 .target-canvas.pan-ready { cursor: grab; }

package/out/renderer/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:" />
     <title>Obsrv</title>
-    <script type="module" crossorigin src="./assets/index-CpeTWcl6.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-CasW01OP.css">
+    <script type="module" crossorigin src="./assets/index-CQVE5hF3.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CZUlXhEb.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "getobsrv",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "See your site the way 1x screens see it",
   "main": "./out/main/index.js",
   "bin": {