@pascal-app/editor 1.0.7 → 1.1.1

package/src/components/ui/panels/node-display.ts

@@ -1,5 +1,5 @@
 import { type AnyNode, type MessageDescriptor, type PascalI18n, scriptImages } from '@pascal-app/core'
-import { displayRoomName } from '../../../lib/room-name-messages'
+import { displayRoomName } from '@pascal-app/viewer/ui'
 
 export type NodeDisplay = {
   icon: string

package/src/components/ui/panels/panel-manager.tsx

@@ -11,6 +11,8 @@ import {
   type DormerNode,
   type ElevatorNode,
   type FenceNode,
+  isMoveLocked,
+  isNodeDuplicable,
   type ItemNode,
   type RoofNode,
   type RoofSegmentNode,
@@ -26,7 +28,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useSelectedRoom, useZoneRoom } from '../../../hooks/use-selected-room'
 import { FloorOpeningPanel } from './floor-opening-panel'
 import { OpenRoomPanel, RoomPanel } from './room-panel'
-import { useIsMobile } from '../../../hooks/use-mobile'
+import { useIsMobile } from '@pascal-app/viewer/ui'
 import { shouldShowEditingControls } from '../../../lib/interaction/overlay-policy'
 import { captureElementActionOrigin, completeElementAction } from '../../../lib/room-zone-routing'
 import { sfxEmitter } from '../../../lib/sfx-bus'
@@ -155,9 +157,9 @@ function MobilePanelLayer({
         <MobileSelectionBar
           node={node}
           onDelete={handleDelete}
-          onDuplicate={handleDuplicate}
+          onDuplicate={isNodeDuplicable(node) ? handleDuplicate : undefined}
           onEdit={() => setIsSheetOpen((v) => !v)}
-          onMove={handleMove}
+          onMove={isMoveLocked(node) ? undefined : handleMove}
         />
       )}
       <MobilePanelSheet

package/src/components/ui/panels/panel-wrapper.tsx

@@ -19,7 +19,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { useIsMobile } from '../../../hooks/use-mobile'
+import { useIsMobile } from '@pascal-app/viewer/ui'
 import { NodeIconImage } from '../node-icon-image'
 import { resolveActiveExtension, toggleCard } from '../../../lib/inspector-card-mode'
 import { cn } from '../../../lib/utils'
@@ -45,7 +45,7 @@ function clamp(value: number, min: number, max: number): number {
  * `data-viewer-bounds`) so it can't slide under the sidebar or top bar.
  * Falls back to the viewport when the marker isn't found.
  */
-function getDragBounds(el: HTMLElement | null): {
+function getDragBounds(el: HTMLElement | null, inStack = false): {
   left: number
   top: number
   right: number
@@ -56,7 +56,15 @@ function getDragBounds(el: HTMLElement | null): {
   if (!rect) {
     return { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight }
   }
-  return { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom }
+  const stack = inStack ? el?.closest('[data-right-stack]') : null
+  const stackRect = stack?.getBoundingClientRect()
+  const cardRect = stack?.querySelector('[data-right-stack-card]')?.getBoundingClientRect()
+  return {
+    left: rect.left,
+    top: stackRect ? stackRect.top - DRAG_MARGIN : rect.top,
+    right: rect.right,
+    bottom: cardRect && cardRect.height > 0 ? cardRect.top : rect.bottom,
+  }
 }
 
 /**
@@ -187,7 +195,7 @@ export function PanelWrapper({
       if ((e.target as HTMLElement).closest('button, input, label')) return
       const rect = panelRef.current?.getBoundingClientRect()
       if (!rect) return
-      const bounds = getDragBounds(panelRef.current)
+      const bounds = getDragBounds(panelRef.current, inStack)
       const base = offset ?? { x: 0, y: 0 }
       dragRef.current = {
         startX: e.clientX,
@@ -207,7 +215,7 @@ export function PanelWrapper({
       setIsDragging(true)
       e.currentTarget.setPointerCapture(e.pointerId)
     },
-    [offset],
+    [offset, inStack],
   )
 
   const handleHeaderPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
@@ -238,22 +246,37 @@ export function PanelWrapper({
     [handleCardToggle],
   )
 
-  // Expanding can grow the panel past an edge if it was dragged there while
-  // collapsed — nudge it back inside the viewer bounds.
+  // Keep repositioned panels inside the available space as the card or viewer resizes.
   useLayoutEffect(() => {
-    if (isMobile || collapsed) return
+    if (isMobile) return
     const el = panelRef.current
     if (!el) return
-    const rect = el.getBoundingClientRect()
-    const bounds = getDragBounds(el)
-    const left = clamp(rect.left, bounds.left + DRAG_MARGIN, bounds.right - rect.width - DRAG_MARGIN)
-    const top = clamp(rect.top, bounds.top + DRAG_MARGIN, bounds.bottom - rect.height - DRAG_MARGIN)
-    const dx = left - rect.left
-    const dy = top - rect.top
-    if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
-      setOffset((prev) => ({ x: (prev?.x ?? 0) + dx, y: (prev?.y ?? 0) + dy }))
+    const fit = () => {
+      const rect = el.getBoundingClientRect()
+      const bounds = getDragBounds(el, inStack)
+      const left = clamp(rect.left, bounds.left + DRAG_MARGIN, bounds.right - rect.width - DRAG_MARGIN)
+      const top = clamp(rect.top, bounds.top + DRAG_MARGIN, bounds.bottom - rect.height - DRAG_MARGIN)
+      const dx = left - rect.left
+      const dy = top - rect.top
+      if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
+        setOffset((prev) => ({ x: (prev?.x ?? 0) + dx, y: (prev?.y ?? 0) + dy }))
+      }
+    }
+    fit()
+    const resize = new ResizeObserver(fit)
+    resize.observe(el)
+    const stack = el.closest('[data-right-stack]')
+    if (stack) {
+      resize.observe(stack)
+      const card = stack.querySelector('[data-right-stack-card]')
+      if (card) resize.observe(card)
+    }
+    window.addEventListener('resize', fit)
+    return () => {
+      resize.disconnect()
+      window.removeEventListener('resize', fit)
     }
-  }, [collapsed, isMobile])
+  }, [collapsed, isMobile, inStack])
 
   return (
     <div
@@ -264,7 +287,7 @@ export function PanelWrapper({
           : inStack
             ? // In the shared right column: it grows down and scrolls on itself,
               // leaving the shortcuts card below it its room (`right-stack.tsx`).
-              'pointer-events-auto flex max-h-full min-h-0 flex-[0_1_auto] flex-col overflow-hidden rounded-xl border border-border/50 bg-sidebar/95 shadow-2xl backdrop-blur-xl dark:text-foreground'
+              'pointer-events-auto flex max-h-[var(--inspector-available-height)] min-h-0 flex-[0_1_auto] flex-col overflow-hidden rounded-xl border border-border/50 bg-sidebar/95 shadow-2xl backdrop-blur-xl dark:text-foreground'
           // Cap height at `100dvh - 154px` so a tall panel's bottom edge
           // aligns flush with the top of the floating bottom action bar.
           // Combined with `top-20` (80px), the panel's bottom sits at
@@ -291,7 +314,7 @@ export function PanelWrapper({
       {!isMobile && (
         <div
           className={cn(
-            'relative flex select-none items-center justify-between px-3 py-3',
+            'relative flex shrink-0 select-none items-center justify-between px-3 py-3',
             !collapsed && 'border-border/50 border-b',
             isDragging ? 'cursor-grabbing' : 'cursor-grab',
           )}

package/src/components/ui/panels/parametric-inspector.tsx

@@ -17,7 +17,7 @@ import { type ComponentType, lazy, Suspense, useCallback } from 'react'
 import { resolveMoveActionNode } from '../../../lib/direct-manipulation'
 import { commitParametricNodeFields } from '../../../lib/parametric-node-update'
 import { sfxEmitter } from '../../../lib/sfx-bus'
-import { collectZoneContentIds } from '../../../lib/zone-content'
+import { collectZoneContentIds } from '@pascal-app/viewer/ui'
 import useEditor from '../../../store/use-editor'
 import { IconRefImage } from '../icon-ref'
 import { ActionButton, ActionGroup } from '../controls/action-button'

package/src/components/ui/panels/room-construction-rows.tsx

@@ -34,9 +34,9 @@ import {
   roomFloorOwner,
   roomFootprint,
 } from '../../../lib/floor-footprints'
-import { formatLinearMeasurement } from '../../../lib/measurements'
+import { formatLinearMeasurement } from '@pascal-app/core'
 import { startMezzanineDraft } from '../../../lib/mezzanine-draft'
-import { resolveRoomAssemblyHeights } from '../../../lib/room-assembly-overlay'
+import { resolveRoomAssemblyHeights } from '@pascal-app/viewer/ui'
 import { type FloorChoice, roomBuiltOn, separateFloorSummary } from '../../../lib/room-built-on'
 import type { RoomConstructionState } from '../../../lib/room-construction'
 import { roomConstructionState } from '../../../lib/room-construction'
@@ -58,7 +58,7 @@ import {
   unlockRoomOutsideFaces,
 } from '../../../lib/room-construction-commands'
 import { ownFloorElevationBounds } from '../../../lib/room-handle-drag'
-import type { RoomSelectionRecord } from '../../../lib/room-selection'
+import type { RoomSelectionRecord } from '@pascal-app/viewer/ui'
 import { cn } from '../../../lib/utils'
 import { roomPorchFramingCounts } from '../../../lib/room-construction'
 import { applyRoomPlan } from '../../../lib/room-structure-commands'
@@ -70,16 +70,16 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
-import { Switch } from '../primitives/switch'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
+} from '@pascal-app/viewer/ui'
+import { Switch } from '@pascal-app/viewer/ui'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@pascal-app/viewer/ui'
 import { localizedFloorFootprintName } from '../../../i18n/floor-footprint-name'
 import { messageWithSlot } from '../../../i18n/message-slot'
 import { nodeLabel } from '../../../i18n/node-messages'
 import { DeckBoardsFields } from './deck-boards-fields'
 import { RoomOpeningsField } from './room-openings-field'
 import { ShapeChoice } from './shape-choice'
-import { displayRoomName } from '../../../lib/room-name-messages'
+import { displayRoomName } from '@pascal-app/viewer/ui'
 
 /** The buttons a row offers — derived together with its presence. */
 export function constructionActions(state: RoomConstructionState, part: RoomConstructionPart) {

package/src/components/ui/panels/room-name-options.ts

@@ -4,11 +4,7 @@ import {
   numberedRoomName,
   type RoomNameSection,
 } from '../../../lib/room-name-catalog'
-import {
-  type DescriptorTranslator,
-  displayRoomName,
-  editedRoomName,
-} from '../../../lib/room-name-messages'
+import { type DescriptorTranslator, displayRoomName, editedRoomName } from '@pascal-app/viewer/ui'
 import { renameRoom } from '../../../lib/room-structure-commands'
 
 export type RoomNameOption = {

package/src/components/ui/panels/room-openings-field.tsx

@@ -11,7 +11,7 @@ import {
   useFloorEditSession,
 } from '../../../lib/floor-edit-session'
 import { type OpeningSurface, startOpeningDraft } from '../../../lib/floor-opening-draft'
-import { formatAreaLabel } from '../../../lib/measurements'
+import { formatAreaLabel } from '@pascal-app/core'
 import { pill } from './room-construction-rows'
 import { ShapeChoice } from './shape-choice'
 

package/src/components/ui/panels/room-panel.tsx

@@ -17,11 +17,11 @@ import { type KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from
 import { startCeilingEdit } from '../../../lib/ceiling-edit-session'
 import { resolveOverlayPolicy } from '../../../lib/interaction/overlay-policy'
 import { finishScriptCode } from '../../../lib/geometry-script/finish-scripts'
-import { formatAreaLabel, formatLinearMeasurement } from '../../../lib/measurements'
+import { formatAreaLabel, formatLinearMeasurement } from '@pascal-app/core'
 import { addMezzanineStairs } from '../../../lib/mezzanine-stairs'
 import { roomFloorBase, roomRelativeFloorHeight } from '../../../lib/room-construction-commands'
 import { mezzanineElevationBounds } from '../../../lib/room-handle-drag'
-import type { RoomSelectionRecord } from '../../../lib/room-selection'
+import type { RoomSelectionRecord } from '@pascal-app/viewer/ui'
 import {
   baseRoomName,
   type RoomNameSection,
@@ -39,9 +39,9 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
+} from '@pascal-app/viewer/ui'
 import { ColorDot } from '../primitives/color-dot'
-import { Popover, PopoverAnchor, PopoverContent } from '../primitives/popover'
+import { Popover, PopoverAnchor, PopoverContent } from '@pascal-app/viewer/ui'
 import { ShortcutToken } from '../primitives/shortcut-token'
 import { PanelWrapper } from './panel-wrapper'
 import { RoomOpeningsField } from './room-openings-field'
@@ -59,12 +59,10 @@ import {
   type RoomNameOption,
   roomNameOptions,
 } from './room-name-options'
-import { localizedLevelName } from '../../../i18n/level-name'
+import { localizedLevelName } from '@pascal-app/viewer/ui'
 import { messageWithSlot } from '../../../i18n/message-slot'
-import {
-  displayRoomName,
-  localizedRoomNameSections,
-} from '../../../lib/room-name-messages'
+import { displayRoomName } from '@pascal-app/viewer/ui'
+import { localizedRoomNameSections } from '../../../lib/room-name-messages'
 
 /** "Room · Ground floor", "Mezzanine · in Kitchen", "Room · not enclosed". */
 export function roomKicker(

package/src/components/ui/primitives/color-dot.tsx

@@ -3,8 +3,8 @@
 import { ZONE_COLOR_PALETTE } from '@pascal-app/core'
 import { useState } from 'react'
 import { cn } from '../../../lib/utils'
-import { Popover, PopoverContent, PopoverTrigger } from './popover'
-import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
+import { Popover, PopoverContent, PopoverTrigger } from '@pascal-app/viewer/ui'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@pascal-app/viewer/ui'
 
 export const PALETTE_COLORS = ZONE_COLOR_PALETTE
 

package/src/components/ui/primitives/opacity-control.tsx

@@ -2,8 +2,8 @@
 
 import { Eye, EyeOff } from 'lucide-react'
 import { useState } from 'react'
-import { Button } from '../../../components/ui/primitives/button'
-import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/primitives/popover'
+import { Button } from '@pascal-app/viewer/ui'
+import { Popover, PopoverContent, PopoverTrigger } from '@pascal-app/viewer/ui'
 import { Slider } from '../../../components/ui/primitives/slider'
 import { cn } from '../../../lib/utils'
 

package/src/components/ui/primitives/sidebar.tsx

@@ -6,7 +6,7 @@ import { PanelLeftIcon } from 'lucide-react'
 import * as React from 'react'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import { Button } from './../../../components/ui/primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import { Input } from './../../../components/ui/primitives/input'
 import { Separator } from './../../../components/ui/primitives/separator'
 import {
@@ -22,8 +22,8 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from './../../../components/ui/primitives/tooltip'
-import { useIsMobile } from './../../../hooks/use-mobile'
+} from '@pascal-app/viewer/ui'
+import { useIsMobile } from '@pascal-app/viewer/ui'
 import { hydrationGatedStorage } from './../../../lib/hydration-gated-storage'
 import { cn } from './../../../lib/utils'
 

package/src/components/ui/right-stack.test.ts

@@ -14,16 +14,23 @@ test('the inspector keeps 180 px, or its own height if shorter, above the full c
   ).toEqual({ inspector: 0, card: 240 })
 })
 
-test('on a short window the inspector gives way first, down to its header', () => {
+test('on a short window the help card scrolls to preserve editing space', () => {
   expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 400 })).toEqual({
-    inspector: 152,
-    card: 240,
+    inspector: 180,
+    card: 212,
   })
 })
 
-test('on a very short window the inspector keeps its header and the card scrolls', () => {
+test('expanded hints cannot squeeze the inspector down to just its header', () => {
   expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 258 })).toEqual({
-    inspector: 52,
-    card: 198,
+    inspector: 180,
+    card: 70,
+  })
+})
+
+test('a column shorter than the inspector minimum still bounds both cards', () => {
+  expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 100 })).toEqual({
+    inspector: 92,
+    card: 0,
   })
 })

