@pascal-app/editor 1.1.0 → 1.1.2

package/src/components/tools/item/use-placement-coordinator.tsx

@@ -30,7 +30,8 @@ import {
   useSpatialQuery,
   type WallEvent,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { isTypingTarget, useViewer } from '@pascal-app/viewer'
+import { LocalizedHtml as Html } from '@pascal-app/viewer/ui'
 import { useFrame, useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -58,7 +59,6 @@ import {
   surfaceFramePose,
   updateSurfaceNode as writeSurfaceNode,
 } from '../../../lib/surface-attachment'
-import { isTypingTarget } from '../../../lib/typing-target'
 import { createWallPointerTracker } from '../../../lib/wall-placement-pointer'
 import {
   projectAlignmentGuidesWorldToActiveBuildingLocal,
@@ -73,7 +73,6 @@ import useEditor, {
 import useFacingPose from '../../../store/use-facing-pose'
 import { getMovingNode } from '../../../store/use-interaction-scope'
 import usePlacementPreview from '../../../store/use-placement-preview'
-import { Html } from '../../editor/localized-html'
 import {
   createItemSurfaceGridDispatch,
   createItemSurfacePointerArbitration,

package/src/components/tools/paint-region/wall-paint-region-tool.tsx

@@ -10,7 +10,12 @@ import {
   type WallFace,
   type WallNode,
 } from '@pascal-app/core'
-import { getSceneTheme, setSurfaceRaycastLayers, useViewer } from '@pascal-app/viewer'
+import {
+  getSceneTheme,
+  isTypingTarget,
+  setSurfaceRaycastLayers,
+  useViewer,
+} from '@pascal-app/viewer'
 import { useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef } from 'react'
 import {
@@ -29,7 +34,6 @@ import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { paintRegionTargets, usePaintRegionMode } from '../../../lib/paint-region-mode'
-import { isTypingTarget } from '../../../lib/typing-target'
 import {
   activeWallRegionGesture,
   activeWallRegionTarget,

package/src/components/tools/registry/move-registry-node-tool.tsx

@@ -38,7 +38,7 @@ import {
   useLiveTransforms,
   useScene,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { isTypingTarget, useViewer } from '@pascal-app/viewer'
 import { useFrame, useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { type Group, Vector3 } from 'three'
@@ -61,7 +61,6 @@ import {
   surfaceAttachmentUpdates,
   updateSurfaceNode,
 } from '../../../lib/surface-attachment'
-import { isTypingTarget } from '../../../lib/typing-target'
 import useAlignmentGuides from '../../../store/use-alignment-guides'
 import useEditor, {
   getActiveSnappingMode,

package/src/components/tools/shared/cursor-sphere.tsx

@@ -1,4 +1,5 @@
 import { type MessageDescriptor, usePascalI18n } from '@pascal-app/core'
+import { LocalizedHtml as Html } from '@pascal-app/viewer/ui'
 import type { ThreeElements } from '@react-three/fiber'
 import { forwardRef } from 'react'
 import { CircleGeometry, CylinderGeometry, type Group, SphereGeometry } from 'three'
@@ -8,7 +9,6 @@ import { EDITOR_LAYER } from '../../../lib/constants'
 import { wallCursorIcon } from '../../../lib/tool-cursor-icon'
 import useEditor from '../../../store/use-editor'
 import useWallSnapIndicator from '../../../store/use-wall-snap-indicator'
-import { Html } from '../../editor/localized-html'
 
 interface CursorSphereProps extends Omit<ThreeElements['group'], 'ref'> {
   color?: string

package/src/components/tools/shared/draft-measurement-label.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Html } from '../../editor/localized-html'
+import { LocalizedHtml as Html } from '@pascal-app/viewer/ui'
 
 /** Lift of a draft's readout above the top of what it measures, in metres. */
 export const DRAFT_LABEL_Y_OFFSET = 0.22

package/src/components/tools/shared/placement-box.tsx

@@ -3,12 +3,12 @@
 import '../../../three-types'
 
 import { formatLinearMeasurement, type LinearUnit, type MetricNotation } from '@pascal-app/core'
+import { LocalizedHtml as Html } from '@pascal-app/viewer/ui'
 import { useEffect, useMemo } from 'react'
 import { PlaneGeometry } from 'three'
 import { distance, smoothstep, uv, vec2 } from 'three/tsl'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
-import { Html } from '../../editor/localized-html'
 import { createLineGeometry, getBoxEdgePoints } from './placement-box-geometry'
 
 const VALID_COLOR = 0x22_c5_5e // green-500

package/src/components/tools/shared/placement-dimension-guides.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import { useViewer } from '@pascal-app/viewer'
+import { LocalizedHtml as Html } from '@pascal-app/viewer/ui'
 import { useLayoutEffect, useMemo } from 'react'
 import { BufferGeometry, Float32BufferAttribute, Line as ThreeLine } from 'three'
 import { LineBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import type { PlacementPreviewDimension } from '../../../store/use-placement-preview'
 import usePlacementPreview from '../../../store/use-placement-preview'
-import { Html } from '../../editor/localized-html'
 import { formatMeasurement } from '../../editor/measurement-pill'
 
 const DIMENSION_COLOR = 0x63_66_f1

package/src/components/tools/site/terrain-brush-cursor.tsx

@@ -10,6 +10,7 @@ import {
   useLiveTerrain,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
+import { LocalizedHtml as Html } from '@pascal-app/viewer/ui'
 import { useFrame, useThree } from '@react-three/fiber'
 import { type MutableRefObject, useEffect, useMemo, useRef } from 'react'
 import {
@@ -24,7 +25,6 @@ import { EDITOR_LAYER } from '../../../lib/constants'
 import { sculptFieldForSite, terrainPointInsideSite } from '../../../lib/terrain-sculpt'
 import { brushRingColor } from '../../../lib/terrain-verb-color'
 import useEditor from '../../../store/use-editor'
-import { Html } from '../../editor/localized-html'
 import { formatMeasurement } from '../../editor/measurement-pill'
 
 /** Segments in the cursor ring. 64 reads as a circle at any usable brush size. */

package/src/components/ui/action-menu/camera-actions.tsx

@@ -4,8 +4,8 @@ import { emitter, usePascalI18n } from '@pascal-app/core'
 import Image from 'next/image'
 import useEditor from '../../../store/use-editor'
 import { visibleScene } from '../../../store/view-layout'
-import { ActionButton } from './action-button'
-import { FollowPascalToggle } from './follow-pascal-toggle'
+import { ActionButton } from '@pascal-app/viewer/ui'
+import { FollowPascalToggle } from '@pascal-app/viewer/ui'
 
 export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
   const i18n = usePascalI18n()

package/src/components/ui/action-menu/control-modes.tsx

@@ -9,7 +9,7 @@ import Image from 'next/image'
 import { Fragment } from 'react'
 import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
-import { ActionButton } from './action-button'
+import { ActionButton } from '@pascal-app/viewer/ui'
 import { MeasurementControl } from './measurement-control'
 import { PointAskButton } from './point-ask-button'
 

package/src/components/ui/action-menu/follow-pascal-pill.tsx

@@ -3,7 +3,7 @@
 import { usePascalI18n } from '@pascal-app/core'
 import { AnimatePresence, motion } from 'motion/react'
 import { useReducedMotion } from '../../../hooks/use-reduced-motion'
-import useFollowPascal from '../../../store/use-follow-pascal'
+import { useFollowPascal } from '@pascal-app/viewer/ui'
 
 /**
  * Offered while a build plays and the person has the camera: one press and the camera goes back to

package/src/components/ui/action-menu/index.tsx

@@ -3,8 +3,8 @@
 import { useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { motion } from 'motion/react'
-import { TooltipProvider } from './../../../components/ui/primitives/tooltip'
-import { useIsMobile } from './../../../hooks/use-mobile'
+import { TooltipProvider } from '@pascal-app/viewer/ui'
+import { useIsMobile } from '@pascal-app/viewer/ui'
 import { useReducedMotion } from './../../../hooks/use-reduced-motion'
 import { shouldShowEditingControls } from './../../../lib/interaction/overlay-policy'
 import { cn } from './../../../lib/utils'
@@ -12,7 +12,7 @@ import useEditor from './../../../store/use-editor'
 import { CameraActions } from './camera-actions'
 import { ControlModes } from './control-modes'
 import { FollowPascalPill } from './follow-pascal-pill'
-import { type ActionMenuPlacement, ActionMenuPlacementProvider } from './placement'
+import { type ActionMenuPlacement, ActionMenuPlacementProvider } from '@pascal-app/viewer/ui'
 import { SecondaryToggles } from './view-toggles'
 
 // Mobile bottom offset matches the viewer's overlap behind the sheet's

package/src/components/ui/action-menu/measurement-control.tsx

@@ -27,9 +27,9 @@ import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { VIEW_2D } from '../../../store/view-layout'
 import useFloorplanMode from '../../../store/use-floorplan-mode'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
-import { ActionButton } from './action-button'
-import { useActionMenuPopupSide } from './placement'
+import { Popover, PopoverContent, PopoverTrigger } from '@pascal-app/viewer/ui'
+import { ActionButton } from '@pascal-app/viewer/ui'
+import { useActionMenuPopupSide } from '@pascal-app/viewer/ui'
 
 const measurementOptions = [
   { kind: 'distance', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.distance', message: 'Distance' }, icon: Ruler },

package/src/components/ui/action-menu/placement.ts

@@ -1,20 +1,2 @@
-import { createContext, useContext } from 'react'
-
-/** Viewport edge the action menu docks to. */
-export type ActionMenuPlacement = 'bottom' | 'top'
-
 /** Where chrome under a top-docked menu starts: below the host toolbar row and the menu itself. */
 export const TOP_MENU_CLEARANCE = '7.25rem'
-
-const ActionMenuPlacementContext = createContext<ActionMenuPlacement>('bottom')
-
-export const ActionMenuPlacementProvider = ActionMenuPlacementContext.Provider
-
-export function useActionMenuPlacement(): ActionMenuPlacement {
-  return useContext(ActionMenuPlacementContext)
-}
-
-/** Side tooltips and popovers open toward, away from the docked edge. */
-export function useActionMenuPopupSide(): 'top' | 'bottom' {
-  return useActionMenuPlacement() === 'top' ? 'bottom' : 'top'
-}

package/src/components/ui/action-menu/point-ask-button.tsx

@@ -6,7 +6,7 @@ import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { usePointAsk } from '../../../store/use-point-ask'
 import { isViewVisible, VIEW_3D } from '../../../store/view-layout'
-import { ActionButton } from './action-button'
+import { ActionButton } from '@pascal-app/viewer/ui'
 
 /**
  * Point and ask (key C): the toolbar's way into the mode where hovering names what Pascal would

package/src/components/ui/action-menu/view-toggles.tsx

@@ -35,11 +35,11 @@ import {
   useWallsBelowSetting,
 } from '../../editor-2d/floorplan-adjacent-walls-layer'
 import { SliderControl } from '../controls/slider-control'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
-import { Switch } from '../primitives/switch'
-import { ActionButton } from './action-button'
-import { useActionMenuPopupSide } from './placement'
-import { localizedLevelName } from '../../../i18n/level-name'
+import { Popover, PopoverContent, PopoverTrigger } from '@pascal-app/viewer/ui'
+import { Switch } from '@pascal-app/viewer/ui'
+import { ActionButton } from '@pascal-app/viewer/ui'
+import { useActionMenuPopupSide } from '@pascal-app/viewer/ui'
+import { localizedLevelName } from '@pascal-app/viewer/ui'
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024 // 200MB
 const ACCEPTED_FILE_TYPES = '.glb,.gltf,image/jpeg,image/png,image/webp,image/gif'

package/src/components/ui/controls/finish-swatch.tsx

@@ -13,7 +13,7 @@ import {
 } from '@pascal-app/core'
 import { useState } from 'react'
 import { materialSwatchStyle } from '../../../lib/material-swatch-style'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@pascal-app/viewer/ui'
 import { MaterialPicker } from './material-picker'
 
 type Swatch = { label: string; color: string | null; image: string | null; tinted?: boolean }

package/src/components/ui/controls/material-paint-panel.tsx

@@ -6,8 +6,8 @@ import { useState } from 'react'
 import { useMaterialPaintPanelModel } from '../../../lib/material-paint-panel-model'
 import { type PaintMode, usePaintRegionMode } from '../../../lib/paint-region-mode'
 import useEditor, { armMaterialPaint } from '../../../store/use-editor'
-import { Button } from '../primitives/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
+import { Button } from '@pascal-app/viewer/ui'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@pascal-app/viewer/ui'
 import { MaterialPicker } from './material-picker'
 import { SceneMaterialList } from './scene-material-list'
 import { SegmentedControl } from './segmented-control'

package/src/components/ui/controls/scene-material-list.tsx

@@ -12,9 +12,9 @@ import { Copy, Paintbrush, Pencil, Trash2 } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { sceneMaterialUsageCounts } from '../../../lib/scene-material-refs'
 import useEditor from '../../../store/use-editor'
-import { Button } from '../primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import { Input } from '../primitives/input'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@pascal-app/viewer/ui'
 import { MaterialPropertiesEditor } from './material-properties-editor'
 
 export function SceneMaterialList({ autoEditId }: { autoEditId?: SceneMaterialId | null }) {

package/src/components/ui/controls/select-control.tsx

@@ -8,7 +8,7 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
+} from '@pascal-app/viewer/ui'
 
 interface SelectControlProps<T extends string> {
   label: string

package/src/components/ui/controls/terrain-sculpt-panel.tsx

@@ -10,7 +10,7 @@ import {
 import { Mountain, Pipette } from 'lucide-react'
 import { brushRadiusRange, flattenSite, resetSiteTerrain } from '../../../lib/terrain-sculpt'
 import useEditor from '../../../store/use-editor'
-import { Button } from '../primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import { SegmentedControl } from './segmented-control'
 import { SliderControl } from './slider-control'
 

package/src/components/ui/floating-level-selector.tsx

@@ -61,14 +61,14 @@ import {
   useLocale,
   usePascalI18n,
 } from '@pascal-app/core'
-import { authoredLevelName, localizedLevelName } from '../../i18n/level-name'
+import { authoredLevelName, localizedLevelName } from '@pascal-app/viewer/ui'
 import { messageWithSlot } from '../../i18n/message-slot'
 import { addStoreyBelow, addStoreyOnTop, setGroundFloor } from '../../lib/add-storey'
 import { deleteLevelWithFallbackSelection } from '../../lib/level-selection'
 import { unitMemberLevels, leaveUnitFocus } from '../../lib/units'
 import { useLinearDisplay } from '../../lib/use-linear-display'
 import { cn } from '../../lib/utils'
-import { useIsMobile } from '../../hooks/use-mobile'
+import { useIsMobile } from '@pascal-app/viewer/ui'
 import { ActionButton } from './controls/action-button'
 import { SliderControl } from './controls/slider-control'
 import { LevelDuplicateDialog } from './level-duplicate-dialog'
@@ -81,7 +81,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from './primitives/dialog'
-import { Popover, PopoverContent, PopoverTrigger } from './primitives/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@pascal-app/viewer/ui'
 
 // ── Inline rename input for a level row ─────────────────────────────────────
 

package/src/components/ui/helpers/contextual-helper-panel.tsx

@@ -23,7 +23,7 @@ import useEditor, { type GridSnapStep } from '../../../store/use-editor'
 import useFenceCurveDraft from '../../../store/use-fence-curve-draft'
 import { IconRefGlyph } from '../icon-ref'
 import { ShortcutToken } from '../primitives/shortcut-token'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@pascal-app/viewer/ui'
 import { useInRightStack } from '../right-stack'
 
 // One muted container holds every row — passive key hints and interactive chips

package/src/components/ui/helpers/helper-manager.test.tsx

@@ -8,7 +8,7 @@ import {
 import { SELECT_HUD_TITLE, toolHudTitle } from '../../../lib/hud-title'
 import { snapContextOf } from '../../../lib/snapping-mode'
 import { cornerHintRows } from '../../../store/use-corner-snap-hint'
-import { TooltipProvider } from '../primitives/tooltip'
+import { TooltipProvider } from '@pascal-app/viewer/ui'
 import { ContextualHelperPanel } from './contextual-helper-panel'
 import {
   mepHandleGesture,

package/src/components/ui/helpers/helper-manager.tsx

@@ -11,7 +11,7 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { useIsMobile } from '../../../hooks/use-mobile'
+import { useIsMobile } from '@pascal-app/viewer/ui'
 import {
   AXIS_MOVE_DRAG_LABEL,
   type ContextualShortcutHint,

package/src/components/ui/level-duplicate-dialog.tsx

@@ -4,7 +4,7 @@ import type { LevelNode, MessageDescriptor } from '@pascal-app/core'
 import { useEffect, useState } from 'react'
 import type { LevelDuplicatePreset } from '@pascal-app/core/building'
 import { useLocale, usePascalI18n } from '@pascal-app/core'
-import { localizedLevelName } from '../../i18n/level-name'
+import { localizedLevelName } from '@pascal-app/viewer/ui'
 import { cn } from '../../lib/utils'
 import {
   Dialog,

package/src/components/ui/node-icon-image.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'bun:test'
+import { imageConfigDefault } from 'next/dist/shared/lib/image-config'
+import { ImageConfigContext } from 'next/dist/shared/lib/image-config-context.shared-runtime'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { canOptimizeImageSrc, NodeIconImage } from './node-icon-image'
+
+const config = {
+  ...imageConfigDefault,
+  remotePatterns: [{ protocol: 'https' as const, hostname: 'assets.example.com' }],
+}
+
+const render = (src: string) =>
+  renderToStaticMarkup(
+    <ImageConfigContext.Provider value={config}>
+      <NodeIconImage alt="" height={16} src={src} width={16} />
+    </ImageConfigContext.Provider>,
+  )
+
+describe('canOptimizeImageSrc', () => {
+  test('optimizes site-relative paths and configured hosts', () => {
+    expect(canOptimizeImageSrc('/icons/item.png', config)).toBe(true)
+    expect(canOptimizeImageSrc('https://assets.example.com/thumb.webp', config)).toBe(true)
+  })
+
+  test('does not optimize hosts missing from remotePatterns', () => {
+    expect(canOptimizeImageSrc('https://prod.supabase.co/storage/thumb.webp', config)).toBe(false)
+    expect(canOptimizeImageSrc('//prod.supabase.co/thumb.webp', config)).toBe(false)
+  })
+
+  test('keeps optimizing when the config carries no host lists, as in production builds', () => {
+    expect(canOptimizeImageSrc('https://prod.supabase.co/storage/thumb.webp', {})).toBe(true)
+  })
+})
+
+describe('NodeIconImage', () => {
+  test('renders an unconfigured host straight from its URL', () => {
+    const src = 'https://prod.supabase.co/storage/v1/object/public/items/thumb.webp'
+    const html = render(src)
+    expect(html).toContain(`src="${src}"`)
+    expect(html).not.toContain('/_next/image')
+  })
+
+  test('still optimizes a configured host', () => {
+    expect(render('https://assets.example.com/thumb.webp')).toContain('/_next/image?url=')
+  })
+})

package/src/components/ui/node-icon-image.tsx

@@ -1,7 +1,35 @@
 'use client'
 
 import { ARTIFACT_URL_PREFIX, resolveArtifactUrl } from '@pascal-app/core'
+import { type ImageConfigComplete, imageConfigDefault } from 'next/dist/shared/lib/image-config'
+import { ImageConfigContext } from 'next/dist/shared/lib/image-config-context.shared-runtime'
+import { hasRemoteMatch } from 'next/dist/shared/lib/match-remote-pattern'
 import Image, { type ImageProps } from 'next/image'
+import { useContext } from 'react'
+
+type ImageHostConfig = Partial<Pick<ImageConfigComplete, 'domains' | 'remotePatterns'>>
+
+// Inlined by Next's bundler define, as next/image itself reads it.
+const configEnv = process.env.__NEXT_IMAGE_OPTS as unknown as ImageHostConfig | undefined
+
+/**
+ * Whether next/image can optimize `src`. An absolute URL on a host missing
+ * from `images.remotePatterns` makes next/image throw during render (e.g. a
+ * catalog thumbnail on production storage while running against local
+ * Supabase), so those render unoptimized, straight from their host.
+ */
+export function canOptimizeImageSrc(src: string, config: ImageHostConfig): boolean {
+  if (src.startsWith('/') && !src.startsWith('//')) return true
+  // Production builds inline no host lists, and next/image validates none then.
+  if (!config.domains && !config.remotePatterns) return true
+  let url: URL
+  try {
+    url = new URL(src)
+  } catch {
+    return false
+  }
+  return hasRemoteMatch(config.domains ?? [], config.remotePatterns ?? [], url)
+}
 
 /**
  * A node's icon or thumbnail. A scripted object's thumbnail is an
@@ -10,7 +38,11 @@ import Image, { type ImageProps } from 'next/image'
  * private project's artifact with.
  */
 export function NodeIconImage({ src, ...props }: Omit<ImageProps, 'src'> & { src: string }) {
-  if (!src.startsWith(ARTIFACT_URL_PREFIX)) return <Image src={src} {...props} />
+  const configContext = useContext(ImageConfigContext)
+  const config = configEnv || configContext || imageConfigDefault
+  if (!src.startsWith(ARTIFACT_URL_PREFIX)) {
+    return <Image src={src} unoptimized={!canOptimizeImageSrc(src, config)} {...props} />
+  }
   const url = resolveArtifactUrl(src)
   return url ? <Image src={url} unoptimized {...props} /> : null
 }

package/src/components/ui/panels/collections/collections-popover.tsx

@@ -21,12 +21,12 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '../../../../components/ui/primitives/dropdown-menu'
+} from '@pascal-app/viewer/ui'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '../../../../components/ui/primitives/popover'
+} from '@pascal-app/viewer/ui'
 import { cn } from '../../../../lib/utils'
 
 interface CollectionsPopoverProps {

package/src/components/ui/panels/floor-foundation-panel.tsx

@@ -19,7 +19,7 @@ import {
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { localizedFloorFootprintName } from '../../../i18n/floor-footprint-name'
-import { localizedLevelName } from '../../../i18n/level-name'
+import { localizedLevelName } from '@pascal-app/viewer/ui'
 import { useRef, useState } from 'react'
 import {
   applyFloorFoundation,
@@ -40,7 +40,7 @@ import { formatLinearMeasurement } from '@pascal-app/core'
 import { FinishSwatch } from '../controls/finish-swatch'
 import { MetricControl } from '../controls/metric-control'
 import { SegmentedControl } from '../controls/segmented-control'
-import { Button } from '../primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import { PanelWrapper } from './panel-wrapper'
 
 /** Unpainted finishes, as the plate renders them (nodes' slab slot defaults). */

package/src/components/ui/panels/floor-opening-panel.tsx

@@ -15,12 +15,12 @@ import {
   openingRoom,
 } from '../../../lib/floor-edit-session'
 import { formatAreaLabel } from '@pascal-app/core'
-import { Button } from '../primitives/button'
-import { Switch } from '../primitives/switch'
+import { Button } from '@pascal-app/viewer/ui'
+import { Switch } from '@pascal-app/viewer/ui'
 import { PanelWrapper } from './panel-wrapper'
-import { localizedLevelName } from '../../../i18n/level-name'
+import { localizedLevelName } from '@pascal-app/viewer/ui'
 import { nodeLabel } from '../../../i18n/node-messages'
-import { displayRoomName } from '../../../lib/room-name-messages'
+import { displayRoomName } from '@pascal-app/viewer/ui'
 
 /**
  * A floor (or ceiling) opening: where it is, what it cuts, and the switch for

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

@@ -28,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'

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'

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

@@ -36,7 +36,7 @@ import {
 } from '../../../lib/floor-footprints'
 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) {