@salsita-ai/sdk 0.50.0-develop.3cc61485a6 → 0.50.0-develop.419ade6b74

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

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

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

@@ -1,7 +1,12 @@
+import type { AssistantFormsVisibility } from './thread-items.js';
 export interface AssistantMarkdownProps {
     readonly markdown: string;
     /** True while the text is still arriving, so markup the model has not finished is completed. */
     readonly isStreaming: boolean;
+    readonly forms: AssistantFormsVisibility;
 }
-/** Assistant text of the thread: Markdown with lists, tables, links and code, without a bubble. */
-export declare const AssistantMarkdown: import("react").MemoExoticComponent<({ markdown, isStreaming }: AssistantMarkdownProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * Assistant text of the thread: Markdown with lists, tables, alerts, links, entity links, references, images, code and forms,
+ * without a bubble. A form fence the model is still writing shows a placeholder.
+ */
+export declare const AssistantMarkdown: import("react").MemoExoticComponent<({ markdown, isStreaming, forms }: AssistantMarkdownProps) => import("react/jsx-runtime").JSX.Element>;

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

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

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{IconButton as s,Tooltip as a,Typography as i,styled as n}from"@mui/material";import{useCallback as r}from"react";import{useLocalizable as o}from"#package/react-sdk";import{PhxIcon as l}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";import{AssistantComposer as d}from"./AssistantComposer.js";import{AssistantThread as p}from"./AssistantThread.js";import{AssistantPanelName as c}from"./theme.js";import{useIsAssistantPanelOpen as u}from"./use-is-assistant-panel-open.js";let b={id:"sdk.assistant.panel.title",message:"Assistant"},f={id:"sdk.assistant.panel.close.label",message:"Close assistant"};export const ASSISTANT_PANEL_SLOT="slot[assistant]";let g=n("section",{name:c,slot:"root"})(({theme:{palette:e}})=>({background:`var(--phx-sidebar-background, ${e.background.paper})`,border:"var(--phx-sidebar-border, 0)",borderRadius:"inherit",display:"grid",gridTemplateColumns:"minmax(0, 1fr)",gridTemplateRows:"min-content minmax(0, 1fr) min-content",inset:0,overflow:"hidden",position:"absolute",zIndex:1})),h=n("header",{name:c,slot:"header"})(({theme:{palette:e,spacing:t}})=>({alignItems:"center",borderBlockEnd:`1px solid ${e.divider}`,display:"flex",gap:t(1),justifyContent:"space-between",paddingBlock:t(1),paddingInline:`var(--phx-sidebar-padding, ${t(2)}) ${t(1)}`})),x=n(i,{name:c,slot:"title"})({fontWeight:600}),k=n(s,{name:c,slot:"closeButton"})({}),j=e=>{e.target instanceof Element&&e.target.closest("button")&&e.preventDefault()};export const AssistantPanel=()=>{let{assistantSystem:s}=m(),i=u(),n=o(b),c=o(f),v=r(()=>{s.setOpen(!1)},[s]);return i?t(g,{"data-sidebar":"slot[assistant]","aria-label":n,onMouseDown:j,children:[t(h,{children:[e(x,{variant:"subtitle1",component:"h2",children:n}),e(a,{title:c,placement:"top",children:e(k,{size:"small","aria-label":c,onClick:v,children:e(l,{name:"X"})})})]}),e(p,{}),e(d,{})]}):null};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{IconButton as s,Tooltip as a,Typography as n,styled as i}from"@mui/material";import{useCallback as r}from"react";import{useLocalizable as o}from"#package/react-sdk";import{PhxIcon as l}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";import{AssistantComposer as d}from"./AssistantComposer.js";import{AssistantThread as p}from"./AssistantThread.js";import{AssistantPanelName as c}from"./theme.js";import{useIsAssistantPanelOpen as u}from"./use-is-assistant-panel-open.js";let b={id:"sdk.assistant.panel.title",message:"Assistant"},f={id:"sdk.assistant.panel.close.label",message:"Close assistant"};export const ASSISTANT_PANEL_SLOT="slot[assistant]";let g=i("section",{name:c,slot:"root"})(({theme:{palette:e}})=>({background:`var(--phx-sidebar-background, ${e.background.paper})`,border:"var(--phx-sidebar-border, 0)",borderRadius:"inherit",display:"grid",gridTemplateColumns:"minmax(0, 1fr)",gridTemplateRows:"min-content minmax(0, 1fr) min-content",inset:0,overflow:"hidden",position:"absolute",zIndex:1})),h=i("header",{name:c,slot:"header"})(({theme:{palette:e,spacing:t}})=>({alignItems:"center",borderBlockEnd:`1px solid ${e.divider}`,display:"flex",gap:t(1),justifyContent:"space-between",paddingBlock:t(1),paddingInline:`var(--phx-sidebar-padding, ${t(2)}) ${t(1)}`})),x=i(n,{name:c,slot:"title"})({fontWeight:600}),k=i(s,{name:c,slot:"closeButton"})({}),j=e=>{e.target instanceof Element&&e.target.closest('button, [role="button"]')&&e.preventDefault()};export const AssistantPanel=()=>{let{assistantSystem:s}=m(),n=u(),i=o(b),c=o(f),v=r(()=>{s.setOpen(!1)},[s]);return n?t(g,{"data-sidebar":"slot[assistant]","aria-label":i,onMouseDown:j,children:[t(h,{children:[e(x,{variant:"subtitle1",component:"h2",children:i}),e(a,{title:c,placement:"top",children:e(k,{size:"small","aria-label":c,onClick:v,children:e(l,{name:"X"})})})]}),e(p,{}),e(d,{})]}):null};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as s,styled as t}from"@mui/material";import{useMemo as r}from"react";import{match as n}from"ts-pattern";import{useEagerObservableValue as o}from"#package/react-sdk";import{PhxIcon as l}from"#package/ui-sdk";import{useConfigurator as d}from"../../application-runtime/index.js";import{AssistantToolChips as m}from"./AssistantChips.js";import{AssistantMarkdown as h}from"./AssistantMarkdown.js";import{describeAssistantFailure as c}from"./assistant-failure.js";import{AssistantPanelName as p}from"./theme.js";import{buildEarlierThreadItems as g,buildThreadView as u}from"./thread-items.js";import{useFollowStream as k}from"./use-follow-stream.js";let f=t("div",{name:p,slot:"thread"})({display:"grid",position:"relative"}),v=t("div",{name:p,slot:"messages"})(({theme:{spacing:e,typography:a}})=>({...a.body2,display:"flex",flexDirection:"column",gap:e(1.5),overflowY:"auto",overscrollBehavior:"contain",paddingBlock:e(2),paddingInline:`var(--phx-sidebar-padding, ${e(2)})`,"& > :first-child":{marginBlockStart:"auto"}})),w=t("div",{name:p,slot:"userMessage"})(({theme:{palette:e,spacing:a}})=>({alignSelf:"flex-end",background:`hsl(from ${e.primary.main} h s l / 12%)`,borderRadius:"14px 14px 4px 14px",maxInlineSize:"85%",overflowWrap:"anywhere",paddingBlock:a(1),paddingInline:a(1.5),whiteSpace:"pre-wrap"})),b=t("div",{name:p,slot:"greeting"})({}),x=t("div",{name:p,slot:"status"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary})),y=t("div",{name:p,slot:"separator"})(({theme:{palette:e,spacing:a,typography:i}})=>({...i.caption,alignItems:"center",color:e.text.secondary,display:"flex",gap:a(1),"&::before, &::after":{borderBlockStart:`1px solid ${e.divider}`,content:'""',flex:1}})),T=t(s,{name:p,slot:"earlierButton"})({alignSelf:"center"}),S=t("div",{name:p,slot:"notice"})(({theme:{palette:e,shape:a,spacing:i}})=>({alignItems:"center",background:e.action.hover,borderRadius:a.borderRadius,display:"flex",flexWrap:"wrap",gap:i(1),justifyContent:"space-between",paddingBlock:i(1),paddingInline:i(1.5)})),j=t(s,{name:p,slot:"newReplyButton"})(({theme:{palette:e,spacing:a}})=>({background:e.text.primary,borderRadius:"calc(infinity * 1px)",color:e.background.paper,insetBlockEnd:a(1),insetInlineStart:"50%",position:"absolute",translate:"-50% 0","&:hover":{background:e.text.secondary}})),B=({item:a,isActive:s})=>n(a).with({kind:"user"},({text:a})=>e(w,{children:a})).with({kind:"text"},({markdown:a,isStreaming:i})=>e(h,{markdown:a,isStreaming:i})).with({kind:"tools"},({tools:a})=>e(m,{tools:a,isActive:s})).with({kind:"separator"},()=>e(y,{role:"separator",children:e(i,{id:"sdk.assistant.thread.earlierSummarized",message:"Earlier conversation summarized"})})).exhaustive();export const AssistantThread=()=>{let{assistantSystem:t}=d(),m=o(t.chat$),{messages:h,isLoading:p,isResuming:w,earlierThreads:y}=m,{items:I,isThinking:A}=r(()=>u(h,p),[h,p]),E=r(()=>g(y),[y]),R=r(()=>I.filter(({kind:e})=>"user"===e).length,[I]),L=m.error?c(m.failedStatus):void 0,{scrollerRef:z,hasUnseenContent:C,handleScroll:$,scrollToEnd:D}=k(r(()=>({messages:h,isThinking:A,isResuming:w,failure:L?.kind}),[h,A,w,L?.kind]),R),M=!m.isLoaded&&0===E.length&&!w&&!L;return a(f,{children:[a(v,{ref:z,onScroll:$,role:"log","aria-live":"polite",children:[m.isLoaded&&0===I.length&&0===E.length&&!p&&!w&&!L&&e(b,{children:e(i,{id:"sdk.assistant.thread.greeting",message:"Hi. I can answer questions about this design and change it with you. Tell me what you need."})}),M&&e(x,{children:e(i,{id:"sdk.assistant.thread.loading",message:"Loading the conversation…"})}),m.isLoadingEarlierThread&&e(x,{children:e(i,{id:"sdk.assistant.thread.loadingEarlier",message:"Loading the earlier conversation…"})}),m.hasEarlierThread&&!m.isLoadingEarlierThread&&e(T,{size:"small",color:"inherit",onClick:t.loadEarlierThread,children:e(i,{id:"sdk.assistant.thread.showEarlier.label",message:"Show earlier conversation"})}),E.map(a=>e(B,{item:a,isActive:!1},a.id)),I.map(a=>e(B,{item:a,isActive:p&&a===I.at(-1)},a.id)),w&&e(x,{children:e(i,{id:"sdk.assistant.thread.resuming",message:"Resuming the conversation…"})}),A&&e(x,{children:e(i,{id:"sdk.assistant.thread.thinking",message:"Thinking…"})}),L&&a(S,{role:"alert",children:[e("span",{children:n(L.kind).with("notAvailable",()=>e(i,{id:"sdk.assistant.failure.notAvailable",message:"The assistant is not available here."})).with("busy",()=>e(i,{id:"sdk.assistant.failure.busy",message:"The assistant is still working on an earlier message."})).with("unavailable",()=>e(i,{id:"sdk.assistant.failure.unavailable",message:"The assistant is unavailable right now."})).exhaustive()}),L.canRetry&&e(s,{size:"small",variant:"outlined",color:"inherit",onClick:t.reloadThread,children:e(i,{id:"sdk.assistant.failure.retry.label",message:"Try again"})})]})]}),C&&e(j,{size:"small",onClick:D,endIcon:e(l,{name:"CaretDown"}),children:e(i,{id:"sdk.assistant.thread.newReply.label",message:"New reply"})})]})};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as t,styled as s}from"@mui/material";import{useCallback as r,useMemo as n}from"react";import{match as o}from"ts-pattern";import{useEagerObservableValue as l}from"#package/react-sdk";import{PhxIcon as d}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";import{AssistantToolChips as c}from"./AssistantChips.js";import{AssistantMarkdown as h}from"./AssistantMarkdown.js";import{describeAssistantFailure as p}from"./assistant-failure.js";import{EntityLinkSelectionProvider as g,useCreateEntityLinkSelection as u}from"./entity-link/index.js";import{AssistantPanelName as f}from"./theme.js";import{buildEarlierThreadItems as k,buildThreadView as v}from"./thread-items.js";import{useFollowStream as b}from"./use-follow-stream.js";let w=s("div",{name:f,slot:"thread"})({display:"grid",position:"relative"}),x=s("div",{name:f,slot:"messages"})(({theme:{spacing:e,typography:a}})=>({...a.body2,display:"flex",flexDirection:"column",gap:e(1.5),overflowY:"auto",overscrollBehavior:"contain",paddingBlock:e(2),paddingInline:`var(--phx-sidebar-padding, ${e(2)})`,"& > :first-child":{marginBlockStart:"auto"}})),y=s("div",{name:f,slot:"userMessage"})(({theme:{palette:e,spacing:a}})=>({alignSelf:"flex-end",background:`hsl(from ${e.primary.main} h s l / 12%)`,borderRadius:"14px 14px 4px 14px",maxInlineSize:"85%",overflowWrap:"anywhere",paddingBlock:a(1),paddingInline:a(1.5),whiteSpace:"pre-wrap"})),T=s("div",{name:f,slot:"greeting"})({}),C=s("div",{name:f,slot:"status"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary})),S=s("div",{name:f,slot:"separator"})(({theme:{palette:e,spacing:a,typography:i}})=>({...i.caption,alignItems:"center",color:e.text.secondary,display:"flex",gap:a(1),"&::before, &::after":{borderBlockStart:`1px solid ${e.divider}`,content:'""',flex:1}})),j=s(t,{name:f,slot:"earlierButton"})({alignSelf:"center"}),I=s("div",{name:f,slot:"notice"})(({theme:{palette:e,shape:a,spacing:i}})=>({alignItems:"center",background:e.action.hover,borderRadius:a.borderRadius,display:"flex",flexWrap:"wrap",gap:i(1),justifyContent:"space-between",paddingBlock:i(1),paddingInline:i(1.5)})),B=s(t,{name:f,slot:"newReplyButton"})(({theme:{palette:e,spacing:a}})=>({background:e.text.primary,borderRadius:"calc(infinity * 1px)",color:e.background.paper,insetBlockEnd:a(1),insetInlineStart:"50%",position:"absolute",translate:"-50% 0","&:hover":{background:e.text.secondary}})),E=({item:a,isActive:t,undoableToolCallId:s,onUndo:r})=>o(a).with({kind:"user"},({text:a})=>e(y,{children:a})).with({kind:"text"},({markdown:a,isStreaming:i,forms:t})=>e(h,{markdown:a,isStreaming:i,forms:t})).with({kind:"tools"},({tools:a})=>e(c,{tools:a,isActive:t,canUndo:a.some(({id:e})=>e===s),onUndo:r})).with({kind:"separator"},()=>e(S,{role:"separator",children:e(i,{id:"sdk.assistant.thread.earlierSummarized",message:"Earlier conversation summarized"})})).exhaustive();export const AssistantThread=()=>{let{assistantSystem:s}=m(),c=l(s.chat$),{messages:h,isLoading:f,isResuming:y,earlierThreads:S}=c,A=l(s.undoTipToolCallId$),R=f?void 0:A,{items:L,isThinking:z}=n(()=>v(h,f,y),[h,f,y]),$=n(()=>k(S),[S]),U=n(()=>L.filter(({kind:e})=>"user"===e).length,[L]),D=c.error?p(c.failedStatus):void 0,{scrollerRef:M,hasUnseenContent:W,handleScroll:q,scrollToEnd:H}=b(n(()=>({messages:h,isThinking:z,isResuming:y,failure:D?.kind}),[h,z,y,D?.kind]),U),N=u(),Y=r(e=>{e.target instanceof Element&&e.target.closest('a, button, input, label, select, textarea, [role="button"], [role="tooltip"]')||window.getSelection()?.isCollapsed!==!1&&N.release()},[N]),F=!c.isLoaded&&0===$.length&&!y&&!D;return a(w,{children:[e(g,{selection:N,children:a(x,{ref:M,onScroll:q,onClick:Y,role:"log","aria-live":"polite",children:[c.isLoaded&&0===L.length&&0===$.length&&!f&&!y&&!D&&e(T,{children:e(i,{id:"sdk.assistant.thread.greeting",message:"Hi. I can answer questions about this design and change it with you. Tell me what you need."})}),F&&e(C,{children:e(i,{id:"sdk.assistant.thread.loading",message:"Loading the conversation…"})}),c.isLoadingEarlierThread&&e(C,{children:e(i,{id:"sdk.assistant.thread.loadingEarlier",message:"Loading the earlier conversation…"})}),c.hasEarlierThread&&!c.isLoadingEarlierThread&&e(j,{size:"small",color:"inherit",onClick:s.loadEarlierThread,children:e(i,{id:"sdk.assistant.thread.showEarlier.label",message:"Show earlier conversation"})}),$.map(a=>e(E,{item:a,isActive:!1,undoableToolCallId:R,onUndo:s.undoToolCalls},a.id)),L.map(a=>e(E,{item:a,isActive:f&&a===L.at(-1),undoableToolCallId:R,onUndo:s.undoToolCalls},a.id)),y&&e(C,{children:e(i,{id:"sdk.assistant.thread.resuming",message:"Resuming the conversation…"})}),z&&e(C,{children:e(i,{id:"sdk.assistant.thread.thinking",message:"Thinking…"})}),D&&a(I,{role:"alert",children:[e("span",{children:o(D.kind).with("notAvailable",()=>e(i,{id:"sdk.assistant.failure.notAvailable",message:"The assistant is not available here."})).with("busy",()=>e(i,{id:"sdk.assistant.failure.busy",message:"The assistant is still working on an earlier message."})).with("unavailable",()=>e(i,{id:"sdk.assistant.failure.unavailable",message:"The assistant is unavailable right now."})).exhaustive()}),D.canRetry&&e(t,{size:"small",variant:"outlined",color:"inherit",onClick:s.reloadThread,children:e(i,{id:"sdk.assistant.failure.retry.label",message:"Try again"})})]})]})}),W&&e(B,{size:"small",onClick:H,endIcon:e(d,{name:"CaretDown"}),children:e(i,{id:"sdk.assistant.thread.newReply.label",message:"New reply"})})]})};

package/dist/configurator/ui/assistant/alert/AssistantAlert.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { AlertKind } from './remark-alerts.js';
+export interface AssistantAlertProps {
+    readonly kind: AlertKind;
+    readonly children: ReactNode;
+}
+/** A GitHub alert in a reply: its content as Markdown, marked by the colour and icon of its kind. */
+export declare const AssistantAlert: import("react").MemoExoticComponent<({ kind, children }: AssistantAlertProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/configurator/ui/assistant/alert/AssistantAlert.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as i}from"react/jsx-runtime";import{alpha as o,styled as t}from"@mui/material";import{memo as n}from"react";import{PhxIcon as a}from"#package/ui-sdk";import{AssistantPanelName as e}from"../theme.js";let l={note:{color:"info",icon:"Info"},tip:{color:"success",icon:"Lightbulb"},important:{color:"primary",icon:"WarningCircle"},warning:{color:"warning",icon:"Warning"},caution:{color:"error",icon:"XCircle"}},c=t("div",{name:e,slot:"alert"})(({theme:{palette:r,shape:i,spacing:t,typography:n}})=>({borderInlineStart:"3px solid",borderRadius:i.borderRadius,display:"grid",gap:t(1),gridTemplateColumns:"min-content minmax(0, 1fr)",marginBlock:t(1),padding:t(1,1.5),...Object.fromEntries(Object.entries(l).map(([i,{color:t}])=>[`&[data-alert="${i}"]`,{background:o(r[t].main,.08),borderInlineStartColor:r[t].main,"& > :first-child":{color:r[t].main}}])),"& > :last-child > :first-child":{marginBlockStart:0},"& > :last-child > :last-child":{marginBlockEnd:0},"& > :first-child":{blockSize:`calc(${n.body2.lineHeight} * 1em)`,display:"grid",placeItems:"center"}}));export const AssistantAlert=n(({kind:o,children:t})=>i(c,{role:"note","data-alert":o,children:[r("span",{children:r(a,{name:l[o].icon})}),r("div",{children:t})]}));

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

@@ -0,0 +1,2 @@
+export { AssistantAlert } from './AssistantAlert.js';
+export { isAlertKind, remarkAlerts } from './remark-alerts.js';

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

@@ -0,0 +1 @@
+export{AssistantAlert}from"./AssistantAlert.js";export{isAlertKind,remarkAlerts}from"./remark-alerts.js";

package/dist/configurator/ui/assistant/alert/remark-alerts.d.ts

@@ -0,0 +1,10 @@
+import type { Root } from 'mdast';
+/** The kinds of GitHub alerts a reply can write, each with its own colour and icon. */
+export type AlertKind = 'note' | 'tip' | 'important' | 'warning' | 'caution';
+export declare const isAlertKind: (value: unknown) => value is AlertKind;
+/**
+ * Remark plugin for GitHub alerts: a blockquote whose first line is a marker such as `[!WARNING]`
+ * loses the marker and carries its kind as the `dataAlert` property (`data-alert` in the page), for the `blockquote` override to render as a
+ * callout. A blockquote with an unknown marker stays as it is.
+ */
+export declare const remarkAlerts: () => (tree: Root) => void;

package/dist/configurator/ui/assistant/alert/remark-alerts.js

@@ -0,0 +1 @@
+let e=["note","tip","important","warning","caution"],t=/^\[!([a-z]+)\][ \t]*(?:\n|$)/i;export const isAlertKind=t=>"string"==typeof t&&e.some(e=>e===t);let r=e=>{let[r]=e.children;if(r?.type!=="paragraph")return;let[n,l]=r.children;if(n?.type!=="text")return;let i=t.exec(n.value),a=i?.[1]?.toLowerCase();if(null==i||!isAlertKind(a))return;let o=n.value.slice(i[0].length),c=!i[0].endsWith("\n")&&l?.type==="break";if(i[0].endsWith("\n")||null==l||c)return""===o?r.children.splice(0,c?2:1):n.value=o,0===r.children.length&&e.children.shift(),a},n=e=>{for(let t of e){if("blockquote"===t.type){let e=r(t);if(null!=e){t.data={...t.data,hProperties:{...t.data?.hProperties,dataAlert:e}};continue}}"children"in t&&n(t.children)}};export const remarkAlerts=()=>e=>{n(e.children)};

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

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type DomainEntityId } from '#package/domain';
+export interface AssistantEntityLinkProps {
+    readonly id: DomainEntityId<string>;
+    /** The text the assistant gave the link; the id itself is never shown. */
+    readonly children: ReactNode;
+}
+/**
+ * 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 muted once the entity is gone.
+ */
+export declare const AssistantEntityLink: import("react").MemoExoticComponent<({ id, children }: AssistantEntityLinkProps) => import("react/jsx-runtime").JSX.Element>;

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

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

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

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import type { DomainEntityId } from '#package/domain';
+/**
+ * The selection an entity link made, held for the thread the links are in. A click elsewhere in
+ * the thread takes back what a link selected, so a user can look at an entity and let it go again.
+ * A selection made anywhere else, in the scene, a hotspot or the sidebar, is never taken back.
+ */
+export interface EntityLinkSelection {
+    /** Records that a link is selecting this entity; call it before the select update is committed. */
+    readonly remember: (id: DomainEntityId<string>) => void;
+    /** Deselects the entity a link selected, when it is still the selected one, and forgets it. */
+    readonly release: () => void;
+}
+/** Creates the selection the entity links of one thread share; the thread provides it to them. */
+export declare const useCreateEntityLinkSelection: () => EntityLinkSelection;
+export interface EntityLinkSelectionProviderProps {
+    readonly selection: EntityLinkSelection;
+    readonly children: ReactNode;
+}
+export declare const EntityLinkSelectionProvider: ({ selection, children }: EntityLinkSelectionProviderProps) => import("react/jsx-runtime").JSX.Element;
+/** The selection of the thread the link is in, or `null` for a link rendered outside a thread. */
+export declare const useEntityLinkSelection: () => EntityLinkSelection | null;

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{createContext as e,useCallback as r,useContext as n,useEffect as l,useMemo as c,useRef as i}from"react";import{useDeselect as o,useDomain as u,useSelectedDomainEntityId as a}from"#package/react-sdk";let s=e(null);export const useCreateEntityLinkSelection=()=>{let{storeSystem:t,navigationSystem:e}=u(),n=o(),s=a(),m=i(null);l(()=>{s!==m.current&&(m.current=null)},[s]);let p=r(t=>{m.current=t},[]),S=r(()=>{let r=m.current;m.current=null,null!=r&&e.getActiveSelectionState(t.stateSlices.committed.value.state)===r&&n()},[n,e,t]);return c(()=>({remember:p,release:S}),[p,S])};export const EntityLinkSelectionProvider=({selection:e,children:r})=>t(s.Provider,{value:e,children:r});export const useEntityLinkSelection=()=>n(s);

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

