@salsita-ai/sdk 0.50.0-develop.662fa65a4c → 0.50.0-develop.6806625cca

package/dist/docs/layouts/gallery/nightjar-guitar.mdx

@@ -80,7 +80,7 @@ components:
 
 `phx.frontend.useStepNavigation()` reads them and returns every step with its label resolved and its `status`, `'complete'`, `'active'` or `'upcoming'`, with `next()`, `previous()` and `goTo(index)` to move. `StepHeader` draws the stepper from `steps`, and `OrderBar` the buttons from `canGoPrevious`, `isLast` and the label of the step after the active one:
 
-- **A wizard that remembers.** The hook enforces no order: `goTo` enters any step. `StepHeader` lets the customer go back to any step they have reached and never ahead of it, so after changing the body from the summary they return to the summary in one click. The furthest step is the layout's own state.
+- **A wizard that remembers.** The hook enforces no order: `goTo` enters any step. `StepHeader` lets the customer go back to any step they have reached and never ahead of it, so after changing the body from the summary they return to the summary in one click. The furthest step is the layout's own state, kept in `ConfiguratorLayout` with `useReachedStep()` so it survives the switch between the desktop and the phone page.
 - **Analytics come with the moves.** `next()` and `previous()` record the built-in step buttons' events and `goTo()` the header stepper's, so the stepper and the bar need no analytics code. The button that opens the summary is the exception: like the built-in **Summary** button, it records `FrontendAnalyticsFactory.SummaryButtonClicked()` from `@salsita-ai/sdk/configurator` through `phx.frontend.useAnalytics().push()` and enters the state with `phx.frontend.useNavigate()`, because `next()` would record the next-step button's event instead.
 - **Locked once ordered.** The stepper takes no clicks while the order is being placed or after it was placed; **Design another** in the bar returns to the first step.
 
