@salsita-ai/sdk 0.50.0-develop.8f6deac646 → 0.50.0-develop.9267bdc12e

package/dist/configurator/common/configurator-interface.js

@@ -1 +1 @@
-import{createCustomPhoenixEntityElement as e,createCustomPhoenixLayoutElement as t,createGetThemeHandler as r,createGetWebComponentOptionsHandler as o,createPhoenixHandler as i,createTransformer as s,createTransformerBuilder as a,createUpdateFactory as n,getIdSequence as m,isCreateEntityUpdate as p,isReplaceEntityUpdate as u}from"#package/domain";import{createCollectFrontendDataHandler as d,createFilterPublishedChunksHandler as c,createNotAuthenticatedPage as f,isAngleDimensionUpdate as g,isAttributeSelectionUpdate as j,isAttributeSwitchUpdate as l,isDeleteEntityUpdate as x,isDistanceDimensionUpdate as y,isGenericDimensionUpdate as k,isSwatchSelectionUpdate as h,isTextValueUpdate as S,useAccessService as E,useActiveNavigationState as I,useActiveToolState as q,useActiveViewState as A,useAnalyticsService as B,useAngleDimension as C,useAttributeSelection as P,useAttributeSwitch as R,useAuthenticatedClient as U,useAuthorizedClient as b,useBackendData as v,useChildEntitySelection as w,useCommittedSlice as z,useCommittedState as D,useComponent as F,useComponents as G,useComposition as H,useConfigurationId as J,useControlViolations as K,useCookRecipes as L,useCookReplaceRecipes as M,useCookedRecipes as N,useCookedReplaceRecipes as O,useCreateAuthorizedClient as Q,useDeleteEntity as T,useDeletedEntity as V,useDeselect as W,useDistanceDimension as X,useDistanceDimensionSelection as Y,useDomain as Z,useDomainApplication as $,useDomainApplicationProps as _,useDomainEntityRenderedState as ee,useDomainEntityState as et,useEntityPrice as er,useEntitySelector as eo,useFinalizeViolations as ei,useFirstComponent as es,useFirstRenderedComponent as ea,useFirstRootComponent as en,useFirstRootRenderedComponent as em,useFrontendData as ep,useGenericDimension as eu,useGroupedRecipeOptions as ed,useHoveredDomainEntityId as ec,useHoveredEntity as ef,useHoveredEntityId as eg,useIntegrationService as ej,useIntegrationState as el,useIsFullscreenActive as ex,useLoadedData as ey,useLoadingState as ek,useLoadingStateValue as eh,useMapViolationHints as eS,useNavigate as eE,usePopNavigate as eI,usePresetEmbeddedState as eq,usePublishedData as eA,usePushNavigate as eB,useRecipeEmbeddedState as eC,useRenderedComponent as eP,useRenderedComponents as eR,useRenderedEntitySelector as eU,useRenderedRootEntitySelector as eb,useRenderedSelector as ev,useRenderedSelector$ as ew,useRenderedSlice as ez,useRenderedState as eD,useReplaceEntityRecipeOptions as eF,useRootComponents as eG,useRootEntityId as eH,useRootEntityPrice as eJ,useRootEntityRenderedId as eK,useRootEntityRenderedState as eL,useRootEntitySelector as eM,useRootEntityState as eN,useRootRenderedComponents as eO,useSelectEntity as eQ,useSelectParent as eT,useSelectedDomainEntityId as eV,useSelectedEntity as eW,useSelectedEntityId as eX,useSession as eY,useSessionRole as eZ,useSessionService as e$,useStateValidity as e_,useStoreSelector as e0,useStoreSelector$ as e1,useSwatchSelection as e2,useTextValue as e3,useUpdateControl as e4,useUpdatedControl as e5}from"#package/react-sdk";import{createPhoenixIconSet as e6}from"#package/ui-sdk";import{useConfigurator as e7}from"../application-runtime/index.js";import{createOnApplicationStartProvider as e8,createOnBackendDataReadyProvider as e9,createOnConfiguratorReadyProvider as te,createOnFrontendDataReadyProvider as tt,createOnGoToIndexHandler as tr,createOnPresetLoadedHandler as to,createOnPublishedDataReadyProvider as ti,createOnRoutingReadyProvider as ts,createOnSessionReadyProvider as ta,useConfiguratorRouting as tn,usePresetSelection as tm,usePropertyPageStack as tp,usePropertyPageState as tu}from"../configurator-context/index.js";import{createGetTextureProcessingMapHandler as td}from"../scene/index.js";import{useUpdateEntityObjectSelection as tc}from"../scene/scene-entity/drag-and-drop/use-updated-selection.js";import{createAppLoader as tf,createCanvasLoader as tg,createLayoutAdminUi as tj,createLayoutCustomOwnerUi as tl,createLayoutCustomReadUi as tx,createLayoutDialog as ty,createLayoutFooter as tk,createLayoutToolbarDesktop as th,createLayoutToolbarDesktopFullScreen as tS,createLayoutToolbarReadDesktop as tE,createLayoutToolbarReadDesktopFullScreen as tI,createLayoutUserUi as tq,createToolbarHelp as tA}from"../ui/index.js";import{useGenerateShareLink as tB}from"../ui/phoenix-layout-elements/share/use-share.js";import{createPresetDeviceNotSupported as tC,createPresetPageAction as tP,createPresetUi as tR}from"../ui/preset-layout/PresetUi.js";export const createConfiguratorInterface=tU=>({updates:n(),getIdSequence:m,createGetWebComponentOptionsHandler:o,createGetThemeHandler:r,createPhoenixHandler:i,createCustomPhoenixEntityElement:e,createCustomPhoenixLayoutElement:t,createPhoenixIconSet:e6,createGetTextureProcessingMapHandler:td,createCollectFrontendDataHandler:d,createFilterPublishedChunksHandler:c,createOnGoToIndexHandler:tr,createOnApplicationStartProvider:e8,createOnSessionReadyProvider:ta,createOnPublishedDataReadyProvider:ti,createOnFrontendDataReadyProvider:tt,createOnBackendDataReadyProvider:e9,createOnRoutingReadyProvider:ts,createOnConfiguratorReadyProvider:te,createOnPresetLoadedHandler:to,createPresetUi:tR,createPresetPageAction:tP,createPresetDeviceNotSupported:tC,createLayoutFooter:tk,createAppLoader:tf,createCanvasLoader:tg,createLayoutDialog:ty,createLayoutToolbarDesktop:th,createLayoutToolbarDesktopFullScreen:tS,createLayoutToolbarReadDesktop:tE,createLayoutToolbarReadDesktopFullScreen:tI,createLayoutCustomOwnerUi:tl,createLayoutCustomReadUi:tx,createLayoutAdminUi:tj,createLayoutUserUi:tq,createToolbarHelp:tA,createNotAuthenticatedPage:f,createTransformer:s,transformerBuilder:a(),useAnalytics:B,useAuthenticatedClient:U,useAuthorizedClient:b,useCreateAuthorizedClient:Q,useAccessService:E,useConfigurationId:J,useSession:eY,useSessionRole:eZ,useSessionService:e$,useDomain:Z,useDomainApplication:$,useConfigurator:e7,useConfiguratorRouting:tn,usePresetSelection:tm,usePublishedData:eA,useFrontendData:ep,useBackendData:v,useDomainApplicationProps:_,useLoadedData:ey,useIntegrationService:ej,useIntegrationState:el,usePresetEmbeddedState:eq,useRecipeEmbeddedState:eC,useCommittedSlice:z,useRenderedSlice:ez,useCommittedState:D,useRenderedState:eD,useStoreSelector:e0,useRenderedSelector:ev,useStoreSelector$:e1,useRenderedSelector$:ew,useEntitySelector:eo,useRenderedEntitySelector:eU,useRootEntitySelector:eM,useRenderedRootEntitySelector:eb,useStateValidity:e_,useMapViolationHints:eS,useNavigate:eE,usePopNavigate:eI,usePushNavigate:eB,useControlViolations:K,useFinalizeViolations:ei,useComponent:F,useRenderedComponent:eP,useComponents:G,useRenderedComponents:eR,useFirstComponent:es,useFirstRenderedComponent:ea,useRootComponents:eG,useRootRenderedComponents:eO,useFirstRootComponent:en,useFirstRootRenderedComponent:em,useEntityState:et,useEntityRenderedState:ee,useRootEntityState:eN,useRootEntityRenderedState:eL,useRootEntityId:eH,useRootEntityRenderedId:eK,useEntityPrice:er,useRootEntityPrice:eJ,useSelectedEntity:eW,useSelectedEntityId:eX,useSelectedDomainEntityId:eV,useSelectEntity:eQ,useDeselect:W,useSelectParent:eT,useHoveredEntity:ef,useHoveredEntityId:eg,useHoveredDomainEntityId:ec,useActiveNavigationState:I,useActiveViewState:A,useActiveToolState:q,useIsFullscreenActive:ex,useComposition:H,useUpdateControl:e4,useUpdatedControl:e5,useCookRecipes:L,useCookedRecipes:N,useCookReplaceRecipes:M,useCookedReplaceRecipes:O,useDeleteEntity:T,useDeletedEntity:V,useSwatchSelection:e2,useTextValue:e3,useAttributeSelection:P,useAttributeSwitch:R,useDistanceDimension:X,useDistanceDimensionSelection:Y,useGenericDimension:eu,useAngleDimension:C,useChildEntitySelection:w,useGroupedRecipeOptions:ed,useReplaceEntityRecipeOptions:eF,useUpdateEntityObjectSelection:tc,useGenerateShareLink:tB,useLoadingState:ek,useLoadingStateValue:eh,usePropertyPageStack:tp,usePropertyPageState:tu,isCreateEntityUpdate:p,isReplaceEntityUpdate:u,isDeleteEntityUpdate:x,isAngleDimensionUpdate:g,isDistanceDimensionUpdate:y,isGenericDimensionUpdate:k,isAttributeSelectionUpdate:j,isAttributeSwitchUpdate:l,isTextValueUpdate:S,isSwatchSelectionUpdate:h});
+import{createCustomPhoenixEntityElement as e,createCustomPhoenixLayoutElement as t,createGetThemeHandler as r,createGetWebComponentOptionsHandler as o,createPhoenixHandler as i,createTransformer as s,createTransformerBuilder as a,createUpdateFactory as n,getIdSequence as m,isCreateEntityUpdate as p,isReplaceEntityUpdate as u}from"#package/domain";import{createCollectFrontendDataHandler as d,createFilterPublishedChunksHandler as c,createNotAuthenticatedPage as f,isAngleDimensionUpdate as g,isAttributeSelectionUpdate as j,isAttributeSwitchUpdate as l,isDeleteEntityUpdate as x,isDistanceDimensionUpdate as y,isGenericDimensionUpdate as k,isSwatchSelectionUpdate as h,isTextValueUpdate as S,useAccessService as E,useActiveNavigationState as I,useActiveToolState as q,useActiveViewState as A,useAnalyticsService as B,useAngleDimension as C,useAttributeSelection as P,useAttributeSwitch as R,useAuthenticatedClient as U,useAuthorizedClient as b,useBackendData as v,useChildEntitySelection as w,useCommittedSlice as z,useCommittedState as D,useComponent as F,useComponents as G,useComposition as H,useConfigurationId as J,useControlViolations as K,useCookRecipes as L,useCookReplaceRecipes as M,useCookedRecipes as N,useCookedReplaceRecipes as O,useCreateAuthorizedClient as Q,useDeleteEntity as T,useDeletedEntity as V,useDeselect as W,useDistanceDimension as X,useDistanceDimensionSelection as Y,useDomain as Z,useDomainApplication as $,useDomainApplicationProps as _,useDomainEntityRenderedState as ee,useDomainEntityState as et,useEntityPrice as er,useEntitySelector as eo,useFinalizeViolations as ei,useFirstComponent as es,useFirstRenderedComponent as ea,useFirstRootComponent as en,useFirstRootRenderedComponent as em,useFrontendData as ep,useGenericDimension as eu,useGroupedRecipeOptions as ed,useHoveredDomainEntityId as ec,useHoveredEntity as ef,useHoveredEntityId as eg,useIntegrationService as ej,useIntegrationState as el,useIsFullscreenActive as ex,useLoadedData as ey,useLoadingState as ek,useLoadingStateValue as eh,useMapViolationHints as eS,useNavigate as eE,usePopNavigate as eI,usePresetEmbeddedState as eq,usePublishedData as eA,usePushNavigate as eB,useRecipeEmbeddedState as eC,useRenderedComponent as eP,useRenderedComponents as eR,useRenderedEntitySelector as eU,useRenderedRootEntitySelector as eb,useRenderedSelector as ev,useRenderedSelector$ as ew,useRenderedSlice as ez,useRenderedState as eD,useReplaceEntityRecipeOptions as eF,useRootComponents as eG,useRootEntityId as eH,useRootEntityPrice as eJ,useRootEntityRenderedId as eK,useRootEntityRenderedState as eL,useRootEntitySelector as eM,useRootEntityState as eN,useRootRenderedComponents as eO,useSelectEntity as eQ,useSelectParent as eT,useSelectedDomainEntityId as eV,useSelectedEntity as eW,useSelectedEntityId as eX,useSession as eY,useSessionRole as eZ,useSessionService as e$,useSetFullscreen as e_,useStateValidity as e0,useStoreSelector as e1,useStoreSelector$ as e2,useSwatchSelection as e3,useTextValue as e4,useUpdateControl as e5,useUpdatedControl as e6}from"#package/react-sdk";import{createPhoenixIconSet as e7}from"#package/ui-sdk";import{useConfigurator as e8}from"../application-runtime/index.js";import{createOnApplicationStartProvider as e9,createOnBackendDataReadyProvider as te,createOnConfiguratorReadyProvider as tt,createOnFrontendDataReadyProvider as tr,createOnGoToIndexHandler as to,createOnPresetLoadedHandler as ti,createOnPublishedDataReadyProvider as ts,createOnRoutingReadyProvider as ta,createOnSessionReadyProvider as tn,useConfiguratorRouting as tm,usePresetSelection as tp,usePropertyPageStack as tu,usePropertyPageState as td}from"../configurator-context/index.js";import{createGetTextureProcessingMapHandler as tc}from"../scene/index.js";import{useUpdateEntityObjectSelection as tf}from"../scene/scene-entity/drag-and-drop/use-updated-selection.js";import{createAppLoader as tg,createCanvasLoader as tj,createLayoutAdminUi as tl,createLayoutCustomOwnerUi as tx,createLayoutCustomReadUi as ty,createLayoutDialog as tk,createLayoutFooter as th,createLayoutToolbarDesktop as tS,createLayoutToolbarDesktopFullScreen as tE,createLayoutToolbarReadDesktop as tI,createLayoutToolbarReadDesktopFullScreen as tq,createLayoutUserUi as tA,createToolbarHelp as tB}from"../ui/index.js";import{useGenerateShareLink as tC}from"../ui/phoenix-layout-elements/share/use-share.js";import{createPresetDeviceNotSupported as tP,createPresetPageAction as tR,createPresetUi as tU}from"../ui/preset-layout/PresetUi.js";export const createConfiguratorInterface=tb=>({updates:n(),getIdSequence:m,createGetWebComponentOptionsHandler:o,createGetThemeHandler:r,createPhoenixHandler:i,createCustomPhoenixEntityElement:e,createCustomPhoenixLayoutElement:t,createPhoenixIconSet:e7,createGetTextureProcessingMapHandler:tc,createCollectFrontendDataHandler:d,createFilterPublishedChunksHandler:c,createOnGoToIndexHandler:to,createOnApplicationStartProvider:e9,createOnSessionReadyProvider:tn,createOnPublishedDataReadyProvider:ts,createOnFrontendDataReadyProvider:tr,createOnBackendDataReadyProvider:te,createOnRoutingReadyProvider:ta,createOnConfiguratorReadyProvider:tt,createOnPresetLoadedHandler:ti,createPresetUi:tU,createPresetPageAction:tR,createPresetDeviceNotSupported:tP,createLayoutFooter:th,createAppLoader:tg,createCanvasLoader:tj,createLayoutDialog:tk,createLayoutToolbarDesktop:tS,createLayoutToolbarDesktopFullScreen:tE,createLayoutToolbarReadDesktop:tI,createLayoutToolbarReadDesktopFullScreen:tq,createLayoutCustomOwnerUi:tx,createLayoutCustomReadUi:ty,createLayoutAdminUi:tl,createLayoutUserUi:tA,createToolbarHelp:tB,createNotAuthenticatedPage:f,createTransformer:s,transformerBuilder:a(),useAnalytics:B,useAuthenticatedClient:U,useAuthorizedClient:b,useCreateAuthorizedClient:Q,useAccessService:E,useConfigurationId:J,useSession:eY,useSessionRole:eZ,useSessionService:e$,useDomain:Z,useDomainApplication:$,useConfigurator:e8,useConfiguratorRouting:tm,usePresetSelection:tp,usePublishedData:eA,useFrontendData:ep,useBackendData:v,useDomainApplicationProps:_,useLoadedData:ey,useIntegrationService:ej,useIntegrationState:el,usePresetEmbeddedState:eq,useRecipeEmbeddedState:eC,useCommittedSlice:z,useRenderedSlice:ez,useCommittedState:D,useRenderedState:eD,useStoreSelector:e1,useRenderedSelector:ev,useStoreSelector$:e2,useRenderedSelector$:ew,useEntitySelector:eo,useRenderedEntitySelector:eU,useRootEntitySelector:eM,useRenderedRootEntitySelector:eb,useStateValidity:e0,useMapViolationHints:eS,useNavigate:eE,usePopNavigate:eI,usePushNavigate:eB,useControlViolations:K,useFinalizeViolations:ei,useComponent:F,useRenderedComponent:eP,useComponents:G,useRenderedComponents:eR,useFirstComponent:es,useFirstRenderedComponent:ea,useRootComponents:eG,useRootRenderedComponents:eO,useFirstRootComponent:en,useFirstRootRenderedComponent:em,useEntityState:et,useEntityRenderedState:ee,useRootEntityState:eN,useRootEntityRenderedState:eL,useRootEntityId:eH,useRootEntityRenderedId:eK,useEntityPrice:er,useRootEntityPrice:eJ,useSelectedEntity:eW,useSelectedEntityId:eX,useSelectedDomainEntityId:eV,useSelectEntity:eQ,useDeselect:W,useSelectParent:eT,useHoveredEntity:ef,useHoveredEntityId:eg,useHoveredDomainEntityId:ec,useActiveNavigationState:I,useActiveViewState:A,useActiveToolState:q,useIsFullscreenActive:ex,useSetFullscreen:e_,useComposition:H,useUpdateControl:e5,useUpdatedControl:e6,useCookRecipes:L,useCookedRecipes:N,useCookReplaceRecipes:M,useCookedReplaceRecipes:O,useDeleteEntity:T,useDeletedEntity:V,useSwatchSelection:e3,useTextValue:e4,useAttributeSelection:P,useAttributeSwitch:R,useDistanceDimension:X,useDistanceDimensionSelection:Y,useGenericDimension:eu,useAngleDimension:C,useChildEntitySelection:w,useGroupedRecipeOptions:ed,useReplaceEntityRecipeOptions:eF,useUpdateEntityObjectSelection:tf,useGenerateShareLink:tC,useLoadingState:ek,useLoadingStateValue:eh,usePropertyPageStack:tu,usePropertyPageState:td,isCreateEntityUpdate:p,isReplaceEntityUpdate:u,isDeleteEntityUpdate:x,isAngleDimensionUpdate:g,isDistanceDimensionUpdate:y,isGenericDimensionUpdate:k,isAttributeSelectionUpdate:j,isAttributeSwitchUpdate:l,isTextValueUpdate:S,isSwatchSelectionUpdate:h});

