@salsita-ai/sdk 0.50.0-develop.dede205ab0 → 0.50.0-develop.e33c8d8711

package/dist/configurator/ui/assistant/form/parse-form-block.d.ts

@@ -0,0 +1,9 @@
+import type { FormModel } from './form-model.js';
+import type { FormRegistry } from './form-registry.js';
+/**
+ * Builds a form from the markup of a ```` ```form ```` fence. A block whose only content is loose
+ * options asks one question, so they form an implicit `choice`; elsewhere loose options form an
+ * implicit `choices`. A block with any unknown element, invalid attribute or misplaced element is
+ * not built at all, and every such error is returned.
+ */
+export declare const parseFormBlock: (source: string, registry: FormRegistry) => FormModel;

package/dist/configurator/ui/assistant/form/parse-form-block.js

@@ -0,0 +1 @@
+import{Parser as e}from"htmlparser2";import{readFormAttributes as o}from"./read-form-attributes.js";let r=({name:e,attributes:o,position:r})=>({element:e,label:o.label,position:r}),t=({definition:e},o,r)=>({id:o,definition:e,attributes:{},children:r}),i=(e,o)=>{let r=[],i=[],n=()=>{i.length>0&&(r.push(t(o.registry.choices,`choices-${i[0]?.id}`,i)),i=[])};for(let o of e)"option"===o.definition.role?i.push(o):(n(),r.push(o));return n(),r},n=(e,t,l)=>e.flatMap(e=>((e,t,l)=>{var s;let a=l.registry.get(e.name);if(!a){l.errors.push({...r(e),message:"not a form element"}),n(e.children,void 0,l);return}let{definition:h}=a,p=(s=h.role,t?.role==="option"||t?.role==="input"?`cannot be inside <${t.name}>, which holds no elements`:(t?.role==="choice"||t?.role==="choices")&&"option"!==s?`cannot be inside <${t.name}>, which holds only options`:void 0);p&&l.errors.push({...r(e),message:p});let{attributes:c,errors:u}=o(a,e.attributes);for(let o of u)l.errors.push({...r(e),message:o});let{label:d,value:g,...m}=c,f=n(e.children,{name:e.name,role:h.role},l);return{id:String(e.position),definition:h,label:"string"==typeof d?d:void 0,value:"string"==typeof g?g:void 0,attributes:m,children:"group"===h.role?i(f,l):f}})(e,t,l)??[]),l=e=>{if("choice"===e.definition.role)return!0;let[o,...r]=e.children;return"group"===e.definition.role&&null!=o&&0===r.length&&l(o)};export const parseFormBlock=(o,r)=>{let s,a,h,p,c={registry:r,errors:[]},u={name:r.group.definition.name,role:"group"},d=n((a=[s=[]],h=0,(p=new e({onopentag:(e,o)=>{let r={name:e,attributes:o,position:h+=1,children:[]};a.at(-1)?.push(r),a.push(r.children)},onclosetag:()=>{a.length>1&&a.pop()}},{xmlMode:!0,lowerCaseTags:!0,lowerCaseAttributeNames:!0,recognizeSelfClosing:!0})).write(o),p.end(),s),u,c);if(c.errors.length>0)return{ok:!1,errors:c.errors};let g=d.length>0&&d.every(e=>"option"===e.definition.role)?[t(r.choice,"choice",d)]:i(d,c),m=t(r.group,"root",g);return{ok:!0,root:m,isQuick:l(m)}};

package/dist/configurator/ui/assistant/form/read-form-attributes.d.ts

@@ -0,0 +1,13 @@
+import type { RegisteredFormElement } from './form-registry.js';
+/** The attributes of an element converted to their declared types, and what was wrong with them. */
+export interface FormAttributesReading {
+    readonly attributes: Readonly<Record<string, unknown>>;
+    /** Each problem worded to follow the element's tag, e.g. `the attribute "step" must be an integer`. */
+    readonly errors: readonly string[];
+}
+/**
+ * Reads the attributes of an element against its declarations. Undeclared and missing required
+ * attributes are found by name; each declared one is coerced and checked by its own validator, and
+ * the error is worded from the declaration, never from the validator, whose errors differ by mode.
+ */
+export declare const readFormAttributes: ({ definition, attributes: declared }: RegisteredFormElement, markup: Readonly<Record<string, string>>) => FormAttributesReading;

