@salsita-ai/sdk 0.50.0-develop.bb71259564 → 0.50.0-develop.bc204720a8

package/dist/configurator/pages/error-boundaries/DevLoadingFallback.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import{Box as i,Button as n,Divider as o,Stack as a,Typography as s}from"@mui/material";import{useEffect as c,useRef as d}from"react";import{useAccessService as l,useBackendData as h,useConfiguratorRouting as m,useFrontendData as f,useIsDev as u,useLoadedData as p,useOverridesHash as b,usePublishedData as x,useSessionService as v}from"#package/react-sdk";import{JsonViewer as g,StackTraceViewer as y}from"#package/ui-sdk";import{useResetOnEditorHotReload as k}from"./use-reset-on-editor-hot-reload.js";let w=()=>{let r=m();return e(a,{direction:"row",spacing:2,sx:{mb:2},children:[t(n,{variant:"outlined",size:"small",onClick:()=>{r.goToIndex()},children:"Reset state"}),t(n,{variant:"outlined",size:"small",onClick:()=>{window.location.reload()},children:"Reload Page"})]})},S=()=>{let n=p(),a=l(),c=v(),d=x(),m=f(),u=h();return e(r,{children:[t(s,{variant:"h5",sx:{mb:2,mt:4,fontWeight:600},children:"Debug Data"}),e(i,{component:"div",sx:{p:2,mb:4,backgroundColor:"#e3f2fd",borderRadius:1,borderLeft:"4px solid #2196f3"},children:[t(s,{variant:"subtitle2",sx:{fontWeight:600,mb:1,color:"primary.main"},children:"\uD83D\uDD0D How to Debug This Issue"}),t(s,{variant:"body2",component:"div",children:e("ul",{style:{margin:"8px 0",paddingLeft:"20px"},children:[t("li",{children:"Check the error message and stack trace above for the exact location of the issue"}),t("li",{children:"Review the data sections below to understand the current application state"}),t("li",{children:"Look for missing or unexpected values in Published, Frontend, or Backend Data"}),t("li",{children:"Verify that all required data sources are loaded correctly"}),t("li",{children:"Check Session Service for authentication issues"}),t("li",{children:'Use the "Reset state" button to return to the index page'}),t("li",{children:'Use the "Reload Page" button to start fresh if the issue persists'})]})})]}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Published Data"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Configuration data published to S3. This is the main source of truth for domain entities, components, and rules. Loaded from the backend at application startup."}),t(g,{data:d}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Frontend Data"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Data collected and processed on the frontend. Contains UI state, user selections, and client-side computed values."}),t(g,{data:m}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Backend Data"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Optional data fetched from backend APIs. May include pricing, availability, or other dynamic server-side data."}),t(g,{data:u}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Session Service"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Authentication and session information. Contains user identity, permissions, and session tokens."}),t(g,{data:c}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Loaded Data"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"The initial data of the configuration used to start the configurator. This is the starting state and context provided when the configurator was initialized."}),t(g,{data:n}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Access Data"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Access control and permissions service. Determines what actions the current user can perform and what data they can view."}),t(g,{data:a}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Configurator Props"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Configurator-specific properties and settings. Contains routing information, UI configuration, and configurator context settings."})]})};export const DevLoadingFallback=n=>{let{error:l,resetErrorBoundary:h}=n,m=u(),f=b();k(h);let p=d(null);if(c(()=>{if(h){if(null===p.current){p.current=f;return}f!==p.current&&h()}},[f,h]),!m)throw l;if(l instanceof Error)return t(i,{component:"div",sx:{height:"100vh",overflow:"auto"},children:e(a,{component:"div",spacing:3,sx:{p:5,boxSizing:"border-box"},alignItems:"flex-start",children:[t(s,{variant:"h6",sx:{mb:2,mt:2},color:"error",children:"Loading of the context failed for an unknown reason!"}),e(i,{component:"div",sx:{p:2,mb:2,backgroundColor:"#fff3cd",borderRadius:1,borderLeft:"4px solid #ffc107"},children:[t(s,{variant:"subtitle2",sx:{fontWeight:600,mb:1},children:"⚠️ When does this error occur?"}),e(s,{variant:"body2",children:["This error happened ",t("strong",{children:"during the initial loading of data"})," before the configurator could start. Most likely causes:"]}),e(s,{variant:"body2",component:"ul",sx:{mt:1,mb:0},children:[t("li",{children:"Migration scripts failed to transform the data correctly"}),t("li",{children:"State initialization encountered invalid or corrupted data"})]})]}),t(s,{variant:"body2",sx:{mb:2},children:"This should not happen, please report it so we can improve the platform!"}),t(w,{}),t(s,{variant:"subtitle2",children:"Error: "}),t(s,{variant:"body2",children:l.message}),l.stack&&e(r,{children:[t(o,{}),t(y,{stack:l.stack,error:l})]}),t(o,{}),t(S,{})]})});let x=l instanceof Error?l.stack:null;return t(i,{component:"div",sx:{height:"100vh",overflow:"auto"},children:e(a,{component:"div",spacing:3,sx:{p:5,boxSizing:"border-box"},children:[t(s,{variant:"h6",sx:{mb:2,mt:2},color:"error",children:"Loading of the context failed for an unknown reason!"}),t(s,{variant:"body2",children:"This should not happen, please report it so we can improve the platform!"}),t(w,{}),t(s,{variant:"subtitle2",children:"Error: "}),t(s,{variant:"body2",children:`${l}`}),x&&e(r,{children:[t(o,{}),t(y,{stack:x,error:l})]}),t(o,{}),t(S,{})]})})};
+import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import{Box as i,Button as n,Divider as o,Stack as a,Typography as s}from"@mui/material";import{useEffect as c,useRef as d}from"react";import{useAccessService as l,useAgentMode as h,useBackendData as m,useConfiguratorRouting as f,useFrontendData as u,useIsDev as p,useLoadedData as b,useOverridesHash as x,usePublishedData as g,useSessionService as v}from"#package/react-sdk";import{JsonViewer as y,StackTraceViewer as k}from"#package/ui-sdk";import{AgentModeErrorFallback as w}from"./AgentModeErrorFallback.js";import{useResetOnEditorHotReload as S}from"./use-reset-on-editor-hot-reload.js";let C=()=>{let r=f();return e(a,{direction:"row",spacing:2,sx:{mb:2},children:[t(n,{variant:"outlined",size:"small",onClick:()=>{r.goToIndex()},children:"Reset state"}),t(n,{variant:"outlined",size:"small",onClick:()=>{window.location.reload()},children:"Reload Page"})]})},D=()=>{let n=b(),a=l(),c=v(),d=g(),h=u(),f=m();return e(r,{children:[t(s,{variant:"h5",sx:{mb:2,mt:4,fontWeight:600},children:"Debug Data"}),e(i,{component:"div",sx:{p:2,mb:4,backgroundColor:"#e3f2fd",borderRadius:1,borderLeft:"4px solid #2196f3"},children:[t(s,{variant:"subtitle2",sx:{fontWeight:600,mb:1,color:"primary.main"},children:"\uD83D\uDD0D How to Debug This Issue"}),t(s,{variant:"body2",component:"div",children:e("ul",{style:{margin:"8px 0",paddingLeft:"20px"},children:[t("li",{children:"Check the error message and stack trace above for the exact location of the issue"}),t("li",{children:"Review the data sections below to understand the current application state"}),t("li",{children:"Look for missing or unexpected values in Published, Frontend, or Backend Data"}),t("li",{children:"Verify that all required data sources are loaded correctly"}),t("li",{children:"Check Session Service for authentication issues"}),t("li",{children:'Use the "Reset state" button to return to the index page'}),t("li",{children:'Use the "Reload Page" button to start fresh if the issue persists'})]})})]}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Published Data"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Configuration data published to S3. This is the main source of truth for domain entities, components, and rules. Loaded from the backend at application startup."}),t(y,{data:d}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Frontend Data"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Data collected and processed on the frontend. Contains UI state, user selections, and client-side computed values."}),t(y,{data:h}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Backend Data"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Optional data fetched from backend APIs. May include pricing, availability, or other dynamic server-side data."}),t(y,{data:f}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Session Service"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Authentication and session information. Contains user identity, permissions, and session tokens."}),t(y,{data:c}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Loaded Data"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"The initial data of the configuration used to start the configurator. This is the starting state and context provided when the configurator was initialized."}),t(y,{data:n}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Access Data"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Access control and permissions service. Determines what actions the current user can perform and what data they can view."}),t(y,{data:a}),t(o,{sx:{my:4}}),t(s,{variant:"h6",sx:{mb:1,mt:3,fontWeight:600,color:"primary.main"},children:"Configurator Props"}),t(s,{variant:"body2",sx:{mb:2,color:"text.secondary",fontStyle:"italic"},children:"Configurator-specific properties and settings. Contains routing information, UI configuration, and configurator context settings."})]})},W=n=>{let{error:l,resetErrorBoundary:h}=n,m=p(),f=x();S(h);let u=d(null);if(c(()=>{if(h){if(null===u.current){u.current=f;return}f!==u.current&&h()}},[f,h]),!m)throw l;if(l instanceof Error)return t(i,{component:"div",sx:{height:"100vh",overflow:"auto"},children:e(a,{component:"div",spacing:3,sx:{p:5,boxSizing:"border-box"},alignItems:"flex-start",children:[t(s,{variant:"h6",sx:{mb:2,mt:2},color:"error",children:"Loading of the context failed for an unknown reason!"}),e(i,{component:"div",sx:{p:2,mb:2,backgroundColor:"#fff3cd",borderRadius:1,borderLeft:"4px solid #ffc107"},children:[t(s,{variant:"subtitle2",sx:{fontWeight:600,mb:1},children:"⚠️ When does this error occur?"}),e(s,{variant:"body2",children:["This error happened ",t("strong",{children:"during the initial loading of data"})," before the configurator could start. Most likely causes:"]}),e(s,{variant:"body2",component:"ul",sx:{mt:1,mb:0},children:[t("li",{children:"Migration scripts failed to transform the data correctly"}),t("li",{children:"State initialization encountered invalid or corrupted data"})]})]}),t(s,{variant:"body2",sx:{mb:2},children:"This should not happen, please report it so we can improve the platform!"}),t(C,{}),t(s,{variant:"subtitle2",children:"Error: "}),t(s,{variant:"body2",children:l.message}),l.stack&&e(r,{children:[t(o,{}),t(k,{stack:l.stack,error:l})]}),t(o,{}),t(D,{})]})});let b=l instanceof Error?l.stack:null;return t(i,{component:"div",sx:{height:"100vh",overflow:"auto"},children:e(a,{component:"div",spacing:3,sx:{p:5,boxSizing:"border-box"},children:[t(s,{variant:"h6",sx:{mb:2,mt:2},color:"error",children:"Loading of the context failed for an unknown reason!"}),t(s,{variant:"body2",children:"This should not happen, please report it so we can improve the platform!"}),t(C,{}),t(s,{variant:"subtitle2",children:"Error: "}),t(s,{variant:"body2",children:`${l}`}),b&&e(r,{children:[t(o,{}),t(k,{stack:b,error:l})]}),t(o,{}),t(D,{})]})})};export const DevLoadingFallback=e=>h()?t(w,{...e}):t(W,{...e});

package/dist/configurator/pages/error-boundaries/GeneralErrorBoundary.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Box as t,Stack as n,Typography as i}from"@mui/material";import{useApplicationRuntime as o,useIsDev as a}from"#package/react-sdk";import{DevErrorPage as l}from"#package/ui-sdk";import{ConfiguratorErrorPageElement as c}from"../../configurator-error-page/index.js";import{useResetOnEditorHotReload as d}from"./use-reset-on-editor-hot-reload.js";let s=()=>{let a=o();try{let o=a.selectors.domainContext.configurator;if(!o.getInitializationState().isCurrent)return null;let{storeSystem:l}=o.getDomainSystems(),c=l.stateSlices.committed.value,d=l.stateSlices.potentiallyInvalid.value,s=d.validity.valid||"uncaught"===d.validity.severity?[]:d.validity.entityViolations,m=s.length>0,p="reset"!==c.kind?c.updates:[];if(!m&&0===p.length)return null;return r(t,{component:"div",sx:{p:2,backgroundColor:m?"#ffebee":"#e3f2fd",borderRadius:1,borderLeft:m?"4px solid #f44336":"4px solid #2196f3"},children:[e(i,{variant:"subtitle2",sx:{fontWeight:600,mb:1,color:m?"error.main":"primary.main"},children:m?"⚠️ Error likely caused by invariant violations":"\uD83D\uDD04 Last state changes before error"}),m&&r(t,{component:"div",sx:{mb:2},children:[e(i,{variant:"body2",sx:{mb:1},children:"The following invariant violations were detected:"}),e(n,{component:"div",spacing:.5,children:s.map((e,t)=>r(i,{variant:"caption",sx:{fontFamily:"monospace",fontSize:"0.75rem",display:"block",pl:2},children:["• Entity ",String(e.entityId),": ",JSON.stringify(e.violation)]},t))})]}),p.length>0&&r(t,{component:"div",children:[r(i,{variant:"body2",sx:{mb:1},children:[p.length," update",1!==p.length?"s":""," applied just before the error:"]}),r(n,{component:"div",spacing:.5,children:[p.slice(0,5).map((e,t)=>{let n="";return"createDomainEntity"===e.kind?n=` (${e.entity.type})`:"deleteEntity"===e.kind||"modifyDomainEntity"===e.kind||"replaceDomainEntity"===e.kind?n=` (${e.entityId})`:("createEphemeralRecord"===e.kind||"modifyEphemeralRecord"===e.kind||"deleteEphemeralRecord"===e.kind)&&(n=` (${e.componentInstance.entityId})`),r(i,{variant:"caption",sx:{fontFamily:"monospace",fontSize:"0.75rem",display:"block",pl:2},children:["• ",e.kind,n]},t)}),p.length>5&&r(i,{variant:"caption",sx:{fontFamily:"monospace",fontSize:"0.75rem",display:"block",pl:2,fontStyle:"italic"},children:["... and ",p.length-5," more"]})]})]})]})}catch{return null}};export const DevGeneralErrorFallback=r=>{let{error:t,resetErrorBoundary:n}=r;return d(n),e(l,{title:"Application Error (Dev Mode)",subtitle:"An uncaught error occurred in the application. This detailed view is only visible in development mode.",errorName:t instanceof Error?t.name:"Error",errorMessage:t instanceof Error?t.message:String(t),errorStack:t instanceof Error?t.stack:null,error:t,onReset:n,resetLabel:"Try Again",children:e(s,{})})};export const ProdGeneralErrorFallback=r=>{let{resetErrorBoundary:t}=r;return e(c,{reason:"uncaughtError",onRetry:t})};export const GeneralErrorFallback=r=>a()?e(DevGeneralErrorFallback,{...r}):e(ProdGeneralErrorFallback,{...r});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Box as t,Stack as n,Typography as i}from"@mui/material";import{useAgentMode as o,useApplicationRuntime as a,useIsDev as l}from"#package/react-sdk";import{DevErrorPage as c}from"#package/ui-sdk";import{ConfiguratorErrorPageElement as d}from"../../configurator-error-page/index.js";import{AgentModeErrorFallback as s}from"./AgentModeErrorFallback.js";import{useResetOnEditorHotReload as m}from"./use-reset-on-editor-hot-reload.js";let p=()=>{let o=a();try{let a=o.selectors.domainContext.configurator;if(!a.getInitializationState().isCurrent)return null;let{storeSystem:l}=a.getDomainSystems(),c=l.stateSlices.committed.value,d=l.stateSlices.potentiallyInvalid.value,s=d.validity.valid||"uncaught"===d.validity.severity?[]:d.validity.entityViolations,m=s.length>0,p="reset"!==c.kind?c.updates:[];if(!m&&0===p.length)return null;return r(t,{component:"div",sx:{p:2,backgroundColor:m?"#ffebee":"#e3f2fd",borderRadius:1,borderLeft:m?"4px solid #f44336":"4px solid #2196f3"},children:[e(i,{variant:"subtitle2",sx:{fontWeight:600,mb:1,color:m?"error.main":"primary.main"},children:m?"⚠️ Error likely caused by invariant violations":"\uD83D\uDD04 Last state changes before error"}),m&&r(t,{component:"div",sx:{mb:2},children:[e(i,{variant:"body2",sx:{mb:1},children:"The following invariant violations were detected:"}),e(n,{component:"div",spacing:.5,children:s.map((e,t)=>r(i,{variant:"caption",sx:{fontFamily:"monospace",fontSize:"0.75rem",display:"block",pl:2},children:["• Entity ",String(e.entityId),": ",JSON.stringify(e.violation)]},t))})]}),p.length>0&&r(t,{component:"div",children:[r(i,{variant:"body2",sx:{mb:1},children:[p.length," update",1!==p.length?"s":""," applied just before the error:"]}),r(n,{component:"div",spacing:.5,children:[p.slice(0,5).map((e,t)=>{let n="";return"createDomainEntity"===e.kind?n=` (${e.entity.type})`:"deleteEntity"===e.kind||"modifyDomainEntity"===e.kind||"replaceDomainEntity"===e.kind?n=` (${e.entityId})`:("createEphemeralRecord"===e.kind||"modifyEphemeralRecord"===e.kind||"deleteEphemeralRecord"===e.kind)&&(n=` (${e.componentInstance.entityId})`),r(i,{variant:"caption",sx:{fontFamily:"monospace",fontSize:"0.75rem",display:"block",pl:2},children:["• ",e.kind,n]},t)}),p.length>5&&r(i,{variant:"caption",sx:{fontFamily:"monospace",fontSize:"0.75rem",display:"block",pl:2,fontStyle:"italic"},children:["... and ",p.length-5," more"]})]})]})]})}catch{return null}};export const DevGeneralErrorFallback=r=>{let{error:t,resetErrorBoundary:n}=r;return m(n),e(c,{title:"Application Error (Dev Mode)",subtitle:"An uncaught error occurred in the application. This detailed view is only visible in development mode.",errorName:t instanceof Error?t.name:"Error",errorMessage:t instanceof Error?t.message:String(t),errorStack:t instanceof Error?t.stack:null,error:t,onReset:n,resetLabel:"Try Again",children:e(p,{})})};export const ProdGeneralErrorFallback=r=>{let{resetErrorBoundary:t}=r;return e(d,{reason:"uncaughtError",onRetry:t})};let y=r=>l()?e(DevGeneralErrorFallback,{...r}):e(ProdGeneralErrorFallback,{...r});export const GeneralErrorFallback=r=>o()?e(s,{...r}):e(y,{...r});

