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

package/dist/docs/layouts/gallery/fenwick-window.mdx

@@ -0,0 +1,2732 @@
+# Fenwick Window
+
+Show a made-to-measure product as the drawing a workshop would build it from. A joinery, Fenwick & Lowe, sells timber casement windows to order: the customer sets the overall size, the panes across, a top light, how the sashes open, the glass and the finish, and sees the window as a shop drawing that changes with every input. The drawing has the frame, the mullions and the transom, the sashes with their opening symbols and handles, chains of dimensions in millimetres and a title block with the window's thermal and weight figures. Where a canvas would usually be, the layout draws SVG from the configuration; the spec holds the geometry, the prices and the rules.
+
+- [Try it](#try-it)
+- [What the example demonstrates](#what-the-example-demonstrates)
+- [The drawing is the main view](#the-drawing-is-the-main-view)
+- [Geometry from the spec](#geometry-from-the-spec)
+- [Drawing the elevation](#drawing-the-elevation)
+- [Questions that depend on earlier answers](#questions-that-depend-on-earlier-answers)
+- [Rules the drawing shows](#rules-the-drawing-shows)
+- [Add to order](#add-to-order)
+- [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
+
+| Piece                                                                                              | Where                                                                                                                      |
+| -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| A `ConfiguratorLayout` whose main view is SVG instead of `LayoutSlots.SharedCanvas`                | `DrawingSheet`, [The drawing is the main view](#the-drawing-is-the-main-view)                                              |
+| A geometry expression declared in `expressions:` and read with `phx.frontend.useRootEntityState()` | `$panes`, [Geometry from the spec](#geometry-from-the-spec)                                                                |
+| Dimension lines, opening symbols and a title block drawn from the configuration                    | `ShopDrawing`, `DimensionLine`, `OpeningSymbol`, `TitleBlock`                                                              |
+| `$filter.active` with `$eval` on a `genericDimension` and an `attributeSelection`                  | `MillimetreField`, `SegmentedField`, [Questions that depend on earlier answers](#questions-that-depend-on-earlier-answers) |
+| `warning` invariants shown in the drawing and in the inputs                                        | [Rules the drawing shows](#rules-the-drawing-shows)                                                                        |
+| `phx.frontend.useFinalizeActions()` for the spec's `order` action                                  | `OrderPanel`, [Add to order](#add-to-order)                                                                                |
+
+## The drawing is the main view
+
+`src/elements/ConfiguratorLayout.tsx` mounts the services and a page, never `LayoutSlots.SharedCanvas`, so no scene loads and the app loader does not wait for one. On a desktop the inputs are a column on the left and the drawing sheet fills the rest; on a phone the sheet stays at the top and the inputs scroll below it.
+
+```tsx
+import { Box } from '@mui/material'
+
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DesktopPage } from '../_shared/DesktopPage.js'
+import { PhonePage } from '../_shared/PhonePage.js'
+import { FENWICK } from '../_shared/tokens.js'
+
+// A window configurator whose main view is a shop drawing instead of a scene. The layout never mounts
+// `LayoutSlots.SharedCanvas`, so no 3D scene loads; the drawing is SVG that React renders from the configuration.
+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: FENWICK.paper }}>
+      <LayoutSlots.Services />
+      {viewports !== null && (isDesktop ? <DesktopPage /> : <PhonePage />)}
+    </Box>
+  )
+}
+
+export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout', ConfiguratorLayout)
+```
+
+`DrawingSheet` is the paper: a grid, a ruled double border, the elevation, and the title block along the right edge, or as one row of figures along the bottom on a phone.
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ShopDrawing } from './ShopDrawing.js'
+import { TitleBlock } from './TitleBlock.js'
+import { SHEET } from './sheet-style.js'
+
+// The title column gives way to the drawing on a narrow screen
+const TITLE_WIDTH = 'clamp(200px, 26%, 260px)'
+const PHONE_TITLE_HEIGHT = 49
+
+interface DrawingSheetProps {
+  readonly compact: boolean
+}
+
+// The sheet the elevation is drawn on: drafting paper with a grid and a ruled border, the drawing, and the title
+// block, along the right edge on a desktop and as a row of figures along the bottom on a phone
+export const DrawingSheet = ({ compact }: DrawingSheetProps) => {
+  const casement = phx.frontend.useRootEntityState()
+  const gutter = compact ? 10 : 24
+
+  return (
+    <Box
+      component="div"
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        bgcolor: SHEET.paper,
+        backgroundImage: `linear-gradient(${SHEET.grid} 1px, transparent 1px), linear-gradient(90deg, ${SHEET.grid} 1px, transparent 1px)`,
+        backgroundSize: '20px 20px',
+      }}
+    >
+      <Box
+        component="div"
+        sx={{
+          position: 'absolute',
+          inset: `${gutter}px`,
+          display: 'grid',
+          gridTemplateColumns: compact ? 'minmax(0, 1fr)' : `minmax(0, 1fr) ${TITLE_WIDTH}`,
+          gridTemplateRows: compact ? `minmax(0, 1fr) ${PHONE_TITLE_HEIGHT}px` : 'minmax(0, 1fr)',
+          border: `1.5px solid ${SHEET.ink}`,
+          outline: `1px solid ${SHEET.ink}`,
+          outlineOffset: 3,
+        }}
+      >
+        <Box
+          component="div"
+          sx={{ display: 'flex', flexDirection: 'column', gap: 1, minBlockSize: 0, margin: compact ? 0.75 : 3 }}
+        >
+          {/* The view's name and the sections' face widths, above the drawing so they never crowd it */}
+          <Box
+            component="div"
+            sx={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              justifyContent: 'space-between',
+              columnGap: 2,
+              fontFamily: SHEET.font,
+            }}
+          >
+            <Typography
+              sx={{
+                fontFamily: SHEET.font,
+                fontSize: compact ? 10 : 12,
+                fontWeight: 600,
+                letterSpacing: '0.16em',
+                color: SHEET.ink,
+              }}
+            >
+              ELEVATION · VIEWED FROM OUTSIDE
+            </Typography>
+            <Typography sx={{ fontFamily: SHEET.font, fontSize: compact ? 10 : 11, color: SHEET.inkSoft }}>
+              FRAME {casement.$frameWidth} · MULLION {casement.$mullionWidth}
+            </Typography>
+          </Box>
+          <Box component="div" sx={{ position: 'relative', flex: 1, minBlockSize: 0 }}>
+            <ShopDrawing />
+          </Box>
+        </Box>
+        <Box component="div" sx={compact ? { borderBlockStart: `1px solid ${SHEET.ink}` } : undefined}>
+          <TitleBlock compact={compact} />
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+```
+
+## Geometry from the spec
+
+Where each pane sits is part of the product, not of the drawing, so it is an expression. `$panes` returns the clear openings inside the frame in millimetres, from the frame's top left corner as seen from outside, with how each pane opens and whether its sash is wider than its hinges carry. Declaring it in `expressions:` gives the layout its type.
+
+```yaml
+expressions:
+  Window:
+    $panes:
+      type: array
+      items:
+        type: object
+        properties:
+          key:
+            type: string
+          x:
+            type: number
+          y:
+            type: number
+          width:
+            type: number
+          height:
+            type: number
+          opening:
+            enum:
+              - Fixed
+              - SideLeft
+              - SideRight
+              - TiltLeft
+              - TiltRight
+              - Top
+          oversize:
+            type: boolean
+        required:
+          - key
+          - x
+          - y
+          - width
+          - height
+          - opening
+          - oversize
+        additionalProperties: false
+    $frameWidth:
+      type: number
+    $mullionWidth:
+      type: number
+    $glassArea:
+      type: number
+    $uValue:
+      type: number
+    $weightKg:
+      type: number
+    $glassBuildUp:
+      type: string
+    $price:
+      type: number
+```
+
+The same file computes what the title block and the price need from the panes: the glass area, the window's U-value by the area-weighted method, its weight and its price. A single sash follows the hinge choice, a pair is hung from the outer edges like French casements, and of three panes the outer two open and the middle one is fixed.
+
+```ts
+import { phx } from '../../.phoenix/phx.js'
+
+// Face widths of the timber sections in millimetres, as the drawing shows them
+const FRAME = 68
+const MULLION = 76
+
+const LIGHT_COUNT = { One: 1, Two: 2, Three: 3 }
+
+// The widest sash each opening type can carry, in millimetres
+const MAX_SASH_WIDTH = { Fixed: Infinity, SideHung: 900, TiltTurn: 1300, TopHung: 1600 }
+
+const GLASS = {
+  Double: { buildUp: '4 / 16 Ar / 4 low-E', ug: 1.1, kgPerM2: 20, gbpPerM2: 95 },
+  Triple: { buildUp: '4 / 12 Ar / 4 / 12 Ar / 4, two low-E', ug: 0.6, kgPerM2: 30, gbpPerM2: 150 },
+  Acoustic: { buildUp: '6.8 lam / 16 Ar / 4 low-E', ug: 1.0, kgPerM2: 27, gbpPerM2: 170 },
+}
+
+const SASH_PRICE = { Fixed: 0, SideHung: 260, TiltTurn: 340, TopHung: 220 }
+const FINISH_FACTOR = { Oak: 1.18, White: 1, Anthracite: 1.06 }
+// Timber frame and spacer: U-value of the frame and linear loss along the glass edge
+const FRAME_U = 1.3
+const EDGE_PSI = 0.04
+
+type PaneOpening = 'Fixed' | 'SideLeft' | 'SideRight' | 'TiltLeft' | 'TiltRight' | 'Top'
+
+interface WindowChoices {
+  readonly lights: keyof typeof LIGHT_COUNT
+  readonly opening: keyof typeof MAX_SASH_WIDTH
+  readonly hinge: 'Left' | 'Right'
+}
+
+// How the pane at `index` of `count` opens: a single sash follows the hinge choice, a pair is hung from the outer
+// edges like French casements, and of three the outer two open and the middle one is fixed
+const paneOpening = (s: WindowChoices, index: number, count: number): PaneOpening => {
+  if (s.opening === 'Fixed') {
+    return 'Fixed'
+  }
+
+  if (s.opening === 'TopHung') {
+    return 'Top'
+  }
+
+  const prefix = s.opening === 'SideHung' ? 'Side' : 'Tilt'
+
+  if (count === 1) {
+    return s.hinge === 'Left' ? `${prefix}Left` : `${prefix}Right`
+  }
+
+  if (index === 0) {
+    return `${prefix}Left`
+  }
+
+  if (index === count - 1) {
+    return `${prefix}Right`
+  }
+
+  return 'Fixed'
+}
+
+export default phx.domain.implementCustomExpressions({
+  Window: {
+    $frameWidth: () => {
+      return FRAME
+    },
+    $mullionWidth: () => {
+      return MULLION
+    },
+    // The clear openings inside the frame, from the top left corner of the frame, viewed from outside
+    $panes: s => {
+      const count = LIGHT_COUNT[s.lights]
+      const innerWidth = s.width - 2 * FRAME
+      const topLightZone = s.topLight ? s.topLightHeight + MULLION : 0
+      const mainHeight = s.height - 2 * FRAME - topLightZone
+      const paneWidth = (innerWidth - (count - 1) * MULLION) / count
+      const panes = Array.from({ length: count }, (_, index) => {
+        const opening = paneOpening(s, index, count)
+
+        return {
+          key: `P${index + 1}`,
+          x: FRAME + index * (paneWidth + MULLION),
+          y: FRAME + topLightZone,
+          width: paneWidth,
+          height: mainHeight,
+          opening,
+          oversize: opening !== 'Fixed' && paneWidth > MAX_SASH_WIDTH[s.opening],
+        }
+      })
+
+      if (!s.topLight) {
+        return panes
+      }
+
+      // The top light is one fixed pane across the whole width, above the transom
+      return [
+        {
+          key: 'T1',
+          x: FRAME,
+          y: FRAME,
+          width: innerWidth,
+          height: s.topLightHeight,
+          opening: 'Fixed',
+          oversize: false,
+        },
+        ...panes,
+      ]
+    },
+    $glassArea: s => {
+      return s.$panes.reduce((area, pane) => area + (pane.width * pane.height) / 1e6, 0)
+    },
+    // Uw from the glass, the frame and the glass edge, by the area-weighted method of EN ISO 10077
+    $uValue: s => {
+      const total = (s.width * s.height) / 1e6
+      const frameArea = total - s.$glassArea
+      const edge = s.$panes.reduce((length, pane) => length + (2 * (pane.width + pane.height)) / 1000, 0)
+
+      return (s.$glassArea * GLASS[s.glazing].ug + frameArea * FRAME_U + edge * EDGE_PSI) / total
+    },
+    $weightKg: s => {
+      const frameMetres = (2 * (s.width + s.height)) / 1000
+
+      return s.$glassArea * GLASS[s.glazing].kgPerM2 + frameMetres * 4.5
+    },
+    $glassBuildUp: s => {
+      return GLASS[s.glazing].buildUp
+    },
+    $price: s => {
+      const frameMetres = (2 * (s.width + s.height)) / 1000
+      const sashes = s.$panes.filter(pane => pane.opening !== 'Fixed').length
+      const base =
+        180 +
+        frameMetres * 85 +
+        s.$glassArea * GLASS[s.glazing].gbpPerM2 +
+        sashes * SASH_PRICE[s.opening] +
+        (s.topLight ? 120 : 0) +
+        (s.glazingBars ? 45 * s.$panes.length : 0)
+
+      return Math.round(base * FINISH_FACTOR[s.finish])
+    },
+  },
+})
+```
+
+## Drawing the elevation
+
+`ShopDrawing` reads the window with `phx.frontend.useRootEntityState()` and draws it in millimetres. It measures its box and fits the window with room for the dimension tiers, then sizes lines, ticks and lettering in screen pixels, so a 500 mm window and a 2,400 mm one read the same and the proportions follow the configuration.
+
+- The frame is one rectangle in the finish's tone; the panes are drawn over it, so what is left between them is the frame, the mullions and the transom.
+- A sash is drawn as a rectangle with its stiles and rails, the glass inset inside it; a fixed pane has only a glazing bead and the word "FIXED". Two short strokes in a corner are the drafting sign for glass, and glazing bars draw a cross.
+- `OpeningSymbol` draws the opening symbol of an elevation viewed from outside: dashed lines whose apex points to the hinged side, a second pair pointing down for the tilt of a tilt-and-turn sash, and the handle on the side that opens.
+- Below the window a chain of pane widths, measured to the mullions' centres, and the overall width; to the left the top light and the main panes, and the overall height.
+- A sash that is too wide is outlined in red and labelled "SASH TOO WIDE".
+
+```tsx
+import { Box } from '@mui/material'
+import { useLayoutEffect, useRef, useState } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DimensionLine } from './DimensionLine.js'
+import { OpeningSymbol } from './OpeningSymbol.js'
+import { SHEET } from './sheet-style.js'
+
+// Sash stiles and rails, and the bead that holds a fixed pane, in millimetres
+const SASH = 56
+const BEAD = 14
+const GLAZING_BAR = 26
+// Room around the window for the dimension tiers, in screen pixels
+const TIER = 34
+const MARGIN = { top: 16, right: 16 }
+
+interface Size {
+  readonly width: number
+  readonly height: number
+}
+
+// The element's size, measured again whenever it changes
+const useSize = () => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [size, setSize] = useState<Size | null>(null)
+
+  useLayoutEffect(() => {
+    const element = ref.current
+
+    if (element === null) {
+      return
+    }
+
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) {
+        setSize({ width: entry.contentRect.width, height: entry.contentRect.height })
+      }
+    })
+    observer.observe(element)
+
+    return () => observer.disconnect()
+  }, [])
+
+  return { ref, size }
+}
+
+const inset = (rect: { x: number; y: number; width: number; height: number }, by: number) => {
+  return { x: rect.x + by, y: rect.y + by, width: rect.width - 2 * by, height: rect.height - 2 * by }
+}
+
+// The elevation of the window as configured, drawn in millimetres from the spec's `$panes` expression. The drawing is
+// fitted to its box: lines, ticks and lettering are sized in screen pixels, so a small window and a large one read
+// the same, and its proportions follow the width and height.
+export const ShopDrawing = () => {
+  const casement = phx.frontend.useRootEntityState()
+  const { ref, size } = useSize()
+  const { width: W, height: H, $panes: panes, $mullionWidth: mullion } = casement
+  const mainPanes = panes.filter(pane => pane.key.startsWith('P'))
+  const topLight = panes.find(pane => pane.key === 'T1')
+  const left = (topLight ? 2 : 1) * TIER + 18
+  const bottom = (mainPanes.length > 1 ? 2 : 1) * TIER + 14
+  const timber = SHEET.timber[casement.finish]
+
+  // Pixels per millimetre: the window and its margins fill the box in its tighter direction
+  const scale =
+    size === null
+      ? 0
+      : Math.max(0.01, Math.min((size.width - left - MARGIN.right) / W, (size.height - MARGIN.top - bottom) / H))
+  const px = scale > 0 ? 1 / scale : 1
+  const viewBox = [-left * px, -MARGIN.top * px, W + (left + MARGIN.right) * px, H + (MARGIN.top + bottom) * px]
+  // The chain of pane widths along the bottom, measured to the centres of the mullions
+  const chain = [0, ...mainPanes.slice(0, -1).map(pane => pane.x + pane.width + mullion / 2), W]
+  const split = topLight ? topLight.y + topLight.height + mullion / 2 : null
+
+  return (
+    <Box component="div" ref={ref} sx={{ position: 'absolute', inset: 0 }}>
+      {size !== null && scale > 0 && (
+        <svg
+          viewBox={viewBox.join(' ')}
+          width={size.width}
+          height={size.height}
+          role="img"
+          aria-label={`Elevation of a ${W} by ${H} mm window`}
+          style={{ display: 'block' }}
+        >
+          {/* The frame; the openings drawn over it leave the frame, the mullions and the transom */}
+          <rect x={0} y={0} width={W} height={H} fill={timber} stroke={SHEET.ink} strokeWidth={2 * px} />
+
+          {panes.map(pane => {
+            const isSash = pane.opening !== 'Fixed'
+            const glass = inset(pane, isSash ? SASH : BEAD)
+            const outline = pane.oversize ? SHEET.attention : SHEET.ink
+
+            return (
+              <g key={pane.key}>
+                <rect
+                  x={pane.x}
+                  y={pane.y}
+                  width={pane.width}
+                  height={pane.height}
+                  fill={isSash ? timber : SHEET.glass}
+                  stroke={SHEET.ink}
+                  strokeWidth={1.2 * px}
+                />
+                <rect {...glass} fill={SHEET.glass} stroke={SHEET.glassStroke} strokeWidth={px} />
+                {/* Two short strokes in a corner, the drafting sign for glass */}
+                <polyline
+                  points={`${glass.x + glass.width * 0.1},${glass.y + glass.height * 0.28} ${glass.x + glass.width * 0.28},${glass.y + glass.height * 0.1}`}
+                  stroke={SHEET.glassStroke}
+                  strokeWidth={1.2 * px}
+                  fill="none"
+                />
+                <polyline
+                  points={`${glass.x + glass.width * 0.1},${glass.y + glass.height * 0.4} ${glass.x + glass.width * 0.4},${glass.y + glass.height * 0.1}`}
+                  stroke={SHEET.glassStroke}
+                  strokeWidth={1.2 * px}
+                  fill="none"
+                />
+                {casement.glazingBars && (
+                  <g fill={timber} stroke={SHEET.ink} strokeWidth={px}>
+                    <rect
+                      x={glass.x + glass.width / 2 - GLAZING_BAR / 2}
+                      y={glass.y}
+                      width={GLAZING_BAR}
+                      height={glass.height}
+                    />
+                    <rect
+                      x={glass.x}
+                      y={glass.y + glass.height / 2 - GLAZING_BAR / 2}
+                      width={glass.width}
+                      height={GLAZING_BAR}
+                    />
+                  </g>
+                )}
+                <OpeningSymbol opening={pane.opening} glass={glass} sash={pane} stile={SASH} px={px} color={outline} />
+                {pane.oversize && (
+                  <>
+                    <rect
+                      {...inset(pane, -6 * px)}
+                      fill="none"
+                      stroke={SHEET.attention}
+                      strokeWidth={2 * px}
+                      strokeDasharray={`${6 * px} ${4 * px}`}
+                    />
+                    <text
+                      x={pane.x + pane.width / 2}
+                      y={pane.y + 30 * px}
+                      textAnchor="middle"
+                      fill={SHEET.attention}
+                      fontFamily={SHEET.font}
+                      fontSize={12 * px}
+                      fontWeight={700}
+                      letterSpacing={px}
+                    >
+                      SASH TOO WIDE
+                    </text>
+                  </>
+                )}
+              </g>
+            )
+          })}
+
+          {mainPanes.length > 1 &&
+            chain
+              .slice(1)
+              .map((end, index) => (
+                <DimensionLine
+                  key={`chain-${end}`}
+                  from={chain[index] ?? 0}
+                  to={end}
+                  at={H + TIER * px}
+                  origin={H}
+                  axis="horizontal"
+                  px={px}
+                />
+              ))}
+          <DimensionLine
+            from={0}
+            to={W}
+            at={H + (mainPanes.length > 1 ? 2 : 1) * TIER * px}
+            origin={H}
+            axis="horizontal"
+            px={px}
+          />
+
+          {split !== null && (
+            <>
+              <DimensionLine from={0} to={split} at={-TIER * px} origin={0} axis="vertical" px={px} />
+              <DimensionLine from={split} to={H} at={-TIER * px} origin={0} axis="vertical" px={px} />
+            </>
+          )}
+          <DimensionLine
+            from={0}
+            to={H}
+            at={-(split !== null ? 2 : 1) * TIER * px}
+            origin={0}
+            axis="vertical"
+            px={px}
+          />
+        </svg>
+      )}
+    </Box>
+  )
+}
+```
+
+`DimensionLine` draws one dimension the way a shop drawing does: extension lines that stop short of the object, a dimension line with an architectural tick at each end, and the length above the line.
+
+```tsx
+import { SHEET } from './sheet-style.js'
+
+interface DimensionLineProps {
+  // Along the measured axis, in millimetres
+  readonly from: number
+  readonly to: number
+  // Where the dimension line runs across the measured axis, in millimetres
+  readonly at: number
+  // Where the extension lines start, at the edge of the object, in millimetres
+  readonly origin: number
+  readonly axis: 'horizontal' | 'vertical'
+  // Millimetres per screen pixel, so ticks, gaps and text keep their size at any scale
+  readonly px: number
+}
+
+// A dimension as a shop drawing draws it: extension lines that stop short of the object, a dimension line between
+// them with an architectural tick at each end, and the length in millimetres above the line
+export const DimensionLine = ({ from, to, at, origin, axis, px }: DimensionLineProps) => {
+  const gap = 4 * px
+  const overshoot = 5 * px
+  const tick = 5 * px
+  const direction = at > origin ? 1 : -1
+  const label = String(Math.round(Math.abs(to - from)))
+  const middle = (from + to) / 2
+  // Maps (along, across) to SVG coordinates for the axis
+  const point = (along: number, across: number) => (axis === 'horizontal' ? `${along},${across}` : `${across},${along}`)
+
+  return (
+    <g stroke={SHEET.dimension} strokeWidth={px} fill="none">
+      <polyline points={`${point(from, origin + direction * gap)} ${point(from, at + direction * overshoot)}`} />
+      <polyline points={`${point(to, origin + direction * gap)} ${point(to, at + direction * overshoot)}`} />
+      <polyline points={`${point(from - overshoot, at)} ${point(to + overshoot, at)}`} />
+      {[from, to].map(end => (
+        <polyline
+          key={end}
+          strokeWidth={1.6 * px}
+          points={`${point(end - tick, at + tick)} ${point(end + tick, at - tick)}`}
+        />
+      ))}
+      <text
+        x={axis === 'horizontal' ? middle : at - 5 * px}
+        y={axis === 'horizontal' ? at - 5 * px : middle}
+        transform={axis === 'vertical' ? `rotate(-90 ${at - 5 * px} ${middle})` : undefined}
+        textAnchor="middle"
+        fill={SHEET.dimension}
+        stroke="none"
+        fontFamily={SHEET.font}
+        fontSize={13 * px}
+        fontWeight={500}
+      >
+        {label}
+      </text>
+    </g>
+  )
+}
+```
+
+## Questions that depend on earlier answers
+
+The hinge side matters only for a single sash that swings sideways, and the top light's height only when there is a top light. Both are spec components with a filter:
+
+```yaml
+components:
+  Window:
+    genericDimension:
+      topLightHeight:
+        value:
+          $bind: topLightHeight
+        min: 250
+        max: 700
+        unit: mm
+        decimalPlaces: 0
+        $filter:
+          active:
+            $eval: self.topLight
+    attributeSelection:
+      hinge:
+        value:
+          $bind: hinge
+        options:
+          - label: Left
+            value: Left
+          - label: Right
+            value: Right
+        # A single sash that swings sideways needs a hinge side; paired sashes are hung from the outer edges
+        $filter:
+          active:
+            $eval: self.lights === 'One' && (self.opening === 'SideHung' || self.opening === 'TiltTurn')
+```
+
+`MillimetreField` and `SegmentedField` ask `phx.frontend.useComponent()` for their component and render nothing while it is inactive, because the control hooks throw for an inactive component; [Ardent Compressor](?path=/docs/layouts-gallery-ardent-compressor--docs#questions-that-depend-on-earlier-answers) shows the pattern in full. `MillimetreField` stages each value while the slider moves, so the drawing follows the thumb, and commits it when the thumb is let go, when a typed value is entered or after a 10 mm step.
+
+## Rules the drawing shows
+
+A sash wider than its hinges carry would sag, and a top light can leave too little window below it. Both rules are `warning` invariants: the change is kept, so the drawing shows the problem, the inputs say how to fix it, and the window cannot be ordered until it is fixed.
+
+```yaml
+invariants:
+  Window:
+    sashSize:
+      types:
+        - sashTooWide
+    topLightTooTall:
+      type: topLightTooTall
+      severity: warning
+      message: The top light leaves less than 500 mm for the main panes. Lower the top light or raise the window.
+```
+
+```ts
+import { phx } from '../../.phoenix/phx.js'
+
+const MAX_SASH_WIDTH = { Fixed: Infinity, SideHung: 900, TiltTurn: 1300, TopHung: 1600 }
+const OPENING_LABEL = { Fixed: 'fixed', SideHung: 'side-hung', TiltTurn: 'tilt and turn', TopHung: 'top-hung' }
+const MIN_MAIN_HEIGHT = 500
+
+// Both rules are warnings: the drawing keeps the change and marks the problem, and the window cannot be ordered until
+// it is resolved
+export default phx.domain.implementCustomInvariants({
+  Window: {
+    // A sash wider than its hinges carry would sag; the message names the limit of the chosen opening
+    sashSize: s => {
+      const oversize = s.$panes.find(pane => pane.oversize)
+
+      if (oversize === undefined) {
+        return []
+      }
+
+      return [
+        {
+          type: 'sashTooWide',
+          severity: 'warning',
+          message: `A ${OPENING_LABEL[s.opening]} sash can be at most ${MAX_SASH_WIDTH[s.opening].toLocaleString('en-GB')} mm wide, and these are ${Math.round(oversize.width).toLocaleString('en-GB')} mm. Add a pane across or make the window narrower.`,
+        },
+      ]
+    },
+    topLightTooTall: s => {
+      return !s.topLight || s.height - 2 * s.$frameWidth - s.topLightHeight - s.$mullionWidth >= MIN_MAIN_HEIGHT
+    },
+  },
+})
+```
+
+The drawing marks the oversized sashes from `$panes`, whose `oversize` flag the same limit sets. `WindowInputs` shows each warning under the group of inputs that can resolve it, reading it from `phx.frontend.useFinalizeViolations()`, and `OrderPanel` disables **Add to order** with the warning as its hint.
+
+## Add to order
+
+The spec declares one finalize action. Its handler, `src/handlers/order-window.ts`, stands in for the joinery's order service: it waits, then enters the `ordered` navigation state. In that state the panel confirms the order and the inputs are locked until **Draw another**. A viewer of a shared configuration sees the price and no button.
+
+```yaml
+components:
+  Window:
+    price:
+      main:
+        price:
+          $read: $price
+        currency: GBP
+    finalizeAction:
+      order:
+        variant: primary
+        label: Add to order
+        title: Add the window as drawn to your order
+        icon: ShoppingBag
+        handler: orderWindow
+```
+
+```tsx
+import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { FENWICK } from './tokens.js'
+
+interface OrderPanelProps {
+  // On a phone the panel is a bar: the price beside the button, without the figures
+  readonly compact: boolean
+}
+
+// The price and the spec's `order` finalize action. While a warning holds, the action is `disabled` and its `hints`
+// say why. In the `ordered` navigation state the panel confirms the order instead; a viewer sees the price only.
+export const OrderPanel = ({ compact }: OrderPanelProps) => {
+  const casement = phx.frontend.useRootEntityState()
+  const price = phx.frontend.useRootEntityPrice()
+  const { primary, hints } = phx.frontend.useFinalizeActions()
+  const navigationState = phx.frontend.useActiveNavigationState()
+  const navigate = phx.frontend.useNavigate()
+  const { accessInfo } = phx.frontend.useAccessService()
+  const isPending = primary?.isPending ?? false
+
+  if (navigationState === 'ordered') {
+    return (
+      <Box component="div" role="status" sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <Box component="div" sx={{ display: 'grid', flex: 1 }}>
+          <Typography sx={{ fontFamily: FENWICK.font, fontSize: 18, fontWeight: 600, color: FENWICK.green }}>
+            Added to your order
+          </Typography>
+          <Typography sx={{ fontFamily: FENWICK.font, fontSize: 14, color: FENWICK.muted }}>
+            {casement.width} × {casement.height} mm, {price}
+          </Typography>
+        </Box>
+        <Button
+          onClick={() => navigate('design')}
+          sx={{
+            fontFamily: FENWICK.font,
+            fontSize: 15,
+            color: FENWICK.ink,
+            textTransform: 'none',
+            textDecoration: 'underline',
+          }}
+        >
+          Draw another
+        </Button>
+      </Box>
+    )
+  }
+
+  const showButton = primary !== null && !accessInfo.viewMode
+
+  return (
+    <Box component="div" sx={{ display: 'grid', gap: 1.25 }}>
+      <Box component="div" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
+        <Box component="div" sx={{ display: 'grid' }}>
+          <Typography
+            sx={{ fontFamily: FENWICK.font, fontSize: compact ? 22 : 28, fontWeight: 700, color: FENWICK.ink }}
+          >
+            {price}
+          </Typography>
+          <Typography sx={{ fontFamily: FENWICK.font, fontSize: 13, color: FENWICK.muted, whiteSpace: 'nowrap' }}>
+            {compact
+              ? 'incl. VAT'
+              : `Uw ${casement.$uValue.toFixed(2)} W/m²K · ${Math.round(casement.$weightKg)} kg · incl. VAT`}
+          </Typography>
+        </Box>
+        {showButton && (
+          <Button
+            variant="contained"
+            disableElevation
+            disabled={primary.disabled || isPending}
+            onClick={() => void primary.run()}
+            title={primary.title}
+            startIcon={isPending ? <CircularProgress size={16} color="inherit" /> : undefined}
+            sx={{
+              minBlockSize: 48,
+              paddingInline: 3,
+              borderRadius: 1.5,
+              bgcolor: FENWICK.green,
+              fontFamily: FENWICK.font,
+              fontSize: 16,
+              fontWeight: 600,
+              textTransform: 'none',
+              '&:hover': { bgcolor: '#15302a' },
+              '&.Mui-disabled': { bgcolor: FENWICK.line, color: FENWICK.muted },
+            }}
+          >
+            {isPending ? 'Adding…' : primary.label}
+          </Button>
+        )}
+      </Box>
+      {!compact && showButton && primary.disabled && hints && (
+        <Typography sx={{ fontFamily: FENWICK.font, fontSize: 13, color: FENWICK.attention }}>
+          Resolve the drawing's warning to order: {hints}
+        </Typography>
+      )}
+      {primary?.error && <Alert severity="error">The window could not be added: {primary.error.message}</Alert>}
+    </Box>
+  )
+}
+```
+
+## On a phone
+
+The same layout in a frame 390 pixels wide: the drawing keeps the top of the screen with the size, the U-value and the weight below it, the inputs scroll underneath, and the price with **Add to order** is a bar at the bottom. Opened on its own from the sidebar, the **Phone** story sets Storybook's viewport to 390 × 844.
+
+## Test cases
+
+- The page opens on a 1400 × 1250 mm two-light window with side-hung sashes hinged at the outer edges: two dashed symbols with their apexes at the outer sides, the handles on the meeting stiles, the pane widths 700 and 700 below, 1400 overall and 1250 at the side. The title block shows Uw 1.30 W/m²K and 50 kg, and the price is **£1,276.00**.
+- A width of 2100 mm outlines both sashes in red with "SASH TOO WIDE", shows "A side-hung sash can be at most 900 mm wide, and these are 944 mm. …" under **Overall size**, and disables **Add to order**.
+- Three panes across clear the warning: the middle pane reads "FIXED", the outer two open, and the chain reads 710, 680 and 710.
+- **Top light** adds a fixed pane above a transom, the **Top light height** input, and a second tier on the left with the two heights. A top light of 600 mm in a 1250 mm window shows the top light warning under **Panes**; 380 mm clears it.
+- One pane with **Tilt and turn** shows the **Hinged on the** question; **Right** puts the symbol's apex on the right and the handle on the left, with a second pair of lines pointing down for the tilt.
+- **Top-hung** removes the hinge question and points the symbol's apex to the top, with the handle on the bottom rail.
+- An 800 × 1800 mm window draws tall and narrow, with its lettering at the same size as the wide one's.
+- **Triple** glazing lowers the U-value in the title block and raises the price; **Glazing bars** draws a cross of bars in every pane; **Natural oak** tints the frame and changes the title block's finish.
+- The **−** and **+** buttons change a size by 10 mm, and a typed size is clamped to the input's range.
+- **Add to order** shows a spinner and "Adding…", then "Added to your order" with the size and the price; the inputs are locked until **Draw another**.
+- In the **Phone** story the drawing stays at the top while the inputs scroll, the same warning and drawing changes appear, and **Add to order** confirms the order in the bottom bar.
+- 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 inputs are inert and **Add to order** 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.
+- **Sections and a drawing download.** The sheet shows the elevation only. A section through the frame, or a download of the SVG, is more of the same React code.
+- **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
+
+- [Ardent Compressor](?path=/docs/layouts-gallery-ardent-compressor--docs) is a quote form with steps, and [Sunfold Solar](?path=/docs/layouts-gallery-sunfold-solar--docs) 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 → Expressions](?path=/docs/phoenix-domain-model--docs#expressions) describes declared expressions.
+
+## 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:
+      - Window
+    aliases:
+      RootEntity:
+        - Window
+    commonTypes:
+      Lights:
+        enum:
+          - One
+          - Two
+          - Three
+      Opening:
+        enum:
+          - Fixed
+          - SideHung
+          - TiltTurn
+          - TopHung
+      Hinge:
+        enum:
+          - Left
+          - Right
+      Glazing:
+        enum:
+          - Double
+          - Triple
+          - Acoustic
+      Finish:
+        enum:
+          - Oak
+          - White
+          - Anthracite
+    shapes:
+      Window:
+        width:
+          type: number
+        height:
+          type: number
+        lights:
+          $ref: '#/model/latest/commonTypes/Lights'
+        topLight:
+          type: boolean
+        topLightHeight:
+          type: number
+        opening:
+          $ref: '#/model/latest/commonTypes/Opening'
+        hinge:
+          $ref: '#/model/latest/commonTypes/Hinge'
+        glazing:
+          $ref: '#/model/latest/commonTypes/Glazing'
+        glazingBars:
+          type: boolean
+        finish:
+          $ref: '#/model/latest/commonTypes/Finish'
+
+presets:
+  - rootEntityType: Window
+    initialDomainEntities:
+      - id: Window-1
+        type: Window
+        width: 1400
+        height: 1250
+        lights: Two
+        topLight: false
+        topLightHeight: 400
+        opening: SideHung
+        hinge: Left
+        glazing: Double
+        glazingBars: false
+        finish: White
+
+navigationStates:
+  - design
+  - ordered
+
+# The geometry the drawing shows and the figures in its title block: declared here, computed in
+# src/expressions/window.ts from the size, the panes and the opening
+expressions:
+  Window:
+    $panes:
+      type: array
+      items:
+        type: object
+        properties:
+          key:
+            type: string
+          x:
+            type: number
+          y:
+            type: number
+          width:
+            type: number
+          height:
+            type: number
+          opening:
+            enum:
+              - Fixed
+              - SideLeft
+              - SideRight
+              - TiltLeft
+              - TiltRight
+              - Top
+          oversize:
+            type: boolean
+        required:
+          - key
+          - x
+          - y
+          - width
+          - height
+          - opening
+          - oversize
+        additionalProperties: false
+    $frameWidth:
+      type: number
+    $mullionWidth:
+      type: number
+    $glassArea:
+      type: number
+    $uValue:
+      type: number
+    $weightKg:
+      type: number
+    $glassBuildUp:
+      type: string
+    $price:
+      type: number
+
+invariants:
+  Window:
+    sashSize:
+      types:
+        - sashTooWide
+    topLightTooTall:
+      type: topLightTooTall
+      severity: warning
+      message: The top light leaves less than 500 mm for the main panes. Lower the top light or raise the window.
+
+components:
+  Window:
+    price:
+      main:
+        price:
+          $read: $price
+        currency: GBP
+    finalizeAction:
+      order:
+        variant: primary
+        label: Add to order
+        title: Add the window as drawn to your order
+        icon: ShoppingBag
+        handler: orderWindow
+    genericDimension:
+      width:
+        value:
+          $bind: width
+        min: 500
+        max: 2400
+        unit: mm
+        decimalPlaces: 0
+      height:
+        value:
+          $bind: height
+        min: 500
+        max: 2200
+        unit: mm
+        decimalPlaces: 0
+      topLightHeight:
+        value:
+          $bind: topLightHeight
+        min: 250
+        max: 700
+        unit: mm
+        decimalPlaces: 0
+        $filter:
+          active:
+            $eval: self.topLight
+    attributeSelection:
+      lights:
+        value:
+          $bind: lights
+        options:
+          - label: '1'
+            value: One
+          - label: '2'
+            value: Two
+          - label: '3'
+            value: Three
+      opening:
+        value:
+          $bind: opening
+        options:
+          - label: Fixed
+            description: Glazed into the frame, does not open
+            value: Fixed
+          - label: Side-hung
+            description: Opens outwards like a door
+            value: SideHung
+          - label: Tilt and turn
+            description: Tilts in to vent, turns in to clean
+            value: TiltTurn
+          - label: Top-hung
+            description: Opens outwards from the top
+            value: TopHung
+      hinge:
+        value:
+          $bind: hinge
+        options:
+          - label: Left
+            value: Left
+          - label: Right
+            value: Right
+        # A single sash that swings sideways needs a hinge side; paired sashes are hung from the outer edges
+        $filter:
+          active:
+            $eval: self.lights === 'One' && (self.opening === 'SideHung' || self.opening === 'TiltTurn')
+      glazing:
+        value:
+          $bind: glazing
+        options:
+          - label: Double
+            description: 4-16-4 argon, low-E
+            value: Double
+          - label: Triple
+            description: 4-12-4-12-4 argon, two low-E
+            value: Triple
+          - label: Acoustic
+            description: 6.8 laminated, 16 argon, 4
+            value: Acoustic
+      finish:
+        value:
+          $bind: finish
+        options:
+          - label: Natural oak
+            value: Oak
+          - label: Pure white
+            description: RAL 9016
+            value: White
+          - label: Anthracite
+            description: RAL 7016
+            value: Anthracite
+    attributeSwitch:
+      topLight:
+        value:
+          $bind: topLight
+      glazingBars:
+        value:
+          $bind: glazingBars
+```
+
+### ./src/\_drawing/DimensionLine.tsx
+
+```tsx
+import { SHEET } from './sheet-style.js'
+
+interface DimensionLineProps {
+  // Along the measured axis, in millimetres
+  readonly from: number
+  readonly to: number
+  // Where the dimension line runs across the measured axis, in millimetres
+  readonly at: number
+  // Where the extension lines start, at the edge of the object, in millimetres
+  readonly origin: number
+  readonly axis: 'horizontal' | 'vertical'
+  // Millimetres per screen pixel, so ticks, gaps and text keep their size at any scale
+  readonly px: number
+}
+
+// A dimension as a shop drawing draws it: extension lines that stop short of the object, a dimension line between
+// them with an architectural tick at each end, and the length in millimetres above the line
+export const DimensionLine = ({ from, to, at, origin, axis, px }: DimensionLineProps) => {
+  const gap = 4 * px
+  const overshoot = 5 * px
+  const tick = 5 * px
+  const direction = at > origin ? 1 : -1
+  const label = String(Math.round(Math.abs(to - from)))
+  const middle = (from + to) / 2
+  // Maps (along, across) to SVG coordinates for the axis
+  const point = (along: number, across: number) => (axis === 'horizontal' ? `${along},${across}` : `${across},${along}`)
+
+  return (
+    <g stroke={SHEET.dimension} strokeWidth={px} fill="none">
+      <polyline points={`${point(from, origin + direction * gap)} ${point(from, at + direction * overshoot)}`} />
+      <polyline points={`${point(to, origin + direction * gap)} ${point(to, at + direction * overshoot)}`} />
+      <polyline points={`${point(from - overshoot, at)} ${point(to + overshoot, at)}`} />
+      {[from, to].map(end => (
+        <polyline
+          key={end}
+          strokeWidth={1.6 * px}
+          points={`${point(end - tick, at + tick)} ${point(end + tick, at - tick)}`}
+        />
+      ))}
+      <text
+        x={axis === 'horizontal' ? middle : at - 5 * px}
+        y={axis === 'horizontal' ? at - 5 * px : middle}
+        transform={axis === 'vertical' ? `rotate(-90 ${at - 5 * px} ${middle})` : undefined}
+        textAnchor="middle"
+        fill={SHEET.dimension}
+        stroke="none"
+        fontFamily={SHEET.font}
+        fontSize={13 * px}
+        fontWeight={500}
+      >
+        {label}
+      </text>
+    </g>
+  )
+}
+```
+
+### ./src/\_drawing/DrawingSheet.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { ShopDrawing } from './ShopDrawing.js'
+import { TitleBlock } from './TitleBlock.js'
+import { SHEET } from './sheet-style.js'
+
+// The title column gives way to the drawing on a narrow screen
+const TITLE_WIDTH = 'clamp(200px, 26%, 260px)'
+const PHONE_TITLE_HEIGHT = 49
+
+interface DrawingSheetProps {
+  readonly compact: boolean
+}
+
+// The sheet the elevation is drawn on: drafting paper with a grid and a ruled border, the drawing, and the title
+// block, along the right edge on a desktop and as a row of figures along the bottom on a phone
+export const DrawingSheet = ({ compact }: DrawingSheetProps) => {
+  const casement = phx.frontend.useRootEntityState()
+  const gutter = compact ? 10 : 24
+
+  return (
+    <Box
+      component="div"
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        bgcolor: SHEET.paper,
+        backgroundImage: `linear-gradient(${SHEET.grid} 1px, transparent 1px), linear-gradient(90deg, ${SHEET.grid} 1px, transparent 1px)`,
+        backgroundSize: '20px 20px',
+      }}
+    >
+      <Box
+        component="div"
+        sx={{
+          position: 'absolute',
+          inset: `${gutter}px`,
+          display: 'grid',
+          gridTemplateColumns: compact ? 'minmax(0, 1fr)' : `minmax(0, 1fr) ${TITLE_WIDTH}`,
+          gridTemplateRows: compact ? `minmax(0, 1fr) ${PHONE_TITLE_HEIGHT}px` : 'minmax(0, 1fr)',
+          border: `1.5px solid ${SHEET.ink}`,
+          outline: `1px solid ${SHEET.ink}`,
+          outlineOffset: 3,
+        }}
+      >
+        <Box
+          component="div"
+          sx={{ display: 'flex', flexDirection: 'column', gap: 1, minBlockSize: 0, margin: compact ? 0.75 : 3 }}
+        >
+          {/* The view's name and the sections' face widths, above the drawing so they never crowd it */}
+          <Box
+            component="div"
+            sx={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              justifyContent: 'space-between',
+              columnGap: 2,
+              fontFamily: SHEET.font,
+            }}
+          >
+            <Typography
+              sx={{
+                fontFamily: SHEET.font,
+                fontSize: compact ? 10 : 12,
+                fontWeight: 600,
+                letterSpacing: '0.16em',
+                color: SHEET.ink,
+              }}
+            >
+              ELEVATION · VIEWED FROM OUTSIDE
+            </Typography>
+            <Typography sx={{ fontFamily: SHEET.font, fontSize: compact ? 10 : 11, color: SHEET.inkSoft }}>
+              FRAME {casement.$frameWidth} · MULLION {casement.$mullionWidth}
+            </Typography>
+          </Box>
+          <Box component="div" sx={{ position: 'relative', flex: 1, minBlockSize: 0 }}>
+            <ShopDrawing />
+          </Box>
+        </Box>
+        <Box component="div" sx={compact ? { borderBlockStart: `1px solid ${SHEET.ink}` } : undefined}>
+          <TitleBlock compact={compact} />
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+```
+
+### ./src/\_drawing/OpeningSymbol.tsx
+
+```tsx
+import { SHEET } from './sheet-style.js'
+
+type PaneOpening = 'Fixed' | 'SideLeft' | 'SideRight' | 'TiltLeft' | 'TiltRight' | 'Top'
+
+interface Rect {
+  readonly x: number
+  readonly y: number
+  readonly width: number
+  readonly height: number
+}
+
+interface OpeningSymbolProps {
+  readonly opening: PaneOpening
+  // The glass the lines are drawn across, and the sash whose stile carries the handle, in millimetres
+  readonly glass: Rect
+  readonly sash: Rect
+  // The width of the sash's stiles and rails
+  readonly stile: number
+  readonly px: number
+  readonly color: string
+}
+
+// The opening symbol of an elevation viewed from outside: dashed lines whose apex points to the hinged side, a second
+// pair pointing down for the tilt of a tilt-and-turn sash, and the handle on the side that opens. A fixed light is
+// marked "FIXED".
+export const OpeningSymbol = ({ opening, glass, sash, stile, px, color }: OpeningSymbolProps) => {
+  const { x, y, width, height } = glass
+  const right = x + width
+  const bottom = y + height
+  const midX = x + width / 2
+  const midY = y + height / 2
+  const dash = `${8 * px} ${5 * px}`
+  const handleLength = Math.min(120, height / 3)
+  const handleWidth = Math.min(16, stile / 2)
+
+  if (opening === 'Fixed') {
+    return (
+      <text
+        x={midX}
+        y={midY}
+        textAnchor="middle"
+        dominantBaseline="middle"
+        fill={SHEET.inkSoft}
+        fontFamily={SHEET.font}
+        fontSize={11 * px}
+        letterSpacing={2 * px}
+      >
+        FIXED
+      </text>
+    )
+  }
+
+  const hingeLeft = opening === 'SideLeft' || opening === 'TiltLeft'
+  const sideLines =
+    opening === 'Top'
+      ? `${x},${bottom} ${midX},${y} ${right},${bottom}`
+      : hingeLeft
+        ? `${right},${y} ${x},${midY} ${right},${bottom}`
+        : `${x},${y} ${right},${midY} ${x},${bottom}`
+  const tiltLines =
+    opening === 'TiltLeft' || opening === 'TiltRight' ? `${x},${y} ${midX},${bottom} ${right},${y}` : null
+  // The handle sits opposite the hinges: on the free side, or at the bottom of a top-hung sash
+  const handle =
+    opening === 'Top'
+      ? {
+          x: midX - handleLength / 2,
+          y: sash.y + sash.height - (stile + handleWidth) / 2,
+          width: handleLength,
+          height: handleWidth,
+        }
+      : {
+          x: hingeLeft ? sash.x + sash.width - (stile + handleWidth) / 2 : sash.x + (stile - handleWidth) / 2,
+          y: midY - handleLength / 2,
+          width: handleWidth,
+          height: handleLength,
+        }
+
+  return (
+    <g>
+      <polyline points={sideLines} fill="none" stroke={color} strokeWidth={1.2 * px} strokeDasharray={dash} />
+      {tiltLines && (
+        <polyline points={tiltLines} fill="none" stroke={color} strokeWidth={1.2 * px} strokeDasharray={dash} />
+      )}
+      <rect {...handle} rx={handleWidth / 2} fill={SHEET.paper} stroke={SHEET.ink} strokeWidth={1.4 * px} />
+    </g>
+  )
+}
+```
+
+### ./src/\_drawing/ShopDrawing.tsx
+
+```tsx
+import { Box } from '@mui/material'
+import { useLayoutEffect, useRef, useState } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DimensionLine } from './DimensionLine.js'
+import { OpeningSymbol } from './OpeningSymbol.js'
+import { SHEET } from './sheet-style.js'
+
+// Sash stiles and rails, and the bead that holds a fixed pane, in millimetres
+const SASH = 56
+const BEAD = 14
+const GLAZING_BAR = 26
+// Room around the window for the dimension tiers, in screen pixels
+const TIER = 34
+const MARGIN = { top: 16, right: 16 }
+
+interface Size {
+  readonly width: number
+  readonly height: number
+}
+
+// The element's size, measured again whenever it changes
+const useSize = () => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [size, setSize] = useState<Size | null>(null)
+
+  useLayoutEffect(() => {
+    const element = ref.current
+
+    if (element === null) {
+      return
+    }
+
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) {
+        setSize({ width: entry.contentRect.width, height: entry.contentRect.height })
+      }
+    })
+    observer.observe(element)
+
+    return () => observer.disconnect()
+  }, [])
+
+  return { ref, size }
+}
+
+const inset = (rect: { x: number; y: number; width: number; height: number }, by: number) => {
+  return { x: rect.x + by, y: rect.y + by, width: rect.width - 2 * by, height: rect.height - 2 * by }
+}
+
+// The elevation of the window as configured, drawn in millimetres from the spec's `$panes` expression. The drawing is
+// fitted to its box: lines, ticks and lettering are sized in screen pixels, so a small window and a large one read
+// the same, and its proportions follow the width and height.
+export const ShopDrawing = () => {
+  const casement = phx.frontend.useRootEntityState()
+  const { ref, size } = useSize()
+  const { width: W, height: H, $panes: panes, $mullionWidth: mullion } = casement
+  const mainPanes = panes.filter(pane => pane.key.startsWith('P'))
+  const topLight = panes.find(pane => pane.key === 'T1')
+  const left = (topLight ? 2 : 1) * TIER + 18
+  const bottom = (mainPanes.length > 1 ? 2 : 1) * TIER + 14
+  const timber = SHEET.timber[casement.finish]
+
+  // Pixels per millimetre: the window and its margins fill the box in its tighter direction
+  const scale =
+    size === null
+      ? 0
+      : Math.max(0.01, Math.min((size.width - left - MARGIN.right) / W, (size.height - MARGIN.top - bottom) / H))
+  const px = scale > 0 ? 1 / scale : 1
+  const viewBox = [-left * px, -MARGIN.top * px, W + (left + MARGIN.right) * px, H + (MARGIN.top + bottom) * px]
+  // The chain of pane widths along the bottom, measured to the centres of the mullions
+  const chain = [0, ...mainPanes.slice(0, -1).map(pane => pane.x + pane.width + mullion / 2), W]
+  const split = topLight ? topLight.y + topLight.height + mullion / 2 : null
+
+  return (
+    <Box component="div" ref={ref} sx={{ position: 'absolute', inset: 0 }}>
+      {size !== null && scale > 0 && (
+        <svg
+          viewBox={viewBox.join(' ')}
+          width={size.width}
+          height={size.height}
+          role="img"
+          aria-label={`Elevation of a ${W} by ${H} mm window`}
+          style={{ display: 'block' }}
+        >
+          {/* The frame; the openings drawn over it leave the frame, the mullions and the transom */}
+          <rect x={0} y={0} width={W} height={H} fill={timber} stroke={SHEET.ink} strokeWidth={2 * px} />
+
+          {panes.map(pane => {
+            const isSash = pane.opening !== 'Fixed'
+            const glass = inset(pane, isSash ? SASH : BEAD)
+            const outline = pane.oversize ? SHEET.attention : SHEET.ink
+
+            return (
+              <g key={pane.key}>
+                <rect
+                  x={pane.x}
+                  y={pane.y}
+                  width={pane.width}
+                  height={pane.height}
+                  fill={isSash ? timber : SHEET.glass}
+                  stroke={SHEET.ink}
+                  strokeWidth={1.2 * px}
+                />
+                <rect {...glass} fill={SHEET.glass} stroke={SHEET.glassStroke} strokeWidth={px} />
+                {/* Two short strokes in a corner, the drafting sign for glass */}
+                <polyline
+                  points={`${glass.x + glass.width * 0.1},${glass.y + glass.height * 0.28} ${glass.x + glass.width * 0.28},${glass.y + glass.height * 0.1}`}
+                  stroke={SHEET.glassStroke}
+                  strokeWidth={1.2 * px}
+                  fill="none"
+                />
+                <polyline
+                  points={`${glass.x + glass.width * 0.1},${glass.y + glass.height * 0.4} ${glass.x + glass.width * 0.4},${glass.y + glass.height * 0.1}`}
+                  stroke={SHEET.glassStroke}
+                  strokeWidth={1.2 * px}
+                  fill="none"
+                />
+                {casement.glazingBars && (
+                  <g fill={timber} stroke={SHEET.ink} strokeWidth={px}>
+                    <rect
+                      x={glass.x + glass.width / 2 - GLAZING_BAR / 2}
+                      y={glass.y}
+                      width={GLAZING_BAR}
+                      height={glass.height}
+                    />
+                    <rect
+                      x={glass.x}
+                      y={glass.y + glass.height / 2 - GLAZING_BAR / 2}
+                      width={glass.width}
+                      height={GLAZING_BAR}
+                    />
+                  </g>
+                )}
+                <OpeningSymbol opening={pane.opening} glass={glass} sash={pane} stile={SASH} px={px} color={outline} />
+                {pane.oversize && (
+                  <>
+                    <rect
+                      {...inset(pane, -6 * px)}
+                      fill="none"
+                      stroke={SHEET.attention}
+                      strokeWidth={2 * px}
+                      strokeDasharray={`${6 * px} ${4 * px}`}
+                    />
+                    <text
+                      x={pane.x + pane.width / 2}
+                      y={pane.y + 30 * px}
+                      textAnchor="middle"
+                      fill={SHEET.attention}
+                      fontFamily={SHEET.font}
+                      fontSize={12 * px}
+                      fontWeight={700}
+                      letterSpacing={px}
+                    >
+                      SASH TOO WIDE
+                    </text>
+                  </>
+                )}
+              </g>
+            )
+          })}
+
+          {mainPanes.length > 1 &&
+            chain
+              .slice(1)
+              .map((end, index) => (
+                <DimensionLine
+                  key={`chain-${end}`}
+                  from={chain[index] ?? 0}
+                  to={end}
+                  at={H + TIER * px}
+                  origin={H}
+                  axis="horizontal"
+                  px={px}
+                />
+              ))}
+          <DimensionLine
+            from={0}
+            to={W}
+            at={H + (mainPanes.length > 1 ? 2 : 1) * TIER * px}
+            origin={H}
+            axis="horizontal"
+            px={px}
+          />
+
+          {split !== null && (
+            <>
+              <DimensionLine from={0} to={split} at={-TIER * px} origin={0} axis="vertical" px={px} />
+              <DimensionLine from={split} to={H} at={-TIER * px} origin={0} axis="vertical" px={px} />
+            </>
+          )}
+          <DimensionLine
+            from={0}
+            to={H}
+            at={-(split !== null ? 2 : 1) * TIER * px}
+            origin={0}
+            axis="vertical"
+            px={px}
+          />
+        </svg>
+      )}
+    </Box>
+  )
+}
+```
+
+### ./src/\_drawing/TitleBlock.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { SHEET } from './sheet-style.js'
+
+const FINISH_LABEL = { Oak: 'Natural oak, oiled', White: 'Pure white, RAL 9016', Anthracite: 'Anthracite, RAL 7016' }
+const LIGHTS_LABEL = { One: 'single', Two: 'two-light', Three: 'three-light' }
+const NOTES = [
+  'Dimensions in millimetres, overall frame size.',
+  'Opening symbols: the apex points to the hinges.',
+  'Do not scale; work to figured dimensions.',
+]
+
+const LABEL_SX = {
+  fontFamily: SHEET.font,
+  fontSize: 9,
+  letterSpacing: '0.14em',
+  textTransform: 'uppercase',
+  color: SHEET.inkSoft,
+} as const
+
+interface CellProps {
+  readonly label: string
+  readonly value: string
+  readonly span?: number
+}
+
+const Cell = ({ label, value, span = 1 }: CellProps) => {
+  return (
+    <Box
+      component="div"
+      sx={{
+        display: 'grid',
+        alignContent: 'start',
+        gap: 0.25,
+        gridColumn: `span ${span}`,
+        paddingInline: 1,
+        paddingBlock: 0.75,
+        borderInlineStart: `1px solid ${SHEET.ink}`,
+        borderBlockStart: `1px solid ${SHEET.ink}`,
+      }}
+    >
+      <Typography sx={LABEL_SX}>{label}</Typography>
+      <Typography
+        sx={{
+          fontFamily: SHEET.font,
+          fontSize: 13,
+          fontWeight: 500,
+          color: SHEET.ink,
+          fontVariantNumeric: 'tabular-nums',
+        }}
+      >
+        {value}
+      </Typography>
+    </Box>
+  )
+}
+
+interface TitleBlockProps {
+  readonly compact: boolean
+}
+
+// The drawing's title block, filled from the configuration: the size, the glass build-up and the thermal and weight
+// figures that the spec's expressions compute. On a desktop it is a column along the sheet's right edge with the
+// notes at its foot; a compact block is one row of figures, for a phone.
+export const TitleBlock = ({ compact }: TitleBlockProps) => {
+  const casement = phx.frontend.useRootEntityState()
+  const configurationId = phx.frontend.useConfigurationId()
+  const drawingNumber = `FL-${String(configurationId)
+    .replace(/[^a-z0-9]/gi, '')
+    .slice(-5)
+    .toUpperCase()}`
+  const figures = [
+    { label: 'Size', value: `${casement.width} × ${casement.height} mm` },
+    { label: 'Uw', value: `${casement.$uValue.toFixed(2)} W/m²K` },
+    { label: 'Weight', value: `${Math.round(casement.$weightKg)} kg` },
+  ]
+
+  if (compact) {
+    return (
+      <Box component="div" sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', bgcolor: SHEET.paper }}>
+        {figures.map(figure => (
+          <Cell key={figure.label} label={figure.label} value={figure.value} />
+        ))}
+      </Box>
+    )
+  }
+
+  return (
+    <Box
+      component="div"
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        // The notes take the rest of the column, so its ruled edge runs down to the border
+        gridTemplateRows: 'repeat(8, auto) 1fr',
+        blockSize: '100%',
+        bgcolor: SHEET.paper,
+      }}
+    >
+      <Box
+        component="div"
+        sx={{
+          gridColumn: 'span 2',
+          display: 'grid',
+          gap: 0.25,
+          padding: 1.25,
+          borderInlineStart: `1px solid ${SHEET.ink}`,
+        }}
+      >
+        <Typography
+          sx={{ fontFamily: SHEET.font, fontSize: 17, fontWeight: 700, letterSpacing: '0.2em', color: SHEET.ink }}
+        >
+          FENWICK &amp; LOWE
+        </Typography>
+        <Typography sx={{ ...LABEL_SX, fontSize: 10 }}>Joinery · Frome, Somerset</Typography>
+      </Box>
+      <Cell label="Title" value={`Casement window, ${LIGHTS_LABEL[casement.lights]}`} span={2} />
+      <Cell label="Drawing" value={drawingNumber} />
+      <Cell label="Revision" value="A" />
+      {figures.map(figure => (
+        <Cell key={figure.label} label={figure.label} value={figure.value} span={figure.label === 'Size' ? 2 : 1} />
+      ))}
+      <Cell label="Glazing" value={casement.$glassBuildUp} span={2} />
+      <Cell label="Finish" value={FINISH_LABEL[casement.finish]} span={2} />
+      <Cell label="Scale" value="Not to scale" span={2} />
+      <Box
+        component="ol"
+        sx={{
+          gridColumn: 'span 2',
+          display: 'grid',
+          alignContent: 'start',
+          gap: 0.5,
+          margin: 0,
+          padding: 1.25,
+          paddingInlineStart: 3.5,
+          borderInlineStart: `1px solid ${SHEET.ink}`,
+          borderBlockStart: `1px solid ${SHEET.ink}`,
+        }}
+      >
+        {NOTES.map(note => (
+          <Typography
+            component="li"
+            key={note}
+            sx={{ fontFamily: SHEET.font, fontSize: 12, lineHeight: 1.35, color: SHEET.inkSoft }}
+          >
+            {note}
+          </Typography>
+        ))}
+      </Box>
+    </Box>
+  )
+}
+```
+
+### ./src/\_drawing/sheet-style.ts
+
+```ts
+// The drawing's conventions: blue-black ink on drafting paper, a red for what needs attention, and the tones that
+// stand for the frame's finish and for glass
+export const SHEET = {
+  paper: '#fbfaf6',
+  grid: 'rgba(47, 93, 138, 0.07)',
+  ink: '#1b2733',
+  inkSoft: '#5d6b78',
+  dimension: '#2f5d8a',
+  attention: '#c0392b',
+  glass: '#e3eef6',
+  glassStroke: '#9db7cc',
+  timber: { Oak: '#ead9bd', White: '#ffffff', Anthracite: '#c9cdd1' },
+  font: "'Barlow', 'Helvetica Neue', Arial, sans-serif",
+} as const
+```
+
+### ./src/\_shared/DesktopPage.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DrawingSheet } from '../_drawing/index.js'
+import { OrderPanel } from './OrderPanel.js'
+import { WindowInputs } from './WindowInputs.js'
+import { FENWICK } from './tokens.js'
+
+const PANEL_WIDTH = 380
+
+// The desktop page: the brand bar, the inputs in a column on the left with the price and the order button at its
+// foot, and the shop drawing filling the rest, where a 3D configurator would show its scene
+export const DesktopPage = () => {
+  const { accessInfo } = phx.frontend.useAccessService()
+  const navigationState = phx.frontend.useActiveNavigationState()
+  // An ordered window keeps its drawing until the customer starts another
+  const readOnly = accessInfo.viewMode || navigationState === 'ordered'
+
+  return (
+    <Box
+      component="div"
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        display: 'grid',
+        gridTemplateRows: 'auto minmax(0, 1fr)',
+        gridTemplateColumns: `${PANEL_WIDTH}px minmax(0, 1fr)`,
+        bgcolor: FENWICK.paper,
+        fontFamily: FENWICK.font,
+      }}
+    >
+      <Box
+        component="header"
+        sx={{
+          gridColumn: '1 / -1',
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 2,
+          paddingInline: 3,
+          paddingBlock: 1.75,
+          bgcolor: FENWICK.green,
+          color: FENWICK.panel,
+        }}
+      >
+        <Typography sx={{ fontFamily: FENWICK.font, fontSize: 20, fontWeight: 700, letterSpacing: '0.22em' }}>
+          FENWICK &amp; LOWE
+        </Typography>
+        <Typography component="h1" sx={{ fontFamily: FENWICK.font, fontSize: 16, color: '#c8d6cf' }}>
+          Made-to-measure casement window
+        </Typography>
+      </Box>
+
+      <Box
+        component="aside"
+        aria-label="Window"
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          minBlockSize: 0,
+          bgcolor: FENWICK.panel,
+          borderInlineEnd: `1px solid ${FENWICK.line}`,
+        }}
+      >
+        <Box component="div" sx={{ flex: 1, minBlockSize: 0, overflowY: 'auto', paddingInline: 3 }}>
+          <WindowInputs readOnly={readOnly} />
+        </Box>
+        <Box component="div" sx={{ padding: 3, borderBlockStart: `1px solid ${FENWICK.line}` }}>
+          <OrderPanel compact={false} />
+        </Box>
+      </Box>
+
+      <Box component="main" aria-label="Shop drawing" sx={{ position: 'relative', minInlineSize: 0, minBlockSize: 0 }}>
+        <DrawingSheet compact={false} />
+        <Box component="div" sx={{ position: 'absolute', insetBlockStart: 40, insetInlineEnd: 40, inlineSize: 320 }}>
+          <LayoutSlots.DesktopSnackbarsRoot />
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/MillimetreField.tsx
+
+```tsx
+import { Box, IconButton, InputBase, Slider, Typography } from '@mui/material'
+import { useEffect, useState } from 'react'
+
+import { genericDimensionComponent } from '@salsita-ai/sdk/domain'
+
+import { phx } from '../../.phoenix/phx.js'
+import { FENWICK } from './tokens.js'
+
+const STEP = 10
+
+interface MillimetreFieldProps {
+  readonly instanceName: string
+  readonly label: string
+  readonly readOnly: boolean
+}
+
+const MillimetreInput = ({ instanceName, label, readOnly }: MillimetreFieldProps) => {
+  const windowId = phx.frontend.useRootEntityId()
+  const dimension = phx.frontend.useGenericDimension(windowId, instanceName)
+  const [draft, setDraft] = useState(String(dimension.value))
+  const min = dimension.min ?? 0
+  const max = dimension.max ?? 3000
+
+  useEffect(() => {
+    setDraft(String(dimension.value))
+  }, [dimension.value])
+
+  // Kept inside the component's range, so a typed value can never leave it
+  const commit = (value: number) => {
+    dimension.update(Math.min(max, Math.max(min, Math.round(value))))
+    dimension.resolve()
+  }
+
+  const commitDraft = () => {
+    const parsed = Number(draft)
+
+    if (Number.isFinite(parsed)) {
+      commit(parsed)
+    } else {
+      setDraft(String(dimension.value))
+    }
+  }
+
+  return (
+    <Box component="div" sx={{ display: 'grid', gap: 0.5 }}>
+      <Box component="div" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Typography
+          component="label"
+          htmlFor={`fenwick-${instanceName}`}
+          sx={{ flex: 1, fontFamily: FENWICK.font, fontSize: 15, fontWeight: 500, color: FENWICK.ink }}
+        >
+          {label}
+        </Typography>
+        <IconButton
+          aria-label={`${label}, ${STEP} mm less`}
+          disabled={readOnly || dimension.value <= min}
+          onClick={() => commit(dimension.value - STEP)}
+          sx={{ inlineSize: 32, blockSize: 32, border: `1px solid ${FENWICK.line}`, color: FENWICK.ink, fontSize: 18 }}
+        >
+          −
+        </IconButton>
+        <Box
+          component="div"
+          sx={{
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: 0.5,
+            paddingInline: 1,
+            paddingBlock: 0.25,
+            borderRadius: 1,
+            border: `1px solid ${FENWICK.line}`,
+            bgcolor: FENWICK.panel,
+            '&:focus-within': { borderColor: FENWICK.green },
+          }}
+        >
+          <InputBase
+            id={`fenwick-${instanceName}`}
+            value={draft}
+            disabled={readOnly}
+            onChange={event => setDraft(event.target.value)}
+            onBlur={commitDraft}
+            onKeyDown={event => {
+              if (event.key === 'Enter') {
+                commitDraft()
+              }
+            }}
+            inputProps={{ inputMode: 'numeric' }}
+            sx={{
+              inlineSize: 52,
+              fontFamily: FENWICK.font,
+              fontSize: 17,
+              fontWeight: 600,
+              color: FENWICK.ink,
+              '& input': { padding: 0, textAlign: 'end', fontVariantNumeric: 'tabular-nums' },
+            }}
+          />
+          <Typography component="span" sx={{ fontFamily: FENWICK.font, fontSize: 13, color: FENWICK.muted }}>
+            mm
+          </Typography>
+        </Box>
+        <IconButton
+          aria-label={`${label}, ${STEP} mm more`}
+          disabled={readOnly || dimension.value >= max}
+          onClick={() => commit(dimension.value + STEP)}
+          sx={{ inlineSize: 32, blockSize: 32, border: `1px solid ${FENWICK.line}`, color: FENWICK.ink, fontSize: 18 }}
+        >
+          +
+        </IconButton>
+      </Box>
+      <Slider
+        value={dimension.value}
+        min={min}
+        max={max}
+        step={STEP}
+        disabled={readOnly}
+        onChange={(_, value) => dimension.update(Array.isArray(value) ? (value[0] ?? min) : value)}
+        onChangeCommitted={() => dimension.resolve()}
+        slotProps={{ input: { 'aria-label': `${label} slider` } }}
+        sx={{
+          color: FENWICK.green,
+          paddingBlock: 1.5,
+          '& .MuiSlider-rail': { bgcolor: FENWICK.line, opacity: 1 },
+          '& .MuiSlider-thumb': { inlineSize: 16, blockSize: 16 },
+        }}
+      />
+    </Box>
+  )
+}
+
+// One `genericDimension` of the spec in millimetres: a typed value with steps of 10 mm and a slider. Dragging stages
+// each value, so the drawing follows the thumb, and letting go commits it. The field exists only while the spec's
+// component is active.
+export const MillimetreField = (props: MillimetreFieldProps) => {
+  const windowId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: windowId,
+    componentType: genericDimensionComponent,
+    instanceName: props.instanceName,
+  })
+
+  return component === null ? null : <MillimetreInput {...props} />
+}
+```
+
+### ./src/\_shared/OrderPanel.tsx
+
+```tsx
+import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { FENWICK } from './tokens.js'
+
+interface OrderPanelProps {
+  // On a phone the panel is a bar: the price beside the button, without the figures
+  readonly compact: boolean
+}
+
+// The price and the spec's `order` finalize action. While a warning holds, the action is `disabled` and its `hints`
+// say why. In the `ordered` navigation state the panel confirms the order instead; a viewer sees the price only.
+export const OrderPanel = ({ compact }: OrderPanelProps) => {
+  const casement = phx.frontend.useRootEntityState()
+  const price = phx.frontend.useRootEntityPrice()
+  const { primary, hints } = phx.frontend.useFinalizeActions()
+  const navigationState = phx.frontend.useActiveNavigationState()
+  const navigate = phx.frontend.useNavigate()
+  const { accessInfo } = phx.frontend.useAccessService()
+  const isPending = primary?.isPending ?? false
+
+  if (navigationState === 'ordered') {
+    return (
+      <Box component="div" role="status" sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <Box component="div" sx={{ display: 'grid', flex: 1 }}>
+          <Typography sx={{ fontFamily: FENWICK.font, fontSize: 18, fontWeight: 600, color: FENWICK.green }}>
+            Added to your order
+          </Typography>
+          <Typography sx={{ fontFamily: FENWICK.font, fontSize: 14, color: FENWICK.muted }}>
+            {casement.width} × {casement.height} mm, {price}
+          </Typography>
+        </Box>
+        <Button
+          onClick={() => navigate('design')}
+          sx={{
+            fontFamily: FENWICK.font,
+            fontSize: 15,
+            color: FENWICK.ink,
+            textTransform: 'none',
+            textDecoration: 'underline',
+          }}
+        >
+          Draw another
+        </Button>
+      </Box>
+    )
+  }
+
+  const showButton = primary !== null && !accessInfo.viewMode
+
+  return (
+    <Box component="div" sx={{ display: 'grid', gap: 1.25 }}>
+      <Box component="div" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
+        <Box component="div" sx={{ display: 'grid' }}>
+          <Typography
+            sx={{ fontFamily: FENWICK.font, fontSize: compact ? 22 : 28, fontWeight: 700, color: FENWICK.ink }}
+          >
+            {price}
+          </Typography>
+          <Typography sx={{ fontFamily: FENWICK.font, fontSize: 13, color: FENWICK.muted, whiteSpace: 'nowrap' }}>
+            {compact
+              ? 'incl. VAT'
+              : `Uw ${casement.$uValue.toFixed(2)} W/m²K · ${Math.round(casement.$weightKg)} kg · incl. VAT`}
+          </Typography>
+        </Box>
+        {showButton && (
+          <Button
+            variant="contained"
+            disableElevation
+            disabled={primary.disabled || isPending}
+            onClick={() => void primary.run()}
+            title={primary.title}
+            startIcon={isPending ? <CircularProgress size={16} color="inherit" /> : undefined}
+            sx={{
+              minBlockSize: 48,
+              paddingInline: 3,
+              borderRadius: 1.5,
+              bgcolor: FENWICK.green,
+              fontFamily: FENWICK.font,
+              fontSize: 16,
+              fontWeight: 600,
+              textTransform: 'none',
+              '&:hover': { bgcolor: '#15302a' },
+              '&.Mui-disabled': { bgcolor: FENWICK.line, color: FENWICK.muted },
+            }}
+          >
+            {isPending ? 'Adding…' : primary.label}
+          </Button>
+        )}
+      </Box>
+      {!compact && showButton && primary.disabled && hints && (
+        <Typography sx={{ fontFamily: FENWICK.font, fontSize: 13, color: FENWICK.attention }}>
+          Resolve the drawing's warning to order: {hints}
+        </Typography>
+      )}
+      {primary?.error && <Alert severity="error">The window could not be added: {primary.error.message}</Alert>}
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/PhonePage.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DrawingSheet } from '../_drawing/index.js'
+import { OrderPanel } from './OrderPanel.js'
+import { WindowInputs } from './WindowInputs.js'
+import { FENWICK } from './tokens.js'
+
+// The phone page: the drawing stays at the top while the inputs scroll below it, and the price with the order button
+// is a bar at the bottom
+export const PhonePage = () => {
+  const { accessInfo } = phx.frontend.useAccessService()
+  const navigationState = phx.frontend.useActiveNavigationState()
+  const readOnly = accessInfo.viewMode || navigationState === 'ordered'
+
+  return (
+    <Box
+      component="div"
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        display: 'grid',
+        gridTemplateRows: 'auto minmax(260px, 46%) minmax(0, 1fr) auto',
+        bgcolor: FENWICK.panel,
+        fontFamily: FENWICK.font,
+      }}
+    >
+      <Box
+        component="header"
+        sx={{
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 1.5,
+          paddingInline: 2,
+          paddingBlock: 1.5,
+          bgcolor: FENWICK.green,
+          color: FENWICK.panel,
+        }}
+      >
+        <Typography sx={{ fontFamily: FENWICK.font, fontSize: 16, fontWeight: 700, letterSpacing: '0.2em' }}>
+          FENWICK &amp; LOWE
+        </Typography>
+        <Typography component="h1" sx={{ fontFamily: FENWICK.font, fontSize: 14, color: '#c8d6cf' }}>
+          Casement window
+        </Typography>
+      </Box>
+
+      <Box
+        component="div"
+        aria-label="Shop drawing"
+        sx={{ position: 'relative', borderBlockEnd: `1px solid ${FENWICK.line}` }}
+      >
+        <DrawingSheet compact />
+      </Box>
+
+      <Box component="main" sx={{ minBlockSize: 0, overflowY: 'auto', paddingInline: 2 }}>
+        <WindowInputs readOnly={readOnly} />
+      </Box>
+
+      <Box
+        component="footer"
+        sx={{
+          padding: 2,
+          bgcolor: FENWICK.panel,
+          borderBlockStart: `1px solid ${FENWICK.line}`,
+          boxShadow: '0 -8px 24px rgba(27, 39, 51, 0.08)',
+        }}
+      >
+        <OrderPanel compact />
+      </Box>
+
+      <LayoutSlots.MobileSnackbarsRoot />
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/SegmentedField.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 { FENWICK } from './tokens.js'
+
+// Arrow keys move the selection between the segments, as in a native radio group
+const ARROW_STEPS: Readonly<Record<string, number | undefined>> = {
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1,
+}
+
+interface SegmentedFieldProps {
+  readonly instanceName: string
+  readonly label: string
+  readonly readOnly: boolean
+  // A colour chip before each option's title, keyed by the spec's option values
+  readonly chips?: Readonly<Record<string, string>>
+  readonly columns?: number
+}
+
+const Segments = ({ instanceName, label, readOnly, chips, columns }: SegmentedFieldProps) => {
+  const resolve = phx.frontend.useResolveLocalizable()
+  const windowId = phx.frontend.useRootEntityId()
+  const { value, options } = phx.frontend.useAttributeSelection(windowId, instanceName)
+  const selected = options.find(option => option.value === value)
+  const labelId = `fenwick-${instanceName}-label`
+
+  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 (
+    <Box component="div" sx={{ display: 'grid', gap: 0.75 }}>
+      <Typography id={labelId} sx={{ fontFamily: FENWICK.font, fontSize: 15, fontWeight: 500, color: FENWICK.ink }}>
+        {label}
+      </Typography>
+      <Box
+        component="div"
+        role="radiogroup"
+        aria-labelledby={labelId}
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${columns ?? options.length}, minmax(0, 1fr))`,
+          gap: '1px',
+          padding: '1px',
+          borderRadius: 1.5,
+          bgcolor: FENWICK.line,
+          overflow: 'hidden',
+        }}
+      >
+        {options.map((option, index) => {
+          const isSelected = option.value === value
+          const chip = chips?.[String(option.value)]
+
+          return (
+            <ButtonBase
+              key={String(option.value)}
+              role="radio"
+              aria-checked={isSelected}
+              tabIndex={isSelected ? 0 : -1}
+              disabled={readOnly && !isSelected}
+              onClick={readOnly ? undefined : option.onSelect}
+              onKeyDown={readOnly ? undefined : event => handleKeyDown(event, index)}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 0.75,
+                minBlockSize: 40,
+                paddingInline: 1,
+                fontFamily: FENWICK.font,
+                fontSize: 14,
+                fontWeight: isSelected ? 600 : 500,
+                color: isSelected ? FENWICK.panel : FENWICK.ink,
+                bgcolor: isSelected ? FENWICK.green : FENWICK.panel,
+                transition: 'background-color 120ms',
+                '&:hover': { bgcolor: isSelected ? FENWICK.green : FENWICK.greenSoft },
+                '&.Mui-focusVisible': { outline: `2px solid ${FENWICK.brass}`, outlineOffset: -3 },
+              }}
+            >
+              {chip && (
+                <Box
+                  component="span"
+                  aria-hidden
+                  sx={{
+                    inlineSize: 14,
+                    blockSize: 14,
+                    borderRadius: '50%',
+                    bgcolor: chip,
+                    border: `1px solid ${FENWICK.line}`,
+                  }}
+                />
+              )}
+              {resolve(option.title)}
+            </ButtonBase>
+          )
+        })}
+      </Box>
+      {selected?.description && (
+        <Typography sx={{ fontFamily: FENWICK.font, fontSize: 13, color: FENWICK.muted }}>
+          {resolve(selected.description)}
+        </Typography>
+      )}
+    </Box>
+  )
+}
+
+// One `attributeSelection` of the spec as a segmented control, with the chosen option's description below it. The
+// field exists only while the spec's component is active, so a `$filter` in the spec decides when it is asked.
+export const SegmentedField = (props: SegmentedFieldProps) => {
+  const windowId = phx.frontend.useRootEntityId()
+  const component = phx.frontend.useComponent({
+    entityId: windowId,
+    componentType: attributeSelectionComponent,
+    instanceName: props.instanceName,
+  })
+
+  return component === null ? null : <Segments {...props} />
+}
+```
+
+### ./src/\_shared/ToggleRow.tsx
+
+```tsx
+import { Box, Switch, Typography } from '@mui/material'
+
+import { phx } from '../../.phoenix/phx.js'
+import { FENWICK } from './tokens.js'
+
+interface ToggleRowProps {
+  readonly instanceName: string
+  readonly label: string
+  readonly description: string
+  readonly readOnly: boolean
+}
+
+// One `attributeSwitch` of the spec as a labelled switch
+export const ToggleRow = ({ instanceName, label, description, readOnly }: ToggleRowProps) => {
+  const windowId = phx.frontend.useRootEntityId()
+  const toggle = phx.frontend.useAttributeSwitch(windowId, instanceName)
+  const labelId = `fenwick-${instanceName}-label`
+
+  return (
+    <Box component="div" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
+      <Box component="div" sx={{ display: 'grid' }}>
+        <Typography id={labelId} sx={{ fontFamily: FENWICK.font, fontSize: 15, fontWeight: 500, color: FENWICK.ink }}>
+          {label}
+        </Typography>
+        <Typography sx={{ fontFamily: FENWICK.font, fontSize: 13, color: FENWICK.muted }}>{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: FENWICK.panel },
+          '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: FENWICK.green, opacity: 1 },
+        }}
+      />
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/WindowInputs.tsx
+
+```tsx
+import { Box, Typography } from '@mui/material'
+import type { ReactNode } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+import { MillimetreField } from './MillimetreField.js'
+import { SegmentedField } from './SegmentedField.js'
+import { ToggleRow } from './ToggleRow.js'
+import { FENWICK, SECTION_SX } from './tokens.js'
+
+const FINISH_CHIPS = { Oak: '#c9a46d', White: '#ffffff', Anthracite: '#3b4045' }
+
+interface SectionProps {
+  readonly title: string
+  // The invariant types whose warning this section can resolve
+  readonly warningTypes?: readonly string[]
+  readonly children: ReactNode
+}
+
+// A group of inputs, with the warning of an invariant the group can resolve below it. The warnings come from
+// `useFinalizeViolations`, which lists the committed configuration's violations.
+const Section = ({ title, warningTypes = [], children }: SectionProps) => {
+  const { violations } = phx.frontend.useFinalizeViolations()
+  const resolve = phx.frontend.useResolveLocalizable()
+  const warning = violations?.find(({ violation }) => warningTypes.includes(violation.type))
+
+  return (
+    <Box
+      component="section"
+      sx={{ display: 'grid', gap: 2, paddingBlock: 2.5, borderBlockEnd: `1px solid ${FENWICK.line}` }}
+    >
+      <Typography component="h3" sx={SECTION_SX}>
+        {title}
+      </Typography>
+      {children}
+      {warning && (
+        <Typography
+          role="alert"
+          sx={{
+            paddingInline: 1.5,
+            paddingBlock: 1,
+            borderRadius: 1,
+            borderInlineStart: `3px solid ${FENWICK.attention}`,
+            bgcolor: FENWICK.attentionTint,
+            color: FENWICK.attention,
+            fontFamily: FENWICK.font,
+            fontSize: 14,
+            lineHeight: 1.4,
+          }}
+        >
+          {resolve(warning.violation.message)}
+        </Typography>
+      )}
+    </Box>
+  )
+}
+
+interface WindowInputsProps {
+  readonly readOnly: boolean
+}
+
+// Every input of the window, grouped as a joiner asks for them. The hinge side and the top light's height are asked
+// only when the spec's `$filter` makes their component active.
+export const WindowInputs = ({ readOnly }: WindowInputsProps) => {
+  return (
+    <Box component="div" sx={{ display: 'grid' }}>
+      <Section title="Overall size" warningTypes={['sashTooWide']}>
+        <MillimetreField instanceName="width" label="Width" readOnly={readOnly} />
+        <MillimetreField instanceName="height" label="Height" readOnly={readOnly} />
+      </Section>
+      <Section title="Panes" warningTypes={['topLightTooTall']}>
+        <SegmentedField instanceName="lights" label="Panes across" readOnly={readOnly} />
+        <ToggleRow
+          instanceName="topLight"
+          label="Top light"
+          description="A fixed pane above a transom"
+          readOnly={readOnly}
+        />
+        <MillimetreField instanceName="topLightHeight" label="Top light height" readOnly={readOnly} />
+      </Section>
+      <Section title="Opening">
+        <SegmentedField instanceName="opening" label="Sashes" readOnly={readOnly} columns={2} />
+        <SegmentedField instanceName="hinge" label="Hinged on the" readOnly={readOnly} />
+      </Section>
+      <Section title="Glass and finish">
+        <SegmentedField instanceName="glazing" label="Glazing" readOnly={readOnly} />
+        <ToggleRow
+          instanceName="glazingBars"
+          label="Glazing bars"
+          description="A cross of bars in every pane"
+          readOnly={readOnly}
+        />
+        <SegmentedField instanceName="finish" label="Finish" readOnly={readOnly} chips={FINISH_CHIPS} columns={3} />
+      </Section>
+    </Box>
+  )
+}
+```
+
+### ./src/\_shared/tokens.ts
+
+```ts
+// Fenwick & Lowe's palette and type: a workshop green, brass and warm paper. Barlow is the brand's typeface; the
+// stack falls back to system fonts where it is not loaded.
+export const FENWICK = {
+  paper: '#f3f0e8',
+  panel: '#fffdf8',
+  ink: '#1b2733',
+  muted: '#5d6b78',
+  line: '#ddd6c8',
+  green: '#1f3d33',
+  greenSoft: '#e4ece7',
+  brass: '#a8844b',
+  attention: '#b23a2b',
+  attentionTint: '#fbecea',
+  font: "'Barlow', 'Helvetica Neue', Arial, sans-serif",
+} as const
+
+// Small capitals with wide tracking, for section labels
+export const SECTION_SX = {
+  fontFamily: FENWICK.font,
+  fontSize: 12,
+  fontWeight: 600,
+  letterSpacing: '0.16em',
+  textTransform: 'uppercase',
+  color: FENWICK.muted,
+} as const
+```
+
+### ./src/elements/ConfiguratorLayout.tsx
+
+```tsx
+import { Box } from '@mui/material'
+
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
+
+import { phx } from '../../.phoenix/phx.js'
+import { DesktopPage } from '../_shared/DesktopPage.js'
+import { PhonePage } from '../_shared/PhonePage.js'
+import { FENWICK } from '../_shared/tokens.js'
+
+// A window configurator whose main view is a shop drawing instead of a scene. The layout never mounts
+// `LayoutSlots.SharedCanvas`, so no 3D scene loads; the drawing is SVG that React renders from the configuration.
+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: FENWICK.paper }}>
+      <LayoutSlots.Services />
+      {viewports !== null && (isDesktop ? <DesktopPage /> : <PhonePage />)}
+    </Box>
+  )
+}
+
+export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout', ConfiguratorLayout)
+```
+
+### ./src/expressions/window.ts
+
+```ts
+import { phx } from '../../.phoenix/phx.js'
+
+// Face widths of the timber sections in millimetres, as the drawing shows them
+const FRAME = 68
+const MULLION = 76
+
+const LIGHT_COUNT = { One: 1, Two: 2, Three: 3 }
+
+// The widest sash each opening type can carry, in millimetres
+const MAX_SASH_WIDTH = { Fixed: Infinity, SideHung: 900, TiltTurn: 1300, TopHung: 1600 }
+
+const GLASS = {
+  Double: { buildUp: '4 / 16 Ar / 4 low-E', ug: 1.1, kgPerM2: 20, gbpPerM2: 95 },
+  Triple: { buildUp: '4 / 12 Ar / 4 / 12 Ar / 4, two low-E', ug: 0.6, kgPerM2: 30, gbpPerM2: 150 },
+  Acoustic: { buildUp: '6.8 lam / 16 Ar / 4 low-E', ug: 1.0, kgPerM2: 27, gbpPerM2: 170 },
+}
+
+const SASH_PRICE = { Fixed: 0, SideHung: 260, TiltTurn: 340, TopHung: 220 }
+const FINISH_FACTOR = { Oak: 1.18, White: 1, Anthracite: 1.06 }
+// Timber frame and spacer: U-value of the frame and linear loss along the glass edge
+const FRAME_U = 1.3
+const EDGE_PSI = 0.04
+
+type PaneOpening = 'Fixed' | 'SideLeft' | 'SideRight' | 'TiltLeft' | 'TiltRight' | 'Top'
+
+interface WindowChoices {
+  readonly lights: keyof typeof LIGHT_COUNT
+  readonly opening: keyof typeof MAX_SASH_WIDTH
+  readonly hinge: 'Left' | 'Right'
+}
+
+// How the pane at `index` of `count` opens: a single sash follows the hinge choice, a pair is hung from the outer
+// edges like French casements, and of three the outer two open and the middle one is fixed
+const paneOpening = (s: WindowChoices, index: number, count: number): PaneOpening => {
+  if (s.opening === 'Fixed') {
+    return 'Fixed'
+  }
+
+  if (s.opening === 'TopHung') {
+    return 'Top'
+  }
+
+  const prefix = s.opening === 'SideHung' ? 'Side' : 'Tilt'
+
+  if (count === 1) {
+    return s.hinge === 'Left' ? `${prefix}Left` : `${prefix}Right`
+  }
+
+  if (index === 0) {
+    return `${prefix}Left`
+  }
+
+  if (index === count - 1) {
+    return `${prefix}Right`
+  }
+
+  return 'Fixed'
+}
+
+export default phx.domain.implementCustomExpressions({
+  Window: {
+    $frameWidth: () => {
+      return FRAME
+    },
+    $mullionWidth: () => {
+      return MULLION
+    },
+    // The clear openings inside the frame, from the top left corner of the frame, viewed from outside
+    $panes: s => {
+      const count = LIGHT_COUNT[s.lights]
+      const innerWidth = s.width - 2 * FRAME
+      const topLightZone = s.topLight ? s.topLightHeight + MULLION : 0
+      const mainHeight = s.height - 2 * FRAME - topLightZone
+      const paneWidth = (innerWidth - (count - 1) * MULLION) / count
+      const panes = Array.from({ length: count }, (_, index) => {
+        const opening = paneOpening(s, index, count)
+
+        return {
+          key: `P${index + 1}`,
+          x: FRAME + index * (paneWidth + MULLION),
+          y: FRAME + topLightZone,
+          width: paneWidth,
+          height: mainHeight,
+          opening,
+          oversize: opening !== 'Fixed' && paneWidth > MAX_SASH_WIDTH[s.opening],
+        }
+      })
+
+      if (!s.topLight) {
+        return panes
+      }
+
+      // The top light is one fixed pane across the whole width, above the transom
+      return [
+        {
+          key: 'T1',
+          x: FRAME,
+          y: FRAME,
+          width: innerWidth,
+          height: s.topLightHeight,
+          opening: 'Fixed',
+          oversize: false,
+        },
+        ...panes,
+      ]
+    },
+    $glassArea: s => {
+      return s.$panes.reduce((area, pane) => area + (pane.width * pane.height) / 1e6, 0)
+    },
+    // Uw from the glass, the frame and the glass edge, by the area-weighted method of EN ISO 10077
+    $uValue: s => {
+      const total = (s.width * s.height) / 1e6
+      const frameArea = total - s.$glassArea
+      const edge = s.$panes.reduce((length, pane) => length + (2 * (pane.width + pane.height)) / 1000, 0)
+
+      return (s.$glassArea * GLASS[s.glazing].ug + frameArea * FRAME_U + edge * EDGE_PSI) / total
+    },
+    $weightKg: s => {
+      const frameMetres = (2 * (s.width + s.height)) / 1000
+
+      return s.$glassArea * GLASS[s.glazing].kgPerM2 + frameMetres * 4.5
+    },
+    $glassBuildUp: s => {
+      return GLASS[s.glazing].buildUp
+    },
+    $price: s => {
+      const frameMetres = (2 * (s.width + s.height)) / 1000
+      const sashes = s.$panes.filter(pane => pane.opening !== 'Fixed').length
+      const base =
+        180 +
+        frameMetres * 85 +
+        s.$glassArea * GLASS[s.glazing].gbpPerM2 +
+        sashes * SASH_PRICE[s.opening] +
+        (s.topLight ? 120 : 0) +
+        (s.glazingBars ? 45 * s.$panes.length : 0)
+
+      return Math.round(base * FINISH_FACTOR[s.finish])
+    },
+  },
+})
+```
+
+### ./src/handlers/order-window.ts
+
+```ts
+import { useCallback } from 'react'
+
+import { phx } from '../../.phoenix/phx.js'
+
+// Stands in for the joinery's order service: adding takes a moment, then the page shows the confirmation
+export default phx.frontend.createPhoenixHandler('orderWindow', () => {
+  const navigate = phx.frontend.useNavigate()
+
+  return {
+    handler: useCallback(async () => {
+      await new Promise(resolve => setTimeout(resolve, 1200))
+      navigate('ordered')
+    }, [navigate]),
+  }
+})
+```
+
+### ./src/invariants/window.ts
+
+```ts
+import { phx } from '../../.phoenix/phx.js'
+
+const MAX_SASH_WIDTH = { Fixed: Infinity, SideHung: 900, TiltTurn: 1300, TopHung: 1600 }
+const OPENING_LABEL = { Fixed: 'fixed', SideHung: 'side-hung', TiltTurn: 'tilt and turn', TopHung: 'top-hung' }
+const MIN_MAIN_HEIGHT = 500
+
+// Both rules are warnings: the drawing keeps the change and marks the problem, and the window cannot be ordered until
+// it is resolved
+export default phx.domain.implementCustomInvariants({
+  Window: {
+    // A sash wider than its hinges carry would sag; the message names the limit of the chosen opening
+    sashSize: s => {
+      const oversize = s.$panes.find(pane => pane.oversize)
+
+      if (oversize === undefined) {
+        return []
+      }
+
+      return [
+        {
+          type: 'sashTooWide',
+          severity: 'warning',
+          message: `A ${OPENING_LABEL[s.opening]} sash can be at most ${MAX_SASH_WIDTH[s.opening].toLocaleString('en-GB')} mm wide, and these are ${Math.round(oversize.width).toLocaleString('en-GB')} mm. Add a pane across or make the window narrower.`,
+        },
+      ]
+    },
+    topLightTooTall: s => {
+      return !s.topLight || s.height - 2 * s.$frameWidth - s.topLightHeight - s.$mullionWidth >= MIN_MAIN_HEIGHT
+    },
+  },
+})
+```
+
+</details>