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

package/dist/configurator/ConfiguratorApp.js

@@ -1 +1 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{I18nProvider as o}from"@lingui/react";import{QueryClientProvider as i}from"@tanstack/react-query";import n from"mui-modal-provider";import{useEffect as t}from"react";import{standardWebComponentProperties as c}from"#package/domain";import{getAvailableLocales as a,resolveLocale as m}from"#package/i18n";import{ApplicationType as l,ApplicationTypeProvider as d,InvalidDeploymentReload as p,LoaderHost as s,SessionServiceProvider as f,useApplicationQueryClient as u,useI18n as h,useSpecAlwaysExpand as g,useSpecAppLoader as x,useSpecPrefetchTextureUrls as j,useSpecPreview as k,useWebComponentProperty$ as v,useWebComponentPropertySetter as b,useWebComponentPropertyValue as y}from"#package/react-sdk";import{SnackbarProvider as C}from"#package/ui-sdk";import{ConfiguratorDataProvider as w}from"./configurator-context/ConfiguratorDataProvider.js";import{ConfiguratorResponsiveProvider as E}from"./configurator-context/ConfiguratorResponsiveProvider.js";import{usePowerRoutingLifecycle as I}from"./configurator-context/configurator-routing/use-power-routing-lifecycle.js";import{ConfiguratorRoutingProvider as L,OnApplicationStartProvider as P,OnRoutingReadyProvider as Z,OnSessionReadyProvider as q,PresetSelectionProvider as A,PreviewApplicationProvider as B}from"./configurator-context/index.js";import{LoadingErrorBoundary as D}from"./pages/error-boundaries/LoadingErrorBoundary.js";import{GeneralErrorFallback as F,RootPage as R}from"./pages/index.js";import{SceneResourcesProvider as S}from"./scene/index.js";import{EncapsulatedConfiguratorTheme as T}from"./ui/index.js";import{AppLoader as U}from"./ui/phoenix-layout-elements/index.js";export const ConfiguratorApp=()=>{let z=u(),G=h(),H=x(),J=k(),K=g(),M=j(),N=b(c.locale),O=v(c.locale);t(()=>{let r=O.subscribe(r=>{let e=m(r,a(G));G.activate(e)}),e=()=>{N(G.locale)};return G.on("change",e),()=>{r.unsubscribe(),G.removeListener("change",e)}},[O,G,N]);let Q=y(c.containerZIndex),V=y(c.power);return(I(),"off"===V)?null:r(d,{type:l.Configurator,children:r(i,{client:z,children:r(T,{children:r(s,{children:r(E,{containerZIndex:Q,children:r(U,{mode:H,children:r(B,{alwaysExpand:K,preview:J,children:r(o,{i18n:G,children:r(C,{maxSnack:5,children:r(D,{FallbackComponent:F,children:r(S,{prefetchTextureUrls:M,children:r(P,{children:r(f,{children:r(q,{children:"on"===V&&r(L,{children:r(w,{children:r(A,{children:r(Z,{children:e(n,{children:[r(p,{}),r(R,{})]})})})})})})})})})})})})})})})})})})})};
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{I18nProvider as o}from"@lingui/react";import{QueryClientProvider as n}from"@tanstack/react-query";import i from"mui-modal-provider";import{useEffect as l}from"react";import{standardWebComponentProperties as a}from"#package/domain";import{getAvailableLocales as t,resolveLocale as c}from"#package/i18n";import{ApplicationType as d,ApplicationTypeProvider as m,ConfiguratorDataProvider as s,ConfiguratorProviderSlot as p,ConfiguratorProviderSlotHost as h,ConfiguratorRoutingProvider as u,ConfiguratorUiElement as f,ConfiguratorUiElementHost as g,ErrorFallbackElement as b,LoaderHost as k,OnApplicationStartProvider as x,OnRoutingReadyProvider as j,OnSessionReadyProvider as v,PlainErrorFallback as y,PresetSelectionProvider as C,SessionServiceProvider as w,useApplicationQueryClient as E,useI18n as F,usePowerRoutingLifecycle as L,useSpecAlwaysExpand as R,useSpecPreview as q,useWebComponentProperty$ as A,useWebComponentPropertySetter as B,useWebComponentPropertyValue as D}from"#package/react-sdk";import{PreviewApplicationProvider as G}from"./configurator-context/index.js";import{LoadingErrorBoundary as H}from"./pages/error-boundaries/LoadingErrorBoundary.js";import{RootPage as I}from"./pages/index.js";let M=e=>r(b,{name:f.GeneralErrorFallback,unregisteredFallback:y,...e});export const ConfiguratorApp=()=>{let b=E(),y=F(),S=q(),T=R(),z=B(a.locale),J=A(a.locale);l(()=>{let r=J.subscribe(r=>{let e=c(r,t(y));y.activate(e)}),e=()=>{z(y.locale)};return y.on("change",e),()=>{r.unsubscribe(),y.removeListener("change",e)}},[J,y,z]);let K=D(a.power);return(L(),"off"===K)?null:r(m,{type:d.Configurator,children:r(n,{client:b,children:r(h,{slot:p.Theme,children:r(k,{children:r(h,{slot:p.Container,children:r(h,{slot:p.Loader,children:r(G,{alwaysExpand:T,preview:S,children:r(o,{i18n:y,children:r(h,{slot:p.MessageHost,children:r(H,{FallbackComponent:M,children:r(h,{slot:p.SceneResources,children:r(x,{children:r(w,{children:r(v,{children:"on"===K&&r(u,{children:r(s,{children:r(C,{children:r(j,{children:e(i,{children:[r(g,{name:f.InvalidDeploymentReload}),r(I,{})]})})})})})})})})})})})})})})})})})})})};

