@salsita-ai/sdk 0.50.0-develop.ea458ea381 → 0.50.0-develop.ecda3c6152

package/dist/configurator/ui/configurator-layout/slots/canvas/WebGLNotSupported.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as o}from"@lingui/react";import{Button as t,Typography as i,styled as s}from"@mui/material";import{PhxIcon as a}from"#package/ui-sdk";import{useConfiguratorRouting as n}from"../../../../configurator-context/index.js";let m=s("div")(({theme:{spacing:e}})=>({display:"grid",minBlockSize:"100cqb",padding:e(2),placeItems:"center",position:"relative"})),d=s("div")({maxInlineSize:"80ch",textAlign:"center",textWrap:"pretty"});export const WebGLNotSupported=()=>{let{goToIndex:s}=n();return e(m,{children:r(d,{children:[e(a,{name:"CubeDuotone",sx:{fontSize:48}}),e(i,{component:"h1",variant:"h4",sx:{my:4},children:e(o,{id:"sdk.messages.error.webglNotSupported.title",message:"WebGL is not supported or cannot be initialized"})}),e(i,{color:"text.secondary",children:e(o,{id:"sdk.messages.error.webglNotSupported.message",message:"Your device or browser does not support WebGL, which is required for the configurator to function. Try a different browser or device that supports WebGL"})}),e(t,{variant:"text",color:"primary",size:"large",sx:{mt:6.5},onClick:s,children:e(o,{id:"sdk.messages.navigation.goToHomepage.label",message:"Go To Homepage"})})]})})};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as t}from"@lingui/react";import{Button as o,Typography as i,styled as s}from"@mui/material";import{useConfiguratorRouting as a}from"#package/react-sdk";import{PhxIcon as n}from"#package/ui-sdk";let m=s("div")(({theme:{spacing:e}})=>({display:"grid",minBlockSize:"100cqb",padding:e(2),placeItems:"center",position:"relative"})),d=s("div")({maxInlineSize:"80ch",textAlign:"center",textWrap:"pretty"});export const WebGLNotSupported=()=>{let{goToIndex:s}=a();return e(m,{children:r(d,{children:[e(n,{name:"CubeDuotone",sx:{fontSize:48}}),e(i,{component:"h1",variant:"h4",sx:{my:4},children:e(t,{id:"sdk.messages.error.webglNotSupported.title",message:"WebGL is not supported or cannot be initialized"})}),e(i,{color:"text.secondary",children:e(t,{id:"sdk.messages.error.webglNotSupported.message",message:"Your device or browser does not support WebGL, which is required for the configurator to function. Try a different browser or device that supports WebGL"})}),e(o,{variant:"text",color:"primary",size:"large",sx:{mt:6.5},onClick:s,children:e(t,{id:"sdk.messages.navigation.goToHomepage.label",message:"Go To Homepage"})})]})})};

package/dist/configurator/ui/configurator-layout/slots/desktop-sidebar/DesktopSidebar.d.ts

