@reekon-tools/boldr-utils 1.13.1 → 1.14.0

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -284,7 +284,7 @@ export const AnnotationCanvasInner = (props) => {
         const world = state.ctx.viewport.screenToWorld(screen);
         const placed = [...state.effectiveCanvas.placedMeasurements]
             .reverse()
-            .find((m) => hitPlacedMeasurement(m, world, state.viewport.zoom, state.tileScaleFactor, state.tileViewportScale));
+            .find((m) => hitPlacedMeasurement(m, world, state.viewport.zoom, state.tileScaleFactor, state.tileViewportScale, state.headerTileScaleFactor));
         if (placed)
             onMeasurementStampDoubleTap(placed);
     }, [onMeasurementStampDoubleTap, state]);
@@ -320,7 +320,7 @@ export const AnnotationCanvasInner = (props) => {
                 }, children: state.effectiveCanvas.placedMeasurements.map((placed) => {
                     // Square tile or wide group-header pill — one footprint source of
                     // truth shared with the hit-test (stampTileDims).
-                    const { width, height } = stampTileDims(placed, state.tileScaleFactor, state.tileViewportScale);
+                    const { width, height } = stampTileDims(placed, state.tileScaleFactor, state.tileViewportScale, state.headerTileScaleFactor);
                     const cx = (placed.anchor.x - state.viewport.pan.x) * state.viewport.zoom;
                     const cy = (placed.anchor.y - state.viewport.pan.y) * state.viewport.zoom;
                     const isSelected = selection?.ids.includes(placed.id) ?? false;

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

@@ -121,7 +121,11 @@ export const AnnotationCanvasInner = (props) => {
     const zoom = useSharedValue(state.viewport.zoom);
     const panX = useSharedValue(state.viewport.pan.x);
     const panY = useSharedValue(state.viewport.pan.y);
-    const pinchStartZoom = useSharedValue(state.viewport.zoom);
+    // Set by the viewport gestures' onChange, consumed by their onFinalize: the
+    // post-gesture sync to React state happens iff a gesture actually moved the
+    // viewport, and in onFinalize rather than onEnd because on Android the
+    // viewport gestures routinely exit through fail()/cancel() (see the pan).
+    const viewportDirty = useSharedValue(false);
     // Skia consumes this directly and re-renders the transform on the UI thread.
     const worldTransform = useDerivedValue(() => {
         'worklet';
@@ -748,8 +752,17 @@ export const AnnotationCanvasInner = (props) => {
             world: stateRef.current.ctx.viewport.screenToWorld(screen),
         });
         // Commit the final viewport to the JS snapshot once a gesture ends, so
-        // tools' screenToWorld/worldToScreen reflect the new pan/zoom.
+        // tools' screenToWorld/worldToScreen reflect the new pan/zoom. Skips the
+        // no-op commit: the pan and the pinch can finalize on the same lift, and
+        // the second sync would re-render (and re-settle any background layer)
+        // for values React already has.
         const syncViewport = (next) => {
+            const current = stateRef.current.ctx.viewport.state;
+            if (current.zoom === next.zoom &&
+                current.pan.x === next.pan.x &&
+                current.pan.y === next.pan.y) {
+                return;
+            }
             stateRef.current.setViewport(next);
         };
         const beginViewportGesture = () => {
@@ -862,7 +875,7 @@ export const AnnotationCanvasInner = (props) => {
                 return;
             const world = st.ctx.viewport.screenToWorld(screen);
             const zoomNow = st.ctx.viewport.state.zoom;
-            const hit = dragSelection.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor);
+            const hit = dragSelection.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor, st.ctx.headerTileScaleFactor);
             if (!hit || hit.kind !== 'measurement' || hit.id !== prevSelectedId) {
                 return;
             }
@@ -873,9 +886,17 @@ export const AnnotationCanvasInner = (props) => {
         // Viewport pan — runs on the UI thread (no runOnJS), mutating the shared
         // viewport directly. Mirrors viewport.ts `panBy`. Used for both the
         // two-finger pan (always available) and the one-finger Hand tool.
+        //
+        // averageTouches(true) is load-bearing on Android: PanGestureHandler
+        // defaults to tracking the LAST-LANDED pointer, not the centroid (iOS
+        // always averages). Running simultaneously with the pinch, a non-averaged
+        // two-finger pan translates the canvas by finger 2's whole travel — during
+        // a spread that is half the spread distance of sideways drift, which reads
+        // as "the zoom runs away from where I aimed".
         const buildViewportPan = (minP, maxP) => Gesture.Pan()
             .minPointers(minP)
             .maxPointers(maxP)
+            .averageTouches(true)
             .onBegin(() => {
             'worklet';
             runOnJS(beginViewportGesture)();
@@ -884,47 +905,91 @@ export const AnnotationCanvasInner = (props) => {
             'worklet';
             panX.value -= e.changeX / zoom.value;
             panY.value -= e.changeY / zoom.value;
+            viewportDirty.value = true;
         })
-            .onEnd(() => {
-            'worklet';
-            runOnJS(syncViewport)({
-                zoom: zoom.value,
-                pan: { x: panX.value, y: panY.value },
-            });
-        })
+            // onFinalize, not onEnd: on Android this pan normally exits through
+            // fail() — a (2,2) pan the moment the first finger lifts (pointer
+            // count below minPointers), and a pure two-finger translate whose
+            // pinch never activated at the final lift. onEnd never runs on those
+            // paths, and the movement would never reach React state: hit-tests go
+            // stale, a background layer never re-rasterizes for the new view, and
+            // the next JS-side viewport write snaps the canvas back.
             .onFinalize(() => {
             'worklet';
+            if (viewportDirty.value) {
+                viewportDirty.value = false;
+                runOnJS(syncViewport)({
+                    zoom: zoom.value,
+                    pan: { x: panX.value, y: panY.value },
+                });
+            }
             runOnJS(endViewportGesture)();
         });
-        const viewportPan = buildViewportPan(2, 2);
+        // With the Hand tool the viewport pan spans one AND two fingers as a
+        // single gesture. Two separate gestures (a one-finger pan racing the
+        // two-finger pair) cannot express a staggered pinch: finger 1 panning
+        // past the slop resolves the Race before finger 2 lands, the pinch is
+        // cancelled with it, and finger 2's touch then kills the one-finger pan
+        // too (pointer count over maxPointers cancels an active Android pan) —
+        // a dead canvas until every finger lifts. One pan spanning both counts
+        // stays active across 1→2→1, and its translation is continuous across
+        // pointer transitions (the handler rebases its origin on every
+        // POINTER_DOWN/UP).
+        const viewportPan = buildViewportPan(panViewport ? 1 : 2, 2);
         // Pinch-to-zoom about the focal point — UI thread. Mirrors viewport.ts
         // `zoomAt`: keep the world point under the focal screen point fixed.
+        //
+        // Driven by the per-event ratio (`scaleChange`), not by cumulative
+        // `e.scale` against a zoom snapshotted in onBegin. On Android onBegin
+        // fires at the FIRST finger down — before a pinch provably exists — so a
+        // snapshot there can go stale against anything else driving the shared
+        // values (the glide animation, the simultaneous pan). The native
+        // cumulative scale also freezes rather than rebases across pointer-set
+        // changes (2→1→2, a third finger) and sticks at 0 for the rest of the
+        // gesture if the fingers ever collapse to a single point, so only ratios
+        // between consecutive events are trustworthy. The live focal needs no
+        // snapshot either: a focal that merely moves leaves this update a no-op
+        // (translation is the pan's job), which is also what makes Android's
+        // wrong-focal BEGAN event (it reports the first finger's touch-down
+        // position, not a centroid) harmless here.
         const pinch = Gesture.Pinch()
             .onBegin(() => {
             'worklet';
-            pinchStartZoom.value = zoom.value;
             runOnJS(beginViewportGesture)();
         })
-            .onUpdate((e) => {
+            .onChange((e) => {
             'worklet';
-            const clamped = Math.min(50, Math.max(0.05, pinchStartZoom.value * e.scale));
+            // Drop corrupt ratios instead of applying them: a native span
+            // collapse yields scale 0, and the ratio of the frame after that is
+            // 0/0. Applying either would slam the zoom to a bound (or NaN it).
+            const ratio = e.scaleChange;
+            if (!Number.isFinite(ratio) || ratio <= 0)
+                return;
+            const next = Math.min(50, Math.max(0.05, zoom.value * ratio));
+            if (next === zoom.value)
+                return; // clamped at a bound, or ratio 1
             // World point currently under the focal screen point (using the live
             // zoom/pan), then re-anchor pan so it stays put at the new zoom.
             const focalWorldX = e.focalX / zoom.value + panX.value;
             const focalWorldY = e.focalY / zoom.value + panY.value;
-            panX.value = focalWorldX - e.focalX / clamped;
-            panY.value = focalWorldY - e.focalY / clamped;
-            zoom.value = clamped;
-        })
-            .onEnd(() => {
-            'worklet';
-            runOnJS(syncViewport)({
-                zoom: zoom.value,
-                pan: { x: panX.value, y: panY.value },
-            });
+            panX.value = focalWorldX - e.focalX / next;
+            panY.value = focalWorldY - e.focalY / next;
+            zoom.value = next;
+            viewportDirty.value = true;
         })
+            // onFinalize, not onEnd, for the same reason as the pan: an Android
+            // pinch that never activated fails at the final lift, and a cancelled
+            // gesture never reaches onEnd — the dirty check keeps the no-gesture
+            // paths from committing anything.
             .onFinalize(() => {
             'worklet';
+            if (viewportDirty.value) {
+                viewportDirty.value = false;
+                runOnJS(syncViewport)({
+                    zoom: zoom.value,
+                    pan: { x: panX.value, y: panY.value },
+                });
+            }
             runOnJS(endViewportGesture)();
         });
         // Freehand drawing (pen/marker/highlighter) — one finger, UI thread.
@@ -1128,7 +1193,7 @@ export const AnnotationCanvasInner = (props) => {
                 // so a selected tile isn't stuck until you deselect it).
                 const selId = st.ctx.selection?.ids[0];
                 if (selId &&
-                    !cfg.isSelectedTileGrab?.(st.ctx.document, selId, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor)) {
+                    !cfg.isSelectedTileGrab?.(st.ctx.document, selId, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor, st.ctx.headerTileScaleFactor)) {
                     const handle = cfg.hitTestHandle?.(st.ctx.document, selId, world, zoomNow);
                     if (handle) {
                         const m = st.ctx.document.placedMeasurements.find((x) => x.id === selId);
@@ -1228,7 +1293,7 @@ export const AnnotationCanvasInner = (props) => {
                         return;
                     }
                 }
-                const hit = cfg.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor);
+                const hit = cfg.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor, st.ctx.headerTileScaleFactor);
                 if (!hit) {
                     // Backgrounds can cover the whole document, so they only get the
                     // drag once every annotation element misses, and only when ALREADY
@@ -1248,7 +1313,7 @@ export const AnnotationCanvasInner = (props) => {
                 st.ctx.setSelection({ ids: [hit.id] });
                 // Grabbing a line annotation's tile slides it; otherwise group-move.
                 const grab = hit.kind === 'measurement'
-                    ? cfg.classifyMeasurementGrab?.(st.ctx.document, hit.id, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor)
+                    ? cfg.classifyMeasurementGrab?.(st.ctx.document, hit.id, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor, st.ctx.headerTileScaleFactor)
                     : 'move';
                 if (grab === 'slide') {
                     const m = st.ctx.document.placedMeasurements.find((x) => x.id === hit.id);
@@ -1425,7 +1490,8 @@ export const AnnotationCanvasInner = (props) => {
         // One finger, by active tool:
         //  - freehand (pen/marker/highlighter) → draw on the UI thread
         //  - shape tools (line/rect/…) → rubber-band on the UI thread
-        //  - Hand → pan the viewport on the UI thread (live, no JS round-trip)
+        //  - Hand → no separate gesture: viewportPan above already spans one
+        //    finger (min 1), so panning and pinching stay one uncancelled stream
         //  - select → drag the hit element on the UI thread
         //  - everything else → dispatch pointer events on the JS thread
         const oneFinger = freehand
@@ -1433,18 +1499,18 @@ export const AnnotationCanvasInner = (props) => {
             : shapeDraw
                 ? buildShapeDrawPan(shapeDraw)
                 : panViewport
-                    ? buildViewportPan(1, 1)
+                    ? null
                     : dragSelection
                         ? buildSelectDragPan(dragSelection)
                         : toolPan;
         // Long-press only joins the race when the active tool acts on it, so it
         // never pre-empts a one-finger drag/draw on tools that ignore holds.
-        return Gesture.Race(tap, ...(longPressEnabled ? [longPress] : []), Gesture.Simultaneous(viewportPan, pinch), oneFinger);
+        return Gesture.Race(tap, ...(longPressEnabled ? [longPress] : []), Gesture.Simultaneous(viewportPan, pinch), ...(oneFinger ? [oneFinger] : []));
     }, [
         zoom,
         panX,
         panY,
-        pinchStartZoom,
+        viewportDirty,
         livePoints,
         handoffStrokes,
         removeHandoffStrokes,
@@ -1555,7 +1621,7 @@ export const AnnotationCanvasInner = (props) => {
     // non-fullscreen canvas (e.g. a diagram strip) escape into surrounding UI.
     _jsxs(GestureHandlerRootView, { style: [{ width, height, overflow: 'hidden' }, style], children: [backgroundLayers.map((layer) => (_jsx(BackgroundSkImageLoader, { layer: layer, resolveUrl: resolveImageUrl, onImage: onBackgroundSkImage }, layer.id))), _jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, children: AnnotationCanvasSkia(skiaProps) }) }), renderMeasurementStamp && (_jsx(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, children: state.effectiveCanvas.placedMeasurements.map((placed) => (_jsx(MeasurementStampOverlayItem, { placed: placed, measurement: placed.measurementId
                         ? (state.measurementsById.get(placed.measurementId) ?? null)
-                        : (resolveStampMeasurement?.(placed) ?? null), selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, renderMeasurementStamp: renderMeasurementStamp, tileScaleFactor: state.tileScaleFactor, tileViewportScale: state.tileViewportScale, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: onMeasurementStampRemove
+                        : (resolveStampMeasurement?.(placed) ?? null), selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, renderMeasurementStamp: renderMeasurementStamp, tileScaleFactor: state.tileScaleFactor, headerTileScaleFactor: state.headerTileScaleFactor, tileViewportScale: state.tileViewportScale, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: onMeasurementStampRemove
                         ? () => {
                             const defaultRemove = () => {
                                 const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
@@ -1571,10 +1637,10 @@ export const AnnotationCanvasInner = (props) => {
                     wrapContent: loupeWrap,
                 }) }))] }));
 };
-const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, tileScaleFactor, tileViewportScale, onStampPress, onStampLongPress, onRemove, }) => {
+const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, tileScaleFactor, headerTileScaleFactor, tileViewportScale, onStampPress, onStampLongPress, onRemove, }) => {
     // Square tile or wide group-header pill — one footprint source of truth
     // shared with the hit-test (stampTileDims).
-    const { width, height } = stampTileDims(placed, tileScaleFactor, tileViewportScale);
+    const { width, height } = stampTileDims(placed, tileScaleFactor, tileViewportScale, headerTileScaleFactor ?? tileScaleFactor);
     const halfW = width / 2;
     const halfH = height / 2;
     // Remove-"X" touch target, sized as a fraction of the tile and corner-pinned

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

@@ -24,6 +24,7 @@ export interface ToolContext {
     viewport: ViewportApi;
     tileViewportScale: number;
     tileScaleFactor: number;
+    headerTileScaleFactor: number;
     preview(patch: AnnotationDocumentPatch): void;
     commit(patch: AnnotationDocumentPatch): void;
     setSelection(selection: Selection | null): void;
@@ -54,12 +55,12 @@ export interface ShapeDrawConfig {
 }
 export type DragElementKind = 'stroke' | 'shape' | 'measurement' | 'background';
 export interface DragSelectionConfig {
-    hitTest(doc: AnnotationCanvasState, world: Vec2, zoom: number, viewportTileScale?: number, tileScaleFactor?: number): {
+    hitTest(doc: AnnotationCanvasState, world: Vec2, zoom: number, viewportTileScale?: number, tileScaleFactor?: number, headerTileScaleFactor?: number): {
         id: AnnotationElementId;
         kind: DragElementKind;
     } | null;
     buildTranslatePatch(doc: AnnotationCanvasState, id: AnnotationElementId, kind: DragElementKind, delta: Vec2): AnnotationDocumentPatch | null;
-    classifyMeasurementGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number, tileScaleFactor?: number): 'slide' | 'move';
+    classifyMeasurementGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number, tileScaleFactor?: number, headerTileScaleFactor?: number): 'slide' | 'move';
     buildSlidePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2, zoom: number): AnnotationDocumentPatch | null;
     hitTestHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): 'a' | 'b' | null;
     buildEndpointPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, handle: 'a' | 'b', delta: Vec2): AnnotationDocumentPatch | null;
@@ -77,7 +78,7 @@ export interface DragSelectionConfig {
         fixed: Vec2;
     } | null;
     buildShapeCornerPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, corner: RectCorner, delta: Vec2): AnnotationDocumentPatch | null;
-    isSelectedTileGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number, tileScaleFactor?: number): boolean;
+    isSelectedTileGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number, tileScaleFactor?: number, headerTileScaleFactor?: number): boolean;
     hitTestBackground?(doc: AnnotationCanvasState, world: Vec2): {
         id: AnnotationElementId;
     } | null;

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

@@ -36,7 +36,7 @@ export declare const rectCornerPoint: (rect: {
     b: Vec2;
 }, corner: RectCorner) => Vec2;
 export declare const oppositeRectCorner: (corner: RectCorner) => RectCorner;
-export declare const hitPlacedMeasurement: (m: PlacedMeasurementRef, p: Vec2, zoom?: number, tileScaleFactor?: number, viewportScale?: number) => boolean;
+export declare const hitPlacedMeasurement: (m: PlacedMeasurementRef, p: Vec2, zoom?: number, tileScaleFactor?: number, viewportScale?: number, headerTileScaleFactor?: number) => boolean;
 export interface RemoveMeasurementResult {
     ops: AnnotationPatchOp[];
     keepSelection: boolean;

package/dist/annotation/canvas/measurementGeometry.js

@@ -110,14 +110,15 @@ const segmentDistSq = (p, a, b) => {
 // 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) => {
+export const hitPlacedMeasurement = (m, p, zoom = 1, tileScaleFactor = 1, viewportScale = 1, headerTileScaleFactor = tileScaleFactor) => {
     // 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);
+    // stamps share the square footprint; group-header chips are a wide pill
+    // sized by their OWN document-wide knob, `headerTileScaleFactor` — see
+    // stampTileDims in stampLayout).
+    const dims = stampTileDims(m, tileScaleFactor, viewportScale, headerTileScaleFactor);
     const halfW = (dims.width / 2 + STAMP_HIT_PADDING) / zoom;
     const halfH = (dims.height / 2 + STAMP_HIT_PADDING) / zoom;
     const dx = Math.abs(p.x - m.anchor.x);

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

@@ -19,6 +19,7 @@ export declare const DEFAULT_TILE_SCALE = 1;
 export declare const TILE_SCALE_MIN = 0.4;
 export declare const TILE_SCALE_MAX = 2;
 export declare const resolveTileScaleFactor: (canvas: Pick<AnnotationCanvasState, "tileScaleFactor" | "tileScaleFactorMobile">, platform: TileScalePlatform) => number;
+export declare const resolveHeaderTileScaleFactor: (canvas: Pick<AnnotationCanvasState, "tileScaleFactor" | "tileScaleFactorMobile" | "headerTileScaleFactor" | "headerTileScaleFactorMobile">, platform: TileScalePlatform) => number;
 export declare const clampTileScale: (v: number) => number;
 export declare const tileDocSizeForFactor: (factor: number, zoom: number) => number;
 export declare const tileScaleFromDocSize: (docSize: number, zoom: number) => number;
@@ -28,4 +29,4 @@ export interface StampTileDims {
     width: number;
     height: number;
 }
-export declare const stampTileDims: (m: Pick<PlacedMeasurementRef, "scale" | "isGroupHeader" | "collapsed">, tileScaleFactor?: number, viewportScale?: number) => StampTileDims;
+export declare const stampTileDims: (m: Pick<PlacedMeasurementRef, "scale" | "isGroupHeader" | "collapsed">, tileScaleFactor?: number, viewportScale?: number, headerTileScaleFactor?: number) => StampTileDims;

package/dist/annotation/canvas/stampLayout.js

@@ -80,6 +80,18 @@ export const TILE_SCALE_MAX = 2;
 export const resolveTileScaleFactor = (canvas, platform) => (platform === 'mobile'
     ? (canvas.tileScaleFactorMobile ?? canvas.tileScaleFactor)
     : canvas.tileScaleFactor) ?? DEFAULT_TILE_SCALE;
+// Resolve the document-wide HEADER-scale knob for a platform — the group/form
+// header counterpart of resolveTileScaleFactor (Asana 1217570500895543).
+// Same platform fallback (mobile → web), then one more step: a document with
+// no header knob at all falls back to the MEASUREMENT factor, the pre-split
+// behavior where one knob drove every tile — so existing documents render
+// identically until a user first moves the header slider. The ONE read path
+// for the header fields — renderers, hit-testing, and the slider UIs must all
+// resolve through here so they agree.
+export const resolveHeaderTileScaleFactor = (canvas, platform) => (platform === 'mobile'
+    ? (canvas.headerTileScaleFactorMobile ?? canvas.headerTileScaleFactor)
+    : canvas.headerTileScaleFactor) ??
+    resolveTileScaleFactor(canvas, platform);
 // Clamp a tile-scale-factor candidate to the supported range. The single guard
 // 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;
@@ -136,11 +148,15 @@ export const isUnassociatedStamp = (m) => !m.isGroupHeader && !m.measurementId &
 // 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;
+// `headerTileScaleFactor` is the header chips' own document-wide knob
+// (resolveHeaderTileScaleFactor); it defaults to `tileScaleFactor` so callers
+// that predate the header/measurement split keep their one-knob behavior.
+export const stampTileDims = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1, headerTileScaleFactor = tileScaleFactor) => {
     if (!m.isGroupHeader) {
+        const k = (m.scale ?? 1) * tileScaleFactor * viewportScale;
         return { width: STAMP_TILE_SIZE * k, height: STAMP_TILE_SIZE * k };
     }
+    const k = (m.scale ?? 1) * headerTileScaleFactor * viewportScale;
     const base = groupHeaderBaseDims(m.collapsed);
     return { width: base.width * k, height: base.height * k };
 };

package/dist/annotation/canvas/tools/panTool.js

@@ -51,7 +51,7 @@ export const createPanTool = (options = {}) => ({
         const measurements = ctx.document.placedMeasurements;
         for (let i = measurements.length - 1; i >= 0; i--) {
             const m = measurements[i];
-            if (hitPlacedMeasurement(m, event.world, zoom, ctx.tileScaleFactor, ctx.tileViewportScale)) {
+            if (hitPlacedMeasurement(m, event.world, zoom, ctx.tileScaleFactor, ctx.tileViewportScale, ctx.headerTileScaleFactor)) {
                 ctx.setSelection({ ids: [m.id] });
                 return;
             }

package/dist/annotation/canvas/tools/selectTool.js

@@ -66,11 +66,15 @@ const segmentDistanceSq = (px, py, ax, ay, bx, by) => {
 const findHit = (doc, world, zoom, viewportTileScale = 1, 
 // Platform-resolved tile-scale knob (ctx.tileScaleFactor). Defaults to the
 // doc's web/legacy field so un-threaded callers keep the pre-split behavior.
-tileScaleFactor = doc.tileScaleFactor) => {
+tileScaleFactor = doc.tileScaleFactor, 
+// Platform-resolved header-scale knob (ctx.headerTileScaleFactor). Defaults
+// to the doc's web header field, falling back to the measurement knob the
+// way resolveHeaderTileScaleFactor does.
+headerTileScaleFactor = doc.headerTileScaleFactor ?? tileScaleFactor) => {
     // Hit-test in z-order (top first): measurements > shapes > strokes.
     for (let i = doc.placedMeasurements.length - 1; i >= 0; i--) {
         const m = doc.placedMeasurements[i];
-        if (hitPlacedMeasurement(m, world, zoom, tileScaleFactor, viewportTileScale)) {
+        if (hitPlacedMeasurement(m, world, zoom, tileScaleFactor, viewportTileScale, headerTileScaleFactor)) {
             return { id: m.id, kind: 'measurement' };
         }
     }
@@ -179,11 +183,11 @@ const translatePatch = (elementKind, id, doc, delta) => {
 // is selected; without this, a handle sitting under the tile (a rectangle
 // tile at the rect center, a line tile slid onto an endpoint) hijacks the grab
 // and the tile becomes unmovable until deselected.
-const isOnMeasurementTile = (doc, id, world, zoom, viewportTileScale = 1, tileScaleFactor = doc.tileScaleFactor) => {
+const isOnMeasurementTile = (doc, id, world, zoom, viewportTileScale = 1, tileScaleFactor = doc.tileScaleFactor, headerTileScaleFactor = doc.headerTileScaleFactor ?? tileScaleFactor) => {
     const m = doc.placedMeasurements.find((x) => x.id === id);
     if (!m)
         return false;
-    const dims = stampTileDims(m, tileScaleFactor, viewportTileScale);
+    const dims = stampTileDims(m, tileScaleFactor, viewportTileScale, headerTileScaleFactor);
     const halfW = (dims.width / 2 + HIT_PADDING) / zoom;
     const halfH = (dims.height / 2 + HIT_PADDING) / zoom;
     return (Math.abs(world.x - m.anchor.x) <= halfW &&
@@ -193,14 +197,14 @@ const isOnMeasurementTile = (doc, id, world, zoom, viewportTileScale = 1, tileSc
 // via DragSelectionConfig AND the web pointer handlers — one source of truth) ---
 // Grabbing the tile of a line annotation slides it along the line; everything
 // else (bare stamps, grabs on the line body) is a group move.
-const classifyGrab = (doc, id, world, zoom, viewportTileScale = 1, tileScaleFactor = doc.tileScaleFactor) => {
+const classifyGrab = (doc, id, world, zoom, viewportTileScale = 1, tileScaleFactor = doc.tileScaleFactor, headerTileScaleFactor = doc.headerTileScaleFactor ?? tileScaleFactor) => {
     const m = doc.placedMeasurements.find((x) => x.id === id);
     if (!m)
         return 'move';
     // Same footprint the tile is drawn at (wide pill for group headers; folds in
     // the document-wide tile scale + viewport scale so slide-grab matches the
     // draw).
-    const dims = stampTileDims(m, tileScaleFactor, viewportTileScale);
+    const dims = stampTileDims(m, tileScaleFactor, viewportTileScale, headerTileScaleFactor);
     const halfW = (dims.width / 2 + HIT_PADDING) / zoom;
     const halfH = (dims.height / 2 + HIT_PADDING) / zoom;
     const onTile = Math.abs(world.x - m.anchor.x) <= halfW &&
@@ -600,7 +604,7 @@ export const createSelectTool = (options = {}) => ({
     // reusing the same hit-test and translate logic the pointer handlers below
     // use for web — one source of truth.
     dragSelection: {
-        hitTest: (doc, world, zoom, viewportTileScale, tileScaleFactor) => findHit(doc, world, zoom, viewportTileScale, tileScaleFactor),
+        hitTest: (doc, world, zoom, viewportTileScale, tileScaleFactor, headerTileScaleFactor) => findHit(doc, world, zoom, viewportTileScale, tileScaleFactor, headerTileScaleFactor),
         buildTranslatePatch: (doc, id, kind, delta) => {
             const op = translatePatch(kind, id, doc, delta);
             return op ? { ops: [op] } : null;
@@ -639,7 +643,7 @@ export const createSelectTool = (options = {}) => ({
         // tile stays draggable (otherwise it can only be moved after deselecting).
         const selId = ctx.selection?.ids[0];
         if (selId &&
-            !isOnMeasurementTile(ctx.document, selId, world, zoom, ctx.tileViewportScale, ctx.tileScaleFactor)) {
+            !isOnMeasurementTile(ctx.document, selId, world, zoom, ctx.tileViewportScale, ctx.tileScaleFactor, ctx.headerTileScaleFactor)) {
             const handle = findHandleHit(ctx.document, selId, world, zoom);
             if (handle) {
                 ctx.setSelection({ ids: [selId] });
@@ -708,7 +712,7 @@ export const createSelectTool = (options = {}) => ({
                 };
             }
         }
-        const hit = findHit(ctx.document, world, zoom, ctx.tileViewportScale, ctx.tileScaleFactor);
+        const hit = findHit(ctx.document, world, zoom, ctx.tileViewportScale, ctx.tileScaleFactor, ctx.headerTileScaleFactor);
         if (!hit) {
             // Background layers only get a look-in when every annotation element
             // misses — they can cover the whole document, so elements above always
@@ -753,7 +757,7 @@ export const createSelectTool = (options = {}) => ({
                 : null;
         ctx.setSelection({ ids: [hit.id] });
         const mode = hit.kind === 'measurement' &&
-            classifyGrab(ctx.document, hit.id, world, zoom, ctx.tileViewportScale, ctx.tileScaleFactor) === 'slide'
+            classifyGrab(ctx.document, hit.id, world, zoom, ctx.tileViewportScale, ctx.tileScaleFactor, ctx.headerTileScaleFactor) === 'slide'
             ? 'slide'
             : 'move';
         return {

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

@@ -24,6 +24,7 @@ export interface AnnotationCanvasHandle {
         durationMs?: number;
     }): void;
     getTileScaleFactor(): number;
+    getHeaderTileScaleFactor(): number;
     getTileDocSize(factor: number): number;
     ensureMeasurementVisible(id: AnnotationElementId): void;
     placeMeasurementAtCenter(ref: MeasurementRef): void;
@@ -84,6 +85,7 @@ export interface AnnotationCanvasStateApi {
     ctx: ToolContext;
     tileViewportScale: number;
     tileScaleFactor: number;
+    headerTileScaleFactor: number;
     penDrawingStroke: AnnotationStroke | null;
     customPreviewState: ToolState;
     dispatchPointerDown(event: CanvasPointerEvent): void;

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { applyPatch, invertPatch, DEFAULT_LAYER_ID, } from '../../types/annotation.js';
-import { resolveTileScaleFactor, stampTileDims, STAMP_TILE_SIZE, tileDocSizeForFactor, tileScaleFromDocSize, } from './stampLayout.js';
+import { resolveHeaderTileScaleFactor, resolveTileScaleFactor, stampTileDims, STAMP_TILE_SIZE, tileDocSizeForFactor, tileScaleFromDocSize, } from './stampLayout.js';
 import { createViewportApi, fitRectToScreen, panBy, zoomAt, DEFAULT_VIEWPORT, } from './viewport.js';
 import { backgroundLayerDocRect, backgroundLayersOf, backgroundLayersUnionRect, } from './backgroundLayers.js';
 import { buildRemoveMeasurementOps, recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.js';
@@ -157,13 +157,28 @@ export const useAnnotationCanvasState = (props) => {
     // commit writes tileScaleFactorMobile and takes over for good.
     const tileScalePlatformResolved = tileScalePlatform ?? 'web';
     let tileScaleFactor = resolveTileScaleFactor(effectiveCanvas, tileScalePlatformResolved);
+    // Group/form header chips carry their own document-wide knob (Asana
+    // 1217570500895543), resolved the same way. With no header knob set it
+    // equals the measurement factor (resolveHeaderTileScaleFactor's fallback) —
+    // the pre-split one-knob behavior.
+    let headerTileScaleFactor = resolveHeaderTileScaleFactor(effectiveCanvas, tileScalePlatformResolved);
     if (tileScalePlatformResolved === 'mobile' &&
         effectiveCanvas.tileScaleFactorMobile == null &&
         effectiveCanvas.tileDocSize != null &&
         effectiveCanvas.tileDocSize > 0 &&
         width > 0 &&
         height > 0) {
-        tileScaleFactor = tileScaleFromDocSize(effectiveCanvas.tileDocSize, baseFitZoom);
+        const calibrated = tileScaleFromDocSize(effectiveCanvas.tileDocSize, baseFitZoom);
+        // Scale the header factor by the same calibration ratio so its relation
+        // to the measurement factor survives the override: a doc with no header
+        // knob keeps headers exactly at the calibrated measurement factor, and a
+        // doc whose web user set a header knob keeps the same header-to-tile
+        // proportion the web user saw.
+        headerTileScaleFactor =
+            tileScaleFactor > 0
+                ? headerTileScaleFactor * (calibrated / tileScaleFactor)
+                : calibrated;
+        tileScaleFactor = calibrated;
     }
     const ctx = useMemo(() => ({
         document: canvas,
@@ -171,6 +186,7 @@ export const useAnnotationCanvasState = (props) => {
         viewport: viewportApi,
         tileViewportScale,
         tileScaleFactor,
+        headerTileScaleFactor,
         preview(patch) {
             setPreviewPatch(patch);
         },
@@ -222,6 +238,7 @@ export const useAnnotationCanvasState = (props) => {
         viewportApi,
         tileViewportScale,
         tileScaleFactor,
+        headerTileScaleFactor,
         tileScalePlatformResolved,
         baseFitZoom,
         onCommit,
@@ -425,6 +442,9 @@ export const useAnnotationCanvasState = (props) => {
             getTileScaleFactor() {
                 return ctxRef.current.tileScaleFactor;
             },
+            getHeaderTileScaleFactor() {
+                return ctxRef.current.headerTileScaleFactor;
+            },
             getTileDocSize(factor) {
                 // Tiles are doc-constant, so the doc size a factor yields derives
                 // from the content-fit reference, not the current zoom.
@@ -437,7 +457,7 @@ export const useAnnotationCanvasState = (props) => {
                     return;
                 // 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 dims = stampTileDims(m, c.tileScaleFactor, c.tileViewportScale, c.headerTileScaleFactor);
                 const halfW = dims.width / 2;
                 const halfH = dims.height / 2;
                 const s = c.viewport.worldToScreen(m.anchor);
@@ -734,6 +754,7 @@ export const useAnnotationCanvasState = (props) => {
         ctx,
         tileViewportScale,
         tileScaleFactor,
+        headerTileScaleFactor,
         penDrawingStroke,
         customPreviewState: toolState,
         dispatchPointerDown,

package/dist/calculator/schema.d.ts

@@ -194,6 +194,13 @@ export interface CalculatorDefinition {
     diagramFileId?: string | null;
     /** Public calculators are readable by everyone; rules/query key. */
     isPublic: boolean;
+    sharedUserIds?: string[];
+    /**
+     * Orgs this calculator is shared with. Written only by the backend
+     * shareCalculatorWithOrg / unshareCalculatorWithOrg callables, which also
+     * maintain the organizations/{orgId}/sharedCalculators pointer docs clients
+     * use for discovery (rules can't authorize an array-contains query here).
+     */
     sharedOrgIds?: string[];
     createdBy?: {
         userId: string;

package/dist/exports.d.ts

@@ -29,7 +29,7 @@ export type { GestureConfig, PanTrigger, AnnotationCanvasInnerProps, } from './a
 export type { CanvasPointerEvent, RequestTextInput, ShapeDrawConfig, Tool, ToolContext, ToolState, } from './annotation/canvas/Tool.js';
 export type { MeasurementRef, PickMeasurement, } from './annotation/canvas/measurementPicker.js';
 export type { MeasurementStampRenderArgs, RenderMeasurementStamp, } from './annotation/canvas/measurementStampOverlay.js';
-export { STAMP_TILE_SIZE, GROUP_HEADER_TILE_WIDTH, GROUP_HEADER_TILE_HEIGHT, GROUP_HEADER_COLLAPSED_WIDTH, GROUP_HEADER_COLLAPSED_HEIGHT, GROUP_HEADER_DESIGN, groupHeaderBaseDims, DEFAULT_TILE_SCALE, TILE_SCALE_MIN, TILE_SCALE_MAX, clampTileScale, resolveTileScaleFactor, tileDocSizeForFactor, tileScaleFromDocSize, stampTileSize, stampTileDims, isUnassociatedStamp, type StampTileDims, } from './annotation/canvas/stampLayout.js';
+export { STAMP_TILE_SIZE, GROUP_HEADER_TILE_WIDTH, GROUP_HEADER_TILE_HEIGHT, GROUP_HEADER_COLLAPSED_WIDTH, GROUP_HEADER_COLLAPSED_HEIGHT, GROUP_HEADER_DESIGN, groupHeaderBaseDims, DEFAULT_TILE_SCALE, TILE_SCALE_MIN, TILE_SCALE_MAX, clampTileScale, resolveTileScaleFactor, resolveHeaderTileScaleFactor, tileDocSizeForFactor, tileScaleFromDocSize, stampTileSize, stampTileDims, isUnassociatedStamp, type StampTileDims, } from './annotation/canvas/stampLayout.js';
 export { GROUP_HEADER_STYLE, describeGroupHeader, groupHeaderSignature, type GroupHeaderBadge, type GroupHeaderDescriptor, } from './annotation/canvas/groupHeaderLayout.js';
 export { createViewportApi, fitToScreen, fitRectToScreen, imageDocRect, panBy, zoomAt, DEFAULT_VIEWPORT, type ViewportApi, type ViewportState, } from './annotation/canvas/viewport.js';
 export { LEGACY_BACKGROUND_LAYER_ID, BACKGROUND_PLACEMENT_GAP_RATIO, backgroundLayersOf, backgroundLayerDocRect, backgroundLayersUnionRect, placeNewBackgroundLayer, } from './annotation/canvas/backgroundLayers.js';

package/dist/exports.js

@@ -34,7 +34,7 @@ export { useAnnotationMutations, } from './annotation/data/hooks/useAnnotationMu
 export { useAnnotationCanvasDoc, } from './annotation/data/hooks/useAnnotationCanvasDoc.js';
 export { hydrateCanvasState } from './annotation/data/canvasPersistence.js';
 export { InMemoryAnnotationProvider } from './annotation/data/InMemoryAnnotationProvider.js';
-export { STAMP_TILE_SIZE, GROUP_HEADER_TILE_WIDTH, GROUP_HEADER_TILE_HEIGHT, GROUP_HEADER_COLLAPSED_WIDTH, GROUP_HEADER_COLLAPSED_HEIGHT, GROUP_HEADER_DESIGN, groupHeaderBaseDims, DEFAULT_TILE_SCALE, TILE_SCALE_MIN, TILE_SCALE_MAX, clampTileScale, resolveTileScaleFactor, tileDocSizeForFactor, tileScaleFromDocSize, stampTileSize, stampTileDims, isUnassociatedStamp, } from './annotation/canvas/stampLayout.js';
+export { STAMP_TILE_SIZE, GROUP_HEADER_TILE_WIDTH, GROUP_HEADER_TILE_HEIGHT, GROUP_HEADER_COLLAPSED_WIDTH, GROUP_HEADER_COLLAPSED_HEIGHT, GROUP_HEADER_DESIGN, groupHeaderBaseDims, DEFAULT_TILE_SCALE, TILE_SCALE_MIN, TILE_SCALE_MAX, clampTileScale, resolveTileScaleFactor, resolveHeaderTileScaleFactor, tileDocSizeForFactor, tileScaleFromDocSize, stampTileSize, stampTileDims, isUnassociatedStamp, } from './annotation/canvas/stampLayout.js';
 export { GROUP_HEADER_STYLE, describeGroupHeader, groupHeaderSignature, } from './annotation/canvas/groupHeaderLayout.js';
 export { createViewportApi, fitToScreen, fitRectToScreen, imageDocRect, panBy, zoomAt, DEFAULT_VIEWPORT, } from './annotation/canvas/viewport.js';
 export { LEGACY_BACKGROUND_LAYER_ID, BACKGROUND_PLACEMENT_GAP_RATIO, backgroundLayersOf, backgroundLayerDocRect, backgroundLayersUnionRect, placeNewBackgroundLayer, } from './annotation/canvas/backgroundLayers.js';

package/dist/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './colors.js';
+export * from './semantic.js';
+export * from './preset.js';