@pascal-app/editor 1.0.0-beta.4 → 1.0.0

package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx

@@ -5,6 +5,7 @@ import { AnimatePresence, motion } from 'motion/react'
 import { forwardRef, memo, useEffect, useRef } from 'react'
 import { resolveNodeSelectionTarget } from '../../../../../lib/selection-routing'
 import useEditor from '../../../../../store/use-editor'
+import { expandSessionSelectionForNode } from '../../../../../store/use-session-groups'
 
 export function handleTreeSelection(
   e: React.MouseEvent,
@@ -48,7 +49,13 @@ export function handleTreeSelection(
     }
   }
 
-  setSelection({ selectedIds: [nodeId] })
+  if (e.altKey) {
+    setSelection({ selectedIds: [nodeId] })
+    return false
+  }
+
+  const expanded = expandSessionSelectionForNode(nodeId)
+  setSelection({ selectedIds: expanded && expanded.length > 1 ? expanded : [nodeId] })
   return false
 }
 
@@ -110,6 +117,12 @@ interface TreeNodeProps {
   isLast?: boolean
 }
 
+type TreeNodeComponent = React.ComponentType<{
+  depth: number
+  isLast?: boolean
+  nodeId: AnyNodeId
+}>
+
 // Per-kind tree-node components keyed by `node.type`. Lookup replaces
 // the legacy switch — adding a kind to this map is now the only edit
 // needed in this file (the switch's `case '<kind>':` clauses were
