@salsita-ai/sdk 0.50.0-develop.662fa65a4c → 0.50.0-develop.6806625cca

package/dist/docs/3d-scene/cameras/fit-during-drag.mdx

@@ -226,8 +226,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}'.`)
@@ -258,8 +256,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('SceneGround', ({ e
 ### ./src/expressions/scene.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 // Center-to-center distance (cm) below which the two atoms are "close enough"
 // to trigger the enclosing explosion. Driving the explosion's mount through a
 // domain expression (rather than a node snuck into a custom element's render)

package/dist/docs/3d-scene/cameras/locks.mdx

@@ -377,8 +377,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { AttributeSwitchSelector } 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')
@@ -417,8 +415,6 @@ export default [
 ### ./src/expressions/camera-locks.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {
     $distanceLockGroup: s => (s.lockZoomOrDistance ? 'object-b-and-root' : null),

package/dist/docs/3d-scene/cameras/transitions.mdx

@@ -314,8 +314,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { AttributeSwitchSelector, GenericDimensionSlider } 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, 'default')
   .withEntity('Scene')

package/dist/docs/3d-scene/engraving.mdx

@@ -146,8 +146,6 @@ import {
 } from '@salsita-ai/sdk/domain'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const coverEntityId = 'Cover-1' as DomainEntityId<'Cover'>
 
 const TextInput = () => {
@@ -301,8 +299,6 @@ export default [
 ```tsx
 import { ContactShadows, Environment } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {
   return (
     <>

package/dist/docs/3d-scene/materials/custom.mdx

@@ -30,7 +30,7 @@ object.rotation.x = -Math.PI / 2
 material.name = 'plane_material'
 
 attachComponent
-  .withComponent(sceneEntityCustomObjectComponent, 'plane')
+  .withComponent(sceneEntityObjectComponent, 'plane')
   .withEntity('Scene')
   .attach(() => {
     return {
@@ -251,7 +251,6 @@ import {
 import { GenericDimensionSlider } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import { getPlane, getShaderMaterial } from './_shared/render.js'
 
 export default [

package/dist/docs/3d-scene/materials/inherit.mdx

@@ -238,8 +238,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { AttributeSwitchSelector, 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')
@@ -276,8 +274,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export const SceneSwatchMap = {
   RAL9005: {
     color: '#1A1A1A',

package/dist/docs/3d-scene/materials/multilevel.mdx

@@ -258,8 +258,6 @@ components:
 ```ts
 import type { SwatchOptionMap } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export const MaterialSwatchMap: SwatchOptionMap = {
   [phx.domain.model.TopMaterial.Ceramic]: {
     color: '#f0f0f0',
@@ -381,8 +379,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { 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')
@@ -405,7 +401,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { ColorSwatchMap, MaterialSwatchMap, MaterialsMap } from '../_shared/data.js'
 
 const getCompoundKey = (s: { material: string; color: string }) => `${s.material}-${s.color}`
@@ -440,46 +435,4 @@ export default phx.domain.implementCustomExpressions({
 })
 ```
 
-### ./src/transformers/fix.ts
-
-```ts
-import type { ComponentModification, MaterialSwatchComponent } from '@salsita-ai/sdk/domain'
-
-import type * as Model from '../../.phoenix/application-types.js'
-import { phx } from '../../.phoenix/phx.js'
-import { ColorSwatchMap } from '../_shared/data.js'
-
-export default phx.frontend.createTransformer(() => (updates, currentState) => {
-  if (updates.length > 1) {
-    return updates
-  }
-
-  const materialUpdate = updates.find(
-    (u): u is ComponentModification<MaterialSwatchComponent> =>
-      u.kind === 'modifyComponent' && u.updateTag === 'selectSwatch-topMaterial'
-  )
-
-  if (!materialUpdate) {
-    return updates
-  }
-
-  const newMaterial = materialUpdate.writableState.selectedSwatchKey as Model.TopMaterial
-
-  const defaultMaterialColor = Object.keys(ColorSwatchMap[newMaterial])[0]
-
-  const table = currentState.entities.find(phx.domain.model.Table.is)!
-
-  const fixUpdate = phx.frontend.updates.DomainEntityModification({
-    entityId: table.id,
-    stateDelta: {
-      material: newMaterial,
-      color: defaultMaterialColor,
-    },
-    updateTag: 'fix.color',
-  })
-
-  return [fixUpdate]
-})
-```
-
 </details>

package/dist/docs/3d-scene/materials/override.mdx

@@ -1234,8 +1234,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { AttributeSelect, GenericDimensionSlider, 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')
@@ -1469,8 +1467,6 @@ import { 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/3d-scene/materials/simple.mdx

@@ -345,8 +345,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { 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')
@@ -366,8 +364,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export const MaterialSwatchMap = {
   RAL9005: {
     color: '#1A1A1A',

package/dist/docs/3d-scene/materials/transformer.mdx

@@ -217,7 +217,6 @@ import { TextureLoader } from 'three'
 import { isStandardMaterial } from '@salsita-ai/sdk/configurator'
 
 import type * as Model from '../../../.phoenix/application-types.js'
-import { phx } from '../../../.phoenix/phx.js'
 
 const MIN_CHILLI_SIZE = 40
 const MAX_CHILLI_SIZE = 100
@@ -515,7 +514,6 @@ import {
 import { AttributeCardSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import {
   animateBodyChange,
   animateBodyMaterialChange,
@@ -601,8 +599,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Pepper: {
     $chilliTypeOptions: () => {

package/dist/docs/3d-scene/materials/transition.mdx

@@ -224,8 +224,6 @@ import { memoEval, propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { 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')
@@ -250,8 +248,6 @@ export default [
 ```ts
 import type { SwatchOption } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export const TopColorMattSwatchMap: Record<string, SwatchOption> = {
   Black: {
     swatchName: 'Black',

package/dist/docs/3d-scene/materials/transmissive.mdx

@@ -107,8 +107,6 @@ components:
 ```tsx
 import { sceneEntityObjectDecalComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(sceneEntityObjectDecalComponent, 'product')
@@ -140,8 +138,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/3d-scene/postprocessing.mdx

@@ -1281,7 +1281,6 @@ export const SelectiveBloomCustomEffect = memo(Effect)
 ```tsx
 import { memoEval, propertyPageComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { AppSidebar } from '../_shared/AppSidebar.js'
 
 export default [
@@ -1304,7 +1303,6 @@ export default [
 ```tsx
 import { ContactShadows, Environment } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
 import { Effects } from '../_shared/effects/Effects.js'
 
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {

package/dist/docs/3d-scene/rendering/basic.mdx

@@ -10,7 +10,7 @@
 
 These rendering components form the foundation for displaying 3D content in any configurator. Whether you're building furniture configurators, product customizers, or other applications that visualize domain entities in 3D space, you'll use these components to make your entities visible in the scene.
 
-Most configurators load 3D models from GLTF/GLB files using `sceneEntityRemoteObject`, then position and transform them with `sceneEntityObjectProperties` for individual objects and `sceneEntityProperties` for entire entity groups. For advanced cases where you need simple geometry or procedural shapes, `sceneEntityCustomObjectComponent` lets you create THREE.js objects directly in code.
+Most configurators load 3D models from GLTF/GLB files using `sceneEntityRemoteObject`, then position and transform them with `sceneEntityObjectProperties` for individual objects and `sceneEntityProperties` for entire entity groups. For advanced cases where you need simple geometry or procedural shapes, `sceneEntityObjectComponent` lets you create THREE.js objects directly in code.
 
 ## Guide
 
@@ -113,7 +113,7 @@ Define helper functions that create and return THREE.js objects. Use `memoEval`
 ```typescript
 import * as THREE from 'three'
 
-import { memoEval, sceneEntityCustomObjectComponent } from '@salsita-ai/sdk/domain'
+import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
 import { attachComponent, defineFrontend } from '../domain/index.js'
 
@@ -130,7 +130,7 @@ const createCabinObject = () => {
 export default defineFrontend({
   components: [
     attachComponent
-      .withComponent(sceneEntityCustomObjectComponent, 'cabin')
+      .withComponent(sceneEntityObjectComponent, 'cabin')
       .withEntity('Train')
       .attach(memoEval(() => [], createCabinObject)),
   ],
@@ -166,7 +166,7 @@ The complete rendering pattern:
 1. Load models using `sceneEntityRemoteObject` in YAML for artist-created assets (preferred approach)
 2. Position each object instance using `sceneEntityObjectProperties` in YAML, setting static positions and binding dynamic transforms to entity state
 3. Apply entity-level transforms with `sceneEntityProperties` to move or rotate the entire entity as a unit
-4. For advanced cases, create custom objects with `sceneEntityCustomObjectComponent` in frontend code when you need procedural geometry
+4. For advanced cases, create custom objects with `sceneEntityObjectComponent` in frontend code when you need procedural geometry
 
 The Boxes entity demonstrates the standard pattern: remote objects loaded from GLTF files, positioned and animated through `sceneEntityObjectProperties`. The Train entity shows the advanced pattern with custom THREE.js objects.
 
@@ -428,7 +428,7 @@ export type SceneEntityPropertiesComponentState = {
 ```typescript
 /**
  * Configuration for custom THREE.js objects created programmatically.
- * Used with sceneEntityCustomObjectComponent in frontend code.
+ * Used with sceneEntityObjectComponent in frontend code.
  */
 export type SceneEntityObjectComponentState = {
   /**
@@ -758,8 +758,6 @@ import { memoEval, propertyPageComponent, sceneEntityObjectComponent } from '@sa
 import { AngleDimensionSlider, DistanceDimensionSlider, GenericDimensionSlider } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const createCabinObject = () => {
   const geometry = new THREE.BoxGeometry(2, 2.25, 1.5)
   const material = new THREE.MeshStandardMaterial({ color: 'firebrick' })
@@ -910,8 +908,6 @@ export default [
 ### ./src/expressions/boxes.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Boxes: {
     $box1OpenedScaled: s => s.box1Opened / 100,

package/dist/docs/3d-scene/rendering/custom-entity.mdx

@@ -38,8 +38,6 @@ components:
 Create the element using `phx.frontend.createCustomPhoenixEntityElement()`. This registers a React component that renders whenever an entity with the matching `customSceneEntity` component appears in the scene:
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('CustomEntity', () => {
   return (
     <group>
@@ -241,8 +239,6 @@ components:
 ```tsx
 import { Environment, Sky } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {
   const rootEntity = phx.frontend.useRootEntityState()
   const isWinter = rootEntity?.isWinter ?? false
@@ -296,8 +292,6 @@ import { useFrame } from '@react-three/fiber'
 import { useMemo, useRef } from 'react'
 import * as THREE from 'three'
 
-import { phx } from '../../.phoenix/phx.js'
-
 interface SeasonProps {
   readonly isWinter: boolean
 }

package/dist/docs/3d-scene/rendering/lights/ambient-light.mdx

@@ -317,8 +317,6 @@ export default []
 import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TONE_MAPPING_EXPOSURE = 0.15
 
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {

package/dist/docs/3d-scene/rendering/lights/directional-light.mdx

@@ -378,8 +378,6 @@ export default []
 import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TONE_MAPPING_EXPOSURE = 0.15
 
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {

package/dist/docs/3d-scene/rendering/lights/point-light.mdx

@@ -357,8 +357,6 @@ export default []
 import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TONE_MAPPING_EXPOSURE = 0.15
 
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {

package/dist/docs/3d-scene/rendering/lights/rect-area-light.mdx

@@ -380,8 +380,6 @@ export default []
 import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TONE_MAPPING_EXPOSURE = 0.15
 
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {

package/dist/docs/3d-scene/rendering/lights/spot-light.mdx

@@ -386,8 +386,6 @@ export default []
 import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TONE_MAPPING_EXPOSURE = 0.15
 
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {

package/dist/docs/3d-scene/rendering/object-groups.mdx

@@ -279,8 +279,6 @@ components:
 ### ./src/expressions/cabinet.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Cabinet: {
     $doorParent: s => (s.visualizeDoorOpening ? 'door' : null),

package/dist/docs/3d-scene/rendering/objects.mdx

@@ -98,8 +98,6 @@ The `top` material uses dynamic expressions for color and textures, while the `l
 Create expressions that map attribute values to their corresponding object names and material properties:
 
 ```typescript
-import { phx } from '../../.phoenix/phx.js'
-
 const TopObjects = {
   oval: 'OVAAL_OVAL',
   rectangle: 'RECHTHOEK_RECTANGLE',
@@ -326,8 +324,6 @@ components:
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const TopOjects = {
   oval: 'OVAAL_OVAL',
   rectangle: 'RECHTHOEK_RECTANGLE',