@salsita-ai/sdk 0.50.0-develop.f16492b14e → 0.50.0-develop.f354d3576d

package/dist/docs/integrations/lifecycle-providers.mdx

@@ -26,7 +26,6 @@ Read published data, authenticated session data, and web-component properties di
 ```tsx
 import { useWebComponentPropertyValue } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { webComponentProperties } from '../_shared/web-component-options.js'
 
 export default phx.frontend.createOnPublishedDataReadyProvider(({ children }) => {
@@ -49,8 +48,6 @@ The provider must render `children` when validation passes. Returning an empty f
 Use `createOnFrontendDataReadyProvider` to reject an unsupported combination of host inputs before Phoenix sends collected frontend data to the backend. Use `createOnBackendDataReadyProvider` to check a returned price list or permissions before the configurator initializes. Register each provider in its own `src/elements/` file, using the same `children` pattern as the published-data gate. The example's `LifecycleGate` is only a demonstration device; a real gate renders `children` as soon as its check passes.
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createOnFrontendDataReadyProvider(({ children }) => {
   const frontendData = phx.frontend.useFrontendData()
 
@@ -335,7 +332,6 @@ export const webComponentProperties = {
 ```tsx
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { LifecycleGate } from '../_shared/LifecycleGate.js'
 import { LifecycleLogPanel } from '../_shared/LifecycleLogPanel.js'
 import { resetLifecycleLog } from '../_shared/lifecycle-log.js'
@@ -358,7 +354,6 @@ export default phx.frontend.createOnApplicationStartProvider(({ children }) => {
 ### ./src/elements/OnBackendDataReady.tsx
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
 import { LifecycleGate } from '../_shared/LifecycleGate.js'
 
 export default phx.frontend.createOnBackendDataReadyProvider(({ children }) => {
@@ -379,7 +374,6 @@ export default phx.frontend.createOnBackendDataReadyProvider(({ children }) => {
 ### ./src/elements/OnConfiguratorReady.tsx
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
 import { LifecycleGate } from '../_shared/LifecycleGate.js'
 
 export default phx.frontend.createOnConfiguratorReadyProvider(({ children }) => {
@@ -400,7 +394,6 @@ export default phx.frontend.createOnConfiguratorReadyProvider(({ children }) =>
 ### ./src/elements/OnFrontendDataReady.tsx
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
 import { LifecycleGate } from '../_shared/LifecycleGate.js'
 
 export default phx.frontend.createOnFrontendDataReadyProvider(({ children }) => {
@@ -423,7 +416,6 @@ export default phx.frontend.createOnFrontendDataReadyProvider(({ children }) =>
 ```tsx
 import { useWebComponentPropertyValue } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { LifecycleGate } from '../_shared/LifecycleGate.js'
 import { webComponentProperties } from '../_shared/web-component-options.js'
 
@@ -455,7 +447,6 @@ export default phx.frontend.createOnPublishedDataReadyProvider(({ children }) =>
 ```tsx
 import { useRoutingState } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { LifecycleGate } from '../_shared/LifecycleGate.js'
 
 export default phx.frontend.createOnRoutingReadyProvider(({ children }) => {
@@ -472,7 +463,6 @@ export default phx.frontend.createOnRoutingReadyProvider(({ children }) => {
 ### ./src/elements/OnSessionReady.tsx
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
 import { LifecycleGate } from '../_shared/LifecycleGate.js'
 
 export default phx.frontend.createOnSessionReadyProvider(({ children }) => {
@@ -493,7 +483,6 @@ export default phx.frontend.createOnSessionReadyProvider(({ children }) => {
 ### ./src/handlers/collect-frontend-data.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { appendLifecycleEntry } from '../_shared/lifecycle-log.js'
 
 export default phx.frontend.createCollectFrontendDataHandler(async () => {
@@ -506,7 +495,6 @@ export default phx.frontend.createCollectFrontendDataHandler(async () => {
 ### ./src/handlers/get-web-component-options.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { webComponentProperties } from '../_shared/web-component-options.js'
 
 export default phx.frontend.createGetWebComponentOptionsHandler(() => ({

package/dist/docs/integrations/onloadprovider.mdx

@@ -65,7 +65,6 @@ import { customSummaryPageComponent, memoEval, propertyPageComponent } from '@sa
 
 import { MockSidebarOne } from '../../../../common/MockSidebar.js'
 import { MockSummary } from '../../../../common/MockSummary.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [
   phx.domain.attachComponent
@@ -103,8 +102,6 @@ import { useEffect, useState } from 'react'
 import { useRoutingState } from '@salsita-ai/sdk/react'
 import { Loader } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createOnConfiguratorReadyProvider(({ children }) => {
   const [state, setState] = useState('loading')
 

package/dist/docs/integrations/webcomponent-api/basics.mdx

@@ -668,6 +668,8 @@ export const AddToCartButton = () => {
 }
 ```
 
+The example attaches this button as a legacy `finalizeButton` component; a new project declares `finalizeAction` components instead, see [Finalization](?path=/docs/phoenix-finalization--docs).
+
 ### Live preview
 
 ## Client-facing documentation
@@ -790,7 +792,6 @@ import {
 import { MockSidebarOne } from '../../../../common/MockSidebar.js'
 import { MockSummary } from '../../../../common/MockSummary.js'
 import { getMockChairComponents } from '../../../../common/mock-chair-model/mock-chair-model-components.js'
-import { phx } from '../../.phoenix/phx.js'
 import { webComponentEvents, webComponentProperties } from '../_shared/web-component-optionts.js'
 
 const pushToECommerce = (_accessToken: string, _cartId: string, _name: string, _price: number) =>
@@ -883,7 +884,6 @@ export default [
 ### ./src/handlers/get-webcomponent-options.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { webComponentEvents, webComponentProperties } from '../_shared/web-component-optionts.js'
 
 export default phx.frontend.createGetWebComponentOptionsHandler(() => ({

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

@@ -139,7 +139,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,}$/