package/src/components/ui/right-stack.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { createContext, type ReactNode, useContext, useEffect, useRef } from 'react'
-import { useIsMobile } from '../../hooks/use-mobile'
+import { createContext, type ReactNode, useContext, useLayoutEffect, useRef } from 'react'
+import { useIsMobile } from '@pascal-app/viewer/ui'
 import { cn } from '../../lib/utils'
 import { TOP_MENU_CLEARANCE } from './action-menu/placement'
 
@@ -20,9 +20,8 @@ const GAP = 8
 
 /**
  * The heights neither panel shrinks below. The inspector keeps 180 px (or its
- * own height, if shorter) while the full card fits under it, and never less
- * than its header row. The card shows in full whenever the column allows; on a
- * very short window it gives way and scrolls on itself — both stay usable.
+ * own height, if shorter) and never less than its header row when the column allows.
+ * The card uses the remaining room and scrolls on itself on a short window — both stay usable.
  */
 export function rightStackFloors(args: {
   naturalHeight: number
@@ -33,9 +32,10 @@ export function rightStackFloors(args: {
   const { naturalHeight, headerHeight, cardHeight, stackHeight } = args
   const gap = naturalHeight > 0 && cardHeight > 0 ? GAP : 0
   const header = Math.min(headerHeight, naturalHeight)
-  const inspector = Math.max(
-    header,
-    Math.min(INSPECTOR_MIN_HEIGHT, naturalHeight, stackHeight - cardHeight - gap),
+  const inspector = Math.min(
+    naturalHeight,
+    stackHeight,
+    Math.max(header, Math.min(INSPECTOR_MIN_HEIGHT, stackHeight - gap)),
   )
   const card = Math.max(0, Math.min(cardHeight, stackHeight - gap - inspector))
   return { inspector, card }
@@ -78,7 +78,7 @@ export function RightStack({
 
   // `min(180px, its own height)` has no CSS form for a flex item that scrolls,
   // so both floors are measured (`rightStackFloors`).
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (isMobile) return
     const stack = stackRef.current
     const slot = inspectorRef.current
@@ -88,18 +88,29 @@ export function RightStack({
     const fit = () => {
       frame = 0
       const { natural, header } = inspectorHeights(slot)
+      const cardHeight = Array.from(card.children).reduce(
+        (height, child) => height + child.scrollHeight + (child instanceof HTMLElement ? child.offsetHeight - child.clientHeight : 0),
+        0,
+      )
       const floors = rightStackFloors({
         naturalHeight: natural,
         headerHeight: header,
-        cardHeight: card.scrollHeight,
+        cardHeight,
         stackHeight: stack.clientHeight,
       })
       const inspectorMin = `${floors.inspector}px`
       const cardMin = `${floors.card}px`
+      // Custom panels may wrap PanelWrapper in a non-flex element. Give the
+      // card an explicit inherited limit so those wrappers cannot bypass it.
+      const available = Math.max(0, stack.clientHeight - floors.card - (natural > 0 && floors.card > 0 ? GAP : 0))
+      const limit = `${available}px`
+      if (slot.style.getPropertyValue('--inspector-available-height') !== limit) {
+        slot.style.setProperty('--inspector-available-height', limit)
+      }
       if (slot.style.minHeight !== inspectorMin) slot.style.minHeight = inspectorMin
       if (card.style.minHeight !== cardMin) card.style.minHeight = cardMin
       // The card is click-through; it takes the pointer only when it has to scroll.
-      const pointer = floors.card < card.scrollHeight ? 'auto' : ''
+      const pointer = floors.card < cardHeight ? 'auto' : ''
       if (card.style.pointerEvents !== pointer) card.style.pointerEvents = pointer
     }
     const schedule = () => {

package/src/components/ui/sidebar/icon-rail.tsx

@@ -7,7 +7,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from './../../../components/ui/primitives/tooltip'
+} from '@pascal-app/viewer/ui'
 import { cn } from './../../../lib/utils'
 
 export type PanelId = string

package/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx

@@ -11,7 +11,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '../../../../../components/ui/primitives/tooltip'
+} from '@pascal-app/viewer/ui'
 
 /** A function-axis taxonomy node, assembled into a tree by the embedder. */
 export type FunctionTreeNode = {

package/src/components/ui/sidebar/panels/settings-panel/audio-settings-dialog.tsx

@@ -1,5 +1,5 @@
 import { Volume2, VolumeX } from 'lucide-react'
-import { Button } from '../../../../../components/ui/primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import {
   Dialog,
   DialogContent,
@@ -9,7 +9,7 @@ import {
   DialogTrigger,
 } from '../../../../../components/ui/primitives/dialog'
 import { Slider } from '../../../../../components/ui/slider'
-import useAudio from '../../../../../store/use-audio'
+import { useAudioSettings as useAudio } from '@pascal-app/viewer/sfx'
 
 export function AudioSettingsDialog() {
   const {

package/src/components/ui/sidebar/panels/settings-panel/construction-animation-setting.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../../../../store/use-construction-reveal'
 import { SegmentedControl } from '../../../controls/segmented-control'
 import { Badge } from '../../../primitives/badge'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../../../primitives/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@pascal-app/viewer/ui'
 
 /** Why Framing is greyed out. */
 export const FRAMING_NEEDS_ARCHITECT = 'Framing needs the Architect plugin.'

package/src/components/ui/sidebar/panels/settings-panel/index.tsx

@@ -61,7 +61,7 @@ import {
   waitForLocalImport,
 } from '../../../../../lib/send-to-app'
 import { SegmentedControl } from './../../../../../components/ui/controls/segmented-control'
-import { Button } from './../../../../../components/ui/primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import {
   Dialog,
   DialogContent,
@@ -69,7 +69,7 @@ import {
   DialogTrigger,
 } from './../../../../../components/ui/primitives/dialog'
 import { Input } from './../../../../../components/ui/primitives/input'
-import { Switch } from './../../../../../components/ui/primitives/switch'
+import { Switch } from '@pascal-app/viewer/ui'
 import { cn } from './../../../../../lib/utils'
 import { refusedObjectsNotice } from './../../../../../components/editor/group-actions'
 import { addStoreyBelow, addStoreyOnTop } from './../../../../../lib/add-storey'

package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx

@@ -1,6 +1,6 @@
 import { type MessageDescriptor, usePascalI18n } from '@pascal-app/core'
 import { Keyboard } from 'lucide-react'
-import { Button } from './../../../../../components/ui/primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import {
   Dialog,
   DialogContent,

package/src/components/ui/sidebar/panels/settings-panel/load-build-dialog.tsx

@@ -14,7 +14,7 @@ import {
   XCircle,
 } from 'lucide-react'
 import { useState } from 'react'
-import { Button } from '../../../../../components/ui/primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import {
   Dialog,
   DialogContent,
@@ -23,11 +23,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../../../../../components/ui/primitives/dialog'
-import {
-  getAreaUnitLabel,
-  type LinearUnit,
-  squareMetersToAreaUnit,
-} from '../../../../../lib/measurements'
+import { getAreaUnitLabel, type LinearUnit, squareMetersToAreaUnit } from '@pascal-app/core'
 
 export type PendingImport = {
   fileName: string

package/src/components/ui/sidebar/panels/settings-panel/print-export-button.tsx

@@ -2,7 +2,7 @@ import { getProjectFileSink } from '@pascal-app/core'
 import { downloadProjectFile } from '../../../../../lib/download-project-file'
 import { AlertTriangle, Printer } from 'lucide-react'
 import { useState } from 'react'
-import { Button } from '../../../../../components/ui/primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import {
   isPrintLevelBundleReport,
   type PrintLevelBundleReport,

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

@@ -8,7 +8,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from './../../../../../components/ui/primitives/tooltip'
+} from '@pascal-app/viewer/ui'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 

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

@@ -4,7 +4,7 @@ import Image from 'next/image'
 import { memo, useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { startCeilingEditFromTreeSelection } from './../../../../../lib/ceiling-edit-session'
-import { formatAreaLabel } from './../../../../../lib/measurements'
+import { formatAreaLabel } from '@pascal-app/core'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'

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

@@ -52,7 +52,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from './../../../../../components/ui/primitives/popover'
+} from '@pascal-app/viewer/ui'
 import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
@@ -60,14 +60,7 @@ import {
 import { addStoreyOnTop } from './../../../../../lib/add-storey'
 import { offerExteriorWallCopy } from './../../../../../components/ui/level-wall-copy-prompt'
 import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
-import {
-  formatAreaLabel,
-  getAreaUnitLabel,
-  getLinearUnitLabel,
-  linearUnitToMeters,
-  metersToLinearUnit,
-  squareMetersToAreaUnit,
-} from './../../../../../lib/measurements'
+import { formatAreaLabel, getAreaUnitLabel, getLinearUnitLabel, linearUnitToMeters, metersToLinearUnit, squareMetersToAreaUnit } from '@pascal-app/core'
 import { createLocalGuideImage, createLocalScan } from './../../../../../lib/local-guide-image'
 import { editorHostTreeChildrenRegistry } from './../../../../../lib/host-tree-children'
 import { requestRoomDeletion } from './../../../../../lib/room-structure-commands'
@@ -88,7 +81,7 @@ import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeDragProvider } from './tree-node-drag'
 import { zoneDefaultName } from './default-names'
 import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
-import { authoredLevelName, localizedLevelName } from '../../../../../i18n/level-name'
+import { authoredLevelName, localizedLevelName } from '@pascal-app/viewer/ui'
 
 // ============================================================================
 // PROPERTY LINE SECTION

package/src/components/ui/sidebar/panels/site-panel/inline-rename-input.tsx

@@ -1,7 +1,7 @@
 import { type AnyNodeId, usePascalI18n, useScene } from '@pascal-app/core'
 import { Pencil } from 'lucide-react'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { displayRoomName } from './../../../../../lib/room-name-messages'
+import { displayRoomName } from '@pascal-app/viewer/ui'
 import { cn } from './../../../../../lib/utils'
 import { commitTreeRoomRename } from './../../../panels/room-name-options'
 

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

@@ -6,7 +6,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
-import { authoredLevelName, localizedLevelName } from '../../../../../i18n/level-name'
+import { authoredLevelName, localizedLevelName } from '@pascal-app/viewer/ui'
 
 interface LevelTreeNodeProps {
   nodeId: LevelNode['id']