@osamash/floor-planner 1.2.3 → 1.2.5

package/dist/types/react-planner/toolbar/ToolbarSubPanel.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type Catalog from "../catalog/catalog";
+export interface SubPanelOption {
+    key: string;
+    label: string;
+    icon: ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    hasChildren?: boolean;
+    onClick?: () => void;
+}
+interface ToolbarSubPanelProps {
+    title: string;
+    options?: SubPanelOption[];
+    cta?: string;
+    emptyState?: ReactNode;
+    catalog?: Catalog;
+    catalogPage?: string | null;
+    onBack?: () => void;
+    headerExtras?: ReactNode;
+}
+declare const ToolbarSubPanel: ({ title, options, cta, emptyState, catalog, catalogPage, onBack, headerExtras, }: ToolbarSubPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default ToolbarSubPanel;

package/dist/types/react-planner/toolbar/ZoomControls.d.ts

@@ -0,0 +1,5 @@
+interface ZoomControlsProps {
+    subPanelOpen?: boolean;
+}
+declare const ZoomControls: ({ subPanelOpen }: ZoomControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default ZoomControls;

package/dist/types/react-planner/utils/angle.d.ts

@@ -0,0 +1,9 @@
+export declare const RIGHT_ANGLE_TOLERANCE = 5;
+/** Normalize to (-180, 180], the range the rest of the planner uses. */
+export declare const normalizeAngle: (degrees: number) => number;
+/**
+ * Pull an angle onto the nearest quarter turn if it is already close to one.
+ * Shared so that rotating an item feels the same however it is done — the 2D
+ * handle, the 3D gizmo, or anything added later.
+ */
+export declare const snapToRightAngle: (degrees: number) => number;

package/dist/types/react-planner/utils/geometry.d.ts

@@ -141,6 +141,21 @@ export declare function extendLine(x1: number, y1: number, x2: number, y2: numbe
     y: number;
 };
 export declare function roundVertex(vertex: Map<string, number>, precision?: number): Map<string, number>;
+/** Is (pointX, pointY) strictly inside `polygon` (a flat [x0,y0,x1,y1,…] ring)?
+ *
+ *  A point *on* the boundary counts as outside. Callers depend on that: the
+ *  hole detection in `Layer.detectAndUpdateAreas` asks whether one area sits
+ *  inside another by testing one of its vertices, and neighbouring rooms
+ *  always share corners — a shared corner has to answer "no".
+ *
+ *  This used to be PolyK's `ContainsPoint`, whose "hit vertex" correction
+ *  decremented the crossing count for a polygon vertex level with the query
+ *  point *even when that vertex sat to the left of it and had therefore never
+ *  been counted*, leaving the count at -1 and reporting a point far outside as
+ *  inside. Floor plans are axis-aligned and grid-snapped, so points level with
+ *  a vertex are the common case, not a corner case — every room in a grid of
+ *  rooms is level with its neighbours' corners. Rewritten as a plain
+ *  crossing-number test with an explicit boundary check up front. */
 export declare function ContainsPoint(polygon: number[], pointX: number, pointY: number): boolean;
 export declare function cosWithThreshold(alpha: number, threshold: number): number;
 export declare function sinWithThreshold(alpha: number, threshold: number): number;

package/dist/types/react-planner/utils/image-trim.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Where an image's visible pixels actually are inside the rectangle it is
+ * drawn in.
+ *
+ * Catalog artwork is usually a PNG with transparent margin around the object,
+ * and `<image>` letterboxes it on top of that when the file's proportions
+ * don't match the rectangle. Both leave empty space that nothing in the DOM
+ * reports — `getBBox()` returns the rectangle as declared — so an item snapped
+ * flush by its bounding box still looks like it is floating off the wall.
+ *
+ * The scan is done once per URL and cached for the life of the page.
+ */
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * The rectangle an image's visible pixels occupy, in the same coordinates
+ * `rect` is given in. Null when it can't be worked out — a cross-origin asset
+ * without CORS headers, a `slice` fit, an image that failed to load — in which
+ * case the caller should stay with the declared rectangle.
+ */
+export declare function visibleImageRect(src: string, rect: Rect, preserveAspectRatio: string): Promise<Rect | null>;

package/dist/types/react-planner/utils/index.d.ts

@@ -5,9 +5,10 @@ import * as SnapUtils from "./snap";
 import * as SnapSceneUtils from "./snap-scene";
 import * as history from "./history";
 import * as ObjectUtils from "./objects-utils";
+import * as LineFamilyUtils from "./line-family";
 import IDBroker from "./id-broker";
 import NameGenerator from "./name-generator";
-export { GeometryUtils, GraphInnerCycles, MathUtils, SnapUtils, SnapSceneUtils, history, IDBroker, NameGenerator, ObjectUtils, };
+export { GeometryUtils, GraphInnerCycles, MathUtils, SnapUtils, SnapSceneUtils, history, IDBroker, NameGenerator, ObjectUtils, LineFamilyUtils, };
 declare const _default: {
     GeometryUtils: typeof GeometryUtils;
     GraphInnerCycles: typeof GraphInnerCycles;
@@ -18,5 +19,6 @@ declare const _default: {
     IDBroker: typeof IDBroker;
     NameGenerator: typeof NameGenerator;
     ObjectUtils: typeof ObjectUtils;
+    LineFamilyUtils: typeof LineFamilyUtils;
 };
 export default _default;

package/dist/types/react-planner/utils/item-footprint.d.ts

@@ -0,0 +1,23 @@
+/**
+ * What each item actually measures on the plan.
+ *
+ * Catalog elements draw themselves at whatever size they like and the `Item`
+ * record carries no width or height, so an item's footprint is only knowable
+ * from what it rendered. `viewer2d/Item` measures that anyway — for handle and
+ * label placement — and files the result here so the rest of the planner can
+ * reason about item geometry without touching the DOM.
+ *
+ * The box is in the item's own frame, after per-instance scaling and
+ * mirroring, before rotation: `x`/`y` are its corner relative to the item's
+ * origin, which is not necessarily its centre.
+ */
+export interface ItemFootprint {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function rememberItemFootprint(itemID: string, box: ItemFootprint): void;
+export declare function forgetItemFootprint(itemID: string): void;
+/** Null for an item that hasn't been drawn in 2D yet. */
+export declare function getItemFootprint(itemID: string): ItemFootprint | null;

package/dist/types/react-planner/utils/item-snap.d.ts

@@ -0,0 +1,56 @@
+import { type ItemFootprint } from "./item-footprint";
+export declare const ITEM_WALL_SNAP_DISTANCE = 25;
+export declare const ITEM_ITEM_SNAP_DISTANCE = 25;
+/** The face an item snapped against, for the viewer to draw a guide along. */
+export interface ItemSnapGuide {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+export interface ItemWallSnap {
+    x: number;
+    y: number;
+    rotation: number;
+    lineID: string;
+    guides: ItemSnapGuide[];
+    /**
+     * The world direction the item is still free to slide along after the snap —
+     * the wall's own direction, since going flush only fixes the axis across it.
+     * Null once a corner snap has fixed that one too. What is left here is what
+     * a neighbouring item is allowed to move the item on.
+     */
+    free: {
+        x: number;
+        y: number;
+    } | null;
+}
+/**
+ * Where the item would sit if it snapped to a wall, or null if none is close
+ * enough.
+ *
+ * The item goes flush against the nearest wall face and squares up with it,
+ * then — if it is also near the wall at the other end — slides along until it
+ * sits in the corner. It stays free on any axis it hasn't snapped on, so the
+ * pointer still leads there.
+ */
+export declare function snapItemToWalls(layer: any, catalog: any, footprint: ItemFootprint | null, x: number, y: number, rotation: number): ItemWallSnap | null;
+/** Where the item lands, or null if nothing was close enough to snap to. */
+export interface ItemSnap {
+    x: number;
+    y: number;
+    rotation: number;
+    guides: ItemSnapGuide[];
+}
+/**
+ * Everything a dragged item snaps to: the walls first, then the items already
+ * placed.
+ *
+ * The two compose rather than compete. A wall snap fixes the axis across the
+ * wall and squares the item up; the items on the layer then get to decide
+ * where along that wall it sits — so a nightstand pushed towards a corner goes
+ * flush against the wall *and* flush against the bed in one gesture. Once a
+ * corner snap has fixed the second axis too there is nothing left to offer and
+ * the walls have it. With no wall in range, both axes are the items' to claim.
+ */
+export declare function snapItem(layer: any, catalog: any, itemID: string, footprint: ItemFootprint | null, x: number, y: number, rotation: number): ItemSnap | null;

package/dist/types/react-planner/utils/item-transform.d.ts

@@ -0,0 +1,9 @@
+export declare const ITEM_MIN_SCALE = 0.2;
+export declare const ITEM_MAX_SCALE = 8;
+export interface ItemTransform {
+    scale: number;
+    flipHorizontal: boolean;
+    flipVertical: boolean;
+}
+export declare function getItemTransform(item: any): ItemTransform;
+export declare function clampItemScale(scale: number): number;

package/dist/types/react-planner/utils/line-family.d.ts

@@ -0,0 +1,29 @@
+/** Surfaces (patios, lawns, decking…) are drawn with the very same `lines` +
+ *  `vertices` machinery as walls — but they are not structure. A patio laid
+ *  over a room must not weld itself onto the walls it crosses, must not split
+ *  them, and must not turn the room's floor into part of the patio.
+ *
+ *  So every graph operation works inside one *family* at a time: two lines
+ *  only share a vertex, split each other, merge when colinear, or take part in
+ *  the same area cycle when their families match. Snapping is deliberately
+ *  exempt — a surface should still be able to land exactly on a wall corner,
+ *  it just must not become attached to it.
+ */
+export type LineFamily = "surface" | "structure";
+export declare const SURFACE_LINE_TYPE = "surface";
+export declare function lineFamily(type?: string | null): LineFamily;
+export declare function lineFamilyOf(line: any): LineFamily;
+/** Whether a vertex may be shared with a line of `family`.
+ *
+ *  A vertex nothing is hanging off yet takes anything. Otherwise it belongs to
+ *  the families of the lines already attached — which is normally exactly one,
+ *  but plans saved before families existed can have vertices where a wall and
+ *  a surface already meet. Those stay usable by both rather than being split
+ *  apart underneath a scene that is already drawn.
+ */
+export declare function vertexAcceptsFamily(vertex: any, layer: any, family: LineFamily): boolean;
+/** The family of an area, read off the lines meeting at its corners. Mirrors
+ *  `getAreaKind`'s rule: an area is a surface only when nothing structural
+ *  borders it. */
+export declare function areaFamily(area: any, layer: any): LineFamily;
+export declare const LINE_FAMILIES: LineFamily[];

package/dist/types/react-planner/utils/name-generator.d.ts

@@ -1,3 +1,3 @@
 export default class NameGenerator {
-    static generateName(_: any, type: string): string;
+    static generateName(_: any, type: unknown): string;
 }

package/dist/types/react-planner/utils/screenshot.d.ts

@@ -1 +1,22 @@
-export declare const getSVGScreenshot: () => Promise<string>;
+export interface ScreenshotOptions {
+    /** Cap output width in px (height scales to match). Omit for 1:1 with the SVG. */
+    maxWidth?: number;
+    /** Output MIME type. Default "image/png". */
+    type?: string;
+    /** Quality 0-1, for lossy types only. Ignored for PNG. */
+    quality?: number;
+    /**
+     * Reject if the largest SVG on the page is narrower than this. The viewer2d
+     * SVG is unmounted in 3D mode, and without this the "largest SVG" would be a
+     * ~28px toolbar icon, silently producing a thumbnail of an icon.
+     */
+    minWidth?: number;
+    /** Overall budget in ms. Default 15000. */
+    timeout?: number;
+}
+/**
+ * Rasterize the plan viewer's SVG to a data URI. Rejects (rather than hanging)
+ * when there's nothing capturable on screen, an asset can't be decoded, or the
+ * whole thing overruns `timeout`.
+ */
+export declare const getSVGScreenshot: (options?: ScreenshotOptions) => Promise<string>;

package/dist/types/react-planner/utils/three-cache.d.ts

@@ -0,0 +1,17 @@
+import { Texture } from "three";
+import type { ColorSpace } from "three";
+/**
+ * One decoded image per URL, handed out as clones.
+ *
+ * Callers set their own `repeat`/`wrap` — a wall tiles differently from a
+ * floor — and those live on the Texture, so a single shared object won't do.
+ * A clone carries its own settings but shares `source` with the base, and the
+ * renderer keys GPU uploads on `source` (refcounted, so disposing a clone is
+ * safe): the bytes are fetched, decoded and uploaded once no matter how many
+ * walls ask for them.
+ *
+ * `colorSpace` defaults to sRGB because most callers want an albedo map, and
+ * one left in the renderer's linear working space comes out visibly washed
+ * out. Data maps — normals, roughness — must pass `NoColorSpace`.
+ */
+export declare function loadTexture(uri: string, colorSpace?: ColorSpace): Texture;

package/dist/types/react-planner/utils/three-materials.d.ts

@@ -0,0 +1,33 @@
+import { Object3D, Texture } from "three";
+/**
+ * Mark a texture as holding colour rather than data.
+ *
+ * Image files store colour sRGB-encoded, but lighting has to happen in linear
+ * space — the renderer only knows to convert if the texture says so. Left at
+ * the default, an albedo map renders washed out and the wrong brightness.
+ * Normal/roughness/metalness maps are numbers, not colour, and must stay
+ * linear: those get `NoColorSpace`.
+ */
+export declare function asColorMap<T extends Texture>(texture: T): T;
+export declare function asDataMap<T extends Texture>(texture: T): T;
+/**
+ * Bring a freshly imported model in line with how the viewer lights the scene.
+ *
+ * Model files describe their materials in whatever the exporting tool used,
+ * and the loaders reproduce that faithfully — which is why an .obj arrives
+ * Phong and a .glb arrives Standard. Anything already physically based is left
+ * alone beyond its colour spaces; the rest is converted so one lighting rig
+ * can light all of it consistently.
+ */
+export declare function normalizeImportedMaterials<T extends Object3D>(object: T): T;
+interface ShadowOptions {
+    cast?: boolean;
+    receive?: boolean;
+}
+/**
+ * Contact shadows are most of what makes furniture look like it's standing on
+ * the floor rather than pasted over it. Floors only receive — a flat surface
+ * casting onto itself is all acne and no shadow.
+ */
+export declare function enableShadows<T extends Object3D>(object: T, { cast, receive }?: ShadowOptions): T;
+export {};

package/dist/types/react-planner/utils/threeCSG.es6.d.ts

@@ -21,7 +21,7 @@ declare class Polygon {
     clone(): Polygon;
     flip(): this;
     classifyVertex(vertex: THREE.Vector3Like): 0 | 1 | 2;
-    classifySide(polygon: Polygon): 0 | 1 | 2 | 3;
+    classifySide(polygon: Polygon): 0 | 1 | 3 | 2;
     splitPolygon(polygon: Polygon, coplanar_front: any, coplanar_back: any, front: any, back: any): void;
 }
 declare class Node {

package/dist/types/react-planner/utils/wall-miter.d.ts

@@ -0,0 +1,53 @@
+export declare const MITER_LIMIT = 4;
+export interface MiterShifts {
+    /** Shift along the wall axis for the +y (local top) side. Positive cuts the
+     *  corner back into the wall, negative extends it past the vertex. */
+    topShift: number;
+    /** Same, for the −y (local bottom) side. */
+    botShift: number;
+}
+/**
+ * Compute miter shifts at one end of a wall.
+ *
+ * - axisDirAway: unit vector from `vertex` toward the wall's OTHER end.
+ * - perpTop: the wall's local +y direction in world coords (fixed for both
+ *   ends of the wall — 90° CCW from the wall's start→end direction).
+ *
+ * Independent shifts on the two perpendicular sides let the wall's end become
+ * a diagonal miter cut instead of a straight rectangle end.
+ */
+export declare function miterShifts(currentLineID: string, vertex: any, axisDirAway: {
+    x: number;
+    y: number;
+}, perpTop: {
+    x: number;
+    y: number;
+}, layer: any, halfThickness: number, miterLimit?: number): MiterShifts;
+export interface WallGeometry {
+    /** Endpoint the local frame starts from (the smaller-x one). */
+    vStart: any;
+    vEnd: any;
+    /** Centerline length, vertex to vertex. */
+    length: number;
+    thickness: number;
+    halfThickness: number;
+    /** Local-frame x of the four corners. The wall is the quadrilateral
+     *  (topStart, +h) (topEnd, +h) (botEnd, −h) (botStart, −h). */
+    topStart: number;
+    topEnd: number;
+    botStart: number;
+    botEnd: number;
+}
+/**
+ * The wall as it is actually drawn: a quadrilateral whose ends are diagonal
+ * miter cuts. Everything is in the wall's local frame — x runs along the wall
+ * from the smaller-x endpoint, y is perpendicular with +y = 90° CCW from the
+ * wall direction. `viewer2d/Line` establishes exactly this frame, which is why
+ * the start/end ordering below has to match it.
+ *
+ * The two face lengths a floor plan quotes as "inside" and "outside" are
+ * `topEnd - topStart` and `botEnd - botStart`: a corner cuts one face back by
+ * the miter length and extends the other past the vertex by the same amount,
+ * so they straddle the centerline length.
+ */
+export declare function wallGeometry(element: any, layer: any): WallGeometry | null;

package/dist/types/react-planner/utils/zoom.d.ts

@@ -1,5 +1,5 @@
-export declare const MIN_ZOOM = 0.6;
+export declare const MIN_ZOOM = 0.25;
 export declare const MAX_ZOOM = 5;
-export declare const SVG_MIN_ZOOM = 0.6;
+export declare const SVG_MIN_ZOOM = 0.25;
 export declare const SVG_MAX_ZOOM = 5;
 export declare function zoomToPercentage(zoom: number): number;

package/dist/types/react-planner/viewer2d/Area.d.ts

@@ -3,6 +3,12 @@ interface AreaProps {
     area: any;
     layer: any;
     catalog: Catalog;
+    /** Which of the two passes this is. Fills and labels are drawn separately
+     *  so every label lands above every fill — a surface laid over a room is
+     *  meant to cover the room's floor, but not to swallow its name. Both
+     *  passes iterate the same ordered list in
+     *  [Layer.tsx](src/react-planner/viewer2d/Layer.tsx). */
+    part?: "fill" | "label";
 }
-export default function Area({ layer, area, catalog }: AreaProps): import("react/jsx-runtime").JSX.Element;
+export default function Area({ layer, area, catalog, part, }: AreaProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/types/react-planner/viewer2d/Grids.d.ts

@@ -1,5 +1,5 @@
 interface GridsProps {
     scene: any;
 }
-export default function Grids({ scene }: GridsProps): import("react/jsx-runtime").JSX.Element;
+export default function Grids({ scene }: GridsProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/types/react-planner/viewer2d/Ruler.d.ts

@@ -3,7 +3,12 @@ interface RulerProps {
     length: number;
     unit: string;
     transform: string;
+    /** Which side of the rule the measurement sits on. "below" is for a ruler
+     *  drawn under the thing it measures, so the label falls away from it
+     *  instead of landing on top of it. */
+    labelPlacement?: "above" | "below";
 }
-declare function Ruler({ length, unit, transform }: RulerProps): import("react/jsx-runtime").JSX.Element;
+export declare const formatDistance: (length: number, unit: string) => string;
+declare function Ruler({ length, unit, transform, labelPlacement, }: RulerProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Ruler>;
 export default _default;

package/dist/types/react-planner/viewer2d/SelectionToolbar.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface SelectionToolbarProps {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * Floating action bar for the current selection. It is plain HTML positioned
+ * over the SVG — the element's rendered bounding box is read straight from the
+ * DOM, which keeps it correct for any catalog element whatever the zoom, pan
+ * or rotation.
+ */
+declare const SelectionToolbar: ({ containerRef }: SelectionToolbarProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SelectionToolbar;

package/dist/types/react-planner/viewer2d/WallHoverHandles.d.ts

@@ -0,0 +1,13 @@
+interface WallHoverHandlesProps {
+    layer: any;
+}
+/**
+ * Endpoint handles for the wall currently under the pointer — drag one to
+ * lengthen or shorten the wall, no selection needed.
+ *
+ * They render as the layer's last child rather than inside the wall's own
+ * group: SVG has no z-index, only document order, so anything drawn from
+ * inside the wall would be painted over by walls and items that come later.
+ */
+export default function WallHoverHandles({ layer }: WallHoverHandlesProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/react-planner/viewer3d/selection-gizmo.d.ts

@@ -0,0 +1,57 @@
+import * as THREE from "three";
+export type GizmoHandle = "rotate" | "lift";
+export interface GizmoTarget {
+    /** Centre of the item's footprint, in world space. */
+    centre: THREE.Vector3;
+    /** Floor the item stands on, in world space. */
+    floorY: number;
+    /** Where the lift handle sits — around the middle of the item. */
+    handleY: number;
+    /** Half the footprint's diagonal. */
+    radius: number;
+    /** The item's heading, so the ring's arrow reads as its front. */
+    rotationY: number;
+    /** Underside of the item, for deciding whether it is off the floor at all. */
+    bottomY: number;
+    /** Whether the lift handle is being dragged right now. */
+    lifting: boolean;
+}
+export default class SelectionGizmo {
+    readonly group: THREE.Group<THREE.Object3DEventMap>;
+    /** Turns with the item: the ring and the arrow marking its front. */
+    private readonly base;
+    private readonly ring;
+    private readonly rotateGrab;
+    private readonly rotateArrow;
+    /** Always faces the camera, always the same size on screen. */
+    private readonly lift;
+    private readonly liftGrab;
+    /** Dashed line from the handle down to the floor, when the item is lifted. */
+    private readonly plumb;
+    private readonly plumbTexture;
+    private readonly materials;
+    private readonly geometries;
+    private readonly textures;
+    constructor();
+    private keep;
+    private keepTexture;
+    /**
+     * Place the gizmo around `target`, or hide it when there is nothing
+     * selected. `worldPerPixel` converts a screen size at a given distance into
+     * world units, which is what keeps the lift handle the same size however far
+     * away the camera is.
+     */
+    update(target: GizmoTarget | null, camera: THREE.Camera, worldPerPixel: (distance: number) => number): void;
+    /**
+     * The line that says how far off the floor the item is. Drawn from the
+     * handle straight down to where the ring is, for the length of the lift
+     * drag only — it answers "how high am I putting this", which is a question
+     * that stops being asked the moment the handle is let go. It also needs a
+     * gap to describe: an item still sitting on the floor doesn't get one.
+     */
+    private updatePlumb;
+    /** Which handle, if any, a ray hits. The lift handle wins ties: it sits on
+     *  top of the ring and is the smaller target. */
+    pick(raycaster: THREE.Raycaster): GizmoHandle | null;
+    dispose(): void;
+}

package/dist/types/react-planner/viewer3d/viewer3d.d.ts

@@ -9,6 +9,7 @@ interface Viewer3DProps {
         [key: string]: any;
     };
     catalog: Catalog;
+    showGrid: boolean;
 }
 export default class Scene3DViewer extends React.Component<Viewer3DProps> {
     private canvasWrapperRef;
@@ -23,8 +24,78 @@ export default class Scene3DViewer extends React.Component<Viewer3DProps> {
     private lastMousePosition;
     private mouseDownEvent;
     private mouseUpEvent;
+    private lastBoundingBox;
+    private userMovedCamera;
+    private sun;
+    private shadowsDirtyUntil;
+    private gizmo;
+    private gizmoDrag;
+    private gizmoMoveEvent;
+    private gizmoUpEvent;
+    private readonly scratchBox;
+    private readonly scratchVector;
+    private readonly scratchSize;
+    private gizmoRadiusFor;
+    private gizmoRadius;
     constructor(props: Viewer3DProps);
     componentDidMount(): void;
+    /** World units one screen pixel covers at `distance` from the camera. */
+    private worldPerPixel;
+    /** The item the gizmo should be wrapped around, if there is one. */
+    private selectedItemTarget;
+    private beginGizmoDrag;
+    /**
+     * Move the item itself rather than the store: a drag is one gesture and
+     * should be one entry in the history, and an altitude change rebuilds the
+     * item's whole model — neither is something to do per mouse move. The store
+     * hears about it once, when the drag ends.
+     */
+    private updateGizmoDrag;
+    private endGizmoDrag;
+    /**
+     * Aim the sun at the plan and size its shadow frustum to cover it.
+     *
+     * A directional light shadows through an orthographic camera, and anything
+     * outside that box simply casts nothing — so the box has to follow the plan
+     * as it grows. Sizing it to the sphere around the bounding box means the
+     * coverage holds from any angle.
+     */
+    private positionSun;
+    /**
+     * Re-render the shadow map.
+     *
+     * Not just on the next frame: meshes and their textures arrive over the
+     * following moments, so keep it refreshing for a beat rather than baking
+     * shadows for a scene that is still half loaded.
+     */
+    private invalidateShadows;
+    /**
+     * Bound the dolly range to the size of what's being looked at, so you can
+     * neither fly halfway to the sun nor end up inside a wall.
+     *
+     * Re-derived when the extent changes, because the box measured at mount is
+     * the grid's — the size of the whole scene rather than of the plan drawn in
+     * it — and limits taken from that stop the camera well short of a small
+     * plan.
+     */
+    private applyZoomLimits;
+    /**
+     * Dolly toward (factor > 1) or away from (factor < 1) the orbit target.
+     * OrbitControls' own min/maxDistance still bound the result, so the buttons
+     * can't push the camera anywhere the scroll wheel couldn't.
+     */
+    zoomBy(factor: number): void;
+    /**
+     * Frame the whole plan: keep looking from the current direction, but re-aim
+     * at the plan's center and back off far enough for it to fit.
+     */
+    fitToScene(): void;
+    /**
+     * Re-aim at the plan's center and back off far enough to fit it in frame.
+     * `direction` is where the camera sits relative to that center; omitted, it
+     * keeps looking from wherever it already is.
+     */
+    private frameScene;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: Viewer3DProps): void;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/dist/types/shared-style.d.ts

@@ -1,6 +1,9 @@
 export declare const COLORS: {
     white: string;
     black: string;
+    wall: string;
+    threeBG: string;
+    canvasBG: string;
 };
 export declare const MATERIAL_COLORS: {
     500: {
@@ -53,6 +56,9 @@ declare const SharedStyle: {
     COLORS: {
         white: string;
         black: string;
+        wall: string;
+        threeBG: string;
+        canvasBG: string;
     };
     MATERIAL_COLORS: {
         500: {