@salsita-ai/sdk 0.50.0-develop.ed1806b910 → 0.50.0-develop.eeaf6c4605

package/dist/configurator/ui/assistant/AssistantThread.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as t,styled as s}from"@mui/material";import{useCallback as r,useMemo as n}from"react";import{match as o}from"ts-pattern";import{useEagerObservableValue as l}from"#package/react-sdk";import{PhxIcon as d}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";import{AssistantToolChips as c}from"./AssistantChips.js";import{AssistantMarkdown as h}from"./AssistantMarkdown.js";import{describeAssistantFailure as p}from"./assistant-failure.js";import{EntityLinkSelectionProvider as g,useCreateEntityLinkSelection as u}from"./entity-link/index.js";import{AssistantPanelName as f}from"./theme.js";import{buildEarlierThreadItems as k,buildThreadView as v}from"./thread-items.js";import{useFollowStream as b}from"./use-follow-stream.js";let w=s("div",{name:f,slot:"thread"})({display:"grid",position:"relative"}),x=s("div",{name:f,slot:"messages"})(({theme:{spacing:e,typography:a}})=>({...a.body2,display:"flex",flexDirection:"column",gap:e(1.5),overflowY:"auto",overscrollBehavior:"contain",paddingBlock:e(2),paddingInline:`var(--phx-sidebar-padding, ${e(2)})`,"& > :first-child":{marginBlockStart:"auto"}})),y=s("div",{name:f,slot:"userMessage"})(({theme:{palette:e,spacing:a}})=>({alignSelf:"flex-end",background:`hsl(from ${e.primary.main} h s l / 12%)`,borderRadius:"14px 14px 4px 14px",maxInlineSize:"85%",overflowWrap:"anywhere",paddingBlock:a(1),paddingInline:a(1.5),whiteSpace:"pre-wrap"})),T=s("div",{name:f,slot:"greeting"})({}),C=s("div",{name:f,slot:"status"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary})),S=s("div",{name:f,slot:"separator"})(({theme:{palette:e,spacing:a,typography:i}})=>({...i.caption,alignItems:"center",color:e.text.secondary,display:"flex",gap:a(1),"&::before, &::after":{borderBlockStart:`1px solid ${e.divider}`,content:'""',flex:1}})),j=s(t,{name:f,slot:"earlierButton"})({alignSelf:"center"}),I=s("div",{name:f,slot:"notice"})(({theme:{palette:e,shape:a,spacing:i}})=>({alignItems:"center",background:e.action.hover,borderRadius:a.borderRadius,display:"flex",flexWrap:"wrap",gap:i(1),justifyContent:"space-between",paddingBlock:i(1),paddingInline:i(1.5)})),B=s(t,{name:f,slot:"newReplyButton"})(({theme:{palette:e,spacing:a}})=>({background:e.text.primary,borderRadius:"calc(infinity * 1px)",color:e.background.paper,insetBlockEnd:a(1),insetInlineStart:"50%",position:"absolute",translate:"-50% 0","&:hover":{background:e.text.secondary}})),E=({item:a,isActive:t,undoableToolCallId:s,onUndo:r})=>o(a).with({kind:"user"},({text:a})=>e(y,{children:a})).with({kind:"text"},({markdown:a,isStreaming:i,forms:t})=>e(h,{markdown:a,isStreaming:i,forms:t})).with({kind:"tools"},({tools:a})=>e(c,{tools:a,isActive:t,canUndo:a.some(({id:e})=>e===s),onUndo:r})).with({kind:"separator"},()=>e(S,{role:"separator",children:e(i,{id:"sdk.assistant.thread.earlierSummarized",message:"Earlier conversation summarized"})})).exhaustive();export const AssistantThread=()=>{let{assistantSystem:s}=m(),c=l(s.chat$),{messages:h,isLoading:f,isResuming:y,earlierThreads:S}=c,A=l(s.undoTipToolCallId$),R=f?void 0:A,{items:L,isThinking:z}=n(()=>v(h,f,y),[h,f,y]),$=n(()=>k(S),[S]),U=n(()=>L.filter(({kind:e})=>"user"===e).length,[L]),D=c.error?p(c.failedStatus):void 0,{scrollerRef:M,hasUnseenContent:W,handleScroll:q,scrollToEnd:H}=b(n(()=>({messages:h,isThinking:z,isResuming:y,failure:D?.kind}),[h,z,y,D?.kind]),U),N=u(),Y=r(e=>{e.target instanceof Element&&e.target.closest('a, button, input, label, select, textarea, [role="button"], [role="tooltip"]')||window.getSelection()?.isCollapsed!==!1&&N.release()},[N]),F=!c.isLoaded&&0===$.length&&!y&&!D;return a(w,{children:[e(g,{selection:N,children:a(x,{ref:M,onScroll:q,onClick:Y,role:"log","aria-live":"polite",children:[c.isLoaded&&0===L.length&&0===$.length&&!f&&!y&&!D&&e(T,{children:e(i,{id:"sdk.assistant.thread.greeting",message:"Hi. I can answer questions about this design and change it with you. Tell me what you need."})}),F&&e(C,{children:e(i,{id:"sdk.assistant.thread.loading",message:"Loading the conversation…"})}),c.isLoadingEarlierThread&&e(C,{children:e(i,{id:"sdk.assistant.thread.loadingEarlier",message:"Loading the earlier conversation…"})}),c.hasEarlierThread&&!c.isLoadingEarlierThread&&e(j,{size:"small",color:"inherit",onClick:s.loadEarlierThread,children:e(i,{id:"sdk.assistant.thread.showEarlier.label",message:"Show earlier conversation"})}),$.map(a=>e(E,{item:a,isActive:!1,undoableToolCallId:R,onUndo:s.undoToolCalls},a.id)),L.map(a=>e(E,{item:a,isActive:f&&a===L.at(-1),undoableToolCallId:R,onUndo:s.undoToolCalls},a.id)),y&&e(C,{children:e(i,{id:"sdk.assistant.thread.resuming",message:"Resuming the conversation…"})}),z&&e(C,{children:e(i,{id:"sdk.assistant.thread.thinking",message:"Thinking…"})}),D&&a(I,{role:"alert",children:[e("span",{children:o(D.kind).with("notAvailable",()=>e(i,{id:"sdk.assistant.failure.notAvailable",message:"The assistant is not available here."})).with("busy",()=>e(i,{id:"sdk.assistant.failure.busy",message:"The assistant is still working on an earlier message."})).with("unavailable",()=>e(i,{id:"sdk.assistant.failure.unavailable",message:"The assistant is unavailable right now."})).exhaustive()}),D.canRetry&&e(t,{size:"small",variant:"outlined",color:"inherit",onClick:s.reloadThread,children:e(i,{id:"sdk.assistant.failure.retry.label",message:"Try again"})})]})]})}),W&&e(B,{size:"small",onClick:H,endIcon:e(d,{name:"CaretDown"}),children:e(i,{id:"sdk.assistant.thread.newReply.label",message:"New reply"})})]})};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as s,styled as t}from"@mui/material";import{useCallback as r,useMemo as n,useRef as o}from"react";import{match as l}from"ts-pattern";import{useEagerObservableValue as d}from"#package/react-sdk";import{PhxIcon as m,hoverStyles as c}from"#package/ui-sdk";import{useConfigurator as h}from"../../application-runtime/index.js";import{AssistantActivityRow as g,AssistantToolChips as p}from"./AssistantChips.js";import{AssistantMarkdown as u}from"./AssistantMarkdown.js";import{describeAssistantFailure as k}from"./assistant-failure.js";import{MessageImages as f}from"./attachments/index.js";import{EntityLinkSelectionProvider as b,useCreateEntityLinkSelection as v}from"./entity-link/index.js";import{AssistantPanelName as x}from"./theme.js";import{buildEarlierThreadItems as w,buildThreadView as y}from"./thread-items.js";import{useFollowStream as T}from"./use-follow-stream.js";import{useLoadOlderOnTop as I}from"./use-load-older-on-top.js";let S=t("div",{name:x,slot:"thread"})({display:"grid",position:"relative"}),j=t("div",{name:x,slot:"messages"})(({theme:{spacing:e,typography:a}})=>({...a.body2,display:"flex",flexDirection:"column",gap:e(1.5),overflowY:"auto",overscrollBehavior:"contain",paddingBlock:e(2),paddingInline:`var(--phx-sidebar-padding, ${e(2)})`,position:"relative","& > :first-child":{marginBlockStart:"auto"}})),C=t("div",{name:x,slot:"userMessage"})(({theme:{palette:e,spacing:a}})=>({alignSelf:"flex-end",background:`hsl(from ${e.primary.main} h s l / 12%)`,borderRadius:"14px 14px 4px 14px",display:"grid",gap:a(1),maxInlineSize:"85%",overflowWrap:"anywhere",paddingBlock:a(1),paddingInline:a(1.5),whiteSpace:"pre-wrap"})),B=t("div",{name:x,slot:"greeting"})({}),R=t("div",{name:x,slot:"status"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary})),L=t("div",{name:x,slot:"separator"})(({theme:{palette:e,spacing:a,typography:i}})=>({...i.caption,alignItems:"center",color:e.text.secondary,display:"flex",gap:a(1),"&::before, &::after":{borderBlockStart:`1px solid ${e.divider}`,content:'""',flex:1}})),A=t(s,{name:x,slot:"earlierButton"})({alignSelf:"center"}),E=t("div")({blockSize:1,insetBlockStart:0,insetInline:0,position:"absolute"}),M=t(R)(({theme:{palette:e,shape:a,spacing:i}})=>({background:e.background.paper,borderRadius:a.borderRadius,insetBlockStart:i(1),insetInlineStart:"50%",paddingBlock:i(.5),paddingInline:i(1),position:"absolute",translate:"-50% 0"})),z=t("div",{name:x,slot:"notice"})(({theme:{palette:e,shape:a,spacing:i}})=>({alignItems:"center",background:e.action.hover,borderRadius:a.borderRadius,display:"flex",flexWrap:"wrap",gap:i(1),justifyContent:"space-between",paddingBlock:i(1),paddingInline:i(1.5)})),O=t(s,{name:x,slot:"newReplyButton"})(({theme:{palette:e,spacing:a}})=>({background:e.text.primary,borderRadius:"calc(infinity * 1px)",color:e.background.paper,insetBlockEnd:a(1),insetInlineStart:"50%",position:"absolute",translate:"-50% 0","&:hover":{background:e.text.primary},...c({"&:hover":{background:e.text.secondary}})})),$=({item:s,isActive:t,undoableToolCallId:r,onUndo:n})=>l(s).with({kind:"user"},({text:i,imageIds:s})=>a(C,{children:[s.length>0&&e(f,{imageIds:s}),i]})).with({kind:"text"},({markdown:a,isStreaming:i,forms:s})=>e(u,{markdown:a,isStreaming:i,forms:s})).with({kind:"tools"},({tools:a})=>e(p,{tools:a,isActive:t,canUndo:a.some(({id:e})=>e===r),onUndo:n})).with({kind:"separator"},()=>e(L,{role:"separator",children:e(i,{id:"sdk.assistant.thread.earlierSummarized",message:"Earlier conversation summarized"})})).exhaustive();export const AssistantThread=()=>{let{assistantSystem:t}=h(),c=d(t.chat$),{messages:p,isLoading:u,isResuming:f,earlierThreads:x}=c,C=d(t.undoTipToolCallId$),L=u?void 0:C,{items:U,isThinking:D}=n(()=>y(p,u,f),[p,u,f]),W=n(()=>w(x),[x]),q=n(()=>U.filter(({kind:e})=>"user"===e).at(-1)?.id,[U]),H=c.error?k(c.failedStatus):void 0,K=p.at(-1),{scrollerRef:N,hasUnseenContent:Y,handleScroll:F,scrollToEnd:G}=T(n(()=>({newestMessage:K,isThinking:D,isResuming:f,failure:H?.kind}),[K,D,f,H?.kind]),q),J=o(null);I(N,J,{enabled:c.hasOlderMessages&&!c.isLoadingOlderMessages,onReachTop:t.loadOlderMessages,firstItemKey:p[0]?.id});let P=null!==c.earlierThreadId&&!c.hasOlderMessages&&!c.isLoadingEarlierThread,Q=v(),V=r(e=>{e.target instanceof Element&&e.target.closest('a, button, input, label, select, textarea, [role="button"], [role="tooltip"]')||window.getSelection()?.isCollapsed!==!1&&Q.release()},[Q]),X=!c.isLoaded&&0===W.length&&!f&&!H;return a(S,{children:[e(b,{selection:Q,children:a(j,{ref:N,onScroll:F,onClick:V,role:"log","aria-live":"polite",children:[c.isLoaded&&0===U.length&&0===W.length&&!u&&!f&&!H&&e(B,{children:e(i,{id:"sdk.assistant.thread.greeting",message:"Hi. I can answer questions about this design and change it with you. Tell me what you need."})}),X&&e(R,{children:e(i,{id:"sdk.assistant.thread.loading",message:"Loading the conversation…"})}),c.isLoadingEarlierThread&&e(R,{children:e(i,{id:"sdk.assistant.thread.loadingEarlier",message:"Loading the earlier conversation…"})}),P&&e(A,{size:"small",color:"inherit",onClick:t.loadEarlierThread,children:e(i,{id:"sdk.assistant.thread.showEarlier.label",message:"Show earlier conversation"})}),W.map(a=>e($,{item:a,isActive:!1,undoableToolCallId:L,onUndo:t.undoToolCalls},a.id)),U.map(a=>e($,{item:a,isActive:u&&a===U.at(-1),undoableToolCallId:L,onUndo:t.undoToolCalls},a.id)),f&&e(R,{children:e(i,{id:"sdk.assistant.thread.resuming",message:"Resuming the conversation…"})}),D&&e(g,{label:e(i,{id:"sdk.assistant.thread.thinking",message:"Thinking…"})}),H&&a(z,{role:"alert",children:[e("span",{children:l(H.kind).with("notAvailable",()=>e(i,{id:"sdk.assistant.failure.notAvailable",message:"The assistant is not available here."})).with("busy",()=>e(i,{id:"sdk.assistant.failure.busy",message:"The assistant is still working on an earlier message."})).with("unavailable",()=>e(i,{id:"sdk.assistant.failure.unavailable",message:"The assistant is unavailable right now."})).exhaustive()}),H.canRetry&&e(s,{size:"small",variant:"outlined",color:"inherit",onClick:t.reloadThread,children:e(i,{id:"sdk.assistant.failure.retry.label",message:"Try again"})})]}),c.hasOlderMessages&&e(E,{ref:J,"aria-hidden":!0})]})}),c.isLoadingOlderMessages&&e(M,{role:"status",children:e(i,{id:"sdk.assistant.thread.loadingOlder",message:"Loading earlier messages…"})}),Y&&e(O,{size:"small",onClick:G,endIcon:e(m,{name:"CaretDown"}),children:e(i,{id:"sdk.assistant.thread.newReply.label",message:"New reply"})})]})};

