@salsita-ai/sdk 0.50.0-develop.ea458ea381 → 0.50.0-develop.ecda3c6152

package/dist/docs/layouts/gallery/corvid-drone.mdx

@@ -0,0 +1,3428 @@
+# Corvid Drone
+
+Build a pro tool in which an engineer configures a product and a client reads the result. A drone maker, Corvid Aero, has its engineers configure the K6 survey drone for each customer: the frame, the arm length, the landing gear, the propellers, the motors' anodising, the payload with its camera tilt, and the livery. The layout is a flight deck over a full-bleed scene: a rail of the spec's tabs, a translucent panel with the active tab's controls, a HUD with the price, the all-up weight and the mode, the spec's view controls and a log line for the configurator's messages. The client opens the same configuration from a page that sets the configurator read-only, and gets the same tabs as a spec sheet. The project writes the layout as one element; the spec holds the tabs, the controls and the tab each belongs to, the views, the looks and the rule between the winch and the frame.
+
+- [Try it](#try-it)
+- [What the example demonstrates](#what-the-example-demonstrates)
+- [A deck over the scene](#a-deck-over-the-scene)
+- [Tabs from the spec](#tabs-from-the-spec)
+- [Controls that follow the tab](#controls-that-follow-the-tab)
+- [Arm length and camera tilt](#arm-length-and-camera-tilt)
+- [A target on the drone that opens a tab](#a-target-on-the-drone-that-opens-a-tab)
+- [Messages in the HUD](#messages-in-the-hud)
+- [The spec's views](#the-specs-views)
+- [The client's spec sheet](#the-clients-spec-sheet)
+- [The stage and the model](#the-stage-and-the-model)
+- [On a phone](#on-a-phone)
+- [Test cases](#test-cases)
+- [What this layout leaves out](#what-this-layout-leaves-out)
+- [Related pages](#related-pages)
+- [Complete Implementation](#complete-implementation)
+
+## Try it
+
+The client's view is under [The client's spec sheet](#the-clients-spec-sheet), the phone version under [On a phone](#on-a-phone).
+
+## What the example demonstrates
+
+[Custom Layout](?path=/docs/layouts-custom-layout--docs) explains how a project layout works: the element name, the scene, the safe area and the hooks. This page is a finished design built the same way, for a product with tabs and two audiences, and it shows the pieces Custom Layout does not use:
+
+| Piece                                                                                                                | Where                                                                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| `phx.frontend.useTabNavigation()` for the spec's `sidebarTabs`, as a rail and as a bottom bar                        | `DroneTabs`, [Tabs from the spec](#tabs-from-the-spec)                                         |
+| Controls filtered to a tab with `$filter.navigationStates`, each checked with `phx.frontend.useComponent()`          | `DroneFields`, [Controls that follow the tab](#controls-that-follow-the-tab)                   |
+| `phx.frontend.useDistanceDimension()` and `useAngleDimension()`, staging with `update` and committing with `resolve` | `ArmLengthField`, `GimbalTiltField`, [Arm length and camera tilt](#arm-length-and-camera-tilt) |
+| `phx.frontend.useAttributeSwitch()` for the landing gear                                                             | `GearField`                                                                                    |
+| A `sceneEntityObjectHtmlHotspot` whose entity element switches the tab, hidden from a viewer with `$filter.modes`    | `PayloadHotspot`, [A target on the drone](#a-target-on-the-drone-that-opens-a-tab)             |
+| `phx.frontend.useConfiguratorMessages()` as a HUD log line                                                           | `MessageLog`, [Messages in the HUD](#messages-in-the-hud)                                      |
+| `LayoutSlots.DesktopViewControls` and `MobileViewControls` for the spec's `viewControls`, with `useResetCamera()`    | `ViewDock`, [The spec's views](#the-specs-views)                                               |
+| Read mode from the host's `readonly` property, read with `phx.frontend.useAccessService()`, in a **Read Mode** story | `mocks/viewer.yaml`, [The client's spec sheet](#the-clients-spec-sheet)                        |
+| A morph target, an object group and `sceneEntityObjectLocalMaterialOverride`, on a `canvasCustomEnvironment` stage   | `DroneHangar`, [The stage and the model](#the-stage-and-the-model)                             |
+
+## A deck over the scene
+
+`src/elements/ConfiguratorLayout.tsx` keeps the scene mounted and lays the desktop or the phone deck over it. `phx.frontend.useActiveViewports()` tells them apart by the width of the configurator's container, not the window.
+
+```tsx
+import { Box } from '@mui/material'
+
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DesktopDeck } from '../_shared/DesktopDeck.js'
+import { PhoneDeck } from '../_shared/PhoneDeck.js'
+import { CORVID } from '../_shared/tokens.js'
+
+// A pro tool over a full-bleed scene: the spec's tabs, a panel with the active tab's controls, a HUD with the
+// readouts, and the spec's view controls. The canvas stays mounted; what lies over it is the desktop or the phone
+// deck, and each calls `useSceneSafeArea` itself, so only the one on screen tells the camera where the drone goes.
+// The layout shows messages in its own log line, so it does not mount `LayoutSlots.Services`.
+const ConfiguratorLayout = () => {
+  // `null` until the container has been measured; only the scene shows until then
+  const viewports = phx.frontend.useActiveViewports()
+  const isDesktop = viewports?.includes('desktop') ?? false
+
+  return (
+    <Box
+      component="div"
+      sx={{ position: 'absolute', inset: 0, overflow: 'clip', bgcolor: CORVID.graphite, color: CORVID.ink }}
+    >
+      <LayoutSlots.SharedCanvas />
+      {viewports !== null && (isDesktop ? <DesktopDeck /> : <PhoneDeck />)}
+    </Box>
+  )
+}
+
+export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout', ConfiguratorLayout)
+```
+
+- **The scene is full-bleed.** The canvas fills the configurator, and the rail, the panel and the HUD lie over it. The panel is translucent with a blur, so the hangar shows through it.
+- **Each deck measures its own safe area.** `DesktopDeck` attaches `safeAreaRef` to a box in the free area right of the panel, below the HUD and above the dock; `PhoneDeck` to the scene above the sheet. The camera frames the drone in that box, so the drone never sits under the panel.
+- **Fullscreen is a preview.** `phx.frontend.useIsFullscreenActive()` removes the rail, the panel, the HUD and the log; the dock with the camera reset and the exit stays, and on a desktop the view controls with it, as [Interaction Modes → Full-screen preview](?path=/docs/ux-guidelines-interaction-modes--docs#full-screen-preview) recommends. The fullscreen button records `FrontendAnalyticsFactory.FullScreenModeToggled()` through `phx.frontend.useAnalytics()`, like the built-in one.
+
+## Tabs from the spec
+
+The tabs are product structure, so they are in the spec: one `sidebarTabs` component on the drone, a navigation state per tab and an icon from the PhxIcon set.
+
+```yaml
+navigationStates:
+  - airframe
+  - propulsion
+  - payload
+  - livery
+```
+
+```yaml
+components:
+  Drone:
+    sidebarTabs:
+      main:
+        tabs:
+          - label: Airframe
+            icon: Cube
+            navigationStates: [airframe]
+          - label: Propulsion
+            icon: ArrowClockwise
+            navigationStates: [propulsion]
+          - label: Payload
+            icon: Scan
+            navigationStates: [payload]
+          - label: Livery
+            icon: PaletteBold
+            navigationStates: [livery]
+```
+
+`DroneTabs` draws them with `phx.frontend.useTabNavigation()`: a rail of icons on a desktop, a segmented bar on a phone. Each tab comes with its resolved `label`, the spec's `icon`, which `PhxIcon` from `@salsita-ai/sdk/ui` renders, and `isActive`; `select(index)` enters the tab's first navigation state, as the built-in tabs do. The list is a `tablist` whose tabs control the panel, and the arrow keys move between them.
+
+```tsx
+import { Box, ButtonBase, Typography } from '@mui/material'
+import type { KeyboardEvent } from 'react'
+
+import { PhxIcon } from '@salsita-ai/sdk/ui'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID } from './tokens.js'
+
+// The panel the tabs control; `TabPanel` carries this id
+export const TAB_PANEL_ID = 'corvid-tab-panel'
+
+interface DroneTabsProps {
+  readonly orientation: 'vertical' | 'horizontal'
+}
+
+// The spec's `sidebarTabs` as a tab list: a rail of icons on a desktop, a segmented bar at the bottom of a phone.
+// `useTabNavigation` gives each tab its resolved label, the PhxIcon name the spec sets and `isActive`; `select` enters
+// the tab's navigation state, and the controls the spec filters to that state become active. Switching tabs is
+// navigation, not editing, so a viewer switches too.
+export const DroneTabs = ({ orientation }: DroneTabsProps) => {
+  const { tabs, select } = phx.frontend.useTabNavigation()
+  const vertical = orientation === 'vertical'
+  const nextKey = vertical ? 'ArrowDown' : 'ArrowRight'
+  const previousKey = vertical ? 'ArrowUp' : 'ArrowLeft'
+
+  // The arrow keys move between the tabs and enter the one they reach, as in a native tab list
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>, index: number) => {
+    const step = event.key === nextKey ? 1 : event.key === previousKey ? -1 : 0
+
+    if (step === 0) {
+      return
+    }
+
+    event.preventDefault()
+    const next = (index + step + tabs.length) % tabs.length
+    select(next)
+    event.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role="tab"]')[next]?.focus()
+  }
+
+  return (
+    <Box
+      component="div"
+      role="tablist"
+      aria-label="Configuration"
+      aria-orientation={orientation}
+      sx={{ display: 'flex', flexDirection: vertical ? 'column' : 'row', gap: vertical ? 0.5 : 0, blockSize: '100%' }}
+    >
+      {tabs.map(tab => (
+        <ButtonBase
+          key={tab.state}
+          role="tab"
+          id={`corvid-tab-${tab.index}`}
+          aria-selected={tab.isActive}
+          aria-controls={TAB_PANEL_ID}
+          tabIndex={tab.isActive ? 0 : -1}
+          onClick={() => select(tab.index)}
+          onKeyDown={event => handleKeyDown(event, tab.index)}
+          sx={{
+            position: 'relative',
+            flex: vertical ? 'none' : '1 1 0',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 0.75,
+            minBlockSize: vertical ? 68 : 'auto',
+            color: tab.isActive ? CORVID.lime : CORVID.muted,
+            bgcolor: tab.isActive ? 'rgba(198, 244, 50, 0.07)' : 'transparent',
+            transition: 'color 160ms, background-color 160ms',
+            // The active tab's marker: a bar on the rail's outer edge, or along the top of the bar's segment
+            '&::before': {
+              content: '""',
+              position: 'absolute',
+              insetBlock: vertical ? '14px' : '0 auto',
+              insetInlineStart: vertical ? 0 : '18%',
+              insetInlineEnd: vertical ? 'auto' : '18%',
+              inlineSize: vertical ? 2 : 'auto',
+              blockSize: vertical ? 'auto' : 2,
+              bgcolor: CORVID.lime,
+              opacity: tab.isActive ? 1 : 0,
+              transition: 'opacity 160ms',
+            },
+            '&:hover': { color: tab.isActive ? CORVID.lime : CORVID.ink },
+            '&.Mui-focusVisible': { outline: `1px solid ${CORVID.lime}`, outlineOffset: -4 },
+          }}
+        >
+          {tab.icon !== undefined && <PhxIcon name={tab.icon} fontSize="medium" />}
+          <Typography
+            component="span"
+            sx={{ fontFamily: CORVID.mono, fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase' }}
+          >
+            {tab.label}
+          </Typography>
+        </ButtonBase>
+      ))}
+    </Box>
+  )
+}
+```
+
+The panel's heading is the active tab's label, from the same hook in `TabPanel`. Use `useTabNavigation()` rather than `LayoutSlots.useSidebarTabs()` in a layout of your own: it is a member of `phx.frontend`, reads `horizontalTabs` too, and gives each tab its navigation states.
+
+## Controls that follow the tab
+
+Each control component carries the tab it belongs to as a filter, so it is active only while its tab is:
+
+```yaml
+components:
+  Drone:
+    attributeSelection:
+      frame:
+        value:
+          $bind: frame
+        options:
+          - label: Quad
+            description: Four motors, the lightest and longest-flying
+            value: Quad
+          - label: Hexa
+            description: Six motors; lands safely with one motor out
+            value: Hexa
+        $filter:
+          navigationStates: [airframe]
+```
+
+The layout lists every control once, in the order the panel shows them, and each renders only while its component is active. Which tab shows which control is then decided by the spec alone: moving `props` to the Airframe tab is a change of its filter, not of the layout.
+
+```tsx
+import { Box } from '@mui/material'
+
+import { ArmLengthField } from './ArmLengthField.js'
+import { GearField } from './GearField.js'
+import { GimbalTiltField } from './GimbalTiltField.js'
+import { OptionField } from './OptionField.js'
+import { FRAME_VISUALS, LIVERY_VISUALS, MOTOR_VISUALS, PAYLOAD_VISUALS, PROP_VISUALS } from './visuals.js'
+
+interface DroneFieldsProps {
+  readonly readOnly: boolean
+}
+
+// Every control of the spec, in the order the panel shows them. Each one renders only while its spec component is
+// active, so the spec's `$filter.navigationStates` decides which tab shows it and `$filter.active` hides the tilt
+// without the camera. The labels are the layout's: `attributeSelection` and the dimensions carry none.
+export const DroneFields = ({ readOnly }: DroneFieldsProps) => {
+  return (
+    <Box component="div" sx={{ display: 'grid', gap: readOnly ? 1.5 : 3 }}>
+      <OptionField instanceName="frame" label="Frame" visuals={FRAME_VISUALS} readOnly={readOnly} />
+      <ArmLengthField readOnly={readOnly} />
+      <GearField readOnly={readOnly} />
+      <OptionField instanceName="props" label="Propellers" visuals={PROP_VISUALS} readOnly={readOnly} />
+      <OptionField instanceName="motorColor" label="Motor anodising" visuals={MOTOR_VISUALS} readOnly={readOnly} />
+      <OptionField instanceName="payload" label="Payload" visuals={PAYLOAD_VISUALS} readOnly={readOnly} />
+      <GimbalTiltField readOnly={readOnly} />
+      <OptionField instanceName="livery" label="Livery" visuals={LIVERY_VISUALS} readOnly={readOnly} />
+    </Box>
+  )
+}
+```
+
+The control hooks throw for a component that a `$filter` makes inactive, so every field first asks `phx.frontend.useComponent({ entityId, componentType, instanceName })` for its component, with the component type from `@salsita-ai/sdk/domain`, and renders nothing while it gets `null`. `OptionField` does this for each `attributeSelection`, then draws its options as tiles: the layout's drawing or colour chip per option `value`, the spec's `label` as the title and the chosen option's `description` below. An option an invariant rules out is hatched; see [Messages in the HUD](#messages-in-the-hud).
+
+The landing gear is an `attributeSwitch`: `GearField` calls `phx.frontend.useAttributeSwitch(droneId, 'retractableGear')` and gives `state.value` and `onChange()` to a switch.
+
+## Arm length and camera tilt
+
+The arm length is a `distanceDimension` in millimetres, the data unit, and the camera's tilt an `angleDimension`, which the spec stores in radians and shows in degrees. The tilt is filtered twice: to the Payload tab, and to a drone that carries the camera.
+
+```yaml
+components:
+  Drone:
+    distanceDimension:
+      armLength:
+        value:
+          $bind: armLength
+        min: 280
+        max: 380
+        $filter:
+          navigationStates: [airframe]
+    angleDimension:
+      gimbalTilt:
+        value:
+          $bind: gimbalTilt
+        min: 0
+        max: 1.5707963268
+        unit: degree
+        decimalPlaces: 0
+        # Only the camera tilts
+        $filter:
+          navigationStates: [payload]
+          active:
+            $eval: self.payload === 'Camera'
+```
+
+`phx.frontend.useDistanceDimension(droneId, 'armLength')` returns the value in the display unit with `valueWithUnit`, the range, `formatValue()` for any other length, and two functions: `update(value)` stages a value, which the scene shows at once, and `resolve()` commits it, or rolls it back when it breaks an invariant. `HudSlider` calls `update` from the slider's `onChange` and `resolve` from `onChangeCommitted`, so the arms grow under the thumb and the change is committed, and saved, once the thumb is let go.
+
+```tsx
+import { distanceDimensionComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { HudSlider } from './HudSlider.js'
+import { SpecRow } from './SpecRow.js'
+
+const STEP = 10
+
+interface ArmLengthFieldProps {
+  readonly readOnly: boolean
+}
+
+const ArmLengthControl = ({ readOnly }: ArmLengthFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const arm = phx.frontend.useDistanceDimension(droneId, 'armLength')
+  // Motor to motor across the drone: twice the arm, which is measured from the centre
+  const span = `Motor to motor ${arm.formatValue(arm.value * 2, true)}`
+
+  if (readOnly) {
+    return <SpecRow label="Arm length" value={arm.valueWithUnit} detail={span} />
+  }
+
+  return (
+    <HudSlider
+      id="corvid-arm-length"
+      label="Arm length"
+      valueText={arm.valueWithUnit}
+      value={arm.value}
+      min={arm.min}
+      max={arm.max}
+      step={STEP}
+      minLabel={arm.formatValue(arm.min, true)}
+      maxLabel={arm.formatValue(arm.max, true)}
+      detail={span}
+      onChange={arm.update}
+      onCommit={arm.resolve}
+    />
+  )
+}
+
+// The spec's `distanceDimension` for the arm length, in the display unit. Moving the slider stages each value with
+// `update`, so the arms grow under the thumb through the spec's morph target, and letting go commits it with
+// `resolve`. The field exists only while the spec's component is active.
+export const ArmLengthField = (props: ArmLengthFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: droneId,
+    componentType: distanceDimensionComponent,
+    instanceName: 'armLength',
+  })
+
+  return component === null ? null : <ArmLengthControl {...props} />
+}
+```
+
+`phx.frontend.useAngleDimension(droneId, 'gimbalTilt')` works the same way in the spec's `unit`: `value`, `min` and `max` in degrees, `unitLabel` "°", and `update` in degrees. `GimbalTiltField` adds a quarter dial that shows the camera's line of sight.
+
+```tsx
+import { angleDimensionComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID } from '../_shared/tokens.js'
+import { HudSlider } from './HudSlider.js'
+import { SpecRow } from './SpecRow.js'
+
+interface TiltDialProps {
+  readonly degrees: number
+}
+
+// A quarter dial from the horizon down to the ground, with the camera's line of sight on it
+const TiltDial = ({ degrees }: TiltDialProps) => {
+  const radians = (degrees * Math.PI) / 180
+  const x = 6 + 40 * Math.cos(radians)
+  const y = 6 + 40 * Math.sin(radians)
+
+  return (
+    <svg viewBox="0 0 52 52" width={52} height={52} aria-hidden fill="none">
+      <path d="M6 6h44M6 6v44" stroke={CORVID.line} />
+      <path d="M46 6A40 40 0 0 1 6 46" stroke={CORVID.faint} strokeDasharray="2 3" />
+      <path d={`M6 6L${x} ${y}`} stroke={CORVID.lime} strokeWidth={1.6} />
+      <circle cx={x} cy={y} r={2.5} fill={CORVID.lime} />
+      <rect x={2} y={2} width={8} height={8} fill={CORVID.graphite} stroke={CORVID.lime} />
+    </svg>
+  )
+}
+
+const describe = (degrees: number) => {
+  if (degrees <= 0) {
+    return 'Level with the horizon, for inspection'
+  }
+
+  if (degrees >= 90) {
+    return 'Straight down, for mapping'
+  }
+
+  return `${degrees}° below the horizon`
+}
+
+interface GimbalTiltFieldProps {
+  readonly readOnly: boolean
+}
+
+const GimbalTiltControl = ({ readOnly }: GimbalTiltFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const tilt = phx.frontend.useAngleDimension(droneId, 'gimbalTilt')
+  const valueText = `${tilt.value}${tilt.unitLabel}`
+  const min = tilt.min ?? 0
+  const max = tilt.max ?? 90
+
+  if (readOnly) {
+    return <SpecRow label="Gimbal tilt" value={valueText} detail={describe(tilt.value)} />
+  }
+
+  return (
+    <HudSlider
+      id="corvid-gimbal-tilt"
+      label="Gimbal tilt"
+      valueText={valueText}
+      value={tilt.value}
+      min={min}
+      max={max}
+      step={1}
+      minLabel={`${min}${tilt.unitLabel} HORIZON`}
+      maxLabel={`${max}${tilt.unitLabel} NADIR`}
+      detail={describe(tilt.value)}
+      adornment={<TiltDial degrees={tilt.value} />}
+      onChange={tilt.update}
+      onCommit={tilt.resolve}
+    />
+  )
+}
+
+// The spec's `angleDimension` for the camera's tilt, in degrees as the spec's `unit` asks; the spec stores radians and
+// turns the gimbal's pivot group by them. The slider stages with `update` and commits with `resolve`. The spec makes
+// the component active only on the Payload tab and only while the camera is fitted, so the field checks first.
+export const GimbalTiltField = (props: GimbalTiltFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: droneId,
+    componentType: angleDimensionComponent,
+    instanceName: 'gimbalTilt',
+  })
+
+  return component === null ? null : <GimbalTiltControl {...props} />
+}
+```
+
+## A target on the drone that opens a tab
+
+A `sceneEntityObjectHtmlHotspot` pins an element to one of the entity's objects, here the payload mount, and moves with it. Its `name` is an entity element of the project. The filter shows it only to the engineer, only outside the Payload tab and not in fullscreen.
+
+```yaml
+components:
+  Drone:
+    sceneEntityObjectHtmlHotspot:
+      payloadMount:
+        target: payloadMount
+        name: PayloadHotspot
+        $filter:
+          modes: [owner]
+          navigationStates: [airframe, propulsion, livery]
+          fullscreen: false
+```
+
+`PayloadHotspot` renders a target and a label, and calls `select('payload')` of `phx.frontend.useTabNavigation()`. The tab then becomes active, the panel shows the payload controls, and the target disappears, because its filter leaves out the Payload tab.
+
+```tsx
+import { Box, ButtonBase } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID } from '../_shared/tokens.js'
+
+// Rendered by the spec's `sceneEntityObjectHtmlHotspot` on the payload mount: a target on the drone that opens the
+// Payload tab. The spec's `$filter` shows it only to the engineer and only outside that tab.
+export default phx.frontend.createCustomPhoenixEntityElement('PayloadHotspot', () => {
+  const { select } = phx.frontend.useTabNavigation()
+
+  return (
+    <ButtonBase
+      aria-label="Payload: open the Payload tab"
+      onClick={() => select('payload')}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        // The target's centre sits on the mount; the label hangs to its right
+        transform: 'translate(-14px, 0)',
+        color: CORVID.lime,
+        '&:hover .corvid-hotspot-label, &.Mui-focusVisible .corvid-hotspot-label': {
+          bgcolor: CORVID.lime,
+          color: CORVID.graphite,
+        },
+      }}
+    >
+      <Box
+        component="span"
+        aria-hidden
+        sx={{
+          position: 'relative',
+          display: 'grid',
+          placeItems: 'center',
+          inlineSize: 28,
+          blockSize: 28,
+          // A ring that keeps widening and fading, so the target reads as live
+          '&::after': {
+            content: '""',
+            position: 'absolute',
+            inset: 0,
+            borderRadius: '50%',
+            border: `1px solid ${CORVID.lime}`,
+            animation: 'corvid-ping 2s ease-out infinite',
+          },
+          '@keyframes corvid-ping': {
+            from: { transform: 'scale(0.6)', opacity: 0.9 },
+            to: { transform: 'scale(1.6)', opacity: 0 },
+          },
+        }}
+      >
+        <svg viewBox="0 0 28 28" width={28} height={28} fill="none" stroke="currentColor" strokeWidth={1.4}>
+          <circle cx={14} cy={14} r={8} fill="rgba(20, 23, 28, 0.6)" />
+          <path d="M14 2v6M14 20v6M2 14h6M20 14h6" />
+          <circle cx={14} cy={14} r={1.6} fill="currentColor" />
+        </svg>
+      </Box>
+      <Box
+        component="span"
+        className="corvid-hotspot-label"
+        sx={{
+          paddingInline: 1,
+          paddingBlock: 0.5,
+          fontFamily: CORVID.mono,
+          fontSize: 10.5,
+          letterSpacing: '0.16em',
+          whiteSpace: 'nowrap',
+          color: CORVID.lime,
+          bgcolor: 'rgba(20, 23, 28, 0.8)',
+          border: `1px solid ${CORVID.lime}`,
+          transition: 'background-color 160ms, color 160ms',
+        }}
+      >
+        PAYLOAD ›
+      </Box>
+    </ButtonBase>
+  )
+})
+```
+
+The hotspot sits at the origin of the object named by `target`. The model gives the mount's node its origin on the mount, and the loader places every part at the scene's origin, so the spec moves the mount back with `offsetZ: 90` in `sceneEntityObjectProperties`; see [The stage and the model](#the-stage-and-the-model).
+
+The hotspot's own `offsetX`, `offsetY` and `offsetZ` are applied inside the object, in the unit of its model: on this model in metres, so `offsetY: 0.15` lifts the target 150 mm and `offsetY: 150` sends it 150 m away. Giving the node its origin where the target belongs, as here, needs no offset.
+
+## Messages in the HUD
+
+The delivery winch needs six motors. The rule is a `fixable` invariant, whose condition is in `src/invariants/drone.ts`:
+
+```yaml
+invariants:
+  Drone:
+    winchNeedsHexa:
+      type: winchNeedsHexa
+      severity: fixable
+      message: The delivery winch needs the hexa frame to lift its load.
+```
+
+On a quad the winch option comes back `disabled` with the message as its `hint`, and on a winch drone the quad option does. `OptionField` hatches the option and shows the hint below the tiles, in orange. The tile stays clickable: choosing it anyway makes the change, the invariant rejects it, and the configurator reports the rejection as a message. Choosing the LiDAR carries a hint from the `lidar-base-station` transformer, which is a message too.
+
+`MessageLog` shows them as the HUD's log line. `phx.frontend.useConfiguratorMessages(onMessage)` calls it once per message with its text resolved: a `violation` with the invariant's `message` and its `severity`, a `sideEffect` with the transformer's hint, and the errors and save failures. The line tags each by kind and returns to **READY** after a few seconds. The layout mounts no `LayoutSlots.Services`, so the messages are not shown twice as snackbars; see [Custom Layout → Show messages](?path=/docs/layouts-custom-layout--docs#show-messages).
+
+```tsx
+import { Box } from '@mui/material'
+import { useEffect, useState } from 'react'
+
+import type { ConfiguratorMessage } from '@salsita-ai/sdk/react'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID, GLASS_SX } from './tokens.js'
+
+const VISIBLE_MS = 9000
+
+interface LogEntry {
+  readonly message: ConfiguratorMessage
+  readonly time: string
+}
+
+// The tag before each line, by the kind of message and, for a violation, its severity
+const tagOf = (message: ConfiguratorMessage) => {
+  if (message.kind === 'violation') {
+    return message.violation.severity === 'fixable' || message.violation.severity === 'fatal'
+      ? { label: 'REJECTED', color: CORVID.orange }
+      : { label: message.violation.severity.toUpperCase(), color: CORVID.cyan }
+  }
+
+  if (message.kind === 'sideEffect') {
+    return { label: 'NOTE', color: CORVID.cyan }
+  }
+
+  if (message.kind === 'saveRecovery') {
+    return { label: 'SAVED', color: CORVID.lime }
+  }
+
+  return { label: 'ERROR', color: CORVID.orange }
+}
+
+interface MessageLogProps {
+  readonly compact: boolean
+}
+
+// The configurator's messages as the HUD's log line: a rejected change, the hint a change carries, a failed save.
+// `useConfiguratorMessages` hands each one over with its text resolved; the line shows the latest for a few seconds,
+// then returns to its idle state.
+export const MessageLog = ({ compact }: MessageLogProps) => {
+  const [entry, setEntry] = useState<LogEntry | null>(null)
+  const { accessInfo } = phx.frontend.useAccessService()
+
+  phx.frontend.useConfiguratorMessages(message => {
+    setEntry({ message, time: new Date().toLocaleTimeString('en-GB') })
+  })
+
+  useEffect(() => {
+    if (entry === null) {
+      return
+    }
+
+    const timeout = setTimeout(() => setEntry(null), VISIBLE_MS)
+
+    return () => clearTimeout(timeout)
+  }, [entry])
+
+  const tag = entry ? tagOf(entry.message) : { label: 'READY', color: CORVID.faint }
+  const idle = accessInfo.viewMode ? 'Viewing a shared configuration' : 'Every change saves on its own'
+
+  return (
+    <Box
+      component="div"
+      role="status"
+      aria-live="polite"
+      sx={{
+        ...GLASS_SX,
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: compact ? 1 : 1.5,
+        minInlineSize: 0,
+        maxInlineSize: compact ? 'none' : 560,
+        paddingInline: 1.5,
+        paddingBlock: 1,
+        fontFamily: CORVID.mono,
+        fontSize: compact ? 11 : 12,
+        lineHeight: 1.5,
+      }}
+    >
+      <Box component="span" aria-hidden sx={{ color: CORVID.lime }}>
+        &gt;
+      </Box>
+      {entry && !compact && (
+        <Box component="span" sx={{ color: CORVID.faint }}>
+          {entry.time}
+        </Box>
+      )}
+      <Box component="span" sx={{ flex: 'none', color: tag.color, letterSpacing: '0.12em' }}>
+        {tag.label}
+      </Box>
+      <Box component="span" sx={{ minInlineSize: 0, color: entry ? CORVID.ink : CORVID.muted }}>
+        {entry ? entry.message.text : idle}
+      </Box>
+    </Box>
+  )
+}
+```
+
+## The spec's views
+
+Three views, each with its own camera filtered by `viewStates`: an orbit around the drone, a top view and a low view of the payload. The spec's `viewControls` list them with a label and an icon.
+
+```yaml
+viewStates:
+  - orbit
+  - top
+  - payloadView
+```
+
+```yaml
+components:
+  Drone:
+    viewControls:
+      main:
+        items:
+          - label: Orbit
+            value: orbit
+            icon: CameraRotate
+          - label: Top
+            value: top
+            icon: GridFour
+          - label: Payload
+            value: payloadView
+            icon: Scan
+```
+
+`ViewDock` mounts the built-in controls for them: `LayoutSlots.DesktopViewControls`, a row of toggles, on a desktop, and `LayoutSlots.MobileViewControls`, one button that opens the list, on a phone. Both read the component and set the view state themselves, so the dock needs no state of its own. The built-in controls draw with the MUI theme, so the dock wraps them in a `ThemeProvider` with a dark palette, which also reaches the list a phone opens in a popper, and restyles the toggles through their MUI classes, `toggleButtonGroupClasses` and `toggleButtonClasses` from `@mui/material`. It adds the camera reset from `phx.frontend.useResetCamera()` and the fullscreen toggle. The HUD names the active view with `phx.frontend.useActiveViewState()` and the label of the matching item.
+
+```tsx
+import {
+  Box,
+  Divider,
+  IconButton,
+  ThemeProvider,
+  Tooltip,
+  createTheme,
+  toggleButtonClasses,
+  toggleButtonGroupClasses,
+} from '@mui/material'
+import type { Theme } from '@mui/material'
+
+import { FrontendAnalyticsFactory, LayoutSlots } from '@salsita-ai/sdk/configurator'
+import { PhxIcon } from '@salsita-ai/sdk/ui'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID, GLASS_SX } from './tokens.js'
+
+// The built-in view controls draw with the MUI theme's palette. A dark palette makes them part of the deck, and with
+// them the list of views a phone opens, which renders in a popper outside the dock.
+const deckTheme = (outer: Theme) =>
+  createTheme(outer, {
+    palette: {
+      mode: 'dark',
+      primary: { main: CORVID.lime },
+      text: { primary: CORVID.ink, secondary: CORVID.muted },
+      background: { paper: CORVID.panelSolid },
+      divider: CORVID.line,
+      action: { hover: 'rgba(232, 237, 242, 0.06)' },
+    },
+  })
+
+interface DockButtonProps {
+  readonly label: string
+  readonly icon: string
+  readonly onClick: () => void
+}
+
+const DockButton = ({ label, icon, onClick }: DockButtonProps) => {
+  return (
+    <Tooltip title={label}>
+      <IconButton
+        aria-label={label}
+        onClick={onClick}
+        sx={{
+          inlineSize: 36,
+          blockSize: 36,
+          borderRadius: 0,
+          color: CORVID.muted,
+          '&:hover': { color: CORVID.lime, bgcolor: 'rgba(198, 244, 50, 0.08)' },
+        }}
+      >
+        <PhxIcon name={icon} />
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+interface ViewDockProps {
+  readonly placement: 'desktop' | 'phone'
+}
+
+// The spec's view controls, mounted from `LayoutSlots`, with the camera reset and fullscreen beside them. On a
+// desktop `DesktopViewControls` is a row of toggles; on a phone `MobileViewControls` is one button that opens the
+// list of views, left out in fullscreen as the UX guidelines ask. The dock gives the built-in controls a dark theme
+// and restyles the toggles through their MUI classes.
+export const ViewDock = ({ placement }: ViewDockProps) => {
+  const resetCamera = phx.frontend.useResetCamera()
+  const isFullscreen = phx.frontend.useIsFullscreenActive()
+  const setFullscreen = phx.frontend.useSetFullscreen()
+  const analytics = phx.frontend.useAnalytics()
+
+  // The same event the built-in fullscreen button records, for entering and for leaving
+  const toggleFullscreen = () => {
+    analytics.push(FrontendAnalyticsFactory.FullScreenModeToggled())
+    setFullscreen(!isFullscreen)
+  }
+
+  return (
+    <ThemeProvider theme={deckTheme}>
+      <Box
+        component="div"
+        role="toolbar"
+        aria-label="View"
+        sx={{
+          ...GLASS_SX,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+          padding: 0.5,
+          color: CORVID.ink,
+          [`& .${toggleButtonGroupClasses.root}`]: {
+            gap: 0.5,
+            padding: 0,
+            bgcolor: 'transparent',
+            boxShadow: 'none',
+            borderRadius: 0,
+          },
+          [`& .${toggleButtonClasses.root}`]: {
+            gap: 1,
+            minBlockSize: 36,
+            paddingInline: 1.5,
+            border: 0,
+            borderRadius: 0,
+            color: CORVID.muted,
+            '& .MuiTypography-root': {
+              fontFamily: CORVID.mono,
+              fontSize: 11,
+              letterSpacing: '0.14em',
+              textTransform: 'uppercase',
+            },
+            '&:hover': { color: CORVID.ink, bgcolor: 'rgba(232, 237, 242, 0.06)' },
+          },
+          [`& .${toggleButtonClasses.root}.${toggleButtonClasses.selected}`]: {
+            color: CORVID.graphite,
+            bgcolor: CORVID.lime,
+            '&:hover': { bgcolor: CORVID.lime },
+          },
+          // The phone's view button sits on the dock, not on a paper of its own
+          '& .MuiPaper-root': { bgcolor: 'transparent', boxShadow: 'none' },
+        }}
+      >
+        {placement === 'desktop' && <LayoutSlots.DesktopViewControls />}
+        {placement === 'phone' && !isFullscreen && <LayoutSlots.MobileViewControls />}
+        {(placement === 'desktop' || !isFullscreen) && (
+          <Divider orientation="vertical" flexItem sx={{ borderColor: CORVID.line, marginBlock: 0.5 }} />
+        )}
+        <DockButton label="Reset camera" icon="ArrowCounterClockwise" onClick={resetCamera} />
+        <DockButton
+          label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+          icon={isFullscreen ? 'ArrowsIn' : 'ArrowsOut'}
+          onClick={toggleFullscreen}
+        />
+      </Box>
+    </ThemeProvider>
+  )
+}
+```
+
+## The client's spec sheet
+
+The client opens the configuration from a page that sets the web component's `readonly` property. The mock template `mocks/viewer.yaml`, **Client viewer** in the editor's **Mocks** panel, keeps `access: owner`, sets the property with `webComponentProperties: { readonly: true }` and opens a finished `configuration`: a hexa with 340 mm arms, three-blade propellers, cyan motors, the LiDAR, retractable gear and the Arctic livery. The **Read Mode** story pins that template.
+
+The `readonly` property sets `phx.frontend.useAccessService().accessInfo.viewMode` to `true`, as a configuration shared for viewing does, and switches the spec's filter mode to read. `TabPanel` reads it and passes `readOnly` to the fields:
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DroneFields } from '../_controls/DroneFields.js'
+import { TAB_PANEL_ID } from './DroneTabs.js'
+import { CORVID, LABEL_SX } from './tokens.js'
+
+interface TabPanelProps {
+  readonly compact: boolean
+}
+
+// The active tab's heading and controls. The heading is the tab's label from the spec; the controls are whichever
+// the spec activates for the tab. A viewer gets the same tabs with every control as a line of the spec sheet.
+export const TabPanel = ({ compact }: TabPanelProps) => {
+  const { tabs, activeTab } = phx.frontend.useTabNavigation()
+  const { accessInfo } = phx.frontend.useAccessService()
+  const readOnly = accessInfo.viewMode
+  const position = `${String((activeTab?.index ?? 0) + 1).padStart(2, '0')} / ${String(tabs.length).padStart(2, '0')}`
+
+  return (
+    <Box
+      component="section"
+      role="tabpanel"
+      id={TAB_PANEL_ID}
+      aria-labelledby={activeTab ? `corvid-tab-${activeTab.index}` : undefined}
+      sx={{ display: 'grid', gap: compact ? 2 : 3 }}
+    >
+      <Box component="header" sx={{ display: 'grid', gap: 0.5 }}>
+        <Typography sx={{ ...LABEL_SX, color: readOnly ? CORVID.cyan : CORVID.lime }}>
+          {position} · {readOnly ? 'SPEC SHEET' : 'CONFIGURE'}
+        </Typography>
+        <Typography
+          component="h2"
+          sx={{ fontFamily: CORVID.heading, fontWeight: 600, fontSize: compact ? 20 : 26, lineHeight: 1.15 }}
+        >
+          {activeTab?.label}
+        </Typography>
+      </Box>
+      <DroneFields readOnly={readOnly} />
+    </Box>
+  )
+}
+```
+
+- **Every control becomes a line of the spec sheet.** Each field still reads its value through its hook, but renders `SpecRow`, with the chosen option, the length or the angle and a line of detail, instead of the control. The hooks do not check read mode themselves.
+- **The tabs stay.** The spec sheet is long, so the client browses it by tab; switching tabs is navigation, not editing. This departs on purpose from [Interaction Modes → View-only mode](?path=/docs/ux-guidelines-interaction-modes--docs#view-only-mode), which hides the editing navigation.
+- **The HUD says SPEC SHEET · VIEW ONLY**, in cyan, where the engineer sees ENGINEERING · EDIT.
+- **The target on the payload is gone.** Its `$filter.modes: [owner]` leaves it out in read mode, whichever of the two routes set it.
+
+[Custom Layout → Serve read mode](?path=/docs/layouts-custom-layout--docs#serve-read-mode) shows the other route, a configuration opened with `read-revision` access; the layout reads both the same way.
+
+## The stage and the model
+
+The spec's `canvasCustomEnvironment` names `DroneHangar`, a layout element rendered inside the scene: a dark backdrop, drei's `Grid` as a measured floor 320 mm below the drone, a landing ring, a contact shadow, and `Lightformer` panels that show only in the reflections. The scene is in millimetres.
+
+```tsx
+import { ContactShadows, Environment, Grid, Lightformer } from '@react-three/drei'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID } from '../_shared/tokens.js'
+
+// The floor lies 320 mm below the drone's centre, so the drone hovers over it on either landing gear
+const FLOOR_Y = -320
+
+// The stage named by the spec's `canvasCustomEnvironment`: a dark hangar with a measured floor, a landing ring and a
+// soft shadow. Light panels exist only in the reflections, so the shell and the anodised motors have something to
+// mirror and no image has to be downloaded. The scene is in millimetres.
+export default phx.frontend.createCustomPhoenixLayoutElement('DroneHangar', () => {
+  return (
+    <>
+      <color attach="background" args={[CORVID.graphite]} />
+      <ambientLight intensity={0.6} />
+      <directionalLight position={[-700, 1500, 1100]} intensity={2.4} />
+      <directionalLight position={[1200, 500, 600]} intensity={0.7} />
+      {/* A cool rim light from behind outlines the drone against the dark hangar */}
+      <directionalLight position={[600, 700, -1400]} intensity={1.8} color={CORVID.cyan} />
+
+      <Environment resolution={256} frames={1}>
+        <color attach="background" args={['#262b32']} />
+        {/* A long softbox above, two tall strips at the sides and a dim fill from the front */}
+        <Lightformer form="rect" intensity={3.2} position={[0, 6, 0]} rotation-x={Math.PI / 2} scale={[10, 3, 1]} />
+        <Lightformer form="rect" intensity={2.4} position={[-6, 1.5, 3]} rotation-y={Math.PI / 2} scale={[1, 7, 1]} />
+        <Lightformer form="rect" intensity={1.6} position={[6, 1.5, -2]} rotation-y={-Math.PI / 2} scale={[1, 7, 1]} />
+        <Lightformer form="rect" intensity={1} position={[0, 0, 8]} rotation-y={Math.PI} scale={[8, 2, 1]} />
+      </Environment>
+
+      <Grid
+        position={[0, FLOOR_Y, 0]}
+        infiniteGrid
+        cellSize={50}
+        cellThickness={0.6}
+        cellColor="#262c34"
+        sectionSize={250}
+        sectionThickness={1}
+        sectionColor="#3a4652"
+        fadeDistance={4200}
+        fadeStrength={2}
+      />
+      {/* The landing ring, drawn just above the floor so the grid does not cut through it */}
+      <mesh rotation-x={-Math.PI / 2} position={[0, FLOOR_Y + 1, 0]}>
+        <ringGeometry args={[440, 445, 128]} />
+        <meshBasicMaterial color={CORVID.lime} transparent opacity={0.5} toneMapped={false} />
+      </mesh>
+      <ContactShadows position={[0, FLOOR_Y + 2, 0]} scale={1600} far={440} blur={2.6} opacity={0.8} resolution={512} />
+    </>
+  )
+})
+```
+
+The drone is `public/models/gallery/drone.glb`, generated by `scripts/models/drone.ts` in the Storybook package from three.js geometry: two carbon plates with a lofted canopy, quad and hexa arm sets, outrunner motors, two- and three-blade propellers, fixed and folded landing gear, three payloads and the light strips. Each part is a named node the spec loads with `sceneEntityRemoteObject`, and shows or hides with `visible` in `sceneEntityObjectProperties`. Three techniques carry the continuous choices:
+
+- **A morph target for the arm length.** Every part at the arm tips, the arms, the motors, the propellers and the light pods, carries a `Reach` morph target from 280 mm to 380 mm. `morphTargetInfluences` maps the attribute onto it:
+
+```yaml
+components:
+  Drone:
+    sceneEntityObjectProperties:
+      armsQuad:
+        visible:
+          $eval: self.frame === 'Quad'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+```
+
+- **An object group for the tilt.** The camera and its lens have their node origin on the gimbal's tilt axis. The `gimbalPivot` group sits on that axis and turns by the attribute, in radians; the two objects are parented into it with `targetParentGroup`:
+
+```yaml
+components:
+  Drone:
+    sceneEntityObjectGroup:
+      gimbalPivot:
+        visible:
+          $eval: self.payload === 'Camera'
+        offsetY: -70
+        offsetZ: 90
+        rotationX:
+          $read: gimbalTilt
+    sceneEntityObjectProperties:
+      gimbalCamera:
+        targetParentGroup: gimbalPivot
+      gimbalLens:
+        targetParentGroup: gimbalPivot
+```
+
+- **Look-dev in YAML.** The GLB's materials are plain colours; `sceneEntityObjectLocalMaterialOverride` makes each object's look, named by the object's instance name: the anodised motors, the canopy's livery with its clearcoat, the glowing lights and the lenses. The colours come from expressions in `src/expressions/drone.ts`, which also compute the price and the weight.
+
+```yaml
+components:
+  Drone:
+    sceneEntityObjectLocalMaterialOverride:
+      motorsQuad:
+        materialsToOverride: [Motor]
+        materialType: physical
+        color:
+          $read: $motorColor
+        metalness: 0.95
+        roughness: 0.3
+        clearcoat: 0.5
+        clearcoatRoughness: 0.2
+      ledsQuad:
+        materialsToOverride: [LED]
+        color:
+          $read: $ledColor
+        emissive:
+          $read: $ledColor
+        emissiveIntensity: 2.6
+        toneMapped: false
+```
+
+The script and its helper live in `scripts/models/`, outside the example's `src/`, because every file under `src/` is part of this page.
+
+## On a phone
+
+The same layout in a frame 390 pixels wide: the scene at the top with a compact HUD, the active tab's controls in a sheet of fixed height, and the tabs as a segmented bar at the bottom. The sheet keeps its height on every tab, so the drone does not jump when the tab changes. `LayoutSlots.MobileViewControls` is one button in the dock that opens the list of views. Opened on its own from the sidebar, the **Phone** story sets Storybook's viewport to 390 × 844.
+
+## Test cases
+
+- The page opens on the **Airframe** tab: a quad with 300 mm arms on fixed skids, hovering over the hangar floor inside the landing ring. The HUD shows "CORVID K6", ENGINEERING · EDIT, **$13,220.00**, "AUW 3.81 kg" and "VIEW ORBIT"; the log line reads "READY".
+- **Hexa** shows six arms, motors and propellers, and raises the price to $15,620.00 and the weight to 4.44 kg.
+- Dragging the **Arm length** slider grows the arms, motors and propellers under the thumb; letting go commits the length. The End key sets 380 mm with "Motor to motor 760 mm", and on the hexa the price becomes $16,100.00 and the weight 4.56 kg.
+- **Retractable gear** folds the legs flat under the belly and adds $650 and 0.13 kg; switching it off brings the skids back.
+- The **Propulsion** tab shows the propellers and the motors' anodising. **Three-blade** adds a blade to every propeller and $60 a motor; **Ember** turns the motors orange and adds $180.
+- Outside the **Payload** tab a target labelled "PAYLOAD ›" sits on the payload mount. Clicking it opens the **Payload** tab, and the target disappears.
+- On the **Payload** tab, **Gimbal tilt** turns the camera: the End key points it straight down at 90° ("Straight down, for mapping"), the Home key levels it at 0°, and the dial beside the value follows.
+- On a quad the **Delivery winch** tile is hatched, and "The delivery winch needs the hexa frame to lift its load." is shown below the payloads. Clicking it keeps the camera, and the log line shows "REJECTED" with the same sentence.
+- On a hexa the winch is accepted and hangs a line and a hook under the nose; the **Quad** tile on the Airframe tab is then hatched with the same sentence.
+- **LiDAR** hangs the scanner under the nose, removes **Gimbal tilt**, adds $7,600 and shows "NOTE LiDAR missions need RTK positioning, so a GNSS base station ships with the drone." in the log line.
+- On the **Livery** tab, **Arctic** turns the canopy white with cyan lights, and **Signal** orange with white lights, for $250 more.
+- **Top** looks down on the drone, **Payload** shows the payload close up from below the nose, and **Orbit** returns; the HUD names the view. **Reset camera** undoes a drag or a zoom.
+- **Fullscreen** leaves the drone and the dock only; **Exit fullscreen** brings back the rail, the panel, the HUD and the log line.
+- With a tab focused, the arrow keys move to the next or previous tab and open it.
+- The **Read Mode** story opens a finished drone with SPEC SHEET · VIEW ONLY in the HUD, **$24,650.00** and "AUW 4.92 kg": a hexa with 340 mm arms, retractable gear, three-blade propellers, cyan motors, the LiDAR and the Arctic livery. Every tab shows spec-sheet lines, with no tiles, sliders or switch, and no target on the drone.
+- In the **Phone** story the tabs are a bar at the bottom and the controls a sheet above it; the same changes, the target, the rejected winch in the log line and the liveries work there. The view button in the dock opens the list of views, and fullscreen leaves the reset and the exit.
+- The browser console shows no errors.
+
+## What this layout leaves out
+
+- **Finalizing.** The engineer's work is the saved configuration; the drone is not ordered from here. A layout adds an order with `phx.frontend.useFinalizeActions()`, as [Kestrel Kettle](?path=/docs/layouts-gallery-kestrel-kettle--docs#add-to-cart) does.
+- **Undo and redo, sharing and measurements.** The dock has the view actions only. A layout adds undo and redo with `phx.frontend.useUndoRedo()`, see [Configurator Interface → Hooks for a Project Layout](?path=/docs/phoenix-configurator-interface--docs#hooks-for-a-project-layout).
+- **Editing a copy.** The client cannot clone the spec sheet to change it; the local editor reopens a local clone in read mode, so the example does not offer it.
+- **The built-in arrangement.** Header, sidebar, tabs, snackbars and the preview start screen are not mounted; [Layout Slots](?path=/docs/phoenix-layout-slots--docs) lists every slot a project layout can mount.
+
+## Related pages
+
+- [Custom Layout](?path=/docs/layouts-custom-layout--docs) explains a project layout step by step and shows read mode by a shared link.
+- [Kestrel Kettle](?path=/docs/layouts-gallery-kestrel-kettle--docs) is a single-page product with a start screen and the built-in snackbars.
+- [Configurator Interface → Hooks for a Project Layout](?path=/docs/phoenix-configurator-interface--docs#hooks-for-a-project-layout) lists every hook used here, with the steps and tabs paragraph.
+- [Layout Slots](?path=/docs/phoenix-layout-slots--docs) describes `DesktopViewControls`, `MobileViewControls` and `SharedCanvas`.
+- [Sidebar Tabs](?path=/docs/layouts-sidebar-tabs--docs) shows the built-in tabs for the same `sidebarTabs` component.
+
+## Complete Implementation
+
+{/* AUTO-GENERATED SECTION: This section is automatically updated by 'phoenix story build' */}
+
+<details>
+<summary>Click to view the complete implementation files</summary>
+
+### ./spec/domain.yaml
+
+```yaml
+model:
+  latest:
+    entityTypes:
+      - Drone
+    aliases:
+      RootEntity:
+        - Drone
+    commonTypes:
+      Frame:
+        enum:
+          - Quad
+          - Hexa
+      Props:
+        enum:
+          - TwoBlade
+          - ThreeBlade
+      MotorColor:
+        enum:
+          - Titanium
+          - Lime
+          - Cyan
+          - Ember
+      Payload:
+        enum:
+          - Camera
+          - Lidar
+          - Winch
+      Livery:
+        enum:
+          - Graphite
+          - Arctic
+          - Signal
+    shapes:
+      Drone:
+        frame:
+          $ref: '#/model/latest/commonTypes/Frame'
+        armLength:
+          type: number
+        props:
+          $ref: '#/model/latest/commonTypes/Props'
+        motorColor:
+          $ref: '#/model/latest/commonTypes/MotorColor'
+        payload:
+          $ref: '#/model/latest/commonTypes/Payload'
+        gimbalTilt:
+          type: number
+        retractableGear:
+          type: boolean
+        livery:
+          $ref: '#/model/latest/commonTypes/Livery'
+
+presets:
+  - rootEntityType: Drone
+    initialDomainEntities:
+      - id: Drone-1
+        type: Drone
+        frame: Quad
+        armLength: 300
+        props: TwoBlade
+        motorColor: Titanium
+        payload: Camera
+        gimbalTilt: 0.5235987756
+        retractableGear: false
+        livery: Graphite
+
+# One navigation state per tab; each control is active only in its tab's state
+navigationStates:
+  - airframe
+  - propulsion
+  - payload
+  - livery
+
+viewStates:
+  - orbit
+  - top
+  - payloadView
+
+expressions:
+  Drone:
+    $price:
+      type: number
+    $weightLabel:
+      type: string
+    $shellColor:
+      type: string
+    $shellClearcoat:
+      type: number
+    $ledColor:
+      type: string
+    $motorColor:
+      type: string
+
+invariants:
+  Drone:
+    winchNeedsHexa:
+      type: winchNeedsHexa
+      severity: fixable
+      message: The delivery winch needs the hexa frame to lift its load.
+
+transformers:
+  - name: lidar-base-station
+
+components:
+  Drone:
+    detail:
+      main:
+        title: Corvid K6
+        subtitle:
+          $read: $weightLabel
+        description: A survey drone for mapping and inspection. Pick the airframe, the propulsion, the payload and the livery; the engineer's configuration becomes the client's spec sheet.
+    price:
+      main:
+        price:
+          $read: $price
+
+    sidebarTabs:
+      main:
+        tabs:
+          - label: Airframe
+            icon: Cube
+            navigationStates: [airframe]
+          - label: Propulsion
+            icon: ArrowClockwise
+            navigationStates: [propulsion]
+          - label: Payload
+            icon: Scan
+            navigationStates: [payload]
+          - label: Livery
+            icon: PaletteBold
+            navigationStates: [livery]
+
+    attributeSelection:
+      frame:
+        value:
+          $bind: frame
+        options:
+          - label: Quad
+            description: Four motors, the lightest and longest-flying
+            value: Quad
+          - label: Hexa
+            description: Six motors; lands safely with one motor out
+            value: Hexa
+        $filter:
+          navigationStates: [airframe]
+      props:
+        value:
+          $bind: props
+        options:
+          - label: Two-blade
+            description: Efficient in cruise, for the longest flights
+            value: TwoBlade
+          - label: Three-blade
+            description: More thrust and steadier in gusts, a little shorter in the air
+            value: ThreeBlade
+        $filter:
+          navigationStates: [propulsion]
+      motorColor:
+        value:
+          $bind: motorColor
+        options:
+          - label: Titanium
+            description: Bare anodised aluminium
+            value: Titanium
+          - label: Lime
+            description: Signal lime anodising
+            value: Lime
+          - label: Cyan
+            description: Glacier cyan anodising
+            value: Cyan
+          - label: Ember
+            description: Ember orange anodising
+            value: Ember
+        $filter:
+          navigationStates: [propulsion]
+      payload:
+        value:
+          $bind: payload
+        options:
+          - label: Gimbal camera
+            description: 45 MP stabilised camera on a tilting gimbal
+            value: Camera
+          - label: LiDAR
+            description: 240,000 points a second, 360° around
+            value: Lidar
+          - label: Delivery winch
+            description: Lowers up to 3 kg on a 12 m line
+            value: Winch
+        $filter:
+          navigationStates: [payload]
+      livery:
+        value:
+          $bind: livery
+        options:
+          - label: Graphite
+            description: Satin graphite with lime lights
+            value: Graphite
+          - label: Arctic
+            description: Gloss white with cyan lights
+            value: Arctic
+          - label: Signal
+            description: High-visibility orange with white lights
+            value: Signal
+        $filter:
+          navigationStates: [livery]
+    distanceDimension:
+      armLength:
+        value:
+          $bind: armLength
+        min: 280
+        max: 380
+        $filter:
+          navigationStates: [airframe]
+    angleDimension:
+      gimbalTilt:
+        value:
+          $bind: gimbalTilt
+        min: 0
+        max: 1.5707963268
+        unit: degree
+        decimalPlaces: 0
+        # Only the camera tilts
+        $filter:
+          navigationStates: [payload]
+          active:
+            $eval: self.payload === 'Camera'
+    attributeSwitch:
+      retractableGear:
+        value:
+          $bind: retractableGear
+        $filter:
+          navigationStates: [airframe]
+
+    viewControls:
+      main:
+        items:
+          - label: Orbit
+            value: orbit
+            icon: CameraRotate
+          - label: Top
+            value: top
+            icon: GridFour
+          - label: Payload
+            value: payloadView
+            icon: Scan
+
+    # Pinned to the payload mount; an engineer outside the Payload tab clicks it to get there. A viewer never sees it,
+    # and fullscreen leaves it out
+    sceneEntityObjectHtmlHotspot:
+      payloadMount:
+        target: payloadMount
+        name: PayloadHotspot
+        $filter:
+          modes: [owner]
+          navigationStates: [airframe, propulsion, livery]
+          fullscreen: false
+
+    canvasConfig:
+      main:
+        highlightingDisabled: true
+    canvasCustomEnvironment:
+      main:
+        name: DroneHangar
+    fitRootPerspectiveCamera:
+      orbit:
+        priority: 2
+        fov: 30
+        near: 10
+        far: 20000
+        minDistance: 500
+        maxDistance: 5000
+        azimuthAngle: 0.62
+        polarAngle: 1.1
+        minPolarAngle: 0.05
+        maxPolarAngle: 1.8
+        fitToBox: true
+        fitMeshChanges: false
+        $filter:
+          viewStates: [orbit]
+      top:
+        priority: 2
+        fov: 30
+        near: 10
+        far: 20000
+        minDistance: 500
+        maxDistance: 5000
+        azimuthAngle: 0
+        polarAngle: 0.001
+        minPolarAngle: 0
+        maxPolarAngle: 0.6
+        fitToBox: true
+        fitMeshChanges: false
+        $filter:
+          viewStates: [top]
+    staticPerspectiveCamera:
+      payloadView:
+        priority: 2
+        fov: 30
+        near: 10
+        far: 20000
+        distance: 1050
+        minDistance: 400
+        maxDistance: 2400
+        azimuthAngle: 0.5
+        polarAngle: 1.7
+        minPolarAngle: 1.2
+        maxPolarAngle: 2.4
+        lookAtX: 0
+        lookAtY: -60
+        lookAtZ: 90
+        $filter:
+          viewStates: [payloadView]
+
+    sceneEntityRemoteObject:
+      bodyPlates:
+        fileUrl: /models/gallery/drone.glb
+        objectName: BodyPlates
+        dimensionUnit: m
+      canopy:
+        fileUrl: /models/gallery/drone.glb
+        objectName: Canopy
+        dimensionUnit: m
+      noseSensors:
+        fileUrl: /models/gallery/drone.glb
+        objectName: NoseSensors
+        dimensionUnit: m
+      ledStrip:
+        fileUrl: /models/gallery/drone.glb
+        objectName: LedStrip
+        dimensionUnit: m
+      gps:
+        fileUrl: /models/gallery/drone.glb
+        objectName: Gps
+        dimensionUnit: m
+      armsQuad:
+        fileUrl: /models/gallery/drone.glb
+        objectName: ArmsQuad
+        dimensionUnit: m
+      armsHexa:
+        fileUrl: /models/gallery/drone.glb
+        objectName: ArmsHexa
+        dimensionUnit: m
+      motorsQuad:
+        fileUrl: /models/gallery/drone.glb
+        objectName: MotorsQuad
+        dimensionUnit: m
+      motorsHexa:
+        fileUrl: /models/gallery/drone.glb
+        objectName: MotorsHexa
+        dimensionUnit: m
+      ledsQuad:
+        fileUrl: /models/gallery/drone.glb
+        objectName: LedsQuad
+        dimensionUnit: m
+      ledsHexa:
+        fileUrl: /models/gallery/drone.glb
+        objectName: LedsHexa
+        dimensionUnit: m
+      propsQuadTwoBlade:
+        fileUrl: /models/gallery/drone.glb
+        objectName: PropsQuadTwoBlade
+        dimensionUnit: m
+      propsQuadThreeBlade:
+        fileUrl: /models/gallery/drone.glb
+        objectName: PropsQuadThreeBlade
+        dimensionUnit: m
+      propsHexaTwoBlade:
+        fileUrl: /models/gallery/drone.glb
+        objectName: PropsHexaTwoBlade
+        dimensionUnit: m
+      propsHexaThreeBlade:
+        fileUrl: /models/gallery/drone.glb
+        objectName: PropsHexaThreeBlade
+        dimensionUnit: m
+      gearFixed:
+        fileUrl: /models/gallery/drone.glb
+        objectName: GearFixed
+        dimensionUnit: m
+      gearFolded:
+        fileUrl: /models/gallery/drone.glb
+        objectName: GearFolded
+        dimensionUnit: m
+      payloadMount:
+        fileUrl: /models/gallery/drone.glb
+        objectName: PayloadMount
+        dimensionUnit: m
+      gimbalYoke:
+        fileUrl: /models/gallery/drone.glb
+        objectName: GimbalYoke
+        dimensionUnit: m
+      gimbalCamera:
+        fileUrl: /models/gallery/drone.glb
+        objectName: GimbalCamera
+        dimensionUnit: m
+      gimbalLens:
+        fileUrl: /models/gallery/drone.glb
+        objectName: GimbalLens
+        dimensionUnit: m
+      lidarPuck:
+        fileUrl: /models/gallery/drone.glb
+        objectName: LidarPuck
+        dimensionUnit: m
+      lidarWindow:
+        fileUrl: /models/gallery/drone.glb
+        objectName: LidarWindow
+        dimensionUnit: m
+      winch:
+        fileUrl: /models/gallery/drone.glb
+        objectName: Winch
+        dimensionUnit: m
+
+    # The camera turns about the gimbal's tilt axis, 70 mm below the belly and 90 mm forward of the centre
+    sceneEntityObjectGroup:
+      gimbalPivot:
+        visible:
+          $eval: self.payload === 'Camera'
+        offsetY: -70
+        offsetZ: 90
+        rotationX:
+          $read: gimbalTilt
+
+    # The arm length morphs every part at the arm tips: 280 mm is the model's shape, 380 mm its `Reach` target
+    sceneEntityObjectProperties:
+      armsQuad:
+        visible:
+          $eval: self.frame === 'Quad'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+      armsHexa:
+        visible:
+          $eval: self.frame === 'Hexa'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+      motorsQuad:
+        visible:
+          $eval: self.frame === 'Quad'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+      motorsHexa:
+        visible:
+          $eval: self.frame === 'Hexa'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+      ledsQuad:
+        visible:
+          $eval: self.frame === 'Quad'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+      ledsHexa:
+        visible:
+          $eval: self.frame === 'Hexa'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+      propsQuadTwoBlade:
+        visible:
+          $eval: self.frame === 'Quad' && self.props === 'TwoBlade'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+      propsQuadThreeBlade:
+        visible:
+          $eval: self.frame === 'Quad' && self.props === 'ThreeBlade'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+      propsHexaTwoBlade:
+        visible:
+          $eval: self.frame === 'Hexa' && self.props === 'TwoBlade'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+      propsHexaThreeBlade:
+        visible:
+          $eval: self.frame === 'Hexa' && self.props === 'ThreeBlade'
+        morphTargetInfluences:
+          Reach:
+            value:
+              $read: armLength
+            scaleZero: 280
+            scaleOne: 380
+      gearFixed:
+        visible:
+          $eval: '!self.retractableGear'
+      gearFolded:
+        visible:
+          $read: retractableGear
+      payloadMount:
+        offsetZ: 90
+      gimbalYoke:
+        visible:
+          $eval: self.payload === 'Camera'
+      gimbalCamera:
+        targetParentGroup: gimbalPivot
+      gimbalLens:
+        targetParentGroup: gimbalPivot
+      lidarPuck:
+        visible:
+          $eval: self.payload === 'Lidar'
+      lidarWindow:
+        visible:
+          $eval: self.payload === 'Lidar'
+      winch:
+        visible:
+          $eval: self.payload === 'Winch'
+
+    # Look-dev: each override recolours the material of one object, named by its instance name
+    sceneEntityObjectLocalMaterialOverride:
+      canopy:
+        materialsToOverride: [Shell]
+        materialType: physical
+        color:
+          $read: $shellColor
+        metalness: 0.15
+        roughness: 0.38
+        clearcoat:
+          $read: $shellClearcoat
+        clearcoatRoughness: 0.12
+      motorsQuad:
+        materialsToOverride: [Motor]
+        materialType: physical
+        color:
+          $read: $motorColor
+        metalness: 0.95
+        roughness: 0.3
+        clearcoat: 0.5
+        clearcoatRoughness: 0.2
+      motorsHexa:
+        materialsToOverride: [Motor]
+        materialType: physical
+        color:
+          $read: $motorColor
+        metalness: 0.95
+        roughness: 0.3
+        clearcoat: 0.5
+        clearcoatRoughness: 0.2
+      ledStrip:
+        materialsToOverride: [LED]
+        color:
+          $read: $ledColor
+        emissive:
+          $read: $ledColor
+        emissiveIntensity: 2.2
+        toneMapped: false
+      ledsQuad:
+        materialsToOverride: [LED]
+        color:
+          $read: $ledColor
+        emissive:
+          $read: $ledColor
+        emissiveIntensity: 2.6
+        toneMapped: false
+      ledsHexa:
+        materialsToOverride: [LED]
+        color:
+          $read: $ledColor
+        emissive:
+          $read: $ledColor
+        emissiveIntensity: 2.6
+        toneMapped: false
+      gimbalLens:
+        materialsToOverride: [Lens]
+        materialType: physical
+        color: '#05070a'
+        metalness: 0.2
+        roughness: 0.04
+        clearcoat: 1
+        clearcoatRoughness: 0.02
+        iridescence: 0.6
+        iridescenceIor: 1.6
+      lidarWindow:
+        materialsToOverride: [Lens]
+        materialType: physical
+        color: '#0a0f14'
+        metalness: 0.3
+        roughness: 0.06
+        clearcoat: 1
+        clearcoatRoughness: 0.03
+      noseSensors:
+        materialsToOverride: [Lens]
+        materialType: physical
+        color: '#05070a'
+        metalness: 0.2
+        roughness: 0.04
+        clearcoat: 1
+        clearcoatRoughness: 0.02
+```
+
+### ./src/\_controls/ArmLengthField.tsx
+
+```tsx
+import { distanceDimensionComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { HudSlider } from './HudSlider.js'
+import { SpecRow } from './SpecRow.js'
+
+const STEP = 10
+
+interface ArmLengthFieldProps {
+  readonly readOnly: boolean
+}
+
+const ArmLengthControl = ({ readOnly }: ArmLengthFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const arm = phx.frontend.useDistanceDimension(droneId, 'armLength')
+  // Motor to motor across the drone: twice the arm, which is measured from the centre
+  const span = `Motor to motor ${arm.formatValue(arm.value * 2, true)}`
+
+  if (readOnly) {
+    return <SpecRow label="Arm length" value={arm.valueWithUnit} detail={span} />
+  }
+
+  return (
+    <HudSlider
+      id="corvid-arm-length"
+      label="Arm length"
+      valueText={arm.valueWithUnit}
+      value={arm.value}
+      min={arm.min}
+      max={arm.max}
+      step={STEP}
+      minLabel={arm.formatValue(arm.min, true)}
+      maxLabel={arm.formatValue(arm.max, true)}
+      detail={span}
+      onChange={arm.update}
+      onCommit={arm.resolve}
+    />
+  )
+}
+
+// The spec's `distanceDimension` for the arm length, in the display unit. Moving the slider stages each value with
+// `update`, so the arms grow under the thumb through the spec's morph target, and letting go commits it with
+// `resolve`. The field exists only while the spec's component is active.
+export const ArmLengthField = (props: ArmLengthFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: droneId,
+    componentType: distanceDimensionComponent,
+    instanceName: 'armLength',
+  })
+
+  return component === null ? null : <ArmLengthControl {...props} />
+}
+```
+
+### ./src/\_controls/DroneFields.tsx
+
+```tsx
+import { Box } from '@mui/material'
+
+import { ArmLengthField } from './ArmLengthField.js'
+import { GearField } from './GearField.js'
+import { GimbalTiltField } from './GimbalTiltField.js'
+import { OptionField } from './OptionField.js'
+import { FRAME_VISUALS, LIVERY_VISUALS, MOTOR_VISUALS, PAYLOAD_VISUALS, PROP_VISUALS } from './visuals.js'
+
+interface DroneFieldsProps {
+  readonly readOnly: boolean
+}
+
+// Every control of the spec, in the order the panel shows them. Each one renders only while its spec component is
+// active, so the spec's `$filter.navigationStates` decides which tab shows it and `$filter.active` hides the tilt
+// without the camera. The labels are the layout's: `attributeSelection` and the dimensions carry none.
+export const DroneFields = ({ readOnly }: DroneFieldsProps) => {
+  return (
+    <Box component="div" sx={{ display: 'grid', gap: readOnly ? 1.5 : 3 }}>
+      <OptionField instanceName="frame" label="Frame" visuals={FRAME_VISUALS} readOnly={readOnly} />
+      <ArmLengthField readOnly={readOnly} />
+      <GearField readOnly={readOnly} />
+      <OptionField instanceName="props" label="Propellers" visuals={PROP_VISUALS} readOnly={readOnly} />
+      <OptionField instanceName="motorColor" label="Motor anodising" visuals={MOTOR_VISUALS} readOnly={readOnly} />
+      <OptionField instanceName="payload" label="Payload" visuals={PAYLOAD_VISUALS} readOnly={readOnly} />
+      <GimbalTiltField readOnly={readOnly} />
+      <OptionField instanceName="livery" label="Livery" visuals={LIVERY_VISUALS} readOnly={readOnly} />
+    </Box>
+  )
+}
+```
+
+### ./src/\_controls/GearField.tsx
+
+```tsx
+import { Box, Switch, Typography } from '@mui/material'
+
+import { attributeSwitchComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID, LABEL_SX } from '../_shared/tokens.js'
+import { SpecRow } from './SpecRow.js'
+
+interface GearFieldProps {
+  readonly readOnly: boolean
+}
+
+const describe = (retractable: boolean) => {
+  return retractable
+    ? 'The legs fold flat under the belly in flight, for a clear view all round.'
+    : 'Fixed carbon skids, the lightest and simplest.'
+}
+
+const GearSwitch = ({ readOnly }: GearFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const gear = phx.frontend.useAttributeSwitch(droneId, 'retractableGear')
+  const isOn = gear.state.value
+
+  if (readOnly) {
+    return <SpecRow label="Landing gear" value={isOn ? 'Retractable' : 'Fixed skids'} detail={describe(isOn)} />
+  }
+
+  return (
+    <Box component="section" sx={{ display: 'grid', gap: 0.75 }}>
+      <Box component="div" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
+        <Typography component="h3" id="corvid-gear-label" sx={LABEL_SX}>
+          Retractable gear
+        </Typography>
+        <Switch
+          checked={isOn}
+          disabled={gear.disabled}
+          onChange={gear.onChange}
+          inputProps={{ 'aria-labelledby': 'corvid-gear-label' }}
+          sx={{
+            '& .MuiSwitch-switchBase': { color: CORVID.muted },
+            '& .MuiSwitch-switchBase.Mui-checked': { color: CORVID.lime },
+            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: CORVID.lime, opacity: 0.4 },
+            '& .MuiSwitch-track': { bgcolor: CORVID.line, opacity: 1 },
+          }}
+        />
+      </Box>
+      <Typography sx={{ fontFamily: CORVID.mono, fontSize: 11.5, lineHeight: 1.4, color: CORVID.muted }}>
+        {describe(isOn)}
+      </Typography>
+    </Box>
+  )
+}
+
+// The spec's `attributeSwitch` for the landing gear: `useAttributeSwitch` returns `state.value` and `onChange()`,
+// which writes the opposite value. The field exists only while the spec's component is active.
+export const GearField = (props: GearFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: droneId,
+    componentType: attributeSwitchComponent,
+    instanceName: 'retractableGear',
+  })
+
+  return component === null ? null : <GearSwitch {...props} />
+}
+```
+
+### ./src/\_controls/GimbalTiltField.tsx
+
+```tsx
+import { angleDimensionComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID } from '../_shared/tokens.js'
+import { HudSlider } from './HudSlider.js'
+import { SpecRow } from './SpecRow.js'
+
+interface TiltDialProps {
+  readonly degrees: number
+}
+
+// A quarter dial from the horizon down to the ground, with the camera's line of sight on it
+const TiltDial = ({ degrees }: TiltDialProps) => {
+  const radians = (degrees * Math.PI) / 180
+  const x = 6 + 40 * Math.cos(radians)
+  const y = 6 + 40 * Math.sin(radians)
+
+  return (
+    <svg viewBox="0 0 52 52" width={52} height={52} aria-hidden fill="none">
+      <path d="M6 6h44M6 6v44" stroke={CORVID.line} />
+      <path d="M46 6A40 40 0 0 1 6 46" stroke={CORVID.faint} strokeDasharray="2 3" />
+      <path d={`M6 6L${x} ${y}`} stroke={CORVID.lime} strokeWidth={1.6} />
+      <circle cx={x} cy={y} r={2.5} fill={CORVID.lime} />
+      <rect x={2} y={2} width={8} height={8} fill={CORVID.graphite} stroke={CORVID.lime} />
+    </svg>
+  )
+}
+
+const describe = (degrees: number) => {
+  if (degrees <= 0) {
+    return 'Level with the horizon, for inspection'
+  }
+
+  if (degrees >= 90) {
+    return 'Straight down, for mapping'
+  }
+
+  return `${degrees}° below the horizon`
+}
+
+interface GimbalTiltFieldProps {
+  readonly readOnly: boolean
+}
+
+const GimbalTiltControl = ({ readOnly }: GimbalTiltFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const tilt = phx.frontend.useAngleDimension(droneId, 'gimbalTilt')
+  const valueText = `${tilt.value}${tilt.unitLabel}`
+  const min = tilt.min ?? 0
+  const max = tilt.max ?? 90
+
+  if (readOnly) {
+    return <SpecRow label="Gimbal tilt" value={valueText} detail={describe(tilt.value)} />
+  }
+
+  return (
+    <HudSlider
+      id="corvid-gimbal-tilt"
+      label="Gimbal tilt"
+      valueText={valueText}
+      value={tilt.value}
+      min={min}
+      max={max}
+      step={1}
+      minLabel={`${min}${tilt.unitLabel} HORIZON`}
+      maxLabel={`${max}${tilt.unitLabel} NADIR`}
+      detail={describe(tilt.value)}
+      adornment={<TiltDial degrees={tilt.value} />}
+      onChange={tilt.update}
+      onCommit={tilt.resolve}
+    />
+  )
+}
+
+// The spec's `angleDimension` for the camera's tilt, in degrees as the spec's `unit` asks; the spec stores radians and
+// turns the gimbal's pivot group by them. The slider stages with `update` and commits with `resolve`. The spec makes
+// the component active only on the Payload tab and only while the camera is fitted, so the field checks first.
+export const GimbalTiltField = (props: GimbalTiltFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: droneId,
+    componentType: angleDimensionComponent,
+    instanceName: 'gimbalTilt',
+  })
+
+  return component === null ? null : <GimbalTiltControl {...props} />
+}
+```
+
+### ./src/\_controls/HudSlider.tsx
+
+```tsx
+import { Box, Slider, Typography, sliderClasses } from '@mui/material'
+import type { ReactNode } from 'react'
+
+import { CORVID, LABEL_SX } from '../_shared/tokens.js'
+
+interface HudSliderProps {
+  readonly id: string
+  readonly label: string
+  readonly valueText: string
+  readonly value: number
+  readonly min: number
+  readonly max: number
+  readonly step: number
+  readonly minLabel: string
+  readonly maxLabel: string
+  readonly detail: string
+  readonly adornment?: ReactNode
+  // Stages a value while the thumb moves, so the scene follows it
+  readonly onChange: (value: number) => void
+  // Commits the staged value when the thumb is let go
+  readonly onCommit: () => void
+}
+
+// A dimension as a readout and a slider, for the arm length and the gimbal tilt
+export const HudSlider = (props: HudSliderProps) => {
+  const { id, label, valueText, value, min, max, step, minLabel, maxLabel, detail, adornment, onChange, onCommit } =
+    props
+
+  return (
+    <Box component="section" sx={{ display: 'grid', gap: 0.75 }}>
+      <Box component="div" sx={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 2 }}>
+        <Box component="div" sx={{ display: 'grid', gap: 0.5 }}>
+          <Typography component="h3" id={`${id}-label`} sx={LABEL_SX}>
+            {label}
+          </Typography>
+          <Typography
+            sx={{
+              fontFamily: CORVID.mono,
+              fontSize: 26,
+              lineHeight: 1,
+              color: CORVID.lime,
+              fontVariantNumeric: 'tabular-nums',
+            }}
+          >
+            {valueText}
+          </Typography>
+        </Box>
+        {adornment}
+      </Box>
+      <Slider
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(_, next) => onChange(Array.isArray(next) ? (next[0] ?? min) : next)}
+        onChangeCommitted={() => onCommit()}
+        getAriaValueText={() => valueText}
+        slotProps={{ input: { 'aria-labelledby': `${id}-label` } }}
+        sx={{
+          color: CORVID.lime,
+          blockSize: 2,
+          paddingBlock: 1.75,
+          [`& .${sliderClasses.rail}`]: { bgcolor: CORVID.line, opacity: 1 },
+          [`& .${sliderClasses.track}`]: { border: 0 },
+          [`& .${sliderClasses.thumb}`]: {
+            inlineSize: 14,
+            blockSize: 14,
+            borderRadius: 0,
+            transform: 'translate(-50%, -50%) rotate(45deg)',
+            bgcolor: CORVID.graphite,
+            border: `2px solid ${CORVID.lime}`,
+            boxShadow: 'none',
+            '&:hover, &.Mui-focusVisible': { boxShadow: `0 0 0 6px rgba(198, 244, 50, 0.16)` },
+          },
+        }}
+      />
+      <Box
+        component="div"
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          fontFamily: CORVID.mono,
+          fontSize: 10.5,
+          color: CORVID.faint,
+        }}
+      >
+        <span>{minLabel}</span>
+        <span>{maxLabel}</span>
+      </Box>
+      <Typography sx={{ fontFamily: CORVID.mono, fontSize: 12, color: CORVID.muted }}>{detail}</Typography>
+    </Box>
+  )
+}
+```
+
+### ./src/\_controls/OptionField.tsx
+
+```tsx
+import { Box, ButtonBase, Typography } from '@mui/material'
+import type { KeyboardEvent, ReactNode } from 'react'
+
+import { attributeSelectionComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID, LABEL_SX, bracketsSx } from '../_shared/tokens.js'
+import { SpecRow } from './SpecRow.js'
+
+// Arrow keys move the selection between the tiles, as in a native radio group
+const ARROW_STEPS: Readonly<Record<string, number | undefined>> = {
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1,
+}
+
+interface OptionFieldProps {
+  readonly instanceName: string
+  readonly label: string
+  // How each option looks, keyed by the spec's option values
+  readonly visuals: Readonly<Record<string, ReactNode>>
+  readonly readOnly: boolean
+}
+
+const OptionTiles = ({ instanceName, label, visuals, readOnly }: OptionFieldProps) => {
+  const resolve = phx.frontend.useResolveLocalizable()
+  const droneId = phx.frontend.useRootEntityId()
+  const { value, options } = phx.frontend.useAttributeSelection(droneId, instanceName)
+  const selected = options.find(option => option.value === value)
+  const hint = options.find(option => option.disabled && option.hint)?.hint
+
+  if (readOnly) {
+    return (
+      <SpecRow
+        label={label}
+        value={resolve(selected?.title) ?? ''}
+        detail={resolve(selected?.description)}
+        visual={visuals[String(value)]}
+      />
+    )
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>, index: number) => {
+    const step = ARROW_STEPS[event.key]
+
+    if (step === undefined) {
+      return
+    }
+
+    event.preventDefault()
+    // The next enabled option in the arrow's direction, wrapping around
+    const count = options.length
+    const next = Array.from(
+      { length: count - 1 },
+      (_, offset) => (((index + step * (offset + 1)) % count) + count) % count
+    ).find(candidate => !options[candidate]?.disabled)
+
+    if (next === undefined) {
+      return
+    }
+
+    options[next]?.onSelect()
+    event.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role="radio"]')[next]?.focus()
+  }
+
+  return (
+    <Box component="section" sx={{ display: 'grid', gap: 1.25 }}>
+      <Box component="div" sx={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 2 }}>
+        <Typography component="h3" id={`corvid-${instanceName}-label`} sx={LABEL_SX}>
+          {label}
+        </Typography>
+        <Typography sx={{ fontFamily: CORVID.mono, fontSize: 12, color: CORVID.lime }}>
+          {resolve(selected?.title)}
+        </Typography>
+      </Box>
+
+      <Box
+        component="div"
+        role="radiogroup"
+        aria-labelledby={`corvid-${instanceName}-label`}
+        sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(66px, 1fr))', gap: 1 }}
+      >
+        {options.map((option, index) => {
+          const isSelected = option.value === value
+          const title = resolve(option.title)
+
+          return (
+            <ButtonBase
+              key={String(option.value)}
+              role="radio"
+              aria-checked={isSelected}
+              aria-disabled={option.disabled}
+              title={option.hint ?? title}
+              tabIndex={isSelected ? 0 : -1}
+              onClick={option.onSelect}
+              onKeyDown={event => handleKeyDown(event, index)}
+              sx={{
+                display: 'grid',
+                justifyItems: 'start',
+                alignContent: 'space-between',
+                gap: 1.25,
+                minBlockSize: 80,
+                padding: 1.25,
+                textAlign: 'start',
+                color: isSelected ? CORVID.lime : CORVID.ink,
+                border: `1px solid ${isSelected ? 'rgba(198, 244, 50, 0.5)' : CORVID.line}`,
+                bgcolor: isSelected ? 'rgba(198, 244, 50, 0.08)' : 'rgba(232, 237, 242, 0.02)',
+                ...(isSelected ? bracketsSx(CORVID.lime, 7) : {}),
+                // A ruled-out option is struck through with a hatch; it stays clickable, and the change it makes is
+                // rejected with the rule's message in the log
+                ...(option.disabled && {
+                  opacity: 0.42,
+                  backgroundImage:
+                    'repeating-linear-gradient(135deg, transparent 0 6px, rgba(232, 237, 242, 0.08) 6px 7px)',
+                }),
+                transition: 'border-color 160ms, background-color 160ms, color 160ms',
+                '&:hover': { borderColor: option.disabled ? CORVID.line : 'rgba(198, 244, 50, 0.5)' },
+                '&.Mui-focusVisible': { outline: `1px solid ${CORVID.lime}`, outlineOffset: 2 },
+              }}
+            >
+              <Box component="span" aria-hidden sx={{ display: 'grid', inlineSize: 28, blockSize: 28 }}>
+                {visuals[String(option.value)]}
+              </Box>
+              <Typography
+                component="span"
+                sx={{ fontFamily: CORVID.heading, fontWeight: 500, fontSize: 12.5, lineHeight: 1.2 }}
+              >
+                {title}
+              </Typography>
+            </ButtonBase>
+          )
+        })}
+      </Box>
+
+      <Typography
+        sx={{
+          minBlockSize: '2.8em',
+          fontFamily: CORVID.mono,
+          fontSize: 11.5,
+          lineHeight: 1.4,
+          color: hint ? CORVID.orange : CORVID.muted,
+        }}
+      >
+        {hint ?? resolve(selected?.description)}
+      </Typography>
+    </Box>
+  )
+}
+
+// One `attributeSelection` of the spec as a group of tiles, or a spec-sheet line for a viewer. An option an
+// invariant rules out comes back `disabled` with the rule's message as `hint`. The field exists only while the spec's
+// component is active: the control hooks throw for an inactive component.
+export const OptionField = (props: OptionFieldProps) => {
+  const droneId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: droneId,
+    componentType: attributeSelectionComponent,
+    instanceName: props.instanceName,
+  })
+
+  return component === null ? null : <OptionTiles {...props} />
+}
+```
+
+### ./src/\_controls/SpecRow.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+import type { ReactNode } from 'react'
+
+import { CORVID, LABEL_SX } from '../_shared/tokens.js'
+
+interface SpecRowProps {
+  readonly label: string
+  readonly value: string
+  readonly detail?: string | undefined
+  readonly visual?: ReactNode
+}
+
+// One control as a line of the spec sheet, which is what a viewer sees in place of the control
+export const SpecRow = ({ label, value, detail, visual }: SpecRowProps) => {
+  return (
+    <Box
+      component="div"
+      sx={{ display: 'grid', gap: 0.5, paddingBlockEnd: 1.5, borderBlockEnd: `1px dashed ${CORVID.line}` }}
+    >
+      <Box component="div" sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+        <Typography component="span" sx={{ ...LABEL_SX, flex: 1 }}>
+          {label}
+        </Typography>
+        {visual !== undefined && (
+          <Box component="span" aria-hidden sx={{ display: 'grid', color: CORVID.cyan, inlineSize: 22, blockSize: 22 }}>
+            {visual}
+          </Box>
+        )}
+        <Typography
+          component="span"
+          sx={{ fontFamily: CORVID.heading, fontWeight: 500, fontSize: 15, color: CORVID.ink }}
+        >
+          {value}
+        </Typography>
+      </Box>
+      {detail && (
+        <Typography sx={{ fontFamily: CORVID.mono, fontSize: 11.5, color: CORVID.muted }}>{detail}</Typography>
+      )}
+    </Box>
+  )
+}
+```
+
+### ./src/\_controls/visuals.tsx
+
+```tsx
+import { Box } from '@mui/material'
+import type { ReactNode } from 'react'
+
+// How each option of the spec looks on its tile, keyed by the option's value: line drawings for the parts, colour
+// chips for the finishes. They are the layout's own; the spec's options carry no images.
+
+const glyph = (path: string) => (
+  <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth={1.4}>
+    <path d={path} strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+const chip = (background: string) => (
+  <Box
+    component="span"
+    sx={{
+      display: 'block',
+      inlineSize: '100%',
+      blockSize: '100%',
+      borderRadius: '50%',
+      background,
+      boxShadow: 'inset 0 0 0 1px rgba(255, 255, 255, 0.18)',
+    }}
+  />
+)
+
+// A shell colour with a dot of the lights' colour
+const livery = (shell: string, lights: string) =>
+  chip(`radial-gradient(circle at 72% 72%, ${lights} 0 16%, transparent 19%), ${shell}`)
+
+export const FRAME_VISUALS: Readonly<Record<string, ReactNode>> = {
+  Quad: glyph(
+    'M8 8l8 8M16 8l-8 8M10 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0M3.5 5.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0-5 0M15.5 5.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0-5 0M3.5 18.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0-5 0M15.5 18.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0-5 0'
+  ),
+  Hexa: glyph(
+    'M5 12h14M8.5 6l7 12M15.5 6l-7 12M1.5 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0M18.5 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0M5.5 4.5a2 2 0 1 0 4 0a2 2 0 1 0-4 0M14.5 4.5a2 2 0 1 0 4 0a2 2 0 1 0-4 0M5.5 19.5a2 2 0 1 0 4 0a2 2 0 1 0-4 0M14.5 19.5a2 2 0 1 0 4 0a2 2 0 1 0-4 0'
+  ),
+}
+
+export const PROP_VISUALS: Readonly<Record<string, ReactNode>> = {
+  TwoBlade: glyph(
+    'M10.5 12a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0M12 10.5C11 6 12.5 3 14 2.5c.8 2-.2 5.5-2 8M12 13.5c1 4.5-.5 7.5-2 8c-.8-2 .2-5.5 2-8'
+  ),
+  ThreeBlade: glyph(
+    'M10.5 12a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0M12 10.5C11 6 12.5 3 14 2.5c.8 2-.2 5.5-2 8M13.3 12.8c4 1.8 6.2 4.4 6 6c-2 .5-5-1.5-6.6-4.6M10.7 12.8c-3.5 2.7-6.9 3.1-8 2c.7-1.9 4-3.6 7.2-3.6'
+  ),
+}
+
+export const PAYLOAD_VISUALS: Readonly<Record<string, ReactNode>> = {
+  Camera: glyph('M4 7.5h16v11H4zM8.5 13a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M12 4.5v3M9 4.5h6'),
+  Lidar: glyph(
+    'M6 6.5c0-1.4 2.7-2.5 6-2.5s6 1.1 6 2.5v11c0 1.4-2.7 2.5-6 2.5s-6-1.1-6-2.5zM6 10.5c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5M2 12h2M20 12h2'
+  ),
+  Winch: glyph('M6 3.5h12v6H6zM12 9.5v7M12 16.5a2.5 2.5 0 1 1-2.5 2.5'),
+}
+
+export const MOTOR_VISUALS: Readonly<Record<string, ReactNode>> = {
+  Titanium: chip('linear-gradient(135deg, #e3e6ea 0%, #8c939b 55%, #c9ced3 100%)'),
+  Lime: chip('linear-gradient(135deg, #e3f78c 0%, #9cc417 55%, #c6f432 100%)'),
+  Cyan: chip('linear-gradient(135deg, #9beff7 0%, #1aa3b5 55%, #3ed6e8 100%)'),
+  Ember: chip('linear-gradient(135deg, #ffc196 0%, #e2561a 55%, #ff8a3d 100%)'),
+}
+
+export const LIVERY_VISUALS: Readonly<Record<string, ReactNode>> = {
+  Graphite: livery('#4a525c', '#c6f432'),
+  Arctic: livery('#e9edf0', '#3ed6e8'),
+  Signal: livery('#ff6a1a', '#f4f7fa'),
+}
+```
+
+### ./src/\_shared/DesktopDeck.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DroneTabs } from './DroneTabs.js'
+import { HudReadout } from './HudReadout.js'
+import { MessageLog } from './MessageLog.js'
+import { TabPanel } from './TabPanel.js'
+import { ViewDock } from './ViewDock.js'
+import { CORVID, GLASS_SX, bracketsSx } from './tokens.js'
+
+const RAIL_WIDTH = 84
+const PANEL_WIDTH = 384
+const GUTTER = 20
+
+// The brand's mark: a hexagon with a wing's chevron
+const MARK = 'M16 3 27 9.5v13L16 29 5 22.5v-13ZM10 19l6-6 6 6'
+
+// The desktop deck: the tab rail on the left, the active tab's panel beside it, and the free area over the rest of
+// the scene with the HUD at its top right, the message log and the view dock along its bottom. Fullscreen is a
+// preview: only the view dock stays, and the drone takes the whole canvas.
+export const DesktopDeck = () => {
+  const { containerRef, safeAreaRef } = phx.frontend.useSceneSafeArea()
+  const isFullscreen = phx.frontend.useIsFullscreenActive()
+  const { accessInfo } = phx.frontend.useAccessService()
+
+  return (
+    <Box
+      component="div"
+      ref={containerRef}
+      sx={{ position: 'absolute', inset: 0, display: 'flex', fontFamily: CORVID.mono, pointerEvents: 'none' }}
+    >
+      {!isFullscreen && (
+        <>
+          <Box
+            component="nav"
+            aria-label="Corvid K6"
+            sx={{
+              flex: `0 0 ${RAIL_WIDTH}px`,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 3,
+              paddingBlock: 2.5,
+              paddingInline: 1,
+              bgcolor: 'rgba(12, 14, 18, 0.9)',
+              borderInlineEnd: `1px solid ${CORVID.line}`,
+              pointerEvents: 'auto',
+            }}
+          >
+            <Box component="div" sx={{ display: 'grid', justifyItems: 'center', gap: 0.5, color: CORVID.lime }}>
+              <svg viewBox="0 0 32 32" width={30} height={30} fill="none" stroke="currentColor" strokeWidth={1.5}>
+                <path d={MARK} strokeLinejoin="round" />
+              </svg>
+              <Typography sx={{ fontFamily: CORVID.mono, fontSize: 11, letterSpacing: '0.2em', color: CORVID.ink }}>
+                K6
+              </Typography>
+            </Box>
+            <DroneTabs orientation="vertical" />
+          </Box>
+
+          <Box
+            component="div"
+            sx={{
+              flex: `0 0 ${PANEL_WIDTH}px`,
+              display: 'flex',
+              minBlockSize: 0,
+              padding: `${GUTTER}px 0 ${GUTTER}px ${GUTTER}px`,
+            }}
+          >
+            <Box
+              component="div"
+              sx={{
+                ...GLASS_SX,
+                // Lime corners while editing, cyan on the spec sheet, as the HUD's mode
+                ...bracketsSx(accessInfo.viewMode ? CORVID.cyan : CORVID.lime),
+                flex: 1,
+                overflowY: 'auto',
+                overscrollBehavior: 'contain',
+                padding: 3,
+                pointerEvents: 'auto',
+                scrollbarWidth: 'thin',
+                scrollbarColor: `${CORVID.line} transparent`,
+              }}
+            >
+              <TabPanel compact={false} />
+            </Box>
+          </Box>
+        </>
+      )}
+
+      <Box component="div" sx={{ position: 'relative', flex: '1 1 0', minInlineSize: 0 }}>
+        {/* The camera fits the drone into this box: below the HUD, above the dock, clear of the edges */}
+        <Box component="div" ref={safeAreaRef} sx={{ position: 'absolute', inset: '112px 24px 84px' }} />
+        {!isFullscreen && (
+          <Box
+            component="div"
+            sx={{ position: 'absolute', insetBlockStart: GUTTER, insetInlineEnd: GUTTER, pointerEvents: 'auto' }}
+          >
+            <HudReadout compact={false} />
+          </Box>
+        )}
+        <Box
+          component="div"
+          sx={{
+            position: 'absolute',
+            insetBlockEnd: GUTTER,
+            insetInline: GUTTER,
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between',
+            gap: 3,
+          }}
+        >
+          {!isFullscreen && <MessageLog compact={false} />}
+          <Box component="div" sx={{ flex: 'none', marginInlineStart: 'auto', pointerEvents: 'auto' }}>
+            <ViewDock placement="desktop" />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/DroneTabs.tsx
+
+```tsx
+import { Box, ButtonBase, Typography } from '@mui/material'
+import type { KeyboardEvent } from 'react'
+
+import { PhxIcon } from '@salsita-ai/sdk/ui'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID } from './tokens.js'
+
+// The panel the tabs control; `TabPanel` carries this id
+export const TAB_PANEL_ID = 'corvid-tab-panel'
+
+interface DroneTabsProps {
+  readonly orientation: 'vertical' | 'horizontal'
+}
+
+// The spec's `sidebarTabs` as a tab list: a rail of icons on a desktop, a segmented bar at the bottom of a phone.
+// `useTabNavigation` gives each tab its resolved label, the PhxIcon name the spec sets and `isActive`; `select` enters
+// the tab's navigation state, and the controls the spec filters to that state become active. Switching tabs is
+// navigation, not editing, so a viewer switches too.
+export const DroneTabs = ({ orientation }: DroneTabsProps) => {
+  const { tabs, select } = phx.frontend.useTabNavigation()
+  const vertical = orientation === 'vertical'
+  const nextKey = vertical ? 'ArrowDown' : 'ArrowRight'
+  const previousKey = vertical ? 'ArrowUp' : 'ArrowLeft'
+
+  // The arrow keys move between the tabs and enter the one they reach, as in a native tab list
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>, index: number) => {
+    const step = event.key === nextKey ? 1 : event.key === previousKey ? -1 : 0
+
+    if (step === 0) {
+      return
+    }
+
+    event.preventDefault()
+    const next = (index + step + tabs.length) % tabs.length
+    select(next)
+    event.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role="tab"]')[next]?.focus()
+  }
+
+  return (
+    <Box
+      component="div"
+      role="tablist"
+      aria-label="Configuration"
+      aria-orientation={orientation}
+      sx={{ display: 'flex', flexDirection: vertical ? 'column' : 'row', gap: vertical ? 0.5 : 0, blockSize: '100%' }}
+    >
+      {tabs.map(tab => (
+        <ButtonBase
+          key={tab.state}
+          role="tab"
+          id={`corvid-tab-${tab.index}`}
+          aria-selected={tab.isActive}
+          aria-controls={TAB_PANEL_ID}
+          tabIndex={tab.isActive ? 0 : -1}
+          onClick={() => select(tab.index)}
+          onKeyDown={event => handleKeyDown(event, tab.index)}
+          sx={{
+            position: 'relative',
+            flex: vertical ? 'none' : '1 1 0',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 0.75,
+            minBlockSize: vertical ? 68 : 'auto',
+            color: tab.isActive ? CORVID.lime : CORVID.muted,
+            bgcolor: tab.isActive ? 'rgba(198, 244, 50, 0.07)' : 'transparent',
+            transition: 'color 160ms, background-color 160ms',
+            // The active tab's marker: a bar on the rail's outer edge, or along the top of the bar's segment
+            '&::before': {
+              content: '""',
+              position: 'absolute',
+              insetBlock: vertical ? '14px' : '0 auto',
+              insetInlineStart: vertical ? 0 : '18%',
+              insetInlineEnd: vertical ? 'auto' : '18%',
+              inlineSize: vertical ? 2 : 'auto',
+              blockSize: vertical ? 'auto' : 2,
+              bgcolor: CORVID.lime,
+              opacity: tab.isActive ? 1 : 0,
+              transition: 'opacity 160ms',
+            },
+            '&:hover': { color: tab.isActive ? CORVID.lime : CORVID.ink },
+            '&.Mui-focusVisible': { outline: `1px solid ${CORVID.lime}`, outlineOffset: -4 },
+          }}
+        >
+          {tab.icon !== undefined && <PhxIcon name={tab.icon} fontSize="medium" />}
+          <Typography
+            component="span"
+            sx={{ fontFamily: CORVID.mono, fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase' }}
+          >
+            {tab.label}
+          </Typography>
+        </ButtonBase>
+      ))}
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/HudReadout.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { detailComponent, viewControlsComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID, GLASS_SX, LABEL_SX, bracketsSx } from './tokens.js'
+
+interface HudReadoutProps {
+  readonly compact: boolean
+}
+
+// The HUD's readouts: the price, the all-up weight, the active view and the mode. The weight is the subtitle of the
+// spec's `detail` component, which an expression computes from the choices; the view's name is the label the spec's
+// `viewControls` give it. A viewer sees the mode change to the spec sheet.
+export const HudReadout = ({ compact }: HudReadoutProps) => {
+  const detail = phx.frontend.useFirstRootComponent(detailComponent)
+  const name = phx.frontend.useLocalizable(detail?.state.title)
+  const weight = phx.frontend.useLocalizable(detail?.state.subtitle)
+  const price = phx.frontend.useRootEntityPrice()
+  const viewControls = phx.frontend.useFirstRootComponent(viewControlsComponent)
+  const viewState = phx.frontend.useActiveViewState()
+  const resolve = phx.frontend.useResolveLocalizable()
+  const { accessInfo } = phx.frontend.useAccessService()
+  const readOnly = accessInfo.viewMode
+  const view = viewControls?.state.items.find(item => item.value === viewState)
+  const modeColor = readOnly ? CORVID.cyan : CORVID.lime
+
+  const mode = (
+    <Typography
+      component="span"
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 1,
+        fontFamily: CORVID.mono,
+        fontSize: compact ? 9.5 : 10.5,
+        letterSpacing: '0.16em',
+        color: modeColor,
+        whiteSpace: 'nowrap',
+        // A steady square for the spec sheet, a pulsing dot while editing
+        '&::before': {
+          content: '""',
+          inlineSize: 7,
+          blockSize: 7,
+          borderRadius: readOnly ? 0 : '50%',
+          bgcolor: modeColor,
+          animation: readOnly ? 'none' : 'corvid-pulse 1.6s ease-in-out infinite',
+        },
+        '@keyframes corvid-pulse': { '50%': { opacity: 0.25 } },
+      }}
+    >
+      {readOnly ? 'SPEC SHEET · VIEW ONLY' : 'ENGINEERING · EDIT'}
+    </Typography>
+  )
+
+  if (compact) {
+    return (
+      <Box
+        component="div"
+        role="group"
+        aria-label="Readouts"
+        sx={{
+          ...GLASS_SX,
+          display: 'grid',
+          gridTemplateColumns: '1fr auto',
+          alignItems: 'center',
+          columnGap: 2,
+          rowGap: 0.5,
+          paddingInline: 1.5,
+          paddingBlock: 1,
+        }}
+      >
+        <Typography sx={{ fontFamily: CORVID.heading, fontWeight: 600, fontSize: 18, lineHeight: 1.2 }}>
+          {price}
+        </Typography>
+        <Typography sx={{ fontFamily: CORVID.mono, fontSize: 12, color: CORVID.ink, textAlign: 'end' }}>
+          {weight}
+        </Typography>
+        {mode}
+        <Typography sx={{ ...LABEL_SX, fontSize: 9.5, textAlign: 'end' }}>{name}</Typography>
+      </Box>
+    )
+  }
+
+  return (
+    <Box
+      component="div"
+      role="group"
+      aria-label="Readouts"
+      sx={{
+        ...GLASS_SX,
+        ...bracketsSx(modeColor, 8),
+        display: 'grid',
+        gap: 1,
+        minInlineSize: 300,
+        paddingInline: 2.25,
+        paddingBlock: 1.75,
+      }}
+    >
+      <Box component="div" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 3 }}>
+        <Typography sx={LABEL_SX}>{name}</Typography>
+        {mode}
+      </Box>
+      <Typography sx={{ fontFamily: CORVID.heading, fontWeight: 600, fontSize: 30, lineHeight: 1.1 }}>
+        {price}
+      </Typography>
+      <Box
+        component="div"
+        sx={{ display: 'flex', gap: 2.5, fontFamily: CORVID.mono, fontSize: 12, letterSpacing: '0.08em' }}
+      >
+        <Box component="span">{weight}</Box>
+        {view && (
+          <Box component="span" sx={{ color: CORVID.muted }}>
+            VIEW {resolve(view.label)?.toUpperCase()}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/MessageLog.tsx
+
+```tsx
+import { Box } from '@mui/material'
+import { useEffect, useState } from 'react'
+
+import type { ConfiguratorMessage } from '@salsita-ai/sdk/react'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID, GLASS_SX } from './tokens.js'
+
+const VISIBLE_MS = 9000
+
+interface LogEntry {
+  readonly message: ConfiguratorMessage
+  readonly time: string
+}
+
+// The tag before each line, by the kind of message and, for a violation, its severity
+const tagOf = (message: ConfiguratorMessage) => {
+  if (message.kind === 'violation') {
+    return message.violation.severity === 'fixable' || message.violation.severity === 'fatal'
+      ? { label: 'REJECTED', color: CORVID.orange }
+      : { label: message.violation.severity.toUpperCase(), color: CORVID.cyan }
+  }
+
+  if (message.kind === 'sideEffect') {
+    return { label: 'NOTE', color: CORVID.cyan }
+  }
+
+  if (message.kind === 'saveRecovery') {
+    return { label: 'SAVED', color: CORVID.lime }
+  }
+
+  return { label: 'ERROR', color: CORVID.orange }
+}
+
+interface MessageLogProps {
+  readonly compact: boolean
+}
+
+// The configurator's messages as the HUD's log line: a rejected change, the hint a change carries, a failed save.
+// `useConfiguratorMessages` hands each one over with its text resolved; the line shows the latest for a few seconds,
+// then returns to its idle state.
+export const MessageLog = ({ compact }: MessageLogProps) => {
+  const [entry, setEntry] = useState<LogEntry | null>(null)
+  const { accessInfo } = phx.frontend.useAccessService()
+
+  phx.frontend.useConfiguratorMessages(message => {
+    setEntry({ message, time: new Date().toLocaleTimeString('en-GB') })
+  })
+
+  useEffect(() => {
+    if (entry === null) {
+      return
+    }
+
+    const timeout = setTimeout(() => setEntry(null), VISIBLE_MS)
+
+    return () => clearTimeout(timeout)
+  }, [entry])
+
+  const tag = entry ? tagOf(entry.message) : { label: 'READY', color: CORVID.faint }
+  const idle = accessInfo.viewMode ? 'Viewing a shared configuration' : 'Every change saves on its own'
+
+  return (
+    <Box
+      component="div"
+      role="status"
+      aria-live="polite"
+      sx={{
+        ...GLASS_SX,
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: compact ? 1 : 1.5,
+        minInlineSize: 0,
+        maxInlineSize: compact ? 'none' : 560,
+        paddingInline: 1.5,
+        paddingBlock: 1,
+        fontFamily: CORVID.mono,
+        fontSize: compact ? 11 : 12,
+        lineHeight: 1.5,
+      }}
+    >
+      <Box component="span" aria-hidden sx={{ color: CORVID.lime }}>
+        &gt;
+      </Box>
+      {entry && !compact && (
+        <Box component="span" sx={{ color: CORVID.faint }}>
+          {entry.time}
+        </Box>
+      )}
+      <Box component="span" sx={{ flex: 'none', color: tag.color, letterSpacing: '0.12em' }}>
+        {tag.label}
+      </Box>
+      <Box component="span" sx={{ minInlineSize: 0, color: entry ? CORVID.ink : CORVID.muted }}>
+        {entry ? entry.message.text : idle}
+      </Box>
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/PhoneDeck.tsx
+
+```tsx
+import { Box } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DroneTabs } from './DroneTabs.js'
+import { HudReadout } from './HudReadout.js'
+import { MessageLog } from './MessageLog.js'
+import { TabPanel } from './TabPanel.js'
+import { ViewDock } from './ViewDock.js'
+import { CORVID, GLASS_SX } from './tokens.js'
+
+const SHEET_HEIGHT = 312
+const BAR_HEIGHT = 64
+const GUTTER = 12
+
+// The phone deck: the scene at the top with the HUD over it, a sheet of fixed height with the active tab's controls,
+// and the tabs as a segmented bar at the bottom. The sheet keeps its height on every tab, so the drone does not jump
+// when the tab changes. Fullscreen is a preview: only the reset and the exit stay.
+export const PhoneDeck = () => {
+  const { containerRef, safeAreaRef } = phx.frontend.useSceneSafeArea()
+  const isFullscreen = phx.frontend.useIsFullscreenActive()
+
+  return (
+    <Box
+      component="div"
+      ref={containerRef}
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: CORVID.mono,
+        pointerEvents: 'none',
+      }}
+    >
+      <Box component="div" sx={{ position: 'relative', flex: '1 1 0', minBlockSize: 0 }}>
+        {/* The camera fits the drone into this box: below the HUD, above the log and the view controls */}
+        <Box component="div" ref={safeAreaRef} sx={{ position: 'absolute', inset: '92px 16px 72px' }} />
+        {!isFullscreen && (
+          <Box
+            component="div"
+            sx={{ position: 'absolute', insetBlockStart: GUTTER, insetInline: GUTTER, pointerEvents: 'auto' }}
+          >
+            <HudReadout compact />
+          </Box>
+        )}
+        <Box
+          component="div"
+          sx={{
+            position: 'absolute',
+            insetBlockEnd: GUTTER,
+            insetInline: GUTTER,
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between',
+            gap: 1,
+          }}
+        >
+          {!isFullscreen && <MessageLog compact />}
+          <Box component="div" sx={{ flex: 'none', marginInlineStart: 'auto', pointerEvents: 'auto' }}>
+            <ViewDock placement="phone" />
+          </Box>
+        </Box>
+      </Box>
+
+      {!isFullscreen && (
+        <>
+          <Box
+            component="div"
+            sx={{
+              ...GLASS_SX,
+              flex: `0 0 ${SHEET_HEIGHT}px`,
+              overflowY: 'auto',
+              overscrollBehavior: 'contain',
+              padding: 2.5,
+              borderInline: 'none',
+              borderBlockEnd: 'none',
+              pointerEvents: 'auto',
+            }}
+          >
+            <TabPanel compact />
+          </Box>
+          <Box
+            component="nav"
+            aria-label="Corvid K6"
+            sx={{
+              flex: `0 0 ${BAR_HEIGHT}px`,
+              bgcolor: 'rgba(12, 14, 18, 0.96)',
+              borderBlockStart: `1px solid ${CORVID.line}`,
+              pointerEvents: 'auto',
+            }}
+          >
+            <DroneTabs orientation="horizontal" />
+          </Box>
+        </>
+      )}
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/TabPanel.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DroneFields } from '../_controls/DroneFields.js'
+import { TAB_PANEL_ID } from './DroneTabs.js'
+import { CORVID, LABEL_SX } from './tokens.js'
+
+interface TabPanelProps {
+  readonly compact: boolean
+}
+
+// The active tab's heading and controls. The heading is the tab's label from the spec; the controls are whichever
+// the spec activates for the tab. A viewer gets the same tabs with every control as a line of the spec sheet.
+export const TabPanel = ({ compact }: TabPanelProps) => {
+  const { tabs, activeTab } = phx.frontend.useTabNavigation()
+  const { accessInfo } = phx.frontend.useAccessService()
+  const readOnly = accessInfo.viewMode
+  const position = `${String((activeTab?.index ?? 0) + 1).padStart(2, '0')} / ${String(tabs.length).padStart(2, '0')}`
+
+  return (
+    <Box
+      component="section"
+      role="tabpanel"
+      id={TAB_PANEL_ID}
+      aria-labelledby={activeTab ? `corvid-tab-${activeTab.index}` : undefined}
+      sx={{ display: 'grid', gap: compact ? 2 : 3 }}
+    >
+      <Box component="header" sx={{ display: 'grid', gap: 0.5 }}>
+        <Typography sx={{ ...LABEL_SX, color: readOnly ? CORVID.cyan : CORVID.lime }}>
+          {position} · {readOnly ? 'SPEC SHEET' : 'CONFIGURE'}
+        </Typography>
+        <Typography
+          component="h2"
+          sx={{ fontFamily: CORVID.heading, fontWeight: 600, fontSize: compact ? 20 : 26, lineHeight: 1.15 }}
+        >
+          {activeTab?.label}
+        </Typography>
+      </Box>
+      <DroneFields readOnly={readOnly} />
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/ViewDock.tsx
+
+```tsx
+import {
+  Box,
+  Divider,
+  IconButton,
+  ThemeProvider,
+  Tooltip,
+  createTheme,
+  toggleButtonClasses,
+  toggleButtonGroupClasses,
+} from '@mui/material'
+import type { Theme } from '@mui/material'
+
+import { FrontendAnalyticsFactory, LayoutSlots } from '@salsita-ai/sdk/configurator'
+import { PhxIcon } from '@salsita-ai/sdk/ui'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID, GLASS_SX } from './tokens.js'
+
+// The built-in view controls draw with the MUI theme's palette. A dark palette makes them part of the deck, and with
+// them the list of views a phone opens, which renders in a popper outside the dock.
+const deckTheme = (outer: Theme) =>
+  createTheme(outer, {
+    palette: {
+      mode: 'dark',
+      primary: { main: CORVID.lime },
+      text: { primary: CORVID.ink, secondary: CORVID.muted },
+      background: { paper: CORVID.panelSolid },
+      divider: CORVID.line,
+      action: { hover: 'rgba(232, 237, 242, 0.06)' },
+    },
+  })
+
+interface DockButtonProps {
+  readonly label: string
+  readonly icon: string
+  readonly onClick: () => void
+}
+
+const DockButton = ({ label, icon, onClick }: DockButtonProps) => {
+  return (
+    <Tooltip title={label}>
+      <IconButton
+        aria-label={label}
+        onClick={onClick}
+        sx={{
+          inlineSize: 36,
+          blockSize: 36,
+          borderRadius: 0,
+          color: CORVID.muted,
+          '&:hover': { color: CORVID.lime, bgcolor: 'rgba(198, 244, 50, 0.08)' },
+        }}
+      >
+        <PhxIcon name={icon} />
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+interface ViewDockProps {
+  readonly placement: 'desktop' | 'phone'
+}
+
+// The spec's view controls, mounted from `LayoutSlots`, with the camera reset and fullscreen beside them. On a
+// desktop `DesktopViewControls` is a row of toggles; on a phone `MobileViewControls` is one button that opens the
+// list of views, left out in fullscreen as the UX guidelines ask. The dock gives the built-in controls a dark theme
+// and restyles the toggles through their MUI classes.
+export const ViewDock = ({ placement }: ViewDockProps) => {
+  const resetCamera = phx.frontend.useResetCamera()
+  const isFullscreen = phx.frontend.useIsFullscreenActive()
+  const setFullscreen = phx.frontend.useSetFullscreen()
+  const analytics = phx.frontend.useAnalytics()
+
+  // The same event the built-in fullscreen button records, for entering and for leaving
+  const toggleFullscreen = () => {
+    analytics.push(FrontendAnalyticsFactory.FullScreenModeToggled())
+    setFullscreen(!isFullscreen)
+  }
+
+  return (
+    <ThemeProvider theme={deckTheme}>
+      <Box
+        component="div"
+        role="toolbar"
+        aria-label="View"
+        sx={{
+          ...GLASS_SX,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+          padding: 0.5,
+          color: CORVID.ink,
+          [`& .${toggleButtonGroupClasses.root}`]: {
+            gap: 0.5,
+            padding: 0,
+            bgcolor: 'transparent',
+            boxShadow: 'none',
+            borderRadius: 0,
+          },
+          [`& .${toggleButtonClasses.root}`]: {
+            gap: 1,
+            minBlockSize: 36,
+            paddingInline: 1.5,
+            border: 0,
+            borderRadius: 0,
+            color: CORVID.muted,
+            '& .MuiTypography-root': {
+              fontFamily: CORVID.mono,
+              fontSize: 11,
+              letterSpacing: '0.14em',
+              textTransform: 'uppercase',
+            },
+            '&:hover': { color: CORVID.ink, bgcolor: 'rgba(232, 237, 242, 0.06)' },
+          },
+          [`& .${toggleButtonClasses.root}.${toggleButtonClasses.selected}`]: {
+            color: CORVID.graphite,
+            bgcolor: CORVID.lime,
+            '&:hover': { bgcolor: CORVID.lime },
+          },
+          // The phone's view button sits on the dock, not on a paper of its own
+          '& .MuiPaper-root': { bgcolor: 'transparent', boxShadow: 'none' },
+        }}
+      >
+        {placement === 'desktop' && <LayoutSlots.DesktopViewControls />}
+        {placement === 'phone' && !isFullscreen && <LayoutSlots.MobileViewControls />}
+        {(placement === 'desktop' || !isFullscreen) && (
+          <Divider orientation="vertical" flexItem sx={{ borderColor: CORVID.line, marginBlock: 0.5 }} />
+        )}
+        <DockButton label="Reset camera" icon="ArrowCounterClockwise" onClick={resetCamera} />
+        <DockButton
+          label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+          icon={isFullscreen ? 'ArrowsIn' : 'ArrowsOut'}
+          onClick={toggleFullscreen}
+        />
+      </Box>
+    </ThemeProvider>
+  )
+}
+```
+
+### ./src/\_shared/tokens.ts
+
+```ts
+// The flight deck's palette and type. Poppins is loaded by the page; labels and figures use the system's monospace.
+export const CORVID = {
+  graphite: '#14171c',
+  panel: 'rgba(20, 23, 28, 0.72)',
+  panelSolid: '#191d23',
+  ink: '#e8edf2',
+  muted: 'rgba(232, 237, 242, 0.64)',
+  faint: 'rgba(232, 237, 242, 0.4)',
+  line: 'rgba(232, 237, 242, 0.14)',
+  lime: '#c6f432',
+  cyan: '#3ed6e8',
+  orange: '#ff8a3d',
+  mono: "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+  heading: "Poppins, 'Helvetica Neue', Arial, sans-serif",
+} as const
+
+// Small capitals with wide tracking, for labels and readouts
+export const LABEL_SX = {
+  fontFamily: CORVID.mono,
+  fontSize: 11,
+  letterSpacing: '0.14em',
+  textTransform: 'uppercase',
+  color: CORVID.muted,
+} as const
+
+// A translucent panel that lets the scene show through, blurred
+export const GLASS_SX = {
+  bgcolor: CORVID.panel,
+  backdropFilter: 'blur(14px)',
+  border: `1px solid ${CORVID.line}`,
+} as const
+
+/** Corner brackets: four 1-pixel strokes `size` long at each corner, drawn as background gradients. */
+export const bracketsSx = (color: string, size = 10) => {
+  const stroke = `linear-gradient(${color}, ${color})`
+
+  return {
+    backgroundImage: Array.from({ length: 8 }, () => stroke).join(', '),
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: Array.from({ length: 4 }, () => `${size}px 1px, 1px ${size}px`).join(', '),
+    backgroundPosition:
+      'left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom',
+  }
+}
+```
+
+### ./src/elements/ConfiguratorLayout.tsx
+
+```tsx
+import { Box } from '@mui/material'
+
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DesktopDeck } from '../_shared/DesktopDeck.js'
+import { PhoneDeck } from '../_shared/PhoneDeck.js'
+import { CORVID } from '../_shared/tokens.js'
+
+// A pro tool over a full-bleed scene: the spec's tabs, a panel with the active tab's controls, a HUD with the
+// readouts, and the spec's view controls. The canvas stays mounted; what lies over it is the desktop or the phone
+// deck, and each calls `useSceneSafeArea` itself, so only the one on screen tells the camera where the drone goes.
+// The layout shows messages in its own log line, so it does not mount `LayoutSlots.Services`.
+const ConfiguratorLayout = () => {
+  // `null` until the container has been measured; only the scene shows until then
+  const viewports = phx.frontend.useActiveViewports()
+  const isDesktop = viewports?.includes('desktop') ?? false
+
+  return (
+    <Box
+      component="div"
+      sx={{ position: 'absolute', inset: 0, overflow: 'clip', bgcolor: CORVID.graphite, color: CORVID.ink }}
+    >
+      <LayoutSlots.SharedCanvas />
+      {viewports !== null && (isDesktop ? <DesktopDeck /> : <PhoneDeck />)}
+    </Box>
+  )
+}
+
+export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout', ConfiguratorLayout)
+```
+
+### ./src/elements/DroneHangar.tsx
+
+```tsx
+import { ContactShadows, Environment, Grid, Lightformer } from '@react-three/drei'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID } from '../_shared/tokens.js'
+
+// The floor lies 320 mm below the drone's centre, so the drone hovers over it on either landing gear
+const FLOOR_Y = -320
+
+// The stage named by the spec's `canvasCustomEnvironment`: a dark hangar with a measured floor, a landing ring and a
+// soft shadow. Light panels exist only in the reflections, so the shell and the anodised motors have something to
+// mirror and no image has to be downloaded. The scene is in millimetres.
+export default phx.frontend.createCustomPhoenixLayoutElement('DroneHangar', () => {
+  return (
+    <>
+      <color attach="background" args={[CORVID.graphite]} />
+      <ambientLight intensity={0.6} />
+      <directionalLight position={[-700, 1500, 1100]} intensity={2.4} />
+      <directionalLight position={[1200, 500, 600]} intensity={0.7} />
+      {/* A cool rim light from behind outlines the drone against the dark hangar */}
+      <directionalLight position={[600, 700, -1400]} intensity={1.8} color={CORVID.cyan} />
+
+      <Environment resolution={256} frames={1}>
+        <color attach="background" args={['#262b32']} />
+        {/* A long softbox above, two tall strips at the sides and a dim fill from the front */}
+        <Lightformer form="rect" intensity={3.2} position={[0, 6, 0]} rotation-x={Math.PI / 2} scale={[10, 3, 1]} />
+        <Lightformer form="rect" intensity={2.4} position={[-6, 1.5, 3]} rotation-y={Math.PI / 2} scale={[1, 7, 1]} />
+        <Lightformer form="rect" intensity={1.6} position={[6, 1.5, -2]} rotation-y={-Math.PI / 2} scale={[1, 7, 1]} />
+        <Lightformer form="rect" intensity={1} position={[0, 0, 8]} rotation-y={Math.PI} scale={[8, 2, 1]} />
+      </Environment>
+
+      <Grid
+        position={[0, FLOOR_Y, 0]}
+        infiniteGrid
+        cellSize={50}
+        cellThickness={0.6}
+        cellColor="#262c34"
+        sectionSize={250}
+        sectionThickness={1}
+        sectionColor="#3a4652"
+        fadeDistance={4200}
+        fadeStrength={2}
+      />
+      {/* The landing ring, drawn just above the floor so the grid does not cut through it */}
+      <mesh rotation-x={-Math.PI / 2} position={[0, FLOOR_Y + 1, 0]}>
+        <ringGeometry args={[440, 445, 128]} />
+        <meshBasicMaterial color={CORVID.lime} transparent opacity={0.5} toneMapped={false} />
+      </mesh>
+      <ContactShadows position={[0, FLOOR_Y + 2, 0]} scale={1600} far={440} blur={2.6} opacity={0.8} resolution={512} />
+    </>
+  )
+})
+```
+
+### ./src/elements/PayloadHotspot.tsx
+
+```tsx
+import { Box, ButtonBase } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { CORVID } from '../_shared/tokens.js'
+
+// Rendered by the spec's `sceneEntityObjectHtmlHotspot` on the payload mount: a target on the drone that opens the
+// Payload tab. The spec's `$filter` shows it only to the engineer and only outside that tab.
+export default phx.frontend.createCustomPhoenixEntityElement('PayloadHotspot', () => {
+  const { select } = phx.frontend.useTabNavigation()
+
+  return (
+    <ButtonBase
+      aria-label="Payload: open the Payload tab"
+      onClick={() => select('payload')}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        // The target's centre sits on the mount; the label hangs to its right
+        transform: 'translate(-14px, 0)',
+        color: CORVID.lime,
+        '&:hover .corvid-hotspot-label, &.Mui-focusVisible .corvid-hotspot-label': {
+          bgcolor: CORVID.lime,
+          color: CORVID.graphite,
+        },
+      }}
+    >
+      <Box
+        component="span"
+        aria-hidden
+        sx={{
+          position: 'relative',
+          display: 'grid',
+          placeItems: 'center',
+          inlineSize: 28,
+          blockSize: 28,
+          // A ring that keeps widening and fading, so the target reads as live
+          '&::after': {
+            content: '""',
+            position: 'absolute',
+            inset: 0,
+            borderRadius: '50%',
+            border: `1px solid ${CORVID.lime}`,
+            animation: 'corvid-ping 2s ease-out infinite',
+          },
+          '@keyframes corvid-ping': {
+            from: { transform: 'scale(0.6)', opacity: 0.9 },
+            to: { transform: 'scale(1.6)', opacity: 0 },
+          },
+        }}
+      >
+        <svg viewBox="0 0 28 28" width={28} height={28} fill="none" stroke="currentColor" strokeWidth={1.4}>
+          <circle cx={14} cy={14} r={8} fill="rgba(20, 23, 28, 0.6)" />
+          <path d="M14 2v6M14 20v6M2 14h6M20 14h6" />
+          <circle cx={14} cy={14} r={1.6} fill="currentColor" />
+        </svg>
+      </Box>
+      <Box
+        component="span"
+        className="corvid-hotspot-label"
+        sx={{
+          paddingInline: 1,
+          paddingBlock: 0.5,
+          fontFamily: CORVID.mono,
+          fontSize: 10.5,
+          letterSpacing: '0.16em',
+          whiteSpace: 'nowrap',
+          color: CORVID.lime,
+          bgcolor: 'rgba(20, 23, 28, 0.8)',
+          border: `1px solid ${CORVID.lime}`,
+          transition: 'background-color 160ms, color 160ms',
+        }}
+      >
+        PAYLOAD ›
+      </Box>
+    </ButtonBase>
+  )
+})
+```
+
+### ./src/expressions/drone.ts
+
+```ts
+import { phx } from '../../.phoenix/phx.js'
+
+const MOTORS = { Quad: 4, Hexa: 6 }
+
+// Prices in US dollars
+const BASE_PRICE = 8900
+const FRAME_PRICE = { Quad: 0, Hexa: 2400 }
+// Per millimetre of arm beyond the shortest, 280 mm
+const ARM_PRICE_PER_MM = 6
+const PROP_PRICE = { TwoBlade: 0, ThreeBlade: 60 }
+const MOTOR_COLOR_PRICE = { Titanium: 0, Lime: 180, Cyan: 180, Ember: 180 }
+const PAYLOAD_PRICE = { Camera: 4200, Lidar: 11800, Winch: 1900 }
+const RETRACTABLE_GEAR_PRICE = 650
+const LIVERY_PRICE = { Graphite: 0, Arctic: 0, Signal: 250 }
+
+// Weights in grams. The body includes the battery; an arm weighs more the longer it is.
+const BODY_WEIGHT = 1650
+const ARM_WEIGHT = (armLength: number) => 60 + 0.25 * armLength
+const MOTOR_WEIGHT = 160
+const PROP_WEIGHT = { TwoBlade: 22, ThreeBlade: 30 }
+const PAYLOAD_WEIGHT = { Camera: 680, Lidar: 920, Winch: 540 }
+const GEAR_WEIGHT = { fixed: 210, retractable: 340 }
+
+// How each livery renders: the spec's overrides of the canopy and of the lights read these
+const LIVERIES = {
+  Graphite: { shell: '#4a525c', clearcoat: 0.5, lights: '#c6f432' },
+  Arctic: { shell: '#e9edf0', clearcoat: 0.8, lights: '#3ed6e8' },
+  Signal: { shell: '#ff6a1a', clearcoat: 0.6, lights: '#f4f7fa' },
+}
+
+const MOTOR_COLORS = { Titanium: '#a7adb4', Lime: '#a6d21c', Cyan: '#25b9cc', Ember: '#ff6f24' }
+
+export default phx.domain.implementCustomExpressions({
+  Drone: {
+    $price: s => {
+      const motors = MOTORS[s.frame]
+
+      return (
+        BASE_PRICE +
+        FRAME_PRICE[s.frame] +
+        (s.armLength - 280) * ARM_PRICE_PER_MM +
+        motors * PROP_PRICE[s.props] +
+        MOTOR_COLOR_PRICE[s.motorColor] +
+        PAYLOAD_PRICE[s.payload] +
+        (s.retractableGear ? RETRACTABLE_GEAR_PRICE : 0) +
+        LIVERY_PRICE[s.livery]
+      )
+    },
+    // The all-up weight, ready to fly: the `detail` component's subtitle reads it
+    $weightLabel: s => {
+      const motors = MOTORS[s.frame]
+      const grams =
+        BODY_WEIGHT +
+        motors * (ARM_WEIGHT(s.armLength) + MOTOR_WEIGHT + PROP_WEIGHT[s.props]) +
+        PAYLOAD_WEIGHT[s.payload] +
+        GEAR_WEIGHT[s.retractableGear ? 'retractable' : 'fixed']
+
+      return `AUW ${(grams / 1000).toFixed(2)} kg`
+    },
+    $shellColor: s => {
+      return LIVERIES[s.livery].shell
+    },
+    $shellClearcoat: s => {
+      return LIVERIES[s.livery].clearcoat
+    },
+    $ledColor: s => {
+      return LIVERIES[s.livery].lights
+    },
+    $motorColor: s => {
+      return MOTOR_COLORS[s.motorColor]
+    },
+  },
+})
+```
+
+### ./src/invariants/drone.ts
+
+```ts
+import { phx } from '../../.phoenix/phx.js'
+
+// The winch's load needs the thrust of six motors. The spec marks the violation `fixable`, so a change that breaks it
+// is rejected, and the layout's message log shows the spec's message.
+export default phx.domain.implementCustomInvariants({
+  Drone: {
+    winchNeedsHexa: s => {
+      return s.payload !== 'Winch' || s.frame === 'Hexa'
+    },
+  },
+})
+```
+
+### ./src/transformers/lidar-base-station.ts
+
+```ts
+import { msg } from '@lingui/core/macro'
+
+import { phx } from '../../.phoenix/phx.js'
+
+// Choosing the LiDAR carries a hint, which reaches the layout as a side-effect message
+export default phx.frontend.transformerBuilder.when
+  .entity(['Drone'])
+  .modified({ atFields: ['payload'] })
+  .then.overrideMatchingUpdate(({ update }) => {
+    if (update.stateDelta.payload !== 'Lidar') {
+      return [update]
+    }
+
+    return [{ ...update, hint: msg`LiDAR missions need RTK positioning, so a GNSS base station ships with the drone.` }]
+  })
+  .build('lidar-base-station')
+```
+
+</details>