@salsita-ai/sdk 0.50.0-develop.bb71259564 → 0.50.0-develop.bc204720a8

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

package/dist/docs/layouts/gallery/tidepool-aquascape.mdx

@@ -218,7 +218,6 @@ components:
 The recipes are expressions, so each new piece gets the first free slot. `src/_catalog/recipes.ts` makes one recipe per variety with `phx.domain.createRecipe`, and the tank's expressions pass it the slot; a piece's **Swap for…** uses the same recipes for its own slot.
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { FISH, PLANTS, STONES, WOODS } from './pieces.js'
 
 // The recipes of each kind of piece, one per variety, for the slot the piece goes to. The tank's palette offers them
@@ -275,7 +274,6 @@ export const fishRecipes = (slot: number) => {
 ```tsx
 import { Box, ButtonBase, Tooltip, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { LABEL_SX, PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 
 const PLUS_ICON = 'M12 6v12M6 12h12'
@@ -401,8 +399,6 @@ export const Palette = () => {
 The tank holds eight pieces, and a 60 cm tank four. The rule is a `fixable` invariant, so a change that breaks it is rejected. The palette never makes that change: while the tank is full every recipe is `disabled` with the rule's message as its `tooltipTitle`, and the palette shows it in a banner with what to do. The same rule disables the 60 cm option of the tank's size while more than four pieces stand in it.
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Tank: {
     // `fixable`: a change that puts more pieces in the tank than it holds is rejected. Before it is made, the palette's
@@ -449,7 +445,6 @@ components:
 import { Box, ButtonBase } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { announcePinTap } from '../_inspector/index.js'
 import { PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 
@@ -547,8 +542,6 @@ components:
 import { useEffect } from 'react'
 import type { RefObject } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // The input types that take text; in these Ctrl+Z belongs to the field
 const TEXT_INPUT_TYPES: ReadonlySet<string> = new Set([
   'text',
@@ -688,7 +681,6 @@ The cameras fit into the safe area the page leaves free between the palette and
 ```tsx
 import { Box, ButtonBase, IconButton, Tooltip } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { TIDEPOOL } from '../_theme/index.js'
 
 const RECENTER_ICON = 'M4 9V5h4M20 9V5h-4M4 15v4h4M20 15v4h-4M12 9v6M9 12h6'
@@ -769,7 +761,6 @@ The inspector shows the selected piece, or the tank while nothing is selected. I
 ```tsx
 import { Box } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { MessageCallout } from './MessageCallout.js'
 import { PieceInspector } from './PieceInspector.js'
 import { TankInspector } from './TankInspector.js'
@@ -800,7 +791,6 @@ export const Inspector = ({ messages }: InspectorProps) => {
 ```tsx
 import { Box, Button, Tooltip, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ControlFields } from '../_fields/index.js'
 import { FADE_IN, KIND_LABELS, PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 import { PieceActions } from './PieceActions.js'
@@ -878,7 +868,6 @@ import { useMemo } from 'react'
 
 import { attributeSelectionComponent, genericDimensionComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { byFieldOrder } from './fields.js'
 
 export type ControlKind = 'selection' | 'dimension'
@@ -932,7 +921,6 @@ components:
 ```tsx
 import { Slider, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { TIDEPOOL } from '../_theme/index.js'
 import { FieldShell } from './FieldShell.js'
 
@@ -1017,7 +1005,6 @@ components:
 import { Box, Button, ButtonBase, Collapse, Tooltip, Typography } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { LABEL_SX, PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 
 const SWAP_ICON = 'M7 7h11l-3-3M17 17H6l3 3'
@@ -1164,7 +1151,6 @@ At the bottom of the inspector, the outline lists every piece in the order it wa
 ```tsx
 import { Box, ButtonBase, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { LABEL_SX, PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 
 type Piece = ReturnType<typeof phx.frontend.useRootEntityState>['$decor'][number]
@@ -1260,7 +1246,6 @@ Every change is one step of the undo history: adding, changing, swapping and rem
 ```tsx
 import { Box, IconButton, Tooltip, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { BrandMark, CARD_SX, TIDEPOOL } from '../_theme/index.js'
 
 const UNDO_ICON = 'M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11'
@@ -1394,8 +1379,6 @@ The layout mounts no `LayoutSlots.Services`, so the configurator's messages come
 ```ts
 import { useEffect, useRef, useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // A message stays this long unless the customer closes it or a newer one replaces it
 const SHOW_FOR_MS = 6000
 
@@ -1443,7 +1426,6 @@ import { Box, ButtonBase, Typography } from '@mui/material'
 import { useEffect, useState } from 'react'
 import type { ReactNode } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { Inspector, Outline, onPinTap } from '../_inspector/index.js'
 import type { LatestMessageState } from '../_inspector/index.js'
 import { BrandMark, CARD_SX, PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
@@ -1685,7 +1667,6 @@ import { useRef } from 'react'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { useLatestMessage } from '../_inspector/index.js'
 import { DesktopPage } from '../_shared/DesktopPage.js'
 import { PhonePage } from '../_shared/PhonePage.js'
@@ -1728,7 +1709,6 @@ The spec's `canvasCustomEnvironment` names `TidepoolStage`, a layout element ren
 ```tsx
 import { ContactShadows, Environment, Lightformer } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
 import { TIDEPOOL } from '../_theme/index.js'
 
 // The stage named by the spec's `canvasCustomEnvironment`: the page's foam colour behind the tank, a cool lamp above
@@ -2661,7 +2641,6 @@ export const SUBSTRATES = {
 ### ./src/\_catalog/recipes.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { FISH, PLANTS, STONES, WOODS } from './pieces.js'
 
 // The recipes of each kind of piece, one per variety, for the slot the piece goes to. The tank's palette offers them
@@ -2800,7 +2779,6 @@ export const firstFreeSlot = (taken: readonly number[]) => {
 import { Box, ButtonBase, Typography } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 import { FieldShell } from './FieldShell.js'
 import type { ChoiceStyle } from './fields.js'
@@ -2987,7 +2965,6 @@ export const ChoiceField = ({ entityId, entityType, instanceName, label, style,
 ```tsx
 import { Box } from '@mui/material'
 
-import type { phx } from '../../.phoenix/phx.js'
 import { ChoiceField } from './ChoiceField.js'
 import { CountField } from './CountField.js'
 import { fieldOf } from './fields.js'
@@ -3032,7 +3009,6 @@ export const ControlFields = ({ entityId, entityType }: ControlFieldsProps) => {
 ```tsx
 import { Slider, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { TIDEPOOL } from '../_theme/index.js'
 import { FieldShell } from './FieldShell.js'
 
@@ -3199,7 +3175,6 @@ import { useMemo } from 'react'
 
 import { attributeSelectionComponent, genericDimensionComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { byFieldOrder } from './fields.js'
 
 export type ControlKind = 'selection' | 'dimension'
@@ -3240,7 +3215,6 @@ export const useActiveControls = (entityId: ReturnType<typeof phx.frontend.useSe
 ```tsx
 import { Box } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { MessageCallout } from './MessageCallout.js'
 import { PieceInspector } from './PieceInspector.js'
 import { TankInspector } from './TankInspector.js'
@@ -3327,7 +3301,6 @@ export const MessageCallout = ({ message, dismiss }: LatestMessageState) => {
 ```tsx
 import { Box, ButtonBase, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { LABEL_SX, PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 
 type Piece = ReturnType<typeof phx.frontend.useRootEntityState>['$decor'][number]
@@ -3422,7 +3395,6 @@ export const Outline = () => {
 import { Box, Button, ButtonBase, Collapse, Tooltip, Typography } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { LABEL_SX, PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 
 const SWAP_ICON = 'M7 7h11l-3-3M17 17H6l3 3'
@@ -3567,7 +3539,6 @@ export const PieceActions = ({ pieceId }: PieceActionsProps) => {
 ```tsx
 import { Box, Button, Tooltip, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ControlFields } from '../_fields/index.js'
 import { FADE_IN, KIND_LABELS, PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 import { PieceActions } from './PieceActions.js'
@@ -3631,7 +3602,6 @@ export const PieceInspector = ({ pieceId }: PieceInspectorProps) => {
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { ControlFields } from '../_fields/index.js'
 import { FADE_IN, TIDEPOOL } from '../_theme/index.js'
 
@@ -3706,8 +3676,6 @@ export const onPinTap = (listener: PinTapListener) => {
 ```ts
 import { useEffect, useRef, useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // A message stays this long unless the customer closes it or a newer one replaces it
 const SHOW_FOR_MS = 6000
 
@@ -3751,7 +3719,6 @@ export type LatestMessageState = ReturnType<typeof useLatestMessage>
 ```tsx
 import { Box, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { Inspector, Outline } from '../_inspector/index.js'
 import type { LatestMessageState } from '../_inspector/index.js'
 import { CARD_SX, TIDEPOOL } from '../_theme/index.js'
@@ -3843,7 +3810,6 @@ export const DesktopPage = ({ messages }: DesktopPageProps) => {
 ```tsx
 import { Box, ButtonBase, Tooltip, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { LABEL_SX, PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 
 const PLUS_ICON = 'M12 6v12M6 12h12'
@@ -3973,7 +3939,6 @@ import { Box, ButtonBase, Typography } from '@mui/material'
 import { useEffect, useState } from 'react'
 import type { ReactNode } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { Inspector, Outline, onPinTap } from '../_inspector/index.js'
 import type { LatestMessageState } from '../_inspector/index.js'
 import { BrandMark, CARD_SX, PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
@@ -4257,7 +4222,6 @@ export const PhoneSheet = ({ title, closeLabel, bottom, height, onClose, childre
 ```tsx
 import { Box, IconButton, Tooltip, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { BrandMark, CARD_SX, TIDEPOOL } from '../_theme/index.js'
 
 const UNDO_ICON = 'M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11'
@@ -4389,7 +4353,6 @@ export const TopBar = () => {
 ```tsx
 import { Box, ButtonBase, IconButton, Tooltip } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
 import { TIDEPOOL } from '../_theme/index.js'
 
 const RECENTER_ICON = 'M4 9V5h4M20 9V5h-4M4 15v4h4M20 15v4h-4M12 9v6M9 12h6'
@@ -4469,8 +4432,6 @@ export const ViewSwitch = () => {
 import { useEffect } from 'react'
 import type { RefObject } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // The input types that take text; in these Ctrl+Z belongs to the field
 const TEXT_INPUT_TYPES: ReadonlySet<string> = new Set([
   'text',
@@ -4773,7 +4734,6 @@ import { useRef } from 'react'
 
 import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { useLatestMessage } from '../_inspector/index.js'
 import { DesktopPage } from '../_shared/DesktopPage.js'
 import { PhonePage } from '../_shared/PhonePage.js'
@@ -4815,7 +4775,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout
 import { Box, ButtonBase } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { announcePinTap } from '../_inspector/index.js'
 import { PieceIcon, TIDEPOOL, pieceLook } from '../_theme/index.js'
 
@@ -4891,7 +4850,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('DecorLabel', ({ en
 ```tsx
 import { ContactShadows, Environment, Lightformer } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
 import { TIDEPOOL } from '../_theme/index.js'
 
 // The stage named by the spec's `canvasCustomEnvironment`: the page's foam colour behind the tank, a cool lamp above
@@ -4930,7 +4888,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('TidepoolStage', ()
 ### ./src/expressions/decor.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import {
   FISH,
   LEAF_COLORS,
@@ -5100,7 +5057,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/expressions/tank.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import {
   SLOT_COUNT,
   SUBSTRATES,
@@ -5174,8 +5130,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/tank.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Tank: {
     // `fixable`: a change that puts more pieces in the tank than it holds is rejected. Before it is made, the palette's

package/dist/docs/layouts/header/custom.mdx

@@ -267,8 +267,6 @@ import { Box, Stack, Typography } from '@mui/material'
 
 import { useRootEntityPrice } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CustomHeaderContent', () => {
   const formattedPrice = useRootEntityPrice()
 

package/dist/docs/layouts/icon-sets.mdx

@@ -166,8 +166,6 @@ import { Stack } from '@mui/material'
 
 import { EditableDistanceDimensionButton, PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('customIcon', () => {
   return (
     <Stack spacing={1}>
@@ -188,8 +186,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('customIcon', () =>
 ```tsx
 import { SvgIcon, type SvgIconProps } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const NotVeryMuchShoppingCartSimple = (props: SvgIconProps) => (
   <SvgIcon {...props}>
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
@@ -228,8 +224,6 @@ import { createElement } from 'react'
 
 import { PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createGetThemeHandler(
   () =>
     ({

package/dist/docs/layouts/phoenix-elements.mdx

@@ -236,8 +236,6 @@ components:
 ```tsx
 import { Box, Chip, Stack, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('SpecialShapeFooter', () => {
   const rootEntity = phx.frontend.useRootEntityState()
 
@@ -277,8 +275,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('SpecialShapeFooter
 ### ./src/expressions/scene.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {
     $specialShapeOptions: () => {