@salsita-ai/sdk 0.50.0-develop.ae52227c7e → 0.50.0-develop.afbc5157e1

package/dist/configurator/ui/assistant/use-assistant-composer.d.ts

@@ -0,0 +1,88 @@
+import { type AssistantRecording } from './voice/index.js';
+/** An image or an annotation attached to the message being written, as a composer shows it. */
+export interface AssistantComposerAttachment {
+    readonly id: string;
+    /** Object URL of the prepared image for the thumbnail, valid while the attachment is attached. */
+    readonly previewUrl: string;
+    /** True for an annotation, of the view or of an image; false for an image the user added. */
+    readonly isAnnotation: boolean;
+    /** How many comment pins an annotation has; 0 for an image. */
+    readonly pinCount: number;
+}
+/**
+ * Why the last images the user added are not all attached:
+ * - `unreadable`: one could not be read as an image
+ * - `limit`: the message already carries as many images as it can
+ */
+export type AssistantComposerNotice = 'unreadable' | 'limit';
+/**
+ * The message being written to the assistant, with its attachments and what can be done with it.
+ * - `draft` and `setDraft`: the text of the message.
+ * - `attachments`: the images and annotations attached to it, in their order.
+ * - `addFiles(files)`: prepares the files as images and attaches them, as many as `maxAttachments` allows.
+ * - `annotate()`: opens the annotation editor over the configurator; the annotation is attached once the user is
+ *   done with it. Like a file too many, an annotation too many is not made, and `notice` says why.
+ * - `annotateAttachment(id)`: opens the annotation editor on an attached image; the annotation takes its place once
+ *   the user is done with it, so it needs no free slot. An annotation is not annotated again.
+ * - `removeAttachment(id)`: takes an attachment off the message.
+ * - `isPreparing`: whether files added are still being prepared; the message cannot be sent meanwhile.
+ * - `notice`: why the files added last are not all attached, until the attachments change again.
+ * - `maxAttachments`: the most images and annotations one message can carry together.
+ * - `isBusy`: whether a send waits for the thread to be resumed or the images to upload; the message should not
+ *   change meanwhile.
+ * - `isReplying`: whether the assistant is replying; `stop()` ends the reply.
+ * - `isLocked`: whether the assistant banned the user on this configuration, so it takes no message there; nothing
+ *   should be written or attached then, and `canSend` is false.
+ * - `canSend` and `send()`: whether the message can be sent, and sending it. The message is cleared once the chat
+ *   takes it, and comes back, after what was written meanwhile, when the chat gives it back.
+ * - `inputFocusHandlers`: `onFocus` and `onBlur` for the message input, so a phone layout makes room for it.
+ * - `canRecord`: whether the user may speak the message: the session has voice messages on, the browser can record,
+ *   and the assistant takes messages here. A composer shows a mic in place of Send while the text is empty then.
+ * - `recording`: the voice message being recorded, its status, how long it runs and how loud the microphone is.
+ * - `startRecording()`: starts recording, asking for the microphone; a microphone blocked for the page shows as the
+ *   `refused` status, and starting again asks again.
+ * - `sendRecording()`: stops the recording and sends it as the message, with the images and annotations attached. A
+ *   recording the server refuses comes back as `recorded`, to be sent again or dropped; one in which nothing was
+ *   heard is dropped. A recording that reaches two minutes is sent on its own.
+ * - `cancelRecording()`: drops the recording, and the composer is as it was.
+ */
+export interface UseAssistantComposerResult {
+    readonly draft: string;
+    readonly setDraft: (draft: string) => void;
+    readonly attachments: readonly AssistantComposerAttachment[];
+    readonly addFiles: (files: ReadonlyArray<File>) => Promise<void>;
+    readonly annotate: () => Promise<void>;
+    readonly annotateAttachment: (id: string) => Promise<void>;
+    readonly removeAttachment: (id: string) => void;
+    readonly isPreparing: boolean;
+    readonly notice: AssistantComposerNotice | undefined;
+    readonly maxAttachments: number;
+    readonly isBusy: boolean;
+    readonly isLocked: boolean;
+    readonly isReplying: boolean;
+    readonly canSend: boolean;
+    readonly send: () => Promise<void>;
+    readonly stop: () => void;
+    readonly inputFocusHandlers: {
+        readonly onFocus: () => void;
+        readonly onBlur: () => void;
+    };
+    readonly canRecord: boolean;
+    readonly recording: AssistantRecording;
+    readonly startRecording: () => Promise<void>;
+    readonly sendRecording: () => Promise<void>;
+    readonly cancelRecording: () => void;
+}
+export type UseAssistantComposer = () => UseAssistantComposerResult;
+/**
+ * Hook to write a message to the assistant, as the panel's composer does. The text of the message lives
+ * as long as the component that uses the hook; its attachments live in the assistant system
+ * (`composerAttachments$`), so an annotation made from elsewhere, such as a drawing, is attached here too.
+ * The thumbnails' object URLs are the hook's own, revoked once their attachment is gone or the component
+ * unmounts. It does not render again with every chunk of a reply.
+ *
+ * Images added are prepared at once and attached up to `maxAttachments` per message; one that cannot be prepared,
+ * or one too many, is not attached, and `notice` says why. The message keeps its text and images until the chat
+ * takes it, also when the upload of its images fails.
+ */
+export declare const useAssistantComposer: UseAssistantComposer;

