@salsita-ai/sdk 0.50.0-develop.5a0bcdee42 → 0.50.0-develop.5ac9723d62

package/dist/docs/complex-use-cases/filtered-controls-with-fix-dialog.mdx

@@ -24,7 +24,7 @@ Here is an example of several dependent options.
 The solution here is that the attributes higher in the UI are always changable independent of lower selection.
 This is achieved by setting a default value if invariant would be broken.
 
-If the change would break the countersink invariant, there is `FilteredControls` shown prompting user to make a decision.
+If the change would break the countersink invariant, there is a `FixDialog` shown prompting user to make a decision.
 
 ### Code #1
 
@@ -46,30 +46,30 @@ countersinkNotAvailable:
 ```
 
 ```ts
-const violationExpressions = invariantBuilder
-  .withInvariants(
-    implementCustomInvariants({
-      Plate: {
-        finishNotAvailable: s => {
-          return availableMaterials.some(state => state.material === s.material && state.finish === s.finish)
-        },
-        thicknessNotAvailable: s => {
-          return availableMaterials.some(
-            state => state.material === s.material && state.finish === s.finish && state.thickness === s.thickness
-          )
-        },
-        countersinkNotAvailable: s => {
-          return !s.someCounterSinkAdded || counterSinkThicknesses.includes(s.thickness)
-        },
-      },
-    })
-  )
-  .buildViolationExpressions()
+// src/invariants/invariants.ts
+export default phx.domain.implementCustomInvariants({
+  Plate: {
+    finishNotAvailable: s => {
+      return availableMaterials.some(state => state.material === s.material && state.finish === s.finish)
+    },
+    thicknessNotAvailable: s => {
+      return availableMaterials.some(
+        state => state.material === s.material && state.finish === s.finish && state.thickness === s.thickness
+      )
+    },
+    countersinkNotAvailable: s => {
+      return !s.someCounterSinkAdded || counterSinkThicknesses.includes(s.thickness)
+    },
+  },
+})
 ```
 
-With following control structure. Note the hierarchy of `fixableViolations`. The top input "fixes" all violations as it should never be disabled.
-The next one may be disabled if the material violation is active, etc...
-All inputs include countersinkNotAvailable, as that is fixable by auto fix dialog separately.
+With following control structure. The transformers below keep the upper inputs enabled: when a material or finish
+change would break a lower invariant, the transformer changes the lower properties in the same change, so the dry run
+of that option has no violation. `fixableViolations` does not enable anything: it only leaves the listed violation
+types out of the input's hint text, and an option whose change still causes a `fatal` violation stays disabled.
+The hierarchy of `fixableViolations` follows the selection order: each input leaves out the violations below it, which
+its transformer repairs. All inputs leave out `countersinkNotAvailable`, which the fix dialog presents separately.
 
 ```tsx
 <PropertyContainer.Item title="Material" description="Select one of the available materials for the plate.">
