@salsita-ai/sdk 0.50.0-develop.f03b563886 → 0.50.0-develop.f101f4c3c9

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

@@ -0,0 +1,10 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormOptionProps } from './form-element-props.js';
+type FormSwatchProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'swatch'>>;
+/**
+ * A `swatch`: a small square filled with its color or covered by its picture, its label in a
+ * tooltip, ringed and checked while it is picked. A picture that is not a resource path or fails to
+ * load leaves the color, or a neutral tile.
+ */
+export declare const FormSwatch: ({ attributes, label, value, disabled, selected, onSelect }: FormSwatchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Tooltip as r,styled as o}from"@mui/material";import{useCallback as a,useState as t}from"react";import{PhxIcon as n}from"#package/ui-sdk";import{useResourceImageUrl as l}from"../resource-image/index.js";import{AssistantPanelName as s}from"../theme.js";let d=o("button",{name:s,slot:"formSwatch"})(({theme:{palette:e,shape:i}})=>({background:e.action.hover,blockSize:36,border:`1px solid ${e.divider}`,borderRadius:i.borderRadius,cursor:"pointer",flex:"none",inlineSize:36,margin:0,overflow:"hidden",padding:0,position:"relative","&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:3},"&:disabled":{cursor:"default",opacity:e.action.disabledOpacity},'&[aria-pressed="true"]':{boxShadow:`0 0 0 2px ${e.background.paper}, 0 0 0 4px ${e.primary.main}`}})),m=o("img",{name:s,slot:"formSwatchImage"})({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),c=o("span",{name:s,slot:"formSwatchCheck"})(({theme:{palette:e}})=>({alignItems:"center",background:e.primary.main,borderRadius:"50%",color:e.primary.contrastText,display:"flex",fontSize:14,inset:"50% auto auto 50%",justifyContent:"center",padding:2,position:"absolute",transform:"translate(-50%, -50%)"})),p=o("span")({display:"inline-flex"});export const FormSwatch=({attributes:o,label:s,value:u,disabled:f,selected:b,onSelect:h})=>{let{color:x,image:g}=o,y=l()(g),[k,S]=t(),j=[s,u,x,g].find(Boolean),v=a(()=>{S(y)},[y]);return e(r,{title:j??"",placement:"top",children:e(p,{children:i(d,{type:"button","aria-label":j,disabled:f,"aria-pressed":b,onClick:h,style:null==x?void 0:{background:x},children:[null!=y&&y!==k&&e(m,{src:y,alt:"",loading:"lazy",onError:v}),b&&e(c,{"aria-hidden":!0,children:e(n,{name:"Check",fontSize:"inherit"})})]})})})};

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

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

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,useEffect as a}from"react";import{AssistantPanelName as d}from"../theme.js";let m=o("label",{name:d,slot:"formText"})(({theme:{palette:e,spacing:r,typography:t}})=>({alignSelf:"stretch",color:e.text.secondary,display:"grid",gap:r(.5),...t.caption})),l=e=>""===e.trim()?void 0:e.trim(),n=o(t,{name:d,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:{value:t,placeholder:o},label:d,disabled:s,state:p,onChange:c})=>(a(()=>{void 0===p&&void 0!==t&&""!==t&&c(t,l(t))},[p,t,c]),r(m,{children:[d,e(n,{value:p??t??"",placeholder:o,disabled:s,onChange:i(e=>{let r=e.target.value;c(r,l(r))},[c])})]}));

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

@@ -0,0 +1,10 @@
+/** The limits a `number` keeps its value within, from its attributes. */
+export interface FormNumberLimits {
+    readonly min?: number;
+    readonly max?: number;
+}
+/**
+ * The value a `number` settles on once the user leaves the field: within `min` and `max`. The
+ * `step` is left out: it moves the slider, and a typed value between steps stays as typed.
+ */
+export declare const clampFormNumber: (value: number, { min, max }: FormNumberLimits) => number;

package/dist/configurator/ui/assistant/form-elements/clamp-form-number.js

@@ -0,0 +1 @@
+export const clampFormNumber=(m,{min:a,max:t})=>Math.min(t??1/0,Math.max(a??-1/0,m));

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+/** Validated and coerced attributes of an element, without the built-in `label`: what any element gets. */
+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<ATTRIBUTES = FormElementAttributes> {
+    readonly attributes: ATTRIBUTES;
+    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<ATTRIBUTES = FormElementAttributes> {
+    readonly attributes: ATTRIBUTES;
+    readonly label?: string;
+    /** What the option answers with instead of its label, for an option that names itself by it without one. */
+    readonly value?: string;
+    readonly disabled: boolean;
+    readonly selected: boolean;
+    onSelect(): void;
+}
+/**
+ * Props of an input. Its state is its own: the form stores what it reports and hands it back.
+ * `answer` is the text the answer shows for it, or `undefined` while there is none. An input that
+ * starts with a `value` attribute reports its starting answer when it mounts, since an input that
+ * never reports is unanswered and only the input knows how its value reads in the answer, such as
+ * a number with its unit. A quick input, which a lone form sends on its first report, reports only
+ * what the user did.
+ */
+export interface FormInputProps<STATE = unknown, ATTRIBUTES = FormElementAttributes> {
+    readonly attributes: ATTRIBUTES;
+    readonly label?: string;
+    readonly disabled: boolean;
+    readonly state: STATE | undefined;
+    onChange(state: STATE, 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,9 @@
+export type { FormContainerProps, FormElementAttributes, FormInputProps, FormOptionProps, } from './form-element-props.js';
+export { FormCard } from './FormCard.js';
+export { FormConfirm } from './FormConfirm.js';
+export { FormGroup } from './FormGroup.js';
+export { FormOptions } from './FormOptions.js';
+export { FormNumber } from './FormNumber.js';
+export { FormReply } from './FormReply.js';
+export { FormSwatch } from './FormSwatch.js';
+export { FormText } from './FormText.js';

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

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

package/dist/configurator/ui/assistant/reference-link/AssistantReferenceLink.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import type { AssistantReferenceTarget } from './assistant-link-target.js';
+export interface AssistantReferenceLinkProps {
+    readonly target: AssistantReferenceTarget;
+    /** The text the assistant gave the link; the target itself is never shown. */
+    readonly children: ReactNode;
+}
+declare const ReferenceLinkView: ({ target, children }: AssistantReferenceLinkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A recipe or an option the assistant named in a reply, shown as its label. Hovering, focusing or
+ * tapping it opens a popover with its picture or color, name and description, read from the
+ * current state at that moment; leaving it, tapping outside or Escape closes it. A click does
+ * nothing else.
+ */
+export declare const AssistantReferenceLink: import("react").MemoExoticComponent<typeof ReferenceLinkView>;
+export {};

package/dist/configurator/ui/assistant/reference-link/AssistantReferenceLink.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as n}from"@lingui/react";import{ClickAwayListener as t,Tooltip as a,styled as i}from"@mui/material";import{memo as o,useCallback as l,useEffect as s,useRef as d,useState as c}from"react";import{isShallowEqual as p}from"@salsita-ai/common/utils";import{useResourceUrl as m}from"#package/react-sdk";import{AssistantPanelName as u}from"../theme.js";import{assistantReferenceStyles as f}from"./reference-styles.js";import{useAssistantReferenceDetails as h}from"./use-assistant-reference-details.js";let b=i("span",{name:u,slot:"referenceLink"})(f),x=i("span",{name:u,slot:"referenceDetails"})(({theme:{palette:e,shape:r,shadows:n,spacing:t,typography:a}})=>({...a.body2,background:e.background.paper,borderRadius:r.borderRadius,boxShadow:n[4],color:e.text.primary,display:"flex",gap:t(1.5),maxInlineSize:320,padding:t(1.5),'&[data-reference-details="unavailable"]':{color:e.text.secondary}})),g=i("img")(({theme:{shape:e}})=>({alignSelf:"flex-start",blockSize:"auto",borderRadius:e.borderRadius/2,flexShrink:0,inlineSize:64,maxBlockSize:96,objectFit:"contain"})),k=i("span")(({theme:{palette:e,shape:r}})=>({blockSize:32,borderRadius:r.borderRadius/2,boxShadow:`inset 0 0 0 1px ${e.divider}`,flexShrink:0,inlineSize:32})),y=i("span")(({theme:{palette:e,spacing:r}})=>({display:"flex",flexDirection:"column",gap:r(.5),minInlineSize:0,"& > :first-of-type":{fontWeight:600},"& > :not(:first-of-type)":{color:e.text.secondary}})),S=({target:t,onResolve:a,onImageLoad:i})=>{let o=h(t),{getResourceUrl:l}=m(),d=null!=o;if(s(()=>{a(d)},[d,a]),!o)return e(x,{"data-reference-details":"unavailable",children:e(n,{id:"sdk.assistant.reference.unavailable.message",message:"Not available right now"})});let{name:c,description:p,imageUrl:u,color:f}=o;return r(x,{children:[null!=u&&e(g,{src:l(u),alt:"",onLoad:i}),null==u&&null!=f&&e(k,{style:{background:f}}),r(y,{children:[e("span",{children:c}),null!=p&&e("span",{children:p})]})]})};export const AssistantReferenceLink=o(({target:r,children:n})=>{let[i,o]=c(!1),[s,p]=c(!1),m=l(()=>o(!0),[]),u=l(()=>o(!1),[]),f=l(e=>p(!e),[]),h=d(null),x=l(e=>{h.current=e},[]),g=l(()=>{h.current?.update()},[]),k=l(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),o(!0))},[]);return e(t,{onClickAway:u,mouseEvent:!!i&&"onClick",touchEvent:!!i&&"onTouchEnd",children:e(a,{open:i,onOpen:m,onClose:u,title:e(S,{target:r,onResolve:f,onImageLoad:g}),placement:"top-start",describeChild:!0,disableTouchListener:!0,PopperProps:{popperRef:x},slotProps:{tooltip:{sx:{background:"none",maxInlineSize:"none",padding:0}}},children:e(b,{role:"button",tabIndex:0,"aria-expanded":i,"data-reference":s?"muted":void 0,onClick:m,onKeyDown:k,children:n})})})},(e,r)=>e.children===r.children&&p(e.target,r.target));

package/dist/configurator/ui/assistant/reference-link/assistant-link-target.d.ts

@@ -0,0 +1,34 @@
+import { type DomainEntityId } from '#package/domain';
+/** A recipe of a recipe group on an entity, as the assistant read it under `meta`: `recipe:<entityId>/<groupId>/<key>`. */
+export interface AssistantRecipeTarget {
+    readonly kind: 'recipe';
+    readonly entityId: DomainEntityId<string>;
+    readonly groupId: string;
+    readonly key: string;
+}
+/**
+ * A choice of a writable field on an entity, as the assistant read it under `meta`:
+ * `option:<entityId>/<edgeName>/<value>`. The edge is the options field the assistant queried, such
+ * as `finishOptions`, and the value is the option's value in its string form.
+ */
+export interface AssistantOptionTarget {
+    readonly kind: 'option';
+    readonly entityId: DomainEntityId<string>;
+    readonly edgeName: string;
+    readonly value: string;
+}
+/** What a reference points at: something the configurator offers, shown by its details rather than selected. */
+export type AssistantReferenceTarget = AssistantRecipeTarget | AssistantOptionTarget;
+/** Where a link the assistant wrote in a reply points: an entity of the configuration, or a reference. */
+export type AssistantLinkTarget = {
+    readonly kind: 'entity';
+    readonly id: DomainEntityId<string>;
+} | AssistantReferenceTarget;
+/** True for the target of a link the assistant wrote with one of its schemes, whatever follows the scheme. */
+export declare const isAssistantLinkHref: (href: string) => boolean;
+/**
+ * What a link the assistant wrote points at, or `null` when what follows its scheme is not a
+ * well-formed target. An entity link holds the id as it is; the parts of a reference are decoded,
+ * so a key the model encoded as in a URL and one Markdown encoded from angle brackets read the same.
+ */
+export declare const parseAssistantLinkTarget: (href: string) => AssistantLinkTarget | null;

package/dist/configurator/ui/assistant/reference-link/assistant-link-target.js

@@ -0,0 +1 @@
+import{DomainEntityIdSchema as t}from"#package/domain";let e="entity:",n="recipe:",i="option:",l=[e,n,i],r=new RegExp(t.pattern),s=t=>{try{let e=decodeURIComponent(t);return""===e?null:e}catch{return null}},u=t=>{let e=t.split("/").map(s);if(3!==e.length)return null;let[n,i,l]=e;return null!=n&&r.test(n)&&null!=i&&null!=l?{entityId:n,first:i,second:l}:null};export const isAssistantLinkHref=t=>l.some(e=>t.startsWith(e));export const parseAssistantLinkTarget=t=>{if(t.startsWith(e)){let n=t.slice(e.length);return r.test(n)?{kind:"entity",id:n}:null}if(t.startsWith(n)){let e=u(t.slice(n.length));return e&&{kind:"recipe",entityId:e.entityId,groupId:e.first,key:e.second}}if(t.startsWith(i)){let e=u(t.slice(i.length));return e&&{kind:"option",entityId:e.entityId,edgeName:e.first,value:e.second}}return null};

package/dist/configurator/ui/assistant/reference-link/assistant-reference-details.d.ts

@@ -0,0 +1,25 @@
+import { type AssistantManifest, type AssistantRecipeContext, type DomainEntity, type DomainState } from '#package/domain';
+import type { AssistantReferenceTarget } from './assistant-link-target.js';
+type AnyDomainState = DomainState<DomainEntity<string>>;
+/** What the popover of a reference shows of the recipe or option it points at, texts in the current language. */
+export interface AssistantReferenceDetails {
+    readonly name: string;
+    readonly description: string | null;
+    readonly imageUrl: string | null;
+    readonly color: string | null;
+}
+/**
+ * What reading a reference needs: the manifest of the session and the readers `meta` resolves
+ * through, so the popover shows what the agent read.
+ */
+export interface AssistantReferenceContext extends Pick<AssistantRecipeContext, 'componentReader' | 'resolveLocalizable'> {
+    readonly manifest: AssistantManifest;
+}
+/**
+ * The details of what a reference points at on the given state, read the way `meta` reads them:
+ * only what the session's manifest exposes, from a component that is active on the entity there.
+ * `null` when the target does not resolve: the entity, the group or options edge, or the key or value is
+ * unknown, or the component is not active.
+ */
+export declare const readAssistantReferenceDetails: (target: AssistantReferenceTarget, state: AnyDomainState, context: AssistantReferenceContext) => AssistantReferenceDetails | null;
+export {};

package/dist/configurator/ui/assistant/reference-link/assistant-reference-details.js

@@ -0,0 +1 @@
+import{match as e}from"ts-pattern";import{findAssistantFieldOptions as i,findAssistantRecipeGroups as t,readAssistantFieldOptions as n,readAssistantRecipeGroup as r}from"#package/domain";let l=["child","replace"];export const readAssistantReferenceDetails=(o,a,d)=>{let u=a.entities.find(e=>e.id===o.entityId);return u?e(o).with({kind:"recipe"},e=>((e,i,n,o)=>{let a=(({entityId:e,groupId:i,key:n},o,a,d)=>{for(let u of l)for(let l of t(d.manifest,u,o)){if(l.groupId!==i)continue;let t=r(u,l,e,a,d)?.recipes.find(e=>e.key===n);if(t)return t}return null})(e,i,n,o);if(!a)return null;let{title:d,description:u,thumbnailUrl:f}=a.item,{resolveLocalizable:m}=o;return{name:m(d),description:void 0===u?null:m(u),imageUrl:void 0===f?null:m(f),color:null}})(e,u.type,a,d)).with({kind:"option"},e=>(({entityId:e,edgeName:t,value:r},l,o,a)=>{let d=i(a.manifest,l).find(e=>e.edgeName===t),u=d?n(d,e,o,a)?.find(e=>String(e.value)===r):void 0;return u?{name:u.name??u.description??String(u.value),description:null==u.name?null:u.description,imageUrl:u.imageUrl,color:u.color}:null})(e,u.type,a,d)).exhaustive():null};

package/dist/configurator/ui/assistant/reference-link/index.d.ts

@@ -0,0 +1,3 @@
+export { AssistantReferenceLink } from './AssistantReferenceLink.js';
+export { isAssistantLinkHref, parseAssistantLinkTarget } from './assistant-link-target.js';
+export { assistantReferenceStyles } from './reference-styles.js';

package/dist/configurator/ui/assistant/reference-link/index.js

@@ -0,0 +1 @@
+export{AssistantReferenceLink}from"./AssistantReferenceLink.js";export{isAssistantLinkHref,parseAssistantLinkTarget}from"./assistant-link-target.js";export{assistantReferenceStyles}from"./reference-styles.js";

package/dist/configurator/ui/assistant/reference-link/reference-styles.d.ts

@@ -0,0 +1,12 @@
+import { type CSSObject, type Theme } from '@mui/material';
+/**
+ * How a link in a reply reads: a glossary reference, text that flows with the sentence and wraps
+ * with it, in the reference color with a dashed underline. Entity links and the references to
+ * recipes and options share it, so every link of a reply looks alike.
+ *
+ * - `data-reference="plain"`: something that exists but does nothing on a click, in the text color;
+ * - `data-reference="muted"`: something that is gone or cannot be read right now.
+ */
+export declare const assistantReferenceStyles: ({ theme: { palette, shape } }: {
+    readonly theme: Theme;
+}) => CSSObject;

package/dist/configurator/ui/assistant/reference-link/reference-styles.js

@@ -0,0 +1 @@
+import{alpha as e}from"@mui/material";export const assistantReferenceStyles=({theme:{palette:r,shape:o}})=>({background:"none",border:"none",borderRadius:o.borderRadius/2,boxDecorationBreak:"clone",color:r.primary.main,cursor:"pointer",font:"inherit",margin:0,padding:0,textDecorationLine:"underline",textDecorationStyle:"dashed",textDecorationThickness:1,textUnderlineOffset:"0.2em",WebkitBoxDecorationBreak:"clone",'&:hover, &:focus-visible, &[data-hovered="true"], &[aria-expanded="true"]':{background:e(r.primary.main,r.action.hoverOpacity)},"&:focus-visible":{outline:`2px solid ${r.primary.main}`,outlineOffset:1},'&[data-reference="plain"]':{color:"inherit",cursor:"auto"},'&[data-reference="muted"]':{color:r.text.disabled}});

package/dist/configurator/ui/assistant/reference-link/use-assistant-reference-details.d.ts

@@ -0,0 +1,8 @@
+import type { AssistantReferenceTarget } from './assistant-link-target.js';
+import { type AssistantReferenceDetails } from './assistant-reference-details.js';
+/**
+ * The details of what a reference points at, read from the committed state and followed while the
+ * caller is mounted; `null` when it does not resolve there. Only the open popover of a reference
+ * calls it, so a reply full of references reads nothing until one is opened.
+ */
+export declare const useAssistantReferenceDetails: (target: AssistantReferenceTarget) => AssistantReferenceDetails | null;

package/dist/configurator/ui/assistant/reference-link/use-assistant-reference-details.js

@@ -0,0 +1 @@
+import{useDomain as e,useResolveLocalizable as t,useStoreSelector as r}from"#package/react-sdk";import{useConfigurator as s}from"../../../application-runtime/index.js";import{readAssistantReferenceDetails as i}from"./assistant-reference-details.js";export const useAssistantReferenceDetails=a=>{let{assistantSystem:n}=s(),{componentReader:o}=e(),l=t();return r(({state:e})=>{let t=n.getSessionManifest();return t?i(a,e,{manifest:t,componentReader:o,resolveLocalizable:e=>l(e)}):null},[n,o,l,a])};

package/dist/configurator/ui/assistant/resource-image/AssistantImage.d.ts

@@ -0,0 +1,9 @@
+export interface AssistantImageProps {
+    readonly src: string | undefined;
+    readonly alt: string | undefined;
+}
+/**
+ * An image in a reply, loaded from the project's resources. One the panel refuses to request or
+ * that fails to load shows its alt text instead, so the sentence around it still reads.
+ */
+export declare const AssistantImage: import("react").MemoExoticComponent<({ src, alt }: AssistantImageProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/configurator/ui/assistant/resource-image/AssistantImage.js

@@ -0,0 +1 @@
+import{jsx as r,Fragment as e}from"react/jsx-runtime";import{styled as t}from"@mui/material";import{memo as m,useCallback as o,useState as a}from"react";import{AssistantPanelName as i}from"../theme.js";import{useResourceImageUrl as s}from"./use-resource-image-url.js";let l=t("img",{name:i,slot:"image"})(({theme:{shape:r,spacing:e}})=>({blockSize:"auto",borderRadius:r.borderRadius,display:"block",maxInlineSize:"100%","& + &":{marginBlockStart:e(1)}}));export const AssistantImage=m(({src:t,alt:m})=>{let i=s()(t),[n,u]=a(),c=o(()=>{u(i)},[i]);return null==i||i===n?r(e,{children:m}):r(l,{src:i,alt:m??"",loading:"lazy",onError:c})});

package/dist/configurator/ui/assistant/resource-image/index.d.ts

@@ -0,0 +1,3 @@
+export { AssistantImage } from './AssistantImage.js';
+export { isResourcePath } from './resource-path.js';
+export { useResourceImageUrl } from './use-resource-image-url.js';

package/dist/configurator/ui/assistant/resource-image/index.js

@@ -0,0 +1 @@
+export{AssistantImage}from"./AssistantImage.js";export{isResourcePath}from"./resource-path.js";export{useResourceImageUrl}from"./use-resource-image-url.js";

package/dist/configurator/ui/assistant/resource-image/resource-path.d.ts

@@ -0,0 +1,2 @@
+/** True when the image source the model wrote may be requested: a path into the project's resources. */
+export declare const isResourcePath: (src: string | undefined) => src is string;

package/dist/configurator/ui/assistant/resource-image/resource-path.js

@@ -0,0 +1 @@
+import{ASSISTANT_RESOURCE_PATH_PATTERN as e}from"#package/domain";let t=RegExp(e,"u");export const isResourcePath=e=>null!=e&&t.test(e);

package/dist/configurator/ui/assistant/resource-image/use-resource-image-url.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Resolves an image source the model wrote the way the configurator resolves thumbnails, or returns
+ * `undefined` when it is not a path into the project's resources and must not be requested.
+ */
+export declare const useResourceImageUrl: () => (src: string | undefined) => string | undefined;

package/dist/configurator/ui/assistant/resource-image/use-resource-image-url.js

@@ -0,0 +1 @@
+import{useCallback as r}from"react";import{useResourceUrl as e}from"#package/react-sdk";import{isResourcePath as o}from"./resource-path.js";export const useResourceImageUrl=()=>{let{getResourceUrl:t}=e();return r(r=>o(r)?t(r):void 0,[t])};

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

@@ -1,6 +1,8 @@
+/** 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
- * or a table header the model has not finished is held back, and open bold text is closed.
+ * markup does not flash as raw characters: an open code fence is closed, an inline code span, a link,
+ * an alert marker or a table header the model has not finished is held back, and open bold text is closed.
  */
 export declare const completeStreamedMarkdown: (text: string) => string;

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*$/,l=/(^|\n) {0,3}>[ \t]*\[![a-z]*$/i,n=/(^|\n) {0,3}>[ \t]*\[![a-z]+\][ \t]*$/i;export const hasOpenFence=t=>e(t,"```")%2==1;export const completeStreamedMarkdown=s=>{var r;let a;if(hasOpenFence(s))return`${s}
+\`\`\``;let i=s.lastIndexOf("```"),c=-1===i?"":s.slice(0,i+3),{head:$,marker:h}=(r=s.slice(c.length),null==(a=n.exec(r))?{head:r.replace(l,"$1"),marker:""}:{head:r.slice(0,a.index),marker:r.slice(a.index)}),p=(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],a=null!=r&&s.length>2&&t.test(r);return 0===s.length||a?e:l.slice(0,n).join("\n")})((e($,"`")%2==1?$.slice(0,$.lastIndexOf("`")):$).replace(/!?\[([^\]\n]*)\](?:\([^)\n]*)?$/,"$1").replace(/!?\[[^\]\n]*$/,"")),d=e(p,"**")%2==1?`${p}**`:p;return`${c}${d}${h}`};

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/assistant/use-follow-stream.js

@@ -1 +1 @@
-import{useCallback as r,useEffect as e,useLayoutEffect as t,useRef as l,useState as c}from"react";export const useFollowStream=(o,n)=>{let s=l(null),u=l(!0),[i,g]=c(!1),h=r(()=>{let r=s.current;u.current=!0,g(!1),r&&(r.scrollTop=r.scrollHeight)},[]),H=r(()=>{let r=s.current;r&&(u.current=r.scrollHeight-r.scrollTop-r.clientHeight<=24,u.current&&g(!1))},[]);return t(()=>{h()},[n,h]),t(()=>{let r=s.current;r&&(u.current?r.scrollTop=r.scrollHeight:r.scrollHeight>r.clientHeight&&g(!0))},[o]),e(()=>{let r=s.current;if(!r)return;let e=new ResizeObserver(()=>{u.current&&(r.scrollTop=r.scrollHeight)});return e.observe(r),()=>{e.disconnect()}},[]),{scrollerRef:s,hasUnseenContent:i,handleScroll:H,scrollToEnd:h}};
+import{useCallback as e,useEffect as r,useLayoutEffect as t,useRef as l,useState as c}from"react";export const useFollowStream=(o,n)=>{let s=l(null),i=l(!0),[u,g]=c(!1),h=e(()=>{let e=s.current;i.current=!0,g(!1),e&&(e.scrollTop=e.scrollHeight)},[]),H=e(()=>{let e=s.current;e&&(i.current=e.scrollHeight-e.scrollTop-e.clientHeight<=24,i.current&&g(!1))},[]);return t(()=>{h()},[n,h]),t(()=>{let e=s.current;e&&(i.current?e.scrollTop=e.scrollHeight:e.scrollHeight>e.clientHeight&&g(!0))},[o]),r(()=>{let e=s.current;if(!e)return;let r=()=>{i.current&&(e.scrollTop=e.scrollHeight)},t=new ResizeObserver(r);return t.observe(e),e.addEventListener("load",r,!0),()=>{t.disconnect(),e.removeEventListener("load",r,!0)}},[]),{scrollerRef:s,hasUnseenContent:u,handleScroll:H,scrollToEnd:h}};

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/canvas/LayoutCanvas.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{Box as a}from"@mui/material";import{useDetectGPU as i}from"@react-three/drei";import{Canvas as o,useThree as n}from"@react-three/fiber";import{memo as s,useCallback as l,useEffect as p,useMemo as c,useState as f}from"react";import{BuiltInLoadingPhase as m,useLoadingPhase as d,useLoadingStateManager as h,useStoreSelector as u}from"#package/react-sdk";import{useResponsive as g}from"#package/ui-sdk";import{useConfigurator as x}from"../../../../application-runtime/index.js";import{Scene as v,SceneEnvironment as C}from"../../../../scene/index.js";import{CanvasLoader as P}from"../../../phoenix-layout-elements/index.js";import{GPUIssuePage as w}from"./GPUIssuePage.js";let j=e=>{let{onCanNotLoad:t}=e,r=n(e=>e.gl);return p(()=>{let e=r.getContext(),a=e.getExtension("WEBGL_debug_renderer_info");a?e.getParameter(a.UNMASKED_RENDERER_WEBGL).toLocaleLowerCase().includes("swiftshader")&&t?.("no-acceleration"):t?.("no-acceleration")},[r,t]),null};export const Canvas=s(()=>{let[n,s]=f(null),[D,E]=f(!0),{canvasSystem:B}=x(),L=u(e=>B.getCanvasConfig(e.state),[B]),y=i(),{canvasPadding:k}=g(),M=null!==h();d({id:m.SceneAssets,label:"Loading 3D scene…"},D);let $=l(()=>{E(!1),B.reportFirstLoadFinished()},[B]),_=l(e=>{B.onCanvasClick$.next(e)},[B]),b=l(e=>{B.onCanvasPointerMove$.next(e)},[B]),A=c(()=>{let e={};return L?.precision&&(e.precision=L.precision),L?.alpha&&(e.alpha=L.alpha),L?.premultipliedAlpha&&(e.premultipliedAlpha=L.premultipliedAlpha),L?.antialias&&(e.antialias=L.antialias),L?.stencil&&(e.stencil=L.stencil),L?.preserveDrawingBuffer&&(e.preserveDrawingBuffer=L.preserveDrawingBuffer),L?.powerPreference&&(e.powerPreference=L.powerPreference),L?.depth&&(e.depth=L.depth),L?.logarithmicDepthBuffer&&(e.logarithmicDepthBuffer=L.logarithmicDepthBuffer),L?.failIfMajorPerformanceCaveat&&(e.failIfMajorPerformanceCaveat=L.failIfMajorPerformanceCaveat),e},[L]);return(p(()=>{"WEBGL_UNSUPPORTED"===y.type&&s("no-gpu")},[y,s]),n)?e(w,{issue:n}):t(r,{children:[e(a,{component:"div",sx:{transition:"opacity 0.3s ease-in",opacity:+!D,width:"100%",height:"100%"},children:t(o,{gl:A,onClick:_,onPointerMove:b,frameloop:L?.frameloop,shadows:L?.shadows,children:[e(v,{onFirstLoad:$}),e(j,{onCanNotLoad:s}),e(C,{})]})}),!M&&e(a,{component:"div",sx:{position:"absolute",top:k.top,left:k.left,width:`calc(100% - ${k.left}px - ${k.right}px)`,height:`calc(100% - ${k.top}px - ${k.bottom}px)`,display:"flex",justifyContent:"center",alignItems:"center",transition:"opacity 0.3s ease-in",opacity:+!!D,pointerEvents:"none"},children:e(P,{})})]})});
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{Box as a}from"@mui/material";import{useDetectGPU as i}from"@react-three/drei";import{Canvas as o,useThree as n}from"@react-three/fiber";import{memo as s,useCallback as l,useEffect as p,useMemo as c,useState as f}from"react";import{BuiltInLoadingPhase as m,useExpectPhase as d,useLoadingPhase as h,useLoadingStateManager as u,useStoreSelector as g}from"#package/react-sdk";import{useResponsive as x}from"#package/ui-sdk";import{useConfigurator as v}from"../../../../application-runtime/index.js";import{Scene as C,SceneEnvironment as P}from"../../../../scene/index.js";import{CanvasLoader as w}from"../../../phoenix-layout-elements/index.js";import{GPUIssuePage as j}from"./GPUIssuePage.js";let D=e=>{let{onCanNotLoad:t}=e,r=n(e=>e.gl);return p(()=>{let e=r.getContext(),a=e.getExtension("WEBGL_debug_renderer_info");a?e.getParameter(a.UNMASKED_RENDERER_WEBGL).toLocaleLowerCase().includes("swiftshader")&&t?.("no-acceleration"):t?.("no-acceleration")},[r,t]),null};export const Canvas=s(()=>{let[n,s]=f(null),[E,B]=f(!0),{canvasSystem:L}=v(),y=g(e=>L.getCanvasConfig(e.state),[L]),k=i(),{canvasPadding:A}=x(),M=null!==u();d(m.SceneAssets),h({id:m.SceneAssets,label:"Loading 3D scene…"},E);let $=l(()=>{B(!1),L.reportFirstLoadFinished()},[L]),_=l(e=>{L.onCanvasClick$.next(e)},[L]),b=l(e=>{L.onCanvasPointerMove$.next(e)},[L]),I=c(()=>{let e={};return y?.precision&&(e.precision=y.precision),y?.alpha&&(e.alpha=y.alpha),y?.premultipliedAlpha&&(e.premultipliedAlpha=y.premultipliedAlpha),y?.antialias&&(e.antialias=y.antialias),y?.stencil&&(e.stencil=y.stencil),y?.preserveDrawingBuffer&&(e.preserveDrawingBuffer=y.preserveDrawingBuffer),y?.powerPreference&&(e.powerPreference=y.powerPreference),y?.depth&&(e.depth=y.depth),y?.logarithmicDepthBuffer&&(e.logarithmicDepthBuffer=y.logarithmicDepthBuffer),y?.failIfMajorPerformanceCaveat&&(e.failIfMajorPerformanceCaveat=y.failIfMajorPerformanceCaveat),e},[y]);return(p(()=>{"WEBGL_UNSUPPORTED"===k.type&&s("no-gpu")},[k,s]),n)?e(j,{issue:n}):t(r,{children:[e(a,{component:"div",sx:{transition:"opacity 0.3s ease-in",opacity:+!E,width:"100%",height:"100%"},children:t(o,{gl:I,onClick:_,onPointerMove:b,frameloop:y?.frameloop,shadows:y?.shadows,children:[e(C,{onFirstLoad:$}),e(D,{onCanNotLoad:s}),e(P,{})]})}),!M&&e(a,{component:"div",sx:{position:"absolute",top:A.top,left:A.left,width:`calc(100% - ${A.left}px - ${A.right}px)`,height:`calc(100% - ${A.top}px - ${A.bottom}px)`,display:"flex",justifyContent:"center",alignItems:"center",transition:"opacity 0.3s ease-in",opacity:+!!E,pointerEvents:"none"},children:e(w,{})})]})});

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

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{styled as e}from"@mui/material";import{Suspense as o,memo as r,useEffect as i,useRef as n,useState as a}from"react";import{useLoadingStateManager as s}from"#package/react-sdk";import{usePreview as l}from"../../../../configurator-context/index.js";import{CanvasLoader as m}from"../../../phoenix-layout-elements/index.js";import{Canvas as c}from"./LayoutCanvas.js";let p=e("div",{shouldForwardProp:t=>"masked"!==t})(({masked:t,theme:{palette:e}})=>({backgroundColor:e.background.scene,inset:0,position:"absolute",isolation:"isolate",maxBlockSize:"var(--phx-app-height)","&::after":{backgroundColor:"inherit",content:'""',display:"block",inset:"inherit",opacity:+!!t,pointerEvents:"none",position:"absolute",transitionDuration:t?"0ms":"100ms",transitionProperty:"opacity",transitionTimingFunction:"linear"}})),u=e("div")({display:"grid",inset:0,placeItems:"center",pointerEvents:"none",position:"absolute"}),d=()=>null!==s()?null:t(u,{children:t(m,{})});export const SharedCanvas=r(()=>{let{isExpanded:e}=l(),[r,s]=a(!1),m=n(e);return i(()=>{if(e===m.current)return;m.current=e,s(!0);let t=setTimeout(()=>s(!1),600);return()=>clearTimeout(t)},[e]),t(p,{masked:r,children:t(o,{fallback:t(d,{}),children:t(c,{})})})});
+import{jsx as t}from"react/jsx-runtime";import{styled as e}from"@mui/material";import{Suspense as o,memo as r,useEffect as i,useRef as n,useState as a}from"react";import{BuiltInLoadingPhase as s,useExpectPhase as l,useLoadingStateManager as m}from"#package/react-sdk";import{usePreview as c}from"../../../../configurator-context/index.js";import{CanvasLoader as p}from"../../../phoenix-layout-elements/index.js";import{Canvas as u}from"./LayoutCanvas.js";let d=e("div",{shouldForwardProp:t=>"masked"!==t})(({masked:t,theme:{palette:e}})=>({backgroundColor:e.background.scene,inset:0,position:"absolute",isolation:"isolate",maxBlockSize:"var(--phx-app-height)","&::after":{backgroundColor:"inherit",content:'""',display:"block",inset:"inherit",opacity:+!!t,pointerEvents:"none",position:"absolute",transitionDuration:t?"0ms":"100ms",transitionProperty:"opacity",transitionTimingFunction:"linear"}})),h=e("div")({display:"grid",inset:0,placeItems:"center",pointerEvents:"none",position:"absolute"}),f=()=>null!==m()?null:t(h,{children:t(p,{})});export const SharedCanvas=r(()=>{l(s.SceneAssets);let{isExpanded:e}=c(),[r,m]=a(!1),p=n(e);return i(()=>{if(e===p.current)return;p.current=e,m(!0);let t=setTimeout(()=>m(!1),600);return()=>clearTimeout(t)},[e]),t(d,{masked:r,children:t(o,{fallback:t(f,{}),children:t(u,{})})})});

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/configurator/ui/configurator-layout/slots/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;