package/dist/configurator/pages/error-boundaries/index.d.ts

@@ -1,3 +1,4 @@
+export { BuiltInGeneralErrorFallback } from './BuiltInGeneralErrorFallback.js';
 export { DevContextFallback } from './DevContextFallback.js';
 export { DevLoadingFallback } from './DevLoadingFallback.js';
 export { GeneralErrorFallback, DevGeneralErrorFallback, ProdGeneralErrorFallback } from './GeneralErrorBoundary.js';

package/dist/configurator/pages/error-boundaries/index.js

@@ -1 +1 @@
-export{DevContextFallback}from"./DevContextFallback.js";export{DevLoadingFallback}from"./DevLoadingFallback.js";export{GeneralErrorFallback,DevGeneralErrorFallback,ProdGeneralErrorFallback}from"./GeneralErrorBoundary.js";export{LoadingErrorBoundary}from"./LoadingErrorBoundary.js";export{StackTraceViewer,parseStackTrace,getShorterPath}from"#package/ui-sdk";
+export{BuiltInGeneralErrorFallback}from"./BuiltInGeneralErrorFallback.js";export{DevContextFallback}from"./DevContextFallback.js";export{DevLoadingFallback}from"./DevLoadingFallback.js";export{GeneralErrorFallback,DevGeneralErrorFallback,ProdGeneralErrorFallback}from"./GeneralErrorBoundary.js";export{LoadingErrorBoundary}from"./LoadingErrorBoundary.js";export{StackTraceViewer,parseStackTrace,getShorterPath}from"#package/ui-sdk";