@@ -0,0 +1,101 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { CSSProperties } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+declare const MuiSidebarComponentName: 'PhxDesktopSidebar';
+declare const MuiSidebarSlots: {
+    readonly Root: 'root';
+    readonly Header: 'header';
+    readonly Body: 'body';
+    readonly Content: 'content';
+    readonly Tabs: 'tabs';
+    readonly Footer: 'footer';
+};
+type DesktopSidebarSlots = ValueOf<typeof MuiSidebarSlots>;
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiSidebarComponentName]: DesktopSidebarSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiSidebarComponentName]: ThemeableDesktopSidebarProps;
+    }
+    interface Components {
+        [MuiSidebarComponentName]?: {
+            defaultProps?: ComponentsPropsList['PhxDesktopSidebar'];
+            styleOverrides?: ComponentsOverrides<Theme>['PhxDesktopSidebar'];
+        };
+    }
+}
+/** Which side of its layout the sidebar is on. */
+export type DesktopSidebarSide = 'start' | 'end';
+interface SidebarOwnerState {
+    readonly isHeaderEmpty?: boolean;
+    readonly isContentEmpty?: boolean;
+}
+export interface ThemeableDesktopSidebarProps extends SidebarOwnerState {
+    /**
+     * Background applied to sidebar sections (header, body, footer).
+     *
+     * @default theme.palette.background.paper
+     */
+    readonly background?: CSSProperties['background'];
+    /**
+     * Border applied to sidebar sections.
+     *
+     * @default 0
+     */
+    readonly border?: CSSProperties['border'];
+    /**
+     * Corner radius applied to sidebar sections.
+     *
+     * @default theme.shape.sidebarBorderRadius ?? theme.shape.borderRadius
+     */
+    readonly borderRadius?: CSSProperties['borderRadius'];
+    /**
+     * CSS filter applied to the sidebar root (e.g. drop-shadow for elevation).
+     *
+     * @default elevation[1] drop-shadow
+     */
+    readonly filter?: CSSProperties['filter'];
+    /**
+     * Spacing value for sidebar inner padding.
+     * Accepts a theme spacing multiplier or a CSS value.
+     *
+     * @default theme.spacing(2.5)
+     */
+    readonly padding?: number | string;
+    /**
+     * Background gradient for scrollable edge indicators.
+     * Applied to `::before` and `::after` pseudo-elements on the content area.
+     *
+     * @default linear-gradient(180deg, hsl(from black h s l / 12%), transparent 8px)
+     */
+    readonly scrollableIndicatorBackground?: CSSProperties['background'];
+    /**
+     * Inline size (width) of the sidebar. Not read from the theme: the sidebar takes its width from its
+     * `width` prop, which the built-in desktop layout sets from `ThemeableDesktopLayoutProps.sidebarWidth`.
+     */
+    readonly width?: CSSProperties['width'];
+}
+/** Props of the built-in desktop sidebar. */
+export interface DesktopSidebarProps {
+    /**
+     * Inline size (width) of the sidebar. Without it the sidebar fills the width and height of its
+     * container, which the layout sizes and positions; with it the sidebar takes this width and the
+     * height of its content, unless its container stretches it.
+     */
+    readonly width?: CSSProperties['width'];
+    /**
+     * Which side of the layout the sidebar is on. The sidebar tabs sit outside the sidebar on the other
+     * side: to its left for `end`, to its right for `start`.
+     *
+     * @default 'end'
+     */
+    readonly side?: DesktopSidebarSide;
+}
+/**
+ * The built-in desktop sidebar: tabs, back button, property page, footer and the assistant panel, with
+ * their spacing, scrolling and empty states. In fullscreen it stays in place, transparent and inert;
+ * the layout decides whether it keeps its space.
+ */
+export declare const DesktopSidebar: ({ width, side }: DesktopSidebarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/configurator-layout/slots/desktop-sidebar/DesktopSidebar.js

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

package/dist/configurator/ui/configurator-layout/slots/desktop-sidebar/index.d.ts

@@ -0,0 +1 @@
+export { DesktopSidebar, type DesktopSidebarProps, type DesktopSidebarSide } from './DesktopSidebar.js';

package/dist/configurator/ui/configurator-layout/slots/desktop-sidebar/index.js

@@ -0,0 +1 @@
+export{DesktopSidebar}from"./DesktopSidebar.js";

package/dist/configurator/ui/configurator-layout/slots/mobile-tabs/use-mobile-tabs.d.ts

@@ -1,7 +1,7 @@
 export declare const useMobileTabs: () => {
     tabs: {
         label: string;
-        icon: import("react").ReactNode;
+        icon: string | number | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         value: string;
         isActive: boolean;
     }[];

package/dist/configurator/ui/configurator-layout/slots/mobile-tabs/use-mobile-tabs.js

@@ -1 +1 @@
-import{useCallback as e,useMemo as t}from"react";import{horizontalTabsComponent as o,sidebarTabsComponent as n}from"#package/domain";import{useActiveNavigationState as a,useComponents as i,useDomain as r,useResolveLocalizable as s,useSelectedDomainEntityId as c}from"#package/react-sdk";import{useIsSidebarSummaryActive as l}from"../../../../configurator-context/index.js";export const useMobileTabs=()=>{let m=a(),b=i({componentTypes:[n],entityIds:[c()]}),d=i({componentTypes:[o]}),p=t(()=>{if(b.length>0&&d.length>0)throw Error("Both sidebar tabs and horizontal tabs are configured, only one tabs component type can be used at a time, remove either sidebarTabs or horizontalTabs from your domain configuration");if(b.length>1)throw Error("Multiple sidebar tab components are active, only one sidebar tabs component can be active at a time, check your domain configuration to ensure only one sidebarTabs component is defined");if(d.length>1)throw Error("Multiple horizontal tab components are active, only one horizontal tabs component can be active at a time, check your domain configuration to ensure only one horizontalTabs component is defined");return b.length>0?b.at(0):d.at(0)},[b,d]),h=s(),u=l(),g=t(()=>p?p.state.tabs.map(e=>{let t=e.navigationStates[0];if(!t)throw Error(`Tab ${h(e.label)} has no navigation states!`);return{label:h(e.label),icon:e.icon,value:t,isActive:e.navigationStates.includes(m)}}):[],[p,m,h]),{navigationSystem:f,storeSystem:v}=r(),y=e(e=>{v.stageAndCommit([f.getNavigationUpdate(e)])},[f,v]),T=t(()=>{let e=g.find(e=>e.isActive);return e?.value??"none"},[g]);return u?{tabs:[],activeTab:"none",onChange:()=>{}}:{tabs:g,activeTab:T,onChange:y}};
+import{useCallback as t,useMemo as e}from"react";import{horizontalTabsComponent as o,sidebarTabsComponent as a}from"#package/domain";import{useComponents as n,useDomain as i,useResolveLocalizable as r,useSelectedDomainEntityId as s,useTabNavigation as c}from"#package/react-sdk";import{useIsSidebarSummaryActive as b}from"../../../../configurator-context/index.js";export const useMobileTabs=()=>{let{tabs:l,activeTab:m}=c(),{navigationSystem:p,storeSystem:d}=i(),h=n({componentTypes:[a],entityIds:[s()]}),f=n({componentTypes:[o]}),g=r(),u=b(),v=e(()=>l.map(t=>({label:t.label,icon:t.iconNode??t.icon,value:t.state,isActive:t.isActive})),[l]),y=t(t=>{d.stageAndCommit([p.getNavigationUpdate(t)])},[p,d]),T=m?.state??"none";if(h.length>0&&f.length>0)throw Error("Both sidebar tabs and horizontal tabs are configured, only one tabs component type can be used at a time, remove either sidebarTabs or horizontalTabs from your domain configuration");if(h.length>1)throw Error("Multiple sidebar tab components are active, only one sidebar tabs component can be active at a time, check your domain configuration to ensure only one sidebarTabs component is defined");if(f.length>1)throw Error("Multiple horizontal tab components are active, only one horizontal tabs component can be active at a time, check your domain configuration to ensure only one horizontalTabs component is defined");let k=[...h.flatMap(t=>t.state.tabs),...f.flatMap(t=>t.state.tabs)].find(t=>0===t.navigationStates.length);if(k)throw Error(`Tab ${g(k.label)} has no navigation states!`);return u?{tabs:[],activeTab:"none",onChange:()=>{}}:{tabs:v,activeTab:T,onChange:y}};

package/dist/configurator/ui/configurator-layout/slots/readonly-banner/CloneToEditDialog.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as o}from"@lingui/react";import{Button as n,DialogActions as r,DialogContent as i,DialogContentText as t,DialogTitle as l,Dialog as c,dialogClasses as s,styled as d}from"@mui/material";import{useMutation as m}from"@tanstack/react-query";import{useCallback as u}from"react";import{useAuthorizedClient as p,useConfigurationId as g,useDomainApplication as f}from"#package/react-sdk";import{LoadingButton as k}from"#package/ui-sdk";import{useConfiguratorRouting as y}from"../../../../configurator-context/index.js";let h=d(c)(()=>({[`.${s.paper}`]:{inlineSize:"min(480px, 100%)",maxWidth:"unset"}}));export const CloneToEditDialog=c=>{let{onClose:s,open:d}=c,{goToConfigurationDetail:b}=y(),x=p(),C=g(),{configurationPersistSystem:j}=f(),{mutate:v,isPending:T}=m({mutationFn:()=>x.cloneConfiguration(C,j.revisionId$.value),onSuccess:e=>{s(),b(e.configurationId,e.accessToken)}}),D=u(()=>{v()},[v]);return a(h,{open:d,onClose:s,children:[e(l,{children:e(o,{id:"sdk.layout.banner.readonly.clone.title",message:"Edit configuration"})}),e(i,{children:e(t,{children:e(o,{id:"sdk.layout.banner.readonly.clone.message",message:"You're about to create an editable copy of this setup. Changes you make won't affect the original shared link."})})}),a(r,{children:[e(n,{variant:"text",color:"inherit",onClick:s,children:e(o,{id:"sdk.layout.banner.readonly.cancel.label",message:"Cancel"})}),e(k,{variant:"contained",color:"primary",busy:T,onClick:D,children:e(o,{id:"sdk.layout.banner.readonly.clone.label",message:"Create editable copy"})})]})]})};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as n}from"@lingui/react";import{Button as o,DialogActions as r,DialogContent as i,DialogContentText as t,DialogTitle as l,Dialog as s,dialogClasses as c,styled as d}from"@mui/material";import{useMutation as m}from"@tanstack/react-query";import{useCallback as u}from"react";import{useAuthorizedClient as p,useConfigurationId as g,useConfiguratorRouting as k,useDomainApplication as y}from"#package/react-sdk";import{LoadingButton as f}from"#package/ui-sdk";let h=d(s)(()=>({[`.${c.paper}`]:{inlineSize:"min(480px, 100%)",maxWidth:"unset"}}));export const CloneToEditDialog=s=>{let{onClose:c,open:d}=s,{goToConfigurationDetail:b}=k(),C=p(),x=g(),{configurationPersistSystem:v}=y(),{mutate:j,isPending:T}=m({mutationFn:()=>C.cloneConfiguration(x,v.revisionId$.value),onSuccess:e=>{c(),b(e.configurationId,e.accessToken)}}),D=u(()=>{j()},[j]);return a(h,{open:d,onClose:c,children:[e(l,{children:e(n,{id:"sdk.layout.banner.readonly.clone.title",message:"Edit configuration"})}),e(i,{children:e(t,{children:e(n,{id:"sdk.layout.banner.readonly.clone.message",message:"You're about to create an editable copy of this setup. Changes you make won't affect the original shared link."})})}),a(r,{children:[e(o,{variant:"text",color:"inherit",onClick:c,children:e(n,{id:"sdk.layout.banner.readonly.cancel.label",message:"Cancel"})}),e(f,{variant:"contained",color:"primary",busy:T,onClick:D,children:e(n,{id:"sdk.layout.banner.readonly.clone.label",message:"Create editable copy"})})]})]})};

