@salsita-ai/sdk 0.50.0-develop.662fa65a4c → 0.50.0-develop.6806625cca

package/dist/editor/console-reporter/console-capture.d.ts

@@ -0,0 +1,20 @@
+/** One console error or warning, uncaught error or unhandled rejection of the page, as the editor reports it. */
+export interface CapturedConsoleEntry {
+    readonly level: 'error' | 'warn';
+    readonly message: string;
+    readonly source: 'configurator';
+    readonly timestamp: string;
+}
+type ConsoleSink = (entry: CapturedConsoleEntry) => void;
+/**
+ * Starts capturing the page's console errors and warnings, uncaught errors and unhandled rejections,
+ * keeping them until the editor connects to the dev server and reports them. The generated editor
+ * entry of agent mode calls it before the configurator loads, so the errors of a configurator that
+ * fails to start reach the terminal too. Calling it again does nothing.
+ *
+ * @internal Called by the generated editor entry point and the editor's console reporter only.
+ */
+export declare const startConsoleCapture: () => void;
+/** Sends the captured entries, the kept ones first, to `nextSink` until the returned function disconnects it. */
+export declare const connectConsoleCapture: (nextSink: ConsoleSink) => (() => void);
+export {};

package/dist/editor/console-reporter/console-capture.js

@@ -0,0 +1 @@
+let e=null,n=!1,r=[],o=(n,o)=>{let t={level:n,message:o,source:"configurator",timestamp:new Date().toISOString()};e?e(t):r.length<200&&r.push(t)};export const startConsoleCapture=()=>{if(n)return;n=!0;let e=console.error,r=console.warn;console.error=(...n)=>{e.apply(console,n),o("error",n.map(String).join(" "))},console.warn=(...e)=>{r.apply(console,e),o("warn",e.map(String).join(" "))},window.addEventListener("error",e=>{o("error",`${e.message} at ${e.filename}:${e.lineno}:${e.colno}`)}),window.addEventListener("unhandledrejection",e=>{o("error",`Unhandled rejection: ${e.reason instanceof Error?e.reason.message:String(e.reason)}`)})};export const connectConsoleCapture=n=>{for(let o of(startConsoleCapture(),e=n,r.splice(0)))n(o);return()=>{e===n&&(e=null)}};

