@salsita-ai/sdk 0.50.0-develop.8f92f00b12 → 0.50.0-develop.9239ced550

package/dist/configurator/configurator-error-page/ConfiguratorErrorPageElement.d.ts

@@ -1,9 +1,4 @@
 import { type ConfiguratorErrorPageProps } from '#package/react-sdk';
-/**
- * The name a project registers a layout element under to replace the configurator's production error
- * page. Its default, `BuiltInConfiguratorErrorPage`, is registered in `defaultConfiguratorElements`.
- */
-export declare const ConfiguratorErrorPageName = "ConfiguratorErrorPage";
 /**
  * Renders the `ConfiguratorErrorPage` element. The page is shown after something already failed, so
  * a registered page that throws in turn falls back to the built-in page instead of taking the

package/dist/configurator/configurator-error-page/ConfiguratorErrorPageElement.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{useCallback as e}from"react";import{ErrorBoundary as o}from"react-error-boundary";import{PhoenixLayoutElement as t,useLogger as a,usePhoenixElementSlots as n}from"#package/react-sdk";import{BuiltInConfiguratorErrorPage as i}from"./BuiltInConfiguratorErrorPage.js";export const ConfiguratorErrorPageName="ConfiguratorErrorPage";export const ConfiguratorErrorPageElement=g=>{let m=a(),{layoutElements:s}=n(),f=e(r=>{m.error("The ConfiguratorErrorPage element threw while rendering, so the built-in error page is shown instead. Fix the error in the registered ConfiguratorErrorPage element.",{},r)},[m]);return r(o,{fallback:r(i,{...g}),onError:f,resetKeys:[s[ConfiguratorErrorPageName]],children:r(t,{name:ConfiguratorErrorPageName,elementProps:{...g}})})};
+import{jsx as r}from"react/jsx-runtime";import{useCallback as e}from"react";import{ErrorBoundary as o}from"react-error-boundary";import{ConfiguratorErrorPageName as t,ConfiguratorErrorPagePropsProvider as n,PhoenixLayoutElement as a,useLogger as i,usePhoenixElementSlots as m}from"#package/react-sdk";import{BuiltInConfiguratorErrorPage as s}from"./BuiltInConfiguratorErrorPage.js";export const ConfiguratorErrorPageElement=l=>{let g=i(),{layoutElements:f}=m(),u=e(r=>{g.error("The ConfiguratorErrorPage element threw while rendering, so the built-in error page is shown instead. Fix the error in the registered ConfiguratorErrorPage element.",{},r)},[g]);return r(n,{value:l,children:r(o,{fallback:r(s,{}),onError:u,resetKeys:[f[t]],children:r(a,{name:t,elementProps:{...l}})})})};

package/dist/configurator/configurator-error-page/index.d.ts

@@ -1,3 +1,2 @@
 export { BuiltInConfiguratorErrorPage } from './BuiltInConfiguratorErrorPage.js';
-export { ConfiguratorErrorPageElement, ConfiguratorErrorPageName } from './ConfiguratorErrorPageElement.js';
-export { createConfiguratorErrorPage, type CreateConfiguratorErrorPage } from './create-configurator-error-page.js';
+export { ConfiguratorErrorPageElement } from './ConfiguratorErrorPageElement.js';

package/dist/configurator/configurator-error-page/index.js

@@ -1 +1 @@
-export{BuiltInConfiguratorErrorPage}from"./BuiltInConfiguratorErrorPage.js";export{ConfiguratorErrorPageElement,ConfiguratorErrorPageName}from"./ConfiguratorErrorPageElement.js";export{createConfiguratorErrorPage}from"./create-configurator-error-page.js";
+export{BuiltInConfiguratorErrorPage}from"./BuiltInConfiguratorErrorPage.js";export{ConfiguratorErrorPageElement}from"./ConfiguratorErrorPageElement.js";

package/dist/configurator/index.d.ts

@@ -1,6 +1,13 @@
 export { ConfiguratorApp } from './ConfiguratorApp.js';
-export { createConfigurationNotFoundPage, type CreateConfigurationNotFoundPage, } from './configuration-not-found-page/index.js';
-export { createConfiguratorErrorPage, type CreateConfiguratorErrorPage } from './configurator-error-page/index.js';
+export { 
+/** @deprecated Use `createConfigurationNotFoundPage` from `@salsita-ai/sdk/react`. */
+createConfigurationNotFoundPage, 
+/** @deprecated Use `CreateConfigurationNotFoundPage` from `@salsita-ai/sdk/react`. */
+type CreateConfigurationNotFoundPage, 
+/** @deprecated Use `createConfiguratorErrorPage` from `@salsita-ai/sdk/react`. */
+createConfiguratorErrorPage, 
+/** @deprecated Use `CreateConfiguratorErrorPage` from `@salsita-ai/sdk/react`. */
+type CreateConfiguratorErrorPage, } from '#package/react-sdk';
 export * from './application-runtime/index.js';
 export * from './common/index.js';
 export * from './toolbar-actions/index.js';

package/dist/configurator/index.js