package/dist/configurator/ui/configurator-layout/slots/services/InvariantViolations.d.ts

@@ -1,8 +1,8 @@
 /**
- * InvariantViolations component that monitors domain store validity and displays
- * violation notifications using notistack snackbars.
+ * InvariantViolations component that shows the violation and error messages of
+ * `useConfiguratorMessages` as notistack snackbars.
  *
- * This component subscribes to the store's validity state and shows appropriate
- * error messages for uncaught errors and entity validation violations.
+ * An uncaught error is also logged; each entity violation becomes one snackbar
+ * prefixed with the id of its entity.
  */
 export declare const InvariantViolations: () => null;

package/dist/configurator/ui/configurator-layout/slots/services/InvariantViolations.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{Trans as t}from"@lingui/react";import{useSnackbar as i}from"notistack";import{useSubscription as e}from"observable-hooks";import{useMemo as a}from"react";import{map as o}from"rxjs";import{match as n}from"ts-pattern";import{useDomain as s,useLogger as m,useResolveLocalizable as l}from"#package/react-sdk";export const InvariantViolations=()=>{let{storeSystem:p}=s(),{enqueueSnackbar:g}=i(),c=l(),f=m();return e(a(()=>p.stateSlices.potentiallyInvalid.pipe(o(r=>r.validity)),[p]),i=>{if(!i.valid&&"uncaught"===i.severity){f.error("Uncaught error",i.error),g(r(t,{id:"sdk.messages.validation.uncaughtError.message",message:"Oops, something went wrong"}),{variant:"error"});return}i.valid||i.entityViolations.forEach(({violation:r,entityId:t})=>{let i=c(r.message??r.type);g(`${String(t)}: ${i}`,{variant:n(r.severity).with("notice",()=>"info").with("warning",()=>"warning").with("fixable",()=>"error").with("fatal",()=>"error").exhaustive()})})}),null};
+import{jsx as r}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{useSnackbar as t}from"notistack";import{match as e}from"ts-pattern";import{useConfiguratorMessages as a,useLogger as n}from"#package/react-sdk";export const InvariantViolations=()=>{let{enqueueSnackbar:o}=t(),s=n();return a(t=>{e(t).with({kind:"error"},({error:t})=>{s.error("Uncaught error",t),o(r(i,{id:"sdk.messages.validation.uncaughtError.message",message:"Oops, something went wrong"}),{variant:"error"})}).with({kind:"violation"},({entityId:r,violation:i,text:t})=>{o(`${String(r)}: ${t}`,{variant:e(i.severity).with("notice",()=>"info").with("warning",()=>"warning").with("fixable",()=>"error").with("fatal",()=>"error").exhaustive()})}).with({kind:"sideEffect"},()=>{}).with({kind:"saveError"},{kind:"saveRecovery"},()=>{}).exhaustive()}),null};

