@salsita-ai/sdk 0.50.0-develop.b47f1774a2 → 0.50.0-develop.b5d443db78

package/dist/docs/integrations/webcomponent-api/preset-tags.mdx

@@ -71,6 +71,10 @@ Alternatively, the `presetTags` HTML attribute can be provided with a comma-sepa
 ### ./spec/domain.yaml
 
 ```yaml
+availableLocales:
+  - en
+  - cs
+
 model:
   latest:
     entityTypes:
@@ -139,7 +143,6 @@ presets:
 
 ```tsx
 import { getMockChairComponents } from '../../../../common/mock-chair-model/mock-chair-model-components.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [...getMockChairComponents('Scene', phx.domain.attachComponent)]
 ```

package/dist/docs/layouts/custom-layout.mdx

@@ -40,7 +40,6 @@ import { useState } from 'react'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { BottomSheet } from '../_shared/BottomSheet.js'
 import { FullscreenToggle } from '../_shared/FullscreenToggle.js'
 import { MessageToast } from '../_shared/MessageToast.js'
@@ -168,7 +167,7 @@ const ConfiguratorLayout = () => {
 export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout', ConfiguratorLayout)
 ```
 
-The components it uses live in `src/_shared/`, which Phoenix does not import by convention, so the layout imports them itself. Application projects receive `phx` as a global. Storybook examples cannot rely on that project environment, so these files import it from `../../.phoenix/phx.js`; leave that import out in a project.
+The components it uses live in `src/_shared/`, which Phoenix does not import by convention, so the layout imports them itself. Application projects receive `phx` as a global. Storybook examples cannot rely on that project environment, so the example's files import it from `../../.phoenix/phx.js`; leave that import out in a project.
 
 ## What the layout has to do
 