package/dist/configurator/ui/assistant/alert/AssistantAlert.d.ts

@@ -4,5 +4,8 @@ export interface AssistantAlertProps {
     readonly kind: AlertKind;
     readonly children: ReactNode;
 }
-/** A GitHub alert in a reply: its content as Markdown, marked by the colour and icon of its kind. */
+/**
+ * A GitHub alert in a reply: its content as Markdown, marked by the colour and icon of its kind,
+ * and starting with the word for its kind, which only assistive technology reads.
+ */
 export declare const AssistantAlert: import("react").MemoExoticComponent<({ kind, children }: AssistantAlertProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/configurator/ui/assistant/alert/AssistantAlert.js

@@ -1 +1 @@
-import{jsx as r,jsxs as i}from"react/jsx-runtime";import{alpha as o,styled as t}from"@mui/material";import{memo as n}from"react";import{PhxIcon as a}from"#package/ui-sdk";import{AssistantPanelName as e}from"../theme.js";let l={note:{color:"info",icon:"Info"},tip:{color:"success",icon:"Lightbulb"},important:{color:"primary",icon:"WarningCircle"},warning:{color:"warning",icon:"Warning"},caution:{color:"error",icon:"XCircle"}},c=t("div",{name:e,slot:"alert"})(({theme:{palette:r,shape:i,spacing:t,typography:n}})=>({borderInlineStart:"3px solid",borderRadius:i.borderRadius,display:"grid",gap:t(1),gridTemplateColumns:"min-content minmax(0, 1fr)",marginBlock:t(1),padding:t(1,1.5),...Object.fromEntries(Object.entries(l).map(([i,{color:t}])=>[`&[data-alert="${i}"]`,{background:o(r[t].main,.08),borderInlineStartColor:r[t].main,"& > :first-child":{color:r[t].main}}])),"& > :last-child > :first-child":{marginBlockStart:0},"& > :last-child > :last-child":{marginBlockEnd:0},"& > :first-child":{blockSize:`calc(${n.body2.lineHeight} * 1em)`,display:"grid",placeItems:"center"}}));export const AssistantAlert=n(({kind:o,children:t})=>i(c,{role:"note","data-alert":o,children:[r("span",{children:r(a,{name:l[o].icon})}),r("div",{children:t})]}));
+import{jsx as a,jsxs as i}from"react/jsx-runtime";import{alpha as r,styled as t}from"@mui/material";import{visuallyHidden as e}from"@mui/utils";import{memo as l}from"react";import{useLocalizable as n}from"#package/react-sdk";import{PhxIcon as s}from"#package/ui-sdk";import{AssistantPanelName as o}from"../theme.js";let m={note:{color:"info",icon:"Info",label:{id:"sdk.assistant.alert.note.label",message:"Note"}},tip:{color:"success",icon:"Lightbulb",label:{id:"sdk.assistant.alert.tip.label",message:"Tip"}},important:{color:"primary",icon:"WarningCircle",label:{id:"sdk.assistant.alert.important.label",message:"Important"}},warning:{color:"warning",icon:"Warning",label:{id:"sdk.assistant.alert.warning.label",message:"Warning"}},caution:{color:"error",icon:"XCircle",label:{id:"sdk.assistant.alert.caution.label",message:"Caution"}}},c=t("div",{name:o,slot:"alert"})(({theme:{palette:a,shape:i,spacing:t,typography:e}})=>({borderInlineStart:"3px solid",borderRadius:i.borderRadius,display:"grid",gap:t(1),gridTemplateColumns:"min-content minmax(0, 1fr)",marginBlock:t(1),padding:t(1,1.5),...Object.fromEntries(Object.entries(m).map(([i,{color:t}])=>[`&[data-alert="${i}"]`,{background:r(a[t].main,.08),borderInlineStartColor:a[t].main,"& > :first-child":{color:a[t].main}}])),"& > :last-child > :first-child":{marginBlockStart:0},"& > :last-child > :last-child":{marginBlockEnd:0},"& > :first-child":{blockSize:`calc(${e.body2.lineHeight} * 1em)`,display:"grid",placeItems:"center"}}));export const AssistantAlert=l(({kind:r,children:t})=>{let{icon:l,label:o}=m[r],d=n(o);return i(c,{role:"note","data-alert":r,children:[i("span",{children:[a(s,{name:l}),a("span",{style:e,children:d})]}),a("div",{children:t})]})});

package/dist/configurator/ui/assistant/attachments/MessageImages.d.ts

@@ -0,0 +1,11 @@
+interface MessageImagesProps {
+    /** The images the user attached to the message, by the ids it references them by. */
+    readonly imageIds: readonly string[];
+}
+/**
+ * The images a user attached to a message, as thumbnails above its text. They are read from the
+ * server as soon as the bubble shows, through the same per-configuration cache as the screenshots;
+ * a click shows one larger in a popover.
+ */
+export declare const MessageImages: ({ imageIds }: MessageImagesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/attachments/MessageImages.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ButtonBase as i,Popover as o,styled as a}from"@mui/material";import{useCallback as t,useMemo as s,useState as n}from"react";import{useLocalizable as m}from"#package/react-sdk";import{useScreenshotSrc as l}from"../screenshots/index.js";import{AssistantPanelName as d}from"../theme.js";let c={id:"sdk.assistant.message.image.open",message:"Show the attached image larger"},p=a("div",{name:d,slot:"messageImages"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(.75),justifyContent:"flex-end"})),g=a(i,{name:d,slot:"messageImage"})(({theme:{palette:e,shape:r}})=>({background:e.action.hover,blockSize:64,borderRadius:r.borderRadius,inlineSize:64,overflow:"hidden"})),h=a("img")({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),b=a("img")(({theme:{shape:e}})=>({borderRadius:e.borderRadius,display:"block",maxBlockSize:"70vh",maxInlineSize:"min(80vw, 640px)"})),v=({imageId:r,onOpen:i})=>{let o=l(s(()=>({kind:"stored",imageId:r}),[r]));return e(g,{"aria-label":m(c),disabled:void 0===o,onClick:e=>void 0!==o&&i(e,o),children:void 0!==o&&e(h,{src:o,alt:""})})};export const MessageImages=({imageIds:i})=>{let[a,s]=n(),m=t((e,r)=>{s({anchor:e.currentTarget,src:r})},[]),l=t(()=>s(void 0),[]);return r(p,{children:[i.map(r=>e(v,{imageId:r,onOpen:m},r)),e(o,{open:void 0!==a,anchorEl:a?.anchor,onClose:l,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},slotProps:{paper:{sx:{padding:1}}},children:a&&e(b,{src:a.src,alt:""})})]})};

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

