@salsita-ai/sdk 0.50.0-develop.da8d27f5d7 → 0.50.0-develop.e5ed4a0b66

package/dist/configurator/ui/configurator-layout/universal/MobileLayout.js

@@ -1,11 +1,11 @@
-import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import{snackbarClasses as o,styled as r,useTheme as i,useThemeProps as n}from"@mui/material";import d from"lodash/noop.js";import{AnimatePresence as s}from"motion/react";import{useRef as l}from"react";import{useAccessService as m,useIsFullscreenActive as p}from"#package/react-sdk";import{attrf as c,commonStyles as u,numToPx as b,useIsEmpty as h,useResponsive as g}from"#package/ui-sdk";import{usePreview as y}from"../../../configurator-context/index.js";import{LayoutSlots as f}from"../slots/index.js";import{MobileHeader as x}from"../slots/slots.js";import{MobilePreview as v}from"./MobilePreview.js";import{useSceneSafeArea as w}from"./use-scene-safe-area.js";let S="visible",k="hidden",C=r("div",{name:"PhxMobileHeader",slot:"root"})(({theme:{spacing:t}})=>({...u.transition.fadeInFrom,alignItems:"center",display:"flex",gap:t(1),justifyContent:"space-between",position:"relative","@container style(--inspect: on)":{background:"hsl(from tomato h s l / 50%)"},'[data-header*="slot"]':{display:"flex",gap:t(2),"& > *":{pointerEvents:"auto"}},'[data-header="slot[center]"]':{display:"grid",inset:0,placeItems:"center",position:"absolute"},[`&[data-header*="${S}"]`]:{opacity:1,transitionDuration:"200ms, 300ms",transitionTimingFunction:"linear, ease-out",translate:"0 0"},[`&[data-header*="${k}"]`]:{opacity:0,transitionDuration:"100ms, 100ms",transitionTimingFunction:"linear, ease-in",translate:"0 -60%"}})),$="visible",M="hidden",F=r("div",{name:"PhxMobileControls",slot:"root"})(({theme:{spacing:t}})=>({alignItems:"end",display:"flex",position:"relative","@container style(--inspect: on)":{background:"hsl(from tomato h s l / 50%)"},'[data-controls*="slot"]':{"& > *":{pointerEvents:"auto"}},'[data-controls="slot[toolControls]"]':{...u.transition.fadeInFrom,"&:not(:empty)":{marginInlineEnd:t(2)},"& > *":{...u.transition.fadeIn,transitionDelay:"300ms",transitionDuration:"300ms"}},'[data-controls="slot[viewControls]"]':{...u.transition.fadeInFrom,marginInlineStart:"auto"},'[data-controls="slot[toolbar]"]':{"&:not(:empty)":{marginInlineStart:t(2)}},[`&[data-controls*="${$}"]`]:{'[data-controls="slot[toolControls]"], [data-controls="slot[viewControls]"]':{opacity:1,transitionDuration:"200ms, 300ms",transitionTimingFunction:"linear, ease-out",translate:"0 0"}},[`&[data-controls*="${M}"]`]:{'[data-controls="slot[toolControls]"], [data-controls="slot[viewControls]"]':{opacity:0,transitionDuration:"100ms, 100ms",transitionTimingFunction:"linear, ease-in",translate:"0 60%"}}})),T="PhxMobileSidebar",I="visible",B="hidden",R={Root:r("div",{name:T,slot:"root",shouldForwardProp:t=>"ownerState"!==t})(({ownerState:t})=>[`
+import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import{snackbarClasses as o,styled as i,useTheme as r,useThemeProps as n}from"@mui/material";import d from"lodash/noop.js";import{AnimatePresence as s}from"motion/react";import{useRef as l}from"react";import{useAccessService as m,useEagerObservableSelector as c,useIsFullscreenActive as p}from"#package/react-sdk";import{attrf as u,commonStyles as b,numToPx as h,useIsEmpty as g,useResponsive as f,useViewportSize as y}from"#package/ui-sdk";import{useConfigurator as x}from"../../../application-runtime/index.js";import{usePreview as v}from"../../../configurator-context/index.js";import{ASSISTANT_PANEL_SLOT as w,AssistantPanel as S,useIsAssistantPanelOpen as $}from"../../assistant/index.js";import{LayoutSlots as k}from"../slots/index.js";import{MobileHeader as C}from"../slots/slots.js";import{MobilePreview as F}from"./MobilePreview.js";import{useSceneSafeArea as M}from"./use-scene-safe-area.js";let T="visible",I="hidden",R=i("div",{name:"PhxMobileHeader",slot:"root"})(({theme:{spacing:t}})=>({...b.transition.fadeInFrom,alignItems:"center",display:"flex",gap:t(1),justifyContent:"space-between",position:"relative","@container style(--inspect: on)":{background:"hsl(from tomato h s l / 50%)"},'[data-header*="slot"]':{display:"flex",gap:t(2),"& > *":{pointerEvents:"auto"}},'[data-header="slot[center]"]':{display:"grid",inset:0,placeItems:"center",position:"absolute"},[`&[data-header*="${T}"]`]:{opacity:1,transitionDuration:"200ms, 300ms",transitionTimingFunction:"linear, ease-out",translate:"0 0"},[`&[data-header*="${I}"]`]:{opacity:0,transitionDuration:"100ms, 100ms",transitionTimingFunction:"linear, ease-in",translate:"0 -60%"}})),B="visible",E="hidden",P=i("div",{name:"PhxMobileControls",slot:"root"})(({theme:{spacing:t}})=>({alignItems:"end",display:"flex",position:"relative","@container style(--inspect: on)":{background:"hsl(from tomato h s l / 50%)"},'[data-controls*="slot"]':{"& > *":{pointerEvents:"auto"}},'[data-controls="slot[toolControls]"]':{...b.transition.fadeInFrom,"&:not(:empty)":{marginInlineEnd:t(2)},"& > *":{...b.transition.fadeIn,transitionDelay:"300ms",transitionDuration:"300ms"}},'[data-controls="slot[viewControls]"]':{...b.transition.fadeInFrom,marginInlineStart:"auto"},'[data-controls="slot[toolbar]"]':{"&:not(:empty)":{marginInlineStart:t(2)}},[`&[data-controls*="${B}"]`]:{'[data-controls="slot[toolControls]"], [data-controls="slot[viewControls]"]':{opacity:1,transitionDuration:"200ms, 300ms",transitionTimingFunction:"linear, ease-out",translate:"0 0"}},[`&[data-controls*="${E}"]`]:{'[data-controls="slot[toolControls]"], [data-controls="slot[viewControls]"]':{opacity:0,transitionDuration:"100ms, 100ms",transitionTimingFunction:"linear, ease-in",translate:"0 60%"}}})),D="PhxMobileSidebar",j="visible",A="hidden",z="assistant",H={Root:i("div",{name:D,slot:"root",shouldForwardProp:t=>"ownerState"!==t})(({ownerState:t})=>[`
       --phx-sidebar-background: ${t.background};
       --phx-sidebar-padding: ${t.padding};
       --phx-sidebar-radius: ${t.borderRadius}px;
-    `,{...u.transition.fadeInFrom,background:"var(--phx-sidebar-background)",borderStartStartRadius:"var(--phx-sidebar-radius)",borderStartEndRadius:"var(--phx-sidebar-radius)",display:"grid",gridTemplateColumns:"minmax(0, 1fr)",gridTemplateRows:"min-content minmax(0, 1fr) min-content","& > *":{pointerEvents:"auto"},"@container style(--inspect: on)":{background:"hsl(from gold h s l / 50%)"},'&:has([data-sidebar*="slot[content]"])':{...t.isContentEmpty&&{"--phx-sidebar-radius":0,'[data-sidebar*="slot[header]"]':{paddingBlock:0,"& > *":{display:"none"}}}},[`&[data-sidebar*="${I}"]`]:{opacity:1,transitionDuration:"200ms, 300ms",transitionTimingFunction:"linear, ease-out",translate:"0 0"},[`&[data-sidebar*="${B}"]`]:{opacity:0,transitionDuration:"100ms, 100ms",transitionTimingFunction:"linear, ease-in",translate:"0 60%"}}]),Header:r("header",{name:T,slot:"header",shouldForwardProp:t=>"ownerState"!==t})(({theme:{spacing:t}})=>({alignItems:"center",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",display:"grid",gap:t(1),gridTemplateColumns:"repeat(2, minmax(0, 1fr))",paddingBlock:"calc(var(--phx-sidebar-padding) * 0.5)",paddingInline:"var(--phx-sidebar-padding)","& > *":{...u.transition.fadeIn,transitionDelay:"100ms",transitionDuration:"300ms"},'[data-sidebar="slot[header.start]"]':{},'[data-sidebar="slot[header.end]"]':{justifySelf:"end"}})),Body:r("div",{name:T,slot:"body",shouldForwardProp:t=>"ownerState"!==t})({display:"grid",gridTemplateRows:"minmax(0, 1fr)"}),Content:r("div",{name:T,slot:"content",shouldForwardProp:t=>"ownerState"!==t})(({theme:{spacing:t}})=>({...u.layout.normalizeScrollableContainer,display:"grid",gap:t(2),gridAutoRows:"min-content",paddingBlock:"calc(var(--phx-sidebar-padding) * 0.5)",paddingInline:"var(--phx-sidebar-padding)","&:empty":{paddingBlock:0}})),Tabs:r("div",{name:T,slot:"tabs",shouldForwardProp:t=>"ownerState"!==t})(({theme:{palette:t}})=>({borderBlockStart:`1px solid ${t.divider}`,paddingBlock:"calc(var(--phx-sidebar-padding) * 0.5)",paddingInline:"calc(var(--phx-sidebar-padding) * 0.75)","&:is(:empty)":{border:0,padding:0}})),Footer:r("footer",{name:T,slot:"footer",shouldForwardProp:t=>"ownerState"!==t})(({theme:{palette:t}})=>({borderBlockStart:`1px solid ${t.divider}`,paddingBlock:"calc(var(--phx-sidebar-padding) * 0.5)",paddingInline:"var(--phx-sidebar-padding)","&:is(:empty)":{borderColor:"transparent",paddingBlock:0}}))};export const PhxMobileLayoutName="PhxMobileLayout";let E="initial",P="fullscreen",D=r("div",{name:"PhxMobileLayout",slot:"root",shouldForwardProp:t=>"ownerState"!==t})(({ownerState:t,theme:{spacing:a}})=>[`
+    `,{...b.transition.fadeInFrom,background:"var(--phx-sidebar-background)",borderStartStartRadius:"var(--phx-sidebar-radius)",borderStartEndRadius:"var(--phx-sidebar-radius)",display:"grid",gridTemplateColumns:"minmax(0, 1fr)",gridTemplateRows:"min-content minmax(0, 1fr) min-content",position:"relative","& > *":{pointerEvents:"auto"},"@container style(--inspect: on)":{background:"hsl(from gold h s l / 50%)"},'&:has([data-sidebar*="slot[content]"])':{...t.isContentEmpty&&{"--phx-sidebar-radius":0,'[data-sidebar*="slot[header]"]':{paddingBlock:0,"& > *":{display:"none"}}}},[`&[data-sidebar*="${j}"]`]:{opacity:1,transitionDuration:"200ms, 300ms",transitionTimingFunction:"linear, ease-out",translate:"0 0"},[`&[data-sidebar*="${A}"]`]:{opacity:0,transitionDuration:"100ms, 100ms",transitionTimingFunction:"linear, ease-in",translate:"0 60%"},[`&[data-sidebar*="${z}"] > :not([data-sidebar="${w}"])`]:{visibility:"hidden"}}]),Header:i("header",{name:D,slot:"header",shouldForwardProp:t=>"ownerState"!==t})(({theme:{spacing:t}})=>({alignItems:"center",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",display:"grid",gap:t(1),gridTemplateColumns:"repeat(2, minmax(0, 1fr))",paddingBlock:"calc(var(--phx-sidebar-padding) * 0.5)",paddingInline:"var(--phx-sidebar-padding)","& > *":{...b.transition.fadeIn,transitionDelay:"100ms",transitionDuration:"300ms"},'[data-sidebar="slot[header.start]"]':{},'[data-sidebar="slot[header.end]"]':{justifySelf:"end"}})),Body:i("div",{name:D,slot:"body",shouldForwardProp:t=>"ownerState"!==t})({display:"grid",gridTemplateRows:"minmax(0, 1fr)"}),Content:i("div",{name:D,slot:"content",shouldForwardProp:t=>"ownerState"!==t})(({theme:{spacing:t}})=>({...b.layout.normalizeScrollableContainer,display:"grid",gap:t(2),gridAutoRows:"min-content",paddingBlock:"calc(var(--phx-sidebar-padding) * 0.5)",paddingInline:"var(--phx-sidebar-padding)","&:empty":{paddingBlock:0}})),Tabs:i("div",{name:D,slot:"tabs",shouldForwardProp:t=>"ownerState"!==t})(({theme:{palette:t}})=>({borderBlockStart:`1px solid ${t.divider}`,paddingBlock:"calc(var(--phx-sidebar-padding) * 0.5)",paddingInline:"calc(var(--phx-sidebar-padding) * 0.75)","&:is(:empty)":{border:0,padding:0}})),Footer:i("footer",{name:D,slot:"footer",shouldForwardProp:t=>"ownerState"!==t})(({theme:{palette:t}})=>({borderBlockStart:`1px solid ${t.divider}`,paddingBlock:"calc(var(--phx-sidebar-padding) * 0.5)",paddingInline:"var(--phx-sidebar-padding)","&:is(:empty)":{borderColor:"transparent",paddingBlock:0}}))};export const PhxMobileLayoutName="PhxMobileLayout";let L="initial",q="fullscreen",N="min(480px, 50cqb)",V=["auto","min-content","max-content","fit-content"],G=i("div",{name:"PhxMobileLayout",slot:"root",shouldForwardProp:t=>"ownerState"!==t})(({ownerState:t,theme:{spacing:a}})=>[`
     --inspect: off;  // 🕹️ inspection mode toggle
 
-    --phx-layout-sidebar-track-size: ${b(t.sidebarHeight)};
+    --phx-layout-sidebar-track-size: ${h(t.sidebarHeight)};
     --phx-layout-gutter: ${a(2)};
   `,{display:"grid",gridTemplateColumns:`
       [full-start]
@@ -39,4 +39,4 @@ import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import{snackbarC
         [footer-end]
         var(--phx-layout-gutter)
         [full-end]
-      `},'[data-layout*="slot[body.header]"]':{gridArea:"header-start / main-start / header-end / main-end"},'[data-layout*="slot[body.footer]"]':{gridArea:"footer-start / main-start / footer-end / main-end",position:"relative"},'[data-layout*="slot[body.safeSceneArea]"]':{gridArea:"full","@container style(--inspect: on)":{background:"hsl(from lime h s l / 50%)"}},'[data-layout="slot[body.sideEffects]"]':{insetBlockEnd:`calc(100% + ${a(2)})`,position:"absolute"},'[data-layout*="slot[sidebar]"]':{display:"grid",gridArea:"sidebar-start / full-start / sidebar-end / full-end",gridTemplateColumns:"minmax(0, 1fr)",gridTemplateRows:"minmax(0, auto)"},'[data-layout*="slot[footer]"]':{gridArea:"footer-start / full-start / footer-end / full-end",zIndex:1},'&:has([data-sidebar*="slot[content]"])':{...t.isContentEmpty&&{"--phx-layout-sidebar-track-size":"min-content"}},[`&[data-layout*="${E}"]`]:{transitionDelay:"200ms",transitionDuration:"300ms"},[`&[data-layout*="${P}"]`]:{transitionDelay:"0ms",transitionDuration:"300ms"},[`&:has([data-sidebar*="${B}"])[class]`]:{"--phx-layout-sidebar-track-size":0}}]),j=r("div")({gridArea:"1 / 1 / -1 / -1"}),A=t=>({inert:t?"":void 0});export const MobileLayout=()=>{let o=l(null),{palette:r,shape:u,spacing:b}=i(),{sidebarHeight:z="min(480px, 50cqb)"}=n({props:{},name:"PhxMobileLayout"}),{background:H=r.background.paper,borderRadius:L=u.sidebarBorderRadius??u.borderRadius,padding:q=b(2)}=n({props:{},name:T}),{accessInfo:N}=m(),V=p(),{isPreview:G,isHidden:J}=y(),K=!J&&!G,O=!V&&K,Q=!V&&K,U=!V,{setCanvasPadding:W}=g(),{containerRef:X,safeAreaRef:Y}=w(K?W:d,!1),Z=h(o,{disabled:!U}),_={background:H,borderRadius:L,padding:q,isContentEmpty:Z};return a(e,{children:[t(s,{initial:!1,children:!J&&G&&t(v,{})}),a(D,{ownerState:{isContentEmpty:Z,sidebarHeight:z},"data-layout":c({state:{[`${E}`]:!V,[`${P}`]:V}}),...A(!K),children:[t(j,{ref:X}),t("div",{"data-layout":"slot[sideEffects]",children:t(f.MobileSnackbarsRoot,{})}),a("main",{"data-layout":"slot[body]",children:[t("header",{"data-layout":"slot[body.header]",children:a(C,{"data-header":c({state:{[`${S}`]:O,[`${k}`]:!O}}),...A(!O),children:[t("div",{"data-header":"slot[start]",children:t(x,{})}),t("div",{"data-header":"slot[center]",children:t(f.MobileCallToAction,{})}),a("div",{"data-header":"slot[end]",children:[N.viewMode&&!V&&t(f.MobileReadonlyBanner,{}),t(f.MobileHamburgerMenu,{})]})]})}),t("div",{ref:Y,"data-layout":"slot[body.safeSceneArea]"}),t("div",{"data-layout":"slot[body.footer] interactive",children:a(F,{"data-controls":c({state:{[`${$}`]:Q,[`${M}`]:!Q}}),children:[t("div",{"data-controls":"slot[toolControls]",...A(!Q),children:t(f.MobileToolControls,{})}),t("div",{"data-controls":"slot[viewControls]",...A(!Q),children:t(f.MobileViewControls,{})}),t("div",{"data-controls":"slot[toolbar]",children:K&&t(f.MobileToolbar,{})})]})})]}),t("aside",{"data-layout":"slot[sidebar]",children:a(R.Root,{ownerState:_,"data-sidebar":c({state:{[`${I}`]:U,[`${B}`]:!U}}),...A(!U),children:[a(R.Header,{ownerState:_,"data-sidebar":"slot[header]",children:[t("div",{"data-sidebar":"slot[header.start]",children:t(f.MobileSidebarBackButton,{})}),t("div",{"data-sidebar":"slot[header.end]",children:t(f.MobilePoweredBy,{})})]}),t(R.Body,{ownerState:_,"data-sidebar":"slot[body]",children:t(R.Content,{ref:o,ownerState:_,"data-sidebar":"slot[content]",children:t(f.MobileSidebarContent,{})})}),t(R.Tabs,{ownerState:_,"data-sidebar":"slot[tabs]",children:t(f.MobileTabs,{})}),t(R.Footer,{ownerState:_,"data-sidebar":"slot[footer]",children:t(f.MobileSidebarFooter,{})})]})}),t("footer",{"data-layout":"slot[footer] interactive",children:t(f.MobileFooter,{})})]})]})};
+      `},'[data-layout*="slot[body.header]"]':{gridArea:"header-start / main-start / header-end / main-end"},'[data-layout*="slot[body.footer]"]':{gridArea:"footer-start / main-start / footer-end / main-end",position:"relative"},'[data-layout*="slot[body.safeSceneArea]"]':{gridArea:"full","@container style(--inspect: on)":{background:"hsl(from lime h s l / 50%)"}},'[data-layout="slot[body.sideEffects]"]':{insetBlockEnd:`calc(100% + ${a(2)})`,position:"absolute"},'[data-layout*="slot[sidebar]"]':{display:"grid",gridArea:"sidebar-start / full-start / sidebar-end / full-end",gridTemplateColumns:"minmax(0, 1fr)",gridTemplateRows:"minmax(0, auto)"},'[data-layout*="slot[footer]"]':{gridArea:"footer-start / full-start / footer-end / full-end",zIndex:1},'&:has([data-sidebar*="slot[content]"])':{...t.isContentEmpty&&{"--phx-layout-sidebar-track-size":"min-content"}},[`&[data-layout*="${L}"]`]:{transitionDelay:"200ms",transitionDuration:"300ms"},[`&[data-layout*="${q}"]`]:{transitionDelay:"0ms",transitionDuration:"300ms"},[`&:has([data-sidebar*="${A}"])[class]`]:{"--phx-layout-sidebar-track-size":0}},null!=t.assistantFocusHeight&&{'[data-layout*="slot[sidebar]"]':{alignSelf:"start",blockSize:`min(100%, ${t.assistantFocusHeight}px)`,gridRow:"full-start / full-end",zIndex:2}}]),J=i("div")({gridArea:"1 / 1 / -1 / -1"}),K=t=>({inert:t?"":void 0});export const MobileLayout=()=>{let o=l(null),{palette:i,shape:b,spacing:h}=r(),{sidebarHeight:w=N}=n({props:{},name:"PhxMobileLayout"}),{background:O=i.background.paper,borderRadius:Q=b.sidebarBorderRadius??b.borderRadius,padding:U=h(2)}=n({props:{},name:D}),{accessInfo:W}=m(),X=p(),{isPreview:Y,isHidden:Z}=v(),_=!Z&&!Y,tt=!X&&_,ta=!X&&_,te=!X,{setCanvasPadding:to}=f(),{containerRef:ti,safeAreaRef:tr}=M(_?to:d,!1),tn=g(o,{disabled:!te}),{assistantSystem:td}=x(),ts=$(),tl=c(td.panel$,t=>t.isInputFocused,[]),tm=ts&&te&&tl,tc=y(tm),tp=tn&&!ts,tu={isContentEmpty:tp,sidebarHeight:ts?V.includes(w)?N:w:w,assistantFocusHeight:tm?tc?.[1]:void 0},tb={background:O,borderRadius:Q,padding:U,isContentEmpty:tp};return a(e,{children:[t(s,{initial:!1,children:!Z&&Y&&t(F,{})}),a(G,{ownerState:tu,"data-layout":u({state:{[`${L}`]:!X,[`${q}`]:X}}),...K(!_),children:[t(J,{ref:ti}),t("div",{"data-layout":"slot[sideEffects]",children:t(k.MobileSnackbarsRoot,{})}),a("main",{"data-layout":"slot[body]",children:[t("header",{"data-layout":"slot[body.header]",children:a(R,{"data-header":u({state:{[`${T}`]:tt,[`${I}`]:!tt}}),...K(!tt),children:[t("div",{"data-header":"slot[start]",children:t(C,{})}),t("div",{"data-header":"slot[center]",children:t(k.MobileCallToAction,{})}),a("div",{"data-header":"slot[end]",children:[W.viewMode&&!X&&t(k.MobileReadonlyBanner,{}),t(k.MobileHamburgerMenu,{})]})]})}),t("div",{ref:tr,"data-layout":"slot[body.safeSceneArea]"}),t("div",{"data-layout":"slot[body.footer] interactive",children:a(P,{"data-controls":u({state:{[`${B}`]:ta,[`${E}`]:!ta}}),children:[t("div",{"data-controls":"slot[toolControls]",...K(!ta),children:t(k.MobileToolControls,{})}),t("div",{"data-controls":"slot[viewControls]",...K(!ta),children:t(k.MobileViewControls,{})}),t("div",{"data-controls":"slot[toolbar]",children:_&&t(k.MobileToolbar,{})})]})})]}),t("aside",{"data-layout":"slot[sidebar]",children:a(H.Root,{ownerState:tb,"data-sidebar":u({state:{[`${j}`]:te,[`${A}`]:!te,[`${z}`]:ts}}),...K(!te),children:[a(H.Header,{ownerState:tb,"data-sidebar":"slot[header]",children:[t("div",{"data-sidebar":"slot[header.start]",children:t(k.MobileSidebarBackButton,{})}),t("div",{"data-sidebar":"slot[header.end]",children:t(k.MobilePoweredBy,{})})]}),t(H.Body,{ownerState:tb,"data-sidebar":"slot[body]",children:t(H.Content,{ref:o,ownerState:tb,"data-sidebar":"slot[content]",children:t(k.MobileSidebarContent,{})})}),t(H.Tabs,{ownerState:tb,"data-sidebar":"slot[tabs]",children:t(k.MobileTabs,{})}),t(H.Footer,{ownerState:tb,"data-sidebar":"slot[footer]",children:t(k.MobileSidebarFooter,{})}),t(S,{})]})}),t("footer",{"data-layout":"slot[footer] interactive",children:t(k.MobileFooter,{})})]})]})};