@@ -1 +1 @@
-export{ConfiguratorApp}from"./ConfiguratorApp.js";export{createConfigurationNotFoundPage}from"./configuration-not-found-page/index.js";export{createConfiguratorErrorPage}from"./configurator-error-page/index.js";export*from"./application-runtime/index.js";export*from"./common/index.js";export*from"./toolbar-actions/index.js";export*from"./configurator-context/index.js";export*from"./pages/index.js";export*from"./scene/index.js";export*from"./ui/index.js";export*from"./integration/index.js";
+export{ConfiguratorApp}from"./ConfiguratorApp.js";export{createConfigurationNotFoundPage,createConfiguratorErrorPage}from"#package/react-sdk";export*from"./application-runtime/index.js";export*from"./common/index.js";export*from"./toolbar-actions/index.js";export*from"./configurator-context/index.js";export*from"./pages/index.js";export*from"./scene/index.js";export*from"./ui/index.js";export*from"./integration/index.js";

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

@@ -1 +1 @@
-import{createCustomPhoenixLayoutElement as o}from"#package/domain";import{ConfigurationNotFoundPage as r,createNotAuthenticatedPage as t}from"#package/react-sdk";import{AppLoaderContentName as e,DefaultAppLoaderContent as i}from"../app-loader-content/index.js";import{createConfigurationNotFoundPage as m}from"../configuration-not-found-page/index.js";import{BuiltInConfiguratorErrorPage as a,createConfiguratorErrorPage as f}from"../configurator-error-page/index.js";import{createPresetUi as n}from"../ui/index.js";import{DefaultConfiguratorLayout as p}from"./DefaultConfiguratorLayout.js";import{DefaultNotAuthenticatedPage as u}from"./DefaultNotAuthenticatedPage.js";import{DefaultPresetUi as s}from"./DefaultPresetUi.js";import{ConfiguratorLayoutName as d}from"./configurator-layout-name.js";import{domainControlElements as g,recipePanelElements as c,sceneControlElements as j,sidebarFooterElements as l,toolbarElements as x}from"./default-elements/index.js";export const defaultConfiguratorElements=[o(d,p),m(r),t(u),n(s),f(a),o(e,i),...g,...c,...j,...x,...l];
+import{createCustomPhoenixLayoutElement as o}from"#package/domain";import{AppLoaderContentName as r,ConfigurationNotFoundPageName as t,ConfiguratorErrorPageName as e,createNotAuthenticatedPage as a,createPresetUi as m}from"#package/react-sdk";import{DefaultAppLoaderContent as i}from"../app-loader-content/index.js";import{BuiltInConfigurationNotFoundPage as f}from"../configuration-not-found-page/index.js";import{BuiltInConfiguratorErrorPage as n}from"../configurator-error-page/index.js";import{DefaultConfiguratorLayout as p}from"./DefaultConfiguratorLayout.js";import{DefaultNotAuthenticatedPage as u}from"./DefaultNotAuthenticatedPage.js";import{DefaultPresetUi as s}from"./DefaultPresetUi.js";import{ConfiguratorLayoutName as d}from"./configurator-layout-name.js";import{domainControlElements as g,recipePanelElements as c,sceneControlElements as l,sidebarFooterElements as j,toolbarElements as x}from"./default-elements/index.js";export const defaultConfiguratorElements=[o(d,p),o(t,f),a(u),m(s),o(e,n),o(r,i),...g,...c,...l,...x,...j];

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

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{useCallback as o}from"react";import{ErrorBoundary as t}from"react-error-boundary";import{useLoadingStateManager as e}from"#package/react-sdk";export const LoadingErrorBoundary=a=>{let{onError:m,onReset:n,...c}=a,p=e(),i=o((r,o)=>{p?.reportError(),m?.(r,o)},[p,m]),s=o(r=>{p?.clearError(),n?.(r)},[p,n]);return r(t,{...c,onError:i,onReset:s})};
+import{jsx as r}from"react/jsx-runtime";import{useCallback as o}from"react";import{ErrorBoundary as t}from"react-error-boundary";import{useLoadingActions as e}from"#package/react-sdk";export const LoadingErrorBoundary=a=>{let{onError:m,onReset:n,...c}=a,p=e(),i=o((r,o)=>{p?.reportError(),m?.(r,o)},[p,m]),s=o(r=>{p?.clearError(),n?.(r)},[p,n]);return r(t,{...c,onError:i,onReset:s})};

package/dist/configurator/toolbar-actions/index.d.ts

@@ -1,2 +1,3 @@
 export { useMeasurements, type UseMeasurements, type UseMeasurementsOptions, type UseMeasurementsResult, } from './use-measurements.js';
 export { useAssistantPanel, type UseAssistantPanel, type UseAssistantPanelResult } from './use-assistant-panel.js';
+export { useToolbarActions, type UseToolbarActions, type UseToolbarActionsResult, type ToolbarAction, type ToolbarPlacement, } from './use-toolbar-actions.js';

package/dist/configurator/toolbar-actions/index.js

@@ -1 +1 @@
-export{useMeasurements}from"./use-measurements.js";export{useAssistantPanel}from"./use-assistant-panel.js";
+export{useMeasurements}from"./use-measurements.js";export{useAssistantPanel}from"./use-assistant-panel.js";export{useToolbarActions}from"./use-toolbar-actions.js";