package/dist/configurator/ui/assistant/use-assistant-composer.js

@@ -0,0 +1,2 @@
+import{useTheme as t}from"@mui/material";import{useCallback as e,useEffect as n,useMemo as r,useReducer as a,useRef as i,useState as o}from"react";import{skip as c}from"rxjs/operators";import{useEagerObservableSelector as s,useEagerObservableValue as l}from"#package/react-sdk";import{MAX_COMPOSER_ATTACHMENTS as m,useConfigurator as u}from"../../application-runtime/index.js";import{prepareImage as p}from"./attachments/index.js";import{useVoiceRecording as d}from"./voice/index.js";export const useAssistantComposer=()=>{let{assistantSystem:h}=u(),[f,y]=o(""),g=l(h.composerAttachments$),[v,b]=o(0),[k,A]=o(),[L,R]=o(!1),w=i(new Map),[U,j]=a(t=>t+1,0),x=i(g);x.current=g,n(()=>{let t=w.current;for(let[e,n]of t)g.some(t=>t.id===e)||(URL.revokeObjectURL(n),t.delete(e))},[g]),n(()=>{let t=w.current;return 0===t.size&&x.current.length>0&&j(),()=>{for(let e of t.values())URL.revokeObjectURL(e);t.clear()}},[]);let $=i(!1),P=e(t=>{$.current=!0;try{return t()}finally{$.current=!1}},[]);n(()=>{let t=h.composerAttachments$.pipe(c(1)).subscribe(()=>{$.current||A(void 0)});return()=>t.unsubscribe()},[h]);let{isReplying:F,isResuming:S,isLocked:E,isVoiceEnabled:I}=s(h.chat$,t=>({isReplying:t.isLoading,isResuming:t.isResuming,isLocked:t.isLocked,isVoiceEnabled:t.isVoiceEnabled}),[]),O=f.trim(),C=S||L,V=!F&&!C&&!E&&0===v&&(O.length>0||g.length>0),z=e(async t=>{if(0===t.length)return;let e=[];for(let n of t){let t=h.reserveAttachmentSlot();if(!t)break;e.push(t)}let n=t.slice(0,e.length);A(n.length<t.length?"limit":void 0),0!==n.length&&(b(t=>t+n.length),await Promise.all(n.map(async(t,n)=>{let r;try{r=await p(t)}catch{A("unreadable")}finally{b(t=>t-1)}if(e[n]?.()&&r){let t=r;P(()=>h.attach(t))}})))},[h,P]),B=e(async()=>{h.hasFreeAttachmentSlot$.value?(A(void 0),await h.annotate()):A("limit")},[h]),{palette:M}=t(),q=M.background.default,D=e(async t=>{A(void 0),await h.annotate({attachmentId:t,background:q})},[h,q]),G=e(t=>{h.removeAttachment(t),A(void 0)},[h]),H=i(!0);n(()=>(H.current=!0,()=>{H.current=!1}),[]);let J=e(t=>{P(()=>t.forEach(({id:t})=>h.removeAttachment(t))),A(void 0),R(!1)},[h,P]),K=e(t=>{A(P(()=>h.restoreAttachments(t))?void 0:"limit")},[h,P]),N=e(async()=>{if(V){R(!0);try{await h.send(O,g.map(({blob:t,pins:e,source:n})=>e?{blob:t,pins:e,source:n}:t),{onSent:()=>{y(""),J(g)},onUnsent:()=>{y(t=>t.trim()?`${t}
+${f}`:f),K(g)}})}finally{R(!1)}}},[h,g,V,O,f,K,J]),Q=i(async()=>{}),T=d({onLimitReached:()=>void Q.current()}),{recording:W,finish:X,clear:Y,restore:Z}=T,{start:_,cancel:tt}=T,te=I&&"unavailable"!==W.status&&!E,tn=e(async()=>{if(!te||F||C)return;h.unlockPlayback();let t=await X();if(t&&!(v>0)){R(!0);try{await h.send("",g.map(({blob:t,pins:e,source:n})=>e?{blob:t,pins:e,source:n}:t),{audio:t,onSent:()=>{Y(),J(g)},onUnsent:()=>{K(g),H.current&&Z(t)}})}finally{R(!1)}}},[h,g,te,Y,X,C,F,v,K,Z,J]);Q.current=tn;let tr=e(async()=>{!te||F||C||(h.stopPlayback(),h.unlockPlayback(),await _())},[h,te,C,F,_]),ta=e(()=>{h.stop()},[h]),ti=r(()=>({onFocus:()=>h.setInputFocused(!0),onBlur:()=>h.setInputFocused(!1)}),[h]);return{draft:f,setDraft:y,attachments:r(()=>g.map(({id:t,blob:e,pins:n})=>{let r=w.current.get(t);return void 0===r&&(r=URL.createObjectURL(e),w.current.set(t,r)),{id:t,previewUrl:r,isAnnotation:null!=n,pinCount:n?.length??0}}),[g,U]),addFiles:z,annotate:B,annotateAttachment:D,removeAttachment:G,isPreparing:v>0,notice:k,maxAttachments:m,isBusy:C,isLocked:E,isReplying:F,canSend:V,send:N,stop:ta,inputFocusHandlers:ti,canRecord:te,recording:W,startRecording:tr,sendRecording:tn,cancelRecording:tt}};

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

