@pascal-app/editor 1.0.4 → 1.0.6

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

@@ -1,4 +1,6 @@
+import { downloadProjectFile } from '../../../../../lib/download-project-file'
 import {
+  getProjectFileSink,
   clearSceneHistory,
   DEFAULT_LEVEL_HEIGHT,
   emitter,
@@ -26,9 +28,12 @@ import {
   Layers,
   ListTree,
   Map as MapIcon,
+  Monitor,
+  Moon,
   Save,
   ChevronDown,
   Send,
+  Sun,
   Trash2,
   Upload,
 } from 'lucide-react'
@@ -55,6 +60,7 @@ import {
   sendGlbToLocalApp,
   waitForLocalImport,
 } from '../../../../../lib/send-to-app'
+import { SegmentedControl } from './../../../../../components/ui/controls/segmented-control'
 import { Button } from './../../../../../components/ui/primitives/button'
 import {
   Dialog,
@@ -66,12 +72,15 @@ import { Input } from './../../../../../components/ui/primitives/input'
 import { Switch } from './../../../../../components/ui/primitives/switch'
 import { cn } from './../../../../../lib/utils'
 import { refusedObjectsNotice } from './../../../../../components/editor/group-actions'
+import { addStoreyBelow, addStoreyOnTop } from './../../../../../lib/add-storey'
 import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
 import { bringBuildArtifacts } from './../../../../../lib/scene-clipboard'
 import useEditor, { selectDefaultBuildingAndLevel } from './../../../../../store/use-editor'
 import useFloorplanMode from './../../../../../store/use-floorplan-mode'
 import { type SendToAppStep, useSendToApp } from './../../../../../store/use-send-to-app'
 import { AudioSettingsDialog } from './audio-settings-dialog'
+import { AnimationSpeedSetting } from './animation-speed-setting'
+import { ConstructionAnimationSetting } from './construction-animation-setting'
 import { KeyboardShortcutsDialog } from './keyboard-shortcuts-dialog'
 import { LoadBuildDialog, type PendingImport } from './load-build-dialog'
 import { PrintExportButton } from './print-export-button'
@@ -275,7 +284,8 @@ function SettingsSubheading({ children }: { children: ReactNode }) {
   return <h4 className="font-medium text-muted-foreground text-xs">{children}</h4>
 }
 
-function SettingsSwitchRow({
+/** One on/off preference: a label, a line on what it does, a switch. Hosts use it for their rows. */
+export function SettingsSwitchRow({
   checked,
   description,
   label,
@@ -300,6 +310,65 @@ function SettingsSwitchRow({
   )
 }
 
+export type InterfaceTheme = 'system' | 'light' | 'dark'
+
+const INTERFACE_THEME_OPTIONS: { label: ReactNode; value: InterfaceTheme }[] = [
+  {
+    label: (
+      <>
+        <Monitor className="size-3.5" />
+        System
+      </>
+    ),
+    value: 'system',
+  },
+  {
+    label: (
+      <>
+        <Sun className="size-3.5" />
+        Light
+      </>
+    ),
+    value: 'light',
+  },
+  {
+    label: (
+      <>
+        <Moon className="size-3.5" />
+        Dark
+      </>
+    ),
+    value: 'dark',
+  },
+]
+
+/**
+ * The interface theme as a System / Light / Dark row. The editor applies no theme itself: its
+ * chrome follows the host's `.dark` class, so a host that owns the setting passes this row.
+ */
+export function InterfaceThemeRow({
+  onChange,
+  value,
+}: {
+  onChange: (value: InterfaceTheme) => void
+  value: InterfaceTheme
+}) {
+  const labelId = useId()
+  return (
+    <div className="flex flex-col gap-2 py-1 @sm:flex-row @sm:items-center @sm:justify-between @sm:gap-4">
+      <div className="min-w-0 space-y-0.5">
+        <p className="font-medium text-sm" id={labelId}>
+          Interface theme
+        </p>
+        <p className="text-muted-foreground text-xs">System follows your device’s appearance.</p>
+      </div>
+      <div aria-labelledby={labelId} className="w-full shrink-0 @sm:w-60" role="group">
+        <SegmentedControl onChange={onChange} options={INTERFACE_THEME_OPTIONS} value={value} />
+      </div>
+    </div>
+  )
+}
+
 export interface SettingsPanelProps {
   /** Merged onto the scrolling root so hosts can restyle padding (e.g. inside a dialog). */
   className?: string
@@ -311,6 +380,11 @@ export interface SettingsPanelProps {
     field: 'isPrivate' | 'showScansPublic' | 'showGuidesPublic',
     value: boolean,
   ) => Promise<void>
+  /**
+   * Rows a host adds under Preferences, for its own features and settings (SettingsSwitchRow,
+   * InterfaceThemeRow).
+   */
+  preferences?: ReactNode
 }
 
 function FloorSettingsSection() {
@@ -346,20 +420,14 @@ function FloorSettingsSection() {
 
   if (!building) return null
 
-  const addLevel = (level: number) => {
-    const newLevel = LevelNode.parse({
-      level,
-      height: DEFAULT_LEVEL_HEIGHT,
-      children: [],
-      parentId: building.id,
-    })
-    createNode(newLevel, building.id)
+  const addFloor = () => {
+    const newLevel = addStoreyOnTop(building.id)
+    setSelection({ buildingId: building.id, levelId: newLevel.id })
+  }
+  const addBasement = () => {
+    const newLevel = addStoreyBelow(building.id)
     setSelection({ buildingId: building.id, levelId: newLevel.id })
   }
-
-  const addFloor = () =>
-    addLevel(levels.length === 0 ? 0 : Math.max(0, ...levels.map((level) => level.level)) + 1)
-  const addBasement = () => addLevel(Math.min(0, ...levels.map((level) => level.level)) - 1)
 
   return (
     <div className="space-y-3">
@@ -435,6 +503,7 @@ export function SettingsPanel({
   projectName,
   projectVisibility,
   onVisibilityChange,
+  preferences,
 }: SettingsPanelProps = {}) {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const copyResetTimeoutRef = useRef<number | null>(null)
@@ -556,21 +625,20 @@ export function SettingsPanel({
     }
     const json = JSON.stringify(sceneData, null, 2)
     const blob = new Blob([json], { type: 'application/json' })
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement('a')
-    link.href = url
     const date = new Date().toISOString().split('T')[0]
-    link.download = `layout_${date}.json`
-    link.click()
-    URL.revokeObjectURL(url)
+    setModelExportError(null)
+    void downloadProjectFile(blob, `layout_${date}.json`).catch((error: unknown) => {
+      setModelExportError(error instanceof Error ? error.message : 'Could not save the file')
+    })
   }
 
   const handleFileLoad = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
 
+    const fileSink = getProjectFileSink()
     const reader = new FileReader()
-    reader.onload = (event) => {
+    reader.onload = async (event) => {
       const text = event.target?.result as string
       let parsed: unknown
       try {
@@ -597,10 +665,20 @@ export function SettingsPanel({
         })
         return
       }
+      const result = validateBuildJson(parsed)
+      if (result.ok) {
+        try {
+          await fileSink?.({ blob: file, name: file.name })
+        } catch (error) {
+          setModelExportError(error instanceof Error ? error.message : 'Could not save the source file')
+          return
+        }
+        if (fileSink !== getProjectFileSink()) return
+      }
       setPendingImport({
         fileName: file.name,
         fileSizeBytes: file.size,
-        result: validateBuildJson(parsed),
+        result,
       })
     }
     reader.readAsText(file)
@@ -1184,7 +1262,13 @@ export function SettingsPanel({
           />
         </SettingsSection>
 
-        <SettingsSection description="Sound levels and keyboard shortcuts." title="Preferences">
+        <SettingsSection
+          description="Sound levels, the construction animation and keyboard shortcuts."
+          title="Preferences"
+        >
+          <ConstructionAnimationSetting />
+          <AnimationSpeedSetting />
+          {preferences}
           <div className="grid gap-2 @sm:grid-cols-2">
             <AudioSettingsDialog />
             <KeyboardShortcutsDialog />
@@ -1204,7 +1288,7 @@ export function SettingsPanel({
                 </Button>
               </div>
             </DialogTrigger>
-            <DialogContent className="h-[80vh] max-w-[95vw] gap-0 overflow-hidden border-0 bg-[#1e1e1e] p-0 shadow-none sm:max-w-5xl">
+            <DialogContent className="dark h-[80vh] max-w-[95vw] gap-0 overflow-hidden border-0 bg-[#1e1e1e] p-0 shadow-none sm:max-w-5xl">
               <DialogTitle className="sr-only">Scene Graph</DialogTitle>
               <div
                 className="flex h-full min-h-0 w-full min-w-0 *:h-full *:w-full *:overflow-y-auto"

package/src/components/ui/sidebar/panels/settings-panel/interface-theme.test.tsx

@@ -0,0 +1,20 @@
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { InterfaceThemeRow, SettingsPanel } from '.'
+
+const pressedLabels = (html: string) =>
+  [...html.matchAll(/aria-pressed="true"[^>]*>(?:<[^>]+>)*([^<]+)/g)].map((match) => match[1])
+
+describe('Interface theme setting', () => {
+  test("the row shows the host's value pressed", () => {
+    const html = renderToStaticMarkup(<InterfaceThemeRow onChange={() => {}} value="light" />)
+    expect(html).toContain('Interface theme')
+    expect(pressedLabels(html)).toEqual(['Light'])
+  })
+
+  test('Settings shows the row a host passes, and none without it', () => {
+    const row = <InterfaceThemeRow onChange={() => {}} value="system" />
+    expect(renderToStaticMarkup(<SettingsPanel preferences={row} />)).toContain('Interface theme')
+    expect(renderToStaticMarkup(<SettingsPanel />)).not.toContain('Interface theme')
+  })
+})

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

@@ -1,3 +1,5 @@
+import { getProjectFileSink } from '@pascal-app/core'
+import { downloadProjectFile } from '../../../../../lib/download-project-file'
 import { AlertTriangle, Printer } from 'lucide-react'
 import { useState } from 'react'
 import { Button } from '../../../../../components/ui/primitives/button'
@@ -23,15 +25,6 @@ type PreparedPrintExport = {
 
 type PrintModelExportFormat = Extract<ModelExportFormat, 'print-3mf' | 'print-stl'>
 
-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
@@ -81,11 +74,12 @@ export function PrintExportButton({ onlyVisible }: { onlyVisible: boolean }) {
   const handleExport = async (format: PrintModelExportFormat) => {
     if (!modelExport) return
 
+    const fileSink = getProjectFileSink()
     setExportingFormat(format)
     setError(null)
     try {
       const prepared = await preparePrintExport(modelExport, onlyVisible, format)
-      downloadArtifact(prepared.artifact)
+      await downloadProjectFile(prepared.artifact.blob, prepared.artifact.filename, fileSink)
     } catch (reason) {
       setError(reason instanceof Error ? reason.message : '3D print export failed.')
     } finally {

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

@@ -1,8 +1,9 @@
-import { type BuildingNode, DEFAULT_LEVEL_HEIGHT, LevelNode, useScene } from '@pascal-app/core'
+import { type BuildingNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Building2, Plus } from 'lucide-react'
 import { memo, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { addStoreyOnTop } from './../../../../../lib/add-storey'
 import {
   Tooltip,
   TooltipContent,
@@ -23,7 +24,6 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
   isLast,
 }: BuildingTreeNodeProps) {
   const [expanded, setExpanded] = useState(true)
-  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.
@@ -46,15 +46,7 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
 
   const handleAddLevel = (e: React.MouseEvent) => {
     e.stopPropagation()
-    const nodes = useScene.getState().nodes
-    const levelCount = children.filter((childId) => nodes[childId]?.type === 'level').length
-    const newLevel = LevelNode.parse({
-      level: levelCount,
-      height: DEFAULT_LEVEL_HEIGHT,
-      children: [],
-      parentId: nodeId,
-    })
-    createNode(newLevel, nodeId)
+    addStoreyOnTop(nodeId)
   }
 
   return (

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

@@ -2,10 +2,9 @@ import {
   type AnyNode,
   type AnyNodeId,
   type BuildingNode,
-  DEFAULT_LEVEL_HEIGHT,
   emitter,
   type GuideNode,
-  LevelNode,
+  type LevelNode,
   type ScanNode,
   type SiteNode,
   useScene,
@@ -55,6 +54,7 @@ import {
   type LevelDuplicatePreset,
 } from '@pascal-app/core/building'
 import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
+import { addStoreyOnTop } from './../../../../../lib/add-storey'
 import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
 import {
   formatAreaLabel,
@@ -200,7 +200,7 @@ const PropertyLineSection = memo(function PropertyLineSection() {
           className={cn(
             'flex h-6 w-6 cursor-pointer items-center justify-center rounded transition-colors',
             isEditing
-              ? 'bg-orange-500/20 text-orange-400'
+              ? 'bg-orange-500/20 text-orange-700 dark:text-orange-400'
               : 'text-muted-foreground hover:bg-accent',
           )}
           onClick={handleToggleEdit}
@@ -256,7 +256,7 @@ const PropertyLineSection = memo(function PropertyLineSection() {
                   className={cn(
                     'flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded',
                     points.length > 3
-                      ? 'text-muted-foreground hover:bg-red-500/20 hover:text-red-400'
+                      ? 'text-muted-foreground hover:bg-red-500/20 hover:text-red-600 dark:hover:text-red-400'
                       : 'cursor-not-allowed text-muted-foreground/30',
                   )}
                   disabled={points.length <= 3}
@@ -1014,7 +1014,6 @@ const LevelsSection = memo(function LevelsSection({
   onUploadAsset?: (projectId: string, levelId: string, file: File, type: 'scan' | 'guide') => void
   onDeleteAsset?: (projectId: string, url: string) => void
 } = {}) {
-  const createNode = useScene((state) => state.createNode)
   const updateNode = useScene((state) => state.updateNode)
   const selectedBuildingId = useViewer((state) => state.selection.buildingId)
   const selectedLevelId = useViewer((state) => state.selection.levelId)
@@ -1037,13 +1036,7 @@ const LevelsSection = memo(function LevelsSection({
   if (!building) return null
 
   const handleAddLevel = () => {
-    const newLevel = LevelNode.parse({
-      level: levels.length,
-      height: DEFAULT_LEVEL_HEIGHT,
-      children: [],
-      parentId: building.id,
-    })
-    createNode(newLevel, building.id)
+    const newLevel = addStoreyOnTop(building.id)
     setSelection({ buildingId: building.id, levelId: newLevel.id })
   }
 

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

@@ -283,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}
@@ -298,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/zone-panel/index.tsx

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

@@ -47,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={() => {
@@ -101,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/viewer/viewer-controls-bar.tsx

@@ -28,6 +28,7 @@ import {
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import { ActionButton } from '../ui/action-menu/action-button'
+import { FollowPascalToggle } from '../ui/action-menu/follow-pascal-toggle'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -103,13 +104,14 @@ function VisibilityMenu({
           className="hover:bg-white/5 hover:text-foreground"
           label="Visibility"
           size="icon"
+          tooltipClassName="dark"
           tooltipSide="top"
           variant="ghost"
         >
           <Eye className="h-5 w-5" />
         </ActionButton>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="center" className="min-w-44" side="top">
+      <DropdownMenuContent align="center" className="dark min-w-44" side="top">
         {canShowScans && (
           <DropdownMenuItem
             onSelect={(e) => keepOpen(e, () => useViewer.getState().setShowScans(!showScans))}
@@ -160,13 +162,14 @@ function DisplayMenu() {
           className="hover:bg-white/5 hover:text-foreground"
           label="Display settings"
           size="icon"
+          tooltipClassName="dark"
           tooltipSide="top"
           variant="ghost"
         >
           <SlidersHorizontal className="h-5 w-5" />
         </ActionButton>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="center" className="min-w-56" side="top">
+      <DropdownMenuContent align="center" className="dark min-w-56" side="top">
         <DropdownMenuItem
           onSelect={(e) => keepOpen(e, () => useViewer.getState().setShadows(!shadows))}
         >
@@ -207,7 +210,7 @@ function DisplayMenu() {
             <span>Render</span>
             <span className="ml-auto text-muted-foreground text-xs">{activeShading.name}</span>
           </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="min-w-56">
+          <DropdownMenuSubContent className="dark min-w-56">
             {SHADING_OPTIONS.map((option) => {
               const OptionIcon = option.icon
               return (
@@ -232,12 +235,12 @@ function DisplayMenu() {
         <DropdownMenuSub>
           <DropdownMenuSubTrigger>
             <SwatchBook className="h-4 w-4" />
-            <span>Theme</span>
+            <span>Scene theme</span>
             <span className="ml-auto truncate text-muted-foreground text-xs">
               {activeTheme.name}
             </span>
           </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="min-w-48">
+          <DropdownMenuSubContent className="dark min-w-48">
             {SCENE_THEMES.map((t) => {
               const swatches = (['wall', 'roof', 'floor', 'glazing'] as const).map(
                 (role) => t.clayTints?.[role] ?? CLAY_PALETTE[role],
@@ -270,7 +273,7 @@ function DisplayMenu() {
             <span>Edges</span>
             <span className="ml-auto text-muted-foreground text-xs">{activeEdges.name}</span>
           </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="min-w-56">
+          <DropdownMenuSubContent className="dark min-w-56">
             {EDGE_OPTIONS.map((option) => (
               <DropdownMenuItem
                 key={option.id}
@@ -360,6 +363,7 @@ export const ViewerControlsBar = ({
               useViewer.getState().setLevelMode(modes[nextIndex] ?? 'stacked')
             }}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -383,6 +387,7 @@ export const ViewerControlsBar = ({
                 useViewer.getState().setWallMode(modes[nextIndex] ?? 'cutaway')
               }}
               size="icon"
+              tooltipClassName="dark"
               tooltipSide="top"
               variant="ghost"
             >
@@ -406,6 +411,7 @@ export const ViewerControlsBar = ({
             label={`Walkthrough: ${walkthroughActive ? 'On' : 'Off'}`}
             onClick={onWalkthroughToggle}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -414,12 +420,16 @@ export const ViewerControlsBar = ({
 
           <div className="mx-1 h-5 w-px bg-border/40" />
 
+          {/* Follow Pascal */}
+          <FollowPascalToggle className="hidden sm:inline-flex" tooltipClassName="dark" />
+
           {/* Camera actions */}
           <ActionButton
             className="group hidden hover:bg-white/5 sm:inline-flex"
             label="Orbit left"
             onClick={() => emitter.emit('camera-controls:orbit-ccw')}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -435,6 +445,7 @@ export const ViewerControlsBar = ({
             label="Orbit right"
             onClick={() => emitter.emit('camera-controls:orbit-cw')}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -450,6 +461,7 @@ export const ViewerControlsBar = ({
             label="Top view"
             onClick={() => emitter.emit('camera-controls:top-view')}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >

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

@@ -23,6 +23,7 @@ import { RoomAssemblyMesh } from '../editor/room-highlight'
 import {
   RoomLabelAnchor3D,
   RoomPillChip,
+  RoomPillDetail,
   RoomPillsLayer3D,
   roomLabelEntries,
   roomLabelsVisible,
@@ -108,7 +109,22 @@ export function ViewerRooms({ source }: { source: ViewerSource }) {
       {pillsPresent && levelId ? (
         <RoomPillsLayer3D
           entries={entries}
+          // A level of its own: nothing open or placed on one floor carries to the next.
+          key={levelId}
           levelObject={() => source.objectFor(levelId)}
+          renderDetail={(entry) => {
+            const zone = nodes[entry.zoneId]
+            if (zone?.type !== 'zone') return null
+            return (
+              <RoomPillDetail
+                areaM2={entry.area}
+                color={zone.color}
+                name={zoneLabel(zone)}
+                view="3d"
+                zoneId={zone.id}
+              />
+            )
+          }}
           renderLabel={(entry, anchors, elements) => {
             const zone = nodes[entry.zoneId]
             if (zone?.type !== 'zone') return null