@pascal-app/editor 1.0.0 → 1.0.3

package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx

@@ -227,12 +227,12 @@ export function KeyboardShortcutsDialog() {
       <DialogTrigger asChild>
         <Button className="w-full justify-start gap-2" variant="outline">
           <Keyboard className="size-4" />
-          Keyboard Shortcuts
+          Keyboard shortcuts
         </Button>
       </DialogTrigger>
       <DialogContent className="flex max-h-[85vh] flex-col overflow-hidden p-0 sm:max-w-3xl">
         <DialogHeader className="shrink-0 border-b px-6 py-4">
-          <DialogTitle>Keyboard Shortcuts</DialogTitle>
+          <DialogTitle>Keyboard shortcuts</DialogTitle>
           <DialogDescription>
             Shortcuts are context-aware. Guided constraints are enabled by default; hold Shift
             during an active gesture to build freely.

package/src/components/ui/sidebar/panels/settings-panel/print-export-button.test.ts

@@ -40,7 +40,7 @@ describe('simple 3D print export', () => {
       return artifact
     }
 
-    const prepared = await preparePrintExport(modelExport, true)
+    const prepared = await preparePrintExport(modelExport, true, 'print-3mf')
 
     expect(calls).toEqual([
       {
@@ -58,6 +58,33 @@ describe('simple 3D print export', () => {
     expect(prepared).toEqual({ artifact, report })
   })
 
+  test('uses the same safe profile for printable STL files', async () => {
+    const calls: { format?: string; options?: ModelExportOptions }[] = []
+    const stlReport: PrintExportReport = { ...report, format: 'stl' }
+    const artifact = { blob: new Blob(['stl']), filename: 'house.zip', metadata: stlReport }
+    const modelExport: ModelExport = async (format, options) => {
+      calls.push({ format, options })
+      return artifact
+    }
+
+    const prepared = await preparePrintExport(modelExport, false, 'print-stl')
+
+    expect(calls).toEqual([
+      {
+        format: 'print-stl',
+        options: {
+          onlyVisible: false,
+          download: false,
+          printScale: 100,
+          printScope: 'levels',
+          printContent: 'structure',
+          printBase: 'none',
+        },
+      },
+    ])
+    expect(prepared).toEqual({ artifact, report: stlReport })
+  })
+
   test('blocks the download when preflight finds invalid geometry', async () => {
     const blockedReport: PrintExportReport = {
       ...report,
@@ -76,7 +103,7 @@ describe('simple 3D print export', () => {
       metadata: blockedReport,
     })
 
-    await expect(preparePrintExport(modelExport, true)).rejects.toThrow(
+    await expect(preparePrintExport(modelExport, true, 'print-3mf')).rejects.toThrow(
       'One wall has an open edge.',
     )
   })
@@ -122,7 +149,7 @@ describe('simple 3D print export', () => {
       metadata: blockedBundleReport,
     })
 
-    await expect(preparePrintExport(modelExport, true)).rejects.toThrow(
+    await expect(preparePrintExport(modelExport, true, 'print-3mf')).rejects.toThrow(
       'The upper level has an open edge.',
     )
   })
@@ -133,7 +160,7 @@ describe('simple 3D print export', () => {
       filename: 'house.3mf',
     })
 
-    await expect(preparePrintExport(modelExport, false)).rejects.toThrow(
+    await expect(preparePrintExport(modelExport, false, 'print-3mf')).rejects.toThrow(
       'did not return a valid file',
     )
   })

package/src/components/ui/sidebar/panels/settings-panel/print-export-button.tsx

@@ -5,7 +5,11 @@ import {
   isPrintLevelBundleReport,
   type PrintLevelBundleReport,
 } from '../../../../../lib/level-print-export'
-import type { ModelExport, ModelExportArtifact } from '../../../../../lib/model-export'
+import type {
+  ModelExport,
+  ModelExportArtifact,
+  ModelExportFormat,
+} from '../../../../../lib/model-export'
 import {
   isPrintExportReport,
   type PrintExportReport,
@@ -17,6 +21,8 @@ type PreparedPrintExport = {
   report: PrintExportReport | PrintLevelBundleReport
 }
 
+type PrintModelExportFormat = Extract<ModelExportFormat, 'print-3mf' | 'print-stl'>
+
 function downloadArtifact(artifact: ModelExportArtifact) {
   const url = URL.createObjectURL(artifact.blob)
   const link = document.createElement('a')
@@ -39,8 +45,9 @@ function firstBlockingMessage(report: PrintExportReport | PrintLevelBundleReport
 export async function preparePrintExport(
   modelExport: ModelExport,
   onlyVisible: boolean,
+  format: PrintModelExportFormat,
 ): Promise<PreparedPrintExport> {
-  const artifact = await modelExport('print-3mf', {
+  const artifact = await modelExport(format, {
     onlyVisible,
     download: false,
     printScale: 100,
@@ -68,38 +75,50 @@ export async function preparePrintExport(
 
 export function PrintExportButton({ onlyVisible }: { onlyVisible: boolean }) {
   const modelExport = useEditor((state) => state.modelExport)
-  const [isExporting, setIsExporting] = useState(false)
+  const [exportingFormat, setExportingFormat] = useState<PrintModelExportFormat | null>(null)
   const [error, setError] = useState<string | null>(null)
 
-  const handleExport = async () => {
+  const handleExport = async (format: PrintModelExportFormat) => {
     if (!modelExport) return
 
-    setIsExporting(true)
+    setExportingFormat(format)
     setError(null)
     try {
-      const prepared = await preparePrintExport(modelExport, onlyVisible)
+      const prepared = await preparePrintExport(modelExport, onlyVisible, format)
       downloadArtifact(prepared.artifact)
     } catch (reason) {
       setError(reason instanceof Error ? reason.message : '3D print export failed.')
     } finally {
-      setIsExporting(false)
+      setExportingFormat(null)
     }
   }
 
+  const isExporting = exportingFormat !== null
+
   return (
     <>
       <Button
-        aria-busy={isExporting}
+        aria-busy={exportingFormat === 'print-3mf'}
+        className="w-full justify-start gap-2"
+        disabled={isExporting || !modelExport}
+        onClick={() => void handleExport('print-3mf')}
+        variant="outline"
+      >
+        <Printer className="size-4" />
+        Export 3D print 3MF
+      </Button>
+      <Button
+        aria-busy={exportingFormat === 'print-stl'}
         className="w-full justify-start gap-2"
         disabled={isExporting || !modelExport}
-        onClick={handleExport}
+        onClick={() => void handleExport('print-stl')}
         variant="outline"
       >
         <Printer className="size-4" />
-        Export 3D print files
+        Export 3D print STL
       </Button>
       {error && (
-        <div className="flex gap-2 text-destructive text-xs">
+        <div className="col-span-full flex gap-2 text-destructive text-xs">
           <AlertTriangle className="mt-0.5 size-4 shrink-0" />
           <span>{error}</span>
         </div>

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

@@ -26,8 +26,15 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
   const createNode = useScene((state) => state.createNode)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const name = useScene((s) => s.nodes[nodeId]?.name)
+  // Levels and elevators first, units after, so the units read as one group.
   const children = useScene(
-    useShallow((s) => (s.nodes[nodeId] as BuildingNode | undefined)?.children ?? []),
+    useShallow((s) => {
+      const ids = (s.nodes[nodeId] as BuildingNode | undefined)?.children ?? []
+      return [
+        ...ids.filter((id) => s.nodes[id]?.type !== 'unit'),
+        ...ids.filter((id) => s.nodes[id]?.type === 'unit'),
+      ]
+    }),
   )
   const isSelected = useViewer((state) => state.selection.buildingId === nodeId)
   const isHovered = useViewer((state) => state.hoveredId === nodeId)

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

@@ -19,6 +19,7 @@ import {
   Copy,
   Eye,
   EyeOff,
+  Group,
   Loader2,
   MoreHorizontal,
   Pencil,
@@ -50,15 +51,17 @@ import {
   metersToLinearUnit,
   squareMetersToAreaUnit,
 } from './../../../../../lib/measurements'
-import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
+import { createLocalGuideImage, createLocalScan } from './../../../../../lib/local-guide-image'
 import { editorHostTreeChildrenRegistry } from './../../../../../lib/host-tree-children'
+import { createUnitInBuilding, toggleZoneMembership } from './../../../../../lib/units'
 import { cn } from './../../../../../lib/utils'
 import useEditor from './../../../../../store/use-editor'
 import { useUploadStore } from '../../../../../store/use-upload'
 import { MetricControl } from '../../../controls/metric-control'
 import { LevelDuplicateDialog } from '../../../level-duplicate-dialog'
 import { InlineRenameInput } from './inline-rename-input'
-import { focusTreeNode, TreeNode } from './tree-node'
+import { ZoneMembershipCheckbox } from './zone-membership-checkbox'
+import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeDragProvider } from './tree-node-drag'
 
 // ============================================================================
@@ -497,6 +500,7 @@ const LevelReferences = memo(function LevelReferences({
   const deleteNode = useScene((s) => s.deleteNode)
   const setSelection = useViewer((s) => s.setSelection)
   const setShowGuides = useViewer((s) => s.setShowGuides)
+  const setShowScans = useViewer((s) => s.setShowScans)
   const references = useScene(
     useShallow((s) =>
       Object.values(s.nodes).filter(
@@ -566,6 +570,23 @@ const LevelReferences = memo(function LevelReferences({
       return
     }
 
+    if (!onUploadAsset) {
+      useUploadStore.getState().startUpload(levelId, 'scan', file.name)
+      useUploadStore.getState().setStatus(levelId, 'uploading')
+
+      try {
+        const { scan, url } = await createLocalScan({ createNode, file, levelId })
+        setShowScans(true)
+        setSelectedReferenceId(scan.id)
+        setSelection({ selectedIds: [], zoneId: null })
+        useUploadStore.getState().setResult(levelId, url)
+        window.setTimeout(() => useUploadStore.getState().clearUpload(levelId), 600)
+      } catch {
+        useUploadStore.getState().setError(levelId, 'Could not add that scan.')
+      }
+      return
+    }
+
     if (!projectId) {
       useUploadStore.getState().startUpload(levelId, 'scan', file.name)
       useUploadStore.getState().setError(levelId, 'No active project. Please open a project first.')
@@ -573,7 +594,7 @@ const LevelReferences = memo(function LevelReferences({
     }
 
     clearUpload(levelId)
-    onUploadAsset?.(projectId, levelId, file, type)
+    onUploadAsset(projectId, levelId, file, type)
   }
 
   const handleDelete = async (nodeId: string, e: React.MouseEvent) => {
@@ -949,7 +970,7 @@ const LevelItem = memo(function LevelItem({
                 precision={2}
                 step={0.05}
                 unit="m"
-                value={Math.round((level.baseElevation ?? 0) * 100) / 100}
+                value={(level.baseElevation ?? 0)}
               />
             </div>
             <LevelReferences
@@ -1060,6 +1081,74 @@ const LevelsSection = memo(function LevelsSection({
   )
 })
 
+const UnitsSection = memo(function UnitsSection({
+  buildingId,
+}: {
+  buildingId: BuildingNode['id']
+}) {
+  const unitIds = useScene(
+    useShallow((s) => {
+      const building = s.nodes[buildingId] as BuildingNode | undefined
+      return (building?.children ?? []).filter((id) => s.nodes[id]?.type === 'unit')
+    }),
+  )
+  const hasUnits = unitIds.length > 0
+  const [expanded, setExpanded] = useState(hasUnits)
+
+  useEffect(() => {
+    if (hasUnits) setExpanded(true)
+  }, [hasUnits])
+
+  const handleNewUnit = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    createUnitInBuilding(buildingId)
+    setExpanded(true)
+  }
+
+  return (
+    <div className="subtle-scrollbar max-h-72 shrink-0 overflow-y-auto overflow-x-hidden">
+      <TreeNodeWrapper
+        actions={
+          <button
+            className="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"
+            onClick={handleNewUnit}
+            title="New unit"
+            type="button"
+          >
+            <Plus className="h-3 w-3" />
+          </button>
+        }
+        depth={1}
+        expanded={expanded}
+        hasChildren
+        icon={<Group className="h-3.5 w-3.5" />}
+        label={
+          <span className="flex items-center gap-1.5">
+            Units
+            {hasUnits && <span className="text-muted-foreground text-xs">{unitIds.length}</span>}
+          </span>
+        }
+        onClick={() => setExpanded((value) => !value)}
+        onToggle={() => setExpanded((value) => !value)}
+      >
+        {unitIds.map((unitId) => (
+          <TreeNode depth={2} key={unitId} nodeId={unitId} />
+        ))}
+        <TreeNodeWrapper
+          depth={2}
+          expanded={false}
+          hasChildren={false}
+          icon={<Plus className="h-3.5 w-3.5" />}
+          isLast
+          label="New unit"
+          onClick={handleNewUnit}
+          onToggle={() => {}}
+        />
+      </TreeNodeWrapper>
+    </div>
+  )
+})
+
 const LayerToggle = memo(function LayerToggle() {
   const structureLayer = useEditor((state) => state.structureLayer)
   const setStructureLayer = useEditor((state) => state.setStructureLayer)
@@ -1195,6 +1284,11 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
   const deleteNode = useScene((state) => state.deleteNode)
   const updateNode = useScene((state) => state.updateNode)
+  const focusedUnitId = useViewer((state) => state.focusedUnitId)
+  const focusedUnit = useScene((s) => {
+    const unit = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+    return unit?.type === 'unit' ? unit : null
+  })
   const selectedZoneId = useViewer((state) => state.selection.zoneId)
   const hoveredId = useViewer((state) => state.hoveredId)
   const setSelection = useViewer((state) => state.setSelection)
@@ -1268,6 +1362,13 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
         style={{ left: 8, width: 4 }}
       />
 
+      {focusedUnit && (
+        <ZoneMembershipCheckbox
+          checked={focusedUnit.members.includes(zone.id)}
+          onToggle={() => toggleZoneMembership(focusedUnit.id, zone.id)}
+          unitName={focusedUnit.name || 'Unit'}
+        />
+      )}
       <span className={cn('mr-2', !isSelected && 'opacity-40')}>
         <ColorDot color={zone.color} onChange={handleColorChange} />
       </span>
@@ -1611,6 +1712,7 @@ const BuildingItem = memo(function BuildingItem({
                   onUploadAsset={onUploadAsset}
                   projectId={projectId}
                 />
+                <UnitsSection buildingId={building.id} />
                 <LayerToggle />
               </div>
               <div className="subtle-scrollbar relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden">

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

@@ -70,12 +70,7 @@ export const ItemTreeNode = memo(function ItemTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      handleTreeSelection(
-        e,
-        nodeId,
-        useViewer.getState().selection.selectedIds,
-        setSelection,
-      )
+      handleTreeSelection(e, nodeId, useViewer.getState().selection.selectedIds, setSelection)
       routeTreeSelectionToNode(node)
     },
     [node, nodeId, setSelection],
@@ -134,7 +129,7 @@ export const ItemTreeNode = memo(function ItemTreeNode({
             depth={depth + 1}
             isLast={index === children.length - 1}
             key={childId}
-            nodeId={childId}
+            nodeId={childId as AnyNodeId}
           />
         ))}
     </TreeNodeWrapper>

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

@@ -24,7 +24,7 @@ interface ShelfTreeNodeProps {
 /**
  * Sidebar tree entry for shelf. Mirrors `item-tree-node`'s shape so the
  * shelf's hosted items list as collapsible children — same pattern items
- * use for their nested items. The shelf has its own `children: ItemNode[`id`]`
+ * use for their nested items. The shelf has its own `children: string[]`
  * field on the schema; items reparent into it via `def.surfaces` + the
  * placement coordinator's shelf strategy.
  */
@@ -69,12 +69,7 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      handleTreeSelection(
-        e,
-        nodeId,
-        useViewer.getState().selection.selectedIds,
-        setSelection,
-      )
+      handleTreeSelection(e, nodeId, useViewer.getState().selection.selectedIds, setSelection)
       routeTreeSelectionToNode(node)
     },
     [node, nodeId, setSelection],
@@ -124,7 +119,7 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
             depth={depth + 1}
             isLast={index === children.length - 1}
             key={childId}
-            nodeId={childId}
+            nodeId={childId as AnyNodeId}
           />
         ))}
     </TreeNodeWrapper>

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

@@ -107,6 +107,7 @@ import { SlabTreeNode } from './slab-tree-node'
 import { SolarPanelTreeNode } from './solar-panel-tree-node'
 import { SpawnTreeNode } from './spawn-tree-node'
 import { StairTreeNode } from './stair-tree-node'
+import { UnitTreeNode } from './unit-tree-node'
 import { WallTreeNode } from './wall-tree-node'
 import { WindowTreeNode } from './window-tree-node'
 import { ZoneTreeNode } from './zone-tree-node'
@@ -175,6 +176,7 @@ const treeNodeByType: Record<string, TreeNodeComponent> = {
   roof: RoofTreeNode,
   scan: RegistryTreeNode,
   stair: StairTreeNode,
+  unit: UnitTreeNode,
   door: DoorTreeNode,
   window: WindowTreeNode,
   zone: ZoneTreeNode as React.ComponentType<{
@@ -207,6 +209,8 @@ export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: Tr
 interface TreeNodeWrapperProps {
   nodeId?: string
   icon: React.ReactNode
+  /** Keep the icon's own color when unselected (color dots are the identity). */
+  keepIconColor?: boolean
   label: React.ReactNode
   depth: number
   hasChildren: boolean
@@ -232,6 +236,7 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
     {
       nodeId,
       icon,
+      keepIconColor,
       label,
       depth,
       hasChildren,
@@ -326,7 +331,7 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
             <span
               className={cn(
                 'flex h-5 w-5 shrink-0 items-center justify-center transition-all duration-200',
-                !isSelected && 'opacity-60 grayscale',
+                !isSelected && !keepIconColor && 'opacity-60 grayscale',
               )}
             >
               {icon}