@salsita-ai/sdk 0.50.0-develop.0b28d3ba99 → 0.50.0-develop.0d2418cc3b

package/dist/configurator/ui/assistant/annotation/prefers-reduced-motion.d.ts

@@ -0,0 +1,2 @@
+/** True when the user asked the system for less motion: the overlay then appears and goes at once. */
+export declare const prefersReducedMotion: () => boolean;

package/dist/configurator/ui/assistant/annotation/prefers-reduced-motion.js

@@ -0,0 +1 @@
+export const prefersReducedMotion=()=>globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches===!0;

package/dist/configurator/ui/assistant/annotation/use-end-on-unmount.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Runs `end` once the component is gone for good, so an overlay that is removed without being closed
+ * still ends. StrictMode unmounts and mounts a component again at once in development, so the end
+ * waits a task and is dropped when the component mounted again meanwhile.
+ */
+export declare const useEndOnUnmount: (end: () => void) => void;

package/dist/configurator/ui/assistant/annotation/use-end-on-unmount.js

@@ -0,0 +1 @@
+import{useEffect as r,useRef as t}from"react";export const useEndOnUnmount=e=>{let n=t(e),u=t(!1);n.current=e,r(()=>(u.current=!0,()=>{u.current=!1,setTimeout(()=>{u.current||n.current()})}),[])};

package/dist/configurator/ui/assistant/assistant-failure.d.ts

@@ -2,17 +2,27 @@
  * What the panel tells the user when the assistant failed:
  * - `notAvailable`: the server refuses this configuration or customer, and asking again will not help
  * - `busy`: the server is still answering an earlier message of this thread
+ * - `resting`: the assistant has used up its hourly allowance, and the message may be sent again later
+ * - `exhausted`: the assistant has used up its monthly allowance, and sending again will not help this month
+ * - `locked`: the assistant banned the user on this configuration for misuse, and sending again will not help
  * - `unavailable`: anything else, including a dropped connection and a reply that broke off
  */
-export type AssistantFailureKind = 'notAvailable' | 'busy' | 'unavailable';
-export interface AssistantFailure {
-    readonly kind: AssistantFailureKind;
+export type AssistantFailureKind = 'notAvailable' | 'busy' | 'resting' | 'exhausted' | 'locked' | 'unavailable';
+export type AssistantFailure = {
+    readonly kind: Exclude<AssistantFailureKind, 'resting'>;
     /** True when loading the thread again may help, so the panel offers "Try again". */
     readonly canRetry: boolean;
-}
+} | {
+    readonly kind: 'resting';
+    readonly canRetry: false;
+    /** How long until the message may be sent again, rounded up to whole minutes. */
+    readonly minutes: number;
+};
 /**
  * Maps a failed assistant request to what the panel shows, by the HTTP status the server answered
- * with. A failure without a status never reached the server or broke off mid-reply; it gets the same
- * generic message as an unknown status, because the chat client does not tell those apart.
+ * with and the seconds it asked to wait. A failure without a status never reached the server or broke
+ * off mid-reply; it gets the same generic message as an unknown status, because the chat client does
+ * not tell those apart. A ban the server reported overrides the status: the thread read reports it
+ * without failing.
  */
-export declare const describeAssistantFailure: (failedStatus: number | undefined) => AssistantFailure;
+export declare const describeAssistantFailure: (failedStatus: number | undefined, retryAfterSeconds: number | undefined, isLocked: boolean) => AssistantFailure;

package/dist/configurator/ui/assistant/assistant-failure.js

@@ -1 +1 @@
-export const describeAssistantFailure=a=>403===a?{kind:"notAvailable",canRetry:!1}:409===a?{kind:"busy",canRetry:!0}:{kind:"unavailable",canRetry:!0};
+export const describeAssistantFailure=(e,n,a)=>a?{kind:"locked",canRetry:!1}:403===e?{kind:"notAvailable",canRetry:!1}:409===e?{kind:"busy",canRetry:!0}:429===e&&void 0!==n?{kind:"resting",canRetry:!1,minutes:Math.max(1,Math.ceil(n/60))}:429===e?{kind:"exhausted",canRetry:!1}:{kind:"unavailable",canRetry:!0};

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

