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

package/dist/docs/layouts/custom-layout.mdx

@@ -8,6 +8,7 @@ Make the configurator look like the brand's own product page. A furniture shop w
 - [Read and change the product](#read-and-change-the-product)
 - [Draw the choices](#draw-the-choices)
 - [Offer fullscreen](#offer-fullscreen)
+- [Undo and redo](#undo-and-redo)
 - [Show messages](#show-messages)
 - [Request a quote](#request-a-quote)
 - [Serve read mode](#serve-read-mode)
@@ -27,7 +28,7 @@ Write your own layout when the configurator has to follow a design the built-in
 
 Stay with the built-in layout when its structure fits and only its parts change. [Universal](?path=/docs/layouts-universal--docs) demonstrates that layout, and the pages of its parts describe what the spec configures: [Header](?path=/docs/layouts-header-floating--docs), [Sidebar](?path=/docs/layouts-sidebar-general--docs), [Sidebar Footer](?path=/docs/layouts-sidebar-footer-basic--docs), [Toolbar](?path=/docs/layouts-toolbar--docs) and [View Controls](?path=/docs/layouts-view-controls--docs).
 
-A project layout replaces all of that. None of the built-in sidebar, footer, toolbar or property pages is rendered for it, so the layout builds every control the user needs. This example uses no SDK component that draws UI: only the scene, the safe-area hook and hooks that read and change the product's state. A layout may also mount the SDK's own pieces where it wants them, see [Configurator Interface → Loaded Configuration UI](?path=/docs/phoenix-configurator-interface--docs#loaded-configuration-ui).
+A project layout replaces all of that. None of the built-in sidebar, footer, toolbar or property pages is rendered for it, so the layout builds every control the user needs. This example uses no SDK component that draws UI: only the scene and the `phx.frontend` hooks that measure the free area, read and change the product's state and record analytics. A layout may also mount the SDK's own pieces where it wants them, see [Configurator Interface → Loaded Configuration UI](?path=/docs/phoenix-configurator-interface--docs#loaded-configuration-ui).
 
 ## Register the layout
 
@@ -37,15 +38,14 @@ Create `src/elements/ConfiguratorLayout.tsx` with a default export made by `phx.
 import { Box } from '@mui/material'
 import { useState } from 'react'
 
-import { LayoutSlots, useSceneSafeArea } from '@salsita-ai/sdk/configurator'
-import { useActiveViewports } from '@salsita-ai/sdk/react'
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { BottomSheet } from '../_shared/BottomSheet.js'
 import { FullscreenToggle } from '../_shared/FullscreenToggle.js'
 import { MessageToast } from '../_shared/MessageToast.js'
 import { ProductPanel } from '../_shared/ProductPanel.js'
 import { SceneControls } from '../_shared/SceneControls.js'
+import { UndoRedo } from '../_shared/UndoRedo.js'
 
 const GUTTER = 24
 const PANEL_WIDTH = 380
@@ -53,10 +53,10 @@ const PHONE_GUTTER = 16
 const TOUCH_TARGET = 44
 
 const ConfiguratorLayout = () => {
-  const { containerRef, safeAreaRef } = useSceneSafeArea()
+  const { containerRef, safeAreaRef } = phx.frontend.useSceneSafeArea()
   const isFullscreen = phx.frontend.useIsFullscreenActive()
   // `null` until the container has been measured; the layout shows only the scene until then
-  const viewports = useActiveViewports()
+  const viewports = phx.frontend.useActiveViewports()
   const [isSheetOpen, setSheetOpen] = useState(false)
 
   const isDesktop = viewports?.includes('desktop') ?? false
@@ -115,8 +115,16 @@ const ConfiguratorLayout = () => {
         >
           <Box
             component="div"
-            sx={{ position: 'absolute', insetBlockStart: gutter, insetInlineEnd: gutter, pointerEvents: 'auto' }}
+            sx={{
+              position: 'absolute',
+              insetBlockStart: gutter,
+              insetInlineEnd: gutter,
+              display: 'flex',
+              gap: 1,
+              pointerEvents: 'auto',
+            }}
           >
+            {!isFullscreen && <UndoRedo />}
             <FullscreenToggle compact={!isDesktop} />
           </Box>
           <Box
@@ -124,11 +132,11 @@ const ConfiguratorLayout = () => {
             sx={{
               position: 'absolute',
               pointerEvents: 'auto',
-              // Desktop: bottom left, above the row of view controls. Phone: at the top beside the fullscreen button,
-              // clear of the sheet's handle and the view controls.
+              // Desktop: bottom left, above the row of view controls. Phone: at the top below the row of undo, redo and
+              // fullscreen, clear of the sheet's handle and the view controls.
               ...(isDesktop
                 ? { insetBlockEnd: 2 * GUTTER + TOUCH_TARGET, insetInlineStart: GUTTER }
-                : { insetBlockStart: gutter, insetInline: `${gutter}px ${2 * gutter + TOUCH_TARGET}px` }),
+                : { insetBlockStart: gutter + TOUCH_TARGET + gutter / 2, insetInline: gutter }),
             }}
           >
             <MessageToast />
@@ -159,18 +167,18 @@ const ConfiguratorLayout = () => {
 export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout', ConfiguratorLayout)
 ```
 
-The components it uses live in `src/_shared/`, which Phoenix does not import by convention, so the layout imports them itself. Application projects receive `phx` as a global. Storybook examples cannot rely on that project environment, so these files import it from `../../.phoenix/phx.js`; leave that import out in a project.
+The components it uses live in `src/_shared/`, which Phoenix does not import by convention, so the layout imports them itself. Application projects receive `phx` as a global. Storybook examples cannot rely on that project environment, so the example's files import it from `../../.phoenix/phx.js`; leave that import out in a project.
 
 ## What the layout has to do
 
 - **Position the root and cover the page.** `LayoutSlots.SharedCanvas` is absolutely positioned and fills its nearest positioned ancestor. The root here is `position: absolute; inset: 0`.
 - **Mount the shared canvas.** It renders the scene, and the app loader stays on screen until the scene has loaded. A layout without a canvas is not held by the loader: it leaves once the configuration is up.
 - **Put the UI above the canvas.** The canvas is opaque. Content that is positioned and comes after it in the markup is painted above it; unpositioned content is painted under it and cannot be seen.
-- **Tell the camera where the free area is.** `useSceneSafeArea()` returns two refs. `containerRef` goes on the element that covers the whole canvas, `safeAreaRef` on the region the product should stay visible in, here everything right of the panel, or above the sheet on a phone. The camera then frames the product in that region. The hook measures again whenever either of the two elements resizes; for a change no resize reports, such as a `transform` on an ancestor settling at the end of an animation, it also returns `update` to call. Without the two refs the product is centred in the whole canvas and sits against the panel.
+- **Tell the camera where the free area is.** `phx.frontend.useSceneSafeArea()` returns two refs. `containerRef` goes on the element that covers the whole canvas, `safeAreaRef` on the region the product should stay visible in, here everything right of the panel, or above the sheet on a phone. The camera then frames the product in that region. The hook measures again whenever either of the two elements resizes; for a change no resize reports, such as a `transform` on an ancestor settling at the end of an animation, it also returns `update` to call. Without the two refs the product is centred in the whole canvas and sits against the panel.
 - **Let the pointer through.** The safe-area element lies over the canvas, so it sets `pointerEvents: 'none'`; otherwise the scene cannot be orbited. The fullscreen button inside it switches pointer events back on.
 - **Honour fullscreen.** Fullscreen is a flag in the product's state, not a browser feature. The layout reads it with `phx.frontend.useIsFullscreenActive()`, removes the panel or the sheet and lets the safe area cover the canvas, so the camera frames the product in the whole canvas.
-- **Fit the width it is given.** The configurator can be embedded in a narrow column or opened on a phone. The layout reads the container's width class with `useActiveViewports()` and renders a desktop or a phone arrangement, see [Fit a phone](#fit-a-phone).
-- **Serve read mode.** The same element renders a configuration shared for viewing, and the layout decides what a viewer sees.
+- **Fit the width it is given.** The configurator can be embedded in a narrow column or opened on a phone. The layout reads the container's width class with `phx.frontend.useActiveViewports()` and renders a desktop or a phone arrangement, see [Fit a phone](#fit-a-phone).
+- **Serve read mode.** The same element renders a configuration shared for viewing, or one the host page opens read-only, and the layout decides what a viewer sees; see [Serve read mode](#serve-read-mode).
 
 ## Read and change the product
 
@@ -179,10 +187,8 @@ The panel reads everything it shows from hooks and writes the customer's choice
 ```tsx
 import { Box, Button, Typography } from '@mui/material'
 
-import { detailComponent, finalizeActionComponent } from '@salsita-ai/sdk/domain'
-import { PhoenixHandlerBoundary, useResolveLocalizable } from '@salsita-ai/sdk/react'
+import { detailComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { EdgeFinishCards } from './EdgeFinishCards.js'
 import { ReviewActions } from './ReviewActions.js'
 
@@ -196,7 +202,7 @@ interface ProductPanelProps {
 }
 
 export const ProductPanel = ({ collapsed = false, inSheet = false }: ProductPanelProps) => {
-  const resolve = useResolveLocalizable()
+  const resolve = phx.frontend.useResolveLocalizable()
   const detail = phx.frontend.useFirstRootComponent(detailComponent)
   const price = phx.frontend.useRootEntityPrice()
   const tableId = phx.frontend.useRootEntityId()
@@ -206,12 +212,9 @@ export const ProductPanel = ({ collapsed = false, inSheet = false }: ProductPane
   const pushNavigate = phx.frontend.usePushNavigate()
   const popNavigate = phx.frontend.usePopNavigate()
   const navigate = phx.frontend.useNavigate()
-  const finalizeActions = phx.frontend.useComponents({ componentTypes: [finalizeActionComponent] }) ?? []
 
   const isReadMode = accessInfo.viewMode
   const isReview = isReadMode || navigationState !== 'configure'
-  // The spec's primary finalize action, or its first one
-  const quoteAction = finalizeActions.find(action => action.state.variant === 'primary') ?? finalizeActions[0]
   const chosenEdge = edgeFinish.options.find(option => option.value === edgeFinish.value)
 
   return (
@@ -289,19 +292,7 @@ export const ProductPanel = ({ collapsed = false, inSheet = false }: ProductPane
             <Typography variant="body2" color="text.secondary">
               Your table is ready for a quote. A real shop collects the contact details here.
             </Typography>
-            {quoteAction ? (
-              <PhoenixHandlerBoundary name={quoteAction.state.handler}>
-                <ReviewActions
-                  handler={quoteAction.state.handler}
-                  label={resolve(quoteAction.state.label)}
-                  onBack={popNavigate}
-                />
-              </PhoenixHandlerBoundary>
-            ) : (
-              <Button size="large" variant="outlined" onClick={popNavigate} sx={BUTTON_SX}>
-                Back to the configuration
-              </Button>
-            )}
+            <ReviewActions onBack={popNavigate} />
           </>
         )}
         {!isReadMode && navigationState === 'requested' && (
@@ -320,26 +311,26 @@ export const ProductPanel = ({ collapsed = false, inSheet = false }: ProductPane
 }
 ```
 
-| Hook                                                                         | What the layout uses it for                                                                                                                                                                 |
-| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `phx.frontend.useFirstRootComponent(detailComponent)`                        | The `detail` component of the root entity: name, subtitle and description. `detailComponent` comes from `@salsita-ai/sdk/domain`; the hook returns `null` without one.                      |
-| `phx.frontend.useRootEntityId()`                                             | The id of the table, which the control hooks take.                                                                                                                                          |
-| `phx.frontend.useAttributeSelection(entityId, instanceName)`                 | The `attributeSelection` component named `edgeFinish`: the current `value` and the `options`, each with `title`, `description`, `value`, `disabled` and `onSelect`.                         |
-| `phx.frontend.useRootEntityPrice()`                                          | The root entity's `price` component, formatted for the current locale and currency, or `null` without one.                                                                                  |
-| `phx.frontend.useAccessService()`                                            | `accessInfo.viewMode` is `true` while a configuration shared for viewing is open, and also while the host sets the `readonly` property.                                                     |
-| `phx.frontend.useActiveNavigationState()`                                    | The active navigation state; the panel shows its review step while it is `checkout`.                                                                                                        |
-| `phx.frontend.usePushNavigate()` and `phx.frontend.usePopNavigate()`         | Enter the review step and leave it again.                                                                                                                                                   |
-| `phx.frontend.useNavigate()`                                                 | Return from the confirmation to the configuration, forgetting the review step.                                                                                                              |
-| `phx.frontend.useComponents({ componentTypes: [finalizeActionComponent] })`  | The spec's `finalizeAction` components; the panel offers the primary one in its review step. `finalizeActionComponent` comes from `@salsita-ai/sdk/domain`.                                 |
-| `phx.frontend.useFinalizeAction(handler)`                                    | Run the finalize action's handler, with its pending state, its error and whether finalizing is possible; see [Request a quote](#request-a-quote).                                           |
-| `phx.frontend.useIsFullscreenActive()` and `phx.frontend.useSetFullscreen()` | Read the fullscreen flag, and set it from the layout's own button.                                                                                                                          |
-| `phx.frontend.useActiveViewState()` and `phx.frontend.useSetViewState()`     | Read the active view state, one of the spec's `viewStates`, to mark the active view button, and make another one active; see [Control the scene](#control-the-scene).                       |
-| `phx.frontend.useResetCamera()`                                              | Move the camera back to the framing of the active camera, undoing the customer's orbit, pan and zoom.                                                                                       |
-| `phx.frontend.useUndoRedo()`                                                 | Not used here: whether there is a change to undo or redo, and `undo` and `redo`, for a layout's own undo and redo buttons; see [Known gaps](#known-gaps).                                   |
-| `useActiveViewports()` from `@salsita-ai/sdk/react`                          | The width classes of the configurator's container, or `null` before it is measured; the layout renders its phone arrangement unless it includes `desktop`, see [Fit a phone](#fit-a-phone). |
-| `phx.frontend.useConfiguratorMessages(onMessage)`                            | Receive violations, side-effect hints and errors one by one, with their text resolved, for the layout's own toast; see [Show messages](#show-messages).                                     |
-| `useResolveLocalizable()` from `@salsita-ai/sdk/react`                       | Turns the localizable texts of the spec into strings in the current language. [Localization](?path=/docs/phoenix-localization--docs) describes it and `LocalizableMessage`.                 |
-| `PhoenixHandlerBoundary` from `@salsita-ai/sdk/react`                        | Wraps the review step's buttons, so an edited handler takes effect without a reload.                                                                                                        |
+| Hook                                                                         | What the layout uses it for                                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `phx.frontend.useFirstRootComponent(detailComponent)`                        | The `detail` component of the root entity: name, subtitle and description. `detailComponent` comes from `@salsita-ai/sdk/domain`; the hook returns `null` without one.                                                                |
+| `phx.frontend.useRootEntityId()`                                             | The id of the table, which the control hooks take.                                                                                                                                                                                    |
+| `phx.frontend.useAttributeSelection(entityId, instanceName)`                 | The `attributeSelection` component named `edgeFinish`: the current `value` and the `options`, each with `title`, `description`, `value`, `disabled` and `onSelect`.                                                                   |
+| `phx.frontend.useRootEntityPrice()`                                          | The root entity's `price` component, formatted for the current locale and currency, or `null` without one.                                                                                                                            |
+| `phx.frontend.useResolveLocalizable()`                                       | Turns the localizable texts of the spec into strings in the current language. [Localization](?path=/docs/phoenix-localization--docs) describes it, `phx.frontend.useLocalizable(text)` and `LocalizableMessage`.                      |
+| `phx.frontend.useAccessService()`                                            | `accessInfo.viewMode` is `true` while a configuration shared for viewing is open, and also while the host sets the `readonly` property; see [Serve read mode](#serve-read-mode).                                                      |
+| `phx.frontend.useActiveNavigationState()`                                    | The active navigation state; the panel shows its review step while it is `checkout`.                                                                                                                                                  |
+| `phx.frontend.usePushNavigate()` and `phx.frontend.usePopNavigate()`         | Enter the review step and leave it again.                                                                                                                                                                                             |
+| `phx.frontend.useNavigate()`                                                 | Return from the confirmation to the configuration, forgetting the review step.                                                                                                                                                        |
+| `phx.frontend.useFinalizeActions()`                                          | The spec's `finalizeAction` components with what a button needs; the review step offers the `primary` one and runs it, with its pending state, its error and whether finalizing is possible; see [Request a quote](#request-a-quote). |
+| `phx.frontend.useUndoRedo()`                                                 | Whether there is a change to undo or redo, and `undo` and `redo`, for the layout's own buttons; see [Undo and redo](#undo-and-redo).                                                                                                  |
+| `phx.frontend.useIsFullscreenActive()` and `phx.frontend.useSetFullscreen()` | Read the fullscreen flag, and set it from the layout's own button.                                                                                                                                                                    |
+| `phx.frontend.useAnalytics()`                                                | Record the fullscreen button's click as the built-in button does; see [Offer fullscreen](#offer-fullscreen).                                                                                                                          |
+| `phx.frontend.useSceneSafeArea()`                                            | The two refs that tell the camera which part of the canvas the panel or the sheet leaves free; see [What the layout has to do](#what-the-layout-has-to-do).                                                                           |
+| `phx.frontend.useActiveViewports()`                                          | The width classes of the configurator's container, or `null` before it is measured; the layout renders its phone arrangement unless it includes `desktop`, see [Fit a phone](#fit-a-phone).                                           |
+| `phx.frontend.useActiveViewState()` and `phx.frontend.useSetViewState()`     | Read the active view state, one of the spec's `viewStates`, to mark the active view button, and make another one active; see [Control the scene](#control-the-scene).                                                                 |
+| `phx.frontend.useResetCamera()`                                              | Move the camera back to the framing of the active camera, undoing the customer's orbit, pan and zoom.                                                                                                                                 |
+| `phx.frontend.useConfiguratorMessages(onMessage)`                            | Receive violations, side-effect hints and errors one by one, with their text resolved, for the layout's own toast; see [Show messages](#show-messages).                                                                               |
 
 Calling an option's `onSelect` is the whole write: it changes `edgeFinish` on the table, the scene morphs the edge and the price expression recalculates. The option fields are named for display: the spec's `label` arrives as `title`, its `img` as `imageSrc`.
 
@@ -353,7 +344,7 @@ The edge finish is a visual choice, so the panel shows it as cards with a drawin
 import { Box, ButtonBase, type SxProps, type Theme, Typography } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 
-import { type UseAttributeSelection, useResolveLocalizable } from '@salsita-ai/sdk/react'
+import type { UseAttributeSelection } from '@salsita-ai/sdk/react'
 
 // Cross-sections of the tabletop's edge, keyed by the option values of the spec.
 const EDGE_PROFILES: Readonly<Record<string, string>> = {
@@ -390,7 +381,7 @@ interface EdgeFinishCardsProps {
 }
 
 export const EdgeFinishCards = ({ selection }: EdgeFinishCardsProps) => {
-  const resolve = useResolveLocalizable()
+  const resolve = phx.frontend.useResolveLocalizable()
   const { options } = selection
   // The card in the tab order: the selected one, or the first enabled one. Disabled cards are never in it.
   const selectedIndex = options.findIndex(option => option.value === selection.value && !option.disabled)
@@ -486,12 +477,12 @@ The drawings are keyed by the option values of the spec. A spec can carry a pict
 
 ## Offer fullscreen
 
-Fullscreen is a flag in the configurator's state, not the browser's fullscreen mode. `phx.frontend.useIsFullscreenActive()` reads it and `phx.frontend.useSetFullscreen()` returns a function that sets it: `setFullscreen(true)` turns it on, `setFullscreen(false)` off. The layout's own button flips it, and the layout decides what to hide.
+Fullscreen is a flag in the configurator's state, not the browser's fullscreen mode. `phx.frontend.useIsFullscreenActive()` reads it and `phx.frontend.useSetFullscreen()` returns a function that sets it: `setFullscreen(true)` turns it on, `setFullscreen(false)` off. The layout's own button flips it, and the layout decides what to hide. Before it flips the flag, the button records the click with `phx.frontend.useAnalytics().push(FrontendAnalyticsFactory.FullScreenModeToggled())`, the event the built-in fullscreen button records, so the shop's analytics count fullscreen the same way with either layout. `FrontendAnalyticsFactory` comes from `@salsita-ai/sdk/configurator`.
 
 ```tsx
 import { Button, Tooltip } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
+import { FrontendAnalyticsFactory } from '@salsita-ai/sdk/configurator'
 
 const ENTER_ICON = 'M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'
 const EXIT_ICON = 'M9 4v5H4M15 4v5h5M15 20v-5h5M9 20v-5H4'
@@ -504,6 +495,7 @@ interface FullscreenToggleProps {
 export const FullscreenToggle = ({ compact = false }: FullscreenToggleProps) => {
   const isFullscreen = phx.frontend.useIsFullscreenActive()
   const setFullscreen = phx.frontend.useSetFullscreen()
+  const analytics = phx.frontend.useAnalytics()
   const label = isFullscreen ? 'Exit fullscreen' : 'Fullscreen'
   const icon = (
     <svg viewBox="0 0 24 24" width={20} height={20} fill="none" stroke="currentColor" strokeWidth={2}>
@@ -511,10 +503,16 @@ export const FullscreenToggle = ({ compact = false }: FullscreenToggleProps) =>
     </svg>
   )
 
+  // The same event the built-in fullscreen button records, for entering and for leaving
+  const toggle = () => {
+    analytics.push(FrontendAnalyticsFactory.FullScreenModeToggled())
+    setFullscreen(!isFullscreen)
+  }
+
   return (
     <Tooltip title={compact ? label : ''}>
       <Button
-        onClick={() => setFullscreen(!isFullscreen)}
+        onClick={toggle}
         aria-label={compact ? label : undefined}
         startIcon={compact ? undefined : icon}
         sx={{
@@ -539,9 +537,79 @@ export const FullscreenToggle = ({ compact = false }: FullscreenToggleProps) =>
 
 The button stays in the free area in both states, so the way back is always where the user left it. [Interaction Modes](?path=/docs/ux-guidelines-interaction-modes--docs#full-screen-preview) describes what fullscreen hides.
 
+## Undo and redo
+
+The customer tries the four finishes against each other, so the layout offers **Undo** and **Redo** at the top right of the free area, beside the fullscreen button. `phx.frontend.useUndoRedo()` returns `canUndo` and `canRedo`, whether the history has a change to undo or to redo, and `undo` and `redo`, which change the configuration back or forward as the built-in toolbar's buttons do and push the same analytics events:
+
+```tsx
+import { Box, IconButton, Tooltip } from '@mui/material'
+
+const UNDO_ICON = 'M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11'
+const REDO_ICON = 'M15 14l5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13'
+
+interface HistoryButtonProps {
+  readonly label: string
+  readonly icon: string
+  readonly enabled: boolean
+  readonly onClick: () => void
+}
+
+const HistoryButton = ({ label, icon, enabled, onClick }: HistoryButtonProps) => (
+  <Tooltip title={label}>
+    {/* A disabled button fires no pointer events, so the span keeps the tooltip working */}
+    <span>
+      <IconButton
+        aria-label={label}
+        disabled={!enabled}
+        onClick={onClick}
+        sx={{ inlineSize: 44, blockSize: 44, color: 'text.primary' }}
+      >
+        <svg viewBox="0 0 24 24" width={20} height={20} fill="none" stroke="currentColor" strokeWidth={2}>
+          <path d={icon} />
+        </svg>
+      </IconButton>
+    </span>
+  </Tooltip>
+)
+
+// Undo and redo for the customer's choices. They change the configuration, so they are offered only where the cards
+// are: not to a viewer, and not in the review step, where the summary and a running request must not change under the
+// customer. `useUndoRedo` pushes the same analytics events as the built-in toolbar's buttons.
+export const UndoRedo = () => {
+  const { canUndo, canRedo, undo, redo } = phx.frontend.useUndoRedo()
+  const { accessInfo } = phx.frontend.useAccessService()
+  const navigationState = phx.frontend.useActiveNavigationState()
+
+  if (accessInfo.viewMode || navigationState !== 'configure') {
+    return null
+  }
+
+  return (
+    <Box
+      component="div"
+      role="group"
+      aria-label="History"
+      sx={{
+        display: 'flex',
+        borderRadius: 999,
+        bgcolor: 'background.paper',
+        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.12)',
+      }}
+    >
+      <HistoryButton label="Undo" icon={UNDO_ICON} enabled={canUndo} onClick={undo} />
+      <HistoryButton label="Redo" icon={REDO_ICON} enabled={canRedo} onClick={redo} />
+    </Box>
+  )
+}
+```
+
+- Each choice of a finish is one step of the history, whether it is made on the cards or on the button on the table's edge; undoing it moves the check mark back, changes the edge back and restores the price.
+- Each button is disabled while there is nothing to undo or redo, and keeps its tooltip and accessible name. A disabled MUI button receives no pointer events, so a `span` around it carries the tooltip.
+- The hook does not look at read mode or at the navigation state. The buttons change the configuration, so the component renders them only while the cards are shown: not to a viewer, not in the review step, where the summary and a running request must not change under the customer, and not in the confirmation. The layout also leaves them out in fullscreen, which gives the canvas to the product and keeps only the controls placed on it or for looking at it. The button on the table's edge stays there and still changes the finish; the history keeps that change, so **Undo** undoes it after fullscreen is left.
+
 ## Show messages
 
-When a change is rejected because it breaks an invariant, when a committed change carries a hint, when an error is thrown while a change is validated, or when saving the configuration fails and later succeeds again, the configurator has a message for the customer. `phx.frontend.useConfiguratorMessages(onMessage)` calls `onMessage` once for each, with the text already in the customer's language, and the layout shows it its own way. Here a toast shows a message for six seconds, colored by its severity, at the bottom left of the free area above the view controls on a desktop, and at its top on a phone:
+When a change is rejected because it breaks an invariant, when a committed change carries a hint, when an error is thrown while a change is validated, or when saving the configuration fails and later succeeds again, the configurator has a message for the customer. `phx.frontend.useConfiguratorMessages(onMessage)` calls `onMessage` once for each, with the text already in the customer's language, and the layout shows it its own way. Here a toast shows a message for six seconds, colored by its severity, at the bottom left of the free area above the view controls on a desktop, and at its top, below the row of buttons, on a phone:
 
 ```tsx
 import { Alert } from '@mui/material'
@@ -549,8 +617,6 @@ import { useEffect, useState } from 'react'
 
 import type { ConfiguratorMessage } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const VIOLATION_SEVERITY = { fatal: 'error', fixable: 'error', warning: 'warning', notice: 'info' } as const
 const RANK = { info: 0, warning: 1, error: 2 } as const
 const VISIBLE_MS = 6000
@@ -604,8 +670,6 @@ To give the toast something to show, the spec registers one transformer. Choosin
 ```ts
 import { msg } from '@lingui/core/macro'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // A tree-trunk edge is cut by hand; choosing it carries a hint, which reaches the layout as a side-effect message
 export default phx.frontend.transformerBuilder.when
   .entity(['Table'])
@@ -641,8 +705,6 @@ components:
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Stands in for the shop's quote service: the request takes a moment, then the panel shows the confirmation
 export default phx.frontend.createPhoenixHandler('requestQuote', () => {
   const navigate = phx.frontend.useNavigate()
@@ -658,49 +720,48 @@ export default phx.frontend.createPhoenixHandler('requestQuote', () => {
 
 The handler stands in for the shop's quote service: it waits a moment, as a request would, and then enters the `requested` navigation state, in which the panel thanks the customer. A handler is a hook factory, so it can use any hook, here `phx.frontend.useNavigate()`.
 
-The panel lists the finalize actions with `phx.frontend.useComponents({ componentTypes: [finalizeActionComponent] })` and offers the primary one, or the first when none is primary, in its review step. It renders the review step's buttons in a component of their own inside `<PhoenixHandlerBoundary name={handler}>`, because `phx.frontend.useFinalizeAction(handler)` runs the project's handler factory: it is called once per component, never in a loop, and the boundary remounts the buttons when the handler is edited. **Back to the configuration** lives in the same component, so it can be disabled while the request is pending.
+The review step offers the spec's primary finalize action, or the first one when none is primary, with `phx.frontend.useFinalizeActions()`. The hook lists the active `finalizeAction` components with what a button needs, the label and the title resolved to the customer's language, and runs their handlers itself, beside the layout, so the buttons need no handler boundary and the component may be called anywhere and as often as the layout likes. **Back to the configuration** lives in the same component, so it can be disabled while the request is pending.
 
 ```tsx
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const BUTTON_SX = { minBlockSize: 48, borderRadius: 999, textTransform: 'none', fontWeight: 600 } as const
 
 interface ReviewActionsProps {
-  readonly handler: string
-  readonly label: string
   readonly onBack: () => void
 }
 
-// The review step's buttons: one finalize action and the way back. `useFinalizeAction` runs the action's handler,
-// so this component calls it exactly once and is rendered inside a `PhoenixHandlerBoundary` for that handler.
-// Back is disabled while the request is pending, so the customer cannot change the configuration while it is sent.
-// The pending state belongs to this component: when the panel unmounts, as in fullscreen, the request goes on and
-// the remounted buttons are enabled again.
-export const ReviewActions = ({ handler, label, onBack }: ReviewActionsProps) => {
-  const { run, isPending, error, disabled, hints } = phx.frontend.useFinalizeAction(handler)
+// The review step's buttons: the spec's primary finalize action and the way back. `useFinalizeActions` runs the
+// action's handler beside the layout, so its pending state and error outlive this component: when the panel unmounts,
+// as in fullscreen, the request goes on and the remounted buttons still show it. Back is disabled while the request
+// is pending, so the customer cannot change the configuration while it is sent.
+export const ReviewActions = ({ onBack }: ReviewActionsProps) => {
+  const { primary, hints } = phx.frontend.useFinalizeActions()
+  const isPending = primary?.isPending ?? false
 
   return (
     <Box component="div" sx={{ display: 'grid', gap: 2 }}>
-      <Box component="div" sx={{ display: 'grid', gap: 1 }}>
-        <Button
-          size="large"
-          variant="contained"
-          disabled={disabled || isPending}
-          onClick={run}
-          startIcon={isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
-          sx={BUTTON_SX}
-        >
-          {isPending ? 'Sending the request…' : label}
-        </Button>
-        {disabled && hints && (
-          <Typography variant="caption" color="text.secondary">
-            {hints}
-          </Typography>
-        )}
-        {error && <Alert severity="error">The request could not be sent: {error.message}</Alert>}
-      </Box>
+      {primary && (
+        <Box component="div" sx={{ display: 'grid', gap: 1 }}>
+          <Button
+            size="large"
+            variant="contained"
+            disabled={primary.disabled || isPending}
+            onClick={() => void primary.run()}
+            title={primary.title}
+            startIcon={isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
+            sx={BUTTON_SX}
+          >
+            {isPending ? 'Sending the request…' : primary.label}
+          </Button>
+          {primary.disabled && hints && (
+            <Typography variant="caption" color="text.secondary">
+              {hints}
+            </Typography>
+          )}
+          {primary.error && <Alert severity="error">The request could not be sent: {primary.error.message}</Alert>}
+        </Box>
+      )}
       <Button size="large" variant="outlined" disabled={isPending} onClick={onBack} sx={BUTTON_SX}>
         Back to the configuration
       </Button>
@@ -709,22 +770,30 @@ export const ReviewActions = ({ handler, label, onBack }: ReviewActionsProps) =>
 }
 ```
 
-- `run()` records the finalize-button click for analytics and runs the handler; it does nothing while `disabled` or `isPending`.
-- While `isPending` the button shows a spinner and cannot be clicked again, and **Back to the configuration** is disabled, so the customer cannot change the configuration while it is sent. `isPending` and `error` belong to the mounted component: entering fullscreen unmounts the panel, the request goes on, and the panel shown after fullscreen starts with both buttons enabled. A layout that must rule that out keeps the review step mounted, or hides its fullscreen button while a request runs.
+- `primary` is the first `'primary'` action, or else the first action, or `null` when the spec has none; the component then shows only **Back to the configuration**. `secondary` holds the others, which this product does not have.
+- `run()` records the finalize-button click for analytics and runs the handler; it does nothing while `disabled` or `isPending`, and returns a promise that never rejects.
+- While `isPending` the button shows a spinner and cannot be clicked again, and **Back to the configuration** is disabled, so the customer cannot change the configuration while it is sent. The configurator keeps `isPending` and `error` while the layout's components unmount: entering fullscreen during the request removes the panel, and the panel shown after fullscreen still shows the spinner until the handler settles.
 - `error` is what the handler rejected with. The layout shows it under the button; no snackbar is raised. It is cleared when the customer tries again.
 - `disabled` and `hints` come from the configuration's violations: while a `warning` or worse holds, or the configuration failed to save, finalizing is not possible and `hints` says why.
 
-The review step stays: a quote request is a commitment, so the customer sees the summary first, and a real shop collects the contact details there. A product that finalizes without a review offers the button in place of **Review and request a quote**. [Configurator Interface → Hooks for a Project Layout](?path=/docs/phoenix-configurator-interface--docs#hooks-for-a-project-layout) describes the hook, and [Finalization](?path=/docs/phoenix-finalization--docs) what a real flow does on the server.
+The review step stays: a quote request is a commitment, so the customer sees the summary first, and a real shop collects the contact details there. A product that finalizes without a review offers the button in place of **Review and request a quote**. [Configurator Interface → Hooks for a Project Layout](?path=/docs/phoenix-configurator-interface--docs#hooks-for-a-project-layout) describes the hook, and `phx.frontend.useFinalizeAction(handler)`, which runs one known action inside the layout instead, and [Finalization](?path=/docs/phoenix-finalization--docs) what a real flow does on the server.
 
 ## Serve read mode
 
-While `accessInfo.viewMode` is `true` the panel marks the view as view only, replaces the cards with the chosen finish and shows the price without an action; the finalize action is not offered, since `useFinalizeAction` does not check read mode itself. The hooks do not hide or disable anything in read mode: what a viewer can change is decided by what the layout renders. Rotating and zooming the scene, and fullscreen, stay available, as [Interaction Modes](?path=/docs/ux-guidelines-interaction-modes--docs#view-only-mode) recommends. The button on the table's edge is hidden for viewers by the spec, see [Put a control on the product](#put-a-control-on-the-product).
+A configuration is in read mode by one of two routes, and the layout does not need to know which:
+
+- **A configuration shared for viewing.** The configuration is opened with `read-revision` access, as a viewer of a shared link opens it. The `read` mock template sets that access, and the **Read Mode** story below opens it.
+- **The host page sets `readonly`.** The page that embeds the configurator sets the web component's `readonly` property, here on a configuration the user owns. The mock template `mocks/readonly-host.yaml`, **Host sets readonly** in the editor's **Mocks** panel, keeps `access: owner` and sets the property with `webComponentProperties: { readonly: true }`.
+
+Both routes set `accessInfo.viewMode` to `true`, and both switch the spec's filter mode to read, so a component filtered with `$filter.modes: [owner]` is left out either way. While `viewMode` is `true` the panel marks the view as view only, replaces the cards with the chosen finish and shows the price without an action; neither the finalize action nor undo and redo are offered, since `useFinalizeActions` and `useUndoRedo` do not check read mode themselves. The hooks do not hide or disable anything in read mode: what a viewer can change is decided by what the layout renders. Rotating and zooming the scene, and fullscreen, stay available, as [Interaction Modes](?path=/docs/ux-guidelines-interaction-modes--docs#view-only-mode) recommends. The button on the table's edge is hidden for viewers by the spec, see [Put a control on the product](#put-a-control-on-the-product).
+
+A viewer of a shared configuration has no way here to edit a copy of it; see **Clone to edit in read mode** in [Known gaps](#known-gaps).
 
 ## Fit a phone
 
 A panel 380 pixels wide beside the scene leaves nothing of the table on a phone. Below a desktop width the layout puts the panel into a sheet at the bottom and lets the camera frame the table in the area above it. The layout above shows both arrangements.
 
-**The switch.** `useActiveViewports()` from `@salsita-ai/sdk/react` returns the width classes the configurator's container satisfies. The container decides, not the window, so a configurator embedded in a narrow column of a wide page gets the phone arrangement too. The built-in layout switches on `desktop` as well.
+**The switch.** `phx.frontend.useActiveViewports()` returns the width classes the configurator's container satisfies. The container decides, not the window, so a configurator embedded in a narrow column of a wide page gets the phone arrangement too. The built-in layout switches on `desktop` as well.
 
 | Value       | When it is active                                                                  |
 | ----------- | ---------------------------------------------------------------------------------- |
@@ -903,10 +972,10 @@ export const BottomSheet = ({ open, onOpenChange, label, children }: BottomSheet
 
 - The handle is a real button with `aria-expanded`. A tap, Enter or Space toggles the sheet, and dragging it up or down snaps the sheet to the other position when the drag is long or fast enough. `touchAction: 'none'` is set on the handle only, so the cards still scroll by touch.
 - The sheet's height comes from its content and is at most 55% of the configurator; when the content does not fit, the cards region shrinks until only the top of the cards shows and scrolls, and below that the sheet's content scrolls as a whole. On a phone with room for the header, the top of the cards and the footer, the price and the action stay in view with the sheet open; on a shorter one the customer scrolls the sheet to them, and the review step's buttons are reached the same way in both positions. A scroll on the cards that reaches their end moves the sheet on. Because the safe-area element is its neighbour in the column, the free area ends where the sheet starts without anything being measured by the layout.
-- While the handle is dragged the sheet follows the finger with a `transform`. `useSceneSafeArea()` does not see a transform, so the free area changes once, when the sheet snaps, and the camera refits once. A safe area that followed the finger would refit the camera on every move and reset an orbit the customer made.
+- While the handle is dragged the sheet follows the finger with a `transform`. `phx.frontend.useSceneSafeArea()` does not see a transform, so the free area changes once, when the sheet snaps, and the camera refits once. A safe area that followed the finger would refit the camera on every move and reset an orbit the customer made.
 - The sheet is not a modal: no backdrop covers the scene, so the table can be orbited with one finger and zoomed with two while the sheet is open. MUI's temporary `Drawer` and `SwipeableDrawer` are modals and would block the scene; their persistent and permanent variants have no backdrop, but no drag handle with two positions either.
 
-**What else moves.** The toast sits at the top of the free area, so it does not cover the sheet's handle, and the fullscreen button shows only its icon, with its label as tooltip and accessible name, so the toast has room beside it. Fullscreen removes the sheet as it removes the panel on a desktop. The sheet keeps its position while fullscreen is on.
+**What else moves.** The toast sits at the top of the free area, below the row of undo, redo and fullscreen buttons, so it does not cover the sheet's handle, and the fullscreen button shows only its icon, with its label as tooltip and accessible name. Fullscreen removes the sheet as it removes the panel on a desktop. The sheet keeps its position while fullscreen is on.
 
 **A camera for the phone.** The desktop camera is close enough to fill a wide free area, and on a narrow one it cuts off the ends of the table. So each camera has a filter on the viewport: the desktop camera `main` applies while `desktop` is active, and a second camera, `phone`, with a larger distance frames the whole table while `mobile` is. The filters exclude each other once the container is measured. Before that, for example when an image of the configuration is rendered, no viewport is known and a viewport filter matches, so both cameras apply and the higher priority of `main` decides:
 
@@ -968,7 +1037,6 @@ The element is registered with `phx.frontend.createCustomPhoenixEntityElement` u
 import { Box, ButtonBase, Popover, Tooltip } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { EdgeFinishCards } from '../_shared/EdgeFinishCards.js'
 
 // The edge profile the button shows, the square edge of the cards' drawings
@@ -1083,8 +1151,6 @@ components:
 ```tsx
 import { Box, Button, Tooltip } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // The spec's view states, each with the label of the button that shows it
 const VIEWS = [
   { state: 'overview', label: 'Whole table' },
@@ -1237,7 +1303,7 @@ transformers:
 
 ## Try the example
 
-To see read mode, open **Mocks** in the editor rail on the left and apply the **Read User** template.
+Each story names the mock template it opens with `args: { mockTemplate }`: **Example** and **Phone** open `default-user`, and **Read Mode** opens `read`. A template applied from the **Mocks** panel lasts until the story is opened again.
 
 The same layout in a frame 390 pixels wide, as on a phone. Opened on its own from the sidebar, the **Phone** story sets Storybook's viewport to 390 × 844.
 
@@ -1251,14 +1317,19 @@ The same layout in a frame 390 pixels wide, as on a phone. Opened on its own fro
 - **Review and request a quote** replaces the cards with the chosen finish and offers **Request a quote**; **Back to the configuration** brings the cards back.
 - **Request a quote** shows a spinner and "Sending the request…" for about a second and a half, with **Back to the configuration** disabled, then "Thank you. Your quote request is on its way, and the shop replies within two working days."; **Back to the configuration** then returns to the cards.
 - **Fullscreen** removes the panel and the table moves to the centre of the canvas; **Exit fullscreen** brings both back.
-- With the **Read User** mock the panel says **View only**, shows the chosen finish and the price, and has no button, so no quote can be requested.
+- In the **Read Mode** story the panel says **View only**, shows the chosen finish and the price, and has no button, so no quote can be requested; **Undo**, **Redo** and the button on the table's edge are not shown, and **Fullscreen**, the view buttons and **Reset view** work.
+- Applying **Host sets readonly** from the **Mocks** panel in the **Example** story shows the same read mode: **View only**, the chosen finish, no button in the panel, no **Undo**, **Redo** or button on the table's edge. Applying **Default User** brings the cards back.
+- **Undo** and **Redo** are disabled when the story opens. After choosing **Tree trunk**, **Undo** restores **Square** and $1,290.00 and enables **Redo**; **Redo** chooses **Tree trunk** again at $1,630.00.
+- **Undo** and **Redo** are not shown in the review step, in the confirmation or in fullscreen.
+- Clicking **Fullscreen** and **Exit fullscreen** each pushes the `fullscreenButton` user-action event, as an `AnalyticsService.push` line in the browser console shows: without a Google Tag Manager id, Storybook's analytics only log their events with `console.debug`, which the console shows only with its Verbose level enabled.
+- Entering fullscreen while **Request a quote** is pending and leaving it again shows the panel with the spinner still running, until the thank-you message appears.
 - A round button sits on the middle of the table's long edge. Clicking it opens the four finishes next to it; choosing **Round** there moves the check mark in the popover and in the panel, rounds the edge and raises the price to $1,410.00. Escape closes the popover.
 - Tab reaches the button on the edge, and Enter or Space opens the popover.
-- The button on the edge is gone in the review step, in the confirmation and with the **Read User** mock, and stays in fullscreen.
+- The button on the edge is gone in the review step, in the confirmation and in both read routes, and stays in fullscreen.
 - In the **Phone** story the panel is a sheet at the bottom showing the name, the price and **Review and request a quote**, and the whole table is visible above it.
 - Tapping the sheet's handle, or dragging it up, opens the sheet with the cards; the table moves up once the sheet has snapped and stays fully visible. Dragging the handle down, or tapping it again, collapses the sheet.
 - On the phone, the review step, **Request a quote** and the thank-you message work with the sheet collapsed and open.
-- On the phone, choosing **Tree trunk** shows the hint at the top of the free area, beside the fullscreen button.
+- On the phone, choosing **Tree trunk** shows the hint at the top of the free area, below the undo, redo and fullscreen buttons.
 - On the phone, the fullscreen button removes the sheet and the table moves to the centre of the canvas; pressing it again brings the sheet back in the position it had.
 - **Edge close-up** moves the camera close to the near corner of the top, where the edge profile shows; the button is drawn dark and the other light. **Whole table** returns to the whole table.
 - After dragging in the free area to orbit the table, **Reset view** returns to the framing of the active view, the whole table or the close-up.
@@ -1270,14 +1341,14 @@ The same layout in a frame 390 pixels wide, as on a phone. Opened on its own fro
 A project layout has only what it renders. This one leaves out the following, each of which a product may need. [Layout Slots](?path=/docs/phoenix-layout-slots--docs) describes every `LayoutSlots` member named here.
 
 - **Messages that stay snackbars.** The toast shows violations, side effects, errors and failed saves, and the finalize button shows its own error. Two kinds of message stay snackbars. An error of a built-in action, such as one from `LayoutSlots.DesktopToolbar`, renders into `LayoutSlots.DesktopSnackbarsRoot`; this layout mounts neither, and a layout that mounts such an action mounts the root too, or the snackbar appears outside the configurator. A failure to start from a preset appears on the preset screen, before this layout mounts; a project replaces that screen with `phx.frontend.createPresetUi`, see [Configurator Interface → Preset UI](?path=/docs/phoenix-configurator-interface--docs#preset-ui).
-- **Toolbar actions.** Undo and redo, measurements, sharing and language switching are not offered. A layout can mount `LayoutSlots.DesktopToolbar` for the toolbar the spec configures, or build its own buttons: `phx.frontend.useToolbarActions()` returns the spec's toolbar as runnable entries, and `phx.frontend.useUndoRedo()`, `useMeasurements()`, `useShareLinks()` and `useLocaleSwitch()` serve single actions, pushing the same analytics events as the built-in buttons; see [Configurator Interface → Hooks for a Project Layout](?path=/docs/phoenix-configurator-interface--docs#hooks-for-a-project-layout).
+- **Toolbar actions.** Measurements, sharing and language switching are not offered; undo and redo are the layout's own buttons, see [Undo and redo](#undo-and-redo). A layout can mount `LayoutSlots.DesktopToolbar` for the toolbar the spec configures, or build its own buttons: `phx.frontend.useToolbarActions()` returns the spec's toolbar as runnable entries, and `phx.frontend.useUndoRedo()`, `useMeasurements()`, `useShareLinks()` and `useLocaleSwitch()` serve single actions, pushing the same analytics events as the built-in buttons; see [Configurator Interface → Hooks for a Project Layout](?path=/docs/phoenix-configurator-interface--docs#hooks-for-a-project-layout).
 - **The spec's view controls, tool controls and leaving a tool mode.** A spec can configure view controls and tool controls, and a tool mode has a button that leaves it. The built-in layout places them with `LayoutSlots.DesktopViewControls`, `LayoutSlots.DesktopToolControls` and `LayoutSlots.DesktopCallToAction`; this layout mounts none of them, so the spec's `viewControls` and `toolControls` do not appear. Its views come from its own buttons instead, see [Control the scene](#control-the-scene), and it has no tool modes.
 - **A project's layout dialog.** A dialog the project registers with `phx.frontend.createLayoutDialog` is shown by `LayoutDialog`, which the built-in layout mounts. This layout does not; a layout that needs the dialog mounts `LayoutDialog` from `@salsita-ai/sdk/configurator`.
 - **Selection.** The table has no parts to select. A product with selectable parts reads `phx.frontend.useSelectedDomainEntityId()` and shows the controls of the selected part.
-- **Clone to edit in read mode.** With `shareCloneToEdit` set, the built-in layout's `LayoutSlots.DesktopReadonlyBanner` offers **Edit configuration** to a viewer; this layout's "View only" label offers nothing. A layout mounts the banner, or builds its own action with `LayoutSlots.useIsCloningAllowed()` and `LayoutSlots.CloneToEditDialog`.
-- **Back and close.** The built-in header's back button returns to the product choice, runs the host's close action or leaves the expanded view, whichever applies. This layout has none of them. `useCloseAction()` from `@salsita-ai/sdk/configurator` returns the host's close action, or `null` when there is none; the hook that chooses among the three is not exported.
-- **Analytics.** The finalize button records `FinalizeButtonClicked` through `useFinalizeAction`. The built-in fullscreen button records `FullScreenModeToggled`; this layout's fullscreen and other buttons record nothing. A layout that wants the events pushes `FrontendAnalyticsFactory.FullScreenModeToggled()` and the like, from `@salsita-ai/sdk/configurator`, with `phx.frontend.useAnalytics().push(...)`.
-- **Preview start screen.** The built-in layout shows a preview while `usePreview().isPreview` is set, which `preview: auto` does on phones without the project opting in. This layout ignores it and always renders the interface.
+- **Clone to edit in read mode.** With `shareCloneToEdit` set, the built-in layout's `LayoutSlots.DesktopReadonlyBanner` offers **Edit configuration** to a viewer; this layout's "View only" label offers nothing. A layout mounts the banner, or builds its own action with `phx.frontend.useIsCloningAllowed()` and `LayoutSlots.CloneToEditDialog`. The example leaves it out because Storybook cannot show the result: the dialog creates and opens the copy, but the mock template keeps its `read-revision` access on every configuration it opens, so the copy opens in read mode again.
+- **Back and close.** The built-in header's back button returns to the product choice, runs the host's close action or leaves the expanded view, whichever applies. This layout has none of them. `phx.frontend.useCloseAction()` returns the host's close action, or `null` when there is none, as in this Storybook example; the hook that chooses among the three is not exported.
+- **Analytics.** The finalize button records `FinalizeButtonClicked` through `useFinalizeActions`, the cards record the attribute choice through `useAttributeSelection`, undo and redo record their events through `useUndoRedo`, and the fullscreen button records `FullScreenModeToggled` itself. The review step's navigation buttons, the view buttons, **Reset view**, the sheet's handle and the button on the table's edge record nothing. A layout that wants more events pushes them from `FrontendAnalyticsFactory`, from `@salsita-ai/sdk/configurator`, with `phx.frontend.useAnalytics().push(...)`, as [Offer fullscreen](#offer-fullscreen) does.
+- **Preview start screen.** The built-in layout shows a preview while `phx.frontend.usePreview().isPreview` is set, which `preview: auto` does on phones without the project opting in. This layout ignores it and always renders the interface.
 - **Assistant panel.** A project layout gets it only with `LayoutSlots.DesktopSidebar`, the built-in sidebar as one piece, see [Sidebar in a Custom Layout](?path=/docs/layouts-sidebar-in-a-custom-layout--docs); this layout does not use it.
 - **"Powered by Salsita" mark.** The built-in layout shows it; a project layout decides whether to mount `LayoutSlots.DesktopPoweredBy`, and this one does not.
 
@@ -1286,7 +1357,7 @@ A project layout has only what it renders. This one leaves out the following, ea
 - [Configurator Interface → Loaded Configuration UI](?path=/docs/phoenix-configurator-interface--docs#loaded-configuration-ui) is the reference for the element name, the minimal layout, the SDK pieces a layout can mount and the hooks it reads.
 - [Universal](?path=/docs/layouts-universal--docs) is the built-in layout this one replaces.
 - [Header / Custom](?path=/docs/layouts-header-custom--docs) replaces only the header, with the price from `useRootEntityPrice()`.
-- [Canvas Padding](?path=/docs/layouts-canvas-padding--docs) scales the gaps `useSceneSafeArea()` measures.
+- [Canvas Padding](?path=/docs/layouts-canvas-padding--docs) scales the gaps `phx.frontend.useSceneSafeArea()` measures.
 - [Presets / Custom](?path=/docs/layouts-presets-custom--docs) replaces the preset screen the same way.
 
 ## Complete Implementation
@@ -1650,7 +1721,7 @@ export const BottomSheet = ({ open, onOpenChange, label, children }: BottomSheet
 import { Box, ButtonBase, type SxProps, type Theme, Typography } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 
-import { type UseAttributeSelection, useResolveLocalizable } from '@salsita-ai/sdk/react'
+import type { UseAttributeSelection } from '@salsita-ai/sdk/react'
 
 // Cross-sections of the tabletop's edge, keyed by the option values of the spec.
 const EDGE_PROFILES: Readonly<Record<string, string>> = {
@@ -1687,7 +1758,7 @@ interface EdgeFinishCardsProps {
 }
 
 export const EdgeFinishCards = ({ selection }: EdgeFinishCardsProps) => {
-  const resolve = useResolveLocalizable()
+  const resolve = phx.frontend.useResolveLocalizable()
   const { options } = selection
   // The card in the tab order: the selected one, or the first enabled one. Disabled cards are never in it.
   const selectedIndex = options.findIndex(option => option.value === selection.value && !option.disabled)
@@ -1784,7 +1855,7 @@ export const EdgeFinishCards = ({ selection }: EdgeFinishCardsProps) => {
 ```tsx
 import { Button, Tooltip } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
+import { FrontendAnalyticsFactory } from '@salsita-ai/sdk/configurator'
 
 const ENTER_ICON = 'M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'
 const EXIT_ICON = 'M9 4v5H4M15 4v5h5M15 20v-5h5M9 20v-5H4'
@@ -1797,6 +1868,7 @@ interface FullscreenToggleProps {
 export const FullscreenToggle = ({ compact = false }: FullscreenToggleProps) => {
   const isFullscreen = phx.frontend.useIsFullscreenActive()
   const setFullscreen = phx.frontend.useSetFullscreen()
+  const analytics = phx.frontend.useAnalytics()
   const label = isFullscreen ? 'Exit fullscreen' : 'Fullscreen'
   const icon = (
     <svg viewBox="0 0 24 24" width={20} height={20} fill="none" stroke="currentColor" strokeWidth={2}>
@@ -1804,10 +1876,16 @@ export const FullscreenToggle = ({ compact = false }: FullscreenToggleProps) =>
     </svg>
   )
 
+  // The same event the built-in fullscreen button records, for entering and for leaving
+  const toggle = () => {
+    analytics.push(FrontendAnalyticsFactory.FullScreenModeToggled())
+    setFullscreen(!isFullscreen)
+  }
+
   return (
     <Tooltip title={compact ? label : ''}>
       <Button
-        onClick={() => setFullscreen(!isFullscreen)}
+        onClick={toggle}
         aria-label={compact ? label : undefined}
         startIcon={compact ? undefined : icon}
         sx={{
@@ -1838,8 +1916,6 @@ import { useEffect, useState } from 'react'
 
 import type { ConfiguratorMessage } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const VIOLATION_SEVERITY = { fatal: 'error', fixable: 'error', warning: 'warning', notice: 'info' } as const
 const RANK = { info: 0, warning: 1, error: 2 } as const
 const VISIBLE_MS = 6000
@@ -1891,10 +1967,8 @@ export const MessageToast = () => {
 ```tsx
 import { Box, Button, Typography } from '@mui/material'
 
-import { detailComponent, finalizeActionComponent } from '@salsita-ai/sdk/domain'
-import { PhoenixHandlerBoundary, useResolveLocalizable } from '@salsita-ai/sdk/react'
+import { detailComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { EdgeFinishCards } from './EdgeFinishCards.js'
 import { ReviewActions } from './ReviewActions.js'
 
@@ -1908,7 +1982,7 @@ interface ProductPanelProps {
 }
 
 export const ProductPanel = ({ collapsed = false, inSheet = false }: ProductPanelProps) => {
-  const resolve = useResolveLocalizable()
+  const resolve = phx.frontend.useResolveLocalizable()
   const detail = phx.frontend.useFirstRootComponent(detailComponent)
   const price = phx.frontend.useRootEntityPrice()
   const tableId = phx.frontend.useRootEntityId()
@@ -1918,12 +1992,9 @@ export const ProductPanel = ({ collapsed = false, inSheet = false }: ProductPane
   const pushNavigate = phx.frontend.usePushNavigate()
   const popNavigate = phx.frontend.usePopNavigate()
   const navigate = phx.frontend.useNavigate()
-  const finalizeActions = phx.frontend.useComponents({ componentTypes: [finalizeActionComponent] }) ?? []
 
   const isReadMode = accessInfo.viewMode
   const isReview = isReadMode || navigationState !== 'configure'
-  // The spec's primary finalize action, or its first one
-  const quoteAction = finalizeActions.find(action => action.state.variant === 'primary') ?? finalizeActions[0]
   const chosenEdge = edgeFinish.options.find(option => option.value === edgeFinish.value)
 
   return (
@@ -2001,19 +2072,7 @@ export const ProductPanel = ({ collapsed = false, inSheet = false }: ProductPane
             <Typography variant="body2" color="text.secondary">
               Your table is ready for a quote. A real shop collects the contact details here.
             </Typography>
-            {quoteAction ? (
-              <PhoenixHandlerBoundary name={quoteAction.state.handler}>
-                <ReviewActions
-                  handler={quoteAction.state.handler}
-                  label={resolve(quoteAction.state.label)}
-                  onBack={popNavigate}
-                />
-              </PhoenixHandlerBoundary>
-            ) : (
-              <Button size="large" variant="outlined" onClick={popNavigate} sx={BUTTON_SX}>
-                Back to the configuration
-              </Button>
-            )}
+            <ReviewActions onBack={popNavigate} />
           </>
         )}
         {!isReadMode && navigationState === 'requested' && (
@@ -2037,44 +2096,43 @@ export const ProductPanel = ({ collapsed = false, inSheet = false }: ProductPane
 ```tsx
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const BUTTON_SX = { minBlockSize: 48, borderRadius: 999, textTransform: 'none', fontWeight: 600 } as const
 
 interface ReviewActionsProps {
-  readonly handler: string
-  readonly label: string
   readonly onBack: () => void
 }
 
-// The review step's buttons: one finalize action and the way back. `useFinalizeAction` runs the action's handler,
-// so this component calls it exactly once and is rendered inside a `PhoenixHandlerBoundary` for that handler.
-// Back is disabled while the request is pending, so the customer cannot change the configuration while it is sent.
-// The pending state belongs to this component: when the panel unmounts, as in fullscreen, the request goes on and
-// the remounted buttons are enabled again.
-export const ReviewActions = ({ handler, label, onBack }: ReviewActionsProps) => {
-  const { run, isPending, error, disabled, hints } = phx.frontend.useFinalizeAction(handler)
+// The review step's buttons: the spec's primary finalize action and the way back. `useFinalizeActions` runs the
+// action's handler beside the layout, so its pending state and error outlive this component: when the panel unmounts,
+// as in fullscreen, the request goes on and the remounted buttons still show it. Back is disabled while the request
+// is pending, so the customer cannot change the configuration while it is sent.
+export const ReviewActions = ({ onBack }: ReviewActionsProps) => {
+  const { primary, hints } = phx.frontend.useFinalizeActions()
+  const isPending = primary?.isPending ?? false
 
   return (
     <Box component="div" sx={{ display: 'grid', gap: 2 }}>
-      <Box component="div" sx={{ display: 'grid', gap: 1 }}>
-        <Button
-          size="large"
-          variant="contained"
-          disabled={disabled || isPending}
-          onClick={run}
-          startIcon={isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
-          sx={BUTTON_SX}
-        >
-          {isPending ? 'Sending the request…' : label}
-        </Button>
-        {disabled && hints && (
-          <Typography variant="caption" color="text.secondary">
-            {hints}
-          </Typography>
-        )}
-        {error && <Alert severity="error">The request could not be sent: {error.message}</Alert>}
-      </Box>
+      {primary && (
+        <Box component="div" sx={{ display: 'grid', gap: 1 }}>
+          <Button
+            size="large"
+            variant="contained"
+            disabled={primary.disabled || isPending}
+            onClick={() => void primary.run()}
+            title={primary.title}
+            startIcon={isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
+            sx={BUTTON_SX}
+          >
+            {isPending ? 'Sending the request…' : primary.label}
+          </Button>
+          {primary.disabled && hints && (
+            <Typography variant="caption" color="text.secondary">
+              {hints}
+            </Typography>
+          )}
+          {primary.error && <Alert severity="error">The request could not be sent: {primary.error.message}</Alert>}
+        </Box>
+      )}
       <Button size="large" variant="outlined" disabled={isPending} onClick={onBack} sx={BUTTON_SX}>
         Back to the configuration
       </Button>
@@ -2088,8 +2146,6 @@ export const ReviewActions = ({ handler, label, onBack }: ReviewActionsProps) =>
 ```tsx
 import { Box, Button, Tooltip } from '@mui/material'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // The spec's view states, each with the label of the button that shows it
 const VIEWS = [
   { state: 'overview', label: 'Whole table' },
@@ -2178,21 +2234,84 @@ export const SceneControls = ({ compact = false, resetOnly = false }: SceneContr
 }
 ```
 
+### ./src/\_shared/UndoRedo.tsx
+
+```tsx
+import { Box, IconButton, Tooltip } from '@mui/material'
+
+const UNDO_ICON = 'M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11'
+const REDO_ICON = 'M15 14l5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13'
+
+interface HistoryButtonProps {
+  readonly label: string
+  readonly icon: string
+  readonly enabled: boolean
+  readonly onClick: () => void
+}
+
+const HistoryButton = ({ label, icon, enabled, onClick }: HistoryButtonProps) => (
+  <Tooltip title={label}>
+    {/* A disabled button fires no pointer events, so the span keeps the tooltip working */}
+    <span>
+      <IconButton
+        aria-label={label}
+        disabled={!enabled}
+        onClick={onClick}
+        sx={{ inlineSize: 44, blockSize: 44, color: 'text.primary' }}
+      >
+        <svg viewBox="0 0 24 24" width={20} height={20} fill="none" stroke="currentColor" strokeWidth={2}>
+          <path d={icon} />
+        </svg>
+      </IconButton>
+    </span>
+  </Tooltip>
+)
+
+// Undo and redo for the customer's choices. They change the configuration, so they are offered only where the cards
+// are: not to a viewer, and not in the review step, where the summary and a running request must not change under the
+// customer. `useUndoRedo` pushes the same analytics events as the built-in toolbar's buttons.
+export const UndoRedo = () => {
+  const { canUndo, canRedo, undo, redo } = phx.frontend.useUndoRedo()
+  const { accessInfo } = phx.frontend.useAccessService()
+  const navigationState = phx.frontend.useActiveNavigationState()
+
+  if (accessInfo.viewMode || navigationState !== 'configure') {
+    return null
+  }
+
+  return (
+    <Box
+      component="div"
+      role="group"
+      aria-label="History"
+      sx={{
+        display: 'flex',
+        borderRadius: 999,
+        bgcolor: 'background.paper',
+        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.12)',
+      }}
+    >
+      <HistoryButton label="Undo" icon={UNDO_ICON} enabled={canUndo} onClick={undo} />
+      <HistoryButton label="Redo" icon={REDO_ICON} enabled={canRedo} onClick={redo} />
+    </Box>
+  )
+}
+```
+
 ### ./src/elements/ConfiguratorLayout.tsx
 
 ```tsx
 import { Box } from '@mui/material'
 import { useState } from 'react'
 
-import { LayoutSlots, useSceneSafeArea } from '@salsita-ai/sdk/configurator'
-import { useActiveViewports } from '@salsita-ai/sdk/react'
+import { LayoutSlots } from '@salsita-ai/sdk/configurator'
 
-import { phx } from '../../.phoenix/phx.js'
 import { BottomSheet } from '../_shared/BottomSheet.js'
 import { FullscreenToggle } from '../_shared/FullscreenToggle.js'
 import { MessageToast } from '../_shared/MessageToast.js'
 import { ProductPanel } from '../_shared/ProductPanel.js'
 import { SceneControls } from '../_shared/SceneControls.js'
+import { UndoRedo } from '../_shared/UndoRedo.js'
 
 const GUTTER = 24
 const PANEL_WIDTH = 380
@@ -2200,10 +2319,10 @@ const PHONE_GUTTER = 16
 const TOUCH_TARGET = 44
 
 const ConfiguratorLayout = () => {
-  const { containerRef, safeAreaRef } = useSceneSafeArea()
+  const { containerRef, safeAreaRef } = phx.frontend.useSceneSafeArea()
   const isFullscreen = phx.frontend.useIsFullscreenActive()
   // `null` until the container has been measured; the layout shows only the scene until then
-  const viewports = useActiveViewports()
+  const viewports = phx.frontend.useActiveViewports()
   const [isSheetOpen, setSheetOpen] = useState(false)
 
   const isDesktop = viewports?.includes('desktop') ?? false
@@ -2262,8 +2381,16 @@ const ConfiguratorLayout = () => {
         >
           <Box
             component="div"
-            sx={{ position: 'absolute', insetBlockStart: gutter, insetInlineEnd: gutter, pointerEvents: 'auto' }}
+            sx={{
+              position: 'absolute',
+              insetBlockStart: gutter,
+              insetInlineEnd: gutter,
+              display: 'flex',
+              gap: 1,
+              pointerEvents: 'auto',
+            }}
           >
+            {!isFullscreen && <UndoRedo />}
             <FullscreenToggle compact={!isDesktop} />
           </Box>
           <Box
@@ -2271,11 +2398,11 @@ const ConfiguratorLayout = () => {
             sx={{
               position: 'absolute',
               pointerEvents: 'auto',
-              // Desktop: bottom left, above the row of view controls. Phone: at the top beside the fullscreen button,
-              // clear of the sheet's handle and the view controls.
+              // Desktop: bottom left, above the row of view controls. Phone: at the top below the row of undo, redo and
+              // fullscreen, clear of the sheet's handle and the view controls.
               ...(isDesktop
                 ? { insetBlockEnd: 2 * GUTTER + TOUCH_TARGET, insetInlineStart: GUTTER }
-                : { insetBlockStart: gutter, insetInline: `${gutter}px ${2 * gutter + TOUCH_TARGET}px` }),
+                : { insetBlockStart: gutter + TOUCH_TARGET + gutter / 2, insetInline: gutter }),
             }}
           >
             <MessageToast />
@@ -2312,7 +2439,6 @@ export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout
 import { Box, ButtonBase, Popover, Tooltip } from '@mui/material'
 import { useState } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
 import { EdgeFinishCards } from '../_shared/EdgeFinishCards.js'
 
 // The edge profile the button shows, the square edge of the cards' drawings
@@ -2371,8 +2497,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('EdgeFinishHotspot'
 ### ./src/expressions/table.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const EDGE_FINISH_SURCHARGE = { None: 0, Facet: 90, Round: 120, TreeTrunk: 340 }
 
 export default phx.domain.implementCustomExpressions({
@@ -2398,8 +2522,6 @@ export default phx.domain.implementCustomExpressions({
 ```ts
 import { useCallback } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // Stands in for the shop's quote service: the request takes a moment, then the panel shows the confirmation
 export default phx.frontend.createPhoenixHandler('requestQuote', () => {
   const navigate = phx.frontend.useNavigate()
@@ -2418,8 +2540,6 @@ export default phx.frontend.createPhoenixHandler('requestQuote', () => {
 ```ts
 import { msg } from '@lingui/core/macro'
 
-import { phx } from '../../.phoenix/phx.js'
-
 // A tree-trunk edge is cut by hand; choosing it carries a hint, which reaches the layout as a side-effect message
 export default phx.frontend.transformerBuilder.when
   .entity(['Table'])