package/dist/configurator/agent-at-work/AgentAtWorkFallback.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The fallback every configurator error boundary renders in agent mode: it logs the error, which the
+ * console forwarding takes to the terminal, and shows the "Agent at work" page.
+ */
+export declare const AgentAtWorkFallback: (props: {
+    readonly error: unknown;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/agent-at-work/AgentAtWorkFallback.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{useEffect as t}from"react";import{AgentAtWorkPage as o}from"./AgentAtWorkPage.js";export const AgentAtWorkFallback=e=>{let{error:a}=e;return t(()=>{console.error(`The configurator hit an error and shows the "Agent at work" page: ${a instanceof Error?a.stack??`${a.name}: ${a.message}`:String(a)}`)},[a]),r(o,{variant:"working"})};

package/dist/configurator/agent-at-work/AgentAtWorkPage.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `working` is the page for a configurator that failed; `restarting` is the one for a page that lost
+ * its dev server.
+ */
+export type AgentAtWorkVariant = 'working' | 'restarting';
+/**
+ * Whether an "Agent at work" page shows on this document.
+ *
+ * @internal Read by the hidden editor of agent mode only.
+ */
+export declare const isAgentAtWorkPageShown: () => boolean;
+/**
+ * The "Agent at work" page of agent mode, shown in place of every dev error page. It shows no error
+ * details; those go to the terminal.
+ *
+ * @internal Rendered by the configurator fallbacks and the hidden editor of agent mode only.
+ */
+export declare const AgentAtWorkPage: (props: {
+    readonly variant: AgentAtWorkVariant;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/agent-at-work/AgentAtWorkPage.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as r,useState as a}from"react";import{StudioMark as n,StudioMiniMark as o}from"./StudioMark.js";import{agentAtWorkCopy as s,pickNextLineIndex as i}from"./agent-at-work-copy.js";import{agentAtWorkStyles as l,agentClass as m}from"./agent-at-work-styles.js";let d="data-phoenix-agent-at-work";export const isAgentAtWorkPageShown=()=>document.documentElement.hasAttribute(d);export const AgentAtWorkPage=c=>{let{variant:u}=c,h=(()=>{let e=s.rotatingLines.length,[t,n]=a(()=>i(e,void 0,Math.random));return r(()=>{let t=window.setInterval(()=>n(t=>i(e,t,Math.random)),4e3);return()=>window.clearInterval(t)},[e]),t})();return r(()=>(document.documentElement.setAttribute(d,""),()=>document.documentElement.removeAttribute(d)),[]),t("div",{className:m.screen,role:"status","aria-live":"polite","data-variant":u,children:[e("style",{children:l}),e(n,{}),e("h1",{className:m.headline,children:s.headline}),e("p",{className:m.subline,children:s.subline[u]}),t("p",{className:m.line,"aria-hidden":"true",children:[e(o,{}),e("span",{children:s.rotatingLines[h]})]},h),e("p",{className:m.footer,children:s.footer})]})};

package/dist/configurator/agent-at-work/AgentModeBadge.d.ts

@@ -0,0 +1,11 @@
+/** What the badge shows: agent mode on and up to date, or the latest change failed to build. */
+export type AgentModeBadgeStatus = 'idle' | 'failed';
+/**
+ * The corner badge of agent mode, in `status`, unless it was dismissed during this browser session. It
+ * never shows error text: the agent reads the details in the terminal.
+ *
+ * @internal Rendered by the hidden editor of agent mode only.
+ */
+export declare const AgentModeBadge: (props: {
+    readonly status: AgentModeBadgeStatus;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/configurator/agent-at-work/AgentModeBadge.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as s}from"react";import{StudioMiniMark as a}from"./StudioMark.js";import{agentAtWorkCopy as r}from"./agent-at-work-copy.js";import{agentAtWorkStyles as i,agentClass as o}from"./agent-at-work-styles.js";let n="phoenix-agent-badge-dismissed",d=()=>{try{return"true"===window.sessionStorage.getItem(n)}catch{return!1}};export const AgentModeBadge=l=>{let{status:c}=l,[m,g]=s(d);return m?null:t("div",{id:"phoenix-agent-badge",className:o.badge,role:"status","aria-live":"polite","data-status":c,children:[e("style",{children:i}),e("span",{className:o.icon,"aria-hidden":"true",children:"idle"===c?e(a,{}):e("span",{className:o.failedDot})}),e("span",{className:o.label,children:r.badge[c]}),e("button",{type:"button",className:o.dismiss,title:r.badge.dismiss,"aria-label":r.badge.dismiss,onClick:()=>{try{window.sessionStorage.setItem(n,"true")}catch{}g(!0)},children:e("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round","aria-hidden":"true",children:e("path",{d:"M4 4l8 8M12 4l-8 8"})})})]})};

package/dist/configurator/agent-at-work/StudioMark.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The animated Studio mark of the "Agent at work" page: fluid lines draw in, the outline draws, the
+ * fill fades in, the dot blinks once, the lines loosen, and it loops. `agent-at-work-styles.ts`
+ * animates it and shows the finished mark still under reduced motion.
+ */
+export declare const StudioMark: () => import("react/jsx-runtime").JSX.Element;
+/** The 14px Studio mark of the rotating line and the badge, whose dot blinks now and then. */
+export declare const StudioMiniMark: () => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/agent-at-work/StudioMark.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as s}from"react/jsx-runtime";import{agentClass as e}from"./agent-at-work-styles.js";let t="M6 0 H18 A6 6 0 0 1 24 6 V18 A6 6 0 0 1 18 24 H6 A6 6 0 0 1 0 18 V6 A6 6 0 0 1 6 0 Z",i=["M-16 2 C -8 -6, -2 6, 4 -2 S 14 -10, 22 -6","M40 10 C 32 4, 28 16, 22 12 S 10 6, 2 14","M-14 30 C -6 24, 2 34, 8 28 S 20 22, 36 30"],r=()=>a("circle",{className:e.dot,cx:"8.6",cy:"15.6",r:"3.3"});export const StudioMark=()=>s("svg",{className:e.mark,viewBox:"-18 -12 60 48","aria-hidden":"true",focusable:"false",children:[i.map(s=>a("path",{className:e.flow,pathLength:1,d:s},s)),a("path",{className:e.markFill,d:t}),a("path",{className:e.markOutline,pathLength:1,d:t}),a(r,{})]});export const StudioMiniMark=()=>s("svg",{className:`${e.mini} ${e.wink}`,width:"14",height:"14",viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",children:[a("path",{className:e.miniMark,d:t}),a(r,{})]});

package/dist/configurator/agent-at-work/agent-at-work-copy.d.ts

@@ -0,0 +1,17 @@
+/** The copy of the "Agent at work" screen and the rebuild badge. Dev-only, so not translated. */
+export declare const agentAtWorkCopy: {
+    readonly headline: 'Agent at work';
+    readonly subline: {
+        readonly working: 'Your configurator is mid-makeover. It’ll pop back on its own.';
+        readonly restarting: 'The agent is restarting things. Hang tight.';
+    };
+    readonly footer: 'Taking a while? Ask your agent how it’s going.';
+    readonly rotatingLines: readonly ['Arguing with TypeScript…', 'Consulting the spec…', 'Tightening the bolts…', 'Seasoning the pixels…', 'Thinking outside the box…', 'Untangling the YAML…', 'Convincing the materials to behave…', 'Teaching the buttons some manners…', 'Measuring twice, rendering once…', 'Rearranging the furniture…', 'Negotiating with the 3D model…', 'Adding a pinch of polish…', 'Counting all the variants…', 'Reading the docs (yes, really)…', 'Nudging things one pixel to the left…', 'Checking the price is right…', 'Making the dropdowns drop down…', 'Polishing the edge cases…', 'Feeding the build pipeline…', 'Lining up the steps…', 'Turning coffee into configurators…', 'Double-checking the double-checks…', 'Choosing a nicer shade of nice…', 'Almost there, probably…'];
+    readonly badge: {
+        readonly idle: 'Agent mode';
+        readonly failed: 'Last change didn’t build';
+        readonly dismiss: 'Hide for this session';
+    };
+};
+/** A random index into `count` lines other than `previous`, so the same line never shows twice in a row. */
+export declare const pickNextLineIndex: (count: number, previous: number | undefined, random: () => number) => number;

package/dist/configurator/agent-at-work/agent-at-work-copy.js

@@ -0,0 +1 @@
+export const agentAtWorkCopy={headline:"Agent at work",subline:{working:"Your configurator is mid-makeover. It’ll pop back on its own.",restarting:"The agent is restarting things. Hang tight."},footer:"Taking a while? Ask your agent how it’s going.",rotatingLines:["Arguing with TypeScript…","Consulting the spec…","Tightening the bolts…","Seasoning the pixels…","Thinking outside the box…","Untangling the YAML…","Convincing the materials to behave…","Teaching the buttons some manners…","Measuring twice, rendering once…","Rearranging the furniture…","Negotiating with the 3D model…","Adding a pinch of polish…","Counting all the variants…","Reading the docs (yes, really)…","Nudging things one pixel to the left…","Checking the price is right…","Making the dropdowns drop down…","Polishing the edge cases…","Feeding the build pipeline…","Lining up the steps…","Turning coffee into configurators…","Double-checking the double-checks…","Choosing a nicer shade of nice…","Almost there, probably…"],badge:{idle:"Agent mode",failed:"Last change didn’t build",dismiss:"Hide for this session"}};export const pickNextLineIndex=(e,i,n)=>e<=1||void 0===i?Math.floor(n()*e):(i+(1+Math.floor(n()*(e-1))))%e;

package/dist/configurator/agent-at-work/agent-at-work-styles.d.ts

@@ -0,0 +1,23 @@
+/** Class names of the "Agent at work" page and the badge, styled by {@link agentAtWorkStyles}. */
+export declare const agentClass: {
+    readonly screen: "phx-agent-screen";
+    readonly mark: "phx-agent-mark";
+    readonly flow: "phx-agent-flow";
+    readonly markFill: "phx-agent-mark-fill";
+    readonly markOutline: "phx-agent-mark-outline";
+    readonly dot: "phx-agent-dot";
+    readonly mini: "phx-agent-mini";
+    readonly miniMark: "phx-agent-mini-mark";
+    readonly wink: "phx-agent-wink";
+    readonly headline: "phx-agent-headline";
+    readonly subline: "phx-agent-subline";
+    readonly line: "phx-agent-line";
+    readonly footer: "phx-agent-footer";
+    readonly badge: "phx-agent-badge";
+    readonly icon: "phx-agent-icon";
+    readonly failedDot: "phx-agent-failed-dot";
+    readonly label: "phx-agent-label";
+    readonly dismiss: "phx-agent-dismiss";
+};
+/** Styles of the "Agent at work" page, the mark animation included, and of the badge. */
+export declare const agentAtWorkStyles = "\n  .phx-agent-screen,\n  .phx-agent-badge {\n    all: initial;\n    --agent-bg: #ffffff;\n    --agent-surface: #ffffff;\n    --agent-hover: #f2f2f2;\n    --agent-subtle: #f2f2f2;\n    --agent-border3: #d4d4d4;\n    --agent-text: #171717;\n    --agent-text2: #3d3d3d;\n    --agent-muted: #5c5c5c;\n    --agent-faint: #8f8f8f;\n    --agent-bad: #b42318;\n    --agent-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);\n    color-scheme: light;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .phx-agent-screen,\n    .phx-agent-badge {\n      --agent-bg: #08090a;\n      --agent-surface: #0f1011;\n      --agent-hover: #16171a;\n      --agent-subtle: #1c1d21;\n      --agent-border3: #3a3d42;\n      --agent-text: #f7f8f8;\n      --agent-text2: #d0d6e0;\n      --agent-muted: #8a8f98;\n      --agent-faint: #62666d;\n      --agent-bad: #ff7a7a;\n      --agent-shadow: 0 4px 32px rgba(8, 9, 10, 0.6), inset 0 0 0 1px #23252a;\n      color-scheme: dark;\n    }\n  }\n\n  .phx-agent-mini {\n    display: block;\n    flex: none;\n  }\n\n  .phx-agent-mini .phx-agent-mini-mark {\n    fill: var(--agent-text);\n  }\n\n  .phx-agent-mini .phx-agent-dot {\n    fill: var(--agent-bg);\n  }\n\n  .phx-agent-wink .phx-agent-dot {\n    animation: phx-agent-wink 4s ease-in-out infinite;\n  }\n\n  @keyframes phx-agent-wink {\n    0%,\n    88% {\n      opacity: 1;\n    }\n    91% {\n      opacity: 0.1;\n    }\n    94%,\n    100% {\n      opacity: 1;\n    }\n  }\n\n  .phx-agent-screen {\n    position: fixed;\n    inset: 0;\n    z-index: 10000;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    box-sizing: border-box;\n    background: var(--agent-bg);\n    color: var(--agent-text);\n    font-family: \"Funnel Sans Variable\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    font-feature-settings: 'cv01', 'ss03';\n    -webkit-font-smoothing: antialiased;\n    text-align: center;\n  }\n\n  .phx-agent-mark {\n    display: block;\n    inline-size: 150px;\n    block-size: 160px;\n    margin-block-end: 20px;\n  }\n\n  .phx-agent-headline {\n    margin: 0;\n    font-family: \"Funnel Display Variable\", \"Funnel Sans Variable\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    font-size: 28px;\n    line-height: 1.25;\n    font-weight: 600;\n    letter-spacing: -0.015em;\n  }\n\n  .phx-agent-subline {\n    margin: 8px 0 0;\n    max-inline-size: 420px;\n    font-size: 15px;\n    line-height: 22px;\n    color: var(--agent-text2);\n  }\n\n  .phx-agent-line {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    min-block-size: 28px;\n    margin: 20px 0 0;\n    padding: 0 12px 0 8px;\n    border-radius: 999px;\n    background: var(--agent-subtle);\n    font-size: 13px;\n    color: var(--agent-muted);\n  }\n\n  .phx-agent-line {\n    animation: phx-agent-line-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;\n  }\n\n  .phx-agent-footer {\n    position: absolute;\n    inset-inline: 24px;\n    inset-block-end: 24px;\n    margin: 0;\n    font-size: 12px;\n    line-height: 16px;\n    color: var(--agent-faint);\n  }\n\n  .phx-agent-mark path,\n  .phx-agent-mark circle {\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .phx-agent-mark .phx-agent-flow {\n    fill: none;\n    stroke: var(--agent-border3);\n    stroke-width: 0.6;\n    stroke-dasharray: 1 1;\n    animation: phx-agent-flow 6s ease-in-out infinite;\n  }\n\n  .phx-agent-mark .phx-agent-flow:nth-child(2) {\n    animation-delay: 0.25s;\n  }\n\n  .phx-agent-mark .phx-agent-flow:nth-child(3) {\n    animation-delay: 0.5s;\n  }\n\n  .phx-agent-mark .phx-agent-mark-outline {\n    fill: none;\n    stroke: var(--agent-text);\n    stroke-width: 0.9;\n    stroke-dasharray: 1 1;\n    animation: phx-agent-outline 6s ease-in-out infinite;\n  }\n\n  .phx-agent-mark .phx-agent-mark-fill {\n    fill: var(--agent-text);\n    animation: phx-agent-fill 6s ease-in-out infinite;\n  }\n\n  .phx-agent-mark .phx-agent-dot {\n    fill: var(--agent-bg);\n    animation: phx-agent-dot 6s ease-in-out infinite;\n  }\n\n  @keyframes phx-agent-flow {\n    0% {\n      stroke-dashoffset: 1;\n      opacity: 0;\n    }\n    12% {\n      opacity: 0.9;\n    }\n    38% {\n      stroke-dashoffset: 0;\n      opacity: 0.9;\n    }\n    50%,\n    100% {\n      stroke-dashoffset: 0;\n      opacity: 0;\n    }\n  }\n\n  @keyframes phx-agent-outline {\n    0%,\n    22% {\n      stroke-dashoffset: 1;\n    }\n    48%,\n    80% {\n      stroke-dashoffset: 0;\n    }\n    96%,\n    100% {\n      stroke-dashoffset: -1;\n    }\n  }\n\n  @keyframes phx-agent-fill {\n    0%,\n    46% {\n      opacity: 0;\n    }\n    54%,\n    80% {\n      opacity: 1;\n    }\n    90%,\n    100% {\n      opacity: 0;\n    }\n  }\n\n  @keyframes phx-agent-dot {\n    0%,\n    56% {\n      opacity: 0;\n    }\n    62%,\n    68% {\n      opacity: 1;\n    }\n    69.5% {\n      opacity: 0.1;\n    }\n    71%,\n    78% {\n      opacity: 1;\n    }\n    86%,\n    100% {\n      opacity: 0;\n    }\n  }\n\n  @keyframes phx-agent-line-in {\n    from {\n      opacity: 0;\n      transform: translateY(6px);\n    }\n    to {\n      opacity: 1;\n      transform: none;\n    }\n  }\n\n  @media (max-width: 600px) {\n    .phx-agent-mark {\n      inline-size: 110px;\n      block-size: 118px;\n    }\n\n    .phx-agent-headline {\n      font-size: 24px;\n    }\n\n    /* Above the badge, which spans most of a phone's width */\n    .phx-agent-footer {\n      inset-block-end: 64px;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .phx-agent-screen *,\n    .phx-agent-badge,\n    .phx-agent-badge * {\n      animation: none !important;\n    }\n\n    .phx-agent-mark .phx-agent-flow {\n      opacity: 0;\n    }\n\n    .phx-agent-mark .phx-agent-mark-outline {\n      stroke-dashoffset: 0;\n    }\n\n    .phx-agent-mark .phx-agent-mark-fill,\n    .phx-agent-mark .phx-agent-dot {\n      opacity: 1;\n    }\n  }\n\n\n  .phx-agent-badge {\n    position: fixed;\n    inset-inline-end: 16px;\n    inset-block-end: 16px;\n    z-index: 10000;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    block-size: 36px;\n    max-inline-size: calc(100vw - 32px);\n    padding: 0 4px 0 12px;\n    box-sizing: border-box;\n    border-radius: 999px;\n    background: var(--agent-surface);\n    box-shadow: var(--agent-shadow);\n    color: var(--agent-text2);\n    font-family: \"Funnel Sans Variable\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    font-size: 12px;\n    font-weight: 500;\n    -webkit-font-smoothing: antialiased;\n    animation: phx-agent-rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;\n  }\n\n  .phx-agent-icon {\n    display: flex;\n    flex: none;\n  }\n\n  .phx-agent-failed-dot {\n    inline-size: 7px;\n    block-size: 7px;\n    border-radius: 50%;\n    background: var(--agent-bad);\n  }\n\n  .phx-agent-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .phx-agent-dismiss {\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    inline-size: 28px;\n    block-size: 28px;\n    padding: 0;\n    border: 0;\n    border-radius: 999px;\n    background: transparent;\n    color: var(--agent-muted);\n    cursor: pointer;\n  }\n\n  .phx-agent-dismiss:hover {\n    background: var(--agent-hover);\n    color: var(--agent-text);\n  }\n\n  .phx-agent-dismiss:focus-visible {\n    outline: 2px solid var(--agent-text);\n    outline-offset: 2px;\n  }\n\n  @keyframes phx-agent-rise {\n    from {\n      opacity: 0;\n      transform: translateY(8px);\n    }\n    to {\n      opacity: 1;\n      transform: none;\n    }\n  }\n\n";

package/dist/configurator/agent-at-work/agent-at-work-styles.js

@@ -0,0 +1,374 @@
+let e="phx-agent";export const agentClass={screen:`${e}-screen`,mark:`${e}-mark`,flow:`${e}-flow`,markFill:`${e}-mark-fill`,markOutline:`${e}-mark-outline`,dot:`${e}-dot`,mini:`${e}-mini`,miniMark:`${e}-mini-mark`,wink:`${e}-wink`,headline:`${e}-headline`,subline:`${e}-subline`,line:`${e}-line`,footer:`${e}-footer`,badge:`${e}-badge`,icon:`${e}-icon`,failedDot:`${e}-failed-dot`,label:`${e}-label`,dismiss:`${e}-dismiss`};let i=`
+  .${e}-screen,
+  .${e}-badge {
+    all: initial;
+    --agent-bg: #ffffff;
+    --agent-surface: #ffffff;
+    --agent-hover: #f2f2f2;
+    --agent-subtle: #f2f2f2;
+    --agent-border3: #d4d4d4;
+    --agent-text: #171717;
+    --agent-text2: #3d3d3d;
+    --agent-muted: #5c5c5c;
+    --agent-faint: #8f8f8f;
+    --agent-bad: #b42318;
+    --agent-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
+    color-scheme: light;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .${e}-screen,
+    .${e}-badge {
+      --agent-bg: #08090a;
+      --agent-surface: #0f1011;
+      --agent-hover: #16171a;
+      --agent-subtle: #1c1d21;
+      --agent-border3: #3a3d42;
+      --agent-text: #f7f8f8;
+      --agent-text2: #d0d6e0;
+      --agent-muted: #8a8f98;
+      --agent-faint: #62666d;
+      --agent-bad: #ff7a7a;
+      --agent-shadow: 0 4px 32px rgba(8, 9, 10, 0.6), inset 0 0 0 1px #23252a;
+      color-scheme: dark;
+    }
+  }
+`,a='"Funnel Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif',n=`
+  .${e}-mini {
+    display: block;
+    flex: none;
+  }
+
+  .${e}-mini .${e}-mini-mark {
+    fill: var(--agent-text);
+  }
+
+  .${e}-mini .${e}-dot {
+    fill: var(--agent-bg);
+  }
+
+  .${e}-wink .${e}-dot {
+    animation: ${e}-wink 4s ease-in-out infinite;
+  }
+
+  @keyframes ${e}-wink {
+    0%,
+    88% {
+      opacity: 1;
+    }
+    91% {
+      opacity: 0.1;
+    }
+    94%,
+    100% {
+      opacity: 1;
+    }
+  }
+`;export const agentAtWorkStyles=`${i}${n}
+  .${e}-screen {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    box-sizing: border-box;
+    background: var(--agent-bg);
+    color: var(--agent-text);
+    font-family: ${a};
+    font-feature-settings: 'cv01', 'ss03';
+    -webkit-font-smoothing: antialiased;
+    text-align: center;
+  }
+
+  .${e}-mark {
+    display: block;
+    inline-size: 150px;
+    block-size: 160px;
+    margin-block-end: 20px;
+  }
+
+  .${e}-headline {
+    margin: 0;
+    font-family: "Funnel Display Variable", "Funnel Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
+    font-size: 28px;
+    line-height: 1.25;
+    font-weight: 600;
+    letter-spacing: -0.015em;
+  }
+
+  .${e}-subline {
+    margin: 8px 0 0;
+    max-inline-size: 420px;
+    font-size: 15px;
+    line-height: 22px;
+    color: var(--agent-text2);
+  }
+
+  .${e}-line {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-block-size: 28px;
+    margin: 20px 0 0;
+    padding: 0 12px 0 8px;
+    border-radius: 999px;
+    background: var(--agent-subtle);
+    font-size: 13px;
+    color: var(--agent-muted);
+  }
+
+  .${e}-line {
+    animation: ${e}-line-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+  }
+
+  .${e}-footer {
+    position: absolute;
+    inset-inline: 24px;
+    inset-block-end: 24px;
+    margin: 0;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--agent-faint);
+  }
+
+  .${e}-mark path,
+  .${e}-mark circle {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .${e}-mark .${e}-flow {
+    fill: none;
+    stroke: var(--agent-border3);
+    stroke-width: 0.6;
+    stroke-dasharray: 1 1;
+    animation: ${e}-flow 6s ease-in-out infinite;
+  }
+
+  .${e}-mark .${e}-flow:nth-child(2) {
+    animation-delay: 0.25s;
+  }
+
+  .${e}-mark .${e}-flow:nth-child(3) {
+    animation-delay: 0.5s;
+  }
+
+  .${e}-mark .${e}-mark-outline {
+    fill: none;
+    stroke: var(--agent-text);
+    stroke-width: 0.9;
+    stroke-dasharray: 1 1;
+    animation: ${e}-outline 6s ease-in-out infinite;
+  }
+
+  .${e}-mark .${e}-mark-fill {
+    fill: var(--agent-text);
+    animation: ${e}-fill 6s ease-in-out infinite;
+  }
+
+  .${e}-mark .${e}-dot {
+    fill: var(--agent-bg);
+    animation: ${e}-dot 6s ease-in-out infinite;
+  }
+
+  @keyframes ${e}-flow {
+    0% {
+      stroke-dashoffset: 1;
+      opacity: 0;
+    }
+    12% {
+      opacity: 0.9;
+    }
+    38% {
+      stroke-dashoffset: 0;
+      opacity: 0.9;
+    }
+    50%,
+    100% {
+      stroke-dashoffset: 0;
+      opacity: 0;
+    }
+  }
+
+  @keyframes ${e}-outline {
+    0%,
+    22% {
+      stroke-dashoffset: 1;
+    }
+    48%,
+    80% {
+      stroke-dashoffset: 0;
+    }
+    96%,
+    100% {
+      stroke-dashoffset: -1;
+    }
+  }
+
+  @keyframes ${e}-fill {
+    0%,
+    46% {
+      opacity: 0;
+    }
+    54%,
+    80% {
+      opacity: 1;
+    }
+    90%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes ${e}-dot {
+    0%,
+    56% {
+      opacity: 0;
+    }
+    62%,
+    68% {
+      opacity: 1;
+    }
+    69.5% {
+      opacity: 0.1;
+    }
+    71%,
+    78% {
+      opacity: 1;
+    }
+    86%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes ${e}-line-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .${e}-mark {
+      inline-size: 110px;
+      block-size: 118px;
+    }
+
+    .${e}-headline {
+      font-size: 24px;
+    }
+
+    /* Above the badge, which spans most of a phone's width */
+    .${e}-footer {
+      inset-block-end: 64px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .${e}-screen *,
+    .${e}-badge,
+    .${e}-badge * {
+      animation: none !important;
+    }
+
+    .${e}-mark .${e}-flow {
+      opacity: 0;
+    }
+
+    .${e}-mark .${e}-mark-outline {
+      stroke-dashoffset: 0;
+    }
+
+    .${e}-mark .${e}-mark-fill,
+    .${e}-mark .${e}-dot {
+      opacity: 1;
+    }
+  }
+
+
+  .${e}-badge {
+    position: fixed;
+    inset-inline-end: 16px;
+    inset-block-end: 16px;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    block-size: 36px;
+    max-inline-size: calc(100vw - 32px);
+    padding: 0 4px 0 12px;
+    box-sizing: border-box;
+    border-radius: 999px;
+    background: var(--agent-surface);
+    box-shadow: var(--agent-shadow);
+    color: var(--agent-text2);
+    font-family: ${a};
+    font-size: 12px;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+    animation: ${e}-rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+  }
+
+  .${e}-icon {
+    display: flex;
+    flex: none;
+  }
+
+  .${e}-failed-dot {
+    inline-size: 7px;
+    block-size: 7px;
+    border-radius: 50%;
+    background: var(--agent-bad);
+  }
+
+  .${e}-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .${e}-dismiss {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: 28px;
+    block-size: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--agent-muted);
+    cursor: pointer;
+  }
+
+  .${e}-dismiss:hover {
+    background: var(--agent-hover);
+    color: var(--agent-text);
+  }
+
+  .${e}-dismiss:focus-visible {
+    outline: 2px solid var(--agent-text);
+    outline-offset: 2px;
+  }
+
+  @keyframes ${e}-rise {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+`;

package/dist/configurator/agent-at-work/index.d.ts

@@ -0,0 +1,3 @@
+export { AgentAtWorkFallback } from './AgentAtWorkFallback.js';
+export { AgentAtWorkPage, type AgentAtWorkVariant, isAgentAtWorkPageShown } from './AgentAtWorkPage.js';
+export { AgentModeBadge, type AgentModeBadgeStatus } from './AgentModeBadge.js';

package/dist/configurator/agent-at-work/index.js

@@ -0,0 +1 @@
+export{AgentAtWorkFallback}from"./AgentAtWorkFallback.js";export{AgentAtWorkPage,isAgentAtWorkPageShown}from"./AgentAtWorkPage.js";export{AgentModeBadge}from"./AgentModeBadge.js";

package/dist/configurator/application-runtime/extensions/selectors.js

@@ -1 +1 @@
-import{createSelector as e}from"@salsita-ai/common/utils";import{createSessionAssistant as t,isAssistantSetupHandler as n}from"#package/domain";import{AnimationSystem as s,AssistantSystem as o,CameraControlSystem as r,CameraSystem as a,CanvasSystem as i,DragAndDropSystem as g,ExportSystem as m,GraphQLSystem as c,ImageRenderingSystem as l,LayoutSystem as S,SketchingSystem as d}from"./systems/index.js";export const createConfiguratorExtensionSelectors=u=>{let{getState:y,domainContextSelectors:w,specSelectors:C,domainServicesSelectors:f,accessSelectors:p,commonServicesSelectors:h}=u,x=e.withTypes()([C.selectConfiguratorSpec,w.selectInitializationContext],(e,s)=>t({resolved:e.assistant,handler:e.handlers.find(n),inputs:s&&s.access?{role:s.role,sessionData:s.sessionData,access:s.access}:null})),A={getConfigurationId:()=>p.getConfiguratorConfigurationId(),getAuthorizedClient:()=>h.getConfiguratorAuthorizedClient(),getAssistantSetup:()=>x(y()),domainContextSelectors:w,domainServicesSelectors:f,specSelectors:C},I={getSystems:()=>Q,getCanvasSystem:()=>D,getCameraControlSystem:()=>v,getAnimationSystem:()=>b,getDragAndDropSystem:()=>z,getImageRenderingSystem:()=>G,getLayoutSystem:()=>T,getSketchingSystem:()=>j,getExportSystem:()=>k,getCameraSystem:()=>F,getGraphQLSystem:()=>L,getAssistantSystem:()=>R},E={...A,configuratorExtensionSelectors:I},D=new i(A),v=new r({configuratorExtensionSelectors:I}),z=new g(E),b=new s(A),k=new m(E),L=new c({...A,renderScreenshot:async(e,t)=>{let[n]=await I.getImageRenderingSystem().generateImagesFromComponents([e],t,{},{awaitSettledState:!0});if(!n)throw Error("The canvas rendered no image.");return n.blob}}),R=new o(E),T=new S(A),j=new d(E),F=new a(E),G=new l(E),Q={cameraControlSystem:v,layoutSystem:T,sketchingSystem:j,dragAndDropSystem:z,canvasSystem:D,cameraSystem:F,exportSystem:k,imageRenderingSystem:G,animationSystem:b,graphQLSystem:L,assistantSystem:R};return I};
+import{createSelector as e}from"@salsita-ai/common/utils";import{createSessionAssistant as t,isAssistantSetupHandler as n}from"#package/domain";import{rasterizeImage as s}from"./systems/assistant-system/rasterize-image.js";import{AnimationSystem as a,AssistantSystem as i,CameraControlSystem as r,CameraSystem as o,CanvasSystem as g,DragAndDropSystem as m,ExportSystem as l,GraphQLSystem as d,ImageRenderingSystem as h,LayoutSystem as u,SketchingSystem as c}from"./systems/index.js";export const createConfiguratorExtensionSelectors=S=>{let{getState:w,domainContextSelectors:y,specSelectors:f,domainServicesSelectors:p,accessSelectors:C,commonServicesSelectors:x}=S,A=e.withTypes()([f.selectConfiguratorSpec,y.selectInitializationContext],(e,s)=>t({resolved:e.assistant,handler:e.handlers.find(n),inputs:s&&s.access?{role:s.role,sessionData:s.sessionData,access:s.access}:null})),I={getConfigurationId:()=>C.getConfiguratorConfigurationId(),getAuthorizedClient:()=>x.getConfiguratorAuthorizedClient(),getAssistantSetup:()=>A(w()),domainContextSelectors:y,domainServicesSelectors:p,specSelectors:f},z={getSystems:()=>F,getCanvasSystem:()=>E,getCameraControlSystem:()=>b,getAnimationSystem:()=>D,getDragAndDropSystem:()=>T,getImageRenderingSystem:()=>V,getLayoutSystem:()=>k,getSketchingSystem:()=>H,getExportSystem:()=>M,getCameraSystem:()=>L,getGraphQLSystem:()=>R,getAssistantSystem:()=>j},v={...I,configuratorExtensionSelectors:z},E=new g(I),b=new r({configuratorExtensionSelectors:z}),T=new m(v),D=new a(I),M=new l(v),R=new d({...I,renderScreenshot:async(e,t)=>{let[n]=await z.getImageRenderingSystem().generateImagesFromComponents([e],t,{},{awaitSettledState:!0});if(!n)throw Error("The canvas rendered no image.");return n.blob},uploadScreenshot:e=>I.getAuthorizedClient().uploadAssistantImage(I.getConfigurationId(),e)}),j=new i({...v,freezeView:()=>z.getImageRenderingSystem().captureView(),rasterizeImage:(e,t)=>{let n=z.getCanvasSystem().r3fHandle$.value?.get().gl.domElement,a=globalThis.devicePixelRatio||1;return s(e,t,n&&n.width>0&&n.height>0?{width:n.width,height:n.height}:{width:Math.max(1,Math.round(globalThis.innerWidth*a)),height:Math.max(1,Math.round(globalThis.innerHeight*a))})},createAudio:()=>new Audio}),k=new u(I),H=new c(v),L=new o(v),V=new h(v),F={cameraControlSystem:b,layoutSystem:k,sketchingSystem:H,dragAndDropSystem:T,canvasSystem:E,cameraSystem:L,exportSystem:M,imageRenderingSystem:V,animationSystem:D,graphQLSystem:R,assistantSystem:j};return z};

package/dist/configurator/application-runtime/extensions/systems/assistant-system/assistant-annotation.d.ts

@@ -0,0 +1,34 @@
+import type { AssistantAnnotationPin, AssistantAnnotationSource, AssistantMessageAnnotation } from '@salsita-ai/contracts/assistant';
+/**
+ * What the user made in the annotation editor: the frozen view of the configurator, or the image they
+ * annotated, with their marker strokes and numbered pin badges flattened into one image, ready for the
+ * upload, and the comments of the pins. It is attached to a message like an image; see
+ * {@link AssistantSystem.send}.
+ */
+export interface AssistantAnnotation {
+    readonly blob: Blob;
+    readonly pins: ReadonlyArray<AssistantAnnotationPin>;
+    /** What was annotated; the view when nothing says otherwise. */
+    readonly source?: AssistantAnnotationSource;
+}
+/**
+ * What covers the configurator for an annotation, as the configurator page renders it over every
+ * layout. The configurator is inert while there is one.
+ *
+ * - `transition`: the view glides between the canvas padding and none; nothing is shown over it.
+ * - `editor`: the frozen view, which the user annotates; `finish` ends the editor with what they
+ *   made, or with `null` when they cancel.
+ * - `viewer`: an annotation of a sent message, read-only, until `close`.
+ */
+export type AssistantAnnotationOverlay = {
+    readonly kind: 'transition';
+} | {
+    readonly kind: 'editor';
+    /** The frozen view, or the image drawn at its size, at the canvas's resolution. */
+    readonly view: HTMLCanvasElement;
+    readonly finish: (annotation: AssistantAnnotation | null) => void;
+} | {
+    readonly kind: 'viewer';
+    readonly annotation: AssistantMessageAnnotation;
+    readonly close: () => void;
+};

package/dist/configurator/application-runtime/extensions/systems/assistant-system/assistant-image-view.d.ts

@@ -0,0 +1,18 @@
+/**
+ * An image of the chat that the configurator page shows larger, beside the assistant panel, until it is
+ * closed. The configurator stays usable meanwhile; see {@link AssistantSystem.viewImage}.
+ *
+ * - `svg`: a drawing of a reply, the SVG the model wrote in its ```` ```svg ```` fence.
+ * - `url`: a picture already loaded, such as a project image in a reply or an image of a sent message.
+ *
+ * `title` is the drawing's first `<title>` or the image's alt text; nothing when it has none.
+ */
+export type AssistantImageView = {
+    readonly kind: 'svg';
+    readonly source: string;
+    readonly title: string | undefined;
+} | {
+    readonly kind: 'url';
+    readonly url: string;
+    readonly title: string | undefined;
+};