@salsita-ai/sdk 0.0.0-stage → 0.49.0-develop.cbee856178

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

@@ -0,0 +1 @@
+export declare const MobileToolbar: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{memo as o}from"react";import{PhoenixLayoutElementWithChildren as e}from"#package/react-sdk";import{DesktopToolbar as i}from"#package/ui-sdk";import{useToolbarState as t}from"../../../../configurator-context/index.js";export const MobileToolbar=o(()=>{let o=t();return r(i.Root,{children:o?.mobile?.slice().reverse().map((o,i)=>r(e,{kind:o.kind,elementProps:o.props,children:"children"in o?o.children:void 0},`${o.kind}-${i}`))})});

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

@@ -0,0 +1,2 @@
+export { DesktopToolbar } from './DesktopToolbar.js';
+export { MobileToolbar } from './MobileToolbar.js';

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

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

package/dist/configurator/ui/configurator-layout/slots/view-controls/DesktopViewControls.d.ts

@@ -0,0 +1 @@
+export declare const DesktopViewControls: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;

package/dist/configurator/ui/configurator-layout/slots/view-controls/DesktopViewControls.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{memo as e,useCallback as o}from"react";import{groupComponentsByEntityIdAndName as a,viewControlsComponent as l}from"#package/domain";import{useActiveViewState as r,useDomain as i,useLocalizable as n,useStoreSelector as m}from"#package/react-sdk";import{ViewControls as s}from"#package/ui-sdk";let c=e=>{let{icon:o,label:a,value:l}=e,r=n(a);return t(s.Item,{value:l,icon:o,label:r})};export const DesktopViewControls=e(()=>{let{storeSystem:e,componentReader:n,navigationSystem:p}=i(),u=r(),d=m(t=>{let o=n.readManyComponents({componentTypes:[l],entityIds:[e.stateSlices.committed.value.state.rootEntityId]},t.state),r=a(o).get(e.stateSlices.committed.value.state.rootEntityId)?.viewControls,i=r?.[0];return i?i.state:null},[e,n]),v=o((t,o)=>{o&&e.stageAndCommit([p.getViewUpdate(o)])},[e,p]);return u&&d?t(s.Root,{value:u,exclusive:!0,onChange:v,children:d.items.map(e=>t(c,{value:e.value,label:e.label,icon:e.icon},e.value))}):null});

package/dist/configurator/ui/configurator-layout/slots/view-controls/MobileViewControls.d.ts

@@ -0,0 +1 @@
+export declare const MobileViewControls: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;

package/dist/configurator/ui/configurator-layout/slots/view-controls/MobileViewControls.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{List as o,ListItemButton as a,ListItemIcon as n,ListItemText as r}from"@mui/material";import{memo as l,useCallback as s,useMemo as m}from"react";import{groupComponentsByEntityIdAndName as c,viewControlsComponent as d}from"#package/domain";import{useActiveViewState as p,useDomain as u,useResolveLocalizable as h,useStoreSelector as v}from"#package/react-sdk";import{DesktopToolbar as g,PhxIcon as k}from"#package/ui-sdk";let C=({name:t})=>e(k,{name:t}),f=i=>{let{icon:o,label:l,onClick:m,value:c}=i,d=h(),{navigationSystem:p,storeSystem:v}=u();return t(a,{onClick:s(()=>{v.stageAndCommit([p.getViewUpdate(c)]),m()},[p,m,v,c]),children:[e(n,{sx:{minWidth:0,paddingInlineEnd:1.5},children:e(C,{name:o})}),e(r,{primary:d(l)})]})},w={id:"sdk.toolbar.viewControls.title",message:"Switch view"},b="view-controls";export const MobileViewControls=l(()=>{let{componentReader:a,storeSystem:n}=u(),r=p(),l=v(e=>{let t=a.readManyComponents({componentTypes:[d],entityIds:[n.stateSlices.committed.value.state.rootEntityId]},e.state),i=c(t).get(n.stateSlices.committed.value.state.rootEntityId)?.viewControls;return i?.[0]?.state??null},[a,n]),k=h(),{handleClose:x,handleToggle:y,openedKey:E,ref:I}=g.useToolbarPopper(),j=m(()=>l?.items.find(e=>e.value===r)?.icon,[r,l]),S=s(()=>{y(b)},[y]),T=s(()=>{S()},[S]),B=E===b;return l&&r&&j?t(i,{children:[e(g.ButtonGroup,{ref:I,children:e(g.Button,{title:k(w),size:"small","aria-expanded":B?"true":void 0,"aria-label":"view selection menu","aria-haspopup":"menu",onClick:S,children:e(C,{name:j})})}),e(g.Popper,{anchorEl:I.current,placement:"top-start",isOpen:B,onClose:x,children:e(o,{dense:!0,children:l.items.map(t=>e(f,{value:t.value,label:t.label,icon:t.icon,onClick:T},t.value))})})]}):null});

