@salsita-ai/sdk 0.50.0-develop.b47f1774a2 → 0.50.0-develop.b5d443db78

package/dist/docs/layouts/preview/always.mdx

@@ -38,16 +38,11 @@ This feature now works out of the box only for simple layouts, if top or step na
 
 ## Code
 
-The preview behavior can be configured directly in the `createConfiguratorAppConfig`
+Set the preview behavior with the top-level `preview` and `alwaysExpand` keys of a spec file, beside `model` and `components`:
 
-```ts
-const config = {
-  //...
-  ui: {
-    preview: 'auto',
-    alwaysExpand: true,
-  },
-}
+```yaml
+preview: always # auto | always | never | hide
+alwaysExpand: false # optional, true expands the configurator when users leave the preview, on desktop too
 ```
 
 ## Test cases
@@ -171,7 +166,6 @@ components:
 import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 
 import { MockSidebarOne } from '../../../../common/MockSidebar.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [
   phx.domain.attachComponent
@@ -186,8 +180,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $edgeFinishFacet: s => {
@@ -230,8 +222,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     trunkDisabled: s => {

package/dist/docs/layouts/preview/auto-presets.mdx

@@ -38,16 +38,11 @@ This feature now works out of the box only for simple layouts, if top or step na
 
 ## Code
 
-The preview behavior can be configured directly in the `createConfiguratorAppConfig`
+Set the preview behavior with the top-level `preview` and `alwaysExpand` keys of a spec file, beside `model` and `components`:
 
-```ts
-const config = {
-  //...
-  ui: {
-    preview: 'auto',
-    alwaysExpand: true,
-  },
-}
+```yaml
+preview: auto # auto | always | never | hide
+alwaysExpand: false # optional, true expands the configurator when users leave the preview, on desktop too
 ```
 
 ## Test cases
@@ -178,7 +173,6 @@ components:
 import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 
 import { MockSidebarOne } from '../../../../common/MockSidebar.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [
   phx.domain.attachComponent
