@ahrowe/ui 0.25.1 → 0.26.0

package/dist/types/package/common/roomDrawer/roomDrawer.types.d.ts

@@ -1,20 +1,300 @@
-export type Tool = 'select' | 'rect' | 'polygon';
-export interface Point {
-    x: number;
-    y: number;
+import { CSSProperties, ReactNode } from 'react';
+import { FloorPlan, OpeningKind, PlanParseResult, PlanPoint, PlanRoom, PlanSelection, PlanView } from '../floorPlan';
+import { IconContent } from '../types/icon.types';
+import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';
+/**
+ * The drawing tools.
+ *
+ * Each opening kind is its own tool rather than one opening tool with a kind sub-mode:
+ * that is one less piece of state, one less prop to wire up, and one less way to be in
+ * a mode you did not realise you were in.
+ *
+ * There is deliberately no "room" tool. Rooms are the enclosed faces the walls form, so
+ * drawing a closed shape with `Rect` or `Wall` already produces one. A mode that
+ * declared which walls belonged to which room would reintroduce exactly the ownership
+ * relation that made a door unable to cut a shared wall in the first place.
+ */
+export type RoomDrawerTool = 'select' | 'wall' | 'rect' | 'door' | 'window' | 'archway' | 'measure';
+export type RoomDrawerChangeReason = 'draw-wall' | 'draw-rect' | 'move-node' | 'move-wall' | 'move-room' | 'nudge' | 'add-opening' | 'move-opening' | 'edit-opening' | 'edit-room' | 'edit-wall' | 'delete' | 'add-floor' | 'duplicate-floor' | 'remove-floor' | 'rename-floor' | 'move-floor' | 'edit-floor' | 'clear' | 'import' | 'undo' | 'redo' | 'external';
+export interface RoomDrawerChangeMeta {
+    reason: RoomDrawerChangeReason;
+    /**
+     * `false` for the intermediate values emitted while a pointer gesture is still in
+     * flight, `true` for the one that is also pushed onto the undo stack. `onChangeEnd`
+     * only ever fires with `true`.
+     */
+    committed: boolean;
+    /** Ids of whatever the change touched, for syncing an external selection. */
+    targetIds: string[];
 }
-export interface RoomData {
-    id: string;
-    name: string;
-    points: Point[];
+/** Every string the drawer's own chrome renders, for localisation. */
+export interface RoomDrawerLabels {
+    select?: string;
+    wall?: string;
+    rect?: string;
+    measure?: string;
+    door?: string;
+    window?: string;
+    archway?: string;
+    undo?: string;
+    redo?: string;
+    download?: string;
+    upload?: string;
+    underlay?: string;
+    addFloor?: string;
+    floorName?: string;
+    duplicateFloor?: string;
+    deleteFloor?: string;
+    floorHeight?: string;
+    moveFloorUp?: string;
+    moveFloorDown?: string;
+    /** The inspector's noun for a floor, shown when nothing is selected. */
+    selectedFloor?: string;
+    /** Shown in the hint line when an opened file could not be read at all. */
+    importFailed?: string;
+    snap?: string;
+    angleLock?: string;
+    grid?: string;
+    zoomIn?: string;
+    zoomOut?: string;
+    fit?: string;
+    roomName?: string;
+    addCorner?: string;
+    thickness?: string;
+    width?: string;
+    sill?: string;
+    head?: string;
+    deleteSelection?: string;
+    /** Shown when several things are selected. `{count}` is replaced with the number. */
+    selectedCount?: string;
+    /** What the inspector calls the current selection. */
+    selectedNothing?: string;
+    selectedRoom?: string;
+    selectedWall?: string;
+    selectedCorner?: string;
+    /** Overrides the opening's own kind, which is used by default. */
+    selectedOpening?: string;
+    hintSelect?: string;
+    hintWall?: string;
+    hintRect?: string;
+    hintMeasure?: string;
+    hintOpening?: string;
 }
-export interface DoorData {
-    id: string;
-    roomId: string;
-    wallIndex: number;
-    t: number;
-    width: number;
+/** Every icon in the chrome is overridable. */
+export interface RoomDrawerIcons {
+    select?: IconContent;
+    wall?: IconContent;
+    rect?: IconContent;
+    measure?: IconContent;
+    door?: IconContent;
+    window?: IconContent;
+    archway?: IconContent;
+    undo?: IconContent;
+    redo?: IconContent;
+    download?: IconContent;
+    upload?: IconContent;
+    underlay?: IconContent;
+    addFloor?: IconContent;
+    duplicateFloor?: IconContent;
+    moveFloorUp?: IconContent;
+    moveFloorDown?: IconContent;
+    snap?: IconContent;
+    angleLock?: IconContent;
+    grid?: IconContent;
+    zoomIn?: IconContent;
+    zoomOut?: IconContent;
+    fit?: IconContent;
+    delete?: IconContent;
 }
-export interface RoomDrawerProps {
+export type RoomDrawerSlots = 'root' | 'toolbar' | 'toolButton' | 'toolIcon' | 'viewControls' | 'viewButton' | 'zoomLabel' | 'canvasWrapper' | 'canvas' | 'grid' | 'rooms' | 'roomFill' | 'roomLabel' | 'walls' | 'wallBody' | 'openings' | 'opening' | 'overlay' | 'measureLine' | 'floorBar' | 'floorTab' | 'inspector' | 'inspectorLabel' | 'inspectorField' | 'hint';
+export interface RoomDrawerHandle {
+    /** The current plan, read synchronously. Useful in uncontrolled mode. */
+    getPlan: () => FloorPlan;
+    /** Replaces the plan. Pushes one history entry unless `resetHistory` is set. */
+    setPlan: (plan: FloorPlan, options?: {
+        resetHistory?: boolean;
+    }) => void;
+    /** Empties the plan, as one history entry. */
+    clear: () => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    /** Drops past and future without touching the plan. */
+    clearHistory: () => void;
+    /** The floor being edited, and switching to another. */
+    getFloorId: () => string;
+    setFloorId: (floorId: string) => void;
+    /** Adds an empty storey above the current one and switches to it. Returns its id. */
+    addFloor: (options?: {
+        label?: string;
+    }) => string;
+    /** Copies the current storey, geometry and all, and switches to the copy. */
+    duplicateFloor: () => string | null;
+    /** Removes a storey. Refuses to remove the last one. */
+    removeFloor: (floorId?: string) => void;
+    renameFloor: (floorId: string, label: string) => void;
+    /** Moves a storey up or down the stack, re-stacking the elevations behind it. */
+    moveFloor: (floorId: string, toIndex: number) => void;
+    /** Storey height in millimetres. Everything above moves to suit. */
+    setFloorHeight: (floorId: string, heightMm: number) => void;
+    /**
+     * Removes every ruler measurement. They are view state, not plan data, so they never
+     * reach `onChange`, a file, or the undo stack.
+     */
+    clearMeasurements: () => void;
+    /** Writes the current plan to a JSON file, as the download button does. */
+    download: (fileName?: string) => void;
+    /**
+     * Reads JSON text as a plan and loads it, as one undoable entry. Returns what it made
+     * of the text: a `null` plan means nothing was loaded. Use it to accept a file from
+     * your own UI, a drop target, or a server.
+     */
+    loadJson: (text: string) => PlanParseResult;
+    /** Everything currently selected, in selection order. Empty when nothing is. */
+    getSelection: () => PlanSelection[];
+    /** Replaces the selection. A single entry or `null` is accepted for convenience. */
+    select: (selection: readonly PlanSelection[] | PlanSelection | null) => void;
+    /** Adds to, removes from, or toggles entries without replacing the rest. */
+    addToSelection: (selection: readonly PlanSelection[] | PlanSelection) => void;
+    toggleSelection: (entry: PlanSelection) => void;
+    selectAll: () => void;
+    /** Deletes everything selected, with the same rules as the Delete key. */
+    deleteSelection: () => void;
+    getView: () => PlanView;
+    setView: (view: PlanView) => void;
+    zoomBy: (factor: number) => void;
+    /** Fits the whole plan into the viewport. */
+    fitToContent: (options?: {
+        padding?: number;
+    }) => void;
+    /** Screen (client) coordinates to world, and back. */
+    toWorld: (clientX: number, clientY: number) => PlanPoint;
+    toScreen: (point: PlanPoint) => {
+        x: number;
+        y: number;
+    };
+    getSvgElement: () => SVGSVGElement | null;
+}
+export interface RoomDrawerProps extends Omit<HtmlProps<HTMLDivElement>, 'onChange' | 'onSelect' | 'defaultValue'> {
+    /** Controlled plan. Omit for uncontrolled. */
+    value?: FloorPlan;
+    /** Initial plan when uncontrolled. Defaults to an empty single-floor plan. */
+    defaultValue?: FloorPlan;
+    /**
+     * Fires for every mutation, including the intermediate values emitted during a drag
+     * (`meta.committed === false`), so a controlled parent renders live feedback. Mirrors
+     * `Slider`'s `onChange` / `onChangeEnd` pair.
+     */
+    onChange?: (plan: FloorPlan, meta: RoomDrawerChangeMeta) => void;
+    /** Fires once per completed gesture or discrete edit, always with `committed: true`. */
+    onChangeEnd?: (plan: FloorPlan, meta: RoomDrawerChangeMeta) => void;
+    /** Id of the floor being edited. Controlled; pair it with `onFloorChange`. */
+    floorId?: string;
+    /** Id of the floor to start on. Uncontrolled. Defaults to the lowest. */
+    defaultFloorId?: string;
+    onFloorChange?: (floorId: string) => void;
+    /** The floor tabs and their add button. Default `true`. */
+    showFloorBar?: boolean;
+    /**
+     * Trace the storey below behind the one being edited, so walls can be lined up between
+     * floors. Default `true`; the toolbar toggle can still turn it off.
+     */
+    showUnderlay?: boolean;
+    tool?: RoomDrawerTool;
+    defaultTool?: RoomDrawerTool;
+    onToolChange?: (tool: RoomDrawerTool) => void;
+    /** Restricts and orders the toolbar. Defaults to all six tools. */
+    tools?: RoomDrawerTool[];
+    /**
+     * Controlled selection. An array, because the drawer supports selecting several things
+     * at once; a single selection is a one-element array.
+     */
+    selection?: readonly PlanSelection[];
+    defaultSelection?: readonly PlanSelection[];
+    onSelectionChange?: (selection: PlanSelection[]) => void;
+    /**
+     * Allow selecting more than one thing, by Ctrl/Cmd-clicking or by dragging a marquee
+     * across empty canvas with the select tool. Default `true`.
+     */
+    multiSelect?: boolean;
+    onHoverChange?: (target: PlanSelection | null) => void;
+    view?: PlanView;
+    defaultView?: PlanView;
+    onViewChange?: (view: PlanView) => void;
+    /** Screen pixels per millimetre. */
+    minZoom?: number;
+    maxZoom?: number;
+    /** Fit the plan into the viewport on mount, and when it first becomes non-empty. */
+    fitOnMount?: boolean;
+    /** Grid spacing in millimetres (default 100, i.e. 10cm). */
+    gridSize?: number;
+    showGrid?: boolean;
+    /** Snap to the grid and to existing geometry. Alt inverts it for one gesture. */
+    snap?: boolean;
+    /**
+     * Latch angle lock on, so drawing is constrained to multiples of `constrainAngle`
+     * without holding Shift. Shift then momentarily RELEASES the lock. Default `false`.
+     */
+    angleLock?: boolean;
+    /** The angle step in degrees that angle lock snaps to (default 45). */
+    constrainAngle?: number;
+    /** Draw the construction lines explaining what the pointer snapped to (default `true`). */
+    showSnapGuides?: boolean;
+    /** Millimetres. Applied to newly drawn walls. */
+    wallThickness?: number;
+    wallHeight?: number;
+    /** Defaults for newly placed openings, per kind. */
+    openingDefaults?: Partial<Record<OpeningKind, {
+        width?: number;
+        sill?: number;
+        head?: number;
+    }>>;
+    showMeasurements?: boolean;
+    formatLength?: (lengthMm: number) => string;
+    formatArea?: (areaMm2: number) => string;
+    showToolbar?: boolean;
+    showInspector?: boolean;
+    showHint?: boolean;
+    showHistoryControls?: boolean;
+    /** Download and open buttons in the toolbar. Default `true`. */
+    showFileControls?: boolean;
+    /**
+     * Name for the downloaded file, with `.json` appended if it is missing. Defaults to the
+     * plan's own `name`, or `floor-plan.json`.
+     */
+    fileName?: string;
+    /**
+     * Fires after every file the user opens, whether it worked or not. `issues` is empty
+     * only for a file that needed no repair; see `planFromJson`. Without this the drawer
+     * still reports a bad file in its hint line.
+     */
+    onImport?: (result: PlanParseResult) => void;
+    /**
+     * `'internal'` keeps an undo stack inside the component. `'none'` disables it and
+     * hides the buttons, for a consumer that owns its own history.
+     */
+    historyMode?: 'internal' | 'none';
+    historyLimit?: number;
+    onHistoryChange?: (state: {
+        canUndo: boolean;
+        canRedo: boolean;
+    }) => void;
+    /** View and select, but no edits. */
+    readOnly?: boolean;
+    disabled?: boolean;
+    /** Height of the canvas, any CSS length. */
+    canvasHeight?: string;
+    getRoomColor?: (room: PlanRoom, area: number) => string | undefined;
+    renderRoomLabel?: (room: PlanRoom | null, context: {
+        area: number;
+        faceId: string;
+    }) => ReactNode;
+    labels?: RoomDrawerLabels;
+    icons?: RoomDrawerIcons;
+    'aria-label'?: string;
     className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<RoomDrawerSlots>;
+    styles?: SlotStyles<RoomDrawerSlots>;
 }

package/dist/types/package/common/roomDrawer/usePlanHistory.d.ts

@@ -0,0 +1,24 @@
+import { FloorPlan } from '../floorPlan';
+import { RoomDrawerChangeReason } from './roomDrawer.types';
+export interface PlanHistory {
+    present: FloorPlan;
+    canUndo: boolean;
+    canRedo: boolean;
+    /** Stashes the current plan as the snapshot a later `endGesture` would restore to. */
+    beginGesture: () => void;
+    /** Replaces the present mid-gesture. Pushes nothing. */
+    updateGesture: (plan: FloorPlan) => void;
+    /** Pushes the stashed snapshot, if the gesture actually changed anything. */
+    endGesture: () => boolean;
+    /** Discards the gesture and restores the stashed snapshot. */
+    cancelGesture: () => FloorPlan | null;
+    /** A discrete edit: pushes and replaces atomically. */
+    commit: (plan: FloorPlan, reason: RoomDrawerChangeReason, targetIds?: string[]) => void;
+    /** Replaces the present without touching history, for an externally driven value. */
+    replace: (plan: FloorPlan) => void;
+    undo: () => FloorPlan | null;
+    redo: () => FloorPlan | null;
+    clearHistory: () => void;
+    isGestureActive: () => boolean;
+}
+export declare function usePlanHistory(initial: FloorPlan, limit?: number): PlanHistory;

package/dist/types/package/common/roomViewer/index.d.ts

@@ -1 +1,2 @@
 export { default } from './roomViewer';
+export * from './roomViewer.types';

package/dist/types/package/common/roomViewer/roomViewer.d.ts

@@ -1,3 +1,10 @@
-import { RoomViewerProps } from './roomViewer.types';
-declare function RoomViewer({ data }: RoomViewerProps): import("react/jsx-runtime").JSX.Element;
+import { RoomViewerHandle, RoomViewerProps } from './roomViewer.types';
+/**
+ * Read-only view of a floor plan.
+ *
+ * It renders the same `planCanvas` the drawer does, from the same `FloorPlan`, so the
+ * two cannot drift apart. Selection and hover are React state rather than classes pushed
+ * onto DOM nodes, which is what lets them be controlled from outside.
+ */
+declare const RoomViewer: import('react').ForwardRefExoticComponent<RoomViewerProps & import('react').RefAttributes<RoomViewerHandle>>;
 export default RoomViewer;

package/dist/types/package/common/roomViewer/roomViewer.types.d.ts

@@ -1,10 +1,89 @@
-import { default as React } from 'react';
-export interface RoomViewerFloor {
-    /** Display label shown above the floor plan (e.g. "Ground Floor") */
-    label: string;
-    /** The SVG floor plan to render for this floor */
-    data: React.ReactNode;
-}
-export interface RoomViewerProps {
-    data?: RoomViewerFloor[];
+import { CSSProperties, ReactNode } from 'react';
+import { DerivedRoom, FloorPlan, PlanRoom, PlanView } from '../floorPlan';
+import { IconContent } from '../types/icon.types';
+import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';
+export type RoomViewerSlots = 'root' | 'floorBar' | 'floorTab' | 'canvasWrapper' | 'canvas' | 'grid' | 'rooms' | 'roomFill' | 'roomLabel' | 'walls' | 'wallBody' | 'openings' | 'opening' | 'viewControls' | 'viewButton' | 'empty';
+export interface RoomViewerLabels {
+    /** Accessible name for the floor strip. */
+    floors?: string;
+    zoomIn?: string;
+    zoomOut?: string;
+    fit?: string;
+    empty?: string;
+    /** Announced when a room is selected. `{name}` and `{area}` are replaced. */
+    selectedRoom?: string;
+    /** Announced when the selection is cleared. */
+    noRoomSelected?: string;
+}
+export interface RoomViewerIcons {
+    zoomIn?: IconContent;
+    zoomOut?: IconContent;
+    fit?: IconContent;
+}
+export interface RoomViewerHandle {
+    /** Fits the active floor into the viewport. */
+    fitToContent: (options?: {
+        padding?: number;
+    }) => void;
+    getView: () => PlanView;
+    setView: (view: PlanView) => void;
+    zoomBy: (factor: number) => void;
+    /** Selects a room, or clears the selection with `null`. */
+    select: (roomId: string | null) => void;
+    getFloorId: () => string | null;
+    setFloorId: (floorId: string) => void;
+    /** The live `<svg>`, for measuring or screenshotting. */
+    getSvgElement: () => SVGSVGElement | null;
+}
+export interface RoomViewerProps extends Omit<HtmlProps<HTMLDivElement>, 'onSelect'> {
+    /**
+     * The plan to display, floors and all. This replaces the old `data` prop, which took
+     * pre-rendered SVG: that could not be selected, measured or re-themed, and nothing
+     * could be shared with the drawer.
+     */
+    plan?: FloorPlan;
+    /** Which storey is showing. Controlled; pair with `onFloorChange`. */
+    activeFloorId?: string;
+    defaultActiveFloorId?: string;
+    onFloorChange?: (floorId: string) => void;
+    /** Controlled selection. `null` is a real value here: nothing selected. */
+    selectedRoomId?: string | null;
+    defaultSelectedRoomId?: string | null;
+    onSelect?: (roomId: string | null, room: DerivedRoom | null, floorId: string) => void;
+    hoveredRoomId?: string | null;
+    onHoverChange?: (roomId: string | null) => void;
+    view?: PlanView;
+    defaultView?: PlanView;
+    onViewChange?: (view: PlanView) => void;
+    /** Rooms respond to pointer and keyboard. Default `true`. */
+    interactive?: boolean;
+    /** Drag to pan, wheel and pinch to zoom. Default `true`. */
+    pannable?: boolean;
+    /** Fit the plan into view once it is measured. Default `true`. */
+    fitOnMount?: boolean;
+    showFloorBar?: boolean;
+    showViewControls?: boolean;
+    showGrid?: boolean;
+    showRoomLabels?: boolean;
+    /** Door leaves, swing arcs and window symbols. Default `true`. */
+    showOpeningSymbols?: boolean;
+    getRoomColor?: (room: PlanRoom, area: number) => string | undefined;
+    renderRoomLabel?: (room: PlanRoom | null, context: {
+        area: number;
+        faceId: string;
+    }) => ReactNode;
+    getRoomLabel?: (room: PlanRoom | null, context: {
+        area: number;
+    }) => string;
+    formatArea?: (areaMm2: number) => string;
+    /** Canvas height. A number is pixels. Default 360. */
+    height?: number | string;
+    /** Shown when there is no plan, or the plan has nothing in it. */
+    emptyState?: ReactNode;
+    labels?: RoomViewerLabels;
+    icons?: RoomViewerIcons;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<RoomViewerSlots>;
+    styles?: SlotStyles<RoomViewerSlots>;
 }

package/dist/types/package/index.d.ts

@@ -55,6 +55,7 @@ export { default as Flip } from './common/flip';
 export * from './common/flip';
 export { default as FloatingMenu } from './common/floatingMenu';
 export * from './common/floatingMenu';
+export * from './common/floorPlan';
 export { default as IconPicker } from './common/iconPicker';
 export * from './common/iconPicker';
 export { default as IdleManager } from './common/idleManager';

package/docs/CLAUDE.md

@@ -143,6 +143,7 @@ FontAwesome internals, so they still take an `IconDefinition` only.
 @Fab.md
 @Flip.md
 @FloatingMenu.md
+@FloorPlan.md
 @FormValidator.md
 @FormValidatorGroup.md
 @IconPicker.md

package/docs/ConfigProvider.md

@@ -94,6 +94,7 @@ Each entry is a `Partial<...Props>`, so any of that component's props can be def
 - **Form inputs:** `Input` · `Textarea` · `NumberInput` · `Dropdown` · `InputDropdown` · `Checkbox` · `Switch` · `RadioGroup` · `DatePicker` · `OptionPicker` · `OtpInput`
 - **Display:** `Button` · `ActionButtons` · `Badge` · `Chip` · `Card` · `SectionHeader` · `Skeleton` · `Accordion` · `Divider` · `Timer`
 - **Overlays:** `ConfirmModal` · `Modal` · `FloatingMenu` · `Popover`
+- **Editors:** `RoomDrawer`, `RoomViewer`
 
 ```tsx
 <ConfigProvider

package/docs/Dropdown.md

@@ -64,4 +64,4 @@ const statusValidator = new FormValidator('', [Validators.required()]);
 
 The list is rendered through a portal and tracks the trigger across scroll, so it always escapes clipping ancestors (cards, scroll containers, virtualized lists). It flips to open upward automatically when there's no room below, and shifts horizontally to stay within the viewport when the trigger sits near the left or right edge of the screen. It hides (without closing) if the trigger itself scrolls behind a clipping ancestor, reappearing once it's back in view. It also re-measures when its own content changes size while open, so a list that shrinks (e.g. filtered down to fewer entries) stays anchored to the trigger instead of hanging above it.
 
-**Bottom sheet:** `presentation={Presentation.Sheet}` drops the anchoring entirely and pins the list to the bottom of the screen instead, full width up to 560px, behind a backdrop, scrolling internally past 70% of the viewport height and lifting itself above an open on-screen keyboard. Tapping the backdrop closes the list without also pressing whatever sits behind it. It is the same list with the same keyboard handling, so selection, highlighting and infinite scroll are unchanged. `Presentation.Auto` does that only when the pointer is coarse *and* the screen is under 768px wide. The default is `Presentation.Default`. A whole app can opt in with `<ConfigProvider defaultProps={{ Dropdown: { presentation: Presentation.Auto } }}>`, or for every sheet-capable component at once with `<ConfigProvider presentation={Presentation.Auto}>` — see [ConfigProvider.md](ConfigProvider.md).
+**Bottom sheet:** `presentation={Presentation.Sheet}` drops the anchoring entirely and pins the list to the bottom of the screen instead, full width up to 560px, behind a backdrop, scrolling internally past 70% of the viewport height and lifting itself above an open on-screen keyboard, shrinking to fit the space that leaves rather than running off the top of the screen. Tapping the backdrop closes the list without also pressing whatever sits behind it. It is the same list with the same keyboard handling, so selection, highlighting and infinite scroll are unchanged. `Presentation.Auto` does that only when the pointer is coarse *and* the screen is under 768px wide. The default is `Presentation.Default`. A whole app can opt in with `<ConfigProvider defaultProps={{ Dropdown: { presentation: Presentation.Auto } }}>`, or for every sheet-capable component at once with `<ConfigProvider presentation={Presentation.Auto}>` — see [ConfigProvider.md](ConfigProvider.md).

package/docs/FloatingMenu.md

@@ -67,7 +67,7 @@ import { FloatingMenu, Presentation } from '@ahrowe/ui';
 
 **Slots:** `root` `trigger` `menu` `menuContainer` `backdrop` (`backdrop` only exists while presenting as a sheet)
 
-**Bottom sheet:** with `Presentation.Sheet` the menu leaves its trigger entirely: it pins to the bottom of the screen, spans the full width up to 560px, scrolls internally past 70% of the viewport height, and dims the page behind a backdrop. Scrolling on the page behind it is locked while it's open, Escape closes it even when focus never entered it, and it lifts itself above an open on-screen keyboard. Tapping the backdrop closes the sheet and nothing else: the tap is consumed by the backdrop rather than falling through to whatever sits behind it. `Presentation.Auto` applies that only when the pointer is coarse *and* the screen is under 768px wide: pointer alone would catch touchscreen laptops, width alone would catch a narrow desktop window. Set it once for a whole app via `ConfigProvider`:
+**Bottom sheet:** with `Presentation.Sheet` the menu leaves its trigger entirely: it pins to the bottom of the screen, spans the full width up to 560px, scrolls internally past 70% of the viewport height, and dims the page behind a backdrop. Scrolling on the page behind it is locked while it's open, Escape closes it even when focus never entered it, and it lifts itself above an open on-screen keyboard, shrinking to fit the space that leaves rather than running off the top of the screen. Tapping the backdrop closes the sheet and nothing else: the tap is consumed by the backdrop rather than falling through to whatever sits behind it. `Presentation.Auto` applies that only when the pointer is coarse *and* the screen is under 768px wide: pointer alone would catch touchscreen laptops, width alone would catch a narrow desktop window. Set it once for a whole app via `ConfigProvider`:
 
 ```tsx
 <ConfigProvider defaultProps={{ FloatingMenu: { presentation: Presentation.Auto } }}>