@salsita-ai/sdk 0.50.0-develop.bb71259564 → 0.50.0-develop.bc204720a8

package/dist/domain/{application → spec/sections}/assistant/assistant-manifest.d.ts

@@ -8,18 +8,28 @@ export interface AssistantFieldSource {
     readonly source: string;
     readonly localized?: true;
 }
+/**
+ * What the integrator promises about a list of choices, so the agent can read it once and reuse it:
+ * `sameForAllInstances` when every entity of the type gets the same list, `constantDuringSession`
+ * when the list does not change during a session. A hint only adds a sentence to the description of
+ * the recipe group or options edge it is declared on; nothing verifies it.
+ */
+export declare const ASSISTANT_HINTS: readonly ['sameForAllInstances', 'constantDuringSession'];
+export type AssistantResolvedHint = (typeof ASSISTANT_HINTS)[number];
 /**
  * One recipe group the assistant manifest exposes on an entity type: a `childEntityRecipes` instance
  * under `childRecipes`, a `replaceEntityRecipes` instance under `replaceRecipes`. `groupId` is the
- * name the agent addresses the group by, `instanceName` the component instance it reads,
- * `description` the manifest's text replacing the component's group description, and `dryRuns`
- * whether the recipes of the group can be dry-run.
+ * name of its field on `<Type>ChildRecipes` or `<Type>ReplaceRecipes` and the id the agent passes to
+ * `addChild` or `replaceEntity`, `instanceName` the component instance it reads, `description` the
+ * manifest's text for that field, `dryRuns` whether the recipes of the group can be dry-run, and
+ * `hints` the sentences of the field's description saying when the agent can reuse what it read.
  */
 export interface AssistantRecipeGroup {
     readonly groupId: string;
     readonly instanceName: string;
     readonly description?: string;
     readonly dryRuns: boolean;
+    readonly hints: readonly AssistantResolvedHint[];
 }
 /**
  * The options edge of one writable field the assistant manifest links to its component. `field` is

package/dist/domain/{application → spec/sections}/assistant/assistant-resolved-manifest.d.ts

@@ -1,4 +1,4 @@
-import type { AssistantFieldOptions, AssistantRecipeGroup, AssistantScreenshotView } from './assistant-manifest.js';
+import type { AssistantFieldOptions, AssistantRecipeGroup, AssistantResolvedHint, AssistantScreenshotView } from './assistant-manifest.js';
 import type { AssistantFormElementDescriptor } from './form/index.js';
 /** JSON description of a scalar or recursively nested list, including nullability at each level. */
 export type AssistantValueType = {
@@ -10,11 +10,16 @@ export type AssistantValueType = {
     readonly item: AssistantValueType;
     readonly nonNull: boolean;
 };
-/** A relation edge resolved against the model at parse time, linked to GraphQL types only during building. */
-export interface AssistantRelationType {
+/**
+ * An entity edge resolved at parse time, linked to GraphQL types only during building: a relation,
+ * an entity-returning expression or an action result member. `target` is an entity type or alias,
+ * `list` makes it `[Target!]` and `nullable` drops the outer non-null.
+ */
+export interface AssistantEdgeType {
     readonly kind: 'edge';
     readonly target: string;
-    readonly cardinality: '1-1' | '0-1' | '0-N' | '1-N';
+    readonly list: boolean;
+    readonly nullable: boolean;
 }
 /**
  * A field's source and resolved type, carried in the application bundle without GraphQL instances.
@@ -27,7 +32,7 @@ export interface AssistantResolvedField {
     readonly type: {
         readonly kind: 'value';
         readonly type: AssistantValueType;
-    } | AssistantRelationType;
+    } | AssistantEdgeType;
     readonly localized: boolean;
     readonly description?: string;
     readonly lenses?: readonly string[];
@@ -76,27 +81,17 @@ export interface AssistantWritableType {
     readonly entityType: string;
     readonly fields: readonly AssistantWritableField[];
 }
-/** Description hints resolved from recipe/option entries; no parse context is retained. */
-export declare const ASSISTANT_HINTS: readonly ['sameForAllInstances', 'constantDuringSession'];
-export type AssistantResolvedHint = (typeof ASSISTANT_HINTS)[number];
-/** Recipe groups and their description hints for one entity type. */
-export interface AssistantResolvedRecipes {
-    readonly groups: readonly AssistantRecipeGroup[];
-    readonly hints: readonly AssistantResolvedHint[];
-}
+/** The recipe groups of one kind on one entity type or alias key, in manifest order, each with its own hints. */
+export type AssistantResolvedRecipes = readonly AssistantRecipeGroup[];
 /** One options edge, carrying the write-validation contract and schema description hints. */
 export interface AssistantResolvedOptionsEdge {
     readonly options: AssistantFieldOptions;
     readonly hints: readonly AssistantResolvedHint[];
 }
 /** An action result field, either an entity edge or a plain JSON-described value. */
-export type AssistantResolvedActionResult = {
-    readonly kind: 'edge';
-    readonly target: string;
-    readonly list: boolean;
-    readonly nullable: boolean;
+export type AssistantResolvedActionResult = (AssistantEdgeType & {
     readonly description?: string;
-} | {
+}) | {
     readonly kind: 'value';
     readonly type: AssistantValueType;
     readonly description?: string;

package/dist/domain/spec/sections/assistant/assistant-resolved-manifest.js

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

package/dist/domain/spec/sections/assistant/index.d.ts

@@ -0,0 +1,4 @@
+export { ASSISTANT_HINTS } from './assistant-manifest.js';
+export type { AssistantResolvedManifest, AssistantDeclaredField, AssistantDeclarations, AssistantDeclaredWrite, AssistantResolvedField, AssistantValueType, AssistantEdgeType, AssistantStates, AssistantWritableType, AssistantWritableField, AssistantResolvedRecipes, AssistantResolvedOptionsEdge, AssistantResolvedAction, AssistantResolvedActionResult, } from './assistant-resolved-manifest.js';
+export type { AssistantFieldSource, AssistantResolvedHint, AssistantRecipeGroup, AssistantFieldOptions, AssistantScreenshotView, AssistantManifest, } from './assistant-manifest.js';
+export * from './form/index.js';

package/dist/domain/spec/sections/assistant/index.js

@@ -0,0 +1 @@
+export{ASSISTANT_HINTS}from"./assistant-manifest.js";export*from"./form/index.js";

package/dist/domain/spec/sections/index.d.ts

@@ -1,6 +1,7 @@
 export type * from './actions.js';
 export type * from './app-metadata.js';
 export type * from './application-version.js';
+export * from './assistant/index.js';
 export type * from './data-spec/index.js';
 export * from './infra/index.js';
 export type * from './state-value.js';

package/dist/domain/spec/sections/index.js

@@ -1 +1 @@
-export*from"./infra/index.js";
+export*from"./assistant/index.js";export*from"./infra/index.js";

package/dist/domain/system-components/phoenix-entity-elements/child-entity-card-selector.d.ts

@@ -23,9 +23,8 @@ export interface ChildEntityCardSelectorSchema {
          */
         readonly instanceName: string;
         /**
-         * Array of violation type names that should be treated as fixable errors.
-         * Options that only trigger these violation types will remain enabled but show warnings.
-         * Other violation types will disable the option completely.
+         * Violation types to leave out of an option's tooltip. An option that would cause a `fatal` or `fixable`
+         * violation stays disabled whatever its type; a transformer that repairs the violation makes the option selectable.
          */
         readonly fixableViolations?: readonly string[];
         /**

package/dist/domain/system-components/phoenix-entity-elements/child-entity-list-selector.d.ts

@@ -20,9 +20,8 @@ export interface ChildEntityListSelectorSchema {
          */
         readonly instanceName: string;
         /**
-         * Array of violation type names that should be treated as warnings rather than errors.
-         * Options that trigger only these violations will remain selectable but show warning tooltips.
-         * Options triggering other violations will be disabled completely.
+         * Violation types to leave out of an option's tooltip. An option that would cause a `fatal` or `fixable`
+         * violation stays disabled whatever its type; a transformer that repairs the violation makes the option selectable.
          */
         readonly fixableViolations?: readonly string[];
         /**

package/dist/domain/system-components/phoenix-entity-elements/child-entity-toggle-selector.d.ts

@@ -20,9 +20,8 @@ export interface ChildEntityToggleSelectorSchema {
          */
         readonly instanceName: string;
         /**
-         * Array of violation type names that should be treated as warnings rather than errors.
-         * Options that trigger only these violations will remain selectable but show warning tooltips.
-         * Options triggering other violations will be disabled completely.
+         * Violation types to leave out of an option's tooltip. An option that would cause a `fatal` or `fixable`
+         * violation stays disabled whatever its type; a transformer that repairs the violation makes the option selectable.
          */
         readonly fixableViolations?: readonly string[];
         /**

package/dist/domain/system-definitions.js

@@ -1 +1 @@
-import{availableSystemComponents as e}from"./available-system-components.js";import{availableDefinitions as t}from"./core/index.js";export const getAllPhxDefinitions=()=>[...t,...e.map(e=>{let{definitions:t,...n}=e.schema;return n}),...e.flatMap(e=>Object.values(e.schema.definitions??{}).map(t=>{if("object"==typeof t&&"tsType"in t)return t;throw Error(`Schema definition in a component ${e.name} is not an extended json schema! Add a tsType to the schema.`)}))].reduce((e,t)=>{if(!t.tsType)throw Error(`Schema definition is not an extended json schema! Add a tsType to the schema. ${JSON.stringify(t)}`);return e[t.tsType]=t,e},{});
+import{availableSystemComponents as e}from"./available-system-components/index.js";import{availableDefinitions as t}from"./core/index.js";export const getAllPhxDefinitions=()=>[...t,...e.map(e=>{let{definitions:t,...n}=e.schema;return n}),...e.flatMap(e=>Object.values(e.schema.definitions??{}).map(t=>{if("object"==typeof t&&"tsType"in t)return t;throw Error(`Schema definition in a component ${e.name} is not an extended json schema! Add a tsType to the schema.`)}))].reduce((e,t)=>{if(!t.tsType)throw Error(`Schema definition is not an extended json schema! Add a tsType to the schema. ${JSON.stringify(t)}`);return e[t.tsType]=t,e},{});

package/dist/domain/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { memoEval } from './memo-eval.js';
+export { withProfilerLabel } from './profiler-label.js';

package/dist/domain/utils/index.js

@@ -0,0 +1 @@
+export{memoEval}from"./memo-eval.js";export{withProfilerLabel}from"./profiler-label.js";

package/dist/editor/Editor.d.ts

@@ -45,5 +45,10 @@ export interface EditorProps {
     readonly tagName: string;
     /** Whether the editor should expose and load the embedded Admin application. */
     readonly enableAdmin?: boolean;
+    /**
+     * Renders only the configurator, with none of the editor's panels, while the editor still serves
+     * the CLI's inspect commands and applies spec hot reloads. `phoenix dev` sets it in agent mode.
+     */
+    readonly hideUi?: boolean;
 }
 export declare const Editor: import("react").MemoExoticComponent<(props: EditorProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/editor/Editor.js

@@ -1 +1 @@
-import{jsx as e,jsxs as i,Fragment as t}from"react/jsx-runtime";import{Box as o,Chip as n,CssBaseline as r,IconButton as s,ThemeProvider as a,Tooltip as l,Typography as d,createTheme as m,useMediaQuery as c,useTheme as p}from"@mui/material";import{ModalProvider as f}from"mui-modal-provider";import{memo as h,useCallback as u,useEffect as g,useState as w}from"react";import{match as k}from"ts-pattern";import{useLocalStorage as y}from"usehooks-ts";import{PhxIcon as x,SnackbarProvider as b,createThemeWithPhoenixIcons as v}from"#package/ui-sdk";import{EditorMode as S}from"./EditorMode.js";import{EditorRuntimeProvider as P}from"./EditorRuntimeProvider.js";import{EditorAdminContextProvider as j}from"./admin/EditorAdminContext.js";import{EditorAdminMainContent as V}from"./admin/EditorAdminMainContent.js";import{EditorAdminSidebar as E}from"./admin/EditorAdminSidebar.js";import{useEditorAdminState as D}from"./admin/use-editor-admin-state.js";import{Analytics as T}from"./analytics/Analytics.js";import{AnalyticsProvider as A}from"./analytics/AnalyticsContext.js";import{Logotype as C}from"./common/Logotype.js";import{PanelIconButton as L}from"./common/PanelIconButton.js";import{BrowserConsoleReporter as M}from"./console-reporter/BrowserConsoleReporter.js";import{DataHandler as W}from"./data/DataHandler.js";import{DebugFlags as R}from"./debug-flags/DebugFlags.js";import{DiagnosticsPanel as I}from"./diagnostics/DiagnosticsPanel.js";import{DomainEditors as F}from"./domain-editors/DomainEditors.js";import{DomainSpecProvider as G,useDomainSpecContext as z}from"./domain-editors/DomainSpecContext.js";import{DomainReflection as B}from"./domain-reflection/DomainReflection.js";import{GraphQLPanel as Q}from"./graphql/GraphQLPanel.js";import{LogsPanel as H}from"./logs/LogsPanel.js";import{EditorMockProvider as U}from"./mocks/EditorMockContext.js";import{Mocks as q}from"./mocks/Mocks.js";import{ProfilerPanel as K}from"./profiler/ProfilerPanel.js";import{RemoteFilesList as O}from"./remote-files/RemoteFilesList.js";import{SceneHandler as N}from"./scene/SceneHandler.js";import{ScreenshotHandler as X}from"./screenshot/ScreenshotHandler.js";import{EditorConnectionProvider as Y}from"./services/EditorConnectionContext.js";import{EditorActionButtons as $}from"./sidebar/EditorActionButtons.js";import{StateInspector as J}from"./state-inspector/index.js";import{StateHandler as Z}from"./state/StateHandler.js";import{SpaTemplate as _}from"./templates/SpaTemplate.js";import{Templates as ee}from"./templates/Templates.js";import{TemplatesList as ei}from"./templates/TemplatesList.js";import{TunnelProvider as et,useTunnel as eo}from"./tunnel/TunnelContext.js";import{TunnelPanel as en}from"./tunnel/TunnelPanel.js";import{hasTunnelProblem as er}from"./tunnel/tunnel-view-model.js";import{HTML_VARIANT_FRAME_ATTRIBUTE as es,VariantPreviewHandler as ea,useConfiguratorContainerRef as el}from"./variants/VariantPreviewHandler.js";import{VideoStudio as ed}from"./video-studio/VideoStudio.js";import{WebSocketStatus as em}from"./websocket-status/WebSocketStatus.js";let ec=h(()=>e("div",{ref:el(),style:{width:"100%",height:"100%"}})),ep=v(m());export const EditorPanelView={Files:"Files",Reflections:"Reflections",Domain:"Domain",Templates:"Templates",Mocks:"Mocks",Inspector:"Inspector",Debug:"Debug",Profiler:"Profiler",GraphQL:"GraphQL",VideoStudio:"VideoStudio",Analytics:"Analytics",Diagnostics:"Diagnostics",Logs:"Logs",Tunnel:"Tunnel",WebSocketStatus:"WebSocketStatus",Admin:"Admin"};let ef=[{key:EditorPanelView.Templates,icon:"GridFour",title:"Templates"},{key:EditorPanelView.Reflections,icon:"House",title:"Reflections"},{key:EditorPanelView.Files,icon:"List",title:"Files"},{key:EditorPanelView.Domain,icon:"Gear",title:"Domain"},{key:EditorPanelView.Mocks,icon:"TagBold",title:"Mocks"},{key:EditorPanelView.Inspector,icon:"CurrencyDollar",title:"Inspector"},{key:EditorPanelView.Debug,icon:"EyeBold",title:"Debug"},{key:EditorPanelView.Profiler,icon:"Alarm",title:"Profiler"},{key:EditorPanelView.GraphQL,icon:"MagnifyingGlassBold",title:"GraphQL"},{key:EditorPanelView.VideoStudio,icon:"CameraRotate",title:"Video Studio"},{key:EditorPanelView.Analytics,icon:"Flame",title:"Analytics"},{key:EditorPanelView.Diagnostics,icon:"WarningCircle",title:"Diagnostics"},{key:EditorPanelView.Logs,icon:"BracketsCurly",title:"Logs"},{key:EditorPanelView.Tunnel,icon:"ArrowsHorizontal",title:"Webhook Tunnel"}],eh=h(r=>{let{panelView:a,setPanelView:m,width:c,setWidth:p,selectedTemplate:f,setSelectedTemplate:h,isResizing:y,setIsResizing:b,onExit:v,enableAdmin:S}=r,P=D(S),{unreadDiagnosticCount:j,markDiagnosticsRead:A}=z(),{state:M}=eo(),W=a?Math.max(c,240):38,[G,U]=w(0),N=u(()=>U(e=>e+1),[]);return g(()=>{a===EditorPanelView.Diagnostics&&A()},[A,a]),i(o,{component:"div",sx:{display:"grid",gridTemplateColumns:`${W}px min-content auto`,gridTemplateRows:"minmax(0, 1fr)",width:"100vw",height:"100vh",backgroundColor:"#ffffff",overflow:"hidden"},onMouseMove:e=>{y&&p(e.clientX)},onMouseUp:()=>{b(!1)},children:[i(o,{component:"div",sx:{display:"grid",gridTemplateColumns:"36px auto",backgroundColor:"#f8f9fa",borderRight:"1px solid #dee2e6",boxShadow:"2px 0 8px rgba(0, 0, 0, 0.06)",overflow:"hidden",height:"100%"},children:[i("div",{style:{backgroundColor:"#f8f9fa",height:"100%",display:"flex",flexDirection:"column",alignItems:"center",padding:"4px 0"},children:[e("div",{style:{marginBottom:"8px"},children:e(C,{variant:"icon-only"})}),i("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:"2px"},children:[S&&i(t,{children:[e(L,{icon:"SlidersHorizontal",title:"Admin",active:a===EditorPanelView.Admin,onClick:()=>{a===EditorPanelView.Admin?m(null):m(EditorPanelView.Admin)}}),e("div",{style:{borderBottom:"1px solid #dee2e6",margin:"2px 0"}})]}),ef.map(i=>e(L,{icon:i.icon,title:i.title,active:a===i.key,badgeCount:i.key===EditorPanelView.Tunnel?+!!er(M):i.key===EditorPanelView.Diagnostics?j:0,onClick:()=>{a===i.key?m(null):m(i.key)}},i.key))]}),e($,{reload:N}),e("div",{style:{padding:"0 2px",paddingBottom:"4px"},children:e(L,{icon:"CloudArrowUp",title:"WebSocket Status",active:a===EditorPanelView.WebSocketStatus,onClick:()=>{a===EditorPanelView.WebSocketStatus?m(null):m(EditorPanelView.WebSocketStatus)}})}),v&&e("div",{style:{padding:"0 2px",paddingBottom:"8px"},children:e(L,{icon:"SignOut",title:"Exit Editor",variant:"danger",onClick:v})})]}),a&&i(o,{component:"div",sx:{display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",backgroundColor:"#ffffff"},children:[e(o,{component:"div",sx:{p:1.5,borderBottom:"1px solid #e9ecef",backgroundColor:"#ffffff"},children:i(o,{component:"div",sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[i(o,{component:"div",sx:{display:"flex",flexDirection:"row",alignItems:"center"},children:[e(d,{variant:"h6",sx:{fontSize:16,fontWeight:600,color:"#212529"},children:k(a).with("Files",()=>"Files").with("Reflections",()=>"Reflections").with("Domain",()=>"Domain").with("Templates",()=>"Templates").with("Mocks",()=>"Mocks").with("Inspector",()=>"State Inspector").with("Debug",()=>"Debug").with("Profiler",()=>"Profiler").with("GraphQL",()=>"GraphQL").with("VideoStudio",()=>"Video Studio").with("Analytics",()=>"Analytics").with("Diagnostics",()=>"Diagnostics").with("Logs",()=>"Dev Server Logs").with("Tunnel",()=>"Webhook Tunnel").with("WebSocketStatus",()=>"WebSocket Status").with("Admin",()=>"Admin").otherwise(e=>e)}),e(l,{title:k(a).with("Files",()=>"Browse and inspect loaded GLTF files and their contents").with("Reflections",()=>"Inspect internal Phoenix systems state and configuration").with("Domain",()=>"Edit YAML domain specifications and component configurations").with("Templates",()=>"Select different layout templates for the configurator interface").with("Mocks",()=>"Create and manage mock data for testing session and access configurations").with("Inspector",()=>"Walk the entity tree: fields, expressions, and children").with("Debug",()=>"Toggle scene debug visuals like offset anchors, snapping, and collision meshes").with("Profiler",()=>"Make domain expressions show up as named frames in browser CPU profiles").with("GraphQL",()=>"Run GraphQL queries against the schema generated from the assistant manifest").with("VideoStudio",()=>"Create video sequences by capturing keyframes and exporting as video").with("Analytics",()=>"View parse pipeline metrics, domain stats, and diagnostics").with("Diagnostics",()=>"View latest editor warnings and errors").with("Logs",()=>"View dev server logs: spec builds, webhooks, vite, and browser console").with("Tunnel",()=>"View webhook tunnel status and the requests routed through it").with("WebSocketStatus",()=>"View WebSocket connection status and editor mode information").with("Admin",()=>"Manage admin panel, publish data, and configure settings").otherwise(()=>"Panel information"),placement:"left",arrow:!0,children:e(s,{size:"small",sx:{ml:1,color:"#6c757d",fontSize:14,p:.25,"&:hover":{backgroundColor:"#f8f9fa",color:"#495057"}},children:e(x,{name:"Info",style:{fontSize:14}})})})]}),e(o,{component:"div",sx:{display:"flex",alignItems:"center",gap:1},children:"Templates"===a&&e(n,{label:f.charAt(0).toUpperCase()+f.slice(1),variant:"outlined",size:"small",sx:{backgroundColor:"#f8f9fa",borderColor:"#dee2e6",color:"#495057",fontWeight:500,fontSize:"0.75rem"}})})]})}),i(o,{component:"div",sx:{flex:1,backgroundColor:"#ffffff",overflow:"auto"},children:["Files"===a&&e(O,{}),"Reflections"===a&&e(B,{}),"Domain"===a&&e(F,{}),"Templates"===a&&e(ei,{selectedTemplate:f,onTemplateSelect:h}),"Mocks"===a&&e(q,{}),"Inspector"===a&&e(J,{}),"Debug"===a&&e(R,{}),"Profiler"===a&&e(K,{}),"GraphQL"===a&&e(Q,{}),"VideoStudio"===a&&e(ed,{}),"Analytics"===a&&e(T,{}),"Diagnostics"===a&&e(I,{}),"Logs"===a&&e(H,{}),"Tunnel"===a&&e(en,{}),"WebSocketStatus"===a&&e(em,{}),S&&"Admin"===a&&e(E,{...P})]})]})]}),e("div",{style:{width:"2px",backgroundColor:"#dee2e6",cursor:"ew-resize",boxShadow:"1px 0 3px rgba(0, 0, 0, 0.05)"},onMouseDown:()=>{b(!0)}}),i("div",{style:{position:"relative",overflow:"hidden"},children:[e("div",{style:{position:"absolute",inset:0,zIndex:+("Admin"!==a)},children:e(ee,{selectedTemplate:f,children:e(ec,{},G)})}),S&&e("div",{style:{position:"absolute",inset:0,zIndex:+("Admin"===a)},children:e(V,{})})]})]})}),eu=h(()=>e(_,{children:e(ec,{})})),eg=h(o=>{let{wsUrl:n="ws://localhost:3020",localMode:r=!1,domainSpec:s,initialRawProjectFiles:a,onExit:l,mockTemplates:d,autoApplyTemplate:m,initialTemplateKey:h,environmentKey:u,tagName:k,enableAdmin:x=!0}=o,v=c(p().breakpoints.up("md")),[V,E]=y("editor-width",350),[D,T]=y("editor-view",null),[C,L]=y("editor-template","spa"),[R,I]=w(!1);return g(()=>{null===D||Object.values(EditorPanelView).some(e=>e===D)&&(x||D!==EditorPanelView.Admin)||T(null)},[x,D,T]),e(f,{children:e(b,{maxSnack:5,children:e(j,{children:e(P,{tagName:k,children:e(Y,{initialWsUrl:n,localMode:r,children:e(et,{children:e(S,{children:e(A,{children:e(G,{domainSpec:s,initialRawProjectFiles:a,children:i(U,{mockTemplates:d,autoApplyTemplate:m,initialTemplateKey:h,environmentKey:u,children:[!r&&i(t,{children:[e(X,{}),e(Z,{}),e(W,{}),e(N,{}),e(M,{})]}),e(ea,{children:v?e(eh,{panelView:D,setPanelView:T,width:V,setWidth:E,selectedTemplate:C,setSelectedTemplate:L,isResizing:R,setIsResizing:I,onExit:l,enableAdmin:x}):e(eu,{})})]})})})})})})})})})})});export const Editor=h(t=>{try{if(window.frameElement?.hasAttribute(es))return e("div",{role:"alert","data-testid":"variant-page-unavailable",style:{padding:24,fontFamily:"sans-serif"},children:"This preview page is unavailable. Ask the agent to recreate it or close the comparison."})}catch{}return i(a,{theme:ep,children:[e(r,{}),e(eg,{...t})]})});
+import{jsx as e,jsxs as i,Fragment as t}from"react/jsx-runtime";import{Box as o,Chip as n,CssBaseline as r,IconButton as s,ThemeProvider as a,Tooltip as l,Typography as d,createTheme as m,useMediaQuery as c,useTheme as p}from"@mui/material";import{ModalProvider as f}from"mui-modal-provider";import{memo as h,useCallback as u,useEffect as g,useState as w}from"react";import{ErrorBoundary as k}from"react-error-boundary";import{match as y}from"ts-pattern";import{useLocalStorage as b}from"usehooks-ts";import{PhxIcon as x,SnackbarProvider as v,createThemeWithPhoenixIcons as S}from"#package/ui-sdk";import{EditorMode as P}from"./EditorMode.js";import{EditorRuntimeProvider as j}from"./EditorRuntimeProvider.js";import{EditorAdminContextProvider as V}from"./admin/EditorAdminContext.js";import{EditorAdminMainContent as E}from"./admin/EditorAdminMainContent.js";import{EditorAdminSidebar as D}from"./admin/EditorAdminSidebar.js";import{useEditorAdminState as T}from"./admin/use-editor-admin-state.js";import{AgentModeBridge as A}from"./agent-mode/AgentModeBridge.js";import{Analytics as C}from"./analytics/Analytics.js";import{AnalyticsProvider as L}from"./analytics/AnalyticsContext.js";import{Logotype as M}from"./common/Logotype.js";import{PanelIconButton as R}from"./common/PanelIconButton.js";import{BrowserConsoleReporter as W}from"./console-reporter/BrowserConsoleReporter.js";import{DataHandler as I}from"./data/DataHandler.js";import{DebugFlags as F}from"./debug-flags/DebugFlags.js";import{DiagnosticsPanel as B}from"./diagnostics/DiagnosticsPanel.js";import{DomainEditors as G}from"./domain-editors/DomainEditors.js";import{DomainSpecProvider as z,useDomainSpecContext as Q}from"./domain-editors/DomainSpecContext.js";import{DomainReflection as H}from"./domain-reflection/DomainReflection.js";import{GraphQLPanel as U}from"./graphql/GraphQLPanel.js";import{LogsPanel as q}from"./logs/LogsPanel.js";import{EditorMockProvider as K}from"./mocks/EditorMockContext.js";import{Mocks as N}from"./mocks/Mocks.js";import{ProfilerPanel as O}from"./profiler/ProfilerPanel.js";import{RemoteFilesList as X}from"./remote-files/RemoteFilesList.js";import{SceneHandler as Y}from"./scene/SceneHandler.js";import{ScreenshotHandler as $}from"./screenshot/ScreenshotHandler.js";import{EditorConnectionProvider as J}from"./services/EditorConnectionContext.js";import{EditorActionButtons as Z}from"./sidebar/EditorActionButtons.js";import{StateInspector as _}from"./state-inspector/index.js";import{StateHandler as ee}from"./state/StateHandler.js";import{SpaTemplate as ei}from"./templates/SpaTemplate.js";import{Templates as et}from"./templates/Templates.js";import{TemplatesList as eo}from"./templates/TemplatesList.js";import{TunnelProvider as en,useTunnel as er}from"./tunnel/TunnelContext.js";import{TunnelPanel as es}from"./tunnel/TunnelPanel.js";import{hasTunnelProblem as ea}from"./tunnel/tunnel-view-model.js";import{VariantPageUnavailable as el}from"./variants/VariantPageUnavailable.js";import{HTML_VARIANT_FRAME_ATTRIBUTE as ed,VariantPreviewHandler as em,useConfiguratorContainerRef as ec}from"./variants/VariantPreviewHandler.js";import{VideoStudio as ep}from"./video-studio/VideoStudio.js";import{WebSocketStatus as ef}from"./websocket-status/WebSocketStatus.js";let eh=h(()=>e("div",{ref:ec(),style:{width:"100%",height:"100%"}})),eu=S(m()),eg=i=>i.enabled?e(k,{fallbackRender:()=>null,children:i.children}):i.children;export const EditorPanelView={Files:"Files",Reflections:"Reflections",Domain:"Domain",Templates:"Templates",Mocks:"Mocks",Inspector:"Inspector",Debug:"Debug",Profiler:"Profiler",GraphQL:"GraphQL",VideoStudio:"VideoStudio",Analytics:"Analytics",Diagnostics:"Diagnostics",Logs:"Logs",Tunnel:"Tunnel",WebSocketStatus:"WebSocketStatus",Admin:"Admin"};let ew=[{key:EditorPanelView.Templates,icon:"GridFour",title:"Templates"},{key:EditorPanelView.Reflections,icon:"House",title:"Reflections"},{key:EditorPanelView.Files,icon:"List",title:"Files"},{key:EditorPanelView.Domain,icon:"Gear",title:"Domain"},{key:EditorPanelView.Mocks,icon:"TagBold",title:"Mocks"},{key:EditorPanelView.Inspector,icon:"CurrencyDollar",title:"Inspector"},{key:EditorPanelView.Debug,icon:"EyeBold",title:"Debug"},{key:EditorPanelView.Profiler,icon:"Alarm",title:"Profiler"},{key:EditorPanelView.GraphQL,icon:"MagnifyingGlassBold",title:"GraphQL"},{key:EditorPanelView.VideoStudio,icon:"CameraRotate",title:"Video Studio"},{key:EditorPanelView.Analytics,icon:"Flame",title:"Analytics"},{key:EditorPanelView.Diagnostics,icon:"WarningCircle",title:"Diagnostics"},{key:EditorPanelView.Logs,icon:"BracketsCurly",title:"Logs"},{key:EditorPanelView.Tunnel,icon:"ArrowsHorizontal",title:"Webhook Tunnel"}],ek=h(r=>{let{panelView:a,setPanelView:m,width:c,setWidth:p,selectedTemplate:f,setSelectedTemplate:h,isResizing:k,setIsResizing:b,onExit:v,enableAdmin:S}=r,P=T(S),{unreadDiagnosticCount:j,markDiagnosticsRead:V}=Q(),{state:A}=er(),L=a?Math.max(c,240):38,[W,I]=w(0),z=u(()=>I(e=>e+1),[]);return g(()=>{a===EditorPanelView.Diagnostics&&V()},[V,a]),i(o,{component:"div",sx:{display:"grid",gridTemplateColumns:`${L}px min-content auto`,gridTemplateRows:"minmax(0, 1fr)",width:"100vw",height:"100vh",backgroundColor:"#ffffff",overflow:"hidden"},onMouseMove:e=>{k&&p(e.clientX)},onMouseUp:()=>{b(!1)},children:[i(o,{component:"div",sx:{display:"grid",gridTemplateColumns:"36px auto",backgroundColor:"#f8f9fa",borderRight:"1px solid #dee2e6",boxShadow:"2px 0 8px rgba(0, 0, 0, 0.06)",overflow:"hidden",height:"100%"},children:[i("div",{style:{backgroundColor:"#f8f9fa",height:"100%",display:"flex",flexDirection:"column",alignItems:"center",padding:"4px 0"},children:[e("div",{style:{marginBottom:"8px"},children:e(M,{variant:"icon-only"})}),i("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:"2px"},children:[S&&i(t,{children:[e(R,{icon:"SlidersHorizontal",title:"Admin",active:a===EditorPanelView.Admin,onClick:()=>{a===EditorPanelView.Admin?m(null):m(EditorPanelView.Admin)}}),e("div",{style:{borderBottom:"1px solid #dee2e6",margin:"2px 0"}})]}),ew.map(i=>e(R,{icon:i.icon,title:i.title,active:a===i.key,badgeCount:i.key===EditorPanelView.Tunnel?+!!ea(A):i.key===EditorPanelView.Diagnostics?j:0,onClick:()=>{a===i.key?m(null):m(i.key)}},i.key))]}),e(Z,{reload:z}),e("div",{style:{padding:"0 2px",paddingBottom:"4px"},children:e(R,{icon:"CloudArrowUp",title:"WebSocket Status",active:a===EditorPanelView.WebSocketStatus,onClick:()=>{a===EditorPanelView.WebSocketStatus?m(null):m(EditorPanelView.WebSocketStatus)}})}),v&&e("div",{style:{padding:"0 2px",paddingBottom:"8px"},children:e(R,{icon:"SignOut",title:"Exit Editor",variant:"danger",onClick:v})})]}),a&&i(o,{component:"div",sx:{display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",backgroundColor:"#ffffff"},children:[e(o,{component:"div",sx:{p:1.5,borderBottom:"1px solid #e9ecef",backgroundColor:"#ffffff"},children:i(o,{component:"div",sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[i(o,{component:"div",sx:{display:"flex",flexDirection:"row",alignItems:"center"},children:[e(d,{variant:"h6",sx:{fontSize:16,fontWeight:600,color:"#212529"},children:y(a).with("Files",()=>"Files").with("Reflections",()=>"Reflections").with("Domain",()=>"Domain").with("Templates",()=>"Templates").with("Mocks",()=>"Mocks").with("Inspector",()=>"State Inspector").with("Debug",()=>"Debug").with("Profiler",()=>"Profiler").with("GraphQL",()=>"GraphQL").with("VideoStudio",()=>"Video Studio").with("Analytics",()=>"Analytics").with("Diagnostics",()=>"Diagnostics").with("Logs",()=>"Dev Server Logs").with("Tunnel",()=>"Webhook Tunnel").with("WebSocketStatus",()=>"WebSocket Status").with("Admin",()=>"Admin").otherwise(e=>e)}),e(l,{title:y(a).with("Files",()=>"Browse and inspect loaded GLTF files and their contents").with("Reflections",()=>"Inspect internal Phoenix systems state and configuration").with("Domain",()=>"Edit YAML domain specifications and component configurations").with("Templates",()=>"Select different layout templates for the configurator interface").with("Mocks",()=>"Create and manage mock data for testing session and access configurations").with("Inspector",()=>"Walk the entity tree: fields, expressions, and children").with("Debug",()=>"Toggle scene debug visuals like offset anchors, snapping, and collision meshes").with("Profiler",()=>"Make domain expressions show up as named frames in browser CPU profiles").with("GraphQL",()=>"Run GraphQL queries against the schema generated from the assistant manifest").with("VideoStudio",()=>"Create video sequences by capturing keyframes and exporting as video").with("Analytics",()=>"View parse pipeline metrics, domain stats, and diagnostics").with("Diagnostics",()=>"View latest editor warnings and errors").with("Logs",()=>"View dev server logs: spec builds, webhooks, vite, and browser console").with("Tunnel",()=>"View webhook tunnel status and the requests routed through it").with("WebSocketStatus",()=>"View WebSocket connection status and editor mode information").with("Admin",()=>"Manage admin panel, publish data, and configure settings").otherwise(()=>"Panel information"),placement:"left",arrow:!0,children:e(s,{size:"small",sx:{ml:1,color:"#6c757d",fontSize:14,p:.25,"&:hover":{backgroundColor:"#f8f9fa",color:"#495057"}},children:e(x,{name:"Info",style:{fontSize:14}})})})]}),e(o,{component:"div",sx:{display:"flex",alignItems:"center",gap:1},children:"Templates"===a&&e(n,{label:f.charAt(0).toUpperCase()+f.slice(1),variant:"outlined",size:"small",sx:{backgroundColor:"#f8f9fa",borderColor:"#dee2e6",color:"#495057",fontWeight:500,fontSize:"0.75rem"}})})]})}),i(o,{component:"div",sx:{flex:1,backgroundColor:"#ffffff",overflow:"auto"},children:["Files"===a&&e(X,{}),"Reflections"===a&&e(H,{}),"Domain"===a&&e(G,{}),"Templates"===a&&e(eo,{selectedTemplate:f,onTemplateSelect:h}),"Mocks"===a&&e(N,{}),"Inspector"===a&&e(_,{}),"Debug"===a&&e(F,{}),"Profiler"===a&&e(O,{}),"GraphQL"===a&&e(U,{}),"VideoStudio"===a&&e(ep,{}),"Analytics"===a&&e(C,{}),"Diagnostics"===a&&e(B,{}),"Logs"===a&&e(q,{}),"Tunnel"===a&&e(es,{}),"WebSocketStatus"===a&&e(ef,{}),S&&"Admin"===a&&e(D,{...P})]})]})]}),e("div",{style:{width:"2px",backgroundColor:"#dee2e6",cursor:"ew-resize",boxShadow:"1px 0 3px rgba(0, 0, 0, 0.05)"},onMouseDown:()=>{b(!0)}}),i("div",{style:{position:"relative",overflow:"hidden"},children:[e("div",{style:{position:"absolute",inset:0,zIndex:+("Admin"!==a)},children:e(et,{selectedTemplate:f,children:e(eh,{},W)})}),S&&e("div",{style:{position:"absolute",inset:0,zIndex:+("Admin"===a)},children:e(E,{})})]})]})}),ey=h(()=>e(ei,{children:e(eh,{})})),eb=h(o=>{let{wsUrl:n="ws://localhost:3020",localMode:r=!1,domainSpec:s,initialRawProjectFiles:a,onExit:l,mockTemplates:d,autoApplyTemplate:m,initialTemplateKey:h,environmentKey:u,tagName:k,enableAdmin:y=!0,hideUi:x=!1}=o,S=c(p().breakpoints.up("md")),[E,D]=b("editor-width",350),[T,C]=b("editor-view",null),[M,R]=b("editor-template","spa"),[F,B]=w(!1);return g(()=>{null===T||Object.values(EditorPanelView).some(e=>e===T)&&(y||T!==EditorPanelView.Admin)||C(null)},[y,T,C]),e(f,{children:e(v,{maxSnack:5,children:i(J,{initialWsUrl:n,localMode:r,children:[!r&&e(W,{}),!r&&x&&e(A,{tagName:k}),e(eg,{enabled:x,children:e(V,{children:e(j,{tagName:k,children:e(en,{children:e(P,{agentMode:x,children:e(L,{children:e(z,{domainSpec:s,initialRawProjectFiles:a,children:i(K,{mockTemplates:d,autoApplyTemplate:m,initialTemplateKey:h,environmentKey:u,children:[!r&&i(t,{children:[e($,{}),e(ee,{}),e(I,{}),e(Y,{})]}),e(em,{children:S&&!x?e(ek,{panelView:T,setPanelView:C,width:E,setWidth:D,selectedTemplate:M,setSelectedTemplate:R,isResizing:F,setIsResizing:B,onExit:l,enableAdmin:y}):e(ey,{})})]})})})})})})})})]})})})});export const Editor=h(t=>{try{if(window.frameElement?.hasAttribute(ed))return e(el,{})}catch{}return i(a,{theme:eu,children:[e(r,{}),e(eb,{...t})]})});

package/dist/editor/EditorMode.d.ts

@@ -1,5 +1,7 @@
 import { type ReactNode } from 'react';
 interface EditorModeProps {
+    /** Whether the editor runs with its UI hidden in agent mode, so the dev error pages show "Agent at work". */
+    readonly agentMode?: boolean;
     readonly children: ReactNode;
 }
 export declare const EditorMode: (props: EditorModeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/EditorMode.js

@@ -1 +1 @@
-import{jsx as t,Fragment as r}from"react/jsx-runtime";import{useEffect as e}from"react";import{useApplicationRuntime as o}from"#package/react-sdk";export const EditorMode=n=>{let{children:i}=n,a=o();return e(()=>(a.actions.environment.setEditorMode(!0),()=>{a.actions.environment.setEditorMode(!1)}),[a]),t(r,{children:i})};
+import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useEffect as n}from"react";import{useApplicationRuntime as o}from"#package/react-sdk";export const EditorMode=r=>{let{agentMode:i=!1,children:s}=r,a=o();return n(()=>(a.actions.environment.setEditorMode(!0),()=>{a.actions.environment.setEditorMode(!1)}),[a]),n(()=>{if(i)return a.actions.environment.setAgentMode(!0),()=>{a.actions.environment.setAgentMode(!1)}},[i,a]),e(t,{children:s})};

package/dist/editor/agent-mode/AgentModeBridge.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Runs agent mode from the hidden editor, over the editor's own connection to `phoenix dev`: the
+ * rebuild outcome of each spec change drives the badge, a lost connection shows the restarting page,
+ * and a configurator that has not defined its element once the page has loaded shows the "Agent at
+ * work" page. A page that shows it, here or in a configurator fallback, reloads to recover after the
+ * next successful rebuild or once the dev server is back.
+ */
+export declare const AgentModeBridge: import("react").MemoExoticComponent<(props: {
+    readonly tagName: string;
+}) => import("react/jsx-runtime").JSX.Element>;

package/dist/editor/agent-mode/AgentModeBridge.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import{memo as r,useEffect as n,useRef as i,useState as a}from"react";import{AgentAtWorkPage as d,AgentModeBadge as s,isAgentAtWorkPageShown as c}from"#package/configurator";import{useEditorConnection as l}from"../services/EditorConnectionContext.js";import{trpc as m}from"../services/trpc.js";export const AgentModeBridge=r(r=>{let{tagName:u}=r,{connectionStatus:g}=l(),w=i(!1),[p,f]=a("idle"),[v,h]=a(null);return n(()=>{import("./agent-at-work-fonts.js")},[]),m.onSpecChange.useSubscription(void 0,{onData:e=>{e.build&&(f("ok"===e.build?"idle":"failed"),"ok"===e.build&&c()&&window.location.reload())}}),n(()=>{"connected"===g?"restarting"===v?window.location.reload():w.current=!0:w.current&&("disconnected"===g||"error"===g)&&h("restarting")},[g,v]),n(()=>{let e=()=>{window.setTimeout(()=>{void 0===customElements.get(u)&&(console.error('The configurator failed to start and shows the "Agent at work" page. The error it failed with is logged above.'),h(e=>e??"working"))})};return"complete"===document.readyState?void e():(window.addEventListener("load",e,{once:!0}),()=>window.removeEventListener("load",e))},[u]),o(t,{children:[v&&e(d,{variant:v}),e(s,{status:p})]})});

package/dist/editor/agent-mode/agent-at-work-fonts.d.ts

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

package/dist/editor/agent-mode/agent-at-work-fonts.js

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

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

@@ -1 +1 @@
-import{memo as e,useEffect as r,useRef as o}from"react";import{useEditorConnection as n}from"../services/EditorConnectionContext.js";import{trpc as t}from"../services/trpc.js";export const BrowserConsoleReporter=e(()=>{let{localMode:e}=n(),s=t.reportBrowserConsole.useMutation(),a=o(s);return a.current=s,r(()=>{if(e)return;let r=console.error,o=console.warn;console.error=(...e)=>{r.apply(console,e),a.current.mutate({level:"error",message:e.map(String).join(" "),source:"configurator",timestamp:new Date().toISOString()})},console.warn=(...e)=>{o.apply(console,e),a.current.mutate({level:"warn",message:e.map(String).join(" "),source:"configurator",timestamp:new Date().toISOString()})};let n=e=>{a.current.mutate({level:"error",message:`${e.message} at ${e.filename}:${e.lineno}:${e.colno}`,source:"configurator",timestamp:new Date().toISOString()})},t=e=>{a.current.mutate({level:"error",message:`Unhandled rejection: ${e.reason instanceof Error?e.reason.message:String(e.reason)}`,source:"configurator",timestamp:new Date().toISOString()})};return window.addEventListener("error",n),window.addEventListener("unhandledrejection",t),()=>{console.error=r,console.warn=o,window.removeEventListener("error",n),window.removeEventListener("unhandledrejection",t)}},[e]),null});
+import{memo as r,useEffect as o,useRef as e}from"react";import{useEditorConnection as t}from"../services/EditorConnectionContext.js";import{trpc as n}from"../services/trpc.js";import{connectConsoleCapture as s}from"./console-capture.js";export const BrowserConsoleReporter=r(()=>{let{localMode:r}=t(),c=n.reportBrowserConsole.useMutation(),i=e(c);return i.current=c,o(()=>{if(!r)return s(r=>i.current.mutate(r))},[r]),null});

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/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;