package/dist/configurator/pages/provider-slots/ContainerSlotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+/** The configurator's `Container` provider slot: the root container, which measures itself. */
+export declare const ContainerSlotProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/provider-slots/ContainerSlotProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{standardWebComponentProperties as o}from"#package/domain";import{useWebComponentPropertyValue as e}from"#package/react-sdk";import{ConfiguratorResponsiveProvider as i}from"./ConfiguratorResponsiveProvider.js";export const ContainerSlotProvider=({children:n})=>r(i,{containerZIndex:e(o.containerZIndex),children:n});

package/dist/configurator/pages/provider-slots/LoaderSlotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+/** The configurator's `Loader` provider slot: the app loader overlay the spec's `appLoader` selects. */
+export declare const LoaderSlotProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/provider-slots/LoaderSlotProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{useSpecAppLoader as o}from"#package/react-sdk";import{AppLoader as e}from"../../ui/index.js";export const LoaderSlotProvider=({children:t})=>r(e,{mode:o(),children:t});

package/dist/configurator/pages/provider-slots/MessageHostSlotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+/** The configurator's `MessageHost` provider slot: the themed snackbar host. */
+export declare const MessageHostSlotProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/provider-slots/MessageHostSlotProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{SnackbarProvider as o}from"#package/ui-sdk";export const MessageHostSlotProvider=({children:e})=>r(o,{maxSnack:5,children:e});

package/dist/configurator/pages/provider-slots/SceneResourcesSlotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+/** The configurator's `SceneResources` provider slot: the scene's shared resources and texture prefetch. */
+export declare const SceneResourcesSlotProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/provider-slots/SceneResourcesSlotProvider.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useSpecPrefetchTextureUrls as r}from"#package/react-sdk";import{SceneResourcesProvider as o}from"../../scene/index.js";export const SceneResourcesSlotProvider=({children:t})=>e(o,{prefetchTextureUrls:r(),children:t});

package/dist/configurator/pages/provider-slots/ThemeSlotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+/** The configurator's `Theme` provider slot: the encapsulated MUI theme. */
+export declare const ThemeSlotProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/provider-slots/ThemeSlotProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{EncapsulatedConfiguratorTheme as e}from"../../ui/index.js";export const ThemeSlotProvider=({children:o})=>r(e,{children:o});

package/dist/configurator/pages/provider-slots/configurator-provider-slot-elements.d.ts

@@ -0,0 +1,3 @@
+import type { ElementRegistration } from '#package/domain';
+/** The configurator UI's providers, one for each of the configurator's provider slots. */
+export declare const configuratorProviderSlotElements: readonly ElementRegistration[];

package/dist/configurator/pages/provider-slots/configurator-provider-slot-elements.js

@@ -0,0 +1 @@
+import{ConfiguratorProviderSlot as o,createConfiguratorProviderSlot as r}from"#package/react-sdk";import{ContainerSlotProvider as e}from"./ContainerSlotProvider.js";import{LoaderSlotProvider as t}from"./LoaderSlotProvider.js";import{MessageHostSlotProvider as s}from"./MessageHostSlotProvider.js";import{SceneResourcesSlotProvider as i}from"./SceneResourcesSlotProvider.js";import{ThemeSlotProvider as m}from"./ThemeSlotProvider.js";export const configuratorProviderSlotElements=[r(o.Theme,m),r(o.Container,e),r(o.Loader,t),r(o.MessageHost,s),r(o.SceneResources,i)];

package/dist/configurator/pages/provider-slots/index.d.ts

@@ -0,0 +1,6 @@
+export { configuratorProviderSlotElements } from './configurator-provider-slot-elements.js';
+export { ContainerSlotProvider } from './ContainerSlotProvider.js';
+export { LoaderSlotProvider } from './LoaderSlotProvider.js';
+export { MessageHostSlotProvider } from './MessageHostSlotProvider.js';
+export { SceneResourcesSlotProvider } from './SceneResourcesSlotProvider.js';
+export { ThemeSlotProvider } from './ThemeSlotProvider.js';

package/dist/configurator/pages/provider-slots/index.js

@@ -0,0 +1 @@
+export{configuratorProviderSlotElements}from"./configurator-provider-slot-elements.js";export{ContainerSlotProvider}from"./ContainerSlotProvider.js";export{LoaderSlotProvider}from"./LoaderSlotProvider.js";export{MessageHostSlotProvider}from"./MessageHostSlotProvider.js";export{SceneResourcesSlotProvider}from"./SceneResourcesSlotProvider.js";export{ThemeSlotProvider}from"./ThemeSlotProvider.js";

package/dist/configurator/pages/ui-elements/BuiltInInvalidDeploymentReload.d.ts

@@ -0,0 +1,2 @@
+/** The default `InvalidDeploymentReload` registration: the dialog that asks to reload the page. */
+export declare const BuiltInInvalidDeploymentReload: () => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/ui-elements/BuiltInInvalidDeploymentReload.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{InvalidDeploymentReload as e}from"#package/react-sdk";export const BuiltInInvalidDeploymentReload=()=>t(e,{});

package/dist/configurator/pages/ui-elements/configurator-ui-elements.d.ts

@@ -0,0 +1,3 @@
+import type { ElementRegistration } from '#package/domain';
+/** The configurator UI's named elements, one for each element the configurator's runtime renders. */
+export declare const configuratorUiElements: readonly ElementRegistration[];

package/dist/configurator/pages/ui-elements/configurator-ui-elements.js

@@ -0,0 +1 @@
+import{ConfiguratorUiElement as r,createConfiguratorUiElement as o}from"#package/react-sdk";import{BuiltInGeneralErrorFallback as e}from"../error-boundaries/index.js";import{BuiltInInvalidDeploymentReload as a}from"./BuiltInInvalidDeploymentReload.js";export const configuratorUiElements=[o(r.GeneralErrorFallback,e),o(r.InvalidDeploymentReload,a)];

package/dist/configurator/pages/ui-elements/index.d.ts

@@ -0,0 +1,2 @@
+export { BuiltInInvalidDeploymentReload } from './BuiltInInvalidDeploymentReload.js';
+export { configuratorUiElements } from './configurator-ui-elements.js';

package/dist/configurator/pages/ui-elements/index.js

@@ -0,0 +1 @@
+export{BuiltInInvalidDeploymentReload}from"./BuiltInInvalidDeploymentReload.js";export{configuratorUiElements}from"./configurator-ui-elements.js";

package/dist/configurator/scene/cameras/CameraPadding.js

@@ -1 +1 @@
-import{useFrame as t,useThree as r}from"@react-three/fiber";import{useEffect as e,useRef as a}from"react";import{MathUtils as o}from"three";import{useResponsive as i}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";let p=1/30;export const CameraPadding=()=>{let{cameraControlSystem:n,canvasSystem:c}=m(),{canvasPadding:f}=i(),l=r(t=>t.invalidate),h=a(f),d=a(!1);return e(()=>{n.setCanvasPadding(f),l()},[n,f,l]),t((t,r)=>{if(t.camera!==n.perspectiveCamera&&t.camera!==n.orthographicCamera)return;let e=c.interactiveViewport$.value;if(null===e)return;let a=h.current,i=Math.min(r,p),m=d.current?{top:o.damp(a.top,f.top,8,i),right:o.damp(a.right,f.right,8,i),bottom:o.damp(a.bottom,f.bottom,8,i),left:o.damp(a.left,f.left,8,i)}:f;d.current=!0;let s=.5>Math.abs(m.top-f.top)&&.5>Math.abs(m.right-f.right)&&.5>Math.abs(m.bottom-f.bottom)&&.5>Math.abs(m.left-f.left);h.current=s?f:m,n.setCameraOffset({padding:h.current,viewPort:e,camera:n.perspectiveCamera}),n.setCameraOffset({padding:h.current,viewPort:e,camera:n.orthographicCamera}),s||l()}),null};
+import{useFrame as t,useThree as a}from"@react-three/fiber";import{useEffect as e,useRef as r}from"react";import{MathUtils as o}from"three";import{useResponsive as i}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";let p=1/30;export const CameraPadding=()=>{let{cameraControlSystem:l,canvasSystem:f}=m(),{canvasPadding:n}=i(),h=a(t=>t.invalidate),s=r(!1);return e(()=>{l.setCanvasPadding(n),h()},[l,n,h]),t((t,a)=>{if(t.camera!==l.perspectiveCamera&&t.camera!==l.orthographicCamera||null===f.interactiveViewport$.value||l.isCameraOffsetHeld)return;let e=l.appliedCameraOffset,r=Math.min(a,p),i=s.current?{top:o.damp(e.top,n.top,8,r),right:o.damp(e.right,n.right,8,r),bottom:o.damp(e.bottom,n.bottom,8,r),left:o.damp(e.left,n.left,8,r)}:n;s.current=!0;let m=.5>Math.abs(i.top-n.top)&&.5>Math.abs(i.right-n.right)&&.5>Math.abs(i.bottom-n.bottom)&&.5>Math.abs(i.left-n.left);l.applyCameraOffset(m?n:i),m||h()}),null};

package/dist/configurator/ui/assistant/AssistantChips.d.ts

