@reekon-tools/boldr-utils 1.8.4 → 1.9.0

package/dist/annotation/canvas/AnnotationCanvasInner.native.js

@@ -628,8 +628,9 @@ export const AnnotationCanvasInner = (props) => {
     // effect so an in-flight gesture's shared values are never clobbered by a
     // late-flushing setViewport from a previous gesture.
     const activeViewportGestures = useRef(0);
-    // >0 while an animated viewport transition (fitContentToRect) is in
-    // flight. Guards the JS→UI sync effect the same way the gesture counter
+    // >0 while an animated viewport transition (a gliding handle move —
+    // zoomToFit, fitContentToRect, ensureMeasurementVisible) is in flight.
+    // Guards the JS→UI sync effect the same way the gesture counter
     // does: mid-glide re-renders must not snap the shared values back to the
     // (still-old) JS snapshot.
     const viewportAnimations = useRef(0);
@@ -646,7 +647,7 @@ export const AnnotationCanvasInner = (props) => {
         panX.value = state.viewport.pan.x;
         panY.value = state.viewport.pan.y;
     }, [state.viewport, zoom, panX, panY]);
-    // Animated viewport transitions (fitContentToRect with `animated`): a JS
+    // Animated viewport transitions (the handle's gliding moves): a JS
     // rAF driver eases the same shared values gestures write — DIRECT writes,
     // three per frame, no React involvement until the single end-of-motion
     // commit. Direct `.value =` writes are the proven repaint channel for the