package/dist/configurator/ui/configurator-layout/slots/view-controls/index.d.ts

@@ -0,0 +1,2 @@
+export { DesktopViewControls } from './DesktopViewControls.js';
+export { MobileViewControls } from './MobileViewControls.js';

package/dist/configurator/ui/configurator-layout/slots/view-controls/index.js

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

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

@@ -0,0 +1,107 @@
+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: {
+    readonly Root: 'root';
+};
+type DesktopLayoutSlots = ValueOf<typeof MuiLayoutSlots>;
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiLayoutComponentName]: DesktopLayoutSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiLayoutComponentName]: ThemeableDesktopLayoutProps;
+    }
+    interface Components {
+        [MuiLayoutComponentName]?: {
+            defaultProps?: ComponentsPropsList['PhxDesktopLayout'];
+            styleOverrides?: ComponentsOverrides<Theme>['PhxDesktopLayout'];
+        };
+    }
+}
+export interface ThemeableDesktopLayoutProps {
+    /**
+     * Width of the sidebar column in the layout grid.
+     *
+     * @default 'clamp(360px, 30cqi, 400px)'
+     */
+    readonly sidebarWidth?: CSSProperties['width'];
+}
+export declare const DesktopLayout: () => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,49 @@
+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[`
+      --inspect: off;  // 🕹️ inspection mode toggle
+
+      --phx-layout-sidebar-track-size: ${g(a.sidebarWidth)};
+
+      --phx-layout-gap: ${t(2)};
+      --phx-layout-gutter: ${t(3)};
+    `,{display:"grid",gridTemplateColumns:`
+        [full-start]
+        var(--phx-layout-gutter)
+        [main-start]
+        minmax(0, 1fr)
+        [main-end]
+        var(--phx-layout-gap)
+        [sidebar-start]
+        var(--phx-layout-sidebar-track-size)
+        [sidebar-end]
+        var(--phx-layout-gutter)
+        [full-end]
+      `,gridTemplateRows:`
+        [full-start]
+        var(--phx-layout-gutter)
+        [top-start]
+        min-content
+        [top-end]
+        var(--phx-layout-gutter)
+        [main-start]
+        minmax(0, 1fr)
+        [main-end]
+        var(--phx-layout-gutter)
+        [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")]})})};

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

@@ -0,0 +1,3 @@
+import type { ThemeablePreviewProps } from '#package/ui-sdk';
+export type DesktopPreviewProps = ThemeablePreviewProps;
+export declare const DesktopPreview: (props: DesktopPreviewProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +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})};

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

@@ -0,0 +1 @@
+export declare const Layout: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +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,{})]})};

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

@@ -0,0 +1,99 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { CSSProperties } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+declare const MuiHeaderComponentName: 'PhxMobileHeader';
+declare const MuiHeaderSlots: {
+    readonly Root: 'root';
+};
+type MobileHeaderSlots = ValueOf<typeof MuiHeaderSlots>;
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiHeaderComponentName]: MobileHeaderSlots;
+    }
+    interface Components {
+        [MuiHeaderComponentName]?: {
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiHeaderComponentName];
+        };
+    }
+}
+declare const MuiSidebarComponentName: 'PhxMobileSidebar';
+declare const MuiSidebarSlots: {
+    readonly Root: 'root';
+    readonly Header: 'header';
+    readonly Body: 'body';
+    readonly Content: 'content';
+    readonly Tabs: 'tabs';
+    readonly Footer: 'footer';
+};
+type MobileSidebarSlots = ValueOf<typeof MuiSidebarSlots>;
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiSidebarComponentName]: MobileSidebarSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiSidebarComponentName]: ThemeableMobileSidebarProps;
+    }
+    interface Components {
+        [MuiSidebarComponentName]?: {
+            defaultProps?: ComponentsPropsList['PhxMobileSidebar'];
+            styleOverrides?: ComponentsOverrides<Theme>['PhxMobileSidebar'];
+        };
+    }
+}
+interface SidebarOwnerState {
+    readonly isContentEmpty?: boolean;
+}
+export interface ThemeableMobileSidebarProps extends SidebarOwnerState {
+    /**
+     * Background applied to the sidebar container.
+     *
+     * @default theme.palette.background.paper
+     */
+    readonly background?: CSSProperties['background'];
+    /**
+     * Corner radius of the sidebar container (top corners only).
+     *
+     * @default theme.shape.sidebarBorderRadius ?? theme.shape.borderRadius
+     */
+    readonly borderRadius?: CSSProperties['borderRadius'];
+    /**
+     * Spacing value for sidebar inner padding.
+     * Accepts a theme spacing multiplier or a CSS value.
+     *
+     * @default theme.spacing(2)
+     */
+    readonly padding?: number | string;
+}
+export declare const PhxMobileLayoutName: 'PhxMobileLayout';
+declare const MuiLayoutComponentName: "PhxMobileLayout";
+declare const MuiLayoutSlots: {
+    readonly Root: 'root';
+};
+type MobileLayoutSlots = ValueOf<typeof MuiLayoutSlots>;
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiLayoutComponentName]: MobileLayoutSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiLayoutComponentName]: ThemeableMobileLayoutProps;
+    }
+    interface Components {
+        [MuiLayoutComponentName]?: {
+            defaultProps?: ComponentsPropsList['PhxMobileLayout'];
+            styleOverrides?: ComponentsOverrides<Theme>['PhxMobileLayout'];
+        };
+    }
+}
+interface LayoutOwnerState {
+    readonly isContentEmpty?: boolean;
+}
+export interface ThemeableMobileLayoutProps extends LayoutOwnerState {
+    /**
+     * Height of the sidebar track in the layout grid.
+     *
+     * @default 'min(480px, 50cqb)'
+     */
+    readonly sidebarHeight?: CSSProperties['height'];
+}
+export declare const MobileLayout: () => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+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})=>[`
+      --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}})=>[`
+    --inspect: off;  // 🕹️ inspection mode toggle
+
+    --phx-layout-sidebar-track-size: ${b(t.sidebarHeight)};
+    --phx-layout-gutter: ${a(2)};
+  `,{display:"grid",gridTemplateColumns:`
+      [full-start]
+      minmax(0, 1fr)
+      [full-end]
+    `,gridTemplateRows:`
+      [full-start main-start]
+      minmax(0, 1fr)
+      [main-end sidebar-start]
+      var(--phx-layout-sidebar-track-size)
+      [sidebar-end footer-start]
+      min-content
+      [footer-end full-end]
+    `,inset:0,isolation:"isolate",overflow:"hidden",pointerEvents:"none",position:"absolute",transitionTimingFunction:"ease-in-out","@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[sideEffects]"]':{[`&, .${o.root}`]:{inset:"var(--phx-layout-gutter)",position:"fixed",zIndex:2},[`.${o.root}`]:{alignItems:"unset",flexDirection:"column"}},'[data-layout*="slot[body]"]':{display:"grid",gridArea:"main-start / full-start / main-end / full-end",gridTemplateColumns:`
+        [full-start]
+        var(--phx-layout-gutter)
+        [main-start]
+        minmax(0, 1fr)
+        [main-end]
+        var(--phx-layout-gutter)
+        [full-end]
+      `,gridTemplateRows:`
+        [full-start]
+        var(--phx-layout-gutter)
+        [header-start]
+        min-content
+        [header-end main-start]
+        minmax(0, 1fr)
+        [main-end footer-start]
+        min-content
+        [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,{})})]})]})};

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

