@salsita-ai/sdk 0.50.0-develop.6d8967bc99 → 0.50.0-develop.70dc8d05b6

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

@@ -0,0 +1,16 @@
+import{jsx as r,jsxs as a}from"react/jsx-runtime";import{paperClasses as e,styled as d,useTheme as i,useThemeProps as t}from"@mui/material";import{useMemo as o,useState as n}from"react";import{useIsFullscreenActive as s}from"#package/react-sdk";import{attrf as b,commonStyles as l,useInvalidateScrollTimeline as p,useIsEmpty as c}from"#package/ui-sdk";import{ASSISTANT_PANEL_SLOT as h,AssistantPanel as m,useIsAssistantPanelOpen as S}from"../../assistant/index.js";import{LayoutSlots as u}from"../slots/index.js";let k="PhxDesktopSidebar";export const SidebarKeys={Minimalist:"minimalist",Split:"split",Visible:"visible",Hidden:"hidden",Assistant:"assistant"};let g={Root:d("div",{name:k,slot:"root",shouldForwardProp:r=>"ownerState"!==r})(({ownerState:r})=>[`
+      --phx-sidebar-background: ${r.background};
+      --phx-sidebar-border: ${r.border};
+      --phx-sidebar-filter: ${r.filter};
+      --phx-sidebar-padding: ${r.padding};
+      --phx-sidebar-radius: ${r.borderRadius}px;
+      --phx-sidebar-scrollable-indicator-background: ${r.scrollableIndicatorBackground};
+    `,{borderRadius:"var(--phx-sidebar-radius)",display:"grid",filter:"var(--phx-sidebar-filter)",gridTemplateRows:"min-content minmax(0, 1fr) min-content",inlineSize:r.width,position:"relative","& > *":{pointerEvents:"auto"},"@container style(--inspect: on)":{"--phx-sidebar-background":"hsl(from gold h s l / 50%)"},[`&[data-sidebar*="${SidebarKeys.Visible}"]`]:{opacity:1},[`&[data-sidebar*="${SidebarKeys.Hidden}"]`]:{opacity:0},[`&[data-sidebar*="${SidebarKeys.Assistant}"] > :not([data-sidebar="${h}"])`]:{visibility:"hidden"}}]),Tabs:d("div",{name:k,slot:"tabs",shouldForwardProp:r=>"ownerState"!==r})(({theme:{spacing:r}})=>({insetBlockStart:0,insetInlineEnd:"100%",maxInlineSize:150,paddingInlineEnd:r(2),position:"absolute","&:is(:empty)":{padding:0},[`.${e.root}`]:{boxShadow:"none"}})),Header:d("header",{name:k,slot:"header",shouldForwardProp:r=>"ownerState"!==r})({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:d("div",{name:k,slot:"body",shouldForwardProp:r=>"ownerState"!==r})(({ownerState:r})=>({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]"])) &':{...r.isHeaderEmpty&&{borderBlockStart:"var(--phx-sidebar-border)",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",paddingBlockStart:"var(--phx-sidebar-padding)"}},'&:has([data-sidebar*="slot[content]"]:empty)':{...r.isContentEmpty&&{paddingBlock:0}},[`[data-sidebar*="${SidebarKeys.Minimalist}"] &`]:{...r.isContentEmpty&&{border:0}},[`[data-sidebar*="${SidebarKeys.Split}"] &`]:{borderBlockEnd:"var(--phx-sidebar-border)",borderEndStartRadius:"inherit",borderEndEndRadius:"inherit",paddingBlockEnd:"var(--phx-sidebar-padding)"}})),Content:d("div",{name:k,slot:"content",shouldForwardProp:r=>"ownerState"!==r})(({ownerState:r,theme:{spacing:a}})=>({...l.layout.normalizeScrollableContainer,alignContent:"start",borderRadius:"inherit",display:"grid",gap:a(3),padding:"var(--phx-sidebar-padding)","@supports (animation-timeline: scroll())":{"&[data-scrollable]":{scrollTimeline:"--phx-sidebar-timeline y","&::after, &::before":{animation:`${l.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% - ${a(4)}) 100%`,borderEndStartRadius:"inherit",borderEndEndRadius:"inherit",insetBlockStart:"50%",insetBlockEnd:0,scale:"1 -1"},"&::before":{animationRange:`0 ${a(4)}`,borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",insetBlockStart:0,insetBlockEnd:"50%"}}},"&:is(:empty)":{paddingBlock:0},'[data-layout*="slot[sidebar]"] &':{...r.isHeaderEmpty&&{paddingBlockStart:0,"&::before":{borderStartStartRadius:0,borderStartEndRadius:0,insetBlockStart:"var(--phx-sidebar-padding)"}}},[`[data-sidebar*="${SidebarKeys.Split}"] &`]:{paddingBlockEnd:0,"&::after":{borderEndStartRadius:0,borderEndEndRadius:0,insetBlockEnd:"var(--phx-sidebar-padding)"}}})),Footer:d("footer",{name:k,slot:"footer",shouldForwardProp:r=>"ownerState"!==r})(({ownerState:r,theme:{palette:a,spacing:e}})=>({background:"var(--phx-sidebar-background)",border:"var(--phx-sidebar-border)",borderBlockStart:`1px solid ${a.divider}`,borderEndStartRadius:"inherit",borderEndEndRadius:"inherit",padding:"var(--phx-sidebar-padding)","&:is(:empty)":{border:0,paddingBlock:0},[`[data-sidebar*="${SidebarKeys.Minimalist}"] &`]:{...r.isContentEmpty&&{borderBlockStart:"var(--phx-sidebar-border)",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit"}},[`[data-sidebar*="${SidebarKeys.Split}"] &`]:{borderBlockStart:"var(--phx-sidebar-border)",borderStartStartRadius:"inherit",borderStartEndRadius:"inherit",marginBlockStart:e(2)}}))};export const DesktopSidebar=({width:e})=>{let[d,l]=n(null),[h,x]=n(null),y=o(()=>({current:d}),[d]),E=o(()=>({current:h}),[h]),{palette:v,shape:f,spacing:B}=i(),{background:R=v.background.paper,border:$=0,borderRadius:w=f.sidebarBorderRadius??f.borderRadius,filter:K=`
+      drop-shadow(0 1px 1.5px hsl(from ${v.common.black} h s l / 12%))
+      drop-shadow(0 1px 0.5px hsl(from ${v.common.black} h s l / 14%))
+      drop-shadow(0 2px 0.5px hsl(from ${v.common.black} h s l / 20%))
+    `,padding:C=B(2.5),scrollableIndicatorBackground:F=`linear-gradient(
+      180deg,
+      hsl(from black h s l / 12%),
+      hsl(from black h s l / 0%) 8px
+    )`}=t({props:{},name:k}),{hasMiniSidebar:H,hasSplitSidebar:I}=u.useSidebarContent(),D=S(),P=!s(),T=c(y,{disabled:!P}),j=c(E,{disabled:!P});p(E,{disabled:!P});let z={background:R,border:$,borderRadius:w,filter:K,isHeaderEmpty:T,isContentEmpty:j,padding:C,scrollableIndicatorBackground:F,width:e};return a(g.Root,{ownerState:z,"data-sidebar":b({variant:{[`${SidebarKeys.Minimalist}`]:H,[`${SidebarKeys.Split}`]:I},state:{[`${SidebarKeys.Visible}`]:P,[`${SidebarKeys.Hidden}`]:!P,[`${SidebarKeys.Assistant}`]:D}}),inert:P?void 0:"",children:[r(g.Tabs,{ownerState:z,"data-sidebar":"slot[tabs]",children:r(u.DesktopSidebarTabs,{})}),r(g.Header,{ref:l,ownerState:z,"data-sidebar":"slot[header]",children:r(u.DesktopSidebarBackButton,{})}),r(g.Body,{ownerState:z,"data-sidebar":"slot[body]",children:r(g.Content,{ref:x,ownerState:z,"data-sidebar":"slot[content]",children:r(u.DesktopSidebarContent,{})})}),r(g.Footer,{ownerState:z,"data-sidebar":"slot[footer]",children:r(u.DesktopSidebarFooter,{})}),r(m,{})]})};

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 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})=>[`
+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{AnimatePresence as d}from"motion/react";import{useRef as s}from"react";import{useAccessService as l,useEagerObservableSelector as m,useIsFullscreenActive as c}from"#package/react-sdk";import{attrf as p,commonStyles as u,numToPx as b,useIsEmpty as h,useViewportSize as g}from"#package/ui-sdk";import{useConfigurator as f}from"../../../application-runtime/index.js";import{usePreview as y}from"../../../configurator-context/index.js";import{ASSISTANT_PANEL_SLOT as x,AssistantPanel as v,useIsAssistantPanelOpen as w}from"../../assistant/index.js";import{LayoutSlots as S}from"../slots/index.js";import{MobileHeader as $}from"../slots/slots.js";import{MobilePreview as k}from"./MobilePreview.js";import{useLayoutSceneSafeArea as C}from"./use-layout-scene-safe-area.js";let F="visible",M="hidden",T=i("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*="${F}"]`]:{opacity:1,transitionDuration:"200ms, 300ms",transitionTimingFunction:"linear, ease-out",translate:"0 0"},[`&[data-header*="${M}"]`]:{opacity:0,transitionDuration:"100ms, 100ms",transitionTimingFunction:"linear, ease-in",translate:"0 -60%"}})),I="visible",R="hidden",B=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]"]':{...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*="${I}"]`]:{'[data-controls="slot[toolControls]"], [data-controls="slot[viewControls]"]':{opacity:1,transitionDuration:"200ms, 300ms",transitionTimingFunction:"linear, ease-out",translate:"0 0"}},[`&[data-controls*="${R}"]`]:{'[data-controls="slot[toolControls]"], [data-controls="slot[viewControls]"]':{opacity:0,transitionDuration:"100ms, 100ms",transitionTimingFunction:"linear, ease-in",translate:"0 60%"}}})),E="PhxMobileSidebar",P="visible",D="hidden",j="assistant",A={Root:i("div",{name:E,slot:"root",shouldForwardProp:t=>"ownerState"!==t})(({ownerState:t})=>[`
       --phx-sidebar-background: ${t.background};
       --phx-sidebar-padding: ${t.padding};
       --phx-sidebar-radius: ${t.borderRadius}px;
