@salsita-ai/sdk 0.50.0-develop.ae9a830ef0 → 0.50.0-develop.aec0f535bf

package/dist/configurator/ui/assistant/form/form-model.d.ts

@@ -0,0 +1,37 @@
+import type { FormElementDefinition } from './registry/index.js';
+/**
+ * An element of a parsed form. Options outside a `choice` or `choices` are already wrapped in an
+ * implicit container, and the top level of the block is an implicit group without a label.
+ */
+export interface FormNode {
+    /** Unique within its block: the element's position in the markup, or what an implicit container wraps. */
+    readonly id: string;
+    readonly definition: FormElementDefinition;
+    readonly label?: string;
+    readonly attributes: Readonly<Record<string, unknown>>;
+    readonly children: readonly FormNode[];
+}
+/** Why an element made its block unbuildable, named by its tag and its label or its position in the block. */
+export interface FormBuildError {
+    readonly element: string;
+    readonly label?: string;
+    /** The element's place in the block, counting elements in document order from 1. */
+    readonly position: number;
+    readonly message: string;
+}
+/**
+ * A form fence as the panel renders it, or every reason it cannot. A quick form asks one question,
+ * a choice or a quick input: the first pick or action sends it, and it has no submit button.
+ */
+export type FormModel = {
+    readonly ok: true;
+    readonly root: FormNode;
+    readonly isQuick: boolean;
+} | {
+    readonly ok: false;
+    readonly errors: readonly FormBuildError[];
+};
+/** A form that could be built. */
+export type BuiltFormModel = Extract<FormModel, {
+    readonly ok: true;
+}>;

package/dist/configurator/ui/assistant/form/form-model.js

@@ -0,0 +1 @@
+export{};

package/dist/configurator/ui/assistant/form/form-state.d.ts

@@ -0,0 +1,4 @@
+/** What the user did in a form, by node id: `true` for a picked option, the input's own state for an input. */
+export type FormState = ReadonlyMap<string, unknown>;
+/** The answer text each option or input reported, by node id; one that never reported is missing. */
+export type FormAnswers = ReadonlyMap<string, string | undefined>;

package/dist/configurator/ui/assistant/form/form-state.js

@@ -0,0 +1 @@
+export{};

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

@@ -0,0 +1,5 @@
+export { AssistantForm } 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/index.js

@@ -0,0 +1 @@
+export{AssistantForm}from"./AssistantForm.js";export{createAssistantFormElementFactory}from"./registry/index.js";

package/dist/configurator/ui/assistant/form/parse-form-block.d.ts

@@ -0,0 +1,10 @@
+import type { FormModel } from './form-model.js';
+import type { FormRegistry } from './registry/index.js';
+/**
+ * Builds a form from the markup of a ```` ```form ```` fence. A block whose only content is loose
+ * options asks one question, so they form an implicit `choice`; elsewhere loose options form an
+ * implicit `choices`. A block that asks one question, a choice or a quick input, is quick. A block
+ * with any unknown element, invalid attribute, misplaced element or option with nothing to show is
+ * not built at all, and every such error is returned.
+ */
+export declare const parseFormBlock: (source: string, registry: FormRegistry) => FormModel;

package/dist/configurator/ui/assistant/form/parse-form-block.js

