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

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

@@ -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

@@ -327,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)]
 ```
@@ -337,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(
@@ -374,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

@@ -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