@@ -0,0 +1,2 @@
+export { MessageImages } from './MessageImages.js';
+export { ASSISTANT_IMAGE_MAX_SIDE, fitWithin, prepareImage } from './prepare-image.js';

package/dist/configurator/ui/assistant/attachments/index.js

@@ -0,0 +1 @@
+export{MessageImages}from"./MessageImages.js";export{ASSISTANT_IMAGE_MAX_SIDE,fitWithin,prepareImage}from"./prepare-image.js";

package/dist/configurator/ui/assistant/attachments/prepare-image.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The longest side, in pixels, of an image the user attaches: the provider fits every image within
+ * 2048 × 2048 before the model reads it, so more would only cost upload time and storage.
+ */
+export declare const ASSISTANT_IMAGE_MAX_SIDE = 2048;
+interface Size {
+    readonly width: number;
+    readonly height: number;
+}
+/** The size that fits within `max` × `max`, keeping the aspect ratio and never enlarging. */
+export declare const fitWithin: ({ width, height }: Size, max: number) => Size;
+/**
+ * Turns an image file the user attaches into what is uploaded: decoded, fitted within
+ * {@link ASSISTANT_IMAGE_MAX_SIDE} on each side and re-encoded as JPEG. Re-encoding drops the
+ * file's metadata, its location included, and fills a transparent background white. Rejects for a
+ * file the browser cannot decode.
+ */
+export declare const prepareImage: (file: Blob) => Promise<Blob>;
+export {};

package/dist/configurator/ui/assistant/attachments/prepare-image.js

@@ -0,0 +1 @@
+export const ASSISTANT_IMAGE_MAX_SIDE=2048;export const fitWithin=({width:e,height:t},a)=>{let r=Math.min(1,a/e,a/t);return{width:Math.max(1,Math.round(e*r)),height:Math.max(1,Math.round(t*r))}};let e=async e=>{let t=URL.createObjectURL(e),a=new Image;a.src=t;try{return await a.decode(),a}finally{URL.revokeObjectURL(t)}};export const prepareImage=async t=>{let a=await e(t),{width:r,height:n}=fitWithin({width:a.naturalWidth,height:a.naturalHeight},2048),o=document.createElement("canvas");o.width=r,o.height=n;let h=o.getContext("2d");if(!h)throw Error("The browser gave no 2D canvas to prepare the attached image on.");return h.fillStyle="#fff",h.fillRect(0,0,r,n),h.drawImage(a,0,0,r,n),new Promise((e,t)=>{o.toBlob(a=>a?e(a):t(Error("The browser could not encode the attached image as JPEG.")),"image/jpeg",.85)})};