package/dist/configurator/ui/configurator-layout/slots/services/Services.js

@@ -1 +1 @@
-import{jsx as r,jsxs as s,Fragment as t}from"react/jsx-runtime";import{memo as o}from"react";import{InvariantViolations as i}from"./InvariantViolations.js";import{SideEffects as e}from"./SideEffects.js";export const Services=o(()=>s(t,{children:[r(i,{}),r(e,{})]}));
+import{jsx as r,jsxs as s,Fragment as e}from"react/jsx-runtime";import{memo as o}from"react";import{SaveMessageSnackbars as t}from"../../../save-message-snackbars/index.js";import{InvariantViolations as a}from"./InvariantViolations.js";import{SideEffects as i}from"./SideEffects.js";export const Services=o(()=>s(e,{children:[r(a,{}),r(i,{}),r(t,{})]}));

package/dist/configurator/ui/configurator-layout/slots/services/SideEffects.d.ts

@@ -1,9 +1,6 @@
 /**
- * SideEffects component that listens to domain store updates and displays
- * informational snackbars for updates that contain hint messages.
- *
- * This component renders nothing but subscribes to the committed state changes
- * from the domain store system and shows user-friendly notifications for
- * operations that provide feedback hints.
+ * SideEffects component that shows the side-effect messages of
+ * `useConfiguratorMessages`, the hints of committed updates, as informational
+ * notistack snackbars.
  */
 export declare const SideEffects: () => null;

