@pascal-app/editor 1.0.3 → 1.0.5

package/src/components/ui/panels/shape-choice.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { Pentagon, Square } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+
+export type OutlineShape = 'rectangle' | 'polygon'
+
+const SHAPES = [
+  { id: 'rectangle', label: 'Rectangle', Icon: Square },
+  { id: 'polygon', label: 'Polygon', Icon: Pentagon },
+] as const
+
+const pill =
+  'inline-flex items-center gap-1 rounded-full border border-border/50 px-2 py-0.5 text-xs text-foreground transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-50'
+
+/**
+ * The outline shape, picked before drawing starts — the same two choices the
+ * Build panel's room tiles offer, so a cut or a mezzanine is started the way a
+ * room is.
+ */
+export function ShapeChoice({
+  label,
+  onPick,
+  disabled,
+  className,
+  data,
+}: {
+  label: string
+  onPick: (shape: OutlineShape) => void
+  disabled?: boolean
+  className?: string
+  /** `data-shape-choice` hook for tests and proofs. */
+  data?: string
+}) {
+  return (
+    <div
+      className={cn('flex min-h-7 items-center justify-between gap-2', className)}
+      data-shape-choice={data}
+    >
+      <span className="whitespace-nowrap">{label}</span>
+      <div className="flex items-center gap-1.5">
+        {SHAPES.map(({ id, label: shapeLabel, Icon }) => (
+          <button
+            className={pill}
+            data-shape={id}
+            disabled={disabled}
+            key={id}
+            onClick={() => onPick(id)}
+            type="button"
+          >
+            <Icon aria-hidden className="h-3 w-3" />
+            {shapeLabel}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/ui/panels/wall-region-list.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  useLiveNodeOverrides,
+  useScene,
+  type WallFaceRegion,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Trash2 } from 'lucide-react'
+import { useMemo } from 'react'
+import { removeWallRegion } from '../../../lib/paint-regions'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import { cn } from '../../../lib/utils'
+import {
+  wallRegionCapNotice,
+  wallRegionFaceLabels,
+  wallRegionRows,
+} from '../../../lib/wall-region-list'
+import { useWallRegionSelection } from '../../../store/use-wall-region-handles-selection'
+import { PanelSection } from '../controls/panel-section'
+
+const ROW_ACTION_CLASS =
+  'flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10'
+
+/** The wall panel's "Paint regions" section: one row per region, select or delete. */
+export function WallPaintRegionList({ wallId }: { wallId: string }) {
+  const nodes = useScene((state) => state.nodes)
+  const materials = useScene((state) => state.materials)
+  const unit = useViewer((state) => state.unit)
+  const active = useWallRegionSelection((state) => state.active)
+  const setActive = useWallRegionSelection((state) => state.setActive)
+  // A handle drag previews through a live override; list the live bounds.
+  const liveRegions = useLiveNodeOverrides(
+    (state) =>
+      state.overrides.get(wallId as AnyNodeId)?.faceRegions as WallFaceRegion[] | undefined,
+  )
+  const sceneWall = nodes[wallId as AnyNodeId]
+  const wall = sceneWall?.type === 'wall' ? sceneWall : null
+  const faceLabels = useMemo(() => wallRegionFaceLabels(nodes, wallId), [nodes, wallId])
+
+  if (!wall) return null
+  const faceRegions = liveRegions ?? wall.faceRegions
+  if (!faceRegions?.length) return null
+  const rows = wallRegionRows({ faceRegions }, faceLabels, materials, unit)
+  const capNotice = wallRegionCapNotice({ faceRegions }, faceLabels)
+
+  return (
+    // Focus inside this list still lets Delete target the active region.
+    <div className="contents" data-wall-region-list={wallId}>
+      <PanelSection title="Paint regions">
+        <div className="flex flex-col gap-1">
+          {rows.map((row) => {
+            const isActive = active?.wallId === wallId && active.regionId === row.id
+            return (
+              <div
+                className={cn(
+                  'flex h-9 items-center gap-2 rounded-md px-1 transition-colors',
+                  isActive ? 'bg-accent' : 'hover:bg-accent/50',
+                )}
+                data-wall-region-row={row.id}
+                key={row.id}
+              >
+                <button
+                  aria-pressed={isActive}
+                  className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left"
+                  onClick={() => setActive({ wallId, regionId: row.id })}
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="h-4 w-4 shrink-0 rounded-sm border border-border/50 bg-center bg-cover"
+                    style={{
+                      backgroundColor: row.finish.color,
+                      backgroundImage: row.finish.imageUrl
+                        ? `url(${row.finish.imageUrl})`
+                        : undefined,
+                    }}
+                  />
+                  <span className="flex min-w-0 flex-col leading-tight">
+                    <span className="truncate text-sm">{row.finish.name}</span>
+                    <span className="truncate text-[11px] text-muted-foreground">
+                      {row.faceLabel} · {row.boundsText}
+                    </span>
+                  </span>
+                </button>
+                <button
+                  aria-label="Delete region"
+                  className={ROW_ACTION_CLASS}
+                  onClick={() => {
+                    if (isActive) setActive(null)
+                    if (removeWallRegion(wallId, row.id)) sfxEmitter.emit('sfx:structure-delete')
+                  }}
+                  title="Delete region"
+                  type="button"
+                >
+                  <Trash2 className="h-3 w-3" />
+                </button>
+              </div>
+            )
+          })}
+          {capNotice && (
+            <div className="px-1 text-[11px] text-muted-foreground">{capNotice}</div>
+          )}
+        </div>
+      </PanelSection>
+    </div>
+  )
+}

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/color-dot.tsx

@@ -1,43 +1,55 @@
 'use client'
 
+import { ZONE_COLOR_PALETTE } from '@pascal-app/core'
 import { useState } from 'react'
 import { cn } from '../../../lib/utils'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
 
-export const PALETTE_COLORS = [
-  '#ef4444', // Red        0°
-  '#f97316', // Orange    30°
-  '#f59e0b', // Amber     45°
-  '#84cc16', // Lime      85°
-  '#22c55e', // Green    142°
-  '#10b981', // Emerald  160°
-  '#06b6d4', // Cyan     190°
-  '#3b82f6', // Blue     217°
-  '#6366f1', // Indigo   239°
-  '#a855f7', // Violet   270°
-  '#64748b', // Dark gray
-  '#cccccc', // Light gray
-]
+export const PALETTE_COLORS = ZONE_COLOR_PALETTE
 
 interface ColorDotProps {
   color: string
   onChange: (color: string) => void
+  /** Says what the colour is for, on hover and to assistive tech. */
+  label?: string
+  side?: 'left' | 'bottom'
 }
 
-export function ColorDot({ color, onChange }: ColorDotProps) {
+export function ColorDot({ color, onChange, label, side = 'left' }: ColorDotProps) {
   const [open, setOpen] = useState(false)
+  const trigger = (
+    <PopoverTrigger asChild>
+      <button
+        aria-label={label}
+        className="relative h-3 w-3 shrink-0 cursor-pointer rounded-sm border border-border/50 transition-all hover:ring-1 hover:ring-ring/50"
+        data-color-dot
+        onClick={(e) => e.stopPropagation()}
+        style={{ backgroundColor: color }}
+        type="button"
+      />
+    </PopoverTrigger>
+  )
 
   return (
     <Popover onOpenChange={setOpen} open={open}>
-      <PopoverTrigger asChild>
-        <button
-          className="relative h-3 w-3 shrink-0 cursor-pointer rounded-sm border border-border/50 transition-all hover:ring-1 hover:ring-ring/50"
-          onClick={(e) => e.stopPropagation()}
-          style={{ backgroundColor: color }}
-          type="button"
-        />
-      </PopoverTrigger>
-      <PopoverContent align="center" className="w-auto p-1.5" side="left" sideOffset={6}>
+      {label ? (
+        <Tooltip>
+          <TooltipTrigger asChild>{trigger}</TooltipTrigger>
+          <TooltipContent side="bottom">{label}</TooltipContent>
+        </Tooltip>
+      ) : (
+        trigger
+      )}
+      <PopoverContent
+        align={side === 'bottom' ? 'start' : 'center'}
+        className="w-auto p-1.5"
+        // Keep the pick inside the palette: in a panel header, a pointerdown
+        // bubbling out of the portal would start dragging the panel.
+        onPointerDown={(event) => event.stopPropagation()}
+        side={side}
+        sideOffset={6}
+      >
         <div className="grid grid-cols-4 gap-1">
           {PALETTE_COLORS.map((c) => (
             <button

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

@@ -24,6 +24,7 @@ import {
   TooltipTrigger,
 } from './../../../components/ui/primitives/tooltip'
 import { useIsMobile } from './../../../hooks/use-mobile'
+import { hydrationGatedStorage } from './../../../lib/hydration-gated-storage'
 import { cn } from './../../../lib/utils'
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state'
@@ -47,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 })
@@ -62,6 +63,7 @@ export const useSidebarStore = create<SidebarStore>()(
     }),
     {
       name: 'sidebar-preferences',
+      storage: hydrationGatedStorage((): boolean => useSidebarStore.persist.hasHydrated()),
       partialize: (state) => ({ width: state.width, isCollapsed: state.isCollapsed }),
       skipHydration: true,
     },

package/src/components/ui/right-stack.test.ts

@@ -0,0 +1,29 @@
+import { expect, test } from 'bun:test'
+import { rightStackFloors } from './right-stack'
+
+const tall = { headerHeight: 52, cardHeight: 240 }
+
+test('the inspector keeps 180 px, or its own height if shorter, above the full card', () => {
+  expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 700 })).toEqual({
+    inspector: 180,
+    card: 240,
+  })
+  expect(rightStackFloors({ ...tall, naturalHeight: 120, stackHeight: 700 }).inspector).toBe(120)
+  expect(
+    rightStackFloors({ naturalHeight: 0, headerHeight: 0, cardHeight: 240, stackHeight: 700 }),
+  ).toEqual({ inspector: 0, card: 240 })
+})
+
+test('on a short window the inspector gives way first, down to its header', () => {
+  expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 400 })).toEqual({
+    inspector: 152,
+    card: 240,
+  })
+})
+
+test('on a very short window the inspector keeps its header and the card scrolls', () => {
+  expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 258 })).toEqual({
+    inspector: 52,
+    card: 198,
+  })
+})

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