@@ -193,8 +187,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $edgeFinishFacet: s => {
@@ -237,8 +229,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     trunkDisabled: s => {

package/dist/docs/layouts/preview/auto.mdx

@@ -38,16 +38,11 @@ This feature now works out of the box only for simple layouts, if top or step na
 
 ## Code
 
-The preview behavior can be configured directly in the `createConfiguratorAppConfig`
+Set the preview behavior with the top-level `preview` and `alwaysExpand` keys of a spec file, beside `model` and `components`:
 
-```ts
-const config = {
-  //...
-  ui: {
-    preview: 'auto',
-    alwaysExpand: true,
-  },
-}
+```yaml
+preview: auto # auto | always | never | hide
+alwaysExpand: false # optional, true expands the configurator when users leave the preview, on desktop too
 ```
 
 ## Test cases
@@ -171,7 +166,6 @@ components:
 import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 
 import { MockSidebarOne } from '../../../../common/MockSidebar.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [
   phx.domain.attachComponent
@@ -186,8 +180,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $edgeFinishFacet: s => {
@@ -230,8 +222,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     trunkDisabled: s => {

package/dist/docs/layouts/preview/never.mdx

@@ -38,16 +38,11 @@ This feature now works out of the box only for simple layouts, if top or step na
 
 ## Code
 
-The preview behavior can be configured directly in the `createConfiguratorAppConfig`
+Set the preview behavior with the top-level `preview` and `alwaysExpand` keys of a spec file, beside `model` and `components`:
 
-```ts
-const config = {
-  //...
-  ui: {
-    preview: 'auto',
-    alwaysExpand: true,
-  },
-}
+```yaml
+preview: never # auto | always | never | hide
+alwaysExpand: false # optional, true expands the configurator when users leave the preview, on desktop too
 ```
 
 ## Test cases
@@ -170,7 +165,6 @@ components:
 import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 
 import { MockSidebarOne } from '../../../../common/MockSidebar.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [
   phx.domain.attachComponent
@@ -185,8 +179,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $edgeFinishFacet: s => {
@@ -229,8 +221,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     trunkDisabled: s => {

package/dist/docs/layouts/sidebar/in-a-custom-layout.mdx

@@ -15,19 +15,18 @@ Build the sidebar's controls yourself instead when they have to look like the br
 
 ## Guide
 
-The layout registers itself under the name `ConfiguratorLayout` and mounts the scene, the safe area and the sidebar:
+The layout registers itself under the name `ConfiguratorLayout` and mounts the scene, the safe area, the sidebar and the snackbar root:
 
 ```tsx
 // src/elements/ConfiguratorLayout.tsx
-import { LayoutSlots, useSceneSafeArea } from '@salsita-ai/sdk/configurator'
-
-import { phx } from '../../.phoenix/phx.js'
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
 const GUTTER = 24
 const SIDEBAR_WIDTH = 380
+const SNACKBAR_WIDTH = 320
 
 const ConfiguratorLayout = () => {
-  const { containerRef, safeAreaRef } = useSceneSafeArea()
+  const { containerRef, safeAreaRef } = phx.frontend.useSceneSafeArea()
   const isFullscreen = phx.frontend.useIsFullscreenActive()
 
   return (
@@ -61,6 +60,11 @@ const ConfiguratorLayout = () => {
         <div style={{ position: 'absolute', insetBlockEnd: GUTTER, insetInlineStart: GUTTER, pointerEvents: 'auto' }}>
           <LayoutSlots.DesktopToolbar />
         </div>
+        <div
+          style={{ position: 'absolute', insetBlockEnd: GUTTER, insetInlineEnd: GUTTER, inlineSize: SNACKBAR_WIDTH }}
+        >
+          <LayoutSlots.DesktopSnackbarsRoot />
+        </div>
       </div>
     </div>
   )
@@ -72,6 +76,7 @@ export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout
 - **Size the container.** Without `width`, `LayoutSlots.DesktopSidebar` fills the width and height of its container. The layout positions the container above the canvas and gives it a size, here a fixed width and the full height less a gutter. The sidebar's content scrolls inside that height and its footer stays at the bottom.
 - **Say which side it is on.** The sidebar's tabs sit outside it. With `side="start"` they sit on its right, toward the scene; the default, `side="end"`, puts them on its left, as in the built-in layout.
 - **Frame the scene beside it.** `useSceneSafeArea()` measures the free region right of the sidebar, so the camera frames the table there.
+- **Keep the snackbars inside the configurator.** `LayoutSlots.Services` raises snackbars for violations, side-effect hints and errors, and they render into `LayoutSlots.DesktopSnackbarsRoot`. The root is a zero-height element the snackbars stack upwards from, so the layout places it at the bottom right of the scene and gives it their width. Without a root they render into the page's `document.body`, outside the configurator and its theme, see [Layout Slots → Canvas and services](?path=/docs/phoenix-layout-slots--docs#canvas-and-services).
 - **Decide what fullscreen does.** In fullscreen the sidebar stays in place, transparent and inert. This layout removes it while `phx.frontend.useIsFullscreenActive()` is set and lets the safe area start at the left edge, so the table is framed in the whole canvas. The toolbar's fullscreen button sets the flag.
 - **Read mode.** The same element renders a configuration shared for viewing. The sidebar handles read mode itself: it applies the spec's `$filter.modes`, so the tabs, which the spec limits to owners, are gone and the footer shows the price only. The banner that offers **Edit configuration** to a viewer is the layout's to mount: the built-in layout shows `LayoutSlots.DesktopReadonlyBanner` in read mode outside fullscreen, and it renders only when the spec sets `shareCloneToEdit` and the viewer's role may create configurations. This spec does not set it, so this layout mounts no banner.
 
@@ -259,15 +264,14 @@ components:
 ### ./src/elements/ConfiguratorLayout.tsx
 
 ```tsx
-import { LayoutSlots, useSceneSafeArea } from '@salsita-ai/sdk/configurator'
-
-import { phx } from '../../.phoenix/phx.js'
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
 const GUTTER = 24
 const SIDEBAR_WIDTH = 380
+const SNACKBAR_WIDTH = 320
 
 const ConfiguratorLayout = () => {
-  const { containerRef, safeAreaRef } = useSceneSafeArea()
+  const { containerRef, safeAreaRef } = phx.frontend.useSceneSafeArea()
   const isFullscreen = phx.frontend.useIsFullscreenActive()
 
   return (
@@ -301,6 +305,11 @@ const ConfiguratorLayout = () => {
         <div style={{ position: 'absolute', insetBlockEnd: GUTTER, insetInlineStart: GUTTER, pointerEvents: 'auto' }}>
           <LayoutSlots.DesktopToolbar />
         </div>
+        <div
+          style={{ position: 'absolute', insetBlockEnd: GUTTER, insetInlineEnd: GUTTER, inlineSize: SNACKBAR_WIDTH }}
+        >
+          <LayoutSlots.DesktopSnackbarsRoot />
+        </div>
       </div>
     </div>
   )
@@ -312,8 +321,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $edgeFinishFacet: s => {
@@ -356,8 +363,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/invariants/invariants.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomInvariants({
   Table: {
     trunkDisabled: s => {

package/dist/docs/layouts/sidebar/property-page-stack.mdx

@@ -351,8 +351,6 @@ import { useEffect } from 'react'
 
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const StackPage = (props: { path: string }) => {
   const { path } = props
 

package/dist/docs/layouts/sidebar/property-page.mdx

@@ -334,8 +334,6 @@ import { Button, Stack, Typography } from '@mui/material'
 
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('CounterComponent', () => {
   const [counter, setCounter] = phx.frontend.usePropertyPageState('counter', 0)
 

package/dist/docs/layouts/sidebar/tabs.mdx

@@ -513,8 +513,6 @@ transformers:
 ### ./src/transformers/bucky-ball-tab.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['BuckyBall'])
   .selected()
@@ -525,8 +523,6 @@ export default phx.frontend.transformerBuilder.when
 ### ./src/transformers/tab.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['BuckyBall'])
   .deselected()

package/dist/docs/layouts/sidebar-footer/custom.mdx

@@ -213,8 +213,6 @@ components:
 ```tsx
 import { Box, Button, Stack, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CustomFooterContent', () => {
   return (
     <Box sx={{ padding: 2, borderTop: '2px solid #e0e0e0' }} component="div">

package/dist/docs/layouts/sidebar-footer/universal.mdx

@@ -646,8 +646,6 @@ components:
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('addToCart', () => {
   const configurationId = phx.frontend.useConfigurationId()
 
@@ -667,8 +665,6 @@ export default phx.frontend.createPhoenixHandler('addToCart', () => {
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('downloadPdf', () => {
   const configurationId = phx.frontend.useConfigurationId()
 
@@ -688,8 +684,6 @@ export default phx.frontend.createPhoenixHandler('downloadPdf', () => {
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('requestQuote', () => {
   const configurationId = phx.frontend.useConfigurationId()
 
@@ -709,8 +703,6 @@ export default phx.frontend.createPhoenixHandler('requestQuote', () => {
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('saveTemplate', () => {
   const configurationId = phx.frontend.useConfigurationId()
 
@@ -730,8 +722,6 @@ export default phx.frontend.createPhoenixHandler('saveTemplate', () => {
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('share', () => {
   const configurationId = phx.frontend.useConfigurationId()
 

package/dist/docs/layouts/tool-controls.mdx

@@ -199,7 +199,6 @@ components:
 import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
 import { createDeckSectionSketchingObject } from '../../../../common/sketching-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [
   phx.domain.attachComponent

package/dist/docs/layouts/toolbar.mdx

@@ -448,8 +448,6 @@ components:
 ```tsx
 import { Stack, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CustomHelpContent', () => {
   return (
     <Stack spacing={2}>
@@ -468,8 +466,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('CustomHelpContent'
 ```tsx
 import { DesktopToolbar, PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CustomToolbarItem', () => {
   return (
     <DesktopToolbar.Button title="Custom Toolbar Item" size="small">

package/dist/docs/layouts/universal.mdx

@@ -2,6 +2,8 @@
 
 The universal layout covers the features of the previous distinct layouts. Start with the preset closest to your use case, then adjust the layout using the settings in the sidebar.
 
+The example finalizes through the legacy `finalizeButton` and `finalizePage` components and registers its toolbar help with the deprecated `phx.frontend.createToolbarHelp`; a new project declares `finalizeAction` components ([Finalization](?path=/docs/phoenix-finalization--docs)) and the help as a `helpToolbarButton` in the toolbar YAML ([Toolbar](?path=/docs/layouts-toolbar--docs)).
+
 ## Complete Implementation
 
 {/* AUTO-GENERATED SECTION: This section is automatically updated by 'phoenix story build' */}
@@ -96,19 +98,7 @@ components:
           $read: ignoreSelectionInSidebar
         shareCloneToEdit: true
         availableLocales:
-          - cs
-          - da
-          - de
-          - en-AU
-          - en-GB
           - en
-          - es
-          - fr
-          - it
-          - nl
-          - pt
-          - ro
-          - tr
     fitRootPerspectiveCamera:
       main:
         priority: 1
@@ -471,7 +461,6 @@ import { MockFinalizePage } from '../../../../common/MockFinalizePage.js'
 import { MockSidebarOne, MockSidebarTwo } from '../../../../common/MockSidebar.js'
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
 import type * as Model from '../../.phoenix/application-types.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export const CustomSidebarNavigation = () => {
   const { navigationSystem, storeSystem } = phx.frontend.useDomain()
@@ -712,7 +701,6 @@ export default [
 
 ```tsx
 import { MockSidebarFooter } from '../../../../common/MockSidebarFooter.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default phx.frontend.createLayoutFooter(MockSidebarFooter)
 ```
@@ -722,8 +710,6 @@ export default phx.frontend.createLayoutFooter(MockSidebarFooter)
 ```tsx
 import { DialogContent, DialogTitle, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createToolbarHelp(() => (
   <>
     <DialogTitle>Lost, are you?</DialogTitle>
@@ -737,8 +723,6 @@ export default phx.frontend.createToolbarHelp(() => (
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   ConsoleUnit: {
     $tabsOnSelect: self => self.$root.tabsOnSelect,
@@ -754,8 +738,6 @@ export default phx.domain.implementCustomExpressions({
 ### ./src/transformers/reset-navigation-on-deselection.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['ConsoleUnit'])
   .deselected({ inFavorOf: ['Scene'] })
@@ -766,8 +748,6 @@ export default phx.frontend.transformerBuilder.when
 ### ./src/transformers/reset-navigation-on-selection.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['ConsoleUnit'])
   .selected()

package/dist/docs/other-features/client-side-rendering/camera-padding.mdx

@@ -358,8 +358,6 @@ import { Alert, Button, Stack, Typography } from '@mui/material'
 import { useCallback, useState } from 'react'
 import { v4 } from 'uuid'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const EXPORT_COUNTS = [1, 5, 10] as const
 
 export default phx.frontend.createCustomPhoenixEntityElement('ExportStressControls', () => {

package/dist/docs/other-features/client-side-rendering/custom.mdx

@@ -182,8 +182,6 @@ components:
 ```ts
 import { sceneEntityObjectDecalComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(sceneEntityObjectDecalComponent, 'product')
@@ -214,8 +212,6 @@ export default [
 import { Button, Stack } from '@mui/material'
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('RenderButtonsComponent', () => {
   const { imageRenderingSystem } = phx.frontend.useConfigurator()
 
@@ -343,8 +339,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/other-features/client-side-rendering/declarative.mdx

@@ -557,8 +557,6 @@ components:
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $otherTables: self => self.$scene.$tables.filter(table => table.id !== self.id).map(table => table.id),
@@ -572,8 +570,6 @@ export default phx.domain.implementCustomExpressions({
 import { useCallback } from 'react'
 import { v4 } from 'uuid'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('renderImages', () => {
   const { imageRenderingSystem } = phx.frontend.useConfigurator()
   const { storeSystem } = phx.frontend.useDomain()

package/dist/docs/other-features/client-side-rendering/postprocessing.mdx

@@ -342,8 +342,6 @@ import { ToneMappingMode } from 'postprocessing'
 
 import { Postprocessing } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {
   return (
     <>
@@ -362,8 +360,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment'
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $otherTables: self => self.$scene.$tables.filter(table => table.id !== self.id).map(table => table.id),
@@ -377,8 +373,6 @@ export default phx.domain.implementCustomExpressions({
 import { useCallback } from 'react'
 import { v4 } from 'uuid'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createPhoenixHandler('renderImages', () => {
   const { imageRenderingSystem } = phx.frontend.useConfigurator()
   const { storeSystem } = phx.frontend.useDomain()

package/dist/docs/other-features/component-filters.mdx

@@ -440,7 +440,6 @@ import { memoEval, propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
 import { getConsoleRenderingComponents } from '../../../../common/console-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default [
   ...getConsoleRenderingComponents('Box', phx.domain.attachComponent),
@@ -513,16 +512,12 @@ export default [
 ### ./src/elements/LayoutFooter.tsx
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createLayoutFooter(() => <></>)
 ```
 
 ### ./src/transformers/reset-navigation-on-deselection.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['Box'])
   .deselected({ inFavorOf: ['Scene'] })
@@ -533,8 +528,6 @@ export default phx.frontend.transformerBuilder.when
 ### ./src/transformers/reset-navigation-on-selection.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.transformerBuilder.when
   .entity(['Box'])
   .selected()

package/dist/docs/other-features/currency.mdx

@@ -65,19 +65,21 @@ components:
     price:
       eur:
         $filter:
-          $read: $eurPriceActive
+          active:
+            $read: $eurPriceActive
         price:
           $read: $eurPrice
         currency: EUR
       usd:
         $filter:
-          $read: $usdPriceActive
+          active:
+            $read: $usdPriceActive
         price:
           $read: $usdPrice
         currency: USD
 ```
 
-The `$filter` property evaluates the expression and only renders the price component when the expression returns `true`. This means only the active currency's price displays in the UI.
+The `active` criterion of `$filter` evaluates the expression and only renders the price component when the expression returns `true`. This means only the active currency's price displays in the UI.
 
 You can also bind the currency directly to an attribute for display purposes:
 
@@ -191,7 +193,6 @@ components:
 
 ```ts
 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)]
 ```
@@ -199,8 +200,6 @@ export default [...getMockChairComponents('Scene', phx.domain.attachComponent)]
 ### ./src/expressions/scene.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {
     $usdPriceActive: (_s, _state, ctx) => {

package/dist/docs/other-features/domain-actions.mdx

@@ -298,8 +298,6 @@ components:
 ### ./src/actions/nudge-hole.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 /** How far a hole may sit from the plate's center on either axis, in plate units. */
 const REACH = 150
 
@@ -341,8 +339,6 @@ import { Button, Stack } from '@mui/material'
 
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const STEP = 20
 
 /** Nudges the selected hole with the same `nudgeHole` action the assistant calls, one step at a time. */
@@ -403,7 +399,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('NudgeControl', ({
 
 ```ts
 import { createPlate } from '../../../../common/plate-rendering.js'
-import { phx } from '../../.phoenix/phx.js'
 
 export default phx.domain.implementCustomExpressions({
   Hole: {