cursedbelt 5.95.0 → 5.96.0

package/dist/react/canvas-hud/index.d.ts

@@ -14,6 +14,6 @@ export type { CanvasZoomHintProps, HudButtonProps, HudZoomControlsProps } from '
 export { CanvasZoomHint, HudButton, HudZoomControls } from './HudControls.js';
 export type { CanvasWheelMode, CanvasWheelOptions } from './useCanvasWheel.js';
 export { readWheel, useCanvasWheel, useLevelOfDetail } from './useCanvasWheel.js';
-export type { CanvasBounds, CanvasPoint, CanvasSize, CanvasView, FitOptions, LevelOfDetail, LevelOfDetailThresholds, } from './viewport.js';
-export { centerView, clampScale, fitScale, fitView, LEVEL_OF_DETAIL, levelOfDetail, visibleBounds, wheelZoomFactor, zoomAt, } from './viewport.js';
+export type { CanvasBounds, CanvasPoint, CanvasSize, CanvasView, FitOptions, ImageZoomLimits, LevelOfDetail, LevelOfDetailThresholds, } from './viewport.js';
+export { centerView, clampImageView, clampScale, fitScale, fitView, IMAGE_FIT, IMAGE_ZOOM_STEPS, imageWheelFactor, imageZoomLabel, isImageZoomed, LEVEL_OF_DETAIL, levelOfDetail, panImageBy, stepImageScale, visibleBounds, wheelZoomFactor, zoomAt, zoomImageAt, } from './viewport.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/canvas-hud/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/canvas-hud/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClG,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxF,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAClG,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC9E,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAClF,YAAY,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,uBAAuB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,eAAe,EACf,aAAa,EACb,aAAa,EACb,eAAe,EACf,MAAM,GACP,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/canvas-hud/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClG,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxF,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAClG,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC9E,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAClF,YAAY,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACV,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,uBAAuB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,UAAU,EACV,cAAc,EACd,UAAU,EACV,QAAQ,EACR,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,eAAe,EACf,aAAa,EACb,UAAU,EACV,cAAc,EACd,aAAa,EACb,eAAe,EACf,MAAM,EACN,WAAW,GACZ,MAAM,eAAe,CAAC"}

package/dist/react/canvas-hud/index.js

@@ -6,5 +6,5 @@ export { CanvasSearchField } from './CanvasSearchField.js';
 export { CanvasToolbar, controlReleasesFocus, isTextControl } from './CanvasToolbar.js';
 export { CanvasZoomHint, HudButton, HudZoomControls } from './HudControls.js';
 export { readWheel, useCanvasWheel, useLevelOfDetail } from './useCanvasWheel.js';
-export { centerView, clampScale, fitScale, fitView, LEVEL_OF_DETAIL, levelOfDetail, visibleBounds, wheelZoomFactor, zoomAt, } from './viewport.js';
+export { centerView, clampImageView, clampScale, fitScale, fitView, IMAGE_FIT, IMAGE_ZOOM_STEPS, imageWheelFactor, imageZoomLabel, isImageZoomed, LEVEL_OF_DETAIL, levelOfDetail, panImageBy, stepImageScale, visibleBounds, wheelZoomFactor, zoomAt, zoomImageAt, } from './viewport.js';
 //# sourceMappingURL=index.js.map

package/dist/react/canvas-hud/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/canvas-hud/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElG,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEzE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExF,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE9E,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUlF,OAAO,EACL,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,eAAe,EACf,aAAa,EACb,aAAa,EACb,eAAe,EACf,MAAM,GACP,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/canvas-hud/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElG,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEzE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExF,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE9E,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAWlF,OAAO,EACL,UAAU,EACV,cAAc,EACd,UAAU,EACV,QAAQ,EACR,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,eAAe,EACf,aAAa,EACb,UAAU,EACV,cAAc,EACd,aAAa,EACb,eAAe,EACf,MAAM,EACN,WAAW,GACZ,MAAM,eAAe,CAAC"}

package/dist/react/canvas-hud/viewport.d.ts