@@ -0,0 +1,164 @@
+'use client'
+
+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)
+
+/** Whether a panel renders inside the shared right column (in flow) rather than on its own. */
+export function useInRightStack() {
+  return useContext(RightStackContext)
+}
+
+/** The inspector never shrinks below this (or its own height, if shorter) for the card, px. */
+const INSPECTOR_MIN_HEIGHT = 180
+
+/** Gap between the inspector and the card, px (`gap-2`). */
+const GAP = 8
+
+/**
+ * The heights neither panel shrinks below. The inspector keeps 180 px (or its
+ * own height, if shorter) while the full card fits under it, and never less
+ * than its header row. The card shows in full whenever the column allows; on a
+ * very short window it gives way and scrolls on itself — both stay usable.
+ */
+export function rightStackFloors(args: {
+  naturalHeight: number
+  headerHeight: number
+  cardHeight: number
+  stackHeight: number
+}): { inspector: number; card: number } {
+  const { naturalHeight, headerHeight, cardHeight, stackHeight } = args
+  const gap = naturalHeight > 0 && cardHeight > 0 ? GAP : 0
+  const header = Math.min(headerHeight, naturalHeight)
+  const inspector = Math.max(
+    header,
+    Math.min(INSPECTOR_MIN_HEIGHT, naturalHeight, stackHeight - cardHeight - gap),
+  )
+  const card = Math.max(0, Math.min(cardHeight, stackHeight - gap - inspector))
+  return { inspector, card }
+}
+
+/** The inspector's full height: its header plus everything its scroller holds. */
+function inspectorHeights(slot: HTMLElement): { natural: number; header: number } {
+  const panel = slot.querySelector<HTMLElement>('[data-panel-wrapper]')
+  if (!panel) return { natural: 0, header: 0 }
+  const header = panel.querySelector<HTMLElement>('[data-panel-header]')?.offsetHeight ?? 0
+  const scroller = panel.querySelector<HTMLElement>('[data-panel-scroll]')
+  if (!scroller) return { natural: panel.offsetHeight, header }
+  return { natural: panel.offsetHeight - scroller.clientHeight + scroller.scrollHeight, header }
+}
+
+/**
+ * The right-hand column: the shortcuts card shows in full at the bottom, and
+ * the node inspector takes the space above it, growing down from the top and
+ * scrolling on itself. On a very short window the inspector keeps its header
+ * 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,
+  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)
+  const cardRef = useRef<HTMLDivElement>(null)
+
+  // `min(180px, its own height)` has no CSS form for a flex item that scrolls,
+  // so both floors are measured (`rightStackFloors`).
+  useEffect(() => {
+    if (isMobile) return
+    const stack = stackRef.current
+    const slot = inspectorRef.current
+    const card = cardRef.current
+    if (!(stack && slot && card)) return
+    let frame = 0
+    const fit = () => {
+      frame = 0
+      const { natural, header } = inspectorHeights(slot)
+      const floors = rightStackFloors({
+        naturalHeight: natural,
+        headerHeight: header,
+        cardHeight: card.scrollHeight,
+        stackHeight: stack.clientHeight,
+      })
+      const inspectorMin = `${floors.inspector}px`
+      const cardMin = `${floors.card}px`
+      if (slot.style.minHeight !== inspectorMin) slot.style.minHeight = inspectorMin
+      if (card.style.minHeight !== cardMin) card.style.minHeight = cardMin
+      // The card is click-through; it takes the pointer only when it has to scroll.
+      const pointer = floors.card < card.scrollHeight ? 'auto' : ''
+      if (card.style.pointerEvents !== pointer) card.style.pointerEvents = pointer
+    }
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(fit)
+    }
+    const resize = new ResizeObserver(schedule)
+    resize.observe(stack)
+    resize.observe(card)
+    // Content growing inside the scroller changes no outer size, hence the mutation watch.
+    // The same for the card: a new tool swaps its rows without resizing the slot.
+    const mutation = new MutationObserver(schedule)
+    for (const target of [slot, card])
+      mutation.observe(target, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['class', 'hidden', 'aria-expanded'],
+        characterData: true,
+      })
+    fit()
+    return () => {
+      if (frame) cancelAnimationFrame(frame)
+      resize.disconnect()
+      mutation.disconnect()
+    }
+  }, [isMobile])
+
+  if (isMobile) {
+    return (
+      <>
+        <div className="pointer-events-auto">{inspector}</div>
+        <div className="pointer-events-auto">{helper}</div>
+      </>
+    )
+  }
+
+  return (
+    <RightStackContext.Provider value={true}>
+      <div
+        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}
+      >
+        <div className="flex min-h-0 flex-[0_1_auto] flex-col items-end" ref={inspectorRef}>
+          {inspector}
+        </div>
+        <div
+          className="no-scrollbar mt-auto flex min-h-0 flex-[0_1_auto] flex-col overflow-y-auto rounded-xl"
+          data-right-stack-card
+          ref={cardRef}
+        >
+          {helper}
+        </div>
+      </div>
+    </RightStackContext.Provider>
+  )
+}

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

@@ -17,6 +17,11 @@ export type ExtraPanel = {
   label: string
   component: ComponentType
   pluginId?: string
+  /** Rail entry that drives the stage (see `SidebarTab.noPanel`); `component` serves the v1 sidebar. */
+  noPanel?: boolean
+  onSelect?: () => void
+  stageActive?: boolean
+  onDeselect?: () => void
 }
 
 interface IconRailProps {
@@ -60,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"
@@ -102,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"
@@ -133,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>
+  )
+}