package/dist/configurator/ui/configurator-layout/slots/services/SideEffects.js

@@ -1 +1 @@
-import{useSnackbar as t}from"notistack";import{useSubscription as r}from"observable-hooks";import{useMemo as e}from"react";import{distinctUntilChanged as o,map as i,skip as a}from"rxjs/operators";import{useDomain as m,useResolveLocalizable as n}from"#package/react-sdk";let p=[];export const SideEffects=()=>{let{storeSystem:s}=m(),f=n(),{enqueueSnackbar:c}=t();return r(e(()=>s.stateSlices.committed.pipe(a(1),o(),i(t=>{if("updates"in t){let r=t.updates.filter(t=>!!t.hint);return r.length>0?r:p}return p})),[s]),t=>{t.forEach(t=>{c(f(t.hint),{variant:"info"})})}),null};
+import{useSnackbar as t}from"notistack";import{useConfiguratorMessages as e}from"#package/react-sdk";export const SideEffects=()=>{let{enqueueSnackbar:r}=t();return e(t=>{"sideEffect"===t.kind&&r(t.text,{variant:"info"})}),null};

package/dist/configurator/ui/configurator-layout/slots/sidebar-tabs/use-sidebar-tabs.d.ts

@@ -1,7 +1,7 @@
 export declare const useSidebarTabs: () => {
     tabs: {
         label: string;
-        icon: import("react").ReactNode;
+        icon: string | number | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         value: string;
         isActive: boolean;
     }[];

package/dist/configurator/ui/configurator-layout/slots/sidebar-tabs/use-sidebar-tabs.js

@@ -1 +1 @@
-import{useCallback as t,useMemo as a}from"react";import{sidebarTabsComponent as e}from"#package/domain";import{useActiveNavigationState as n,useComponents as o,useDomain as i,useResolveLocalizable as r,useSelectedDomainEntityId as s}from"#package/react-sdk";import{useIsSidebarSummaryActive as c}from"../../../../configurator-context/index.js";export const useSidebarTabs=()=>{let m=n(),p=o({componentTypes:[e],entityIds:[s()]}),g=r(),l=c(),d=a(()=>(p??[]).flatMap(t=>t.state.tabs).map(t=>{let a=t.navigationStates[0];if(!a)throw Error(`Tab ${a} has no navigation states!`);return{label:g(t.label),icon:t.icon,value:a,isActive:t.navigationStates.includes(m)}}),[p,m,g]),{navigationSystem:b,storeSystem:f}=i(),v=t(t=>{f.stageAndCommit([b.getNavigationUpdate(t)])},[b,f]),u=a(()=>{let t=d.find(t=>t.isActive);return t?.value??"none"},[d]);return l?{tabs:[],activeTab:"none",onChange:()=>{}}:{tabs:d,activeTab:u,onChange:v}};
+import{useCallback as t,useMemo as a}from"react";import{sidebarTabsComponent as e}from"#package/domain";import{useComponents as o,useResolveLocalizable as n,useSelectedDomainEntityId as i,useTabNavigation as s}from"#package/react-sdk";import{useIsSidebarSummaryActive as r}from"../../../../configurator-context/index.js";export const useSidebarTabs=()=>{let{tabs:c,activeTab:b,select:m}=s({source:"sidebarTabs"}),p=o({componentTypes:[e],entityIds:[i()]}),d=n(),l=r(),f=a(()=>c.map(t=>({label:t.label,icon:t.iconNode??t.icon,value:t.state,isActive:t.isActive})),[c]),g=t(t=>{m(c.findIndex(a=>a.state===t))},[m,c]),v=b?.state??"none",T=p.flatMap(t=>t.state.tabs).find(t=>0===t.navigationStates.length);if(T)throw Error(`Tab ${d(T.label)} has no navigation states!`);return l?{tabs:[],activeTab:"none",onChange:()=>{}}:{tabs:f,activeTab:v,onChange:g}};

package/dist/configurator/ui/configurator-layout/slots/slots.d.ts

@@ -1,5 +1,6 @@
 export * from './call-to-action/index.js';
 export * from './canvas/index.js';
+export * from './desktop-sidebar/index.js';
 export * from './footer/index.js';
 export * from './hamburger-menu/index.js';
 export * from './header/index.js';

package/dist/configurator/ui/configurator-layout/slots/slots.js

@@ -1 +1 @@
-export*from"./call-to-action/index.js";export*from"./canvas/index.js";export*from"./footer/index.js";export*from"./hamburger-menu/index.js";export*from"./header/index.js";export*from"./mobile-tabs/index.js";export*from"./powered-by/index.js";export*from"./readonly-banner/index.js";export*from"./services/index.js";export*from"./sidebar-back-button/index.js";export*from"./sidebar-contents/index.js";export*from"./sidebar-footer/index.js";export*from"./sidebar-tabs/index.js";export*from"./snackbar-root/index.js";export*from"./toolbar/index.js";export*from"./tool-controls/index.js";export*from"./view-controls/index.js";
+export*from"./call-to-action/index.js";export*from"./canvas/index.js";export*from"./desktop-sidebar/index.js";export*from"./footer/index.js";export*from"./hamburger-menu/index.js";export*from"./header/index.js";export*from"./mobile-tabs/index.js";export*from"./powered-by/index.js";export*from"./readonly-banner/index.js";export*from"./services/index.js";export*from"./sidebar-back-button/index.js";export*from"./sidebar-contents/index.js";export*from"./sidebar-footer/index.js";export*from"./sidebar-tabs/index.js";export*from"./snackbar-root/index.js";export*from"./toolbar/index.js";export*from"./tool-controls/index.js";export*from"./view-controls/index.js";

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

@@ -1,80 +1,6 @@
 import type { ComponentsOverrides } from '@mui/material';
 import type { CSSProperties } from 'react';
 import type { ValueOf } from '@salsita-ai/common/utils';
-declare const MuiSidebarComponentName: 'PhxDesktopSidebar';
-declare const MuiSidebarSlots: {
-    readonly Root: 'root';
-    readonly Header: 'header';
-    readonly Body: 'body';
-    readonly Content: 'content';
-    readonly Tabs: 'tabs';
-    readonly Footer: 'footer';
-};
-type DesktopSidebarSlots = ValueOf<typeof MuiSidebarSlots>;
-declare module '@mui/material/styles' {
-    interface ComponentNameToClassKey {
-        [MuiSidebarComponentName]: DesktopSidebarSlots;
-    }
-    interface ComponentsPropsList {
-        [MuiSidebarComponentName]: ThemeableDesktopSidebarProps;
-    }
-    interface Components {
-        [MuiSidebarComponentName]?: {
-            defaultProps?: ComponentsPropsList['PhxDesktopSidebar'];
-            styleOverrides?: ComponentsOverrides<Theme>['PhxDesktopSidebar'];
-        };
-    }
-}
-interface SidebarOwnerState {
-    readonly isHeaderEmpty?: boolean;
-    readonly isContentEmpty?: boolean;
-}
-export interface ThemeableDesktopSidebarProps extends SidebarOwnerState {
-    /**
-     * Background applied to sidebar sections (header, body, footer).
-     *
-     * @default theme.palette.background.paper
-     */
-    readonly background?: CSSProperties['background'];
-    /**
-     * Border applied to sidebar sections.
-     *
-     * @default 0
-     */
-    readonly border?: CSSProperties['border'];
-    /**
-     * Corner radius applied to sidebar sections.
-     *
-     * @default theme.shape.sidebarBorderRadius ?? theme.shape.borderRadius
-     */
-    readonly borderRadius?: CSSProperties['borderRadius'];
-    /**
-     * CSS filter applied to the sidebar root (e.g. drop-shadow for elevation).
-     *
-     * @default elevation[1] drop-shadow
-     */
-    readonly filter?: CSSProperties['filter'];
-    /**
-     * Spacing value for sidebar inner padding.
-     * Accepts a theme spacing multiplier or a CSS value.
-     *
-     * @default theme.spacing(2.5)
-     */
-    readonly padding?: number | string;
-    /**
-     * Background gradient for scrollable edge indicators.
-     * Applied to `::before` and `::after` pseudo-elements on the content area.
-     *
-     * @default linear-gradient(180deg, hsl(from black h s l / 12%), transparent 8px)
-     */
-    readonly scrollableIndicatorBackground?: CSSProperties['background'];
-    /**
-     * Inline size (width) of the sidebar.
-     *
-     * @default inherited from ThemeableDesktopLayoutProps.sidebarWidth
-     */
-    readonly width?: CSSProperties['width'];
-}
 export declare const PhxDesktopLayoutName: 'PhxDesktopLayout';
 declare const MuiLayoutComponentName: "PhxDesktopLayout";
 declare const MuiLayoutSlots: {

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

@@ -1,17 +1,10 @@
-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})=>[`
-      --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[`
+import{jsx as t,jsxs as a,Fragment as o}from"react/jsx-runtime";import{keyframes as e,snackbarClasses as i,styled as r,useThemeProps as d}from"@mui/material";import{AnimatePresence as l,motion as s}from"motion/react";import{useCallback as n}from"react";import{useAccessService as u,useIsFullscreenActive as m}from"#package/react-sdk";import{attrf as p,commonStyles as y,numToPx as c,useResponsive as b}from"#package/ui-sdk";import{usePreview as h}from"../../../configurator-context/index.js";import{useIsAssistantPanelOpen as f}from"../../assistant/index.js";import{SidebarKeys as g}from"../sidebar-keys/index.js";import{LayoutSlots as x}from"../slots/index.js";import{DesktopPreview as v}from"./DesktopPreview.js";import{useLayoutSceneSafeArea as k}from"./use-layout-scene-safe-area.js";export const PhxDesktopLayoutName="PhxDesktopLayout";let w="PhxDesktopLayout",C=r(s.div,{name:w,slot:"root",shouldForwardProp:t=>"ownerState"!==t})(({ownerState:t,theme:{spacing:a}})=>{let o=e({"0%":{marginInlineEnd:0},"100%":{marginInlineEnd:a(-2)}});return[`
       --inspect: off;  // 🕹️ inspection mode toggle
 
-      --phx-layout-sidebar-track-size: ${g(a.sidebarWidth)};
+      --phx-layout-sidebar-track-size: ${c(t.sidebarWidth)};
 
-      --phx-layout-gap: ${t(2)};
-      --phx-layout-gutter: ${t(3)};
+      --phx-layout-gap: ${a(2)};
+      --phx-layout-gutter: ${a(3)};
     `,{display:"grid",gridTemplateColumns:`
         [full-start]
         var(--phx-layout-gutter)
@@ -38,12 +31,4 @@ 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=`
-      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(
-      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")]})})};
+      `,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:a(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:a(-2),overflowX:"scroll",overscrollBehavior:"contain",padding:a(2),scrollbarWidth:"none","&::after":{content:'""'}},'[data-layout="slot[body.toolControls]"]':{insetBlockEnd:`calc(100% + ${a(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% + ${a(2)})`,position:"absolute"},'[data-layout="slot[body.sideEffects]"]':{insetInline:0,[`.${i.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*="${g.Minimalist}"])`]:{'[data-layout*="slot[sidebar]"]':{alignContent:"end",gridRow:"main-start / main-end"}},[`&:has([data-header*="floating"]):has([data-sidebar*="${g.Minimalist}"])`]:{'[data-layout*="slot[header]"]':{gridColumnEnd:"sidebar-end"},'[data-layout*="slot[sidebar]"]':{gridRowStart:"top-end"}},[`&:has([data-sidebar*="${g.Assistant}"])`]:{'[data-layout*="slot[sidebar]"]':{alignContent:"stretch"}},[`&:has([data-sidebar*="${g.Hidden}"])`]:{"--phx-layout-gap":0,"--phx-layout-sidebar-track-size":0,'[data-layout*="slot[sidebar]"]':{overflow:"hidden"}}}]}),D=r("div")({gridArea:"1 / 1 / -1 / -1"});export const DesktopLayout=()=>{let{sidebarWidth:e="clamp(360px, 30cqi, 400px)"}=d({props:{},name:w}),{hasMiniSidebar:i}=x.useSidebarContent(),r=f(),{accessInfo:s}=u(),y=m(),{isPreview:c,isHidden:g}=h(),A=!g&&!c,{setAnimating:E}=b(),{containerRef:S,safeAreaRef:T,update:$}=k({enabled:A,hasMiniSidebar:i&&!r}),j=n(()=>{E(!0)},[E]),R=n(()=>{E(!1),$()},[E,$]);return t(o,{children:a(l,{mode:"wait",children:[!g&&c&&t(v,{},"preview-layout"),A&&a(C,{layoutId:"ui-layout",layout:!0,ownerState:{sidebarWidth:e},"data-layout":p({state:{initial:!y,fullscreen:y}}),onLayoutAnimationStart:j,onLayoutAnimationComplete:R,children:[t(D,{ref:S}),t("header",{"data-layout":"slot[header]",children:t(x.DesktopHeader,{})}),a("main",{"data-layout":"slot[body]",children:[t("div",{"data-layout":"slot[body.top] interactive",children:t(x.DesktopCallToAction,{})}),t("div",{ref:T,"data-layout":"slot[body.safeSceneArea]"}),a("div",{"data-layout":"slot[body.bottom] interactive",children:[t("div",{"data-layout":"slot[body.toolbar]",children:t(x.DesktopToolbar,{})}),t("div",{"data-layout":"slot[body.toolControls]",children:!y&&t(x.DesktopToolControls,{})}),t("div",{"data-layout":"slot[body.viewControls]",children:t(x.DesktopViewControls,{})}),t("div",{"data-layout":"slot[body.logo]",children:t(x.DesktopPoweredBy,{})}),t("div",{"data-layout":"slot[body.sideEffects]",children:t(x.DesktopSnackbarsRoot,{})})]})]}),t("aside",{"data-layout":"slot[sidebar]",children:t(x.DesktopSidebar,{width:e})}),a("footer",{"data-layout":"slot[footer] interactive",children:[s.viewMode&&!y&&t(x.DesktopReadonlyBanner,{}),t(x.DesktopFooter,{})]})]},"interface-layout")]})})};

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

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

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

@@ -0,0 +1,5 @@
+/**
+ * Covers the configurator while an export runs, which keeps it inert: a press anywhere shows for a
+ * moment why nothing responds, instead of a configurator that silently ignores the user.
+ */
+export declare const ExportingOverlay: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{Trans as r}from"@lingui/react";import{styled as t}from"@mui/material";import{useCallback as o,useEffect as i,useState as a}from"react";let n=t("div",{name:"PhxExportingOverlay",slot:"root"})(({theme:{zIndex:e}})=>({alignItems:"center",cursor:"wait",display:"flex",inset:0,justifyContent:"center",position:"absolute",zIndex:e.modal+1})),l=t("div",{name:"PhxExportingOverlay",slot:"message"})(({theme:{palette:e,shape:r,shadows:t,spacing:o,typography:i}})=>({...i.body2,background:e.background.paper,borderRadius:r.borderRadius,boxShadow:t[4],color:e.text.primary,padding:o(1,2)}));export const ExportingOverlay=()=>{let[t,s]=a(null),m=o(()=>s(Date.now()),[]);return i(()=>{if(null===t)return;let e=setTimeout(()=>s(null),2e3);return()=>clearTimeout(e)},[t]),e(n,{onPointerDown:m,children:null!==t&&e(l,{role:"status",children:e(r,{id:"sdk.layout.exporting.message",message:"Configurator is exporting… please wait"})})})};

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

@@ -1 +1 @@
-import{jsx as r,jsxs as o,Fragment as s}from"react/jsx-runtime";import{useResponsive as t}from"#package/ui-sdk";import{LayoutSlots as e}from"../slots/index.js";import{DesktopLayout as a}from"./DesktopLayout.js";import{MobileLayout as m}from"./MobileLayout.js";export const Layout=()=>{let{isDesktop:i}=t();return o(s,{children:[r(e.Services,{}),r(e.SharedCanvas,{}),i?r(a,{}):r(m,{})]})};
+import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{useEffect as i}from"react";import{useEagerObservableValue as m}from"#package/react-sdk";import{useResponsive as n}from"#package/ui-sdk";import{useConfigurator as a}from"../../../application-runtime/index.js";import{LayoutSlots as s}from"../slots/index.js";import{DesktopLayout as c}from"./DesktopLayout.js";import{ExportingOverlay as p}from"./ExportingOverlay.js";import{MobileLayout as d}from"./MobileLayout.js";let l=o("div")({display:"contents"});export const Layout=()=>{let{isDesktop:o}=n(),{exportSystem:u}=a(),f=m(u.exporting$);return i(()=>{if(!f)return;let t=document.activeElement;return()=>{t instanceof HTMLElement&&t.isConnected&&document.activeElement===document.body&&t.focus()}},[f]),e(r,{children:[e(l,{...{inert:f?"":void 0},children:[t(s.Services,{}),t(s.SharedCanvas,{}),o?t(c,{}):t(d,{})]}),f&&t(p,{})]})};

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,8 +1,8 @@
-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{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;
-    `,{...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}})=>[`
+    `,{...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: ${b(t.sidebarHeight)};
@@ -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*="${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{usePresetSelection as i,useResolveLocalizable as a}from"#package/react-sdk";import{Preview as r}from"#package/ui-sdk";import{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}=i(),{containerRef:k,safeAreaRef:x,update:y}=n({enabled:b,hasMiniSidebar:!1}),j=a(),w=e(()=>{y()},[y]),S=o(()=>({...u,root:{...c,onLayoutAnimationComplete:w,...u.root}}),[w,u]);return t(r,{title:j(m),buttonLabel:j(p),containerRef:k,safeAreaRef:x,withScene:!g,slots:d,slotProps:S,onStart:f})};