package/dist/configurator/ui/legacy/mobile-controls/MobileControls.d.ts

@@ -57,6 +57,6 @@ declare const ResponsiveNavigation: <VALUE extends string, ENTITY_ID extends Dom
  */
 export declare const MobileControls: {
     Navigation: typeof ResponsiveNavigation;
-    ViewOnlyMode: (inProps: import("../../../../ui-sdk/components/mobile-controls/MobileControls").ViewOnlyModeProps & import("#package/ui-sdk").MobileControlsThemeableProps) => import("react/jsx-runtime").JSX.Element;
+    ViewOnlyMode: (inProps: import("#package/ui-sdk").ViewOnlyModeProps & import("#package/ui-sdk").MobileControlsThemeableProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/configurator/ui/phoenix-layout-elements/AssistantToolbarButton.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Opens and closes the assistant panel. It renders nothing in a project without an assistant. A
+ * layout that lists the button is expected to carry the panel; the button does not check for it.
+ */
+export declare const AssistantToolbarButton: import("react").FunctionComponent<{
+    readonly showTitle?: boolean;
+    readonly icon?: string;
+} & {
+    children?: import("react").ReactNode;
+}>;

package/dist/configurator/ui/phoenix-layout-elements/AssistantToolbarButton.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{Badge as r}from"@mui/material";import{memo as o,useCallback as a}from"react";import{assistantToolbarButtonSchema as i,createPhoenixLayoutElement as e}from"#package/domain";import{useEagerObservableValue as s,useLocalizable as n,useSpecAssistant as m}from"#package/react-sdk";import{DesktopToolbar as l,PhxIcon as p,useResponsive as c}from"#package/ui-sdk";import{useConfigurator as d}from"../../application-runtime/index.js";let u={id:"sdk.assistant.toolbarButton.label",message:"Assistant"};export const AssistantToolbarButton=e({schema:i,component:o(o=>{let{icon:i,showTitle:e=!0}=o,{assistantSystem:k}=d(),f=m(),{open:A,hasUnreadReply:b}=s(k.panel$),g=n(u),{isPhone:x,isTablet:h}=c(),B=a(()=>{k.setOpen(!A)},[k,A]);return f?t(l.Button,{title:g,onClick:B,showTitle:e&&!x&&!h,"aria-pressed":A,sx:{'&[aria-pressed="true"]':{backgroundColor:"action.selected"}},children:t(r,{color:"primary",variant:"dot",overlap:"circular",invisible:!b,children:t(p,{name:i??(A?"CustomAiAssistantBold":"CustomAiAssistant")})})}):null})});

package/dist/configurator/ui/phoenix-layout-elements/index.d.ts

@@ -14,6 +14,7 @@ export { UndoToolbarButton } from './UndoToolbarButton.js';
 export { RedoToolbarButton } from './RedoToolbarButton.js';
 export { MeasurementsToolbarButton } from './MeasurementsToolbarButton.js';
 export { HelpToolbarButton } from './HelpToolbarButton.js';
+export { AssistantToolbarButton } from './AssistantToolbarButton.js';
 export { HelpMenuAction } from './HelpMenuAction.js';
 export { LanguageMenuAction } from './LanguageMenuAction.js';
 export { MeasurementsMenuAction } from './MeasurementsMenuAction.js';

package/dist/configurator/ui/phoenix-layout-elements/index.js

@@ -1 +1 @@
-export*from"./sidebar-footer/index.js";export*from"./header/index.js";export{useShareData,useShareSettings}from"./share/use-share.js";export{MenuRoutingProvider,useMenuRouting}from"./menu-actions/MenuRoutingContext.js";export{MenuAction}from"./menu-actions/MenuAction.js";export{RoutingMenuAction}from"./menu-actions/RoutingMenuAction.js";export{EnterFullscreenToolbarButton}from"./EnterFullscreenToolbarButton.js";export{ExitFullscreenToolbarButton}from"./ExitFullscreenToolbarButton.js";export{LanguageToolbarButton}from"./LanguageToolbarButton.js";export{ToolbarButtonGroup}from"./ToolbarButtonGroup.js";export{ShareMenuAction}from"./ShareMenuAction.js";export{ShareToolbarButton}from"./ShareToolbarButton.js";export{UndoToolbarButton}from"./UndoToolbarButton.js";export{RedoToolbarButton}from"./RedoToolbarButton.js";export{MeasurementsToolbarButton}from"./MeasurementsToolbarButton.js";export{HelpToolbarButton}from"./HelpToolbarButton.js";export{HelpMenuAction}from"./HelpMenuAction.js";export{LanguageMenuAction}from"./LanguageMenuAction.js";export{MeasurementsMenuAction}from"./MeasurementsMenuAction.js";export{ResetCameraToolbarButton}from"./ResetCameraToolbarButton.js";export{SimpleSummary}from"./SimpleSummary.js";export{ResetUndoListener}from"./ResetUndoListener.js";export{SetAsRecipeButton}from"./SetAsRecipeButton.js";export{LayoutDialog,createLayoutDialog}from"./LayoutDialog.js";export{LayoutFooter,createLayoutFooter}from"./LayoutFooter.js";export{CanvasLoader,createCanvasLoader}from"./CanvasLoader.js";export{AppLoader,createAppLoader}from"./AppLoader.js";export{ToolbarHelp,createToolbarHelp,useToolbarHelpExists}from"./ToolbarHelp.js";export{LayoutToolbarDesktop,createLayoutToolbarDesktop}from"./LayoutToolbarDesktop.js";export{LayoutToolbarDesktopFullScreen,createLayoutToolbarDesktopFullScreen}from"./LayoutToolbarDesktopFullScreen.js";export{LayoutToolbarReadDesktop,createLayoutToolbarReadDesktop}from"./LayoutToolbarReadDesktop.js";export{LayoutToolbarReadDesktopFullScreen,createLayoutToolbarReadDesktopFullScreen}from"./LayoutToolbarReadDesktopFullScreen.js";export{LayoutCustomOwnerUi,createLayoutCustomOwnerUi}from"./LayoutCustomOwnerUi.js";export{LayoutCustomReadUi,createLayoutCustomReadUi}from"./LayoutCustomReadUi.js";export{LayoutAdminUi,createLayoutAdminUi}from"./LayoutAdminUi.js";export{LayoutUserUi,createLayoutUserUi}from"./LayoutUserUi.js";export{ExitToolModeFab}from"./call-to-action/ExitToolModeFab.js";export*from"./svg-throbber-3d/index.js";
+export*from"./sidebar-footer/index.js";export*from"./header/index.js";export{useShareData,useShareSettings}from"./share/use-share.js";export{MenuRoutingProvider,useMenuRouting}from"./menu-actions/MenuRoutingContext.js";export{MenuAction}from"./menu-actions/MenuAction.js";export{RoutingMenuAction}from"./menu-actions/RoutingMenuAction.js";export{EnterFullscreenToolbarButton}from"./EnterFullscreenToolbarButton.js";export{ExitFullscreenToolbarButton}from"./ExitFullscreenToolbarButton.js";export{LanguageToolbarButton}from"./LanguageToolbarButton.js";export{ToolbarButtonGroup}from"./ToolbarButtonGroup.js";export{ShareMenuAction}from"./ShareMenuAction.js";export{ShareToolbarButton}from"./ShareToolbarButton.js";export{UndoToolbarButton}from"./UndoToolbarButton.js";export{RedoToolbarButton}from"./RedoToolbarButton.js";export{MeasurementsToolbarButton}from"./MeasurementsToolbarButton.js";export{HelpToolbarButton}from"./HelpToolbarButton.js";export{AssistantToolbarButton}from"./AssistantToolbarButton.js";export{HelpMenuAction}from"./HelpMenuAction.js";export{LanguageMenuAction}from"./LanguageMenuAction.js";export{MeasurementsMenuAction}from"./MeasurementsMenuAction.js";export{ResetCameraToolbarButton}from"./ResetCameraToolbarButton.js";export{SimpleSummary}from"./SimpleSummary.js";export{ResetUndoListener}from"./ResetUndoListener.js";export{SetAsRecipeButton}from"./SetAsRecipeButton.js";export{LayoutDialog,createLayoutDialog}from"./LayoutDialog.js";export{LayoutFooter,createLayoutFooter}from"./LayoutFooter.js";export{CanvasLoader,createCanvasLoader}from"./CanvasLoader.js";export{AppLoader,createAppLoader}from"./AppLoader.js";export{ToolbarHelp,createToolbarHelp,useToolbarHelpExists}from"./ToolbarHelp.js";export{LayoutToolbarDesktop,createLayoutToolbarDesktop}from"./LayoutToolbarDesktop.js";export{LayoutToolbarDesktopFullScreen,createLayoutToolbarDesktopFullScreen}from"./LayoutToolbarDesktopFullScreen.js";export{LayoutToolbarReadDesktop,createLayoutToolbarReadDesktop}from"./LayoutToolbarReadDesktop.js";export{LayoutToolbarReadDesktopFullScreen,createLayoutToolbarReadDesktopFullScreen}from"./LayoutToolbarReadDesktopFullScreen.js";export{LayoutCustomOwnerUi,createLayoutCustomOwnerUi}from"./LayoutCustomOwnerUi.js";export{LayoutCustomReadUi,createLayoutCustomReadUi}from"./LayoutCustomReadUi.js";export{LayoutAdminUi,createLayoutAdminUi}from"./LayoutAdminUi.js";export{LayoutUserUi,createLayoutUserUi}from"./LayoutUserUi.js";export{ExitToolModeFab}from"./call-to-action/ExitToolModeFab.js";export*from"./svg-throbber-3d/index.js";

package/dist/docs/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-08T09:21:48.882Z",
+  "generatedAt": "2026-10-12T12:38:07.169Z",
   "categories": [
     {
       "name": "Phoenix",
@@ -26,7 +26,7 @@
         },
         {
           "title": "Best Practices",
-          "description": "1. **YAML is king** - 99% of configuration should be in spec/\\*.yaml files 2. **Custom code locations** (in order of preference): - `src/expressions/` - Computed/derived properties -...",
+          "description": "1. **YAML is king** - 99% of configuration should be in spec/\\*.yaml files 2. **Custom code locations** (in order of preference): - `src/expressions/` - Computed/derived properties - `src/actions/` -...",
           "path": "docs/phoenix/best-practices.mdx",
           "category": [
             "Phoenix",
@@ -2479,6 +2479,16 @@
           ],
           "source": "storybook-example"
         },
+        {
+          "title": "Domain Actions",
+          "description": "A plate carries holes, and a hole can be nudged by an offset as long as it stays on the plate. The arrow buttons of a selected hole and the AI assistant both make this change, so the rule (\"stay on...",
+          "path": "docs/other-features/domain-actions.mdx",
+          "category": [
+            "Other features",
+            "Domain Actions"
+          ],
+          "source": "storybook-example"
+        },
         {
           "title": "Not Found (404)",
           "description": "Error page that is displayed when the configuration is not accesible.",

package/dist/docs/layouts/toolbar.mdx

@@ -81,6 +81,12 @@ Phoenix provides built-in toolbar buttons for common operations:
   `props.showIndicatorSwitch: false` to hide the Dimension indicators switch. When omitted, the prop falls back to
   `applicationConfig.indicatorSwitch`, then `true`.
 - `helpToolbarButton` - Show help content (supports custom children)
+- `assistantToolbarButton` - Open and close the built-in assistant panel. It renders only in a project whose
+  application spec has an `assistant` section. `props.showTitle` defaults to `true`; the label shows on a
+  desktop-sized layout only. The default toolbar includes it, in a group of its own, when the spec has an
+  `assistant` section. Only the universal layout carries the panel, and the button does not hide itself in a
+  layout without it. A custom layout that renders the toolbar therefore defines a `toolbar` component without the
+  button, because the default toolbar would add it.
 
 ### Mobile Toolbar Configuration
 

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

@@ -0,0 +1,418 @@
+# Domain Actions
+
+- [Use case](#use-case)
+- [Declare the action](#declare-the-action)
+- [Implement it](#implement-it)
+- [Run it from the UI](#run-it-from-the-ui)
+- [Expose it to the assistant](#expose-it-to-the-assistant)
+- [Known gaps](#known-gaps)
+- [Example](#example)
+
+## Use case
+
+A plate carries holes, and a hole can be nudged by an offset as long as it stays on the plate. The arrow buttons of a selected hole and the AI assistant both make this change, so the rule ("stay on the plate") has to live in one place.
+
+An **action** is that place: a named domain operation you declare once under `actions:`, implement in `src/actions/` with generated parameter and result types, and run from any control through `actionSystem.prepareAction()`. The same action is exposed to the assistant as a custom mutation by naming it under `assistant.actions`. Use an action whenever a change is more than writing one field: a swap, a move among siblings, a change that touches several entities at once.
+
+## Declare the action
+
+`params` and `result` are maps of named JSON schemas, with the same `phx:` refs, `references`, `tsType` and `import` as entity shapes. A param whose schema allows `null` is optional; every other param is required. A result member typed `phx:$DomainEntity` is the enhanced entity after the change.
+
+```yaml
+actions:
+  nudgeHole:
+    description: Moves a hole by an offset on the plate; the move fails when the hole would leave the plate
+    params:
+      holeId:
+        $ref: phx:DomainEntityId
+        references: Hole
+        description: The hole to move
+      dx:
+        type: integer
+        description: Offset along the x axis, in plate units
+      dy:
+        type: integer
+        description: Offset along the y axis, in plate units
+    result:
+      hole:
+        $ref: phx:$DomainEntity
+        references: Hole
+        description: The hole at its new position
+      plate:
+        $ref: phx:$DomainEntity
+        references: Plate
+        description: The plate after the move
+```
+
+Generation derives the types `ActionTypes`, `ActionName`, `ActionParams<'nudgeHole'>` and `ActionResult<'nudgeHole'>` from it: here `ActionParams<'nudgeHole'>` is `{ holeId: Hole['id']; dx: number; dy: number }` and `ActionResult<'nudgeHole'>` is `{ hole: $Hole; plate: $Plate }`. The `description` of the action, of a param and of a result member becomes the doc comment of its generated property, so it shows in the editor wherever the action is implemented or called.
+
+## Implement it
+
+A file in `src/actions/` default-exports `phx.domain.implementActions({...})` with any subset of the declared actions. The implementation receives the validated parameters, the state the action runs on, and a context with the `expressionContext`, the domain `systems`, `getIdSequence()` for entities it creates and the typed `updates` factory. It returns the updates it wants applied and `readResult`, which reads the result from the state those updates produced, including whatever the transformers added. It never stages or commits anything.
+
+```ts
+// src/actions/nudge-hole.ts
+export default phx.domain.implementActions({
+  nudgeHole: ({ holeId, dx, dy }, state, { systems: { domain }, updates }) => {
+    // `references: Hole` types the id, but any entity id passes the runtime check, so the entity is verified here.
+    const hole = state.entities.find(entity => entity.id === holeId)
+
+    if (hole?.type !== 'Hole') {
+      throw new Error(
+        `"${holeId}" is not a hole of the plate, so it cannot be nudged. Query the plate's holes and use an id they return.`
+      )
+    }
+
+    const x = hole.x + dx
+    const y = hole.y + dy
+
+    if (Math.abs(x) > 150 || Math.abs(y) > 150) {
+      throw new Error(
+        `Nudging "${holeId}" by (${dx}, ${dy}) would put it at (${x}, ${y}), outside the plate. Keep both coordinates between -150 and 150.`
+      )
+    }
+
+    return {
+      updates: [updates.DomainEntityModification({ entityId: hole.id, stateDelta: { x, y }, updateTag: 'nudgeHole' })],
+      readResult: ({ state: nudged }) => ({
+        hole: domain.get$Entity(holeId, nudged),
+        plate: domain.getRoot$Entity(nudged),
+      }),
+    }
+  },
+})
+```
+
+Throw to reject a call: the message reaches the user through the control's hint and the assistant through the failed mutation, so say what went wrong and what to send instead. An action declared without an implementation, or an implementation of a name the spec does not declare, is a type error. A declared action without an implementation also stops the domain from initializing, and under `phoenix dev` the editor reports it as a `MISSING_ACTION_IMPLEMENTATIONS` diagnostic and does not apply the change; an implementation of an undeclared name is logged.
+
+## Run it from the UI
+
+`phx.frontend.useDomain().actionSystem.prepareAction(name, args, state)` validates `args` against the declared params and returns `{ updates, readResult }`. Hand the updates to `useUpdateControl()` like any other change: it dry-runs them for hints and commits them on click.
+
+```tsx
+export default phx.frontend.createCustomPhoenixEntityElement('NudgeControl', ({ entityId }) => {
+  const { actionSystem } = phx.frontend.useDomain()
+  const state = phx.frontend.useCommittedState()
+  const prepare = phx.frontend.useUpdateControl()
+
+  const left = prepare(actionSystem.prepareAction('nudgeHole', { holeId: entityId, dx: -20, dy: 0 }, state).updates)
+
+  return (
+    <Button disabled={left.disabled} title={left.hints} onClick={left.update}>
+      ←
+    </Button>
+  )
+})
+```
+
+`prepareAction` throws for arguments that do not fit the params, for an unknown action and for whatever the implementation rejects, so a control that may ask for an impossible move catches the error and shows its message, as the example's control does.
+
+## Expose it to the assistant
+
+Naming the action under `assistant.actions` adds a `Mutation` field with one argument per param and a `<Name>Result` type whose entity members are traversable edges. `as` renames the field, `description` replaces the action's.
+
+```yaml
+assistant:
+  actions:
+    nudgeHole:
+```
+
+```graphql
+type Mutation {
+  nudgeHole(holeId: ID!, dx: Int!, dy: Int!): NudgeHoleResult!
+}
+
+type NudgeHoleResult {
+  hole: Hole!
+  plate: Plate!
+}
+```
+
+The field runs the same `prepareAction`, applies the updates through the same validation as every other mutation, and fails with the action's message when the call is rejected.
+
+## Known gaps
+
+- `references` on a `phx:DomainEntityId` param types the parameter and the GraphQL argument, but at runtime any entity id passes the params check: the implementation verifies that the id names an entity of the expected type, as the example does.
+- Actions exist in the configurator domain only; the admin domain declares none.
+- The result of `readResult` is not validated at runtime: the generated TypeScript type and the GraphQL coercion are the checks.
+- The assistant cannot dry-run a custom mutation the way it dry-runs recipes and field options.
+- `useDomain()` types `prepareAction` with the generic action map, so the name and the arguments are not checked against your `ActionTypes` at that call site; the implementation side is fully typed.
+
+## Example
+
+Select a hole and nudge it with the arrows. A move that would leave the plate is disabled with the action's message.
+
+## Complete Implementation
+
+{/* AUTO-GENERATED SECTION: This section is automatically updated by 'phoenix story build' */}
+
+<details>
+<summary>Click to view the complete implementation files</summary>
+
+### ./spec/domain.yaml
+
+```yaml
+model:
+  latest:
+    entityTypes:
+      - Plate
+      - Hole
+    aliases:
+      RootEntity:
+        - Plate
+    shapes:
+      Hole:
+        x:
+          type: number
+        y:
+          type: number
+
+relations:
+  Plate:
+    $holes:
+      kind: allOfType
+      target: Hole
+      cardinality: 0-N
+      composedOf: true
+  Hole:
+    $plate:
+      kind: allOfType
+      target: Plate
+      cardinality: 1-1
+      composedOf: false
+
+expressions:
+  Hole:
+    $radius:
+      type: number
+
+# A named domain operation: declared once, implemented in src/actions/, run by the NudgeControl
+# element and by the assistant alike.
+actions:
+  nudgeHole:
+    description: Moves a hole by an offset on the plate; the move fails when the hole would leave the plate
+    params:
+      holeId:
+        $ref: phx:DomainEntityId
+        references: Hole
+        description: The hole to move
+      dx:
+        type: integer
+        description: Offset along the x axis, in plate units
+      dy:
+        type: integer
+        description: Offset along the y axis, in plate units
+    result:
+      hole:
+        $ref: phx:$DomainEntity
+        references: Hole
+        description: The hole at its new position
+      plate:
+        $ref: phx:$DomainEntity
+        references: Plate
+        description: The plate after the move
+
+assistant:
+  ai:
+    provider: openai
+    model: balanced
+    reasoning: low
+  entities:
+    Plate:
+      $holes:
+        description: The holes of the plate
+    Hole:
+      x:
+      y:
+  actions:
+    nudgeHole:
+
+presets:
+  - rootEntityType: 'Plate'
+    initialDomainEntities:
+      - id: 'Plate-1'
+        type: 'Plate'
+      - id: 'Hole-1'
+        type: 'Hole'
+        x: -60
+        y: 40
+      - id: 'Hole-2'
+        type: 'Hole'
+        x: 70
+        y: -50
+
+components:
+  Plate:
+    applicationConfig:
+      main:
+        layout: 'universal'
+    staticPerspectiveCamera:
+      main:
+        distance: 400
+        priority: 1
+        polarAngle: 1.2
+        azimuthAngle: -0.2
+    sceneEntityProperties:
+      main:
+        offsetX: -100
+        offsetY: -100
+        offsetZ: -10
+    sceneEntityObject:
+      Plate:
+        object:
+          $read: $render
+    detail:
+      main:
+        title: 'Plate'
+        subtitle: 'A plate with holes'
+        description: 'Select a hole to nudge it.'
+  Hole:
+    sceneEntityProperties:
+      main:
+        offsetX:
+          $read: x
+        offsetY:
+          $read: y
+    sceneEntitySelectHotspot:
+      main:
+        offsetX: 15
+        offsetY: 15
+        offsetZ: 30
+    detail:
+      main:
+        title: 'Hole'
+        subtitle: 'A hole in the plate'
+        description: 'Nudge it with the arrows; a hole cannot leave the plate.'
+    propertyPage:
+      main:
+        children:
+          - kind: propertyContainerGroup
+            props:
+              spacing: large
+            children:
+              - kind: customElement
+                props:
+                  name: NudgeControl
+```
+
+### ./src/actions/nudge-hole.ts
+
+```ts
+import { phx } from '../../.phoenix/phx.js'
+
+/** How far a hole may sit from the plate's center on either axis, in plate units. */
+const REACH = 150
+
+export default phx.domain.implementActions({
+  nudgeHole: ({ holeId, dx, dy }, state, { systems: { domain }, updates }) => {
+    // `references: Hole` types the id, but any entity id passes the runtime check, so the entity is verified here.
+    const hole = state.entities.find(entity => entity.id === holeId)
+
+    if (hole?.type !== 'Hole') {
+      throw new Error(
+        `"${holeId}" is not a hole of the plate, so it cannot be nudged. Query the plate's holes and use an id they return.`
+      )
+    }
+
+    const x = hole.x + dx
+    const y = hole.y + dy
+
+    if (Math.abs(x) > REACH || Math.abs(y) > REACH) {
+      throw new Error(
+        `Nudging "${holeId}" by (${dx}, ${dy}) would put it at (${x}, ${y}), outside the plate. Keep both coordinates between ${-REACH} and ${REACH}.`
+      )
+    }
+
+    return {
+      updates: [updates.DomainEntityModification({ entityId: hole.id, stateDelta: { x, y }, updateTag: 'nudgeHole' })],
+      readResult: ({ state: nudged }) => ({
+        hole: domain.get$Entity(holeId, nudged),
+        plate: domain.getRoot$Entity(nudged),
+      }),
+    }
+  },
+})
+```
+
+### ./src/elements/NudgeControl.tsx
+
+```tsx
+import { Button, Stack } from '@mui/material'
+
+import { PropertyContainer } from '@salsita-ai/sdk/ui'
+
+import { phx } from '../../.phoenix/phx.js'
+
+const STEP = 20
+
+/** Nudges the selected hole with the same `nudgeHole` action the assistant calls, one step at a time. */
+export default phx.frontend.createCustomPhoenixEntityElement('NudgeControl', ({ entityId }) => {
+  const { actionSystem } = phx.frontend.useDomain()
+  const state = phx.frontend.useCommittedState()
+  const prepare = phx.frontend.useUpdateControl()
+  const hole = state.entities.find(entity => entity.id === entityId)
+
+  if (hole?.type !== 'Hole') {
+    return <></>
+  }
+
+  // An action throws when the move leaves the plate; the button for that direction is then disabled with the message.
+  const nudge = (dx: number, dy: number) => {
+    try {
+      return prepare(actionSystem.prepareAction('nudgeHole', { holeId: hole.id, dx, dy }, state).updates)
+    } catch (error) {
+      return { disabled: true, hints: error instanceof Error ? error.message : String(error), update: () => {} }
+    }
+  }
+
+  const directions = [
+    { label: '←', dx: -STEP, dy: 0 },
+    { label: '→', dx: STEP, dy: 0 },
+    { label: '↑', dx: 0, dy: STEP },
+    { label: '↓', dx: 0, dy: -STEP },
+  ]
+
+  return (
+    <PropertyContainer.Item title="Nudge" description={`Moves the hole by ${STEP} units.`}>
+      <Stack direction="row" spacing={1}>
+        {directions.map(({ label, dx, dy }) => {
+          const control = nudge(dx, dy)
+
+          return (
+            <Button
+              key={label}
+              variant="outlined"
+              disabled={control.disabled}
+              title={control.hints ?? undefined}
+              onClick={event => {
+                event.stopPropagation()
+                control.update()
+              }}
+            >
+              {label}
+            </Button>
+          )
+        })}
+      </Stack>
+    </PropertyContainer.Item>
+  )
+})
+```
+
+### ./src/expressions/plate.ts
+
+```ts
+import { createPlate } from '../../../../common/plate-rendering.js'
+import { phx } from '../../.phoenix/phx.js'
+
+export default phx.domain.implementCustomExpressions({
+  Hole: {
+    $radius: () => 10,
+  },
+  Plate: {
+    $render: plate => createPlate({ features: plate.$holes }),
+  },
+})
+```
+
+</details>

package/dist/docs/other-features/side-effects.mdx

@@ -102,6 +102,32 @@ configuratorBuilder
   .buildConfig()
 ```
 
+### Hints and the AI assistant
+
+In a configurator with the AI assistant, the assistant is told the same hints: they arrive as
+`sideEffects` with the result of its changes and in the dry-runs of recipes and options, so it can
+tell the user what else happened. The hints also explain what the user changed between two messages:
+every message carries a change record of the configuration, and each of its lines ends with the hint
+of the last update that touched it, or with the `updateTag` when the update has none. Set `agentHint`
+beside `hint` when the assistant needs different wording, for example with ids or values a snackbar
+would not show:
+
+```ts
+phx.frontend.updates.DomainEntityModification({
+  entityId: oldPlate.id,
+  stateDelta: { finish: validMaterial.finish },
+  updateTag: 'fix.finish',
+  hint: msg`Material finish was adjusted`,
+  agentHint: `The finish of ${oldPlate.id} was changed to ${validMaterial.finish}, the only one this material comes in.`,
+})
+```
+
+- `agentHint` is a plain string, never shown to the user and not localized.
+- `agentHint: null` keeps the wording from the assistant while the user still gets the `hint`: the
+  update is left out of `sideEffects`, and the change record explains its line by the `updateTag`. It
+  does not hide the change itself, which the assistant can always read from the configuration.
+- `agentHint` without a `hint` tells only the assistant.
+
 ## Example
 
 Here you can see the live example!

package/dist/docs/phoenix/admin.mdx

@@ -421,7 +421,7 @@ export const handler = webhookBuilder
 
 The publishing workflow validates admin state, transforms entities, and stores JSON to S3. Configurators access published data via `ctx.publishedData` in expressions.
 
-For implementation examples, see `packages/demos/demo-finalize/src/handlers/map-published-revision-data.ts`.
+For implementation examples, see `packages/demos/demo-catalog-builder/src/handlers/map-published-chunked-data.ts`.
 
 For technical details about data transformation and storage, see [Data Sources - Published Data](?path=/docs/phoenix-data-sources--docs#published-data).
 
@@ -515,4 +515,4 @@ Ready to implement admin functionality in your Phoenix project? Here's what to e
 - **[Sessions and Access](?path=/docs/phoenix-sessions-and-access--docs)** - Understand admin authentication and permissions
 - **[Connected Data Sources](?path=/docs/phoenix-connected-data-sources--docs)** - Wire `$data` entries to Google Sheets or Excel; requires the embedded admin mode
 
-For hands-on examples, check out the finalize demo (`packages/demos/demo-finalize/`) which shows spec-driven admin using `createAdminPages` for presets and recipes. This demo demonstrates the YAML-based admin approach with publishing workflows rather than custom admin UI components.
+For hands-on examples, check out the Catalog Builder demo (`packages/demos/demo-catalog-builder/`), which shows spec-driven admin pages over connected and generated data, custom catalog pages beside them, admin model migrations, and the publishing workflow.

package/dist/docs/phoenix/best-practices.mdx

@@ -5,6 +5,7 @@
 1. **YAML is king** - 99% of configuration should be in spec/\*.yaml files
 2. **Custom code locations** (in order of preference):
    - `src/expressions/` - Computed/derived properties
+   - `src/actions/` - Named domain operations declared under `actions:`
    - `src/invariants/` - Business rule constraints
    - `src/transformers/` - Automatic state fixers
    - `src/handlers/` - Event & lifecycle handlers