@pascal-app/editor 1.0.7 → 1.1.1

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/slab-tree-node.tsx

@@ -2,7 +2,7 @@ import { type AnyNodeId, type SlabNode, usePascalI18n, useScene } from '@pascal-
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
-import { formatAreaLabel } from './../../../../../lib/measurements'
+import { formatAreaLabel } from '@pascal-app/core'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'

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/site-panel/zone-tree-node.tsx

@@ -2,7 +2,7 @@ import { useScene, type ZoneNode, usePascalI18n} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { memo, useCallback, useState } from 'react'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
-import { formatAreaLabel } from './../../../../../lib/measurements'
+import { formatAreaLabel } from '@pascal-app/core'
 import {
   selectZoneOrRoom,
   useZoneSelected,

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

@@ -27,7 +27,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { ArrowDown, ArrowUp, Plus, X } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { formatLayerThickness, parseLayerThickness } from '../../../lib/layer-thickness'
-import type { LinearUnit } from '../../../lib/measurements'
+import type { LinearUnit } from '@pascal-app/core'
 import { cn } from '../../../lib/utils'
 import {
   saveProjectWallType,
@@ -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(