@@ -0,0 +1,52 @@
+import { type AssistantFailure } from './assistant-failure.js';
+import { type AssistantThreadItem } from './thread-items.js';
+/**
+ * The conversation with the assistant, laid out as the panel's thread renders it.
+ * - `items`: the blocks of the current thread in reading order: user messages, assistant text, rows of tool calls.
+ * - `earlierItems`: the closed threads loaded above it, oldest first, each ended by a separator.
+ * - `isLoaded` and `isLoadingThread`: whether the thread has been read, and whether the panel shows that it is
+ *   being read.
+ * - `isEmpty`: whether there is nothing to show, so the panel greets the user.
+ * - `isReplying`: whether a reply runs. `isThinking`: whether it runs with nothing in the thread showing that it
+ *   does yet. `isResuming`: whether a thread this session may not continue is being resumed before a message.
+ * - `failure` and `retry()`: what went wrong with the assistant, and reading the thread again when that may help
+ *   (`failure.canRetry`). A ban of the user on this configuration is a failure of kind `locked`, also when the thread
+ *   read itself succeeded.
+ * - `hasOlderMessages`, `isLoadingOlderMessages` and `loadOlderMessages()`: the older pages of the current thread.
+ * - `canLoadEarlierThread`, `isLoadingEarlierThread` and `loadEarlierThread()`: the closed thread before the
+ *   loaded ones, offered once the current thread is loaded whole.
+ * - `undoableToolCallId` and `undo(toolCallIds)`: the tool call whose change a row of tool calls may undo, never
+ *   while a reply runs, and undoing the changes of a row.
+ * - `newestMessageKey` and `firstMessageId`: what a scrolling thread follows. `newestMessageKey` is an opaque value,
+ *   compared by identity, that changes whenever the newest message does, also with every chunk of a reply, but not
+ *   when an older page is loaded above it, which builds every item again. `firstMessageId` changes when an older page
+ *   is loaded, so the thread can keep the reader's place.
+ */
+export interface UseAssistantThreadResult {
+    readonly items: readonly AssistantThreadItem[];
+    readonly earlierItems: readonly AssistantThreadItem[];
+    readonly isLoaded: boolean;
+    readonly isLoadingThread: boolean;
+    readonly isEmpty: boolean;
+    readonly isReplying: boolean;
+    readonly isThinking: boolean;
+    readonly isResuming: boolean;
+    readonly failure: AssistantFailure | undefined;
+    readonly retry: () => void;
+    readonly hasOlderMessages: boolean;
+    readonly isLoadingOlderMessages: boolean;
+    readonly loadOlderMessages: () => void;
+    readonly canLoadEarlierThread: boolean;
+    readonly isLoadingEarlierThread: boolean;
+    readonly loadEarlierThread: () => void;
+    readonly undoableToolCallId: string | undefined;
+    readonly undo: (toolCallIds: ReadonlySet<string>) => void;
+    readonly newestMessageKey: object | undefined;
+    readonly firstMessageId: string | undefined;
+}
+export type UseAssistantThread = () => UseAssistantThreadResult;
+/**
+ * Hook to render the conversation with the assistant, as the panel's thread does. It renders again with every
+ * chunk of a reply; render each item with `AssistantThreadItemView`, or with the item components it uses.
+ */
+export declare const useAssistantThread: UseAssistantThread;

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

