@womp/mcp-ui 0.1.18 → 0.1.19

package/dist/openai-camera/index.html

@@ -319,7 +319,7 @@ Boolean requesting whether a visible border and background is provided by the ho
 - omitted: host decides border`)}),I({method:V(`ui/request-display-mode`),params:I({mode:Uh.describe(`The display mode being requested.`)})}),og=I({mode:Uh.describe(`The display mode that was actually set. May differ from requested if not supported.`)}).passthrough(),sg=R([V(`model`),V(`app`)]).describe(`Tool visibility scope - who can access the tool.`),I({resourceUri:j().optional(),visibility:F(sg).optional().describe(`Who can access this tool. Default: ["model", "app"]
 - "model": Tool visible to and callable by the agent
 - "app": Tool callable by the app from this server only`),csp:Vl().optional(),permissions:Vl().optional()}),I({mimeTypes:F(j()).optional().describe('Array of supported MIME types for UI resources.\nMust include `"text/html;profile=mcp-app"` for MCP Apps support.')}),I({method:V(`ui/download-file`),params:I({contents:F(R([kp,Ap])).describe(`Resource contents to download — embedded (inline data) or linked (host fetches). Uses standard MCP resource types.`)})}),I({method:V(`ui/message`),params:I({role:V(`user`).describe(`Message role, currently only "user" is supported.`),content:F(jp).describe(`Message content blocks (text, image, etc.).`)})}),I({method:V(`ui/notifications/sandbox-resource-ready`),params:I({html:j().describe(`HTML content to load into the inner iframe.`),sandbox:j().optional().describe(`Optional override for the inner iframe's sandbox attribute.`),csp:Yh.optional().describe(`CSP configuration from resource metadata.`),permissions:Xh.optional().describe(`Sandbox permissions from resource metadata.`)})}),cg=I({method:V(`ui/notifications/tool-result`),params:Bp.describe(`Standard MCP tool execution result.`)}),lg=I({toolInfo:I({id:rf.optional().describe(`JSON-RPC id of the tools/call request.`),tool:Lp.describe(`Tool definition including name, inputSchema, etc.`)}).optional().describe(`Metadata of the tool call that instantiated this App.`),theme:Hh.optional().describe(`Current color theme preference.`),styles:tg.optional().describe(`Style configuration for theming the app.`),displayMode:Uh.optional().describe(`How the UI is currently displayed.`),availableDisplayModes:F(Uh).optional().describe(`Display modes the host supports.`),containerDimensions:R([I({height:M().describe(`Fixed container height in pixels.`)}),I({maxHeight:R([M(),Rl()]).optional().describe(`Maximum container height in pixels.`)})]).and(R([I({width:M().describe(`Fixed container width in pixels.`)}),I({maxWidth:R([M(),Rl()]).optional().describe(`Maximum container width in pixels.`)})])).optional().describe(`Container dimensions. Represents the dimensions of the iframe or other
