@pascal-app/editor 1.0.3 → 1.0.5

package/src/components/ui/sidebar/panels/site-panel/inline-rename-input.tsx

@@ -3,25 +3,47 @@ import { Pencil } from 'lucide-react'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from './../../../../../lib/utils'
 
-interface InlineRenameInputProps {
-  nodeId: AnyNodeId
+interface InlineRenameFieldProps {
+  name: string | undefined
+  /** Receives the trimmed name, or `undefined` when cleared. */
+  onRename: (name: string | undefined) => void
   isEditing: boolean
   onStopEditing: () => void
   defaultName: string
+  /** Shown instead of the stored name when not editing (a level's display name). */
+  displayName?: string
   className?: string
   onStartEditing?: () => void
 }
 
+type InlineRenameInputProps = Omit<InlineRenameFieldProps, 'name' | 'onRename'> & {
+  nodeId: AnyNodeId
+}
+
+/** Renames a scene node through `updateNode`. */
 export const InlineRenameInput = memo(function InlineRenameInput({
   nodeId,
+  ...props
+}: InlineRenameInputProps) {
+  const updateNode = useScene((s) => s.updateNode)
+  const name = useScene((s) => s.nodes[nodeId]?.name)
+  const handleRename = useCallback(
+    (next: string | undefined) => updateNode(nodeId, { name: next }),
+    [nodeId, updateNode],
+  )
+  return <InlineRenameField {...props} name={name} onRename={handleRename} />
+})
+
+export const InlineRenameField = memo(function InlineRenameField({
+  name,
+  onRename,
   isEditing,
   onStopEditing,
   defaultName,
+  displayName,
   className,
   onStartEditing,
-}: InlineRenameInputProps) {
-  const updateNode = useScene((s) => s.updateNode)
-  const name = useScene((s) => s.nodes[nodeId]?.name)
+}: InlineRenameFieldProps) {
   const [value, setValue] = useState(name || '')
   const inputRef = useRef<HTMLInputElement>(null)
   const inputSize = Math.max((value || defaultName).length, 1)
@@ -42,10 +64,10 @@ export const InlineRenameInput = memo(function InlineRenameInput({
   const handleSave = useCallback(() => {
     const trimmed = value.trim()
     if (trimmed !== name) {
-      updateNode(nodeId, { name: trimmed || undefined })
+      onRename(trimmed || undefined)
     }
     onStopEditing()
-  }, [value, nodeId, name, updateNode, onStopEditing])
+  }, [value, name, onRename, onStopEditing])
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
@@ -61,7 +83,7 @@ export const InlineRenameInput = memo(function InlineRenameInput({
     return (
       <div className="group/rename flex h-5 min-w-0 items-center gap-1">
         <span className={cn('truncate border-transparent border-b', className)}>
-          {name || defaultName}
+          {displayName ?? (name || defaultName)}
         </span>
         {onStartEditing && (
           <button

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

@@ -8,7 +8,6 @@ import { InlineRenameInput } from './inline-rename-input'
 import {
   focusTreeNode,
   handleTreeSelection,
-  routeTreeSelectionToNode,
   TreeNode,
   TreeNodeWrapper,
 } from './tree-node'
@@ -71,9 +70,8 @@ export const ItemTreeNode = memo(function ItemTreeNode({
     (e: React.MouseEvent) => {
       e.stopPropagation()
       handleTreeSelection(e, nodeId, useViewer.getState().selection.selectedIds, setSelection)
-      routeTreeSelectionToNode(node)
     },
-    [node, nodeId, setSelection],
+    [nodeId, setSelection],
   )
 
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])

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

@@ -3,7 +3,7 @@ import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { Layers } from 'lucide-react'
 import { memo, useCallback, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { getDefaultLevelName } from '@pascal-app/core'
+import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -26,6 +26,7 @@ export const LevelTreeNode = memo(function LevelTreeNode({
     useShallow((s) => (s.nodes[nodeId] as LevelNode | undefined)?.children ?? []),
   )
   const level = useScene((s) => (s.nodes[nodeId] as LevelNode | undefined)?.level ?? 0)
+  const levelName = useScene((s) => (s.nodes[nodeId] as LevelNode | undefined)?.name)
   const isSelected = useViewer((state) => state.selection.levelId === nodeId)
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
@@ -40,6 +41,7 @@ export const LevelTreeNode = memo(function LevelTreeNode({
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
   const defaultName = getDefaultLevelName(level)
+  const displayName = getLevelDisplayName({ name: levelName, level })
 
   return (
     <TreeNodeWrapper
@@ -55,6 +57,7 @@ export const LevelTreeNode = memo(function LevelTreeNode({
       label={
         <InlineRenameInput
           defaultName={defaultName}
+          displayName={displayName}
           isEditing={isEditing}
           nodeId={nodeId}
           onStartEditing={handleStartEditing}

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

@@ -10,7 +10,6 @@ import { InlineRenameInput } from './inline-rename-input'
 import {
   focusTreeNode,
   handleTreeSelection,
-  routeTreeSelectionToNode,
   TreeNode,
   TreeNodeWrapper,
 } from './tree-node'
@@ -99,9 +98,8 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      routeTreeSelectionToNode(node)
     },
-    [node, nodeId, setSelection],
+    [nodeId, setSelection],
   )
 
   return (

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

@@ -49,15 +49,12 @@ export const RoofTreeNode = memo(function RoofTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
       if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
         setRoofHostDragArmedId(nodeId)
       }

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

@@ -9,7 +9,6 @@ import { InlineRenameInput } from './inline-rename-input'
 import {
   focusTreeNode,
   handleTreeSelection,
-  routeTreeSelectionToNode,
   TreeNode,
   TreeNodeWrapper,
 } from './tree-node'
@@ -70,9 +69,8 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
     (e: React.MouseEvent) => {
       e.stopPropagation()
       handleTreeSelection(e, nodeId, useViewer.getState().selection.selectedIds, setSelection)
-      routeTreeSelectionToNode(node)
     },
-    [node, nodeId, setSelection],
+    [nodeId, setSelection],
   )
 
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])

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

@@ -1,9 +1,8 @@
-import { type AnyNodeId, type SlabNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, floorFootprintName, type SlabNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { formatAreaLabel } from './../../../../../lib/measurements'
-import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -27,19 +26,22 @@ export const SlabTreeNode = memo(function SlabTreeNode({
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const unit = useViewer((state) => state.unit)
+  // A base plate is one footprint's "Floor & foundation": listed by the
+  // footprint's name ("Shared floor", "Lanai floor"), opening that panel.
+  const footprint = useScene((s) => {
+    const node = s.nodes[nodeId]
+    return node?.type === 'slab' && node.plateRole === 'base' ? floorFootprintName(s.nodes, node) : null
+  })
 
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )
@@ -63,13 +65,19 @@ export const SlabTreeNode = memo(function SlabTreeNode({
       isSelected={isSelected}
       isVisible={isVisible}
       label={
-        <InlineRenameInput
-          defaultName={defaultName}
-          isEditing={isEditing}
-          nodeId={nodeId}
-          onStartEditing={handleStartEditing}
-          onStopEditing={handleStopEditing}
-        />
+        footprint ? (
+          <span className="truncate" data-footprint-entry={nodeId}>
+            {footprint}
+          </span>
+        ) : (
+          <InlineRenameInput
+            defaultName={defaultName}
+            isEditing={isEditing}
+            nodeId={nodeId}
+            onStartEditing={handleStartEditing}
+            onStopEditing={handleStopEditing}
+          />
+        )
       }
       nodeId={nodeId}
       onClick={handleClick}

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

@@ -3,7 +3,6 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 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 { TreeNodeActions } from './tree-node-actions'
@@ -30,15 +29,12 @@ export const SolarPanelTreeNode = memo(function SolarPanelTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

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

@@ -4,7 +4,6 @@ import { type SpawnNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
-import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -30,15 +29,12 @@ export const SpawnTreeNode = memo(function SpawnTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

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

@@ -4,7 +4,6 @@ import { AnimatePresence } from 'motion/react'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import useEditor from '../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -48,15 +47,12 @@ export const StairTreeNode = memo(function StairTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

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

@@ -3,8 +3,6 @@ import { useViewer } from '@pascal-app/viewer'
 import { ChevronRight } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
 import { forwardRef, memo, useEffect, useRef } from 'react'
-import { resolveNodeSelectionTarget } from '../../../../../lib/selection-routing'
-import useEditor from '../../../../../store/use-editor'
 import { expandSessionSelectionForNode } from '../../../../../store/use-session-groups'
 
 export function handleTreeSelection(
@@ -63,31 +61,6 @@ export function focusTreeNode(nodeId: AnyNodeId) {
   emitter.emit('camera-controls:focus', { nodeId })
 }
 
-export function routeTreeSelectionToNode(node: AnyNode | null | undefined) {
-  const target = node ? resolveNodeSelectionTarget(node) : null
-  if (!target) return
-
-  const selectedIdsAfterClick = useViewer.getState().selection.selectedIds
-  const editor = useEditor.getState()
-  let didRoute = false
-
-  if (target.phase !== editor.phase) {
-    editor.setPhase(target.phase)
-    didRoute = true
-  }
-  if (
-    target.phase === 'structure' &&
-    target.structureLayer &&
-    target.structureLayer !== useEditor.getState().structureLayer
-  ) {
-    useEditor.getState().setStructureLayer(target.structureLayer)
-    didRoute = true
-  }
-  if (didRoute) {
-    useViewer.getState().setSelection({ selectedIds: selectedIdsAfterClick })
-  }
-}
-
 import { cn } from '../../../../../lib/utils'
 import { BuildingTreeNode } from './building-tree-node'
 import { CeilingTreeNode } from './ceiling-tree-node'
@@ -310,14 +283,15 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
             />
           )}
 
-          <button
-            className="z-10 flex h-4 w-4 shrink-0 items-center justify-center bg-inherit"
-            onClick={(e) => {
-              e.stopPropagation()
-              onToggle()
-            }}
-          >
-            {hasChildren ? (
+          {/* A row with nothing to fold keeps the space, and a click there selects the row. */}
+          {hasChildren ? (
+            <button
+              className="z-10 flex h-4 w-4 shrink-0 items-center justify-center bg-inherit"
+              onClick={(e) => {
+                e.stopPropagation()
+                onToggle()
+              }}
+            >
               <motion.div
                 animate={{ rotate: expanded ? 90 : 0 }}
                 initial={false}
@@ -325,8 +299,10 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
               >
                 <ChevronRight className="h-3 w-3" />
               </motion.div>
-            ) : null}
-          </button>
+            </button>
+          ) : (
+            <span className="h-4 w-4 shrink-0" />
+          )}
           <div className="flex min-w-0 flex-1 items-center gap-2">
             <span
               className={cn(

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

@@ -14,7 +14,7 @@ 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'
+import { TreeNodeWrapper } from './tree-node'
 
 type UnitWarningCode = ReturnType<typeof unitWarnings>[number]['code']
 
@@ -55,7 +55,6 @@ export const UnitZoneRow = memo(function UnitZoneRow({
       event.stopPropagation()
       if (!zone) return
       setSelection({ levelId: zone.parentId as LevelNode['id'], zoneId })
-      routeTreeSelectionToNode(zone)
     },
     [zone, zoneId, setSelection],
   )
@@ -94,7 +93,7 @@ export const UnitZoneRow = memo(function UnitZoneRow({
       keepIconColor
       label={
         <span className="flex min-w-0 items-baseline gap-1.5">
-          <span className="truncate">{zone.name || 'Zone'}</span>
+          <span className="truncate">{zone.name || (zone.spaceRole === 'room' ? 'Room' : 'Zone')}</span>
           {levelLabel && (
             <span className="shrink-0 text-muted-foreground text-xs">{levelLabel}</span>
           )}

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

@@ -3,7 +3,6 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -52,15 +51,12 @@ export const WallTreeNode = memo(function WallTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

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

@@ -5,7 +5,6 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { resolveNodeSnapTarget, 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 { TreeNodeActions } from './tree-node-actions'
@@ -32,15 +31,12 @@ export const WindowTreeNode = memo(function WindowTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

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

@@ -3,6 +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 {
+  selectZoneOrRoom,
+  useZoneSelected,
+  zoneKindLabel,
+} from './../../../../../lib/room-zone-routing'
 import { toggleZoneMembership } from './../../../../../lib/units'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNodeWrapper } from './tree-node'
@@ -25,9 +30,9 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const color = useScene((s) => (s.nodes[nodeId] as ZoneNode | undefined)?.color)
   const polygon = useScene((s) => (s.nodes[nodeId] as ZoneNode | undefined)?.polygon ?? [])
-  const isSelected = useViewer((state) => state.selection.zoneId === nodeId)
+  const isSelected = useZoneSelected(nodeId)
+  const kind = useScene((s) => zoneKindLabel(s.nodes[nodeId] as ZoneNode | undefined))
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
-  const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const unit = useViewer((state) => state.unit)
   const focusedUnitId = useViewer((state) => state.focusedUnitId)
@@ -36,14 +41,14 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
     return focused?.type === 'unit' ? focused : null
   })
 
-  const handleClick = useCallback(() => setSelection({ zoneId: nodeId }), [nodeId, setSelection])
+  const handleClick = useCallback(() => selectZoneOrRoom(nodeId), [nodeId])
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
   const handleMouseEnter = useCallback(() => setHoveredId(nodeId), [nodeId, setHoveredId])
   const handleMouseLeave = useCallback(() => setHoveredId(null), [setHoveredId])
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const defaultName = `Zone (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
+  const defaultName = `${kind} (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
 
   return (
     <TreeNodeWrapper

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

@@ -137,7 +137,6 @@ export function ZonePanel() {
   const currentLevelId = useViewer((state) => state.selection.levelId)
   const selectedZoneId = useViewer((state) => state.selection.zoneId)
   const setSelection = useViewer((state) => state.setSelection)
-  const setPhase = useEditor((state) => state.setPhase)
   const setMode = useEditor((state) => state.setMode)
   const setTool = useEditor((state) => state.setTool)
 
@@ -149,7 +148,6 @@ export function ZonePanel() {
 
   const handleAddZone = () => {
     if (currentLevelId) {
-      setPhase('structure')
       setMode('build')
       setTool('zone')
     }
@@ -197,14 +195,14 @@ export function ZonePanel() {
           />
           <ActionButton
             className="w-full flex-none"
-            icon={<Trash2 className="h-4 w-4 text-red-400" />}
+            icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={() => deleteSelectedZone(false)}
             type="button"
           />
           <ActionButton
             className="w-full flex-none"
-            icon={<Trash2 className="h-4 w-4 text-red-400" />}
+            icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
             label="Delete with contents"
             onClick={() => deleteSelectedZone(true)}
             type="button"

package/src/components/ui/sidebar/tab-bar.tsx

@@ -19,6 +19,16 @@ export type SidebarTab = {
    * keeps the icon highlighted regardless of collapse.
    */
   noPanel?: boolean
+  /** Runs when the entry is picked — with `noPanel`, to put its surface on the stage. */
+  onSelect?: () => void
+  /**
+   * For a `noPanel` entry whose surface can leave the stage on its own (a view
+   * closed from the view bar): false once it has, and the rail goes back to
+   * the panel that was open before it.
+   */
+  stageActive?: boolean
+  /** Runs when the rail moves from this entry to another: a stage entry takes its surface down. */
+  onDeselect?: () => void
 }
 
 interface TabBarProps {
@@ -37,8 +47,8 @@ export function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {
             className={cn(
               'relative h-7 rounded-md px-3 font-medium text-sm transition-colors',
               isActive
-                ? 'bg-accent text-foreground'
-                : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground',
+                ? 'bg-sidebar-accent text-foreground'
+                : 'text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground',
             )}
             key={tab.id}
             onClick={() => {
@@ -91,8 +101,8 @@ export function IconRail({ tabs, activeTab, collapsed, onIconClick }: IconRailPr
             className={cn(
               'group flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-200 [&_img]:transition-[opacity,filter] [&_img]:duration-200',
               showActive
-                ? 'bg-accent text-foreground shadow-sm [&_img]:opacity-100 [&_img]:grayscale-0'
-                : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground [&_img]:opacity-60 [&_img]:grayscale hover:[&_img]:opacity-100 hover:[&_img]:grayscale-0',
+                ? 'bg-sidebar-accent text-foreground shadow-sm [&_img]:opacity-100 [&_img]:grayscale-0'
+                : 'text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground [&_img]:opacity-60 [&_img]:grayscale hover:[&_img]:opacity-100 hover:[&_img]:grayscale-0',
             )}
             onClick={() => {
               triggerSFX('sfx:menu-click')

package/src/components/ui/sidebar/use-plugin-panels.tsx

@@ -12,28 +12,37 @@ import {
   useSyncExternalStore,
 } from 'react'
 import useEditor from '../../../store/use-editor'
+import { isViewVisible } from '../../../store/view-layout'
+import { PluginsView } from '../../editor/views/plugins-view'
+import { PLUGINS_VIEW_ID } from '../../editor/views/use-editor-views'
 import {
   editorHostPanelRegistry,
   type EditorHostPanel,
   managedPluginIds,
   showsPluginManager,
 } from '../../../lib/plugin-panels'
+import { IconRefImage } from '../icon-ref'
 import { ErrorBoundary } from '../primitives/error-boundary'
 import type { ExtraPanel } from './icon-rail'
-import { PluginsPanel } from './panels/plugins-panel'
 
+// The rail's "+" puts the plugin directory on the stage, as a view in the
+// focused pane, and stays lit while it is there instead of leaving an
+// unrelated panel open beside it. `component` serves the v1 sidebar.
 const pluginsManagerPanel: ExtraPanel = {
   id: 'plugins',
   label: 'Plugins',
-  icon: <Plus className="h-5 w-5" />,
-  component: PluginsPanel,
+  icon: <img alt="" className="size-8 object-contain" src="/icons/plugins.webp" />,
+  component: PluginsView,
+  noPanel: true,
+  onSelect: () => useEditor.getState().showView(PLUGINS_VIEW_ID),
+  onDeselect: () => useEditor.getState().closeView(PLUGINS_VIEW_ID),
 }
 
 /** Resolve a plugin's {@link IconRef} into a rail-sized React node. Mirrors the
  * inspector's `renderIcon`, sized for the 24px icon-rail button. */
 function renderIconRef(ref: IconRef): ReactNode {
   if (ref.kind === 'url') {
-    return <img alt="" className="h-5 w-5 object-contain" src={ref.src} />
+    return <IconRefImage className="h-5 w-5" src={ref.src} />
   }
   if (ref.kind === 'iconify') {
     return <Icon height={20} icon={ref.name} width={20} />
@@ -106,6 +115,7 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
   const workspaceMode = useEditor((s) => s.workspaceMode)
   const installedPlugins = useScene((s) => s.installedPlugins)
   const readOnly = useScene((s) => s.readOnly)
+  const pluginsViewShown = useEditor((s) => isViewVisible(s, PLUGINS_VIEW_ID))
   const hostIds = new Set(hostPanels?.map((p) => p.id))
 
   useEffect(() => {
@@ -141,7 +151,7 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
       readOnly,
       workspaceMode,
     })
-      ? [pluginsManagerPanel]
+      ? [{ ...pluginsManagerPanel, stageActive: pluginsViewShown }]
       : []
   return [...(hostPanels ?? []), ...fromRegistry, ...manager]
 }