@@ -1,4 +1,75 @@
+import type { ButtonBaseProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import { type PhxIconProps } from '#package/ui-sdk';
 import type { AssistantToolItem } from './thread-items.js';
+declare const MuiComponentName: 'PhxAssistantToolChips';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: AssistantToolChipsSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantToolChipsProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Activity: 'activity';
+    readonly ActivityIcon: 'activityIcon';
+    readonly Chip: 'chip';
+    readonly ChipLabel: 'chipLabel';
+    readonly ScreenshotsLink: 'screenshotsLink';
+    readonly UndoButton: 'undoButton';
+    readonly Violation: 'violation';
+    readonly FullLabel: 'fullLabel';
+};
+type AssistantToolChipsSlots = ValueOf<typeof Slots>;
+export interface ThemeableAssistantToolChipsProps {
+    /**
+     * The components used for each slot inside a row of tool calls.
+     *
+     * - `root` — The row (`div`).
+     * - `activity` — The frame of the turning icon (`span`).
+     * - `activityIcon` — The icon that turns while the assistant works on the row (`PhxIcon`).
+     * - `chip` — The note of one call, or of its screenshots (`span`).
+     * - `chipLabel` — The text of a call's note (`span`).
+     * - `screenshotsLink` — The label that opens a call's screenshots (`span`).
+     * - `undoButton` — The Undo control after the notes (`ButtonBase`).
+     * - `violation` — A line of a failed call's tooltip, one per violation (`span`).
+     * - `fullLabel` — The full text of a cut note, at the top of its tooltip (`span`).
+     */
+    readonly slots?: Partial<Record<AssistantToolChipsSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the row.
+     * - `activity` — Props for the frame of the turning icon.
+     * - `activityIcon` — Props for the turning icon.
+     * - `chip` — Props for each note.
+     * - `chipLabel` — Props for the text of each note.
+     * - `screenshotsLink` — Props for each screenshots label.
+     * - `undoButton` — Props for the Undo control.
+     * - `violation` — Props for each violation line.
+     * - `fullLabel` — Props for the full text of a cut note.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Activity]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.ActivityIcon]: Partial<PhxIconProps>;
+        readonly [Slots.Chip]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.ChipLabel]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.ScreenshotsLink]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.UndoButton]: ButtonBaseProps;
+        readonly [Slots.Violation]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.FullLabel]: HTMLAttributes<HTMLSpanElement>;
+    }>;
+}
 export interface AssistantToolChipsProps {
     readonly tools: readonly AssistantToolItem[];
     /** True while the reply runs and this row is its newest block: the assistant is at work on it. */
@@ -15,4 +86,15 @@ export interface AssistantToolChipsProps {
  * of the undo history the configuration is at, an Undo after the notes takes the row's changes
  * back, up to a change the user made in between.
  */
-export declare const AssistantToolChips: import("react").MemoExoticComponent<({ tools, isActive, canUndo, onUndo }: AssistantToolChipsProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const AssistantToolChips: import("react").MemoExoticComponent<(inProps: AssistantToolChipsProps & ThemeableAssistantToolChipsProps) => import("react/jsx-runtime").JSX.Element>;
+export interface AssistantActivityRowProps {
+    /** What the assistant is doing, said beside the turning icon. */
+    readonly label: ReactNode;
+}
+/**
+ * The assistant at work before it has a row of chips to show, such as while it thinks: the row's
+ * turning icon, in the place the icon of the first row of chips takes over. It is drawn with the
+ * slots of `PhxAssistantToolChips`, so it looks like the row that takes over from it.
+ */
+export declare const AssistantActivityRow: ({ label }: AssistantActivityRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{ButtonBase as i,ClickAwayListener as o,Tooltip as s,styled as a}from"@mui/material";import{memo as r,useCallback as l,useMemo as d,useRef as c,useState as m}from"react";import{match as p}from"ts-pattern";import{useLocalizable as h}from"#package/react-sdk";import{PhxIcon as u}from"#package/ui-sdk";import{assistantReferenceStyles as f}from"./reference-link/index.js";import{ScreenshotThumbnails as g,readToolScreenshots as k}from"./screenshots/index.js";import{AssistantPanelName as x}from"./theme.js";let y={id:"sdk.assistant.tool.updateDesign.label",message:"Update design"},b={id:"sdk.assistant.tool.readDesign.label",message:"Read design"},w={id:"sdk.assistant.tool.mistake.hint",message:"The assistant made a mistake."},v={id:"sdk.assistant.tool.cancelled.hint",message:"Stopped before it finished."},C={id:"sdk.assistant.tool.noResult.hint",message:"The result of this step was lost. It may or may not have been done."},I={id:"sdk.assistant.tool.toolBudget.hint",message:"Not done: the assistant reached its limit of steps for one message."},S={id:"sdk.assistant.tool.undo.label",message:"Undo"},D={id:"sdk.assistant.tool.screenshots.label",message:"{count, plural, one {# screenshot} other {# screenshots}}"},j=a("div",{name:x,slot:"chips"})(({theme:{palette:e,spacing:t,typography:n}})=>({...n.caption,alignItems:"start",color:e.text.secondary,display:"grid",gap:t(.75),gridTemplateColumns:"min-content minmax(0, 1fr)"})),z=a("span",{name:x,slot:"activity"})(({theme:{typography:e}})=>({blockSize:`calc(${e.caption.lineHeight} * 1em)`,display:"grid",placeItems:"center"})),A=a(u,{name:x,slot:"activityIcon"})({fontSize:14,'[data-chips="active"] &':{animation:"phx-assistant-turn 2.4s linear infinite","@media (prefers-reduced-motion: reduce)":{animation:"none"}},"@keyframes phx-assistant-turn":{to:{rotate:"360deg"}}}),T=a("span",{name:x,slot:"chip"})(({theme:{palette:e,spacing:t}})=>({cursor:"default",display:"inline-flex",maxInlineSize:"100%",verticalAlign:"top",whiteSpace:"nowrap","&:not(:last-of-type)::after":{color:e.text.secondary,content:'"\xb7"',flexShrink:0,marginInline:t(.75)}})),E=a("span",{name:x,slot:"screenshotsLink"})(f),L=a(i,{name:x,slot:"undoButton"})(({theme:{palette:e,shape:t,spacing:n}})=>({alignItems:"center",animation:"phx-assistant-undo-in 150ms ease-out",borderRadius:t.borderRadius,color:e.primary.main,display:"inline-flex",font:"inherit",gap:n(.5),marginInlineStart:n(1),verticalAlign:"top","&:hover":{textDecoration:"underline"},"@media (prefers-reduced-motion: reduce)":{animation:"none"},"@keyframes phx-assistant-undo-in":{from:{opacity:0}}})),R=a("span",{name:x,slot:"chipLabel"})(({theme:{palette:e}})=>({minInlineSize:0,overflow:"hidden",textOverflow:"ellipsis",'[data-chip="failed"] > &':{textDecoration:"line-through",textDecorationColor:e.error.main}})),P=a("span",{name:x,slot:"violation"})({display:"block"}),B=a("span",{name:x,slot:"fullLabel"})({display:"block"}),O=r(({tool:i})=>{let{chip:o,input:a,result:r}=i,d=h(y),u=h(b),f=h(w),g=h(v),k=h(C),x=h(I),S=c(null),[D,j]=m(!1),z=p(o.label).with({kind:"text"},({text:e})=>e).with({kind:"updateDesign"},()=>d).with({kind:"readDesign"},()=>u).exhaustive(),A=l(()=>{console.info(`Assistant tool call "${z}"`,{input:a,result:r})},[a,z,r]),E=l(()=>{let e=S.current;j(null!=e&&e.scrollWidth>e.clientWidth)},[]),L=p(o).with({errorCode:"cancelled"},()=>g).with({errorCode:"no_result"},()=>k).with({errorCode:"tool_budget"},()=>x).when(({violations:e})=>e.length>0,({violations:t})=>t.map((t,n)=>e(P,{children:t},n))).with({state:"failed"},()=>f).otherwise(()=>""),O=D?t(n,{children:[e(B,{children:z}),L]}):L;return e(s,{title:O,placement:"top-start",children:e(T,{onClick:A,onPointerEnter:E,"data-chip":o.state,children:e(R,{ref:S,children:z})})})}),U=r(({screenshots:t})=>{let n=h({...D,values:{count:t.length}}),[i,a]=m(!1),r=l(()=>a(!0),[]),d=l(()=>a(!1),[]),p=c(null),u=l(e=>{p.current=e},[]),f=l(()=>{p.current?.update()},[]),k=l(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),a(!0))},[]);return e(T,{"data-chip":"screenshots",children:e(o,{onClickAway:d,mouseEvent:!!i&&"onClick",touchEvent:!!i&&"onTouchEnd",children:e(s,{open:i,onOpen:r,onClose:d,title:e(g,{screenshots:t,onImageLoad:f}),placement:"top-start",describeChild:!0,disableTouchListener:!0,PopperProps:{popperRef:u},slotProps:{tooltip:{sx:{background:"none",maxInlineSize:"none",padding:0}}},children:e(E,{role:"button",tabIndex:0,"aria-expanded":i,onClick:r,onKeyDown:k,children:n})})})})}),W=({tool:i})=>{let o=d(()=>k(i.result),[i.result]);return t(n,{children:[e(O,{tool:i}),o.length>0&&e(U,{screenshots:o})]})};export const AssistantToolChips=r(({tools:n,isActive:i,canUndo:o,onUndo:s})=>{let a=h(S),r=l(()=>{s(new Set(n.map(({id:e})=>e)))},[s,n]);return t(j,{"data-chips":i?"active":"done","aria-busy":i,children:[e(z,{children:e(A,{name:"Gear"})}),t("div",{children:[n.map(t=>e(W,{tool:t},t.id)),o&&t(L,{onClick:r,children:[e(u,{name:"ArrowCounterClockwise",fontSize:"inherit"}),a]})]})]})});
+import{jsx as t,jsxs as e,Fragment as i}from"react/jsx-runtime";import{ButtonBase as o,Tooltip as n,styled as s,useThemeProps as a}from"@mui/material";import{memo as l,useCallback as r,useMemo as c,useRef as d,useState as h}from"react";import{match as m}from"ts-pattern";import{useLocalizable as p}from"#package/react-sdk";import{PhxIcon as u,hoverStyles as f}from"#package/ui-sdk";import{AssistantPopover as g}from"./popover/index.js";import{assistantReferenceStyles as v}from"./reference-link/index.js";import{ScreenshotThumbnails as y,readToolScreenshots as k}from"./screenshots/index.js";let b="PhxAssistantToolChips",x={id:"sdk.assistant.tool.updateDesign.label",message:"Update design"},w={id:"sdk.assistant.tool.readDesign.label",message:"Read design"},L={id:"sdk.assistant.tool.mistake.hint",message:"The assistant made a mistake."},C={id:"sdk.assistant.tool.cancelled.hint",message:"Stopped before it finished."},I={id:"sdk.assistant.tool.noResult.hint",message:"The result of this step was lost. It may or may not have been done."},A={id:"sdk.assistant.tool.toolBudget.hint",message:"Not done: the assistant reached its limit of steps for one message."},S={id:"sdk.assistant.tool.undo.label",message:"Undo"},D={id:"sdk.assistant.tool.screenshots.label",message:"{count, plural, one {# screenshot} other {# screenshots}}"},R=s("div",{name:b,slot:"root"})(({theme:{palette:t,spacing:e,typography:i}})=>({...i.caption,alignItems:"start",color:t.text.secondary,display:"grid",gap:e(.75),gridTemplateColumns:"min-content minmax(0, 1fr)"})),B=s("span",{name:b,slot:"activity"})(({theme:{typography:t}})=>({blockSize:`calc(${t.caption.lineHeight} * 1em)`,display:"grid",placeItems:"center"})),P=s(u,{name:b,slot:"activityIcon"})({fontSize:14,'[data-chips="active"] &':{animation:"phx-assistant-turn 2400ms linear infinite","@media (prefers-reduced-motion: reduce)":{animation:"none"}},"@keyframes phx-assistant-turn":{to:{rotate:"360deg"}}}),j={},z=t=>{let{slots:e={},slotProps:i=j}=a({props:t,name:b});return{slots:c(()=>({Root:e.root??R,Activity:e.activity??B,ActivityIcon:e.activityIcon??P,Chip:e.chip??U,ChipLabel:e.chipLabel??V,ScreenshotsLink:e.screenshotsLink??F,UndoButton:e.undoButton??$,Violation:e.violation??W,FullLabel:e.fullLabel??_}),[e.root,e.activity,e.activityIcon,e.chip,e.chipLabel,e.screenshotsLink,e.undoButton,e.violation,e.fullLabel]),slotProps:i}},T=({isActive:e,slots:i,slotProps:o})=>{let n=c(()=>e?-(performance.now()%2400):0,[e]);return t(i.ActivityIcon,{name:"Gear",...o.activityIcon,style:{...o.activityIcon?.style,animationDelay:`${n}ms`}})},U=s("span",{name:b,slot:"chip"})(({theme:{palette:t,spacing:e}})=>({cursor:"default",display:"inline-flex",maxInlineSize:"100%",verticalAlign:"top",whiteSpace:"nowrap","&:not(:last-of-type)::after":{color:t.text.secondary,content:'"\xb7"',flexShrink:0,marginInline:e(.75)}})),F=s("span",{name:b,slot:"screenshotsLink"})(v),$=s(o,{name:b,slot:"undoButton"})(({theme:{palette:t,shape:e,spacing:i}})=>({alignItems:"center",animation:"phx-assistant-undo-in 150ms ease-out",borderRadius:e.borderRadius,color:t.primary.main,display:"inline-flex",font:"inherit",gap:i(.5),marginInlineStart:i(1),verticalAlign:"top",...f({"&:hover":{textDecoration:"underline"}}),"@media (prefers-reduced-motion: reduce)":{animation:"none"},"@keyframes phx-assistant-undo-in":{from:{opacity:0}}})),V=s("span",{name:b,slot:"chipLabel"})(({theme:{palette:t}})=>({minInlineSize:0,overflow:"hidden",textOverflow:"ellipsis",'[data-chip="failed"] > &':{textDecoration:"line-through",textDecorationColor:t.error.main}})),W=s("span",{name:b,slot:"violation"})({display:"block"}),_=s("span",{name:b,slot:"fullLabel"})({display:"block"}),E=l(({tool:o,slots:s,slotProps:a})=>{let{chip:l,input:c,result:u}=o,f=p(x),g=p(w),v=p(L),y=p(C),k=p(I),b=p(A),S=d(null),[D,R]=h(!1),B=m(l.label).with({kind:"text"},({text:t})=>t).with({kind:"updateDesign"},()=>f).with({kind:"readDesign"},()=>g).exhaustive(),P=r(()=>{console.info(`Assistant tool call "${B}"`,{input:c,result:u})},[c,B,u]),j=r(()=>{let t=S.current;R(null!=t&&t.scrollWidth>t.clientWidth)},[]),z=m(l).with({errorCode:"cancelled"},()=>y).with({errorCode:"no_result"},()=>k).with({errorCode:"tool_budget"},()=>b).when(({violations:t})=>t.length>0,({violations:e})=>e.map((e,i)=>t(s.Violation,{...a.violation,children:e},i))).with({state:"failed"},()=>v).otherwise(()=>""),T=D?e(i,{children:[t(s.FullLabel,{...a.fullLabel,children:B}),z]}):z;return t(n,{title:T,placement:"top-start",children:t(s.Chip,{...a.chip,onClick:P,onPointerEnter:j,"data-chip":l.state,children:t(s.ChipLabel,{...a.chipLabel,ref:S,children:B})})})}),G=l(({screenshots:e,slots:i,slotProps:o})=>{let n=p({...D,values:{count:e.length}});return t(i.Chip,{...o.chip,"data-chip":"screenshots",children:t(g,{title:i=>t(y,{screenshots:e,onImageLoad:i}),children:e=>t(i.ScreenshotsLink,{...o.screenshotsLink,...e,children:n})})})}),H=({tool:o,slots:n,slotProps:s})=>{let a=c(()=>k(o.result),[o.result]);return e(i,{children:[t(E,{tool:o,slots:n,slotProps:s}),a.length>0&&t(G,{screenshots:a,slots:n,slotProps:s})]})};export const AssistantToolChips=l(i=>{let{tools:o,isActive:n,canUndo:s,onUndo:a,...l}=i,{slots:c,slotProps:d}=z(l),h=p(S),m=r(()=>{a(new Set(o.map(({id:t})=>t)))},[a,o]);return e(c.Root,{...d.root,"data-chips":n?"active":"done","aria-busy":n,children:[t(c.Activity,{...d.activity,children:t(T,{isActive:n,slots:c,slotProps:d})}),e("div",{children:[o.map(e=>t(H,{tool:e,slots:c,slotProps:d},e.id)),s&&e(c.UndoButton,{...d.undoButton,onClick:m,children:[t(u,{name:"ArrowCounterClockwise",fontSize:"inherit"}),h]})]})]})});export const AssistantActivityRow=({label:i})=>{let{slots:o,slotProps:n}=z({});return e(o.Root,{...n.root,"data-chips":"active","aria-busy":!0,children:[t(o.Activity,{...n.activity,children:t(T,{isActive:!0,slots:o,slotProps:n})}),t("div",{children:i})]})};

package/dist/configurator/ui/assistant/AssistantComposer.d.ts

@@ -1,7 +1,108 @@
+import type { ComponentsOverrides, IconButtonProps, InputBaseProps } from '@mui/material';
+import { type ElementType, type FormHTMLAttributes, type HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import { AssistantComposerName } from './composer/index.js';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [AssistantComposerName]: AssistantComposerSlots;
+    }
+    interface ComponentsPropsList {
+        [AssistantComposerName]: ThemeableAssistantComposerProps;
+    }
+    interface Components {
+        [AssistantComposerName]?: {
+            defaultProps?: ComponentsPropsList[typeof AssistantComposerName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof AssistantComposerName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly InputFrame: 'inputFrame';
+    readonly Attachments: 'attachments';
+    readonly Attachment: 'attachment';
+    readonly RemoveAttachment: 'removeAttachment';
+    readonly AnnotateAttachment: 'annotateAttachment';
+    readonly Input: 'input';
+    readonly ToolButton: 'toolButton';
+    readonly SendButton: 'sendButton';
+    readonly MicButton: 'micButton';
+    readonly RecordingBar: 'recordingBar';
+    readonly StopButton: 'stopButton';
+    readonly Hint: 'hint';
+    readonly AttachmentNotice: 'attachmentNotice';
+};
+type AssistantComposerSlots = ValueOf<typeof Slots>;
+export interface ThemeableAssistantComposerProps {
+    /**
+     * The components used for each slot inside the composer.
+     *
+     * - `root` — The composer (`form`).
+     * - `inputFrame` — The box around the input, its attachments and its buttons (`div`).
+     * - `attachments` — The row of attached images (`div`).
+     * - `attachment` — One attached image (`div`).
+     * - `removeAttachment` — The control that removes an attached image (`IconButton`).
+     * - `annotateAttachment` — The control that annotates an attached image in its place; none on an annotation (`IconButton`).
+     * - `input` — The message input (`InputBase`).
+     * - `toolButton` — The Attach and Annotate controls (`IconButton`).
+     * - `sendButton` — The Send control, of a message and of a recording (`IconButton`).
+     * - `micButton` — The control that records a voice message, in place of Send while the input is empty (`IconButton`).
+     * - `recordingBar` — The bar that stands in for the input while a voice message is recorded (`div`). It takes the
+     *   focus while it stands in, so Enter sends and Escape drops the recording: a replacement forwards its `ref` and
+     *   `tabIndex` to its element.
+     * - `stopButton` — The Stop control shown while a reply runs (`IconButton`).
+     * - `hint` — The disclaimer below the input (`div`).
+     * - `attachmentNotice` — The notice about an image that could not be attached, in place of the disclaimer (`div`).
+     */
+    readonly slots?: Partial<Record<AssistantComposerSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the composer.
+     * - `inputFrame` — Props for the box around the input.
+     * - `attachments` — Props for the row of attached images.
+     * - `attachment` — Props for each attached image.
+     * - `removeAttachment` — Props for each remove control.
+     * - `annotateAttachment` — Props for each annotate control.
+     * - `input` — Props for the message input.
+     * - `toolButton` — Props for the Attach and Annotate controls.
+     * - `sendButton` — Props for the Send control.
+     * - `micButton` — Props for the record control.
+     * - `recordingBar` — Props for the recording bar.
+     * - `stopButton` — Props for the Stop control.
+     * - `hint` — Props for the disclaimer.
+     * - `attachmentNotice` — Props for the attachment notice.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: FormHTMLAttributes<HTMLFormElement>;
+        readonly [Slots.InputFrame]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Attachments]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Attachment]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.RemoveAttachment]: IconButtonProps;
+        readonly [Slots.AnnotateAttachment]: IconButtonProps;
+        readonly [Slots.Input]: InputBaseProps;
+        readonly [Slots.ToolButton]: IconButtonProps;
+        readonly [Slots.SendButton]: IconButtonProps;
+        readonly [Slots.MicButton]: IconButtonProps;
+        readonly [Slots.RecordingBar]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.StopButton]: IconButtonProps;
+        readonly [Slots.Hint]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.AttachmentNotice]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
 /**
  * The message input of the panel. Enter sends and Shift+Enter adds a line. While a reply runs the
  * send control is a Stop control and the input stays editable, so the next message can be written.
  * A thread this session may not continue takes a message like any other: it is resumed first, with
  * the input read-only meanwhile, and the message stays in the input when that fails.
+ *
+ * Images are attached with the attach control, by pasting or by dropping files onto the composer,
+ * and shown as thumbnails that can be removed; the message, its attachments and their limit are
+ * `useAssistantComposer`'s.
+ *
+ * When the session takes voice messages, a mic stands in for Send while the input is empty. A
+ * recording replaces the input with a bar that can drop it, and Send sends it with the attachments.
+ * A microphone blocked for the page is crossed out, with a note where to allow it.
  */