package/dist/configurator/ui/assistant/entity-link/AssistantEntityLink.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{styled as t}from"@mui/material";import{memo as n,useCallback as i,useEffect as r,useRef as o}from"react";import{sceneEntitySelectHotspotComponent as a,selectableComponent as l}from"#package/domain";import{FrontendAnalyticsFactory as s,useDomain as c,useFirstRenderedComponent as d,useHoveredDomainEntityId as m,useRenderedSelector as u,useSelectEntity as p,useSelectedDomainEntityId as k,useStoreSelector as y}from"#package/react-sdk";import{assistantReferenceStyles as f}from"../reference-link/index.js";import{AssistantPanelName as g}from"../theme.js";import{useEntityLinkSelection as h}from"./entity-link-selection.js";import{resolveEntityLinkState as v}from"./entity-link-state.js";let b=t("span",{name:g,slot:"entityLink"})(e=>({...f(e),'&[data-entity-link="plain"], &[data-entity-link="missing"]':{cursor:"auto","&:hover":{background:"none"}},'&[data-selected="true"]':{textDecorationStyle:"solid"}})),S={interactive:void 0,plain:"plain",missing:"muted"},j=({kind:t,isSelected:n,children:i})=>e(b,{"data-entity-link":t,"data-reference":S[t],"data-selected":n,children:i}),x=({id:t,isSelected:n,children:u})=>{let{navigationSystem:k}=c(),y=d({entityIds:[t],componentTypes:[l]}),f=d({entityIds:[t],componentTypes:[a]}),{kind:g,canHover:S}=v({isSelectable:null!=y,isHoverDisabled:y?.state.hoverable===!1,hasSelectHotspot:null!=f}),x=m()===t,E=p(s.AssistantEntityLinkClicked),T=h(),D=i(()=>{T?.remember(t),E(t)},[t,T,E]),H=o(!1),L=i(()=>{S&&(H.current=!0,k.debouncedToggleHover(t))},[S,t,k]),I=i(()=>{H.current&&(H.current=!1,k.debouncedToggleHover(null))},[k]),A=i(e=>{"touch"!==e.pointerType&&L()},[L]),C=i(e=>{e.currentTarget.matches(":focus-visible")&&L()},[L]),P=i(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),D())},[D]);return(r(()=>I,[S,I,t]),"interactive"!==g)?e(j,{kind:g,isSelected:n,children:u}):e(b,{role:"button",tabIndex:0,"data-entity-link":g,"data-selected":n,"data-hovered":S&&x,"aria-current":n?"true":void 0,onClick:D,onKeyDown:P,onPointerEnter:A,onPointerLeave:I,onFocus:C,onBlur:I,children:u})};export const AssistantEntityLink=n(({id:t,children:n})=>{let{domain:i}=c(),r=y(e=>null!=i.getEntity(t,e.state),[i,t]),o=u(e=>null!=i.getEntity(t,e.state),[i,t]),a=k()===t;return r?o?e(x,{id:t,isSelected:a,children:n}):e(j,{kind:"plain",isSelected:a,children:n}):e(j,{kind:"missing",isSelected:!1,children:n})});
+import{jsx as e}from"react/jsx-runtime";import{styled as t}from"@mui/material";import{memo as n,useCallback as r,useEffect as i,useRef as o}from"react";import{sceneEntitySelectHotspotComponent as a,selectableComponent as l}from"#package/domain";import{FrontendAnalyticsFactory as c,useDomain as s,useFirstRenderedComponent as d,useHoveredDomainEntityId as m,useRenderedSelector as u,useSelectEntity as p,useSelectedDomainEntityId as k,useStoreSelector as y}from"#package/react-sdk";import{hoverStyles as f}from"#package/ui-sdk";import{assistantReferenceStyles as g}from"../reference-link/index.js";import{AssistantPanelName as h}from"../theme.js";import{useEntityLinkSelection as v}from"./entity-link-selection.js";import{resolveEntityLinkState as b}from"./entity-link-state.js";let S=t("span",{name:h,slot:"entityLink"})(e=>({...g(e),'&[data-entity-link="plain"], &[data-entity-link="missing"]':{cursor:"auto",...f({"&:hover":{background:"none"}})},'&[data-selected="true"]':{textDecorationStyle:"solid"}})),j={interactive:void 0,plain:"plain",missing:"muted"},x=({kind:t,isSelected:n,children:r})=>e(S,{"data-entity-link":t,"data-reference":j[t],"data-selected":n,children:r}),E=({id:t,isSelected:n,children:u})=>{let{navigationSystem:k}=s(),y=d({entityIds:[t],componentTypes:[l]}),f=d({entityIds:[t],componentTypes:[a]}),{kind:g,canHover:h}=b({isSelectable:null!=y,isHoverDisabled:y?.state.hoverable===!1,hasSelectHotspot:null!=f}),j=m()===t,E=p(c.AssistantEntityLinkClicked),T=v(),D=r(()=>{T?.remember(t),E(t)},[t,T,E]),H=o(!1),L=o(!1),I=o(!1),A=r(()=>{I.current&&(I.current=!1,k.debouncedToggleHover(null))},[k]),C=r(()=>{h&&(H.current||L.current)?(I.current=!0,k.debouncedToggleHover(t)):A()},[h,A,t,k]),P=r(e=>{"touch"!==e.pointerType&&(L.current=!0,C())},[C]),w=r(()=>{L.current=!1,C()},[C]),B=r(e=>{e.currentTarget.matches(":focus-visible")&&(H.current=!0,C())},[C]),F=r(()=>{H.current=!1,C()},[C]),K=r(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),D())},[D]);return(i(()=>A,[h,A,t]),"interactive"!==g)?e(x,{kind:g,isSelected:n,children:u}):e(S,{role:"button",tabIndex:0,"data-entity-link":g,"data-selected":n,"data-hovered":h&&j,"aria-current":n?"true":void 0,onClick:D,onKeyDown:K,onPointerEnter:P,onPointerLeave:w,onFocus:B,onBlur:F,children:u})};export const AssistantEntityLink=n(({id:t,children:n})=>{let{domain:r}=s(),i=y(e=>null!=r.getEntity(t,e.state),[r,t]),o=u(e=>null!=r.getEntity(t,e.state),[r,t]),a=k()===t;return i?o?e(E,{id:t,isSelected:a,children:n}):e(x,{kind:"plain",isSelected:a,children:n}):e(x,{kind:"missing",isSelected:!1,children:n})});

