@pascal-app/editor 1.0.0-beta.4 → 1.0.0

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

@@ -0,0 +1,140 @@
+import { describe, expect, test } from 'bun:test'
+import type { PrintLevelBundleReport } from '../../../../../lib/level-print-export'
+import type { ModelExport, ModelExportOptions } from '../../../../../lib/model-export'
+import type { PrintExportReport } from '../../../../../lib/print-export'
+import { preparePrintExport } from './print-export-button'
+
+const report: PrintExportReport = {
+  kind: 'print-export-report',
+  version: 2,
+  format: '3mf',
+  scale: 100,
+  units: 'millimeter',
+  orientation: 'z-up',
+  status: 'pass',
+  bounds: {
+    min: { x: -25, y: -15, z: 0 },
+    max: { x: 25, y: 15, z: 20 },
+    width: 50,
+    depth: 30,
+    height: 20,
+  },
+  triangleCount: 12,
+  invalidTriangleCount: 0,
+  degenerateTriangleCount: 0,
+  boundaryEdgeCount: 0,
+  nonManifoldEdgeCount: 0,
+  connectedComponentCount: 1,
+  solidComponentCount: 1,
+  invertedWinding: false,
+  volumeMm3: 30_000,
+  diagnostics: [],
+}
+
+describe('simple 3D print export', () => {
+  test('uses one fixed safe print profile', async () => {
+    const calls: { format?: string; options?: ModelExportOptions }[] = []
+    const artifact = { blob: new Blob(['3mf']), filename: 'house.3mf', metadata: report }
+    const modelExport: ModelExport = async (format, options) => {
+      calls.push({ format, options })
+      return artifact
+    }
+
+    const prepared = await preparePrintExport(modelExport, true)
+
+    expect(calls).toEqual([
+      {
+        format: 'print-3mf',
+        options: {
+          onlyVisible: true,
+          download: false,
+          printScale: 100,
+          printScope: 'levels',
+          printContent: 'structure',
+          printBase: 'none',
+        },
+      },
+    ])
+    expect(prepared).toEqual({ artifact, report })
+  })
+
+  test('blocks the download when preflight finds invalid geometry', async () => {
+    const blockedReport: PrintExportReport = {
+      ...report,
+      status: 'blocked',
+      diagnostics: [
+        {
+          severity: 'error',
+          code: 'open_boundary',
+          message: 'One wall has an open edge.',
+        },
+      ],
+    }
+    const modelExport: ModelExport = async () => ({
+      blob: new Blob(['3mf']),
+      filename: 'house.3mf',
+      metadata: blockedReport,
+    })
+
+    await expect(preparePrintExport(modelExport, true)).rejects.toThrow(
+      'One wall has an open edge.',
+    )
+  })
+
+  test('shows a per-level preflight error when the bundle has no top-level error', async () => {
+    const blockedPartReport: PrintExportReport = {
+      ...report,
+      status: 'blocked',
+      diagnostics: [
+        {
+          severity: 'error',
+          code: 'open_boundary',
+          message: 'The upper level has an open edge.',
+        },
+      ],
+    }
+    const blockedBundleReport: PrintLevelBundleReport = {
+      kind: 'print-level-export-report',
+      version: 2,
+      format: '3mf',
+      scale: 100,
+      units: 'millimeter',
+      orientation: 'z-up',
+      status: 'blocked',
+      partCount: 1,
+      parts: [
+        {
+          kind: 'level',
+          levelId: 'upper-level',
+          label: 'Upper level',
+          objectName: 'Upper level',
+          filename: null,
+          sourceBaseMeters: 3,
+          report: blockedPartReport,
+        },
+      ],
+      excludedNodeIds: [],
+      diagnostics: [],
+    }
+    const modelExport: ModelExport = async () => ({
+      blob: new Blob(['3mf']),
+      filename: 'house.zip',
+      metadata: blockedBundleReport,
+    })
+
+    await expect(preparePrintExport(modelExport, true)).rejects.toThrow(
+      'The upper level has an open edge.',
+    )
+  })
+
+  test('rejects an exporter response without print metadata', async () => {
+    const modelExport: ModelExport = async () => ({
+      blob: new Blob(['3mf']),
+      filename: 'house.3mf',
+    })
+
+    await expect(preparePrintExport(modelExport, false)).rejects.toThrow(
+      'did not return a valid file',
+    )
+  })
+})

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