@@ -104,117 +104,105 @@ All inputs include countersinkNotAvailable, as that is fixable by auto fix dialo
 And corresponding transformers
 
 ```typescript
-configuratorBuilder
-  .withTransformers(() => [
-    {
-      priority: 3,
-      transformer: (updates, currentState) => {
-        if (updates.length > 1) {
-          return updates
-        }
-
-        const materialUpdate = updates.find(
-          (u): u is ComponentModification<MaterialSwatchComponent> =>
-            u.kind === 'modifyComponent' && u.updateTag === 'selectSwatch-material'
-        )
-
-        if (!materialUpdate) {
-          return updates
-        }
-
-        const plate = currentState.domainState.entities.find(Plate.is)!
-        const newMaterial = materialUpdate.writableState.selectedSwatchKey
-
-        const isAvailable = availableMaterials.some(
-          state =>
-            state.material === newMaterial && state.finish === plate.finish && state.thickness === plate.thickness
-        )
-
-        if (isAvailable) {
-          return updates
-        }
-
-        const similarMaterial = availableMaterials.find(m => m.material === newMaterial)
-
-        if (!similarMaterial) {
-          return updates
-        }
-
-        const fixUpdate = updateFactory.DomainEntityModification({
-          entityId: plate.id,
-          stateDelta: {
-            material: similarMaterial.material,
-            finish: similarMaterial.finish,
-            thickness: similarMaterial.thickness,
-          },
-          updateTag: 'fix.material',
-        })
-
-        return [fixUpdate]
+// src/transformers/fix-finish.ts
+import { availableMaterials } from '../_shared/available-materials.js'
+
+export default phx.frontend.transformerBuilder.when
+  .entity(['Plate'])
+  .modified({ atFields: ['finish'] })
+  .then.overrideMatchingUpdate(({ update, getOld$Entity }) => {
+    const plate = getOld$Entity()
+    const newFinish = update.stateDelta.finish
+
+    const isAvailable = availableMaterials.some(
+      state => state.material === plate.material && state.finish === newFinish && state.thickness === plate.thickness
+    )
+
+    if (isAvailable) {
+      return [update]
+    }
+
+    const similarMaterial = availableMaterials.find(m => m.finish === newFinish && m.material === plate.material)
+
+    if (!similarMaterial) {
+      return [update]
+    }
+
+    const fixUpdate = phx.frontend.updates.DomainEntityModification({
+      entityId: plate.id,
+      stateDelta: {
+        material: similarMaterial.material,
+        finish: similarMaterial.finish,
+        thickness: similarMaterial.thickness,
       },
-    },
-    {
-      priority: 3.1,
-      transformer: (updates, currentState) => {
-        if (updates.length > 1) {
-          return updates
-        }
-
-        const materialUpdate = updates.find(
-          (u): u is ComponentModification<AttributeSelectionComponent> =>
-            u.kind === 'modifyComponent' &&
-            u.updateTag === 'AttributeSelect.update' &&
-            (u.componentInstance.instanceName as string) === 'finish'
-        )
-
-        if (!materialUpdate) {
-          return updates
-        }
-
-        const plate = currentState.domainState.entities.find(Plate.is)!
-        const newFinish = materialUpdate.writableState.value
-
-        const isAvailable = availableMaterials.some(
-          state =>
-            state.material === plate.material && state.finish === newFinish && state.thickness === plate.thickness
-        )
-
-        if (isAvailable) {
-          return updates
-        }
-
-        const similarMaterial = availableMaterials.find(m => m.finish === newFinish && m.material === plate.material)
-
-        if (!similarMaterial) {
-          return updates
-        }
-
-        const fixUpdate = updateFactory.DomainEntityModification({
-          entityId: plate.id,
-          stateDelta: {
-            material: similarMaterial.material,
-            finish: similarMaterial.finish,
-            thickness: similarMaterial.thickness,
-          },
-          updateTag: 'fix.brushed',
-        })
-
-        return [fixUpdate]
+      updateTag: 'fix.brushed',
+    })
+
+    return [fixUpdate]
+  })
+  .build('fix-finish')
+```
+
+```typescript
+// src/transformers/fix-material.ts
+import { availableMaterials } from '../_shared/available-materials.js'
+
+export default phx.frontend.transformerBuilder.when
+  .entity(['Plate'])
+  .modified({ atFields: ['material'] })
+  .then.overrideMatchingUpdate(({ update, getOld$Entity }) => {
+    const plate = getOld$Entity()
+    const newMaterial = update.stateDelta.material
+
+    const isAvailable = availableMaterials.some(
+      state => state.material === newMaterial && state.finish === plate.finish && state.thickness === plate.thickness
+    )
+
+    if (isAvailable) {
+      return [update]
+    }
+
+    const similarMaterial = availableMaterials.find(m => m.material === newMaterial)
+
+    if (!similarMaterial) {
+      return [update]
+    }
+
+    const fixUpdate = phx.frontend.updates.DomainEntityModification({
+      entityId: plate.id,
+      stateDelta: {
+        material: similarMaterial.material,
+        finish: similarMaterial.finish,
+        thickness: similarMaterial.thickness,
       },
-    },
-  ])
-  .buildConfig()
+      updateTag: 'fix.material',
+    })
+
+    return [fixUpdate]
+  })
+  .build('fix-material')
 ```
 