package/dist/editor/graphql/GraphQLPanel.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"@monaco-editor/react";import{Box as r,Checkbox as i,FormControlLabel as a,Stack as n,Typography as s}from"@mui/material";import{useState as l}from"react";import{EditorButton as m}from"../common/EditorButton.js";import{jsonEditorOptions as d}from"../common/monaco-config.js";import{useOptionalConfigurator as c,useOptionalDomain as p}from"../hooks/use-optional-runtime.js";import{splitOperations as u}from"./split-operations.js";let h={fontSize:"12px",fontWeight:600,color:"text.secondary"};export const GraphQLPanel=()=>{let f=c()?.graphQLSystem,g=p()?.storeSystem,[x,y]=l("query { root { id type } }"),[b,v]=l(""),[S,k]=l(!1),[j,N]=l(null),[C,w]=l(null),[z,J]=l(!1),O=async()=>{let e=u(x),t=(e=>{if(""===e.trim())return{ok:!0,variables:void 0};try{let t=JSON.parse(e);return"object"!=typeof t||null===t||Array.isArray(t)?{ok:!1,message:"Variables must be a JSON object. Wrap them in {} or clear the field."}:{ok:!0,variables:t}}catch(e){return{ok:!1,message:`Variables are not valid JSON: ${e instanceof Error?e.message:String(e)}. Fix the JSON or clear the field.`}}})(b);if(f){if(w(null),!e.ok)return void N(e.message);if(!t.ok)return void N(t.message);if(S&&!g?.isInitialized)return void N("The configuration is not loaded yet, so there is no state to run against. Run again once the configurator has finished loading.");J(!0);try{let o=e.operations.map(e=>({...e,variables:t.variables})),r=S&&g?await f.prepare(g.stateSlices.committed.value.state,o):void 0,{results:i,committed:a,message:n,sideEffects:s}=r?{results:r.map(({result:e})=>e),committed:!1,message:"Dry run: nothing was committed.",sideEffects:f.readSideEffects(r)}:await f.execute(o),l=i.map((t,o)=>({operationName:e.operations[o]?.operationName??null,...t}));N(JSON.stringify(s.length>0?{results:l,sideEffects:s}:l,null,2)),w(a?"Committed as one undo step.":n??"Nothing was committed.")}finally{J(!1)}}};return t(n,{direction:"column",spacing:1.5,sx:{px:1.5,py:1},children:[e(s,{variant:"subtitle2",sx:h,children:"Query"}),e(r,{component:"div",sx:{height:160,border:"1px solid #dee2e6"},children:e(o,{language:"graphql",value:x,onChange:e=>y(e??""),options:d})}),e(s,{variant:"subtitle2",sx:h,children:"Variables (JSON)"}),e(r,{component:"div",sx:{height:80,border:"1px solid #dee2e6"},children:e(o,{language:"json",value:b,onChange:e=>v(e??""),options:d})}),e(a,{control:e(i,{size:"small",checked:S,onChange:e=>{k(e.target.checked)},sx:{p:.5}}),label:"Dry run",sx:{ml:-.5,mr:0,"& .MuiFormControlLabel-label":{fontSize:"12px",color:"#212529"}}}),e(m,{fullWidth:!0,disabled:!f||z,onClick:()=>void O(),children:f?"Run":"Configurator is not ready"}),null!==C&&e(s,{"data-testid":"graphql-status",sx:{fontSize:"12px",color:"text.secondary"},children:C}),null!==j&&e(r,{component:"pre","data-testid":"graphql-result",sx:{m:0,p:1,fontSize:"12px",backgroundColor:"#f8f9fa",overflow:"auto",whiteSpace:"pre-wrap"},children:j})]})};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"@monaco-editor/react";import{Box as r,Checkbox as i,FormControlLabel as a,Stack as n,Typography as s}from"@mui/material";import{useState as l}from"react";import{EditorButton as m}from"../common/EditorButton.js";import{jsonEditorOptions as d}from"../common/monaco-config.js";import{useOptionalConfigurator as c,useOptionalDomain as p}from"../hooks/use-optional-runtime.js";import{splitOperations as u}from"./split-operations.js";let h={fontSize:"12px",fontWeight:600,color:"text.secondary"};export const GraphQLPanel=()=>{let g=c()?.graphQLSystem,f=p()?.storeSystem,[x,v]=l("query { root { id type } }"),[y,b]=l(""),[S,k]=l(!1),[j,N]=l(null),[w,C]=l(null),[z,J]=l(!1),O=async()=>{let e=u(x),t=(e=>{if(""===e.trim())return{ok:!0,variables:void 0};try{let t=JSON.parse(e);return"object"!=typeof t||null===t||Array.isArray(t)?{ok:!1,message:"Variables must be a JSON object. Wrap them in {} or clear the field."}:{ok:!0,variables:t}}catch(e){return{ok:!1,message:`Variables are not valid JSON: ${e instanceof Error?e.message:String(e)}. Fix the JSON or clear the field.`}}})(y);if(g){if(C(null),!e.ok)return void N(e.message);if(!t.ok)return void N(t.message);if(S&&!f?.isInitialized)return void N("The configuration is not loaded yet, so there is no state to run against. Run again once the configurator has finished loading.");J(!0);try{let o=e.operations.map(e=>({...e,variables:t.variables})),r=S?f?.stateSlices.committed.value.state:void 0,i=r?await g.prepare(r,o):void 0,{results:a,committed:n,message:s,sideEffects:l,warnings:m}=i&&r?{results:i.map(({result:e})=>e),committed:!1,message:"Dry run: nothing was committed.",sideEffects:g.readSideEffects(i),warnings:g.readWarnings(r,i)}:await g.execute(o),d=a.map((t,o)=>({operationName:e.operations[o]?.operationName??null,...t}));N(JSON.stringify(l.length>0||m.length>0?{results:d,...l.length>0?{sideEffects:l}:{},...m.length>0?{warnings:m}:{}}:d,null,2)),C(n?"Committed as one undo step.":s??"Nothing was committed.")}finally{J(!1)}}};return t(n,{direction:"column",spacing:1.5,sx:{px:1.5,py:1},children:[e(s,{variant:"subtitle2",sx:h,children:"Query"}),e(r,{component:"div",sx:{height:160,border:"1px solid #dee2e6"},children:e(o,{language:"graphql",value:x,onChange:e=>v(e??""),options:d})}),e(s,{variant:"subtitle2",sx:h,children:"Variables (JSON)"}),e(r,{component:"div",sx:{height:80,border:"1px solid #dee2e6"},children:e(o,{language:"json",value:y,onChange:e=>b(e??""),options:d})}),e(a,{control:e(i,{size:"small",checked:S,onChange:e=>{k(e.target.checked)},sx:{p:.5}}),label:"Dry run",sx:{ml:-.5,mr:0,"& .MuiFormControlLabel-label":{fontSize:"12px",color:"#212529"}}}),e(m,{fullWidth:!0,disabled:!g||z,onClick:()=>void O(),children:g?"Run":"Configurator is not ready"}),null!==w&&e(s,{"data-testid":"graphql-status",sx:{fontSize:"12px",color:"text.secondary"},children:w}),null!==j&&e(r,{component:"pre","data-testid":"graphql-result",sx:{m:0,p:1,fontSize:"12px",backgroundColor:"#f8f9fa",overflow:"auto",whiteSpace:"pre-wrap"},children:j})]})};