@@ -190,7 +189,6 @@ import { Box, Button, Typography } from '@mui/material'
 
 import { detailComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { EdgeFinishCards } from './EdgeFinishCards.js'
 import { ReviewActions } from './ReviewActions.js'
 
@@ -348,8 +346,6 @@ import type { KeyboardEvent } from 'react'
 
 import type { UseAttributeSelection } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Cross-sections of the tabletop's edge, keyed by the option values of the spec.
 const EDGE_PROFILES: Readonly<Record<string, string>> = {
   None: 'M0 4H32V20H0Z',
@@ -488,8 +484,6 @@ import { Button, Tooltip } from '@mui/material'
 
 import { FrontendAnalyticsFactory } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const ENTER_ICON = 'M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'
 const EXIT_ICON = 'M9 4v5H4M15 4v5h5M15 20v-5h5M9 20v-5H4'
 
@@ -550,8 +544,6 @@ The customer tries the four finishes against each other, so the layout offers **
 ```tsx
 import { Box, IconButton, Tooltip } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const UNDO_ICON = 'M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11'
 const REDO_ICON = 'M15 14l5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13'
 
@@ -625,8 +617,6 @@ import { useEffect, useState } from 'react'
 
 import type { ConfiguratorMessage } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const VIOLATION_SEVERITY = { fatal: 'error', fixable: 'error', warning: 'warning', notice: 'info' } as const
 const RANK = { info: 0, warning: 1, error: 2 } as const
 const VISIBLE_MS = 6000
@@ -680,8 +670,6 @@ To give the toast something to show, the spec registers one transformer. Choosin
 ```ts
 import { msg } from '@lingui/core/macro'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // A tree-trunk edge is cut by hand; choosing it carries a hint, which reaches the layout as a side-effect message
 export default phx.frontend.transformerBuilder.when
   .entity(['Table'])
@@ -717,8 +705,6 @@ components:
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Stands in for the shop's quote service: the request takes a moment, then the panel shows the confirmation
 export default phx.frontend.createPhoenixHandler('requestQuote', () => {
   const navigate = phx.frontend.useNavigate()
@@ -739,8 +725,6 @@ The review step offers the spec's primary finalize action, or the first one when
 ```tsx
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const BUTTON_SX = { minBlockSize: 48, borderRadius: 999, textTransform: 'none', fontWeight: 600 } as const
 
 interface ReviewActionsProps {
@@ -1053,7 +1037,6 @@ The element is registered with `phx.frontend.createCustomPhoenixEntityElement` u
 import { Box, ButtonBase, Popover, Tooltip } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { EdgeFinishCards } from '../_shared/EdgeFinishCards.js'
 
 // The edge profile the button shows, the square edge of the cards' drawings
@@ -1168,8 +1151,6 @@ components:
 ```tsx
 import { Box, Button, Tooltip } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // The spec's view states, each with the label of the button that shows it
 const VIEWS = [
   { state: 'overview', label: 'Whole table' },
@@ -1742,8 +1723,6 @@ import type { KeyboardEvent } from 'react'
 
 import type { UseAttributeSelection } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Cross-sections of the tabletop's edge, keyed by the option values of the spec.
 const EDGE_PROFILES: Readonly<Record<string, string>> = {
   None: 'M0 4H32V20H0Z',
@@ -1878,8 +1857,6 @@ import { Button, Tooltip } from '@mui/material'
 
 import { FrontendAnalyticsFactory } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const ENTER_ICON = 'M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'
 const EXIT_ICON = 'M9 4v5H4M15 4v5h5M15 20v-5h5M9 20v-5H4'
 
@@ -1939,8 +1916,6 @@ import { useEffect, useState } from 'react'
 
 import type { ConfiguratorMessage } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const VIOLATION_SEVERITY = { fatal: 'error', fixable: 'error', warning: 'warning', notice: 'info' } as const
 const RANK = { info: 0, warning: 1, error: 2 } as const
 const VISIBLE_MS = 6000
@@ -1994,7 +1969,6 @@ import { Box, Button, Typography } from '@mui/material'
 
 import { detailComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { EdgeFinishCards } from './EdgeFinishCards.js'
 import { ReviewActions } from './ReviewActions.js'
 
@@ -2122,8 +2096,6 @@ export const ProductPanel = ({ collapsed = false, inSheet = false }: ProductPane
 ```tsx
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const BUTTON_SX = { minBlockSize: 48, borderRadius: 999, textTransform: 'none', fontWeight: 600 } as const
 
 interface ReviewActionsProps {
@@ -2174,8 +2146,6 @@ export const ReviewActions = ({ onBack }: ReviewActionsProps) => {
 ```tsx
 import { Box, Button, Tooltip } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // The spec's view states, each with the label of the button that shows it
 const VIEWS = [
   { state: 'overview', label: 'Whole table' },
@@ -2269,8 +2239,6 @@ export const SceneControls = ({ compact = false, resetOnly = false }: SceneContr
 ```tsx
 import { Box, IconButton, Tooltip } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const UNDO_ICON = 'M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11'
 const REDO_ICON = 'M15 14l5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13'
 
@@ -2338,7 +2306,6 @@ import { useState } from 'react'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { BottomSheet } from '../_shared/BottomSheet.js'
 import { FullscreenToggle } from '../_shared/FullscreenToggle.js'
 import { MessageToast } from '../_shared/MessageToast.js'
@@ -2472,7 +2439,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout
 import { Box, ButtonBase, Popover, Tooltip } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { EdgeFinishCards } from '../_shared/EdgeFinishCards.js'
 
 // The edge profile the button shows, the square edge of the cards' drawings
@@ -2531,8 +2497,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('EdgeFinishHotspot'
 ### ./src/expressions/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const EDGE_FINISH_SURCHARGE = { None: 0, Facet: 90, Round: 120, TreeTrunk: 340 }
 
 export default phx.domain.implementCustomExpressions({
@@ -2558,8 +2522,6 @@ export default phx.domain.implementCustomExpressions({
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Stands in for the shop's quote service: the request takes a moment, then the panel shows the confirmation
 export default phx.frontend.createPhoenixHandler('requestQuote', () => {
   const navigate = phx.frontend.useNavigate()
@@ -2578,8 +2540,6 @@ export default phx.frontend.createPhoenixHandler('requestQuote', () => {
 ```ts
 import { msg } from '@lingui/core/macro'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // A tree-trunk edge is cut by hand; choosing it carries a hint, which reaches the layout as a side-effect message
 export default phx.frontend.transformerBuilder.when
   .entity(['Table'])

package/dist/docs/layouts/custom-price.mdx

@@ -300,8 +300,6 @@ import { Stack, Typography, styled } from '@mui/material'
 
 import { customPriceFooterComponent, memoEval } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const Row = styled('div')(() => ({
   display: 'flex',
   justifyContent: 'space-between',

package/dist/docs/layouts/custom-theme-handler.mdx

@@ -29,8 +29,6 @@ import { standardWebComponentProperties } from '@salsita-ai/sdk/domain'
 import { useWebComponentPropertyValue } from '@salsita-ai/sdk/react'
 import { desktopStyles, pxToRem } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const createCustomThemeOptions = (htmlFontSize: number): ThemeOptions => ({
   palette: {
     primary: { main: '#01483E', contrastText: '#FFFFFF' },
@@ -136,8 +134,6 @@ import { standardWebComponentProperties } from '@salsita-ai/sdk/domain'
 import { useWebComponentPropertyValue } from '@salsita-ai/sdk/react'
 import { desktopStyles, pxToRem } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const createCustomThemeOptions = (htmlFontSize: number): ThemeOptions => ({
   components: {
     MuiButton: {

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

@@ -46,7 +46,6 @@ import { Box } from '@mui/material'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT } from '../_form/index.js'
 import { DesktopPage } from '../_shared/DesktopPage.js'
 import { PhonePage } from '../_shared/PhonePage.js'
@@ -115,7 +114,6 @@ components:
 ```tsx
 import { Box, ButtonBase, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT, useWarnings } from '../_form/index.js'
 import { STEP_WARNINGS } from './step-warnings.js'
 
@@ -303,7 +301,6 @@ import type { KeyboardEvent } from 'react'
 
 import { attributeSelectionComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { FieldShell } from './FieldShell.js'
 import { ARDENT } from './tokens.js'
 
@@ -490,8 +487,6 @@ invariants:
 ```
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const PRESSURE_LABEL = { Bar7: '7.5 bar', Bar10: '10 bar', Bar13: '13 bar' }
 const RECEIVER_LITRES = { None: 0, Litres500: 500, Litres1000: 1000, Litres2000: 2000 }
 const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/
@@ -546,13 +541,11 @@ export default phx.domain.implementCustomInvariants({
 
 The flow's limit depends on the pressure: at 13 bar the largest frame delivers less air. The `flow` dimension keeps a fixed range of 2 to 40 m³/min and the `flowAboveRange` warning carries the limit. A `max` read from an expression would not do: a pressure change that leaves the flow above a dimension's `max` is rejected with a built-in message, so the engineer could not choose 13 bar at all.
 
-`useWarnings` resolves the warnings of the committed configuration. It reads them from `phx.frontend.useFinalizeViolations()`, which lists the violations that block finalizing; `phx.frontend.useStateValidity()` holds the same list, but on `phx.frontend` it is typed as the value it returns rather than as a hook, so a call does not type-check.
+`useWarnings` resolves the warnings of the committed configuration. It reads them from `phx.frontend.useFinalizeViolations()`, which lists the violations that block finalizing.
 
 ```ts
 import { useMemo } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export interface Warning {
   readonly type: string
   readonly text: string
@@ -560,8 +553,7 @@ export interface Warning {
 
 // The warnings of the committed configuration with their text resolved. A `warning` invariant keeps the change, so its
 // violation stays in the committed state until the customer resolves it, and finalizing waits for that.
-// `useFinalizeViolations` lists them; `useStateValidity` holds the same list, but on `phx.frontend` it is typed as the
-// validity value instead of a hook, so calling it does not type-check.
+// `useFinalizeViolations` lists them.
 export const useWarnings = (): readonly Warning[] => {
   const { violations } = phx.frontend.useFinalizeViolations()
   const resolve = phx.frontend.useResolveLocalizable()
@@ -625,7 +617,6 @@ components:
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT, OVERLINE_SX } from '../_form/index.js'
 
 const formatEuro = (amount: number) => {
@@ -751,7 +742,6 @@ components:
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { setQuoteReceipt } from '../_shared/quote-receipt.js'
 
 const VALID_DAYS = 30
@@ -826,7 +816,6 @@ export const useQuoteReceipt = () => {
 ```tsx
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT } from '../_form/index.js'
 
 interface QuoteActionProps {
@@ -1352,7 +1341,6 @@ import type { KeyboardEvent } from 'react'
 
 import { attributeSelectionComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { FieldShell } from './FieldShell.js'
 import { ARDENT } from './tokens.js'
 
@@ -1592,7 +1580,6 @@ export const FieldShell = ({
 import { Box, InputBase, Slider, Typography } from '@mui/material'
 import { useEffect, useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { FieldShell } from './FieldShell.js'
 import { ARDENT } from './tokens.js'
 
@@ -1720,7 +1707,6 @@ import { Box, Switch, Typography } from '@mui/material'
 
 import { attributeSwitchComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT } from './tokens.js'
 
 interface SwitchFieldProps {
@@ -1790,7 +1776,6 @@ export const SwitchField = (props: SwitchFieldProps) => {
 import { InputBase } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { FieldShell } from './FieldShell.js'
 import { ARDENT } from './tokens.js'
 
@@ -1897,8 +1882,6 @@ export const OVERLINE_SX = {
 ```ts
 import { useMemo } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export interface Warning {
   readonly type: string
   readonly text: string
@@ -1906,8 +1889,7 @@ export interface Warning {
 
 // The warnings of the committed configuration with their text resolved. A `warning` invariant keeps the change, so its
 // violation stays in the committed state until the customer resolves it, and finalizing waits for that.
-// `useFinalizeViolations` lists them; `useStateValidity` holds the same list, but on `phx.frontend` it is typed as the
-// validity value instead of a hook, so calling it does not type-check.
+// `useFinalizeViolations` lists them.
 export const useWarnings = (): readonly Warning[] => {
   const { violations } = phx.frontend.useFinalizeViolations()
   const resolve = phx.frontend.useResolveLocalizable()
@@ -1926,7 +1908,6 @@ import { useEffect, useRef, useState } from 'react'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT, useWarnings } from '../_form/index.js'
 import { PriceBreakdown } from './PriceBreakdown.js'
 import { QuoteAction } from './QuoteAction.js'
@@ -2163,7 +2144,6 @@ import { useEffect, useRef, useState } from 'react'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT } from '../_form/index.js'
 import { PriceBreakdown } from './PriceBreakdown.js'
 import { QuoteAction } from './QuoteAction.js'
@@ -2342,7 +2322,6 @@ export const PhonePage = () => {
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT, OVERLINE_SX } from '../_form/index.js'
 
 const formatEuro = (amount: number) => {
@@ -2452,7 +2431,6 @@ export const PriceBreakdown = () => {
 ```tsx
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT } from '../_form/index.js'
 
 interface QuoteActionProps {
@@ -2515,7 +2493,6 @@ export const QuoteAction = ({ onBlocked, compact }: QuoteActionProps) => {
 ```tsx
 import { Box, Button, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT, OVERLINE_SX, TextInputField, useWarnings } from '../_form/index.js'
 import { setQuoteReceipt, useQuoteReceipt } from './quote-receipt.js'
 import { STEP_WARNINGS } from './step-warnings.js'
@@ -2754,7 +2731,6 @@ export const ReviewStep = ({ readOnly, revealWarnings }: ReviewStepProps) => {
 import { Box, Typography } from '@mui/material'
 import type { ReactNode } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT, ChoiceField, NumberField, OVERLINE_SX, SwitchField } from '../_form/index.js'
 import { ReviewStep } from './ReviewStep.js'
 
@@ -2939,7 +2915,6 @@ export const StepForm = ({ readOnly, revealWarnings }: StepFormProps) => {
 ```tsx
 import { Box, ButtonBase, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT, useWarnings } from '../_form/index.js'
 import { STEP_WARNINGS } from './step-warnings.js'
 
@@ -3145,7 +3120,6 @@ import { Box } from '@mui/material'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ARDENT } from '../_form/index.js'
 import { DesktopPage } from '../_shared/DesktopPage.js'
 import { PhonePage } from '../_shared/PhonePage.js'
@@ -3172,8 +3146,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout
 ### ./src/expressions/compressor.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 // The frames Ardent builds, by motor power, with the free air delivery of each at 7.5 bar in m³/min
 const LARGEST_FRAME = { kw: 250, flow: 41 }
 const FRAMES = [
@@ -3422,7 +3394,6 @@ export default phx.domain.implementCustomExpressions({
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { setQuoteReceipt } from '../_shared/quote-receipt.js'
 
 const VALID_DAYS = 30
@@ -3459,8 +3430,6 @@ export default phx.frontend.createPhoenixHandler('requestQuote', () => {
 ### ./src/invariants/compressor.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const PRESSURE_LABEL = { Bar7: '7.5 bar', Bar10: '10 bar', Bar13: '13 bar' }
 const RECEIVER_LITRES = { None: 0, Litres500: 500, Litres1000: 1000, Litres2000: 2000 }
 const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/

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

@@ -48,7 +48,6 @@ import { Box } from '@mui/material'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { DesktopDeck } from '../_shared/DesktopDeck.js'
 import { PhoneDeck } from '../_shared/PhoneDeck.js'
 import { CORVID } from '../_shared/tokens.js'
@@ -120,7 +119,6 @@ import type { KeyboardEvent } from 'react'
 
 import { PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID } from './tokens.js'
 
 // The panel the tabs control; `TabPanel` carries this id
@@ -312,7 +310,6 @@ components:
 ```tsx
 import { distanceDimensionComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { HudSlider } from './HudSlider.js'
 import { SpecRow } from './SpecRow.js'
 
@@ -370,7 +367,6 @@ export const ArmLengthField = (props: ArmLengthFieldProps) => {
 ```tsx
 import { angleDimensionComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID } from '../_shared/tokens.js'
 import { HudSlider } from './HudSlider.js'
 import { SpecRow } from './SpecRow.js'
@@ -479,7 +475,6 @@ components:
 ```tsx
 import { Box, ButtonBase } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID } from '../_shared/tokens.js'
 
 // Rendered by the spec's `sceneEntityObjectHtmlHotspot` on the payload mount: a target on the drone that opens the
@@ -584,7 +579,6 @@ import { useEffect, useState } from 'react'
 
 import type { ConfiguratorMessage } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID, GLASS_SX } from './tokens.js'
 
 const VISIBLE_MS = 9000
@@ -725,7 +719,6 @@ import type { Theme } from '@mui/material'
 import { FrontendAnalyticsFactory, LayoutSlots } from '@salsita-ai/sdk/configurator'
 import { PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID, GLASS_SX } from './tokens.js'
 
 // The built-in view controls draw with the MUI theme's palette. A dark palette makes them part of the deck, and with
@@ -858,7 +851,6 @@ The `readonly` property sets `phx.frontend.useAccessService().accessInfo.viewMod
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { DroneFields } from '../_controls/DroneFields.js'
 import { TAB_PANEL_ID } from './DroneTabs.js'
 import { CORVID, LABEL_SX } from './tokens.js'
@@ -914,7 +906,6 @@ The spec's `canvasCustomEnvironment` names `DroneHangar`, a layout element rende
 ```tsx
 import { ContactShadows, Environment, Grid, Lightformer } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID } from '../_shared/tokens.js'
 
 // The floor lies 320 mm below the drone's centre, so the drone hovers over it on either landing gear
@@ -1704,7 +1695,6 @@ components:
 ```tsx
 import { distanceDimensionComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { HudSlider } from './HudSlider.js'
 import { SpecRow } from './SpecRow.js'
 
@@ -1798,7 +1788,6 @@ import { Box, Switch, Typography } from '@mui/material'
 
 import { attributeSwitchComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID, LABEL_SX } from '../_shared/tokens.js'
 import { SpecRow } from './SpecRow.js'
 
@@ -1866,7 +1855,6 @@ export const GearField = (props: GearFieldProps) => {
 ```tsx
 import { angleDimensionComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID } from '../_shared/tokens.js'
 import { HudSlider } from './HudSlider.js'
 import { SpecRow } from './SpecRow.js'
@@ -2059,7 +2047,6 @@ import type { KeyboardEvent, ReactNode } from 'react'
 
 import { attributeSelectionComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID, LABEL_SX, bracketsSx } from '../_shared/tokens.js'
 import { SpecRow } from './SpecRow.js'
 
@@ -2343,7 +2330,6 @@ export const LIVERY_VISUALS: Readonly<Record<string, ReactNode>> = {
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { DroneTabs } from './DroneTabs.js'
 import { HudReadout } from './HudReadout.js'
 import { MessageLog } from './MessageLog.js'
@@ -2472,7 +2458,6 @@ import type { KeyboardEvent } from 'react'
 
 import { PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID } from './tokens.js'
 
 // The panel the tabs control; `TabPanel` carries this id
@@ -2574,7 +2559,6 @@ import { Box, Typography } from '@mui/material'
 
 import { detailComponent, viewControlsComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID, GLASS_SX, LABEL_SX, bracketsSx } from './tokens.js'
 
 interface HudReadoutProps {
@@ -2700,7 +2684,6 @@ import { useEffect, useState } from 'react'
 
 import type { ConfiguratorMessage } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID, GLASS_SX } from './tokens.js'
 
 const VISIBLE_MS = 9000
@@ -2800,7 +2783,6 @@ export const MessageLog = ({ compact }: MessageLogProps) => {
 ```tsx
 import { Box } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { DroneTabs } from './DroneTabs.js'
 import { HudReadout } from './HudReadout.js'
 import { MessageLog } from './MessageLog.js'
@@ -2903,7 +2885,6 @@ export const PhoneDeck = () => {
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { DroneFields } from '../_controls/DroneFields.js'
 import { TAB_PANEL_ID } from './DroneTabs.js'
 import { CORVID, LABEL_SX } from './tokens.js'
@@ -2963,7 +2944,6 @@ import type { Theme } from '@mui/material'
 import { FrontendAnalyticsFactory, LayoutSlots } from '@salsita-ai/sdk/configurator'
 import { PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID, GLASS_SX } from './tokens.js'
 
 // The built-in view controls draw with the MUI theme's palette. A dark palette makes them part of the deck, and with
@@ -3143,7 +3123,6 @@ import { Box } from '@mui/material'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { DesktopDeck } from '../_shared/DesktopDeck.js'
 import { PhoneDeck } from '../_shared/PhoneDeck.js'
 import { CORVID } from '../_shared/tokens.js'
@@ -3176,7 +3155,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout
 ```tsx
 import { ContactShadows, Environment, Grid, Lightformer } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID } from '../_shared/tokens.js'
 
 // The floor lies 320 mm below the drone's centre, so the drone hovers over it on either landing gear
@@ -3232,7 +3210,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('DroneHangar', () =
 ```tsx
 import { Box, ButtonBase } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { CORVID } from '../_shared/tokens.js'
 
 // Rendered by the spec's `sceneEntityObjectHtmlHotspot` on the payload mount: a target on the drone that opens the
@@ -3313,8 +3290,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('PayloadHotspot', (
 ### ./src/expressions/drone.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const MOTORS = { Quad: 4, Hexa: 6 }
 
 // Prices in US dollars
@@ -3391,8 +3366,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/drone.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 // The winch's load needs the thrust of six motors. The spec marks the violation `fixable`, so a change that breaks it
 // is rejected, and the layout's message log shows the spec's message.
 export default phx.domain.implementCustomInvariants({
@@ -3409,8 +3382,6 @@ export default phx.domain.implementCustomInvariants({
 ```ts
 import { msg } from '@lingui/core/macro'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Choosing the LiDAR carries a hint, which reaches the layout as a side-effect message
 export default phx.frontend.transformerBuilder.when
   .entity(['Drone'])