@@ -65,4 +65,36 @@ export interface LevelOfDetailThresholds {
 export declare const LEVEL_OF_DETAIL: LevelOfDetailThresholds;
 /** CNV-5 — which density a canvas draws at this scale. */
 export declare function levelOfDetail(scale: number, thresholds?: LevelOfDetailThresholds): LevelOfDetail;
+/** How far a picture viewer zooms: `min` 1 never goes below the fit (photos); under 1 shows it smaller (family's wall-sized prints). */
+export interface ImageZoomLimits {
+    min: number;
+    max: number;
+}
+/** The fit: the picture whole and centered. */
+export declare const IMAGE_FIT: CanvasView;
+/** The stops the − and + buttons walk, inside a viewer's limits; a pinch or a wheel lands anywhere between. */
+export declare const IMAGE_ZOOM_STEPS: readonly number[];
+/**
+ * The view held inside what the scaled `picture` (its laid-out size at the fit) can show on `stage`:
+ * centered on an axis it does not fill, else panned no further than its edge — the picture never
+ * slides off and leaves a gap where it could have filled the stage.
+ */
+export declare function clampImageView(view: CanvasView, picture: CanvasSize, stage: CanvasSize, limits: ImageZoomLimits): CanvasView;
+/** Zoom to `scale` keeping `anchor` (screen pixels from the stage's center) over the same spot of the picture, then clamp. */
+export declare function zoomImageAt(view: CanvasView, scale: number, anchor: CanvasPoint, picture: CanvasSize, stage: CanvasSize, limits: ImageZoomLimits): CanvasView;
+/** Move the picture by a drag's or a scroll's screen delta, then clamp. */
+export declare function panImageBy(view: CanvasView, dx: number, dy: number, picture: CanvasSize, stage: CanvasSize, limits: ImageZoomLimits): CanvasView;
+/** The next button stop in `direction` from wherever a pinch left the scale, inside `limits`. */
+export declare function stepImageScale(scale: number, direction: 1 | -1, limits: ImageZoomLimits, steps?: readonly number[]): number;
+/**
+ * One wheel event's factor for a picture: a trackpad pinch (a ctrl-wheel stream of small deltas)
+ * tracks the fingers about 1:1, and a mouse notch (a delta of ~100) is capped at one comfortable
+ * step. Faster than {@link wheelZoomFactor}, which a canvas spends over a range of 0.02–4×; a
+ * picture's whole range is a few doublings.
+ */
+export declare function imageWheelFactor(deltaY: number): number;
+/** Is the view anything but the fit's scale? */
+export declare const isImageZoomed: (view: CanvasView) => boolean;
+/** The readout between the buttons: "Fit", "1.5×", "2×", "0.5×". */
+export declare function imageZoomLabel(scale: number): string;
 //# sourceMappingURL=viewport.d.ts.map

package/dist/react/canvas-hud/viewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../../../src/react/canvas-hud/viewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,gFAAgF;AAChF,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,UAAU;CAAG;AAEhE,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE1E;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,UAAU,CAQvF;AAED;gFACgF;AAChF,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED,MAAM,WAAW,UAAU;IACzB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;yDACyD;AACzD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,GAAE,UAAe,GAAG,MAAM,GAAG,IAAI,CAS1G;AAED,wFAAwF;AACxF,wBAAgB,OAAO,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,GAAE,UAAe,GAAG,UAAU,GAAG,IAAI,CAI/G;AAED,iGAAiG;AACjG,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,GAAG,UAAU,CAM9F;AAED,qFAAqF;AACrF,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,GAAG,YAAY,CAOlF;AAED,+BAA+B;AAC/B,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,uBAAuB;IACtC,uEAAuE;IACvE,GAAG,EAAE,MAAM,CAAC;IACZ,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,eAAe,EAAE,uBAAkD,CAAC;AAEjF,0DAA0D;AAC1D,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,GAAE,uBAAyC,GAAG,aAAa,CAIjH"}
+{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../../../src/react/canvas-hud/viewport.ts"],"names":[],"mappings":"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"}

package/dist/react/canvas-hud/viewport.js

@@ -74,4 +74,55 @@ export function levelOfDetail(scale, thresholds = LEVEL_OF_DETAIL) {
         return 'mid';
     return 'far';
 }
+/** The fit: the picture whole and centered. */
+export const IMAGE_FIT = { scale: 1, x: 0, y: 0 };
+/** The stops the − and + buttons walk, inside a viewer's limits; a pinch or a wheel lands anywhere between. */
+export const IMAGE_ZOOM_STEPS = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8];
+const finiteScale = (scale, limits) => clampScale(Number.isFinite(scale) ? scale : 1, limits.min, limits.max);
+/**
+ * The view held inside what the scaled `picture` (its laid-out size at the fit) can show on `stage`:
+ * centered on an axis it does not fill, else panned no further than its edge — the picture never
+ * slides off and leaves a gap where it could have filled the stage.
+ */
+export function clampImageView(view, picture, stage, limits) {
+    const scale = finiteScale(view.scale, limits);
+    const room = (content, box) => Math.max(0, (content * scale - box) / 2);
+    const rx = room(picture.width, stage.width);
+    const ry = room(picture.height, stage.height);
+    // `+ 0` turns a -0 into 0, so a clamped view compares equal to the fit.
+    return { scale, x: clampScale(view.x, -rx, rx) + 0, y: clampScale(view.y, -ry, ry) + 0 };
+}
+/** Zoom to `scale` keeping `anchor` (screen pixels from the stage's center) over the same spot of the picture, then clamp. */
+export function zoomImageAt(view, scale, anchor, picture, stage, limits) {
+    return clampImageView(zoomAt(view, finiteScale(scale, limits), anchor), picture, stage, limits);
+}
+/** Move the picture by a drag's or a scroll's screen delta, then clamp. */
+export function panImageBy(view, dx, dy, picture, stage, limits) {
+    return clampImageView({ ...view, x: view.x + dx, y: view.y + dy }, picture, stage, limits);
+}
+/** The next button stop in `direction` from wherever a pinch left the scale, inside `limits`. */
+export function stepImageScale(scale, direction, limits, steps = IMAGE_ZOOM_STEPS) {
+    const stops = [...new Set([limits.min, ...steps.filter((s) => s > limits.min && s < limits.max), limits.max])];
+    if (direction > 0)
+        return stops.find((s) => s > scale + 0.01) ?? limits.max;
+    return stops.reverse().find((s) => s < scale - 0.01) ?? limits.min;
+}
+/**
+ * One wheel event's factor for a picture: a trackpad pinch (a ctrl-wheel stream of small deltas)
+ * tracks the fingers about 1:1, and a mouse notch (a delta of ~100) is capped at one comfortable
+ * step. Faster than {@link wheelZoomFactor}, which a canvas spends over a range of 0.02–4×; a
+ * picture's whole range is a few doublings.
+ */
+export function imageWheelFactor(deltaY) {
+    return Math.exp(-clampScale(Number.isFinite(deltaY) ? deltaY : 0, -60, 60) / 120);
+}
+/** Is the view anything but the fit's scale? */
+export const isImageZoomed = (view) => Math.abs(view.scale - 1) > 0.001;
+/** The readout between the buttons: "Fit", "1.5×", "2×", "0.5×". */
+export function imageZoomLabel(scale) {
+    if (Math.abs(scale - 1) <= 0.001)
+        return 'Fit';
+    const digits = scale < 1 ? 2 : scale < 2 ? 1 : 0;
+    return `${Number(scale.toFixed(digits)).toString()}×`;
+}
 //# sourceMappingURL=viewport.js.map

package/dist/react/canvas-hud/viewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewport.js","sourceRoot":"","sources":["../../../src/react/canvas-hud/viewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAqBH,MAAM,UAAU,UAAU,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IAChE,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,MAAM,CAAC,IAAgB,EAAE,KAAa,EAAE,MAAmB;IACzE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAC1E,MAAM,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACnC,OAAO;QACL,KAAK;QACL,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,OAAO;QAC3C,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,OAAO;KAC5C,CAAC;AACJ,CAAC;AAED;gFACgF;AAChF,MAAM,UAAU,eAAe,CAAC,MAAc;IAC5C,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;AACpC,CAAC;AAeD;yDACyD;AACzD,MAAM,UAAU,QAAQ,CAAC,MAAkB,EAAE,QAAoB,EAAE,UAAsB,EAAE;IACzF,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC;IAChE,IAAI,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,QAAQ,CAAC,KAAK,IAAI,CAAC,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IACxG,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CACpB,CAAC,QAAQ,CAAC,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,EAC7C,CAAC,QAAQ,CAAC,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,CAChD,CAAC;IACF,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACzC,OAAO,UAAU,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC;AAED,wFAAwF;AACxF,MAAM,UAAU,OAAO,CAAC,MAAoB,EAAE,QAAoB,EAAE,UAAsB,EAAE;IAC1F,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IAClD,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAChC,OAAO,UAAU,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AAC1G,CAAC;AAED,iGAAiG;AACjG,MAAM,UAAU,UAAU,CAAC,KAAkB,EAAE,QAAoB,EAAE,KAAa;IAChF,OAAO;QACL,KAAK;QACL,CAAC,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK;QACvC,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK;KACzC,CAAC;AACJ,CAAC;AAED,qFAAqF;AACrF,MAAM,UAAU,aAAa,CAAC,IAAgB,EAAE,QAAoB;IAClE,OAAO;QACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK;QACvB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK;QACvB,KAAK,EAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;QAClC,MAAM,EAAE,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK;KACrC,CAAC;AACJ,CAAC;AAYD,MAAM,CAAC,MAAM,eAAe,GAA4B,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AAEjF,0DAA0D;AAC1D,MAAM,UAAU,aAAa,CAAC,KAAa,EAAE,aAAsC,eAAe;IAChG,IAAI,KAAK,IAAI,UAAU,CAAC,KAAK;QAAE,OAAO,OAAO,CAAC;IAC9C,IAAI,KAAK,IAAI,UAAU,CAAC,GAAG;QAAE,OAAO,KAAK,CAAC;IAC1C,OAAO,KAAK,CAAC;AACf,CAAC"}
+{"version":3,"file":"viewport.js","sourceRoot":"","sources":["../../../src/react/canvas-hud/viewport.ts"],"names":[],"mappings":"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"}

package/dist/react/components/Popover.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type FloatingSide } from '../lib/floatingSide.js';
 export { FloatingContainer } from '../lib/floatingContainer.js';
 export { type UseOutsidePressOptions, useOutsidePress } from '../hooks/useOutsidePress.js';
 /**
@@ -28,7 +29,12 @@ export interface PopoverProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     align?: 'start' | 'center' | 'end';
-    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The side to open on when the panel fits there. When it does not, the panel opens on the
+     * opposite side, else beside the anchor, else on the roomier of the two — see
+     * `floatingSideFor`. Default `bottom`.
+     */
+    side?: FloatingSide;
     sideOffset?: number;
     /** Width of the popover panel. Default: auto (sized to content). */
     width?: string | number;