@@ -117,10 +130,7 @@ interface TreeNodeProps {
 // outside the registry; future work moves these to a
 // `def.presentation`-driven generic tree-node and removes this map
 // entirely).
-const treeNodeByType: Record<
-  string,
-  React.ComponentType<{ depth: number; isLast?: boolean; nodeId: AnyNodeId }>
-> = {
+const treeNodeByType: Record<string, TreeNodeComponent> = {
   building: BuildingTreeNode as React.ComponentType<{
     depth: number
     isLast?: boolean
@@ -129,6 +139,7 @@ const treeNodeByType: Record<
   cabinet: RegistryTreeNode,
   'cabinet-module': RegistryTreeNode,
   'box-vent': RegistryTreeNode,
+  'block': RegistryTreeNode,
   ceiling: CeilingTreeNode,
   chimney: ChimneyTreeNode,
   dormer: DormerTreeNode,
@@ -162,6 +173,7 @@ const treeNodeByType: Record<
   'eyebrow-vent': RegistryTreeNode,
   skylight: RegistryTreeNode,
   roof: RoofTreeNode,
+  scan: RegistryTreeNode,
   stair: StairTreeNode,
   door: DoorTreeNode,
   window: WindowTreeNode,
@@ -173,6 +185,10 @@ const treeNodeByType: Record<
   item: ItemTreeNode,
 }
 
+export function getTreeNodeComponent(nodeType: string): TreeNodeComponent {
+  return treeNodeByType[nodeType] ?? RegistryTreeNode
+}
+
 export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
   // Registry-driven row hiding (`def.tree.hidden`) — primitive boolean
   // selector so unrelated scene updates don't re-render every row.
@@ -184,8 +200,7 @@ export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: Tr
   const nodeType = useScene((state) => state.nodes[nodeId]?.type)
   if (shouldHide) return null
   if (!nodeType) return null
-  const Component = treeNodeByType[nodeType]
-  if (!Component) return null
+  const Component = getTreeNodeComponent(nodeType)
   return <Component depth={depth} isLast={isLast} nodeId={nodeId} />
 })
 

package/src/components/ui/sidebar/tab-bar.tsx

@@ -13,6 +13,12 @@ export type SidebarTab = {
   mobileIcon?: ReactNode
   /** Desktop icon shown in the vertical rail (v2 layout). */
   icon?: ReactNode
+  /**
+   * Rail entry that drives the stage instead of opening a sidebar panel:
+   * activating it hides the panel column (preserving its collapse state) and
+   * keeps the icon highlighted regardless of collapse.
+   */
+  noPanel?: boolean
 }
 
 interface TabBarProps {
@@ -75,11 +81,13 @@ export function IconRail({ tabs, activeTab, collapsed, onIconClick }: IconRailPr
   const pluginTabs = tabs.filter((tab) => pluginPanelIds.has(tab.id) || tab.id === 'plugins')
 
   const renderTab = (tab: SidebarTab) => {
-    const showActive = activeTab === tab.id && !collapsed
+    const showActive = activeTab === tab.id && (!collapsed || tab.noPanel === true)
     return (
       <Tooltip key={tab.id}>
         <TooltipTrigger asChild>
           <button
+            aria-label={tab.label}
+            aria-pressed={showActive}
             className={cn(
               'group flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-200 [&_img]:transition-[opacity,filter] [&_img]:duration-200',
               showActive

package/src/components/ui/sidebar/use-plugin-panels.tsx

@@ -12,7 +12,12 @@ import {
   useSyncExternalStore,
 } from 'react'
 import useEditor from '../../../store/use-editor'
-import { editorHostPanelRegistry, type EditorHostPanel } from '../../../lib/plugin-panels'
+import {
+  editorHostPanelRegistry,
+  type EditorHostPanel,
+  managedPluginIds,
+  showsPluginManager,
+} from '../../../lib/plugin-panels'
 import { ErrorBoundary } from '../primitives/error-boundary'
 import type { ExtraPanel } from './icon-rail'
 import { PluginsPanel } from './panels/plugins-panel'
@@ -100,6 +105,7 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
   )
   const workspaceMode = useEditor((s) => s.workspaceMode)
   const installedPlugins = useScene((s) => s.installedPlugins)
+  const readOnly = useScene((s) => s.readOnly)
   const hostIds = new Set(hostPanels?.map((p) => p.id))
 
   useEffect(() => {
@@ -126,7 +132,16 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
         pluginId: p.pluginId,
       }),
     )
+  // The manager tab is the one panel the editor contributes itself, so it is
+  // also the one that can be alone in the rail — see `showsPluginManager`.
   const manager =
-    workspaceMode === 'edit' && !hostIds.has(pluginsManagerPanel.id) ? [pluginsManagerPanel] : []
+    !hostIds.has(pluginsManagerPanel.id) &&
+    showsPluginManager({
+      managedPluginCount: managedPluginIds(registered).length,
+      readOnly,
+      workspaceMode,
+    })
+      ? [pluginsManagerPanel]
+      : []
   return [...(hostPanels ?? []), ...fromRegistry, ...manager]
 }

package/src/components/viewer/floorplan-compass-button.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import type React from 'react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
+
+export type FloorplanCompassButtonProps = {
+  northRotationDeg: number
+  onAlignNorth: () => void
+  needleRef?: React.RefObject<SVGSVGElement | null>
+}
+
+export function FloorplanCompassButton({
+  northRotationDeg,
+  onAlignNorth,
+  needleRef,
+}: FloorplanCompassButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          aria-label="Align view to north"
+          className="group pointer-events-auto absolute bottom-3 left-3 z-30 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white/85 shadow-sm backdrop-blur-md transition hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-neutral-900/85 dark:hover:bg-neutral-900"
+          onClick={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            onAlignNorth()
+          }}
+          onPointerDown={(event) => {
+            event.stopPropagation()
+          }}
+          type="button"
+        >
+          <span className="relative flex h-6 w-6 items-center justify-center rounded-full bg-[#b8b8b8] shadow-inner dark:bg-neutral-700">
+            <svg
+              aria-hidden="true"
+              className="h-6 w-6"
+              ref={needleRef}
+              style={{ transform: `rotate(${northRotationDeg}deg)` }}
+              viewBox="0 0 48 48"
+            >
+              <path d="M24 4.5 31.5 25 24 21.5 16.5 25Z" fill="#f15b5b" />
+              <path d="M24 43.5 16.5 23 24 26.5 31.5 23Z" fill="#ffffff" />
+            </svg>
+          </span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">Align view to north</TooltipContent>
+    </Tooltip>
+  )
+}

package/src/components/viewer/floorplan-preview-geometry.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, test } from 'bun:test'
+import type { FloorplanGeometry } from '@pascal-app/core'
+import {
+  clientToFloorplanPoint,
+  getFloorplanBounds,
+  padFloorplanBounds,
+  panFloorplanViewBox,
+  scaleFloorplanViewBox,
+  scaleFloorplanViewBoxBetweenClients,
+} from './floorplan-preview-geometry'
+
+describe('floorplan preview bounds', () => {
+  test('composes nested translation and rotation', () => {
+    const geometry: FloorplanGeometry = {
+      kind: 'group',
+      transform: { translate: [10, 5], rotate: Math.PI / 2 },
+      children: [
+        {
+          kind: 'rect',
+          x: 0,
+          y: 0,
+          width: 4,
+          height: 2,
+        },
+      ],
+    }
+
+    expect(getFloorplanBounds([geometry])).toEqual({
+      minX: 8,
+      minY: 5,
+      maxX: 10,
+      maxY: 9,
+    })
+  })
+
+  test('includes image rotation and dimension baselines', () => {
+    const geometries: FloorplanGeometry[] = [
+      {
+        kind: 'image',
+        url: '/symbol.png',
+        center: [2, 3],
+        width: 4,
+        height: 2,
+        rotation: Math.PI / 2,
+      },
+      {
+        kind: 'dimension',
+        start: [-3, -2],
+        end: [3, -2],
+        dimensionStart: [-4, -1],
+        dimensionEnd: [4, -1],
+        offsetNormal: [0, -1],
+        offsetDistance: 1,
+        extensionOvershoot: 0.2,
+        text: '8 m',
+      },
+    ]
+
+    expect(getFloorplanBounds(geometries)).toEqual({
+      minX: -4,
+      minY: -2,
+      maxX: 4,
+      maxY: 5,
+    })
+  })
+
+  test('pads narrow plans by a usable minimum', () => {
+    expect(padFloorplanBounds({ minX: 0, minY: 0, maxX: 0, maxY: 0 })).toEqual({
+      minX: -0.75,
+      minY: -0.75,
+      maxX: 0.75,
+      maxY: 0.75,
+    })
+  })
+
+  test('maps clients through letterboxed SVG content', () => {
+    const viewBox = { x: 0, y: 0, width: 10, height: 10 }
+    const viewport = { left: 0, top: 0, width: 1000, height: 500 }
+
+    expect(clientToFloorplanPoint(viewBox, viewport, 250, 0)).toEqual([0, 0])
+    expect(clientToFloorplanPoint(viewBox, viewport, 750, 500)).toEqual([10, 10])
+    expect(panFloorplanViewBox(viewBox, viewport, [500, 250], [550, 250])).toEqual({
+      x: -1,
+      y: 0,
+      width: 10,
+      height: 10,
+    })
+  })
+
+  test('keeps the plan point beneath a moving pinch midpoint', () => {
+    const viewBox = { x: 0, y: 0, width: 10, height: 10 }
+    const viewport = { left: 0, top: 0, width: 1000, height: 500 }
+    const next = scaleFloorplanViewBoxBetweenClients(viewBox, 0.5, viewport, [500, 250], [600, 250])
+
+    expect(next).toEqual({ x: 1.5, y: 2.5, width: 5, height: 5 })
+    expect(clientToFloorplanPoint(next, viewport, 600, 250)).toEqual([5, 5])
+  })
+
+  test('clamps zoom without changing the view box aspect ratio', () => {
+    expect(scaleFloorplanViewBox({ x: 0, y: 0, width: 100, height: 1 }, 0.01)).toEqual({
+      x: 37.5,
+      y: 0.375,
+      width: 25,
+      height: 0.25,
+    })
+  })
+})

package/src/components/viewer/floorplan-preview-geometry.ts

@@ -0,0 +1,281 @@
+import type { FloorplanGeometry, FloorplanPoint } from '@pascal-app/core'
+
+export type FloorplanBounds = {
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
+}
+
+export type FloorplanViewBox = { x: number; y: number; width: number; height: number }
+
+export type FloorplanViewport = {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+type PlanTransform = { tx: number; ty: number; rotation: number }
+
+const IDENTITY: PlanTransform = { tx: 0, ty: 0, rotation: 0 }
+const MIN_VIEWBOX_SIZE = 0.25
+const MAX_VIEWBOX_SIZE = 500
+
+function clientToViewBoxFraction(
+  viewBox: FloorplanViewBox,
+  viewport: FloorplanViewport,
+  clientX: number,
+  clientY: number,
+): FloorplanPoint {
+  const viewportWidth = Math.max(viewport.width, 1)
+  const viewportHeight = Math.max(viewport.height, 1)
+  const scale = Math.min(viewportWidth / viewBox.width, viewportHeight / viewBox.height)
+  const renderedWidth = viewBox.width * scale
+  const renderedHeight = viewBox.height * scale
+  const renderedLeft = viewport.left + (viewportWidth - renderedWidth) / 2
+  const renderedTop = viewport.top + (viewportHeight - renderedHeight) / 2
+  return [(clientX - renderedLeft) / renderedWidth, (clientY - renderedTop) / renderedHeight]
+}
+
+export function clientToFloorplanPoint(
+  viewBox: FloorplanViewBox,
+  viewport: FloorplanViewport,
+  clientX: number,
+  clientY: number,
+): FloorplanPoint {
+  const [fractionX, fractionY] = clientToViewBoxFraction(viewBox, viewport, clientX, clientY)
+  return [viewBox.x + fractionX * viewBox.width, viewBox.y + fractionY * viewBox.height]
+}
+
+export function scaleFloorplanViewBox(
+  viewBox: FloorplanViewBox,
+  factor: number,
+  anchorX = 0.5,
+  anchorY = 0.5,
+): FloorplanViewBox {
+  const minFactor = Math.max(MIN_VIEWBOX_SIZE / viewBox.width, MIN_VIEWBOX_SIZE / viewBox.height)
+  const maxFactor = Math.min(MAX_VIEWBOX_SIZE / viewBox.width, MAX_VIEWBOX_SIZE / viewBox.height)
+  const clampedFactor = Math.min(Math.max(factor, minFactor), maxFactor)
+  const width = viewBox.width * clampedFactor
+  const height = viewBox.height * clampedFactor
+  return {
+    x: viewBox.x + (viewBox.width - width) * anchorX,
+    y: viewBox.y + (viewBox.height - height) * anchorY,
+    width,
+    height,
+  }
+}
+
+export function scaleFloorplanViewBoxBetweenClients(
+  viewBox: FloorplanViewBox,
+  factor: number,
+  viewport: FloorplanViewport,
+  sourceClient: FloorplanPoint,
+  targetClient: FloorplanPoint,
+): FloorplanViewBox {
+  const sourcePoint = clientToFloorplanPoint(viewBox, viewport, sourceClient[0], sourceClient[1])
+  const [targetX, targetY] = clientToViewBoxFraction(
+    viewBox,
+    viewport,
+    targetClient[0],
+    targetClient[1],
+  )
+  const scaled = scaleFloorplanViewBox(viewBox, factor, 0, 0)
+  return {
+    ...scaled,
+    x: sourcePoint[0] - targetX * scaled.width,
+    y: sourcePoint[1] - targetY * scaled.height,
+  }
+}
+
+export function panFloorplanViewBox(
+  viewBox: FloorplanViewBox,
+  viewport: FloorplanViewport,
+  sourceClient: FloorplanPoint,
+  targetClient: FloorplanPoint,
+): FloorplanViewBox {
+  const sourcePoint = clientToFloorplanPoint(viewBox, viewport, sourceClient[0], sourceClient[1])
+  const targetPoint = clientToFloorplanPoint(viewBox, viewport, targetClient[0], targetClient[1])
+  return {
+    ...viewBox,
+    x: viewBox.x + sourcePoint[0] - targetPoint[0],
+    y: viewBox.y + sourcePoint[1] - targetPoint[1],
+  }
+}
+
+function applyTransform(point: FloorplanPoint, transform: PlanTransform): FloorplanPoint {
+  const cos = Math.cos(transform.rotation)
+  const sin = Math.sin(transform.rotation)
+  return [
+    point[0] * cos - point[1] * sin + transform.tx,
+    point[0] * sin + point[1] * cos + transform.ty,
+  ]
+}
+
+function composeTransform(
+  parent: PlanTransform,
+  child: NonNullable<Extract<FloorplanGeometry, { kind: 'group' }>['transform']>,
+): PlanTransform {
+  const translated = applyTransform(child.translate ?? [0, 0], parent)
+  return {
+    tx: translated[0],
+    ty: translated[1],
+    rotation: parent.rotation + (child.rotate ?? 0),
+  }
+}
+
+function includePoint(bounds: FloorplanBounds | null, point: FloorplanPoint): FloorplanBounds {
+  if (!bounds) return { minX: point[0], minY: point[1], maxX: point[0], maxY: point[1] }
+  return {
+    minX: Math.min(bounds.minX, point[0]),
+    minY: Math.min(bounds.minY, point[1]),
+    maxX: Math.max(bounds.maxX, point[0]),
+    maxY: Math.max(bounds.maxY, point[1]),
+  }
+}
+
+function includePoints(
+  bounds: FloorplanBounds | null,
+  points: readonly FloorplanPoint[],
+  transform: PlanTransform,
+): FloorplanBounds | null {
+  let next = bounds
+  for (const point of points) next = includePoint(next, applyTransform(point, transform))
+  return next
+}
+
+function geometryBounds(
+  geometry: FloorplanGeometry,
+  transform: PlanTransform,
+  bounds: FloorplanBounds | null,
+): FloorplanBounds | null {
+  switch (geometry.kind) {
+    case 'group': {
+      const nextTransform = geometry.transform
+        ? composeTransform(transform, geometry.transform)
+        : transform
+      return geometry.children.reduce(
+        (next, child) => geometryBounds(child, nextTransform, next),
+        bounds,
+      )
+    }
+    case 'polygon':
+    case 'polyline':
+    case 'hatch':
+      return includePoints(bounds, geometry.points, transform)
+    case 'rect':
+      return includePoints(
+        bounds,
+        [
+          [geometry.x, geometry.y],
+          [geometry.x + geometry.width, geometry.y],
+          [geometry.x + geometry.width, geometry.y + geometry.height],
+          [geometry.x, geometry.y + geometry.height],
+        ],
+        transform,
+      )
+    case 'circle': {
+      const center = applyTransform([geometry.cx, geometry.cy], transform)
+      return includePoints(
+        bounds,
+        [
+          [center[0] - geometry.r, center[1] - geometry.r],
+          [center[0] + geometry.r, center[1] + geometry.r],
+        ],
+        IDENTITY,
+      )
+    }
+    case 'line':
+    case 'hit-line':
+    case 'edge-handle':
+      return includePoints(
+        bounds,
+        [
+          [geometry.x1, geometry.y1],
+          [geometry.x2, geometry.y2],
+        ],
+        transform,
+      )
+    case 'text':
+      return includePoint(bounds, applyTransform([geometry.x, geometry.y], transform))
+    case 'image': {
+      const halfWidth = geometry.width / 2
+      const halfHeight = geometry.height / 2
+      const imageTransform = composeTransform(transform, {
+        translate: geometry.center,
+        rotate: geometry.rotation,
+      })
+      return includePoints(
+        bounds,
+        [
+          [-halfWidth, -halfHeight],
+          [halfWidth, -halfHeight],
+          [halfWidth, halfHeight],
+          [-halfWidth, halfHeight],
+        ],
+        imageTransform,
+      )
+    }
+    case 'endpoint-handle':
+    case 'midpoint-handle':
+    case 'move-handle':
+    case 'move-arrow':
+    case 'rotate-arrow':
+    case 'equal-spacing-badge':
+      return includePoint(bounds, applyTransform(geometry.point, transform))
+    case 'dimension-label':
+      return includePoint(bounds, applyTransform([geometry.cx, geometry.cy], transform))
+    case 'dimension':
+      return includePoints(
+        bounds,
+        [
+          geometry.start,
+          geometry.end,
+          geometry.dimensionStart ?? geometry.start,
+          geometry.dimensionEnd ?? geometry.end,
+        ],
+        transform,
+      )
+    case 'dimension-string':
+      return geometry.segments.reduce(
+        (next, segment) =>
+          includePoints(
+            next,
+            [
+              segment.start,
+              segment.end,
+              segment.dimensionStart ?? segment.start,
+              segment.dimensionEnd ?? segment.end,
+            ],
+            transform,
+          ),
+        bounds,
+      )
+    case 'path':
+      return bounds
+    default:
+      return bounds
+  }
+}
+
+export function getFloorplanBounds(
+  geometries: readonly FloorplanGeometry[],
+): FloorplanBounds | null {
+  return geometries.reduce(
+    (bounds, geometry) => geometryBounds(geometry, IDENTITY, bounds),
+    null as FloorplanBounds | null,
+  )
+}
+
+export function padFloorplanBounds(bounds: FloorplanBounds, ratio = 0.12): FloorplanBounds {
+  const width = Math.max(bounds.maxX - bounds.minX, 1)
+  const height = Math.max(bounds.maxY - bounds.minY, 1)
+  const padding = Math.max(Math.max(width, height) * ratio, 0.75)
+  return {
+    minX: bounds.minX - padding,
+    minY: bounds.minY - padding,
+    maxX: bounds.maxX + padding,
+    maxY: bounds.maxY + padding,
+  }
+}

package/src/components/viewer/floorplan-preview-navigation.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  cameraAzimuthFromFloorplanRotation,
+  floorplanRotationFromCameraAzimuth,
+  floorplanViewBoxFromNavigationPose,
+  nearestEquivalentDegrees,
+  visibleFloorplanViewWidth,
+} from './floorplan-preview-navigation'
+
+describe('floorplan preview navigation', () => {
+  test('keeps continuous compass rotations across the angle seam', () => {
+    expect(nearestEquivalentDegrees(-179, 179)).toBe(181)
+    expect(floorplanRotationFromCameraAzimuth((-179 * Math.PI) / 180, 179)).toBeCloseTo(181)
+  })
+
+  test('uses the same north-up azimuth convention as the editor', () => {
+    expect(cameraAzimuthFromFloorplanRotation(0)).toBe(0)
+    expect(cameraAzimuthFromFloorplanRotation(90)).toBeCloseTo(Math.PI / 2)
+  })
+
+  test('maps a camera pose to an aspect-correct centered view box', () => {
+    expect(
+      floorplanViewBoxFromNavigationPose(
+        {
+          source: '3d',
+          revision: 1,
+          target: [0, 0, 0],
+          azimuth: 0,
+          viewWidth: 20,
+        },
+        { x: 4, y: 3 },
+        0,
+        { width: 1000, height: 500 },
+      ),
+    ).toEqual({ x: -6, y: -2, width: 20, height: 10 })
+  })
+
+  test('reports the actual horizontal span for meet-preserved SVG view boxes', () => {
+    expect(
+      visibleFloorplanViewWidth({ x: 0, y: 0, width: 10, height: 10 }, { width: 200, height: 100 }),
+    ).toBe(20)
+  })
+})

package/src/components/viewer/floorplan-preview-navigation.ts

@@ -0,0 +1,62 @@
+import type { NavigationSyncPose } from '../../store/use-editor'
+import type { FloorplanViewBox } from './floorplan-preview-geometry'
+
+export type FloorplanPreviewViewportSize = {
+  width: number
+  height: number
+}
+
+export function nearestEquivalentDegrees(angle: number, reference: number) {
+  let next = angle
+  while (next - reference > 180) next -= 360
+  while (next - reference < -180) next += 360
+  return next
+}
+
+export function floorplanRotationFromCameraAzimuth(azimuth: number, reference: number) {
+  return nearestEquivalentDegrees((azimuth * 180) / Math.PI, reference)
+}
+
+export function cameraAzimuthFromFloorplanRotation(rotationDeg: number) {
+  return (rotationDeg * Math.PI) / 180
+}
+
+export function rotateFloorplanPoint(
+  point: { x: number; y: number },
+  rotationDeg: number,
+): { x: number; y: number } {
+  if (rotationDeg === 0) return point
+  const radians = (rotationDeg * Math.PI) / 180
+  const cos = Math.cos(radians)
+  const sin = Math.sin(radians)
+  return {
+    x: point.x * cos - point.y * sin,
+    y: point.x * sin + point.y * cos,
+  }
+}
+
+export function visibleFloorplanViewWidth(
+  viewBox: FloorplanViewBox,
+  viewport: FloorplanPreviewViewportSize,
+) {
+  const aspect = Math.max(viewport.width, 1) / Math.max(viewport.height, 1)
+  return Math.max(viewBox.width, viewBox.height * aspect)
+}
+
+export function floorplanViewBoxFromNavigationPose(
+  pose: NavigationSyncPose,
+  localCenter: { x: number; y: number },
+  sceneRotationDeg: number,
+  viewport: FloorplanPreviewViewportSize,
+): FloorplanViewBox {
+  const center = rotateFloorplanPoint(localCenter, sceneRotationDeg)
+  const aspect = Math.max(viewport.width, 1) / Math.max(viewport.height, 1)
+  const width = Math.max(pose.viewWidth, 0.001)
+  const height = width / aspect
+  return {
+    x: center.x - width / 2,
+    y: center.y - height / 2,
+    width,
+    height,
+  }
+}