package/dist/configurator/pages/DefaultConfiguratorLayout.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The built-in UI of a loaded configuration: the layout the spec's `layout` selects, in owner or
+ * read mode. `LoadedConfiguratorDetailPage` renders it when the project registers no layout element
+ * named `ConfiguratorLayout`.
+ */
+export declare const DefaultConfiguratorLayout: () => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/DefaultConfiguratorLayout.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as e,Fragment as t}from"react/jsx-runtime";import{useMemo as a}from"react";import{match as o}from"ts-pattern";import{useAccessService as i}from"#package/react-sdk";import{useLayoutSystemConfig as m}from"../configurator-context/index.js";import{Layout as n,LayoutCustomOwnerUi as u,LayoutCustomReadUi as s,LayoutDialog as d,Legacy as w}from"../ui/index.js";export const DefaultConfiguratorLayout=()=>{let{accessInfo:p}=i(),y=m(),{ownerUi:l,readUi:c}=a(()=>o(y.layout).with("simple",()=>({ownerUi:r(w.SimpleOwnerLayout,{}),readUi:r(w.SummaryReadLayout,{})})).with("tabs",()=>({ownerUi:r(w.TabsOwnerLayout,{}),readUi:r(w.SummaryReadLayout,{})})).with("steps",()=>({ownerUi:r(w.StepsOwnerLayout,{}),readUi:r(w.SummaryReadLayout,{})})).with("universal",()=>({ownerUi:r(n,{}),readUi:r(n,{})})).with("custom",()=>({ownerUi:r(u,{}),readUi:r(s,{})})).exhaustive(),[y.layout]);return e(t,{children:[p.viewMode?c:l,"universal"===y.layout&&e(t,{children:[r(w.CommonFinalizePage,{}),r(d,{})]})]})};

