@pascal-app/editor 1.0.4 → 1.0.6

package/src/components/ui/panels/room-panel.tsx

@@ -5,14 +5,17 @@ import {
   type AnyNodeId,
   area,
   getLevelDisplayName,
+  runAsSingleSceneHistoryStep,
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
+import { setRoomFloorScript } from '@pascal-app/core/agent-operations'
 import { useViewer } from '@pascal-app/viewer'
 import { Check, ChevronDown, Plus } from 'lucide-react'
 import { type KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from 'react'
 import { startCeilingEdit } from '../../../lib/ceiling-edit-session'
 import { resolveOverlayPolicy } from '../../../lib/interaction/overlay-policy'
+import { finishScriptCode } from '../../../lib/geometry-script/finish-scripts'
 import { formatAreaLabel, formatLinearMeasurement } from '../../../lib/measurements'
 import { addMezzanineStairs } from '../../../lib/mezzanine-stairs'
 import { roomFloorBase, roomRelativeFloorHeight } from '../../../lib/room-construction-commands'
@@ -111,6 +114,7 @@ export function RoomPanel({
         ) : (
           <RoomConstructionRows key={room.zoneId} room={room} />
         )}
+        <RoomFloorScriptRow key={`floor-script-${room.zoneId}`} zoneId={room.zoneId} />
       </div>
     </PanelWrapper>
   )
@@ -222,6 +226,67 @@ export function RoomUnitRow({ zoneId }: { zoneId: string }) {
   )
 }
 