@@ -0,0 +1 @@
+import{Parser as e}from"htmlparser2";import{readFormAttributes as r}from"./read-form-attributes.js";let o=({name:e,attributes:r,position:o})=>({element:e,label:r.label,position:o}),t=({definition:e},r,o)=>({id:r,definition:e,attributes:{},children:o}),i=(e,r)=>{let o=[],i=[],n=()=>{i.length>0&&(o.push(t(r.registry.choices,`choices-${i[0]?.id}`,i)),i=[])};for(let r of e)"option"===r.definition.role?i.push(r):(n(),o.push(r));return n(),o},n=(e,t,l)=>e.flatMap(e=>((e,t,l)=>{var s;let a,h=l.registry.get(e.name);if(!h){l.errors.push({...o(e),message:"not a form element"}),n(e.children,void 0,l);return}let{definition:u}=h,p=(s=u.role,t?.role==="option"||t?.role==="input"?`cannot be inside <${t.name}>, which holds no elements`:(t?.role==="choice"||t?.role==="choices")&&"option"!==s?`cannot be inside <${t.name}>, which holds only options`:void 0);p&&l.errors.push({...o(e),message:p});let{attributes:c,errors:g}=r(h,e.attributes);for(let r of g)l.errors.push({...o(e),message:r});let{label:d,...m}=c;null!=u.identity&&["label",...u.identity].every(r=>{let o;return null==(o=e.attributes[r])||""===o})&&l.errors.push({...o(e),message:(a=u.identity,`has nothing to show: give it one of the attributes ${["label",...a].map(e=>`"${e}"`).join(", ")}`)});let f=n(e.children,{name:e.name,role:u.role},l);return{id:String(e.position),definition:u,label:"string"==typeof d?d:void 0,attributes:m,children:"group"===u.role?i(f,l):f}})(e,t,l)??[]),l=e=>{let{definition:r}=e;if("choice"===r.role||"input"===r.role&&!0===r.quick)return!0;let[o,...t]=e.children;return"group"===r.role&&null!=o&&0===t.length&&l(o)};export const parseFormBlock=(r,o)=>{let s,a,h,u,p={registry:o,errors:[]},c={name:o.group.definition.name,role:"group"},g=n((a=[s=[]],h=0,(u=new e({onopentag:(e,r)=>{let o={name:e,attributes:r,position:h+=1,children:[]};a.at(-1)?.push(o),a.push(o.children)},onclosetag:()=>{a.length>1&&a.pop()}},{xmlMode:!0,lowerCaseTags:!0,lowerCaseAttributeNames:!0,recognizeSelfClosing:!0})).write(r),u.end(),s),c,p);if(p.errors.length>0)return{ok:!1,errors:p.errors};let d=g.length>0&&g.every(e=>"option"===e.definition.role)?[t(o.choice,"choice",g)]:i(g,p),m=t(o.group,"root",d);return{ok:!0,root:m,isQuick:l(m)}};

package/dist/configurator/ui/assistant/form/read-form-attributes.d.ts

@@ -0,0 +1,13 @@
+import type { RegisteredFormElement } from './registry/index.js';
+/** The attributes of an element converted to their declared types, and what was wrong with them. */
+export interface FormAttributesReading {
+    readonly attributes: Readonly<Record<string, unknown>>;
+    /** Each problem worded to follow the element's tag, e.g. `the attribute "step" must be an integer`. */
+    readonly errors: readonly string[];
+}
+/**
+ * Reads the attributes of an element against its declarations. Undeclared and missing required
+ * attributes are found by name; each declared one is coerced and checked by its own validator, and
+ * the error is worded from the declaration, never from the validator, whose errors differ by mode.
+ */
+export declare const readFormAttributes: ({ definition, attributes: declared }: RegisteredFormElement, markup: Readonly<Record<string, string>>) => FormAttributesReading;

package/dist/configurator/ui/assistant/form/read-form-attributes.js

@@ -0,0 +1 @@
+import{match as t}from"ts-pattern";let e=t=>{if(""===t.trim())return;let e=Number(t);return Number.isFinite(e)?e:void 0},r=(r,{type:u})=>t(u).with("string",()=>r).with("number",()=>e(r)??r).with("integer",()=>{let t=e(r);return null!=t&&Number.isInteger(t)?t:r}).with("boolean",()=>""===r||"true"===r||"false"!==r&&r).exhaustive(),u={string:"a string",number:"a number",integer:"an integer",boolean:"true or false"},n=(t,e,r)=>null!=t&&null!=e?`between ${t} and ${e}${r}`:null!=t?`at least ${t}${r}`:`at most ${e}${r}`,i=(t,e,r)=>{let{type:i,enum:l,pattern:a,minimum:s,maximum:b,minLength:o,maxLength:$}=e;if(l)return`the attribute "${t}" must be one of ${l.map(t=>`"${t}"`).join(", ")}`;if("string"===i){if(null!=o||null!=$){let e="string"==typeof r?[...r].length:0;if(null!=o&&e<o||null!=$&&e>$)return`the attribute "${t}" must be ${n(o,$," characters long")}`}return null==a?`the attribute "${t}" must be ${u[i]}`:`the attribute "${t}" must match the pattern ${a}`}return"number"==typeof r&&(null!=s||null!=b)?`the attribute "${t}" must be ${u[i]} ${n(s,b,"")}`:`the attribute "${t}" must be ${u[i]}`};export const readFormAttributes=({definition:t,attributes:e},u)=>{let n={},l=[];for(let[t,a]of Object.entries(u)){let u=e.get(t);if(!u){l.push(`the attribute "${t}" is not declared`);continue}let s=r(a,u.attribute);u.validate(s)?n[t]=s:l.push(i(t,u.attribute,s))}for(let e of t.required??[])e in u||l.push(`the attribute "${e}" is required`);return{attributes:n,errors:l}};

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