@@ -0,0 +1,109 @@
+import { AlertTriangle, Printer } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '../../../../../components/ui/primitives/button'
+import {
+  isPrintLevelBundleReport,
+  type PrintLevelBundleReport,
+} from '../../../../../lib/level-print-export'
+import type { ModelExport, ModelExportArtifact } from '../../../../../lib/model-export'
+import {
+  isPrintExportReport,
+  type PrintExportReport,
+} from '../../../../../lib/print-export'
+import useEditor from '../../../../../store/use-editor'
+
+type PreparedPrintExport = {
+  artifact: ModelExportArtifact
+  report: PrintExportReport | PrintLevelBundleReport
+}
+
+function downloadArtifact(artifact: ModelExportArtifact) {
+  const url = URL.createObjectURL(artifact.blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = artifact.filename
+  link.click()
+  URL.revokeObjectURL(url)
+}
+
+function firstBlockingMessage(report: PrintExportReport | PrintLevelBundleReport) {
+  const bundleDiagnostic = report.diagnostics.find((item) => item.severity === 'error')
+  if (bundleDiagnostic || !isPrintLevelBundleReport(report)) return bundleDiagnostic?.message
+
+  for (const part of report.parts) {
+    const partDiagnostic = part.report.diagnostics.find((item) => item.severity === 'error')
+    if (partDiagnostic) return partDiagnostic.message
+  }
+}
+
+export async function preparePrintExport(
+  modelExport: ModelExport,
+  onlyVisible: boolean,
+): Promise<PreparedPrintExport> {
+  const artifact = await modelExport('print-3mf', {
+    onlyVisible,
+    download: false,
+    printScale: 100,
+    printScope: 'levels',
+    printContent: 'structure',
+    printBase: 'none',
+  })
+
+  if (
+    !artifact ||
+    (!isPrintExportReport(artifact.metadata) && !isPrintLevelBundleReport(artifact.metadata))
+  ) {
+    throw new Error('The 3D print exporter did not return a valid file.')
+  }
+
+  if (artifact.metadata.status === 'blocked') {
+    throw new Error(
+      firstBlockingMessage(artifact.metadata) ??
+        'This project cannot be exported as printable parts.',
+    )
+  }
+
+  return { artifact, report: artifact.metadata }
+}
+
+export function PrintExportButton({ onlyVisible }: { onlyVisible: boolean }) {
+  const modelExport = useEditor((state) => state.modelExport)
+  const [isExporting, setIsExporting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleExport = async () => {
+    if (!modelExport) return
+
+    setIsExporting(true)
+    setError(null)
+    try {
+      const prepared = await preparePrintExport(modelExport, onlyVisible)
+      downloadArtifact(prepared.artifact)
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : '3D print export failed.')
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  return (
+    <>
+      <Button
+        aria-busy={isExporting}
+        className="w-full justify-start gap-2"
+        disabled={isExporting || !modelExport}
+        onClick={handleExport}
+        variant="outline"
+      >
+        <Printer className="size-4" />
+        Export 3D print files
+      </Button>
+      {error && (
+        <div className="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/dormer-tree-node.tsx

@@ -2,10 +2,11 @@ import { type AnyNodeId, type DormerNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import { SnapTargetIcon } from '../../../snap-target-badge'
 import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
-import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 
 interface DormerTreeNodeProps {
@@ -26,8 +27,12 @@ export const DormerTreeNode = memo(function DormerTreeNode({
   isLast,
 }: DormerTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(true)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId] as DormerNode | undefined)
+  const children = useScene(
+    useShallow((s) => (s.nodes[nodeId] as DormerNode | undefined)?.children ?? []),
+  )
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
@@ -55,8 +60,8 @@ export const DormerTreeNode = memo(function DormerTreeNode({
     <TreeNodeWrapper
       actions={<TreeNodeActions nodeId={nodeId} />}
       depth={depth}
-      expanded={false}
-      hasChildren={false}
+      expanded={expanded}
+      hasChildren={children.length > 0}
       icon={
         <SnapTargetIcon target="roof">
           <Image
@@ -86,7 +91,16 @@ export const DormerTreeNode = memo(function DormerTreeNode({
       onDoubleClick={() => focusTreeNode(nodeId)}
       onMouseEnter={() => setHoveredId(nodeId)}
       onMouseLeave={() => setHoveredId(null)}
-      onToggle={() => {}}
-    />
+      onToggle={() => setExpanded((value) => !value)}
+    >
+      {children.map((childId, index) => (
+        <TreeNode
+          depth={depth + 1}
+          isLast={index === children.length - 1}
+          key={childId}
+          nodeId={childId as AnyNodeId}
+        />
+      ))}
+    </TreeNodeWrapper>
   )
 })

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

@@ -11,11 +11,14 @@ import {
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import {
   Camera,
   ChevronDown,
+  ChevronRight,
   Copy,
+  Eye,
+  EyeOff,
   Loader2,
   MoreHorizontal,
   Pencil,
@@ -25,7 +28,7 @@ import {
   X,
 } from 'lucide-react'
 import { AnimatePresence, LayoutGroup, motion } from 'motion/react'
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState, useSyncExternalStore } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import {
@@ -48,9 +51,11 @@ import {
   squareMetersToAreaUnit,
 } from './../../../../../lib/measurements'
 import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
+import { editorHostTreeChildrenRegistry } from './../../../../../lib/host-tree-children'
 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'
@@ -349,8 +354,25 @@ const ReferenceItem = memo(function ReferenceItem({
   handleDelete: (id: string, e: React.MouseEvent) => void
 }) {
   const [isEditing, setIsEditing] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(true)
+  const updateNode = useScene((state) => state.updateNode)
+  const selectedReferenceId = useEditor((state) => state.selectedReferenceId)
+  const isCapture = refNode.type === 'scan'
+  const isVisible = refNode.visible !== false
+  useSyncExternalStore(
+    editorHostTreeChildrenRegistry.subscribe,
+    editorHostTreeChildrenRegistry.getSnapshot,
+    editorHostTreeChildrenRegistry.getSnapshot,
+  )
+  const hostChildren = isCapture
+    ? editorHostTreeChildrenRegistry.childrenForKind(refNode.type)
+    : undefined
+  const hasHostChildren = Boolean(hostChildren?.hasChildren(refNode))
+  const HostChildren = hasHostChildren ? hostChildren?.component : undefined
+
   const handleSelect = () => {
     setSelectedReferenceId(refNode.id)
+    useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
   }
 
   const handleDoubleClick = () => {
@@ -358,53 +380,98 @@ const ReferenceItem = memo(function ReferenceItem({
   }
 
   return (
-    <div
-      className="group/ref relative flex h-8 cursor-pointer select-none items-center border-border/50 border-b pr-2 text-xs transition-colors hover:bg-accent/30"
-      onClick={handleSelect}
-      onDoubleClick={handleDoubleClick}
-    >
+    <div className="relative flex flex-col">
       <div
         className={cn(
-          'pointer-events-none absolute z-10 w-px bg-border/50',
-          isLastRow ? 'top-0 bottom-1/2' : 'top-0 bottom-0',
+          'group/ref relative flex h-8 cursor-pointer select-none items-center border-border/50 border-b pr-2 text-xs transition-colors hover:bg-accent/30',
+          selectedReferenceId === refNode.id && 'bg-accent/50 text-foreground',
+          !isVisible && 'opacity-50',
         )}
-        style={{ left: 45 }}
-      />
-      <div
-        className="pointer-events-none absolute top-1/2 z-10 h-px bg-border/50"
-        style={{ left: 45, width: 8 }}
-      />
+        onClick={handleSelect}
+        onDoubleClick={handleDoubleClick}
+      >
+        <div
+          className={cn(
+            'pointer-events-none absolute z-10 w-px bg-border/50',
+            isLastRow && !(hasHostChildren && isExpanded) ? 'top-0 bottom-1/2' : 'top-0 bottom-0',
+          )}
+          style={{ left: 45 }}
+        />
+        <div
+          className="pointer-events-none absolute top-1/2 z-10 h-px bg-border/50"
+          style={{ left: 45, width: 8 }}
+        />
 
-      <div className="flex h-8 min-w-0 flex-1 cursor-pointer items-center gap-2 py-0 pl-[60px] text-muted-foreground group-hover/ref:text-foreground">
-        {refNode.type === 'scan' ? (
-          <img
-            alt="Scan"
-            className="h-3.5 w-3.5 shrink-0 object-contain opacity-70 transition-opacity group-hover/ref:opacity-100"
-            src="/icons/mesh.webp"
-          />
-        ) : (
-          <img
-            alt="Guide"
-            className="h-3.5 w-3.5 shrink-0 object-contain opacity-70 transition-opacity group-hover/ref:opacity-100"
-            src="/icons/floorplan.webp"
+        {isCapture ? (
+          <button
+            className="z-20 ml-[52px] flex h-4 w-4 shrink-0 items-center justify-center"
+            onClick={(event) => {
+              event.stopPropagation()
+              if (hasHostChildren) setIsExpanded((expanded) => !expanded)
+            }}
+            type="button"
+          >
+            {hasHostChildren ? (
+              <ChevronRight
+                className={cn('h-3 w-3 transition-transform', isExpanded && 'rotate-90')}
+              />
+            ) : null}
+          </button>
+        ) : null}
+
+        <div
+          className={cn(
+            'flex h-8 min-w-0 flex-1 cursor-pointer items-center gap-2 py-0 text-muted-foreground group-hover/ref:text-foreground',
+            !isCapture && 'pl-[60px]',
+          )}
+        >
+          {isCapture ? (
+            <img
+              alt="Capture"
+              className="h-3.5 w-3.5 shrink-0 object-contain opacity-70 transition-opacity group-hover/ref:opacity-100"
+              src="/icons/mesh.webp"
+            />
+          ) : (
+            <img
+              alt="Guide"
+              className="h-3.5 w-3.5 shrink-0 object-contain opacity-70 transition-opacity group-hover/ref:opacity-100"
+              src="/icons/floorplan.webp"
+            />
+          )}
+          <InlineRenameInput
+            defaultName={isCapture ? 'Capture' : 'Guide Image'}
+            isEditing={isEditing}
+            nodeId={refNode.id}
+            onStartEditing={() => setIsEditing(true)}
+            onStopEditing={() => setIsEditing(false)}
           />
-        )}
-        <InlineRenameInput
-          defaultName={refNode.type === 'scan' ? '3D Scan' : 'Guide Image'}
-          isEditing={isEditing}
-          nodeId={refNode.id}
-          onStartEditing={() => setIsEditing(true)}
-          onStopEditing={() => setIsEditing(false)}
-        />
-      </div>
+        </div>
 
-      <button
-        className="z-20 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/ref:opacity-100 dark:hover:bg-white/10"
-        onClick={(e) => handleDelete(refNode.id, e)}
-        title="Delete"
-      >
-        <Trash2 className="h-3 w-3" />
-      </button>
+        {isCapture ? (
+          <button
+            className="z-20 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/ref:opacity-100 dark:hover:bg-white/10"
+            onClick={(event) => {
+              event.stopPropagation()
+              updateNode(refNode.id, { visible: !isVisible })
+            }}
+            title={isVisible ? 'Hide' : 'Show'}
+            type="button"
+          >
+            {isVisible ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
+          </button>
+        ) : null}
+        <button
+          className="z-20 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/ref:opacity-100 dark:hover:bg-white/10"
+          onClick={(e) => handleDelete(refNode.id, e)}
+          title="Delete"
+          type="button"
+        >
+          <Trash2 className="h-3 w-3" />
+        </button>
+      </div>
+      {isExpanded && HostChildren ? (
+        <HostChildren depth={3} nodeId={refNode.id} parentVisible={isVisible} />
+      ) : null}
     </div>
   )
 })
@@ -642,7 +709,8 @@ const LevelItem = memo(function LevelItem({
       ? (level.parentId as BuildingNode['id'])
       : undefined
 
-  const selectLevel = (levelId: LevelNode['id']) => {
+  const selectLevel = (levelId: LevelNode['id'], measure = true) => {
+    if (measure && selectedLevelId !== levelId) markPerfAction('level-switch', levelId)
     setSelection(buildingId ? { buildingId, levelId } : { levelId })
   }
 
@@ -681,7 +749,7 @@ const LevelItem = memo(function LevelItem({
       )
     }
     createNodes(createOps)
-    selectLevel(newLevelId as LevelNode['id'])
+    selectLevel(newLevelId as LevelNode['id'], false)
     setDuplicateDialogOpen(false)
   }
 
@@ -873,6 +941,17 @@ const LevelItem = memo(function LevelItem({
             initial={{ height: 0, opacity: 0 }}
             transition={{ type: 'spring', bounce: 0, duration: 0.3 }}
           >
+            <div className="relative border-border/50 border-b py-2 pr-3 pl-[60px]">
+              <div className="pointer-events-none absolute top-0 bottom-0 left-[45px] z-10 w-px bg-border/50" />
+              <MetricControl
+                label="Base elevation"
+                onChange={(value) => updateNode(level.id, { baseElevation: value })}
+                precision={2}
+                step={0.05}
+                unit="m"
+                value={Math.round((level.baseElevation ?? 0) * 100) / 100}
+              />
+            </div>
             <LevelReferences
               isLastLevel={isLast}
               levelId={level.id}
@@ -1320,7 +1399,10 @@ const ContentSection = memo(function ContentSection() {
       if (!selectedLevelId) return []
       const lvl = s.nodes[selectedLevelId] as LevelNode | undefined
       if (!lvl) return []
-      return lvl.children.filter((childId) => s.nodes[childId]?.type !== 'zone')
+      return lvl.children.filter((childId) => {
+        const type = s.nodes[childId]?.type
+        return type !== 'zone' && type !== 'scan'
+      })
     }),
   )
 

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

@@ -1,5 +1,5 @@
 import { type LevelNode, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { Layers } from 'lucide-react'
 import { memo, useCallback, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
@@ -30,7 +30,10 @@ export const LevelTreeNode = memo(function LevelTreeNode({
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
 
-  const handleClick = useCallback(() => setSelection({ levelId: nodeId }), [nodeId, setSelection])
+  const handleClick = useCallback(() => {
+    if (!isSelected) markPerfAction('level-switch', nodeId)
+    setSelection({ levelId: nodeId })
+  }, [isSelected, nodeId, setSelection])
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
   const handleToggle = useCallback(() => setExpanded((prev) => !prev), [])
   const handleStartEditing = useCallback(() => setIsEditing(true), [])

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

@@ -2,8 +2,9 @@ import { Icon as IconifyIcon } from '@iconify/react'
 import { type AnyNodeId, nodeRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { editorHostTreeChildrenRegistry } from '../../../../../lib/host-tree-children'
 import { resolveNodeSnapTarget, SnapTargetIcon } from '../../../snap-target-badge'
 import { InlineRenameInput } from './inline-rename-input'
 import {
@@ -43,9 +44,19 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
+  useSyncExternalStore(
+    editorHostTreeChildrenRegistry.subscribe,
+    editorHostTreeChildrenRegistry.getSnapshot,
+    editorHostTreeChildrenRegistry.getSnapshot,
+  )
 
   const presentation = node ? nodeRegistry.get(node.type)?.presentation : undefined
   const tree = node ? nodeRegistry.get(node.type)?.tree : undefined
+  const hostChildren = node
+    ? editorHostTreeChildrenRegistry.childrenForKind(node.type)
+    : undefined
+  const hasHostChildren = Boolean(node && hostChildren?.hasChildren(node))
+  const HostChildren = hasHostChildren ? hostChildren?.component : undefined
   const icon = presentation?.icon
   const iconSrc = icon?.kind === 'url' ? icon.src : '/icons/roof.webp'
   const iconElement =
@@ -63,7 +74,7 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
   const snapTarget = resolveNodeSnapTarget(node)
   const defaultName =
     node ? tree?.label?.(node, useScene.getState().nodes) || node.name || presentation?.label || 'Node' : 'Node'
-  const hasChildren = children.length > 0
+  const hasChildren = children.length > 0 || hasHostChildren
 
   useEffect(() => {
     return useViewer.subscribe((state) => {
@@ -126,15 +137,21 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
       onMouseLeave={() => setHoveredId(null)}
       onToggle={() => setExpanded((prev) => !prev)}
     >
-      {hasChildren &&
-        children.map((childId, index) => (
-          <TreeNode
-            depth={depth + 1}
-            isLast={index === children.length - 1}
-            key={childId}
-            nodeId={childId as AnyNodeId}
-          />
-        ))}
+      {hasChildren && (
+        <>
+          {children.map((childId, index) => (
+            <TreeNode
+              depth={depth + 1}
+              isLast={!hasHostChildren && index === children.length - 1}
+              key={childId}
+              nodeId={childId as AnyNodeId}
+            />
+          ))}
+          {HostChildren ? (
+            <HostChildren depth={depth + 1} nodeId={nodeId} parentVisible={isVisible} />
+          ) : null}
+        </>
+      )}
     </TreeNodeWrapper>
   )
 })

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

@@ -0,0 +1,8 @@
+import { describe, expect, test } from 'bun:test'
+import { getTreeNodeComponent } from './tree-node'
+
+describe('site tree node routing', () => {
+  test('renders plugin node kinds through the generic tree row', () => {
+    expect(getTreeNodeComponent('lean-to-extension')).toBe(getTreeNodeComponent('plugin-kind'))
+  })
+})