package/dist/configurator/toolbar-actions/use-toolbar-actions.d.ts

@@ -0,0 +1,100 @@
+import { type ComponentType } from 'react';
+import type { DimensionUnit } from '#package/domain';
+import { type UseLocaleSwitchResult } from '#package/react-sdk';
+import { type UseAssistantPanelResult } from './use-assistant-panel.js';
+import { type UseMeasurementsResult } from './use-measurements.js';
+/** Which of the spec's toolbar lists to read: `toolbar.desktop`, `toolbar.mobile` or `toolbar.mobileMenu`. */
+export type ToolbarPlacement = 'desktop' | 'mobile' | 'mobileMenu';
+interface ToolbarEntryBase {
+    /** Stable for the entry's placement, group and position, to key the rendered list */
+    readonly key: string;
+    /** The element's `icon` prop, when its kind has one and the spec sets it */
+    readonly icon: string | undefined;
+    /**
+     * The element's `showTitle` prop, else the built-in button's default: `true` for the assistant, else `false`. The
+     * built-in assistant button also hides its title on a phone or tablet-sized layout; the layout decides that here.
+     */
+    readonly showTitle: boolean;
+    /** The built-in button's title in the current language, such as "Undo" or "Share"; a custom entry's `name` */
+    readonly label: string;
+}
+/**
+ * One entry of the toolbar, by `kind`:
+ * - `undo`, `redo`: `run` undoes or redoes as `useUndoRedo` does; `disabled` while there is nothing to undo or redo.
+ * - `fullscreen`: `active` is the fullscreen flag, `run` toggles it and pushes the built-in button's analytics event.
+ * - `resetCamera`: `run` resets the camera as `useResetCamera` does.
+ * - `share`: the layout opens its own share dialog, which calls `useShareLinks`.
+ * - `measurements`: the layout opens its own settings over `measurements`, the result of `useMeasurements` with the
+ *   element's `showIndicatorSwitch` applied; `icons` is the element's icon per unit, when the spec sets it.
+ * - `language`: the layout opens its own language list over `language`, the result of `useLocaleSwitch`.
+ * - `help`: `Content` renders the help, the element's children or else the help registered with
+ *   `createToolbarHelp`, for the layout's own dialog. The built-in menu action falls back to nothing instead.
+ * - `assistant`: `run` opens or closes the assistant panel; `assistant` is the result of `useAssistantPanel`.
+ * - `custom`: `Element` renders the project element the spec's `customLayoutElement` names.
+ */
+export type ToolbarAction = (ToolbarEntryBase & {
+    readonly kind: 'undo';
+    readonly disabled: boolean;
+    readonly run: () => void;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'redo';
+    readonly disabled: boolean;
+    readonly run: () => void;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'fullscreen';
+    readonly active: boolean;
+    readonly run: () => void;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'resetCamera';
+    readonly run: () => void;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'share';
+}) | (ToolbarEntryBase & {
+    readonly kind: 'measurements';
+    readonly measurements: UseMeasurementsResult;
+    readonly icons: Partial<Record<DimensionUnit, string>> | undefined;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'language';
+    readonly language: UseLocaleSwitchResult;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'help';
+    readonly Content: ComponentType;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'assistant';
+    readonly assistant: UseAssistantPanelResult;
+    readonly run: () => void;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'custom';
+    readonly name: string;
+    readonly Element: ComponentType;
+});
+export interface UseToolbarActionsResult {
+    /**
+     * The spec's groups (`toolbarButtonGroup`), each a list of entries; an entry outside a group is a group of one, and
+     * a group nested in a group is flattened into it, where the built-in toolbar nests it
+     */
+    readonly groups: readonly (readonly ToolbarAction[])[];
+    /** The same entries, flattened */
+    readonly actions: readonly ToolbarAction[];
+}
+export type UseToolbarActions = (placement?: ToolbarPlacement) => UseToolbarActionsResult;
+/**
+ * Hook to build a project layout's toolbar from the spec's `toolbar`, as the built-in `LayoutSlots.DesktopToolbar`,
+ * `LayoutSlots.MobileToolbar` and `LayoutSlots.MobileHamburgerMenu` do, as runnable entries instead of buttons.
+ * - It reads the first active root `toolbar` component's list for `placement` (`'desktop'` by default). Without
+ *   one, it reads the default toolbar, which follows fullscreen and, for a viewer, leaves out share, undo and redo.
+ * - It leaves out an entry with nothing to offer: share when sharing is disabled, measurements or language with
+ *   nothing to choose, help without content, the assistant without one in the spec. It leaves out an element that is
+ *   not a toolbar entry, with a warning in development.
+ * - A project element registered under a built-in kind, such as `undoToolbarButton`, replaces that button in the
+ *   built-in toolbar but not here: the entry stays the built-in action.
+ * - It differs from the built-in toolbar in four ways: the entries keep the spec's order for every placement, where
+ *   `LayoutSlots.MobileToolbar` renders the `mobile` list reversed; a group nested in a group is flattened into it;
+ *   the assistant's `showTitle` is the spec's, where the built-in button also hides its title on a phone or
+ *   tablet-sized layout; and a `helpMenuAction` without children shows the registered help.
+ *
+ * The actions push the analytics events of the built-in buttons. Opening and closing the layout's own dialogs and
+ * popovers push none; the layout pushes its own through `useAnalytics`.
+ */
+export declare const useToolbarActions: UseToolbarActions;
+export {};