-export declare const AssistantComposer: () => import("react/jsx-runtime").JSX.Element;
+export declare const AssistantComposer: (inProps: ThemeableAssistantComposerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as r}from"@lingui/react";import{IconButton as i,InputBase as o,Tooltip as t,styled as n}from"@mui/material";import{useCallback as s,useRef as l,useState as d}from"react";import{useEagerObservableSelector as m,useLocalizable as p}from"#package/react-sdk";import{PhxIcon as c,useResponsive as u}from"#package/ui-sdk";import{useConfigurator as g}from"../../application-runtime/index.js";import{AssistantPanelName as h}from"./theme.js";let b={id:"sdk.assistant.composer.placeholder",message:"Ask or tell me what to change…"},k={id:"sdk.assistant.composer.send.label",message:"Send"},f={id:"sdk.assistant.composer.stop.label",message:"Stop"},y=n("form",{name:h,slot:"composer"})(({theme:{palette:e,spacing:a}})=>({borderBlockStart:`1px solid ${e.divider}`,display:"grid",gap:a(.75),paddingBlock:a(1.25),paddingInline:`var(--phx-sidebar-padding, ${a(2)})`})),x=n("div",{name:h,slot:"inputFrame"})(({theme:{palette:e,spacing:a}})=>({alignItems:"flex-end",border:`1px solid ${e.divider}`,borderRadius:12,display:"flex",gap:a(1),paddingBlock:a(.5),paddingInline:`${a(1.5)} ${a(.5)}`,"&:focus-within":{borderColor:e.primary.main}})),v=n(o,{name:h,slot:"input"})(({theme:{spacing:e,typography:a}})=>({...a.body2,flex:1,paddingBlock:e(.75)})),R=n(i,{name:h,slot:"sendButton"})(({theme:{palette:e}})=>({background:e.primary.main,borderRadius:8,color:e.primary.contrastText,"&:hover":{background:e.primary.dark},"&.Mui-disabled":{background:e.action.disabledBackground,color:e.action.disabled}})),B=n(i,{name:h,slot:"stopButton"})(({theme:{palette:e}})=>({background:e.text.primary,borderRadius:8,color:e.background.paper,"&:hover":{background:e.text.secondary}})),C=n("span")({background:"currentColor",blockSize:10,borderRadius:2,inlineSize:10,margin:5}),S=n("div",{name:h,slot:"hint"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary}));export const AssistantComposer=()=>{let{assistantSystem:i}=g(),[o,n]=d(""),h=l(null),{isDesktop:w}=u(),I=p(b),$=p(k),j=p(f),{isReplying:z,isResuming:F}=m(i.chat$,e=>({isReplying:e.isLoading,isResuming:e.isResuming}),[]),A=o.trim(),D=!z&&!F&&A.length>0,P=s(async()=>{!D||(w||h.current?.blur(),await i.resume()&&(n(""),i.send(A)))},[i,D,A,w]),E=s(e=>{e.preventDefault(),P()},[P]),K=s(e=>{"Enter"!==e.key||e.shiftKey||e.nativeEvent.isComposing||(e.preventDefault(),P())},[P]),T=s(()=>{i.stop()},[i]);return a(y,{onSubmit:E,children:[a(x,{children:[e(v,{multiline:!0,maxRows:6,placeholder:I,value:o,readOnly:F,inputRef:h,onChange:e=>n(e.target.value),onKeyDown:K,onFocus:()=>i.setInputFocused(!0),onBlur:()=>i.setInputFocused(!1),inputProps:{"aria-label":I}}),z?e(t,{title:j,placement:"top",children:e(B,{size:"small","aria-label":j,onClick:T,children:e(C,{})})}):e(t,{title:$,placement:"top",children:e("span",{children:e(R,{type:"submit",size:"small","aria-label":$,disabled:!D,children:e(c,{name:"PaperPlaneRightBold",fontSize:"small"})})})})]}),e(S,{children:e(r,{id:"sdk.assistant.composer.disclaimer",message:"AI can be wrong. Check the result."})})]})};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Trans as a}from"@lingui/react";import{IconButton as n,Tooltip as o,styled as i,useThemeProps as s}from"@mui/material";import{useCallback as r,useEffect as l,useRef as d,useState as c}from"react";import{useLocalizable as m}from"#package/react-sdk";import{PhxIcon as p,hoverStyles as u,useResponsive as h}from"#package/ui-sdk";import{AnnotationBadge as g}from"./annotation/index.js";import{AssistantComposerName as b,ComposerField as f,ComposerFrame as k,ComposerInput as v,ComposerPrimaryButton as y,ComposerToolButton as S}from"./composer/index.js";import{useAssistantComposer as B}from"./use-assistant-composer.js";import{RecordingBar as x}from"./voice/index.js";let z={id:"sdk.assistant.composer.placeholder",message:"Ask or tell me what to change…"},D={id:"sdk.assistant.composer.send.label",message:"Send"},w={id:"sdk.assistant.composer.stop.label",message:"Stop"},A={id:"sdk.assistant.composer.attach.label",message:"Attach images"},C={id:"sdk.assistant.composer.annotate.label",message:"Annotate with drawings and comments"},E={id:"sdk.assistant.composer.attachment.remove",message:"Remove image"},R={id:"sdk.assistant.composer.attachment.annotate",message:"Annotate image"},P={id:"sdk.assistant.composer.annotation.remove",message:"Remove annotation"},T={id:"sdk.assistant.composer.attachment.unreadable",message:"Unsupported image format."},j={id:"sdk.assistant.composer.record.label",message:"Record a voice message"},M={id:"sdk.assistant.composer.recording.send",message:"Send voice message"},F={id:"sdk.assistant.composer.record.blocked",message:"Microphone access is blocked. Allow it in your browser's site settings."},N={id:"sdk.assistant.composer.attachment.limit",message:"You can attach up to {max} images."},I=i("form",{name:b,slot:"root"})(({theme:{palette:e,spacing:t}})=>({borderBlockStart:`1px solid ${e.divider}`,display:"grid",gap:t(.75),paddingBlock:t(1.25),paddingInline:`var(--phx-sidebar-padding, ${t(2)})`})),K=i("div",{name:b,slot:"attachments"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(1),gridColumn:"1 / -1",paddingBlockStart:e(.75)})),L=i("div")({cursor:"default",display:"flex",justifySelf:"start"}),$=i("div",{name:b,slot:"attachment"})(({theme:{palette:e,shape:t}})=>({blockSize:56,border:`1px solid ${e.divider}`,borderRadius:t.borderRadius,inlineSize:56,overflow:"hidden",position:"relative"})),O=i("img")({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),U=i(n,{name:b,slot:"removeAttachment"})(({theme:{palette:e}})=>({background:e.background.paper,insetBlockStart:2,insetInlineEnd:2,padding:2,position:"absolute","&:hover":{background:e.background.paper}})),W=i(n,{name:b,slot:"annotateAttachment"})(({theme:{palette:e}})=>({background:e.background.paper,insetBlockEnd:2,insetInlineStart:2,padding:2,position:"absolute","&:hover":{background:e.background.paper}})),q=i(n,{name:b,slot:"stopButton"})(({theme:{palette:e}})=>({background:e.text.primary,borderRadius:8,color:e.background.paper,padding:4,"&:hover":{background:e.text.primary},...u({"&:hover":{background:e.text.secondary}})})),H=i("span")({background:"currentColor",blockSize:10,borderRadius:2,inlineSize:10,margin:5}),X=i("div",{name:b,slot:"hint"})(({theme:{palette:e,typography:t}})=>({...t.caption,color:e.text.secondary})),Y=i("div",{name:b,slot:"attachmentNotice"})(({theme:{palette:e,typography:t}})=>({...t.caption,color:e.error.main})),G=i("input")({display:"none"}),J=i(y,{name:b,slot:"micButton"})(({theme:{palette:e}})=>({'&[data-blocked="true"], &[data-blocked="true"]:hover':{background:e.action.disabledBackground,color:e.text.secondary}}));export const AssistantComposer=n=>{let{slots:i={},slotProps:u={}}=s({props:n,name:b}),{draft:Q,setDraft:V,attachments:Z,addFiles:_,annotate:ee,annotateAttachment:et,removeAttachment:ea,notice:en,maxAttachments:eo,isBusy:ei,isPreparing:es,isLocked:er,isReplying:el,canSend:ed,send:ec,stop:em,inputFocusHandlers:ep,canRecord:eu,recording:eh,startRecording:eg,sendRecording:eb,cancelRecording:ef}=B(),[ek,ev]=c(!1),ey=d(null),eS=d(null),{isDesktop:eB}=h(),ex=m(z),ez=m(D),eD=m(w),ew=m(A),eA=m(C),eC=m(R),eE=m(E),eR=m(P),eP=m(T),eT=m({...N,values:{max:eo}}),ej=m(j),eM=m(M),eF=m(F),eN="recording"===eh.status||"recorded"===eh.status,eI=eu&&"refused"===eh.status,eK=r(async()=>{ed&&!eB&&ey.current?.blur(),await ec()},[ed,eB,ec]),eL=r(e=>{e.preventDefault(),eN?eb():eK()},[eN,eK,eb]);l(()=>{eB&&ey.current?.focus()},[]);let e$=d(null),eO=d(null),eU=d(eN);l(()=>{var e;let t,a=(e=e$.current,(t=e?.getRootNode())instanceof ShadowRoot?t.activeElement??(document.activeElement===document.body?null:document.activeElement):document.activeElement===document.body?null:document.activeElement),n=null===a||(e$.current?.contains(a)??!1);n&&eN&&!eO.current?.contains(a)?eO.current?.focus():n&&!eN&&eU.current&&eB&&ey.current?.focus(),eU.current=eN},[eN,ei,eB]);let eW=u.root?.onKeyDown,eq=r(e=>{if(eW?.(e),!e.defaultPrevented&&eN&&!e.nativeEvent.isComposing){if("Escape"===e.key){e.preventDefault(),e.stopPropagation(),ei||ef();return}"Enter"===e.key&&!(e.target instanceof HTMLButtonElement)&&(e.preventDefault(),e.repeat||ei||es||eb())}},[ef,eN,ei,es,eW,eb]),eH=r(e=>{"Enter"!==e.key||e.shiftKey||e.nativeEvent.isComposing||(e.preventDefault(),eK())},[eK]),eX=r(e=>{e.target===e.currentTarget&&(e.preventDefault(),ey.current?.focus())},[]),eY=r(e=>{let t=[...e.target.files??[]];e.target.value="",_(t)},[_]),eG=r(e=>{let t=[...e.clipboardData.files].filter(e=>e.type.startsWith("image/"));0!==t.length&&(e.preventDefault(),_(t))},[_]),eJ=r(e=>{!er&&e.dataTransfer.types.includes("Files")&&(e.preventDefault(),e.dataTransfer.dropEffect="copy",ev(!0))},[er]),eQ=r(e=>{e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget)||ev(!1)},[]),eV=r(e=>{er||0===e.dataTransfer.files.length||(e.preventDefault(),ev(!1),_([...e.dataTransfer.files]))},[_,er]),eZ=i.root??I,e_=i.inputFrame??k,e1=i.attachments??K,e0=i.attachment??$,e2=i.removeAttachment??U,e5=i.annotateAttachment??W,e6=i.input??v,e7=i.toolButton??S,e4=i.sendButton??y,e8=i.micButton??J,e3=i.stopButton??q,e9=i.hint??X,te=i.attachmentNotice??Y;return t(eZ,{...u.root,ref:e$,onSubmit:eL,onKeyDown:eq,onDragOver:eJ,onDragLeave:eQ,onDrop:eV,children:[t(e_,{...u.inputFrame,"data-dragging":ek,onMouseDown:eX,children:[Z.length>0&&e(e1,{...u.attachments,children:Z.map(a=>t(e0,{...u.attachment,children:[e(O,{src:a.previewUrl,alt:""}),a.isAnnotation?e(g,{count:a.pinCount}):e(e5,{size:"small","aria-label":eC,...u.annotateAttachment,disabled:ei||er,onClick:()=>void et(a.id),children:e(p,{name:"PencilSimpleLine",sx:{fontSize:12}})}),e(e2,{size:"small","aria-label":a.isAnnotation?eR:eE,...u.removeAttachment,disabled:ei,onClick:()=>ea(a.id),children:e(p,{name:"X",sx:{fontSize:12}})})]},a.id))}),eN?e(x,{ref:eO,slot:i.recordingBar,slotProps:u.recordingBar,isRecording:"recording"===eh.status,elapsedMs:eh.elapsedMs,level:eh.level,disabled:ei,onDiscard:ef}):e(f,{children:e(e6,{multiline:!0,maxRows:6,placeholder:ex,...u.input,inputProps:{...u.input?.inputProps,"aria-label":ex},value:Q,readOnly:ei,disabled:er,inputRef:ey,onChange:e=>V(e.target.value),onKeyDown:eH,onPaste:eG,onFocus:ep.onFocus,onBlur:ep.onBlur})}),t(L,{children:[e(o,{title:ew,placement:"top",children:e("span",{children:e(e7,{size:"small","aria-label":ew,...u.toolButton,disabled:ei||er,onClick:()=>eS.current?.click(),children:e(p,{name:"Paperclip",fontSize:"small"})})})}),e(o,{title:eA,placement:"top",children:e("span",{children:e(e7,{size:"small","aria-label":eA,...u.toolButton,disabled:ei||er,onClick:()=>void ee(),children:e(p,{name:"PencilSimpleLine",fontSize:"small"})})})})]}),e(G,{ref:eS,type:"file",accept:"image/*",multiple:!0,onChange:eY}),el?e(o,{title:eD,placement:"top",children:e(e3,{size:"small","aria-label":eD,...u.stopButton,onClick:em,children:e(H,{})})}):eN?e(o,{title:eM,placement:"top",children:e("span",{children:e(e4,{size:"small","aria-label":eM,...u.sendButton,type:"submit",disabled:ei||es,children:e(p,{name:"PaperPlaneRightBold",fontSize:"small"})})})}):eu&&!Q.trim()?e(o,{title:ej,placement:"top",children:e("span",{children:e(e8,{size:"small","aria-label":ej,...u.micButton,"data-blocked":eI,disabled:ei||"requesting"===eh.status,onClick:()=>void eg(),children:e(p,{name:eI?"MicrophoneSlash":"Microphone",fontSize:"small"})})})}):e(o,{title:ez,placement:"top",children:e("span",{children:e(e4,{size:"small","aria-label":ez,...u.sendButton,type:"submit",disabled:!ed,children:e(p,{name:"PaperPlaneRightBold",fontSize:"small"})})})})]}),en?e(te,{role:"status",...u.attachmentNotice,children:"limit"===en?eT:eP}):eI?e(te,{role:"status",...u.attachmentNotice,children:eF}):e(e9,{...u.hint,children:e(a,{id:"sdk.assistant.composer.disclaimer",message:"AI can be wrong. Check the result."})})]})};