package/dist/editor/index.d.ts

@@ -1,2 +1,3 @@
 export { Editor } from './Editor.js';
 export { type MockTemplateDefinition } from './mocks/mock-template-types.js';
+export { startConsoleCapture } from './console-reporter/console-capture.js';

package/dist/editor/index.js

@@ -1 +1 @@
-export{Editor}from"./Editor.js";
+export{Editor}from"./Editor.js";export{startConsoleCapture}from"./console-reporter/console-capture.js";

package/dist/editor/variants/VariantAnswerFooter.d.ts

@@ -1,3 +1,10 @@
+/** How long an answer is held before it goes to the agent, in seconds. */
+export declare const HOLD_SECONDS = 4;
+/** Why the dialog cannot go on; only a failure to apply an option leads with that. */
+export interface VariantError {
+    readonly message: string;
+    readonly applyingOption: boolean;
+}
 /** An answer the builder gave, held back for a moment so that a slip can be undone. */
 export interface HeldAnswer {
     readonly secondsLeft: number;
@@ -7,7 +14,7 @@ interface VariantAnswerFooterProps {
     readonly label: string;
     readonly canUse: boolean;
     readonly held: HeldAnswer | null;
-    readonly sendError: string | null;
+    readonly error: VariantError | null;
     readonly onUse: () => void;
     readonly onUndo: () => void;
     readonly onSendNow: () => void;

package/dist/editor/variants/VariantAnswerFooter.js

@@ -1 +1 @@
-import{jsx as o,jsxs as e}from"react/jsx-runtime";import{CircularProgress as r,Typography as n}from"@mui/material";import{memo as f}from"react";import{EditorButton as i}from"../common/EditorButton.js";import{INK as t,actionButton as d,ellipsis as l,primaryButton as s}from"./variant-preview-styles.js";export const VariantAnswerFooter=f(f=>{let{label:a,canUse:c,held:x,sendError:p}=f;if(x){let l,s;return e("div",{role:"status",style:{display:"flex",flexWrap:"wrap",alignItems:"center",gap:12,boxSizing:"border-box",minHeight:40,padding:"0 12px",borderRadius:6,backgroundColor:t,color:"#ffffff"},children:[x.sending&&o(r,{size:16,"aria-label":"Sending",sx:{color:"#ffffff"}}),o(n,{sx:{flex:"1 1 200px",fontSize:"13px",fontWeight:600},children:(l=`“${a}” goes to the agent`,s=x.sending?" now…":` in ${x.secondsLeft} s.`,`${l}${s}`)}),!x.sending&&o(i,{autoFocus:!0,"data-testid":"variant-undo",onClick:f.onUndo,sx:{...d,backgroundColor:"transparent",border:"2px solid #ffffff",color:"#ffffff","&:hover":{backgroundColor:"rgba(255, 255, 255, 0.12)",borderColor:"#ffffff",color:"#ffffff"}},children:"Undo"}),!x.sending&&o(i,{"data-testid":"variant-send-now",onClick:f.onSendNow,sx:{...d,backgroundColor:"#ffffff",border:"2px solid #ffffff",color:t,"&:hover":{backgroundColor:"#e9ecef",borderColor:"#e9ecef",color:t}},children:"Send now"})]})}return e("div",{children:[o("div",{style:{display:"flex",justifyContent:"flex-end"},children:o(i,{"data-testid":"variant-use",disabled:!c,onClick:f.onUse,sx:{...d,...s,minWidth:0,maxWidth:"100%"},children:e("span",{style:{minWidth:0,...l},children:["Use ",a]})})}),null!==p&&o(n,{role:"alert",sx:{mt:.75,px:.5,fontSize:"13px",color:"#b02a37"},children:p})]})});
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{memo as t}from"react";import{variantClass as s}from"./variant-preview-styles.js";export const HOLD_SECONDS=4;let a=()=>n("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.6","aria-hidden":"true",children:[e("circle",{cx:"8",cy:"8",r:"6.5"}),e("path",{d:"M8 4.5v4M8 11h.01",strokeLinecap:"round"})]});export const VariantAnswerFooter=t(t=>{let{label:i,canUse:r,held:o,error:l}=t;return n("div",{className:s.footer,children:[null!==l&&n("div",{role:"alert",className:s.error,children:[e(a,{}),n("span",{children:[l.applyingOption&&e("strong",{children:"This option could not be applied. "}),l.message]})]}),null===o&&e("button",{type:"button","data-testid":"variant-use",className:`${s.button} ${s.primary}`,disabled:!r,onClick:t.onUse,children:n("span",{className:s.ellipsis,children:["Use ",i]})}),null!==o&&!o.sending&&n("div",{role:"status",className:s.held,children:[n("p",{className:s.heldText,children:[e("strong",{children:i})," goes to the agent in ",o.secondsLeft," s"]}),e("div",{className:s.bar,children:e("span",{style:{width:`${o.secondsLeft/4*100}%`}})}),n("div",{className:s.actions,children:[e("button",{type:"button",autoFocus:!0,"data-testid":"variant-undo",className:`${s.button} ${s.ghost}`,onClick:t.onUndo,children:"Undo"}),e("button",{type:"button","data-testid":"variant-send-now",className:`${s.button} ${s.primary}`,onClick:t.onSendNow,children:"Send now"})]})]}),o?.sending&&n("div",{role:"status",className:s.sending,children:[e("span",{className:s.spinner,"aria-hidden":"true"}),n("span",{children:["Sending ",e("strong",{children:i})," to the agent…"]})]})]})});

package/dist/editor/variants/VariantPageUnavailable.d.ts

@@ -0,0 +1,5 @@
+/**
+ * What a variant comparison shows for an HTML option whose page was removed: Vite's SPA fallback
+ * serves the editor into the option's frame, which shows this instead of a recursive preview.
+ */
+export declare const VariantPageUnavailable: () => import("react/jsx-runtime").JSX.Element;

package/dist/editor/variants/VariantPageUnavailable.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as e}from"react/jsx-runtime";import{variantClass as t,variantPreviewStyles as s}from"./variant-preview-styles.js";export const VariantPageUnavailable=()=>e("div",{role:"alert","data-testid":"variant-page-unavailable",className:`${t.root} ${t.gone}`,children:[a("style",{children:s}),a("p",{className:t.goneTitle,children:"This page is gone"}),a("p",{className:t.goneText,children:"Ask the agent to recreate it, or pick another option."})]});