package/dist/configurator/toolbar-actions/use-toolbar-actions.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useCallback as t,useEffect as n,useMemo as a,useRef as o}from"react";import{P as r,match as s}from"ts-pattern";import{FrontendAnalyticsFactory as l,PhoenixLayoutElementWithChildren as i,PhoenixLayoutElements as u,useAnalyticsService as d,useIsDev as m,useIsFullscreenActive as p,useLocaleSwitch as b,useResolveLocalizable as c,useSetFullscreen as g,useShareLinks as h,useStoreSelector as k,useUndoRedo as T}from"#package/react-sdk";import{useConfigurator as B}from"../application-runtime/index.js";import{useAssistantPanel as f}from"./use-assistant-panel.js";import{useMeasurements as w}from"./use-measurements.js";import{useToolbarHelp as A}from"./use-toolbar-help.js";let v={undo:{id:"sdk.toolbar.undoRedo.undo.label",message:"Undo"},redo:{id:"sdk.toolbar.undoRedo.redo.label",message:"Redo"},enterFullscreen:{id:"sdk.toolbar.fullscreen.enter.label",message:"Open fullscreen"},exitFullscreen:{id:"sdk.toolbar.fullscreen.exit.label",message:"Exit fullscreen"},resetCamera:{id:"sdk.toolbar.camera.reset.label",message:"Reset camera"},shareToolbarButton:{id:"sdk.toolbar.share.open.label",message:"Share"},shareMenuAction:{id:"sdk.layout.menu.hamburger.share.label",message:"Share configuration"},measurementsToolbarButton:{id:"sdk.measurements",message:"Change measure"},measurementsMenuAction:{id:"sdk.layout.menu.measurements.label",message:"Change measure"},languageToolbarButton:{id:"sdk.toolbar.language.title",message:"Switch language"},languageMenuAction:{id:"sdk.layout.hamburgerMenu.language.label",message:"Change Language"},helpToolbarButton:{id:"sdk.toolbar.help.label",message:"Help"},helpMenuAction:{id:"sdk.layout.menu.hamburger.help.label",message:"Show help"},assistant:{id:"sdk.assistant.toolbarButton.label",message:"Assistant"}},C=(e,t,n=!1)=>({key:e,icon:t?.icon,showTitle:t?.showTitle??n});export const useToolbarActions=(M="desktop")=>{let{layoutSystem:P,cameraControlSystem:x}=B(),S=k(e=>P.getToolbarState(e.state),[P])[M],y=d(),$=c(),F=m(),R=T(),j=p(),L=g(),E=h({enabled:!1}),G=w(),D=b(),I=f(),O=A(),U=t(()=>{y.push(l.FullScreenModeToggled()),L(!j)},[y,L,j]),H=t(()=>{x.resetCamera()},[x]),W=t(()=>{I.setOpen(!I.open)},[I]),q=o(new WeakMap),z=t((e,t)=>{let n=q.current.get(e);if(n)return n;let a=()=>t();return q.current.set(e,a),a},[]),J=a(()=>{let t=[],n=(n,a)=>s(n).returnType().with({kind:"undoToolbarButton"},e=>({...C(a,e.props),kind:"undo",label:$(v.undo),disabled:!R.canUndo,run:R.undo})).with({kind:"redoToolbarButton"},e=>({...C(a,e.props),kind:"redo",label:$(v.redo),disabled:!R.canRedo,run:R.redo})).with({kind:r.union("enterFullscreenToolbarButton","exitFullscreenToolbarButton")},e=>({...C(a,e.props),kind:"fullscreen",label:$(j?v.exitFullscreen:v.enterFullscreen),active:j,run:U})).with({kind:"resetCameraToolbarButton"},e=>({...C(a,e.props),kind:"resetCamera",label:$(v.resetCamera),run:H})).with({kind:r.union("shareToolbarButton","shareMenuAction")},e=>E.available?{...C(a,e.props),kind:"share",label:$(v[e.kind])}:null).with({kind:r.union("measurementsToolbarButton","measurementsMenuAction")},e=>{let t=e.props?.showIndicatorSwitch??G.hasIndicatorSwitch,n=G.units.length>1||t;return n?{...C(a,void 0),kind:"measurements",label:$(v[e.kind]),measurements:{...G,hasIndicatorSwitch:t,available:n},icons:e.props?.icons}:null}).with({kind:r.union("languageToolbarButton","languageMenuAction")},e=>D.available?{...C(a,void 0),kind:"language",label:$(v[e.kind]),language:D}:null).with({kind:r.union("helpToolbarButton","helpMenuAction")},t=>{let{children:n}=t,o=void 0!==n?z(t,()=>e(u,{elements:n})):O;return o?{...C(a,t.props),kind:"help",label:$(v[t.kind]),Content:o}:null}).with({kind:"assistantToolbarButton"},e=>I.available?{...C(a,e.props,!0),kind:"assistant",label:$(v.assistant),assistant:I,run:W}:null).with({kind:"customLayoutElement"},t=>({...C(a,void 0),kind:"custom",label:t.props.name,name:t.props.name,Element:z(t,()=>e(i,{kind:t.kind,elementProps:t.props,children:t.children}))})).with({kind:r.union("toolbarButtonGroup","adminConnectedResourcePage","adminDataTableActions","adminDataTablePage","adminPresetActions","adminPresetCategoryActions","adminPresetCategoryPage","adminPresetListPage","adminRecipeActions","adminRecipeCollectionPage","enterSummaryButton","footerPrice","mainFooterActions","nextStepButton","otherActions","previousStepButton","saveTemplateButton","stepLabel","stepProgress")},e=>(t.push(e.kind),null)).exhaustive(),a=(e,t)=>{if("toolbarButtonGroup"!==e.kind){let a=n(e,`${t}-0`);return a?[a]:[]}return(e.children??[]).flatMap((e,o)=>"toolbarButtonGroup"===e.kind?a(e,`${t}-${o}`):n(e,`${t}-${o}`)??[])},o=(S??[]).map((e,t)=>a(e,`${M}-${t}`)).filter(e=>e.length>0);return{groups:o,actions:o.flat(),unsupported:t}},[S,M,$,R,j,U,H,E.available,G,D,I,W,O,z]),K=J.unsupported.join(", ");return n(()=>{F&&K&&console.warn(`useToolbarActions('${M}') leaves out elements that are not toolbar entries: ${K}.`)},[F,M,K]),a(()=>({groups:J.groups,actions:J.actions}),[J])};

