@salsita-ai/sdk 0.50.0-develop.ae9a830ef0 → 0.50.0-develop.aec0f535bf

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;

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

@@ -1 +1,493 @@
-export const INK="#212529";export const MUTED="#5c636a";export const actionButton={height:40,px:2,borderRadius:"6px",fontSize:"13px",fontWeight:500,whiteSpace:"nowrap"};export const primaryButton={backgroundColor:INK,border:`1px solid ${INK}`,color:"#ffffff","&:hover":{backgroundColor:"#343a40",borderColor:"#343a40",color:"#ffffff"},"&:active":{backgroundColor:"#495057",borderColor:"#495057",color:"#ffffff"},"&.Mui-disabled":{backgroundColor:"#adb5bd",borderColor:"#adb5bd",color:"#ffffff"}};export const ellipsis={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"};export const variantDialogGeometry={regular:{inset:24,header:80,footer:68,choices:240},compact:{inset:8,header:96,footer:112,choices:156}};
+let a="phx-variants";export const variantClass={root:a,preview:`${a}-preview`,previewPills:`${a}-preview-pills`,pill:`${a}-pill`,panel:`${a}-panel`,header:`${a}-header`,eyebrow:`${a}-eyebrow`,title:`${a}-title`,description:`${a}-description`,options:`${a}-options`,option:`${a}-option`,selected:`${a}-selected`,dimmed:`${a}-dimmed`,radio:`${a}-radio`,spinner:`${a}-spinner`,label:`${a}-label`,tag:`${a}-tag`,optionDescription:`${a}-option-description`,skeleton:`${a}-skeleton`,footer:`${a}-footer`,error:`${a}-error`,button:`${a}-button`,primary:`${a}-primary`,ghost:`${a}-ghost`,ellipsis:`${a}-ellipsis`,held:`${a}-held`,heldText:`${a}-held-text`,bar:`${a}-bar`,actions:`${a}-actions`,sending:`${a}-sending`,gone:`${a}-gone`,goneTitle:`${a}-gone-title`,goneText:`${a}-gone-text`};let e='"Funnel Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif',r=`
+  .${variantClass.root} {
+    --v-bg: #ffffff;
+    --v-surface: #ffffff;
+    --v-sidebar: #fafafa;
+    --v-hover: #f2f2f2;
+    --v-subtle: #f2f2f2;
+    --v-subtle2: #ededed;
+    --v-shimmer: #e4e4e4;
+    --v-border: #eaeaea;
+    --v-border2: #dedede;
+    --v-border3: #d4d4d4;
+    --v-text: #171717;
+    --v-text2: #3d3d3d;
+    --v-muted: #5c5c5c;
+    --v-faint: #8f8f8f;
+    --v-accent: #171717;
+    --v-on-accent: #ffffff;
+    --v-accent-hover: #000000;
+    --v-bad-bg: #fdecea;
+    --v-bad: #b42318;
+    --v-bad-border: #f5c6c1;
+    --v-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) {
+    .${variantClass.root} {
+      --v-bg: #08090a;
+      --v-surface: #0f1011;
+      --v-sidebar: #0b0c0d;
+      --v-hover: #16171a;
+      --v-subtle: #1c1d21;
+      --v-subtle2: #1d1e22;
+      --v-shimmer: #2c2e34;
+      --v-border: #23252a;
+      --v-border2: #2e3035;
+      --v-border3: #3a3d42;
+      --v-text: #f7f8f8;
+      --v-text2: #d0d6e0;
+      --v-muted: #8a8f98;
+      --v-faint: #62666d;
+      --v-accent: #f7f8f8;
+      --v-on-accent: #08090a;
+      --v-accent-hover: #ffffff;
+      --v-bad-bg: #2a1416;
+      --v-bad: #ff7a7a;
+      --v-bad-border: #4a2427;
+      --v-shadow: 0 4px 32px rgba(8, 9, 10, 0.6), inset 0 0 0 1px #23252a;
+      color-scheme: dark;
+    }
+  }
+`;export const variantPreviewStyles=`${r}
+  .${variantClass.root} {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: row;
+    background: var(--v-bg);
+    color: var(--v-text);
+    font-family: ${e};
+    font-feature-settings: 'cv01', 'ss03';
+    -webkit-font-smoothing: antialiased;
+    outline: none;
+  }
+
+  .${variantClass.root} :focus-visible {
+    outline: 2px solid var(--v-text);
+    outline-offset: 2px;
+  }
+
+  .${variantClass.preview} {
+    position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .${variantClass.previewPills} {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    z-index: 1;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  .${variantClass.pill} {
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 8px;
+    border-radius: 999px;
+    background: var(--v-surface);
+    box-shadow: var(--v-shadow);
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    color: var(--v-muted);
+  }
+
+  .${variantClass.pill}:first-child {
+    color: var(--v-text);
+  }
+
+  .${variantClass.panel} {
+    order: -1;
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    width: 320px;
+    min-height: 0;
+    box-sizing: border-box;
+    border-right: 1px solid var(--v-border);
+    background: var(--v-sidebar);
+  }
+
+  .${variantClass.header} {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 20px 16px 12px;
+  }
+
+  .${variantClass.eyebrow} {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--v-muted);
+  }
+
+  .${variantClass.title} {
+    margin: 0;
+    font-family: "Funnel Display Variable", "Funnel Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
+    font-size: 15px;
+    line-height: 20px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+
+  .${variantClass.description} {
+    margin: 0;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--v-muted);
+  }
+
+  .${variantClass.options} {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0 8px 8px;
+  }
+
+  .${variantClass.option} {
+    display: grid;
+    grid-template-columns: 16px minmax(0, 1fr) auto;
+    gap: 2px 10px;
+    align-items: start;
+    width: 100%;
+    min-height: 44px;
+    margin: 0 0 2px;
+    padding: 9px 10px;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--v-text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .${variantClass.option}:hover {
+    background: var(--v-hover);
+  }
+
+  .${variantClass.option}.${variantClass.selected},
+  .${variantClass.option}.${variantClass.selected}:hover {
+    border-color: var(--v-border2);
+    background: var(--v-surface);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  }
+
+  .${variantClass.option}:disabled {
+    cursor: not-allowed;
+  }
+
+  .${variantClass.option}.${variantClass.dimmed} {
+    opacity: 0.5;
+  }
+
+  .${variantClass.radio} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    margin-top: 2px;
+    box-sizing: border-box;
+    border: 1.5px solid var(--v-border3);
+    border-radius: 50%;
+  }
+
+  .${variantClass.selected} .${variantClass.radio} {
+    border-color: var(--v-text);
+  }
+
+  .${variantClass.selected} .${variantClass.radio}::after {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--v-text);
+  }
+
+  .${variantClass.spinner} {
+    flex: none;
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: ${a}-spin 0.8s linear infinite;
+  }
+
+  .${variantClass.option} .${variantClass.spinner} {
+    margin-top: 3px;
+    color: var(--v-muted);
+  }
+
+  .${variantClass.label} {
+    min-width: 0;
+    overflow: hidden;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .${variantClass.tag} {
+    display: inline-flex;
+    align-items: center;
+    height: 18px;
+    padding: 0 8px;
+    border-radius: 999px;
+    background: var(--v-subtle);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--v-muted);
+    white-space: nowrap;
+  }
+
+  .${variantClass.optionDescription} {
+    grid-column: 2 / 4;
+    display: -webkit-box;
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--v-muted);
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .${variantClass.skeleton} {
+    height: 44px;
+    margin: 0 0 2px;
+    border-radius: 8px;
+    background: linear-gradient(90deg, var(--v-subtle) 0%, var(--v-shimmer) 50%, var(--v-subtle) 100%);
+    background-size: 200% 100%;
+    animation: ${a}-shimmer 1.4s ease-in-out infinite;
+  }
+
+  .${variantClass.footer} {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 12px;
+    border-top: 1px solid var(--v-border);
+    background: var(--v-surface);
+  }
+
+  .${variantClass.error} {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    padding: 8px 10px;
+    border: 1px solid var(--v-bad-border);
+    border-radius: 8px;
+    background: var(--v-bad-bg);
+    color: var(--v-bad);
+    font-size: 12px;
+    line-height: 16px;
+    overflow-wrap: anywhere;
+  }
+
+  .${variantClass.error} svg {
+    flex: none;
+    margin-top: 1px;
+  }
+
+  .${variantClass.error} strong,
+  .${variantClass.held} strong,
+  .${variantClass.sending} strong {
+    font-weight: 600;
+  }
+
+  .${variantClass.button} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 36px;
+    padding: 0 12px;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    font: 500 13px/1 ${e};
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .${variantClass.primary} {
+    background: var(--v-accent);
+    color: var(--v-on-accent);
+  }
+
+  .${variantClass.primary}:hover {
+    background: var(--v-accent-hover);
+  }
+
+  .${variantClass.primary}:disabled {
+    background: var(--v-subtle2);
+    color: var(--v-faint);
+    cursor: not-allowed;
+  }
+
+  .${variantClass.ghost} {
+    border-color: var(--v-border2);
+    background: var(--v-surface);
+    color: var(--v-text);
+  }
+
+  .${variantClass.ghost}:hover {
+    background: var(--v-hover);
+  }
+
+  .${variantClass.footer} > .${variantClass.button} {
+    width: 100%;
+  }
+
+  .${variantClass.ellipsis} {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .${variantClass.held} {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .${variantClass.heldText} {
+    margin: 0;
+    font-size: 13px;
+    line-height: 18px;
+  }
+
+  .${variantClass.bar} {
+    height: 3px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: var(--v-subtle2);
+  }
+
+  .${variantClass.bar} span {
+    display: block;
+    height: 100%;
+    background: var(--v-text);
+    transition: width 1s linear;
+  }
+
+  .${variantClass.actions} {
+    display: flex;
+    gap: 8px;
+  }
+
+  .${variantClass.actions} .${variantClass.button} {
+    flex: 1;
+  }
+
+  .${variantClass.sending} {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 36px;
+    font-size: 13px;
+    color: var(--v-text2);
+  }
+
+  .${variantClass.sending} strong {
+    color: var(--v-text);
+  }
+
+  .${variantClass.gone} {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 24px;
+    box-sizing: border-box;
+    text-align: center;
+  }
+
+  .${variantClass.goneTitle} {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .${variantClass.goneText} {
+    margin: 0;
+    max-width: 300px;
+    font-size: 13px;
+    line-height: 18px;
+    color: var(--v-muted);
+  }
+
+  @keyframes ${a}-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes ${a}-shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (max-width: 899px) {
+    .${variantClass.root} {
+      flex-direction: column;
+    }
+
+    .${variantClass.panel} {
+      order: 0;
+      width: auto;
+      max-height: 64%;
+      border-top: 1px solid var(--v-border);
+      border-right: 0;
+      border-radius: 16px 16px 0 0;
+      box-shadow: var(--v-shadow);
+    }
+
+    .${variantClass.header} {
+      padding: 14px 16px 10px;
+    }
+
+    .${variantClass.options} {
+      flex: 0 1 auto;
+    }
+
+    .${variantClass.previewPills} {
+      top: 12px;
+      left: 12px;
+    }
+
+    .${variantClass.previewPills} .${variantClass.pill}:not(:first-child) {
+      display: none;
+    }
+
+    .${variantClass.button},
+    .${variantClass.sending} {
+      min-height: 44px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .${variantClass.root} *,
+    .${variantClass.root} *::after {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
+`;

package/dist/globals/index.d.ts

@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/triple-slash-reference */
+// Resolved from the SDK's own `vite`, so a project's `import.meta.env` and asset imports type-check without a `vite` of its own
+/// <reference types="vite/client" />
 /// <reference path="./asset-modules.d.ts" />
 
 export {}