-    `,{...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}})=>[`
+    `,{...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",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*="${P}"]`]:{opacity:1,transitionDuration:"200ms, 300ms",transitionTimingFunction:"linear, ease-out",translate:"0 0"},[`&[data-sidebar*="${D}"]`]:{opacity:0,transitionDuration:"100ms, 100ms",transitionTimingFunction:"linear, ease-in",translate:"0 60%"},[`&[data-sidebar*="${j}"] > :not([data-sidebar="${x}"])`]:{visibility:"hidden"}}]),Header:i("header",{name:E,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:i("div",{name:E,slot:"body",shouldForwardProp:t=>"ownerState"!==t})({display:"grid",gridTemplateRows:"minmax(0, 1fr)"}),Content:i("div",{name:E,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:i("div",{name:E,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:E,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 z="initial",H="fullscreen",L="min(480px, 50cqb)",q=["auto","min-content","max-content","fit-content"],N=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: ${h(t.sidebarHeight)};
+    --phx-layout-sidebar-track-size: ${b(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*="${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,{})})]})]})};
+      `},'[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*="${z}"]`]:{transitionDelay:"200ms",transitionDuration:"300ms"},[`&[data-layout*="${H}"]`]:{transitionDelay:"0ms",transitionDuration:"300ms"},[`&:has([data-sidebar*="${D}"])[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}}]),V=i("div")({gridArea:"1 / 1 / -1 / -1"}),G=t=>({inert:t?"":void 0});export const MobileLayout=()=>{let o=s(null),{palette:i,shape:u,spacing:b}=r(),{sidebarHeight:x=L}=n({props:{},name:"PhxMobileLayout"}),{background:J=i.background.paper,borderRadius:K=u.sidebarBorderRadius??u.borderRadius,padding:O=b(2)}=n({props:{},name:E}),{accessInfo:Q}=l(),U=c(),{isPreview:W,isHidden:X}=y(),Y=!X&&!W,Z=!U&&Y,_=!U&&Y,tt=!U,{containerRef:ta,safeAreaRef:te}=C({enabled:Y,hasMiniSidebar:!1}),to=h(o,{disabled:!tt}),{assistantSystem:ti}=f(),tr=w(),tn=m(ti.panel$,t=>t.isInputFocused,[]),td=tr&&tt&&tn,ts=g(td),tl=to&&!tr,tm={isContentEmpty:tl,sidebarHeight:tr?q.includes(x)?L:x:x,assistantFocusHeight:td?ts?.[1]:void 0},tc={background:J,borderRadius:K,padding:O,isContentEmpty:tl};return a(e,{children:[t(d,{initial:!1,children:!X&&W&&t(k,{})}),a(N,{ownerState:tm,"data-layout":p({state:{[`${z}`]:!U,[`${H}`]:U}}),...G(!Y),children:[t(V,{ref:ta}),t("div",{"data-layout":"slot[sideEffects]",children:t(S.MobileSnackbarsRoot,{})}),a("main",{"data-layout":"slot[body]",children:[t("header",{"data-layout":"slot[body.header]",children:a(T,{"data-header":p({state:{[`${F}`]:Z,[`${M}`]:!Z}}),...G(!Z),children:[t("div",{"data-header":"slot[start]",children:t($,{})}),t("div",{"data-header":"slot[center]",children:t(S.MobileCallToAction,{})}),a("div",{"data-header":"slot[end]",children:[Q.viewMode&&!U&&t(S.MobileReadonlyBanner,{}),t(S.MobileHamburgerMenu,{})]})]})}),t("div",{ref:te,"data-layout":"slot[body.safeSceneArea]"}),t("div",{"data-layout":"slot[body.footer] interactive",children:a(B,{"data-controls":p({state:{[`${I}`]:_,[`${R}`]:!_}}),children:[t("div",{"data-controls":"slot[toolControls]",...G(!_),children:t(S.MobileToolControls,{})}),t("div",{"data-controls":"slot[viewControls]",...G(!_),children:t(S.MobileViewControls,{})}),t("div",{"data-controls":"slot[toolbar]",children:Y&&t(S.MobileToolbar,{})})]})})]}),t("aside",{"data-layout":"slot[sidebar]",children:a(A.Root,{ownerState:tc,"data-sidebar":p({state:{[`${P}`]:tt,[`${D}`]:!tt,[`${j}`]:tr}}),...G(!tt),children:[a(A.Header,{ownerState:tc,"data-sidebar":"slot[header]",children:[t("div",{"data-sidebar":"slot[header.start]",children:t(S.MobileSidebarBackButton,{})}),t("div",{"data-sidebar":"slot[header.end]",children:t(S.MobilePoweredBy,{})})]}),t(A.Body,{ownerState:tc,"data-sidebar":"slot[body]",children:t(A.Content,{ref:o,ownerState:tc,"data-sidebar":"slot[content]",children:t(S.MobileSidebarContent,{})})}),t(A.Tabs,{ownerState:tc,"data-sidebar":"slot[tabs]",children:t(S.MobileTabs,{})}),t(A.Footer,{ownerState:tc,"data-sidebar":"slot[footer]",children:t(S.MobileSidebarFooter,{})}),t(v,{})]})}),t("footer",{"data-layout":"slot[footer] interactive",children:t(S.MobileFooter,{})})]})]})};

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

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import e from"lodash/noop.js";import{useCallback as o,useMemo as i}from"react";import{useResolveLocalizable as r}from"#package/react-sdk";import{Preview as a,useResponsive as s}from"#package/ui-sdk";import{usePresetSelection as n,usePreview as m}from"../../../configurator-context/index.js";import{useSceneSafeArea as p}from"./use-scene-safe-area.js";let c={id:"sdk.preview.customize.title",message:"Customize product"},l={id:"sdk.preview.start.button.label",message:"Start configuring"},u={initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{opacity:{duration:.1,ease:"linear"}}};export const MobilePreview=f=>{let{slotProps:d={},slots:g}=f,{enter:k,isPreview:x}=m(),{hasMultiplePresets:b}=n(),{setCanvasPadding:j}=s(),{containerRef:y,safeAreaRef:w,update:v}=p(x?j:e,!1),S=r(),h=o(()=>{v()},[v]),z=i(()=>({...d,root:{...u,onLayoutAnimationComplete:h,...d.root}}),[h,d]);return t(a,{title:S(c),buttonLabel:S(l),containerRef:y,safeAreaRef:w,withScene:!b,slots:g,slotProps:z,onStart:k})};
+import{jsx as t}from"react/jsx-runtime";import{useCallback as e,useMemo as o}from"react";import{useResolveLocalizable as i}from"#package/react-sdk";import{Preview as a}from"#package/ui-sdk";import{usePresetSelection as r,usePreview as s}from"../../../configurator-context/index.js";import{useLayoutSceneSafeArea as n}from"./use-layout-scene-safe-area.js";let m={id:"sdk.preview.customize.title",message:"Customize product"},p={id:"sdk.preview.start.button.label",message:"Start configuring"},c={initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{opacity:{duration:.1,ease:"linear"}}};export const MobilePreview=l=>{let{slotProps:u={},slots:d}=l,{enter:f,isPreview:b}=s(),{hasMultiplePresets:g}=r(),{containerRef:k,safeAreaRef:x,update:y}=n({enabled:b,hasMiniSidebar:!1}),j=i(),w=e(()=>{y()},[y]),S=o(()=>({...u,root:{...c,onLayoutAnimationComplete:w,...u.root}}),[w,u]);return t(a,{title:j(m),buttonLabel:j(p),containerRef:k,safeAreaRef:x,withScene:!g,slots:d,slotProps:S,onStart:f})};

package/dist/configurator/ui/configurator-layout/universal/use-layout-scene-safe-area.d.ts

@@ -0,0 +1,47 @@
+/** What a built-in layout tells the safe-area measurement about itself. */
+export interface LayoutSceneSafeAreaOptions {
+    /** Whether the layout owns the canvas padding now. See `useLayoutSceneSafeArea`. */
+    readonly enabled: boolean;
+    /** Whether the sidebar is collapsed to its mini form, which the scene clears only in part. */
+    readonly hasMiniSidebar: boolean;
+}
+/**
+ * Measures the gap between a full-area container and an inner "safe area" element,
+ * and writes the resulting gaps to the responsive context as canvas padding — letting the
+ * 3D scene render only in the region not covered by overlay UI (preview body, sidebar, etc.).
+ *
+ * The implementation behind `useSceneSafeArea`, with the two things only the built-in
+ * layouts need: `enabled` and `hasMiniSidebar`.
+ *
+ * Returns:
+ * - `containerRef` — attach to the full-area measurement element.
+ * - `safeAreaRef` — attach to the region the scene should remain visible in.
+ * - `update` — trigger a manual re-measure on demand.
+ *
+ * `containerRef` / `safeAreaRef` are *callback* refs: the `ResizeObserver` (re)connects
+ * whenever a node attaches or detaches. This matters because the owning layout can mount
+ * late — `AnimatePresence mode="wait"` only mounts the interface after the preview has
+ * finished exiting, well after a one-shot mount effect would have run and bailed on null
+ * refs (leaving the scene stuck at the preview's padding).
+ *
+ * `enabled` is for a layout that stays mounted while another one owns the padding (e.g. the
+ * mobile interface while previewing, or a preview that lingers through its exit fade). While
+ * it is `false` the observer is disconnected, and a measurement started by the `update` of that
+ * render or by a pending retry writes nothing. An `update` that was created while the hook was
+ * enabled, such as a handler an animation already holds, still measures and writes. Turning
+ * `enabled` back on reconnects the observer, which measures again.
+ *
+ * `getBoundingClientRect()` returns *visually transformed* rects, so `measure` skips
+ * transformed frames automatically (retrying until the transform clears) to avoid feeding
+ * the scene a scaled gap mid layout animation.
+ *
+ * `update` exists for the complementary case: when only an ancestor's `transform` changes
+ * (e.g. motion FLIP settling), `ResizeObserver` doesn't fire, so nothing re-triggers
+ * `measure`. Call `update()` once the transform settles (e.g. from
+ * `onLayoutAnimationComplete`) to re-measure against the actual layout box.
+ */
+export declare const useLayoutSceneSafeArea: (options: LayoutSceneSafeAreaOptions) => {
+    containerRef: (node: HTMLDivElement | null) => void;
+    safeAreaRef: (node: HTMLDivElement | null) => void;
+    update: () => void;
+};

package/dist/configurator/ui/configurator-layout/universal/use-layout-scene-safe-area.js

@@ -0,0 +1 @@
+import{useCallback as t,useEffect as e,useRef as r}from"react";import{canvasPaddingComponent as n}from"#package/domain";import{useFirstComponent as o}from"#package/react-sdk";import{useResponsive as a}from"#package/ui-sdk";export const useLayoutSceneSafeArea=c=>{let{enabled:u,hasMiniSidebar:i}=c,{setCanvasPadding:m}=a(),l=r(null),s=r(null),f=r(null),h=r(null),p=r(0),g=r(()=>{}),b=o({componentTypes:[n]}),d=t(()=>{let t=s.current,e=f.current;if(!u||!t||!e)return;let r=t.getBoundingClientRect(),n=e.getBoundingClientRect();if(Math.abs(r.width-t.offsetWidth)>1||Math.abs(r.height-t.offsetHeight)>1){if(p.current+=1,p.current>60){p.current=0;return}l.current&&cancelAnimationFrame(l.current),l.current=requestAnimationFrame(()=>g.current());return}p.current=0;let o={bottom:Math.max(0,r.bottom-n.bottom),left:Math.max(0,n.left-r.left),right:Math.max(0,r.right-n.right),top:Math.max(0,n.top-r.top)},a=i?.3:1,c=b?.state.bottom??1,h=b?.state.left??1,d=b?.state.right??a,A=b?.state.top??1;m({bottom:o.bottom*c,left:o.left*h,right:o.right*d,top:o.top*A})},[u,i,b?.state.bottom,b?.state.left,b?.state.right,b?.state.top,m]);g.current=d;let A=t(()=>{l.current&&cancelAnimationFrame(l.current),l.current=requestAnimationFrame(d)},[d]),M=t(()=>{h.current?.disconnect(),h.current=null},[]),k=t(()=>{let t=s.current,e=f.current;if(!u||!t||!e)return void M();M();let r=new ResizeObserver(A);r.observe(t),r.observe(e),h.current=r},[M,u,A]),x=t(t=>{s.current=t,k()},[k]),F=t(t=>{f.current=t,k()},[k]);return e(()=>(k(),()=>{M(),l.current&&cancelAnimationFrame(l.current)}),[k,M]),{containerRef:x,safeAreaRef:F,update:A}};

package/dist/configurator/ui/configurator-layout/universal/use-scene-safe-area.d.ts

@@ -1,33 +1,18 @@
-import type { CanvasPadding } from '#package/ui-sdk';
 /**
- * Measures the gap between a full-area container and an inner "safe area" element,
- * and forwards the resulting gaps as canvas padding — letting the 3D scene render
- * only in the region not covered by overlay UI (preview body, sidebar, etc.).
+ * Tells the camera which part of the canvas a layout leaves free for the scene.
  *
- * Returns:
- * - `containerRef` — attach to the full-area measurement element.
- * - `safeAreaRef` — attach to the region the scene should remain visible in.
- * - `update` — trigger a manual re-measure on demand.
- *
- * `containerRef` / `safeAreaRef` are *callback* refs: the `ResizeObserver` (re)connects
- * whenever a node attaches or detaches. This matters because the owning layout can mount
- * late — `AnimatePresence mode="wait"` only mounts the interface after the preview has
- * finished exiting, well after a one-shot mount effect would have run and bailed on null
- * refs (leaving the scene stuck at the preview's padding).
- *
- * `enabled` gates the whole thing: when `false` the observer is disconnected so an inactive
- * layout (e.g. the interface while previewing) neither measures nor writes padding.
+ * A layout attaches `containerRef` to the element that covers the whole canvas and `safeAreaRef`
+ * to the region the scene should stay visible in. The hook measures the gap between the two,
+ * again whenever either element resizes, and writes it to the responsive context as the canvas
+ * padding the camera frames the scene with.
  *
- * `getBoundingClientRect()` returns *visually transformed* rects, so `measure` skips
- * transformed frames automatically (retrying until the transform clears) to avoid feeding
- * the scene a scaled gap mid layout animation.
- *
- * `update` exists for the complementary case: when only an ancestor's `transform` changes
- * (e.g. motion FLIP settling), `ResizeObserver` doesn't fire, so nothing re-triggers
- * `measure`. Call `update()` once the transform settles (e.g. from
- * `onLayoutAnimationComplete`) to re-measure against the actual layout box.
+ * Returns:
+ * - `containerRef` — attach to the element that covers the whole canvas.
+ * - `safeAreaRef` — attach to the region the scene should stay visible in.
+ * - `update` — measures again on demand, for a change no resize reports, such as a `transform`
+ *   on an ancestor settling at the end of an animation.
  */
-export declare const useSceneSafeArea: (setCanvasPadding: (padding: CanvasPadding) => void, hasMiniSidebar: boolean, enabled?: boolean) => {
+export declare const useSceneSafeArea: () => {
     containerRef: (node: HTMLDivElement | null) => void;
     safeAreaRef: (node: HTMLDivElement | null) => void;
     update: () => void;

package/dist/configurator/ui/configurator-layout/universal/use-scene-safe-area.js

@@ -1 +1 @@
-import{useCallback as t,useEffect as e,useRef as r}from"react";import{canvasPaddingComponent as n}from"#package/domain";import{useFirstComponent as o}from"#package/react-sdk";export const useSceneSafeArea=(a,c,u=!0)=>{let i=r(null),l=r(null),m=r(null),s=r(null),f=r(0),h=r(()=>{}),g=o({componentTypes:[n]}),p=t(()=>{let t=l.current,e=m.current;if(!t||!e)return;let r=t.getBoundingClientRect(),n=e.getBoundingClientRect();if(Math.abs(r.width-t.offsetWidth)>1||Math.abs(r.height-t.offsetHeight)>1){if(f.current+=1,f.current>60){f.current=0;return}i.current&&cancelAnimationFrame(i.current),i.current=requestAnimationFrame(()=>h.current());return}f.current=0;let o={bottom:Math.max(0,r.bottom-n.bottom),left:Math.max(0,n.left-r.left),right:Math.max(0,r.right-n.right),top:Math.max(0,n.top-r.top)},u=c?.3:1,s=g?.state.bottom??1,p=g?.state.left??1,b=g?.state.right??u,d=g?.state.top??1;a({bottom:o.bottom*s,left:o.left*p,right:o.right*b,top:o.top*d})},[c,g?.state.bottom,g?.state.left,g?.state.right,g?.state.top,a]);h.current=p;let b=t(()=>{i.current&&cancelAnimationFrame(i.current),i.current=requestAnimationFrame(p)},[p]),d=t(()=>{s.current?.disconnect(),s.current=null},[]),A=t(()=>{let t=l.current,e=m.current;if(!u||!t||!e)return void d();d();let r=new ResizeObserver(b);r.observe(t),r.observe(e),s.current=r},[d,u,b]),M=t(t=>{l.current=t,A()},[A]),x=t(t=>{m.current=t,A()},[A]);return e(()=>(A(),()=>{d(),i.current&&cancelAnimationFrame(i.current)}),[A,d]),{containerRef:M,safeAreaRef:x,update:b}};
+import{useLayoutSceneSafeArea as e}from"./use-layout-scene-safe-area.js";export const useSceneSafeArea=()=>e({enabled:!0,hasMiniSidebar:!1});

package/dist/docs/complex-use-cases/filtered-controls-with-fix-dialog.mdx

@@ -46,25 +46,22 @@ countersinkNotAvailable:
 ```
 
 ```ts
-const violationExpressions = invariantBuilder
-  .withInvariants(
-    implementCustomInvariants({
-      Plate: {
-        finishNotAvailable: s => {
-          return availableMaterials.some(state => state.material === s.material && state.finish === s.finish)
-        },
-        thicknessNotAvailable: s => {
-          return availableMaterials.some(
-            state => state.material === s.material && state.finish === s.finish && state.thickness === s.thickness
-          )
-        },
-        countersinkNotAvailable: s => {
-          return !s.someCounterSinkAdded || counterSinkThicknesses.includes(s.thickness)
-        },
-      },
-    })
-  )
-  .buildViolationExpressions()
+// src/invariants/invariants.ts
+export default phx.domain.implementCustomInvariants({
+  Plate: {
+    finishNotAvailable: s => {
+      return availableMaterials.some(state => state.material === s.material && state.finish === s.finish)
+    },
+    thicknessNotAvailable: s => {
+      return availableMaterials.some(
+        state => state.material === s.material && state.finish === s.finish && state.thickness === s.thickness
+      )
+    },
+    countersinkNotAvailable: s => {
+      return !s.someCounterSinkAdded || counterSinkThicknesses.includes(s.thickness)
+    },
+  },
+})
 ```
 
 With following control structure. Note the hierarchy of `fixableViolations`. The top input "fixes" all violations as it should never be disabled.

package/dist/docs/complex-use-cases/sketching.mdx

@@ -669,44 +669,6 @@ import { Model, attachComponent, configuratorBuilder } from './domain/index.js'
 // ... identical to the Code section above ...
 ```
 
-### Domain Setup (`domain/index.ts`)
-
-```typescript
-import { memoEval } from '@salsita-ai/sdk/domain'
-
-import { adminDomainBuilder } from './__generated/admin-implementation.js'
-import { generatedConfiguratorBuilder } from './__generated/configurator-builder.js'
-import {
-  domainBuilder,
-  implementCustomExpressions,
-  implementCustomInvariants,
-  invariantBuilder,
-} from './__generated/implementation.js'
-
-const violationExpressions = invariantBuilder.withInvariants(implementCustomInvariants({})).buildViolationExpressions()
-
-const customExpressions = implementCustomExpressions({
-  // ... as shown in Code section ...
-})
-
-const domainFactory = domainBuilder.withExpressions(violationExpressions).withExpressions(customExpressions).build()
-const adminDomainFactory = adminDomainBuilder.build()
-
-export const configuratorBuilder = generatedConfiguratorBuilder
-  .withDomainFactory(domainFactory)
-  .withAdminDomainFactory(adminDomainFactory)
-
-export * as AdminEnhancedDomain from './__generated/admin-enhanced-model.js'
-export * as AdminModel from './__generated/admin-model/index.js'
-export * as ApplicationTypes from './__generated/application-types.js'
-export * as EnhancedDomain from './__generated/enhanced-model.js'
-export * as Model from './__generated/model/index.js'
-
-export { attachAdminComponent, createAdminRecipe } from './__generated/admin-implementation.js'
-export { attachComponent, createRecipe } from './__generated/implementation.js'
-export { createPresets } from './__generated/presets.js'
-```
-
 ### Domain Configuration (`domain/domain.yaml`)
 
 ```yaml

package/dist/docs/controls/select-attribute/cardselect.mdx

@@ -99,19 +99,15 @@ components:
 Optionally disable specific options using invariants. The control performs a dry run for each option and disables those that would violate your rules. Provide a clear message; if multiple violations apply, messages are concatenated.
 
 ```typescript
-// domain/index.ts (extract)
-const violationExpressions = invariantBuilder
-  .withInvariants(
-    implementCustomInvariants({
-      Table: {
-        trunkDisabled: s =>
-          s.edgeFinish === 'TreeTrunk'
-            ? [{ type: 'trunkDisabled', severity: 'fatal', message: 'TreeTrunk finish is disabled because stuff!' }]
-            : [],
-      },
-    })
-  )
-  .buildViolationExpressions()
+// src/invariants/trunk-disabled.ts
+export default phx.domain.implementCustomInvariants({
+  Table: {
+    trunkDisabled: s =>
+      s.edgeFinish === 'TreeTrunk'
+        ? [{ type: 'trunkDisabled', severity: 'fatal', message: 'TreeTrunk finish is disabled because stuff!' }]
+        : [],
+  },
+})
 ```
 
 Register the invariant type in YAML so the system knows about it.

package/dist/docs/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-13T07:24:40.854Z",
+  "generatedAt": "2026-10-14T10:55:48.160Z",
   "categories": [
     {
       "name": "Phoenix",
@@ -686,6 +686,16 @@
           ],
           "source": "storybook-example"
         },
+        {
+          "title": "Custom Layout",
+          "description": "Make the configurator look like the brand's own product page. A furniture shop wants its table configurator to read like the rest of its site: a floating panel on the left with the product's name,...",
+          "path": "docs/layouts/custom-layout.mdx",
+          "category": [
+            "Layouts",
+            "Custom Layout"
+          ],
+          "source": "storybook-example"
+        },
         {
           "title": "Custom Price",
           "description": "The custom price footer component replaces the standard price display in the sidebar footer with a fully customizable React component. This allows you to create custom pricing interfaces, add...",

package/dist/docs/integrations/woocommerce/local-development.mdx

@@ -133,7 +133,7 @@ The value of `WOOCOMMERCE_API_KEY` must correspond to the value of the 'API key'
 settings page and `WOOCOMMERCE_PRODUCT_NAME` must correspond to the name of the product template you created.
 
 - run development server (from this repo): `pnpm dev:server`
-- prepare local deployment (from the implementation project): `pnpm deployment:prepare-local`
+- prepare local deployment (from the implementation project): `pnpm phoenix deployment:prepare-local`
 - start the dev process (from the implementation project): `pnpm dev`
 - run bundle build (from the implementation project): `pnpm build`