package/dist/configurator/ui/assistant/form/read-form-attributes.js

@@ -0,0 +1 @@
+import{match as t}from"ts-pattern";let e=t=>{if(""===t.trim())return;let e=Number(t);return Number.isFinite(e)?e:void 0},r=(r,{type:i})=>t(i).with("string",()=>r).with("number",()=>e(r)??r).with("integer",()=>{let t=e(r);return null!=t&&Number.isInteger(t)?t:r}).with("boolean",()=>""===r||"true"===r||"false"!==r&&r).exhaustive(),i={string:"a string",number:"a number",integer:"an integer",boolean:"true or false"},u=(t,{type:e,enum:r})=>r?`the attribute "${t}" must be one of ${r.map(t=>`"${t}"`).join(", ")}`:`the attribute "${t}" must be ${i[e]}`;export const readFormAttributes=({definition:t,attributes:e},i)=>{let n={},a=[];for(let[t,o]of Object.entries(i)){let i=e.get(t);if(!i){a.push(`the attribute "${t}" is not declared`);continue}let s=r(o,i.attribute);i.validate(s)?n[t]=s:a.push(u(t,i.attribute))}for(let e of t.required??[])e in i||a.push(`the attribute "${e}" is required`);return{attributes:n,errors:a}};

package/dist/configurator/ui/assistant/form-elements/FormGroup.d.ts

