@pascal-app/editor 1.0.0 → 1.0.3

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

@@ -0,0 +1,224 @@
+import {
+  type AnyNodeId,
+  getLevelDisplayName,
+  type LevelNode,
+  type UnitNode,
+  unitWarnings,
+  useScene,
+  type ZoneNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { AlertTriangle, Trash2, X } from 'lucide-react'
+import { memo, useCallback, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
+import { assignZoneToUnit, enterUnitFocus } from './../../../../../lib/units'
+import { InlineRenameInput } from './inline-rename-input'
+import { routeTreeSelectionToNode, TreeNodeWrapper } from './tree-node'
+
+type UnitWarningCode = ReturnType<typeof unitWarnings>[number]['code']
+
+const WARNING_LABELS: Record<UnitWarningCode, string> = {
+  empty: 'No zones in this unit',
+  'non-adjacent-levels': 'Members sit on non-adjacent levels',
+}
+
+const ACTION_BUTTON_CLASS =
+  'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10'
+
+interface UnitZoneRowProps {
+  zoneId: ZoneNode['id']
+  depth: number
+  isLast?: boolean
+  onRemove?: (zoneId: ZoneNode['id']) => void
+}
+
+/** One member zone under a unit: name + level, click selects it. */
+export const UnitZoneRow = memo(function UnitZoneRow({
+  zoneId,
+  depth,
+  isLast,
+  onRemove,
+}: UnitZoneRowProps) {
+  const zone = useScene((s) => s.nodes[zoneId] as ZoneNode | undefined)
+  const levelLabel = useScene((s) => {
+    const level = zone?.parentId ? (s.nodes[zone.parentId as AnyNodeId] as LevelNode | undefined) : undefined
+    return level?.type === 'level' ? getLevelDisplayName(level) : null
+  })
+  const isSelected = useViewer((s) => s.selection.zoneId === zoneId)
+  const isHovered = useViewer((s) => s.hoveredId === zoneId)
+  const setSelection = useViewer((s) => s.setSelection)
+  const setHoveredId = useViewer((s) => s.setHoveredId)
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      if (!zone) return
+      setSelection({ levelId: zone.parentId as LevelNode['id'], zoneId })
+      routeTreeSelectionToNode(zone)
+    },
+    [zone, zoneId, setSelection],
+  )
+
+  if (!zone) return null
+
+  return (
+    <TreeNodeWrapper
+      actions={
+        onRemove ? (
+          <button
+            className={ACTION_BUTTON_CLASS}
+            onClick={(event) => {
+              event.stopPropagation()
+              onRemove(zoneId)
+            }}
+            title="Remove from unit"
+            type="button"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        ) : undefined
+      }
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <span
+          className="h-3 w-3 rounded-sm border border-border/50"
+          style={{ backgroundColor: zone.color }}
+        />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      keepIconColor
+      label={
+        <span className="flex min-w-0 items-baseline gap-1.5">
+          <span className="truncate">{zone.name || 'Zone'}</span>
+          {levelLabel && (
+            <span className="shrink-0 text-muted-foreground text-xs">{levelLabel}</span>
+          )}
+        </span>
+      }
+      nodeId={zoneId}
+      onClick={handleClick}
+      onMouseEnter={() => setHoveredId(zoneId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => {}}
+    />
+  )
+})
+
+interface UnitTreeNodeProps {
+  nodeId: AnyNodeId
+  depth: number
+  isLast?: boolean
+}
+
+export const UnitTreeNode = memo(function UnitTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: UnitTreeNodeProps) {
+  const unitId = nodeId as UnitNode['id']
+  const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const updateNode = useScene((s) => s.updateNode)
+  const deleteNode = useScene((s) => s.deleteNode)
+  const color = useScene((s) => (s.nodes[nodeId] as UnitNode | undefined)?.color)
+  const members = useScene(
+    useShallow((s) => (s.nodes[nodeId] as UnitNode | undefined)?.members ?? []),
+  )
+  const warningCodes = useScene(
+    useShallow((s) => {
+      const unit = s.nodes[nodeId]
+      return unit?.type === 'unit' ? unitWarnings(unit, s.nodes).map((w) => w.code) : []
+    }),
+  )
+  const isSelected = useViewer((s) => s.selection.selectedIds.includes(nodeId))
+  const isHovered = useViewer((s) => s.hoveredId === nodeId)
+  const setHoveredId = useViewer((s) => s.setHoveredId)
+  const isFocused = useViewer((s) => s.focusedUnitId === unitId)
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      enterUnitFocus(unitId)
+    },
+    [unitId],
+  )
+
+  const handleRemoveMember = useCallback(
+    (zoneId: ZoneNode['id']) => assignZoneToUnit(zoneId, null),
+    [],
+  )
+
+  const warningTitle = [...new Set(warningCodes)].map((code) => WARNING_LABELS[code]).join('\n')
+
+  return (
+    <TreeNodeWrapper
+      actions={
+        <button
+          className={ACTION_BUTTON_CLASS}
+          onClick={(event) => {
+            event.stopPropagation()
+            deleteNode(unitId)
+          }}
+          title="Delete unit"
+          type="button"
+        >
+          <Trash2 className="h-3 w-3" />
+        </button>
+      }
+      depth={depth}
+      expanded={expanded}
+      hasChildren={members.length > 0}
+      icon={
+        <ColorDot
+          color={color ?? '#f59e0b'}
+          onChange={(next) => updateNode(unitId, { color: next })}
+        />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      keepIconColor
+      label={
+        <span className="flex min-w-0 items-center gap-1.5">
+          <InlineRenameInput
+            defaultName="Unit"
+            isEditing={isEditing}
+            nodeId={nodeId}
+            onStartEditing={() => setIsEditing(true)}
+            onStopEditing={() => setIsEditing(false)}
+          />
+          {isFocused && (
+            <span className="shrink-0 rounded-full bg-primary/15 px-1.5 text-[10px] text-primary leading-4">
+              Focused
+            </span>
+          )}
+          {warningCodes.length > 0 && (
+            <span className="shrink-0 text-muted-foreground" title={warningTitle}>
+              <AlertTriangle className="h-3 w-3" />
+            </span>
+          )}
+        </span>
+      }
+      nodeId={nodeId}
+      onClick={handleClick}
+      onMouseEnter={() => setHoveredId(nodeId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => setExpanded((value) => !value)}
+    >
+      {members.map((zoneId, index) => (
+        <UnitZoneRow
+          depth={depth + 1}
+          isLast={index === members.length - 1}
+          key={zoneId}
+          onRemove={handleRemoveMember}
+          zoneId={zoneId}
+        />
+      ))}
+    </TreeNodeWrapper>
+  )
+})