package/dist/configurator/ui/assistant/form/AssistantForm.js

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Trans as r}from"@lingui/react";import{Button as o,styled as t}from"@mui/material";import{memo as n,useCallback as a,useEffect as s,useMemo as l,useState as d}from"react";import{match as m}from"ts-pattern";import{useConfigurator as c}from"../../../application-runtime/index.js";import{AssistantPanelName as p}from"../theme.js";import{composeAnswer as u}from"./compose-answer.js";import{describeBuildErrors as b}from"./describe-build-errors.js";import{parseFormBlock as f}from"./parse-form-block.js";import{useFormRegistry as g}from"./registry/index.js";let h=t("div",{name:p,slot:"form"})(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",gap:e(1.5),marginBlock:e(1)})),k=t(o,{name:p,slot:"formSubmit"})(({theme:{palette:e,spacing:i,typography:r}})=>({...r.body2,alignSelf:"end",background:e.primary.main,border:"none",borderRadius:8,color:e.primary.contrastText,fontWeight:r.fontWeightMedium,letterSpacing:"normal",minBlockSize:0,minInlineSize:0,paddingBlock:i(.5),paddingInline:i(2),textTransform:"none","&:hover":{background:e.primary.dark,border:"none"},"&.Mui-disabled":{background:e.action.disabledBackground,border:"none",color:e.action.disabled}})),w=t("div",{name:p,slot:"formNote"})(({theme:{palette:e,shape:i,spacing:r,typography:o}})=>({...o.caption,alignItems:"center",background:e.action.hover,borderRadius:i.borderRadius,color:e.text.secondary,display:"flex",flexWrap:"wrap",gap:r(1),justifyContent:"space-between",marginBlock:r(1),paddingBlock:r(1),paddingInline:r(1.5)})),x=({model:o,disabled:t,send:n})=>{let[a,s]=d(()=>new Map),[l,c]=d(()=>new Map),p=(i,r)=>{let{id:l,definition:d,label:b,attributes:f}=i;return m(d).with({role:"option"},({component:d})=>e(d,{attributes:f,label:b,disabled:t,selected:!0===a.get(l),onSelect:e=>{o.isQuick?n(u(o,new Map([[i.id,!0]]),new Map([[i.id,e]]))):(c(r=>new Map(r).set(i.id,e)),s(e=>{let o=new Map(e);if("choice"===r.definition.role){for(let e of r.children)o.delete(e.id);o.set(i.id,!0)}else o.set(i.id,!0!==e.get(i.id));return o}))}},l)).with({role:"input"},({component:r})=>e(r,{attributes:f,label:b,disabled:t,state:a.get(l),onChange:(e,r)=>{o.isQuick?n(u(o,new Map([[i.id,e]]),new Map([[i.id,r]]))):(s(r=>new Map(r).set(i.id,e)),c(e=>new Map(e).set(i.id,r)))}},l)).with({role:"group"},{role:"choice"},{role:"choices"},({component:r})=>e(r,{attributes:f,label:b,disabled:t,children:i.children.map(e=>p(e,i))},l)).exhaustive()};return i(h,{children:[o.root.children.map(e=>p(e,o.root)),!o.isQuick&&e(k,{variant:"contained",disabled:t,disableElevation:!0,onClick:()=>{t||o.isQuick||n(u(o,a,l))},children:e(r,{id:"sdk.assistant.form.submit.label",message:"Submit"})})]})};export const AssistantForm=n(({source:t,status:n})=>{let{assistantSystem:m}=c(),[p,u]=d(!1),h="writing"===n,k=g(),M=l(()=>h?void 0:f(t,k),[t,h,k]),y="ready"!==n||p,j=a(e=>{u(!0),m.send(e).finally(()=>u(!1))},[m]);return(s(()=>{M?.ok===!1&&console.warn("The assistant wrote a form that could not be built.",M.errors)},[M]),M)?M.ok?0===M.root.children.length?null:e(x,{model:M,disabled:y,send:j}):i(w,{role:"alert",children:[e("span",{children:e(r,{id:"sdk.assistant.form.failure",message:"The assistant couldn't build this form."})}),e(o,{size:"small",variant:"outlined",color:"inherit",disabled:y,onClick:()=>j(b(M.errors)),children:e(r,{id:"sdk.assistant.form.fix.label",message:"Fix it"})})]}):e(w,{children:e(r,{id:"sdk.assistant.form.writing",message:"Preparing a form…"})})});
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Trans as r}from"@lingui/react";import{Button as o,styled as n}from"@mui/material";import{memo as t,useCallback as a,useEffect as d,useMemo as s,useState as l}from"react";import{match as m}from"ts-pattern";import{hoverStyles as c}from"#package/ui-sdk";import{useConfigurator as p}from"../../../application-runtime/index.js";import{AssistantPanelName as b}from"../theme.js";import{composeAnswer as u}from"./compose-answer.js";import{describeBuildErrors as g}from"./describe-build-errors.js";import{parseFormBlock as f}from"./parse-form-block.js";import{useFormRegistry as h}from"./registry/index.js";let k=n("div",{name:b,slot:"form"})(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",gap:e(1.5),marginBlock:e(1)})),x=n(o,{name:b,slot:"formSubmit"})(({theme:{palette:e,spacing:i,typography:r}})=>({...r.body2,alignSelf:"end",background:e.primary.main,border:"none",borderRadius:8,color:e.primary.contrastText,fontWeight:r.fontWeightMedium,letterSpacing:"normal",minBlockSize:0,minInlineSize:0,paddingBlock:i(.5),paddingInline:i(2),textTransform:"none","&:hover":{background:e.primary.dark,border:"none"},"&.Mui-disabled":{background:e.action.disabledBackground,border:"none",color:e.action.disabled}})),w=n(o,{name:b,slot:"formFix"})(({theme:{palette:e,spacing:i,typography:r}})=>({...r.caption,background:"transparent",border:`1px solid ${e.divider}`,borderRadius:8,boxShadow:"none",color:e.text.primary,fontWeight:r.fontWeightMedium,letterSpacing:"normal",minBlockSize:0,minInlineSize:0,paddingBlock:i(.25),paddingInline:i(1.5),textTransform:"none","&:hover":{background:"transparent",border:`1px solid ${e.divider}`,boxShadow:"none"},...c({"&:hover":{background:e.action.hover}}),"&.Mui-disabled":{background:"transparent",border:`1px solid ${e.action.disabledBackground}`,color:e.action.disabled}})),M=n("div",{name:b,slot:"formNote"})(({theme:{palette:e,shape:i,spacing:r,typography:o}})=>({...o.caption,alignItems:"center",background:e.action.hover,borderRadius:i.borderRadius,color:e.text.secondary,display:"flex",flexWrap:"wrap",gap:r(1),justifyContent:"space-between",marginBlock:r(1),paddingBlock:r(1),paddingInline:r(1.5)})),v=({model:o,disabled:n,send:t})=>{let[a,d]=l(()=>new Map),[s,c]=l(()=>new Map),p=(i,r)=>{let{id:s,definition:l,label:b,attributes:g}=i;return m(l).with({role:"option"},({component:l})=>e(l,{attributes:g,label:b,disabled:n,selected:!0===a.get(s),onSelect:e=>{o.isQuick?t(u(o,new Map([[i.id,!0]]),new Map([[i.id,e]]))):(c(r=>new Map(r).set(i.id,e)),d(e=>{let o=new Map(e);if("choice"===r.definition.role){for(let e of r.children)o.delete(e.id);o.set(i.id,!0)}else o.set(i.id,!0!==e.get(i.id));return o}))}},s)).with({role:"input"},({component:r})=>e(r,{attributes:g,label:b,disabled:n,state:a.get(s),onChange:(e,r)=>{o.isQuick?t(u(o,new Map([[i.id,e]]),new Map([[i.id,r]]))):(d(r=>new Map(r).set(i.id,e)),c(e=>new Map(e).set(i.id,r)))}},s)).with({role:"group"},{role:"choice"},{role:"choices"},({component:r})=>e(r,{attributes:g,label:b,disabled:n,children:i.children.map(e=>p(e,i))},s)).exhaustive()};return i(k,{children:[o.root.children.map(e=>p(e,o.root)),!o.isQuick&&e(x,{variant:"contained",disabled:n,disableElevation:!0,onClick:()=>{n||o.isQuick||t(u(o,a,s))},children:e(r,{id:"sdk.assistant.form.submit.label",message:"Submit"})})]})};export const AssistantForm=t(({source:o,status:n})=>{let{assistantSystem:t}=p(),[m,c]=l(!1),b="writing"===n,u=h(),k=s(()=>b?void 0:f(o,u),[o,b,u]),x="ready"!==n||m,y=a(e=>{c(!0),t.send(e).finally(()=>c(!1))},[t]);return(d(()=>{k?.ok===!1&&console.warn("The assistant wrote a form that could not be built.",k.errors)},[k]),k)?k.ok?0===k.root.children.length?null:e(v,{model:k,disabled:x,send:y}):i(M,{role:"alert",children:[e("span",{children:e(r,{id:"sdk.assistant.form.failure",message:"The assistant couldn't build this form."})}),e(w,{disabled:x,onClick:()=>y(g(k.errors)),children:e(r,{id:"sdk.assistant.form.fix.label",message:"Fix it"})})]}):e(M,{children:e(r,{id:"sdk.assistant.form.writing",message:"Preparing a form…"})})});

package/dist/configurator/ui/assistant/form/registry/built-in-form-elements.d.ts

@@ -1,3 +1,29 @@
+import { ASSISTANT_BUILT_IN_FORM_ELEMENTS, type AssistantBuiltInFormElementAttributes, type AssistantBuiltInFormElementName } from '#package/domain';
+import { type FormContainerProps, type FormInputProps, type FormOptionProps } from '../../form-elements/index.js';
 import { type FormElementDefinition } from './form-element-definition.js';
+type BuiltInFormElementRole<NAME extends AssistantBuiltInFormElementName> = Extract<(typeof ASSISTANT_BUILT_IN_FORM_ELEMENTS)[number], {
+    readonly name: NAME;
+}>['role'];
+/** The state each built-in input keeps, which the form hands back to it. */
+interface BuiltInFormInputStates {
+    readonly text: string;
+    readonly number: number;
+    readonly confirm: boolean;
+}
+/** The props the component of a built-in element takes: those of its role, typed from its descriptor. */
+type BuiltInFormElementProps<NAME extends AssistantBuiltInFormElementName> = BuiltInFormElementRole<NAME> extends 'option' ? FormOptionProps<AssistantBuiltInFormElementAttributes<NAME>> : BuiltInFormElementRole<NAME> extends 'input' ? FormInputProps<NAME extends keyof BuiltInFormInputStates ? BuiltInFormInputStates[NAME] : never, AssistantBuiltInFormElementAttributes<NAME>> : FormContainerProps<AssistantBuiltInFormElementAttributes<NAME>>;
+type Same<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => (T extends B ? 1 : 2) ? true : false;
+type PropsOf<COMPONENT> = COMPONENT extends (props: infer PROPS) => unknown ? PROPS : never;
+/**
+ * Checks the component of every built-in element against the name it stands under, since the
+ * definition built from it is cast on the word that the two belong together: an entry whose
+ * component does not take exactly the props of its name becomes `never`. Exactly, because
+ * assignability would let a component whose attributes are all optional, or that reports another
+ * state through a method, stand under another name.
+ */
+export type BuiltInFormComponents<COMPONENTS extends Readonly<Record<AssistantBuiltInFormElementName, unknown>>> = {
+    readonly [NAME in AssistantBuiltInFormElementName]: Same<PropsOf<COMPONENTS[NAME]>, BuiltInFormElementProps<NAME>> extends true ? COMPONENTS[NAME] : never;
+};
 /** The elements of every assistant form: the built-ins the SDK prompt lists, with their components. */
 export declare const BUILT_IN_FORM_ELEMENTS: readonly FormElementDefinition[];
+export {};

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

@@ -1 +1 @@
-import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Trans as e}from"@lingui/react";import{styled as o}from"@mui/material";import{useCallback as t,useEffect as a}from"react";import{NumericalInput as m}from"#package/ui-sdk";import{AssistantPanelName as n}from"../theme.js";import{clampFormNumber as s}from"./clamp-form-number.js";let l=o("div",{name:n,slot:"formNumber"})(({theme:{palette:r,spacing:i,typography:e}})=>({alignSelf:"stretch",color:r.text.secondary,display:"grid",gap:i(.5),...e.caption})),d=(r,i)=>i?`${r} ${i}`:String(r),u=r=>""===r.trim()?null:Number(r);export const FormNumber=({attributes:{value:o,min:n,max:p,step:v,unit:c},label:f,disabled:g,state:b,onChange:h})=>{let x=void 0===o?void 0:s(o,{min:n,max:p}),j=b??x;a(()=>{void 0===b&&void 0!==x&&h(x,d(x,c))},[b,x,c,h]);let N=t(r=>h(r,d(r,c)),[h,c]),S=t(()=>{if(void 0===j)return;let r=s(j,{min:n,max:p});r!==j&&N(r)},[j,n,p,N]),k=t(r=>void 0===j?"":String(r),[j]);return i(l,{role:"group","aria-label":f,children:[null!=f&&r("span",{"aria-hidden":!0,children:f}),r(m,{value:j??n??0,min:n,max:p,unit:c,size:"small",disabled:g,withSlider:void 0!==n&&void 0!==p,sliderProps:void 0===v?void 0:{step:v},inputFieldProps:{parseValue:u,formatValue:k,invalidNumberErrorMessage:r(e,{id:"sdk.assistant.form.number.invalid",message:"Enter a number."})},onChange:N,onChanged:S})]})};
+import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Trans as e}from"@lingui/react";import{styled as a}from"@mui/material";import{useCallback as o,useEffect as t}from"react";import{NumericalInput as m}from"#package/ui-sdk";import{AssistantPanelName as l}from"../theme.js";import{clampFormNumber as n}from"./clamp-form-number.js";let s=a("div",{name:l,slot:"formNumber"})(({theme:{palette:r,spacing:i,typography:e}})=>({alignSelf:"stretch",color:r.text.secondary,display:"grid",gap:i(.5),...e.caption})),d=(r,i)=>i?`${r} ${i}`:String(r),u=r=>""===r.trim()?null:Number(r);export const FormNumber=({attributes:{value:a,min:l,max:p,step:g,unit:v},label:b,disabled:c,state:f,onChange:h})=>{let x=void 0===a?void 0:n(a,{min:l,max:p}),j=f??x;t(()=>{void 0===f&&void 0!==x&&h(x,d(x,v))},[f,x,v,h]);let N=o(r=>h(r,d(r,v)),[h,v]),S=o(()=>{if(void 0===j)return;let r=n(j,{min:l,max:p});r!==j&&N(r)},[j,l,p,N]),k=o(r=>void 0===j?"":String(r),[j]),y=o(()=>b??"",[b]);return i(s,{role:"group","aria-label":b,children:[null!=b&&r("span",{"aria-hidden":!0,children:b}),r(m,{value:j??l??0,min:l,max:p,unit:v,size:"small",disabled:c,withSlider:void 0!==l&&void 0!==p,sliderProps:{step:g,getAriaLabel:null==b?void 0:y},inputFieldProps:{"aria-label":b,parseValue:u,formatValue:k,invalidNumberErrorMessage:r(e,{id:"sdk.assistant.form.number.invalid",message:"Enter a number."})},onChange:N,onChanged:S})]})};