package/dist/react/components/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/react/components/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAgB/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,KAAK,sBAAsB,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE3F;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,YAAY;IAC3B,uFAAuF;IACvF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACtC;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,KAAe,EACf,IAAe,EACf,UAAc,EACd,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAgB,EAChB,KAAa,EACb,MAAa,EACb,SAAgB,EAChB,KAAK,EACL,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,YAAY,+BAiGd;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAE1D"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/react/components/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAC;AAK1F,OAAO,EAAE,KAAK,YAAY,EAAmB,MAAM,wBAAwB,CAAC;AAY5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,KAAK,sBAAsB,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE3F;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,YAAY;IAC3B,uFAAuF;IACvF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACtC;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,KAAe,EACf,IAAe,EACf,UAAc,EACd,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAgB,EAChB,KAAa,EACb,MAAa,EACb,SAAgB,EAChB,KAAK,EACL,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,YAAY,+BAoJd;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAE1D"}

package/dist/react/components/Popover.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as RPopover from '@radix-ui/react-popover';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useOutsidePress } from '../hooks/useOutsidePress.js';
 import { cn } from '../lib/cn.js';
 import { CardFrameContext } from './cardFrame.js';
 import { useFloatingContainer } from '../lib/floatingContainer.js';
+import { floatingSideFor } from '../lib/floatingSide.js';
 import { FLOATING_ANIMATION, FLOATING_COLLISION_PADDING, FLOATING_CONTENT_BASE, } from '../lib/floatingStyles.js';
 /*
  * Re-exported so an app that imports only this subpath (desk, which has no Tailwind and
@@ -43,6 +44,57 @@ export function Popover({ trigger, anchor, children, open, onOpenChange, align =
         return { current: { getBoundingClientRect: measure } };
     }, [anchor]);
     const anchorTrigger = anchor ? (isPoint(anchor) ? anchor.trigger : anchor) : null;
+    // Typed as Radix types its Trigger; with `asChild` it is whatever element `trigger` is.
+    const triggerRef = useRef(null);
+    /*
+     * 🔴 The side, chosen from the panel's natural height — Radix's own flip never fires for a
+     * belt panel, because the height cap makes it always "fit" (`floatingSide.ts` has the
+     * measurement). Measured when the panel attaches, before it paints, and again whenever its
+     * content grows (a list that loads after the panel opens). It only ever moves AWAY from a
+     * side the panel no longer fits: a list that shrinks while you type never sends it back.
+     */
+    const [placed, setPlaced] = useState(null);
+    const placedRef = useRef(null);
+    const observerRef = useRef(null);
+    const measureAnchorRef = useRef(() => null);
+    measureAnchorRef.current = () => virtualRef?.current.getBoundingClientRect() ?? triggerRef.current?.getBoundingClientRect() ?? null;
+    const contentRef = useCallback((node) => {
+        observerRef.current?.disconnect();
+        observerRef.current = null;
+        if (!node) {
+            placedRef.current = null;
+            setPlaced(null);
+            return;
+        }
+        const choose = () => {
+            const rect = measureAnchorRef.current();
+            if (!rect)
+                return;
+            const current = placedRef.current ?? side;
+            const viewport = {
+                width: window.innerWidth,
+                height: window.visualViewport?.height ?? window.innerHeight,
+            };
+            const panel = { width: node.offsetWidth, height: node.scrollHeight };
+            const gap = { offset: sideOffset, padding: FLOATING_COLLISION_PADDING };
+            // Keep the side it is on while the panel still fits there.
+            if (placedRef.current && floatingSideFor(current, rect, viewport, panel, gap) === current)
+                return;
+            const next = floatingSideFor(side, rect, viewport, panel, gap);
+            if (next === placedRef.current)
+                return;
+            placedRef.current = next;
+            setPlaced(next);
+        };
+        choose();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(choose);
+        for (const child of Array.from(node.children))
+            observer.observe(child);
+        observerRef.current = observer;
+    }, [side, sideOffset]);
+    useEffect(() => () => observerRef.current?.disconnect(), []);
     // Always controlled underneath, so the outside-press fallback below can close an
     // uncontrolled popover too.
     const [ownOpen, setOwnOpen] = useState(false);