@@ -0,0 +1,27 @@
+/** What is attached right now to an existing entity that an entity link points at. */
+export interface EntityLinkFacts {
+    /** A `selectable` component is attached to the entity under the current filters. */
+    readonly isSelectable: boolean;
+    /** The attached `selectable` component switches hover off with `hoverable: false`. */
+    readonly isHoverDisabled: boolean;
+    /** A `sceneEntitySelectHotspot` component is attached to the entity under the current filters. */
+    readonly hasSelectHotspot: boolean;
+}
+/**
+ * How an entity link shows and behaves:
+ *
+ * - `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.
+ */
+export type EntityLinkKind = 'missing' | 'plain' | 'interactive';
+/** The state of a link to an entity that exists; a link to one that is gone is `missing` without it. */
+export interface EntityLinkState {
+    readonly kind: Exclude<EntityLinkKind, 'missing'>;
+    /**
+     * The link sends its hover to the scene and shows the hover of the scene. Only an entity the
+     * scene itself can hover takes part, so one that is selected through a hotspot alone does not.
+     */
+    readonly canHover: boolean;
+}
+export declare const resolveEntityLinkState: (facts: EntityLinkFacts) => EntityLinkState;

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

@@ -0,0 +1 @@
+export const resolveEntityLinkState=e=>{let{isSelectable:n,isHoverDisabled:t,hasSelectHotspot:i}=e;return n||i?{kind:"interactive",canHover:n&&!t}:{kind:"plain",canHover:!1}};

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

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

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

