@pascal-app/editor 1.0.7 → 1.1.0

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

@@ -36,7 +36,7 @@ import {
   THICK_FLOOR_HINT,
   thickFloorAdvice,
 } from '../../../lib/floor-footprints'
-import { formatLinearMeasurement } from '../../../lib/measurements'
+import { formatLinearMeasurement } from '@pascal-app/core'
 import { FinishSwatch } from '../controls/finish-swatch'
 import { MetricControl } from '../controls/metric-control'
 import { SegmentedControl } from '../controls/segmented-control'

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

@@ -14,7 +14,7 @@ import {
   finishFloorOpening,
   openingRoom,
 } from '../../../lib/floor-edit-session'
-import { formatAreaLabel } from '../../../lib/measurements'
+import { formatAreaLabel } from '@pascal-app/core'
 import { Button } from '../primitives/button'
 import { Switch } from '../primitives/switch'
 import { PanelWrapper } from './panel-wrapper'

package/src/components/ui/panels/mobile-selection-bar.tsx

@@ -12,8 +12,8 @@ interface MobileSelectionBarProps {
   node: AnyNode | null
   label?: string
   icon?: string
-  onMove: () => void
-  onDuplicate: () => void
+  onMove?: () => void
+  onDuplicate?: () => void
   onDelete: () => void
   onEdit: () => void
 }
@@ -58,28 +58,32 @@ export function MobileSelectionBar({
       </button>
 
       <div className="flex items-center gap-0.5 border-border/40 border-l pl-1">
-        <button
-          aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.move', message: 'Move' })}
-          className={ACTION_BTN}
-          onClick={(e) => {
-            stop(e)
-            onMove()
-          }}
-          type="button"
-        >
-          <Move className="h-4 w-4" />
-        </button>
-        <button
-          aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.duplicate', message: 'Duplicate' })}
-          className={ACTION_BTN}
-          onClick={(e) => {
-            stop(e)
-            onDuplicate()
-          }}
-          type="button"
-        >
-          <Copy className="h-4 w-4" />
-        </button>
+        {onMove && (
+          <button
+            aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.move', message: 'Move' })}
+            className={ACTION_BTN}
+            onClick={(e) => {
+              stop(e)
+              onMove()
+            }}
+            type="button"
+          >
+            <Move className="h-4 w-4" />
+          </button>
+        )}
+        {onDuplicate && (
+          <button
+            aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.duplicate', message: 'Duplicate' })}
+            className={ACTION_BTN}
+            onClick={(e) => {
+              stop(e)
+              onDuplicate()
+            }}
+            type="button"
+          >
+            <Copy className="h-4 w-4" />
+          </button>
+        )}
         <button
           aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.delete', message: 'Delete' })}
           className={cn(

package/src/components/ui/panels/multi-height-mode.tsx

@@ -16,7 +16,7 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { formatLinearMeasurement } from '../../../lib/measurements'
+import { formatLinearMeasurement } from '@pascal-app/core'
 import { SegmentedControl } from '../controls/segmented-control'
 import { SliderControl } from '../controls/slider-control'
 import {
@@ -42,7 +42,7 @@ function wallFollowsLevelPatch(wall: WallNode, nodes: Record<string, AnyNode>):
 }
 
 function effectiveHeight(node: AnyNode, nodes: Record<string, AnyNode>): number {
-  if (node.type === 'wall') return getWallEffectiveHeightForNodes(node, nodes)
+  if (node.type === 'wall') return getWallEffectiveHeightForNodes(node, nodes, 0)
   if (node.type === 'ceiling') return resolveCeilingHeight(node, nodes)
   const height = (node as { height?: number }).height
   return typeof height === 'number' ? height : 0
@@ -72,7 +72,7 @@ export function applyMultiHeightMode(
         if (isCustom) return {}
         if (node.type === 'ceiling') return { height: ceilingCustomHeight(node, nodes) }
         if (node.type === 'wall') {
-          return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes)) }
+          return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes, 0)) }
         }
         return {}
       }

package/src/components/ui/panels/multi-selection-panel.tsx

@@ -14,7 +14,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { Building2, Copy, Group, Merge, Split, Trash2, Ungroup } from 'lucide-react'
 import { useMemo } from 'react'
 import { deleteSelection, duplicateSelectionAndPickUp } from '../../editor/group-actions'
-import { formatLinearMeasurement } from '../../../lib/measurements'
+import { formatLinearMeasurement } from '@pascal-app/core'
 import { triggerSFX } from '../../../lib/sfx-bus'
 import { writeWindowChanges } from '../../../lib/window-changes'
 import { collectSelectableCandidateIds } from '../../tools/select/select-candidates'

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

@@ -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/room-construction-rows.tsx

@@ -34,7 +34,7 @@ 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 { type FloorChoice, roomBuiltOn, separateFloorSummary } from '../../../lib/room-built-on'

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,7 +17,7 @@ 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'

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,6 +1,6 @@
 'use client'
 
-import { createContext, type ReactNode, useContext, useEffect, useRef } from 'react'
+import { createContext, type ReactNode, useContext, useLayoutEffect, useRef } from 'react'
 import { useIsMobile } from '../../hooks/use-mobile'
 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/panels/settings-panel/load-build-dialog.tsx

@@ -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/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

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

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/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/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,

package/src/components/viewer/viewer-rooms.tsx

@@ -4,6 +4,7 @@ import {
   type AnyNode,
   buildUnitReport,
   polygonInteriorPoint,
+  roomFloorElevation,
   sceneRegistry,
   useLocale,
   usePascalI18n,
@@ -15,7 +16,6 @@ import { useCallback, useEffect, useMemo } from 'react'
 import { Vector3 } from 'three'
 import { useShallow } from 'zustand/react/shallow'
 import { resolveRoomAssemblyHeights } from '../../lib/room-assembly-overlay'
-import { roomFloorElevation } from '../../lib/room-handle-drag'
 import { describeZoneOutline, type RoomSelectionRecord } from '../../lib/room-selection'
 import {
   selectViewerRoom,