package/src/components/ui/sidebar/panels/site-panel/zone-membership-checkbox.tsx

@@ -0,0 +1,22 @@
+import { Checkbox } from './../../../primitives/checkbox'
+
+/** Membership toggle shown on zone rows while a unit is focused. */
+export function ZoneMembershipCheckbox({
+  checked,
+  onToggle,
+  unitName,
+}: {
+  checked: boolean
+  onToggle: () => void
+  unitName: string
+}) {
+  return (
+    <Checkbox
+      aria-label={`In ${unitName}`}
+      checked={checked}
+      className="mr-2"
+      onCheckedChange={onToggle}
+      onDoubleClick={(event) => event.stopPropagation()}
+    />
+  )
+}

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

@@ -3,9 +3,11 @@ 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 { toggleZoneMembership } from './../../../../../lib/units'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { ZoneMembershipCheckbox } from './zone-membership-checkbox'
 
 interface ZoneTreeNodeProps {
   nodeId: ZoneNode['id']
@@ -28,6 +30,11 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const unit = useViewer((state) => state.unit)
+  const focusedUnitId = useViewer((state) => state.focusedUnitId)
+  const focusedUnit = useScene((s) => {
+    const focused = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+    return focused?.type === 'unit' ? focused : null
+  })
 
   const handleClick = useCallback(() => setSelection({ zoneId: nodeId }), [nodeId, setSelection])
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
@@ -50,15 +57,25 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}
+      keepIconColor
       isVisible={isVisible}
       label={
-        <InlineRenameInput
-          defaultName={defaultName}
-          isEditing={isEditing}
-          nodeId={nodeId}
-          onStartEditing={handleStartEditing}
-          onStopEditing={handleStopEditing}
-        />
+        <span className="flex min-w-0 items-center">
+          {focusedUnit && (
+            <ZoneMembershipCheckbox
+              checked={focusedUnit.members.includes(nodeId)}
+              onToggle={() => toggleZoneMembership(focusedUnit.id, nodeId)}
+              unitName={focusedUnit.name || 'Unit'}
+            />
+          )}
+          <InlineRenameInput
+            defaultName={defaultName}
+            isEditing={isEditing}
+            nodeId={nodeId}
+            onStartEditing={handleStartEditing}
+            onStopEditing={handleStopEditing}
+          />
+        </span>
       }
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}