@@ -0,0 +1 @@
+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,19 @@
+/**
+ * Where a form stands in its reply: still being written, written while the reply goes on, or ready
+ * for the user once the reply has ended.
+ */
+export type AssistantFormStatus = 'writing' | 'waiting' | 'ready';
+export interface AssistantFormProps {
+    /** 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<({ source, status }: AssistantFormProps) => import("react/jsx-runtime").JSX.Element | null>;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Trans as r}from"@lingui/react";import{Button as o,styled as t}from"@mui/material";import{memo as n,useCallback as a,useEffect as s,useMemo as l,useState as d}from"react";import{match as m}from"ts-pattern";import{useConfigurator as c}from"../../../application-runtime/index.js";import{AssistantPanelName as p}from"../theme.js";import{composeAnswer as u}from"./compose-answer.js";import{describeBuildErrors as b}from"./describe-build-errors.js";import{parseFormBlock as f}from"./parse-form-block.js";import{useFormRegistry as g}from"./registry/index.js";let h=t("div",{name:p,slot:"form"})(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",gap:e(1.5),marginBlock:e(1)})),k=t(o,{name:p,slot:"formSubmit"})(({theme:{palette:e,spacing:i,typography:r}})=>({...r.body2,alignSelf:"end",background:e.primary.main,border:"none",borderRadius:8,color:e.primary.contrastText,fontWeight:r.fontWeightMedium,letterSpacing:"normal",minBlockSize:0,minInlineSize:0,paddingBlock:i(.5),paddingInline:i(2),textTransform:"none","&:hover":{background:e.primary.dark,border:"none"},"&.Mui-disabled":{background:e.action.disabledBackground,border:"none",color:e.action.disabled}})),w=t("div",{name:p,slot:"formNote"})(({theme:{palette:e,shape:i,spacing:r,typography:o}})=>({...o.caption,alignItems:"center",background:e.action.hover,borderRadius:i.borderRadius,color:e.text.secondary,display:"flex",flexWrap:"wrap",gap:r(1),justifyContent:"space-between",marginBlock:r(1),paddingBlock:r(1),paddingInline:r(1.5)})),x=({model:o,disabled:t,send:n})=>{let[a,s]=d(()=>new Map),[l,c]=d(()=>new Map),p=(i,r)=>{let{id:l,definition:d,label:b,attributes:f}=i;return m(d).with({role:"option"},({component:d})=>e(d,{attributes:f,label:b,disabled:t,selected:!0===a.get(l),onSelect:e=>{o.isQuick?n(u(o,new Map([[i.id,!0]]),new Map([[i.id,e]]))):(c(r=>new Map(r).set(i.id,e)),s(e=>{let o=new Map(e);if("choice"===r.definition.role){for(let e of r.children)o.delete(e.id);o.set(i.id,!0)}else o.set(i.id,!0!==e.get(i.id));return o}))}},l)).with({role:"input"},({component:r})=>e(r,{attributes:f,label:b,disabled:t,state:a.get(l),onChange:(e,r)=>{o.isQuick?n(u(o,new Map([[i.id,e]]),new Map([[i.id,r]]))):(s(r=>new Map(r).set(i.id,e)),c(e=>new Map(e).set(i.id,r)))}},l)).with({role:"group"},{role:"choice"},{role:"choices"},({component:r})=>e(r,{attributes:f,label:b,disabled:t,children:i.children.map(e=>p(e,i))},l)).exhaustive()};return i(h,{children:[o.root.children.map(e=>p(e,o.root)),!o.isQuick&&e(k,{variant:"contained",disabled:t,disableElevation:!0,onClick:()=>{t||o.isQuick||n(u(o,a,l))},children:e(r,{id:"sdk.assistant.form.submit.label",message:"Submit"})})]})};export const AssistantForm=n(({source:t,status:n})=>{let{assistantSystem:m}=c(),[p,u]=d(!1),h="writing"===n,k=g(),M=l(()=>h?void 0:f(t,k),[t,h,k]),y="ready"!==n||p,j=a(e=>{u(!0),m.send(e).finally(()=>u(!1))},[m]);return(s(()=>{M?.ok===!1&&console.warn("The assistant wrote a form that could not be built.",M.errors)},[M]),M)?M.ok?0===M.root.children.length?null:e(x,{model:M,disabled:y,send:j}):i(w,{role:"alert",children:[e("span",{children:e(r,{id:"sdk.assistant.form.failure",message:"The assistant couldn't build this form."})}),e(o,{size:"small",variant:"outlined",color:"inherit",disabled:y,onClick:()=>j(b(M.errors)),children:e(r,{id:"sdk.assistant.form.fix.label",message:"Fix it"})})]}):e(w,{children:e(r,{id:"sdk.assistant.form.writing",message:"Preparing a form…"})})});

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,4 @@
+export { AssistantForm } from './AssistantForm.js';
+export type { AssistantFormStatus } from './AssistantForm.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,3 @@
+import { type FormElementDefinition } from './form-element-definition.js';
+/** 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[];

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

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

@@ -0,0 +1,9 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormInputProps } from './form-element-props.js';
+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 i,styled as a}from"@mui/material";import{useLocalizable as o}from"#package/react-sdk";import{PhxIcon as t}from"#package/ui-sdk";import{AssistantPanelName as n}from"../theme.js";let s={id:"sdk.assistant.form.confirm.yes",message:"Yes"},l={id:"sdk.assistant.form.confirm.no",message:"No"},d=a("div",{name:n,slot:"formConfirm"})(({theme:{palette:e,spacing:r,typography:i}})=>({...i.caption,color:e.text.secondary,display:"grid",gap:r(.75)})),m=a("div",{name:n,slot:"formConfirmButtons"})(({theme:{spacing:e}})=>({display:"flex",gap:e(.75)})),c=a("button",{name:n,slot:"formConfirmButton"})(({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:i(e.primary.main,e.action.selectedOpacity),borderColor:e.primary.main}}));export const FormConfirm=({label:i,disabled:a,state:n,onChange:p})=>{let f=o(s),u=o(l);return r(d,{role:"group","aria-label":i,children:[null!=i&&e("span",{"aria-hidden":!0,children:i}),r(m,{children:[e(c,{type:"button","aria-label":f,title:f,disabled:a,"aria-pressed":!0===n,onClick:()=>p(!0,f),children:e(t,{name:"Check",fontSize:"small"})}),e(c,{type:"button","aria-label":u,title:u,disabled:a,"aria-pressed":!1===n,onClick:()=>p(!1,u),children:e(t,{name:"X",fontSize:"small"})})]})]})};