@@ -61,8 +113,6 @@ export function Popover({ trigger, anchor, children, open, onOpenChange, align =
      * phase, before anything can stop it; when Radix has already closed the panel, its second
      * close is a no-op. Escape and `modal` stay Radix's.
      */
-    // Typed as Radix types its Trigger; with `asChild` it is whatever element `trigger` is.
-    const triggerRef = useRef(null);
     const pressInside = useOutsidePress({
         open: isOpen,
         onDismiss: () => setOpen(false),
@@ -72,7 +122,7 @@ export function Popover({ trigger, anchor, children, open, onOpenChange, align =
         // `decideOn` in useOutsidePress.
         decideOn: modal ? 'pointerdown' : 'click',
     });
-    const content = (_jsxs(RPopover.Content, { ...rest, align: align, side: side, sideOffset: sideOffset, collisionPadding: FLOATING_COLLISION_PADDING, style: width != null ? { width } : undefined, "aria-label": label, "data-cb-prose": '', ...(role ? { role } : {}), onOpenAutoFocus: autoFocus ? undefined : (event) => event.preventDefault(), onInteractOutside: (event) => {
+    const content = (_jsxs(RPopover.Content, { ...rest, ref: contentRef, align: align, side: placed ?? side, sideOffset: sideOffset, collisionPadding: FLOATING_COLLISION_PADDING, style: width != null ? { width } : undefined, "aria-label": label, "data-cb-prose": '', ...(role ? { role } : {}), onOpenAutoFocus: autoFocus ? undefined : (event) => event.preventDefault(), onInteractOutside: (event) => {
             // The anchor's own control decides open/shut with its click — see PopoverPoint.
             if (anchorTrigger?.contains(event.target))
                 event.preventDefault();

package/dist/react/components/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/react/components/Popover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/react/components/Popover.tsx"],"names":[],"mappings":"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"}

package/dist/react/lib/floatingSide.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Which side of its anchor a floating panel opens on, decided from the panel's NATURAL size.
+ *
+ * 🔴 Radix's `flip` cannot do this for the belt's panels. `FLOATING_CONTENT_BASE` caps a panel's
+ * height at the room on its side (`--radix-popper-available-height`) so a long menu scrolls
+ * instead of running off the screen, and a panel capped to the room it has never overflows, so
+ * `flip` never fires. A tall panel opened toward the cramped side stayed there and shrank, with
+ * the roomy side empty. Measured 2026-10-26 in photos' "Who is this?" (forge task 3776): at
+ * 1280×720, a face with 322px above and 335px below kept the panel below it at 295px, its last
+ * button at y=841, off the screen.
+ *
+ * So the side is chosen here, against the height the content WOULD take uncapped (its
+ * `scrollHeight`): the side asked for if the panel fits there, else the opposite side, else
+ * BESIDE the anchor (where a wide screen has the whole height), else whichever of the asked-for
+ * side and its opposite has more room. The height cap stays. It is what keeps the last case on
+ * the screen.
+ */
+export type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
+interface Rect {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+/**
+ * @param requested the side the caller asked for
+ * @param anchor    the trigger's or anchor's rect, in viewport pixels
+ * @param viewport  the visible viewport
+ * @param panel     the panel's natural size, uncapped
+ * @param gap       the space kept between anchor and panel (`sideOffset`), plus the collision
+ *                  padding kept from the screen's edge
+ */
+export declare function floatingSideFor(requested: FloatingSide, anchor: Rect, viewport: Size, panel: Size, gap: {
+    offset: number;
+    padding: number;
+}): FloatingSide;
+export {};
+//# sourceMappingURL=floatingSide.d.ts.map

package/dist/react/lib/floatingSide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingSide.d.ts","sourceRoot":"","sources":["../../../src/react/lib/floatingSide.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE/D,UAAU,IAAI;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAWD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,YAAY,EACvB,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,IAAI,EACd,KAAK,EAAE,IAAI,EACX,GAAG,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACvC,YAAY,CAiBd"}

package/dist/react/lib/floatingSide.js

@@ -0,0 +1,54 @@
+/**
+ * Which side of its anchor a floating panel opens on, decided from the panel's NATURAL size.
+ *
+ * 🔴 Radix's `flip` cannot do this for the belt's panels. `FLOATING_CONTENT_BASE` caps a panel's
+ * height at the room on its side (`--radix-popper-available-height`) so a long menu scrolls
+ * instead of running off the screen, and a panel capped to the room it has never overflows, so
+ * `flip` never fires. A tall panel opened toward the cramped side stayed there and shrank, with
+ * the roomy side empty. Measured 2026-10-26 in photos' "Who is this?" (forge task 3776): at
+ * 1280×720, a face with 322px above and 335px below kept the panel below it at 295px, its last
+ * button at y=841, off the screen.
+ *
+ * So the side is chosen here, against the height the content WOULD take uncapped (its
+ * `scrollHeight`): the side asked for if the panel fits there, else the opposite side, else
+ * BESIDE the anchor (where a wide screen has the whole height), else whichever of the asked-for
+ * side and its opposite has more room. The height cap stays. It is what keeps the last case on
+ * the screen.
+ */
+const OPPOSITE = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+};
+const isVertical = (side) => side === 'top' || side === 'bottom';
+/**
+ * @param requested the side the caller asked for
+ * @param anchor    the trigger's or anchor's rect, in viewport pixels
+ * @param viewport  the visible viewport
+ * @param panel     the panel's natural size, uncapped
+ * @param gap       the space kept between anchor and panel (`sideOffset`), plus the collision
+ *                  padding kept from the screen's edge
+ */
+export function floatingSideFor(requested, anchor, viewport, panel, gap) {
+    const room = {
+        top: anchor.top - gap.offset - gap.padding,
+        bottom: viewport.height - anchor.bottom - gap.offset - gap.padding,
+        left: anchor.left - gap.offset - gap.padding,
+        right: viewport.width - anchor.right - gap.offset - gap.padding,
+    };
+    const fits = (side) => isVertical(side)
+        ? room[side] >= panel.height && panel.width <= viewport.width - 2 * gap.padding
+        : room[side] >= panel.width && panel.height <= viewport.height - 2 * gap.padding;
+    const opposite = OPPOSITE[requested];
+    if (fits(requested))
+        return requested;
+    if (fits(opposite))
+        return opposite;
+    const beside = isVertical(requested) ? ['right', 'left'] : ['bottom', 'top'];
+    for (const side of beside)
+        if (fits(side))
+            return side;
+    return room[requested] >= room[opposite] ? requested : opposite;
+}
+//# sourceMappingURL=floatingSide.js.map

package/dist/react/lib/floatingSide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingSide.js","sourceRoot":"","sources":["../../../src/react/lib/floatingSide.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAgBH,MAAM,QAAQ,GAAuC;IACnD,GAAG,EAAE,QAAQ;IACb,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAkB,EAAW,EAAE,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,QAAQ,CAAC;AAExF;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAC7B,SAAuB,EACvB,MAAY,EACZ,QAAc,EACd,KAAW,EACX,GAAwC;IAExC,MAAM,IAAI,GAAiC;QACzC,GAAG,EAAE,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO;QAC1C,MAAM,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO;QAClE,IAAI,EAAE,MAAM,CAAC,IAAI,GAAG,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO;QAC5C,KAAK,EAAE,QAAQ,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO;KAChE,CAAC;IACF,MAAM,IAAI,GAAG,CAAC,IAAkB,EAAW,EAAE,CAC3C,UAAU,CAAC,IAAI,CAAC;QACd,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC,OAAO;QAC/E,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IACrF,MAAM,QAAQ,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,IAAI,CAAC,SAAS,CAAC;QAAE,OAAO,SAAS,CAAC;IACtC,IAAI,IAAI,CAAC,QAAQ,CAAC;QAAE,OAAO,QAAQ,CAAC;IACpC,MAAM,MAAM,GAAmB,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC7F,KAAK,MAAM,IAAI,IAAI,MAAM;QAAE,IAAI,IAAI,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;IACvD,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;AAClE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.95.0",
+	"version": "5.96.0",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
@@ -100,6 +100,7 @@
 		"e2e:page-layout": "playwright test --config e2e/playwright.config.ts page-layout.spec.ts",
 		"e2e:touch": "playwright test --config e2e/playwright.config.ts --project=touch",
 		"e2e:tap-away": "playwright test --config e2e/playwright.config.ts tap-away.spec.ts",
+		"e2e:popover-room": "playwright test --config e2e/playwright.config.ts popover-room.spec.ts",
 		"done:serial": "bun run typecheck && bun run lint && bun run test && bun run build",
 		"paths": "bun run scripts/paths.ts",
 		"surface": "public-surface",
@@ -951,7 +952,7 @@
 		"@vidstack/react": "1.15.6",
 		"@vitejs/plugin-react": "^5.2.0",
 		"cursedbelt-server": "^4.43.1",
-		"cursedops": "^0.19.0",
+		"cursedops": "^0.20.0",
 		"diff": "^9.0.0",
 		"emoji-mart": "^5.6.0",
 		"hls.js": "^1.5.0",

package/src/react/canvas-hud/index.ts

@@ -24,17 +24,27 @@ export type {
   CanvasSize,
   CanvasView,
   FitOptions,
+  ImageZoomLimits,
   LevelOfDetail,
   LevelOfDetailThresholds,
 } from './viewport.js';
 export {
   centerView,
+  clampImageView,
   clampScale,
   fitScale,
   fitView,
+  IMAGE_FIT,
+  IMAGE_ZOOM_STEPS,
+  imageWheelFactor,
+  imageZoomLabel,
+  isImageZoomed,
   LEVEL_OF_DETAIL,
   levelOfDetail,
+  panImageBy,
+  stepImageScale,
   visibleBounds,
   wheelZoomFactor,
   zoomAt,
+  zoomImageAt,
 } from './viewport.js';

package/src/react/canvas-hud/viewport.spec.ts

@@ -1,13 +1,21 @@
 import { describe, expect, test } from 'bun:test';
 import {
   centerView,
+  clampImageView,
   clampScale,
   fitScale,
   fitView,
+  IMAGE_FIT,
+  imageWheelFactor,
+  imageZoomLabel,
+  isImageZoomed,
   levelOfDetail,
+  panImageBy,
+  stepImageScale,
   visibleBounds,
   wheelZoomFactor,
   zoomAt,
+  zoomImageAt,
 } from './viewport.js';
 
 /** Where a world point lands on screen under a view. */
@@ -103,3 +111,65 @@ describe('levelOfDetail (CNV-5)', () => {
     expect(levelOfDetail(0.4, { mid: 0.2, close: 0.4 })).toBe('close');
   });
 });
+
+describe('the image viewer (a picture laid out at its fit, viewed about the stage center; forge task 3780)', () => {
+  const picture = { width: 400, height: 300 };
+  const stage = { width: 800, height: 300 };
+  const photos = { min: 1, max: 8 };
+  const family = { min: 0.25, max: 8 };
+
+  test('🔴 zooming at a point keeps that point of the picture under it', () => {
+    // The pointer 100px right of center, over the picture point 100px right of its center.
+    const view = zoomImageAt(IMAGE_FIT, 2, { x: 100, y: 0 }, picture, picture, photos);
+    expect(view).toEqual({ scale: 2, x: -100, y: 0 });
+    expect(100 * view.scale + view.x).toBe(100);
+  });
+
+  test('🔴 a picture is never dragged off the stage: centered on an axis it does not fill, no gap on one it does', () => {
+    const view = clampImageView({ scale: 1.5, x: 999, y: 999 }, picture, stage, photos);
+    // 600 wide in an 800 stage: centered. 450 tall in a 300 stage: at most 75 either way.
+    expect(view).toEqual({ scale: 1.5, x: 0, y: 75 });
+    expect(panImageBy(view, 0, -1000, picture, stage, photos).y).toBe(-75);
+  });
+
+  test('the scale stays inside the limits, the fit has no offset, and below the fit the picture stays centered', () => {
+    expect(clampImageView({ scale: 0.2, x: 50, y: 50 }, picture, stage, photos)).toEqual(IMAGE_FIT);
+    expect(clampImageView({ scale: 40, x: 0, y: 0 }, picture, stage, photos).scale).toBe(8);
+    expect(zoomImageAt({ scale: 3, x: 40, y: 10 }, 1, { x: 0, y: 0 }, picture, stage, photos)).toEqual(IMAGE_FIT);
+    expect(clampImageView({ scale: 0.1, x: 50, y: -50 }, picture, stage, family)).toEqual({ scale: 0.25, x: 0, y: 0 });
+    expect(clampImageView({ scale: Number.NaN, x: 0, y: 0 }, picture, stage, family)).toEqual(IMAGE_FIT);
+  });
+
+  test('the buttons walk the stops inside the limits, from wherever a pinch left the scale', () => {
+    expect(stepImageScale(1, 1, photos)).toBe(1.5);
+    expect(stepImageScale(2.3, 1, photos)).toBe(3);
+    expect(stepImageScale(2.3, -1, photos)).toBe(2);
+    expect(stepImageScale(1.2, -1, photos)).toBe(1);
+    expect(stepImageScale(1, -1, photos)).toBe(1);
+    expect(stepImageScale(8, 1, photos)).toBe(8);
+    expect(stepImageScale(1, -1, family)).toBe(0.75);
+    expect(stepImageScale(0.25, -1, family)).toBe(0.25);
+    expect(stepImageScale(5, 1, { min: 1, max: 5 })).toBe(5);
+    expect(stepImageScale(4, 1, { min: 1, max: 5 })).toBe(5);
+  });
+
+  test('a wheel zooms in on a negative delta, out on a positive one, a flung wheel is capped, and it outpaces the canvas', () => {
+    expect(imageWheelFactor(-10)).toBeGreaterThan(1);
+    expect(imageWheelFactor(10)).toBeLessThan(1);
+    expect(imageWheelFactor(-5000)).toBe(imageWheelFactor(-60));
+    expect(imageWheelFactor(Number.NaN)).toBe(1);
+    expect(imageWheelFactor(-10)).toBeGreaterThan(wheelZoomFactor(-10));
+  });
+
+  test('the readout', () => {
+    expect(imageZoomLabel(1)).toBe('Fit');
+    expect(imageZoomLabel(1.5)).toBe('1.5×');
+    expect(imageZoomLabel(2)).toBe('2×');
+    expect(imageZoomLabel(3.4)).toBe('3×');
+    expect(imageZoomLabel(0.5)).toBe('0.5×');
+    expect(imageZoomLabel(0.25)).toBe('0.25×');
+    expect(isImageZoomed(IMAGE_FIT)).toBe(false);
+    expect(isImageZoomed({ scale: 1.2, x: 0, y: 0 })).toBe(true);
+    expect(isImageZoomed({ scale: 0.5, x: 0, y: 0 })).toBe(true);
+  });
+});

package/src/react/canvas-hud/viewport.ts

@@ -122,3 +122,80 @@ export function levelOfDetail(scale: number, thresholds: LevelOfDetailThresholds
   if (scale >= thresholds.mid) return 'mid';
   return 'far';
 }
+
+// ── The image viewer's half ──────────────────────────────────────────────────────────────────
+//
+// A picture viewer (photos' lightbox, family's document canvas) is a canvas whose world is ONE
+// picture, already laid out at its fit. Its view is the same `CanvasView`, read about the STAGE'S
+// CENTER instead of its corner: `x`/`y` are how far the picture's center sits from the stage's,
+// in screen pixels, and `scale` 1 is the fit — so the CSS is `translate(x, y) scale(scale)` with
+// `transform-origin: center`, and an anchor is a point measured from the stage's center. That is
+// why it is centered rather than cornered: the fit is `{ scale: 1, x: 0, y: 0 }` at every stage
+// size, so a resized window or a turned phone keeps the view's meaning, and only the clamp moves.
+// The anchoring arithmetic is the same either way, so it is {@link zoomAt}'s.
+
+/** How far a picture viewer zooms: `min` 1 never goes below the fit (photos); under 1 shows it smaller (family's wall-sized prints). */
+export interface ImageZoomLimits {
+  min: number;
+  max: number;
+}
+
+/** The fit: the picture whole and centered. */
+export const IMAGE_FIT: CanvasView = { scale: 1, x: 0, y: 0 };
+
+/** The stops the − and + buttons walk, inside a viewer's limits; a pinch or a wheel lands anywhere between. */
+export const IMAGE_ZOOM_STEPS: readonly number[] = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8];
+
+const finiteScale = (scale: number, limits: ImageZoomLimits): number =>
+  clampScale(Number.isFinite(scale) ? scale : 1, limits.min, limits.max);
+
+/**
+ * The view held inside what the scaled `picture` (its laid-out size at the fit) can show on `stage`:
+ * centered on an axis it does not fill, else panned no further than its edge — the picture never
+ * slides off and leaves a gap where it could have filled the stage.
+ */
+export function clampImageView(view: CanvasView, picture: CanvasSize, stage: CanvasSize, limits: ImageZoomLimits): CanvasView {
+  const scale = finiteScale(view.scale, limits);
+  const room = (content: number, box: number) => Math.max(0, (content * scale - box) / 2);
+  const rx = room(picture.width, stage.width);
+  const ry = room(picture.height, stage.height);
+  // `+ 0` turns a -0 into 0, so a clamped view compares equal to the fit.
+  return { scale, x: clampScale(view.x, -rx, rx) + 0, y: clampScale(view.y, -ry, ry) + 0 };
+}
+
+/** Zoom to `scale` keeping `anchor` (screen pixels from the stage's center) over the same spot of the picture, then clamp. */
+export function zoomImageAt(view: CanvasView, scale: number, anchor: CanvasPoint, picture: CanvasSize, stage: CanvasSize, limits: ImageZoomLimits): CanvasView {
+  return clampImageView(zoomAt(view, finiteScale(scale, limits), anchor), picture, stage, limits);
+}
+
+/** Move the picture by a drag's or a scroll's screen delta, then clamp. */
+export function panImageBy(view: CanvasView, dx: number, dy: number, picture: CanvasSize, stage: CanvasSize, limits: ImageZoomLimits): CanvasView {
+  return clampImageView({ ...view, x: view.x + dx, y: view.y + dy }, picture, stage, limits);
+}
+
+/** The next button stop in `direction` from wherever a pinch left the scale, inside `limits`. */
+export function stepImageScale(scale: number, direction: 1 | -1, limits: ImageZoomLimits, steps: readonly number[] = IMAGE_ZOOM_STEPS): number {
+  const stops = [...new Set([limits.min, ...steps.filter((s) => s > limits.min && s < limits.max), limits.max])];
+  if (direction > 0) return stops.find((s) => s > scale + 0.01) ?? limits.max;
+  return stops.reverse().find((s) => s < scale - 0.01) ?? limits.min;
+}
+
+/**
+ * One wheel event's factor for a picture: a trackpad pinch (a ctrl-wheel stream of small deltas)
+ * tracks the fingers about 1:1, and a mouse notch (a delta of ~100) is capped at one comfortable
+ * step. Faster than {@link wheelZoomFactor}, which a canvas spends over a range of 0.02–4×; a
+ * picture's whole range is a few doublings.
+ */
+export function imageWheelFactor(deltaY: number): number {
+  return Math.exp(-clampScale(Number.isFinite(deltaY) ? deltaY : 0, -60, 60) / 120);
+}
+
+/** Is the view anything but the fit's scale? */
+export const isImageZoomed = (view: CanvasView): boolean => Math.abs(view.scale - 1) > 0.001;
+
+/** The readout between the buttons: "Fit", "1.5×", "2×", "0.5×". */
+export function imageZoomLabel(scale: number): string {
+  if (Math.abs(scale - 1) <= 0.001) return 'Fit';
+  const digits = scale < 1 ? 2 : scale < 2 ? 1 : 0;
+  return `${Number(scale.toFixed(digits)).toString()}×`;
+}

package/src/react/components/Popover.tsx

@@ -1,9 +1,10 @@
 import * as RPopover from '@radix-ui/react-popover';
-import { type ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useOutsidePress } from '../hooks/useOutsidePress.js';
 import { cn } from '../lib/cn.js';
 import { CardFrameContext } from './cardFrame.js';
 import { useFloatingContainer } from '../lib/floatingContainer.js';
+import { type FloatingSide, floatingSideFor } from '../lib/floatingSide.js';
 import {
   FLOATING_ANIMATION,
   FLOATING_COLLISION_PADDING,
@@ -46,7 +47,12 @@ export interface PopoverProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   align?: 'start' | 'center' | 'end';
-  side?: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * The side to open on when the panel fits there. When it does not, the panel opens on the
+   * opposite side, else beside the anchor, else on the roomier of the two — see
+   * `floatingSideFor`. Default `bottom`.
+   */
+  side?: FloatingSide;
   sideOffset?: number;
   /** Width of the popover panel. Default: auto (sized to content). */
   width?: string | number;
@@ -132,6 +138,58 @@ export function Popover({
   }, [anchor]);
   const anchorTrigger = anchor ? (isPoint(anchor) ? anchor.trigger : anchor) : null;
 
+  // Typed as Radix types its Trigger; with `asChild` it is whatever element `trigger` is.
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+
+  /*
+   * 🔴 The side, chosen from the panel's natural height — Radix's own flip never fires for a
+   * belt panel, because the height cap makes it always "fit" (`floatingSide.ts` has the
+   * measurement). Measured when the panel attaches, before it paints, and again whenever its
+   * content grows (a list that loads after the panel opens). It only ever moves AWAY from a
+   * side the panel no longer fits: a list that shrinks while you type never sends it back.
+   */
+  const [placed, setPlaced] = useState<FloatingSide | null>(null);
+  const placedRef = useRef<FloatingSide | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+  const measureAnchorRef = useRef<() => DOMRect | null>(() => null);
+  measureAnchorRef.current = () =>
+    virtualRef?.current.getBoundingClientRect() ?? triggerRef.current?.getBoundingClientRect() ?? null;
+  const contentRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+      if (!node) {
+        placedRef.current = null;
+        setPlaced(null);
+        return;
+      }
+      const choose = () => {
+        const rect = measureAnchorRef.current();
+        if (!rect) return;
+        const current = placedRef.current ?? side;
+        const viewport = {
+          width: window.innerWidth,
+          height: window.visualViewport?.height ?? window.innerHeight,
+        };
+        const panel = { width: node.offsetWidth, height: node.scrollHeight };
+        const gap = { offset: sideOffset, padding: FLOATING_COLLISION_PADDING };
+        // Keep the side it is on while the panel still fits there.
+        if (placedRef.current && floatingSideFor(current, rect, viewport, panel, gap) === current) return;
+        const next = floatingSideFor(side, rect, viewport, panel, gap);
+        if (next === placedRef.current) return;
+        placedRef.current = next;
+        setPlaced(next);
+      };
+      choose();
+      if (typeof ResizeObserver === 'undefined') return;
+      const observer = new ResizeObserver(choose);
+      for (const child of Array.from(node.children)) observer.observe(child);
+      observerRef.current = observer;
+    },
+    [side, sideOffset],
+  );
+  useEffect(() => () => observerRef.current?.disconnect(), []);
+
   // Always controlled underneath, so the outside-press fallback below can close an
   // uncontrolled popover too.
   const [ownOpen, setOwnOpen] = useState(false);
@@ -153,8 +211,6 @@ export function Popover({
    * phase, before anything can stop it; when Radix has already closed the panel, its second
    * close is a no-op. Escape and `modal` stay Radix's.
    */
-  // Typed as Radix types its Trigger; with `asChild` it is whatever element `trigger` is.
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
   const pressInside = useOutsidePress({
     open: isOpen,
     onDismiss: () => setOpen(false),
@@ -168,8 +224,9 @@ export function Popover({
   const content = (
     <RPopover.Content
       {...rest}
+      ref={contentRef}
       align={align}
-      side={side}
+      side={placed ?? side}
       sideOffset={sideOffset}
       collisionPadding={FLOATING_COLLISION_PADDING}
       style={width != null ? { width } : undefined}

package/src/react/lib/floatingSide.spec.ts

@@ -0,0 +1,37 @@
+import { describe, expect, test } from 'bun:test';
+import { floatingSideFor } from './floatingSide.js';
+
+const gap = { offset: 4, padding: 16 };
+/** An anchor box from its top and bottom edges, centered on a 1280-wide screen unless told. */
+const box = (top: number, bottom: number, left = 600, right = 680) => ({ top, bottom, left, right });
+
+describe('floatingSideFor (forge task 3776)', () => {
+  test('the side asked for, when the panel fits there', () => {
+    expect(floatingSideFor('bottom', box(100, 140), { width: 1280, height: 900 }, { width: 320, height: 500 }, gap)).toBe('bottom');
+    expect(floatingSideFor('top', box(700, 740), { width: 1280, height: 900 }, { width: 320, height: 500 }, gap)).toBe('top');
+  });
+
+  test('the opposite side when only that one has the room', () => {
+    expect(floatingSideFor('bottom', box(600, 640), { width: 1280, height: 900 }, { width: 320, height: 500 }, gap)).toBe('top');
+    expect(floatingSideFor('top', box(100, 140), { width: 1280, height: 900 }, { width: 320, height: 500 }, gap)).toBe('bottom');
+  });
+
+  test("beside the anchor when neither has it — photos' face at 1280×720, 322px above and 335px below", () => {
+    expect(floatingSideFor('bottom', box(322, 385, 600, 666), { width: 1280, height: 720 }, { width: 336, height: 540 }, gap)).toBe('right');
+    expect(floatingSideFor('bottom', box(322, 385, 900, 1000), { width: 1280, height: 720 }, { width: 336, height: 540 }, gap)).toBe('left');
+  });
+
+  test('a phone with no room anywhere: the roomier of the asked-for side and its opposite', () => {
+    expect(floatingSideFor('bottom', box(300, 340, 20, 370), { width: 390, height: 640 }, { width: 350, height: 600 }, gap)).toBe('bottom');
+    expect(floatingSideFor('bottom', box(400, 440, 20, 370), { width: 390, height: 640 }, { width: 350, height: 600 }, gap)).toBe('top');
+  });
+
+  test('a side panel too tall for the screen is not "beside" — it would be capped there too', () => {
+    expect(floatingSideFor('bottom', box(322, 385, 100, 160), { width: 1280, height: 720 }, { width: 336, height: 800 }, gap)).toBe('bottom');
+  });
+
+  test('a left/right panel flips across, then goes below or above', () => {
+    expect(floatingSideFor('right', box(300, 340, 1000, 1100), { width: 1280, height: 900 }, { width: 320, height: 200 }, gap)).toBe('left');
+    expect(floatingSideFor('right', box(100, 140, 400, 900), { width: 1280, height: 900 }, { width: 420, height: 300 }, gap)).toBe('bottom');
+  });
+});

package/src/react/lib/floatingSide.ts

@@ -0,0 +1,73 @@
+/**
+ * Which side of its anchor a floating panel opens on, decided from the panel's NATURAL size.
+ *
+ * 🔴 Radix's `flip` cannot do this for the belt's panels. `FLOATING_CONTENT_BASE` caps a panel's
+ * height at the room on its side (`--radix-popper-available-height`) so a long menu scrolls
+ * instead of running off the screen, and a panel capped to the room it has never overflows, so
+ * `flip` never fires. A tall panel opened toward the cramped side stayed there and shrank, with
+ * the roomy side empty. Measured 2026-10-26 in photos' "Who is this?" (forge task 3776): at
+ * 1280×720, a face with 322px above and 335px below kept the panel below it at 295px, its last
+ * button at y=841, off the screen.
+ *
+ * So the side is chosen here, against the height the content WOULD take uncapped (its
+ * `scrollHeight`): the side asked for if the panel fits there, else the opposite side, else
+ * BESIDE the anchor (where a wide screen has the whole height), else whichever of the asked-for
+ * side and its opposite has more room. The height cap stays. It is what keeps the last case on
+ * the screen.
+ */
+
+export type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
+
+interface Rect {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+const OPPOSITE: Record<FloatingSide, FloatingSide> = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left',
+};
+
+const isVertical = (side: FloatingSide): boolean => side === 'top' || side === 'bottom';
+
+/**
+ * @param requested the side the caller asked for
+ * @param anchor    the trigger's or anchor's rect, in viewport pixels
+ * @param viewport  the visible viewport
+ * @param panel     the panel's natural size, uncapped
+ * @param gap       the space kept between anchor and panel (`sideOffset`), plus the collision
+ *                  padding kept from the screen's edge
+ */
+export function floatingSideFor(
+  requested: FloatingSide,
+  anchor: Rect,
+  viewport: Size,
+  panel: Size,
+  gap: { offset: number; padding: number },
+): FloatingSide {
+  const room: Record<FloatingSide, number> = {
+    top: anchor.top - gap.offset - gap.padding,
+    bottom: viewport.height - anchor.bottom - gap.offset - gap.padding,
+    left: anchor.left - gap.offset - gap.padding,
+    right: viewport.width - anchor.right - gap.offset - gap.padding,
+  };
+  const fits = (side: FloatingSide): boolean =>
+    isVertical(side)
+      ? room[side] >= panel.height && panel.width <= viewport.width - 2 * gap.padding
+      : room[side] >= panel.width && panel.height <= viewport.height - 2 * gap.padding;
+  const opposite = OPPOSITE[requested];
+  if (fits(requested)) return requested;
+  if (fits(opposite)) return opposite;
+  const beside: FloatingSide[] = isVertical(requested) ? ['right', 'left'] : ['bottom', 'top'];
+  for (const side of beside) if (fits(side)) return side;
+  return room[requested] >= room[opposite] ? requested : opposite;
+}