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

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

package/dist/docs/drag-and-drop/snapping/label-matching-demo.mdx

@@ -314,8 +314,6 @@ import * as THREE from 'three'
 
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const SourceSize = 400
 const sourceGeometry = new THREE.BoxGeometry(SourceSize, SourceSize, SourceSize)
 sourceGeometry.translate(0, SourceSize / 2, 0)

package/dist/docs/drag-and-drop/snapping/multi-snap-composition-demo.mdx

@@ -260,8 +260,6 @@ import * as THREE from 'three'
 
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const WallThickness = 20
 const WallHeight = 400
 const WallLength = 3000

package/dist/docs/drag-and-drop/snapping/nested-entity-demo.mdx

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

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

@@ -228,8 +228,6 @@ import * as THREE from 'three'
 
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const DockSize = 500
 const DockHeight = 100
 

package/dist/docs/drag-and-drop/snapping/snap-axis-demo.mdx

@@ -313,8 +313,6 @@ import * as THREE from 'three'
 
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TableWidth = 2000
 const TableHeight = 400
 const TableDepth = 1000

package/dist/docs/drag-and-drop/snapping/snap-edge-demo.mdx

@@ -264,8 +264,6 @@ import * as THREE from 'three'
 
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TableWidth = 1000
 const TableHeight = 400
 const TableDepth = 600

package/dist/docs/drag-and-drop/snapping/snap-plane-demo.mdx

@@ -71,7 +71,6 @@ When an item's `offsetY` is a derived expression (read from a `$`-prefixed custo
 
 ```ts
 // src/expressions/item.ts
-import { phx } from '../../.phoenix/phx.js'
 
 export default phx.domain.implementCustomExpressions({
   Item: {
@@ -399,8 +398,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
@@ -492,8 +489,6 @@ export default [
 ### ./src/expressions/item.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const ELEVATED_ZONE_START_Z = 1000
 const PLATFORM_HEIGHT = 300
 

package/dist/docs/drag-and-drop/snapping/snap-point-demo.mdx

@@ -214,8 +214,6 @@ import * as THREE from 'three'
 
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TableWidth = 1000
 const TableHeight = 400
 const TableDepth = 600

package/dist/docs/drag-and-drop/spatial-constraints/collision-system.mdx

@@ -266,8 +266,6 @@ import * as THREE from 'three'
 
 import { collisionGeometryComponent, memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const BlockHeight = 200
 
 const blueMaterial = new THREE.MeshStandardMaterial({ color: '#4a90d9' })

package/dist/docs/drag-and-drop/spatial-constraints/disjoint-and-within.mdx

@@ -364,8 +364,6 @@ import * as THREE from 'three'
 
 import { collisionGeometryComponent, memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const BlockHeight = 200
 
 const blueMaterial = new THREE.MeshStandardMaterial({ color: '#4a90d9' })
@@ -432,8 +430,6 @@ export default [
 ### ./src/expressions/block.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Block: {
     $sceneId: block => block.$scene.id,
@@ -448,8 +444,6 @@ import { msg } from '@lingui/core/macro'
 
 import type { Violation } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 /**
  * Wires declared `constraint` components into the invariant pipeline.
  * `evaluateConstraints` returns the predicates a Block currently violates

package/dist/docs/drag-and-drop/spatial-constraints/geometry-override.mdx

@@ -377,8 +377,6 @@ import * as THREE from 'three'
 
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const SectionHeight = 200
 const MarkerSize = 250
 
@@ -445,8 +443,6 @@ import { msg } from '@lingui/core/macro'
 
 import type { Violation } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const DISJOINT_VIOLATION: Violation<'constraintDisjoint'> = {
   type: 'constraintDisjoint',
   severity: 'warning',

package/dist/docs/drag-and-drop/spatial-constraints/multiple-collision-meshes.mdx

@@ -578,8 +578,6 @@ import * as THREE from 'three'
 
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const WoodColor = '#b27a3a'
 const WoodOpacity = 0.55
 
@@ -669,8 +667,6 @@ import { msg } from '@lingui/core/macro'
 
 import type { Violation } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TOUCHES_VIOLATION: Violation<'constraintTouches'> = {
   type: 'constraintTouches',
   severity: 'warning',

package/dist/docs/drag-and-drop/spatial-constraints/touches.mdx

@@ -387,8 +387,6 @@ import * as THREE from 'three'
 
 import { collisionGeometryComponent, memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const BlockHeight = 200
 
 const blueMaterial = new THREE.MeshStandardMaterial({ color: '#4a90d9' })
@@ -464,8 +462,6 @@ import { msg } from '@lingui/core/macro'
 
 import type { Violation } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 /**
  * Wires declared `constraint` components into the invariant pipeline.
  * `evaluateConstraints` returns the predicates a Block currently violates

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

@@ -380,7 +380,6 @@ import { collisionGeometryComponent, memoEval } from '@salsita-ai/sdk/domain'
 
 import { getConsoleOutlineGeometry, getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
 import { getMonitorRenderingComponents } from '../../../../common/monitor-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [
   ...getConsoleRenderingComponents('ConsoleUnit', phx.domain.attachComponent),
@@ -409,7 +408,6 @@ import { useEffect } from 'react'
 import { dragHandleComponent, isDomainEntityId } from '@salsita-ai/sdk/domain'
 
 import { ConsoleWidth } from '../../../../common/console-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default phx.frontend.createOnConfiguratorReadyProvider(({ children }: { children?: React.ReactNode }) => {
   const domainCtx = phx.frontend.useDomain()
@@ -546,8 +544,6 @@ export default phx.frontend.createOnConfiguratorReadyProvider(({ children }: { c
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Cluster: {
     $parent: s => {

package/dist/docs/fabs/basic.mdx

@@ -16,15 +16,13 @@ For this you can use the following on-scene controls:
 - `sceneEntityDeleteFab` - to delete an entity
 - `sceneEntityAddFab` - to add an entity using a recipe
 
-(or the `Object` variants of each: `sceneEntityObjectSelectHotspot`, `sceneEntityObjectDeleteFab`, `sceneEntityObjectAddFab`)
-
 Note that `sceneEntitySelectHotspot` is described in a [separate story](./?path=/docs/selection-highlight-hotspots--docs) and here we focus solely on the `sceneEntityDeleteFab` and `sceneEntityAddFab` controls.
 
 - Give every icon-only or otherwise unlabeled FAB a title so Phoenix shows a tooltip. Prefer a visible label when the action has room for one.
 
 ## Code
 
-Like any other on-scene control (fab or hotspot), the attached component lets you specify position of the control relative to the entity (or its object for the `Object` variants): `offsetX`, `offsetY` and `offsetZ` properties. The values are scaled by the unit specified in the `unit` property to the scene's coordinate space.
+Like any other on-scene control (fab or hotspot), the attached component lets you specify position of the control relative to the entity: `offsetX`, `offsetY` and `offsetZ` properties. The values are in the application's distance data unit, see [Dimension Data Unit](?path=/docs/dimensions-basic-concepts-dimension-data-unit--docs).
 
 ```yaml
 components:
@@ -51,13 +49,14 @@ Additionally, the on-scene controls support various dynamic visibility condition
   - `sceneEntityDeleteFab` - `['selected']`
   - `sceneEntityAddFab` - `['selected']`
 
-Both controls are represented by a floating action button that can optionally take a tooltip `title`, `label`, and PHX `icon` name. Both
-these properties are localizable. When specifying a `label` the button will be displayed in an "extended" variant (see the live example).
+Both controls are represented by a floating action button that can optionally take a tooltip `title` and a PHX `icon` name. `sceneEntityAddFab` also takes a `label`; `title` and `label` are localizable. When specifying a `label` the button will be displayed in an "extended" variant (see the live example).
 
-Lastly as both `sceneEntityDeleteFab` and `sceneEntityAddFab` are controls that modify state of the configuration, they allow filtering out of certain violation types so that the error message tooltip is not too crowded:
+Lastly as `sceneEntityAddFab` is a control that modifies state of the configuration, it allows filtering out of certain violation types so that the error message tooltip is not too crowded:
 
 - `hiddenViolations` - an array of violation types to hide from the error message tooltip
 
+In the spec, `label` and `hiddenViolations` are accepted by `sceneEntityAddFab` only: the `sceneEntityDeleteFab` schema rejects both.
+
 #### Limiting Visibility base on camera position
 
 All on-scene controls allow definition of `azimuthAngleLimits`, `polarAngleLimits` and `distanceLimits` properties to limit the visibility of the control based on the camera position. These properties optionally take an object with the following properties:
