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

package/dist/docs/controls/text-input.mdx

@@ -1,4 +1,4 @@
-# TextInput
+# Text Input
 
 - [Use case](#use-case)
 - [Guide](#guide)
@@ -8,40 +8,114 @@
 
 ## Use case
 
-Describe the use case for this story. What problem does it solve? When should this pattern be used?
+Let the user type free text that becomes part of the configuration: a name for the design, an engraving on a heater panel, a signature on a guitar, a monogram on a bag. The text is stored in a string attribute, and invariants decide which texts are allowed, such as "not empty" or "at most 10 characters".
 
-## Guide
+`TextValueInput` is a React control. There is no Phoenix element `kind` for it, so the property page that shows it is written in TypeScript. The [Heater](?path=/docs/demos-heater--docs) demo uses a multi-line one for its engraving text.
 
-Provide a step-by-step guide on how to implement this pattern.
+## Guide
 
 ### Step 1 — Domain
 
-Explain the domain configuration needed:
+Add a string attribute, a `textValue` component that connects the input to it, and the invariants that limit the text:
 
 ```yaml
-# Add your domain YAML example here
+model:
+  latest:
+    shapes:
+      Scene:
+        name:
+          type: string
+
+components:
+  Scene:
+    textValue:
+      name:
+        value:
+          $bind: name
+
+invariants:
+  Scene:
+    nameNotEmpty:
+      types:
+        - nameNotEmpty
+    maxNameLength:
+      types:
+        - maxNameLength
+```
+
+`$bind` reads `name` into the component's `value` and writes the typed text back to `name`. The example attaches the same `textValue` in TypeScript, `.attach(s => ({ value: s.name }), s => ({ name: s.value }))`, where the second function maps the written value back to the attribute.
+
+The invariants implement the rules in `src/invariants/`. A `fatal` violation keeps the text from being committed:
+
+```ts
+// src/invariants/invariants.ts
+export default phx.domain.implementCustomInvariants({
+  Scene: {
+    maxNameLength: s => {
+      if (s.name.length > 10) {
+        return [
+          {
+            type: 'maxNameLength',
+            severity: 'fatal',
+            message: `Name can not be longer than 10 characters!`,
+          },
+        ]
+      }
+      return []
+    },
+  },
+})
 ```
 
-### Step 2 — Frontend (if needed)
+### Step 2 — Frontend: the input on a property page
 
-Explain any custom frontend components or hooks needed:
+Render `TextValueInput` with the `textValue` instance name and the entity's id:
 
 ```tsx
-// Add your frontend code examples here
+// src/components/components.tsx
+import { propertyPageComponent } from '@salsita-ai/sdk/domain'
+import { TextValueInput } from '@salsita-ai/sdk/react'
+import { PropertyContainer } from '@salsita-ai/sdk/ui'
+
+export default [
+  phx.domain.attachComponent
+    .withComponent(propertyPageComponent, 'default')
+    .withEntity('Scene')
+    .attach(s => ({
+      page: (
+        <PropertyContainer.Group spacing="large">
+          <PropertyContainer.Item title="Default" description={`Committed value is ${s.name}`}>
+            <TextValueInput instanceName="name" entityId={s.id} />
+          </PropertyContainer.Item>
+        </PropertyContainer.Group>
+      ),
+    })),
+]
 ```
 
-## Example
+How the input behaves:
 
-Interact with the example below:
+- Each keystroke is staged, not committed.
+- When the staged text breaks a `fatal` or `fixable` invariant, the input shows its error state and the violation message as its hint.
+- When the input loses focus, or on Enter in a single-line input, a valid text is committed and an invalid one is rolled back to the last committed value.
 
-- Describe what users should try in the example
-- List key interactions to test
+| Prop                            | Meaning                                                                                  |
+| ------------------------------- | ---------------------------------------------------------------------------------------- |
+| `entityId`                      | The entity whose `textValue` the input edits                                             |
+| `instanceName`                  | The `textValue` instance, `name` here                                                    |
+| `fixableViolations`             | Violation types left out of the hint text; a text with such a violation is still invalid |
+| `multiline`, `rows`, `maxLines` | A multi-line input, its initial rows and its maximum rows                                |
+| `label`, `helperText`           | Localizable label and helper text                                                        |
+
+## Example
+
+Type a new name and press Enter: the description under **Default** shows the committed name. Clear the field, or type more than 10 characters, to see the violation message as the hint; leaving the field then restores the last valid name.
 
 ## Test cases
 
-- List specific test cases that validate this implementation
-- Include edge cases and expected behaviors
-- Cover error states and boundary conditions
+- Typing a valid name and pressing Enter, or leaving the field, commits it; the description shows the new name.
+- An empty field shows "Name can not be empty!" as the hint; leaving the field restores the last committed name.
+- More than 10 characters shows "Name can not be longer than 10 characters!" as the hint; leaving the field restores the last committed name.
 
 ## Complete Implementation
 
@@ -90,7 +164,6 @@ import { TextValueInput } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
 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),
@@ -123,8 +196,6 @@ export default [
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Scene: {
     nameNotEmpty: s => {

package/dist/docs/demos/glass.mdx

@@ -90,8 +90,6 @@ import { customSceneEntityComponent, propertyPageComponent } from '@salsita-ai/s
 import { AttributeListSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const sculptureConfigs = {
   backside: true,
   backsideThickness: 0.1,
@@ -232,8 +230,6 @@ export default [
 ```tsx
 import { Environment } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {
   return (
     <>

package/dist/docs/demos/heater.mdx

@@ -433,8 +433,6 @@ import { memoEval, propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { AttributeListSelector, MaterialSwatchSelector, TextValueInput } 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')
@@ -493,8 +491,6 @@ export default [
 ```tsx
 import { ContactShadows, Environment } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {
   return (
     <>
@@ -518,7 +514,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment',
 
 ```ts
 import type { EngravingFont } from '../../../.phoenix/application-types.js'
-import { phx } from '../../../.phoenix/phx.js'
 
 export const EngravingFontMap: Record<EngravingFont, string> = {
   [phx.domain.model.EngravingFont.Modern]: 'Circular-Std-Book',
@@ -533,7 +528,6 @@ export const EngravingFontMap: Record<EngravingFont, string> = {
 import { Color } from 'three'
 
 import type { TopCoverColor } from '../../../.phoenix/application-types.js'
-import { phx } from '../../../.phoenix/phx.js'
 
 interface MaterialProperties {
   color?: string
@@ -843,7 +837,6 @@ import type {
   TopCoverTexture,
   TopPatternType,
 } from '../../../.phoenix/application-types.js'
-import { phx } from '../../../.phoenix/phx.js'
 
 export const TopCoverSwatchMap: Record<BottomCoverColor, SwatchOption> = {
   [phx.domain.model.BottomCoverColor.Silver]: {
@@ -1083,7 +1076,6 @@ export const TopCoverPatternSwatchMap: Record<TopPatternType, SwatchOption> = {
 
 ```ts
 import type { Heater } from '../../.phoenix/application-types.js'
-import { phx } from '../../.phoenix/phx.js'
 import { EngravingFontMap } from './_shared/fonts.js'
 import { BottomCoverMaterialsMap, TextDecalColors, TopCoverMaterialsMap } from './_shared/materials.js'
 import {
@@ -1238,8 +1230,6 @@ export default phx.domain.implementCustomExpressions({
 ```tsx
 import { match } from 'ts-pattern'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['Heater'])
   .modified({ atFields: ['engravingPosition'] })

package/dist/docs/demos/office-chair.mdx

@@ -305,8 +305,6 @@ resourcesConfig:
 import type { Texture } from 'three'
 import { RepeatWrapping, SRGBColorSpace } from 'three'
 
-import { phx } from '../../.phoenix/phx.js'
-
 interface MaterialProperties {
   color?: string
   roughness?: number
@@ -545,8 +543,6 @@ import { memoEval, propertyPageComponent, sceneEntityObjectHtmlHotspotComponent
 import { MaterialSwatchSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 interface AnimationTriggerProps {
   flippedIcon?: boolean
   animationName: string
@@ -653,8 +649,6 @@ export default [
 ```tsx
 import { ContactShadows, Environment } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {
   return (
     <>
@@ -682,7 +676,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment',
 import type { SwatchOption } from '@salsita-ai/sdk/domain'
 
 import type { BackrestTexture, ChairColor, FrameColor, SeatTexture } from '../../.phoenix/application-types.js'
-import { phx } from '../../.phoenix/phx.js'
 import { BackrestMaterialsMap, FrameMaterialsMap, SeatMaterialsMap } from '../_shared/materials.js'
 
 export const ChairColorSwatchMap: Record<ChairColor, SwatchOption> = {
@@ -845,7 +838,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/handlers/get-texture-processing-map.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { TextureProcessingMap } from '../_shared/materials.js'
 
 export default phx.frontend.createGetTextureProcessingMapHandler(() => {

package/dist/docs/demos/office-desk.mdx

@@ -27,8 +27,6 @@ This demo also uses `createAppLoader` with `SvgThrobber3D` to override the defau
 // src/elements/CustomAppLoader.tsx
 import { SvgThrobber3D } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createAppLoader(() => (
   <SvgThrobber3D
     svgUrl="/svg-throbber/pepper.svg"
@@ -648,7 +646,6 @@ components:
 ### ./src/\_shared/materials.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { FrameColorSwatchMap, ScreenColorSwatchMap, TopColorMattSwatchMap } from './swatches.js'
 
 interface MaterialProperties {
@@ -844,7 +841,6 @@ export const getWallAndFloor = (width: number) => {
 import type { SwatchOption } from '@salsita-ai/sdk/domain'
 
 import type { TopMaterial } from '../../.phoenix/application-types.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export const TopMaterialSwatchMap: Record<TopMaterial, SwatchOption> = {
   [phx.domain.model.TopMaterial.Matt]: {
@@ -956,7 +952,6 @@ import {
 } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import { getWallAndFloor } from '../_shared/render-wall.js'
 
 const AnimationTrigger = () => {
@@ -1057,15 +1052,12 @@ export default [
 ```tsx
 import { SalsitaLogoThrobber3D } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createAppLoader(() => <SalsitaLogoThrobber3D size={160} />)
 ```
 
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import {
   FrameMaterialsColorMap,
   ScreenMaterialsColorMap,

package/dist/docs/demos/ring.mdx

@@ -190,8 +190,6 @@ components:
 ### ./src/\_shared/materials.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 interface MaterialProperties {
   color?: string
 }
@@ -212,8 +210,6 @@ export const BandMaterialsMap = {
 ### ./src/\_shared/objects.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export const HolderModelMap = {
   [`${phx.domain.model.BandStyle.Traditional}_${phx.domain.model.GemstoneShape.Round}`]:
     'PRONGS_TRADITIONAL_DIAMOND_HOLDER',
@@ -289,7 +285,6 @@ import type { Mesh } from 'three'
 import { EGemCut, isGemUserData } from '../../../../common/gem-rendering/gem'
 import { renderGem } from '../../../../common/gem-rendering/render-gem'
 import type * as Model from '../../.phoenix/application-types.js'
-import { phx } from '../../.phoenix/phx.js'
 import { GemColorSwatchMap } from './swatches'
 
 export const renderGemShape = (shape: Model.GemstoneShape) => {
@@ -390,7 +385,6 @@ import {
 import { AttributeCardSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import { animateGemColor, renderGemShape } from '../_shared/render.js'
 
 export default [
@@ -455,8 +449,6 @@ export default [
 ```tsx
 import { ContactShadows, Environment } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {
   return (
     <>
@@ -479,7 +471,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment'
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { BandMaterialsMap } from '../_shared/materials.js'
 import { BaseModelMap, HolderModelMap, OffseYShapeMap, OffseZShapeMap } from '../_shared/objects.js'
 

package/dist/docs/dimensions/3d-scene-integration/angle-indicators.mdx

@@ -350,8 +350,6 @@ components:
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {},
 })

package/dist/docs/dimensions/3d-scene-integration/editable-angle-indicator.mdx

@@ -312,8 +312,6 @@ components:
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {
     $armEndX: s => -Math.cos(s.rotation) * 350,

package/dist/docs/dimensions/3d-scene-integration/editable-distance-dimension-indicator.mdx

@@ -559,8 +559,6 @@ components:
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {
     $startX: s => {

package/dist/docs/dimensions/3d-scene-integration/editable-offset-indicator.mdx

@@ -2201,8 +2201,6 @@ import { Edges } from '@react-three/drei'
 import { distanceUnitToDefault } from '@salsita-ai/sdk/domain'
 import { useDimensionConfig } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('BoxMesh', ({ entityId }) => {
   if (!phx.domain.model.Box.isId(entityId)) {
     throw new Error(`Expected a Box entity id but received '${entityId}'.`)
@@ -2243,8 +2241,6 @@ import { Edges } from '@react-three/drei'
 import { distanceUnitToDefault } from '@salsita-ai/sdk/domain'
 import { useDimensionConfig } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('ContainerGround', ({ entityId }) => {
   if (!phx.domain.model.Container.isId(entityId)) {
     throw new Error(`Expected a Container entity id but received '${entityId}'.`)
@@ -2279,8 +2275,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('ContainerGround',
 ```ts
 import { memoEval } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Box: {
     $siblingBoxIds: memoEval(

package/dist/docs/dimensions/3d-scene-integration/editable-size-indicator.mdx

@@ -284,8 +284,6 @@ import { Edges } from '@react-three/drei'
 import { distanceUnitToDefault } from '@salsita-ai/sdk/domain'
 import { useDimensionConfig } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('BoxScene', () => {
   const { width, depth, height, margin } = phx.frontend.useRootEntityRenderedState()
   const { distanceDataUnit } = useDimensionConfig()
@@ -322,8 +320,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('BoxScene', () => {
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Box: {
     $minusMargin: s => -s.margin,

package/dist/docs/dimensions/3d-scene-integration/list-selector-dimension-indicator.mdx

@@ -571,8 +571,6 @@ components:
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {
     $startX: s => {
@@ -588,8 +586,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Scene: {
     widthTooLarge: s => {

package/dist/docs/dimensions/3d-scene-integration/offset-indicator.mdx

@@ -686,8 +686,6 @@ import { Edges } from '@react-three/drei'
 import { distanceUnitToDefault } from '@salsita-ai/sdk/domain'
 import { useDimensionConfig } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('BoxMesh', ({ entityId }) => {
   if (!phx.domain.model.Box.isId(entityId)) {
     throw new Error(`Expected a Box entity id but received '${entityId}'.`)
@@ -728,8 +726,6 @@ import { Edges } from '@react-three/drei'
 import { distanceUnitToDefault } from '@salsita-ai/sdk/domain'
 import { useDimensionConfig } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('ContainerGround', ({ entityId }) => {
   if (!phx.domain.model.Container.isId(entityId)) {
     throw new Error(`Expected a Container entity id but received '${entityId}'.`)
@@ -764,8 +760,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('ContainerGround',
 ```ts
 import { memoEval } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Box: {
     $siblingBoxIds: memoEval(

package/dist/docs/dimensions/3d-scene-integration/overlap-offset-demo.mdx

@@ -542,8 +542,6 @@ import { Edges } from '@react-three/drei'
 import { distanceUnitToDefault } from '@salsita-ai/sdk/domain'
 import { useDimensionConfig } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('BoxMesh', ({ entityId }) => {
   if (!phx.domain.model.Box.isId(entityId)) {
     throw new Error(`Expected a Box entity id but received '${entityId}'.`)
@@ -584,8 +582,6 @@ import { Edges } from '@react-three/drei'
 import { distanceUnitToDefault } from '@salsita-ai/sdk/domain'
 import { useDimensionConfig } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('SceneGround', ({ entityId }) => {
   if (!phx.domain.model.Scene.isId(entityId)) {
     throw new Error(`Expected a Scene entity id but received '${entityId}'.`)
@@ -618,8 +614,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('SceneGround', ({ e
 ```ts
 import { memoEval } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Box: {
     // Other boxes — used both as snap targets and offset indicator references.

package/dist/docs/dimensions/input-controls/distance-slider.mdx

@@ -34,17 +34,17 @@ Configure the dimension control component with constraints and unit settings. Th
 ```yaml
 components:
   Desk:
-distanceDimension:
-  width:
-    min: 1200
-    max: 2000
+    distanceDimension:
+      width:
+        min: 1200
+        max: 2000
         displayUnit: cm
         unitDisplayConfig:
           cm:
             strategy: decimal
             decimalPlaces: 1
-    value:
-      $bind: width
+        value:
+          $bind: width
 ```
 
 Add the slider control to your property page using the Phoenix element syntax. Use the same instance name as defined in the `distanceDimension` component.

package/dist/docs/dimensions/selection-controls/list-selector.mdx

@@ -365,8 +365,6 @@ components:
 ### ./src/invariants/scene.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Scene: {
     widthTooLarge: s => {

package/dist/docs/dimensions/selection-controls/toggle-selector.mdx

@@ -359,8 +359,6 @@ components:
 ### ./src/invariants/scene.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Scene: {
     widthTooLarge: s => {

package/dist/docs/drag-and-drop/drag-handle.mdx

@@ -289,7 +289,6 @@ transformers:
 
 ```ts
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [...getConsoleRenderingComponents('ConsoleUnit', phx.domain.attachComponent)]
 ```

package/dist/docs/drag-and-drop/hotspot-handle.mdx

@@ -451,7 +451,6 @@ components:
 
 ```ts
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [...getConsoleRenderingComponents('ConsoleUnit', phx.domain.attachComponent)]
 ```

package/dist/docs/drag-and-drop/no-selection.mdx

@@ -216,7 +216,6 @@ components:
 
 ```ts
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [...getConsoleRenderingComponents('ConsoleUnit', phx.domain.attachComponent)]
 ```

package/dist/docs/drag-and-drop/planes.mdx

@@ -384,7 +384,6 @@ components:
 
 ```ts
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [...getConsoleRenderingComponents('ConsoleUnit', phx.domain.attachComponent)]
 ```
@@ -397,8 +396,6 @@ import { useEffect } from 'react'
 import { getDraggableSurfaceKey } from '@salsita-ai/sdk/configurator'
 import { dragHandleComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createOnConfiguratorReadyProvider(({ children }: { children?: React.ReactNode }) => {
   const ctx = phx.frontend.useDomain()
 

package/dist/docs/drag-and-drop/room-planner.mdx

@@ -777,7 +777,7 @@ components:
         autoRotate: true
       # Back-to-back snap: the dragged cabinet's back snaps onto another
       # cabinet's back face (the snapPlane below). autoRotate orients it
-      # 180° so the two cabinets face away from each other. Same Moduline
+      # 180° so the two cabinets face away from each other. This is the
       # shape that drives the within-MTV bug when the target is flush
       # against a wall — AutoSnap puts the dragged cabinet behind the
       # wall, Pass 1 within clamps it back into the room, and Pass 2
@@ -969,8 +969,6 @@ import { BoxGeometry, Mesh, MeshStandardMaterial } from 'three'
 
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const CubeSize = 1000
 
 const ApplianceWidth = 600
@@ -1026,8 +1024,6 @@ export default [
 ### ./src/expressions/cabinet.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   LowerCabinet: {
     $sceneId: cabinet => cabinet.$scene.id,
@@ -1046,8 +1042,6 @@ export default phx.domain.implementCustomExpressions({
 ```ts
 import { dragHandleComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const MIN_UPPER_Y = 1000
 
 export default phx.frontend.transformerBuilder.when

package/dist/docs/drag-and-drop/rotatable.mdx

@@ -382,7 +382,6 @@ transformers:
 
 ```ts
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [...getConsoleRenderingComponents('ConsoleUnit', phx.domain.attachComponent)]
 ```

package/dist/docs/drag-and-drop/snapping/auto-rotation-demo.mdx

@@ -604,8 +604,6 @@ import * as THREE from 'three'
 
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const WallWidth = 20
 const WallHeight = 500
 const WallDepth = 2000