@salsita-ai/sdk 0.50.0-develop.a49722158a → 0.50.0-develop.a8cf9ffd01

package/dist/configurator/ui/assistant/drawing/AssistantDrawing.d.ts

@@ -0,0 +1,58 @@
+import type { ButtonBaseProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ImgHTMLAttributes } from 'react';
+declare const MuiComponentName: 'PhxAssistantDrawing';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root' | 'button' | 'image' | 'note';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantDrawingProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+/** The slots of a drawing in a reply. Read from the theme only. */
+export interface ThemeableAssistantDrawingProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The frame around the drawing, its placeholder or its note (`div`).
+     * - `button` — The button over the whole picture that opens it larger (`ButtonBase`).
+     * - `image` — The picture (`img`).
+     * - `note` — The placeholder while the model writes the drawing, or the note that it could not be shown (`div`).
+     */
+    readonly slots?: Partial<Record<'root' | 'button' | 'image' | 'note', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the frame.
+     * - `button` — Props for the button.
+     * - `image` — Props for the picture.
+     * - `note` — Props for the placeholder and the note.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLDivElement>;
+        readonly button: ButtonBaseProps;
+        readonly image: ImgHTMLAttributes<HTMLImageElement>;
+        readonly note: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+/** `writing`: the model is still writing the fence. `ready`: it is written. */
+export type AssistantDrawingStatus = 'writing' | 'ready';
+export interface AssistantDrawingProps {
+    /** The source of the ```` ```svg ```` fence. */
+    readonly source: string;
+    readonly status: AssistantDrawingStatus;
+}
+/**
+ * A drawing the model wrote in a reply, framed and as wide as the thread allows; a click opens it
+ * larger beside the panel. It is shown as an image, so nothing in it runs or loads, and its source
+ * never reaches the page; a source that is not a drawing the panel can show leaves a note. While the
+ * model writes it, a placeholder stands in.
+ */
+export declare const AssistantDrawing: import("react").MemoExoticComponent<({ source, status }: AssistantDrawingProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/configurator/ui/assistant/drawing/AssistantDrawing.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{Trans as e}from"@lingui/react";import{ButtonBase as o,styled as r,useThemeProps as t}from"@mui/material";import{memo as n,useCallback as a,useMemo as s,useState as l}from"react";import{useLocalizable as d}from"#package/react-sdk";import{useConfigurator as m}from"../../../application-runtime/index.js";import{parseDrawing as g}from"./parse-drawing.js";import{revokeDrawingUrlOnLoad as c,useDrawingUrl as u}from"./use-drawing-url.js";let p="PhxAssistantDrawing",b=r("div",{name:p,slot:"root"})(({theme:{palette:i,shape:e,spacing:o}})=>({border:`1px solid ${i.divider}`,borderRadius:e.borderRadius,boxSizing:"border-box",marginBlock:o(1),maxInlineSize:"100%",padding:o(1)})),w={id:"sdk.assistant.drawing.open.label",message:"Open the drawing"},h=r(o,{name:p,slot:"button"})(({theme:{palette:i}})=>({cursor:"zoom-in",display:"block",inlineSize:"100%","&:focus-visible":{outline:`2px solid ${i.primary.main}`,outlineOffset:2}})),k=r("img",{name:p,slot:"image"})({blockSize:"auto",display:"block",inlineSize:"100%"}),f=r("div",{name:p,slot:"note"})(({theme:{palette:i,spacing:e,typography:o}})=>({...o.caption,color:i.text.secondary,paddingBlock:e(1),paddingInline:e(.5)})),x={},v=()=>{let{slots:i={},slotProps:e={}}=t({props:x,name:p});return{Root:i.root??b,Button:i.button??h,Image:i.image??k,NoteSlot:i.note??f,slotProps:e}},z=()=>{let{Root:o,NoteSlot:r,slotProps:t}=v();return i(o,{...t.root,children:i(r,{...t.note,role:"alert",children:i(e,{id:"sdk.assistant.drawing.failure",message:"This drawing could not be shown"})})})},S=({source:e,title:o})=>{let{assistantSystem:r}=m(),t=u(e),[n,s]=l(),g=d(w),{Root:p,Button:b,Image:h,slotProps:k}=v(),f=a(()=>{r.viewImage({kind:"svg",source:e,title:o})},[r,e,o]),x=a(()=>{s(t)},[t]);return void 0!==t&&t===n?i(z,{}):i(p,{...k.root,children:i(b,{...k.button,"aria-label":void 0===o?g:void 0,onClick:f,children:void 0!==t&&i(h,{...k.image,src:t,alt:o??"",onLoad:c,onError:x})})})},j=({source:e})=>{let o=s(()=>g(e),[e]);return o.ok?i(S,{source:e,title:o.title}):i(z,{})},y=()=>{let{Root:o,NoteSlot:r,slotProps:t}=v();return i(o,{...t.root,children:i(r,{...t.note,role:"status",children:i(e,{id:"sdk.assistant.drawing.writing",message:"Drawing…"})})})};export const AssistantDrawing=n(({source:e,status:o})=>"writing"===o?i(y,{}):i(j,{source:e}));

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

@@ -0,0 +1,2 @@
+export { AssistantDrawing, type ThemeableAssistantDrawingProps } from './AssistantDrawing.js';
+export { revokeDrawingUrlOnLoad, useDrawingUrl } from './use-drawing-url.js';

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

@@ -0,0 +1 @@
+export{AssistantDrawing}from"./AssistantDrawing.js";export{revokeDrawingUrlOnLoad,useDrawingUrl}from"./use-drawing-url.js";

package/dist/configurator/ui/assistant/drawing/parse-drawing.d.ts

@@ -0,0 +1,18 @@
+/** Bytes; a larger drawing is not shown. */
+export declare const MAX_DRAWING_SIZE: number;
+/** What the panel reads from the source of a drawing fence: whether it can show it, and its title. */
+export type ParsedDrawing = {
+    readonly ok: true;
+    readonly title: string | undefined;
+} | {
+    readonly ok: false;
+};
+/**
+ * Reads the source of a ```` ```svg ```` fence the model wrote. It is shown only when it is
+ * well-formed SVG of at most {@link MAX_DRAWING_SIZE}: a root `<svg>` in the SVG namespace, which an
+ * image needs, with a `viewBox` or a `width` and `height`, so it has a size. Its title is the text of
+ * its first `<title>`.
+ *
+ * Parsing runs no script and loads nothing: the document it makes is never rendered.
+ */
+export declare const parseDrawing: (source: string) => ParsedDrawing;

package/dist/configurator/ui/assistant/drawing/parse-drawing.js

@@ -0,0 +1 @@
+let e="http://www.w3.org/2000/svg";export const MAX_DRAWING_SIZE=204800;let t=Object.freeze({ok:!1});export const parseDrawing=r=>{if(new TextEncoder().encode(r).length>204800)return t;let n=new DOMParser().parseFromString(r,"image/svg+xml"),a=n.documentElement;if(n.getElementsByTagName("parsererror").length>0||"svg"!==a.localName||a.namespaceURI!==e||!(a.hasAttribute("viewBox")||a.hasAttribute("width")&&a.hasAttribute("height")))return t;let o=a.getElementsByTagNameNS(e,"title")[0]?.textContent?.trim();return{ok:!0,title:""===o?void 0:o}};

package/dist/configurator/ui/assistant/drawing/use-drawing-url.d.ts

@@ -0,0 +1,14 @@
+import { type SyntheticEvent } from 'react';
+/**
+ * A `blob:` URL of type `image/svg+xml` for the source of a drawing, for an `<img>`, which runs no
+ * script of it, loads nothing it points at and keeps its styles to itself. The source never becomes
+ * part of the page. The `<img>` revokes it once loaded, with {@link revokeDrawingUrlOnLoad}; it is
+ * also revoked when the source changes or the component unmounts. Nothing is returned until it is made.
+ */
+export declare const useDrawingUrl: (source: string) => string | undefined;
+/**
+ * The `onLoad` of a drawing's `<img>`: revokes its URL once the picture is decoded, which stays
+ * painted. A live `blob:` URL has the host page's origin, so "Open image in new tab" would load the
+ * SVG as a document of that origin, where a script the model wrote would run.
+ */
+export declare const revokeDrawingUrlOnLoad: (event: SyntheticEvent<HTMLImageElement>) => void;

package/dist/configurator/ui/assistant/drawing/use-drawing-url.js

@@ -0,0 +1 @@
+import{useEffect as e,useState as r}from"react";export const useDrawingUrl=t=>{let[o,c]=r();return e(()=>{let e=URL.createObjectURL(new Blob([t],{type:"image/svg+xml"}));return c({source:t,url:e}),()=>{URL.revokeObjectURL(e)}},[t]),o?.source===t?o.url:void 0};export const revokeDrawingUrlOnLoad=e=>{URL.revokeObjectURL(e.currentTarget.src)};

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. */
@@ -8,6 +41,7 @@ export interface AssistantEntityLinkProps {
 /**
  * An entity the assistant named in a reply, shown as its label. It follows the configurator live:
  * a click selects the entity when the scene can select it, the link shows when the entity is
- * selected or hovered in the scene, and it is struck out once the entity is gone.
+ * 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{alpha as t,styled as i}from"@mui/material";import{memo as n,useCallback as r,useEffect as o,useRef as a}from"react";import{sceneEntitySelectHotspotComponent as l,selectableComponent as c}from"#package/domain";import{useDomain as d,useFirstRenderedComponent as s,useHoveredDomainEntityId as m,useRenderedSelector as u,useSelectEntity as p,useSelectedDomainEntityId as k,useStoreSelector as y}from"#package/react-sdk";import{FrontendAnalyticsFactory as h}from"../../../common/index.js";import{AssistantPanelName as b}from"../theme.js";import{useEntityLinkSelection as g}from"./entity-link-selection.js";import{resolveEntityLinkState as f}from"./entity-link-state.js";let v=({theme:{palette:e,shape:i,spacing:n}})=>({background:e.action.hover,border:"none",borderRadius:i.borderRadius/2,boxDecorationBreak:"clone",color:"inherit",font:"inherit",margin:0,paddingBlock:0,paddingInline:n(.5),textAlign:"inherit",WebkitBoxDecorationBreak:"clone",'&[data-entity-link="interactive"]':{background:t(e.primary.main,e.action.hoverOpacity),color:e.primary.main,cursor:"pointer",'&:hover, &:focus-visible, &[data-hovered="true"]':{background:t(e.primary.main,e.action.focusOpacity)},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:1}},'&[data-entity-link="missing"]':{background:"none",color:e.text.disabled,paddingInline:0,textDecoration:"line-through"},'&[data-selected="true"]':{boxShadow:`inset 0 0 0 1px ${e.primary.main}`}}),x=i("span",{name:b,slot:"entityLink"})(v),S=i("button",{name:b,slot:"entityLink"})(v),j=({kind:t,isSelected:i,children:n})=>e(x,{"data-entity-link":t,"data-selected":i,children:n}),T=({id:t,isSelected:i,children:n})=>{let{navigationSystem:u}=d(),k=s({entityIds:[t],componentTypes:[c]}),y=s({entityIds:[t],componentTypes:[l]}),{kind:b,canHover:v}=f({isSelectable:null!=k,isHoverDisabled:k?.state.hoverable===!1,hasSelectHotspot:null!=y}),x=m()===t,T=p(h.AssistantEntityLinkClicked),B=g(),E=r(()=>{B?.remember(t),T(t)},[t,B,T]),L=a(!1),D=r(()=>{v&&(L.current=!0,u.debouncedToggleHover(t))},[v,t,u]),H=r(()=>{L.current&&(L.current=!1,u.debouncedToggleHover(null))},[u]),I=r(e=>{"touch"!==e.pointerType&&D()},[D]),A=r(e=>{e.currentTarget.matches(":focus-visible")&&D()},[D]);return(o(()=>H,[v,H,t]),"interactive"!==b)?e(j,{kind:b,isSelected:i,children:n}):e(S,{type:"button","data-entity-link":b,"data-selected":i,"data-hovered":v&&x,"aria-current":i?"true":void 0,onClick:E,onPointerEnter:I,onPointerLeave:H,onFocus:A,onBlur:H,children:n})};export const AssistantEntityLink=n(({id:t,children:i})=>{let{domain:n}=d(),r=y(e=>null!=n.getEntity(t,e.state),[n,t]),o=u(e=>null!=n.getEntity(t,e.state),[n,t]),a=k()===t;return r?o?e(T,{id:t,isSelected:a,children:i}):e(j,{kind:"plain",isSelected:a,children:i}):e(j,{kind:"missing",isSelected:!1,children:i})});
+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/entity-link-state.d.ts

@@ -10,7 +10,7 @@ export interface EntityLinkFacts {
 /**
  * How an entity link shows and behaves:
  *
- * - `missing`: the entity is gone, the link is struck out;
+ * - `missing`: the entity is gone, the link is muted;
  * - `plain`: the entity exists but nothing in the scene selects it, so the link is only a label;
  * - `interactive`: a click selects the entity, as a click on it or on its hotspot in the scene does.
  */

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

@@ -1,3 +1,2 @@
-export { AssistantEntityLink } from './AssistantEntityLink.js';
-export { EntityLinkSelectionProvider, useCreateEntityLinkSelection } from './entity-link-selection.js';
-export { isEntityLinkHref, parseEntityLinkTarget } from './entity-link-target.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/entity-link/index.js

@@ -1 +1 @@
-export{AssistantEntityLink}from"./AssistantEntityLink.js";export{EntityLinkSelectionProvider,useCreateEntityLinkSelection}from"./entity-link-selection.js";export{isEntityLinkHref,parseEntityLinkTarget}from"./entity-link-target.js";
+export{AssistantEntityLink}from"./AssistantEntityLink.js";export{EntityLinkSelectionProvider,useCreateEntityLinkSelection}from"./entity-link-selection.js";

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

@@ -0,0 +1,76 @@
+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';
+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;
+}
+/**
+ * A form the assistant wrote to ask the user something. What the user picks or enters is sent as
+ * their next message; a form that asks one question sends on the first pick, any other has a submit
+ * button. A form that cannot be built offers to send the assistant its errors instead.
+ *
+ * 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<(inProps: AssistantFormProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};

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

@@ -0,0 +1 @@
+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/compose-answer.d.ts

@@ -0,0 +1,11 @@
+import type { BuiltFormModel } from './form-model.js';
+import type { FormAnswers, FormState } from './form-state.js';
+/** Stands for anything left unanswered, so every question keeps its line. */
+export declare const FORM_PLACEHOLDER = "\u2014";
+/**
+ * The user's answer to a form, sent as their message: one line per labelled container or input as
+ * `Label: value`, a bare line for an unlabelled one, two spaces of indentation per labelled
+ * container, and the placeholder for anything unanswered. Unlabelled groups are flattened into
+ * their parent, and a picked option, as an input, answers with what it reported.
+ */
+export declare const composeAnswer: (model: BuiltFormModel, state: FormState, answers: FormAnswers) => string;

package/dist/configurator/ui/assistant/form/compose-answer.js

@@ -0,0 +1 @@
+import{match as t}from"ts-pattern";export const FORM_PLACEHOLDER="—";let e=(t,e)=>`${"  ".repeat(t)}${e}`,n=(t,e)=>null==t?e:`${t}: ${e}`,r=({children:t},{state:e,answers:n})=>t.flatMap(({id:t})=>{let r=n.get(t);return!0===e.get(t)&&null!=r&&""!==r?[r]:[]}),l=(i,o,p)=>{let{label:a}=i;return t(i.definition.role).with("group",()=>{if(null==a)return i.children.flatMap(t=>l(t,o,p));let t=i.children.flatMap(t=>l(t,o+1,p));return t.length>0?[e(o,`${a}:`),...t]:[e(o,`${a}: —`)]}).with("choice",()=>[e(o,n(a,r(i,p)[0]??"—"))]).with("choices",()=>{let t=r(i,p);return 0===t.length?[e(o,n(a,"—"))]:null==a?t.map(t=>e(o,t)):[e(o,`${a}:`),...t.map(t=>e(o+1,t))]}).with("input",()=>[e(o,n(a,p.answers.get(i.id)??"—"))]).with("option",()=>[]).exhaustive()};export const composeAnswer=(t,e,n)=>l(t.root,0,{state:e,answers:n}).join("\n");

package/dist/configurator/ui/assistant/form/describe-build-errors.d.ts

@@ -0,0 +1,6 @@
+import type { FormBuildError } from './form-model.js';
+/**
+ * The message Fix it sends for a form that could not be built: every error, with the element named
+ * by its tag and its label or its position, then the request to write the form again.
+ */
+export declare const describeBuildErrors: (errors: readonly FormBuildError[]) => string;

package/dist/configurator/ui/assistant/form/describe-build-errors.js

@@ -0,0 +1 @@
+export const describeBuildErrors=e=>["Your form could not be built:",...e.map(e=>`- ${(({element:e,label:l,position:n})=>null==l?`<${e}> (element ${n})`:`<${e} label="${l}">`)(e)}: ${e.message}.`),"Send it again."].join("\n");

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;