package/src/components/ui/snap-target-badge.tsx

@@ -1,4 +1,5 @@
 import type { AnyNode, AssetInput } from '@pascal-app/core'
+import { isProceduralItem } from '@pascal-app/core/procedural-items'
 import type { ReactNode } from 'react'
 import { cn } from '../../lib/utils'
 
@@ -35,6 +36,7 @@ export function resolveAssetSnapTarget(attachTo: AssetInput['attachTo']): SnapTa
 
 export function resolveNodeSnapTarget(node: AnyNode | null | undefined): SnapTarget | null {
   if (!node) return null
+  if (isProceduralItem(node)) return resolveAssetSnapTarget(node.recipe.mounting?.attachTo)
   if ('roofSegmentId' in node && typeof node.roofSegmentId === 'string') return 'roof'
   if (node.type === 'downspout') return 'roof'
   if (node.type === 'door' || node.type === 'window') return 'wall'

package/src/components/viewer/floorplan-preview-visibility.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, test } from 'bun:test'
+import type { AnyNode } from '@pascal-app/core'
+import { isVisibleInFloorplan } from './floorplan-preview-visibility'
+
+const node = (id: string, type: string, parentId: string | null, visible = true) =>
+  ({ object: 'node', id, type, parentId, visible, metadata: {} }) as unknown as AnyNode
+
+describe('isVisibleInFloorplan', () => {
+  test('a hidden Site keeps the buildings on it in the plan', () => {
+    const nodes: Record<string, AnyNode> = {
+      site_a: node('site_a', 'site', null, false),
+      building_a: node('building_a', 'building', 'site_a'),
+      level_a: node('level_a', 'level', 'building_a'),
+      wall_a: node('wall_a', 'wall', 'level_a'),
+      wall_b: node('wall_b', 'wall', 'level_a', false),
+    }
+    expect(isVisibleInFloorplan(nodes.wall_a!, nodes)).toBe(true)
+    expect(isVisibleInFloorplan(nodes.wall_b!, nodes)).toBe(false)
+    expect(isVisibleInFloorplan(nodes.site_a!, nodes)).toBe(false)
+  })
+
+  test('a hidden building or level still hides its subtree', () => {
+    const nodes: Record<string, AnyNode> = {
+      site_a: node('site_a', 'site', null),
+      building_a: node('building_a', 'building', 'site_a', false),
+      level_a: node('level_a', 'level', 'building_a'),
+      wall_a: node('wall_a', 'wall', 'level_a'),
+      building_b: node('building_b', 'building', 'site_a'),
+      level_b: node('level_b', 'level', 'building_b', false),
+      wall_b: node('wall_b', 'wall', 'level_b'),
+    }
+    expect(isVisibleInFloorplan(nodes.wall_a!, nodes)).toBe(false)
+    expect(isVisibleInFloorplan(nodes.wall_b!, nodes)).toBe(false)
+  })
+})

package/src/components/viewer/floorplan-preview-visibility.ts