@@ -0,0 +1,3 @@
+import type { FormContainerProps } from './form-element-props.js';
+/** A `group`: its children stacked under its label, which heads them. */
+export declare const FormGroup: ({ label, children }: FormContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/assistant/form-elements/FormGroup.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{AssistantPanelName as m}from"../theme.js";let t=o("div",{name:m,slot:"formGroup"})(({theme:{spacing:r}})=>({display:"flex",flexDirection:"column",gap:r(1.5)})),i=o("div",{name:m,slot:"formGroupLabel"})(({theme:{palette:r,typography:e}})=>({...e.subtitle2,color:r.text.primary}));export const FormGroup=({label:o,children:m})=>e(t,{role:"group","aria-label":o,children:[null!=o&&r(i,{"aria-hidden":!0,children:o}),m]});

package/dist/configurator/ui/assistant/form-elements/FormOptions.d.ts

@@ -0,0 +1,3 @@
+import type { FormContainerProps } from './form-element-props.js';
+/** A `choice` or `choices`: its options in a wrapping row under its label. */
+export declare const FormOptions: ({ label, children }: FormContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/assistant/form-elements/FormOptions.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{styled as r}from"@mui/material";import{AssistantPanelName as i}from"../theme.js";let t=r("div",{name:i,slot:"formOptions"})(({theme:{spacing:e}})=>({display:"grid",gap:e(.75)})),a=r("div",{name:i,slot:"formOptionsLabel"})(({theme:{palette:e,typography:o}})=>({...o.caption,color:e.text.secondary})),m=r("div",{name:i,slot:"formOptionsRow"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(.75)}));export const FormOptions=({label:r,children:i})=>o(t,{role:"group","aria-label":r,children:[null!=r&&e(a,{"aria-hidden":!0,children:r}),e(m,{children:i})]});

package/dist/configurator/ui/assistant/form-elements/FormReply.d.ts

@@ -0,0 +1,3 @@
+import type { FormOptionProps } from './form-element-props.js';
+/** A `reply`: a short answer as a small pill, marked while it is picked. */
+export declare const FormReply: ({ label, disabled, selected, onSelect }: FormOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/assistant/form-elements/FormReply.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{alpha as e,styled as i}from"@mui/material";import{AssistantPanelName as o}from"../theme.js";let t=i("button",{name:o,slot:"formReply"})(({theme:{palette:r,spacing:i,typography:o}})=>({...o.body2,background:r.background.paper,border:`1px solid ${r.divider}`,borderRadius:"calc(infinity * 1px)",color:r.text.primary,cursor:"pointer",margin:0,paddingBlock:i(.25),paddingInline:i(1.25),textAlign:"start","&:hover:not(:disabled)":{background:r.action.hover},"&:focus-visible":{outline:`2px solid ${r.primary.main}`,outlineOffset:1},"&:disabled":{color:r.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{background:e(r.primary.main,r.action.selectedOpacity),borderColor:r.primary.main}}));export const FormReply=({label:e,disabled:i,selected:o,onSelect:a})=>r(t,{type:"button",disabled:i,"aria-pressed":o,onClick:a,children:e});

package/dist/configurator/ui/assistant/form-elements/FormText.d.ts

@@ -0,0 +1,3 @@
+import type { FormInputProps } from './form-element-props.js';
+/** A `text`: a single line the user types, with its label above it. */
+export declare const FormText: ({ attributes, label, value, disabled, state, onChange }: FormInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/assistant/form-elements/FormText.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{InputBase as t,styled as o}from"@mui/material";import{useCallback as i}from"react";import{AssistantPanelName as a}from"../theme.js";let d=o("label",{name:a,slot:"formText"})(({theme:{palette:e,spacing:r,typography:t}})=>({alignSelf:"stretch",color:e.text.secondary,display:"grid",gap:r(.5),...t.caption})),m=o(t,{name:a,slot:"formTextInput"})(({theme:{palette:e,spacing:r,typography:t}})=>({...t.body2,border:`1px solid ${e.divider}`,borderRadius:12,color:e.text.primary,paddingBlock:r(.75),paddingInline:r(1.5),"&.Mui-focused":{borderColor:e.primary.main},"& .MuiInputBase-input":{padding:0}}));export const FormText=({attributes:t,label:o,value:a,disabled:l,state:n,onChange:p})=>{let{placeholder:s}=t;return r(d,{children:[o,e(m,{value:"string"==typeof n?n:a??"",placeholder:"string"==typeof s?s:void 0,disabled:l,onChange:i(e=>{let r=e.target.value;p(r,""===r.trim()?void 0:r.trim())},[p])})]})};

package/dist/configurator/ui/assistant/form-elements/form-element-props.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+/** Validated and coerced attributes of an element, without the built-in `label` and `value`. */
+export type FormElementAttributes = Readonly<Record<string, unknown>>;
+/** Props of a `group`, `choice` or `choices` element: it lays out the children the form renders for it. */
+export interface FormContainerProps {
+    readonly attributes: FormElementAttributes;
+    readonly label?: string;
+    readonly disabled: boolean;
+    readonly children: ReactNode;
+}
+/**
+ * Props of an option. Its container decides what a pick does: in a `choice` it replaces the
+ * previous pick, in a `choices` it toggles, and in a form that asks one question it sends at once.
+ */
+export interface FormOptionProps {
+    readonly attributes: FormElementAttributes;
+    readonly label?: string;
+    readonly disabled: boolean;
+    readonly selected: boolean;
+    onSelect(): void;
+}
+/**
+ * Props of an input. Its state is its own: the form stores it and hands it back. `answer` is the
+ * text the answer shows for it, or `undefined` while there is none.
+ */
+export interface FormInputProps {
+    readonly attributes: FormElementAttributes;
+    readonly label?: string;
+    /** What the field starts with. */
+    readonly value?: string;
+    readonly disabled: boolean;
+    readonly state: unknown;
+    onChange(state: unknown, answer: string | undefined): void;
+}

package/dist/configurator/ui/assistant/form-elements/form-element-props.js

@@ -0,0 +1 @@
+export{};

package/dist/configurator/ui/assistant/form-elements/index.d.ts

@@ -0,0 +1,5 @@
+export type { FormContainerProps, FormElementAttributes, FormInputProps, FormOptionProps, } from './form-element-props.js';
+export { FormGroup } from './FormGroup.js';
+export { FormOptions } from './FormOptions.js';
+export { FormReply } from './FormReply.js';
+export { FormText } from './FormText.js';

package/dist/configurator/ui/assistant/form-elements/index.js

@@ -0,0 +1 @@
+export{FormGroup}from"./FormGroup.js";export{FormOptions}from"./FormOptions.js";export{FormReply}from"./FormReply.js";export{FormText}from"./FormText.js";

package/dist/configurator/ui/assistant/streamed-markdown.d.ts

@@ -1,3 +1,5 @@
+/** True when the text has a code fence the model has not closed yet. */
+export declare const hasOpenFence: (text: string) => boolean;
 /**
  * Makes the Markdown of a reply that is still streaming renderable as it stands, so half-written
  * markup does not flash as raw characters: an open code fence is closed, an inline code span, a link

package/dist/configurator/ui/assistant/streamed-markdown.js

@@ -1,2 +1,2 @@
-let e=(e,t)=>e.split(t).length-1,t=/^\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;export const completeStreamedMarkdown=l=>{if(e(l,"```")%2==1)return`${l}
-\`\`\``;let n=l.lastIndexOf("```"),s=-1===n?"":l.slice(0,n+3),r=l.slice(s.length),i=(e=>{let l=e.split("\n"),n=l.length;for(;n>0&&l[n-1]?.trimStart().startsWith("|");)n-=1;let s=l.slice(n),r=s[1],i=null!=r&&s.length>2&&t.test(r);return 0===s.length||i?e:l.slice(0,n).join("\n")})((e(r,"`")%2==1?r.slice(0,r.lastIndexOf("`")):r).replace(/!?\[([^\]\n]*)\]\([^)\n]*$/,"$1").replace(/!?\[[^\]\n]*$/,"")),c=e(i,"**")%2==1?`${i}**`:i;return`${s}${c}`};
+let e=(e,t)=>e.split(t).length-1,t=/^\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;export const hasOpenFence=t=>e(t,"```")%2==1;export const completeStreamedMarkdown=n=>{if(hasOpenFence(n))return`${n}
+\`\`\``;let l=n.lastIndexOf("```"),s=-1===l?"":n.slice(0,l+3),r=n.slice(s.length),c=(e=>{let n=e.split("\n"),l=n.length;for(;l>0&&n[l-1]?.trimStart().startsWith("|");)l-=1;let s=n.slice(l),r=s[1],c=null!=r&&s.length>2&&t.test(r);return 0===s.length||c?e:n.slice(0,l).join("\n")})((e(r,"`")%2==1?r.slice(0,r.lastIndexOf("`")):r).replace(/!?\[([^\]\n]*)\]\([^)\n]*$/,"$1").replace(/!?\[[^\]\n]*$/,"")),i=e(c,"**")%2==1?`${c}**`:c;return`${s}${i}`};

package/dist/configurator/ui/assistant/thread-items.d.ts

@@ -8,6 +8,12 @@ export interface AssistantToolItem {
     readonly input: unknown;
     readonly result: unknown;
 }
+/**
+ * What the forms in a stretch of assistant text are: shown only in the last message of the thread,
+ * and usable only once its reply has ended. A form in any earlier message has been answered or
+ * passed over, so it is not shown at all.
+ */
+export type AssistantFormsVisibility = 'hidden' | 'disabled' | 'enabled';
 /**
  * One block of the thread, in reading order: a user bubble, a stretch of assistant Markdown, a row
  * of chips for the tool calls that follow each other without text in between, or the line that
@@ -22,6 +28,7 @@ export type AssistantThreadItem = {
     readonly id: string;
     readonly markdown: string;
     readonly isStreaming: boolean;
+    readonly forms: AssistantFormsVisibility;
 } | {
     readonly kind: 'tools';
     readonly id: string;
@@ -39,7 +46,7 @@ export interface AssistantThreadView {
  * Lays the messages of the chat out as the blocks the thread renders. Reasoning is left out; tool
  * results are not shown on their own but decide the state of the chip of their call.
  */
-export declare const buildThreadView: (messages: ReadonlyArray<UIMessage>, isReplying: boolean) => AssistantThreadView;
+export declare const buildThreadView: (messages: ReadonlyArray<UIMessage>, isReplying: boolean, isResuming: boolean) => AssistantThreadView;
 /**
  * Lays the closed threads of the conversation out above the thread that continues them, oldest
  * first, each ended by a separator: the assistant read on from a summary of it, not from the

package/dist/configurator/ui/assistant/thread-items.js

@@ -1 +1 @@
-import{describeToolCall as t}from"./tool-chip.js";let e=t=>{try{return JSON.parse(t)}catch{return t}},r=t=>t.map(t=>"text"===t.type?t.content:"").join("").trim();export const buildThreadView=(o,i)=>{let l=(t=>{let r=new Map;for(let o of t)for(let t of o.parts)"tool-result"===t.type&&r.set(t.toolCallId,{result:"string"==typeof t.content?e(t.content):t.content,error:"error"===t.state?t.error??"The tool call failed.":void 0});return r})(o),n=[],a=o.at(-1),s=t=>{let e=n.at(-1);e?.kind==="tools"?n[n.length-1]={...e,tools:[...e.tools,t]}:n.push({kind:"tools",id:t.id,tools:[t]})};for(let e of o){if("user"===e.role){let t=r(e.parts);t&&n.push({kind:"user",id:e.id,text:t});continue}let o=i&&e===a;e.parts.forEach((r,i)=>{let a=`${e.id}:${i}`;if("text"===r.type){if(r.content.trim()){let t=o&&i===e.parts.length-1;n.push({kind:"text",id:a,markdown:r.content,isStreaming:t})}return}if("tool-call"!==r.type)return;let d=l.get(r.id),p=r.input,u=r.output??d?.result;s({id:r.id,input:p,result:u,chip:t({name:r.name,input:p,result:u,error:d?.error,isReplyRunning:o})})})}let d=n.at(-1),p=a?.role==="assistant"&&(d?.kind==="text"&&d.isStreaming||d?.kind==="tools");return{items:n,isThinking:i&&!p}};export const buildEarlierThreadItems=t=>t.flatMap(({threadId:t,messages:e})=>[...buildThreadView(e,!1).items.map(e=>({...e,id:`${t}:${e.id}`})),{kind:"separator",id:`${t}:separator`}]);
+import{match as t}from"ts-pattern";import{describeToolCall as e}from"./tool-chip.js";let r=t=>{try{return JSON.parse(t)}catch{return t}},i=t=>t.map(t=>"text"===t.type?t.content:"").join("").trim();export const buildThreadView=(o,n,s)=>{let l=(t=>{let e=new Map;for(let i of t)for(let t of i.parts)"tool-result"===t.type&&e.set(t.toolCallId,{result:"string"==typeof t.content?r(t.content):t.content,error:"error"===t.state?t.error??"The tool call failed.":void 0});return e})(o),a=[],d=o.at(-1),p=t=>{let e=a.at(-1);e?.kind==="tools"?a[a.length-1]={...e,tools:[...e.tools,t]}:a.push({kind:"tools",id:t.id,tools:[t]})};for(let r of o){if("user"===r.role){let t=i(r.parts);t&&a.push({kind:"user",id:r.id,text:t});continue}let o=n&&r===d,u=t({isLast:r===d,isBusy:o||s}).with({isLast:!1},()=>"hidden").with({isBusy:!0},()=>"disabled").otherwise(()=>"enabled");r.parts.forEach((t,i)=>{let n=`${r.id}:${i}`;if("text"===t.type){if(t.content.trim()){let e=o&&i===r.parts.length-1;a.push({kind:"text",id:n,markdown:t.content,isStreaming:e,forms:u})}return}if("tool-call"!==t.type)return;let s=l.get(t.id),d=t.input,h=t.output??s?.result;p({id:t.id,input:d,result:h,chip:e({name:t.name,input:d,result:h,error:s?.error,isReplyRunning:o})})})}let u=a.at(-1),h=d?.role==="assistant"&&(u?.kind==="text"&&u.isStreaming||u?.kind==="tools");return{items:a,isThinking:n&&!h}};export const buildEarlierThreadItems=t=>t.flatMap(({threadId:t,messages:e})=>[...buildThreadView(e,!1,!1).items.map(e=>"text"===e.kind?{...e,id:`${t}:${e.id}`,forms:"hidden"}:{...e,id:`${t}:${e.id}`}),{kind:"separator",id:`${t}:separator`}]);

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

@@ -0,0 +1 @@
+export { SidebarKeys } from './sidebar-keys.js';

package/dist/configurator/ui/configurator-layout/sidebar-keys/index.js

@@ -0,0 +1 @@
+export{SidebarKeys}from"./sidebar-keys.js";

package/dist/configurator/ui/configurator-layout/sidebar-keys/sidebar-keys.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Values of the desktop sidebar's `data-sidebar` attribute: its variants and states. The sidebar writes
+ * them; the built-in desktop layout's rules react to them.
+ */
+export declare const SidebarKeys: {
+    readonly Minimalist: 'minimalist';
+    readonly Split: 'split';
+    readonly Visible: 'visible';
+    readonly Hidden: 'hidden';
+    readonly Assistant: 'assistant';
+};

package/dist/configurator/ui/configurator-layout/sidebar-keys/sidebar-keys.js

@@ -0,0 +1 @@
+export const SidebarKeys={Minimalist:"minimalist",Split:"split",Visible:"visible",Hidden:"hidden",Assistant:"assistant"};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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