@@ -116,7 +116,6 @@ import { useMemo } from 'react'
 
 import { attributeSelectionComponent, materialSwatchComponent, textValueComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { byFieldOrder } from './fields.js'
 
 export type ChoiceKind = 'selection' | 'swatch' | 'text'
@@ -295,8 +294,6 @@ The decal's instance name is the object's: `headstock` in `sceneEntityRemoteObje
 The headstock takes 16 characters. The limit is the expression `$signatureLimit`, declared in the spec so the layout can read it, and a `fixable` rule rejects a longer signature with a message that names it:
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Guitar: {
     // `fixable`: a change that makes the signature too long is rejected, so the headstock never shows more than fits.
@@ -328,7 +325,6 @@ export default phx.domain.implementCustomInvariants({
 ```tsx
 import { Box, InputBase, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { FieldShell } from './FieldShell.js'
 import { NIGHTJAR } from './tokens.js'
 
@@ -437,7 +433,7 @@ invariants:
       message: The Offset body is routed for single-coil-sized pickups. Choose single coils or P-90s, or the Single-cut body for humbuckers.
 ```
 
-While it holds, the layout shows it three times, each read from `phx.frontend.useFinalizeViolations().violations`: under the **Pickups** and **Body shape** fields, as a mark on the **Electronics** step, and on the summary with **Go to Electronics**. The layout's `STEP_WARNINGS` names the step that resolves each warning. `phx.frontend.useStateValidity()` holds the same violations, but on `phx.frontend` it is typed as the validity value instead of a hook, so calling it does not type-check; `useWarnings` uses `useFinalizeViolations` instead.
+While it holds, the layout shows it three times, each read from `phx.frontend.useFinalizeViolations().violations`: under the **Pickups** and **Body shape** fields, as a mark on the **Electronics** step, and on the summary with **Go to Electronics**. The layout's `STEP_WARNINGS` names the step that resolves each warning.
 
 ## Place the order
 
@@ -458,8 +454,6 @@ components:
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Stands in for Northfret's order service. Placing an order takes a moment. The service checks stock when the order
 // arrives, which the configurator cannot know beforehand: gold hardware is back-ordered, so it refuses that order with
 // its reason; any other order is accepted and the page shows the confirmation.
@@ -494,31 +488,35 @@ A viewer of a shared configuration sees no **Place order**: neither hook checks
 
 ## Pages that slide in
 
-`ConfiguratorLayout` keeps the scene mounted and lays the desktop or the phone page over it, by the width of the configurator's container from `phx.frontend.useActiveViewports()`. It also holds the contact form's state, so the form survives the switch between the two and the move to the confirmation.
+`ConfiguratorLayout` keeps the scene mounted and lays the desktop or the phone page over it, by the width of the configurator's container from `phx.frontend.useActiveViewports()`. It also holds the contact form's state and the furthest step reached, so both survive the switch between the two, and the form survives the move to the confirmation.
 
 ```tsx
 import { Box } from '@mui/material'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { NIGHTJAR } from '../_fields/index.js'
 import { DesktopPage } from '../_shared/DesktopPage.js'
 import { PhonePage } from '../_shared/PhonePage.js'
 import { useOrderForm } from '../_shared/order-form.js'
+import { useReachedStep } from '../_shared/use-reached-step.js'
 
 // A wizard over the scene. The canvas stays mounted the whole time; the desktop or the phone page lies over it. The
-// contact form's state lives here, so it survives the switch between the two and the move to the confirmation.
+// contact form's state and the furthest step reached live here, so they survive the switch between the two; the form
+// also survives the move to the confirmation.
 const ConfiguratorLayout = () => {
   // `null` until the container has been measured; only the scene shows until then
   const viewports = phx.frontend.useActiveViewports()
+  const { activeIndex } = phx.frontend.useStepNavigation()
   const form = useOrderForm()
+  const reached = useReachedStep(activeIndex)
   const isDesktop = viewports?.includes('desktop') ?? false
 
   return (
     <Box component="div" sx={{ position: 'absolute', inset: 0, overflow: 'clip', bgcolor: NIGHTJAR.ink }}>
       <LayoutSlots.SharedCanvas />
-      {viewports !== null && (isDesktop ? <DesktopPage form={form} /> : <PhonePage form={form} />)}
+      {viewports !== null &&
+        (isDesktop ? <DesktopPage form={form} reached={reached} /> : <PhonePage form={form} reached={reached} />)}
     </Box>
   )
 }
@@ -532,7 +530,6 @@ Each page measures its safe area with `phx.frontend.useSceneSafeArea()`. The sum
 import { Box, Typography } from '@mui/material'
 import type { AnimationEvent } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ENTER_FROM_END, HEADING_SX, NIGHTJAR } from '../_fields/index.js'
 import { OrderBar } from './OrderBar.js'
 import { OrderConfirmation } from './OrderConfirmation.js'
@@ -569,6 +566,7 @@ const Brand = () => {
 
 interface DesktopPageProps {
   readonly form: OrderForm
+  readonly reached: number
 }
 
 // The desktop wizard: the stepper on top, the guitar in the free area on the left, the panel of the step on the
@@ -579,7 +577,7 @@ interface DesktopPageProps {
 // measurement, taken when the page mounts, sees it shifted, and no resize follows when the slide ends. `update()`
 // from `useSceneSafeArea` measures again once the slide has settled, so the camera frames the guitar in the place the
 // page leaves for it.
-export const DesktopPage = ({ form }: DesktopPageProps) => {
+export const DesktopPage = ({ form, reached }: DesktopPageProps) => {
   const { containerRef, safeAreaRef, update } = phx.frontend.useSceneSafeArea()
   const navigationState = phx.frontend.useActiveNavigationState()
   const page = pageOf(navigationState)
@@ -620,7 +618,7 @@ export const DesktopPage = ({ form }: DesktopPageProps) => {
         }}
       >
         <Brand />
-        <StepHeader compact={false} />
+        <StepHeader compact={false} reached={reached} />
       </Box>
 
       <Box
@@ -690,7 +688,6 @@ import { Environment, Lightformer } from '@react-three/drei'
 import { useMemo } from 'react'
 import { CanvasTexture, SRGBColorSpace } from 'three'
 
-import { phx } from '../../.phoenix/phx.js'
 import { NIGHTJAR } from '../_fields/index.js'
 
 /** A warm pool of light that fades into the dark, drawn once on a canvas. */
@@ -786,6 +783,7 @@ The guitar is `public/models/gallery/guitar.glb`, generated by `scripts/models/g
 - Typing past 16 characters turns the counter and the field red and shows "The headstock fits 16 characters. Shorten the signature."; leaving the field puts back the signature committed before, and the headstock with it.
 - **Review order** opens the summary: a wider panel lists every choice, with the signature in script. With the humbucker conflict, the summary lists it with **Go to Electronics**, the bar shows "Settle the choices above first", and **Place order** reveals "Enter the name the order is for." and "Enter an e-mail address for the build updates." under the empty fields.
 - **Go to Electronics** opens that step; after **P-90s**, the stepper's **Summary** returns to the summary in one click.
+- After going back from the summary to an earlier step, narrowing the window until the phone page shows and widening it again leaves the stepper's **Summary** enabled.
 - With a name and an e-mail, **Place order** shows "Placing order…" with a spinner for under two seconds. With gold hardware it then shows "The order did not go through" and the service's reason at the top of the summary; with chrome or black it opens the confirmation: "Thank you, …", the order number, the e-mail and the build. The stepper no longer takes clicks, and **Design another** returns to **Body**.
 - Each step, the summary and the confirmation leave the guitar centred in the area beside the panel once their slide has settled.
 - With the browser console's Verbose level, **Next** and **Back** log the step buttons' `nextStepButton` and `previousStepButton` events, the stepper the `topNavigation` `step` event, **Review order** the `summaryButton` event and **Place order** the `finalizeButton` event: without a Google Tag Manager id, Storybook's analytics log their events with `console.debug`.
@@ -1452,7 +1450,6 @@ components:
 import { Box, ButtonBase, Typography } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { FieldShell } from './FieldShell.js'
 import { NIGHTJAR } from './tokens.js'
 
@@ -1766,7 +1763,6 @@ export const FieldShell = ({ id, label, aside, hint, warningTypes, compact, chil
 import { Box, ButtonBase, Tooltip, Typography } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { FieldShell } from './FieldShell.js'
 import { NIGHTJAR } from './tokens.js'
 
@@ -1873,7 +1869,6 @@ export const FinishField = ({ instanceName, label, warningTypes, compact }: Fini
 ```tsx
 import { Box, InputBase, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { FieldShell } from './FieldShell.js'
 import { NIGHTJAR } from './tokens.js'
 
@@ -2013,7 +2008,6 @@ export const StepFields = ({ compact }: StepFieldsProps) => {
 import { Box, Typography } from '@mui/material'
 import type { ReactNode } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { fieldOf } from './fields.js'
 import { NIGHTJAR } from './tokens.js'
 import type { ActiveChoice } from './use-active-choices.js'
@@ -2254,7 +2248,6 @@ import { useMemo } from 'react'
 
 import { attributeSelectionComponent, materialSwatchComponent, textValueComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { byFieldOrder } from './fields.js'
 
 export type ChoiceKind = 'selection' | 'swatch' | 'text'
@@ -2301,17 +2294,13 @@ export const useActiveChoices = (): readonly ActiveChoice[] => {
 ```ts
 import { useMemo } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export interface Warning {
   readonly type: string
   readonly text: string
 }
 
 // The warnings of the committed configuration, with their text resolved. A `warning` invariant keeps the change, so
-// its violation stays until the customer resolves it, and ordering waits for that. `useFinalizeViolations` lists them;
-// `useStateValidity` holds the same list, but on `phx.frontend` it is typed as the validity value instead of a hook,
-// so calling it does not type-check.
+// its violation stays until the customer resolves it, and ordering waits for that. `useFinalizeViolations` lists them.
 export const useWarnings = (): readonly Warning[] => {
   const { violations } = phx.frontend.useFinalizeViolations()
   const resolve = phx.frontend.useResolveLocalizable()
@@ -2330,7 +2319,6 @@ export const useWarnings = (): readonly Warning[] => {
 import { Box, Typography } from '@mui/material'
 import type { AnimationEvent } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ENTER_FROM_END, HEADING_SX, NIGHTJAR } from '../_fields/index.js'
 import { OrderBar } from './OrderBar.js'
 import { OrderConfirmation } from './OrderConfirmation.js'
@@ -2367,6 +2355,7 @@ const Brand = () => {
 
 interface DesktopPageProps {
   readonly form: OrderForm
+  readonly reached: number
 }
 
 // The desktop wizard: the stepper on top, the guitar in the free area on the left, the panel of the step on the
@@ -2377,7 +2366,7 @@ interface DesktopPageProps {
 // measurement, taken when the page mounts, sees it shifted, and no resize follows when the slide ends. `update()`
 // from `useSceneSafeArea` measures again once the slide has settled, so the camera frames the guitar in the place the
 // page leaves for it.
-export const DesktopPage = ({ form }: DesktopPageProps) => {
+export const DesktopPage = ({ form, reached }: DesktopPageProps) => {
   const { containerRef, safeAreaRef, update } = phx.frontend.useSceneSafeArea()
   const navigationState = phx.frontend.useActiveNavigationState()
   const page = pageOf(navigationState)
@@ -2418,7 +2407,7 @@ export const DesktopPage = ({ form }: DesktopPageProps) => {
         }}
       >
         <Brand />
-        <StepHeader compact={false} />
+        <StepHeader compact={false} reached={reached} />
       </Box>
 
       <Box
@@ -2483,7 +2472,6 @@ import { Box, Button, CircularProgress, IconButton, Tooltip, Typography } from '
 import { FrontendAnalyticsFactory } from '@salsita-ai/sdk/configurator'
 import { detailComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { HEADING_SX, LABEL_SX, NIGHTJAR } from '../_fields/index.js'
 import type { OrderForm } from './order-form.js'
 
@@ -2662,7 +2650,6 @@ export const OrderBar = ({ compact, form }: OrderBarProps) => {
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { HEADING_SX, LABEL_SX, NIGHTJAR, SummaryRows } from '../_fields/index.js'
 import type { Contact } from './order-form.js'
 
@@ -2721,7 +2708,6 @@ export const OrderConfirmation = ({ compact, contact }: OrderConfirmationProps)
 import { Box, Typography } from '@mui/material'
 import type { AnimationEvent } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ENTER_FROM_BELOW, HEADING_SX, NIGHTJAR } from '../_fields/index.js'
 import { OrderBar } from './OrderBar.js'
 import { OrderConfirmation } from './OrderConfirmation.js'
@@ -2741,12 +2727,13 @@ const pageOf = (navigationState: string): Page => {
 
 interface PhonePageProps {
   readonly form: OrderForm
+  readonly reached: number
 }
 
 // The phone wizard: a compact progress line, the guitar at the top, the step's choices in a sheet below it and the
 // bar fixed at the bottom. Like the desktop pages, each page rises in with its own safe area and measures it again
 // with `update()` once the slide has settled.
-export const PhonePage = ({ form }: PhonePageProps) => {
+export const PhonePage = ({ form, reached }: PhonePageProps) => {
   const { containerRef, safeAreaRef, update } = phx.frontend.useSceneSafeArea()
   const navigationState = phx.frontend.useActiveNavigationState()
   const page = pageOf(navigationState)
@@ -2787,7 +2774,7 @@ export const PhonePage = ({ form }: PhonePageProps) => {
           <Box component="span" aria-hidden sx={{ inlineSize: 3, blockSize: 16, bgcolor: NIGHTJAR.amber }} />
           <Typography sx={{ ...HEADING_SX, fontSize: 13, letterSpacing: '0.32em' }}>Northfret</Typography>
         </Box>
-        <StepHeader compact />
+        <StepHeader compact reached={reached} />
       </Box>
 
       <Box
@@ -2839,27 +2826,26 @@ export const PhonePage = ({ form }: PhonePageProps) => {
 ```tsx
 import { Box, ButtonBase, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { HEADING_SX, NIGHTJAR, useWarnings } from '../_fields/index.js'
 import { STEP_WARNINGS } from './step-warnings.js'
-import { useReachedStep } from './use-reached-step.js'
 
 const CHECK_ICON = 'M5 12.5 10 17.5 19 7'
 
 interface StepHeaderProps {
   /** One line with a progress bar, for a phone; the full stepper otherwise */
   readonly compact: boolean
+  /** The furthest step the customer has reached; the layout keeps it, so it survives the switch between the pages */
+  readonly reached: number
 }
 
 // The spec's `navigationSteps` as a stepper. Labels and order come from the spec; `useStepNavigation` gives each step
 // its status, and `goTo` enters a step and records the stepper's analytics event. The customer can go back to any step
 // they have reached, never ahead of it, and nowhere while the order is being placed or after it was placed.
-export const StepHeader = ({ compact }: StepHeaderProps) => {
+export const StepHeader = ({ compact, reached }: StepHeaderProps) => {
   const { steps, activeIndex, activeStep, goTo } = phx.frontend.useStepNavigation()
   const navigationState = phx.frontend.useActiveNavigationState()
   const { primary } = phx.frontend.useFinalizeActions()
   const warnings = useWarnings()
-  const reached = useReachedStep(activeIndex)
   const isLocked = navigationState === 'ordered' || (primary?.isPending ?? false)
 
   const hasWarning = (state: string) => {
@@ -3008,7 +2994,6 @@ export const StepHeader = ({ compact }: StepHeaderProps) => {
 import { Box, Typography } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ENTER_FROM_END, ENTER_FROM_START, HEADING_SX, LABEL_SX, NIGHTJAR, StepFields } from '../_fields/index.js'
 
 // A line under each step's title; the layout's copy, keyed by the step's navigation state
@@ -3086,7 +3071,6 @@ import { Box, Button, InputBase, Typography } from '@mui/material'
 import type { ReactNode } from 'react'
 import { useEffect, useRef } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { HEADING_SX, LABEL_SX, NIGHTJAR, SummaryRows, useWarnings } from '../_fields/index.js'
 import type { OrderForm } from './order-form.js'
 import { STEP_WARNINGS } from './step-warnings.js'
@@ -3377,7 +3361,8 @@ export const STEP_WARNINGS: Readonly<Record<string, readonly string[]>> = {
 import { useState } from 'react'
 
 // The furthest step the customer has reached. The stepper offers every step up to it, so after changing an earlier
-// step the customer returns to where they were without stepping through the ones between.
+// step the customer returns to where they were without stepping through the ones between. The layout calls this, where
+// it stays mounted, so the furthest step survives the switch between the desktop and the phone page.
 export const useReachedStep = (activeIndex: number): number => {
   const [reached, setReached] = useState(activeIndex)
 
@@ -3396,24 +3381,28 @@ import { Box } from '@mui/material'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { NIGHTJAR } from '../_fields/index.js'
 import { DesktopPage } from '../_shared/DesktopPage.js'
 import { PhonePage } from '../_shared/PhonePage.js'
 import { useOrderForm } from '../_shared/order-form.js'
+import { useReachedStep } from '../_shared/use-reached-step.js'
 
 // A wizard over the scene. The canvas stays mounted the whole time; the desktop or the phone page lies over it. The
-// contact form's state lives here, so it survives the switch between the two and the move to the confirmation.
+// contact form's state and the furthest step reached live here, so they survive the switch between the two; the form
+// also survives the move to the confirmation.
 const ConfiguratorLayout = () => {
   // `null` until the container has been measured; only the scene shows until then
   const viewports = phx.frontend.useActiveViewports()
+  const { activeIndex } = phx.frontend.useStepNavigation()
   const form = useOrderForm()
+  const reached = useReachedStep(activeIndex)
   const isDesktop = viewports?.includes('desktop') ?? false
 
   return (
     <Box component="div" sx={{ position: 'absolute', inset: 0, overflow: 'clip', bgcolor: NIGHTJAR.ink }}>
       <LayoutSlots.SharedCanvas />
-      {viewports !== null && (isDesktop ? <DesktopPage form={form} /> : <PhonePage form={form} />)}
+      {viewports !== null &&
+        (isDesktop ? <DesktopPage form={form} reached={reached} /> : <PhonePage form={form} reached={reached} />)}
     </Box>
   )
 }
@@ -3428,7 +3417,6 @@ import { Environment, Lightformer } from '@react-three/drei'
 import { useMemo } from 'react'
 import { CanvasTexture, SRGBColorSpace } from 'three'
 
-import { phx } from '../../.phoenix/phx.js'
 import { NIGHTJAR } from '../_fields/index.js'
 
 /** A warm pool of light that fades into the dark, drawn once on a canvas. */
@@ -3490,8 +3478,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('NightjarStage', ()
 ### ./src/expressions/guitar.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const BASE_PRICE = 1650
 const SIGNATURE_PRICE = 45
 const SIGNATURE_LIMIT = 16
@@ -3624,8 +3610,6 @@ export default phx.domain.implementCustomExpressions({
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Stands in for Northfret's order service. Placing an order takes a moment. The service checks stock when the order
 // arrives, which the configurator cannot know beforehand: gold hardware is back-ordered, so it refuses that order with
 // its reason; any other order is accepted and the page shows the confirmation.
@@ -3652,8 +3636,6 @@ export default phx.frontend.createPhoenixHandler('placeOrder', () => {
 ### ./src/invariants/guitar.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Guitar: {
     // `fixable`: a change that makes the signature too long is rejected, so the headstock never shows more than fits.

package/dist/docs/layouts/gallery/sunfold-solar.mdx

@@ -40,7 +40,6 @@ 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 { SUNFOLD } from '../_shared/tokens.js'
@@ -121,8 +120,6 @@ expressions:
 The model in `src/expressions/solar.ts` is deliberately simple: a south-facing kWp yields 1,000 kWh a year, spread over the months by a typical central European sun curve. Without a battery the home uses solar power only while the sun shines; a battery carries the day's surplus into the evening. The saving counts the power the home no longer buys and the power it sells, and the running total grows with prices rising 2 % a year while the panels lose half a percent.
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const PANEL_KWP = 0.43
 const PANEL_AREA_M2 = 1.95
 // Vents, chimneys and the edge clearance leave about 85 % of a roof for panels
@@ -258,7 +255,6 @@ components:
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CARD_SX, SUNFOLD } from './tokens.js'
 
 const euro = (value: number) => {
@@ -340,7 +336,6 @@ The series colours are a fixed set checked together for colour-vision deficienci
 import { Box, ButtonBase, Typography } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CHART, SERIES } from './chart-style.js'
 import { niceScale } from './nice-scale.js'
 import { useWidth } from './use-width.js'
@@ -660,8 +655,6 @@ invariants:
 ```
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 // More panels than the roof holds is a warning: the dashboard keeps showing the figures, and a survey cannot be
 // booked until the panel count fits. A north-facing roof is only a notice, so it never blocks the booking.
 export default phx.domain.implementCustomInvariants({
@@ -692,7 +685,6 @@ export default phx.domain.implementCustomInvariants({
 import { Box, Typography } from '@mui/material'
 import type { ReactNode } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { PillField } from './PillField.js'
 import { SliderField } from './SliderField.js'
 import { SUNFOLD } from './tokens.js'
@@ -792,7 +784,6 @@ components:
 ```tsx
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { SUNFOLD } from './tokens.js'
 
 interface SurveyPanelProps {
@@ -1133,7 +1124,6 @@ components:
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CHART, SERIES } from './chart-style.js'
 
 // Where a year of solar power goes, as one bar split between the home and the grid, from the spec's `$monthly` and
@@ -1208,7 +1198,6 @@ export const EnergySplitBar = () => {
 import { Box, ButtonBase, Typography } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CHART, SERIES } from './chart-style.js'
 import { niceScale } from './nice-scale.js'
 import { useWidth } from './use-width.js'
@@ -1518,7 +1507,6 @@ import { Box, Typography } from '@mui/material'
 import type { MouseEvent } from 'react'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CHART } from './chart-style.js'
 import { niceScale } from './nice-scale.js'
 import { useWidth } from './use-width.js'
@@ -1856,7 +1844,6 @@ import { Box, Typography } from '@mui/material'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ChartCards } from './ChartCards.js'
 import { KpiTiles } from './KpiTiles.js'
 import { PlannerInputs } from './PlannerInputs.js'
@@ -1955,7 +1942,6 @@ export const DesktopPage = () => {
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CARD_SX, SUNFOLD } from './tokens.js'
 
 const euro = (value: number) => {
@@ -2030,7 +2016,6 @@ import { Box, Typography } from '@mui/material'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ChartCards } from './ChartCards.js'
 import { KpiTiles } from './KpiTiles.js'
 import { PlannerInputs } from './PlannerInputs.js'
@@ -2107,7 +2092,6 @@ export const PhonePage = () => {
 import { Box, ButtonBase, Typography } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { SUNFOLD } from './tokens.js'
 
 // Arrow keys move the selection between the pills, as in a native radio group
@@ -2204,7 +2188,6 @@ export const PillField = ({ instanceName, label, readOnly }: PillFieldProps) =>
 import { Box, Typography } from '@mui/material'
 import type { ReactNode } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { PillField } from './PillField.js'
 import { SliderField } from './SliderField.js'
 import { SUNFOLD } from './tokens.js'
@@ -2290,7 +2273,6 @@ export const PlannerInputs = ({ readOnly }: PlannerInputsProps) => {
 ```tsx
 import { Box, Slider, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { SUNFOLD } from './tokens.js'
 
 interface SliderFieldProps {
@@ -2347,7 +2329,6 @@ export const SliderField = ({ instanceName, label, step, readOnly }: SliderField
 ```tsx
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { SUNFOLD } from './tokens.js'
 
 interface SurveyPanelProps {
@@ -2487,7 +2468,6 @@ 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 { SUNFOLD } from '../_shared/tokens.js'
@@ -2513,8 +2493,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout
 ### ./src/expressions/solar.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const PANEL_KWP = 0.43
 const PANEL_AREA_M2 = 1.95
 // Vents, chimneys and the edge clearance leave about 85 % of a roof for panels
@@ -2636,8 +2614,6 @@ export default phx.domain.implementCustomExpressions({
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Stands in for the installer's booking service: the request takes a moment, then the page shows the confirmation
 export default phx.frontend.createPhoenixHandler('bookSurvey', () => {
   const navigate = phx.frontend.useNavigate()
@@ -2654,8 +2630,6 @@ export default phx.frontend.createPhoenixHandler('bookSurvey', () => {
 ### ./src/invariants/solar.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 // More panels than the roof holds is a warning: the dashboard keeps showing the figures, and a survey cannot be
 // booked until the panel count fits. A north-facing roof is only a notice, so it never blocks the booking.
 export default phx.domain.implementCustomInvariants({