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

package/dist/docs/layouts/sidebar-footer/universal.mdx

@@ -646,8 +646,6 @@ components:
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('addToCart', () => {
   const configurationId = phx.frontend.useConfigurationId()
 
@@ -667,8 +665,6 @@ export default phx.frontend.createPhoenixHandler('addToCart', () => {
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('downloadPdf', () => {
   const configurationId = phx.frontend.useConfigurationId()
 
@@ -688,8 +684,6 @@ export default phx.frontend.createPhoenixHandler('downloadPdf', () => {
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('requestQuote', () => {
   const configurationId = phx.frontend.useConfigurationId()
 
@@ -709,8 +703,6 @@ export default phx.frontend.createPhoenixHandler('requestQuote', () => {
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('saveTemplate', () => {
   const configurationId = phx.frontend.useConfigurationId()
 
@@ -730,8 +722,6 @@ export default phx.frontend.createPhoenixHandler('saveTemplate', () => {
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('share', () => {
   const configurationId = phx.frontend.useConfigurationId()
 

package/dist/docs/layouts/tool-controls.mdx

@@ -199,7 +199,6 @@ components:
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
 import { createDeckSectionSketchingObject } from '../../../../common/sketching-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [
   phx.domain.attachComponent

package/dist/docs/layouts/toolbar.mdx

@@ -448,8 +448,6 @@ components:
 ```tsx
 import { Stack, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CustomHelpContent', () => {
   return (
     <Stack spacing={2}>
@@ -468,8 +466,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('CustomHelpContent'
 ```tsx
 import { DesktopToolbar, PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CustomToolbarItem', () => {
   return (
     <DesktopToolbar.Button title="Custom Toolbar Item" size="small">

package/dist/docs/layouts/universal.mdx

@@ -2,6 +2,8 @@
 
 The universal layout covers the features of the previous distinct layouts. Start with the preset closest to your use case, then adjust the layout using the settings in the sidebar.
 
+The example finalizes through the legacy `finalizeButton` and `finalizePage` components and registers its toolbar help with the deprecated `phx.frontend.createToolbarHelp`; a new project declares `finalizeAction` components ([Finalization](?path=/docs/phoenix-finalization--docs)) and the help as a `helpToolbarButton` in the toolbar YAML ([Toolbar](?path=/docs/layouts-toolbar--docs)).
+
 ## Complete Implementation
 
 {/* AUTO-GENERATED SECTION: This section is automatically updated by 'phoenix story build' */}
@@ -471,7 +473,6 @@ import { MockFinalizePage } from '../../../../common/MockFinalizePage.js'
 import { MockSidebarOne, MockSidebarTwo } from '../../../../common/MockSidebar.js'
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
 import type * as Model from '../../.phoenix/application-types.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export const CustomSidebarNavigation = () => {
   const { navigationSystem, storeSystem } = phx.frontend.useDomain()
@@ -712,7 +713,6 @@ export default [
 
 ```tsx
 import { MockSidebarFooter } from '../../../../common/MockSidebarFooter.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default phx.frontend.createLayoutFooter(MockSidebarFooter)
 ```
@@ -722,8 +722,6 @@ export default phx.frontend.createLayoutFooter(MockSidebarFooter)
 ```tsx
 import { DialogContent, DialogTitle, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createToolbarHelp(() => (
   <>
     <DialogTitle>Lost, are you?</DialogTitle>
@@ -737,8 +735,6 @@ export default phx.frontend.createToolbarHelp(() => (
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   ConsoleUnit: {
     $tabsOnSelect: self => self.$root.tabsOnSelect,
@@ -754,8 +750,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/transformers/reset-navigation-on-deselection.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['ConsoleUnit'])
   .deselected({ inFavorOf: ['Scene'] })
@@ -766,8 +760,6 @@ export default phx.frontend.transformerBuilder.when
 ### ./src/transformers/reset-navigation-on-selection.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['ConsoleUnit'])
   .selected()

package/dist/docs/other-features/client-side-rendering/camera-padding.mdx

@@ -358,8 +358,6 @@ import { Alert, Button, Stack, Typography } from '@mui/material'
 import { useCallback, useState } from 'react'
 import { v4 } from 'uuid'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const EXPORT_COUNTS = [1, 5, 10] as const
 
 export default phx.frontend.createCustomPhoenixEntityElement('ExportStressControls', () => {

package/dist/docs/other-features/client-side-rendering/custom.mdx

@@ -182,8 +182,6 @@ components:
 ```ts
 import { sceneEntityObjectDecalComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(sceneEntityObjectDecalComponent, 'product')
@@ -214,8 +212,6 @@ export default [
 import { Button, Stack } from '@mui/material'
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('RenderButtonsComponent', () => {
   const { imageRenderingSystem } = phx.frontend.useConfigurator()
 
@@ -343,8 +339,6 @@ import { ContactShadows, Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 import { useEffect } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {
   const { gl } = useThree()
 

package/dist/docs/other-features/client-side-rendering/declarative.mdx

@@ -126,7 +126,7 @@ The SDK waits up to 10 seconds for each canvas flush and logs a `Force flush tim
 
 ### Known gaps
 
-Images render offscreen, and the live canvas shows a still of the current view while they generate, so animations pause until generation finishes. Without [Postprocessing](?path=/docs/other-features-client-side-rendering-postprocessing--docs), tone mapping and the sRGB conversion run once over the finished image instead of per material, as on the canvas. The scene renders over a transparent background, and a background colour (a Color `scene.background`, the image's `backgroundColor`, or white for JPEG) is composited behind it afterwards. That means:
+Images render offscreen, and the live canvas shows a still of the current view while they generate, so animations pause until generation finishes. Exports run one after another, never interleaved, and while one is waiting or running the built-in universal layout does not respond: a press shows that the configurator is exporting. Afterwards it shows the configuration as currently committed. Without [Postprocessing](?path=/docs/other-features-client-side-rendering-postprocessing--docs), tone mapping and the sRGB conversion run once over the finished image instead of per material, as on the canvas. The scene renders over a transparent background, and a background colour (a Color `scene.background`, the image's `backgroundColor`, or white for JPEG) is composited behind it afterwards. That means:
 
 - materials with `toneMapped: false` are tone mapped in exported images;
 - a texture or environment `scene.background` in an sRGB colour space is tone mapped in exported images, while the canvas draws it without tone mapping;
@@ -557,8 +557,6 @@ components:
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $otherTables: self => self.$scene.$tables.filter(table => table.id !== self.id).map(table => table.id),
@@ -572,8 +570,6 @@ export default phx.domain.implementCustomExpressions({
 import { useCallback } from 'react'
 import { v4 } from 'uuid'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('renderImages', () => {
   const { imageRenderingSystem } = phx.frontend.useConfigurator()
   const { storeSystem } = phx.frontend.useDomain()

package/dist/docs/other-features/client-side-rendering/postprocessing.mdx

@@ -342,8 +342,6 @@ import { ToneMappingMode } from 'postprocessing'
 
 import { Postprocessing } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {
   return (
     <>
@@ -362,8 +360,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment'
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $otherTables: self => self.$scene.$tables.filter(table => table.id !== self.id).map(table => table.id),
@@ -377,8 +373,6 @@ export default phx.domain.implementCustomExpressions({
 import { useCallback } from 'react'
 import { v4 } from 'uuid'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('renderImages', () => {
   const { imageRenderingSystem } = phx.frontend.useConfigurator()
   const { storeSystem } = phx.frontend.useDomain()

package/dist/docs/other-features/component-filters.mdx

@@ -440,7 +440,6 @@ import { memoEval, propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [
   ...getConsoleRenderingComponents('Box', phx.domain.attachComponent),
@@ -513,16 +512,12 @@ export default [
 ### ./src/elements/LayoutFooter.tsx
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createLayoutFooter(() => <></>)
 ```
 
 ### ./src/transformers/reset-navigation-on-deselection.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['Box'])
   .deselected({ inFavorOf: ['Scene'] })
@@ -533,8 +528,6 @@ export default phx.frontend.transformerBuilder.when
 ### ./src/transformers/reset-navigation-on-selection.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['Box'])
   .selected()

package/dist/docs/other-features/currency.mdx

@@ -65,19 +65,21 @@ components:
     price:
       eur:
         $filter:
-          $read: $eurPriceActive
+          active:
+            $read: $eurPriceActive
         price:
           $read: $eurPrice
         currency: EUR
       usd:
         $filter:
-          $read: $usdPriceActive
+          active:
+            $read: $usdPriceActive
         price:
           $read: $usdPrice
         currency: USD
 ```
 
-The `$filter` property evaluates the expression and only renders the price component when the expression returns `true`. This means only the active currency's price displays in the UI.
+The `active` criterion of `$filter` evaluates the expression and only renders the price component when the expression returns `true`. This means only the active currency's price displays in the UI.
 
 You can also bind the currency directly to an attribute for display purposes:
 
@@ -191,7 +193,6 @@ components:
 
 ```ts
 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)]
 ```
@@ -199,8 +200,6 @@ export default [...getMockChairComponents('Scene', phx.domain.attachComponent)]
 ### ./src/expressions/scene.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {
     $usdPriceActive: (_s, _state, ctx) => {

package/dist/docs/other-features/domain-actions.mdx

@@ -298,8 +298,6 @@ components:
 ### ./src/actions/nudge-hole.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 /** How far a hole may sit from the plate's center on either axis, in plate units. */
 const REACH = 150
 
@@ -341,8 +339,6 @@ import { Button, Stack } from '@mui/material'
 
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const STEP = 20
 
 /** Nudges the selected hole with the same `nudgeHole` action the assistant calls, one step at a time. */
@@ -403,7 +399,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('NudgeControl', ({
 
 ```ts
 import { createPlate } from '../../../../common/plate-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default phx.domain.implementCustomExpressions({
   Hole: {

package/dist/docs/other-features/dynamic-component-attachments.mdx

@@ -31,6 +31,19 @@ In this example, the railing has legs, multi-purpose adaptors, and through brack
 ```yaml
 expressions:
   Scene:
+    $positionedLegs:
+      type: array
+      items:
+        type: object
+        properties:
+          key:
+            type: string
+          offsetX:
+            type: number
+        required:
+          - key
+          - offsetX
+        additionalProperties: false
     $legObjects:
       type: array
       items:
@@ -49,60 +62,80 @@ The `SceneEntityRemoteObjectComponentState` type includes fields like `fileUrl`,
 
 ### Expression Implementation
 
-Implement the expressions using `memoEval` to control when recalculation happens. The first function returns dependencies, the second performs the calculation.
+Implement the expressions in a file in `src/expressions/` with `phx.domain.implementCustomExpressions`, using `memoEval` to control when recalculation happens. The first function returns dependencies, the second performs the calculation.
 
 Calculate leg positions first, then derive component configurations from those positions:
 
 ```typescript
-export default {
-  expressions: implementCustomExpressions({
-    Scene: {
-      $positionedLegs: memoEval(
-        s => [s.length],
-        length => {
-          const numberOfLegs = Math.ceil(length / 350)
-
-          return Array.from({ length: numberOfLegs }, (_, i) => i * 350).map(offsetX => ({
-            key: offsetX.toString(),
-            offsetX,
-          }))
-        }
-      ),
-      $legObjects: memoEval(
-        s => [s.$positionedLegs],
-        positionedLegs => {
-          return positionedLegs.map(p => ({
-            key: p.key,
-            fileUrl: '/models/railings.gltf',
-            objectName: 'LEG_VLWF-820',
-            dimensionUnit: 'm',
-          }))
-        }
-      ),
-    },
-  }),
-}
+// src/expressions/scene.ts
+import { memoEval } from '@salsita-ai/sdk/domain'
+
+export default phx.domain.implementCustomExpressions({
+  Scene: {
+    $positionedLegs: memoEval(
+      s => [s.length],
+      length => {
+        const numberOfLegs = Math.ceil(length / 350)
+
+        return Array.from({ length: numberOfLegs }, (_, i) => i * 350).map(offsetX => ({
+          key: offsetX.toString(),
+          offsetX,
+        }))
+      }
+    ),
+    $legObjects: memoEval(
+      s => [s.$positionedLegs],
+      positionedLegs => {
+        return positionedLegs.map(p => ({
+          key: p.key,
+          fileUrl: '/models/railings.gltf',
+          objectName: 'LEG_VLWF-820',
+          dimensionUnit: 'm',
+        }))
+      }
+    ),
+    $legObjectProperties: memoEval(
+      s => [s.$positionedLegs],
+      positionedLegs => {
+        return positionedLegs.map(p => ({
+          key: p.key,
+          offsetX: p.offsetX,
+          offsetY: 0,
+          offsetZ: 0,
+          morphTargetInfluences: {
+            Length: {
+              value: 1000,
+              scaleZero: 820,
+              scaleOne: 1500,
+            },
+          },
+        }))
+      }
+    ),
+  },
+})
 ```
 
 The `key` value must remain stable for a given component instance. Here, the X offset position uniquely identifies each leg, so `offsetX.toString()` works as a stable key. When the railing length changes, legs at existing positions keep their keys while new legs get new keys.
 
 ### Frontend Component Attachment
 
-Use `attachMany` instead of `attach` to handle dynamic arrays. The function receives the entity and returns the array of component states.
+Use `attachMany` instead of `attach` to handle dynamic arrays. The function receives the entity and returns the array of component states. A file in `src/components/` default-exports its attachments:
 
 ```typescript
-export default configuratorBuilder.defineConfig({
-  components: [
-    attachComponent
-      .withEntity('Scene')
-      .withComponent(sceneEntityRemoteObjectComponent, 'leg')
-      .attachMany(s => s.$legObjects),
-    attachComponent
-      .withEntity('Scene')
-      .withComponent(sceneEntityObjectPropertiesComponent, 'leg')
-      .attachMany(s => s.$legObjectProperties),
-  ],
-})
+// src/components/Scene.tsx
+import { sceneEntityObjectPropertiesComponent, sceneEntityRemoteObjectComponent } from '@salsita-ai/sdk/domain'
+
+export default [
+  phx.domain.attachComponent
+    .withEntity('Scene')
+    .withComponent(sceneEntityRemoteObjectComponent, 'leg')
+    .attachMany(s => s.$legObjects),
+  phx.domain.attachComponent
+    .withEntity('Scene')
+    .withComponent(sceneEntityObjectPropertiesComponent, 'leg')
+    .attachMany(s => s.$legObjectProperties),
+]
 ```
 
 Each pair of attachments creates and positions the 3D objects. The first loads the GLTF model, the second applies position, rotation, and morph targets. Both use the same instance name (`'leg'`) to coordinate which objects get which properties.
@@ -324,8 +357,6 @@ import {
 import { DistanceDimensionSlider } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export interface ScenePropertiesProps {
   id: DomainEntityId<'Scene'>
 }
@@ -386,8 +417,6 @@ export default [
 ```ts
 import { memoEval } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {
     $endCapLeft: () => {

package/dist/docs/other-features/error-5xx.mdx

@@ -12,7 +12,7 @@ Error page that is displayed when needed.
 
 ## Code
 
-The `ErrorPage` is provided in the default in the `LoadedConfigurationDetailPage` and `PresetSelectionProvider`.
+In production the configurator renders the layout element `ConfiguratorErrorPage` when an error reaches its error boundary or a configuration cannot be created from the only preset. Its default is a built-in page made with `ErrorPage` from `@salsita-ai/sdk/ui`; this example renders `ErrorPage` directly to show it. A project replaces the page with `phx.frontend.createConfiguratorErrorPage`, see [Configurator Interface → Configurator Error Page](?path=/docs/phoenix-configurator-interface--docs#configurator-error-page), which also lists the cases that still show another page.
 
 ## Example
 
@@ -77,8 +77,6 @@ import { Trans } from '@lingui/react/macro'
 
 import { ErrorPage } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createOnConfiguratorReadyProvider(() => {
   return (
     <ErrorPage

package/dist/docs/other-features/navigation-hotspot.mdx

@@ -96,6 +96,8 @@ Key observations:
 - With `pushToStack: true` and no `canStackOnto`, the new state is always pushed on top
 - With `canStackOnto: [Legs]`, the stack is "rewound" to `Legs` before pushing - any states after `Legs` are removed
 
+The hotspot is the entity element `NavigationHotspot`. A project replaces its look by registering its own with `phx.frontend.createNavigationHotspot`, which receives `navigationState` and `onNavigate`, the navigation with the stack rules above. See [Configurator Interface → In-Scene Controls](?path=/docs/phoenix-configurator-interface--docs#in-scene-controls).
+
 ## Example
 
 This example demonstrates navigation hotspots with stack behavior. The sidebar shows breadcrumbs displaying the current navigation stack for easier understanding.
@@ -325,7 +327,6 @@ transformers:
 
 ```ts
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [...getConsoleRenderingComponents('ConsoleUnit', phx.domain.attachComponent)]
 ```
@@ -335,8 +336,6 @@ export default [...getConsoleRenderingComponents('ConsoleUnit', phx.domain.attac
 ```tsx
 import { Breadcrumbs, Link, Stack, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('CurrentNavigationState', () => {
   const { navigationSystem } = phx.frontend.useDomain()
   const breadCrumbs = phx.frontend.useStoreSelector(
@@ -372,8 +371,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('CurrentNavigationS
 ### ./src/transformers/pop-navigation-on-deselect.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   // everytime the canvas is clicked
   .entity(['Scene'])

package/dist/docs/other-features/not-found-404.mdx

@@ -12,7 +12,7 @@ Error page that is displayed when the configuration is not accesible.
 
 ## Code
 
-The `NotFoundPage` is provided in the default in the `ConfiguratorRoot` and `ConfiguratorApp`.
+The configurator renders the layout element `ConfigurationNotFoundPage`, whose default is the built-in page, `ConfigurationNotFoundPage` from `@salsita-ai/sdk/react`. This example renders that component directly to show it. A project replaces the page with `phx.frontend.createConfigurationNotFoundPage`, see [Configurator Interface → Configuration Not Found Page](?path=/docs/phoenix-configurator-interface--docs#configuration-not-found-page), which also lists when the page is shown.
 
 ## Example
 
@@ -75,8 +75,6 @@ components:
 ```tsx
 import { ConfigurationNotFoundPage } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createOnConfiguratorReadyProvider(() => {
   return <ConfigurationNotFoundPage />
 })

package/dist/docs/other-features/projected-entities.mdx

@@ -654,8 +654,6 @@ components:
 ### ./src/elements/DividerBody.tsx
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
-
 const GAP = 50
 
 export default phx.frontend.createCustomPhoenixEntityElement('DividerBody', ({ entityId }) => {
@@ -689,8 +687,6 @@ const COLORS: Record<string, string> = {
 ### ./src/elements/ShelfBody.tsx
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('ShelfBody', ({ entityId }) => {
   if (!phx.domain.model.Shelf.isId(entityId)) {
     throw new Error(`Expected a Shelf entity id but received '${entityId}'.`)
@@ -714,7 +710,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('ShelfBody', ({ ent
 import { createBlueprintFactory, memoEval } from '@salsita-ai/sdk/domain'
 
 import type { Divider, Shelf } from '../../.phoenix/application-types.js'
-import { phx } from '../../.phoenix/phx.js'
 
 interface ProjectedData {
   readonly index: number

package/dist/docs/other-features/side-effects.mdx

@@ -251,8 +251,6 @@ transformers:
 ### ./src/\_shared/materials.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export const swatches = {
   [phx.domain.model.MaterialType.Brass]: {
     swatchName: 'Brass',
@@ -287,8 +285,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { AttributeToggleSelector, MaterialSwatchSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(propertyPageComponent, 'main')
@@ -311,7 +307,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { swatches } from '../_shared/materials.js'
 
 export default phx.domain.implementCustomExpressions({
@@ -332,7 +327,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { availableMaterials } from '../_shared/materials.js'
 
 export default phx.domain.implementCustomInvariants({
@@ -349,7 +343,6 @@ export default phx.domain.implementCustomInvariants({
 ```ts
 import { msg } from '@lingui/core/macro'
 
-import { phx } from '../../.phoenix/phx.js'
 import { availableMaterials } from '../_shared/materials.js'
 
 export default phx.frontend.transformerBuilder.when