package/dist/editor/variants/VariantPreviewHandler.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as r,Modal as i,Paper as n,Typography as o,useMediaQuery as a}from"@mui/material";import{createContext as l,useCallback as d,useContext as s,useEffect as p,useRef as c,useState as u}from"react";import{useWebComponent as f}from"../EditorRuntimeProvider.js";import{EditorButton as m}from"../common/EditorButton.js";import{importImplementationFile as h}from"../domain-editors/import-implementation-file.js";import{useEditorConnection as v}from"../services/EditorConnectionContext.js";import{trpc as x}from"../services/trpc.js";import{VariantAnswerFooter as g}from"./VariantAnswerFooter.js";import{INK as b,MUTED as w,variantDialogGeometry as y}from"./variant-preview-styles.js";export const HTML_VARIANT_FRAME_ATTRIBUTE="data-phx-html-variant";let E=l(null);export const useConfiguratorContainerRef=()=>{let e=s(E);if(!e)throw Error("The configurator container must be inside VariantPreviewHandler");return e};let I=l=>{let{request:d}=l,s=a("(max-width:899px)"),f=s?y.compact:y.regular,v=x.getVariantBaseline.useQuery({requestId:d.requestId},{refetchOnWindowFocus:!1}),E=x.applyVariantFiles.useMutation(),I=x.submitVariantChoice.useMutation(),[T,C]=u(null),[S,j]=u(!1),[z,R]=u(null),[V,k]=u(null),q=c(!1),A=d.variants.find(e=>e.id===T),H=A?.kind==="page"?A:null,W=A?.label??"Original";p(()=>{v.data&&C(v.data.choice)},[v.data]);let M=async e=>{if(!q.current&&v.data&&!V){q.current=!0,j(!0),R(null);try{let t=new Map,r=d.variants.find(t=>t.id===e);if(r?.kind==="script"){let e=await h(r.url);if("function"!=typeof e)throw Error("Export the variant script as the default function");let i=new Map(v.data.files.map(e=>[e.fileName,e.content]));await e({read:e=>{let t=i.get(e);if(null==t)throw Error(`The baseline has no file named ${e}`);return t},write:(e,r)=>{t.set(e,r)},remove:e=>{t.set(e,null)}})}await E.mutateAsync({requestId:d.requestId,choice:e,files:[...t].map(([e,t])=>({fileName:e,content:t}))}),C(e)}catch(e){R(e instanceof Error?e.message:String(e))}finally{q.current=!1,j(!1)}}},P=async()=>{if(V&&!V.sending){k({...V,sending:!0});try{await I.mutateAsync({requestId:d.requestId,choice:T})}catch(e){R(e instanceof Error?e.message:String(e)),k(null)}}};p(()=>{if(!V||V.sending)return;if(0===V.secondsLeft)return void P();let e=window.setTimeout(()=>{k(e=>e?{...e,secondsLeft:e.secondsLeft-1}:null)},1e3);return()=>window.clearTimeout(e)});let B=[{id:null,label:"Original",description:"The project before these changes."},...d.variants];return e(i,{open:!0,disableEscapeKeyDown:!0,BackdropProps:{sx:{bgcolor:"rgba(33, 37, 41, 0.55)"}},sx:{zIndex:1400},children:t(n,{role:"dialog","aria-labelledby":"variant-preview-title","aria-describedby":"variant-preview-description","aria-modal":"true","data-testid":"variant-preview",elevation:16,sx:{position:"fixed",inset:f.inset,zIndex:1400,borderRadius:"12px",overflow:"hidden",border:"1px solid #dee2e6",display:"grid",gridTemplateRows:`${f.header}px minmax(0, 1fr) ${f.footer}px`,bgcolor:"#fff",pointerEvents:"none"},children:[e(r,{component:"div",sx:{display:"flex",alignItems:"center",gap:2,px:s?2:3,borderBottom:"1px solid #dee2e6",bgcolor:"#fff",pointerEvents:"auto",zIndex:2},children:t(r,{component:"div",sx:{flex:1,minWidth:0},children:[e(o,{id:"variant-preview-title",component:"h2",sx:{fontSize:19,fontWeight:600,color:b,lineHeight:1.35},children:d.title}),e(o,{id:"variant-preview-description",sx:{mt:.5,fontSize:13,color:w},children:d.description})]})}),t(r,{component:"div",sx:{display:"grid",gridTemplateColumns:`${f.choices}px minmax(0, 1fr)`,minHeight:0},children:[t(r,{component:"div",role:"group","aria-label":"Variant options",sx:{p:s?1:2,minHeight:0,overflowY:"auto",borderRight:"1px solid #dee2e6",bgcolor:"#f8f9fa",pointerEvents:"auto",zIndex:2},children:[e(o,{sx:{fontSize:11,fontWeight:600,letterSpacing:"0.06em",color:w,textTransform:"uppercase",mb:1,px:.5},children:"Compare options"}),B.map(r=>{let i=T===r.id;return t(m,{"data-testid":null===r.id?"variant-baseline":"variant-tab","aria-pressed":i,disabled:S||null!==V||!v.data,fullWidth:!0,onClick:()=>{M(r.id)},sx:{display:"block",textAlign:"left",mb:.5,p:s?.875:1.125,whiteSpace:"normal",bgcolor:i?"#e9eef5":"transparent",borderColor:"transparent",boxShadow:i?"inset 2px 0 #495057":"none","&:hover":{bgcolor:i?"#e9eef5":"#eef1f4",borderColor:"#adb5bd"}},children:[e(o,{component:"span",sx:{display:"block",fontSize:13,fontWeight:600,color:b},children:r.label}),e(o,{component:"span",sx:{display:"block",mt:.375,fontSize:11.5,lineHeight:1.35,color:w},children:r.description})]},null===r.id?"original":`variant:${r.id}`)})]}),t("div",{style:{position:"relative",minWidth:0,minHeight:0,zIndex:1},children:[e("div",{ref:H?null:l.previewContainerRef,"data-testid":"variant-configurator",style:{display:H?"none":"block",width:"100%",height:"100%",pointerEvents:"auto"}}),H&&e("iframe",{title:H.label,src:H.url,"data-testid":"variant-html","data-phx-html-variant":"",style:{position:"absolute",inset:0,width:"100%",height:"100%",border:0,pointerEvents:"auto"}},H.id)]})]}),e(r,{component:"div",sx:{px:s?1.5:2,py:1.5,borderTop:"1px solid #dee2e6",bgcolor:"#fff",pointerEvents:"auto",zIndex:2,overflowY:"auto"},children:e(g,{label:W,canUse:void 0!==v.data&&!S&&null===z,held:V,sendError:z??v.error?.message??null,onUse:()=>{R(null),k({secondsLeft:4,sending:!1})},onUndo:()=>k(null),onSendNow:()=>{P()}})})]})})};export const VariantPreviewHandler=r=>{let{localMode:i}=v(),n=f(),[o,a]=u(null),l=c(null),s=c(null),p=d(()=>{let e=s.current??l.current;e&&n&&n.parentNode!==e&&e.appendChild(n)},[n]),m=d(e=>{l.current=e,p()},[p]),h=d(e=>{s.current=e,p()},[p]);return x.onVariantPreview.useSubscription(void 0,{enabled:!i,onData:a}),t(E.Provider,{value:m,children:[r.children,o&&e(I,{request:o,previewContainerRef:h},o.requestId)]})};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Modal as a}from"@mui/material";import{createContext as r,useCallback as t,useContext as n,useEffect as l,useRef as s,useState as o}from"react";import{useWebComponent as d}from"../EditorRuntimeProvider.js";import{importImplementationFile as c}from"../domain-editors/import-implementation-file.js";import{useEditorConnection as p}from"../services/EditorConnectionContext.js";import{trpc as u}from"../services/trpc.js";import{HOLD_SECONDS as m,VariantAnswerFooter as h}from"./VariantAnswerFooter.js";import{variantClass as v,variantPreviewStyles as f}from"./variant-preview-styles.js";export const HTML_VARIANT_FRAME_ATTRIBUTE="data-phx-html-variant";let g=r(null);export const useConfiguratorContainerRef=()=>{let e=n(g);if(!e)throw Error("The configurator container must be inside VariantPreviewHandler");return e};let w=r=>{let{request:t}=r,n=u.getVariantBaseline.useQuery({requestId:t.requestId},{refetchOnWindowFocus:!1}),d=u.applyVariantFiles.useMutation(),p=u.submitVariantChoice.useMutation(),[g,w]=o(null),[b,y]=o(null),[N,j]=o(null),[x,C]=o(null),E=s(!1),T=t.variants.find(e=>e.id===g),k=T?.kind==="page"?T:null,I=T?.label??"Original";l(()=>{import("./variant-preview-fonts.js")},[]),l(()=>{n.data&&w(n.data.choice)},[n.data]);let V=async e=>{if(!E.current&&n.data&&!x){E.current=!0,y({choice:e}),j(null);try{let i=new Map,a=t.variants.find(i=>i.id===e);if(a?.kind==="script"){let e=await c(a.url);if("function"!=typeof e)throw Error("Export the variant script as the default function");let r=new Map(n.data.files.map(e=>[e.fileName,e.content]));await e({read:e=>{let i=r.get(e);if(null==i)throw Error(`The baseline has no file named ${e}`);return i},write:(e,a)=>{i.set(e,a)},remove:e=>{i.set(e,null)}})}await d.mutateAsync({requestId:t.requestId,choice:e,files:[...i].map(([e,i])=>({fileName:e,content:i}))}),w(e)}catch(e){j({message:e instanceof Error?e.message:String(e),applyingOption:!0})}finally{E.current=!1,y(null)}}},q=async()=>{if(x&&!x.sending){C({...x,sending:!0});try{await p.mutateAsync({requestId:t.requestId,choice:g})}catch(e){j({message:e instanceof Error?e.message:String(e),applyingOption:!1}),C(null)}}};l(()=>{if(!x||x.sending)return;if(0===x.secondsLeft)return void q();let e=window.setTimeout(()=>{C(e=>e?{...e,secondsLeft:e.secondsLeft-1}:null)},1e3);return()=>window.clearTimeout(e)});let A=null!==b,P=A||null!==x||!n.data,L=[{id:null,kind:"original",label:"Original",description:"The project before these changes."},...t.variants];return e(a,{open:!0,disableEscapeKeyDown:!0,hideBackdrop:!0,sx:{zIndex:10100},children:i("div",{role:"dialog","aria-labelledby":"variant-preview-title","aria-describedby":"variant-preview-description","aria-modal":"true","data-testid":"variant-preview",className:v.root,children:[e("style",{children:f}),i("div",{className:v.preview,children:[i("div",{className:v.previewPills,children:[i("span",{className:v.pill,children:["Previewing ",I]}),e("span",{className:v.pill,children:k?"HTML page":"Configurator"})]}),e("div",{ref:k?null:r.previewContainerRef,"data-testid":"variant-configurator",style:{display:k?"none":"block",width:"100%",height:"100%"}}),k&&e("iframe",{title:k.label,src:k.url,"data-testid":"variant-html","data-phx-html-variant":"",style:{position:"absolute",inset:0,width:"100%",height:"100%",border:0}},k.id)]}),i("div",{className:v.panel,children:[i("div",{className:v.header,children:[e("span",{className:v.eyebrow,children:"Your agent asks"}),e("h2",{id:"variant-preview-title",className:v.title,children:t.title}),e("p",{id:"variant-preview-description",className:v.description,children:t.description})]}),i("div",{role:"group","aria-label":"Variant options",className:v.options,children:[!n.data&&!n.error&&e("div",{role:"status","aria-label":"Loading options",children:[0,1,2,3].map(i=>e("div",{className:v.skeleton},i))}),(n.data||n.error)&&L.map(a=>{let r=g===a.id,t=null!==b&&b.choice===a.id,n="original"===a.kind?"Current":"page"===a.kind?"Page":null,l=[v.option,r?v.selected:"",P&&!r&&!t?v.dimmed:""].join(" ");return i("button",{type:"button","data-testid":null===a.id?"variant-baseline":"variant-tab","aria-pressed":r,disabled:P,className:l,onClick:()=>{V(a.id)},children:[t?e("span",{role:"status",className:v.spinner,"aria-label":"Applying"}):e("span",{className:v.radio,"aria-hidden":"true"}),e("span",{className:v.label,children:a.label}),n&&e("span",{className:v.tag,children:n}),e("span",{className:v.optionDescription,children:a.description})]},null===a.id?"original":`variant:${a.id}`)})]}),e(h,{label:I,canUse:void 0!==n.data&&!A&&null===N,held:x,error:N??(n.error?{message:n.error.message,applyingOption:!1}:null),onUse:()=>{j(null),C({secondsLeft:m,sending:!1})},onUndo:()=>C(null),onSendNow:()=>{q()}})]})]})})};export const VariantPreviewHandler=a=>{let{localMode:r}=p(),n=d(),[l,c]=o(null),m=s(null),h=s(null),v=t(()=>{let e=h.current??m.current;e&&n&&n.parentNode!==e&&e.appendChild(n)},[n]),f=t(e=>{m.current=e,v()},[v]),b=t(e=>{h.current=e,v()},[v]);return u.onVariantPreview.useSubscription(void 0,{enabled:!r,onData:c}),i(g.Provider,{value:f,children:[a.children,l&&e(w,{request:l,previewContainerRef:b},l.requestId)]})};