-And FilteredControls
+Each file in `src/transformers/` default-exports one transformer and is picked up by its location. The `transformers` section of the spec turns it on by name. For a transformer made with `build(name)` that is the name passed to `build(...)`, which must match the file name with case and dashes ignored (`fix-finish.ts` and `fixFinish` match). For a plain-function export it is the file name:
+
+```yaml
+# spec/application.yaml
+transformers:
+  - name: fix-finish
+  - name: fix-material
+```
+
+And the `FixDialog` in `src/elements/LayoutDialog.tsx`, shown when the first violation of the last attempted
+commit in the `potentiallyInvalid` slice is `countersinkNotAvailable`
 
 ```tsx
-<FilteredControls
+<FixDialog
+  open={potentiallyInvalid !== suppressed}
   title="Autofix"
   onFix={() => {
-    const plate = potentiallyInvalid.state.domainState.entities.find(Plate.is)!
+    const plate = potentiallyInvalid.state.entities.find(phx.domain.model.Plate.is)!
 
-    const update = updateFactory.DomainEntityModification({
+    const update = phx.frontend.updates.DomainEntityModification({
       entityId: plate.id,
       updateTag: 'fix.removeCountersink',
       stateDelta: {
@@ -226,9 +214,14 @@ And FilteredControls
 
     setSuppressed(potentiallyInvalid)
   }}
+  onClose={() => {
+    setSuppressed(potentiallyInvalid)
+  }}
+  cancelButtonTitle="Cancel"
+  fixButtonTitle="Fix"
 >
   Counter sinks are only available for plates with thickness of 40mm. Countersinks will be removed!
-</FilteredControls>
+</FixDialog>
 ```
 
 ## Use case #2