@@ -0,0 +1 @@
+import{useMemo as e}from"react";import{useEagerObservableValue as a}from"#package/react-sdk";import{useConfigurator as s}from"../../application-runtime/index.js";import{describeAssistantFailure as r}from"./assistant-failure.js";import{buildEarlierThreadItems as d,buildThreadView as i}from"./thread-items.js";export const useAssistantThread=()=>{let{assistantSystem:o}=s(),l=a(o.chat$),{messages:t,isLoading:n,isResuming:g,earlierThreads:h,isVoiceEnabled:m}=l,T=a(o.undoTipToolCallId$),p=n?void 0:T,{items:L,isThinking:u}=e(()=>i(t,n,g,m),[t,n,g,m]),M=e(()=>d(h,m),[h,m]),f=t.at(-1),O=e(()=>f?{}:void 0,[f]),{error:c,failedStatus:E,retryAfterSeconds:j,isLocked:v,isNetworkLocked:I}=l,k=e(()=>c||v?r(E,j,v,I):void 0,[c,E,j,v,I]),x=null!==l.earlierThreadId&&!l.hasOlderMessages&&!l.isLoadingEarlierThread,C=!l.isLoaded&&0===M.length&&!g&&!k,$=l.isLoaded&&0===L.length&&0===M.length&&!n&&!g&&!k;return{items:L,earlierItems:M,isLoaded:l.isLoaded,isLoadingThread:C,isEmpty:$,isReplying:n,isThinking:u,isResuming:g,failure:k,retry:o.reloadThread,hasOlderMessages:l.hasOlderMessages,isLoadingOlderMessages:l.isLoadingOlderMessages,loadOlderMessages:o.loadOlderMessages,canLoadEarlierThread:x,isLoadingEarlierThread:l.isLoadingEarlierThread,loadEarlierThread:o.loadEarlierThread,undoableToolCallId:p,undo:o.undoToolCalls,newestMessageKey:O,firstMessageId:t[0]?.id}};

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/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/assistant/voice/RecordingBar.d.ts