@@ -670,8 +671,22 @@ export const AnnotationCanvasInner = (props) => {
     animateViewportImplRef.current = (target, durationMs) => {
         cancelViewportDrive();
         const from = { zoom: zoom.value, panX: panX.value, panY: panY.value };
+        // Interpolate the world-space view CENTER plus geometric zoom, deriving
+        // pan per frame. Pan is the world point at the screen origin (screen =
+        // (world − pan)·zoom), so lerping it while zoom sweeps makes the content
+        // veer off-line mid-glide; a straight center path with geometric zoom is
+        // the standard camera move. Pan-only glides (zoomRatio 1) reduce to a
+        // plain world-space lerp.
+        const fromCx = from.panX + width / (2 * from.zoom);
+        const fromCy = from.panY + height / (2 * from.zoom);
+        const toCx = target.pan.x + width / (2 * target.zoom);
+        const toCy = target.pan.y + height / (2 * target.zoom);
+        const zoomRatio = target.zoom / from.zoom;
         const start = Date.now();
-        const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - (2 - 2 * t) ** 3 / 2;
+        // Smootherstep: velocity AND acceleration are zero at both ends, so the
+        // glide has no kick at launch and no jolt on landing — easeInOutCubic's
+        // abrupt acceleration endpoints read as rigid/mechanical.
+        const ease = (t) => t * t * t * (t * (t * 6 - 15) + 10);
         viewportAnimations.current = 1;
         const step = () => {
             if (activeViewportGestures.current > 0) {
@@ -680,10 +695,11 @@ export const AnnotationCanvasInner = (props) => {
                 return;
             }
             const t = Math.min(1, (Date.now() - start) / durationMs);
-            const eased = easeInOutCubic(t);
-            zoom.value = from.zoom + (target.zoom - from.zoom) * eased;
-            panX.value = from.panX + (target.pan.x - from.panX) * eased;
-            panY.value = from.panY + (target.pan.y - from.panY) * eased;
+            const eased = ease(t);
+            const z = from.zoom * zoomRatio ** eased;
+            zoom.value = z;
+            panX.value = fromCx + (toCx - fromCx) * eased - width / (2 * z);
+            panY.value = fromCy + (toCy - fromCy) * eased - height / (2 * z);
             if (t < 1) {
                 viewportDriveRef.current = requestAnimationFrame(step);
             }
@@ -1529,11 +1545,20 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
     const anchorX = placed.anchor.x;
     const anchorY = placed.anchor.y;
     // doc → screen each frame, on the UI thread. Position is a translate
-    // transform (cheap, no layout) so the pin stays glued to its anchor. While
+    // transform (cheap, no layout) so the tile stays glued to its anchor. While
     // dragging, the world-space drag offset is folded in; while sliding, the
     // position is mapped onto the line. `dragging`/`sliding` are captured props,
     // so the moment they flip false (on commit) the worklet drops the live offset
     // in the same render the new anchor arrives — no flicker.
+    //
+    // Size: the LAID-OUT box is the tile's screen size at `zoomSnapshot` (the
+    // JS viewport this render was built from). Tiles scale with zoom, so while
+    // a pinch/glide has the live zoom ahead of that snapshot the worklet
+    // bridges the gap with a scale transform (about the centered anchor);
+    // when the gesture ends and the JS snapshot syncs, the item re-renders at
+    // the final size and the scale settles back to exactly 1 — the same
+    // captured-prop handoff the drag offsets use, so there is no jump.
+    const zoomBase = zoomSnapshot > 0 ? zoomSnapshot : 1;
     const animatedStyle = useAnimatedStyle(() => {
         'worklet';
         let worldX = anchorX;
@@ -1581,7 +1606,13 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
         const cx = (worldX - panX.value) * zoom.value;
         const cy = (worldY - panY.value) * zoom.value;
         return {
-            transform: [{ translateX: cx - halfW }, { translateY: cy - halfH }],
+            transform: [
+                { translateX: cx - halfW },
+                { translateY: cy - halfH },
+                // Scales about the box center, which the translate just pinned to
+                // the anchor — so the tile grows/shrinks in place.
+                { scale: zoom.value / zoomBase },
+            ],
         };
     });
     return (_jsxs(Animated.View, { pointerEvents: "box-none", style: [

package/dist/annotation/canvas/measurementGeometry.js

@@ -106,17 +106,17 @@ const segmentDistSq = (p, a, b) => {
     const dy = p.y - (a.y + t * aby);
     return dx * dx + dy * dy;
 };
-// Whether a world-space point hits a placed measurement: the (screen-constant)
-// stamp tile around the anchor, the line body of a line annotation, or the
+// Whether a world-space point hits a placed measurement: the stamp tile
+// around the anchor, the line body of a line annotation, or the
 // border ring of a rectangle annotation (interiors stay transparent to hits so
 // elements inside remain reachable).
 export const hitPlacedMeasurement = (m, p, zoom = 1, tileScaleFactor = 1, viewportScale = 1) => {
-    // The stamp renders as a constant *screen*-size box centered on the
-    // anchor, so its doc-space footprint shrinks as you zoom in. Convert the
-    // screen-space half-extents (+ padding) back to doc space via the zoom so
-    // the hit box always matches what's drawn (blank and populated stamps share
-    // the square footprint; group-header chips are a wide pill — see
-    // stampTileDims in stampLayout).
+    // stampTileDims yields the tile's CURRENT screen-space box (the
+    // zoom-relative multiplier arrives via `viewportScale`); converting the
+    // half-extents (+ padding) back to doc space via the zoom keeps the hit box
+    // matching what's drawn — a doc-constant footprint (blank and populated
+    // stamps share the square footprint; group-header chips are a wide pill —
+    // see stampTileDims in stampLayout).
     const dims = stampTileDims(m, tileScaleFactor, viewportScale);
     const halfW = (dims.width / 2 + STAMP_HIT_PADDING) / zoom;
     const halfH = (dims.height / 2 + STAMP_HIT_PADDING) / zoom;

package/dist/annotation/canvas/stampLayout.js

@@ -3,26 +3,31 @@
 // overlay — see measurementStampOverlay.ts) and the hit-test (selectTool,
 // measurementGeometry) can import it without dragging
 // @shopify/react-native-skia into the consumer's static import graph.
-// Constant SCREEN-space edge length of a placed measurement, rendered as a
-// square tile. The tile is a fixed-size pin: its on-screen size is this times
-// `placed.scale` and does NOT change with zoom (only its position tracks the
-// canvas). Also drives the select-tool hit box, which converts it back to doc
-// space via the zoom. Blank "+" input placeholders take the SAME footprint as
-// populated tiles: earlier builds gave them a compact 44px size, but then a
-// user who set the tile-scale slider against blank tiles saw their tiles
-// balloon once populated (Asana 1216233394800417).
+// Base edge length of a placed measurement, rendered as a square tile: the
+// tile's on-screen size at the document's content-fit zoom, times
+// `placed.scale`. Tiles scale WITH the zoom from there (the zoom-relative
+// `viewportScale` multiplier below — Asana 1216878199784924, matching the
+// Nutrient viewer), so a tile's DOC-space footprint is constant like any
+// other element on the drawing. Also drives the select-tool hit box, which
+// converts the same footprint back to doc space via the zoom. Blank "+"
+// input placeholders take the SAME footprint as populated tiles: earlier
+// builds gave them a compact 44px size, but then a user who set the
+// tile-scale slider against blank tiles saw their tiles balloon once
+// populated (Asana 1216233394800417).
 export const STAMP_TILE_SIZE = 96;
-// Screen-space footprint of a group-header chip (`isGroupHeader`) — a wide
-// pill rather than the square tile, same 3.75:1 ratio as the legacy Nutrient
-// header stamp (150×40). Like STAMP_TILE_SIZE it is a fixed-size pin scaled by
-// `placed.scale` × the document-wide tile-scale factor, never by zoom.
+// Base footprint of a group-header chip (`isGroupHeader`) — a wide pill
+// rather than the square tile, same 3.75:1 ratio as the legacy Nutrient
+// header stamp (150×40). Sized exactly like STAMP_TILE_SIZE: `placed.scale`
+// × the document-wide tile-scale factor, scaling with zoom from the
+// content-fit reference.
 export const GROUP_HEADER_TILE_WIDTH = 240;
 export const GROUP_HEADER_TILE_HEIGHT = 64;
 // Document-wide tile scale factor: one knob that shrinks/grows EVERY
 // measurement tile on the canvas at once, on top of each tile's own `scale`.
 // Lets a user pull tiles down on a dense drawing where lines crowd together,
-// or bump them up on a sparse one. Like `scale` it is purely a screen-space
-// multiplier — it does NOT change with zoom. Absent === DEFAULT_TILE_SCALE
+// or bump them up on a sparse one. Like `scale` it is a plain multiplier on
+// the tile footprint, orthogonal to the zoom-relative `viewportScale`.
+// Absent === DEFAULT_TILE_SCALE
 // (visually identical to documents written before the knob existed).
 // Web and mobile persist separate knobs (AnnotationCanvasState.tileScaleFactor
 // vs .tileScaleFactorMobile) — read them through resolveTileScaleFactor below.
@@ -44,41 +49,40 @@ export const resolveTileScaleFactor = (canvas, platform) => (platform === 'mobil
 // for the value before it lands in the document (slider input, restored docs).
 export const clampTileScale = (v) => v < TILE_SCALE_MIN ? TILE_SCALE_MIN : v > TILE_SCALE_MAX ? TILE_SCALE_MAX : v;
 // --- Cross-platform initial-size calibration ---------------------------------
-// The platform knobs are screen-space multipliers, so the same value covers a
-// very different share of the DRAWING on a phone than on a desktop pane. To
+// The platform knobs are fit-referenced multipliers, so the same value covers
+// a very different share of the DRAWING on a phone than on a desktop pane. To
 // hand mobile a sensible starting size, web persists the doc-space edge length
-// a scale-1 tile covered as the user saw it (`tileDocSize`, stamped on tile
-// placement and web slider commits); a mobile canvas with no own knob yet
-// inverts that at its content-fit zoom so its tiles cover the SAME area of the
-// image. Two inverses of one identity: screenSize = docSize × zoom.
-// Doc-space edge length a scale-1 tile covers at `zoom` under `factor` — the
-// web write side of the calibration. Non-positive zoom yields 0, which the
-// setTileDocSize op ignores.
+// a scale-1 tile covers (`tileDocSize`, stamped on tile placement and web
+// slider commits); a mobile canvas with no own knob yet inverts that at its
+// own content-fit zoom so its tiles cover the SAME area of the image. Two
+// inverses of one identity: fitScreenSize = docSize × fitZoom. Both sides pass
+// the content-fit reference zoom (tiles are doc-constant, so the CURRENT zoom
+// has no bearing on how much of the drawing a tile covers).
+// Doc-space edge length a scale-1 tile covers under `factor`, given the
+// canvas's content-fit reference `zoom` — the web write side of the
+// calibration. Non-positive zoom yields 0, which the setTileDocSize op
+// ignores.
 export const tileDocSizeForFactor = (factor, zoom) => zoom > 0 ? (STAMP_TILE_SIZE * factor) / zoom : 0;
-// Tile-scale factor that makes a scale-1 tile cover `docSize` doc units at
-// `zoom` — the mobile read side of the calibration. Deliberately NOT clamped
-// to the slider range: faithfully matching the web look can land below
-// TILE_SCALE_MIN on a phone, and rendering/hit-testing handle any positive
-// value. The clamp applies once the user drives the slider themselves.
+// Tile-scale factor that makes a scale-1 tile cover `docSize` doc units,
+// given the canvas's content-fit reference `zoom` — the mobile read side of
+// the calibration. Deliberately NOT clamped to the slider range: faithfully
+// matching the web look can land below TILE_SCALE_MIN on a phone, and
+// rendering/hit-testing handle any positive value. The clamp applies once the
+// user drives the slider themselves.
 export const tileScaleFromDocSize = (docSize, zoom) => (docSize * zoom) / STAMP_TILE_SIZE;
-// --- Tile sizing is independent of canvas size ------------------------------
-// A measurement tile's footprint is base × per-tile `scale` × the document-wide
-// `tileScaleFactor` (below) — and NOTHING tied to the canvas's pixel size, so
-// the same document shows the same tiles at any canvas/window size.
+// --- How the footprint composes ----------------------------------------------
+// A measurement tile's screen footprint is base × per-tile `scale` × the
+// document-wide `tileScaleFactor` × the zoom-relative `viewportScale`.
 //
-// Earlier builds multiplied the footprint by a per-canvas `viewportTileScale`
-// derived from how large the document rendered when fit to the canvas, to keep a
-// tile a constant fraction of the drawing across devices. But that made a tile's
-// size change whenever the canvas was resized (e.g. dragging a desktop pane) —
-// the same document read with different-sized tiles at different window sizes.
-// That auto-multiplier is retired in favor of the user-driven "Tile size"
-// slider (the document-wide `tileScaleFactor`), which is explicit, persisted,
-// and consistent everywhere. Mobile is unchanged — its old factor was already
-// pinned at 1, calibrated to a phone's width.
-//
-// `stampTileSize` keeps its `viewportScale` parameter (default 1) only so the
-// render overlay, hit-test, and tools that thread it stay call-compatible; it is
-// now always 1.
+// `viewportScale` is the canvas's CURRENT zoom over its content-fit reference
+// zoom (see tileViewportScale in useAnnotationCanvasState): 1 at the fit
+// view, growing/shrinking with pinch/wheel zoom so tiles track the drawing
+// like every other element (Asana 1216878199784924 — the Nutrient behavior).
+// Earlier builds pinned tiles to a constant screen size regardless of zoom;
+// users kept pinch-zooming to read a tile and it refused to get bigger.
+// (An even earlier per-canvas auto-multiplier — tile size derived from the
+// canvas's pixel size — was retired for the user-driven "Tile size" slider,
+// which remains: the slider and the zoom multiplier compose.)
 // A placed measurement is an unassociated input until a measurement reference
 // is attached (id or path) OR it is bound to a form column (`columnId`). Such
 // stamps render as the blank "+" placeholder (same footprint as a populated
@@ -86,15 +90,16 @@ export const tileScaleFromDocSize = (docSize, zoom) => (docSize * zoom) / STAMP_
 // NOT inputs — never treat them as blank "+" placeholders.
 export const isUnassociatedStamp = (m) => !m.isGroupHeader && !m.measurementId && !m.measurementPath && !m.columnId;
 // Screen-space edge length for a placed stamp: the base size scaled by the
-// per-stamp `scale` and the document-wide `tileScaleFactor`. Blank and
-// populated stamps share the footprint so a tile never resizes when it gains a
-// value. The ONE source of truth for tile footprint — render overlay,
-// hit-test, and slide-grab classification all call this so the drawn tile and
-// its touch box always agree. `tileScaleFactor` is the document-wide knob
-// (default 1), driven by the "Tile size" slider and already resolved for the
-// caller's platform via resolveTileScaleFactor above. `viewportScale` is
-// retained for call compatibility and is always 1 — the old per-canvas
-// multiplier was retired (see the note above). Independent of zoom.
+// per-stamp `scale`, the document-wide `tileScaleFactor`, and the
+// zoom-relative `viewportScale`. Blank and populated stamps share the
+// footprint so a tile never resizes when it gains a value. The ONE source of
+// truth for tile footprint — render overlay, hit-test, and slide-grab
+// classification all call this so the drawn tile and its touch box always
+// agree. `tileScaleFactor` is the document-wide knob (default 1), driven by
+// the "Tile size" slider and already resolved for the caller's platform via
+// resolveTileScaleFactor above. `viewportScale` is the current zoom over the
+// canvas's content-fit reference zoom (see the note above), so tiles scale
+// with the drawing as the user zooms.
 export const stampTileSize = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => STAMP_TILE_SIZE * (m.scale ?? 1) * tileScaleFactor * viewportScale;
 export const stampTileDims = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => {
     const k = (m.scale ?? 1) * tileScaleFactor * viewportScale;

package/dist/annotation/canvas/useAnnotationCanvasState.d.ts

@@ -14,7 +14,10 @@ export interface AnnotationCanvasHandle {
     redo(): void;
     canUndo(): boolean;
     canRedo(): boolean;
-    zoomToFit(): void;
+    zoomToFit(opts?: {
+        animated?: boolean;
+        durationMs?: number;
+    }): void;
     resetView(): void;
     fitContentToRect(rect: CanvasScreenRect, opts?: {
         animated?: boolean;

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -11,10 +11,11 @@ import { buildRemoveMeasurementOps, recomputeAnchor, rectCenter, DEFAULT_LINE_PO
 // too: authors routinely drop them AROUND the image (dimension labels sit
 // outside the object they measure), and a fit framed on the image alone opens
 // with those tiles off-screen — so the rect is widened to the union of the
-// base rect and every placed tile's doc geometry. Tiles are screen-constant
-// boxes centered on that geometry, so when the union extends past the base
-// rect their half-extent is reserved as screen-space padding; a canvas whose
-// tiles all sit inside the image keeps the exact image fit it had before.
+// base rect and every placed tile's doc geometry. Tiles are boxes centered on
+// that geometry (≈ base size on screen at the fit view), so when the union
+// extends past the base rect a half-tile of screen-space padding is reserved;
+// a canvas whose tiles all sit inside the image keeps the exact image fit it
+// had before.
 // Shared by the load-time auto-fit and the zoomToFit/resetView/
 // fitContentToRect handle methods so they stay in lockstep.
 const computeContentFitRect = (canvas, rect) => {
@@ -63,13 +64,30 @@ const computeContentFitRect = (canvas, rect) => {
     };
 };
 const computeContentFit = (canvas, width, height) => computeContentFitRect(canvas, { x: 0, y: 0, width, height });
+// Content-fit zoom of the DOCUMENT alone — the background image's rendered
+// rect when present, the document rect otherwise, deliberately ignoring
+// placed tiles — into the full canvas box. This is the stable reference zoom
+// for tile sizing (see tileViewportScale below): at this zoom a tile renders
+// at exactly its slider size. computeContentFitRect's tile-extended union
+// would make the reference move whenever a tile is dragged outside the image
+// (every tile on the canvas would resize); the document rect can't.
+const computeBaseFitZoom = (canvas, width, height) => {
+    if (!(width > 0) || !(height > 0))
+        return 1;
+    const { viewport } = canvas;
+    const bg = viewport.backgroundImage;
+    const baseRect = bg
+        ? imageDocRect(bg.widthPx, bg.heightPx, viewport.width, viewport.height, viewport.backgroundFit ?? 'contain')
+        : { x: 0, y: 0, width: viewport.width, height: viewport.height };
+    return fitRectToScreen(baseRect, width, height).zoom;
+};
 // Default leader length (doc units) for a placed measurement when no explicit
 // length is given. A generous fraction of the document width, clamped, so the
-// leader — and its draggable endcaps — stay clear of the fixed-size value tile
-// at typical full-fit zoom (Asana 1216212322376723: leaders were collapsing
-// under the tile). The tile is screen-constant while the line is doc-space, so
-// this can't guarantee clearance on very large drawings (the clamp caps the
-// length) or at extreme zoom-out — zoom in to grab the endcaps there.
+// leader — and its draggable endcaps — stay clear of the value tile at
+// typical full-fit zoom (Asana 1216212322376723: leaders were collapsing
+// under the tile). Tiles are doc-constant boxes like the line itself, so the
+// clearance holds at any zoom, but the clamp can still cap the length short
+// of it on very large drawings.
 const defaultLeaderLenDoc = (docWidth) => Math.min(800, Math.max(240, docWidth * 0.45));
 // Platform-agnostic state machine for the annotation canvas. Web and native
 // inners share this hook; each wraps it with platform-specific event
@@ -109,13 +127,16 @@ export const useAnnotationCanvasState = (props) => {
         didInitialFitRef.current = true;
         setViewport(computeContentFit(canvas, width, height));
     }, [canvas, width, height]);
-    // Tiles are sized independently of the canvas: their footprint is base ×
-    // per-tile scale × the document-wide `tileScaleFactor` ("Tile size" slider),
-    // never the canvas pixel size — so resizing the pane no longer rescales tiles.
-    // Retained as a (constant 1) value because the overlays (drawn size) and tools
-    // (hit box) thread it; keeping them in lockstep at 1 means both still agree.
-    // (See stampLayout.ts for why the old per-canvas multiplier was retired.)
-    const tileViewportScale = 1;
+    // Tiles scale WITH the zoom (Asana 1216878199784924 — match the Nutrient
+    // viewer): a tile renders at base × per-tile scale × `tileScaleFactor` at
+    // the document's content-fit zoom, and grows/shrinks proportionally as the
+    // user zooms — its DOC-space footprint is constant, like any other element
+    // on the drawing. `tileViewportScale` carries the zoom-relative multiplier
+    // through the existing plumbing: overlays multiply the drawn size by it and
+    // hit-tests divide the same footprint by the current zoom, so the drawn
+    // tile and its touch box agree by construction.
+    const baseFitZoom = computeBaseFitZoom(effectiveCanvas, width, height);
+    const tileViewportScale = baseFitZoom > 0 ? viewport.zoom / baseFitZoom : 1;
     // The platform's tile-scale knob, resolved once from the effective canvas so
     // tools (hit boxes) and overlays (drawn size) share one value. Uses the
     // effective (preview-applied) canvas for parity with what is on screen; the
@@ -133,7 +154,7 @@ export const useAnnotationCanvasState = (props) => {
         effectiveCanvas.tileDocSize > 0 &&
         width > 0 &&
         height > 0) {
-        tileScaleFactor = tileScaleFromDocSize(effectiveCanvas.tileDocSize, computeContentFit(effectiveCanvas, width, height).zoom);
+        tileScaleFactor = tileScaleFromDocSize(effectiveCanvas.tileDocSize, baseFitZoom);
     }
     const ctx = useMemo(() => ({
         document: canvas,
@@ -146,15 +167,17 @@ export const useAnnotationCanvasState = (props) => {
         },
         commit(patch) {
             // Placing a tile on WEB stamps the doc-space calibration: the area of
-            // the drawing a scale-1 tile covers at the zoom the user is looking
-            // at, right when they judged the size against the image. Mobile
-            // derives its initial factor from it (see tileScaleFactor above).
-            // Appended into the same patch so placement + calibration are one
-            // undo step.
+            // the drawing a scale-1 tile covers. Tiles are doc-constant boxes
+            // (base size at the content-fit zoom, scaling with zoom from there),
+            // so the calibration derives from the fit reference — the current
+            // zoom no longer changes how much of the drawing a tile covers.
+            // Mobile derives its initial factor from it (see tileScaleFactor
+            // above). Appended into the same patch so placement + calibration are
+            // one undo step.
             let effective = patch;
             if (tileScalePlatformResolved !== 'mobile' &&
                 patch.ops.some((o) => o.op === 'addMeasurement')) {
-                const docSize = tileDocSizeForFactor(tileScaleFactor, viewportApi.state.zoom);
+                const docSize = tileDocSizeForFactor(tileScaleFactor, baseFitZoom);
                 if (docSize > 0) {
                     effective = {
                         ops: [...patch.ops, { op: 'setTileDocSize', value: docSize }],
@@ -191,6 +214,7 @@ export const useAnnotationCanvasState = (props) => {
         tileViewportScale,
         tileScaleFactor,
         tileScalePlatformResolved,
+        baseFitZoom,
         onCommit,
         onSelectionChange,
         pickMeasurement,
@@ -200,6 +224,9 @@ export const useAnnotationCanvasState = (props) => {
     // would otherwise capture a stale ctx/viewport).
     const ctxRef = useRef(ctx);
     ctxRef.current = ctx;
+    // Ditto for the tile-sizing fit reference (getTileDocSize).
+    const baseFitZoomRef = useRef(baseFitZoom);
+    baseFitZoomRef.current = baseFitZoom;
     // Tool hand-over. When the active tool's identity changes — a real tool
     // switch OR the consumer rebuilding the tools array (e.g. a style change
     // recreates every factory) — give the outgoing instance a chance to wind
@@ -314,8 +341,8 @@ export const useAnnotationCanvasState = (props) => {
         // down-right in fixed screen-px steps from center until a slot with no
         // existing anchor is found. Occupancy is derived from the live placed
         // measurements (not a drop counter), so moving or deleting a tile frees
-        // its slot automatically. Screen space is the right frame — tiles are
-        // screen-constant boxes — and mirrors the Nutrient file-viewer's cascade.
+        // its slot automatically. Screen space is the right frame — the drop
+        // lands where the user is looking — and mirrors the Nutrient cascade.
         const cascadeCenterWorld = () => {
             const c = ctxRef.current;
             const CASCADE_STEP = 30;
@@ -356,21 +383,31 @@ export const useAnnotationCanvasState = (props) => {
             canRedo() {
                 return redoStackRef.current.length > 0;
             },
-            zoomToFit() {
-                setViewport(computeContentFit(canvas, width, height));
+            zoomToFit(opts) {
+                // The document is read through ctxRef, not the effect closure: this
+                // effect's deps deliberately exclude `canvas`, so the closed-over
+                // binding can predate tiles that landed or moved since — and the fit
+                // unions placed-tile geometry.
+                const target = computeContentFit(ctxRef.current.document, width, height);
+                if (opts?.animated && animateViewport) {
+                    animateViewport(target, opts.durationMs ?? 650);
+                }
+                else {
+                    setViewport(target);
+                }
             },
             resetView() {
                 // "Reset view" frames the whole document/image again — the same fit the
                 // canvas opens with — rather than snapping to a 1:1 top-left view, which
                 // for a high-res background is the very crop this is meant to escape.
-                setViewport(computeContentFit(canvas, width, height));
+                setViewport(computeContentFit(ctxRef.current.document, width, height));
             },
             fitContentToRect(rect, opts) {
                 if (!(rect.width > 0) || !(rect.height > 0))
                     return;
-                const target = computeContentFitRect(canvas, rect);
+                const target = computeContentFitRect(ctxRef.current.document, rect);
                 if (opts?.animated && animateViewport) {
-                    animateViewport(target, opts.durationMs ?? 300);
+                    animateViewport(target, opts.durationMs ?? 450);
                 }
                 else {
                     setViewport(target);
@@ -380,15 +417,17 @@ export const useAnnotationCanvasState = (props) => {
                 return ctxRef.current.tileScaleFactor;
             },
             getTileDocSize(factor) {
-                return tileDocSizeForFactor(factor, ctxRef.current.viewport.state.zoom);
+                // Tiles are doc-constant, so the doc size a factor yields derives
+                // from the content-fit reference, not the current zoom.
+                return tileDocSizeForFactor(factor, baseFitZoomRef.current);
             },
             ensureMeasurementVisible(id) {
                 const c = ctxRef.current;
                 const m = c.document.placedMeasurements.find((x) => x.id === id);
                 if (!m)
                     return;
-                // The tile is a screen-constant box centered on its anchor, so its
-                // half-extents are screen px regardless of zoom (stampTileDims).
+                // The tile's CURRENT on-screen half-extents: stampTileDims with the
+                // zoom-relative tileViewportScale folded in.
                 const dims = stampTileDims(m, c.tileScaleFactor, c.tileViewportScale);
                 const halfW = dims.width / 2;
                 const halfH = dims.height / 2;
@@ -399,13 +438,24 @@ export const useAnnotationCanvasState = (props) => {
                     s.y + halfH <= height) {
                     return;
                 }
-                setViewport((v) => ({
-                    zoom: v.zoom,
+                // Glide, don't snap: this fires mid-flow (a value just landed and the
+                // selection auto-advanced), where an instant recenter reads as the
+                // canvas hopping around. Same fallback as fitContentToRect when the
+                // renderer has no animation hook (web).
+                const zoomNow = c.viewport.state.zoom;
+                const target = {
+                    zoom: zoomNow,
                     pan: {
-                        x: m.anchor.x - width / (2 * v.zoom),
-                        y: m.anchor.y - height / (2 * v.zoom),
+                        x: m.anchor.x - width / (2 * zoomNow),
+                        y: m.anchor.y - height / (2 * zoomNow),
                     },
-                }));
+                };
+                if (animateViewport) {
+                    animateViewport(target, 450);
+                }
+                else {
+                    setViewport(target);
+                }
             },
             placeMeasurementAtCenter(ref) {
                 const c = ctxRef.current;

package/dist/calculator/evaluate.js

@@ -1,6 +1,7 @@
 import { create, all } from 'mathjs';
 import { ColumnType } from '../types/firestore.js';
 import { equationForField, findField } from './schema.js';
+import { fromCanonical, toCanonical } from './units.js';
 // Trig in calculator equations works in DEGREES: angle fields are stored in
 // degrees canonically, and construction authors write `H = W * tan(A)`
 // expecting A in degrees. mathjs has no `angle` config option (evaluateFormula
@@ -125,7 +126,20 @@ const evaluateEquationInContext = (equation, ctx) => {
                 }
                 return resolved;
             }
-            scope[variable] = resolved.value;
+            // Field values resolve canonically; a variable unit re-expresses the
+            // value in the author's chosen display unit before it enters the scope.
+            const unit = equation.variableUnits?.[variable];
+            try {
+                scope[variable] =
+                    unit != null ? fromCanonical(resolved.value, unit) : resolved.value;
+            }
+            catch (err) {
+                return {
+                    ok: false,
+                    reason: 'error',
+                    error: err instanceof Error ? err.message : String(err),
+                };
+            }
         }
         if (missing.length > 0) {
             const result = {
@@ -137,9 +151,29 @@ const evaluateEquationInContext = (equation, ctx) => {
             return result;
         }
         const evaluated = evaluateExpression(equation.expression, scope);
-        const result = evaluated.ok
-            ? { ok: true, value: evaluated.value }
-            : { ok: false, reason: 'error', error: evaluated.error };
+        let result;
+        if (!evaluated.ok) {
+            result = { ok: false, reason: 'error', error: evaluated.error };
+        }
+        else {
+            // A result unit means the expression produced a display-unit value;
+            // convert back so the returned value is canonical like everything else.
+            try {
+                result = {
+                    ok: true,
+                    value: equation.resultUnit != null
+                        ? toCanonical(evaluated.value, equation.resultUnit)
+                        : evaluated.value,
+                };
+            }
+            catch (err) {
+                result = {
+                    ok: false,
+                    reason: 'error',
+                    error: err instanceof Error ? err.message : String(err),
+                };
+            }
+        }
         ctx.cache.set(equation.id, result);
         return result;
     }