@pascal-app/editor 1.1.0 → 1.1.1

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { createContext, type ReactNode, useContext, useLayoutEffect, useRef } from 'react'
-import { useIsMobile } from '../../hooks/use-mobile'
+import { useIsMobile } from '@pascal-app/viewer/ui'
 import { cn } from '../../lib/utils'
 import { TOP_MENU_CLEARANCE } from './action-menu/placement'
 

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,

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/index.tsx

@@ -52,7 +52,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from './../../../../../components/ui/primitives/popover'
+} from '@pascal-app/viewer/ui'
 import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
@@ -81,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']

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

@@ -1,4 +1,12 @@
-import { type AnyNodeId, type RoofNode, type RoofSegmentNode, useScene, usePascalI18n} from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  type RoofNode,
+  type RoofSegmentNode,
+  roofFaceOf,
+  useRegistryVersion,
+  useScene,
+  usePascalI18n,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { AnimatePresence } from 'motion/react'
 import Image from 'next/image'
@@ -10,6 +18,7 @@ import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from '.
 import { TreeNodeActions } from './tree-node-actions'
 import { DropIndicatorLine, useTreeNodeDrag } from './tree-node-drag'
 import { roofDefaultName, roofSegmentDefaultName } from './default-names'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface RoofTreeNodeProps {
   nodeId: AnyNodeId
@@ -42,10 +51,23 @@ export const RoofTreeNode = memo(function RoofTreeNode({
         .filter((n): n is RoofSegmentNode => n?.type === 'roof-segment')
     }),
   )
+  // Its faces of other kinds (`capabilities.roofs`: a plugin's roof planes), listed after its
+  // segments as the rows their kinds draw. A plugin registers its kinds after the first mount.
+  useRegistryVersion()
+  const faceIds = useScene(
+    useShallow(
+      (s) =>
+        ((s.nodes[nodeId] as RoofNode | undefined)?.children ?? []).filter((childId) =>
+          roofFaceOf(s.nodes[childId as AnyNodeId]),
+        ) as AnyNodeId[],
+    ),
+  )
 
-  // Targeted selector — only re-renders when a segment of THIS roof is selected/deselected
-  const hasSelectedChild = useViewer((state) =>
-    segments.some((seg) => state.selection.selectedIds.includes(seg.id)),
+  // Targeted selector — only re-renders when a segment or face of THIS roof is selected/deselected
+  const hasSelectedChild = useViewer(
+    (state) =>
+      segments.some((seg) => state.selection.selectedIds.includes(seg.id)) ||
+      faceIds.some((id) => state.selection.selectedIds.includes(id)),
   )
 
   const handleClick = useCallback(
@@ -86,7 +108,11 @@ export const RoofTreeNode = memo(function RoofTreeNode({
   }, [isDropTarget, expanded])
 
   const segmentCount = segments.length
-  const defaultName = roofDefaultName(i18n, segmentCount)
+  // A roof of faces alone reads as a roof, not as one of no segments.
+  const defaultName =
+    segmentCount === 0 && faceIds.length > 0
+      ? i18n._(nodeLabelDescriptor('roof', 'Roof'))
+      : roofDefaultName(i18n, segmentCount)
 
   // Hide the dragged segment from every roof while dragging
   const visibleSegments = drag ? segments.filter((seg) => seg.id !== drag.nodeId) : segments
@@ -99,7 +125,7 @@ export const RoofTreeNode = memo(function RoofTreeNode({
         actions={<TreeNodeActions nodeId={nodeId} />}
         depth={depth}
         expanded={expanded}
-        hasChildren={segments.length > 0}
+        hasChildren={segments.length + faceIds.length > 0}
         icon={
           <Image alt="" className="object-contain" height={14} src="/icons/roof.webp" width={14} />
         }
@@ -139,7 +165,12 @@ export const RoofTreeNode = memo(function RoofTreeNode({
               </AnimatePresence>
               <RoofSegmentTreeNode
                 depth={depth + 1}
-                isLast={isLast && i === visibleSegments.length - 1 && !showIndicatorAfter}
+                isLast={
+                  isLast &&
+                  faceIds.length === 0 &&
+                  i === visibleSegments.length - 1 &&
+                  !showIndicatorAfter
+                }
                 node={seg}
               />
               <AnimatePresence>
@@ -151,6 +182,14 @@ export const RoofTreeNode = memo(function RoofTreeNode({
         <AnimatePresence>
           {isDropTarget && visibleSegments.length === 0 && <DropIndicatorLine />}
         </AnimatePresence>
+        {faceIds.map((faceId, index) => (
+          <TreeNode
+            depth={depth + 1}
+            isLast={isLast && index === faceIds.length - 1}
+            key={faceId}
+            nodeId={faceId}
+          />
+        ))}
       </TreeNodeWrapper>
     </div>
   )

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

@@ -6,7 +6,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from './../../../../../components/ui/primitives/popover'
+} from '@pascal-app/viewer/ui'
 
 interface TreeNodeActionsProps {
   nodeId: AnyNodeId

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

@@ -96,6 +96,11 @@ type DragState = {
 type DropTarget = {
   parentId: string
   insertIndex: number
+  /**
+   * The row the drop lands before; none at the end. The rows are not all of the parent's
+   * children (a roof's faces have no drop row), so the drop is placed by id.
+   */
+  beforeId?: string
 } | null
 
 type TreeNodeDragContextValue = {
@@ -143,6 +148,10 @@ export function TreeNodeDragProvider({ children }: { children: ReactNode }) {
     if (!(drag && dropTarget)) return
 
     const state = useScene.getState()
+    const place = (children: string[], id: string) => {
+      const before = dropTarget.beforeId ? children.indexOf(dropTarget.beforeId) : -1
+      children.splice(before === -1 ? children.length : before, 0, id)
+    }
 
     if (dropTarget.parentId === drag.sourceParentId) {
       // --- Reorder within same parent ---
@@ -152,8 +161,7 @@ export function TreeNodeDragProvider({ children }: { children: ReactNode }) {
         const fromIndex = currentChildren.indexOf(drag.nodeId)
         if (fromIndex === -1) return
         currentChildren.splice(fromIndex, 1)
-        const toIndex = Math.min(dropTarget.insertIndex, currentChildren.length)
-        currentChildren.splice(toIndex, 0, drag.nodeId)
+        place(currentChildren, drag.nodeId)
         state.updateNode(dropTarget.parentId as AnyNodeId, { children: currentChildren } as any)
       }
     } else {
@@ -185,8 +193,7 @@ export function TreeNodeDragProvider({ children }: { children: ReactNode }) {
         const idx = children.indexOf(drag.nodeId)
         if (idx !== -1) {
           children.splice(idx, 1)
-          const toIndex = Math.min(dropTarget.insertIndex, children.length)
-          children.splice(toIndex, 0, drag.nodeId)
+          place(children, drag.nodeId)
           state.updateNode(dropTarget.parentId as AnyNodeId, { children } as any)
         }
       }
@@ -259,6 +266,7 @@ export function TreeNodeDragProvider({ children }: { children: ReactNode }) {
         // Find child rows to determine insert index
         const childRows = targetEl.querySelectorAll<HTMLElement>('[data-drop-child]')
         let insertIndex = childRows.length
+        let beforeId: string | undefined
 
         for (let i = 0; i < childRows.length; i++) {
           const row = childRows[i]!
@@ -266,11 +274,12 @@ export function TreeNodeDragProvider({ children }: { children: ReactNode }) {
           const midY = rect.top + rect.height / 2
           if (e.clientY < midY) {
             insertIndex = i
+            beforeId = row.dataset.dropChild
             break
           }
         }
 
-        foundTarget = { parentId, insertIndex }
+        foundTarget = { parentId, insertIndex, beforeId }
         break
       }
 

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

@@ -16,8 +16,8 @@ import { assignZoneToUnit, enterUnitFocus } from './../../../../../lib/units'
 import { InlineRenameInput } from './inline-rename-input'
 import { TreeNodeWrapper } from './tree-node'
 import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
-import { localizedLevelName } from '../../../../../i18n/level-name'
-import { displayRoomName } from '../../../../../lib/room-name-messages'
+import { localizedLevelName } from '@pascal-app/viewer/ui'
+import { displayRoomName } from '@pascal-app/viewer/ui'
 
 type UnitWarningCode = ReturnType<typeof unitWarnings>[number]['code']
 

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

@@ -8,18 +8,18 @@ import { useViewer } from '@pascal-app/viewer'
 import { Camera, Hexagon, Save, Trash2 } from 'lucide-react'
 import { useState } from 'react'
 import { sfxEmitter } from './../../../../../lib/sfx-bus'
-import { collectZoneContentIds } from './../../../../../lib/zone-content'
+import { collectZoneContentIds } from '@pascal-app/viewer/ui'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from './../../../../../components/ui/primitives/popover'
+} from '@pascal-app/viewer/ui'
 import { cn } from './../../../../../lib/utils'
 import useEditor from './../../../../../store/use-editor'
 import { ActionButton } from '../../../controls/action-button'
 import { PanelSection } from '../../../controls/panel-section'
-import { displayRoomName } from '../../../../../lib/room-name-messages'
+import { displayRoomName } from '@pascal-app/viewer/ui'
 
 function ZoneItem({ zone }: { zone: ZoneNode }) {
   const i18n = usePascalI18n()

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

@@ -4,7 +4,7 @@ import type { ReactNode } from 'react'
 import { editorHostPanelRegistry } from '../../../lib/plugin-panels'
 import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../primitives/tooltip'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@pascal-app/viewer/ui'
 
 export type SidebarTab = {
   id: string

package/src/components/ui/wall-type/wall-type-editor-dialog.tsx

@@ -36,7 +36,7 @@ import {
   type WallTypePlacement,
   type WallTypeSaveResult,
 } from '../../../lib/wall-type'
-import { Button } from '../primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import {
   Dialog,
   DialogContent,

package/src/components/ui/wall-type/wall-type-menu.tsx

@@ -23,7 +23,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
+} from '@pascal-app/viewer/ui'
 import { type WallTypeEditorRequest, WallTypeEditorDialog } from './wall-type-editor-dialog'
 
 /**

package/src/components/viewer-overlay.tsx

@@ -1,10 +1,9 @@
 'use client'
 
+import { ViewerControlsBar, ViewerSceneHeader } from '@pascal-app/viewer/ui'
 import { flushSync } from 'react-dom'
 import { requestWalkthroughPointerLock } from '../lib/walkthrough-pointer-lock'
 import useEditor from '../store/use-editor'
-import { ViewerControlsBar } from './viewer/viewer-controls-bar'
-import { ViewerSceneHeader } from './viewer/viewer-scene-header'
 
 type ProjectOwner = {
   id: string

package/src/hooks/use-auto-frame.ts

@@ -1,8 +1,7 @@
 'use client'
 
-import { emitter, useScene } from '@pascal-app/core'
+import { computeSceneBoundsXZ, emitter, useScene } from '@pascal-app/core'
 import { useEffect, useRef } from 'react'
-import { computeSceneBoundsXZ } from '../lib/scene-bounds'
 
 /**
  * Auto-frame the camera onto a freshly loaded scene.

package/src/hooks/use-keyboard.ts

@@ -9,7 +9,7 @@ import {
   toggleNodeMechanism,
   useScene,
 } from '@pascal-app/core'
-import { cancelPerfAction, markPerfAction, useViewer } from '@pascal-app/viewer'
+import { cancelPerfAction, isTypingTarget, markPerfAction, useViewer } from '@pascal-app/viewer'
 import { useEffect } from 'react'
 import {
   cutSelectionToEditorClipboard,
@@ -40,7 +40,6 @@ import { sfxEmitter } from '../lib/sfx-bus'
 import { openSidebarPanel } from '../lib/sidebar-panel'
 import { activeSiteNode, clampBrushRadius } from '../lib/terrain-sculpt'
 import { armToolShortcut, toolShortcutForKey } from '../lib/tool-shortcuts'
-import { isTypingTarget } from '../lib/typing-target'
 import { leaveUnitFocus } from '../lib/units'
 import { subscribeWallKindReset } from '../lib/wall-draw-variant'
 import { isWallNudgeKey, nudgeSelectedWall } from '../lib/wall-nudge'

package/src/hooks/use-selected-room.ts

@@ -2,17 +2,17 @@
 
 import { type AnyNode, type AnyNodeId, nodeRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useCallback, useSyncExternalStore } from 'react'
-import { getFloorplanNodeExtension } from '../lib/floorplan/floorplan-extension'
-import { selectionEnabled } from '../lib/interaction/scope'
+import type { SelectionModifierKeys } from '@pascal-app/viewer/ui'
 import {
   type RoomKey,
   RoomSelectionIndex,
   type RoomSelectionRecord,
   resolveRoomHit,
-} from '../lib/room-selection'
+} from '@pascal-app/viewer/ui'
+import { useCallback, useSyncExternalStore } from 'react'
+import { getFloorplanNodeExtension } from '../lib/floorplan/floorplan-extension'
+import { selectionEnabled } from '../lib/interaction/scope'
 import { shouldInterceptRoom } from '../lib/room-selection-commands'
-import { type SelectionModifierKeys, selectionModifiersFromEvent } from '../lib/selection-routing'
 import useEditor from '../store/use-editor'
 import useInteractionScope from '../store/use-interaction-scope'
 
@@ -150,5 +150,3 @@ export function resolvePlanRoomHit(nodeId: string | null, point: readonly [numbe
   const levelId = node?.parentId ?? useViewer.getState().selection.levelId
   return levelId ? resolveEditorRoomHit(node ?? null, levelId, point, '2d') : null
 }
-
-export { selectionModifiersFromEvent }

package/src/i18n/floor-footprint-name.ts

@@ -4,7 +4,7 @@ import {
   type PascalI18n,
   type SlabNode,
 } from '@pascal-app/core'
-import { displayRoomName } from '../lib/room-name-messages'
+import { displayRoomName } from '@pascal-app/viewer/ui'
 
 /** `floorFootprintName` in the UI language; MCP and agents keep core's English. */
 export function localizedFloorFootprintName(