package/dist/configurator/toolbar-actions/use-toolbar-help.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentType } from 'react';
+export type UseToolbarHelp = () => ComponentType | null;
+/**
+ * Internal to `useToolbarActions`, not public: the help the project registers with the deprecated
+ * `createToolbarHelp`, which the default toolbar's help button shows, as a component, or `null` without one.
+ */
+export declare const useToolbarHelp: UseToolbarHelp;

package/dist/configurator/toolbar-actions/use-toolbar-help.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{PhoenixLayoutElement as t,usePhoenixLayoutElementExists as o}from"#package/react-sdk";import{toolbarHelpElementName as r}from"../application-runtime/index.js";let l=()=>e(t,{name:r,elementProps:{},defaultSlot:()=>null});export const useToolbarHelp=()=>o(r)?l:null;

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

@@ -9,8 +9,9 @@ export interface AssistantToolChipsProps {
     readonly onUndo: (toolCallIds: ReadonlySet<string>) => void;
 }
 /**
- * A row of notes on what the assistant did in a reply, one per tool call. A click on a note logs
- * the input and the result of its call to the console. While one of the row's changes is the step
+ * A row of notes on what the assistant did in a reply, one per tool call, and one for the
+ * screenshots of a call that took any. A click on a call's note logs the input and the result of
+ * its call to the console. While one of the row's changes is the step
  * of the undo history the configuration is at, an Undo after the notes takes the row's changes
  * back, up to a change the user made in between.
  */

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ButtonBase as i,Tooltip as a,styled as n}from"@mui/material";import{memo as o,useCallback as s}from"react";import{match as r}from"ts-pattern";import{useLocalizable as d}from"#package/react-sdk";import{PhxIcon as l}from"#package/ui-sdk";import{AssistantPanelName as m}from"./theme.js";let c={id:"sdk.assistant.tool.updateDesign.label",message:"Update design"},p={id:"sdk.assistant.tool.readDesign.label",message:"Read design"},h={id:"sdk.assistant.tool.mistake.hint",message:"The assistant made a mistake."},u={id:"sdk.assistant.tool.cancelled.hint",message:"Stopped before it finished."},f={id:"sdk.assistant.tool.noResult.hint",message:"The result of this step was lost. It may or may not have been done."},g={id:"sdk.assistant.tool.toolBudget.hint",message:"Not done: the assistant reached its limit of steps for one message."},k={id:"sdk.assistant.tool.undo.label",message:"Undo"},x=n("div",{name:m,slot:"chips"})(({theme:{palette:e,spacing:t,typography:i}})=>({...i.caption,alignItems:"start",color:e.text.secondary,display:"grid",gap:t(.75),gridTemplateColumns:"min-content minmax(0, 1fr)"})),y=n("span",{name:m,slot:"activity"})(({theme:{typography:e}})=>({blockSize:`calc(${e.caption.lineHeight} * 1em)`,display:"grid",placeItems:"center"})),w=n(l,{name:m,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"}}}),b=n("span",{name:m,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}})),v=n(i,{name:m,slot:"undoButton"})(({theme:{palette:e,shape:t,spacing:i}})=>({alignItems:"center",animation:"phx-assistant-undo-in 150ms ease-out",borderRadius:t.borderRadius,color:e.primary.main,display:"inline-flex",font:"inherit",gap:i(.5),marginInlineStart:i(1),verticalAlign:"top","&:hover":{textDecoration:"underline"},"@media (prefers-reduced-motion: reduce)":{animation:"none"},"@keyframes phx-assistant-undo-in":{from:{opacity:0}}})),C=o(({tool:t})=>{let{chip:i,input:n,result:o}=t,l=d(c),m=d(p),k=d(h),x=d(u),y=d(f),w=d(g),v=r(i.label).with({kind:"text"},({text:e})=>e).with({kind:"updateDesign"},()=>l).with({kind:"readDesign"},()=>m).exhaustive(),C=s(()=>{console.info(`Assistant tool call "${v}"`,{input:n,result:o})},[n,v,o]);return e(a,{title:r(i).with({errorCode:"cancelled"},()=>x).with({errorCode:"no_result"},()=>y).with({errorCode:"tool_budget"},()=>w).with({state:"failed"},{state:"flawed"},()=>k).otherwise(()=>""),placement:"top-start",children:e(b,{onClick:C,"data-chip":i.state,children:v})})});export const AssistantToolChips=o(({tools:i,isActive:a,canUndo:n,onUndo:o})=>{let r=d(k),m=s(()=>{o(new Set(i.map(({id:e})=>e)))},[o,i]);return t(x,{"data-chips":a?"active":"done","aria-busy":a,children:[e(y,{children:e(w,{name:"Gear"})}),t("div",{children:[i.map(t=>e(C,{tool:t},t.id)),n&&t(v,{onClick:m,children:[e(l,{name:"ArrowCounterClockwise",fontSize:"inherit"}),r]})]})]})});
+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/form/AssistantForm.js

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Trans as r}from"@lingui/react";import{Button as t,styled as o}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{getBuiltInFormRegistry as u}from"./built-in-form-registry.js";import{composeAnswer as b}from"./compose-answer.js";import{describeBuildErrors as f}from"./describe-build-errors.js";import{parseFormBlock as g}from"./parse-form-block.js";let h=o("form",{name:p,slot:"form"})(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",gap:e(1.5),marginBlock:e(1)})),k=o(t,{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=o("div",{name:p,slot:"formNote"})(({theme:{palette:e,shape:i,spacing:r,typography:t}})=>({...t.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:t,disabled:o,send:n})=>{let[a,s]=d(()=>new Map),[l,c]=d(()=>new Map),p=(i,r)=>{let{id:d,definition:u,label:f,attributes:g}=i;return m(u).with({role:"option"},({component:m})=>e(m,{attributes:g,label:f,disabled:o,selected:!0===a.get(d),onSelect:()=>{t.isQuick?n(b(t,new Map([[i.id,!0]]),l)):s(e=>{let t=new Map(e);if("choice"===r.definition.role){for(let e of r.children)t.delete(e.id);t.set(i.id,!0)}else t.set(i.id,!0!==e.get(i.id));return t})}},d)).with({role:"input"},({component:r})=>e(r,{attributes:g,label:f,disabled:o,state:a.get(d),onChange:(e,r)=>{t.isQuick?n(b(t,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)))}},d)).with({role:"group"},{role:"choice"},{role:"choices"},({component:r})=>e(r,{attributes:g,label:f,disabled:o,children:i.children.map(e=>p(e,i))},d)).exhaustive()};return i(h,{onSubmit:e=>{e.preventDefault(),o||t.isQuick||n(b(t,a,l))},children:[t.root.children.map(e=>p(e,t.root)),!t.isQuick&&e(k,{type:"submit",variant:"contained",disabled:o,disableElevation:!0,children:e(r,{id:"sdk.assistant.form.submit.label",message:"Submit"})})]})};export const AssistantForm=n(({source:o,status:n})=>{let{assistantSystem:m}=c(),[p,b]=d(!1),h="writing"===n,k=l(()=>h?void 0:g(o,u()),[o,h]),y="ready"!==n||p,j=a(e=>{b(!0),m.send(e).finally(()=>b(!1))},[m]);return(s(()=>{k?.ok===!1&&console.warn("The assistant wrote a form that could not be built.",k.errors)},[k]),k)?k.ok?0===k.root.children.length?null:e(x,{model:k,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(t,{size:"small",variant:"outlined",color:"inherit",disabled:y,onClick:()=>j(f(k.errors)),children:e(r,{id:"sdk.assistant.form.fix.label",message:"Fix it"})})]}):e(w,{children:e(r,{id:"sdk.assistant.form.writing",message:"Preparing a form…"})})});
+import{jsx as e,jsxs as 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

@@ -6,6 +6,6 @@ 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 answers with its value, or its label without one.
+ * 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

@@ -1 +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=({value:t,label:e})=>t??e??"",i=({children:t},{state:e})=>t.filter(({id:t})=>!0===e.get(t)).map(r),l=(r,o,p)=>{let{label:h}=r;return t(r.definition.role).with("group",()=>{if(null==h)return r.children.flatMap(t=>l(t,o,p));let t=r.children.flatMap(t=>l(t,o+1,p));return t.length>0?[e(o,`${h}:`),...t]:[e(o,`${h}: —`)]}).with("choice",()=>[e(o,n(h,i(r,p)[0]??"—"))]).with("choices",()=>{let t=i(r,p);return 0===t.length?[e(o,n(h,"—"))]:null==h?t.map(t=>e(o,t)):[e(o,`${h}:`),...t.map(t=>e(o+1,t))]}).with("input",()=>[e(o,n(h,p.answers.get(r.id)??"—"))]).with("option",()=>[]).exhaustive()};export const composeAnswer=(t,e,n)=>l(t.root,0,{state:e,answers:n}).join("\n");
+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/form-model.d.ts

@@ -1,4 +1,4 @@
-import type { FormElementDefinition } from './form-element-definition.js';
+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.
@@ -8,8 +8,6 @@ export interface FormNode {
     readonly id: string;
     readonly definition: FormElementDefinition;
     readonly label?: string;
-    /** What an option answers with instead of its label. An input's starting `value` is among its attributes. */
-    readonly value?: string;
     readonly attributes: Readonly<Record<string, unknown>>;
     readonly children: readonly FormNode[];
 }

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

@@ -1,4 +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 input reported, by node id; an input that never reported is missing. */
+/** 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/index.d.ts

@@ -1,2 +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

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

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

@@ -1,10 +1,10 @@
 import type { FormModel } from './form-model.js';
-import type { FormRegistry } from './form-registry.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 or misplaced element is not built at all, and every
- * such error is returned.
+ * 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

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

@@ -1,4 +1,4 @@
-import type { RegisteredFormElement } from './form-registry.js';
+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>>;

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

@@ -1 +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:i})=>t(i).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(),i={string:"a string",number:"a number",integer:"an integer",boolean:"true or false"},u=(t,{type:e,enum:r})=>r?`the attribute "${t}" must be one of ${r.map(t=>`"${t}"`).join(", ")}`:`the attribute "${t}" must be ${i[e]}`;export const readFormAttributes=({definition:t,attributes:e},i)=>{let n={},a=[];for(let[t,o]of Object.entries(i)){let i=e.get(t);if(!i){a.push(`the attribute "${t}" is not declared`);continue}let s=r(o,i.attribute);i.validate(s)?n[t]=s:a.push(u(t,i.attribute))}for(let e of t.required??[])e in i||a.push(`the attribute "${e}" is required`);return{attributes:n,errors:a}};
+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/{form-element-definition.d.ts → registry/form-element-definition.d.ts}

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 import type { AssistantFormElementDescriptor } from '#package/domain';
-import type { FormContainerProps, FormInputProps, FormOptionProps } from '../form-elements/index.js';
+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';
@@ -12,3 +12,5 @@ export type FormElementDefinition = (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/{form-registry.d.ts → registry/form-registry.d.ts}

@@ -5,7 +5,7 @@ export interface RegisteredFormAttribute {
     readonly attribute: AssistantFormAttribute;
     readonly validate: PhxValidateFunction;
 }
-/** A form element with its declared attributes, the built-in `label` and `value` included. */
+/** A form element with its declared attributes, the built-in `label` included. */
 export interface RegisteredFormElement {
     readonly definition: FormElementDefinition;
     readonly attributes: ReadonlyMap<string, RegisteredFormAttribute>;

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/FormReply.d.ts

@@ -2,5 +2,5 @@ import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormOptionProps } from './form-element-props.js';
 type FormReplyProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'reply'>>;
 /** A `reply`: a short answer as a small pill, marked while it is picked. */
-export declare const FormReply: ({ label, disabled, selected, onSelect }: FormReplyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormReply: ({ attributes, label, disabled, selected, onSelect }: FormReplyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{alpha as e,styled as i}from"@mui/material";import{AssistantPanelName as o}from"../theme.js";let t=i("button",{name:o,slot:"formReply"})(({theme:{palette:r,spacing:i,typography:o}})=>({...o.body2,background:r.background.paper,border:`1px solid ${r.divider}`,borderRadius:"calc(infinity * 1px)",color:r.text.primary,cursor:"pointer",margin:0,paddingBlock:i(.25),paddingInline:i(1.25),textAlign:"start","&:hover:not(:disabled)":{background:r.action.hover},"&:focus-visible":{outline:`2px solid ${r.primary.main}`,outlineOffset:1},"&:disabled":{color:r.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{background:e(r.primary.main,r.action.selectedOpacity),borderColor:r.primary.main}}));export const FormReply=({label:e,disabled:i,selected:o,onSelect:a})=>r(t,{type:"button",disabled:i,"aria-pressed":o,onClick:a,children:e});
+import{jsx as r}from"react/jsx-runtime";import{alpha as e,styled as o}from"@mui/material";import{AssistantPanelName as i}from"../theme.js";let a=o("button",{name:i,slot:"formReply"})(({theme:{palette:r,spacing:o,typography:i}})=>({...i.body2,background:r.background.paper,border:`1px solid ${r.divider}`,borderRadius:"calc(infinity * 1px)",color:r.text.primary,cursor:"pointer",margin:0,paddingBlock:o(.25),paddingInline:o(1.25),textAlign:"start","&:hover:not(:disabled)":{background:r.action.hover},"&:focus-visible":{outline:`2px solid ${r.primary.main}`,outlineOffset:1},"&:disabled":{color:r.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{background:e(r.primary.main,r.action.selectedOpacity),borderColor:r.primary.main}}));export const FormReply=({attributes:e,label:o,disabled:i,selected:t,onSelect:d})=>r(a,{type:"button",disabled:i,"aria-pressed":t,onClick:()=>d([e.value,o].find(Boolean)??""),children:o});

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

@@ -0,0 +1,10 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormOptionProps } from './form-element-props.js';
+type FormSwatchProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'swatch'>>;
+/**
+ * A `swatch`: a small square filled with its color or covered by its picture, its label in a
+ * tooltip, ringed and checked while it is picked. A picture that is not a resource path or fails to
+ * load leaves the color, or a neutral tile.
+ */
+export declare const FormSwatch: ({ attributes, label, disabled, selected, onSelect }: FormSwatchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Tooltip as r,styled as o}from"@mui/material";import{useCallback as a,useState as t}from"react";import{PhxIcon as n}from"#package/ui-sdk";import{useResourceImageUrl as l}from"../resource-image/index.js";import{AssistantPanelName as s}from"../theme.js";let d=o("button",{name:s,slot:"formSwatch"})(({theme:{palette:e,shape:i}})=>({background:e.action.hover,blockSize:36,border:`1px solid ${e.divider}`,borderRadius:i.borderRadius,cursor:"pointer",flex:"none",inlineSize:36,margin:0,overflow:"hidden",padding:0,position:"relative","&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:3},"&:disabled":{cursor:"default",opacity:e.action.disabledOpacity},'&[aria-pressed="true"]':{boxShadow:`0 0 0 2px ${e.background.paper}, 0 0 0 4px ${e.primary.main}`}})),m=o("img",{name:s,slot:"formSwatchImage"})({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),c=o("span",{name:s,slot:"formSwatchCheck"})(({theme:{palette:e}})=>({alignItems:"center",background:e.primary.main,borderRadius:"50%",color:e.primary.contrastText,display:"flex",fontSize:14,inset:"50% auto auto 50%",justifyContent:"center",padding:2,position:"absolute",transform:"translate(-50%, -50%)"})),p=o("span")({display:"inline-flex"});export const FormSwatch=({attributes:o,label:s,disabled:u,selected:f,onSelect:b})=>{let{value:h,color:x,image:g}=o,y=l()(g),[k,S]=t(),j=[s,h,x,g].find(Boolean),v=a(()=>{S(y)},[y]);return e(r,{title:j??"",placement:"top",children:e(p,{children:i(d,{type:"button","aria-label":j,disabled:u,"aria-pressed":f,onClick:()=>b([h,s,x,g].find(Boolean)??""),style:null==x?void 0:{background:x},children:[null!=y&&y!==k&&e(m,{src:y,alt:"",loading:"lazy",onError:v}),f&&e(c,{"aria-hidden":!0,children:e(n,{name:"Check",fontSize:"inherit"})})]})})})};

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

@@ -9,15 +9,17 @@ export interface FormContainerProps<ATTRIBUTES = FormElementAttributes> {
     readonly children: ReactNode;
 }
 /**
- * Props of an option. Its container decides what a pick does: in a `choice` it replaces the
- * previous pick, in a `choices` it toggles, and in a form that asks one question it sends at once.
+ * Props of an option. It reports what it answers with when the user picks it, as an input reports
+ * its answer: by convention its `value` attribute, or else its label. Its container decides what a
+ * pick does: in a `choice` it replaces the previous pick, in a `choices` it toggles, and in a form
+ * that asks one question it sends at once. An empty answer counts as unanswered.
  */
 export interface FormOptionProps<ATTRIBUTES = FormElementAttributes> {
     readonly attributes: ATTRIBUTES;
     readonly label?: string;
     readonly disabled: boolean;
     readonly selected: boolean;
-    onSelect(): void;
+    onSelect(answer: string): void;
 }
 /**
  * Props of an input. Its state is its own: the form stores what it reports and hands it back.

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

@@ -1,7 +1,9 @@
 export type { FormContainerProps, FormElementAttributes, FormInputProps, FormOptionProps, } from './form-element-props.js';
+export { FormCard } from './FormCard.js';
 export { FormConfirm } from './FormConfirm.js';
 export { FormGroup } from './FormGroup.js';
 export { FormOptions } from './FormOptions.js';
 export { FormNumber } from './FormNumber.js';
 export { FormReply } from './FormReply.js';
+export { FormSwatch } from './FormSwatch.js';
 export { FormText } from './FormText.js';

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

@@ -1 +1 @@
-export{FormConfirm}from"./FormConfirm.js";export{FormGroup}from"./FormGroup.js";export{FormOptions}from"./FormOptions.js";export{FormNumber}from"./FormNumber.js";export{FormReply}from"./FormReply.js";export{FormText}from"./FormText.js";
+export{FormCard}from"./FormCard.js";export{FormConfirm}from"./FormConfirm.js";export{FormGroup}from"./FormGroup.js";export{FormOptions}from"./FormOptions.js";export{FormNumber}from"./FormNumber.js";export{FormReply}from"./FormReply.js";export{FormSwatch}from"./FormSwatch.js";export{FormText}from"./FormText.js";