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

package/dist/docs/controls/scene/html-hotspots.mdx

@@ -38,8 +38,6 @@ Create the element using `phx.frontend.createCustomPhoenixEntityElement()`:
 import { IconButton } from '@mui/material'
 import { CaretUpDown } from '@phosphor-icons/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('AnimationTrigger', () => {
   const { animationSystem } = phx.frontend.useConfigurator()
 
@@ -312,8 +310,6 @@ import { IconButton } from '@mui/material'
 import { CaretUpDown } from '@phosphor-icons/react'
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('AnimationTrigger', () => {
   const { animationSystem } = phx.frontend.useConfigurator()
 

package/dist/docs/controls/scene/object-html-hotspots.mdx

@@ -49,8 +49,6 @@ Create the element using `phx.frontend.createCustomPhoenixEntityElement()`:
 import { IconButton } from '@mui/material'
 import { CaretUpDown } from '@phosphor-icons/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('AnimationTrigger', () => {
   const { animationSystem } = phx.frontend.useConfigurator()
 
@@ -254,8 +252,6 @@ import { IconButton } from '@mui/material'
 import { CaretUpDown } from '@phosphor-icons/react'
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('AnimationTrigger', () => {
   const { animationSystem } = phx.frontend.useConfigurator()
 

package/dist/docs/controls/select-attribute/cardselect.mdx

@@ -256,8 +256,6 @@ components:
 ### ./src/expressions/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $edgeFinishFacet: s => {
@@ -276,8 +274,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/trunk-disabled.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     trunkDisabled: s => {

package/dist/docs/controls/select-attribute/listselect.mdx

@@ -236,8 +236,6 @@ components:
 ### ./src/expressions/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $edgeFinishFacet: s => {
@@ -256,8 +254,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     trunkDisabled: s => {

package/dist/docs/controls/select-attribute/select.mdx

@@ -220,8 +220,6 @@ components:
 ### ./src/expressions/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $edgeFinishFacet: s => {
@@ -240,8 +238,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     trunkDisabled: s => {

package/dist/docs/controls/select-attribute/swatchselect.mdx

@@ -361,8 +361,6 @@ components:
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Chair: {
     $colorMaterialColor: (s, __, ctx) => {
@@ -381,8 +379,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Chair: {
     accentColorIncompatibility: (s, __, ctx) => {

package/dist/docs/controls/select-attribute/switchselect.mdx

@@ -194,8 +194,6 @@ components:
 ### ./src/expressions/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $topEdgeMorph: s => (s.hasTreeTrunkEdgeFinish ? 1 : 0),
@@ -206,8 +204,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     trunkDisabled: s => {

package/dist/docs/controls/select-attribute/toggleselect.mdx

@@ -212,8 +212,6 @@ components:
 ### ./src/expressions/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $edgeFinishFacet: s => {
@@ -232,8 +230,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     trunkDisabled: s => {

package/dist/docs/controls/select-child-entity/cardselect.mdx

@@ -147,7 +147,7 @@ components:
               fixableViolations: ['tDisabled'] # Violations to ignore in tooltips
 ```
 
-The component dry-runs each option and disables those that would violate your domain invariants. Violation messages are concatenated and displayed in tooltips.
+The component dry-runs each option and disables those that would cause a `fatal` or `fixable` violation of your domain invariants. Violation messages are concatenated and displayed in tooltips. `fixableViolations` only leaves the listed violation types out of the tooltip: an option that causes them stays disabled. To make such an option selectable, repair the violation with a [transformer](?path=/docs/other-features-transformers--docs).
 
 ### Entity Tree Structure Requirements
 
@@ -208,7 +208,7 @@ interface ChildEntitySelectionOption {
 - All options rendered as cards with label and image; select → child entity replaced, 3D scene updates
 - Card layout respects `imageLayout` setting (square, vertical, horizontal)
 - Options violating invariants are disabled with violation tooltip (T legs)
-- Fixable violations keep option enabled with warning tooltip
+- Violation types listed in `fixableViolations` are left out of the tooltip; the option stays disabled
 
 ## Complete Implementation
 
@@ -365,8 +365,6 @@ components:
 ### ./src/expressions/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $options: () => {
@@ -407,8 +405,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     tDisabled: s => {

package/dist/docs/controls/select-child-entity/listselect.mdx

@@ -200,9 +200,8 @@ interface ChildEntityListSelectorSchema {
      */
     readonly instanceName: string
     /**
-     * Array of violation type names that should be treated as warnings rather than errors.
-     * Options that trigger only these violations will remain selectable but show warning tooltips.
-     * Options triggering other violations will be disabled completely.
+     * Violation types to leave out of an option's tooltip. An option that would cause a `fatal` or `fixable`
+     * violation stays disabled whatever its type; a transformer that repairs the violation makes the option selectable.
      */
     readonly fixableViolations?: readonly string[]
     /**
@@ -235,9 +234,8 @@ interface ChildEntityListSelectorProps {
    */
   instanceName: string
   /**
-   * Array of violation type names that should be treated as warnings rather than errors.
-   * Options that trigger only these violations will remain selectable but show warning tooltips.
-   * Options triggering other violations will be disabled completely.
+   * Violation types to leave out of an option's tooltip. An option that would cause a `fatal` or `fixable`
+   * violation stays disabled whatever its type; a transformer that repairs the violation makes the option selectable.
    */
   fixableViolations?: readonly string[]
   /**
@@ -257,7 +255,7 @@ interface ChildEntityListSelectorProps {
 - All options rendered; select option → child entity replaced, 3D scene updates
 - Vertical mode shows dropdown; horizontal mode shows inline buttons
 - Options violating invariants are disabled with violation tooltip
-- Fixable violations keep option enabled with warning tooltip
+- Violation types listed in `fixableViolations` are left out of the tooltip; the option stays disabled
 
 ## Complete Implementation
 
@@ -422,8 +420,6 @@ components:
 ### ./src/expressions/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $options: () => {
@@ -464,8 +460,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     tDisabled: s => {

package/dist/docs/controls/select-child-entity/toggleselect.mdx

@@ -190,9 +190,8 @@ interface ChildEntityToggleSelectorSchema {
      */
     readonly instanceName: string
     /**
-     * Array of violation type names that should be treated as warnings rather than errors.
-     * Options that trigger only these violations will remain selectable but show warning tooltips.
-     * Options triggering other violations will be disabled completely.
+     * Violation types to leave out of an option's tooltip. An option that would cause a `fatal` or `fixable`
+     * violation stays disabled whatever its type; a transformer that repairs the violation makes the option selectable.
      */
     readonly fixableViolations?: readonly string[]
     /**
@@ -225,9 +224,8 @@ interface ChildEntityToggleSelectorProps {
    */
   instanceName: string
   /**
-   * Array of violation type names that should be treated as warnings rather than errors.
-   * Options that trigger only these violations will remain selectable but show warning tooltips.
-   * Options triggering other violations will be disabled completely.
+   * Violation types to leave out of an option's tooltip. An option that would cause a `fatal` or `fixable`
+   * violation stays disabled whatever its type; a transformer that repairs the violation makes the option selectable.
    */
   fixableViolations?: readonly string[]
   /**
@@ -405,8 +403,6 @@ components:
 ### ./src/expressions/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $options: () => {
@@ -444,8 +440,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     tDisabled: s => {

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: {},
 })