@@ -0,0 +1,21 @@
+import { type ElementType, type HTMLAttributes } from 'react';
+interface RecordingBarProps {
+    /** The composer's `recordingBar` slot and its props, which replace and extend the bar. */
+    readonly slot: ElementType | undefined;
+    readonly slotProps: HTMLAttributes<HTMLDivElement> | undefined;
+    /** True while the microphone is recorded; false for a recording that waits to be sent again. */
+    readonly isRecording: boolean;
+    readonly elapsedMs: number;
+    readonly level: number;
+    /** True while the recording is being sent; it cannot be dropped then. */
+    readonly disabled: boolean;
+    readonly onDiscard: () => void;
+}
+/**
+ * Stands in for the message input while a voice message is recorded: a control that drops the
+ * recording, the loudness of the microphone and how long the recording runs. A recording the server
+ * refused waits here to be sent again or dropped. It can take the focus, so the composer around it
+ * hears the keys that send or drop the recording.
+ */
+export declare const RecordingBar: import("react").ForwardRefExoticComponent<RecordingBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/configurator/ui/assistant/voice/RecordingBar.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r,Fragment as i}from"react/jsx-runtime";import{styled as a}from"@mui/material";import{forwardRef as n,useEffect as o,useState as s}from"react";import{useLocalizable as t}from"#package/react-sdk";import{PhxIcon as l}from"#package/ui-sdk";import{AssistantComposerName as d,ComposerToolButton as m}from"../composer/index.js";let c={id:"sdk.assistant.composer.recording.discard",message:"Discard recording"},g={id:"sdk.assistant.composer.recording.label",message:"Recording a voice message"},p={id:"sdk.assistant.composer.recording.recorded",message:"Voice message not sent"},f=a("div",{name:d,slot:"recordingBar"})(({theme:{spacing:e}})=>({alignItems:"center",cursor:"default",display:"flex",gap:e(1),gridColumn:"1 / -1",minBlockSize:32,paddingInlineEnd:e(.75),"&:focus":{outline:"none"}})),u=a("div")(({theme:{spacing:e}})=>({alignItems:"center",blockSize:24,display:"flex",flex:1,gap:2,justifyContent:"flex-end",minInlineSize:0,overflow:"hidden",paddingInline:e(.5)})),h=a("span")(({theme:{palette:e}})=>({background:e.primary.main,borderRadius:2,flexShrink:0,inlineSize:3,transition:"block-size 100ms linear"})),x=Array.from({length:48},()=>0),k=a("span")(({theme:{palette:e,typography:r}})=>({...r.body2,color:e.text.secondary,flex:1})),b=a("span")(({theme:{palette:e,typography:r}})=>({...r.body2,color:e.text.secondary,fontVariantNumeric:"tabular-nums"}));export const RecordingBar=n(function({slot:a,slotProps:n,isRecording:d,elapsedMs:y,level:S,disabled:z,onDiscard:I},j){let v,B=t(c),C=t(g),M=t(p),R=((e,r)=>{let[i,a]=s(x);return o(()=>{a(i=>0===r?x:[...i.slice(1),e])},[r]),i})(S,y);return r(a??f,{ref:j,tabIndex:-1,role:"group","aria-label":d?C:M,...n,children:[e(m,{size:"small","aria-label":B,disabled:z,onClick:I,children:e(l,{name:"X",fontSize:"small"})}),d?r(i,{children:[e(u,{"aria-hidden":!0,children:R.map((r,i)=>e(h,{style:{blockSize:`${Math.max(12,100*r)}%`}},i))}),e(b,{children:(v=Math.floor(y/1e3),`${Math.floor(v/60)}:${String(v%60).padStart(2,"0")}`)})]}):e(k,{children:z?null:M})]})});