-container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:j().optional().describe(`User's language and region preference in BCP 47 format.`),timeZone:j().optional().describe(`User's timezone in IANA format.`),userAgent:j().optional().describe(`Host application identifier.`),platform:R([V(`web`),V(`desktop`),V(`mobile`)]).optional().describe(`Platform type for responsive design decisions.`),deviceCapabilities:I({touch:N().optional().describe(`Whether the device supports touch input.`),hover:N().optional().describe(`Whether the device supports hover interactions.`)}).optional().describe(`Device input capabilities.`),safeAreaInsets:I({top:M().describe(`Top safe area inset in pixels.`),right:M().describe(`Right safe area inset in pixels.`),bottom:M().describe(`Bottom safe area inset in pixels.`),left:M().describe(`Left safe area inset in pixels.`)}).optional().describe(`Mobile safe area boundaries in pixels.`)}).passthrough(),ug=I({method:V(`ui/notifications/host-context-changed`),params:lg.describe(`Partial context update containing only changed fields.`)}),I({method:V(`ui/update-model-context`),params:I({content:F(jp).optional().describe(`Context content blocks (text, image, etc.).`),structuredContent:z(j(),P().describe(`Structured content for machine-readable context data.`)).optional().describe(`Structured content for machine-readable context data.`)})}),I({method:V(`ui/initialize`),params:I({appInfo:bf.describe(`App identification (name and version).`),appCapabilities:ag.describe(`Features and capabilities this app provides.`),protocolVersion:j().describe(`Protocol version this app supports.`)})}),dg=I({protocolVersion:j().describe(`Negotiated protocol version string (e.g., "2025-11-21").`),hostInfo:bf.describe(`Host application identification and version.`),hostCapabilities:ig.describe(`Features and capabilities provided by the host.`),hostContext:lg.describe(`Rich context about the host environment.`)}).passthrough(),fg={target:`draft-2020-12`},pg=class e extends zh{_appInfo;_capabilities;options;_hostCapabilities;_hostInfo;_hostContext;_registeredTools={};_initializedSent=!1;_assertInitialized(e){if(this._initializedSent)return;let t=`[ext-apps] App.${e}() called before connect() completed the ui/initialize handshake. Await app.connect() before calling this method, or move data loading to an ontoolresult handler.`;if(this.options?.strict)throw Error(t);console.warn(`${t}. This will throw in a future release.`)}eventSchemas={toolinput:Zh,toolinputpartial:Qh,toolresult:cg,toolcancelled:$h,hostcontextchanged:ug};static ONE_SHOT_EVENTS=new Set([`toolinput`,`toolinputpartial`,`toolresult`,`toolcancelled`]);_everHadListener=new Set;_assertHandlerTiming(t){if(!e.ONE_SHOT_EVENTS.has(t)||this._everHadListener.has(t)||(this._everHadListener.add(t),!this._initializedSent))return;let n=`[ext-apps] "${String(t)}" handler registered after connect() completed the ui/initialize handshake. The host may have already sent this notification. Register handlers before calling app.connect().`;if(this.options?.strict)throw Error(n);console.warn(n)}setEventHandler(e,t){t&&this._assertHandlerTiming(e),super.setEventHandler(e,t)}addEventListener(e,t){this._assertHandlerTiming(e),super.addEventListener(e,t)}onEventDispatch(e,t){e===`hostcontextchanged`&&(this._hostContext={...this._hostContext,...t})}constructor(e,t={},n={autoResize:!0}){super(n),this._appInfo=e,this._capabilities=t,this.options=n,n.allowUnsafeEval||o({jitless:!0}),this.setRequestHandler(jf,e=>(console.log(`Received ping:`,e.params),{})),this.setEventHandler(`hostcontextchanged`,void 0)}registerCapabilities(e){if(this.transport)throw Error(`Cannot register capabilities after transport is established`);this._capabilities=Dh(this._capabilities,e)}registerTool(e,t,n){if(this._registeredTools[e])throw Error(`Tool ${e} is already registered`);let r=this,i=()=>{r._initializedSent&&r._capabilities.tools?.listChanged&&r.sendToolListChanged()},a=t.inputSchema!==void 0,o={title:t.title,description:t.description,inputSchema:t.inputSchema,outputSchema:t.outputSchema,annotations:t.annotations,_meta:t._meta,enabled:!0,enable(){this.enabled=!0,i()},disable(){this.enabled=!1,i()},update(e){Object.assign(this,e),i()},remove(){r._registeredTools[e]===o&&(delete r._registeredTools[e],i())},handler:async(t,r)=>{if(!o.enabled)throw Error(`Tool ${e} is disabled`);let i;if(a){let a=o.inputSchema;i=await n(a?await Ih(a,t??{},`Invalid input for tool ${e}: `):t??{},r)}else i=await n(r);return o.outputSchema&&!i.isError&&(i.structuredContent=await Ih(o.outputSchema,i.structuredContent,`Invalid output for tool ${e}: `)),i}};return this._registeredTools[e]=o,!this._capabilities.tools&&!this.transport&&this.registerCapabilities({tools:{listChanged:!0}}),this.ensureToolHandlersInitialized(),i(),o}_toolHandlersInitialized=!1;ensureToolHandlersInitialized(){this._toolHandlersInitialized||(this._toolHandlersInitialized=!0,this.oncalltool=async(e,t)=>{let n=this._registeredTools[e.name];if(!n)throw Error(`Tool ${e.name} not found`);return n.handler(e.arguments,t)},this.onlisttools=async(e,t)=>({tools:await Promise.all(Object.entries(this._registeredTools).filter(([e,t])=>t.enabled).map(async([e,t])=>{let n={name:e,title:t.title,description:t.description,inputSchema:t.inputSchema?await Fh(t.inputSchema,`input`):{type:`object`,properties:{}}};return t.outputSchema&&(n.outputSchema=await Fh(t.outputSchema,`output`)),t.annotations&&(n.annotations=t.annotations),t._meta&&(n._meta=t._meta),n}))}))}async sendToolListChanged(e={}){this._assertInitialized(`sendToolListChanged`),await this.notification({method:`notifications/tools/list_changed`,params:e})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler(`toolinput`)}set ontoolinput(e){this.setEventHandler(`toolinput`,e)}get ontoolinputpartial(){return this.getEventHandler(`toolinputpartial`)}set ontoolinputpartial(e){this.setEventHandler(`toolinputpartial`,e)}get ontoolresult(){return this.getEventHandler(`toolresult`)}set ontoolresult(e){this.setEventHandler(`toolresult`,e)}get ontoolcancelled(){return this.getEventHandler(`toolcancelled`)}set ontoolcancelled(e){this.setEventHandler(`toolcancelled`,e)}get onhostcontextchanged(){return this.getEventHandler(`hostcontextchanged`)}set onhostcontextchanged(e){this.setEventHandler(`hostcontextchanged`,e)}_onteardown;get onteardown(){return this._onteardown}set onteardown(e){this.warnIfRequestHandlerReplaced(`onteardown`,this._onteardown,e),this._onteardown=e,this.replaceRequestHandler(ng,(e,t)=>{if(!this._onteardown)throw Error(`No onteardown handler set`);return this._onteardown(e.params,t)})}_oncalltool;get oncalltool(){return this._oncalltool}set oncalltool(e){this.warnIfRequestHandlerReplaced(`oncalltool`,this._oncalltool,e),this._oncalltool=e,this.replaceRequestHandler(Hp,(e,t)=>{if(!this._oncalltool)throw Error(`No oncalltool handler set`);return this._oncalltool(e.params,t)})}_onlisttools;get onlisttools(){return this._onlisttools}set onlisttools(e){this.warnIfRequestHandlerReplaced(`onlisttools`,this._onlisttools,e),this._onlisttools=e,this.replaceRequestHandler(Rp,(e,t)=>{if(!this._onlisttools)throw Error(`No onlisttools handler set`);return this._onlisttools(e.params,t)})}assertCapabilityForMethod(e){if(e===`sampling/createMessage`&&!this._hostCapabilities?.sampling)throw Error(`Host does not support sampling (required for ${e})`)}assertRequestHandlerCapability(e){switch(e){case`tools/call`:case`tools/list`:if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${e})`);return;case`ping`:case`ui/resource-teardown`:return;default:throw Error(`No handler for method ${e} registered`)}}assertNotificationCapability(e){}assertTaskCapability(e){throw Error(`Tasks are not supported in MCP Apps`)}assertTaskHandlerCapability(e){throw Error(`Task handlers are not supported in MCP Apps`)}async callServerTool(e,t){if(this._assertInitialized(`callServerTool`),typeof e==`string`)throw Error(`callServerTool() expects an object as its first argument, but received a string ("${e}"). Did you mean: callServerTool({ name: "${e}", arguments: { ... } })?`);return await this.request({method:`tools/call`,params:e},Bp,{onprogress:()=>{},resetTimeoutOnProgress:!0,...t})}async readServerResource(e,t){return this._assertInitialized(`readServerResource`),await this.request({method:`resources/read`,params:e},dp,t)}async listServerResources(e,t){return this._assertInitialized(`listServerResources`),await this.request({method:`resources/list`,params:e},ap,t)}async createSamplingMessage(e,t){this._assertInitialized(`createSamplingMessage`);let n=e.tools?am:im;return await this.request({method:`sampling/createMessage`,params:e},n,t)}sendMessage(e,t){return this._assertInitialized(`sendMessage`),this.request({method:`ui/message`,params:e},Jh,t)}sendLog(e){return this.notification({method:`notifications/message`,params:e})}updateModelContext(e,t){return this._assertInitialized(`updateModelContext`),this.request({method:`ui/update-model-context`,params:e},mf,t)}openLink(e,t){return this._assertInitialized(`openLink`),this.request({method:`ui/open-link`,params:e},Kh,t)}sendOpenLink=this.openLink;downloadFile(e,t){return this._assertInitialized(`downloadFile`),this.request({method:`ui/download-file`,params:e},qh,t)}requestTeardown(e={}){return this.notification({method:`ui/notifications/request-teardown`,params:e})}requestDisplayMode(e,t){return this._assertInitialized(`requestDisplayMode`),this.request({method:`ui/request-display-mode`,params:e},og,t)}sendSizeChanged(e){return this.notification({method:`ui/notifications/size-changed`,params:e})}setupSizeChangedNotifications(){let e=!1,t=0,n=0,r=()=>{e||(e=!0,requestAnimationFrame(()=>{e=!1;let r=document.documentElement,i=r.style.height;r.style.height=`max-content`;let a=Math.ceil(r.getBoundingClientRect().height);r.style.height=i;let o=Math.ceil(window.innerWidth);(o!==t||a!==n)&&(t=o,n=a,this.sendSizeChanged({width:o,height:a}))}))};r();let i=new ResizeObserver(r);return i.observe(document.documentElement),i.observe(document.body),()=>i.disconnect()}async connect(e=new Vh(window.parent,window.parent),t){if(this.transport)throw Error(`App is already connected. Call close() before connecting again.`);this._initializedSent=!1,await super.connect(e);try{let e=await this.request({method:`ui/initialize`,params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:Bh}},dg,t);if(e===void 0)throw Error(`Server sent invalid initialize result: ${e}`);this._hostCapabilities=e.hostCapabilities,this._hostInfo=e.hostInfo,this._hostContext=e.hostContext,await this.notification({method:`ui/notifications/initialized`}),this._initializedSent=!0,this.options?.autoResize&&this.setupSizeChangedNotifications()}catch(e){throw this.close(),e}}}}));function hg(e,t){let n,r=0,i,a=()=>{n!==void 0&&(clearTimeout(n),n=void 0)},o=new pg({name:e,version:`0.0.1`},{}),s=async e=>{let t=await o.request({method:`tools/call`,params:{name:`get_generation`,arguments:{operationId:e}}},Bp);if(!t.isError)return t.structuredContent},c=(e,o)=>{n=window.setTimeout(async()=>{if(Date.now()-r>Sg){t.onTimeout?.();return}try{let n=await s(e);if(n?.status===`complete`){a(),i=n,t.onResult(n);return}}catch{}c(e,Math.min(o*1.5,xg))},o)},l=e=>{e&&(a(),i=e,t.onResult(e),e.status===`running`&&e.operationId!==void 0&&(r=Date.now(),c(e.operationId,bg)))};return o.ontoolinput=e=>{t.onInput?.(e?.arguments||{}),t.onResult({status:`running`})},o.ontoolresult=e=>l(e?.structuredContent),o.onhostcontextchanged=e=>{if(e?.theme&&Lh(e.theme),e?.styles?.variables&&Rh(e.styles.variables),e?.displayMode&&(document.documentElement.dataset.displayMode=e.displayMode),e?.safeAreaInsets){let{top:t=0,right:n=0,bottom:r=0,left:i=0}=e.safeAreaInsets;document.body.style.padding=`${t}px ${n}px ${r}px ${i}px`}},o.onteardown=async()=>(a(),{}),o.connect(new Vh(window.parent,window.parent)).catch(()=>{}),{app:o,current:()=>i}}async function gg(e,t,n){return e.request({method:`tools/call`,params:{name:t,arguments:n}},Bp)}async function _g(e,t){if(e.getHostCapabilities()?.updateModelContext)try{await e.updateModelContext({content:[{type:`text`,text:t}]})}catch{}}function vg(e){let t=document.documentElement.dataset.displayMode===`fullscreen`;return e.requestDisplayMode({mode:t?`inline`:`fullscreen`}).then(e=>{e?.mode&&(document.documentElement.dataset.displayMode=e.mode)})}async function yg(e,t){let n=Cg();if(n?.openExternal){await n.openExternal({href:t,redirectUrl:!1});return}await e.openLink({url:t})}var $,bg,xg,Sg,Cg,wg=t((()=>{mg(),Fm(),$=e=>document.getElementById(e),bg=2e3,xg=1e4,Sg=36e4,Cg=()=>window.openai}));n((()=>{wg();var e=[`shell`,`button`],t=3,n=`<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>`,r={shell:90,button:0},i=window.EyeDropper,a=`card-${Math.random().toString(36).slice(2,10)}`,o=$(`viewer`),s=$(`fallback`),c,l=0,u=!1,d,f=!1,p=`*`,ee,te,ne=[],re,ie,m,ae,oe,se,ce=Date.now(),le,h={shell:0,button:0};function g(e,t){clearTimeout(le),$(`status`).textContent=e,t&&(le=window.setTimeout(()=>$(`status`).textContent=``,t))}var{app:ue}=hg(`Camera`,{onInput:()=>g(`Setting up your camera…`),onResult:e=>{let t=e;typeof t.designId==`string`&&de(t)}});function de(e){let t=e.designId!==c?.designId;c=e,Ce(),t?(pe(),be(2500)):e.rev>l&&pe()}async function fe(){let e=navigator.gpu;if(!e)return!1;try{return!!await e.requestAdapter()}catch{return!1}}async function pe(e){if(c){if(ie===void 0&&(g(`Checking 3D support…`),ie=await fe(),je(ie?`webgpu-available`:`webgpu-missing`)),l=c.rev,!ie){ge(),g(``);return}u&&f&&d===c.designId?me(c.sceneUrl,e):he(e)}}function me(e,t){ee=e,g(t??`Updating the 3D view…`),o.contentWindow?.postMessage({type:`kakapo:setScene`,url:e},p),clearTimeout(te),te=window.setTimeout(()=>{ee===e&&he(t)},15e3)}function he(e){c&&(u=!1,f=!1,re=void 0,d=c.designId,ee=void 0,clearTimeout(te),s.hidden=!0,o.hidden=!1,o.src=c.viewerUrl,g(e??`Loading the 3D viewer…`),clearTimeout(oe),oe=window.setTimeout(()=>{u||(g(`The 3D viewer hasn't loaded — this app may not allow it here.`),je(`viewer-timeout`))},25e3))}function ge(){if(!c)return;o.hidden=!0,s.hidden=!1,s.textContent=``;let e=document.createElement(`p`);e.textContent=`The 3D preview needs WebGPU, which this browser or device doesn't offer. You can still change the design here or in chat, and order it.`;let t=document.createElement(`dl`),n=[[`Shell colour`,ve(c.colors.shell,c.gradientAngles.shell)],[`Button colour`,ve(c.colors.button,c.gradientAngles.button)],...c.options.map(e=>[e.label,e.display])];for(let[e,r]of n){let n=document.createElement(`dt`);n.textContent=e;let i=document.createElement(`dd`);i.textContent=r,t.append(n,i)}s.append(e,t)}function _(e){let t={};if(!Array.isArray(e))return t;for(let n of e){let e=n?.params??{};for(let[n,r]of Object.entries(e))typeof r==`number`&&Number.isFinite(r)&&(t[n]=r)}return t}var v=(e,t)=>e.source===o.contentWindow&&(e.origin===t.viewerOrigin||e.origin===`null`);window.addEventListener(`message`,e=>{if(!c||!v(e,c))return;let t=e.data;if(t?.type===`kakapo:ready`)u=!0,p=e.origin===`null`?`*`:e.origin,f=Array.isArray(t.messages)&&t.messages.includes(`kakapo:setScene`),clearTimeout(oe),re=_(t.scripts),g(``),je(`viewer-ready`);else if(t?.type===`kakapo:sceneSet`){if(t.url!==ee)return;if(ee=void 0,clearTimeout(te),t.error){he();return}re=_(t.scripts),g(``)}else if(t?.type===`kakapo:params`){_e(_(t.scripts));for(let e of ne.splice(0))e()}else t?.type===`kakapo:print`&&(_e(_(t.scripts)),Ae())}),window.setInterval(()=>{!c||!u||document.visibilityState!==`visible`||o.contentWindow?.postMessage({type:`kakapo:getParams`},p)},1500);function y(){return u?new Promise(e=>{ne.push(e),o.contentWindow?.postMessage({type:`kakapo:getParams`},p),window.setTimeout(e,500)}):Promise.resolve()}function _e(e){if(!re){re=e;return}let t=re;Object.keys(e).some(n=>e[n]!==t[n])&&(re=e,ce=Date.now(),g(`Saving…`),clearTimeout(m),m=window.setTimeout(()=>void b(),700))}async function b(e){for(clearTimeout(m),m=void 0;ae;)await ae;if(!c)return;let t=c.rev;ae=(async()=>{try{let n=await gg(ue,`sync_camera_design`,{designId:c.designId,baseRev:t,writer:a,params:re??{},...e}),r=n.structuredContent;if(n.isError||!r){g(`Couldn't save that change.`);return}if(c=r,Ce(),r.rev===t){g(``);return}let i=r.rev>t+1;i||e?pe(i?`Merged with a change from the chat…`:`Applying colour…`):l=r.rev,!i&&!e&&g(`Saved`,1500),_g(ue,ye(r))}catch{g(`Couldn't save that change.`)}})();try{await ae}finally{ae=void 0}}function ve(e,t=0){return e.length<2?e[0]:`${e.join(` → `)} gradient${t?` turned ${t}°`:``}`}var ye=e=>`The user adjusted their camera in the card. Design ${e.designId}, revision ${e.rev}: shell ${ve(e.colors.shell,e.gradientAngles.shell)}, button ${ve(e.colors.button,e.gradientAngles.button)}; `+e.options.map(e=>`${e.label} ${e.display}`).join(`, `)+`.`;function be(e){clearTimeout(se),se=window.setTimeout(xe,e)}async function xe(){let e=Date.now()-ce;try{if(c&&document.visibilityState===`visible`&&!ae){let e=await gg(ue,`get_camera_design`,{designId:c.designId}),t=e.structuredContent;!e.isError&&t&&t.rev>c.rev&&(ce=Date.now(),m===void 0?(c=t,Ce(),t.rev>l&&pe(`Updated from the chat…`)):await b())}}catch{}be(e<12e4?2500:e<6e5?8e3:2e4)}function Se(e){return c?.palette.find(t=>t.name===e)?.hex??e}function Ce(){if(c){for(let t of e){let e=c.colors[t],n=e.length>1;h[t]=Math.min(h[t],e.length-1);let r=e[h[t]];$(`solid-${t}`).setAttribute(`aria-pressed`,String(!n)),$(`gradient-${t}`).setAttribute(`aria-pressed`,String(n)),we(t,e);let a=$(`sw-${t}`);a.textContent=``;let o=[...c.palette];for(let t of[...new Set(e)].reverse())t.startsWith(`#`)&&!o.some(e=>e.name===t)&&o.unshift({name:t,hex:t});for(let e of o){let n=document.createElement(`button`);n.type=`button`,n.className=e.name===`clear`?`swatch clear`:`swatch`,n.style.background=e.hex,n.title=e.name,n.setAttribute(`aria-label`,`${t} colour: ${e.name}`),n.setAttribute(`aria-pressed`,String(r===e.name)),n.addEventListener(`click`,()=>void S(t,e.name)),a.append(n)}$(`pick-${t}`).value=Se(r),$(`dropper-${t}`).hidden=!i}$(`price`).textContent=`Full-colour print · ${c.price.label} + shipping`,s.hidden||ge()}}function we(e,i){let a=$(`stops-${e}`);if(a.hidden=i.length<2,a.textContent=``,i.length<2)return;let o=document.createElement(`div`);o.className=`track`,o.style.background=`linear-gradient(90deg, ${i.map(Se).join(`, `)})`,i.forEach((t,n)=>{let r=document.createElement(`button`);r.type=`button`,r.className=`stop`,r.style.left=`calc(11px + (100% - 22px) * ${n/(i.length-1)})`,r.style.background=Se(t),r.title=t,r.setAttribute(`aria-label`,`${e} gradient colour ${n+1} of ${i.length}: ${t}`),r.setAttribute(`aria-pressed`,String(n===h[e])),r.addEventListener(`click`,()=>{h[e]=n,Ce()}),o.append(r)});let s=Te(`+`,`${e}: add a gradient colour`,i.length>=t,()=>{h[e]=i.length,De(e,[...i,x(i[i.length-1])])}),l=Te(`−`,`${e}: remove the selected gradient colour`,i.length<=2,()=>{De(e,i.filter((t,n)=>n!==h[e]))}),u=c?.gradientAngles[e]??0,d=Te(``,`${e}: turn the gradient 45° (now ${u}°)`,!1,()=>void Oe(e,(u+45)%360));d.innerHTML=n,d.style.transform=`rotate(${r[e]-u}deg)`,a.append(d,o,s,l)}function Te(e,t,n,r){let i=document.createElement(`button`);return i.type=`button`,i.className=`icon-button`,i.textContent=e,i.title=t,i.setAttribute(`aria-label`,t),i.disabled=n,i.addEventListener(`click`,r),i}function x(e){return e===`violet`?`sky`:`violet`}function Ee(e){let t=/^rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(e);return t?`#${t.slice(1,4).map(e=>Number(e).toString(16).padStart(2,`0`)).join(``)}`:e.toLowerCase()}async function S(e,t){if(!c)return;let n=[...c.colors[e]];n[h[e]]=t,await De(e,n)}async function De(e,t){if(!c)return;let n=c.colors[e];t.length===n.length&&t.every((e,t)=>e===n[t])||(ce=Date.now(),c={...c,colors:{...c.colors,[e]:t}},Ce(),g(`Saving…`),await y(),await b({colors:{[e]:t}}))}async function Oe(e,t){!c||c.gradientAngles[e]===t||(ce=Date.now(),c={...c,gradientAngles:{...c.gradientAngles,[e]:t}},Ce(),g(`Saving…`),await y(),await b({gradientAngles:{[e]:t}}))}for(let t of e)$(`solid-${t}`).addEventListener(`click`,()=>{if(!c||c.colors[t].length<2)return;let e=c.colors[t][h[t]];h[t]=0,De(t,[e])}),$(`gradient-${t}`).addEventListener(`click`,()=>{if(!c||c.colors[t].length>1)return;let[e]=c.colors[t];h[t]=1,De(t,[e,x(e)])}),$(`pick-${t}`).addEventListener(`change`,e=>{S(t,e.target.value.toLowerCase())}),$(`dropper-${t}`).addEventListener(`click`,async()=>{if(i)try{let{sRGBHex:e}=await new i().open();await S(t,Ee(e))}catch{}});var ke=!1;async function Ae(){if(!c||ke)return;ke=!0,ce=Date.now();let e=$(`order`);e.disabled=!0,g(`Opening checkout…`);try{await y(),(m!==void 0||ae)&&await b();let e=await gg(ue,`checkout_camera`,{designId:c.designId}),t=e.structuredContent;if(e.isError||typeof t?.checkoutUrl!=`string`){g(`Couldn't open checkout. Ask in the chat to order it.`);return}await yg(ue,t.checkoutUrl),g(`Checkout is open in your browser. Your design and price carry over.`),_g(ue,`The user pressed Order on camera design ${c.designId}, revision ${t.rev}, and opened its checkout on the web, where they enter their address, see shipping and pay.`)}catch{g(`Couldn't open checkout. Ask in the chat to order it.`)}finally{ke=!1,e.disabled=!1}}$(`customize`).addEventListener(`click`,()=>{ce=Date.now(),vg(ue)}),$(`order`).addEventListener(`click`,()=>void Ae()),new MutationObserver(()=>{$(`customize`).textContent=document.documentElement.dataset.displayMode===`fullscreen`?`Done`:`Customize`}).observe(document.documentElement,{attributes:!0,attributeFilter:[`data-display-mode`]});function je(e,t){gg(ue,`report_viewer_status`,{...c?{designId:c.designId}:{},writer:a,event:e,...ie===void 0?{}:{webgpu:ie},...t?{detail:t}:{},userAgent:navigator.userAgent.slice(0,300),displayMode:document.documentElement.dataset.displayMode??`inline`}).catch(()=>{})}}))();</script>
+container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:j().optional().describe(`User's language and region preference in BCP 47 format.`),timeZone:j().optional().describe(`User's timezone in IANA format.`),userAgent:j().optional().describe(`Host application identifier.`),platform:R([V(`web`),V(`desktop`),V(`mobile`)]).optional().describe(`Platform type for responsive design decisions.`),deviceCapabilities:I({touch:N().optional().describe(`Whether the device supports touch input.`),hover:N().optional().describe(`Whether the device supports hover interactions.`)}).optional().describe(`Device input capabilities.`),safeAreaInsets:I({top:M().describe(`Top safe area inset in pixels.`),right:M().describe(`Right safe area inset in pixels.`),bottom:M().describe(`Bottom safe area inset in pixels.`),left:M().describe(`Left safe area inset in pixels.`)}).optional().describe(`Mobile safe area boundaries in pixels.`)}).passthrough(),ug=I({method:V(`ui/notifications/host-context-changed`),params:lg.describe(`Partial context update containing only changed fields.`)}),I({method:V(`ui/update-model-context`),params:I({content:F(jp).optional().describe(`Context content blocks (text, image, etc.).`),structuredContent:z(j(),P().describe(`Structured content for machine-readable context data.`)).optional().describe(`Structured content for machine-readable context data.`)})}),I({method:V(`ui/initialize`),params:I({appInfo:bf.describe(`App identification (name and version).`),appCapabilities:ag.describe(`Features and capabilities this app provides.`),protocolVersion:j().describe(`Protocol version this app supports.`)})}),dg=I({protocolVersion:j().describe(`Negotiated protocol version string (e.g., "2025-11-21").`),hostInfo:bf.describe(`Host application identification and version.`),hostCapabilities:ig.describe(`Features and capabilities provided by the host.`),hostContext:lg.describe(`Rich context about the host environment.`)}).passthrough(),fg={target:`draft-2020-12`},pg=class e extends zh{_appInfo;_capabilities;options;_hostCapabilities;_hostInfo;_hostContext;_registeredTools={};_initializedSent=!1;_assertInitialized(e){if(this._initializedSent)return;let t=`[ext-apps] App.${e}() called before connect() completed the ui/initialize handshake. Await app.connect() before calling this method, or move data loading to an ontoolresult handler.`;if(this.options?.strict)throw Error(t);console.warn(`${t}. This will throw in a future release.`)}eventSchemas={toolinput:Zh,toolinputpartial:Qh,toolresult:cg,toolcancelled:$h,hostcontextchanged:ug};static ONE_SHOT_EVENTS=new Set([`toolinput`,`toolinputpartial`,`toolresult`,`toolcancelled`]);_everHadListener=new Set;_assertHandlerTiming(t){if(!e.ONE_SHOT_EVENTS.has(t)||this._everHadListener.has(t)||(this._everHadListener.add(t),!this._initializedSent))return;let n=`[ext-apps] "${String(t)}" handler registered after connect() completed the ui/initialize handshake. The host may have already sent this notification. Register handlers before calling app.connect().`;if(this.options?.strict)throw Error(n);console.warn(n)}setEventHandler(e,t){t&&this._assertHandlerTiming(e),super.setEventHandler(e,t)}addEventListener(e,t){this._assertHandlerTiming(e),super.addEventListener(e,t)}onEventDispatch(e,t){e===`hostcontextchanged`&&(this._hostContext={...this._hostContext,...t})}constructor(e,t={},n={autoResize:!0}){super(n),this._appInfo=e,this._capabilities=t,this.options=n,n.allowUnsafeEval||o({jitless:!0}),this.setRequestHandler(jf,e=>(console.log(`Received ping:`,e.params),{})),this.setEventHandler(`hostcontextchanged`,void 0)}registerCapabilities(e){if(this.transport)throw Error(`Cannot register capabilities after transport is established`);this._capabilities=Dh(this._capabilities,e)}registerTool(e,t,n){if(this._registeredTools[e])throw Error(`Tool ${e} is already registered`);let r=this,i=()=>{r._initializedSent&&r._capabilities.tools?.listChanged&&r.sendToolListChanged()},a=t.inputSchema!==void 0,o={title:t.title,description:t.description,inputSchema:t.inputSchema,outputSchema:t.outputSchema,annotations:t.annotations,_meta:t._meta,enabled:!0,enable(){this.enabled=!0,i()},disable(){this.enabled=!1,i()},update(e){Object.assign(this,e),i()},remove(){r._registeredTools[e]===o&&(delete r._registeredTools[e],i())},handler:async(t,r)=>{if(!o.enabled)throw Error(`Tool ${e} is disabled`);let i;if(a){let a=o.inputSchema;i=await n(a?await Ih(a,t??{},`Invalid input for tool ${e}: `):t??{},r)}else i=await n(r);return o.outputSchema&&!i.isError&&(i.structuredContent=await Ih(o.outputSchema,i.structuredContent,`Invalid output for tool ${e}: `)),i}};return this._registeredTools[e]=o,!this._capabilities.tools&&!this.transport&&this.registerCapabilities({tools:{listChanged:!0}}),this.ensureToolHandlersInitialized(),i(),o}_toolHandlersInitialized=!1;ensureToolHandlersInitialized(){this._toolHandlersInitialized||(this._toolHandlersInitialized=!0,this.oncalltool=async(e,t)=>{let n=this._registeredTools[e.name];if(!n)throw Error(`Tool ${e.name} not found`);return n.handler(e.arguments,t)},this.onlisttools=async(e,t)=>({tools:await Promise.all(Object.entries(this._registeredTools).filter(([e,t])=>t.enabled).map(async([e,t])=>{let n={name:e,title:t.title,description:t.description,inputSchema:t.inputSchema?await Fh(t.inputSchema,`input`):{type:`object`,properties:{}}};return t.outputSchema&&(n.outputSchema=await Fh(t.outputSchema,`output`)),t.annotations&&(n.annotations=t.annotations),t._meta&&(n._meta=t._meta),n}))}))}async sendToolListChanged(e={}){this._assertInitialized(`sendToolListChanged`),await this.notification({method:`notifications/tools/list_changed`,params:e})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler(`toolinput`)}set ontoolinput(e){this.setEventHandler(`toolinput`,e)}get ontoolinputpartial(){return this.getEventHandler(`toolinputpartial`)}set ontoolinputpartial(e){this.setEventHandler(`toolinputpartial`,e)}get ontoolresult(){return this.getEventHandler(`toolresult`)}set ontoolresult(e){this.setEventHandler(`toolresult`,e)}get ontoolcancelled(){return this.getEventHandler(`toolcancelled`)}set ontoolcancelled(e){this.setEventHandler(`toolcancelled`,e)}get onhostcontextchanged(){return this.getEventHandler(`hostcontextchanged`)}set onhostcontextchanged(e){this.setEventHandler(`hostcontextchanged`,e)}_onteardown;get onteardown(){return this._onteardown}set onteardown(e){this.warnIfRequestHandlerReplaced(`onteardown`,this._onteardown,e),this._onteardown=e,this.replaceRequestHandler(ng,(e,t)=>{if(!this._onteardown)throw Error(`No onteardown handler set`);return this._onteardown(e.params,t)})}_oncalltool;get oncalltool(){return this._oncalltool}set oncalltool(e){this.warnIfRequestHandlerReplaced(`oncalltool`,this._oncalltool,e),this._oncalltool=e,this.replaceRequestHandler(Hp,(e,t)=>{if(!this._oncalltool)throw Error(`No oncalltool handler set`);return this._oncalltool(e.params,t)})}_onlisttools;get onlisttools(){return this._onlisttools}set onlisttools(e){this.warnIfRequestHandlerReplaced(`onlisttools`,this._onlisttools,e),this._onlisttools=e,this.replaceRequestHandler(Rp,(e,t)=>{if(!this._onlisttools)throw Error(`No onlisttools handler set`);return this._onlisttools(e.params,t)})}assertCapabilityForMethod(e){if(e===`sampling/createMessage`&&!this._hostCapabilities?.sampling)throw Error(`Host does not support sampling (required for ${e})`)}assertRequestHandlerCapability(e){switch(e){case`tools/call`:case`tools/list`:if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${e})`);return;case`ping`:case`ui/resource-teardown`:return;default:throw Error(`No handler for method ${e} registered`)}}assertNotificationCapability(e){}assertTaskCapability(e){throw Error(`Tasks are not supported in MCP Apps`)}assertTaskHandlerCapability(e){throw Error(`Task handlers are not supported in MCP Apps`)}async callServerTool(e,t){if(this._assertInitialized(`callServerTool`),typeof e==`string`)throw Error(`callServerTool() expects an object as its first argument, but received a string ("${e}"). Did you mean: callServerTool({ name: "${e}", arguments: { ... } })?`);return await this.request({method:`tools/call`,params:e},Bp,{onprogress:()=>{},resetTimeoutOnProgress:!0,...t})}async readServerResource(e,t){return this._assertInitialized(`readServerResource`),await this.request({method:`resources/read`,params:e},dp,t)}async listServerResources(e,t){return this._assertInitialized(`listServerResources`),await this.request({method:`resources/list`,params:e},ap,t)}async createSamplingMessage(e,t){this._assertInitialized(`createSamplingMessage`);let n=e.tools?am:im;return await this.request({method:`sampling/createMessage`,params:e},n,t)}sendMessage(e,t){return this._assertInitialized(`sendMessage`),this.request({method:`ui/message`,params:e},Jh,t)}sendLog(e){return this.notification({method:`notifications/message`,params:e})}updateModelContext(e,t){return this._assertInitialized(`updateModelContext`),this.request({method:`ui/update-model-context`,params:e},mf,t)}openLink(e,t){return this._assertInitialized(`openLink`),this.request({method:`ui/open-link`,params:e},Kh,t)}sendOpenLink=this.openLink;downloadFile(e,t){return this._assertInitialized(`downloadFile`),this.request({method:`ui/download-file`,params:e},qh,t)}requestTeardown(e={}){return this.notification({method:`ui/notifications/request-teardown`,params:e})}requestDisplayMode(e,t){return this._assertInitialized(`requestDisplayMode`),this.request({method:`ui/request-display-mode`,params:e},og,t)}sendSizeChanged(e){return this.notification({method:`ui/notifications/size-changed`,params:e})}setupSizeChangedNotifications(){let e=!1,t=0,n=0,r=()=>{e||(e=!0,requestAnimationFrame(()=>{e=!1;let r=document.documentElement,i=r.style.height;r.style.height=`max-content`;let a=Math.ceil(r.getBoundingClientRect().height);r.style.height=i;let o=Math.ceil(window.innerWidth);(o!==t||a!==n)&&(t=o,n=a,this.sendSizeChanged({width:o,height:a}))}))};r();let i=new ResizeObserver(r);return i.observe(document.documentElement),i.observe(document.body),()=>i.disconnect()}async connect(e=new Vh(window.parent,window.parent),t){if(this.transport)throw Error(`App is already connected. Call close() before connecting again.`);this._initializedSent=!1,await super.connect(e);try{let e=await this.request({method:`ui/initialize`,params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:Bh}},dg,t);if(e===void 0)throw Error(`Server sent invalid initialize result: ${e}`);this._hostCapabilities=e.hostCapabilities,this._hostInfo=e.hostInfo,this._hostContext=e.hostContext,await this.notification({method:`ui/notifications/initialized`}),this._initializedSent=!0,this.options?.autoResize&&this.setupSizeChangedNotifications()}catch(e){throw this.close(),e}}}}));function hg(e,t){let n,r=0,i,a=()=>{n!==void 0&&(clearTimeout(n),n=void 0)},o=new pg({name:e,version:`0.0.1`},{}),s=async e=>{let t=await o.request({method:`tools/call`,params:{name:`get_generation`,arguments:{operationId:e}}},Bp);if(!t.isError)return t.structuredContent},c=(e,o)=>{n=window.setTimeout(async()=>{if(Date.now()-r>Sg){t.onTimeout?.();return}try{let n=await s(e);if(n?.status===`complete`){a(),i=n,t.onResult(n);return}}catch{}c(e,Math.min(o*1.5,xg))},o)},l=e=>{e&&(a(),i=e,t.onResult(e),e.status===`running`&&e.operationId!==void 0&&(r=Date.now(),c(e.operationId,bg)))};return o.ontoolinput=e=>{t.onInput?.(e?.arguments||{}),t.onResult({status:`running`})},o.ontoolresult=e=>l(e?.structuredContent),o.onhostcontextchanged=e=>{if(e?.theme&&Lh(e.theme),e?.styles?.variables&&Rh(e.styles.variables),e?.displayMode&&(document.documentElement.dataset.displayMode=e.displayMode),e?.safeAreaInsets){let{top:t=0,right:n=0,bottom:r=0,left:i=0}=e.safeAreaInsets;document.body.style.padding=`${t}px ${n}px ${r}px ${i}px`}},o.onteardown=async()=>(a(),{}),o.connect(new Vh(window.parent,window.parent)).catch(()=>{}),{app:o,current:()=>i}}async function gg(e,t,n){return e.request({method:`tools/call`,params:{name:t,arguments:n}},Bp)}async function _g(e,t){if(e.getHostCapabilities()?.updateModelContext)try{await e.updateModelContext({content:[{type:`text`,text:t}]})}catch{}}function vg(e){let t=document.documentElement.dataset.displayMode===`fullscreen`;return e.requestDisplayMode({mode:t?`inline`:`fullscreen`}).then(e=>{e?.mode&&(document.documentElement.dataset.displayMode=e.mode)})}async function yg(e,t){let n=Cg();if(n?.openExternal){await n.openExternal({href:t,redirectUrl:!1});return}await e.openLink({url:t})}var $,bg,xg,Sg,Cg,wg=t((()=>{mg(),Fm(),$=e=>document.getElementById(e),bg=2e3,xg=1e4,Sg=36e4,Cg=()=>window.openai}));n((()=>{wg();var e=[`shell`,`button`],t=3,n=`<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>`,r={shell:90,button:0},i=window.EyeDropper,a=`card-${Math.random().toString(36).slice(2,10)}`,o=$(`viewer`),s=$(`fallback`),c,l=0,u=!1,d,f=!1,p=`*`,ee,te,ne=[],re,ie,m,ae,oe,se,ce=Date.now(),le,h={shell:0,button:0};function g(e,t){clearTimeout(le),$(`status`).textContent=e,t&&(le=window.setTimeout(()=>$(`status`).textContent=``,t))}var{app:ue}=hg(`Camera`,{onInput:()=>g(`Setting up your camera…`),onResult:e=>{let t=e;typeof t.designId==`string`&&de(t)}});function de(e){let t=e.designId!==c?.designId;c=e,Ce(),t?(pe(),be(2500)):e.rev>l&&pe()}async function fe(){let e=navigator.gpu;if(!e)return!1;try{return!!await e.requestAdapter()}catch{return!1}}async function pe(e){if(c){if(ie===void 0&&(g(`Checking 3D support…`),ie=await fe(),je(ie?`webgpu-available`:`webgpu-missing`)),l=c.rev,!ie){ge(),g(``);return}u&&f&&d===c.designId?me(c.sceneUrl,e):he(e)}}function me(e,t){ee=e,g(t??`Updating the 3D view…`),o.contentWindow?.postMessage({type:`kakapo:setScene`,url:e},p),clearTimeout(te),te=window.setTimeout(()=>{ee===e&&he(t)},15e3)}function he(e){c&&(u=!1,f=!1,re=void 0,d=c.designId,ee=void 0,clearTimeout(te),s.hidden=!0,o.hidden=!1,o.src=c.viewerUrl,g(e??`Loading the 3D viewer…`),clearTimeout(oe),oe=window.setTimeout(()=>{u||(g(`The 3D viewer hasn't loaded — this app may not allow it here.`),je(`viewer-timeout`))},25e3))}function ge(){if(!c)return;o.hidden=!0,s.hidden=!1,s.textContent=``;let e=document.createElement(`p`);e.textContent=`The 3D preview needs WebGPU, which this browser or device doesn't offer. You can still change the design here or in chat, and order it.`;let t=document.createElement(`dl`),n=[[`Shell colour`,ve(c.colors.shell,c.gradientAngles.shell)],[`Button colour`,ve(c.colors.button,c.gradientAngles.button)],...c.options.map(e=>[e.label,e.display])];for(let[e,r]of n){let n=document.createElement(`dt`);n.textContent=e;let i=document.createElement(`dd`);i.textContent=r,t.append(n,i)}s.append(e,t)}function _(e){let t={};if(!Array.isArray(e))return t;for(let n of e){let e=n?.params??{};for(let[n,r]of Object.entries(e))typeof r==`number`&&Number.isFinite(r)&&(t[n]=r)}return t}var v=(e,t)=>e.source===o.contentWindow&&(e.origin===t.viewerOrigin||e.origin===`null`);window.addEventListener(`message`,e=>{if(!c||!v(e,c))return;let t=e.data;if(t?.type===`kakapo:ready`)u=!0,p=e.origin===`null`?`*`:e.origin,f=Array.isArray(t.messages)&&t.messages.includes(`kakapo:setScene`),clearTimeout(oe),re=_(t.scripts),g(``),je(`viewer-ready`);else if(t?.type===`kakapo:sceneSet`){if(t.url!==ee)return;if(ee=void 0,clearTimeout(te),t.error){he();return}re=_(t.scripts),g(``)}else if(t?.type===`kakapo:params`){_e(_(t.scripts));for(let e of ne.splice(0))e()}else t?.type===`kakapo:print`&&(_e(_(t.scripts)),Ae())}),window.setInterval(()=>{!c||!u||document.visibilityState!==`visible`||o.contentWindow?.postMessage({type:`kakapo:getParams`},p)},1500);function y(){return u?new Promise(e=>{ne.push(e),o.contentWindow?.postMessage({type:`kakapo:getParams`},p),window.setTimeout(e,500)}):Promise.resolve()}function _e(e){if(!re){re=e;return}let t=re;Object.keys(e).some(n=>e[n]!==t[n])&&(re=e,ce=Date.now(),g(`Saving…`),clearTimeout(m),m=window.setTimeout(()=>void b(),700))}async function b(e){for(clearTimeout(m),m=void 0;ae;)await ae;if(!c)return;let t=c.rev;ae=(async()=>{try{let n=await gg(ue,`sync_camera_design`,{designId:c.designId,baseRev:t,writer:a,params:re??{},...e}),r=n.structuredContent;if(n.isError||!r){g(`Couldn't save that change.`);return}if(c=r,Ce(),r.rev===t){g(``);return}let i=r.rev>t+1;i||e?pe(i?`Merged with a change from the chat…`:`Applying colour…`):l=r.rev,!i&&!e&&g(`Saved`,1500),_g(ue,ye(r))}catch{g(`Couldn't save that change.`)}})();try{await ae}finally{ae=void 0}}function ve(e,t=0){return e.length<2?e[0]:`${e.join(` → `)} gradient${t?` turned ${t}°`:``}`}var ye=e=>`The user adjusted their camera in the card. Design ${e.designId}, revision ${e.rev}: shell ${ve(e.colors.shell,e.gradientAngles.shell)}, button ${ve(e.colors.button,e.gradientAngles.button)}; `+e.options.map(e=>`${e.label} ${e.display}`).join(`, `)+`.`;function be(e){clearTimeout(se),se=window.setTimeout(xe,e)}async function xe(){let e=Date.now()-ce;try{if(c&&document.visibilityState===`visible`&&!ae){let e=await gg(ue,`get_camera_design`,{designId:c.designId}),t=e.structuredContent;!e.isError&&t&&t.rev>c.rev&&(ce=Date.now(),m===void 0?(c=t,Ce(),t.rev>l&&pe(`Updated from the chat…`)):await b())}}catch{}be(e<12e4?2500:e<6e5?8e3:2e4)}function Se(e){return c?.palette.find(t=>t.name===e)?.hex??e}function Ce(){if(c){for(let t of e){let e=c.colors[t],n=e.length>1;h[t]=Math.min(h[t],e.length-1);let r=e[h[t]];$(`solid-${t}`).setAttribute(`aria-pressed`,String(!n)),$(`gradient-${t}`).setAttribute(`aria-pressed`,String(n)),we(t,e);let a=$(`sw-${t}`);a.textContent=``;let o=[...c.palette];for(let t of[...new Set(e)].reverse())t.startsWith(`#`)&&!o.some(e=>e.name===t)&&o.unshift({name:t,hex:t});for(let e of o){let n=document.createElement(`button`);n.type=`button`,n.className=e.name===`clear`?`swatch clear`:`swatch`,n.style.background=e.hex,n.title=e.name,n.setAttribute(`aria-label`,`${t} colour: ${e.name}`),n.setAttribute(`aria-pressed`,String(r===e.name)),n.addEventListener(`click`,()=>void S(t,e.name)),a.append(n)}$(`pick-${t}`).value=Se(r),$(`dropper-${t}`).hidden=!i}$(`price`).textContent=`Full-colour print · ${c.price.label} + shipping`,s.hidden||ge()}}function we(e,i){let a=$(`stops-${e}`);if(a.hidden=i.length<2,a.textContent=``,i.length<2)return;let o=document.createElement(`div`);o.className=`track`,o.style.background=`linear-gradient(90deg, ${i.map(Se).join(`, `)})`,i.forEach((t,n)=>{let r=document.createElement(`button`);r.type=`button`,r.className=`stop`,r.style.left=`calc(11px + (100% - 22px) * ${n/(i.length-1)})`,r.style.background=Se(t),r.title=t,r.setAttribute(`aria-label`,`${e} gradient colour ${n+1} of ${i.length}: ${t}`),r.setAttribute(`aria-pressed`,String(n===h[e])),r.addEventListener(`click`,()=>{h[e]=n,Ce()}),o.append(r)});let s=Te(`+`,`${e}: add a gradient colour`,i.length>=t,()=>{h[e]=i.length,De(e,[...i,x(i[i.length-1])])}),l=Te(`−`,`${e}: remove the selected gradient colour`,i.length<=2,()=>{De(e,i.filter((t,n)=>n!==h[e]))}),u=c?.gradientAngles[e]??0,d=Te(``,`${e}: turn the gradient 45° (now ${u}°)`,!1,()=>void Oe(e,(u+45)%360));d.innerHTML=n,d.style.transform=`rotate(${r[e]-u}deg)`,a.append(d,o,s,l)}function Te(e,t,n,r){let i=document.createElement(`button`);return i.type=`button`,i.className=`icon-button`,i.textContent=e,i.title=t,i.setAttribute(`aria-label`,t),i.disabled=n,i.addEventListener(`click`,r),i}function x(e){return e===`violet`?`sky`:`violet`}function Ee(e){let t=/^rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(e);return t?`#${t.slice(1,4).map(e=>Number(e).toString(16).padStart(2,`0`)).join(``)}`:e.toLowerCase()}async function S(e,t){if(!c)return;let n=[...c.colors[e]];n[h[e]]=t,await De(e,n)}async function De(e,t){if(!c)return;let n=c.colors[e];t.length===n.length&&t.every((e,t)=>e===n[t])||(ce=Date.now(),c={...c,colors:{...c.colors,[e]:t}},Ce(),g(`Saving…`),await y(),await b({colors:{[e]:t}}))}async function Oe(e,t){!c||c.gradientAngles[e]===t||(ce=Date.now(),c={...c,gradientAngles:{...c.gradientAngles,[e]:t}},Ce(),g(`Saving…`),await y(),await b({gradientAngles:{[e]:t}}))}for(let t of e)$(`solid-${t}`).addEventListener(`click`,()=>{if(!c||c.colors[t].length<2)return;let e=c.colors[t][h[t]];h[t]=0,De(t,[e])}),$(`gradient-${t}`).addEventListener(`click`,()=>{if(!c||c.colors[t].length>1)return;let[e]=c.colors[t];h[t]=1,De(t,[e,x(e)])}),$(`pick-${t}`).addEventListener(`change`,e=>{S(t,e.target.value.toLowerCase())}),$(`dropper-${t}`).addEventListener(`click`,async()=>{if(i)try{let{sRGBHex:e}=await new i().open();await S(t,Ee(e))}catch{}});var ke=!1;async function Ae(){if(!c||ke)return;ke=!0,ce=Date.now();let e=$(`order`);e.disabled=!0,g(`Opening checkout…`);try{await y(),(m!==void 0||ae)&&await b();let e=await gg(ue,`checkout_camera`,{designId:c.designId}),t=e.structuredContent;if(e.isError||typeof t?.checkoutUrl!=`string`){g(`Couldn't open checkout. Ask in the chat to order it.`);return}await yg(ue,t.checkoutUrl),g(`Checkout is open in your browser. Your design and price carry over.`),_g(ue,`The user pressed Order on camera design ${c.designId} and opened its checkout page for revision ${t.rev} on the web: ${t.checkoutUrl} . They enter their address, see shipping and pay there. If they ask to order or for the link again, call checkout_camera: the design may have changed since.`)}catch{g(`Couldn't open checkout. Ask in the chat to order it.`)}finally{ke=!1,e.disabled=!1}}$(`customize`).addEventListener(`click`,()=>{ce=Date.now(),vg(ue)}),$(`order`).addEventListener(`click`,()=>void Ae()),new MutationObserver(()=>{$(`customize`).textContent=document.documentElement.dataset.displayMode===`fullscreen`?`Done`:`Customize`}).observe(document.documentElement,{attributes:!0,attributeFilter:[`data-display-mode`]});function je(e,t){gg(ue,`report_viewer_status`,{...c?{designId:c.designId}:{},writer:a,event:e,...ie===void 0?{}:{webgpu:ie},...t?{detail:t}:{},userAgent:navigator.userAgent.slice(0,300),displayMode:document.documentElement.dataset.displayMode??`inline`}).catch(()=>{})}}))();</script>
   </head>
   <body>
     <div class="card" id="card">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/mcp-ui",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "MCP Apps widgets for Womp's MCP server — interactive cards rendered inline in Claude and other MCP hosts.",
   "license": "MIT",
   "type": "commonjs",

package/src/openai-camera/main.ts

@@ -612,10 +612,14 @@ async function order() {
     }
     await openExternal(app, quote.checkoutUrl);
     setStatus("Checkout is open in your browser. Your design and price carry over.");
+    // The link itself, and when to fetch a new one: told only that checkout
+    // was open, the model once answered "order it" with the 3D viewer's URL
+    // as the checkout link (2026-10-19).
     void pushModelContext(
       app,
-      `The user pressed Order on camera design ${design.designId}, revision ${quote.rev}, and opened its checkout ` +
-        `on the web, where they enter their address, see shipping and pay.`,
+      `The user pressed Order on camera design ${design.designId} and opened its checkout page for revision ` +
+        `${quote.rev} on the web: ${quote.checkoutUrl} . They enter their address, see shipping and pay there. If they ` +
+        `ask to order or for the link again, call checkout_camera: the design may have changed since.`,
     );
   } catch {
     setStatus("Couldn't open checkout. Ask in the chat to order it.");