@@ -66,7 +65,7 @@ All on-scene controls allow definition of `azimuthAngleLimits`, `polarAngleLimit
 - `minOpacity` - the opacity of the control when the camera is out of the range (default is `0`)
 - `smoothZone` - zone that eats from both sides of the range, where the opacity is interpolated from `minOpacity` to `1.0` (default is `(max - min) / 8`)
 
-All three limits can be used separately or combined. The angle limits are in radians and the distance limits respect the `unit` defined on the component.
+All three limits can be used separately or combined. The angle limits are in radians and the distance limits are in the application's distance data unit, like the offsets.
 
 #### Displaying Tooltips
 
@@ -81,7 +80,7 @@ All on-scene controls allow definitions of `title` and `tooltipVisibility` prope
 
 ### Delete Fab
 
-The `sceneEntityDeleteFab` accepts `icon` to replace its built-in trash icon. Its `Object` variant keeps the built-in icon.
+The `sceneEntityDeleteFab` accepts `icon` to replace its built-in trash icon.
 
 ### Add Entity Fab
 
@@ -151,7 +150,7 @@ Here you can see the live example!
     - This should be disabled when there's 5 holes in the plate already.
     - Clicking it should directly add a new hole to the plate.
 - There should be a selection hotspot over each hole.
-- After selecting a hole through the hotspot, a delete button with `Trash` icon should appear.
+- After selecting a hole through the hotspot, a delete button with the `X` icon should appear.
   - This should be disabled for the top-right hole as that is a special glorified hole.
   - Clicking it should delete the selected hole and cause no errors in the console :-)
 - Toggle tooltip visibility to control the tooltip on the `+` Fab
@@ -393,7 +392,6 @@ invariants:
 
 ```ts
 import { createPlate } from '../../../../common/plate-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default phx.domain.implementCustomExpressions({
   Hole: {
@@ -458,8 +456,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Plate: {
     one54: s => s.$features.filter(phx.domain.model.Hole54.is).length === 1,

package/dist/docs/fabs/layout.mdx

@@ -346,7 +346,6 @@ invariants:
 
 ```ts
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [...getConsoleRenderingComponents('ConsoleUnit', phx.domain.attachComponent)]
 ```
@@ -356,8 +355,6 @@ export default [...getConsoleRenderingComponents('ConsoleUnit', phx.domain.attac
 ```tsx
 import { Paper, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('LabelHotspot', ({ entityId }) => (
   <Paper
     sx={{
@@ -375,8 +372,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('LabelHotspot', ({
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   ConsoleUnit: {
     $newConsoleRecipes: () => {
@@ -396,8 +391,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Scene: {
     maxOneConsoleUnit: s => s.$consoleUnits.length <= 1,

package/dist/docs/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-17T13:57:50.460Z",
+  "generatedAt": "2026-10-21T12:40:23.070Z",
   "categories": [
     {
       "name": "Phoenix",
@@ -1212,7 +1212,7 @@
         },
         {
           "title": "Text Input",
-          "description": "Describe the use case for this story. What problem does it solve? When should this pattern be used?",
+          "description": "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...",
           "path": "docs/controls/text-input.mdx",
           "category": [
             "Controls",
@@ -2879,7 +2879,7 @@
         },
         {
           "title": "Navigation Guard",
-          "description": "Describe the use case for this story. What problem does it solve? When should this pattern be used?",
+          "description": "Ask the user to confirm a navigation before it happens, when it would cost them work. A stepped configurator, such as a kitchen planner whose first step picks the room shape and whose later steps...",
           "path": "docs/complex-use-cases/navigation-guard.mdx",
           "category": [
             "Complex Use Cases",
@@ -2889,7 +2889,7 @@
         },
         {
           "title": "Navigation Reset Selection",
-          "description": "The `createResetSelectionOnNavigationTransformer` automatically deselects entities when the user navigates to specific steps. This clears the active selection when entering certain workflow phases,...",
+          "description": "A transformer built with `when.navigated({ to: [...] }).then.deselect()` automatically deselects entities when the user navigates to specific steps. This clears the active selection when entering...",
           "path": "docs/complex-use-cases/navigation-reset-selection.mdx",
           "category": [
             "Complex Use Cases",