@pascal-app/editor 1.0.3 → 1.0.5

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

@@ -34,17 +34,18 @@ export function AudioSettingsDialog() {
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Audio settings</DialogTitle>
-          <DialogDescription>Adjust volume levels and mute settings</DialogDescription>
+          <DialogDescription>
+            Volume levels apply to every tab. Muting applies to this tab only.
+          </DialogDescription>
         </DialogHeader>
         <div className="space-y-6 py-4">
           {/* Master Volume */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <label className="font-medium text-sm">Master Volume</label>
+              <label className="font-medium text-sm">Master volume</label>
               <span className="text-muted-foreground text-sm">{masterVolume}%</span>
             </div>
             <Slider
-              disabled={muted}
               max={100}
               onValueChange={(value) => value[0] !== undefined && setMasterVolume(value[0])}
               step={1}
@@ -55,11 +56,10 @@ export function AudioSettingsDialog() {
           {/* Radio Volume */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <label className="font-medium text-sm">Radio Volume</label>
+              <label className="font-medium text-sm">Radio volume</label>
               <span className="text-muted-foreground text-sm">{radioVolume}%</span>
             </div>
             <Slider
-              disabled={muted}
               max={100}
               onValueChange={(value) => value[0] !== undefined && setRadioVolume(value[0])}
               step={1}
@@ -70,11 +70,10 @@ export function AudioSettingsDialog() {
           {/* SFX Volume */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <label className="font-medium text-sm">Sound Effects</label>
+              <label className="font-medium text-sm">Sound effects</label>
               <span className="text-muted-foreground text-sm">{sfxVolume}%</span>
             </div>
             <Slider
-              disabled={muted}
               max={100}
               onValueChange={(value) => value[0] !== undefined && setSfxVolume(value[0])}
               step={1}
@@ -90,7 +89,7 @@ export function AudioSettingsDialog() {
               variant={muted ? 'default' : 'outline'}
             >
               {muted ? <VolumeX className="size-4" /> : <Volume2 className="size-4" />}
-              {muted ? 'Unmute All Sounds' : 'Mute All Sounds'}
+              {muted ? 'Unmute this tab' : 'Mute this tab'}
             </Button>
           </div>
         </div>

package/src/components/ui/sidebar/panels/settings-panel/construction-animation-setting.test.tsx

@@ -0,0 +1,170 @@
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNodeDefinition,
+  BaseNode,
+  loadPlugin,
+  nodeRegistry,
+  nodeType,
+  objectId,
+  useScene,
+} from '@pascal-app/core'
+import type { ConstructionRevealLevel } from '@pascal-app/viewer'
+import { renderToStaticMarkup } from 'react-dom/server'
+import useConstructionReveal, {
+  chooseConstructionLevel,
+  FRAMING_KIND,
+  resolveConstructionLevel,
+} from '../../../../../store/use-construction-reveal'
+import { AnimationSpeedSetting } from './animation-speed-setting'
+import {
+  ConstructionAnimationSetting,
+  constructionLevelOptions,
+  FRAMING_NEEDS_ARCHITECT,
+} from './construction-animation-setting'
+
+// The framing plugin carries the Framing level: without it in the project the choice is greyed out with the
+// reason as its tip, and the level that plays is Full.
+
+const framing = {
+  kind: FRAMING_KIND,
+  schemaVersion: 1,
+  schema: BaseNode.extend({ id: objectId('framing'), type: nodeType(FRAMING_KIND) }),
+  category: 'structure',
+  defaults: () => ({}),
+  capabilities: {},
+  geometry: () => null,
+} as unknown as AnyNodeDefinition
+
+let restore: () => void = () => {}
+beforeAll(async () => {
+  restore = nodeRegistry._snapshot()
+  nodeRegistry._reset()
+  await loadPlugin({ id: 'fixture:framing', apiVersion: 1, nodes: [framing] })
+})
+afterAll(() => restore())
+
+// A server render reads a store's initial state, so the state to draw is put there.
+const sceneInitial = useScene.getInitialState() as { installedPlugins: string[] }
+const revealInitial = useConstructionReveal.getInitialState() as {
+  level: string
+  chosen: boolean
+  speed: number
+}
+const was = { plugins: sceneInitial.installedPlugins, ...revealInitial }
+
+function project(options: { installed: boolean; level?: string; chosen?: boolean; speed?: number }) {
+  sceneInitial.installedPlugins = options.installed ? ['fixture:framing'] : []
+  revealInitial.level = options.level ?? 'full'
+  revealInitial.chosen = options.chosen ?? false
+  revealInitial.speed = options.speed ?? 1
+}
+
+beforeEach(() => project({ installed: false }))
+afterEach(() => {
+  sceneInitial.installedPlugins = was.plugins
+  Object.assign(revealInitial, { level: was.level, chosen: was.chosen, speed: was.speed })
+})
+
+const optionOf = (markup: string, label: string) => {
+  const match = new RegExp(`<button[^>]*>(?:(?!</button>).)*${label}(?:(?!</button>).)*</button>`).exec(
+    markup,
+  )
+  return match?.[0] ?? ''
+}
+
+describe('the levels the control offers', () => {
+  test('without the plugin, Framing is disabled and its tip says it needs the Architect plugin', () => {
+    const framingOption = constructionLevelOptions(false).find((o) => o.value === 'framing')!
+    expect(framingOption.disabled).toBe(true)
+    expect(framingOption.title).toBe(FRAMING_NEEDS_ARCHITECT)
+    expect(FRAMING_NEEDS_ARCHITECT).toBe('Framing needs the Architect plugin.')
+    for (const option of constructionLevelOptions(false).filter((o) => o.value !== 'framing'))
+      expect(option.disabled).toBe(false)
+  })
+
+  test('with the plugin, every level is on offer', () => {
+    expect(constructionLevelOptions(true).every((option) => option.disabled === false)).toBe(true)
+  })
+})
+
+describe('the construction animation control, drawn', () => {
+  test('without the plugin: Framing is greyed out and Full is the level that plays', () => {
+    project({ installed: false })
+    const markup = renderToStaticMarkup(<ConstructionAnimationSetting />)
+    expect(optionOf(markup, 'Framing')).toContain('aria-disabled="true"')
+    expect(optionOf(markup, 'Full')).toContain('aria-pressed="true"')
+    expect(optionOf(markup, 'Full')).not.toContain('aria-disabled')
+  })
+
+  test('with the plugin and no choice of the person’s own: Framing plays, nothing is greyed', () => {
+    project({ installed: true })
+    const markup = renderToStaticMarkup(<ConstructionAnimationSetting />)
+    expect(optionOf(markup, 'Framing')).toContain('aria-pressed="true"')
+    expect(markup).not.toContain('aria-disabled')
+  })
+
+  test('with the plugin and a choice of Full: Full is kept', () => {
+    project({ installed: true, level: 'full', chosen: true })
+    const markup = renderToStaticMarkup(<ConstructionAnimationSetting />)
+    expect(optionOf(markup, 'Full')).toContain('aria-pressed="true"')
+    expect(optionOf(markup, 'Framing')).toContain('aria-pressed="false"')
+  })
+
+  test('a saved choice of Framing falls back to Full while the plugin is gone, greyed out', () => {
+    project({ installed: false, level: 'framing', chosen: true })
+    const markup = renderToStaticMarkup(<ConstructionAnimationSetting />)
+    expect(optionOf(markup, 'Full')).toContain('aria-pressed="true"')
+    expect(optionOf(markup, 'Framing')).toContain('aria-disabled="true"')
+    expect(optionOf(markup, 'Framing')).toContain('aria-pressed="false"')
+  })
+})
+
+describe('clicking the level that plays', () => {
+  // A saved Framing plays as Full while the plugin is gone; the control shows Full pressed, and a click on
+  // the pressed option is still a click. It must not turn the kept Framing into a chosen Full.
+  const click = (level: ConstructionRevealLevel, installed: boolean) =>
+    chooseConstructionLevel(level, installed)
+
+  beforeEach(() => useConstructionReveal.setState({ level: 'framing', chosen: true }))
+  afterEach(() => useConstructionReveal.setState({ level: 'full', chosen: false }))
+
+  test('the Full shown for a saved Framing keeps the Framing when it is clicked, and it plays again with the plugin', () => {
+    click('full', false)
+    expect(useConstructionReveal.getState()).toMatchObject({ level: 'framing', chosen: true })
+    expect(resolveConstructionLevel(useConstructionReveal.getState(), true)).toBe('framing')
+  })
+
+  test('another level is a choice and replaces it', () => {
+    click('simple', false)
+    expect(useConstructionReveal.getState()).toMatchObject({ level: 'simple', chosen: true })
+  })
+
+  test('with no choice of the person’s own, a click on the level that plays is a choice of it', () => {
+    useConstructionReveal.setState({ level: 'full', chosen: false })
+    click('full', false)
+    expect(useConstructionReveal.getState()).toMatchObject({ level: 'full', chosen: true })
+  })
+})
+
+describe('the Pro badge', () => {
+  // The plugin that draws the framing is a Pro one: the option carries the plugin manager's mark,
+  // greyed out or not, and no other level does.
+  test('Framing carries it, greyed out or on offer; the other levels do not', () => {
+    for (const installed of [false, true]) {
+      project({ installed })
+      const markup = renderToStaticMarkup(<ConstructionAnimationSetting />)
+      expect(optionOf(markup, 'Framing')).toMatch(/>Pro</)
+      for (const label of ['Off', 'Simple', 'Full']) expect(optionOf(markup, label)).not.toMatch(/>Pro</)
+    }
+  })
+})
+
+describe('the animation speed control, drawn', () => {
+  test('offers the five steps and shows the saved one', () => {
+    project({ installed: true, speed: 1.5 })
+    const markup = renderToStaticMarkup(<AnimationSpeedSetting />)
+    for (const label of ['×0.5', '×0.75', '×1', '×1.5', '×2']) expect(markup).toContain(label)
+    expect(optionOf(markup, '×1.5')).toContain('aria-pressed="true"')
+    expect(optionOf(markup, '×0.5')).toContain('aria-pressed="false"')
+  })
+})

package/src/components/ui/sidebar/panels/settings-panel/construction-animation-setting.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import type { ConstructionRevealLevel } from '@pascal-app/viewer'
+import {
+  chooseConstructionLevel,
+  useConstructionRevealLevel,
+  useFramingAvailable,
+} from '../../../../../store/use-construction-reveal'
+import { SegmentedControl } from '../../../controls/segmented-control'
+import { Badge } from '../../../primitives/badge'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../primitives/tooltip'
+
+/** Why Framing is greyed out. */
+export const FRAMING_NEEDS_ARCHITECT = 'Framing needs the Architect plugin.'
+
+const OPTIONS: { label: string; value: ConstructionRevealLevel; title: string; badge?: string }[] = [
+  { label: 'Off', value: 'off', title: 'What the AI builds appears at once.' },
+  {
+    label: 'Simple',
+    value: 'simple',
+    title: 'Walls rise and the rest grows in, piece by piece. No falls, no dust, no sound.',
+  },
+  {
+    label: 'Full',
+    value: 'full',
+    title: 'Pieces drop into place with dust, the roof assembles, one sound per phase.',
+  },
+  {
+    label: 'Framing',
+    value: 'framing',
+    title: 'Full, plus the framing members dropping in first, where the framing plugin draws them.',
+    // The plugin that draws the framing is a Pro one.
+    badge: 'Pro',
+  },
+]
+
+/**
+ * The four levels as the control offers them: Framing is greyed out, with the reason as its tip,
+ * where the project has no plugin that draws the framing.
+ */
+export function constructionLevelOptions(framingAvailable: boolean) {
+  return OPTIONS.map((option) =>
+    option.value === 'framing' && !framingAvailable
+      ? { ...option, title: FRAMING_NEEDS_ARCHITECT, disabled: true }
+      : { ...option, disabled: false },
+  )
+}
+
+/** How much of an AI build plays as a construction. */
+export function ConstructionAnimationSetting() {
+  // What plays: the person's choice, or Framing where the framing plugin is installed and Full where it is not.
+  const level = useConstructionRevealLevel()
+  const framingAvailable = useFramingAvailable()
+  const current = OPTIONS.find((option) => option.value === level)
+  const options = constructionLevelOptions(framingAvailable).map((option) => {
+    const label = option.badge ? (
+      <span className="inline-flex items-center gap-1.5">
+        {option.label}
+        <Badge label={option.badge} />
+      </span>
+    ) : (
+      option.label
+    )
+    if (!option.disabled) return { ...option, label }
+    return {
+      ...option,
+      title: undefined,
+      label: (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>{label}</span>
+          </TooltipTrigger>
+          <TooltipContent>{option.title}</TooltipContent>
+        </Tooltip>
+      ),
+    }
+  })
+  return (
+    <div className="space-y-2 py-1">
+      <div className="space-y-0.5">
+        <p className="font-medium text-sm">Construction animation</p>
+        <p className="text-muted-foreground text-xs">{current?.title}</p>
+      </div>
+      <SegmentedControl
+        aria-label="Construction animation"
+        onChange={(next) => chooseConstructionLevel(next, framingAvailable)}
+        options={options}
+        value={level}
+      />
+    </div>
+  )
+}

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

@@ -1,7 +1,10 @@
+import { downloadProjectFile } from '../../../../../lib/download-project-file'
 import {
+  getProjectFileSink,
   clearSceneHistory,
   DEFAULT_LEVEL_HEIGHT,
   emitter,
+  getArtifactStore,
   getLevelDisplayName,
   LevelNode,
   type AnyNodeId,
@@ -25,9 +28,12 @@ import {
   Layers,
   ListTree,
   Map as MapIcon,
+  Monitor,
+  Moon,
   Save,
   ChevronDown,
   Send,
+  Sun,
   Trash2,
   Upload,
 } from 'lucide-react'
@@ -54,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,
@@ -64,11 +71,16 @@ import {
 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'
@@ -101,6 +113,7 @@ const MODEL_EXPORT_FORMATS = [
   { format: 'usdz', label: 'USDZ' },
   { format: 'stl', label: 'STL' },
   { format: 'obj', label: 'OBJ' },
+  { format: 'ifc', label: 'IFC' },
 ] as const
 
 type ModelExportFormat = (typeof MODEL_EXPORT_FORMATS)[number]['format']
@@ -271,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,
@@ -296,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
@@ -307,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() {
@@ -342,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">
@@ -431,6 +503,7 @@ export function SettingsPanel({
   projectName,
   projectVisibility,
   onVisibilityChange,
+  preferences,
 }: SettingsPanelProps = {}) {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const copyResetTimeoutRef = useRef<number | null>(null)
@@ -540,24 +613,32 @@ export function SettingsPanel({
     // Materials ride along: nodes reference them by `scene:<id>` slot
     // refs, so a save without the table produces a file whose custom
     // finishes revert to defaults on the very Load Build path below.
-    const sceneData = { nodes, rootNodeIds, installedPlugins, materials, collections }
+    // The project rides along too: a scripted object's artifacts live there, and
+    // loading the file into another project copies them over as a paste does.
+    const sceneData = {
+      nodes,
+      rootNodeIds,
+      installedPlugins,
+      materials,
+      collections,
+      projectId: useViewer.getState().projectId,
+    }
     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 {
@@ -584,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)
@@ -596,7 +687,20 @@ export function SettingsPanel({
     e.target.value = ''
   }
 
-  const handleConfirmImport = (parsed: ParsedBuildJson) => {
+  const handleConfirmImport = async (file: ParsedBuildJson) => {
+    const targetProjectId = useViewer.getState().projectId
+    const artifactStore = getArtifactStore()
+    const { build: parsed, refusedIds, refusal } = await bringBuildArtifacts(file)
+    if (
+      targetProjectId !== useViewer.getState().projectId ||
+      artifactStore !== getArtifactStore()
+    )
+      return
+    if (refusal) {
+      useFloorplanMode
+        .getState()
+        .showNotice(refusedObjectsNotice(refusedIds.length, refusal, 'loaded'))
+    }
     const currentScene = useScene.getState()
     setScene(
       parsed.nodes as Parameters<typeof setScene>[0],
@@ -626,7 +730,7 @@ export function SettingsPanel({
     // old scene (or land on the empty intermediate `unloadScene` state).
     clearSceneHistory()
     resetSelection()
-    setPhase('structure')
+    setPhase('building')
     selectDefaultBuildingAndLevel()
   }
 
@@ -688,6 +792,7 @@ export function SettingsPanel({
     setModelExportWarning(null)
     try {
       const artifact = await modelExport(format, {
+        projectName,
         onlyVisible: exportOnlyVisible,
         excludedNodeTypes,
         includedPresentationIds:
@@ -903,7 +1008,7 @@ export function SettingsPanel({
                   <legend className="px-1 font-medium text-sm">Include in file</legend>
                   <p className="text-muted-foreground text-xs">
                     Choose which procedural content is baked into model files. GLB and USDZ use the
-                    textured portable path; STL and OBJ remain geometry-only.
+                    textured portable path; STL, OBJ and IFC remain geometry-only.
                   </p>
                   {exportableNodeTypes.length > 0 ? (
                     <div className="space-y-2 pt-1">
@@ -1157,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 />
@@ -1177,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/keyboard-shortcuts-dialog.tsx

@@ -28,11 +28,11 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   {
     title: 'Editor Navigation',
     shortcuts: [
-      { keys: ['1'], action: 'Switch to Site phase' },
-      { keys: ['2'], action: 'Switch to Structure phase' },
-      { keys: ['3'], action: 'Switch to Furnish phase' },
-      { keys: ['F'], action: 'Switch to Furnish layer' },
-      { keys: ['Z'], action: 'Switch to Zones layer' },
+      { keys: ['1'], action: 'Switch to Site' },
+      { keys: ['2'], action: 'Switch to Building' },
+      { keys: ['\\'], action: 'Open or close the split view' },
+      { keys: ['F'], action: 'Open the items catalog with the item tool' },
+      { keys: ['Z'], action: 'Draw a zone' },
       {
         keys: ['Cmd/Ctrl', 'Arrow Up'],
         action: 'Select next level in the active building',