@salsita-ai/sdk 0.50.0-develop.b7caacb493 → 0.50.0-develop.b929a82a82

package/dist/docs/layouts/gallery/kestrel-kettle.mdx

@@ -45,7 +45,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 { PhonePoster } from '../_shared/PhonePoster.js'
@@ -120,7 +119,6 @@ An `attributeSwitch` is a boolean. `phx.frontend.useAttributeSwitch(kettleId, 't
 ```tsx
 import { Box, Switch, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL, LABEL_SX } from './tokens.js'
 
 interface ThermometerRowProps {
@@ -200,8 +198,6 @@ invariants:
 ```
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 // The copper body is sold only with the walnut handle. The spec marks the violation `fixable`, so a change that breaks
 // it is rejected and the built-in snackbar shows the spec's message.
 export default phx.domain.implementCustomInvariants({
@@ -247,8 +243,6 @@ components:
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Stands in for the shop's cart: adding takes a moment, then the page shows the confirmation
 export default phx.frontend.createPhoenixHandler('addToCart', () => {
   const navigate = phx.frontend.useNavigate()
@@ -267,7 +261,6 @@ export default phx.frontend.createPhoenixHandler('addToCart', () => {
 ```tsx
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL } from './tokens.js'
 
 const CHECK_ICON = 'M5 12.5 10 17.5 19 7'
@@ -369,7 +362,6 @@ The same layout in a frame 390 pixels wide, as on a phone. It opens on the start
 ```tsx
 import { Box, Button, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL, LABEL_SX } from './tokens.js'
 
 // The layout's own start screen, shown on a phone while `usePreview().isPreview` is set (the spec's `preview: auto`).
@@ -454,7 +446,6 @@ On a phone, `enter()` also expands the configurator, which `usePreview().isExpan
 ```tsx
 import { Box } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL } from '../_shared/tokens.js'
 
 const PROMISES = ['Free delivery over $75', 'Two-year warranty', '30-day returns']
@@ -513,7 +504,6 @@ import { Box, Typography } from '@mui/material'
 import { detailComponent } from '@salsita-ai/sdk/domain'
 import { LocalizableMessage } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL, LABEL_SX } from './tokens.js'
 
 interface ProductHeadingProps {
@@ -560,7 +550,6 @@ The spec's `canvasCustomEnvironment` names `KettleStudio`, a layout element rend
 ```tsx
 import { ContactShadows, Environment, Lightformer } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL } from '../_shared/tokens.js'
 
 // The stage named by the spec's `canvasCustomEnvironment`: a backdrop, a soft shadow under the kettle and a studio of
@@ -857,7 +846,6 @@ components:
 ```tsx
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL } from './tokens.js'
 
 const CHECK_ICON = 'M5 12.5 10 17.5 19 7'
@@ -953,7 +941,6 @@ import { Box, Typography } from '@mui/material'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CartBlock } from './CartBlock.js'
 import { FullscreenButton } from './FullscreenButton.js'
 import { KettleOptions } from './KettleOptions.js'
@@ -1100,7 +1087,6 @@ import { IconButton, Tooltip } from '@mui/material'
 
 import { FrontendAnalyticsFactory } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL } from './tokens.js'
 
 const ENTER_ICON = 'M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'
@@ -1147,7 +1133,6 @@ export const FullscreenButton = () => {
 ```tsx
 import { Box, Divider } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { SwatchRow } from './SwatchRow.js'
 import { ThermometerRow } from './ThermometerRow.js'
 import { KESTREL } from './tokens.js'
@@ -1195,7 +1180,6 @@ import { Box, IconButton, Tooltip, Typography } from '@mui/material'
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 import { notistackSnackbarClasses } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CartBlock } from './CartBlock.js'
 import { FullscreenButton } from './FullscreenButton.js'
 import { KettleOptions } from './KettleOptions.js'
@@ -1344,7 +1328,6 @@ export const PhonePage = () => {
 ```tsx
 import { Box, Button, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL, LABEL_SX } from './tokens.js'
 
 // The layout's own start screen, shown on a phone while `usePreview().isPreview` is set (the spec's `preview: auto`).
@@ -1428,7 +1411,6 @@ import { Box, Typography } from '@mui/material'
 import { detailComponent } from '@salsita-ai/sdk/domain'
 import { LocalizableMessage } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL, LABEL_SX } from './tokens.js'
 
 interface ProductHeadingProps {
@@ -1474,7 +1456,6 @@ export const ProductHeading = ({ size }: ProductHeadingProps) => {
 import { Box, ButtonBase, Typography } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL, LABEL_SX } from './tokens.js'
 
 // Arrow keys move the selection between the swatches, as in a native radio group
@@ -1589,7 +1570,6 @@ export const SwatchRow = ({ label, instanceName, fills, readOnly }: SwatchRowPro
 ```tsx
 import { Box, Switch, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL, LABEL_SX } from './tokens.js'
 
 interface ThermometerRowProps {
@@ -1661,7 +1641,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 { PhonePoster } from '../_shared/PhonePoster.js'
@@ -1693,7 +1672,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout
 ```tsx
 import { ContactShadows, Environment, Lightformer } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL } from '../_shared/tokens.js'
 
 // The stage named by the spec's `canvasCustomEnvironment`: a backdrop, a soft shadow under the kettle and a studio of
@@ -1728,7 +1706,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('KettleStudio', ()
 ```tsx
 import { Box } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { KESTREL } from '../_shared/tokens.js'
 
 const PROMISES = ['Free delivery over $75', 'Two-year warranty', '30-day returns']
@@ -1771,8 +1748,6 @@ export default phx.frontend.createLayoutFooter(LayoutFooter)
 ### ./src/expressions/kettle.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const BASE_PRICE = 145
 const FINISH_SURCHARGE = { BrushedSteel: 0, MatteBlack: 10, Copper: 45 }
 const WOOD_SURCHARGE = { Walnut: 10, Oak: 0 }
@@ -1824,8 +1799,6 @@ export default phx.domain.implementCustomExpressions({
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Stands in for the shop's cart: adding takes a moment, then the page shows the confirmation
 export default phx.frontend.createPhoenixHandler('addToCart', () => {
   const navigate = phx.frontend.useNavigate()
@@ -1842,8 +1815,6 @@ export default phx.frontend.createPhoenixHandler('addToCart', () => {
 ### ./src/invariants/kettle.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 // The copper body is sold only with the walnut handle. The spec marks the violation `fixable`, so a change that breaks
 // it is rejected and the built-in snackbar shows the spec's message.
 export default phx.domain.implementCustomInvariants({

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

@@ -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.
@@ -501,7 +495,6 @@ 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'
@@ -537,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'
@@ -696,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. */
@@ -1459,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'
 
@@ -1773,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'
 
@@ -1880,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'
 
@@ -2020,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'
@@ -2261,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'
@@ -2308,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()
@@ -2337,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'
@@ -2491,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'
 
@@ -2670,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'
 
@@ -2729,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'
@@ -2848,7 +2826,6 @@ export const PhonePage = ({ form, reached }: 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'
 
@@ -3017,7 +2994,6 @@ export const StepHeader = ({ compact, reached }: 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
@@ -3095,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'
@@ -3406,7 +3381,6 @@ 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'
@@ -3443,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. */
@@ -3505,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
@@ -3639,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.
@@ -3667,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({