@@ -0,0 +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/built-in-form-elements.js

@@ -0,0 +1 @@
+import{ASSISTANT_BUILT_IN_FORM_ELEMENTS as e}from"#package/domain";import{FormCard as o,FormConfirm as m,FormGroup as r,FormNumber as t,FormOptions as i,FormReply as n,FormSwatch as c,FormText as p}from"../../form-elements/index.js";import{createFormElementDefinition as a}from"./form-element-definition.js";let f={group:r,choice:i,choices:i,reply:n,card:o,swatch:c,text:p,number:t,confirm:m};export const BUILT_IN_FORM_ELEMENTS=e.map(e=>a(e,f[e.name]));

package/dist/configurator/ui/assistant/form/registry/create-assistant-form-element.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { type AssistantFormElementRegistration, type AssistantFormRole } from '#package/domain';
+import type { FormContainerProps, FormInputProps, FormOptionProps } from '../../form-elements/index.js';
+/**
+ * What a project's generated types say of one of its assistant form elements: its role and the
+ * attributes its component gets, typed from its declaration under `assistant.formElements`.
+ */
+export interface AssistantFormElementType {
+    readonly role: AssistantFormRole;
+    readonly attributes: object;
+}
+/**
+ * The props of the component of a project's form element, by its role: a container's, an option's
+ * or an input's, with the element's typed attributes. An input's `STATE` is its own and is inferred
+ * from the component.
+ */
+export type AssistantFormElementRoleProps<TYPE extends AssistantFormElementType, STATE = unknown> = TYPE extends {
+    readonly role: 'option';
+} ? FormOptionProps<TYPE['attributes']> : TYPE extends {
+    readonly role: 'input';
+} ? FormInputProps<STATE, TYPE['attributes']> : FormContainerProps<TYPE['attributes']>;
+/**
+ * Registers the component of one of the project's assistant form elements, under the name its YAML
+ * declares it by in `assistant.formElements`. The name picks the props the component gets.
+ */
+export type CreateAssistantFormElement<TYPES extends object> = <NAME extends keyof TYPES & string, STATE = unknown>(name: NAME, component: (props: TYPES[NAME] extends AssistantFormElementType ? AssistantFormElementRoleProps<TYPES[NAME], STATE> : never) => ReactNode) => AssistantFormElementRegistration;
+/**
+ * `createAssistantFormElement` typed by a project's form elements, for the generated code to put
+ * on `phx.frontend`.
+ */
+export declare const createAssistantFormElementFactory: <TYPES extends object>() => CreateAssistantFormElement<TYPES>;

package/dist/configurator/ui/assistant/form/registry/create-assistant-form-element.js

@@ -0,0 +1 @@
+import{createAssistantFormElement as t}from"#package/domain";export const createAssistantFormElementFactory=()=>t;

package/dist/configurator/ui/assistant/form/registry/form-element-definition.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType } from 'react';
+import type { AssistantFormElementDescriptor } from '#package/domain';
+import type { FormContainerProps, FormInputProps, FormOptionProps } from '../../form-elements/index.js';
+/** An element a form can render: what the prompt knows of it, and the component that renders it for its role. */
+export type FormElementDefinition = (AssistantFormElementDescriptor & {
+    readonly role: 'group' | 'choice' | 'choices';
+    readonly component: ComponentType<FormContainerProps>;
+}) | (AssistantFormElementDescriptor & {
+    readonly role: 'option';
+    readonly component: ComponentType<FormOptionProps>;
+}) | (AssistantFormElementDescriptor & {
+    readonly role: 'input';
+    readonly component: ComponentType<FormInputProps>;
+});
+/** Pairs an element's descriptor with the component written for it, a built-in's or the project's own. */
+export declare const createFormElementDefinition: (descriptor: AssistantFormElementDescriptor, component: ComponentType<never>) => FormElementDefinition;

package/dist/configurator/ui/assistant/form/registry/form-element-definition.js

@@ -0,0 +1 @@
+import{match as o}from"ts-pattern";export const createFormElementDefinition=(t,e)=>o(t.role).with("group","choice","choices",o=>({...t,role:o,component:e})).with("option",o=>({...t,role:o,component:e})).with("input",o=>({...t,role:o,component:e})).exhaustive();

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