@@ -491,8 +484,6 @@ transformers:
 ### ./src/\_shared/available-materials.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export const availableMaterials = [
   {
     material: phx.domain.model.MaterialType.Brass,
@@ -534,8 +525,6 @@ import {
 } 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')
@@ -604,7 +593,6 @@ import type { StateUpdateEmission } from '@salsita-ai/sdk/domain'
 import { FixDialog } from '@salsita-ai/sdk/ui'
 
 import type * as Model from '../../.phoenix/application-types.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default phx.frontend.createLayoutDialog(() => {
   const [suppressed, setSuppressed] = useState<null | StateUpdateEmission<Model.AnyDomainEntity, Model.$Map>>(null)
@@ -669,8 +657,6 @@ export default phx.frontend.createLayoutDialog(() => {
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const swatches = {
   [phx.domain.model.MaterialType.Brass]: {
     swatchName: 'Brass',
@@ -712,7 +698,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { availableMaterials } from '../_shared/available-materials.js'
 
 const counterSinkThicknesses = [40]
@@ -737,7 +722,6 @@ export default phx.domain.implementCustomInvariants({
 ### ./src/transformers/fix-finish.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { availableMaterials } from '../_shared/available-materials.js'
 
 export default phx.frontend.transformerBuilder.when
@@ -779,7 +763,6 @@ export default phx.frontend.transformerBuilder.when
 ### ./src/transformers/fix-material.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { availableMaterials } from '../_shared/available-materials.js'
 
 export default phx.frontend.transformerBuilder.when

package/dist/docs/complex-use-cases/focus-mode.mdx

@@ -69,6 +69,8 @@ components:
 
 The toolMenuFab is scene HTML rendered at the entity's position in the 3D scene. It supports positioning properties (`offsetX`, `offsetY`, `offsetZ`) and appearance properties like opacity and visibility.
 
+The FAB and its menu are the entity element `ToolMenuFab`. A project replaces them by registering its own with `phx.frontend.createToolMenuFab`, which receives the `options` and `onSelectTool(toolState)`. See [Configurator Interface → In-Scene Controls](?path=/docs/phoenix-configurator-interface--docs#in-scene-controls).
+
 ### Step 3: Add exitToolModeFab component
 
 The `exitToolModeFab` component renders a button in the call to action layout slot, providing a clear way to exit the current tool mode. This appears in the UI chrome, not in the scene:

package/dist/docs/complex-use-cases/navigation-guard.mdx

@@ -1,4 +1,4 @@
-# NavigationGuard
+# Navigation Guard
 
 - [Use case](#use-case)
 - [Guide](#guide)
@@ -8,40 +8,105 @@
 
 ## Use case
 
-Describe the use case for this story. What problem does it solve? When should this pattern be used?
+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 place the cabinets, warns the user who goes back to the first step, and navigates only when they confirm.
 
-## Guide
+The guard is a hook that runs before every change is committed. It holds the navigation it wants confirmed, shows a dialog, and commits the held navigation when the user confirms.
+
+To reset something when the user arrives at a step instead of asking first, see [Navigation Reset Undo](?path=/docs/complex-use-cases-navigation-reset-undo--docs) and [Navigation Reset Selection](?path=/docs/complex-use-cases-navigation-reset-selection--docs).
 
-Provide a step-by-step guide on how to implement this pattern.
+## Guide
 
 ### Step 1 — Domain
 
-Explain the domain configuration needed:
+Declare the navigation states and a component the user navigates with:
 
 ```yaml
-# Add your domain YAML example here
+navigationStates:
+  - 'FirstStep'
+  - 'SecondStep'
+  - 'ThirdStep'
 ```
 
-### Step 2 — Frontend (if needed)
+The example attaches its `navigationSteps` component and the property pages in `src/components/components.tsx`; [Application States → Navigation States](?path=/docs/phoenix-application-states--docs#navigation-states) shows the same components in YAML. Nothing in the spec refers to the guard.
+
+### Step 2 — Frontend: a commit hook
 
-Explain any custom frontend components or hooks needed:
+Mount the guard in a provider that wraps the configurator, the default export of a file in `src/elements/`:
 
 ```tsx
-// Add your frontend code examples here
+// src/elements/OnConfiguratorReady.tsx
+export default phx.frontend.createOnConfiguratorReadyProvider(({ children }) => {
+  return (
+    <>
+      <NavigationGuard />
+      {children}
+    </>
+  )
+})
 ```
 
-## Example
+`NavigationGuard` takes the store system from `phx.frontend.useDomain()` and registers a hook with `storeSystem.onBeforeCommit(hook)`, which returns the function that unregisters it. The hook receives the change about to be committed, `emission`, and an `emit` callback:
+
+- Return `true`, or nothing, to let the change through.
+- Return `false` to hold it: nothing is committed, and the rendered state goes back to the committed one.
+- Call `emit()` later to commit the held change. Every hook runs again with the same `emission`, so the guard recognises it and lets it through.
+
+The guard holds a navigation to the first step and keeps the held emission in state until the user answers (abridged; the complete file is below):
 
-Interact with the example below:
+```tsx
+// src/elements/OnConfiguratorReady.tsx
+import { isNavigationUpdate } from '@salsita-ai/sdk/domain'
 
-- Describe what users should try in the example
-- List key interactions to test
+const { storeSystem } = phx.frontend.useDomain()
+
+useEffect(() => {
+  const unregister = storeSystem.onBeforeCommit((emission, emit) => {
+    // The held navigation, committed again by emit() after the user confirmed
+    if (emission === warningShown?.emission) {
+      return true
+    }
+
+    if (warningShown != null) {
+      return true
+    }
+
+    const updates = emission.updates
+    const update = updates[0]
+
+    if (update == null || updates.length > 1 || !isNavigationUpdate(update)) {
+      return true
+    }
+
+    if (update.writableState.activeState !== phx.applicationTypes.NavigationState.FirstStep) {
+      return true
+    }
+
+    setWarningShown({ emission, emit })
+
+    return false
+  })
+
+  return () => {
+    unregister()
+  }
+}, [storeSystem, warningShown])
+```
+
+The dialog's **Confirm** calls `warningShown.emit()` and clears the state; **Cancel** only clears it, so the navigation is dropped.
+
+- **One update per navigation.** The guard reads only an emission with a single navigation update. A navigation that arrives together with other updates goes through unguarded; a guard for that case looks through all of `emission.updates`.
+- **Guard what is lost.** When a transformer turns the navigation into a destructive change, the guard can look for that change in `emission.updates` instead of the navigation itself.
+
+## Example
+
+Go to **Second step** or **Third step**, then click **First step**: a dialog warns that you will lose your progress. **Cancel** keeps you on the current step; **Confirm** goes to the first step. Moving forward shows no dialog.
 
 ## Test cases
 
-- List specific test cases that validate this implementation
-- Include edge cases and expected behaviors
-- Cover error states and boundary conditions
+- From the second or third step, clicking **First step** opens the dialog and the step does not change.
+- **Cancel** closes the dialog and the current step stays active.
+- **Confirm** closes the dialog and the first step becomes active.
+- Navigating from the first step to the second or third, or between the second and third, shows no dialog.
 
 ## Complete Implementation
 
@@ -86,7 +151,6 @@ import { navigationStepsComponent, propertyPageComponent } from '@salsita-ai/sdk
 
 import { MockSidebarOne, MockSidebarTwo } from '../../../../common/MockSidebar.js'
 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),
@@ -142,8 +206,6 @@ import { useCallback, useEffect, useState } from 'react'
 import type { $DomainEntity, DomainEntity, StateUpdateEmission } from '@salsita-ai/sdk/domain'
 import { isNavigationUpdate } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const NavigationGuard = () => {
   const [warningShown, setWarningShown] = useState<{
     emission: StateUpdateEmission<DomainEntity<string>, Record<string, $DomainEntity<DomainEntity<string>>>>

package/dist/docs/complex-use-cases/navigation-reset-selection.mdx

@@ -8,7 +8,7 @@
 
 ## Use case
 
-The `createResetSelectionOnNavigationTransformer` automatically deselects entities when the user navigates to specific steps. This clears the active selection when entering certain workflow phases, ensuring users start each step without inherited selections.
+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 certain workflow phases, ensuring users start each step without inherited selections.
 
 **Scenarios** - Use this transformer when you need:
 
@@ -18,37 +18,38 @@ The `createResetSelectionOnNavigationTransformer` automatically deselects entiti
 
 ## Guide
 
-The `createResetSelectionOnNavigationTransformer` is added through the `.withTransformers()` method. It automatically injects a deselect update when navigating to specified states.
+The transformer is added as a file in `src/transformers/`. It automatically deselects when navigating to specified states.
 
-### Step 1: Import the transformer
+### Step 1: Add the transformer to your project
 
-Import the transformer function from the domain package:
+Create the transformer in a file under `src/transformers/`:
 
 ```typescript
-import { createResetSelectionOnNavigationTransformer } from '@salsita-ai/sdk/domain'
+// src/transformers/reset-selection.ts
+export default phx.frontend.transformerBuilder.when
+  .navigated({
+    to: [phx.applicationTypes.NavigationState.SecondStep],
+  })
+  .then.deselect()
+  .build('reset-selection')
 ```
 
-### Step 2: Add the transformer to your config
+The transformer has two parts:
 
-Use the `.withTransformers()` method on the builder:
+- `navigated({ to: [...] })` lists the navigation states that should trigger deselection
+- `then.deselect()` deselects the selected entity
 
-```typescript
-const config = configuratorBuilder
-  .withTransformers(ctx => [
-    {
-      priority: 32,
-      transformer: createResetSelectionOnNavigationTransformer([ApplicationTypes.NavigationState.SecondStep], ctx),
-    },
-  ])
-  .buildConfig()
-```
+### Step 2: Turn the transformer on in the spec
 
-The transformer takes two arguments:
+Each file in `src/transformers/` default-exports one transformer and is picked up by its location. The `transformers` section of the spec turns it on by the name passed to `build(...)`, spelled exactly; the name must also match the file name with case and dashes ignored (`fix-finish.ts` and `fixFinish` match):
 
-- An array of navigation state names that should trigger deselection
-- The domain context object (`ctx`)
+```yaml
+# spec/application.yaml
+transformers:
+  - name: reset-selection
+```
 
-The `priority` value determines when this transformer runs relative to other transformers. Lower numbers run first. System transformers typically run at priority 100, so use values below 100 for custom transformers that should run before system logic.
+An entry without a `priority` runs after the SDK's built-in transformers, in the order of the `transformers` section. A `priority` value moves it: the pipeline runs lower numbers first, and the default is `Infinity`. See [Transformers](?path=/docs/other-features-transformers--docs#transformer-pipeline) for the built-in priorities.
 
 ### Step 3: Define navigation states in YAML
 
@@ -66,10 +67,9 @@ navigationStates:
 You can deselect at multiple navigation states by adding more state names to the array:
 
 ```typescript
-transformer: createResetSelectionOnNavigationTransformer(
-  [ApplicationTypes.NavigationState.SecondStep, ApplicationTypes.NavigationState.Summary],
-  ctx
-)
+.navigated({
+  to: [phx.applicationTypes.NavigationState.SecondStep, phx.applicationTypes.NavigationState.Summary],
+})
 ```
 
 This deselects when entering either the SecondStep or Summary navigation states.
@@ -80,39 +80,11 @@ The transformer intercepts update batches and:
 
 1. Checks if any update is a navigation update
 2. Verifies if the new active state matches one of the specified states
-3. Injects a deselect update into the update batch
+3. Adds a deselect update to the batch, in place of any selection update the batch holds
 4. Returns the modified batch with both the navigation and deselect updates
 
 When the transformer triggers, any selected entity is deselected automatically. Users see the selection clear when they navigate to the configured state.
 
-### Transformer signature
-
-```typescript
-/**
- * Creates a transformer that resets selection when navigating to specified states.
- *
- * The transformer monitors navigation updates and automatically injects a deselect
- * update when the active state matches any of the provided navigation states.
- * This ensures entities are deselected when entering specific workflow phases.
- *
- * @param navigationStates - Array of navigation state names that trigger deselection
- * @param ctx - Domain context providing access to the navigation system
- * @returns Update transformer that can be registered in withTransformers
- *
- * @example
- * // Deselect when entering the summary step
- * createResetSelectionOnNavigationTransformer(['Summary'], ctx)
- *
- * @example
- * // Deselect at multiple workflow phases
- * createResetSelectionOnNavigationTransformer(['ConfigComplete', 'Summary', 'Checkout'], ctx)
- */
-function createResetSelectionOnNavigationTransformer<NAVIGATION_STATES extends string>(
-  navigationStates: NAVIGATION_STATES[],
-  ctx: DomainContext
-): UpdateTransformer
-```
-
 ### Understanding transformers
 
 Transformers are functions that can modify update batches before they're committed to the store. They allow you to:
@@ -121,7 +93,7 @@ Transformers are functions that can modify update batches before they're committ
 - Modify existing updates (like changing values or constraints)
 - Prevent certain updates from being applied
 
-The `createResetSelectionOnNavigationTransformer` adds a deselect update whenever navigation matches configured states, keeping your workflow clean and predictable.
+The `reset-selection` transformer adds a deselect update whenever navigation matches configured states, keeping your workflow clean and predictable. [Transformers](?path=/docs/other-features-transformers--docs) covers the other triggers and actions of `phx.frontend.transformerBuilder`.
 
 ## Example
 
@@ -255,8 +227,6 @@ transformers:
 import { SelectionHotspot } from '@salsita-ai/sdk/configurator'
 import { htmlHotspotComponent, memoEval } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(htmlHotspotComponent, 'main')
@@ -279,13 +249,12 @@ export default [
 ### ./src/transformers/reset-selection.ts
 
 ```ts
-import { createResetSelectionOnNavigationTransformer } from '@salsita-ai/sdk/domain'
-
-import { phx } from '../../.phoenix/phx.js'
-
-export default phx.frontend.createTransformer(ctx =>
-  createResetSelectionOnNavigationTransformer([phx.applicationTypes.NavigationState.SecondStep], ctx)
-)
+export default phx.frontend.transformerBuilder.when
+  .navigated({
+    to: [phx.applicationTypes.NavigationState.SecondStep],
+  })
+  .then.deselect()
+  .build('reset-selection')
 ```
 
 </details>