@@ -0,0 +1,19 @@
+import { type AnyNode, hidesDescendants } from '@pascal-app/core'
+
+/**
+ * A node draws in the plan unless it, or an ancestor whose flag reaches its
+ * descendants, is hidden. A hidden Site keeps its buildings on the plan; see
+ * `hidesDescendants`.
+ */
+export function isVisibleInFloorplan(node: AnyNode, nodes: Record<string, AnyNode>): boolean {
+  if (node.visible === false) return false
+  const seen = new Set<string>([node.id])
+  let current: AnyNode | undefined = node.parentId ? nodes[node.parentId] : undefined
+  while (current) {
+    if (seen.has(current.id)) return true
+    seen.add(current.id)
+    if (current.visible === false && hidesDescendants(current)) return false
+    current = current.parentId ? nodes[current.parentId] : undefined
+  }
+  return true
+}

package/src/components/viewer/floorplan-preview.tsx

@@ -62,6 +62,7 @@ import {
   rotateFloorplanPoint,
   visibleFloorplanViewWidth,
 } from './floorplan-preview-navigation'
+import { isVisibleInFloorplan } from './floorplan-preview-visibility'
 
 const READ_ONLY_PALETTE: FloorplanPalette = {
   selectedStroke: '#4f46e5',
@@ -193,18 +194,6 @@ export function normalizeFloorplanPreviewNodes(
   return normalized
 }
 
-function isVisibleInFloorplan(node: AnyNode, nodes: Record<string, AnyNode>): boolean {
-  const seen = new Set<string>()
-  let current: AnyNode | undefined = node
-  while (current) {
-    if (seen.has(current.id)) return true
-    seen.add(current.id)
-    if (current.visible === false) return false
-    current = current.parentId ? nodes[current.parentId] : undefined
-  }
-  return true
-}
-
 function buildFloorplanGeometries(
   nodes: Record<string, AnyNode>,
   installedPlugins: readonly string[] | undefined,

package/src/components/viewer/viewer-scene-header.tsx

@@ -15,6 +15,7 @@ import Link from 'next/link'
 import type { ReactNode } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { cn } from '../../lib/utils'
+import { ViewerUnitsPanel } from './viewer-units-panel'
 
 const getNodeName = (node: AnyNode): string => {
   if ('name' in node && node.name) return node.name
@@ -63,6 +64,7 @@ export const ViewerSceneHeader = ({
   const selectedNode = useScene((s) =>
     firstSelectedId ? (s.nodes[firstSelectedId as AnyNodeId] as AnyNode | undefined) : null,
   )
+  const sceneNodes = useScene((s) => s.nodes)
   // Highest first so the list reads top-down like a building section.
   const levels = useScene(
     useShallow((s) => {
@@ -231,6 +233,7 @@ export const ViewerSceneHeader = ({
           </div>
         </div>
       )}
+      {building && <ViewerUnitsPanel nodes={sceneNodes} />}
     </div>
   )
 }

package/src/components/viewer/viewer-units-panel.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import {
+  type AnyNode,
+  buildUnitReport,
+  type LevelNode,
+  type UnitKind,
+  type UnitNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useMemo } from 'react'
+import { getAreaUnitLabel, squareMetersToAreaUnit } from '../../lib/measurements'
+import { cn } from '../../lib/utils'
+
+const UNIT_KIND_LABELS: Record<UnitKind, string> = {
+  apartment: 'Apartment',
+  'hotel-room': 'Hotel room',
+  commercial: 'Commercial',
+  common: 'Common',
+}
+
+type UnitRow = {
+  unit: UnitNode
+  zoneCount: number
+  areaM2: number
+  /** Levels carrying member zones, lowest ordinal first. */
+  levelIds: LevelNode['id'][]
+}
+
+/**
+ * Read-only unit list shared by the editor preview and the published viewer.
+ * Clicking a row focuses the unit and reveals a member floor through the shared
+ * `useViewer.selection`; a second click clears the focus. Hidden without units.
+ */
+export function ViewerUnitsPanel({ nodes }: { nodes: Readonly<Record<string, AnyNode>> }) {
+  const focusedUnitId = useViewer((s) => s.focusedUnitId)
+  const areaUnit = useViewer((s) => s.unit)
+
+  const rows = useMemo<UnitRow[]>(
+    () =>
+      Object.values(nodes)
+        .filter((node): node is UnitNode => node.type === 'unit')
+        .map((unit) => {
+          const report = buildUnitReport(unit, nodes)
+          const ordinals = new Map<LevelNode['id'], number>()
+          for (const member of report.members) {
+            if (member.levelId && member.levelOrdinal !== null) {
+              ordinals.set(member.levelId, member.levelOrdinal)
+            }
+          }
+          return {
+            unit,
+            zoneCount: report.memberCount,
+            areaM2: report.grossAreaM2,
+            levelIds: [...ordinals.entries()].sort((a, b) => a[1] - b[1]).map(([id]) => id),
+          }
+        }),
+    [nodes],
+  )
+
+  if (rows.length === 0) return null
+
+  return (
+    <div className="corner-smooth pointer-events-auto flex w-48 flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 py-1 shadow-elevation-4 backdrop-blur-xl">
+      <span className="px-3 py-2 font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
+        Units
+      </span>
+      <div className="flex flex-col">
+        {rows.map((row) => {
+          const isFocused = row.unit.id === focusedUnitId
+          const area = Math.round(squareMetersToAreaUnit(row.areaM2, areaUnit))
+          const details = `${UNIT_KIND_LABELS[row.unit.kind]} · ${row.zoneCount} ${row.zoneCount === 1 ? 'zone' : 'zones'} · ${area} ${getAreaUnitLabel(areaUnit)}`
+          return (
+            <button
+              className={cn(
+                'group/row relative flex w-full cursor-pointer select-none items-center border-border/50 border-r border-r-transparent border-b px-3 py-1.5 text-sm transition-all duration-200',
+                isFocused
+                  ? 'border-r-3 border-r-white bg-accent/50 text-foreground'
+                  : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
+              )}
+              key={row.unit.id}
+              onClick={() => {
+                const viewer = useViewer.getState()
+                if (isFocused) {
+                  viewer.setFocusedUnit(null)
+                  return
+                }
+                viewer.setFocusedUnit(row.unit.id)
+                // Same rule as the editor: keep the current floor when it
+                // already carries a member zone, otherwise reveal the lowest one.
+                const current = viewer.selection.levelId
+                const levelId =
+                  current && row.levelIds.includes(current) ? current : row.levelIds[0]
+                if (levelId && levelId !== current) viewer.setSelection({ levelId })
+              }}
+              type="button"
+            >
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <span className="flex h-4 w-4 shrink-0 items-center justify-center">
+                  <span
+                    className="h-2.5 w-2.5 rounded-full"
+                    style={{ backgroundColor: row.unit.color }}
+                  />
+                </span>
+                <div className="min-w-0 flex-1 text-left">
+                  <div className="truncate">{row.unit.name}</div>
+                  <div className="truncate text-[11px] text-muted-foreground">{details}</div>
+                </div>
+              </div>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/viewer-zone-system.tsx

@@ -33,10 +33,14 @@ export const ViewerZoneSystem = () => {
       // Zone geometry: visible in zone mode on the right level, OR when this zone is selected.
       // The editor ZoneSystem handles the selected zone's opacity animation.
       const isSelected = id === zoneId
+      // A zone the author hid (sidebar eye) takes the group with it — this
+      // per-frame write would otherwise undo the renderer's `visible` prop.
+      const nodeVisible = zone.visible !== false
       const shouldShowGeometry =
+        nodeVisible &&
         !isCaptureMode &&
         ((structureLayer === 'zones' && !!levelId && isOnSelectedLevel) || isSelected)
-      if (!obj.visible) obj.visible = true
+      if (obj.visible !== nodeVisible) obj.visible = nodeVisible
       obj.traverse((child) => {
         if ((child as Mesh).isMesh) {
           child.visible = shouldShowGeometry
@@ -44,7 +48,8 @@ export const ViewerZoneSystem = () => {
       })
 
       // Labels: always visible on the current level (regardless of mode or zone selection)
-      const showLabel = !isCaptureMode && !zoneLabelsHidden && !!levelId && isOnSelectedLevel
+      const showLabel =
+        nodeVisible && !isCaptureMode && !zoneLabelsHidden && !!levelId && isOnSelectedLevel
       const targetOpacity = showLabel ? '1' : '0'
       const labelEl = document.getElementById(`${id}-label`)
       if (labelEl && labelEl.style.opacity !== targetOpacity) {