@@ -0,0 +1,3 @@
+import type { ThemeablePreviewProps } from '#package/ui-sdk';
+export type MobilePreviewProps = ThemeablePreviewProps;
+export declare const MobilePreview: (props: MobilePreviewProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +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})};

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

@@ -0,0 +1,6 @@
+export { useSceneSafeArea } from './use-scene-safe-area.js';
+export { DesktopPreview } from './DesktopPreview.js';
+export { MobilePreview } from './MobilePreview.js';
+export { DesktopLayout, PhxDesktopLayoutName } from './DesktopLayout.js';
+export { MobileLayout, PhxMobileLayoutName } from './MobileLayout.js';
+export { Layout } from './Layout.js';

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

@@ -0,0 +1 @@
+export{useSceneSafeArea}from"./use-scene-safe-area.js";export{DesktopPreview}from"./DesktopPreview.js";export{MobilePreview}from"./MobilePreview.js";export{DesktopLayout,PhxDesktopLayoutName}from"./DesktopLayout.js";export{MobileLayout,PhxMobileLayoutName}from"./MobileLayout.js";export{Layout}from"./Layout.js";

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

@@ -0,0 +1,34 @@
+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.).
+ *
+ * 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.
+ *
+ * `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 useSceneSafeArea: (setCanvasPadding: (padding: CanvasPadding) => void, hasMiniSidebar: boolean, enabled?: boolean) => {
+    containerRef: (node: HTMLDivElement | null) => void;
+    safeAreaRef: (node: HTMLDivElement | null) => void;
+    update: () => void;
+};

package/dist/configurator/ui/configurator-layout/universal/use-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";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}};

package/dist/configurator/ui/index.d.ts

@@ -0,0 +1,6 @@
+export * from './configurator-layout/index.js';
+export * from './phoenix-entity-elements/index.js';
+export * from './phoenix-layout-elements/index.js';
+export * from './preset-layout/index.js';
+export * as Legacy from './legacy/index.js';
+export * from './ConfiguratorEncapsulatedTheme.js';

package/dist/configurator/ui/index.js

@@ -0,0 +1 @@
+export*from"./configurator-layout/index.js";export*from"./phoenix-entity-elements/index.js";export*from"./phoenix-layout-elements/index.js";export*from"./preset-layout/index.js";export*as Legacy from"./legacy/index.js";export*from"./ConfiguratorEncapsulatedTheme.js";

package/dist/configurator/ui/legacy/chat/Chat.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    variant: 'desktop' | 'mobile';
+}
+/**
+ * @deprecated Legacy UI element, use 'Universal' layout components instead.
+ */
+export declare const Chat: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/legacy/chat/Chat.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Typography as a}from"@mui/material";import{useObservableState as s}from"observable-hooks";import{useCallback as r,useMemo as n,useState as d}from"react";import{useDomainApplication as h,useLocalizable as c}from"#package/react-sdk";import{ExperimentalChatUi as l,PhxIcon as m,useResponsive as g}from"#package/ui-sdk";import{greetingMessages as p}from"./ChatInteractionContainer.js";import{ChatSdk as f}from"./ChatSdk.js";let u={id:"sdk.chat.input.footer.placeholder",message:"Type here ..."};export const Chat=b=>{let{variant:v}=b,{chatSystem:y}=h(),{isDesktop:w}=g(),k=s(y.conversation$,[]),C=s(y.error$,void 0),I=s(y.isReceiving$,!1),A=s(y.receiving$,void 0),x=s(y.augmentation$,{}),{helpers:M}=n(()=>({helpers:x.helpers??[]}),[x]),T=c(u),S=n(()=>k.map(e=>e).flat(),[k]),B=n(()=>!!C,[C]),[P,j]=d(""),D=r(async e=>{j(""),await y.sendMessage({content:e})},[y]),G=r(e=>{j(e.target.value)},[]),W=r(async e=>{e.preventDefault();let t=P.trim();t&&D(t)},[P,D]),$=r(e=>()=>{D(e)},[D]),H="desktop"===v?l.DesktopFooter:l.MobileFooter;return t(o,{children:[e(f.MessageBoard,{messages:S,receiving:A,helpers:M,showError:B,onHelperClick:$,variant:v,MessageProcessor:f.MessageProcessor,greetingScreen:e(l.GreetingScreen,{icon:e(m,{name:"CustomBigAiAssistant",sx:{height:"124px",width:"124px"}}),greetingText:e(i,{id:"sdk.chat.welcome.greeting.message",message:"Ask anything or choose from the most frequently asked"}),helpers:e(l.GreetingHelpers,{helpers:p,onHelperClick:$})})}),e(H,{dialogHeading:e(i,{id:"sdk.chat.disclaimer.dialog.title",message:"Chat disclaimer"}),dialogText:e(i,{id:"sdk.chat.disclaimer.full.message",components:{0:e(a,{variant:"body2"}),1:e(a,{variant:"body2"}),2:e("strong",{}),3:e(a,{variant:"body2"}),4:e("strong",{}),5:e(a,{variant:"body2"}),6:e("strong",{}),7:e(a,{variant:"body2"})},message:"<0>The following disclaimer is intended to inform users of the limitations and usage guidelines of the AI chatbot available on this website. Please read this disclaimer carefully before engaging with the chatbot.</0><1><2>General Information:</2> The AI chatbot is an automated system powered by OpenAI/ChatGPT. It is designed to provide information and assistance based on information it has available about the products offered on this website. While we strive to provide accurate information through the AI chatbot, we cannot guarantee the accuracy, completeness, or up-to-date nature of the information provided. We recommend that you use responses as a starting point and verify the responses with the provider of this information (the owner of this website) or any available product documentation.</1><3><4>User Responsibility:</4> Users of the AI chatbot bear sole responsibility for their interactions and reliance on the information provided. It is important to exercise caution and use your discretion while interpreting and acting upon the chatbot's responses. Neither the owner of this website nor the provider of the chatbot technology can be held liable for any actions, losses, or damages resulting from the use of the chatbot.</3><5><6>Data Privacy and Security:</6> We prioritize the privacy and security of the users' information. Be aware that chatbot conversations may be reviewed by the owner of this website and the provider of the technology to improve results. While OpenAI/ChatGPT retains logs of these conversations for 30 days, this data is not used to train their AI models. Do not share any sensitive or personal information in your conversations.</5><7>By using this AI chatbot, you indicate your acceptance and understanding of the above disclaimer. If you do not agree with any part of this disclaimer, we recommend refraining from using the chatbot.</7>"}),dialogCloseButtonText:e(i,{id:"sdk.chat.disclaimer.close.label",message:"Close"}),inlineMessage:e(i,{id:"sdk.chat.disclaimer.inline.message",message:"Warning! AI can be wrong"}),inlineSeeMoreLink:e(i,{id:"sdk.chat.disclaimer.seeMore.label",message:"see more"}),onChange:G,value:P,placeholder:T,autofocus:w,action:e(f.SendMessageButton,{onSendClick:W,sendDisabled:I})})]})};

package/dist/configurator/ui/legacy/chat/ChatInteractionContainer.d.ts

@@ -0,0 +1,5 @@
+export declare const greetingMessages: never[];
+/**
+ * @deprecated Legacy UI element, use 'Universal' layout components instead.
+ */
+export declare const ChatInteractionContainer: () => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/legacy/chat/ChatInteractionContainer.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{useLocalizable as r}from"#package/react-sdk";import{ExperimentalChatUi as n}from"#package/ui-sdk";import{DesktopChat as o}from"./DesktopChat.js";export const greetingMessages=[];let s={id:"sdk.chat.input.default.placeholder",message:"Search or ask anything ..."};export const ChatInteractionContainer=()=>{let{chatOpen:i,toggleChat:c}=n.useSidebarChatContext(),h=r(s);return t(a,{children:[e(n.SidebarChatAnimatedContainer,{chatOpen:i,children:e(o,{onChatToggle:c})}),e(n.SidebarAnimatedClickableFooter,{placeholder:h,hints:greetingMessages,openChat:c})]})};

package/dist/configurator/ui/legacy/chat/ChatSdk.d.ts

@@ -0,0 +1,11 @@
+import { ChatSendMessageButton } from './ChatSendMessageButton.js';
+import { ChatMessageBoard } from './MessageBoard.js';
+import { ChatMessageProcessor } from './MessageProcessor.js';
+/**
+ * @deprecated Legacy UI element, use 'Universal' layout components instead.
+ */
+export declare const ChatSdk: {
+    MessageBoard: typeof ChatMessageBoard;
+    MessageProcessor: typeof ChatMessageProcessor;
+    SendMessageButton: typeof ChatSendMessageButton;
+};

package/dist/configurator/ui/legacy/chat/ChatSdk.js

@@ -0,0 +1 @@
+import{ChatSendMessageButton as s}from"./ChatSendMessageButton.js";import{ChatMessageBoard as e}from"./MessageBoard.js";import{ChatMessageProcessor as o}from"./MessageProcessor.js";export const ChatSdk={MessageBoard:e,MessageProcessor:o,SendMessageButton:s};

package/dist/configurator/ui/legacy/chat/ChatSendMessageButton.d.ts

@@ -0,0 +1,13 @@
+import type { MessageDescriptor } from '@lingui/core';
+/**
+ * @deprecated Legacy UI element, use 'Universal' layout components instead.
+ */
+export declare const ChatSendMessageButton: ({ sendDisabled, onSendClick, ariaLabel, }: {
+    sendDisabled: boolean;
+    onSendClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * @default
+     * msg({ id: 'sdk.chat.send.button.label', message: 'Send message' })
+     */
+    ariaLabel?: string | MessageDescriptor;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/legacy/chat/ChatSendMessageButton.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{IconButton as a}from"@mui/material";import{useLocalizable as t}from"#package/react-sdk";import{PhxIcon as i}from"#package/ui-sdk";let m={id:"sdk.chat.send.button.label",message:"Send message"};export const ChatSendMessageButton=({sendDisabled:s,onSendClick:r,ariaLabel:o=m})=>e(a,{size:"small",type:"submit",onClick:r,disabled:s,"aria-label":t(o),children:e(i,{name:"PaperPlaneTilt",fontSize:"medium"})});

package/dist/configurator/ui/legacy/chat/CompoundChat.d.ts

@@ -0,0 +1,65 @@
+import type { MessageDescriptor } from '@lingui/core';
+import { type ComponentType, type ReactNode } from 'react';
+export interface ChatProps {
+    variant: 'desktop' | 'mobile';
+}
+interface CompoundChatPropsBase {
+    ChatComponent: ComponentType<ChatProps>;
+}
+interface CompoundDesktopChatProps extends CompoundChatPropsBase {
+    title?: ReactNode;
+    /**
+     * Default chat input placeholder
+     *
+     * @default
+     * msg({ id: 'sdk.chat.compound.defaultPlaceholder', message: 'Search or ask anything ...' })
+     */
+    placeholder?: string | MessageDescriptor;
+    onToggleChat?: (props: {
+        open: boolean;
+    }) => void;
+    /**
+     * Additional action to be displayed in the footer.
+     */
+    action?: ReactNode;
+    /**
+     * Hints that will be displayed in an animated input placeholder.
+     *
+     * Hints can be either translatable or not. If they are translatable,
+     * they should be provided in a `MessageDescriptor` form, so their can be
+     * translated lazily. If plain `string` is provided, hint will not be
+     * translated.
+     *
+     * @see https://lingui.dev/tutorials/react-patterns#lazy-translations
+     *
+     * @example
+     * import { msg } from '@lingui/core/macro'
+     *
+     * const hints = [msg`Hint 1`, msg`Hint 2`]
+     */
+    hints?: string[];
+}
+/**
+ * Ready to use precomposed Chat component.
+ *
+ * @use
+ * This should be passed into `<Sidebar />` via `contentFooter` prop.
+ */
+declare const CompoundDesktopChat: (props: CompoundDesktopChatProps) => import("react/jsx-runtime").JSX.Element;
+interface CompoundMobileChatProps extends CompoundChatPropsBase {
+}
+/**
+ * Ready to use precomposed Chat component for mobile layout.
+ *
+ * @use
+ * This should be passed into `<MobileControls />` as a part of `MobileControlsConfig`.
+ */
+declare const CompoundMobileChat: (props: CompoundMobileChatProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Legacy UI element, use 'Universal' layout components instead.
+ */
+export declare const CompoundChat: {
+    Desktop: typeof CompoundDesktopChat;
+    Mobile: typeof CompoundMobileChat;
+};
+export {};

package/dist/configurator/ui/legacy/chat/CompoundChat.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{useCallback as r,useState as o}from"react";import{useLocalizable as i}from"#package/react-sdk";import{ExperimentalChatUi as n}from"#package/ui-sdk";let d={id:"sdk.chat.input.default.placeholder",message:"Search or ask anything ..."};export const CompoundChat={Desktop:l=>{let{ChatComponent:s,title:c,placeholder:h=d,onToggleChat:p,action:m,hints:k}=l,[C,g]=o(!1),u=i(h),b=r(()=>{g(e=>(p?.({open:C}),!e))},[p,C]);return t(a,{children:[e(n.SidebarChatAnimatedContainer,{chatOpen:C,children:t(n.ChatRoot,{variant:"desktop",children:[e(n.DesktopHeader,{onChatToggle:b,children:c}),e(s,{variant:"desktop"})]})}),e(n.SidebarAnimatedClickableFooter,{placeholder:u,openChat:b,action:m,hints:k})]})},Mobile:t=>{let{ChatComponent:a}=t;return e(n.ChatRoot,{variant:"mobile",children:e(a,{variant:"mobile"})})}};