@@ -0,0 +1,31 @@
+import { type AssistantFormAttribute, type PhxValidateFunction, type SchemaValidator } from '#package/domain';
+import type { FormElementDefinition } from './form-element-definition.js';
+/** A declared attribute of a form element with the validator of its coerced value. */
+export interface RegisteredFormAttribute {
+    readonly attribute: AssistantFormAttribute;
+    readonly validate: PhxValidateFunction;
+}
+/** A form element with its declared attributes, the built-in `label` included. */
+export interface RegisteredFormElement {
+    readonly definition: FormElementDefinition;
+    readonly attributes: ReadonlyMap<string, RegisteredFormAttribute>;
+}
+/** The elements forms can use, and the containers a form puts around what the model left implicit. */
+export interface FormRegistry {
+    /** The container of a block's top level. */
+    readonly group: RegisteredFormElement;
+    /** The container of options that are a block's only content. */
+    readonly choice: RegisteredFormElement;
+    /** The container of a run of options outside any choice. */
+    readonly choices: RegisteredFormElement;
+    get(name: string): RegisteredFormElement | undefined;
+}
+/** What a registry is built with: the shared validator, which follows the project's CSP switch. */
+export interface FormRegistryContext {
+    readonly schemaValidator: SchemaValidator;
+}
+/**
+ * Compiles a validator for every declared attribute of the given elements, each its own small
+ * schema, so every failing attribute is reported whichever validator the project uses.
+ */
+export declare const createFormRegistry: (definitions: readonly FormElementDefinition[], { schemaValidator }: FormRegistryContext) => FormRegistry;

package/dist/configurator/ui/assistant/form/registry/form-registry.js

@@ -0,0 +1 @@
+import{ASSISTANT_FORM_NAME_PATTERN as e,isHtmlElementName as t}from"#package/domain";let r={type:"string"},n=e=>Object.entries({label:r,...e.attributes}),o=(e,t)=>{let r=e.get(t);if(r?.definition.role!==t)throw Error(`The form registry has no "${t}" element with the role "${t}". Forms wrap implicit content in it. Register the built-in "${t}".`);return r};export const createFormRegistry=(r,{schemaValidator:a})=>{let i=new Map;for(let o of r){if(!e.test(o.name)||t(o.name))throw Error(`The form element "${o.name}" cannot be registered: its name must be lowercase and must not be an HTML element name, so form markup is never read as HTML. Rename the element.`);if(i.has(o.name))throw Error(`The form element "${o.name}" is registered twice. Each tag names one element. Remove or rename one of them.`);let r=new Map(n(o).map(([e,t])=>[e,{attribute:t,validate:a.compile(t)}]));i.set(o.name,{definition:o,attributes:r})}return{group:o(i,"group"),choice:o(i,"choice"),choices:o(i,"choices"),get:e=>i.get(e)}};

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

@@ -0,0 +1,6 @@
+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';
+export { type FormRegistry, type FormRegistryContext, type RegisteredFormAttribute, type RegisteredFormElement, createFormRegistry, } from './form-registry.js';
+export { useFormRegistry } from './use-form-registry.js';

package/dist/configurator/ui/assistant/form/registry/index.js

@@ -0,0 +1 @@
+export{BUILT_IN_FORM_ELEMENTS}from"./built-in-form-elements.js";export{createAssistantFormElementFactory}from"./create-assistant-form-element.js";export{createFormElementDefinition}from"./form-element-definition.js";export{createFormRegistry}from"./form-registry.js";export{useFormRegistry}from"./use-form-registry.js";

package/dist/configurator/ui/assistant/form/registry/use-form-registry.d.ts

@@ -0,0 +1,8 @@
+import { type FormRegistry } from './form-registry.js';
+/**
+ * The registry the application's forms are read with. It is built when a form renders rather than
+ * when the bundle loads, since compiling validators then would break a configurator on a page whose
+ * CSP forbids eval, even one without an assistant; and rebuilt when the YAML or a component
+ * changes, so hot reload reaches the forms.
+ */
+export declare const useFormRegistry: () => FormRegistry;

package/dist/configurator/ui/assistant/form/registry/use-form-registry.js