package/dist/configurator/ui/assistant/voice/ReplyPlayButton.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentsOverrides, IconButtonProps } from '@mui/material';
+import { type ElementType } from 'react';
+declare const MuiComponentName: 'PhxAssistantReplyPlayButton';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantReplyPlayButtonProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+export interface ThemeableAssistantReplyPlayButtonProps {
+    /**
+     * The components used for each slot inside the play button.
+     *
+     * - `root` — The button (`IconButton`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the button.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: IconButtonProps;
+    }>;
+}
+interface ReplyPlayButtonProps extends ThemeableAssistantReplyPlayButtonProps {
+    /** The reply to read aloud, by the id of its message. */
+    readonly messageId: string;
+}
+/**
+ * The control under a reply that reads it aloud, and stops it while it is read. It spins while the reply's speech
+ * is on its way, and stands out when the browser did not let the reply read itself aloud after a voice message.
+ */
+export declare const ReplyPlayButton: (inProps: ReplyPlayButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/voice/ReplyPlayButton.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{CircularProgress as a,IconButton as t,Tooltip as r,styled as o,useThemeProps as i}from"@mui/material";import{useCallback as n}from"react";import{useEagerObservableValue as l,useLocalizable as s}from"#package/react-sdk";import{PhxIcon as d,hoverStyles as p}from"#package/ui-sdk";import{useConfigurator as m}from"../../../application-runtime/index.js";let c={id:"sdk.assistant.reply.play",message:"Read aloud"},k={id:"sdk.assistant.reply.stop",message:"Stop reading"},g={id:"sdk.assistant.reply.blocked",message:"Tap to hear the reply"},y="PhxAssistantReplyPlayButton",h=o(t,{name:y,slot:"root"})(({theme:{palette:e,spacing:a}})=>({alignSelf:"flex-start",background:"transparent",border:"none",borderRadius:6,boxShadow:"none",color:e.text.secondary,marginBlockStart:a(-1),marginInlineStart:-4,padding:4,"&:hover":{background:"transparent"},...p({"&:hover":{background:e.action.hover,color:e.text.primary}}),'&[data-blocked="true"], &[data-blocked="true"]:hover':{background:`hsl(from ${e.primary.main} h s l / 12%)`,color:e.primary.main}})),u=o("span")({alignItems:"center",blockSize:16,display:"inline-flex",inlineSize:16,justifyContent:"center"});export const ReplyPlayButton=t=>{let{messageId:o,slots:p={},slotProps:b={}}=i({props:t,name:y}),{assistantSystem:f}=m(),x=l(f.playback$),S=x.messageId===o?x.status:"idle",z=s("loading"===S||"playing"===S?k:"blocked"===S?g:c),R=n(()=>{f.playReply(o)},[f,o]);return e(r,{title:z,placement:"top",children:e(p.root??h,{size:"small","aria-label":z,"data-blocked":"blocked"===S,...b.root,onClick:R,children:e(u,{children:"loading"===S?e(a,{size:13,thickness:5,color:"inherit"}):e(d,{name:"playing"===S?"Stop":"SpeakerHigh",sx:{fontSize:16}})})})})};

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

@@ -0,0 +1,4 @@
+export { RecordingBar } from './RecordingBar.js';
+export { useVoiceRecording } from './use-voice-recording.js';
+export type { AssistantRecording, AssistantRecordingStatus } from './use-voice-recording.js';
+export { ReplyPlayButton, type ThemeableAssistantReplyPlayButtonProps } from './ReplyPlayButton.js';

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

@@ -0,0 +1 @@
+export{RecordingBar}from"./RecordingBar.js";export{useVoiceRecording}from"./use-voice-recording.js";export{ReplyPlayButton}from"./ReplyPlayButton.js";

package/dist/configurator/ui/assistant/voice/use-voice-recording.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Where the voice message being recorded stands:
+ * - `idle`: nothing is recorded; the mic starts a recording.
+ * - `requesting`: the browser is asking the user for the microphone.
+ * - `recording`: the microphone is recorded; the recording can be sent or dropped.
+ * - `recorded`: a recording waits to be sent again or dropped, because the server refused it.
+ * - `refused`: the microphone is blocked for the page; the mic asks for it again.
+ * - `unavailable`: the browser cannot record at all, so there is no mic.
+ */
+export type AssistantRecordingStatus = 'idle' | 'requesting' | 'recording' | 'recorded' | 'refused' | 'unavailable';
+/** The voice message being recorded, as a composer shows it. */
+export interface AssistantRecording {
+    readonly status: AssistantRecordingStatus;
+    /** How long the recording runs, in ms; 0 when nothing is recorded. */
+    readonly elapsedMs: number;
+    /** The loudness of the microphone, from 0 for silence to 1; 0 when nothing is recorded. */
+    readonly level: number;
+}
+interface UseVoiceRecordingProps {
+    /** Called when the recording reaches {@link MAX_RECORDING_MS}: it is to be sent as it is. */
+    readonly onLimitReached: () => void;
+}
+/**
+ * Records a voice message from the microphone for the composer: the state it shows, and the steps a
+ * recording goes through. The recording is dropped when the component using the hook unmounts.
+ *
+ * Where the browser tells, the microphone's permission is read when the composer mounts and followed
+ * while it stays: a microphone blocked for the page shows as `refused` from the start, and one allowed
+ * meanwhile shows as `idle` again. Elsewhere the permission is learned when the user taps the mic.
+ */
+export declare const useVoiceRecording: ({ onLimitReached }: UseVoiceRecordingProps) => {
+    recording: AssistantRecording;
+    start: () => Promise<void>;
+    finish: () => Promise<Blob | null>;
+    cancel: () => void;
+    clear: () => void;
+    restore: (audio: Blob) => void;
+};
+export {};

package/dist/configurator/ui/assistant/voice/use-voice-recording.js

@@ -0,0 +1 @@
+import{useCallback as e,useEffect as r,useRef as t,useState as n}from"react";import{canCaptureVoice as u,startVoiceCapture as l}from"./voice-capture.js";let c={status:"idle",elapsedMs:0,level:0},a=e=>({status:e,elapsedMs:0,level:0});export const useVoiceRecording=({onLimitReached:s})=>{let[i,d]=n(()=>u()?c:a("unavailable")),o=t(null),v=t(null),f=t(s),g=t(!0);f.current=s;let p="unavailable"!==i.status;r(()=>{if(!p)return;let e=null,r=()=>{let{state:r}=e??{};d(e=>"denied"===r&&"idle"===e.status?a("refused"):"granted"===r&&"refused"===e.status?c:e)};return g.current=!0,navigator.permissions?.query({name:"microphone"}).then(t=>{e=t,t.addEventListener("change",r),r()}).catch(()=>void 0),()=>{g.current=!1,e?.removeEventListener("change",r),o.current?.cancel(),o.current=null}},[p]),r(()=>{if("recording"!==i.status)return;let e=Date.now(),r=setInterval(()=>{let t=Date.now()-e,n=o.current;d(e=>n&&"recording"===e.status?{status:"recording",elapsedMs:t,level:n.readLevel()}:e),t>=12e4&&(clearInterval(r),f.current())},100);return()=>clearInterval(r)},[i.status]);let m=e(async()=>{if(!o.current){d(a("requesting"));try{let e=await l({onEnded:()=>{o.current=null,d(a("refused"))}});if(!g.current)return void e.cancel();o.current=e,v.current=null,d(a("recording"))}catch{d(a("refused"))}}},[]),h=e(async()=>{let e=o.current;return e&&(o.current=null,v.current=await e.stop(),d(a("recorded"))),v.current},[]),w=e(()=>{o.current?.cancel(),o.current=null,v.current=null,d(c)},[]);return{recording:i,start:m,finish:h,cancel:w,clear:e(()=>{v.current=null,o.current||d(c)},[]),restore:e(e=>{o.current||(v.current=e,d(a("recorded")))},[])}};

package/dist/configurator/ui/assistant/voice/voice-capture.d.ts

@@ -0,0 +1,22 @@
+/** A recording being made from the microphone. */
+export interface VoiceCapture {
+    /** The loudness of the microphone now, from 0 for silence to 1. */
+    readonly readLevel: () => number;
+    /** Ends the recording and resolves with it. */
+    readonly stop: () => Promise<Blob>;
+    /** Ends the recording and drops it. */
+    readonly cancel: () => void;
+}
+/**
+ * Whether the browser can record a voice message: it has a microphone API and records one of the
+ * types the server takes.
+ */
+export declare const canCaptureVoice: () => boolean;
+/**
+ * Starts recording from the microphone; the browser asks the user for it the first time. Rejects
+ * when the user or the page refuses the microphone, or none is there. `onEnded` is called when the
+ * microphone goes away while recording, revoked or unplugged; the recording is dropped then.
+ */
+export declare const startVoiceCapture: ({ onEnded }: {
+    readonly onEnded: () => void;
+}) => Promise<VoiceCapture>;

package/dist/configurator/ui/assistant/voice/voice-capture.js

@@ -0,0 +1 @@
+import{ASSISTANT_VOICE_MIME_TYPES as e,readAssistantVoiceMimeType as t}from"@salsita-ai/contracts/assistant";let a=["audio/webm;codecs=opus",...e],o=()=>"u"<typeof MediaRecorder?void 0:a.find(e=>MediaRecorder.isTypeSupported(e));export const canCaptureVoice=()=>"u">typeof navigator&&navigator.mediaDevices?.getUserMedia!==void 0&&void 0!==o();export const startVoiceCapture=async({onEnded:e})=>{let a=await navigator.mediaDevices.getUserMedia({audio:!0}),i=o(),r=new MediaRecorder(a,{...void 0!==i&&{mimeType:i},audioBitsPerSecond:32e3}),n=(e=>{if("u"<typeof AudioContext)return{readLevel:()=>0,close:()=>{}};let t=new AudioContext,a=t.createAnalyser(),o=new Uint8Array(a.fftSize);return t.createMediaStreamSource(e).connect(a),{readLevel:()=>(a.getByteTimeDomainData(o),Math.min(1,3*Math.sqrt(o.reduce((e,t)=>e+((t-128)/128)**2,0)/o.length))),close:()=>void t.close()}})(a),d=[],s=()=>{for(let e of(r.ondataavailable=null,r.onstop=null,a.getTracks()))e.onended=null,e.stop();n.close()},c=()=>{s(),"inactive"!==r.state&&r.stop()};for(let t of(r.ondataavailable=e=>{e.data.size>0&&d.push(e.data)},a.getTracks()))t.onended=()=>{c(),e()};return r.start(),{readLevel:n.readLevel,stop:()=>new Promise(e=>{r.onstop=()=>{let a=t(r.mimeType)?r.mimeType:i??"";s(),e(new Blob(d,{type:a}))},r.stop()}),cancel:c}};

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/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/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 p,useEffect as l,useMemo as c,useState as f}from"react";import{BuiltInLoadingPhase as m,useExpectPhase as d,useIsLoaderHosted as h,useLoadingPhase 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 l(()=>{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=h();d(m.SceneAssets),u({id:m.SceneAssets,label:"Loading 3D scene…"},E);let $=p(()=>{B(!1),L.reportFirstLoadFinished()},[L]),_=p(e=>{L.onCanvasClick$.next(e)},[L]),b=p(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(l(()=>{"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,useIsLoaderHosted 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=()=>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/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/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}};