+/**
+ * "Scripted finish": a floor a script builds (it owns the floor's colours, so Paint leaves it),
+ * with its code to read and a way to take it off, back to the floor's own finish.
+ */
+function RoomFloorScriptRow({ zoneId }: { zoneId: string }) {
+  const sha = useScene((scene) => {
+    const zone = scene.nodes[zoneId as AnyNodeId]
+    return zone?.type === 'zone' ? zone.floor?.script?.script : undefined
+  })
+  const [code, setCode] = useState<{ sha: string; text: string } | null>(null)
+  const [open, setOpen] = useState(false)
+  if (!sha) return null
+  const toggleCode = () => {
+    setOpen((shown) => !shown)
+    if (code?.sha === sha) return
+    finishScriptCode(sha).then(
+      (text) => setCode({ sha, text: text ?? 'The script could not be read.' }),
+      () => setCode({ sha, text: 'The script could not be read.' }),
+    )
+  }
+  const remove = () => {
+    const { changes } = setRoomFloorScript(
+      useScene.getState().nodes,
+      { zoneId, remove: true },
+      { activeLevelId: null },
+    )
+    runAsSingleSceneHistoryStep(useScene, () => {
+      for (const { id, data } of changes?.update ?? [])
+        useScene.getState().updateNode(id as AnyNodeId, data)
+    })
+  }
+  return (
+    <div className="mt-3 flex flex-col gap-2" data-room-floor-script={zoneId}>
+      <div className="flex min-h-8 items-center justify-between gap-3">
+        <span className="text-muted-foreground text-xs">Scripted finish</span>
+        <div className="flex items-center gap-1.5">
+          <button
+            className="rounded-full border border-border/50 px-2.5 py-0.5 text-xs transition-colors hover:bg-accent"
+            onClick={toggleCode}
+            type="button"
+          >
+            {open ? 'Hide code' : 'View code'}
+          </button>
+          <button
+            className="rounded-full border border-border/50 px-2.5 py-0.5 text-xs transition-colors hover:bg-accent"
+            onClick={remove}
+            type="button"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+      {open && (
+        <pre className="max-h-60 overflow-auto whitespace-pre rounded-lg border border-border/50 p-2 font-mono text-[11px] text-foreground">
+          {code?.sha === sha ? code.text : 'Loading…'}
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const count = (n: number, one: string, many = `${one}s`) => `${n} ${n === 1 ? one : many}`
 
 /** "2 doors · 3 windows" (the level is in the kicker). */

package/src/components/ui/primitives/badge.tsx

@@ -0,0 +1,8 @@
+/** A small mark beside a name: the plan a plugin needs ("Pro"), as the plugin manager shows it. */
+export function Badge({ label }: { label: string }) {
+  return (
+    <span className="rounded-[5px] border border-border px-1.5 py-px font-mono font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
+      {label}
+    </span>
+  )
+}

package/src/components/ui/primitives/sidebar.tsx

@@ -48,7 +48,7 @@ type SidebarStore = {
 export const useSidebarStore = create<SidebarStore>()(
   persist(
     (set) => ({
-      width: 288, // 18rem = 288px
+      width: 360,
       setWidth: (width) => {
         if (width < SIDEBAR_COLLAPSE_THRESHOLD) {
           set({ isCollapsed: true })

package/src/components/ui/right-stack.tsx

@@ -2,6 +2,8 @@
 
 import { createContext, type ReactNode, useContext, useEffect, useRef } from 'react'
 import { useIsMobile } from '../../hooks/use-mobile'
+import { cn } from '../../lib/utils'
+import { TOP_MENU_CLEARANCE } from './action-menu/placement'
 
 const RightStackContext = createContext(false)
 
@@ -56,7 +58,19 @@ function inspectorHeights(slot: HTMLElement): { natural: number; header: number
  * and the card scrolls instead. Neither hides the other. On a phone the two
  * keep their own layouts (sheet / no card).
  */
-export function RightStack({ inspector, helper }: { inspector: ReactNode; helper: ReactNode }) {
+export function RightStack({
+  inspector,
+  helper,
+  reserveBottomMenu = true,
+  belowTopMenu = false,
+}: {
+  inspector: ReactNode
+  helper: ReactNode
+  // Keep clear of an action menu docked at the bottom; off when it sits at the top.
+  reserveBottomMenu?: boolean
+  // Start below an action menu docked at the top of the stage.
+  belowTopMenu?: boolean
+}) {
   const isMobile = useIsMobile()
   const stackRef = useRef<HTMLDivElement>(null)
   const inspectorRef = useRef<HTMLDivElement>(null)
@@ -125,7 +139,12 @@ export function RightStack({ inspector, helper }: { inspector: ReactNode; helper
   return (
     <RightStackContext.Provider value={true}>
       <div
-        className="pointer-events-none fixed top-20 right-4 bottom-[74px] z-40 flex flex-col items-end gap-2"
+        className={cn(
+          'pointer-events-none fixed right-4 z-40 flex flex-col items-end gap-2',
+          reserveBottomMenu ? 'bottom-[74px]' : 'bottom-4',
+          !belowTopMenu && 'top-20',
+        )}
+        style={belowTopMenu ? { top: TOP_MENU_CLEARANCE } : undefined}
         data-right-stack
         ref={stackRef}
       >

package/src/components/ui/sidebar/app-sidebar.tsx

@@ -78,7 +78,7 @@ export function AppSidebar({
 
   return (
     <>
-      <div className={cn('dark flex h-full w-full bg-sidebar text-sidebar-foreground')}>
+      <div className="flex h-full w-full bg-sidebar text-sidebar-foreground">
         {/* Icon Rail */}
         <IconRail
           activePanel={activePanel}

package/src/components/ui/sidebar/icon-rail.tsx

@@ -65,7 +65,7 @@ export function IconRail({
           <button
             className={cn(
               'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
-              isActive ? 'bg-accent' : 'hover:bg-accent',
+              isActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent',
             )}
             onClick={() => onPanelChange(panel.id)}
             type="button"
@@ -107,7 +107,7 @@ export function IconRail({
               <button
                 className={cn(
                   'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
-                  isActive ? 'bg-accent' : 'hover:bg-accent',
+                  isActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent',
                 )}
                 onClick={() => onPanelChange(panel.id)}
                 type="button"
@@ -138,7 +138,7 @@ export function IconRail({
               <button
                 className={cn(
                   'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
-                  isActive ? 'bg-accent' : 'hover:bg-accent',
+                  isActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent',
                 )}
                 onClick={() => onPanelChange(panel.id)}
                 type="button"

package/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx

@@ -136,7 +136,7 @@ export function FunctionTreePanel({
                       'relative flex aspect-square items-center justify-center rounded-xl transition-all duration-200',
                       isActive
                         ? 'bg-primary/10 ring-1 ring-primary/50'
-                        : 'bg-muted/40 opacity-70 grayscale hover:bg-muted hover:opacity-100 hover:grayscale-0',
+                        : 'bg-black/4 opacity-70 grayscale hover:bg-black/8 hover:opacity-100 hover:grayscale-0 dark:bg-muted/40 dark:hover:bg-muted',
                     )}
                     onClick={() => {
                       triggerSFX('sfx:menu-click')

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

@@ -279,7 +279,7 @@ function LegacyItemsPanel({
                     'cursor-pointer rounded-md px-2 py-0.5 font-medium text-xs transition-colors',
                     activePlacementTag === null
                       ? 'bg-blue-500 text-white'
-                      : 'bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200',
+                      : 'bg-blue-50 dark:bg-blue-950/50 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/60 hover:text-blue-800 dark:hover:text-blue-200',
                   )}
                   onClick={() => setActivePlacementTag(null)}
                   type="button"
@@ -297,8 +297,8 @@ function LegacyItemsPanel({
                         isActive
                           ? 'bg-blue-500 text-white'
                           : isEmpty
-                            ? 'cursor-not-allowed bg-zinc-800 text-zinc-500'
-                            : 'bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200',
+                            ? 'cursor-not-allowed bg-zinc-100 dark:bg-zinc-800 text-zinc-400 dark:text-zinc-500'
+                            : 'bg-blue-50 dark:bg-blue-950/50 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/60 hover:text-blue-800 dark:hover:text-blue-200',
                       )}
                       disabled={isEmpty}
                       key={tag}
@@ -312,7 +312,7 @@ function LegacyItemsPanel({
                           isActive
                             ? 'text-blue-200'
                             : isEmpty
-                              ? 'text-zinc-600'
+                              ? 'text-zinc-400 dark:text-zinc-600'
                               : 'text-blue-500/70',
                         )}
                       >
@@ -337,7 +337,7 @@ function LegacyItemsPanel({
                         isActive
                           ? 'bg-violet-500 text-white'
                           : isEmpty
-                            ? 'cursor-not-allowed bg-zinc-800 text-zinc-500'
+                            ? 'cursor-not-allowed bg-zinc-100 dark:bg-zinc-800 text-zinc-400 dark:text-zinc-500'
                             : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground',
                       )}
                       disabled={isEmpty}
@@ -352,7 +352,7 @@ function LegacyItemsPanel({
                           isActive
                             ? 'text-violet-200'
                             : isEmpty
-                              ? 'text-zinc-600'
+                              ? 'text-zinc-400 dark:text-zinc-600'
                               : 'text-zinc-500/70',
                         )}
                       >

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

@@ -0,0 +1,40 @@
+'use client'
+
+import { ANIMATION_SPEEDS, type AnimationSpeed, normalizeAnimationSpeed } from '@pascal-app/viewer'
+import useConstructionReveal from '../../../../../store/use-construction-reveal'
+import { SegmentedControl } from '../../../controls/segmented-control'
+
+const label = (speed: AnimationSpeed) => `×${speed}`
+
+// The control's values are strings; a step is its number as text.
+const OPTIONS = ANIMATION_SPEEDS.map((speed) => ({
+  label: label(speed),
+  value: String(speed),
+  title: speed === 1 ? 'The pace builds were made at.' : `Builds play ×${speed} as fast.`,
+}))
+
+/** How fast what the AI builds plays: ×0.5 to ×2, for the Full and Framing animations and their undo. */
+export function AnimationSpeedSetting() {
+  const level = useConstructionReveal((state) => state.level)
+  const speed = useConstructionReveal((state) => state.speed)
+  const setSpeed = useConstructionReveal((state) => state.setSpeed)
+  const off = level === 'off'
+  return (
+    <div className="space-y-2 py-1">
+      <div className="space-y-0.5">
+        <p className="font-medium text-sm">Animation speed</p>
+        <p className="text-muted-foreground text-xs">
+          {off
+            ? 'Turn the construction animation on to use this.'
+            : 'Higher plays a build faster; it applies to the next build.'}
+        </p>
+      </div>
+      <SegmentedControl
+        aria-label="Animation speed"
+        onChange={(value) => setSpeed(normalizeAnimationSpeed(Number(value)))}
+        options={OPTIONS}
+        value={String(speed)}
+      />
+    </div>
+  )
+}

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>
+  )
+}