package/dist/configurator/pages/LoadedConfiguratorDetailPage.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o,Fragment as i}from"react/jsx-runtime";import r from"mui-modal-provider";import{memo as n,useCallback as t,useEffect as a,useMemo as d}from"react";import{match as s}from"ts-pattern";import{InvalidAccessKeyError as l}from"#package/client";import{BuiltInLoadingPhase as u,CommonAnalyticsFactory as m,DomainLifecycleBoundary as c,LoadedDataProvider as f,useAccessService as p,useAnalyticsService as g,useAuthorizedClient as v,useConfiguratorDomainFactory as w,useConfiguratorLoadStatus as y,useConfiguratorRawLoadedData as h,useExpectPhase as I,useLoadedDataActions as j,useLoadingError as x,useLoadingPhase as C,useLogger as b,useRoutingService as k,useSpecAssistant as L}from"#package/react-sdk";import{useConfigurator as U}from"../application-runtime/index.js";import{IntegrationSubscription as M,OnConfiguratorReadyProvider as S,ViewportStateSync as E,useLayoutSystemConfig as F}from"../configurator-context/index.js";import{Layout as R,Legacy as D}from"../ui/index.js";import{LayoutCustomOwnerUi as T,LayoutCustomReadUi as P,LayoutDialog as A}from"../ui/phoenix-layout-elements/index.js";import{ConfiguratorNotFoundPage as O}from"./ConfiguratorNotFoundPage.js";import{DevContextFallback as V}from"./error-boundaries/DevContextFallback.js";import{DevLoadingFallback as q}from"./error-boundaries/DevLoadingFallback.js";import{LoadingErrorBoundary as z}from"./error-boundaries/LoadingErrorBoundary.js";import{useLoad as B}from"./use-load.js";let G=n(n=>{let{viewMode:t}=n,l=F();(()=>{let{assistantSystem:e}=U(),o=null!=L();a(()=>{if(o)return e.activate()},[e,o])})();let{ownerUi:u,readUi:m}=d(()=>s(l.layout).with("simple",()=>({ownerUi:e(D.SimpleOwnerLayout,{}),readUi:e(D.SummaryReadLayout,{})})).with("tabs",()=>({ownerUi:e(D.TabsOwnerLayout,{}),readUi:e(D.SummaryReadLayout,{})})).with("steps",()=>({ownerUi:e(D.StepsOwnerLayout,{}),readUi:e(D.SummaryReadLayout,{})})).with("universal",()=>({ownerUi:e(R,{}),readUi:e(R,{})})).with("custom",()=>({ownerUi:e(T,{}),readUi:e(P,{})})).exhaustive(),[l.layout]);return e(r,{children:o(S,{children:[t?m:u,"universal"===l.layout&&o(i,{children:[e(D.CommonFinalizePage,{}),e(A,{})]})]})})});export const LoadedConfiguratorDetailPage=()=>{I(u.SceneAssets);let{configurationId:i,accessInfo:r}=p(),n=v(),a=k(),d=b(),s=g(),{startConfiguratorLoad:L,completeConfiguratorLoad:U,failConfiguratorLoad:S,resetConfiguratorLoad:F}=j(),{isLoading:R,isError:D}=y(),T=h(),P=w(),A=t(()=>r.viewMode&&void 0!==r.revisionId?n.getConfigurationRevision(i,r.revisionId):n.getConfiguration(i),[r.revisionId,r.viewMode,n,i]),N=t(()=>{L()},[L]),H=t(e=>{U({initialRevisionId:e.revisionId,initialEntities:e.data,modelVersion:e.modelVersion,rootEntityType:e.rootEntityType,schemaIdentity:P}),s.push(m.ConfigurationLoaded(e.configurationId,e.revisionId,r.viewMode?"read":"owner")),d.appendToGlobalContext({configurationId:e.configurationId,revisionId:e.revisionId,mode:r.viewMode}),d.info("Configuration loaded.")},[r.viewMode,s,U,P,d]),J=t(e=>{if(S(e),e instanceof l)return void a.rejectAccessToken(i,r.raw);let o=e instanceof Error?e:Error("Configuration loading failed with an unknown error.",{cause:e});d.error("Configuration loading failed because the API request did not succeed. Verify the configuration ID and access token.",{configurationId:i},o)},[r.raw,i,S,d,a]),K=t(()=>{F()},[F]);return(B({key:[n,i,r.revisionId,r.viewMode],load:A,onStart:N,onSuccess:H,onError:J,onCleanup:K}),C({id:u.DataFetch,label:"Loading configuration…"},R),x(D),D)?e(O,{}):null===T?null:e(f,{value:T,children:e(z,{fallbackRender:o=>e(q,{...o}),children:e(c,{type:"configurator",children:e(z,{FallbackComponent:V,children:o(M,{children:[e(E,{}),e(G,{viewMode:r.viewMode})]})})})})})};
+import{jsx as o,jsxs as r}from"react/jsx-runtime";import e from"mui-modal-provider";import{memo as i,useCallback as n,useEffect as t}from"react";import{InvalidAccessKeyError as a}from"#package/client";import{BuiltInLoadingPhase as d,CommonAnalyticsFactory as s,DomainLifecycleBoundary as l,LoadedDataProvider as u,PhoenixLayoutElement as c,useAccessService as f,useAnalyticsService as m,useAuthorizedClient as g,useConfiguratorDomainFactory as p,useConfiguratorLoadStatus as v,useConfiguratorRawLoadedData as I,useExpectPhase as C,useLoadedDataActions as h,useLoadingError as j,useLoadingPhase as k,useLogger as w,useRoutingService as y,useSpecAssistant as b}from"#package/react-sdk";import{useConfigurator as x}from"../application-runtime/index.js";import{IntegrationSubscription as E,OnConfiguratorReadyProvider as L,ViewportStateSync as D}from"../configurator-context/index.js";import{ConfiguratorNotFoundPage as M}from"./ConfiguratorNotFoundPage.js";import{DefaultConfiguratorLayout as F}from"./DefaultConfiguratorLayout.js";import{DevContextFallback as S}from"./error-boundaries/DevContextFallback.js";import{DevLoadingFallback as T}from"./error-boundaries/DevLoadingFallback.js";import{LoadingErrorBoundary as A}from"./error-boundaries/LoadingErrorBoundary.js";import{useLoad as P}from"./use-load.js";let R=i(()=>((()=>{let{assistantSystem:o}=x(),r=null!=b();t(()=>{if(r)return o.activate()},[o,r])})(),o(e,{children:o(L,{children:o(c,{name:"ConfiguratorLayout",defaultSlot:F})})})));export const LoadedConfiguratorDetailPage=()=>{C(d.SceneAssets);let{configurationId:e,accessInfo:i}=f(),t=g(),c=y(),b=w(),x=m(),{startConfiguratorLoad:L,completeConfiguratorLoad:F,failConfiguratorLoad:V,resetConfiguratorLoad:q}=h(),{isLoading:B,isError:G}=v(),N=I(),z=p(),H=n(()=>i.viewMode&&void 0!==i.revisionId?t.getConfigurationRevision(e,i.revisionId):t.getConfiguration(e),[i.revisionId,i.viewMode,t,e]),J=n(()=>{L()},[L]),K=n(o=>{F({initialRevisionId:o.revisionId,initialEntities:o.data,modelVersion:o.modelVersion,rootEntityType:o.rootEntityType,schemaIdentity:z}),x.push(s.ConfigurationLoaded(o.configurationId,o.revisionId,i.viewMode?"read":"owner")),b.appendToGlobalContext({configurationId:o.configurationId,revisionId:o.revisionId,mode:i.viewMode}),b.info("Configuration loaded.")},[i.viewMode,x,F,z,b]),O=n(o=>{if(V(o),o instanceof a)return void c.rejectAccessToken(e,i.raw);let r=o instanceof Error?o:Error("Configuration loading failed with an unknown error.",{cause:o});b.error("Configuration loading failed because the API request did not succeed. Verify the configuration ID and access token.",{configurationId:e},r)},[i.raw,e,V,b,c]),Q=n(()=>{q()},[q]);return(P({key:[t,e,i.revisionId,i.viewMode],load:H,onStart:J,onSuccess:K,onError:O,onCleanup:Q}),k({id:d.DataFetch,label:"Loading configuration…"},B),j(G),G)?o(M,{}):null===N?null:o(u,{value:N,children:o(A,{fallbackRender:r=>o(T,{...r}),children:o(l,{type:"configurator",children:o(A,{FallbackComponent:S,children:r(E,{children:[o(D,{}),o(R,{})]})})})})})};

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

@@ -1,80 +1,7 @@
 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 type { ThemeableDesktopSidebarProps } from './DesktopSidebar.js';
 export declare const PhxDesktopLayoutName: 'PhxDesktopLayout';
 declare const MuiLayoutComponentName: "PhxDesktopLayout";
 declare const MuiLayoutSlots: {
@@ -104,4 +31,3 @@ export interface ThemeableDesktopLayoutProps {
     readonly sidebarWidth?: CSSProperties['width'];
 }
 export declare const DesktopLayout: () => import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -0,0 +1,92 @@
+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'];
+        };
+    }
+}
+export declare const SidebarKeys: {
+    readonly Minimalist: 'minimalist';
+    readonly Split: 'split';
+    readonly Visible: 'visible';
+    readonly Hidden: 'hidden';
+    readonly Assistant: 'assistant';
+};
+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'];
+}
+interface DesktopSidebarProps {
+    /**
+     * Inline size (width) of the sidebar. The layout passes the width of its sidebar column.
+     */
+    readonly width: CSSProperties['width'];
+}
+export declare const DesktopSidebar: ({ width }: DesktopSidebarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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

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

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

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

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

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

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

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

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

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

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