package/dist/configurator/ui/assistant/popover/AssistantPopover.d.ts

@@ -0,0 +1,24 @@
+import { type KeyboardEvent, type ReactElement, type ReactNode } from 'react';
+/** What makes the element that opens a popover a button to the keyboard and to assistive technology. */
+export interface AssistantPopoverTriggerProps {
+    readonly role: 'button';
+    readonly tabIndex: 0;
+    readonly 'aria-expanded': boolean;
+    readonly onClick: () => void;
+    readonly onKeyDown: (event: KeyboardEvent) => void;
+}
+export interface AssistantPopoverProps {
+    /**
+     * What the popover shows; the tooltip mounts it only while the popover is open. `rePlace` places
+     * the popover again after its content changed size, as when a picture in it has loaded.
+     */
+    readonly title: (rePlace: () => void) => ReactNode;
+    /** The element that opens the popover, given the props that make it do so. */
+    readonly children: (trigger: AssistantPopoverTriggerProps) => ReactElement;
+}
+/**
+ * A popover over something in the thread, such as a reference in a reply or the screenshots of a
+ * tool call: hovering, focusing or tapping its element opens it; leaving it, tapping outside or
+ * Escape closes it. It describes its element, whose label stays its own.
+ */
+export declare const AssistantPopover: ({ title, children }: AssistantPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/assistant/popover/AssistantPopover.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{ClickAwayListener as n,Tooltip as o}from"@mui/material";import{useCallback as t,useRef as r,useState as i}from"react";export const AssistantPopover=({title:p,children:a})=>{let[l,s]=i(!1),c=t(()=>s(!0),[]),u=t(()=>s(!1),[]),d=r(null),m=t(e=>{d.current=e},[]),x=t(()=>{d.current?.update()},[]),h=t(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),s(!0))},[]);return e(n,{onClickAway:u,mouseEvent:!!l&&"onClick",touchEvent:!!l&&"onTouchEnd",children:e(o,{open:l,onOpen:c,onClose:u,title:p(x),placement:"top-start",describeChild:!0,disableTouchListener:!0,PopperProps:{popperRef:m},slotProps:{tooltip:{sx:{background:"none",maxInlineSize:"none",padding:0}}},children:a({role:"button",tabIndex:0,"aria-expanded":l,onClick:c,onKeyDown:h})})})};

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

@@ -0,0 +1 @@
+export { AssistantPopover } from './AssistantPopover.js';

package/dist/configurator/ui/assistant/popover/index.js

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

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

@@ -1 +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));
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as a}from"@lingui/react";import{styled as i}from"@mui/material";import{memo as t,useCallback as n,useEffect as o,useState as l}from"react";import{isShallowEqual as s}from"@salsita-ai/common/utils";import{useResourceUrl as d}from"#package/react-sdk";import{AssistantPopover as m}from"../popover/index.js";import{AssistantPanelName as c}from"../theme.js";import{assistantReferenceStyles as f}from"./reference-styles.js";import{useAssistantReferenceDetails as p}from"./use-assistant-reference-details.js";let u=i("span",{name:c,slot:"referenceLink"})(f),h=i("span",{name:c,slot:"referenceDetails"})(({theme:{palette:e,shape:r,shadows:a,spacing:i,typography:t}})=>({...t.body2,background:e.background.paper,borderRadius:r.borderRadius,boxShadow:a[4],color:e.text.primary,display:"flex",gap:i(1.5),maxInlineSize:320,padding:i(1.5),'&[data-reference-details="unavailable"]':{color:e.text.secondary}})),b=i("img")(({theme:{shape:e}})=>({alignSelf:"flex-start",blockSize:"auto",borderRadius:e.borderRadius/2,flexShrink:0,inlineSize:64,maxBlockSize:96,objectFit:"contain"})),x=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})),g=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}})),k=({target:i,onResolve:t,onImageLoad:n})=>{let l=p(i),{getResourceUrl:s}=d(),m=null!=l;if(o(()=>{t(m)},[m,t]),!l)return e(h,{"data-reference-details":"unavailable",children:e(a,{id:"sdk.assistant.reference.unavailable.message",message:"Not available right now"})});let{name:c,description:f,imageUrl:u,color:k}=l;return r(h,{children:[null!=u&&e(b,{src:s(u),alt:"",onLoad:n}),null==u&&null!=k&&e(x,{style:{background:k}}),r(g,{children:[e("span",{children:c}),null!=f&&e("span",{children:f})]})]})};export const AssistantReferenceLink=t(({target:r,children:a})=>{let[i,t]=l(!1),o=n(e=>t(!e),[]);return e(m,{title:a=>e(k,{target:r,onResolve:o,onImageLoad:a}),children:r=>e(u,{...r,"data-reference":i?"muted":void 0,children:a})})},(e,r)=>e.children===r.children&&s(e.target,r.target));

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

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

package/dist/configurator/ui/assistant/screenshots/ScreenshotThumbnails.d.ts

@@ -4,6 +4,6 @@ interface ScreenshotThumbnailsProps {
     /** Called once a picture has loaded, which changes the size of the popover. */
     readonly onImageLoad: () => void;
 }
-/** The pictures of a tool call's screenshots, each captioned by its view and entity id. */
+/** The pictures of a tool call's screenshots. */
 export declare const ScreenshotThumbnails: ({ screenshots, onImageLoad }: ScreenshotThumbnailsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/configurator/ui/assistant/screenshots/ScreenshotThumbnails.js

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{styled as r}from"@mui/material";import{AssistantPanelName as o}from"../theme.js";let a=r("span",{name:o,slot:"screenshots"})(({theme:{palette:e,shape:i,shadows:r,spacing:o,typography:a}})=>({...a.caption,background:e.background.paper,borderRadius:i.borderRadius,boxShadow:r[4],color:e.text.secondary,display:"grid",gap:o(1.5),gridTemplateColumns:"repeat(auto-fill, minmax(140px, 1fr))",inlineSize:"min(80vw, 480px)",padding:o(1.5)})),n=r("span")(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",gap:e(.5),minInlineSize:0})),t=r("img")(({theme:{palette:e,shape:i}})=>({blockSize:"auto",borderRadius:i.borderRadius/2,boxShadow:`inset 0 0 0 1px ${e.divider}`,inlineSize:"100%"})),s=r("span")({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"});export const ScreenshotThumbnails=({screenshots:r,onImageLoad:o})=>e(a,{children:r.map(({label:r,entityId:a,view:d,src:l})=>i(n,{children:[e(t,{src:l,alt:"",onLoad:o}),i(s,{title:r,children:[d," \xb7 ",a]})]},r))});
+import{jsx as e}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{AssistantPanelName as r}from"../theme.js";import{useScreenshotSrc as a}from"./use-screenshot-src.js";let i=o("span",{name:r,slot:"screenshots",shouldForwardProp:e=>"columns"!==e})(({columns:e,theme:{palette:o,shape:r,shadows:a,spacing:i}})=>({background:o.background.paper,borderRadius:r.borderRadius,boxShadow:a[4],display:"grid",gap:i(1.5),gridTemplateColumns:`repeat(${e}, minmax(0, 200px))`,maxInlineSize:"80vw",padding:i(1.5)})),s=o("img")(({theme:{palette:e,shape:o}})=>({blockSize:"auto",borderRadius:o.borderRadius/2,boxShadow:`inset 0 0 0 1px ${e.divider}`,display:"block",inlineSize:"100%"})),d=o("span")(({theme:{palette:e,shape:o}})=>({aspectRatio:"4 / 3",background:e.action.hover,borderRadius:o.borderRadius/2,display:"block"})),t=({picture:o,onImageLoad:r})=>{let i=a(o);return void 0===i?e(d,{}):e(s,{src:i,alt:"",onLoad:r})};export const ScreenshotThumbnails=({screenshots:o,onImageLoad:r})=>e(i,{columns:Math.min(o.length,2),children:o.map(({label:o,picture:a})=>e(t,{picture:a,onImageLoad:r},o))});

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

@@ -1,2 +1,3 @@
 export { ScreenshotThumbnails } from './ScreenshotThumbnails.js';
 export { type AssistantToolScreenshot, readToolScreenshots } from './tool-screenshots.js';
+export { useScreenshotSrc } from './use-screenshot-src.js';

package/dist/configurator/ui/assistant/screenshots/index.js

@@ -1 +1 @@
-export{ScreenshotThumbnails}from"./ScreenshotThumbnails.js";export{readToolScreenshots}from"./tool-screenshots.js";
+export{ScreenshotThumbnails}from"./ScreenshotThumbnails.js";export{readToolScreenshots}from"./tool-screenshots.js";export{useScreenshotSrc}from"./use-screenshot-src.js";