@@ -0,0 +1,63 @@
+import type { ButtonBaseProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+declare const MuiComponentName: 'PhxAssistantMessageImages';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: MessageImagesSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantMessageImagesProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Image: 'image';
+};
+type MessageImagesSlots = ValueOf<typeof Slots>;
+/**
+ * A thumbnail of a picture the user attached to a message, as the bubble shows it. The thumbnails
+ * of the message's annotations are drawn with it too, so its style overrides reach both.
+ */
+export declare const MessageThumbnail: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, "LinkComponent" | "TouchRippleProps" | "action" | "centerRipple" | "children" | "className" | "classes" | "disableRipple" | "disableTouchRipple" | "disabled" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "style" | "sx" | "tabIndex" | "touchRippleRef">, "LinkComponent" | "TouchRippleProps" | "about" | "accessKey" | "action" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "centerRipple" | "children" | "className" | "classes" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disableRipple" | "disableTouchRipple" | "disabled" | "draggable" | "enterKeyHint" | "focusRipple" | "focusVisibleClassName" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "hidden" | "id" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onFocusVisible" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onResize" | "onResizeCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "sx" | "tabIndex" | "title" | "touchRippleRef" | "translate" | "type" | "typeof" | "unselectable" | "value" | "vocab"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const MessageThumbnailPicture: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export interface ThemeableAssistantMessageImagesProps {
+    /**
+     * The components used for each slot inside the images of a user's message.
+     *
+     * - `root` — The row of thumbnails (`div`).
+     * - `image` — One thumbnail, which shows the picture larger on a click (`ButtonBase`).
+     */
+    readonly slots?: Partial<Record<MessageImagesSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the row of thumbnails.
+     * - `image` — Props for each thumbnail.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Image]: ButtonBaseProps;
+    }>;
+}
+interface MessageImagesProps extends ThemeableAssistantMessageImagesProps {
+    /** The images the user attached to the message, by the ids it references them by. */
+    readonly imageIds: readonly string[];
+    /** More thumbnails of the message, after its images, such as its annotations. */
+    readonly children?: ReactNode;
+}
+/**
+ * The images a user attached to a message, as thumbnails above its text. They are read from the
+ * server as soon as the bubble shows, through the same per-configuration cache as the screenshots;
+ * a click shows one larger in a popover.
+ */
+export declare const MessageImages: (inProps: MessageImagesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * Theme component name of the composer. Its frame, input and buttons below are its slots, and they
+ * are shared with an annotation comment, which looks like the composer: their style overrides reach both.
+ */
+export declare const AssistantComposerName: 'PhxAssistantComposer';
+/**
+ * The box that looks like the input, of the composer and of an annotation comment: the input on top across its
+ * whole width, so the buttons take none of it from a long text, and a thin row of buttons below. A click on its
+ * empty space is meant to type into the input.
+ */
+export declare const ComposerFrame: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ComposerToolButton: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, "LinkComponent" | "TouchRippleProps" | "action" | "centerRipple" | "children" | "className" | "classes" | "color" | "disableFocusRipple" | "disableRipple" | "disableTouchRipple" | "disabled" | "edge" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "size" | "style" | "sx" | "tabIndex" | "touchRippleRef" | "variant">, "LinkComponent" | "TouchRippleProps" | "about" | "accessKey" | "action" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "centerRipple" | "children" | "className" | "classes" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disableFocusRipple" | "disableRipple" | "disableTouchRipple" | "disabled" | "draggable" | "edge" | "enterKeyHint" | "focusRipple" | "focusVisibleClassName" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "hidden" | "id" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onFocusVisible" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onResize" | "onResizeCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "size" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "sx" | "tabIndex" | "title" | "touchRippleRef" | "translate" | "type" | "typeof" | "unselectable" | "value" | "variant" | "vocab"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ComposerField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ComposerInput: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").InputBaseProps, keyof import("@mui/material").InputBaseProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+/** The button that sends what was typed. */
+export declare const ComposerPrimaryButton: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, "LinkComponent" | "TouchRippleProps" | "action" | "centerRipple" | "children" | "className" | "classes" | "color" | "disableFocusRipple" | "disableRipple" | "disableTouchRipple" | "disabled" | "edge" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "size" | "style" | "sx" | "tabIndex" | "touchRippleRef" | "variant">, "LinkComponent" | "TouchRippleProps" | "about" | "accessKey" | "action" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "centerRipple" | "children" | "className" | "classes" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disableFocusRipple" | "disableRipple" | "disableTouchRipple" | "disabled" | "draggable" | "edge" | "enterKeyHint" | "focusRipple" | "focusVisibleClassName" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "hidden" | "id" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onFocusVisible" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onResize" | "onResizeCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "size" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "sx" | "tabIndex" | "title" | "touchRippleRef" | "translate" | "type" | "typeof" | "unselectable" | "value" | "variant" | "vocab"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1 @@
+import{IconButton as o,InputBase as r,styled as e}from"@mui/material";import{hoverStyles as a}from"#package/ui-sdk";export const AssistantComposerName="PhxAssistantComposer";export const ComposerFrame=e("div",{name:AssistantComposerName,slot:"inputFrame"})(({theme:{palette:o,spacing:r}})=>({alignItems:"center",border:`1px solid ${o.divider}`,borderRadius:12,cursor:"text",display:"grid",gridTemplateColumns:"minmax(0, 1fr) auto",padding:r(.5),'&:focus-within, &[data-dragging="true"]':{borderColor:o.primary.main}}));export const ComposerToolButton=e(o,{name:AssistantComposerName,slot:"toolButton"})(({theme:{palette:o}})=>({background:"transparent",border:"none",borderRadius:8,boxShadow:"none",color:o.text.secondary,padding:4,"&:hover":{background:"transparent"},...a({"&:hover":{background:o.action.hover,color:o.text.primary}}),"&.Mui-disabled":{background:"transparent",color:o.action.disabled}}));export const ComposerField=e("div")({display:"grid",gridColumn:"1 / -1",minInlineSize:0});export const ComposerInput=e(r,{name:AssistantComposerName,slot:"input"})(({theme:{spacing:o,typography:r}})=>({...r.body2,flex:1,paddingBlock:o(.5),paddingInline:o(.75)}));export const ComposerPrimaryButton=e(o,{name:AssistantComposerName,slot:"sendButton"})(({theme:{palette:o}})=>({background:o.primary.main,borderRadius:8,color:o.primary.contrastText,padding:4,"&:hover":{background:o.primary.main},...a({"&:hover":{background:o.primary.dark}}),"&.Mui-disabled":{background:o.action.disabledBackground,color:o.action.disabled}}));

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

@@ -0,0 +1 @@
+export { AssistantComposerName, ComposerField, ComposerFrame, ComposerInput, ComposerPrimaryButton, ComposerToolButton, } from './composer-frame.js';

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

@@ -0,0 +1 @@
+export{AssistantComposerName,ComposerField,ComposerFrame,ComposerInput,ComposerPrimaryButton,ComposerToolButton}from"./composer-frame.js";

package/dist/configurator/ui/assistant/entity-link/AssistantEntityLink.d.ts

@@ -1,5 +1,38 @@
-import { type ReactNode } from 'react';
+import type { ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
 import { type DomainEntityId } from '#package/domain';
+declare const MuiComponentName: 'PhxAssistantEntityLink';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantEntityLinkProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+/** The slots of a link to an entity in a reply. Read from the theme only. */
+export interface ThemeableAssistantEntityLinkProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The name of the entity, with its state in `data-entity-link`, `data-selected` and `data-hovered` (`span`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the name.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLSpanElement>;
+    }>;
+}
 export interface AssistantEntityLinkProps {
     readonly id: DomainEntityId<string>;
     /** The text the assistant gave the link; the id itself is never shown. */
@@ -11,3 +44,4 @@ export interface AssistantEntityLinkProps {
  * selected or hovered in the scene, and it is muted once the entity is gone.
  */
 export declare const AssistantEntityLink: import("react").MemoExoticComponent<({ id, children }: AssistantEntityLinkProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

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

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

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

@@ -1,2 +1,2 @@
-export { AssistantEntityLink } from './AssistantEntityLink.js';
-export { EntityLinkSelectionProvider, useCreateEntityLinkSelection } from './entity-link-selection.js';
+export { AssistantEntityLink, type ThemeableAssistantEntityLinkProps } from './AssistantEntityLink.js';
+export { EntityLinkSelectionProvider, type EntityLinkSelectionProviderProps, type EntityLinkSelection, useCreateEntityLinkSelection, } from './entity-link-selection.js';

package/dist/configurator/ui/assistant/form/AssistantForm.d.ts

@@ -1,9 +1,65 @@
+import type { ButtonProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import { type AssistantBuiltInFormSlots } from './built-in-form-slots.js';
+declare const MuiComponentName: 'PhxAssistantForm';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: AssistantFormSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
 /**
  * Where a form stands in its reply: still being written, written while the reply goes on, or ready
  * for the user once the reply has ended.
  */
 export type AssistantFormStatus = 'writing' | 'waiting' | 'ready';
-export interface AssistantFormProps {
+declare const Slots: {
+    readonly Root: 'root';
+    readonly SubmitButton: 'submitButton';
+    readonly FixButton: 'fixButton';
+    readonly Note: 'note';
+};
+type AssistantFormSlots = ValueOf<typeof Slots>;
+export interface ThemeableAssistantFormProps {
+    /**
+     * The components used for each slot inside a form the assistant wrote.
+     *
+     * Element slots:
+     * - `root` — The form (`div`).
+     * - `submitButton` — The Submit control of a form that asks more than one question (`Button`).
+     * - `fixButton` — The control that asks the assistant to fix a form it could not build (`Button`).
+     * - `note` — The note shown while a form is written, or when it could not be built (`div`).
+     *
+     * Component slots, one per built-in form element, each given that element's props:
+     * `group`, `choice`, `choices`, `reply`, `card`, `swatch`, `text`, `number` and `confirm`.
+     * The project's own form elements are registered with `createAssistantFormElement` instead.
+     */
+    readonly slots?: Partial<Record<AssistantFormSlots, ElementType>> & AssistantBuiltInFormSlots;
+    /**
+     * Props applied to each element slot.
+     *
+     * - `root` — Props for the form.
+     * - `submitButton` — Props for the Submit control.
+     * - `fixButton` — Props for the Fix control.
+     * - `note` — Props for the note.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.SubmitButton]: ButtonProps;
+        readonly [Slots.FixButton]: ButtonProps;
+        readonly [Slots.Note]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+export interface AssistantFormProps extends ThemeableAssistantFormProps {
     /** The markup inside the ```` ```form ```` fence. */
     readonly source: string;
     readonly status: AssistantFormStatus;
@@ -16,4 +72,5 @@ export interface AssistantFormProps {
  * The state lives here, so unfinished input is lost when the form unmounts: accepted, because a
  * form is shown only in the last reply of the thread.
  */
-export declare const AssistantForm: import("react").MemoExoticComponent<({ source, status }: AssistantFormProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const AssistantForm: import("react").MemoExoticComponent<(inProps: AssistantFormProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};

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

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

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import { type AssistantBuiltInFormElementName } from '#package/domain';
+import { type BuiltInFormElementProps, type FormElementDefinition } from './registry/index.js';
+/**
+ * The components a form renders its built-in elements with in place of the SDK's, one per element
+ * name, each given the props of that element. An element left out keeps its built-in component.
+ */
+export type AssistantBuiltInFormSlots = {
+    readonly [NAME in AssistantBuiltInFormElementName]?: (props: BuiltInFormElementProps<NAME>) => ReactNode;
+};
+/**
+ * The definitions of the built-in elements a form renders with another component, by name. The
+ * registry is left as it is: a project element can never take a built-in's name, so a node whose
+ * element has one of these names is that built-in.
+ */
+export declare const createBuiltInFormSlotDefinitions: (slots: AssistantBuiltInFormSlots) => ReadonlyMap<string, FormElementDefinition>;

package/dist/configurator/ui/assistant/form/built-in-form-slots.js

@@ -0,0 +1 @@
+import{ASSISTANT_BUILT_IN_FORM_ELEMENTS as e}from"#package/domain";import{createFormElementDefinition as t}from"./registry/index.js";export const createBuiltInFormSlotDefinitions=r=>new Map(e.flatMap(e=>{let n=r[e.name];return n?[[e.name,t(e,n)]]:[]}));

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

@@ -1,4 +1,5 @@
 export { AssistantForm } from './AssistantForm.js';
-export type { AssistantFormStatus } from './AssistantForm.js';
+export type { AssistantFormStatus, ThemeableAssistantFormProps } from './AssistantForm.js';
+export type { AssistantBuiltInFormSlots } from './built-in-form-slots.js';
 export type { AssistantFormElementRoleProps, AssistantFormElementType, CreateAssistantFormElement, } from './registry/index.js';
 export { createAssistantFormElementFactory } from './registry/index.js';

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

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

package/dist/configurator/ui/assistant/form/registry/index.d.ts

@@ -1,4 +1,4 @@
-export { BUILT_IN_FORM_ELEMENTS } from './built-in-form-elements.js';
+export { BUILT_IN_FORM_ELEMENTS, type BuiltInFormElementProps } from './built-in-form-elements.js';
 export type { AssistantFormElementRoleProps, AssistantFormElementType, CreateAssistantFormElement, } from './create-assistant-form-element.js';
 export { createAssistantFormElementFactory } from './create-assistant-form-element.js';
 export { type FormElementDefinition, createFormElementDefinition } from './form-element-definition.js';

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

@@ -1,6 +1,65 @@
+import type { ComponentsOverrides } from '@mui/material';
+import { type ButtonHTMLAttributes, type ElementType, type HTMLAttributes, type ImgHTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
 import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormOptionProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormCard';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormCardSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormCardProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Image: 'image';
+    readonly Label: 'label';
+    readonly Description: 'description';
+    readonly Check: 'check';
+};
+type FormCardSlots = ValueOf<typeof Slots>;
 type FormCardProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'card'>>;
+/**
+ * The slots of a form `card`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormCardProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The card (`button`).
+     * - `image` — The picture on top (`img`).
+     * - `label` — The label (`span`).
+     * - `description` — The description (`span`).
+     * - `check` — The check mark of a picked card (`span`).
+     */
+    readonly slots?: Partial<Record<FormCardSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the card.
+     * - `image` — Props for the picture.
+     * - `label` — Props for the label.
+     * - `description` — Props for the description.
+     * - `check` — Props for the check mark.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: ButtonHTMLAttributes<HTMLButtonElement>;
+        readonly [Slots.Image]: ImgHTMLAttributes<HTMLImageElement>;
+        readonly [Slots.Label]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.Description]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.Check]: HTMLAttributes<HTMLSpanElement>;
+    }>;
+}
 /**
  * A `card`: a tile with its picture on top, then its label and description, outlined and checked
  * while it is picked. A picture that is not a resource path or fails to load is left out.

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

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{styled as i}from"@mui/material";import{useCallback as o,useState as t}from"react";import{PhxIcon as a}from"#package/ui-sdk";import{useResourceImageUrl as n}from"../resource-image/index.js";import{AssistantPanelName as d}from"../theme.js";let l=i("button",{name:d,slot:"formCard"})(({theme:{palette:e,shape:r,spacing:i}})=>({alignContent:"start",background:e.background.paper,border:`1px solid ${e.divider}`,borderRadius:r.borderRadius,color:e.text.primary,cursor:"pointer",display:"grid",flex:"1 1 140px",font:"inherit",gap:i(.25),margin:0,maxInlineSize:220,padding:i(.75),position:"relative",textAlign:"start","&:hover:not(:disabled)":{background:e.action.hover},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:1},"&:disabled":{color:e.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{borderColor:e.primary.main,boxShadow:`inset 0 0 0 1px ${e.primary.main}`}})),s=i("img",{name:d,slot:"formCardImage"})(({theme:{shape:e,spacing:r}})=>({aspectRatio:"4 / 3",borderRadius:e.borderRadius,display:"block",inlineSize:"100%",marginBlockEnd:r(.5),objectFit:"contain"})),m=i("span",{name:d,slot:"formCardLabel"})(({theme:{typography:e}})=>({...e.body2,fontWeight:e.fontWeightMedium})),p=i("span",{name:d,slot:"formCardDescription"})(({theme:{palette:e,typography:r}})=>({...r.caption,color:e.text.secondary})),c=i("span",{name:d,slot:"formCardCheck"})(({theme:{palette:e,spacing:r}})=>({alignItems:"center",background:e.primary.main,borderRadius:"50%",color:e.primary.contrastText,display:"flex",fontSize:14,insetBlockStart:r(.5),insetInlineEnd:r(.5),justifyContent:"center",padding:2,position:"absolute"}));export const FormCard=({attributes:i,label:d,disabled:u,selected:b,onSelect:f})=>{let{value:g,image:h}=i,x=[d,g].find(Boolean),y=""===i.description?void 0:i.description,k=n()(h),[C,j]=t(),v=o(()=>{j(k)},[k]);return r(l,{type:"button","aria-label":null==x&&null==y?h:void 0,disabled:u,"aria-pressed":b,onClick:()=>f([g,d,y,h].find(Boolean)??""),children:[null!=k&&k!==C&&e(s,{src:k,alt:"",loading:"lazy",onError:v}),null!=x&&e(m,{children:x}),null!=y&&e(p,{children:y}),b&&e(c,{"aria-hidden":!0,children:e(a,{name:"Check",fontSize:"inherit"})})]})};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{styled as r,useThemeProps as o}from"@mui/material";import{useCallback as t,useState as a}from"react";import{PhxIcon as n}from"#package/ui-sdk";import{useResourceImageUrl as l}from"../resource-image/index.js";let d="PhxAssistantFormCard",s=r("button",{name:d,slot:"root"})(({theme:{palette:e,shape:i,spacing:r}})=>({alignContent:"start",background:e.background.paper,border:`1px solid ${e.divider}`,borderRadius:i.borderRadius,color:e.text.primary,cursor:"pointer",display:"grid",flex:"1 1 140px",font:"inherit",gap:r(.25),margin:0,maxInlineSize:220,padding:r(.75),position:"relative",textAlign:"start","&:hover:not(:disabled)":{background:e.action.hover},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:1},"&:disabled":{color:e.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{borderColor:e.primary.main,boxShadow:`inset 0 0 0 1px ${e.primary.main}`}})),m=r("img",{name:d,slot:"image"})(({theme:{shape:e,spacing:i}})=>({aspectRatio:"4 / 3",borderRadius:e.borderRadius,display:"block",inlineSize:"100%",marginBlockEnd:i(.5),objectFit:"contain"})),c=r("span",{name:d,slot:"label"})(({theme:{typography:e}})=>({...e.body2,fontWeight:e.fontWeightMedium})),p=r("span",{name:d,slot:"description"})(({theme:{palette:e,typography:i}})=>({...i.caption,color:e.text.secondary})),u=r("span",{name:d,slot:"check"})(({theme:{palette:e,spacing:i}})=>({alignItems:"center",background:e.primary.main,borderRadius:"50%",color:e.primary.contrastText,display:"flex",fontSize:14,insetBlockStart:i(.5),insetInlineEnd:i(.5),justifyContent:"center",padding:2,position:"absolute"})),b={};export const FormCard=({attributes:r,label:g,disabled:h,selected:f,onSelect:x})=>{let{value:k,image:y}=r,v=[g,k].find(Boolean),C=""===r.description?void 0:r.description,j=l()(y),[R,S]=a(),{slots:z={},slotProps:B={}}=o({props:b,name:d}),E=t(()=>{S(j)},[j]),F=z.root??s,I=z.image??m,$=z.label??c,A=z.description??p,W=z.check??u;return i(F,{...B.root,type:"button","aria-label":null==v&&null==C?y:void 0,disabled:h,"aria-pressed":f,onClick:()=>x([k,g,C,y].find(Boolean)??""),children:[null!=j&&j!==R&&e(I,{loading:"lazy",...B.image,src:j,alt:"",onError:E}),null!=v&&e($,{...B.label,children:v}),null!=C&&e(A,{...B.description,children:C}),f&&e(W,{"aria-hidden":!0,...B.check,children:e(n,{name:"Check",fontSize:"inherit"})})]})};