package/dist/configurator/ui/assistant/AssistantMarkdown.d.ts

@@ -1,12 +1,46 @@
+import type { ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes } from 'react';
 import type { AssistantFormsVisibility } from './thread-items.js';
+declare const MuiComponentName: 'PhxAssistantMarkdown';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantMarkdownProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
 export interface AssistantMarkdownProps {
     readonly markdown: string;
     /** True while the text is still arriving, so markup the model has not finished is completed. */
     readonly isStreaming: boolean;
     readonly forms: AssistantFormsVisibility;
 }
+export interface ThemeableAssistantMarkdownProps {
+    /**
+     * The components used for each slot inside the assistant's text.
+     *
+     * - `root` — The block that holds the rendered Markdown (`div`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the block.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
 /**
- * Assistant text of the thread: Markdown with lists, tables, alerts, links, entity links, references, images, code and forms,
- * without a bubble. A form fence the model is still writing shows a placeholder.
+ * Assistant text of the thread: Markdown with lists, tables, alerts, links, entity links, references, images, code, forms
+ * and drawings, without a bubble. A form or drawing fence the model is still writing shows a placeholder.
  */
-export declare const AssistantMarkdown: import("react").MemoExoticComponent<({ markdown, isStreaming, forms }: AssistantMarkdownProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const AssistantMarkdown: import("react").MemoExoticComponent<(inProps: AssistantMarkdownProps & ThemeableAssistantMarkdownProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -1 +1 @@
-import{jsx as e,Fragment as r}from"react/jsx-runtime";import{styled as n}from"@mui/material";import{createContext as i,memo as o,useContext as t,useMemo as l}from"react";import a,{defaultUrlTransform as d}from"react-markdown";import m from"remark-gfm";import{AssistantAlert as s,isAlertKind as c,remarkAlerts as u}from"./alert/index.js";import{AssistantEntityLink as p}from"./entity-link/index.js";import{AssistantForm as h}from"./form/index.js";import{AssistantReferenceLink as f,isAssistantLinkHref as g,parseAssistantLinkTarget as k}from"./reference-link/index.js";import{AssistantImage as b}from"./resource-image/index.js";import{completeStreamedMarkdown as v,hasOpenFence as x}from"./streamed-markdown.js";import{AssistantPanelName as y}from"./theme.js";let j=n("div",{name:y,slot:"assistantMessage"})(({theme:{palette:e,shape:r,spacing:n,typography:i}})=>({overflowWrap:"anywhere","& > :first-child":{marginBlockStart:0},"& > :last-child":{marginBlockEnd:0},"p, ul, ol, pre, blockquote":{marginBlock:n(1)},"h1, h2, h3, h4, h5, h6":{...i.subtitle2,marginBlock:n(1.5,.5)},"ul, ol":{paddingInlineStart:n(2.5)},a:{color:e.primary.main},code:{background:e.action.hover,borderRadius:r.borderRadius/2,fontFamily:"ui-monospace, Menlo, monospace",fontSize:"0.9em",paddingInline:n(.5)},pre:{background:e.action.hover,borderRadius:r.borderRadius,overflowX:"auto",padding:n(1),code:{background:"none",padding:0}},blockquote:{borderInlineStart:`2px solid ${e.divider}`,color:e.text.secondary,marginInline:0,paddingInlineStart:n(1.5)},"th, td":{borderBlockEnd:`1px solid ${e.divider}`,padding:n(.5,1),textAlign:"start",verticalAlign:"top"}})),w=n("div")({overflowX:"auto",table:{borderCollapse:"collapse",inlineSize:"100%"}}),S=i({forms:"hidden",openFenceEnd:void 0,isStreaming:!1}),A=({source:r,end:n})=>{let{forms:i,openFenceEnd:o,isStreaming:l}=t(S);return"hidden"===i?null:null!=n&&n===o?l?e(h,{source:r,status:"writing"}):null:e(h,{source:r,status:"disabled"===i?"waiting":"ready"})},B={a:({node:n,children:i,href:o,...t})=>{if(null==o||!g(o))return e("a",{...t,href:o,target:"_blank",rel:"noopener noreferrer",children:i});let l=k(o);return null==l?e(r,{children:i}):"entity"===l.kind?e(p,{id:l.id,children:i}):e(f,{target:l,children:i})},blockquote:({node:r,children:n,...i})=>{let o=r?.properties.dataAlert;return c(o)?e(s,{kind:o,children:n}):e("blockquote",{...i,children:n})},img:({src:r,alt:n})=>e(b,{src:r,alt:n}),pre:({node:r,children:n,...i})=>{let o=(e=>{let[r]=e?.children??[];if(r?.type!=="element"||"code"!==r.tagName)return;let{className:n}=r.properties;if(Array.isArray(n)&&n.includes("language-form"))return r.children.map(e=>"text"===e.type?e.value:"").join("")})(r);return null==o?e("pre",{...i,children:n}):e(A,{source:o,end:r?.position?.end.offset})},table:({node:r,children:n,...i})=>e(w,{children:e("table",{...i,children:n})})},I=[m,u],q=e=>g(e)?e:d(e);export const AssistantMarkdown=o(({markdown:r,isStreaming:n,forms:i})=>{let o=n?v(r):r,t=x(r)?o.length:void 0,d=l(()=>({forms:i,openFenceEnd:t,isStreaming:n}),[i,t,n]);return e(j,{children:e(S.Provider,{value:d,children:e(a,{components:B,remarkPlugins:I,urlTransform:q,children:o})})})});
+import{jsx as r,Fragment as e}from"react/jsx-runtime";import{styled as n,useThemeProps as i}from"@mui/material";import{createContext as o,memo as t,useContext as l,useMemo as a}from"react";import d,{defaultUrlTransform as s}from"react-markdown";import c from"remark-gfm";import{AssistantAlert as m,isAlertKind as u,remarkAlerts as p}from"./alert/index.js";import{AssistantDrawing as f}from"./drawing/index.js";import{AssistantEntityLink as g}from"./entity-link/index.js";import{AssistantForm as h}from"./form/index.js";import{AssistantReferenceLink as k,isAssistantLinkHref as b,parseAssistantLinkTarget as v}from"./reference-link/index.js";import{AssistantImage as x,AssistantImageLinkScope as w}from"./resource-image/index.js";import{completeStreamedMarkdown as y,hasOpenFence as j,isCutOffFence as A}from"./streamed-markdown.js";let S="PhxAssistantMarkdown",B=n("div",{name:S,slot:"root"})(({theme:{palette:r,shape:e,spacing:n,typography:i}})=>({overflowWrap:"anywhere","& > :first-child":{marginBlockStart:0},"& > :last-child":{marginBlockEnd:0},"p, ul, ol, pre, blockquote":{marginBlock:n(1)},"h1, h2, h3, h4, h5, h6":{...i.subtitle2,marginBlock:n(1.5,.5)},"ul, ol":{paddingInlineStart:n(2.5)},a:{color:r.primary.main},code:{background:r.action.hover,borderRadius:e.borderRadius/2,fontFamily:"ui-monospace, Menlo, monospace",fontSize:"0.9em",paddingInline:n(.5)},pre:{background:r.action.hover,borderRadius:e.borderRadius,overflowX:"auto",padding:n(1),code:{background:"none",padding:0}},blockquote:{borderInlineStart:`2px solid ${r.divider}`,color:r.text.secondary,marginInline:0,paddingInlineStart:n(1.5)},"th, td":{borderBlockEnd:`1px solid ${r.divider}`,padding:n(.5,1),textAlign:"start",verticalAlign:"top"}})),I=n("div")({overflowX:"auto",table:{borderCollapse:"collapse",inlineSize:"100%"}}),q=o({forms:"hidden",text:"",openFenceEnd:void 0,isStreaming:!1}),R=["form","svg"],E=({fence:{start:r,end:e},writing:n,children:i})=>{let{text:o,openFenceEnd:t,isStreaming:a}=l(q);return a&&null!=e&&e===t?n:!a&&null!=r&&null!=e&&A(o,{start:r,end:e})?null:i},F=({fence:e})=>{let{forms:n}=l(q);return"hidden"===n?null:r(E,{fence:e,writing:r(h,{source:e.source,status:"writing"}),children:r(h,{source:e.source,status:"disabled"===n?"waiting":"ready"})})},M={a:({node:n,children:i,href:o,...t})=>{if(null==o||!b(o))return r("a",{...t,href:o,target:"_blank",rel:"noopener noreferrer",children:r(w,{children:i})});let l=v(o);return null==l?r(e,{children:i}):"entity"===l.kind?r(g,{id:l.id,children:r(w,{children:i})}):r(k,{target:l,children:r(w,{children:i})})},blockquote:({node:e,children:n,...i})=>{let o=e?.properties.dataAlert;return u(o)?r(m,{kind:o,children:n}):r("blockquote",{...i,children:n})},img:({src:e,alt:n})=>r(x,{src:e,alt:n}),pre:({node:e,children:n,...i})=>{let o=(r=>{let[e]=r?.children??[];if(e?.type!=="element"||"code"!==e.tagName)return;let{className:n}=e.properties,i=R.find(r=>Array.isArray(n)&&n.includes(`language-${r}`));if(void 0!==i)return{language:i,source:e.children.map(r=>"text"===r.type?r.value:"").join(""),start:r?.position?.start.offset,end:r?.position?.end.offset}})(e);return null==o?r("pre",{...i,children:n}):"form"===o.language?r(F,{fence:o}):r(E,{fence:o,writing:r(f,{source:o.source,status:"writing"}),children:r(f,{source:o.source,status:"ready"})})},table:({node:e,children:n,...i})=>r(I,{children:r("table",{...i,children:n})})},P=[c,p],$=r=>b(r)?r:s(r);export const AssistantMarkdown=t(e=>{let{markdown:n,isStreaming:o,forms:t,slots:l={},slotProps:s={}}=i({props:e,name:S}),c=o?y(n):n,m=o&&j(n)?c.length:void 0,u=a(()=>({forms:t,text:c,openFenceEnd:m,isStreaming:o}),[t,c,m,o]);return r(l.root??B,{...s.root,children:r(q.Provider,{value:u,children:r(d,{components:M,remarkPlugins:P,urlTransform:$,children:c})})})});

package/dist/configurator/ui/assistant/AssistantPanel.d.ts

@@ -1,11 +1,56 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ComponentType, ElementType, HTMLAttributes } from 'react';
+declare const MuiComponentName: 'PhxAssistantPanel';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantPanelProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
 /**
  * The attribute the panel carries on its root. The layouts key their styles on it: what the panel
  * covers is hidden, and a sidebar shorter than its slot is stretched to the height the panel needs.
  */
 export declare const ASSISTANT_PANEL_SLOT = "slot[assistant]";
+export interface ThemeableAssistantPanelProps {
+    /**
+     * The components used for each slot inside the panel.
+     *
+     * - `root` — The panel's shell (`section`), which covers the sidebar it is rendered in.
+     * - `header` — The title and the close control. Takes no props; a replacement closes the panel with `useAssistantPanel`.
+     * - `thread` — The conversation. Takes no props; a replacement reads it with `useAssistantThread`.
+     * - `composer` — The message input. Takes no props; a replacement writes and sends with `useAssistantComposer`.
+     */
+    readonly slots?: Partial<{
+        readonly root: ElementType;
+        readonly header: ComponentType;
+        readonly thread: ComponentType;
+        readonly composer: ComponentType;
+    }>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the panel's shell.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLElement>;
+    }>;
+}
 /**
  * The built-in assistant panel: a header with the title and a close control, the thread and the
  * composer. It covers the sidebar it is rendered in, and renders nothing while it is closed or when
  * the application spec has no `assistant` section.
+ *
+ * The shell stays the panel's whatever its slots are: it carries the attribute the layouts hide and
+ * stretch the sidebar by, and it keeps the input's focus on a press of a control.
  */
-export declare const AssistantPanel: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const AssistantPanel: (inProps: ThemeableAssistantPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};