package/dist/configurator/ui/assistant/screenshots/tool-screenshots.d.ts

@@ -1,11 +1,19 @@
+/**
+ * Where the panel gets a screenshot's picture from: the server, by the id the browser uploaded it
+ * under, or the data URL of a picture a thread from before the upload carries inline.
+ */
+export type AssistantScreenshotPicture = {
+    readonly kind: 'stored';
+    readonly imageId: string;
+} | {
+    readonly kind: 'inline';
+    readonly src: string;
+};
 /** A screenshot a `query` or `apply` call took, as the panel shows it. */
 export interface AssistantToolScreenshot {
     /** The label the call's `image` field returned, such as `Cabinet-2/doorLayout#2`. */
     readonly label: string;
-    readonly entityId: string;
-    readonly view: string;
-    /** The picture as a data URL. */
-    readonly src: string;
+    readonly picture: AssistantScreenshotPicture;
 }
 /**
  * The screenshots of a tool result: the image parts that follow the result's JSON, each after the

package/dist/configurator/ui/assistant/screenshots/tool-screenshots.js

@@ -1 +1 @@
-import{z as e}from"zod";let t=e.object({type:e.literal("text"),content:e.string()}),a=e.object({type:e.literal("image"),source:e.object({type:e.literal("data"),value:e.string(),mimeType:e.string()})}),s=/^([^/]+)\/([^#]+)(?:#\d+)?$/;export const readToolScreenshots=e=>Array.isArray(e)?e.slice(1).flatMap((e,r,c)=>{let l=a.safeParse(e),o=t.safeParse(c[r-1]),n=o.success?s.exec(o.data.content):null;if(!l.success||!o.success||!n?.[1]||!n[2])return[];let{value:i,mimeType:d}=l.data.source;return[{label:o.data.content,entityId:n[1],view:n[2],src:`data:${d};base64,${i}`}]}):[];
+import{z as t}from"zod";import{readAssistantImageReference as e}from"@salsita-ai/contracts/assistant";let a=t.object({type:t.literal("text"),content:t.string()}),r=t.object({type:t.literal("image"),source:t.discriminatedUnion("type",[t.object({type:t.literal("url"),value:t.string()}),t.object({type:t.literal("data"),value:t.string(),mimeType:t.string()})])}),s=/^[^/]+\/[^#]+(?:#\d+)?$/;export const readToolScreenshots=t=>Array.isArray(t)?t.slice(1).flatMap((t,l,i)=>{let n=r.safeParse(t),o=a.safeParse(i[l-1]),c=n.success?(({source:t})=>{if("data"===t.type)return{kind:"inline",src:`data:${t.mimeType};base64,${t.value}`};let a=e(t.value);return null===a?null:{kind:"stored",imageId:a}})(n.data):null;return c&&o.success&&s.test(o.data.content)?[{label:o.data.content,picture:c}]:[]}):[];

package/dist/configurator/ui/assistant/screenshots/use-screenshot-src.d.ts

@@ -0,0 +1,8 @@
+import type { AssistantScreenshotPicture } from './tool-screenshots.js';
+/**
+ * The `src` of a screenshot's or an attached image's picture: the data URL of an inline one at
+ * once, and for an uploaded one the object URL the assistant system reads it into, once it has been
+ * read; `undefined` until then and when the read fails. The screenshots of a call are read only
+ * while their popover is open; the images a user attached are read as soon as their bubble shows.
+ */
+export declare const useScreenshotSrc: (picture: AssistantScreenshotPicture) => string | undefined;

package/dist/configurator/ui/assistant/screenshots/use-screenshot-src.js

@@ -0,0 +1 @@
+import{useEffect as r,useState as e}from"react";import{useConfigurator as n}from"../../../application-runtime/index.js";export const useScreenshotSrc=t=>{let{assistantSystem:i}=n(),o="stored"===t.kind?t.imageId:null,[l,d]=e();return(r(()=>{if(null===o)return;let r=!0;return i.loadScreenshotUrl(o).then(e=>{r&&d({imageId:o,src:e})},()=>void 0),()=>{r=!1}},[i,o]),"inline"===t.kind)?t.src:l?.imageId===o?l.src:void 0};

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

