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

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({