@salsita-ai/sdk 0.50.0-develop.bc08a38ffe → 0.50.0-develop.bc204720a8

package/dist/docs/layouts/header/custom.mdx

@@ -267,8 +267,6 @@ import { Box, Stack, Typography } from '@mui/material'
 
 import { useRootEntityPrice } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CustomHeaderContent', () => {
   const formattedPrice = useRootEntityPrice()
 

package/dist/docs/layouts/icon-sets.mdx

@@ -166,8 +166,6 @@ import { Stack } from '@mui/material'
 
 import { EditableDistanceDimensionButton, PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('customIcon', () => {
   return (
     <Stack spacing={1}>
@@ -188,8 +186,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('customIcon', () =>
 ```tsx
 import { SvgIcon, type SvgIconProps } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const NotVeryMuchShoppingCartSimple = (props: SvgIconProps) => (
   <SvgIcon {...props}>
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
@@ -228,8 +224,6 @@ import { createElement } from 'react'
 
 import { PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createGetThemeHandler(
   () =>
     ({

package/dist/docs/layouts/phoenix-elements.mdx

@@ -236,8 +236,6 @@ components:
 ```tsx
 import { Box, Chip, Stack, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('SpecialShapeFooter', () => {
   const rootEntity = phx.frontend.useRootEntityState()
 
@@ -277,8 +275,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('SpecialShapeFooter
 ### ./src/expressions/scene.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {
     $specialShapeOptions: () => {

package/dist/docs/layouts/phoenix-handlers.mdx

@@ -12,7 +12,7 @@ Phoenix handlers are the foundational system for defining custom behavior for ac
 
 ## Guide
 
-Phoenix handlers are defined in your frontend implementation using the `createPhoenixHandler` function. Each handler connects to a button defined in your domain YAML through the `handler` property.
+Phoenix handlers are defined with `phx.frontend.createPhoenixHandler`. Each handler is the default export of a file in `src/handlers/` and connects to a button defined in your domain YAML through the `handler` property.
 
 ### Define actions in domain YAML
 
@@ -34,14 +34,13 @@ The `handler` property is the link between your YAML configuration and your fron
 
 ### Implement handlers in frontend
 
-In your frontend implementation file, use `createPhoenixHandler` to define what happens when the button is clicked:
+In a file in `src/handlers/`, default-export `phx.frontend.createPhoenixHandler` to define what happens when the button is clicked. A handler that is not the file's default export is not registered:
 
 ```tsx
+// src/handlers/MyActionHandler.tsx
 import { useCallback } from 'react'
 
-import { createPhoenixHandler } from '@salsita-ai/sdk/ui'
-
-createPhoenixHandler('myActionHandler', () => {
+export default phx.frontend.createPhoenixHandler('myActionHandler', () => {
   return {
     handler: useCallback(async () => {
       // Your custom logic here
@@ -56,7 +55,7 @@ createPhoenixHandler('myActionHandler', () => {
 Every handler must return an object with a `handler` property that is an async function:
 
 ```tsx
-createPhoenixHandler('handlerName', () => {
+export default phx.frontend.createPhoenixHandler('handlerName', () => {
   // You can use React hooks here
   const configurationId = phx.frontend.useConfigurationId()
 
@@ -76,7 +75,7 @@ The outer function runs during render, so you can use React hooks. The inner `ha
 For simple synchronous actions:
 
 ```tsx
-createPhoenixHandler('simpleAlert', () => {
+export default phx.frontend.createPhoenixHandler('simpleAlert', () => {
   return {
     handler: useCallback(async () => {
       alert('Action performed!')
@@ -92,7 +91,7 @@ To show a modal dialog, use the `useModal` hook. Set `disableAutoDestroy: true`
 ```tsx
 import { useModal } from '@salsita-ai/sdk/react'
 
-createPhoenixHandler('openModal', () => {
+export default phx.frontend.createPhoenixHandler('openModal', () => {
   const { showModal } = useModal({ disableAutoDestroy: true })
 
   return {
@@ -122,7 +121,7 @@ The `disableAutoDestroy: true` option prevents the modal from being automaticall
 The system automatically shows a loading spinner while your handler runs:
 
 ```tsx
-createPhoenixHandler('apiCall', () => {
+export default phx.frontend.createPhoenixHandler('apiCall', () => {
   const configurationId = phx.frontend.useConfigurationId()
 
   return {
@@ -152,7 +151,7 @@ import { useSnackbar } from 'notistack'
 
 import { useModal } from '@salsita-ai/sdk/react'
 
-createPhoenixHandler('saveConfiguration', () => {
+export default phx.frontend.createPhoenixHandler('saveConfiguration', () => {
   const { enqueueSnackbar } = useSnackbar()
   const { showModal } = useModal()
 
@@ -188,7 +187,7 @@ createPhoenixHandler('saveConfiguration', () => {
 **Poor error handling** (avoid):
 
 ```tsx
-createPhoenixHandler('saveConfiguration', () => {
+export default phx.frontend.createPhoenixHandler('saveConfiguration', () => {
   return {
     handler: useCallback(async () => {
       // No try-catch - relies on generic error snackbar
@@ -205,20 +204,18 @@ createPhoenixHandler('saveConfiguration', () => {
 
 ### Access configurator context
 
-Use the `phx.frontend` to access configurator state and functionality:
+Use the `phx.frontend` hooks to access configurator state and functionality:
 
 ```tsx
-import { phx.frontend } from './interface.js'
-
-createPhoenixHandler('contextExample', () => {
+export default phx.frontend.createPhoenixHandler('contextExample', () => {
   const configurationId = phx.frontend.useConfigurationId()
-  const { entities } = phx.frontend.useEntities()
+  const rootEntity = phx.frontend.useRootEntityState()
 
   return {
     handler: useCallback(async () => {
       console.log('Configuration ID:', configurationId)
-      console.log('Entities:', entities)
-    }, [configurationId, entities]),
+      console.log('Root entity:', rootEntity)
+    }, [configurationId, rootEntity]),
   }
 })
 ```
@@ -245,10 +242,10 @@ Switch to "Read Mode" to see that action buttons are not available for read-only
 
 Phoenix handlers are used throughout the footer customization examples:
 
-- **[General Footer](../?path=/docs/layouts-footer-general)**: See how the default finalize button works without custom handlers
-- **[Universal Footer](../?path=/docs/layouts-footer-universal)**: Complete example with multiple custom handlers for different actions
-- **[Custom Footer](../?path=/docs/layouts-footer-custom)**: Advanced example showing handlers with custom React components
-- **[Hidden Footer](../?path=/docs/layouts-footer-hidden)**: Alternative action placement when footer is hidden
+- **[General Footer](?path=/docs/layouts-sidebar-footer-basic--docs)**: See how the default finalize button works without custom handlers
+- **[Universal Footer](?path=/docs/layouts-sidebar-footer-universal--docs)**: Complete example with multiple custom handlers for different actions
+- **[Custom Footer](?path=/docs/layouts-sidebar-footer-custom--docs)**: Advanced example showing handlers with custom React components
+- **[Hidden Footer](?path=/docs/layouts-sidebar-footer-hidden--docs)**: Alternative action placement when footer is hidden
 
 ## Complete Implementation
 
@@ -357,8 +354,6 @@ components:
 // This demonstrates the generic error snackbar that appears when errors are not caught.
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // In production code, you should use try-catch blocks to provide better user experience.
 export default phx.frontend.createPhoenixHandler('errorExample', () => {
   return {
@@ -380,8 +375,6 @@ import { useCallback } from 'react'
 
 import { useModal } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Dialog component for modal example
 interface ConfirmDialogProps extends DialogProps {
   onConfirm: () => void
@@ -435,8 +428,6 @@ export default phx.frontend.createPhoenixHandler('openModal', () => {
 ```tsx
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Pattern 1: Simple synchronous action
 export default phx.frontend.createPhoenixHandler('simpleAlert', () => {
   return {

package/dist/docs/layouts/presets/action-and-overlay.mdx

@@ -25,8 +25,6 @@ import { useState } from 'react'
 
 import { Dialog } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const PresetPageAction = () => {
   const [isOpen, setOpen] = useState(false)
 
@@ -61,8 +59,6 @@ import { useState } from 'react'
 
 import { Dialog, useResponsive } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const SmallScreenNotice = () => {
   const { isPhone } = useResponsive()
   const [dismissed, setDismissed] = useState(false)
@@ -215,8 +211,6 @@ import { useState } from 'react'
 
 import { Dialog } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const PresetPageAction = () => {
   const [isOpen, setOpen] = useState(false)
 
@@ -278,8 +272,6 @@ import { useState } from 'react'
 
 import { Dialog, useResponsive } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const SmallScreenNotice = () => {
   const { isPhone } = useResponsive()
   const [dismissed, setDismissed] = useState(false)

package/dist/docs/layouts/presets/custom.mdx

@@ -59,7 +59,7 @@ The minimal wiring is:
 ```tsx
 const CustomPresetScreen = () => {
   const { presetCategories, selectPreset, creatingPresetId, selectionError } = phx.frontend.usePresetSelection()
-  const resolve = useResolveLocalizable()
+  const resolve = phx.frontend.useResolveLocalizable()
   const presets = presetCategories.flatMap(category => category.presets)
 
   return (
@@ -87,7 +87,7 @@ The complete file below adds the branded header, search, pinned-card ordering, t
 
 ## Preserve preview mode
 
-A full replacement must preserve the small-container entry flow itself. Check `usePreview().isPreview` before rendering the cards and return `PresetPreviewLayout`; its button calls the SDK's preview `enter` action, which expands the embedded configurator. Without this branch, a configurator with `preview: auto` in a narrow embed renders the whole preset screen inside the collapsed preview area and never expands.
+A full replacement must preserve the small-container entry flow itself. Check `phx.frontend.usePreview().isPreview` before rendering the cards and return `PresetPreviewLayout`; its button calls the SDK's preview `enter` action, which expands the embedded configurator. Without this branch, a configurator with `preview: auto` in a narrow embed renders the whole preset screen inside the collapsed preview area and never expands.
 
 ```tsx
 if (isPreview) {
@@ -238,23 +238,16 @@ components:
 import { Alert, Box, Button, CardActionArea, Chip, CircularProgress, TextField, Typography } from '@mui/material'
 import { useState } from 'react'
 
-import {
-  ClosePresetPreviewButton,
-  PresetPreviewLayout,
-  PresetSnackbarsRoot,
-  usePreview,
-} from '@salsita-ai/sdk/configurator'
-import { useResolveLocalizable, useResourceUrl } from '@salsita-ai/sdk/react'
+import { ClosePresetPreviewButton, PresetPreviewLayout, PresetSnackbarsRoot } from '@salsita-ai/sdk/configurator'
+import { useResourceUrl } from '@salsita-ai/sdk/react'
 import { PhxIcon } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const START_FROM_SCRATCH = 'Start from scratch'
 
 const CustomPresetScreen = () => {
-  const { isPreview } = usePreview()
+  const { isPreview } = phx.frontend.usePreview()
   const { presetCategories, selectPreset, creatingPresetId, selectionError } = phx.frontend.usePresetSelection()
-  const resolve = useResolveLocalizable()
+  const resolve = phx.frontend.useResolveLocalizable()
   const { getResourceUrl } = useResourceUrl()
   const [query, setQuery] = useState('')
 

package/dist/docs/layouts/preview/always-expand.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: true # defaults to false; 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/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">