@salsita-ai/sdk 0.50.0-develop.dfac20c66b → 0.50.0-develop.ea0d8e208d

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

@@ -1,11 +1,11 @@
-import{jsx as a,jsxs as t,Fragment as o}from"react/jsx-runtime";import{keyframes as e,paperClasses as r,snackbarClasses as d,styled as i,useTheme as n,useThemeProps as s}from"@mui/material";import{AnimatePresence as l,motion as p}from"motion/react";import{useCallback as b,useRef as u}from"react";import{useAccessService as c,useIsFullscreenActive as m}from"#package/react-sdk";import{attrf as h,commonStyles as y,numToPx as g,useInvalidateScrollTimeline as f,useIsEmpty as k,useResponsive as x}from"#package/ui-sdk";import{usePreview as v}from"../../../configurator-context/index.js";import{LayoutSlots as S}from"../slots/index.js";import{DesktopPreview as E}from"./DesktopPreview.js";import{useSceneSafeArea as w}from"./use-scene-safe-area.js";let R="PhxDesktopSidebar",B="minimalist",$="split",C="visible",D="hidden",T={Root:i("div",{name:R,slot:"root",shouldForwardProp:a=>"ownerState"!==a})(({ownerState:a})=>[`
+import{jsx as a,jsxs as t,Fragment as o}from"react/jsx-runtime";import{keyframes as e,paperClasses as r,snackbarClasses as d,styled as i,useTheme as n,useThemeProps as s}from"@mui/material";import{AnimatePresence as l,motion as p}from"motion/react";import{useCallback as b,useRef as u}from"react";import{useAccessService as c,useIsFullscreenActive as m}from"#package/react-sdk";import{attrf as h,commonStyles as y,numToPx as g,useInvalidateScrollTimeline as f,useIsEmpty as x,useResponsive as k}from"#package/ui-sdk";import{usePreview as v}from"../../../configurator-context/index.js";import{ASSISTANT_PANEL_SLOT as S,AssistantPanel as E,useIsAssistantPanelOpen as w}from"../../assistant/index.js";import{LayoutSlots as R}from"../slots/index.js";import{DesktopPreview as $}from"./DesktopPreview.js";import{useSceneSafeArea as B}from"./use-scene-safe-area.js";let C="PhxDesktopSidebar",D="minimalist",T="split",I="visible",A="hidden",P="assistant",F={Root:i("div",{name:C,slot:"root",shouldForwardProp:a=>"ownerState"!==a})(({ownerState:a})=>[`
       --phx-sidebar-background: ${a.background};
       --phx-sidebar-border: ${a.border};
       --phx-sidebar-filter: ${a.filter};
       --phx-sidebar-padding: ${a.padding};
       --phx-sidebar-radius: ${a.borderRadius}px;
       --phx-sidebar-scrollable-indicator-background: ${a.scrollableIndicatorBackground};
-    `,{borderRadius:"var(--phx-sidebar-radius)",display:"grid",filter:"var(--phx-sidebar-filter)",gridTemplateRows:"min-content minmax(0, 1fr) min-content",inlineSize:a.width,position:"relative","& > *":{pointerEvents:"auto"},"@container style(--inspect: on)":{"--phx-sidebar-background":"hsl(from gold h s l / 50%)"},[`&[data-sidebar*="${C}"]`]:{opacity:1},[`&[data-sidebar*="${D}"]`]:{opacity:0}}]),Tabs:i("div",{name:R,slot:"tabs",shouldForwardProp:a=>"ownerState"!==a})(({theme:{spacing:a}})=>({insetBlockStart:0,insetInlineEnd:"100%",maxInlineSize:150,paddingInlineEnd:a(2),position:"absolute","&:is(:empty)":{padding:0},[`.${r.root}`]:{boxShadow:"none"}})),Header:i("header",{name:R,slot:"header",shouldForwardProp:a=>"ownerState"!==a})({background:"var(--phx-sidebar-background)",border:"var(--phx-sidebar-border)",borderBlockEnd:0,borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",paddingBlock:"calc(0.6 * var(--phx-sidebar-padding))",paddingInline:"var(--phx-sidebar-padding)","&:is(:empty)":{border:0,paddingBlock:0}}),Body:i("div",{name:R,slot:"body",shouldForwardProp:a=>"ownerState"!==a})(({ownerState:a})=>({background:"var(--phx-sidebar-background)",border:"var(--phx-sidebar-border)",borderBlockStart:0,borderBlockEnd:0,display:"grid",position:"relative",'[data-layout*="slot[sidebar]"]:where(:has([data-sidebar="slot[header]"])) &':{...a.isHeaderEmpty&&{borderBlockStart:"var(--phx-sidebar-border)",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",paddingBlockStart:"var(--phx-sidebar-padding)"}},'&:has([data-sidebar*="slot[content]"]:empty)':{...a.isContentEmpty&&{paddingBlock:0}},[`[data-sidebar*="${B}"] &`]:{...a.isContentEmpty&&{border:0}},[`[data-sidebar*="${$}"] &`]:{borderBlockEnd:"var(--phx-sidebar-border)",borderEndStartRadius:"inherit",borderEndEndRadius:"inherit",paddingBlockEnd:"var(--phx-sidebar-padding)"}})),Content:i("div",{name:R,slot:"content",shouldForwardProp:a=>"ownerState"!==a})(({ownerState:a,theme:{spacing:t}})=>({...y.layout.normalizeScrollableContainer,alignContent:"start",borderRadius:"inherit",display:"grid",gap:t(3),padding:"var(--phx-sidebar-padding)","@supports (animation-timeline: scroll())":{"&[data-scrollable]":{scrollTimeline:"--phx-sidebar-timeline y","&::after, &::before":{animation:`${y.keyframes.fadeIn} both`,animationTimeline:"--phx-sidebar-timeline",background:"var(--phx-sidebar-scrollable-indicator-background)",backgroundRepeat:"no-repeat",content:'""',display:"block",insetInline:0,opacity:0,pointerEvents:"none",position:"absolute",zIndex:1},"&::after":{animationDirection:"reverse",animationRange:`calc(100% - ${t(4)}) 100%`,borderEndStartRadius:"inherit",borderEndEndRadius:"inherit",insetBlockStart:"50%",insetBlockEnd:0,scale:"1 -1"},"&::before":{animationRange:`0 ${t(4)}`,borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",insetBlockStart:0,insetBlockEnd:"50%"}}},"&:is(:empty)":{paddingBlock:0},'[data-layout*="slot[sidebar]"] &':{...a.isHeaderEmpty&&{paddingBlockStart:0,"&::before":{borderStartStartRadius:0,borderStartEndRadius:0,insetBlockStart:"var(--phx-sidebar-padding)"}}},[`[data-sidebar*="${$}"] &`]:{paddingBlockEnd:0,"&::after":{borderEndStartRadius:0,borderEndEndRadius:0,insetBlockEnd:"var(--phx-sidebar-padding)"}}})),Footer:i("footer",{name:R,slot:"footer",shouldForwardProp:a=>"ownerState"!==a})(({ownerState:a,theme:{palette:t,spacing:o}})=>({background:"var(--phx-sidebar-background)",border:"var(--phx-sidebar-border)",borderBlockStart:`1px solid ${t.divider}`,borderEndStartRadius:"inherit",borderEndEndRadius:"inherit",padding:"var(--phx-sidebar-padding)","&:is(:empty)":{border:0,paddingBlock:0},[`[data-sidebar*="${B}"] &`]:{...a.isContentEmpty&&{borderBlockStart:"var(--phx-sidebar-border)",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit"}},[`[data-sidebar*="${$}"] &`]:{borderBlockStart:"var(--phx-sidebar-border)",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",marginBlockStart:o(2)}}))};export const PhxDesktopLayoutName="PhxDesktopLayout";let I="PhxDesktopLayout",A=i(p.div,{name:I,slot:"root",shouldForwardProp:a=>"ownerState"!==a})(({ownerState:a,theme:{spacing:t}})=>{let o=e({"0%":{marginInlineEnd:0},"100%":{marginInlineEnd:t(-2)}});return[`
+    `,{borderRadius:"var(--phx-sidebar-radius)",display:"grid",filter:"var(--phx-sidebar-filter)",gridTemplateRows:"min-content minmax(0, 1fr) min-content",inlineSize:a.width,position:"relative","& > *":{pointerEvents:"auto"},"@container style(--inspect: on)":{"--phx-sidebar-background":"hsl(from gold h s l / 50%)"},[`&[data-sidebar*="${I}"]`]:{opacity:1},[`&[data-sidebar*="${A}"]`]:{opacity:0},[`&[data-sidebar*="${P}"] > :not([data-sidebar="${S}"])`]:{visibility:"hidden"}}]),Tabs:i("div",{name:C,slot:"tabs",shouldForwardProp:a=>"ownerState"!==a})(({theme:{spacing:a}})=>({insetBlockStart:0,insetInlineEnd:"100%",maxInlineSize:150,paddingInlineEnd:a(2),position:"absolute","&:is(:empty)":{padding:0},[`.${r.root}`]:{boxShadow:"none"}})),Header:i("header",{name:C,slot:"header",shouldForwardProp:a=>"ownerState"!==a})({background:"var(--phx-sidebar-background)",border:"var(--phx-sidebar-border)",borderBlockEnd:0,borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",paddingBlock:"calc(0.6 * var(--phx-sidebar-padding))",paddingInline:"var(--phx-sidebar-padding)","&:is(:empty)":{border:0,paddingBlock:0}}),Body:i("div",{name:C,slot:"body",shouldForwardProp:a=>"ownerState"!==a})(({ownerState:a})=>({background:"var(--phx-sidebar-background)",border:"var(--phx-sidebar-border)",borderBlockStart:0,borderBlockEnd:0,display:"grid",position:"relative",'[data-layout*="slot[sidebar]"]:where(:has([data-sidebar="slot[header]"])) &':{...a.isHeaderEmpty&&{borderBlockStart:"var(--phx-sidebar-border)",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",paddingBlockStart:"var(--phx-sidebar-padding)"}},'&:has([data-sidebar*="slot[content]"]:empty)':{...a.isContentEmpty&&{paddingBlock:0}},[`[data-sidebar*="${D}"] &`]:{...a.isContentEmpty&&{border:0}},[`[data-sidebar*="${T}"] &`]:{borderBlockEnd:"var(--phx-sidebar-border)",borderEndStartRadius:"inherit",borderEndEndRadius:"inherit",paddingBlockEnd:"var(--phx-sidebar-padding)"}})),Content:i("div",{name:C,slot:"content",shouldForwardProp:a=>"ownerState"!==a})(({ownerState:a,theme:{spacing:t}})=>({...y.layout.normalizeScrollableContainer,alignContent:"start",borderRadius:"inherit",display:"grid",gap:t(3),padding:"var(--phx-sidebar-padding)","@supports (animation-timeline: scroll())":{"&[data-scrollable]":{scrollTimeline:"--phx-sidebar-timeline y","&::after, &::before":{animation:`${y.keyframes.fadeIn} both`,animationTimeline:"--phx-sidebar-timeline",background:"var(--phx-sidebar-scrollable-indicator-background)",backgroundRepeat:"no-repeat",content:'""',display:"block",insetInline:0,opacity:0,pointerEvents:"none",position:"absolute",zIndex:1},"&::after":{animationDirection:"reverse",animationRange:`calc(100% - ${t(4)}) 100%`,borderEndStartRadius:"inherit",borderEndEndRadius:"inherit",insetBlockStart:"50%",insetBlockEnd:0,scale:"1 -1"},"&::before":{animationRange:`0 ${t(4)}`,borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",insetBlockStart:0,insetBlockEnd:"50%"}}},"&:is(:empty)":{paddingBlock:0},'[data-layout*="slot[sidebar]"] &':{...a.isHeaderEmpty&&{paddingBlockStart:0,"&::before":{borderStartStartRadius:0,borderStartEndRadius:0,insetBlockStart:"var(--phx-sidebar-padding)"}}},[`[data-sidebar*="${T}"] &`]:{paddingBlockEnd:0,"&::after":{borderEndStartRadius:0,borderEndEndRadius:0,insetBlockEnd:"var(--phx-sidebar-padding)"}}})),Footer:i("footer",{name:C,slot:"footer",shouldForwardProp:a=>"ownerState"!==a})(({ownerState:a,theme:{palette:t,spacing:o}})=>({background:"var(--phx-sidebar-background)",border:"var(--phx-sidebar-border)",borderBlockStart:`1px solid ${t.divider}`,borderEndStartRadius:"inherit",borderEndEndRadius:"inherit",padding:"var(--phx-sidebar-padding)","&:is(:empty)":{border:0,paddingBlock:0},[`[data-sidebar*="${D}"] &`]:{...a.isContentEmpty&&{borderBlockStart:"var(--phx-sidebar-border)",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit"}},[`[data-sidebar*="${T}"] &`]:{borderBlockStart:"var(--phx-sidebar-border)",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",marginBlockStart:o(2)}}))};export const PhxDesktopLayoutName="PhxDesktopLayout";let j="PhxDesktopLayout",z=i(p.div,{name:j,slot:"root",shouldForwardProp:a=>"ownerState"!==a})(({ownerState:a,theme:{spacing:t}})=>{let o=e({"0%":{marginInlineEnd:0},"100%":{marginInlineEnd:t(-2)}});return[`
       --inspect: off;  // 🕹️ inspection mode toggle
 
       --phx-layout-sidebar-track-size: ${g(a.sidebarWidth)};
@@ -38,12 +38,12 @@ import{jsx as a,jsxs as t,Fragment as o}from"react/jsx-runtime";import{keyframes
         [bottom-start]
         min-content
         [bottom-end full-end]
-      `,inset:0,isolation:"isolate",pointerEvents:"none",position:"absolute","@container style(--inspect: on)":{'& > *, & > * > *, [data-layout*="slot[body.footer]"] > *':{outline:"2px solid hsl(from tomato h s l / 50%)"}},'[data-layout*="interactive"]':{"& > *":{pointerEvents:"auto"}},'[data-layout*="slot[header]"]':{gridArea:"top-start / main-start / top-end / sidebar-end"},'[data-layout*="slot[body]"]':{containerType:"size",display:"grid",gridArea:"main",gridRowStart:"top-end",gridTemplateRows:"min-content 1fr min-content"},'[data-layout*="slot[body.top]"]':{gridArea:"1 / 1 / 2 / -1","& > *":{...y.transition.fadeIn}},'[data-layout*="slot[body.safeSceneArea]"]':{gridArea:"1 / 1 / 3 / -1","@container style(--inspect: on)":{background:"hsl(from lime h s l / 50%)"}},'[data-layout*="slot[body.bottom]"]':{alignItems:"end",display:"grid",gap:t(2),gridArea:"3 / 1 / 4 / -1",gridTemplateColumns:"minmax(0, auto) minmax(60px, 1fr)",justifyContent:"start",position:"relative",'&:has([data-layout="slot[body.viewControls]"]:empty)':{gap:0,gridTemplateColumns:"repeat(2, auto)"}},'[data-layout="slot[body.toolbar]"]':{animation:`${o} auto linear both`,animationTimeline:"scroll(self inline)",display:"flex",margin:t(-2),overflowX:"scroll",overscrollBehavior:"contain",padding:t(2),scrollbarWidth:"none","&::after":{content:'""'}},'[data-layout="slot[body.toolControls]"]':{insetBlockEnd:`calc(100% + ${t(6)})`,position:"absolute","& > *":{...y.transition.fadeIn,transitionDuration:"300ms"}},'[data-layout="slot[body.viewControls]"]':{},'[data-layout="slot[body.logo]"], [data-layout="slot[body.sideEffects]"]':{insetBlockEnd:`calc(100% + ${t(2)})`,position:"absolute"},'[data-layout="slot[body.sideEffects]"]':{insetInline:0,[`.${d.root}`]:{inset:"unset",insetBlockEnd:0,position:"absolute"}},'[data-layout*="slot[sidebar]"]':{display:"grid",gridArea:"top-start / sidebar-start / main-end / sidebar-end",gridTemplateRows:"minmax(0, auto)"},'[data-layout*="slot[footer]"]':{display:"grid",gap:"var(--phx-layout-gap)",gridArea:"bottom-start / full-start / bottom-end / full-end"},'&:has([data-header*="fixed"])':{'[data-layout*="slot[header]"]':{gridArea:"full-start / full-start / top-end / full-end"},'[data-layout*="slot[body]"]':{gridRowStart:"main-start"},'[data-layout*="slot[sidebar]"]':{gridRow:"main-start / main-end"}},'&:has([data-header*="floating"])':{'[data-layout*="slot[header]"]':{gridColumnEnd:"main-end"}},[`&:has([data-sidebar*="${B}"])`]:{'[data-layout*="slot[sidebar]"]':{alignContent:"end",gridRow:"main-start / main-end"}},[`&:has([data-header*="floating"]):has([data-sidebar*="${B}"])`]:{'[data-layout*="slot[header]"]':{gridColumnEnd:"sidebar-end"},'[data-layout*="slot[sidebar]"]':{gridRowStart:"top-end"}},[`&:has([data-sidebar*="${D}"])`]:{"--phx-layout-gap":0,"--phx-layout-sidebar-track-size":0,'[data-layout*="slot[sidebar]"]':{overflow:"hidden"}}}]}),P=i("div")({gridArea:"1 / 1 / -1 / -1"});export const DesktopLayout=()=>{let e=u(null),r=u(null),{palette:d,shape:i,spacing:p}=n(),{sidebarWidth:y="clamp(360px, 30cqi, 400px)"}=s({props:{},name:I}),{background:g=d.background.paper,border:F=0,borderRadius:j=i.sidebarBorderRadius??i.borderRadius,filter:z=`
+      `,inset:0,isolation:"isolate",pointerEvents:"none",position:"absolute","@container style(--inspect: on)":{'& > *, & > * > *, [data-layout*="slot[body.footer]"] > *':{outline:"2px solid hsl(from tomato h s l / 50%)"}},'[data-layout*="interactive"]':{"& > *":{pointerEvents:"auto"}},'[data-layout*="slot[header]"]':{gridArea:"top-start / main-start / top-end / sidebar-end"},'[data-layout*="slot[body]"]':{containerType:"size",display:"grid",gridArea:"main",gridRowStart:"top-end",gridTemplateRows:"min-content 1fr min-content"},'[data-layout*="slot[body.top]"]':{gridArea:"1 / 1 / 2 / -1","& > *":{...y.transition.fadeIn}},'[data-layout*="slot[body.safeSceneArea]"]':{gridArea:"1 / 1 / 3 / -1","@container style(--inspect: on)":{background:"hsl(from lime h s l / 50%)"}},'[data-layout*="slot[body.bottom]"]':{alignItems:"end",display:"grid",gap:t(2),gridArea:"3 / 1 / 4 / -1",gridTemplateColumns:"minmax(0, auto) minmax(60px, 1fr)",justifyContent:"start",position:"relative",'&:has([data-layout="slot[body.viewControls]"]:empty)':{gap:0,gridTemplateColumns:"repeat(2, auto)"}},'[data-layout="slot[body.toolbar]"]':{animation:`${o} auto linear both`,animationTimeline:"scroll(self inline)",display:"flex",margin:t(-2),overflowX:"scroll",overscrollBehavior:"contain",padding:t(2),scrollbarWidth:"none","&::after":{content:'""'}},'[data-layout="slot[body.toolControls]"]':{insetBlockEnd:`calc(100% + ${t(6)})`,position:"absolute","& > *":{...y.transition.fadeIn,transitionDuration:"300ms"}},'[data-layout="slot[body.viewControls]"]':{},'[data-layout="slot[body.logo]"], [data-layout="slot[body.sideEffects]"]':{insetBlockEnd:`calc(100% + ${t(2)})`,position:"absolute"},'[data-layout="slot[body.sideEffects]"]':{insetInline:0,[`.${d.root}`]:{inset:"unset",insetBlockEnd:0,position:"absolute"}},'[data-layout*="slot[sidebar]"]':{display:"grid",gridArea:"top-start / sidebar-start / main-end / sidebar-end",gridTemplateRows:"minmax(0, auto)"},'[data-layout*="slot[footer]"]':{display:"grid",gap:"var(--phx-layout-gap)",gridArea:"bottom-start / full-start / bottom-end / full-end"},'&:has([data-header*="fixed"])':{'[data-layout*="slot[header]"]':{gridArea:"full-start / full-start / top-end / full-end"},'[data-layout*="slot[body]"]':{gridRowStart:"main-start"},'[data-layout*="slot[sidebar]"]':{gridRow:"main-start / main-end"}},'&:has([data-header*="floating"])':{'[data-layout*="slot[header]"]':{gridColumnEnd:"main-end"}},[`&:has([data-sidebar*="${D}"])`]:{'[data-layout*="slot[sidebar]"]':{alignContent:"end",gridRow:"main-start / main-end"}},[`&:has([data-header*="floating"]):has([data-sidebar*="${D}"])`]:{'[data-layout*="slot[header]"]':{gridColumnEnd:"sidebar-end"},'[data-layout*="slot[sidebar]"]':{gridRowStart:"top-end"}},[`&:has([data-sidebar*="${P}"])`]:{'[data-layout*="slot[sidebar]"]':{alignContent:"stretch"}},[`&:has([data-sidebar*="${A}"])`]:{"--phx-layout-gap":0,"--phx-layout-sidebar-track-size":0,'[data-layout*="slot[sidebar]"]':{overflow:"hidden"}}}]}),H=i("div")({gridArea:"1 / 1 / -1 / -1"});export const DesktopLayout=()=>{let e=u(null),r=u(null),{palette:d,shape:i,spacing:p}=n(),{sidebarWidth:y="clamp(360px, 30cqi, 400px)"}=s({props:{},name:j}),{background:g=d.background.paper,border:S=0,borderRadius:L=i.sidebarBorderRadius??i.borderRadius,filter:W=`
       drop-shadow(0 1px 1.5px hsl(from ${d.common.black} h s l / 12%))
       drop-shadow(0 1px 0.5px hsl(from ${d.common.black} h s l / 14%))
       drop-shadow(0 2px 0.5px hsl(from ${d.common.black} h s l / 20%))
-    `,padding:H=p(2.5),scrollableIndicatorBackground:L=`linear-gradient(
+    `,padding:q=p(2.5),scrollableIndicatorBackground:M=`linear-gradient(
       180deg,
       hsl(from black h s l / 12%),
       hsl(from black h s l / 0%) 8px
-    )`}=s({props:{},name:R}),{hasMiniSidebar:W,hasSplitSidebar:q}=S.useSidebarContent(),{accessInfo:M}=c(),N=m(),{isPreview:V,isHidden:X}=v(),G=!X&&!V,J=!N,{setCanvasPadding:K,setAnimating:O}=x(),{containerRef:Q,safeAreaRef:U,update:Y}=w(K,W,G),Z=b(()=>{O(!0)},[O]),_=b(()=>{O(!1),Y()},[O,Y]),aa=G&&J,at=k(e,{disabled:!aa}),ao=k(r,{disabled:!aa});f(r,{disabled:!aa});let ae={background:g,border:F,borderRadius:j,filter:z,isHeaderEmpty:at,isContentEmpty:ao,padding:H,scrollableIndicatorBackground:L,width:y};return a(o,{children:t(l,{mode:"wait",children:[!X&&V&&a(E,{},"preview-layout"),G&&t(A,{layoutId:"ui-layout",layout:!0,ownerState:{sidebarWidth:y},"data-layout":h({state:{initial:!N,fullscreen:N}}),onLayoutAnimationStart:Z,onLayoutAnimationComplete:_,children:[a(P,{ref:Q}),a("header",{"data-layout":"slot[header]",children:a(S.DesktopHeader,{})}),t("main",{"data-layout":"slot[body]",children:[a("div",{"data-layout":"slot[body.top] interactive",children:a(S.DesktopCallToAction,{})}),a("div",{ref:U,"data-layout":"slot[body.safeSceneArea]"}),t("div",{"data-layout":"slot[body.bottom] interactive",children:[a("div",{"data-layout":"slot[body.toolbar]",children:a(S.DesktopToolbar,{})}),a("div",{"data-layout":"slot[body.toolControls]",children:!N&&a(S.DesktopToolControls,{})}),a("div",{"data-layout":"slot[body.viewControls]",children:a(S.DesktopViewControls,{})}),a("div",{"data-layout":"slot[body.logo]",children:a(S.DesktopPoweredBy,{})}),a("div",{"data-layout":"slot[body.sideEffects]",children:a(S.DesktopSnackbarsRoot,{})})]})]}),a("aside",{"data-layout":"slot[sidebar]",children:t(T.Root,{ownerState:ae,"data-sidebar":h({variant:{[`${B}`]:W,[`${$}`]:q},state:{[`${C}`]:J,[`${D}`]:!J}}),inert:J?void 0:"",children:[a(T.Tabs,{ownerState:ae,"data-sidebar":"slot[tabs]",children:a(S.DesktopSidebarTabs,{})}),a(T.Header,{ref:e,ownerState:ae,"data-sidebar":"slot[header]",children:a(S.DesktopSidebarBackButton,{})}),a(T.Body,{ownerState:ae,"data-sidebar":"slot[body]",children:a(T.Content,{ref:r,ownerState:ae,"data-sidebar":"slot[content]",children:a(S.DesktopSidebarContent,{})})}),a(T.Footer,{ownerState:ae,"data-sidebar":"slot[footer]",children:a(S.DesktopSidebarFooter,{})})]})}),t("footer",{"data-layout":"slot[footer] interactive",children:[M.viewMode&&!N&&a(S.DesktopReadonlyBanner,{}),a(S.DesktopFooter,{})]})]},"interface-layout")]})})};
+    )`}=s({props:{},name:C}),{hasMiniSidebar:N,hasSplitSidebar:V}=R.useSidebarContent(),X=w(),{accessInfo:G}=c(),J=m(),{isPreview:K,isHidden:O}=v(),Q=!O&&!K,U=!J,{setCanvasPadding:Y,setAnimating:Z}=k(),{containerRef:_,safeAreaRef:aa,update:at}=B(Y,N&&!X,Q),ao=b(()=>{Z(!0)},[Z]),ae=b(()=>{Z(!1),at()},[Z,at]),ar=Q&&U,ad=x(e,{disabled:!ar}),ai=x(r,{disabled:!ar});f(r,{disabled:!ar});let an={background:g,border:S,borderRadius:L,filter:W,isHeaderEmpty:ad,isContentEmpty:ai,padding:q,scrollableIndicatorBackground:M,width:y};return a(o,{children:t(l,{mode:"wait",children:[!O&&K&&a($,{},"preview-layout"),Q&&t(z,{layoutId:"ui-layout",layout:!0,ownerState:{sidebarWidth:y},"data-layout":h({state:{initial:!J,fullscreen:J}}),onLayoutAnimationStart:ao,onLayoutAnimationComplete:ae,children:[a(H,{ref:_}),a("header",{"data-layout":"slot[header]",children:a(R.DesktopHeader,{})}),t("main",{"data-layout":"slot[body]",children:[a("div",{"data-layout":"slot[body.top] interactive",children:a(R.DesktopCallToAction,{})}),a("div",{ref:aa,"data-layout":"slot[body.safeSceneArea]"}),t("div",{"data-layout":"slot[body.bottom] interactive",children:[a("div",{"data-layout":"slot[body.toolbar]",children:a(R.DesktopToolbar,{})}),a("div",{"data-layout":"slot[body.toolControls]",children:!J&&a(R.DesktopToolControls,{})}),a("div",{"data-layout":"slot[body.viewControls]",children:a(R.DesktopViewControls,{})}),a("div",{"data-layout":"slot[body.logo]",children:a(R.DesktopPoweredBy,{})}),a("div",{"data-layout":"slot[body.sideEffects]",children:a(R.DesktopSnackbarsRoot,{})})]})]}),a("aside",{"data-layout":"slot[sidebar]",children:t(F.Root,{ownerState:an,"data-sidebar":h({variant:{[`${D}`]:N,[`${T}`]:V},state:{[`${I}`]:U,[`${A}`]:!U,[`${P}`]:X}}),inert:U?void 0:"",children:[a(F.Tabs,{ownerState:an,"data-sidebar":"slot[tabs]",children:a(R.DesktopSidebarTabs,{})}),a(F.Header,{ref:e,ownerState:an,"data-sidebar":"slot[header]",children:a(R.DesktopSidebarBackButton,{})}),a(F.Body,{ownerState:an,"data-sidebar":"slot[body]",children:a(F.Content,{ref:r,ownerState:an,"data-sidebar":"slot[content]",children:a(R.DesktopSidebarContent,{})})}),a(F.Footer,{ownerState:an,"data-sidebar":"slot[footer]",children:a(R.DesktopSidebarFooter,{})}),a(E,{})]})}),t("footer",{"data-layout":"slot[footer] interactive",children:[G.viewMode&&!J&&a(R.DesktopReadonlyBanner,{}),a(R.DesktopFooter,{})]})]},"interface-layout")]})})};

package/dist/configurator/ui/configurator-layout/universal/MobileLayout.d.ts

@@ -86,6 +86,8 @@ declare module '@mui/material/styles' {
 }
 interface LayoutOwnerState {
     readonly isContentEmpty?: boolean;
+    /** Height of the assistant panel while its input has focus: what the on-screen keyboard leaves free. */
+    readonly assistantFocusHeight?: number;
 }
 export interface ThemeableMobileLayoutProps extends LayoutOwnerState {
     /**

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/complex-use-cases/filtered-controls-with-fix-dialog.mdx

@@ -104,106 +104,92 @@ All inputs include countersinkNotAvailable, as that is fixable by auto fix dialo
 And corresponding transformers
 
 ```typescript
-configuratorBuilder
-  .withTransformers(() => [
-    {
-      priority: 3,
-      transformer: (updates, currentState) => {
-        if (updates.length > 1) {
-          return updates
-        }
-
-        const materialUpdate = updates.find(
-          (u): u is ComponentModification<MaterialSwatchComponent> =>
-            u.kind === 'modifyComponent' && u.updateTag === 'selectSwatch-material'
-        )
-
-        if (!materialUpdate) {
-          return updates
-        }
-
-        const plate = currentState.domainState.entities.find(Plate.is)!
-        const newMaterial = materialUpdate.writableState.selectedSwatchKey
-
-        const isAvailable = availableMaterials.some(
-          state =>
-            state.material === newMaterial && state.finish === plate.finish && state.thickness === plate.thickness
-        )
-
-        if (isAvailable) {
-          return updates
-        }
-
-        const similarMaterial = availableMaterials.find(m => m.material === newMaterial)
-
-        if (!similarMaterial) {
-          return updates
-        }
-
-        const fixUpdate = updateFactory.DomainEntityModification({
-          entityId: plate.id,
-          stateDelta: {
-            material: similarMaterial.material,
-            finish: similarMaterial.finish,
-            thickness: similarMaterial.thickness,
-          },
-          updateTag: 'fix.material',
-        })
-
-        return [fixUpdate]
+// src/transformers/fix-finish.ts
+import { availableMaterials } from '../_shared/available-materials.js'
+
+export default phx.frontend.transformerBuilder.when
+  .entity(['Plate'])
+  .modified({ atFields: ['finish'] })
+  .then.overrideMatchingUpdate(({ update, getOld$Entity }) => {
+    const plate = getOld$Entity()
+    const newFinish = update.stateDelta.finish
+
+    const isAvailable = availableMaterials.some(
+      state => state.material === plate.material && state.finish === newFinish && state.thickness === plate.thickness
+    )
+
+    if (isAvailable) {
+      return [update]
+    }
+
+    const similarMaterial = availableMaterials.find(m => m.finish === newFinish && m.material === plate.material)
+
+    if (!similarMaterial) {
+      return [update]
+    }
+
+    const fixUpdate = phx.frontend.updates.DomainEntityModification({
+      entityId: plate.id,
+      stateDelta: {
+        material: similarMaterial.material,
+        finish: similarMaterial.finish,
+        thickness: similarMaterial.thickness,
       },
-    },
-    {
-      priority: 3.1,
-      transformer: (updates, currentState) => {
-        if (updates.length > 1) {
-          return updates
-        }
-
-        const materialUpdate = updates.find(
-          (u): u is ComponentModification<AttributeSelectionComponent> =>
-            u.kind === 'modifyComponent' &&
-            u.updateTag === 'AttributeSelect.update' &&
-            (u.componentInstance.instanceName as string) === 'finish'
-        )
-
-        if (!materialUpdate) {
-          return updates
-        }
-
-        const plate = currentState.domainState.entities.find(Plate.is)!
-        const newFinish = materialUpdate.writableState.value
-
-        const isAvailable = availableMaterials.some(
-          state =>
-            state.material === plate.material && state.finish === newFinish && state.thickness === plate.thickness
-        )
-
-        if (isAvailable) {
-          return updates
-        }
-
-        const similarMaterial = availableMaterials.find(m => m.finish === newFinish && m.material === plate.material)
-
-        if (!similarMaterial) {
-          return updates
-        }
-
-        const fixUpdate = updateFactory.DomainEntityModification({
-          entityId: plate.id,
-          stateDelta: {
-            material: similarMaterial.material,
-            finish: similarMaterial.finish,
-            thickness: similarMaterial.thickness,
-          },
-          updateTag: 'fix.brushed',
-        })
-
-        return [fixUpdate]
+      updateTag: 'fix.brushed',
+    })
+
+    return [fixUpdate]
+  })
+  .build('fix-finish')
+```
+
+```typescript
+// src/transformers/fix-material.ts
+import { availableMaterials } from '../_shared/available-materials.js'
+
+export default phx.frontend.transformerBuilder.when
+  .entity(['Plate'])
+  .modified({ atFields: ['material'] })
+  .then.overrideMatchingUpdate(({ update, getOld$Entity }) => {
+    const plate = getOld$Entity()
+    const newMaterial = update.stateDelta.material
+
+    const isAvailable = availableMaterials.some(
+      state => state.material === newMaterial && state.finish === plate.finish && state.thickness === plate.thickness
+    )
+
+    if (isAvailable) {
+      return [update]
+    }
+
+    const similarMaterial = availableMaterials.find(m => m.material === newMaterial)
+
+    if (!similarMaterial) {
+      return [update]
+    }
+
+    const fixUpdate = phx.frontend.updates.DomainEntityModification({
+      entityId: plate.id,
+      stateDelta: {
+        material: similarMaterial.material,
+        finish: similarMaterial.finish,
+        thickness: similarMaterial.thickness,
       },
-    },
-  ])
-  .buildConfig()
+      updateTag: 'fix.material',
+    })
+
+    return [fixUpdate]
+  })
+  .build('fix-material')
+```
+
+Each file in `src/transformers/` default-exports one transformer and is picked up by its location. The `transformers` section of the spec turns it on by name. For a transformer made with `build(name)` that is the name passed to `build(...)`, which must match the file name with case and dashes ignored (`fix-finish.ts` and `fixFinish` match). For a plain-function export it is the file name:
+
+```yaml
+# spec/application.yaml
+transformers:
+  - name: fix-finish
+  - name: fix-material
 ```
 
 And FilteredControls

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

@@ -18,7 +18,7 @@ The `createResetSelectionOnNavigationTransformer` automatically deselects entiti
 
 ## Guide
 
-The `createResetSelectionOnNavigationTransformer` is added through the `.withTransformers()` method. It automatically injects a deselect update when navigating to specified states.
+The `createResetSelectionOnNavigationTransformer` is added as a file in `src/transformers/`. It automatically injects a deselect update when navigating to specified states.
 
 ### Step 1: Import the transformer
 
@@ -28,19 +28,25 @@ Import the transformer function from the domain package:
 import { createResetSelectionOnNavigationTransformer } from '@salsita-ai/sdk/domain'
 ```
 
-### Step 2: Add the transformer to your config
+### Step 2: Add the transformer to your project
 
-Use the `.withTransformers()` method on the builder:
+Create the transformer in a file under `src/transformers/`:
 
 ```typescript
-const config = configuratorBuilder
-  .withTransformers(ctx => [
-    {
-      priority: 32,
-      transformer: createResetSelectionOnNavigationTransformer([ApplicationTypes.NavigationState.SecondStep], ctx),
-    },
-  ])
-  .buildConfig()
+// src/transformers/reset-selection.ts
+import { createResetSelectionOnNavigationTransformer } from '@salsita-ai/sdk/domain'
+
+export default phx.frontend.createTransformer(ctx =>
+  createResetSelectionOnNavigationTransformer([phx.applicationTypes.NavigationState.SecondStep], ctx)
+)
+```
+
+Each file in `src/transformers/` default-exports one transformer and is picked up by its location. The `transformers` section of the spec turns it on by name. For a transformer made with `build(name)` that is the name passed to `build(...)`, which must match the file name with case and dashes ignored (`fix-finish.ts` and `fixFinish` match). For a plain-function export it is the file name:
+
+```yaml
+# spec/application.yaml
+transformers:
+  - name: reset-selection
 ```
 
 The transformer takes two arguments:
@@ -97,7 +103,7 @@ When the transformer triggers, any selected entity is deselected automatically.
  *
  * @param navigationStates - Array of navigation state names that trigger deselection
  * @param ctx - Domain context providing access to the navigation system
- * @returns Update transformer that can be registered in withTransformers
+ * @returns Update transformer to return from a transformer file in src/transformers/
  *
  * @example
  * // Deselect when entering the summary step

package/dist/docs/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-09T06:37:36.994Z",
+  "generatedAt": "2026-10-12T21:22:38.378Z",
   "categories": [
     {
       "name": "Phoenix",

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

@@ -78,24 +78,22 @@ Your custom component has full access to the Material-UI theme and SDK utilities
 
 ### Step 3: Attach the component to your entity
 
-Use the configurator builder to attach your custom price component to the root entity:
+Attach your custom price component to the root entity in a file under `src/components/`. The generated code picks the
+file up by its location and registers its default export:
 
 ```typescript
-const config = configuratorBuilder
-  .withComponentOptics([
-    attachComponent
-      .withEntity('Scene')
-      .withComponent(customPriceFooterComponent, 'default')
-      .attach(
-        memoEval(
-          (s) => [s.$price],
-          (price) => ({
-            node: <AppPrice price={price} />,
-          })
-        )
-      ),
-  ])
-  .buildConfig()
+// src/components/custom-price.tsx
+export default phx.domain.attachComponent
+  .withEntity('Scene')
+  .withComponent(customPriceFooterComponent, 'default')
+  .attach(
+    memoEval(
+      (s) => [s.$price],
+      (price) => ({
+        node: <AppPrice price={price} />,
+      })
+    )
+  )
 ```
 
 The `memoEval` function takes two arguments:

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

@@ -179,27 +179,30 @@ When a selected entity has no `sidebarTabs`, its property pages replace the root
 You can use transformers to automatically navigate to specific tabs when entities are selected or deselected:
 
 ```typescript
-const config = configuratorBuilder
-  .withTransformers(ctx => {
-    return [
-      // Navigate to BuckyBall's first tab when selected
-      phx.frontend.transformerBuilder.when
-        .entity(['BuckyBall'])
-        .selected()
-        .then.navigateTo('BuckyBallTab1')
-        .build('Navigate to BuckyBallTab1')
-        .register(ctx),
-
-      // Return to global tab1 when BuckyBall is deselected
-      phx.frontend.transformerBuilder.when
-        .entity(['BuckyBall'])
-        .deselected()
-        .then.navigateTo('tab1')
-        .build('Navigate to Tab1')
-        .register(ctx),
-    ]
-  })
-  .buildConfig()
+// src/transformers/bucky-ball-tab.ts
+export default phx.frontend.transformerBuilder.when
+  .entity(['BuckyBall'])
+  .selected()
+  .then.navigateTo('BuckyBallTab1')
+  .build('buckyBallTab')
+```
+
+```typescript
+// src/transformers/tab.ts
+export default phx.frontend.transformerBuilder.when
+  .entity(['BuckyBall'])
+  .deselected()
+  .then.navigateTo('tab1')
+  .build('tab')
+```
+
+Each file in `src/transformers/` default-exports one transformer and is picked up by its location. The `transformers` section of the spec turns it on by name. For a transformer made with `build(name)` that is the name passed to `build(...)`, which must match the file name with case and dashes ignored (`fix-finish.ts` and `fixFinish` match). For a plain-function export it is the file name:
+
+```yaml
+# spec/application.yaml
+transformers:
+  - name: buckyBallTab
+  - name: tab
 ```
 
 This creates smooth navigation flows where selecting specific entities automatically switches to their relevant tabs, and deselecting returns to a default tab state.

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

@@ -83,7 +83,7 @@ export default phx.domain.implementActions({
 })
 ```
 
-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.
+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 implementation of a name the spec does not declare is a type error. A declared action without an implementation is not: it 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