@@ -0,0 +1 @@
+import{useMemo as r}from"react";import{extendedSchemaValidator as e}from"#package/domain";import{usePhoenixElementSlots as t,useSpecAssistant as m}from"#package/react-sdk";import{BUILT_IN_FORM_ELEMENTS as o}from"./built-in-form-elements.js";import{createFormElementDefinition as i}from"./form-element-definition.js";import{createFormRegistry as a}from"./form-registry.js";let f=[];export const useFormRegistry=()=>{let n=m()?.formElements??f,{assistantFormElements:s}=t();return r(()=>a([...o,...n.flatMap(r=>{let e=Object.entries(s).find(([e])=>e===r.name)?.[1];return e?[i(r,e)]:[]})],{schemaValidator:e}),[n,s])};

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

@@ -0,0 +1,68 @@
+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.
+ */
+export declare const FormCard: ({ attributes, label, disabled, selected, onSelect }: FormCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+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"})})]})};

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

@@ -0,0 +1,60 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ButtonHTMLAttributes, ElementType, HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormInputProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormConfirm';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormConfirmSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormConfirmProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Buttons: 'buttons';
+    readonly Button: 'button';
+};
+type FormConfirmSlots = ValueOf<typeof Slots>;
+/**
+ * The slots of a form `confirm`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormConfirmProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The question with its label and its buttons (`div`).
+     * - `buttons` — The row of the yes and no buttons (`div`).
+     * - `button` — The yes and the no button (`button`).
+     */
+    readonly slots?: Partial<Record<FormConfirmSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the question.
+     * - `buttons` — Props for the row.
+     * - `button` — Props for each button.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Buttons]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Button]: ButtonHTMLAttributes<HTMLButtonElement>;
+    }>;
+}
+type FormConfirmProps = FormInputProps<boolean, AssistantBuiltInFormElementAttributes<'confirm'>>;
+/**
+ * A `confirm`: a yes or no question as ✓ and ✗ buttons. Its state is the pick, and it answers with
+ * the user's own words for yes and no, as the answer is their own message.
+ */
+export declare const FormConfirm: ({ label, disabled, state, onChange }: FormConfirmProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{alpha as t,styled as i,useThemeProps as o}from"@mui/material";import{useLocalizable as a}from"#package/react-sdk";import{PhxIcon as n}from"#package/ui-sdk";let s="PhxAssistantFormConfirm",l={id:"sdk.assistant.form.confirm.yes",message:"Yes"},d={id:"sdk.assistant.form.confirm.no",message:"No"},m=i("div",{name:s,slot:"root"})(({theme:{palette:e,spacing:r,typography:t}})=>({...t.caption,color:e.text.secondary,display:"grid",gap:r(.75)})),c=i("div",{name:s,slot:"buttons"})(({theme:{spacing:e}})=>({display:"flex",gap:e(.75)})),p=i("button",{name:s,slot:"button"})(({theme:{palette:e,spacing:r}})=>({alignItems:"center",background:e.background.paper,border:`1px solid ${e.divider}`,borderRadius:"calc(infinity * 1px)",color:e.text.primary,cursor:"pointer",display:"inline-flex",justifyContent:"center",margin:0,paddingBlock:r(.5),paddingInline:r(1.5),"&: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"]':{background:t(e.primary.main,e.action.selectedOpacity),borderColor:e.primary.main}})),u={};export const FormConfirm=({label:t,disabled:i,state:b,onChange:f})=>{let g=a(l),k=a(d),{slots:y={},slotProps:h={}}=o({props:u,name:s}),x=y.root??m,C=y.buttons??c,v=y.button??p;return r(x,{role:"group","aria-label":t,...h.root,children:[null!=t&&e("span",{"aria-hidden":!0,children:t}),r(C,{...h.buttons,children:[e(v,{...h.button,type:"button","aria-label":g,title:g,disabled:i,"aria-pressed":!0===b,onClick:()=>f(!0,g),children:e(n,{name:"Check",fontSize:"small"})}),e(v,{...h.button,type:"button","aria-label":k,title:k,disabled:i,"aria-pressed":!1===b,onClick:()=>f(!1,k),children:e(n,{name:"X",fontSize:"small"})})]})]})};

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

@@ -0,0 +1,53 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ElementType, HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormContainerProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormGroup';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormGroupSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormGroupProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Label: 'label';
+};
+type FormGroupSlots = ValueOf<typeof Slots>;
+type FormGroupProps = FormContainerProps<AssistantBuiltInFormElementAttributes<'group'>>;
+/**
+ * The slots of a form `group`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormGroupProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The group (`div`).
+     * - `label` — The label that heads the group (`div`).
+     */
+    readonly slots?: Partial<Record<FormGroupSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the group.
+     * - `label` — Props for the label.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Label]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+/** A `group`: its children stacked under its label, which heads them. */
+export declare const FormGroup: ({ label, children }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{styled as o,useThemeProps as l}from"@mui/material";let t="PhxAssistantFormGroup",a=o("div",{name:t,slot:"root"})(({theme:{spacing:r}})=>({display:"flex",flexDirection:"column",gap:r(1.5)})),i=o("div",{name:t,slot:"label"})(({theme:{palette:r,typography:e}})=>({...e.subtitle2,color:r.text.primary})),m={};export const FormGroup=({label:o,children:s})=>{let{slots:n={},slotProps:p={}}=l({props:m,name:t}),u=n.root??a,x=n.label??i;return e(u,{role:"group","aria-label":o,...p.root,children:[null!=o&&r(x,{"aria-hidden":!0,...p.label,children:o}),s]})};

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

@@ -0,0 +1,52 @@
+import type { ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormInputProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormNumber';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormNumberSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormNumberProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+};
+type FormNumberSlots = ValueOf<typeof Slots>;
+/**
+ * The slots of a form `number`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormNumberProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The field with its label, its input and its slider (`div`).
+     */
+    readonly slots?: Partial<Record<FormNumberSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the field.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+type FormNumberProps = FormInputProps<number, AssistantBuiltInFormElementAttributes<'number'>>;
+/**
+ * A `number`: a field with its unit, and a slider beside it when both `min` and `max` are given. It
+ * stays unanswered until the user enters a number, even while the slider rests at `min`.
+ */
+export declare const FormNumber: ({ attributes: { value, min, max, step, unit }, label, disabled, state, onChange, }: FormNumberProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,57 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ElementType, HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormContainerProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormOptions';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormOptionsSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormOptionsProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Label: 'label';
+    readonly Row: 'row';
+};
+type FormOptionsSlots = ValueOf<typeof Slots>;
+type FormOptionsProps = FormContainerProps<AssistantBuiltInFormElementAttributes<'choice' | 'choices'>>;
+/**
+ * The slots of a form `choice` or `choices`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormOptionsProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The `choice` or `choices` (`div`).
+     * - `label` — The label above the options (`div`).
+     * - `row` — The wrapping row of options (`div`).
+     */
+    readonly slots?: Partial<Record<FormOptionsSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the element.
+     * - `label` — Props for the label.
+     * - `row` — Props for the row.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Label]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Row]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+/** A `choice` or `choices`: its options in a wrapping row under its label. */
+export declare const FormOptions: ({ label, children }: FormOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{styled as o,useThemeProps as a}from"@mui/material";let t="PhxAssistantFormOptions",l=o("div",{name:t,slot:"root"})(({theme:{spacing:r}})=>({display:"grid",gap:r(.75)})),i=o("div",{name:t,slot:"label"})(({theme:{palette:r,typography:e}})=>({...e.caption,color:r.text.secondary})),s=o("div",{name:t,slot:"row"})(({theme:{spacing:r}})=>({display:"flex",flexWrap:"wrap",gap:r(.75)})),n={};export const FormOptions=({label:o,children:m})=>{let{slots:p={},slotProps:d={}}=a({props:n,name:t}),c=p.root??l,h=p.label??i,x=p.row??s;return e(c,{role:"group","aria-label":o,...d.root,children:[null!=o&&r(h,{"aria-hidden":!0,...d.label,children:o}),r(x,{...d.row,children:m})]})};

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

@@ -0,0 +1,49 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ButtonHTMLAttributes, ElementType } 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: 'PhxAssistantFormReply';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormReplySlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormReplyProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+};
+type FormReplySlots = ValueOf<typeof Slots>;
+type FormReplyProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'reply'>>;
+/**
+ * The slots of a form `reply`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormReplyProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The answer button (`button`).
+     */
+    readonly slots?: Partial<Record<FormReplySlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the button.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: ButtonHTMLAttributes<HTMLButtonElement>;
+    }>;
+}
+/** A `reply`: a short answer as a small pill, marked while it is picked. */
+export declare const FormReply: ({ attributes, label, disabled, selected, onSelect }: FormReplyProps) => import("react/jsx-runtime").JSX.Element;
+export {};