@salsita-ai/sdk 0.50.0-develop.f6390cb584 → 0.50.0-develop.f87b940e67

package/dist/docs/layouts/gallery/ardent-compressor.mdx

@@ -0,0 +1,3516 @@
+# Ardent Compressor
+
+Quote an engineered product from a form, with no 3D model at all. An industrial compressor maker, Ardent Air, lets plant engineers size a rotary screw compressor and ask for a firm quote. The engineer works through five steps: the air demand, the air treatment, the plant room, service and delivery, and a review. Questions appear only when an earlier answer makes them relevant, conflicts between choices are flagged at the field that can fix them, and a price breakdown with every line, the subtotal and an express-delivery surcharge follows each change. **Request quote** sends the configuration to an application engineer and shows the answer. The configurator mounts no canvas: the spec holds the product, the prices, the rules and the quote action, and the layout is an ordinary React form.
+
+- [Try it](#try-it)
+- [What the example demonstrates](#what-the-example-demonstrates)
+- [A configurator with no scene](#a-configurator-with-no-scene)
+- [Steps from the spec](#steps-from-the-spec)
+- [Questions that depend on earlier answers](#questions-that-depend-on-earlier-answers)
+- [Options that follow the configuration](#options-that-follow-the-configuration)
+- [Validation from invariants](#validation-from-invariants)
+- [A live price breakdown](#a-live-price-breakdown)
+- [Request a quote](#request-a-quote)
+- [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 phone version is 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. This page uses the same element for a product that has no model: the configuration backend, with its spec, rules, storage and finalize actions, runs a form.
+
+| Piece                                                                                          | Where                                                                                                |
+| ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| A `ConfiguratorLayout` that mounts no `LayoutSlots.SharedCanvas`                               | [A configurator with no scene](#a-configurator-with-no-scene)                                        |
+| `navigationSteps` with `phx.frontend.useStepNavigation()`                                      | `StepHeader`, [Steps from the spec](#steps-from-the-spec)                                            |
+| `$filter.active` with `$eval`, and `phx.frontend.useComponent()` to follow it                  | `ChoiceField`, [Questions that depend on earlier answers](#questions-that-depend-on-earlier-answers) |
+| `attributeSelection` options read from an expression                                           | [Options that follow the configuration](#options-that-follow-the-configuration)                      |
+| `warning` invariants shown at the field, read with `phx.frontend.useFinalizeViolations()`      | `useWarnings`, `FieldShell`, [Validation from invariants](#validation-from-invariants)               |
+| Typed expressions declared in `expressions:` and read with `phx.frontend.useRootEntityState()` | `PriceBreakdown`, [A live price breakdown](#a-live-price-breakdown)                                  |
+| `genericDimension`, `attributeSwitch` and `textValue` controls in the layout's own inputs      | `NumberField`, `SwitchField`, `TextInputField`                                                       |
+| `phx.frontend.useFinalizeActions()` with a project handler that stands in for a webhook        | `QuoteAction`, `request-quote.ts`, [Request a quote](#request-a-quote)                               |
+| `phx.frontend.useUndoRedo()` in the brand bar                                                  | `DesktopPage`                                                                                        |
+
+## A configurator with no scene
+
+`src/elements/ConfiguratorLayout.tsx` mounts the services and a page, and never `LayoutSlots.SharedCanvas`. Without a canvas the app loader leaves as soon as the configuration is up, nothing waits for a scene, and no model, environment map or texture is downloaded, even when the spec names one; see [Configurator Interface → App Loader](?path=/docs/phoenix-configurator-interface--docs#app-loader). The spec needs no camera and no scene component.
+
+```tsx
+import { Box } from '@mui/material'
+
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT } from '../_form/index.js'
+import { DesktopPage } from '../_shared/DesktopPage.js'
+import { PhonePage } from '../_shared/PhonePage.js'
+
+// A quote builder with no scene: the layout mounts the services and a page, never `LayoutSlots.SharedCanvas`, so the
+// configurator loads no 3D scene and the app loader does not wait for one. Desktop or phone follows the width of the
+// configurator's container.
+const ConfiguratorLayout = () => {
+  // `null` until the container has been measured
+  const viewports = phx.frontend.useActiveViewports()
+  const isDesktop = viewports?.includes('desktop') ?? false
+
+  return (
+    <Box component="div" sx={{ position: 'absolute', inset: 0, overflow: 'clip', bgcolor: ARDENT.page }}>
+      <LayoutSlots.Services />
+      {viewports !== null && (isDesktop ? <DesktopPage /> : <PhonePage />)}
+    </Box>
+  )
+}
+
+export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout', ConfiguratorLayout)
+```
+
+`phx.frontend.useActiveViewports()` measures the configurator's container, not the window, so the **Phone** story's 390-pixel frame shows the phone page. Finalizing works the same without a canvas, as long as the spec asks for no client-side images: an image capture waits for a canvas and fails after 10 seconds without one.
+
+## Steps from the spec
+
+The steps are the spec's `navigationSteps`. Each step names the navigation state it enters; the last one also holds `requested`, the state the quote handler enters, so the review stays the active step after the request.
+
+```yaml
+navigationStates:
+  - duty
+  - treatment
+  - installation
+  - service
+  - review
+  - requested
+```
+
+```yaml
+components:
+  Compressor:
+    navigationSteps:
+      main:
+        steps:
+          - label: Duty
+            navigationStates:
+              - duty
+          - label: Air treatment
+            navigationStates:
+              - treatment
+          - label: Installation
+            navigationStates:
+              - installation
+          - label: Service and delivery
+            navigationStates:
+              - service
+          - label: Review
+            navigationStates:
+              - review
+              - requested
+```
+
+`StepHeader` draws them with `phx.frontend.useStepNavigation()`: each step has a `label`, a `status` of `complete`, `active` or `upcoming`, and `goTo(index)` enters it. The hook enforces no order, so the engineer can jump back to any step from the review. A step that holds a conflict carries a mark until it is resolved; which step resolves which invariant is the layout's own map, `STEP_WARNINGS`. `StepForm` renders the active step's sections by switching on `phx.frontend.useActiveNavigationState()`, and the page's **Back** and **Next** buttons call `previous()` and `next()`.
+
+```tsx
+import { Box, ButtonBase, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT, useWarnings } from '../_form/index.js'
+import { STEP_WARNINGS } from './step-warnings.js'
+
+const CHECK_ICON = 'M5 12.5 10 17.5 19 7'
+
+interface StepHeaderProps {
+  readonly compact: boolean
+}
+
+// The spec's `navigationSteps` as a stepper. Every step can be entered, in any order; a step that holds a warning
+// carries a mark until the warning is resolved. On a phone the stepper is one line with a segmented progress bar.
+export const StepHeader = ({ compact }: StepHeaderProps) => {
+  const { steps, activeStep, goTo } = phx.frontend.useStepNavigation()
+  const warnings = useWarnings()
+
+  const hasWarning = (states: readonly string[]) => {
+    return states.some(state => warnings.some(warning => STEP_WARNINGS[state]?.includes(warning.type)))
+  }
+
+  if (compact) {
+    return (
+      <Box
+        component="nav"
+        aria-label="Quote steps"
+        sx={{ display: 'grid', gap: 1, paddingInline: 2, paddingBlock: 1.5 }}
+      >
+        <Box component="div" sx={{ display: 'flex', alignItems: 'baseline', gap: 1 }}>
+          <Typography sx={{ fontFamily: ARDENT.font, fontSize: 13, color: ARDENT.steel }}>
+            Step {(activeStep?.index ?? 0) + 1} of {steps.length}
+          </Typography>
+          <Typography component="h2" sx={{ fontFamily: ARDENT.font, fontSize: 17, fontWeight: 600, color: ARDENT.ink }}>
+            {activeStep?.label}
+          </Typography>
+        </Box>
+        <Box component="ol" sx={{ display: 'flex', gap: 0.5, margin: 0, padding: 0, listStyle: 'none' }}>
+          {steps.map(step => (
+            <Box component="li" key={step.state} sx={{ flex: 1 }}>
+              <ButtonBase
+                aria-label={`${step.label}${hasWarning(step.navigationStates) ? ', needs attention' : ''}`}
+                aria-current={step.status === 'active' ? 'step' : undefined}
+                onClick={() => goTo(step.index)}
+                sx={{
+                  display: 'block',
+                  inlineSize: '100%',
+                  blockSize: 6,
+                  borderRadius: 3,
+                  // A bigger target than the bar itself, for a finger
+                  outline: '8px solid transparent',
+                  bgcolor: hasWarning(step.navigationStates)
+                    ? ARDENT.warning
+                    : step.status === 'upcoming'
+                      ? ARDENT.line
+                      : ARDENT.signal,
+                }}
+              />
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    )
+  }
+
+  return (
+    <Box
+      component="nav"
+      aria-label="Quote steps"
+      sx={{ display: 'flex', alignItems: 'center', gap: 1, paddingInline: 4, paddingBlock: 1.5, overflowX: 'auto' }}
+    >
+      {steps.map((step, index) => {
+        const warn = hasWarning(step.navigationStates)
+        const isActive = step.status === 'active'
+        const isComplete = step.status === 'complete'
+
+        return (
+          <Box component="div" key={step.state} sx={{ display: 'flex', alignItems: 'center', gap: 1, flex: 'none' }}>
+            {index > 0 && (
+              <Box
+                component="span"
+                aria-hidden
+                sx={{ inlineSize: 32, blockSize: 2, bgcolor: isComplete || isActive ? ARDENT.signal : ARDENT.line }}
+              />
+            )}
+            <ButtonBase
+              aria-current={isActive ? 'step' : undefined}
+              onClick={() => goTo(step.index)}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                paddingInline: 1,
+                paddingBlock: 0.75,
+                borderRadius: 2,
+                '&:hover': { bgcolor: ARDENT.page },
+                '&.Mui-focusVisible': { outline: `2px solid ${ARDENT.navy}` },
+              }}
+            >
+              <Box
+                component="span"
+                sx={{
+                  display: 'grid',
+                  placeItems: 'center',
+                  inlineSize: 28,
+                  blockSize: 28,
+                  borderRadius: '50%',
+                  fontFamily: ARDENT.font,
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: isActive || isComplete ? ARDENT.panel : ARDENT.steel,
+                  bgcolor: isActive ? ARDENT.signal : isComplete ? ARDENT.navy : 'transparent',
+                  border: isActive || isComplete ? 'none' : `2px solid ${ARDENT.line}`,
+                }}
+              >
+                {isComplete ? (
+                  <Box component="svg" viewBox="0 0 24 24" aria-hidden sx={{ inlineSize: 16, blockSize: 16 }}>
+                    <path d={CHECK_ICON} fill="none" stroke="currentColor" strokeWidth={3} strokeLinecap="round" />
+                  </Box>
+                ) : (
+                  index + 1
+                )}
+              </Box>
+              <Typography
+                component="span"
+                sx={{
+                  fontFamily: ARDENT.font,
+                  fontSize: 15,
+                  fontWeight: isActive ? 600 : 500,
+                  color: isActive ? ARDENT.ink : ARDENT.steel,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {step.label}
+              </Typography>
+              {warn && (
+                <Box
+                  component="span"
+                  role="img"
+                  aria-label="needs attention"
+                  sx={{ inlineSize: 8, blockSize: 8, borderRadius: '50%', bgcolor: ARDENT.warning }}
+                />
+              )}
+            </ButtonBase>
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}
+```
+
+## Questions that depend on earlier answers
+
+A question that only makes sense after an earlier answer is a spec component with a filter. The dew point is asked only with a desiccant dryer, and heat recovery only for a water-cooled machine:
+
+```yaml
+components:
+  Compressor:
+    attributeSelection:
+      dewPoint:
+        value:
+          $bind: dewPoint
+        options:
+          - label: −40 °C
+            description: Outdoor lines, food and pharma
+            value: Minus40
+          - label: −70 °C
+            description: Electronics and laboratories
+            value: Minus70
+        $filter:
+          active:
+            $eval: self.dryer === 'Desiccant'
+    attributeSwitch:
+      heatRecovery:
+        value:
+          $bind: heatRecovery
+        $filter:
+          active:
+            $eval: self.cooling === 'Water'
+```
+
+The layout lists every field of a step and lets the spec decide which exist. A control hook such as `phx.frontend.useAttributeSelection()` throws when its component is not active, so `ChoiceField` first asks `phx.frontend.useComponent()` for the component and mounts the cards only when it is there. `SwitchField` does the same for `attributeSwitch`. The value of a hidden question stays in the configuration, so the expressions and the summary read it only where the question applies, such as the dew point of a desiccant dryer.
+
+```tsx
+import { Box, ButtonBase, Typography } from '@mui/material'
+import type { KeyboardEvent } from 'react'
+
+import { attributeSelectionComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { FieldShell } from './FieldShell.js'
+import { ARDENT } from './tokens.js'
+
+// Arrow keys move the selection between the cards, as in a native radio group
+const ARROW_STEPS: Readonly<Record<string, number | undefined>> = {
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1,
+}
+
+interface ChoiceFieldProps {
+  readonly instanceName: string
+  readonly label: string
+  readonly hint?: string
+  readonly warningTypes?: readonly string[]
+  readonly readOnly: boolean
+  // The narrowest a card gets before the cards wrap onto another row
+  readonly minCardWidth?: number
+}
+
+const ChoiceCards = ({ instanceName, label, hint, warningTypes, readOnly, minCardWidth = 150 }: ChoiceFieldProps) => {
+  const resolve = phx.frontend.useResolveLocalizable()
+  const compressorId = phx.frontend.useRootEntityId()
+  const { value, options } = phx.frontend.useAttributeSelection(compressorId, instanceName)
+  // An option a `fixable` or `fatal` invariant rules out is `disabled`, with the reason in its `hint`
+  const optionHint = options.find(option => option.disabled && option.hint)?.hint
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>, index: number) => {
+    const step = ARROW_STEPS[event.key]
+
+    if (step === undefined) {
+      return
+    }
+
+    event.preventDefault()
+    const next = (index + step + options.length) % options.length
+    options[next]?.onSelect()
+    event.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role="radio"]')[next]?.focus()
+  }
+
+  return (
+    <FieldShell id={`ardent-${instanceName}`} label={label} hint={optionHint ?? hint} warningTypes={warningTypes}>
+      <Box
+        component="div"
+        role="radiogroup"
+        aria-labelledby={`ardent-${instanceName}-label`}
+        sx={{ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(${minCardWidth}px, 1fr))`, gap: 1.25 }}
+      >
+        {options.map((option, index) => {
+          const isSelected = option.value === value
+          const description = resolve(option.description)
+
+          return (
+            <ButtonBase
+              key={String(option.value)}
+              role="radio"
+              aria-checked={isSelected}
+              aria-disabled={option.disabled}
+              tabIndex={isSelected ? 0 : -1}
+              disabled={readOnly && !isSelected}
+              onClick={readOnly ? undefined : option.onSelect}
+              onKeyDown={readOnly ? undefined : event => handleKeyDown(event, index)}
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: 'auto 1fr',
+                alignItems: 'start',
+                columnGap: 1.25,
+                rowGap: 0.25,
+                padding: 1.5,
+                textAlign: 'start',
+                borderRadius: 2,
+                border: `1px solid ${isSelected ? ARDENT.signal : ARDENT.line}`,
+                boxShadow: isSelected ? `inset 0 0 0 1px ${ARDENT.signal}` : 'none',
+                bgcolor: isSelected ? ARDENT.signalTint : ARDENT.panel,
+                fontFamily: ARDENT.font,
+                opacity: option.disabled ? 0.45 : 1,
+                transition: 'border-color 140ms, background-color 140ms',
+                '&:hover': { borderColor: isSelected ? ARDENT.signal : ARDENT.steel },
+                '&.Mui-focusVisible': { outline: `2px solid ${ARDENT.navy}`, outlineOffset: 2 },
+                '&.Mui-disabled': { opacity: 0.45 },
+              }}
+            >
+              {/* The radio mark: a ring, filled with a dot when the card is chosen */}
+              <Box
+                component="span"
+                aria-hidden
+                sx={{
+                  gridRow: 'span 2',
+                  marginBlockStart: 0.25,
+                  inlineSize: 18,
+                  blockSize: 18,
+                  borderRadius: '50%',
+                  border: `2px solid ${isSelected ? ARDENT.signal : ARDENT.steel}`,
+                  boxShadow: isSelected ? `inset 0 0 0 3px ${ARDENT.signalTint}` : 'none',
+                  bgcolor: isSelected ? ARDENT.signal : 'transparent',
+                }}
+              />
+              <Typography
+                component="span"
+                sx={{ fontFamily: ARDENT.font, fontSize: 15, fontWeight: 600, color: ARDENT.ink }}
+              >
+                {resolve(option.title)}
+              </Typography>
+              {description && (
+                <Typography
+                  component="span"
+                  sx={{ fontFamily: ARDENT.font, fontSize: 13, lineHeight: 1.35, color: ARDENT.steel }}
+                >
+                  {description}
+                </Typography>
+              )}
+            </ButtonBase>
+          )
+        })}
+      </Box>
+    </FieldShell>
+  )
+}
+
+// One `attributeSelection` of the spec as a group of cards. The field exists only while the spec's component is
+// active: a `$filter` in the spec decides when a question is asked, and the layout follows it. The control hook throws
+// for an inactive component, so the cards mount only after `useComponent` has found it. An option that a `fixable`
+// invariant rules out is faded with its hint below the cards; it stays clickable, the change is rejected and the
+// built-in snackbar says why.
+export const ChoiceField = (props: ChoiceFieldProps) => {
+  const compressorId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: compressorId,
+    componentType: attributeSelectionComponent,
+    instanceName: props.instanceName,
+  })
+
+  return component === null ? null : <ChoiceCards {...props} />
+}
+```
+
+## Options that follow the configuration
+
+The delivery options name their lead time, and express delivery is offered only for the stock frames up to 110 kW. The options are an expression instead of a list:
+
+```yaml
+components:
+  Compressor:
+    attributeSelection:
+      delivery:
+        value:
+          $bind: delivery
+        options:
+          $read: $deliveryOptions
+```
+
+`$deliveryOptions` in `src/expressions/compressor.ts` returns `{ label, description, value }` entries, "Standard, 6 weeks" and "Express, 3 weeks" for the first configuration. When a larger frame drops the express option while it is chosen, no card is selected and the `expressUnavailable` warning below tells the engineer to choose again.
+
+## Validation from invariants
+
+The rules between choices are invariants of the spec. Every one is a `warning`: a change that breaks it is kept, so the engineer sees the conflict and fixes it where it is shown, and finalizing waits until no warning is left. A `fixable` or `fatal` invariant would reject the change instead, as the [Kestrel Kettle](?path=/docs/layouts-gallery-kestrel-kettle--docs#a-rule-between-two-choices) shows. Two rules name numbers in their message, so they are declared with `types` and build the message in code.
+
+```yaml
+invariants:
+  Compressor:
+    flowRange:
+      types:
+        - flowAboveRange
+    desiccantNeedsFiltration:
+      type: desiccantNeedsFiltration
+      severity: warning
+      message: A desiccant dryer needs high-efficiency or oil-vapour filtration upstream, or oil aerosol spoils the desiccant.
+    receiverSize:
+      types:
+        - receiverTooSmall
+    expressUnavailable:
+      type: expressUnavailable
+      severity: warning
+      message: Express delivery covers stock frames up to 110 kW. Choose standard delivery for this frame.
+    companyMissing:
+      type: companyMissing
+      severity: warning
+      message: Enter the company the quote is for.
+    emailInvalid:
+      type: emailInvalid
+      severity: warning
+      message: Enter a valid email address for the quote.
+```
+
+```ts
+import { phx } from '../../.phoenix/phx.js'
+
+const PRESSURE_LABEL = { Bar7: '7.5 bar', Bar10: '10 bar', Bar13: '13 bar' }
+const RECEIVER_LITRES = { None: 0, Litres500: 500, Litres1000: 1000, Litres2000: 2000 }
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/
+
+// Each rule is a `warning` in the spec: a change that breaks it is kept, so the customer can fix the conflict where it
+// is shown, and finalizing waits until no warning is left
+export default phx.domain.implementCustomInvariants({
+  Compressor: {
+    // The largest frame delivers less air at a higher pressure, so the limit depends on an earlier choice
+    flowRange: s => {
+      if (s.flow <= s.$maxFlow) {
+        return []
+      }
+
+      return [
+        {
+          type: 'flowAboveRange',
+          severity: 'warning',
+          message: `At ${PRESSURE_LABEL[s.pressure]} the largest frame delivers ${s.$maxFlow.toFixed(1)} m³/min. Lower the flow or the pressure.`,
+        },
+      ]
+    },
+    desiccantNeedsFiltration: s => {
+      return s.dryer !== 'Desiccant' || s.filtration !== 'General'
+    },
+    // The message names the size the flow needs, so it is built here rather than in the spec
+    receiverSize: s => {
+      if (RECEIVER_LITRES[s.receiver] >= s.$minReceiverLitres) {
+        return []
+      }
+
+      return [
+        {
+          type: 'receiverTooSmall',
+          severity: 'warning',
+          message: `A fixed-speed compressor at ${s.flow.toFixed(1)} m³/min needs a receiver of at least ${s.$minReceiverLitres.toLocaleString('en')} L.`,
+        },
+      ]
+    },
+    expressUnavailable: s => {
+      return s.delivery !== 'Express' || s.$frameKw <= 110
+    },
+    companyMissing: s => {
+      return s.company.trim().length > 0
+    },
+    emailInvalid: s => {
+      return EMAIL.test(s.email.trim())
+    },
+  },
+})
+```
+
+The flow's limit depends on the pressure: at 13 bar the largest frame delivers less air. The `flow` dimension keeps a fixed range of 2 to 40 m³/min and the `flowAboveRange` warning carries the limit. A `max` read from an expression would not do: a pressure change that leaves the flow above a dimension's `max` is rejected with a built-in message, so the engineer could not choose 13 bar at all.
+
+`useWarnings` resolves the warnings of the committed configuration. It reads them from `phx.frontend.useFinalizeViolations()`, which lists the violations that block finalizing; `phx.frontend.useStateValidity()` holds the same list, but on `phx.frontend` it is typed as the value it returns rather than as a hook, so a call does not type-check.
+
+```ts
+import { useMemo } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+
+export interface Warning {
+  readonly type: string
+  readonly text: string
+}
+
+// The warnings of the committed configuration with their text resolved. A `warning` invariant keeps the change, so its
+// violation stays in the committed state until the customer resolves it, and finalizing waits for that.
+// `useFinalizeViolations` lists them; `useStateValidity` holds the same list, but on `phx.frontend` it is typed as the
+// validity value instead of a hook, so calling it does not type-check.
+export const useWarnings = (): readonly Warning[] => {
+  const { violations } = phx.frontend.useFinalizeViolations()
+  const resolve = phx.frontend.useResolveLocalizable()
+
+  return useMemo(() => {
+    return (violations ?? []).map(({ violation }) => ({ type: violation.type, text: resolve(violation.message) ?? '' }))
+  }, [violations, resolve])
+}
+```
+
+`FieldShell` shows a field's warning below its input in place of the help text. A field names the types it can resolve, so the receiver field shows the receiver rule and the filter package the desiccant rule. The contact fields on the review step show theirs once the engineer has left the field, or after a request was attempted. The review step also lists every conflict left, each with a button to the step that resolves it.
+
+## A live price breakdown
+
+Every number of the breakdown is an expression. Declaring them in `expressions:` types them for the layout: `phx.frontend.useRootEntityState()` returns the root entity with its expressions, so `$quoteLines` is an array of `{ key, label, detail, amount }`. An expression that is only inferred from where the spec reads it gets the type of that place, which can be wider than the layout wants.
+
+```yaml
+expressions:
+  Compressor:
+    $leadTimeWeeks:
+      type: number
+    $quoteLines:
+      type: array
+      items:
+        type: object
+        properties:
+          key:
+            type: string
+          label:
+            type: string
+          detail:
+            type: string
+          amount:
+            type: number
+        required:
+          - key
+          - label
+          - detail
+          - amount
+        additionalProperties: false
+    $subtotal:
+      type: number
+    $leadTimeSurcharge:
+      type: number
+    $total:
+      type: number
+```
+
+`src/expressions/compressor.ts` picks the smallest frame that delivers the flow at the pressure and prices it, then adds a line for each option that costs extra: the variable speed drive, the dryer, the filters, water cooling and heat recovery, the receiver, the canopy, the 60 Hz build, the service plan and commissioning. Express delivery adds 8 % of the subtotal. The `price` component reads `$total`, so `phx.frontend.useRootEntityPrice()` formats the total in the component's currency:
+
+```yaml
+components:
+  Compressor:
+    price:
+      main:
+        price:
+          $read: $total
+        currency: EUR
+```
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT, OVERLINE_SX } from '../_form/index.js'
+
+const formatEuro = (amount: number) => {
+  return amount.toLocaleString('en-IE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 })
+}
+
+const ROW_SX = {
+  display: 'grid',
+  gridTemplateColumns: '1fr auto',
+  columnGap: 2,
+  alignItems: 'baseline',
+  paddingBlock: 1,
+} as const
+
+// The quote's lines, subtotal, lead-time surcharge and total. Every number comes from an expression of the spec
+// (`$quoteLines`, `$subtotal`, `$leadTimeSurcharge`, `$leadTimeWeeks`), read from the root entity, so the breakdown
+// changes with each choice, and the total is the `price` component's value.
+export const PriceBreakdown = () => {
+  const compressor = phx.frontend.useRootEntityState()
+  const total = phx.frontend.useRootEntityPrice()
+
+  return (
+    <Box component="section" aria-label="Price breakdown" sx={{ display: 'grid', fontFamily: ARDENT.font }}>
+      <Typography component="h2" sx={{ ...OVERLINE_SX, paddingBlockEnd: 1 }}>
+        Price breakdown
+      </Typography>
+
+      <Box component="ul" sx={{ margin: 0, padding: 0, listStyle: 'none' }}>
+        {compressor.$quoteLines.map(line => (
+          <Box component="li" key={line.key} sx={{ ...ROW_SX, borderBlockEnd: `1px solid ${ARDENT.line}` }}>
+            <Box component="div" sx={{ display: 'grid', minInlineSize: 0 }}>
+              <Typography
+                component="span"
+                sx={{ fontFamily: ARDENT.font, fontSize: 15, fontWeight: 500, color: ARDENT.ink }}
+              >
+                {line.label}
+              </Typography>
+              <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 13, color: ARDENT.steel }}>
+                {line.detail}
+              </Typography>
+            </Box>
+            <Typography
+              component="span"
+              sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.ink, fontVariantNumeric: 'tabular-nums' }}
+            >
+              {formatEuro(line.amount)}
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+
+      <Box component="div" sx={{ ...ROW_SX, paddingBlockStart: 1.5 }}>
+        <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.steel }}>
+          Subtotal
+        </Typography>
+        <Typography
+          component="span"
+          sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.ink, fontVariantNumeric: 'tabular-nums' }}
+        >
+          {formatEuro(compressor.$subtotal)}
+        </Typography>
+      </Box>
+      {compressor.$leadTimeSurcharge > 0 && (
+        <Box component="div" sx={ROW_SX}>
+          <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.steel }}>
+            Express delivery surcharge
+          </Typography>
+          <Typography
+            component="span"
+            sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.ink, fontVariantNumeric: 'tabular-nums' }}
+          >
+            {formatEuro(compressor.$leadTimeSurcharge)}
+          </Typography>
+        </Box>
+      )}
+
+      <Box
+        component="div"
+        sx={{ ...ROW_SX, marginBlockStart: 1, paddingBlockStart: 1.5, borderBlockStart: `2px solid ${ARDENT.ink}` }}
+      >
+        <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 17, fontWeight: 600, color: ARDENT.ink }}>
+          Total, ex works
+        </Typography>
+        <Typography
+          component="span"
+          sx={{
+            fontFamily: ARDENT.font,
+            fontSize: 26,
+            fontWeight: 700,
+            color: ARDENT.ink,
+            fontVariantNumeric: 'tabular-nums',
+          }}
+        >
+          {total}
+        </Typography>
+      </Box>
+      <Typography sx={{ fontFamily: ARDENT.font, fontSize: 14, color: ARDENT.steel, textAlign: 'end' }}>
+        Lead time {compressor.$leadTimeWeeks} weeks · prices excl. VAT
+      </Typography>
+    </Box>
+  )
+}
+```
+
+On a desktop the breakdown is a column beside the form. On a phone the total sits in the bottom bar and opens the breakdown as a sheet.
+
+## Request a quote
+
+The spec declares one finalize action. Its handler is project code registered with `phx.frontend.createPhoenixHandler`; in a deployed project it sends the configuration to the project's finalize webhook (see [Finalization](?path=/docs/phoenix-finalization--docs) and [Webhooks](?path=/docs/phoenix-webhooks--docs)), and a CPQ system behind that webhook prices and answers. Storybook has no server, so this handler waits and answers with a fixed engineer and a reference made from the configuration's id.
+
+```yaml
+components:
+  Compressor:
+    finalizeAction:
+      quote:
+        variant: primary
+        label: Request quote
+        title: Send the configuration to an application engineer for a firm quote
+        icon: PaperPlaneTilt
+        handler: requestQuote
+```
+
+```ts
+import { useCallback } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+import { setQuoteReceipt } from '../_shared/quote-receipt.js'
+
+const VALID_DAYS = 30
+
+// Stands in for Ardent's quote service. A deployed project sends the configuration to its finalize webhook here and
+// waits for the answer; this one answers after a moment with a fixed engineer and a reference made from the
+// configuration's id, then enters the `requested` navigation state.
+export default phx.frontend.createPhoenixHandler('requestQuote', () => {
+  const navigate = phx.frontend.useNavigate()
+  const configurationId = phx.frontend.useConfigurationId()
+  const total = phx.frontend.useRootEntityPrice()
+
+  return {
+    handler: useCallback(async () => {
+      await new Promise(resolve => setTimeout(resolve, 1600))
+
+      const validUntil = new Date(Date.now() + VALID_DAYS * 24 * 60 * 60 * 1000)
+
+      setQuoteReceipt({
+        reference: `AQ-${String(configurationId)
+          .replace(/[^a-z0-9]/gi, '')
+          .slice(-6)
+          .toUpperCase()}`,
+        engineer: 'Marta Kovács, application engineer',
+        validUntil: validUntil.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }),
+        total: total ?? '',
+      })
+      navigate('requested')
+    }, [configurationId, navigate, total]),
+  }
+})
+```
+
+A finalize action's `run()` resolves without a value, so the answer has no way back to the layout through the action. The handler keeps it in a small store of the project's own, which the review step reads:
+
+```ts
+import { useSyncExternalStore } from 'react'
+
+/** What the quote service answers when a quote is requested: the reference the engineer will quote against */
+export interface QuoteReceipt {
+  readonly reference: string
+  readonly engineer: string
+  readonly validUntil: string
+  readonly total: string
+}
+
+let receipt: QuoteReceipt | null = null
+const listeners = new Set<() => void>()
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener)
+
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+// A finalize action's `run()` resolves without a value, so the `requestQuote` handler keeps the service's answer here
+// for the layout to show. The project owns this store; the configurator does not persist it.
+export const setQuoteReceipt = (next: QuoteReceipt | null) => {
+  receipt = next
+  listeners.forEach(listener => listener())
+}
+
+export const useQuoteReceipt = () => {
+  return useSyncExternalStore(subscribe, () => receipt)
+}
+```
+
+`QuoteAction` runs the action from `phx.frontend.useFinalizeActions().primary`. While a warning holds, the action is `disabled` and `hints` lists the warnings; the button stays clickable and, instead of running, reveals the warnings of the contact fields the engineer has not visited yet. During the request the button shows a spinner and "Sending to an engineer…"; afterwards the review step shows the reference, the engineer, the validity and the quoted total, and **Back to summary** returns to the `review` state. A failed request would show the handler's error below the button. A viewer of a shared configuration sees no button.
+
+```tsx
+import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT } from '../_form/index.js'
+
+interface QuoteActionProps {
+  // Called instead of running the action while a warning blocks it, so the layout can show every warning
+  readonly onBlocked: () => void
+  // Leaves out the list of what blocks the request, for the phone's bottom bar
+  readonly compact: boolean
+}
+
+// The spec's `quote` finalize action. While any warning holds, `useFinalizeActions` reports the action `disabled` with
+// the warnings as `hints`: the button stays clickable and reveals them instead of running. A viewer sees no button.
+export const QuoteAction = ({ onBlocked, compact }: QuoteActionProps) => {
+  const { primary, hints } = phx.frontend.useFinalizeActions()
+  const { accessInfo } = phx.frontend.useAccessService()
+
+  if (primary === null || accessInfo.viewMode) {
+    return null
+  }
+
+  return (
+    <Box component="div" sx={{ display: 'grid', gap: 1.25 }}>
+      <Button
+        variant="contained"
+        disableElevation
+        disabled={primary.isPending}
+        aria-disabled={primary.disabled}
+        title={primary.title}
+        onClick={() => (primary.disabled ? onBlocked() : void primary.run())}
+        startIcon={primary.isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
+        sx={{
+          minBlockSize: 52,
+          borderRadius: 2,
+          bgcolor: primary.disabled ? ARDENT.steel : ARDENT.signal,
+          color: ARDENT.panel,
+          fontFamily: ARDENT.font,
+          fontSize: 17,
+          fontWeight: 600,
+          textTransform: 'none',
+          '&:hover': { bgcolor: primary.disabled ? ARDENT.steel : ARDENT.signalDark },
+          '&.Mui-disabled': { bgcolor: ARDENT.signal, color: ARDENT.panel, opacity: 0.7 },
+        }}
+      >
+        {primary.isPending ? 'Sending to an engineer…' : primary.label}
+      </Button>
+      {!compact && primary.disabled && hints && (
+        <Typography sx={{ fontFamily: ARDENT.font, fontSize: 14, lineHeight: 1.4, color: ARDENT.warning }}>
+          Resolve before requesting: {hints}
+        </Typography>
+      )}
+      {primary.error && (
+        <Alert severity="error">The quote could not be sent: {primary.error.message} Try again in a moment.</Alert>
+      )}
+    </Box>
+  )
+}
+```
+
+## On a phone
+
+The same layout in a frame 390 pixels wide. The stepper is one line with a segmented bar, the form scrolls, and the bottom bar holds the total, the lead time and the way on: **Next** on every step, **Request quote** on the review. Tapping the total opens the breakdown above the bar. Opened on its own from the sidebar, the **Phone** story sets Storybook's viewport to 390 × 844.
+
+## Test cases
+
+- The page opens on **Duty** with the RSV-75 frame selected for 9 m³/min at 10 bar. The breakdown lists the compressor, the refrigerant dryer, the 500 L receiver, the Essential plan and commissioning, a total of **€40,975.00** and a lead time of 6 weeks.
+- Typing 30 into the flow selects the RSV-250 frame and the total rises to €111,640.00; the stepper marks **Installation**, where a fixed-speed machine at this flow needs a 1,200 L receiver.
+- Choosing **13 bar** with a flow of 30 shows "At 13 bar the largest frame delivers 29.5 m³/min. Lower the flow or the pressure." under the flow and marks **Duty**; choosing 10 bar again removes it.
+- **Variable speed** adds the "Variable speed drive" line and clears the receiver mark.
+- On **Air treatment**, **Desiccant** makes **Pressure dew point** appear and shows the filtration warning under **Filter package**; **High efficiency** clears it; **Refrigerant** removes the dew point question again.
+- On **Installation**, **Water-cooled** makes **Heat recovery** appear; turning it on adds the "Heat recovery" line.
+- On **Service and delivery** with the RSV-250 frame, **Delivery** offers only standard delivery. With a flow of 12 it also offers express; choosing it adds the "Express delivery surcharge" and shortens the lead time.
+- Raising the flow to 25 while express is chosen shows "Express delivery covers stock frames up to 110 kW. …" under **Delivery**.
+- The **Review** step lists the conflict with **Go to Service and delivery**. **Request quote** reveals "Enter the company the quote is for." and "Enter a valid email address for the quote." under the empty contact fields and does not send.
+- **Go to Service and delivery** and **Standard** delivery clear the conflict: the mark leaves the stepper and the list leaves the review.
+- An email without a domain shows the email warning after leaving the field; a valid company and email clear both warnings and the text under **Request quote**.
+- **Request quote** shows a spinner and "Sending to an engineer…" for about two seconds, then "Quote requested" with a reference, the engineer, the date the price is valid until and the quoted total. **Back to summary** returns to the contact form with its values.
+- **Undo** reverts the last change and **Redo** repeats it.
+- In the **Phone** story, **Next** walks through the steps, the total opens and closes the breakdown, **Request quote** on the review reveals the contact warnings, and a filled form shows "Quote requested".
+- The browser console shows no errors, the page has no `canvas` element, and no model or texture is requested.
+
+## What this layout leaves out
+
+- **Read mode.** The fields are inert and **Request quote** is hidden while `phx.frontend.useAccessService().accessInfo.viewMode` is set, but the example ships no read template; [Custom Layout → Serve read mode](?path=/docs/layouts-custom-layout--docs#serve-read-mode) shows one.
+- **A quote that outlives the page.** The answer lives in the project's store for as long as the page; a configuration reopened in the `requested` state shows "Quote requested" without the details. A deployed project keeps the answer where its webhook stores it.
+- **The built-in arrangement.** Header, sidebar, footer, tabs 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
+
+- [Fenwick Window](?path=/docs/layouts-gallery-fenwick-window--docs) draws the configuration as a shop drawing, and [Sunfold Solar](?path=/docs/layouts-gallery-sunfold-solar--docs) shows it as a dashboard; neither mounts a canvas either.
+- [Custom Layout](?path=/docs/layouts-custom-layout--docs) explains a project layout step by step.
+- [Configurator Interface → Hooks for a Project Layout](?path=/docs/phoenix-configurator-interface--docs#hooks-for-a-project-layout) lists the hooks used here.
+- [Domain Model → Invariants](?path=/docs/phoenix-domain-model--docs#invariants) and [Domain Model → Expressions](?path=/docs/phoenix-domain-model--docs#expressions) describe the rules and the computed values.
+- [Finalization](?path=/docs/phoenix-finalization--docs) describes the server side of a finalize action.
+
+## 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:
+      - Compressor
+    aliases:
+      RootEntity:
+        - Compressor
+    commonTypes:
+      Pressure:
+        enum:
+          - Bar7
+          - Bar10
+          - Bar13
+      DutyCycle:
+        enum:
+          - Intermittent
+          - Continuous
+      Drive:
+        enum:
+          - FixedSpeed
+          - VariableSpeed
+      Dryer:
+        enum:
+          - None
+          - Refrigerant
+          - Desiccant
+      DewPoint:
+        enum:
+          - Minus40
+          - Minus70
+      Filtration:
+        enum:
+          - General
+          - HighEfficiency
+          - OilVapour
+      Cooling:
+        enum:
+          - Air
+          - Water
+      Receiver:
+        enum:
+          - None
+          - Litres500
+          - Litres1000
+          - Litres2000
+      Enclosure:
+        enum:
+          - Standard
+          - LowNoise
+      Supply:
+        enum:
+          - V400Hz50
+          - V480Hz60
+      ServicePlan:
+        enum:
+          - None
+          - Essential
+          - TotalCare
+      Delivery:
+        enum:
+          - Standard
+          - Express
+    shapes:
+      Compressor:
+        flow:
+          type: number
+        pressure:
+          $ref: '#/model/latest/commonTypes/Pressure'
+        dutyCycle:
+          $ref: '#/model/latest/commonTypes/DutyCycle'
+        drive:
+          $ref: '#/model/latest/commonTypes/Drive'
+        dryer:
+          $ref: '#/model/latest/commonTypes/Dryer'
+        dewPoint:
+          $ref: '#/model/latest/commonTypes/DewPoint'
+        filtration:
+          $ref: '#/model/latest/commonTypes/Filtration'
+        cooling:
+          $ref: '#/model/latest/commonTypes/Cooling'
+        heatRecovery:
+          type: boolean
+        receiver:
+          $ref: '#/model/latest/commonTypes/Receiver'
+        enclosure:
+          $ref: '#/model/latest/commonTypes/Enclosure'
+        supply:
+          $ref: '#/model/latest/commonTypes/Supply'
+        servicePlan:
+          $ref: '#/model/latest/commonTypes/ServicePlan'
+        commissioning:
+          type: boolean
+        delivery:
+          $ref: '#/model/latest/commonTypes/Delivery'
+        company:
+          type: string
+        email:
+          type: string
+        projectReference:
+          type: string
+
+presets:
+  - rootEntityType: Compressor
+    initialDomainEntities:
+      - id: Compressor-1
+        type: Compressor
+        flow: 9
+        pressure: Bar10
+        dutyCycle: Intermittent
+        drive: FixedSpeed
+        dryer: Refrigerant
+        dewPoint: Minus40
+        filtration: General
+        cooling: Air
+        heatRecovery: false
+        receiver: Litres500
+        enclosure: Standard
+        supply: V400Hz50
+        servicePlan: Essential
+        commissioning: true
+        delivery: Standard
+        company: ''
+        email: ''
+        projectReference: ''
+
+navigationStates:
+  - duty
+  - treatment
+  - installation
+  - service
+  - review
+  - requested
+
+# The quote's price, lead time and summary: declared here, computed in src/expressions/compressor.ts
+expressions:
+  Compressor:
+    $maxFlow:
+      type: number
+    $frameName:
+      type: string
+    $frameKw:
+      type: number
+    $minReceiverLitres:
+      type: number
+    $leadTimeWeeks:
+      type: number
+    $quoteLines:
+      type: array
+      items:
+        type: object
+        properties:
+          key:
+            type: string
+          label:
+            type: string
+          detail:
+            type: string
+          amount:
+            type: number
+        required:
+          - key
+          - label
+          - detail
+          - amount
+        additionalProperties: false
+    $subtotal:
+      type: number
+    $leadTimeSurcharge:
+      type: number
+    $total:
+      type: number
+    $specSheet:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          value:
+            type: string
+        required:
+          - label
+          - value
+        additionalProperties: false
+
+# Every rule is a warning: the change is kept, the layout shows the message at the field, and finalizing waits
+# until it is resolved
+invariants:
+  Compressor:
+    flowRange:
+      types:
+        - flowAboveRange
+    desiccantNeedsFiltration:
+      type: desiccantNeedsFiltration
+      severity: warning
+      message: A desiccant dryer needs high-efficiency or oil-vapour filtration upstream, or oil aerosol spoils the desiccant.
+    receiverSize:
+      types:
+        - receiverTooSmall
+    expressUnavailable:
+      type: expressUnavailable
+      severity: warning
+      message: Express delivery covers stock frames up to 110 kW. Choose standard delivery for this frame.
+    companyMissing:
+      type: companyMissing
+      severity: warning
+      message: Enter the company the quote is for.
+    emailInvalid:
+      type: emailInvalid
+      severity: warning
+      message: Enter a valid email address for the quote.
+
+components:
+  Compressor:
+    price:
+      main:
+        price:
+          $read: $total
+        currency: EUR
+    navigationSteps:
+      main:
+        steps:
+          - label: Duty
+            navigationStates:
+              - duty
+          - label: Air treatment
+            navigationStates:
+              - treatment
+          - label: Installation
+            navigationStates:
+              - installation
+          - label: Service and delivery
+            navigationStates:
+              - service
+          - label: Review
+            navigationStates:
+              - review
+              - requested
+    finalizeAction:
+      quote:
+        variant: primary
+        label: Request quote
+        title: Send the configuration to an application engineer for a firm quote
+        icon: PaperPlaneTilt
+        handler: requestQuote
+
+    # Duty
+    genericDimension:
+      flow:
+        value:
+          $bind: flow
+        min: 2
+        max: 40
+        unit: m³/min
+        decimalPlaces: 1
+    attributeSelection:
+      pressure:
+        value:
+          $bind: pressure
+        options:
+          - label: 7.5 bar
+            description: Workshops and general tools
+            value: Bar7
+          - label: 10 bar
+            description: Most production plants
+            value: Bar10
+          - label: 13 bar
+            description: Blow moulding pre-blow, long networks
+            value: Bar13
+      dutyCycle:
+        value:
+          $bind: dutyCycle
+        options:
+          - label: Intermittent
+            description: Up to 60 % load, one or two shifts
+            value: Intermittent
+          - label: Continuous
+            description: Around the clock, heavy-duty package
+            value: Continuous
+      drive:
+        value:
+          $bind: drive
+        options:
+          - label: Fixed speed
+            description: Load and unload control, lowest first cost
+            value: FixedSpeed
+          - label: Variable speed
+            description: Follows demand, about 30 % less energy
+            value: VariableSpeed
+
+      # Air treatment
+      dryer:
+        value:
+          $bind: dryer
+        options:
+          - label: No dryer
+            description: Wet air, for tools that tolerate it
+            value: None
+          - label: Refrigerant
+            description: Pressure dew point +3 °C
+            value: Refrigerant
+          - label: Desiccant
+            description: Pressure dew point below freezing
+            value: Desiccant
+      dewPoint:
+        value:
+          $bind: dewPoint
+        options:
+          - label: −40 °C
+            description: Outdoor lines, food and pharma
+            value: Minus40
+          - label: −70 °C
+            description: Electronics and laboratories
+            value: Minus70
+        $filter:
+          active:
+            $eval: self.dryer === 'Desiccant'
+      filtration:
+        value:
+          $bind: filtration
+        options:
+          - label: General purpose
+            description: Removes particles down to 1 µm
+            value: General
+          - label: High efficiency
+            description: Oil aerosol down to 0.01 mg/m³
+            value: HighEfficiency
+          - label: Oil vapour
+            description: Adds activated carbon, 0.003 mg/m³
+            value: OilVapour
+
+      # Installation
+      cooling:
+        value:
+          $bind: cooling
+        options:
+          - label: Air-cooled
+            description: Needs ventilation in the plant room
+            value: Air
+          - label: Water-cooled
+            description: For hot rooms and heat recovery
+            value: Water
+      receiver:
+        value:
+          $bind: receiver
+        options:
+          - label: No receiver
+            value: None
+          - label: 500 L
+            value: Litres500
+          - label: 1,000 L
+            value: Litres1000
+          - label: 2,000 L
+            value: Litres2000
+      enclosure:
+        value:
+          $bind: enclosure
+        options:
+          - label: Standard canopy
+            description: About 72 dB(A) at 1 m
+            value: Standard
+          - label: Low-noise canopy
+            description: About 66 dB(A) at 1 m
+            value: LowNoise
+      supply:
+        value:
+          $bind: supply
+        options:
+          - label: 400 V, 50 Hz
+            value: V400Hz50
+          - label: 480 V, 60 Hz
+            value: V480Hz60
+
+      # Service and delivery
+      servicePlan:
+        value:
+          $bind: servicePlan
+        options:
+          - label: No plan
+            description: Service on call
+            value: None
+          - label: Essential, 3 years
+            description: Scheduled service and parts
+            value: Essential
+          - label: Total care, 5 years
+            description: Parts, labour and an extended warranty
+            value: TotalCare
+      delivery:
+        value:
+          $bind: delivery
+        options:
+          $read: $deliveryOptions
+    attributeSwitch:
+      heatRecovery:
+        value:
+          $bind: heatRecovery
+        $filter:
+          active:
+            $eval: self.cooling === 'Water'
+      commissioning:
+        value:
+          $bind: commissioning
+    textValue:
+      company:
+        value:
+          $bind: company
+      email:
+        value:
+          $bind: email
+      projectReference:
+        value:
+          $bind: projectReference
+```
+
+### ./src/\_form/ChoiceField.tsx
+
+```tsx
+import { Box, ButtonBase, Typography } from '@mui/material'
+import type { KeyboardEvent } from 'react'
+
+import { attributeSelectionComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { FieldShell } from './FieldShell.js'
+import { ARDENT } from './tokens.js'
+
+// Arrow keys move the selection between the cards, as in a native radio group
+const ARROW_STEPS: Readonly<Record<string, number | undefined>> = {
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1,
+}
+
+interface ChoiceFieldProps {
+  readonly instanceName: string
+  readonly label: string
+  readonly hint?: string
+  readonly warningTypes?: readonly string[]
+  readonly readOnly: boolean
+  // The narrowest a card gets before the cards wrap onto another row
+  readonly minCardWidth?: number
+}
+
+const ChoiceCards = ({ instanceName, label, hint, warningTypes, readOnly, minCardWidth = 150 }: ChoiceFieldProps) => {
+  const resolve = phx.frontend.useResolveLocalizable()
+  const compressorId = phx.frontend.useRootEntityId()
+  const { value, options } = phx.frontend.useAttributeSelection(compressorId, instanceName)
+  // An option a `fixable` or `fatal` invariant rules out is `disabled`, with the reason in its `hint`
+  const optionHint = options.find(option => option.disabled && option.hint)?.hint
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>, index: number) => {
+    const step = ARROW_STEPS[event.key]
+
+    if (step === undefined) {
+      return
+    }
+
+    event.preventDefault()
+    const next = (index + step + options.length) % options.length
+    options[next]?.onSelect()
+    event.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role="radio"]')[next]?.focus()
+  }
+
+  return (
+    <FieldShell id={`ardent-${instanceName}`} label={label} hint={optionHint ?? hint} warningTypes={warningTypes}>
+      <Box
+        component="div"
+        role="radiogroup"
+        aria-labelledby={`ardent-${instanceName}-label`}
+        sx={{ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(${minCardWidth}px, 1fr))`, gap: 1.25 }}
+      >
+        {options.map((option, index) => {
+          const isSelected = option.value === value
+          const description = resolve(option.description)
+
+          return (
+            <ButtonBase
+              key={String(option.value)}
+              role="radio"
+              aria-checked={isSelected}
+              aria-disabled={option.disabled}
+              tabIndex={isSelected ? 0 : -1}
+              disabled={readOnly && !isSelected}
+              onClick={readOnly ? undefined : option.onSelect}
+              onKeyDown={readOnly ? undefined : event => handleKeyDown(event, index)}
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: 'auto 1fr',
+                alignItems: 'start',
+                columnGap: 1.25,
+                rowGap: 0.25,
+                padding: 1.5,
+                textAlign: 'start',
+                borderRadius: 2,
+                border: `1px solid ${isSelected ? ARDENT.signal : ARDENT.line}`,
+                boxShadow: isSelected ? `inset 0 0 0 1px ${ARDENT.signal}` : 'none',
+                bgcolor: isSelected ? ARDENT.signalTint : ARDENT.panel,
+                fontFamily: ARDENT.font,
+                opacity: option.disabled ? 0.45 : 1,
+                transition: 'border-color 140ms, background-color 140ms',
+                '&:hover': { borderColor: isSelected ? ARDENT.signal : ARDENT.steel },
+                '&.Mui-focusVisible': { outline: `2px solid ${ARDENT.navy}`, outlineOffset: 2 },
+                '&.Mui-disabled': { opacity: 0.45 },
+              }}
+            >
+              {/* The radio mark: a ring, filled with a dot when the card is chosen */}
+              <Box
+                component="span"
+                aria-hidden
+                sx={{
+                  gridRow: 'span 2',
+                  marginBlockStart: 0.25,
+                  inlineSize: 18,
+                  blockSize: 18,
+                  borderRadius: '50%',
+                  border: `2px solid ${isSelected ? ARDENT.signal : ARDENT.steel}`,
+                  boxShadow: isSelected ? `inset 0 0 0 3px ${ARDENT.signalTint}` : 'none',
+                  bgcolor: isSelected ? ARDENT.signal : 'transparent',
+                }}
+              />
+              <Typography
+                component="span"
+                sx={{ fontFamily: ARDENT.font, fontSize: 15, fontWeight: 600, color: ARDENT.ink }}
+              >
+                {resolve(option.title)}
+              </Typography>
+              {description && (
+                <Typography
+                  component="span"
+                  sx={{ fontFamily: ARDENT.font, fontSize: 13, lineHeight: 1.35, color: ARDENT.steel }}
+                >
+                  {description}
+                </Typography>
+              )}
+            </ButtonBase>
+          )
+        })}
+      </Box>
+    </FieldShell>
+  )
+}
+
+// One `attributeSelection` of the spec as a group of cards. The field exists only while the spec's component is
+// active: a `$filter` in the spec decides when a question is asked, and the layout follows it. The control hook throws
+// for an inactive component, so the cards mount only after `useComponent` has found it. An option that a `fixable`
+// invariant rules out is faded with its hint below the cards; it stays clickable, the change is rejected and the
+// built-in snackbar says why.
+export const ChoiceField = (props: ChoiceFieldProps) => {
+  const compressorId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: compressorId,
+    componentType: attributeSelectionComponent,
+    instanceName: props.instanceName,
+  })
+
+  return component === null ? null : <ChoiceCards {...props} />
+}
+```
+
+### ./src/\_form/FieldShell.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+import type { ReactNode } from 'react'
+
+import { ARDENT } from './tokens.js'
+import { useWarnings } from './use-warnings.js'
+
+const WARNING_ICON = 'M12 3 2 21h20L12 3Zm0 6v5m0 3.5v.5'
+
+export interface FieldShellProps {
+  readonly id: string
+  readonly label: string
+  // Help shown below the input while the field has no warning
+  readonly hint?: string
+  // The invariant types whose warning belongs to this field
+  readonly warningTypes?: readonly string[]
+  // Hides the warning until the customer has had a chance to fill the field in
+  readonly showWarning?: boolean
+  readonly aside?: ReactNode
+  readonly children: ReactNode
+}
+
+// A field's frame: the label, the input, and below it either the help text or the warning of an invariant that the
+// field can resolve. The warning comes from the committed configuration, so it appears and disappears with the rule.
+export const FieldShell = ({
+  id,
+  label,
+  hint,
+  warningTypes = [],
+  showWarning = true,
+  aside,
+  children,
+}: FieldShellProps) => {
+  const warning = useWarnings().find(candidate => warningTypes.includes(candidate.type))
+  const visibleWarning = showWarning ? warning : undefined
+
+  return (
+    <Box
+      component="div"
+      role="group"
+      aria-labelledby={`${id}-label`}
+      sx={{
+        display: 'grid',
+        gap: 1.25,
+        animation: 'ardent-field-in 220ms ease-out',
+        '@keyframes ardent-field-in': {
+          from: { opacity: 0, transform: 'translateY(-4px)' },
+          to: { opacity: 1, transform: 'none' },
+        },
+      }}
+    >
+      <Box component="div" sx={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 2 }}>
+        <Typography
+          id={`${id}-label`}
+          component="h4"
+          sx={{ fontFamily: ARDENT.font, fontSize: 16, fontWeight: 600, color: ARDENT.ink }}
+        >
+          {label}
+        </Typography>
+        {aside}
+      </Box>
+      {children}
+      {visibleWarning ? (
+        <Box
+          component="p"
+          role="alert"
+          sx={{
+            display: 'flex',
+            gap: 1,
+            alignItems: 'flex-start',
+            margin: 0,
+            paddingBlock: 1,
+            paddingInline: 1.5,
+            borderRadius: 1.5,
+            bgcolor: ARDENT.warningTint,
+            color: ARDENT.warning,
+            fontFamily: ARDENT.font,
+            fontSize: 14,
+            lineHeight: 1.4,
+          }}
+        >
+          <Box component="svg" viewBox="0 0 24 24" aria-hidden sx={{ inlineSize: 18, blockSize: 18, flex: 'none' }}>
+            <path d={WARNING_ICON} fill="none" stroke="currentColor" strokeWidth={2} strokeLinejoin="round" />
+          </Box>
+          {visibleWarning.text}
+        </Box>
+      ) : (
+        hint && <Typography sx={{ fontFamily: ARDENT.font, fontSize: 14, color: ARDENT.steel }}>{hint}</Typography>
+      )}
+    </Box>
+  )
+}
+```
+
+### ./src/\_form/NumberField.tsx
+
+```tsx
+import { Box, InputBase, Slider, Typography } from '@mui/material'
+import { useEffect, useState } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+import { FieldShell } from './FieldShell.js'
+import { ARDENT } from './tokens.js'
+
+interface NumberFieldProps {
+  readonly instanceName: string
+  readonly label: string
+  readonly hint?: string
+  readonly warningTypes?: readonly string[]
+  readonly readOnly: boolean
+  readonly step: number
+}
+
+// One `genericDimension` of the spec as a slider with a typed value beside it. Dragging stages each value, so the
+// price follows the thumb, and letting go commits it; a typed value is committed on Enter or when the input loses
+// focus. The slider's range is the component's `min` and `max`, which the spec can read from expressions.
+export const NumberField = ({ instanceName, label, hint, warningTypes, readOnly, step }: NumberFieldProps) => {
+  const compressorId = phx.frontend.useRootEntityId()
+  const dimension = phx.frontend.useGenericDimension(compressorId, instanceName)
+  const [draft, setDraft] = useState(String(dimension.value))
+  const min = dimension.min ?? 0
+  const max = dimension.max ?? 100
+
+  useEffect(() => {
+    setDraft(String(dimension.value))
+  }, [dimension.value])
+
+  const commitDraft = () => {
+    const parsed = Number(draft.replace(',', '.'))
+
+    if (!Number.isFinite(parsed)) {
+      setDraft(String(dimension.value))
+
+      return
+    }
+
+    dimension.update(parsed)
+    dimension.resolve()
+  }
+
+  return (
+    <FieldShell
+      id={`ardent-${instanceName}`}
+      label={label}
+      hint={hint}
+      warningTypes={warningTypes}
+      aside={
+        <Box
+          component="label"
+          sx={{
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: 0.75,
+            paddingInline: 1.25,
+            paddingBlock: 0.5,
+            borderRadius: 1.5,
+            border: `1px solid ${ARDENT.line}`,
+            bgcolor: ARDENT.panel,
+            '&:focus-within': { borderColor: ARDENT.navy },
+          }}
+        >
+          <InputBase
+            value={draft}
+            disabled={readOnly}
+            onChange={event => setDraft(event.target.value)}
+            onBlur={commitDraft}
+            onKeyDown={event => {
+              if (event.key === 'Enter') {
+                commitDraft()
+              }
+            }}
+            inputProps={{ inputMode: 'decimal', 'aria-label': `${label}, ${dimension.unit}` }}
+            sx={{
+              inlineSize: 56,
+              fontFamily: ARDENT.font,
+              fontSize: 20,
+              fontWeight: 600,
+              color: ARDENT.ink,
+              '& input': { padding: 0, textAlign: 'end' },
+            }}
+          />
+          <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 14, color: ARDENT.steel }}>
+            {dimension.unit}
+          </Typography>
+        </Box>
+      }
+    >
+      <Box component="div" sx={{ paddingInline: 1.25 }}>
+        <Slider
+          value={Math.min(dimension.value, max)}
+          min={min}
+          max={max}
+          step={step}
+          disabled={readOnly}
+          onChange={(_, value) => dimension.update(Array.isArray(value) ? (value[0] ?? min) : value)}
+          onChangeCommitted={() => dimension.resolve()}
+          marks={[
+            { value: min, label: `${min}` },
+            { value: max, label: `${max}` },
+          ]}
+          slotProps={{ input: { 'aria-label': label } }}
+          sx={{
+            color: ARDENT.signal,
+            blockSize: 6,
+            '& .MuiSlider-rail': { bgcolor: ARDENT.line, opacity: 1 },
+            '& .MuiSlider-thumb': {
+              inlineSize: 22,
+              blockSize: 22,
+              bgcolor: ARDENT.panel,
+              border: `3px solid ${ARDENT.signal}`,
+            },
+            '& .MuiSlider-markLabel': { fontFamily: ARDENT.font, fontSize: 12, color: ARDENT.steel },
+            '& .MuiSlider-mark': { display: 'none' },
+          }}
+        />
+      </Box>
+    </FieldShell>
+  )
+}
+```
+
+### ./src/\_form/SwitchField.tsx
+
+```tsx
+import { Box, Switch, Typography } from '@mui/material'
+
+import { attributeSwitchComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT } from './tokens.js'
+
+interface SwitchFieldProps {
+  readonly instanceName: string
+  readonly label: string
+  readonly description: string
+  readonly readOnly: boolean
+}
+
+const SwitchRow = ({ instanceName, label, description, readOnly }: SwitchFieldProps) => {
+  const compressorId = phx.frontend.useRootEntityId()
+  const toggle = phx.frontend.useAttributeSwitch(compressorId, instanceName)
+  const labelId = `ardent-${instanceName}-label`
+
+  return (
+    <Box
+      component="div"
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 2,
+        padding: 1.5,
+        borderRadius: 2,
+        border: `1px solid ${ARDENT.line}`,
+        animation: 'ardent-switch-in 220ms ease-out',
+        '@keyframes ardent-switch-in': { from: { opacity: 0 }, to: { opacity: 1 } },
+      }}
+    >
+      <Box component="div" sx={{ display: 'grid', gap: 0.25 }}>
+        <Typography id={labelId} sx={{ fontFamily: ARDENT.font, fontSize: 16, fontWeight: 600, color: ARDENT.ink }}>
+          {label}
+        </Typography>
+        <Typography sx={{ fontFamily: ARDENT.font, fontSize: 14, color: ARDENT.steel }}>{description}</Typography>
+      </Box>
+      <Switch
+        checked={toggle.state.value}
+        disabled={readOnly || toggle.disabled}
+        onChange={toggle.onChange}
+        inputProps={{ 'aria-labelledby': labelId }}
+        sx={{
+          '& .MuiSwitch-switchBase.Mui-checked': { color: ARDENT.panel },
+          '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: ARDENT.signal, opacity: 1 },
+          '& .MuiSwitch-track': { bgcolor: ARDENT.steel, opacity: 0.5 },
+        }}
+      />
+    </Box>
+  )
+}
+
+// One `attributeSwitch` of the spec as a labelled switch, shown only while the spec's component is active
+export const SwitchField = (props: SwitchFieldProps) => {
+  const compressorId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: compressorId,
+    componentType: attributeSwitchComponent,
+    instanceName: props.instanceName,
+  })
+
+  return component === null ? null : <SwitchRow {...props} />
+}
+```
+
+### ./src/\_form/TextInputField.tsx
+
+```tsx
+import { InputBase } from '@mui/material'
+import { useState } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+import { FieldShell } from './FieldShell.js'
+import { ARDENT } from './tokens.js'
+
+interface TextInputFieldProps {
+  readonly instanceName: string
+  readonly label: string
+  readonly hint?: string
+  readonly warningTypes?: readonly string[]
+  readonly readOnly: boolean
+  readonly type?: 'text' | 'email'
+  readonly autoComplete?: string
+  // Shows the field's warning before the customer has left the field, after a request was attempted
+  readonly revealWarning: boolean
+}
+
+// One `textValue` of the spec as a text input. Typing stages the text and leaving the field commits it, so the
+// invariants judge the committed text; their warning is shown once the customer has left the field.
+export const TextInputField = ({
+  instanceName,
+  label,
+  hint,
+  warningTypes,
+  readOnly,
+  type = 'text',
+  autoComplete,
+  revealWarning,
+}: TextInputFieldProps) => {
+  const compressorId = phx.frontend.useRootEntityId()
+  const text = phx.frontend.useTextValue(compressorId, instanceName)
+  const [touched, setTouched] = useState(false)
+
+  return (
+    <FieldShell
+      id={`ardent-${instanceName}`}
+      label={label}
+      hint={hint}
+      warningTypes={warningTypes}
+      showWarning={touched || revealWarning}
+    >
+      <InputBase
+        value={text.value}
+        type={type}
+        disabled={readOnly}
+        autoComplete={autoComplete}
+        onChange={event => text.update(event, event.target.value)}
+        onBlur={() => {
+          text.resolve()
+          setTouched(true)
+        }}
+        inputProps={{ 'aria-labelledby': `ardent-${instanceName}-label` }}
+        sx={{
+          paddingInline: 1.5,
+          paddingBlock: 1,
+          borderRadius: 2,
+          border: `1px solid ${ARDENT.line}`,
+          bgcolor: ARDENT.panel,
+          fontFamily: ARDENT.font,
+          fontSize: 16,
+          color: ARDENT.ink,
+          '&.Mui-focused': { borderColor: ARDENT.navy, boxShadow: `0 0 0 3px ${ARDENT.page}` },
+        }}
+      />
+    </FieldShell>
+  )
+}
+```
+
+### ./src/\_form/tokens.ts
+
+```ts
+// Ardent Air's palette and type: a navy shell, white work surfaces and the signal orange of the machines' doors.
+// Barlow is the brand's typeface; the stack falls back to system fonts where it is not loaded.
+export const ARDENT = {
+  navy: '#0d1b2e',
+  navySoft: '#1b2c45',
+  ink: '#15202e',
+  steel: '#5a6778',
+  line: '#dde2e9',
+  page: '#f1f3f6',
+  panel: '#ffffff',
+  signal: '#f0641a',
+  signalDark: '#c84f0e',
+  signalTint: '#fff1e8',
+  warning: '#9a4b00',
+  warningTint: '#fff6e0',
+  success: '#17703f',
+  successTint: '#e9f6ee',
+  font: "'Barlow', 'Helvetica Neue', Arial, sans-serif",
+} as const
+
+// Small capitals with wide tracking, for section labels and table headings
+export const OVERLINE_SX = {
+  fontFamily: ARDENT.font,
+  fontSize: 12,
+  fontWeight: 500,
+  letterSpacing: '0.14em',
+  textTransform: 'uppercase',
+  color: ARDENT.steel,
+} as const
+```
+
+### ./src/\_form/use-warnings.ts
+
+```ts
+import { useMemo } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+
+export interface Warning {
+  readonly type: string
+  readonly text: string
+}
+
+// The warnings of the committed configuration with their text resolved. A `warning` invariant keeps the change, so its
+// violation stays in the committed state until the customer resolves it, and finalizing waits for that.
+// `useFinalizeViolations` lists them; `useStateValidity` holds the same list, but on `phx.frontend` it is typed as the
+// validity value instead of a hook, so calling it does not type-check.
+export const useWarnings = (): readonly Warning[] => {
+  const { violations } = phx.frontend.useFinalizeViolations()
+  const resolve = phx.frontend.useResolveLocalizable()
+
+  return useMemo(() => {
+    return (violations ?? []).map(({ violation }) => ({ type: violation.type, text: resolve(violation.message) ?? '' }))
+  }, [violations, resolve])
+}
+```
+
+### ./src/\_shared/DesktopPage.tsx
+
+```tsx
+import { Box, Button, IconButton, Tooltip, Typography } from '@mui/material'
+import { useEffect, useRef, useState } from 'react'
+
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT, useWarnings } from '../_form/index.js'
+import { PriceBreakdown } from './PriceBreakdown.js'
+import { QuoteAction } from './QuoteAction.js'
+import { StepForm } from './StepForm.js'
+import { StepHeader } from './StepHeader.js'
+import { STEP_WARNINGS } from './step-warnings.js'
+
+const UNDO_ICON = 'M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11'
+const REDO_ICON = 'M15 14l5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13'
+const PANEL_WIDTH = 400
+
+interface IconProps {
+  readonly path: string
+}
+
+const Icon = ({ path }: IconProps) => {
+  return (
+    <Box component="svg" viewBox="0 0 24 24" aria-hidden sx={{ inlineSize: 20, blockSize: 20 }}>
+      <path d={path} fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    </Box>
+  )
+}
+
+// The desktop page: the brand bar with undo and redo, the stepper, the active step's form, and a column with the live
+// price breakdown and the way on. The form scrolls; the column stays.
+export const DesktopPage = () => {
+  const { accessInfo } = phx.frontend.useAccessService()
+  const { canUndo, canRedo, undo, redo } = phx.frontend.useUndoRedo()
+  const { activeStep, isLast, canGoPrevious, canGoNext, steps, next, previous, goTo } = phx.frontend.useStepNavigation()
+  const navigationState = phx.frontend.useActiveNavigationState()
+  const compressor = phx.frontend.useRootEntityState()
+  const warnings = useWarnings()
+  const [revealWarnings, setRevealWarnings] = useState(false)
+  const formRef = useRef<HTMLElement>(null)
+
+  // Each step starts at its top, as a new page would
+  useEffect(() => {
+    formRef.current?.scrollTo({ top: 0 })
+  }, [navigationState])
+  const readOnly = accessInfo.viewMode
+  const nextStep = steps[(activeStep?.index ?? -1) + 1]
+  const conflictCount = warnings.filter(warning =>
+    Object.values(STEP_WARNINGS).some(types => types.includes(warning.type))
+  ).length
+
+  return (
+    <Box
+      component="div"
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        display: 'grid',
+        gridTemplateRows: 'auto auto minmax(0, 1fr)',
+        gridTemplateColumns: `minmax(0, 1fr) ${PANEL_WIDTH}px`,
+        bgcolor: ARDENT.page,
+        fontFamily: ARDENT.font,
+      }}
+    >
+      <Box
+        component="header"
+        sx={{
+          gridColumn: '1 / -1',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 3,
+          paddingInline: 4,
+          blockSize: 64,
+          bgcolor: ARDENT.navy,
+          color: ARDENT.panel,
+        }}
+      >
+        <Typography sx={{ fontFamily: ARDENT.font, fontSize: 22, fontWeight: 700, letterSpacing: '0.12em' }}>
+          ARDENT
+          <Box component="span" sx={{ color: ARDENT.signal }}>
+            {' '}
+            AIR
+          </Box>
+        </Typography>
+        <Box component="span" aria-hidden sx={{ inlineSize: 1, blockSize: 28, bgcolor: ARDENT.navySoft }} />
+        <Typography component="h1" sx={{ fontFamily: ARDENT.font, fontSize: 18, fontWeight: 500 }}>
+          Compressor quote
+        </Typography>
+        <Typography sx={{ fontFamily: ARDENT.font, fontSize: 15, color: '#9fb0c6' }}>
+          {compressor.$frameName} · {compressor.$frameKw} kW
+        </Typography>
+        <Box component="div" sx={{ marginInlineStart: 'auto', display: 'flex', gap: 0.5 }}>
+          <Tooltip title="Undo">
+            <span>
+              <IconButton
+                aria-label="Undo"
+                disabled={!canUndo || readOnly}
+                onClick={undo}
+                sx={{ color: ARDENT.panel, '&.Mui-disabled': { color: ARDENT.navySoft } }}
+              >
+                <Icon path={UNDO_ICON} />
+              </IconButton>
+            </span>
+          </Tooltip>
+          <Tooltip title="Redo">
+            <span>
+              <IconButton
+                aria-label="Redo"
+                disabled={!canRedo || readOnly}
+                onClick={redo}
+                sx={{ color: ARDENT.panel, '&.Mui-disabled': { color: ARDENT.navySoft } }}
+              >
+                <Icon path={REDO_ICON} />
+              </IconButton>
+            </span>
+          </Tooltip>
+        </Box>
+      </Box>
+
+      <Box
+        component="div"
+        sx={{ gridColumn: '1 / -1', bgcolor: ARDENT.panel, borderBlockEnd: `1px solid ${ARDENT.line}` }}
+      >
+        <StepHeader compact={false} />
+      </Box>
+
+      <Box component="main" ref={formRef} sx={{ overflowY: 'auto', minBlockSize: 0 }}>
+        <Box component="div" sx={{ display: 'grid', gap: 3, maxInlineSize: 820, marginInline: 'auto', padding: 4 }}>
+          <Box component="div" sx={{ display: 'grid', gap: 0.5 }}>
+            <Typography sx={{ fontFamily: ARDENT.font, fontSize: 14, color: ARDENT.steel }}>
+              Step {(activeStep?.index ?? 0) + 1} of {steps.length}
+            </Typography>
+            <Typography
+              component="h2"
+              sx={{ fontFamily: ARDENT.font, fontSize: 32, fontWeight: 700, color: ARDENT.ink }}
+            >
+              {activeStep?.label}
+            </Typography>
+          </Box>
+          <StepForm readOnly={readOnly} revealWarnings={revealWarnings} />
+          <Box
+            component="nav"
+            aria-label="Step navigation"
+            sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}
+          >
+            <Button
+              disabled={!canGoPrevious}
+              onClick={previous}
+              sx={{
+                color: ARDENT.ink,
+                fontFamily: ARDENT.font,
+                fontSize: 16,
+                textTransform: 'none',
+                visibility: canGoPrevious ? 'visible' : 'hidden',
+              }}
+            >
+              ← Back
+            </Button>
+            {canGoNext && !isLast && (
+              <Button
+                variant="contained"
+                disableElevation
+                onClick={next}
+                sx={{
+                  borderRadius: 2,
+                  paddingInline: 3,
+                  bgcolor: ARDENT.navy,
+                  fontFamily: ARDENT.font,
+                  fontSize: 16,
+                  fontWeight: 600,
+                  textTransform: 'none',
+                  '&:hover': { bgcolor: ARDENT.ink },
+                }}
+              >
+                Next: {nextStep?.label}
+              </Button>
+            )}
+          </Box>
+        </Box>
+      </Box>
+
+      <Box
+        component="aside"
+        aria-label="Quote"
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 3,
+          minBlockSize: 0,
+          overflowY: 'auto',
+          padding: 4,
+          bgcolor: ARDENT.panel,
+          borderInlineStart: `1px solid ${ARDENT.line}`,
+        }}
+      >
+        <PriceBreakdown />
+        {isLast ? (
+          navigationState !== 'requested' && <QuoteAction onBlocked={() => setRevealWarnings(true)} compact={false} />
+        ) : (
+          <Box component="div" sx={{ display: 'grid', gap: 1 }}>
+            {conflictCount > 0 && (
+              <Typography sx={{ fontFamily: ARDENT.font, fontSize: 14, color: ARDENT.warning }}>
+                {conflictCount === 1 ? 'One choice needs attention' : `${conflictCount} choices need attention`} before
+                the quote can be requested.
+              </Typography>
+            )}
+            <Button
+              variant="outlined"
+              onClick={() => goTo('review')}
+              sx={{
+                minBlockSize: 48,
+                borderRadius: 2,
+                borderColor: ARDENT.ink,
+                color: ARDENT.ink,
+                fontFamily: ARDENT.font,
+                fontSize: 16,
+                fontWeight: 600,
+                textTransform: 'none',
+              }}
+            >
+              Review and request quote
+            </Button>
+          </Box>
+        )}
+        {/* Snackbars for a failed save stack upwards from the bottom of the column */}
+        <Box component="div" sx={{ marginBlockStart: 'auto' }}>
+          <LayoutSlots.DesktopSnackbarsRoot />
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/PhonePage.tsx
+
+```tsx
+import { Box, Button, ButtonBase, Typography } from '@mui/material'
+import { useEffect, useRef, useState } from 'react'
+
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT } from '../_form/index.js'
+import { PriceBreakdown } from './PriceBreakdown.js'
+import { QuoteAction } from './QuoteAction.js'
+import { StepForm } from './StepForm.js'
+import { StepHeader } from './StepHeader.js'
+
+const CHEVRON_ICON = 'M6 15l6-6 6 6'
+
+// The phone page: one column with the compact stepper, the active step's form, and a bar at the bottom with the total
+// and the way on. The total opens the price breakdown as a sheet above the bar.
+export const PhonePage = () => {
+  const { accessInfo } = phx.frontend.useAccessService()
+  const { activeStep, isLast, steps, next } = phx.frontend.useStepNavigation()
+  const navigationState = phx.frontend.useActiveNavigationState()
+  const compressor = phx.frontend.useRootEntityState()
+  const total = phx.frontend.useRootEntityPrice()
+  const [isBreakdownOpen, setBreakdownOpen] = useState(false)
+  const [revealWarnings, setRevealWarnings] = useState(false)
+  const formRef = useRef<HTMLElement>(null)
+
+  // Each step starts at its top, as a new page would
+  useEffect(() => {
+    formRef.current?.scrollTo({ top: 0 })
+  }, [navigationState])
+  const nextStep = steps[(activeStep?.index ?? -1) + 1]
+
+  return (
+    <Box
+      component="div"
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        display: 'grid',
+        gridTemplateRows: 'auto auto minmax(0, 1fr) auto',
+        bgcolor: ARDENT.page,
+        fontFamily: ARDENT.font,
+      }}
+    >
+      <Box
+        component="header"
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1.5,
+          paddingInline: 2,
+          blockSize: 52,
+          bgcolor: ARDENT.navy,
+          color: ARDENT.panel,
+        }}
+      >
+        <Typography sx={{ fontFamily: ARDENT.font, fontSize: 18, fontWeight: 700, letterSpacing: '0.12em' }}>
+          ARDENT
+          <Box component="span" sx={{ color: ARDENT.signal }}>
+            {' '}
+            AIR
+          </Box>
+        </Typography>
+        <Typography
+          component="h1"
+          sx={{ marginInlineStart: 'auto', fontFamily: ARDENT.font, fontSize: 15, color: '#c9d3e0' }}
+        >
+          Quote · {compressor.$frameName}
+        </Typography>
+      </Box>
+
+      <Box component="div" sx={{ bgcolor: ARDENT.panel, borderBlockEnd: `1px solid ${ARDENT.line}` }}>
+        <StepHeader compact />
+      </Box>
+
+      <Box component="main" ref={formRef} sx={{ overflowY: 'auto', minBlockSize: 0 }}>
+        <Box component="div" sx={{ display: 'grid', gap: 2, padding: 2, paddingBlockEnd: 3 }}>
+          <StepForm readOnly={accessInfo.viewMode} revealWarnings={revealWarnings} />
+        </Box>
+      </Box>
+
+      {isBreakdownOpen && (
+        <Box
+          component="div"
+          onClick={() => setBreakdownOpen(false)}
+          sx={{ position: 'absolute', inset: 0, bgcolor: 'rgba(13, 27, 46, 0.4)' }}
+        />
+      )}
+
+      <Box
+        component="footer"
+        sx={{
+          position: 'relative',
+          display: 'grid',
+          gap: 1.5,
+          padding: 2,
+          bgcolor: ARDENT.panel,
+          borderBlockStart: `1px solid ${ARDENT.line}`,
+          boxShadow: '0 -8px 24px rgba(13, 27, 46, 0.08)',
+        }}
+      >
+        {isBreakdownOpen && (
+          <Box component="div" sx={{ maxBlockSize: '55vh', overflowY: 'auto', paddingBlockEnd: 1 }}>
+            <PriceBreakdown />
+          </Box>
+        )}
+        <Box component="div" sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+          <ButtonBase
+            aria-expanded={isBreakdownOpen}
+            aria-label={isBreakdownOpen ? 'Hide the price breakdown' : 'Show the price breakdown'}
+            onClick={() => setBreakdownOpen(open => !open)}
+            sx={{ display: 'grid', justifyItems: 'start', textAlign: 'start', borderRadius: 1, paddingInlineEnd: 1 }}
+          >
+            <Typography
+              component="span"
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+                fontFamily: ARDENT.font,
+                fontSize: 13,
+                color: ARDENT.steel,
+              }}
+            >
+              Total, {compressor.$leadTimeWeeks} weeks
+              <Box
+                component="svg"
+                viewBox="0 0 24 24"
+                aria-hidden
+                sx={{
+                  inlineSize: 16,
+                  blockSize: 16,
+                  transform: isBreakdownOpen ? 'rotate(180deg)' : 'none',
+                  transition: 'transform 160ms',
+                }}
+              >
+                <path d={CHEVRON_ICON} fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" />
+              </Box>
+            </Typography>
+            <Typography
+              component="span"
+              sx={{ fontFamily: ARDENT.font, fontSize: 22, fontWeight: 700, color: ARDENT.ink }}
+            >
+              {total}
+            </Typography>
+          </ButtonBase>
+          <Box component="div" sx={{ flex: 1, minInlineSize: 0 }}>
+            {isLast ? (
+              navigationState !== 'requested' && <QuoteAction onBlocked={() => setRevealWarnings(true)} compact />
+            ) : (
+              <Button
+                fullWidth
+                variant="contained"
+                disableElevation
+                onClick={next}
+                sx={{
+                  minBlockSize: 48,
+                  borderRadius: 2,
+                  bgcolor: ARDENT.navy,
+                  fontFamily: ARDENT.font,
+                  fontSize: 16,
+                  fontWeight: 600,
+                  textTransform: 'none',
+                  '&:hover': { bgcolor: ARDENT.ink },
+                }}
+              >
+                Next: {nextStep?.label}
+              </Button>
+            )}
+          </Box>
+        </Box>
+      </Box>
+
+      <LayoutSlots.MobileSnackbarsRoot />
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/PriceBreakdown.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT, OVERLINE_SX } from '../_form/index.js'
+
+const formatEuro = (amount: number) => {
+  return amount.toLocaleString('en-IE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 })
+}
+
+const ROW_SX = {
+  display: 'grid',
+  gridTemplateColumns: '1fr auto',
+  columnGap: 2,
+  alignItems: 'baseline',
+  paddingBlock: 1,
+} as const
+
+// The quote's lines, subtotal, lead-time surcharge and total. Every number comes from an expression of the spec
+// (`$quoteLines`, `$subtotal`, `$leadTimeSurcharge`, `$leadTimeWeeks`), read from the root entity, so the breakdown
+// changes with each choice, and the total is the `price` component's value.
+export const PriceBreakdown = () => {
+  const compressor = phx.frontend.useRootEntityState()
+  const total = phx.frontend.useRootEntityPrice()
+
+  return (
+    <Box component="section" aria-label="Price breakdown" sx={{ display: 'grid', fontFamily: ARDENT.font }}>
+      <Typography component="h2" sx={{ ...OVERLINE_SX, paddingBlockEnd: 1 }}>
+        Price breakdown
+      </Typography>
+
+      <Box component="ul" sx={{ margin: 0, padding: 0, listStyle: 'none' }}>
+        {compressor.$quoteLines.map(line => (
+          <Box component="li" key={line.key} sx={{ ...ROW_SX, borderBlockEnd: `1px solid ${ARDENT.line}` }}>
+            <Box component="div" sx={{ display: 'grid', minInlineSize: 0 }}>
+              <Typography
+                component="span"
+                sx={{ fontFamily: ARDENT.font, fontSize: 15, fontWeight: 500, color: ARDENT.ink }}
+              >
+                {line.label}
+              </Typography>
+              <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 13, color: ARDENT.steel }}>
+                {line.detail}
+              </Typography>
+            </Box>
+            <Typography
+              component="span"
+              sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.ink, fontVariantNumeric: 'tabular-nums' }}
+            >
+              {formatEuro(line.amount)}
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+
+      <Box component="div" sx={{ ...ROW_SX, paddingBlockStart: 1.5 }}>
+        <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.steel }}>
+          Subtotal
+        </Typography>
+        <Typography
+          component="span"
+          sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.ink, fontVariantNumeric: 'tabular-nums' }}
+        >
+          {formatEuro(compressor.$subtotal)}
+        </Typography>
+      </Box>
+      {compressor.$leadTimeSurcharge > 0 && (
+        <Box component="div" sx={ROW_SX}>
+          <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.steel }}>
+            Express delivery surcharge
+          </Typography>
+          <Typography
+            component="span"
+            sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.ink, fontVariantNumeric: 'tabular-nums' }}
+          >
+            {formatEuro(compressor.$leadTimeSurcharge)}
+          </Typography>
+        </Box>
+      )}
+
+      <Box
+        component="div"
+        sx={{ ...ROW_SX, marginBlockStart: 1, paddingBlockStart: 1.5, borderBlockStart: `2px solid ${ARDENT.ink}` }}
+      >
+        <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 17, fontWeight: 600, color: ARDENT.ink }}>
+          Total, ex works
+        </Typography>
+        <Typography
+          component="span"
+          sx={{
+            fontFamily: ARDENT.font,
+            fontSize: 26,
+            fontWeight: 700,
+            color: ARDENT.ink,
+            fontVariantNumeric: 'tabular-nums',
+          }}
+        >
+          {total}
+        </Typography>
+      </Box>
+      <Typography sx={{ fontFamily: ARDENT.font, fontSize: 14, color: ARDENT.steel, textAlign: 'end' }}>
+        Lead time {compressor.$leadTimeWeeks} weeks · prices excl. VAT
+      </Typography>
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/QuoteAction.tsx
+
+```tsx
+import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT } from '../_form/index.js'
+
+interface QuoteActionProps {
+  // Called instead of running the action while a warning blocks it, so the layout can show every warning
+  readonly onBlocked: () => void
+  // Leaves out the list of what blocks the request, for the phone's bottom bar
+  readonly compact: boolean
+}
+
+// The spec's `quote` finalize action. While any warning holds, `useFinalizeActions` reports the action `disabled` with
+// the warnings as `hints`: the button stays clickable and reveals them instead of running. A viewer sees no button.
+export const QuoteAction = ({ onBlocked, compact }: QuoteActionProps) => {
+  const { primary, hints } = phx.frontend.useFinalizeActions()
+  const { accessInfo } = phx.frontend.useAccessService()
+
+  if (primary === null || accessInfo.viewMode) {
+    return null
+  }
+
+  return (
+    <Box component="div" sx={{ display: 'grid', gap: 1.25 }}>
+      <Button
+        variant="contained"
+        disableElevation
+        disabled={primary.isPending}
+        aria-disabled={primary.disabled}
+        title={primary.title}
+        onClick={() => (primary.disabled ? onBlocked() : void primary.run())}
+        startIcon={primary.isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
+        sx={{
+          minBlockSize: 52,
+          borderRadius: 2,
+          bgcolor: primary.disabled ? ARDENT.steel : ARDENT.signal,
+          color: ARDENT.panel,
+          fontFamily: ARDENT.font,
+          fontSize: 17,
+          fontWeight: 600,
+          textTransform: 'none',
+          '&:hover': { bgcolor: primary.disabled ? ARDENT.steel : ARDENT.signalDark },
+          '&.Mui-disabled': { bgcolor: ARDENT.signal, color: ARDENT.panel, opacity: 0.7 },
+        }}
+      >
+        {primary.isPending ? 'Sending to an engineer…' : primary.label}
+      </Button>
+      {!compact && primary.disabled && hints && (
+        <Typography sx={{ fontFamily: ARDENT.font, fontSize: 14, lineHeight: 1.4, color: ARDENT.warning }}>
+          Resolve before requesting: {hints}
+        </Typography>
+      )}
+      {primary.error && (
+        <Alert severity="error">The quote could not be sent: {primary.error.message} Try again in a moment.</Alert>
+      )}
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/ReviewStep.tsx
+
+```tsx
+import { Box, Button, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT, OVERLINE_SX, TextInputField, useWarnings } from '../_form/index.js'
+import { setQuoteReceipt, useQuoteReceipt } from './quote-receipt.js'
+import { STEP_WARNINGS } from './step-warnings.js'
+
+const CARD_SX = {
+  display: 'grid',
+  gap: 2.5,
+  padding: { xs: 2.5, sm: 3 },
+  borderRadius: 3,
+  border: `1px solid ${ARDENT.line}`,
+  bgcolor: ARDENT.panel,
+} as const
+
+// The quote service's answer, kept visible after the request: what to quote against and who answers
+const Receipt = () => {
+  const receipt = useQuoteReceipt()
+  const navigate = phx.frontend.useNavigate()
+  // The answer lives only as long as the page; a configuration reopened in the `requested` state shows no details
+  const rows =
+    receipt === null
+      ? []
+      : [
+          { label: 'Reference', value: receipt.reference },
+          { label: 'Your engineer', value: receipt.engineer },
+          { label: 'Price valid until', value: receipt.validUntil },
+          { label: 'Quoted total', value: receipt.total },
+        ]
+
+  return (
+    <Box
+      component="section"
+      role="status"
+      sx={{ ...CARD_SX, borderColor: ARDENT.success, bgcolor: ARDENT.successTint }}
+    >
+      <Box component="header" sx={{ display: 'grid', gap: 0.5 }}>
+        <Typography
+          component="h3"
+          sx={{ fontFamily: ARDENT.font, fontSize: 24, fontWeight: 700, color: ARDENT.success }}
+        >
+          Quote requested
+        </Typography>
+        <Typography sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.ink }}>
+          Your engineer checks the duty and sends a firm quote within one working day.
+        </Typography>
+      </Box>
+      <Box
+        component="dl"
+        sx={{ display: 'grid', gridTemplateColumns: 'max-content 1fr', columnGap: 3, rowGap: 1, margin: 0 }}
+      >
+        {rows.map(row => (
+          <Box component="div" key={row.label} sx={{ display: 'contents' }}>
+            <Typography component="dt" sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.steel }}>
+              {row.label}
+            </Typography>
+            <Typography
+              component="dd"
+              sx={{ margin: 0, fontFamily: ARDENT.font, fontSize: 15, fontWeight: 600, color: ARDENT.ink }}
+            >
+              {row.value}
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+      <Box component="div">
+        <Button
+          variant="outlined"
+          onClick={() => {
+            setQuoteReceipt(null)
+            navigate('review')
+          }}
+          sx={{
+            borderColor: ARDENT.ink,
+            color: ARDENT.ink,
+            fontFamily: ARDENT.font,
+            fontSize: 15,
+            textTransform: 'none',
+          }}
+        >
+          Back to summary
+        </Button>
+      </Box>
+    </Box>
+  )
+}
+
+// The conflicts left between choices, each with a way to the step that resolves it
+const Conflicts = () => {
+  const warnings = useWarnings()
+  const { steps, goTo } = phx.frontend.useStepNavigation()
+  const conflicts = warnings.flatMap(warning => {
+    const step = steps.find(candidate => STEP_WARNINGS[candidate.state]?.includes(warning.type))
+
+    return step ? [{ ...warning, step }] : []
+  })
+
+  if (conflicts.length === 0) {
+    return null
+  }
+
+  return (
+    <Box
+      component="section"
+      role="alert"
+      sx={{ ...CARD_SX, gap: 1.5, borderColor: ARDENT.warning, bgcolor: ARDENT.warningTint }}
+    >
+      <Typography component="h3" sx={{ fontFamily: ARDENT.font, fontSize: 18, fontWeight: 600, color: ARDENT.warning }}>
+        {conflicts.length === 1 ? 'One choice needs attention' : `${conflicts.length} choices need attention`}
+      </Typography>
+      {conflicts.map(conflict => (
+        <Box
+          component="div"
+          key={conflict.type}
+          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}
+        >
+          <Typography sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.ink }}>{conflict.text}</Typography>
+          <Button
+            onClick={() => goTo(conflict.step.index)}
+            sx={{
+              flex: 'none',
+              color: ARDENT.warning,
+              fontFamily: ARDENT.font,
+              fontSize: 15,
+              fontWeight: 600,
+              textTransform: 'none',
+            }}
+          >
+            Go to {conflict.step.label}
+          </Button>
+        </Box>
+      ))}
+    </Box>
+  )
+}
+
+interface ReviewStepProps {
+  readonly readOnly: boolean
+  readonly revealWarnings: boolean
+}
+
+// The last step: the conflicts left, the contact details the quote needs, and the summary of what is quoted, from the
+// spec's `$specSheet` expression. After the request, the service's answer takes the place of the contact details.
+export const ReviewStep = ({ readOnly, revealWarnings }: ReviewStepProps) => {
+  const compressor = phx.frontend.useRootEntityState()
+  const navigationState = phx.frontend.useActiveNavigationState()
+  const isRequested = navigationState === 'requested'
+
+  return (
+    <>
+      {isRequested ? (
+        <Receipt />
+      ) : (
+        <>
+          <Conflicts />
+          <Box component="section" sx={CARD_SX}>
+            <Typography component="h3" sx={OVERLINE_SX}>
+              Your details
+            </Typography>
+            <Box component="div" sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 2.5 }}>
+              <TextInputField
+                instanceName="company"
+                label="Company"
+                warningTypes={['companyMissing']}
+                readOnly={readOnly}
+                autoComplete="organization"
+                revealWarning={revealWarnings}
+              />
+              <TextInputField
+                instanceName="email"
+                label="Email"
+                type="email"
+                warningTypes={['emailInvalid']}
+                readOnly={readOnly}
+                autoComplete="email"
+                revealWarning={revealWarnings}
+              />
+            </Box>
+            <TextInputField
+              instanceName="projectReference"
+              label="Project reference"
+              hint="Optional. It is printed on the quote."
+              readOnly={readOnly}
+              revealWarning={revealWarnings}
+            />
+          </Box>
+        </>
+      )}
+
+      <Box component="section" sx={CARD_SX}>
+        <Typography component="h3" sx={OVERLINE_SX}>
+          {isRequested ? 'What was quoted' : 'Quote summary'}
+        </Typography>
+        <Box
+          component="dl"
+          sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' }, columnGap: 4, margin: 0 }}
+        >
+          {compressor.$specSheet.map(row => (
+            <Box
+              component="div"
+              key={row.label}
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: 2,
+                paddingBlock: 1,
+                borderBlockEnd: `1px solid ${ARDENT.line}`,
+              }}
+            >
+              <Typography component="dt" sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.steel }}>
+                {row.label}
+              </Typography>
+              <Typography
+                component="dd"
+                sx={{
+                  margin: 0,
+                  fontFamily: ARDENT.font,
+                  fontSize: 15,
+                  fontWeight: 500,
+                  color: ARDENT.ink,
+                  textAlign: 'end',
+                }}
+              >
+                {row.value}
+              </Typography>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </>
+  )
+}
+```
+
+### ./src/\_shared/StepForm.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+import type { ReactNode } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT, ChoiceField, NumberField, OVERLINE_SX, SwitchField } from '../_form/index.js'
+import { ReviewStep } from './ReviewStep.js'
+
+interface SectionProps {
+  readonly title: string
+  readonly description?: string
+  readonly children: ReactNode
+}
+
+const Section = ({ title, description, children }: SectionProps) => {
+  return (
+    <Box
+      component="section"
+      sx={{
+        display: 'grid',
+        gap: 3,
+        padding: { xs: 2.5, sm: 3 },
+        borderRadius: 3,
+        border: `1px solid ${ARDENT.line}`,
+        bgcolor: ARDENT.panel,
+      }}
+    >
+      <Box component="header" sx={{ display: 'grid', gap: 0.5 }}>
+        <Typography component="h3" sx={OVERLINE_SX}>
+          {title}
+        </Typography>
+        {description && (
+          <Typography sx={{ fontFamily: ARDENT.font, fontSize: 15, color: ARDENT.steel }}>{description}</Typography>
+        )}
+      </Box>
+      {children}
+    </Box>
+  )
+}
+
+// The frame the duty selects, from the spec's expressions, so the customer sees what the numbers mean
+const FrameStrip = () => {
+  const compressor = phx.frontend.useRootEntityState()
+
+  return (
+    <Box
+      component="div"
+      role="status"
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'baseline',
+        columnGap: 1.5,
+        rowGap: 0.5,
+        paddingInline: 2,
+        paddingBlock: 1.5,
+        borderRadius: 2,
+        bgcolor: ARDENT.navy,
+        color: ARDENT.panel,
+        fontFamily: ARDENT.font,
+      }}
+    >
+      <Typography component="span" sx={{ ...OVERLINE_SX, color: '#9fb0c6' }}>
+        Selected frame
+      </Typography>
+      <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 20, fontWeight: 700 }}>
+        {compressor.$frameName}
+      </Typography>
+      <Typography component="span" sx={{ fontFamily: ARDENT.font, fontSize: 15, color: '#c9d3e0' }}>
+        {compressor.$frameKw} kW motor, the smallest frame that meets the duty
+      </Typography>
+    </Box>
+  )
+}
+
+interface StepFormProps {
+  readonly readOnly: boolean
+  readonly revealWarnings: boolean
+}
+
+// The form of the active step. Each section lists the fields the step asks for; a field whose spec component is
+// inactive, such as the dew point without a desiccant dryer, renders nothing, so the conditions stay in the spec.
+export const StepForm = ({ readOnly, revealWarnings }: StepFormProps) => {
+  const navigationState = phx.frontend.useActiveNavigationState()
+  const compressor = phx.frontend.useRootEntityState()
+  const receiverHint =
+    compressor.$minReceiverLitres > 0
+      ? `A fixed-speed machine at this flow needs at least ${compressor.$minReceiverLitres.toLocaleString('en')} L.`
+      : 'A variable-speed machine follows demand and needs no large buffer.'
+
+  switch (navigationState) {
+    case 'duty':
+      return (
+        <>
+          <Section title="Air demand" description="How much air the plant draws at peak, and at what pressure.">
+            <NumberField
+              instanceName="flow"
+              label="Free air delivery"
+              hint="Read it from the plate of the machine you replace, or from a flow log."
+              warningTypes={['flowAboveRange']}
+              readOnly={readOnly}
+              step={0.5}
+            />
+            <ChoiceField instanceName="pressure" label="Working pressure" readOnly={readOnly} />
+            <FrameStrip />
+          </Section>
+          <Section title="Drive and duty">
+            <ChoiceField instanceName="drive" label="Drive" readOnly={readOnly} minCardWidth={200} />
+            <ChoiceField instanceName="dutyCycle" label="Duty cycle" readOnly={readOnly} minCardWidth={200} />
+          </Section>
+        </>
+      )
+    case 'treatment':
+      return (
+        <>
+          <Section title="Drying" description="Compressed air leaves the machine saturated with water.">
+            <ChoiceField instanceName="dryer" label="Dryer" readOnly={readOnly} />
+            <ChoiceField instanceName="dewPoint" label="Pressure dew point" readOnly={readOnly} minCardWidth={200} />
+          </Section>
+          <Section title="Filtration">
+            <ChoiceField
+              instanceName="filtration"
+              label="Filter package"
+              warningTypes={['desiccantNeedsFiltration']}
+              readOnly={readOnly}
+            />
+          </Section>
+        </>
+      )
+    case 'installation':
+      return (
+        <>
+          <Section title="Plant room">
+            <ChoiceField instanceName="cooling" label="Cooling" readOnly={readOnly} minCardWidth={200} />
+            <SwitchField
+              instanceName="heatRecovery"
+              label="Heat recovery"
+              description="Turns up to 70 % of the motor's power into hot water for the plant."
+              readOnly={readOnly}
+            />
+            <ChoiceField instanceName="enclosure" label="Canopy" readOnly={readOnly} minCardWidth={200} />
+          </Section>
+          <Section title="Air network">
+            <ChoiceField
+              instanceName="receiver"
+              label="Air receiver"
+              hint={receiverHint}
+              warningTypes={['receiverTooSmall']}
+              readOnly={readOnly}
+              minCardWidth={110}
+            />
+            <ChoiceField instanceName="supply" label="Electrical supply" readOnly={readOnly} minCardWidth={200} />
+          </Section>
+        </>
+      )
+    case 'service':
+      return (
+        <>
+          <Section title="Service">
+            <ChoiceField instanceName="servicePlan" label="Service plan" readOnly={readOnly} />
+            <SwitchField
+              instanceName="commissioning"
+              label="Commissioning on site"
+              description="An Ardent engineer starts the machine and trains your staff."
+              readOnly={readOnly}
+            />
+          </Section>
+          <Section title="Delivery" description="Lead times are ex works, from the order's confirmation.">
+            <ChoiceField
+              instanceName="delivery"
+              label="Delivery"
+              warningTypes={['expressUnavailable']}
+              readOnly={readOnly}
+              minCardWidth={200}
+            />
+          </Section>
+        </>
+      )
+    default:
+      return <ReviewStep readOnly={readOnly} revealWarnings={revealWarnings} />
+  }
+}
+```
+
+### ./src/\_shared/StepHeader.tsx
+
+```tsx
+import { Box, ButtonBase, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT, useWarnings } from '../_form/index.js'
+import { STEP_WARNINGS } from './step-warnings.js'
+
+const CHECK_ICON = 'M5 12.5 10 17.5 19 7'
+
+interface StepHeaderProps {
+  readonly compact: boolean
+}
+
+// The spec's `navigationSteps` as a stepper. Every step can be entered, in any order; a step that holds a warning
+// carries a mark until the warning is resolved. On a phone the stepper is one line with a segmented progress bar.
+export const StepHeader = ({ compact }: StepHeaderProps) => {
+  const { steps, activeStep, goTo } = phx.frontend.useStepNavigation()
+  const warnings = useWarnings()
+
+  const hasWarning = (states: readonly string[]) => {
+    return states.some(state => warnings.some(warning => STEP_WARNINGS[state]?.includes(warning.type)))
+  }
+
+  if (compact) {
+    return (
+      <Box
+        component="nav"
+        aria-label="Quote steps"
+        sx={{ display: 'grid', gap: 1, paddingInline: 2, paddingBlock: 1.5 }}
+      >
+        <Box component="div" sx={{ display: 'flex', alignItems: 'baseline', gap: 1 }}>
+          <Typography sx={{ fontFamily: ARDENT.font, fontSize: 13, color: ARDENT.steel }}>
+            Step {(activeStep?.index ?? 0) + 1} of {steps.length}
+          </Typography>
+          <Typography component="h2" sx={{ fontFamily: ARDENT.font, fontSize: 17, fontWeight: 600, color: ARDENT.ink }}>
+            {activeStep?.label}
+          </Typography>
+        </Box>
+        <Box component="ol" sx={{ display: 'flex', gap: 0.5, margin: 0, padding: 0, listStyle: 'none' }}>
+          {steps.map(step => (
+            <Box component="li" key={step.state} sx={{ flex: 1 }}>
+              <ButtonBase
+                aria-label={`${step.label}${hasWarning(step.navigationStates) ? ', needs attention' : ''}`}
+                aria-current={step.status === 'active' ? 'step' : undefined}
+                onClick={() => goTo(step.index)}
+                sx={{
+                  display: 'block',
+                  inlineSize: '100%',
+                  blockSize: 6,
+                  borderRadius: 3,
+                  // A bigger target than the bar itself, for a finger
+                  outline: '8px solid transparent',
+                  bgcolor: hasWarning(step.navigationStates)
+                    ? ARDENT.warning
+                    : step.status === 'upcoming'
+                      ? ARDENT.line
+                      : ARDENT.signal,
+                }}
+              />
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    )
+  }
+
+  return (
+    <Box
+      component="nav"
+      aria-label="Quote steps"
+      sx={{ display: 'flex', alignItems: 'center', gap: 1, paddingInline: 4, paddingBlock: 1.5, overflowX: 'auto' }}
+    >
+      {steps.map((step, index) => {
+        const warn = hasWarning(step.navigationStates)
+        const isActive = step.status === 'active'
+        const isComplete = step.status === 'complete'
+
+        return (
+          <Box component="div" key={step.state} sx={{ display: 'flex', alignItems: 'center', gap: 1, flex: 'none' }}>
+            {index > 0 && (
+              <Box
+                component="span"
+                aria-hidden
+                sx={{ inlineSize: 32, blockSize: 2, bgcolor: isComplete || isActive ? ARDENT.signal : ARDENT.line }}
+              />
+            )}
+            <ButtonBase
+              aria-current={isActive ? 'step' : undefined}
+              onClick={() => goTo(step.index)}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                paddingInline: 1,
+                paddingBlock: 0.75,
+                borderRadius: 2,
+                '&:hover': { bgcolor: ARDENT.page },
+                '&.Mui-focusVisible': { outline: `2px solid ${ARDENT.navy}` },
+              }}
+            >
+              <Box
+                component="span"
+                sx={{
+                  display: 'grid',
+                  placeItems: 'center',
+                  inlineSize: 28,
+                  blockSize: 28,
+                  borderRadius: '50%',
+                  fontFamily: ARDENT.font,
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: isActive || isComplete ? ARDENT.panel : ARDENT.steel,
+                  bgcolor: isActive ? ARDENT.signal : isComplete ? ARDENT.navy : 'transparent',
+                  border: isActive || isComplete ? 'none' : `2px solid ${ARDENT.line}`,
+                }}
+              >
+                {isComplete ? (
+                  <Box component="svg" viewBox="0 0 24 24" aria-hidden sx={{ inlineSize: 16, blockSize: 16 }}>
+                    <path d={CHECK_ICON} fill="none" stroke="currentColor" strokeWidth={3} strokeLinecap="round" />
+                  </Box>
+                ) : (
+                  index + 1
+                )}
+              </Box>
+              <Typography
+                component="span"
+                sx={{
+                  fontFamily: ARDENT.font,
+                  fontSize: 15,
+                  fontWeight: isActive ? 600 : 500,
+                  color: isActive ? ARDENT.ink : ARDENT.steel,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {step.label}
+              </Typography>
+              {warn && (
+                <Box
+                  component="span"
+                  role="img"
+                  aria-label="needs attention"
+                  sx={{ inlineSize: 8, blockSize: 8, borderRadius: '50%', bgcolor: ARDENT.warning }}
+                />
+              )}
+            </ButtonBase>
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/quote-receipt.ts
+
+```ts
+import { useSyncExternalStore } from 'react'
+
+/** What the quote service answers when a quote is requested: the reference the engineer will quote against */
+export interface QuoteReceipt {
+  readonly reference: string
+  readonly engineer: string
+  readonly validUntil: string
+  readonly total: string
+}
+
+let receipt: QuoteReceipt | null = null
+const listeners = new Set<() => void>()
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener)
+
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+// A finalize action's `run()` resolves without a value, so the `requestQuote` handler keeps the service's answer here
+// for the layout to show. The project owns this store; the configurator does not persist it.
+export const setQuoteReceipt = (next: QuoteReceipt | null) => {
+  receipt = next
+  listeners.forEach(listener => listener())
+}
+
+export const useQuoteReceipt = () => {
+  return useSyncExternalStore(subscribe, () => receipt)
+}
+```
+
+### ./src/\_shared/step-warnings.ts
+
+```ts
+// Which step resolves each conflict between choices: the stepper marks a step that holds one, and the review sends the
+// customer to the step that can fix it. The contact details' warnings stay with their fields on the review step.
+export const STEP_WARNINGS: Readonly<Record<string, readonly string[]>> = {
+  duty: ['flowAboveRange'],
+  treatment: ['desiccantNeedsFiltration'],
+  installation: ['receiverTooSmall'],
+  service: ['expressUnavailable'],
+}
+```
+
+### ./src/elements/ConfiguratorLayout.tsx
+
+```tsx
+import { Box } from '@mui/material'
+
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ARDENT } from '../_form/index.js'
+import { DesktopPage } from '../_shared/DesktopPage.js'
+import { PhonePage } from '../_shared/PhonePage.js'
+
+// A quote builder with no scene: the layout mounts the services and a page, never `LayoutSlots.SharedCanvas`, so the
+// configurator loads no 3D scene and the app loader does not wait for one. Desktop or phone follows the width of the
+// configurator's container.
+const ConfiguratorLayout = () => {
+  // `null` until the container has been measured
+  const viewports = phx.frontend.useActiveViewports()
+  const isDesktop = viewports?.includes('desktop') ?? false
+
+  return (
+    <Box component="div" sx={{ position: 'absolute', inset: 0, overflow: 'clip', bgcolor: ARDENT.page }}>
+      <LayoutSlots.Services />
+      {viewports !== null && (isDesktop ? <DesktopPage /> : <PhonePage />)}
+    </Box>
+  )
+}
+
+export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout', ConfiguratorLayout)
+```
+
+### ./src/expressions/compressor.ts
+
+```ts
+import { phx } from '../../.phoenix/phx.js'
+
+// The frames Ardent builds, by motor power, with the free air delivery of each at 7.5 bar in m³/min
+const LARGEST_FRAME = { kw: 250, flow: 41 }
+const FRAMES = [
+  { kw: 22, flow: 3.6 },
+  { kw: 30, flow: 5 },
+  { kw: 37, flow: 6.3 },
+  { kw: 45, flow: 7.6 },
+  { kw: 55, flow: 9.6 },
+  { kw: 75, flow: 13 },
+  { kw: 90, flow: 15.8 },
+  { kw: 110, flow: 19.6 },
+  { kw: 132, flow: 23 },
+  { kw: 160, flow: 27.5 },
+  { kw: 200, flow: 34 },
+  LARGEST_FRAME,
+]
+
+// A higher pressure takes more power, so the same frame delivers less air
+const PRESSURE = {
+  Bar7: { factor: 1, label: '7.5 bar' },
+  Bar10: { factor: 0.85, label: '10 bar' },
+  Bar13: { factor: 0.72, label: '13 bar' },
+}
+
+const LARGEST_STOCK_FRAME_KW = 110
+const RECEIVER_LITRES = { None: 0, Litres500: 500, Litres1000: 1000, Litres2000: 2000 }
+const RECEIVER_PRICE = { None: 0, Litres500: 1150, Litres1000: 1900, Litres2000: 3400 }
+const EXPRESS_SURCHARGE = 0.08
+
+const DRYER_LABEL = { None: 'No dryer', Refrigerant: 'Refrigerant dryer, +3 °C', Desiccant: 'Desiccant dryer' }
+const DEW_POINT_LABEL = { Minus40: '−40 °C', Minus70: '−70 °C' }
+const FILTRATION_LABEL = { General: 'General purpose', HighEfficiency: 'High efficiency', OilVapour: 'Oil vapour' }
+const PLAN_LABEL = { None: 'No plan', Essential: 'Essential, 3 years', TotalCare: 'Total care, 5 years' }
+
+interface CompressorChoices {
+  readonly flow: number
+  readonly pressure: keyof typeof PRESSURE
+  readonly drive: 'FixedSpeed' | 'VariableSpeed'
+  readonly dryer: keyof typeof DRYER_LABEL
+  readonly cooling: 'Air' | 'Water'
+  readonly enclosure: 'Standard' | 'LowNoise'
+  readonly supply: 'V400Hz50' | 'V480Hz60'
+}
+
+// The smallest frame that delivers the flow at the pressure, or the largest one when none does
+const frameFor = (s: CompressorChoices) => {
+  const factor = PRESSURE[s.pressure].factor
+
+  return FRAMES.find(frame => frame.flow * factor >= s.flow) ?? LARGEST_FRAME
+}
+
+const basePriceOf = (kw: number) => {
+  return 6000 + 360 * kw
+}
+
+const standardWeeks = (s: CompressorChoices) => {
+  return (
+    (s.drive === 'VariableSpeed' ? 8 : 6) +
+    (s.dryer === 'Desiccant' ? 2 : 0) +
+    (s.cooling === 'Water' ? 1 : 0) +
+    (s.enclosure === 'LowNoise' ? 1 : 0) +
+    (s.supply === 'V480Hz60' ? 1 : 0)
+  )
+}
+
+const expressWeeks = (s: CompressorChoices) => {
+  return Math.max(3, standardWeeks(s) - 4)
+}
+
+export default phx.domain.implementCustomExpressions({
+  Compressor: {
+    $maxFlow: s => {
+      return Math.floor(LARGEST_FRAME.flow * PRESSURE[s.pressure].factor * 2) / 2
+    },
+    $frameKw: s => {
+      return frameFor(s).kw
+    },
+    $frameName: s => {
+      return `RSV-${frameFor(s).kw}`
+    },
+    // A fixed-speed machine loads and unloads, so it needs a buffer of about 40 litres per m³/min
+    $minReceiverLitres: s => {
+      return s.drive === 'FixedSpeed' ? Math.ceil(s.flow * 40) : 0
+    },
+    $leadTimeWeeks: s => {
+      return s.delivery === 'Express' ? expressWeeks(s) : standardWeeks(s)
+    },
+    // The delivery options name their lead time; express is offered for stock frames only
+    $deliveryOptions: s => {
+      const standard = {
+        label: `Standard, ${standardWeeks(s)} weeks`,
+        description: 'Built to order',
+        value: 'Standard',
+      }
+      const express = {
+        label: `Express, ${expressWeeks(s)} weeks`,
+        description: `From stock, ${EXPRESS_SURCHARGE * 100} % surcharge`,
+        value: 'Express',
+      }
+
+      return frameFor(s).kw > LARGEST_STOCK_FRAME_KW ? [standard] : [standard, express]
+    },
+    $quoteLines: s => {
+      const frame = frameFor(s)
+      const base = basePriceOf(frame.kw)
+      const lines = [
+        {
+          key: 'frame',
+          label: `RSV-${frame.kw} rotary screw compressor`,
+          detail: `${frame.kw} kW, ${PRESSURE[s.pressure].label}, ${(frame.flow * PRESSURE[s.pressure].factor).toFixed(1)} m³/min`,
+          amount: base,
+        },
+      ]
+
+      if (s.drive === 'VariableSpeed') {
+        lines.push({
+          key: 'drive',
+          label: 'Variable speed drive',
+          detail: 'Inverter and PM motor',
+          amount: base * 0.28,
+        })
+      }
+
+      if (s.dutyCycle === 'Continuous') {
+        lines.push({ key: 'duty', label: 'Heavy-duty package', detail: 'For continuous duty', amount: base * 0.06 })
+      }
+
+      if (s.dryer === 'Refrigerant') {
+        lines.push({ key: 'dryer', label: 'Refrigerant dryer', detail: '+3 °C dew point', amount: 1200 + 95 * s.flow })
+      }
+
+      if (s.dryer === 'Desiccant') {
+        const dryer = (3800 + 310 * s.flow) * (s.dewPoint === 'Minus70' ? 1.18 : 1)
+        lines.push({
+          key: 'dryer',
+          label: 'Desiccant dryer',
+          detail: `${DEW_POINT_LABEL[s.dewPoint]} dew point`,
+          amount: dryer,
+        })
+      }
+
+      if (s.filtration === 'HighEfficiency') {
+        lines.push({
+          key: 'filters',
+          label: 'High-efficiency filters',
+          detail: '0.01 mg/m³',
+          amount: 1450 + 20 * s.flow,
+        })
+      }
+
+      if (s.filtration === 'OilVapour') {
+        lines.push({ key: 'filters', label: 'Oil-vapour filters', detail: '0.003 mg/m³', amount: 2900 + 40 * s.flow })
+      }
+
+      if (s.cooling === 'Water') {
+        lines.push({ key: 'cooling', label: 'Water cooling', detail: 'Plate heat exchangers', amount: base * 0.07 })
+      }
+
+      if (s.cooling === 'Water' && s.heatRecovery) {
+        lines.push({
+          key: 'heat',
+          label: 'Heat recovery',
+          detail: 'Up to 70 °C hot water',
+          amount: 4200 + 25 * frame.kw,
+        })
+      }
+
+      if (s.receiver !== 'None') {
+        const litres = RECEIVER_LITRES[s.receiver]
+        lines.push({
+          key: 'receiver',
+          label: 'Air receiver',
+          detail: `${litres.toLocaleString('en')} L, 11 bar`,
+          amount: RECEIVER_PRICE[s.receiver],
+        })
+      }
+
+      if (s.enclosure === 'LowNoise') {
+        lines.push({ key: 'canopy', label: 'Low-noise canopy', detail: 'About 66 dB(A)', amount: 2600 + 30 * frame.kw })
+      }
+
+      if (s.supply === 'V480Hz60') {
+        lines.push({ key: 'supply', label: '60 Hz build', detail: '480 V motor and starter', amount: base * 0.04 })
+      }
+
+      if (s.servicePlan !== 'None') {
+        const share = s.servicePlan === 'Essential' ? 0.09 : 0.22
+        lines.push({ key: 'service', label: 'Service plan', detail: PLAN_LABEL[s.servicePlan], amount: base * share })
+      }
+
+      if (s.commissioning) {
+        lines.push({
+          key: 'commissioning',
+          label: 'Commissioning on site',
+          detail: 'One engineer, one day',
+          amount: 1800,
+        })
+      }
+
+      return lines.map(line => ({ ...line, amount: Math.round(line.amount) }))
+    },
+    $subtotal: s => {
+      return s.$quoteLines.reduce((sum, line) => sum + line.amount, 0)
+    },
+    $leadTimeSurcharge: s => {
+      return s.delivery === 'Express' ? Math.round(s.$subtotal * EXPRESS_SURCHARGE) : 0
+    },
+    $total: s => {
+      return s.$subtotal + s.$leadTimeSurcharge
+    },
+    $specSheet: s => {
+      const frame = frameFor(s)
+
+      return [
+        { label: 'Model', value: `RSV-${frame.kw}, ${frame.kw} kW` },
+        { label: 'Free air delivery', value: `${s.flow.toFixed(1)} m³/min required` },
+        { label: 'Working pressure', value: PRESSURE[s.pressure].label },
+        { label: 'Drive', value: s.drive === 'VariableSpeed' ? 'Variable speed' : 'Fixed speed' },
+        { label: 'Duty', value: s.dutyCycle === 'Continuous' ? 'Continuous' : 'Intermittent' },
+        {
+          label: 'Dryer',
+          value: s.dryer === 'Desiccant' ? `Desiccant, ${DEW_POINT_LABEL[s.dewPoint]}` : DRYER_LABEL[s.dryer],
+        },
+        { label: 'Filtration', value: FILTRATION_LABEL[s.filtration] },
+        {
+          label: 'Cooling',
+          value: s.cooling === 'Water' ? `Water${s.heatRecovery ? ', with heat recovery' : ''}` : 'Air',
+        },
+        {
+          label: 'Receiver',
+          value: s.receiver === 'None' ? 'None' : `${RECEIVER_LITRES[s.receiver].toLocaleString('en')} L`,
+        },
+        { label: 'Canopy', value: s.enclosure === 'LowNoise' ? 'Low-noise' : 'Standard' },
+        { label: 'Supply', value: s.supply === 'V480Hz60' ? '480 V, 60 Hz' : '400 V, 50 Hz' },
+        { label: 'Service', value: PLAN_LABEL[s.servicePlan] },
+        { label: 'Commissioning', value: s.commissioning ? 'On site' : 'Not included' },
+        { label: 'Delivery', value: `${s.delivery === 'Express' ? 'Express' : 'Standard'}, ${s.$leadTimeWeeks} weeks` },
+      ]
+    },
+  },
+})
+```
+
+### ./src/handlers/request-quote.ts
+
+```ts
+import { useCallback } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+import { setQuoteReceipt } from '../_shared/quote-receipt.js'
+
+const VALID_DAYS = 30
+
+// Stands in for Ardent's quote service. A deployed project sends the configuration to its finalize webhook here and
+// waits for the answer; this one answers after a moment with a fixed engineer and a reference made from the
+// configuration's id, then enters the `requested` navigation state.
+export default phx.frontend.createPhoenixHandler('requestQuote', () => {
+  const navigate = phx.frontend.useNavigate()
+  const configurationId = phx.frontend.useConfigurationId()
+  const total = phx.frontend.useRootEntityPrice()
+
+  return {
+    handler: useCallback(async () => {
+      await new Promise(resolve => setTimeout(resolve, 1600))
+
+      const validUntil = new Date(Date.now() + VALID_DAYS * 24 * 60 * 60 * 1000)
+
+      setQuoteReceipt({
+        reference: `AQ-${String(configurationId)
+          .replace(/[^a-z0-9]/gi, '')
+          .slice(-6)
+          .toUpperCase()}`,
+        engineer: 'Marta Kovács, application engineer',
+        validUntil: validUntil.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }),
+        total: total ?? '',
+      })
+      navigate('requested')
+    }, [configurationId, navigate, total]),
+  }
+})
+```
+
+### ./src/invariants/compressor.ts
+
+```ts
+import { phx } from '../../.phoenix/phx.js'
+
+const PRESSURE_LABEL = { Bar7: '7.5 bar', Bar10: '10 bar', Bar13: '13 bar' }
+const RECEIVER_LITRES = { None: 0, Litres500: 500, Litres1000: 1000, Litres2000: 2000 }
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/
+
+// Each rule is a `warning` in the spec: a change that breaks it is kept, so the customer can fix the conflict where it
+// is shown, and finalizing waits until no warning is left
+export default phx.domain.implementCustomInvariants({
+  Compressor: {
+    // The largest frame delivers less air at a higher pressure, so the limit depends on an earlier choice
+    flowRange: s => {
+      if (s.flow <= s.$maxFlow) {
+        return []
+      }
+
+      return [
+        {
+          type: 'flowAboveRange',
+          severity: 'warning',
+          message: `At ${PRESSURE_LABEL[s.pressure]} the largest frame delivers ${s.$maxFlow.toFixed(1)} m³/min. Lower the flow or the pressure.`,
+        },
+      ]
+    },
+    desiccantNeedsFiltration: s => {
+      return s.dryer !== 'Desiccant' || s.filtration !== 'General'
+    },
+    // The message names the size the flow needs, so it is built here rather than in the spec
+    receiverSize: s => {
+      if (RECEIVER_LITRES[s.receiver] >= s.$minReceiverLitres) {
+        return []
+      }
+
+      return [
+        {
+          type: 'receiverTooSmall',
+          severity: 'warning',
+          message: `A fixed-speed compressor at ${s.flow.toFixed(1)} m³/min needs a receiver of at least ${s.$minReceiverLitres.toLocaleString('en')} L.`,
+        },
+      ]
+    },
+    expressUnavailable: s => {
+      return s.delivery !== 'Express' || s.$frameKw <= 110
+    },
+    companyMissing: s => {
+      return s.company.trim().length > 0
+    },
+    emailInvalid: s => {
+      return EMAIL.test(s.email.trim())
+    },
+  },
+})
+```
+
+</details>