@@ -1,3 +1,14 @@
+/** Where a code block starts and ends in the text, as Markdown parsed it. */
+export interface FencePosition {
+    readonly start: number;
+    readonly end: number;
+}
+/**
+ * True when a code block of a finished reply was cut off: it runs to the end of the reply without
+ * the line that closes its fence, whatever backticks the reply has elsewhere. A block that the end
+ * of its list item or blockquote closed before the reply went on is not cut off.
+ */
+export declare const isCutOffFence: (text: string, { start, end }: FencePosition) => boolean;
 /** True when the text has a code fence the model has not closed yet. */
 export declare const hasOpenFence: (text: string) => boolean;
 /**

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

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

@@ -23,6 +23,8 @@ export type AssistantThreadItem = {
     readonly kind: 'user';
     readonly id: string;
     readonly text: string;
+    /** The images the user attached, by the ids the message references them by. */
+    readonly imageIds: readonly string[];
 } | {
     readonly kind: 'text';
     readonly id: string;

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

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

@@ -1,11 +1,14 @@
 import { type AssistantToolErrorCode } from '@salsita-ai/contracts/assistant';
 /**
- * How a tool call of the assistant looks in the thread: still running, finished, a change that was
- * not kept (`failed`), or a read that answered with errors (`flawed`), which matters less because
- * the assistant usually just asks again.
+ * How a tool call of the assistant looks in the thread: still running, finished, or gone wrong
+ * (`failed`): a change that was not kept, or a read that answered with errors. Both look the same,
+ * since the reply says what came of them.
+ */
+export type AssistantToolChipState = 'running' | 'done' | 'failed';
+/**
+ * What a tool chip is called: the title or the operation names the model gave, a fixed text, or the
+ * tool's name.
  */
-export type AssistantToolChipState = 'running' | 'done' | 'failed' | 'flawed';
-/** What a tool chip is called: the operation names the model gave, a fixed text, or the tool's name. */
 export type AssistantToolChipLabel = {
     readonly kind: 'text';
     readonly text: string;
@@ -22,6 +25,12 @@ export interface AssistantToolChip {
      * panel knows. Nothing for a call that went wrong for any other reason.
      */
     readonly errorCode: AssistantToolErrorCode | undefined;
+    /**
+     * The messages of the violations a failed call failed on, written for the user, in result order.
+     * Empty for a call that did not fail, that failed for any other reason, or whose violations have
+     * no message.
+     */
+    readonly violations: readonly string[];
 }
 /** A tool call of a message as the chip reads it. */
 export interface AssistantToolCall {
@@ -36,9 +45,10 @@ export interface AssistantToolCall {
     readonly isReplyRunning: boolean;
 }
 /**
- * Describes one tool call for its chip: the label in the order operation names, fixed text for the
- * `apply` and `query` tools, tool name; and whether the call runs, finished, or went wrong. Why it
- * went wrong is part of it only as the code of an error the server recorded: the text of a tool
- * result is worded for the model, not for the user.
+ * Describes one tool call for its chip: the label in the order title, operation names, fixed text
+ * for the `apply` and `query` tools, tool name; and whether the call runs, finished, or went wrong.
+ * Why it went wrong is part of it only as the code of an error the server recorded, or as the
+ * messages of the violations it failed on, which are written for the user: the rest of a tool result
+ * is worded for the model.
  */
 export declare const describeToolCall: (call: AssistantToolCall) => AssistantToolChip;

package/dist/configurator/ui/assistant/tool-chip.js

@@ -1 +1 @@
-import{Kind as e,parse as t}from"graphql";import{z as n}from"zod";import{ASSISTANT_TOOL_ERROR_CODES as r,AssistantToolError as a,applyTool as s,queryTool as o}from"@salsita-ai/contracts/assistant";let i=n.object({operations:n.array(n.object({query:n.string(),operationName:n.string().nullish()}))}),l=n.object({results:n.array(n.object({errors:n.array(n.unknown()).optional()})),committed:n.boolean()}),u=n.tuple([n.object({type:n.literal("text"),content:n.string()})]).rest(n.unknown());export const describeToolCall=n=>{let d=(({name:n,input:r})=>{let a,l=(a=i.safeParse(r)).success?a.data.operations.flatMap(({query:n,operationName:r})=>r??(n=>{try{let r=t(n).definitions.find(t=>t.kind===e.OPERATION_DEFINITION);return r?.kind===e.OPERATION_DEFINITION?r.name?.value:void 0}catch{return}})(n)??[]):[];return l.length>0?{kind:"text",text:l.join(", ")}:n===s.name?{kind:"updateDesign"}:n===o.name?{kind:"readDesign"}:{kind:"text",text:n}})(n);if(null==n.result&&null==n.error)return{label:d,state:n.isReplyRunning?"running":"done",errorCode:void 0};let c=(e=>{let t=a.safeParse(e);if(t.success)return r.find(e=>e===t.data.code)})(n.result);return{label:d,state:(({name:e,result:t,error:n},r)=>{if(null!=n||null!=r)return e===o.name?"flawed":"failed";if(e!==s.name&&e!==o.name)return"done";let a=l.safeParse((e=>{let t=u.safeParse(e);if(!t.success)return e;try{return JSON.parse(t.data[0].content)}catch{return e}})(t));if(!a.success)return e===o.name?"flawed":"failed";let{results:i,committed:d}=a.data;return e===s.name?d?"done":"failed":i.some(({errors:e})=>(e?.length??0)>0)||0===i.length?"flawed":"done"})(n,c),errorCode:c}};
+import{Kind as e,parse as t}from"graphql";import{z as r}from"zod";import{ASSISTANT_TOOL_ERROR_CODES as n,AssistantToolError as s,applyTool as a,queryTool as i}from"@salsita-ai/contracts/assistant";import{SCREENSHOT_NOT_TAKEN as o}from"../../application-runtime/index.js";let l=r.object({title:r.string().nullish().catch(void 0),operations:r.array(r.object({query:r.string(),operationName:r.string().nullish()}))}),u=r.object({results:r.array(r.object({errors:r.array(r.unknown()).optional()})),committed:r.boolean()}),d=r.tuple([r.object({type:r.literal("text"),content:r.string()})]).rest(r.unknown()),c=e=>{let t=d.safeParse(e);if(!t.success)return e;try{return JSON.parse(t.data[0].content)}catch{return e}},f=r.object({extensions:r.object({code:r.string()})}),m=r.object({message:r.string(),extensions:r.object({code:r.literal("VIOLATION"),type:r.string()})});export const describeToolCall=r=>{var d;let p,g=(({name:r,input:n})=>{let s,o,u=(s=l.safeParse(n)).success&&s.data.title?.trim()||void 0;if(null!=u)return{kind:"text",text:u};let d=(o=l.safeParse(n)).success?o.data.operations.flatMap(({query:r,operationName:n})=>n??(r=>{try{let n=t(r).definitions.find(t=>t.kind===e.OPERATION_DEFINITION);return n?.kind===e.OPERATION_DEFINITION?n.name?.value:void 0}catch{return}})(r)??[]):[];return d.length>0?{kind:"text",text:d.join(", ")}:r===a.name?{kind:"updateDesign"}:r===i.name?{kind:"readDesign"}:{kind:"text",text:r}})(r);if(null==r.result&&null==r.error)return{label:g,state:r.isReplyRunning?"running":"done",errorCode:void 0,violations:[]};let x=(e=>{let t=s.safeParse(e);if(t.success)return n.find(e=>e===t.data.code)})(r.result),b=(({name:e,result:t,error:r},n)=>{if(null!=r||null!=n)return"failed";if(e!==a.name&&e!==i.name)return"done";let s=u.safeParse(c(t));if(!s.success)return"failed";let{results:l,committed:d}=s.data;return e===a.name?d?"done":"failed":l.some(({errors:e})=>e?.some(e=>{let t;return!(t=f.safeParse(e)).success||t.data.extensions.code!==o}))||0===l.length?"failed":"done"})(r,x);return{label:g,state:b,errorCode:x,violations:"failed"===b?(d=r.result,(p=u.safeParse(c(d))).success?p.data.results.flatMap(({errors:e})=>(e??[]).flatMap(e=>{let t=m.safeParse(e);return t.success&&t.data.message!==t.data.extensions.type?[t.data.message]:[]})):[]):[]}};

package/dist/configurator/ui/assistant/use-load-older-on-top.d.ts

@@ -0,0 +1,22 @@
+import { type RefObject } from 'react';
+export interface LoadOlderOnTopOptions {
+    /** True while there is an older page to load and none is loading. */
+    readonly enabled: boolean;
+    readonly onReachTop: () => void;
+    /** Changes when a page is painted above the thread, such as the id of its first message. */
+    readonly firstItemKey: unknown;
+}
+/**
+ * Loads older messages when the user scrolls the thread to its top: a sentinel above the first
+ * message is watched within the scroller, and `onReachTop` runs when it comes into view. A page
+ * that does not fill the scroller leaves the sentinel in view, so the next page loads too. An
+ * attempt that painted nothing, because it failed, is tried again only once the user scrolls the
+ * sentinel out of view and back.
+ *
+ * The page lands above what the user reads, so the reading position is kept: the distance from the
+ * end of the thread is restored once the page is painted, before the browser shows it, and again
+ * each time an image in the thread finishes loading, until the user scrolls: an image reserves no
+ * height, so one that loads above the reader grows the thread there. CSS scroll anchoring would do
+ * the same, but Safari does not support it.
+ */
+export declare const useLoadOlderOnTop: <SCROLLER extends HTMLElement, SENTINEL extends HTMLElement>(scrollerRef: RefObject<SCROLLER>, sentinelRef: RefObject<SENTINEL>, { enabled, onReachTop, firstItemKey }: LoadOlderOnTopOptions) => void;

package/dist/configurator/ui/assistant/use-load-older-on-top.js

@@ -0,0 +1 @@
+import{useEffect as r,useLayoutEffect as e,useRef as t}from"react";let n=Symbol("no attempt");export const useLoadOlderOnTop=(l,c,{enabled:o,onReachTop:u,firstItemKey:s})=>{let i=t(null),p=t(n),a=t(null),d=t({onReachTop:u,firstItemKey:s});d.current={onReachTop:u,firstItemKey:s},r(()=>{let r=l.current;if(!r)return;let e=()=>{null!==i.current&&(i.current=r.scrollHeight-r.scrollTop),a.current&&Math.abs(r.scrollTop-a.current.scrollTop)>1&&(a.current=null)},t=()=>{a.current&&(r.scrollTop=r.scrollHeight-a.current.distanceFromEnd,a.current={...a.current,scrollTop:r.scrollTop})};return r.addEventListener("scroll",e,{passive:!0}),r.addEventListener("load",t,!0),()=>{r.removeEventListener("scroll",e),r.removeEventListener("load",t,!0)}},[l]),r(()=>{let r=l.current,e=c.current;if(!o||!r||!e)return;let t=new IntersectionObserver(([e])=>{if(!e?.isIntersecting){p.current=n;return}p.current!==d.current.firstItemKey&&(p.current=d.current.firstItemKey,a.current=null,i.current=r.scrollHeight-r.scrollTop,d.current.onReachTop())},{root:r});return t.observe(e),()=>t.disconnect()},[o,l,c]),e(()=>{let r=l.current;r&&null!==i.current&&(r.scrollTop=r.scrollHeight-i.current,a.current={distanceFromEnd:i.current,scrollTop:r.scrollTop}),i.current=null},[s,l])};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as t,Typography as o,styled as s}from"@mui/material";import{PhxIcon as a}from"#package/ui-sdk";import{useConfiguratorRouting as n}from"../../../../configurator-context/index.js";let c=s("div")(({theme:{spacing:e}})=>({display:"grid",minBlockSize:"100cqb",padding:e(2),placeItems:"center",position:"relative"})),m=s("div")({maxInlineSize:"80ch",textAlign:"center",textWrap:"pretty"});export const GPUAccelerationDisabled=()=>{let{goToIndex:s}=n();return e(c,{children:r(m,{children:[e(a,{name:"CubeDuotone",sx:{fontSize:48}}),e(o,{component:"h1",variant:"h4",sx:{my:4},children:e(i,{id:"sdk.messages.error.gpuDisabled.title",message:"GPU acceleration disabled"})}),e(o,{color:"text.secondary",children:e(i,{id:"sdk.messages.error.gpuDisabled.message",message:"Your browser has GPU acceleration disabled, which prevents the configurator from working correctly. 3D performance is severely impacted. Enabled this option in your browser settings to use the configurator."})}),e(t,{variant:"text",color:"primary",size:"large",sx:{mt:6.5},onClick:s,children:e(i,{id:"sdk.messages.navigation.goToHomepage.label",message:"Go To Homepage"})})]})})};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as a,Typography as t,styled as s}from"@mui/material";import{useConfiguratorRouting as o}from"#package/react-sdk";import{PhxIcon as n}from"#package/ui-sdk";let c=s("div")(({theme:{spacing:e}})=>({display:"grid",minBlockSize:"100cqb",padding:e(2),placeItems:"center",position:"relative"})),m=s("div")({maxInlineSize:"80ch",textAlign:"center",textWrap:"pretty"});export const GPUAccelerationDisabled=()=>{let{goToIndex:s}=o();return e(c,{children:r(m,{children:[e(n,{name:"CubeDuotone",sx:{fontSize:48}}),e(t,{component:"h1",variant:"h4",sx:{my:4},children:e(i,{id:"sdk.messages.error.gpuDisabled.title",message:"GPU acceleration disabled"})}),e(t,{color:"text.secondary",children:e(i,{id:"sdk.messages.error.gpuDisabled.message",message:"Your browser has GPU acceleration disabled, which prevents the configurator from working correctly. 3D performance is severely impacted. Enabled this option in your browser settings to use the configurator."})}),e(a,{variant:"text",color:"primary",size:"large",sx:{mt:6.5},onClick:s,children:e(i,{id:"sdk.messages.navigation.goToHomepage.label",message:"Go To Homepage"})})]})})};

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

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

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

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

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

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

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

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

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