package/dist/editor/variants/variant-preview-fonts.d.ts

@@ -0,0 +1,2 @@
+import '@fontsource-variable/funnel-display/index.css';
+import '@fontsource-variable/funnel-sans/index.css';

package/dist/editor/variants/variant-preview-fonts.js

@@ -0,0 +1 @@
+import"@fontsource-variable/funnel-display/index.css";import"@fontsource-variable/funnel-sans/index.css";

package/dist/editor/variants/variant-preview-styles.d.ts

@@ -1,49 +1,41 @@
-export declare const INK = "#212529";
-export declare const MUTED = "#5c636a";
-export declare const actionButton: {
-    height: number;
-    px: number;
-    borderRadius: string;
-    fontSize: string;
-    fontWeight: number;
-    whiteSpace: string;
-};
-export declare const primaryButton: {
-    backgroundColor: string;
-    border: string;
-    color: string;
-    '&:hover': {
-        backgroundColor: string;
-        borderColor: string;
-        color: string;
-    };
-    '&:active': {
-        backgroundColor: string;
-        borderColor: string;
-        color: string;
-    };
-    '&.Mui-disabled': {
-        backgroundColor: string;
-        borderColor: string;
-        color: string;
-    };
-};
-export declare const ellipsis: {
-    readonly overflow: 'hidden';
-    readonly textOverflow: 'ellipsis';
-    readonly whiteSpace: 'nowrap';
-};
-export declare const variantDialogGeometry: {
-    readonly regular: {
-        readonly inset: 24;
-        readonly header: 80;
-        readonly footer: 68;
-        readonly choices: 240;
-    };
-    readonly compact: {
-        readonly inset: 8;
-        readonly header: 96;
-        readonly footer: 112;
-        readonly choices: 156;
-    };
+/** Class names of the variant comparison dialog, styled by {@link variantPreviewStyles}. */
+export declare const variantClass: {
+    readonly root: "phx-variants";
+    readonly preview: "phx-variants-preview";
+    readonly previewPills: "phx-variants-preview-pills";
+    readonly pill: "phx-variants-pill";
+    readonly panel: "phx-variants-panel";
+    readonly header: "phx-variants-header";
+    readonly eyebrow: "phx-variants-eyebrow";
+    readonly title: "phx-variants-title";
+    readonly description: "phx-variants-description";
+    readonly options: "phx-variants-options";
+    readonly option: "phx-variants-option";
+    readonly selected: "phx-variants-selected";
+    readonly dimmed: "phx-variants-dimmed";
+    readonly radio: "phx-variants-radio";
+    readonly spinner: "phx-variants-spinner";
+    readonly label: "phx-variants-label";
+    readonly tag: "phx-variants-tag";
+    readonly optionDescription: "phx-variants-option-description";
+    readonly skeleton: "phx-variants-skeleton";
+    readonly footer: "phx-variants-footer";
+    readonly error: "phx-variants-error";
+    readonly button: "phx-variants-button";
+    readonly primary: "phx-variants-primary";
+    readonly ghost: "phx-variants-ghost";
+    readonly ellipsis: "phx-variants-ellipsis";
+    readonly held: "phx-variants-held";
+    readonly heldText: "phx-variants-held-text";
+    readonly bar: "phx-variants-bar";
+    readonly actions: "phx-variants-actions";
+    readonly sending: "phx-variants-sending";
+    readonly gone: "phx-variants-gone";
+    readonly goneTitle: "phx-variants-gone-title";
+    readonly goneText: "phx-variants-gone-text";
 };
+/**
+ * The variant comparison dialog: from 900px wide it fills the window with the question and options in
+ * a 320px panel beside the preview; below it the preview sits on top of the panel, a bottom sheet.
+ */
+export declare const variantPreviewStyles: string;